/* =========================================================
   Zenaba : refonte graphique. Mobile d'abord.
   Titres : Instrument Serif · Interface : Manrope
   ========================================================= */
:root {
    --plum: #6e586b;
    --plum-deep: #4a3948;
    --plum-ink: #2c2130;
    --rose: #d86f93;
    --rose-soft: #eac2c3;
    --cream: #f8f1ee;
    --paper: #fffcfb;
    --ink: #221a24;
    --ink-2: #5f5562;
    --line: #ebe1dd;
    --r-lg: 22px;
    --r-md: 14px;
    --shadow: 0 18px 40px -18px rgba(44, 33, 48, .35);
    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.01em; }
h2 em, h1 em { font-style: italic; color: var(--rose); }
h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
p { margin: 0; }
.zb-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.zb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zb-ic { flex-shrink: 0; }
.zb-ic--fill { fill: currentColor; }
.zb-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--plum); margin-bottom: 14px; }
.zb-kicker--light { color: var(--rose-soft); }

/* ---------- Boutons & liens ---------- */
.zb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s, color .2s; white-space: nowrap; }
.zb-btn:hover { transform: translateY(-1px); }
.zb-btn--rose { background: var(--rose); color: #fff; box-shadow: 0 10px 24px -10px rgba(216, 111, 147, .9); }
.zb-btn--rose:hover { background: #c95c81; }
.zb-btn--plum { background: var(--plum-deep); color: #fff; }
.zb-btn--plum:hover { background: var(--plum-ink); }
.zb-btn--light { background: #fff; color: var(--plum-deep); }
.zb-btn--outline { min-height: 42px; padding: 0 18px; background: transparent; color: var(--plum-deep); box-shadow: inset 0 0 0 1.5px var(--line); }
.zb-btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--plum-deep); cursor: pointer; transition: background .2s; }
.zb-iconbtn:hover { background: var(--cream); }
.zb-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--plum-deep); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: gap .2s, color .2s; }
.zb-link:hover { gap: 12px; color: var(--rose); }

/* ---------- Bandeau & en-tete ---------- */
.zb-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 251, .92); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.zb-header__inner { display: flex; align-items: center; gap: 28px; height: 84px; }
.zb-logo { position: relative; display: inline-block; flex-shrink: 0; }
.zb-logo img { width: 190px; height: auto; }
/* Le visage a l'afro du logo est detache pour l'animer : le logo vectoriel est masque a cet endroit */
.zb-logo .zb-logo__full { clip-path: inset(0 0 0 39.6%); }
.zb-logo .zb-logo__mark { position: absolute; left: .47%; top: 5.94%; width: 38.11%; height: auto; transform-origin: 58% 88%; animation: zb-boing 1.1s cubic-bezier(.3, .7, .3, 1) .5s both; }
.zb-logo:hover .zb-logo__mark { animation: zb-boing-hover .9s cubic-bezier(.3, .7, .3, 1); }
@keyframes zb-boing { 0% { transform: none; } 22% { transform: scale(1.07, .93) rotate(-5deg); } 48% { transform: scale(.96, 1.06) rotate(3deg); } 72% { transform: scale(1.02, .98) rotate(-1deg); } 100% { transform: none; } }
@keyframes zb-boing-hover { 0% { transform: none; } 22% { transform: scale(1.07, .93) rotate(-5deg); } 48% { transform: scale(.96, 1.06) rotate(3deg); } 72% { transform: scale(1.02, .98) rotate(-1deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .zb-logo .zb-logo__mark { animation: none !important; } }
.zb-nav { display: none; gap: 30px; }
.zb-nav a { font-weight: 600; font-size: .92rem; color: var(--ink-2); transition: color .2s; }
.zb-nav a:hover { color: var(--plum-deep); }
.zb-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.zb-header__pro { display: none; font-weight: 700; font-size: .9rem; color: var(--rose); margin-right: 10px; }
/* Mobile : le compte en simple icone, comme la recherche et le panier ; texte a partir de 760px */
.zb-header__login { display: inline-flex; margin-left: 2px; }
@media (max-width: 759px) {
    .zb-btn.zb-header__login { width: 40px; min-height: 40px; height: 40px; padding: 0; margin: 0; box-shadow: none; border-radius: 50%; justify-content: center; }
    .zb-header__login > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.zb-nav a, .zb-header__pro { white-space: nowrap; }
@media (min-width: 760px) { .zb-header__login { display: inline-flex; } }
@media (min-width: 1020px) { .zb-header__inner { height: 96px; } .zb-logo img { width: 240px; } }
@media (min-width: 1200px) {
    .zb-nav, .zb-header__pro { display: inline-flex; }
    .zb-header__menu { display: none; }
}

/* ---------- Selecteur de pays ---------- */
.zb-country { position: relative; }
.zb-country__btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: .85rem; color: var(--plum-deep); cursor: pointer; transition: background .2s; }
.zb-country__btn:hover, .zb-country__btn[aria-expanded="true"] { background: var(--cream); }
.zb-country__btn .fi { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover; }
.zb-country__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; width: 560px; max-height: 70vh; overflow-y: auto; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 60px -20px rgba(44, 33, 48, .35), 0 0 0 1px var(--line); }
.zb-country__title { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 6px; }
.zb-country__region { margin: 14px 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.zb-country__panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; }
.zb-country__panel a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: .9rem; color: var(--ink); transition: background .15s; }
.zb-country__panel a:hover { background: var(--cream); }
.zb-country__panel a[aria-current] { font-weight: 700; color: var(--plum-deep); background: var(--cream); }
.zb-country__panel .fi { width: 22px; height: 16px; flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover; }
@media (max-width: 759px) {
    /* le flou du header creerait un bloc conteneur : le panneau fixe ne pourrait pas se caler en bas d'ecran */
    .zb-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
    .zb-country__code { display: none; }
    .zb-country__btn { padding: 0 8px; }
    .zb-country__panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75vh; box-shadow: 0 -20px 60px -10px rgba(44, 33, 48, .45), 0 0 0 100vmax rgba(34, 26, 36, .45); border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    .zb-country__panel ul { grid-template-columns: 1fr 1fr; }
}

/* ---------- Hero ---------- */
.zb-hero { position: relative; background: var(--plum-deep); color: #fff; padding: 32px 0 36px; overflow-x: clip; overflow-y: visible; }
.zb-hero::after { content: ''; position: absolute; inset: auto -10% 0 40%; height: 100%; background: radial-gradient(closest-side, rgba(216, 111, 147, .28), transparent); pointer-events: none; }
.zb-hero__grid { position: relative; z-index: 1; display: grid; gap: 26px; align-items: center; }
.zb-hero .zb-kicker { color: var(--rose-soft); }
.zb-hero h1 { font-family: var(--serif); font-size: clamp(2.5rem, 6.4vw, 4.3rem); line-height: .98; letter-spacing: -.015em; max-width: 14ch; }
.zb-hero h1 em { color: var(--rose-soft); }
.zb-hero__lead { margin: 16px 0 0; font-size: 1.08rem; color: rgba(255, 255, 255, .78); max-width: 46ch; }

.zb-hero__mosaic { position: relative; display: none; height: 380px; }
.zb-m { position: absolute; display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--plum-ink); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55); }
.zb-m:hover img { filter: brightness(1.06); }
.zb-m img { position: absolute; inset: auto 0 0 0; width: 100%; height: 110%; /* bandeau du haut des realisations hors cadre */ object-fit: cover; animation: zb-zoom 9s ease-out both; }
.zb-m img.is-in { opacity: 0; animation: zb-fadein 1.1s ease forwards, zb-zoom 9s ease-out both; }
@keyframes zb-fadein { to { opacity: 1; } }
@keyframes zb-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .zb-m img, .zb-m img.is-in { animation: none; opacity: 1; } }
.zb-m--a { width: 48%; height: 92%; top: 0; right: 0; }
.zb-m--b { width: 38%; height: 72%; top: 14%; left: 2%; }
.zb-m--c { width: 30%; height: 52%; bottom: 0; left: 31%; border: 5px solid var(--plum-deep); }
/* Mobile / tablette : une realisation en fond du bloc violet, sous un voile prune */
@media (max-width: 1019px) {
    .zb-hero__grid { position: static; }
    .zb-hero__text, .zb-hero__search { position: relative; z-index: 1; }
    .zb-hero__mosaic { display: block; position: absolute; inset: 0; height: auto; z-index: 0; pointer-events: none; }
    .zb-hero__mosaic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74, 57, 72, .55) 0%, rgba(74, 57, 72, .86) 45%, var(--plum-deep) 78%); }
    .zb-m--b, .zb-m--c, .zb-hero__credit { display: none; }
    .zb-m--a { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}
@media (min-width: 1020px) {
    .zb-hero { padding: 44px 0 44px; }
    .zb-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 28px 56px; }
    .zb-hero__mosaic { display: block; }
}

/* Preuves sous l'accroche : note + stores */
.zb-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 20px; }
.zb-hero__rating { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(255, 255, 255, .78); }
.zb-hero__rating strong { color: #fff; }
.zb-hero__stars { display: inline-flex; gap: 1px; color: #f0b54a; }
.zb-hero__stores { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.zb-store { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s; }
.zb-store:hover { background: rgba(255, 255, 255, .2); }
.zb-hero__credit { position: absolute; right: 0; bottom: -26px; font-size: .74rem; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }

/* ---------- Recherche ---------- */
.zb-search__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 10px 4px 2px; font-size: .88rem; color: var(--ink-2); }
.zb-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.zb-inline select { border: 0; padding: 2px 16px 2px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e586b' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; font: inherit; font-weight: 700; color: var(--plum-deep); appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; border-bottom: 1px dashed transparent; field-sizing: content; }
.zb-inline select:hover, .zb-inline select:focus-visible { border-bottom-color: var(--plum); }
.zb-inline--check input { position: absolute; opacity: 0; pointer-events: none; }
.zb-check { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #cfc3c8; transition: all .15s; }
.zb-inline--check:has(input:checked) .zb-check { background: var(--plum-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center; box-shadow: none; }
.zb-inline--check:has(input:focus-visible) .zb-check { outline: 2px solid var(--rose); outline-offset: 2px; }
.zb-hero__search { grid-column: 1 / -1; }
.zb-search { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.zb-search__row { display: grid; gap: 6px; }
.zb-field { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--cream); color: var(--plum); cursor: text; }
.zb-field__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zb-field__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.zb-field input, .zb-field select { width: 100%; min-width: 0; border: 0; padding: 0; margin: 0; background: transparent; font: inherit; font-weight: 600; font-size: 1rem; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
.zb-field input::placeholder { color: #a39aa5; font-weight: 500; }
.zb-field select { cursor: pointer; padding-right: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f5562' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; }
.zb-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-search__go { width: 100%; min-height: 48px; font-size: .95rem; }
@media (max-width: 759px) {
    .zb-search { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .zb-search__row { display: contents; }
    .zb-search__row .zb-field:nth-child(-n+3) { grid-column: 1 / -1; }
    .zb-search__opts { grid-column: 1 / -1; order: 8; margin: 6px 6px 8px; }
    .zb-search__go { grid-column: 1 / -1; order: 9; }
}
.zb-opt { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: all .2s; user-select: none; }
.zb-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zb-opt:hover { color: var(--plum-deep); box-shadow: inset 0 0 0 1px var(--plum); }
.zb-opt:has(input:checked) { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-opt:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (min-width: 760px) {
    .zb-search { padding: 8px; }
    .zb-search__row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) auto; gap: 0; align-items: stretch; }
    .zb-field { background: transparent; border-radius: 0; padding: 8px 18px; }
    .zb-field + .zb-field { border-left: 1px solid var(--line); }
    .zb-field:focus-within { box-shadow: none; background: var(--cream); border-radius: var(--r-md); }
    .zb-search__go { width: auto; min-height: 46px; padding: 0 20px; align-self: center; border-radius: 999px; font-size: .92rem; }
    .zb-search__opts { margin: 8px 18px 6px; padding-top: 10px; border-top: 1px solid var(--line); }
    }

/* ---------- Chiffres ---------- */
.zb-stats { background: var(--cream); border-bottom: 1px solid var(--line); }
.zb-stats__grid { display: grid; grid-template-columns: 1fr 1fr; }
.zb-stats__grid div { padding: 20px 8px; text-align: center; }
.zb-stats__grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.zb-stats__grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.zb-stats strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1; color: var(--plum-deep); }
.zb-stats strong small { font-size: .55em; margin-left: 2px; color: var(--rose); }
.zb-stats span { display: block; margin-top: 8px; font-size: .84rem; color: var(--ink-2); }
@media (min-width: 860px) {
    .zb-stats__grid { grid-template-columns: repeat(4, 1fr); }
    .zb-stats__grid div { border-bottom: 0 !important; border-right: 1px solid var(--line); padding: 24px 8px; }
    .zb-stats__grid div:last-child { border-right: 0; }
}

/* ---------- Sections ---------- */
.zb-section { padding: 72px 0; }
.zb-section--cream { background: var(--cream); }
.zb-section--plum { background: var(--plum-deep); color: #fff; }
.zb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.zb-head--center { justify-content: center; text-align: center; }
@media (min-width: 1020px) { .zb-section { padding: 110px 0; } .zb-head { margin-bottom: 52px; } }

/* ---------- Coiffures ---------- */
.zb-styles { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.zb-styles::-webkit-scrollbar { display: none; }
.zb-style { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start; background: var(--cream); }
.zb-style img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.zb-style:hover img { transform: scale(1.06); }
.zb-style__cap { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 2px; padding: 56px 18px 18px; background: linear-gradient(transparent, rgba(34, 26, 36, .85)); color: #fff; }
.zb-style__cap strong { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.zb-style__cap span { font-size: .85rem; color: rgba(255, 255, 255, .8); }
/* Carrousel des categories : 1,4 carte visible sur mobile, 4 sur ordinateur, fleches */
.zb-styles { scroll-behavior: smooth; }
.zb-style__img { position: absolute; inset: 0; isolation: isolate; }
.zb-style__img img { position: absolute; inset: auto 0 0 0; height: 110%; }
/* Les realisations portent un bandeau « Ta coiffeuse afro sur Zenaba.fr » en haut : agrandies et calees en bas, il sort du cadre */
.zb-style__img img.is-in { animation: zb-fadein .9s ease forwards; }
.zb-style__cap { z-index: 1; }
.zb-style__n { font-style: normal; font-size: .82rem; color: rgba(255, 255, 255, .82); }
.zb-style__cap span { display: inline-flex; align-items: center; gap: 6px; }
.zb-styles__arrows { display: none; justify-content: flex-end; margin-top: 16px; }
@media (min-width: 760px) { .zb-styles { grid-auto-columns: calc((100% - 28px) / 3); margin: 0; padding: 0; } .zb-styles__arrows { display: flex; } }
@media (min-width: 1020px) { .zb-styles { grid-auto-columns: calc((100% - 42px) / 4); } }
.zb-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; }
.zb-tags a { display: inline-block; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-2); transition: all .2s; }
.zb-tags a:hover { background: var(--plum-deep); color: #fff; box-shadow: none; }

/* ---------- Etapes ---------- */
.zb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.zb-steps li { position: relative; background: var(--paper); border-radius: var(--r-lg); padding: 30px 28px 32px; }
.zb-steps__ic { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream); color: var(--plum); margin-bottom: 22px; }
.zb-steps__n { position: absolute; top: 24px; right: 28px; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--rose-soft); }
.zb-steps h3 { font-size: 1.15rem; margin-bottom: 8px; }
.zb-steps p { color: var(--ink-2); font-size: .95rem; }
@media (min-width: 860px) { .zb-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ---------- Avis ---------- */
.zb-score { display: inline-flex; align-items: center; gap: 2px; color: #e2a33b; }
.zb-score span { margin-left: 10px; font-weight: 700; color: var(--ink); font-size: .95rem; }
.zb-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
.zb-reviews::-webkit-scrollbar { display: none; }
.zb-review { display: flex; flex-direction: column; margin: 0; padding: 30px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; }
.zb-review__q { color: var(--rose-soft); }
.zb-review blockquote { flex: 1; margin: 14px 0 26px; font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; color: var(--ink); }
.zb-review figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.zb-review__avatar { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--plum-deep); color: #fff; font-weight: 700; }
.zb-review strong { display: block; font-size: .95rem; }
.zb-review small { display: block; font-size: .82rem; color: var(--ink-2); }
@media (min-width: 760px) { .zb-reviews { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (min-width: 1100px) { .zb-reviews { grid-auto-columns: calc((100% - 48px) / 4); margin: 0; padding: 0 0 4px; scroll-padding-inline: 0; } .zb-review blockquote { font-size: 1.3rem; } }
.zb-reviews__arrows { justify-content: flex-end; margin-top: 14px; }
.zb-stats__link { display: block; color: inherit; text-decoration: none; }
.zb-stats__link:hover span { color: var(--plum-deep); text-decoration: underline; }

/* ---------- Pourquoi ---------- */
.zb-why { display: grid; gap: 44px; }
.zb-why__intro h2 { margin-bottom: 20px; }
.zb-why__intro h2 em { color: var(--rose-soft); }
.zb-why__intro p:last-child { color: rgba(255, 255, 255, .75); max-width: 44ch; }
.zb-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255, 255, 255, .12); border-radius: var(--r-lg); overflow: hidden; }
.zb-why__list li { display: flex; gap: 18px; padding: 26px; background: var(--plum-deep); }
.zb-why__list .zb-ic { color: var(--rose-soft); margin-top: 2px; }
.zb-why__list h3 { margin-bottom: 4px; }
.zb-why__list p { font-size: .92rem; color: rgba(255, 255, 255, .72); }
@media (min-width: 1020px) { .zb-why { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; } .zb-why__list { grid-template-columns: 1fr 1fr; } }

/* ---------- Panneaux routine / app ---------- */
.zb-duo { display: grid; gap: 18px; }
@media (min-width: 860px) { .zb-duo { grid-template-columns: 1fr 1fr; gap: 22px; } .zb-duo--center { align-items: center; gap: 72px; } }
.zb-panel { display: flex; flex-direction: column; align-items: flex-start; padding: 40px 36px; border-radius: var(--r-lg); min-height: 330px; }
.zb-panel__ic { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 26px; }
.zb-panel h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.08; margin-bottom: 12px; max-width: 18ch; }
.zb-panel p:not(.zb-kicker) { color: var(--ink-2); max-width: 42ch; margin-bottom: 26px; }
.zb-panel .zb-link, .zb-panel .zb-btn, .zb-panel__note { margin-top: auto; }
.zb-panel--routine { background: var(--rose-soft); transition: transform .3s; }
.zb-panel--routine:hover { transform: translateY(-3px); }
.zb-panel--routine .zb-panel__ic { background: #fff; color: var(--rose); }
.zb-panel--app { background: var(--cream); }
.zb-panel--app .zb-panel__ic { background: var(--plum-deep); color: #fff; }
.zb-panel__note { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--plum); }

/* ---------- Boutique ---------- */
.zb-shop__grid { display: grid; gap: 40px; }
.zb-shop__intro h2 { margin-bottom: 18px; }
.zb-shop__intro > p:not(.zb-kicker) { color: var(--ink-2); max-width: 46ch; }
.zb-shop__perks { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 10px; }
.zb-shop__perks li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.zb-shop__perks .zb-ic { color: var(--rose); }
.zb-shop__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.zb-shop__label { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.zb-shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zb-shop__bar .zb-shop__label { margin: 0; }
.zb-arrows { display: flex; gap: 8px; }
.zb-arrow { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--plum-deep); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: all .2s; }
.zb-arrow:hover:not(:disabled) { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-arrow:disabled { opacity: .35; cursor: default; }
.zb-products { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.zb-products::-webkit-scrollbar { display: none; }
.zb-product { scroll-snap-align: start; }
.zb-product { display: flex; flex-direction: column; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.zb-product__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.zb-product__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .4s; }
.zb-product:hover .zb-product__img img { transform: scale(1.04); }
.zb-product__badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.zb-product__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.zb-product__brand { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.zb-product__name { font-weight: 700; font-size: .92rem; line-height: 1.35; flex: 1; }
.zb-product__name:hover { color: var(--plum); }
.zb-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.zb-product__price { font-family: var(--serif); font-size: 1.45rem; line-height: 1; color: var(--plum-deep); }
.zb-product__price del { display: block; margin: 4px 0 0; font-family: var(--sans); font-size: .78rem; color: #a39aa5; }
.zb-product__add { display: inline-flex; width: 38px; height: 38px; flex-shrink: 0; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--plum-deep); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.zb-product__add:hover { background: var(--rose); transform: scale(1.06); }
@media (min-width: 1020px) { .zb-shop__grid { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; } }

/* ---------- Bandeau application ---------- */
.zb-appband { background: var(--rose-soft); }
.zb-appband__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding-top: 34px; padding-bottom: 34px; }
.zb-appband__ic { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 50%; background: var(--plum-deep); color: #fff; }
.zb-appband__text { flex: 1 1 320px; }
.zb-appband__text h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; margin-bottom: 4px; }
.zb-appband__text p { color: var(--plum-ink); opacity: .8; }
.zb-appband__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.zb-store--lg { width: auto; height: 48px; padding: 0 16px 0 12px; gap: 10px; border-radius: 12px; background: var(--plum-ink); font-weight: 700; font-size: .95rem; line-height: 1.05; }
.zb-store--lg small { display: block; font-size: .64rem; font-weight: 600; opacity: .7; }

/* ---------- Magazine ---------- */
.zb-mag { display: grid; gap: 22px; }
.zb-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); }
.zb-mag__featured { display: grid; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.zb-mag__featured img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.zb-mag__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; }
.zb-mag__body strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.zb-mag__body > span:last-child { color: var(--ink-2); font-size: .95rem; }
.zb-mag__list { list-style: none; margin: 0; padding: 0; }
.zb-mag__list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.zb-mag__list li:first-child a { padding-top: 4px; }
.zb-mag__list .zb-tag { grid-column: 1; }
.zb-mag__list strong { grid-column: 1; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; transition: color .2s; }
.zb-mag__arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--plum); transition: transform .2s; }
.zb-mag__list a:hover strong { color: var(--plum); }
.zb-mag__list a:hover .zb-mag__arrow { transform: translateX(4px); }
@media (min-width: 960px) { .zb-mag { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; } .zb-mag__featured { grid-template-columns: 1fr; } }

/* ---------- Coiffeuses & villes ---------- */
.zb-pro h2 { margin-bottom: 18px; }
.zb-pro p:not(.zb-kicker) { color: var(--ink-2); margin-bottom: 30px; max-width: 46ch; }
.zb-cities { padding: 32px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.zb-cities h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--plum-deep); }
.zb-cities ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.zb-cities a { display: block; padding: 7px 0; font-size: .95rem; color: var(--ink-2); border-bottom: 1px solid transparent; transition: color .2s; }
.zb-cities a:hover { color: var(--rose); }
@media (min-width: 560px) { .zb-cities ul { columns: 3; } }

/* ---------- FAQ ---------- */
.zb-faq { max-width: 860px; }
.zb-faq__item { border-bottom: 1px solid var(--line); }
.zb-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; }
.zb-faq__item summary::-webkit-details-marker { display: none; }
.zb-faq__ic { color: var(--plum); transition: transform .25s; }
.zb-faq__item[open] .zb-faq__ic { transform: rotate(45deg); }
.zb-faq__item p { padding: 0 40px 26px 0; color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.zb-footer { background: var(--plum-ink); color: rgba(255, 255, 255, .72); padding: 64px 0 28px; }
.zb-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.zb-footer__claim { font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; color: #fff; }
.zb-footer__claim em { color: var(--rose-soft); }
.zb-footer__grid { display: grid; gap: 32px; }
.zb-footer__about { max-width: 38ch; font-size: .93rem; }
.zb-footer h3 { color: #fff; font-size: .9rem; margin-bottom: 12px; }
.zb-footer nav a { display: block; padding: 4px 0; font-size: .92rem; transition: color .2s; }
.zb-footer nav a:hover { color: #fff; }
.zb-footer__copy { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
@media (min-width: 860px) { .zb-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.zb-footer__group { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.zb-footer__group ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.zb-footer__group li { display: flex; flex-direction: column; gap: 2px; padding: 4px 28px; font-size: .88rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.zb-footer__group li:first-child { padding-left: 0; border-left: 0; }
.zb-footer__group a { color: #fff; font-weight: 700; }
.zb-footer__group a:hover { color: var(--rose-soft); }
@media (max-width: 559px) { .zb-footer__group li { padding: 10px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); width: 100%; } .zb-footer__group li:first-child { border-top: 0; } }

/* ---------- Bouton flottant (mobile) ---------- */
.zb-fab { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; background: var(--rose); color: #fff; font-weight: 800; box-shadow: 0 16px 34px -12px rgba(44, 33, 48, .6); transform: translateY(160%); transition: transform .3s; }
.zb-fab.is-visible { transform: none; }
@media (min-width: 760px) { .zb-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* =========================================================
   Pages interieures : listes, contenus, demande, boutique,
   espace coiffeuse / cliente
   ========================================================= */
.zb-wrap--narrow { max-width: 820px; }
.zb-section--tight { padding: 40px 0 56px; }
/* Avis puis coiffures, deux sections blanches : un seul espace entre les deux */
.zb-section--avis { padding-bottom: 8px; }
@media (min-width: 1020px) { .zb-section--tight { padding: 56px 0 80px; } }
.zb-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; margin-bottom: 18px; }
.zb-mt { margin-top: 48px; margin-bottom: 20px; }
.zb-count { font-size: .88rem; color: var(--ink-2); margin-bottom: 18px; }
.zb-empty { color: var(--ink-2); padding: 28px 0; }
.zb-hint { font-size: .86rem; color: var(--ink-2); margin: 8px 0 0; }
.zb-back { display: inline-block; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.zb-back::before { content: '← '; }
.zb-btn--sm { min-height: 38px; padding: 0 16px; font-size: .86rem; }
.zb-btn--block { width: 100%; }
.zb-flash { background: var(--plum-deep); color: #fff; font-weight: 600; font-size: .92rem; padding: 12px 0; }
.zb-flash--error { background: #a33d5c; }
.zb-alert { padding: 14px 18px; border-radius: var(--r-md); background: #fbe6ec; color: #8a2a48; font-weight: 600; font-size: .92rem; margin: 0 0 18px; }
.zb-alert--info { background: var(--cream); color: var(--plum-deep); }
.zb-alert--ok { background: #e5f4ea; color: #24623a; }
.zb-error { color: #b0345a; font-size: .84rem; font-weight: 600; margin: 6px 0 0; }

/* En-tete de page et fil d'Ariane */
.zb-pagehead { background: var(--cream); padding: 34px 0 30px; }
.zb-pagehead h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: 12px; }
.zb-pagehead__lead { max-width: 62ch; color: var(--ink-2); font-size: 1.04rem; margin-bottom: 22px; }
.zb-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--ink-2); margin-bottom: 16px; }
.zb-crumbs a:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: .5; }
/* Page de premier niveau (seulement « Accueil ») : pas de fil d'Ariane */
.zb-crumbs:has(> a:only-child) { display: none; }
.zb-crumbs a:hover { color: var(--rose); }

/* Puces de filtre */
.zb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-right: -20px; padding-right: 20px; }
.zb-chips--scroll::-webkit-scrollbar { display: none; }
.zb-chip { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-2); transition: all .2s; white-space: nowrap; }
.zb-chip:hover { box-shadow: inset 0 0 0 1px var(--plum); color: var(--plum-deep); }
.zb-chip.is-on { background: var(--plum-deep); color: #fff; box-shadow: none; }

/* Grille de realisations */
.zb-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .zb-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1020px) { .zb-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zb-shot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.zb-shot img { position: absolute; inset: auto 0 0 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 100%; transition: transform .5s; }
.zb-shot:hover img { transform: scale(1.04); }
.zb-shot__meta { position: absolute; inset: auto 0 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(34, 26, 36, .78)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.zb-shot__title { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.zb-shot__by { font-size: .78rem; opacity: .85; }
.zb-shot__badge { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--rose); padding: 3px 8px; border-radius: 999px; margin-bottom: 4px; }
.zb-shot__badge--pending { background: #c98a2e; }
.zb-shot__badge--rejected { background: #7d6f7c; }

/* Pagination */
.zb-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 40px 0 0; }
.zb-pager a, .zb-pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line); }
.zb-pager a:hover { box-shadow: inset 0 0 0 1px var(--plum); }
.zb-pager span[aria-current] { background: var(--plum-deep); color: #fff; box-shadow: none; }

/* Texte riche */
.zb-prose { font-size: 1.04rem; line-height: 1.75; color: #332a35; }
.zb-prose--narrow { max-width: 760px; margin: 40px auto 0; }
.zb-prose > * + * { margin-top: 1.05em; }
.zb-prose h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; margin-top: 1.8em; color: var(--ink); }
.zb-prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.zb-prose a { color: var(--plum-deep); text-decoration: underline; text-decoration-color: var(--rose-soft); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.zb-prose a:hover { text-decoration-color: var(--rose); }
.zb-prose ul, .zb-prose ol { padding-left: 1.3em; }
.zb-prose li + li { margin-top: .35em; }
.zb-prose figure { margin: 1.6em 0; }
.zb-prose figure img { border-radius: var(--r-md); margin: 0 auto; }
.zb-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--rose); font-family: var(--serif); font-size: 1.3rem; color: var(--plum-deep); }
.zb-prose .is-center { text-align: center; }
.zb-prose .zb-table { overflow-x: auto; }
.zb-prose table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.zb-prose td, .zb-prose th { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.zb-seo { color: var(--ink-2); font-size: .96rem; border-top: 1px solid var(--line); padding-top: 32px; }
.zb-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--plum-ink); margin: 0 0 28px; }
.zb-video iframe, .zb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Encart demande */
.zb-leadcta { background: var(--plum-deep); color: #fff; padding: 52px 0; }
.zb-leadcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.zb-leadcta h2 { margin-bottom: 8px; }
.zb-leadcta p { color: rgba(255, 255, 255, .78); max-width: 52ch; }

/* Fiche (coiffure, produit) */
.zb-detail { display: grid; gap: 28px; }
@media (min-width: 1020px) { .zb-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; } .zb-detail__side { position: sticky; top: 120px; } }
.zb-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.zb-gallery__thumbs { display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 4px; }
.zb-gallery__thumbs .zb-gallery__item { flex: 0 0 88px; width: 88px; scroll-snap-align: start; }
@media (min-width: 1020px) { .zb-gallery__thumbs .zb-gallery__item { flex-basis: 104px; width: 104px; } }
.zb-gallery__item { margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--cream); position: relative; }
.zb-gallery__item.is-main { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.zb-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Image principale entiere (le bas porte la signature zenaba.fr), miniatures cliquables */
.zb-gallery__item.is-main:has(> img) { aspect-ratio: auto; background: none; display: flex; justify-content: center; }
.zb-gallery__item.is-main > img { position: static; display: block; width: auto; max-width: 100%; height: auto; max-height: 78vh; border-radius: var(--r-md); }
.zb-gallery__item:not(.is-main):has(> img) { cursor: zoom-in; }
.zb-gallery__item:not(.is-main):has(> img):hover img { opacity: .85; }
.zb-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(28, 18, 27, .9); cursor: zoom-out; }
.zb-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.zb-gallery__empty { display: flex; align-items: center; justify-content: center; color: var(--plum); }
.zb-detail__side h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; margin-bottom: 14px; }
.zb-detail__lead { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 18px; }
.zb-detail__cta { margin: 26px 0; padding: 22px; border-radius: var(--r-lg); background: var(--cream); }
.zb-detail__cta p { font-size: .88rem; color: var(--ink-2); margin-top: 10px; }
.zb-taglist { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0; padding: 0; }
.zb-taglist li { font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--cream); color: var(--plum-deep); }
.zb-author { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.zb-author img, .zb-author__ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.zb-author__ph { display: inline-flex; align-items: center; justify-content: center; background: var(--rose-soft); color: var(--plum-deep); font-weight: 800; font-size: 1.2rem; }
.zb-author > span { display: flex; flex-direction: column; line-height: 1.3; }
.zb-author small { font-size: .74rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.zb-author em { font-style: normal; font-size: .86rem; color: var(--ink-2); }

/* Tutos */
.zb-tutos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.zb-tuto { display: flex; flex-direction: column; gap: 8px; }
.zb-tuto__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.zb-tuto__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.zb-tuto:hover img { transform: scale(1.04); }
.zb-tuto__play { position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--plum-deep); display: flex; align-items: center; justify-content: center; }
.zb-tuto__title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.zb-tuto__excerpt { font-size: .9rem; color: var(--ink-2); }

/* Article */
.zb-article__head { padding: 34px 0 26px; }
.zb-article__head h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 16px; }
.zb-article__lead { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 14px; }
.zb-article__meta { font-size: .84rem; color: var(--ink-2); }
.zb-article__cover { margin: 0 0 34px; border-radius: var(--r-lg); overflow: hidden; }
.zb-article > .zb-wrap { padding-bottom: 56px; }

/* Listes du magazine */
.zb-posts { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.zb-post { display: flex; flex-direction: column; gap: 12px; }
.zb-post__img { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.zb-post__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.zb-post:hover img { transform: scale(1.04); }
.zb-post__body { display: flex; flex-direction: column; gap: 6px; }
.zb-post__tag { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); }
.zb-post__title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.12; }
.zb-post:hover .zb-post__title { color: var(--plum); }
.zb-post__excerpt { font-size: .92rem; color: var(--ink-2); }
.zb-post__time { font-size: .8rem; color: var(--ink-2); }
.zb-feature { display: grid; gap: 22px; margin-bottom: 48px; }
@media (min-width: 1020px) { .zb-feature { grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: center; } }
.zb-feature__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--cream); }
.zb-feature__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zb-feature__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.zb-feature__title { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; }
.zb-feature__excerpt { color: var(--ink-2); }
.zb-glossary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 24px; }
.zb-glossary a { font-weight: 600; border-bottom: 1px solid var(--line); display: block; padding: 8px 0; }
.zb-glossary a:hover { color: var(--rose); }

/* ---------- Formulaire de demande ---------- */
.zb-lead { padding: 30px 0 70px; background: linear-gradient(var(--cream), var(--paper) 420px); }
.zb-lead__wrap { display: grid; gap: 28px; }
@media (min-width: 1020px) { .zb-lead__wrap { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .zb-lead__aside { position: sticky; top: 124px; } }
.zb-lead__aside h1 { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.04; margin-bottom: 12px; }
.zb-lead__aside > p { color: var(--ink-2); }
.zb-lead__ref { display: flex; gap: 14px; align-items: center; margin: 22px 0 0; padding: 12px; background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.zb-lead__ref img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; }
.zb-lead__ref figcaption { display: flex; flex-direction: column; font-size: .8rem; color: var(--ink-2); }
.zb-lead__ref strong { color: var(--ink); font-size: .95rem; }
.zb-lead__hd { margin-top: 20px; padding: 14px; background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.zb-lead__hd-id { display: flex; gap: 12px; align-items: center; }
.zb-lead__hd-id img, .zb-lead__hd-id .zb-author__ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.zb-lead__hd-id > span { display: flex; flex-direction: column; line-height: 1.3; }
.zb-lead__hd-id small { font-size: .74rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.zb-lead__hd-id strong { font-size: 1.05rem; color: var(--plum-deep); }
.zb-lead__hd-id em { font-style: normal; font-size: .84rem; color: var(--ink-2); }
.zb-lead__hd .zb-check-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; }
.zb-lead__proof { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.zb-lead__proof li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: .92rem; color: var(--plum-deep); }
@media (max-width: 1019px) { .zb-lead__proof { display: none; } }
.zb-wizard { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 20px 26px; }
@media (min-width: 760px) { .zb-wizard { padding: 34px 38px 36px; } }
.zb-wizard__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; counter-reset: s; }
.zb-wizard__steps li { counter-increment: s; font-size: .72rem; font-weight: 700; color: var(--ink-2); border-top: 3px solid var(--line); padding-top: 8px; transition: all .3s; }
.zb-wizard__steps li::before { content: counter(s) '. '; }
.zb-wizard__steps li.is-done, .zb-wizard__steps li.is-on { border-color: var(--rose); color: var(--plum-deep); }
/* Mobile : toutes les etapes nommees, en libelle court */
.zb-wizard__short { display: none; }
@media (max-width: 759px) { .zb-wizard__long { display: none; } .zb-wizard__short { display: inline; } .zb-wizard__steps li { font-size: .7rem; line-height: 1.25; } }
.zb-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.zb-step legend { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; margin-bottom: 18px; padding: 0; }
.js .zb-step:not(.is-on) { display: none; }
.zb-step + .zb-step { margin-top: 36px; }
.js .zb-step + .zb-step { margin-top: 0; }
.zb-label { display: block; font-weight: 700; font-size: .9rem; margin: 20px 0 8px; }
.zb-label:first-of-type { margin-top: 0; }
.zb-label small { font-weight: 500; color: var(--ink-2); }
.zb-input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; appearance: none; }
select.zb-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e586b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.zb-input:focus { outline: 0; border-color: var(--plum); box-shadow: 0 0 0 4px rgba(110, 88, 107, .12); }
.zb-input.is-error { border-color: #c24a6f; }
.zb-input--date { max-width: 240px; }
textarea.zb-input { resize: vertical; min-height: 96px; }
.zb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-pill { position: relative; cursor: pointer; }
.zb-pill input { position: absolute; opacity: 0; pointer-events: none; }
.zb-pill span { display: inline-block; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: all .15s; }
.zb-pill:hover span { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-pill input:checked + span { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-pill input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.zb-grid2, .zb-grid3 { display: grid; gap: 14px; }
@media (min-width: 760px) { .zb-grid2 { grid-template-columns: 1fr 1fr; gap: 18px; } .zb-grid3 { grid-template-columns: repeat(3, 1fr); } }
.zb-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zb-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: all .15s; color: var(--plum-deep); }
.zb-choice input { position: absolute; opacity: 0; }
.zb-choice strong { font-size: .92rem; color: var(--ink); }
.zb-choice small { font-size: .76rem; color: var(--ink-2); line-height: 1.3; }
.zb-choice:has(input:checked), .zb-choice.is-on { box-shadow: inset 0 0 0 2px var(--plum-deep); background: var(--cream); }
.zb-choice--row { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 8px; }
@media (max-width: 459px) { .zb-cards3 { grid-template-columns: 1fr; } .zb-choice { flex-direction: row; align-items: center; flex-wrap: wrap; } .zb-choice small { flex-basis: 100%; } }
.zb-switch { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.zb-switch input { position: absolute; opacity: 0; }
.zb-switch__ui { width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex-shrink: 0; }
.zb-switch__ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.zb-switch input:checked + .zb-switch__ui { background: var(--rose); }
.zb-switch input:checked + .zb-switch__ui::after { transform: translateX(18px); }
.zb-check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin-top: 12px; cursor: pointer; }
.zb-check-line input { margin-top: 3px; accent-color: var(--plum-deep); width: 17px; height: 17px; flex-shrink: 0; }
.zb-check-line a { text-decoration: underline; }
.zb-check-line.is-error { color: #b0345a; }
.zb-range { width: 100%; accent-color: var(--plum-deep); }
.zb-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 150px; padding: 18px; border-radius: var(--r-md); border: 1.5px dashed #d8c8c4; background: var(--paper); color: var(--plum); cursor: pointer; transition: all .2s; }
.zb-drop:hover, .zb-drop.is-over { border-color: var(--plum); background: var(--cream); }
.zb-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zb-drop strong { color: var(--ink); font-size: .92rem; }
.zb-drop small { color: var(--ink-2); font-size: .78rem; }
.zb-drop__thumbs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.zb-drop__thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.zb-wizard__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.zb-wizard__nav [data-next], .zb-wizard__nav [data-submit] { margin-left: auto; }
.js .zb-wizard:not(.is-last) [data-submit] { display: none; }
.js .zb-wizard.is-last [data-next] { display: none; }
.zb-wizard:not(.js-ready) [data-next], .zb-wizard:not(.js-ready) [data-prev] { display: none; }
.zb-ac { position: relative; }
.zb-ac__list { position: absolute; z-index: 70; left: 0; right: 0; min-width: 240px; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(44, 33, 48, .35); overflow: hidden; }
.zb-ac__list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .94rem; }
.zb-ac__list li small { color: var(--ink-2); margin-left: 6px; }
.zb-ac__list li:hover, .zb-ac__list li.is-active { background: var(--cream); }
.zb-done { text-align: center; }
.zb-done__icon { display: inline-flex; width: 76px; height: 76px; border-radius: 50%; align-items: center; justify-content: center; background: var(--cream); color: var(--rose); margin-bottom: 18px; }
.zb-done h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 12px; }
.zb-done__lead { font-size: 1.1rem; color: var(--ink-2); max-width: 54ch; margin: 0 auto 30px; }
.zb-done__next { list-style: none; counter-reset: n; text-align: left; display: grid; gap: 12px; margin: 0 auto 26px; padding: 0; max-width: 520px; }
.zb-done__next li { counter-increment: n; display: flex; flex-direction: column; padding: 16px 18px 16px 58px; position: relative; background: var(--cream); border-radius: var(--r-md); }
.zb-done__next li::before { content: counter(n); position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--plum-deep); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.zb-done__next span { color: var(--ink-2); font-size: .9rem; }
.zb-done__cta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; margin-top: 26px; }

/* ---------- Blocs generiques (espaces connectes) ---------- */
.zb-box { background: #fff; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); padding: 22px 20px; margin-bottom: 18px; }
@media (min-width: 760px) { .zb-box { padding: 26px 28px; } }
.zb-box h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
.zb-box--accent { background: var(--cream); box-shadow: none; }
.zb-box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zb-box__head h2 { margin: 0; }
.zb-box__sub { font-size: .9rem; margin: 20px 0 8px; }
.zb-form label:not(.zb-check-line):not(.zb-pill):not(.zb-choice):not(.zb-switch):not(.zb-photo):not(.zb-photoadd):not(.zb-avatarpick__box) { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 14px; }
.zb-form label .zb-input { margin-top: 6px; font-weight: 400; }
.zb-form h2 { margin-top: 10px; }
.zb-form__bar { position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, var(--paper) 30%); display: flex; justify-content: flex-end; }
.zb-badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--ink-2); white-space: nowrap; }
.zb-badge--ok { background: #e5f4ea; color: #24623a; }
.zb-badge--rose { background: #fbe6ec; color: #a33d5c; }
.zb-leadrow { display: flex; justify-content: space-between; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.zb-leadrow:last-child { border-bottom: 0; }
.zb-leadrow:hover .zb-leadrow__main strong { color: var(--rose); }
.zb-leadrow__main { display: flex; flex-direction: column; min-width: 0; }
.zb-leadrow__main span { font-size: .86rem; color: var(--ink-2); }
.zb-leadrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.zb-leadrow__side time { font-size: .76rem; color: var(--ink-2); }
.zb-leadrow.is-unread .zb-leadrow__main strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); margin-right: 8px; vertical-align: middle; }
.zb-table-list { width: 100%; border-collapse: collapse; font-size: .92rem; }
.zb-table-list td { padding: 11px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.zb-table-list td:last-child { text-align: right; white-space: nowrap; }
.zb-table-list small { display: block; color: var(--ink-2); font-size: .84rem; }
.is-neg { color: #a33d5c; font-weight: 700; }
.is-pos { color: #24623a; font-weight: 700; }
.zb-stars { color: #e3a33a; letter-spacing: 1px; }
.zb-stars i { color: var(--line); font-style: normal; }
.zb-review-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.zb-review-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .9rem; }
.zb-review-item header span:not(.zb-stars), .zb-review-item time { color: var(--ink-2); font-size: .82rem; }
.zb-review-item__reply { margin-top: 10px; padding: 12px 14px; background: var(--cream); border-radius: 12px; font-size: .9rem; }
.zb-box.zb-review-item { border-bottom: 0; }

/* Espace coiffeuse */
.zb-app { display: grid; min-height: calc(100vh - 84px); }
@media (min-width: 1020px) { .zb-app { grid-template-columns: 280px minmax(0, 1fr); } }
.zb-app__side { background: var(--plum-ink); color: #fff; padding: 18px 16px; }
@media (min-width: 1020px) { .zb-app__side { padding: 28px 18px; position: sticky; top: 96px; height: calc(100vh - 96px); overflow: auto; } }
.zb-app__who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.zb-app__who img, .zb-app__who .zb-author__ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.zb-app__who span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.zb-app__who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-app__who small { color: var(--rose-soft); font-size: .78rem; }
.zb-app__nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1020px) { .zb-app__nav { flex-direction: column; } }
.zb-app__nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.zb-app__nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.zb-app__nav a[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; }
.zb-app__badge { margin-left: auto; font-size: .74rem; background: var(--rose); color: #fff; padding: 2px 8px; border-radius: 999px; }
.zb-app__main { padding: 26px 20px 60px; min-width: 0; background: var(--paper); }
.zb-wrongsite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 22px; padding: 16px 18px; border-radius: 16px; background: #fff4e5; border: 1px solid #f3d6a8; }
.zb-wrongsite svg { color: #b26a00; flex: none; }
.zb-wrongsite p { flex: 1 1 220px; margin: 0; }
@media (min-width: 1020px) { .zb-app__main { padding: 40px 44px 80px; } }
.zb-app__head { margin-bottom: 22px; }
.zb-app__head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.08; }
.zb-app__sub { color: var(--ink-2); margin-top: 6px; font-size: .94rem; }
.zb-app__cols { display: grid; gap: 18px; }
@media (min-width: 1200px) { .zb-app__cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .zb-app__cols--wide { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }
.zb-app__cols > .zb-box { margin: 0; }
.zb-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (min-width: 760px) { .zb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zb-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-kpi span { font-size: .78rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.zb-kpi strong { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--plum-deep); font-weight: 400; }
a.zb-kpi:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-meter { height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.zb-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--plum), var(--rose)); border-radius: inherit; }
.zb-facts { display: grid; gap: 10px; margin: 18px 0 0; }
.zb-facts--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 16px; }
.zb-facts div { display: flex; flex-direction: column; }
.zb-facts dt { font-size: .76rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.zb-facts dd { margin: 2px 0 0; font-weight: 600; }
.zb-minireview { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); }
.zb-minireview strong { display: block; color: var(--ink); }
.zb-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.zb-tabs a { padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.zb-tabs a span { font-size: .78rem; opacity: .7; margin-left: 4px; }
.zb-tabs a[aria-current] { background: var(--plum-deep); color: #fff; }
.zb-quote { margin: 0 0 16px; padding: 14px 16px; background: var(--cream); border-radius: 12px; font-size: .95rem; }
.zb-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.zb-assets img, .zb-assets video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.zb-contact { display: flex; flex-direction: column; gap: 8px; }
.zb-contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--plum-deep); }
.zb-price { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--plum-deep); margin: 4px 0 8px; }
.zb-price small { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); }
.zb-price--lg { font-size: 2.4rem; }
.zb-price s { font-size: 1.2rem; color: var(--ink-2); }
.zb-stack { display: grid; gap: 8px; margin: 16px 0 10px; }
.zb-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.zb-msg { max-width: 82%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--cream); font-size: .94rem; }
.zb-msg.is-me { align-self: flex-end; background: var(--plum-deep); color: #fff; border-radius: 16px 16px 4px 16px; }
.zb-msg time { display: block; font-size: .72rem; opacity: .65; margin-top: 4px; }
.zb-msg__prop { font-weight: 700; margin-top: 6px; }
.zb-reply { display: grid; gap: 10px; }
.zb-reply .zb-btn { justify-self: start; }
.zb-proposal { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; }
.zb-proposal summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--plum-deep); }
.zb-proposal[open] summary { margin-bottom: 12px; }
.zb-proposal label { font-size: .84rem; font-weight: 700; display: block; }
.zb-proposal label .zb-input { margin-top: 4px; }
.zb-archive { margin-top: 14px; }
.zb-archive .zb-link { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 2px; }
.zb-prop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--cream); }
.zb-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 760px) { .zb-packs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .zb-packs { grid-template-columns: repeat(6, 1fr); } }
.zb-pack { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 22px 14px 16px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-pack.is-best { box-shadow: inset 0 0 0 2px var(--rose); }
.zb-pack__flag { position: absolute; top: -10px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--rose); color: #fff; padding: 3px 10px; border-radius: 999px; }
.zb-pack strong { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-weight: 400; color: var(--plum-deep); }
.zb-pack span { font-size: .8rem; color: var(--ink-2); }
.zb-pack em { font-style: normal; font-weight: 800; font-size: 1.1rem; margin-top: 8px; }
.zb-pack small { font-size: .74rem; color: var(--ink-2); margin-bottom: 12px; }
.zb-pack .zb-btn { min-height: 40px; padding: 0 16px; font-size: .86rem; }
.zb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.zb-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.zb-photo span { font-size: .78rem; color: var(--ink-2); display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.zb-prices .zb-grid3 { margin-bottom: 8px; }
/* Un tarif par bloc : trait de separation entre deux tarifs */
.zb-prices .zb-grid3 + .zb-grid3 { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.zb-prices + .zb-link { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* Connexion */
.zb-auth { max-width: 460px; }
.zb-auth h1 { font-family: var(--serif); font-size: 2.3rem; margin-bottom: 18px; }
.zb-auth .zb-btn { width: 100%; }
.zb-auth__or { text-align: center; margin: 18px 0; position: relative; color: var(--ink-2); font-size: .84rem; }
.zb-auth__or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.zb-auth__forgot { margin-top: 16px; }
.zb-auth__forgot summary { cursor: pointer; list-style: none; text-align: center; font-size: .9rem; }
.zb-auth__forgot summary::-webkit-details-marker { display: none; }
.zb-auth__forgot[open] summary { margin-bottom: 12px; }
.zb-auth__or span { position: relative; background: #fff; padding: 0 12px; }
.zb-auth__pro { text-align: center; margin-top: 18px; font-size: .92rem; }
.zb-lead-p { color: var(--ink-2); margin-bottom: 22px; }

/* Annuaire des coiffeuses */
.zb-hds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.zb-hd { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.zb-hd:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.zb-hd__img { position: relative; aspect-ratio: 4 / 3; background: var(--cream); }
.zb-hd__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zb-hd__body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; font-size: .88rem; color: var(--ink-2); }
.zb-hd__body strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 1rem; }
.zb-hd__rating { color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.zb-hd__rating .zb-ic { color: #e3a33a; }
.zb-hd__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.zb-hd__tags em { font-style: normal; font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--cream); color: var(--plum-deep); }
.zb-verified { color: var(--rose); display: inline-flex; }
.zb-citylist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 20px; }
.zb-citylist a { display: block; padding: 7px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.zb-citylist a:hover { color: var(--rose); }
.zb-profile { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.zb-profile__id { display: flex; gap: 20px; align-items: center; }
.zb-profile__avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 2.6rem; }
.zb-profile h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; display: flex; gap: 10px; align-items: center; }
.zb-profile__meta { color: var(--ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.zb-profile__meta .zb-ic { color: #e3a33a; }
.zb-profile__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.zb-profile__meta a:hover { color: var(--rose); }
#avis, #realisations { scroll-margin-top: 100px; }
@media (max-width: 759px) { .zb-profile__avatar { width: 84px; height: 84px; } .zb-profile .zb-btn { width: 100%; } }

/* Boutique */
.zb-center { text-align: center; }
.zb-muted { color: var(--ink-2); font-size: .92rem; margin-top: 10px; }
.zb-perks { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 0; }
.zb-perks li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--plum-deep); }
.zb-catalog { display: grid; gap: 26px; }
@media (min-width: 1020px) { .zb-catalog { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; } }
.zb-catalog__filters details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.zb-catalog__filters summary { font-weight: 700; cursor: pointer; font-size: .94rem; }
.zb-catalog__filters ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.zb-catalog__filters a { display: block; padding: 5px 0; font-size: .9rem; color: var(--ink-2); }
.zb-catalog__filters a:hover, .zb-catalog__filters a[aria-current] { color: var(--rose); font-weight: 700; }
.zb-catalog__search { margin-bottom: 4px; }
@media (max-width: 1019px) { .zb-catalog__filters { display: flex; gap: 10px; flex-wrap: wrap; } .zb-catalog__filters details { border: 0; padding: 0; position: relative; } .zb-catalog__filters summary { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; list-style: none; } .zb-catalog__filters details[open] ul { position: absolute; z-index: 10; background: #fff; box-shadow: var(--shadow); border-radius: 12px; padding: 10px 14px; min-width: 220px; } .zb-catalog__search { flex-basis: 100%; } }
.zb-prods { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .zb-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .zb-prods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zb-prod { display: flex; flex-direction: column; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.zb-prod__img { position: relative; aspect-ratio: 1; background: var(--cream); }
.zb-prod__img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.zb-prod__promo { position: absolute; top: 10px; left: 10px; background: var(--rose); color: #fff; font-size: .74rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.zb-prod__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.zb-prod__brand { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--plum); }
.zb-prod h3 { font-size: .94rem; font-weight: 600; line-height: 1.3; }
.zb-prod h3 a:hover { color: var(--rose); }
.zb-prod__price { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; align-items: baseline; }
.zb-prod__price s { color: var(--ink-2); font-size: .84rem; }
.zb-prod form { margin-top: 8px; }
.zb-prod form .zb-btn { width: 100%; }
.zb-prod__out { font-size: .84rem; color: var(--ink-2); margin-top: 8px; }
.zb-buy { display: flex; gap: 10px; margin: 18px 0 8px; }
.zb-qty input { width: 76px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line); text-align: center; font: inherit; font-weight: 700; }
.zb-cart { display: grid; gap: 22px; }
@media (min-width: 1020px) { .zb-cart { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .zb-cart__sum { position: sticky; top: 120px; } }
.zb-cartline { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.zb-cartline__img img { width: 64px; height: 64px; object-fit: contain; background: var(--cream); border-radius: 10px; }
.zb-cartline__name { display: flex; flex-direction: column; font-weight: 600; font-size: .94rem; }
.zb-cartline__name small { color: var(--ink-2); font-weight: 500; }
.zb-cartline .zb-qty input { width: 62px; height: 40px; }
.zb-coupon { display: flex; gap: 8px; margin-top: 16px; max-width: 360px; }
.zb-sum { margin: 16px 0; display: grid; gap: 8px; }
.zb-sum div { display: flex; justify-content: space-between; font-size: .94rem; }
.zb-sum dd { margin: 0; font-weight: 700; }
.zb-sum__total { border-top: 1px solid var(--line); padding-top: 10px; font-size: 1.1rem !important; }
.zb-sumline { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 6px 0; }

/* Page coiffeuses (recrutement) */
.zb-hero--pro { background: linear-gradient(90deg, rgba(74, 57, 72, .94) 0%, rgba(74, 57, 72, .78) 48%, rgba(74, 57, 72, .2) 100%), var(--hero-img, none) center right / cover no-repeat, var(--plum-deep); color: #fff; padding: 80px 0 90px; }
@media (max-width: 760px) { .zb-hero--pro { background: linear-gradient(180deg, rgba(74, 57, 72, .55) 0%, rgba(74, 57, 72, .92) 55%), var(--hero-img, none) 70% top / cover no-repeat, var(--plum-deep); padding: 180px 0 48px; } }
/* Credits offerts : une ligne discrete sous les boutons, pas un encart */
.zb-hero__gift { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.zb-hero__gift svg { flex-shrink: 0; color: #e8c07a; }
.zb-hero__gift strong { color: #fff; font-weight: 700; }
.zb-perks { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) { .zb-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .zb-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zb-perk { background: #fff; border-radius: 18px; padding: 24px; }
/* Icone en pastille a gauche du titre, texte dessous sur toute la largeur */
.zb-perk { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; }
.zb-perk > svg { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 14px; background: var(--cream); color: var(--plum); margin: 0; }
.zb-perk > h3 { margin: 0; }
.zb-perk > p { grid-column: 1 / -1; }
/* Derniere carte (SAV) sur toute la largeur */
.zb-perk--wide { grid-column: 1 / -1; }
.zb-perk h3 { font-size: 1.1rem; }
.zb-perk p { color: var(--ink-2); margin: 0; }
.zb-modes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 28px; }
.zb-mode { border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.zb-mode h3 { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 8px; }
.zb-mode > p:not(.zb-kicker) { color: var(--ink-2); }
.zb-mode--plum { background: var(--plum-deep); border-color: var(--plum-deep); color: #fff; }
.zb-mode--plum > p:not(.zb-kicker) { color: rgba(255, 255, 255, .8); }
.zb-mode--plum .zb-checks svg { color: var(--rose-soft); }
.zb-hero__pro h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; max-width: 16ch; margin-bottom: 18px; }
.zb-hero__pro h1 em { color: var(--rose-soft); }
@media (min-width: 1020px) { .zb-hero__pro h1 { max-width: none; font-size: clamp(2.6rem, 4.6vw, 4.4rem); } html:not([lang="ja"]) .zb-hero__pro h1 em { display: block; } }
.zb-hero__pro .zb-hero__lead { color: rgba(255, 255, 255, .8); max-width: 56ch; font-size: 1.1rem; }
.zb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zb-stepcards { display: grid; gap: 16px; }
@media (min-width: 760px) { .zb-stepcards { grid-template-columns: repeat(3, 1fr); } }
.zb-step-card { position: relative; padding: 28px 24px; border-radius: var(--r-lg); background: var(--cream); color: var(--plum-deep); }
.zb-step-card__n { position: absolute; right: 22px; top: 18px; font-family: var(--serif); font-size: 2.4rem; color: var(--rose-soft); }
.zb-step-card h3 { margin: 16px 0 6px; color: var(--ink); }
.zb-step-card p { color: var(--ink-2); font-size: .94rem; }
.zb-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1020px) { .zb-split { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.zb-checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.zb-checks li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.zb-checks .zb-ic { color: var(--rose); }
.zb-pricebox { text-align: center; padding: 34px; }
.zb-pricebox p:not(.zb-kicker):not(.zb-price) { color: var(--ink-2); margin-bottom: 20px; }

/* Panier du header, menu mobile */
.zb-cartbtn { position: relative; }
.zb-cartbtn__n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.zb-nav a[aria-current] { color: var(--rose); }
.zb-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(34, 26, 36, .45); }
.zb-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--paper); padding: 22px 24px 30px; display: flex; flex-direction: column; overflow: auto; animation: zb-drawer .25s ease-out; }
@keyframes zb-drawer { from { transform: translateX(100%); } }
.zb-drawer__close { align-self: flex-end; }
.zb-drawer nav { display: flex; flex-direction: column; margin: 10px 0 24px; }
.zb-drawer nav a { font-family: var(--serif); font-size: 1.9rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.zb-drawer__foot { display: grid; gap: 10px; margin-top: auto; }
.zb-drawer__pro { text-align: center; font-weight: 700; color: var(--plum); padding: 8px; }
@media (min-width: 1200px) { .zb-header__menu { display: none; } }

/* Back-office */
.zb-app--admin .zb-app__side { background: #1f1822; }
.zb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.zb-filters .zb-input { width: auto; flex: 1 1 180px; padding: 9px 12px; }
.zb-filters select.zb-input { flex: 0 1 180px; }
.zb-admintable td { vertical-align: middle; }
.zb-admintable td:last-child { text-align: left; }
.zb-admintable img { object-fit: cover; border-radius: 8px; }
.zb-admintable a strong:hover { color: var(--rose); }
.zb-input--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; line-height: 1.5; }
.zb-modgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.zb-moditem { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.zb-moditem__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.zb-moditem__imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.zb-moditem small { color: var(--ink-2); }
.zb-moditem p { font-size: .86rem; }
.zb-modact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.zb-leadrow .zb-modact { padding: 0; flex-shrink: 0; }
.zb-chart { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-bottom: 18px; }
.zb-chart__col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.zb-chart__col span { width: 45%; min-height: 1px; border-radius: 3px 3px 0 0; }
.zb-chart__a { background: var(--plum); }
.zb-chart__b { background: var(--rose); }
.zb-chart__col small { position: absolute; bottom: -18px; font-size: .64rem; color: var(--ink-2); }
.zb-chart__legend { font-size: .8rem; color: var(--ink-2); display: flex; gap: 12px; align-items: center; }
.zb-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.zb-chart__legend .is-a { background: var(--plum); }
.zb-chart__legend .is-b { background: var(--rose); }
.zb-cancel { margin: 22px 0; } .zb-cancel .zb-link { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; color: #a33d5c; }
.zb-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 14px; }
.zb-rate input { position: absolute; opacity: 0; }
.zb-rate label { font-size: 2rem; color: var(--line); cursor: pointer; transition: color .15s; }
.zb-rate input:checked ~ label, .zb-rate label:hover, .zb-rate label:hover ~ label { color: #e3a33a; }
/* Accueil : dernieres coiffeuses inscrites, specialites */
.zb-newcomers { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.zb-newcomers__label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px !important; }
.zb-newcomers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.zb-newcomers a { display: flex; align-items: center; gap: 10px; }
.zb-newcomers img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.zb-newcomers span { display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; }
.zb-newcomers small { color: var(--ink-2); font-size: .8rem; }
.zb-newcomers a:hover strong { color: var(--rose); }
.zb-cities__sub { margin-top: 26px; }
/* Date de la realisation, tres discrete, en haut a droite de la carte */
.zb-style__date { position: absolute; z-index: 1; top: 12px; right: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .92); background: rgba(34, 26, 36, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.zb-style__date:empty { display: none; }
.zb-relay { min-height: 120px; margin: 8px 0 12px; border-radius: var(--r-md); overflow: hidden; }
.zb-relay__chosen { padding: 12px 14px; border-radius: 12px; background: #e5f4ea; color: #24623a; font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.zb-plans { display: grid; gap: 14px; margin: 6px 0 16px; }
@media (min-width: 900px) { .zb-plans { grid-template-columns: repeat(3, 1fr); } }
.zb-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-plan.is-best { box-shadow: inset 0 0 0 2px var(--rose); }
.zb-plan.is-current { background: var(--cream); }
.zb-plan .zb-pack__flag { left: 22px; }
.zb-plan .zb-checks { margin: 8px 0 18px; gap: 8px; font-size: .9rem; }
.zb-plan .zb-checks li::before { content: '✓'; color: var(--rose); font-weight: 800; margin-right: 8px; }
.zb-plan .zb-btn { margin-top: auto; }

/* Carrousel des categories : texte d'intro discret, lien de categorie en pastille */
.zb-head__lead { color: var(--ink-2); margin-top: 10px; font-size: .98rem; }
.zb-style__cap span { align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--plum-deep) !important; font-size: .78rem !important; font-weight: 700; transition: background .2s, color .2s; }
.zb-style__cap:hover span { background: var(--rose); color: #fff !important; }
.zb-wallet-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .zb-wallet-actions .zb-hint { flex-basis: 100%; }
/* Disponibilites */
.zb-avail { display: grid; gap: 8px; }
.zb-avail__row { display: grid; grid-template-columns: 130px 1fr auto 1fr; gap: 8px; align-items: center; }
.zb-avail__row .zb-check-line { margin: 0; }
.zb-avail__row .zb-input { padding: 9px 10px; }
.zb-week { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.zb-week li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--cream); font-size: .78rem; color: var(--ink-2); text-align: center; }
.zb-week li.is-on { background: var(--plum-deep); color: #fff; }
.zb-week strong { font-size: .84rem; }
@media (max-width: 559px) { .zb-week { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Formulaire de demande : selecteurs illustres ---------- */
/* Le formulaire de l'accueil passe au-dessus des blocs suivants (suggestions, panneaux) */
.zb-hero { position: relative; z-index: 3; }
.zb-hero__search { position: relative; z-index: 5; }
.zb-field .zb-ac { position: static; }
.zb-field { position: relative; }
.zb-pick { position: relative; }
.zb-pick__btn, .zb-opt-pick__btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; text-align: left; }
.zb-pick__btn .zb-ic, .zb-opt-pick__btn .zb-ic { margin-left: auto; color: var(--ink-2); flex-shrink: 0; }
.zb-pick__thumb:empty { display: none; }
.zb-pick__thumb img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.zb-pick__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-pick__panel { position: absolute; z-index: 80; top: calc(100% + 14px); left: -40px; width: min(560px, 92vw); max-height: 70vh; overflow: auto; background: #fff; border-radius: var(--r-lg); box-shadow: 0 24px 60px -16px rgba(44, 33, 48, .45); padding: 14px; }
.zb-pick__top { position: sticky; top: -14px; z-index: 1; display: flex; gap: 8px; align-items: center; background: #fff; padding: 0 0 12px; margin-top: -2px; }
.zb-pick__search { flex: 1; padding: 11px 14px; }
@media (max-width: 759px) {
    .zb-pick:not(.zb-pick--inline) .zb-pick__panel { position: fixed; inset: auto 0 0 0; top: 8vh; width: 100%; max-height: none; border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
    body.zb-sheet-open { overflow: hidden; }
}
.zb-pick--inline .zb-pick__panel { position: static; width: auto; max-height: none; box-shadow: none; padding: 0; overflow: visible; }
.zb-pick--inline .zb-pick__top { position: static; padding: 0 0 12px; }
.zb-pick__current { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; border-radius: 999px; background: var(--plum-deep); color: #fff; font-weight: 700; font-size: .9rem; }
.zb-fams { display: grid; gap: 8px; }
.zb-fam__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: var(--cream); font: inherit; cursor: pointer; text-align: left; transition: background .15s; }
.zb-fam__head:hover { background: #f1e5e1; }
.zb-fam__row { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: var(--cream); }
.zb-fam__row .zb-fam__head { flex: 1; min-width: 0; border-radius: 0; }
.zb-fam__head.is-on { background: var(--plum-deep); color: #fff; }
.zb-fam__head.is-on small { color: rgba(255, 255, 255, .75); }
.zb-fam__head.is-on .zb-fam__name { color: #fff; }
.zb-fam__toggle { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid #fff; background: #e6dcea; color: var(--plum-deep); cursor: pointer; }
.zb-fam__toggle:hover, .zb-fam__toggle[aria-expanded="true"] { background: #d6c6dd; }
.zb-fam__toggle[aria-expanded="true"] .zb-fam__chev { transform: rotate(180deg); }
.zb-fam__img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 11px; overflow: hidden; background: var(--rose-soft); }
.zb-fam__img img { width: 100%; height: 100%; object-fit: cover; }
.zb-fam__name { display: flex; flex-direction: column; font-weight: 700; color: var(--ink); line-height: 1.25; }
.zb-fam__name small { font-weight: 500; color: var(--ink-2); font-size: .78rem; }
.zb-fam__chev { color: inherit; transition: transform .2s; }
.zb-fam__head[aria-expanded="true"] .zb-fam__chev { transform: rotate(180deg); }
.zb-fam__kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 8px 2px 4px; }
.zb-kid { display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; line-height: 1.2; }
.zb-kid:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-kid.is-on { box-shadow: inset 0 0 0 2px var(--rose); background: #fdf3f6; }
.zb-kid__img { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--plum); }
.zb-kid__img img { width: 100%; height: 100%; object-fit: cover; }

.zb-opt-pick { position: relative; }
.zb-opt-pick__panel { position: absolute; z-index: 80; top: calc(100% + 14px); left: -40px; width: max-content; max-width: 92vw; background: #fff; border-radius: var(--r-lg); box-shadow: 0 24px 60px -16px rgba(44, 33, 48, .45); padding: 12px; }
.zb-tiles { display: grid; grid-template-columns: repeat(3, 104px); gap: 8px; }
.zb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 10px 6px; border: 0; border-radius: 14px; background: var(--cream); font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink); cursor: pointer; text-align: center; line-height: 1.2; transition: all .15s; }
.zb-tile .zb-ic { color: var(--plum); }
.zb-tile:hover { background: #f1e5e1; }
.zb-tile.is-on { background: var(--plum-deep); color: #fff; }
.zb-tile.is-on .zb-ic { color: var(--rose-soft); }
.zb-km { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 600; }
.zb-km select { font: inherit; font-weight: 700; border: 0; background: var(--cream); border-radius: 8px; padding: 4px 8px; margin-left: 6px; }
@media (max-width: 759px) { .zb-opt-pick__panel { left: 0; } .zb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100vw - 72px); } }

/* Pastilles a icones (page /demande) */
.zb-pills--icons .zb-pill span { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; padding: 12px 12px 10px; border-radius: 16px; }
.zb-pills--icons .zb-pill .zb-ic { color: var(--plum); }
.zb-pills--icons .zb-pill input:checked + span .zb-ic { color: var(--rose-soft); }
.zb-pills--km .zb-pill span { padding: 7px 12px; font-size: .84rem; }

/* Pays du champ ville */
.zb-cc { position: relative; display: inline-flex; vertical-align: middle; margin-right: 6px; }
.zb-cc__btn { display: inline-flex; align-items: center; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; opacity: .85; }
.zb-cc__btn:hover { background: var(--cream); opacity: 1; }
.zb-cc__btn .fi { width: 18px; line-height: 13px; border-radius: 2px; }
.zb-cc__panel { position: absolute; z-index: 90; top: calc(100% + 10px); left: -6px; width: 240px; max-height: 300px; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(44, 33, 48, .35); padding: 6px; scrollbar-width: thin; }
.zb-cc__panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; text-align: left; }
.zb-cc__panel button:hover, .zb-cc__panel button[aria-selected] { background: var(--cream); }

.zb-ac--cc { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); padding-left: 8px; }
.zb-ac--cc .zb-input { border: 0; background: transparent; padding-left: 4px; }
.zb-ac--cc:focus-within { border-color: var(--plum); box-shadow: 0 0 0 4px rgba(110, 88, 107, .12); }
.zb-ac--cc .zb-input:focus { box-shadow: none; }

/* Version compacte dans le libelle « VILLE » de l'accueil */
.zb-field__label--cc { display: flex; align-items: center; gap: 8px; }
.zb-cc--compact { margin: 0 0 0 auto; }
.zb-cc--compact .zb-cc__btn { gap: 4px; padding: 1px 6px; border-radius: 999px; background: var(--cream); color: var(--ink-2); font-size: .66rem; font-weight: 700; letter-spacing: .04em; opacity: 1; }
.zb-cc--compact .zb-cc__btn .fi { width: 14px; line-height: 10px; }
.zb-cc--compact .zb-cc__panel { left: auto; right: -8px; text-transform: none; letter-spacing: 0; }
.zb-cc__panel button { font-weight: 500; }

/* Entrees par profil sous le carrousel des coiffures */
.zb-profiles { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.zb-profiles a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: all .2s; }
.zb-profiles a .zb-ic { color: var(--plum); }
.zb-profiles a:hover { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-profiles a:hover .zb-ic { color: var(--rose-soft); }

/* ---------- Sticky form (pages coiffures et coiffeuses) ---------- */
.zb-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 252, 251, .96); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -18px rgba(44, 33, 48, .35); }
.zb-sticky__inner { display: flex; align-items: center; gap: 10px; }
.zb-sticky__field { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 12px; border-right: 1px solid var(--line); color: var(--plum); }
.zb-sticky__field > .zb-ic { flex-shrink: 0; }
.zb-sticky__field .zb-field__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zb-sticky__field .zb-field__label { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.zb-sticky__field input[data-ac-input] { border: 0; background: none; font: inherit; font-weight: 700; font-size: .98rem; color: var(--ink); padding: 0; width: 100%; outline: none; }
.zb-sticky__go { min-height: 46px; flex-shrink: 0; }
/* Les panneaux s'ouvrent vers le haut */
.zb-sticky .zb-pick__panel, .zb-sticky .zb-opt-pick__panel, .zb-sticky .zb-cc__panel { top: auto; bottom: calc(100% + 18px); }
.zb-sticky .zb-ac__list { top: auto; bottom: calc(100% + 10px); }
body:has(.zb-sticky) .zb-footer { padding-bottom: 96px; }
@media (max-width: 759px) {
    .zb-sticky__style, .zb-sticky__for { display: none; }
    .zb-sticky__field { border: 0; padding: 0 4px; }
    .zb-sticky__go { padding: 0 16px; }
    .zb-sticky .zb-pick__panel { bottom: auto; }
}

.zb-profiles--facets { margin: 0 0 12px; }
.zb-profiles a.is-on { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-profiles a.is-on .zb-ic { color: var(--rose-soft); }
/* Pastilles defilantes : fleches et fondu sur les bords */
.zb-scroller { position: relative; }
.zb-scroller::before, .zb-scroller::after { content: ''; position: absolute; top: 0; bottom: 4px; width: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.zb-scroller::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.zb-scroller::after { right: -20px; background: linear-gradient(270deg, var(--cream) 30%, transparent); }
.zb-scroller.has-less::before, .zb-scroller.has-more::after { opacity: 1; }
.zb-scroller__btn { position: absolute; z-index: 2; top: 50%; transform: translateY(calc(-50% - 2px)); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--plum-deep); box-shadow: 0 6px 18px -6px rgba(44, 33, 48, .35); cursor: pointer; }
.zb-scroller__btn:hover { background: var(--plum-deep); color: #fff; }
.zb-scroller__btn--prev { left: -6px; }
.zb-scroller__btn--next { right: -6px; }
@media (max-width: 759px) { .zb-scroller__btn { display: none; } }
/* Introduction des pages listes : toute la largeur, raccourcie a 2 lignes avec « Lire la suite » */
.zb-pagehead__lead { max-width: none; }
.zb-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px !important; }
.zb-clamp.is-open { display: block; -webkit-line-clamp: unset; }
.zb-clamp__more { display: inline-block; margin: 0 0 20px; padding: 0; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 700; color: var(--plum-deep); border-bottom: 1.5px solid currentColor; cursor: pointer; }
.zb-clamp__more:hover { color: var(--rose); }
/* Facettes compactes sur mobile : une ligne defilante par groupe */
@media (max-width: 759px) {
    .zb-pagehead { padding: 22px 0 18px; }
    .zb-pagehead h1 { margin-bottom: 8px; }
    .zb-profiles--facets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 8px 0; padding-right: 20px; gap: 6px; }
    .zb-profiles--facets::-webkit-scrollbar { display: none; }
    .zb-profiles--facets a { flex-shrink: 0; padding: 6px 12px 6px 9px; font-size: .82rem; gap: 6px; white-space: nowrap; }
    .zb-profiles--facets a .zb-ic { width: 16px; height: 16px; }
    .zb-chips--scroll .zb-chip { padding: 7px 13px; font-size: .82rem; }
    .zb-clamp__more { margin-bottom: 12px; }
}
.zb-pagehead h1 + .zb-profiles--facets { margin: 4px 0 14px; }

.zb-clamp-wrap { position: relative; margin-bottom: 18px; }
.zb-clamp-wrap .zb-clamp { margin-bottom: 0 !important; padding-right: 40px; cursor: pointer; }
.zb-clamp__toggle { position: absolute; right: 0; bottom: 2px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--plum-deep); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: transform .2s, background .2s; }
.zb-clamp__toggle:hover { background: var(--plum-deep); color: #fff; }
.zb-clamp__toggle[aria-expanded="true"] { transform: rotate(180deg); }
@media (max-width: 759px) { .zb-clamp-wrap { margin-bottom: 12px; } }

.zb-sticky__title { display: flex; flex-direction: column; flex-shrink: 0; padding-right: 14px; margin: 0; border-right: 1px solid var(--line); line-height: 1.2; }
.zb-sticky__title strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--plum-deep); }
.zb-sticky__title span { font-size: .74rem; color: var(--ink-2); }
@media (min-width: 760px) and (max-width: 1100px) { .zb-sticky__title { display: none; } }
@media (max-width: 759px) {
    .zb-sticky { padding-top: 8px; }
    .zb-sticky__inner { flex-wrap: wrap; row-gap: 6px; }
    .zb-sticky__title { display: none; }
    /* Mobile : titre + bouton pleine largeur ; ville, coiffure et profil de la page partent en champs caches */
    .zb-sticky__city { display: none; }
    .zb-sticky__go { flex: 1; }
}

/* Formulaire simplifie de l'accueil : ville + coiffure + bouton */
@media (min-width: 760px) { .zb-hero__search .zb-search__row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr) auto; } .zb-hero__search .zb-search__go { margin-left: 8px; min-height: 50px; padding: 0 24px; } }
@media (max-width: 759px) { .zb-hero__search .zb-search__row .zb-field { grid-column: 1 / -1; } }

/* Delai : libelles plus longs, une colonne de vignettes */
.zb-opt-pick[data-opt-pick] .zb-tiles:has([data-opt-choice="urgent"]) { grid-template-columns: repeat(2, 140px); }

.zb-search__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.zb-search__opts .zb-inline .zb-ic { color: var(--plum); margin-right: 6px; vertical-align: -3px; }

/* Champ obligatoire manquant (formulaire de l'accueil, sticky) */
.zb-field.is-error, .zb-sticky__field.is-error { box-shadow: inset 0 0 0 2px #c24a6f !important; border-radius: var(--r-md); background: #fdf0f3 !important; }
.zb-field__error { position: absolute; left: 14px; top: calc(100% + 4px); z-index: 6; padding: 4px 10px; border-radius: 8px; background: #c24a6f; color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.zb-field:not(.is-error) .zb-field__error, .zb-sticky__field:not(.is-error) .zb-field__error { display: none; }
.zb-sticky .zb-field__error { top: auto; bottom: calc(100% + 6px); }

.zb-recap { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--cream); font-size: .88rem; font-weight: 600; color: var(--plum-deep); }
.zb-recap .zb-ic { color: var(--rose); flex-shrink: 0; }
.zb-recap span { flex: 1; min-width: 0; }
.zb-recap .zb-link { background: none; border: 0; border-bottom: 1.5px solid currentColor; font: inherit; font-size: .84rem; cursor: pointer; padding: 0 0 1px; flex-shrink: 0; }

.zb-wizard__steps li.is-reachable { cursor: pointer; }
.zb-wizard__steps li.is-reachable:hover { color: var(--rose); }

/* Parcours : espacement entre les groupes de choix */
.zb-step .zb-pills, .zb-step .zb-cards3, .zb-step .zb-pick { margin-bottom: 22px; }
.zb-step .zb-grid2 { margin-bottom: 4px; }
.zb-step .zb-grid2 .zb-pills { margin-bottom: 18px; }
.zb-step .zb-label { margin-top: 0; }
/* Un champ suivi d'un autre libelle : meme ecart qu'entre les autres groupes */
.zb-step > .zb-input + .zb-label, .zb-step > .zb-error + .zb-label, .zb-step > [data-phone] + .zb-label { margin-top: 18px; }
.zb-step > .zb-grid2 + .zb-label { margin-top: 18px; }
.zb-step .zb-drop { margin-top: 4px; }
.zb-step .zb-hint { margin-bottom: 18px; }

/* ---------- Recherche ---------- */
.zb-qs { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(44, 33, 48, .4); padding: 16px 0 22px; max-height: calc(100vh - 96px); overflow: auto; }
.zb-qs__form { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--plum); }
.zb-qs__form:focus-within { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-qs__form input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 1.05rem; padding: 12px 0; color: var(--ink); }
.zb-qs__results { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 900px) { .zb-qs__results { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .zb-qs__styles, .zb-qs__all, .zb-qs__none { grid-column: 1 / -1; } }
.zb-qs__styles { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-qs__styles small, .zb-chip small { opacity: .6; margin-left: 4px; font-weight: 500; }
.zb-qs__list, .zb-qs__side { display: grid; gap: 4px; align-content: start; }
.zb-qs__label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 8px 0 2px; }
.zb-qs__none { color: var(--ink-2); }
.zb-result { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 12px; }
.zb-result:hover { background: var(--cream); }
.zb-result__img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--cream); }
.zb-result__img img { width: 100%; height: 100%; object-fit: cover; }
.zb-result__img--round { border-radius: 50%; width: 42px; height: 42px; }
.zb-result__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.zb-result__body small { font-size: .72rem; color: var(--rose); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.zb-result__body strong { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zb-result__body span { font-size: .84rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zb-result mark, .zb-results mark { background: var(--rose-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.zb-qs__all { justify-self: start; }
.zb-searchpage { display: flex; align-items: center; gap: 10px; max-width: 720px; margin-bottom: 16px; color: var(--plum); }
.zb-searchpage .zb-input { flex: 1; }
.zb-results { display: grid; gap: 6px 22px; }
@media (min-width: 760px) { .zb-results { grid-template-columns: 1fr 1fr; } .zb-results--small { grid-template-columns: repeat(3, 1fr); } }
.zb-results .zb-result__img { width: 72px; height: 72px; }
.zb-mt0 { margin-top: 0; margin-bottom: 22px; }

/* Encart « Vous etes coiffeuse ? » des pages coiffeuses */
.zb-pagehead__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.zb-proband { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--plum-deep); font-size: .86rem; transition: box-shadow .2s; }
.zb-proband:hover { box-shadow: inset 0 0 0 1.5px var(--rose); }
.zb-proband > .zb-ic:first-child { color: var(--rose); }
.zb-proband span { display: flex; flex-direction: column; line-height: 1.25; color: var(--ink-2); }
.zb-proband strong { color: var(--rose); font-size: .9rem; }

/* Routine capillaire : carte en tete de boutique, diagnostic, routine proposee */
.zb-routine-card { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--plum-deep), var(--plum)); color: #fff; }
.zb-routine-card__body { display: flex; flex-direction: column; gap: 4px; max-width: 54ch; }
.zb-routine-card .zb-kicker { color: var(--rose-soft); margin: 0; }
.zb-routine-card strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.zb-routine-card__body > span:last-child { color: rgba(255, 255, 255, .8); font-size: .94rem; }
.zb-routine-form .zb-pills { margin-bottom: 18px; }
.zb-routine__steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.zb-routine__step { display: grid; grid-template-columns: 30px 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-routine__n { width: 30px; height: 30px; border-radius: 50%; background: var(--plum-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.zb-routine__img img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--cream); }
.zb-routine__body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.zb-routine__body small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.zb-routine__body > span { font-size: .84rem; color: var(--ink-2); }
.zb-routine__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--cream); }

.zb-gallery__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--plum-ink); }

.zb-review__avatar--hd { overflow: hidden; padding: 0; }
.zb-review__avatar--hd img { width: 100%; height: 100%; object-fit: cover; }
a.zb-score { display: inline-flex; align-items: center; gap: 4px; }
a.zb-score:hover span { color: var(--rose); }

.zb-reviews.zb-reviews--grid { display: grid; gap: 16px; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
.zb-reviews--grid .zb-review .zb-stars { font-size: 1rem; margin-bottom: 6px; }
.zb-score--big { font-size: 1.05rem; }

/* Magazine : les plus lus */
.zb-h3 { font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; }
.zb-mostread { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.zb-mostread::-webkit-scrollbar { display: none; }
.zb-mostread li { scroll-snap-align: start; }
.zb-mostread a { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: .9rem; line-height: 1.3; }
.zb-mostread a:hover span:last-child { color: var(--rose); }
.zb-mostread__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.zb-mostread__img img { width: 100%; height: 100%; object-fit: cover; }
.zb-mostread__img b { position: absolute; left: 8px; bottom: 6px; font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.zb-scroller--cards { margin-bottom: 44px; }
.zb-scroller--cards::before { background: linear-gradient(90deg, var(--paper), transparent); }
.zb-scroller--cards::after { right: 0; background: linear-gradient(270deg, var(--paper) 20%, transparent); }
.zb-scroller--cards .zb-scroller__btn { top: 0; transform: none; margin-top: calc((100% - 5 * 14px) / 6 * .375 - 19px); }
@media (max-width: 1023px) { .zb-mostread { grid-auto-columns: calc((100% - 3 * 14px) / 3.6); } .zb-scroller--cards .zb-scroller__btn { margin-top: calc((100% - 3 * 14px) / 3.6 * .375 - 19px); } }
@media (max-width: 759px) { .zb-mostread { grid-auto-columns: 62%; margin-right: -20px; padding-right: 20px; } }

/* Lexique A-Z */
.zb-az { display: flex; flex-wrap: wrap; gap: 4px; }
.zb-az a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; font-size: .86rem; }
.zb-az a:hover { background: var(--plum-deep); color: #fff; }
.zb-az__group { scroll-margin-top: 120px; margin-bottom: 26px; }
.zb-az__group h2 { font-size: 2rem; margin-bottom: 8px; color: var(--rose); }
.zb-glossary a span { display: block; font-weight: 400; font-size: .84rem; color: var(--ink-2); }

/* Editeur visuel (admin) */
.zb-editor { margin-bottom: 14px; }
.zb-editor__bar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.zb-editor__bar .zb-link { background: none; border: 0; border-bottom: 1.5px solid currentColor; font: inherit; cursor: pointer; padding: 0; }
.zb-editor .ql-toolbar { border-radius: 12px 12px 0 0; border-color: var(--line); background: var(--cream); }
.zb-editor .ql-container { border-radius: 0 0 12px 12px; border-color: var(--line); font: inherit; font-size: 1rem; background: #fff; }
.zb-editor .ql-editor { min-height: 420px; line-height: 1.7; }
.zb-editor .ql-editor img { max-width: 100%; border-radius: 10px; }

/* ---------- Bulle de chat (assistante) ---------- */
.zb-chat { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; }
.zb-chat.has-sticky { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.zb-chat__bubble { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border: 0; border-radius: 999px; background: var(--plum-deep); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(44, 33, 48, .6); }
.zb-chat__bubble img { width: 34px; height: auto; background: #fff; border-radius: 50%; padding: 6px 3px; }
.zb-chat__bubble:hover { background: var(--plum-ink); }
.zb-chat__panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; background: var(--paper); border-radius: 22px; box-shadow: 0 30px 60px -18px rgba(44, 33, 48, .55); overflow: hidden; }
.zb-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: var(--plum-deep); color: #fff; }
.zb-chat__head img { width: 40px; height: auto; background: #fff; border-radius: 50%; padding: 7px 4px; }
.zb-chat__head span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.zb-chat__head small { color: var(--rose-soft); font-size: .76rem; }
.zb-chat__head .zb-iconbtn { color: #fff; }
.zb-chat__head .zb-iconbtn:hover { background: rgba(255, 255, 255, .1); }
.zb-chat__log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.zb-chat__msg { max-width: 86%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .92rem; line-height: 1.45; }
.zb-chat__msg a { text-decoration: underline; color: var(--plum-deep); }
.zb-chat__msg.is-me { align-self: flex-end; background: var(--plum-deep); color: #fff; box-shadow: none; border-radius: 16px 16px 4px 16px; }
.zb-chat__msg.is-typing { color: var(--ink-2); letter-spacing: 3px; animation: zb-blink 1s infinite; }
@keyframes zb-blink { 50% { opacity: .4; } }
.zb-chat__form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.zb-chat__form input { flex: 1; border: 0; outline: 0; font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: 12px; background: var(--cream); }
@media (max-width: 759px) {
    .zb-chat__bubble span { display: none; }
    .zb-chat__bubble { padding: 8px; }
    .zb-chat__panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; }
    .zb-chat:not(.has-sticky) { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Simulateur de revenus */
.zb-sim h2 { text-align: center; margin-bottom: 26px; }
.zb-sim h2 em { color: var(--rose-soft); }
.zb-sim__form { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; align-items: end; }
@media (min-width: 760px) { .zb-sim__form { grid-template-columns: 1.4fr .8fr auto; } }
.zb-sim__form label { font-size: .84rem; font-weight: 700; color: var(--rose-soft); display: block; }
.zb-sim__form .zb-input { margin-top: 6px; background: #fff; border-color: transparent; }
.zb-sim__form .zb-btn { min-height: 50px; }
.zb-sim__skills { grid-column: 1 / -1; }
.zb-sim__skills p { font-size: .84rem; font-weight: 700; color: var(--rose-soft); margin-bottom: 8px; }
.zb-sim__skills .zb-pill span { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.zb-sim__skills .zb-pill input:checked + span { background: var(--rose); box-shadow: none; }
.zb-sim__result { text-align: center; margin-top: 36px; }
.zb-sim__label { color: var(--rose-soft); font-weight: 700; }
.zb-sim__value { font-family: var(--serif); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; margin: 8px 0 12px; }
.zb-sim__value small { font-family: var(--sans); font-size: 1rem; color: rgba(255, 255, 255, .7); }
.zb-sim__detail { color: rgba(255, 255, 255, .82); max-width: 60ch; margin: 0 auto 16px; }
.zb-sim__top { display: inline-block; padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin-bottom: 22px; }
.zb-sim__detail b, .zb-sim__top b { color: #fff; }
/* Tarifs des coiffeuses : textes longs sans espaces (liens, tirets) coupes, la table ne deborde pas sur mobile */
.zb-pricelist { width: 100%; table-layout: fixed; }
.zb-pricelist td { overflow-wrap: anywhere; }
.zb-table-list.zb-pricelist td:last-child { width: 30%; text-align: right; white-space: normal; }
/* Petits telephones : l'en-tete tient dans 360 px */
@media (max-width: 439px) { .zb-header__inner { gap: 8px; } .zb-logo img { width: 132px; } .zb-header__actions { gap: 0; } .zb-header__actions .zb-iconbtn { width: 38px; height: 38px; } }

/* Fiche coiffeuse : barre de contact fixe, et prestations en liens */
.zb-sticky--hd .zb-sticky__inner { justify-content: space-between; }
.zb-sticky__hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zb-sticky__hd img, .zb-sticky__hd .zb-author__ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.zb-sticky__hd > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.zb-sticky__hd strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--plum-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-sticky__hd small { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.zb-sticky__note { margin: 0 auto 0 18px; padding-left: 18px; border-left: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
@media (max-width: 759px) {
    .zb-sticky--hd .zb-sticky__inner { flex-wrap: nowrap; }
    .zb-sticky__note { display: none; }
    .zb-sticky--hd .zb-sticky__go { flex: none; padding: 0 16px; font-size: .9rem; }
    .zb-sticky__hd strong { font-size: 1.05rem; }
}
@media (max-width: 400px) { .zb-sticky--hd .zb-sticky__go .zb-ic { display: none; } }
.zb-hdskills { margin-top: 18px; }
.zb-hdskills.is-closed .zb-chip:nth-child(n+9):not(.zb-chip--more) { display: none; }
.zb-chip--more { border: 0; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; color: var(--plum-deep); }
.zb-hdskills:not(.is-closed) .zb-chip--more { display: none; }
body:has(.zb-sticky) .zb-chat { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
/* Carte de realisation : lien vers la fiche + bouton « Je veux cette coiffure » au survol */
.zb-shot__link { position: absolute; inset: 0; display: block; }
.zb-shot__want { position: absolute; left: 50%; top: 14px; z-index: 2; transform: translate(-50%, -6px); display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .82rem; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(44, 33, 48, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.zb-shot__want:hover { background: var(--plum-deep); }
@media (hover: hover) { .zb-shot:hover .zb-shot__want, .zb-shot__want:focus-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } }

/* Modale (confirmation d'ajout au panier) */
.zb-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(34, 26, 36, .45); opacity: 0; transition: opacity .2s; }
.zb-modal.is-open { opacity: 1; }
.zb-modal__box { position: relative; width: 100%; max-width: 440px; padding: 26px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 30px 60px -20px rgba(34, 26, 36, .45); transform: translateY(12px); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.zb-modal.is-open .zb-modal__box { transform: none; }
.zb-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; }
.zb-modal__title { display: flex; align-items: center; gap: 8px; margin: 0 40px 18px 0; font-weight: 800; color: var(--plum-deep); }
.zb-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.zb-modal__actions .zb-btn { flex: 1 1 160px; justify-content: center; }
.zb-added { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-added img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
.zb-added div { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.zb-added span { color: var(--ink-2); font-weight: 700; }
.zb-added__cart { margin: 16px 0 6px; color: var(--ink-2); }
.zb-added__cart b { color: var(--ink); }
.zb-added__free { margin: 0 0 8px; font-size: .88rem; color: var(--ink-2); }
.zb-added__free.is-ok { color: #2f7a55; font-weight: 700; }
.zb-review__rating { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.zb-review__rating .zb-stars { font-size: 1.05rem; }
.zb-review__rating b { font-size: .9rem; font-weight: 700; color: var(--ink); }
.zb-form .zb-check-line { margin: 4px 0 22px; }
/* Admin : tableaux larges defilants, en-tetes, cellules sur une ligne */
.zb-scrollx { overflow-x: auto; }
.zb-admintable th { text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.zb-nowrap { white-space: nowrap; }
.zb-admintable td small { display: block; color: var(--ink-2); font-size: .78rem; }
.zb-impersonate { position: sticky; top: 0; z-index: 200; padding: 8px 16px; background: #c98a2e; color: #fff; font-size: .86rem; text-align: center; }
.zb-impersonate a { color: #fff; font-weight: 800; text-decoration: underline; }
/* Admin demandes : lignes depliables avec les envois aux coiffeuses */
.zb-leadlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.zb-leadlist__item { min-width: 0; }
.zb-leadlist__item { padding: 0; }
.zb-leadlist__item > summary { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) 140px 100px 50px; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; font-size: .9rem; }
.zb-leadlist__item > summary::-webkit-details-marker { display: none; }
.zb-leadlist__item > summary small { display: block; color: var(--ink-2); font-size: .78rem; }
.zb-leadlist__item[open] > summary { border-bottom: 1px solid var(--line); background: var(--cream); border-radius: var(--r-md) var(--r-md) 0 0; }
.zb-leadlist__item > .zb-scrollx, .zb-leadlist__msg { padding: 10px 18px 14px; }
.zb-leadlist__msg { margin: 0; color: var(--ink-2); font-size: .88rem; }
@media (max-width: 900px) { .zb-leadlist__item > summary { grid-template-columns: 1fr 1fr; } }
.zb-disp td { font-size: .86rem; }
.zb-disp tr.is-paid td { background: #f3faf6; }
.zb-disp__ai { min-width: 240px; max-width: 360px; }
.zb-disp__ai summary { cursor: pointer; }
.zb-rose { color: var(--rose); }
.zb-kpi small { font-size: .78rem; color: var(--ink-2); }
.zb-chatrow > summary { grid-template-columns: 100px minmax(0, 1.2fr) minmax(0, 1.2fr) 160px 130px 180px; }
.zb-leadlist__arrow { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--plum); transition: transform .2s; }
.zb-leadlist__item[open] .zb-leadlist__arrow { transform: rotate(180deg); }
.zb-leadlist__body > .zb-scrollx { padding: 0 18px 14px; }
.zb-leadlist__item > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Commentaires */
.zb-comments__n { font-family: var(--sans); font-size: 1rem; color: var(--ink-2); font-weight: 400; }
.zb-comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.zb-comment header { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.zb-comment header time { font-size: .8rem; color: var(--ink-2); }
.zb-comment p { margin: 0; color: #332a35; }
.zb-comment--reply { margin: 12px 0 0 22px; padding: 12px 16px; border: 0; border-radius: var(--r-md); background: var(--cream); }
.zb-comment-form { margin-top: 26px; padding: 22px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-comment-form__row { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .zb-comment-form__row { grid-template-columns: 1fr 1fr; } }
.zb-comment-form__note { font-size: .82rem; color: var(--ink-2); margin: 0 0 14px; }
.zb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zb-field-help { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-2); margin: 2px 0 0; line-height: 1.4; }
/* Tableau de bord admin */
.zb-todo { margin-bottom: 26px; padding: 18px 20px; border-radius: var(--r-lg); background: #fdf0f3; box-shadow: inset 0 0 0 1px #f3cfdc; }
.zb-todo h2 { font-size: 1rem; font-family: var(--sans); font-weight: 800; margin: 0 0 10px; color: #a3335b; }
.zb-todo__list { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-todo__item { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #f3cfdc; font-size: .9rem; }
.zb-todo__item strong { font-size: 1.05rem; color: #a3335b; }
.zb-todo__item:hover { box-shadow: inset 0 0 0 1.5px #c24a6f; }
.zb-dash { display: grid; gap: 16px; margin-top: 10px; }
@media (min-width: 1100px) { .zb-dash { grid-template-columns: 1fr 1fr; } .zb-dash__wide { grid-column: 1 / -1; } }
.zb-dash > .zb-box { min-width: 0; }
.zb-chart { position: relative; height: 260px; }
.zb-chart--pie { height: 220px; }
.zb-dash__total { margin: 0; font-size: .9rem; color: var(--ink-2); }
.zb-dash__total strong { color: var(--ink); font-size: 1.1rem; }
.zb-up { color: #2f7a55; }
.zb-down { color: #b0345a; }
.zb-dash__table td, .zb-dash__table th { text-align: right; font-size: .82rem; padding: 6px 8px; }
.zb-dash__table td:first-child, .zb-dash__table th:first-child { text-align: left; }
.zb-dash__sum td { font-weight: 800; border-top: 1px solid var(--line); }
.zb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.zb-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.zb-legend span { color: var(--ink-2); margin-left: 4px; }
/* Admin : galerie et videos d'un contenu */
.zb-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.zb-media-grid--video { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zb-media { margin: 0; padding: 8px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; }
.zb-media.is-main { box-shadow: inset 0 0 0 2px var(--rose); }
.zb-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.zb-media video { width: 100%; aspect-ratio: 9 / 16; max-height: 320px; background: #000; border-radius: 8px; }
.zb-media .zb-check-line { margin: 0; font-size: .8rem; font-weight: 600; }
.zb-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.zb-flags legend { font-weight: 700; font-size: .88rem; margin-bottom: 6px; padding: 0; }
.zb-flags label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; background: #fff; }
.zb-flags input { position: absolute; opacity: 0; }
.zb-flags .fi { width: 22px; height: 16px; border-radius: 3px; }
.zb-flags small { font-size: .68rem; color: var(--ink-2); text-transform: uppercase; }
.zb-flags label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--plum-deep); }
.zb-admintable .fi { width: 22px; height: 16px; border-radius: 3px; }
.zb-legend--cols { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.zb-legend .fi { width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; }
.zb-legend__more { margin-top: 12px; font-size: .88rem; }
.zb-legend__more summary { cursor: pointer; color: var(--plum-deep); font-weight: 700; }
/* Admin avis : lignes compactes */
.zb-revlist { padding: 0; }
.zb-revrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.zb-revrow:last-child { border-bottom: 0; }
.zb-revrow__hd img, .zb-revrow__hd .zb-author__ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.zb-revrow__meta { margin: 0 0 4px; font-size: .86rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.zb-revrow__meta strong { color: var(--ink); }
.zb-revrow__text { margin: 0; font-size: .95rem; }
.zb-revrow__reply { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--cream); font-size: .86rem; }
.zb-revrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.zb-revrow__actions, .zb-revrow__actions form { display: flex; gap: 12px; margin: 0; font-size: .84rem; }
.zb-link--danger { color: #b0345a; }
@media (max-width: 640px) { .zb-revrow { grid-template-columns: 40px 1fr; } .zb-revrow__side { grid-column: 2; align-items: flex-start; } }
.zb-nav__n { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.zb-kpi--multi a { display: flex; align-items: baseline; gap: 8px; font-size: .86rem; color: var(--ink-2); padding: 3px 0; }
.zb-kpi--multi a strong { font-family: var(--serif); font-size: 1.5rem; color: var(--plum-deep); font-weight: 400; min-width: 1.6em; }
.zb-kpi--multi a:hover { color: var(--rose); }
.zb-form__row { display: grid; gap: 0 14px; }
@media (min-width: 700px) { .zb-form__row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.zb-kpi__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 12px; margin-top: 4px; font-size: .78rem; color: var(--ink-2); }
.zb-kpi__split b { color: var(--ink); font-weight: 700; }
/* Menus lateraux (admin, espace coiffeuse) : defilement discret, barre fine visible au survol seulement */
.zb-app__side { scrollbar-width: none; overscroll-behavior: contain; }
.zb-app__side:hover { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.zb-app__side::-webkit-scrollbar { width: 6px; }
.zb-app__side::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.zb-app__side:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
.zb-app__side::-webkit-scrollbar-track { background: transparent; }
.zb-kpi .zb-kpi__split span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .78rem; display: flex; align-items: center; white-space: nowrap; }
.zb-kpi .zb-kpi__split .zb-dot { width: 8px; height: 8px; margin-right: 6px; }
.zb-kpi .zb-kpi__split b { margin-left: 4px; }
.zb-cat-new { margin-bottom: 16px; }
.zb-cattree__name { display: flex; align-items: center; gap: 6px; }
.zb-cattree__name i { font-style: normal; color: var(--ink-2); }
.zb-cattree__d0 td { background: #fff; }
.zb-cattree__d0 .zb-cattree__name input { font-weight: 700; }
/* Admin categories : tableau compact */
.zb-cattree td { padding: 6px 8px; vertical-align: middle; }
.zb-cattree .zb-input { padding: 6px 10px; min-height: 0; height: 34px; font-size: .86rem; border-radius: 8px; }
.zb-cattree textarea.zb-input { resize: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 220px; line-height: 20px; }
.zb-cattree textarea.zb-input:focus { height: 90px; white-space: normal; overflow: auto; position: relative; z-index: 2; }
.zb-cattree .zb-cattree__name input { min-width: 190px; }
.zb-cattree select.zb-input { min-width: 150px; padding-right: 28px; }
.zb-cattree tr:hover td { background: var(--cream); }
.zb-tabs { scrollbar-width: none; }
.zb-tabs::-webkit-scrollbar { display: none; }
.zb-kpi.is-on { box-shadow: inset 0 0 0 2px var(--plum-deep); }
.zb-dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.zb-dash__countries { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; justify-content: flex-end; }
.zb-dash__countries a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.zb-dash__countries a[aria-current] { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-dash__countries .fi { width: 16px; height: 12px; border-radius: 2px; }
/* Admin demandes : repartition du jour (pays, source), sur deux lignes */
.zb-daysplit { display: grid; gap: 6px; margin: -4px 0 16px; }
.zb-daysplit p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.zb-daysplit__h { width: 60px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.zb-daysplit__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; color: var(--ink-2); }
.zb-daysplit__chip b { color: var(--ink); }
.zb-daysplit .fi { width: 16px; height: 12px; border-radius: 2px; }
.zb-dash__country { display: flex; align-items: center; gap: 10px; margin: 0; }
.zb-dash__country .fi { width: 26px; height: 19px; border-radius: 3px; }
.zb-dash__country select { min-width: 220px; }
.zb-sub__who { display: flex; align-items: center; gap: 10px; }
.zb-sub__who .fi { width: 24px; height: 18px; border-radius: 3px; flex: none; }
/* Admin demandes : vignettes dans la ligne, detail charge en ajax */
.zb-leadlist__item > summary { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) 140px 100px 130px; }
.zb-leadlist__thumbs { display: flex; align-items: center; gap: 4px; }
.zb-leadlist__thumbs img, .zb-leadlist__vid { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--cream); }
.zb-leadlist__vid { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--plum-deep); }
.zb-leadbody { padding: 14px 18px 4px; display: grid; gap: 12px; }
.zb-leadbody__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 18px; margin: 0; font-size: .86rem; }
.zb-leadbody__facts dt { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.zb-leadbody__facts dd { margin: 2px 0 0; }
.zb-leadbody__msg { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--cream); font-size: .9rem; }
.zb-leadbody__assets { display: flex; flex-wrap: wrap; gap: 10px; }
.zb-leadbody__assets figure { margin: 0; width: 140px; }
.zb-leadbody__assets img, .zb-leadbody__assets video { width: 140px; height: 175px; object-fit: cover; border-radius: 10px; background: #000; }
.zb-leadbody__assets figcaption { font-size: .74rem; color: var(--ink-2); margin-top: 3px; }
.zb-leadbody__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: .88rem; }
.zb-leadbody__status select { width: auto; min-width: 200px; height: 36px; padding: 4px 10px; }
/* Selecteur de pays du tableau de bord (drapeaux) */
.zb-ccpick { position: relative; }
.zb-ccpick summary { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 9px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem; }
.zb-ccpick summary::-webkit-details-marker { display: none; }
.zb-ccpick summary svg { margin-left: auto; color: var(--ink-2); }
.zb-ccpick .fi, .zb-ccpick__all { width: 22px; height: 16px; border-radius: 3px; flex: none; }
.zb-ccpick__all { display: inline-block; background: conic-gradient(#2a78d6 0 25%, #eb6834 0 50%, #1baf7a 0 75%, #eda100 0); border-radius: 50%; width: 16px; height: 16px; }
.zb-ccpick__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; max-height: 360px; overflow: auto; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -12px rgba(34, 26, 36, .35); scrollbar-width: thin; }
.zb-ccpick__panel a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: .88rem; }
.zb-ccpick__panel a:hover { background: var(--cream); }
.zb-ccpick__panel a[aria-current] { background: var(--plum-deep); color: #fff; }
/* Moderation : coiffeuses a valider */
.zb-modhd { display: grid; grid-template-columns: 56px minmax(0, 1fr) 230px; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.zb-modhd:last-of-type { border-bottom: 0; }
.zb-modhd__avatar img, .zb-modhd__avatar .zb-author__ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.zb-modhd__name { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.zb-modhd__name .fi { width: 20px; height: 15px; border-radius: 2px; }
.zb-modhd__meta, .zb-modhd__links { margin: 0 0 4px; font-size: .82rem; color: var(--ink-2); }
.zb-modhd__text { margin: 4px 0 6px; font-size: .9rem; }
.zb-modhd__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin: 0; }
.zb-modhd__reject summary { list-style: none; text-align: center; cursor: pointer; }
.zb-modhd__reject summary::-webkit-details-marker { display: none; }
.zb-modhd__reject[open] { display: grid; gap: 8px; }
@media (max-width: 760px) { .zb-modhd { grid-template-columns: 56px 1fr; } .zb-modhd__actions { grid-column: 1 / -1; } }
/* Admin boutique */
.zb-app__sub-nav { display: grid; margin: -2px 0 6px 30px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14); }
.zb-app__sub-nav a { padding: 6px 10px !important; font-size: .84rem; opacity: .8; }
.zb-app__sub-nav a[aria-current] { opacity: 1; }
.zb-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.zb-bulk select { width: auto; min-width: 190px; height: 34px; padding: 4px 10px; }
.zb-input--sm { height: 34px; padding: 4px 10px; font-size: .85rem; border-radius: 8px; }
.zb-orders__items { min-width: 220px; }
.zb-orders__items span { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin: 2px 0; }
.zb-orders__items img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.zb-orders select { min-width: 130px; }
.zb-status--paid { box-shadow: inset 0 0 0 2px var(--rose); font-weight: 700; }
.zb-status--shipped, .zb-status--delivered { color: #2f7a55; }
.zb-shoprow { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.zb-shoprow img { border-radius: 8px; object-fit: cover; }
.zb-shoprow small { display: block; color: var(--ink-2); font-size: .8rem; }
.zb-stock tr.is-off td { opacity: .5; }
.zb-stock tr.is-out td { background: #fdf0f3; }
.zb-stock__rules { min-width: 260px; }
.zb-rule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 3px 6px 3px 8px; border-radius: 8px; background: var(--cream); font-size: .76rem; }
.zb-rule span + span::before { content: '+'; margin-right: 4px; color: var(--ink-2); }
.zb-rule__x { margin-left: 2px; padding: 0 4px; border: 0; background: none; color: var(--ink-2); font-size: 1rem; line-height: 1; cursor: pointer; }
.zb-rule__x:hover { color: #b0345a; }
.zb-rule-add { margin-top: 4px; }
.zb-rule-add summary { display: inline-block; color: #b0345a; font-size: .8rem; font-weight: 600; cursor: pointer; list-style: none; }
.zb-rule-add summary::-webkit-details-marker { display: none; }
.zb-rule-add[open] { box-sizing: border-box; width: 320px; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.zb-rule-add__grid select { box-sizing: border-box; width: 100%; min-width: 0; }
.zb-rule-add__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.zb-rule-add__grid select:last-child { grid-column: 1 / -1; }
.zb-rule-add .zb-btn { width: 100%; }
.zb-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zb-verifybox { margin: 10px 0; }
.zb-verifybox__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zb-verify__ok { color: #2f7a4f; font-weight: 600; }
.zb-verify__wait { color: var(--ink-2); }
.zb-comment-flash { margin: 22px 0 0; padding: 14px 18px; border-radius: var(--r-md); background: #eaf6ef; color: #245c40; font-weight: 600; }
.zb-comment-flash.is-error { background: #fdf0f3; color: #a3335b; }
.zb-activefilter { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 8px 4px 12px; border-radius: 999px; background: var(--plum-deep); color: #fff; font-size: .82rem; font-weight: 700; }
.zb-activefilter:hover { background: var(--rose); }
.zb-activefilter__all { margin-left: 10px; font-size: .82rem; }
/* Routine capillaire : diagnostic a gauche, pack a droite */
.zb-routine-layout { display: grid; gap: 20px; max-width: 760px; }
@media (min-width: 1020px) { .zb-routine-layout.has-result { max-width: none; grid-template-columns: 380px minmax(0, 1fr); align-items: start; } .zb-routine-layout.has-result .zb-routine-form { position: sticky; top: 120px; } }
.zb-routine-more { margin: 0 0 16px; }
.zb-routine-more summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--plum-deep); margin-bottom: 10px; }
.zb-pills--sm .zb-pill span { padding: 7px 12px; font-size: .82rem; }
.zb-routine__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zb-routine__head h2 { margin: 0; }
.zb-routine__code { padding: 4px 10px; border-radius: 999px; background: var(--cream); font-size: .8rem; font-weight: 800; color: var(--plum-deep); letter-spacing: .04em; }
.zb-routine__step { grid-template-columns: 36px 64px minmax(0, 1fr) auto; }
.zb-routine__check { position: relative; cursor: pointer; }
.zb-routine__check input { position: absolute; opacity: 0; }
.zb-routine__check input:not(:checked) + .zb-routine__n { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.zb-routine__step:has(input:not(:checked)) .zb-routine__img, .zb-routine__step:has(input:not(:checked)) .zb-routine__body, .zb-routine__step:has(input:not(:checked)) .zb-routine__price { opacity: .4; }
.zb-routine__old { display: block; color: var(--ink-2); text-decoration: line-through; font-size: .9rem; min-height: 1em; }
.zb-routine__sum { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; }
.zb-routine__total small { display: block; color: #2f7a55; font-weight: 700; font-size: .82rem; margin-top: 4px; }
.zb-taglist--links a { display: block; }
.zb-taglist--links a:hover { color: var(--rose); }
.zb-routine-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--plum-deep); color: #fff; }
.zb-routine-promo strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.zb-routine-promo small { display: block; color: rgba(255, 255, 255, .8); font-size: .84rem; max-width: 46ch; }
.zb-beforeafter__tag { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(34, 26, 36, .75); color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
/* Panier : routine et reassurance */
.zb-cart__routine { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--plum-deep); color: #fff; }
.zb-cart__routine small { display: block; color: rgba(255, 255, 255, .8); font-size: .82rem; }
.zb-cartline.is-routine { box-shadow: none; }
.zb-cart__pack { margin: 0 0 10px; }
.zb-cart__pack .zb-cart__routine { margin: 0; }
.zb-cart__packlines { margin: 0 0 0 18px; padding-left: 14px; border-left: 2px solid var(--rose); }
.zb-cart__packlines .zb-cartline { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 0; }
.zb-cart__packlines .zb-cartline__img img, .zb-cartline__gift { width: 44px; height: 44px; }
.zb-cart__packlines .zb-cartline__name { font-size: .86rem; }
.zb-cart__packlines .zb-qty input { width: 54px; height: 34px; }
.zb-cart__packlines .zb-cartline > strong { font-size: .92rem; }
.zb-cartline__gift { display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cream); color: var(--plum); }
.zb-cartline--gift > strong { color: var(--rose); }
@media (max-width: 520px) { .zb-cart__packlines { margin-left: 6px; padding-left: 10px; } }
.zb-reassure { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.zb-reassure li { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.zb-reassure .zb-ic { color: var(--plum); flex: none; margin-top: 2px; }
.zb-reassure strong { display: block; color: var(--ink); font-size: .86rem; }
.zb-cart-empty { text-align: center; }
.zb-sticky__select { border: 0; background: none; font: inherit; font-weight: 700; font-size: .98rem; color: var(--ink); padding: 0; width: 100%; outline: none; cursor: pointer; appearance: none; }
.zb-works__facets { margin: 0 0 16px; }
.zb-works__facets .zb-chip { border: 0; cursor: pointer; font: inherit; font-size: .86rem; }
.zb-works__facets .zb-chip small { opacity: .6; margin-left: 2px; }
.zb-works__more { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }
/* Espaces applicatifs : une seule colonne qui ne deborde jamais sur mobile */
.zb-app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1020px) { .zb-app { grid-template-columns: 280px minmax(0, 1fr); } }
.zb-app__main { min-width: 0; }
/* Espace coiffeuse, mobile d'abord : en-tete compact et onglets en bas */
.zb-protabs { display: none; }
@media (max-width: 1019px) {
    .zb-app--pro .zb-app__side { padding: 12px 16px; }
    .zb-app--pro .zb-app__who { margin: 0; }
    .zb-app--pro .zb-app__nav { display: none; }
    .zb-app--pro .zb-app__main { padding: 18px 16px 110px; }
    .zb-app--pro .zb-app__head h1 { font-size: 1.7rem; }
    .zb-protabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 252, 251, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -8px 24px -16px rgba(34, 26, 36, .45); }
    .zb-protabs > a, .zb-protabs summary { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; font-size: .68rem; font-weight: 700; color: var(--ink-2); list-style: none; cursor: pointer; }
    .zb-protabs summary::-webkit-details-marker { display: none; }
    .zb-protabs [aria-current] { color: var(--plum-deep); background: var(--cream); }
    .zb-protabs__n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rose); color: #fff; font-size: .66rem; line-height: 18px; text-align: center; }
    .zb-protabs__sheet { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -16px rgba(34, 26, 36, .5); }
    .zb-protabs__sheet a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; font-weight: 600; }
    .zb-protabs__sheet a:active { background: var(--cream); }
    .zb-app--pro ~ .zb-footer, body:has(.zb-app--pro) .zb-chat { display: none; }
    body:has(.zb-app--pro) .zb-chat { display: block; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.zb-pack { min-width: 0; }
.zb-pack .zb-btn { white-space: normal; max-width: 100%; }
@media (max-width: 420px) { .zb-packs { gap: 8px; } .zb-pack { padding: 18px 10px 14px; } }
/* Espace coiffeuse : type de realisation */
.zb-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; margin: 0 0 16px; border-radius: 14px; background: var(--cream); }
.zb-segment label { margin: 0 !important; }
.zb-segment input { position: absolute; opacity: 0; }
.zb-segment span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 10px; font-size: .86rem; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: center; }
.zb-segment input:checked + span { background: #fff; color: var(--plum-deep); box-shadow: 0 4px 12px -6px rgba(34, 26, 36, .35); }
.zb-segment--sm span { font-size: .8rem; padding: 8px 6px; }
.zb-workform__transfo { margin-bottom: 8px; }
.zb-app__main > .zb-ccpick { display: inline-block; margin: 0 0 10px; }
/* Boutons d'action presentes comme des liens (admin, listes) */
button.zb-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--plum-deep); cursor: pointer; border-bottom: 1.5px solid currentColor; line-height: 1.4; }
button.zb-link:hover { color: var(--rose); }
button.zb-link.zb-link--danger, .zb-link.zb-link--danger { color: #b0345a; }
.zb-revrow__actions button.zb-link { font-size: .82rem; }
/* Tunnel de demande : Retour / Suivant toujours visibles en bas de l'ecran */
.zb-wizard__nav { position: sticky; bottom: 0; z-index: 5; margin-left: -4px; margin-right: -4px; padding: 14px 4px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(255, 252, 251, .85), #fffcfb 40%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.zb-switch--top { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--cream); }
/* Telephone avec indicatif */
.zb-phone { position: relative; display: flex; align-items: stretch; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-phone.is-error { box-shadow: inset 0 0 0 2px #c24a6f; }
.zb-phone .zb-input { box-shadow: none; background: none; border: 0; flex: 1; min-width: 0; }
.zb-phone__cc summary { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px 0 14px; border-right: 1px solid var(--line); cursor: pointer; list-style: none; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.zb-phone__cc summary::-webkit-details-marker { display: none; }
.zb-phone__cc .fi { width: 22px; height: 16px; border-radius: 3px; }
.zb-phone__list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: min(320px, 90vw); max-height: 300px; overflow: auto; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -12px rgba(34, 26, 36, .35); }
.zb-phone__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.zb-phone__list button small { margin-left: auto; color: var(--ink-2); }
.zb-phone__list button:hover, .zb-phone__list button[aria-selected] { background: var(--cream); }
.zb-wa { display: inline-flex; vertical-align: -3px; margin-left: 2px; color: #1f9d55; }
/* Case obligatoire non cochee (CGU) : ligne en rose, message, petite secousse */
.zb-check-line__err { display: none; margin-top: 4px; font-size: .8rem; font-weight: 700; }
.zb-check-line.is-error { padding: 12px 14px; border-radius: var(--r-md); background: #fdf0f3; box-shadow: inset 0 0 0 2px #c24a6f; animation: zb-shake .35s; }
.zb-check-line.is-error .zb-check-line__err { display: block; }
.zb-check-line.is-error input { accent-color: #c24a6f; }
@keyframes zb-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .zb-check-line.is-error { animation: none; } }
.zb-check-line--terms > span { display: flex; flex-direction: column; }
/* Suivi de la demande */
.zb-done__track { text-align: left; margin: 20px 0; }
.zb-done__group { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); text-align: left; }
.zb-done__group h2 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 14px; text-align: center; }
.zb-done__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zb-done__group a { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-md); background: var(--cream); color: var(--ink); transition: background .2s; }
.zb-done__group a:hover { background: var(--rose-soft); }
.zb-done__group strong { color: var(--plum-deep); }
.zb-done__group span { grid-column: 1; color: var(--ink-2); font-size: .9rem; }
.zb-done__group svg { grid-column: 2; grid-row: 1 / span 2; color: var(--plum-deep); }
.zb-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.zb-track li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 0 0 18px 0; color: var(--ink-2); }
.zb-track li > .zb-ic { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--cream); color: var(--ink-2); position: relative; z-index: 1; }
.zb-track li:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.zb-track li.is-done > .zb-ic { background: var(--plum-deep); color: #fff; }
.zb-track li.is-done:not(:last-child)::before { background: var(--plum-deep); }
.zb-track li.is-active > .zb-ic { background: var(--rose); color: #fff; box-shadow: 0 0 0 6px rgba(216, 111, 147, .18); }
.zb-track li strong { display: block; color: var(--ink); }
.zb-track li:not(.is-done):not(.is-active) strong { color: var(--ink-2); font-weight: 600; }
.zb-track li small { display: block; font-size: .84rem; margin-top: 2px; }
.zb-track__loader { width: 18px; height: 18px; margin-left: auto; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--rose); animation: zb-spin .9s linear infinite; flex: none; }
@keyframes zb-spin { to { transform: rotate(360deg); } }
.zb-track__hds { display: grid; gap: 8px; margin-bottom: 14px; }
.zb-track__hd { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--cream); }
.zb-track__hd img, .zb-track__hd .zb-author__ph { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.zb-track__hd small { display: block; color: var(--ink-2); font-size: .82rem; }
.zb-track__prop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 2px var(--rose); }
.zb-track__prop small { display: block; color: var(--ink-2); font-size: .82rem; }
.zb-track__prop strong { font-size: 1.1rem; }
.zb-chat__action { align-self: flex-start; margin: 4px 0 8px; }
/* Cartes video */
.zb-shot__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34, 26, 36, .55); color: #fff; backdrop-filter: blur(4px); transition: opacity .2s; padding-left: 3px; }
.zb-shot__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.zb-shot__link.is-playing .zb-shot__play, .zb-style__img.is-playing .zb-shot__play { opacity: 0; }
.zb-style__img .zb-shot__video { z-index: 2; }
.zb-style__img .zb-shot__play { z-index: 3; }
.zb-shot__link .zb-shot__meta { z-index: 2; }
.zb-tuto__img .zb-shot__video { z-index: 1; }
.zb-tuto__play { z-index: 2; }
.zb-tuto.is-playing .zb-tuto__play { opacity: 0; }

.zb-modact__home { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fdf0f3; font-weight: 700; font-size: .85rem; cursor: pointer; }
.zb-modact__home input { width: 17px; height: 17px; accent-color: var(--rose); }
.zb-modact__home:has(input:checked) { background: var(--rose); color: #fff; }
.zb-modact__home:has(input:checked) input { accent-color: #fff; }
.zb-alpha { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.zb-alpha__b { min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-weight: 700; color: var(--plum-deep); cursor: pointer; }
.zb-alpha__b:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-alpha__b.is-on { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-cityrank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 24px; }
.zb-cityrank a { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--line); }
.zb-cityrank a:hover strong { color: var(--rose); }
.zb-cityrank small { color: var(--ink-2); font-size: .8rem; }
@media (max-width: 640px) { .zb-alpha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 18px; padding: 0 20px 4px; } .zb-alpha::-webkit-scrollbar { display: none; } .zb-alpha__b { flex: none; } }

.zb-modreward { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin: 6px 0 0; }
.zb-modreward .zb-input { width: 72px; min-height: 32px; padding: 0 8px; }
.zb-earn { display: grid; gap: 22px; align-items: center; margin-top: 18px; padding: 28px; border-radius: 20px; background: var(--cream); }
@media (min-width: 900px) { .zb-earn { grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 36px 40px; } }
.zb-earn h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin-bottom: 10px; }
.zb-earn h3 em { color: var(--rose); }
.zb-earn p:not(.zb-kicker) { color: var(--ink-2); margin: 0; }
.zb-earn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zb-earn__list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #fff; }
.zb-earn__list strong { min-width: 58px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--plum-deep); }
.zb-earn__list span { font-size: .92rem; }
.zb-hdbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 18px; }
.zb-hdbar .zb-count { margin: 0; }
.zb-radius { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zb-radius > span { font-size: .85rem; color: var(--ink-2); margin-right: 4px; }
@media (max-width: 640px) {
    .zb-radius { flex-wrap: nowrap; gap: 4px; }
    .zb-radius > span { font-size: .78rem; margin-right: 2px; }
    .zb-radius .zb-chip { display: inline-flex; align-items: center; padding: 0 10px; height: 32px; min-height: 0; font-size: .78rem; white-space: nowrap; }
}

/* ===== Planning coiffeuse ===== */
.zb-rot-l { transform: rotate(90deg); }
.zb-rot-r { transform: rotate(-90deg); }
.zb-plan__head .zb-hint { max-width: 60ch; }
.zb-plan__pulse { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 16px; border-radius: 999px; background: #eef6f0; color: #24603b; font-size: .9rem; }
.zb-plan__pulse strong { font-weight: 700; }
.zb-plan__pulse--empty { background: #fdf0f3; color: #8c3654; }
.zb-plan__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.zb-plan__nav strong { font-size: 1.02rem; }
.zb-plan__nav .is-disabled { opacity: .35; pointer-events: none; }
.zb-pweek { display: grid; gap: 10px; }
@media (min-width: 1100px) { .zb-pweek { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } }
.zb-pday { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 1100px) { .zb-pday { grid-template-columns: 1fr; min-height: 170px; align-content: start; } }
.zb-pday.is-today { box-shadow: inset 0 0 0 2px var(--rose); }
.zb-pday.is-past { opacity: .5; }
.zb-pday.is-off { background: repeating-linear-gradient(135deg, #fbf7f5 0 8px, #f5eeeb 8px 16px); }
.zb-pday__head { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
@media (min-width: 1100px) { .zb-pday__head { flex-direction: row; gap: 6px; align-items: baseline; } }
.zb-pday__head span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.zb-pday__head strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--plum-deep); }
.zb-pday__body { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
@media (min-width: 1100px) { .zb-pday__body { flex-direction: column; } }
.zb-pday__range, .zb-pday__rdv { display: inline-block; padding: 4px 9px; border-radius: 8px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.zb-pday__range { background: #e6f3ea; color: #24603b; }
.zb-pday__rdv { background: var(--plum-deep); color: #fff; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zb-pday__rdv--ext { background: #efe7ee; color: var(--plum-deep); }
.zb-pday__none, .zb-pday__off { font-size: .82rem; color: var(--ink-2); margin: 0; }
.zb-pday__off { font-weight: 700; color: #8c3654; }
.zb-pday__edit summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--plum-deep); background: var(--paper); cursor: pointer; }
.zb-pday__edit summary::-webkit-details-marker { display: none; }
.zb-pday__edit[open] summary { background: var(--plum-deep); color: #fff; }
@media (min-width: 1100px) { .zb-pday__edit summary span { display: none; } .zb-pday__edit { position: absolute; top: 8px; right: 8px; } }
.zb-pday__sheet { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(52, 33, 50, .18), inset 0 0 0 1px var(--line); }
@media (min-width: 1100px) { .zb-pday__sheet { left: auto; right: -8px; width: 290px; top: 34px; } }
.zb-pday__title { margin: 0; font-weight: 700; }
.zb-pday__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.zb-pday__row small { color: var(--ink-2); }
.zb-pday__add { display: grid; gap: 8px; font-size: .88rem; font-weight: 600; }
.zb-pday__times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zb-pday__times .zb-input { width: auto; min-width: 92px; flex: 1 1 92px; }
.zb-pday__offbtn { width: 100%; }
.zb-plan__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.zb-plan__rules { list-style: none; margin: 14px 0; padding: 0; }
.zb-plan__rules li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.zb-plan__rules li > span { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-plan__rules em { font-style: normal; color: var(--ink-2); font-size: .85rem; }
.zb-plan__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: #e6f3ea; color: #24603b; font-size: .82rem; font-weight: 600; }
.zb-plan__chip button { display: inline-flex; padding: 3px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.zb-plan__chip button:hover { background: rgba(36, 96, 59, .14); }
.zb-plan__form { display: grid; gap: 10px; margin-top: 14px; }
.zb-plan__days { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-plan__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zb-plan__grid2 label { font-size: .82rem; font-weight: 700; display: grid; gap: 4px; }
.zb-plan__side { display: grid; gap: 18px; align-content: start; }
.zb-plan__buffer .zb-input { max-width: 200px; }
.zb-plan__link { display: flex; align-items: center; gap: 14px; color: inherit; }
.zb-plan__link > span { flex: 1; display: grid; gap: 2px; }
.zb-plan__link small { color: var(--ink-2); }
.zb-plan__link > svg:first-child { color: var(--plum); }
.zb-protabs__val { margin-left: auto; font-weight: 700; color: var(--plum); }
.zb-pday__row.is-skipped span { text-decoration: line-through; color: var(--ink-2); }
.zb-pday__row .zb-link { white-space: nowrap; flex-shrink: 0; }

/* ===== Proposition de rendez-vous ===== */
.zb-prop__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.zb-prop { display: grid; gap: 14px; margin-top: 14px; }
.zb-prop__step { border: 0; margin: 0; padding: 16px; border-radius: 16px; background: var(--paper); display: grid; gap: 10px; min-width: 0; }
.zb-prop__step legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 4px; font-weight: 700; }
.zb-prop__step legend span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--plum-deep); color: #fff; font-size: .8rem; }
.zb-prop__step > * { clear: both; }
.zb-prop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zb-prop__grid label, .zb-prop__address { display: grid; gap: 5px; font-size: .85rem; font-weight: 700; }
.zb-prop__money { position: relative; display: block; }
.zb-prop__money b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-weight: 600; }
.zb-prop__money .zb-input { padding-right: 34px; }
.zb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zb-seg label { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; font-weight: 600; cursor: pointer; }
.zb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.zb-seg label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--plum-deep); background: #fff; color: var(--plum-deep); }
.zb-seg label:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.zb-seg label.is-disabled { opacity: .45; cursor: not-allowed; }
.zb-prop__dates { display: grid; gap: 8px; }
.zb-prop__dates .zb-link { justify-self: start; }
.zb-prop__note { display: block; font-weight: 400; color: var(--ink-2); font-size: .8rem; margin-top: 2px; }
.zb-prop__deposits { margin-left: 27px; }
.zb-prop__sum { margin: 0; padding: 10px 14px; border-radius: 12px; background: #eef6f0; color: #24603b; font-weight: 600; font-size: .9rem; }
.zb-prop__sum:empty { display: none; }
@media (max-width: 560px) { .zb-seg label { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; font-size: .84rem; line-height: 1.25; } }

/* ===== Reservation cote cliente ===== */
.zb-book .zb-wrap--narrow { display: grid; gap: 16px; }
.zb-book .zb-title { margin: 0; }
.zb-book__card { display: grid; gap: 14px; }
.zb-book__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zb-book__price strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--plum-deep); }
.zb-book__price span { color: var(--ink-2); font-weight: 600; }
.zb-book__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zb-book__facts li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.zb-book__facts svg { color: var(--plum); flex: none; }
.zb-book__form { display: grid; gap: 16px; }
.zb-book__h { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 14px; }
.zb-book__h span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--plum-deep); color: #fff; font-size: .82rem; }
.zb-book__days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 14px; padding: 2px 20px 4px; scroll-snap-type: x proximity; }
.zb-book__days::-webkit-scrollbar { display: none; }
.zb-book__day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 64px; padding: 10px 0; border: 0; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: inherit; color: var(--plum-deep); cursor: pointer; scroll-snap-align: start; }
.zb-book__day span, .zb-book__day small { font-size: .72rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.zb-book__day strong { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.zb-book__day.is-on { background: var(--plum-deep); box-shadow: none; color: #fff; }
.zb-book__day.is-on span, .zb-book__day.is-on small { color: rgba(255, 255, 255, .75); }
.zb-book__times .zb-pill span { min-width: 68px; justify-content: center; }
.zb-book__dates, .zb-book__pay { display: grid; gap: 8px; }
.zb-book__date, .zb-book__opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.zb-book__date input, .zb-book__opt input { width: 18px; height: 18px; accent-color: var(--plum-deep); flex: none; }
.zb-book__date span, .zb-book__opt span { display: grid; gap: 2px; }
.zb-book__date em, .zb-book__opt em { font-style: normal; color: var(--ink-2); font-size: .88rem; }
.zb-book__date:has(input:checked), .zb-book__opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--plum-deep); background: #fff; }
.zb-book__cta { width: 100%; margin-top: 16px; justify-content: center; }
.zb-book__trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; color: var(--ink-2); }
.zb-book__trust li { display: flex; align-items: center; gap: 8px; }
.zb-book__ok { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 22px; }
.zb-book__ok > svg { color: var(--rose); }
.zb-book__ok h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.zb-book__ok p { margin: 0; color: var(--ink-2); }
.zb-book .zb-wrap--narrow { grid-template-columns: minmax(0, 1fr); }
.zb-book__times { flex-wrap: wrap; }
.zb-book__form { grid-template-columns: minmax(0, 1fr); }
.zb-book .zb-box { min-width: 0; }

/* ===== Rendez-vous coiffeuse ===== */
.zb-bk__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.zb-bk { display: grid; gap: 10px; }
.zb-bk__day { margin: 14px 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.zb-bk__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-bk__item.is-cancelled { opacity: .65; }
.zb-bk__when { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; align-self: start; padding: 10px 0; border-radius: 14px; background: var(--paper); text-align: center; }
.zb-bk__when strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--plum-deep); line-height: 1; }
.zb-bk__when span { font-size: .75rem; color: var(--ink-2); }
.zb-bk__body { display: grid; gap: 5px; min-width: 0; }
.zb-bk__body p { margin: 0; }
.zb-bk__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zb-bk__who strong { font-size: 1.05rem; }
.zb-bk__what { color: var(--ink); font-size: .92rem; }
.zb-bk__where { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .86rem; }
.zb-bk__pay small { color: var(--ink-2); font-size: .8rem; }
.zb-bk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.zb-bk__actions form { margin: 0; }
.zb-bk__cancel { margin-left: auto !important; }
.zb-bk__cancel .zb-link { color: #a33d5c; font-size: .85rem; }
.zb-bk__empty { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center; color: var(--ink-2); }
.zb-bk__empty svg { color: var(--rose); }
.zb-bk__form { display: grid; gap: 14px; }
.zb-bk__form > .zb-prop__step label { display: grid; gap: 5px; font-size: .85rem; font-weight: 700; }
.zb-prop__msg { display: grid; gap: 6px; font-size: .88rem; font-weight: 700; }

.zb-countries__region { margin: 26px 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.zb-countries__region:first-child { margin-top: 0; }
.zb-countries { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.zb-countries__card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.zb-countries__card:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-countries__card.is-current { box-shadow: inset 0 0 0 2px var(--rose); }
.zb-countries__card .fi { width: 34px; height: 24px; border-radius: 4px; flex: none; background-size: cover; }
.zb-countries__card > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.zb-countries__card small { color: var(--ink-2); }
.zb-countries__card > svg { color: var(--ink-2); flex: none; }

/* ===== Reseaux sociaux ===== */
.zb-socials { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zb-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); transition: background .2s, color .2s; }
.zb-socials a:hover { background: var(--rose); color: #fff; }
.zb-socials span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zb-socials--drawer a { background: var(--paper); color: var(--plum-deep); }
.zb-footer__follow { margin: 18px 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.zb-socialsdd { position: relative; }
.zb-socialsdd summary { list-style: none; cursor: pointer; }
.zb-socialsdd summary::-webkit-details-marker { display: none; }
.zb-socialsdd__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 220px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(52, 33, 50, .18), inset 0 0 0 1px var(--line); }
.zb-socialsdd__panel p { margin: 4px 8px 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.zb-socialsdd__list { list-style: none; margin: 0; padding: 0; display: grid; }
.zb-socialsdd__list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--plum-deep); }
.zb-socialsdd__list a:hover { background: var(--paper); color: var(--rose); }
@media (max-width: 760px) { .zb-socialsdd { display: none; } }

/* ===== Barometre ===== */
.zb-baro { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.zb-baro__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.zb-baro__grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.zb-stat { padding: 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.zb-stat h2 { margin: 0 0 6px; font-size: 1.35rem; }
.zb-stat h3 { margin: 0 0 14px; font-size: 1rem; }
.zb-stat__chart { position: relative; height: 300px; margin-top: 14px; }
.zb-stat__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zb-stat__bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: .88rem; }
.zb-stat__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-stat__track { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.zb-stat__track span { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.zb-stat__bars strong { text-align: right; font-variant-numeric: tabular-nums; }
.zb-stat__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.zb-stat__table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.zb-stat__table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.zb-stat__table td:first-child { font-weight: 600; }
.zb-tablewrap { overflow-x: auto; margin-top: 10px; }
.zb-stat__map { height: 420px; margin-top: 12px; border-radius: 14px; overflow: hidden; z-index: 0; }
.zb-stat__rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.zb-stat__rank li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); counter-increment: r; font-size: .92rem; }
.zb-stat__rank li::before { content: "#" counter(r); min-width: 2.4em; color: var(--ink-2); font-size: .8rem; }
.zb-stat__rank li > :nth-child(1) { flex: 1; min-width: 0; }
.zb-stat__rank li strong { font-variant-numeric: tabular-nums; }
.zb-stat__rank li { flex-wrap: wrap; }
.zb-stat__rate { min-width: 3.2em; text-align: right; color: var(--ink-2); font-size: .8rem; font-variant-numeric: tabular-nums; }
.zb-stat__legend { margin: -4px 0 8px; color: var(--ink-2); font-size: .8rem; }
.zb-stat__arr { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.zb-stat__sub { flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 0 0 0 calc(2.4em + 24px); }
.zb-stat__sub li { counter-increment: none; padding: 6px 0; border-bottom: 0; font-size: .86rem; }
.zb-stat__sub li::before { content: none; }
.zb-stat--cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-stat--cta p { margin: 4px 0 0; color: rgba(255, 255, 255, .78); }
.zb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.zb-points { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #fdf3e2; }
.zb-points .zb-check-line { margin: 0; }
.zb-points small { display: block; font-size: .8rem; color: var(--ink-2); margin-top: 2px; }
.zb-points--guest { font-size: .86rem; color: #7a5300; }

.zb-club__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.zb-club__n { margin: 4px 0 0; font-size: 1rem; }
.zb-club__n strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; color: var(--plum-deep); }
.zb-club__how { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.zb-club__how li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--paper); font-size: .86rem; }
.zb-club__how strong { color: var(--rose); font-size: 1rem; }
.zb-club__hist { margin-top: 14px; }
.zb-club__hist summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.zb-points .zb-check-line > span { display: grid; gap: 2px; }

/* ===== Accueil espace coiffeuse ===== */
.zb-zen { position: relative; overflow: hidden; display: grid; gap: 18px; margin-bottom: 18px; padding: 24px 22px; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, #f9dfe6 0%, #fbf1ec 45%, #f6efe9 100%); }
.zb-zen::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .35); pointer-events: none; }
.zb-zen__kicker { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #a33d5c; }
.zb-zen h1 { margin: 4px 0 6px; font-size: clamp(1.9rem, 6vw, 2.6rem); }
.zb-zen__msg { margin: 0; max-width: 52ch; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.zb-zen__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.zb-zen__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--plum-deep); font-weight: 600; font-size: .88rem; box-shadow: 0 2px 10px rgba(74, 57, 72, .06); }
.zb-zen__chip b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }
.zb-zen__chip:hover { background: #fff; color: var(--rose); }
@media (min-width: 1020px) { .zb-zen { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 32px; } .zb-zen__actions { max-width: 380px; justify-content: flex-end; } }
.zb-zen__next { margin-bottom: 18px; }
.zb-zen__rdv { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; }
.zb-zen__rdv > span:last-child { display: grid; gap: 2px; }
.zb-zen__rdv small { color: var(--ink-2); }
.zb-zen__empty { margin: 0; color: var(--ink-2); }
@media (min-width: 1020px) { .zb-app--pro .zb-kpis { grid-template-columns: repeat(3, 1fr); } }

/* ===== Page ville : avis, tarifs, dernieres demandes, guide, prestations, FAQ ===== */
.zb-city__h { font-size: 1.3rem; margin: 0 0 14px; }
.zb-cityrevs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 82%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 6px; scrollbar-width: none; }
.zb-cityrevs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .zb-cityrevs { grid-auto-columns: calc((100% - 28px) / 3); } }
.zb-cityrev { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.zb-cityrev__stars { margin: 0; display: flex; gap: 2px; color: #eda100; }
.zb-cityrev blockquote { margin: 0; font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.zb-cityrev__reply { margin: 0; font-size: .85rem; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--line); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zb-cityrev figcaption { margin-top: auto; font-size: .82rem; color: var(--ink-2); display: grid; gap: 10px; }
.zb-cityrev figcaption p { margin: 0; }
.zb-cityrev figcaption strong { color: var(--ink); }
.zb-cityrev__hd { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.zb-cityrev__hd > img, .zb-cityrev__hd > span:first-child { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.zb-cityrev__hd > span:first-child { display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--plum-deep); font-weight: 800; }
.zb-cityrev__hd em { font-style: normal; }
.zb-cityrev__hd small { display: block; font-size: .76rem; }
.zb-cityrev__hd:hover strong { color: var(--rose); }
.zb-cityrev__stars .zb-ic--off { opacity: .25; }
.zb-cityinfo { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .zb-cityinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.zb-cityinfo__card h2 { font-size: 1.15rem; margin: 0 0 12px; }
.zb-cityinfo__card .zb-hint { margin: 12px 0 0; font-size: .82rem; }
.zb-cityprices { width: 100%; border-collapse: collapse; font-size: .9rem; }
.zb-cityprices th { text-align: left; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 0 6px 8px 0; }
.zb-cityprices td { padding: 9px 6px 9px 0; border-top: 1px solid var(--line); }
.zb-cityprices th:not(:first-child), .zb-cityprices td:not(:first-child) { text-align: right; white-space: nowrap; }
.zb-cityprices tr.is-sub td { border-top-style: dashed; font-size: .86rem; }
.zb-cityprices tr.is-sub td:first-child { padding-left: 10px; color: var(--ink-2); }
.zb-cityprices a { font-weight: 600; color: var(--ink); }
.zb-cityprices a:hover { color: var(--rose); }
.zb-cityprices sup { color: var(--ink-2); margin-left: 2px; }
.zb-cityprices small { display: block; font-size: .72rem; color: var(--ink-2); font-weight: 500; }
.zb-cityleads { list-style: none; margin: 0; padding: 0; }
.zb-cityleads li { padding: 11px 0; border-top: 1px solid var(--line); }
.zb-cityleads li:first-child { border-top: 0; padding-top: 0; }
.zb-cityleads p { margin: 0; }
.zb-cityleads__top { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.zb-cityleads__top time { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.zb-cityleads__what { font-size: .82rem; color: var(--ink-2); margin-top: 2px !important; }
.zb-cityleads__what a { color: var(--rose); font-weight: 700; }
.zb-cityleads q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: .9rem; font-style: italic; color: var(--ink); quotes: "« " " »"; }
.zb-cityleads__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
.zb-cityleads__foot .zb-hint { margin: 0 !important; flex: 1 1 200px; }
.zb-city__guide .zb-faq__item summary, .zb-section--cream .zb-faq__item summary { padding: 16px 0; }
.zb-faq__item summary h3 { margin: 0; font-size: 1rem; font-weight: 700; font-family: inherit; }
.zb-city__guide .zb-faq__item p { padding-bottom: 18px; margin: 0; }
.zb-citysrvs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .zb-citysrvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zb-citysrvs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zb-citysrv { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s; }
.zb-citysrv:hover { border-color: var(--rose); }
.zb-citysrv strong { font-size: .95rem; }
.zb-citysrv small { margin-left: 8px; font-size: .74rem; color: var(--ink-2); }
.zb-citysrv span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.zb-citysrvs__more { margin-top: 14px; }
.zb-citysrvs__more summary { list-style: none; cursor: pointer; margin-bottom: 12px; }
.zb-citysrvs__more summary::-webkit-details-marker { display: none; }
.zb-citysrvs__more[open] summary { display: none; }
.zb-city__facts { color: var(--ink-2); margin: 0 0 30px; line-height: 1.6; }
.zb-city__facts a { display: block; margin-top: 6px; color: var(--plum-deep); font-weight: 700; }

/* ===== Premiere visite : voile leger sur les resultats pour montrer le formulaire en bas ===== */
.zb-hds.is-veiled { position: relative; }
.zb-hds.is-veiled::after { content: ""; position: absolute; inset: -8px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 252, 251, .25), rgba(255, 252, 251, .85) 55%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); z-index: 2; cursor: pointer; animation: zb-veil-in .5s ease both; }
.zb-veilhint { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; width: min(440px, calc(100% - 32px)); background: var(--plum-deep, #3d2a3b); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px -16px rgba(44, 33, 48, .55); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; animation: zb-hint-in .45s .15s ease both; }
.zb-veilhint strong { font-size: .98rem; }
.zb-veilhint p { grid-column: 1; margin: 0; font-size: .86rem; opacity: .85; }
.zb-veilhint button { grid-row: 1 / span 2; grid-column: 2; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.zb-veilhint::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.zb-sticky.is-glow { box-shadow: 0 -12px 30px -18px rgba(44, 33, 48, .35), 0 0 0 3px rgba(194, 74, 111, .35); animation: zb-glow 2.4s ease-in-out infinite; }
@keyframes zb-veil-in { from { opacity: 0; } }
@keyframes zb-hint-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes zb-glow { 50% { box-shadow: 0 -12px 30px -18px rgba(44, 33, 48, .35), 0 0 0 6px rgba(194, 74, 111, .12); } }
@media (max-width: 700px) { .zb-veilhint { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .zb-hds.is-veiled::after, .zb-veilhint, .zb-sticky.is-glow { animation: none; } }
.zb-cityrich { margin: 18px 0 14px; }
.zb-cityrich h3 { font-size: 1rem; margin: 0 0 8px; }
.zb-cityrich__body { color: var(--ink-2); font-size: .94rem; line-height: 1.65; }
.zb-cityrich__body p { margin: 0 0 10px; }
.zb-cityrich__h { font-size: .95rem; color: var(--ink); margin: 14px 0 4px; }
.zb-cityrich.is-folded .zb-cityrich__body { max-height: 8.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.zb-cityrich .zb-link { margin-top: 6px; }

/* ===== Espace coiffeuse : mon score ===== */
.zb-myscore { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.zb-myscore h2 { font-size: 1.15rem; margin: 0 0 6px; }
.zb-myscore p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.zb-myscore__ring { --p: 0; flex-shrink: 0; width: 108px; height: 108px; border-radius: 50%; display: grid; place-content: center; text-align: center;
    background: radial-gradient(closest-side, #fff 78%, transparent 79%), conic-gradient(var(--rose) calc(var(--p) * 1%), var(--cream) 0); }
.zb-myscore__ring strong { font-size: 2rem; line-height: 1; color: var(--plum-deep); }
.zb-myscore__ring span { font-size: .75rem; color: var(--ink-2); }
.zb-scorelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .zb-scorelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zb-scorelist li { display: grid; gap: 8px; }
.zb-scorelist__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.zb-scorelist h3 { margin: 0; font-size: .98rem; }
.zb-scorelist__top strong { font-size: 1.1rem; color: var(--plum-deep); }
.zb-scorelist__bar { height: 6px; border-radius: 99px; background: var(--cream); overflow: hidden; }
.zb-scorelist__bar span { display: block; height: 100%; border-radius: 99px; background: var(--rose); }
.zb-scorelist p { margin: 0; font-size: .88rem; color: var(--ink-2); }
@media (max-width: 480px) { .zb-myscore { flex-direction: column; text-align: center; } }
.zb-scorelist .zb-link { justify-self: start; }

/* ===== Espace coiffeuse : onglets des demandes ===== */
.zb-leadtabs { flex-wrap: nowrap; }
.zb-leadtabs a { white-space: nowrap; flex-shrink: 0; }
.zb-leadtabs a.is-empty { opacity: .55; }
.zb-leadtabs__h { margin: -4px 0 12px; font-size: .86rem; }
.zb-leadrow__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.zb-leadrow__meta em { font-style: normal; font-size: .76rem; color: var(--ink-2); }
.zb-leadrow__meta em.is-dup { color: #b4541f; font-weight: 700; }
.zb-leadrow__meta em.is-follow { color: var(--rose); font-weight: 700; }
.zb-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; font-size: .9rem; }

/* ===== Espace coiffeuse : coupe-file ===== */
.zb-skip__now { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.zb-skip__now strong { font-size: 2.2rem; color: var(--plum-deep); line-height: 1; }
.zb-skip__now span { color: var(--ink-2); }
.zb-skip__how { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); font-size: .92rem; display: grid; gap: 6px; }
.zb-skip__packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 760px) { .zb-skip__packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zb-skip__pack { position: relative; display: grid; gap: 2px; text-align: center; cursor: pointer; font: inherit; border: 1.5px solid var(--line); transition: border-color .2s, transform .2s; }
.zb-skip__pack:hover:not(:disabled) { border-color: var(--rose); transform: translateY(-2px); }
.zb-skip__pack:disabled { opacity: .45; cursor: not-allowed; }
.zb-skip__pack strong { font-size: 1.8rem; color: var(--plum-deep); line-height: 1.1; }
.zb-skip__pack span { font-size: .82rem; color: var(--ink-2); }
.zb-skip__pack em { font-style: normal; font-weight: 700; margin-top: 6px; }
.zb-skip__pack small { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--rose); color: #fff; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.zb-skip__pack.is-best { border-color: var(--rose); }
/* Admin sur mobile : les tableaux larges defilent dans leur colonne au lieu d'elargir la page */
@media (max-width: 1019px) { .zb-app--admin .zb-app__main table { display: block; max-width: 100%; overflow-x: auto; } }
.zb-kpis > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 759px) { .zb-leadlist__item > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; } }
.zb-step__intro { margin: 0 0 16px; }

/* Routine : types de cheveux sur une ligne (mobile), guide offert, blocs d'info */
.zb-pills--hair { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.zb-pills--hair .zb-pill span { min-width: 0; width: 100%; padding: 10px 4px 8px; font-size: .8rem; }
.zb-routine__rating { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.zb-routine__rating span { color: var(--ink-2); }
.zb-routine__step--gift { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--rose-soft); }
.zb-routine__step--gift .zb-routine__price { color: var(--rose); }
.zb-routine__gift { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 10px; background: #fff; color: var(--plum); }
.zb-routine__steps--example .zb-routine__step { grid-template-columns: 30px 64px minmax(0, 1fr) auto; }
.zb-routine-info { display: grid; gap: 16px; }
@media (min-width: 860px) { .zb-routine-info { grid-template-columns: 1fr 1fr; } }
.zb-routine-info__card { padding: 22px; }
.zb-routine-info__card h2 { font-size: 1.45rem; margin: 8px 0 8px; }
.zb-routine-info__card h2 small { font-family: var(--sans, inherit); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--rose); border-radius: 999px; padding: 3px 9px; vertical-align: middle; }
.zb-routine-info__card h3 { font-size: 1rem; margin: 14px 0 6px; }
.zb-routine-info__card p, .zb-routine-info__card li { color: var(--ink-2); line-height: 1.55; }
.zb-routine-info__card ul, .zb-routine-info__card ol { margin: 6px 0 0; padding-left: 20px; }
.zb-routine-info__ic { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream); color: var(--plum); }
.zb-routine-info__card--guide { box-shadow: inset 0 0 0 1.5px var(--rose-soft); }

/* Accueil : « Un moment zen » souligne en rose */
.zb-hl { font-weight: 700; color: var(--plum-deep); background: linear-gradient(transparent 62%, var(--rose-soft) 62%); padding: 0 2px; }
.zb-hero .zb-hl { color: #fff; background: linear-gradient(transparent 58%, rgba(216, 111, 147, .75) 58%); }
/* Avis : texte replie a 6 lignes */
.zb-rclamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.zb-rclamp.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.zb-rclamp__more { align-self: flex-start; margin: 6px 0 0; font-size: .86rem; }
.zb-review__reply { margin: 10px 0 0; padding: 10px 12px; background: var(--cream); border-radius: 12px; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.zb-review__reply strong { color: var(--plum-deep); }

/* Miniatures video avant / apres des transformations */
.zb-gallery__vthumb { padding: 0; border: 0; cursor: pointer; background: #000; }
.zb-gallery__vthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.zb-gallery__vtag { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.zb-gallery__vthumb.is-on { box-shadow: 0 0 0 3px var(--rose); }
.zb-detail__products { margin: 14px 0 0; }
.zb-detail__products .zb-label { margin-bottom: 8px; }
.zb-taglist--shop a { display: inline-flex; align-items: center; gap: 6px; }
.zb-shot__poster, .zb-shot__video { position: absolute; inset: auto 0 0 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.zb-shot--transfo img, .zb-shot--transfo .zb-shot__poster { object-position: 50% 70%; }

/* Recherche des coiffures */
.zb-hshead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.zb-hshead h1 { margin-bottom: 0; }
.zb-hsearch { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 300px; margin: 0; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
/* Mobile : loupe a droite du titre, le champ s'ouvre au toucher ; presentation plus petite, coupee par « … » */
.zb-hsearch__ic { display: inline-flex; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: default; }
@media (max-width: 759px) {
    .zb-hshead { flex-wrap: nowrap; margin-bottom: 14px; }
    .zb-hshead h1 { flex: 1; min-width: 0; }
    .zb-hsearch { flex: 0 0 42px; height: 42px; padding: 0; justify-content: center; }
    .zb-hsearch input { display: none; }
    .zb-hsearch__ic { cursor: pointer; width: 42px; height: 42px; align-items: center; justify-content: center; }
    .zb-hshead:has(.zb-hsearch.is-open) { flex-wrap: wrap; }
    .zb-hsearch.is-open { flex: 0 0 100%; height: auto; padding: 4px 14px 4px 4px; justify-content: flex-start; }
    .zb-hsearch.is-open input { display: block; }
    .zb-hlead { font-size: .9rem; line-height: 1.45; }
}
.zb-hsearch > .zb-ic { color: var(--ink-2); flex-shrink: 0; }
.zb-hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: .88rem; padding: 6px 0; }
.zb-hsearch:focus-within { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-hsearch__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(34, 26, 36, .14); }
.zb-hsearch__list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.zb-hsearch__list a:hover, .zb-hsearch__list a:focus { background: var(--cream); outline: 0; }
.zb-deflink { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Demande : types de cheveux en 3 colonnes compactes sur mobile */
@media (max-width: 759px) {
    .zb-step .zb-pills--icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .zb-step .zb-pills--icons .zb-pill span { min-width: 0; width: 100%; padding: 8px 4px 7px; gap: 4px; font-size: .78rem; }
}

/* Liseré : demande en cours, retour au suivi */
.zb-leadbar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: var(--plum-deep); color: #fff; font-size: .86rem; text-align: center; text-decoration: none; }
.zb-leadbar strong { color: var(--rose-soft); white-space: nowrap; }
.zb-leadbar:hover strong { text-decoration: underline; }
.zb-leadbar__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #6fd39b; box-shadow: 0 0 0 0 rgba(111, 211, 155, .7); animation: zb-pulse 1.8s infinite; }
@keyframes zb-pulse { 70% { box-shadow: 0 0 0 7px rgba(111, 211, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 211, 155, 0); } }
@media (prefers-reduced-motion: reduce) { .zb-leadbar__dot { animation: none; } }
.zb-autorefresh { margin-left: auto; color: var(--ink-2); font-size: .8rem; }

/* Espace coiffeuse : sur mobile, pas d'en-tete du site ni de liseré client ; le bloc du haut sert d'en-tete */
.zb-app__home, .zb-app__logout { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255, 255, 255, .85); }
.zb-app__home { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.zb-app__home img { width: 28px; height: auto; }
.zb-app__logout { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.zb-app__logout:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (min-width: 1020px) { .zb-app__home { display: none; } }
@media (max-width: 1019px) {
    body:has(.zb-app--pro) .zb-header, body:has(.zb-app--pro) .zb-leadbar { display: none; }
    .zb-app--pro .zb-app__side { position: sticky; top: 0; z-index: 40; }
}

/* Espace coiffeuse : ligne de demande depliable */
.zb-leaditem { border-bottom: 1px solid var(--line); }
.zb-leaditem > summary { list-style: none; cursor: pointer; border-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; }
.zb-leaditem > summary .zb-leadrow__side { text-align: right; align-items: flex-end; }
.zb-leaditem > summary::-webkit-details-marker { display: none; }
.zb-leadrow__chev { flex-shrink: 0; color: var(--ink-2); transition: transform .2s; }
.zb-leaditem[open] .zb-leadrow__chev { transform: rotate(180deg); }
.zb-leaditem__body { padding: 4px 4px 16px; }
.zb-leaditem__body .zb-btn { margin-top: 12px; }
.zb-leadrow__chat { display: block; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.zb-leadrow__meta em.is-none { color: #fff; background: var(--rose); font-style: normal; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.zb-leadrow__meta em.is-travel { color: var(--plum-deep); font-weight: 700; }
.zb-facts__hl dd { color: var(--plum-deep); font-weight: 700; }
.zb-done__widen { margin: 0 0 16px; text-align: left; }
.zb-done__widen p { margin: 0 0 12px; }
.zb-leadrow__who { display: block; font-weight: 500; font-size: .84rem; color: var(--ink-2); }
.zb-leadrow__media { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; color: var(--plum); font-size: .74rem; font-weight: 700; }
.zb-leadrow__media > span { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; background: #efe7f1; }
.zb-leadrow__ago { display: block; font-weight: 800; font-size: .86rem; color: var(--ink); white-space: nowrap; }
.zb-leadrow__ago.is-fresh { color: var(--rose); }
.zb-leadrow__side time { font-size: .74rem; color: var(--ink-2); }

.zb-leadrow__prices { display: inline-flex; gap: 4px; }
.zb-badge--chat { display: inline-flex; align-items: center; gap: 3px; background: #ece3f0; color: var(--plum-deep); }
.zb-leadrow__meta em.is-none { white-space: nowrap; }
/* Mobile : titre + fleche en haut, puis infos, puis une rangee anciennete / prix / date */
@media (max-width: 640px) {
    .zb-leaditem > summary { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 8px; }
    .zb-leaditem > summary .zb-leadrow__main { grid-column: 1; grid-row: 1; }
    .zb-leaditem > summary .zb-leadrow__chev { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; }
    .zb-leaditem > summary .zb-leadrow__side { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; text-align: left; }
    .zb-leadrow__ago { display: inline; }
}

/* Une demande = une carte, date en tete */
.zb-leadcards { display: grid; gap: 10px; }
.zb-leadcards .zb-leaditem { background: #fff; border: 0; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
.zb-leadcards .zb-leaditem[open] { box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-leadcards .zb-leaditem > summary { padding: 12px 0; }
.zb-leadrow__when { display: block; margin-bottom: 4px; font-size: .78rem; color: var(--ink-2); }
.zb-leadrow__when b { color: var(--ink); font-weight: 800; }
.zb-leadrow__when b.is-fresh { color: var(--rose); }
.zb-badge--ic { display: inline-flex; align-items: center; gap: 4px; }
.zb-leadrow__none { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.zb-leadrow__km { font-weight: 800; color: var(--plum-deep); }
/* Desktop : anciennete calee en haut a droite de la carte */
@media (min-width: 641px) {
    .zb-leadcards .zb-leaditem { position: relative; }
    .zb-leadcards .zb-leadrow__when { position: absolute; top: 12px; right: 50px; margin: 0; }
    .zb-leadcards .zb-leaditem > summary .zb-leadrow__side { align-self: end; padding-top: 22px; }
}

/* Mot de la cliente : en tete de la demande, extrait dans la carte */
.zb-leadmsg { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-md); background: #f3edf5; box-shadow: inset 3px 0 0 var(--plum); }
.zb-leadmsg__h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); }
.zb-leadmsg blockquote { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.zb-leadrow__msg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 4px 0 2px; font-size: .86rem; font-style: italic; color: var(--ink); quotes: "« " " »"; }
.zb-important { color: var(--rose); font-weight: 700; }
.zb-leadrow__id { margin-left: 8px; font-size: .74rem; font-weight: 600; color: var(--ink-2); font-family: ui-monospace, Menlo, monospace; vertical-align: middle; }
.zb-unlockgroup { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-unlockgroup__h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--plum); }
.zb-unlockgroup .zb-hint { margin: 0; }
.zb-unlock__or { margin: 4px 0; text-align: center; font-size: .8rem; color: var(--ink-2); }
.zb-assets img { cursor: zoom-in; }
.zb-assets__vid { position: relative; padding: 0; border: 0; background: #000; border-radius: inherit; cursor: pointer; overflow: hidden; }
.zb-assets__vid video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.zb-assets__play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34, 26, 36, .6); color: #fff; }
.zb-lightbox video { max-width: 100%; max-height: 100%; border-radius: 12px; background: #000; }
/* Bloc « Repondre » : rien ne deborde de la colonne (textes longs sur deux lignes) */
.zb-app__cols > * { min-width: 0; }
.zb-box--accent .zb-stack, .zb-unlockgroup { min-width: 0; }
.zb-box--accent .zb-btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
.zb-unlockgroup .zb-btn, .zb-box--accent .zb-stack > .zb-btn { width: 100%; }
.zb-leadactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.zb-leadactions .zb-btn { display: inline-flex; align-items: center; gap: 6px; }
.zb-leadactions .zb-btn.is-on { color: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.zb-leadshead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.zb-leadshead .zb-btn { display: inline-flex; align-items: center; gap: 6px; }
.zb-leadshead__n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-size: .72rem; line-height: 20px; text-align: center; }
.zb-btn.is-armed { box-shadow: 0 0 0 3px rgba(216, 111, 147, .35); }

/* Non lues : carte blanche, liseré violet, titre gras ; lues : carte plus discrete */
.zb-leadcards .zb-leaditem.is-unread { box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--plum); }
.zb-leadcards .zb-leaditem.is-read { background: #faf7f6; }
.zb-leadcards .zb-leaditem.is-read .zb-leadrow__main strong { font-weight: 600; color: var(--ink-2); }
.zb-leadcards .zb-leaditem.is-read[open] { background: #fff; }
.zb-prop__warn { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md); background: #fdeaea; color: #8e2b2b; box-shadow: 0 6px 18px -10px rgba(142, 43, 43, .5); animation: zb-pop .18s ease-out; }
.zb-prop__warn p { margin: 0; font-size: .88rem; font-weight: 600; }
@keyframes zb-pop { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }

.zb-leadshead__tools { display: flex; align-items: center; gap: 8px; }
.zb-leadsearch { display: flex; align-items: center; gap: 6px; }
.zb-leadsearch input { display: none; width: 220px; height: 40px; }
.zb-leadsearch.is-open input { display: block; }
@media (max-width: 520px) { .zb-leadsearch.is-open input { width: 150px; } }
/* Fiche demande : espace entre les colonnes et le bloc Echanges, colonnes a la hauteur de leur contenu */
#echanges { margin-top: 18px; }
.zb-app__cols--wide { align-items: start; }
/* Creneaux proposes : sur une ligne (3 par ligne en desktop, 1 sur mobile) */
.zb-prop__dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-items: end; }
.zb-prop__date { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zb-prop__date[hidden] { display: none; }
.zb-prop__date-h { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--plum); }
.zb-prop__date .zb-input { width: 100%; min-width: 0; }
.zb-prop__dates [data-prop-add-date] { grid-column: 1 / -1; justify-self: start; }
.zb-flash--inline { margin: 0 0 12px; border-radius: var(--r-md); }
.zb-flash--inline .zb-wrap { padding: 0; }
/* Profil : estimation des demandes par mois */
.zb-estimate { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; background: #f3edf5; box-shadow: inset 4px 0 0 var(--plum); transition: background .3s; }
.zb-estimate > .zb-ic { flex-shrink: 0; color: var(--plum); margin-top: 2px; }
.zb-estimate p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.zb-estimate strong { font-size: 1.02rem; color: var(--plum-deep); }
.zb-estimate span { font-weight: 700; color: var(--rose); }
.zb-estimate small { color: var(--ink-2); }
.zb-estimate.is-updated { background: #e9dcef; }
.zb-pill--fam span { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--plum); }
/* Profil : reglages de notification */
.zb-notif { display: grid; gap: 8px; }
.zb-notif__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-notif__row strong { display: block; }
.zb-notif__row small { display: block; color: var(--ink-2); font-size: .8rem; line-height: 1.4; }
.zb-notif__ok { color: #2f7d4f !important; font-weight: 700; }
.zb-notif__tag { padding: 2px 8px; border-radius: 999px; background: #e7f3ec; color: #2f7d4f; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.zb-notif__tag.is-paid { background: #f7e4ea; color: var(--rose); }
.zb-notif-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.zb-notif-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.zb-notif-switch span { position: absolute; inset: 0; border-radius: 999px; background: #d9d2d6; transition: background .2s; }
.zb-notif-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.zb-notif-switch input:checked + span { background: var(--plum); }
.zb-notif-switch input:checked + span::after { transform: translateX(18px); }
.zb-notif-switch input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (max-width: 520px) { .zb-notif__row { grid-template-columns: minmax(0, 1fr) auto; } .zb-notif__tag { grid-column: 1 / -1; justify-self: start; } }
.zb-photo { display: flex; flex-direction: column; gap: 6px; }
.zb-photo__tag { height: 36px; padding: 0 10px; font-size: .8rem; }
.zb-photo__rm { font-size: .8rem; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.zb-photo__tag { width: 100%; min-width: 0; }

/* Formulaire de proposition : un element masque (dates quand « planning » est choisi, adresse...) reste masque malgre son display */
.zb-prop [hidden] { display: none !important; }
/* Mobile : moins d'encadres imbriques dans une demande depliee (carte > bloc > proposition > etape) */
@media (max-width: 640px) {
    .zb-leadcards .zb-leaditem { padding: 0 10px; }
    .zb-leaditem .zb-leadbody { padding: 10px 0 4px; }
    .zb-leaditem .zb-leadbody .zb-box { padding: 0; border: 0; box-shadow: none; border-radius: 0; margin-bottom: 0; }
    .zb-leaditem .zb-leadbody .zb-box:not(.zb-box--accent) { background: none; }
    .zb-leaditem .zb-leadbody .zb-box--accent { padding: 12px; border-radius: 12px; }
    .zb-leaditem .zb-leadbody .zb-box + .zb-box { padding-top: 14px; border-top: 1px solid var(--line); }
    .zb-proposal { padding: 10px 0 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
    .zb-prop { gap: 0; padding: 0; background: none; }
    #echanges.zb-box { padding: 16px 14px; }
    .zb-prop__step { padding: 14px 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }
    .zb-prop__step:first-child { border-top: 0; padding-top: 4px; }
    .zb-prop__dates { grid-template-columns: 1fr; gap: 8px; }
    .zb-prop__date { flex-direction: row; align-items: center; gap: 10px; }
    .zb-prop__date-h { flex: 0 0 64px; }
    .zb-prop__date .zb-input { height: 42px; }
}

/* Messages : boite de reception, « en train d'ecrire », pastille non lus */
.zb-inbox { display: grid; gap: 8px; }
.zb-inbox__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; }
.zb-inbox__row:hover { box-shadow: inset 0 0 0 1px var(--plum); }
.zb-inbox__row.is-unread { box-shadow: inset 3px 0 0 var(--plum-deep), inset 0 0 0 1px var(--line); }
.zb-inbox__av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--cream); color: var(--plum-deep); font-weight: 800; }
.zb-inbox__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zb-inbox__main strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: .95rem; }
.zb-inbox__main em { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--ink-2); }
.zb-inbox__last { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; color: var(--ink-2); }
.zb-inbox__row.is-unread .zb-inbox__last { color: var(--ink); font-weight: 600; }
.zb-inbox__side { display: grid; justify-items: end; gap: 4px; font-size: .75rem; color: var(--ink-2); }
.zb-inbox__n, .zb-header__unread { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--plum-deep); color: #fff; font-size: .72rem; font-weight: 800; }
.zb-header__unread { margin-left: 6px; }
.zb-typing { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: .8rem; color: var(--ink-2); }
.zb-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--plum); animation: zb-typing 1.2s infinite ease-in-out; }
.zb-typing span:nth-child(2) { animation-delay: .15s; }
.zb-typing span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes zb-typing { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .zb-typing span { animation: none; } }
.zb-chat-err { margin: 0; }
/* Espace coiffeuse sur mobile : sur une page courte, le contenu prend la hauteur restante (pas de bande sombre sous l'en-tete) */
@media (max-width: 1019px) { .zb-app { grid-template-rows: auto 1fr; } }
/* Assistance coiffeuse : boutons Flora (Calendly) et WhatsApp sous l'en-tete du chat */
.zb-chat__cta { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.zb-chat__cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--rose, #e17fa0); color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; }
.zb-chat__cta-btn--wa { background: #25d366; }
.zb-chat__cta-btn:hover { filter: brightness(.95); }

/* Chat : conversations a gauche, conversation ouverte a droite ; mobile : l'une ou l'autre (comme une messagerie) */
.zb-chatapp { display: grid; gap: 0; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-height: 70vh; }
@media (min-width: 900px) { .zb-chatapp { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); height: calc(100vh - 220px); min-height: 520px; } }
.zb-chatapp__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.zb-chatapp__tabs { display: flex; gap: 4px; padding: 10px 10px 0; }
.zb-chatapp__tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.zb-chatapp__tabs a[aria-current] { background: var(--plum-deep); color: #fff; }
.zb-chatapp__tabs b { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--cream); color: var(--plum-deep); font-size: .7rem; line-height: 18px; text-align: center; }
.zb-chatapp__search { position: relative; margin: 10px; }
.zb-chatapp__search .zb-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.zb-chatapp__search .zb-input { padding-left: 36px; height: 40px; }
.zb-chatapp__list .zb-inbox { flex: 1; overflow-y: auto; gap: 0; align-content: start; }
.zb-chatapp__list .zb-inbox__row { border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.zb-chatapp__list .zb-inbox__row.is-unread { box-shadow: inset 3px 0 0 var(--plum-deep); }
.zb-chatapp__list .zb-inbox__row.is-current { background: var(--cream); }
.zb-chatapp__list .zb-empty { padding: 20px; }
.zb-chatapp__conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); }
.zb-chatapp__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.zb-chatapp__who { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.zb-chatapp__who em { font-style: normal; font-size: .8rem; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zb-chatapp__back { display: none; color: var(--ink); }
.zb-ic--back { transform: rotate(180deg); }
.zb-chatapp__thread { flex: 1; overflow-y: auto; margin: 0; padding: 16px 14px; }
.zb-chatapp__conv .zb-typing { margin: 0; padding: 0 14px 6px; }
.zb-chatapp__warn { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; background: #fbeef2; color: #8a2549; font-size: .8rem; font-weight: 600; }
.zb-chatapp__compose { display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
/* Champ du Chat : une ligne au repos, deux au toucher, puis suit la saisie jusqu'a 5 lignes (data-autogrow) */
.zb-chatapp__compose textarea { display: block; min-height: 0; height: 44px; max-height: 136px; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; resize: none; overflow-y: hidden; }
.zb-chatapp__compose textarea.is-grown { min-height: 68px; }
.zb-chatapp__compose .zb-dictate { bottom: 5px; }
.zb-chatapp__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zb-chatapp__tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zb-chatapp__propose { gap: 6px; }
.zb-chatapp__short { display: none; }
.zb-chatapp__file { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--plum-deep); font-weight: 600; }
.zb-chatapp__file img, .zb-chatapp__file video { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #000; }
.zb-chatapp__file button { margin-left: auto; border: 0; background: none; color: var(--ink-2); font-size: 1.2rem; cursor: pointer; }
.zb-chatapp__attach { cursor: pointer; gap: 6px; }
.zb-chatapp__send { gap: 6px; }
.zb-chatapp__none { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--ink-2); padding: 40px 20px; text-align: center; }
.zb-msg.has-media { padding: 6px; }
.zb-msg.has-media p, .zb-msg.has-media time, .zb-msg.has-media .zb-msg__prop { padding: 0 8px; }
.zb-msg__media { display: block; }
.zb-msg__media img, video.zb-msg__media { display: block; max-width: min(280px, 100%); max-height: 320px; border-radius: 12px; object-fit: cover; background: #000; }
.zb-thread--preview { margin-bottom: 12px; opacity: .9; }
@media (max-width: 899px) {
    .zb-chatapp { border-radius: 0; box-shadow: none; margin: 0 -16px; min-height: calc(100vh - 230px); }
    .zb-chatapp.is-open .zb-chatapp__list, .zb-chatapp:not(.is-open) .zb-chatapp__conv { display: none; }
    .zb-chatapp.is-open { position: fixed; inset: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 60; margin: 0; }
    .zb-app--pro .zb-chatapp.is-open { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .zb-chatapp__back { display: inline-flex; }
    .zb-chatapp__head .zb-btn { padding: 6px 10px; font-size: .78rem; }
    .zb-chatapp__compose { gap: 6px; padding: 8px 10px; }
}
/* Petit ecran : « Proposer » court et piece jointe en icone seule quand la proposition est affichee */
@media (max-width: 520px) {
    .zb-chatapp__long { display: none; }
    .zb-chatapp__short { display: inline; }
    .zb-chatapp__tools:has(.zb-chatapp__propose) .zb-chatapp__attach span { display: none; }
    .zb-chatapp__bar .zb-btn--sm { padding: 0 12px; }
}
.zb-msg.is-me .zb-link { color: #fff; text-decoration: underline; }
/* Admin : e-mail groupe aux coiffeuses */
.zb-mailer summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.zb-mailer summary span { color: var(--ink-2); font-size: .85rem; }
.zb-mailer[open] summary { margin-bottom: 14px; }
.zb-mailer .zb-form { display: grid; gap: 12px; }
.zb-wysiwyg { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; overflow: hidden; }
.zb-wysiwyg__bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--paper); }
.zb-wysiwyg__bar button { min-width: 34px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: .82rem; }
.zb-wysiwyg__bar button:hover { box-shadow: inset 0 0 0 1px var(--plum); }
.zb-wysiwyg__bar .zb-input { flex: 1 1 220px; height: 32px; }
.zb-wysiwyg__area { min-height: 220px; padding: 14px 16px; line-height: 1.6; outline: none; }
.zb-wysiwyg__area h2 { font-size: 1.2rem; margin: .6em 0 .3em; }
.zb-bk__addr { margin: 2px 0 0; font-size: .86rem; }
/* Demande : case « supplement de deplacement » sur deux lignes courtes, delais en grille 2 x 2, blocs mieux espaces */
.zb-lead__travel { margin: 10px 0 4px; align-items: flex-start; }
.zb-lead__travel span { display: grid; gap: 2px; }
.zb-lead__travel small { font-size: .78rem; color: var(--ink-2); font-weight: 400; }
.zb-lead__delay .zb-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zb-lead__delay .zb-pill span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 6px 10px; text-align: center; font-size: .84rem; line-height: 1.25; }
[data-show-place] + .zb-label, [data-show-place] + [data-show-place] + .zb-label { margin-top: 18px; }
.zb-leadrow__before { color: #8a2549; }
/* Choix du pays dans le champ ville (accueil, formulaire sticky, demande) : sur mobile, cible plus grande et liste en panneau du bas */
@media (max-width: 640px) {
    .zb-cc--compact .zb-cc__btn { position: relative; gap: 6px; padding: 6px 10px; font-size: .78rem; }
    .zb-cc--compact .zb-cc__btn .fi { width: 20px; line-height: 15px; }
    .zb-cc__btn::after { content: ''; position: absolute; inset: -10px -8px; } /* zone tactile elargie */
    .zb-cc__panel, .zb-cc--compact .zb-cc__panel, .zb-sticky .zb-cc__panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; z-index: 200; box-shadow: 0 -18px 40px -12px rgba(44, 33, 45, .35); }
    .zb-cc__panel button { padding: 13px 12px; font-size: 1rem; }
    .zb-cc__panel button .fi { width: 24px; line-height: 18px; }
}
/* Mobile : liste des coiffures en plein ecran au-dessus de l'en-tete (champ de recherche visible) ; choix du lieu dans la largeur du formulaire */
@media (max-width: 759px) {
    body.zb-sheet-open .zb-header { z-index: 0; }
    .zb-pick:not(.zb-pick--inline) .zb-pick__panel { top: max(8vh, 12px); z-index: 300; }
    .zb-opt-pick__panel { left: 0; right: 0; width: auto; max-width: none; }
    .zb-opt-pick__panel .zb-tiles { width: 100%; }
}
/* Tuiles avec icone (type de cheveux...) : texte centre, meme hauteur meme quand un libelle tient sur deux lignes */
.zb-pills--icons .zb-pill { display: flex; }
.zb-pills--icons .zb-pill span { width: 100%; height: 100%; justify-content: center; text-align: center; line-height: 1.2; box-sizing: border-box; }
/* Suggestions d'adresses */
.zb-addr { position: relative; display: block; }
.zb-addr__list { position: absolute; z-index: 120; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(44, 33, 45, .35); max-height: 280px; overflow: auto; }
.zb-addr__list li { padding: 10px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500; cursor: pointer; }
.zb-addr__list li:hover, .zb-addr__list li.is-active { background: var(--cream); }
/* Profil : famille de coiffures cochable en tete, ses styles en retrait dessous */
.zb-skillfam { margin: 16px 0 6px; }
.zb-skillfam > .zb-pill--fam { display: inline-flex; margin-bottom: 8px; }
.zb-skillfam__kids { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.zb-verify__diploma { align-self: end; margin-bottom: 10px; }
/* Espace coiffeuse : « Enregistrer » toujours visible en bas de l'ecran, au-dessus de la barre d'onglets mobile */
.zb-app__main .zb-form__bar { z-index: 40; padding: 12px 0; background: linear-gradient(rgba(255, 252, 251, 0), var(--paper) 35%); }
@media (max-width: 1019px) { .zb-app--pro .zb-form__bar { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1019px) { .zb-app--pro .zb-form__bar { padding-right: 72px; } } /* place pour la bulle d assistance */
.zb-admin__ro { margin: 6px 0 0; } .zb-admin__ro small { display: block; color: var(--ink-2); font-size: .78rem; }
/* Tableau de bord coiffeuse : bloc profil (completude, estimation de contacts, verification) */
.zb-dashprofile__grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .zb-dashprofile__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.zb-dashprofile__est { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #f2ecf3; color: var(--plum-deep); }
.zb-dashprofile__est p { display: grid; gap: 4px; margin: 0; }
.zb-dashprofile__est span { color: #b0345a; font-weight: 700; font-size: .9rem; }
.zb-dashprofile__est small { color: var(--ink-2); font-size: .8rem; }
.zb-dashprofile__verify { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--plum); }
.zb-dashprofile__verify p { display: flex; gap: 10px; margin: 0; flex: 1 1 260px; }
.zb-dashprofile__verify span { display: grid; gap: 2px; }
.zb-dashprofile__verify small { color: var(--ink-2); font-size: .82rem; }
.zb-dashprofile .zb-verify__ok, .zb-dashprofile .zb-verify__wait { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.zb-skiphint { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-2); }
/* Barres de defilement des listes et panneaux (pays, coiffures, chat...) : fines, discretes, aux couleurs du site */
body * { scrollbar-width: thin; scrollbar-color: rgba(74, 57, 72, .28) transparent; }
body *::-webkit-scrollbar { width: 8px; height: 8px; }
body *::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
body *::-webkit-scrollbar-thumb { background: rgba(74, 57, 72, .28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
body *::-webkit-scrollbar-thumb:hover { background-color: rgba(74, 57, 72, .45); }
/* Chargement de la page suivante d'une liste */
.zb-paged__loader { display: flex; justify-content: center; gap: 6px; margin: 18px 0; }
.zb-paged__loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); animation: zb-typing 1.2s infinite ease-in-out; }
.zb-paged__loader i:nth-child(2) { animation-delay: .15s; } .zb-paged__loader i:nth-child(3) { animation-delay: .3s; }
.zb-qs__places { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .zb-qs__places small { color: var(--ink-2); font-weight: 500; }
.zb-hsearch--below { margin: 12px 0 14px; max-width: 520px; width: 100%; } .zb-hsearch--below input { width: 100%; }
.zb-lead__age { display: block; margin: 12px 0 4px; font-size: .9rem; font-weight: 700; }
.zb-lead__age small { font-weight: 400; color: var(--ink-2); }
.zb-lead__agefield { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 500; }
.zb-lead__agefield .zb-input { width: 90px; }
.zb-book__chat { margin-top: 14px; }
/* Espace client : menu, prochain rendez-vous, demandes avec leur avancement */
.zb-acc__head { margin-bottom: 14px; }
.zb-acc__head .zb-title { margin-bottom: 4px; }
.zb-acc__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.zb-acc__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.zb-acc__nav a[aria-current] { background: var(--plum-deep); color: #fff; box-shadow: none; }
.zb-acc__nav a:hover { box-shadow: inset 0 0 0 1px var(--plum); }
.zb-acc__nav .zb-acc__logout { margin-left: auto; color: var(--ink-2); background: none; box-shadow: none; }
@media (max-width: 640px) { .zb-acc__nav { display: grid; grid-template-columns: 1fr 1fr; } .zb-acc__nav a { justify-content: center; } .zb-acc__nav .zb-acc__logout { margin: 0; } }
.zb-acc__next { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; background: #f2ecf3; box-shadow: none; }
.zb-acc__date { flex: 0 0 58px; display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; background: var(--plum-deep); color: #fff; font-size: .72rem; text-transform: uppercase; }
.zb-acc__date b { font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.zb-acc__nextmain { flex: 1; display: grid; gap: 2px; }
.zb-acc__nextmain small { color: #b0345a; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.zb-acc__nextmain span { color: var(--ink-2); font-size: .86rem; }
.zb-accrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.zb-box__head + .zb-accrow { border-top: 0; }
.zb-accrow__main { display: grid; gap: 3px; min-width: 0; }
.zb-accrow__main > span:not(.zb-accrow__steps) { color: var(--ink-2); font-size: .86rem; }
.zb-accrow__steps { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: .78rem; color: var(--ink-2); }
.zb-accrow__steps span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--line); vertical-align: 1px; }
.zb-accrow__steps .is-done { color: var(--ink); }
.zb-accrow__steps .is-done::before { background: #2f7a4f; }
.zb-accrow__side { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; text-align: right; }
.zb-accrow__unread { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--plum-deep); }
.zb-accrow__go { color: var(--ink-2); }
.zb-accrow:hover strong { color: var(--plum); }
.zb-acc__pro { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .zb-acc__pro span { flex: 1; display: grid; gap: 2px; } .zb-acc__pro small { color: var(--ink-2); } .zb-acc__pro .zb-ic:first-child { color: #b0345a; }
.zb-accrow__go { transform: rotate(-90deg); }
@media (max-width: 640px) {
    .zb-acc__nav a { padding: 9px 10px; font-size: .84rem; white-space: nowrap; }
    /* En-tete mobile : pastille non lus posee sur l'icone du compte */
    .zb-header__login { position: relative; }
    .zb-header__login .zb-header__unread { position: absolute; top: -3px; right: -4px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: .62rem; }
}
@media (max-width: 640px) {
    .zb-acc__nav { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
    .zb-acc__nav::-webkit-scrollbar { display: none; }
    .zb-acc__nav a { flex: 0 0 auto; }
    .zb-acc__nav .zb-acc__logout { margin-left: 0; }
}
/* Espace coiffeuse : liste de ce qui manque avant la validation du profil */
.zb-review__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
/* Rond a gauche, texte et lien « Completer » alignes sur la meme colonne (le lien passe sous le texte quand la ligne est longue) */
.zb-review__list li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 14px 12px 42px; border-radius: 12px; background: var(--paper); }
.zb-review__list li span::before { content: ''; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.zb-review__list li > span { flex: 1 1 14em; }
.zb-review__list li > a, .zb-review__list li > form { flex: 0 0 auto; }
.zb-review__list li .zb-link { text-align: left; overflow-wrap: anywhere; }
.zb-review__list li.is-done span::before { background: #2f7a4f; box-shadow: none; }
.zb-review__list li.is-done span { color: var(--ink-2); }
.zb-review__list form { margin: 0; }
.zb-modhd__dup { margin: 6px 0; padding: 6px 10px; font-size: .82rem; }
/* Espace client : parrainage */
.zb-referral__link { display: flex; gap: 8px; margin: 12px 0; }
.zb-referral__link .zb-input { flex: 1; min-width: 0; font-size: .85rem; }
.zb-referral__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.zb-referral__list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: .9rem; }
.zb-referral__list small { color: var(--ink-2); }
.zb-referral__list b { color: #2f7a4f; }
.zb-listing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.zb-listing p { display: flex; gap: 10px; margin: 0; flex: 1 1 280px; }
.zb-listing span { display: grid; gap: 2px; }
.zb-listing small { color: var(--ink-2); font-size: .84rem; }
.zb-listing form { margin: 0; }
/* Espace coiffeuse : lien vers le tableau de bord sur la photo / le nom */
.zb-app__me { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.zb-app__me > span { display: grid; min-width: 0; }
/* Espace coiffeuse : avis */
.zb-myreviews { display: grid; gap: 12px; }
.zb-box.zb-myreview { margin: 0; padding: 18px 20px; }
.zb-myreview__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.zb-myreview__who { flex: 1; display: grid; line-height: 1.3; }
.zb-myreview__who time { color: var(--ink-2); font-size: .8rem; }
.zb-myreview__text { margin: 0; line-height: 1.55; }
.zb-myreview__reply { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--cream); font-size: .9rem; }
.zb-myreview__form { margin-top: 12px; }
.zb-myreview__form summary { display: inline-block; cursor: pointer; color: #b0345a; font-weight: 700; font-size: .88rem; list-style: none; }
.zb-myreview__form summary::-webkit-details-marker { display: none; }
.zb-myreview__form[open] summary { margin-bottom: 10px; }
/* Realisations : type de publication avec le gain en credits ; sur mobile, icone au-dessus du libelle */
.zb-workform .zb-segment span { flex-wrap: wrap; text-align: center; line-height: 1.2; }
.zb-workform .zb-segment span b { font-weight: 700; }
.zb-workform .zb-segment span small { flex-basis: 100%; font-size: .72rem; font-weight: 600; color: #2f7a4f; }
@media (max-width: 640px) {
    .zb-workform .zb-segment span { flex-direction: column; gap: 3px; padding: 9px 4px; font-size: .78rem; }
    .zb-workform .zb-segment span small { font-size: .66rem; }
}
[data-planning].is-saving { opacity: .6; pointer-events: none; transition: opacity .15s; }
.zb-flash--toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 400; width: min(520px, calc(100% - 32px)); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(44, 33, 45, .4); }
/* Espace coiffeuse mobile : hamburger en haut a gauche (menu complet), 6 onglets en bas dont Credits et Cagnotte */
.zb-appmenu { display: none; }
@media (max-width: 1019px) {
    .zb-app__home { display: none; }
    .zb-appmenu { display: block; flex-shrink: 0; }
    .zb-appmenu summary { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; list-style: none; }
    .zb-appmenu summary::-webkit-details-marker { display: none; }
    .zb-appmenu[open] summary { background: #fff; color: var(--plum-deep); }
    .zb-appmenu .zb-appmenu__sheet { position: fixed; top: 70px; bottom: auto; left: 10px; right: 10px; z-index: 120; max-height: calc(100vh - 160px); overflow-y: auto; color: var(--ink); }
    .zb-protabs { grid-template-columns: repeat(6, 1fr); padding-left: 2px; padding-right: 2px; }
    .zb-protabs > a { font-size: .62rem; padding: 6px 0; }
    .zb-protabs__n--val { left: 50%; transform: translateX(-2px); min-width: 0; padding: 0 5px; background: var(--plum-deep); font-size: .6rem; white-space: nowrap; }
}
@media (max-width: 1019px) {
    .zb-appmenu__backdrop { position: fixed; inset: 0; z-index: 115; background: rgba(30, 20, 30, .45); }
    .zb-appmenu .zb-appmenu__sheet { top: 10px; max-height: calc(100vh - 100px); }
    .zb-appmenu__head { position: sticky; top: -8px; display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 4px; padding: 12px 10px 10px 16px; background: #fff; border-bottom: 1px solid var(--line); z-index: 1; }
    .zb-appmenu__head strong { font-size: 1rem; }
}
/* Menu hamburger au-dessus du bandeau « Connecte en tant que » (impersonate) */
@media (max-width: 1019px) {
    .zb-appmenu__backdrop { z-index: 250; }
    .zb-appmenu .zb-appmenu__sheet { z-index: 260; }
}
/* Accueil coiffeuse : bloc Realisations sur toute la largeur */
.zb-dashworks { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; background: linear-gradient(120deg, #fff 0%, #fbeef2 100%); }
.zb-dashworks > .zb-ic { flex-shrink: 0; color: #b0345a; }
.zb-dashworks__main { flex: 1; display: grid; gap: 4px; }
.zb-dashworks__main small { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.zb-dashworks__n { display: grid; justify-items: center; text-align: center; font-size: .78rem; color: var(--ink-2); flex-shrink: 0; }
.zb-dashworks__n b { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--plum-deep); }
.zb-dashworks__n small { font-size: .72rem; color: #b0345a; }
.zb-kpis + .zb-zen__next { margin-top: 0; } @media (max-width: 640px) { .zb-kpis:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } }
.zb-dashprofile__cta { justify-self: start; margin-top: 6px; }
.zb-dashreview { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.zb-box__head + .zb-dashreview { border-top: 0; padding-top: 4px; }
.zb-dashreview__main { flex: 1; display: grid; gap: 4px; min-width: 0; }
.zb-dashreview__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.zb-dashreview__text { color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.zb-dashreview__reply { justify-self: start; font-size: .84rem; font-weight: 700; }
.zb-zen__chip--todo { background: #fbeef2; color: #8a2549; }
.zb-dashprofile__pause { margin: 14px 0 0; }
/* Accueil coiffeuse : demandes par jour (barres) et parcours 30 jours */
.zb-bars { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; align-items: end; height: 140px; padding-top: 18px; }
.zb-bars__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; outline: none; }
.zb-bars__bar { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--plum); opacity: .75; transition: opacity .15s; }
.zb-bars__col.is-today .zb-bars__bar { background: #b0345a; opacity: 1; }
.zb-bars__col small { height: 16px; margin-top: 4px; font-size: .64rem; color: var(--ink-2); }
.zb-bars__val { position: absolute; top: -16px; font-size: .72rem; color: var(--ink); }
.zb-bars__col:hover .zb-bars__bar, .zb-bars__col:focus .zb-bars__bar { opacity: 1; }
.zb-bars__col:hover::after, .zb-bars__col:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 8px; border-radius: 6px; background: var(--plum-deep); color: #fff; font-size: .72rem; white-space: nowrap; pointer-events: none; }
.zb-bars__col:first-child:hover::after, .zb-bars__col:first-child:focus::after { left: 0; transform: none; }
.zb-bars__col:last-child:hover::after, .zb-bars__col:last-child:focus::after { left: auto; right: 0; transform: none; }
.zb-funnel { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.zb-funnel a { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.zb-funnel__label { font-size: .84rem; font-weight: 600; }
.zb-funnel__track { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.zb-funnel__bar { display: block; height: 100%; border-radius: 999px; background: var(--plum); }
.zb-funnel__n { display: flex; align-items: baseline; gap: 6px; min-width: 64px; justify-content: flex-end; }
.zb-funnel__n small { color: var(--ink-2); font-size: .72rem; }
.zb-funnel__ca a { grid-template-columns: 1fr auto; padding-top: 8px; border-top: 1px solid var(--line); }
.zb-funnel__ca b { color: #2f7a4f; font-size: 1.05rem; }
.zb-bk__search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 480px; margin: 0 0 12px; }
.zb-bk__search .zb-ic { position: absolute; left: 12px; color: var(--ink-2); }
.zb-bk__search .zb-input { padding-left: 36px; height: 42px; }
.zb-workadd > summary { display: inline-flex; list-style: none; cursor: pointer; }
.zb-workadd > summary::-webkit-details-marker { display: none; }
.zb-workadd[open] > summary { margin-bottom: 16px; }
.zb-box.zb-workadd:not([open]) { padding: 0; background: none; box-shadow: none; }
/* Admin : avatars ronds de taille fixe dans les tableaux (pas ecrases par une colonne etroite) */
.zb-admintable td > a > img, .zb-admintable td > img { width: 40px; height: 40px; min-width: 40px; max-width: none; border-radius: 50%; object-fit: cover; }
.zb-shot__views { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(30, 20, 30, .65); color: #fff; font-size: .72rem; font-weight: 700; } a.zb-shot--status { color: inherit; text-decoration: none; }
.zb-referral__total { color: #2f7a4f; }
/* Planning : navigation de semaine sur une ligne (<- semaine du ... ->), « Aujourd'hui » dessous */
.zb-plan__nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.zb-plan__nav > .zb-btn { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
.zb-plan__nav strong { text-align: center; font-size: 1rem; line-height: 1.25; }
.zb-plan__nav > .zb-link { grid-column: 1 / -1; justify-self: center; font-size: .84rem; }
/* Graphique des demandes : 30 jours sur ordinateur, 15 sur mobile */
.zb-bars { grid-template-columns: repeat(30, 1fr); gap: 3px; }
.zb-bars__bar { height: var(--h30); }
.zb-only-mob { display: none; }
@media (max-width: 760px) {
    .zb-bars { grid-template-columns: repeat(15, 1fr); gap: 4px; }
    .zb-bars__col.is-old { display: none; }
    .zb-bars__bar { height: var(--h15); }
    .zb-only-desk { display: none; }
    .zb-only-mob { display: inline; }
}
/* Accueil coiffeuse, bloc profil : barre de completude, 4 chiffres cote a cote, estimation en dessous (plus de colonne vide) */
.zb-dashprofile__grid { grid-template-columns: 1fr !important; gap: 14px; }
.zb-dashprofile .zb-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.zb-dashprofile .zb-facts > div { padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.zb-dashprofile .zb-facts dd { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 760px) { .zb-dashprofile .zb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zb-dashprofile .zb-verify__ok, .zb-dashprofile .zb-verify__wait, .zb-dashprofile__pause { display: inline-flex; margin-right: 18px; }
/* Accueil coiffeuse : etat de l'annonce tout en haut */
.zb-zen__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 600; }
.zb-zen__status .zb-link { font-size: .82rem; }
.zb-dot--on, .zb-dot--off { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.zb-dot--on { background: #2f7a4f; box-shadow: 0 0 0 3px rgba(47, 122, 79, .18); }
.zb-dot--off { background: #c98a2e; box-shadow: 0 0 0 3px rgba(201, 138, 46, .2); }
.zb-pausebox { display: block; border-radius: 16px; }
.zb-pausebox > summary { display: inline-flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.zb-pausebox > summary::-webkit-details-marker { display: none; }
.zb-pausebox[open] { padding: 12px 14px; background: #fff; }
.zb-pausebox[open] > summary .zb-link { display: none; }
.zb-pausebox__confirm p { margin: 10px 0; font-weight: 400; line-height: 1.45; }
.zb-pausebox__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-activity__mode { width: auto; height: 34px; padding: 4px 30px 4px 10px; margin-left: auto; font-size: .82rem; }
.zb-activity .zb-box__head { gap: 10px; flex-wrap: wrap; }
.zb-bars--month { grid-template-columns: repeat(12, 1fr) !important; gap: 6px; }
.zb-bars--month .zb-bars__col { display: flex !important; }
form.zb-zen__status { display: flex; justify-content: space-between; width: 100%; max-width: 360px; box-sizing: border-box; padding: 6px 6px 6px 12px; }
/* Menu coiffeuse : « Retour sur Zenaba » en tete, mis a part */
.zb-appmenu__sheet .zb-appmenu__site { margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--plum-deep); color: #fff; font-weight: 700; }
.zb-appmenu__site img { width: 28px; height: auto; padding: 4px 3px; border-radius: 50%; background: #fff; }
.zb-appmenu__site .zb-ic { margin-left: auto; }
.zb-pausebox--profile > summary { display: inline-flex; } .zb-pausebox--profile[open] { flex-basis: 100%; padding: 12px; border-radius: 12px; background: var(--paper); } .zb-pausebox--profile[open] > summary { display: none; }
/* Nombre de vues, discret */
.zb-views { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: .82rem; font-weight: 500; }
.zb-views .zb-ic { opacity: .7; }
.zb-viewsline { margin: 4px 0 10px; }
/* Menu dans la barre du bas (1er onglet) */
@media (max-width: 1019px) {
    .zb-appmenu--tab { display: block; }
    .zb-appmenu--tab > summary { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: auto; height: auto; padding: 6px 0; border-radius: 12px; background: none; color: var(--ink-2); font-size: .62rem; font-weight: 700; }
    .zb-appmenu--tab[open] > summary { background: var(--cream); color: var(--plum-deep); }
    .zb-appmenu--tab .zb-appmenu__sheet { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 110px); }
}
.zb-zen__chip b.zb-zen__n--grey { background: #e7e2e6; color: var(--ink-2); }
/* Raccourci admin vers l'edition, sur les fiches publiques */
.zb-adminedit { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 150; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #c98a2e; color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
@media (max-width: 760px) { .zb-adminedit { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.zb-h1__n { font-family: inherit; font-size: .55em; color: var(--ink-2); font-weight: 500; }
/* Grands titres (H1) au violet du logo ; sous-titres et texte restent en noir chaud. Les H1 sur fond sombre gardent leur couleur (regles plus precises) */
h1 { color: var(--plum); }
.zb-hero h1, .zb-hero__pro h1 { color: inherit; }
.zb-section--plum h1 { color: inherit; }
#validation { scroll-margin-top: 90px; }
/* Choix du profil (types de cheveux, profils) : colonnes de meme largeur plutot qu'un flot de pastilles inegales */
.zb-pills--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zb-pills--grid .zb-pill, .zb-pills--grid .zb-pill span { display: flex; width: 100%; height: 100%; box-sizing: border-box; }
.zb-pills--grid .zb-pill span { justify-content: center; align-items: center; text-align: center; }
@media (min-width: 720px) { .zb-pills--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zb-pills--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Bureau : la bulle « Une question ? » est plus large, le bouton Enregistrer se place a sa gauche */
@media (min-width: 1020px) { .zb-app--pro .zb-form__bar { padding-right: 210px; } }
/* Photo de profil : photo actuelle et bouton pour la changer */
.zb-avatarpick { display: grid; gap: 6px; }
.zb-avatarpick__h { font-weight: 600; font-size: .88rem; }
.zb-avatarpick__box { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.zb-avatarpick__img { display: inline-flex; width: 72px; height: 72px; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.zb-avatarpick__img img { width: 100%; height: 100%; object-fit: cover; }
.zb-avatarpick__box:focus-within .zb-btn { outline: 2px solid var(--rose); outline-offset: 2px; }
/* Photos de la fiche : bouton d'ajout et apercu des photos choisies */
.zb-photoadd { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--plum-deep); font-weight: 600; cursor: pointer; }
.zb-photoadd:hover, .zb-photoadd:focus-within { border-color: var(--rose); color: var(--rose); }
.zb-photos--new img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
/* Estimation des demandes : bloc compact, detail du calcul replie */
.zb-estimate { padding: 12px 16px; gap: 10px; }
.zb-estimate strong { font-size: .95rem; line-height: 1.35; }
.zb-estimate p { gap: 2px; }
.zb-estimate__more summary { cursor: pointer; font-size: .8rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.zb-estimate__more summary::-webkit-details-marker { display: none; }
.zb-estimate__more[open] { display: flex; flex-direction: column; gap: 4px; }
.zb-estimate__more small { font-size: .8rem; }
.zb-charcount { margin: -4px 0 8px; font-size: .82rem; color: var(--rose); }
.zb-charcount.is-ok { color: #2f7a4f; }
.zb-review__n { display: block; font-size: .8rem; color: var(--rose); }
.zb-photoadd { width: fit-content; margin-bottom: 8px; font-size: .92rem; }
.zb-photoadd .zb-ic { flex-shrink: 0; }
.zb-ac__list li strong { display: block; font-weight: 600; }
[data-siret-list] li small { display: block; margin: 2px 0 0; }
.zb-verify__doc { display: grid; gap: 8px; }
.zb-verify__doc .zb-verify__wait strong { display: block; }
.zb-verify__replace summary { list-style: none; cursor: pointer; width: fit-content; }
.zb-verify__replace summary::-webkit-details-marker { display: none; }
.zb-verify__replace[open] summary { margin-bottom: 10px; }
.zb-verify__doc .zb-verify__wait { font-size: .9rem; }
/* Espace coiffeuse pas encore validee : page d'attente a la place des demandes, du chat, des rendez-vous et des avis */
.zb-locked { max-width: 560px; display: grid; gap: 14px; justify-items: start; }
.zb-locked h1 { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; }
.zb-locked p { margin: 0; color: var(--ink-2); line-height: 1.55; }
button.zb-photo__rm { width: fit-content; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.zb-photo__rm:hover { color: var(--rose); }
/* Categorie d'une photo : suggestions sous le champ */
.zb-photo { position: relative; }
.zb-photo__ac { min-width: 220px; max-height: 260px; overflow-y: auto; right: auto; margin: 0; position: absolute; }
.zb-photo__ac li { font-size: .86rem; padding: 8px 10px; }
.zb-photo__ac li.is-active, .zb-photo__ac li[data-n]:hover { background: var(--paper); }
.zb-photo__ac li.is-empty { color: var(--ink-2); cursor: default; }
/* Profil coiffeuse : barre de raccourcis par partie, collante, defilable sur mobile */
.zb-secnav { position: sticky; top: 68px; z-index: 30; display: flex; gap: 6px; margin: 0 0 16px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; background: var(--paper); }
.zb-secnav::-webkit-scrollbar { display: none; }
.zb-secnav a { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.zb-secnav a:hover { color: var(--plum-deep); }
.zb-secnav a.is-on { background: var(--plum-deep); color: #fff; box-shadow: none; }
@media (min-width: 1020px) { .zb-secnav { top: 96px; } }
.zb-app--pro section[id] { scroll-margin-top: 130px; }
@media (min-width: 1020px) { .zb-app--pro section[id] { scroll-margin-top: 160px; } }
.zb-tagpick { position: relative; }
.zb-tagpick .zb-photo__ac { left: 0 !important; right: 0; }
/* Admin coiffeuse : SIRET compare a l'annuaire des entreprises */
.zb-siret { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); }
.zb-siret__facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; }
.zb-siret__facts span { display: inline-block; min-width: 110px; color: var(--ink-2); }
.zb-ok { color: #2f7a4f; }
/* En-tete espace coiffeuse : profil public a cote de la deconnexion */
.zb-app__public { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.zb-app__public:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.zb-app__public + .zb-app__logout { margin-left: 8px; }
/* Titre de la page Coiffures : place pour les jambages de l'italique (« q ») avant les profils */
.zb-hshead h1 { line-height: 1.12; padding-bottom: .06em; }
.zb-hshead + .zb-profiles--facets, .zb-hshead ~ .zb-profiles--facets { margin-top: 12px; }
/* Routine : vignette et pages du guide d'application */
.zb-routine__gift img { width: 100%; height: 100%; object-fit: cover; }
.zb-guidepages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.zb-guidepages img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(44, 33, 45, .35); }
/* Note des produits (routine, fiche) et avis des clientes */
.zb-prate { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--ink); white-space: nowrap; }
.zb-prate .zb-ic { color: #e0a43a; }
.zb-prate small { color: var(--ink-2); }
.zb-routine__body .zb-prate { display: flex; margin-top: 2px; }
.zb-prod__rate { align-self: flex-start; margin-top: 2px; }
.zb-prod__rate .zb-prate { font-size: .78rem; }
.zb-detail__rate { display: inline-flex; margin: 2px 0 6px; text-decoration: none; }
.zb-detail__rate:hover small { text-decoration: underline; }
.zb-previews { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.zb-previews li { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-previews p { margin: 6px 0; }
.zb-previews small { color: var(--ink-2); }
.zb-previews__stars .zb-ic--fill { color: #e0a43a; }
.zb-previews__stars .zb-ic--off { color: var(--line); }
/* Integrations reprises de l'ancien site (YouTube, GIPHY) dans les articles */
.zb-prose .zb-embed { display: block; margin: 18px 0; }
.zb-embed--gif { position: relative; max-width: 480px; aspect-ratio: 4 / 3; }
.zb-embed--gif iframe, .zb-prose .zb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.zb-hd--abroad { cursor: default; }
.zb-routine__klarna { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-2); }
/* Liste des coiffeuses : recherche sous le titre sur ordinateur ; sur mobile, icone a droite du titre (ouverte au toucher) */
.zb-pagehead__top > .zb-hsearch--below { order: 3; flex: 0 0 100%; margin: 0; }
@media (max-width: 759px) {
    .zb-pagehead__top { flex-wrap: wrap; align-items: center; }
    .zb-pagehead__top > h1 { order: 0; flex: 1 1 0; min-width: 0; }
    .zb-pagehead__top > .zb-hsearch--below { order: 1; flex: 0 0 42px; width: 42px; max-width: none; }
    .zb-pagehead__top > .zb-hsearch--below.is-open { order: 2; flex: 0 0 100%; width: 100%; }
    .zb-pagehead__top > .zb-proband { order: 3; flex: 0 0 100%; }
}
/* Fil d'Ariane sur mobile : une seule ligne, sans « Accueil » (le logo y mene deja) */
@media (max-width: 759px) {
    .zb-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .zb-crumbs::-webkit-scrollbar { display: none; }
    .zb-crumbs > a:first-child { display: none; }
    .zb-crumbs:has(> a:nth-child(2):last-child) { display: none; }
}
/* Listes de coiffeuses : argument prix a cote du nombre de resultats */
.zb-hdsave { margin: 0; padding: 6px 12px; border-radius: 999px; background: #eaf4ee; color: #2f7a4f; font-size: .84rem; font-weight: 600; }
.zb-hdsave strong { font-weight: 800; }
/* Aucune coiffeuse : demande quand meme + invitation des coiffeuses */
.zb-hdempty { grid-column: 1 / -1; display: grid; gap: 14px; }
@media (min-width: 760px) { .zb-hdempty { grid-template-columns: 1.3fr 1fr; } }
.zb-hdempty .zb-box { display: grid; gap: 10px; justify-items: start; }
.zb-hdempty h2 { font-size: 1.15rem; }
.zb-hdempty p { margin: 0; color: var(--ink-2); }
/* Routine avant le diagnostic : formulaire et exemple de routine cote a cote sur ordinateur */
.zb-routine-example .zb-city__h { margin-top: 0; }
@media (max-width: 1019px) { .zb-routine-example { margin-top: 28px; } }
@media (min-width: 1020px) {
    .zb-routine-layout.has-example { max-width: none; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
    .zb-routine-layout.has-example .zb-routine-form { position: sticky; top: 110px; margin: 0; }
}
@media (min-width: 1020px) { .zb-routine-example > p:last-child { display: none; } } /* le formulaire est juste a cote : pas de bouton « Faire mon diagnostic » */
/* Mon compte, demande : carte d'une proposition de rendez-vous */
.zb-leadprop { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -18px rgba(44, 33, 45, .45); }
.zb-leadprop__main { display: grid; gap: 2px; }
.zb-leadprop__main small { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rose); }
.zb-leadprop__main strong { font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; color: var(--ink); }
.zb-leadprop__main span { color: var(--ink-2); font-size: .9rem; }
.zb-leadprop__dates { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-leadprop__dates .zb-chip { font-size: .82rem; }
.zb-leadprop .zb-btn { justify-self: start; }
@media (min-width: 760px) { .zb-leadprop { grid-template-columns: 1fr auto; align-items: center; } .zb-leadprop__dates { grid-column: 1 / -1; grid-row: 2; } .zb-leadprop .zb-btn { grid-column: 2; grid-row: 1; } }
.zb-renew { display: grid; gap: 10px; justify-items: start; margin-top: 16px; }
.zb-renew p { margin: 0; color: var(--ink-2); }
.zb-renew strong { color: var(--ink); }
/* Dictee vocale dans un champ de texte */
.zb-dictatebox { position: relative; display: block; }
.zb-dictatebox textarea { padding-right: 48px; }
.zb-dictate { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--plum-deep); cursor: pointer; }
.zb-dictate:hover { background: var(--line); }
.zb-dictate.is-on { background: var(--rose); color: #fff; animation: zb-pulse 1.2s ease-in-out infinite; }
@keyframes zb-pulse { 50% { box-shadow: 0 0 0 6px rgba(216, 111, 147, .25); } }
@media (prefers-reduced-motion: reduce) { .zb-dictate.is-on { animation: none; } }
/* Boite a idees de l'espace coiffeuse */
.zb-ideas { display: grid; gap: 12px; justify-items: start; }
.zb-ideas .zb-dictatebox { width: 100%; }
.zb-ideas__list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.zb-ideas__list li { padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.zb-ideas__list p { margin: 0 0 4px; }
.zb-ideas__list small { color: var(--ink-2); }
/* Admin : suggestions des coiffeuses */
.zb-suggestions { display: grid; gap: 12px; }
.zb-suggestion.is-new { box-shadow: inset 4px 0 0 var(--rose), inset 0 0 0 1px var(--line); }
.zb-suggestion__who { display: flex; gap: 12px; align-items: center; }
.zb-suggestion__who img, .zb-suggestion__who .zb-author__ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.zb-suggestion__who > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.zb-suggestion__who small { color: var(--ink-2); }
.zb-suggestion__who time { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.zb-suggestion__body { margin: 12px 0; white-space: normal; }
.zb-suggestion__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-suggestion__contact { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0; }
.zb-suggestion__contact a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--plum-deep); }
.zb-suggestion__contact a:hover { color: var(--rose); }
/* Liste de villes : la ville courante (sans lien) alignee comme les autres, et un espace avant le titre suivant */
.zb-citylist > li > strong { display: block; padding: 7px 0; font-weight: 700; color: var(--rose); border-bottom: 1px solid var(--line); }
.zb-citylist + .zb-city__h { margin-top: 40px; }
/* Fiche coiffeuse : ses photos en tete des realisations, sur une rangee qui defile */
.zb-shots--profile { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 22%); grid-template-columns: none; overflow-x: auto; scrollbar-width: thin; margin-bottom: 14px; }
@media (max-width: 759px) { .zb-shots--profile { grid-auto-columns: 42%; } }
/* Fiche coiffeuse sur mobile : photo a cote du nom en haut, ville, avis et etiquettes sur toute la largeur dessous */
@media (max-width: 759px) {
    .zb-profile__id { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
    .zb-profile__id > div { display: contents; }
    .zb-profile__avatar { width: 72px; height: 72px; grid-row: 1; }
    .zb-profile__id h1 { grid-column: 2; grid-row: 1; margin: 0; }
    .zb-profile__id .zb-profile__meta, .zb-profile__id .zb-taglist { grid-column: 1 / -1; margin: 0; }
    .zb-profile__id .zb-taglist { display: flex; flex-wrap: wrap; gap: 6px; }
}
.zb-prose--narrow + .zb-hdskills { margin-top: 18px; }
/* Fiche coiffeuse : ville sous le nom, puis avis · realisations · vues (chaque element d'un bloc, separateurs en CSS) */
.zb-profile__place { margin: 2px 0 6px; color: var(--ink-2); }
.zb-profile__place a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.zb-profile__place .zb-profile__near { margin-left: 4px; }
.zb-profile__meta { gap: 4px 10px; }
.zb-profile__stat { white-space: nowrap; }
.zb-profile__stat + .zb-profile__stat::before { content: '·'; margin-right: 10px; color: var(--ink-2); }
@media (max-width: 759px) {
    .zb-profile__id { grid-template-rows: auto auto; }
    .zb-profile__avatar { grid-row: 1 / span 2; align-self: center; }
    .zb-profile__id h1 { grid-row: 1; align-self: end; }
    .zb-profile__id .zb-profile__place { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: .92rem; }
    .zb-profile__id .zb-profile__meta { grid-row: 3; }
    .zb-profile__id .zb-taglist { grid-row: 4; }
}
/* Fiche coiffeuse sur ordinateur : presentation et prestations alignees sous le nom (colonne de texte),
   prestations en bas de la section, juste avant les realisations */
@media (min-width: 760px) {
    .zb-profile ~ .zb-prose--narrow, .zb-profile ~ .zb-hdskills { margin-left: 140px; max-width: 820px; }
    .zb-profile ~ .zb-prose--narrow { margin-top: 24px; }
    .zb-profile ~ .zb-hdskills { margin-top: 28px; margin-bottom: 0; }
}
/* Avis, realisations, vues : chacun avec son icone, meme taille, espaces au lieu de points (pas de point orphelin en debut de ligne) */
.zb-profile__meta { gap: 6px 18px; font-size: .95rem; }
.zb-profile__stat + .zb-profile__stat::before { content: none; }
.zb-profile__stat { display: inline-flex; align-items: center; gap: 5px; }
.zb-profile__meta .zb-views { font-size: inherit; color: var(--ink-2); }
.zb-profile__meta .zb-views .zb-ic, .zb-profile__stat[href="#realisations"] .zb-ic { color: var(--plum); }
@media (min-width: 760px) { .zb-profile ~ .zb-profile__views { margin-left: 140px; } } .zb-profile__views { margin-top: 12px; }
/* Vues dans une ligne de texte (date, lecture d'un article) : meme taille et meme ligne que le texte */
.zb-article__meta .zb-views, .zb-detail__meta .zb-views { font-size: inherit; font-weight: inherit; vertical-align: bottom; }
.zb-article__meta .zb-views .zb-ic { width: 1em; height: 1em; }
/* Mobile : avis, realisations et vues tiennent sur une seule ligne */
@media (max-width: 759px) {
    .zb-profile__id .zb-profile__meta { flex-wrap: nowrap; gap: 12px; font-size: .84rem; white-space: nowrap; }
    .zb-profile__id .zb-profile__meta .zb-ic { width: 13px; height: 13px; }
}
/* Fiche coiffeuse : espace entre le titre Realisations, ses filtres et la grille */
#realisations h2 { margin-bottom: 18px; }
#realisations .zb-works__facets, #realisations [data-photo-filter] { margin-bottom: 20px; }
#avis h2 { margin-bottom: 18px; }
/* J'aime sur les realisations */
.zb-like { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.zb-like:hover { color: var(--rose); }
.zb-like.is-on { color: var(--rose); }
.zb-like.is-on .zb-ic { fill: currentColor; }
.zb-like--card { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px -6px rgba(44, 33, 45, .4); }
.zb-shot { position: relative; }
.zb-viewsline .zb-like { margin-right: 10px; }
/* Coiffures : nombre de resultats et tri */
.zb-hsbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.zb-hsbar .zb-count { margin: 0; }
.zb-sort { display: flex; align-items: center; gap: 6px; }
.zb-sort > span { font-size: .84rem; color: var(--ink-2); margin-right: 4px; }
.zb-sort .zb-chip { font-size: .84rem; padding: 6px 12px; }
.zb-hsseo { max-width: 820px; margin-bottom: 28px; }
.zb-hsseo h2 { margin-bottom: 10px; }
.zb-alltags small { color: var(--ink-2); font-weight: 500; margin-left: 4px; }
/* Photo d origine tres petite (ancien site) : affichee a une taille lisible plutot que minuscule */
.zb-gallery__item.is-main > img { min-width: min(100%, 380px); object-fit: cover; }
/* Realisations : tags multiples */
.zb-multitag { display: grid; gap: 8px; margin-bottom: 14px; }
.zb-multitag__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-multitag__chips:empty { display: none; }
.zb-multitag__chips .zb-chip { gap: 6px; }
.zb-multitag__chips button { border: 0; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }

/* Hub international (zenaba.com) : seulement le logo en haut */
.zb-hubhead { display: flex; justify-content: center; padding: 32px 16px 0; }
.zb-hubhead img { width: min(380px, 86vw); height: auto; }
.zb-hubfoot { margin-top: 0; padding: 48px 16px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--plum); color: rgba(255,255,255,.7); text-align: center; }
.zb-hubfoot p + p { margin-top: 14px; font-size: .85rem; }
.zb-countries__item { display: grid; align-content: start; gap: 6px; }
.zb-countries__cities summary { cursor: pointer; padding: 2px 16px; font-size: .86rem; color: var(--plum); list-style: none; }
.zb-countries__cities summary::-webkit-details-marker { display: none; }
.zb-countries__cities summary::after { content: " +"; }
.zb-countries__cities[open] summary::after { content: " −"; }
.zb-countries__cities ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; padding: 0 4px; list-style: none; }
.zb-countries__cities a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .82rem; }
.zb-countries__cities a:hover { box-shadow: inset 0 0 0 1px var(--plum); }
.zb-hubabout h2 { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--plum); max-width: 22ch; }
.zb-hubabout__lead { margin-top: 14px; max-width: 70ch; font-size: 1.05rem; color: var(--ink-2); }
.zb-hubabout__stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0; padding: 0; list-style: none; }
.zb-hubabout__stats strong { display: block; font-family: var(--serif); font-size: 2rem; color: var(--plum); line-height: 1.1; }
.zb-hubabout__stats span { color: var(--ink-2); font-size: .9rem; }
.zb-hubabout__cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.zb-hubabout__cols h3 { font-size: 1.05rem; margin-bottom: 6px; }
.zb-hubabout__cols p { color: var(--ink-2); }
.zb-pagehead--hub { text-align: center; }
.zb-pagehead--hub .zb-pagehead__lead { margin-inline: auto; }
.zb-hubpick { position: relative; max-width: 460px; margin: 22px auto 0; text-align: left; }
.zb-hubpick > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.zb-hubpick input { width: 100%; height: 54px; padding: 0 18px 0 48px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 20px rgba(74, 57, 72, .08); font: inherit; font-size: 1rem; }
.zb-hubpick input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--plum), 0 6px 20px rgba(74, 57, 72, .1); }
.zb-hubpick ul { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(74, 57, 72, .18); }
.zb-hubpick li a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; }
.zb-hubpick li a:hover, .zb-hubpick li.is-active a { background: var(--cream, #f8f1ee); }
.zb-hubpick .fi { width: 26px; height: 18px; border-radius: 3px; background-size: cover; flex: none; }
.zb-hubpick small { margin-left: auto; color: var(--ink-2); }

/* Carte des coiffeuses (hub, listes) */
.zb-hdmap { height: 200px; margin: 18px 0 4px; border-radius: 18px; overflow: hidden; background: #efe6e2; box-shadow: inset 0 0 0 1px var(--line); z-index: 0; }
.zb-hdmap--hub { height: clamp(280px, 45vw, 420px); margin-top: 26px; }
@media (min-width: 900px) { .zb-hdmap { height: 240px; } .zb-hdmap--hub { height: 420px; } }
.zb-hdmap__pin { border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(74, 57, 72, .35); overflow: hidden; display: grid; place-items: center; }
.zb-hdmap__pin img { width: 100%; height: 100%; object-fit: cover; }
.zb-hdmap__pin b { color: #fff; font-size: .9rem; }
.zb-hdmap__cluster { border-radius: 50%; background: var(--plum); color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 4px rgba(110, 88, 107, .25); font-weight: 600; font-size: .85rem; }
.zb-hdmap .leaflet-popup-content a { color: var(--plum); font-weight: 600; }
.zb-hubworks__h { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--plum); }
.zb-hubworks__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 22%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 14px; }
.zb-hubworks__rail::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .zb-hubworks__rail { grid-auto-columns: 62%; } }
.zb-hubwork { position: relative; scroll-snap-align: start; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #efe6e2; }
.zb-hubwork img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.zb-hubwork:hover img { transform: scale(1.04); }
.zb-hubwork > span { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 34px 12px 12px; background: linear-gradient(transparent, rgba(40, 28, 38, .78)); color: #fff; }
.zb-hubwork small { display: flex; align-items: center; gap: 6px; opacity: .9; }
.zb-hubwork .fi { width: 18px; height: 13px; border-radius: 2px; background-size: cover; }
.zb-arrow--prev svg { transform: rotate(180deg); }
/* leaflet.css est charge apres app.css (display: block sur les icones) : selecteurs plus precis */
.zb-hdmap .zb-hdmap__cluster, .zb-hdmap .zb-hdmap__pin { display: flex; align-items: center; justify-content: center; }
.zb-hdmap .zb-hdmap__pin img { width: 36px; height: 36px; max-width: none; object-fit: cover; }
.zb-hubworks + .zb-hubabout { padding-top: 16px; }
.zb-proband--hub { margin-top: 16px; }
.zb-pagehead__top + .zb-pagehead__lead { margin-top: 14px; }
.zb-hdpop { display: grid; gap: 4px; min-width: 170px; }
.zb-hdpop strong { font-size: .98rem; color: var(--plum-deep); }
.zb-hdpop small { color: var(--ink-2); }
.zb-hdpop__rating b { color: #e0a43a; }
.zb-hdpop__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.zb-hdpop__tags em { font-style: normal; font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: #f6ece9; color: var(--plum-deep); }
.zb-hdpop a { margin-top: 4px; }
/* Barre de la fiche coiffeuse sur mobile : bouton court, le nom de la coiffeuse reste lisible */
.zb-go-short { display: none; }
@media (max-width: 700px) { .zb-sticky--hd .zb-go-long { display: none; } .zb-sticky--hd .zb-go-short { display: inline; } }

/* Routine : pas de debordement sur mobile (colonne de grille sans largeur minimale, pastilles et lignes du pack) */
.zb-routine-layout { grid-template-columns: minmax(0, 1fr); }
.zb-routine-layout > *, .zb-routine-form, .zb-routine, .zb-routine__steps { min-width: 0; max-width: 100%; box-sizing: border-box; }
.zb-routine-form .zb-btn--block { width: 100%; box-sizing: border-box; }
.zb-routine-form .zb-pill span { white-space: normal; }
.zb-routine__head { flex-wrap: wrap; }
.zb-routine__body a strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.zb-routine__price { white-space: nowrap; }
.zb-routine-result.is-loading { opacity: .5; transition: opacity .15s; }
.zb-routine-form.has-js [data-routine-submit] { display: none; }
@media (max-width: 560px) {
    .zb-routine-form, .zb-routine { padding: 16px; }
    .zb-routine__step, .zb-routine__steps--example .zb-routine__step { grid-template-columns: 30px 48px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
    .zb-routine__img img, .zb-routine__gift { width: 48px; height: 48px; }
    .zb-routine__price { font-size: .92rem; }
    .zb-routine__body a strong { -webkit-line-clamp: 2; font-size: .95rem; }
    .zb-routine__total > div, .zb-routine__total .zb-btn { width: 100%; }
    .zb-routine__total .zb-btn { white-space: normal; justify-content: center; box-sizing: border-box; }
}
@media (max-width: 359px) { .zb-pills--hair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Liste des demandes : « Ouvrir le chat (n) » avec les non lus */
.zb-leadrow__chat { gap: 6px; min-height: 32px; padding: 0 12px; font-size: .8rem; white-space: nowrap; }
.zb-pw { position: relative; display: block; }
.zb-pw .zb-input { padding-right: 46px; width: 100%; }
.zb-pw__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.zb-pw__eye:hover, .zb-pw__eye:focus-visible { color: var(--plum, #4a3948); background: rgba(74, 57, 72, .06); }

/* Routine (pack de l'ancien site) : soins non retirables, accessoires retirables (croix), guide offert, prix barres */
.zb-routine__rating--pack { margin: 6px 0 4px; }
.zb-routine__pack { gap: 10px; }
.zb-routine__item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-routine__item.is-accessory { padding-right: 48px; background: var(--cream); }
.zb-routine__item .zb-routine__body > small { color: var(--ink-2); }
.zb-routine__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .84rem; color: var(--ink-2); overflow-wrap: anywhere; }
.zb-routine__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.zb-routine__tags em { font-style: normal; font-size: .78rem; color: var(--ink-2); padding: 2px 0; }
.zb-routine__tags b { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--plum-deep); background: var(--cream); border-radius: 999px; padding: 3px 8px; }
.zb-routine__item.is-accessory .zb-routine__tags b { background: #fff; }
.zb-routine__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.zb-routine__prices s { color: var(--ink-2); font-size: .84rem; }
.zb-routine__prices strong { color: var(--plum-deep); font-size: 1rem; }
.zb-routine__remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.zb-routine__remove:hover, .zb-routine__remove:focus-visible { background: var(--plum-deep); color: #fff; }
.zb-routine__item--gift { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--rose-soft); }
.zb-routine__item--gift .zb-routine__body > small, .zb-routine__item--gift .zb-routine__prices strong { color: var(--rose); }
.zb-routine__label { display: block; color: var(--ink-2) !important; font-weight: 600 !important; margin: 0 0 2px !important; }
.zb-routine__ship { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 560px) {
    .zb-routine__item { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 10px; }
    .zb-routine__item.is-accessory { padding-right: 10px; }
    .zb-routine__item .zb-routine__img img, .zb-routine__item .zb-routine__gift { width: 56px; height: 56px; }
    .zb-routine__item.is-accessory .zb-routine__body { padding-right: 34px; }
    .zb-routine__prices { grid-column: 2; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; }
    .zb-routine__total .zb-btn { width: 100%; justify-content: center; }
}

/* Chat meet (Flora <-> coiffeuse, traduit) : page publique /meet/{hash} et admin */
.zb-meet__head { display: flex; justify-content: center; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.zb-meet__head img { height: 54px; width: auto; }
.zb-meet__page { padding-top: 26px; padding-bottom: 40px; }
.zb-meet__title { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.08; text-align: center; }
.zb-meet__intro { text-align: center; color: var(--ink-2); max-width: 600px; margin: 10px auto 6px; }
.zb-meet__when { text-align: center; font-weight: 700; font-size: .92rem; margin: 0 0 22px; }
.zb-meet__before { text-align: center; margin: 26px 0; }
.zb-meet__label { font-weight: 700; color: var(--plum-deep); margin: 0 0 12px; }
.zb-meet__countdown { display: inline-flex; gap: 10px; }
.zb-meet__unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 12px 10px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.zb-meet__unit strong { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--plum-deep); }
.zb-meet__unit small { font-size: .72rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.zb-meet__box { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.zb-meet__thread { height: min(60vh, 560px); overflow-y: auto; margin: 0; padding: 16px 14px; }
.zb-meet__empty { margin: auto; text-align: center; }
.zb-meet__typing { padding: 0 14px 6px; margin: 0; }
.zb-meet__text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.zb-meet__orig { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: .82rem; opacity: .8; white-space: pre-wrap; overflow-wrap: anywhere; }
.zb-msg.is-me .zb-meet__orig { border-top-color: rgba(255, 255, 255, .25); }
.zb-meet__warn { margin: 6px 0 0; font-size: .8rem; font-weight: 700; color: #a33d5c; }
.zb-msg.is-me .zb-meet__warn { color: #ffd9e4; }
.zb-msg.is-me .zb-meet__warn .zb-link { color: #fff; }
.zb-meet__error { font-size: .84rem; font-weight: 600; color: #a33d5c; margin-right: auto; }
.zb-meet__ended { text-align: center; }
.zb-meet-info__link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.zb-meet-info__link .zb-input { flex: 1 1 320px; min-width: 0; font-size: .86rem; }
.zb-meet-info__link form { margin: 0; }
.zb-meet-new__search { position: relative; }
.zb-meet-new__list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); font-weight: 400; }
.zb-meet-new__list li { padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: .9rem; }
.zb-meet-new__list li:hover { background: var(--cream); }
.zb-meet-new__picked { margin: -6px 0 14px; }
.zb-meet-copy { position: relative; display: inline-block; }
.zb-meet-copy__src { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) {
    .zb-meet__head { padding: 10px; }
    .zb-meet__head img { height: 38px; }
    .zb-meet__page { padding-top: 12px; padding-bottom: 12px; }
    .zb-meet__intro { font-size: .86rem; line-height: 1.45; }
    .zb-meet__thread { height: calc(100dvh - 330px); min-height: 260px; }
    .zb-meet__unit { min-width: 54px; }
}

/* ---------- Bandeau de consentement (cookies publicitaires) ---------- */
.zb-consent { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 150; padding: 11px 14px; border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: 0 24px 60px -20px rgba(44, 33, 48, .45), 0 0 0 1px var(--line); }
.zb-consent__title { font-family: var(--serif); font-size: 1.02rem; line-height: 1.1; color: var(--plum-deep); margin-bottom: 3px; }
.zb-consent__text { font-size: .72rem; line-height: 1.4; color: var(--ink-2); }
.zb-consent__text a { font-size: inherit; }
.zb-consent__actions { display: flex; gap: 8px; margin-top: 9px; }
.zb-consent__actions .zb-btn { padding: 7px 12px; min-height: 0; font-size: .82rem; }
.zb-consent__actions .zb-btn { flex: 1; justify-content: center; }
@media (min-width: 760px) { .zb-consent { left: 20px; right: auto; bottom: 20px; width: 360px; } }
/* Case « avec extensions » du selecteur de coiffure (accueil, barre collante, demande) */
.zb-pick__ext { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--plum-deep); cursor: pointer; }
.zb-pick__ext[hidden] { display: none; }
.zb-pick__ext input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zb-pick--inline .zb-pick__ext { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--cream); }
.zb-pick__ext .zb-check { flex-shrink: 0; }
.zb-pick__ext:has(input:checked) .zb-check { background: var(--plum-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center; box-shadow: none; }
.zb-pick__ext:has(input:focus-visible) .zb-check { outline: 2px solid var(--rose); outline-offset: 2px; }
/* Bouton « Payees » des demandes : halo discret (3 pulsations) pour qu'il ne passe pas inapercu */
.zb-btn--attn { position: relative; border-color: var(--rose); color: var(--rose); }
.zb-btn--attn::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(219, 112, 147, .55); animation: zb-attn 1.8s ease-out 3; pointer-events: none; }
@keyframes zb-attn { 0% { box-shadow: 0 0 0 0 rgba(219, 112, 147, .55); } 100% { box-shadow: 0 0 0 10px rgba(219, 112, 147, 0); } }
@media (prefers-reduced-motion: reduce) { .zb-btn--attn::after { animation: none; } }

/* ---------- Super admin : onglets des sites du groupe Koda ---------- */
.zb-koda { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); width: fit-content; max-width: 100%; }
.zb-koda__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--ink-2); transition: background .2s, color .2s; }
.zb-koda__tab:hover { color: var(--plum-deep); background: #fff; }
.zb-koda__tab[aria-current="page"] { background: var(--plum-deep); color: #fff; }
.zb-koda__n { min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: .78rem; line-height: 22px; text-align: center; background: rgba(0, 0, 0, .07); }
.zb-koda__n--on { background: var(--rose); color: #fff; }
/* Tableau de bord : trafic par canal */
.zb-dash__period select { min-width: 170px; }
.zb-dash__conv td.zb-dash__sub { padding-left: 26px; color: var(--ink-2); }
/* Admin : messages de contact */
.zb-contactrow { display: grid; grid-template-columns: 92px minmax(160px, 1.2fr) 3fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; color: var(--ink); }
.zb-contactrow small { display: block; color: var(--ink-2); font-size: .8rem; }
.zb-contactrow.is-new { box-shadow: inset 3px 0 0 var(--rose); }
.zb-contact__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 760px) { .zb-contactrow { grid-template-columns: 1fr auto; } .zb-contactrow > span:nth-child(3), .zb-contactrow > span:nth-child(4) { grid-column: 1 / -1; } }
/* Page de demande : note des avis sous l'introduction (rassurance, discret) */
.zb-lead__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.zb-lead__rating strong { color: var(--ink); }
.zb-lead__rating:hover span:last-child { text-decoration: underline; }
/* Page de demande : realisations de la prestation sous le formulaire (defilement horizontal sur mobile) */
.zb-lead-works { padding: 8px 0 56px; background: var(--paper); }
.zb-lead-works h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 16px; }
.zb-lead-works__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.zb-lead-works__row a { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.zb-lead-works__img { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); }
.zb-lead-works__row img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.zb-lead-works__t { font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zb-lead-works__row a:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .zb-lead-works__row { grid-auto-columns: 42%; } }
/* Coiffeuses : filtre en cours (specialite ou profil), retire d'un clic */
.zb-filterchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--plum-deep); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.zb-filterchip:hover { border-color: var(--rose); }
.zb-filterchip .zb-ic { opacity: .7; }
/* Fiche coiffeuse : profils et cheveux coiffes sur une seule ligne de texte discrete sous les prestations */
.zb-hdtags { margin: 12px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-2); }
.zb-hdtags span { font-weight: 600; color: var(--ink); }
.zb-hdtags span::after { content: ' : '; font-weight: 400; }
.zb-hdtags em { font-style: normal; margin-right: 14px; }
.zb-hdtags a { color: var(--ink-2); text-decoration: none; }
.zb-hdtags a:hover { color: var(--plum); text-decoration: underline; }
.zb-hdtags a + a::before { content: ', '; color: var(--ink-2); }
@media (min-width: 760px) { .zb-profile ~ .zb-hdtags { margin-left: 140px; max-width: 820px; } }
.zb-profiles--hair { margin-top: 10px; }
.zb-profiles--hair a { padding-left: 16px; }
.zb-city__sub { font-size: 1rem; margin: 22px 0 10px; }
/* Coiffeuses : tri de la liste ; page specialite : realisations sous les avis */
.zb-sort label { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.zb-sort select { padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; color: var(--ink); }
.zb-skillworks__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.zb-skillworks__head h2 { margin: 0; }
/* Barre de recherche (accueil, barre collante) : case extensions sur une ligne, sans agrandir la barre */
.zb-pick:not(.zb-pick--inline) .zb-pick__ext { margin-top: 1px; font-size: .74rem; line-height: 1.2; white-space: nowrap; gap: 6px; }
.zb-pick:not(.zb-pick--inline) .zb-pick__ext .zb-check { width: 14px; height: 14px; }