/* ==========================================================================
   ROSY GROUP INTERNATIONAL - FEUILLE DE STYLE
   Palette tirée du logo : rouge tomate, vert feuille, crème.
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------ */
:root {
  --rouge:        #D9321B;
  --rouge-fonce:  #A8220F;
  --rouge-clair:  #F04B32;
  --vert:         #4CA524;
  --vert-fonce:   #337016;
  --vert-clair:   #7CC93C;
  --or:           #E8A33D;

  --creme:        #FDF7F0;
  --creme-2:      #F7EDE1;
  --sable:        #EFE0CE;
  --blanc:        #FFFFFF;

  --encre:        #241A14;
  --encre-2:      #4A3A2E;
  --gris:         #7A6A5E;
  --gris-clair:   #B9AA9C;
  --bordure:      #E7D9C9;

  --ombre-s: 0 1px 2px rgba(36,26,20,.06), 0 2px 6px rgba(36,26,20,.05);
  --ombre-m: 0 4px 12px rgba(36,26,20,.08), 0 12px 28px rgba(36,26,20,.07);
  --ombre-l: 0 10px 30px rgba(36,26,20,.10), 0 30px 60px rgba(36,26,20,.10);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 32px;

  --conteneur: 1240px;
  --gouttiere: clamp(18px, 4vw, 40px);

  /* LES DEUX POLICES DU SITE
     --------------------------------------------------------------------
     Titres : Lora. Un serif chaleureux, dessiné pour être lu, avec des
     accents français bien tracés (é, è, ç, à, ô). Il donne aux titres la
     tenue d'un produit artisanal sans tomber dans le pittoresque.

     Texte : Inter. Conçue pour les écrans, c'est la plus lisible à petite
     taille sur les téléphones d'entrée de gamme, qui sont la majorité du
     parc au Burkina. Elle sert aussi toute l'interface : boutons, champs,
     étiquettes, tableaux.

     Pour en changer, modifiez ces deux lignes ET la balise <link> des
     polices Google en tête de chaque page HTML. Les polices de secours
     ci-dessous prennent le relais si la connexion ne suit pas : le site
     reste lisible, simplement moins typé.                               */
  --police-titre: "Lora", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --entete-h: 78px;
  --transition: 220ms cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------- 2. BASE -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip et non hidden : "hidden" ferait de <html> un conteneur
   de défilement et casserait l'en-tête collant (position: sticky).          */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* L'attribut hidden doit l'emporter sur les classes qui posent un display.
   Sans cela, un `.btn` caché par `hidden` reste visible, car la classe est
   déclarée plus bas dans la feuille et gagne à spécificité égale.          */
[hidden] { display: none !important; }

/* Les attributs width et height d'une balise <img> servent au navigateur à
   réserver la place avant le chargement, ce qui évite les sauts de mise en
   page. Mais ils s'appliquent aussi comme des dimensions CSS : une image
   dont la largeur est ensuite contrainte garderait la hauteur de son
   attribut, et se retrouverait étirée. Cette règle libère la hauteur dès
   qu'une largeur relative est demandée.                                    */
img[style*="width:100%"], img[style*="width: 100%"] { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1em; text-wrap: pretty; }

::selection { background: var(--vert-clair); color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur-etroit { max-width: 820px; }

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

.saut-contenu {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--encre); color: #fff; padding: 10px 18px; border-radius: var(--r-s);
  transition: top var(--transition);
}
.saut-contenu:focus { top: 12px; }

/* ------------------------- 3. TITRES DE SECTION ------------------------- */
.section { padding: clamp(56px, 8vw, 108px) 0; }
.section--creme  { background: var(--creme-2); }
.section--sable  { background: var(--sable); }
.section--encre  { background: var(--encre); color: var(--creme); }
.section--encre h2, .section--encre h3 { color: #fff; }

.surtitre {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 14px;
}
.surtitre::before {
  content: ""; width: 26px; height: 2px; background: var(--vert); border-radius: 2px;
}
.section--encre .surtitre { color: var(--vert-clair); }

.entete-section { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section p { color: var(--gris); font-size: 1.08rem; margin-bottom: 0; }
.section--encre .entete-section p { color: #d9cabb; }

/* ------------------------------ 4. BOUTONS ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 700; font-size: .95rem; line-height: 1.2;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--principal { background: var(--rouge); color: #fff; box-shadow: 0 6px 18px rgba(217,50,27,.28); }
.btn--principal:hover { background: var(--rouge-fonce); box-shadow: 0 10px 26px rgba(217,50,27,.34); }

.btn--vert { background: var(--vert); color: #fff; box-shadow: 0 6px 18px rgba(76,165,36,.26); }
.btn--vert:hover { background: var(--vert-fonce); }

.btn--contour { border-color: var(--encre); color: var(--encre); }
.btn--contour:hover { background: var(--encre); color: var(--creme); }

.btn--clair { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn--clair:hover { background: #fff; color: var(--encre); }

.btn--fantome { color: var(--encre); padding-inline: 14px; }
.btn--fantome:hover { color: var(--rouge); }

.btn--large { padding: 16px 34px; font-size: 1.02rem; }
.btn--bloc  { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1da851; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------- 5. EN-TÊTE ----------------------------- */
.entete {
  position: sticky; top: 0; z-index: 90;
  background: rgba(253,247,240,.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.entete.est-collee { border-bottom-color: var(--bordure); box-shadow: var(--ombre-s); }

.entete__barre {
  display: flex; align-items: center; gap: 18px;
  height: var(--entete-h);
}
.marque { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marque img { height: 46px; width: auto; }
.marque__texte { display: none; line-height: 1.05; }
.marque__nom { font-family: var(--police-titre); font-weight: 600; font-size: 1.02rem; }
.marque__sous { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--gris); }
@media (min-width: 560px) { .marque__texte { display: block; } }

.nav { display: none; margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 8px 12px; border-radius: 100px; white-space: nowrap;
  font-size: .9rem; font-weight: 600; color: var(--encre-2);
  transition: background var(--transition), color var(--transition);
}
.nav a:hover { background: var(--creme-2); color: var(--encre); }
.nav a.est-active { color: var(--rouge); background: rgba(217,50,27,.09); }
@media (min-width: 1120px) { .nav { display: block; } }

.entete__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1120px) { .entete__actions { margin-left: 0; } }

.icone-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--encre); position: relative;
  transition: background var(--transition), color var(--transition);
}
.icone-btn:hover { background: var(--creme-2); color: var(--rouge); }
.icone-btn svg { width: 21px; height: 21px; }

.pastille {
  position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 100px;
  background: var(--rouge); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--creme);
}
.pastille[hidden] { display: none !important; }

.selecteur-langue { display: flex; align-items: center; background: var(--creme-2); border-radius: 100px; padding: 3px; }
.selecteur-langue button {
  padding: 5px 11px; border-radius: 100px; font-size: .78rem; font-weight: 800;
  letter-spacing: .05em; color: var(--gris); transition: all var(--transition);
}
.selecteur-langue button.est-active { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-s); }

.burger { display: grid; }
@media (min-width: 1120px) { .burger { display: none; } }

/* Menu mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: 100;
  background: var(--creme);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.menu-mobile.est-ouvert { transform: translateX(0); }
.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; height: var(--entete-h); padding-inline: var(--gouttiere); border-bottom: 1px solid var(--bordure); }
.menu-mobile nav { padding: 22px var(--gouttiere); }
.menu-mobile nav ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--bordure);
  font-family: var(--police-titre); font-size: 1.35rem;
}
.menu-mobile nav a.est-active { color: var(--rouge); }
.menu-mobile__bas { margin-top: auto; padding: 22px var(--gouttiere) 34px; display: grid; gap: 12px; }

/* --------------------------------- 6. HÉRO ----------------------------- */
.hero { position: relative; overflow: hidden; background: var(--encre); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* Sur mobile la colonne de texte occupe toute la largeur : voile vertical,
     plus dense, pour rester lisible sur une photo chargée.                   */
  background:
    linear-gradient(to top, rgba(20,12,8,.92) 12%, rgba(20,12,8,.78) 55%, rgba(20,12,8,.55) 100%);
}
@media (min-width: 900px) {
  .hero__media::after {
    background:
      linear-gradient(105deg, rgba(20,12,8,.90) 0%, rgba(20,12,8,.68) 42%, rgba(20,12,8,.20) 72%, rgba(20,12,8,.42) 100%);
  }
}
.hero__contenu {
  position: relative; z-index: 2;
  padding: clamp(72px, 12vw, 132px) 0 clamp(56px, 9vw, 96px);
  max-width: 700px; color: #fff;
}
.hero h1 { color: #fff; margin-bottom: .38em; }
.hero__accroche { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: #EBDDCE; max-width: 560px; margin-bottom: 30px; }
.hero .surtitre { color: var(--vert-clair); }
.hero .surtitre::before { background: var(--vert-clair); }

.hero__insigne {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(8px);
  padding: 7px 15px 7px 8px; border-radius: 100px;
  font-size: .82rem; font-weight: 600; color: #fff; margin-bottom: 22px;
}
.hero__insigne span.point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert-clair); box-shadow: 0 0 0 4px rgba(124,201,60,.28); }

/* Chiffres clés sous le héro */
.chiffres {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--bordure);
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--ombre-m);
  margin-top: -46px; margin-bottom: 0;
}
@media (min-width: 720px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre { background: var(--blanc); padding: 22px 16px; text-align: center; }
.chiffre__valeur { font-family: var(--police-titre); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--rouge); line-height: 1; }
.chiffre__libelle { font-size: .8rem; color: var(--gris); margin-top: 6px; }

/* ------------------------------ 7. BANDEAU ----------------------------- */
.bandeau { background: var(--vert); color: #fff; overflow: hidden; padding: 13px 0; }
.bandeau__piste { display: flex; gap: 0; width: max-content; animation: defile 38s linear infinite; }
.bandeau__groupe { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.bandeau__item { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: .9rem; letter-spacing: .02em; white-space: nowrap; }
.bandeau__item svg { width: 17px; height: 17px; flex-shrink: 0; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* --------------------------- 8. CARTES FAMILLES ------------------------ */
.grille-familles { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grille-familles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .grille-familles { grid-template-columns: repeat(6, 1fr); }
  /* Six familles : deux lignes de trois cartes de même largeur.
     La règle tient aussi à cinq familles - la dernière ligne n'en porte
     alors que deux, alignées à gauche et de la même taille que les autres. */
  .grille-familles > * { grid-column: span 2; }
}

.carte-famille {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-l); background: var(--encre);
  aspect-ratio: 4 / 3;
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-famille:hover { transform: translateY(-5px); box-shadow: var(--ombre-l); }
.carte-famille img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.carte-famille:hover img { transform: scale(1.07); }
.carte-famille::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,10,6,.92) 4%, rgba(18,10,6,.55) 42%, rgba(18,10,6,.06) 78%);
}
.carte-famille__texte { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px; color: #fff; }
.carte-famille__texte h3 { color: #fff; margin-bottom: 4px; font-size: 1.28rem; }
.carte-famille__texte p { margin: 0; font-size: .9rem; color: #E4D5C6; }
.carte-famille__compte {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--encre);
  border-radius: 100px; padding: 5px 13px; font-size: .76rem; font-weight: 800;
}

/* --------------------------- 9. CARTES PRODUITS ------------------------ */
.grille-produits { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .grille-produits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grille-produits { grid-template-columns: repeat(4, 1fr); } }

.carte-produit {
  background: var(--blanc); border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--bordure);
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.carte-produit:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: transparent; }

.carte-produit__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--creme-2); display: block; }
.carte-produit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.carte-produit:hover .carte-produit__media img { transform: scale(1.06); }

.etiquette {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 11px; border-radius: 100px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--or); color: #3A2708;
}
.etiquette--vert { background: var(--vert); color: #fff; }

.coeur {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
  box-shadow: var(--ombre-s); transition: transform var(--transition), color var(--transition);
  color: var(--gris);
}
.coeur:hover { transform: scale(1.12); color: var(--rouge); }
.coeur svg { width: 17px; height: 17px; }
.coeur.est-actif { color: var(--rouge); }
.coeur.est-actif svg { fill: currentColor; }

.carte-produit__corps { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.carte-produit__famille { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vert); margin-bottom: 5px; }
.carte-produit__nom { font-family: var(--police-titre); font-size: 1.02rem; font-weight: 600; line-height: 1.25; margin: 0 0 3px; }
.carte-produit__format { font-size: .82rem; color: var(--gris); margin: 0 0 12px; }
.carte-produit__prix { margin-top: auto; }
.mention-prix {
  display: inline-block; margin-bottom: 11px;
  padding: 3px 10px; border-radius: 100px;
  background: var(--creme-2); border: 1px solid var(--bordure);
  font-size: .74rem; font-weight: 700; color: var(--gris);
  letter-spacing: .01em; cursor: help;
}

.ajout { display: flex; gap: 7px; align-items: center; }
.ajout .btn { flex: 1; padding: 10px 14px; font-size: .86rem; }

.compteur { display: inline-flex; align-items: center; background: var(--creme-2); border-radius: 100px; padding: 3px; }
.compteur button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--encre-2); transition: background var(--transition); }
.compteur button:hover { background: var(--blanc); }
.compteur span { min-width: 26px; text-align: center; font-weight: 800; font-size: .92rem; }

/* Bandeau horizontal de produits (accueil) */
.rail { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > * { flex: 0 0 244px; scroll-snap-align: start; }
@media (min-width: 700px) { .rail > * { flex-basis: 268px; } }

/* --------------------------- 10. ATOUTS / ICÔNES ----------------------- */
.grille-atouts { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grille-atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-atouts { grid-template-columns: repeat(4, 1fr); } }

.atout {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 26px 22px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.atout:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.atout__icone {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(76,165,36,.12); color: var(--vert);
}
.atout:nth-child(2n) .atout__icone { background: rgba(217,50,27,.10); color: var(--rouge); }
.atout__icone svg { width: 25px; height: 25px; }
.atout h3 { font-size: 1.1rem; margin-bottom: 7px; }
.atout p { font-size: .93rem; color: var(--gris); margin: 0; }

/* ------------------------------ 11. HISTOIRE ---------------------------- */
.duo { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo--inverse > :first-child { order: 2; }
@media (max-width: 899px) { .duo--inverse > :first-child { order: 0; } }

.duo__media { position: relative; }
.duo__media img { width: 100%; border-radius: var(--r-l); box-shadow: var(--ombre-m); }
.duo__media--decale::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 2px solid var(--vert); border-radius: var(--r-l); z-index: -1;
}

.citation {
  border-left: 3px solid var(--rouge); padding-left: 20px;
  font-family: var(--police-titre); font-size: 1.22rem; font-style: italic;
  color: var(--encre-2); margin: 22px 0;
}

/* ---------------------------- 12. POINTS DE VENTE ---------------------- */
.liste-pdv { display: grid; gap: 12px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .liste-pdv { grid-template-columns: repeat(2, 1fr); } }
.pdv {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 16px 18px;
}
.pdv__puce { width: 38px; height: 38px; border-radius: 50%; background: rgba(217,50,27,.09); color: var(--rouge); display: grid; place-items: center; flex-shrink: 0; }
.pdv__puce svg { width: 19px; height: 19px; }
.pdv strong { display: block; font-size: .98rem; }
.pdv span { font-size: .87rem; color: var(--gris); }

/* ---------------------------- 13. TÉMOIGNAGES -------------------------- */
.grille-temoignages { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .grille-temoignages { grid-template-columns: repeat(3, 1fr); } }
.temoignage {
  background: var(--blanc); border-radius: var(--r-m); padding: 26px 24px;
  border: 1px solid var(--bordure); position: relative;
}
.temoignage__guillemet { font-family: var(--police-titre); font-size: 3.4rem; line-height: .6; color: var(--sable); margin-bottom: 8px; display: block; }
.temoignage p { font-size: .98rem; color: var(--encre-2); }
.temoignage footer { font-size: .84rem; font-weight: 700; color: var(--gris); margin-top: 14px; }
.etoiles { display: flex; gap: 2px; color: var(--or); margin-bottom: 12px; }
.etoiles svg { width: 15px; height: 15px; fill: currentColor; }

/* ------------------------------- 14. APPEL ----------------------------- */
.appel {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); background: var(--rouge); color: #fff;
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
}
.appel::before, .appel::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.appel::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.appel::after  { width: 220px; height: 220px; bottom: -120px; left: -60px; }
.appel > * { position: relative; z-index: 2; }
.appel h2 { color: #fff; }
.appel p { color: #FFE0D9; max-width: 560px; margin-inline: auto; }
.appel .groupe-btn { justify-content: center; margin-top: 26px; }

/* ------------------------------ 15. GALERIE ---------------------------- */
.grille-galerie { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .grille-galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .grille-galerie { grid-template-columns: repeat(4, 1fr); } }
.vignette {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-m); aspect-ratio: 4 / 3; background: var(--creme-2);
  cursor: zoom-in;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.vignette:hover img { transform: scale(1.07); }
.vignette figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(18,10,6,.86), transparent);
  color: #fff; font-size: .82rem; font-weight: 600;
  opacity: 0; transition: opacity var(--transition);
}
.vignette:hover figcaption { opacity: 1; }

.visionneuse {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(14,8,5,.94); backdrop-filter: blur(6px);
  display: none; place-items: center; padding: 20px;
}
.visionneuse.est-ouverte { display: grid; }
.visionneuse img { max-width: min(1100px, 94vw); max-height: 82vh; border-radius: var(--r-m); box-shadow: var(--ombre-l); }
.visionneuse__legende { color: #E5D6C7; text-align: center; margin-top: 16px; font-size: .92rem; }
.visionneuse__fermer { position: absolute; top: 18px; right: 18px; color: #fff; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.visionneuse__nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.visionneuse__nav:hover { background: rgba(255,255,255,.28); }
.visionneuse__nav--prec { left: 14px; }
.visionneuse__nav--suiv { right: 14px; }

/* ---------------------- 16. FILTRES / RECHERCHE ------------------------ */
.barre-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }
.champ-recherche { position: relative; flex: 1 1 260px; min-width: 220px; }
.champ-recherche svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gris); pointer-events: none; }
.champ-recherche input {
  width: 100%; padding: 13px 16px 13px 44px;
  border: 1px solid var(--bordure); border-radius: 100px; background: var(--blanc);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ-recherche input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 4px rgba(76,165,36,.14); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  padding: 9px 17px; border-radius: 100px; border: 1px solid var(--bordure);
  background: var(--blanc); font-size: .88rem; font-weight: 600; color: var(--encre-2);
  transition: all var(--transition);
}
.puce:hover { border-color: var(--vert); color: var(--vert-fonce); }
.puce.est-active { background: var(--encre); border-color: var(--encre); color: #fff; }

.compte-resultats { font-size: .9rem; color: var(--gris); margin-bottom: 18px; }

/* ------------------------- 17. TIROIR PANIER --------------------------- */
.voile {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(20,12,8,.5); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.voile.est-visible { opacity: 1; pointer-events: auto; }

.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(430px, 100%);
  background: var(--creme);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.3,.8,.3,1);
  box-shadow: var(--ombre-l);
}
.tiroir.est-ouvert { transform: translateX(0); }
.tiroir__haut {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--bordure); flex-shrink: 0;
}
.tiroir__haut h2 { margin: 0; font-size: 1.3rem; }
.tiroir__corps { flex: 1; overflow-y: auto; padding: 18px 20px; }
.tiroir__bas { border-top: 1px solid var(--bordure); padding: 18px 20px; background: var(--blanc); flex-shrink: 0; }

.ligne-panier { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--bordure); }
.ligne-panier:last-child { border-bottom: 0; }
.ligne-panier img { width: 64px; height: 64px; border-radius: var(--r-s); object-fit: cover; flex-shrink: 0; background: var(--creme-2); }
.ligne-panier__info { flex: 1; min-width: 0; }
.ligne-panier__nom { font-weight: 700; font-size: .93rem; line-height: 1.3; }
.ligne-panier__format { font-size: .8rem; color: var(--gris); margin-bottom: 8px; }
.ligne-panier__sup { color: var(--gris-clair); align-self: flex-start; padding: 3px; }
.ligne-panier__sup:hover { color: var(--rouge); }

.panier-vide { text-align: center; padding: 48px 16px; color: var(--gris); }
.panier-vide svg { width: 62px; height: 62px; color: var(--sable); margin: 0 auto 16px; }

.encart-info {
  background: rgba(76,165,36,.09); border: 1px solid rgba(76,165,36,.28);
  border-radius: var(--r-m); padding: 13px 15px;
  font-size: .85rem; color: var(--vert-fonce); line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
}
.encart-info svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.encart-info--or { background: rgba(232,163,61,.12); border-color: rgba(232,163,61,.4); color: #8A5A0C; }

/* ------------------------------ 18. FORMULAIRES ------------------------ */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 6px; }
/* L'astérisque est ajouté en CSS : le texte du label est remplacé lors du
   changement de langue, un élément HTML placé dedans serait effacé.         */
.champ label.requis::after { content: " *"; color: var(--rouge); font-weight: 800; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 15px;
  border: 1px solid var(--bordure); border-radius: var(--r-s);
  background: var(--blanc);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 4px rgba(76,165,36,.14);
}
.champ__aide { font-size: .78rem; color: var(--gris); margin-top: 5px; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--rouge); }
.champ__erreur { font-size: .78rem; color: var(--rouge); margin-top: 5px; font-weight: 600; }
.duo-champs { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .duo-champs { grid-template-columns: 1fr 1fr; } }

.carte {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-l); padding: clamp(22px, 3.5vw, 34px);
}

/* --------------------------------- 19. PIED ---------------------------- */
.pied { background: var(--encre); color: #C8B8A9; padding-top: clamp(48px, 7vw, 76px); }
.pied a { color: #C8B8A9; transition: color var(--transition); }
.pied a:hover { color: #fff; }
.pied__grille { display: grid; gap: 34px; grid-template-columns: 1fr; padding-bottom: 40px; }
@media (min-width: 700px)  { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.pied h4 { color: #fff; font-family: var(--police-texte); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
/* `width: auto` est indispensable : la balise porte des attributs width et
   height qui ne correspondent pas aux proportions réelles du logo. Sans lui,
   la hauteur imposée ici et la largeur de l'attribut se combinent, et le logo
   apparaît déformé.                                                         */
.pied__logo img { height: 54px; width: auto; margin-bottom: 16px; }
.pied__desc { font-size: .92rem; max-width: 320px; }

.reseaux { display: flex; gap: 9px; margin-top: 18px; }
.reseaux a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.09); display: grid; place-items: center;
  transition: background var(--transition), transform var(--transition);
}
.reseaux a:hover { background: var(--rouge); transform: translateY(-3px); }
.reseaux svg { width: 17px; height: 17px; }

.pied__bas {
  border-top: 1px solid rgba(255,255,255,.11);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .82rem; color: #9C8B7C;
}
.pied__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* Le lien de l'équipe : repérable d'un coup d'oeil par qui le cherche, sans
   ressembler à une rubrique proposée aux clients.                          */
.lien-intranet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .82rem; font-weight: 600;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.lien-intranet svg { width: 15px; height: 15px; }
.lien-intranet:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }

/* ------------------------- 20. BOUTON WHATSAPP ------------------------- */
.wa-flottant {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.42);
  transition: transform var(--transition);
}
.wa-flottant:hover { transform: scale(1.08); }
.wa-flottant svg { width: 29px; height: 29px; }
@media (min-width: 700px) { .wa-flottant { right: 26px; bottom: 26px; } }

/* --------------------------- 21. EN-TÊTE DE PAGE ----------------------- */
.entete-page {
  background: var(--encre); color: #fff; position: relative; overflow: hidden;
  padding: clamp(46px, 7vw, 84px) 0 clamp(38px, 6vw, 66px);
}
.entete-page::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,50,27,.34), transparent 68%);
}
.entete-page h1 { color: #fff; margin-bottom: .25em; }
.entete-page p { color: #C8B8A9; max-width: 620px; margin: 0; }
.fil { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: #A0907F; margin-bottom: 16px; }
.fil a:hover { color: #fff; }

/* ------------------------------ 22. NOTIF ------------------------------ */
.notif {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  z-index: 140; background: var(--encre); color: #fff;
  padding: 13px 22px; border-radius: 100px; box-shadow: var(--ombre-l);
  font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  transition: transform 300ms cubic-bezier(.2,.9,.3,1);
  max-width: calc(100vw - 32px);
}
.notif.est-visible { transform: translate(-50%, 0); }
.notif svg { width: 18px; height: 18px; color: var(--vert-clair); flex-shrink: 0; }

/* ------------------------- 23. DÉTAIL PRODUIT -------------------------- */
.produit-detail { display: grid; gap: clamp(24px, 4vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .produit-detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.produit-detail__media img { width: 100%; border-radius: var(--r-l); box-shadow: var(--ombre-m); }
.fiche-liste { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--bordure); }
.fiche-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--bordure); font-size: .92rem; }
.fiche-liste dt, .fiche-liste .cle { color: var(--gris); }
.fiche-liste .valeur { font-weight: 700; text-align: right; }

/* ------------------------------ 24. UTILS ------------------------------ */
.centre { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-l { margin-top: 34px; }
.texte-gris { color: var(--gris); }
.petit { font-size: .86rem; }

/* Signalétique des contenus provisoires.
   AVANT LA MISE EN LIGNE : supprimez du HTML tous les éléments portant la
   classe .note-interne et toutes les étiquettes .a-renseigner.
   (Pour les masquer d'un coup en attendant : passez `display:none` ci-dessous.) */
.a-renseigner {
  display: inline-block; background: #FFF3CD; color: #7A5B00;
  border: 1px dashed #D9A400; border-radius: 6px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700;
}
.note-interne {
  border-left: 3px solid #D9A400; background: #FFFBF0;
  padding: 12px 14px; border-radius: 0 8px 8px 0;
}

.apparition { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.7,.3,1); }
.apparition.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .apparition { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* Impression : le devis / récapitulatif reste lisible */
@media print {
  .entete, .pied, .wa-flottant, .tiroir, .voile, .menu-mobile, .btn { display: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   25. TYPOGRAPHIE - UNE SEULE RÈGLE POUR TOUT LE SITE
   --------------------------------------------------------------------------
   Deux polices, deux emplois, et rien d'autre :
     • Lora (--police-titre) pour les TITRES et les GRANDS NOMBRES ;
     • Inter (--police-texte) pour TOUT le reste, y compris les boutons,
       les étiquettes, les champs et les tableaux.

   Ce bloc est placé en fin de feuille pour l'emporter sur les déclarations
   antérieures : c'est ce qui garantit qu'aucune police ne se glisse ailleurs
   au fil des ajouts.
   ========================================================================== */

:root {
  /* Échelle de tailles. Toute nouvelle règle pioche ici plutôt que d'inventer
     une valeur : c'est ce qui tient l'ensemble cohérent dans la durée.      */
  --t-xs: .74rem;
  --t-s:  .82rem;
  --t-m:  .92rem;
  --t-l:  1.06rem;
}

body,
input, select, textarea, button,
.badge, .puce, .etiquette, .mention-prix, .btn,
table, th, td, label, legend, figcaption, blockquote footer {
  font-family: var(--police-texte);
}

h1, h2, h3, h4, h5,
.marque__nom, .chiffre__valeur,
.carte-produit__nom, .carte-actu__corps h3,
.bloc-agenda__date strong, .avis-resume__note strong,
.carte-enseigne__corps h3, .enseigne__initiale {
  font-family: var(--police-titre);
}

/* Lora est plus large d'oeil que la police précédente : les titres gagnent
   à être légèrement resserrés, sans quoi les grandes tailles paraissent
   lâches. Le 600 suffit à leur donner du poids, le 700 est réservé aux
   quelques endroits qui doivent vraiment claquer.                          */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.012em; }
h1 { letter-spacing: -0.022em; }

/* Inter rend mieux avec un soupçon de resserrement sur les grands corps et
   des chiffres de même largeur dans les tableaux et les totaux.            */
body { letter-spacing: -0.002em; }
/* Chiffres de même largeur là où ils s'alignent en colonne. Pas sur les
   chiffres clés de l'accueil : ils contiennent du texte ("3 ans"), que les
   chasses fixes espaceraient bizarrement.                                  */
.num, .reference-forte, table.t td, table.t th { font-variant-numeric: tabular-nums; }

.surtitre, .pied h4, .kpi__libelle,
.carte-produit__famille, .carte-actu__meta {
  font-family: var(--police-texte);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}


/* ==========================================================================
   26. CARTES PRODUITS - FINITION
   ========================================================================== */

.carte-produit {
  box-shadow: var(--ombre-s);
}
.carte-produit:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-l);
  border-color: rgba(76,165,36,.35);
}

/* Un léger dégradé au bas de l'image : il détache le produit du fond blanc
   des photos de catalogue, sans rien masquer.                              */
.carte-produit__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to top, rgba(36,26,20,.10), transparent);
  pointer-events: none;
}

.carte-produit__corps { padding: 15px 16px 17px; gap: 0; }
.carte-produit__famille { font-size: var(--t-xs); margin-bottom: 6px; }
.carte-produit__nom { font-size: 1.06rem; margin-bottom: 4px; }
.carte-produit__nom a:hover { color: var(--rouge); }
.carte-produit__format { font-size: var(--t-s); margin-bottom: 10px; }

.carte-produit__note { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.carte-produit__nbavis { font-size: var(--t-xs); color: var(--gris); font-weight: 700; }

.mention-prix { font-size: var(--t-xs); }
.ajout .btn { border-radius: 100px; }

/* Fiche produit : le cadre est CARRÉ et l'image le remplit en se recadrant.
   C'est ce qui empêche une photo au format 4/3 - celle d'une famille, servie
   quand le produit n'a pas encore sa propre photo - d'apparaître étirée.   */
.produit-detail__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--creme-2);
  box-shadow: var(--ombre-m);
}
.produit-detail__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Images d'illustration en deux colonnes : surtout PAS de cadre imposé ici.
   Certaines sont en portrait (la fondatrice), d'autres en paysage ; un cadre
   unique recadrerait les unes ou les autres au mauvais endroit. On laisse
   donc chaque photo garder ses proportions, et on force `height: auto` pour
   qu'aucune règle de hauteur ne vienne les déformer.                       */
.duo__media img { width: 100%; height: auto; }


/* ==========================================================================
   27. NOTATION ET AVIS
   ========================================================================== */

.notation { white-space: nowrap; letter-spacing: 1px; line-height: 1; }
.notation .etoile { color: var(--sable); font-size: .95rem; }
.notation .etoile.est-pleine { color: var(--or); }
.notation--grande .etoile { font-size: 1.3rem; }

.avis-resume {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 20px 24px; margin-bottom: 24px;
}
.avis-resume__note { display: flex; align-items: baseline; gap: 4px; }
.avis-resume__note strong { font-size: 2.6rem; line-height: 1; color: var(--rouge); }
.avis-resume__note span { font-size: var(--t-m); color: var(--gris); }

.liste-avis { display: grid; gap: 14px; }
.avis {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 18px 20px;
}
.avis__haut {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--t-s); color: var(--gris); margin-bottom: 8px;
}
.avis__date { margin-left: auto; }
.avis h3 { font-size: var(--t-l); margin: 0 0 6px; }
.avis p { margin: 0; }
.avis__reponse {
  margin-top: 12px; padding: 11px 14px;
  background: rgba(76,165,36,.08); border-left: 3px solid var(--vert);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: var(--t-m);
}
.avis__reponse strong { color: var(--vert-fonce); }

.donner-avis {
  margin-top: 26px; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--r-m);
  padding: 0 22px;
}
.donner-avis > summary {
  cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.donner-avis > summary::before { content: "+"; color: var(--rouge); font-weight: 800; }
.donner-avis[open] > summary::before { content: "-"; }
.donner-avis > summary::-webkit-details-marker { display: none; }
.donner-avis[open] { padding-bottom: 22px; }

.etoiles-saisie { display: flex; gap: 4px; }
.etoiles-saisie button {
  font-size: 2rem; line-height: 1; color: var(--sable);
  transition: color 120ms ease, transform 120ms ease;
}
.etoiles-saisie button:hover { transform: scale(1.14); }
.etoiles-saisie button.est-pleine { color: var(--or); }

.grille-form { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grille-form { grid-template-columns: 1fr 1fr; } }

.erreur-form {
  margin-top: 12px; padding: 11px 15px; border-radius: var(--r-s);
  background: rgba(217,50,27,.09); border: 1px solid rgba(217,50,27,.3);
  color: #97281A; font-size: var(--t-m); font-weight: 600;
}


/* ==========================================================================
   28. OÙ TROUVER CE PRODUIT
   ========================================================================== */

.ou-acheter {
  margin-top: 34px; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--r-m);
  padding: 22px 24px;
}
.ou-acheter__titre {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600;
  margin-bottom: 14px;
}
.ou-acheter__titre svg { width: 21px; height: 21px; color: var(--rouge); }

.ou-acheter__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .ou-acheter__liste { grid-template-columns: 1fr 1fr; } }
.ou-acheter__liste li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-s);
  background: var(--creme); border: 1px solid var(--bordure);
  transition: border-color var(--transition), transform var(--transition);
}
.ou-acheter__liste li:hover { border-color: var(--vert); transform: translateY(-2px); }
.ou-acheter__liste a, .ou-acheter__liste > li > span:last-child { display: block; }
.ou-acheter__puce {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--rouge); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--t-m);
}
.ou-acheter__liste strong { display: block; font-size: var(--t-m); }
.ou-acheter__ou { display: block; font-size: var(--t-xs); color: var(--gris); }
.ou-acheter__note { display: block; font-size: var(--t-xs); color: var(--vert-fonce); font-weight: 700; margin-top: 3px; }
.ou-acheter__lien { display: block; font-size: var(--t-xs); color: var(--rouge); font-weight: 700; margin-top: 4px; text-decoration: underline; }
.ou-acheter__pied { font-size: var(--t-xs); color: var(--gris); margin: 14px 0 0; }


/* ==========================================================================
   29. ACTUALITÉS
   ========================================================================== */

.grille-actus { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 660px)  { .grille-actus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grille-actus { grid-template-columns: repeat(3, 1fr); } }

.carte-actu {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-actu:hover { transform: translateY(-5px); box-shadow: var(--ombre-l); border-color: transparent; }

.carte-actu__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--creme-2);
}
.carte-actu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.carte-actu:hover .carte-actu__media img { transform: scale(1.06); }

.carte-actu__corps { padding: 17px 19px 20px; display: flex; flex-direction: column; flex: 1; }
.carte-actu__meta {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); color: var(--gris); margin-bottom: 9px;
}
.carte-actu__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.carte-actu__corps h3 { font-size: 1.18rem; margin: 0 0 8px; }
.carte-actu__corps h3 a:hover { color: var(--rouge); }
.carte-actu__corps p { font-size: var(--t-m); color: var(--gris); margin: 0 0 14px; }

.lien-fleche {
  margin-top: auto; font-size: var(--t-s); font-weight: 700; color: var(--rouge);
  display: inline-flex; align-items: center; gap: 7px;
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* Étiquettes de type, posées sur l'image */
.etiquette--or    { background: var(--or);   color: #3A2708; }
.etiquette--rouge { background: var(--rouge); color: #fff; }
.etiquette--encre { background: var(--encre); color: #fff; }

/* Raccourcis de la page d'accueil */
.raccourcis-accueil { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 900px) { .raccourcis-accueil { grid-template-columns: 1fr 1fr; } }

.bloc-agenda, .bloc-emploi {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 22px 24px; height: 100%;
}
.bloc-agenda__date {
  width: 74px; flex-shrink: 0; text-align: center;
  background: var(--rouge); color: #fff; border-radius: var(--r-m);
  padding: 12px 6px;
}
.bloc-agenda__date strong { display: block; font-size: 2rem; line-height: 1; }
.bloc-agenda__date span { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.bloc-agenda h3, .bloc-emploi h3 { font-size: 1.2rem; margin: 6px 0 6px; }
.bloc-agenda p, .bloc-emploi p { font-size: var(--t-m); color: var(--gris); margin: 0 0 12px; }
.bloc-emploi { justify-content: space-between; }
.bloc-emploi > div { flex: 1; min-width: 220px; }


/* ==========================================================================
   30. ARTICLE (PAGE ACTUALITÉ)
   ========================================================================== */

.article__entete { margin-bottom: 26px; }
.article__entete .etiquette { position: static; display: inline-block; margin-bottom: 14px; }
.article__entete h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: .3em; }
.article__date { font-size: var(--t-s); color: var(--gris); margin-bottom: 14px; }
.article__chapo { font-size: var(--t-l); color: var(--encre-2); font-weight: 600; margin: 0; }

.article__image { margin: 0 0 28px; border-radius: var(--r-l); overflow: hidden; background: var(--creme-2); }
.article__image img { width: 100%; height: auto; display: block; }

/* Le corps de l'article vient de l'éditeur de l'intranet : ces règles sont
   ce qui donne au texte saisi là-bas l'allure du reste du site.            */
.article__corps { font-size: var(--t-l); line-height: 1.75; }
.article__corps h3 { font-size: 1.5rem; margin: 1.6em 0 .5em; }
.article__corps h4 { font-size: 1.2rem; margin: 1.4em 0 .4em; }
.article__corps p { margin: 0 0 1.1em; }
.article__corps ul, .article__corps ol { margin: 0 0 1.2em; padding-left: 26px; }
.article__corps li { margin-bottom: .4em; }
.article__corps blockquote {
  margin: 1.6em 0; padding: 16px 22px;
  background: var(--creme-2); border-left: 4px solid var(--vert);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-family: var(--police-titre); font-size: 1.15rem; font-style: italic;
}
.article__corps img { border-radius: var(--r-m); margin: 1.4em 0; box-shadow: var(--ombre-s); }
.article__corps a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.article__corps table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--t-m); }
.article__corps td, .article__corps th { border: 1px solid var(--bordure); padding: 9px 12px; text-align: left; }

.article__source {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--bordure);
  font-size: var(--t-s); color: var(--gris);
}
.article__source a { color: var(--rouge); font-weight: 700; }


/* ==========================================================================
   31. ESPACE CLIENT
   ========================================================================== */

.bloc-espace {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-l); padding: clamp(20px, 3vw, 30px);
  margin-bottom: 20px;
}
.bloc-espace h2 { font-size: 1.4rem; margin-bottom: 16px; }
.bloc-espace > p { font-size: var(--t-m); color: var(--gris); }

.liste-suivi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-suivi li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r-s);
  background: var(--creme); border: 1px solid var(--bordure);
}
.liste-suivi strong { display: block; font-size: var(--t-m); }
.liste-suivi .petit { display: block; }
.liste-suivi .btn { padding: 8px 16px; font-size: var(--t-s); }

.rond-vert {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
  background: rgba(76,165,36,.14); color: var(--vert-fonce);
  display: grid; place-items: center;
}
.rond-vert svg { width: 30px; height: 30px; }
.reference-forte {
  font-family: var(--police-titre); font-size: 1.7rem; font-weight: 600;
  color: var(--rouge); letter-spacing: .04em; margin: 10px 0 22px;
}

/* Formulaire en deux colonnes, avec l'aide à droite */
.duo--formulaire { grid-template-columns: 1fr; }
@media (min-width: 940px) { .duo--formulaire { grid-template-columns: 1.5fr 1fr; } }

/* Séparateur du menu mobile, entre pages principales et secondaires */
.menu-mobile__sep {
  height: 1px; background: var(--bordure); margin: 10px 0; list-style: none;
}


/* ==========================================================================
   32. VITRINE DES REVENDEURS
   --------------------------------------------------------------------------
   Les cartes doivent tenir debout avec ou sans image : beaucoup d'enseignes
   n'ont pas de logo exploitable. D'où la pastille à l'initiale, qui occupe
   le même cadre et garde la grille régulière.
   ========================================================================== */

.grille-enseignes { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grille-enseignes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grille-enseignes { grid-template-columns: repeat(3, 1fr); } }

.carte-enseigne {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-enseigne:hover { transform: translateY(-5px); box-shadow: var(--ombre-l); border-color: transparent; }

.carte-enseigne__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--creme-2); display: grid; place-items: center;
}
/* object-fit: contain et non cover : un logo recadré est un logo abîmé. */
.carte-enseigne__media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.carte-enseigne__media.est-vide { background: linear-gradient(135deg, var(--creme-2), var(--sable)); }
.carte-enseigne__media .etiquette { top: 10px; left: 10px; }

.enseigne__initiale {
  font-family: var(--police-titre); font-size: 2.6rem; font-weight: 600;
  color: var(--rouge); line-height: 1;
}

.carte-enseigne__corps { padding: 17px 19px 20px; display: flex; flex-direction: column; flex: 1; }
.carte-enseigne__corps h3 { font-size: 1.14rem; margin: 0 0 8px; }
.carte-enseigne__corps p { font-size: var(--t-m); color: var(--gris); margin: 0 0 10px; }

.carte-enseigne__ou { display: flex; align-items: flex-start; gap: 7px; font-size: var(--t-s); }
.carte-enseigne__ou svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--rouge); }

.carte-enseigne__gamme {
  font-size: var(--t-xs); font-weight: 700; color: var(--vert-fonce);
  margin: 0 0 12px;
}
.carte-enseigne .lien-fleche { margin-top: auto; }


/* ==========================================================================
   33. LE PANIER, RENDU VISIBLE
   --------------------------------------------------------------------------
   Le panier vivait en haut à droite, là où un visiteur pressé ne regarde pas,
   et sur téléphone il quittait l'écran au premier défilement. Trois gestes le
   ramènent sous les yeux : le compteur posé sur la carte du produit, la
   pastille qui bat à l'ajout, et la barre de rappel en bas de l'écran.
   ========================================================================== */

/* --- Le compteur, là où l'on vient de cliquer --- */
.ajout { display: flex; gap: 8px; align-items: center; }
.ajout .btn { flex: 1; }
.ajout .compteur { flex: 1; justify-content: space-between; }

.compteur {
  background: var(--creme-2);
  border: 1px solid var(--bordure);
}
/* 38 px : au-dessous, la cible devient difficile à viser au pouce. */
.compteur button { width: 38px; height: 38px; font-size: 1.15rem; }
.compteur button:active { background: var(--vert); color: #fff; }
.compteur span { min-width: 34px; font-size: 1rem; }

/* Sur la fiche produit, le compteur a la taille d'un grand bouton. */
.ajout--fiche { flex: 0 1 auto; }
.ajout--fiche .btn { padding: 15px 34px; font-size: 1rem; }
.ajout--fiche .compteur { padding: 5px; }
.ajout--fiche .compteur button { width: 46px; height: 46px; font-size: 1.3rem; }
.ajout--fiche .compteur span { min-width: 46px; font-size: 1.15rem; }

/* --- La pastille qui bat --- */
@keyframes bat-pastille {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.pastille.bat, .barre-commande__compte.bat { animation: bat-pastille 480ms cubic-bezier(.2,.9,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .pastille.bat, .barre-commande__compte.bat { animation: none; }
}

/* --- La barre de rappel, en bas de l'écran --- */
.barre-commande {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: none; align-items: center; gap: 12px;
  padding: 11px var(--gouttiere);
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(36,26,20,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 -6px 24px rgba(36,26,20,.22);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(.2,.9,.3,1);
}
.barre-commande.est-visible { display: flex; transform: translateY(0); }

.barre-commande__voir {
  display: flex; align-items: center; gap: 9px;
  color: var(--creme); font-size: .9rem; font-weight: 600;
  flex: 1; min-width: 0; text-align: left;
  padding: 6px 0;
}
.barre-commande__voir svg { width: 22px; height: 22px; flex-shrink: 0; }
.barre-commande__voir > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barre-commande__compte {
  min-width: 26px; height: 26px; padding: 0 8px; flex-shrink: 0;
  border-radius: 100px; background: var(--rouge); color: #fff;
  font-size: .82rem; font-weight: 800; line-height: 26px; text-align: center;
}
.barre-commande__envoyer { padding: 12px 22px; flex-shrink: 0; }

/* Le bouton WhatsApp remonte pour ne pas passer sous la barre. */
body.a-barre-commande .wa-flottant { bottom: 82px; }

/* On réserve la hauteur de la barre, sinon elle masque le pied de page. */
body.a-barre-commande { padding-bottom: 72px; }

/* La notification remonte au-dessus de la barre, sinon elle passe dessous
   et le message de confirmation ne se lit pas.                            */
body.a-barre-commande .notif { bottom: 92px; }

@media print { .barre-commande { display: none !important; } }


/* ==========================================================================
   34. LE FIL D'ACTUALITÉS, PAR RUBRIQUES
   ========================================================================== */

.rubrique-actus { margin-bottom: clamp(32px, 5vw, 54px); }
.rubrique-actus:last-child { margin-bottom: 0; }

.rubrique-actus__titre {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bordure);
}
.rubrique-actus__compte {
  font-family: var(--police-texte);
  font-size: .78rem; font-weight: 800;
  background: var(--creme-2); color: var(--gris);
  border-radius: 100px; padding: 3px 11px;
}

/* Une publication terminée reste consultable, mais cesse d'attirer l'oeil. */
.carte-actu.est-terminee .carte-actu__media img { filter: grayscale(.55) opacity(.82); }
.carte-actu.est-terminee .carte-actu__corps h3 { color: var(--gris); }
.etiquette--termine {
  top: auto; bottom: 10px; left: 10px;
  background: rgba(36,26,20,.82); color: #fff;
}


/* ==========================================================================
   35. LE TÉLÉPHONE D'ABORD
   --------------------------------------------------------------------------
   La majorité des visiteurs arriveront d'un téléphone, souvent d'entrée de
   gamme et sur une connexion lente. Ce bloc règle ce qui, mesure à l'appui,
   gênait réellement : des cibles trop petites pour le pouce, un mur de
   filtres avant le premier produit, et des libellés sous la taille lisible.
   ========================================================================== */

/* Le retour au toucher : sans lui, l'interface paraît ne pas répondre. */
a, button, [role="button"], .carte-produit, .carte-actu, .carte-enseigne {
  -webkit-tap-highlight-color: rgba(76,165,36,.16);
}
.btn:active { transform: scale(.97); }
.carte-produit:active, .carte-actu:active { transform: translateY(-2px); }

/* Une ancre ne doit pas atterrir sous l'en-tête collant. */
html { scroll-padding-top: calc(var(--entete-h) + 12px); }

/* Les libellés que le client lit vraiment ne descendent pas sous 12 px. */
@media (max-width: 760px) {
  :root { --t-xs: .78rem; --t-s: .86rem; }

  /* Cibles tactiles : 44 px est le minimum confortable au pouce. */
  .selecteur-langue button { min-width: 42px; min-height: 40px; }
  .puce { min-height: 42px; padding-block: 0; display: inline-flex; align-items: center; }
  .coeur { width: 40px; height: 40px; }
  .coeur svg { width: 19px; height: 19px; }
  .ajout .btn { min-height: 44px; }
  .compteur button { width: 42px; height: 42px; }

  /* Les liens du pied de page étaient hauts de 22 px, impossibles à viser
     sans se tromper de ligne.                                             */
  .pied ul a { display: inline-block; padding: 5px 0; }

  /* Le bandeau laisse entrevoir ce qui suit : on comprend qu'on peut
     faire défiler, ce qu'un bandeau pleine hauteur ne dit pas.            */
  .hero { min-height: min(72vh, 560px); }
}

/* --- Les filtres, en une seule ligne qui défile ---------------------------
   Six familles aux noms longs se répartissaient sur six lignes : 299 px de
   haut avant le premier produit, sur un écran qui en fait 812. La rangée
   qui défile latéralement rend les filtres accessibles sans rien coûter à
   la hauteur de page.                                                      */
@media (max-width: 760px) {
  .puces {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* on laisse la rangée filer jusqu'aux bords de l'écran */
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    padding-bottom: 4px;
  }
  .puces::-webkit-scrollbar { display: none; }
  .puce { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  .barre-filtres { gap: 10px; }
  .barre-filtres .btn { width: 100%; }
}


/* ==========================================================================
   36. LA CARTE PRODUIT, PLUS ATTIRANTE
   --------------------------------------------------------------------------
   Le produit est ce qu'on vient voir : la carte lui donne la place, et le
   reste se range autour. Les hauteurs sont rendues régulières pour que la
   grille ne soit pas en dents de scie.
   ========================================================================== */

/* La famille tenait sur trois lignes et mangeait la carte. Une ligne, et
   l'essentiel reste lisible.                                               */
.carte-produit__famille {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}

/* Le nom occupe deux lignes au plus : les cartes gardent la même hauteur,
   et la grille reste calme.                                                */
.carte-produit__nom {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.carte-produit__format {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Le prix sur devis est une mention, pas un titre : il s'efface au profit
   du nom et du bouton.                                                     */
.mention-prix {
  background: transparent; border-color: transparent;
  padding-inline: 0; color: var(--gris); font-weight: 600;
}

.carte-produit__media { border-bottom: 1px solid var(--bordure); }

/* Deux colonnes dès le plus petit écran, trois dès qu'il y a la place :
   voir plusieurs produits à la fois donne envie d'en regarder un.          */
@media (max-width: 460px) {
  .grille-produits { gap: 13px; }
  .carte-produit__corps { padding: 12px 12px 14px; }
}