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

body {
    font-family: "readex pro", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wght" 300;
    font-size: 1.2em;
    color: ;
}

a {
    text-decoration: none;
    color: gray;
    transition: color 0.2s ease-in-out;
}

a:active{
    transform:  scale(0.95);
}

.wrapper {
    width: 100%;
    min-height: 100vh;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
}

main {
    max-width: 100%;
    padding: 16px;
    flex: 1;
}

.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 16px;
    padding-top: 20px;
    padding-bottom: 16px;
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 1020;
}

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

.item1 a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.item1 img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
}

.menu1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Alignement à droite des éléments de menu */
    gap: 20px;
    /* Espace entre les éléments de menu, ajustez selon vos besoins */
}

a:hover {
    color: lightgray;
}

a.active{
    text-decoration: underline;
}

.item1 a:hover img {
    transform: rotate(360deg);
}

.grille-projets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding-top: 0px;
    font-size: 1em;
}

.im {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 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 */
    transition: transform 0.3s ease-in-out;
    transform-origin: center bottom;
}

.im_sans {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 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 */
}

.im_sans_grand {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    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 */
}

.im:hover {
    transform: scale(1.05);
    /* Légère mise à l'échelle pour donner un effet de zoom discret */
    transition: all 0.3s ease-in-out;
    /* Transition douce pour l'effet */
    overflow: hidden;
}

.grille-projets figure > a {
    display: block;
    overflow: hidden;
    /* Limite l'effet de zoom à l'intérieur du bloc image */
}

.legende {
    display: grid;
    grid-template-columns: auto auto;
    text-align: left;
    align-items: space-between;
    margin-top: 16px;
}

h3 {
    font-size: 1em;
}

h1 {
    color: rgb(116, 116, 116);
    text-align: left;
    font-size: 3em;
    margin-bottom: 8px;
}

.h3droit{
    text-align: right;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: 80px;
}

small {
    color: rgb(116, 116, 116);
    font-variation-settings: "wght" 200;
}

.projet {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Définit une grille de 9 colonnes */
    gap: 35px;
    /* Espacement uniforme entre les éléments de la grille */
    padding-top: 60px;
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;
    height: auto;
    align-items: stretch;
}

.projet-video {
    grid-template-columns: repeat(1,1fr);
}

.texte_video {
    grid-column: 1;
    margin: 0;
    font-size: clamp(1.2rem, 2.3vw, 2.9rem);
    line-height: 1.25;
}

.texte_projet {
    grid-column: span 3;
    max-height: 100%; 
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.texte_projet p {
    margin: 0;
    font-size: clamp(1.2rem, 2.3vw, 2.9rem);
    line-height: 1.25;
}

.grille_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Définit une grille de 9 colonnes */
    gap: 0px;
    /* Espacement uniforme entre les éléments de la grille */
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    height: auto;
    padding-top: 50px;
}

.credit{
    /* Ajoute un espace entre les icônes et les crédits */
    /* Ajuste la taille de la police pour les crédits */
    /* Assure que les crédits prennent toute la largeur et restent centrés */
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: "Readex Pro", sans-serif;
    font-weight: 300;
    color: rgb(116, 116, 116);
    padding-top: 50px;
}

.info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    padding-top: 50px;
    font-size: 1.5em;
}

.info p {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    line-height: 1.25;
    grid-column: span 2;
}

.contact {
    grid-column: span 4;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    padding-top: 100px;
}

.contact a {
    margin: 0;
    font-variation-settings: "wght" 300;
    font-family: readex pro, sans-serif;
    font-size: clamp(1rem, 1.5vw, 2.5rem);
    line-height: 1.25;
}

.experience{
    grid-column: span 2;
}

.experience p {
    padding-top: 16px;
    padding-bottom: 10px;
}

.experience h2 {
    font-size: clamp(1.25rem, 1.5vw, 2.5rem);
}

p {
    font-family: "Readex Pro", sans-serif;
    font-size: 1em;
    line-height: 1.5;
    color: rgb(116, 116, 116);
    font-variation-settings: "wght" 300;
}

h2 {
    color: rgb(116, 116, 116);
    font-size: 1.2em;
    background-color: #e6e6e6;
    display: inline-block;
    line-height: 1;
}

.im1 {
    grid-column: 1 / 4;
    /* Le premier carré occupe 3 colonnes */
    /* S'étend sur 2 rangées pour former un carré */
}

.im2 {
    grid-column: 1 / 3;
    grid-row: span 2;
    /* Le deuxième carré, à côté du premier */
}

.im3 {
    grid-column: 3 / 5;
    grid-row: span 2;
    /* Un grand rectangle occupant le reste de la ligne */
}

/* Deuxième ligne : deux carrés sous les premiers */
.im4 {
    grid-column: 1 / 5;
    grid-row: span 2;
    /* Continue avec un autre carré sous le .im1 */
}

.im5 {
    grid-column: 1 / 3;
    grid-row: span 2;
    /* Carré sous le .im2 */ 
}

/* Troisième ligne : commence par un rectangle, suivi de deux carrés */
.im6 {
    grid-column: 3 / 5;
    grid-row: span 2;
    /* Grand rectangle occupant la moitié gauche */
}

.im7 {
    grid-column: 1 / 3;
    grid-row: span 2;
    /* Carré à droite du rectangle */
}

.im8 {
    grid-column: 3 / 5;
    grid-row: span 2;
    /* Un autre carré à côté du .im7 */
}

/* Quatrième ligne : deux carrés sous ceux de la troisième ligne */
.im9 {
    grid-column: 1 / 3;
    grid-row: span 2;
    /* Carré sous le .im7 */
}

.im10 {
    grid-column: 3 / 5;
    grid-row: span 2;
    /* Carré sous le .im8 */
}

/* Remplissage de la dernière ligne avec quatre carrés */
.im11 {
    grid-column: 1 / 3;
    grid-row: span 2;
    /* Carré à gauche de .im12 */
}

.im12 {
    grid-column: 4 / 7;
    grid-row: span 2;
    /* Carré à droite de .im11 */
}

.project-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-projet-prev {
    justify-content: flex-start;
}

.btn-projet-next {
    justify-content: flex-end;
}

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


.carousel-wrap {
  width: 100%;
  height: 85vh;
 
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Image area — takes all remaining space above the fixed info bar ── */
.carousel-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.slides {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #444;
  font-size: 9px;
}

.slide-placeholder svg {
  width: 56px;
  height: 56px;
  stroke: #333;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin:bevel;
}
.info-bar {
  flex-shrink: 0;
  height: 52px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.counter {

  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;      /* pousse le bloc vers la droite */
}

.nav-btn {
  background: none;
  border: none;
  color: rgba(128, 128, 128);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s, transform 0.15s;
}
 

.nav-btn svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-btn:hover {    
    color: rgb(204 , 204, 204);
}

.nav-btn:active {
  transform: scale(0.9);
}

.nav-btn:disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

.nav-btn.prev { left: 0; }
.nav-btn.next { right: 0; }

/* ── Info bar — fixed height, always visible at the bottom ── */
.info-bar {
  flex-shrink: 0;
  height: 52px;           /* fixed — guarantees it's always visible */
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;      /* pousse le bloc vers la droite */
}

.counter {  
  color: rgb(128, 128, 128);  
  text-transform: uppercase;
  flex-shrink: 0;
}

.description {
  color: rgb(128, 128, 128);
  line-height: 1.4;
  

  transition: opacity 0.2s ease;
}



.video-container {
   display: flex;
   flex-direction: column;
    width: 100%;
    height: 100%;
    object-fit: cover;
    align-content: center;
    justify-content: center;
    padding-bottom: 16px;
    padding-top: 16px;
}



@media (max-width: 768px) {

    body {
        padding: 0px;
        /* Marge autour du contenu */
    }

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

  .wrapper {
        padding-top: 30px;
         /* Réduit l'espace au-dessus du contenu pour les petits écrans */
        width: 100%;
        min-height: 100vh;
    }

    main {
         /* Réduit l'espace au-dessus du contenu principal pour les petits écrans */
        padding: 16px;
        /* Espace supérieur pour s'assurer que le contenu principal ne soit pas caché par l'en-tête *
        grid-row-start: 1;
        grid-row-end: 9;
        grid-column-start: 2;
        grid-column-end: 9;
        width: 100%;
         /* Assure que le contenu principal prend toute la largeur disponible */
    }

    footer a,
    footer small {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    
    }

    footer{
        width: 100%;
         /* Assure que le pied de page prend toute la largeur disponible */
        padding: 20px;
        display: flex;
        flex-direction: column;
         /* Organise les éléments du pied de page en colonne */
        gap: 10px;
         /* Espace entre les éléments du pied de page */
         align-items: flex-start;
         justify-content: flex-end;
         /* Centre les éléments du pied de page horizontalement */  
    }

    h1 {
        margin-top: 30px;
        /* Augmente l'espace au-dessus du h1 pour plus de clarté */
        text-align: left;
        margin-bottom: 8px;
        font-size: 2em;
    }

    p {
        font-size: 1.2em;
        /* Ajuste la taille de la police pour une meilleure lisibilité sur mobile */
    }

    .menu1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Alignement à droite des éléments de menu */
    gap: 20px;
    /* Espace entre les éléments de menu, ajustez selon vos besoins */
    }

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

    .menu1:active {
    transform:  scale(0.95);
        /* Si vous voulez que .actif reste noir aussi en mobile */
    }


    /* Rend le conteneur de l'en-tête responsive */
    .entete {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px;
        position: fixed;
        background: white;
        z-index: 3000;
        box-sizing: border-box;
    }

    .logo-text{
        display: none;
    }

    .hamburger-menu {
        display: none;
    }


   .grille-projets {
        grid-template-columns: repeat(1,1fr);
        gap: 24px;
        max-height: 100%;
    }

    .grille-projets figure {
     grid-column: auto !important;
    }

    .projet {
        grid-template-columns: 1fr;
        gap: 24px;
        height: 100%;
    }

    .texte_projet p {
        font-size: 1.2em;
    }

    .texte_projet {
        grid-column: 1;
        grid-row: auto;
        display: flex;
        flex-direction: column;
        max-height: 100%; 
        gap: 16px;
        padding-top: 16px;
    }

    .texte_projet p {
        margin: 0;
        display: block;
    }



    .im1,
    .im2,
    .im3,
    .im4,
    .im5,
    .im6,
    .im7,
    .im8,
    .im9,
    .im10,
    .im11,
    .im12 {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .grille_projets h2 {
        margin-top: 30px;
        text-align: right;
    }

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

    .grille_images {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* Une colonne */
        gap: 10px;
        /* Espacement entre les images */
        width: 100vw;
    }

    .grille_images figure {
        grid-column: auto !important;
        /* Chaque figure occupe une ligne entière */
    }
    

    .grille_images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .grille_projets2 {
        grid-row: auto !important;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
    }



    .sociaux {
        margin-top: 60px;
    }

    /* Assignation des images aux cellules de la grille */
    /* Configuration initiale pour toutes les images */
    .im {
        grid-row: span 2;
        grid-column: span 1;
        /* 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: auto;
    }

    .im2 {
        grid-column: 1;
        grid-row: auto;
    }

    .im3 {
        grid-column: 1;
        grid-row: auto;
    }

    .im4 {
        grid-column: 1;
        grid-row: auto;
    }

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

    .im6 {
        grid-column: 1;
        grid-row: auto;
    }

    .im8 {
        grid-column: 1;
        grid-row: auto;
    }

    .im9 {
        grid-column: 1;
        grid-row: auto;
    }

    .im10 {
        grid-column: 1;
        grid-row: auto;
    }


    .im11 {
        grid-column: 1;
        grid-row: auto;
    }

    .im12 {
        grid-column: 1;
        grid-row: auto;
    }

    .info {
        display: flex;
        flex-direction: column;
         
        width: 100%;
    }

    .contact{
        padding-top: 0px;
        display: flex;
        flex-direction: column;
    }

    .contact a{
        font-size: 1rem;
    }

    .experience {
        padding-left: 0px;
    }

    .slide img {
    width: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    }


  

/*
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.
*/ 
}