/* Kobi — « Porcelain & Dew » : papier hanji, porcelaine, céladon, peau de verre. Pour tout le monde. */
:root {
  --paper: #F6F3EC;        /* hanji */
  --surface: #FFFFFF;      /* porcelaine */
  --surface-2: #EFEBE2;
  --line: #E6E1D6;
  --ink: #141B18;
  --muted: #5E6762;        /* stone */
  --celadon: #2E7A65;
  --celadon-deep: #1F5C4C;
  --glaze: #BFE3D5;
  --on-celadon: #FFFFFF;
  --persimmon: #FF7A45;
  --persimmon-bg: #FFE6D9;
  --yuja: #FFC94A;
  --lilac: #8F7FD6;
  --lilac-deep: #4A3F86;
  --leaf: #2F9E6E; --leaf-text: #1F7A52; --leaf-bg: #DDF2E7;
  --amber: #D99A12; --amber-text: #8A5F00; --amber-bg: #FBEFD6;
  --clay: #D0533F; --clay-text: #B23F2C; --clay-bg: #FBE3DE;
  --ok-bg: #EAF1EE;
  --ring-track: #E9E4DA;
  --glass: linear-gradient(135deg, #D9F0E6 0%, #E7E3F7 55%, #FCE7DA 100%);
  --night: linear-gradient(160deg, #2B2650 0%, #4A3F86 60%, #8F7FD6 100%);
  --dawn: linear-gradient(160deg, #1F5C4C 0%, #2E7A65 55%, #7CC3A8 100%);
  --frost: rgba(255, 255, 255, 0.84);
  --shadow: 0 1px 2px rgba(20, 27, 24, 0.04), 0 8px 24px rgba(20, 27, 24, 0.05);
  --body: "Manrope", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --brand: "Hahmlet", "Noto Serif KR", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1513; --surface: #171F1C; --surface-2: #1F2925; --line: #2A3531; --ink: #E8EFEB; --muted: #9CADA6;
    --celadon: #6FC1A3; --celadon-deep: #2E7A65; --glaze: #2C5A4D; --on-celadon: #FFFFFF;
    --persimmon-bg: #3B2418; --leaf-text: #7FD1A6; --leaf-bg: #183A2A; --amber-text: #F0C064; --amber-bg: #3A2E14; --clay-text: #F29A89; --clay-bg: #3E211C;
    --ok-bg: #1C2824; --ring-track: #2A3531;
    --glass: linear-gradient(135deg, #1D3A31 0%, #2A2748 55%, #3E2A24 100%);
    --frost: rgba(23, 31, 28, 0.84); --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1513; --surface: #171F1C; --surface-2: #1F2925; --line: #2A3531; --ink: #E8EFEB; --muted: #9CADA6;
  --celadon: #6FC1A3; --celadon-deep: #2E7A65; --glaze: #2C5A4D; --on-celadon: #FFFFFF;
  --persimmon-bg: #3B2418; --leaf-text: #7FD1A6; --leaf-bg: #183A2A; --amber-text: #F0C064; --amber-bg: #3A2E14; --clay-text: #F29A89; --clay-bg: #3E211C;
  --ok-bg: #1C2824; --ring-track: #2A3531;
  --glass: linear-gradient(135deg, #1D3A31 0%, #2A2748 55%, #3E2A24 100%);
  --frost: rgba(23, 31, 28, 0.84); --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
:lang(ko), :lang(vi), :lang(ja), :lang(zh) { line-height: 1.6; }
[lang="ko"] { word-break: keep-all; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
.ic { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 2.5px solid var(--celadon); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.view { max-width: 560px; margin: 0 auto; padding-top: 14px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.view > * + * { margin-top: 14px; }
.view.no-tabs { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 15px; font-weight: 800; margin-top: 14px; }
p { margin: 0; }
.display { font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.lead { color: var(--muted); font-size: 16px; }
.lead.small, .small { font-size: 14px; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.center { text-align: center; }
.hint { color: var(--muted); font-size: 14px; margin-top: 4px; }
.tnum { font-variant-numeric: tabular-nums; }

/* En-têtes */
.top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.top h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.back { display: grid; place-items: center; width: 42px; height: 42px; margin-left: -6px; border-radius: 14px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); flex: none; }
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; }
.wordmark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.wordmark b { font-family: var(--brand); font-weight: 700; font-size: 30px; color: var(--celadon); line-height: 1; }
.wordmark span { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.pp-mini { display: flex; align-items: center; gap: 8px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 5px; font-size: 13px; font-weight: 800; max-width: 60%; }
.pp-mini i { width: 28px; height: 28px; border-radius: 50%; background: var(--glass); flex: none; }
.pp-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyebrow { font-size: 13px; font-weight: 800; color: var(--celadon); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .12s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--celadon); color: var(--on-celadon); border-color: transparent; }
.btn.dark { background: var(--ink); color: var(--paper); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger, .btn.primary.danger { background: var(--clay); color: #fff; border-color: transparent; }
.btn .ic { width: 18px; height: 18px; }
.link { background: none; border: 0; padding: 4px 0; color: var(--celadon); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer; }
.link.danger { color: var(--clay-text); display: block; margin: 24px auto 0; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.icon-btn .ic { width: 18px; height: 18px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap { gap: 10px; }
.wrap { flex-wrap: wrap; }
.full { width: 100%; }
.row.gap > .btn { flex: 1 1 auto; }
input, select, textarea { width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; }
textarea { resize: vertical; line-height: 1.45; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--celadon); }

/* Cartes */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); }
.card > * + * { margin-top: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
details.card summary { font-weight: 800; cursor: pointer; }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.note .ic { width: 18px; height: 18px; margin-top: 2px; }
.badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--leaf-bg); color: var(--leaf-text); vertical-align: middle; }
.prose p + p { margin-top: 10px; }
.count { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 800; color: var(--muted); }
.callout { display: flex; gap: 12px; align-items: flex-start; border-radius: 18px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.callout .ic { width: 20px; height: 20px; margin-top: 1px; }
.callout.warn { background: var(--amber-bg); } .callout.warn .ic { color: var(--amber-text); }
.callout.info { background: var(--surface); border: 1px solid var(--line); } .callout.info .ic { color: var(--muted); }
.callout.good { background: var(--leaf-bg); } .callout.good .ic { color: var(--leaf-text); }
.callout small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* Signature « grain » */
.grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Barre d'onglets flottante avec bouton Scanner central */
.tabbar { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; max-width: 536px; margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center; background: var(--frost); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 26px; padding: 6px; box-shadow: 0 10px 30px rgba(20, 27, 24, 0.08); }
.tab { flex: 1; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 700; border-radius: 16px; min-width: 0; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { color: var(--celadon); font-weight: 800; }
.tab.on .ic { stroke-width: 2.2; }
.tab-scan { flex: none; width: 58px; height: 58px; margin-top: -28px; border-radius: 50%; background: var(--celadon); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(46, 122, 101, 0.38); border: 4px solid var(--paper); }
.tab-scan .ic { width: 26px; height: 26px; stroke-width: 2; }

/* Tuiles produit (illustrations) */
.p-tile { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 16px; flex: none; }
.p-tile .p-art { filter: drop-shadow(0 6px 10px rgba(20, 27, 24, 0.08)); }
.thumb { width: 54px; height: 54px; border-radius: 15px; }
.thumb .p-art { width: 24px; height: 42px; }

/* Rails de produits */
.rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 2px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.pcard { scroll-snap-align: start; width: 152px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 8px; text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.pcard .p-tile { height: 136px; width: 100%; }
.pcard .brand { margin: 9px 4px 0; font-size: 12px; color: var(--muted); font-weight: 700; }
.pcard .name { margin: 2px 4px 0; font-size: 14px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pcard .price { margin: 6px 4px 4px; font-size: 14px; font-weight: 800; }
.score-pill { position: absolute; top: 8px; left: 8px; background: var(--surface); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.s-great { color: var(--leaf-text); } .s-ok { color: var(--celadon); } .s-caution { color: var(--amber-text); } .s-avoid { color: var(--clay-text); }

/* Héros « peau de verre » */
.hero { position: relative; overflow: hidden; border-radius: 28px; padding: 20px; background: var(--glass); isolation: isolate; }
.hero > *:not(.grain):not(.hero-img) { position: relative; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .9; }
.hero .grain { z-index: 0; }
.hero-title { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; margin-top: 8px; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.glass-chip { background: rgba(255, 255, 255, 0.72); color: #141B18; border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 800; }
.hero select { width: auto; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.72); border: 0; color: #141B18; }
.hero .tips-more { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }

/* Grand bouton Scanner */
.scan-cta { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 24px; padding: 16px 18px; }
.scan-cta .sq { width: 50px; height: 50px; border-radius: 16px; background: var(--celadon); display: grid; place-items: center; flex: none; color: #fff; }
.scan-cta .sq .ic { width: 26px; height: 26px; }
.scan-cta strong { display: block; font-size: 17px; font-weight: 800; }
.scan-cta small { color: var(--glaze); font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scan-cta { background: #E8EFEB; color: #0F1513; } :root:not([data-theme="light"]) .scan-cta small { color: #2E7A65; } }
:root[data-theme="dark"] .scan-cta { background: #E8EFEB; color: #0F1513; }

/* Anneaux de score */
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; }
.ring-arc { transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1); }
.ring-v { position: relative; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Carte routine (accueil) */
.routine-card { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.routine-card .ring-v { font-size: 14px; }
.routine-card .rc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.routine-card strong { font-size: 15px; font-weight: 800; }
.routine-card small { font-size: 13px; color: var(--muted); }
.streak { display: inline-flex; align-items: center; gap: 4px; background: var(--persimmon-bg); border-radius: 999px; padding: 6px 10px; font-weight: 800; font-size: 13px; flex: none; }
.streak svg { width: 14px; height: 14px; }

/* Ingrédient vedette (photo) */
.spot { position: relative; display: flex; min-height: 150px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; background: linear-gradient(135deg, #2E7A65, #7CC3A8); isolation: isolate; }
.spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 21, 19, 0) 20%, rgba(15, 21, 19, .72) 100%); }
.spot .sp-in { align-self: flex-end; padding: 16px; display: grid; gap: 2px; }
.spot .sp-k { font-family: var(--brand); font-size: 15px; opacity: .9; }
.spot strong { font-size: 19px; font-weight: 800; }
.spot small { font-size: 13px; opacity: .92; }

/* Raccourcis */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick a { display: grid; justify-items: center; gap: 6px; text-decoration: none; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.quick a i { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--celadon); font-style: normal; }

/* Passeport de peau */
.passport { position: relative; overflow: hidden; border-radius: 24px; padding: 18px 18px 14px; color: #F2F8F5; background: var(--dawn); isolation: isolate; }
.passport .grain { z-index: -1; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(191, 227, 213, 0.35); padding-bottom: 10px; }
.pp-ko { font-family: var(--brand); font-size: 20px; font-weight: 700; }
.pp-en { font-size: 13px; opacity: 0.85; font-weight: 700; }
.pp-body { display: grid; gap: 12px; padding-top: 12px; }
.pp-label { display: block; font-size: 12px; opacity: 0.8; font-weight: 700; }
.pp-type strong { font-size: 22px; font-weight: 800; display: block; }
.pp-type-ko { font-size: 14px; opacity: 0.85; }
.pp-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tags li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-weight: 700; }
.card .pp-tags li, .sheet .pp-tags li { background: var(--surface-2); color: var(--ink); }
.pp-mrz { margin-top: 14px; font: 12px/1 var(--mono); letter-spacing: 0.12em; opacity: 0.5; white-space: nowrap; overflow: hidden; }
.passport.compact .pp-mrz { display: none; }

/* Onboarding */
.onboard { padding-top: 18px; }
.ob-progress { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.ob-progress span { display: block; height: 100%; background: var(--celadon); border-radius: 5px; transition: width 0.35s cubic-bezier(.2, .8, .2, 1); }
.ob-hero { position: relative; overflow: hidden; border-radius: 30px; padding: 26px 20px 22px; background: var(--glass); isolation: isolate; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.ob-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ob-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(246, 243, 236, 0) 25%, rgba(246, 243, 236, .94) 78%); }
.ob-hero .display { font-size: 32px; margin-top: 14px; color: #141B18; }
.ob-hero .lead { margin-top: 8px; color: #3F4843; }
.mark { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 20px; background: #2E7A65; color: #fff; font: 700 32px/1 var(--brand); }
.ob-q { font-size: 21px; font-weight: 800; margin-top: 26px !important; display: block; letter-spacing: -0.02em; }
.ob-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px !important; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); }
.ob-actions .btn.primary { flex: 1; min-height: 54px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 700; cursor: pointer; }
.chip .ic { width: 16px; height: 16px; }
.chip.on { background: var(--celadon); color: #fff; border-color: transparent; }
.chip small { opacity: 0.7; font-size: 11px; }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; display: grid; gap: 2px; padding: 15px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.opt strong { font-weight: 800; }
.opt small { color: var(--muted); font-size: 14px; }
.opt.on { border-color: var(--celadon); box-shadow: inset 0 0 0 2px var(--celadon); }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type-tile { position: relative; overflow: hidden; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 132px; padding: 14px; border-radius: 22px; border: 2px solid transparent; cursor: pointer; color: #141B18; isolation: isolate; }
.type-tile strong { font-size: 17px; font-weight: 800; }
.type-tile small { font-size: 12.5px; color: #3F4843; line-height: 1.35; }
.type-tile.on { border-color: #141B18; }
.type-tile .tt-check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: #141B18; color: #fff; display: grid; place-items: center; }
.type-tile .tt-check .ic { width: 15px; height: 15px; }
.tt-dry { background: radial-gradient(120% 90% at 20% 10%, #FFF6EC, #F3DCC5); }
.tt-oily { background: radial-gradient(120% 90% at 30% 20%, #F4FFFB, #BFE6D7 60%, #9BD5C1); }
.tt-combination { background: linear-gradient(135deg, #CFEDE2 0%, #CFEDE2 48%, #F6E3D1 52%, #F6E3D1 100%); }
.tt-normal { background: radial-gradient(120% 90% at 30% 20%, #FBFAFF, #E4DEF6); }

/* Météo peau dans le héros, villes */
.city { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #3F4843; }

/* Routines */
.routine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px 10px 8px 8px; }
.step.treat { border: 2px solid var(--lilac); padding: 7px 9px 7px 7px; }
.step .step-main { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.step-main small { color: var(--muted); font-size: 12px; font-weight: 700; }
.step.treat .step-main small { color: var(--lilac-deep); }
.step-main strong { font-size: 14.5px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tick { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; color: #fff; padding: 0; }
.tick.on { background: var(--celadon); border-color: var(--celadon); }
.tick .ic { width: 15px; height: 15px; stroke-width: 3; }
.compact .step { padding: 6px 8px 6px 6px; }

/* Héros du set */
.set-hero { position: relative; overflow: hidden; color: #fff; border-radius: 28px; padding: 18px; isolation: isolate; }
.set-hero.pm { background: var(--night); }
.set-hero.am { background: var(--dawn); }
.set-hero .grain { z-index: -1; }
.seg2 { display: inline-flex; background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 3px; }
.seg2 button { border: 0; background: transparent; color: #fff; font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.seg2 button[aria-selected="true"] { background: #fff; color: #2B2650; font-weight: 800; }
.set-hero .ring-v { font-size: 28px; color: #fff; }
.set-hero .sh-row { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.set-hero .sh-text { display: grid; gap: 4px; min-width: 0; }
.set-hero .sh-text strong { font-size: 17px; font-weight: 800; }
.set-hero .sh-text small { font-size: 13px; opacity: .85; }
.week { display: flex; gap: 5px; margin-top: 6px; }
.wd { width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.wd.on { background: var(--yuja); color: #141B18; font-weight: 800; }
.wd.now { box-shadow: 0 0 0 2px #fff; }
.card .week .wd { background: var(--surface-2); color: var(--muted); }
.card .week .wd.on { background: var(--yuja); color: #141B18; }
.total { font-size: 15px; } .total strong { font-size: 18px; } .total small { color: var(--muted); font-size: 12px; display: block; }
.bar-actions { display: flex; gap: 10px; }
.bar-actions .btn { flex: 1; }

/* Points de verdict */
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.dot-great { background: var(--leaf); } .dot-ok { background: var(--celadon); } .dot-caution { background: var(--amber); } .dot-avoid { background: var(--clay); }

/* Listes */
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--line); }
.list.cards { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 0 14px; }
.li-link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; }
.li-main { flex: 1; min-width: 0; display: grid; }
.li-main strong { font-weight: 800; font-size: 15px; }
.li-main small { color: var(--muted); font-size: 13px; }
.li-end { text-align: right; font-size: 13px; color: var(--muted); display: grid; flex: none; font-weight: 700; }
.li-end small { font-size: 11.5px; }
.menu { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 0 14px; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px 8px 8px; text-decoration: none; }
.prow .li-main strong { font-size: 14.5px; }
.prow .li-end .sc { font-size: 15px; font-weight: 800; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pill.on { background: var(--ink); color: var(--paper); border-color: transparent; }

/* Scanner */
.scan-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scan-big { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 140px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; }
.scan-big.main { grid-column: 1 / -1; min-height: 170px; background: var(--ink); color: var(--paper); border-color: transparent; }
.scan-big.main .grain { z-index: -1; }
.scan-big .sq { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--ok-bg); color: var(--celadon); }
.scan-big.main .sq { background: var(--celadon); color: #fff; }
.scan-big .ic { width: 26px; height: 26px; }
.scan-big strong { display: block; font-size: 16px; font-weight: 800; }
.scan-big.main strong { font-size: 20px; }
.scan-big small { font-size: 13px; opacity: 0.8; }
.quota { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; font-weight: 700; }
.quota.on { color: var(--leaf-text); }
.quota a { color: var(--celadon); font-weight: 800; }
.howto { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; }
.cam { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.cam video { width: 100%; height: 100%; object-fit: cover; }
.cam-frame { position: absolute; inset: 28% 10%; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }

/* Fiche produit */
.p-hero { position: relative; height: 290px; margin: -14px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.p-hero .grain { z-index: -1; }
.p-hero .p-art { width: 116px; height: 200px; filter: drop-shadow(0 14px 22px rgba(20, 27, 24, 0.12)); animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.p-hero .ph-top { position: absolute; top: 14px; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: center; }
.p-hero .back { background: rgba(255, 255, 255, .85); border: 0; color: #141B18; }
.p-hero .ph-tag { background: rgba(255, 255, 255, .85); color: #5E6762; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.p-sheet { position: relative; margin-top: -34px !important; background: var(--paper); border-radius: 28px 28px 0 0; padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.p-head { display: flex; gap: 14px; align-items: center; }
.p-head .ring-v { font-size: 26px; }
.p-head .ph-text { display: grid; gap: 3px; min-width: 0; }
.p-head .ph-brand { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.p-head h1 { font-size: 20px; font-weight: 800; line-height: 1.2; }
.p-head .ph-verdict { font-size: 14px; font-weight: 800; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { border-radius: 16px; padding: 10px; display: grid; gap: 2px; }
.stat strong { font-size: 19px; font-weight: 800; }
.stat span { font-size: 12px; font-weight: 700; line-height: 1.25; }
.stat.good { background: var(--leaf-bg); } .stat.good strong { color: var(--leaf-text); }
.stat.warn { background: var(--amber-bg); } .stat.warn strong { color: var(--amber-text); }
.stat.conf { background: var(--surface); border: 1px solid var(--line); }
.stat.conf.has { background: var(--clay-bg); border-color: transparent; } .stat.conf.has strong { color: var(--clay-text); }
.fp { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.fp span { min-width: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reasons li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; align-items: flex-start; }
.reasons small.prods { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.r-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 1px; }
.r-ic .ic { width: 13px; height: 13px; stroke-width: 3; }
.r-good .r-ic { background: var(--leaf-bg); color: var(--leaf-text); }
.r-warn .r-ic { background: var(--amber-bg); color: var(--amber-text); }
.r-avoid .r-ic { background: var(--clay-bg); color: var(--clay-text); }
.r-info .r-ic { background: var(--surface-2); color: var(--muted); }
.ings { list-style: none; margin: 0; padding: 0; }
.ing { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.ings li:last-child .ing { border-bottom: 0; }
.ing-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; font-family: var(--brand); font-size: 14px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.ing.star .ing-ic { background: var(--leaf-bg); color: var(--leaf-text); }
.ing.watch .ing-ic { background: var(--amber-bg); color: var(--amber-text); }
.ing-main { display: grid; min-width: 0; flex: 1; }
.ing-main strong { font-weight: 800; font-size: 14.5px; }
.ing-main small { color: var(--muted); font-size: 12.5px; }
.ing-tag { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; flex: none; }
.ing.star .ing-tag { background: var(--leaf-bg); color: var(--leaf-text); }
.ing.watch .ing-tag { background: var(--amber-bg); color: var(--amber-text); }
.ing.unknown strong { font-weight: 600; }
.ing-n { font-size: 12px; color: var(--muted); width: 18px; flex: none; text-align: right; }
.ko-name { color: var(--muted); }
.price strong { font-size: 18px; }
.disclosure { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left, 0px)); background: var(--frost); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.sticky-bar > div { max-width: 528px; margin: 0 auto; display: flex; gap: 10px; }
.sticky-bar .btn { min-height: 54px; }
.sticky-bar .btn.primary { flex: 1.5; }
.sticky-bar .btn:not(.primary) { flex: 1; }

/* Avis */
.rev-sum { display: flex; align-items: center; gap: 12px; }
.avatars { display: flex; }
.avatars i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); }
.avatars i + i { margin-left: -10px; }
.rev-avg strong { font-size: 24px; font-weight: 800; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 14px; padding: 3px; }
.seg button { border: 0; background: none; padding: 8px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 800; }
.revs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.revs li { padding-top: 12px; border-top: 1px solid var(--line); }
.rev-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.rev-top small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.stars { color: var(--amber); letter-spacing: 1px; }
.revs p { font-size: 14.5px; margin-top: 4px; }
.rate { display: flex; gap: 6px; }
.rate button { width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 24px; color: var(--line); cursor: pointer; }
.rate button.on { color: var(--amber); border-color: var(--amber); }

/* Shopping */
.shop-total { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: 26px; padding: 18px; isolation: isolate; }
.shop-total .grain { z-index: -1; }
.shop-total .st-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.shop-total small { color: var(--glaze); font-size: 12.5px; font-weight: 700; }
.shop-total strong { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.shop-total .tx { font-size: 13px; color: var(--glaze); }
.shop-total .tx a { color: var(--yuja); font-weight: 800; }
.yuja-pill { background: var(--yuja); color: #141B18; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-total { background: #1F2925; color: #E8EFEB; } }
:root[data-theme="dark"] .shop-total { background: #1F2925; color: #E8EFEB; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px 10px 8px 8px; }
.checklist .cl-main { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.checklist .cl-main strong { font-size: 14.5px; font-weight: 800; }
.checklist .cl-main small { color: var(--muted); font-size: 12px; }
.checklist .done .cl-main strong { text-decoration: line-through; color: var(--muted); }
.checklist .done .thumb { opacity: .55; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 800; }
.qty span { min-width: 16px; text-align: center; font-weight: 800; font-size: 14px; }
.tax-out { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.staff-card { background: var(--surface); border: 2px solid var(--celadon); border-radius: 24px; padding: 18px; display: grid; gap: 10px; }
.staff-card .sc-top { display: flex; justify-content: space-between; align-items: center; }
.staff-card .sc-label { font-size: 12px; font-weight: 800; color: var(--celadon); }
.staff-card .sc-ko { font-family: "Noto Sans KR", var(--body); font-size: 20px; font-weight: 600; line-height: 1.55; }
.staff-card .sc-tr { font-size: 12.5px; color: var(--muted); }
.staff-card.big .sc-ko { font-size: 23px; }
.sc-hello { color: var(--celadon); font-family: var(--brand); }
.sc-prod { font-weight: 800; }
.say { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--ok-bg); color: var(--celadon); display: grid; place-items: center; cursor: pointer; }
.say .ic { width: 18px; height: 18px; }
.phrase-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phrase-chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 13px; font-family: "Noto Sans KR", var(--body); font-size: 14px; font-weight: 600; cursor: pointer; }
.phrases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.phrase { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.phrase .ic { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--celadon); }
.ph-ko { font-family: "Noto Sans KR", var(--body); font-size: 19px; font-weight: 600; }
.ph-rom { font-size: 13px; color: var(--muted); font-style: italic; }
.ph-tr { font-size: 14.5px; }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 14.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; min-height: 112px; }
.tile .ic { color: var(--celadon); margin-bottom: 4px; }
.tile strong { font-size: 15px; font-weight: 800; }
.tile small { color: var(--muted); font-size: 13px; line-height: 1.35; }

/* Lecteur de routine */
.player { display: grid; gap: 14px; text-align: center; justify-items: center; }
.player .p-tile { width: 150px; height: 170px; border-radius: 26px; }
.player .pl-step { font-size: 13px; font-weight: 800; color: var(--celadon); }
.player h2 { justify-content: center; font-size: 20px; }
.player p { color: var(--muted); font-size: 15px; max-width: 34ch; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--celadon); width: 20px; border-radius: 4px; }

/* Pass */
.pass-hero { position: relative; overflow: hidden; background: var(--night); color: #fff; border-radius: 28px; padding: 22px 18px; isolation: isolate; }
.pass-hero .grain { z-index: -1; }
.pass-hero .display { font-size: 26px; margin: 6px 0 8px; }
.pass-hero .eyebrow-k { color: var(--yuja); font-family: var(--brand); }
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.feat li { display: flex; gap: 8px; align-items: flex-start; }
.feat .ic { width: 18px; height: 18px; color: var(--leaf); margin-top: 3px; }
.card.plus { border: 2px solid var(--lilac); }
.plans { display: grid; gap: 10px; }
.plan { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; text-align: left; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.plan strong { font-size: 16px; font-weight: 800; }
.plan small { color: var(--muted); font-size: 13px; grid-column: 1; }
.plan-price { grid-row: 1 / 3; grid-column: 2; font-size: 20px; font-weight: 800; }
.plan.best { border: 2px solid var(--celadon); background: var(--ok-bg); }
.plan .badge { position: absolute; top: -10px; right: 14px; background: var(--persimmon); color: #141B18; }
.locked { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 26px 16px; }
.locked > .ic { width: 34px; height: 34px; color: var(--lilac); }
.sim strong { font-size: 22px; font-weight: 800; }

/* Feuille (bottom sheet) */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.sheet-bg { position: absolute; inset: 0; background: rgba(10, 16, 14, 0.45); opacity: 0; transition: opacity 0.2s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 90vh; overflow-y: auto;
  background: var(--paper); border-radius: 28px 28px 0 0; padding: 22px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left, 0px));
  transform: translateY(24px); opacity: 0; transition: transform 0.26s cubic-bezier(.2, .8, .2, 1), opacity 0.22s; }
.sheet > * + * { margin-top: 12px; }
.sheet h2 { padding-right: 40px; font-size: 20px; }
.sheet-wrap.open .sheet { transform: none; opacity: 1; }
.sheet-wrap.open .sheet-bg { opacity: 1; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; }
.sheet-x .ic { width: 18px; height: 18px; }
.loading-sheet { display: grid; justify-items: center; gap: 14px; padding: 24px 0; }
.spinner { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--celadon)); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.confirm-msg { font-size: 17px; padding-right: 40px; }

#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 60; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Compte & aide */
.acc-card { display: grid; gap: 10px; }
.acc-email { font-size: 19px; font-weight: 800; word-break: break-all; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.faq { border-top: 1px solid var(--line); padding: 10px 0; }
.faq:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 800; }
.faq p { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.legal h3 { margin-top: 18px; }
.legal ul { padding-left: 18px; display: grid; gap: 6px; }
.legal p, .legal li { font-size: 14.5px; }
.notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; }
.notice dt { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.notice dd { margin: 0; font-weight: 700; word-break: break-word; }
.fine a { color: var(--celadon); }

@media (min-width: 600px) {
  .view { padding-top: 24px; }
  .p-hero { margin-left: 0; margin-right: 0; border-radius: 28px; }
}
.thumb-tick { position: relative; border: 0; padding: 0; background: none; cursor: pointer; flex: none; border-radius: 15px; }
.thumb-tick .tt-on { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(46, 122, 101, .82); border-radius: 15px; color: #fff; }
.thumb-tick .tt-on .ic { width: 22px; height: 22px; stroke-width: 3; }
.checklist .cl-main strong { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- v4 : langue, mode, objectifs, ingrédients, guide ---------- */
.top { justify-content: flex-start; }
.top h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top-end { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 800 12px/1 var(--body); cursor: pointer; }
.lang-btn .ic { width: 17px; height: 17px; color: var(--celadon); }
.icon-round { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.icon-round .ic { width: 19px; height: 19px; }
.home-top .pp-mini { max-width: 46vw; }
.lang-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lang-row { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 16px var(--body); cursor: pointer; }
.lang-row.on { border-color: var(--celadon); background: var(--ok-bg); }
.lang-row .ic { width: 20px; height: 20px; color: var(--celadon); }
.ob-bar { display: flex; align-items: center; gap: 12px; }
.ob-bar .ob-progress { flex: 1; }
.tier { font-weight: 800; color: var(--celadon); letter-spacing: .02em; }
.hero .eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wx-place { display: inline-flex; align-items: center; gap: 4px; max-width: 55%; border: 0; border-radius: 999px; background: rgba(255,255,255,.72); color: #141B18; padding: 6px 10px; font: 800 12.5px var(--body); cursor: pointer; }
.wx-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-place .ic { width: 15px; height: 15px; flex: none; }
.btn.glass { background: rgba(255,255,255,.78); color: #141B18; border-color: transparent; }
.wx-ask { margin-top: 12px; }
.mode-seg { margin: 4px 0; }
.seg.mode-seg { display: flex; }
.seg.mode-seg button { flex: 1; }
.goals-rail .goal-tile { flex: 0 0 132px; }
.goal-tile { position: relative; display: grid; align-content: end; gap: 2px; min-height: 120px; padding: 14px; border-radius: 22px; text-decoration: none; color: #141B18; border: 1.5px solid transparent; text-align: left; font: inherit; cursor: pointer; }
.goal-tile.on { border-color: #2E7A65; box-shadow: 0 0 0 2px #2E7A65 inset; }
.goal-tile .gt-e { font-size: 26px; line-height: 1; position: absolute; top: 12px; left: 14px; }
.goal-tile strong { font-size: 15px; font-weight: 800; line-height: 1.2; }
.goal-tile small { font-size: 12px; color: #4B5550; line-height: 1.3; }
.goal-tile .badge { position: absolute; top: 10px; right: 10px; }
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-cta { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--night); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; }
.guide-cta > *:not(.grain) { position: relative; }
.guide-cta .grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.guide-cta .gc-ic { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex: none; }
.guide-cta .gc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.guide-cta strong { font-size: 16.5px; font-weight: 800; }
.guide-cta small { font-size: 13px; opacity: .88; }
.guide-cta.slim { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 12px 14px; }
.guide-cta.slim > .ic:first-child { color: var(--lilac); width: 26px; height: 26px; flex: none; }
.spot .sp-more { font-size: 12px; font-weight: 800; opacity: .9; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 52px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.search-box .ic { color: var(--muted); flex: none; }
.search-box input { border: 0; background: transparent; padding: 12px 0; flex: 1; min-width: 0; font-size: 16px; outline: none; box-shadow: none; }
#disc-res:empty { display: none; }
#disc-res h3 { margin-top: 14px; }
.ing-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ing-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ing-card .ing-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ing-card .ing-main small { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ing-card > .ic { color: var(--muted); flex: none; width: 18px; }
.ing-card .ing-ic { flex: none; }
.steps-explain .li-link { width: 100%; text-align: left; }
.steps-explain .li-link.on { background: var(--ok-bg); }
.steps-explain small[lang="ko"] { color: var(--muted); font-weight: 600; margin-left: 4px; }
.goal-hero, .ing-hero { position: relative; overflow: hidden; isolation: isolate; margin: -16px -16px 0; padding: 14px 18px 22px; color: #141B18; }
.goal-hero > *:not(.grain), .ing-hero > *:not(.grain):not(img) { position: relative; }
.goal-hero .grain, .ing-hero .grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.goal-hero .ph-top, .ing-hero .ph-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.goal-hero .back, .ing-hero .back { background: rgba(255,255,255,.75); color: #141B18; }
.goal-hero .gh-e { font-size: 44px; display: block; margin: 6px 0; }
.goal-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.goal-hero p { color: #3F4944; }
.eyebrow-k { font-family: var(--brand); font-size: 15px; opacity: .85; margin: 0; }
.ing-hero { background: var(--glass); min-height: 220px; display: flex; flex-direction: column; }
.ing-hero.has-photo { color: #fff; }
.ing-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ing-hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,21,19,.1), rgba(15,21,19,.7)); }
.ing-hero .ih-k { position: absolute; right: 16px; top: 56px; font-family: var(--brand); font-size: 96px; line-height: 1; opacity: .18; }
.ing-hero .ih-text { margin-top: auto; }
.ing-hero h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ing-hero.has-photo .eyebrow-k, .ing-hero.has-photo p { color: #fff; }
.chip.static { cursor: default; min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.chip.static.good { background: var(--leaf-bg); color: var(--leaf-text); border-color: transparent; }
.chip.static.warn { background: var(--amber-bg); color: var(--amber-text); border-color: transparent; }
a.chip { text-decoration: none; color: var(--ink); }
.label-names { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--surface-2); padding: 10px 12px; border-radius: 12px; margin: 0; word-break: break-word; }
.care h2 .ic { color: var(--amber); }
.care-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.care-list li { padding: 8px 12px; border-radius: 12px; background: var(--amber-bg); color: var(--amber-text); font-size: 14px; }
.care-list li .muted { color: inherit; opacity: .8; font-size: 13px; }
.goal-steps .step { align-items: flex-start; }
.goal-steps .step-main { display: grid; gap: 3px; }
.goal-steps .step-main strong { font-weight: 600; font-size: 14px; }
.eg::before { content: ""; }
.eyebrow-s { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 0; }
.guide-sum { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; color: #141B18; }
.guide-sum .gt-e { font-size: 30px; }
.guide-sum div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.guide-sum small { color: #4B5550; }
.guide-sum .link { color: #1F5C4C; }
.look-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.look-list a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--leaf-bg); color: var(--leaf-text); text-decoration: none; font-size: 14px; }
.look-list a span { font-size: 13px; opacity: .85; }
.st-row .st-h { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; margin: 2px 0; }
.buy-go { font-weight: 800; color: var(--celadon); }
.compare-plans table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-plans th, .compare-plans td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.compare-plans th:first-child, .compare-plans td:first-child { text-align: left; }
.compare-plans tr:last-child td { border-bottom: 0; }
.compare-plans th:last-child { color: var(--celadon); }
.plan-price small { font-size: 12px; font-weight: 600; opacity: .7; margin-left: 2px; }
.pass-hero > *:not(.grain) { position: relative; }
.pass-hero .grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Marque Kobi */
.wordmark { align-items: center; gap: 6px; color: var(--ink); }
.wordmark .logo { width: 28px; height: 28px; flex: none; }
.wordmark span { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.logo-xl { width: 72px; height: 72px; border-radius: 22px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.logo-xl .logo { width: 46px; height: 46px; }
.tagline { font-weight: 800; color: var(--celadon); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; margin: 4px 0 0; }
.tier i { font-style: normal; opacity: .28; }
.ing-hero > .ih-k { position: absolute; right: 18px; top: 60px; }
.ing-when { display: flex; gap: 8px; align-items: center; }
.compare-plans td:not(:first-child), .compare-plans th:not(:first-child) { white-space: nowrap; }
/* v5 : journal, sans, étagère */
.check-card .moods { display: flex; justify-content: space-between; gap: 6px; }
.moods button { flex: 1; height: 52px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); font-size: 26px; cursor: pointer; transition: transform .15s; }
.moods button.on { background: var(--glaze); border-color: var(--celadon); transform: scale(1.06); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-d { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 18px; }
.cal-d.now { outline: 2px solid var(--celadon); outline-offset: 1px; }
.jr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jr-list li { display: flex; gap: 12px; align-items: flex-start; }
.jr-list .jr-m { font-size: 24px; width: 32px; text-align: center; }
.jr-list span:last-child { display: grid; gap: 2px; }
.jr-list small { color: var(--muted); }
.free-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.free { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--leaf-bg); color: var(--leaf-text); font-size: 12.5px; font-weight: 800; }
.free .ic { width: 14px; height: 14px; }
.opened-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--body); text-align: left; cursor: pointer; }
.opened-row > span { flex: 1; }
.opened-row .ic { color: var(--muted); flex: none; }
.useby { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--celadon); font-size: 11.5px; font-weight: 800; }
.useby.soon { background: var(--amber-bg); color: var(--amber-text); }
.useby.late { background: var(--clay-bg); color: var(--clay-text); }
.step-main .useby { justify-self: start; }
.home-top { gap: 8px; }
.home-top .wordmark { flex: none; }
.home-top .top-end { min-width: 0; flex: 0 1 auto; }
.home-top .pp-mini { min-width: 0; max-width: none; flex: 0 1 auto; padding-right: 10px; }
.home-top .pp-mini i { width: 22px; height: 22px; }
.home-top .lang-btn span { display: none; }
.home-top .lang-btn { width: 36px; padding: 0; justify-content: center; }
.ing-hero .ih-k { position: absolute !important; right: 18px; top: 58px; left: auto; }
.hero .btn.glass { color: #141B18 !important; background: rgba(255,255,255,.82) !important; }
.ing-hero.has-photo { background: var(--dawn); }
#type-help { margin: -4px 0 10px; }
.rev-q { margin: 8px 0; }

/* ================= v6 : design épuré ================= */
:root { --shadow: 0 1px 2px rgba(20,27,24,.04), 0 4px 16px rgba(20,27,24,.04); --radius: 20px; }
h1, .top h1 { font-weight: 750; }
h2 { font-size: 17px; font-weight: 750; }
.view > * + * { margin-top: 12px; }
.card { border: 0; border-radius: var(--radius); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .pcard { box-shadow: none; } }
.pcard { border: 0; }
.grain { display: none !important; }

/* Météo : carte calme, chiffres alignés */
.hero { background: var(--surface); box-shadow: var(--shadow); padding: 16px 18px 18px; border-radius: var(--radius); }
.hero .eyebrow { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0; text-transform: none; }
.wx-place { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.hero-title { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; margin-top: 10px; }
.chips-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chips-row:empty { display: none; }
.wx-m { display: grid; gap: 2px; text-align: left; }
.wx-m + .wx-m { padding-left: 12px; border-left: 1px solid var(--line); }
.wx-m strong { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.wx-m span { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.dot.ok { background: var(--leaf); } .dot.mid { background: var(--amber); } .dot.bad { background: var(--clay); }
.wx-tip { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.hero .btn.glass { background: var(--surface-2) !important; color: var(--ink) !important; border: 0; min-height: 44px; flex: 1; }
.wx-ask { flex-wrap: nowrap; }

/* Scanner : une seule couleur, partout */
.scan-cta, :root[data-theme="dark"] .scan-cta { background: var(--celadon-solid, #2E7A65) !important; color: #fff !important; border-radius: var(--radius); padding: 14px 16px; }
.scan-cta small { color: rgba(255,255,255,.82) !important; }
.scan-cta .sq { background: rgba(255,255,255,.16); width: 44px; height: 44px; border-radius: 14px; }
.scan-cta strong { font-size: 16px; font-weight: 750; }

/* Routine, humeur */
.routine-card { padding: 14px 16px; }
.check-card .card-head h2 { font-size: 16px; }
.moods button { height: 46px; border: 0; background: var(--surface-2); font-size: 22px; border-radius: 14px; }
.moods button.on { background: var(--glaze); transform: none; box-shadow: inset 0 0 0 2px var(--celadon); }

/* Objectifs : teintes douces en clair, sobres en sombre */
.goal-tile { min-height: 108px; border-radius: 18px; }
.goal-tile .gt-e { font-size: 22px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .goal-tile, :root:not([data-theme="light"]) .guide-sum, :root:not([data-theme="light"]) .goal-hero { background: var(--surface) !important; color: var(--ink); } :root:not([data-theme="light"]) .goal-tile small, :root:not([data-theme="light"]) .guide-sum small, :root:not([data-theme="light"]) .goal-hero p { color: var(--muted); } }
:root[data-theme="dark"] .goal-tile, :root[data-theme="dark"] .guide-sum, :root[data-theme="dark"] .goal-hero { background: var(--surface) !important; color: var(--ink); }

/* Guide : carte claire avec accent lilas */
.guide-cta { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border-radius: var(--radius); padding: 14px 16px; }
.guide-cta .gc-ic { background: #EEEAF8; color: var(--lilac-deep); width: 44px; height: 44px; border-radius: 14px; }
.guide-cta small { color: var(--muted); opacity: 1; }
.guide-cta strong { font-size: 16px; font-weight: 750; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide-cta .gc-ic { background: #2A2748; color: #C9C0F2; } }
.guide-cta.slim { box-shadow: none; border: 0; }

/* Hauts de page pleins, sans dégradé chargé */
.set-hero { background: var(--celadon-deep) !important; border-radius: var(--radius); }
.set-hero.pm { background: #2B2650 !important; }
.shop-total { background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--shadow); border-radius: var(--radius); }
.shop-total small, .shop-total .tx { color: var(--muted) !important; }
.shop-total .tx a { color: var(--celadon); }
.shop-total .ring circle:first-child { stroke: var(--ring-track) !important; }
.shop-total .ring circle.ring-arc { stroke: var(--celadon) !important; }
.st-row .st-h { font-size: 17px; font-weight: 750; }
.pass-hero { background: #2B2650 !important; border-radius: var(--radius); }
.spot { border-radius: var(--radius); background: var(--celadon-deep); }

/* Barre d'onglets : plus fine */
.tabbar { border: 0; box-shadow: 0 6px 24px rgba(20,27,24,.10); }
.tab-scan { width: 54px; height: 54px; margin-top: -22px; box-shadow: 0 6px 16px rgba(46,122,101,.28); border-width: 3px; }
.tab span { font-weight: 650; }

/* En-tête */
.pp-mini { border: 0; background: var(--surface); box-shadow: var(--shadow); font-weight: 700; }
.lang-btn, .icon-round { border: 0; background: var(--surface); box-shadow: var(--shadow); }
.wordmark span { font-weight: 750; }
/* v6 bis */
.ing-hero { background: var(--surface) !important; color: var(--ink) !important; min-height: 0; padding-bottom: 20px; }
.ing-hero::after { display: none; }
.ing-hero .ih-k { color: var(--celadon); opacity: .14; font-size: 84px; }
.head-link { text-decoration: none; color: var(--ink); }
.head-link > .ic { color: var(--muted); width: 18px; height: 18px; flex: none; }
.stats3 .stat { background: var(--surface) !important; border: 0 !important; box-shadow: var(--shadow); }
.stats3 .stat.good strong { color: var(--leaf-text); } .stats3 .stat.warn strong { color: var(--amber-text); } .stats3 .stat.conf.has strong { color: var(--clay-text); }
.stats3 .stat span { color: var(--muted); }
.sticky-bar .btn { font-size: 15px; padding: 10px 12px; white-space: nowrap; }
.quota { display: block; line-height: 1.5; }
.scan-big.main { background: #2E7A65 !important; color: #fff !important; }
.scan-big.main .sq { background: rgba(255,255,255,.16); }
.scan-big { border: 0; box-shadow: var(--shadow); }
.goal-grid .goal-tile { min-height: 126px; padding-top: 44px; }
.btn.dark { background: var(--celadon-deep); color: #fff; }
.passport { box-shadow: none; }
.sticky-bar #add-set { flex: 1 1 auto; min-width: 0; }
.sticky-bar #add-shop { flex: 0 0 auto; }
.wx-ask { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.wx-ask .btn { width: 100%; }
.chip { white-space: nowrap; } .chip small { white-space: nowrap; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* Photos produits */
.p-tile, .p-hero { position: relative; }
.p-photo { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.p-hero .p-photo { inset: 60px 20% 20px; width: 60%; height: auto; max-height: 230px; margin: 0 auto; }
.p-art.hide { visibility: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-photo { mix-blend-mode: normal; border-radius: 12px; } }

/* Accueil : bienvenue + préférences */
.welcome { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 8px 4px; }
.welcome .logo-xl { width: 76px; height: 76px; }
.welcome .wm-name { font-weight: 800; font-size: 26px; letter-spacing: -0.04em; margin: 4px 0 0; }
.welcome .display { font-size: 26px; margin-top: 10px; }
.welcome .lead { color: var(--muted); font-size: 15px; max-width: 34ch; }
.prefs { padding: 6px 6px 12px; }
.prefs > * + * { margin-top: 0; }
.pref-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 10px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.pref-row + .pref-row { border-top: 1px solid var(--line); border-radius: 0; }
.pref-row > .ic:first-child, .pref-row > .flag { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--celadon); font-size: 20px; padding: 7px; box-sizing: border-box; }
.pref-row > span:not(.flag) { flex: 1; min-width: 0; display: grid; }
.pref-row small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pref-row strong { font-size: 16px; font-weight: 700; }
.pref-row > .ic:last-child { color: var(--muted); width: 18px; height: 18px; flex: none; }
.prefs .fine { padding: 0 10px; margin-top: 6px; }
.flag { font-size: 18px; line-height: 1; }
.lang-row .flag { margin-right: 4px; }

/* Ajout de produit */
.add-cta { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1.5px dashed var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.add-cta > .ic { width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 12px; background: var(--ok-bg); color: var(--celadon); flex: none; }
.add-cta span { display: grid; gap: 2px; }
.add-cta strong { font-size: 15px; font-weight: 750; }
.add-cta small { color: var(--muted); font-size: 13px; }
.grid2f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actives { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.actives li { display: flex; align-items: center; gap: 10px; }
.actives .an { width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--celadon); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.actives a { display: grid; text-decoration: none; color: var(--ink); min-width: 0; }
.actives strong { font-size: 14.5px; font-weight: 700; }
.actives small { font-size: 12px; color: var(--muted); }
.dup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dup { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dup .li-main { flex: 1; min-width: 0; display: grid; }
.dup small { color: var(--muted); font-size: 12px; }
.dup-cta { flex: none; font-size: 13px; font-weight: 800; color: var(--celadon); }
button.prow { width: 100%; border: 0; background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.tabbar { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.p-tile.has-photo { background: #fff !important; }
.p-tile.has-photo .p-photo { mix-blend-mode: normal; border-radius: 0; }
.p-hero.has-photo .p-photo { mix-blend-mode: normal; border-radius: 20px; background: #fff; }

/* ================= v8 : « clinique de luxe à Gangnam » ================= */
:root {
  --paper: #F7F3EE; --surface: #FFFFFF; --surface-2: #F1EBE4; --line: #E8E0D6;
  --ink: #2A2420; --muted: #857A70;
  --celadon: #8A6A4F; --celadon-deep: #3A2E27; --glaze: #EBDCCB; --on-celadon: #FFFFFF;
  --persimmon: #C8A27A; --persimmon-bg: #F6ECE1; --yuja: #D9B98A; --lilac: #A796B3; --lilac-deep: #6E5E7C;
  --leaf: #7E9B84; --leaf-text: #4F6B56; --leaf-bg: #EAF0EA;
  --amber: #C29A5B; --amber-text: #86622F; --amber-bg: #F6EDDF;
  --clay: #B9685E; --clay-text: #9A4C43; --clay-bg: #F6E6E2;
  --ok-bg: #F4EDE5; --ring-track: #ECE4DA;
  --glass: linear-gradient(160deg, #FBF8F4 0%, #F1E8DE 100%);
  --night: linear-gradient(160deg, #3A2E27 0%, #2A2420 100%);
  --dawn: linear-gradient(160deg, #3A2E27 0%, #57463A 100%);
  --btn: #2A2420; --on-btn: #FBF8F4; --gold: #B99068;
  --shadow: 0 1px 2px rgba(42,36,32,.04), 0 10px 30px rgba(42,36,32,.06);
  --serif: "Cormorant Garamond", "Noto Serif KR", "Noto Serif JP", "Noto Serif SC", "Songti SC", Georgia, serif;
  --radius: 22px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #13100E; --surface: #1C1815; --surface-2: #26201C; --line: #332B25; --ink: #F3ECE5; --muted: #A99D92;
  --celadon: #D9B88F; --celadon-deep: #2C241F; --glaze: #3A3027; --ok-bg: #241E1A; --ring-track: #332B25;
  --leaf-text: #A9C7AF; --leaf-bg: #1E2A21; --amber-text: #E5C48F; --amber-bg: #2E261A; --clay-text: #E9A79E; --clay-bg: #34201D;
  --btn: #E9D5BC; --on-btn: #1C1815; --glass: linear-gradient(160deg, #221C18, #1A1613); --shadow: none;
} }
:root[data-theme="dark"] { --paper: #13100E; --surface: #1C1815; --surface-2: #26201C; --line: #332B25; --ink: #F3ECE5; --muted: #A99D92; --celadon: #D9B88F; --celadon-deep: #2C241F; --glaze: #3A3027; --ok-bg: #241E1A; --ring-track: #332B25; --btn: #E9D5BC; --on-btn: #1C1815; }
body { background: var(--paper); }
h1, .top h1, .display, .hero-title, .goal-hero h1, .ing-hero h1, .welcome .wm-name, .wordmark span, .pass-hero .display, .lux-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.top h1 { font-size: 30px; }
h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.card h2, .sheet h2 { font-size: 21px; }
.hero-title { font-size: 23px; line-height: 1.25; font-weight: 600; }
.display { font-size: 34px; }
.wordmark span { font-size: 26px; font-weight: 600; letter-spacing: 0.01em; }
.eyebrow, .eyebrow-s, .pp-label, .lux-eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; color: var(--gold); }
.btn { border-radius: 999px; }
.btn.primary, .btn.dark { background: var(--btn); color: var(--on-btn); }
.btn.primary .ic, .btn.dark .ic { color: inherit; }
.chip.on, .seg button[aria-selected="true"], .seg2 button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); }
.scan-cta, :root[data-theme="dark"] .scan-cta { background: var(--btn) !important; color: var(--on-btn) !important; }
.scan-cta small { color: inherit !important; opacity: .75; }
.scan-cta .sq { background: rgba(185,144,104,.22) !important; color: var(--gold); }
.scan-big.main { background: var(--btn) !important; color: var(--on-btn) !important; }
.scan-big.main .sq { background: rgba(185,144,104,.22); color: var(--gold); }
.tab-scan { background: var(--btn); color: var(--on-btn); box-shadow: 0 8px 22px rgba(42,36,32,.22); border-color: var(--paper); }
.tab.on { color: var(--ink); }
.tab.on .ic { color: var(--gold); }
.set-hero, .set-hero.pm { background: var(--night) !important; }
.pass-hero { background: var(--night) !important; }
.pass-hero .eyebrow-k { color: var(--gold); }
.passport { background: var(--night); }
.passport .pp-tags li { background: rgba(233,213,188,.16); color: #F3E6D5; }
.spot { background: var(--night); }
.guide-cta .gc-ic { background: var(--ok-bg) !important; color: var(--gold) !important; }
.goal-tile.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.goal-tile strong { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.badge { background: var(--ok-bg); color: var(--celadon); }
.score-pill { background: rgba(255,255,255,.92); color: #2A2420; }
.link { color: var(--celadon); }
.tier { color: var(--gold); }
.free { background: var(--ok-bg); color: var(--celadon); }
.hero { background: var(--surface); }
.wx-m strong { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.ring-v { font-family: var(--serif); font-weight: 600; }
.pcard .name { font-weight: 700; }
.pcard .brand { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.lang-btn .ic { color: var(--gold); }
.pref-row > .ic:first-child, .pref-row > .flag { color: var(--gold); }
.add-cta > .ic { background: var(--ok-bg); color: var(--gold); }
.actives .an { background: var(--ok-bg); color: var(--celadon); }
.cal-d.now { outline-color: var(--gold); }
.moods button.on { background: var(--glaze); box-shadow: inset 0 0 0 2px var(--gold); }
.welcome .logo-xl { width: 88px; height: 88px; border-radius: 26px; background: none; box-shadow: none; }
.welcome .logo-xl svg { width: 88px; height: 88px; }
.wordmark .logo { width: 30px; height: 30px; }
/* Cartes photo « luxe » */
.lux-card { position: relative; display: flex; align-items: flex-end; min-height: 190px; border-radius: 26px; overflow: hidden; isolation: isolate; text-decoration: none; color: #FBF8F4; background: var(--night); border: 0; font: inherit; text-align: left; width: 100%; }
.lux-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lux-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,14,.05) 0%, rgba(20,16,14,.35) 45%, rgba(20,16,14,.82) 100%); }
.lux-card .lh-in, .lux-hero .lh-in { display: grid; gap: 4px; padding: 18px; width: 100%; }
.lux-card .lux-title { font-size: 27px; line-height: 1.1; color: #FBF8F4; }
.lux-card small { font-size: 13.5px; opacity: .88; }
.lux-card .lux-eyebrow { color: #E2C7A2; }
.lux-card > .ic { position: absolute; right: 16px; bottom: 18px; color: #E2C7A2; }
.store-hero { min-height: 260px; }
.store-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.store-btn { display: grid; gap: 1px; justify-items: center; padding: 11px 6px; border-radius: 16px; background: rgba(251,248,244,.94); color: #2A2420; text-decoration: none; text-align: center; }
.store-btn b { font-size: 14px; font-weight: 800; line-height: 1.15; }
.store-btn span { font-size: 12px; color: #8A6A4F; font-weight: 600; }
.skin-card { min-height: 170px; }
.lux-hero { position: relative; border-radius: 26px; overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; color: #FBF8F4; background: var(--night); isolation: isolate; }
.lux-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lux-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,14,0) 30%, rgba(20,16,14,.8) 100%); }
.lux-hero .lux-title { font-size: 28px; color: #FBF8F4; } .lux-hero .lux-eyebrow { color: #E2C7A2; } .lux-hero p { margin: 0; font-size: 14px; opacity: .9; }
.btn.big { min-height: 56px; font-size: 16.5px; }
.ob-sub { font-size: 15px; font-weight: 700; margin: 18px 0 8px; font-family: var(--body); }
/* Boutique */
.store-top { position: relative; margin: -16px -16px 0; min-height: 250px; display: flex; flex-direction: column; color: #FBF8F4; background: var(--night); isolation: isolate; overflow: hidden; }
.store-top > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.store-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,14,.35), rgba(20,16,14,.85)); }
.store-top .ph-top { display: flex; justify-content: space-between; padding: 14px 16px 0; }
.store-top .back { background: rgba(251,248,244,.9); color: #2A2420; border: 0; }
.store-top .lh-in { margin-top: auto; padding: 18px; display: grid; gap: 4px; }
.store-top h1 { font-size: 34px; color: #FBF8F4; }
.store-top .ko-soft { font-size: 20px; opacity: .8; font-family: var(--body); font-weight: 600; }
.store-top p { margin: 0; opacity: .9; font-size: 14px; }
.store-quick .btn { flex: 1; }
.shelves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shelf { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.shelf-main { display: flex; gap: 12px; padding: 12px 12px 6px; text-decoration: none; color: var(--ink); align-items: flex-start; }
.shelf-main .thumb { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.sh-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sh-txt small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.sh-txt strong { font-size: 15px; line-height: 1.25; }
.sh-ko { font-size: 15px; font-weight: 700; color: var(--celadon); }
.sh-why { font-size: 12.5px; color: var(--leaf-text); display: flex; gap: 4px; align-items: flex-start; line-height: 1.35; }
.sh-why .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.sh-end { display: grid; justify-items: end; gap: 4px; flex: none; }
.award { color: var(--gold); }
.sh-actions { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px 12px; }
.sh-actions .aisle { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-actions .aisle .ic { width: 13px; height: 13px; color: var(--gold); flex: none; }
.basket-card { min-height: 0; align-items: center; gap: 12px; padding: 16px; background: var(--btn); color: var(--on-btn); cursor: pointer; }
.basket-card::after { display: none; }
.basket-card span { display: grid; gap: 2px; flex: 1; } .basket-card strong { font-family: var(--serif); font-size: 21px; font-weight: 600; } .basket-card small { opacity: .8; font-size: 13px; }
.basket-card > .ic { position: static; color: var(--gold); }
.staff-card.big .sc-prod { font-size: 26px; }
.staff-card .sc-en { font-size: 13px; opacity: .7; }
.words { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.words li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
.words .w-ko { font-size: 18px; font-weight: 700; min-width: 34%; }
.words .w-tr { flex: 1; font-size: 14px; color: var(--muted); }
/* Scan de peau */
.sk-score { display: flex; align-items: center; gap: 16px; }
.sk-big { font-size: 26px; margin: 2px 0; }
.sk-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.skb-top { display: flex; justify-content: space-between; font-size: 14px; }
.skb-top span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.lv-good .skb-top span { color: var(--leaf-text); } .lv-mid .skb-top span { color: var(--amber-text); } .lv-focus .skb-top span { color: var(--clay-text); }
.skb { height: 7px; border-radius: 7px; background: var(--ring-track); margin: 6px 0 4px; overflow: hidden; }
.skb i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #D9BC97, #8C684A); }
.sk-bars small { color: var(--muted); font-size: 12.5px; }
.face-map { width: 110px; flex: none; }
.zone-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.zone-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.zl-shiny { background: #D9B98A; } .zl-normal { background: #A9C2AE; } .zl-dry { background: #B9C3CF; }
.trend { display: flex; gap: 8px; align-items: flex-end; height: 120px; }
.tr-col { flex: 1; display: grid; justify-items: center; align-content: end; gap: 4px; height: 100%; }
.tr-bar { width: 70%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #D9BC97, #A8825C); }
.tr-col small { font-size: 10.5px; color: var(--muted); } .tr-col b { font-size: 12px; }
.sk-cam { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.sk-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.sk-oval { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-cam-tip { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,.6); margin: 0; }
.sk-loading { text-align: center; padding: 30px 10px; }
.sk-pulse { width: 72px; height: 72px; margin: 0 auto 12px; animation: skp 1.4s ease-in-out infinite; }
.sk-pulse svg { width: 72px; height: 72px; }
@keyframes skp { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .7; } }
.quick8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.quick a i { background: var(--surface); border: 0; box-shadow: var(--shadow); color: var(--gold); border-radius: 50%; }
.goal-tile.has-ph { color: #FBF8F4 !important; overflow: hidden; isolation: isolate; background: var(--night) !important; }
.goal-tile.has-ph .gt-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.goal-tile.has-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,14,0) 25%, rgba(20,16,14,.75) 100%); }
.goal-tile.has-ph small { color: rgba(251,248,244,.85) !important; }
.goal-grid .goal-tile.has-ph { padding-top: 14px; min-height: 140px; }
.goal-tile.has-ph .badge { z-index: 1; }
.goal-hero.has-ph { color: #FBF8F4 !important; background: var(--night) !important; min-height: 280px; display: flex; flex-direction: column; }
.goal-hero.has-ph .gh-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.goal-hero.has-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,14,.15), rgba(20,16,14,.8)); }
.goal-hero.has-ph p, .goal-hero.has-ph .eyebrow-k { color: rgba(251,248,244,.9) !important; }
.goal-hero.has-ph .gh-e { display: none; }
.goal-hero.has-ph h1 { margin-top: auto; font-size: 36px; }
.welcome-ph { margin: -16px -16px 0; height: 190px; overflow: hidden; background: var(--glass); position: relative; }
.welcome-ph img { width: 100%; height: 100%; object-fit: cover; }
.welcome-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,243,238,0) 40%, var(--paper) 100%); }
.welcome { margin-top: -54px; position: relative; }
.view.onboard { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
.sk-big { font-size: 22px !important; line-height: 1.2; }
#toast { top: calc(14px + env(safe-area-inset-top)) !important; bottom: auto !important; z-index: 200 !important; }
.find-box { background: var(--surface-2); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.find-box .sh-ko.big { font-size: 20px; margin: 0; }
.find-box .aisle { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.find-box .aisle .ic { width: 14px; height: 14px; color: var(--gold); }
/* v9 : prix et valise */
.pc-out { display: grid; gap: 4px; }
.pc-big { font-family: var(--serif); font-size: 38px; font-weight: 600; margin: 0; line-height: 1.1; }
.pc-save { color: var(--leaf-text); font-weight: 700; margin: 0; } .pc-more { color: var(--amber-text); font-weight: 700; margin: 0; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pc-list li { display: grid; grid-template-columns: 1fr 86px 76px; gap: 8px; align-items: center; }
.pcl-name { display: grid; min-width: 0; } .pcl-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcl-name small { color: var(--muted); font-size: 12px; }
.pc-list input { padding: 9px 8px; font-size: 14px; min-width: 0; }
.pack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pk { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; line-height: 1.4; }
.pack-list li + li .pk { border-top: 1px solid var(--line); }
.pk-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; margin-top: 1px; }
.pk.on .pk-box { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.pk.on > span:last-child { color: var(--muted); text-decoration: line-through; }
.pk-box .ic { width: 14px; height: 14px; }
.pk-season { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
/* v10 : avis et conseils */
.voice-q { font-family: var(--serif); font-size: 17.5px; line-height: 1.4; margin: 0; }
.voice-fit { color: var(--leaf-text); font-size: 13.5px; font-weight: 700; display: flex; gap: 6px; align-items: center; margin: 0; }
.voice-fit .ic { width: 16px; height: 16px; }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plus, .minus, .derm-pts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.4; }
.plus li, .minus li, .derm-pts li { position: relative; padding-left: 18px; }
.plus li::before { content: "+"; position: absolute; left: 0; color: var(--leaf-text); font-weight: 800; }
.minus li::before { content: "–"; position: absolute; left: 0; color: var(--amber-text); font-weight: 800; }
.derm-pts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.voice-tip { display: flex; gap: 8px; align-items: flex-start; background: var(--surface-2); padding: 10px 12px; border-radius: 14px; font-size: 13.5px; margin: 0; }
.voice-tip .ic { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }
.src-links { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.6; }
.src-links a { color: var(--celadon); }
.derm .derm-why { color: var(--muted); font-size: 14px; margin: 0; }
.ev { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ev-strong { background: var(--leaf-bg); color: var(--leaf-text); } .ev-moderate { background: var(--amber-bg); color: var(--amber-text); } .ev-limited { background: var(--surface-2); color: var(--muted); }

/* v10 — fenêtre « Installer l'app » */
.instpop{position:fixed;inset:0;z-index:400;background:rgba(20,16,12,.42);display:flex;align-items:flex-end;justify-content:center;animation:ipf .2s}
.instpop.out{opacity:0;transition:opacity .2s}
@keyframes ipf{from{opacity:0}}@keyframes ipu{from{transform:translateY(40px);opacity:0}}@keyframes ipb{50%{transform:translate(-50%,6px)}}
.ip-card{position:relative;width:100%;max-width:480px;background:var(--surface);color:var(--ink);border-radius:26px 26px 0 0;padding:24px 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 60px rgba(0,0,0,.22);animation:ipu .28s cubic-bezier(.2,.9,.3,1.1)}
@media (min-width:560px){.instpop{align-items:center}.ip-card{border-radius:26px}}
.ip-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);font:inherit;font-weight:700;display:grid;place-items:center}
.ip-head{display:flex;gap:14px;align-items:center;padding-right:34px}
.ip-head img{width:64px;height:64px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.14);flex:none}
.ip-head b{display:block;font-family:var(--serif);font-size:1.4rem;line-height:1.15;font-weight:600}
.ip-head span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.ip-ben{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-weight:600;font-size:.95rem}
.ip-ben li{display:flex;gap:10px;align-items:center}.ip-ben svg{color:var(--brand,#B99068);flex:none}
.ip-go{appearance:none;width:100%;margin-top:18px;border:0;border-radius:999px;padding:16px;font:inherit;font-weight:700;font-size:1.05rem;background:var(--btn);color:var(--on-btn);display:flex;align-items:center;justify-content:center;gap:10px}
.ip-go img{width:22px;height:22px;border-radius:6px}
.ip-later{appearance:none;display:block;margin:10px auto 0;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;padding:8px 14px}
.ip-steps{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.ip-steps li{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:16px;padding:10px 12px}
.ip-n{width:24px;height:24px;border-radius:50%;background:var(--btn);color:var(--on-btn);font-weight:700;font-size:.8rem;display:grid;place-items:center;flex:none}
.ip-ic{width:40px;height:40px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:#0A84FF;flex:none}
.ip-steps b{display:block;font-size:.95rem;line-height:1.25}.ip-steps small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.ip-arrow{position:fixed;left:50%;bottom:calc(6px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:1.8rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);animation:ipb 1s ease-in-out infinite;pointer-events:none}
.instpop.has-arrow .ip-card{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* ==========================================================================
   v11 — « Doux et minimal » : crème, rose poudré, pêche ; police Pretendard ;
   plus de blocs sombres, plus d'air, moins d'ornements.
   ========================================================================== */
:root {
  --paper: #FFFBF8; --surface: #FFFFFF; --surface-2: #FBF3EF; --line: #F1E6E1;
  --ink: #2B2326; --muted: #8D8085;
  --accent: #D9677A; --accent-soft: #FBE6E9; --peach-soft: #FDEEE4; --mint-soft: #E9F5EF; --lilac-soft: #F1EEFA; --sky-soft: #EAF3FB; --butter-soft: #FCF5DF;
  --celadon: #C8566B; --celadon-deep: #2B2326; --glaze: #FBE6E9; --on-celadon: #FFFFFF; --gold: #D9677A;
  --leaf: #6FAE8F; --leaf-text: #3E7C5E; --leaf-bg: #E9F5EF;
  --amber: #E0A458; --amber-text: #9A6A22; --amber-bg: #FCF3E3;
  --clay: #D9677A; --clay-text: #B14257; --clay-bg: #FBE6E9;
  --ok-bg: #FBF3EF; --ring-track: #F3E8E4;
  --glass: linear-gradient(160deg, #FFF6F3 0%, #FBE6E9 100%);
  --night: linear-gradient(150deg, #FDEEF0 0%, #FBE3E7 100%);
  --dawn: linear-gradient(150deg, #FFF3EA 0%, #FCE6EA 100%);
  --btn: #2B2326; --on-btn: #FFFFFF;
  --shadow: 0 1px 2px rgba(43,35,38,.03), 0 6px 20px rgba(43,35,38,.05);
  --body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Noto Sans JP", "PingFang SC", "Noto Sans SC", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: var(--body); --brand: var(--body);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #161214; --surface: #1F1A1C; --surface-2: #2A2326; --line: #342C2F; --ink: #F6EEF0; --muted: #A99BA0;
  --accent: #F2A1AE; --accent-soft: #3A2529; --peach-soft: #36281F; --mint-soft: #1E2E27; --lilac-soft: #29253A; --sky-soft: #1F2935; --butter-soft: #33301F;
  --celadon: #F2A1AE; --celadon-deep: #F6EEF0; --glaze: #3A2529; --gold: #F2A1AE;
  --leaf-text: #9FD4B8; --leaf-bg: #1E2E27; --amber-text: #F0C98A; --amber-bg: #332818; --clay-text: #F4A3B0; --clay-bg: #3A2529;
  --ok-bg: #2A2326; --ring-track: #342C2F; --btn: #F6EEF0; --on-btn: #1F1A1C;
  --glass: linear-gradient(160deg, #2A2326, #1F1A1C); --night: linear-gradient(150deg, #2E2226, #241C1F); --dawn: linear-gradient(150deg, #30251F, #2A2023); --shadow: none;
} }
:root[data-theme="dark"] {
  --paper: #161214; --surface: #1F1A1C; --surface-2: #2A2326; --line: #342C2F; --ink: #F6EEF0; --muted: #A99BA0;
  --accent: #F2A1AE; --accent-soft: #3A2529; --peach-soft: #36281F; --mint-soft: #1E2E27; --lilac-soft: #29253A; --sky-soft: #1F2935; --butter-soft: #33301F;
  --celadon: #F2A1AE; --celadon-deep: #F6EEF0; --glaze: #3A2529; --gold: #F2A1AE; --ok-bg: #2A2326; --ring-track: #342C2F; --btn: #F6EEF0; --on-btn: #1F1A1C;
  --glass: linear-gradient(160deg, #2A2326, #1F1A1C); --night: linear-gradient(150deg, #2E2226, #241C1F); --dawn: linear-gradient(150deg, #30251F, #2A2023); --shadow: none;
}
html, body, button, input, select, textarea { font-family: var(--body); }
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
h1, h2, h3, .top h1, .display, .hero-title, .goal-hero h1, .ing-hero h1, .welcome .wm-name, .pass-hero .display, .lux-title, .goal-tile strong, .wx-m strong, .ring-v, .basket-card strong, .voice-q, .ip-head b { font-family: var(--body) !important; letter-spacing: -0.025em; }
.top h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
.card h2, .sheet h2 { font-size: 17px; font-weight: 700; }
.display { font-size: 28px; font-weight: 700; }
.hero-title { font-size: 20px; font-weight: 700; }
.eyebrow, .eyebrow-s, .pp-label, .lux-eyebrow, .dm .lux-eyebrow { letter-spacing: .02em; text-transform: none; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.wordmark { gap: 8px; }
.wordmark .logo { width: 30px; height: 30px; }
.wordmark span { font-family: var(--body) !important; font-size: 23px; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.card, .pcard, .shelf, .words li { box-shadow: none !important; border: 1px solid var(--line); }
.card { border-radius: 20px; }
.btn { border-radius: 14px; font-weight: 700; }
.btn.primary, .btn.dark { background: var(--btn); color: var(--on-btn); }
.chip { border-radius: 999px; }
.chip.on, .seg button[aria-selected="true"], .seg2 button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); }
.link { color: var(--accent); font-weight: 600; }
.pp-mini { border-color: var(--line); font-weight: 600; }
.pp-mini i { background: linear-gradient(135deg, #F9D3D8, #EE9EAA); }
.lang-btn .ic, .pref-row > .ic:first-child, .pref-row > .flag, .add-cta > .ic { color: var(--accent); }
/* Toutes les grandes cartes photo deviennent des cartes pastel, sans photo */
.lux-card, .lux-hero, .store-top, .spot { background: var(--night) !important; color: var(--ink) !important; min-height: 0 !important; border: 0; }
.lux-card > img, .lux-hero > img, .lux-hero img, .store-top > img, .spot > img, .welcome-ph { display: none !important; }
.lux-card::after, .lux-hero::after, .store-top::after { display: none !important; }
.lux-card .lux-title, .lux-hero .lux-title, .store-top h1 { color: var(--ink) !important; font-weight: 700; font-size: 24px; line-height: 1.2; }
.lux-card small, .lux-hero p, .store-top p { color: var(--muted); opacity: 1 !important; }
.lux-card .lux-eyebrow, .lux-hero .lux-eyebrow { color: var(--accent) !important; }
.lux-card > .ic { color: var(--accent); }
.lux-card .lh-in, .lux-hero .lh-in { padding: 20px; }
.store-hero { border-radius: 24px !important; }
.store-picks { gap: 8px; margin-top: 14px; }
.store-btn { background: var(--surface) !important; color: var(--ink) !important; border-radius: 14px; padding: 12px 6px; box-shadow: 0 1px 2px rgba(43,35,38,.05); }
.store-btn b { font-weight: 700; font-size: 14px; }
.store-btn span { color: var(--muted) !important; font-weight: 500; }
.store-top { margin: -16px -16px 0 !important; border-radius: 0 0 28px 28px; padding-bottom: 4px; }
.store-top .back { background: var(--surface) !important; }
.store-top .ko-soft { color: var(--muted); opacity: 1; }
.skin-card { background: var(--dawn) !important; }
.basket-card { background: var(--btn) !important; color: var(--on-btn) !important; }
.basket-card > .ic { color: inherit !important; }
/* Accueil : raccourcis */
.qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0; }
.qa a { display: grid; justify-items: center; gap: 7px; text-decoration: none; color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: center; min-width: 0; }
.qa a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa i { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; }
.qa i .ic { width: 24px; height: 24px; }
.qa-blush { background: var(--accent-soft); color: var(--accent); } .qa-peach { background: var(--peach-soft); color: #D27A4E; } .qa-mint { background: var(--mint-soft); color: #3E8C69; } .qa-lilac { background: var(--lilac-soft); color: #7A67BF; }
.skin-mini, .spot-mini { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.skin-mini .rc-main, .spot-mini .rc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.skin-mini small, .spot-mini small { color: var(--muted); font-size: 13px; }
.spot-mini .rc-main small:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--peach-soft); color: #C2653A; font-weight: 800; font-size: 18px; flex: none; }
.spm-k { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--lilac-soft); color: #7A67BF; font-weight: 700; font-size: 17px; flex: none; }
.routine-card > .ic { color: var(--muted); }
/* Objectifs : tuiles pastel, sans photo ni émoji */
.goal-tile { min-height: 92px !important; border: 0 !important; color: var(--ink) !important; background: var(--accent-soft) !important; padding: 14px !important; }
.goal-tile .gt-ph, .goal-tile .gt-e, .goal-tile > img { display: none !important; }
.goal-tile::after, .goal-tile::before { display: none !important; }
.goal-tile strong { font-size: 15.5px !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.25; }
.goal-tile small { color: var(--muted) !important; }
.goals-rail .goal-tile:nth-child(5n+2), .goal-grid .goal-tile:nth-child(5n+2) { background: var(--peach-soft) !important; }
.goals-rail .goal-tile:nth-child(5n+3), .goal-grid .goal-tile:nth-child(5n+3) { background: var(--mint-soft) !important; }
.goals-rail .goal-tile:nth-child(5n+4), .goal-grid .goal-tile:nth-child(5n+4) { background: var(--lilac-soft) !important; }
.goals-rail .goal-tile:nth-child(5n+5), .goal-grid .goal-tile:nth-child(5n+5) { background: var(--sky-soft) !important; }
.goal-tile.on { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.goal-hero, .ing-hero { background: var(--night) !important; color: var(--ink) !important; }
.goal-hero img, .ing-hero img { display: none !important; }
.goal-hero h1, .goal-hero p, .ing-hero h1, .ing-hero p, .goal-hero .eyebrow-k, .ing-hero small { color: var(--ink) !important; }
/* Produits */
.pcard { border-radius: 18px; padding: 6px; }
.pcard .p-tile { height: 140px; border-radius: 14px; }
.pcard .brand { font-size: 10.5px; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.pcard .name { font-weight: 600; font-size: 13.5px; }
.pcard .price { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.p-tile .p-art { filter: drop-shadow(0 8px 12px rgba(43,35,38,.08)); }
.score-pill { background: var(--surface) !important; color: var(--ink) !important; font-weight: 700; box-shadow: 0 1px 3px rgba(43,35,38,.08); }
.tier { color: var(--accent); }
.badge, .free, .actives .an { background: var(--accent-soft); color: var(--accent); }
/* Héros sombres → pastel */
.set-hero, .set-hero.pm, .set-hero.am, .pass-hero, .passport { background: var(--night) !important; color: var(--ink) !important; }
.set-hero.am { background: var(--dawn) !important; }
.set-hero .ring-v, .set-hero .sh-text small, .pass-hero .display, .passport h2, .passport p, .passport strong, .passport small, .passport span { color: var(--ink) !important; opacity: 1; }
.set-hero .sh-text small, .passport small { color: var(--muted) !important; }
.passport .pp-tags li { background: var(--surface) !important; color: var(--ink) !important; }
.pass-hero .eyebrow-k { color: var(--accent); }
/* Barre d'onglets */
.tabbar, .tabs { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-top: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tab { font-weight: 600; }
.tab.on { color: var(--ink); }
.tab.on .ic { color: var(--accent) !important; }
.tab-scan { background: var(--btn) !important; color: var(--on-btn) !important; box-shadow: 0 6px 18px rgba(43,35,38,.18) !important; border-color: var(--paper) !important; }
.scan-cta, :root[data-theme="dark"] .scan-cta, .scan-big.main { background: var(--btn) !important; color: var(--on-btn) !important; }
.scan-cta .sq, .scan-big.main .sq { background: rgba(255,255,255,.14) !important; color: inherit !important; }
.guide-cta .gc-ic { background: var(--accent-soft) !important; color: var(--accent) !important; }
/* Bienvenue */
.welcome .logo-xl, .welcome .logo-xl svg { width: 80px; height: 80px; }
.welcome .wm-name { font-weight: 800; letter-spacing: -0.045em; }
/* Scan de peau : barres et tendances en rose */
.skb i, .tr-bar { background: linear-gradient(90deg, #F6C1C9, #E2808F) !important; }
.sk-pulse .logo { width: 64px; height: 64px; }
/* Outils (« Plus ») */
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tool-list a { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); }
.tool-list i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.tool-list li:nth-child(4n+2) i { background: var(--peach-soft); color: #D27A4E; } .tool-list li:nth-child(4n+3) i { background: var(--mint-soft); color: #3E8C69; } .tool-list li:nth-child(4n+4) i { background: var(--lilac-soft); color: #7A67BF; }
.tool-list span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tool-list strong { font-size: 15px; font-weight: 700; } .tool-list small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tool-list a > .ic { color: var(--muted); flex: none; }
/* Conseils / avis */
.derm { background: var(--surface); }
.voice-q { font-size: 16px !important; font-weight: 600; line-height: 1.45; }
.ev { border-radius: 999px; }
.ip-ben svg { color: var(--accent); }
.ip-go { border-radius: 14px; }
.ip-head b { font-size: 1.25rem; font-weight: 700; }
.p-tile { background: var(--surface-2) !important; }
.pcard .p-tile, .prod-hero .p-tile { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, var(--line))) !important; }
.sh-ko { font-weight: 600; color: var(--accent); }
.goal-hero, .goal-hero.has-ph { min-height: 0 !important; background: var(--night) !important; color: var(--ink) !important; }
.goal-hero.has-ph::after { display: none !important; }
.goal-hero .gh-ph, .goal-hero .gh-e { display: none !important; }
.goal-hero.has-ph h1 { margin-top: 18px; font-size: 28px; color: var(--ink) !important; }
.goal-hero.has-ph p, .goal-hero.has-ph .eyebrow-k { color: var(--muted) !important; }
.set-hero .seg2 { background: rgba(255,255,255,.7); }
.set-hero .seg2 button { color: var(--muted); }
.set-hero .seg2 button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); }
.set-hero .ring-arc { stroke: var(--accent); }
.set-hero .ring circle:first-child { stroke: rgba(255,255,255,.75); }
/* v11 — Routine sur mesure (accueil) */
.rt-hero { background: var(--night); border-radius: 24px; padding: 20px 16px 16px; display: grid; gap: 4px; }
.rt-h { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin: 0; line-height: 1.2; }
.rt-sub { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.rt-main { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--btn); color: var(--on-btn); text-decoration: none; }
.rt-main .rt-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.rt-main .rt-tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .rt-main strong { font-size: 16px; font-weight: 700; } .rt-main small { font-size: 12.5px; opacity: .78; }
.rt-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rt-alt a { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.rt-alt a > span:last-child { display: grid; gap: 1px; min-width: 0; } .rt-alt strong { font-size: 13.5px; font-weight: 700; line-height: 1.2; } .rt-alt small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.rt-ic2 { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.rt-ic2 .ic { width: 18px; height: 18px; }
.rt-last { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; justify-self: start; }
.rt-last .ic { width: 16px; height: 16px; }
.set-consult { margin: 4px 0 8px; }
/* Consultation */
.cs-intro { display: grid; gap: 10px; padding-top: 8px; }
.cs-badge { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cs-badge .ic { width: 30px; height: 30px; }
.cs-h { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.18; margin: 0; }
.cs-how { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 10px; }
.cs-how li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; font-weight: 500; }
.cs-how .ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--accent); flex: none; box-sizing: border-box; }
.cs-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cs-prog { flex: 1; height: 6px; border-radius: 6px; background: var(--ring-track); overflow: hidden; }
.cs-prog i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #F6C1C9, var(--accent)); transition: width .3s ease; }
.cs-n { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-sec { margin: 0 0 6px; }
.cs-q { font-size: 23px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.28; margin: 0 0 10px; }
.cs-why { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.45; }
.cs-why .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.cs-opts { display: grid; gap: 10px; }
.cs-opt { appearance: none; display: grid; gap: 2px; text-align: left; padding: 17px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.cs-opt strong { font-size: 16px; font-weight: 650; } .cs-opt small { font-size: 13px; color: var(--muted); }
.cs-opt:active { transform: scale(.985); }
.cs-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cs-next { margin-top: 18px; }
.cs-next[disabled] { opacity: .4; }
.cl-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.cl-steps li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--muted); transition: color .3s; }
.cl-steps li .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ring-track); color: transparent; box-sizing: border-box; transition: all .3s; }
.cl-steps li.on { color: var(--ink); } .cl-steps li.on .ic { background: var(--accent); color: #fff; }
/* Résultat */
.cr-sum { background: var(--night); border-radius: 24px; padding: 20px 18px; display: grid; gap: 6px; }
.cr-sum .lead { margin: 0 0 6px; color: var(--muted); }
.chip.on-soft { background: var(--surface); color: var(--ink); border: 0; font-weight: 600; }
.cr-flag { display: flex; gap: 12px; align-items: flex-start; background: var(--amber-bg); border-color: transparent; }
.cr-flag > .ic { color: var(--amber-text); flex: none; margin-top: 2px; } .cr-flag p { margin: 4px 0 6px; font-size: 13.5px; color: var(--muted); }
.cr-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.cr-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.cr-list .cr-step:first-child { border-top: 0; }
.cr-step .thumb { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.cr-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cr-main small { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cr-main a { color: var(--ink); text-decoration: none; } .cr-main strong { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.cr-why { margin: 2px 0 0; font-size: 13px; color: var(--leaf-text); line-height: 1.4; }
.cr-swap { flex: none; color: var(--muted); }
.cr-treat { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--lilac-soft); }
.cr-treat .cr-step { border: 0; padding: 6px 0; }
.cr-cta { display: grid; gap: 8px; margin: 6px 0; }
.cr-alt { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
/* Affichage */
.disp { display: grid; gap: 8px; margin-bottom: 8px; }
.disp .pp-label { margin: 6px 0 0; }
.disp-seg { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.disp-seg button { min-height: 42px; border-radius: 11px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 650; display: grid; place-items: center; }
.disp-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(43,35,38,.1); }
.disp-h2 { margin-top: 14px; }
/* v12 — Kobi Premium */
.pm-hero { background: var(--night); border-radius: 24px; padding: 22px 18px; display: grid; gap: 8px; }
.pm-hero .lead { margin: 0; color: var(--muted); }
.pm-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; font-size: 15px; }
.pm-mark .logo { width: 28px; height: 28px; }
.pm-mark span { background: var(--btn); color: var(--on-btn); padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .02em; }
.pm-mark.small .logo { width: 24px; height: 24px; }
.pk2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk2 li { display: flex; gap: 12px; align-items: center; }
.pk2-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.pk2-ic .ic { width: 19px; height: 19px; }
.pk2 strong { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; } .pk2 small { color: var(--muted); font-size: 12px; }
.pl-cards { display: grid; gap: 10px; margin: 6px 0 12px; }
.pl-card { appearance: none; position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pl-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pl-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; box-sizing: border-box; }
.pl-card.on .pl-radio { border: 6px solid var(--ink); }
.pl-tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .pl-tx strong { font-size: 15.5px; font-weight: 700; } .pl-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.pl-pr { display: grid; justify-items: end; text-align: right; flex: none; gap: 1px; } .pl-pr b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pl-pr small { font-size: 11.5px; color: var(--muted); } .pl-pr .pl-eq { color: var(--leaf-text); font-weight: 600; } .pl-pr .pl-ap { font-size: 11px; }
.pl-badge { position: absolute; top: -10px; left: 14px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .01em; }
.pl-badge.soft { background: var(--mint-soft); color: var(--leaf-text); }
.pl-go { margin-top: 2px; }
.pl-fine { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.45; margin: 10px 2px 0; }
.pl-fine .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.pm-free { background: var(--mint-soft); border-color: transparent; } .pm-free .pp-label { color: var(--leaf-text); } .pm-free p.small { margin: 4px 0 0; line-height: 1.5; }
.faq { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .faq strong { font-size: 14.5px; } .faq p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.pw { display: grid; gap: 8px; }
.pw-h { font-size: 21px !important; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 0; line-height: 1.25; }
.pw .pk2 { margin: 8px 0 4px; }
.pw-more { justify-self: center; font-size: 13.5px; margin-top: 4px; }
.cr-swap.locked { color: var(--accent); }
/* Liste recommandée */
.store-chip { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--night); color: var(--ink); text-decoration: none; }
.store-chip > .ic:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--surface); color: var(--accent); box-sizing: border-box; flex: none; }
.store-chip span { flex: 1; min-width: 0; display: grid; gap: 1px; } .store-chip strong { font-size: 15px; } .store-chip small { font-size: 12.5px; color: var(--muted); }
.shop-total { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line); }
.shop-total .ring-arc { stroke: var(--accent); } .shop-total .ring circle:first-child { stroke: var(--ring-track); } .shop-total .ring-v { color: var(--ink) !important; }
.shop-total small, .shop-total .tx { color: var(--muted) !important; } .shop-total .st-h { color: var(--ink) !important; } .shop-total a { color: var(--accent); }
.rec-list > p.small { margin: 0 0 8px; }
.rl-items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
.rl-items li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rl-items li:first-child { border-top: 0; }
.rl-items .thumb { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.rl-main { flex: 1; min-width: 0; display: grid; gap: 1px; color: var(--ink); text-decoration: none; }
.rl-main small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .rl-main strong { font-size: 14px; line-height: 1.3; }
.rl-why { font-size: 12.5px; color: var(--leaf-text); line-height: 1.35; }
.rl-add { flex: none; background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 12px; }
.rl-consult { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; }
/* Logo « perle » : le o de kobi est une goutte de rosée (peau de verre) */
.wm { display: inline-flex; align-items: baseline; font-family: var(--body); font-weight: 800; letter-spacing: -0.055em; color: var(--ink); line-height: 1; }
.wm-o { display: inline-block; width: .64em; height: .64em; margin: 0 .025em 0 .01em; transform: translateY(.05em); font-style: normal; }
.wm-o .logo, .wm-o svg { width: 100% !important; height: 100% !important; display: block; filter: drop-shadow(0 2px 3px rgba(226,135,154,.35)); }
.wordmark .wm { font-size: 27px; }
.wordmark > .logo { display: none; }
.welcome .wm-name .wm { font-size: 46px; }
.welcome .logo-xl { width: 96px !important; height: 96px !important; border-radius: 50%; box-shadow: 0 18px 40px rgba(226,135,154,.28); }
.welcome .logo-xl svg { width: 96px !important; height: 96px !important; }
.pm-mark .wm { font-size: 22px; } .pm-mark.small .wm { font-size: 19px; }
.sk-pulse .logo { width: 72px !important; height: 72px !important; animation: orbp 1.6s ease-in-out infinite; }
@keyframes orbp { 50% { transform: scale(1.08); filter: drop-shadow(0 8px 18px rgba(226,135,154,.45)); } }
.pp-mini i { background: radial-gradient(circle at 34% 28%, #fff 0%, #FCDDE2 32%, #F3A9B6 72%, #E2879A 100%) !important; }
.btn.wide { width: 100%; justify-content: center; }
.more-h { margin: 18px 4px 8px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.more-h:first-of-type { margin-top: 4px; }
.pm-mark > span:not(.wm) { background: var(--btn); color: var(--on-btn); padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .02em; font-weight: 700; }
.pm-mark > .wm { background: none !important; color: var(--ink) !important; padding: 0 !important; border-radius: 0; letter-spacing: -0.055em !important; }
.cr-swap { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; overflow: hidden; } .cr-swap .ic { width: 18px; height: 18px; }
.store-quick .btn { font-size: 14px; line-height: 1.2; padding-left: 10px; padding-right: 10px; }
@media (max-width: 350px) { .store-quick { flex-direction: column; } .store-quick .btn { width: 100%; } }
.disp-seg button { font-size: 13.5px; white-space: nowrap; padding: 0 4px; }
.goal-tile.has-ph small, .goal-tile small { color: var(--muted) !important; }
.goal-tile.has-ph { color: var(--ink) !important; }
.welcome { padding-top: 40px !important; margin-top: 0 !important; }
.welcome .logo-xl { margin: 0 auto 6px !important; position: static !important; transform: none !important; background: none !important; }
/* v13 — dupes, promos Olive Young, invitation */
.pl-badge.static { position: static; }
.dupes .rl-items { margin-bottom: 8px; }
.dp-locked { position: relative; }
.dp-locked .rl-main, .dp-locked .thumb, .dp-locked .sc { filter: blur(4px); opacity: .6; pointer-events: auto; }
.sale-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--butter-soft); }
.sale-card.now { background: var(--accent-soft); }
.sale-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: #C98A1E; flex: none; }
.sale-card.now .sale-ic { color: var(--accent); }
.sale-card > div { display: grid; gap: 2px; min-width: 0; }
.sale-k { margin: 0; font-size: 12px; font-weight: 700; color: #A9741B; } .sale-card.now .sale-k { color: var(--accent); }
.sale-card strong { font-size: 15px; } .sale-card strong span { font-weight: 600; color: var(--muted); font-size: 13px; margin-left: 4px; }
.sale-card small { font-size: 12.5px; color: var(--muted); line-height: 1.4; } .sale-n { font-size: 11.5px !important; margin-top: 2px; }
.invite-card { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; margin: 4px 0 6px; border: 0; border-radius: 18px; background: var(--night); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.invite-card > .ic:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--surface); color: var(--accent); box-sizing: border-box; flex: none; }
.invite-card span { flex: 1; min-width: 0; display: grid; gap: 1px; } .invite-card strong { font-size: 15px; } .invite-card small { font-size: 12.5px; color: var(--muted); }
:root[data-theme="dark"] .sale-ic, :root[data-theme="dark"] .sale-k { color: #F0C98A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sale-ic, :root:not([data-theme="light"]) .sale-k { color: #F0C98A; } }
/* Icônes des objectifs */
.goal-tile { position: relative; min-height: 118px !important; padding-top: 58px !important; }
.goal-tile .gt-ic { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.72); color: var(--accent); }
.goal-tile .gt-ic .ic { width: 21px; height: 21px; }
.goals-rail .goal-tile:nth-child(5n+2) .gt-ic, .goal-grid .goal-tile:nth-child(5n+2) .gt-ic { color: #D27A4E; }
.goals-rail .goal-tile:nth-child(5n+3) .gt-ic, .goal-grid .goal-tile:nth-child(5n+3) .gt-ic { color: #3E8C69; }
.goals-rail .goal-tile:nth-child(5n+4) .gt-ic, .goal-grid .goal-tile:nth-child(5n+4) .gt-ic { color: #7A67BF; }
.goals-rail .goal-tile:nth-child(5n+5) .gt-ic, .goal-grid .goal-tile:nth-child(5n+5) .gt-ic { color: #4F7FAD; }
.goal-hero .gh-ic { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: rgba(255,255,255,.75); color: var(--accent); margin-top: 6px; }
.goal-hero .gh-ic .ic { width: 27px; height: 27px; }
:root[data-theme="dark"] .goal-tile .gt-ic, :root[data-theme="dark"] .goal-hero .gh-ic { background: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .goal-tile .gt-ic, :root:not([data-theme="light"]) .goal-hero .gh-ic { background: rgba(255,255,255,.08); } }
/* Carte « Consultation peau » : rose perle au lieu du noir */
.rt-main { background: linear-gradient(135deg, #EE93A4 0%, #D9677A 55%, #CB5A70 100%) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(217,103,122,.28); }
.rt-main .rt-ic { background: rgba(255,255,255,.22) !important; color: #fff; }
.rt-main small { opacity: .9 !important; }
.rt-main > .ic:last-child { color: #fff; }

/* ==========================================================================
   v14 — Plus aucun bloc noir : les boutons et éléments forts passent au rose perle
   ========================================================================== */
:root {
  --btn: #CC5A70; --on-btn: #FFFFFF;
  --btn-grad: linear-gradient(135deg, #EE93A4 0%, #D9677A 55%, #C9566C 100%);
  --btn-soft: #FBE6E9; --on-btn-soft: #B14257;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --btn: #E98A9C; --on-btn: #2A171C; --btn-grad: linear-gradient(135deg, #F3A7B5 0%, #E98A9C 60%, #DC7489 100%); --btn-soft: #3A2529; --on-btn-soft: #F4A3B0; } }
:root[data-theme="dark"] { --btn: #E98A9C; --on-btn: #2A171C; --btn-grad: linear-gradient(135deg, #F3A7B5 0%, #E98A9C 60%, #DC7489 100%); --btn-soft: #3A2529; --on-btn-soft: #F4A3B0; }
.btn.primary, .btn.dark, .pl-go, .ip-go, .scan-big.main, .scan-cta, :root[data-theme="dark"] .scan-cta, .basket-card, .rt-main {
  background: var(--btn-grad) !important; color: var(--on-btn) !important; border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(204,90,112,.22);
}
.btn.primary .ic, .btn.dark .ic, .scan-cta .ic, .basket-card .ic, .rt-main .ic { color: inherit !important; }
.rt-main .rt-ic, .scan-cta .sq, .scan-big.main .sq { background: rgba(255,255,255,.22) !important; color: inherit !important; }
.btn[disabled], .cs-next[disabled] { background: var(--ring-track) !important; color: var(--muted) !important; box-shadow: none !important; }
/* Bouton scanner central de la barre d'onglets */
.tab-scan { background: var(--btn-grad) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(204,90,112,.35) !important; }
/* Pastilles et onglets sélectionnés : rose doux, texte rose foncé */
.chip.on, .pill.on, .seg button[aria-selected="true"], .seg2 button[aria-selected="true"], .set-hero .seg2 button[aria-selected="true"], .disp-seg button[aria-selected="true"] {
  background: var(--btn) !important; color: var(--on-btn) !important; box-shadow: none !important;
}
.disp-seg button[aria-selected="true"] { background: var(--surface) !important; color: var(--accent) !important; box-shadow: 0 1px 3px rgba(204,90,112,.18) !important; }
.chip.on .ic { color: inherit; }
/* Offres Premium */
.pl-card.on { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.pl-card.on .pl-radio { border-color: var(--accent) !important; }
.pm-mark > span:not(.wm), .ip-n, .cs-n-chip { background: var(--btn) !important; color: var(--on-btn) !important; }
/* Bulle de notification et liste d'achats */
#toast { background: var(--btn) !important; color: var(--on-btn) !important; }
.shop-total { background: var(--surface) !important; color: var(--ink) !important; }
/* Mode sombre : les blocs « héros » gardent un rose profond, jamais un noir pur */
:root[data-theme="dark"] .rt-hero, :root[data-theme="dark"] .cr-sum, :root[data-theme="dark"] .pm-hero, :root[data-theme="dark"] .store-chip, :root[data-theme="dark"] .invite-card { background: linear-gradient(150deg, #36252A, #2A1F22) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rt-hero, :root:not([data-theme="light"]) .cr-sum, :root:not([data-theme="light"]) .pm-hero, :root:not([data-theme="light"]) .store-chip, :root:not([data-theme="light"]) .invite-card { background: linear-gradient(150deg, #36252A, #2A1F22) !important; } }
/* v14 — compte en un geste, carte Premium */
.me-btn { position: relative; cursor: pointer; color: var(--ink); }
.me-btn.in { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.me-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); }
.me-s { display: grid; gap: 10px; }
.me-wm .wm { font-size: 30px; }
.me-s .pk2 { margin: 4px 0 6px; }
.me-set { display: inline-flex; align-items: center; gap: 6px; justify-self: center; background: none; border: 0; font: inherit; font-weight: 600; color: var(--muted); padding: 8px; }
.me-set .ic { width: 16px; height: 16px; }
.me-mail { margin: 0; font-weight: 700; font-size: 16px; word-break: break-all; }
.pt-card, .signin-card { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(135deg, var(--surface), var(--accent-soft)); color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.pt-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--btn-grad); color: #fff; flex: none; }
.pt-tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .pt-tx strong { font-size: 15.5px; font-weight: 750; } .pt-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.pt-from { color: var(--accent) !important; font-weight: 700; }
.pt-card > .ic:last-child, .signin-card > .ic:last-child { color: var(--accent); flex: none; }
.signin-card { margin-bottom: 4px; }
.admin-prev { margin-top: 6px; font-size: 14px; }
/* Accès au bilan / passeport : création de compte */
.gate { display: grid; gap: 10px; padding-top: 6px; }
.gate-orb .logo { width: 64px; height: 64px; filter: drop-shadow(0 10px 20px rgba(226,135,154,.35)); }
.gate .lead { margin: 0; color: var(--muted); }
.gate-peek { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-radius: 18px; background: var(--night); filter: blur(5px); user-select: none; }
.gate-peek span { font-weight: 800; font-size: 20px; width: 100%; } .gate-peek i { font-style: normal; background: var(--surface); padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.gate .pk2 { margin: 6px 0; }
.sp-list strong em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 13px; margin-left: 4px; }
.sp-badge { justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
/* Où acheter près de soi */
.nb { display: grid; gap: 10px; }
.nb-form { display: flex; gap: 8px; }
.nb-form input { flex: 1; min-width: 0; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 14px; font: inherit; }
.nb-form .btn { flex: none; }
.nb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nb-links li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.nb-links li:first-child { border-top: 0; }
.nb-links span { flex: 1; min-width: 0; display: grid; } .nb-links strong { font-size: 14px; } .nb-links small { font-size: 12px; color: var(--muted); }
.nb-links .chip { flex: none; text-decoration: none; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.nb-cities summary { cursor: pointer; font-weight: 700; padding: 6px 0; color: var(--accent); }
.nb-city { padding: 8px 0; border-top: 1px solid var(--line); } .nb-city strong em { font-style: normal; color: var(--muted); font-weight: 600; margin-left: 4px; }
.nb-city .chips { margin-top: 6px; } .nb-city .chip { text-decoration: none; }
.sp-h { margin-top: 22px !important; }
/* Étapes de routine matin / soir */
.rs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface-2); }
.rs-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.rs-tabs button .ic { width: 18px; height: 18px; }
.rs-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(43,35,38,.08); }
.rs-tabs button[data-rs="am"][aria-selected="true"] .ic { color: #E0A458; } .rs-tabs button[data-rs="pm"][aria-selected="true"] .ic { color: #7A67BF; }
.rs-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; }
.rs-intro.am { background: var(--butter-soft); } .rs-intro.pm { background: var(--lilac-soft); }
.rs-intro p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.rs-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); flex: none; }
.rs-intro.am .rs-ic { color: #E0A458; } .rs-intro.pm .rs-ic { color: #7A67BF; }
.rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rs-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; flex: none; }
.rs-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .rs-main strong { font-size: 14.5px; } .rs-main strong small { color: var(--muted); font-weight: 600; margin-left: 2px; }
.rs-main strong em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.rs-main > small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rs-list a > .ic { color: var(--muted); flex: none; }

/* ==========================================================================
   v14 — Transitions douces (fondu) et rythme vertical régulier
   ========================================================================== */
@keyframes kobiIn { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.view.fade-in { animation: kobiIn .42s cubic-bezier(.22, .8, .3, 1) both; }
.view.fade-in > * { animation: kobiIn .5s cubic-bezier(.22, .8, .3, 1) both; }
.view.fade-in > *:nth-child(2) { animation-delay: .04s; } .view.fade-in > *:nth-child(3) { animation-delay: .08s; } .view.fade-in > *:nth-child(4) { animation-delay: .12s; } .view.fade-in > *:nth-child(n+5) { animation-delay: .16s; }
.cs-opt, .btn, .chip, .pill, .pl-card, .tool-list a, .rs-list a, .goal-tile, .pcard, .rt-main, .rt-alt a, .qa a, .tab, .store-btn, .pt-card, .invite-card, .signin-card { transition: transform .18s ease, opacity .18s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.cs-opt:active, .btn:active, .chip:active, .pill:active, .pl-card:active, .tool-list a:active, .rs-list a:active, .goal-tile:active, .pcard:active, .rt-main:active, .rt-alt a:active, .qa a:active, .store-btn:active, .pt-card:active, .invite-card:active, .signin-card:active { transform: scale(.975); opacity: .88; }
.cs-opt.on { animation: csPick .35s ease; }
@keyframes csPick { 40% { transform: scale(.98); } 100% { transform: none; } }
.sheet-wrap .sheet { transition: transform .38s cubic-bezier(.22, .8, .3, 1), opacity .3s ease !important; }
.sheet-wrap .sheet-bg { transition: opacity .35s ease !important; }
#toast { transition: opacity .3s ease, transform .3s ease !important; }
@media (prefers-reduced-motion: reduce) { .view.fade-in, .view.fade-in > *, .cs-opt.on { animation: none !important; } * { transition-duration: 0s !important; } }

/* Rythme vertical : de l'air entre les blocs, partout */
#disc-main > * + *, .view > div:not([class]) > * + * { margin-top: 12px; }
.view > h2, #disc-main > h2, .view > .rail-head, #disc-main > .rail-head, .view > h3 { margin-top: 30px !important; }
.view > h2 + p, #disc-main > h2 + p, .view > .rail-head + p, .view > h2 + .muted { margin-top: 6px !important; }
.view > h2 + p + *, #disc-main > h2 + p + * { margin-top: 14px !important; }
.view > .rail-head + .rail, #disc-main > .rail-head + * { margin-top: 12px !important; }
.card > h2 + p, .card > .card-head + p { margin-top: 6px; }
.card > * + .btn, .card > * + .chips, .card > * + ul, .card > * + ol { margin-top: 12px; }
.guide-cta + .guide-cta { margin-top: 12px; }
.lead { line-height: 1.5; }
p.muted.small, p.small.muted { line-height: 1.5; }
.as-list { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.as-list li { display: flex; gap: 10px; align-items: center; }
.as-list .thumb { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.as-list .li-main { display: grid; min-width: 0; } .as-list small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .as-list strong { font-size: 13.5px; line-height: 1.3; }
.pp-label .ic { width: 15px; height: 15px; vertical-align: -2px; }
.set-clear { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.pp-label .ic { display: inline-block; }

/* v14 — contrastes vérifiés automatiquement (texte ≥ 3:1 sur son fond, partout) */
:root { --accent: #BF4D65; --btn-grad: linear-gradient(135deg, #DB6B80 0%, #C9566C 55%, #B8485F 100%); --btn: #C24F66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #F2A1AE; --btn-grad: linear-gradient(135deg, #F3A7B5 0%, #E98A9C 60%, #DC7489 100%); } }
:root[data-theme="dark"] { --accent: #F2A1AE; --btn-grad: linear-gradient(135deg, #F3A7B5 0%, #E98A9C 60%, #DC7489 100%); }
.basket-card small, .basket-card strong, .rt-main small, .rt-main strong, .scan-cta small, .scan-cta strong { color: inherit !important; opacity: .95 !important; }
:root[data-theme="dark"] .set-hero .seg2 { background: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .set-hero .seg2 { background: rgba(255,255,255,.08); } }
:root[data-theme="dark"] .pl-badge:not(.soft) { color: #2A171C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pl-badge:not(.soft) { color: #2A171C; } }
.cal-d { text-shadow: 0 0 1px rgba(0,0,0,.25); }
/* Découvrir compact, par catégories */
.dc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dc-tabs button { display: grid; justify-items: center; gap: 5px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-width: 0; }
.dc-tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-tabs button .ic { width: 20px; height: 20px; }
.dc-tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.goal-grid.compact .goal-tile { min-height: 96px !important; padding-top: 50px !important; }
.goal-grid.compact .goal-tile .gt-ic { width: 32px; height: 32px; top: 10px; left: 10px; border-radius: 11px; }
.goal-grid.compact .goal-tile .gt-ic .ic { width: 18px; height: 18px; }
.goal-grid.compact .goal-tile strong { font-size: 14.5px !important; }
/* Phrase en grand */
.ph-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); font-weight: 600; margin: 0; }
.ph-hint .ic { width: 15px; height: 15px; }
.big-phrase { position: fixed; inset: 0; z-index: 500; background: color-mix(in srgb, var(--paper) 98%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s ease; }
.big-phrase.on { opacity: 1; }
.bp-in { width: 100%; max-width: 640px; text-align: center; display: grid; gap: 14px; transform: translateY(10px); transition: transform .35s cubic-bezier(.22,.8,.3,1); }
.big-phrase.on .bp-in { transform: none; }
.bp-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.bp-ko { margin: 0; font-size: clamp(34px, 10vw, 72px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; word-break: keep-all; color: var(--ink); }
.bp-rom { margin: 0; font-size: 17px; color: var(--muted); }
.bp-tr { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.bp-act { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .bp-act .btn { min-width: 130px; }
/* Guide d'achat, version claire */
.gd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gd-steps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.gd-steps button[disabled] { opacity: .55; cursor: default; }
.gd-steps li.on button { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.gd-steps li.done button { color: var(--ink); }
.gd-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; font-weight: 800; flex: none; }
.gd-steps li.on .gd-n, .gd-steps li.done .gd-n { background: var(--accent); color: #fff; } .gd-n .ic { width: 13px; height: 13px; }
.gd-l { display: grid; min-width: 0; } .gd-l b { font-size: 12.5px; } .gd-l small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-list a.on { border-color: var(--accent); background: var(--accent-soft); }
.rs-main strong em.key { background: var(--accent-soft); color: var(--accent); }
.gd-sum { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--night); }
.gd-sum .gt-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); color: var(--accent); flex: none; }
.gd-sum div { display: grid; gap: 2px; min-width: 0; } .gd-sum strong { font-size: 15px; } .gd-sum small { color: var(--muted); font-size: 13px; }
.gd-look { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gd-look a { display: grid; gap: 2px; padding: 11px 12px; border-radius: 14px; background: var(--mint-soft); color: var(--ink); text-decoration: none; min-width: 0; height: 100%; box-sizing: border-box; }
.gd-look strong { font-size: 14px; line-height: 1.25; } .gd-look small { font-size: 11px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-look span { font-size: 12.5px; color: var(--leaf-text); }
.gd-care { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gd-care li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amber-bg); }
.gd-care strong { font-size: 14px; color: var(--ink); } .gd-care span { font-size: 12.5px; color: var(--amber-text); }
.gd-checks summary { cursor: pointer; font-weight: 700; }
.gd-act .btn { flex: 1; }
.cs-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.cs-nav .btn { min-width: 0; }
/* anciennes listes colorées → tokens doux (clair et sombre) */
.look-list a { background: var(--mint-soft) !important; color: var(--ink) !important; }
.care-list li { background: var(--amber-bg) !important; }
/* ---------- Consultation v2 : choix du niveau, questions, bilan ---------- */
.c2-tiers { display: grid; gap: 12px; margin: 16px 0 14px; }
.c2-tier { position: relative; appearance: none; width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.c2-tier > .ic { width: 18px; height: 18px; color: var(--muted); align-self: center; flex: none; }
.c2-tier.t-express { background: linear-gradient(135deg, var(--surface), var(--mint-soft)); }
.c2-tier.t-complete { background: linear-gradient(135deg, var(--surface), var(--lilac-soft)); }
.c2-tier.t-ultimate { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(135deg, var(--surface), var(--accent-soft)); margin-top: 8px; }
.c2-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--surface); color: var(--accent); flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.c2-ic .ic { width: 22px; height: 22px; }
.c2-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.c2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .c2-row strong { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }
.c2-meta { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.c2-tx > small:not(.c2-meta) { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.c2-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.c2-badge .ic { width: 12px; height: 12px; }
.c2-badge.free { background: var(--leaf-bg); color: var(--leaf-text); border-color: transparent; }
.c2-badge.prem { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.c2-badge.done { background: var(--surface-2); color: var(--muted); border-color: transparent; }
.c2-best { position: absolute; top: -10px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--btn-grad, var(--accent)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.c2-resume { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.c2-resume .ic { width: 14px; height: 14px; color: var(--accent); }
.c2-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 750; margin-right: 4px; vertical-align: 1px; }
.cs-sec { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.cs-body { padding-bottom: 8px; }
.cs-intro-line { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.cs-whyd { margin: -2px 0 14px; } .cs-whyd summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); list-style: none; padding: 4px 0; }
.cs-whyd summary::-webkit-details-marker { display: none; } .cs-whyd summary .ic { width: 15px; height: 15px; }
.cs-whyd p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cs-hint { margin: -4px 0 12px; font-size: 12.5px; font-weight: 650; color: var(--muted); } .cs-hint.pf { display: flex; align-items: center; gap: 6px; color: var(--leaf-text); } .cs-hint .ic { width: 14px; height: 14px; }
.cs-opt { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.cs-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--surface); flex: none; box-sizing: border-box; }
.cs-opt.multi .cs-mark { border-radius: 7px; }
.cs-opt.on .cs-mark { background: var(--accent); border-color: var(--accent); color: #fff; } .cs-mark .ic { width: 13px; height: 13px; }
.cs-ot { display: grid; gap: 2px; min-width: 0; }
.cs-nav.sticky { position: sticky; bottom: 0; z-index: 3; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 72%, color-mix(in srgb, var(--paper) 0%, transparent)); }
.cs-nav.sticky .btn { flex: 1; } .cs-nav.sticky .btn.primary { flex: 1.4; }
.cs-nav .btn[disabled] { opacity: .45; pointer-events: none; }
.c2-skip { display: block; margin: 4px auto 0; background: none; border: 0; font: inherit; font-weight: 650; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 8px; }
/* Bilan */
.c2-code { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.c2-code b { font-family: var(--mono, ui-monospace, monospace); font-size: 15px; letter-spacing: .14em; padding: 3px 10px; border-radius: 10px; background: var(--surface); color: var(--accent); }
.c2-code span { font-size: 14px; color: var(--muted); }
.c2-note { margin: 2px 0 4px; padding: 9px 12px; border-radius: 12px; background: var(--sky-soft); color: var(--ink); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.c2-note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.c2-refs { background: var(--amber-bg); border-color: transparent; }
.c2-refs h2 { display: flex; align-items: center; gap: 8px; } .c2-refs h2 .ic { color: var(--amber-text); }
.c2-refs ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.c2-refs li { padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--surface); font-size: 14px; line-height: 1.45; border-left: 4px solid var(--amber); }
.c2-refs li.lv-urgent { border-left-color: var(--persimmon, #C2410C); font-weight: 650; }
.c2-refs li.lv-info { border-left-color: var(--line); color: var(--muted); }
.axes { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 16px; }
.ax-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.ax-t { position: relative; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--sky-soft), var(--surface-2) 50%, var(--accent-soft)); }
.ax-t::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.ax-t i { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.ax-est { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); font-style: italic; }
.c2-level { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.c2-level > span { color: var(--muted); font-weight: 650; } .c2-level b { margin-left: auto; font-size: 13.5px; }
.lvl-dots { display: flex; gap: 4px; } .lvl-dots i { width: 18px; height: 6px; border-radius: 6px; background: var(--ring-track); } .lvl-dots i.on { background: var(--accent); }
.c2-sun { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--butter-soft); }
.c2-sun > .ic { width: 22px; height: 22px; color: var(--amber-text); flex: none; } .c2-sun div { display: grid; gap: 2px; } .c2-sun b { font-size: 14px; } .c2-sun small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.c2-safe h2 { display: flex; align-items: center; gap: 8px; } .c2-safe h2 .ic { color: var(--leaf-text); }
.chip.av { background: var(--amber-bg); color: var(--amber-text); border: 0; font-weight: 650; }
.chip.lim { background: var(--sky-soft); color: var(--ink); border: 0; font-weight: 600; }
.c2-weeks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.c2-weeks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; position: relative; }
.c2-weeks li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: -6px; width: 2px; background: var(--accent-soft); }
.pl-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; flex: none; }
.c2-weeks li:first-child .pl-dot { background: var(--accent); color: #fff; }
.c2-weeks div { display: grid; gap: 2px; padding-top: 5px; } .c2-weeks b { font-size: 14px; } .c2-weeks small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.c2-up { margin: 4px 0 2px; }
.c2-exit { display: grid; gap: 10px; text-align: center; padding-top: 4px; } .c2-exit h2 { margin: 0; font-size: 21px; } .c2-exit p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.c2-more { margin-top: 8px; } .c2-more summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--amber-text); padding: 4px 0; }
.c2-fam { margin: -2px 0 4px; font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
/* japonais : coupures de ligne aux limites de mots (titres équilibrés) */
:lang(ja) h1, :lang(ja) h2, :lang(ja) .cs-q, :lang(ja) .cs-h { word-break: auto-phrase; }
/* mode sombre : texte foncé sur les pastilles rose clair (contraste) */
:root[data-theme="dark"] .c2-best, :root[data-theme="dark"] .gd-steps li.on .gd-n, :root[data-theme="dark"] .gd-steps li.done .gd-n, :root[data-theme="dark"] .c2-weeks li:first-child .pl-dot, :root[data-theme="dark"] .cs-opt.on .cs-mark { color: #2A1519; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c2-best, :root:not([data-theme="light"]) .gd-steps li.on .gd-n, :root:not([data-theme="light"]) .gd-steps li.done .gd-n, :root:not([data-theme="light"]) .c2-weeks li:first-child .pl-dot, :root:not([data-theme="light"]) .cs-opt.on .cs-mark { color: #2A1519; } }
.gd-l b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .gd-steps button { flex-direction: column; align-items: flex-start; gap: 5px; } }
/* ---------- Nos apps : flèche à côté du logo, menu déroulant, carte Dari ---------- */
.wm-wrap { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.apps-btn { appearance: none; width: 26px; height: 26px; margin-left: 1px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color .2s ease, color .2s ease, transform .25s ease; }
.apps-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.apps-btn:hover, .apps-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.apps-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.apps-pop { position: fixed; z-index: 80; width: min(304px, calc(100vw - 24px)); padding: 8px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(43,35,38,.06), 0 18px 48px rgba(43,35,38,.16); opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 18px 0; transition: opacity .18s ease, transform .18s ease; }
.apps-pop.on { opacity: 1; transform: none; }
.ap-cap { margin: 4px 10px 6px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ap-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; color: var(--ink); text-decoration: none; }
.ap-row.cur { background: var(--accent-soft); }
a.ap-row:hover, a.ap-row:focus-visible { background: var(--surface-2); outline: none; }
a.ap-row:active { transform: scale(.98); }
.ap-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(43,35,38,.06); }
.ap-ic.kobi { background: linear-gradient(150deg, #FFF8F5, #FCE3E8); } .ap-ic.kobi .logo { width: 30px; height: 30px; }
.ap-ic.dari { background: #F7F4EE; } .ap-ic.dari svg { width: 22px; height: 29px; }
.ap-ic.big { width: 52px; height: 52px; border-radius: 15px; } .ap-ic.big svg { width: 26px; height: 34px; }
.ap-tx { display: grid; gap: 1px; min-width: 0; flex: 1; } .ap-tx b { font-size: 15.5px; font-weight: 750; letter-spacing: -0.01em; } .ap-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ap-here { color: var(--accent); flex: none; display: grid; place-items: center; } .ap-here .ic { width: 18px; height: 18px; }
.ap-go { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 700; }
.ap-go svg, .xapp-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.xapp-card { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 6px; padding: 16px 16px 16px 14px; border-radius: 22px; background: linear-gradient(135deg, var(--surface), var(--sky-soft)); border: 1px solid var(--line); transition: opacity .25s ease, transform .25s ease; }
.xapp-card.out { opacity: 0; transform: scale(.98); }
.xapp-tx { display: grid; gap: 4px; min-width: 0; padding-right: 22px; }
.xapp-tx small { font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.xapp-tx strong { font-size: 16px; font-weight: 750; line-height: 1.3; letter-spacing: -0.01em; }
.xapp-tx p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.xapp-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 14px; }
.xapp-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.xapp-x .ic { width: 16px; height: 16px; } .xapp-x:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .apps-pop { transition: none; } }
/* cartes « Je choisis / Je suis en boutique » : mots longs (mongol, vietnamien…) sur petit écran */
.rt-alt strong { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 380px) { .rt-alt a { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* ---------- Rendus produits façon studio ---------- */
.p-tile.studio { background: radial-gradient(95% 75% at 50% 22%, #FFFFFF 0%, color-mix(in srgb, var(--st, #F3EEEA) 55%, #FFFFFF) 52%, var(--st, #F1EBE6) 100%) !important; }
.p-tile.studio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(43,35,38,.045)); pointer-events: none; }
.p-tile.studio.has-photo { background: #fff !important; } .p-tile.studio.has-photo::after { display: none; }
.p-tile .p-art.st, .p-hero .p-art.st { filter: none; }
.pcard .p-tile.studio .p-art { height: 134px; width: 79px; }
.p-hero.studio { background: radial-gradient(70% 80% at 50% 30%, #FFFFFF 0%, color-mix(in srgb, var(--st, #F3EEEA) 55%, #FFFFFF) 50%, var(--st, #F1EBE6) 82%, var(--paper) 100%) !important; }
.p-hero .p-art.st { width: 130px; height: 222px; }
.thumb .p-art.st { width: 27px; height: 46px; }

/* ---------- Compatibilité (성분 궁합) ---------- */
.mt-intro { padding: 6px 2px 4px; }
.mt-intro .lead { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.mt-slots { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 16px 0 14px; position: relative; }
.mt-slot { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 12px 14px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .15s ease; }
.mt-slot:active { transform: scale(.99); }
.mt-slot.on { border-style: solid; border-color: var(--line); box-shadow: var(--shadow); }
.mt-slot .p-tile { flex: none; }
.mt-plus, .mt-fam { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.mt-plus .ic, .mt-fam .ic { width: 22px; height: 22px; }
.mt-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mt-tx strong { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mt-tx small { font-size: 12.5px; color: var(--muted); }
.mt-chg { flex: none; font-size: 13px; font-weight: 700; color: var(--accent); }
.mt-and { position: relative; justify-self: center; margin: -17px 0; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--btn, var(--accent)); color: #fff; font-weight: 800; font-size: 18px; line-height: 1; box-shadow: 0 0 0 4px var(--paper); }
.mt-res { margin-top: 4px; }
.mt-verdict { display: flex; gap: 12px; align-items: flex-start; }
.mt-verdict > .ic { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; }
.mt-verdict h2 { margin: 2px 0 4px; }
.mt-verdict p { margin: 0; color: var(--muted); line-height: 1.5; }
.mt-res.lv-great .mt-verdict > .ic, .mt-res.lv-ok .mt-verdict > .ic, .mt-res.lv-daynight .mt-verdict > .ic { background: var(--leaf-bg); color: var(--leaf-text); }
.mt-res.lv-space .mt-verdict > .ic { background: var(--amber-bg); color: var(--amber-text); }
.mt-res.lv-same .mt-verdict > .ic { background: var(--surface-2); color: var(--muted); }
.mt-res.lv-great, .mt-res.lv-daynight { background: linear-gradient(150deg, var(--surface), var(--mint-soft, #E9F5EF)); }
.mt-res.lv-space { background: linear-gradient(150deg, var(--surface), var(--amber-bg)); }
.mt-res .derm-pts { margin: 14px 0 4px; }
.mt-res .pp-label { margin: 14px 0 8px; }
.mt-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: mt; }
.mt-order li { display: flex; align-items: center; gap: 10px; counter-increment: mt; font-size: 14.5px; }
.mt-order li::before { content: counter(mt); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; }
.mt-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mt-presets .chip { font-size: 13.5px; }
@media (min-width: 560px) { .mt-slots { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .mt-and { margin: 0; } }

/* ---------- Repères MFDS (식약처) ---------- */
.kreg h2 { margin-top: 2px; }
.kr-block { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.kr-block:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
.kr-block h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.kr-block .chips { margin: 8px 0 4px; }
.kr-ok { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-weight: 600; color: var(--leaf-text); }
.kr-ok .ic, .kr-sens .ic { width: 18px; height: 18px; flex: none; }
.kr-sens { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; padding: 10px 12px; border-radius: 14px; background: var(--amber-bg); color: var(--amber-text); font-size: 13.5px; line-height: 1.45; }
.kr-fn { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 10px; }
.kr-fn li { display: grid; gap: 6px; }
.kr-cat { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.kr-ings { display: grid; gap: 4px; }
.kr-ings span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.kr-ings b { font-weight: 600; }
.kr-ings small { color: var(--muted); font-size: 12.5px; }
/* longs noms d'ingrédients coréens (sans espace) : on autorise la coupure plutôt que de déborder */
.ing-main { min-width: 0; } .actives strong, .ing-main strong, .ing-main small, .li-main strong, .kr-ings b, .ing-sheet h2, .ih-text h1, .gd-look strong { overflow-wrap: anywhere; }

/* ---------- Mode test (phase de test) : sous « S'abonner » ---------- */
.dt-box { margin: 14px 0 4px; padding: 12px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); text-align: center; }
.dt-btn { background: var(--surface); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); font-weight: 700; }
.dt-btn.on { color: var(--ink); }
.dt-btn .ic { width: 18px; height: 18px; }
.dt-note { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dt-quota { margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; } .dt-quota .ic { flex: none; margin-top: 2px; }

/* ---------- Cabine peau (scan façon clinique) ---------- */
body.lab-open { overflow: hidden; }
.lab { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); background: #15110F; color: #F3ECE5; transition: background .35s, color .35s; }
.lab.lit { background: #FFFFFF; color: #2A2420; }
.lab-top { display: flex; align-items: center; gap: 8px; }
.lab-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: inherit; display: grid; place-items: center; cursor: pointer; }
.lab.lit .lab-x { background: rgba(42,36,32,.07); }
.lab-steps { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lab-steps li { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; opacity: .45; white-space: nowrap; }
.lab-steps li b { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1.5px solid currentColor; }
.lab-steps li.on { opacity: 1; } .lab-steps li.done { opacity: .8; }
.lab-steps li.done b { background: #B99068; border-color: #B99068; color: #fff; }
@media (max-width: 400px) { .lab-steps li:not(.on) span { display: none; } }
.lab-light { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.lab.lit .lab-light { border-color: rgba(42,36,32,.18); }
.lab-light[aria-pressed="true"] { background: #F2D9A6; color: #2A2420; border-color: transparent; }
.lab-light .ic { width: 16px; height: 16px; }
.lab-stage { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 0; }
.lab-frame { position: relative; width: min(80vw, 48vh, 380px); aspect-ratio: 100 / 130; border-radius: 30px; overflow: hidden; background: #000; transition: width .35s; }
.lab.lit .lab-frame { width: min(62vw, 40vh, 320px); box-shadow: 0 0 0 1px rgba(42,36,32,.08); }
.lab-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.lab-guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-guide ellipse { fill: none; stroke: rgba(255,255,255,.92); stroke-width: .9; stroke-dasharray: 2.4 1.8; transition: stroke .2s; }
.lab.ready .lab-guide ellipse, .lab.busy .lab-guide ellipse { stroke: #8EE3B9; stroke-dasharray: none; stroke-width: 1.4; }
.lab-arrow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lab-scan { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(180deg, transparent, rgba(242,217,166,.45), transparent); opacity: 0; transform: translateY(-100%); pointer-events: none; }
.lab.ready .lab-scan, .lab.busy .lab-scan { opacity: 1; animation: labscan 1.5s linear infinite; }
@keyframes labscan { from { transform: translateY(-100%); } to { transform: translateY(625%); } }
.lab-count { position: absolute; inset: 0; display: grid; place-items: center; font: 600 92px/1 var(--serif, var(--brand)); color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.45); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s; pointer-events: none; }
.lab-count.on { opacity: 1; transform: none; }
.lab-q { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.lab-q li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.1); }
.lab.lit .lab-q li { background: rgba(42,36,32,.06); }
.lab-q li i { width: 8px; height: 8px; border-radius: 50%; background: #8E857D; }
.lab-q li.ok i { background: #3DBE83; } .lab-q li.no i { background: #E0874F; }
.lab-msg { margin: 0; min-height: 2.9em; max-width: 340px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.45; }
.lab-bot { display: grid; gap: 6px; width: 100%; max-width: 420px; margin: 0 auto; }
.lab-bot .btn.ghost { color: inherit; border-color: transparent; background: transparent; }
.lab-bot .btn[hidden] { display: none; }
.lab.busy .lab-bot { opacity: .4; pointer-events: none; }
.lab-flash { position: fixed; inset: 0; z-index: 310; display: grid; place-items: center; background: #fff; }
.lab-flash[hidden] { display: none; }
.lab-flash.dark { background: #000; }
.lab-flash.half-t { background: linear-gradient(#fff 50%, #000 50%); }
.lab-flash.half-b { background: linear-gradient(#000 50%, #fff 50%); }
.lab-flash.half-l { background: linear-gradient(90deg, #fff 50%, #000 50%); }
.lab-flash.half-r { background: linear-gradient(90deg, #000 50%, #fff 50%); }
.lab-flash p { margin: 0; padding: 0 28px; color: #fff; mix-blend-mode: difference; font-weight: 800; font-size: 17px; text-align: center; }
.lab.done { grid-template-rows: 1fr; place-items: center; background: #15110F; color: #F3ECE5; }
.lab-load { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 330px; }
.lab-load svg { width: 110px; }
.lab-load .lux-title { color: #F7F1EA; margin: 4px 0 0; }
.lab-load .ll-sub { margin: 0; font-size: 13.5px; opacity: .75; }
.ll-scan { animation: llscan 1.4s ease-in-out infinite alternate; }
@keyframes llscan { from { transform: translateY(0); } to { transform: translateY(96px); } }
.lab-load ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; text-align: left; }
.lab-load li { display: flex; gap: 9px; align-items: center; opacity: .35; transition: opacity .3s; font-weight: 700; font-size: 14.5px; }
.lab-load li.on { opacity: 1; }
.lab-load li .ic { width: 18px; height: 18px; color: #8EE3B9; }
/* accueil */
.lab-hero { position: relative; border-radius: 26px; overflow: hidden; color: #F7F1EA; background: radial-gradient(120% 85% at 50% 0%, #4A3A30 0%, #2A2420 58%, #1C1714 100%); }
.lab-hero .lh-art svg { width: 100%; height: auto; margin-top: 4px; }
.lab-hero .lh-in { display: grid; gap: 6px; padding: 0 18px 18px; }
.lab-hero .lux-eyebrow { color: #E2C7A2; margin: 0; }
.lab-hero .lux-title { color: #FBF8F4; font-size: 26px; margin: 0; }
.lab-hero p { margin: 0; font-size: 14px; opacity: .9; }
.lh-scanline { animation: lhscan 3.2s ease-in-out infinite alternate; }
@keyframes lhscan { from { transform: translateY(0); } to { transform: translateY(112px); } }
.lab-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.lab-facts li { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12.5px; font-weight: 800; }
.lab-facts .ic { width: 15px; height: 15px; }
.lab-fstrip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.lab-fstrip::-webkit-scrollbar { display: none; }
.lab-fstrip span { flex: none; display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.lab-fstrip i, .lab-fc i, .lr-name i, .lab-said td i, .lab-plan-row b i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--fc); display: inline-block; }
.lab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lab-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.lab-list .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--gold, var(--celadon)); }
/* résultats */
.lab-viewer { display: grid; gap: 12px; }
.lab-viewer > * + * { margin-top: 0; }
.lab-angles { display: flex; } .lab-angles button { flex: 1; }
.lab-cmp { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 100 / 130; border-radius: 20px; overflow: hidden; background: #111; }
.lab-cmp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-cmp .lc-n { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.lc-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.45); pointer-events: none; }
.lc-line i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.lc-line i::before, .lc-line i::after { content: ""; position: absolute; top: 12px; border: 5px solid transparent; }
.lc-line i::before { left: 4px; border-right-color: #2A2420; } .lc-line i::after { right: 4px; border-left-color: #2A2420; }
.lc-tag { position: absolute; top: 10px; max-width: 45%; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(20,16,14,.6); color: #fff; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-tag.l { left: 10px; } .lc-tag.r { right: 10px; }
.lc-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.lab-fchips { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px; }
.lab-fchips::-webkit-scrollbar { display: none; }
.lab-fc { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.lab-fc[aria-selected="true"] { background: var(--btn, var(--ink)); color: var(--on-btn, var(--paper)); border-color: transparent; }
.lab-fd { display: grid; gap: 8px; }
.lab-fd p { margin: 0; font-size: 14px; color: var(--muted); }
.lab-fd .lfd-n { color: var(--ink); font-weight: 700; }
.lab-fd .lfd-hint { font-size: 12px; }
.lfd-head { display: flex; align-items: center; gap: 10px; }
.lfd-head b { flex: 1; font-size: 17px; }
.lfd-v, .lr-val { font: 600 26px/1 var(--serif, var(--brand)); }
.lfd-v small, .lr-val small { font: 600 12px var(--body); color: var(--muted); }
.lab-lv { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lv-low { background: var(--leaf-bg); color: var(--leaf-text); } .lv-mid { background: var(--amber-bg); color: var(--amber-text); } .lv-high { background: var(--clay-bg); color: var(--clay-text); }
.lab-meter { display: block; height: 8px; border-radius: 99px; background: var(--ring-track); overflow: hidden; }
.lab-meter i { display: block; height: 100%; border-radius: inherit; background: var(--fc); }
.lab-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lab-b { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); }
.lab-b.good { background: var(--leaf-bg); color: var(--leaf-text); }
.lab-b .ic { width: 14px; height: 14px; }
.lab-warn, .lab-note, .lab-gone { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.lab-warn { background: var(--amber-bg); color: var(--amber-text); }
.lab-note, .lab-gone { background: var(--surface-2); color: var(--ink); }
.lab-warn .ic, .lab-note .ic, .lab-gone .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.lab-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.lab-rows button { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.lab-rows li:last-child button { border-bottom: 0; }
.lab-rows button:disabled { cursor: default; }
.lr-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.lr-name small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lab-rows .lab-meter, .lr-sub { grid-column: 1 / -1; }
.lr-sub { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lab-d { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.lab-d.same { background: var(--surface-2); color: var(--muted); } .lab-d.better { background: var(--leaf-bg); color: var(--leaf-text); } .lab-d.worse { background: var(--amber-bg); color: var(--amber-text); }
.lab-face { display: flex; gap: 14px; align-items: center; }
.lab-face svg { width: 136px; flex: none; }
.lab-face svg text { font: 800 8px var(--body); fill: var(--ink); }
.lab-face ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; min-width: 0; font-size: 13.5px; }
.lab-face li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.lab-face li b { font-size: 15px; }
.lab-face li .lab-lv { grid-column: 1 / -1; justify-self: start; }
#lab-facebox { display: grid; gap: 12px; }
.lab-said { width: 100%; border-collapse: collapse; font-size: 14px; }
.lab-said th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 6px 6px 0; }
.lab-said td { padding: 9px 6px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.lab-said td:first-child { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lab-said td .ic { width: 18px; height: 18px; color: var(--leaf-text); }
.lab-plan-row { display: grid; gap: 7px; }
.lab-plan-row b { display: flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .lh-scanline, .ll-scan, .lab-scan { animation: none !important; } }
/* Scanner : reconnaissance IA d'un produit */
.scan-big.ai { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; background: linear-gradient(120deg, var(--surface) 0%, var(--persimmon-bg) 100%); }
.scan-big.ai .sq { flex: none; background: var(--btn, var(--ink)); color: var(--on-btn, var(--paper)); }
.id-name { margin: 2px 0 4px; } .id-name span { font-weight: 600; }
.id-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
a.dup { text-decoration: none; color: inherit; }
/* Passeport pas terminé (arrivée passée « pour l'instant ») */
.ob-skip-row { margin: 6px 0 0; }
.ob-skip-row .link { background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px; }
.pp-todo { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--gold, var(--celadon)) 60%, transparent); background: color-mix(in srgb, var(--persimmon-bg) 70%, var(--surface)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pp-todo .ppt-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--btn, var(--ink)); color: var(--on-btn, var(--paper)); }
.pp-todo .ppt-ic .ic { width: 20px; height: 20px; }
.pp-todo .ppt-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pp-todo .ppt-main strong { font-size: 14.5px; line-height: 1.3; }
.pp-todo .ppt-main small { color: var(--muted); font-size: 12.5px; }
.pp-todo .ppt-cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.pp-todo .ppt-cta .ic { width: 16px; height: 16px; }
.pp-mini.todo i { background: var(--persimmon); box-shadow: 0 0 0 3px var(--persimmon-bg); width: 12px; height: 12px; margin: 0 4px 0 8px; }
.pp-todo-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 9px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13px; }
.pp-todo-note .ic { width: 16px; height: 16px; flex: none; }
.pp-todo-note span { flex: 1; min-width: 60%; }
.pp-todo-note .link { background: none; border: 0; font-weight: 800; text-decoration: underline; cursor: pointer; color: inherit; padding: 0; }
/* Consultation : « Continuer » attire l'œil après un choix */
#cs-next.nudge { animation: csnudge .45s ease; }
@keyframes csnudge { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #cs-next.nudge { animation: none; } }
/* Reconnaissance : composition trouvée automatiquement */
.id-ing { display: grid; gap: 10px; margin: 6px 0 4px; }
.id-found, .id-searching { display: flex; align-items: center; gap: 9px; margin: 8px 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--leaf-bg); color: var(--leaf-text); font-weight: 700; font-size: 14px; }
.id-found.warn { background: var(--amber-bg); color: var(--amber-text); }
.id-searching { background: var(--surface-2); color: var(--ink); }
.id-found .ic { width: 18px; height: 18px; flex: none; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; flex: none; margin: 0; }
.lk-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13px; }
.lk-note.warn { background: var(--amber-bg); color: var(--amber-text); }
.lk-note .ic { width: 16px; height: 16px; flex: none; }
.lk-note span { flex: 1; min-width: 60%; }
.lk-note a, .lk-note .link { color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
/* Cabine peau v2 : préparation, repères, contrôle de la photo, aperçu d'analyse */
.lab { animation: labIn .28s ease both; }
@keyframes labIn { from { opacity: 0; } to { opacity: 1; } }
.lab > *:not(.lab-flash):not(.lab-retake) { animation: kobiIn .38s cubic-bezier(.22, .8, .3, 1) both; }
.lab-ttl { flex: 1; text-align: center; font-weight: 800; font-size: 15px; }
.lab.prep { grid-template-rows: auto 1fr auto; }
.lab-prep { align-self: center; width: 100%; max-width: 440px; margin: 0 auto; display: grid; gap: 8px; }
.lab-prep .lux-eyebrow { color: #E2C7A2; margin: 0; }
.lab-prep .lux-title { color: #FBF8F4; margin: 0; font-size: 25px; line-height: 1.2; }
.lab-prep .lp-sub { margin: 0 0 6px; font-size: 14px; opacity: .8; }
.lab-prep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.lp-item .lp-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #F2D9A6; }
.lp-item .lp-ic .ic { width: 21px; height: 21px; }
.lp-item > span:nth-child(2) { flex: 1; }
.lp-item .lp-ck { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.lp-item .lp-ck .ic { width: 15px; height: 15px; }
.lp-item.on { background: rgba(142,227,185,.12); border-color: rgba(142,227,185,.5); }
.lp-item.on .lp-ck { background: #3DBE83; border-color: #3DBE83; color: #0F1513; }
.lab-bot .lp-note { margin: 4px 0 0; font-size: 12px; opacity: .65; text-align: center; }
.lab-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lab-badge { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(15,21,19,.6); color: #8EE3B9; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.lab-q li[hidden] { display: none; }
.lab.calib .lab-guide ellipse { stroke: #F2D9A6; stroke-dasharray: none; animation: calibPulse 1s ease-in-out infinite; }
@keyframes calibPulse { 50% { opacity: .35; } }
.lab-retake { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(15,12,10,.78); animation: labIn .25s ease both; }
.lr-card { width: 100%; max-width: 380px; border-radius: 24px; background: var(--surface); color: var(--ink); padding: 18px; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lr-card h3 { margin: 0; font-size: 18px; }
.lr-img { width: 120px; aspect-ratio: 100 / 130; border-radius: 16px; overflow: hidden; justify-self: center; background: #111; }
.lr-img img { width: 100%; height: 100%; object-fit: cover; }
.lr-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lr-card li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--amber-text); }
.lr-card li .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.ll-frame { position: relative; width: 150px; aspect-ratio: 100 / 130; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); }
.ll-frame canvas, .ll-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ll-frame svg { width: 100%; }
.ll-f { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: rgba(15,12,10,.65); color: #F7F1EA; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ll-f:empty { display: none; }
/* Fondu entre les écrans : l'ancien écran s'efface pendant que le nouveau apparaît */
.view-ghost { position: fixed; z-index: 1; pointer-events: none; animation: kobiOut .24s ease forwards; margin: 0 !important; }
@keyframes kobiOut { to { opacity: 0; transform: translateY(-4px); } }
.view.onboard.fade-in { animation: kobiIn .42s cubic-bezier(.22, .8, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .lab, .lab > *, .view-ghost, .lab-retake { animation: none !important; } .view-ghost { display: none; } }
/* Bandeau « Mode test » : toujours visible, sur tous les écrans */
#dt-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; display: flex; align-items: center; gap: 10px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; min-height: 46px; background: repeating-linear-gradient(135deg, #FFC94A 0 14px, #FFB703 14px 28px); color: #2A1E00; box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 13px; }
#dt-bar .dtb-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #C1121F; box-shadow: 0 0 0 3px rgba(193,18,31,.25); animation: dtPulse 1.6s ease-in-out infinite; }
@keyframes dtPulse { 50% { box-shadow: 0 0 0 6px rgba(193,18,31,0); } }
#dt-bar .dtb-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
#dt-bar .dtb-t strong { font-weight: 900; letter-spacing: .02em; text-transform: uppercase; font-size: 12.5px; }
#dt-bar .dtb-t small { font-size: 11.5px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dt-bar button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: #2A1E00; color: #FFD166; font: inherit; font-weight: 900; font-size: 13px; cursor: pointer; }
body.dt-on { padding-top: calc(46px + env(safe-area-inset-top)); }
body.dt-on .lab { top: calc(46px + env(safe-area-inset-top)); }
/* Installer l'app : bouton toujours visible tant qu'elle n'est pas installée */
.inst-row { display: flex; justify-content: center; margin: -4px 0 6px; }
.inst-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--btn, var(--ink)); color: var(--on-btn, var(--paper)); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); }
.inst-pill .ic { width: 16px; height: 16px; }
.inst-pill[hidden], .inst-card[hidden] { display: none; }
.inst-card { background: var(--persimmon-bg); }
a.ip-go { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.ip-go.ghost { background: var(--surface-2); color: var(--ink); margin-top: 8px; }
/* scan strict : déclencheur grisé tant que le visage n'est pas validé ; feuille « scan impossible » */
.lab-bot .lab-snap:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; box-shadow: none; }
.lab.noface .lab-guide ellipse { stroke: #F2A68C; stroke-dasharray: 3 2.4; }
.lab-fail { display: grid; gap: 8px; justify-items: start; margin-bottom: 12px; }
.lab-fail > .ic { width: 34px; height: 34px; color: var(--amber-text); background: var(--amber-bg, rgba(242,166,76,.14)); border-radius: 12px; padding: 7px; box-sizing: border-box; }
.lab-fail h2 { margin: 2px 0 0; }
.lab-fail p { margin: 0; }
.lab-fail-tips { margin: 4px 0 2px; padding: 0 0 0 18px; display: grid; gap: 5px; font-size: 14px; color: var(--ink-2, var(--ink)); }

/* tout premier lancement : choix de la langue en plein écran */
.lpick { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow-y: auto; padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(60% 40% at 12% 6%, rgba(191, 227, 213, .55) 0%, transparent 70%), radial-gradient(52% 36% at 92% 12%, rgba(252, 231, 218, .8) 0%, transparent 70%), radial-gradient(60% 46% at 70% 96%, rgba(231, 227, 247, .8) 0%, transparent 70%), var(--paper);
  animation: lpIn .35s ease both; }
.lpick.out { opacity: 0; transform: scale(1.015); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }
body.lp-open { overflow: hidden; }
body.lp-open #dt-bar { z-index: 210; }
.lpc { width: 100%; max-width: 420px; text-align: center; }
.lp-wm { margin: 0; font-size: 46px; line-height: 1; }
.lp-wm .wm { font-size: inherit; }
.lpk { display: block; margin: 6px 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .32em; color: var(--muted); }
.lpc > b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; min-height: 1.5em; color: var(--ink); }
.lpg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lpg button { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 18px; padding: 13px 14px; min-height: 54px; font: inherit; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow); text-align: left; transition: transform .15s, border-color .2s, background .2s; }
.lpg button span { font-size: 22px; line-height: 1; }
.lpg button.on { border-color: var(--celadon); background: var(--ok-bg); }
.lpg button:active { transform: scale(.97); }
.lpg button:focus-visible { outline: 3px solid var(--celadon); outline-offset: 2px; }
.lpg button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
.lpn { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
@keyframes lpIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lpick { animation: none; } .lpick.out { transition: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lpick { background: radial-gradient(60% 40% at 12% 6%, rgba(46, 122, 101, .28) 0%, transparent 70%), radial-gradient(52% 36% at 92% 12%, rgba(255, 122, 69, .14) 0%, transparent 70%), radial-gradient(60% 46% at 70% 96%, rgba(143, 127, 214, .2) 0%, transparent 70%), var(--paper); } }
:root[data-theme="dark"] .lpick { background: radial-gradient(60% 40% at 12% 6%, rgba(46, 122, 101, .28) 0%, transparent 70%), radial-gradient(52% 36% at 92% 12%, rgba(255, 122, 69, .14) 0%, transparent 70%), radial-gradient(60% 46% at 70% 96%, rgba(143, 127, 214, .2) 0%, transparent 70%), var(--paper); }
.lab.warn .lab-guide ellipse { stroke: #F2A68C; stroke-dasharray: none; stroke-width: 1.6; }
.lab.warn .lab-msg { color: #F2A68C; }