::selection {
    color:#141414;
    background-color:#ffff00;
}

::-webkit-scrollbar {
    display: none;
}

/*** Navigation Accordéon ***/
.accordion {
    display: flex;
    margin: 0;
    padding: 0;
    height:100vh;
    overflow: hidden;
    list-style-type: none;
  }
.accordion_item {
    width:60px;
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-right:1px solid #141414;
    cursor: pointer;
    transition: all .6s ease-in-out;
  }
.accordion_item:hover {
    background: #141414;
}
.accordion_item:hover h2 a {
    color:#fff;
}
.a_propos.accordion_item:hover {
    background: #fff;
}
.accordion_item.active {
    width: calc(100% - 120px);
    background: #fff;
    cursor: default;
}
.accordion_item.active .section-title {
    display:none;
}
.accordion_item .section-title {
    width: 60px !important;
    height: 100vh;
    margin: 0;
    padding: 0;
    color: #141414;
}
.accordion_item .section-title h2 {
    font-family: din-2014, sans-serif; 
    font-weight: 300;   
    font-style: normal;
    font-size:16px;
    letter-spacing:2px;
    margin: 0;
    transform: rotate(-90deg);
    width:200px;
    text-align: left;
}
.accordion_item .section-title a {
    color:#141414;
    text-decoration: none;
}
.accordion_item .section-title h2 strong {
    font-weight: 600; 
}
.accordion_item.a_propos {
    border:0;
}
.logo_rotate {
    width: 54px;
    transform: rotate(90deg);
    margin: 50px 0 0 2px;
    animation:fadeIn 1.4s ease-in-out;
}
.accordion_item.a_propos:hover .logo_rotate {
    transform: rotate(60deg);    
}
.accordion_item.print {
    height:100vh;
    position:relative;
    border-left:1px solid #141414;
}
.accordion_item.webdesign {
    height:100vh;
    position:relative;
}
.accordion_item.print::before, .accordion_item.webdesign::before {
    content:url(../img/quote-icon.svg);
    display: block;
    position: absolute;
    width:20px;
    top:58px;
    left:calc(50% - 10px);
}
.accordion_item.print:hover::before, .accordion_item.webdesign:hover::before {
    content:url(../img/quote-icon-white.svg);
    display: block;
    position: absolute;
    width:20px;
    top:58px;
    left:calc(50% - 10px);
}
.accordion_item.print.active::before, .accordion_item.webdesign.active::before {
    display:none;
}
.accordion_item.print .section-title h2, .accordion_item.webdesign .section-title h2 {
    position:absolute;
    left: calc(50% - 100px);
    bottom:140px;
}
.accordion_item .section-content {
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all .25s .1s ease-out;
}


.accordion_item.active .section-content {
    width:100%;
    opacity: 1;
    transform: scaleX(1);
    color: #141414;
    padding: 0 120px 0 90px;
    height:100vh;
    overflow:auto;
    overflow-x:hidden;
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

/********* Mentions légales *********/
.mentions_legales {
    width:80%;
    margin:0 auto;
}
.mentions_legales h1 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 60px;
    line-height: 1em; 
    padding-top:80px;
}
.mentions_legales p {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    line-height: 1.6em;
}
.mentions_legales a {
    color:#141414;
    text-decoration:underline;
}

/********* Erreur 404 *********/
.erreur {
    width:80%;
    margin:0 auto;
}
.flex {
    display:flex;
    justify-content: flex-start;
    padding: 160px 0 70px;
}
.textes {
    width:38%;
    margin-right:4%;
}
video {
    width:56%;
}
.erreur h1 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 145px;
    line-height: 0.8em;
    color: transparent;
    -webkit-text-stroke: 1px #141414;
    margin:0;
}
.erreur h2 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 74px;
    line-height: 1em;
    margin: 0;
    padding-left: 60px;
}
.erreur .textes p {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:22px;
    line-height:1.5em; 
    letter-spacing: 1px;
    margin:0;
    padding:50px 0 30px 0;
}
.erreur .textes a {
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 0.6em;
    color: #141414;
    letter-spacing: 2px;
    text-decoration:none;
    position:relative;
    padding:0 0 0 25px;
}
.erreur .textes a::before {
    content:url("../img/arrow-icon.svg");
    width: 15px;
    display: block;
    position: absolute;
    bottom: 7px;
    left: 0;
    transform: rotate(180deg);
}

/*** Footer ***/
.contact, .footer-bottom {
    display:flex;
    align-items: flex-end;
}
.contact {
    padding:60px 0 30px 0;
    border-bottom:1px solid #141414;
}
.footer-bottom {
    padding:30px 0;
}
.mail, .reseaux_sociaux, .credits, .love {
    width:50%;
}
.mail p {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 400;
    font-style: normal;
    font-size:46px;
    line-height:1em; 
    margin:0;
}
.banana a {
    text-decoration: underline;
    margin:0;
    color:#141414;
}
.banana a:hover {
    opacity:0.2;
    cursor: url("../img/banana-icon.svg"), auto;
}
a.email {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:20px;
    letter-spacing:1px; 
    text-decoration:none;
    color: #141414;
    padding:15px 0 0 25px;
    display: block;
    position:relative;
    width:max-content;
}
a.email::before {
    content: url('../img/arrow-icon.svg');
    width: 15px;
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: rotate(180deg);
}
a.email:hover {
    opacity:0.2;
    cursor: url("../img/mail-icon.svg"), auto;
}
.reseaux_sociaux {
    text-align:right;
}
.reseaux_sociaux a {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:18px;
    letter-spacing:1px; 
    text-decoration:none;
    color: #141414;
    padding:15px 0 0 25px;
    position:relative;
}
.reseaux_sociaux a:first-child {
    margin-right:20px;
}
.reseaux_sociaux a::before {
    content: url('../img/arrow-icon.svg');
    width: 15px;
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: rotate(180deg);
}
.reseaux_sociaux a:first-child:hover {
    opacity:0.2;
    cursor: url("../img/linkedin-icon.svg"), auto;
}
.reseaux_sociaux a:last-child:hover {
    opacity:0.2;
    cursor: url("../img/malt-icon.svg"), auto;
}
.credits p {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:12px;
    display:inline-block;
    margin:0;
    padding-right:10px;
    border-right:1px solid #141414;
}
.credits a {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:12px;
    color: #141414;
    text-decoration: none;
    display:inline-block;
    margin-left:10px;
}
.love p {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:12px;
    margin:0;
    text-align:right;
    padding-right:16px;
    position:relative;
}
.love p::before {
    content:url("../img/heart-icon.svg");
    width:12px;
    display:block;
    position:absolute;
    bottom:0;
    right:0;
}
.love p:hover::before {
    content:url("../img/heart-fill-icon.svg");
    width:12px;
    display:block;
    position:absolute;
    bottom:0;
    right:0;
}


/*** À Propos ***/
.logo {
    width: 72px;
    position:sticky;
    top:50px;
}
.accordion_item.a_propos h1 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 300;
    font-style: normal;
    font-size:145px;
    line-height: 0.8em;
    margin:0;
    color:transparent;
    -webkit-text-stroke: 1px #141414;
    padding:140px 0 0;
}
.accordion_item.a_propos h1 strong {
    display:block;
}
.accordion_item.a_propos h1 strong:last-child {
    padding-left:50px;
}
.accordion_item.a_propos h2 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size:106px;
    line-height:1em;
    margin:0;
    padding-left:120px;
    position:relative;
    width:max-content;
}
.accordion_item.a_propos h2 a {
    color:#141414;
    text-decoration: none;
}
.accordion_item.a_propos h2::before {
    content:"ÏS";
    font-weight: 900;
    font-style: normal;
    font-size:106px;
    line-height:1em;
    position:absolute;
    right:-82px;
}
.accordion_item.a_propos h2:hover::before {
    content:url("../img/anabanana-logo-yellow.svg");
    width:75px;
    transform:rotate(70deg);
    position:absolute;
    right:-78px;
}
.accordion_item.a_propos:hover h2 {
    color:#141414;
}
.accordion_item.a_propos .intro {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:24px;
    line-height:1.5em; 
    padding: 100px 90px 20px 120px;
    margin:0;
}
.marketing, .infog, .web, .mexiiico {
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: italic;
    text-decoration: underline;
}
.marketing:hover {
    opacity:0.2;
    cursor: url("../img/marketing-icon.svg"), auto;
}
.infog:hover {
    opacity:0.2;
    cursor: url("../img/infographie-icon.svg"), auto;   
}
.web:hover {
    opacity:0.2;
    cursor: url("../img/webdesign-icon.svg"), auto;   
}
.mexiiico:hover {
    opacity:0.2;
    cursor: url("../img/mexiiico-icon.svg"), auto;   
}
.accordion_item.a_propos .parcours {
    padding: 0 90px 80px 120px;
}
.accordion_item.a_propos .diplome {
    border-bottom:1px solid #141414;
    padding: 40px 0;
}
.accordion_item.a_propos .annees {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:18px;
    letter-spacing:2px;
    padding-bottom:5px;
}
.accordion_item.a_propos .ecole {
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size:28px;
    letter-spacing:1px;
}
.accordion_item.a_propos .experience {
    display:flex;
    align-items: flex-end;
    padding-top:15px;
}
.accordion_item.a_propos .nom_diplome, .accordion_item.a_propos .entreprise {
    width:50%;
}
.accordion_item.a_propos .nom_diplome {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:22px;
    line-height:1.3em;
    letter-spacing:1px; 
}
.accordion_item.a_propos .entreprise {
    text-align: right;
}
.accordion_item.a_propos .entreprise a {
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size:18px;
    letter-spacing:1px; 
    text-decoration:none;
    color: #141414;
    display:block;
    position:relative;
    padding-right:20px;
}
.accordion_item.a_propos .entreprise a::before {
    content:url("../img/arrow-icon.svg");
    width: 15px;
    display: block;
    position: absolute;
    bottom: 1px;
    right: 0;
    transform: rotate(90deg);
}
.accordion_item.a_propos .text_anim {
    padding:20px 0 60px;
}
.accordion_item.a_propos .c-rail-static {
    white-space: nowrap;
    transform: translateZ(0);
}
.accordion_item.a_propos .c-rail-static {
    display:inline-block;
    animation-play-state:running;
    -webkit-animation-play-state: running;
    animation : railStatic 100s linear infinite;
    -webkit-animation: railStatic 100s linear infinite;
}
.accordion_item.a_propos .c-rail-static:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.accordion_item.a_propos .c-rail-static_label {
    display: inline-block;
    font-family: ohno-fatface-narrow, serif;
    font-weight: 100;
    font-style: normal;
    font-size:78px;
    color:transparent;
    -webkit-text-stroke: 1px #141414;
    padding-right:20px;
}
@keyframes railStatic {
0% {
    transform:translateZ(0);
}
100% {
    transform:translate3d(-100%,0,0);
}
}


/*** Projets ***/
.projets {
    width:100%;
    padding:100px 0 0;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.type {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:16px;
    letter-spacing: 1px;
}
.nom {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size:50px;
    line-height:0.9em;
}
.type2 {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:20px;
    letter-spacing: 1px;
}
.nom2 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size:74px;
    line-height:0.9em;
    padding-bottom:20px;
}
#projet1, #projet2, #projet4, #projet5, #projet7, #projet8, #projet3, #projet6, #projet9, #projet10, #projet11, #projet12, #projet13, #projet14, #projet15, #projet16, #projet17, #projet18 {
    width:28%;
    margin:0 2.66% 20px;
    cursor:pointer;
}
.content {
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.projet-texte {
    width:35%;
    margin-right:5%;
}
.projet-texte p {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:16px;
    line-height:1.4em;
    margin:0;
    padding-top:15px;
}
.projet-texte p strong {
    font-weight: 600;
    padding-top:5px;
}
.projet-texte a {
    font-family: din-2014, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 2px;
    color:#141414;
    text-decoration: none;
    padding:0 0 0 28px;
    margin-top:30px;
    display:block;
    position:relative;
    font-size:18px;
}
.projet-texte a:hover {
    color:#141414 !important;
}
.projet-texte a:before {
    content: url('../img/arrow-icon.svg');
    width: 15px;
    display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
    transform: rotate(180deg);
}
.projet-img {
    width:60%;
    position:relative;
}
.projet-img img {
    width:100%;
    position:relative;
}
#projet1 .projet-img::before, #projet2 .projet-img::before, #projet3 .projet-img::before, #projet4 .projet-img::before, #projet5 .projet-img::before, #projet6 .projet-img::before, #projet7 .projet-img::before, #projet8 .projet-img::before, #projet9 .projet-img::before {
    content:"SCROLL";
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:12px;
    letter-spacing: 2px;
    color:#141414;
    display:block;
    position:absolute;
    top: 20px;
    right: 6px;
    transform: rotate(-90deg);
}
#projet1 .projet-img::after, #projet2 .projet-img::after, #projet3 .projet-img::after, #projet4 .projet-img::after, #projet5 .projet-img::after, #projet6 .projet-img::after, #projet7 .projet-img::after, #projet8 .projet-img::after, #projet9 .projet-img::after {
    content:url("../img/arrow-icon.svg");
    font-family: din-2014, sans-serif;
    width: 10px;
    display: block;
    position: absolute;
    top: 56px;
    right: 26px;
    transform: rotate(-135deg);
}
.maquette-scroll {
    width: 76.3%;
    height: 73.3%;
    overflow: auto;
    position: absolute;
    top: calc(100% - 94.6%);
    left: calc(100% - 88.1%);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.maquette-button {
    width:max-content;
    margin:8px 0 0 auto;
}
.maquette-button div {
    display:inline-block;
    margin-right:20px;
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:14px;
    letter-spacing: 1px;
}
.maquette-button div:last-child {
    margin-right:0;
}
.accordion_item.print h3, .accordion_item.webdesign h3 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 95px;
    line-height: 0.6em;
    margin: 0 2.66%;
    color: transparent;
    -webkit-text-stroke: 1px #141414;
    padding: 40px 0 0;
}
.accordion_item.print h4, .accordion_item.webdesign h4 {
    font-family: ohno-fatface-narrow, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 125px;
    line-height: 1em;
    margin: 0 2.66%;
}
#projet-content1, #projet-content2, #projet-content3, #projet-content4, #projet-content5, #projet-content6, #projet-content7, #projet-content8, #projet-content9, #projet-content10, #projet-content11, #projet-content12, #projet-content13, #projet-content14, #projet-content15, #projet-content16, #projet-content17, #projet-content18 {
    padding-bottom:100px;
}
#projet-title1 img, #projet-title2 img, #projet-title3 img, #projet-title4 img, #projet-title5 img, #projet-title6 img, #projet-title7 img, #projet-title8 img, #projet-title9 img, #projet-title10 img, #projet-title11 img, #projet-title12 img, #projet-title13 img, #projet-title14 img, #projet-title15 img, #projet-title16 img, #projet-title17 img, #projet-title18 img {
    width: 100%;
    display: block;
    position: relative;
    margin-top: -150px;
    opacity: 0;
}
#projet-title4 img, #projet-title6 img, #projet-title9 img, #projet-title10 img, #projet-title11 img, #projet-title14 img, #projet-title16 img {
    top: -50px;
}
#projet-title1:hover img, #projet-title2:hover img, #projet-title3:hover img, #projet-title4:hover img, #projet-title5:hover img, #projet-title6:hover img, #projet-title7:hover img, #projet-title8:hover img, #projet-title9:hover img, #projet-title10:hover img, #projet-title11:hover img, #projet-title12:hover img, #projet-title13:hover img, #projet-title14:hover img, #projet-title15:hover img, #projet-title16:hover img, #projet-title17:hover img, #projet-title18:hover img {
    width: 100%;
    display: block;
    position: relative;
    margin-top: -150px;
    opacity:1;
}
#projet1 a, #projet2 a, #projet3 a, #projet4 a, #projet5 a, #projet6 a, #projet7 a, #projet8 a, #projet9 a, #projet10 a, #projet11 a, #projet12 a, #projet13 a, #projet14 a, #projet15 a, #projet16 a, #projet17 a, #projet18 a {
    color:#141414;
    text-decoration:none;
}
#projet1 a:hover, #projet2 a:hover, #projet3 a:hover, #projet4 a:hover, #projet5 a:hover, #projet6 a:hover, #projet7 a:hover, #projet8 a:hover, #projet9 a:hover, #projet10 a:hover, #projet11 a:hover, #projet12 a:hover, #projet13 a:hover, #projet14 a:hover, #projet15 a:hover, #projet16 a:hover, #projet17 a:hover, #projet18 a:hover {
    color:#fff;
}
.accordion_item.print footer,.accordion_item.webdesign footer {
    margin: 0 2.66%;
}


/************************************************ RESPONSIVE ************************************************/

@media all and (min-width: 1920px) {
    .accordion_item.active .section-content {
        padding: 0 260px;
    }
    .accordion_item.a_propos h1 {
        font-size: 175px;
    }
    .accordion_item.a_propos h2 {
        font-size: 146px;
    }
    .accordion_item.a_propos h2::before {
        font-size: 146px;
        right: -110px;
    }
    .accordion_item.a_propos h2:hover::before {
        width:110px;
        right:-110px;
    }
    .mentions_legales, .erreur {
        width:60%;
        margin:0 auto;
    }
}

@media all and (min-width: 1100px) and (max-width: 1439px) {
    .accordion_item.active .section-content {
        padding: 0 60px;
    }
    .accordion_item.a_propos h1 {
        font-size: 125px;
    }
    .accordion_item.a_propos h2 {
        font-size: 86px;
    }
    .accordion_item.a_propos h2::before {
        font-size: 86px;
        right: -66px;
    }
    .accordion_item.a_propos h2:hover::before {
        width:65px;
        right:-65px;
    }
    .nom {
        font-size: 45px;
    }
    .nom2 {
        font-size: 57px;
    }
    .type2 {
        font-size: 18px;
    }
    .erreur h2 {
        font-size: 68px;
        padding-left: 0px;
    }
}

@media all and (min-width: 980px) and (max-width: 1099px) {
    .accordion_item.active .section-content {
        padding: 0 60px;
    }
    .accordion_item.a_propos h1 {
        font-size: 109px;
    }
    .accordion_item.a_propos h1 strong:last-child {
        padding-left: 30px;
    }
    .accordion_item.a_propos h2 {
        font-size: 84px;
        padding-left: 60px;
    }
    .accordion_item.a_propos h2::before {
        font-size: 84px;
        right: -64px;
    }
    .accordion_item.a_propos h2:hover::before {
        width:63px;
        right:-63px;
    }
    .accordion_item.a_propos .intro {
        padding: 100px 15px 20px 60px;
    }
    .accordion_item.a_propos .parcours {
        padding: 0 15px 80px 60px;
    }
    .mail {
        width: 56%;
    }
    .reseaux_sociaux {
        width: 44%;
    }
    .nom {
        font-size: 41px;
    }
    .type {
        font-size: 14px;
    }
    .nom2 {
        font-size: 49px;
    }
    .type2 {
        font-size: 16px;
    }
    .projet-texte a {
        font-size: 16px;
        padding: 0 0 0 24px;
    }
    .projet-texte a::before {
        width: 13px;
    }
    #projet1 .projet-img::before, #projet2 .projet-img::before, #projet3 .projet-img::before, #projet4 .projet-img::before, #projet5 .projet-img::before, #projet6 .projet-img::before, #projet7 .projet-img::before, #projet8 .projet-img::before, #projet9 .projet-img::before {
        right: 0px;
    }
    #projet1 .projet-img::after, #projet2 .projet-img::after, #projet3 .projet-img::after, #projet4 .projet-img::after, #projet5 .projet-img::after, #projet6 .projet-img::after, #projet7 .projet-img::after, #projet8 .projet-img::after, #projet9 .projet-img::after {
        right: 20px;
    }
    #projet-title4 img, #projet-title6 img {
        top: -30px;
    }
    #projet-title9 img {
        top: -80px;
    }
    #projet1, #projet2, #projet4, #projet5, #projet7, #projet8, #projet3, #projet6, #projet9, #projet10, #projet11, #projet12, #projet13, #projet14, #projet15, #projet16, #projet17, #projet18 {
        margin: 0 2.66% 80px;
    }
    .projets {
        margin-bottom: -50px;
    }
    #projet-content1, #projet-content2, #projet-content3, #projet-content4, #projet-content5, #projet-content6, #projet-content7, #projet-content8, #projet-content9, #projet-content10, #projet-content11, #projet-content12, #projet-content13, #projet-content14, #projet-content15, #projet-content16, #projet-content17, #projet-content18 {
        padding-bottom: 60px;
    }
    .erreur h2 {
        font-size: 60px;
    }
    .erreur h1 {
        font-size: 135px;
    }
    .erreur .textes p {
        font-size: 20px;
    }
}

@media all and (min-width: 768px) and (max-width: 979px) {
    .accordion_item.active .section-content {
        padding: 0 30px 0 30px;
    }
    .accordion_item.a_propos h1 {
        font-size: 93px;
        padding: 120px 0 0;
        line-height: 0.9em;
    }
    .accordion_item.a_propos h1 strong:last-child {
        padding-left: 0px;
    }
    .accordion_item.a_propos h2 {
        font-size: 74px;
        padding-left: 0;
        line-height: 1.1em;
    }
    .accordion_item.a_propos h2::before {
        font-size: 74px;
        right: -58px;
        line-height: 1.1em;
    }
    .accordion_item.a_propos h2:hover::before {
        width:56px;
        right:-56px;
    }
    .accordion_item.a_propos .intro {
        padding: 80px 0px 20px 0px;
        font-size: 22px;
    }
    .accordion_item.a_propos .parcours {
        padding: 0 0px 80px 0px;
    }
    .accordion_item.a_propos .annees {
        font-size: 16px;
        padding-bottom: 2px;
    }
    .accordion_item.a_propos .ecole {
        font-size: 24px;
    }
    .accordion_item.a_propos .nom_diplome {
        font-size: 19px;
    }
    .accordion_item.a_propos .entreprise a {
        font-size: 16px;
    }
    .accordion_item.a_propos .entreprise a::before {
        width: 13px;
    }
    .mail {
        width: 100%;
    }
    .reseaux_sociaux {
        width: 40%;
    }
    .credits {
        width: 65%;
    }
    .love {
        width: 35%;
    }
    .accordion_item.print h3, .accordion_item.webdesign h3 {
        font-size: 75px;
    }
    .accordion_item.print h4, .accordion_item.webdesign h4 {
        font-size: 94px;
    }
    #projet1, #projet2, #projet4, #projet5, #projet7, #projet8, #projet3, #projet6, #projet9, #projet10, #projet11, #projet12, #projet13, #projet14, #projet15, #projet16, #projet17, #projet18 {
        width: 46%;
        margin: 0 2% 20px;
    }
    .nom {
        font-size: 45px;
    }
    .type {
        font-size: 14px;
    }
    .content {
        display:block;
    }
    .projet-texte {
        width: 100%;
        margin-right: 0;
        padding-bottom: 40px;
    }
    .projet-img {
        width: 100%;
        position: relative;
    }
    .nom2 {
        font-size: 66px;
        padding-bottom: 10px;
    }
    .type2 {
        font-size: 16px;
    }
    .projet-texte a {
        font-size: 16px;
        padding: 0 0 0 24px;
    }
    .projet-texte a::before {
        width: 13px;
    }
    #projet10 .projet-img img,  #projet11 .projet-img img,  #projet12 .projet-img img,  #projet13 .projet-img img,  #projet14 .projet-img img,  #projet15 .projet-img img,  #projet16 .projet-img img,  #projet17 .projet-img img,  #projet18 .projet-img img {
        width: 114%;
        position: relative;
        margin-left: -14%;
    }
    .maquette-button div {
        margin-right: 12px;
    }
    .flex {
        display: block;
        padding: 100px 0 70px;
    }    
    .textes, video {
        width: 100%;
        padding-bottom:30px;
    }
    .erreur .textes p {
        font-size: 21px;
    }
}

@media all and (min-width: 480px) and (max-width: 767px) {
    .logo {
        position: relative;
    }
    .logo_rotate {
        width: 44px;
    }
    .accordion_item.active {
        width: calc(100% - 100px);
    }
    .accordion_item {
        width: 50px;
    }
    .accordion_item.active .section-content {
        padding: 0 20px;
    }
    .accordion_item.a_propos h1 {
        font-size: 53px;
        line-height: 0.9em;
    }
    .accordion_item.a_propos h1 strong:last-child {
        padding-left: 0px;
    }
    .accordion_item.a_propos h2 {
        font-size: 42px;
        line-height: 1.1em;
        padding-left: 0;
    }
    .accordion_item.a_propos h2::before {
        font-size: 42px;
        line-height: 1.1em;
        right: -34px;
    }
    .accordion_item.a_propos h2:hover::before {
        width:35px;
        right:-35px;
    }
    .accordion_item.a_propos .intro {
        font-size: 20px;
        padding: 50px 0px 20px;
    }
    .accordion_item.a_propos .parcours {
        padding: 10px 0 40px;
    }
    .accordion_item.a_propos .diplome {
        padding: 30px 0;
    }
    .accordion_item.a_propos .annees {
        font-size: 15px;
        padding-bottom: 2px;
    }
    .accordion_item.a_propos .ecole {
        font-size: 25px;
    }
    .accordion_item.a_propos .experience {
        display: block;
        padding-top: 8px;
    }
    .accordion_item.a_propos .nom_diplome, .accordion_item.a_propos .entreprise {
        width: 100%;
    }
    .accordion_item.a_propos .nom_diplome {
        font-size: 18px;
    }
    .accordion_item.a_propos .entreprise {
        text-align: left;
        padding-top: 10px;
    }
    .accordion_item.a_propos .entreprise a {
        width: max-content;
        font-size: 15px;
    }
    .accordion_item.a_propos .entreprise a::before {
        width: 11px;
    }
    .text_anim {
        display:none;
    }
    .contact, .footer-bottom {
        display: block;
    }
    .mail, .reseaux_sociaux, .credits, .love {
        width: 100%;
    }
    .mail p {
        font-size: 36px;
    }
    .reseaux_sociaux {
        text-align: left;
    }
    .reseaux_sociaux a {
        padding: 20px 0 0 25px;
        display: block;
        width:max-content;
    }
    a.email {
        padding: 20px 0 0 25px;
    }
    .credits{
        text-align: center;
    }
    .love p {
        text-align: center;
        padding-top: 20px;
    }
    .love p::before, .love p:hover::before {
        right: calc(50% - 34px);
    }
    .projets {
        padding: 70px 0 0;
    }
    #projet1, #projet2, #projet4, #projet5, #projet7, #projet8, #projet3, #projet6, #projet9, #projet10, #projet11, #projet12, #projet13, #projet14, #projet15, #projet16, #projet17, #projet18 {
        width: 96%;
        margin: 0 4% 20px;
    }
    .accordion_item.print h3, .accordion_item.webdesign h3 {
        font-size: 54px;
        margin: 0 4%;
    }
    .accordion_item.print h4, .accordion_item.webdesign h4 {
        font-size: 54px;
        line-height: 1.2em;
        margin: 0 4%;
    }
    .type {
        font-size: 20px;
    }
    .nom {
        font-size: 63px;
    }
    .type2 {
        font-size: 15px;
    }
    .content {
        display: block;
    }
    .projet-texte {
        width: 100%;
        margin-right: 0;
        padding-bottom:30px;
    }
    .projet-img {
        width: 100%;
        position: relative;
    }
    #projet10 .projet-img img,  #projet11 .projet-img img,  #projet12 .projet-img img,  #projet13 .projet-img img,  #projet14 .projet-img img,  #projet15 .projet-img img,  #projet16 .projet-img img,  #projet17 .projet-img img,  #projet18 .projet-img img {
        width: 114%;
        position: relative;
        margin-left: -14%;
    }
    .maquette-button {
        width: max-content;
        margin: 0 auto 0 0;
    }
    .maquette-button div {
        display: block;
        margin-right: 0px;
        font-size: 14px;
        padding: 20px 14px 0 0;
    }
    .projet-texte a {
        font-size: 16px;
        padding: 0 0 0 24px;
    }
    .projet-texte a::before {
        width: 13px;
    }
    .maquette-scroll {
        width: 76.2%;
        height: 42.3%;
        top: calc(100% - 96.8%);
        left: calc(100% - 88.1%);
    }
    #projet1 .projet-img::before, #projet2 .projet-img::before, #projet3 .projet-img::before, #projet4 .projet-img::before, #projet5 .projet-img::before, #projet6 .projet-img::before, #projet7 .projet-img::before, #projet8 .projet-img::before, #projet9 .projet-img::before {
        right: -10px;
    }
    #projet1 .projet-img::after, #projet2 .projet-img::after, #projet3 .projet-img::after, #projet4 .projet-img::after, #projet5 .projet-img::after, #projet6 .projet-img::after, #projet7 .projet-img::after, #projet8 .projet-img::after, #projet9 .projet-img::after {
        right: 10px;
    }
    .flex {
        display: block;
        padding: 100px 0 70px;
    }    
    .textes, video {
        width: 100%;
        padding-bottom:30px;
    }
    .erreur .textes p {
        font-size: 21px;
    }
    .erreur h2 {
        padding-left: 0px;
    }
}

@media all and (min-width: 320px) and (max-width: 479px) {
    .logo {
        position: relative;
    }
    .logo_rotate {
        width: 34px;
    }
    .accordion_item.active {
        width: calc(100% - 80px);
    }
    .accordion_item {
        width: 40px;
    }
    .accordion_item.active .section-content {
        padding: 0 20px;
    }
    .accordion_item.a_propos h1 {
        font-size: 31px;
        line-height: 1em;
        padding: 100px 0 0;
    }
    .accordion_item.a_propos h1 strong:last-child {
        padding-left: 0px;
    }
    .accordion_item.a_propos h2 {
        font-size: 60px;
        line-height: 0.9em;
        padding-left: 0;
        width: 100%;
    }
    .accordion_item.a_propos h2::before {
        font-size: 60px;
        line-height: 0.9em;
        right: 62px;
        bottom:0;
    }
    .accordion_item.a_propos h2:hover::before {
        width:46px;
        right:60px;
    }
    .accordion_item.a_propos .intro {
        font-size: 20px;
        padding: 50px 0px 20px;
    }
    .accordion_item.a_propos .parcours {
        padding: 10px 0 40px;
    }
    .accordion_item.a_propos .diplome {
        padding: 30px 0;
    }
    .accordion_item.a_propos .annees {
        font-size: 15px;
        padding-bottom: 2px;
    }
    .accordion_item.a_propos .ecole {
        font-size: 25px;
    }
    .accordion_item.a_propos .experience {
        display: block;
        padding-top: 8px;
    }
    .accordion_item.a_propos .nom_diplome, .accordion_item.a_propos .entreprise {
        width: 100%;
    }
    .accordion_item.a_propos .nom_diplome {
        font-size: 18px;
    }
    .accordion_item.a_propos .entreprise {
        text-align: left;
        padding-top: 10px;
    }
    .accordion_item.a_propos .entreprise a {
        width: max-content;
        font-size: 15px;
    }
    .accordion_item.a_propos .entreprise a::before {
        width: 11px;
    }
    .text_anim {
        display:none;
    }
    .contact, .footer-bottom {
        display: block;
    }
    .mail, .reseaux_sociaux, .credits, .love {
        width: 100%;
    }
    .mail p {
        font-size: 36px;
    }
    .reseaux_sociaux {
        text-align: left;
    }
    .reseaux_sociaux a {
        padding: 20px 0 0 25px;
        display: block;
    }
    a.email {
        padding: 20px 0 0 25px;
    }
    .credits{
        text-align: center;
    }
    .love p {
        text-align: center;
        padding-top: 20px;
    }
    .love p::before, .love p:hover::before {
        right: calc(50% - 34px);
    }
    .projets {
        padding: 70px 0 0;
    }
    #projet1, #projet2, #projet4, #projet5, #projet7, #projet8, #projet3, #projet6, #projet9, #projet10, #projet11, #projet12, #projet13, #projet14, #projet15, #projet16, #projet17, #projet18 {
        width: 96%;
        margin: 0 4% 70px;
    }
    .accordion_item.print h3, .accordion_item.webdesign h3 {
        font-size: 42px;
        margin: 0 4%;
        line-height: 1em;
    }
    .accordion_item.print h4, .accordion_item.webdesign h4 {
        font-size: 51px;
        line-height: 0.8em;
        margin: 0 4%;
    }
    .type {
        font-size: 18px;
    }
    .nom {
        font-size: 37px;
    }
    .type2 {
        font-size: 15px;
        line-height: 1.4em;
    }
    .content {
        display: block;
    }
    .projet-texte {
        width: 100%;
        margin-right: 0;
        padding-bottom:30px;
    }
    .projet-img {
        width: 100%;
        position: relative;
    }
    #projet10 .projet-img img,  #projet11 .projet-img img,  #projet12 .projet-img img,  #projet13 .projet-img img,  #projet14 .projet-img img,  #projet15 .projet-img img,  #projet16 .projet-img img,  #projet17 .projet-img img,  #projet18 .projet-img img {
        width: 114%;
        position: relative;
        margin-left: -14%;
    }
    .maquette-button {
        width: max-content;
        margin: 0 auto 0 0;
    }
    .maquette-button div {
        display: block;
        margin-right: 0px;
        font-size: 14px;
        padding: 20px 14px 0 0;
    }
    .projet-texte a {
        font-size: 14px;
        padding: 0 0 0 20px;
    }
    .projet-texte a::before {
        width: 11px;
    }
    .maquette-scroll {
        width: 76.2%;
        height: 32%;
        top: calc(100% - 97.5%);
        left: calc(100% - 88.1%);
    }
    #projet1 .projet-img::before, #projet2 .projet-img::before, #projet3 .projet-img::before, #projet4 .projet-img::before, #projet5 .projet-img::before, #projet6 .projet-img::before, #projet7 .projet-img::before, #projet8 .projet-img::before, #projet9 .projet-img::before {
        right: -10px;
    }
    #projet1 .projet-img::after, #projet2 .projet-img::after, #projet3 .projet-img::after, #projet4 .projet-img::after, #projet5 .projet-img::after, #projet6 .projet-img::after, #projet7 .projet-img::after, #projet8 .projet-img::after, #projet9 .projet-img::after {
        right: 10px;
    }
    .credits p {
        padding: 0 0 10px;
        border-right: 0;
    }
    #projet-title4 img, #projet-title6 img, #projet-title9 img, #projet-title10 img, #projet-title11 img, #projet-title14 img, #projet-title16 img {
        top: 0;
    }
    #projet-title12 img, #projet-title17 img, #projet-title18 img {
        top:20px;
    }
    #projet-title15 img {
        top:30px;
    }
    .nom2 {
        font-size: 37px;
    }
    #projet-title1 img, #projet-title2 img, #projet-title3 img, #projet-title4 img, #projet-title5 img, #projet-title6 img, #projet-title7 img, #projet-title8 img, #projet-title9 img, #projet-title10 img, #projet-title11 img, #projet-title12 img, #projet-title13 img, #projet-title14 img, #projet-title15 img, #projet-title16 img, #projet-title17 img, #projet-title18 img {
        top: 40px;
    }
    #projet1 .projet-img::before, #projet2 .projet-img::before, #projet3 .projet-img::before, #projet4 .projet-img::before, #projet5 .projet-img::before, #projet6 .projet-img::before, #projet7 .projet-img::before, #projet8 .projet-img::before, #projet9 .projet-img::before {
        display:none;
    }
    #projet1 .projet-img::after, #projet2 .projet-img::after, #projet3 .projet-img::after, #projet4 .projet-img::after, #projet5 .projet-img::after, #projet6 .projet-img::after, #projet7 .projet-img::after, #projet8 .projet-img::after, #projet9 .projet-img::after {
       display:none;
    }
    .flex {
        display: block;
        padding: 100px 0 70px;
    }    
    .textes, video {
        width: 100%;
        padding-bottom:30px;
    }
    .erreur .textes p {
        font-size: 21px;
    }
    .erreur h2 {
        padding-left: 0px;
        font-size: 52px;
    }
    .erreur h1 {
        font-size: 115px;
    }
}