@font-face {
    font-family: 'chantier_bold';
    src: url('chantier_bold.woff2') format('woff2'),
         url('chantier_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'chantier_italic';
    src: url('chantier_italic.woff2') format('woff2'),
         url('chantier_italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chantier_regular';
    src: url('chantier_regular.woff2') format('woff2'),
         url('chantier_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'chantier_regular';
    font-weight: normal;
    margin: 0;
    background-color: #db2121;
    position: relative; /* Assure que le z-index fonctionne correctement */
    padding-bottom: 40vh;
    color: #170e0a;
    z-index: 11000; /* Assure que le grain est au-dessus de tout */
}



.mosaic {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center; /* Centrage horizontal */
}

.square {
    position: relative; /* Positionnement relatif pour positionner les titres et le bouton */
    width: calc(25% - 60px); /* 25% - 2*30px de padding */
    height: 0;
    padding-bottom: calc(25% - 60px); /* Même taille que la largeur */
    background-color: none;
    margin: 50px; /* Espace entre les carrés */
    border-radius: 3px; /* Ajout du border-radius */
}
.square img {
  width: 100%; /* Définit la largeur de l'image à 100% */
  object-fit: cover; /* Assurez-vous que l'image couvre tout le carré */
  object-position: center; /* Centre l'image dans le carré */
  border-radius: 3px; /* Ajoutez une bordure arrondie à l'image */
}
.square h1, .square h2 {
    position: absolute;
    bottom: -30px; /* Éloignement par rapport au bas du carré */
    left: 0;
    width: 100%;
    text-align: left; /* Alignement du texte à gauche */
    margin: 0;
    padding: 2px 2px; /* Espacement entre le texte et le bord du carré */
    line-height: 1.2; /* Interlignage automatique */
}

.square h1 {
  font-family: 'chantier_regular';
font-weight: normal;
    font-size: 18px; /* Taille du titre h1 */
}

.square h2 {
  font-family: 'chantier_italic';
  font-weight: normal;
    font-size: 18px; /* Taille du titre h2 */
    bottom: -50px; /* Éloignement par rapport au bas du carré */

}

footer {
    height: 120px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    overflow: hidden;
    background: linear-gradient(rgba(255, 0, 0, 0) 0% 10%, #db2121 40% 100%);
    text-align: center; /* Ajout d'un alignement pour centrer le contenu */
}

.bcr h3 {
    font-family: 'chantier_regular';
    font-weight: normal;
    text-align: center;
    font-size: 24px; /* Taille du titre h3 */
    margin-bottom: 20px; /* Ajout de la marge en bas */
    position: absolute;
    bottom: 10px; /* Ajustement pour tenir compte de la marge en bas */
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal */
}


.footer-button {
    position:absolute;
    bottom: 0px; /* Ajustement pour tenir compte de la marge en bas */
    transform: translateY(-30%);
    left: 60%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #f030a0;
    font-family: 'chantier_regular';
    font-weight: normal;
    font-size: 40px; /* Taille du titre h2 */
}

.plus-button {
  font-family: 'chantier_regular';
  font-weight: normal;
  font-size: 40px; /* Taille du titre h2 */
    position: absolute;
    bottom: -50px; /* Éloignement par rapport au bas du carré */
    right: 0; /* Alignement à droite */
    padding: 2px 2px;
    color: #f030a0;
    border: none;
    cursor: pointer;
    background-color: transparent;
}



.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    display: none;
    width: calc(100% - 20px); /* 25% - 2*30px de padding */
    z-index: 800;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px rgba(150, 150, 150, .4);

}

.dropdown-menu a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
  border-bottom: 2px solid;
  border-bottom-style: dotted;
  line-height: 30px;
    color: #f030a0;
    z-index: 800;
    font-family: "antarctican-mono", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 15px; /* Taille du titre h1 */
    cursor: pointer;

}
a {
    text-decoration: none;
    color: #f030a0;
    font-family: "antarctican-mono", sans-serif;
font-weight: 400;
font-style: normal;
    cursor: pointer;

}
a:hover{
    border-bottom: 2px solid #170e0a;
    border-bottom-style: dotted;
    color: #170e0a;

}
h4{
  display: block;
  text-decoration: none;
  color: #170e0a;
  z-index: 800;
  font-family: "antarctican-mono", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 12px; /* Taille du titre h1 */
  margin: 0;
  line-height: 1.2; /* Interlignage automatique */
}
h5{
  display: block;
border-bottom: 2px solid;
border-bottom-style: dotted;
line-height: 30px;
  color: #170e0a;
  z-index: 800;
  font-family: "antarctican-mono", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 15px; /* Taille du titre h1 */
}
h3 {
    font-family: 'chantier_regular';
    font-weight: normal;
}
.dropdown-menu-footer {
    bottom: 0px;
    align-content: center;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    display: none;
    width: 400px;
    height: 200px;
    z-index: 850;
    box-shadow: 0px -10px 10px 0px rgba(150, 150, 150, .4);
    border-radius: 5px;

}
.dropdown-menu-footer a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
  border-bottom: 2px solid;
  border-bottom-style: dotted;
  line-height: 30px;
    color: #f030a0;
    font-family: "antarctican-mono", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 15px; /* Taille du titre h1 */
    cursor: pointer;

}
.dropdown-menu-footer a:hover {
  border-bottom: 2px solid;
  border-bottom-style: dotted;
  color: #170e0a;
}

.centered {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 850; /* Assurez-vous que la dropdown-menu-footer est au-dessus du contenu */
    width: 400px; /* Faites en sorte que la largeur de la dropdown-menu-footer soit égale à la largeur de la fenêtre */
    background-color: #f5f5f5; /* Assurez-vous que la dropdown-menu-footer a une couleur de fond */
    padding: 10px; /* Ajoutez un padding si nécessaire */
    padding-bottom: 100px;
    height: 200px;
}

.close-button {
  font-family: 'chantier_regular';
  font-weight: normal;
  font-size: 40px; /* Taille du titre h2 */
    position: absolute;
    right: 3px; /* Alignement à droite */
    padding: 2px 2px;
    color: #f030a0;
    border: none;
    cursor: pointer;
    top: -8px;
    background: none;
    }

    #splash-screen {
      z-index: 950;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #db2121;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 1;
      transition: opacity 1s ease-out; /* Utilisation de "ease-out" pour une transition plus douce */
  }

  #splash-screen .logo-container {
      position: absolute;
      top: 43%; /* Ajustez la valeur pour centrer verticalement le logo par rapport au splash screen */
      left: 50%; /* Centrez horizontalement le logo par rapport au splash screen */
      transform: translate(-50%, -50%); /* Déplacez le logo de 50% de sa propre largeur et hauteur vers le haut et la gauche pour le centrer */
      z-index: 951; /* Assurez-vous que le logo est au-dessus du titre */
  }

  #splash-screen h3 {
      z-index: 950; /* Assurez-vous que le titre est sous le logo */
      color: #170e0a;
      font-size: 36px;
      font-family: 'chantier_regular';
      font-weight: normal;
      text-align: center;
      margin-top: 20px; /* Ajustez la marge supérieure pour donner de l'espace entre le logo et le titre */
  }


.page {
    width: calc(100% - 40px); /* Largeur totale moins 40px de marges */
    max-width: 21cm; /* Largeur maximale de la page A4 */
    height: auto; /* Hauteur automatique pour s'adapter au contenu */
    margin: 20px auto; /* Marge de 20px de chaque côté */
background-color: #f5f5f5;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* Ombre légère */
    position: relative; /* Position relative pour positionner le contenu */
    page-break-after: auto; /* Force un saut de page après chaque page */
    border-radius: 5px;
}
/* Ajustez les marges intérieures si nécessaire */
.page-content {
    padding: 50px;
}

/* Ajoutez du contenu pour les deux pages */
#page1 .page-content::before {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
}

#page2 .page-content::before {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
}

        /* Style pour le bouton fixe */
        .back-to-index {
            position: fixed;
            top: 30px;
            right: 30px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            color: #f030a0;
            font-family: 'chantier_regular';
            font-weight: normal;
            font-size: 60px;
            z-index: 10000;
        }

        .imgphone{
          width: 20vw;
          border-radius:5px;
        }

/* Vos styles CSS précédents ici */

@media only screen and (max-width: 1100px) {
    .mosaic {
        justify-content: center;
        max-width: 400px;
        margin: 0 auto;
    }

    .square {
        width: calc(100% - 60px);
        margin: 30px auto;
        height: 0;
        padding-bottom: calc(100% - 60px);
    }

    .dropdown-menu {
        position: absolute;
        width: calc(100% - 20px);
        top: 100%;
        left: 0;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        display: none;
        box-shadow: 0px 10px 10px 0px rgba(150, 150, 150, .4);
        z-index: 800;
    }

    .footer-button {
        left: 65%;
    }

    footer {
        background: linear-gradient(rgba(255, 0, 0, 0) 0% 10%, #db2121 40% 100%);
    }

    .dropdown-menu-footer {
        width: 80vw;
        padding-bottom: 100px;
    }

    .page {
       width: calc(100% - 40px); /* Largeur totale moins 40px de marges */
       max-width: calc(100% - 40px); /* Largeur maximale égale à la largeur de l'écran moins les marges */
       height: auto; /* Hauteur automatique pour s'adapter au contenu */
       margin: 20px; /* Marge de 20px de chaque côté */
       box-shadow: none; /* Supprime l'ombre pour les petites tailles d'écran */
       page-break-after: auto; /* Pas de saut de page automatique */
   }

   .page-content {
       padding: 20px; /* Espacement intérieur réduit */
   }

   /* Ajustez le style du contenu pour les pages mobiles */
   .page-content::before {
       font-size: 18px; /* Taille de police réduite */
   }
   .imgphone{
     width: 50vw;
   }
}