body {
    margin: 0;
    padding: 0;
    background-color:#273478;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.paper {
    background-color:#C2D3FF;
    background-size:cover;
    width: 90%; 
    height:200px;
    max-width: 760px;
    min-height: 90vh;
    overflow-y: auto;
    padding: 30px 20px; 
    box-sizing: border-box;
    border: 2px solid #000;
    position: relative;
    margin: 10px;    
}

.bigpicture  {
    width:95%;
    height:95%;
}

.titrefondbleu   {
    color:#DBDFFF;
    background: #273478;
    padding:2px 2px;
    margin:2px;
    text-decoration:bold;
}


.selec {
    background: #273478;
    color: #C2D3FF;
}

.blocaccueil {
    text-align: center;
    margin: 40% 0% 0% 0%;

}

.blocaccueil img {
    width: 200px;
    border: 0px solid #000;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-family: 'Courier';
    color:#273478;
    text-decoration: none;
    letter-spacing:1px;
    font-size: 25px; 
    margin: 15px;
    text-align: center;
}

.tableaumenu {
    border:1px dashed #273478;
    margin:auto;
    padding:0% 0% 0% 0%;
    table-layout:fixed;
    width:100%;
}

.cellulemenu {
    border:0px solid #000000;
    color:#273478;
    transition: color 0s, background 0s;

}

.cellulemenu:hover {
    border:0px solid #000000;
    background: #273478;
    color:#C2D3FF;
}


nav {
    text-align: center;
    margin-bottom: 40px;
    letter-spacing:0.5px;
}

nav a {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px; 
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding: 10px 0px;
    border: 2px solid transparent;
    text-transform:lowercase;
}


nav a:hover {
    border: 0px solid #000;
    color: inherit; 
}

.selec a  {
    color:#C2D3FF;
}

.imageprojet  {
    padding:20% 0% 0% 0%;
    text-align:center
}

.imageprojet  img {
    max-height:50vh;
    max-width:70vw;
}


.groupeboutonsprojet {
    text-align: left;
    margin: 15% 0% 0% 0%;
    padding: 7% 0% 0% 10%;
}

.boutonprojet {
    font-size: 12px; 
    padding: 10px 7px;
    font-family: 'Roboto Mono', monospace;
    text-align: left;
    text-decoration: none;
    color: #273478;
    margin: 7px 0px;
    display: inline-block;
    border: 1px dashed #273478;

}

.boutonprojet:hover {
}

.projet {
    padding: 5% 10% 5 10%;
    font-family: 'Roboto Mono', monospace;
    font-size:11px;
    color:#273478;
    line-height:135%;
    text-align: left;
}

.projet .resume  {
    font-style:italic;
    font-size:90%;
    line-height:120%;
    text-indent:3em;
    padding:3.5% 0% 0% 7%;
}

.projet .equipe  {
    margin: 3vh 0%;
    font-family: 'Roboto Mono', monospace;
    font-size:11px;
    color:#273478;
    line-height:120%;
    padding:3.5% 0% 0% 0%;

}

.projet2 {
    font-family: 'Roboto Mono', monospace;
    font-size:12px;
    color:#273478;
    line-height:135%;
    background-color:#C2D3FF;
    height:80%;
    padding: 1vh 10% 0vh 0%;
    margin-top:20px

}

.projet2 .content {
    margin:5% 0% 0% 5%;
    font-size:90%;
    text-align: left;
}

.content {
    margin: 40% 0%;
    text-align: center;
}

.miniatures-container {
  display: flex;
  justify-content: center;
  gap: 10px; /* Espacement entre les miniatures */
  padding: 10px;
  flex-wrap: wrap; /* Pour s'adapter aux petits écrans */
}

.miniature {
  width: 50px;
  height: 50px;
  overflow: hidden; /* Cache le débordement */
  border-radius: 4px; /* Coins légèrement arrondis */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
  transition: all 0.3s ease; /* Animation fluide */
}

.miniature img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit la miniature sans déformation */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.miniature:hover {
  transform: scale(1.05); /* Légèrement agrandi */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
}

.miniature:hover img {
  opacity: 0.9; /* Légère transparence */
  transform: scale(1.1); /* Zoom léger */
}


/* Media Query pour écrans moyens et larges (tablettes/desktop) */
@media (min-width: 768px) {
    .paper {
        width: 90%;
        padding: 40px 40px;
        min-height: 85vh;
        min-width: 110vh;

    }
    
    h1 {
    font-family: 'Courier New';
    color:#273478;
    text-decoration: none;
    letter-spacing:1px;
    font-size: 30px; 
    margin: 10;
    text-align: center;
    font-weight:bold;
    }

    .blocaccueil {
        margin: 5vh 0% 0% 0%;
    }

    .blocaccueil img {
        width: 300px;
    }

    .blocaccueil h1 {
        font-size: 20px;
        letter-spacing:0px;
        font-weight:bold;
    }

    nav {
        margin-bottom: 5px;
        
    }

    nav a {
        font-size: 15px;
        margin: 0 0px;
        padding: 5% ;
        font-weight:normal;
        text-transform:lowercase;
    }

    .groupeboutonsprojet {
        text-align: left;
        margin: 0% 0% 0% 20%;
        padding: 8% 0% 0% 8%;

    }
    
    .boutonprojet {
        font-size: 15px; 
        padding: 10px 10px;
        margin: 5px 0px;
        border: 1px dashed #273478;

    }

    .boutonprojet:hover {
        border: 1px dashed #273478;
        background-color:#273478;
        color:#DBDFFF;
        background-image:url('img/fondlabel.jpg')
}


    a[data-bg="fondlabelmythes"]:hover {
    background-image: url('img/fondlabelmythes.jpg');
    }

    a[data-bg="fondlabelsloche"]:hover {
    background-image: url('img/fondlabelsloche.jpg');
    }
    
    a[data-bg="fondlabelquete"]:hover {
    background-image: url('img/fondlabelquete.jpg');
    }
    
    a[data-bg="fondlabelaffut"]:hover {
    background-image: url('img/fondlabelaffut.jpg');
    }
    
    a[data-bg="fondlabelsotm"]:hover {
    background-image: url('img/fondlabelsotm.jpg');
    }

    .tableaumenu {
    width:70%;
    }

    .projet {
    font-size: 13px;
    padding: 6vh 10% 0vh 5%;
    letter-spacing:0.5px;
    color:#273478;
    }

    .projet .resume  {
    font-style:italic;
    font-size:80%;
    line-height:120%;
    text-indent:3em;
    padding:0% 0% 0% 7%;
    }

    .projet .equipe  {
    padding:0% 0% 0% 0%;
    font-family: 'Roboto Mono', monospace;
    font-size:11px;
    color:#273478;
    line-height:120%;
    }
    
    .projet2 {
    font-family: 'Roboto Mono', monospace;
    font-size:14px;
    color:#273478;
    line-height:135%;
    background-color:#C2D3FF;
    height:80%;
    padding: 5vh 10% 0vh 0%;
    margin-top:30px
    text-align: left;
    }

    .projet2 .content {
    margin:3% 10% 0% 10%;
    font-size:85%;
    text-align: left;

    }
    
    .imageprojet  {
    padding:5% 0% 0% 0%;
    text-align:center
    }
    
    .imageprojet  img {
    max-height:50vh;
    }
    
    
    .content {
    margin: 20% 0%;
    text-align: center;
    }
    
    .miniatures-container {
    gap: 20px; /* Espacement entre les miniatures */
    }
    
    .miniature {
    width: 100px;
    height: 100px;
    }


}