/* STYLE GENERAL */

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

:root{
    --primary-color: #131313;
    --secondary-color: #f3dbc7;
    --tertiary-color: #f5eee6;

    --font-roman: 'nRoman';
    --font-light: 'nLight';
    --font-medium: 'nMedium';
    --font-bold: 'nBold';

    --primary-radius: 50px;
}

html, body{
    width: 100%;
    overflow-x: hidden;
}

html{
    font-size: 16px;
    scroll-behavior: smooth;
}

body{
    background-color: var(--primary-color);
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* HEADER */

header {
    width: 100vw;
    height: 100px;
    position: fixed;
    backdrop-filter: blur(7px);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

header > a {
    height: 50%;
}

header > a > img {
    height: 100%;
    transition: opacity .4s ease;
}

header > nav:nth-child(2) {
    font-family: var(--font-medium);
    padding: 0 25%;
}

.logo, .underline, .res {
    color: var(--tertiary-color);
}

.nom_sections {
    display: flex;
    justify-content: center;
    gap: 37px;
}

.nom_sections li {
    position: relative;
}

.underline {
    position: relative;
    font-size: 1rem;
    text-transform: uppercase;
    overflow: hidden;
    transition: color .4s ease;
}

.underline::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--tertiary-color);
    transition: width 0.4s ease, right 0.4s ease;
}

.underline.active::after {
    background-color: var(--primary-color);
}

.underline:hover::after{
    width: 100%;
    right: 0;
}

.underline:not(:hover)::after{
    width: 0;
    right: 0;
}

.res_header {
    display: flex;
    gap: 25px;
}

.res {
    font-size: 1.375rem;
    transition: transform 0.4s ease;
}

.res:hover {
    transform: scale(1.1);
}

.progress_bar {
    height: 3px;
    background-color: var(--tertiary-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    transition: width 0.4s ease;
    z-index: 9999;
}

.burger, .menu_detail {
    display: none;
}

/* RESPONSIVE HEADER */

@media screen and (max-width: 1400px) {
    header > a { height: 45%; }
    header > nav:nth-child(2) { padding: 0 15%; }
}

@media screen and (max-width: 1200px) {
    header > nav:nth-child(2) { padding: 0 10%; }
    .nom_sections > li > a { font-size: 0.9375rem; }
    .res { font-size: 1.3125rem; }
}

@media screen and (max-width: 1023px) {
    header {
        padding: 0 40px;
        justify-content: space-between;
    }

    header > nav:nth-child(2), .res_header {
        display: none;
    }

    .menu_detail {
        display: block;
        position: fixed;
        height: 50vh;
        padding: 20px 40px;
        right: -100px;
        top: 120px;
        background-color: #171717;
        border-width: 1px 0 1px 1px;
        border-style: solid;
        border-color: #f5eee618;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: right 1s ease;
        z-index: 9;
    }

    .menu_detail.active { right: 0; }

    .menu_detail > ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-end;
    }

    .menu_detail > ul > li > a {
        display: none;
        font-family: var(--font-roman);
        color: var(--tertiary-color);
        font-size: 0.875rem;
        text-transform: uppercase;
    }

    .menu_detail.active a {
        display: block;
        animation: fade 1.5s forwards;
    }

    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .burger {
        display: block;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .burger i {
        position: absolute;
        color: var(--tertiary-color);
        font-size: 2.1875rem;
        transition: opacity .4s ease, transform .4s ease;
    }

    .burger.active i.open {
        opacity: 0;
        transform: rotate(180deg);
    }

    .burger i.close {
        opacity: 0;
    }

    .burger.active i.close {
        opacity: 1;
        transform: rotate(180deg);
    }
}

@media screen and (max-width: 425px) {
    header {
        padding: 0 20px;
    }

    header > a { height: 40%; }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* ACCUEIL */

#accueil {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#accueil > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#accueil > div > figure {
    width: 100%;
    margin-bottom: 60px;
}

#accueil > div > figure > img {
    width: 100%;
    height: auto;
}

#accueil > div > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 275px;
    height: 57px;
    background-color: var(--secondary-color);
    border-radius: var(--primary-radius);
    color: var(--primary-color);
    font-family: var(--font-medium);
    text-transform: uppercase;
    font-size: .75rem;
    transition: transform 0.4s ease;
    margin-bottom: 35px;
}

#accueil a:hover {
    transform: scale(0.98);
}

/* RESPONSIVE ACCUEIL */

@media screen and (max-width: 1024px) {
    #accueil > div > figure {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    #accueil > div > figure {
        width: 80%;
        margin-bottom: 45px;
    }
}

@media screen and (max-width: 465px) {
    #accueil > div > a {
        width: 220px;
        height: 50px;
        font-size: .625rem;
        margin-bottom: 30px;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* ABOUT */

#about {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0 0 0;
    width: 100%;
}

.about_container {
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: 100%;
    background-color: #171717;
    padding: 15px 15px 30px 15px;
}

.about_container > figure {
    width: 100%;
    max-height: 700px;
}

.about_container > figure > img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.about_description_container {
    width: 100%;
}

.about_description_container > h1 {
    color: var(--tertiary-color);
    font-size: 1.3125rem;
    margin-bottom: 10px;
}

#prenom, #nom {
    font-family: var(--font-bold);
}

#nom {
    text-transform: uppercase;
}

#age {
    font-family: var(--font-light);
}

.about_description_container > hr {
    width: 31px;
    height: 1px;
    background-color: var(--secondary-color);
    border: none;
    margin-bottom: 3px;
}

.about_description_container > h2 {
    font-family: var(--font-roman);
    font-size: 1.0625rem;
    color: var(--secondary-color);
    margin-bottom: 25px;
}

.txt {
    color: var(--tertiary-color);
    text-align: justify;
    font-family: var(--font-light);
    font-size: .875rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.about_description_container > p {
    color: var(--secondary-color);
    font-size: .875rem;
    font-family: var(--font-medium);
    margin-bottom: 30px;
}

.about_description_container > p > a {
    color: var(--secondary-color);
    font-family: var(--font-roman);
    text-decoration: underline;
    position: relative;
}

.liens_about {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#CV, .res_about {
    height: 45px;
    background-color: var(--secondary-color);
    border-radius: var(--primary-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font-family: var(--font-medium);
    text-transform: uppercase;
    color: var(--primary-color);
    transition: all 0.4s ease;
}

#CV {
    width: 60%;
    font-size: .6875rem;
}

.res_about {
    width: 45px;
    font-size: 1rem;
}

/* RESPONSIVE ABOUT */

@media screen and (min-width: 425px){
    .about_container > figure > img {
        aspect-ratio: 5/4;
    }

    .txt {
        font-size: 15px;
    }

    #CV {
        width: 70%;
    }
}

@media screen and (min-width: 710px) {
    #about {
        padding: 100px 0;
        background-color: #171717;
    }

    .about_container {
        flex-direction: row;
        align-items: center;
        width: 95%;
        border-radius: 5px;
        padding: 10px;
    }

    .about_container > figure > img {
        aspect-ratio: 0;
    }

    .about_description_container {
        padding: 30px 5px;
    }

    #CV {
        width: 60%;
    }
}

@media screen and (min-width: 917px){
    .about_description_container {
        padding: 40px 25px;
    }

    .about_description_container > h1 {
        font-size: 1.4375rem;
        margin-bottom: 15px;
    }

    .about_description_container > hr {
        width: 40px;
        margin-bottom: 3px;
    }

    .about_description_container > h2 {
        font-size: 1.125rem;
    }

    .txt{
        line-height: 19px;
        margin: 0;
    }

    .about_description_container > p {
        margin: 7% 0;
    }

    #CV, .res_about {
        height: 47px;
    }

    #CV {
        font-size: .625rem;
        width: 65%;
    }

    .res_about {
        width: 47px;
    }
}

@media screen and (min-width: 1024px) { 
    #about{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .about_container > figure {
        flex: 0 0 40%;
        height: 100%;
    }

    .about_container > figure > img{
        width: 100%;
        height: 600px;
    }

    .about_description_container > h1 {
        font-size: 1.625rem;
        margin-bottom: 10px;
    }

    .about_description_container > hr {
        width: 40px;
    }

    .about_description_container > h2 {
        font-size: 1.25rem;
        margin-bottom: 35px;
    }

    .txt {
        font-size: .9375rem;
        line-height: 22px;
        gap: 15px;
        margin: 0 0 40px 0;
    }

    .about_description_container > p {
        font-size: .9375rem;
        margin: 0 0 40px 0;
    }

    #CV, .res_about {
        height: 57px;
    }

    #CV {
        font-size: .75rem;
    }

    .res_about {
        width: 57px;
    }

    #CV:hover, .res_about:hover {
        background-color: transparent;
        border: 1px solid var(--secondary-color);
        color: var(--secondary-color);
    }
}

@media screen and (min-width: 1330px) {
    .about_description_container {
        padding: 20px 30px;
    }

    .about_description_container > h1 {
        font-size: 1.875rem;
        margin-bottom: 15px;
    }

    .about_description_container > hr {
        width: 50px;
    }

    .about_description_container > h2 {
        font-size: 1.375rem;
        margin-bottom: 40px;
    }

    .txt {
        font-size: 1rem;
        gap: 25px;
    }
}

@media screen and (min-width: 1422px) {
    .about_container {
        width: 80%;
    }

    .res_about {
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 1651px) {
    .about_container {
        width: 70%;
    }

    #CV {
        width: 72%;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* AUDIOVISUEL & GRAPHISME */

#audiovisuel, #graphisme {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logiciels {
    text-transform: uppercase;
    font-size: .75rem;
    margin-bottom: 30px;
}

.lien_projets{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 181px;
    height: 57px;
    border-radius: var(--primary-radius);
    font-family: var(--font-medium);
    text-transform: uppercase;
    font-size: 0.75rem;
    transition: all ease 0.4s;
}

.lien_projets{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 181px;
    height: 57px;
    border-radius: 50px;
    font-family: 'nMedium';
    text-transform: uppercase;
    font-size: .75rem;
    transition: all ease .4s;
}

.viewer_description {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.viewer_description > p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    font-family: var(--font-light);
    padding: 5px 10px;
    border-radius: var(--primary-radius);
    border: 1px solid;
}

.viewer_audio .viewer_description {
    justify-content: flex-start;
    color: var(--tertiary-color);
    border-color: var(--tertiary-color);
}

.viewer_graph .viewer_description {
    justify-content: flex-start;
    flex-direction: row-reverse;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* AUDIOVISUEL */

.audiovisuel_container {
    display: flex;
    align-items: center;
    gap: 120px;
    max-width: 1193px;
}

.viewer_audio {
    width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.viewer_audio iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.audiovisuel_description {
    display: flex;
    flex-direction: column;
    width: 449px;
}

.audiovisuel_description h3 {
    font-family: var(--font-roman);
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 2.0625rem;
    text-align: right;
    margin-bottom: 20px;
}

.txt_audio {
    font-family: var(--font-light);
    color: var(--tertiary-color);
    font-size: 1rem;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-align: right;
    margin-bottom: 24px;
}

.txt_audio span {
    color: var(--secondary-color);
    font-family: var(--font-light);
}

.lAudio {
    color: var(--tertiary-color);
    text-align: right;
    font-family: var(--font-medium);
}

.II {
    display: none;
}

.btnAudio{
    background-color: var(--tertiary-color);
    align-self: flex-end;
    color: var(--primary-color);
}

.btnAudio:hover {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    border: 1px solid var(--tertiary-color);
}

/* RESPONSIVE AUDIOVISUEL */

@media screen and (max-width: 1330px) {
    .audiovisuel_container {
        gap: 50px;
    }
    .viewer_audio {
        width: 600px;
    }
}

@media screen and (max-width: 1200px) {
    .audiovisuel_container {
        gap: 30px;
    }
    .viewer_audio {
        width: 500px;
    }
    .viewer_audio .viewer_description > p {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 1100px) {
    .audiovisuel_description {
        width: 400px;
    }
    .audiovisuel_description h3 {
        font-size: 1.875rem;
    }
    .txt_audio {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 1023px) {
    #audiovisuel {
        height: auto;
        padding: 100px 0;
    }
    .audiovisuel_container {
        flex-direction: column;
        width: 100%;
        gap: 50px;
    }
    .viewer_audio {
        width: 70%;
    }
    .viewer_audio .viewer_description {
        justify-content: center;
    }
    .audiovisuel_description {
        width: 85%;
    }
    .audiovisuel_description h3, .txt_audio, .lAudio {
        text-align: center;
    }
    .txt_audio {
        font-size: 0.9375rem;
    }
    .II {
        display: block;
    }
    .I {
        display: none;
    }
    .btnAudio {
        align-self: center;
        width: 50%;
    }
}

@media screen and (max-width: 709px) {
    .viewer_audio {
        width: 85%;
    }
}

@media screen and (max-width: 544px) {
    .audiovisuel_container {
        gap: 40px;
    }
    .audiovisuel_description h3 {
        font-size: 1.375rem;
        margin-bottom: 13px;
    }
    .txt_audio {
        font-size: 0.875rem;
    }
    .viewer_audio .viewer_description > p {
        font-size: 0.8125rem;
    }
    .lAudio {
        margin-bottom: 40px;
    }
    .btnAudio {
        width: 80%;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* GRAPHISME */

#graphisme {
    background-color: var(--secondary-color);
}

.graphisme_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    max-width: 1193px;
    margin: 0 auto;
}

.graphisme_description {
    display: flex;
    flex-direction: column;
    width: 451px;
}

.graphisme_description > h3 {
    font-family: var(--font-roman);
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 2.0625rem;
    margin-bottom: 20px;
}

.txt_graph {
    font-family: var(--font-roman);
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 20px;
    margin-bottom: 24px;
}

.txt_graph > span {
    font-family: var(--font-light);
}

.lGraph {
    color: var(--primary-color);
    font-family: var(--font-bold);
}

.btnGraph {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px 20px;
    border-radius: var(--primary-radius);
}

.btnGraph:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.viewer_graph {
    max-width: 500px;
    min-width: 282px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.viewer_graph figure {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
}

.viewer_graph img {
    width: 100%;
    object-fit: contain;
}

.description_real_graph_about {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 50px;
    color: var(--tertiary-color);
}

.viewer_graph img:hover .description_real_graph_about {
    opacity: 1;
    z-index: 2;
}

.description_real_graph_about > h2 {
    font-family: var(--font-roman);
    font-size: 1.875rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.description_real_graph_about > p {
    font-family: var(--font-light);
    font-size: 1rem;
    color: var(--tertiary-color);
    margin-bottom: 25px;
}

.viewer_description {
    text-align: center;
    margin-top: 15px;
}

.viewer_description > p {
    font-size: 0.875rem;
}

/* RESPONSIVE GRAPHISME */

@media screen and (max-width: 1200px) {
    .graphisme_container {
        gap: 40px;
    }
}

@media screen and (max-width: 1100px) {
    .graphisme_description {
        width: 400px;
    }
    .graphisme_description > h3 {
        font-size: 1.875rem;
    }
    .txt_graph {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 1023px) {
    #graphisme {
        height: auto;
        padding: 100px 0;
    }
    .graphisme_container {
        flex-direction: column-reverse;
    }
    .viewer_graph {
        width: 50%;
    }
    .viewer_graph .viewer_description{
        justify-content: center;
    }
    .graphisme_description {
        width: 85%;
        text-align: center;
    }
    .txt_graph {
        font-size: 0.9375rem;
    }
    .btnGraph {
        align-self: center;
        width: 50%;
    }
}

@media screen and (max-width: 544px) {
    .graphisme_description > h3 {
        font-size: 1.375rem;
        margin-bottom: 13px;
    }
    .txt_graph {
        font-size: 0.875rem;
    }
    .viewer_graph {
        width: 85%;
    }
    .viewer_description > p {
        font-size: 0.8125rem;
    }
    .lGraph {
        margin-bottom: 40px;
    }
    .btnGraph {
        width: 80%;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* REALISATIONS AUDIOVISUELLES & GRAPHIQUES */

.real_content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 200px 0 150px 0;
    width: 100vw;
}

@media screen and (max-width: 1023px) {
    .real_content{
        margin: 140px 0 70px 0;
    }
}

@media screen and (max-width: 425px) {
    .top{
        bottom: 25px;
        right: 25px;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* REALISATIONS AUDIOVISUELLES*/

.container_content_real_audio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 30px;
    row-gap: 100px;
    padding: 0 30px;
    width: 100%;
}

.content_real_audio {
    width: 100%;
    height: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.illustration_real_audio {
    width: 100%;
    margin-bottom: 10px;
}

.illustration_real_audio > iframe, .illustration_real_audio > video{
    aspect-ratio: 16/9;
    width: 100%;
}

.illustration_real_audio > video {
    display: none;
}

.txt_real_audio {
    width: 100%;
}

.title_type_audio {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.title_type_audio > h2 {
    font-family: var(--font-roman);
    color: var(--secondary-color);
    font-size: 1.25rem;
    width: 76%;
}

.title_type_audio > p {
    font-family: var(--font-light);
    color: var(--secondary-color);
    font-size: .875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    padding: 4px 11px;
    height: 100%;
}

.description_real_audio {
    width: 90%;
    margin-bottom: 20px;
}

.description_real_audio > p {
    font-size: .9375rem;
    font-family: var(--font-light);
    color: var(--tertiary-color);
    line-height: 20px;
}

.btn_real_audio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 45%;
    height: 57px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    font-family: var(--font-light);
    font-size: .875rem;
    text-transform: uppercase;
    color: var(--primary-color);
    transition: all ease .4s;
}

.btn_real_audio:hover {
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

/* RESPONSIVE REALISATIONS AUDIOVISUELLES */

@media screen and (max-width: 1089px){
    .content_real_audio{
        width: 450px;
        margin-bottom: 0;
    }

    .btn_real_audio{
        width: 55%;
    }
}

@media screen and (max-width: 1023px){
    .content_real_audio{
        background-color: #171717;
        border-radius: 5px;
        width: 45%;
        padding: 0px 0px 30px 0px;
        margin-bottom: 50px;
    }

    .illustration_real_audio{
        margin-bottom: 15px;
    }

    .illustration_real_audio > iframe, .illustration_real_audio > video{
        border-radius: 5px;
    }

    .txt_real_audio{
        width: 90%;
        margin: 0 auto;
    }

    .title_type_audio{
        flex-direction: column;
        align-items: center;
        justify-content: baseline;
        gap: 7px;
        margin-bottom: 20px;
    }
    
    .title_type_audio > h2{
        text-align: center;
        width: 100%;
    }

    .description_real_audio{
        width: 100%;
        margin-bottom: 25px;
    }
    
    .description_real_audio > p{
        text-align: center;
    }

    .btn_real_audio{
        margin: 0 auto;
        gap: 5px;
        width: 70%;
        height: 50px;
        font-size: .8125rem;
    }
}

@media screen and (max-width: 768px){
    .container_content_real_audio {
        gap: 50px;
    }

    .content_real_audio{
        max-width: 100%;
        width: 100%;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 425px){
    .container_content_real_audio {
        padding: 0 20px;
    }

    .illustration_real_audio > iframe{
        display: none;
    }

    .illustration_real_audio > video{
        display: block;
    }

    .description_real_audio > p{
        font-size: .875rem;
    }

    .btn_real_audio{
        width: 80%;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* REALISATIONS GRAPHIQUES */

.container_content_real_graph {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;
}

.content_real_graph {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    height: 400px; /* Hauteur fixée pour tous les articles */
}

.content_real_graph img {
    width: 100%; /* La largeur de l'image occupe tout l'espace disponible */
    height: 100%; /* La hauteur s'ajuste pour garder le ratio */
    object-fit: contain; /* Conserver le ratio d'origine sans rogner */
    transition: all ease 0.3s;
}

.content_real_graph:hover img {
    transform: scale(1.03);
    filter: blur(5px);
}

.description_real_graph {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 50px;
    color: var(--tertiary-color);
}

.content_real_graph:hover .description_real_graph {
    opacity: 1;
    z-index: 2;
}

.description_real_graph > h2 {
    font-family: var(--font-roman);
    font-size: 1.875rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.description_real_graph > p {
    font-family: var(--font-light);
    font-size: 1rem;
    color: var(--tertiary-color);
    margin-bottom: 25px;
}

.logiciels_real_graph {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.logiciels_real_graph > p {
    font-size: 0.875rem;
    font-family: 'nLight';
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 50px;
    padding: 4px 11px;
}

/* RESPONSIVE REALISATIONS GRAPHIQUES */

@media screen and (max-width: 1299px) {
    .content_real_graph {
        height: 350px;
    }
}

@media screen and (max-width: 1023px) {
    .container_content_real_graph {
        gap: 30px;
    }

    .content_real_graph {
        background-color: #171717;
        padding: 0px 0px 20px 0px;
        border-radius: 5px;
        align-items: center;
        pointer-events: none;
        width: 48%; 
        height: 100%;
        max-width: none;
    }

    .content_real_graph > img {
        aspect-ratio: 0;
        border-radius: 5px;
        margin-bottom: 15px;
    }

    .content_real_graph:hover > img {
        transform: none;
        filter: none;
    }

    .description_real_graph {
        position: relative;
        background-color: transparent;
        opacity: 1;
        padding: 0;
        width: 90%;
    }
    
    .description_real_graph > h2{
        text-align: center;
        width: 100%;
        font-size: 1.25rem;
        order: 1;
        margin-bottom: 7px;
    }

    .logiciels_real_graph {
        order: 2;
        gap: 7px;
        margin-bottom: 20px;
    }
    
    .description_real_graph > p{
        text-align: center;
        margin-bottom: 0px;
        order: 3;
    }
}

@media screen and (max-width: 809px) {
    .container_content_real_graph {
        padding: 0 20px;
    }

    .content_real_graph {
        width: auto; 
    }

    .content_real_graph > img {
        max-height: 600px;
        max-width: 400px;
    }
}

@media screen and (max-width: 600px) {
    .content_real_graph {
        width: 100%; 
    }
}

@media screen and (max-width: 425px) {
    .container_content_real_graph {
        gap: 50px;
    }

    .description_real_graph > p{
        font-size: .875rem;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* MENTIONS */

.mentions_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
    width: 770px;
    margin: 50px auto;
}

.mentions_content_top{
    text-align: center;
    margin: auto;
}

.mentions_content{
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.mentions_content_top > h1{
    font-size: 1.875rem;
    margin-bottom: 7px;
}

.mentions_content_top > h1, .mentions_content h2 {
    font-family: var(--font-roman);
    color: var(--secondary-color);
}

.mentions_content h2{
    font-size: 1.25rem;
    margin-bottom: 7px;
}

.mentions_content p, .mentions_content_top > p{
    color: var(--tertiary-color);
    font-size: 17px;
    font-family: var(--font-light);
    line-height: 22px;
    text-align: justify;
}

/* RESPONSIVE MENTIONS */

@media screen and (max-width: 1023px){
    .mentions_container{
        gap: 65px;
        width: 70%;
    }

    .mentions_content{
        gap: 40px;
    }

    .mentions_content_top > h1{
        font-size: 1.5rem;
        margin-bottom: 7px;
    }
    
    .mentions_content h2{
        font-size: 1.25rem;
        margin-bottom: 7px;
    }
    
    .mentions_content p, .mentions_content_top > p{
        font-size: .9375rem;
        line-height: 19px;
    }
    
}

@media screen and (max-width: 425px) {
    .mentions_container{
        width: 85%;
        gap: 60px;
    }

    .mentions_content{
        gap: 30px;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* CONTACT */

.contact-form {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}

.contact-form > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.contact-form > div > div{
    width: 100%;
}

.contact-form h2 {
    margin-bottom: 1px;
    color: var(--secondary-color);
    font-family: var(--font-bold);
    font-size: 1.875rem;
    text-transform: uppercase;
}

.contact-form hr{
    margin-bottom: 30px;
    border: none;
    height: 1px;
    background-color: var(--secondary-color);
    width: 70px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 1.0625rem;;
    font-family: var(--font-light);
    color: var(--primary-color);
    background-color: var(--tertiary-color);
}

.contact-form input{
    height: 50px;
    margin-bottom: 25px;
}

.contact-form textarea{
    height: 200px;
    margin-bottom: 30px;
}

.mes_form_contact{
    margin-top: 8px;
    font-family: var(--font-light);
    font-size: .875rem;
    color: var(--tertiary-color);
}

.contact-form button {
    height: 57px;
    width: 250px;
    border: none;
    border-radius: 50px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: var(--font-roman);
    text-transform: uppercase;
    font-size: 18px;
    cursor: pointer;
    transition: all ease .3s;
}

.contact-form button:hover {
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

@media screen and (max-width: 1400px) {
    .contact-form {
        width: 80%;
    }
}

@media screen and (max-width: 1023px) {
    .contact-form{
        height: auto;
        margin: 150px auto 100px auto;
    }
}

@media screen and (max-width: 768px) {
    .contact-form {
        width: 90%;
    }
}

@media screen and (max-width: 430px) {
    .contact-form h2 {
        margin-bottom: 2px;
        font-size: 1.25rem;
    }

    .contact-form hr{
        margin-bottom: 20px;
        width: 50px;
    }    

    .contact-form > div{
        gap: 15px;
    }

    .contact-form input, .contact-form textarea {
        font-size: 1rem;
    }

    .contact-form input{
        height: 40px;
        margin-bottom: 15px;
    }
    
    .contact-form textarea{
        height: 170px;
        margin-bottom: 25px;
    }

    .mes_form_contact{
        text-align: center;
    }

    .contact-form button {
        width: 100%;
        height: 50px;
        font-size: .9375rem;
    }
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* FOOTER */

footer{
    display: flex;
    justify-content: space-between;
    padding: 100px 10%;
}

#footer_contact{
    background-color: #171717;
}

.nav_footer > ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.nav_footer > ul > li{
    position: relative;
    width: fit-content;
    overflow: hidden;
}

.nav_footer li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--tertiary-color);
    bottom: 0;
    left: 0;
    transition: all 0.4s ease;
}

.nav_footer li:hover::after {
    left: 0;
}

.nav_footer li:hover::after {
    left: 100%;
}

.nav_footer > ul > li > a {
    font-family: var(--font-roman);
    font-size: 1.5625rem;
    color: var(--tertiary-color);
    text-transform: uppercase;
    position: relative;
    transition: all ease .4s;
}

.nav_footer li:hover a {
    color: var(--tertiary-color);
}

.txt_footer{
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}

.txt_footer > p, .txt_footer a {
    font-family: var(--font-roman);
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--tertiary-color);
}

.txt_footer > p:first-child {
    color: var(--secondary-color);
}

.txt_footer > div{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 20px;
}

.res_icon_footer{
    display: none;
}

.txt_footer > p:first-child{
    margin-bottom: 20px;
}

/* RESPONSIVE FOOTER */

@media screen and (max-width: 1440px) {
    footer{
        padding: 100px 5%;
    }
}

@media screen and (max-width: 1023px) {
    .nav_footer li::after {
        display: none;
    }

    .nav_footer > ul > li > a {
        text-decoration: underline;
    }

    .txt_footer > div{
        flex-direction: row;
        gap: 10px;
    }

    .res_text_footer{
        display: none;
    }

    .res_icon_footer{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 50px;
        border-radius: 50px;
        background-color: var(--secondary-color);
    }

    .res_icon_footer > i{
        color: var(--primary-color);
        font-size: 1.25rem;
    }

}

@media screen and (max-width: 768px) {
    footer{
        flex-direction: column;
        justify-content: baseline;
        gap: 70px;
        padding: 70px 5%;
    }

    .txt_footer{
        align-self: start;
    }

    .res_icon_footer{
        height: 40px;
        width: 40px;
    }

    .res_icon_footer > i{
        color: var(--primary-color);
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 430px) {
    .nav_footer > ul > li > a {
        font-size: 1.4375rem;
        text-decoration: underline;
    }

    .txt_footer > p, .txt_footer > a {
        font-size: .9375rem;
    }
}