/* ============================================================
   L'APPARTEMENT BOBOCHIC — Landing page boutique Beaugrenelle
   Contrôleur : BoutiqueHiverParisController
   Design tokens repris de la maquette Claude Design (palette/typo),
   scopés à .mb-page pour ne rien impacter ailleurs sur le site.
   Police "Hanken Grotesk" déjà chargée globalement par le thème.
   ============================================================ */
body#boutiquehiverparis #columns{
    padding-top:0;
}
.mb-page {
    /* Couleurs neutres */
    --mb-neutral-0: #ffffff;
    --mb-neutral-50: #f9f9f9;
    --mb-neutral-100: #f2f2f2;
    --mb-neutral-150: #e6e6e6;
    --mb-neutral-200: #d9d9d9;
    --mb-neutral-350: #b3b3b3;
    --mb-neutral-550: #737373;
    --mb-neutral-600: #666666;
    --mb-neutral-800: #333333;
    --mb-neutral-850: #262626;
    --mb-neutral-900: #1a1a1a;
    --mb-neutral-950: #0b0b0c;

    /* Vert (badge réouverture) */
    --mb-green-200: #e1fde1;
    --mb-green-900: #0b7301;

    /* Couleurs sémantiques */
    --mb-surface-0: var(--mb-neutral-0);
    --mb-surface-1: var(--mb-neutral-50);
    --mb-foreground-8: var(--mb-neutral-850);
    --mb-foreground-9: var(--mb-neutral-900);
    --mb-foreground-10: var(--mb-neutral-950);
    --mb-border-3: var(--mb-neutral-150);
    --mb-badge-bg: var(--mb-green-200);
    --mb-badge-fg: var(--mb-green-900);

    /* Spacing (gap) */
    --mb-gap-xs: 2px;
    --mb-gap-sm: 4px;
    --mb-gap-md: 8px;
    --mb-gap-lg: 16px;
    --mb-gap-xl: 24px;
    --mb-gap-2xl: 32px;

    /* Radius */
    --mb-radius-full: 256px;
    --mb-radius-button: 0;
    --mb-radius-badge: 0;

    --mb-line: 1px;

    /* Typographie */
    --mb-font-text: "Hanken Grotesk", sans-serif;
    --mb-font-heading: "Hanken Grotesk", sans-serif;
    --mb-font-display: "Hanken Grotesk", sans-serif;
    --mb-font-utility: "Hanken Grotesk", sans-serif;
    --mb-font-product: "Hanken Grotesk", sans-serif;

    --mb-weight-base: 400;
    --mb-weight-medium: 600;
    --mb-weight-strong: 700;
    --mb-weight-stronger: 800;

    --mb-fs-sm: 12px;
    --mb-fs-md: 14px;
    --mb-fs-lg: 18px;
    --mb-fs-xl: 25px;
    --mb-fs-3xl: 39px;
    --mb-fs-4xl: 49px;
    --mb-fs-6xl: 76px;

    --mb-lh-flag: 14px;
    --mb-lh-sm: 16px;
    --mb-lh-md: 20px;
    --mb-lh-lg: 24px;
    --mb-lh-3xl: 48px;
    --mb-lh-4xl: 64px;
    --mb-lh-6xl: 100px;

    --mb-ls-default: -0.16px;
    --mb-ls-caps: 0.48px;
    --mb-ls-display: -1.5px;

    width: 100%;
    overflow-x: hidden;
    background: var(--mb-surface-0);
    font-family: var(--mb-font-text);
}

.mb-page * { box-sizing: border-box; }

/* ── Typo utilitaires ───────────────────────────────────────── */

.mb-text-sm { margin: 0; font-family: var(--mb-font-text); font-weight: var(--mb-weight-base); font-size: var(--mb-fs-sm); line-height: var(--mb-lh-sm); letter-spacing: var(--mb-ls-default); }
.mb-text-sm--muted { color: var(--mb-neutral-350); }
.mb-text-md { margin: 0; font-family: var(--mb-font-text); font-weight: var(--mb-weight-base); font-size: var(--mb-fs-md); line-height: var(--mb-lh-md); letter-spacing: var(--mb-ls-default); }
.mb-text-md-strong { margin: 0; font-family: var(--mb-font-text); font-weight: var(--mb-weight-strong); font-size: var(--mb-fs-md); line-height: var(--mb-lh-md); letter-spacing: var(--mb-ls-default); }
.mb-text-lg { margin: 0 0 var(--mb-gap-lg); font-family: var(--mb-font-text); font-weight: var(--mb-weight-base); font-size: var(--mb-fs-lg); line-height: var(--mb-lh-lg); letter-spacing: var(--mb-ls-default); color: var(--mb-foreground-8); }
.mb-text-lg:last-child { margin-bottom: 0; }
.mb-eyebrow { margin: 0; font-family: var(--mb-font-product); font-weight: var(--mb-weight-medium); font-size: var(--mb-fs-md); line-height: var(--mb-lh-sm); letter-spacing: var(--mb-ls-caps); text-transform: uppercase; }
.mb-badge-text { display: inline-block; line-height: 1; font-family: var(--mb-font-utility); font-weight: var(--mb-weight-medium); font-size: var(--mb-fs-sm); }

/* ── Bouton ─────────────────────────────────────────────────── */

.mb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-gap-md);
    height: 48px; padding: 0 32px; border: var(--mb-line) solid transparent; border-radius: var(--mb-radius-button);
    font-family: var(--mb-font-utility); font-weight: var(--mb-weight-medium); font-size: var(--mb-fs-md); letter-spacing: var(--mb-ls-default);
    background: var(--mb-neutral-0); color: var(--mb-neutral-950); text-decoration: none; cursor: pointer;
    transition: opacity 120ms ease-out;
}
.mb-btn:hover { opacity: 0.85; color: var(--mb-neutral-950); text-decoration: none; }
.mb-btn--outline { background: transparent; border-color: var(--mb-neutral-0); color: var(--mb-neutral-0); }
.mb-btn--outline:active,
.mb-btn--outline:hover { opacity:1;background:#1a1a1a;color: var(--mb-neutral-0); }
.mb-btn__icon { width: 24px; height: 24px; filter: invert(1); transition: transform 150ms ease-out; }
.mb-btn__icon--arrow { filter: none; }
.mb-btn:hover .mb-btn__icon--arrow { /*transform: translateX(4px); */}

/* ── Hero ───────────────────────────────────────────────────── */

.mb-hero {
    position: relative;
    min-height: clamp(640px, 86vh, 900px);
    display: flex; align-items: flex-end; overflow: hidden;
    background: var(--mb-neutral-900);
}
.mb-hero__bg { position: absolute; inset: 0; }
.mb-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.mb-hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(rgba(11, 11, 12, 0.15) 0%, rgba(11, 11, 12, 0.05) 45%, rgba(11, 11, 12, 0.72) 100%);
}
.mb-hero__inner {
    position: relative; width: 100%; max-width: 1408px; margin: 0 auto;
    padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 64px);
}
.mb-hero__title {
    margin: 0 0 var(--mb-gap-xl); color: var(--mb-neutral-0);
    font-family: var(--mb-font-display); font-weight: var(--mb-weight-stronger); letter-spacing: var(--mb-ls-display);
    font-size: clamp(39px, 6.5vw, 76px); line-height: 1.02; max-width: 16ch;
}
.mb-hero__lead {
    margin: 0 0 var(--mb-gap-2xl); color: var(--mb-neutral-100);
    font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; max-width: 52ch;
}
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mb-gap-lg); }

/* ── Bandeau réassurance ────────────────────────────────────── */

.mb-reassure { background: var(--mb-neutral-900); }
.mb-reassure__inner { max-width: 1408px; margin: 0 auto; padding: 16px clamp(16px, 5vw, 64px); }
.mb-reassure__track {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--mb-gap-lg) clamp(20px, 3vw, 40px);
}
.mb-reassure__slide { display: contents; }
.mb-reassure__item { display: flex; align-items: center; justify-content: center; gap: var(--mb-gap-md); }
.mb-reassure__item img { width: 22px; height: 22px; filter: invert(1); flex-shrink: 0; }
.mb-reassure__item p { margin: 0; color: var(--mb-neutral-100); font-family: var(--mb-font-text); font-size: var(--mb-fs-sm); line-height: var(--mb-lh-sm); }
.mb-reassure__dots { display: none; }
.mb-reassure__dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--mb-radius-full);
    background: var(--mb-neutral-600); cursor: pointer; transition: background 120ms ease-out;
}
.mb-reassure__dot[data-active="true"] { background: var(--mb-neutral-0); }

@media (max-width: 600px) {
    .mb-reassure__track {
        display: flex; grid-template-columns: none; overflow-x: auto;
        scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none;
    }
    .mb-reassure__track::-webkit-scrollbar { display: none; }
    .mb-reassure__slide {
        display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 100%;
        scroll-snap-align: center; gap: var(--mb-gap-lg); padding: var(--mb-gap-sm) 2px;
    }
    .mb-reassure__item { flex-direction: column; text-align: center; padding: 8px 4px; }
    .mb-reassure__dots { display: flex; justify-content: center; gap: var(--mb-gap-md); margin-top: var(--mb-gap-xl); }
}

/* ── Manifeste (2 blocs texte / photos) ────────────────────── */

.mb-manifeste { background: var(--mb-surface-1); }
.mb-manifeste__inner { max-width: 1408px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 64px); }
.mb-manifeste__row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 5vw, 72px); align-items: center;
}
.mb-manifeste__row + .mb-manifeste__row { margin-top: clamp(48px, 7vw, 104px); }
.mb-manifeste__title {
    margin: 0 0 var(--mb-gap-xl); font-family: var(--mb-font-heading); font-weight: var(--mb-weight-stronger);
    letter-spacing: var(--mb-ls-default); font-size: clamp(25px, 3.2vw, 39px); line-height: 1.1;
}
.mb-manifeste__media {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: var(--mb-gap-lg); aspect-ratio: 1 / 1;
}
.mb-manifeste__cell { position: relative; background: var(--mb-surface-0); overflow: hidden; }
.mb-manifeste__cell--tall { grid-row: span 2; }
.mb-manifeste__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
    .mb-manifeste__media { order: 2; }
}

/* ── Univers (onglets, sans les fiches produits pour l'instant) ─ */

.mb-univers { background: var(--mb-surface-0); border-bottom: var(--mb-line) solid var(--mb-border-3); }
.mb-univers__head { max-width: 1408px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 5vw, 64px) 0; }
.mb-univers__title {
    margin: 0 0 clamp(24px, 3vw, 40px); font-family: var(--mb-font-heading); font-weight: var(--mb-weight-stronger);
    letter-spacing: var(--mb-ls-default); font-size: clamp(25px, 3.2vw, 39px); line-height: 1.1;
    color: var(--mb-foreground-10, var(--mb-neutral-950)); text-align: center;
}
.mb-univers__nav { position: sticky; top: 110px; z-index: 20; background: var(--mb-surface-0); }
.mb-univers__nav-inner {
    max-width: 1408px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px);
    display: flex; align-items: center; justify-content: center; gap: var(--mb-gap-lg);
}
.mb-univers__tabs {
    display: inline-flex; flex: 0 1 auto; gap: 4px; padding: 4px;
    background: var(--mb-neutral-50); border: var(--mb-line) solid var(--mb-neutral-100); overflow-x: auto;
}
.mb-univers__tab {
    display: inline-flex; align-items: center; gap: var(--mb-gap-md); flex: 0 0 auto;
    height: 40px; padding: 0 16px; border: none; background: transparent; white-space: nowrap; cursor: pointer;
    font-family: var(--mb-font-utility); font-weight: var(--mb-weight-medium); font-size: var(--mb-fs-md); letter-spacing: var(--mb-ls-default);
    color: var(--mb-neutral-550); transition: background 120ms ease-out, color 120ms ease-out;
}
.mb-univers__tab-icon { width: 24px; height: 24px; flex-shrink: 0; opacity: 0.55; transition: opacity 120ms ease-out; }
.mb-univers__tab:hover { color: var(--mb-neutral-950); }
.mb-univers__tab:hover .mb-univers__tab-icon { opacity: 0.9; }
.mb-univers__tab[data-active="true"] { background: var(--mb-neutral-0); color: var(--mb-neutral-950); box-shadow: 0 0 25px rgba(12, 12, 13, 0.05); }
.mb-univers__tab[data-active="true"] .mb-univers__tab-icon { opacity: 1; }
.mb-univers__tab:disabled { opacity: 0.35; cursor: not-allowed; }
.mb-univers__tab:disabled:hover { color: var(--mb-neutral-550); }
.mb-univers__tab:disabled:hover .mb-univers__tab-icon { opacity: 0.35; }
.mb-univers__select-field option:disabled { color: var(--mb-neutral-350); }

/* Cartes produit Nosto masquées par le filtre d'univers (data-tags1) */
.mb-univers .card-link.mb-univers-card-hidden { display: none !important; }

.mb-univers__select { display: none; }
.mb-univers__select-icon { width: 24px; height: 24px; flex-shrink: 0; }
.mb-univers__select-field {
    flex: 1; appearance: none; -webkit-appearance: none; border: none; outline: none; background: transparent; height: 100%;
    font-family: var(--mb-font-utility); font-weight: var(--mb-weight-medium); font-size: var(--mb-fs-md); letter-spacing: var(--mb-ls-default);
    color: var(--mb-neutral-950); cursor: pointer;
}
.mb-univers__select-caret { width: 24px; height: 24px; flex-shrink: 0; pointer-events: none; }

.mb-univers__body {  margin: 0 auto;/* padding: var(--mb-gap-lg) clamp(16px, 5vw, 64px) 0;*/ }
.mb-univers__intro { margin: clamp(24px, 3vw, 40px) auto clamp(32px, 4vw, 56px); max-width: 640px; text-align: center; color: var(--mb-foreground-9); }

@media (max-width: 600px) {
    .mb-univers__nav-inner { padding-left: 16px; padding-right: 16px; }
    .mb-univers__tabs { display: none; }
    .mb-univers__select {
        display: flex; align-items: center; gap: var(--mb-gap-md); width: 100%; height: 48px; padding: 0 14px;
        background: var(--mb-surface-0); border: var(--mb-line) solid var(--mb-neutral-200); position: relative;
    }
    .mb-univers__intro{
        padding:0 16px;
    }
}

/* ── Infos pratiques ────────────────────────────────────────── */

.mb-infos { background: var(--mb-neutral-900); color: var(--mb-neutral-0); }
.mb-infos__inner { max-width: 1408px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(16px, 5vw, 64px) clamp(56px, 8vw, 112px); }
.mb-infos__title {
    margin: 0 0 clamp(32px, 5vw, 56px); font-family: var(--mb-font-heading); font-weight: var(--mb-weight-stronger);
    letter-spacing: var(--mb-ls-default); font-size: clamp(25px, 3.6vw, 49px); line-height: 1.06;
}
.mb-infos__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 3vw, 40px); align-items: start;
}
.mb-infos__col { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.mb-infos__card { border: var(--mb-line) solid var(--mb-neutral-800); padding: clamp(20px, 3vw, 32px); }
.mb-infos__card-head { display: flex; align-items: center; gap: var(--mb-gap-md); margin-bottom: var(--mb-gap-lg); }
.mb-infos__card-head--lg { margin-bottom: var(--mb-gap-xl); }
.mb-infos__card-head img { width: 24px; height: 24px; filter: invert(1); }
.mb-infos__card-head .mb-eyebrow { color: var(--mb-neutral-0); }
.mb-infos__card .mb-text-md { color: var(--mb-neutral-100); line-height: 1.5; }
.mb-infos__hours-row {
    display: flex; justify-content: space-between; gap: var(--mb-gap-lg);
    padding: 8px 0; border-bottom: var(--mb-line) solid var(--mb-neutral-850);
}
.mb-infos__hours-row.no_border,
.mb-infos__hours-row:last-of-type { border-bottom: none; }
.mb-infos__hours-row .mb-text-md { color: var(--mb-neutral-100); }
.mb-infos__hours-row .mb-text-md-strong { color: var(--mb-neutral-0); }
.mb-infos__badge {
    display: inline-flex; align-items: center; justify-content: center; margin-top: var(--mb-gap-lg);
    padding: 4px 10px; background: var(--mb-badge-bg); border-radius: var(--mb-radius-badge);
}
.mb-infos__badge .mb-badge-text { color: var(--mb-badge-fg); }
.mb-infos__payment { display: flex; align-items: center; gap: var(--mb-gap-md); }
.mb-infos__payment img { width: 20px; height: 20px; filter: invert(1); flex-shrink: 0; }
.mb-infos__payment .mb-text-sm { color: var(--mb-neutral-100); }

.mb-infos__map {
    position: relative; min-height: 340px; height: 100%;
    background: var(--mb-neutral-900); border: var(--mb-line) solid var(--mb-neutral-800);
}
.mb-infos__map img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.mb-infos__transit-card .mb-text-md-strong { color: var(--mb-neutral-0); }
.mb-infos__transit-block { display: flex; flex-direction: column; gap: 8px; }
.mb-infos__transit-subhead { margin-top: var(--mb-gap-xs) !important; }
.mb-infos__transit-row { display: flex; gap: var(--mb-gap-lg); }
.mb-infos__transit-row img { width: 28px; height: 28px; flex-shrink: 0; margin-top: 1px; }
.mb-infos__transit-row--bus { align-items: center; }
.mb-infos__transit-row--bus img { height: 22px; width: auto; }

@media (max-width: 600px) {
    .mb-hero__actions .mb-btn { width: 100%; }
}