/* CSS Document */

        html{
            margin: 0;
            padding: 0;
            overflow-x: 0;
        }
        
        body{
            margin: 0;
            padding: 0;
            display: flex;
            width: 100vw;
            justify-content: center;
            align-content: center;
            align-items: center;
            flex-direction: column;
            background: hsla(0,0%,0%,1.00);
            color: white;
            border: 0px solid black;
            
        }
        
        a {
  color: inherit;        /* Hérite de la couleur du parent */
  text-decoration: none; /* Supprime le soulignement */
}
        
        #entete{
            display: flex;
        position: relative;
        max-width: 1200px;
        width: 95%;
        height: auto;
        max-height: 200px;
            flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-between;
            align-items: flex-end;
            border: 0px blue solid;
            margin-bottom: 20px;
            margin-top: 10px;
        }
    
    
        

    
        #menu{
            position: relative;
            width: 90%;
            max-width: 400px;
            border: 0px solid darkblue;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            font-size: 14px;
            text-transform:uppercase;
            font-weight: bold;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            
            margin-top: 10px;
            
            
        }
        
        .boitemenu{
            position: relative;
            font-size: 12px;
            width: 40%;
            max-width: 150px;
            border: 1px white solid;
            padding: 5px;
            margin: 3px;
            cursor: pointer;
        }
        
        .boitemenu:hover{
            border: 1px white solid;
            background: white;
            color: black;
            transition: 0.3s;
            
            
        }

.dateboite{
    position: absolute; top: 10px; left:10px; font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
}
        
        #corpsmuscle{
            position: relative;
            width: 95%;
            max-width: 1200px;
            height: auto;
            min-height: 500px;
            border: 0px solid red;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            
            margin-bottom: 30px;
            
        }
        

        
        
        .boitefolio{
            position: relative;
            width: 75%;
            max-width: 300px;
            aspect-ratio: 2 / 3;
            /*border:6px solid white;*/
            margin: 20px;
            z-index: 5;
            
            overflow: hidden;
            
            display: flex;
            align-items:center;
            
            cursor: pointer;
            opacity: 0;
         animation: fadeIn 2s ease forwards;
            animation-delay: 0.1s;
            
        }
        

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
        
        .boitefolio::after{
            content: "";                 /* OBLIGATOIRE */
            position: absolute;          /* OBLIGATOIRE */
            inset: 0; 
            background: linear-gradient(to bottom, hsla(0,0%,78%,0.71), hsla(0,0%,53%,0.80));
             opacity: 0;
          transition: opacity 0.4s ease;
        }
        
        .boitefolio:hover::after,.boitefolio:active::after{
            opacity: 1;
            cursor: pointer;
        }
        
.nouveaute{
    position: absolute; width: 180px; height: 30px; background-color: red; color: white;z-index: 40; text-align: center; transform: rotate(-35deg); top:20px; left: -38px; line-height: 30px; font-weight: bolder; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'; text-transform: uppercase;
}
        
        
        .imageboitefolio{
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            box-sizing: border-box;
            z-index: 0;
            
        }
        
        .ecritureboitefolio{
            position: relative;
            left: 0;
            right: 0;
            text-align: center;
            width: 100%;
            height: auto;
            z-index: 11;
            font-size: 30px;
            font-weight: bold;
            font-variant-caps: small-caps;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            color: white;
            
            border: 0px solid white;
            
            text-shadow: 0px 0px 4px black;
            
        }


/* photos du portfolio */

        #corpsmusclephotos{
            position: relative;
            width: 95%;
            max-width: 1200px;
            height: auto;
            min-height: 500px;
            border: 0px solid red;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            
            margin-bottom: 30px;
            align-items: center;  flex-flow:wrap; flex-direction: column;
            
        }


    
        .boitephoto{
     width: 98%;
    max-width: 600px;
    height: 100%;
    margin: 20px auto;
        

    border: 11px solid hsla(0,0%,94%,1.00);
    box-sizing: border-box; /* 🔑 INDISPENSABLE */

    opacity: 0;
    animation: apparition 2s ease forwards;
    animation-delay: 0.1s;
            
        }
        

    @keyframes apparition {
      to {
        opacity: 1;
      }
    }
        
        .boitephoto:hover,.boitephotobrico:hover{
            transform: scale(1.05);
            transition: all 3s ease;
            z-index: 20;
            
        }
        
    .photo{
     width: 100%;       /* s’adapte à la largeur */
    height: auto;      /* garde les proportions */
    display: block;    /* évite les espaces */
    
        }

       .boitephotobrico{
     width: 98%;
    max-width: 600px;
    height: 100%;
    margin: 20px auto;
        

    border: 0px solid white;
    box-sizing: border-box; /* 🔑 INDISPENSABLE */

    opacity: 0;
    animation: apparition 2s ease forwards;
    animation-delay: 0.1s;
            
        }