/*
 * ============================================================================
 *  FLOW « OFFRES DU MOMENTS » — landing, listing, filtres (3 écrans).
 *  Accent secondaire BLEU promo (#1d6fe0) pour prix/CTA d'offre et
 *  newsletter ; réutilise le socle act-* / pl-card / home-*.
 * ============================================================================
 */

.of-page {
    --promo-blue: #1d6fe0;
    --flash-bg: #fef6e7;
    --flash-orange: #f5a31e;
}

/* ===========================================================================
 *  HERO (écran 1) : photo valises + voile blanc gauche + blob orange -50%.
 * ======================================================================== */
.of-hero { position: relative; min-height: 430px; display: flex; align-items: center; overflow: hidden; }
.of-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: 0; }
.of-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .82) 32%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 78%);
}
.of-hero__inner { position: relative; z-index: 2; width: 100%; }
.of-hero__title { max-width: 520px; margin: 0 0 var(--pl-sp-8); font-size: 42px; font-weight: var(--pl-fw-bold); color: var(--pl-primary); }
.of-hero__subtitle { max-width: 460px; margin: 0 0 var(--pl-sp-20); font-size: var(--pl-fs-body); color: var(--pl-text-secondary); }
.of-hero__pills { display: flex; gap: 10px; flex-wrap: wrap; }
.of-hero__pills .home-pill { border: 1px solid var(--pl-border); border-radius: var(--pl-radius-pill); }

/* Blob orange organique en haut à droite. */
.of-hero__blob { position: absolute; z-index: 2; top: 100px; right: 70px; width: 250px; height: 235px; }
.of-hero__blob-shape { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(8deg); filter: drop-shadow(0 8px 18px rgba(249, 115, 22, .35)); }
.of-hero__blob-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-align: center; color: var(--pl-white);
    transform: rotate(-8deg);
}
.of-hero__blob-upto { font-size: 14px; font-weight: var(--pl-fw-medium); }
.of-hero__blob-pct { font-size: 54px; font-weight: 800; line-height: 1; }
.of-hero__blob-note { max-width: 170px; font-size: 11px; }
.of-hero__blob-spark { position: absolute; border: 2px solid var(--pl-cta); border-radius: 50%; }
.of-hero__blob-spark--1 { top: -10px; left: -14px; width: 14px; height: 14px; border-bottom-color: transparent; transform: rotate(30deg); }
.of-hero__blob-spark--2 { bottom: 2px; right: -12px; width: 10px; height: 10px; border-top-color: transparent; }

.of-breadcrumb { padding-top: var(--pl-sp-16); }

/* ===========================================================================
 *  CATEGORIES POPULAIRES : pastille pleine colorée + volume d'activités.
 * ======================================================================== */
.of-cats { display: flex; gap: var(--pl-sp-16); overflow-x: auto; scrollbar-width: none; }
.of-cats::-webkit-scrollbar { display: none; }
.of-cat {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: var(--pl-sp-4);
    min-width: 197px;
    padding: var(--pl-sp-16) var(--pl-sp-12);
    background: #f8fafc;
    border-radius: var(--pl-radius-md);
    text-decoration: none;
}
.of-cat__icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--pl-white);
    margin-bottom: var(--pl-sp-4);
}
.of-cat__icon--violet { background: var(--pl-action); }
.of-cat__icon--gold { background: #eab308; }
.of-cat__icon--green { background: #16a34a; }
.of-cat__icon--blue { background: #2563eb; }
.of-cat__icon--orange { background: #f97316; }
.of-cat__icon--rose { background: #ec4899; }
.of-cat__name { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-semibold); color: var(--pl-text); text-align: center; }
.of-cat__count { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }

.of-section-title { margin-bottom: var(--pl-sp-28); }

/* ===========================================================================
 *  <OfferCard> : badge palier, countdown, prix promo bleu, CTA outline bleu.
 * ======================================================================== */
.of-card { position: relative; }
.of-card__badge {
    position: absolute; top: 12px; left: 12px;
    padding: 3px 10px;
    font-size: 11px; font-weight: var(--pl-fw-bold);
    color: var(--pl-white);
    border-radius: 6px;
}
.of-card__badge.is-blue { background: var(--promo-blue, #1d6fe0); }
.of-card__badge.is-orange { background: #f97316; }
.of-card__badge.is-green { background: #16a34a; }
.of-card__badge.is-deep { background: #f97316; }
.of-card__badge.is-red { background: var(--pl-error); }

.of-card__ends { color: var(--pl-error); font-weight: var(--pl-fw-bold); }

.of-card__prices {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--pl-border);
    padding-top: var(--pl-sp-12);
    margin-top: var(--pl-sp-8);
}
.of-card__old { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); text-decoration: line-through; }
.of-card__price { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--promo-blue, #1d6fe0); }

.of-card__cta {
    display: flex; align-items: center; justify-content: center;
    height: 42px;
    margin-top: var(--pl-sp-12);
    background: var(--pl-white);
    border: 1.5px solid var(--promo-blue, #1d6fe0);
    border-radius: var(--pl-radius-sm);
    color: var(--promo-blue, #1d6fe0);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    text-decoration: none;
}
.of-card__cta:hover { background: rgba(29, 111, 224, .06); }

/* ===========================================================================
 *  BANNIÈRE VENTE FLASH.
 * ======================================================================== */
.of-flash {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--pl-sp-40, 40px) var(--pl-sp-32); align-items: center;
    background: var(--flash-bg, #fef6e7);
    border-radius: 16px;
    padding: 56px 60px;
    overflow: hidden;
}
.of-flash__promo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.of-flash__panel {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--pl-sp-8);
    width: 100%; max-width: 490px;
    padding: 56px 36px;
    background: var(--flash-orange, #f5a31e);
    transform: skewX(-6deg);
}
.of-flash__panel > * { transform: skewX(6deg); }
.of-flash__upto {
    padding: 4px 14px;
    background: var(--pl-white);
    color: var(--pl-text);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    border-radius: 4px;
}
.of-flash__pct { font-size: 96px; font-weight: 800; line-height: 1; color: var(--pl-white); }
.of-flash__note { font-size: var(--pl-fs-body-sm); color: var(--pl-white); }
.of-flash__bolt { position: absolute; z-index: 2; width: 150px; height: 150px; color: var(--flash-orange); }
.of-flash__bolt--left { top: -44px; left: -30px; transform: rotate(-8deg); }
.of-flash__bolt--right { bottom: -42px; right: -24px; transform: rotate(12deg); }

.of-flash__title { margin: 0 0 var(--pl-sp-4); font-size: 44px; font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.of-flash__tagline { margin: 0 0 var(--pl-sp-12); font-size: var(--pl-fs-body); color: var(--pl-text-secondary); }
.of-flash__desc { margin: 0 0 var(--pl-sp-20); max-width: 420px; font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); }
.of-flash__count { display: flex; gap: var(--pl-sp-12); margin-bottom: var(--pl-sp-24); }
.of-flash__cell {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    min-width: 62px;
    padding: 10px 8px;
    background: var(--flash-orange, #f5a31e);
    border-radius: var(--pl-radius-sm);
    color: var(--pl-white);
    font-size: 10px;
}
.of-flash__cell strong { font-size: 20px; font-weight: var(--pl-fw-bold); line-height: 1.2; }

/* ===========================================================================
 *  NEWSLETTER.
 * ======================================================================== */
.of-news-wrap { padding-block: var(--pl-sp-24) 64px; }
.of-news {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--pl-sp-24);
    min-height: 230px;
    padding: 48px 32px;
    background: var(--promo-blue, #1d6fe0);
    border-radius: 16px;
    overflow: hidden;
}
.of-news__circles { position: absolute; left: -40px; bottom: -60px; width: 320px; height: 320px; pointer-events: none; }
.of-news__palms { position: absolute; top: 20px; right: 28px; width: 76px; height: 76px; pointer-events: none; }
.of-news__title {
    position: relative; z-index: 1;
    margin: 0;
    text-align: center;
    font-size: 38px; font-weight: var(--pl-fw-bold); line-height: 1.25;
    color: var(--pl-white);
}
.of-news__form { position: relative; z-index: 1; width: 100%; max-width: 560px; }
.of-news__bar {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    height: 56px;
    padding: 6px 8px 6px 16px;
    background: var(--pl-white);
    border-radius: var(--pl-radius-sm);
}
.of-news__bar .pl-icon { color: var(--pl-text-secondary); flex-shrink: 0; }
.of-news__bar input { flex: 1; min-width: 0; border: 0; outline: 0; font-family: var(--pl-font-family); font-size: var(--pl-fs-body-sm); color: var(--pl-text); }
.of-news__submit {
    padding: 10px 18px;
    background: var(--promo-blue, #1d6fe0);
    color: var(--pl-white);
    border: 0; border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-semibold);
    cursor: pointer;
}
.of-news__submit:hover { background: #1861c4; }
.of-news__msg { margin: var(--pl-sp-8) 0 0; text-align: center; font-size: var(--pl-fs-body-sm); color: var(--pl-white); }
.of-news__msg.is-error { color: #ffd7d7; }

/* ===========================================================================
 *  ÉCRAN 3 : sidebar de filtres en rail pleine hauteur à gauche.
 * ======================================================================== */
.of-listing.has-filters { display: flex; align-items: stretch; }
.of-main { flex: 1; min-width: 0; }

.of-filters {
    border: 0;
    border-right: 1px solid var(--pl-border);
    border-radius: 0;
    margin-block: 0;
    width: 296px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 100px);
    z-index: 40;
}
.of-filters__label { margin: 0; font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-bold); color: var(--pl-text); }

/* Chip « Filtre » : libellés fermé/ouvert sur une seule ligne. */
.of-chip-default, .of-chip-open { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Slider budget en BLEU promo sur ce flow (maquette). */
.of-filters .act-budget__range { background: var(--promo-blue, #1d6fe0); }
.of-filters .act-budget__slider input[type="range"]::-webkit-slider-thumb { background: var(--promo-blue, #1d6fe0); }
.of-filters .act-budget__slider input[type="range"]::-moz-range-thumb { background: var(--promo-blue, #1d6fe0); }

/* Grille 4 colonnes fermée → 3 colonnes de 6 cartes sidebar ouverte. */
.of-listing.has-filters .of-grid { grid-template-columns: repeat(3, 1fr); }
.of-listing.has-filters .of-grid > :nth-child(n+7) { display: none; }
.of-listing.has-filters .act-head .home-container,
.of-listing.has-filters .of-main .home-container { max-width: none; }

@media (max-width: 1100px) {
    .of-flash { grid-template-columns: 1fr; }
    .of-hero__blob { display: none; }
    .of-listing.has-filters { display: block; }
    .of-filters { width: auto; position: static; max-height: none; border-right: 0; }
}