/* ==========================================================================
   IvoirMeat — feuille de style
   Palette issue du logo : vert forêt, bordeaux, ambre, papier de boucher.
   ========================================================================== */

:root{
  --vert:        #1B3A2F;
  --vert-clair:  #27543F;
  --vert-pale:   #E3EAE3;
  --bordeaux:    #8E1B22;
  --bordeaux-2:  #6C1219;
  --ambre:       #E0A21A;
  --ambre-pale:  #FBEFCF;
  --os:          #FBF9F5;
  --papier:      #EFE9DD;
  --encre:       #14180F;
  --gris:        #667065;
  --gris-clair:  #D7D3C7;
  --blanc:       #FFFFFF;

  --rayon:       4px;
  --rayon-lg:    10px;
  --ombre:       0 1px 2px rgba(20,24,15,.06), 0 8px 24px -12px rgba(20,24,15,.18);
  --ombre-fort:  0 2px 4px rgba(20,24,15,.08), 0 20px 40px -20px rgba(20,24,15,.35);

  --display: "Zilla Slab", "Bitter", Georgia, "Times New Roman", serif;
  --corps:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max:     1180px;
  --gouttiere: 24px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--os);
  color:var(--encre);
  font-family:var(--corps);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.1rem, 5.2vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.4rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gouttiere); }

/* Bandeau de section : une seule source pour l'espacement vertical */
.section{ padding:80px 0; }
.section--serre{ padding:52px 0; }
.section--vert{ background:var(--vert); color:var(--os); }
.section--papier{ background:var(--papier); }

.eyebrow{
  font-family:var(--corps);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bordeaux);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.28; }
.section--vert .eyebrow{ color:var(--ambre); }

.plomb{ font-size:1.05rem; color:var(--gris); max-width:62ch; }
.section--vert .plomb{ color:#C9D6CB; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--corps); font-size:.92rem; font-weight:600;
  padding:.82rem 1.4rem; border-radius:var(--rayon);
  border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primaire{ background:var(--bordeaux); color:#fff; }
.btn--primaire:hover{ background:var(--bordeaux-2); }
.btn--wa{ background:#128C4A; color:#fff; }
.btn--wa:hover{ background:#0E7139; }
.btn--fantome{ background:transparent; border-color:var(--gris-clair); color:var(--encre); }
.btn--fantome:hover{ border-color:var(--vert); background:var(--vert); color:var(--os); }
.section--vert .btn--fantome{ border-color:rgba(251,249,245,.34); color:var(--os); }
.section--vert .btn--fantome:hover{ background:var(--os); color:var(--vert); }
.btn--bloc{ width:100%; }
.btn--petit{ padding:.5rem .85rem; font-size:.82rem; }

/* ---------- En-tête ---------- */
.topbar{
  background:var(--vert); color:#C9D6CB;
  font-size:.78rem; letter-spacing:.02em;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; flex-wrap:wrap; }
.topbar a{ color:var(--ambre); text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }

.entete{
  position:sticky; top:0; z-index:60;
  background:rgba(251,249,245,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gris-clair);
}
.entete .wrap{ display:flex; align-items:center; gap:1.2rem; min-height:76px; }
.marque{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto; }
.marque img{ height:52px; width:auto; }
.marque__txt{ display:none; }

.nav{ display:flex; gap:.25rem; margin-left:auto; align-items:center; }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--encre);
  padding:.5rem .7rem; border-radius:var(--rayon); position:relative;
}
.nav a:hover{ background:var(--vert-pale); }
.nav a[aria-current="page"]{ color:var(--bordeaux); font-weight:600; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.18rem; height:2px; background:var(--bordeaux);
}

.entete__actions{ display:flex; align-items:center; gap:.5rem; }
.panier-lien{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; font-size:.9rem; font-weight:600; color:var(--encre);
  padding:.5rem .75rem; border:1.5px solid var(--gris-clair); border-radius:var(--rayon);
}
.panier-lien:hover{ border-color:var(--vert); }
.panier-lien__n{
  background:var(--bordeaux); color:#fff; font-size:.7rem; font-weight:700;
  min-width:19px; height:19px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
}
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:var(--encre); margin:4px 0; transition:.2s; }

@media (max-width:940px){
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--os); border-bottom:1px solid var(--gris-clair);
    padding:.5rem var(--gouttiere) 1.2rem; gap:0; display:none;
  }
  .nav.ouvert{ display:flex; }
  .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--gris-clair); border-radius:0; }
  .nav a[aria-current="page"]::after{ display:none; }
  .burger{ display:block; order:3; }
  .entete__actions{ margin-left:auto; }
}

/* ---------- SIGNATURE : le tampon de boucherie ---------- */
.tampon{
  --t:88px;
  width:var(--t); height:calc(var(--t) * .72);
  border:2px solid var(--bordeaux);
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-8deg);
  color:var(--bordeaux);
  text-align:center;
  background:rgba(251,249,245,.82);
  position:relative;
  flex:0 0 auto;
}
.tampon::before{
  content:""; position:absolute; inset:4px; border:1px dashed var(--bordeaux); border-radius:50%; opacity:.55;
}
.tampon__val{ font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1; }
.tampon__lab{ font-size:.52rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.tampon--ambre{ border-color:var(--ambre); color:#A9770B; }
.tampon--ambre::before{ border-color:var(--ambre); }

/* ---------- Bannière en carrousel ----------
   L'image est affichée EN ENTIER (object-fit: contain) : jamais rognée,
   ni en haut ni sur les côtés. Le vide autour est comblé par la même image
   floutée, ce qui évite les bandes noires quel que soit le format de la photo.
   Le texte est centré sur un panneau noir translucide, pour rester lisible
   sans masquer la photo. */
.slider{
  position:relative; overflow:hidden;
  background:#0E1410;
  height:clamp(430px, 46vw, 620px);
}
.slider::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:34px; z-index:4;
  background:var(--os); pointer-events:none;
  clip-path:polygon(0 62%, 14% 34%, 33% 58%, 52% 26%, 71% 54%, 88% 30%, 100% 56%, 100% 100%, 0 100%);
}

.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease;
}
.slide.actif{ opacity:1; visibility:visible; z-index:2; }

/* Fond : la photo floutée et agrandie, pour habiller les bords */
.slide__flou{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:blur(34px) brightness(.42) saturate(1.1);
  transform:scale(1.2);
}
/* La photo elle-même, intégralement visible */
.slide__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  object-position:center;
}

/* Voile très léger : la photo doit rester bien visible */
.slide__voile{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,20,16,.30) 0%, rgba(14,20,16,.18) 45%, rgba(14,20,16,.45) 100%);
}

.slide__contenu{
  position:relative; z-index:3;
  width:100%; display:flex; justify-content:center;
}
/* Le panneau noir translucide qui porte le texte */
.slide__bloc{
  max-width:660px; text-align:center;
  background:rgba(12,16,12,.62);
  backdrop-filter:blur(6px);
  border:1px solid rgba(251,249,245,.14);
  border-radius:var(--rayon-lg);
  padding:30px 34px 32px;
}
.slide h1{ color:#fff; font-size:clamp(1.7rem, 3.5vw, 2.7rem); margin-bottom:.55rem; }
.slide h1 em{ font-style:normal; color:var(--ambre); }
.slide__texte{ color:#E4EAE3; font-size:1rem; margin:0 auto; max-width:52ch; }
.slide__actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; justify-content:center; }
.slide .eyebrow{ color:var(--ambre); justify-content:center; }
.slide .eyebrow::after{ display:none; }
/* Sur photo sombre, le bouton secondaire doit rester lisible */
.slide .btn--fantome{ border-color:rgba(251,249,245,.6); color:#fff; background:rgba(12,16,12,.35); }
.slide .btn--fantome:hover{ background:var(--os); color:var(--vert); border-color:var(--os); }

/* Le texte n'apparaît qu'une fois la slide active */
.slide__bloc > *{ opacity:0; transform:translateY(14px); }
.slide.actif .slide__bloc > *{ animation:monteTexte .7s ease forwards; }
.slide.actif .slide__bloc > *:nth-child(1){ animation-delay:.10s; }
.slide.actif .slide__bloc > *:nth-child(2){ animation-delay:.18s; }
.slide.actif .slide__bloc > *:nth-child(3){ animation-delay:.26s; }
.slide.actif .slide__bloc > *:nth-child(4){ animation-delay:.34s; }
@keyframes monteTexte{ to{ opacity:1; transform:none; } }

/* Flèches */
.slider__fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(12,16,12,.5); border:1.5px solid rgba(251,249,245,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; line-height:1;
  transition:background .18s ease, border-color .18s ease;
}
.slider__fleche:hover{ background:var(--bordeaux); border-color:var(--bordeaux); }
.slider__fleche--g{ left:18px; }
.slider__fleche--d{ right:18px; }

/* Pastilles de navigation */
.slider__puces{
  position:absolute; left:0; right:0; bottom:52px; z-index:5;
  display:flex; gap:.5rem; justify-content:center;
}
.slider__puce{
  width:34px; height:4px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:rgba(251,249,245,.4); position:relative; overflow:hidden;
}
.slider__puce.actif{ background:rgba(251,249,245,.3); }
.slider__puce.actif::after{
  content:""; position:absolute; inset:0; background:var(--ambre);
  transform-origin:left; animation:remplirPuce 6s linear forwards;
}
.slider__puce.actif.fige::after{ animation:none; transform:scaleX(1); }
@keyframes remplirPuce{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Sur téléphone, l'écran est trop étroit pour poser le texte SUR la photo
   sans la masquer : on empile — la photo entière en haut, le texte dessous. */
@media (max-width:860px){
  .slider{ height:auto; }
  .slide{ position:relative; display:none; flex-direction:column; justify-content:flex-start; }
  .slide.actif{ display:flex; }
  .slide__img{
    position:relative; inset:auto;
    width:100%; height:auto; max-height:42vh;
    object-fit:contain;
  }
  .slide__contenu{ padding:20px 14px 76px; }
  .slide__bloc{ padding:20px 18px 22px; max-width:none; }
  .slide h1{ font-size:clamp(1.45rem, 6.2vw, 1.95rem); }
  .slide__texte{ font-size:.94rem; }
  .slide__actions{ margin-top:1.1rem; }
  .slide__voile{ background:linear-gradient(180deg, rgba(14,20,16,.18) 0%, rgba(14,20,16,.5) 100%); }
  .slide__flou{ filter:blur(30px) brightness(.34); }
  .slider__fleche{ display:none; }
  .slider__puces{ bottom:26px; }
}

/* Bandeau de repères sous le hero */
.reperes{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--gris-clair); border:1px solid var(--gris-clair);
  border-radius:var(--rayon-lg); overflow:hidden; margin-top:-30px; position:relative; z-index:5;
}
.repere{ background:var(--os); padding:22px 20px; }
.repere__k{ font-family:var(--display); font-size:1.45rem; font-weight:700; color:var(--vert); line-height:1; }
.repere__l{ font-size:.8rem; color:var(--gris); margin-top:.35rem; }

/* ---------- Grille produits ---------- */
.grille{ display:grid; gap:22px; }
.grille--3{ grid-template-columns:repeat(3, 1fr); }
.grille--4{ grid-template-columns:repeat(4, 1fr); }
.grille--2{ grid-template-columns:repeat(2, 1fr); }

.carte{
  background:var(--blanc);
  border:1px solid var(--gris-clair);
  border-radius:var(--rayon-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none; color:inherit;
}
.carte:hover{ transform:translateY(-3px); box-shadow:var(--ombre-fort); border-color:var(--vert-clair); }
.carte__media{ position:relative; aspect-ratio:4/3; background:var(--papier); overflow:hidden; }
.carte__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.carte:hover .carte__media img{ transform:scale(1.045); }
.carte__tampon{ position:absolute; right:10px; top:10px; --t:74px; }
.carte__corps{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.carte__cat{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); }
.carte__nom{ font-family:var(--display); font-size:1.14rem; font-weight:700; margin:.3rem 0 .35rem; }
.carte__resume{ font-size:.87rem; color:var(--gris); margin:0 0 1rem; flex:1; }
.carte__pied{ display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; }
.prix{ font-family:var(--display); font-weight:700; font-size:1.18rem; color:var(--bordeaux); font-variant-numeric:tabular-nums; line-height:1.1; }
.prix small{ display:block; font-family:var(--corps); font-size:.7rem; font-weight:500; color:var(--gris); letter-spacing:.04em; }

.etiq{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .5rem; border-radius:3px;
}
.etiq--gros{ background:var(--vert); color:var(--ambre); }
.etiq--stock{ background:var(--vert-pale); color:var(--vert); }
.etiq--faible{ background:var(--ambre-pale); color:#8A6408; }
.etiq--rupture{ background:#F6DEDE; color:var(--bordeaux); }
.carte__etiqs{ position:absolute; left:10px; top:10px; display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }

/* ---------- Barre de filtres ---------- */
.filtres{
  background:var(--blanc); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg);
  padding:18px; display:grid; gap:14px; margin-bottom:28px;
}
.filtres__ligne{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.champ{ display:flex; flex-direction:column; gap:.3rem; }
.champ label{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], select, textarea{
  font-family:var(--corps); font-size:.92rem; color:var(--encre);
  padding:.62rem .8rem; border:1.5px solid var(--gris-clair); border-radius:var(--rayon);
  background:var(--blanc); width:100%;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--vert-clair); outline-offset:1px; border-color:var(--vert-clair); }
textarea{ min-height:110px; resize:vertical; }

.puces{ display:flex; gap:.4rem; flex-wrap:wrap; }
.puce{
  font-size:.84rem; font-weight:500; padding:.45rem .85rem; border-radius:99px;
  border:1.5px solid var(--gris-clair); background:var(--blanc); cursor:pointer; color:var(--encre);
  transition:.15s;
}
.puce:hover{ border-color:var(--vert-clair); }
.puce.actif{ background:var(--vert); border-color:var(--vert); color:var(--os); }

.compteur{ font-size:.85rem; color:var(--gris); }

/* ---------- Fiche produit ---------- */
.fiche{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.galerie__principale{
  aspect-ratio:4/3; border-radius:var(--rayon-lg); overflow:hidden;
  background:var(--papier); border:1px solid var(--gris-clair);
}
.galerie__principale img{ width:100%; height:100%; object-fit:cover; }
.galerie__vignettes{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.galerie__vignettes button{
  width:76px; height:60px; padding:0; border-radius:var(--rayon); overflow:hidden;
  border:2px solid var(--gris-clair); background:var(--papier); cursor:pointer;
}
.galerie__vignettes button.actif{ border-color:var(--bordeaux); }
.galerie__vignettes img{ width:100%; height:100%; object-fit:cover; }

.fiche__meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.selecteur{ background:var(--papier); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg); padding:20px; margin:24px 0; }
.selecteur__titre{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin-bottom:.7rem; }
.formats{ display:grid; gap:8px; }
.format{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem .9rem; background:var(--blanc); border:1.5px solid var(--gris-clair);
  border-radius:var(--rayon); cursor:pointer; text-align:left; width:100%; font-family:var(--corps); font-size:.92rem;
}
.format:hover{ border-color:var(--vert-clair); }
.format.actif{ border-color:var(--bordeaux); box-shadow:inset 0 0 0 1px var(--bordeaux); }
.format__kg{ font-size:.78rem; color:var(--gris); }
.format__prix{ font-family:var(--display); font-weight:700; color:var(--bordeaux); font-variant-numeric:tabular-nums; }

.quantite{ display:flex; align-items:center; gap:0; margin-top:14px; }
.quantite button{
  width:42px; height:42px; border:1.5px solid var(--gris-clair); background:var(--blanc);
  font-size:1.2rem; cursor:pointer; color:var(--encre);
}
.quantite button:first-child{ border-radius:var(--rayon) 0 0 var(--rayon); }
.quantite button:last-child{ border-radius:0 var(--rayon) var(--rayon) 0; }
.quantite input{ width:70px; height:42px; text-align:center; border-radius:0; border-left:0; border-right:0; font-variant-numeric:tabular-nums; }

.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--gris-clair); margin-top:18px; padding-top:16px;
}
.total__lab{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gris); }
.total__val{ font-family:var(--display); font-size:1.9rem; font-weight:700; color:var(--vert); font-variant-numeric:tabular-nums; }

.details{ border-top:1px solid var(--gris-clair); }
.details__ligne{ display:flex; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--gris-clair); font-size:.9rem; }
.details__lab{ flex:0 0 40%; color:var(--gris); font-weight:600; }

/* ---------- Avis ---------- */
.avis{ background:var(--blanc); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg); padding:22px; }
.avis__tete{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin-bottom:.6rem; }
.avis__auteur{ font-weight:700; font-size:.95rem; }
.avis__role{ font-size:.8rem; color:var(--gris); }
.etoiles{ color:var(--ambre); letter-spacing:.12em; font-size:.95rem; }
.avis__texte{ font-size:.92rem; color:var(--gris); margin:0; }

/* ---------- Panier ---------- */
.ligne-panier{
  display:grid; grid-template-columns:96px 1fr auto; gap:18px; align-items:center;
  background:var(--blanc); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg);
  padding:14px; margin-bottom:12px;
}
.ligne-panier img{ width:96px; height:76px; object-fit:cover; border-radius:var(--rayon); }
.ligne-panier__nom{ font-family:var(--display); font-weight:700; font-size:1.02rem; }
.ligne-panier__det{ font-size:.83rem; color:var(--gris); }
.recap{
  background:var(--vert); color:var(--os); border-radius:var(--rayon-lg); padding:26px; position:sticky; top:100px;
}
.recap h3{ color:#fff; }
.recap__ligne{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.92rem; color:#C9D6CB; }
.recap__total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid rgba(251,249,245,.22); margin-top:.6rem; padding-top:.9rem; }
.recap__total b{ font-family:var(--display); font-size:1.6rem; color:var(--ambre); font-variant-numeric:tabular-nums; }

.vide{ text-align:center; padding:64px 20px; border:1px dashed var(--gris-clair); border-radius:var(--rayon-lg); background:var(--blanc); }
.vide h3{ margin-bottom:.4rem; }
.vide p{ color:var(--gris); }

/* ---------- Blocs divers ---------- */
.bloc{
  background:var(--blanc); border:1px solid var(--gris-clair);
  border-radius:var(--rayon-lg); padding:24px;
}
.section--vert .bloc{ background:var(--vert-clair); border-color:rgba(251,249,245,.16); color:var(--os); }
.bloc h3{ margin-bottom:.35rem; }
.bloc p:last-child{ margin-bottom:0; }

.etapes{ counter-reset:e; display:grid; gap:1px; background:var(--gris-clair); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg); overflow:hidden; }
.etape{ background:var(--os); padding:26px 24px; counter-increment:e; }
.etape::before{
  content:counter(e); font-family:var(--display); font-weight:700; font-size:.85rem;
  width:30px; height:30px; border-radius:50%; background:var(--bordeaux); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
}
.etape h3{ font-size:1.05rem; }
.etape p{ font-size:.9rem; color:var(--gris); margin:0; }

.faq details{
  background:var(--blanc); border:1px solid var(--gris-clair); border-radius:var(--rayon-lg);
  padding:16px 20px; margin-bottom:10px;
}
.faq summary{ font-family:var(--display); font-weight:700; font-size:1.02rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--bordeaux); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:.8rem 0 0; color:var(--gris); font-size:.93rem; }

.galerie-photos{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.galerie-photos a{ aspect-ratio:1; border-radius:var(--rayon-lg); overflow:hidden; background:var(--papier); display:block; }
.galerie-photos img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.galerie-photos a:hover img{ transform:scale(1.06); }

.video{ aspect-ratio:16/9; border-radius:var(--rayon-lg); overflow:hidden; background:var(--vert); display:flex; align-items:center; justify-content:center; color:#C9D6CB; text-align:center; padding:20px; font-size:.9rem; }
.video iframe{ width:100%; height:100%; border:0; }

.partage{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.partage__lab{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.partage a, .partage button{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gris-clair); border-radius:var(--rayon); background:var(--blanc);
  color:var(--vert); text-decoration:none; cursor:pointer;
}
.partage a:hover, .partage button:hover{ background:var(--vert); color:var(--os); border-color:var(--vert); }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-flottant{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#128C4A; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(18,140,74,.7); text-decoration:none;
}
.wa-flottant:hover{ background:#0E7139; }

/* ---------- Bandeau « catalogue mis à jour » ---------- */
.maj-dispo{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:90;
  display:flex; align-items:center; gap:.8rem;
  background:var(--vert); color:var(--os);
  padding:.7rem .8rem .7rem 1.1rem;
  border-radius:99px; box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  font-size:.88rem; max-width:calc(100% - 32px);
}
.maj-dispo .btn{ background:var(--ambre); color:var(--encre); border:0; white-space:nowrap; }
.maj-dispo .btn:hover{ background:#C98F16; }
.maj-dispo__fermer{
  background:none; border:0; color:#9FBAA4; font-size:1.25rem; line-height:1;
  cursor:pointer; padding:0 .2rem;
}
.maj-dispo__fermer:hover{ color:#fff; }
@media (max-width:560px){
  .maj-dispo{ left:12px; right:12px; transform:none; border-radius:var(--rayon-lg); }
  .maj-dispo span{ flex:1; }
}

/* ---------- Pied de page ---------- */
.pied{ background:var(--encre); color:#9FAA9C; padding:56px 0 26px; font-size:.9rem; }
.pied__grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
.pied h4{ color:var(--os); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-family:var(--corps); margin-bottom:1rem; }
.pied a{ color:#9FAA9C; text-decoration:none; display:block; padding:.22rem 0; }
.pied a:hover{ color:var(--ambre); }
.pied__logo{ background:#fff; border-radius:var(--rayon); padding:10px; width:150px; margin-bottom:1rem; }
.pied__bas{ border-top:1px solid rgba(251,249,245,.12); margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }

/* ---------- Bandeau de page intérieure ---------- */
.banniere{ background:var(--vert); color:var(--os); padding:52px 0 46px; }
.banniere h1{ color:#fff; margin-bottom:.3rem; }
.fil{ font-size:.8rem; color:#9FBAA4; margin-bottom:.8rem; }
.fil a{ color:#9FBAA4; text-decoration:none; }
.fil a:hover{ color:var(--ambre); }
.banniere .plomb{ color:#C9D6CB; }

/* ---------- Administration ---------- */
.admin-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.kpi{ background:var(--blanc); border:1px solid var(--gris-clair); border-left:4px solid var(--bordeaux); border-radius:var(--rayon-lg); padding:18px 20px; }
.kpi__v{ font-family:var(--display); font-size:1.75rem; font-weight:700; color:var(--vert); line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi__l{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-top:.3rem; }

.onglets{ display:flex; gap:.3rem; border-bottom:1px solid var(--gris-clair); margin-bottom:24px; flex-wrap:wrap; }
.onglet{
  background:none; border:0; border-bottom:2px solid transparent; padding:.75rem 1rem;
  font-family:var(--corps); font-size:.92rem; font-weight:600; color:var(--gris); cursor:pointer;
}
.onglet.actif{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); }

table{ width:100%; border-collapse:collapse; background:var(--blanc); font-size:.9rem; }
th{ text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); padding:.7rem .8rem; border-bottom:1.5px solid var(--gris-clair); white-space:nowrap; }
td{ padding:.7rem .8rem; border-bottom:1px solid var(--gris-clair); vertical-align:middle; }
tr:hover td{ background:var(--os); }
.tableau-boite{ border:1px solid var(--gris-clair); border-radius:var(--rayon-lg); overflow:auto; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

.barres{ display:grid; gap:12px; }
.barre__tete{ display:flex; justify-content:space-between; font-size:.86rem; margin-bottom:.25rem; }
.barre__piste{ height:9px; background:var(--papier); border-radius:99px; overflow:hidden; }
.barre__jauge{ height:100%; background:var(--vert); border-radius:99px; transition:width .5s ease; }

.notice{
  background:var(--ambre-pale); border:1px solid #E7CF92; border-left:4px solid var(--ambre);
  border-radius:var(--rayon); padding:14px 18px; font-size:.88rem; color:#6B4E06; margin-bottom:24px;
}
.notice p{ margin:0; }

/* ==========================================================================
   MODALE DE DÉTAILS
   ========================================================================== */
.modale{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.modale.ouverte{ display:flex; }
.modale__fond{
  position:absolute; inset:0;
  background:rgba(20,24,15,.72);
  backdrop-filter:blur(3px);
  animation:fondu .2s ease;
}
@keyframes fondu{ from{ opacity:0; } to{ opacity:1; } }

.modale__boite{
  position:relative; z-index:2;
  width:min(920px, 100%);
  max-height:min(88vh, 900px);
  background:var(--os);
  border-radius:var(--rayon-lg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  overflow:auto;
  animation:monteModale .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes monteModale{ from{ opacity:0; transform:translateY(20px) scale(.985); } to{ opacity:1; transform:none; } }

.modale__fermer{
  position:absolute; right:12px; top:12px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--gris-clair); background:var(--blanc); color:var(--encre);
  font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modale__fermer:hover{ background:var(--bordeaux); border-color:var(--bordeaux); color:#fff; }

.modale__grille{ display:grid; grid-template-columns:1fr 1fr; }
.modale__media{
  background:var(--papier); padding:20px;
  display:flex; flex-direction:column; justify-content:center;   /* centre la photo quand elle est seule */
}
.modale__photo{
  aspect-ratio:4/3; border-radius:var(--rayon); overflow:hidden;
  background:var(--gris-clair); border:1px solid var(--gris-clair);
}
.modale__photo img{ width:100%; height:100%; object-fit:cover; }
.modale__vignettes{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.modale__vignettes button{
  width:62px; height:48px; padding:0; border-radius:3px; overflow:hidden;
  border:2px solid var(--gris-clair); background:var(--papier); cursor:pointer;
}
.modale__vignettes button.actif{ border-color:var(--bordeaux); }
.modale__vignettes img{ width:100%; height:100%; object-fit:cover; }

.modale__corps{ padding:28px 26px 26px; }
.modale__cat{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); }
.modale__titre{ font-family:var(--display); font-size:1.55rem; font-weight:700; margin:.3rem 0 .7rem; line-height:1.15; }
.modale__desc{ font-size:.93rem; color:var(--gris); }
.modale__etiqs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem; }
.modale__section{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin:1.2rem 0 .5rem; }
.modale__formats{ display:flex; gap:.4rem; flex-wrap:wrap; }
.modale__format{
  font-size:.86rem; font-weight:600; padding:.4rem .75rem; border-radius:99px;
  background:var(--vert-pale); color:var(--vert); border:1px solid #C6D5C8;
}
.modale__actions{ display:grid; gap:.6rem; margin-top:1.5rem; }
.modale__note{ font-size:.8rem; color:var(--gris); margin:.9rem 0 0; }

@media (max-width:760px){
  .modale{ padding:0; align-items:flex-end; }
  .modale__boite{ max-height:94vh; border-radius:var(--rayon-lg) var(--rayon-lg) 0 0; width:100%; }
  .modale__grille{ grid-template-columns:1fr; }
  .modale__corps{ padding:22px 20px 26px; }
}

/* Carte cliquable sans balise <a> englobante */
.carte{ cursor:pointer; }
.carte__nom a{ text-decoration:none; color:inherit; }
.carte__nom a:hover{ color:var(--bordeaux); }

/* ---------- Apparition au défilement ----------
   Le masquage n'est appliqué que si JavaScript a démarré : sans JS,
   le contenu reste visible. */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.vu{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grille--4{ grid-template-columns:repeat(3,1fr); }
  .pied__grille{ grid-template-columns:1fr 1fr; }
  .admin-grille{ grid-template-columns:repeat(2,1fr); }
  .galerie-photos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .hero__grille{ grid-template-columns:1fr; gap:34px; }
  .hero__logo{ order:-1; }
  .hero__logo img{ width:min(78%,300px); }
  .fiche{ grid-template-columns:1fr; gap:30px; }
  .reperes{ grid-template-columns:repeat(2,1fr); }
  .grille--3, .grille--4{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:56px 0; }
  .recap{ position:static; }
}
@media (max-width:560px){
  .grille--2, .grille--3, .grille--4{ grid-template-columns:1fr; }
  .galerie-photos{ grid-template-columns:repeat(2,1fr); }
  .pied__grille{ grid-template-columns:1fr; }
  .admin-grille{ grid-template-columns:1fr; }
  .ligne-panier{ grid-template-columns:72px 1fr; }
  .ligne-panier img{ width:72px; height:60px; }
  .topbar .wrap > span:first-child{ display:none; }
  .topbar .wrap{ justify-content:center; }
  :root{ --gouttiere:18px; }
}