/* =========================================================
   APP.CSS — composants ajoutés pour la version MULTI-PAGES
   (panier, commande, réservation à créneaux, boutique)
   S'appuie sur les variables de styles.css (--or, --vert-accent, …)
   ========================================================= */

/* ---- Header solide sur les sous-pages (pas de hero plein écran) ---- */
body.subpage .header{
  background:rgba(18,33,26,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 30px -10px rgba(0,0,0,.6);
}
/* Lien de nav actif */
.nav__list a.is-active{ color:var(--or); }
.nav__list a.is-active::after{ transform:scaleX(1); }

/* ---- Hero de sous-page ---- */
.page-hero{
  position:relative;
  padding:9rem 0 3.5rem;
  text-align:center;
  border-bottom:1px solid rgba(200,164,92,.18);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% 0%, rgba(63,140,94,.18), transparent 70%);
  z-index:-1;
}
.page-hero h1{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--creme);
}
.page-hero h1 em{ font-style:italic; color:var(--or); font-weight:500; }
.page-hero p{ color:var(--gris); max-width:560px; margin:1rem auto 0; }

/* =========================================================
   COMMANDE / CLICK & COLLECT
   ========================================================= */
.order-cat__head{
  text-align:center; margin:0 0 2rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid rgba(200,164,92,.25);
}
.order-cat__head h3{
  font-family:var(--serif); font-size:1.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--or); font-weight:500;
}
.order-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:1.2rem;
}
.order-item{
  display:flex; flex-direction:column; gap:.5rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(200,164,92,.18);
  border-radius:var(--r);
  padding:1.3rem 1.4rem;
  transition:border-color .4s var(--easing), transform .4s var(--easing);
}
.order-item:hover{ border-color:rgba(200,164,92,.4); transform:translateY(-2px); }
.order-item__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.order-item__name{ font-family:var(--serif); font-size:1.12rem; color:var(--creme); }
.order-item__price{ font-family:var(--serif); color:var(--or); font-size:1.05rem; white-space:nowrap; }
.order-item__desc{ color:var(--gris); font-size:.86rem; line-height:1.5; flex:1; }

/* Bouton + / stepper de quantité */
.add-btn{
  margin-top:.4rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem;
  background:var(--vert-accent); color:var(--creme);
  border-radius:var(--r); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:background .3s var(--easing), transform .2s var(--easing);
}
.add-btn:hover{ background:var(--vert-accent-hover); }
.add-btn:active{ transform:scale(.97); }
.stepper{
  margin-top:.4rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.2rem;
  border:1px solid rgba(200,164,92,.4); border-radius:var(--r); overflow:hidden;
}
.stepper button{
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--or); font-size:1.2rem; line-height:1;
  transition:background .25s;
}
.stepper button:hover{ background:rgba(200,164,92,.12); }
.stepper span{ min-width:30px; text-align:center; font-weight:500; color:var(--creme); }

/* =========================================================
   BOUTIQUE (e-commerce)
   ========================================================= */
.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.6rem;
}
.product-card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(200,164,92,.18);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .4s var(--easing), transform .4s var(--easing);
}
.product-card:hover{ border-color:rgba(200,164,92,.4); transform:translateY(-3px); }
.product-card__media{ aspect-ratio:4/3; overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--easing); }
.product-card:hover .product-card__media img{ transform:scale(1.05); }
.product-card__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product-card__name{ font-family:var(--serif); font-size:1.1rem; color:var(--creme); }
.product-card__desc{ color:var(--gris); font-size:.84rem; line-height:1.45; flex:1; }
.product-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.3rem; }
.product-card__price{ font-family:var(--serif); color:var(--or); font-size:1.15rem; }

/* =========================================================
   PANIER : bouton flottant + tiroir
   ========================================================= */
.cart-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:80;
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1.3rem;
  background:var(--or); color:var(--noir);
  border-radius:999px; font-weight:600; font-size:.82rem; letter-spacing:.1em;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.6);
  transform:translateY(120px); opacity:0;
  transition:transform .45s var(--easing), opacity .45s var(--easing), background .3s;
}
.cart-fab.is-visible{ transform:translateY(0); opacity:1; }
.cart-fab:hover{ background:var(--or-clair); }
.cart-fab__count{
  background:var(--noir); color:var(--or);
  min-width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center; font-size:.78rem; padding:0 .3rem;
}
.cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .4s var(--easing);
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(420px, 92vw);
  background:var(--vert-profond);
  border-left:1px solid rgba(200,164,92,.25);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .45s var(--easing);
  display:flex; flex-direction:column;
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__head{
  padding:1.5rem 1.6rem; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(200,164,92,.2);
}
.cart-drawer__head h3{ font-family:var(--serif); color:var(--creme); font-size:1.4rem; }
.cart-drawer__close{ font-size:1.6rem; color:var(--gris); line-height:1; transition:color .25s; }
.cart-drawer__close:hover{ color:var(--or); }
.cart-lines{ flex:1; overflow-y:auto; padding:1rem 1.6rem; display:flex; flex-direction:column; gap:1rem; }
.cart-empty{ color:var(--gris); text-align:center; margin:3rem 0; font-style:italic; }
.cart-line{ display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; align-items:center;
  padding-bottom:1rem; border-bottom:1px solid rgba(200,164,92,.12); }
.cart-line__name{ font-family:var(--serif); color:var(--creme); font-size:1rem; }
.cart-line__price{ color:var(--or); font-size:.92rem; white-space:nowrap; }
.cart-line__qty{ display:inline-flex; align-items:center; gap:.1rem; border:1px solid rgba(200,164,92,.35); border-radius:var(--r); }
.cart-line__qty button{ width:30px; height:30px; color:var(--or); display:grid; place-items:center; }
.cart-line__qty button:hover{ background:rgba(200,164,92,.12); }
.cart-line__qty span{ min-width:24px; text-align:center; color:var(--creme); font-size:.9rem; }
.cart-drawer__foot{ padding:1.4rem 1.6rem; border-top:1px solid rgba(200,164,92,.2); display:grid; gap:1rem; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; }
.cart-total span:first-child{ color:var(--gris); letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; }
.cart-total span:last-child{ font-family:var(--serif); color:var(--or); font-size:1.6rem; }
.cart-pay{ width:100%; justify-content:center; }
.cart-pay[disabled]{ opacity:.5; cursor:not-allowed; }
.cart-note{ font-size:.72rem; color:var(--gris); text-align:center; }

/* Mini toast "ajouté" */
.toast{
  position:fixed; left:50%; bottom:6.5rem;
  transform:translateX(-50%) translateY(20px);
  background:var(--noir); border:1px solid var(--vert-accent);
  color:var(--creme); padding:.8rem 1.3rem; border-radius:var(--r);
  font-size:.85rem; z-index:110; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   RÉSERVATION À CRÉNEAUX (allure plateforme)
   ========================================================= */
.resa{
  max-width:720px; margin:0 auto;
  background:rgba(11,16,13,.55);
  border:1px solid rgba(200,164,92,.2);
  border-radius:var(--r);
  padding:clamp(1.6rem, 3vw, 2.6rem);
  display:grid; gap:1.8rem;
}
.resa__step > .resa__label{
  display:block; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--or); font-weight:500; margin-bottom:.9rem;
}
.resa__covers{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  padding:.6rem 1.1rem; border:1px solid rgba(242,237,227,.25); border-radius:999px;
  font-size:.9rem; color:var(--creme); transition:all .25s var(--easing);
}
.pill:hover{ border-color:var(--or); }
.pill.is-selected{ background:var(--or); color:var(--noir); border-color:var(--or); font-weight:600; }
.resa__slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(86px,1fr)); gap:.6rem; }
.slot{
  padding:.7rem 0; text-align:center; border:1px solid rgba(242,237,227,.22); border-radius:var(--r);
  color:var(--creme); font-size:.92rem; transition:all .25s var(--easing);
}
.slot:hover:not(.is-disabled){ border-color:var(--or); color:var(--or); }
.slot.is-selected{ background:var(--vert-accent); border-color:var(--vert-accent); color:var(--creme); font-weight:600; }
.slot.is-disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.resa__summary{
  background:rgba(200,164,92,.06); border:1px solid rgba(200,164,92,.25);
  border-radius:var(--r); padding:1.1rem 1.3rem; color:var(--creme); font-size:.95rem;
}
.resa__summary b{ color:var(--or); font-weight:500; }
.resa .btn{ justify-self:start; }

/* ---- Bandeau "branchable plateforme" (info pédagogique) ---- */
.platform-note{
  margin-top:2.5rem; max-width:720px; margin-inline:auto;
  border:1px dashed rgba(200,164,92,.4); border-radius:var(--r);
  padding:1.2rem 1.4rem; color:var(--gris); font-size:.86rem; line-height:1.6;
}
.platform-note strong{ color:var(--or); font-weight:500; }

/* ---- Page de retour paiement (succès / annulation) ---- */
.result{ min-height:70vh; display:grid; place-items:center; text-align:center; padding:8rem 1.5rem 4rem; }
.result__icon{ font-size:3rem; margin-bottom:1rem; }
.result h1{ font-size:clamp(2rem,4vw,2.8rem); color:var(--creme); margin-bottom:1rem; }
.result h1 em{ color:var(--or); font-style:italic; }
.result p{ color:var(--gris); max-width:480px; margin:0 auto 2rem; }

@media (max-width:768px){
  .cart-fab{ right:1rem; bottom:1rem; }
  .page-hero{ padding:7.5rem 0 2.5rem; }
}