/* ==========================================================================
   Bio Meriem — habillage de la vitrine et de l'espace pro.
   Chargé APRÈS app2.css et theme-biomeriem-couleurs.css, par les gabarits
   public.php et pro.php SEULEMENT : l'administration (admin.php, blank.php,
   print.php) ne le charge pas et garde exactement l'apparence de Bio Amine.

   Charte tirée du logo : « Bio » vert profond, « Meriem » orange miel,
   feuilles vert franc, fonds crème lumineux comme sur les affiches.
   ========================================================================== */
:root{
    --bm-vert-profond:#0F4D1C;
    --bm-vert:#2F7A1E;
    --bm-vert-clair:#6FA52B;
    --bm-orange:#D9780A;
    --bm-orange-vif:#E8900F;
    --bm-miel:#F2A91E;
    --bm-creme:#FFF8EC;
    --bm-script:"Courgette","Libre Caslon Text",Georgia,serif;
    --m-page:#FFF9EF;
    --m-head:#FFF6E3;
    --m-card:#FFFDF7;
    --m-line:#F1E2C2;
}

/* ---- Barre d'annonce : vert profond du logo, filet miel ---- */
.topbar{background:linear-gradient(90deg,#0F4D1C,#1F6A22 50%,#0F4D1C);border-bottom:2px solid #E9A53A}
.topbar__leaf{color:#F2C46B}

/* ---- En-tête ---- */
.mainnav a.active{color:var(--bm-vert-profond);font-weight:700}
.mainnav a.active::after{background:var(--bm-orange);height:3px;border-radius:2px}
.mainnav a:hover,.iconbtn:hover{color:var(--bm-orange)}
.cart-count{background:var(--bm-orange)}

/* ---- Boutons ---- */
.btn-bio--primary{background:linear-gradient(180deg,#358A22,#2A7019);box-shadow:0 6px 16px rgba(20,77,28,.18)}
.btn-bio--primary:hover{background:linear-gradient(180deg,#2E7D1F,#1F5F17)}
.btn-bio--ghost{border-color:#E0A04A;color:#B8620A}
.btn-bio--ghost:hover{background:#FFF1DA;color:#9A5208;border-color:var(--bm-orange)}

/* ---- Titres des sliders : écriture du logo, « Bio » vert profond puis « Meriem » orange ---- */
.mhero__title,.mslide__title{
    font-family:var(--bm-script);font-weight:400;letter-spacing:0;
    background-image:
        linear-gradient(104deg,transparent 33%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.9) 50%,
            rgba(255,255,255,.55) 55%,transparent 67%),
        linear-gradient(96deg,#0F4D1C 0%,#1F6A22 27%,#C96D08 36%,#E8900F 64%,#C0660A 100%);
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 3px 6px rgba(90,64,8,.18));
}
/* le dégradé suit la largeur du texte : « Bio » vert, « Meriem » orange */
.mhero__title,.mslide__title{display:inline-block;max-width:100%}
.mhero__title{white-space:nowrap;line-height:1.1;padding-inline-end:.08em}
@media(min-width:1181px){.mhero__title{font-size:5.1em}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .mhero__title,.mslide__title{color:var(--bm-vert-profond);-webkit-text-fill-color:var(--bm-vert-profond)}
}
.mhero__tagline{font-family:var(--bm-script);color:#5A3A08;font-size:1.45em}
.mhero__dot{color:var(--bm-orange)}
.mhero{background:url("../img/home/pattern-honeycomb.png") repeat,linear-gradient(90deg,#FFF3D6,#FFF7E6 50%,#FDEBC4);background-size:35px auto,auto}
.mhero__stage{background:#FFF4DC}

/* ---- Titres de section ---- */
.section__title{color:var(--bm-vert-profond)}

/* ---- Cartes catégories : visuels Bio Meriem, cadre crème et liseré miel au survol ---- */
.cat-card{border-color:#F0DDB5}
.cat-card:hover{border-color:#E9A53A;box-shadow:0 14px 30px rgba(120,80,10,.14)}
.cat-card__img img{object-fit:cover}
.cat-card:hover .cat-card__link{color:var(--bm-orange)}

/* ---- Prix : orange « Meriem » ---- */
.price{color:var(--bm-orange)}

/* ---- Pied de page (maquette Bio Meriem) : fond crème, filet doré, rayon de miel fleuri à gauche,
        pot de miel à droite, titres vert profond soulignés d'or, réseaux en pastilles cerclées d'or ---- */
.footer{background:#FFF9EC;color:#4A4636;padding:46px 0 0;margin-top:40px}
.footer::after{content:"";position:absolute;inset:0 0 auto;height:3px;z-index:3;
    background:linear-gradient(90deg,#E6B04A,#D59A26 50%,#E6B04A)}
.footer::before{opacity:.16;background-size:64px auto;
    -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5) 9%,transparent 18%,transparent 82%,rgba(0,0,0,.5) 91%,#000);
            mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5) 9%,transparent 18%,transparent 82%,rgba(0,0,0,.5) 91%,#000)}
.footer .container{max-width:1120px}
.footer__bee{display:none}
.footer__deco{opacity:1;filter:none}
.footer__deco--comb{inset-inline-start:-28px;top:44%;width:clamp(130px,11vw,175px);opacity:1;
    transform:translateY(-50%);filter:drop-shadow(0 10px 16px rgba(120,80,10,.16))}
.footer__deco--jarset{position:absolute;inset-inline-end:-6px;bottom:-4px;width:clamp(160px,13vw,210px);
    aspect-ratio:1/1;z-index:1;pointer-events:none}
.footer__jar-flowers{position:absolute;inset-inline-start:-30%;bottom:-3%;width:66%;z-index:2;
    filter:drop-shadow(0 6px 10px rgba(90,70,20,.12))}
html[dir="rtl"] .footer__jar-flowers{transform:scaleX(-1)}
.footer__jar{position:absolute;inset-inline-end:0;bottom:0;width:100%;filter:drop-shadow(0 12px 18px rgba(120,80,10,.2))}
html[dir="rtl"] .footer__jar{transform:scaleX(-1)}
.footer__logo-chip img{height:108px}
@media(min-width:992px){                      /* 4 colonnes équilibrées comme la maquette */
    .footer .row>.col-lg-4{flex:0 0 27%;max-width:27%}
    .footer .row>.col-lg-2{flex:0 0 21%;max-width:21%;padding-inline-start:12px}
    .footer .row>.col-lg-3:nth-child(3){flex:0 0 23%;max-width:23%}
    .footer .row>.col-lg-3:nth-child(4){flex:0 0 29%;max-width:29%}
}
.footer__about{font-size:.95rem;line-height:1.5;color:#4A4636;opacity:1;max-width:30ch;margin:12px 0 0}
.footer__social{gap:.8rem;margin-top:16px}
.footer__social a{width:42px;height:42px;background:#FFFDF7;border:1.5px solid #E7CD8F;color:#1E2A1A;font-size:1.1rem;
    box-shadow:0 2px 8px rgba(160,120,40,.08)}
.footer__social a:hover{background:var(--bm-vert-profond);border-color:var(--bm-vert-profond);color:#fff}
.footer__title{font-family:var(--title);font-weight:700;font-size:1.28rem;line-height:1.2;color:var(--bm-vert-profond);
    position:relative;padding-bottom:10px;margin:2px 0 16px}
.footer__title::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:46px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,#D59A26,#F2C874)}
.footer__links{gap:.55rem;font-size:.95rem}
.footer__links a{color:#4A4636;opacity:1}
.footer__links a:hover{color:var(--bm-vert-profond);text-decoration:none}
.footer__contact{gap:.7rem;font-size:.95rem}
.footer__contact li{align-items:flex-start;gap:.7rem;color:#4A4636;opacity:1}
.footer__contact a{color:inherit}
.footer__contact a:hover{color:var(--bm-vert-profond)}
.footer__contact .bi{color:#1F5A28;font-size:1.2rem;line-height:1.15;flex:none;width:1.4rem;text-align:center}
.footer__bottom{margin-top:32px;border-top:1px solid #ECDDB3;padding:15px 0 17px;color:#4A4636;opacity:1;font-size:.88rem}
@media(max-width:1199px){
    .footer__deco--comb{width:125px;opacity:.55}
    .footer__deco--jarset{width:150px;opacity:.6}
}
@media(max-width:991px){
    .footer{padding-top:38px}
    .footer__deco--comb{top:auto;bottom:80px;transform:none;width:100px;opacity:.35}
    .footer__deco--jarset{width:120px;opacity:.35}
    .footer__logo-chip img{height:92px}
    .footer__title{font-size:1.18rem;margin-bottom:12px}
}
@media(max-width:600px){                      /* les liens ont déjà une zone tactile agrandie (app2.css) */
    .footer__links{gap:.15rem}
    .footer__contact{gap:.8rem}
}

/* ---- Affiches Bio Meriem : toutes les cartes à la même taille. Le cadre de l'image a un rapport
        FIXE, celui des visuels (720 x 1000, cf. _outils-visuels/affiches.py) : sans min-height:0,
        une boîte aspect-ratio s'allonge à la hauteur naturelle de l'image et chaque carte prenait
        celle de son affiche. Une affiche d'un autre format déposée en admin reste entière (contain)
        sur le fond crème. Légende en haut, bouton en bas, alignés d'une carte à l'autre. ---- */
.poster-card__media{aspect-ratio:18/25;min-height:0;overflow:hidden;background:#FFF6E4}
.poster-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.poster-card__body{margin-top:0;flex:1 1 auto}
.poster-card__body>.btn-bio{margin-top:auto}

/* ---- Arabe : Cairo reste la police des titres (Courgette n'a pas de glyphes arabes) ---- */
html[dir="rtl"] .mhero__title,html[dir="rtl"] .mslide__title,html[dir="rtl"] .mhero__tagline{font-family:"Cairo","Tajawal",system-ui,sans-serif}

/* ---- À propos : photo de la boutique ---- */
.about-media--photo{padding:0;overflow:hidden;background:#FFF4DC}
.about-media--photo img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none;display:block;aspect-ratio:3/2}