/* Fedifruits Bien-être — compléments à style.css pour la page boutique.
   Même charte que le site ; le bordeaux du logo signe la rubrique. */
.page-be{--rose:#FBEFF0;--rose-2:#F4DCE0;--bordeaux-fonce:#4E1220;--sable:#F5F1EC}

/* ── En-tête de rubrique ── */
.be-hero{background:linear-gradient(180deg,var(--rose) 0%,var(--fond) 100%);padding:64px 0 46px;overflow:hidden}
.be-hero-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.be-rubrique{color:var(--bordeaux);font-weight:700;font-size:15.5px;display:inline-flex;align-items:center;gap:10px}
.be-rubrique::before{content:"";width:28px;height:2px;background:var(--bordeaux);border-radius:2px}
.be-hero h1{font-size:clamp(2.3rem,5vw,3.9rem);max-width:12.5em;margin-top:14px;color:var(--bordeaux-fonce);letter-spacing:-.025em}
.be-hero .sous{margin-top:18px;font-size:1.12rem;max-width:40ch;color:var(--doux)}
.be-rayons{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.be-rayons button{font:inherit;font-weight:600;font-size:15px;cursor:pointer;padding:10px 18px;border-radius:999px;border:1px solid var(--rose-2);background:#fff;color:var(--bordeaux-fonce);transition:background .2s ease,color .2s ease,border-color .2s ease}
.be-rayons button:hover{border-color:var(--bordeaux)}
.be-rayons button[aria-pressed=true]{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}

/* Produit à la une : la seule mise en scène de la page */
.be-une{position:relative;background:#fff;border-radius:28px;padding:22px 22px 24px;box-shadow:0 30px 60px rgba(78,18,32,.12);border:1px solid var(--rose-2)}
.be-une .be-une-photo{position:relative;aspect-ratio:1/1;border-radius:20px;background:var(--sable);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;border:0;width:100%;padding:0}
.be-une .be-une-photo img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.be-une .be-etiquettes{left:34px;top:34px}
.be-une-corps{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:16px}
.be-une-corps h2{font-size:1.35rem;line-height:1.2;color:var(--encre)}
.be-une-corps p{color:var(--doux);font-size:14.6px;margin-top:2px}
.be-une-corps .be-prix{font-size:1.35rem;margin-top:6px;display:block}

/* ── Catalogue ── */
.be-tete-cat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.be-tete-cat h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--bordeaux-fonce)}
.be-compte{color:var(--doux);font-size:15px}
.be-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.be-produit{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:20px;overflow:hidden;transition:border-color .2s ease,box-shadow .25s ease}
.be-produit:hover{border-color:var(--rose-2);box-shadow:0 16px 34px rgba(78,18,32,.09)}
.be-photo{position:relative;display:block;width:100%;aspect-ratio:1/1;background:var(--sable);border:0;padding:0;cursor:pointer}
.be-photo img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transition:transform .5s ease}
.be-produit:hover .be-photo img{transform:scale(1.04)}
.be-photo .be-sans-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Outfit",sans-serif;font-size:2.6rem;color:var(--rose-2)}
.be-etiquettes{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.be-etiquette{white-space:nowrap;font-size:12.6px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fff;color:var(--bordeaux-fonce);border:1px solid var(--rose-2)}
.be-etiquette.promo{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)}
.be-etiquette.peu{background:#FFF4D6;color:#6B4A00;border-color:#F3DC9C}
.be-etiquette.epuise{background:#EEE;color:#555;border-color:#DDD}
.be-corps{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.be-marque{font-size:13.4px;color:var(--doux);font-weight:600}
.be-corps h3{font-size:1.08rem;line-height:1.3;margin-top:2px}
.be-corps h3 button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer;line-height:inherit}
.be-corps h3 button:hover{color:var(--bordeaux)}
.be-format{font-size:14px;color:var(--doux);margin-top:2px}
.be-pied{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.be-prix{font-family:"Outfit",sans-serif;font-weight:600;font-size:1.15rem;color:var(--vert-fonce);font-variant-numeric:tabular-nums;white-space:nowrap}
.be-prix s{font-family:"Figtree",sans-serif;font-size:13.6px;font-weight:500;color:var(--doux);margin-left:6px}
.be-ajouter{font:inherit;font-weight:700;font-size:14.6px;cursor:pointer;padding:9px 16px;border-radius:999px;border:2px solid var(--vert);background:#fff;color:var(--vert);transition:background .2s ease,color .2s ease;white-space:nowrap}
.be-ajouter:hover{background:var(--vert);color:#fff}
.be-ajouter[disabled]{border-color:var(--trait);color:var(--doux);background:#fff;cursor:not-allowed}
.be-produit.epuise .be-photo img{opacity:.55;filter:grayscale(.5)}
.be-qte{display:flex;align-items:center;gap:4px}
.be-qte button{width:34px;height:34px;border-radius:50%;border:1px solid var(--trait);background:#fff;color:var(--vert);font-size:19px;line-height:1;cursor:pointer}
.be-qte button:hover{background:var(--vert);color:#fff;border-color:var(--vert)}
.be-qte output{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
/* Attente du catalogue */
.be-attente{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.be-attente span{aspect-ratio:3/4;border-radius:20px;background:linear-gradient(90deg,var(--sable) 0%,#fff 50%,var(--sable) 100%);background-size:200% 100%;animation:be-lueur 1.4s linear infinite}
@keyframes be-lueur{to{background-position:-200% 0}}
.be-vide{text-align:center;padding:50px 20px;background:#fff;border:1px dashed var(--rose-2);border-radius:22px}
.be-vide h3{font-size:1.5rem;color:var(--bordeaux-fonce)}.be-vide p{color:var(--doux);margin:8px auto 20px;max-width:46ch}

/* ── Étapes et liens ── */
.be-etapes-section{padding:72px 0}
.be-etapes{list-style:none;counter-reset:etape;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.be-etapes li{counter-increment:etape;background:#fff;border-radius:20px;padding:24px 24px 26px;border:1px solid var(--trait)}
.be-etapes li::before{content:counter(etape);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--vert);color:#fff;font-family:"Outfit",sans-serif;font-weight:600;margin-bottom:14px}
.be-etapes h3{font-size:1.2rem;color:var(--vert-fonce)}.be-etapes p{color:var(--doux);margin-top:6px;font-size:15.6px}
.be-paiement{margin-top:22px;color:var(--doux)}
.be-lien-fedi{padding:70px 0}
.be-lien-grille{display:grid;grid-template-columns:1.3fr 1fr;gap:30px 60px;align-items:end}
.be-lien-grille p{color:var(--doux);margin-top:14px;max-width:52ch}
.be-lien-grille .actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.be-precautions{padding-top:0;padding-bottom:30px}
.be-precautions p{max-width:80ch;font-size:14.6px;color:var(--doux);border-left:3px solid var(--rose-2);padding-left:16px}

/* ── Fenêtres ── */
.be-fenetre{border:0;padding:0;background:#fff;color:var(--encre);max-height:calc(100dvh - 32px)}
.be-fenetre::backdrop{background:rgba(29,38,34,.45);backdrop-filter:blur(2px)}
.be-fermer{position:absolute;right:14px;top:12px;width:42px;height:42px;border-radius:50%;border:1px solid var(--trait);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--encre);z-index:2}
.be-fermer:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.be-fiche{width:min(900px,calc(100vw - 32px));border-radius:26px;margin:auto}
.be-fiche-grille{display:grid;grid-template-columns:1fr 1fr}
.be-fiche-photo{background:var(--sable);display:flex;align-items:center;justify-content:center;min-height:320px}
.be-fiche-photo img{width:100%;height:100%;max-height:520px;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.be-fiche-texte{padding:38px 34px 32px;overflow:auto}
.be-fiche-texte h2{font-size:1.7rem;line-height:1.2;margin-top:4px;padding-right:30px}
.be-prix-grand{font-family:"Outfit",sans-serif;font-weight:600;font-size:1.7rem;color:var(--vert-fonce);margin-top:14px}
.be-prix-grand s{font-family:"Figtree",sans-serif;font-size:1rem;color:var(--doux);font-weight:500;margin-left:8px}
.be-fiche-actions{margin:16px 0 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.be-fiche-texte h3{font-size:1.02rem;margin-top:20px;color:var(--bordeaux-fonce)}
.be-fiche-texte p.txt{color:#36413B;font-size:15.6px;margin-top:6px;white-space:pre-line}
.be-panier{width:min(520px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;border-radius:26px 0 0 26px;padding:30px 28px 34px;overflow:auto}
.be-panier[open]{animation:be-tiroir .3s cubic-bezier(.2,.7,.2,1)}
@keyframes be-tiroir{from{transform:translateX(40px);opacity:.4}}
.be-panier h2{font-size:1.6rem;padding-right:50px}
.be-lignes{list-style:none;margin-top:18px}
.be-lignes li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--trait)}
.be-lignes img,.be-lignes .vignette{width:56px;height:56px;border-radius:12px;object-fit:contain;background:var(--sable);padding:4px;mix-blend-mode:multiply}
.be-lignes b{display:block;font-size:15.4px;line-height:1.3}
.be-lignes small{color:var(--doux);font-size:13.6px}
.be-lignes .droite{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.be-lignes .montant{font-weight:700;font-variant-numeric:tabular-nums}
.be-panier-vide{color:var(--doux);margin:20px 0}
.be-totaux{margin:16px 0 4px}
.be-totaux div{display:flex;justify-content:space-between;padding:4px 0;color:var(--doux)}
.be-totaux .fort{color:var(--encre);font-family:"Outfit",sans-serif;font-size:1.3rem;font-weight:600;border-top:2px solid var(--mangue);margin-top:6px;padding-top:10px}
.be-totaux small{display:block;font-size:13.4px;color:var(--vert);text-align:right}
.be-choix{border:0;margin:18px 0 20px;display:grid;gap:8px}
.be-choix legend{font-weight:700;font-size:14.6px;margin-bottom:8px}
.be-choix label{display:flex;align-items:center;gap:10px;border:1px solid var(--trait);border-radius:14px;padding:12px 14px;cursor:pointer}
.be-choix label:has(input:checked){border-color:var(--vert);background:var(--menthe)}
.be-choix input{width:18px;height:18px;accent-color:var(--vert)}
.be-form .champs{grid-template-columns:1fr 1fr;gap:14px 16px}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.be-form .envoi{margin-top:20px}
/* Remerciement */
[data-etape="merci"]{padding-top:20px}
.be-coche{width:64px;height:64px;border-radius:50%;background:var(--menthe-2);position:relative;margin-bottom:18px}
.be-coche::after{content:"";position:absolute;left:21px;top:17px;width:22px;height:12px;border-left:4px solid var(--vert);border-bottom:4px solid var(--vert);transform:rotate(-45deg)}
.be-merci-ref{font-family:"Outfit",sans-serif;font-size:1.15rem;margin:8px 0 12px;color:var(--bordeaux-fonce)}
[data-etape="merci"] p{color:var(--doux)}
.be-merci-actions{display:flex;flex-direction:column;gap:10px;margin:22px 0 14px}
.be-merci-actions .btn{justify-content:center}
.be-merci-note{font-size:14.2px;margin-bottom:22px}
/* Barre du panier */
.be-barre{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:44;display:flex;align-items:center;gap:16px;background:var(--bordeaux-fonce);color:#fff;border-radius:999px;padding:8px 8px 8px 22px;box-shadow:0 16px 36px rgba(78,18,32,.3);font-size:15px;white-space:nowrap}
.be-barre .btn{padding:10px 18px;font-size:15px}
.btn-panier b{background:#fff;color:var(--vert-fonce);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:0 6px}
.be-pulse{animation:be-pulse .5s ease}
@keyframes be-pulse{50%{transform:scale(1.12)}}

@media (prefers-reduced-motion:no-preference){
  html.js .be-hero .entre{opacity:0;transform:translateY(18px);animation:be-entre .8s cubic-bezier(.2,.7,.2,1) forwards}
  html.js .be-hero .d1{animation-delay:.1s}html.js .be-hero .d2{animation-delay:.22s}html.js .be-hero .d3{animation-delay:.34s}
}
@keyframes be-entre{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.be-attente span{animation:none}.be-panier[open]{animation:none}}

@media(max-width:1100px){.be-grille,.be-attente{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .be-hero{padding:40px 0 30px}
  .be-hero-grille{grid-template-columns:1fr;gap:30px}
  .be-une{max-width:440px}
  .be-grille,.be-attente{grid-template-columns:repeat(2,1fr);gap:14px}
  .be-etapes{grid-template-columns:1fr}
  .be-lien-grille{grid-template-columns:1fr}
  .be-fiche-grille{grid-template-columns:1fr}
  .be-fiche-photo{min-height:0;aspect-ratio:4/3}
  .be-fiche-texte{padding:24px 22px 26px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .be-corps{padding:12px 12px 14px}
  .be-corps h3{font-size:.98rem}
  .be-pied{flex-direction:column;align-items:stretch;gap:8px}
  .be-ajouter{width:100%}
  .be-qte{justify-content:space-between}
  .be-panier{border-radius:0;padding:24px 18px 30px}
  .be-form .champs{grid-template-columns:1fr}
  .be-barre{left:16px;right:16px;transform:none;justify-content:space-between}
  .avec-barre .wa-flottant{bottom:86px}
  .btn-panier{padding:8px 12px}
}