*{ 
    margin:0;
}
header {
    /*height: 8em;*/
    height: auto;
    background: url('images/header-shape-9-1.png');
    background-size:cover;
    background-position: right;
    color: white;
    text-align: center; 
    padding: 20px;
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* permet le passage sur plusieurs lignes */
}
footer{
    height: auto;
    background-image: url('images/footer-bg-2.jpg');
    background-size:cover;
    background-position: bottom left;
    color: white;
    font-family: "Advent Pro", sans-serif;
 }
.ong{
    font-family: "Advent Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color:white;
    text-decoration: none;
    line-height: 1.8em;
  }
.ong:hover{
    color:#858585
}
.noir{
    color:black;
}
#logo {
    height:8em;
    width: auto;
}
a{
    color:#bdd239;
}
a:hover{
    color:#858585
}
.pp{
    background-image: url('images/about-bg-1-1.png');
    background-repeat: no-repeat;
    background-size: 90%;
    display:flex;
    justify-content: space-between;
    /* flex-wrap:wrap; */
}
.enfant{
    /* margin:auto; */
    padding-right: 2em;
}
.boutonenv{
  display: inline-block;
  margin-top: 24px;
  background: var(--btn-bg);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}
.boutonenv:hover{
    color:#858585
}
button:active{
    background-color: #1d1b1b;
}
.gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.product {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

nav ul {
    list-style-type: none;
    padding: 0;
    flex-wrap: wrap;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}
h4{
    font-family: "Advent Pro", sans-serif;
    color:#bdd239;
    font-weight: 200;
    font-size: 4em;
    margin-top: -0.14em;
    margin-bottom: 0.14em
}
h3{
    font-family: "Advent Pro", sans-serif;
    font-size:4em;
    text-transform: capitalize;
    margin-top: -0.14em;
}
main h2{
    color: #858585;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: 0.5em;
    margin-bottom: 0.75em;
}
p{
    color: #858585;
    font-family: "Roboto", sans-serif;
    line-height: 1.8em;
    margin-bottom:1em;
}
li{
    color: #858585;
    font-family: "Roboto", sans-serif;
}
.centrer{
    flex:1;
    margin:auto;
    /* pour centrer on peut mettre aussi margin:auto ça marchera aussi pour autre chose que du texte */
}
@media (max-width: 900px) {
  header {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  #logo {
    height: 70px;
    margin: 10px auto;
  }

  nav ul {
    flex-direction: column;
    margin-top: 10px;
  }

  nav ul li {
    margin: 15px 0;
  }

  .ong {
    font-size: 1.1em;
  }
}

/* 📱 Petits téléphones */
@media (max-width: 500px) {
  h1 {
    font-size: 1.4em;
  }

  #logo {
    height: 60px;
  }

  .ong {
    font-size: 1em;
  }
}
.centrer2{
     text-align: center;
}
.apropos{
    width: 85%;
    margin:auto;
}
.ifl img{
    width: 90%;
    padding-left:2em;
}
/*class pour les titres de pages*/
.bandeau {
    background-image: url('images/hero-bg-8-3.jpg');
    background-position: right top;
    background-repeat: no-repeat;
    background-size:cover;
    height: 30vh; /* prend 100% de la hauteur de la fenêtre si 100vh */
    display: flex;
    align-items: center;   /* centre verticalement */
    justify-content: center; /* centre horizontalement */
    text-align: center;
    position: relative;
    /*color: white;*/
    overflow: hidden;
}
.bandeau h1 {
    font-family: "Advent Pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color:white;
    text-decoration: none;
    
      font-size: 80px;
}
.container{
    display:flex;
    justify-content: space-between;
    padding: 4em;
}
/* Grille d’images */
.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  gap: 20px;                              /* espace entre les images */
  margin-bottom: 3em;
}
/* L’image elle-même */
.gallery img{
  margin: 0;
  border-radius: 10px;       /* angles adoucis (option) */
  overflow: hidden;          /* coupe l’image dans les angles arrondis */
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;      /* même hauteur visuelle pour toutes */
  object-fit: cover;         /* recadre sans déformer */
}

.container2{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;
}
/* ===== Footer Potager — styles ===== */
:root{
  --footer-bg: #191b1b;        /* fond sombre du footer */
  --footer-fg: #e8e8e8;        /* texte principal */
  --footer-muted: #a5a5a5;     /* texte atténué */
  --accent: #bdd239;           /* VERT du trait sous les titres */
  --btn-bg: #0f0f0f;           /* bouton noir */
  --input-bg: #2a2727;         /* champ email foncé */
  --radius: 14px;
}

.site-footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  position: relative;
  overflow: hidden;
}

.footer-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px) 20px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes */
  gap: clamp(24px, 4vw, 64px);
}

.footer-col a{ color: var(--footer-fg); text-decoration: none; }
.footer-col a:hover{ text-decoration: underline; }

.footer-title{
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  margin: 0 0 22px 0;
  line-height: 1.2;
  position: relative;
}
/* petit trait vert sous le titre (aligné à gauche, ~60px) */
.footer-title.is-underline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 64px;            /* longueur du trait */
  height: 4px;            /* épaisseur */
  background: var(--accent);
  border-radius: 3px;
}

.footer-address{ color: var(--footer-muted); margin: 16px 0 18px; }

.footer-line{ display: flex; align-items: center; gap: 10px; color: var(--footer-muted); margin: 10px 0; }
.footer-line .ico{ width: 20px; height: 20px; fill: var(--footer-muted); flex: 0 0 20px; }

/* --- Mailchimp form --- */
.mc-form{
  margin-top: 22px;
  max-width: 780px;
}

.mc-form input[type="email"]{
  width: 100%;
  background: var(--input-bg);
  color: var(--footer-fg);
  border: 1px solid #3a3838;
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 18px;
  outline: none;
}
.mc-form input::placeholder{ color: #b0aaaa; }

.mc-form button{
  display: inline-block;
  margin-top: 24px;
  background: var(--btn-bg);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}
.mc-form button:hover{color:#858585}

/* Accessibilité : pour les labels visuellement masqués */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* bas de footer */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--footer-muted);
  text-align: center;
  padding: 16px 12px 22px;
  font-size: 15px;
}

/* Responsive : pile les colonnes sous 900px */
@media (max-width: 900px){
  .footer-container{ grid-template-columns: 1fr; }
}

.en-ligne{
    display:flex;
    gap:20px;
    align-items: center;
}

/* ===== Section produits accueil (slider) ===== */
.home-products { position: relative; max-width: 1200px; margin: 60px auto; padding: 0 40px; }
.home-products-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

.home-products h2 { font-size: 2rem; font-weight: 700; position: relative; }
.home-products h2::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 60px; height: 4px; background: #bdd239; border-radius: 2px;
}

/* slider */
.slider-wrapper { overflow: hidden; position: relative; }
.slider-track {
  display: flex; gap: 20px; scroll-behavior: smooth; overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-track .card {
  flex: 0 0 220px;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 14px;
  color: #111; text-decoration: none; overflow: hidden;
  transition: transform .25s ease;
}
.slider-track .card:hover { transform: translateY(-3px); }

.slider-track .card img, .slider-track .card .noimg {
  width: 100%; height: 180px; object-fit: cover; display: block; background:#f1f1f1;
}
/*.slider-track .card h3 { font-size: 1rem; margin: 10px 12px 4px; }
.slider-track .card .price { color: #3b3b3b; font-weight: 600; margin: 0 12px 12px; }*/

/* flèches */
.nav-arrows { display: flex; gap: 10px; }
.nav-arrows .arrow {
  background: #bdd239; border: none; color: #000; width: 38px; height: 38px;
  border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: filter .2s;
}
.nav-arrows .arrow:hover { filter: brightness(1.08); }

/* petit ajustement mobile */
@media (max-width: 640px) {
  .home-products { padding: 0 20px; margin: 40px auto; }
  .slider-track .card { flex-basis: 70vw; }
}

/* ===== Mentions légales ===== */
.mentions-legales {
  max-width: 800px;
  margin: 60px auto;
  position: relative;
  font-family: "Advent Pro", sans-serif;
}

/* Trait vertical centré sur les icônes */
.mentions-legales::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;                /* aligné au centre des cercles (50px/2) */
  width: 2px;
  background: #bdd239;       /* ton vert signature */
}

/* Chaque bloc */
.ml-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
  position: relative;
}

/* Cercle contenant l’icône */
.ml-icon {
  background: #bdd239;       /* cercle vert */
  color: #000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #f9f9f9; /* petit contour clair pour détacher du fond */
}

/* Texte à droite */
.ml-content {
  margin-left: 25px;
}

.ml-content h3 {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: #4a4a4a;
  margin: 0 0 6px;
}

.ml-content p {
  margin: 0;
  color: #444;
  line-height: 1.6;
}

.ml-content ul {
  margin: 6px 0 0;
  padding-left: 20px;
  color: #333;
}
.ml-content ul li {
  list-style: disc;
}

/* Animation légère au survol des icônes */
.ml-icon:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

/* Responsive */
@media (max-width: 600px) {
  .mentions-legales::before { left: 20px; }
  .ml-icon { width: 42px; height: 42px; font-size: 16px; }
  .ml-content { margin-left: 20px; }
}

/*formulaire contact*/
/* ====== Contact — style harmonisé footer ====== */
:root{
  --footer-bg: #191b1b;
  --footer-fg: #e8e8e8;
  --footer-muted: #a5a5a5;
  --accent: #bdd239;
}

/* conteneur */
.contact-wrap{
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

/* grille: Titre à gauche, carte à droite ; form sous le titre */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
  align-items: start;
  column-gap: 28px; /* 3) Séparateur et respiration entre formulaire et carte un peu plus d’air */
}
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}
.contact-title{
  grid-column: 1;
  grid-row: 1;
  font-family: "Advent Pro", sans-serif;
  font-weight: 700;
  font-size: 4em;
  line-height: 1;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  text-transform: capitalize;
}
/* Carte alignée en haut, sur 2 lignes */
.map-embed{ grid-column: 2; grid-row: 1 / span 2; height:100%;border-left: 1px solid #bdd239; 
  padding-left: 22px; }
.map-embed iframe{
  width: 100%; height: 100%; border: 0; border-radius: 12px;
}

/* Formulaire sous le titre */
.contact-form{ grid-column: 1; grid-row: 2; }

/* Champs (style clair, focus vert) */
/* 1) Empêcher les débordements des inputs/textarea */
.contact-form *, 
.contact-form *::before, 
.contact-form *::after {
  box-sizing: border-box;
}

/* 2) S’assurer que la ligne Email/Sujet se comporte bien en grille */
.contact-form .row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 20px;              /* espace visible entre Email et Sujet */
}
.contact-form .row > * { min-width: 0; }  /* évite tout débordement */




.contact-form .row + .row{ margin-top: 18px; }
@media (max-width: 700px){ .contact-form .row{ grid-template-columns: 1fr; } }

.contact-form input,
.contact-form textarea{
  width: 100%;
  border: 1px solid #bdd239;
  background: #fff;
  border-radius: 10px;
  padding: 16px 16px;
  font-size: 18px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: "Advent Pro", sans-serif;
  color: #333;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: #9b9b9b; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(189,210,57,.25);
}

.contact-form textarea{ min-height: 220px; resize: vertical; }

/* Bouton = ta classe .boutonenv avec hover doux */
.contact-form .boutonenv{
  margin-top: 18px;
  background-color: #000;
  color: #fff;
  border: 3px solid #000;
  border-radius: 9999px;
  padding: 12px 28px;
  font-weight: 700;
  box-shadow: 3px 6px 0 rgba(186,186,186,.43);
  cursor: pointer;
}
.contact-form .boutonenv:hover{
  color: #858585;
  border-color: #1d1b1b;
}

/* Messages de statut */
.msg{ margin: 10px 0; font-size: 16px; font-family: "Advent Pro", sans-serif; }
.msg.ok{ color:#9ad14b; }
.msg.err{ color:#ff8c8c; }

/* Bandeau sombre optionnel pour rappeler le footer (si tu veux) */
.section-contact-dark{
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 40px 0;
}
.section-contact-dark a{ color: var(--accent); }
.section-contact-dark .contact-title{ color: var(--footer-fg); }


/* Titres et prix pour toutes les cartes produits (accueil + boutique) */
.card h3 {
  font-family: "Advent Pro", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  margin: 10px 12px 4px;
  color: #000;
}

.card .price {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #3b3b3b;
  margin: 0 12px 12px;
}

/*fin class pour les titre de page*/