/* FONTS */

@font-face {
    font-family: 'HelveticaNeue Regular';
    src: url('../fonts/helveticaNeue_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Kasper Lullaby';
    src: url('../fonts/kasperLullaby.otf') format('opentype');
}


/* GENERAL */

body {
    margin: 0;
    height: 100%;
}

:root {
    --primary: #1263BA;
    /* --primary: #013E7D; */
    --secondary: white;
}

.fleche {
    display: flex;
    justify-content: right;
    margin-top: -17em;
}

.fleche img {
    height: 20em;
}

.fleche-back {
    height: 30em;
    display: flex;
    margin: -10em auto -10em 0;
}

h1 {
    font-family: 'Kasper Lullaby';
    color: var(--primary);
    font-size: 4em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0;
}

h2 {
    font-family: 'Kasper Lullaby';
    color: var(--primary);
    font-size: 5em;
    margin: 0 auto 0.5em auto;
}

h3 {
    font-family: 'Kasper Lullaby';
    color: var(--secondary);
    font-size: 2em;
}

.text p {
    font-family: 'HelveticaNeue Regular';
    line-height: 1.5em;
    margin-bottom: 2em;
    text-align: justify;
    font-size: 1.3em;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.btn {
    font-family: 'Kasper Lullaby';
    color: var(--secondary);
    font-size: 1.5em;
    background-color: var(--primary);
    border-radius: 20px;
    min-width: 200px;
    padding: 10px 0;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
}

.btn a {
    color: var(--secondary);
}

.main hr {
    background-color: var(--primary);
    height: 3px;
    width: 15em;
    margin: auto;
    margin-bottom: 20px;
}

img {
    /* object-fit: cover; */
    object-fit: contain;
}

video {
    object-fit: contain;
}



/* HEADER */

header {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
}

header #logo {
    margin-left: 1em;
    transition: transform 0.3s ease;
}

header #logo:hover {
    transform: scale(1.1);
}

nav {
    display: flex;
    text-align: right;
}

nav a {
    transition: transform 0.3s ease;
}

nav a:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
}

nav p {
    margin-right: 1em;
    color: var(--primary);
    font-family: 'Kasper Lullaby';
    font-size: 2em;
    transition: transform 0.3s ease;
}

nav p:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
}

a {
    text-decoration: none;
}

#burger-button {
    display: none;
    font-size: 30px;
    cursor: pointer;
    margin-right: 1em;
    color: var(--primary);
}

.ipt_sub_none {
    border: none;
    background-color: transparent;
    color: var(--secondary);
    font-size: large;
    font-family: 'HelveticaNeue Regular';
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}

.ipt_sub_none:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
}

#photo {
    width: 450px;
}

/* Styles du menu déroulant */

#mes-realisations:hover {
    cursor: pointer;
}

.dropdown {
    display: none;
    position: absolute;
    background-color: var(--primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1;

    right: 11em;
    top: 5em;
    width: 15em;
}

ul {
    list-style-type: none;
}

.dropdown ul {
    padding: 0;
}

.dropdown ul li {
    text-align: left;
    padding: 10px;
}

.dropdown ul li a {
    text-decoration: none;
    color: #333;
    display: block;
}

.responsiveonly {
    display: none;
}

/* Affichage du menu déroulant lorsque nécessaire */
.dropdown.active {
    display: block;
}

#bandeau {
    background-image: url("../img/background/fleur_blanc_fond_bleu.jpg");
    width: 100%;
    height: 3em;
}

.main {
    margin: 3em 13em;
}

.main2 {
    margin: 3em 5em;
}

/* INDEX */

.presentation {
    display: flex;
    align-items: center;
}

.presentation .text {
    margin-left: 10em;
}

.competences {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 5em;
    background-color: var(--primary);
    margin-top: 5em;
}

.competences .flex-row {
    justify-content: center;
}

.competences img {
    object-fit: cover;
    object-position: top;
}


.competences .media-1 {
    justify-content: center;
}

figure figcaption {
    color: var(--secondary);
    font-family: 'HelveticaNeue Regular';
    margin-top: 5px;
    text-transform: uppercase;
}

figure {
    transition: transform 0.3s ease;
}

figure:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
    cursor: pointer;
}


/* CATEGORIE */

.liste_projets-responsive {display: none;}

.liste_projets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.liste_projets img {
    object-fit: cover;
    object-position: top;
}

.liste_projets > .flip-container, .liste_projets > .img_cont {
    flex: 1 1 calc(25% - 1em); /* Chaque élément prend 25% de la largeur moins une marge */
    height: 30em;
    margin: 0.5em; /* Ajoute une marge entre les éléments */
    perspective: 1000px; /* Perspective pour l'effet 3D */
}

.img_cont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flip-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.flipper {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front img {
    width: 100%;
    height: 100%;
}

.back {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--secondary);
    font-family: 'Kasper Lullaby';
    transform: rotateY(180deg);
}

.back p {
    background-color: var(--primary);
    padding: 5px;
    font-size: 2.5em;
    width: 100%;
    text-align: center;
}

.flip-container:hover .flipper {
    transform: rotateY(180deg);
    cursor: pointer;
}

.img_cont .fc-1 {
    height: 49%;
}

.img_cont .fc-2 {
    height: 49%;
}

.img_cont .fc-1 img, .img_cont .fc-2 img {
    object-position: center;
}

/* REALISATION */

.realisation {
    display: flex;
    gap: 6em; /* Espace entre les deux colonnes */
}

.realisation-images, .realisation-text {
    /* width: 50%; */
    display: flex;
    flex-direction: column;
}

.realisation-text {
    gap: 10px; /* Espace entre les éléments dans la colonne */
}

.width50 {
    width: 50%;
}


.width90 {
    width: 90%;
}



.realisation-images .colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 100%;
}

.realisation-images .colonnes img {
    width: 100%;
    height: 100%;
}

.realisation-images .lignes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.realisation-images .lignes img, .realisation-images .lignes video {
    width: 100%;
    height: auto;
    max-height: 500px;
}

.realisation-images .media-1 {
    text-align: center;
    height: 100%;
}

.realisation-images .media-1, .realisation-images img {
    width: auto;
    height: 100%;
}

.realisation-images .media-1 video {
    width: 100%;
    /* border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.realisation-text h2 {
    font-size: 3em;
    text-align: left;
    text-transform: uppercase;
    margin: 0 auto 0 0;
}

.realisation-text hr {
    background-color: var(--primary);
    height: 3px;
    width: 15em;
    margin-left: 0;
    margin-bottom: 20px;  
}

.realisation-text p {
    font-family: 'HelveticaNeue Regular';
    text-align: justify;
    font-size: 1.3em;
 }

 .realisation-text img {
    max-height: 15em;
 }

 .liste-projets-realisations {
    display: flex;
    flex-direction: row;
    height: 30em;
    /* justify-content: center; */
    justify-content: space-between;
    margin: auto 5em;
    margin-bottom: 10px;
}

 .liste-projets-realisations > video, .liste-projets-realisations > img {
    width: 33%;
    object-fit: cover;
    object-position: left;
 }

 .liste-projets-realisations .lignes {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }

 .liste-projets-realisations .lignes img {
    height: 48%;
    object-fit: cover;
    object-position: top;
}

.liste-img-row {
    display: flex;
    flex-direction: row;
}

 /* carroussel */

 .carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    /* border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item img,
.carousel-item video {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Ajuster cette valeur selon vos besoins */
    display: block;
    /* border-radius: 10px; */
}


.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary);
    color: var(--secondary);
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

/* QUI JE SUIS ? */

.cv {
    width: 100%;
    margin-top: 10px;
}

/* FOOTER */

footer {
    text-align: center;
    margin-top: 5em;
    background-color: var(--primary);
    margin-bottom: 0;
    padding: 1.5em 0;
}

footer p {
    color: var(--secondary);
    font-family: 'Kasper Lullaby';
    font-size: 2em;
    margin: auto auto auto 0;
}

footer a {
    /* margin: auto -30px; */
}

footer img {
    height: 6em;
    transition: transform 0.3s ease;
}

footer img:hover {
    transform: scale(1.1); /* Augmente la taille du bouton de 10% */
}

/* RESPONSIVE  */

@media (max-width: 768px) {

    h2 {
        font-size: 2.5em;
        text-align: center;
    }
    #burger-button {
        display: block;
    }

    h1 {
        font-size: 2.5em;
    }

    nav {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 100px; /* Ajustez cette valeur en fonction de la hauteur de votre header */
        left: 0;
        background-color: var(--primary); /* ou la couleur de fond de votre choix */
        border-top: 1px solid #ccc; /* optionnel : une bordure pour séparer le menu du header */
        z-index: 10;
    }

    nav a, nav p {
        margin: 10px 0;
        font-size: 1.5em;
        color: var(--secondary);
    }

    nav.show {
        display: flex;
    }

    .dropdown.active {
        background-color: transparent;
        display: contents;
    }

    .dropdown ul li {
        text-align: center;
    }

    #realisations-content ul {
        padding: 0;
    }

    .no-responsiveonly {
        display: none;
    }

    .responsiveonly {
        display: flex;
        flex-direction: column;
    }

    .fleche {
        margin-top: -5em;
        margin-bottom: -8em;
        justify-content: center;
    }

    .fleche img {
        height: 20em;
    }

    .fleche-back {
        height: 20em;
        margin: -5em auto -5em -5em;
    }

    #photo {
        width: 350px;
    }

    footer p i {
        font-size: 0.5em;
    }
}


@media (max-width: 768px) {
    .main, .main2 {
        margin: 1em 3em;
    }
    


    .presentation {
        flex-direction: column;
    }

    .presentation .text {
        margin-left: 0;
        margin-top: 1em;
    }

    .competences .flex-row {
        flex-direction: column;
    }



    .realisation {
        flex-direction: column-reverse;
        gap: 0;
    }

    .realisation .realisation-text {
        width: 100%;
    }

    .realisation-text hr {
        width: 7em;
    }

    .realisation .realisation-images {
        width: 100%;
    }

    .realisation-text h2 {
        font-size: 2em;
    }

    .liste-img-row {
        flex-direction: column;
    }

    .liste-projets-realisations {
        flex-direction: column;
    }

}

/* CATEGORIES */
@media (max-width: 768px) {
    .liste_projets {
        display: none;
    }

    .liste_projets-responsive {
        display: block;
    }

    .card-projet {
        margin-top: 5px;
    }

    .card-projet h4, .card-projet-ligne h4 {
        margin-top: -4px;
        font-family: 'Kasper Lullaby';
        text-align: center;
        background-color: var(--primary);
        color: var(--secondary);
        width: 100%;
        font-size: 0.3em;
    }

    .card-projet img {
        width: 100%;
        object-fit: cover;
        object-position: top;
        max-height: 350px; 
    }

    .card-projet:first-child img, .card-projet:last-child img {
        max-height: 200px; 
    }

    .card-projet:nth-child(2) img {
        max-height: 350px; 
    }

    .ligne-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .ligne-cards .card-projet-ligne {
        margin: auto;
        margin-bottom: 0;
    }

    .ligne-cards .card-projet-ligne:first-child {
        margin-right: 2px;
    }

    .ligne-cards .card-projet-ligne:last-child {
        margin-left: 2px;
    }

    .ligne-cards .card-projet-ligne {
        height: 100%;
    }
    .ligne-cards .card-projet-ligne img {
        height: 140px; 
        width: 100%;
        object-fit: cover;
        object-position: top;
    }
}