/* ==========================================================================
   AgriStore — De la Ferme à l'Assiette
   Design system — Crystal Agribusiness
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Accessibilité : label associé visuellement masqué (lu par les lecteurs d'écran,
   invisible à l'écran) pour les champs qui n'affichent qu'un placeholder. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Anti-spam : champ honeypot, invisible et hors navigation clavier pour un humain
   (contrairement à .sr-only, qui reste volontairement annoncé par les lecteurs
   d'écran — l'opposé de ce qu'il faut ici), mais présent dans le DOM pour les bots
   simples qui remplissent tous les champs d'un formulaire sans exécuter son CSS. */
.champ-piege{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

:root{
  --vert-950:#0e2913;
  --vert-900:#123b18;
  --vert-800:#1a5324;
  --vert-700:#237230;
  --vert-600:#2e8b3d;
  --vert-500:#3ea34e;
  --vert-100:#e7f3e6;
  --vert-50:#f3f9f0;

  --orange-700:#c9660c;
  --orange-600:#e07c14;
  --orange-500:#f4941f;
  --orange-400:#ffab3d;
  --orange-100:#fdead0;

  --creme:#fbf7ef;
  --creme-2:#f6f0e2;
  --papier:#fffdf8;
  --encre:#20281f;
  --encre-doux:#5a6555;
  --ligne:#e4ddc9;
  --blanc:#ffffff;

  --ombre-s:0 2px 8px rgba(20,35,18,.06);
  --ombre-m:0 10px 30px rgba(20,35,18,.10);
  --ombre-l:0 24px 60px rgba(20,35,18,.16);

  --rayon-s:10px;
  --rayon-m:18px;
  --rayon-l:28px;

  --police-titre:'Fraunces', Georgia, serif;
  --police-texte:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--police-texte);
  color:var(--encre);
  background:var(--creme);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:1rem}

.enveloppe{width:min(1240px,92%);margin-inline:auto}
.enveloppe-large{width:min(1400px,94%);margin-inline:auto}

h1,h2,h3,h4{font-family:var(--police-titre);color:var(--vert-950);font-weight:600;line-height:1.14}
h1{font-size:clamp(2.4rem,4.6vw,4.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.2vw,2.8rem);letter-spacing:-.01em}
h3{font-size:1.35rem}
.suretitre{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--orange-700);
}
.suretitre::before{content:"";width:22px;height:2px;background:var(--orange-500);display:inline-block}

.texte-doux{color:var(--encre-doux)}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border-radius:999px;font-weight:700;font-size:.96rem;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.bouton-plein{background:var(--vert-800);color:var(--blanc);box-shadow:var(--ombre-s)}
.bouton-plein:hover{background:var(--vert-700);transform:translateY(-3px);box-shadow:var(--ombre-m)}
.bouton-accent{background:var(--orange-500);color:var(--vert-950)}
.bouton-accent:hover{background:var(--orange-400);transform:translateY(-3px);box-shadow:var(--ombre-m)}
.bouton-contour{border:1.5px solid var(--vert-800);color:var(--vert-800)}
.bouton-contour:hover{background:var(--vert-800);color:var(--blanc);transform:translateY(-3px)}
.bouton-fantome{color:var(--vert-900);font-weight:700}
.bouton-fantome span{border-bottom:1.5px solid var(--orange-500);padding-bottom:2px}
.bouton-petit{padding:.6rem 1.2rem;font-size:.85rem}
.bouton-large{width:100%}
.bouton[disabled]{opacity:.5;pointer-events:none}

/* ---------- Barre d'annonce ---------- */
.barre-annonce{
  background:var(--vert-950);color:var(--vert-100);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  padding:.55rem 0;overflow:hidden;position:relative;
}
.barre-annonce .enveloppe-large{display:flex;justify-content:center;gap:2.8rem;align-items:center}
.barre-annonce span{display:inline-flex;align-items:center;gap:.5rem;opacity:.92}
.barre-annonce .pastille{width:5px;height:5px;border-radius:50%;background:var(--orange-500)}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,239,.86);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--ligne);
  transition:box-shadow .3s ease;
}
.entete.colle{box-shadow:var(--ombre-s)}
.entete-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:2rem}
.marque{display:flex;align-items:center;gap:.7rem}
.marque img{height:46px;width:auto}
.marque-texte{display:flex;flex-direction:column;line-height:1.1}
.marque-texte b{font-family:var(--police-titre);font-size:1.28rem;color:var(--vert-950)}
.marque-texte small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-700);font-weight:700}

.nav-principale{display:flex;align-items:center;gap:2.1rem}
.nav-principale a{
  font-weight:600;font-size:.94rem;color:var(--vert-950);position:relative;padding:.3rem 0;
}
.nav-principale a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange-500);
  transition:width .28s ease;
}
.nav-principale a:hover::after,.nav-principale a.actif::after{width:100%}
.nav-principale a.actif{color:var(--orange-700)}

.entete-actions{display:flex;align-items:center;gap:.9rem}
.icone-action{
  position:relative;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vert-50);color:var(--vert-900);
  transition:background .25s ease, transform .25s ease;
}
.icone-action:hover{background:var(--vert-100);transform:translateY(-2px)}
.icone-action svg{width:19px;height:19px}
.badge-nombre{
  position:absolute;top:-4px;right:-4px;background:var(--orange-500);color:var(--vert-950);
  font-size:.66rem;font-weight:800;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.bouton-menu-mobile{display:none}

/* ---------- Fil d'ariane ---------- */
.filariane{padding:1.6rem 0 0;font-size:.85rem;color:var(--encre-doux)}
.filariane a:hover{color:var(--orange-700)}
.filariane .sep{margin:0 .5rem;opacity:.5}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:4.4rem 0 5rem;background:
  radial-gradient(1200px 600px at 82% -10%, var(--vert-100), transparent 60%),
  var(--creme);
}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.hero-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0 2rem}
.puce{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--blanc);
  border:1px solid var(--ligne);padding:.42rem .9rem;border-radius:999px;
  font-size:.8rem;font-weight:700;color:var(--vert-800);box-shadow:var(--ombre-s);
}
.hero h1{margin-top:1rem}
.hero h1 em{font-style:italic;color:var(--orange-600)}
.hero p.lead{font-size:1.14rem;color:var(--encre-doux);max-width:46ch;margin:1.3rem 0 2.2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

.hero-visuel{position:relative}
@keyframes kenburnsHero{
  0%{transform:scale(1)}
  100%{transform:scale(1.08)}
}
.hero-carte-image{
  border-radius:var(--rayon-l);overflow:hidden;box-shadow:var(--ombre-l);
  aspect-ratio:4/4.6;
}
.hero-carte-image img{
  width:100%;height:100%;object-fit:cover;
  transform-origin:center;
  animation:kenburnsHero 18s ease-in-out infinite alternate;
}
.flottant{
  position:absolute;background:var(--papier);border-radius:var(--rayon-m);
  box-shadow:var(--ombre-m);padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;
  animation:flotter 5s ease-in-out infinite;
}
.flottant-1{top:6%;left:-8%;animation-delay:0s}
.flottant-2{bottom:9%;right:-9%;animation-delay:1.4s}
.flottant .rond{width:44px;height:44px;border-radius:50%;background:var(--vert-100);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.flottant b{display:block;font-size:1.05rem;color:var(--vert-950)}
.flottant span{font-size:.76rem;color:var(--encre-doux)}
@keyframes flotter{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Bandeau confiance ---------- */
.bandeau-confiance{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:var(--papier);padding:1.6rem 0}
.confiance-grille{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.4rem}
.confiance-item{display:flex;align-items:center;gap:.7rem;font-size:.88rem;font-weight:600;color:var(--vert-900)}
.confiance-item .pastille-icone{width:34px;height:34px;border-radius:50%;background:var(--orange-100);color:var(--orange-700);display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ---------- Sections génériques ---------- */
section{padding:5.2rem 0}
.entete-section{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.8rem}
.entete-section p{max-width:52ch;margin-top:.8rem}

/* ---------- Catégories ---------- */
.grille-categories{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.carte-categorie{
  background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon-m);
  padding:1.6rem 1rem;text-align:center;transition:all .3s ease;
}
.carte-categorie:hover{transform:translateY(-6px);box-shadow:var(--ombre-m);border-color:var(--vert-600)}
.carte-categorie .emoji{font-size:2.1rem;margin-bottom:.7rem;display:block}
.carte-categorie b{display:block;font-size:.9rem;color:var(--vert-950)}
.carte-categorie span{font-size:.74rem;color:var(--encre-doux)}

/* ---------- Produits ---------- */
.grille-produits{display:grid;grid-template-columns:repeat(4,1fr);gap:1.7rem}
.carte-produit{
  background:var(--papier);border-radius:var(--rayon-m);overflow:hidden;
  border:1px solid var(--ligne);transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
  position:relative;
  /* Toutes les cartes d'une même rangée grid ont déjà la même hauteur de bloc
     (comportement par défaut de CSS Grid, align-items:stretch implicite) —
     mais sans ceci, seul le bloc extérieur s'étirait : le pied (prix/boutons)
     restait juste sous le texte, à des hauteurs différentes selon que le titre
     fasse une ou deux lignes. display:flex + height:100% permet au pied de
     s'ancrer en bas via margin-top:auto (voir .carte-produit-pied). */
  display:flex;flex-direction:column;height:100%;
}
.carte-produit:hover{transform:translateY(-7px);box-shadow:var(--ombre-l)}
.carte-produit-image{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--vert-50);flex-shrink:0}
.carte-produit-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.carte-produit:hover .carte-produit-image img{transform:scale(1.09)}
.etiquette{
  position:absolute;top:.8rem;left:.8rem;background:var(--vert-900);color:var(--blanc);
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:.32rem .65rem;border-radius:999px;
}
.etiquette.promo{background:var(--orange-500);color:var(--vert-950)}
.bouton-favori{
  position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-6px);transition:all .25s ease;
}
.carte-produit:hover .bouton-favori{opacity:1;transform:translateY(0)}
.bouton-favori svg{width:16px;height:16px}
.carte-produit-corps{
  padding:1.1rem 1.2rem 1.3rem;
  /* Le corps occupe tout l'espace restant sous l'image (flex:1) et devient
     lui-même une colonne flex, pour que .carte-produit-pied puisse s'ancrer
     en bas via margin-top:auto, quelle que soit la hauteur du texte au-dessus. */
  display:flex;flex-direction:column;flex:1;
}
.carte-produit-corps .lieu{font-size:.72rem;color:var(--orange-700);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.carte-produit-corps h3{
  font-size:1.05rem;margin:.35rem 0 .2rem;
  /* Hauteur réservée fixe (2 lignes à line-height:1.14 hérité de h1-h4), pour
     que la zone titre occupe toujours le même espace que le nom du produit
     tienne sur une ou deux lignes ("Ananas Victoria" vs "Mangues locales") —
     au-delà de 2 lignes, troncature propre avec ellipse plutôt qu'un débordement. */
  min-height:2.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.carte-produit-corps .unite{font-size:.8rem;color:var(--encre-doux)}
.statut-stock{
  display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.2rem .55rem;border-radius:999px;margin-top:.4rem;
}
.statut-stock-bas{background:rgba(244,148,31,.14);color:var(--orange-700)}
.statut-stock-rupture{background:rgba(192,57,43,.12);color:#c0392b}
.carte-produit-pied{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;row-gap:.5rem;
  /* Ancré tout en bas de la carte (technique flexbox standard) : la position
     verticale du prix et des boutons devient strictement identique sur toutes
     les cartes d'une même rangée, quelle que soit la hauteur du texte au-dessus
     (titre sur une ou deux lignes, badge de stock présent ou non...). Remplace
     l'ancien margin-top:.9rem fixe, qui suivait la hauteur du texte au lieu
     d'être toujours à la même position. */
  margin-top:auto;padding-top:.9rem;
}
.carte-produit-pied .prix{flex:1 0 auto;white-space:nowrap}
.prix{font-family:var(--police-titre);font-weight:600;font-size:1.28rem;color:var(--vert-950)}
.prix small{font-family:var(--police-texte);font-size:.72rem;color:var(--encre-doux);font-weight:600}
.prix-barre{text-decoration:line-through;color:#b5ab8f;font-size:.86rem;margin-right:.4rem}
.bouton-ajout{
  width:42px;height:42px;border-radius:50%;background:var(--vert-900);color:var(--blanc);
  display:flex;align-items:center;justify-content:center;transition:all .25s ease;
}
.bouton-ajout:hover{background:var(--orange-500);color:var(--vert-950);transform:rotate(90deg)}
.bouton-ajout svg{width:17px;height:17px}
.carte-produit-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto}
.bouton-voir{
  width:42px;height:42px;border-radius:50%;background:var(--vert-900);color:var(--blanc);
  display:flex;align-items:center;justify-content:center;transition:all .25s ease;
}
.bouton-voir:hover{background:var(--orange-500);color:var(--vert-950)}
.bouton-voir svg{width:17px;height:17px}
.note-etoiles{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--encre-doux);margin-top:.35rem}
.note-etoiles .etoiles{color:var(--orange-500);letter-spacing:1px}

.voir-tout{display:flex;justify-content:center;margin-top:2.8rem}

/* ---------- Bandeau mission ---------- */
.mission{
  background-color:var(--vert-950);
  background-image:linear-gradient(to right, rgba(14,41,19,.85) 0%, rgba(14,41,19,.75) 50%, rgba(14,41,19,.2) 100%), url('img/mission.jpg');
  /* Navigateurs supportant image-set() chargent le .webp (bien plus léger) à la place
     du .jpg déclaré juste au-dessus, qui reste le repli pour les autres. */
  background-image:linear-gradient(to right, rgba(14,41,19,.85) 0%, rgba(14,41,19,.75) 50%, rgba(14,41,19,.2) 100%), image-set(url('img/mission.webp') type('image/webp'), url('img/mission.jpg') type('image/jpeg'));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--vert-100);border-radius:var(--rayon-l);
  padding:4rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;
  position:relative;overflow:hidden;
}
.mission::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 90% 10%, rgba(244,148,31,.18), transparent 70%);
  pointer-events:none;
}
@media (min-width:769px){
  .mission{background-attachment:scroll, fixed;}
}
.mission h2{color:var(--blanc)}
.mission h2 em{color:var(--orange-400);font-style:italic}
.mission p{color:#c9d8c4;margin:1.2rem 0 1.6rem;max-width:52ch}
.mission-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.chiffre b{font-family:var(--police-titre);font-size:2.4rem;color:var(--orange-400);display:block}
.chiffre span{font-size:.82rem;color:#c9d8c4}

/* ---------- Comment ça marche ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
/* Variante 5 colonnes : page dédiée "Comment ça marche" (5 étapes), mêmes
   paliers de réduction que .etapes ci-dessus pour rester cohérente partout. */
.etapes-cinq{grid-template-columns:repeat(5,1fr)}
.etape{position:relative;padding:2rem 1.6rem;background:var(--papier);border-radius:var(--rayon-m);border:1px solid var(--ligne)}
.etape .num{
  font-family:var(--police-titre);font-size:1.6rem;color:var(--orange-500);
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border:1.5px solid var(--orange-400);border-radius:50%;margin-bottom:1.1rem;
}
.etape h3{font-size:1.08rem;margin-bottom:.5rem}
.etape p{font-size:.88rem;color:var(--encre-doux)}

/* ---------- Actualités (publications Crystal Agribusiness) ---------- */
.grille-actus{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.carte-actu{
  display:flex;flex-direction:column;
  background:var(--papier);border-radius:var(--rayon-m);padding:1.8rem 1.6rem;
  border:1px solid var(--ligne);text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.carte-actu:hover{transform:translateY(-6px);box-shadow:var(--ombre-m);border-color:var(--vert-600)}
.carte-actu-icone{
  font-size:1.6rem;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--vert-50);
  border:1.5px solid var(--vert-100,var(--ligne));margin-bottom:1rem;
}
.carte-actu-date{font-size:.74rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.03em}
.carte-actu h3{font-size:1rem;margin:.5rem 0 .5rem;color:var(--vert-950)}
.carte-actu p{font-size:.86rem;color:var(--encre-doux);margin-bottom:1.2rem;flex:1 1 auto}
.carte-actu-lien{font-size:.86rem;font-weight:700;color:var(--vert-700,var(--vert-600));display:inline-flex;align-items:center;gap:.35rem;margin-top:auto}
.carte-actu-lien span{transition:transform .25s ease}
.carte-actu:hover .carte-actu-lien span{transform:translate(2px,-2px)}

/* ---------- Témoignages ---------- */
.section-avis{background:var(--vert-50)}
.grille-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.carte-avis{
  background:var(--papier);border-radius:var(--rayon-m);padding:2rem;
  border:1px solid var(--ligne);position:relative;
}
.carte-avis .guillemet{font-family:var(--police-titre);font-size:3.2rem;color:var(--orange-200,#ffd9a3);position:absolute;top:1rem;right:1.4rem;line-height:1}
.carte-avis .etoiles{color:var(--orange-500);letter-spacing:2px;margin-bottom:1rem;display:block}
.carte-avis p{font-size:.96rem;color:var(--encre);margin-bottom:1.6rem}
.avis-auteur{display:flex;align-items:center;gap:.8rem}
.avis-auteur img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:1.5px solid transparent;
  transform:scale(1);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.carte-avis:hover .avis-auteur img{
  transform:scale(1.06);
  border-color:var(--orange-500);
}
.avis-auteur b{font-size:.9rem;display:block}
.avis-auteur span{font-size:.76rem;color:var(--encre-doux)}

/* ---------- Fournisseur CTA ---------- */
.cta-fournisseur{
  background:linear-gradient(120deg, var(--orange-100), var(--creme-2));
  border-radius:var(--rayon-l);padding:3.4rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;
}
.cta-fournisseur .liste-conditions{margin-top:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.cta-fournisseur .liste-conditions li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;color:var(--vert-900)}
.cta-fournisseur .liste-conditions li::before{content:"✓";color:var(--vert-700);font-weight:800}

/* ---------- Devis professionnel (accueil) ---------- */
.cta-devis{background:linear-gradient(120deg, var(--vert-50), var(--creme-2));border-radius:var(--rayon-l);padding:3.4rem}
.cta-devis .liste-conditions{margin-top:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.cta-devis .liste-conditions li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;color:var(--vert-900)}
.cta-devis .liste-conditions li::before{content:"✓";color:var(--vert-700);font-weight:800}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--vert-900);border-radius:var(--rayon-l);padding:3.2rem 3.6rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;color:var(--blanc)}
.newsletter h3{color:var(--blanc);font-size:1.5rem}
.newsletter p{color:#c9d8c4;margin-top:.4rem}
.form-newsletter{display:flex;gap:.6rem;min-width:380px}
.form-newsletter input{flex:1;padding:.9rem 1.1rem;border-radius:999px;border:none;background:rgba(255,255,255,.12);color:var(--blanc)}
.form-newsletter input::placeholder{color:#a9bfa4}
.form-newsletter input:focus{outline:2px solid var(--orange-400);background:rgba(255,255,255,.18)}

/* ---------- Pied de page ---------- */
.pied{background:var(--vert-950);color:#a9bfa4;padding:4.4rem 0 0}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.pied-marque .marque-texte b{color:var(--blanc)}
.pied p.desc{margin:1rem 0 1.3rem;font-size:.88rem;max-width:32ch}
.reseaux{display:flex;gap:.6rem}
.reseaux a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all .25s ease}
.reseaux a:hover{background:var(--orange-500);color:var(--vert-950)}
.pied h4{color:var(--blanc);font-family:var(--police-texte);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.2rem}
.pied ul li{margin-bottom:.7rem;font-size:.88rem}
.pied ul li a:hover{color:var(--orange-400)}
.pied .coord li{display:flex;gap:.6rem;align-items:flex-start}
.bas-pied{padding:1.6rem 0;display:flex;justify-content:space-between;font-size:.8rem;color:#7f9878}
.bas-pied a:hover{color:var(--orange-400)}

/* ---------- Boutique / catalogue ---------- */
.entete-page{padding:2.4rem 0 1rem}
.entete-page h1{font-size:clamp(2rem,3.4vw,2.9rem)}
/* Bandeau d'aide discret, juste sous le sous-titre : fond légèrement teinté,
   pas d'aplat imposant, pour ne jamais concurrencer la grille de produits. */
.aide-boutique{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  background:var(--vert-50);border:1px solid var(--ligne);border-radius:var(--rayon-m);
  padding:.9rem 1.3rem;margin-bottom:1.6rem;
}
.aide-boutique-item{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--encre-doux);flex:1 1 220px}
.aide-boutique-item svg{width:17px;height:17px;flex-shrink:0;color:var(--vert-800)}
.aide-boutique-lien{
  margin-left:auto;font-size:.82rem;font-weight:700;color:var(--orange-700);
  white-space:nowrap;display:flex;align-items:center;gap:.3rem;
}
.aide-boutique-lien:hover{color:var(--orange-500)}
.barre-boutique{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.2rem 0;border-bottom:1px solid var(--ligne);margin-bottom:2.4rem;flex-wrap:wrap;
}
.recherche-boutique{
  display:flex;align-items:center;gap:.6rem;background:var(--papier);border:1px solid var(--ligne);
  border-radius:999px;padding:.7rem 1.2rem;min-width:320px;
}
.recherche-boutique input{border:none;background:none;flex:1;outline:none}
.recherche-boutique svg{width:17px;height:17px;color:var(--encre-doux)}
.filtres-boutique{display:flex;gap:.6rem;flex-wrap:wrap}
.puce-filtre{
  padding:.55rem 1.15rem;border-radius:999px;border:1px solid var(--ligne);background:var(--papier);
  font-size:.85rem;font-weight:700;color:var(--vert-900);transition:all .25s ease;
}
.puce-filtre:hover{border-color:var(--vert-600)}
.puce-filtre.actif{background:var(--vert-900);color:var(--blanc);border-color:var(--vert-900)}
.tri-boutique select{
  padding:.6rem 1rem;border-radius:999px;border:1px solid var(--ligne);background:var(--papier);font-weight:600;font-size:.85rem;
}
.resultats-info{font-size:.86rem;color:var(--encre-doux);margin-bottom:1.4rem}

/* ---------- Page produit ---------- */
.produit-grille{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.6rem;padding:2rem 0 4rem}
.galerie-principale{border-radius:var(--rayon-l);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--ombre-m);margin-bottom:.9rem}
.galerie-principale img{width:100%;height:100%;object-fit:cover}
.galerie-miniatures{display:flex;gap:.7rem}
.galerie-miniatures button{width:74px;height:74px;border-radius:var(--rayon-s);overflow:hidden;border:2px solid transparent;opacity:.65;transition:all .2s ease}
.galerie-miniatures button.actif{border-color:var(--orange-500);opacity:1}
.produit-info .lieu{color:var(--orange-700);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.produit-info h1{margin:.6rem 0 .8rem;font-size:clamp(1.8rem,2.6vw,2.5rem)}
.produit-prix-ligne{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.2rem}
.produit-prix-ligne .prix{font-size:2rem}
.produit-desc{color:var(--encre-doux);margin-bottom:1.6rem;max-width:52ch}
.produit-attributs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.8rem}
.attribut{background:var(--vert-50);border-radius:var(--rayon-s);padding:.9rem 1rem}
.attribut span{display:block;font-size:.72rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.attribut b{font-size:.94rem;color:var(--vert-950)}
.selecteur-quantite{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem}
.stepper{display:flex;align-items:center;border:1px solid var(--ligne);border-radius:999px;overflow:hidden}
.stepper button{width:42px;height:42px;font-size:1.2rem;color:var(--vert-900);transition:background .2s ease}
.stepper button:hover{background:var(--vert-100)}
.stepper span{width:44px;text-align:center;font-weight:700}
.produit-actions{display:flex;flex-wrap:wrap;gap:1rem}
.produit-actions .bouton.actif{box-shadow:0 0 0 2px var(--orange-500)}
/* Les 3 actions secondaires (panier, livraison, WhatsApp) partagent toujours la
   largeur du bouton "Paiement direct" au-dessus (même conteneur .produit-actions,
   width:100% ici) : chacune se réduit également (flex-shrink, min-width:0 pour ne
   jamais forcer un débordement par le texte) plutôt que de déborder ou de faire
   passer un seul bouton à la ligne suivante. */
.produit-actions-secondaires{display:flex;flex-wrap:wrap;gap:.7rem;width:100%}
.produit-actions-secondaires .bouton{flex:1 1 160px;min-width:0}
/* Contact + livraison de la fiche produit : masqué par défaut, révélé en
   douceur (jamais d'apparition brutale) au clic sur un des deux boutons de
   paiement — jamais pour l'action WhatsApp, qui reste immédiate. */
.champs-achat{max-height:0;opacity:0;visibility:hidden;overflow:hidden;margin-top:0;transition:max-height .4s ease, opacity .3s ease, visibility 0s linear .4s}
.champs-achat.ouvert{max-height:900px;opacity:1;visibility:visible;margin-top:1.4rem;transition:max-height .4s ease, opacity .3s ease}
.mini-garanties{display:flex;gap:1.6rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--ligne);flex-wrap:wrap}
.mini-garanties div{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--vert-900)}

.onglets{display:flex;gap:2.2rem;border-bottom:1px solid var(--ligne);margin:1rem 0 2rem}
.onglets button{padding:.9rem 0;font-weight:700;color:var(--encre-doux);position:relative}
.onglets button.actif{color:var(--vert-950)}
.onglets button.actif::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--orange-500)}
.panneau-onglet{display:none;color:var(--encre-doux);max-width:70ch}
.panneau-onglet.actif{display:block}
.panneau-onglet ul{margin-top:.8rem}
.panneau-onglet li{margin-bottom:.5rem;padding-left:1.2rem;position:relative}
.panneau-onglet li::before{content:"•";color:var(--orange-500);position:absolute;left:0}

/* ---------- Panier ---------- */
/* Contenu remplacé de façon fluide en AJAX (ajout/retrait/zone) plutôt que par un
   rechargement complet de page ; ce léger fondu évite un remplacement brutal. */
#panier-contenu{transition:opacity .18s ease}
.stepper button[disabled],.supprimer-ligne[disabled]{opacity:.45;pointer-events:none}
.panier-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:2.6rem;padding:2rem 0 4.5rem;align-items:start}
.ligne-panier{
  display:grid;grid-template-columns:84px 1fr auto auto auto;gap:1.2rem;align-items:center;
  padding:1.3rem 0;border-bottom:1px solid var(--ligne);
}
.ligne-panier img{width:84px;height:84px;border-radius:var(--rayon-s);object-fit:cover}
.ligne-panier h4{font-size:1rem;margin-bottom:.2rem}
.ligne-panier .lieu{font-size:.76rem;color:var(--orange-700);font-weight:700}
.supprimer-ligne{color:#c65b4e;font-size:.82rem;font-weight:700}
.recap-panier{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon-m);padding:1.8rem;position:sticky;top:110px}
.recap-panier h3{margin-bottom:1.3rem}
.ligne-recap{display:flex;justify-content:space-between;font-size:.92rem;padding:.5rem 0;color:var(--encre-doux)}
.ligne-recap.total{border-top:1px solid var(--ligne);margin-top:.6rem;padding-top:1rem;font-weight:800;color:var(--vert-950);font-size:1.1rem}
.champ-promo{display:flex;gap:.5rem;margin:1.2rem 0}
.champ-promo input{flex:1;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--ligne)}
.methodes-paiement{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.methodes-paiement span{font-size:.72rem;font-weight:700;background:var(--vert-50);padding:.4rem .7rem;border-radius:999px;color:var(--vert-800)}
.panier-vide{text-align:center;padding:5rem 0}
.panier-vide .emoji-grand{font-size:3.6rem;margin-bottom:1.2rem}

/* ---------- Formulaires génériques ---------- */
.bloc-form{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon-l);padding:2.6rem}
.groupe-champ{margin-bottom:1.4rem}
.groupe-champ label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.5rem;color:var(--vert-950)}
.groupe-champ label .oblig{color:var(--orange-600)}
.groupe-champ input[type=text],
.groupe-champ input[type=email],
.groupe-champ input[type=tel],
.groupe-champ input[type=number],
.groupe-champ select,
.groupe-champ textarea{
  width:100%;padding:.85rem 1.05rem;border:1.4px solid var(--ligne);border-radius:var(--rayon-s);
  background:var(--creme);transition:border-color .2s ease, background .2s ease;
}
.groupe-champ input:focus,.groupe-champ select:focus,.groupe-champ textarea:focus{
  outline:none;border-color:var(--vert-600);background:var(--papier);
}
.groupe-champ textarea{resize:vertical;min-height:110px}
.aide-champ{font-size:.78rem;color:var(--encre-doux);margin-top:.4rem}
.groupe-champ input.champ-invalide,
.groupe-champ select.champ-invalide,
.groupe-champ textarea.champ-invalide{border-color:#c0392b;background:rgba(192,57,43,.05)}
.aide-champ-erreur{color:#c0392b}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

.grille-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.case-choix{
  display:flex;align-items:center;gap:.6rem;border:1.4px solid var(--ligne);border-radius:var(--rayon-s);
  padding:.75rem .9rem;font-size:.88rem;font-weight:600;transition:all .2s ease;cursor:pointer;
}
.case-choix:hover{border-color:var(--vert-500)}
.case-choix input{accent-color:var(--vert-700)}
.case-choix:has(input:checked){background:var(--vert-50);border-color:var(--vert-700);color:var(--vert-900)}

.radio-carte{
  border:1.4px solid var(--ligne);border-radius:var(--rayon-m);padding:1rem 1.2rem;
  display:flex;align-items:center;gap:.8rem;font-weight:700;cursor:pointer;transition:all .2s ease;
}
.radio-carte:has(input:checked){border-color:var(--vert-700);background:var(--vert-50)}

/* ---------- Formulaire fournisseur multi-étapes ---------- */
.assistant-form{max-width:760px;margin-inline:auto}
.jauge-etapes{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.6rem;position:relative}
.jauge-etapes::before{
  content:"";position:absolute;top:19px;left:19px;right:19px;height:2px;background:var(--ligne);z-index:0;
}
.jauge-progression{position:absolute;top:19px;left:19px;height:2px;background:var(--orange-500);z-index:1;transition:width .4s ease}
.point-etape{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.point-etape .rond{
  width:38px;height:38px;border-radius:50%;background:var(--papier);border:2px solid var(--ligne);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--encre-doux);transition:all .3s ease;
}
.point-etape span{font-size:.7rem;font-weight:700;color:var(--encre-doux);text-align:center;max-width:80px}
.point-etape.actif .rond{border-color:var(--orange-500);color:var(--orange-700);background:var(--orange-100)}
.point-etape.complet .rond{background:var(--vert-800);border-color:var(--vert-800);color:var(--blanc)}
.point-etape.actif span{color:var(--vert-950)}

.panneau-etape{display:none;animation:apparition .4s ease}
.panneau-etape.actif{display:block}
@keyframes apparition{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.nav-form{display:flex;justify-content:space-between;margin-top:2rem}
.recap-final{background:var(--vert-50);border-radius:var(--rayon-m);padding:1.6rem;margin-top:1rem}
.recap-final dl{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem .8rem;font-size:.88rem}
.recap-final dt{color:var(--encre-doux);font-weight:600}
.recap-final dd{font-weight:700;color:var(--vert-950)}

/* ---------- Cartes info (contact / à propos) ---------- */
.grille-contact{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem}
.carte-contact{
  background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon-m);padding:1.6rem 1.7rem;
  display:flex;gap:1rem;margin-bottom:1rem;
}
.carte-contact .icone{width:46px;height:46px;border-radius:50%;background:var(--orange-100);color:var(--orange-700);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.carte-contact h4{font-size:1rem;margin-bottom:.3rem}
.carte-contact p,.carte-contact a{font-size:.9rem;color:var(--encre-doux)}
.carte-contact a:hover{color:var(--orange-700)}
/* Le CTA "Découvrir nos produits" de la page Contact est un <a class="bouton
   bouton-plein"> à l'intérieur d'une .carte-contact : la règle générale
   ci-dessus (.carte-contact a) est plus spécifique que .bouton-plein et
   écrasait son color:var(--blanc), rendant le texte presque invisible sur le
   fond vert plein. Sélecteur ciblé sur ce bouton précis uniquement, sans
   toucher aux autres liens de .carte-contact ni à .bouton-plein ailleurs. */
.carte-contact a.bouton-plein{color:var(--blanc)}
.carte-contact a.bouton-plein:hover{color:var(--blanc)}

.accordeon-item{border-bottom:1px solid var(--ligne)}
.accordeon-entete{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;font-weight:700;font-size:1.02rem;color:var(--vert-950)}
.accordeon-entete .plus{font-size:1.4rem;color:var(--orange-500);transition:transform .3s ease}
.accordeon-item.ouvert .plus{transform:rotate(45deg)}
.accordeon-corps{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordeon-corps p{padding-bottom:1.4rem;color:var(--encre-doux);max-width:70ch}

/* ---------- Bannière page (à propos, mentions...) ---------- */
.banniere-page{background:var(--vert-950);color:var(--blanc);padding:3.4rem 0;text-align:center}
.banniere-page h1{color:var(--blanc)}
.banniere-page .filariane{justify-content:center;display:flex;color:#c9d8c4}
.banniere-page .filariane a{color:#c9d8c4}

/* ---------- Toast panier ---------- */
.toast{
  position:fixed;bottom:26px;right:26px;background:var(--vert-950);color:var(--blanc);
  padding:1rem 1.4rem;border-radius:var(--rayon-m);box-shadow:var(--ombre-l);
  display:flex;align-items:center;gap:.8rem;transform:translateY(30px);opacity:0;
  transition:all .35s cubic-bezier(.2,.8,.2,1);z-index:999;pointer-events:none;
}
.toast.visible{transform:translateY(0);opacity:1}
.toast .rond{width:34px;height:34px;border-radius:50%;background:var(--orange-500);display:flex;align-items:center;justify-content:center;color:var(--vert-950);font-weight:800}

/* ---------- Bouton WhatsApp flottant ---------- */
.flotte-whatsapp{
  position:fixed;bottom:26px;left:26px;width:58px;height:58px;border-radius:50%;
  background:#1e9e5b;display:flex;align-items:center;justify-content:center;box-shadow:var(--ombre-l);
  z-index:998;animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,158,91,.4)}50%{box-shadow:0 0 0 12px rgba(30,158,91,0)}}
.flotte-whatsapp svg{width:28px;height:28px;color:#fff}

/* ---------- Apparition au scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delai-1{transition-delay:.08s}
.reveal-delai-2{transition-delay:.16s}
.reveal-delai-3{transition-delay:.24s}
.reveal-delai-4{transition-delay:.32s}

/* ---------- Menu mobile ---------- */
.panneau-mobile{
  position:fixed;inset:0 0 0 auto;width:min(340px,86%);background:var(--papier);z-index:200;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);padding:1.6rem;
  box-shadow:var(--ombre-l);overflow-y:auto;
}
.panneau-mobile.ouvert{transform:translateX(0)}
.voile{position:fixed;inset:0;background:rgba(14,41,19,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .35s ease}
.voile.visible{opacity:1;pointer-events:auto}
.panneau-mobile-entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem}
.panneau-mobile nav a{display:block;padding:.9rem 0;font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--ligne)}

/* ---------- Responsive ---------- */
/* Paliers : 0-479 (mobile), 480-767, 768-1023 (tablette), 1024-1279, 1280-1439, 1440+ */

@media (max-width:1279px){
  .produit-grille{gap:2.4rem}
}

@media (max-width:1180px){
  .grille-produits{grid-template-columns:repeat(3,1fr)}
  .grille-categories{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1080px){
  .grille-produits{grid-template-columns:repeat(3,1fr)}
  .grille-categories{grid-template-columns:repeat(3,1fr)}
  .produit-grille{grid-template-columns:1fr;gap:2rem}
  .panier-grille{grid-template-columns:1fr}
  .grille-avis,.etapes,.etapes-cinq{grid-template-columns:repeat(2,1fr)}
  .grille-actus{grid-template-columns:repeat(2,1fr)}
  .mission{grid-template-columns:1fr;padding:clamp(1.8rem,4vw,2.6rem)}
  .grille-contact{grid-template-columns:1fr}
  .cta-fournisseur{grid-template-columns:1fr;padding:clamp(1.8rem,5vw,3.4rem)}
  .cta-devis{padding:clamp(1.8rem,5vw,3.4rem)}
  .recap-panier{position:static;top:auto}
}

@media (max-width:1023px){
  section{padding:clamp(2.6rem,6vw,5.2rem) 0}
  .produit-attributs{grid-template-columns:repeat(3,1fr)}
  .nav-principale{display:none}
  .bouton-menu-mobile{display:flex}
  /* Le bloc newsletter (texte + formulaire côte à côte) débordait déjà à 768px :
     .form-newsletter imposait min-width:380px alors que le texte à côté a lui
     aussi une largeur minimale de contenu, ce qui dépasse la largeur disponible
     bien avant le point de rupture mobile (760px) ci-dessous. Empilé dès 1023px
     (tablette comprise), en ligne seulement à partir de 1024px où la place ne
     manque plus (vérifié à 1024 et 1440px). */
  .newsletter{flex-direction:column;text-align:center;padding:2.2rem 1.8rem}
  .form-newsletter{
    min-width:0;width:100%;
    flex-direction:column;
    /* Empile champs + bouton en pleine largeur : sans cette règle, les 3 enfants
       flex (nom, e-mail, bouton) gardaient leur largeur de contenu par défaut en
       ligne et débordaient de la carte sur mobile au lieu de s'empiler. */
  }
  .form-newsletter input{width:100%;box-sizing:border-box}
}

@media (max-width:760px){
  .hero-grille{grid-template-columns:1fr}
  .hero-visuel{order:-1}
  .grille-produits{grid-template-columns:repeat(2,1fr)}
  .grille-categories{grid-template-columns:repeat(2,1fr)}
  .pied-grille{grid-template-columns:1fr 1fr;row-gap:2.2rem}
  .deux-colonnes{grid-template-columns:1fr}
  .grille-avis,.etapes,.etapes-cinq{grid-template-columns:1fr}
  .grille-actus{grid-template-columns:1fr}
  .barre-annonce .enveloppe-large{gap:1.4rem;font-size:.72rem}
  .bas-pied{flex-direction:column;gap:.6rem;text-align:center}
  .bloc-form{padding:clamp(1.4rem,5vw,2.6rem)}
  .produit-attributs{grid-template-columns:repeat(2,1fr)}
  .grille-choix{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ---------- 767px et moins : téléphones standards ---------- */
@media (max-width:767px){
  html{-webkit-text-size-adjust:100%}
  .enveloppe,.enveloppe-large{width:min(100%,92%)}
  .entete-inner{padding:.8rem 0;gap:1rem}
  .marque img{height:38px}
  .marque-texte b{font-size:1.05rem}
  .entete-actions{gap:.5rem}
  .icone-action,.bouton-menu-mobile{width:44px;height:44px}
  .filariane{padding:1.1rem 0 0;font-size:.8rem}
  .hero{padding:2.6rem 0 3rem}
  .hero p.lead{max-width:none}
  .hero-cta{width:100%}
  .hero-cta .bouton{flex:1 1 auto;justify-content:center}
  .flottant{display:none}
  .confiance-grille{justify-content:center;text-align:center;gap:1rem 1.6rem}
  .entete-section{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.8rem}
  .mission-chiffres{gap:1rem}
  .chiffre b{font-size:clamp(1.6rem,7vw,2.2rem)}
  .etape{padding:1.6rem 1.2rem}
  .produit-grille{padding:1.2rem 0 2.6rem}
  .produit-actions{flex-direction:column}
  .produit-actions .bouton{width:100%}
  .produit-actions-secondaires .bouton{flex-basis:100%}
  .onglets{gap:1.2rem;overflow-x:auto;white-space:nowrap}
  .mini-garanties{gap:1rem}
  .ligne-panier{
    grid-template-columns:none;
    display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  }
  .ligne-panier img{width:64px;height:64px;flex:0 0 auto}
  .ligne-panier > div:nth-child(2){flex:1 1 auto;min-width:140px}
  .ligne-panier .stepper{order:3}
  .ligne-panier .prix{order:4}
  .ligne-panier .supprimer-ligne{order:5;margin-left:auto}
  .champ-promo{flex-direction:column}
  .champ-promo .bouton{width:100%}
  .methodes-paiement{justify-content:center}
  .assistant-form .point-etape span{display:none}
  .jauge-etapes{margin-bottom:1.8rem}
  .grille-contact{gap:1.6rem}
  .carte-contact{padding:1.3rem}
  .newsletter h3{font-size:1.25rem}
  .stepper button,.galerie-miniatures button,.bouton-favori{min-width:44px;min-height:44px}
  .accordeon-entete{padding:1.1rem 0}
  /* Le prix (jusqu'à 6 chiffres, ex. "150 000 FCFA") pouvait se couper sur deux
     lignes faute de place depuis l'ajout du bouton œil à côté du bouton "+" :
     boutons ronds légèrement réduits (toujours ≥38px, confortable au doigt) et
     espacement resserré, pour laisser assez de largeur au prix sur une ligne. */
  .carte-produit-actions{gap:.35rem}
  .carte-produit-pied .bouton-ajout,.carte-produit-pied .bouton-voir{width:38px;height:38px}
  .carte-produit-pied .bouton-ajout svg,.carte-produit-pied .bouton-voir svg{width:15px;height:15px}
}

/* ---------- 479px et moins : petits téléphones (iPhone SE...) ---------- */
@media (max-width:479px){
  .grille-produits{grid-template-columns:1fr 1fr;gap:1rem}
  .grille-categories{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .pied-grille{grid-template-columns:1fr;row-gap:2rem}
  .produit-attributs{grid-template-columns:1fr 1fr;gap:.7rem}
  .mission-chiffres{grid-template-columns:1fr;gap:.9rem;text-align:center}
  .barre-boutique{gap:1rem}
  .recherche-boutique{min-width:0;width:100%}
  .filtres-boutique{width:100%}
  .aide-boutique{flex-direction:column;align-items:flex-start;padding:.9rem 1.1rem}
  .aide-boutique-item{flex:1 1 auto}
  .aide-boutique-lien{margin-left:0}
  .carte-produit-corps{padding:.9rem 1rem 1.1rem}
  .produit-prix-ligne .prix{font-size:1.6rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .puce{font-size:.74rem}
  .grille-choix{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}
  .selecteur-quantite{flex-wrap:wrap}
  /* Palier le plus étroit (iPhone SE...) : le prix est légèrement réduit pour
     limiter la fréquence du repli des boutons sous le prix (voir règle globale
     .carte-produit-pied{flex-wrap:wrap}, qui garantit sur TOUS les paliers que
     le prix ne se coupe jamais : quand il n'y a pas la place, c'est le groupe
     de boutons qui passe sous le prix plutôt que l'inverse). Aucun impact sur
     les prix courts (2-3 chiffres, l'immense majorité du catalogue), qui
     restent alignés sur la même ligne exactement comme avant. */
  .carte-produit-actions{gap:.3rem}
  .carte-produit-pied .prix{font-size:1.08rem}
  .carte-produit-pied .prix small{font-size:.64rem}
  /* Badge "SÉLECTION AGRISTORE" trop massif sur mobile (aplat de couleur plein,
     texte imposant) : allégé en contour fin + fond translucide, uniquement sous
     ce palier — inchangé sur desktop/tablette. */
  .etiquette{
    background:rgba(255,253,248,.9);color:var(--vert-900);
    border:1px solid var(--vert-900);
    font-size:.6rem;font-weight:700;padding:.22rem .5rem;
    /* Sur les cartes les plus étroites (grille à 2 colonnes), le texte du badge
       peut être plus large que l'espace disponible avant le bouton favori
       (haut-droite de l'image) : tronqué avec "…" plutôt que de risquer un
       chevauchement, la largeur réservée (3.6rem) correspond au bouton favori
       (44px) + sa marge. */
    max-width:calc(100% - 4.6rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .etiquette.promo{background:rgba(255,253,248,.9);color:var(--orange-700);border-color:var(--orange-500)}
}