/* =====================================================================================================
   PRISTAYA — V6.1 « passe de finalisation » (maquettes Claude Design, oct. 2026).
   Chargé APRÈS sanctuary.css et AVANT theme-light.css. Uniquement de l'apparence : aucune fonction touchée.
   Réversible : retirer la ligne v61.css de index.html rend l'apparence 0.9.x.
   Composants partagés définitifs : une seule version de chaque composant, portée en tokens ci-dessous
   (le mode clair redéfinit les mêmes tokens en bas de ce fichier).
   ===================================================================================================== */
:root {
  --bg: #0b0709; --text: #f6ede4; --ivory: #f6ede4; --muted: #c4aab2; --powder: #f1d3da; --champagne: #ead3a8; --oldrose: #c98a9b;
  --rose: #f1d3da; --ok: #9fd3b0; --alert: #e8a3b4; --danger: #e8a3b4;
  --line: rgba(234, 211, 168, .12); --line-strong: rgba(234, 211, 168, .22);
  --radius: 24px; --radius-hero: 30px; --radius-s: 16px;
  --btn-grad: linear-gradient(135deg, #f1d3da 0%, #d995ab 55%, #c27691 100%); --btn-ink: #26091a; --btn-glow: 0 10px 30px rgba(194, 118, 145, .28);
  --btn2-line: rgba(234, 211, 168, .30); --btn3-ink: #c4aab2;
  --field-bg: rgba(26, 15, 21, .6); --field-line: rgba(234, 211, 168, .12); --field-line-on: rgba(234, 211, 168, .40);
  --chip-line: rgba(234, 211, 168, .18); --chip-ink: #c4aab2; --chip-on-bg: #f1d3da; --chip-on-ink: #26091a;
  --bar-track: rgba(246, 237, 228, .12); --bar-fill: linear-gradient(90deg, #c98a9b, #ead3a8);
  --card-grad: linear-gradient(165deg, rgba(43, 22, 34, .85), rgba(22, 12, 18, .9));
  --hero-shadow: 0 24px 60px rgba(163, 40, 95, .22);
  --round-line: rgba(234, 211, 168, .18);
  --nav-fade: linear-gradient(180deg, rgba(11, 7, 9, 0), rgba(11, 7, 9, .92) 34%, #0b0709);
  --sheet-grad: linear-gradient(180deg, #2c1222, #160b11); --veil: rgba(7, 4, 5, .58);
  --tap: 48px;
}

/* ---------- Typographie : Cormorant léger pour les titres, Hanken Grotesk pour le texte ---------- */
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 8.6vw, 2.75rem); line-height: 1.08; }
h2 { font-size: 1.6rem; line-height: 1.15; }
h3 { font-size: 1.3rem; }
.h-small { font-size: 1.45rem; font-weight: 500; }
strong, b { font-weight: 600; }
::selection { background: rgba(163, 40, 95, .5); }
/* Surtitre : 12 px, capitales, .18em, champagne, 600 — décoratif uniquement */
.eyebrow, .me-group__title, .coach-row__k, .wk__row .wk__kind { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--champagne); }
.wk__row .wk__kind { color: var(--oldrose); }
/* Infos fonctionnelles : 13 px minimum en casse normale */
.small, .note, .ledger__meta, .wk__date, .evo-strip span, .slot-day span { font-size: max(.8125rem, 13px); }

/* ---------- Cartes ---------- */
.card { background: var(--card-grad); border: 1px solid var(--line); border-radius: var(--radius); }
.card--hero { border-radius: var(--radius-hero); border-color: rgba(234, 211, 168, .22); box-shadow: var(--shadow), var(--hero-shadow); }
.card--soft { border-radius: var(--radius); }
.wk, .evt-card, .offer { border-radius: var(--radius); }
.offer--featured { border-radius: var(--radius-hero); }

/* ---------- Boutons ---------- */
.btn { min-height: 52px; padding: 0 24px; font: 500 1rem/1.2 var(--font-body); letter-spacing: .01em; text-align: center; }
.btn--primary { background: var(--btn-grad); color: var(--btn-ink); border-color: transparent; box-shadow: var(--btn-glow); }
.btn--primary:hover { filter: brightness(1.05); background: var(--btn-grad); }
.btn--lg { min-height: 56px; font-size: 1rem; }
.card .btn--lg { min-height: 52px; }
.btn--ghost { background: transparent; color: var(--ivory); border-color: var(--btn2-line); font-size: .9375rem; }
.btn--ghost:hover { background: rgba(234, 211, 168, .05); border-color: rgba(234, 211, 168, .5); }
.btn--tertiary, .btn--text { background: none; border: 0; color: var(--btn3-ink); font-size: .9375rem; min-height: 44px; padding: 0 12px; box-shadow: none; }
.btn--danger { background: transparent; color: var(--alert); border-color: rgba(232, 163, 180, .5); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn[disabled] { opacity: .45; box-shadow: none; }

/* ---------- Champs : pilules 48–52 px, libellé 13 px au-dessus ---------- */
input[type='text'], input[type='search'], input[type='date'], input[type='number'], input[type='email'], input[type='url'], input[type='password'], input[type='datetime-local'], input[type='time'], input:not([type]), select, .search-input {
  min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--field-bg); border: 1px solid var(--field-line); color: var(--text); font: 400 1rem var(--font-body); transition: border-color .2s, box-shadow .2s;
}
select { padding-right: 40px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4aab2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
textarea { border-radius: 22px; background: var(--field-bg); border: 1px solid var(--field-line); color: var(--text); font: 400 .9375rem/1.6 var(--font-body); padding: 16px 20px; }
:is(input, select, textarea):focus { outline: none; border-color: var(--field-line-on); box-shadow: 0 0 0 3px rgba(234, 211, 168, .10); }
:is(input, textarea):not(:placeholder-shown):not([type='checkbox']):not([type='radio']) { border-color: var(--field-line-on); }
input[type='file'] { min-height: 0; padding: 8px 0; border: 0; background: none; border-radius: 0; }
.field label, .field legend, .field .label { font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.check input, input[type='checkbox'], input[type='radio'] { accent-color: #d995ab; }
.coach-search__box { min-height: 50px; background: var(--field-bg); border-color: var(--field-line); }
.coach-search__box:focus-within { border-color: var(--field-line-on); box-shadow: 0 0 0 3px rgba(234, 211, 168, .10); }
.coach-search__box input { min-height: 0; padding: 12px 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }

/* ---------- Badges : pilule 12 px / 500, teinte à 10 % ---------- */
.badge { padding: 4px 10px; font: 500 .75rem/1.3 var(--font-body); letter-spacing: .02em; border: 0; color: var(--muted); background: rgba(196, 170, 178, .10); }
.badge--ok { color: var(--ok); background: rgba(159, 211, 176, .10); }
.badge--gold { color: var(--champagne); background: rgba(234, 211, 168, .10); }
.badge--warn { color: var(--alert); background: rgba(232, 163, 180, .10); }
.badge--berry, .badge--info { color: var(--champagne); background: rgba(234, 211, 168, .10); }

/* ---------- Pastilles de filtre ---------- */
.chip { min-height: 42px; padding: 0 16px; border-color: var(--chip-line); color: var(--chip-ink); font: 500 .875rem var(--font-body); background: transparent; }
.chip:hover { color: var(--ivory); border-color: rgba(234, 211, 168, .32); }
.chip[aria-pressed='true'], .chip[aria-current='true'], .chip--on { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); }
.tabs { gap: 8px; }

/* ---------- Barre de progression : 3 px, champagne-rose ---------- */
.bar { height: 3px; background: var(--bar-track); border-radius: 99px; }
.bar i { background: var(--bar-fill); }
.ring__bg { stroke: var(--bar-track); } .ring__fg { stroke: var(--oldrose); }

/* ---------- Accordéon (sections repliées) ---------- */
.fold { border-radius: var(--radius); background: var(--card-grad); border-color: var(--line); }
.fold > summary { min-height: 56px; padding: 0 20px; font-weight: 500; }
.fold > summary .icon { transform: rotate(90deg); transition: transform .2s ease; }
.fold[open] > summary .icon { transform: rotate(-90deg); }
.fold > .list { padding: 0 14px 14px; }

/* ---------- Barre du haut : marque, ✦ solde, recherche, messages (boutons ronds 44 px) ---------- */
.topbar { min-height: 60px; gap: 8px; background: rgba(11, 7, 9, .82); border-bottom: 0; box-shadow: 0 1px 0 rgba(234, 211, 168, .07); }
.topbar__brand { font: 500 1rem var(--font-title); letter-spacing: .38em; color: var(--champagne); }
.topbar__icons { gap: 8px; }
.inbox-chip { width: 44px; height: 44px; border-color: var(--round-line); color: var(--ivory); }
.inbox-chip:hover, .inbox-chip:focus-visible { background: rgba(234, 211, 168, .06); border-color: rgba(234, 211, 168, .34); }
.inbox-chip__n { background: #d995ab; color: #26091a; top: -2px; right: -2px; }
.eclats-chip { min-height: 44px; padding: 0 14px; border-color: var(--round-line); color: var(--champagne); font: 500 .9375rem var(--font-body); }
.back { min-width: 44px; }
@media (max-width: 480px) { .topbar { gap: 6px; } .topbar__brand { letter-spacing: .3em; font-size: .95rem; } .topbar__icons { gap: 6px; } }

/* ---------- Navigation basse : 4 entrées, icône 22 + libellé 12, point champagne ---------- */
.tabbar { background: var(--nav-fade); border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); }
.tabbar__link { position: relative; min-height: 54px; gap: 4px; font-size: .75rem; letter-spacing: .01em; color: #9c8790; }
.tabbar__link .icon { width: 22px; height: 22px; color: inherit; }
.tabbar__link[aria-current='page'] { color: var(--ivory); }
.tabbar__link[aria-current='page'] .icon { color: var(--ivory); }
.tabbar__link[aria-current='page']::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--champagne); }
#view { padding-bottom: calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom)); }
/* App : colonne centrée (lecture confortable) jusqu'à la barre latérale */
@media (max-width: 899px) { #view { max-width: 520px; } }
@media (min-width: 900px) {
  .nav__link { min-height: 48px; border-radius: 999px; }
  .nav__link[aria-current='page'] { background: rgba(234, 211, 168, .07); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .brand { font-weight: 500; color: var(--champagne); letter-spacing: .38em; font-size: 1.45rem; }
}

/* ---------- Avatar ---------- */
.avatar { border: 1px solid rgba(234, 211, 168, .45); background: radial-gradient(circle at 30% 25%, #8a2a55, #3b1530); font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }

/* ---------- Feuille (modale) : depuis le bas sur mobile ---------- */
dialog.modal { border-radius: 32px; background: var(--sheet-grad); border-color: var(--line-strong); padding: 26px 22px 24px; }
dialog.modal::backdrop { background: var(--veil); backdrop-filter: blur(2px); }
dialog.modal h2 { margin-top: 0; }
@media (max-width: 600px) {
  dialog.modal, dialog.modal.modal--wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 32px 32px 0 0; border-bottom: 0; padding: 30px 20px max(24px, env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
  dialog.modal::before { content: ''; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(246, 237, 228, .22); }
  dialog.modal[open] { animation: sheet-up .28s ease-out; }
  .modal__actions { flex-direction: column-reverse; align-items: stretch; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
#toast { background: #2c1222; border-color: rgba(234, 211, 168, .35); font-size: .9375rem; }

/* ---------- États : vide, erreur, succès, chargement ---------- */
.empty h3 { font: 500 1.625rem/1.15 var(--font-title); }
.empty--alert, .card--alert { border-color: rgba(232, 163, 180, .4); }
.spinner { position: relative; width: 44px; height: 44px; border: 0; animation: none; }
.spinner::before { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; color: var(--champagne); animation: eclat-breathe 2.4s ease-in-out infinite; }
@keyframes eclat-breathe { 0%, 100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.08); text-shadow: 0 0 22px rgba(234, 211, 168, .7); } }
@media (prefers-reduced-motion: reduce) { .spinner::before { animation: none; opacity: 1; } dialog.modal[open] { animation: none; } }
.note--demo { border-left-color: var(--champagne); background: rgba(234, 211, 168, .06); }
.offline-banner { background: var(--champagne); color: #26091a; }

/* ---------- Petits composants alignés ---------- */
.coach-row, .wk__row, .step, .inbox__row, .journey li, .phases li, .evo-strip > div { border-radius: 18px; }
.offer__tag { background: var(--champagne); color: #26091a; font-weight: 600; letter-spacing: .14em; font-size: .75rem; }
.offer__price strong, .co-head__price, .points-balance, .evt-countdown, .bravo__gain { font-weight: 500; }
.evo-strip strong { font-weight: 500; }
.slot-day[aria-selected='true'] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); }
.slot-day[aria-selected='true'] span, .slot-day[aria-selected='true'] strong { color: var(--chip-on-ink); }
.slot { font-weight: 500; border-color: var(--chip-line); }
.step-dots li.is-current > * { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); }
.ob-steps li[aria-current] span { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-ink); }
.inbox__row.is-unread .inbox__dot { background: #d995ab; }
.post__quote { border-left-color: #c98a9b; background: rgba(201, 138, 155, .07); }
.ledger .neg { color: var(--alert); }

/* ---------- Explorer : bloc Prêtresse (cadre doré double, cadenas, 7 segments) ---------- */
.priestess { position: relative; display: grid; gap: 12px; margin-top: 28px; padding: 22px 20px 20px; border-radius: var(--radius); color: inherit; text-decoration: none;
  background: radial-gradient(420px 200px at 50% -20%, rgba(234, 211, 168, .14), transparent 70%), var(--card-grad);
  border: 1px solid rgba(234, 211, 168, .5); box-shadow: inset 0 0 0 4px rgba(11, 7, 9, .9), inset 0 0 0 5px rgba(234, 211, 168, .28), var(--shadow); }
.priestess:hover, .priestess:focus-visible { border-color: rgba(234, 211, 168, .75); }
.priestess__top { display: flex; align-items: center; gap: 14px; }
.priestess__seal { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(234, 211, 168, .55); color: var(--champagne); background-size: cover; background-position: center; }
.priestess__seal .icon { width: 22px; height: 22px; }
.priestess .eyebrow, .priestess__title { display: block; }
.priestess__title { font: 500 1.6rem/1.1 var(--font-title); color: var(--ivory); margin: 2px 0 0; }
.priestess__state { margin: 0; color: var(--muted); }
.segments { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 5px; }
.segments i { height: 3px; border-radius: 3px; background: var(--bar-track); }
.segments i.on { background: var(--bar-fill); }
.priestess__count { margin: 0; font-size: .875rem; color: var(--champagne); }

/* =====================================================================================================
   Mode clair : mêmes composants, mêmes tokens (palette ivoire chaud · prune · bordeaux · or vieilli).
   ===================================================================================================== */
html[data-theme='light'] {
  --alert: #b3263f; --ok: #2f7a4a;
  --btn2-line: rgba(163, 40, 95, .32); --btn3-ink: #6e5260;
  --field-bg: #ffffff; --field-line: rgba(122, 40, 75, .18); --field-line-on: rgba(163, 40, 95, .5);
  --chip-line: rgba(122, 40, 75, .22); --chip-ink: #6e5260; --chip-on-bg: #f6dfe5; --chip-on-ink: #7d1d48;
  --bar-track: rgba(122, 40, 75, .12); --bar-fill: linear-gradient(90deg, #c0577d, #b08a3c);
  --card-grad: linear-gradient(165deg, #ffffff, #fcf6f4); --hero-shadow: 0 18px 44px rgba(163, 40, 95, .10);
  --round-line: rgba(122, 40, 75, .2);
  --nav-fade: linear-gradient(180deg, rgba(248, 241, 238, 0), rgba(248, 241, 238, .94) 34%, #f8f1ee);
  --sheet-grad: linear-gradient(180deg, #ffffff, #fbf4f2); --veil: rgba(42, 15, 29, .35);
}
html[data-theme='light'] .btn--ghost { color: var(--berry); }
html[data-theme='light'] .tabbar { background: var(--nav-fade); }
html[data-theme='light'] .tabbar__link { color: #8a7079; }
html[data-theme='light'] .tabbar__link[aria-current='page'], html[data-theme='light'] .tabbar__link[aria-current='page'] .icon { color: var(--berry-d); }
html[data-theme='light'] .tabbar__link[aria-current='page']::after { background: var(--berry); }
html[data-theme='light'] .inbox-chip, html[data-theme='light'] .eclats-chip { color: var(--berry-d); }
html[data-theme='light'] .eclats-chip { color: var(--gold); }
html[data-theme='light'] .inbox-chip__n { background: var(--berry); color: #fff; }
html[data-theme='light'] .topbar { box-shadow: 0 1px 0 rgba(122, 40, 75, .08); }
html[data-theme='light'] .badge { background: rgba(110, 82, 96, .08); color: #6e5260; }
html[data-theme='light'] .badge--ok { background: rgba(47, 122, 74, .1); color: var(--ok); }
html[data-theme='light'] .badge--gold, html[data-theme='light'] .badge--berry, html[data-theme='light'] .badge--info { background: rgba(138, 100, 32, .1); color: var(--gold); }
html[data-theme='light'] .badge--warn { background: rgba(179, 38, 63, .08); color: var(--alert); }
html[data-theme='light'] .offer__tag { background: #7d1d48; color: #fff; }
html[data-theme='light'] .priestess { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(138, 100, 32, .3), var(--shadow); border-color: rgba(138, 100, 32, .5); background: radial-gradient(420px 200px at 50% -20%, rgba(234, 211, 168, .35), transparent 70%), var(--card-grad); }
html[data-theme='light'] .priestess__seal { border-color: rgba(138, 100, 32, .55); color: var(--gold); }
html[data-theme='light'] .priestess__count { color: var(--gold); }
html[data-theme='light'] dialog.modal::before { background: rgba(42, 15, 29, .18); }
html[data-theme='light'] .avatar { background: radial-gradient(circle at 30% 25%, #c0577d, #7d1d48); }
html[data-theme='light'] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e5260' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- Ajustements après captures (375–430 px) ---------- */
:root { color-scheme: dark; }
.me-group__title, .me-group__title.h-small { font: 600 .75rem/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); margin: 0 0 10px; }
/* Onglets et catégories : une seule ligne qui défile, comme sur les maquettes (jamais de page plus large que l'écran) */
.tabs, .etabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px; }
.tabs::-webkit-scrollbar, .etabs::-webkit-scrollbar { display: none; }
.tabs .chip, .etabs .chip { flex: none; }
@media (min-width: 900px) { .tabs, .etabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.tabbar { --nav-fade: linear-gradient(180deg, rgba(11, 7, 9, 0) 0, rgba(11, 7, 9, .96) 16px, #0b0709 28px); padding-top: 22px; }
html[data-theme='light'] .tabbar { --nav-fade: linear-gradient(180deg, rgba(248, 241, 238, 0) 0, rgba(248, 241, 238, .96) 16px, #f8f1ee 28px); }
.co-recap .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 14px; }