* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*police par défault du document*/
body {

    font-family: "Hanken Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}



/*livre ouvrable-------*/

h4 {
    font-size: 2.5em;
    color: #fff;
}

.livre {
    display: flex;
    background-color: #e40000;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    padding: 20px;
    padding-left: 20rem;
    padding-bottom: 40px;
    border-radius: 5px;
}

/* RESET CSS */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* VARIABLES */
:root {
    --dark-color: rgb(2, 4, 8);
    --dark-hover: rgba(255, 255, 255, 0.1);

    --light-color: rgb(245, 245, 245);
    --light-hover: rgba(0, 0, 0, 0.1);
}

/* GENERAL */
body {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-family: monospace, sans-serif;
    transition: background-color 0.3s;
}


body.light-mode {
    color: var(--dark-color);
    background-color: var(--light-color)
}

body.light-mode #toggle-mode-btn:hover {
    background-color: var(--light-hover);
}

body.dark-mode {
    color: var(--light-color);
    background-color: var(--dark-color);
}

body.dark-mode #toggle-mode-btn:hover {
    background-color: var(--dark-hover);
}

a {
    text-decoration: none;
    color: var(--dark-color);
}

input {
    display: none;
}

/* MAIN */
#toggle-mode-btn {
    width: 2rem;
    height: 2rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    transition: background-color 0.3s;
    cursor: pointer;
}


@media (max-width: 768px) {
    #responsive-warning.show {
        display: flex;
    }
}

/* FLIP BOOK */
#flip_book {
    width: 298px;
    height: 420px;
    position: relative;
    transition-duration: 1s;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.tournercell {
    display: flex;
    align-content: center;
    justify-content: center ;
    align-items: center;
}

.tournercell img {
width: 80%;
}

.front_cover,
.back_cover {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5px 5px 5px 2.5px;
    background-image: url(./assets/images/flip_book_edge_shading.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(220, 20, 60);
    box-shadow: 0 0 5px 0 rgb(25, 25, 25, 0.25);
}

.front_cover {
    position: absolute;
    cursor: pointer;
    transform-origin: center left;
    transition: transform 0.5s;
    z-index: 99;
}

.front_cover label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.page {
    width: 288px;
    height: 400px;
    position: absolute;
    top: 10px;
    left: 1px;
    border-radius: 0 5px 5px 0;
    background-color: white;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition-duration: 0.5s;
}

.front_page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.front_page label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

.back_page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    z-index: 100;
}

.back_page label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

.edge_shading {
    width: 288px;
    height: 400px;
    position: absolute;
    z-index: 98;
}

.front_content {
    width: 287px;
    height: 398px;
    position: absolute;
    top: 1px;
    border-radius: 0 5px 5px 0;
    z-index: 97;
}

.back_content {
    width: 287px;
    height: 398px;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 5px 0 0 5px;
    z-index: 97;
}

.back_cover {
    position: relative;
    z-index: -1;
}

#page1 {
    z-index: 8;
}

#page2 {
    z-index: 5;
}

#page3 {
    z-index: 4;
}

#page4 {
    z-index: 3;
}

#page5 {
    z-index: 2;
}

#cover_checkbox:checked~#flip_book {
    transform: translateX(144px)
}

#cover_checkbox:checked~#flip_book .front_cover {
    transform: rotateY(-180deg);
    transition: transform 1.5s, z-index 0.5s 0.5s;
    z-index: 1;
}

#cover_checkbox:checked~#flip_book #cover {
    width: 80%;
    height: 80%;
    position: absolute;
}

#page1_checkbox:checked~#flip_book #page1 {
    transform: rotateY(-180deg);
    z-index: 3;
}

#page2_checkbox:checked~#flip_book #page2 {
    transform: rotateY(-180deg);
    z-index: 4;
}

#page3_checkbox:checked~#flip_book #page3 {
    transform: rotateY(-180deg);
    z-index: 5;
}

#page4_checkbox:checked~#flip_book #page4 {
    transform: rotateY(-180deg);
    z-index: 6;
}

#page5_checkbox:checked~#flip_book #page5 {
    transform: rotateY(-180deg);
    z-index: 9;
}


/*livre ouvrable FIN-------*/



/*enlever le souligné pour tout les liens*/
a,
a:hover,
a:visited,
a:link,
a:focus,
a:active {
    text-decoration: none;
    color: gray;
}

/* À PROPOS IMAGE------------------*/


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aproposdemoi {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: auto;
    gap: 20px;
    margin-top: 60px;
    justify-content: space-between;
}

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

.texte {
    grid-column: 1 / 4 ;
}

.aproposdemoi img {
    width: 90%;
    grid-column: 5 / 9 ;
    justify-content: space-between;
    margin-left: 20px;
    border-radius: 15px;
    position: sticky
}

.aproposdemoi p {
    font-weight: 200;
    margin-top: 10px;
}


.logohaut {
    display: none;
}

/* FORM CONTACT-------------------------*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  button[type=submit] {
    background-color: #ff8c00;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #000000;
  }
  
  /* Add a background color and some padding around the form */
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 50px;
  }



/*grille de base du site commence ici*/
.wrapper {
    margin-top: 0px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100vw;
    height: 100vh;
    padding-top: 50px;
}


header {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 9;
    border: none;
    /* Supprime la bordure */
    margin: 0;
    padding: 10px;
}


main {
    grid-row-start: 5;
    grid-row-end: 12;
    grid-column-start: 2;
    grid-column-end: 7;
}

footer {
    grid-row-start: 12;
    grid-row-end: 13;
    grid-column-start: 1;
    grid-column-end: 10;
    min-height: 200px;
}

/*grille de base du site fini ici*/

/*couleur du menu de la navigation principale*/
nav a {
    color: gray;
}

/*couleur ausurvol du menu de la navigation principale*/
nav a:hover {
    text-decoration: none;
    color: lightgray;
}

.close-menu {
    display: none;
    /* Initialement caché */
    position: fixed;
    /* Position fixe par rapport à la fenêtre du navigateur */
    top: 20px;
    /* Espace du haut */
    right: 20px;
    /* Espace du côté droit */
    font-size: 2em;
    /* Taille similaire au menu hamburger */
    font-weight: bold;
    /* Gras */
    color: rgb(0, 0, 0);
    /* Couleur grise */
    background: none;
    /* Pas de fond */
    border: none;
    /* Pas de bordure */
    cursor: pointer;
    /* Style du curseur en pointeur */
    z-index: 1010;
    /* S'assure qu'il est au-dessus du menu déployé */
}

.bloc {
    background-color: black;
    padding: 10px;
    border-radius: 10px;
}

.illus {
    background-color: rgb(255, 255, 255);
    padding: 0px;
    border-radius: 10px;
}

.bloc p {
    color: #fff;
}

.actif {
    font-weight: bold;
    color: black !important;
}

.entete {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Trois colonnes: logo, espace, éléments de menu */
    align-items: center;
    /* aligné au bas des cellules */
    width: 40em;
    margin: 0 auto;
    white-space: nowrap;
}

.entete img {
    width: 60%;
    object-fit: contain;
}

.chapeau {
    display: flex;
    grid-template-columns: auto 1fr auto;
    /* Trois colonnes: logo, espace, éléments de menu */
    align-items: center;
    /* aligné au bas des cellules */
    width: 40em;
    margin: 0 auto;
    white-space: nowrap;
}

.chapeau img {
    width: 80%;
    object-fit: contain;
}

.menu1 {
    display: flex;
    justify-content: flex-end;
    /* Alignement à droite des éléments de menu */
    gap: 70px;
    /* Espace entre les éléments de menu, ajustez selon vos besoins */
    font-size: 1.5em;
}

.menu1 a {
    text-decoration: none;
    /* Enlève le soulignement */
    color: gray;
    /* Définit la couleur des liens */
    text-align: center;
    /* Assure que le texte est centré si la largeur est spécifiée */
}


a {
    text-decoration: underline;
    color: gray;
}

a:hover {
    color: lightgray;
    text-decoration: none;
    /* couleur au survol */
}

.actif {
    font-weight: bold;
    color: black;
}




/*styles de l'entete*/

/*logo*/
header img {
    width: 250px;
    margin: 0px;
}

h1 {
    text-align: left;
    font-size: 3em;
    margin-bottom: 20px;
    margin-top: 60px;
}

.texte h1{
    text-align: left;
    font-size: 3em;
    margin-bottom: 20px;
    margin-top: 0px;
}

h2 {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 0;
}

h3 {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 0%;
}

.Navigation {
    display: flex;
    flex-direction: column;
    gap: 1.5rem ;
    padding: 20 px;
    font-size: 2rem;
    justify-content: center;
    margin-left: 0px;
    margin-right: 0px;
    align-items: center;
    align-content: flex-start;
}

.Navigation a:hover {
    box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  padding: 0 .65rem;
  margin: 0 -.65rem;
  transition: color .4s ease-in-out, box-shadow .4s ease-in-out;    
    
    color: #000000;
        box-shadow: inset 200px 0 0 0 #ff8c00;;
}



.retrouver {
    margin-top: 0px;
    margin-bottom: 15px;
    padding: 15px;
}

.photo {
    width: 100%;
    height: auto;
    /* Maintient un ratio carré pour toutes les images */
    object-fit: cover;
    /* Assure que les images couvrent l'espace sans déformation */
    box-sizing: border-box;
    /* Pour inclure les marges et les paddings dans la largeur/hauteur */
    display: block;
    /* Élimine l'espace supplémentaire sous l'image */
}

.info {
    grid-column: 1 / 2 ;
    grid-row: 1 / 2 ;
    display: flex;
    flex-direction: column;
    
}

.olivierhaeck img {
    height: 60%;
    grid-column: 1 / 2 ;
    grid-row: 1 / 2;
}

.olivierhaeck {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haut {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: 10px;
    margin-top: 0px;
    margin-right: 60px;
}

.haut img {
    width: 100%;
    grid-column: 2 / 3 ;
    grid-row: 1 / 2;
    margin-right: 0px;
}

.haut p {
    font-weight: 200;
    margin-top: 10px;
}



/* Noms de projets sous l'image */
.im1 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im2 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im3 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im4 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im5 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im6 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im7 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im8 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im9 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im10 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im11 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im12 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.im13 p {
    text-align: left;
    font-size: 1,5 em;
    font font-weight: 200;
    margin-top: 10px
}

.entete {
    display: flex;
    /* Active Flexbox */
    justify-content: space-between;
    /* Sépare le contenu entre les deux extrémités */
    align-items: flex-end;
    /* Alignement vertical au bas */
    align-items: center;
}

.chapeau a {
    display: none;
}

/*style de la grille d'images*/
/* Configuration du conteneur de la grille */
.grille_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Définit une grille de 12 colonnes */
    gap: 20px;
    /* Espacement uniforme entre les éléments de la grille */
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;
    padding: 15px;
}

.grille_illus {
    display: grid;
    grid-column: 1 / 10;
    grid-template-columns: repeat(3, 1fr);
    /* Définit une grille de 12 colonnes */
    gap: 20px;
    /* Espacement uniforme entre les éléments de la grille */
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;
}

.grille_projets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Définit une grille de 5 colonnes */
    gap: 60px;
    /* Espacement uniforme entre les éléments de la grille */
    padding-top: 10px;
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;
}

.grille_projets p {
    margin-bottom: 20px;
    font-weight: 100;
    text-align: justify;
}

.grille_projets h2 {
    margin-bottom: 20px;
    text-align: right;

}

.grille_projets h3 {
    margin-bottom: 20px;
margin-top: 30px;
}

.grille_projets small {
    display: block;
    text-align: right;
    margin-top: 30px;
    color: lightgray;

}

/* Styles communs pour les images */
.im {
    width: 100%;
    height: auto;
    /* Maintient un ratio carré pour toutes les images */
    object-fit: cover;
    /* Assure que les images couvrent l'espace sans déformation */
    box-sizing: border-box;
    /* Pour inclure les marges et les paddings dans la largeur/hauteur */
    display: block;
    /* Élimine l'espace supplémentaire sous l'image */
    border-radius: 5px;
}

.grille_illus img {
    width: 100%;
    height: auto;
    /* Maintient un ratio carré pour toutes les images */
    object-fit: cover;
    /* Assure que les images couvrent l'espace sans déformation */
    box-sizing: border-box;
    /* Pour inclure les marges et les paddings dans la largeur/hauteur */
    display: block;
    /* Élimine l'espace supplémentaire sous l'image */
    border-radius: 5px;
}

.projets {
    width: 100%;
    height: auto;
    /* Maintient un ratio carré pour toutes les images */
    object-fit: cover;
    /* Assure que les images couvrent l'espace sans déformation */
    box-sizing: border-box;
    /* Pour inclure les marges et les paddings dans la largeur/hauteur */
    display: block;
    /* Élimine l'espace supplémentaire sous l'image */
    border-radius: 5px;
}



/* Positionnement individuel des images */
/* Première ligne : deux carrés et un rectangle */
.im1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.im2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.im3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.im4 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.im5 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.im6 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.im7 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.im8 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.im9 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.im10 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.im11 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;

}

.im12 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.im13 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.im14 {
    grid-column: 2 / 5;
    grid-row: 4 / 5;
}

.im14 img:hover {
    transform: none;
    opacity: initial;
}

.im15 img:hover {
    transform: none;
    opacity: initial;
}

.im15 {
    display: none;
}



/*Illus grille -------*/
.il1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.il2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.il3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.il4 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.il5 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.il6 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.il7 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}

.il8 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.il10 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.il11 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.il12 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.il13 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.il14 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
/*Illus grille -------*/


.pages>div {
    background-color: #e7c597;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
}

.pages>div:hover {
    background-color: #3783A3;
}

.pied {
    margin-top: 60px;
    padding-left: 5%;
    padding-right: 5%;
}

.sociaux a {
    color: gray;
    font-size: 30px;
}

.sociaux a:hover {
    color: lightgray;
    font-size: 30px;
}

.sociaux p {
    margin-top: 10px;
    margin-bottom: 30px;
    color: gray;
    text-align: center;
    color: gray;
    font-size: 0.8em;
}

.sociaux {
    display: flex;
    flex-direction: column;
    /* Organise les éléments verticalement */
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: center;
    /* Centre le texte pour les sous-éléments */
    padding: 20px 0;
}

.icons-wrapper {
    display: flex;
    justify-content: center;
    /* Centre les icônes horizontalement */
    flex-wrap: wrap;
    /* Permet aux icônes de passer à la ligne si nécessaire */
    gap: 10px;
    /* Espacement entre les icônes */
    width: 100%;
    /* Assure que le wrapper prend toute la largeur */
    align-content: center;
}

.fa {
    font-size: 2em;
    /* Ajuste la taille des icônes */
    padding: 8px;
    /* Ajuste l'espacement autour des icônes */
    color: rgb(0, 0, 0);
    /* Couleur des icônes */
}

.fa:hover {
    color: lightgray;
    /* Couleur des icônes au survol */
}

/* Styles spécifiques pour les crédits */
.credits {
    margin-top: 10px;
    /* Ajoute un espace entre les icônes et les crédits */
    font-size: 1em;
    /* Ajuste la taille de la police pour les crédits */
    width: 100%;
    /* Assure que les crédits prennent toute la largeur et restent centrés */
}

/* Styles pour le bouton menu hamburger */
.hamburger-menu {
    display: none;
    /* Caché par défaut, sera affiché sur mobile */
    align-items: center;
    justify-content: center;
}

.hamburger-menu:hover {
    text-decoration: none;
    color: lightgray;
}

.hamburger-menu button {
    background: none;
    border: none;
    font-size: 2em;
    /* Taille de l'icône du menu hamburger */
    color: gray;
}


.hamburger-menu button .fa-bars {
    cursor: pointer;
}

/* Micro-interaction au survol des images: flou léger, changement d'opacité et légère mise à l'échelle */
.im:hover {
    opacity: 0.9;
    /* Légère réduction de l'opacité */
    transform: scale(1.05);
    /* Légère mise à l'échelle pour donner un effet de zoom discret */
    transition: all 0.2s ease-in-out;
    /* Transition douce pour l'effet */
    border-radius: 8px;
}

.il:hover {
transition: none;
transform: none;
    border-radius: 8px;
}






/* Media Query pour les écrans mobiles - MOBILE MOBILE MOBILE MOBILE-------------------------------------------*/

.bloc {
    grid-column: 1 / 10 ;
}

.illus {
    grid-column: 1 / 10 ;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100vw;
    height: 100vh;
    padding-top: 20px;
}

@media (max-width: 1200px) {

.chapeau a {
display: block;
gap: 20%;
}

.Navigation {
    font-size: 30px;
    align-items: center;
    margin-top: 40px;
    display: none;
}

.olivierhaeck img {
    display: none;
}

.info {
    grid-column: 1;
    grid-row: 1 ;
    margin-bottom: 50px;
}

.haut {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: auto;
    gap: 20px;
    margin-top: 0px;
    justify-content: space-between;
}

/* DÉBUT À PROPOS DE MOI-------*/
.texte {
    grid-column: 1;
    grid-row: 2 / 3 ;
    margin-bottom: 0px;
}

.aproposdemoi {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: auto;
    gap: 20px;
    margin-top: 0px;
    justify-content: space-between;
}

.aproposdemoi img {
    width: 100%;
    grid-column: 1 ;
    grid-row: 1 / 2 ;
    margin-left: 0px;
    margin-top: 30px;
}

.retrouver {
    padding: 0px;
    margin-top: 40px;
}
/*FIN A PROPOS DE MOI--------*/

.barre {
    display: block;
    display: flex;
    grid-template-columns: repeat(1,1fr);
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding-top: 20px;
}

.logohaut {
    display: block;
    width: 50%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    justify-content: center;
}

.haut {
    gap: 0px;
    margin-right: 0px;
}

.haut img {
    width: 80%;
    grid-column: 1 / 2 ;
    grid-row: 1 / 3 ;
    margin-left: 0px;
    margin-left: 15%;
    padding-left: 0px;
    padding-right: 0px;
}



    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        /* Alignement des éléments à la base */
        background-color: rgb(255, 255, 255);
        z-index: 10000;
    }

    .pied {
        margin-top: 0px;
        padding-left: 10%;
        padding-right: 10%;
    }

    .entete img {
        width: auto;
        height: 60px;
        /* Hauteur fixe pour le logo pour contrôler sa taille */
    }

/* DÉBUT ENTETE INDEX MOBILE---NE FONCTIONNE PAS ENCORE...--*/
    .chapeau img {
        width: auto;
        height: 60px;
        /* Hauteur fixe pour le logo pour contrôler sa taille */
    }


    header .chapeau {
        grid-template-columns: repeat(1,1fr);
        justify-content: space-between;
        align-items: center; 
        padding: 0px;
        display: flex;
        justify-content: center;
    }

    
/* FIN ENTETE INDEX MOBILE-----*/




    .hamburger-menu {
        display: flex;
        /* Assure que le menu hamburger est visible et aligné */
        align-items: center;
        /* Centre verticalement le bouton dans l'en-tête */
    }

    main {
        grid-template-columns: repeat(10, 1fr);
        padding-top: 50px;
        /* Espace supérieur pour s'assurer que le contenu principal ne soit pas caché par l'en-tête */
        padding-bottom: 0px;
        /* Augmente l'espace en bas avant le pied de page */
        margin-right: 0px;
    }

    h1 {
        margin-top: 5px;
        /* Augmente l'espace au-dessus du h1 pour plus de clarté */
        text-align: left;
        margin-bottom: 20px;
        font-size: 1.8em;
        padding-top: 40px;
    }



    .main {
        grid-row-start: 2;
        grid-row-end: 9;
        grid-column-start: 1;
        grid-column-end: 10;
        padding: 0px;
    }

    .menu1 a,
    .menu1 a:hover {
        text-decoration: none;
        /* Enlève le soulignement pour l'état normal et au survol */
        color: gray;
        /* Couleur des liens inchangée */
        background-color: transparent;
        /* Aucun changement de fond au survol */
    }

    
    .menu1 {
        display: none;
        position: centered;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        /* S'assure que le menu est au-dessus des autres éléments */
    }

    .menu1 a {
        padding: 20px;
        /* Augmente le padding pour espacer les éléments */
    }

    .close-menu {
        display: block;
        /* S'assure que le bouton est visible */
        position: absolute;
        /* Position absolue pour placer précisément le bouton */
        top: 20px;
        /* Espace du haut */
        right: 20px;
        /* Espace du côté droit */
        font-size: 2em;
        /* Taille de l'icône */
        color: rgb(0, 0, 0);
        /* Couleur de l'icône */
    }

    .hamburger-menu {
        display: block;
    }

    /* Affiche le menu en plein écran en mobile */
    .menu-deployed {
        display: flex;
        /* Utilise flexbox pour le layout */
        flex-direction: column;
        /* Empile les éléments verticalement */
        justify-content: center;
        /* Centre les éléments verticalement */
        align-items: center;
        /* Centre les éléments horizontalement */
        width: 100%;
        /* Prend toute la largeur */
        height: 100vh;
        /* Prend toute la hauteur de la vue */
        position: fixed;
        /* Position fixe pour couvrir tout l'écran */
        top: 0;
        /* À partir du haut de la page */
        left: 0;
        /* À partir du côté gauche de la page */
        background-color: rgb(255, 255, 255);
        /* Fond blanc pour le menu */
        z-index: 100000;
        /* S'assure que le menu est au-dessus de tout le contenu */
        padding-top: 50px;
        /* Ajoute un peu d'espace en haut */
    }

    .menu1 .actif {
        color: black;
        /* Si vous voulez que .actif reste noir aussi en mobile */
    }

    /* Rend le conteneur de l'en-tête responsive */
    header .entete {
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        padding: 0px;
        align-items: center; 
        padding-left: 30px;
        padding-right: 30px;
    }


    /* Affiche le logo et le bouton menu hamburger */
    .item1 {
        grid-column: 1;
    position: sticky;
    }

    .hamburger-menu {
        grid-column: auto;
    }

    .grille_images {
        margin: 0 auto;
        /* Centre la grille dans le viewport */
        padding: 10px;
        /* Assure une marge intérieure pour ne pas toucher les bords */
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        /* Deux colonnes */
        gap: 20px;
        /* Espacement entre les images */
    }

    .grille_illus {
        margin: 0 auto;
        /* Centre la grille dans le viewport */
        padding: 0px;
        /* Assure une marge intérieure pour ne pas toucher les bords */
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        /* Deux colonnes */
        gap: 20px;
        /* Espacement entre les images */
    }


    .grille_projets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* Deux colonnes */
        gap: 10px;
        /* Espacement entre les images */
    }

    .grille_projets h2 {
        margin-top: 30px;
        text-align: left;
        font-weight: 600;
        margin-bottom: 35px;
    }

    .grille_projets small {
        display: block;
        margin-top: 40px;
        text-align: right;
    }

    .grille_images img {
        width: 100%;
    }

    .grille_illus img {
        width: 100%;
    }

    .sociaux {
        margin-top: 30px;
    }

    /* Assignation des images aux cellules de la grille */
    /* Configuration initiale pour toutes les images */
    .im {
        grid-row: span 2;
        /* La plupart des images s'étendent sur deux lignes pour maintenir la forme carrée */
    }

    .il {
        grid-row: span 2;
        /* La plupart des images s'étendent sur deux lignes pour maintenir la forme carrée */
    }
    

    /* Ajustements pour éviter les chevauchements tout en maintenant un flux visuel dynamique */
    /* Carrés */
    .im1 {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .im2 {
    grid-column: 2;
    grid-row: 1 / 2;
    }

    .im3 {
        grid-column: 1;
        grid-row: 3 / 5;
    }

    .im4 {
        grid-column: 2;
        grid-row: 3 / 5;
    }

    /* Déplacé pour éviter le chevauchement avec .im2 */
    .im5 {
        grid-column: 1;
        grid-row: 5 / 7;
    }

    .im6 {
        grid-column: 2;
        grid-row: 5 / 7;
    }

    .im8 {
        grid-column: 2;
        grid-row: 7 / 9;
    }

    .im9 {
        grid-column: 1;
        grid-row: 9 / 11;
    }

    .im11 {
        grid-column: 1;
        grid-row: 11 / 13;
    }

    .im12 {
        grid-column: 2;
        grid-row: 11 / 13;
    }

    .im13 {
        grid-column: 1;
        grid-row: 13 / 15;
    }

    .im14 {
   display: none;
    }

    .im15 {
        grid-column: 2;
        grid-row: 13 / 15;
    }

    .im15 {
        display: contents;
    }

    /* Ajusté pour continuer le motif sans chevauchement */

    /* Rectangles longs */
    .im2 {
        grid-column: 2;
        grid-row: 1 / 3;
    }


    .im7 {
        grid-column: 1;
        grid-row: 7 / 9;
    }

    .im10 {
        grid-column: 2;
        grid-row: 9 / 11;
    }



    /*illus grilles-------*/
        .il1 {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .il2 {
    grid-column: 2;
    grid-row: 1 / 2;
    }

    .il3 {
        grid-column: 1;
        grid-row: 3 / 5;
    }

    .il4 {
        grid-column: 2;
        grid-row: 3 / 5;
    }

    /* Déplacé pour éviter le chevauchement avec .im2 */
    .il5 {
        grid-column: 1;
        grid-row: 5 / 7;
    }

    .il6 {
        grid-column: 2;
        grid-row: 5 / 7;
    }

    .il8 {
        grid-column: 1;
        grid-row: 5 / 7;
    }

    .il9 {
        grid-column: 2;
        grid-row: 5 / 7;
    }

    .il11 {
        grid-column: 1;
        grid-row: 6 / 8;
    }

    .il12 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .il13 {
        grid-column: 1 / 3;
        grid-row: 3 / 6;
    }

    .il14 {
        grid-column: 1 / 3;
        grid-row: 6 / 9;
    }

    /* Ajusté pour continuer le motif sans chevauchement */

    /* Rectangles longs */
    .il2 {
        grid-column: 2;
        grid-row: 1 / 3;
    }


    .il7 {
        grid-column: 1 / 3;
        grid-row: 5 ;
    }

    .il10 {
        grid-column: 2;
        grid-row: 6 / 8;
    }

    /*illus grilles-------*/
}


* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body { font-family: sans-serif; }
  
  .gallery {
    background: #EEE;
  }
  
  .gallery-cell {
    width: 66%;
    height: 200px;
    margin-right: 10px;
    background: #8C8;
    counter-increment: gallery-cell;
  }
  
  /* cell number */
  .gallery-cell:before {
    display: block;
    text-align: center;
    content: counter(gallery-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
  }

/*
iiiiiii  sss   rrrr    aaa  eee l
   ii   s    r   r  a   a e     l    
   ii    sss  rrrr  aaaaa eeee  l    
   ii       s r  r  a   a e     l    
iiiiiii  sss   r   r a   a  e   lll  

ddddd  u  u pppp  u   u iii sss  
d   d  u  u p   p u   u  i  s     
d   d  u  u pppp  u   u  i   sss  
d   d  u  u p     u   u  i      s 
ddddd   uuu p      uuu  iii sss   

Codé par Israël Dupuis en 2024 pour le plus grand bien de tous.
*/