/* OLIVE & BEIGE — galerie publique, peau alignée sur le site vitrine (docs 16/17, 04.10.2026).
 * Jetons copiés du thème theme_oliveetbeige (le module reste autonome, spec 12 §8) :
 * crème #F9F7F1 / #FDFCFA / #E6E2D5, texte #373737, titres #4C4C4C, Marcellus + Lato,
 * boutons contour 1 px, coins carrés, aucune ombre. L'olive #9D9E7E ne porte jamais de
 * texte seul (2.6:1) : soulignements, icônes actives, étoiles. */
:root {
    --ob-bg: #F9F7F1;
    --ob-bg-2: #FDFCFA;
    --ob-card: #E6E2D5;
    --ob-text: #373737;
    --ob-heading: #4C4C4C;
    --ob-muted: #60656C;
    --ob-line: #B7B3A6;
    --ob-btn: #60656C;
    --ob-btn-hover-bg: #E6E2D5;
    --ob-btn-hover-text: #373737;
    --ob-olive: #9D9E7E;
    --ob-olive-text: #7F8064;
    --ob-error: #8C2F2A;
    --ob-gap: 6px;
    --ob-font-display: "Marcellus", Georgia, serif;
    --ob-font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ob-track: .21em;
}

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

body.ob-page {
    background: var(--ob-bg);
    color: var(--ob-text);
    font-family: var(--ob-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
}
body.ob-page > main { flex: 1 0 auto; }

h1, h2, h3 { font-family: var(--ob-font-display); font-weight: 400; color: var(--ob-heading); line-height: 1.3; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--ob-heading); text-decoration: underline; text-decoration-color: var(--ob-olive); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--ob-heading); }
img { max-width: 100%; height: auto; }

/* ---- accessibilité : focus, mouvement réduit ---- */
:focus-visible { outline: 2px solid var(--ob-heading); outline-offset: 2px; }
.ob-cover :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.ob-visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- petits titres en capitales espacées, en maigre (h5 du site) ---- */
.ob-brand {
    font-family: var(--ob-font-display); font-weight: 400;
    letter-spacing: .25em; text-transform: uppercase; font-size: .75rem;
    color: var(--ob-heading);
}
.ob-brand--light { color: rgba(255, 255, 255, .9); }
.ob-eyebrow {
    font-family: var(--ob-font-display); letter-spacing: var(--ob-track); text-transform: uppercase;
    font-size: .75rem; color: var(--ob-muted);
}

.ob-title { font-family: var(--ob-font-display); font-weight: 400; font-size: clamp(1.6rem, 4.5vw, 2.625rem); margin: .25rem 0 .5rem; color: var(--ob-heading); }
.ob-title--light { color: #fff; }

/* ---- en-tête centré (logo + titre) et pied, comme le site ---- */
.ob-head { text-align: center; padding: 2rem 16px 1rem; }
.ob-head__logo { display: inline-block; line-height: 0; }
.ob-head__logo img { height: 96px; width: auto; }
.ob-head__title { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 1rem; }
.ob-head__nav { margin-top: .75rem; }
.ob-head__nav a { font-family: var(--ob-font-display); font-size: .8125rem; letter-spacing: var(--ob-track); text-transform: uppercase; text-decoration: none; color: var(--ob-heading); margin: 0 .75rem; }
.ob-head__nav a:hover { text-decoration: underline; text-decoration-color: var(--ob-olive); }
@media (max-width: 600px) { .ob-head__logo img { height: 72px; } }

.ob-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem;
    padding: 1.5rem 16px 1.25rem; font-size: .8125rem; color: var(--ob-muted); text-align: center;
}
.ob-foot a { color: var(--ob-muted); }
.ob-foot svg { width: 18px; height: 18px; vertical-align: -4px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---- boutons : contour 1 px, capitales espacées, survol carte ---- */
.ob-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .7rem 1.6rem;
    border: 1px solid var(--ob-btn); border-radius: 0;
    background: transparent; color: var(--ob-btn);
    font-family: var(--ob-font-display); font-weight: 400; font-size: .8125rem;
    letter-spacing: var(--ob-track); text-transform: uppercase; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.ob-btn:hover { background: var(--ob-btn-hover-bg); color: var(--ob-btn-hover-text); border-color: var(--ob-btn-hover-bg); }
.ob-btn[disabled] { opacity: .5; cursor: default; }
.ob-btn--ghost { border-color: transparent; }
.ob-btn--light { border-color: rgba(255,255,255,.85); color: #fff; }
.ob-btn--light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.ob-btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .72rem; }

.ob-link { color: var(--ob-heading); font-size: .875rem; }

/* ---- page centrée (indisponible) ---- */
.ob-page--center > main { display: flex; align-items: center; justify-content: center; padding: 16px; }
.ob-card { max-width: 520px; text-align: center; padding: 2rem 1rem; }

/* ---- couverture plein écran ---- */
.ob-cover {
    position: relative; min-height: 100vh; min-height: 100dvh;
    background-color: var(--ob-card);
    background-size: cover; background-repeat: no-repeat;
    display: flex; align-items: flex-end; justify-content: center;
}
.ob-cover__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 20%, rgba(0,0,0,.5) 100%); }
/* Sans photo de couverture : fond olive foncé, pour que le titre, le formulaire et le logo blancs restent lisibles. */
.ob-cover--empty { background-color: #5F6150; background-image: linear-gradient(160deg, #6B6D59 0%, #4F5143 100%); }
.ob-cover__panel { position: relative; width: 100%; max-width: 560px; padding: 2rem 16px 6.5rem; text-align: center; min-width: 0; }
.ob-cover__panel .ob-title { overflow-wrap: anywhere; color: #fff; }
.ob-cover__date { color: rgba(255,255,255,.85); margin: 0 0 1.25rem; font-size: .95rem; }
.ob-cover__logo { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); line-height: 0; }
.ob-cover__logo img { height: 64px; width: auto; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

.ob-form { display: flex; flex-direction: column; gap: .9rem; max-width: 340px; margin: 0 auto; text-align: left; }
.ob-field { display: flex; flex-direction: column; gap: .3rem; }
.ob-field__label { font-family: var(--ob-font-display); font-size: .7rem; letter-spacing: var(--ob-track); text-transform: uppercase; color: rgba(255,255,255,.9); }
.ob-field__control { position: relative; display: flex; }
.ob-form input {
    width: 100%; min-height: 48px; padding: .5rem 3rem .5rem .9rem; font: inherit; font-size: 16px;
    border: 1px solid rgba(255,255,255,.7); border-radius: 0;
    background: rgba(255,255,255,.92); color: var(--ob-text);
}
.ob-form input::placeholder { color: #8A8578; }
.ob-form input:focus { outline: 2px solid #fff; outline-offset: 1px; }
.ob-form input[type="email"] { padding-right: .9rem; }
.ob-field__toggle {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
    border: 0; background: transparent; color: var(--ob-muted); cursor: pointer; line-height: 0;
}
.ob-field__toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ob-form .ob-btn { margin-top: .25rem; width: 100%; }
.ob-error { color: #fff; background: rgba(140,47,42,.9); padding: .5rem .75rem; margin: 0; font-size: .9rem; }
.ob-hint { color: rgba(255,255,255,.8); font-size: .8rem; margin: 0; }

@media (min-width: 768px) {
    .ob-cover { align-items: center; justify-content: flex-start; }
    .ob-cover__panel { margin-left: 8vw; text-align: left; padding-bottom: 2.5rem; }
    .ob-form { margin: 0; }
    .ob-cover__logo { left: auto; right: 2rem; bottom: 2rem; transform: none; }
}

/* ---- barre de la grille (collante, fonctionnelle) ---- */
.ob-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .75rem 16px; background: rgba(249,247,241,.95); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ob-card);
}
.ob-bar__left { min-width: 0; }
.ob-bar__title { font-family: var(--ob-font-display); font-weight: 400; font-size: 1.25rem; margin: 0; color: var(--ob-heading); overflow-wrap: anywhere; }
.ob-bar__right { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.ob-quota { font-size: .85rem; color: var(--ob-muted); }

/* ---- grille masonry ---- */
.ob-grid { padding: var(--ob-gap) 16px 3rem; }
.ob-masonry { column-count: 2; column-gap: var(--ob-gap); }
@media (min-width: 768px) { .ob-masonry { column-count: 3; } }
@media (min-width: 1100px) { .ob-masonry { column-count: 5; } .ob-grid { padding-left: var(--ob-gap); padding-right: var(--ob-gap); } }

.ob-item {
    position: relative; display: block; break-inside: avoid; margin: 0 0 var(--ob-gap);
    background: var(--ob-card); overflow: hidden; text-decoration: none;
}
.ob-item img {
    display: block; width: 100%; height: auto;
    -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.ob-sentinel { height: 1px; }
.ob-empty { text-align: center; color: var(--ob-muted); padding: 3rem 16px; }

/* ---- visionneuse (PhotoSwipe) : claire, comme Pixieset et le site ---- */
.pswp { --pswp-bg: #F9F7F1; --pswp-icon-color: #4C4C4C; --pswp-icon-color-secondary: #F9F7F1; --pswp-icon-stroke-color: #F9F7F1; }
.pswp .pswp__top-bar { height: auto; min-height: 60px; align-items: center; gap: 4px; padding-right: 4px; flex-wrap: wrap; background: linear-gradient(180deg, rgba(249,247,241,.9), rgba(249,247,241,0)); }
/* PhotoSwipe fixe .pswp__button a 50x60 px avec overflow cache : on reprend la main. */
.pswp .pswp__button.pswp__button--ob {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: auto; min-width: 44px; height: 44px; margin: 0; padding: 0 .9rem;
    overflow: visible; opacity: 1; box-sizing: border-box; white-space: nowrap;
    font-family: var(--ob-font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ob-btn); background: rgba(249,247,241,.92); border: 1px solid var(--ob-btn); border-radius: 0; cursor: pointer;
}
.pswp .pswp__button.pswp__button--ob:hover { background: var(--ob-card); color: var(--ob-text); border-color: var(--ob-card); }
.pswp .pswp__button.pswp__button--ob.is-primary { background: var(--ob-heading); color: #fff; border-color: var(--ob-heading); }
.pswp .pswp__button.pswp__button--ob.is-primary:hover { background: var(--ob-text); border-color: var(--ob-text); }
.pswp .pswp__button.pswp__button--ob[disabled] { opacity: .45; cursor: default; }
.pswp .pswp__button.pswp__button--ob span { line-height: 1; }
@media (max-width: 600px) {
    .pswp .pswp__button.pswp__button--ob span.lbl { display: none; }
    .pswp .pswp__button.pswp__button--ob { padding: 0 .6rem; }
}

/* ---- toast ---- */
.ob-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    max-width: calc(100vw - 32px); padding: .7rem 1.1rem; z-index: 100000;
    background: var(--ob-heading); color: #fff; border-radius: 0; font-size: .9rem;
}
.ob-toast[hidden] { display: none; }

/* ---- liste des galeries publiques ---- */
.ob-listing { padding: 1rem 16px 3rem; max-width: 1400px; margin: 0 auto; width: 100%; }
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ob-tile { display: block; text-decoration: none; color: inherit; }
.ob-tile__img { aspect-ratio: 4 / 3; background: var(--ob-card) center / cover no-repeat; transition: opacity .15s; }
.ob-tile:hover .ob-tile__img { opacity: .92; }
.ob-tile__body { padding: .75rem 0 0; display: flex; flex-direction: column; gap: .15rem; }
.ob-tile__line { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ob-tile__name { font-family: var(--ob-font-display); font-size: 1.125rem; color: var(--ob-heading); overflow-wrap: anywhere; }
.ob-tile__date { color: var(--ob-muted); font-size: .8125rem; padding-left: 1.4rem; }
.ob-tile__lock { color: var(--ob-muted); line-height: 0; }
.ob-tile__lock svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; vertical-align: -2px; }

/* ---- dialogue d'achat, page Mes photos ---- */
.ob-dialog { border: 1px solid var(--ob-line); border-radius: 0; padding: 0; max-width: min(92vw, 480px); width: 100%; background: var(--ob-bg-2); color: var(--ob-text); }
.ob-dialog::backdrop { background: rgba(55,55,55,.55); }
.ob-dialog__form { padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-family: var(--ob-font-body); }
.ob-dialog__title { font-family: var(--ob-font-display); font-weight: 400; font-size: 1.25rem; margin: 0; color: var(--ob-heading); }
.ob-dialog__summary { margin: 0; font-weight: 700; }
.ob-dialog__hint { margin: 0; color: var(--ob-muted); font-size: .9rem; }
.ob-dialog__address { display: flex; flex-direction: column; gap: .5rem; }
.ob-dialog__address label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-muted); flex: 1; }
.ob-dialog__address input { min-height: 44px; padding: .4rem .7rem; font: inherit; font-size: 16px; border: 1px solid var(--ob-line); border-radius: 0; background: transparent; color: var(--ob-text); }
.ob-dialog__row { display: flex; gap: .5rem; }
.ob-dialog__row label:first-child { flex: 0 0 110px; }
.ob-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.ob-dialog__success { display: flex; flex-direction: column; gap: .75rem; }
.ob-dialog .ob-error { color: var(--ob-error); background: transparent; padding: 0; }
.ob-achats { padding: 1rem 16px 3rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.ob-section { margin-bottom: 2rem; }
.ob-section__title { font-family: var(--ob-font-display); font-weight: 400; font-size: 1.25rem; color: var(--ob-heading); margin-bottom: .75rem; }
.ob-pending { list-style: none; padding: 0; margin: 0 0 .5rem; }
.ob-pending__item { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--ob-card); }
.ob-pending__amount { font-weight: 700; }
.ob-owned { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ob-owned__item { display: flex; flex-direction: column; gap: .4rem; }
.ob-owned__item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ob-card); }
.ob-owned__btn { font-size: .7rem; padding: .4rem .6rem; min-height: 40px; }

/* ==== Sélection (drapeaux, étoiles, couleurs) : version claire ==== */
:root {
    --lr-bg: #E6E2D5;        /* barre d'outils */
    --lr-text: #4C4C4C;
    --lr-muted: #8A8578;
    --lr-on: #4C4C4C;
    --lr-red: #C9453F; --lr-yellow: #D9B22A; --lr-green: #5E9A62; --lr-blue: #3E7FBF; --lr-purple: #8A5FC0;
}

/* --- icônes communes --- */
.ob-lr-flag { background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0; color: var(--lr-muted); }
.ob-lr-flag svg .f { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ob-lr-flag svg .x { stroke: currentColor; fill: none; }
.ob-lr-flag:hover { color: var(--lr-text); }
.ob-lr-flag.is-on { color: var(--lr-on); }
.ob-lr-flag.is-on svg .f { fill: currentColor; }
.ob-lr-flag--x.is-on { color: var(--ob-error); }
.ob-lr-flag--x.is-on svg .f { fill: var(--ob-error); stroke: var(--ob-error); }
.ob-lr-flag--x.is-on svg .x { stroke: #fff; }

.ob-star { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; color: var(--lr-muted); }
.ob-star svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ob-star.is-on { color: var(--ob-olive-text); }
.ob-star.is-on svg { fill: currentColor; }
.ob-star:hover { color: var(--lr-text); }

.ob-lr-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; opacity: .55; padding: 0; }
.ob-lr-color:hover { opacity: .9; }
.ob-lr-color.is-on { opacity: 1; border-color: #fff; box-shadow: 0 0 0 1px var(--lr-text); }
.ob-lr-color--red { background: var(--lr-red); }
.ob-lr-color--yellow { background: var(--lr-yellow); }
.ob-lr-color--green { background: var(--lr-green); }
.ob-lr-color--blue { background: var(--lr-blue); }
.ob-lr-color--purple { background: var(--lr-purple); }

/* --- barre d'outils de la visionneuse --- */
.ob-lr {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
    min-height: 56px; padding: 8px 12px;
    background: var(--lr-bg); color: var(--lr-text); border-top: 1px solid var(--ob-line);
    font-family: var(--ob-font-body); font-size: .85rem;
    pointer-events: auto;
}
.ob-lr__group { display: flex; align-items: center; gap: 4px; }
.ob-lr__flags { gap: 2px; padding-right: 14px; border-right: 1px solid var(--ob-line); }
.ob-lr__colors { gap: 6px; padding-left: 14px; border-left: 1px solid var(--ob-line); }
.ob-lr__note input {
    width: min(320px, 50vw); min-height: 36px; padding: .3rem .6rem; font: inherit; font-size: .85rem;
    background: rgba(255,255,255,.7); color: var(--ob-text); border: 1px solid var(--ob-line); border-radius: 0;
}
.ob-lr__note input::placeholder { color: #8A8578; }
.ob-lr__note input:focus { outline: 2px solid var(--ob-heading); outline-offset: 1px; }
.ob-lr__help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ob-line); color: var(--lr-muted); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; cursor: help; }
@media (max-width: 600px) {
    .ob-lr { gap: 6px 10px; padding: 6px 8px; }
    .ob-lr__help { display: none; }
    .ob-lr__note input { width: 100%; }
    .ob-lr__note { width: 100%; justify-content: center; }
}

/* --- cellules de la grille : drapeaux toujours visibles (discrets), pleins au survol --- */
.ob-item__overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
    padding: 6px; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.4) 100%);
    opacity: .55; transition: opacity .15s;
}
.ob-item__overlay > * { pointer-events: auto; }
.ob-item:hover .ob-item__overlay, .ob-item:focus-within .ob-item__overlay,
.ob-item.is-pick .ob-item__overlay, .ob-item.is-reject .ob-item__overlay,
.ob-item.has-note .ob-item__overlay, .ob-item.is-rated .ob-item__overlay { opacity: 1; }
@media (hover: none) { .ob-item__overlay { opacity: 1; background: none; } }
.ob-item__overlay .ob-lr-flag { color: rgba(255,255,255,.85); }
.ob-item__overlay .ob-lr-flag.is-on { color: #fff; }
.ob-item__overlay .ob-lr-flag--x.is-on { color: #fff; }
.ob-item__overlay .ob-lr-flag--x.is-on svg .f { fill: var(--ob-error); stroke: #fff; }
.ob-item__overlay .ob-star { color: rgba(255,255,255,.7); }
.ob-item__overlay .ob-star.is-on { color: #fff; }
.ob-item__flag, .ob-item__reject { position: absolute; top: 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.ob-item__flag { left: 6px; }
.ob-item__reject { left: 40px; }
.ob-item__note { position: absolute; top: 10px; right: 8px; color: #fff; font-size: .95rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); display: none; }
.ob-item.has-note .ob-item__note { display: inline; }
.ob-item__stars { position: absolute; left: 6px; bottom: 4px; display: flex; gap: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.ob-item__stars .ob-star svg { width: 16px; height: 16px; }
@media (hover: none) { .ob-item__stars { display: none; } }
.ob-item.is-reject img { opacity: .35; filter: grayscale(.6); }
.ob-item.is-color-red { box-shadow: inset 0 -4px 0 var(--lr-red); }
.ob-item.is-color-yellow { box-shadow: inset 0 -4px 0 var(--lr-yellow); }
.ob-item.is-color-green { box-shadow: inset 0 -4px 0 var(--lr-green); }
.ob-item.is-color-blue { box-shadow: inset 0 -4px 0 var(--lr-blue); }
.ob-item.is-color-purple { box-shadow: inset 0 -4px 0 var(--lr-purple); }
.ob-item[hidden] { display: none; }

/* --- albums par couleur (filtre multiple + nom donné par le client) --- */
.ob-bar__colors { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding-top: .25rem; }
.ob-bar__colors[hidden] { display: none; }
.ob-colorfilter { display: flex; flex-wrap: wrap; gap: .4rem; }
.ob-cf {
    display: inline-flex; align-items: stretch; min-height: 36px;
    border: 1px solid var(--ob-line); border-radius: 0; background: transparent; color: var(--ob-text);
    font: inherit; font-size: .8rem; transition: background .15s, border-color .15s;
}
.ob-cf:hover { background: var(--ob-bg-2); }
.ob-cf.is-on { background: var(--ob-card); border-color: var(--ob-heading); }
.ob-cf__toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .4rem .2rem .6rem; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ob-cf--clear { padding: .2rem .7rem; cursor: pointer; }
.ob-cf .ob-lr-color { width: 14px; height: 14px; border-width: 1px; box-shadow: none; opacity: 1; cursor: inherit; pointer-events: none; }
.ob-cf__label { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-cf__count { color: var(--ob-muted); font-size: .75rem; }
.ob-cf__edit { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: transparent; color: var(--ob-muted); cursor: pointer; line-height: 0; }
.ob-cf__edit svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ob-cf__edit:hover { color: var(--ob-heading); }
.ob-colorfilter__help { flex-basis: 100%; color: var(--ob-muted); font-size: .75rem; }
@media (max-width: 600px) { .ob-colorfilter__help { display: none; } }

/* --- filtre et bouton d'envoi dans la barre --- */
.ob-filter select {
    min-height: 44px; padding: .4rem 2rem .4rem .7rem; font: inherit; font-size: .85rem;
    border: 1px solid var(--ob-line); border-radius: 0; background: transparent; color: var(--ob-text);
}
.ob-flag-icon { display: inline-block; width: 14px; height: 14px; background: currentColor;
    clip-path: polygon(0 0, 100% 0, 78% 38%, 100% 70%, 18% 70%, 18% 100%, 0 100%); }

/* ==== Boutique dans la galerie (spec 17) ==== */
.ob-cartbtn { position: relative; gap: .4rem; }
.ob-cartbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ob-cartbtn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ob-text, #373737); color: #fff; font-size: .7rem; font-weight: 700; }
.ob-cartbtn__count[hidden] { display: none; }

/* bouton panier sur la vignette et dans la visionneuse */
.ob-item__cart { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ob-text, #373737); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ob-item__cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ob-item.in-cart .ob-item__cart { background: var(--ob-text, #373737); color: #fff; }
.ob-item__note { top: 46px; }

/* dialogue bienvenue */
.ob-dialog--welcome .ob-dialog__form { text-align: center; }
.ob-welcome__offer { font-family: "Marcellus", serif; font-size: 1.35rem; margin: .25rem 0; }
.ob-welcome__steps { text-align: left; margin: .5rem 0 0; padding-left: 1.2rem; color: var(--ob-muted, #60656C); font-size: .9rem; }
.ob-welcome__steps li { margin: .25rem 0; }

/* dialogue produit */
.ob-dialog--product { max-width: min(92vw, 560px); }
.ob-product__head { display: flex; gap: .9rem; align-items: center; }
.ob-product__head img { width: 96px; height: 96px; object-fit: cover; border-radius: 3px; background: var(--ob-bg-2, #E6E2D5); }
.ob-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--ob-bg-2, #E6E2D5); }
.ob-tab { border: 0; background: none; padding: .5rem .75rem; font: inherit; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-muted, #60656C); cursor: pointer; border-bottom: 2px solid transparent; }
.ob-tab.is-on { color: var(--ob-text, #373737); border-bottom-color: var(--ob-text, #373737); }
.ob-products { display: flex; flex-direction: column; gap: .35rem; max-height: 48vh; overflow: auto; }
.ob-product { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem .9rem; align-items: center; padding: .55rem .25rem; border-bottom: 1px solid var(--ob-bg-2, #E6E2D5); }
.ob-product__name { font-weight: 700; }
.ob-product__desc { color: var(--ob-muted, #60656C); font-size: .85rem; }
.ob-product__price { white-space: nowrap; }
.ob-product__price .is-offered { color: #2f7d3c; font-weight: 700; }
.ob-product__add { min-height: 36px; padding: .3rem .8rem; font-size: .72rem; }
.ob-product__qty { width: 52px; min-height: 36px; padding: .2rem .4rem; font: inherit; text-align: center; border: 1px solid #c9c7bf; border-radius: 2px; }
.ob-product.in-cart .ob-product__add { background: #2f7d3c; border-color: #2f7d3c; color: #fff; }

/* panier */
.ob-dialog--cart { max-width: min(94vw, 620px); }
.ob-cart__lines { display: flex; flex-direction: column; gap: .4rem; max-height: 40vh; overflow: auto; }
.ob-cart__line { display: grid; grid-template-columns: 56px 1fr auto auto; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--ob-bg-2, #E6E2D5); }
.ob-cart__line img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; background: var(--ob-bg-2, #E6E2D5); }
.ob-cart__line .ph { width: 56px; height: 56px; border-radius: 3px; background: var(--ob-bg-2, #E6E2D5); display: inline-flex; align-items: center; justify-content: center; color: var(--ob-muted, #60656C); font-size: 1.2rem; }
.ob-cart__name { font-size: .9rem; }
.ob-cart__name small { display: block; color: var(--ob-muted, #60656C); }
.ob-cart__qty { display: inline-flex; align-items: center; gap: .25rem; }
.ob-cart__qty button { width: 28px; height: 28px; border: 1px solid #c9c7bf; background: #fff; border-radius: 2px; cursor: pointer; font: inherit; }
.ob-cart__price { white-space: nowrap; text-align: right; }
.ob-cart__price .is-offered { color: #2f7d3c; font-weight: 700; }
.ob-cart__remove { border: 0; background: none; color: var(--ob-muted, #60656C); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ob-cart__total { display: flex; justify-content: space-between; font-family: "Marcellus", serif; font-size: 1.1rem; padding-top: .4rem; }
.ob-cart__delivery { display: flex; flex-direction: column; gap: .3rem; }
.ob-radio { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.ob-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted, #60656C); margin: .4rem 0 .2rem; }

/* page Mes commandes */
.ob-orders { display: flex; flex-direction: column; gap: .9rem; }
.ob-order { border: 1px solid var(--ob-bg-2, #E6E2D5); background: #fff; padding: .8rem 1rem; }
.ob-order__head, .ob-order__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.ob-order__name { font-weight: 700; }
.ob-order__status { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-accent-dark, #7F8064); }
.ob-order__lines { list-style: none; padding: 0; margin: .5rem 0; }
.ob-order__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dashed var(--ob-bg-2, #E6E2D5); font-size: .9rem; }
.ob-order__total { font-weight: 700; }

/* visionneuse : bouton panier */
.pswp .pswp__button.pswp__button--ob.ob-pswp-cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }