/* =====================================================
 * Projet  : La Bonne Baguette
 * Fichier : assets/css/home.css
 * Role    : Styles de la page d'accueil (public/index.php).
 *           Sortis des blocs <style> en ligne de index.php le 12/11/2026
 *           (SEO : ratio texte / HTML) ; contenu repris a l'identique, dans
 *           le meme ordre. Lie via lbbAsset() APRES public.css.
 *           Les sections Evenements et Offre (blocs autrefois conditionnels)
 *           sont toujours chargees : leurs classes ne servent nulle part ailleurs.
 * ===================================================== */

/* ---------- Bandeau, nouveautes, sections defilantes, confiance, Instagram ---------- */
    .lbb-home-banner {
        width: 100%;
        margin: 0;
        padding: 0;
        line-height: 0;
        overflow: hidden;
        position: relative;
        max-height: 460px;
    }
    .lbb-home-banner img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        max-height: 460px;
        transform-origin: center;
        will-change: transform;
        /* Ken Burns : leger zoom + panoramique continu, va-et-vient */
        animation: lbbKenBurns 26s ease-in-out infinite alternate;
    }
    @keyframes lbbKenBurns {
        from { transform: scale(1.08) translate(0, 0); }
        to   { transform: scale(1.18) translate(-2%, -1.5%); }
    }
    @media (prefers-reduced-motion: reduce) {
        .lbb-home-banner img { animation: none; transform: scale(1.06); }
    }
    /* Voile degrade sur la photo : lisibilite du texte cote gauche, sans boite */
    .lbb-home-banner::before {
        content: "";
        position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background:
            linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 34%, rgba(0,0,0,0) 68%),
            linear-gradient(0deg,  rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 42%);
    }
    /* Texte en overlay : bloc structure a gauche */
    .lbb-home-banner__overlay {
        position: absolute;
        top: 50%;
        left: 6%;
        transform: translateY(-50%);
        max-width: 52%;
        margin: 0;
        z-index: 2;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .lbb-home-banner__eyebrow {
        display: inline-block;
        color: #FFFFFF;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: clamp(0.75rem, 1vw, 0.8rem);
        font-weight: 800;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    }
    .lbb-home-banner__title {
        margin: 0;
        font-family: var(--font-title);
        font-weight: 800;
        font-size: clamp(1.5rem, 3.6vw, 3rem);
        line-height: 1.08;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    }
    .lbb-home-banner__title strong {
        color: #DE0145;
        font-weight: 800;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
    .lbb-home-banner__sub {
        margin: 0;
        max-width: 34ch;
        font-size: clamp(0.9rem, 1.3vw, 1.12rem);
        font-weight: 500;
        line-height: 1.4;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    }
    .lbb-home-banner__cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.3rem;
        background: #DE0145;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 0.72rem 1.5rem;
        border-radius: 999px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
        transition: transform 0.15s ease, filter 0.15s ease;
    }
    .lbb-home-banner__cta:hover { transform: translateY(-2px); filter: brightness(0.95); color: #FFFFFF; }
    .lbb-home-banner__cta svg { width: 16px; height: 16px; }
    @media (prefers-reduced-motion: reduce) {
        .lbb-home-banner__cta { transition: none; }
    }
    @media (max-width: 720px) {
        .lbb-home-banner img { max-height: 300px; }
        .lbb-home-banner::before {
            background:
                linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.25) 100%);
        }
        .lbb-home-banner__overlay {
            top: auto;
            bottom: 7%;
            transform: none;
            left: 5%;
            right: 5%;
            max-width: none;
            gap: 0.5rem;
        }
    }

    /* =========================================================
       Section galette / croissant : defilement horizontal epingle
       Defaut (mobile / reduced-motion / sans JS) : empilement vertical.
       .is-active (ajoute par le JS sur desktop) : sticky + pan horizontal.
       ========================================================= */
    .lbb-hscroll { position: relative; background: #ffffff; }
    .lbb-hscroll__track { display: flex; flex-direction: column; }
    .lbb-hscroll__panel { width: 100%; min-height: 62vh; position: relative; overflow: hidden; }
    .lbb-hscroll__panel--img img { width: 100%; height: 100%; min-height: 62vh; object-fit: cover; display: block; }
    /* Image "packshot" (fond blanc) : affichee en entier, non rognee, sur fond blanc */
    .lbb-hscroll__panel--img img.lbb-hscroll__img--contain { object-fit: contain; background: #ffffff; }
    /* Empile (mobile / sans JS) : une image "entiere" ne doit pas etre etiree
       a 62vh, sinon on la rogne a nouveau. Elle garde sa hauteur naturelle. */
    .lbb-hscroll__panel--entiere { min-height: 0; }
    .lbb-hscroll__panel--img img.lbb-hscroll__img--contain { height: auto; min-height: 0; }
    .lbb-hscroll__panel--text {
        display: flex; flex-direction: column; justify-content: center;
        padding: clamp(1.5rem, 5vw, 5rem); box-sizing: border-box;
    }
    .lbb-hscroll__panel--cream { background: #ffffff; color: #1a1a1a; }
    .lbb-hscroll__panel--berry { background: #DE0145; color: #ffffff; }
    .lbb-hscroll__eyebrow {
        text-transform: uppercase; letter-spacing: 2px;
        font-size: 0.8rem; font-weight: 700; margin: 0 0 0.8rem;
    }
    .lbb-hscroll__panel--cream .lbb-hscroll__eyebrow { color: #DE0145; }
    .lbb-hscroll__panel--berry .lbb-hscroll__eyebrow { color: #FFE082; }
    .lbb-hscroll__title {
        font-family: var(--font-title);
        font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.12; margin: 0 0 1.1rem;
    }
    .lbb-hscroll__panel--cream .lbb-hscroll__title { color: #DE0145; }
    .lbb-hscroll__text { font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.7; margin: 0; max-width: 32ch; }

    /* Mode actif (desktop) : pan horizontal pilote par le scroll.
       --lbb-hscroll-top = hauteur du header une fois epingle (mesuree en JS).
       Sans ce decalage, le header (sticky, z-index 1100) recouvre le haut du
       panneau et ROGNE les images par-dessous. */
    .lbb-hscroll.is-active .lbb-hscroll__sticky {
        position: sticky;
        top: var(--lbb-hscroll-top, 0px);
        height: calc(100vh - var(--lbb-hscroll-top, 0px));
        overflow: hidden;
    }
    .lbb-hscroll.is-active .lbb-hscroll__track {
        flex-direction: row; width: max-content;
        height: calc(100vh - var(--lbb-hscroll-top, 0px));
        will-change: transform;
    }
    .lbb-hscroll.is-active .lbb-hscroll__panel {
        flex: 0 0 50vw; width: auto; min-height: 0;
        height: calc(100vh - var(--lbb-hscroll-top, 0px));
    }
    .lbb-hscroll.is-active .lbb-hscroll__panel--img img {
        min-height: 0;
        height: calc(100vh - var(--lbb-hscroll-top, 0px));
    }
    /* Images affichees EN ENTIER : c'est le panneau qui s'adapte a l'image,
       pas l'inverse. L'image occupe toute la hauteur, garde son rapport
       largeur/hauteur (width:auto) et n'est donc JAMAIS rognee - et sans
       bandes vides autour, contrairement a un object-fit:contain dans un
       panneau de largeur fixe. Le JS recalcule le defilement sur
       track.scrollWidth : il s'adapte tout seul a la nouvelle largeur. */
    .lbb-hscroll.is-active .lbb-hscroll__panel--entiere {
        flex: 0 0 auto;
        max-width: 100vw;
    }
    .lbb-hscroll.is-active .lbb-hscroll__panel--img img.lbb-hscroll__img--contain {
        height: calc(100vh - var(--lbb-hscroll-top, 0px));
        width: auto;
        max-width: 100vw;
        object-fit: contain;
    }

    /* Indice "faites defiler" (mode actif uniquement) */
    .lbb-hscroll__hint {
        display: none; position: absolute; bottom: 1.6rem; left: 50%;
        transform: translateX(-50%); z-index: 3;
        background: rgba(0,0,0,0.4); color: #fff;
        padding: 0.5rem 1.05rem; border-radius: 999px;
        font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px;
        white-space: nowrap; pointer-events: none; transition: opacity .3s ease;
    }
    .lbb-hscroll.is-active .lbb-hscroll__hint { display: block; }
    .lbb-hscroll__hint.is-hidden { opacity: 0; }
    .lbb-hscroll__hint-arrow { display: inline-block; animation: lbbHintNudge 1.1s ease-in-out infinite; }
    @keyframes lbbHintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

    @media (max-width: 768px) {
        .lbb-hscroll__panel { min-height: 50vh; }
        .lbb-hscroll__panel--img img { min-height: 50vh; }
        /* Telephone : chaque panneau prend la hauteur de ce qu'il contient.
           Le min-height de 50vh ci-dessus, ecrit APRES la regle "entiere",
           la battait : les deux photos (galette, croissant) gardaient 420 px
           de haut pour ~290 px d'image, soit 130 px de blanc sous chacune.
           Meme chose pour les textes, centres dans un bloc trop haut. */
        .lbb-hscroll__panel--entiere { min-height: 0; }
        .lbb-hscroll__panel--text { min-height: 0; padding: 2.4rem 1.25rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .lbb-hscroll__hint-arrow { animation: none; }
    }


    /* Section "Nos nouveautes" : pastille, prix et bouton */
    .lbb-nv__pastille {
        align-self: flex-start; display: inline-block; margin: 0 0 0.9rem;
        background: #DE0145; color: #FFFFFF; font-weight: 800; font-size: 0.95rem;
        padding: 0.35rem 0.9rem; border-radius: 999px; transform: rotate(-4deg);
        box-shadow: 0 6px 14px rgba(222, 1, 69, 0.25);
    }
    .lbb-nv__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 1.6rem; }
    .lbb-nv__prix { font-size: 1.7rem; font-weight: 800; color: #1a1a1a; }
    .lbb-nv__cta {
        align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
        background: #DE0145; color: #FFFFFF; font-weight: 700; text-decoration: none;
        padding: 0.8rem 1.5rem; border-radius: 999px; transition: background .15s, transform .15s;
    }
    .lbb-nv__cta:hover { background: #B30037; color: #FFFFFF; transform: translateY(-1px); }
    .lbb-nv__cta svg { width: 18px; height: 18px; }
    .lbb-nv__cta--blanc { margin-top: 1.6rem; background: #FFFFFF; color: #DE0145; }
    .lbb-nv__cta--blanc:hover { background: #FFFFFF; color: #B30037; }
    @media (prefers-reduced-motion: reduce) { .lbb-nv__cta { transition: none; } .lbb-nv__cta:hover { transform: none; } }

    /* Nouveautes, ordinateur : la photo produit (fond blanc) ne prend pas toute
       la hauteur de l'ecran, elle est centree a ~60 % pour garder une taille
       naturelle. Telephone (empile) : inchange. */
    .lbb-hscroll--nouveaute.is-active .lbb-hscroll__panel--entiere {
        display: flex; align-items: center; justify-content: center;
        padding: 0 3vw; background: #ffffff;
    }
    .lbb-hscroll--nouveaute.is-active .lbb-hscroll__panel--img img.lbb-hscroll__img--contain {
        height: calc((100vh - var(--lbb-hscroll-top, 0px)) * 0.6);
        max-height: 560px;
        mix-blend-mode: multiply; /* fond presque blanc de la photo fondu dans le blanc */
    }

    /* Secret de fabrication : disclosure cliquable dans le panneau galette */
    .lbb-secret { margin-top: 1.6rem; }
    .lbb-secret__btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        cursor: pointer; list-style: none;
        background: transparent; color: #DE0145;
        border: 1.5px solid #DE0145; border-radius: 999px;
        padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.95rem;
        transition: background .15s, color .15s;
        -webkit-tap-highlight-color: transparent;
    }
    .lbb-secret__btn::-webkit-details-marker { display: none; }
    .lbb-secret__btn:hover { background: #DE0145; color: #ffffff; }
    .lbb-secret__btn:focus-visible { outline: 2px solid #DE0145; outline-offset: 2px; }
    .lbb-secret__chevron { margin-left: 0.1rem; font-size: 1.25rem; line-height: 1; transition: transform .2s ease; }
    .lbb-secret[open] .lbb-secret__chevron { transform: rotate(45deg); }
    .lbb-secret__body { margin-top: 1rem; border-left: 3px solid #E3B23C; padding: 0.3rem 0 0.2rem 1rem; }
    .lbb-secret[open] .lbb-secret__body { animation: lbbSecretIn .3s ease both; }
    @keyframes lbbSecretIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    .lbb-secret__intro { margin: 0 0 0.6rem; font-weight: 700; color: #DE0145; }
    .lbb-secret__list { list-style: none; margin: 0; padding: 0; }
    .lbb-secret__list li { position: relative; padding: 0.28rem 0 0.28rem 1.4rem; font-size: 0.98rem; line-height: 1.45; }
    .lbb-secret__list li::before {
        content: ""; position: absolute; left: 0; top: 0.62em;
        width: 8px; height: 8px; border-radius: 2px; background: #E3B23C; transform: rotate(45deg);
    }
    .lbb-secret__more { margin: 0.7rem 0 0; font-style: italic; color: #1a1a1a; font-size: 0.9rem; }
    @media (prefers-reduced-motion: reduce) {
        .lbb-secret[open] .lbb-secret__body { animation: none; }
        .lbb-secret__chevron { transition: none; }
    }

    /* =========================================================
       Bande photos fournil : vitrine d'images en defilement lent
       ========================================================= */
    .lbb-photos-bande {
        overflow: hidden;
        margin: 2.5rem 0 1rem;
        user-select: none;
    }
    .lbb-photos-bande__track {
        display: flex;
        gap: 0.8rem;
        width: max-content;
        animation: lbbPhotosScroll 55s linear infinite;
    }
    .lbb-photos-bande img {
        height: 380px;
        width: auto;
        border-radius: 10px;
        object-fit: cover;
        display: block;
        box-shadow: 0 6px 20px rgba(0,0,0,0.075);
    }
    @keyframes lbbPhotosScroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }   /* contenu duplique 2x -> boucle parfaite */
    }
    @media (max-width: 720px) {
        .lbb-photos-bande img { height: 220px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .lbb-photos-bande__track { animation: none; }
    }

    /* =========================================================
       Bandeau communaute : reseaux sociaux + QR code (sous le carrousel)
       ========================================================= */
    .lbb-communaute {
        background: #ffffff;
        margin-top: 1.5rem;
    }
    .lbb-communaute__inner {
        max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.5rem;
        display: flex; align-items: center; justify-content: space-between;
        gap: 2.5rem; flex-wrap: wrap;
    }
    .lbb-communaute__text { flex: 1 1 340px; }
    .lbb-communaute__text h2 {
        font-family: var(--font-title);
        color: #DE0145; font-size: clamp(1.5rem, 3vw, 2.2rem);
        line-height: 1.15; margin: 0 0 0.6rem;
        /* PAS de text-wrap:balance ici : combine a l'insecable ci-dessous,
           il eclatait le titre en 3 lignes courtes au lieu de 2. */
    }
    /* Groupe de mots insecable (nom d'enseigne). inline-block pour que le
       retour se fasse AVANT le groupe, jamais au milieu. */
    .lbb-nowrap { white-space: nowrap; display: inline-block; }
    .lbb-communaute__text p { color: #1a1a1a; margin: 0 0 1.2rem; font-size: 1.02rem; max-width: 42ch; }
    .lbb-communaute__socials { display: flex; gap: 0.8rem; align-items: center; }
    .lbb-communaute__socials a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 50%;
        background: #DE0145; border: 1px solid #DE0145; color: #ffffff;
        text-decoration: none; font-size: 1.2rem;
        transition: background .15s, color .15s, transform .15s;
    }
    .lbb-communaute__socials a:hover { background: #ffffff; color: #DE0145; transform: translateY(-2px); }
    .lbb-communaute__qr { flex: 0 0 auto; }
    .lbb-communaute__qr img {
        width: 240px; height: 240px; display: block;
        background: #fff; padding: 12px; box-sizing: border-box;
        border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.09);
    }
    @media (max-width: 720px) {
        .lbb-communaute { margin-top: 0; }
        .lbb-communaute__inner { flex-direction: column; text-align: center; gap: 1.5rem; padding: 2rem 1.25rem; }
        /* flex: 1 1 340px pose une LARGEUR de 340 px en ligne ; une fois la
           colonne empilee, ces 340 px deviennent une HAUTEUR minimale : le
           texte faisait 340 px pour 180 px de contenu -> 160 px de blanc
           entre les icones des reseaux et la photo de la plaque. */
        .lbb-communaute__text { flex: 0 0 auto; }
        .lbb-communaute__socials { justify-content: center; }
        .lbb-communaute__text p { margin-left: auto; margin-right: auto; }
        .lbb-communaute__qr img { width: 220px; height: 220px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .lbb-communaute__socials a { transition: none; }
    }

    /* =========================================================
       Bandeau defilant (marquee) : 100% MAISON - FAIT A AMIENS
       ========================================================= */
    .lbb-marquee {
        background: #DE0145;
        color: #fff;
        overflow: hidden;
        padding: 0.55rem 0;
        white-space: nowrap;
        user-select: none;
    }
    .lbb-marquee__track {
        display: inline-block;
        animation: lbbMarquee 28s linear infinite;
    }
    .lbb-marquee__item {
        display: inline-block;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        padding: 0 1.4rem;
    }
    .lbb-marquee__sep { opacity: 0.55; }
    @keyframes lbbMarquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }   /* le contenu est duplique : -50% = boucle parfaite */
    }
    @media (prefers-reduced-motion: reduce) {
        .lbb-marquee__track { animation: none; }
    }

    /* =========================================================
       Apparition au scroll : .reveal -> .is-visible
       ========================================================= */
    .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.45,0,.2,1);
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* Reflet "shine" qui balaie les cartes de l'offre du moment au survol */
    .public-carrousel.home-offre .carrousel-item .card-shine {
        position: absolute; top: 0; left: -80%;
        width: 55%; height: 100%; z-index: 3; pointer-events: none;
        background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
        transform: skewX(-18deg);
        transition: left 0.65s ease;
    }
    @media (hover: hover) {
        .public-carrousel.home-offre .carrousel-item:hover .card-shine { left: 135%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .public-carrousel.home-offre .carrousel-item .card-shine { display: none; }
    }

    /* Bouton "retour en haut" flottant */
    .lbb-totop {
        position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1000;
        width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        background: #DE0145; color: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        opacity: 0; visibility: hidden; transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s;
    }
    .lbb-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
    .lbb-totop:hover { background: #B30037; }
    @media (prefers-reduced-motion: reduce) {
        .lbb-totop { transition: opacity 0.25s ease, background 0.15s; transform: none; }
    }


    /* =========================================================
       Carrousel "Offre du moment" : on cache tout sauf l'image
       jusqu'au hover de la carte (uniquement sur cette page,
       grace au scope .home-offre).
       ========================================================= */
    @media (hover: hover) {
        .public-carrousel.home-offre .carrousel-item > *:not(img) {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;            /* empeche le clic accidentel sur "Ajouter" cache */
        }
        /* Le degrade noir en bas n'apparait qu'au hover (sinon photo "pure") */
        .public-carrousel.home-offre .carrousel-item::after {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .public-carrousel.home-offre .carrousel-item:hover > *:not(img),
        .public-carrousel.home-offre .carrousel-item:focus-within > *:not(img) {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .public-carrousel.home-offre .carrousel-item:hover::after,
        .public-carrousel.home-offre .carrousel-item:focus-within::after {
            opacity: 1;
        }
    }
    /* Sur mobile/tactile : pas de hover possible -> tout reste visible comme avant */
    @media (hover: none) {
        .public-carrousel.home-offre .carrousel-item > *:not(img),
        .public-carrousel.home-offre .carrousel-item::after {
            opacity: 1;
        }
    }

    /* ===== Bande de confiance (note Google + engagements, habillage artisanal) ===== */
    .lbb-confiance-sep { display: block; width: 100%; height: 38px; margin-bottom: -1px; }
    .lbb-confiance {
        position: relative;
        background: #ffffff;
        padding: 1.4rem 1.2rem 2.4rem;
        overflow: hidden;
    }
    .lbb-confiance__flour { position: absolute; border-radius: 50%; background: #ffffff; opacity: .5; pointer-events: none; }
    .lbb-confiance__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
    .lbb-confiance__sur {
        font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
        color: #DE0145; font-weight: 700; margin: 0 0 .7rem;
    }
    .lbb-confiance__note { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center; text-decoration: none; }
    .lbb-confiance__score { font-size: 2.4rem; font-weight: 800; color: #1a1a1a; line-height: 1; }
    .lbb-confiance__stars { display: inline-flex; gap: 2px; }
    .lbb-confiance__stars svg { width: 20px; height: 20px; }
    .lbb-confiance__avis { font-size: .85rem; color: #1a1a1a; margin: .45rem 0 0; }
    .lbb-confiance__avis b { color: #1a1a1a; }
    a.lbb-confiance__note { transition: transform .15s ease; }
    a.lbb-confiance__note:hover { transform: translateY(-1px); }
    a.lbb-confiance__note:hover .lbb-confiance__score { color: #DE0145; }
    .lbb-confiance__eng {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1.2rem .6rem; margin-top: 1.6rem;
    }
    .lbb-confiance__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
    .lbb-confiance__ico {
        width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #DE0145;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(180,137,72,.18);
    }
    .lbb-confiance__ico svg { width: 24px; height: 24px; }
    .lbb-confiance__lab { font-size: .85rem; color: #1a1a1a; font-weight: 700; line-height: 1.3; }
    /* Bouton d'incitation a laisser un avis : degrade fluide au survol */
    .lbb-confiance__cta {
        display: inline-flex; align-items: center; gap: .5rem;
        margin-top: 1.6rem; padding: .75rem 1.6rem; border-radius: 999px;
        font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff;
        background: #DE0145;
        transition: transform .15s ease, filter .15s ease;
    }
    .lbb-confiance__cta:hover { transform: translateY(-1px); filter: brightness(0.93); color: #fff; }
    .lbb-confiance__cta:focus-visible { outline: 2px solid #DE0145; outline-offset: 3px; }
    .lbb-confiance__cta svg { width: 18px; height: 18px; }
    @media (prefers-reduced-motion: reduce) { .lbb-confiance__cta { transition: box-shadow .2s ease; } }
    @media (prefers-reduced-motion: reduce) {
        a.lbb-confiance__note, a.lbb-confiance__note:hover { transition: none; transform: none; }
    }

    /* ===== Bloc Instagram (grille limitee + lien vers le compte) ===== */
    .lbb-insta { max-width: 1100px; margin: 2.5rem auto; padding: 0 1rem; }
    @media (max-width: 720px) {
        .lbb-insta { margin: 1.5rem auto 2rem; }
    }
    .lbb-insta__head { text-align: center; margin-bottom: 1.1rem; }
    .lbb-insta__title { color: #DE0145; margin: 0 0 0.2rem; font-size: 1.5rem; }
    .lbb-insta__handle { color: #1a1a1a; font-weight: 600; text-decoration: none; }
    .lbb-insta__handle:hover { color: #DE0145; text-decoration: underline; }
    .lbb-insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
    .lbb-insta__cell {
        position: relative; display: block; aspect-ratio: 1 / 1;
        border-radius: 8px; overflow: hidden; background: #F5F5F5;
    }
    /* color/font-size a 0 : si l'image ne charge pas, aucun texte de repli ne s'affiche */
    /* ".lbb-insta" en tete : depuis que ces regles sont dans un fichier lie dans le <head>, elles passent AVANT
       les styles en ligne de views/header.php ; img.lbb-img-fade (meme specificite) gagnerait sinon la transition. */
    .lbb-insta .lbb-insta__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; color: transparent; font-size: 0; }
    .lbb-insta__cell.is-cassee { display: none; }
    .lbb-insta__icon {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        color: #fff; background: rgba(222,1,69,0); opacity: 0;
        transition: background .25s ease, opacity .25s ease;
    }
    @media (hover: hover) {
        .lbb-insta__cell:hover img { transform: scale(1.08); }
        .lbb-insta__cell:hover .lbb-insta__icon { background: rgba(222,1,69,0.55); opacity: 1; }
    }
    .lbb-insta__cell:focus-visible .lbb-insta__icon { background: rgba(222,1,69,0.55); opacity: 1; }
    .lbb-insta__btn {
        display: block; width: max-content; margin: 1.3rem auto 0;
        background: #DE0145; color: #fff; padding: 0.7rem 1.6rem;
        border-radius: 999px; text-decoration: none; font-weight: 700;
        transition: background .15s, transform .15s;
    }
    .lbb-insta__btn:hover { background: #B30037; transform: translateY(-2px); }
    @media (max-width: 760px) { .lbb-insta__grid { grid-template-columns: repeat(3, 1fr); } }
    @media (prefers-reduced-motion: reduce) {
        .lbb-insta .lbb-insta__cell img, .lbb-insta__icon, .lbb-insta__btn { transition: none; }
        .lbb-insta__cell:hover img { transform: none; }
        .lbb-insta__btn:hover { transform: none; }
    }

/* ---------- Evenements a venir (section rendue seulement s il y en a) ---------- */
        /* =====================================================
           Evenements : la PHOTO fait le decor.
           Plus de bande creme : la carte est posee sur le blanc de la page,
           et c'est l'image en plein cadre - assombrie juste ce qu'il faut
           pour que le texte reste lisible - qui accroche l'oeil.
           ===================================================== */
        .lbb-evt-wrap { max-width: 1140px; margin: 3.5rem auto 2.5rem; padding: 0 1.5rem; }
        .lbb-evt-wrap > h2 {
            text-align: center; color: #DE0145;
            margin: 0 0 .35rem; font-size: 1.95rem;
        }
        .lbb-evt-intro {
            text-align: center; color: #6b5647;
            margin: 0 auto 1.8rem; max-width: 46ch; font-size: .95rem;
        }
        .lbb-evt-liste { display: grid; gap: 1.5rem; }
        .lbb-evt-liste--multi { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

        .lbb-evt {
            position: relative;
            display: flex; align-items: flex-end;
            min-height: 460px;
            border-radius: 26px;
            overflow: hidden;
            background: #2A1B16;              /* filet de securite si l'image manque */
            box-shadow: 0 26px 60px -24px rgba(42, 27, 22, .65);
            isolation: isolate;
        }
        .lbb-evt-liste--multi .lbb-evt { min-height: 360px; }

        /* Sans photo : aplat framboise profond plutot qu'un rectangle noir. */
        .lbb-evt--sansimage {
            background: linear-gradient(150deg, #DE0145 0%, #A50133 100%);
            min-height: 300px;
        }

        .lbb-evt__media { position: absolute; inset: 0; z-index: 0; }
        /* ".lbb-evt" en tete : meme raison que .lbb-insta (passer devant img.lbb-img-fade de header.php). */
        .lbb-evt .lbb-evt__media img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1.01);           /* evite un liseré au zoom */
            transition: transform .7s cubic-bezier(.2, .7, .3, 1);
        }
        .lbb-evt:hover .lbb-evt__media img { transform: scale(1.06); }

        /* Voile sombre : c'est une condition de LISIBILITE, pas un ornement.
           Fort en bas ou vit le texte, presque nul en haut pour laisser
           respirer la photo. */
        .lbb-evt__media::after {
            content: '';
            position: absolute; inset: 0;
            background:
                linear-gradient(to top,
                    rgba(24, 14, 11, .94) 0%,
                    rgba(24, 14, 11, .80) 30%,
                    rgba(24, 14, 11, .34) 58%,
                    rgba(24, 14, 11, .06) 100%);
        }

        .lbb-evt__corps {
            position: relative; z-index: 1;
            display: flex; flex-direction: column;
            align-items: flex-start; gap: .75rem;
            padding: 2.6rem 2.8rem 2.5rem;
            max-width: 660px;
            color: #FFFFFF;
        }
        .lbb-evt-liste--multi .lbb-evt__corps { padding: 1.8rem 1.7rem 1.9rem; max-width: none; }

        .lbb-evt__quand {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .34rem .85rem;
            border-radius: 999px;
            background: #DE0145; color: #FFFFFF;
            font-size: .75rem; font-weight: 700;
            letter-spacing: .05em; text-transform: uppercase;
        }
        .lbb-evt__quand--jour { background: #17A34A; }

        .lbb-evt__titre {
            margin: 0;
            font-size: 2.15rem; line-height: 1.12;
            color: #FFFFFF;
            text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
        }
        .lbb-evt-liste--multi .lbb-evt__titre { font-size: 1.5rem; }

        .lbb-evt__soustitre {
            margin: 0;
            font-size: 1.05rem; font-weight: 700;
            color: #FFD27A;                   /* ble dore : lisible sur sombre */
        }

        .lbb-evt__meta {
            display: flex; flex-wrap: wrap; gap: .5rem .9rem;
            margin: .25rem 0 0;
        }
        /* Chaque info dans sa pastille translucide : ca tient sur une photo
           chargee, la ou du texte nu se perdrait. */
        .lbb-evt__ligne {
            display: inline-flex; align-items: center; gap: .45rem;
            margin: 0;
            padding: .4rem .85rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .22);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            font-size: .9rem; font-weight: 700; color: #FFFFFF;
        }
        .lbb-evt__ligne i { color: #FFD27A; font-size: .85rem; }

        .lbb-evt__desc {
            margin: .35rem 0 0;
            font-size: .97rem; line-height: 1.6;
            color: rgba(255, 255, 255, .92);
            text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
            max-width: 52ch;
        }

        .lbb-evt__cta {
            display: inline-flex; align-items: center; gap: .55rem;
            margin-top: .7rem;
            padding: .8rem 1.6rem;
            border-radius: 999px;
            background: #FFFFFF; color: #DE0145;
            font-weight: 700; font-size: .93rem;
            text-decoration: none;
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .lbb-evt__cta:hover {
            color: #DE0145;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
        }

        @media (max-width: 760px) {
            .lbb-evt-wrap { padding: 0 1rem; margin-top: 2rem; margin-bottom: 1.75rem; }
            .lbb-evt { min-height: 420px; border-radius: 20px; }
            .lbb-evt__corps { padding: 1.7rem 1.4rem 1.8rem; }
            .lbb-evt__titre { font-size: 1.6rem; }
            .lbb-evt__soustitre { font-size: .97rem; }
            .lbb-evt__ligne { font-size: .84rem; padding: .35rem .7rem; }
            .lbb-evt__desc { font-size: .92rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .lbb-evt .lbb-evt__media img, .lbb-evt__cta { transition: none; }
            .lbb-evt:hover .lbb-evt__media img { transform: scale(1.01); }
            .lbb-evt__cta:hover { transform: none; }
        }

/* ---------- Offre du moment (section rendue seulement si active) ---------- */
        .lbb-offre-wrap { max-width: 1100px; margin: 3.5rem auto 2.5rem; padding: 0 1.5rem; }
        /* h2 depuis le 12/11/2026 (le h1 unique est le titre de la banniere) : taille d un h1 gardee. */
        .lbb-offre-wrap > h2 { text-align:center; color:#DE0145; margin: 0 0 1.4rem; font-size: 2em; }
        .lbb-offre { display:grid; grid-template-columns: 1.05fr 1fr; background:#fff;
            border:1px solid #EDE6E8; border-radius:22px; overflow:hidden;
            box-shadow: 0 6px 24px rgba(0,0,0,.06); }
        .lbb-offre--noimg { grid-template-columns: 1fr; }
        .lbb-offre__media { position:relative; min-height:440px; background:#fff; }
        .lbb-offre__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; padding:.6rem; box-sizing:border-box; }
        .lbb-offre__content { padding: clamp(1.7rem, 3vw, 2.9rem); display:flex; flex-direction:column; justify-content:center; }
        .lbb-offre--noimg .lbb-offre__content { align-items:center; text-align:center; }
        .lbb-offre__badge { align-self:flex-start; display:inline-block; margin:0 0 1rem;
            background:#DE0145; color:#fff; font-weight:700;
            font-size:.76rem; letter-spacing:1.6px; text-transform:uppercase; padding:.42rem 1rem; border-radius:999px; }
        .lbb-offre--noimg .lbb-offre__badge { align-self:center; }
        .lbb-offre__title { color:#DE0145; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.08; margin:0 0 .9rem; }
        .lbb-offre__desc { color:#1a1a1a; font-size:1.06rem; line-height:1.65; margin:0 0 1.5rem; max-width:52ch; }
        .lbb-offre__cta { align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem;
            text-decoration:none; color:#fff; font-weight:700; padding:.85rem 1.8rem; border-radius:999px;
            background: #DE0145; background-size:220% 100%; transition: transform .15s ease, filter .15s ease; }
        .lbb-offre--noimg .lbb-offre__cta { align-self:center; }
        .lbb-offre__cta:hover { transform: translateY(-1px); filter: brightness(0.93); color: #fff; }
        .lbb-offre__cta svg { width:16px; height:16px; }
        @media (max-width:760px){ .lbb-offre { grid-template-columns:1fr; } .lbb-offre__media { min-height:220px; } }
        @media (prefers-reduced-motion: reduce){ .lbb-offre__cta { transition:none; } }

/* ---------- Introduction sous le bandeau (12/11/2026, SEO : mots du h1 dans le texte) ----------
   Meme ton que .lbb-evt-intro (texte de marque, centre), un peu plus large. */
    .lbb-home-intro { max-width: 1140px; margin: 2rem auto 0; padding: 0 1.5rem; }
    .lbb-home-intro p {
        text-align: center; color: #5b4633;
        margin: 0 auto; max-width: 68ch; font-size: 1rem; line-height: 1.6;
    }
    @media (max-width: 720px) {
        .lbb-home-intro { margin-top: 1.5rem; padding: 0 1rem; }
        .lbb-home-intro p { font-size: .95rem; }
    }