/* html {
   height: 100%;
}*/

body {
   /* margin-right: 9rem;
   margin-left: 9rem;

   height: 100%; */
   display: flex;
   flex-direction: column;
}

/* html,
body {
    scroll-behavior: smooth;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #FFF7E7;
    color: #743A39;
    font-family: 'Motley Forces', Courier, monospace;
} */

/* .content {
   flex: 1 0 auto;
} */

.visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

@media screen and (max-width:450px) {
   ul {
      padding: 0;
   }
}

li {
   margin-top: 0;
   font-size: 1rem;
   list-style: none;
}

@media screen and (min-width:450px) {
   li {
      font-size: 1.1rem;
   }
}

.liste-avec-puces {
   margin: 0;
}

.liste-avec-puces li {
   list-style: disc;
   margin-left: 1.25rem;
   margin-top: 0;
   padding-bottom: .625rem;
}

/* Titres h1 */
.titre {
   font-size: 3rem;
}

@media screen and (max-width:450px) {
   .titre {
      font-size: 2.2rem;
   }
}

h2 {
   margin-top: 2rem;
}

h3 {
   font-family: 'Montserrat', sans-serif;
}

a {
   text-decoration: none;
}

.responsive {
   padding-left: 3rem;
   padding-right: 3rem;
}

@media screen and (min-width:1024px) {
   .responsive {
      /* flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end; */
      padding-left: 3rem;
      padding-right: 3rem;
   }
}

@media screen and (min-width:1200px) {
   .responsive {
      /* flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end; */
      padding-left: 6rem;
      padding-right: 6rem;
   }
}

@media screen and (min-width:1400px) {
   .responsive {
      padding-left: 10rem;
      padding-right: 10rem;
   }
}

@media screen and (min-width:2200px) {
   .responsive {
      padding-left: 25rem;
      padding-right: 25rem;
   }
}

.chapeau {
   font-weight: bold;
}

.realisation_listes_videos {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

@media screen and (min-width:768px) {
   .realisation_listes_videos {
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: 1.875rem;
      row-gap: .625rem;
   }
}

.ma_realisation {
   max-height: 23rem;
   border-radius: 1rem;
}

.ma_realisation2 {
   max-height: 15rem;
   border-radius: 1rem;
}

.ma_realisation:hover {
   border: transparent solid 2px;
}

.logo-site {
   max-width: 20rem;
   margin-top: 5rem;
}

.logo-site:first-child {
   margin-right: 5rem;
}

@media screen and (min-width:768px) {
   .logos-site {
      margin-top: 0;
   }
}

.le-lien:hover {
   border: #FFF7E7 solid 2px;
}

.intro-site {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin-top: 0;
   margin-bottom: 3rem;
   align-items: center;
}

.projet1 {
   display: flex;
   flex-direction: column-reverse;
   /* justify-content: space-between; */
   width: 80vw;
}
@media screen and (min-width:768px) {
   .projet1 {
      flex-direction: row;
      justify-content: space-between;
   }
}

@media screen and (min-width:768px) {
   .texte-projet-150 {
      width: 150%;
   }
   .texte-projet-120 {
      width: 120%;
   }
   .texte-projet-100 {
      width: 100%;
   }
   .texte-projet-70 {
      width: 70%;
   }
   .texte-projet-50 {
      width: 50%;
   }
}

.image1-detail-projet {
   display:flex;
   justify-content: center;
}
@media screen and (min-width:768px) { 
   .image1-detail-projet {
      display:block;
   }
}

.la-maquette {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   /* Espacement entre les images */
   width: 100%;
}

.frame {
   width: 100%;
   max-width: 1200px;
   /* Optionnel, pour limiter la taille max sur grand écran */
   text-align: center;
   align-items: center;
   /* Centre le texte sous l'image */
}

.maquette {
   width: 100%;
   /* Prend toute la largeur du conteneur */
   height: auto;
   /* Garde les proportions */
   object-fit: contain;
   /* Empêche la déformation */
   border-radius: 1rem;
}

@media screen and (min-width: 768px) {
   .la-maquette {
      flex-direction: row;
      justify-content: space-between;
      /* Espacement égal */
   }

   .frame {
      width: 33.33%;
      /* Chaque image prend un tiers de l'écran */
   }

   .la-maquette .alignement-haut {
      align-items: flex-start;
      /* Alignement en haut */
   }

}

/* avant  */
/* .la-maquette {
   display: flex;
   flex-direction: column;
}

.maquette {
   max-width: 16rem;
   border-radius: 1rem;
}

@media screen and (min-width:768px) {
   .la-maquette {
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      column-gap: 1.625rem;
   }

   .maquette {
      max-width: 14rem;
   }
}

.frame {
   display: flex;
   flex-direction: column;
   margin-right: 0;
}

@media screen and (min-width:450px) {
   .frame {
      margin-right: 2rem;
   }
} */

/*  */

.realisation-seule {
   max-height: 80vh;
   border-radius: 1rem;
}


.grande {
   max-width: 30vw;
   border-radius: 1rem;
}

.center {
   display: flex;
   justify-content: center;
}

@media screen and (max-width:450px) {
   .video {
      max-width: 75vw;
      height: auto;
   }
}


/* IDENTITE VISUELLE */
.identite_visuelle {
   display: flex;
   flex-direction: column;
}



/* CARROUSEL version 2 */
/* Définition d'un container pour gérer l'affichage */
.container {
   overflow: hidden;
   /* Cache les éléments qui dépassent du container */
   display: flex;
   justify-content: center;

}

/* Définition du carousel */
.carousel {
   position: relative;
   /* Le carousel est positionné relativement à son parent */
   width: 400px;
}

/* Définition de l'élément contenant les diapositives */
.carousel-inner {
   display: flex;
   overflow: hidden;
   /* Cache les éléments qui dépassent */
   /* height: 100vh; */
   /* Hauteur égale à 100% de la hauteur de la vue */
   flex-wrap: nowrap;
   /* Empêche les éléments de se placer sur plusieurs lignes */
   border-radius: 1rem;
   height: 400px;
   width: 400px;
}

/* Définition des diapositives */
.slide {
   flex: 0 0 100%;
   /* Largeur de chaque diapositive est de 100% */
   height: 100%;
   /* Hauteur de chaque diapositive est de 100% */
   transition: .5s ease-in-out;
   /* Ajout d'une animation douce pour la transition entre les diapositives */
}

/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
   width: 100%;
   /* Largeur de l'image est de 100% */
   height: 100%;
   /* Hauteur de l'image est de 100% */
   object-fit: cover;
   /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel */
.carousel-controls {
   position: absolute;
   /* Les boutons sont absolument positionnés */
   z-index: 5;
   /* Ils sont placés au-dessus des autres éléments */
   left: -20%;
   /* La distance à gauche est de 10% */
   right: -20%;
   /* La distance à droite est de 10% */
   top: 42.5%;
   /* La distance du haut est de 50% */
   display: flex;
   /* Affiche les boutons en ligne */
   justify-content: space-between;
   /* Espacement égal entre les boutons */
}

/* Style des boutons de contrôle */
.carousel-controls button {
   padding: 10px;
   /* Ajout de padding pour un meilleur contrôle */
   background-color: #1E1C1C;
   border: #1E1C1C;
   /* Arrière-plan en black */
   width: 70px;
   /* height: 60px; */
   fill: #fff;
   cursor: pointer;
}

.carousel-controls :hover {
   fill: red;
   /* Arrière-plan en black */

}

/* Définition des points de contrôle */
.carousel-dots {
   /* position: absolute; */
   /* Les points sont absolument positionnés */
   z-index: 5;
   /* Ils sont placés au-dessus des autres éléments */
   /* left: 50%; */
   /* La distance à gauche est de 50% */
   /* right: 50%; */
   /* La distance à droite est de 50% */
   /* bottom: 0%; */
   /*La distance du bas est de 10% */
   display: flex;
   /* Affiche les points en ligne */
   justify-content: center;
   /* Centrage des points */
   padding-top: 20px;
   ;
}

.carousel-dots span {
   min-width: auto;
}

/* Style des points de contrôle */
.carousel-dots .dot {
   border-radius: 50%;
   /* Les points sont en forme de cercle */
   margin: 5px;
   /* Ajout d'un margin pour un meilleur contrôle */
   cursor: pointer;
   /* Curseur en forme de main pour un meilleur contrôle */
}

/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
   /* Border de 10px pour le point actif */
   border: 10px solid red !important;


   /* !important permet de surcharger les autres styles éventuels */
}

.carousel-dots .inactive {
   /* Border de 10px pour les points inactifs */
   border: 10px solid #FFF;
}