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

/* Barre du haut du Black Friday (avant l'offre, pendant, après les premières commandes).
   Collée en haut pendant le défilement : au-dessus de l'en-tête du thème (z-index 1400), sous ses panneaux
   menu, panier et compte (1600). Textes calés à gauche sur l'en-tête, bouton à droite : rien ne bouge
   quand le texte change. */
.bfc-barre {
    --encre: #f3ede4;
    --doux: #ddd5c8;
    --trait: rgba(243, 237, 228, .5);
    --fond: #15120f;
    position: sticky;
    top: 0;
    z-index: 1450;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    grid-template-areas: ". haut plus";
    align-items: center;
    justify-items: center;
    column-gap: 24px;
    height: 60px;
    padding: 0 60px;
    background: var(--fond);
    color: var(--encre);
    font-family: "BFC Grotesk", "Space Grotesk", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.bfc-barre[hidden] { display: none; }
/* une phase à la fois : avant l'offre (compte à rebours), pendant (commandes restantes), après les premières commandes */
.bfc-barre[data-phase="avant"] [data-si]:not([data-si~="avant"]),
.bfc-barre[data-phase="vente"] [data-si]:not([data-si~="vente"]),
.bfc-barre[data-phase="suite"] [data-si]:not([data-si~="suite"]) { display: none; }
.bfc-barre:hover,
.bfc-barre:focus { color: var(--encre); text-decoration: none; }
.bfc-barre:focus-visible { outline: 2px solid var(--encre); outline-offset: -4px; }

/* une ligne centrée sur la page : titre et compte, le bouton à droite */
.bfc-barre__texte { display: contents; }
.bfc-barre__haut { grid-area: haut; display: flex; align-items: baseline; gap: 14px; }

/* le titre de la fin des vidéos drap : gras serré, avec le même reflet de lumière qui le traverse */
.bfc-barre__titre {
    position: relative;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.012em;
    text-transform: uppercase;
}
.bfc-barre__reflet {
    position: absolute;
    inset: -.2em;
    padding: .2em;
    color: #fff;
    text-shadow: 0 0 .2em rgba(255, 255, 255, .85);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 50%, transparent 55%);
    mask-image: linear-gradient(100deg, transparent 45%, #000 50%, transparent 55%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation: bfc-reflet 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* un passage d'environ 1 s, puis 5 s de repos */
@keyframes bfc-reflet {
    0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    18%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes bfc-reflet-bis {
    0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    18%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.bfc-barre__rebours { color: var(--doux); }
.bfc-barre__rebours b {
    color: var(--encre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bfc-barre__court { display: none; }
/* la date et l'offre, pour les lecteurs d'écran seulement (le compte à rebours leur est caché) */
.bfc-barre__lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bfc-barre__plus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    grid-area: plus;
    justify-self: end;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--trait);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bfc-barre__plus svg { flex: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.bfc-barre:hover .bfc-barre__plus,
.bfc-barre:focus-visible .bfc-barre__plus { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.bfc-barre:hover .bfc-barre__plus svg { transform: translateX(4px); }

/* l'en-tête collant du thème (Konte) se cale sous la barre au lieu de passer dessous */
body:has(> #bfc-barre:not([hidden])) .header-sticky--smart.headroom--not-top,
body:has(> #bfc-barre:not([hidden])) .header-sticky--normal.sticky { top: 60px; }
@media (min-width: 783px) {
    .admin-bar .bfc-barre { top: 32px; }
    body.admin-bar:has(> #bfc-barre:not([hidden])) .header-sticky--smart.headroom--not-top,
    body.admin-bar:has(> #bfc-barre:not([hidden])) .header-sticky--normal.sticky { top: 92px; }
}

/* le pop-up vient de se ranger dans le titre : le reflet repart tout de suite (changer de nom relance l'animation) */
.bfc-barre.est-signalee .bfc-barre__reflet { animation-name: bfc-reflet-bis; }

/* mêmes marges que les icônes de l'en-tête Konte : 60, 40 puis 20 px */
@media (max-width: 1199px) {
    .bfc-barre { column-gap: 16px; padding: 0 40px; }
    .bfc-barre__dans,
    .bfc-barre__in { display: none; }
}

@media (max-width: 767px) {
    .bfc-barre { padding: 0 20px; }
}

/* tablette : titre et compte plus petits, date de fin abrégée, bouton réduit à sa flèche (toute la barre est le lien)
   pour garder titre et compte centrés */
@media (max-width: 1023px) {
    .bfc-barre__haut { font-size: 16px; }
    .bfc-barre__titre { font-size: 22px; }
    .bfc-barre__long { display: none; }
    .bfc-barre__court { display: inline; }
    .bfc-barre__plus { justify-content: center; width: 32px; min-height: 0; padding: 0; border: 0; }
    .bfc-barre__plus-texte { display: none; }
    .bfc-barre:hover .bfc-barre__plus,
    .bfc-barre:focus-visible .bfc-barre__plus { background: none; color: var(--encre); }
}

/* téléphone : flèche de 24 px, la largeur reste au titre et au compte */
@media (max-width: 699px) {
    .bfc-barre { grid-template-columns: 24px minmax(0, 1fr) 24px; column-gap: 2px; height: 56px; padding: 0 4px; }
    body:has(> #bfc-barre:not([hidden])) .header-sticky--smart.headroom--not-top,
    body:has(> #bfc-barre:not([hidden])) .header-sticky--normal.sticky { top: 56px; }
    .bfc-barre__haut { gap: 10px; font-size: 15px; }
    .bfc-barre__titre { font-size: 20px; }
    .bfc-barre__dans,
    .bfc-barre__in { display: none; }
    .bfc-barre__plus { width: 24px; }
}

/* petits téléphones : « plus que 149 commandes » tient entre les deux colonnes de la flèche */
@media (max-width: 389px) {
    .bfc-barre__haut { font-size: 14px; }
    .bfc-barre__titre { font-size: 18px; }
}

/* très petits téléphones (320 px) */
@media (max-width: 359px) {
    .bfc-barre__haut { gap: 8px; font-size: 12px; }
    .bfc-barre__titre { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bfc-barre__reflet { display: none; }
    .bfc-barre__plus svg { transition: none; }