/* ====== RESET LOCAL OVERFLOW ====== */
.page-home { overflow-x: clip; }
@supports not (overflow-x: clip){ .page-home { overflow-x: hidden; } }

/* ====== VARIABLES LAYOUT ====== */
:root{
    --header-h: 50px;     /* maj via JS en live */
    --vh: 1vh;            /* 1% viewport (fallback) */
    --vh100: calc(var(--vh) * 100);
}

/* ====== HERO ANIMATIONS ====== */

/* --- Entrée unique : fade-in pour tout le contenu --- */
@keyframes heroFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.promo-banner.anim-ready .promo-banner__title   { opacity: 0; animation: heroFadeIn 0.6s ease-out 0.1s forwards; }
.promo-banner.anim-ready .tags--cta              { opacity: 0; animation: heroFadeIn 0.6s ease-out 0.4s forwards; }
.promo-banner.anim-ready .promo-banner__text     { opacity: 0; animation: heroFadeIn 0.6s ease-out 0.6s forwards; }
.promo-banner.anim-ready .promo-banner__product-card {
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 0.8s forwards;
}

/* --- Image : zoom-dezoom subtil persistant --- */
@keyframes heroKenBurns {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}
.promo-banner.anim-ready .promo-banner__media picture > img {
    animation: heroKenBurns 10s ease-in-out infinite;
}

/* --- Product card : glow pulse persistant --- */
@keyframes heroCardGlow {
    0%, 100% { box-shadow: 0 8px 30px rgba(255,255,255,.06), 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: 0 8px 40px rgba(255,255,255,.18), 0 0 60px rgba(255,255,255,.06); }
}
.promo-banner.anim-ready .promo-banner__product-card {
    animation: heroFadeIn 0.6s ease-out 0.8s forwards,
               heroCardGlow 3s ease-in-out 2s infinite;
}

/* --- Overlay gradient: delayed fade --- */
@keyframes heroOverlayFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.promo-banner.anim-ready .promo-banner__media::after {
    opacity: 0;
    animation: heroOverlayFade 1.2s ease 0.8s forwards;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .promo-banner.anim-ready .promo-banner__title,
    .promo-banner.anim-ready .tags--cta,
    .promo-banner.anim-ready .promo-banner__text,
    .promo-banner.anim-ready .promo-banner__media picture > img,
    .promo-banner.anim-ready .promo-banner__product-card,
    .promo-banner.anim-ready .promo-banner__media::after,
    .promo-banner.anim-ready .promo-banner__media::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ====== HERO ====== */
/* Zones nommées + shrink safe */
.promo-banner__content { grid-area: content; min-width: 0; }
.promo-banner__media   { grid-area: media;   min-width: 0; }

.promo-banner{
    /* Lot D V1 — tokens Lot B + fluid sizing for 345→2400 viewport range.
       BG = papaya cream Lot B token. Heights scale fluidly with viewport. */
    width:100%;
    height:clamp(420px, 42vw, 720px);
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas: "content media"; /* Desktop : texte gauche, image droite */
    align-items:stretch;
    background:var(--as-papaya, #FFEFD0);
    color:var(--as-grey-900);
    /* overflow:visible (was clip) so the sticky product card is not trapped by a
       clipping ancestor. The media figure keeps its own overflow:hidden to clip
       the image + smoke decoration; nothing else spills at this level. */
    overflow:visible;
    position:relative;
}

.promo-banner__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(16px, 1.4vw, 24px);
    /* Inner content padding scales fluidly. Left edge follows the global
       homepage container-home pad so the H1 aligns with the cards grid below. */
    padding-inline:var(--as-container-home-pad, clamp(16px, 3.5vw, 64px));
    padding-block:clamp(24px, 4vw, 48px);
    max-width:min(640px, 100%);
}

.promo-banner__title{
    /* Figma cible ~40-44px à 1500vp ; scale 28→56 entre 345 et 2400 */
    font-family:var(--as-font-family, inherit);
    font-size:clamp(28px, 3.2vw, 56px);
    font-weight:var(--as-fw-medium, 500);
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--as-grey-900);
}
.promo-banner__text{
    margin:0;
    font-size:clamp(14px, 1.05vw, 16px);
    color:var(--as-grey-900);
    line-height:1.5;
    max-width:60ch;
    font-weight:var(--as-fw-medium, 500);
}

.tags{ display:flex; flex-wrap:wrap; gap:var(--as-spacing-sm, 8px); padding:0; list-style:none; margin:var(--as-spacing-md, 16px) 0 0; }
.tag{
    display:inline-flex; align-items:center;
    padding:6px 10px;
    border-radius:var(--as-radius-small, 3px);
    background:var(--as-grey-100, #efefef);
    color:var(--as-grey-700);
    font-weight:var(--as-fw-medium, 500);
    font-size:clamp(11px, 0.9vw, 13px);
    line-height:1;
    text-decoration:none;
}
.tags--compact .tag{
    padding:8px 10px;
    background:var(--as-grey-700, #202020);
    color:#fff;
    font-size:clamp(12px, 0.95vw, 14px);
}
.tags--cta .tag{
    background:var(--as-grey-700, #202020);
    color:#fff;
    font-size:clamp(12px, 1vw, 15px);
    font-weight:var(--as-fw-medium, 500);
    min-height:27px;
    line-height:27px;
    padding:3px 10px;
    border-radius:var(--as-radius-small, 3px);
}
.tags--cta a.tag{ text-decoration:none; }
.tags--cta a.tag:hover{ background:var(--as-grey-900); }

.promo-banner__media{
    position:relative; margin:0; height:100%; overflow:hidden;
}
.promo-banner__media > picture{
    display:block; width:100%; height:100%;
}
.promo-banner__media picture > img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    background:none; /* pas d’overlay ici */
}

/* Overlay gradient CORRECT sous la card */
.promo-banner__media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
    pointer-events:none;
    z-index:1;
}

/* Smoke drift overlay (Lot D.2)
   Two soft radial layers blend over the hero image. translate3d animation
   stays on GPU compositor — no layout, no paint. Sub-pixel motion keeps it
   subtle. prefers-reduced-motion handler below removes the animation. */
.promo-banner__media::before{
    content:"";
    position:absolute; inset:-8% -4%;
    background:
        radial-gradient(ellipse 38% 26% at 18% 78%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 32% 22% at 72% 64%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:0;
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
}
.promo-banner.anim-ready .promo-banner__media::before{
    animation:heroSmokeDrift 28s ease-in-out 1.4s infinite alternate;
}
@keyframes heroSmokeDrift{
    0%   { transform:translate3d(-1.2%, 2%, 0); opacity:.88; }
    50%  { transform:translate3d( 1.6%,-2.4%,0); opacity:1; }
    100% { transform:translate3d(-0.6%,-1%, 0); opacity:.84; }
}

.promo-banner__product-card{
    /* Sticky overlay on the hero RIGHT (media) column. The card is a grid item
       placed in the media area (overlapping the figure), vertically centered, and
       sticks to the viewport while scrolling until the hero bottom — then it
       releases with the hero. top approximates viewport-center for the card. */
    grid-area:media;
    align-self:center;
    justify-self:end;
    /* Desktop: flush to the right screen edge (margin 0). Right corners squared
       (rounded left only) so the card sits cleanly against the edge — same flush
       treatment as the ≤575 mobile rule. */
    margin-right:0;
    position:sticky;
    top:calc(50vh - 100px);
    width:clamp(260px, 22vw, 360px);
    background:var(--as-gradient-card, linear-gradient(159deg, #000 20.53%, #202020 85.89%));
    color:#fff;
    border-radius:var(--as-radius-main, 8px) 0 0 var(--as-radius-main, 8px);
    box-shadow:var(--as-shadow-elevated, 0 8px 24px rgba(0,0,0,.12));
    display:grid;
    grid-template-rows:auto auto auto 1fr auto;
    align-content:start;
    padding:var(--as-spacing-md-plus, 24px) var(--as-spacing-lg, 32px) 0;
    z-index:2; /* au-dessus de l’overlay */
}
.product-card__title{
    font-weight:var(--as-fw-regular, 400);
    font-size:clamp(16px, 1.2vw, 20px);
    line-height:1.3;
    color:#EDEDF3;
}
.product-card__brand{
    font-weight:var(--as-fw-regular, 400);
    letter-spacing:0.02em;
    font-size:clamp(11px, 0.9vw, 14px);
    color:var(--as-grey-300, #777777);
    text-transform:uppercase;
    margin-top:2px;
}
.product-card__price{
    font-weight:var(--as-fw-medium, 500);
    font-size:clamp(16px, 1.2vw, 20px);
    color:var(--as-amaranth, #e62249);
    margin-top:16px;
}
/* Bottom pad on card: via ATC or padding fallback */
.promo-banner__product-card:not(:has(.product-card__atc)){ padding-bottom:var(--as-spacing-md-plus, 24px); }

/* --- Product card : ATC button --- */
.product-card__atc{
    display:flex; align-items:center; gap:var(--as-spacing-sm, 8px);
    justify-self:end;                          /* flush right in grid */
    margin:var(--as-spacing-sm, 12px) calc(var(--as-spacing-lg, 32px) * -1) 0 0; /* cancel parent right padding */
    padding:0; border:0; cursor:pointer;
    background:var(--as-amaranth, #e62249);
    /* Radius top-left only — right edge flush with the card (now flush with the
       screen edge on desktop), so the whole right side is a clean vertical line.
       The ≤991 rule re-rounds the bottom-right where the card keeps a margin. */
    border-radius:var(--as-radius-main, 8px) 0 0 0;
    color:#fff;
    font-size:clamp(12px, 0.95vw, 13px);
    font-weight:var(--as-fw-semibold, 600);
    letter-spacing:.3px;
    text-transform:uppercase;
    transition:background var(--as-transition-fast, .2s);
    overflow:hidden;
}
/* Icon-only (no label) */
.product-card__atc:not(:has(.product-card__atc-label)){
    width:50px; height:50px; justify-content:center;
}
/* With label */
.product-card__atc:has(.product-card__atc-label){
    padding:0 14px 0 0; height:50px;
}
.product-card__atc-icon{
    display:flex; align-items:center; justify-content:center;
    width:50px; height:50px; flex-shrink:0;
}
.product-card__atc-icon::before{
    content:''; display:block; width:22px; height:28px;
    background:#fff;
    -webkit-mask-image:url('../img/addtocart-icon.svg');
    mask-image:url('../img/addtocart-icon.svg');
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
}
.product-card__atc:hover,
.product-card__atc:focus-visible{
    background:var(--as-amaranth-hover, #c91d3e); outline:none;
}
.product-card__atc:focus-visible{ box-shadow:0 0 0 3px var(--as-amaranth-soft, #FCE5EB); }
.product-card__atc:active{ background:var(--as-amaranth-active, #a8162f); }
.product-card__atc:disabled{ opacity:.6; cursor:not-allowed; }

/* ====== HERO – Tablet/Mobile : stack vertical (Lot D V1) ====== */
@media (max-width: 991px){
    .promo-banner{
        /* Stack vertical : image above, content below — preserve product_card overlay
           floating bottom-right of image. Fluid heights for 345→991 range. */
        min-height:auto;
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
        grid-template-areas:
            "media"
            "content";
        height:auto;
    }
    .promo-banner__media{
        /* width:100% forces the figure to fill the stacked column. Without it the
           aspect-ratio + max-height cap shrinks the figure's WIDTH (cream gap on the
           right), and the now-sibling product card — aligned to the banner column —
           would straddle the image edge. Full-width keeps the card over the image
           (object-fit:cover crops the height). */
        width:100%;
        aspect-ratio: 4 / 3;
        height:auto;
        max-height:60vh;
    }
    .promo-banner__content{
        /* On mobile content moves UNDER media (no longer overlays dark image)
           → keep cream BG inherited from parent + grey-900 text for readability */
        padding-inline:var(--as-container-home-pad, clamp(16px, 4vw, 32px));
        padding-block:clamp(20px, 4vw, 32px);
        gap:clamp(12px, 1.6vw, 20px);
        color:var(--as-grey-900);
        background:transparent;
        max-width:none;
    }
    .promo-banner__title{ font-size:clamp(22px, 5vw, 32px); line-height:1.2; }
    .promo-banner__text{ font-size:clamp(13px, 3vw, 15px); line-height:1.4; }

    .promo-banner__media > picture{ width:100%; height:100%; }

    .promo-banner__product-card{
        /* On stacked mobile the card is NOT sticky: it overlays the bottom-right of
           the image via grid placement (grid-area:media + align/justify-self:end).
           position:relative (not static) keeps it painted above the figure (z-index). */
        position:relative;
        top:auto;
        align-self:end;
        justify-self:end;
        margin:0 clamp(8px, 2vw, 16px) clamp(8px, 2vw, 16px) 0;
        width:clamp(220px, 60vw, 320px);
        padding:var(--as-spacing-md, 16px) var(--as-spacing-md-plus, 20px) 0;
        border-radius:var(--as-radius-main, 8px);
    }
    .product-card__atc{
        margin-right:calc(var(--as-spacing-md-plus, 20px) * -1);
        border-radius:var(--as-radius-main, 8px) 0 var(--as-radius-main, 8px) 0;
    }
}

/* Petit mobile ≤575 : card s'attache flush right de l'image, padding réduit */
@media (max-width: 575px){
    .promo-banner__product-card{
        margin-right:0;
        margin-bottom:clamp(12px, 4vw, 24px);
        padding:var(--as-spacing-md, 16px);
        border-radius:var(--as-radius-main, 8px) 0 0 var(--as-radius-main, 8px);
    }
    .product-card__atc{
        margin-right:calc(var(--as-spacing-md, 16px) * -1);
        border-radius:var(--as-radius-main, 8px) 0 0 0;
    }
}

/* ====== UNIVERS (Lot D V1) ====== */
.alh-universe{
    /*
     * Objectif UX (Lot D V1) :
     * - Container fluide 345→2400 via --as-container-home-pad token
     * - Cards 317px min desktop (lisible, badges sur 1 ligne), peek prochain item mobile
     * - Bannière Univers : hauteur alignée sur la carte produit (sync JS)
     * - Header : icon + title typo clamp pour scale uniforme
     */
    --alh-gap:var(--as-spacing-md, 16px);
    --alh-card-w:317px;
    --alh-card-h:auto; /* synchronisé en JS sur .thumbnail-container (desktop) */

    margin-block:clamp(28px, 3vw, 44px);
    padding-inline:var(--as-container-home-pad, clamp(16px, 3.5vw, 64px));
}
.alh-universe__header{
    display:flex;
    align-items:center;
    gap:var(--as-spacing-md, 16px);
    margin-bottom:clamp(20px, 2.6vw, 44px);
}
.alh-universe__icon{ width:clamp(22px, 1.8vw, 32px); height:auto; }
.alh-universe__title{
    margin:0;
    text-transform:initial;
    display:flex;
    align-items:center;
    /* Figma cible h2 32px ; scale 20→32 entre 575 et 1920 */
    font-family:var(--as-font-family, inherit);
    font-size:clamp(20px, 2.2vw, 32px);
    font-weight:var(--as-fw-medium, 500);
    color:var(--as-grey-900);
    letter-spacing:-0.01em;
    line-height:1.2;
}

.alh-universe__grid{
    display:grid;
    gap:var(--alh-gap);
    align-items:start;
    grid-template-columns:var(--alh-card-w) 1fr;
}
.alh-universe__grid--no-banner{ grid-template-columns:1fr; }

@media (max-width: 991px){
    /* Tablette/mobile: une seule colonne + carte plus large (peek du prochain item via scroll) */
    .alh-universe{ --alh-card-w: clamp(220px, 60vw, 300px); }
}
@media (max-width: 767px){
    .alh-universe{ --alh-card-w: clamp(220px, 78vw, 320px); }
}

@media (max-width: 576px){
    /* Phones : on garde des cartes grandes (peek du suivant) au lieu de miniatures tassées */
    .alh-universe{ --alh-card-w: clamp(240px, 86vw, 340px); }
}

/* Bannière univers = carte (Lot D V1 tokens Lot B) */
.alh-universe__banner{
    margin:0;
    border-radius:var(--as-radius-main, 8px);
    overflow:hidden;
    background:var(--as-grey-100, #f4f4f4);
    position:relative;
    display:flex;
    flex-direction:column;
    box-shadow:var(--as-shadow-soft, 0 2px 8px rgba(0,0,0,.06));
}

/* Si la bannière est cliquable (lien), l'ancre doit être block pour conserver la hauteur */
.alh-universe__banner > a.alh-universe__banner-link{ display:block; width:100%; line-height:0; }
.alh-universe__banner-link:hover{ text-decoration:none; }
.alh-universe__banner > a.alh-universe__banner-link picture{ display:block; width:100%; }
.alh-universe__banner > a.alh-universe__banner-link img{ width:100%; height:100%; object-fit:cover; display:block; }
.alh-universe__banner > picture{ display:block; width:100%; }
.alh-universe__banner > picture > img{ width:100%; height:100%; object-fit:cover; display:block; }
.alh-universe__banner-caption{
    position:static;
    padding:var(--as-spacing-md-plus, 20px) var(--as-spacing-lg, 32px);
    background:#FFFFFF;
}
.alh-universe__banner-title{
    font-weight:var(--as-fw-semibold, 600);
    color:var(--as-grey-900);
    font-size:clamp(15px, 1.3vw, 18px);
    line-height:1.25;
}
.alh-universe__banner-sub{
    font-size:clamp(11px, 0.9vw, 13px);
    color:var(--as-grey-500);
    text-transform:uppercase;
    letter-spacing:0.02em;
}

@media (min-width: 992px){

    /* figure = colonne, hauteur fixe */
    .alh-universe__banner{
        height: var(--alh-card-h);
        display:flex;
        flex-direction:column;
        overflow:hidden;
        background:#fff; /* évite tout “gris” résiduel */
    }

    /* Variante AVEC lien */
    .alh-universe__banner > a.alh-universe__banner-link{
        flex: 1 1 auto;
        display:block;
        width:100%;
        line-height:0;
        min-height:0; /* important en flex pour éviter des débordements */
    }
    .alh-universe__banner > a.alh-universe__banner-link picture{
        display:block;
        width:100%;
        height:100%;
    }
    .alh-universe__banner > a.alh-universe__banner-link img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /* Variante SANS lien (picture direct enfant du figure) */
    .alh-universe__banner > picture{
        flex: 1 1 auto;
        display:block;
        width:100%;
        height:auto;      /* clé : pas height:100% ici */
        min-height:0;     /* clé : empêche l’overflow en flex */
        line-height:0;
    }
    .alh-universe__banner > picture > img{
        display:block;
        width:100%;
        height:100%;      /* l’image couvre la zone flex restante */
        object-fit:cover;
    }

    /* Caption en bas, hors image */
    .alh-universe__banner .alh-universe__banner-caption{
        position:static;
        background:#fff;
        padding:16px 18px;
    }
}

@media (max-width:991px){
    .tags--cta .tag{ font-size:clamp(12px, 2vw, 13px); }
    .alh-universe__grid{ grid-template-columns:1fr; }
    .alh-universe{
        padding-inline:var(--as-container-home-pad, clamp(12px, 4vw, 24px));
        margin-block:var(--as-spacing-md, 16px);
    }
    .alh-universe__banner .alh-universe__banner-caption{ padding:var(--as-spacing-md-plus, 20px); }
}

/* ===== Banner v2 – layout grid, centrage vertical & mobile safe ===== */
:root{
    --bn2-min-h: clamp(320px, 48vw, 560px);  /* hauteur plancher du visuel */
    --bn2-pad-x: clamp(12px, 3vw, 24px);
    --bn2-pad-y: clamp(10px, 2.5vw, 20px);
    --bn2-logo-nudge-x: 0px;                 /* mets -6/-10px si le SVG a du blanc à gauche */
}

/* Le <figure> devient une grille qui superpose image & caption (Lot D V1 fluid padding) */
.alh-banner--v2{
    display:grid;
    padding:var(--as-container-home-pad, clamp(16px, 3.5vw, 64px));
    overflow:hidden;
    position:relative;
    background:#ffffff;
}
.alh-banner--v2 > picture,
.alh-banner-v2-caption{ grid-area:1 / 1; }  /* superposés */

/* L'image couvre TOUJOURS toute la hauteur disponible */
.alh-banner--v2 > picture{
    width:100%;
    min-height:var(--bn2-min-h);
    height:100%; /* s’étire si le contenu est plus haut */
}
.alh-banner--v2 picture > img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;border-radius: 12px;
}

/* Caption : plus d'absolu -> centré verticalement, aligné à gauche */
.alh-banner-v2-caption{
    position:static; /* remplace l’absolu précédent */
    display:grid;
    align-content:center;   /* centrage vertical du bloc */
    justify-content:start;  /* aligné à gauche */
    gap:clamp(12px, 2.5vw, 24px);
    padding:clamp(32px, 5vw, 65px) clamp(20px, 3.5vw, 48px);
    max-width:min(760px, 92%);
    color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Logo collé à gauche (nudge si besoin) */
.alh-banner-v2-logo{
    display:block;
    max-height:clamp(36px, 8vw, 75px);
    width:auto;
    margin-left:var(--bn2-logo-nudge-x);
}

/* Titres + CTA responsives */
.alh-banner-title-container{ display:flex; flex-direction:column; gap:10px; }
.alh-banner-v2-sub{ font-size:clamp(12px, 1.8vw, 16px); text-transform:uppercase; }
.alh-banner-v2-title{ font-size:clamp(22px, 4.2vw, 36px); font-weight:500; line-height:1.12; }

.alh-banner-v2-cta{
    display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px, 1.5vw, 16px);
    margin-top:clamp(4px, 1vw, 8px);
}
.alh-banner-v2-price{ font-size:clamp(18px, 3vw, 28px); color:var(--as-amaranth, #E62249); font-weight:400; }
.alh-banner-v2-btn{
    display:inline-block;
    padding:clamp(10px, 1.5vw, 12px) clamp(16px, 2vw, 20px);
    border-radius:var(--as-radius-main, 8px);
    background:var(--as-white, #ffffff);
    color:var(--as-grey-900, #0F0F0F);
    text-decoration:none; font-weight:600; font-size:16px; text-transform:uppercase;
    transition:background .2s ease, color .2s ease;
}
.alh-banner-v2-btn:hover{ background:var(--as-amaranth-hover, #C51F41); color:#ffffff; }

/* Mobile : marges réduites, image = au moins la hauteur du contenu + un plancher confortable */
@media (max-width: 991px){
    :root{ --bn2-min-h: clamp(300px, 58vw, 480px); } /* un peu plus raisonnable */
    .alh-banner--v2{ margin: clamp(8px, 3vw, 16px); }
    .alh-banner-v2-caption{ max-width:100%; padding:16px; }
    .alh-universe__banner picture{max-height: 150px}


}

/* ============================================================
   Lot D.4 — Best Seller pill (section "Kits du moment")
   Figma node 270:5523 + audit docs/refonte-v1/lot-D-homepage-audit.md
   ------------------------------------------------------------
   Pastille papaya en haut-droite de la 1ère carte produit d'une
   section flaggée `is_best_seller_section=1` côté BO alterhome.
   Tokens Lot B (papaya, grey-900, fw-semibold, radius-pill,
   shadow-soft) avec fallbacks hex préservés (compat fresh deploy
   sans alter-tokens.css chargé).
   ============================================================ */
.alh-universe__slider--best-seller .ac-track > .ac-item:first-child{
    position:relative;
}
.alh-universe__best-seller{
    position:absolute;
    top:clamp(8px, 1.1vw, 16px);
    right:clamp(8px, 1.1vw, 16px);
    z-index:2;
    display:inline-flex;
    align-items:center;
    height:auto;
    padding:clamp(4px, 0.4vw, 6px) clamp(8px, 0.9vw, 12px);
    background:var(--as-papaya, #FFEFD0);
    color:var(--as-grey-900, #0F0F0F);
    font-family:var(--as-font-family, inherit);
    font-size:clamp(10px, 0.85vw, 12px);
    font-weight:var(--as-fw-semibold, 600);
    line-height:1.2;
    letter-spacing:0.04em;
    text-transform:uppercase;
    border-radius:var(--as-badge-radius-pill, 999px);
    box-shadow:var(--as-shadow-soft, 0 2px 8px rgba(0,0,0,.06));
    pointer-events:none;
    white-space:nowrap;
}