/* ==========================================================================
   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 ---------- */
.slider{
  position:relative; overflow:hidden;
  background:var(--vert);
  height:clamp(460px, 66vh, 640px);
}
.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;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease;
}
.slide.actif{ opacity:1; visibility:visible; z-index:2; }

.slide__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.slide.actif .slide__img{ animation:zoomLent 9s ease-out forwards; }
@keyframes zoomLent{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* Voile sombre : le texte doit rester lisible quelle que soit la photo */
.slide__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,24,15,.92) 0%, rgba(20,24,15,.74) 42%, rgba(20,24,15,.30) 78%, rgba(20,24,15,.18) 100%),
    linear-gradient(180deg, rgba(27,58,47,.42) 0%, rgba(27,58,47,.66) 100%);
}
.slide__contenu{ position:relative; z-index:3; max-width:var(--max); }
.slide__bloc{ max-width:36rem; }
.slide h1{ color:#fff; font-size:clamp(2rem, 4.6vw, 3.4rem); text-shadow:0 2px 18px rgba(0,0,0,.4); }
.slide h1 em{ font-style:normal; color:var(--ambre); }
.slide__texte{ color:#DDE5DC; font-size:1.05rem; max-width:44ch; text-shadow:0 1px 10px rgba(0,0,0,.45); }
.slide__actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.slide .eyebrow{ color:var(--ambre); }
/* Sur photo sombre, le bouton secondaire doit rester lisible */
.slide .btn--fantome{ border-color:rgba(251,249,245,.55); color:#fff; background:rgba(20,24,15,.28); }
.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(16px); }
.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:.20s; }
.slide.actif .slide__bloc > *:nth-child(3){ animation-delay:.30s; }
.slide.actif .slide__bloc > *:nth-child(4){ animation-delay:.40s; }
@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(20,24,15,.42); border:1.5px solid rgba(251,249,245,.42); 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:68px; 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,.38); position:relative; overflow:hidden;
}
.slider__puce.actif{ background:rgba(251,249,245,.30); }
.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); } }

@media (max-width:860px){
  .slider{ height:auto; min-height:0; }
  .slide{ position:relative; height:auto; display:none; }
  .slide.actif{ display:flex; }
  .slide__contenu{ padding-top:96px; padding-bottom:128px; width:100%; }
  .slide h1{ font-size:clamp(1.7rem, 6.4vw, 2.3rem); }
  .slide__texte{ font-size:.98rem; }
  .slide__voile{
    background:linear-gradient(180deg, rgba(20,24,15,.82) 0%, rgba(20,24,15,.72) 55%, rgba(20,24,15,.88) 100%);
  }
  .slider__fleche{ display:none; }
  .slider__puces{ bottom:58px; }
}

/* 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; }

/* ---------- 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; }

/* ---------- 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; }
}