/* =========================================
   ZibMarket — Landing page (refonte 04/2026)
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --orange: #FF5A1F;
    --orange-deep: #E04A14;
    --orange-soft: #FF7A45;
    --violet: #2D1B45;
    --violet-light: #4A2D6E;
    --violet-deep: #1F1230;
    --white: #FFFFFF;
    --off-white: #FAFAFA;
    --text: #1A1A1A;
    --text-muted: #6B6B6B;
    --gold: #FFB800;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.18);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body p {
    text-align: left;
    text-indent: 0;
}

body h1, body h2, body h3, body h4 {
    text-transform: none;
    border: 0;
    margin: 0;
    color: inherit;
    letter-spacing: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.accent-orange {
    color: var(--orange);
}

/* ----- Soulignement manuscrit orange ----- */
.underline-script {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.underline-script::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -8px;
    height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 7 Q 50 1 100 5 T 198 4' stroke='%23FF5A1F' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* =========================================
   HEADER (sticky)
   ========================================= */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 0;
    background: transparent;
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.fixed-header.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo {
    height: 38px;
    width: auto;
}

.header-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    transition: color 0.35s var(--ease);
}

.fixed-header.scrolled .header-title {
    color: var(--violet);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-pro-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.header-pro-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fixed-header.scrolled .header-pro-btn {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
}

.fixed-header.scrolled .header-pro-btn:hover {
    background: var(--violet-light);
    border-color: var(--violet-light);
}

.header-pro-btn-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.3);
    animation: proDotPulse 2.4s ease-in-out infinite;
}

.header-pro-btn-text {
    white-space: nowrap;
}

.header-pro-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    opacity: 0.85;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.header-pro-btn:hover .header-pro-btn-arrow {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .header-pro-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 0.85rem;
        gap: 6px;
    }

    .header-pro-btn-arrow {
        display: none;
    }
}

.menu-burger {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.menu-burger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fixed-header.scrolled .menu-burger {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
}

/* Drawer overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 8, 30, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
    z-index: 1100;
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(360px, 88vw);
    background: var(--violet);
    color: var(--white);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 24px 28px 32px;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
}

.menu-drawer.open {
    transform: translateX(0);
}

.menu-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.menu-drawer-head .header-title {
    color: var(--white);
}

.menu-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1rem;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-nav a {
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.menu-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--orange);
    padding-left: 18px;
}

.menu-drawer-foot {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================
   HERO
   ========================================= */
.hero {
    position: relative;
    min-height: 0;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
    padding: 76px 0 24px;
    display: block;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../../images/zibmarket_fond_avec_vague.png');
    background-size: cover;
    background-position: right bottom;
    z-index: -2;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 12px;
    align-items: start;
}

.hero-text {
    max-width: 640px;
    min-width: 0;
    text-align: left;
}

.hero-text p {
    text-align: left;
    text-indent: 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 8, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    backdrop-filter: blur(6px);
    margin-bottom: 14px;
    white-space: nowrap;
}

.hero-badge i {
    color: var(--orange);
    font-size: 0.9rem;
}

.hero-title {
    font-size: clamp(1.1rem, 4.6vw, 4.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    color: var(--white);
    text-transform: none;
    text-align: left;
}

.hero-title .accent-orange {
    color: var(--orange);
}

.hero-subtitle {
    font-size: clamp(0.78rem, 2.6vw, 1.2rem);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
    max-width: 520px;
    line-height: 1.5;
}

.hero-slogan {
    font-family: 'Caveat', 'Brush Script MT', cursive;
    font-size: clamp(1.05rem, 4vw, 2.4rem);
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 12px;
}

.hero-points {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-point {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: clamp(0.78rem, 2.4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-point strong {
    color: var(--orange);
    font-weight: 800;
}

.hero-point .heart {
    color: var(--orange);
    font-size: 1em;
    margin-left: 4px;
}

.hero-point-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (min-width: 768px) {
    .hero-points {
        gap: 18px;
        margin-bottom: 28px;
    }

    .hero-point {
        gap: 16px;
        font-size: 1.25rem;
    }

    .hero-point-icon {
        width: 56px;
        height: 56px;
    }
}

@media (min-width: 1024px) {
    .hero-point {
        font-size: 1.4rem;
    }

    .hero-point-icon {
        width: 64px;
        height: 64px;
    }
}

.hero-mockup {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    margin-right: -20px;
    min-width: 0;
}

.hero-mockup-frame {
    position: relative;
    width: min(130px, 95%);
    aspect-ratio: 1170 / 2532;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow:
        0 0 0 4px rgba(20, 10, 30, 0.85),
        0 4px 10px rgba(0, 0, 0, 0.45);
    transform: rotate(3deg);
    animation: floatY 6s ease-in-out infinite;
}

.hero-mockup-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes floatY {
    0%, 100% { transform: rotate(3deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-10px); }
}

/* =========================================
   PILIERS (4 caractéristiques)
   ========================================= */
.pillars {
    position: relative;
    margin: -40px 16px 0;
    padding: 24px 16px 56px;
    background: var(--violet);
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-lg);
    color: var(--white);
    z-index: 5;
    box-shadow: var(--shadow-lg);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pillar {
    text-align: center;
    padding: 8px 4px;
    transition: transform 0.3s var(--ease);
    position: relative;
}

.pillar + .pillar::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.pillar:hover {
    transform: translateY(-4px);
}

.pillar-icon {
    margin: 0 auto 10px;
    background: transparent;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pillar-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

.pillar h3 {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
}

/* =========================================
   CTA DOWNLOAD
   ========================================= */
.cta-download {
    position: relative;
    margin: 0 16px 40px;
    padding: 16px 0;
    background: transparent;
    border-radius: 0;
    color: var(--text);
    text-align: center;
    box-shadow: none;
    z-index: 6;
}

.cta-download h2 {
    font-size: clamp(1.2rem, 4.5vw, 2rem);
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.2;
    color: var(--text);
}

.cta-line-break {
    display: inline;
}

@media (min-width: 768px) {
    .cta-line-break {
        display: none;
    }
}

.cta-download h2 .accent-orange {
    color: var(--orange);
}

.cta-download p {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 0.92rem;
    text-align: center;
    display: none;
}

.store-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 22px;
    background: #000;
    color: var(--white);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    width: 100%;
    max-width: 320px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.25s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* =====================
   Reveal animation (boutons store animés via .reveal-left / .reveal-right)
   ===================== */
.store-btn.reveal-left,
.store-btn.reveal-right {
    transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.store-btn.reveal-left:not(.is-visible) {
    clip-path: inset(0 100% 0 0);
}

.store-btn.reveal-right:not(.is-visible) {
    clip-path: inset(0 0 0 100%);
}

.store-btn.reveal-left.is-visible,
.store-btn.reveal-right.is-visible {
    clip-path: inset(0 0 0 0);
    animation: storeBtnFloat 4.5s ease-in-out 1.4s infinite;
}

.store-btn.reveal-right.is-visible {
    animation-delay: -0.85s;
}

@keyframes storeBtnFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

/* ====== Letters jump (bouncy idle) ====== */
.bounce-letter {
    display: inline-block;
    animation: storeLetterJump 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    animation-delay: calc(var(--i, 0) * 70ms + 1.4s);
    transform-origin: 50% 100%;
    will-change: transform;
}

@keyframes storeLetterJump {
    0%, 18%, 100% { translate: 0 0; scale: 1; }
    4%   { translate: 0 -10px; scale: 1.15 0.85; }
    8%   { translate: 0 -2px;  scale: 0.9 1.1; }
    12%  { translate: 0 -4px;  scale: 1.05 0.95; }
    15%  { translate: 0 -1px;  scale: 0.98 1.02; }
}

/* Shimmer reflet diagonal */
.store-btn.reveal-left::after,
.store-btn.reveal-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 70%);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.store-btn.reveal-left.is-visible::after {
    animation: storeShimmer 1.1s ease-out 0.4s 1;
}

.store-btn.reveal-right.is-visible::after {
    animation: storeShimmerReverse 1.1s ease-out 0.4s 1;
}

@keyframes storeShimmer {
    0%   { left: -120%; opacity: 0.9; }
    100% { left: 220%;  opacity: 0; }
}

@keyframes storeShimmerReverse {
    0%   { left: 220%;  opacity: 0.9; }
    100% { left: -120%; opacity: 0; }
}

.store-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.store-btn:active {
    transform: scale(0.98);
}

.store-btn i {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.store-btn-svg {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    display: block;
}

.footer-stores .store-btn-svg {
    width: 1.4rem;
    height: 1.4rem;
}

.store-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.store-btn-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.store-btn-name {
    font-size: 1.15rem;
    font-weight: 700;
}

/* =========================================
   CATÉGORIES
   ========================================= */
.categories {
    padding: 40px 0 60px;
    background: var(--white);
}

.section-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 8px;
}

.category-card {
    border-radius: var(--radius-md);
    padding: 24px 18px;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    cursor: default;
}

.category-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.category-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}

.category-image img {
    width: 100%;
    height: 100%;
    max-height: 140px;
    object-fit: contain;
}

.category-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}

.category-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.category-card.high-tech  { background: #E9DAF5; }
.category-card.mode       { background: #DCE3D8; }
.category-card.maison     { background: #DFEAD9; }
.category-card.beaute     { background: #F5DDD9; }
.category-card.loisirs    { background: #ECDFCB; }

/* =========================================
   SOCIAL PROOF
   ========================================= */
.social-proof {
    margin: 0 16px 60px;
    padding: 28px 22px;
    background: #F5F1EE;
    border-radius: var(--radius-md);
}

.social-proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: center;
}

.social-proof-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-proof-people {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

.social-proof-count {
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.social-proof-count #nombreUtilisateurs {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--orange);
}

.social-proof-right p,
.social-proof-middle p {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.social-proof-middle {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.social-proof-middle p strong {
    color: var(--orange);
    font-weight: 800;
}

.social-proof-products {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .social-proof-people {
        max-width: 320px;
    }

    .social-proof-count {
        font-size: 1.35rem;
    }

    .social-proof-count #nombreUtilisateurs {
        font-size: 2rem;
    }

    .social-proof-right p,
    .social-proof-middle p {
        font-size: 1.35rem;
    }

    .island-974,
    .social-proof-products {
        max-width: 320px;
    }
}

@media (min-width: 1024px) {
    .social-proof-people {
        max-width: 360px;
    }

    .social-proof-count {
        font-size: 1.5rem;
    }

    .social-proof-count #nombreUtilisateurs {
        font-size: 2.4rem;
    }

    .social-proof-right p,
    .social-proof-middle p {
        font-size: 1.5rem;
    }

    .island-974,
    .social-proof-products {
        max-width: 380px;
    }
}

.social-proof-right {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.island-974 {
    width: 100%;
    max-width: 220px;
    height: auto;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

.social-proof-right p,
.social-proof-middle p {
    color: var(--text);
    text-align: center;
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    background: var(--violet-deep);
    color: rgba(255, 255, 255, 0.85);
    padding: 56px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 32px;
}

.footer-brand-block .footer-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.footer-brand-block img {
    height: 38px;
    width: auto;
}

.footer-brand-block .brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--white);
}

.footer-brand-block p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.footer-col h4 {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    padding: 4px 0;
    transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.footer-col a:hover {
    color: var(--orange);
    padding-left: 4px;
}

.footer-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-stores {
    align-items: flex-start;
}

.footer-stores .store-btn {
    display: inline-flex;
    padding: 10px 24px;
    width: 200px;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
}

.footer-stores .store-btn i {
    flex: 0 0 auto;
}

.footer-stores .store-btn-text {
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
}

.footer-stores .store-btn i {
    font-size: 1.4rem;
}

.footer-stores .store-btn-name {
    font-size: 0.95rem;
}

.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-socials a:hover {
    background: var(--orange);
    color: var(--white);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.footer-bottom-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-bottom-links a:hover {
    color: var(--orange);
}

/* =========================================
   RESPONSIVE — Tablette (≥ 768 px)
   ========================================= */
@media (min-width: 768px) {
    .container {
        padding: 0 32px;
    }

    .hero {
        padding: 110px 0 40px;
    }

    .hero-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 48px;
    }

    .hero-mockup {
        justify-content: center;
        margin-right: 0;
    }

    .hero-mockup-frame {
        width: min(260px, 100%);
        border-radius: 30px;
        box-shadow:
            0 0 0 6px rgba(20, 10, 30, 0.85),
            0 18px 44px rgba(0, 0, 0, 0.45);
    }

    .pillars {
        margin: -50px 32px 0;
        padding: 36px 24px 80px;
    }

    .pillars-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .pillar {
        padding: 12px 16px;
    }

    .pillar-icon {
        margin-bottom: 14px;
    }

    .pillar-icon svg {
        width: 40px;
        height: 40px;
    }

    .pillar h3 {
        font-size: 1rem;
    }

    .cta-download {
        margin: 0 80px 80px;
        padding: 44px 40px;
        background: linear-gradient(135deg, #7B2141 0%, #581946 50%, #FE5221 100%);
        border-radius: var(--radius-lg);
        color: var(--white);
        box-shadow: var(--shadow-lg);
    }

    .cta-download h2 {
        color: var(--white);
        font-size: clamp(1.5rem, 3vw, 2.4rem);
    }

    .cta-download h2 .accent-orange {
        color: #FFB28A;
    }

    .cta-download p {
        color: rgba(255, 255, 255, 0.85);
        display: block;
    }

    .store-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .store-btn {
        width: auto;
        min-width: 240px;
    }

    .categories {
        padding: 60px 0 80px;
    }

    .categories-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        padding: 0 16px;
    }

    .social-proof {
        margin: 0 32px 80px;
        padding: 40px 48px;
    }

    .social-proof-grid {
        gap: 32px;
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 48px;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* =========================================
   RESPONSIVE — Desktop (≥ 1024 px)
   ========================================= */
@media (min-width: 1024px) {
    .hero {
        padding: 130px 0 50px;
    }

    .hero-mockup-frame {
        width: 300px;
    }

    .pillars {
        margin: -60px auto 0;
        max-width: 1216px;
    }

    .cta-download {
        margin: 0 auto 100px;
        max-width: 920px;
    }

    .social-proof {
        margin: 0 auto 100px;
        max-width: 1216px;
    }
}

/* =========================================
   ESPACE PRO (CTA professionnels)
   ========================================= */
.pro-cta {
    padding: 40px 16px 80px;
}

.pro-cta .container {
    padding: 0;
}

.pro-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 28px;
    padding: 36px 24px;
    color: var(--white);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 90, 31, 0.22) 0%, rgba(255, 90, 31, 0) 55%),
        radial-gradient(100% 80% at 100% 100%, rgba(74, 45, 110, 0.6) 0%, rgba(74, 45, 110, 0) 60%),
        linear-gradient(135deg, #2D1B45 0%, #1F1230 60%, #170A28 100%);
    box-shadow:
        0 30px 60px -20px rgba(31, 18, 48, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.pro-card-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.pro-card-glow {
    position: absolute;
    z-index: 0;
    top: -30%;
    right: -20%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 90, 31, 0.35) 0%, rgba(255, 90, 31, 0) 65%);
    filter: blur(20px);
    pointer-events: none;
    animation: proGlowFloat 9s ease-in-out infinite;
}

@keyframes proGlowFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-20px, 20px); }
}

.pro-card-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

.pro-card-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.pro-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pro-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.25);
    animation: proDotPulse 2.4s ease-in-out infinite;
}

@keyframes proDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 90, 31, 0); }
}

.pro-card-title {
    font-size: clamp(1.7rem, 5.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: left;
}

.pro-card-title-highlight {
    display: inline-block;
    background: linear-gradient(120deg, #FF7A45 0%, #FF5A1F 50%, #FFB800 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: proGradientShift 6s ease-in-out infinite;
}

@keyframes proGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pro-card-lead {
    font-size: clamp(0.96rem, 2.2vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 540px;
    text-align: left;
}

.pro-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 6px;
}

.pro-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px 16px 28px;
    background: linear-gradient(135deg, #FF7A45 0%, #FF5A1F 100%);
    color: var(--white);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 30px -8px rgba(255, 90, 31, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
    overflow: hidden;
}

.pro-cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 65%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease);
}

.pro-cta-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 16px 40px -10px rgba(255, 90, 31, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.pro-cta-button:hover::before {
    transform: translateX(120%);
}

.pro-cta-button:active {
    transform: scale(0.98);
}

.pro-cta-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.pro-cta-button:hover .pro-cta-button-arrow {
    background: rgba(255, 255, 255, 0.28);
    transform: translateX(4px);
}

.pro-cta-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pro-cta-link:hover {
    color: var(--white);
    border-color: var(--white);
}

.pro-card-existant {
    margin-top: 18px;
}

.pro-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.pro-cta-secondary i {
    font-size: 0.95rem;
    opacity: 0.9;
}

.pro-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--white);
    transform: translateY(-2px);
}

.pro-card-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}

.pro-card-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    font-weight: 500;
}

.pro-card-trust li i {
    color: var(--orange);
    font-size: 0.95rem;
}

/* ----- Right side : floating stats ----- */
.pro-card-right {
    position: relative;
    min-height: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pro-stat {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.pro-stat:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
}

.pro-stat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    background: linear-gradient(135deg, rgba(255, 122, 69, 0.85) 0%, rgba(255, 90, 31, 0.85) 100%);
    box-shadow: 0 6px 16px -6px rgba(255, 90, 31, 0.7);
}

.pro-stat-2 .pro-stat-icon {
    background: linear-gradient(135deg, #FFB800 0%, #FF8A1F 100%);
    box-shadow: 0 6px 16px -6px rgba(255, 184, 0, 0.6);
}

.pro-stat-3 .pro-stat-icon {
    background: linear-gradient(135deg, #7C5BC4 0%, #4A2D6E 100%);
    box-shadow: 0 6px 16px -6px rgba(124, 91, 196, 0.6);
}

.pro-stat-4 .pro-stat-icon {
    background: linear-gradient(135deg, #FF7A45 0%, #E04A14 100%);
    box-shadow: 0 6px 16px -6px rgba(224, 74, 20, 0.6);
}

.pro-stat-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.pro-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.01em;
}

.pro-stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.pro-card-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

.pro-card-orb-1 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 90, 31, 0.45) 0%, rgba(255, 90, 31, 0) 70%);
    top: -40px;
    right: -40px;
    animation: proOrbFloat 8s ease-in-out infinite;
}

.pro-card-orb-2 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(124, 91, 196, 0.45) 0%, rgba(124, 91, 196, 0) 70%);
    bottom: -60px;
    left: -40px;
    animation: proOrbFloat 11s ease-in-out -2s infinite reverse;
}

@keyframes proOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -20px) scale(1.1); }
}

/* ===== Responsive ===== */
@media (min-width: 640px) {
    .pro-card {
        padding: 44px 36px;
    }
}

@media (min-width: 768px) {
    .pro-cta {
        padding: 40px 16px 100px;
    }

    .pro-card {
        padding: 56px 48px;
        border-radius: 32px;
    }

    .pro-card-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 48px;
        align-items: center;
    }

    .pro-card-right {
        min-height: 360px;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .pro-stat {
        padding: 16px 18px;
    }

    .pro-stat-value {
        font-size: 1.4rem;
    }

    .pro-stat-label {
        font-size: 0.85rem;
    }
}

@media (min-width: 1024px) {
    .pro-cta .container {
        max-width: 1216px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .pro-card {
        padding: 72px 64px;
    }

    .pro-card-right {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 18px;
    }

    .pro-stat-1 { transform: translateY(-12px); }
    .pro-stat-2 { transform: translateY(12px); }
    .pro-stat-3 { transform: translateY(-12px); }
    .pro-stat-4 { transform: translateY(12px); }

    .pro-stat-1:hover,
    .pro-stat-2:hover,
    .pro-stat-3:hover,
    .pro-stat-4:hover {
        transform: translateY(-18px);
    }
}

/* =========================================
   Reduced motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   RYTHME VERTICAL DE L'ACCUEIL — reprise du 07/08/2026
   ════════════════════════════════════════════════════════════════════════════

   ## Ce que ce bloc corrige

   Les sections de l'accueil avaient chacune leur propre respiration, sans
   règle commune :

   | Section          | Espacement vertical |
   |------------------|---------------------|
   | `.hero`          | 76 px puis 24 px    |
   | `.cta-download`  | 16 px               |
   | `.categories`    | 40 px puis 60 px    |
   | `.social-proof`  | 28 px               |

   Aucune de ces valeurs n'est fausse isolément. Mises bout à bout, elles
   donnent une page qui semble avancer par à-coups : deux blocs collés, puis
   un grand vide, puis deux blocs collés. C'est ce qui produit l'impression
   d'« à-peu-près » sans qu'on sache la nommer en regardant l'écran.

   ## Pourquoi un bloc en fin de fichier plutôt que des retouches dispersées

   Les règles d'origine sont réparties sur 37 Ko. Les modifier une à une
   rendrait la reprise impossible à relire — et impossible à annuler. Ce bloc
   se supprime d'un seul tenant.

   ## Les jetons viennent de `globals.css`

   Les deux feuilles s'appliquent au même document : les variables `--zib-*`
   définies sur `:root` y sont donc disponibles. Le rythme de l'accueil et
   celui des pages e-commerce sortent ainsi de la même échelle.

   ⚠️ Ce fichier existe **en double** : la copie de la racine du dépôt
   (`public/pages/zibmarket/style.css`) sert le **site en production**. Seule
   celle-ci, sous `apps/zibmarket_web/`, sert le nouveau site. Ne pas
   « resynchroniser » les deux sans savoir laquelle porte quoi.
   ──────────────────────────────────────────────────────────────────────── */

.categories,
.pro-cta {
    padding-block: var(--zib-e8);
}

.hero {
    padding-block: var(--zib-e8) var(--zib-e7);
}

.cta-download {
    padding-block: var(--zib-e6);
}

/* Seul l'axe vertical est repris : le retrait horizontal de `.social-proof`
   dessine une carte, il n'a pas à suivre le rythme des sections. */
.social-proof {
    padding-block: var(--zib-e6);
}

/* Le titre appartient à la section qu'il ouvre : il s'en approche, et
   s'éloigne de celle qui se termine. */
.section-title {
    margin-bottom: var(--zib-e6);
}

@media (max-width: 640px) {
    .categories,
    .pro-cta {
        padding-block: var(--zib-e6);
    }

    .hero {
        padding-block: var(--zib-e7) var(--zib-e6);
    }

    .section-title {
        margin-bottom: var(--zib-e5);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TIROIR DE NAVIGATION — options inatteignables sur écran court (07/08/2026)
   ════════════════════════════════════════════════════════════════════════════

   ## Le défaut

   `.menu-drawer` était en `height: 100vh` avec `flex-direction: column`, mais
   **sans aucun défilement**. Dès que les liens, l'en-tête et le pied
   dépassaient la hauteur visible, le bas du menu était simplement **coupé** —
   pas caché derrière un défilement, mais hors d'atteinte.

   Cela se produit sur un téléphone en paysage, sur une petite fenêtre, ou dès
   qu'on agrandit la taille du texte dans son navigateur.

   ## Deux corrections

   1. **`100dvh` avant `100vh`** — sur mobile, `100vh` compte la barre
      d'adresse du navigateur, qui recouvre pourtant le bas de l'écran. Le
      tiroir était donc plus haut que la zone réellement visible, et son pied
      passait dessous. `dvh` suit la hauteur réelle. La déclaration `vh` reste
      juste avant, comme repli pour les navigateurs anciens.

   2. **La liste des liens défile**, l'en-tête et le pied restent en place.
      `min-height: 0` est indispensable : sans lui, un enfant de boîte flexible
      refuse de descendre sous la hauteur de son contenu, et `overflow` n'a
      aucun effet — le menu continuerait d'être coupé.
   ──────────────────────────────────────────────────────────────────────── */

.menu-drawer {
    height: 100vh;
    height: 100dvh;
}

.menu-drawer-head,
.menu-drawer-foot {
    flex-shrink: 0;
}

.menu-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Le défilement reste dans le tiroir : arrivé en bout de course, la page
       derrière ne se met pas à bouger. */
    overscroll-behavior: contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   DÉBORDEMENT HORIZONTAL DU SITE (07/08/2026)
   ════════════════════════════════════════════════════════════════════════════

   ## Le symptôme

   Sur téléphone, la page glissait de quelques pixels vers la gauche et une
   barre de défilement horizontale apparaissait. Peu de pixels en jeu, mais le
   site ne semblait pas taillé pour l'écran.

   ## Pourquoi `overflow-x: hidden` sur `body` ne suffisait pas

   Il y était déjà (règle `body`, plus haut). Mais posé sur `body` seul, sans
   `html`, les navigateurs mobiles laissent malgré tout l'élément racine
   défiler. Le débordement était masqué à un niveau, pas à celui qui compte.

   ## Pourquoi `clip` et non `hidden`

   ⚠️ C'est le point important. `overflow: hidden` fait de l'élément un
   **conteneur de défilement**. Tout `position: sticky` situé à l'intérieur
   cesse alors de fonctionner — c'était le cas de la colonne d'achat de la
   fiche produit, collée au défilement, qui n'avait donc aucun effet.

   `overflow: clip` coupe ce qui dépasse **sans** créer de conteneur de
   défilement. Le débordement disparaît, et `sticky` fonctionne.

   ## Ce que ça ne dispense pas de faire

   Couper le dépassement traite le symptôme. Les éléments qui débordent
   réellement — `.hero-mockup` porte un `margin-right: -20px` délibéré —
   restent à revoir un par un. Cette règle évite simplement qu'un oubli ne se
   traduise par un site qui glisse.
   ──────────────────────────────────────────────────────────────────────── */

html,
body {
    overflow-x: clip;
    /* Repli pour les navigateurs sans `clip` : le comportement d'avant, qui
       vaut mieux qu'un débordement visible. */
    max-width: 100%;
}

/* ⚠️ La cause du débordement, et non plus seulement son masquage.
   
   `.hero-mockup` porte `margin-right: -20px` dans sa règle de base, et
   `margin-right: 0` dans `@media (min-width: 768px)`.
   
   C'est **l'inverse de ce qu'il faudrait** : le dépassement s'applique donc
   sur téléphone, là où la marge de page ne fait que quelques pixels et ne
   peut pas l'absorber — et il est annulé sur grand écran, où il y avait
   pourtant la place. D'où les ~20 px de glissement latéral constatés sur
   mobile, et la barre de défilement horizontale.
   
   La règle ci-dessous neutralise le dépassement en dessous de 768 px. Le
   `clip` posé plus haut reste utile comme filet, mais il ne masque plus une
   cause connue. */
@media (max-width: 767px) {
    .hero-mockup {
        margin-right: 0;
    }
}

/* ⚠️ Le tiroir fermé restait « présent », simplement décalé hors écran.
   
   `.menu-drawer` n'est masqué que par `transform: translateX(100%)` — il
   occupe donc toujours 360 px à droite de la fenêtre. Deux conséquences :
   
   1. **Accessibilité** : ses liens restaient atteignables à la tabulation.
      En parcourant la page au clavier, le focus disparaissait dans un menu
      invisible, sans aucun moyen de savoir où l'on était.
   2. **Débordement** : un élément décalé hors du cadre reste une raison
      possible de défilement latéral selon le contexte de rendu.
   
   `visibility: hidden` le retire des deux — du parcours clavier et de la zone
   défilable — sans casser l'animation : la transition est déclarée sur
   `visibility` en plus de `transform`, comme le fait déjà `.menu-overlay`.
   
   `pointer-events: none` évite qu'il intercepte un clic au bord droit de
   l'écran pendant qu'il est fermé. */
.menu-drawer {
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
}

.menu-drawer.open {
    visibility: visible;
    pointer-events: auto;
}

/* Les halos décoratifs (`.pro-card-orb`, `.pro-card-glow`) sont posés en
   `position: absolute` avec des décalages négatifs — ils débordent
   volontairement de leur panneau pour créer la diffusion lumineuse.
   
   `.pro-card` les rogne déjà, mais `.pro-card-right`, leur parent direct, ne
   le faisait pas : le rognage reposait donc sur un ancêtre lointain, et toute
   règle qui aurait changé le contexte de rendu entre les deux les aurait
   laissés s'échapper. On rogne au plus près de ce qui déborde. */
.pro-card-right {
    overflow: hidden;
}

/* ⚠️ Glissement latéral **sans** débordement mesurable.
   
   Une fois `scrollWidth - clientWidth` ramené à 0, la page pouvait encore être
   traînée sur le côté. Ce n'est alors plus un dépassement : c'est le **rebond
   élastique** du navigateur, et le **chaînage** du défilement — un conteneur
   qui défile horizontalement (ruban de catégories, carrousel de boutiques)
   transmet le geste à la page dès qu'il arrive en bout de course.
   
   `overscroll-behavior-x: none` supprime les deux : plus de rebond, et le
   geste s'arrête au conteneur qui l'a reçu. Le défilement vertical n'est pas
   touché. */
html,
body {
    overscroll-behavior-x: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   VITRINE DE L'ACCUEIL — catégories et produits réels (07/08/2026)
   ════════════════════════════════════════════════════════════════════════════

   Remplace l'ancienne section « Catégories », qui affichait cinq vignettes
   **écrites en dur** dans la page — High-tech, Mode, Maison, Beauté, Loisirs.
   Elles ne correspondaient à rien du catalogue : ni aux vraies catégories, ni
   à des produits existants, et elles ne menaient nulle part.

   La section montre désormais les **catégories réelles** de l'API et des
   produits du catalogue, cliquables.

   ⚠️ Toujours la **liste publique**, même pour un client connecté. L'accueil
   est une vitrine : elle présente Zibmarket, elle ne s'adresse pas à
   quelqu'un en particulier. La liste personnalisée vit sur `/produits`.
   ──────────────────────────────────────────────────────────────────────── */

.vitrine {
    padding-block: var(--zib-e8);
    background: var(--zib-blanc);
}

.vitrine-categories {
    margin-bottom: var(--zib-e6);
}

/* Le fondu du ruban est blanc ici, comme le fond de la section. */
.vitrine-categories.ruban-categories-cadre::after {
    background: linear-gradient(
        to right,
        rgb(255 255 255 / 0%),
        var(--zib-blanc) 85%
    );
}

.vitrine-produits {
    margin-bottom: var(--zib-e6);
}

.vitrine-action {
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    .vitrine {
        padding-block: var(--zib-e6);
    }
}