/* ==========================================================================
   STUDIO 64 · Espace client — apparence et agencement (système de design v2)
   Chargée après espace-base.css (la mécanique : grilles, tiroirs,
   calendrier, conversation…). Le même dessin que le centre
   d'administration : un fond neutre et chaud, des surfaces nettes, Figtree
   pour l'interface, Montserrat pour les titres, Fraunces en italique pour
   les accents ; la couleur réservée au sens ; le logo et la barre
   tricolore en signature discrète.

   Le thème sombre suit html.ec-sombre (posé dans index.html), que le choix
   soit « sombre » ou « système » sur un appareil réglé en sombre.

   Sommaire
     1. Jetons complémentaires        7. Tableau de bord
     2. Base et typographie           8. Écrans (projet, finances, rendez-vous,
     3. Coquille : menu, barre           support, documents, boutique, profil)
     4. En-têtes de page              9. Connexion
     5. Composants                   10. Mobile : barre du bas, feuille
     6. Fenêtres, tiroirs, palette,  11. Mode démo, accessibilité, mouvement
        notifications, messages      12. La scène de la bannière
   ========================================================================== */

/* ═════════════════════════ 1. JETONS COMPLÉMENTAIRES ═════════════════════════ */
:root {
  --cream: #F7EBD4; --cream-hi: #FCF6EA; --sand: #EFDFC2; --sand-deep: #E6D1AC;
  --encre: #343440; --encre-f: #26252E; --brique: #9D382A; --brique-f: #84301F; --ocre: #D5A359; --ocre-hi: #E8C78E;
  --tricolore: linear-gradient(90deg, var(--encre) 0 33.3%, var(--ocre) 33.3% 66.6%, var(--brique) 66.6%);
  --tricolore-clair: linear-gradient(90deg, var(--cream) 0 33.3%, var(--ocre) 33.3% 66.6%, var(--brique) 66.6%);
  --ease: cubic-bezier(.2,.8,.2,1);
  --ressort: cubic-bezier(.34,1.36,.64,1);
  --coin: 14px;
  --side-w: 256px;
  --champ: #FFFFFF;
  --hover: rgba(31,29,37,.045);
  --focus: 0 0 0 3px rgba(157,56,42,.22);
  --grad-btn: linear-gradient(180deg, #A83F30, #93331F);
}
html.ec-sombre { --champ: #17161C; --hover: rgba(247,235,212,.05); --focus: 0 0 0 3px rgba(229,135,111,.3); --grad-btn: linear-gradient(180deg, #B24534, #9D382A); }

/* ═════════════════════════ 2. BASE ET TYPOGRAPHIE ═════════════════════════ */
body { font: 400 14.5px/1.55 var(--f-b); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before { opacity: var(--grain-op); }
h1, h2, h3, h4 { font-family: var(--f-b); letter-spacing: -.01em; }
h1 { font: 700 clamp(23px, 2.1vw, 28px)/1.15 var(--f-t); letter-spacing: -.025em; }
h2 { font-weight: 650; }
h3 { font-weight: 650; font-size: 15px; }
h1 em, h2 em, .greet h1 span[data-notrad] { font-family: var(--f-s); font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--prune); }
b, strong { font-weight: 650; }
a { color: var(--prune); }
:focus-visible { outline: 2px solid var(--prune); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(213,163,89,.45); color: var(--ink); }
.eyebrow { font: 600 12px/1.3 var(--f-b); letter-spacing: 0; text-transform: none; color: var(--faint); }
.mono { font-family: var(--f-m); font-size: .92em; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 9px 14px; border-radius: 8px; background: var(--encre); color: var(--cream); font: 600 13px var(--f-b); text-decoration: none; }
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }
.v, .sum .v, .kpi .v, .ring b, .date-b b, .shop-prix, .shop-prix-h { font-variant-numeric: tabular-nums; }
* { scrollbar-width: thin; scrollbar-color: rgba(31,29,37,.2) transparent; }
html.ec-sombre * { scrollbar-color: rgba(247,235,212,.16) transparent; }
.logo-sombre { display: none !important; }
html.ec-sombre .logo-clair { display: none !important; }
html.ec-sombre .logo-sombre { display: block !important; }

/* ═════════════════════════ 3. COQUILLE : MENU, BARRE ═════════════════════════ */
@media (min-width: 1081px) { .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.side {
  position: relative; padding: 18px 10px 12px; gap: 2px;
  background: #FBF8F3; border-right: 1px solid var(--line);
}
html.ec-sombre .side { background: #17161C; }
.side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tricolore); z-index: 2; }
html.ec-sombre .side::before { background: var(--tricolore-clair); }
.brand { gap: 10px; padding: 2px 8px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: auto; border-radius: 0; box-shadow: none; transition: transform .5s var(--ressort); }
.brand:hover img { transform: rotate(-6deg) scale(1.04); }
.brand b { font: 700 14.5px/1.1 var(--f-t); letter-spacing: -.01em; color: var(--ink); }
.brand small { margin-top: 3px; font: 500 12px/1.2 var(--f-b); letter-spacing: 0; text-transform: none; color: var(--faint); }
.nav-g { padding: 16px 10px 6px; font: 600 11.5px/1 var(--f-b); letter-spacing: .01em; text-transform: none; color: var(--faint); }
.nav button { position: relative; z-index: 1; height: 34px; gap: 10px; padding: 0 10px; border-radius: 8px; font: 500 13.5px/1 var(--f-b); color: var(--ink-2); transition: background var(--d-1), color var(--d-1); }
.nav button svg.i { width: 17px; height: 17px; color: var(--faint); transition: color var(--d-1), transform .25s var(--ressort); }
.nav button:hover { background: var(--hover); color: var(--ink); }
.nav button:hover svg.i { color: var(--ink-2); }
.nav button:active svg.i { transform: scale(.9); }
.nav button.on { color: var(--ink); font-weight: 600; background: transparent; }
.nav button.on svg.i { color: var(--prune); }
.nav-ind { height: 34px; border-radius: 8px; background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); transition: transform .34s var(--ressort), height .25s var(--ease); }
html.ec-sombre .nav-ind { background: var(--inset); box-shadow: 0 0 0 1px var(--line-2); }
.nav-ind::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--prune); }
.nav button .bdg { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--brique); color: #FFF8F1; font: 650 11px/18px var(--f-b); }
.side-ae {
  margin-top: auto; gap: 11px; padding: 11px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden;
  box-shadow: var(--sh-1); transition: border-color var(--d-1), box-shadow var(--d-1), transform var(--d-2) var(--ease);
}
.side-ae:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.side-ae::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tricolore); }
html.ec-sombre .side-ae::before { background: var(--tricolore-clair); }
.side-ae img { width: 32px; padding: 3px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.side-ae b { font: 650 12.5px/1.25 var(--f-b); color: var(--ink); }
.side-ae span { font-size: 12px; color: var(--muted); }
.side-me { gap: 10px; padding: 10px 6px 2px; margin-top: 10px; border-top: 1px solid var(--line); }
.side-me b { font: 600 13px/1.2 var(--f-b); }
.side-me span { color: var(--faint); }
.av { background: linear-gradient(135deg, #B5523F, var(--brique)); font: 650 12.5px/1 var(--f-b); color: #FFF9F3; }
.av.g { background: var(--encre); color: var(--cream); }
.av.s { background: linear-gradient(135deg, var(--ocre-hi), var(--ocre)); color: var(--encre-f); }
.av.b { background: linear-gradient(135deg, #2F4560, #5B7896); }

.top {
  height: 64px; gap: 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-brand { gap: 9px; font: 700 14px/1 var(--f-t); letter-spacing: -.01em; color: var(--ink); }
.top-brand img { width: 32px; height: auto; border-radius: 0; }
.srch {
  height: 36px; width: min(400px, 40vw); gap: 9px; padding: 0 7px 0 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--faint); box-shadow: var(--sh-1);
  transition: border-color var(--d-1), box-shadow var(--d-1), color var(--d-1);
}
.srch:hover { border-color: var(--line-2); box-shadow: var(--sh-2); color: var(--ink-2); }
.srch span { font-size: 13px; }
.srch kbd { font: 600 10.5px/1 var(--f-b); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--faint); }
.seg-l { padding: 2px; border-radius: 8px; background: var(--inset); border: 1px solid var(--line); }
.seg-l button { padding: 5px 9px; border-radius: 6px; font: 650 11.5px/1 var(--f-b); letter-spacing: .02em; color: var(--muted); }
.seg-l button.on, .seg-l button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(31,29,37,.1), 0 0 0 1px var(--line); }
html.ec-sombre .seg-l button.on, html.ec-sombre .seg-l button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.ib { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); transition: background var(--d-1), color var(--d-1), transform .12s; }
.ib:hover { border-color: transparent; transform: none; box-shadow: none; background: var(--hover); color: var(--ink); }
.ib:active { transform: scale(.94); }
.ib .dot { background: var(--brique); box-shadow: 0 0 0 2px var(--bg); }

.main { max-width: 1320px; padding-block: 28px 96px; padding-inline: clamp(16px, 3vw, 36px); }

/* ═════════════════════════ 4. EN-TÊTES DE PAGE ═════════════════════════ */
.ph { align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ph h1 { display: flex; align-items: center; gap: 12px; }
.ph h1::before { content: ""; flex: none; width: 4px; height: 24px; border-radius: 2px; background: linear-gradient(180deg, var(--encre) 0 33.3%, var(--ocre) 33.3% 66.6%, var(--brique) 66.6%); }
html.ec-sombre .ph h1::before { background: linear-gradient(180deg, var(--cream) 0 33.3%, var(--ocre) 33.3% 66.6%, var(--brique) 66.6%); }
.ph p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.ph .row h1 { margin: 0; }
.view > .tabs { margin-bottom: 22px; }

/* ═════════════════════════ 5. COMPOSANTS ═════════════════════════ */
/* Boutons */
.btn { height: 36px; padding: 0 14px; gap: 7px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 13.5px/1 var(--f-b); letter-spacing: 0; box-shadow: var(--sh-1);
  transition: background var(--d-1), border-color var(--d-1), color var(--d-1), box-shadow var(--d-1), transform .12s; }
.btn:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--faint); background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn.p { background: var(--grad-btn); border-color: transparent; color: var(--on-btn); box-shadow: 0 1px 2px rgba(132,48,31,.3), inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px -6px rgba(157,56,42,.55); }
.btn.p:hover { background: linear-gradient(180deg, #9D382A, #84301F); border-color: transparent; box-shadow: 0 1px 2px rgba(132,48,31,.35), inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -8px rgba(157,56,42,.7); }
.btn.p::after { display: none; }
.btn.g { background: transparent; border-color: transparent; color: var(--prune); box-shadow: none; }
.btn.g:hover { background: var(--prune-v); border-color: transparent; }
.btn.ok { background: var(--feuille); border-color: var(--feuille); color: #FFFDF8; }
html.ec-sombre .btn.ok { color: #10130F; }
.btn.dg, .btn.p.dg { background: var(--rouge); border-color: var(--rouge); color: #FFFDF8; }
.btn.sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 7px; }
.btn.xs { height: 28px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-o { height: 44px; font-size: 14px; border-radius: 10px; }

/* Cartes */
.card, .w { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.w { padding: 18px 20px; }
.w-h { margin-bottom: 14px; }
.w-h h3 { font: 650 15px/1.3 var(--f-b); gap: 10px; }
.w-h h3 .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--prune-v); color: var(--prune); }
.hov { transition: border-color var(--d-1), box-shadow var(--d-1), transform var(--d-2) var(--ease); }
.w.hov:hover, .card.hov:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }

/* Pastilles d'état */
.chip { height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px/1 var(--f-b); letter-spacing: 0; }
.chip.ch-ok { background: var(--feuille-v); color: var(--feuille); }
.chip.ch-wait { background: var(--soleil-v); color: var(--soleil-t); }
.chip.ch-err { background: var(--rouge-v); color: var(--rouge); }
.chip.ch-info { background: var(--bleu-v); color: var(--bleu); }
.chip.ch-pr { background: var(--prune-v); color: var(--prune-f); }
.chip.ch-neu { background: var(--inset); color: var(--muted); }

/* Onglets : soulignés */
.tabs { padding: 0; gap: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; width: 100%; }
.tabs button { height: 42px; padding: 0 12px; border-radius: 0; font: 600 13.5px/1 var(--f-b); color: var(--muted); transition: color var(--d-1); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); }
.tabs .t-ind { top: auto; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--prune); box-shadow: none; }
.tabs button .bdg { background: var(--brique); color: #FFF8F1; border-radius: 6px; font: 650 10.5px/18px var(--f-b); }

/* Segments (choix uniques) */
.segs { gap: 2px; padding: 3px; border-radius: 9px; background: var(--inset); border: 1px solid var(--line); width: max-content; max-width: 100%; }
.segs button { height: 28px; border: 0; border-radius: 6px; background: transparent; font: 600 13px/1 var(--f-b); color: var(--muted); }
.segs button:hover { color: var(--ink); }
.segs button.on { background: var(--surface); border-color: transparent; color: var(--ink); box-shadow: 0 1px 2px rgba(31,29,37,.1), 0 0 0 1px var(--line); }
html.ec-sombre .segs button.on { background: var(--surface-2); color: var(--ink); }

/* Champs */
.fld label, .lab { font: 600 13px/1.3 var(--f-b); color: var(--ink-2); }
.inp { min-height: 38px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--champ); color: var(--ink); font: 400 14px/1.4 var(--f-b); box-shadow: var(--sh-1); transition: border-color var(--d-1), box-shadow var(--d-1); }
.inp:hover { border-color: var(--faint); }
.inp:focus { outline: none; border-color: var(--prune); box-shadow: var(--focus); }
textarea.inp { line-height: 1.55; }
.sw input:checked + span, .sw input:checked ~ span { background: var(--prune); }
.err { color: var(--rouge); font-weight: 600; }

/* États vides, chargement */
.empty b { font-family: var(--f-b); font-weight: 650; }
.sk, .sk-line { background: linear-gradient(90deg, var(--inset) 0%, color-mix(in srgb, var(--inset) 40%, var(--surface)) 50%, var(--inset) 100%); background-size: 200% 100%; }
.spin { border-color: var(--line-2); border-top-color: var(--prune); }

/* Listes */
.lst > div { border-radius: 8px; }
.lst > div.hov:hover { background: var(--hover); }
.fi { border-radius: 8px; }
.unread { background: var(--brique); }

/* Tableaux */
.tbl-w { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.tbl-w table th { font: 600 12px/1.2 var(--f-b); letter-spacing: 0; text-transform: none; color: var(--faint); background: var(--surface-2); }
.tbl-w table tr.hov:hover td { background: var(--surface-2); }

/* ═════════════ 6. FENÊTRES, TIROIRS, PALETTE, NOTIFICATIONS, MESSAGES ═════════════ */
.ovl { background: rgba(20,19,24,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer { background: var(--surface); border-left: 1px solid var(--line); border-radius: 16px 0 0 16px; }
.dr-h { border-bottom: 1px solid var(--line); }
.dr-h h2 { font: 700 19px/1.2 var(--f-t); letter-spacing: -.02em; }
.dr-f { border-top: 1px solid var(--line); background: var(--surface-2); }
.modal { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.modal h2 { font: 700 21px/1.2 var(--f-t); letter-spacing: -.02em; }
.pal { border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-3); }
.pal li button { border-radius: 8px; }
.pal li button.sel, .pal li button:hover { background: var(--inset); color: var(--ink); }
.pal li button.sel { box-shadow: inset 3px 0 0 var(--prune); }
.pnl { border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-3); }
.toasts { z-index: 150; }
.toast { border-radius: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--sh-3); font: 600 13.5px/1.4 var(--f-b); }
html.ec-sombre .toast { background: var(--surface-2); }
.toast svg.i { color: var(--feuille); }
.toast:has(use[href="#i-x"]) svg.i, .toast:has(use[href="#i-lock"]) svg.i { color: var(--rouge); }
.okmark { background: var(--feuille-v) !important; color: var(--feuille); }
.digits input, .codes input { border-radius: 10px; border: 1px solid var(--line-2); background: var(--champ); font: 650 22px/1 var(--f-b); box-shadow: var(--sh-1); }
.digits input:focus, .codes input:focus { border-color: var(--prune); box-shadow: var(--focus); outline: none; }

/* Conversation du support */
.bub.me { background: var(--encre); color: var(--cream-hi); }
.bub.them { background: var(--inset); color: var(--ink); }
html.ec-sombre .bub.me { background: var(--prune-v); color: var(--ink); }
.th-l button.on { background: var(--inset); box-shadow: inset 3px 0 0 var(--prune); }
.comp { border-top: 1px solid var(--line); }

/* ═════════════════════════ 7. TABLEAU DE BORD ═════════════════════════ */
.greet { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.greet .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--prune); text-transform: capitalize; }
.greet .eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--tricolore); }
html.ec-sombre .greet .eyebrow::before { background: var(--tricolore-clair); }
.greet h1 { margin-top: 10px; font-size: clamp(25px, 2.4vw, 32px); }
.greet p { color: var(--muted); }
.proj-pick { height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font: 500 13px var(--f-b); box-shadow: var(--sh-1); }
.dash { gap: 16px; }

/* La bannière du projet : claire, le logo 64 en couleur, l'astre du ciel de Bruxelles */
.hero {
  border-radius: 16px; padding: 26px 28px; border: 1px solid var(--line);
  background: radial-gradient(90% 150% at 100% 0%, rgba(232,199,142,.36) 0%, rgba(232,199,142,0) 58%), var(--surface);
  color: var(--ink); box-shadow: var(--sh-1); --sc-fond: #FFFEFB;
}
html.ec-sombre .hero { background: radial-gradient(90% 150% at 100% 0%, rgba(213,163,89,.15), transparent 58%), var(--surface); --sc-fond: #1B1A21; }
.hero::after { display: none; }
.hero > *:not(.hero-illu) { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--prune); display: inline-flex; align-items: center; gap: 8px; }
.hero .eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--tricolore); }
html.ec-sombre .hero .eyebrow::before { background: var(--tricolore-clair); }
.hero h2 { color: var(--ink); font: 700 clamp(20px, 1.9vw, 25px)/1.15 var(--f-t); letter-spacing: -.025em; }
.hero p { color: var(--muted); }
.steps .st { color: var(--faint); }
.steps .st::before { background: var(--line-2); }
.steps .st.done::before, .steps .st.cur::before { background: linear-gradient(90deg, var(--ocre), var(--brique)); }
.steps .st i { background: var(--surface); border: 1.5px solid var(--line-2); color: var(--muted); }
.steps .st.done i { background: var(--ocre); border-color: var(--ocre); color: var(--encre-f); }
.steps .st.cur i { background: var(--brique); color: #FFF9F3; border-color: var(--brique); animation: pulseEtape 2.2s infinite; }
@keyframes pulseEtape { 0% { box-shadow: 0 0 0 0 rgba(157,56,42,.4); } 70%, 100% { box-shadow: 0 0 0 10px rgba(157,56,42,0); } }
.steps .st.cur { color: var(--ink); font-weight: 600; }
.hero-meta { color: var(--faint); }
.hero-meta span { color: var(--faint); }
.hero-meta b { color: var(--ink); font: 650 14px/1.3 var(--f-b); }
.hero .btn.p { background: var(--grad-btn); border-color: transparent; color: var(--on-btn); box-shadow: 0 1px 2px rgba(132,48,31,.3), inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -8px rgba(157,56,42,.6); }
.hero .btn.p:hover { background: linear-gradient(180deg, #9D382A, #84301F); }
.hero .btn.gh { background: var(--surface); border-color: var(--line-2); color: var(--ink); box-shadow: var(--sh-1); }
.hero .btn.gh:hover { background: var(--surface-2); border-color: var(--faint); color: var(--ink); }
.hero-side { position: relative; }
.ring .bgc { stroke: var(--inset); }
.ring b { font: 650 30px/1 var(--f-b); color: var(--ink); letter-spacing: -.02em; }
.ring span { color: var(--faint); }
.hero-side .ring { filter: drop-shadow(0 10px 18px rgba(157,56,42,.14)); }
.hero-side::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--line); }
.hero .s64-cadre { width: min(420px, 42%); opacity: .3; }
html.ec-sombre .hero .s64-cadre { opacity: .34; }
.hero .s64-logo { height: 112%; bottom: -16%; right: -2%; }
.steps { max-width: 580px; }
.steps .st span { font-size: 11.5px; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
@media (max-width: 1240px) { .steps .st span { white-space: normal; } }

.kpi { position: relative; overflow: hidden; }
.kpi .v { font: 650 26px/1.1 var(--f-b); letter-spacing: -.025em; }
.kpi .ico-k { border-radius: 8px; }
.kpi .eyebrow { color: var(--muted); font-weight: 500; font-size: 13px; }
.kpi .d { color: var(--faint); }
.todo li { border-radius: 10px; border-color: var(--line); background: var(--surface); transition: opacity .3s, transform .35s var(--ease), max-height .4s var(--ease), padding .4s, margin .4s, border-color .2s, background .15s; }
.todo li:hover { background: var(--surface-2); }
.todo li .chk { border-radius: 50%; border-width: 1.5px; }
.todo li.done b { color: var(--faint); }
.tag-pri { background: var(--rouge-v); color: var(--rouge); font: 600 11.5px/1 var(--f-b); border-radius: 6px; }
.date-b { border-radius: 10px; background: var(--prune-v); color: var(--prune-f); }
.date-b b { font-family: var(--f-b); font-weight: 650; }
.ae { border-radius: 16px; overflow: hidden; }
.qa button { border-radius: 10px; font: 600 12.5px/1.25 var(--f-b); transition: transform var(--d-2) var(--ressort), box-shadow var(--d-1), border-color var(--d-1); }
.qa button:hover { transform: translateY(-2px); }
.feed li i { box-shadow: 0 0 0 3px var(--surface); }
.custom { border-radius: 12px; }

/* ═════════════════════════ 8. ÉCRANS ═════════════════════════ */
/* Projet */
.tl li .n { font-family: var(--f-b); font-weight: 650; }
.tl li.done .n { background: var(--feuille); color: #FFFDF8; }
html.ec-sombre .tl li.done .n { color: #10130F; }
.tl li.cur .n { background: var(--brique); color: #FFF9F3; box-shadow: 0 0 0 5px var(--prune-v); }
.bar { background: var(--inset); }
.bar > i { background: linear-gradient(90deg, var(--ocre), var(--brique)); }
.maq-c { border-radius: 12px; overflow: hidden; }
.maq-c .th-tag { background: var(--encre-f); color: var(--cream); font: 600 11.5px var(--f-b); border-radius: 6px; }
.stars i.on, .stars button.on { color: var(--ocre); }
/* Finances */
.sum .w { border-top: 0; position: relative; overflow: hidden; }
.sum .w::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.sum .w:nth-child(1)::before { background: var(--brique); }
.sum .w:nth-child(2)::before { background: var(--ocre); }
.sum .w:nth-child(3)::before { background: var(--encre); }
html.ec-sombre .sum .w:nth-child(3)::before { background: var(--cream); }
.sum .v { font: 650 26px/1.1 var(--f-b); letter-spacing: -.025em; }
.abo { border-radius: 12px; }
/* Rendez-vous */
.types button { border-radius: 10px; transition: border-color var(--d-1), background var(--d-1), box-shadow var(--d-1); }
.types button.on { border-color: var(--prune); background: var(--prune-v); box-shadow: 0 0 0 3px rgba(157,56,42,.12); }
.cal-h b { font: 650 15px var(--f-b); }
.cal button { border-radius: 8px; }
.cal button.dispo { font-weight: 650; color: var(--ink); }
.cal button.sel { background: var(--brique); color: var(--on-btn); }
.cal button.today { box-shadow: inset 0 0 0 1.5px var(--ocre); }
.slots button { border-radius: 8px; font: 600 13px/1 var(--f-b); }
.slots button.sel { background: var(--encre); border-color: var(--encre); color: var(--cream-hi); }
html.ec-sombre .slots button.sel { background: var(--cream); border-color: var(--cream); color: var(--encre-f); }
.rv-sum { border-radius: 14px; }
/* Documents */
.dz { border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--surface); transition: border-color var(--d-1), background var(--d-1); }
.dz:hover { border-color: var(--faint); }
.dz.over { border-color: var(--prune); background: var(--prune-v); }
.fold button { border-radius: 8px; }
.fold button.on { background: var(--inset); color: var(--ink); box-shadow: inset 3px 0 0 var(--prune); }
/* Boutique */
.shop-hero { border-radius: 16px; background: radial-gradient(90% 150% at 100% 0%, rgba(213,163,89,.22), transparent 60%), var(--encre-f); color: var(--cream); }
.shop-hero h2 { color: var(--cream-hi); font-weight: 700; }
.shop-hero p { color: rgba(247,235,212,.74); }
.shop-c { border-radius: 12px; }
.shop-prix, .shop-prix-h { font-family: var(--f-b); font-weight: 650; }
/* Profil */
.pf-sec h3 { font: 650 15px var(--f-b); }
.meth { border-radius: 12px; }
.a2f-carte { border-radius: 12px; }
/* Mon site : l'éditeur vit dans son propre Shadow DOM, réglé par ses variables */
.ms-w { --twe-accent: var(--prune); --twg-fond: var(--surface); --twg-sur-accent: #26252E; }
/* Santé du site : les couleurs d'état de Studio 64 */
.sn { --ok: #2E7A4C; --lent: #B07428; --ko: #B3261E; --maint: #2F5C88; }

/* ═════════════════════════ 9. CONNEXION ═════════════════════════ */
.auth { --ag-voile: linear-gradient(160deg, rgba(38,37,46,.94) 0%, rgba(38,37,46,.78) 48%, rgba(52,52,64,.62) 72%, rgba(38,37,46,.95) 100%);
  --ag-t: #FCF6EA; --ag-t2: rgba(247,235,212,.76); --ag-em: var(--ocre); --ag-puce: rgba(247,235,212,.1); --ag-puce-b: rgba(247,235,212,.22); --ag-puce-t: #FCF6EA; --ag-grain: .1; --ag-bord: 0; }
html.ec-sombre .auth { --ag-voile: linear-gradient(160deg, rgba(24,23,29,.95) 0%, rgba(38,37,46,.8) 48%, rgba(52,52,64,.66) 72%, rgba(24,23,29,.96) 100%); }
.auth-g { padding: 40px clamp(28px, 4vw, 60px); }
.auth-g::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tricolore-clair); z-index: 1; }
.auth-marque img { width: 52px; height: auto; border-radius: 0; }
.auth-marque b { font: 800 16px/1 var(--f-t); letter-spacing: .05em; color: var(--ag-t); }
.auth-marque small { margin-top: 6px; font: 700 10px/1 var(--f-t); letter-spacing: .2em; text-transform: uppercase; color: var(--ocre); }
.auth-g h1 { font: 800 clamp(32px, 3.6vw, 48px)/1.04 var(--f-t); letter-spacing: -.035em; max-width: 13ch; }
.auth-g h1 em { font-family: var(--f-s); font-style: italic; font-weight: 500; color: var(--ag-em); letter-spacing: -.01em; }
.auth-g p { font-size: 15.5px; line-height: 1.6; }
.auth-puces span { font: 600 12.5px/1 var(--f-b); }
.auth-puces span::before { background: var(--ocre); }
.auth-ae { display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 14px 16px; border-radius: 12px; background: rgba(247,235,212,.08); border: 1px solid rgba(247,235,212,.16); }
.auth-ae img { width: 40px; height: auto; padding: 3px; border-radius: 8px; background: #fff; }
.auth-ae b { display: block; font: 650 13px/1.3 var(--f-b); color: var(--ag-t); }
.auth-ae span { display: block; font-size: 12.5px; color: var(--ag-t2); }
.auth-d { background: var(--bg); }
.auth-box {
  width: min(420px, 100%); padding: 32px 30px; gap: 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3);
}
.auth-box h2 { font: 700 25px/1.15 var(--f-t); letter-spacing: -.025em; }
.auth-box .btn-o { border-radius: 10px; }
.auth-sep { font: 500 12px/1 var(--f-b); letter-spacing: 0; text-transform: none; color: var(--faint); }
.auth-lien { font: 600 13px var(--f-b); color: var(--prune); }
.auth-note { font-size: 12.5px; color: var(--muted); }
.souv b { font: 600 13px var(--f-b); }
.auth-th { border-radius: 8px; }

/* ═════════════════════════ 10. MOBILE ═════════════════════════ */
.bnav { background: color-mix(in srgb, var(--surface) 90%, transparent); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.bnav button { font: 600 11px/1.1 var(--f-b); color: var(--faint); }
.bnav button.on { color: var(--ink); }
.bnav button.on svg.i { color: var(--prune); }
.bnav .bdg { background: var(--brique); color: #FFF8F1; }
.sheet { border-radius: 18px 18px 0 0; background: var(--surface); border-top: 1px solid var(--line); }
.sheet-g button { border-radius: 10px; font: 600 12.5px/1.2 var(--f-b); }
@media (min-width: 861px) and (max-width: 1080px) { .app { grid-template-columns: 78px minmax(0, 1fr); } .side::before { display: none; } }
@media (max-width: 860px) {
  .ph h1::before { height: 20px; }
  .hero { border-radius: 14px; padding: 22px; }
  .hero .s64-cadre { width: 100%; opacity: .1; }
  html.ec-sombre .hero .s64-cadre { opacity: .14; }
  .hero-side::before { display: none; }
  .auth-box { padding: 24px 20px; }
}
@media (max-width: 640px) {
  .hero .s64-logo, .hero .s64-disque { display: none !important; }
  .main { padding-block: 20px 110px; }
  .ph { padding-bottom: 14px; margin-bottom: 18px; }
  .w { padding: 16px; }
}

/* ═════════════════ 11. MODE DÉMO, ACCESSIBILITÉ, MOUVEMENT ═════════════════ */
.demo-band {
  position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  padding: 7px 16px; background: var(--encre-f); color: rgba(247,235,212,.85); font: 500 12.5px/1.35 var(--f-b); text-align: center;
}
.demo-band b { color: var(--ocre); font: 650 12px/1 var(--f-b); letter-spacing: .02em; text-transform: none; }
.demo-band a { color: var(--cream); font-weight: 650; text-underline-offset: 3px; }
html.demo .side { top: 0; height: 100vh; }
/* entrée des écrans : légère montée et fondu (déjà orchestrée par .rise et --i) */
.view { animation-duration: .38s; }
@media (prefers-reduced-motion: reduce) {
  .view, .rise, .auth-box { animation: none !important; }
  .nav-ind, .tabs .t-ind { transition: none !important; }
}

/* ═══════════ 12. LA SCÈNE DE LA BANNIÈRE (scene.js), reprise du centre d’administration ═══════════ */
.hero-illu.s64-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
  --sc-astre: #EBC98F; --sc-halo: rgba(213,163,89,.5); --sc-lueur: rgba(213,163,89,.2); }
.s64-scene[data-moment="aube"] { --sc-astre: #EFB27E; --sc-halo: rgba(224,138,90,.55); --sc-lueur: rgba(224,138,90,.22); }
.s64-scene[data-moment="soir"] { --sc-astre: #E3906A; --sc-halo: rgba(192,80,58,.5); --sc-lueur: rgba(157,56,42,.2); }
.s64-scene[data-moment="nuit"] { --sc-lueur: rgba(63,88,115,.2); }
.s64-lueur { position: absolute; inset: 0; background: radial-gradient(520px 340px at 80% 42%, var(--sc-lueur), transparent 72%); }
.s64-cadre { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 48%); }
.s64-astre { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; overflow: hidden; }
.s64-astre.soleil { background: radial-gradient(circle at 35% 35%, #FFF6E2, var(--sc-astre) 62%); box-shadow: 0 0 0 16px rgba(232,199,142,.12), 0 0 90px 14px var(--sc-halo); }
.s64-astre.lune { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: radial-gradient(circle at 40% 38%, #FFF8EA, #EFDFC2); box-shadow: 0 0 50px 6px rgba(213,163,89,.22); }
.s64-astre.lune i { position: absolute; inset: -2px; border-radius: 50%; background: var(--sc-fond, #FFFEFB); }
.s64-disque { position: absolute; right: -70px; bottom: -150px; width: 330px; height: 330px; border-radius: 50%; border: 32px solid rgba(213,163,89,.12); }
.s64-logo { position: absolute; right: 4%; bottom: -16%; height: 128%; width: auto; max-width: none; filter: drop-shadow(0 22px 28px rgba(38,37,46,.18)); }
.s64-logo.sombre { display: none; }
html.ec-sombre .s64-logo.clair { display: none; }
html.ec-sombre .s64-logo.sombre { display: block; filter: drop-shadow(0 26px 34px rgba(0,0,0,.45)); }
.shop-hero .s64-logo.clair { display: none; }
.shop-hero .s64-logo.sombre { display: block; }
.s64-etoiles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ocre); opacity: .7; animation: scScintille 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.45s); }
html.ec-sombre .s64-etoiles i { background: var(--cream); }
.s64-etoiles i:nth-child(3n) { width: 2px; height: 2px; }
.s64-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-fond) 34%, color-mix(in srgb, var(--sc-fond) 70%, transparent) 50%, transparent 68%); }
.s64-entree .s64-logo { animation: scMonte 1.1s var(--ease) both; }
.s64-entree .s64-astre { animation: scLeve 1.6s var(--ease) .15s both; }
.s64-entree .s64-disque { animation: scLeve 1.4s var(--ease) both; }
@keyframes scMonte { from { opacity: 0; transform: translateY(36px); } }
@keyframes scLeve { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.s64-astre.soleil { animation: scRespire 8s ease-in-out infinite; }
@keyframes scRespire { 50% { box-shadow: 0 0 0 22px rgba(232,199,142,.08), 0 0 110px 18px var(--sc-halo); } }
@keyframes scScintille { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .s64-scene *, .s64-entree * { animation: none !important; } }