/* ============================================================================
   LANDING SIREXE 2026 - mobilier.africa
   Page de campagne : location de mobilier de stand pour les exposants du salon.
   N'utilise que les tokens du design system (monochrome). Aucune couleur en dur
   hors des voiles sur photo et du vert WhatsApp (canal, pas identite de marque).
   ============================================================================ */

/* Le hero absorbe la hauteur du header : la photo demarre en haut de page. */
.sirexe-page { padding-top: 0; }

/* ============================================================================
   HERO - photo industrielle + degrade sombre
   ============================================================================ */
.sirexe-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--top-bar-height) + var(--spacing-2xl));
    background:
        linear-gradient(180deg, rgba(12,12,14,.78) 0%, rgba(12,12,14,.72) 40%, rgba(12,12,14,.94) 100%),
        url('/assets/img/sirexe/hero-refinery.webp') center 35% / cover no-repeat;
    background-color: #1d1d1f; /* repli pendant le chargement */
}
.sirexe-hero__crumb { text-align: left; margin-bottom: var(--spacing-lg); }
.sirexe-hero__crumb,
.sirexe-hero__crumb a { color: rgba(255,255,255,.7); }
.sirexe-hero__crumb a:hover { color: #fff; }
.sirexe-hero__crumb .breadcrumb__separator { color: rgba(255,255,255,.4); }

.sirexe-hero .about-hero__badge {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}
.sirexe-hero .about-hero__title,
.sirexe-hero .about-hero__title span { color: #fff; }
.sirexe-hero .about-hero__intro { color: rgba(255,255,255,.9); }

/* CTA primaire : inversion du token sombre, pas une couleur nouvelle */
.sirexe-hero__cta { background: #fff; color: var(--color-bg-dark); }
.sirexe-hero__cta:hover { background: #fff; color: var(--color-bg-dark); box-shadow: 0 10px 28px rgba(0,0,0,.4); }

.sirexe-hero__ghost {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--radius-md);
    color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.sirexe-hero__ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* WhatsApp en icone : canal disponible, pas canal impose */
.sirexe-hero__wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.sirexe-hero__wa svg { width: 22px; height: 22px; }
.sirexe-hero__wa:hover { background: #25d366; border-color: #25d366; }

/* ============================================================================
   BARRE OFFRE - promo + faits utiles, un seul bloc sombre
   ============================================================================ */
.sirexe-promo {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    border-radius: var(--radius-lg);
    margin: var(--spacing-2xl) 0;
}
.sirexe-promo__text { font-size: 1rem; font-weight: 600; max-width: 46ch; }
.sirexe-promo__text span { display: block; margin-top: 4px; color: rgba(255,255,255,.62); font-weight: 400; font-size: .92rem; line-height: 1.5; }
.sirexe-promo__aside { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }

.sirexe-promo__apply {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: #fff; color: var(--color-bg-dark);
    border-radius: var(--radius-md);
    font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-normal);
}
.sirexe-promo__apply:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }

.sirexe-promo__code {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255,255,255,.08);
    border: 1px dashed rgba(255,255,255,.35);
    border-radius: var(--radius-md);
    font-family: monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
    color: #fff; cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.sirexe-promo__code:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.13); }
.sirexe-promo__code:active { transform: scale(.98); }
/* le message vit DANS le bouton : plus de 3e ligne orpheline au wrap */
.sirexe-promo__copy-msg {
    font-size: .78rem; font-family: var(--font-family-base, inherit); font-weight: 600;
    color: #7ee787; opacity: 0; margin-left: var(--spacing-xs);
    transition: opacity var(--transition-fast);
}
.sirexe-promo__copy-msg.is-visible { opacity: 1; }

/* ============================================================================
   FAITS EVENEMENT
   ============================================================================ */
.sirexe-facts {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md); margin: var(--spacing-2xl) 0 0;
}
.sirexe-fact {
    display: flex; align-items: flex-start; gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.sirexe-fact__icon {
    flex-shrink: 0; width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: rgba(58,58,60,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
}
.sirexe-fact__icon svg { width: 20px; height: 20px; }
.sirexe-fact__label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 2px; }
.sirexe-fact__value { font-size: .98rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; }

/* ============================================================================
   CARROUSEL MOBILIER - rail de decouverte (volontairement pauvre en infos :
   pas de panier, pas de badge, pas de devise alternative. Un lookbook, pas un
   catalogue : les cartes packs restent la seule zone de decision.)
   ============================================================================ */
.sirexe-rail-section { overflow: hidden; }
.sirexe-rail__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--spacing-md); text-align: left; margin-bottom: var(--spacing-md);
}
.sirexe-rail__head .about-section__label { margin-bottom: var(--spacing-xs); }
.sirexe-rail__intro { max-width: 62ch; color: var(--color-text-secondary); line-height: 1.7; margin-top: var(--spacing-xs); }
.sirexe-rail__nav { display: flex; gap: var(--spacing-xs); flex: none; }
.sirexe-rail__arrow {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--color-text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
.sirexe-rail__arrow svg { width: 18px; height: 18px; }
.sirexe-rail__arrow:hover { border-color: var(--color-text-primary); }
.sirexe-rail__arrow[disabled] { opacity: .3; cursor: default; }

.sirexe-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.sirexe-chip {
    padding: 7px 14px; border-radius: 999px;
    background: var(--color-bg-primary);
    border: 1px solid var(--border-color);
    font-size: .85rem; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.sirexe-chip:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.sirexe-chip.is-active { background: var(--color-bg-dark); border-color: var(--color-bg-dark); color: var(--color-text-light); }

/* full-bleed a droite : la derniere vignette coupee = affordance de scroll */
.sirexe-rail {
    display: flex; gap: var(--spacing-sm);
    list-style: none; margin: 0;
    padding: 0 var(--spacing-md) var(--spacing-xs) 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sirexe-rail::-webkit-scrollbar { display: none; }

.sirexe-tile { flex: 0 0 200px; scroll-snap-align: start; }
.sirexe-tile.is-hidden { display: none; }
.sirexe-tile__link { display: block; text-decoration: none; color: inherit; }
.sirexe-tile__media {
    display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--color-bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
}
.sirexe-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sirexe-tile__link:hover .sirexe-tile__media img { transform: scale(1.04); }
.sirexe-tile__link:hover .sirexe-tile__media { border-color: var(--color-text-primary); }
.sirexe-tile__name {
    display: block; font-size: .9rem; font-weight: 600; color: var(--color-text-primary);
    line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sirexe-tile__price { display: block; font-size: .82rem; color: var(--color-text-muted); }

.sirexe-tile--more .sirexe-tile__link { height: 100%; }
.sirexe-tile__more-inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--spacing-xs); aspect-ratio: 1 / 1;
    border: 1px dashed var(--border-color); border-radius: var(--radius-md);
    font-size: .88rem; font-weight: 700; color: var(--color-text-secondary);
    text-align: center; padding: var(--spacing-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sirexe-tile--more .sirexe-tile__link:hover .sirexe-tile__more-inner { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.sirexe-tile__more-arrow { font-size: 1.4rem; line-height: 1; }

/* ============================================================================
   PACKS - grille de cartes (et non lignes pleine largeur du catalogue)
   ============================================================================ */
.sirexe-packs-grid { grid-template-columns: repeat(4, 1fr); }

.sirexe-pricing-note {
    max-width: 780px; margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: .9rem; line-height: 1.65; color: var(--color-text-secondary); text-align: left;
}

/* ============================================================================
   SECTIONS DE CONTENU (SEO/GEO)
   ============================================================================ */
.sirexe-prose { max-width: 760px; font-size: 1.02rem; line-height: 1.8; color: var(--color-text-secondary); }
.sirexe-prose p { margin-bottom: var(--spacing-md); }
.sirexe-prose strong { color: var(--color-text-primary); }
.sirexe-source { font-size: .85rem; color: var(--color-text-muted); }

.sirexe-price-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-lg); font-size: .95rem; }
.sirexe-price-table th,
.sirexe-price-table td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); }
.sirexe-price-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; }
.sirexe-price-table td:last-child,
.sirexe-price-table th:last-child { text-align: right; white-space: nowrap; }
.sirexe-price-table .sirexe-price-table__amount { font-weight: 700; color: var(--color-text-primary); }
.sirexe-table-wrap { overflow-x: auto; }

.sirexe-needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.sirexe-need {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.sirexe-need h3 { font-size: 1.02rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); }
.sirexe-need p { font-size: .93rem; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: var(--spacing-sm); }
.sirexe-need a { font-size: .88rem; font-weight: 700; color: var(--color-accent); text-decoration: none; }
.sirexe-need a:hover { text-decoration: underline; }

/* ============================================================================
   ETAPES
   ============================================================================ */
.sirexe-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-xl); position: relative; }
.sirexe-step { text-align: center; padding: var(--spacing-lg); position: relative; z-index: 1; }
.sirexe-step__num {
    width: 44px; height: 44px; margin: 0 auto var(--spacing-md);
    border-radius: 50%; background: var(--color-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
}
.sirexe-step__title { font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); }
.sirexe-step__text { font-size: .92rem; color: var(--color-text-secondary); line-height: 1.6; }

/* ============================================================================
   FAQ - meme markup que product.php (details/summary natif)
   ============================================================================ */
.sirexe-faq__list { max-width: 820px; margin: var(--spacing-xl) auto 0; }
.sirexe-faq__item { border-bottom: 1px solid var(--border-color); }
.sirexe-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
    padding: var(--spacing-md) 0; cursor: pointer; list-style: none;
    font-size: 1rem; font-weight: 600; color: var(--color-text-primary);
}
.sirexe-faq__q::-webkit-details-marker { display: none; }
.sirexe-faq__q svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.sirexe-faq__item[open] .sirexe-faq__q svg { transform: rotate(180deg); }
.sirexe-faq__a { padding: 0 0 var(--spacing-md); font-size: .95rem; line-height: 1.75; color: var(--color-text-secondary); max-width: 72ch; }

/* ============================================================================
   BARRE CTA COLLANTE (mobile)
   ============================================================================ */
.sirexe-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: none; gap: var(--spacing-xs); align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-bottom: calc(var(--spacing-xs) + env(safe-area-inset-bottom));
    background: rgba(20,20,22,.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.12);
}
.sirexe-sticky__cta {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    padding: 13px var(--spacing-md); border-radius: var(--radius-md);
    background: #fff; color: var(--color-bg-dark);
    font-weight: 700; font-size: .95rem; text-decoration: none;
}
.sirexe-sticky__wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
    background: #25d366; color: #fff;
}
.sirexe-sticky__wa svg { width: 22px; height: 22px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (min-width: 1200px) { .sirexe-tile { flex-basis: 240px; } }

@media (max-width: 1100px) {
    .sirexe-packs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .sirexe-rail__nav { display: none; }
    .sirexe-rail__head { align-items: flex-start; }
    .sirexe-facts { grid-template-columns: 1fr; }
    .sirexe-steps { grid-template-columns: 1fr; }
    .sirexe-needs { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sirexe-sticky { display: flex; }
    body { padding-bottom: 76px; }
    .sirexe-promo { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
    .sirexe-hero__crumb { display: none; }
}

@media (max-width: 640px) {
    .sirexe-hero .about-hero__badge { font-size: .7rem; letter-spacing: .04em; line-height: 1.4; padding: var(--spacing-xs) var(--spacing-sm); }
    .sirexe-hero__ghost { padding: var(--spacing-sm) var(--spacing-lg); font-size: .95rem; }
}

@media (max-width: 560px) {
    .sirexe-packs-grid { grid-template-columns: 1fr; }
    .sirexe-tile { flex-basis: 150px; }
    .sirexe-tile__name { font-size: .85rem; }
    /* les chips deviennent un rail : jamais 3 lignes de wrap */
    .sirexe-chips {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-left: calc(-1 * var(--spacing-md));
        padding-left: var(--spacing-md); padding-bottom: 2px;
    }
    .sirexe-chips::-webkit-scrollbar { display: none; }
}

/* ============================================================================
   ACCESSIBILITE
   ============================================================================ */
.sirexe-chip:focus-visible,
.sirexe-rail__arrow:focus-visible,
.sirexe-tile__link:focus-visible,
.sirexe-promo__code:focus-visible,
.sirexe-promo__apply:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.sirexe-hero__ghost:focus-visible,
.sirexe-hero__wa:focus-visible,
.sirexe-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .sirexe-rail { scroll-behavior: auto; }
    .sirexe-tile__link:hover .sirexe-tile__media img { transform: none; }
    .sirexe-promo__apply:hover { transform: none; }
}