/* File: wp-content/themes/coachpress-child/style.css */
/*
Theme Name: CoachPress Child
Template: coachpress-lite
Version: 1.1
Author: Feyi
*/

/* ==============================
   Header "Flamingo Estate" – FEYI
   ============================== */

/* === Variables === */
:root{
  --fe-green:#3C5133;
  --fe-green-dark:#2D402C;
  --fe-cream:#fff;
  --fe-border:1px solid rgba(0,0,0,.08);

  --fe-h:clamp(57px,6.4vw,83px);
  --fe-gap:12px;
  --fe-pad-x:clamp(24px,4vw,72px);
  /* Fix: use the actual @font-face family name */
  --fe-font:"Ortica Linear", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fe-topbar-h:40px;
  --fe-topbar-h-m:35px;

  /* Offsets méga menu (CSS-only) */
  --wp-adminbar-h:0px;          /* sera surchargé quand admin */
  --fe-mega-top: calc(var(--wp-adminbar-h, 0px) + var(--fe-topbar-h) + var(--fe-h));
}
/* Hauteur admin-bar quand connecté */
html.admin-bar{ --wp-adminbar-h:32px; }
@media (max-width:782px){ html.admin-bar{ --wp-adminbar-h:46px; } }

/* Base + on masque l’ancien header du thème */
body,#page,.site,.site-content{background:var(--fe-cream)!important}
header#masthead,header.site-header,.header-main,.site-header{display:none!important}

/* Topbar */
.fe-topbar{
  background:var(--fe-green); color:#fff; font-family:var(--fe-font);
  letter-spacing:.04em; text-transform:uppercase;
  min-height:var(--fe-topbar-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; font-size:13px;
}
.fe-topbar p{margin:0}
.fe-topbar a{color:#fff; text-decoration:none}
.fe-topbar a:hover{ text-decoration:underline; text-underline-offset:2px }
@media (max-width:768px){
  .fe-topbar{ min-height:var(--fe-topbar-h-m); padding:0 10px; font-size:12.5px }
}

/* Header */
.fe-header{
  position:sticky; top:0; z-index:9000;
  background:var(--fe-cream); border-bottom:var(--fe-border);
  font-family:var(--fe-font); font-size:14px; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.admin-bar .fe-header{ top:32px }
@media (max-width:782px){ .admin-bar .fe-header{ top:46px } }

/* Grille */
.fe-row{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; height:var(--fe-h);
  padding:0 var(--fe-pad-x); column-gap:56px;
}
.fe-left,.fe-right{ display:flex; align-items:center; gap:var(--fe-gap); min-width:0 }
.fe-left{ justify-content:flex-start }
.fe-center{ display:flex; justify-content:center }
.fe-right{ justify-content:flex-end }

/* Logo */
.fe-logo{ display:inline-flex; align-items:center; color:inherit; text-decoration:none }
.fe-logo img{ height:clamp(24px,3.4vw,36px); width:auto; display:block }

/* Menu */
.fe-menu{
  display:flex; flex-wrap:wrap; gap:var(--fe-gap);
  list-style:none; margin:0; padding:0; max-width:100%;
}
.fe-menu>li{ position:relative }
.fe-menu a{
  font-family:var(--fe-font); font-weight:300;
  font-size:14px; color:var(--fe-green);
  text-decoration:none; padding:12px 6px; display:inline-block;
}
.fe-left .fe-menu{ gap:10px }
.fe-menu a,
.fe-menu a:hover,
.fe-menu a:focus,
.fe-menu a:active,
.fe-menu a:visited{ text-decoration:none!important }
.fe-menu a:hover{ color:var(--fe-green-dark); opacity:.92 }
.fe-right .fe-menu a{ font-size:12.5px; opacity:.82 }

/* Liens droits + icônes */
.fe-link{ font:inherit; font-size:13px; color:var(--fe-green); text-decoration:none; padding:8px 0 }
.fe-link:hover{ color:var(--fe-green-dark) }
.fe-icon{ display:inline-flex; align-items:center; color:var(--fe-green); padding:8px }
.fe-icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8 }
.fe-icon:hover{ color:var(--fe-green-dark) }

/* Panier */
.fe-cart{ position:relative }
.fe-cart__count{
  position:absolute; top:2px; right:-4px; min-width:16px; height:16px; padding:0 5px;
  border-radius:999px; background:#000; color:#fff; font-size:11px; line-height:16px; text-align:center;
}

/* Burger */
.fe-burger{
  display:none; flex-direction:column; gap:4px; border:0; background:transparent;
  padding:10px; cursor:pointer; color:var(--fe-green);
  position:relative; z-index:12000;
}
.fe-burger span{ width:22px; height:2px; background:currentColor; border-radius:2px }

/* =========================
   OFF-CANVAS
   ========================= */

.fe-offcanvas[hidden]{display:block!important;}
.fe-offcanvas:not([hidden]) .fe-offcanvas__panel{transform:none;}

.fe-offcanvas{
  position:fixed; inset:0; z-index:11000; pointer-events:none;
}
.fe-offcanvas__overlay{
  position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:none!important; cursor:pointer;
}
.fe-offcanvas__panel{
  position:absolute; top:0; bottom:0; left:0; width:min(480px,90vw); background:#fff; overflow:auto;
  transform:translateX(-100%); transition:none!important; border-radius:0 16px 16px 0;
  box-shadow:24px 0 60px rgba(0,0,0,.12), 6px 0 18px rgba(0,0,0,.07); z-index:2; padding:28px 24px;
}
.fe-offcanvas__panel::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:28px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.06) 90%, rgba(0,0,0,.12) 100%);
  opacity:.25;
}
html.fe-open{ overflow:hidden; }
html.fe-open .fe-offcanvas{ pointer-events:auto; }
html.fe-open .fe-offcanvas .fe-offcanvas__overlay{ opacity:1; visibility:visible; }
html.fe-open .fe-offcanvas .fe-offcanvas__panel{ transform:translateX(0); }

.fe-offcanvas__close{
  position:absolute; top:10px; right:12px; border:0; background:transparent; box-shadow:none;
  font-size:26px; line-height:1; padding:6px; cursor:pointer;
}
.fe-offcanvas__section{ margin:10px 0 26px; }
.fe-offcanvas__section-title{
  font-family:var(--fe-font); font-weight:300; font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#8f8f86; margin:0 0 14px;
}

/* Menu off-canvas */
#fe-offcanvas .fe-menu{ display:flex; flex-direction:column; gap:4px; }
#fe-offcanvas .fe-menu>li>a{
  font-family:var(--fe-font); font-weight:300; font-size:16px; line-height:1.5; letter-spacing:.01em;
  color:var(--fe-green); padding:8px 2px; border-bottom:1px solid rgba(0,0,0,.06); position:relative; text-decoration:none;
  transition:none!important;
}
#fe-offcanvas .fe-menu>li:last-child>a{ border-bottom:none; }
#fe-offcanvas .fe-menu>li>a::after{ display:none!important; }
#fe-offcanvas .fe-menu>li>a:hover{ color:var(--fe-green-dark); transform:none!important; }

/* Grille catégories */
.fe-catgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
@media (max-width:540px){ .fe-catgrid{ grid-template-columns:repeat(2,1fr); } }
.fe-catcard{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--fe-green); }
.fe-catcard__img{
  width:100%; aspect-ratio:1/1; border-radius:12px; background:#F3F3EF center/cover no-repeat;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset; transition:none!important;
}
.fe-catcard__title{ font-family:var(--fe-font); font-weight:300; font-size:12px; text-align:center; color:var(--fe-green); opacity:.95; }
@media (hover:hover){ .fe-catcard:hover .fe-catcard__img{ transform:none!important; box-shadow:none!important; } }

/* Variante compacte */
.fe-catgrid.fe-grid--compact{ max-width:320px; margin-inline:auto; grid-template-columns:repeat(auto-fit,minmax(90px,auto)); }
.fe-catgrid.fe-grid--compact .fe-catcard__title{ font-size:11px; }

/* Recherche */
#fe-offcanvas .fe-searchform input{
  width:100%; padding:12px 14px; border:1px solid #E5E4DF; border-radius:10px; font:inherit;
}

/* Menu utilitaire */
.fe-menu--util{ display:flex; flex-direction:column; gap:7px; }
.fe-menu--util li a{
  font-family:var(--fe-font); font-weight:300; font-size:14px; color:rgba(60,81,51,.9);
  text-decoration:none; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.06);
}
.fe-menu--util li:last-child a{ border-bottom:none; }

/* Focus (a11y) */
#fe-offcanvas a:focus-visible,
#fe-offcanvas button:focus-visible,
.fe-burger:focus-visible,
.fe-offcanvas__close:focus-visible{
  outline:2px solid #2D402C; outline-offset:2px; border-radius:6px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:1024px){
  .fe-row{ grid-template-columns:auto 1fr auto; column-gap:16px; height:var(--fe-h); padding:0 var(--fe-pad-x); }
  .fe-left{ position:relative; z-index:4001; justify-content:flex-start; gap:8px; }
  .fe-left .fe-menu{ display:none!important; }
  .fe-burger{ display:inline-flex!important; }
  .fe-left .fe-icon{ position:relative; z-index:2; }
  .fe-center .fe-logo img{ height:28px; }
  .fe-right .fe-menu{ display:none!important; } /* mobile-only */
  .fe-right .fe-burger{ display:none!important; }
  header .fe-right [class*="hamburger"],
  header .fe-right [class*="menu-toggle"],
  header .fe-right [class*="nav-toggle"]{ display:none!important; }
}
@media (max-width:640px){
  .fe-center .fe-logo img{ height:24px; }
  .fe-topbar{ font-size:12.5px; }
  #fe-offcanvas .fe-menu>li>a{ font-size:17px; }
  .fe-catcard__title{ font-size:11.5px; }
}
@media (min-width:1025px){
  .fe-left .fe-menu, .fe-right .fe-menu{ display:flex!important; } /* desktop visible */
  .fe-burger{ display:none!important; }
  .fe-offcanvas{ display:none!important; pointer-events:none!important; }
}

/* Sécurité thème parent */
.mobile-header,
.site-header .menu-toggle,
.site-header [class*="hamburger"],
.site-header [class*="menu-toggle"],
.site-header [class*="nav-toggle"]{ display:none!important; }
.site-content .custom-logo{ display:none!important; }

/* (ancien élémentor banner – on garde masqué par défaut) */
.home .site-content .elementor-section:first-of-type .elementor-widget-image:first-of-type img{ display:none!important; }

/* Motion respectueuse */
@media (prefers-reduced-motion: reduce){
  .fe-offcanvas__overlay,
  .fe-offcanvas__panel,
  .fe-catcard__img,
  #fe-offcanvas .fe-menu>li>a,
  #fe-offcanvas .fe-menu>li>a::after{ transition:none!important; }
}

/* =========================
   MEGA MENU (panneau injecté: #fe-mega-shop)
   ========================= */

/* Fix: panneau fixé sous le header (scroll-agnostic), CSS-only via variables */
#fe-mega-shop{
  position:fixed;
  left:0; right:0;
  top:var(--fe-mega-top);
  z-index:10500;
  display:none;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.06);
  padding:22px 24px;
}
#fe-mega-shop.is-open,
html.fe-mega-open #fe-mega-shop{ display:block; }

#fe-mega-shop .fe-mega__inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:280px 1fr; gap:28px;
}
.fe-mega__title{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8a8a8a; margin:6px 0 12px;
}
.fe-menu--mega{ display:flex; flex-direction:column; gap:8px; }
.fe-menu--mega>li>a{
  font-size:18px; line-height:1.25; font-weight:300; color:var(--fe-green);
  padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06); text-decoration:none;
}
.fe-menu--mega>li:last-child>a{ border-bottom:none; }

@media (min-width:1025px) and (max-width:1279px){
  #fe-mega-shop .fe-mega__catwrap{
    max-height:62vh; overflow-y:auto; overflow-x:hidden; padding-right:8px; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:#c7c7c7 #f1f1f1;
  }
  #fe-mega-shop .fe-mega__catwrap::-webkit-scrollbar{width:10px;}
  #fe-mega-shop .fe-mega__catwrap::-webkit-scrollbar-track{background:#f1f1f1;border-left:1px solid rgba(0,0,0,.06);}
  #fe-mega-shop .fe-mega__catwrap::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:8px;border:2px solid #f1f1f1;}
}
@media (min-width:1280px){
  #fe-mega-shop .fe-mega__catwrap{ overflow:visible; max-height:none; padding-right:0; }
}

@media (max-width:1024px){
  #fe-mega-shop{ display:none!important; } /* mobile: on utilise l’off-canvas */
}

/* (Ancien style de .fe-megamenu conservé à titre documentaire)
@media (min-width:1025px){
  .fe-megamenu{ position:absolute; top:100%; left:0; width:100vw; background:#f9f8f4; padding:40px 80px;
    border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 6px 20px rgba(0,0,0,0.08); z-index:9999; opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease; }
  .fe-megamenu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
}
*/

/* Bannière native du thème : OFF si jamais réinjectée */
.banner-section, .site-banner{ display:none!important; }

/* ==============================
   HERO — Flamingo-like (CSS only, CLEAN)
   ============================== */

/* 0) éviter que des wrappers clippent la largeur 100vw */
#page, .site, .site-content, .content-area, .container, .wrapper, .entry-content, .hentry{
  overflow:visible!important;
}

/* 1) l’ancre qui enveloppe la carte doit être block */
#fe-hero > a{ display:block!important; }

/* 2) Conteneur full-bleed quasi bord à bord (aligné viewport) */
#fe-hero{
  --g: clamp(6px, 1vw, 14px);
  inline-size: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: var(--g) !important;

  --fe-hero-h: var(--fe-hero-h, 92vh);
  --fe-hero-radius: var(--fe-hero-radius, 27px);
  --fe-hero-overlay: var(--fe-hero-overlay, .35);
}

/* 3) Carte (image) */
#fe-hero .wrap{
  max-inline-size: none !important;
  width: calc(100vw - (var(--g) * 2)) !important;

  height: var(--fe-hero-h, 92vh) !important;
  min-height: var(--fe-hero-h, 92vh) !important;

  position:relative; overflow:hidden; isolation:isolate; background:#000;
  border-radius: var(--fe-hero-radius, 27px) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.10) !important;
  outline: 1px solid rgba(0,0,0,.06) !important;
}

/* 4) Media */
#fe-hero .media, #fe-hero .media img{ position:absolute; inset:0; width:100%; height:100%; }
#fe-hero .media img{ object-fit:cover; object-position:center; display:block; transform:translateZ(0); }

/* swap mobile/desktop */
.fe-desk{ display:none; } .fe-mob{ display:block; }
@media (min-width:768px){ .fe-desk{ display:block; } .fe-mob{ display:none; } }

/* 5) Overlay bas (lisibilité) */
#fe-hero .shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top,
    rgba(0,0,0, var(--fe-hero-overlay, .35)) 0%,
    rgba(0,0,0, 0) 46%);
}

/* 6) Texte centré bas */
#fe-hero .inner{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(18px,6vh,68px); z-index:2;
  width:min(92vw,1100px); display:grid; justify-items:center; text-align:center; gap:12px; color:#fff; padding-inline:8px;
}
#fe-hero h1{
  margin:0; line-height:1.05; letter-spacing:-.01em; font-weight:700;
  font-size:clamp(28px,5vw,56px); text-shadow:0 2px 18px rgba(0,0,0,.45);
}
#fe-hero p{
  margin:0; font-size:clamp(14px,2.1vw,18px); opacity:.92; text-shadow:0 2px 14px rgba(0,0,0,.4);
}
#fe-hero .btn{
  display:inline-block; padding:12px 20px; border-radius:999px; background:#fff; color:#111;
  text-decoration:none; font-weight:700; line-height:1; border:1px solid rgba(255,255,255,.6);
}
#fe-hero .btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* 7) Mobile : un peu moins haut */
@media (max-width:767.98px){
  #fe-hero .wrap{
    height: min(70vh, var(--fe-hero-h, 92vh)) !important;
    min-height: min(70vh, var(--fe-hero-h, 92vh)) !important;
  }
}

/* === FONTS FEYI — chargement local depuis /wp-content/fonts === */

@font-face{
  font-family: "Coconat";
  src: url("/wp-content/fonts/Coconat-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Coconat";
  src: url("/wp-content/fonts/Coconat-Demi.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Optionnel
@font-face{
  font-family: "Coconat";
  src: url("/wp-content/fonts/Coconat-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/
@font-face{
  font-family: "Ortica Linear";
  src: url("/wp-content/fonts/OrticaLinear-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Ortica Linear";
  src: url("/wp-content/fonts/OrticaLinear-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* === HERO : mapping typographique === */
#fe-hero .inner h1{
  font-family: "Coconat", serif !important;
  font-weight: 600 !important;
  line-height: 1.06;
  letter-spacing: .005em;
  font-size: clamp(32px, 4.8vw, 56px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
#fe-hero .inner p{
  font-family: "Ortica Linear", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  font-size: clamp(14px, 1.5vw, 18px);
  opacity: .95;
}
#fe-hero .inner .btn{
  font-family: "Ortica Linear", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}


/* =========================
   FE — Strip produits "Réserves" (Flamingo-like)
   ========================= */
.fe-strip{
  padding: clamp(16px, 3vw, 28px) var(--fe-pad-x);
  background: var(--fe-cream);
}
.fe-strip__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin: 8px 0 18px;
}
.fe-strip__title{
  font-family:"Coconat", serif;
  font-weight:600;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing:.04em;
  color: var(--fe-green);
  margin:0;
}
.fe-strip__cta{
  font-family:"Ortica Linear", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size: 13px;
  text-decoration:none;
  color: var(--fe-green);
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
}
.fe-strip__cta:hover{ background:rgba(0,0,0,.03); }

/* Rail horizontal (sans lib) */
.fe-strip__track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.fe-strip__track:focus{ outline: none; }

/* Carte produit */
.fe-card{
  scroll-snap-align: start;
  background: #f7f6f2;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  padding: clamp(12px, 1.8vw, 18px);
  display:flex; flex-direction:column; gap:12px;
}
.fe-card__img{
  display:block;
  width:100%; aspect-ratio: 1/1;
  background:#fff; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
}
.fe-card__img img{
  max-width: 80%; height:auto; display:block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.08));
}

.fe-card__body{ display:grid; gap:8px; }
.fe-card__title{
  font-family:"Ortica Linear", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size: 15px; font-weight:400; line-height:1.35; margin:0;
  color: var(--fe-green);
}
.fe-card__title a{ color:inherit; text-decoration:none; }
.fe-card__title a:hover{ text-decoration:underline; text-underline-offset:2px; }

.fe-card__rating{ opacity:.85; }
.fe-card__price{
  font-family:"Ortica Linear", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; color:#333;
}

.fe-card__form{ margin-top:4px; }
.fe-btn{
  display:inline-block; padding:10px 14px; line-height:1; border-radius:999px;
  border:1px solid rgba(0,0,0,.25); background:#fff; color:#111; cursor:pointer;
  font-family:"Ortica Linear", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:13px;
}
.fe-btn:hover{ background:#f0f0ec; }

/* Responsif : sur desktop large, cartes plus larges */
@media (min-width:1024px){
  .fe-strip__track{ grid-auto-columns: minmax(300px, 360px); }
}


/* ====== FE — Titre de section façon Flamingo (pilule centrée) ====== */
.fe-products-row{ 
  padding: 36px clamp(16px,4vw,42px) 10px;
}

.fe-products-row__head{
  display:flex; justify-content:center; align-items:center;
  margin: 8px 0 22px;
}

.fe-products-row__title{
  display:inline-block;
  font-family: var(--fe-font);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6f7266;
  font-weight: 400;
  line-height: 1;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

/* option: fin filet sous le carrousel/grid, discret */
.fe-products-row__foot{
  max-width: 1280px; margin: 18px auto 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 50%, transparent 100%);
  border-radius: 2px;
}

/* bouton "Voir toutes les Réserves" compact */
.fe-products-row__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--fe-font); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 14px; border:1px solid rgba(0,0,0,.10); border-radius:999px; text-decoration:none; color:var(--fe-green);
}
.fe-products-row__cta:hover{ color:var(--fe-green-dark); }



/* ======= CTA overlay sur l'image, façon Flamingo ======= */
.fe-card__media{ position:relative; }
.fe-card__imgWrap{ aspect-ratio:4/5; display:grid; place-items:center; background:#f5f5f5; overflow:hidden; }
.fe-card__ctaWrap{
  position:absolute; left:16px; right:16px; bottom:12px;
  display:flex; justify-content:center; pointer-events:none; /* évite clics hors bouton */
}
.fe-card .fe-btn--overlay{
  pointer-events:auto;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  max-width:calc(100% - 0px);
  height:42px; padding:0 18px; border-radius:999px;
  border:1px solid rgba(0,0,0,.18); background:#fff;
  font-weight:700; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fe-card .fe-btn--overlay:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.14); border-color:rgba(0,0,0,.22); }
.fe-card .fe-btn--overlay[disabled]{ opacity:.6; cursor:not-allowed; }

/* Pastille prix à droite du CTA */
.fe-card .fe-btn--overlay::after{
  content: attr(data-price);
  margin-left:auto; /* pousse la pastille à droite */
  display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; height:30px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  margin-right:4px;
  font-weight:700; line-height:1;
  background:#fff;
}

/* On masque l'ancien bouton sous carte (si existait encore) */
.fe-card__form:not(.fe-card__form){ display:none; }


/* === FE – Cartes produit : overlay façon Flamingo (collé en bas de l'image) === */

/* Base image */
.fe-card__media { position: relative; overflow: hidden; }
.fe-card__imgWrap { position: relative; }

/* Dégradé bas pour lisibilité du bouton */
.fe-card__media::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:38%;
  pointer-events:none;
  background:linear-gradient( to top, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 65% );
  z-index:2;
}

/* Barre d'actions au bas de la photo */
.fe-card__ctaWrap{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; justify-content:center; z-index:3;
}

/* Bouton style “pilule blanche”, toujours visible (pas besoin de survol) */
.fe-btn--overlay{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 62%;             /* largeur confortable façon Flamingo */
  height: 42px;
  padding: 0 18px;            /* laisser de la place à droite pour la puce prix */
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.06);
  font-weight: 700;
  line-height: 1;
  transition: box-shadow .2s ease, transform .2s ease;
}

.fe-btn--overlay:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.14); }

/* Puce prix à droite du bouton (utilise data-price) */
.fe-btn--overlay::after{
  content: attr(data-price);
  position:absolute; right:6px; /* à l’intérieur du bouton */
  display:inline-flex; align-items:center; justify-content:center;
  min-width:54px; height:28px; padding:0 10px;
  border-radius:999px; border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-weight:700; line-height:1;
  transform: translateX(100%);  /* décale en dehors du texte */
  margin-left:10px;
}
@media (max-width:680px){
  .fe-btn--overlay{ min-width:72%; }
}

/* Badges “Livré le … / Local only” – gauche & droite en même ligne */
.fe-badges{
  position:absolute; left:12px; right:12px; top:12px;
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; z-index:3;
}
.fe-badge{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  font-size:12px; line-height:1; white-space:nowrap;
}

/* Optionnel: on masque le prix statique de la carte (on le garde pour SEO) */
.fe-card__price{ display:none !important; }


<?php
/* ================================================
 * File: functions.php  (PHP — sans CSS)
 * Shortcode mobile/tablette = 1 bouton "Filters"
 * Utilisation: remplace [feyi_filters_bar] par [feyi_filters_bar_fe]
 * ================================================ */

add_shortcode('feyi_filters_bar_fe', function($atts){
  // Récupère l’HTML actuel de ta barre (garde ta logique existante)
  $inner = do_shortcode('[feyi_filters_bar]');

  // Retourne un wrapper accessible sans JS
  return '
  <section id="fe-layout">
    <div class="fe3-filters fe3-filters--fe">
      <details class="fe3-disclosure">
        <summary class="fe3-summary">Filters</summary>
        <div class="fe3-panel">'.$inner.'</div>
      </details>
    </div>
  </section>';
});