/* ================= Bélier d'Or — feuille de style commune ================= */
:root {
  --vert: #17803f;
  --vert-fonce: #123c25;
  --vert-clair: #eafaf0;
  --or: #f2a71b;
  --creme: #f7efdc;
  /* Charte « accueil » (index.html) — centralisée ici : avant, ces
     variables n'étaient définies que dans le <style> local de la page. */
  --vert-agrim: #2d6a3e;
  --brun: #6b4f2a;
  --brun-clair: #8a6d42;
  --creme-fond: #faf6ec;
  --creme-carte: #fdfaf3;
  --texte: #112233;
  --gris: #5a6b7a;
  --gris-clair: #7a8a96;
  --bordure: #e4e9e6;
  --fond: #f6f8f7;
  --rouge: #c0392b;
  --rouge-clair: #fdecec;
  --ombre: 0 2px 10px rgba(11, 43, 26, .08);
  --ombre-forte: 0 8px 28px rgba(11, 43, 26, .16);
  --rayon: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---------------------------------------------------------------- bandeau */
.bandeau-info {
  background: var(--vert-fonce);
  color: #cfe8da;
  font-size: 12.5px;
  padding: 7px 0;
}

.bandeau-info .conteneur {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- entête */
/* Hauteur laissée au contenu. Elle était figée à 150 px pour un en-tête
   d'une seule rangée dont le contenu n'en occupait que 100 — le compte ne
   tombait plus juste dès qu'on lui ajoutait la rangée des rubriques. */
.entete {
  background: #fff;
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 40;
}

.entete .conteneur {
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 100px;
}

/* Rangée des rubriques, sous le logo et les actions. */
.barre-nav {
  border-top: 1px solid var(--bordure);
  background: #fbfcfb;
}

.barre-nav .conteneur {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
}

/* Le logo officiel fait 1574 x 522, soit ~3:1 — un rapport different de
   l'ancien SVG (~4:1). Une largeur figee l'ecraserait : on ne contraint
   donc que la hauteur et on laisse la largeur suivre les proportions. */
.logo-image {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.logo-slogan-cote {
  font-size: 11px;
  font-style: italic;
  color: #8a6d42;
  border-left: 1px solid #ddd6c4;
  padding-left: 5px;
  margin-left: 3px;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .logo-slogan-cote {
    display: none;
  }
}

@media (max-width: 900px) {
  .logo-image {
    height: 40px;
    width: auto;
  }
  .entete .conteneur {
    min-height: 74px;
  }
}

.logo-rond {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.logo-nom {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: #2d6a3e;
  letter-spacing: .5px;
}

.logo-slogan {
  font-size: 8.5px;
  color: #8a6d42;
  letter-spacing: 1.1px;
}

.navigation {
  display: flex;
  gap: 22px;
  margin-left: 18px;
}

.navigation a {
  font-size: 14px;
  /* 600 plutôt que la graisse par défaut : à 14 px sur fond blanc, un 400
     paraît délavé et le menu se lit mal en plein jour — ce qui est la
     situation normale d'un téléphone en Côte d'Ivoire. */
  font-weight: 600;
  color: #33454f;
  padding: 6px 0;
  border-bottom: 3px solid transparent;
}

.navigation a:hover {
  color: var(--vert);
}

.navigation a.actif {
  color: var(--vert);
  font-weight: 600;
  border-bottom-color: var(--vert);
}

.entete-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bouton-panier {
  position: relative;
  background: #f2f5f3;
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bouton-panier:hover {
  background: #e6ebe8;
}

.bouton-appel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf3ed;
  color: #2d6a3e;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  transition: background .18s ease;
}

.bouton-appel:hover {
  background: #d8e9de;
}

.pastille {
  background: var(--or);
  color: #123;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

/* --------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 24px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
}

.bouton:active {
  transform: translateY(1px);
}

.bouton-principal {
  background: var(--vert);
  color: #fff;
}

.bouton-principal:hover {
  background: #13692f;
}

.bouton-or {
  background: var(--or);
  color: #123;
  font-weight: 700;
}

.bouton-or:hover {
  background: #dd9612;
}

.bouton-contour {
  background: transparent;
  border: 1.6px solid var(--vert);
  color: var(--vert);
}

.bouton-contour:hover {
  background: var(--vert-clair);
}

.bouton-blanc {
  background: #fff;
  border: 1.6px solid #fff;
  color: var(--vert);
}

.bouton-whatsapp {
  background: #25d366;
  color: #fff;
}

.bouton-whatsapp:hover {
  background: #1fb955;
}

.bouton-fantome {
  background: #f2f5f3;
  color: #33454f;
}

.bouton-danger {
  background: var(--rouge-clair);
  color: var(--rouge);
}

.bouton-petit {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 18px;
}

.bouton:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bouton-large {
  width: 100%;
}

/* ------------------------------------------------------------------ héros */
.heros {
  background: linear-gradient(120deg, #0f5f31 0%, #17803f 55%, #2fa15c 100%);
  color: #fff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.heros::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 460px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}

.heros .conteneur {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.etiquette {
  display: inline-block;
  background: rgba(255, 255, 255, .18);
  border-radius: 14px;
  padding: 5px 14px;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.heros h1 {
  font-size: 42px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.heros h1 .or {
  color: #ffe0a3;
}

.heros p {
  font-size: 16px;
  color: #d9f0e3;
  margin-bottom: 26px;
  max-width: 480px;
}

.heros-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- sac SVG */
.sac {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ réassurance */
.reassurance {
  background: var(--creme);
  padding: 20px 0;
}

.reassurance .conteneur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.reassurance-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.puce-verte {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0cfa4;
  display: grid;
  place-items: center;
  color: var(--vert);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.reassurance-item strong {
  display: block;
  font-size: 13.5px;
}

.reassurance-item span {
  font-size: 12px;
  color: #8a7448;
}

/* --------------------------------------------------------------- sections */
.section {
  padding: 46px 0;
}

.section-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-entete h2 {
  font-size: 24px;
}

.section-entete p {
  font-size: 13.5px;
  color: var(--gris-clair);
  margin-top: 4px;
}

.lien-vert {
  color: var(--vert);
  font-weight: 600;
  font-size: 13.5px;
}

/* --------------------------------------------------------------- produits */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.carte-produit {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}

.carte-produit:hover {
  box-shadow: var(--ombre-forte);
  transform: translateY(-2px);
}

.produit-image {
  background: linear-gradient(180deg, #f7efdc, #e6d7b6);
  height: 230px;
  display: grid;
  place-items: center;
  position: relative;
}

.produit-image .sac {
  max-width: 96px;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--vert);
  color: #fff;
  border-radius: 12px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
}

.badge.or {
  background: var(--or);
  color: #123;
}

/* Badge PROMO : distinct du badge marketing (PREMIUM, NOUVEAU…),
   collé en haut à droite pour ne pas se superposer. */
.badge-promo {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  background: var(--or);
  color: #123;
  border-radius: 12px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: 0 2px 8px rgba(242, 167, 27, .35);
}

.puce-promo {
  background: #fdf1e4;
  color: #a9670c;
}

/* Le bloc blanc etait genereux au point de dominer la carte : la photo
   du produit doit rester ce qu'on voit en premier. Marges et espacements
   resserres, sans coller le texte aux bords. */
.produit-corps {
  padding: 11px 13px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.produit-nom {
  font-size: 15px;
  font-weight: 700;
}

.produit-detail {
  font-size: 12.5px;
  color: var(--gris-clair);
}

.produit-prix-ligne {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 5px;
}

.produit-prix {
  font-size: 20px;
  font-weight: 700;
  color: var(--vert);
}

.produit-prix-barre {
  font-size: 12.5px;
  color: #9aa8b2;
  text-decoration: line-through;
}

.puce {
  display: inline-block;
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

.puce-stock {
  background: var(--vert-clair);
  color: var(--vert);
}

.puce-limite {
  background: #fff3e0;
  color: #a9670c;
}

.puce-rupture {
  background: var(--rouge-clair);
  color: var(--rouge);
}

.produit-pied {
  padding: 0 13px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ------------------------------------------------------- panier (tiroir) */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 18, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  /* Doit rester AU-DESSUS de la jumbobar mobile (z-index 9999, plus bas
     dans ce fichier) : sinon ses icônes passent par-dessus le panier
     ouvert et bloquent le clic sur « Commander ». */
  z-index: 10060;
}

.voile.ouvert {
  opacity: 1;
  pointer-events: auto;
}

.tiroir {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  z-index: 10070;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .16);
}

.tiroir.ouvert {
  transform: translateX(0);
}

.tiroir-entete {
  padding: 18px 20px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tiroir-entete h3 {
  font-size: 17px;
}

.fermer {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--gris);
  line-height: 1;
}

.tiroir-corps {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.tiroir-pied {
  border-top: 1px solid var(--bordure);
  padding: 18px 20px;
  background: #fafbfa;
}

/* Choix du mode de réception ajouté au parcours WhatsApp de la sélection. */
.selection-livraison {
  border-top: 1px solid var(--bordure);
  margin-top: 8px;
  padding: 16px 0 4px;
}
.selection-livraison h4 {
  color: var(--vert-fonce);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.selection-livraison-intro,
.selection-livraison-note {
  color: var(--gris);
  font-size: 11.5px;
  line-height: 1.45;
}
.selection-livraison-intro { margin-bottom: 10px; }
.selection-livraison-note { margin: 8px 0 0; }

.modes-livraison-selection { display: grid; gap: 8px; }
.mode-livraison-selection {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mode-livraison-selection:hover { border-color: var(--vert); }
.mode-livraison-selection.choisi {
  border-color: var(--vert);
  background: var(--vert-clair);
  box-shadow: 0 0 0 1px var(--vert) inset;
}
.mode-livraison-selection input,
.point-retrait-demande input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--vert);
}
.mode-livraison-selection > span,
.point-retrait-demande-texte { display: grid; gap: 2px; }
.mode-livraison-selection strong,
.point-retrait-demande strong { font-size: 12.5px; line-height: 1.35; }
.mode-livraison-selection small,
.point-retrait-demande-texte > span {
  color: var(--gris);
  font-size: 11px;
  line-height: 1.4;
}

.options-livraison-selection { margin-top: 12px; }
.options-livraison-selection > label {
  display: block;
  margin: 0 0 6px;
  color: #33454f;
  font-size: 12px;
  font-weight: 600;
}
.options-livraison-selection select,
.options-livraison-selection input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid #d5dcd8;
  border-radius: 8px;
  background: #fff;
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
}
.options-livraison-selection select:focus,
.options-livraison-selection input[type="text"]:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(23, 128, 63, .12);
}
#ville-autre-livraison-wrap { margin-top: 10px; }
#ville-autre-livraison-wrap label {
  display: block;
  margin-bottom: 6px;
  color: #33454f;
  font-size: 12px;
  font-weight: 600;
}
.points-retrait-selection { display: grid; gap: 8px; }
.point-retrait-groupe { display: grid; gap: 6px; }
.point-retrait-ville {
  margin-top: 4px;
  color: var(--gris-clair);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.point-retrait-demande {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.point-retrait-demande:hover { border-color: var(--vert); }
.point-retrait-demande.choisi {
  border-color: var(--vert);
  background: var(--vert-clair);
}
.paiement-demande-selection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
}
.paiement-demande-selection h5 {
  margin-bottom: 8px;
  color: #33454f;
  font-size: 12px;
  font-weight: 700;
}
.moyens-paiement-selection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.moyen-paiement-demande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 5px;
  border: 1px solid var(--bordure);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.moyen-paiement-demande:hover { border-color: var(--vert); }
.moyen-paiement-demande.choisi {
  border-color: var(--vert);
  background: var(--vert-clair);
  box-shadow: 0 0 0 1px var(--vert) inset;
}
.moyen-paiement-demande input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--vert);
}
.moyen-paiement-demande span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.etat-livraison-selection,
.aide-demande-whatsapp {
  margin: 9px 0 0;
  color: var(--gris-clair);
  font-size: 11px;
  line-height: 1.45;
}
.bouton-inactif,
.bouton-inactif:hover {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.ligne-panier {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f3f1;
}

.ligne-panier .vignette {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f7efdc, #e6d7b6);
  display: grid;
  place-items: center;
}

.ligne-panier .vignette .sac {
  max-width: 34px;
}

.ligne-infos {
  flex: 1;
  min-width: 0;
}

.ligne-infos strong {
  font-size: 13.5px;
  display: block;
}

.ligne-infos span {
  font-size: 12px;
  color: var(--gris-clair);
}

.compteur {
  display: inline-flex;
  align-items: center;
  background: #f2f5f3;
  border-radius: 8px;
  margin-top: 6px;
}

.compteur button {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 15px;
  color: var(--gris);
}

.compteur button:hover {
  color: var(--vert);
}

.compteur span {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}

.ligne-total {
  text-align: right;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}

.lien-retirer {
  background: none;
  border: none;
  color: var(--rouge);
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 0;
}

.recap {
  background: var(--creme);
  border-radius: var(--rayon);
  padding: 16px;
}

.recap-ligne {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #5a4a25;
  padding: 5px 0;
}

.recap-ligne.remise span:last-child {
  color: var(--vert);
  font-weight: 600;
}

.recap-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #e0cfa4;
  margin-top: 8px;
  padding-top: 12px;
}

.recap-total strong {
  font-size: 15px;
}

.recap-total b {
  font-size: 21px;
  color: var(--vert);
}

/* ------------------------------------------------------------ formulaires */
.champ {
  margin-bottom: 14px;
}

.champ label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #33454f;
  margin-bottom: 6px;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  border: 1px solid #d5dcd8;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
  background: #fff;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(23, 128, 63, .12);
}

.champ .aide {
  font-size: 11.5px;
  color: var(--gris-clair);
  margin-top: 5px;
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 1.6px solid #d5dcd8;
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}

.option:hover {
  border-color: #b6c6bd;
}

.option.choisi {
  border-color: var(--vert);
  background: var(--vert-clair);
}

.option input {
  accent-color: var(--vert);
  width: 17px;
  height: 17px;
}

.option .option-texte {
  flex: 1;
}

.option strong {
  display: block;
  font-size: 13.5px;
}

.option span {
  font-size: 11.5px;
  color: var(--gris);
}

.option .option-prix {
  font-weight: 700;
  color: var(--vert);
  font-size: 13.5px;
}

.operateurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.operateur {
  border: 1.6px solid #d5dcd8;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: all .15s ease;
}

.operateur:hover {
  border-color: #b6c6bd;
}

.operateur.choisi {
  border-color: var(--vert);
  background: var(--vert-clair);
}

.operateur .marque {
  display: inline-block;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.operateur small {
  display: block;
  font-size: 11px;
  color: var(--gris);
}

/* --------------------------------------------------------------- messages */
.message {
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.message-erreur {
  background: var(--rouge-clair);
  color: var(--rouge);
  border: 1px solid #f5c6c2;
}

.message-succes {
  background: var(--vert-clair);
  color: #14713b;
  border: 1px solid #b7e2c8;
}

.message-info {
  background: #eef4fb;
  color: #2b4f9e;
  border: 1px solid #cadbf1;
}

.message-alerte {
  background: #fdf1e4;
  color: #8a5407;
  border: 1px solid #eccb96;
}

/* ------------------------------------------------------------------ étapes */
.etapes {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 30px;
}

.etape {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.etape:last-child {
  flex: 0;
}

.etape-rond {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d5dcd8;
  color: #9aa8b2;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.etape.faite .etape-rond {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
}

.etape.active .etape-rond {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
}

.etape-nom {
  font-size: 13px;
  color: var(--gris-clair);
  white-space: nowrap;
}

.etape.active .etape-nom,
.etape.faite .etape-nom {
  color: var(--vert);
  font-weight: 600;
}

.etape-trait {
  flex: 1;
  height: 2px;
  background: #d5dcd8;
  margin: 0 12px;
}

.etape.faite .etape-trait {
  background: var(--vert);
}

/* ------------------------------------------------------------------- pied */
.pied {
  background: #0f2e1d;
  color: #9dbfab;
  padding: 44px 0 26px;
  margin-top: 50px;
}

.pied .conteneur {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 30px;
}

.pied h4 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
}

/* Le pied cumulait deux défauts : police fine ET faible contraste
   (#9dbfab sur #0f2e1d). Épaissir sans éclaircir n'aurait corrigé qu'une
   moitié du problème. */
.pied a,
.pied p {
  font-size: 13px;
  font-weight: 500;
  color: #bcd8c8;
  display: block;
  margin-bottom: 7px;
}

.pied a:hover {
  color: #fff;
}

/* ------------------------------------- réseaux et paiement (pied) */

/* Deux informations de même nature côte à côte : « où nous trouver » et
   « comment régler ». Elles passent l'une sous l'autre sous 760 px. */
.pied-bandeau {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 48px;
  align-items: start;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #1c4a31;
}

@media (max-width: 760px) {
  .pied-bandeau { grid-template-columns: 1fr; gap: 22px; }
}

.pied-bandeau-part h4 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7fae93;
  margin: 0 0 11px;
}

.pied-paiement {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Pastille blanche derrière chaque logo : quatre des cinq images ont un
   fond blanc opaque et apparaîtraient sinon comme des rectangles mal
   détourés sur le vert foncé. C'est aussi ainsi que tous les sites
   marchands présentent ces logos. */
/* Même gabarit que les icônes de réseaux sociaux (.pied-reseaux) : rond,
   36 px. Les deux rangées se lisent alors comme une seule famille, ce
   qu'elles sont — c'est la bande « Retrouvez-nous sur / Modes de paiement »
   qui les met côte à côte.

   Aucun fond ici : chaque image porte déjà le sien, choisi par lisibilité
   (cyan sous le manchot Wave dont le mot est blanc, ardoise sous le
   pictogramme « espèces » au trait blanc, blanc pour Orange et Moov, et
   pour MTN son propre jaune de marque). Une pastille blanche uniforme
   ferait disparaître les deux premiers. */
.mode-paiement {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.mode-paiement img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dans le tunnel de commande, ces mêmes logos ne décorent pas : ils
   servent à choisir. La cible reste confortable au pouce, et l'écart
   reprend celui qu'avaient les anciennes pastilles nommées. */
.operateur .mode-paiement {
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
}

/* Repli quand le logo manque ou ne charge pas : la pastille colorée
   d'origine, avec le nom. Jamais d'image cassée. */
.mode-paiement-repli {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pied-paiement-note {
  font-size: 12.5px !important;
  color: #9dbfab !important;
  margin-top: 12px !important;
  max-width: 52ch;
}

/* ------------------------------------------------- infolettre (pied) */

.pied-infolettre {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid rgba(201, 169, 97, .42);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(201,169,97,.12));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pied-infolettre-icone {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--or);
  color: var(--vert-fonce);
  font-size: 20px;
  font-weight: 800;
}
.pied-infolettre-texte { display: grid; gap: 4px; max-width: 42ch; }
.pied-infolettre-texte strong { font-size: 16px; }
.pied-infolettre-texte span { font-size: 12.5px; line-height: 1.45; opacity: .86; }

.pied-infolettre-champ { display: flex; gap: 9px; flex: 1 1 330px; flex-wrap: wrap; }

.pied-infolettre-champ input {
  min-width: 230px;
  flex: 1;
  padding: 11px 15px;
  border: 1px solid #2a6242;
  border-radius: 24px;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 13.5px;
}

.pied-infolettre-champ input::placeholder { color: rgba(255, 255, 255, .45); }
.pied-infolettre-champ input:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .2);
}

.pied-infolettre-retour {
  flex-basis: 100%;
  font-size: 12.5px;
  min-height: 1.2em;
  opacity: .85;
}
.pied-infolettre-retour.succes { color: #7fe0a4; opacity: 1; }
.pied-infolettre-retour.erreur { color: #ffb3ab; opacity: 1; }

.pied-bas {
  border-top: 1px solid #1c4a31;
  margin-top: 26px;
  padding-top: 18px;
  font-size: 12px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
}

/* ------------------------------------------------- points de retrait */

/* Une carte par emplacement plutot qu'un menu deroulant : le client doit
   voir l'adresse et les horaires AVANT de choisir, pas apres. */
#liste-retrait { display: grid; gap: 9px; max-height: 340px; overflow-y: auto;
  padding-right: 4px; }

.pr-ville {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-top: 6px;
}
.pr-ville:first-child { margin-top: 0; }
.pr-ville span { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.point-retrait {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 13px 15px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}

.point-retrait:hover { border-color: var(--vert); }
.point-retrait.choisi { border-color: var(--vert); background: var(--vert-clair); }
.point-retrait input { margin-top: 3px; accent-color: var(--vert); flex-shrink: 0; }

/* Septembre 2026 — la liste vit dans un .champ, dont les règles génériques
   (label en bloc, champ à 100 % de large) écrasaient la carte : le bouton
   radio se retrouvait centré AU-DESSUS du nom du point, et tout le texte en
   gras. On rend à la carte sa mise en page. */
.champ label.point-retrait {
  display: flex;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}
.champ .point-retrait input {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.pr-texte { display: grid; gap: 2px; }
.pr-texte strong { font-size: 14px; }
.pr-adresse { font-size: 12.5px; color: var(--gris); }
.pr-detail { font-size: 11.5px; color: var(--gris-clair); }

/* --------------------------------------------------------- favoris */

/* Le cœur se pose sur la photo, en haut à droite — l'endroit où tous les
   sites marchands l'ont mis, donc celui où l'œil le cherche. Fond opaque :
   un cœur posé à même une photo claire devient invisible. */
.bouton-favori {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--gris-clair);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  transition: transform .13s ease, color .13s ease, border-color .13s ease;
}

.bouton-favori:hover { transform: scale(1.1); color: var(--rouge); border-color: var(--rouge); }
.bouton-favori.actif { color: var(--rouge); border-color: var(--rouge); }
.bouton-favori:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* Sur la fiche produit, le cadre de l'image est plus grand : on décale
   pour ne pas chevaucher le badge, qui occupe le coin gauche. */
.pd-image .bouton-favori { top: 14px; right: 14px; width: 40px; height: 40px; }

/* Liste des favoris dans l'espace client */
.grille-favoris {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.carte-favori {
  border: 1px solid var(--bordure);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.favori-visuel {
  display: grid;
  place-items: center;
  height: 150px;
  background: linear-gradient(180deg, #f7efdc, #e6d7b6);
}
.favori-visuel img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
.favori-visuel .sac { max-height: 128px; }

.favori-corps { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.favori-nom { font-size: 14px; font-weight: 700; color: var(--texte); }
.favori-nom:hover { color: var(--vert); }
.favori-detail { font-size: 12px; color: var(--gris-clair); }
.favori-prix { font-size: 16px; font-weight: 800; color: var(--vert); margin: 4px 0 8px; }
.favori-rupture {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rouge);
  padding: 7px 0;
  text-align: center;
}

/* -------------------------------------------- bouton « Se connecter » */

.compte-bloc { position: relative; }

.bouton-compte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--bordure);
  border-radius: 22px;
  background: #fff;
  color: var(--texte);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}

.bouton-compte:hover,
.bouton-compte.ouvert { border-color: var(--vert); background: var(--vert-clair); }
.bouton-compte .compte-chevron { transition: transform .15s ease; opacity: .6; }
.bouton-compte.ouvert .compte-chevron { transform: rotate(180deg); }

.menu-compte {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 60;
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 13px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
  overflow: hidden;
  animation: menu-compte-apparait .14s ease;
}

/* `hidden` vaut « display: none » dans la feuille du navigateur, soit la
   MÊME spécificité qu'une classe. Sans cette règle plus spécifique, le
   « position: absolute » ci-dessus laisserait le menu ouvert en
   permanence — le piège déjà rencontré sur le panneau de discussion. */
.menu-compte[hidden] { display: none; }

@keyframes menu-compte-apparait {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.menu-compte-entete {
  padding: 13px 16px;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  display: grid;
  gap: 2px;
}
.menu-compte-entete strong { font-size: 13.5px; }
.menu-compte-entete span { font-size: 11.5px; color: var(--gris-clair); }

.menu-compte a,
.menu-compte button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}

.menu-compte a:hover,
.menu-compte button:hover { background: var(--vert-clair); color: var(--vert); }
.menu-compte .ico { color: var(--gris-clair); }
.menu-compte a:hover .ico,
.menu-compte button:hover .ico { color: var(--vert); }

.menu-compte-sortie {
  border-top: 1px solid var(--bordure) !important;
  color: var(--rouge) !important;
}
.menu-compte-sortie:hover { background: #fdecec !important; color: var(--rouge) !important; }

/* Sur petit écran, le bouton se réduit à son icône : « Se connecter » en
   toutes lettres pousserait le panier hors de la barre. Le libellé reste
   annoncé aux lecteurs d'écran par aria-label. */
@media (max-width: 900px) {
  .bouton-compte { padding: 9px 10px; }
  .compte-texte,
  .bouton-compte .compte-chevron { display: none; }
  .menu-compte { min-width: 210px; }
}

/* ------------------------------------------------------------ icones */

/* Les icones suivent la couleur de l'element qui les porte et s'alignent
   sur le texte — ce qu'un emoji ne fait ni l'un ni l'autre. */
.ico { flex-shrink: 0; vertical-align: -2px; }
.bouton .ico { margin-right: 1px; }

.pastille-etat {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pastille-etat.grande { width: 22px; height: 22px; }

/* Champ de saisie avec icone : elle vit DANS le champ, ne pousse pas la
   saisie sur une autre ligne et passe au vert quand le champ a le focus. */
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone > svg {
  position: absolute;
  left: 14px;
  color: var(--gris-clair);
  pointer-events: none;
  transition: color .15s ease;
}
.champ-icone input,
.champ-icone textarea { width: 100%; padding-left: 42px; }
.champ-icone:focus-within > svg { color: var(--vert); }

.champ-icone .oeil-mdp {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  padding: 7px;
  cursor: pointer;
  color: var(--gris-clair);
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.champ-icone .oeil-mdp:hover { color: var(--vert); background: var(--vert-clair); }
.champ-icone input[type="password"] { padding-right: 44px; }

/* Marqueur « facultatif » : dire ce qui n'est PAS obligatoire evite
   qu'un client abandonne un formulaire devant un champ qu'il croit exige. */
.facultatif {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  color: var(--gris-clair);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: lowercase;
  vertical-align: 1px;
}

/* ------------------------------------------------ bouton de discussion */

.discussion {
  position: fixed;
  right: 22px;
  bottom: 80px;            /* au-dessus de la jumbobar (64px) */
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.discussion-bouton {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(23, 128, 63, .45);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}

.discussion-bouton:hover { transform: scale(1.07); background: #13692f; }
.discussion-bouton .discussion-icone-fermer { display: none; }
.discussion-bouton.ouvert .discussion-icone-ouvrir { display: none; }
.discussion-bouton.ouvert .discussion-icone-fermer { display: block; }

.discussion-choix {
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: discussion-apparait .16s ease;
}

/* L'attribut `hidden` vaut « display: none » dans la feuille du navigateur,
   soit la MEME specificite qu'une classe. Comme notre feuille est chargee
   apres, le « display: flex » ci-dessus l'emportait et le panneau restait
   ouvert en permanence. Cette regle, plus specifique, tranche. */
.discussion-choix[hidden] { display: none; }

@keyframes discussion-apparait {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.discussion-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 13px;
  border-radius: 26px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
  transition: transform .12s ease;
}

.discussion-option:hover { transform: translateX(-3px); }
.discussion-option.whatsapp { background: #25d366; }
.discussion-option.facebook { background: #1877f2; }
.discussion-option.assistant { background: var(--vert); border: none; cursor: pointer; font-family: inherit; }
.discussion-option[hidden] { display: none; }

/* --------------------------------------------------- panneau assistant */

.assistant-panneau {
  position: fixed;
  right: 22px;
  bottom: 148px;            /* au-dessus du bouton d'aide et de ses options */
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 200px));
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: discussion-apparait .16s ease;
}

.assistant-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  background: var(--vert);
  color: #fff;
}
.assistant-entete strong { display: block; font-size: 14px; }
.assistant-entete span { font-size: 11.5px; opacity: .85; }
.assistant-fermer {
  background: none; border: none; color: #fff; font-size: 26px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}

.assistant-fil {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--fond);
}

.assistant-bulle {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.assistant-bulle.robot { background: #fff; border: 1px solid var(--bordure); align-self: flex-start; }
.assistant-bulle.client { background: var(--vert); color: #fff; align-self: flex-end; }
.assistant-bulle.attente { opacity: .55; font-style: italic; }
/* Un refus (quota, service injoignable) n'est pas une réponse : il se
   distingue, sans ressembler à une panne du site. */
.assistant-bulle.avertissement { background: #fdf1e4; border-color: #f0d9a8; color: #7a5b1e; }

.assistant-saisie { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--bordure); }
.assistant-saisie input {
  flex: 1; min-width: 0; padding: 10px 13px; font-size: 13.5px;
  border: 1px solid var(--bordure); border-radius: 20px;
}
.assistant-saisie input:focus { outline: none; border-color: var(--vert); }
.assistant-saisie input:disabled { background: var(--fond); }

.assistant-note {
  font-size: 10.5px;
  color: var(--gris-clair);
  padding: 0 13px 11px;
  line-height: 1.45;
  text-align: center;
}

/* Assistant visible mais pas encore branché : on le dit franchement plutôt
   que de laisser le visiteur écrire dans le vide. */
.assistant-note.bientot {
  color: #7a5b1e;
  background: #fdf1e4;
  border-top: 1px solid #f0d9a8;
  padding: 10px 13px;
  font-size: 11.5px;
  margin: 0;
}

@media (max-width: 520px) {
  .assistant-panneau { right: 12px; left: 12px; width: auto; bottom: 140px; }
}

/* Reseaux sociaux dans le pied de page */
.pied-reseaux { display: flex; gap: 10px; margin-top: 12px; }
.pied-reseaux a,
.pied-reseaux span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background .15s ease, transform .12s ease;
}

/* Réseau annoncé mais dont l'adresse n'est pas encore connue : l'icône se
   voit, en retrait, et ne se clique pas. Un lien mort — ou pire, vers le
   compte d'un homonyme — coûterait plus qu'une icône grisée. */
.pied-reseaux span.bientot {
  opacity: .38;
  cursor: default;
}
.pied-reseaux a:hover { transform: translateY(-2px); }
.pied-reseaux a.whatsapp:hover { background: #25d366; }
.pied-reseaux a.facebook:hover { background: #1877f2; }
.pied-reseaux a.youtube:hover { background: #ff0000; }

/* ------------------------------------------------------------------- divers */
.carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 22px;
}

.vide {
  text-align: center;
  padding: 50px 20px;
  color: var(--gris-clair);
}

.vide-titre {
  font-size: 15px;
  font-weight: 600;
  color: var(--gris);
  margin-bottom: 6px;
}

.vide-texte {
  font-size: 13px;
  color: var(--gris-clair);
  margin-top: 4px;
}

.chargement {
  text-align: center;
  padding: 40px;
  color: var(--gris-clair);
  font-size: 14px;
}

@media (max-width: 900px) {
  .entete .conteneur {
    gap: 12px;
    min-height: 60px;
  }

  .logo-nom {
    font-size: 15px;
  }

  .entete-actions {
    gap: 8px;
  }

  .bouton-panier {
    padding: 8px 13px;
    font-size: 12.5px;
  }

  .bouton-appel {
    padding: 9px 12px;
  }

  .bouton-appel .tel-texte {
    display: none;
  }

  .heros {
    padding: 40px 0;
  }

  .heros .conteneur {
    grid-template-columns: 1fr;
  }

  .heros h1 {
    font-size: 32px;
  }

  .heros-illustration {
    display: none;
  }

  .reassurance .conteneur {
    grid-template-columns: 1fr 1fr;
  }

  .navigation {
    display: none;
  }

  .pied .conteneur {
    grid-template-columns: 1fr 1fr;
  }

  .duo {
    grid-template-columns: 1fr;
  }

  .etape-nom {
    display: none;
  }
}


/* ============================================================
   Ameliorations issues de l'audit
   ============================================================ */

/* --- Respiration autour des titres et sections --- */
.section-marque {
  padding: 76px 0;
}

.titre-section {
  margin-bottom: 42px;
}

.section-entete {
  margin-bottom: 30px;
}

/* --- Retour en haut --- */
.retour-haut {
  position: fixed;
  margin-bottom: 42px;
  right: 22px;
  bottom: 92px;
  z-index: 49;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfe6e1;
  color: #2d6a3e;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(11, 43, 26, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.retour-haut.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.retour-haut:hover {
  background: #eaf3ed;
}

/* --- Apparition douce au defilement --- */
.au-defilement {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.au-defilement.vu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .au-defilement {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Chiffres cles --- */
.bande-chiffres {
  background: #fff;
  padding: 52px 0;
  border-top: 1px solid #f0e8d8;
}

.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: center;
}

.chiffre {
  padding: 12px;
}

.chiffre-valeur {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  color: #2d6a3e;
  line-height: 1;
  letter-spacing: -1px;
}

.chiffre-unite {
  font-size: 20px;
  color: #c9a961;
  font-weight: 700;
}

.chiffre-libelle {
  font-size: 13.5px;
  color: #8a6d42;
  margin-top: 9px;
}

/* --- Boutons plus affirmes --- */
.btn-or {
  padding: 17px 34px;
  font-size: 15.5px;
  letter-spacing: .2px;
}

.btn-clair {
  padding: 16px 30px;
  font-size: 15.5px;
}

.bouton-vert-plein {
  padding: 16px 32px;
}

@media (max-width: 760px) {
  .retour-haut {
    bottom: 92px;
    right: 22px;
  }

  .grille-chiffres {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .section-marque {
    padding: 50px 0;
  }

  /* zones tactiles confortables */
  .bouton,
  .btn-or,
  .btn-clair,
  .bouton-vert-plein {
    min-height: 48px;
  }

  .navigation a {
    padding: 10px 0;
  }
}


/* ============================================================
   Panier : icone, quantite modifiable, suppression
   ============================================================ */

.bouton-panier {
  gap: 9px;
}

.bouton-panier svg {
  flex-shrink: 0;
}

/* En-tete du tiroir */
.tiroir-entete {
  align-items: flex-start;
}

.tiroir-compteur {
  display: block;
  font-size: 12.5px;
  color: var(--gris-clair);
  margin-top: 2px;
}

.lien-vider {
  background: none;
  border: none;
  color: var(--rouge);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.lien-vider:hover {
  background: var(--rouge-clair);
}

/* Ligne d'article */
.ligne-panier {
  align-items: flex-start;
  gap: 13px;
  padding: 15px 0;
}

.ligne-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

/* Compteur avec saisie directe */
.compteur {
  display: inline-flex;
  align-items: center;
  background: #f2f5f3;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid #e2e8e4;
}

.compteur button {
  background: none;
  border: none;
  width: 32px;
  height: 34px;
  cursor: pointer;
  font-size: 17px;
  color: var(--gris);
  display: grid;
  place-items: center;
  transition: background .15s ease;
}

.compteur button:hover:not(:disabled) {
  background: #e4eae6;
  color: var(--vert);
}

.compteur button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.compteur-champ {
  width: 42px;
  height: 34px;
  border: none;
  background: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texte);
  border-left: 1px solid #e2e8e4;
  border-right: 1px solid #e2e8e4;
  -moz-appearance: textfield;
  appearance: textfield;
}

.compteur-champ::-webkit-outer-spin-button,
.compteur-champ::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.compteur-champ:focus {
  outline: none;
  background: #f6fbf8;
  box-shadow: inset 0 0 0 2px rgba(45, 106, 62, .25);
}

/* Bouton supprimer */
.bouton-supprimer {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e8ddd9;
  color: #b8564a;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .16s ease;
  flex-shrink: 0;
}

.bouton-supprimer:hover {
  background: var(--rouge-clair);
  border-color: #f0c4bd;
  color: var(--rouge);
}

.bouton-supprimer:active {
  transform: scale(.93);
}

.ligne-total {
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  padding-top: 2px;
  color: var(--texte);
}

@media (max-width: 760px) {
  .panier-texte {
    display: none;
  }

  .bouton-panier {
    padding: 9px 13px;
  }

  .compteur button {
    width: 36px;
    height: 38px;
  }

  .compteur-champ {
    width: 46px;
    height: 38px;
  }

  .bouton-supprimer {
    width: 38px;
    height: 38px;
  }
}


/* Photo de produit sur les cartes boutique */
/* « contain » et non « cover » : un sac de riz est vertical, la carte est
   large. « cover » remplissait la boite en coupant le haut et le bas du
   sac — le produit se retrouvait a moitie hors champ. On montre l'objet
   entier, quitte a laisser du fond visible autour. */
.produit-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}

/* Pas d'agrandissement au survol ici : le conteneur masque ce qui deborde,
   et grossir la photo revenait a couper le haut et le bas du sac — le
   defaut meme qu'on corrige. La carte se souleve deja au survol, c'est
   suffisant comme retour visuel. */

.produit-image {
  overflow: hidden;
  position: relative;
}

/* ============================================================
   Barre de navigation mobile (style Jumia)
   - 4 items répartis
   - Bouton central proéminent (FAB)
   ============================================================ */

.jumbobar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  height: 64px;
  background: #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #f0e8d8;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  justify-content: space-around;
  align-items: center;
  animation: jumbobar-slide-up 0.4s ease-out;
}

@keyframes jumbobar-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.jumbobar .qb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: #5a6b7a;
  text-decoration: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  transition: color 0.18s ease, transform 0.12s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.jumbobar .qb-item i {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.jumbobar .qb-item:hover {
  color: #0b6b35;
}

.jumbobar .qb-item:hover i {
  transform: translateY(-2px);
}

.jumbobar .qb-item:active {
  transform: scale(0.94);
}

.jumbobar .qb-item.active {
  color: #0b6b35;
}

/* --- Le bouton central (FAB) qui dépasse --- */
.jumbobar .qb-item.central {
  position: relative;
  margin-top: -22px; /* fait remonter pour dépasser de la barre */
}

.jumbobar .qb-item.central i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0a91e, #e09b13);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow:
    0 6px 18px rgba(240, 169, 30, 0.45),
    0 0 0 4px #ffffff;
  border: 2px solid #fff;
  margin-bottom: 2px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jumbobar .qb-item.central:hover i {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 10px 24px rgba(240, 169, 30, 0.55),
    0 0 0 4px #ffffff;
}

.jumbobar .qb-item.central span {
  margin-top: 4px;
  color: #b88510;
  font-weight: 700;
}

/* --- Badge du panier sur l'item Panier --- */
.jumbobar .badge-panier {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  background: #d60000;
  color: #fff;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 760px) {
  body {
    padding-bottom: 80px;
  }
  .jumbobar {
    display: flex;
  }
}

/* Sur très petits écrans, resserrer */
@media (max-width: 380px) {
  .jumbobar .qb-item {
    font-size: 10px;
  }
  .jumbobar .qb-item i {
    font-size: 18px;
  }
  .jumbobar .qb-item.central i {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* --- Animations utilitaires --- */
@keyframes apparait-toast {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ----------------------------------------------------------------- avis clients */
.etoiles {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  vertical-align: middle;
}
.etoile {
  display: block;
  flex-shrink: 0;
}
.etoile.pleine { fill: #f2a71b; }
.etoile.vide { fill: #e2e6e3; }

.section-avis {
  background: var(--creme-fond);
  border: 1px solid #efe6d2;
  border-radius: 16px;
  padding: 28px 26px;
  margin: 8px 0 28px;
}
.section-avis-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.section-avis-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--brun-clair);
  margin-bottom: 4px;
}
.section-avis-entete h2 {
  font-size: 22px;
  color: var(--vert-fonce);
  line-height: 1.2;
}
.section-avis-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #efe6d2;
  border-radius: 999px;
  padding: 8px 14px 8px 16px;
}
.section-avis-note strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--vert);
  line-height: 1;
}
.section-avis-note span {
  font-size: 12.5px;
  color: var(--gris);
}
.grille-temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.carte-temoignage {
  background: #fff;
  border: 1px solid #efe6d2;
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}
.carte-temoignage-texte {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texte);
  flex: 1;
  font-style: italic;
}
.carte-temoignage-auteur {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.carte-temoignage-initiale {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.carte-temoignage-auteur strong {
  display: block;
  font-size: 13.5px;
  font-style: normal;
}
.carte-temoignage-auteur span {
  font-size: 11.5px;
  color: var(--vert);
  font-weight: 600;
}

/* Formulaire d'avis (fiche produit) */
.av-formulaire {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin-bottom: 26px;
}
.av-formulaire h3 {
  font-size: 17px;
  margin-bottom: 4px;
}
.av-formulaire > p {
  font-size: 13.5px;
  color: var(--gris);
  margin-bottom: 16px;
}
.av-etoiles-saisie {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.av-etoile {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #d5dcd8;
  font-size: 28px;
  line-height: 1;
  transition: color .12s ease, transform .12s ease;
}
.av-etoile:hover,
.av-etoile.active {
  color: var(--or);
  transform: scale(1.08);
}
.av-libelle-note {
  font-size: 13px;
  font-weight: 700;
  color: var(--or);
  margin-bottom: 14px;
  min-height: 1.2em;
}

@media (max-width: 700px) {
  .section-avis { padding: 20px 16px; }
  .section-avis-entete { align-items: flex-start; }
}

/* --------------------------------------------------- sélecteur de quantité */
.selecteur-quantite {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  height: 34px;
}
.sq-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: #f2f5f3;
  color: var(--vert-fonce);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.sq-btn:hover { background: var(--vert-clair); }
.sq-valeur {
  width: 42px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--texte);
  -moz-appearance: textfield;
  appearance: textfield;
}
.sq-valeur::-webkit-outer-spin-button,
.sq-valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.produit-pied {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Boutons compacts dans la grille : la carte est petite, un bouton de
   taille normale y mangeait la moitié de la hauteur. */
.produit-pied .bouton {
  flex: 1;
  min-width: 104px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 18px;
}

.bouton-partage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* --------------------------------------------------- bandeau livraison offerte */
/* C'est un argument de vente, pas une note de bas de page : il doit se
   voir. Barre laterale doree et texte plus grand, sans crier. */
.bandeau-livraison {
  background: linear-gradient(90deg, #fdf1e4, #fdeeda);
  border: 1px solid #f0d9a8;
  border-left: 4px solid var(--or, #c9a961);
  color: #7a5b1e;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1px;
  margin-bottom: 18px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(201, 169, 97, .16);
}

.bandeau-livraison strong { font-size: 16.5px; font-weight: 800; }
.bandeau-livraison strong { color: #a9670c; }
.bandeau-livraison.offre-atteinte {
  background: linear-gradient(90deg, var(--vert-clair), #d9f2e2);
  border-color: #b7e2c8;
  color: #2c6b46;
}
.bandeau-livraison.offre-atteinte strong { color: var(--vert); }
.bandeau-tiroir { margin-bottom: 10px; font-size: 12px; }


/* ============================================================
   BARRE DE RECHERCHE + MENU HAMBURGER
   ============================================================

   Principe : la barre de l'en-tête n'affiche que les rubriques
   marquées « principal » dans NAV_LIENS (commun.js). Toutes les
   autres — et les rubriques principales elles-mêmes — vivent aussi
   dans le menu hamburger. Ajouter une page au site ne peut donc
   jamais désorganiser l'en-tête : elle atterrit dans le menu.
   ============================================================ */

/* ------------------------------------------------ barre de recherche */

.recherche {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 210px;
  min-width: 0;
  max-width: 300px;
  background: #f2f5f3;
  border: 1.5px solid transparent;
  border-radius: 22px;
  padding: 0 12px;
  transition: border-color .15s ease, background .15s ease;
}

.recherche:focus-within {
  background: #fff;
  border-color: var(--vert);
}

.recherche-loupe {
  color: var(--gris-clair);
  flex-shrink: 0;
}

.recherche:focus-within .recherche-loupe {
  color: var(--vert);
}

.recherche-champ {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 10px 8px;
  font-size: 13.5px;
}

/* Croix native de Chrome/Safari : on garde la nôtre, cohérente partout. */
.recherche-champ::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.recherche-vider {
  border: none;
  background: transparent;
  color: var(--gris-clair);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

.recherche-vider:hover {
  color: var(--texte);
}

/* ------------------------------------------------------ suggestions */

.recherche-suggestions {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre-forte);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 65vh;
  /* Au-dessus de l'en-tête collante (40) et du contenu, mais sous les
     tiroirs (10060+) : une suggestion ne doit jamais couvrir le panier. */
  z-index: 10050;
}

.suggestion-titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gris-clair);
  padding: 11px 14px 5px;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-top: 1px solid #f1f4f2;
  font-size: 13.5px;
  cursor: pointer;
}

.suggestion-titre + .suggestion {
  border-top: none;
}

.suggestion:hover,
.suggestion.actif {
  background: var(--vert-clair);
}

.suggestion-vignette {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #f4f6f5;
}

.suggestion-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suggestion-pastille {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: block;
}

.suggestion-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.suggestion-texte strong {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-texte small {
  font-size: 11.5px;
  color: var(--gris-clair);
}

.suggestion-prix {
  font-weight: 700;
  color: var(--vert);
  font-size: 13px;
  white-space: nowrap;
}

.suggestion-page .suggestion-texte strong {
  font-weight: 600;
  color: var(--vert-fonce);
}

.suggestion-page::before {
  content: "\2197";          /* flèche « vers une page » */
  color: var(--gris-clair);
  font-size: 13px;
  width: 34px;
  text-align: center;
  flex-shrink: 0;
}

.suggestion-tout {
  justify-content: center;
  font-weight: 600;
  color: var(--vert);
  background: #fafcfb;
}

.suggestion-vide {
  padding: 20px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--gris);
}

.suggestion-vide a {
  display: block;
  margin-top: 9px;
  color: var(--vert);
  font-weight: 600;
}

/* -------------------------------------------------- bouton hamburger */

.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border: none;
  border-radius: 20px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}

.bouton-menu:hover {
  background: #d8ecdf;
}

.bouton-menu-barres {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 17px;
  height: 13px;
}

.bouton-menu-barres span {
  display: block;
  height: 2.2px;
  border-radius: 2px;
  background: currentColor;
}

/* --------------------------------------------------- tiroir du menu */

/* Le menu s'ouvre à GAUCHE, le panier à droite : deux gestes distincts,
   impossible de les confondre. Sélecteur à trois classes pour passer
   devant `.tiroir` / `.tiroir.ouvert` définis plus haut. */
.tiroir.tiroir-menu {
  right: auto;
  left: 0;
  width: 360px;
  transform: translateX(-100%);
  box-shadow: 8px 0 30px rgba(0, 0, 0, .16);
}

.tiroir.tiroir-menu.ouvert {
  transform: translateX(0);
}

.menu-corps {
  padding: 16px 18px 30px;
  overflow-y: auto;
}

/* Dans le tiroir, la recherche occupe toute la largeur. */
.menu-corps .recherche {
  max-width: none;
  width: 100%;
  margin-bottom: 18px;
}

.menu-liens {
  display: flex;
  flex-direction: column;
}

.menu-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--bordure);
  font-size: 15px;
  color: var(--texte);
  min-height: 48px;          /* zone tactile confortable */
}

.menu-lien:hover {
  color: var(--vert);
}

.menu-lien svg {
  color: var(--gris-clair);
  flex-shrink: 0;
}

.menu-lien.actif {
  color: var(--vert);
  font-weight: 700;
}

.menu-section {
  margin-top: 24px;
}

.menu-section h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-bottom: 11px;
}

.menu-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 12px;
}

.menu-service {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 11px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.menu-service:hover {
  background: var(--vert-clair);
  border-color: var(--vert);
}

.menu-service-icone {
  display: block;
  font-size: 21px;
  margin-bottom: 5px;
}

.menu-service-nom {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--texte);
}

.menu-service-detail {
  display: block;
  font-size: 11px;
  color: var(--gris-clair);
  margin-top: 2px;
}

/* Partenaires dans le menu : trois logos par rangée, hauteur d'image
   fixe pour que la grille reste régulière malgré des logos de formats
   très différents. */
.menu-partenaires {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.menu-partenaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 11px;
  padding: 10px 7px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.menu-partenaire:hover {
  background: var(--vert-clair);
  border-color: var(--vert);
}

.menu-partenaire img {
  width: 100%;
  height: 40px;
  object-fit: contain;
}

.menu-partenaire span {
  font-size: 10px;
  font-weight: 600;
  color: var(--gris);
  text-align: center;
  line-height: 1.25;
}

.menu-contact a {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  color: var(--gris);
  border-bottom: 1px solid var(--bordure);
}

.menu-contact a:hover {
  color: var(--vert);
}

/* Le fond ne défile pas derrière un tiroir ouvert. */
body.defilement-bloque {
  overflow: hidden;
}

/* ------------------------------------------------------- adaptatif */

/* Sur ordinateur, toutes les rubriques sont visibles dans leur rangée : le
   hamburger n'apporte plus rien et disparaît. Le seuil est à 901 px, et
   non plus à 1281 px — un portable de 1280 px de large, qui est le cas
   courant, se voyait proposer un menu replié alors que la place ne
   manquait pas. */
@media (min-width: 901px) {
  .bouton-menu {
    display: none;
  }
}

/* En mobile, le hamburger reprend la main et redevient l'unique
   navigation : la rangée des rubriques ne tiendrait pas sur la largeur
   d'un téléphone. C'est lui qui garde tout — rubriques, services,
   partenaires, contacts. */
@media (max-width: 900px) {
  .barre-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .bouton-appel {
    display: none;           /* le menu et la jumbobar portent l'appel */
  }

  .bouton-menu-texte {
    display: none;
  }

  .bouton-menu {
    padding: 10px 13px;
  }

  .entete {
    height: auto;
  }

  /* La recherche passe sous le logo, sur toute la largeur : c'est le
     geste le plus courant sur mobile, il mérite la pleine largeur. */
  .entete .conteneur {
    flex-wrap: wrap;
    padding-bottom: 10px;
  }

  /* Le bloc d'actions passe sous le logo, sur toute la largeur, et garde
     recherche + panier + menu sur UNE seule ligne : trois rangées
     empilées mangeaient la moitié de l'écran avant même le contenu. */
  .entete-actions {
    flex: 1 1 100%;
    order: 10;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .entete-actions .recherche {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .recherche-suggestions {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .tiroir.tiroir-menu {
    width: 100%;
    max-width: 100%;
  }

  .menu-services {
    grid-template-columns: 1fr;
  }

  .menu-partenaires {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------- recherche dans la boutique */

.boutique-recherche {
  max-width: 360px;
  flex: 1 1 240px;
}

.recherche-resume {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--vert-clair);
  border: 1px solid #cbe8d6;
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--vert-fonce);
  margin-bottom: 14px;
}

.recherche-resume button {
  border: none;
  background: #fff;
  color: var(--vert);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.recherche-resume button:hover {
  background: #f0faf4;
}

/* ---------------------------------------- tenue de la barre sur grand écran

   Les libellés ne doivent jamais se casser en deux lignes (« Points de /
   vente »), ni le numéro de téléphone. La rangée des rubriques, elle, a
   désormais le droit de passer à la ligne : elle est seule sur sa rangée,
   une seconde ligne y est lisible, là où dans l'ancienne barre partagée
   elle aurait décalé le panier. */

.navigation {
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-left: 0;
}

.navigation a {
  white-space: nowrap;
}

.bouton-appel,
.bouton-panier,
.bouton-menu {
  white-space: nowrap;
}

@media (min-width: 901px) {
  .entete .conteneur {
    gap: 20px;
  }

  /* Le bloc d'actions prend la place laissée libre par les rubriques, sans
     quoi il se contenterait de la largeur de son contenu et la recherche
     n'aurait rien à gagner.

     `justify-content: flex-end` n'est pas décoratif : une fois la
     recherche à sa largeur maximale, le reliquat d'espace doit se placer
     AVANT le groupe. Sans cela il s'accumule après le bouton d'appel, qui
     se retrouve à flotter au milieu de la barre. */
  .entete-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  /* Les rubriques ayant quitté cette rangée, la recherche récupère la
     largeur qu'elles lui prenaient : elle passe de 260 à 440 px. C'est le
     geste le plus fréquent de la page, il méritait mieux qu'un reste. */
  .entete-actions .recherche {
    flex: 1 1 340px;
    max-width: 440px;
  }
}

/* Le slogan à côté du logo débordait sur la première rubrique : il ne
   s'affiche plus que lorsqu'il y a vraiment la place. */
@media (max-width: 1400px) {
  .logo-slogan-cote {
    display: none;
  }
}

/* L'appel direct cédait ici la place aux rubriques dès 1250 px. Les
   rubriques ayant leur propre rangée, ce sacrifice n'a plus lieu d'être :
   le numéro reste affiché sur tout écran d'ordinateur. Il disparaît encore
   sous 900 px (règle plus haut), où la jumbobar le porte. */


/* ============================================================
   Septembre 2026 — rubriques du menu principal
   ============================================================

   Les rubriques (Accueil, Nos riz, Nos services…) étaient du texte gris
   souligné en vert : lisibles, mais sans caractère. Elles prennent la
   forme d'onglets arrondis : survol en vert tendre, rubrique active en
   vert AGRIM avec un trait or dessous — les deux couleurs du sac. */

.barre-nav {
  background: linear-gradient(180deg, #fbfcfb, #f3f8f4);
  border-bottom: 1px solid var(--bordure);
}

.barre-nav .conteneur {
  min-height: 52px;
}

.navigation {
  gap: 6px 4px;
}

.navigation a {
  position: relative;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: .15px;
  color: #2f4a3b;
  transition: background-color .18s ease, color .18s ease;
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--or);
  transform: translateX(-50%);
  transition: width .2s ease;
}

.navigation a:hover {
  background: var(--vert-clair);
  color: var(--vert);
}

.navigation a:hover::after {
  width: 18px;
}

.navigation a.actif {
  background: var(--vert);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(23, 128, 63, .22);
}

.navigation a.actif::after {
  width: 22px;
  bottom: -7px;
}

.navigation a:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .navigation a,
  .navigation a::after { transition: none; }
}


/* ============================================================
   Septembre 2026 — alignement du pied de page
   ============================================================

   Le bandeau « Retrouvez-nous sur / Modes de paiement », l'encart
   infolettre et la ligne de copyright étaient hors du conteneur : collés
   au bord gauche de l'écran, alors que les colonnes au-dessus sont
   centrées sur 1200 px. Ils reprennent la même largeur et le même
   alignement que le reste du pied. */

.pied-bandeau,
.pied-infolettre,
.pied-bas {
  width: min(1180px, calc(100% - 20px));
  margin-left: auto;
  margin-right: auto;
}

.pied .conteneur > div > a[href^="mailto:"],
.pied .conteneur > div > p > a[href^="mailto:"] {
  word-break: break-word;
}


/* ============================================================
   Septembre 2026 — annonce d'accueil (ouverture de la boutique)
   ============================================================

   Le porte-parole, détouré, se tient sur un fond crème et montre du doigt
   le message placé à sa droite : l'image fait le geste que la carte
   demande au visiteur. Une seule touche de couleur forte, le bouton or. */

.annonce-voile {
  position: fixed;
  inset: 0;
  z-index: 10100;  /* au-dessus de la barre mobile et des boutons flottants */
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 30, 19, .55);
  opacity: 0;
  transition: opacity .22s ease;
}
.annonce-voile.ouverte { opacity: 1; }

body.annonce-active { overflow: hidden; }

.annonce-carte {
  position: relative;
  width: min(780px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 30, 18, .35);
  transform: translateY(10px) scale(.97);
  transition: transform .25s ease;
}
.annonce-voile.ouverte .annonce-carte { transform: none; }
.annonce-carte:focus { outline: none; }

.annonce-visuel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 360px;
  background:
    radial-gradient(circle at 55% 46%, rgba(242, 167, 27, .30) 0 32%, transparent 33%),
    linear-gradient(160deg, #faf3e2, #f1e2bd);
  overflow: hidden;
}
.annonce-visuel img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.annonce-texte {
  padding: 40px 36px 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.annonce-pastille {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--vert-clair);
  color: var(--vert);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 14px;
}

.annonce-texte h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  color: var(--vert-fonce);
  margin-bottom: 12px;
}

.annonce-texte p {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5a52;
  margin-bottom: 18px;
  max-width: 46ch;
}

.annonce-paiements {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.annonce-paiements .mode-paiement { width: 30px; height: 30px; }

.annonce-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.annonce-cta {
  padding: 13px 24px;
  font-size: 15px;
  text-decoration: none;
}
.annonce-plus-tard {
  border: 0;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}
.annonce-plus-tard:hover { color: var(--vert-fonce); text-decoration: underline; }

.annonce-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #33454f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.annonce-fermer:hover { background: #fff; color: var(--vert-fonce); }

.annonce-carte a:focus-visible,
.annonce-carte button:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 2px;
}

/* Sur téléphone, la carte GARDE ses deux colonnes : le porte-parole doit
   pointer vers le message, pas vers le vide. Tout rétrécit à la place —
   le doigt reste dirigé vers le texte, comme sur ordinateur. */
@media (max-width: 640px) {
  .annonce-voile { padding: 12px; }
  .annonce-carte { grid-template-columns: 5fr 7fr; border-radius: 18px; }
  /* Colonne étroite et haute : l'image centrée verticalement place le doigt
     à hauteur du titre, au lieu de laisser un grand vide crème au-dessus. */
  .annonce-visuel { min-height: 0; align-items: center; }
  .annonce-visuel img { max-width: 100%; object-position: center; }
  .annonce-texte { padding: 20px 16px 18px 12px; }
  .annonce-pastille { padding: 3px 9px; font-size: 11px; margin-bottom: 9px; }
  .annonce-texte h2 { font-size: 18px; margin-bottom: 8px; }
  .annonce-texte p { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
  .annonce-paiements { gap: 5px; margin-bottom: 14px; }
  .annonce-paiements .mode-paiement { width: 24px; height: 24px; }
  .annonce-actions { gap: 6px 12px; }
  .annonce-cta { padding: 11px 16px; font-size: 13.5px; }
  .annonce-plus-tard { font-size: 12.5px; padding: 6px 2px; }
  .annonce-fermer { width: 30px; height: 30px; font-size: 19px; top: 8px; right: 8px; }
}

/* Très petits écrans (320 px) : on garde les deux colonnes — empiler ferait
   pointer le doigt vers le vide — en rétrécissant la bande d'image et le
   texte juste ce qu'il faut. */
@media (max-width: 340px) {
  .annonce-carte { grid-template-columns: 4fr 8fr; }
  .annonce-texte { padding: 18px 12px 16px 9px; }
  .annonce-texte h2 { font-size: 16px; }
  .annonce-texte p { font-size: 12.5px; margin-bottom: 10px; }
  .annonce-paiements .mode-paiement { width: 21px; height: 21px; }
  .annonce-cta { padding: 10px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .annonce-voile, .annonce-carte { transition: none; }
}