/* ==========================================================================
   kg-espace.css — LA REFONTE DE L'ESPACE (colonne de gauche, lanceur Agir,
   pastille de crédits). Octobre 2026, d'après la maquette « Espace · lanceur ».

   POURQUOI UNE SURCOUCHE ET PAS UNE RÉÉCRITURE : espace.html porte plus de
   mille lignes de style qui servent aussi les fenêtres, le calendrier, les
   panneaux pro et le détail d'une mission. Les réécrire d'un bloc, c'est
   refaire dix écrans que personne n'a regardés. Cette feuille se charge APRÈS
   le style de la page et APRÈS kg-refonte.css, donc elle gagne à spécificité
   égale ; /theme.css, servi en dernier, garde le dernier mot comme partout.

   CE QU'ELLE NE TOUCHE PAS : la logique (le balisage ne change que pour trois
   cartes de liens qui portaient leur style en ligne, donc invisibles ici) et
   le mode Discuter, dont la mise en page reste exactement la sienne : toutes les
   règles du lanceur visent #viewWelcome.wv-agir, jamais .wv-shell seul.
   ========================================================================== */

:root { --sb-w: 268px; }
body { font-family: var(--kg-font); }

/* --- Colonne de gauche --------------------------------------------------
   Le bleu y est écrit en dur, pas lu dans --accent : en mode Professionnel
   l'accent devient un bleu nuit, qui ne se voit plus sur le fond d'encre. */
#sidebar { background: #0F172A; font-family: var(--kg-font); }
#sidebar :focus-visible { outline: 3px solid #8FB0FF; outline-offset: 2px; }
.sb-logo { font-family: var(--kg-display); font-size: 1.25rem; letter-spacing: -.02em; }
.sb-collapse-btn { width: 36px; height: 36px; background: transparent; border-color: transparent; color: #94A3B8; }
.sb-collapse-btn:hover { background: #16203A; color: #E2E8F0; }

.sb-modeswitch { background: #16203A; border-color: transparent; border-radius: 11px; padding: 4px; gap: 4px; }
.sbms-opt { font-size: .875rem; padding: 9px 6px; color: #CBD5E1; border-radius: 8px; }
.sbms-opt:hover:not(.active) { color: #fff; background: #1E2A4A; }
.sbms-opt.active { background: #1F4FD8; color: #fff; }

.sb-nav-links { padding: 8px 10px; }
.sb-nav-item { font-size: .9375rem; min-height: 40px; padding: 0 12px; gap: 12px; border-radius: 10px; color: #CBD5E1; }
.sb-nav-item:hover { background: #16203A; color: #fff; }
.sb-nav-item.active { background: #1B2A55; color: #fff; font-weight: 600; }
.sb-nav-item.active svg { color: #8FB0FF; }
.sb-nav-item svg { width: 18px; height: 18px; }
.sb-divider { background: #1E293B; }

.sb-section-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: #94A3B8; }
.sb-section-label button { color: #94A3B8; }
.sb-section-label button:hover { color: #E2E8F0; background: #16203A; }
.sb-search { height: 42px; padding: 0 12px; background: #16203A; border-color: #26324F; border-radius: 10px; }
.sb-search:focus-within { border-color: #8FB0FF; }
.sb-search input { font-size: .90625rem; color: #E2E8F0; }
.sb-search input::placeholder, .sb-search svg, .sb-search button { color: #94A3B8; }
.sb-histtabs { background: #16203A; border-radius: 11px; padding: 4px; }
.sb-htab { font-size: .8125rem; color: #CBD5E1; padding: 8px 4px; border-radius: 8px; }
.sb-htab:hover:not(.active) { color: #fff; background: #1E2A4A; }
.sb-htab.active { background: #1F4FD8; }
.sb-back-btn, .sb-new-btn { background: #16203A; border-color: #26324F; color: #E2E8F0; border-radius: 10px; }
.sb-back-btn:hover, .sb-new-btn:hover { background: #1B2A55; }

.sb-date-group { font-size: .75rem; letter-spacing: .08em; color: #94A3B8; }
.sb-mission-item { border-radius: 10px; }
.sb-mission-label { font-size: .90625rem; color: #E2E8F0; }
.sb-mission-date { font-size: .78125rem; color: #94A3B8; }
.sb-cat { font-size: .6875rem; }
.sb-cat-reclamation, .sb-cat-sport, .sb-cat-autre { color: #CBD5E1; }
.sb-empty { font-size: .875rem; color: #94A3B8; }
.sb-mission-del { color: #94A3B8; }

.sb-country-btn { background: #16203A; border-color: #26324F; border-radius: 9px; }

/* Les trois cartes de liens (console, bureau, parrainage) : elles portaient leur
   style en ligne, donc aucune feuille ne pouvait les corriger. */
.sb-linkcard { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: #16203A; border: 1px solid transparent; color: #E2E8F0; text-decoration: none; cursor: pointer;
  font: 600 .875rem/1.3 var(--kg-font); text-align: left; }
.sb-linkcard:hover { background: #1B2A55; color: #fff; }
.sb-linkcard svg { flex-shrink: 0; color: #8FB0FF; }

.sb-footer { border-top-color: #1E293B; padding: 14px 10px; }
.sb-user-btn { border-radius: 10px; }
.sb-avatar, .sb-ap-avatar { background: #1F4FD8; }
.sb-user-email { font-size: .9375rem; font-weight: 600; color: #fff; }
.sb-user-plan { font-size: .8125rem; color: #94A3B8; }
.sb-chevron { color: #94A3B8; }

/* --- Pastille de crédits : l'ambre est la couleur des crédits, partout ---- */
.credits-badge { background: var(--kg-credit-bg); border-color: transparent; color: var(--kg-credit-ink); padding: 6px 14px; font-size: .875rem; }
.credits-badge:hover { background: #FFEBB8; border-color: transparent; }
.topbar-title { font-family: var(--kg-display); font-size: .9375rem; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Lanceur du mode Agir ----------------------------------------------- */
#viewWelcome.wv-agir .wv-shell { max-width: 960px; }
.welcome-title { font-family: var(--kg-display); font-weight: 800; letter-spacing: -.03em; }
.welcome-sub { font-size: 1rem; color: var(--kg-body); }
.kg-composer { border-radius: 20px; border-color: #CBD5E1; box-shadow: var(--kg-shadow); }
.kg-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring), 0 12px 32px -12px rgba(15, 23, 42, .18); }

.wv-qbtn { padding: 8px 14px; font-size: .875rem; border-color: #D5DCE6; }
.wv-qbtn:hover { border-color: var(--accent); background: var(--kg-accent-soft); }

/* Les rubriques : la puce active est pleine d'encre, comme dans la maquette,
   pour qu'on lise d'un coup d'œil laquelle filtre. */
.cap-theme { background: #fff; border: 1px solid #D5DCE6; color: var(--text); font-size: .875rem; font-weight: 600; padding: 8px 14px; }
.cap-theme:hover { background: #fff; border-color: var(--text); }
.cap-theme b { background: #EEF1F5; color: var(--kg-body); font-size: .75rem; }
.cap-theme.on { background: var(--text); border-color: var(--text); color: #fff; }
.cap-theme.on b { background: #fff; color: var(--text); }
#wvLauncher .cap-themes { background: var(--bg); }

/* Cartes du lanceur seulement : la fenêtre des capacités garde les siennes. */
#wvCapList .cap-land-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
#wvCapList .cap-land-card { border-radius: 14px; border-color: var(--border); padding: 16px; gap: 14px; }
#wvCapList .cap-land-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px -12px rgba(31, 79, 216, .35); }
#wvCapList .cap-land-card .cl-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--kg-accent-soft); color: var(--accent); }
#wvCapList .cap-land-card .cl-ic svg { width: 24px; height: 24px; }
#wvCapList .cap-land-card .cl-t { font-family: var(--kg-display); font-size: 1.125rem; line-height: 1.2; color: var(--text); }
#wvCapList .cap-land-card .cl-d { font-size: .875rem; line-height: 1.4; color: var(--kg-body); }

@media (max-width: 640px) {
  #wvCapList .cap-land-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SUITE : détail d'une mission, fenêtres, calendrier. Octobre 2026.
   D'après la maquette « Espace · mission ».

   Les teintes lisent --accent-soft, --accent-border et --accent-dark, pas leurs
   jumeaux --kg-* : ce sont les trois que le mode Professionnel (kg-mode-accent)
   redéfinit en bleu nuit, donc le détail d'une mission, les fenêtres et le
   calendrier suivent le mode sans règle par mode. L'ambre reste réservé aux
   crédits, le vert à ce qui est gratuit ou terminé, le rouge à ce qui échoue.
   Ce qui est écrit en couleur par le script (blocs du calendrier, pastille
   d'état d'une mission) n'est pas touché : seule la feuille parle ici.
   ========================================================================== */

/* --- Commandes communes : toutes les fenêtres et tous les panneaux s'en servent --- */
.btn { border-radius: var(--kg-r-field); font-family: var(--kg-font); font-weight: 700; min-height: 44px; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
.btn-blue:hover { background: var(--accent-dark); box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .45); }
.btn-blue:disabled { background: var(--accent); opacity: .45; }
.btn-green { background: var(--kg-ok); }
.btn-green:hover { background: #09593B; box-shadow: 0 6px 18px -8px rgba(11, 107, 71, .5); }
.btn-outline { border-color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-danger { color: var(--kg-danger); border-color: #F4C7C2; }
.btn-danger:hover { background: var(--kg-danger-bg); border-color: var(--kg-danger); }
.btn-ghost { color: var(--kg-body); border-color: #D5DCE6; }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-relancer { min-height: 40px; border-radius: var(--kg-r-field); background: var(--accent-soft); font-family: var(--kg-font); }
.btn-relancer:hover { background: var(--accent-border); }
.btn-copy, .btn-validate { min-height: 40px; border-radius: var(--kg-r-field); font-family: var(--kg-font); }
.btn-copy:hover, .btn-validate:hover { background: var(--accent-dark); }
.btn-trash { width: 40px; height: 40px; color: #94A3B8; }
.btn-trash:hover { color: var(--kg-danger); background: var(--kg-danger-bg); }
.bar-submit { border-radius: var(--kg-r-field); min-height: 44px; font-family: var(--kg-font); font-weight: 700; }
.bar-submit:hover { background: var(--accent-dark); }
.bar-submit:disabled { background: var(--accent); opacity: .45; }
.chip { min-height: 36px; font-family: var(--kg-font); }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* --- Notifications --------------------------------------------------------- */
.toast { border-radius: 12px; font-family: var(--kg-font); box-shadow: var(--kg-shadow); }
.toast.success { border-left-color: var(--kg-ok); }
.toast.success .toast-ico { color: var(--kg-ok); }
.toast.error { border-left-color: var(--kg-danger); }
.toast.error .toast-ico { color: var(--kg-danger); }
.toast.info { border-left-color: var(--accent); }
.toast.info .toast-ico { color: var(--accent); }

/* --- Fenêtre de confirmation ---------------------------------------------- */
.modal-backdrop, .redact-back { background: rgba(15, 23, 42, .55); }
body .prev-overlay { background: rgba(15, 23, 42, .55); }
.modal-card { border-radius: var(--kg-r-hero); box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .45); font-family: var(--kg-font); }
.modal-icon.danger { background: var(--kg-danger-bg); color: var(--kg-danger); }
.modal-icon.warn { background: var(--kg-credit-bg); color: var(--kg-credit-ink); }
.modal-title { font-family: var(--kg-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.modal-text { font-size: .9375rem; color: var(--kg-body); }

/* Fenêtres « Prévenir » et « détail d'un rendez-vous ». */
body .prev-sheet { border-radius: var(--kg-r-hero); box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .45); font-family: var(--kg-font); }
body .prev-title { font-family: var(--kg-display); font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; }
body .prev-sub { font-size: .8125rem; }
body .prev-close { width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: var(--kg-r-field); color: #64748B; font-size: 1.125rem; }
body .prev-close:hover { background: var(--bg); color: var(--text); }
body .prev-lbl { font-size: .75rem; letter-spacing: .08em; }
body .prev-chip { min-height: 36px; background: #fff; border-color: #D5DCE6; font-family: var(--kg-font); font-size: .8125rem; }
body .prev-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
body .prev-textarea { border-radius: var(--kg-r-field); border: 1.5px solid #D5DCE6; font-size: .9375rem; }
body .prev-textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
body .prev-note { font-size: .8125rem; }

/* Fenêtre « Révision / censure ». */
.redact-modal { border-radius: var(--kg-r-hero); box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .45); font-family: var(--kg-font); }
.redact-head b { font-family: var(--kg-display); font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; }
.redact-head span { color: var(--muted); }
.redact-x { width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: var(--kg-r-field); color: #64748B; }
.redact-x:hover { background: var(--bg); color: var(--text); }
.redact-sec-t { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }

/* --- Fenêtre des réglages -------------------------------------------------
   Les dimensions de la colonne ne valent qu'au-dessus de 768 px : dessous, la
   fenêtre devient une feuille qui monte du bas et sa navigation une rangée. */
.settings-backdrop { background: rgba(15, 23, 42, .55); }
.settings-panel { box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .5); font-family: var(--kg-font); }
.settings-nav { background: var(--bg); border-right-color: var(--border); }
.settings-nav-label { font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.settings-nav-item { border-radius: var(--kg-r-field); color: var(--kg-body); }
.settings-nav-item:hover { background: #E9EDF3; color: var(--text); }
.settings-nav-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.settings-nav-item svg { color: #64748B; }
.settings-nav-item.active svg { color: var(--accent); }
.settings-nav-version { color: var(--muted); }
.settings-header { border-bottom-color: var(--border); }
.settings-header h2 { font-family: var(--kg-display); font-weight: 800; letter-spacing: -.02em; }
.settings-close { width: 40px; height: 40px; border-radius: var(--kg-r-field); color: #64748B; }
.settings-close:hover { background: var(--bg); color: var(--text); }
@media (min-width: 769px) {
  .settings-panel { border-radius: var(--kg-r-hero); }
  .settings-nav { width: 232px; padding: 16px 10px; }
  .settings-nav-item { min-height: 40px; padding: 0 12px; gap: 10px; font-size: .9375rem; }
  .settings-header h2 { font-size: 1.375rem; }
}
@media (max-width: 768px) {
  .settings-panel { border-radius: var(--kg-r-hero) var(--kg-r-hero) 0 0; }
  .settings-nav-item { min-height: 40px; }
  .settings-header h2 { font-size: 1.125rem; }
}

/* --- Fenêtre « Mon compte » : en-tête, cartes, crédits, parrainage, profil ----------
   Les blocs de style posés plus bas dans le corps de la page (sélecteur de profil,
   tuiles, vérification pro) se chargent APRÈS cette feuille : leurs règles sont
   donc reprises avec « body » devant, qui les fait gagner sans !important. */
.acct-hero-avatar { background: var(--accent); font-family: var(--kg-display); }
.acct-hero-email { font-size: 1.0625rem; }
.acct-hero-badge { font-size: .8125rem; }
.acct-card { border-radius: var(--kg-r-card); border-color: var(--border); }
.acct-card-header { border-bottom-color: #EEF1F5; }
.acct-card-title { font-size: .875rem; }
.acct-card-footer { border-top-color: #EEF1F5; }
.credits-big { font-family: var(--kg-display); letter-spacing: -.03em; }
.credits-unit { color: var(--kg-body); }
.credits-pill { font-size: .8125rem; }
.credits-pill.daily { background: var(--kg-ok-bg); color: var(--kg-ok); }
.credits-pill.paid { background: var(--kg-credit-bg); color: var(--kg-credit-ink); }
.credits-divider, .stats-grid { background: #EEF1F5; }
.tx-icon.in { background: var(--kg-ok-bg); color: var(--kg-ok); }
.tx-icon.out { background: var(--kg-danger-bg); color: var(--kg-danger); }
.tx-label { font-size: .875rem; }
.tx-date { color: var(--muted); font-size: .8125rem; }
.tx-amount.in { color: var(--kg-ok); }
.tx-amount.out { color: var(--kg-danger); }
.stat-n { font-family: var(--kg-display); }
.account-label { font-size: .9375rem; }
.account-desc { font-size: .8125rem; }
.link-btn { min-height: 40px; border-radius: var(--kg-r-field); border-color: #D5DCE6; font-family: var(--kg-font); }
.link-btn:hover { background: var(--accent-soft); }
.link-btn.danger { color: var(--kg-danger); }
.link-btn.danger:hover { border-color: var(--kg-danger); background: var(--kg-danger-bg); }
.ref-card-top { background: var(--accent-soft); border-bottom-color: var(--accent-border); }
.ref-card-heading { color: var(--accent-dark); font-family: var(--kg-display); font-size: .9375rem; }
.ref-card-sub { color: var(--kg-body); }
.ref-input, .ref-code-input, .profil-input { min-height: 40px; border-color: #D5DCE6; border-radius: var(--kg-r-field); font-family: var(--kg-font); }
.ref-input:focus, .ref-code-input:focus, .profil-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
.ref-separator { color: var(--muted); }
.danger-card { border-color: #F4C7C2; border-radius: var(--kg-r-card); }
.danger-card .acct-card-header { border-bottom-color: var(--kg-danger-bg); }
.danger-card .acct-card-title, .danger-card .acct-card-title svg { color: var(--kg-danger); }
.profil-label { color: var(--muted); letter-spacing: .06em; }
.contract-row { border-bottom-color: #EEF1F5; }
body .profil-input[readonly] { background: var(--bg); color: var(--kg-body); }

/* Sélecteur Particulier / Professionnel, bandeau de consentement, tuiles pro. */
body .profile-seg { background: var(--bg); border-radius: var(--kg-r-card); }
body .seg-btn { min-height: 44px; border-radius: var(--kg-r-field); font-family: var(--kg-font); font-size: .9375rem; color: var(--kg-body); }
body .seg-btn.active { color: var(--accent-dark); box-shadow: var(--kg-shadow); }
body .seg-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
body .consent-msg { border-radius: var(--kg-r-field); font-size: .875rem; }
body .pro-dash-avatar { font-family: var(--kg-display); }
body .pro-dash-name { font-family: var(--kg-display); font-size: 1.125rem; }
body .pro-dash-plan { font-size: .8125rem; }
body .pro-tile { border-radius: var(--kg-r-card); }
body .pro-tile:hover { border-color: var(--accent); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
body .pro-tile.active { background: var(--accent-soft); }
body .pro-tile-ic { background: var(--accent-soft); border-radius: var(--kg-r-field); }
body .pro-tile-t { font-family: var(--kg-display); font-size: .9375rem; }
body .pro-tile-s { font-size: .8125rem; }
body .pro-tile:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
body .pro-verif { border-radius: var(--kg-r-card); }
body .pro-verif.warn { background: var(--accent-soft); border-color: var(--accent-border); }
body .pro-verif-h { font-family: var(--kg-display); font-size: 1.0625rem; }
body .pro-verif-sub, body .pro-verif-msg { font-size: .875rem; }
body .pro-verif-msg.err { color: var(--kg-danger); }
body .pro-verif-msg.ok { color: var(--kg-ok); }
body .pro-step.done .pro-step-n { background: var(--kg-ok); }
body .pro-step-t { font-size: .875rem; }
body .pro-lock { font-size: .8125rem; }

/* --- Fenêtre des capacités (les cartes du lanceur gardent #wvCapList) -------- */
.cap-popup-section-title { color: var(--muted); font-size: .75rem; }
.cap-popup-section-title::before { background: var(--accent); }
.cap-theme-card, .cap-sector-card { border-color: var(--border); border-radius: var(--kg-r-card); }
.cap-theme-card:hover, .cap-sector-card:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
.cap-theme-title, .cap-sector-title { font-family: var(--kg-display); }
.cap-theme-ex li { color: var(--kg-body); font-size: .8125rem; }
.cap-theme-ex li::before { color: var(--accent); }
.cap-sector-desc { color: var(--muted); font-size: .75rem; }
.cap-land-card { border-color: var(--border); border-radius: var(--kg-r-card); }
.cap-land-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
.cap-land-card .cl-ic { background: var(--accent-soft); color: var(--accent); }
.cap-land-card .cl-t { font-family: var(--kg-display); font-size: .9375rem; }
.cap-land-card .cl-t sup { color: var(--kg-danger); }
.cap-land-card .cl-d { font-size: .8125rem; color: var(--kg-body); }
.cap-land-foot, .cap-none, .cap-fav-hint { color: var(--kg-body); }
.cap-land-limits { color: var(--muted); font-size: .75rem; }
.cap-land-foot .cap-land-ask { color: var(--accent); }
.cap-grp { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
.cap-grp::after { background: var(--border); }
.cap-grp b { background: #EEF1F5; color: var(--kg-body); }
.cap-search input { min-height: 44px; border-color: #D5DCE6; border-radius: var(--kg-r-field); font-family: var(--kg-font); }
.cap-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
.cap-search svg { color: #64748B; }
.cap-fav { width: 32px; height: 32px; color: #94A3B8; }
.cap-fav:hover, .cap-fav.on { color: var(--kg-credit); }
.cap-fav:hover { background: var(--kg-credit-bg); }
.cap-ad { background: var(--accent-soft); border-color: var(--accent-border); border-radius: var(--kg-r-card); }
.cap-ad-cta { min-height: 36px; color: var(--accent); border-color: var(--accent-border); border-radius: var(--kg-r-chip); }
.cap-ad-cta:hover { background: var(--accent-soft); }
.cap-ad-next { color: var(--muted); }
.cap-ad-next:hover { color: var(--accent); }

/* Bannière « profil incomplet », posée entre la barre du haut et la mission. */
#profileNotif { background: var(--accent-soft); border-bottom-color: var(--accent-border); }
.pn-icon { color: var(--accent); }
.pn-text { font-size: .875rem; color: var(--accent-dark); }
.pn-cta { min-height: 36px; border-radius: var(--kg-r-chip); border-color: var(--accent-border); color: var(--accent); font-size: .875rem; }
.pn-cta:hover { background: var(--accent-soft); }

/* Deux boutons côte à côte dans une grille ou une pile à écart : la règle
   « .btn + .btn » ajoutait 10 px au second, qui n'était plus aligné sur le premier. */
[style*="display:grid"] > .btn + .btn,
[style*="display:flex"][style*="gap"] > .btn + .btn { margin-top: 0; }

/* --- Détail d'une mission : en-tête ---------------------------------------- */
.detail-head { background: var(--surface); }
.detail-head::before { background: var(--accent); height: 3px; }
.detail-status { font-size: .8125rem; padding: 4px 12px; }
.detail-title { font-family: var(--kg-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.detail-meta { font-size: .875rem; }

/* Les trois colonnes : plan, suivi, résultat. */
.detail-col { border-right-color: var(--border); }
.detail-col-hd, .section-label { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
.detail-col-hd { padding-bottom: 10px; }
.detail-col-hd::before, .section-label::before { background: var(--accent); }
.dtab { min-height: 44px; border-radius: var(--kg-r-field); background: var(--bg); color: var(--kg-body); border-color: var(--border); font-family: var(--kg-font); font-size: .875rem; }
.dtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dtab:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }

.besoin-edit-input { min-height: 40px; border-color: var(--accent-border); border-radius: var(--kg-r-field); font-size: .9375rem; }
.besoin-edit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); outline: 0; }
.besoin-save-btn { min-height: 40px; border-radius: var(--kg-r-field); font-size: .875rem; }
.besoin-edit-btn { min-height: 32px; color: var(--muted); font-size: .8125rem; }
.besoin-edit-btn:hover { color: var(--accent); }

/* --- Détail : actions du plan, bilan de crédits, recharge --------------------- */
.action-row { border-radius: var(--kg-r-card); border-color: var(--border); }
.action-row:hover { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
.action-row.free { background: var(--kg-ok-bg); border-color: #BDE5D0; }
.action-row.free:hover { box-shadow: 0 8px 24px -12px rgba(11, 107, 71, .3); }
.action-icon { width: 30px; height: 30px; font-size: .75rem; }
.action-icon.free { background: var(--kg-ok); }
.action-icon.paid { background: var(--accent); }
.action-text { font-size: .9375rem; }
.action-badge { font-size: .75rem; padding: 3px 10px; border-radius: 999px; }
.action-badge.free { background: #fff; color: var(--kg-ok); }
.action-badge.paid { background: var(--kg-credit-bg); color: var(--kg-credit-ink); }
.credit-bilan { background: var(--bg); border-radius: var(--kg-r-card); }
.credit-row { font-size: .9375rem; }
.credit-row.total { font-family: var(--kg-display); font-size: 1.0625rem; color: var(--text); }
.cr-pos { color: var(--kg-ok); }
.cr-neg { color: var(--kg-danger); }
.packs-grid .pack-card { border-width: 1.5px; border-radius: var(--kg-r-card); }
.pack-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
.pack-card.selected { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--kg-ring); }
.pack-card .pc-credits { font-family: var(--kg-display); }
.pack-card .pc-price { color: var(--kg-body); }
.pack-card .pc-tag { color: var(--kg-credit-ink); }

/* --- Détail : le suivi pas à pas ------------------------------------------------ */
.tl-item { border-radius: var(--kg-r-card); }
.tl-item.tl-done { background: var(--kg-ok-bg); }
.tl-item.tl-active { background: var(--accent-soft); border-color: var(--accent-border); box-shadow: 0 8px 24px -14px rgba(15, 23, 42, .3); }
.tl-item.tl-pending:hover { background: var(--bg); }
.tl-dot.done { background: var(--kg-ok); box-shadow: none; }
.tl-dot.active { box-shadow: 0 0 0 4px var(--kg-ring); animation: kgTlPulse 1.5s infinite; }
.tl-dot.pending { border-color: #B6C0CF; }
@keyframes kgTlPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--kg-ring); } 50% { box-shadow: 0 0 0 7px var(--kg-ring); } }
@media (prefers-reduced-motion: reduce) { .tl-dot.active { animation: none; } }
.tl-bar { background: var(--border); }
.tl-label { font-size: .9375rem; }
.tl-item.tl-done .tl-label { color: var(--kg-ok); }
.tl-item.tl-active .tl-label { color: var(--accent-dark); }
.tl-item.tl-pending .tl-label { color: var(--kg-body); }
.tl-dur, .tl-time { color: var(--muted); font-size: .8125rem; }
.tl-msg { background: var(--surface); border-radius: var(--kg-r-chip); font-size: .875rem; color: var(--kg-body); border-left-color: var(--accent); }
.readjust-box { border-radius: var(--kg-r-card); background: var(--kg-credit-bg); border-color: #F3D78E; }
.readjust-box p { color: var(--kg-credit-ink); font-size: .875rem; }
.readjust-box textarea { border-radius: var(--kg-r-field); border-color: #E6C467; font-size: .9375rem; }
.readjust-box textarea:focus { border-color: var(--kg-credit); box-shadow: 0 0 0 4px #FBE7B0; outline: 0; }

/* --- Détail : le résultat -------------------------------------------------------- */
.result-box { border-radius: var(--kg-r-hero); }
.result-box.success { background: var(--kg-ok-bg); border-color: #BDE5D0; }
.result-box.stopped { background: var(--kg-danger-bg); border-color: #F4C7C2; }
.result-box .result-title { font-family: var(--kg-display); font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; }
.result-box.success .result-title { color: var(--kg-ok); }
.result-box.stopped .result-title { color: var(--kg-danger); }
.result-box .result-body { font-size: .9375rem; color: var(--kg-body); }
.cr-edit-btn { min-height: 40px; border-radius: var(--kg-r-field); color: var(--kg-ok); border-color: #BDE5D0; font-family: var(--kg-font); }
.cr-edit-btn:hover { background: var(--kg-ok-bg); }
.cr-edit-hint { color: var(--kg-ok); font-size: .8125rem; }
.cr-edit-area { border-color: #BDE5D0; border-radius: var(--kg-r-field); font-size: .9375rem; }
.cr-edit-area:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); outline: 0; }
.fmt-chip { min-height: 32px; font-family: var(--kg-font); color: var(--kg-body); border-color: #D5DCE6; background: #fff; }
.fmt-chip:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); }
.fmt-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* --- Détail : la conversation de précisions --------------------------------------- */
.cq-b { font-size: 1rem; }
.cq-bot { background: #EEF1F5; color: var(--text); }
.cq-me { background: var(--accent); }
.cq-muted, .cq-step { color: var(--muted); }
.cq-input { border-color: #D5DCE6; border-radius: var(--kg-r-field); font-family: var(--kg-font); min-height: 44px; }
.cq-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
.cq-send { min-height: 44px; border-radius: var(--kg-r-field); }
.cq-mic { border-radius: var(--kg-r-field); border-color: #D5DCE6; }
.cq-mic:hover { background: var(--accent-soft); border-color: var(--accent); }
.cq-mic.cq-mic-on { background: var(--kg-danger); border-color: var(--kg-danger); }
.cq-chip { min-height: 40px; color: var(--accent-dark); border-color: var(--accent-border); font-family: var(--kg-font); }
.cq-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.cq-link { color: var(--kg-body); font-size: .875rem; min-height: 32px; }

/* La facture qui se dessine pendant la discussion. */
.fx-doc { border-radius: var(--kg-r-card); border-color: var(--border); box-shadow: var(--kg-shadow); font-size: .875rem; }
.fx-t { color: var(--accent); }
.fx-sub, .fx-lab, .fx-note, .fx-tab th { color: var(--muted); }
.fx-vide { color: #94A3B8; }
.fx-tab td { border-bottom-color: #EEF1F5; }
@keyframes fxpulse { from { background: var(--accent-soft); } to { background: #fff; } }

/* La co-validation : le fil de questions-réponses avant la production. */
.val-wrap { border-color: var(--accent-border); border-radius: var(--kg-r-hero); }
.val-head { background: var(--accent); }
.val-head b { font-family: var(--kg-display); }
.val-progress, .val-skip { color: var(--muted); }
.val-skip:hover { color: var(--text); }
.val-msg.bot { background: #EEF1F5; color: var(--text); }
.val-msg.me { background: var(--accent); }
.val-ref, .val-current .vc-step { color: var(--accent); }
.val-chip { min-height: 40px; background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); font-family: var(--kg-font); }
.val-chip:hover { background: var(--accent-border); }
.val-chip.sugg { background: var(--kg-ok-bg); border-color: #BDE5D0; color: var(--kg-ok); }
.val-chip.sugg:hover { background: #CDEFDD; }
.val-field input { min-height: 44px; border-color: #D5DCE6; border-radius: var(--kg-r-field); font-family: var(--kg-font); }
.val-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); outline: 0; }
.val-rednote { color: var(--kg-ok); }
.val-current .vc-ref { background: var(--accent-soft); border-left-color: var(--accent); color: var(--kg-body); }
.val-current .vc-q { font-family: var(--kg-display); font-size: 1.125rem; letter-spacing: -.01em; }
.val-hist > summary { color: var(--kg-body); min-height: 40px; display: flex; align-items: center; }

/* --- Calendrier de la semaine (rendez-vous) ----------------------------------------- */
body .kgcal-nav button { min-height: 40px; min-width: 40px; padding: 0 14px; border-color: #D5DCE6; border-radius: var(--kg-r-field); font-family: var(--kg-font); font-weight: 600; color: var(--text); }
body .kgcal-nav button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
body .kgcal-nav .kgcal-today { font-size: .875rem; }
body .kgcal-nav button:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
body .kgcal-label { font-family: var(--kg-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
body .kgcal-scroll { border-radius: var(--kg-r-card); border-color: var(--border); box-shadow: var(--kg-shadow); }
body .kgcal-corner, body .kgcal-dhead { background: var(--bg); }
body .kgcal-dhead { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
body .kgcal-dhead.today { background: var(--accent-soft); color: var(--accent-dark); }
body .kgcal-dnum { font-family: var(--kg-display); font-size: 1.125rem; }
body .kgcal-dhead.today .kgcal-dnum { color: var(--accent-dark); }
body .kgcal-hr { font-size: .75rem; color: var(--muted); }
body .kgcal-col { border-left-color: var(--border); }
body .kgcal-col.today { background: color-mix(in srgb, var(--accent) 4%, #fff); }
body .kgcal-ev { border-radius: var(--kg-r-chip); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
body .kgcal-ev-t { font-size: .75rem; }
body .kgcal-ev-s { font-size: .6875rem; opacity: .9; }
body .kgcal-ev:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
body .kgcal-now { background: var(--kg-danger); }
body .kgcal-now::before { background: var(--kg-danger); }
body .kgcal-empty { font-size: .875rem; }
body .prov-view-fab { border-radius: var(--kg-r-card); border-color: var(--border); box-shadow: var(--kg-shadow); }

/* --- Téléphone ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .sb-mobile-toggle { width: 44px; height: 44px; border-radius: var(--kg-r-field); }
  .detail-title { font-size: 1.3125rem; }
}
@media (max-width: 640px) {
  body .kgcal-dhead { font-size: .6875rem; letter-spacing: 0; }
  body .kgcal-dnum { font-size: 1rem; }
  body .kgcal-hr { font-size: .65rem; }
  body .kgcal-ev-t { font-size: .6875rem; }
  body .kgcal-nav button { padding: 0 12px; }
  body .kgcal-label { min-width: 0; font-size: 1rem; }
}
@media (max-width: 768px) {
  #profileNotif { flex-wrap: wrap; row-gap: 8px; }
  .pn-text { flex: 1 1 200px; }
}

/* Les cartes de la fenêtre des capacités : le nom d'une mission est un mot que l'on
   ne coupe pas. Trois colonnes dans 548 px le coupaient en deux (« Automati-ser ») ;
   la grille s'adapte donc à la place disponible : deux colonnes sur grand écran,
   une sur téléphone. Le lanceur de la page garde ses propres colonnes (#wvCapList). */
.cap-land-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cap-land-card .cl-d { overflow-wrap: break-word; }

/* Les rubriques de la fenêtre des capacités : sur téléphone, neuf puces à la ligne
   mangeaient tout l'écran (la barre est collante, elle restait donc à plein
   écran pendant le défilement). Une seule ligne qui défile, comme dans le lanceur. */
@media (max-width: 640px) {
  .cap-themes { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; }
  .cap-themes::-webkit-scrollbar { display: none; }
  .cap-theme { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
}
/* Un enfant de grille garde la largeur de son contenu : sans cela, la rangée de
   puces qui défile élargissait toute la fenêtre au lieu de défiler dedans. */
.ob-features > * { min-width: 0; }

/* ==========================================================================
   SUITE : l'espace professionnel (rendez-vous, commandes) et le QR code. Octobre 2026.

   Ces deux familles vivent dans des blocs <style> du CORPS de la page, chargés
   après cette feuille : toutes les règles sont donc préfixées « body » (voir plus
   haut). Les couleurs lisent --accent, --accent-soft, --accent-border et
   --accent-dark : en mode Professionnel, qui est précisément celui où l'on les
   voit, elles sont déjà en bleu nuit. Aucune règle par mode.
   ========================================================================== */

/* La discussion avec le majordome (.maj-*) est traitée plus bas, dans sa propre section :
   elle ne dépend pas de ces blocs <style> et se règle par #viewWelcome:not(.wv-agir). */

/* --- Vue principale : titre, bandeau de chiffres, filtres ---------------------------- */
body .prov-title { font-family: var(--kg-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
body .prov-sub { font-size: .9375rem; color: var(--kg-body); }
body .prov-stat { border-radius: var(--kg-r-card); }
body .prov-stat-n { font-family: var(--kg-display); font-size: 1.75rem; }
body .prov-stat-l { font-size: .8125rem; }
body .prov-chip { min-height: 40px; padding: 0 16px; border-color: #D5DCE6; color: var(--kg-body); font-family: var(--kg-font); font-size: .875rem; }
body .prov-chip:hover { border-color: var(--text); color: var(--text); }
body .prov-chip.active { background: var(--text); border-color: var(--text); color: #fff; }
body .prov-chip-n { background: #EEF1F5; color: var(--kg-body); font-size: .75rem; }
body .prov-chip.active .prov-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }
body .prov-dayhead { font-size: .8125rem; letter-spacing: .02em; color: var(--muted); border-bottom-color: var(--border); }
body .prov-empty-ic { background: var(--accent-soft); }
body .prov-empty-t { font-family: var(--kg-display); font-size: 1.25rem; letter-spacing: -.02em; }
body .prov-empty-s { font-size: .9375rem; color: var(--kg-body); }
body .kgcal-nav, body .prov-head-actions { font-family: var(--kg-font); }

/* --- Cartes de rendez-vous et de commande -------------------------------------------- */
body .resa-card { border-radius: var(--kg-r-card); border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body .resa-card:hover { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
body .resa-time-h { font-family: var(--kg-display); font-size: 1.1875rem; letter-spacing: -.01em; }
body .resa-time-d { font-size: .75rem; }
body .resa-name { font-family: var(--kg-display); font-size: 1.0625rem; letter-spacing: -.01em; }
body .resa-badge { font-size: .75rem; padding: 3px 10px; background: var(--kg-ok-bg); color: var(--kg-ok); }
body .resa-badge.encours { background: var(--accent-soft); color: var(--accent-dark); }
body .resa-badge.livre { background: #EEF1F5; color: var(--kg-body); }
body .resa-line { font-size: .875rem; color: var(--kg-body); }
body .resa-line a { color: var(--accent); }
body .resa-motif { background: var(--bg); border-radius: var(--kg-r-field); font-size: .875rem; }
body .resa-fb { background: var(--kg-credit-bg); border-color: #F3D78E; border-radius: var(--kg-r-field); }
body .resa-fb .stars { color: var(--kg-credit); }
body .resa-btn { min-height: 40px; padding: 0 14px; border-radius: var(--kg-r-field); border-color: #D5DCE6; font-family: var(--kg-font); font-size: .875rem; font-weight: 700; }
body .resa-btn:hover { border-color: var(--text); }
body .resa-btn.notify:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
body .resa-btn.call { background: var(--accent-soft); border-color: var(--accent-border); }
body .resa-btn.refuse { color: var(--kg-danger); border-color: #F4C7C2; }
body .resa-btn.refuse:hover { background: var(--kg-danger-bg); }
body .resa-btn:focus-visible, body .cmd-paid-btn:focus-visible, body .cmd-refuse-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }

/* --- Commandes reçues : chiffres du jour, de la semaine, du mois -------------------------- */
body .cmd-stat { border-radius: var(--kg-r-card); }
body .cmd-stat.today { background: var(--accent-soft); border-color: var(--accent-border); }
body .cmd-stat-ic { border-radius: var(--kg-r-field); }
body .cmd-stat-label { font-size: .875rem; color: var(--kg-body); }
body .cmd-stat-money { font-family: var(--kg-display); font-size: 2rem; letter-spacing: -.03em; }
body .cmd-stat-n { font-size: .9375rem; }
body .cmd-bestseller { background: var(--kg-credit-bg); border-color: #F3D78E; border-radius: var(--kg-r-card); }
body .cmd-list-title { font-family: var(--kg-display); font-size: 1.0625rem; letter-spacing: -.01em; }
body .cmd-paid-btn { min-height: 36px; padding: 0 14px; border-radius: var(--kg-r-field); background: var(--accent); font-family: var(--kg-font); font-size: .875rem; }
body .cmd-paid-btn:hover { background: var(--accent-dark); }
body .cmd-refuse-btn { min-height: 36px; padding: 0 14px; border-radius: var(--kg-r-field); color: var(--kg-danger); border-color: #F4C7C2; font-family: var(--kg-font); font-size: .875rem; }
body .cmd-refuse-btn:hover { background: var(--kg-danger-bg); }

/* --- Fenêtre du QR code et fiche d'une commande ---------------------------------------------- */
body .qr-overlay { background: rgba(15, 23, 42, .55); }
body .qr-panel { border-radius: var(--kg-r-hero); box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .45); font-family: var(--kg-font); }
body .qr-head { background: var(--accent); }
body .qr-head strong { font-family: var(--kg-display); font-size: 1.125rem; letter-spacing: -.01em; }
body .qr-head button { width: 40px; height: 40px; border-radius: var(--kg-r-field); }
body .qr-head button:hover { background: rgba(255, 255, 255, .28); }
body .qr-card { border-radius: var(--kg-r-card); }
body .qr-badge-used { background: var(--kg-danger-bg); color: var(--kg-danger); }
body .qr-badge-done { background: var(--kg-ok-bg); border-color: #BDE5D0; color: var(--kg-ok); }
body .qr-open { color: var(--accent); }
body .qr-hist-btn { min-height: 44px; border-radius: var(--kg-r-field); background: var(--bg); }
body .qr-hist-btn:hover { background: #E9EDF3; }
body .qr-scan-wrap { border-radius: var(--kg-r-card); }
body .qr-manual-row input { min-height: 44px; border-color: #D5DCE6; border-radius: var(--kg-r-field); }
body .qr-manual-row input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--kg-ring); }
body .qr-manual-row button { min-height: 44px; border-radius: var(--kg-r-field); }
body .cmd-sec-t { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
body .cmd-ref, body .cmd-item-opt, body .cmd-qr-cap { color: var(--kg-body); }
body .cmd-statusbig { font-size: .875rem; }
body .cmd-eta { color: var(--accent-dark); }
body .cmd-step.pending, body .cmd-step-ts { color: var(--muted); }
body .cmd-item { border-bottom-color: #EEF1F5; }
body .cmd-btn { min-height: 40px; border-radius: var(--kg-r-field); border-color: #D5DCE6; }
body .cmd-btn:hover { background: var(--bg); }
body .cmd-btn.primary:hover { background: var(--accent-dark); }
body .cmd-shared { background: var(--kg-ok-bg); border-color: #BDE5D0; color: var(--kg-ok); border-radius: var(--kg-r-field); }

/* ==========================================================================
   LE MODE DISCUTER, REPENSÉ POUR ÊTRE PLUS VIVANT. Octobre 2026.

   REVIREMENT ASSUMÉ : jusqu'ici ce mode devait rester intact (demande du
   5 octobre, quand seul le lanceur Agir était refait). Jidep demande maintenant
   explicitement qu'il soit plus fun et plus attractif ; le revoir est donc la
   demande, pas un débordement.

   Tout est porté par #viewWelcome:not(.wv-agir) : le mode Agir, lui, ne bouge
   pas d'un pixel. L'identifiant donne la spécificité qu'il faut pour passer
   devant les blocs <style> du corps, sans « body » ni !important.

   Les mouvements (flottement, rotation de l'anneau, bulles qui jaillissent, points
   de saisie qui rebondissent) sont décoratifs : ils ne portent aucune information
   et s'arrêtent sous prefers-reduced-motion.
   ========================================================================== */

/* La mascotte n'existe qu'ici : masquée partout ailleurs. */
.wv-mascot { display: none; }

/* --- Fond : trois taches de couleur, floues, qui donnent de la chaleur ------------- */
#viewWelcome:not(.wv-agir) {
  background:
    radial-gradient(560px 280px at 10% 0%, rgba(31, 79, 216, .11), transparent 70%),
    radial-gradient(480px 280px at 94% 6%, rgba(139, 92, 246, .11), transparent 70%),
    radial-gradient(560px 320px at 80% 100%, rgba(232, 163, 23, .12), transparent 70%),
    var(--bg);
}
/* Centré tant qu'il y a de la place, jamais rogné quand il n'y en a plus : des marges
   automatiques, là où « justify-content:center » coupe le haut du contenu. */
#viewWelcome:not(.wv-agir) .wv-hero { margin-top: auto; }
#viewWelcome:not(.wv-agir) .wv-dock { margin-bottom: auto; }

/* --- En-tête : une mascotte qui flotte dans son anneau de couleurs ------------------ */
#viewWelcome:not(.wv-agir) .wv-hero { flex: 0 0 auto; min-height: 0; padding: 8px 0 6px; }
#viewWelcome:not(.wv-agir) .wv-mascot { display: block; position: relative; width: 92px; height: 92px; margin: 14px 0 12px; }
.wv-mascot img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: #0A1426; border: 3px solid #fff; box-shadow: 0 14px 32px -10px rgba(31, 79, 216, .6); }
.wv-mascot-ring { position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, #1F4FD8, #8B5CF6, #E8A317, #12A06B, #1F4FD8); }
.wv-spark { position: absolute; z-index: 2; width: 14px; height: 14px; background: linear-gradient(135deg, #FFD36B, #E8A317);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.wv-spark.s1 { top: -6px; right: -12px; }
.wv-spark.s2 { bottom: 6px; left: -18px; width: 10px; height: 10px; background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.wv-spark.s3 { bottom: -8px; right: -4px; width: 9px; height: 9px; background: linear-gradient(135deg, #6EA8FF, #1F4FD8); }
#viewWelcome:not(.wv-agir) .welcome-title {
  font-family: var(--kg-display); font-size: clamp(2rem, 4.6vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  background: linear-gradient(100deg, var(--text) 0%, var(--accent) 58%, #8B5CF6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px;
}
#viewWelcome:not(.wv-agir) .welcome-sub { font-size: 1.0625rem; line-height: 1.5; color: var(--kg-body); max-width: 31em; margin-top: 8px; }

/* --- Le fil : des bulles qui jaillissent --------------------------------------------- */
#viewWelcome:not(.wv-agir) .maj-thread { gap: 14px; padding: 8px 4px 10px; max-height: min(50vh, 460px); }
#viewWelcome:not(.wv-agir) .maj-msg { font-size: 1.0625rem; line-height: 1.55; max-width: min(84%, 580px); }
#viewWelcome:not(.wv-agir) .maj-row.bot .maj-msg {
  background: #fff; border: 1px solid var(--accent-border); border-radius: 20px 20px 20px 6px;
  box-shadow: 0 10px 26px -16px rgba(31, 79, 216, .5);
}
#viewWelcome:not(.wv-agir) .maj-row.me .maj-msg {
  color: #fff; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #7C9BFF) 100%);
  box-shadow: 0 12px 26px -12px rgba(31, 79, 216, .65);
}
#viewWelcome:not(.wv-agir) .maj-av { width: 40px; height: 40px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent-border), 0 8px 16px -8px rgba(15, 23, 42, .6); }
#viewWelcome:not(.wv-agir) .maj-msg a { text-underline-offset: 3px; }
/* « Je réfléchis… » : trois points aux couleurs de la marque. */
#viewWelcome:not(.wv-agir) .maj-typing { display: inline-flex; align-items: center; padding: 4px 2px; }
#viewWelcome:not(.wv-agir) .maj-typing span { width: 9px; height: 9px; margin: 0 3px; background: var(--accent); }
#viewWelcome:not(.wv-agir) .maj-typing span:nth-child(2) { background: #8B5CF6; }
#viewWelcome:not(.wv-agir) .maj-typing span:nth-child(3) { background: var(--kg-credit); }

/* --- Amorces et raccourcis : des cartes colorées, pas une liste grise -------------------- */
#viewWelcome:not(.wv-agir) .maj-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; }
.maj-cap { grid-column: 1 / -1; margin: 8px 2px 0; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.maj-cap:first-child { margin-top: 0; }
.maj-starters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.maj-starter { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--accent-border); border-radius: 999px; background: #fff; color: var(--accent-dark);
  font: 700 .9375rem/1 var(--kg-font); cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s, border-color .16s; }
.maj-starter:hover { transform: translateY(-2px); background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 10px 20px -12px rgba(31, 79, 216, .55); }
.maj-starter:active { transform: translateY(0) scale(.97); }
.maj-starter:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
#viewWelcome:not(.wv-agir) .sg-row {
  min-height: 64px; padding: 12px 14px; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  font-size: 1rem; font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
#viewWelcome:not(.wv-agir) .sg-row::after { content: '→'; margin-left: auto; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .16s, transform .16s; }
#viewWelcome:not(.wv-agir) .sg-row:hover { background: #fff; transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 16px 30px -18px rgba(15, 23, 42, .4); }
#viewWelcome:not(.wv-agir) .sg-row:hover::after { opacity: 1; transform: translateX(0); }
#viewWelcome:not(.wv-agir) .sg-row:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }
#viewWelcome:not(.wv-agir) .sg-ic { width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
#viewWelcome:not(.wv-agir) .sg-ic svg { width: 22px; height: 22px; }
#viewWelcome:not(.wv-agir) .sg-row:nth-of-type(2) .sg-ic { background: #EEEBFC; color: #5B3DD8; }
#viewWelcome:not(.wv-agir) .sg-row:nth-of-type(3) .sg-ic { background: var(--kg-credit-bg); color: var(--kg-credit-ink); }
#viewWelcome:not(.wv-agir) .sg-row:nth-of-type(4) .sg-ic { background: var(--kg-ok-bg); color: var(--kg-ok); }

/* --- La zone de saisie : une pastille au contour dégradé qui s'illumine -------------------- */
#viewWelcome:not(.wv-agir) .maj-composer2 {
  padding: 10px 10px 10px 22px; border: 2px solid transparent; border-radius: 30px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1F4FD8, #8B5CF6 55%, #E8A317) border-box;
  box-shadow: 0 20px 44px -22px rgba(31, 79, 216, .55); transition: box-shadow .2s;
}
/* Sur un écran court, la saisie reste collée en bas pendant que le reste défile dessous. */
#viewWelcome:not(.wv-agir) .maj-composer2 { position: sticky; bottom: 10px; z-index: 5; }
#viewWelcome:not(.wv-agir) .maj-composer2:focus-within { box-shadow: 0 0 0 5px var(--kg-ring), 0 24px 48px -20px rgba(31, 79, 216, .6); }
#viewWelcome:not(.wv-agir) .maj-input2 { font-size: 1.125rem; }
#viewWelcome:not(.wv-agir) .maj-input2::placeholder { color: #7A8799; }
#viewWelcome:not(.wv-agir) .maj-send2 {
  width: 48px; height: 48px; background: linear-gradient(135deg, var(--accent), #7C5CE6);
  box-shadow: 0 10px 20px -8px rgba(31, 79, 216, .7); transition: transform .18s, box-shadow .18s;
}
#viewWelcome:not(.wv-agir) .maj-send2:hover { transform: scale(1.1) rotate(-8deg); }
#viewWelcome:not(.wv-agir) .maj-send2:active { transform: scale(.94); }
#viewWelcome:not(.wv-agir) .maj-send2:disabled { opacity: .5; transform: none; cursor: default; }
#viewWelcome:not(.wv-agir) .maj-send2:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--kg-ring); }

/* --- Mouvement : seulement pour qui ne l'a pas désactivé -------------------------------------- */
@keyframes kgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kgSpin { to { transform: rotate(360deg); } }
@keyframes kgTwinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes kgPop { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes kgBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  #viewWelcome:not(.wv-agir) .wv-mascot { animation: kgFloat 4.2s ease-in-out infinite; }
  .wv-mascot-ring { animation: kgSpin 7s linear infinite; }
  .wv-spark { animation: kgTwinkle 2.6s ease-in-out infinite; }
  .wv-spark.s2 { animation-delay: .8s; }
  .wv-spark.s3 { animation-delay: 1.6s; }
  #viewWelcome:not(.wv-agir) .maj-row { animation: kgPop .42s cubic-bezier(.2, .9, .3, 1.25) both; }
  #viewWelcome:not(.wv-agir) .maj-typing span { animation: kgBounce 1s ease-in-out infinite; }
  #viewWelcome:not(.wv-agir) .maj-typing span:nth-child(2) { animation-delay: .15s; }
  #viewWelcome:not(.wv-agir) .maj-typing span:nth-child(3) { animation-delay: .3s; }
  #viewWelcome:not(.wv-agir) .maj-chips > * { animation: kgPop .5s cubic-bezier(.2, .9, .3, 1.2) both; }
  #viewWelcome:not(.wv-agir) .maj-chips > :nth-child(3) { animation-delay: .08s; }
  #viewWelcome:not(.wv-agir) .maj-chips > :nth-child(n+4) { animation-delay: .16s; }
}

/* --- Écrans courts et téléphone : tout doit tenir sans écraser la conversation -------------------- */
@media (max-height: 940px) {
  #viewWelcome:not(.wv-agir) .wv-mascot { width: 68px; height: 68px; margin: 8px 0 8px; }
  #viewWelcome:not(.wv-agir) .welcome-title { font-size: clamp(1.75rem, 4vw, 2.25rem); }
  #viewWelcome:not(.wv-agir) .maj-chips { gap: 8px; margin-bottom: 12px; }
  #viewWelcome:not(.wv-agir) .sg-row { min-height: 54px; }
  #viewWelcome:not(.wv-agir) .welcome-sub { font-size: 1rem; }
}
@media (max-height: 720px) {
  #viewWelcome:not(.wv-agir) .welcome-sub { display: none; }
}
@media (max-width: 640px) {
  #viewWelcome:not(.wv-agir) .wv-mascot { width: 64px; height: 64px; margin: 6px 0 8px; }
  #viewWelcome:not(.wv-agir) .welcome-title { font-size: 1.75rem; }
  #viewWelcome:not(.wv-agir) .welcome-sub { font-size: .9375rem; margin-top: 4px; }
  /* Les amorces défilent sur une ligne ; les raccourcis passent sur deux colonnes compactes. */
  .maj-starters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -13px; padding: 2px 13px 6px; scrollbar-width: none; }
  .maj-starters::-webkit-scrollbar { display: none; }
  .maj-starter { flex: 0 0 auto; white-space: nowrap; }
  #viewWelcome:not(.wv-agir) .sg-row { min-height: 52px; padding: 8px 10px; gap: 9px; font-size: .9375rem; }
  #viewWelcome:not(.wv-agir) .sg-row::after { display: none; }
  #viewWelcome:not(.wv-agir) .sg-ic { width: 36px; height: 36px; border-radius: 11px; }
  #viewWelcome:not(.wv-agir) .sg-ic svg { width: 20px; height: 20px; }
  #viewWelcome:not(.wv-agir) .maj-msg { max-width: 90%; }
}