/* ==========================================================================
   Maison de Pays de Nozeroy — Feuille de styles principale
   Thème : Jura / Terroir / Nature
   Approche : Mobile-first, accessibilité WCAG 2.1 AA
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS (Custom Properties)
   ========================================================================== */

:root {
  /* Palette de couleurs */
  --couleur-vert:       #2d5a27;
  --couleur-vert-clair: #3d7a35;
  --couleur-vert-pale:  #e8f0e6;
  --couleur-dore:       #c8941a;
  --couleur-dore-clair: #d9a82a;
  --couleur-creme:      #f5f0e8;
  --couleur-terre:      #8b6b4a;
  --couleur-terre-clair:#a07c58;
  --couleur-blanc:      #fefcf8;
  --couleur-texte:      #1a1a1a;
  --couleur-texte-doux: #4a4a4a;
  --couleur-gris:       #6b6b6b;
  --couleur-gris-clair: #e8e3db;
  --couleur-erreur:     #c0392b;
  --couleur-succes:     #27ae60;
  --couleur-info:       #2980b9;

  /* Typographie */
  --police-titre:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --police-corps:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --taille-xs:     0.75rem;   /* 12px */
  --taille-sm:     0.875rem;  /* 14px */
  --taille-base:   1rem;      /* 16px */
  --taille-md:     1.125rem;  /* 18px */
  --taille-lg:     1.25rem;   /* 20px */
  --taille-xl:     1.5rem;    /* 24px */
  --taille-2xl:    2rem;      /* 32px */
  --taille-3xl:    2.5rem;    /* 40px */
  --taille-4xl:    3rem;      /* 48px */
  --graisse-normal: 400;
  --graisse-medium: 500;
  --graisse-semi:   600;
  --graisse-bold:   700;
  --hauteur-ligne:  1.6;

  /* Espacement */
  --espace-xs:  0.25rem;   /* 4px */
  --espace-sm:  0.5rem;    /* 8px */
  --espace-md:  1rem;      /* 16px */
  --espace-lg:  1.5rem;    /* 24px */
  --espace-xl:  2rem;      /* 32px */
  --espace-2xl: 3rem;      /* 48px */
  --espace-3xl: 4rem;      /* 64px */
  --espace-4xl: 6rem;      /* 96px */

  /* Layout */
  --largeur-max:      1200px;
  --largeur-max-sm:   768px;
  --hauteur-header:   70px;

  /* Bordures et ombres */
  --rayon-sm:   4px;
  --rayon-md:   8px;
  --rayon-lg:   12px;
  --rayon-xl:   16px;
  --rayon-full: 9999px;
  --ombre-sm:   0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --ombre-md:   0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
  --ombre-lg:   0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --ombre-xl:   0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-rapide:  150ms ease;
  --transition-normale: 250ms ease;
  --transition-lente:   400ms ease;
}

/* ==========================================================================
   2. RESET CSS MINIMAL
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  line-height: var(--hauteur-ligne);
  color: var(--couleur-texte);
  background-color: var(--couleur-blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--couleur-vert);
  text-decoration: underline;
  transition: color var(--transition-normale);
}

a:hover {
  color: var(--couleur-vert-clair);
}

ul, ol {
  list-style: none;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  line-height: 1.2;
  color: var(--couleur-vert);
}

/* Focus visible pour l'accessibilité */
:focus-visible {
  outline: 3px solid var(--couleur-dore);
  outline-offset: 2px;
  border-radius: var(--rayon-sm);
}

/* ==========================================================================
   3. UTILITAIRES — Container, Sections, Textes
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-md);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--espace-xl);
  }
}

.section {
  padding-block: var(--espace-3xl);
}

.section--creme {
  background-color: var(--couleur-creme);
}

/* ── Bannière image du Guide pratique (accueil) ── */
.guide-bandeau {
  padding-block: var(--espace-xl);
}

.guide-bandeau__conteneur {
  display: flex;
  justify-content: center;
}

.guide-bandeau__lien {
  display: block;
  width: 100%;
  max-width: 745px;
  margin-inline: auto;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-md);
  transition: transform var(--transition-normale), box-shadow var(--transition-normale);
}

.guide-bandeau__lien:hover,
.guide-bandeau__lien:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ombre-lg);
}

.guide-bandeau__image {
  display: block;
  width: 100%;
  height: auto;
}

.section--vert {
  background-color: var(--couleur-vert);
  color: var(--couleur-blanc);
}

.section--vert h2,
.section--vert h3,
.section--vert h4 {
  color: var(--couleur-dore);
}

.section__en-tete {
  text-align: center;
  margin-bottom: var(--espace-2xl);
}

.section__titre {
  font-size: var(--taille-2xl);
  font-weight: var(--graisse-bold);
  margin-bottom: var(--espace-md);
}

@media (min-width: 768px) {
  .section__titre {
    font-size: var(--taille-3xl);
  }
}

.section__sous-titre {
  font-size: var(--taille-md);
  color: var(--couleur-texte-doux);
  max-width: 600px;
  margin-inline: auto;
}

.section--vert .section__sous-titre {
  color: var(--couleur-creme);
}

.texte-centre { text-align: center; }
.texte-gauche { text-align: left; }
.texte-droit  { text-align: right; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

h1 { font-size: clamp(1.8rem, 5vw, var(--taille-4xl)); }
h2 { font-size: clamp(1.5rem, 4vw, var(--taille-3xl)); }
h3 { font-size: clamp(1.2rem, 3vw, var(--taille-2xl)); }
h4 { font-size: var(--taille-xl); }
h5 { font-size: var(--taille-lg); }
h6 { font-size: var(--taille-md); }

p { margin-bottom: var(--espace-md); }
p:last-child { margin-bottom: 0; }

.texte-dore  { color: var(--couleur-dore); }
.texte-vert  { color: var(--couleur-vert); }
.texte-terre { color: var(--couleur-terre); }
.texte-doux  { color: var(--couleur-texte-doux); }

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  font-weight: var(--graisse-semi);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--rayon-md);
  cursor: pointer;
  transition: all var(--transition-normale);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 3px solid var(--couleur-dore);
  outline-offset: 2px;
}

/* Bouton primaire */
.btn--primaire {
  background-color: var(--couleur-vert);
  color: var(--couleur-blanc);
  border-color: var(--couleur-vert);
}

.btn--primaire:hover {
  background-color: var(--couleur-vert-clair);
  border-color: var(--couleur-vert-clair);
  color: var(--couleur-blanc);
  transform: translateY(-1px);
  box-shadow: var(--ombre-md);
}

.btn--primaire:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Bouton secondaire */
.btn--secondaire {
  background-color: transparent;
  color: var(--couleur-vert);
  border-color: var(--couleur-vert);
}

.btn--secondaire:hover {
  background-color: var(--couleur-vert);
  color: var(--couleur-blanc);
  transform: translateY(-1px);
  box-shadow: var(--ombre-md);
}

/* Bouton doré */
.btn--dore {
  background-color: var(--couleur-dore);
  color: var(--couleur-blanc);
  border-color: var(--couleur-dore);
}

.btn--dore:hover {
  background-color: var(--couleur-dore-clair);
  border-color: var(--couleur-dore-clair);
  color: var(--couleur-blanc);
  transform: translateY(-1px);
  box-shadow: var(--ombre-md);
}

/* Bouton blanc (sur fond sombre) */
.btn--blanc {
  background-color: var(--couleur-blanc);
  color: var(--couleur-vert);
  border-color: var(--couleur-blanc);
}

.btn--blanc:hover {
  background-color: var(--couleur-creme);
  color: var(--couleur-vert);
  transform: translateY(-1px);
  box-shadow: var(--ombre-md);
}

/* Bouton outline blanc */
.btn--outline-blanc {
  background-color: transparent;
  color: var(--couleur-blanc);
  border-color: var(--couleur-blanc);
}

.btn--outline-blanc:hover {
  background-color: var(--couleur-blanc);
  color: var(--couleur-vert);
  transform: translateY(-1px);
}

/* Tailles */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--taille-sm);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--taille-lg);
}

.btn--plein-largeur {
  width: 100%;
  justify-content: center;
}

/* Bouton danger */
.btn--danger {
  background-color: var(--couleur-erreur);
  color: var(--couleur-blanc);
  border-color: var(--couleur-erreur);
}

.btn--danger:hover {
  background-color: #a93226;
  border-color: #a93226;
  color: var(--couleur-blanc);
}

/* ==========================================================================
   6. HEADER ET NAVIGATION
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--couleur-blanc);
  border-bottom: 3px solid var(--couleur-dore);
  box-shadow: var(--ombre-sm);
  height: var(--hauteur-header);
}

.header__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--espace-md);
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.header__logo-icone {
  height: 3rem;
  width: auto;
  display: block;
  object-fit: contain;
}

.header__logo-texte {
  display: flex;
  flex-direction: column;
}

.header__logo-nom {
  font-family: var(--police-titre);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
  line-height: 1.1;
}

.header__logo-sous-nom {
  font-size: var(--taille-xs);
  color: var(--couleur-terre);
  font-weight: var(--graisse-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 400px) {
  .header__logo-nom {
    font-size: var(--taille-base);
  }
}

/* Navigation principale */
.nav {
  display: none;
  position: fixed;
  top: var(--hauteur-header);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--couleur-blanc);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-lg);
  z-index: 999;
  overflow-y: auto;
  padding: var(--espace-xl);
}

.nav.nav--ouvert {
  display: flex;
}

.nav__liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-md);
}

.nav__lien {
  font-size: var(--taille-lg);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
  text-decoration: none;
  padding: var(--espace-sm) var(--espace-md);
  border-radius: var(--rayon-md);
  transition: all var(--transition-normale);
  position: relative;
}

.nav__lien::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--couleur-dore);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-normale);
}

.nav__lien:hover,
.nav__lien:focus {
  color: var(--couleur-vert);
  text-decoration: none;
}

.nav__lien:hover::after,
.nav__lien--actif::after {
  transform: scaleX(1);
}

.nav__lien--actif {
  color: var(--couleur-vert);
  font-weight: var(--graisse-bold);
}

@media (min-width: 900px) {
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
    overflow: visible;
  }

  .nav__liste {
    flex-direction: row;
    gap: var(--espace-xs);
  }

  .nav__lien {
    font-size: var(--taille-base);
  }
}

/* Actions header (recherche + panier + burger) */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  flex-shrink: 0;
}

/* Barre de recherche dans le header */
.header__recherche {
  position: relative;
  display: flex;
  align-items: center;
}

.header__recherche-champ {
  width: 130px;
  padding: 0.35rem 1.9rem 0.35rem 0.65rem;
  border: 1.5px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-full);
  font-size: var(--taille-sm);
  font-family: var(--police-corps);
  background-color: var(--couleur-creme);
  color: var(--couleur-texte);
  transition: border-color var(--transition-normale), width var(--transition-normale), box-shadow var(--transition-normale);
  outline: none;
}

.header__recherche-champ:focus {
  border-color: var(--couleur-vert);
  background-color: var(--couleur-blanc);
  width: 180px;
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.12);
}

.header__recherche-champ::placeholder {
  color: var(--couleur-texte-doux);
}

.header__recherche-icone {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.85rem;
  opacity: 0.6;
}

@media (min-width: 900px) {
  .header__recherche-champ {
    width: 180px;
  }
  .header__recherche-champ:focus {
    width: 240px;
  }
}

@media (max-width: 480px) {
  .header__recherche-champ {
    width: 90px;
    font-size: 0.75rem;
    padding: 0.3rem 1.6rem 0.3rem 0.5rem;
  }
  .header__recherche-champ:focus {
    width: 120px;
  }
}

/* Icône panier */
.panier-icone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--rayon-md);
  transition: background-color var(--transition-normale);
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--couleur-texte);
}

.panier-icone:hover {
  background-color: var(--couleur-creme);
  color: var(--couleur-vert);
}

.panier-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  background-color: var(--couleur-dore);
  color: white;
  font-size: 11px;
  font-weight: var(--graisse-bold);
  border-radius: var(--rayon-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  transition: transform var(--transition-rapide);
}

.panier-badge--pulse {
  animation: pulseBadge 0.3s ease;
}

@keyframes pulseBadge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Menu burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--rayon-md);
  transition: background-color var(--transition-normale);
  z-index: 1001;
}

.burger:hover {
  background-color: var(--couleur-creme);
}

.burger__barre {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--couleur-texte);
  border-radius: 2px;
  transition: all var(--transition-normale);
  transform-origin: center;
}

.burger[aria-expanded="true"] .burger__barre:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__barre:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger[aria-expanded="true"] .burger__barre:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

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

/* ==========================================================================
   7. FIL D'ARIANE (Breadcrumb)
   ========================================================================== */

.fil-ariane {
  background-color: var(--couleur-creme);
  border-bottom: 1px solid var(--couleur-gris-clair);
  padding: var(--espace-sm) 0;
}

.fil-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  align-items: center;
  list-style: none;
}

.fil-ariane__element {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
}

.fil-ariane__element:not(:last-child)::after {
  content: '›';
  color: var(--couleur-gris);
}

.fil-ariane__lien {
  color: var(--couleur-vert);
  text-decoration: none;
  font-weight: var(--graisse-medium);
}

.fil-ariane__lien:hover {
  text-decoration: underline;
}

.fil-ariane__courant {
  color: var(--couleur-gris);
  font-weight: var(--graisse-normal);
}

/* ==========================================================================
   8. HERO SECTION
   ========================================================================== */

.hero {
  min-height: calc(100vh - var(--hauteur-header));
  min-height: 500px;
  display: flex;
  align-items: center;
  background-image: url('../img/Header/Maison de pays nozeroy.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  padding: var(--espace-3xl) 0;
}

.hero__contenu {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--couleur-blanc);
  max-width: 800px;
  margin-inline: auto;
}

.hero__badge {
  display: inline-block;
  position: relative;
  top: clamp(-3rem, -6vw, -1.5rem);
  background-color: rgba(200, 148, 26, 0.25);
  border: 1px solid rgba(200, 148, 26, 0.5);
  color: var(--couleur-blanc);
  padding: var(--espace-xs) var(--espace-md);
  border-radius: var(--rayon-full);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--espace-lg);
}

.hero__titre {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: var(--graisse-bold);
  color: var(--couleur-blanc);
  margin-bottom: var(--espace-lg);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1.15;
}

.hero__titre span {
  color: var(--couleur-vert);
  font-size: 1.25em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 2.5px #ffffff;
  paint-order: stroke fill;
}

.hero__sous-titre {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--espace-2xl);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-md);
  justify-content: center;
  margin-bottom: 0;
}

/* ==========================================================================
   9. CHIFFRES CLÉS
   ========================================================================== */

.chiffres-cles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--espace-xl);
  text-align: center;
  margin-top: var(--espace-2xl);
}

.chiffre-cle {
  padding: var(--espace-lg);
}

.chiffre-cle__nombre {
  font-family: var(--police-titre);
  font-size: var(--taille-4xl);
  font-weight: var(--graisse-bold);
  color: var(--couleur-dore);
  line-height: 1;
  margin-bottom: var(--espace-xs);
}

.chiffre-cle__label {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  font-weight: var(--graisse-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   10. CARTES PRODUITS
   ========================================================================== */

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

.bandeau-avenir {
  grid-column: 1 / -1;
  padding: var(--espace-md) var(--espace-lg);
  background-color: var(--couleur-vert-pale);
  border: 2px dashed var(--couleur-vert-clair);
  border-radius: var(--rayon-lg);
  text-align: center;
  color: var(--couleur-vert);
  font-weight: 600;
  font-size: var(--taille-md);
}

.carte-produit {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  transition: transform var(--transition-normale), box-shadow var(--transition-normale);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--couleur-gris-clair);
}

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

.carte-produit__image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--couleur-vert-pale), var(--couleur-creme));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
  overflow: hidden;
}

.carte-produit__image--grand {
  font-size: 5rem;
  aspect-ratio: 1/1;
}


.carte-produit__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte-produit__badges {
  position: absolute;
  top: var(--espace-sm);
  left: var(--espace-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

.carte-produit__corps {
  padding: var(--espace-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--espace-sm);
}

.carte-produit__categorie {
  font-size: var(--taille-xs);
  color: var(--couleur-terre);
  font-weight: var(--graisse-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.carte-produit__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  color: var(--couleur-texte);
  font-weight: var(--graisse-semi);
  line-height: 1.3;
}

.carte-produit__nom a {
  text-decoration: none;
  color: inherit;
}

.carte-produit__fournisseur {
  font-size: var(--taille-xs);
  color: var(--couleur-terre);
  font-style: italic;
  margin-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-produit__description {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
  line-height: 1.5;
  flex: 1;
}

.carte-produit__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  margin-top: auto;
  padding-top: var(--espace-sm);
  border-top: 1px solid var(--couleur-gris-clair);
}

.carte-produit__prix {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
}

.carte-produit__unite {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  font-weight: var(--graisse-normal);
}

.carte-produit__stock {
  font-size: var(--taille-xs);
  color: var(--couleur-succes);
  font-weight: var(--graisse-medium);
}

.carte-produit__stock--epuise {
  color: var(--couleur-erreur);
}

/* Sélecteur de variantes (goûts / parfums) */
.carte-produit__variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.variante-pill {
  font-size: var(--taille-xs);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1.5px solid var(--couleur-gris-clair);
  background: var(--couleur-blanc);
  color: var(--couleur-texte-doux);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.variante-pill:hover {
  border-color: var(--couleur-vert);
  color: var(--couleur-vert);
}

.variante-pill--active {
  background: var(--couleur-vert);
  border-color: var(--couleur-vert);
  color: var(--couleur-blanc);
  font-weight: var(--graisse-semi);
}

/* ==========================================================================
   11. BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-semi);
  border-radius: var(--rayon-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--vert     { background-color: var(--couleur-vert-pale); color: var(--couleur-vert); }
.badge--dore     { background-color: #fef3d0; color: #8a6310; }
.badge--terre    { background-color: #f0e8e0; color: var(--couleur-terre); }
.badge--nouveau  { background-color: var(--couleur-dore); color: white; }
.badge--promo    { background-color: var(--couleur-erreur); color: white; }
.badge--bio      { background-color: #d4edda; color: #155724; }
.badge--aop      { background-color: #cce5ff; color: #004085; }
.badge--info     { background-color: #d1ecf1; color: #0c5460; }

/* Badges catégories boutique */
.badge--fromages    { background-color: #fff3cd; color: #856404; }
.badge--charcuterie { background-color: #f8d7da; color: #721c24; }
.badge--vins        { background-color: #e8d5f0; color: #5b2c6f; }
.badge--confitures  { background-color: #fce4ec; color: #880e4f; }
.badge--miel        { background-color: #fff8e1; color: #f57f17; }
.badge--artisanat   { background-color: #e8f5e9; color: #1b5e20; }
.badge--alcools     { background-color: #ede0f5; color: #6b2fa0; }
.badge--boissons    { background-color: #d4f1f4; color: #065f7e; }
.badge--artisanat   { background-color: #fde8d8; color: #9c4221; }
.badge--livres      { background-color: #dbeafe; color: #1e40af; }
.badge--spiruline   { background-color: #d1fae5; color: #065f46; }

/* ==========================================================================
   12. CARTES SERVICES
   ========================================================================== */

.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espace-lg);
}

.carte-service {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  padding: var(--espace-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  border: 1px solid var(--couleur-gris-clair);
  transition: transform var(--transition-normale), box-shadow var(--transition-normale);
}

.carte-service:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
  border-color: var(--couleur-dore);
}

.carte-service__icone {
  font-size: 2.5rem;
  line-height: 1;
}

.carte-service__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  color: var(--couleur-vert);
}

.carte-service__description {
  font-size: var(--taille-base);
  color: var(--couleur-texte-doux);
  flex: 1;
}

.carte-service__tarifs {
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
  padding: var(--espace-md);
}

.carte-service__tarif-titre {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-vert);
  margin-bottom: var(--espace-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carte-service__tarif-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.carte-service__tarif-ligne {
  display: flex;
  justify-content: space-between;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
}

.carte-service__tarif-ligne strong {
  color: var(--couleur-texte);
}

/* ==========================================================================
   13. CARTES ACTUALITÉS
   ========================================================================== */

.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espace-lg);
}

.carte-article {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--couleur-gris-clair);
  transition: transform var(--transition-normale), box-shadow var(--transition-normale);
}

.carte-article:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
}

.carte-article__image {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--couleur-vert-pale), var(--couleur-creme));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.carte-article__corps {
  padding: var(--espace-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--espace-sm);
}

.carte-article__meta {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  flex-wrap: wrap;
}

.carte-article__date {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  font-weight: var(--graisse-medium);
}

.carte-article__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-texte);
  line-height: 1.3;
}

.carte-article__extrait {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
  line-height: 1.6;
  flex: 1;
}

.carte-article__lien {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-vert);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: auto;
  padding-top: var(--espace-sm);
  transition: gap var(--transition-normale), color var(--transition-normale);
}

.carte-article__lien:hover {
  color: var(--couleur-vert-clair);
  gap: var(--espace-sm);
}

/* Article à la une */
.article-une {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-md);
  overflow: hidden;
  border: 1px solid var(--couleur-gris-clair);
  margin-bottom: var(--espace-2xl);
}

@media (min-width: 768px) {
  .article-une {
    grid-template-columns: 1fr 1fr;
  }
}

.article-une__image {
  min-height: 300px;
  background: linear-gradient(135deg, var(--couleur-vert), #1a3a15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
}

.article-une__corps {
  padding: var(--espace-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  justify-content: center;
}

.article-une__badge {
  align-self: flex-start;
}

.article-une__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--couleur-texte);
  line-height: 1.2;
}

.article-une__extrait {
  color: var(--couleur-texte-doux);
  line-height: 1.7;
}

/* ==========================================================================
   13b. GALERIE D'AFFICHES (ACTUALITÉS)
   ========================================================================== */

.grille-affiches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-lg);
}

@media (min-width: 600px) {
  .grille-affiches {
    grid-template-columns: repeat(2, 1fr);
  }
}

.carte-affiche {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  border: 1px solid var(--couleur-gris-clair);
  transition: transform var(--transition-normale), box-shadow var(--transition-normale);
}

.carte-affiche:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
}

.carte-affiche__lien {
  display: block;
}

.carte-affiche__img {
  display: block;
  width: 100%;
  height: auto;
}

.carte-affiche__legende {
  padding: var(--espace-md) var(--espace-lg);
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
  text-align: center;
}

/* ==========================================================================
   14. FORMULAIRES
   ========================================================================== */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-lg);
}

.formulaire__groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.formulaire__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-lg);
}

@media (min-width: 600px) {
  .formulaire__grille--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.formulaire__label {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
}

.formulaire__label--requis::after {
  content: ' *';
  color: var(--couleur-erreur);
}

.formulaire__champ {
  width: 100%;
  padding: 0.75rem var(--espace-md);
  font-size: var(--taille-base);
  color: var(--couleur-texte);
  background-color: var(--couleur-blanc);
  border: 2px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-md);
  transition: border-color var(--transition-normale), box-shadow var(--transition-normale);
  appearance: none;
}

.formulaire__champ:focus {
  outline: none;
  border-color: var(--couleur-vert);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.15);
}

.formulaire__champ--erreur {
  border-color: var(--couleur-erreur);
}

.formulaire__champ--erreur:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.formulaire__champ--valide {
  border-color: var(--couleur-succes);
}

textarea.formulaire__champ {
  min-height: 120px;
  resize: vertical;
}

select.formulaire__champ {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a4a4a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.formulaire__aide {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
}

.formulaire__erreur-msg {
  font-size: var(--taille-xs);
  color: var(--couleur-erreur);
  display: none;
}

.formulaire__erreur-msg.visible {
  display: block;
}

/* ==========================================================================
   15. ALERTES ET NOTIFICATIONS
   ========================================================================== */

.alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-md);
  padding: var(--espace-md) var(--espace-lg);
  border-radius: var(--rayon-md);
  border: 1px solid transparent;
  font-size: var(--taille-sm);
}

.alerte__icone {
  font-size: var(--taille-lg);
  flex-shrink: 0;
  line-height: 1;
}

.alerte__texte {
  flex: 1;
}

.alerte__titre {
  font-weight: var(--graisse-bold);
  margin-bottom: var(--espace-xs);
}

.alerte--succes {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alerte--erreur {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.alerte--info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.alerte--avertissement {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

/* ==========================================================================
   16. MODAL
   ========================================================================== */

.modal-fond {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normale);
}

.modal-fond.modal--ouvert {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-xl);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-normale);
}

.modal-fond.modal--ouvert .modal {
  transform: translateY(0) scale(1);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-lg);
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.modal__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-vert);
}

.modal__fermer {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--couleur-gris);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-sm);
  transition: all var(--transition-rapide);
}

.modal__fermer:hover {
  background-color: var(--couleur-creme);
  color: var(--couleur-texte);
}

.modal__corps {
  padding: var(--espace-lg);
}

.modal__pied {
  padding: var(--espace-lg);
  border-top: 1px solid var(--couleur-gris-clair);
  display: flex;
  gap: var(--espace-md);
  justify-content: flex-end;
}

/* ==========================================================================
   17. PANIER LATÉRAL (Sidebar)
   ========================================================================== */

.panier-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background-color: var(--couleur-blanc);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-lente);
}

.panier-sidebar.panier--ouvert {
  transform: translateX(0);
}

.panier-fond {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 1499;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normale);
}

.panier-fond.panier--visible {
  opacity: 1;
  pointer-events: all;
}

.panier-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-lg);
  background-color: var(--couleur-vert);
  color: var(--couleur-blanc);
}

.panier-sidebar__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-blanc);
}

.panier-sidebar__fermer {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-sm);
  font-size: 1.2rem;
  transition: background var(--transition-rapide);
}

.panier-sidebar__fermer:hover {
  background: rgba(255,255,255,0.35);
}

.panier-sidebar__liste {
  flex: 1;
  overflow-y: auto;
  padding: var(--espace-md);
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

.panier-sidebar__vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--espace-md);
  color: var(--couleur-gris);
  text-align: center;
  padding: var(--espace-2xl);
}

.panier-sidebar__vide-icone {
  font-size: 4rem;
  opacity: 0.5;
}

.panier-article {
  display: flex;
  gap: var(--espace-md);
  padding: var(--espace-md);
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
  border: 1px solid var(--couleur-gris-clair);
  align-items: flex-start;
}

.panier-article__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.panier-article__info {
  flex: 1;
  min-width: 0;
}

.panier-article__nom {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panier-article__prix {
  font-size: var(--taille-sm);
  color: var(--couleur-vert);
  font-weight: var(--graisse-bold);
}

.panier-article__quantite {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-xs);
}

.panier-article__btn-qte {
  width: 24px;
  height: 24px;
  background-color: var(--couleur-vert);
  color: white;
  border: none;
  border-radius: var(--rayon-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--transition-rapide);
}

.panier-article__btn-qte:hover {
  background-color: var(--couleur-vert-clair);
}

.panier-article__qte-valeur {
  font-weight: var(--graisse-bold);
  min-width: 20px;
  text-align: center;
  font-size: var(--taille-sm);
}

.panier-article__supprimer {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--couleur-erreur);
  font-size: 1.1rem;
  padding: var(--espace-xs);
  border-radius: var(--rayon-sm);
  transition: background var(--transition-rapide);
}

.panier-article__supprimer:hover {
  background-color: #fde8e8;
}

.panier-sidebar__pied {
  padding: var(--espace-lg);
  border-top: 2px solid var(--couleur-gris-clair);
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  background-color: var(--couleur-creme);
}

.panier-sidebar__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panier-sidebar__total-label {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-md);
}

.panier-sidebar__total-montant {
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);
  color: var(--couleur-vert);
  font-weight: var(--graisse-bold);
}

/* ==========================================================================
   18. FILTRES BOUTIQUE
   ========================================================================== */

.filtres {
  background-color: var(--couleur-creme);
  padding: var(--espace-lg) 0;
  border-bottom: 1px solid var(--couleur-gris-clair);
  margin-bottom: var(--espace-sm);
}

.filtres__interieur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-md);
  align-items: center;
  justify-content: space-between;
}

.filtres__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
}

.filtre-btn {
  padding: 0.4rem 1rem;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-medium);
  border: 2px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-full);
  background: var(--couleur-blanc);
  color: var(--couleur-texte-doux);
  cursor: pointer;
  transition: all var(--transition-normale);
}

.filtre-btn:hover {
  border-color: var(--couleur-vert);
  color: var(--couleur-vert);
}

.filtre-btn--actif {
  background-color: var(--couleur-vert);
  border-color: var(--couleur-vert);
  color: white;
}

.filtres__tri {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

.filtres__tri-label {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  white-space: nowrap;
}

/* Sous-filtres (ex: types d'alcools) */
.filtres__categs-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.filtres__sous-categories {
  display: none;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  padding-top: var(--espace-sm);
  border-top: 1px dashed var(--couleur-gris-clair);
}

.filtres__sous-categories--visible {
  display: flex;
}

.filtre-sous-btn {
  padding: 0.3rem 0.875rem;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-medium);
  border: 1.5px solid #c9a8e0;
  border-radius: var(--rayon-full);
  background: var(--couleur-blanc);
  color: #6b2fa0;
  cursor: pointer;
  transition: all var(--transition-normale);
}

.filtre-sous-btn:hover {
  border-color: #6b2fa0;
  background-color: #f5ecfc;
}

.filtre-sous-btn--actif {
  background-color: #6b2fa0;
  border-color: #6b2fa0;
  color: white;
}

/* ==========================================================================
   19. TABLEAU
   ========================================================================== */

.tableau-wrapper {
  overflow-x: auto;
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-sm);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--couleur-blanc);
}

.tableau th {
  background-color: var(--couleur-vert);
  color: white;
  padding: var(--espace-md) var(--espace-lg);
  text-align: left;
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tableau td {
  padding: var(--espace-md) var(--espace-lg);
  border-bottom: 1px solid var(--couleur-gris-clair);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
}

.tableau tr:last-child td {
  border-bottom: none;
}

.tableau tr:nth-child(even) td {
  background-color: var(--couleur-creme);
}

.tableau tr:hover td {
  background-color: var(--couleur-vert-pale);
}

/* ==========================================================================
   20. PAGINATION
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-2xl);
}

.pagination__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-blanc);
  color: var(--couleur-texte-doux);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-medium);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-normale);
}

.pagination__btn:hover {
  border-color: var(--couleur-vert);
  color: var(--couleur-vert);
  text-decoration: none;
}

.pagination__btn--actif {
  background-color: var(--couleur-vert);
  border-color: var(--couleur-vert);
  color: white;
}

/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.footer {
  background-color: var(--couleur-vert);
  color: rgba(255,255,255,0.85);
  padding-top: var(--espace-3xl);
}

.footer__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-2xl);
  padding-bottom: var(--espace-2xl);
}

@media (min-width: 640px) {
  .footer__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .footer__grille {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer__colonne-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-dore);
  margin-bottom: var(--espace-md);
  font-weight: var(--graisse-bold);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  margin-bottom: var(--espace-md);
  text-decoration: none;
}

.footer__logo-icone {
  height: 3.5rem;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer__logo-texte {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-blanc);
  font-weight: var(--graisse-bold);
}

.footer__description {
  font-size: var(--taille-sm);
  line-height: 1.7;
  margin-bottom: var(--espace-lg);
}

.footer__reseaux {
  display: flex;
  gap: var(--espace-sm);
}

.footer__reseau-btn {
  width: 38px;
  height: 38px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--rayon-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition-normale);
  color: white;
}

.footer__reseau-btn:hover {
  background-color: var(--couleur-dore);
  border-color: var(--couleur-dore);
  color: white;
  transform: translateY(-2px);
}

.footer__liens {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.footer__lien {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: var(--taille-sm);
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  transition: color var(--transition-normale);
}

.footer__lien::before {
  content: '›';
  color: var(--couleur-dore);
  font-weight: bold;
}

.footer__lien:hover {
  color: var(--couleur-blanc);
}

.footer__contact-infos {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

.footer__contact-ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  font-size: var(--taille-sm);
}

.footer__contact-icone {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__contact-texte {
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.footer__contact-texte a {
  color: var(--couleur-dore-clair);
  text-decoration: none;
}

.footer__contact-texte a:hover {
  text-decoration: underline;
}

.footer__bas {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--espace-lg) 0;
}

.footer__bas-interieur {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
  align-items: center;
  text-align: center;
  font-size: var(--taille-xs);
  color: rgba(255,255,255,0.5);
}

@media (min-width: 640px) {
  .footer__bas-interieur {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__bas-liens {
  display: flex;
  gap: var(--espace-md);
}

.footer__bas-lien {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: var(--taille-xs);
  transition: color var(--transition-normale);
}

.footer__bas-lien:hover {
  color: var(--couleur-blanc);
}

/* ==========================================================================
   22. PRÉSENTATION "QUI SOMMES-NOUS"
   ========================================================================== */

.presentation {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .presentation {
    grid-template-columns: 1fr 1fr;
  }
}

.presentation__image-placeholder {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--couleur-vert), var(--couleur-vert-clair));
  border-radius: var(--rayon-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  box-shadow: var(--ombre-lg);
}

.presentation__texte p {
  color: var(--couleur-texte-doux);
  line-height: 1.8;
  margin-bottom: var(--espace-md);
}

.presentation__texte p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   23. ESPACE ADHÉRENT
   ========================================================================== */

.adherent-connexion {
  max-width: 480px;
  margin-inline: auto;
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-lg);
  padding: var(--espace-2xl);
  border: 1px solid var(--couleur-gris-clair);
}

.adherent-connexion__titre {
  text-align: center;
  margin-bottom: var(--espace-xl);
}

.adherent-connexion__icone {
  font-size: 3rem;
  text-align: center;
  margin-bottom: var(--espace-md);
}

.adherent-bienvenue {
  background: linear-gradient(135deg, var(--couleur-vert), var(--couleur-vert-clair));
  color: white;
  border-radius: var(--rayon-xl);
  padding: var(--espace-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-md);
  flex-wrap: wrap;
  margin-bottom: var(--espace-2xl);
}

.adherent-bienvenue__texte h2 {
  color: white;
  margin-bottom: var(--espace-xs);
}

.adherent-bienvenue__texte p {
  color: rgba(255,255,255,0.85);
  margin: 0;
  font-size: var(--taille-sm);
}

.ressources-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espace-xl);
  margin-top: var(--espace-lg);
}

.ressource-section {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  border: 1px solid var(--couleur-gris-clair);
}

.ressource-section__header {
  background-color: var(--couleur-creme);
  padding: var(--espace-md) var(--espace-lg);
  border-bottom: 2px solid var(--couleur-dore);
}

.ressource-section__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  color: var(--couleur-vert);
}

.ressource-section__corps {
  padding: var(--espace-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

.ressource-doc {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-sm);
  border-radius: var(--rayon-md);
  transition: background var(--transition-rapide);
}

.ressource-doc:hover {
  background-color: var(--couleur-creme);
}

.ressource-doc__icone {
  font-size: 1.5rem;
}

.ressource-doc__info {
  flex: 1;
}

.ressource-doc__nom {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
}

.ressource-doc__type {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
}

.evenement-adherent {
  display: flex;
  gap: var(--espace-md);
  padding: var(--espace-sm) 0;
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.evenement-adherent:last-child {
  border-bottom: none;
}

.evenement-adherent__date {
  background-color: var(--couleur-vert);
  color: white;
  border-radius: var(--rayon-md);
  padding: var(--espace-xs) var(--espace-sm);
  text-align: center;
  min-width: 52px;
  flex-shrink: 0;
}

.evenement-adherent__jour {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: var(--graisse-bold);
  line-height: 1;
}

.evenement-adherent__mois {
  font-size: var(--taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.evenement-adherent__info {
  flex: 1;
}

.evenement-adherent__titre {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
}

.evenement-adherent__lieu {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  margin-top: 2px;
}

.membre-annuaire {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-sm) 0;
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.membre-annuaire:last-child {
  border-bottom: none;
}

.membre-annuaire__avatar {
  width: 40px;
  height: 40px;
  background-color: var(--couleur-vert-pale);
  border-radius: var(--rayon-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.membre-annuaire__info {
  flex: 1;
}

.membre-annuaire__nom {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
}

.membre-annuaire__specialite {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
}

.offre-exclusive {
  background: linear-gradient(135deg, var(--couleur-creme), #fff8e8);
  border: 2px solid var(--couleur-dore);
  border-radius: var(--rayon-lg);
  padding: var(--espace-lg);
}

.offre-exclusive__badge {
  display: inline-block;
  background-color: var(--couleur-dore);
  color: white;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-bold);
  padding: 2px 10px;
  border-radius: var(--rayon-full);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espace-sm);
}

.offre-exclusive__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-vert);
  margin-bottom: var(--espace-sm);
}

.offre-exclusive__description {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
  margin-bottom: var(--espace-md);
}

/* Sections larges (pleine largeur dans la grille) */
.ressource-section--large {
  grid-column: 1 / -1;
}

/* ==========================================================================
   RÉGLEMENTATION — Cartes
   ========================================================================== */

.regl-carte {
  border: 1px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-md);
  overflow: hidden;
  margin-bottom: var(--espace-md);
}

.regl-carte:last-child {
  margin-bottom: 0;
}

.regl-carte__header {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  padding: var(--espace-md) var(--espace-lg);
  background-color: var(--couleur-creme);
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.regl-carte__icone {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.regl-carte__titre {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
  flex: 1;
}

.regl-carte__date {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  margin-top: 2px;
}

.regl-carte__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: var(--graisse-semi);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.regl-carte__badge--nouveau {
  background-color: #dcf0d9;
  color: var(--couleur-vert);
}

.regl-carte__badge--alerte {
  background-color: #fef3cd;
  color: #856404;
}

.regl-carte__corps {
  padding: var(--espace-md) var(--espace-lg);
  font-size: var(--taille-sm);
  line-height: 1.7;
  color: var(--couleur-texte-doux);
}

.regl-carte__corps p {
  margin: 0 0 var(--espace-xs);
}

.regl-carte__pied {
  padding: var(--espace-sm) var(--espace-lg);
  border-top: 1px solid var(--couleur-gris-clair);
  background-color: #fafafa;
}

/* ==========================================================================
   VEILLE PROFESSIONNELLE — Cartes
   ========================================================================== */

.veille-carte {
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-md);
  padding: var(--espace-md);
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  transition: box-shadow 0.2s;
}

.veille-carte:hover {
  box-shadow: var(--ombre-md);
}

.veille-carte__icone {
  font-size: 1.75rem;
}

.veille-carte__titre {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
}

.veille-carte__texte {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

/* ==========================================================================
   24. PAGE PAIEMENT
   ========================================================================== */

/* Étapes de commande */
.paiement-etapes {
  background-color: var(--couleur-creme);
  border-bottom: 1px solid var(--couleur-gris-clair);
  padding: var(--espace-md) 0;
}

.paiement-etapes__liste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.paiement-etapes__element {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
}

.paiement-etapes__element--actif {
  color: var(--couleur-vert);
  font-weight: var(--graisse-semi);
}

.paiement-etapes__element--fait {
  color: var(--couleur-succes);
}

.paiement-etapes__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--couleur-gris-clair);
  color: var(--couleur-gris);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-bold);
  flex-shrink: 0;
}

.paiement-etapes__element--actif .paiement-etapes__num {
  background-color: var(--couleur-vert);
  color: white;
}

.paiement-etapes__element--fait .paiement-etapes__num {
  background-color: var(--couleur-succes);
  color: white;
}

.paiement-etapes__separateur {
  width: 40px;
  height: 2px;
  background-color: var(--couleur-gris-clair);
  margin: 0 var(--espace-sm);
  flex-shrink: 0;
}

/* Grille paiement */
.paiement-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .paiement-grille {
    grid-template-columns: 1fr;
  }

  .paiement-colonne--droite {
    order: -1; /* Formulaire carte en premier sur mobile */
  }
}

/* Bloc paiement */
.paiement-bloc {
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-lg);
  padding: var(--espace-lg);
  margin-bottom: var(--espace-lg);
  box-shadow: var(--ombre-sm);
}

.paiement-bloc__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-vert);
  margin-bottom: var(--espace-lg);
  padding-bottom: var(--espace-md);
  border-bottom: 2px solid var(--couleur-gris-clair);
}

/* Récapitulatif d'articles */
.recap-article {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.recap-article:last-child {
  border-bottom: none;
}

.recap-article__emoji {
  font-size: 1.5rem;
  width: 2.5rem;
  text-align: center;
}

.recap-article__info {
  flex: 1;
}

.recap-article__nom {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
}

.recap-article__qte {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  margin-top: 2px;
}

.recap-article__prix {
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
  font-size: var(--taille-sm);
  white-space: nowrap;
}

/* Sous-totaux */
.paiement-sous-totaux {
  margin-top: var(--espace-md);
  padding-top: var(--espace-md);
  border-top: 2px solid var(--couleur-gris-clair);
}

.paiement-ligne-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espace-xs) 0;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
}

.paiement-ligne-total--principal {
  font-size: var(--taille-md);
  color: var(--couleur-texte);
  padding-top: var(--espace-sm);
  margin-top: var(--espace-sm);
  border-top: 1px solid var(--couleur-gris-clair);
}

.paiement-gratuit {
  color: var(--couleur-succes);
  font-weight: var(--graisse-semi);
}

/* Logos cartes acceptées */
.cartes-acceptees {
  display: flex;
  gap: var(--espace-sm);
  margin-bottom: var(--espace-lg);
}

.carte-logo {
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-sm);
  font-size: 0.7rem;
  font-weight: var(--graisse-bold);
  letter-spacing: 0.05em;
  color: var(--couleur-gris);
  background-color: white;
  transition: border-color var(--transition-rapide), color var(--transition-rapide);
}

.carte-logo--visa       { color: #1a1f71; }
.carte-logo--mastercard { color: #eb001b; }
.carte-logo--cb         { color: #003d7a; }

.carte-logo--actif {
  border-color: var(--couleur-vert);
  background-color: var(--couleur-vert-pale);
}

/* Visuel carte bancaire */
.carte-visuelle-conteneur {
  perspective: 1000px;
  margin-bottom: var(--espace-lg);
}

.carte-visuelle {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 200px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.carte-retournee {
  transform: rotateY(180deg);
}

.carte-visuelle__face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.carte-visuelle__face--avant {
  background: linear-gradient(135deg, var(--couleur-vert), #1a3d18);
  color: white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.carte-visuelle__face--arriere {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  transform: rotateY(180deg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.carte-visuelle__logo-reseau {
  align-self: flex-end;
  font-size: 1.1rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}

.carte-visuelle__puce {
  display: flex;
  gap: 3px;
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #d4a843, #c8941a);
  border-radius: 5px;
  padding: 4px;
  flex-direction: column;
  justify-content: space-around;
}

.carte-visuelle__puce-trait {
  height: 3px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 2px;
}

.carte-visuelle__numero {
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.95);
  word-spacing: 0.3em;
}

.carte-visuelle__bas {
  display: flex;
  gap: var(--espace-xl);
  align-items: flex-end;
}

.carte-visuelle__etiquette {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2px;
}

.carte-visuelle__valeur {
  font-size: 0.85rem;
  font-weight: var(--graisse-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* Face arrière */
.carte-visuelle__bande-magnetique {
  position: absolute;
  top: 2.5rem;
  left: 0;
  right: 0;
  height: 42px;
  background-color: #1a1a1a;
}

.carte-visuelle__signature {
  position: absolute;
  bottom: 2.5rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

.carte-visuelle__signature-lignes {
  flex: 1;
  background: linear-gradient(
    to bottom,
    #f0f0f0 0, #f0f0f0 33%,
    #c0c0c0 33%, #c0c0c0 66%,
    #f0f0f0 66%
  );
  height: 36px;
  border-radius: 4px;
}

.carte-visuelle__cvv-zone {
  background-color: white;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  text-align: center;
  min-width: 52px;
}

.carte-visuelle__cvv-valeur {
  font-size: 1rem;
  font-weight: var(--graisse-bold);
  color: var(--couleur-texte);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

.carte-visuelle__logo-bas {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
}

/* Sécurité */
.paiement-securite {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  background-color: var(--couleur-vert-pale);
  border: 1px solid #c4dbbf;
  border-radius: var(--rayon-md);
  padding: var(--espace-sm) var(--espace-md);
  margin-bottom: var(--espace-md);
}

.paiement-securite__icone {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.paiement-securite__texte {
  font-size: var(--taille-xs);
  color: var(--couleur-vert);
  line-height: 1.5;
  margin: 0;
}

/* Total final et bouton paiement */
.paiement-recap-final {
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
  padding: var(--espace-md);
  margin-top: var(--espace-md);
}

.paiement-recap-final__montant {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espace-md);
}

.paiement-recap-final__prix {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
}

.paiement-btn-payer {
  font-size: var(--taille-md);
}

/* Sélecteur de méthode de paiement */
.methode-paiement-selecteur {
  display: flex;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-lg);
  padding: var(--espace-xs);
  background-color: var(--couleur-gris-clair);
  border-radius: var(--rayon-lg);
}

.methode-paiement-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-sm);
  padding: 0.6rem var(--espace-md);
  background: none;
  border: none;
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-medium);
  color: var(--couleur-texte-doux);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.methode-paiement-btn:hover {
  background-color: rgba(255,255,255,0.7);
  color: var(--couleur-texte);
}

.methode-paiement-btn--actif {
  background-color: var(--couleur-blanc);
  color: var(--couleur-texte);
  font-weight: var(--graisse-semi);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Badge Wero (lettre W) */
.wero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #5e2d87;
  color: white;
  font-size: 0.7rem;
  font-weight: var(--graisse-bold);
  border-radius: var(--rayon-sm);
  flex-shrink: 0;
}

/* Bouton Wero */
.btn--wero {
  background-color: #5e2d87;
  color: white;
  border: none;
  font-size: var(--taille-md);
  transition: background-color 0.2s;
}

.btn--wero:hover:not(:disabled) {
  background-color: #4a2269;
}

.btn--wero:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Section Wero */
.wero-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}

.wero-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: #5e2d87;
  color: white;
  font-size: 1.6rem;
  font-weight: var(--graisse-bold);
  border-radius: var(--rayon-lg);
  flex-shrink: 0;
}

.wero-entete__nom {
  font-size: var(--taille-lg);
  font-weight: var(--graisse-bold);
  color: #5e2d87;
}

.wero-entete__description {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  margin-top: 2px;
}

.wero-banques {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
  padding: var(--espace-sm) var(--espace-md);
  margin-bottom: var(--espace-md);
  line-height: 1.5;
}

/* Étapes Wero */
.wero-etapes {
  list-style: none;
  margin: 0 0 var(--espace-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.wero-etape {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-md);
  padding: var(--espace-sm) var(--espace-md);
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
}

.wero-etape__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background-color: #5e2d87;
  color: white;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-bold);
  border-radius: 50%;
}

.wero-etape__texte {
  font-size: var(--taille-sm);
  line-height: 1.5;
  padding-top: 2px;
}

/* Coordonnées Wero du commerçant */
.wero-coordonnees {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md);
  background-color: #f3e8fb;
  border: 2px solid #5e2d87;
  border-radius: var(--rayon-md);
  margin-bottom: var(--espace-lg);
}

.wero-coordonnees__icone {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.wero-coordonnees__titre {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.wero-coordonnees__valeur {
  font-size: var(--taille-md);
  font-weight: var(--graisse-bold);
  color: #5e2d87;
  letter-spacing: 0.02em;
}

/* QR code Wero (visuel simulé) */
.wero-qr-conteneur {
  text-align: center;
  margin-bottom: var(--espace-lg);
}

.wero-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 6px, rgba(94,45,135,0.08) 6px, rgba(94,45,135,0.08) 7px),
    repeating-linear-gradient(90deg,  transparent, transparent 6px, rgba(94,45,135,0.08) 6px, rgba(94,45,135,0.08) 7px),
    white;
  border: 3px solid #5e2d87;
  border-radius: var(--rayon-md);
  position: relative;
}

.wero-qr__centre {
  font-size: 2rem;
  font-weight: var(--graisse-bold);
  color: white;
  background-color: #5e2d87;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-md);
}

.wero-qr__label {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  margin-top: var(--espace-sm);
}

/* Aide tooltip CVV */
.aide-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--couleur-gris-clair);
  color: var(--couleur-texte-doux);
  border: none;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: var(--graisse-bold);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  transition: background-color var(--transition-rapide);
}

.aide-tooltip:hover {
  background-color: var(--couleur-vert-pale);
  color: var(--couleur-vert);
}

.formulaire__aide {
  font-size: var(--taille-xs);
  color: var(--couleur-info);
  margin-top: 4px;
  display: block;
}

/* Spinner de chargement */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: rotation 0.7s linear infinite;
  margin-right: var(--espace-sm);
  vertical-align: middle;
}

@keyframes rotation {
  to { transform: rotate(360deg); }
}

/* Champ en erreur */
.formulaire__champ--erreur {
  border-color: var(--couleur-erreur) !important;
}

/* Page de confirmation */
.confirmation-bloc {
  background-color: var(--couleur-blanc);
  border: 1px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-xl);
  padding: var(--espace-2xl);
  text-align: center;
  box-shadow: var(--ombre-lg);
}

.confirmation-icone {
  font-size: 4rem;
  margin-bottom: var(--espace-lg);
  animation: rebond 0.5s ease;
}

@keyframes rebond {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.confirmation-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);
  color: var(--couleur-succes);
  margin-bottom: var(--espace-md);
}

.confirmation-texte {
  color: var(--couleur-texte-doux);
  margin-bottom: var(--espace-xl);
  line-height: 1.8;
}

.confirmation-details {
  background-color: var(--couleur-creme);
  border-radius: var(--rayon-md);
  padding: var(--espace-md);
  margin-bottom: var(--espace-xl);
  text-align: left;
}

.confirmation-detail-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espace-sm) 0;
  font-size: var(--taille-sm);
  border-bottom: 1px solid var(--couleur-gris-clair);
}

.confirmation-detail-ligne:last-child {
  border-bottom: none;
}

/* ==========================================================================
   ACCUEIL — Nouveaux composants de layout (correspondant au screenshot)
   ========================================================================== */

/* Surtitre de section (petite étiquette verte au-dessus du titre) */
.section__surtitre {
  display: inline-block;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-vert);
  margin-bottom: var(--espace-sm);
}

/* Variante dorée du titre de section */
.section__titre--dore {
  color: var(--couleur-dore);
  font-style: italic;
}

/* ------------------------------------------------------------------
   BANDE STATISTIQUES — fond vert foncé, 4 chiffres sur une ligne
   ------------------------------------------------------------------ */
.stats-bande {
  background-color: #1e3d1a;
  padding: var(--espace-2xl) 0;
}

.stats-bande__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-xl);
}

@media (max-width: 600px) {
  .stats-bande__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-bande__item {
  text-align: center;
  padding: var(--espace-md);
  border-right: 1px solid rgba(255,255,255,0.12);
}

.stats-bande__item:last-child {
  border-right: none;
}

.stats-bande__nombre {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--graisse-bold);
  color: white;
  line-height: 1;
  margin-bottom: var(--espace-xs);
}

.stats-bande__label {
  display: block;
  font-size: var(--taille-sm);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   SECTION BICOLONNE — gauche fond rose, droite photo bâtiment
   ------------------------------------------------------------------ */
.actu-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}

@media (max-width: 768px) {
  .actu-split {
    grid-template-columns: 1fr;
  }
}

/* Colonne gauche : fond rose/saumon avec liste d'actualités */
.actu-split__gauche {
  background-color: #fce8e0;
  padding: var(--espace-2xl) var(--espace-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.actu-split__titre {
  font-size: var(--taille-xl);
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
  margin-bottom: var(--espace-lg);
}

/* Mini carte d'actualité dans le panneau gauche */
.actu-mini {
  display: flex;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.actu-mini:last-child {
  border-bottom: none;
}

.actu-mini__vignette {
  width: 64px;
  height: 64px;
  border-radius: var(--rayon-md);
  background: linear-gradient(135deg, var(--couleur-vert-pale), var(--couleur-creme));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.actu-mini__corps {
  flex: 1;
  min-width: 0;
}

.actu-mini__date {
  display: block;
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
  margin-bottom: 2px;
}

.actu-mini__titre {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
  line-height: 1.4;
  margin-bottom: 2px;
}

.actu-mini__extrait {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Colonne droite : image + texte sous la photo */
.actu-split__droite {
  display: flex;
  flex-direction: column;
}

.actu-split__photo {
  flex: 1;
  background: linear-gradient(155deg, #4a7c3f, #8faf6d, #c2a06e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.actu-split__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%);
  pointer-events: none;
}

.actu-split__legende {
  background-color: var(--couleur-vert);
  color: white;
  padding: var(--espace-md) var(--espace-xl);
  font-size: var(--taille-sm);
}

.actu-split__legende strong {
  display: block;
  font-size: var(--taille-md);
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------
   SECTION PRODUCTEURS — rangée de cartes artisans
   ------------------------------------------------------------------ */
.producteurs {
  padding: var(--espace-3xl) 0;
  background-color: var(--couleur-blanc);
}

.producteurs__en-tete {
  text-align: center;
  margin-bottom: var(--espace-2xl);
}

.producteurs__titre {
  font-size: clamp(var(--taille-lg), 3vw, var(--taille-2xl));
  font-weight: var(--graisse-bold);
  color: var(--couleur-texte);
  max-width: 600px;
  margin: var(--espace-xs) auto 0;
  line-height: 1.3;
}

/* Grille défilante horizontalement sur mobile */
.producteurs__liste {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--espace-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 1024px) {
  .producteurs__liste {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .producteurs__liste {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-md);
  }
}

.producteur-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-sm);
  text-align: center;
  padding: var(--espace-md);
  border-radius: var(--rayon-lg);
  transition: background-color var(--transition-rapide), box-shadow var(--transition-rapide);
  cursor: default;
}

.producteur-carte:hover {
  background-color: var(--couleur-creme);
  box-shadow: var(--ombre-sm);
}

.producteur-carte__photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--couleur-vert-pale), var(--couleur-creme));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  border: 3px solid var(--couleur-gris-clair);
  transition: border-color var(--transition-rapide);
}

.producteur-carte:hover .producteur-carte__photo {
  border-color: var(--couleur-vert);
}

.producteur-carte__nom {
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
  line-height: 1.3;
}

.producteur-carte__metier {
  font-size: var(--taille-xs);
  color: var(--couleur-gris);
}

/* ------------------------------------------------------------------
   HERO — ajustement de la hauteur pour mieux correspondre au screenshot
   ------------------------------------------------------------------ */
.hero--moyen {
  min-height: 55vh;
}

/* ------------------------------------------------------------------
   PHOTO D'EN-TÊTE DE PAGE — image seule, sans assombrissement,
   pour conserver l'éclairage naturel d'origine de la photo
   ------------------------------------------------------------------ */
.photo-entete-page {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: var(--couleur-creme);
}

.photo-entete-page__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .photo-entete-page {
    height: 340px;
  }
}

@media (min-width: 1200px) {
  .photo-entete-page {
    height: 420px;
  }
}

/* ==========================================================================
   25. HORAIRES
   ========================================================================== */

.horaires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espace-lg);
}

.horaire-carte {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
  border: 1px solid var(--couleur-gris-clair);
}

.horaire-carte__header {
  background-color: var(--couleur-vert);
  padding: var(--espace-md);
  color: white;
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  font-weight: var(--graisse-bold);
}

.horaire-carte__corps {
  padding: var(--espace-md);
}

.horaire-ligne {
  display: flex;
  justify-content: space-between;
  padding: var(--espace-xs) 0;
  border-bottom: 1px solid var(--couleur-gris-clair);
  font-size: var(--taille-sm);
}

.horaire-ligne:last-child {
  border-bottom: none;
}

.horaire-ligne__jour {
  color: var(--couleur-texte-doux);
}

.horaire-ligne__heure {
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
}

.horaire-ligne--ferme .horaire-ligne__heure {
  color: var(--couleur-erreur);
}

/* ==========================================================================
   HORAIRES D'OUVERTURE — section accueil
   ========================================================================== */

.horaires-ouverture {
  background-color: var(--couleur-creme);
  padding: var(--espace-2xl) 0;
}

.horaires-ouverture__carte {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-md);
  padding: var(--espace-xl);
  max-width: 640px;
  margin: 0 auto;
}

.horaires-ouverture__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espace-md);
  margin-bottom: var(--espace-lg);
  flex-wrap: wrap;
}

.horaires-ouverture__titre {
  font-size: var(--taille-xl);
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
  margin: var(--espace-xs) 0 0;
}

.horaires-ouverture__note {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux);
  margin: var(--espace-xs) 0 0;
}

.horaires-statut__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: var(--espace-xs) var(--espace-md);
  border-radius: var(--rayon-full);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  white-space: nowrap;
}

.horaires-statut__badge--ouvert {
  background-color: #e6f4ea;
  color: #1e7e34;
}

.horaires-statut__badge--ferme {
  background-color: #fde8e8;
  color: var(--couleur-erreur);
}

.horaires-statut__point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.horaires-statut__badge--ouvert .horaires-statut__point {
  background-color: #1e7e34;
}

.horaires-statut__badge--ferme .horaires-statut__point {
  background-color: var(--couleur-erreur);
}

.horaires-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horaires-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espace-sm) var(--espace-md);
  border-radius: var(--rayon-md);
}

.horaires-ligne + .horaires-ligne {
  margin-top: 2px;
}

.horaires-ligne--actuel {
  background-color: var(--couleur-vert-pale);
}

.horaires-ligne--actuel .horaires-ligne__jour {
  color: var(--couleur-vert);
  font-weight: var(--graisse-bold);
}

.horaires-ligne--actuel .horaires-ligne__heures {
  color: var(--couleur-vert);
  font-weight: var(--graisse-bold);
}

.horaires-ligne__jour {
  color: var(--couleur-texte-doux);
  font-size: var(--taille-sm);
}

.horaires-ligne__heures {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-medium);
  color: var(--couleur-texte);
}

.horaires-ligne__heures--ferme {
  color: var(--couleur-gris);
}

.horaires-ligne--ferie .horaires-ligne__heures--ferme {
  color: var(--couleur-erreur);
  font-weight: var(--graisse-semi);
}

.horaires-note-ferie {
  margin-top: var(--espace-md);
  padding: var(--espace-sm) var(--espace-md);
  background-color: #fde8e8;
  border-left: 3px solid var(--couleur-erreur);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  color: var(--couleur-erreur);
  font-size: var(--taille-sm);
}

@media (max-width: 480px) {
  .horaires-ouverture__carte {
    padding: var(--espace-lg) var(--espace-md);
  }
}

/* ==========================================================================
   25. ANIMATIONS ET TRANSITIONS
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.anime-entree {
  animation: fadeIn 0.4s ease forwards;
}

/* ==========================================================================
   26. MEDIA QUERIES SUPPLÉMENTAIRES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Impression */
@media print {
  .header, .footer, .burger, .btn, .panier-icone {
    display: none !important;
  }
}

/* ==========================================================================
   27. FICHE PRODUIT
   ========================================================================== */

/* Cartes produit cliquables : cursor pointer ajouté via JS,
   l'effet hover est déjà défini ligne 892 (.carte-produit:hover) */

/* ── Layout principal ── */
.fiche-produit__conteneur {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-xl);
  align-items: start;
  margin-bottom: var(--espace-2xl);
}

@media (min-width: 768px) {
  .fiche-produit__conteneur {
    /* Infos à gauche (60%) — galerie à droite (40%) */
    grid-template-columns: 3fr 2fr;
  }
}

/* ── Colonne infos ── */
.fiche-produit__meta {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  margin-bottom: var(--espace-sm);
  flex-wrap: wrap;
}

.fiche-produit__sous-type {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  font-style: italic;
}
.fiche-produit__sous-type::before { content: '›\00a0'; }

.fiche-produit__titre-ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-md);
}

.fiche-produit__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--couleur-vert-fonce);
  line-height: 1.2;
  margin: 0 0 var(--espace-md);
}

.badge-aop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  background-color: var(--couleur-vert-pale);
  color: var(--couleur-vert);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-bold);
  letter-spacing: .05em;
  border: 1px solid var(--couleur-vert);
  border-radius: var(--rayon-full);
  white-space: nowrap;
}

.badge-aop[hidden] {
  display: none;
}

/* Prix et stock */
.fiche-produit__prix-bloc {
  display: flex;
  align-items: baseline;
  gap: var(--espace-md);
  margin-bottom: var(--espace-lg);
  flex-wrap: wrap;
}

.fiche-produit__prix {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--couleur-vert);
  font-family: var(--police-titre);
}

.fiche-produit__stock {
  font-size: var(--taille-sm);
  color: #2d7a27;
  font-weight: 600;
}

/* Description */
.fiche-produit__description-bloc {
  margin-bottom: var(--espace-lg);
  padding: var(--espace-md) var(--espace-lg);
  background: var(--couleur-creme);
  border-left: 3px solid var(--couleur-or);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
}

.fiche-produit__sous-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  color: var(--couleur-vert-fonce);
  margin: 0 0 var(--espace-sm);
  font-weight: 600;
}

.fiche-produit__description {
  line-height: 1.8;
  color: var(--couleur-texte);
  margin: 0;
}

.fiche-produit__fournisseur {
  margin: var(--espace-sm) 0 0;
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
}

.fiche-produit__fournisseur-label {
  font-weight: 600;
  color: var(--couleur-vert-fonce);
}

/* Caractéristiques */
.fiche-produit__caracteristiques {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--espace-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.fiche-produit__caracteristiques li {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
}

.fiche-produit__caract-icone {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Zone actions */
.fiche-produit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
  margin-bottom: var(--espace-lg);
}

@media (min-width: 480px) {
  .fiche-produit__actions {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* Contrôle quantité */
.fiche-produit__quantite-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.fiche-produit__quantite-label {
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--couleur-texte);
}

.fiche-produit__quantite-controle {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-sm);
  overflow: hidden;
  width: fit-content;
}

.fiche-produit__quantite-btn {
  background: var(--couleur-blanc);
  border: none;
  padding: 0.5rem 0.875rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--couleur-vert);
  transition: background var(--transition-rapide);
  line-height: 1;
}
.fiche-produit__quantite-btn:hover  { background: var(--couleur-vert-clair); }
.fiche-produit__quantite-btn:focus  { outline: 2px solid var(--couleur-vert); outline-offset: -2px; }

.fiche-produit__quantite-input {
  width: 3.5rem;
  border: none;
  border-left: 1.5px solid var(--couleur-gris-clair);
  border-right: 1.5px solid var(--couleur-gris-clair);
  text-align: center;
  font-size: var(--taille-base);
  font-family: var(--police-corps);
  padding: 0.5rem 0;
  -moz-appearance: textfield;
}
.fiche-produit__quantite-input::-webkit-outer-spin-button,
.fiche-produit__quantite-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Sélecteur de poids */
.fiche-produit__poids-bloc {
  margin-bottom: var(--espace-md);
}

.fiche-produit__poids-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-xs);
}

.fiche-produit__poids-option {
  cursor: pointer;
}

.fiche-produit__poids-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fiche-produit__poids-option span {
  display: inline-block;
  padding: 0.4rem 0.875rem;
  border: 1.5px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-sm);
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--couleur-texte);
  background: var(--couleur-blanc);
  transition: border-color var(--transition-rapide), background var(--transition-rapide), color var(--transition-rapide);
  white-space: nowrap;
  user-select: none;
}

.fiche-produit__poids-option input[type="radio"]:checked + span {
  border-color: var(--couleur-vert);
  background: var(--couleur-vert);
  color: var(--couleur-blanc);
}

.fiche-produit__poids-option:hover span {
  border-color: var(--couleur-vert);
}

.fiche-produit__poids-option input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--couleur-vert);
  outline-offset: 2px;
}

/* Prix au kilogramme */
.fiche-produit__prix-kg {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  font-weight: 400;
}

/* Indicateur de mode de vente (à l'unité / au kg) */
.fiche-produit__unite-vente {
  display: inline-block;
  font-size: var(--taille-xs);
  font-weight: 600;
  color: var(--couleur-vert-fonce);
  background: var(--couleur-creme);
  border: 1px solid var(--couleur-or);
  border-radius: var(--rayon-sm);
  padding: 2px 8px;
}

/* Bouton panier fiche */
.fiche-produit__btn-panier {
  flex: 1;
  padding: 0.75rem 1.5rem;
  font-size: var(--taille-base);
  font-weight: 600;
  white-space: nowrap;
}

/* Lien retour */
.fiche-produit__retour {
  margin-top: var(--espace-sm);
}

.fiche-produit__lien-retour {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  text-decoration: none;
  transition: color var(--transition-rapide);
}
.fiche-produit__lien-retour:hover { color: var(--couleur-vert); text-decoration: underline; }

/* ── Colonne galerie (droite) ── */
.fiche-produit__galerie {
  position: sticky;
  top: calc(var(--espace-lg) + 4rem); /* sous le header sticky */
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Zone image principale */
.fiche-produit__image-principale {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--couleur-vert-clair, #e8f5e9) 0%, var(--couleur-creme) 100%);
  border-radius: var(--rayon-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Quand une vraie image est disponible, remplacer le placeholder */
.fiche-produit__image-principale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rayon-md);
}

/* Placeholder */
.fiche-produit__image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-sm);
  padding: var(--espace-lg);
  text-align: center;
}

.fiche-produit__emoji {
  font-size: 5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.fiche-produit__image-texte {
  font-size: var(--taille-sm);
  color: var(--couleur-gris);
  font-style: italic;
  margin: 0;
}

/* ── Message d'erreur ── */
.fiche-produit__erreur {
  padding: var(--espace-xl);
  text-align: center;
  color: var(--couleur-gris);
}
.fiche-produit__erreur a {
  color: var(--couleur-vert);
  text-decoration: underline;
}

/* ── Produits similaires ── */
.fiche-produit__similaires {
  border-top: 1px solid var(--couleur-gris-clair);
  padding-top: var(--espace-xl);
  margin-top: var(--espace-xl);
}

.fiche-produit__similaires-titre {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--couleur-vert-fonce);
  margin: 0 0 var(--espace-lg);
}

.fiche-produit__similaires-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--espace-md);
}

/* Carte similaire cliquable */
.fiche-produit__similaire-lien {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--rayon-md);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}
.fiche-produit__similaire-lien:hover  { transform: translateY(-2px); box-shadow: var(--ombre-md); }
.fiche-produit__similaire-lien:focus  { outline: 2px solid var(--couleur-vert); outline-offset: 3px; }

.fiche-produit__similaire-carte .carte-produit__pied {
  padding-top: var(--espace-xs);
}

/* Sur mobile : galerie au-dessus des infos */
@media (max-width: 767px) {
  .fiche-produit__conteneur {
    display: flex;
    flex-direction: column-reverse; /* galerie en haut, infos en bas sur mobile */
  }
  .fiche-produit__galerie {
    position: static;
  }
  .fiche-produit__image-principale {
    aspect-ratio: 16 / 9;
  }
  .fiche-produit__emoji {
    font-size: 4rem;
  }
}

/* ==========================================================================
   CARROUSEL — Section produits vedettes (accueil)
   ========================================================================== */

.carrousel-section {
  background-color: var(--couleur-creme);
}

.selection-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-md);
}

@media (min-width: 640px) {
  .selection-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .selection-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Conteneur principal avec les flèches */
.carrousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

/* Fenêtre : masque le débordement horizontal */
.carrousel__fenetre {
  overflow: hidden;
  flex: 1;
  border-radius: var(--rayon-lg);
}

/* Piste : flexbox qui glisse horizontalement */
.carrousel__piste {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--espace-md);
  transition: transform 0.35s ease;
  /* Empêche le retour à la ligne */
  flex-wrap: nowrap;
  /* Garantit que les cartes gardent leur largeur */
  will-change: transform;
}

/* Chaque item : largeur calculée selon le nombre de cartes visibles */
.carrousel__item {
  flex: 0 0 calc(100% - 0px);
  min-width: 0;
}

/* Sur tablette : 2 cartes visibles */
@media (min-width: 640px) {
  .carrousel__item {
    flex: 0 0 calc(50% - var(--espace-md) / 2);
  }
}

/* Sur desktop : 3 cartes visibles (toutes) */
@media (min-width: 1024px) {
  .carrousel__item {
    flex: 0 0 calc(33.333% - var(--espace-md) * 2 / 3);
  }
}

/* Boutons de navigation (flèches) */
.carrousel__btn {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--couleur-vert);
  background-color: var(--couleur-blanc);
  color: var(--couleur-vert);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-rapide), color var(--transition-rapide),
              opacity var(--transition-rapide);
  z-index: 1;
}

.carrousel__btn:hover {
  background-color: var(--couleur-vert);
  color: var(--couleur-blanc);
}

.carrousel__btn:focus-visible {
  outline: 2px solid var(--couleur-vert);
  outline-offset: 3px;
}

.carrousel__btn:disabled,
.carrousel__btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sur desktop : flèches toujours visibles pour permettre la navigation */

/* Indicateurs de position (points) */
.carrousel__indicateurs {
  display: flex;
  justify-content: center;
  gap: var(--espace-sm);
  margin-top: var(--espace-md);
}

.carrousel__point {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--couleur-gris-clair);
  border: 2px solid var(--couleur-gris);
  cursor: pointer;
  transition: background-color var(--transition-rapide), transform var(--transition-rapide);
}

.carrousel__point--actif {
  background-color: var(--couleur-vert);
  border-color: var(--couleur-vert);
  transform: scale(1.25);
}

/* ============================================================
   TABLEAU – lignes de catégorie
   ============================================================ */
.tableau__categorie td {
  background-color: var(--couleur-vert);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.tableau__sous-categorie td {
  background-color: #f0f4f0;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--couleur-vert);
  font-style: italic;
}

/* ============================================================
   ESTIMATEUR DE BUDGET
   ============================================================ */
.est-card {
  background: #fff;
  border: 2px solid var(--couleur-vert);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 2rem;
}

.est-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.est-titre {
  margin: 0;
  color: var(--couleur-vert);
  font-size: 1.1rem;
}

.est-mode {
  display: flex;
  border: 2px solid var(--couleur-vert);
  border-radius: 0.5rem;
  overflow: hidden;
}

.est-btn-mode {
  background: none;
  border: none;
  padding: 0.35rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-vert);
  transition: background-color 0.15s, color 0.15s;
}

.est-btn-mode--actif {
  background-color: var(--couleur-vert);
  color: #fff;
}

.est-note {
  font-size: 0.8rem;
  color: var(--couleur-gris);
  font-style: italic;
  margin: 0 0 1rem;
}

.est-ajout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.est-ajout-bas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.est-qte-label {
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9rem;
}

.est-qte {
  width: 80px !important;
  max-width: 80px !important;
}

.est-liste {
  min-height: 2.5rem;
  margin-bottom: 1rem;
  border-top: 1px solid #e8e8e8;
}

.est-vide {
  color: var(--couleur-gris);
  font-style: italic;
  font-size: 0.875rem;
  padding: 0.75rem 0;
  margin: 0;
}

.est-ligne {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #e8e8e8;
}

.est-ligne__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.est-ligne__label {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
}

.est-ligne__detail {
  font-size: 0.775rem;
  color: var(--couleur-gris);
}

.est-ligne__droite {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.est-ligne__soustotal {
  font-weight: 700;
  color: var(--couleur-vert);
  white-space: nowrap;
  font-size: 0.95rem;
}

.est-supprimer {
  background: none;
  border: none;
  color: var(--couleur-erreur, #c0392b);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0 0.2rem;
  line-height: 1;
  transition: opacity 0.15s;
}

.est-supprimer:hover {
  opacity: 0.7;
}

.est-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0 0;
  border-top: 2px solid var(--couleur-vert);
  font-size: 1rem;
}

.est-total-label {
  font-weight: 600;
}

.est-total-valeur {
  font-size: 1.5rem;
  color: var(--couleur-vert);
  font-weight: 700;
}

.est-actions {
  margin-top: 0.75rem;
  text-align: right;
}

.est-btn-effacer {
  background: none;
  border: none;
  color: var(--couleur-gris);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.est-btn-effacer:hover {
  color: var(--couleur-erreur, #c0392b);
}

/* ============================================================
   GRILLE LOCATION MATÉRIEL – badge caution
   ============================================================ */
.badge-caution {
  display: inline-block;
  font-size: 0.72rem;
  background: #fff8e1;
  color: #7c5c00;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid #f0c040;
  white-space: nowrap;
}

/* ==========================================================================
   ANIMATIONS — Page Notre Histoire
   ========================================================================== */

/* --- Scroll reveal (fade + remontée) ------------------------------------ */
/* Par défaut (sans JS, ou si le script d'animation ne s'est pas chargé),
   le contenu reste visible : seule la classe .js-anims, ajoutée par
   js/notre-histoire.js une fois qu'il tourne réellement, active la
   révélation au défilement. Ainsi une page ne peut jamais rester
   vide/« cassée » si ce script ne se charge pas. */
.js-anims .anim-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anims .anim-scroll--gauche {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-scroll.est-visible,
.anim-scroll--gauche.est-visible {
  opacity: 1;
  transform: none;
}

/* Délais en cascade pour les groupes de cartes */
.anim-scroll[data-delai="1"] { transition-delay: 0.07s; }
.anim-scroll[data-delai="2"] { transition-delay: 0.17s; }
.anim-scroll[data-delai="3"] { transition-delay: 0.27s; }
.anim-scroll[data-delai="4"] { transition-delay: 0.37s; }
.anim-scroll[data-delai="5"] { transition-delay: 0.47s; }
.anim-scroll[data-delai="6"] { transition-delay: 0.57s; }

/* --- Ligne décorative animée sous les titres de section ---------------- */
.ligne-deco {
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--couleur-dore), var(--couleur-vert));
  margin: var(--espace-sm) auto var(--espace-xl);
  border-radius: 2px;
  transform-origin: left center;
}

.js-anims .ligne-deco {
  transform: scaleX(0);
}

.ligne-deco.est-visible {
  animation: elargirLigne 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes elargirLigne {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Pop-in des icônes SVG des cartes ---------------------------------- */
.js-anims .icone-anim {
  opacity: 0;
}

.icone-anim.est-visible {
  animation: iconePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconePop {
  0%   { opacity: 0; transform: scale(0.25) rotate(-18deg); }
  65%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Animations du hero de page (chargement immédiat) ------------------ */
@keyframes fondreMonter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-anim .section__surtitre {
  animation: fondreMonter 0.6s ease both;
}

.hero-anim .section__titre {
  animation: fondreMonter 0.75s ease 0.13s both;
}

.hero-anim .section__sous-titre {
  animation: fondreMonter 0.65s ease 0.27s both;
}

/* --- Accessibilité : préférence de mouvement réduit -------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-scroll,
  .anim-scroll--gauche {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ligne-deco {
    transform: scaleX(1) !important;
    animation: none !important;
  }
  .icone-anim {
    opacity: 1 !important;
    animation: none !important;
  }
  .hero-anim .section__surtitre,
  .hero-anim .section__titre,
  .hero-anim .section__sous-titre {
    animation: none !important;
  }
}

/* ==========================================================================
   26. GUIDE PRATIQUE — Visionneuse PDF + recherche
   ========================================================================== */

.guide-pdf__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espace-md);
  margin: var(--espace-xl) 0 var(--espace-lg);
}

.guide-pdf__recherche {
  flex: 1 1 320px;
}

.guide-pdf__recherche-label {
  display: block;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte-doux);
  margin-bottom: var(--espace-xs);
}

.guide-pdf__recherche-groupe {
  display: flex;
  gap: var(--espace-sm);
}

.guide-pdf__recherche-champ {
  flex: 1;
  min-width: 0;
  padding: .6rem 1rem;
  border: 2px solid var(--couleur-vert-pale);
  border-radius: var(--rayon-full);
  font-size: var(--taille-md);
  font-family: inherit;
}

.guide-pdf__recherche-champ:focus {
  outline: none;
  border-color: var(--couleur-vert);
}

.guide-pdf__telecharger {
  white-space: nowrap;
}

.guide-pdf__resultats {
  margin-bottom: var(--espace-lg);
  padding: var(--espace-md) var(--espace-lg);
  background-color: var(--couleur-vert-pale);
  border-radius: var(--rayon-md);
}

.guide-pdf__resultats-titre {
  margin: 0 0 var(--espace-sm);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-vert);
}

.guide-pdf__resultat-lien {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--espace-sm) 0;
  border: none;
  border-bottom: 1px solid rgba(45, 90, 39, 0.15);
  background: none;
  color: var(--couleur-texte);
  font-family: inherit;
  font-size: var(--taille-sm);
  cursor: pointer;
}

.guide-pdf__resultat-lien:last-child {
  border-bottom: none;
}

.guide-pdf__resultat-lien:hover,
.guide-pdf__resultat-lien:focus-visible {
  color: var(--couleur-vert);
}

.guide-pdf__resultat-page {
  font-weight: var(--graisse-bold);
  color: var(--couleur-vert);
}

.guide-pdf__resultat-extrait mark {
  background-color: var(--couleur-dore-clair);
  color: var(--couleur-texte);
  border-radius: 2px;
  padding: 0 .1em;
}

.guide-pdf__visionneuse {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.guide-pdf__iframe {
  width: 100%;
  height: 75vh;
  min-height: 480px;
  border: 1px solid var(--couleur-gris-clair);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-blanc);
}

@media (min-width: 768px) {
  .guide-pdf__iframe {
    height: 85vh;
    min-height: 640px;
  }
}

.guide-pdf__secours {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux);
  text-align: center;
  margin: 0;
}

/* Sur desktop : indicateurs toujours visibles */