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

html { background-attachment: fixed;
        }
        
@font-face {
    font-family: "Pendragon-Regular";
    src: url('../fonts/Pendragon-Regular.woff2') format('woff2'),
         url('../fonts/Pendragon-Regular.woff') format('woff');
    font-weight: normal!important;
    font-style: normal;
}

@font-face {
    font-family: "Pendragon-Italic";
    src: url('../fonts/Pendragon-Italic.woff2') format('woff2'),
         url('../fonts/Pendragon-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
        
        body {
            background-color: #FFFFFF!important;
            overflow: hidden!important;
        }

footer {
    position: fixed;
    bottom: 0; 
    width: 100%;

}


       body::-webkit-scrollbar {
    width: 10px; /* Modifiez cette valeur pour ajuster la largeur de la scrollbar */
}

body::-webkit-scrollbar-track {
    background: transparent; /* Couleur d'arrière-plan de la piste */
}

body::-webkit-scrollbar-thumb {
    background: transparent; /* Couleur d'arrière-plan du pouce */
}

body {
    scrollbar-width: thin; /* ou 'none' pour masquer complètement */
    scrollbar-color: transparent transparent; /* couleur du pouce et de la piste */
}

        
        li {
            list-style: none;
        }
        
  h1 {
      width: 410px;
            color: rgba(148, 141, 138, 0.85);
            font-family: "Pendragon-Regular"!important;
            font-style: normal!important;
          line-height: 1.3;
            font-size: 24px;


        }

h2 {
    color: rgba(85, 85, 85, 0.99);
    font-family: "Pendragon-Regular"!important;
    font-style: normal;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.2;

}
        
p {
    font-family: "Pendragon-Regular";
    font-style: normal;
    font-size: 24px;
    line-height: 1.3;
    color: rgba(148, 141, 138, 0.85);
}

a {
    color: rgba(148, 141, 138, 0.85);
    text-decoration: none;
}
        
        .header {
            grid-template-columns: 1fr 1fr;
            align-items: baseline;
            text-align: center;
        }
        
        .info {
            position: -webkit-sticky; /* Pour le support Safari */
            position: sticky;
            width: 100%;
            height: 83px;
            left: 10px;
            margin-top: 3%;
            color: rgba(148, 141, 138, 0.85);
            font-family: "Pendragon-Regular";
            font-style: normal;
            font-size: 20px;
            line-height: 25px;
            margin-left: 30%;
            text-transform: uppercase;
        }
        
 .box {
            padding: 2vw 5vw 1vw 5vw;
        }

.overlay {
    position: relative;
    height: 100vh; /* Utilise toute la hauteur de la fenêtre de visualisation */
}

.container {
  position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
   
}
        
        .block-1-p {
       text-align: center;
             list-style-type: none;
    padding: 0;
    font-family: "Pendragon-Italic";
    font-size: 24px;
    line-height: 1.8;
    color: rgba(148, 141, 138, 0.85);
             list-style: none; 
        }



.block-1-p a:hover {
    color: rgba(85, 85, 85, 0.99); 
    text-decoration: none;
    transition: color 0s ease;  /* Ajoute une transition douce lors du changement de couleur */
}
        
        .bottom {
            grid-template-columns: 1fr 1fr;
            width: 100%;
            text-align: center;
            position: fixed;
    bottom: 1vw;
  
        }
        
        nav.bottom ul li,
        nav.filtering ul li {
            display: inline-block;
        }
        
        nav.filtering ul {
            text-align: center;
        }
        
        nav.bottom ul li:hover a,
        nav.filtering ul li:hover a,
        nav.bottom ul li.active,
        nav.filtering ul li.active {
            transition: 0s;
            color: rgba(85, 85, 85, 0.99)!important;
        }
.chapeau {
    width: 100%;
    font-family: "Pendragon-Regular"!important;
    font-style: normal;
   
}
        
a.menu {
   text-decoration: none;
    padding: 1vw;
    width: 100%;
    position: relative;
    margin-bottom: 2%;
font-family: "Pendragon-Italic";
    font-style: normal;
    font-size: 7vw;
    text-align: center;
    color: rgba(148, 141, 138, 0.85)!important;
    
}
        
        a:hover {
            color: rgba(148, 141, 138, 0.85);
            
        }
/* Ajoutez ces règles CSS à la fin de votre fichier CSS actuel */

/* À partir de 1346 pixels de large, réduisez la taille de la police */



        

/* mobile */
        
        @media only screen and (max-width: 1024px) {
            .hide-mobile {
                display: none !important;
            }
            
            
            .chapeau {
    width: 100%;
                margin-top: 21.5px!important;
}
            nav.header ul li,
            nav.filtering ul li {
                display: inline-block;
            }
            nav.filtering ul {
                text-align: center;
            }
            nav.header ul li:hover a,
            nav.filtering ul li:hover a,
            nav.header ul li.active,
            nav.filtering ul li.active {
                transition: 0s;
                color: rgba(85, 85, 85, 0.99);
            }
            .header {
        padding-top: 10px;
        height: 50px;
        }
            nav.header ul li {
                display: inline-block;
            }
       
            ul {
                padding: 0;
            }
            
            .bottom {
                width: 100%;
    text-align: center;
    position: fixed;  
    bottom: 0;}
            
            a.menu {
          margin-top: 10px;
        font-size: 16px!important;
        padding: 10px;
        padding-top: 1px;
        font-style: normal;
    }
             .menu {
        margin-top: 1%;
        font-size: 8px;
    }
            h1 {
                font-size: 20px;
                text-align: center;
                width: auto;
                  line-height: 1.3;
            }
            p {
                text-align: center;
                font-size: 12px;
            }
            .block-1-p {
                font-size: 16px;
                line-height:1.8;
        
            }
                        .container {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 25%;
    left: 50%;
                
 }
            
              .footer {
                position: fixed;
              bottom: 20px;
        
            }

            .info-bottom {
                position: relative;
                font-family: "Pendragon-Regular";
                font-style: normal;
                font-size: 13px;
                width:100%;
                padding: 20px;
            
            }
            .hide-small {
                display: none;
            }
            
    .info {
        text-align: center;
        max-width: 100%;
        left: auto;
        top: auto;
        position: relative;
    }
            
                .box {
    padding: 0px;
    
}
        }
        /* tablet */
        
        @media only screen and (min-width: 768px) and (max-width: 1024px)
        {
            /* write here css for tablet */
            .hide-mobile {
                display: none !important;
            }
            .info-bottom {
                position: relative;
                font-family: "Pendragon-Regular";
                font-style: normal;
                font-size: 18px;
                padding: 20px;
                
            }
                 body {
            background-color: #FFFFFF!important;
        }
            
            .hide-mobile {
                display: none !important;
            }
            .chapeau {
    width: 100%;
                margin-top: 25px;
}
            nav.header ul li,
            nav.filtering ul li {
                display: inline-block;
            }
            nav.filtering ul {
                text-align: center;
            }
            nav.header ul li:hover a,
            nav.filtering ul li:hover a,
            nav.header ul li.active,
            nav.filtering ul li.active {
                transition: 0s;
                color: rgba(85, 85, 85, 0.99);
            }
            .header {
                text-align: center;
                height: 50px;

                
            }
            nav.header ul li {
                display: inline-block;
            }
                
                h1 {
    font-size: 20px;    
}
            
            .container {
    display: flex;
    justify-content: center;
    align-items: center;
    }
      
    


        }
        /* desktop */
        
        @media only screen and (min-width: 1025px) {
            .info-bottom {
                display: none;
            }
            .hide-desktop {
                display: none;
            }
        }
        
        .typeface {
            padding: 60px 60px;
            clear: both;
            overflow: hidden;
            line-height: 1.6em;
            border-bottom: 1px solid rgba(85, 85, 85, 0.99);
        }
        
        .typeface .meta li.fontname {
            margin-bottom: 10px;
        }


        
        .typeface .meta {
            float: left;
            width: 23.5%;
            display: block;
            line-height: 25px;
            padding-right: 60px;
        }
        
        .typeface .fontlist {
            float: left;
            width: 76%;
        }
        
        a {
            text-decoration: none;
             color: rgba(148, 141, 138, 0.85);
        }
@media only screen and (max-width: 1386px) {
    nav.bottom ul li a.menu {
        padding: 18px;
        width: 100%;
    }
    
    @media (prefers-color-scheme: dark) {
   body {
           background-color: #ffffff;
        }
}

}