/* ===== STYLES GLOBAUX ===== */
body {
    margin: 0;
    padding-top: 120px; /* Espace pour le header fixe */
    background-color: #FFEEDB; /* Couleur de fond douce */
}

/* ===== EN-TÊTE (HEADER) ===== */
#header { 
    background: #97D109;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 100; /* Assure que le header reste au-dessus des autres éléments */
}

#elemheader {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: center;
}

#elemheader li {
    margin: 0;
    padding: 0;
}

#titre { 
    font-family: 'Cherry Bomb One', sans-serif;
    font-weight: 400;
    font-size: 45px;
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
}

#header-center { 
    text-align: center;
    flex: 1;
}

.header { /* Noir pour les liens de l'en-tête */ 
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.header:hover { /* Jaune foncé au survol */
    background-color: #FEC851; 
    border-radius: 17.5px;
    padding: 5px;
}

#visited { /* Violet pour le lien actif */
    color: #920DD7; 
    text-decoration: none;
}

.logo {
    height: 100px;
}

#headertitre {
    text-decoration: none;
    color: #000;
}

/* ===== GRILLES DE PRODUITS ===== */
.grillebox {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px;
    justify-content: center;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
}

.box { 
    background: #A6653F; 
    padding: 15px;
    border-radius: 30px;
    font-family: 'Raleway', sans-serif;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    width: auto;
    align-items: center;
}

#compotepomme {
    width: 250px;
}

#jusdepoire, #jusabricot, #jusdepomme {
    width: 50%;
    height: 80%;
}

.grillebox2 { 
    display: grid;
    grid-template-columns: repeat(3, 320px);
    gap: 40px;
    padding: 40px;
    justify-content: center;
    align-items: stretch;
}

.box2 { 
    background: #A6653F;
    padding: 25px;
    border-radius: 30px;
    font-family: 'Raleway', sans-serif;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
}

.imagebox { 
    width: 100%;
    border-radius: 20px;
}

.box p { 
    font-size: 16px;
    color: #ffffff;
}

.box li {
    font-size: 30px;
    color: #ffffff;
}

/* ===== BOUTONS ===== */
.bouton { /* Noir pour les boutons principaux */
    display: inline-block;
    background: black;
    color: white;
    padding: 10px 20px;
    border-radius: 40px;
    margin-top: 10px;
    text-decoration: none;
    text-align: left;
}

.bouton:hover { /* Jaune clair au survol */
    background: #FEC851;
    color: black;
    text-decoration: underline;
    font-style: italic;
}

.bouton2 { /* Vert pour les boutons de produits */
    display: inline-block;
    background: #47C75A; 
    color: black;
    padding: 10px 20px;
    border-radius: 30px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}

.bouton2:hover {  /* Vert clair au survol */
    background: #97D109;
    color: black;
    text-decoration: underline;
    font-style: italic;
}

/* ===== STRUCTURE DES BOX ===== */
.ensemblebox {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.titrebox {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    margin-left: 10px;
}

/* ===== LISTES AVEC ICÔNES ===== */
.listemoji {
    margin: 0 auto;
    padding: 0;
    width: fit-content;
}

.listemoji li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
    font-size: 45px;
}

.listemoji li::before {
    content: "";
    width: 7px;
    height: 7px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    position: absolute;
    left: 0;
}

.listemoji img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* ===== IMAGES DES PRODUITS ===== */
.produitsimages {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.produitcontour {
    background: #D9D9D9;
    padding: 18px 22px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    transform: scale(0.9);
}

.produitcontourcentre {
    background: #D9D9D9;
    transform: scale(1.1);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin: 0 -40px;
}

.imageproduit {
    width: 90px;
    height: auto;
}

/* ===== PAGE DE PRODUIT ===== */
.ensemblepage {
    width: 1100px;
    margin: 40px auto;
    background-color: #a6653f;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    gap: 30px;
}

.partiegauche {
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fleche {
    margin-right: 340px;
}

.image img {
    width: 260px;
    height: 550px;
    margin-bottom: 20px;
}

.jus {
    font-family: 'Raleway', sans-serif;
    background-color: #47c75a;
    color: black;
    padding: 10px 25px;
    border-radius: 15px;
    font-size: 21px;
}

.partiedroite {
    width: 650px;
    color: white;
}

.descriptionproduits {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    margin-bottom: 15px;
}

.textedescriptionproduits {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    margin-bottom: 15px;
}

.Format,
.Ingrédients,
.conseildegustation {
    font-family: 'Raleway', sans-serif;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 24px;
}

.Format img,
.Ingrédients img,
.conseildegustation img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

/* ===== PAGE HISTOIRE ===== */
.Texte1 {
    width: 790px;
    border-right: 20px solid #A6653F;
    border-bottom: 20px solid #A6653F;
    background-color: #97D109;
    border-radius: 30px;
    padding-top: 3px;
    padding-left: 20px;
    padding-right: 10px;
    position: absolute;
    right: 40px;
    top: 150px;
    font-size: 40px;
    font-family: 'Raleway', sans-serif;
}

.Texte2 {
    width: 414px;
    border-right: 20px solid #A6653F;
    border-bottom: 20px solid #A6653F;
    background-color: #97D109;
    border-radius: 30px;
    padding-top: 3px;
    padding-left: 20px;
    padding-right: 10px;
    position: absolute;
    left: 65px;
    top: 493px;
    font-size: 45px;
    font-family: 'Raleway', sans-serif;
}

h3 {
    font-size: 45px;
    font-family: 'Cherry Bomb One', sans-serif;
}

.Poire {
    width: 390px;
    height: auto;
    position: absolute;
    top: 150px;
}

.Poire img {
    width: 100%;
}

.ImageVerger {
    position: static;
    top: 0px;
    width: 800px;
    height: auto;
}

.ImageVerger img {
    width: 100%;
}

.Famille {
    position: absolute;
    top: 1100px;
    left: 65px;
    width: 503px;
    height: auto;
    border-radius: 30px;
}

.Famille img {
    width: 85%;
}

.Pomme {
    position: absolute;
    top: 1235px;
    left: 390px;
    width: 292px;
    height: auto;
}

.Pomme img {
    width: 100%;
}

/* ===== CONTACT ET RSE ===== */
.contactcontenue {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.box .contacttexte {
    flex: 1;
    margin: 0;
    font-size: 20px;
    color: #ffffff;
}

.contactimage {
    width: 155px;
    height: auto;
}

.box .lirse {
    font-size: 20px;
}

#rseicon {
    width: 120px;
    height: 120px;
    align-items: center;
    justify-content: center;
}

.centrerimage {
    display: flex;
    justify-content: center;
}

#imagejuridique {
    width: 120px;
    height: auto;
}

#textejuridique {
    font-size: 20px;
    text-align: justify;
}

.boutonrse {
    position: relative;
    display: inline-block;
    margin-top: auto;
}

#abricot2 {
    position: absolute;
    width: 80px;
    height: auto;
    top: -45px;
    right: 190px;
    z-index: 10;
}