@font-face {
    font-family: 'BodoniModa';
    src: url('fonts/Bodoni_Moda/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'BodoniModa', sans-serif;
    margin: 0;
    padding: 0;
}

/*Charte graphique*/
:root {
    --sable: rgb(254, 225, 181);
    --noir: rgb(51, 50, 51);
    --rouge: rgb(206, 83, 52);
    --vert: rgb(132, 115, 42);
    --bleu: rgb(181, 197, 228);

    --header: var(--vert);
    --main: var(--sable);
    --puce: var(--rouge);
}

h1 {
    color: var(--noir);
}

h2 {
    text-align: center;
    margin: 0;
    padding: 10px 0 50px;
    font-size: 23px;
}

h2::before {
    content: "";
    display: inline-block;
    width: 50px;   /* largeur de la puce */
    height: 50px;  /* hauteur de la puce */
    margin-right: 0px;
    vertical-align: middle;
    background-image: url('charte/LassaisonIllus_feuille.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  


.band {
    margin-bottom: 30px;
}

header {
    /* background-color: rgb(95, 47, 2); */
    background: var(--header);
    color: #ffffff;
    padding: 10px 20px;
    height: fit-content;
    /* min-width: 800px; */
}
.header {
    display: flex;
    justify-content: space-between;
}

footer {
    background-color: var(--header); 
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.bleu {
    color: var(--bleu);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Permet de passer en colonne si l'espace manque */
    justify-content: center;
    gap: 10px; /* Ajoute un petit espacement entre les éléments */
}

nav ul li {
    display: inline;
    /* padding: 10px; */
}

nav ul li a {
    color: var(--sable);
    text-decoration: none;
    /* color: var(--noir); */
    padding: 5px;
    /* margin: 15px; */
}


nav ul li a.selected {
    background-color: var(--puce);
    color: var(--sable);
    padding: 10px;
    /*padding: 10px 10px; /* Ajoutez un espace supplémentaire autour du texte */
    border: 1px solid #000000; /* Ajoutez une bordure autour du lien */
    border-radius: 5px; /* Ajoutez une bordure arrondie */
    font-weight: bold;
}

.mainBody {
    background: var(--main);
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    /* align-items: center; */
}

.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    align-items: end;
}


.center {
    width: 100%;
    max-width: 100vw;
}

.block {
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: center;
}

.fournisseur {
    display: grid;
    grid-template-rows: 1fr auto auto auto;
    justify-items: center;
    align-items: center;
    overflow: auto;
    width: fit-content;
    padding: 20px;
    margin: 0 25px;
    min-height: 300px; /* adapte selon ton design */
}

.logo_prod {
    display: flex;
    align-items: center;
    justify-content: center;
}


/*Contact*/

.contact-info p {
    font-size: 18px;
    margin: 10px 0;
    text-align: center;
}

.contact-info a {
    /* color: var(--rouge); */
    text-decoration: none;
    text-align: center;
}

.contact-info a.bleu {
    color: var(--bleu);
}

.contact-info a.rouge {
    color: var(--rouge);
}

.contact-info a:hover {
    text-decoration: underline;
}

.social-links {
    margin-top: 20px;
    text-align: center;
}

.social-links a {
    margin: 0 10px;
    display: inline-block;
    font-size: 20px;
}

.photo-block {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 15px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.photo-block img {
    max-width: 100%;
    height: auto;
}

.desc {
    margin-top: 10px;
    white-space: pre-wrap;
}

.logo {
    height: 150px;
    object-fit: contain;
}

table {
    /* width: fit-content; */
    border-collapse: collapse;
    overflow: auto;
    margin: 1px;
    max-width: 100%;
    max-height: 100%;
}
td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
    position: relative;
}

/***********/
/* BOUTONS */
/***********/

/* Style pour un lien dans une boîte verte avec texte rouge et gras */
.noel {
    display: inline-block;      /* Pour que la boîte englobe le texte */
    background-color: #4CAF50;  /* Vert */
    color: red;                 /* Texte rouge */
    font-weight: bold;           /* Gras */
    padding: 10px 20px;         /* Espacement interne */
    border-radius: 8px;         /* Coins arrondis */
    text-decoration: none;       /* Supprime le soulignement du lien */
    transition: transform 0.2s;  /* Petite animation au survol */
}

.noel:hover {
    transform: scale(1.05);     /* Agrandit légèrement au survol */
    cursor: pointer;            /* Curseur main */
}

/* Style pour un lien dans une boîte verte avec texte rouge et gras */
.stvalentin {
    display: inline-block;      /* Pour que la boîte englobe le texte */
    background-color: #B7C5E7;  /* Vert */
    color: black;                 /* Texte rouge */
    font-weight: bold;           /* Gras */
    padding: 10px 20px;         /* Espacement interne */
    border-radius: 8px;         /* Coins arrondis */
    text-decoration: none;       /* Supprime le soulignement du lien */
    transition: transform 0.2s;  /* Petite animation au survol */
}

.stvalentin:hover {
    transform: scale(1.05);     /* Agrandit légèrement au survol */
    background-color: #D39FC3;  /* Vert */
    cursor: pointer;            /* Curseur main */
}


/* Style pour un lien dans une boîte verte avec texte rouge et gras */
.paques {
    display: inline-block;      /* Pour que la boîte englobe le texte */
    background-color: var(--noir);  /* Vert */
    color: white;                 /* Texte rouge */
    font-weight: bold;           /* Gras */
    padding: 10px 20px;         /* Espacement interne */
    border-radius: 8px;         /* Coins arrondis */
    text-decoration: none;       /* Supprime le soulignement du lien */
    transition: transform 0.2s;  /* Petite animation au survol */
}

.paques:hover {
    transform: scale(1.05);     /* Agrandit légèrement au survol */
    cursor: pointer;            /* Curseur main */
}