*{ 
    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
}
/* HERO Accueil (index) : layout propre et responsive */
.pp{
  background-image: url('images/about-bg-1-1.png');
  background-repeat: no-repeat;
  background-size: 90%;

  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  /* important */
  flex-wrap: wrap;

  /* même logique de “contenu centré” que a-propos */
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px);
}

.enfant{
  padding-right: 0; /* on évite de pousser le contenu */
  flex: 1 1 360px;  /* 2 colonnes qui peuvent se replier */
}

.ifl{
  flex: 1 1 320px;
}

.ifl img{
  width: 100%;
  max-width: 520px;   /* optionnel, pour éviter une image trop géante */
  height: auto;
  padding-left: 0;    /* on enlève le padding qui casse sur mobile */
  display: block;
  margin: 0 auto;
}

/* Mobile : on empile proprement */
@media (max-width: 900px){
  .pp{
    flex-direction: column;
    text-align: center;
    background-size: cover; /* plus joli quand ça se resserre */
  }
}

.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;
}

/*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;
}


/* 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;
}

/* ✅ Box sizing uniquement pour CONTACT (pas global) */
.contact-wrap, 
.contact-wrap *, 
.contact-wrap *::before, 
.contact-wrap *::after{
  box-sizing: border-box;
}
/* 0) IMPORTANT : box-sizing global (évite les surprises de largeur) */

/* 1) Ultra petit écran : on réduit la “gouttière” de contact-wrap */
@media (max-width: 320px){
  .contact-wrap{ padding: 0 10px; }   /* au lieu de 20px */
}

/* 2) reCAPTCHA : on le scale un peu plus sous 320px */
@media (max-width: 320px){
  .g-recaptcha{
    transform: scale(0.76);
    transform-origin: left top;
  }
}

/* 3) Sécurité : empêcher tout élément de forcer une largeur mini */
.contact-grid, .contact-form, .contact-form .row, .map-embed { min-width: 0; }


/* CONTACT — sur mobile : la carte passe SOUS le formulaire */
@media (max-width: 900px){

  .contact-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  /* ordre */
  .contact-title{ grid-column: 1; grid-row: 1; }
  .contact-form{  grid-column: 1; grid-row: 2; }

  /* la map passe en 3e position + on enlève le trait vert */
  .map-embed{
    grid-column: 1;
    grid-row: 3;

    border-left: 0;
    padding-left: 0;

    min-width: 0;
    width: 100%;
    margin-top: 18px;
  }

  .map-embed iframe{
    width: 100%;
    height: 260px;   /* ajuste si tu veux plus/moins haut */
  }
}


/* CONTACT — forcer les .row à ne jamais dépasser sur tout petit écran 
@media (max-width: 370px){
  .contact-form .row{
    grid-template-columns: 1fr !important;
    gap: 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*/

/* ===========================
   FIX LARGEUR MOBILE (INDEX)
   Aligné sur header (20px) et footer-container (20px)
   =========================== */

/* 1) Empêche les débordements sournois dans ces sections 
.pp, .pp * ,
.home-products, .home-products * {
  box-sizing: border-box;
}*/

/* 2) Même “gouttière” que header/footer sur mobile */
@media (max-width: 900px) {

  /* PP (hero accueil) */
  .pp{
    padding-left: 20px;
    padding-right: 20px;

    /* ton wrap est commenté -> on le remet + empilement mobile */
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  /* Le padding-right de .enfant pousse trop sur mobile */
  .enfant{
    padding-right: 0;
  }

  /* Produits (titre + flèches) : même largeur que header/footer */
  .home-products{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Si les flèches prennent trop de place, on les met sous le titre */
  .home-products-header{
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* 3) Image .ifl : soit réduire, soit cacher */

/* Option A : réduire fortement l'image sur mobile 
@media (max-width: 900px) {
  .ifl{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .ifl img{
    width: min(220px, 60vw);
    height: auto;
    padding-left: 0; /* important : ton padding-left casse l’alignement *
    display: block;
  }
} */

/* Option B (encore plus clean) : cacher complètement sur petit mobile
   -> si tu préfères cette option, garde ce bloc et tu auras un hero 100% texte */
@media (max-width: 520px) {
  .ifl{
    display: none;
  }
}
/* ===========================
   ANTI-DEBORDEMENT (très petits écrans)
   =========================== */


/* 2) TOUTES les images ne doivent jamais dépasser leur conteneur */
img { max-width: 100%; height: auto; display: block; }

/* 3) Si un texte/URL est trop long, on autorise la casse */
h1, h2, h3, h4, p, a { overflow-wrap: anywhere; }

/* 4) Sous ~360px : on “calme” les titres trop espacés */
@media (max-width: 360px){
  main h2{
    letter-spacing: 0.12em;  /* au lieu de 0.5em */
    font-size: 1.05em;
  }
}

/* 5) Sous ~340px : les flèches du slider rapetissent */
@media (max-width: 340px){
  .nav-arrows .arrow{
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
}

/* ===========================
   CONTACT : reCAPTCHA responsive
   =========================== */

/* Le reCAPTCHA est “fixe”, donc on le scale sur petits écrans */
@media (max-width: 370px){
  .g-recaptcha{
    transform: scale(0.90);
    transform-origin: left top;
  }
}

@media (max-width: 330px){
  .g-recaptcha{
    transform: scale(0.82);
    transform-origin: left top;
  }
}
/* Bandeau : titre responsive (mobile-friendly) */
.bandeau h1{
  font-size: clamp(32px, 8vw, 80px); /* min 32px, fluide, max 80px */
  line-height: 1.05;
  padding: 0 12px;                  /* évite que ça touche les bords */
  text-align: center;
}
/* Bandeau plus bas sur mobile */
@media (max-width: 600px){
  .bandeau{
    height: 22vh;
    min-height: 140px; /* évite trop petit */
  }
}

/* Très petit mobile */
@media (max-width: 360px){
  .bandeau{
    height: 18vh;
    min-height: 120px;
  }
}