@font-face {
    font-family: "BFC Grotesk";
    src: url("space-grotesk.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

/* bord gauche du plan, fondu dans le bois une fois l'abri décalé */
@property --fondu {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.bfc-pop {
    --encre: #f3ede4;
    --doux: #cbc2b4;
    --trait: rgba(243, 237, 228, .5);
    --fond: #15120f;
    --voile: rgba(9, 8, 7, .86);
    --entree: cubic-bezier(.16, 1, .3, 1);
    --pan: cubic-bezier(.62, 0, .24, 1);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--voile);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: "BFC Grotesk", "Space Grotesk", system-ui, sans-serif;
    color: var(--encre);
    opacity: 0;
    transition: opacity .32s ease;
}
.bfc-pop[hidden] { display: none; }
.bfc-pop.est-ouvert { opacity: 1; }
.bfc-pop.est-ferme { opacity: 0; transition-duration: .22s; }

.bfc-pop__boite {
    position: relative;
    width: min(1080px, 100%);
    height: min(640px, calc(100dvh - 48px));
    overflow: hidden;
    container-type: inline-size;
    border-radius: 3px;
    background: var(--fond) url("popup-bois.jpg") center / cover no-repeat;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
    transform: translateY(18px) scale(.985);
    transition: transform .62s var(--entree);
}
.bfc-pop.est-ouvert .bfc-pop__boite { transform: none; }
.bfc-pop.est-ferme .bfc-pop__boite { transform: translateY(8px); transition-duration: .22s; }

/* fermeture vers la barre du haut : la boîte rétrécit jusqu'au titre « Black Friday » (popup.js pose --vers-*) */
.bfc-pop.est-ferme.vers-barre {
    opacity: 1;
    background-color: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background-color .5s ease, backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
/* elle se pose sur le titre (fin freinée) puis s'efface sur place : on la voit arriver */
.bfc-pop.est-ferme.vers-barre .bfc-pop__boite {
    transform: translate(var(--vers-x), var(--vers-y)) scale(var(--vers-s));
    opacity: 0;
    transition: transform .5s cubic-bezier(.5, 0, .2, 1), opacity .12s linear .4s;
}

/* Scène : le drap centré, puis l'abri glisse à droite */
.bfc-pop__scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.bfc-pop__scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 9, 8, .8), rgba(10, 9, 8, 0) 34%);
    pointer-events: none;
}
.bfc-pop__plan {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 2560 / 1264;
    translate: clamp(calc(100cqw - 100%), calc(50cqw - var(--drap, 57%)), 0px) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--fondu) - 12%), #000 var(--fondu));
    mask-image: linear-gradient(90deg, transparent calc(var(--fondu) - 12%), #000 var(--fondu));
    transition: translate 1.6s var(--pan), --fondu 1.6s var(--pan);
}
[data-etat="revele"] .bfc-pop__plan {
    translate: calc(72cqw - var(--pose, 60%)) 0;
    --fondu: 34%;
}
.bfc-pop__video,
.bfc-pop__fin {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bfc-pop__fin { opacity: 0; transition: opacity .5s ease; }
.bfc-pop__fin[hidden] { display: none; }
.bfc-pop__fin.est-visible { opacity: 1; }

/* Avant le clic : « Voir l'offre » sous le drap */
.bfc-pop__couvert {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr;
    transition: opacity .3s ease, visibility 0s linear 0s;
}
.bfc-pop__couvert > .bfc-pop__dedans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 30px;
    min-height: 0;
    overflow: hidden;
    padding: 0 24px 30px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease .35s, transform .7s var(--entree) .35s;
}
.bfc-pop.est-ouvert .bfc-pop__couvert > .bfc-pop__dedans { opacity: 1; transform: none; }
.bfc-pop__boite:not([data-etat="couvert"]) .bfc-pop__couvert {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s, grid-template-rows .8s var(--pan);
}

.bfc-pop__voir,
.bfc-pop__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid var(--encre);
    border-radius: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bfc-pop__voir svg,
.bfc-pop__plus svg { transition: transform .3s var(--entree); }
.bfc-pop__voir:hover svg,
.bfc-pop__plus:hover svg { transform: translateX(4px); }
.bfc-pop__voir { background: var(--encre); color: var(--fond); }
.bfc-pop__voir:hover { background: #fff; border-color: #fff; }
.bfc-pop__plus { background: none; border-color: var(--trait); color: var(--encre); }
.bfc-pop__plus:hover,
.bfc-pop__plus:focus-visible { background: var(--encre); border-color: var(--encre); color: var(--fond); }

.bfc-pop__semaine {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--doux);
    text-decoration: underline;
    text-decoration-color: rgba(203, 194, 180, .45);
    text-underline-offset: 4px;
    cursor: pointer;
}
.bfc-pop__semaine:hover { color: var(--encre); text-decoration-color: currentColor; }

/* Après le clic : les infos à gauche, sur le bois */
.bfc-pop__texte {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 42%;
    display: grid;
    grid-template-rows: 1fr;
}
.bfc-pop__texte > .bfc-pop__dedans {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 40px 0 40px 56px;
}
.bfc-pop__texte .bfc-pop__dedans > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .9s var(--entree);
}
[data-etat="revele"] .bfc-pop__texte .bfc-pop__dedans > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(.55s + var(--i, 0) * .09s);
}

.bfc-pop__logo { display: block; width: var(--logo, 128px); height: auto; }

.bfc-pop__titre {
    margin: 26px 0 28px;
    padding: 0;
    font-family: inherit;
    font-size: clamp(60px, 8.8cqw, 96px);
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--encre);
}

/* Compte à rebours */
.bfc-pop__rebours {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 24px;
}
.bfc-pop__unite { display: grid; justify-items: center; gap: 10px; }
.bfc-pop__chiffres {
    display: flex;
    font-size: clamp(40px, 5cqw, 54px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.bfc-pop__c {
    display: inline-grid;
    width: .62em;
    height: 1.08em;
    overflow: hidden;
    justify-items: center;
    align-items: center;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.bfc-pop__c > span { grid-area: 1 / 1; }
.bfc-pop__sep {
    font-size: clamp(30px, 3.8cqw, 42px);
    font-weight: 300;
    line-height: 1.3;
    color: var(--trait);
}
.bfc-pop__lib {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--doux);
}

.bfc-pop__intro {
    margin: 0 0 26px;
    max-width: 34ch;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--doux);
}
.bfc-pop__intro strong { font-weight: 600; color: var(--encre); }

.bfc-pop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

.bfc-pop__fermer {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(12, 11, 10, .5);
    color: var(--encre);
    cursor: pointer;
    transition: background-color .2s ease;
}
.bfc-pop__fermer:hover { background: rgba(12, 11, 10, .8); }
.bfc-pop :focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.bfc-pop__lecteur {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Téléphone et tablette : l'abri en haut, le drap tombe, les infos se déplient dessous */
@media (max-width: 900px) {
    .bfc-pop { padding: 12px; align-items: end; }
    .bfc-pop__boite {
        --h: clamp(200px, 76vw, 340px);
        height: auto;
        max-height: calc(100dvh - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .bfc-pop__scene {
        position: relative;
        height: var(--h);
        -webkit-mask-image: linear-gradient(#000 80%, transparent);
        mask-image: linear-gradient(#000 80%, transparent);
    }
    .bfc-pop__scene::after { content: none; }
    [data-etat="revele"] .bfc-pop__plan {
        translate: clamp(calc(100cqw - 100%), calc(50cqw - var(--pose, 60%)), 0px) 0;
        --fondu: 0%;
    }
    .bfc-pop__couvert,
    .bfc-pop__texte {
        position: static;
        width: auto;
        overflow: hidden;
        transition: grid-template-rows .8s var(--pan);
    }
    /* le bouton garde sa place pendant la chute : la boîte ne fait que grandir, sans à-coup */
    [data-etat="revele"] .bfc-pop__couvert { grid-template-rows: 0fr; }
    .bfc-pop__couvert > .bfc-pop__dedans {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 6px 22px 16px;
    }
    .bfc-pop__texte { grid-template-rows: 0fr; }
    [data-etat="revele"] .bfc-pop__texte { grid-template-rows: 1fr; }
    .bfc-pop__texte > .bfc-pop__dedans { justify-content: flex-start; padding: 0 22px 24px; }
    .bfc-pop__logo { width: calc(var(--logo, 128px) * .86); }
    .bfc-pop__titre { margin: 18px 0 20px; font-size: clamp(42px, 12.5vw, 64px); }
    .bfc-pop__rebours { gap: 2px; margin-bottom: 20px; }
    .bfc-pop__chiffres { font-size: clamp(36px, 10.5vw, 48px); }
    .bfc-pop__sep { font-size: clamp(28px, 8vw, 36px); }
    .bfc-pop__lib { font-size: 10px; letter-spacing: .16em; }
    .bfc-pop__intro { font-size: 15px; margin-bottom: 18px; }
    .bfc-pop__actions { flex-direction: column; align-items: stretch; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .bfc-pop,
    .bfc-pop__boite,
    .bfc-pop__plan,
    .bfc-pop__couvert,
    .bfc-pop__couvert > .bfc-pop__dedans,
    .bfc-pop__texte,
    .bfc-pop__texte .bfc-pop__dedans > * {
        transform: none;
        transition: opacity .2s ease, visibility 0s;
        transition-delay: 0s !important;
    }
}