/* ETML
Auteur      : William Lonfat
Version     : 2.1
Date        : 25.03.2025
Description : Page CSS pour le style de vente de fraises avec description. */

html {
    scroll-behavior: smooth;
}

body {
    background-color: white;

}

h1 {
    color : black;
    font-size: 17px;
    font-family: cursive;
}

h2 {
    color : rgb(177, 16, 16);
    font-size: 35px;
    margin: 20px;
}

h3 {
    color : rgb(177, 16, 16);
    font-size: 28px;
    margin: 20px;
}

h4 {
    color:black;
    text-shadow: none;
    font-size: 60px;
    text-decoration: underline;
    text-align: center;
}

p {
    line-height: 40px;
    font-size: 19px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 20px;
}

.topnav, a , .footer, a, .classeCourante {
    background-color: rgb(221, 19, 19);
    align-items: center;
    text-align: center;
    font-size: 20px;
    color: white;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 98,5%;
    height: 50px;
    padding: 15px;
    display: flex;
    transition-duration: 300ms;
    justify-content: space-around;
}

.classeCourante, .topnav :hover {
    background-color: rgb(177, 16, 16);
}

.containerTitle {
    align-items: center;
    position:relative;
    text-align: center;
    color:white
}

.titrePrincipal {
    position: absolute;
    top: 25%;
    left: 16%;
    font-size: 64px;
}

.titrePrincipal h1 , .titrePrincipal h2 {
    color:white;
    text-align: center;
    font-family: cursive;
    font-size: 60px;
    text-shadow: black 6px 7px 2px;
}

.titrePrincipal h2 {
    text-shadow: black 1px 7px 2px;
    font-size: 30px;
}

.lesVarietes {
    background-color: rgb(221, 19, 19);;
    border: 5px solid rgb(221, 19, 19);
    border-radius: 20px;
    width: 96%;
    padding: 22px;
    margin: 10px;
}

.lesVarietes h2, .lesVarietes h3 {
    border: 0px;
    color: white;
    font-family: cursive;
    text-align: center;
    font-size: 40px;
    text-shadow: black 1px 7px 2px;
}

.lesVarietes h3 {
    font-size: 27px;
    text-shadow: none;
}

.alignementBox {
    align-items: center;
    display: flex;
    text-align: center;
    width: 100%;
}

.boxTypesFraises {
    background-color: rgb(177, 16, 16);
    color:white;
    font-size: 25px;
    border-radius: 20px;
    width: 96%;
    padding: 35px;
    margin: 10px;
    display: flex;
}

.boxTypesFraises h3 {
    font-size: 22px;
    color: white;
    text-decoration: none;
}

.tailleFraises {
    background-color: white;
    border: 5px solid rgb(177, 16, 16);
    color:black;
    font-size: 25px;
    border-radius: 20px;
    width: 96%;
    padding: 22px;
    margin: 10px;
    display: block;
}

.taillesFraisesH2 , .tableauVarietesH1 {
    color:black;
    text-align: center;
    font-size: 30px;
    text-shadow: none;
}

.tableauVarietesH1 {
    font-size: 33px;
}

.boxTaillesFraises {
    background-color: white;
    border: 3px solid lightgray;
    color:black;
    font-size: 25px;
    border-radius: 20px;
    width: 100%;
    height: 320px;
    padding: 22px;
    margin: 10px;
    display: block
}

.boxTaillesFraises p {
    background-color:lightcoral;
    border-radius: 20px;
    padding: 8px;
}

.tableauVarietes {
    background-color: lightgray;
    border: 5px solid lightgray;
    border-radius: 20px;
    width: 99%;
    padding: 22px;
    margin: 10px;
    text-align: left;
    font-size: 20px;
}

.buttonsend {
    background-color: rgb(221, 19, 19);
    border: 2px solid rgb(221, 19, 19);
    border-radius: 20px;
    color:white;
    padding: 10px 20px;
    transition-duration: 300ms;
    cursor: pointer;
}

.buttonsend:hover {
    background-color: white;
    color:black;
}