/* ACCUEIL, BANDEAU MARKETING « au magasin ou chez vous » (15/09/2026, dans la DA Biomonde).
   Remplace « Votre Click & Collect en 3 étapes ». Deux widgets distincts :
   A. le bandeau, sous le haut de page : disposition « carte posée sur la photo », choisie par le gérant le 15/09/2026 parmi
      quatre, parce que l'ancienne (fond brun, texte à gauche, photo à droite) faisait doublon avec le haut de page.
      Fond de la couleur du mur de la photo, photo de VRAIS produits du magasin à droite fondue dans ce fond, carte blanche
      à gauche. La vague du haut de page prend la même couleur (style en ligne du widget) et porte une ombre très discrète ;
   B. l'explication, plus bas (à la place du bloc des chiffres) : illustration au feutre à gauche, les deux modes à droite.
   Charte : brun #422E2D, vert anis #A8C400, vert texte #5c6c00, crème #F9F7F2, Quicksand. Un état ne se lit jamais par la
   seule couleur (icône + mot). Tout est scopé .bio-bdx. */

.bio-bdx, .bio-bdx * { box-sizing: border-box; }
.bio-bdx {
    --bdx-brun: #422E2D;
    --bdx-anis: #A8C400;
    --bdx-vert: #5c6c00;
    --bdx-creme: #F9F7F2;
    --bdx-teinte: #EEF2D2;
    --bdx-gris: #6f6660;
    max-width: 1240px;
    margin: 0 auto;
    font-family: var(--bio-font, 'Quicksand', sans-serif);
    color: var(--bdx-brun);
}
.bio-bdx h2, .bio-bdx h3, .bio-bdx p, .bio-bdx ul { margin: 0; }

/* ── A. Le bandeau ───────────────────────────────────────────────────────── */
/* Pleine largeur (le conteneur Elementor bhc03 est réglé en « pleine largeur », sans marge intérieure), collé sous la
   vague du haut de page. La carte reste alignée sur la colonne de 1 140 px du reste de la page. */
.bio-bdx--bandeau {
    --bdx-mur: #9DA21A;
    container-type: inline-size;
    position: relative;
    display: flex;
    align-items: center;
    max-width: none;
    width: 100%;
    /* Moins haut (demande du gérant, 16/09/2026 soir) : 787 px à 1 920 avant, environ 650 maintenant. C'est la LARGEUR
       de la photo qui suit désormais la hauteur du bandeau (voir .bio-bdx__visuel) : elle n'est plus rognée pour tenir. */
    min-height: clamp(560px, 33vw, 640px);
    /* Chevauche d'un pixel le bas du haut de page : sur écran dense, la jointure des deux conteneurs tombait entre deux
       pixels et laissait passer un liseré crème sous la vague (Pixel 5, audit du 16/09/2026). */
    margin-top: -1px;
    background: var(--bdx-mur);
    overflow: hidden;
}
.bio-bdx__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Largeur tirée de la hauteur au format de la photo (1 600 × 1 063) : produits entiers, bouchons compris. Plafonnée à 62 %
   pour ne jamais passer sous la carte ; au-delà, le rognage tombe à gauche, dans la partie fondue. */
.bio-bdx__visuel { position: absolute; top: 0; right: 0; bottom: 0; width: auto; height: 100%; max-width: 62%; aspect-ratio: 1600 / 1063; background: var(--bdx-mur); }
/* Calée à droite : si la carte rend le bloc plus haut que la photo, le rognage tombe à gauche, dans la partie fondue.
   Fondu à gauche (vers le fond) et très court en haut (3,5 %) : sous la vague on ne voit que la couleur du mur, relevée
   sur le haut de la photo, la même que celle de la vague (demande du gérant). Les bouchons des bouteilles (5,6 %) restent nets. */
.bio-bdx__visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 40%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 3.5%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 3.5%);
    mask-composite: intersect;
}
.bio-bdx__carte {
    position: relative;
    z-index: 3;
    width: min(520px, 42%);
    margin: 40px 0 40px max(24px, calc((100vw - 1140px) / 2));
    margin-left: max(24px, calc((100cqw - 1140px) / 2));
    padding: 28px 32px 20px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(66, 46, 45, .16);
}
/* Le petit dessin au feutre posé sur le coin, comme ceux de l'offre de bienvenue. Sélecteur renforcé : la règle générale
   des dessins (.elementor img.bio-feutre, pleine largeur) l'étirait sur toute la carte (maquette du 16/09/2026). */
.bio-bdx .bio-bdx__carte img.bio-bdx__griffe { position: absolute; top: -20px; right: -16px; width: 48px; height: 48px; transform: rotate(10deg); pointer-events: none; }
/* Étiquette de section : la même que « Le magasin » et « Offre de bienvenue » (capitales espacées, pastille claire). */
.bio-bdx__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bdx-teinte); color: var(--bdx-vert); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bio-bdx h2.bio-bdx__titre {
    margin-top: 12px;
    font-size: clamp(28px, 3.2vw, 36px); /* 36 px dès 1 125 px, 33 px à 1 024 : même échelle que les titres de section (audit 16/09) */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--bdx-brun) !important;
}
/* La fin du titre soulignée d'un coup de feutre anis, légèrement décalé sous les lettres, comme l'aplat des dessins. */
.bio-bdx__souligne { position: relative; z-index: 0; white-space: nowrap; }
.bio-bdx__trait { position: absolute; left: -3%; bottom: -.06em; z-index: -1; width: 106%; height: .5em; fill: var(--bdx-anis); }
.bio-bdx__sous { margin-top: 10px !important; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--bdx-gris); }
.bio-bdx__sous strong { font-weight: 700; color: var(--bdx-brun); }
/* Les tarifs, façon ardoise d'épicerie : icône au feutre, mode et précision, prix aligné à droite, filets pointillés. */
.bio-bdx ul.bio-bdx__tarifs { list-style: none; margin: 16px 0 0; padding: 0; }
.bio-bdx__tarifs li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 7px 2px; border-top: 1.5px dashed rgba(66, 46, 45, .22); }
.bio-bdx__tarifs li:last-child { border-bottom: 1.5px dashed rgba(66, 46, 45, .22); }
.bio-bdx .bio-bdx__tarifs .bio-bdx__tarif-icone { display: block; width: 40px; height: 40px; object-fit: contain; }
.bio-bdx__tarif-nom { display: grid; gap: 1px; min-width: 0; font-size: 15px; line-height: 1.3; }
.bio-bdx__tarif-nom b { font-weight: 700; color: var(--bdx-brun); }
.bio-bdx__tarif-nom span { font-size: 14px; color: var(--bdx-gris); text-wrap: balance; } /* pas de mot seul sur la 2e ligne (téléphone) */
.bio-bdx__prix { font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--bdx-brun); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bio-bdx__prix--gratuit { color: var(--bdx-vert); }
.bio-bdx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 18px; }
/* v2, retiré par la v3 : a.bio-bdx__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--bdx-anis);
    color: var(--bdx-brun);
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(168, 196, 0, .3); /* même ombre que le bouton « Ajouter au panier » du site */
    transition: background-color .15s ease, color .15s ease;
}
a.bio-bdx__btn:hover, a.bio-bdx__btn:focus-visible { background: var(--bdx-brun); color: #fff; } */
/* Les boutons sont ceux du site (widget « Bouton Biomonde », variante du haut de l'accueil : bio-widget-button.css), mêmes
   classes, même dessin (v3, demande du gérant). Ici, seulement leur place : bio-home.css les pousse à gauche
   (margin-right: auto) et en haut de leur ligne, ce qui décalait le lien « Comment ça marche ». */
.bio-bdx .bio-bdx__actions .bio-btn-widget.is-hero { margin-right: 0 !important; align-self: center !important; }
.bio-bdx .bio-bdx__modes .bio-btn-widget.is-hero { justify-self: start; margin-top: 6px; }
/* « dès » en petit devant le prix, sur la carte comme dans l'explication. */
.bio-bdx__prix small, .bio-bdx__mode h3 small { font-size: .74em; font-weight: 600; color: var(--bdx-gris); }
.bio-bdx__tarif-nom b { text-wrap: balance; }
/* « point relais offert dès 60 € d'achat » sous la ligne de livraison (v3.1). */
.bio-bdx__tarif-nom em.bio-bdx__offert { font-style: normal; font-size: 13px; font-weight: 700; color: var(--bdx-vert); text-wrap: balance; }
/* 44 px de haut : le lien se touche au doigt (il ne mesurait que 20 px, relevé par le contrôle du 15/09/2026). */
a.bio-bdx__lien { display: inline-flex; align-items: center; min-height: 44px; color: var(--bdx-brun); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Ombre portée très discrète SOUS la vague du haut de page (demande du gérant) : ombre intérieure sur la forme, par le
   filtre SVG rendu par le widget (#bio-bdx-ombre-vague). La couleur de la vague est posée par le style en ligne du widget. */
.e-con:has(+ .e-con .bio-bdx--bandeau) .elementor-shape-bottom .elementor-shape-fill { filter: url(#bio-bdx-ombre-vague); }

/* Les cartes flottantes « Livraison / Retrait » posées sur la photo ont été retirées à la demande du gérant (15/09/2026) :
   leurs règles, devenues mortes, ont été supprimées à la relecture du 16/09/2026. */

/* ── B. L'explication ────────────────────────────────────────────────────── */
.bio-bdx__explique { margin-top: 64px; }
/* Posée seule plus bas dans la page (à la place du bloc des chiffres) : même colonne et même respiration que ses voisins. */
.bio-bdx--explication { max-width: 1140px; padding-block: 44px 24px; } /* 24 px en bas : l'écart avec la FAQ rejoint celui des autres sections (audit du 16/09/2026) */
.bio-bdx--explication .bio-bdx__explique { margin-top: 0; }
.bio-bdx h2.bio-bdx__titre2 { text-align: center; font-size: clamp(28px, 2.8vw, 36px); /* comme les titres de section du site : 28 px sur tablette, 36 px sur bureau */ font-weight: 700; line-height: 1.15; color: var(--bdx-brun) !important; }
.bio-bdx__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; margin-top: 32px; }
.bio-bdx__illu { border-radius: 24px; overflow: hidden; background: var(--bdx-creme); border: 2px solid #e8e3dc; }
.bio-bdx__illu img { display: block; width: 100%; height: auto; }
.bio-bdx__modes { display: grid; gap: 22px; }
.bio-bdx__mode { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
/* Icônes au feutre dans des tuiles claires, comme la fiche du magasin (v3). Sélecteur renforcé : la règle générale des
   dessins (.elementor img.bio-feutre) les mettrait pleine largeur. */
.bio-bdx__icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bdx-teinte); }
.bio-bdx .bio-bdx__icone .bio-feutre { width: 42px; height: 42px; object-fit: contain; }
.bio-bdx__mode h3 { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--bdx-brun) !important; }
.bio-bdx__mode h3 span { font-weight: 600; color: var(--bdx-vert); white-space: nowrap; } /* « · dès 4,95 € » ne se coupe pas */
.bio-bdx__mode p { margin-top: 4px !important; font-size: 16px; line-height: 1.55; color: var(--bdx-gris); }
.bio-bdx__mode p .bio-liv-tag { margin: 0 2px; }
.bio-bdx__modes a.bio-bdx__btn { justify-self: start; margin-top: 6px; }

/* Transition douce vers la section suivante (remarque du gérant, 15/09/2026) : une vague crème, du même dessin que celle du
   haut de page, adoucit le bas du bandeau au lieu d'une coupe franche. Seulement quand photo et carte sont côte à côte :
   empilé, le bandeau finit déjà sur le crème et l'ombre de la carte déborde librement (voir le bloc suivant). */
@media (min-width: 1181px) {
    .bio-bdx--bandeau::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        z-index: 2;
        height: 54px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 58 420 62 720 38S1260 6 1440 30V60H0Z' fill='%23F9F7F2'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
        pointer-events: none;
    }
    .bio-bdx__carte { margin-bottom: 64px; }
}

/* Tablettes et petits portables : côte à côte, la carte serait plus haute que la photo et le rognage mangerait les
   produits de gauche. Le bandeau s'empile donc comme sur téléphone, carte centrée. */
@media (max-width: 1180px) {
    /* Fond couleur du mur sur les 40 premiers pixels : le bord haut de la photo tombe entre deux pixels d'écran et se
       mélangeait au crème du fond, d'où un liseré clair sous la vague (Pixel 5, audit du 16/09/2026). */
    /* container-type retiré ici : il ne sert qu'au calage de la carte sur PC (100cqw), et dans le conteneur Elementor en
       colonne « avec retour à la ligne » du téléphone il faisait calculer au bloc 1 171 px pour 732 px de contenu, soit
       un grand vide sous la carte (remarque du gérant, 16/09/2026 au soir). */
    /* overflow visible : empilé, seule l'ombre de la carte (18 px plus 48 px de flou) dépasse du bandeau, et le « hidden » du
       PC la tranchait 28 px sous la carte, d'où une ligne franche au-dessus de « Nos meilleures ventes » (remarque du gérant,
       16/09/2026 au soir). La section suivante a le même fond crème : l'ombre s'y estompe (carte en z-index 3, peinte dessus). */
    .bio-bdx.bio-bdx--bandeau { display: block; min-height: 0; container-type: normal; background: linear-gradient(var(--bdx-mur) 0 40px, var(--bdx-creme) 40px); padding-bottom: 28px; overflow: visible; }
    .bio-bdx__visuel { position: relative; width: 100%; max-width: none; aspect-ratio: 3 / 2; }
    .bio-bdx__visuel img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3.5%); -webkit-mask-composite: source-over; mask-image: linear-gradient(180deg, transparent 0, #000 3.5%); mask-composite: add; object-position: 50% 0%; }
    .bio-bdx__carte { width: auto; max-width: 720px; margin: -56px auto 0; }
}

@media (max-width: 900px) {
    /* Le conteneur Elementor n'a aucune marge sur téléphone : sans elle les textes touchaient le bord de l'écran, alors que
       le haut de l'accueil garde une gouttière d'environ 20 px (contrôle du 15/09/2026). */
    .bio-bdx { padding-inline: 16px; }
    .bio-bdx.bio-bdx--bandeau { padding-inline: 0; }
    .bio-bdx__carte { margin: -40px 16px 0; padding: 24px 20px 16px; }
    .bio-bdx .bio-bdx__carte img.bio-bdx__griffe { top: -16px; right: -6px; width: 38px; height: 38px; }
    .bio-bdx__tarifs li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; }
    .bio-bdx .bio-bdx__tarifs .bio-bdx__tarif-icone { width: 36px; height: 36px; }
    .bio-bdx h2.bio-bdx__titre { font-size: 26px; } /* comme le titre de l'offre de bienvenue sur téléphone */
    .bio-bdx .bio-bdx__actions .bio-btn-widget.is-hero { flex: 1 1 100%; }
    .bio-bdx__actions a.bio-bdx__lien { margin: 0 auto; }
    .bio-bdx__explique { margin-top: 44px; }
    .bio-bdx--explication { padding-block: 16px 24px; } /* écart après le bloc « magasin » ramené de 151 à ~130 px (audit du 16/09/2026) */
    .bio-bdx__grille { grid-template-columns: 1fr; gap: 26px; margin-top: 22px; }
    .bio-bdx__mode { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
    .bio-bdx__icone { width: 46px; height: 46px; border-radius: 13px; }
    .bio-bdx .bio-bdx__icone .bio-feutre { width: 34px; height: 34px; }
    .bio-bdx__mode h3 { font-size: 19px; }
    .bio-bdx .bio-bdx__modes .bio-btn-widget.is-hero { justify-self: stretch; }
}
@media (max-width: 767px) {
    .bio-bdx h2.bio-bdx__titre2 { font-size: 22px; } /* comme les titres de section du site sur téléphone (audit 16/09) */
}