@import url('https://fonts.googleapis.com/css2?family=Libertinus+Math&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Libertinus Math";
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* SECTION 1 */
header.header {
    display: flex;
    align-items: center;
    background-color: rgb(192, 190, 190);
}
header.header img {
    max-width: clamp(95Px, 10%, 200px);
    height: 10%;
    padding: 20px;
    background-color: rgb(234, 235, 229);
}
section.section-1 {
background: url("../images/20260611_200439.jpg");
max-width: 100%;
background-size: cover; 
height: auto;
}
/* buttons */
nav.nav-container {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-left: 50px;
    gap: 30px;
    padding: 10px;
    font-size: 20px;
}
.logo{
    flex-direction: row;
    justify-content: flex-start;
}
.direct{
    color: rgb(1, 1, 1);
}
/* texte 1 */
div.div  {
      text-align: center;
      /* margin-top: 300px; */
      padding: 5rem;
      color: rgb(240, 244, 239);   
      font-size: 2.25rem;  
}
/* SECTION 2 */
/* pourquoi agrobionature */
.intro-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 20px;
    padding:10px;
}
.intro-item {
   flex: 1 1 300px;
   height: auto;
}
.div2 h2{
    text-align: center;
    margin:0;
    padding: 20px 20px 20px 20px; /* haut droite bas gauche */
    background-color: rgb(153, 186, 69);
}
.div2 p{
    text-align: center;
    margin:0;
    font-size: 1.25rem;
    padding: 5px;
}
/* description intro */
.intro {
display:flex;
text-align: center;
background-color: rgb(198, 216, 108);
}
div.div2 img{
    max-width: 100%;
    height: auto;
    margin:0;
}
/* scroll infinite */
.scroll-container {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(209, 209, 206);
}
.gr-item {
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 20rem;
    margin: 1.25rem;
    padding: 10px;
    background-color: rgb(197, 185, 170);
    border-width: 5px;
    border-style: solid;
    border-color: rgb(125, 120, 120);
}
.gr-titre {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(71, 84, 32);
}
.gr-description {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(167, 188, 104);
}
/* 2n item */
.tshirt-item {
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 20rem;
    margin: 1.25rem;
    padding: 10px;
    background-color: rgb(197, 185, 170);
    border-width: 5px;
    border-style: solid;
    border-color: rgb(125, 120, 120);
}
.tshirt-titre {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(71, 84, 32);
}
.tshirt-description {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(167, 188, 104);
}
/* 3rd item */
.grgr-item {
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 20rem;
    margin: 1.25rem;
    padding: 10px;
    background-color: rgb(197, 185, 170);
    border-width: 5px;
    border-style: solid;
    border-color: rgb(125, 120, 120);
}
.grgr-titre {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(71, 84, 32);
}
.grgr-description {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 55%;
    margin: 0;
    margin-left: auto;     /* pousse la boîte vers la DROITE */
    padding: 5px;
    background-color: rgb(167, 188, 104);
}
/* test */
.ventes {
  margin: 100px auto;
  width: 95%;
  border: 5px solid red;
  display: flex;
  overflow-x: auto;
}

/* .scroll-item { 
    flex: 0 0 5rem;
  height: 15rem;
  padding: 1rem;
  font-size: 3rem;
  border-radius: 0.2rem;
  text-align: center;
  align-items: center;
}*/
.ventes::-webkit-scrollbar{
    display: none;
}
.scroll-container {
    display: flex;
    flex-wrap: nowrap;   /* empêche le retour à la ligne */
    align-items: center;
    justify-content: center;
    gap: 1rem;            /* corrigé : plus d'espace entre 1 et rem */
    animation: spin 15s infinite linear;
}
@keyframes spin {
    from {
        translate: 0;
    }
    to{
        translate: -100%;
    }
}