body {
    margin: 1em auto;
    background-image: url(../medias/Artboard.webp);
}

#container {
    font-family: "Kanit", sans-serif; /* Police moderne et lisible */
    font-weight: 300; /* Poids léger pour une meilleure lisibilité */
    font-style: normal;
    
    width: 1200px;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent pour un effet vitré */
    border-radius: 25px;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 
}

#container h1, h2, h3, h4, h5, h6 {
    font-family: "Oswald", sans-serif; /* Police pour les titres */
    font-weight: 600; /* Poids semi-gras pour insisté sur l'importance du titre */
    font-style: normal;
}

figure.logo {
    text-align: center;
}

figure.logo img {
    transition-duration: 300ms; 
}

.logo img .tp-transform {
  transition-property: transform;
}

.logo img:is(:hover, :focus) {
  transform: scale(1.05); /*Le logo s'agrandit au survol*/
}


header img {
    height: 300px;
    width: 100%;
    border-radius: 25px;
}

main {
    padding : 0 2em;
}

main h1, h2 {
    text-align: center;
}

#prochainement {

    background-image: url(../medias/bague1.gif); /*Une image de fond animée pour faire une transition entre les arcticle et les informations*/
    background-size: cover;
    height: 600px;
    width: 100%;
    border-radius: 15px;
    margin-bottom: 2em;
}

#prochainement h1 {
    color: white;
    padding-top: 270px;
    font-size: 5em;
    mix-blend-mode: difference; /*Pour que le texte ressorte bien sur l'image de fond, fait un effet de couleur inversée*/
}

#bijoux {
    display: flex; 
    flex-wrap: wrap;
    gap: 2em;
    text-align: left;
    margin: 4em 0;
}

#bijoux div {
    display: block;
    width: 45%;
}

#bijoux div figure {
    width: 100%;
    border-radius: 15px;
    padding: 0 ;
    margin: 0 ;
}

#bijoux div figure img {
    border-radius: 15px;
}

#connexionform form {
    margin: auto;
    text-align: center;
    width: 25%;

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.51);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(232, 190, 51, 0.619);
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
}

.connexion {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.form {
    display: block;
    margin: auto;
    padding: 0.5em 2em;
}
form .connexion div.form, label {
    display: block;
    margin: 0.3em;
    text-align: left;
}

#connexionform form input {
    padding: 0.5em;
    border-radius: 10px;
    border: 1px solid #ccc;
}   

#connexionform form button {
    margin: 0.5em;
    width: 100px;
    height: 50px;
    padding: 0.5em 2em;
    border-radius: 10px;
    border: none;
    background-color: #e8be33;
    color: white;
    font-weight: bold;
    cursor: pointer;
    text-align: center  ;
}
#connexionform button:hover {
    background-color: #d4a91e;
    box-shadow: 0 4px 30px rgba(232, 190, 51, 0.619);
}

.Inscription a {
    text-decoration: none;
    color: #e8be33;
    font-weight: bold;
}

.Inscription a:hover {
    color: #d4a91e;
}

img.Illustrationtissage {
    float: left;
    width: 400px;
    height: auto;
    margin-right: 1em;
    margin-bottom: 1em;
    border-radius: 15px;
}