:root {
  /* Polices du site (13 oct. 2026), celles choisies par l'utilisateur,
     chacune dans le role de celle qu'elle remplace :
     - Ranchers (ex-Spicy Rice) : grands titres, logo, prix et gros
       chiffres. Une seule graisse : chaque usage coupe la synthese de gras
       (font-synthesis-weight: none) ;
     - Cantarell (ex-Story Script) : le texte et l'interface, une sans
       serif qui tranche avec les titres et les serifs (graisses 400/700) ;
     - PT Serif et Rubik Spray Paint : posees par page, pour varier (voir
       « Melange des polices » dans site.css) ;
     - IBM Plex Serif : --police-serif (sous-titres, chapeaux, mot d'accent
       des titres) et --police-chiffres (minuteurs, codes, references,
       adresses), en chiffres tabulaires — elle distingue 0/O et 1/l, ce
       pour quoi JetBrains Mono avait ete choisie.
     Certaines zones ont leur propre police, posee a la demande de
     l'utilisateur en redefinissant ces jetons a leur entree : la
     boutique, la FAQ et le bandeau de remise de l'accueil (PT Serif
     partout), le comparatif et le chapeau du heros (IBM Plex Serif), les
     onglets de navigation (Ranchers). */
  --police-titre: "Ranchers", "PT Serif", Georgia, serif;
  --police-texte: "Cantarell", system-ui, "Segoe UI", sans-serif;
  --police-serif: "IBM Plex Serif", "PT Serif", Georgia, serif;
  --police-chiffres: "IBM Plex Serif", "PT Serif", Georgia, serif;
  /* Ranchers est etroite et serree : ses titres prennent un peu d'air.
     Les zones en PT Serif ou en Plex le remettent a 0. */
  --titre-air: 0.02em;

  --v-900: #171717;
  --v-800: #222222;
  --v-700: #1b0f38;
  --v-600: #2a1553;
  --v-500: #4c1d95;
  --v-400: #7c3aed;
  --v-300: #a855f7;
  --v-200: #c084fc;
  --v-100: #e9d5ff;
  --accent: #d946ef;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #fb7185;
  --text: #ede9fe;
  --muted: #a78bfa;
  --panel: rgba(40, 40, 40, 0.62);
  --border: rgba(168, 85, 247, 0.22);
  --glow: 0 0 40px rgba(124, 58, 237, 0.35);
  --radius: 18px;
  --shell: 1180px;

  --blurple: #5865f2;
  --blurple-fonce: #4752c4;
}

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

html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

html[data-taille="s"]  body { font-size: 0.92em; }
html[data-taille="m"]  body { font-size: 1em; }
html[data-taille="l"]  body { font-size: 1.12em; }
html[data-taille="xl"] body { font-size: 1.26em; }

html[data-taille="l"]  .btn,
html[data-taille="xl"] .btn { min-height: auto; padding-block: 0.7em; height: auto; }
html[data-taille="l"]  input,
html[data-taille="l"]  textarea,
html[data-taille="l"]  select,
html[data-taille="xl"] input,
html[data-taille="xl"] textarea,
html[data-taille="xl"] select { height: auto; padding-block: 0.65em; }

html[data-densite="compact"] .panel,
html[data-densite="compact"] .card { padding: 15px 17px; }
html[data-densite="aere"] .panel,
html[data-densite="aere"] .card { padding: 32px 34px; }
html[data-densite="compact"] .views { gap: 26px; }
html[data-densite="aere"]    .views { gap: 64px; }

html[data-lecture="oui"] body {
  letter-spacing: 0.035em;
  word-spacing: 0.09em;
  line-height: 1.85;
}
/* Seulement le texte courant : une liste d'interface (lignes de reglages,
   appareils, touches) garde toute sa largeur. */
html[data-lecture="oui"] p,
html[data-lecture="oui"] :where(ul, ol):not([class]) > li { max-width: 68ch; }

/* Le site fixe souvent l'interligne et l'approche element par element :
   pose sur body seul, l'espacement ne descendait presque nulle part. Les
   boutons, pastilles et champs gardent leur interligne (hauteurs fixes). */
html[data-lecture="oui"] body :is(p, li, dd, dt, label, td, th, .lead, .hint, .account-note, .cpt-ligne-txt span, .cpt-tete-txt p) {
  line-height: 1.8 !important;
}
html[data-lecture="oui"] body :is(p, li, span, b, i, em, strong, a, label, button, dd, dt, td, th, h1, h2, h3, h4):not(.logo, .logo *) {
  letter-spacing: 0.035em !important;
  word-spacing: 0.09em !important;
}

html[data-contraste="fort"] {
  --text: #ffffff;
  --muted: #d8c8ff;
  --border: rgba(196, 132, 252, 0.55);
  --panel: rgba(40, 40, 40, 0.92);
}
html[data-contraste="fort"] .hint,
html[data-contraste="fort"] .lead,
html[data-contraste="fort"] .account-note { color: #cfc0f5; }
html[data-contraste="fort"] .btn { border-width: 2px; }

html[data-animations="non"] *,
html[data-animations="non"] *::before,
html[data-animations="non"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html[data-animations="non"] #particles { display: none; }
html[data-animations="non"] .aurora { animation: none; opacity: 0.5; }

/* --- Affichage (Parametres du site, 20 oct. 2026) -----------------------
   Reglages poses par prefs.js sur <html>. */

/* Page d'ouverture en cours de choix (prefs.js puis app.js). */
html[data-depart="attente"] .views { visibility: hidden; }

/* Largeur des pages : le couloir des vues passe de 1180 a 1440 px. */
html[data-largeur="large"] { --shell: 1440px; }

/* Decor calme : plus d'etoiles ni de logo 3D (particles.js et logo3d.js
   cessent alors de dessiner), halo immobile. Uni : plus de halo non plus. */
html[data-decor="calme"] :is(#particles, #logo3d),
html[data-decor="uni"] :is(#particles, #logo3d) { display: none; }
html[data-decor="calme"] .aurora { animation: none; }
html[data-decor="uni"] :is(.aurora, .grid-overlay),
html[data-decor="uni"] body::before,
html[data-decor="uni"] .views::before { display: none; }

/* --- Accessibilite (Parametres du site, 20 oct. 2026) ------------------
   Reglages poses par prefs.js sur <html>. */

/* Police tres lisible : Atkinson Hyperlegible partout, titres compris. Le
   site ecrit aussi des polices en dur (boutique, guide), d'ou le selecteur
   universel et !important. Le logo garde sa lettre, le code sa chasse
   fixe. Les titres, dessines en Ranchers maigre, passent en gras. */
html[data-police="lisible"] body,
html[data-police="lisible"] body *:not(.logo, .logo *, code, pre, samp, svg, svg *) {
  font-family: "Atkinson Hyperlegible", system-ui, "Segoe UI", sans-serif !important;
  font-synthesis: weight style;
}
html[data-police="lisible"] :is(h1, h2, h3):not(.logo) { font-weight: 700; letter-spacing: 0; }

/* Transparence reduite : plus d'aurore ni de trame derriere les pages, plus
   de verre depoli ; ce qui flotte au-dessus du contenu devient plein. */
html[data-transparence="reduite"] :is(.aurora, .grid-overlay),
html[data-transparence="reduite"] body::before,
html[data-transparence="reduite"] .views::before { display: none; }
html[data-transparence="reduite"] *,
html[data-transparence="reduite"] *::before,
html[data-transparence="reduite"] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-transparence="reduite"] .topbar { background: #151515; }
html[data-transparence="reduite"] .toast { background: #272727; }
html[data-transparence="reduite"] .lock-screen { background: #222222; }
html[data-transparence="reduite"] :is(.modal-backdrop, .cart-backdrop, .crop-backdrop) { background: rgba(21, 21, 21, 0.9); }
html[data-transparence="reduite"] .buybar { background: #262626; }

/* Focus tres visible : un cadre jaune epais, separe de l'element par un
   liseré sombre, lisible sur tous les fonds du site. */
html[data-focus="fort"] :focus-visible {
  outline: 3px solid #fde047 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #151515 !important;
}

/* Lien d'evitement : invisible jusqu'au premier appui sur Tab. */
.evitement {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 11px 18px;
  border-radius: 12px;
  background: #7c3aed;
  color: #fff;
  font-family: var(--police-texte);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 32px -12px rgba(0, 0, 0, 0.8);
  transform: translateY(calc(-100% - 24px));
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.evitement:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

.set-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 26px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(34, 34, 34, 0.55);
}

.set-tab {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.22s ease;
}

.set-tab:hover { color: var(--v-100); }
.set-tab.active { color: #fff; }

.set-tab-glider {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--v-500), var(--v-400));
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);

  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.set-tab-glider:not([style*="width"]) { opacity: 0; }

.set-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.set-pane[hidden] { display: none; }

.set-card { display: flex; flex-direction: column; gap: 4px; }

.set-card[hidden] { display: none; }

.set-row,
.set-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}

.set-block { flex-direction: column; align-items: stretch; gap: 13px; }
.set-row:last-of-type,
.set-block:last-of-type { border-bottom: 0; }

.set-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.set-row-text b { font-size: 14px; color: var(--text); }
.set-row-text i {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.set-foot { padding-top: 18px; }

.switch {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.6);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--v-500), var(--v-400));
  border-color: transparent;
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(22px);
  background: #fff;
}

.switch:focus-visible { outline: 2px solid var(--v-300); outline-offset: 3px; }

.set-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.45);
}

.set-choice {
  flex: 1 1 auto;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.set-choice:hover { color: var(--v-100); background: rgba(124, 58, 237, 0.14); }

.set-choice[aria-checked="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--v-500), var(--v-400));
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.lang-list { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }

.lang-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.4);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.lang-item:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(124, 58, 237, 0.12);
}

.lang-item[aria-checked="true"] {
  border-color: var(--v-400);
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.5), rgba(124, 58, 237, 0.3));
}

.lang-flag { font-size: 21px; line-height: 1; }

.lang-check { margin-left: auto; color: var(--v-200); opacity: 0; transition: opacity 0.2s ease; }
.lang-item[aria-checked="true"] .lang-check { opacity: 1; }
.lang-check svg { width: 18px; height: 18px; display: block; }

@media (max-width: 620px) {

  .set-row { flex-direction: column; align-items: stretch; gap: 13px; }
  .set-row .btn,
  .set-row .switch { align-self: flex-start; }
  .set-tab { flex: 1 1 auto; text-align: center; }
}

body {
  font-family: var(--police-texte);
  /* PT Serif a une hauteur d'x de texte ordinaire : plus besoin du
     grossissement (font-size-adjust 0,54) ni de l'espace entre les mots
     qu'il fallait a Story Script. */
  font-size-adjust: none;
  word-spacing: normal;
  background: var(--v-900);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #particles { opacity: 0.55; }
}

.aurora {
  position: fixed;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(124, 58, 237, 0.55), transparent 62%),
    radial-gradient(34% 38% at 82% 26%, rgba(217, 70, 239, 0.42), transparent 64%),
    radial-gradient(46% 46% at 50% 88%, rgba(76, 29, 149, 0.55), transparent 66%);
  filter: blur(46px);
  animation: drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 34px;
  background: rgba(23, 23, 23, 0.55);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
}

.topbar-left { display: flex; align-items: center; flex: 1 1 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.brand:hover { opacity: 0.82; }

.brand:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 6px;
  border-radius: 10px;
}

.brand-mark {
  display: block;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
  animation: pulse-mark 3.4s ease-in-out infinite;
}

@keyframes pulse-mark {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(124, 58, 237, 0.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(217, 70, 239, 0.8)); }
}

.logo {

  font-family: var(--police-titre); font-synthesis-weight: none; font-size-adjust: none;
  font-variation-settings: "opsz" 28;
  font-size: 28px;
  font-weight: 800;

  letter-spacing: var(--titre-air, 0.02em);

  /* Nom en violet, sans le blanc du degrade d'origine (v-100), avec sa
     lueur. Le reflet qui defilait reste retire (12 octobre 2026). */
  background: linear-gradient(92deg, var(--v-200), var(--v-300) 45%, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.55));
}

@keyframes shimmer { to { background-position: 260% 0; } }

.nav {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid var(--border);
}

.nav-glider {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--glider-w, 0);
  border-radius: 999px;

  background: linear-gradient(135deg, var(--v-400), #c026d3);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);

  transform: translateX(var(--glider-x, 0)) scaleX(var(--glider-s, 1));

  transform-origin: var(--glider-o, 50%) 50%;

  transition: transform 0.42s cubic-bezier(0.32, 1.18, 0.44, 1),
              width 0.42s cubic-bezier(0.32, 1.18, 0.44, 1),
              box-shadow 0.42s ease;
  pointer-events: none;
}

.nav-glider.file {
  box-shadow: 0 4px 26px rgba(124, 58, 237, 0.6), 0 0 40px rgba(217, 70, 239, 0.28);
}

.nav-glider.no-anim { transition: none; }

.nav-glider:not(.pret) { opacity: 0; }

.nav-link {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s;
}

.nav-link:hover { color: var(--v-100); }

.nav-link.active {
  color: #fff;
  transition: color 0.34s ease 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-glider {
    transition: none;
    transform: translateX(var(--glider-x, 0));
  }
  .nav-glider.file { box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45); }
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 0;
}

.discord-btn,
.cart-btn {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  color: var(--v-200);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}

.discord-btn {
  text-decoration: none;
  background: transparent;
  overflow: hidden;

  backdrop-filter: none;
}

.discord-btn svg,
.cart-btn svg { width: 20px; height: 20px; }

.discord-btn svg { position: relative; z-index: 1; }

.discord-btn:hover,
.cart-btn:hover {
  color: #fff;
  border-color: var(--v-300);
  background: rgba(124, 58, 237, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.discord-btn:hover {
  background: transparent;
  /* Sans halo : le bouton Discord reste sobre (12 octobre 2026). */
  box-shadow: none;
}

.discord-btn svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }

.discord-btn:hover svg {
  transform: scale(1.12);
  animation: discord-tour 0.62s cubic-bezier(0.34, 1.3, 0.5, 1);
}

@keyframes discord-tour {
  from { transform: rotate(0deg) scale(1.12); }
  to   { transform: rotate(360deg) scale(1.12); }
}

.discord-btn:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 2px;
}

.cart-btn svg path { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
.cart-btn:hover svg path { transform: translateY(-1.5px); }

.cart-btn.filled {
  color: var(--v-100);
  border-color: var(--v-400);
  background: rgba(124, 58, 237, 0.18);
}

.cart-btn.filled::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 15px;
  box-shadow: 0 0 16px 2px rgba(217, 70, 239, 0.55);
  animation: cart-halo 3.4s ease-in-out infinite;
  pointer-events: none;
}

.cart-btn svg, .cart-count { position: relative; z-index: 1; }

@keyframes cart-halo {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 12px rgba(217, 70, 239, 0.6);
}

.cart-count[hidden] { display: none; }

.cart-btn.pulse { animation: cart-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes cart-pulse {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.22) rotate(-7deg); }
  50%  { transform: scale(0.94) rotate(5deg); }
  75%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.cart-btn.pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: cart-ring 0.6s ease-out;
  pointer-events: none;
}

@keyframes cart-ring {
  from { opacity: 0.85; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.9); }
}

.cart-count.bump { animation: cart-count-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes cart-count-in {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  background: rgba(21, 21, 21, 0.66);
  backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease;
}

.cart-backdrop[hidden] { display: none; }

.cart-sheet {
  position: relative;
  overflow: hidden auto;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
  background: linear-gradient(170deg, rgba(32, 16, 60, 0.97), rgba(28, 28, 28, 0.98));
  border-left: 1px solid var(--v-500);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);

  animation: cart-in 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cart-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.cart-sheet::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent) 30%, var(--v-300) 60%, transparent);
  animation: cart-edge 0.9s ease-out backwards;
  animation-delay: 0.2s;
  pointer-events: none;
}

@keyframes cart-edge {
  from { opacity: 0; transform: scaleY(0.3); }
  to   { opacity: 1; transform: scaleY(1); }
}

.cart-glow {
  position: absolute;
  top: -120px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.34), transparent 68%);
  animation: cart-glow-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cart-glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

.cart-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cart-head, .cart-foot, .cart-empty {
  animation: cart-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.cart-head  { animation-delay: 0.1s; }
.cart-empty { animation-delay: 0.16s; }
.cart-foot  { animation-delay: 0.3s; }

@keyframes cart-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-head .eyebrow { margin-bottom: 8px; }

.cart-head h3 {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(92deg, var(--v-100), var(--v-300) 45%, var(--accent) 75%, var(--v-200));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

.cart-head .modal-close { position: static; }

.cart-items { display: flex; flex-direction: column; gap: 10px; }

.cart-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(27, 15, 56, 0.5));
  border: 1px solid var(--border);

  animation: cart-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  transition: border-color 0.22s, background 0.22s, transform 0.22s, box-shadow 0.22s;
}

@keyframes cart-item-in {
  from { opacity: 0; transform: translateX(34px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.cart-item:hover {
  border-color: var(--v-300);
  transform: translateX(-3px);
  box-shadow: -6px 0 22px rgba(124, 58, 237, 0.3);
}

.cart-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(217, 70, 239, 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.cart-item:hover::after { animation: cart-item-sweep 0.75s ease-out; }

@keyframes cart-item-sweep {
  from { opacity: 1; transform: translateX(-100%); }
  to   { opacity: 0; transform: translateX(100%); }
}

.cart-item:not(.included)::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--v-300), var(--accent));
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.7);
}

.cart-item.included {
  background: rgba(23, 23, 23, 0.34);
  opacity: 0.66;
  transition: opacity 0.22s, border-color 0.22s, transform 0.22s;
}

.cart-item.included:hover { opacity: 1; box-shadow: none; }

.cart-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-main b { font-size: 15px; font-weight: 700; }
.cart-item-main span { font-size: 11.5px; color: var(--muted); }

.cart-item-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.cart-item-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(217, 70, 239, 0.5);
}

.cart-item-side s { font-size: 12.5px; color: rgba(167, 139, 250, 0.5); }

.cart-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
  background: rgba(74, 222, 128, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.35);
  animation: cart-tag-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms + 160ms);
}

@keyframes cart-tag-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.cart-remove {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.18s;
}

.cart-remove:hover {
  color: #fff;
  background: rgba(251, 113, 133, 0.28);
  transform: scale(1.15);
}

.cart-remove:active { transform: scale(0.9); }

.cart-empty {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.cart-empty[hidden] { display: none; }

.cart-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cart-total { display: flex; align-items: baseline; justify-content: space-between; }
.cart-total span { font-size: 12.5px; color: var(--muted); }

.cart-total b {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--v-100), var(--accent) 60%, var(--v-200));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  animation: shimmer 6s linear infinite;
}

#cart-checkout {
  position: relative;
  overflow: hidden;
  animation: cart-cta-breathe 3.6s ease-in-out infinite;
}

@keyframes cart-cta-breathe {
  0%, 100% { box-shadow: 0 6px 22px rgba(124, 58, 237, 0.42); }
  50%      { box-shadow: 0 8px 32px rgba(217, 70, 239, 0.66); }
}

#cart-checkout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: cart-cta-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cart-cta-sweep {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

#cart-checkout:disabled { animation: none; box-shadow: none; }
#cart-checkout:disabled::before { animation: none; opacity: 0; }

.cart-clear {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.18s;
}

.cart-clear:hover { color: var(--err); }
.cart-clear[hidden] { display: none; }

@media (max-width: 520px) {
  .cart-sheet { width: 100%; }
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  white-space: nowrap;
}

/* Indicateur d'etat : barre verticale lumineuse, jamais de pastille ronde. */
.status-pill .dot {
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--warn);
  box-shadow: 0 0 9px currentColor;
  animation: blink 1.6s ease-in-out infinite;
}

.status-pill.online .dot { background: var(--ok); animation: none; }
.status-pill.offline .dot { background: var(--err); }

@keyframes blink { 50% { opacity: 0.3; } }

.views {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: var(--shell);

  margin: 0 auto;
  padding: 46px 34px 60px;
}

.view { display: none; }

.view.active {
  display: block;
  animation: view-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}

.section-head { margin-bottom: 30px; }

.section-head h2 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.section-head p { color: var(--muted); max-width: 620px; line-height: 1.65; }

.hero { padding: 26px 0 54px; max-width: 760px; }

#logo3d {
  position: fixed;
  top: 50%;
  left: 50%;

  width: clamp(620px, 104vh, 1300px);
  height: clamp(620px, 104vh, 1300px);
  transform: translate(-50%, -50%);
  z-index: 0;

  pointer-events: none;

  opacity: 0;

  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
}

#logo3d.echec { display: none; }

#logo3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  #logo3d { display: none; }
}

.hero-title {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}

.grad {
  background: linear-gradient(96deg, var(--v-300), var(--accent) 55%, var(--v-200));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

.hero-sub {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

.hero-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.hero-reassure li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--v-200);
}

.hero-reassure li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: solid #86efac;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.home-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.split-col {
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(18px);
}

.split-bad {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(29, 29, 29, 0.55);
}

.split-good {
  border-color: rgba(168, 85, 247, 0.34);
  box-shadow: 0 18px 50px rgba(124, 58, 237, 0.16);
}

.split-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.split-bad .split-tag {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.split-good .split-tag {
  color: var(--v-100);
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.split-col ul { margin: 0; padding: 0; list-style: none; }

.split-col li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--v-200);
}

.split-bad li { color: #94a3b8; }

.split-bad li::before {
  content: "×";
  position: absolute;
  left: 4px;
  top: 8px;
  font-size: 16px;
  color: #94a3b8;
}

.split-good li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 6px;
  height: 10px;
  border: solid #86efac;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.home-plans-head { margin-top: 64px; }

.home-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.home-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Haut plus genereux depuis que le logo porte une couronne : sur la carte
     mise en avant, elle venait toucher la pastille « le plus choisi » au point
     haut de son flottement. Applique aux trois cartes pour qu'elles restent
     alignees entre elles. */
  padding: 38px 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(18px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-plan:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 132, 252, 0.5);
  box-shadow: 0 22px 54px rgba(124, 58, 237, 0.26);
}

.home-plan.featured {
  border-color: rgba(217, 70, 239, 0.55);
  box-shadow: 0 22px 60px rgba(217, 70, 239, 0.22);
  background: linear-gradient(165deg, rgba(46, 16, 74, 0.8), rgba(34, 34, 34, 0.85));
}

.home-plan-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #a855f7, #d946ef);
  box-shadow: 0 6px 18px rgba(217, 70, 239, 0.45);
}

.home-plan h3 {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--v-100);
}

.home-plan-line {
  margin-top: 4px;
  font-size: 13px;
  color: var(--v-300);
}

.home-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 18px 0 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.16);
}

.home-plan-price b {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

.home-plan-price span { font-size: 14px; color: var(--v-300); }

.home-plan ul {
  flex: 1;
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
}

.home-plan li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v-200);
}

.home-plan li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 5px;
  height: 9px;
  border: solid var(--v-400);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.home-plan.featured li::before { border-color: #d946ef; }

.home-plans-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--v-300);
}

.home-final {
  margin-top: 70px;
  padding: 54px 32px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(168, 85, 247, 0.34);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217, 70, 239, 0.18), transparent 62%),
    linear-gradient(165deg, rgba(40, 14, 68, 0.72), rgba(30, 30, 30, 0.86));
  box-shadow: 0 26px 70px rgba(124, 58, 237, 0.2);
}

.home-final h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}

.home-final p {
  max-width: 560px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--v-200);
}

.home-final-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.home-final-note { font-size: 12.5px; color: var(--v-400); }

@media (max-width: 960px) {
  .home-split { grid-template-columns: 1fr; }
  .home-plans { grid-template-columns: 1fr; }

  .home-plan.featured { margin-top: 12px; }
}

.cards-3, .cards-2 { display: grid; gap: 18px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.card:hover {
  border-color: var(--v-300);
  background: rgba(124, 58, 237, 0.14);
  box-shadow: 0 20px 54px rgba(124, 58, 237, 0.22);
}

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%;
  width: 76%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v-300), transparent);
  opacity: 0.7;
  transition: opacity 0.22s;
}

.card:hover::before { opacity: 1; }

.card-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 900;
  color: var(--v-100);
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid var(--border);
}

.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; }
.card p { font-size: 14px; line-height: 1.68; color: var(--muted); }

.steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }

.step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  transition: transform 0.2s, border-color 0.2s;
}

.step:hover { transform: translateX(5px); border-color: var(--v-300); }

.step-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}

.step h3 { font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 14px; line-height: 1.68; color: var(--muted); }

code {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(23, 23, 23, 0.7);
  border: 1px solid var(--border);
  color: var(--v-200);
}

.cta {
  text-align: center;
  padding: 42px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(217, 70, 239, 0.16));
  border: 1px solid var(--v-500);
  backdrop-filter: blur(18px);
}

.cta h3 { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
.cta p { color: var(--muted); margin-bottom: 22px; }

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.queue-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 18px 22px;
}

.queue-card[hidden] { display: none; }

.queue-sub {
  margin: 4px 0 0;
  color: var(--muted, #8b93a7);
  font-size: 14px;
}

.queue-spin {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent, #5b8cff);
  animation: queue-spin 0.9s linear infinite;
}

@keyframes queue-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .queue-spin { animation: none; }
}

#log-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;

  max-height: min(calc(100vh - 130px), 660px);
}

.panel-grid > .panel:not(#log-panel) { align-self: start; }

#view-panel .panel { padding: 26px 26px 28px; }
#view-panel .panel-head { margin-bottom: 22px; }

#view-panel .field { margin-bottom: 26px; }
#view-panel .field label { margin-bottom: 10px; }
#view-panel .hint { margin-top: 9px; line-height: 1.55; }

#view-panel input:not([type="range"]):not([type="checkbox"]),
#view-panel select,
#view-panel textarea {
  padding: 13px 16px;
  line-height: 1.5;
}

#view-panel textarea { padding: 15px 16px; }

#view-panel .row { gap: 12px; margin-bottom: 12px; }

#view-panel .slider-row { gap: 18px; }

#view-panel input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 6px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid var(--border);
  box-shadow: none;
}

#view-panel input[type="range"]:focus {
  border-color: var(--v-300);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

#view-panel input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, var(--v-300), var(--accent));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.55);
}

#view-panel input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, var(--v-300), var(--accent));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.55);
}

#view-panel .stat { padding: 18px 8px; }
#view-panel .stats { gap: 12px; }

.span-2 { grid-column: span 2; }

@media (max-width: 1080px) {
  .panel-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }

  #log-panel {
    grid-column: auto;
    grid-row: auto;
    position: static;
    max-height: none;
  }
}

.run-bar {
  position: sticky;
  top: 72px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: rgba(34, 34, 34, 0.88);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.run-bar-state { display: flex; align-items: center; gap: 12px; min-width: 190px; }

.run-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--v-500);
  transition: background 0.25s, box-shadow 0.25s;
}

.run-bar.live .run-dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
  animation: run-pulse 1.6s ease-in-out infinite;
}

.run-bar.hold .run-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16);
}

@keyframes run-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .run-bar.live .run-dot { animation: none; }
}

.run-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.run-account[hidden] { display: none; }

.run-account-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  color: var(--v-100);
  background: linear-gradient(135deg, var(--v-500), var(--v-400));
  border: 1px solid var(--border);
}

.run-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.run-account-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.run-account-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.run-account-text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v-100);

  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-account.is-down .run-account-text strong { color: var(--err); }
.run-account.is-down .run-account-avatar { filter: grayscale(1); opacity: 0.6; }

.run-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.run-bar-text strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--v-100);
}

.run-bar-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.run-bar-progress {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.run-bar-progress .progress-track { flex: 1; margin: 0; }

.run-bar-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}

.run-bar-actions { display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .run-bar { gap: 12px; padding: 12px 14px; }
  .run-bar-state { min-width: 0; width: 100%; }
  .run-bar-progress { order: 3; width: 100%; }
  .run-bar-actions { order: 2; width: 100%; }
  .run-bar-actions .btn { flex: 1; }

  .run-account {
    order: 1;
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }
  .run-account-text strong { max-width: none; }
}

.dm-preview { margin-top: 16px; }

.dm-preview[hidden] { display: none; }

.dm-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dm-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dm-joindre {
  flex: none;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;

  margin: 0 2px 7px 9px;
  padding: 0;
  border: none;
  border-radius: 50%;

  background: var(--blurple);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s, transform 0.16s;
}

.dm-joindre svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
}

.dm-joindre:hover { background: var(--blurple-fonce); transform: scale(1.06); }
.dm-joindre:active { transform: scale(0.94); }

.dm-joindre:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 2px;
}

.dm-joindre.actif { background: var(--v-400); color: #fff; }

.dm-compose {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-right: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.6);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.dm-compose:focus-within {
  border-color: var(--v-300);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16);
}

.dm-compose textarea,
#view-panel .dm-compose textarea {
  display: block;
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;

  padding: 12px 0;

  font-family: "PT Serif", Georgia, "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
  font-size: 14.5px;
  line-height: 20px;
  resize: none;
  min-height: 0;

  height: 44px;
  max-height: 260px;

  overflow-y: hidden;
}

.dm-compose textarea.defile,
#view-panel .dm-compose textarea.defile { overflow-y: auto; }

.dm-compose textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}
.dm-compose textarea::-webkit-scrollbar { width: 6px; }
.dm-compose textarea::-webkit-scrollbar-track { background: transparent; }
.dm-compose textarea::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.45);
  border-radius: 999px;
}
.dm-compose textarea::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.65); }

.dm-compose textarea:focus,
#view-panel .dm-compose textarea:focus {
  border: none;
  box-shadow: none;
}

.dm-compose-compteur {
  flex: none;
  padding-bottom: 13px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}

.dm-emoji {
  flex: none;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;

  box-sizing: border-box;

  margin: 0 0 7px 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, transform 0.16s;
}

.dm-emoji svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
}

.dm-emoji .dm-emoji-oeil {
  fill: currentColor;
  stroke: none;
}

.dm-emoji:hover {
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.16);
  transform: scale(1.06);
}

.dm-emoji:active { transform: scale(0.94); }

.dm-emoji:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 2px;
}

.dm-emoji.ouvert {
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.2);
}

.dm-compose-bloc { position: relative; }

.dm-emoji-panneau {
  position: absolute;
  top: 0;
  left: 0;

  z-index: 100;
  width: 320px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #1f1f1f;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.dm-emoji-panneau[hidden] { display: none; }

.dm-emoji-recherche { margin-bottom: 8px; }

.dm-emoji-recherche input,
#view-panel .dm-emoji-recherche input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.6);
  color: var(--text);
  font-size: 13px;
}

.dm-emoji-recherche input:focus,
#view-panel .dm-emoji-recherche input:focus {
  border-color: var(--v-300);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16);
  outline: none;
}

.dm-emoji-liste {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 232px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

.dm-emoji-liste::-webkit-scrollbar { width: 6px; }
.dm-emoji-liste::-webkit-scrollbar-track { background: transparent; }
.dm-emoji-liste::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.45);
  border-radius: 999px;
}

.dm-emoji-famille {
  grid-column: 1 / -1;
  padding: 8px 4px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.dm-emoji-choix {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;

  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", sans-serif;

  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}

.dm-emoji-choix:hover {
  background: rgba(124, 58, 237, 0.24);
  transform: scale(1.14);
}

.dm-emoji-choix:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: -2px;
}

.dm-emoji-vide {
  margin: 12px 0 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.dm-emoji-vide[hidden] { display: none; }

.dm-jointe { margin-top: 10px; }

.dm-jointe[hidden] { display: none; }

.dm-jointe-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.6);
}

.dm-jointe-vignette {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 7px;

  object-fit: cover;
  background: rgba(124, 58, 237, 0.16);
}

.dm-jointe-infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dm-jointe-nom {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-jointe-poids {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dm-jointe-retirer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.dm-jointe-retirer svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.dm-jointe-retirer:hover {
  background: rgba(237, 66, 69, 0.16);
  color: #f87171;
}

.dm-jointe-retirer:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 1px;
}

.dm-bubble-image {
  display: block;
  max-width: 300px;
  max-height: 220px;
  width: auto;
  height: auto;
  margin-top: 8px;
  border-radius: 8px;
  object-fit: contain;
}

.dm-fenetre {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #262626 0%, #202020 100%);
  box-shadow: 0 10px 30px rgba(23, 23, 23, 0.45), inset 0 1px 0 rgba(233, 213, 255, 0.05);
}

.dm-fenetre-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(42, 21, 83, 0.45);
}

.dm-fenetre-icone {
  flex: none;
  width: 15px;
  height: 15px;
  fill: var(--muted);
}

.dm-fenetre-titre {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v-100);

  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-fenetre-tag {
  flex: none;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-200);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid var(--border);
}

.dm-bubble {
  display: flex;
  gap: 13px;
  padding: 13px 15px 15px;
  transition: background 0.15s ease;
}

.dm-bubble:hover { background: rgba(124, 58, 237, 0.07); }

.dm-bubble-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  color: var(--v-100);
  background: linear-gradient(135deg, var(--v-500), var(--v-400));
  border: 1px solid var(--border);
}

.dm-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dm-bubble-body { min-width: 0; flex: 1; }

.dm-bubble-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.dm-bubble-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--v-200);

  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-bubble-time {
  font-size: 10.5px;
  color: var(--muted);
  opacity: 0.75;
}

.dm-bubble-text {
  font-size: 14px;

  font-family: "PT Serif", Georgia, "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;

  line-height: 1.375;
  color: var(--text);

  overflow-wrap: anywhere;
}

.dm-gras, .dm-gras-ital { font-weight: 700; }
.dm-ital, .dm-gras-ital { font-style: italic; }
.dm-souligne { text-decoration: underline; }
.dm-barre { text-decoration: line-through; }

.dm-code, .dm-code-bloc {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12.5px;
  border-radius: 4px;
  background: rgba(23, 23, 23, 0.75);
  border: 1px solid var(--border);
  color: var(--v-100);
  padding: 1px 5px;
}

.dm-code-bloc {
  display: block;
  padding: 9px 11px;
  margin: 5px 0;
  white-space: pre-wrap;
}

.dm-spoiler {
  background: var(--v-600);
  border-radius: 4px;
  padding: 0 2px;
  color: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dm-spoiler:hover { background: rgba(42, 21, 83, 0.6); color: var(--text); }

.dm-lien { color: var(--v-200); text-decoration: none; }
.dm-lien:hover { text-decoration: underline; }

.dm-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 50%;

  background: linear-gradient(135deg, var(--blurple), var(--v-400));
  border: 1px solid transparent;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.panel.dm-card .panel-head h2 { display: flex; align-items: center; }

.panel.dm-card.done .dm-num {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.45);
  color: #86efac;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 12%;
  width: 76%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v-300), transparent);
  opacity: 0.7;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-head h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-200);
}

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
}

.badge.soft {
  background: rgba(124, 58, 237, 0.2);
  color: var(--v-200);
  border: 1px solid var(--border);
}

.badge.soft.ok {
  background: rgba(74, 222, 128, 0.16);
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.35);
}

.badge.soft.warn {
  background: rgba(251, 191, 36, 0.16);
  color: var(--warn);
  border-color: rgba(251, 191, 36, 0.35);
}

.badge.avec-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.statut-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23a55a;
  box-shadow: 0 0 0 rgba(35, 165, 90, 0.6);
  animation: statut-pulse 2.4s ease-out infinite;
}

@keyframes statut-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(35, 165, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .statut-point { animation: none; }
}

.badge.live { background: linear-gradient(135deg, var(--ok), #16a34a); }
.badge.hold { background: linear-gradient(135deg, var(--warn), #d97706); }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-200);
  margin-bottom: 8px;
}

.row { display: flex; gap: 9px; margin-bottom: 9px; }
.row > select { flex: 1; min-width: 0; }

.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -2px 0 18px;
  font-size: 13.5px;
  color: var(--v-200);
  cursor: pointer;
  user-select: none;
}
.remember input {
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--v-500, #7c5cff);
  cursor: pointer;
}

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

textarea { resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--v-300);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16);
}

input::placeholder, textarea::placeholder { color: rgba(167, 139, 250, 0.5); }

select option { background: var(--v-800); color: var(--text); }

.mono { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none; font-size: 13px; }

.hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.slider-row { display: flex; align-items: center; gap: 14px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  height: 6px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v-400), var(--accent));
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}

input[type="range"]:focus { box-shadow: 0 0 16px rgba(124, 58, 237, 0.4); }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 12px var(--v-200);
  transition: transform 0.15s;
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 12px var(--v-200);
}

.slider-value {
  min-width: 62px;
  text-align: right;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--v-200);
}

.btn {
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.16);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s, background 0.16s, box-shadow 0.16s, opacity 0.16s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(124, 58, 237, 0.3);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.32);
}

.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s;
}

.btn:hover:not(:disabled)::after { left: 140%; }

.btn.primary {
  background: var(--blurple);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(88, 101, 242, 0.45);
}

.btn.primary:hover:not(:disabled) {
  background: var(--blurple-fonce);
  box-shadow: 0 10px 34px rgba(88, 101, 242, 0.6);
}

.btn.danger { background: rgba(251, 113, 133, 0.16); border-color: rgba(251, 113, 133, 0.35); }
.btn.danger:hover:not(:disabled) { background: rgba(251, 113, 133, 0.28); box-shadow: 0 8px 24px rgba(251,113,133,0.3); }

.btn.small { padding: 8px 15px; font-size: 13px; }

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.btn.ghost:hover {
  background: rgba(124, 58, 237, 0.14);
  color: var(--v-100);
}
.btn.lg { padding: 15px 30px; font-size: 15.5px; }

.actions { display: flex; gap: 10px; }
.actions .btn { flex: 1; }

.progress-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.7);
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v-400), var(--accent), var(--v-200));
  background-size: 200% 100%;
  animation: flow 2.4s linear infinite;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.6);
}

@keyframes flow { to { background-position: 200% 0; } }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

.stat {
  text-align: center;
  padding: 14px 6px;
  border-radius: 13px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid var(--border);
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

.stat-value.warn { color: var(--warn); }

.stat-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.run-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.run-meta-item { display: flex; align-items: baseline; gap: 8px; }

.run-meta-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.run-meta-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

.run-meta-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
}

@media (max-width: 620px) {
  .run-meta-sep { display: none; }
}

.log-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.log-filters {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(23, 23, 23, 0.5);
  border: 1px solid var(--border);
}

.log-filter {
  border: 0;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}

.log-filter:hover { color: var(--v-100); }

.log-filter.active {
  background: rgba(124, 58, 237, 0.35);
  color: #fff;
}

.log-box {
  flex: 1;
  min-height: 320px;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 13px;
  background: rgba(23, 23, 23, 0.55);
  border: 1px solid var(--border);
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12px;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--v-500) transparent;
}

.log-box::-webkit-scrollbar { width: 8px; }
.log-box::-webkit-scrollbar-track { background: transparent; }
.log-box::-webkit-scrollbar-thumb {
  background: var(--v-500);
  border-radius: 8px;
}

.log-empty {
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  padding: 14px 4px;
  text-align: center;
}

.histo-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.histo-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.07);
}

.histo-tete {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 190px;
  flex: 1 1 210px;
}

.histo-tete b {
  font-size: 14px;
  word-break: break-word;
}

.histo-date {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.histo-chiffres {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.histo-chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.histo-chiffre b {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--v-100);
}

.histo-chiffre b.ok { color: var(--ok); }
.histo-chiffre b.warn { color: var(--warn); }

.histo-chiffre span {
  font-size: 11px;
  color: var(--muted);
}

.histo-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.histo-actions .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .histo-actions { margin-left: 0; width: 100%; }
  .histo-actions .btn { flex: 1; }
}

.log-line {
  display: flex;
  gap: 14px;
  padding: 4px 7px;
  border-radius: 6px;
  word-break: break-word;
}

.log-line + .log-line { margin-top: 3px; }

.log-time {
  color: var(--v-500);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.log-text { color: var(--text); flex: 1; min-width: 0; }

.log-line.ok    .log-text { color: #86efac; }
.log-line.err   .log-text { color: var(--err); }
.log-line.warn  .log-text { color: var(--warn); }
.log-line.info  .log-text { color: var(--v-100); }

.log-line.err { background: rgba(251, 113, 133, 0.07); }

.log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.log-follow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;

  white-space: nowrap;
}

.log-follow input {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--v-400);
  cursor: pointer;
}

.log-count {
  font-size: 11px;
  color: var(--v-500);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .log-box { min-height: 200px; font-size: 11px; }
}

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 22px 34px 28px;
  font-size: 12.5px;
  color: var(--muted);
}

.footer .sep { opacity: 0.5; }

.toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  padding: 13px 18px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--v-300);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  max-width: 340px;
  animation: toast-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* « error » : la forme qu'utilise app.js ; « err » : celle du logiciel. */
.toast:is(.err, .error) { border-color: var(--err); color: #ffe4e6; }
.toast.ok  { border-color: var(--ok); }
.toast.out { animation: toast-out 0.28s ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(60px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(60px) scale(0.94); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--v-400), var(--accent));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--v-300); }

@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; padding: 14px 20px; }

  .nav {
    order: 3;
    width: 100%;
    min-width: max-content;
    justify-content: center;
  }
  .topbar { overflow-x: auto; scrollbar-width: none; }

  .topbar::-webkit-scrollbar { display: none; }

  .topbar-left, .topbar-right { flex: 0 1 auto; }
  .views { padding: 32px 20px 48px; }
}

@media (max-width: 620px) {
  .nav-link { padding: 8px 13px; font-size: 12.5px; }
  .hero-actions .btn { flex: 1; }
  .actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(45, 21, 92, 0.5), rgba(23, 23, 23, 0.62));
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.14);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.user-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 20%, rgba(168, 85, 247, 0.55) 50%, transparent 80%);
  background-size: 220% 100%;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.user-chip:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 4px 22px rgba(124, 58, 237, 0.3);
}

.user-chip:hover::before {
  opacity: 1;
  animation: chip-border 2.4s linear infinite;
}

.user-chip[hidden] { display: none; }

@keyframes chip-border { to { background-position: 220% 0; } }

.user-chip span {
  font-size: 12.5px;
  color: var(--v-200);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip .chip-name {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.chip-pseudo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--v-400), #c026d3);

  border: 1px solid rgba(168, 85, 247, 0.35);
  font-family: var(--police-titre); font-synthesis-weight: none; font-size-adjust: none;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  letter-spacing: var(--titre-air, 0.02em);
}

.chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-chip .chip-name:hover .chip-avatar {
  border-color: rgba(216, 180, 254, 0.75);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22);
  transform: scale(1.05);
}

.user-chip.is-owner .chip-avatar {
  border-color: rgba(216, 180, 254, 0.6);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.user-chip .chip-name:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.chip-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(168, 85, 247, 0.22);
  transition: color 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.chip-logout-icon {
  width: 15px;
  height: 15px;
  flex: none;

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.chip-logout:hover:not(:disabled) {
  color: #ffe4e6;
  background: rgba(251, 113, 133, 0.26);
  border-color: rgba(251, 113, 133, 0.5);
  box-shadow: 0 6px 20px rgba(251, 113, 133, 0.32);
}

.chip-logout:hover:not(:disabled) .chip-logout-icon { transform: translateX(3px); }

.chip-logout:active:not(:disabled) .chip-logout-icon { transform: translateX(1px); }

.chip-logout:hover:not(:disabled),
.chip-logout:active:not(:disabled) { transform: none; }

@media (max-width: 860px) {

  .user-chip span,
  .user-chip .chip-name { display: none; }

  .user-chip .role-tag { display: inline-block; cursor: pointer; }

  .user-chip .chip-logout-label {

    display: inline;
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .user-chip .chip-logout { padding: 7px; gap: 0; }
}

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.admin-counts { display: flex; gap: 9px; flex-wrap: wrap; }

.admin-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-search {
  position: relative;
  display: flex;
  align-items: center;
}

.order-search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--v-300);
  pointer-events: none;
  transition: color 0.18s;
}

.order-search input {
  width: 260px;
  max-width: 100%;
  padding: 9px 34px 9px 34px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.1);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, width 0.22s;
}

.order-search input::placeholder { color: var(--muted); }

.order-search input::-webkit-search-decoration,
.order-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.order-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.16);
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.16);
}

.order-search:focus-within .order-search-icon { color: var(--accent); }

.order-search-clear {
  position: absolute;
  right: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}

.order-search-clear:hover { color: var(--text); background: rgba(217, 70, 239, 0.2); }
.order-search-clear[hidden] { display: none; }

@media (max-width: 720px) {
  .admin-tools { width: 100%; }
  .order-search { flex: 1 1 auto; }
  .order-search input { width: 100%; }
}

.admin-note {
  margin-bottom: 16px;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fde68a;
  font-size: 13px;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.14);
  color: var(--v-100);
}

.role-pill.owner {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(124, 58, 237, 0.3));
  border-color: var(--accent);
  color: #fae8ff;
}

.role-pill.admin { background: rgba(124, 58, 237, 0.24); border-color: var(--v-300); }
.role-pill.user  { background: rgba(23, 23, 23, 0.5); color: var(--muted); }

.role-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(124, 58, 237, 0.28);
  border: 1px solid var(--border);
  color: var(--v-100);
}

.role-tag.owner {
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  border-color: transparent;
  color: #fff;
}

.user-chip .role-tag {

  --tag-tint: rgba(148, 163, 184, 0.12);
  --tag-edge: rgba(148, 163, 184, 0.5);
  --tag-ink: #e8eef7;
  --tag-glow: rgba(148, 163, 184, 0.3);

  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;

  gap: 4px;
  font-family: var(--police-texte);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  max-width: none;
  flex: 0 0 auto;
}

.user-chip .role-tag .role-label {
  display: inline;
  font: inherit;
  color: inherit;
  max-width: none;
  overflow: visible;
}

.user-chip .role-tag .role-emoji {
  display: inline-block;

  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  font-size: 10px;
  line-height: 1;
  max-width: none;
  overflow: visible;

  margin-right: -1px;

  filter: drop-shadow(0 1px 2px rgba(23, 23, 23, 0.6));
}

.user-chip .role-tag,
.user-chip .role-tag[class] {
  background: var(--tag-tint);
  border-color: var(--tag-edge);
  color: var(--tag-ink);
}

.user-chip .role-tag.decouverte,
.account-role.decouverte {
  --tag-tint: rgba(148, 163, 184, 0.12);
  --tag-edge: rgba(203, 213, 225, 0.55);
  --tag-ink: #eef2f7;
  --tag-glow: rgba(148, 163, 184, 0.34);
}

.user-chip .role-tag.starter,
.account-role.starter {
  --tag-tint: rgba(34, 211, 238, 0.12);
  --tag-edge: rgba(103, 232, 249, 0.6);
  --tag-ink: #ddf8ff;
  --tag-glow: rgba(34, 211, 238, 0.34);
}

.user-chip .role-tag.pro,
.account-role.pro {
  --tag-tint: rgba(99, 102, 241, 0.12);
  --tag-edge: rgba(129, 140, 248, 0.55);
  --tag-ink: #e8e7ff;
  --tag-glow: rgba(99, 102, 241, 0.34);
}

.user-chip .role-tag.business,
.account-role.business {
  --tag-tint: rgba(251, 191, 36, 0.12);
  --tag-edge: rgba(252, 211, 77, 0.55);
  --tag-ink: #fff4d6;
  --tag-glow: rgba(251, 191, 36, 0.32);
}

.user-chip .role-tag.illimite,
.account-role.illimite {
  --tag-tint: rgba(45, 212, 191, 0.12);
  --tag-edge: rgba(94, 234, 212, 0.55);
  --tag-ink: #dcfff6;
  --tag-glow: rgba(45, 212, 191, 0.32);
}

.user-chip .role-tag.admin,
.account-role.admin {
  --tag-tint: rgba(96, 165, 250, 0.12);
  --tag-edge: rgba(147, 197, 253, 0.55);
  --tag-ink: #e6f0ff;
  --tag-glow: rgba(96, 165, 250, 0.34);
}

.user-chip .role-tag.owner,
.account-role.owner {
  --tag-tint: rgba(168, 85, 247, 0.12);
  --tag-edge: rgba(192, 132, 252, 0.55);

  --tag-ink: #f5ebff;
  --tag-glow: rgba(217, 70, 239, 0.45);
}

.user-chip .role-tag > * {
  position: relative;
  z-index: 1;
}

.user-chip.is-owner {
  border-color: rgba(168, 85, 247, 0.6);
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.55), rgba(23, 23, 23, 0.65));
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.14), 0 6px 24px rgba(124, 58, 237, 0.28);
}

.user-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px);
  overflow-x: auto;
}

.user-table { width: 100%; border-collapse: collapse; min-width: 620px; }

.user-table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v-200);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.user-table td {
  padding: 14px 18px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  vertical-align: middle;
}

.user-table tr:last-child td { border-bottom: none; }
.user-table tbody tr { transition: background 0.18s; }
.user-table tbody tr:hover { background: rgba(124, 58, 237, 0.08); }

.user-table .row-disabled { opacity: 0.5; }

.cell-mail { word-break: break-word; }

.cell-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.cell-submail {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-all;
}
.cell-date { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.self-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(74, 222, 128, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--ok);
}

.state-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.state-tag.on   { background: rgba(74, 222, 128, 0.14); color: var(--ok); border: 1px solid rgba(74, 222, 128, 0.3); }
.state-tag.off  { background: rgba(251, 113, 133, 0.14); color: var(--err); border: 1px solid rgba(251, 113, 133, 0.3); }
.state-tag.warn { background: rgba(251, 191, 36, 0.14); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.3); }

.role-select {
  width: auto;
  min-width: 170px;
  padding: 7px 11px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.user-table td .btn { margin-right: 7px; }
.user-table td .btn:last-child { margin-right: 0; }

.user-table .empty { text-align: center; color: var(--muted); padding: 30px; }
.user-table .dash { color: rgba(167, 139, 250, 0.4); }

@media (max-width: 720px) {
  .admin-bar { flex-direction: column; align-items: stretch; }
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  transition: color 0.18s;
}

.field-hint.good { color: var(--ok); }
.field-hint.bad  { color: var(--err); }

.auth-body { justify-content: center; }

.auth-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.auth-retour {
  position: absolute;
  top: 22px;
  left: 24px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.1);
  color: var(--v-200, #c084fc);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.auth-retour:hover { background: rgba(124, 58, 237, 0.22); border-color: rgba(168, 85, 247, 0.5); }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 30px 26px;
  backdrop-filter: blur(20px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), var(--glow);
  animation: auth-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.auth-head { text-align: center; margin-bottom: 24px; }

.auth-head .brand-mark { width: 56px; height: 56px; margin: 0 auto 14px; }
.auth-head .logo { font-size: 30px; margin-bottom: 8px; }

.auth-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 22px;
  border-radius: 13px;
  background: rgba(23, 23, 23, 0.6);
  border: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.auth-tab.active {
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 5px 18px rgba(124, 58, 237, 0.4);
}

.oauth-zone { margin-bottom: 20px; }

.oauth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.oauth-btn {
  --teinte: 124, 58, 237;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid rgba(var(--teinte), 0.4);
  background:
    linear-gradient(180deg, rgba(var(--teinte), 0.18), rgba(var(--teinte), 0.06));
  color: var(--v-100);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.2s, box-shadow 0.25s, background 0.25s;

  animation: oauth-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes oauth-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.oauth-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.oauth-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--teinte), 0.75);
  background: linear-gradient(180deg, rgba(var(--teinte), 0.32), rgba(var(--teinte), 0.14));
  box-shadow: 0 12px 28px rgba(var(--teinte), 0.32);
}

.oauth-btn:hover::before { transform: translateX(120%); }
.oauth-btn:active { transform: translateY(0) scale(0.985); }

.oauth-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--teinte), 0.9);
  box-shadow: 0 0 0 3px rgba(var(--teinte), 0.32);
}

.oauth-btn.discord { --teinte: 88, 101, 242; }
.oauth-btn.google  { --teinte: 152, 110, 245; }

.oauth-logo {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.oauth-logo svg { width: 100%; height: 100%; display: block; }

.oauth-btn.discord .oauth-logo { color: #fff; }
.oauth-btn:hover .oauth-logo { transform: scale(1.14) rotate(-6deg); }

.oauth-label { letter-spacing: 0.01em; }

.oauth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.oauth-sep::before,
.oauth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.oauth-sep span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, 0.6);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .oauth-btn { animation: none; transition: border-color 0.2s, background 0.2s; }
  .oauth-btn:hover { transform: none; }
  .oauth-btn::before { display: none; }
  .oauth-btn:hover .oauth-logo { transform: none; }
}

.pwd-wrap { position: relative; }

.pwd-wrap input { padding-right: 46px; }

.pwd-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(167, 139, 250, 0.65);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}

.pwd-eye svg { width: 19px; height: 19px; display: block; }

.pwd-eye:hover { color: var(--v-100); background: rgba(124, 58, 237, 0.16); }

.pwd-eye.on { color: var(--accent); }

.pwd-eye:focus-visible {
  outline: none;
  color: var(--v-100);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.45);
}

.pwd-wrap input::-ms-reveal,
.pwd-wrap input::-ms-clear { display: none; }

.pseudo-welcome {
  text-align: center;
  margin-bottom: 20px;
  animation: oauth-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.pseudo-badge {
  --teinte: 124, 58, 237;
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--teinte), 0.45);
  background: rgba(var(--teinte), 0.16);
  color: var(--v-100);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  animation: pseudo-pulse 2.6s ease-in-out infinite;
}

.pseudo-badge.discord { --teinte: 88, 101, 242; }
.pseudo-badge.google  { --teinte: 152, 110, 245; }

@keyframes pseudo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--teinte), 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(var(--teinte), 0); }
}

.pseudo-welcome .auth-hint { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .pseudo-welcome, .pseudo-badge { animation: none; }
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-submit { width: 100%; margin-top: 4px; }

.auth-link {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.auth-link:hover:not(:disabled) { color: var(--v-100); background: rgba(124, 58, 237, 0.14); }

.auth-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid var(--border);
}

.auth-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: rgba(167, 139, 250, 0.62);
  text-align: center;
  line-height: 1.6;
}

.code-input {
  text-align: center;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 12px;
  padding: 15px 14px;
  text-indent: 12px;
}

.pwd-meter {
  height: 4px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.7);
  overflow: hidden;
}

.pwd-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  transition: width 0.28s, background 0.28s;
}

.pwd-meter span.weak   { background: var(--err); }
.pwd-meter span.medium { background: var(--warn); }
.pwd-meter span.strong { background: var(--ok); }

.pwd-rules {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
}

.pwd-rules li {
  font-size: 11.5px;
  color: rgba(167, 139, 250, 0.66);
  transition: color 0.2s;
}

.pwd-rules li::before {
  content: "○ ";
  font-size: 10px;
}

.pwd-rules li.ok { color: var(--ok); }
.pwd-rules li.ok::before { content: "● "; }

.promo-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 20px;
  margin-bottom: 26px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(217, 70, 239, 0.2), rgba(124, 58, 237, 0.14));
  border: 1px solid var(--v-500);
}

.promo-bar p { font-size: 13.5px; color: var(--v-100); }
.promo-bar b { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none; color: #fff; }

.promo-tag {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.5);
}

.shop-head { text-align: center; }
.shop-head p { margin: 0 auto; }

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}

.trust-item {
  text-align: center;
  padding: 16px 10px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid var(--border);
}

.trust-item b {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

.trust-item span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 760px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
}

.plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px;
}

@media (max-width: 1100px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .plans { grid-template-columns: 1fr; } }

.plan {
  display: flex;
  flex-direction: column;
  /* Haut plus genereux depuis que le logo porte une couronne. Sur la carte
     mise en avant, la pastille « le plus choisi » est centree et la couronne
     callee a gauche : a 225 px de large, les deux se croisaient. Degager par
     la hauteur plutot que par la largeur rend le reglage independant de la
     largeur de carte, donc valable a toutes les tailles d'ecran. */
  padding: 40px 20px 22px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.plan:hover {
  transform: translateY(-6px);
  border-color: var(--v-300);
  box-shadow: 0 26px 62px rgba(124, 58, 237, 0.32);
}

.plan.featured {
  border-color: var(--accent);
  background: linear-gradient(170deg, rgba(217, 70, 239, 0.16), var(--panel) 55%);
  box-shadow: 0 22px 60px rgba(217, 70, 239, 0.3);
}

@media (min-width: 1101px) {
  .plan.featured { transform: scale(1.045); z-index: 2; }
  .plan.featured:hover { transform: scale(1.045) translateY(-6px); }
}

.plan-flag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 5px 18px rgba(217, 70, 239, 0.6);
}

.plan-name { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.plan-tagline { font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 38px; }

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0 4px;
}

.plan-old {
  width: 100%;
  font-size: 13px;
  color: rgba(167, 139, 250, 0.55);
  text-decoration: line-through;
}

.plan-amount {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(96deg, var(--v-100), var(--v-300) 55%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.plan-cur { font-size: 20px; font-weight: 700; color: var(--v-200); }

.plan-per { font-size: 13px; font-weight: 600; color: var(--v-200); opacity: 0.75; margin-left: 2px; }
.plan-once { font-size: 11.5px; color: var(--ok); margin-bottom: 16px; }

.plan-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  margin-bottom: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--v-100);
}

.plan-perks { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.plan-perks li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
}

.plan-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--ok);
}

.plan-btn { margin-top: auto; width: 100%; }

.plans-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 46px;
}

.compare-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.compare-wrap { margin-bottom: 46px; }

.compare-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px);
  overflow-x: auto;
}

.compare-table { width: 100%; border-collapse: collapse; min-width: 760px; }

.compare-table th, .compare-table td {
  padding: 14px 16px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

.compare-table thead th {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--v-100);
  border-bottom: 1px solid var(--border);
}

.compare-table thead th em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-table tbody tr:hover { background: rgba(124, 58, 237, 0.07); }

.compare-table .col-featured { background: rgba(217, 70, 239, 0.09); }
.compare-table .yes { color: var(--ok); font-weight: 900; }
.compare-table .no  { color: rgba(167, 139, 250, 0.35); }

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 46px;
}

@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; } }

.quote {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  transition: transform 0.2s, border-color 0.2s;
}

.quote:hover { transform: translateY(-4px); border-color: var(--v-300); }

.quote blockquote {
  font-size: 14px;
  line-height: 1.7;
  color: var(--v-100);
  margin-bottom: 16px;
}

.quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.quote figcaption b { font-size: 13.5px; }
.quote figcaption span { font-size: 11.5px; color: var(--muted); }

.faq { margin-bottom: 46px; }

.support-faq { margin-bottom: 54px; }
.support-faq-sous {
  margin: -6px 0 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.support-ticket-head { margin-bottom: 22px; }

.faq-item {
  padding: 16px 20px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
}

.faq-item summary {
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: var(--v-300);
  transition: transform 0.2s;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;

  overflow-y: auto;
  background: rgba(21, 21, 21, 0.72);
  backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease both;
}

.modal-backdrop[hidden] { display: none; }

/* Page figee derriere une fenetre superposee. La compensation evite que tout
   le contenu saute de la largeur de la barre de defilement a l'ouverture :
   elle disparait en meme temps que le defilement. La barre superieure est en
   position sticky, donc dans le flux, et suit cette compensation. */
html.defilement-bloque {
  overflow: hidden;
  padding-right: var(--barre-defilement, 0px);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 26px;
  border-radius: 22px;
  background: linear-gradient(170deg, rgba(42, 21, 83, 0.96), rgba(34, 34, 34, 0.97));
  border: 1px solid var(--v-500);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), var(--glow);
  animation: auth-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;

  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}

.pay-backdrop .modal, .ask-sheet { max-height: none; display: block; }

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  margin: 0 -28px;
  padding: 0 28px;
  overscroll-behavior: contain;
}

.modal-foot { flex: none; padding-top: 4px; }

.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.4);
  border-radius: 8px;
}
.modal-body::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.6); }
.modal-body { scrollbar-width: thin; scrollbar-color: rgba(124, 58, 237, 0.5) transparent; }

.modal h3 { font-size: 23px; font-weight: 900; margin-bottom: 20px; }

@media (max-height: 700px) {
  .modal { padding: 24px 24px 20px; }
  .modal-body { margin: 0 -24px; padding: 0 24px; }
  .modal h3 { font-size: 20px; margin-bottom: 14px; }

  .modal:not(.pay-sheet) > .modal-close { top: 22px; right: 14px; }
  .buy-lines { margin-bottom: 12px; }
  .buy-line { padding: 8px 0; }
  .buy-note { margin-bottom: 12px; }
  .buy-step { margin-bottom: 12px; }
}

.modal > .eyebrow {
  align-self: flex-start;
  margin-right: 44px;
}

.modal-close {
  position: absolute;
  z-index: 20;

  top: 28px; right: 18px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease;
}

.modal-close:hover { color: #fff; }

.pay-sheet > .modal-close { top: 23px; right: 20px; }

.ask-backdrop { z-index: 120; padding: 20px; }

.ask-sheet {
  position: relative;
  overflow: hidden;
  width: min(410px, 100%);
  padding: 28px 26px 22px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(160deg, #2c2c2c, #202020);
  border: 1px solid rgba(217, 70, 239, 0.3);
  box-shadow: 0 26px 70px rgba(21, 21, 21, 0.7);
  animation: ask-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ask-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.ask-glow {
  position: absolute;
  left: 50%;
  top: -120px;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 70, 239, 0.3), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.ask-icon {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(217, 70, 239, 0.14);
  border: 1px solid rgba(217, 70, 239, 0.35);
}

.ask-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ask-sheet h3 {
  position: relative;
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.ask-text {
  position: relative;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 22px;
}

.ask-recap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  margin: 0 0 20px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;

  background: rgba(124, 58, 237, 0.07);
}
.ask-recap[hidden] { display: none; }

.ask-recap dt {
  font-size: 12px;
  color: var(--muted);

  white-space: nowrap;
}

.ask-recap dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);

  overflow-wrap: anywhere;
}

/* Avertissement de charge avant lancement : doit accrocher l'oeil
   sans ressembler a une erreur bloquante. */
.ask-recap dd.ask-warn {
  font-weight: 500;
  line-height: 1.5;
  color: #ffd9a8;
  background: rgba(255, 169, 64, .1);
  border: 1px solid rgba(255, 169, 64, .32);
  border-radius: 10px;
  padding: 9px 11px;
}

.ask-recap dd.ask-quote {
  font-weight: 500;
  font-style: italic;
  color: var(--v-100);
  padding-left: 10px;
  border-left: 2px solid var(--v-400);
}

.ask-field { position: relative; margin: 0 0 14px; text-align: left; }
.ask-field[hidden] { display: none; }
.ask-field input { width: 100%; }

.ask-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.ask-actions { position: relative; display: flex; gap: 10px; }
.ask-actions .btn { flex: 1; padding-top: 10px; padding-bottom: 10px; }

@media (max-width: 420px) {
  .ask-actions { flex-direction: column-reverse; }
}

.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 286px;
  padding: 7px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 14, 60, 0.98), rgba(23, 23, 23, 0.99));
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 18px 44px rgba(21, 21, 21, 0.62), 0 0 0 1px rgba(124, 58, 237, 0.1);

  animation: menu-ouvre 0.18s cubic-bezier(0.3, 1.2, 0.5, 1);
  transform-origin: top right;

  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.user-menu[hidden] { display: none; }

@keyframes menu-ouvre {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-menu-head {
  display: flex;

  align-items: center;
  gap: 11px;
  padding: 10px 12px 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.16);
}

.user-menu-ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--v-400), #c026d3);
  border: 1px solid rgba(168, 85, 247, 0.3);
  font-family: var(--police-titre); font-synthesis-weight: none; font-size-adjust: none;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: var(--titre-air, 0.02em);
}

.menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-menu-head b {
  font-family: var(--police-texte);
  font-size: 14.5px;
  font-weight: 900;
  color: var(--v-100);
}

.user-menu-head span {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 11px;
  background: none;
  color: var(--v-100);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.user-menu-item[hidden] { display: none; }

.user-menu-item svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--v-300);
  transition: color 0.16s ease;
}

.user-menu-item span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-menu-item b { font-size: 13px; font-weight: 600; }

.user-menu-item i {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: rgba(124, 58, 237, 0.16);
  outline: none;
}

.user-menu-item:hover svg,
.user-menu-item:focus-visible svg { color: var(--v-200); }

.user-menu-sep {
  height: 1px;
  margin: 5px 9px;
  background: rgba(168, 85, 247, 0.16);
}

.user-menu-item.danger:hover,
.user-menu-item.danger:focus-visible {
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}
.user-menu-item.danger:hover svg,
.user-menu-item.danger:focus-visible svg { color: #fca5a5; }

@media (max-width: 860px) {
  .user-menu { width: min(286px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  .user-menu { animation: none; }
}

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.account-grid[hidden] { display: none; }

.account-col { display: flex; flex-direction: column; gap: 18px; }

.account-card { display: flex; flex-direction: column; }

.wallet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wallet-solde { display: flex; flex-direction: column; gap: 2px; }

.wallet-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-200);
}

.wallet-montant {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(120deg, #fff, #d8b4fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Fidelite : carte du rang ------------------------------------------- */

.loy-hero {
  --rang: #94a3b8;
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 26px 26px 24px;
  border-color: color-mix(in srgb, var(--rang) 34%, transparent);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--rang) 16%, transparent), transparent 60%),
    var(--panel);
}

.loy-hero-aura {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rang) 30%, transparent), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  animation: loy-aura 7s ease-in-out infinite;
}

@keyframes loy-aura {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.12); opacity: 1; }
}

.loy-hero > :not(.loy-hero-aura) { position: relative; }

.loy-hero-haut {
  display: flex;
  align-items: center;
  gap: 20px;
}

.loyalty-medal {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rang) 22%, transparent) 0%, transparent 70%);
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--rang) 45%, transparent));
  animation: medal-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.loyalty-medal svg { display: block; overflow: visible; }

@keyframes medal-in {
  from { transform: scale(0.7) rotate(-10deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.loyalty-medal.rang-or,
.loyalty-medal.rang-platine,
.loyalty-medal.rang-diamant { animation: medal-in 0.6s cubic-bezier(0.22, 1, 0.36, 1), medal-glow 3.4s ease-in-out 0.6s infinite; }

@keyframes medal-glow {
  0%, 100% { filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--rang) 45%, transparent)); }
  50% { filter: drop-shadow(0 6px 30px color-mix(in srgb, var(--rang) 90%, transparent)); }
}

.loyalty-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.loy-surtitre {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.loyalty-ident b {
  font-family: var(--police-texte);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rang) 70%, #fff 30%) 45%, var(--rang) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--rang) 35%, transparent));
}

.loyalty-ident > span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

/* Piste de progression de Fer a Diamant, jalons poses a leur seuil. */

.loy-piste {
  position: relative;
  margin: 26px 18px 0;
  padding-top: 52px;
}

.loy-jalons {
  position: absolute;
  inset: 0 0 auto;
  height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loy-jalon {
  --rang: #94a3b8;
  position: absolute;
  left: var(--pos);
  bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transform: translateX(-50%);
  opacity: 0.45;
  filter: grayscale(0.7);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.loy-jalon svg { display: block; }

.loy-jalon span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--v-200);
  white-space: nowrap;
}

.loy-jalon.done { opacity: 0.95; filter: none; }

.loy-jalon.now {
  opacity: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rang) 70%, transparent));
  transform: translateX(-50%) scale(1.18);
}

.loy-jalon.done span,
.loy-jalon.now span { color: color-mix(in srgb, var(--rang) 70%, #fff 30%); }

.loyalty-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.loyalty-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #94a3b8, #d08b52 16%, #cbd5e1 30%, #fbbf24 52%, #67e8f9 76%, #c4b5fd);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rang) 55%, transparent);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.loyalty-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: loyalty-sweep 2.8s ease-in-out infinite;
}

@keyframes loyalty-sweep {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loyalty-next {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--v-200);
}

.loy-titre {
  margin: 24px 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tuiles d'avantages */

.loy-tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loy-tuile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rang) 16%, transparent), rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--rang) 34%, transparent);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.loy-tuile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rang) 60%, transparent); }

.loy-tuile-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  color: color-mix(in srgb, var(--rang) 75%, #fff 25%);
  background: color-mix(in srgb, var(--rang) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rang) 30%, transparent);
}

.loy-tuile-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.loy-tuile-texte b {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.loy-tuile-texte span { font-size: 12px; line-height: 1.3; color: var(--v-200); }

.loy-tuile.verrou {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  border-color: rgba(168, 85, 247, 0.22);
}

.loy-tuile.verrou .loy-tuile-icone {
  color: var(--v-300);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.18);
}

.loy-tuile.verrou .loy-tuile-texte b { color: var(--v-200); }
.loy-tuile.verrou .loy-tuile-texte span { color: var(--v-300); }

@media (max-width: 900px) { .loy-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .loy-tuiles { gap: 8px; }
  .loy-tuile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .loy-tuile-icone { width: 34px; height: 34px; }
}

.loy-tuile-des {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  color: color-mix(in srgb, var(--rang) 75%, #fff 25%);
}

/* --- Fidelite : les six rangs ---------------------------------------------- */

.loyalty-help {
  margin: 0 0 18px;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--v-300);
}

.loy-rangs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) { .loy-rangs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .loy-rangs { grid-template-columns: 1fr; } }

.loy-rang {
  --rang: #94a3b8;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--rang) 14%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid color-mix(in srgb, var(--rang) 26%, transparent);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.loy-rang::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rang), transparent);
  opacity: 0.85;
}

.loy-rang:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rang) 55%, transparent);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--rang) 55%, transparent);
}

.loy-rang.now {
  border-color: color-mix(in srgb, var(--rang) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rang) 40%, transparent),
    0 18px 40px -18px color-mix(in srgb, var(--rang) 80%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rang) 26%, transparent), transparent 72%),
    rgba(255, 255, 255, 0.035);
}

.loy-rang-tete { display: flex; align-items: center; gap: 12px; }

.loy-rang-blason {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--rang) 45%, transparent));
}

.loy-rang-blason svg { display: block; overflow: visible; }

.loy-rang-ident { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }

.loy-rang-ident b {
  font-family: var(--police-texte);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--rang) 72%, #fff 28%);
}

.loy-rang-ident span {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.loy-rang-pastille {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #222222;
  background: linear-gradient(180deg, var(--rang-clair, #fff), var(--rang));
  box-shadow: 0 0 14px color-mix(in srgb, var(--rang) 55%, transparent);
}

.loy-rang-verrou {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--v-300);
  background: rgba(124, 58, 237, 0.12);
}

.loy-rang-liste {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--rang) 18%, transparent);
}

.loy-rang-liste li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--v-100);
}

.loy-rang-liste li svg { flex-shrink: 0; color: color-mix(in srgb, var(--rang) 75%, #fff 25%); }

.loy-rang-liste li b { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

.loy-rang-liste li.vide { color: var(--muted); font-style: italic; }

.loy-rang.verrou .loy-rang-blason { filter: grayscale(0.55) brightness(0.8); opacity: 0.7; }
.loy-rang.verrou .loy-rang-liste li { color: var(--v-200); }

@media (max-width: 620px) {
  .loy-hero { padding: 20px 16px; }
  .loy-hero-haut { gap: 14px; }
  .loyalty-medal { width: 80px; height: 80px; }
  .loyalty-ident b { font-size: 27px; }
  .loy-piste { margin: 22px 10px 0; }
  .loy-jalon span { display: none; }
  .loy-piste { padding-top: 40px; }
  .loy-jalons { height: 40px; }
}

/* Eclats qui scintillent autour des ecussons Platine et Diamant. */
.ecu-eclat {
  transform-box: fill-box;
  transform-origin: center;
  animation: ecu-eclat 3.2s ease-in-out infinite;
}

@keyframes ecu-eclat {
  0%, 100% { opacity: 0.15; transform: scale(0.5) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ecu-eclat { animation: none; opacity: 0.8; }
  .loyalty-fill::after,
  .loy-hero-aura { animation: none; }
  .loyalty-fill { transition: none; }
  .loyalty-medal,
  .loyalty-medal.rang-or,
  .loyalty-medal.rang-platine,
  .loyalty-medal.rang-diamant { animation: none; }
  .loy-rang, .loy-tuile { transition: none; }
}

.abo-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
}

.abo-line:last-child { border-bottom: 0; }

.abo-line span {
  font-size: 13.5px;
  color: var(--v-300);
}

.abo-line b {
  font-family: var(--police-texte);
  font-size: 15px;
  font-weight: 800;
  color: var(--v-100);
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(168, 85, 247, 0.16);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.order-row:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
}

.order-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.order-main b {
  font-family: var(--police-texte);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--v-100);
}

.order-main span {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 11.5px;
  color: var(--v-400);
  word-break: break-all;
}

.order-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.order-price {
  font-family: var(--police-texte);
  font-size: 15px;
  font-weight: 900;
  color: var(--v-100);
}

.order-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.order-badge.ok {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

.order-badge.wait {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}

.order-badge.bad {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

.order-badge.off {
  color: var(--v-400);
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.25);
}

.order-note {
  flex-basis: 100%;
  font-size: 12px;
  font-style: normal;
  color: var(--v-300);
}

.orders-empty {
  padding: 18px 4px;
  font-size: 13.5px;
  color: var(--v-400);
}

@media (max-width: 560px) {
  .order-row { align-items: flex-start; }
  .order-side { width: 100%; justify-content: space-between; }
}

.wallet-abo {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.1);
  border-left: 3px solid rgba(168, 85, 247, 0.5);
}

.wallet-abo[hidden] { display: none; }

/* Le bloc porte desormais un texte et le bouton de resiliation. */
.wallet-abo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.wallet-abo-stop {
  flex: none;
  color: var(--v-200);
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.wallet-abo-stop:hover:not(:disabled) {
  color: #fecdd3;
  border-color: rgba(251, 113, 133, 0.6);
  background: rgba(251, 113, 133, 0.1);
}

.wallet-abo.warn {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.1);
  border-left-color: rgba(251, 191, 36, 0.6);
}

.wallet-abo.danger {
  color: #fecdd3;
  background: rgba(251, 113, 133, 0.12);
  border-left-color: rgba(251, 113, 133, 0.65);
}

.wallet-form { margin-top: 18px; }
.wallet-form[hidden] { display: none; }

.wallet-amount-row { position: relative; }
.wallet-amount-row input { width: 100%; padding-right: 34px; }

.wallet-currency {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--v-200);
  font-weight: 700;
  pointer-events: none;
}

.wallet-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.wallet-presets .btn.active,
.wallet-method.active,
.wallet-option.active {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(168, 85, 247, 0.55);
  color: #fff;
}

.wallet-methods { display: flex; flex-wrap: wrap; gap: 8px; }

.wallet-method,
.wallet-option {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v-200);
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wallet-method:hover,
.wallet-option:hover { background: rgba(124, 58, 237, 0.22); color: #fff; }

.wallet-option { font-size: 12px; padding: 7px 12px; opacity: 0.9; }

.wallet-table { width: 100%; border-collapse: collapse; }

.wallet-table td {
  padding: 11px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
  font-size: 13.5px;
}

.wallet-table tr:last-child td { border-bottom: 0; }

.wallet-date { color: var(--v-200); white-space: nowrap; width: 1%; padding-right: 16px; }

.wallet-delta { text-align: right; font-weight: 700; white-space: nowrap; }
.wallet-delta.in { color: #86efac; }
.wallet-delta.out { color: #fda4af; }

.account-danger {
  border-color: rgba(251, 113, 133, 0.28);
  background:
    linear-gradient(180deg, rgba(251, 113, 133, 0.07), rgba(251, 113, 133, 0)) ,
    var(--panel, rgba(34, 34, 34, 0.6));
}

.account-danger .panel-head h3 { color: #fda4af; }

.account-danger .account-actions { justify-content: flex-end; }

@media (max-width: 900px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
}

.account-form .panel-head { margin-bottom: 4px; }

.account-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.account-note.strong {
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: var(--v-100);
}

.account-note.strong b { color: #fff; word-break: break-all; }

.account-locked {
  margin: 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px dashed rgba(168, 85, 247, 0.28);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.account-actions { display: flex; gap: 10px; }
.account-actions .btn { flex: 1; }

.btn.block { width: 100%; }

.code-input {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
}

.pass-wrap { position: relative; }

.pass-wrap input { width: 100%; padding-right: 44px; }

.pass-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.pass-eye:hover { color: var(--v-200); background: rgba(124, 58, 237, 0.14); }
.pass-eye svg { width: 18px; height: 18px; }

.pass-wrap input[readonly] {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(168, 85, 247, 0.16);
  color: var(--muted);
  cursor: default;
}

#email-edit { color: var(--v-300); }
#email-edit:hover { color: var(--v-100); background: rgba(124, 58, 237, 0.18); }

.pass-wrap input:not([readonly]) + #email-edit { display: none; }

.account-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.32), rgba(23, 23, 23, 0.5));
  border: 1px solid var(--border);
}

.account-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v-400), #c026d3);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  font-family: var(--police-titre); font-synthesis-weight: none; font-size-adjust: none;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;

  padding: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  letter-spacing: var(--titre-air, 0.02em);
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-edit {
  position: relative;
  flex: none;
  line-height: 0;
}

.avatar-pen {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v-400), #c026d3);

  border: 2px solid #242424;
  color: #fff;

  pointer-events: none;
  transition: transform 0.2s ease;
}

.avatar-pen svg { width: 11px; height: 11px; }

.avatar-edit:hover .account-avatar {
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55);
  transform: scale(1.03);
}

.avatar-edit:hover .avatar-pen { transform: scale(1.12); }

.account-avatar:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 3px;
}

.account-avatar.is-busy {
  opacity: 0.55;
  animation: avatar-busy 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes avatar-busy {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

.crop-sheet {
  width: min(400px, 92vw);
  text-align: center;
}

.crop-hint {
  margin: 6px 0 16px;
  font-size: 12.5px;
  color: var(--muted);
}

.crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;

  max-height: 46vh;
  max-width: 46vh;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #171717;
  cursor: grab;

  touch-action: none;
  user-select: none;
}

.crop-stage.is-dragging { cursor: grabbing; }

.crop-stage:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 3px;
}

.crop-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform-origin: center;

  -webkit-user-drag: none;
  pointer-events: none;
}

.crop-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(21, 21, 21, 0.72);

  border: 2px solid rgba(216, 180, 254, 0.55);

  pointer-events: none;
}

.crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 2px 4px;
}

.crop-zoom-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--v-300);
}

.crop-zoom-icon svg { width: 18px; height: 18px; }
.crop-zoom-icon.small svg { width: 14px; height: 14px; }

.crop-zoom input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v-400), #c026d3);
  cursor: pointer;
}

.crop-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v-400);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.5);
  cursor: grab;
}

.crop-zoom input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v-400);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.5);
  cursor: grab;

  border-color: var(--v-400);
}

.crop-zoom input[type="range"]:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 4px;
}

.avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.avatar-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--v-300);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease;
}

.avatar-link:hover { color: var(--v-100); text-decoration: underline; text-underline-offset: 3px; }
.avatar-link.danger { color: #fca5a5; }
.avatar-link.danger:hover { color: #fecaca; }

.avatar-link[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .account-avatar,
  .avatar-pen,
  .chip-avatar { transition: none; }
  .account-avatar.is-busy { animation: none; }
  .avatar-edit:hover .account-avatar,
  .avatar-edit:hover .avatar-pen,
  .user-chip .chip-name:hover .chip-avatar { transform: none; }
}

.account-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.account-ident b {
  font-family: var(--police-texte);
  font-size: 17px;
  font-weight: 900;
  color: var(--v-100);
}

.account-ident > span:not(.account-role) {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-role {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--tag-edge, rgba(148, 163, 184, 0.5));
  background: var(--tag-tint, rgba(148, 163, 184, 0.12));
  color: var(--tag-ink, #e8eef7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-section {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-300);
}

.account-lines { display: flex; flex-direction: column; margin-bottom: 20px; }

.account-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}

.account-line span { color: var(--muted); }
.account-line b { color: var(--v-100); text-align: right; }
.account-line b.oui { color: var(--ok); }
.account-line b.non { color: var(--muted); font-weight: 500; }

.account-foot {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}
.account-foot .btn { flex: 1; }

@media (max-width: 460px) {
  .account-foot { flex-direction: column; }
  .account-actions { flex-direction: column; }
  .account-head { flex-direction: column; text-align: center; }
  .account-role { align-self: center; }

  .code-input { font-size: 19px; letter-spacing: 5px; }
}

.buy-lines { display: flex; flex-direction: column; margin-bottom: 18px; }

.buy-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}

.buy-line span { color: var(--muted); }
.buy-line b { color: var(--v-100); text-align: right; }
.buy-line.discount b { color: var(--ok); }

.buy-line.total {
  border-bottom: none;
  padding-top: 15px;
  font-size: 15px;
}

.buy-line.total b {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(96deg, var(--v-100), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.buy-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin-bottom: 16px;
}

.buy-confirm { width: 100%; }

.buy-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 10px;
}

.buy-cart[hidden] { display: none; }

.buy-cart-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.buy-cart-icon svg { width: 100%; height: 100%; display: block; }

.buy-cart.in-cart {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(124, 58, 237, 0.2);
  color: var(--v-100);
}

.modal.wide { max-width: 540px; }

.buy-step { margin-bottom: 18px; }

.buy-step-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.pay-methods { display: flex; flex-direction: column; gap: 9px; }

.pay-method {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(27, 15, 56, 0.6), rgba(23, 23, 23, 0.55));
  border: 1px solid var(--border);
  color: var(--v-100);
  transition: border-color 0.22s ease, background 0.22s ease,
              transform 0.22s ease, box-shadow 0.22s ease;
}

.pay-method::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(168, 85, 247, 0.22), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.pay-method:hover::before { opacity: 1; }

.pay-method:hover {
  border-color: var(--v-400);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.24);
}

.pay-method.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(217, 70, 239, 0.14));
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 28px rgba(217, 70, 239, 0.28);
}

.pay-method.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%,
              rgba(233, 213, 255, 0.16) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: pay-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pay-sweep {
  0%        { background-position: 130% 0; }
  60%, 100% { background-position: -30% 0; }
}

.pay-method-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.pay-method-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.pay-method-logo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: block;

  filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.4));
  transition: filter 0.22s ease, transform 0.22s ease;
}

.pay-method-logo svg { width: 100%; height: 100%; display: block; border-radius: 5px; }

.pay-method:hover .pay-method-logo { transform: scale(1.06); }

.pay-method.active .pay-method-logo {
  filter: drop-shadow(0 0 7px rgba(217, 70, 239, 0.65));
}

@media (prefers-reduced-motion: reduce) {
  .pay-method:hover .pay-method-logo { transform: none; }
}

.pay-method-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

.pay-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pay-badge.instant {
  background: rgba(74, 222, 128, 0.16);
  color: var(--ok);
  border: 1px solid rgba(74, 222, 128, 0.32);
}

.pay-badge.manual {
  background: rgba(251, 191, 36, 0.16);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.pay-badge.manual::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--warn);
  vertical-align: middle;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

.pay-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}

.pay-option {
  position: relative;
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(23, 23, 23, 0.5);
  border: 1px solid var(--border);
  color: var(--v-100);
  transition: border-color 0.2s ease, background 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;

  animation: option-in 0.34s ease backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes option-in {
  from { opacity: 0; transform: translateY(7px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.pay-option-logo {
  display: block;
  width: 30px;
  height: 30px;
  opacity: 0.72;
  filter: saturate(0.75);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.pay-option-logo svg { display: block; width: 100%; height: 100%; }

.pay-option:hover .pay-option-logo,
.pay-option.active .pay-option-logo {
  opacity: 1;
  filter: none;
}

.pay-option.active .pay-option-logo { transform: scale(1.06); }

.pay-option:hover {
  border-color: var(--v-400);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.22);
}

.pay-option.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(217, 70, 239, 0.16));
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.5) inset,
              0 8px 22px rgba(217, 70, 239, 0.26);
}

.pay-option.active::after {
  content: "✓";
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.55);
  animation: option-check 0.3s ease backwards;
}

@keyframes option-check {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.pay-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 14px; }

.pay-backdrop { padding: 24px 16px; overflow-y: auto; }

.pay-sheet {
  position: relative;
  overflow: hidden;
  width: min(920px, 100%);
  max-width: 920px;
  padding: 0;
  margin: auto;
  border-radius: 22px;
  background: linear-gradient(160deg, #2c2c2c 0%, #222222 46%, #1a1a1a 100%);
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 30px 90px rgba(21, 21, 21, 0.75),
              0 0 0 1px rgba(217, 70, 239, 0.08) inset;
  animation: pay-sheet-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes pay-sheet-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.pay-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px 24px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(124, 58, 237, 0.32), transparent 60%),
    radial-gradient(90% 140% at 100% 0%, rgba(217, 70, 239, 0.22), transparent 62%);
}

.pay-hero-glow {
  position: absolute;
  inset: -60% -20% auto;
  height: 260px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 70, 239, 0.35), transparent 70%);
  filter: blur(38px);
  animation: pay-glow 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pay-glow {
  0%, 100% { transform: translate(-8%, 0) scale(1); opacity: 0.75; }
  50%      { transform: translate(12%, 8%) scale(1.15); opacity: 1; }
}

.pay-hero-main { position: relative; z-index: 1; min-width: 0; }
.pay-hero-id { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pay-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--v-100);
  background: rgba(124, 58, 237, 0.28);
  border: 1px solid rgba(217, 70, 239, 0.42);
}

.pay-chip.ghost {
  background: rgba(23, 23, 23, 0.45);
  border-color: var(--border);
  color: var(--muted);
  letter-spacing: 0.03em;
}

.pay-hero h3 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 6px;
}

.pay-hero-sub { font-size: 13px; color: var(--muted); }

.pay-hero-amount {
  position: relative;
  z-index: 1;
  text-align: right;
  flex: 0 0 auto;
}

.pay-crypto-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  margin-bottom: 2px;
}

.pay-crypto-figure {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 22px rgba(217, 70, 239, 0.55);
}

.pay-crypto-unit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--v-200);
}

.pay-eur { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }

.pay-eur b {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(96deg, var(--v-100), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pay-eur span { font-size: 11.5px; color: var(--muted); }

.pay-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 26px;
  padding: 24px 30px 8px;
}

.pay-col, .pay-col-main { min-width: 0; }

.pay-col-side { min-width: 0; display: flex; flex-direction: column; }

.pay-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-300);
  margin-bottom: 12px;
}

.pay-steps {
  list-style: none;
  counter-reset: pas;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pay-steps li {
  counter-increment: pas;
  position: relative;
  padding-left: 38px;
  font-size: 13.2px;
  line-height: 1.6;
  color: var(--v-100);
  animation: pay-step-in 0.4s ease backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.pay-steps li::before {
  content: counter(pas);
  position: absolute;
  left: 0;
  top: -1px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--v-400), var(--accent));
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}

@keyframes pay-step-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.pay-steps b {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  color: #fff;
  background: rgba(217, 70, 239, 0.18);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(217, 70, 239, 0.3);
}

.pay-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

.pay-field {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label bouton" "valeur bouton";
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(27, 15, 56, 0.72), rgba(23, 23, 23, 0.62));
  border: 1px solid var(--border);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.pay-field:hover {
  border-color: var(--v-400);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}

.pay-field.copied {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35) inset,
              0 8px 26px rgba(74, 222, 128, 0.22);
}

.pay-field.copied::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(74, 222, 128, 0.22) 50%, transparent 80%);
  animation: pay-copied 0.7s ease;
  pointer-events: none;
}

@keyframes pay-copied {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.pay-field-label {
  grid-area: label;
  font-size: 10px;
  font-weight: 700;
  color: var(--v-300);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pay-field-value {
  grid-area: valeur;
  min-width: 0;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: #fff;
  word-break: break-all;
  user-select: all;
}

.pay-copy {
  grid-area: bouton;
  align-self: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.16);
  color: var(--v-200);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}

.pay-copy svg { width: 17px; height: 17px; display: block; }

.pay-copy:hover {
  color: #fff;
  background: rgba(124, 58, 237, 0.34);
  border-color: var(--v-300);
  transform: translateY(-1px);
}

.pay-copy:active { transform: scale(0.92); }

.pay-copy.done {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.42);
}

.pay-copy.done svg { animation: pay-copy-check 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes pay-copy-check {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.pay-input { margin-top: 14px; }

.pay-qr-card {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(27, 15, 56, 0.7), rgba(23, 23, 23, 0.6));
  border: 1px solid var(--border);
  text-align: center;
  margin-bottom: 18px;
}

.pay-qr-card .pay-section-title { text-align: left; }

.pay-qr {
  width: 168px;
  height: 168px;
  margin: 0 auto 10px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.35),
              0 10px 30px rgba(124, 58, 237, 0.3);
  animation: pay-qr-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards 0.1s;
}

.pay-qr svg { display: block; width: 100%; height: 100%; }

@keyframes pay-qr-in {
  from { opacity: 0; transform: scale(0.9) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}

.pay-qr-note { font-size: 11px; color: var(--muted); line-height: 1.5; }

.pay-track {
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(27, 15, 56, 0.7), rgba(23, 23, 23, 0.6));
  border: 1px solid var(--border);
}

.pay-track-list { list-style: none; margin: 0; padding: 0; }

.pay-track-step {
  position: relative;
  display: flex;
  gap: 13px;
  padding-bottom: 20px;
}

.pay-track-step:last-child { padding-bottom: 0; }

.pay-track-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgba(168, 85, 247, 0.2);
}

.pay-track-step.done:not(:last-child)::before { background: var(--v-400); }

.pay-track-dot {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.9);
  border: 2px solid rgba(168, 85, 247, 0.35);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pay-track-step.done .pay-track-dot {
  background: var(--v-400);
  border-color: var(--v-300);
}

.pay-track-step.current .pay-track-dot {
  border-color: var(--accent);
  background: var(--accent);
  animation: pay-pulse 1.9s ease-in-out infinite;
}

@keyframes pay-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(217, 70, 239, 0); }
}

.pay-track-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-track-text b { font-size: 12.5px; font-weight: 700; color: var(--muted); transition: color 0.3s ease; }
.pay-track-text i { font-style: normal; font-size: 11px; color: rgba(167, 139, 250, 0.65); }

.pay-track-step.done .pay-track-text b,
.pay-track-step.current .pay-track-text b { color: var(--v-100); }
.pay-track-step.current .pay-track-text i { color: var(--v-200); }

.pay-foot {
  padding: 16px 30px 26px;
  border-top: 1px solid rgba(168, 85, 247, 0.16);
  background: rgba(23, 23, 23, 0.35);
}

.pay-hint {
  font-size: 12px;
  color: var(--v-200);
  text-align: center;
  margin-bottom: 14px;
  min-height: 17px;
}

.pay-actions { display: flex; gap: 10px; }
.pay-actions .btn { flex: 1; }

.pay-success[hidden],
.pay-crypto-amount[hidden],
.pay-qr-card[hidden],
.pay-track[hidden],
.pay-wallet[hidden],
.pay-fields[hidden],
.pay-manual-toggle[hidden],
.pay-field[hidden] { display: none !important; }

.pay-manual-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto 14px;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v-200);
  background: rgba(23, 23, 23, 0.4);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pay-manual-toggle:hover {
  color: var(--v-100);
  border-color: var(--v-400);
  background: rgba(124, 58, 237, 0.16);
}

.pay-manual-toggle svg {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.pay-manual-toggle.open svg { transform: rotate(180deg); }

.pay-wallet {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 17px 18px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.26), rgba(27, 15, 56, 0.66));
  border: 1px solid rgba(217, 70, 239, 0.42);
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.24);
  animation: pay-wallet-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes pay-wallet-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.pay-wallet::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -70%;
  width: 240px;
  height: 240px;
  margin-left: -120px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 70, 239, 0.3), transparent 70%);
  filter: blur(26px);
  animation: pay-wallet-breathe 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pay-wallet-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.18); }
}

.pay-wallet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(217, 70, 239, 0.16) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: pay-wallet-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pay-wallet-sweep {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

.pay-wallet-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }

.pay-wallet-icon {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(23, 23, 23, 0.6);
  border: 1px solid rgba(217, 70, 239, 0.34);
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.22) inset;
  animation: pay-wallet-float 3.6s ease-in-out infinite;
}

@keyframes pay-wallet-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.pay-wallet-icon svg { width: 22px; height: 22px; display: block; }

.pay-wallet-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-wallet-text b { font-size: 13.5px; font-weight: 700; color: #fff; }

.pay-wallet-text i {
  font-style: normal;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 11.5px;
  color: var(--v-200);
}

.pay-wallet-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.2s ease;
}

.pay-wallet-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(217, 70, 239, 0.42);
  filter: brightness(1.06);
}

.pay-wallet-btn:not(:disabled):active { transform: translateY(0); }

.pay-wallet-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.pay-wallet-btn:not(:disabled):hover::after { transform: translateX(100%); }

.pay-wallet-btn:disabled { opacity: 0.75; cursor: default; }

.pay-wallet-note {
  position: relative;
  z-index: 1;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.pay-wallet.sent {
  background: linear-gradient(145deg, rgba(22, 78, 52, 0.5), rgba(10, 25, 18, 0.6));
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 10px 32px rgba(74, 222, 128, 0.16);
}

.pay-wallet.sent::before { animation: none; opacity: 0; }
.pay-wallet.sent .pay-wallet-note { color: rgba(209, 250, 229, 0.8); }

.pay-wallet.install {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.14), rgba(27, 15, 56, 0.5));
  border-color: rgba(167, 139, 250, 0.26);
  box-shadow: none;
}

.pay-wallet.install::before,
.pay-wallet.install::after { animation: none; opacity: 0; }

.pay-wallet.install .pay-wallet-icon { animation: none; opacity: 0.75; }

.pay-success {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 30px;
  text-align: center;
  background: linear-gradient(160deg, rgba(15, 34, 24, 0.97), rgba(24, 24, 24, 0.98));
  animation: pay-success-in 0.4s ease;
}

@keyframes pay-success-in { from { opacity: 0; } to { opacity: 1; } }

.pay-success-burst {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 222, 128, 0.28), transparent 70%);
  animation: pay-burst 1.5s ease-out;
  pointer-events: none;
}

@keyframes pay-burst {
  from { transform: scale(0.3); opacity: 0.9; }
  to   { transform: scale(1.6); opacity: 0; }
}

.pay-success-badge { position: relative; width: 78px; height: 78px; margin-bottom: 10px; }
.pay-success-badge svg { width: 100%; height: 100%; }

.pay-success-ring {
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: pay-draw 0.55s ease forwards;
}

.pay-success-check {
  fill: none;
  stroke: var(--ok);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: pay-draw 0.4s ease 0.45s forwards;
}

@keyframes pay-draw { to { stroke-dashoffset: 0; } }

.pay-success-title {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  animation: pay-step-in 0.4s ease 0.6s backwards;
}

.pay-success-sub {
  font-size: 13px;
  color: rgba(209, 250, 229, 0.75);
  animation: pay-step-in 0.4s ease 0.72s backwards;
}

@media (max-width: 860px) {

  .pay-body { grid-template-columns: 1fr; gap: 20px; padding: 20px 20px 6px; }
  .pay-hero { padding: 22px 20px 20px; }
  .pay-hero h3 { font-size: 23px; }
  .pay-hero-amount { text-align: left; }
  .pay-crypto-amount, .pay-eur { justify-content: flex-start; }
  .pay-foot { padding: 14px 20px 22px; }
  .pay-actions { flex-direction: column; }
}

@media (max-width: 460px) {
  .pay-backdrop { padding: 12px 8px; }

  .pay-field { grid-template-columns: 1fr auto; grid-template-areas: "label bouton" "valeur bouton"; }
  .pay-crypto-figure { font-size: 21px; }
}

.orders-head { margin-top: 46px; }

.order-table .cell-name.mono {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.plan.locked { opacity: 0.55; }
.plan.locked .plan-btn { cursor: not-allowed; }

.lock-screen {
  text-align: center;
  padding: 56px 30px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px dashed var(--v-500);
  backdrop-filter: blur(18px);
}

.lock-icon { font-size: 40px; margin-bottom: 14px; opacity: 0.85; }

.lock-screen h3 { font-size: 25px; font-weight: 900; margin-bottom: 10px; }

.lock-screen p {
  max-width: 460px;
  margin: 0 auto 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

.plan-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid var(--border);
}

.plan-banner p { flex: 1; min-width: 200px; font-size: 13px; color: var(--muted); }

.plan-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  white-space: nowrap;
}

.plan-chip.decouverte,
.role-pill.decouverte { background: rgba(148, 163, 184, 0.26); color: #e2e8f0; border-color: rgba(148,163,184,0.4); }
.plan-chip.starter,
.role-pill.starter    { background: rgba(56, 189, 248, 0.24); color: #bae6fd; border-color: rgba(56,189,248,0.42); }
.plan-chip.pro,
.role-pill.pro        { background: linear-gradient(135deg, var(--v-400), var(--accent)); color: #fff; border-color: transparent; }
.plan-chip.business,
.role-pill.business   { background: rgba(251, 191, 36, 0.24); color: #fde68a; border-color: rgba(251,191,36,0.45); }
.plan-chip.illimite,
.role-pill.illimite   { background: linear-gradient(135deg, #22d3ee, #4ade80); color: #04231c; border-color: transparent; }

.role-tag.decouverte { background: rgba(148, 163, 184, 0.3); color: #e2e8f0; }
.role-tag.starter    { background: rgba(56, 189, 248, 0.3); color: #bae6fd; }
.role-tag.pro        { background: linear-gradient(135deg, var(--v-400), var(--accent)); color: #fff; border-color: transparent; }
.role-tag.business   { background: rgba(251, 191, 36, 0.3); color: #fde68a; }
.role-tag.illimite   { background: linear-gradient(135deg, #22d3ee, #4ade80); color: #04231c; border-color: transparent; }

.plan.owned { border-color: var(--ok); box-shadow: 0 22px 60px rgba(74, 222, 128, 0.22); }

.plan-flag.owned-flag {
  background: linear-gradient(135deg, var(--ok), #16a34a);
  box-shadow: 0 5px 18px rgba(74, 222, 128, 0.5);
}

@media (prefers-reduced-motion: reduce) {

  .discord-btn svg { transition: none; }
  .discord-btn:hover svg { transform: none; animation: none; }

  .user-chip:hover::before {
    animation: none;
    background-position: 50% 0;
  }

  .chip-logout-icon { transition: none; }
  .chip-logout:hover:not(:disabled) .chip-logout-icon { transform: none; }

  .pay-wallet::before,
  .pay-wallet::after,
  .pay-wallet-btn::after { display: none; }

  .pay-wallet-icon { animation: none; }
}

.support-steps { margin: 34px 0 0; }

.support-steps .step {

  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.support-steps .step:hover {
  transform: none;
  border-color: var(--v-300);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 6px 22px rgba(124, 58, 237, 0.16);
}

.support-steps .step:hover .step-num {
  box-shadow: 0 4px 22px rgba(124, 58, 237, 0.75);
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {

  .support-grid { grid-template-columns: 1fr; }
}

.support-grid .panel-head { margin-bottom: 20px; }

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 11px;

  max-height: 470px;
  overflow-y: auto;

  overflow-x: hidden;

  padding-right: 4px;
}

.ticket-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 22px 4px;
  text-align: center;
}

.ticket-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.45);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.ticket-card:hover {
  border-color: var(--v-300);
  background: rgba(124, 58, 237, 0.12);
}

.ticket-card:focus-visible {
  outline: none;
  border-color: var(--v-300);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16);
}

.ticket-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ticket-card-ref { font-size: 12px; color: var(--v-200); }

.ticket-card-new {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  color: #fff;
}

.ticket-card-subject {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 6px;
  word-break: break-word;
}

.ticket-card-meta { font-size: 11.5px; color: var(--muted); }

.ticket-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-card-foot .ticket-card-meta { min-width: 0; }

.ticket-card-del {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.16);
  color: var(--err);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.ticket-card:hover .ticket-card-del,
.ticket-card-del:focus-visible { opacity: 1; }

.ticket-card-del:hover {
  background: rgba(251, 113, 133, 0.28);
  border-color: rgba(251, 113, 133, 0.5);
  box-shadow: 0 6px 18px rgba(251, 113, 133, 0.28);
}

.ticket-card-del:focus-visible {
  outline: none;
  border-color: rgba(251, 113, 133, 0.6);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
}

@media (hover: none) {
  .ticket-card-del { opacity: 1; }
}

.hidden-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.5);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prio-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 20px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(217, 119, 6, 0.08));
}

.prio-banner[hidden] { display: none; }

.prio-star {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.prio-star svg { width: 100%; height: 100%; display: block; }

.prio-text { display: flex; flex-direction: column; gap: 3px; }
.prio-text b { font-size: 13px; color: #fde68a; }
.prio-text i { font-size: 11.5px; color: var(--muted); font-style: normal; line-height: 1.5; }

.prio-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #78350f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.prio-tag[hidden] { display: none; }

.dedie-banner {
  border-color: rgba(45, 212, 191, 0.38);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(13, 148, 136, 0.08));
}

.dedie-banner .prio-star {
  color: #2dd4bf;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.5));
}

.dedie-banner .prio-text b { color: #99f6e4; }

.dedie-tag {
  color: #042f2e;
  background: linear-gradient(135deg, #5eead4, #14b8a6);
}

.ticket-row { cursor: pointer; }

.ticket-row.is-dedie td:first-child { box-shadow: inset 3px 0 0 #2dd4bf; }
.ticket-row.is-dedie { background: rgba(45, 212, 191, 0.05); }
.ticket-row.is-dedie:hover { background: rgba(45, 212, 191, 0.1); }

.ticket-row.is-prio td:first-child { box-shadow: inset 3px 0 0 #fbbf24; }
.ticket-row.is-prio { background: rgba(251, 191, 36, 0.05); }
.ticket-row.is-prio:hover { background: rgba(251, 191, 36, 0.1); }

.chat {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  height: min(78vh, 720px);
}

.chat-side,
.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.chat-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
}

.chat-side-head h3 { font-size: 15px; }

.chat-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-item {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s;
}

.chat-item:hover { background: rgba(124, 58, 237, 0.12); }

.chat-item.active {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(168, 85, 247, 0.4);
}

.chat-item.is-prio { box-shadow: inset 3px 0 0 #fbbf24; }
.chat-item.is-dedie { box-shadow: inset 3px 0 0 #2dd4bf; }

.chat-item-text { flex: 1; min-width: 0; }

.chat-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--v-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-date { font-size: 10px; color: var(--muted); flex-shrink: 0; }

.chat-item-subject {
  font-size: 12px;
  color: var(--v-200);
  margin: 2px 0 3px;
}

.chat-item-subject,
.chat-item-last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-last { font-size: 11.5px; color: var(--muted); }

.chat-item-dot {
  flex-shrink: 0;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(217, 70, 239, 0.8);
}

.chat-empty {
  padding: 18px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.chat-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.42);
}

.chat-avatar.lg { width: 42px; height: 42px; font-size: 16px; }

.chat-avatar.staff { background: linear-gradient(135deg, #6d28d9, #4c1d95); }

.chat-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.chat-head-text { flex: 1; min-width: 0; }
.chat-head-text h3 { font-size: 16px; word-break: break-word; }

.chat-head-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-word;
}

.chat-head-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 9px 18px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.35);
}

.chat-sub .mono { color: var(--v-200); }

.chat-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
}

.chat-day {
  align-self: center;
  margin: 12px 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(23, 23, 23, 0.6);
  border: 1px solid var(--border);
}

.chat-day:first-child { margin-top: 0; }

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 74%;
  margin-top: 9px;
}

.chat-row.grouped { margin-top: 2px; }

.chat-row.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-row.grouped .chat-avatar { visibility: hidden; }

.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.55);
  min-width: 0;
}

.chat-row:not(.mine) .chat-bubble { border-bottom-left-radius: 5px; }

.chat-row.mine .chat-bubble {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.42), rgba(168, 85, 247, 0.26));
  border-color: rgba(168, 85, 247, 0.42);
}

.chat-row.grouped:not(.mine) .chat-bubble { border-bottom-left-radius: 16px; }
.chat-row.grouped.mine .chat-bubble { border-bottom-right-radius: 16px; }

.chat-author {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--v-200);
  margin-bottom: 4px;
}

.chat-text {
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-time {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.4);
}

.chat-compose[hidden] { display: none; }

.chat-compose textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  border-radius: 14px;
}

.chat-send {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
  transition: transform 0.16s, box-shadow 0.16s, opacity 0.16s;
}

.chat-send svg { width: 19px; height: 19px; }

.chat-send:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.7);
}

.chat-send:active { transform: scale(0.95); }

.chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.chat-closed {
  padding: 15px 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  background: rgba(23, 23, 23, 0.4);
}

@media (max-width: 900px) {

  .chat {
    grid-template-columns: 1fr;
    height: auto;
  }

  .chat-side { max-height: 210px; }

  .chat-side-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .chat-item { width: 240px; flex-shrink: 0; }

  .chat-main { height: 68vh; }

  .chat-row { max-width: 88%; }
}

#view-panel .btn:not(.primary):not(.danger):not(.ghost) {
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(88, 101, 242, 0.4);
}
#view-panel .btn:not(.primary):not(.danger):not(.ghost):hover:not(:disabled) {
  background: rgba(88, 101, 242, 0.32);
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.32);
}

#view-panel .btn.ghost:hover:not(:disabled) {
  background: rgba(88, 101, 242, 0.16);
  color: #fff;
}

#view-panel .log-filter.active {
  background: var(--blurple);
  color: #fff;
}

#view-panel .dm-emoji:hover,
#view-panel .dm-emoji.ouvert {
  color: #fff;
  background: rgba(88, 101, 242, 0.22);
}

#view-panel input[type="range"]::-webkit-slider-thumb {
  background: var(--blurple);
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.6);
}
#view-panel input[type="range"]::-moz-range-thumb {
  background: var(--blurple);
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.6);
}
#view-panel input[type="range"]:focus {
  border-color: var(--blurple);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.28);
}

.captcha-slot {
  margin: 6px 0 14px;
  display: flex;
  justify-content: center;
}

.captcha-slot.captcha-attente {
  width: 303px;
  height: 78px;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background:
    linear-gradient(100deg,
      rgba(124, 58, 237, 0.06) 30%,
      rgba(124, 58, 237, 0.16) 50%,
      rgba(124, 58, 237, 0.06) 70%)
    rgba(23, 23, 23, 0.4);
  background-size: 200% 100%;
  animation: captcha-shimmer 1.2s ease-in-out infinite;
}

@keyframes captcha-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .captcha-slot.captcha-attente { animation: none; }
}

.oauth-btn.oauth-verrou {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

#view-panel .run-account-avatar { overflow: visible; position: relative; }
#view-panel .run-account-avatar img,
#view-panel .run-account-avatar { border-radius: 50%; }
#view-panel .run-account-avatar > img { overflow: hidden; }
.presence-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;

  box-shadow: 0 0 0 2.5px var(--v-800);
}
.presence-en-ligne { background: #23a55a; }
.presence-absent   { background: #f0b232; }
.presence-ne-pas-deranger { background: #f23f43; }
.presence-invisible { background: #80848e; }

.presence-en-ligne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.6);
  animation: presence-pulse 2.4s ease-out infinite;
}
@keyframes presence-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(35, 165, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .presence-en-ligne::after { animation: none; }
}

.dm-verifie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 1px;
  border-radius: 50%;
  background: var(--blurple);
  flex: none;
  vertical-align: middle;
}
.dm-verifie svg { width: 11px; height: 11px; fill: #fff; }

.dm-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.dm-typing-points { display: inline-flex; gap: 3px; align-items: flex-end; }
.dm-typing-points i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  animation: dm-typing-bounce 1.3s infinite ease-in-out;
}
.dm-typing-points i:nth-child(2) { animation-delay: 0.18s; }
.dm-typing-points i:nth-child(3) { animation-delay: 0.36s; }
.dm-typing-texte b { color: var(--text); }
@keyframes dm-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-typing-points i { animation: none; opacity: 0.85; }
}

#view-panel .dm-num {
  transition: border-radius 0.18s ease, transform 0.18s ease;
}
#view-panel .dm-card:hover .dm-num {
  border-radius: 30%;
  transform: translateY(-1px);
}

#view-panel .dm-card {
  position: relative;
}
#view-panel .dm-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--blurple);
  transform: translateY(-50%);
  transition: height 0.2s ease;
}
#view-panel .dm-card:hover::before { height: 34px; }

#view-panel #log-box .log-line {
  position: relative;
  transition: background 0.12s ease;
}
#view-panel #log-box .log-line:hover {
  background: rgba(88, 101, 242, 0.10);
  box-shadow: inset 3px 0 0 var(--blurple);
}

#view-panel .log-filter {
  border-radius: 6px;
  transition: background 0.14s ease, color 0.14s ease;
}

#view-panel #log-panel .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#view-panel #log-panel .panel-head h2::before {
  content: "#";
  color: var(--muted);
  font-weight: 800;
  opacity: 0.7;
}

.dm-bubble-text .mention {
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 600;
}

.dm-variables {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dm-variables-titre {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.dm-var {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(88, 101, 242, 0.4);
  background: rgba(88, 101, 242, 0.14);
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}
.dm-var code {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 12px;
  color: #c9cdfb;
}
.dm-var:hover {
  background: rgba(88, 101, 242, 0.28);
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.3);
  transform: translateY(-1px);
}
.dm-var:active { transform: translateY(0); }
.dm-variables-aide {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.85;
}

.filtres {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.35);
  overflow: hidden;
}

#view-panel .filtres .filtre-ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin: 0;
  cursor: pointer;
  transition: background 0.14s ease;

  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
}

#view-panel .filtres .filtre-champ { cursor: default; }

.filtres .filtre-ligne + .filtre-ligne { border-top: 1px solid rgba(168, 85, 247, 0.12); }
.filtres .filtre-ligne:hover { background: rgba(88, 101, 242, 0.08); }

.filtre-ligne input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blurple);
  cursor: pointer;
}

.filtre-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.filtre-texte b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.filtre-texte i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;

  text-transform: none;
  letter-spacing: 0;
}

#view-panel .filtre-select {
  flex: none;
  width: auto;
  min-width: 132px;
  max-width: 45%;
  padding: 7px 11px;
  font-size: 12.5px;
  margin: 0;
}

#view-panel .filtre-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.filtres-bilan {
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 8px 11px;
  border-left: 2px solid rgba(88, 101, 242, 0.55);
  background: rgba(88, 101, 242, 0.07);
  border-radius: 0 8px 8px 0;
}

.filtres-bilan b { color: var(--v-100); font-weight: 600; }

.memoire {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.35);
}

.memoire[hidden] { display: none; }

.memoire-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.memoire-texte b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.memoire-compte { font-size: 11px; color: var(--muted); }

.memoire button { flex: none; }

.dm-var-spin {
  border-color: rgba(217, 70, 239, 0.45);
  background: rgba(217, 70, 239, 0.14);
}
.dm-var-spin code { color: #f0abfc; }
.dm-var-spin:hover {
  background: rgba(217, 70, 239, 0.28);
  box-shadow: 0 4px 14px rgba(217, 70, 239, 0.3);
}

.plage-bornes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.plage-sep { font-size: 12px; color: var(--muted); }

#view-panel .plage-bornes .filtre-select {
  min-width: 74px;
  max-width: none;
}

.dm-test {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23, 23, 23, 0.35);
}

.dm-test-tete {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 11px;
}

.dm-test-tete b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.dm-test-tete i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.dm-test-ligne {
  display: flex;
  gap: 10px;
  align-items: center;
}

#view-panel .dm-test-ligne input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.dm-test-ligne .btn { flex: none; }

.dm-test .hint { margin-top: 9px; }
.dm-test .hint a { color: var(--v-200); text-decoration: underline; }
.dm-test .hint a:hover { color: var(--v-100); }

.compte-perso [hidden] { display: none !important; }

.compte-perso .account-note {
  margin-bottom: 16px;
  line-height: 1.55;
}
.compte-perso .field { margin-bottom: 0; }
.compte-perso .perso-avertissement {
  color: var(--warn);
  opacity: 0.9;
  margin-top: 10px;
}

.compte-perso .account-actions {
  margin-top: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.compte-perso .account-actions .btn {
  flex: 1 1 auto;
  min-width: 150px;
}

.perso-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}
.perso-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}
/* Un compte actif participe a l'envoi : on le met en avant. */
.perso-carte.actif {
  border-color: rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.10);
}
.perso-carte-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.perso-carte .badge.soft { flex: none; }
.perso-repartition { margin: 2px 0 0; }
@media (max-width: 640px) {
  .perso-carte-actions { margin-left: 0; width: 100%; }
}
.perso-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: visible;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--blurple), var(--v-400));
}
.perso-avatar.has-photo { background: none; }
.perso-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.perso-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perso-infos b { color: var(--text); font-size: 15px; }

.perso-carte .dm-verifie { margin-left: auto; }
.perso-token {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.compte-perso .perso-aide {
  margin-top: 10px;
  font-size: 12.5px;
}
.compte-perso .perso-aide a {
  color: var(--blurple);
  text-decoration: none;
}
.compte-perso .perso-aide a:hover { text-decoration: underline; }

.perso-avatar .presence-dot {
  width: 13px;
  height: 13px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 3px var(--v-800);
}

/* --- Page de telechargement du logiciel --- */
.dl-lock {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  padding: 44px 36px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}
.dl-lock-icon { font-size: 44px; margin-bottom: 14px; }
.dl-lock h3 { font-size: 22px; margin-bottom: 12px; color: var(--text); }
.dl-lock p { color: var(--muted); line-height: 1.6; margin-bottom: 24px; }

.dl-card {
  max-width: 720px;
  margin: 40px auto;
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(42, 21, 83, 0.55), rgba(40, 40, 40, 0.65));
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--glow);
  backdrop-filter: blur(14px);
}

.dl-visuel {
  position: relative;
  flex: 0 0 140px;
  height: 140px;
  display: grid;
  place-items: center;
}
.dl-logo {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  border-radius: 26px;
  filter: drop-shadow(0 12px 32px rgba(124, 58, 237, 0.55));
}
.dl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dl-halo {
  position: absolute;
  inset: -18px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45), transparent 70%);
  filter: blur(14px);
  animation: dl-pulse 3.2s ease-in-out infinite;
}
@keyframes dl-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

.dl-corps { flex: 1; min-width: 0; }
.dl-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok);
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.dl-nom { font-size: 24px; color: var(--text); margin-bottom: 10px; }
.dl-desc { color: var(--muted); line-height: 1.6; margin-bottom: 18px; }

/* Choix de la plateforme sur la carte de telechargement. */
.dl-os {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.dl-os-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: rgba(139, 92, 246, 0.05);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dl-os-btn:hover { color: var(--text); border-color: rgba(139, 92, 246, 0.45); transform: translateY(-1px); }
.dl-os-btn:focus-visible { outline: 2px solid var(--v-400); outline-offset: 2px; }
.dl-os-btn.is-on {
  color: var(--text);
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(139, 92, 246, 0.16);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18), 0 6px 20px rgba(139, 92, 246, 0.18);
}
.dl-os-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.9; }
.dl-os-btn.is-on .dl-os-ico { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dl-os-btn { transition: none; }
  .dl-os-btn:hover { transform: none; }
}
html[data-animations="non"] .dl-os-btn { transition: none; }
html[data-animations="non"] .dl-os-btn:hover { transform: none; }

.dl-aide {
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
  font-size: 13.5px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
}

.dl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
.dl-meta-sep { opacity: 0.4; }

.dl-btn { width: 100%; }
.dl-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  opacity: 0.85;
}
.dl-erreur {
  margin-top: 12px;
  font-size: 13px;
  color: var(--err);
  background: rgba(251, 113, 133, 0.1);
  border: 1px solid rgba(251, 113, 133, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
}

@media (max-width: 640px) {
  .dl-card { flex-direction: column; text-align: center; padding: 32px 24px; }
  .dl-meta { justify-content: center; }
}

/* ------------------------------------------------------------------
   Logo brixall sur les cartes de formule

   Le logo est un PNG a fond transparent : on s'en sert comme masque,
   ce qui laisse la couleur libre. Chaque formule ne definit que ses
   trois variables (--plan-c1 / --plan-c2 / --plan-rgb) ; tout le reste
   en decoule.

   La pastille est montee en trois couches superposees pour que les
   animations restent fluides (transform et opacity, jamais d'ombre
   reanimee a chaque image) :
     .plan-logo          boite de reference, porte le survol
     .plan-logo-aura     halo flou qui respire, derriere
     .plan-logo-pastille le cadre, la marque (::before) et le reflet (::after)
     .plan-crown         la couronne du palier, par-dessus et hors cadre
------------------------------------------------------------------ */

.plan,
.home-plan {

  --plan-c1: #c4b5fd;
  --plan-c2: #a855f7;
  --plan-rgb: 168, 85, 247;
  --plan-retard: 0s;

  --plan-degrade: linear-gradient(130deg, var(--plan-c1) 0%, var(--plan-c2) 45%, var(--plan-c1) 100%);
  --plan-teinte: linear-gradient(160deg, rgba(var(--plan-rgb), 0.3), rgba(var(--plan-rgb), 0.06));
  --plan-trait: rgba(var(--plan-rgb), 0.42);
  --plan-halo: rgba(var(--plan-rgb), 0.55);
}

/* Les retards decalent les cycles d'une carte a l'autre : sans eux les
   cinq logos respireraient au meme rythme, ce qui fait mecanique. */

.plan[data-role="decouverte"],
.home-plan[data-role="decouverte"] {
  --plan-c1: #f1f5f9;
  --plan-c2: #94a3b8;
  --plan-rgb: 148, 163, 184;
  --plan-retard: 0s;
}

.plan[data-role="starter"],
.home-plan[data-role="starter"] {
  --plan-c1: #a5e8ff;
  --plan-c2: #0ea5e9;
  --plan-rgb: 56, 189, 248;
  --plan-retard: -0.8s;
}

/* Pro : vert */
.plan[data-role="pro"],
.home-plan[data-role="pro"] {
  --plan-c1: #a7f3c0;
  --plan-c2: #16a34a;
  --plan-rgb: 74, 222, 128;
  --plan-retard: -1.6s;
}

.plan[data-role="business"],
.home-plan[data-role="business"] {
  --plan-c1: #fef3c7;
  --plan-c2: #f59e0b;
  --plan-rgb: 251, 191, 36;
  --plan-retard: -2.4s;
}

/* Ultime : violet de marque, surmonte d'une couronne */
.plan[data-role="illimite"],
.home-plan[data-role="illimite"] {
  --plan-c1: #e9d5ff;
  --plan-c2: #c026d3;
  --plan-rgb: 217, 70, 239;
  --plan-retard: -3.2s;
}

.plan-logo,
.home-plan-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  transition: transform 0.26s ease;
}

/* 1. l'aura : halo flou qui enfle et retombe */
.plan-logo-aura {
  position: absolute;
  inset: -9px;
  border-radius: 26px;
  background: radial-gradient(closest-side, rgba(var(--plan-rgb), 0.55), rgba(var(--plan-rgb), 0) 74%);
  filter: blur(7px);
  opacity: 0.35;
  pointer-events: none;
  animation: plan-aura 3.8s ease-in-out infinite;
  animation-delay: var(--plan-retard);
}

@keyframes plan-aura {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 0.72; transform: scale(1.07); }
}

/* 2. la pastille : relief, et une levitation tres lente */
.plan-logo-pastille {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(125% 115% at 28% 8%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 56%),
    var(--plan-teinte);
  border: 1px solid var(--plan-trait);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -14px 24px -16px var(--plan-halo),
    0 12px 26px -16px var(--plan-halo);
  transition: border-color 0.26s ease, box-shadow 0.26s ease;
  animation: plan-levitation 4.6s ease-in-out infinite;
  animation-delay: var(--plan-retard);
}

@keyframes plan-levitation {
  0%, 100% { transform: translateY(1.5px) rotate(-1.1deg); }
  50%      { transform: translateY(-2.5px) rotate(1.1deg); }
}

/* 3. la marque : le PNG sert de masque, et le degrade s'ecoule dedans */
.plan-logo-pastille::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  background: var(--plan-degrade);
  background-size: 240% 240%;
  -webkit-mask: url("/s/4a7e2d") center / contain no-repeat;
  mask: url("/s/4a7e2d") center / contain no-repeat;
  filter: drop-shadow(0 2px 7px rgba(var(--plan-rgb), 0.6));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: plan-flux 6s ease-in-out infinite;
  animation-delay: var(--plan-retard);
}

@keyframes plan-flux {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 4. le reflet : une bande claire qui traverse, puis une longue pause */
.plan-logo-pastille::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -60%;
  left: -50%;
  width: 38%;
  height: 220%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) rotate(18deg);
  opacity: 0;
  pointer-events: none;
  animation: plan-reflet 5.6s ease-in-out infinite;
  animation-delay: var(--plan-retard);
}

@keyframes plan-reflet {
  0%        { transform: translateX(0) rotate(18deg); opacity: 0; }
  6%        { opacity: 1; }
  30%       { transform: translateX(420%) rotate(18deg); opacity: 0; }
  100%      { transform: translateX(420%) rotate(18deg); opacity: 0; }
}

/* Survol : tout s'emballe un peu */
.plan:hover .plan-logo,
.home-plan:hover .home-plan-logo { transform: translateY(-4px); }

.plan:hover .plan-logo-aura,
.home-plan:hover .plan-logo-aura { animation-duration: 1.9s; }

.plan:hover .plan-logo-pastille,
.home-plan:hover .plan-logo-pastille {
  border-color: rgba(var(--plan-rgb), 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -14px 24px -14px var(--plan-halo),
    0 16px 34px -12px var(--plan-halo);
  animation-duration: 2.4s;
}

.plan:hover .plan-logo-pastille::before,
.home-plan:hover .plan-logo-pastille::before { transform: scale(1.12); }

.plan:hover .plan-logo-pastille::after,
.home-plan:hover .plan-logo-pastille::after { animation-duration: 2.2s; }

.plan.locked .plan-logo { filter: grayscale(0.75); opacity: 0.7; }

/* ---- Couronne de la formule Ultime -------------------------------
   Posee au-dessus de la pastille, en dehors de son cadre, et animee
   d'un leger flottement. Le translateX(-50%) du centrage est repris
   dans les keyframes, sinon l'animation le remplacerait.
------------------------------------------------------------------ */

.plan-crown {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -17px;
  width: 30px;
  height: 23px;
  transform: translateX(-50%);
  animation: plan-crown-flottement 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.plan-crown svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* La lueur appartient au metal, pas a la couronne. */
.plan-crown.argent {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 9px rgba(226, 232, 240, 0.6))
          drop-shadow(0 0 16px rgba(148, 163, 184, 0.35));
}

.plan-crown.or {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 10px rgba(251, 191, 36, 0.55));
}

/* Le dessin du diamant descend plus bas dans son viewBox que celui des deux
   autres : a hauteur egale son bandeau mordrait davantage sur la pastille.
   29x23 cale son bandeau au meme niveau que l'argent et l'or. */
.plan-crown.diamant {
  width: 29px;
  height: 23px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 9px rgba(103, 232, 249, 0.75))
          drop-shadow(0 0 18px rgba(34, 211, 238, 0.4));
}

.plan-crown .dia-facette { animation: plan-diamant-facette 3.4s ease-in-out infinite; }

@keyframes plan-diamant-facette {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.plan-crown .dia-eclat { animation: plan-diamant-eclat 2.2s ease-in-out infinite; }
.plan-crown .dia-eclat-b { animation-delay: -0.7s; }
.plan-crown .dia-eclat-c { animation-delay: -1.4s; }
.plan-crown .dia-eclat-d { animation-delay: -1.9s; }

@keyframes plan-diamant-eclat {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

@keyframes plan-crown-flottement {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3.5deg); }
  50%      { transform: translateX(-50%) translateY(-6px) rotate(3.5deg); }
}

/* Les perles et les gemmes scintillent en decale */
.couronne-perle,
.couronne-gemme { animation: couronne-scintillement 2.4s ease-in-out infinite; }

.couronne-perle-a { animation-delay: -0.3s; }
.couronne-perle-b { animation-delay: -1.2s; }
.couronne-perle-c { animation-delay: -1.8s; }
.couronne-gemme-a { animation-delay: -0.9s; }
.couronne-gemme-b { animation-delay: -1.5s; }
.couronne-gemme-c { animation-delay: -2.1s; }

@keyframes couronne-scintillement {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.plan:hover .plan-crown,
.home-plan:hover .plan-crown { animation-duration: 1.9s; }

/* ---- Accessibilite et petits ecrans ------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .plan-logo,
  .home-plan-logo { transition: none; }

  .plan:hover .plan-logo,
  .home-plan:hover .home-plan-logo { transform: none; }

  .plan-logo-aura,
  .plan-logo-pastille,
  .plan-logo-pastille::before,
  .couronne-perle,
  .couronne-gemme,
  .plan-crown .dia-facette,
  .plan-crown .dia-eclat { animation: none; }

  .plan-logo-pastille::after { animation: none; opacity: 0; }

  .plan-crown {
    animation: none;
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (max-width: 640px) {
  .plan-logo,
  .home-plan-logo { width: 50px; height: 50px; }
  .plan-logo-pastille { border-radius: 15px; }
  .plan-logo-pastille::before { width: 28px; height: 28px; }
  .plan-logo-aura { inset: -7px; border-radius: 22px; }
  .plan-crown { width: 26px; height: 20px; top: -15px; }
  .plan-crown.diamant { width: 25px; height: 20px; }
}

/* ====================== Support : captures, emojis, direct ======================
   Reprend les gestes du logiciel : images jointes, palette d'emojis,
   visionneuse plein ecran et indicateur de frappe. */

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v-100);
}

.sup-jointes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.sup-jointes[hidden] { display: none; }

.sup-jointe {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 26px 6px 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.55);
}

.sup-jointe img {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}

.sup-jointe-infos { display: flex; flex-direction: column; min-width: 0; max-width: 140px; }
.sup-jointe-infos b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-jointe-infos span { font-size: 10.5px; color: var(--muted); }

.sup-jointe-x {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.85);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sup-jointe-x:hover { color: var(--err); background: rgba(251, 113, 133, 0.2); }

.sup-ajouter { display: inline-flex; align-items: center; gap: 8px; }
.sup-ajouter svg { width: 16px; height: 16px; }

.chat-jointes { padding: 10px 16px 0; margin-bottom: 0; }

.chat-outils { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.chat-outil {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}

.chat-outil svg { width: 18px; height: 18px; }
.chat-outil:hover { color: var(--text); background: rgba(124, 58, 237, 0.16); border-color: var(--border); }

/* En-tete de bulle : auteur et marque eventuelle. */
.chat-tete { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.chat-tete .chat-author { margin-bottom: 0; }

.chat-marque {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78350f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.chat-marque.auto { color: var(--muted); background: none; border: 1px solid var(--border); }
.chat-row.auto .chat-bubble { background: rgba(23, 23, 23, 0.4); border-style: dashed; }
.chat-row.auto .chat-text { color: var(--muted); }

/* « est en train d'ecrire » */
.chat-ecrit {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 18px 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.chat-ecrit[hidden] { display: none; }
.chat-ecrit-points { display: inline-flex; gap: 3px; }

.chat-ecrit-points i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v-300);
  animation: supEcrit 1.1s infinite ease-in-out;
}

.chat-ecrit-points i:nth-child(2) { animation-delay: 0.15s; }
.chat-ecrit-points i:nth-child(3) { animation-delay: 0.3s; }

@keyframes supEcrit {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Images dans une bulle */
.tk-images { display: grid; gap: 4px; margin: 7px 0 2px; max-width: 340px; }
.tk-images.n1 { grid-template-columns: 1fr; }
.tk-images.n2, .tk-images.n3, .tk-images.n4 { grid-template-columns: 1fr 1fr; }
.tk-images.n3 .tk-vignette:first-child { grid-column: 1 / -1; }

.tk-vignette {
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(23, 23, 23, 0.5);
  cursor: zoom-in;
  transition: border-color 0.16s, transform 0.16s;
}

.tk-vignette:hover { border-color: rgba(168, 85, 247, 0.5); transform: translateY(-1px); }
.tk-vignette img { display: block; width: 100%; height: 118px; object-fit: cover; }
.tk-images.n1 .tk-vignette img { height: auto; max-width: 100%; max-height: 240px; }

/* Palette d'emojis : panneau vertical ancre au bouton, pose en position
   fixe pour ne pas etre coupe par le cadre de la conversation. */
.tk-palette {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 292px;
  height: min(386px, 68vh);
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 16px;
  background: var(--v-800);
  box-shadow: 0 28px 64px -26px #000;
}

.tk-palette[hidden] { display: none; }

.tk-palette-onglets {
  display: flex;
  gap: 2px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.45);
}

.tk-palette-onglet {
  flex: 1;
  padding: 5px 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}

.tk-palette-onglet:hover { opacity: 0.9; background: rgba(124, 58, 237, 0.14); }
.tk-palette-onglet.actif { opacity: 1; background: rgba(124, 58, 237, 0.26); }

.tk-palette-corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

.tk-palette-corps::-webkit-scrollbar { width: 10px; }

.tk-palette-corps::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: rgba(124, 58, 237, 0.35);
  background-clip: content-box;
}

.tk-palette-titre {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -8px 4px;
  padding: 9px 10px 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--v-800);
}

.tk-palette-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 6px; }

.tk-palette-item {
  padding: 4px 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.14s, transform 0.14s;
}

.tk-palette-item:hover { background: rgba(124, 58, 237, 0.26); transform: scale(1.2); }

/* Visionneuse plein ecran */
.tk-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 48px 18px 56px;
  background: rgba(21, 21, 21, 0.93);
  backdrop-filter: blur(6px);
}

.tk-visionneuse[hidden] { display: none; }

.tk-visionneuse img {
  grid-column: 2;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 40px 90px -40px #000;
}

.tk-vis-nav, .tk-vis-fermer {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(40, 40, 40, 0.85);
  color: var(--text);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}

.tk-vis-nav { width: 44px; height: 44px; }
.tk-vis-nav svg { width: 22px; height: 22px; }
.tk-vis-nav:hover, .tk-vis-fermer:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(124, 58, 237, 0.3); }
.tk-vis-nav[hidden] { visibility: hidden; display: grid; }

.tk-vis-fermer { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; }
.tk-vis-fermer svg { width: 18px; height: 18px; }
.tk-vis-pied { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; color: var(--muted); }

/* Pastille du menu utilisateur */
.menu-pastille {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #a21caf);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.menu-pastille[hidden] { display: none; }

@media (max-width: 720px) {
  .tk-palette { width: min(292px, calc(100vw - 24px)); }
}

/* ====================== Marqueurs de formule ======================
   Pastilles « prioritaire » et « canal dédié », badge de délai du
   formulaire, et l'avantage de support mis en avant dans les cartes de
   prix. Fond sombre, liseré et texte à la couleur de l'avantage : l'ambre
   pour le prioritaire, le turquoise pour le dédié. */
.prio-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 14px -7px rgba(251, 191, 36, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.prio-tag svg { flex-shrink: 0; width: 11px; height: 11px; filter: drop-shadow(0 0 4px currentColor); }

.prio-tag.is-dedie,
.prio-tag.dedie-tag {
  color: #99f6e4;
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(45, 212, 191, 0.12);
  box-shadow: 0 0 14px -7px rgba(45, 212, 191, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Badge de délai, en haut du formulaire de demande. */
.delai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
}

.delai-badge svg { flex-shrink: 0; width: 13px; height: 13px; filter: drop-shadow(0 0 5px currentColor); }

.delai-badge.delai-prio {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 16px -8px rgba(251, 191, 36, 0.9);
}

.delai-badge.delai-dedie {
  color: #99f6e4;
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(45, 212, 191, 0.12);
  box-shadow: 0 0 16px -8px rgba(45, 212, 191, 0.95);
}

/* L'avantage de support devient la ligne signature de la formule. */
.plan-perks li.perk-prio,
.home-plan li.perk-prio { color: #fde68a; font-weight: 600; }

.plan-perks li.perk-dedie,
.home-plan li.perk-dedie { color: #99f6e4; font-weight: 600; }

.plan-perks li.perk-prio::before { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.7); }
.plan-perks li.perk-dedie::before { color: #2dd4bf; text-shadow: 0 0 10px rgba(45, 212, 191, 0.7); }

.home-plan li.perk-prio::before {
  border-color: #fbbf24;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.8));
}

.home-plan li.perk-dedie::before {
  border-color: #2dd4bf;
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.8));
}

/* La carte vedette repeint ses coches : l'avantage de support garde la sienne. */
.home-plan.featured li.perk-prio::before { border-color: #fbbf24; }
.home-plan.featured li.perk-dedie::before { border-color: #2dd4bf; }

/* ====================== Fil de support : liste dense ======================
   Même mise en page que le logiciel : une seule colonne, avatar et en-tête
   au changement d'auteur seulement, heure dans la gouttière au survol. */

.chat { gap: 16px; }

.chat-side,
.chat-main {
  border-radius: 16px;
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(43, 43, 43, 0.93), rgba(26, 26, 26, 0.93));
}

.chat-main {
  background:
    radial-gradient(820px 300px at 15% -10%, rgba(124, 58, 237, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(39, 39, 39, 0.94), rgba(25, 25, 25, 0.94));
}

.chat-side-list,
.chat-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

.chat-side-list::-webkit-scrollbar,
.chat-body::-webkit-scrollbar { width: 10px; }

.chat-side-list::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: rgba(124, 58, 237, 0.35);
  background-clip: content-box;
}

.chat-head { padding: 13px 16px; background: rgba(23, 23, 23, 0.3); }
.chat-head-text h3 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub { padding: 7px 16px; background: rgba(23, 23, 23, 0.2); font-size: 10px; }

.chat-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  background: linear-gradient(140deg, var(--v-200), var(--v-500));
  box-shadow: 0 4px 14px -7px rgba(124, 58, 237, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.chat-avatar.lg { width: 40px; height: 40px; font-size: 15px; }
.chat-avatar.staff { background: linear-gradient(140deg, #6ee7ff, #2b6fd6); }

/* Séparateur de journée : un filet et une étiquette. */
.chat-day {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: 14px 6px 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-day::before,
.chat-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4));
}

.chat-day::after { background: linear-gradient(90deg, rgba(168, 85, 247, 0.4), transparent); }

/* Une ligne par message, plus de bulle ni d'alignement à droite. */
.chat-body { display: block; padding: 8px 10px 10px; }

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 2px 8px;
  border-radius: 9px;
  transition: background 0.12s;
}

.chat-row:not(.grouped) { margin-top: 9px; }
.chat-row:first-child { margin-top: 0; }
.chat-row:hover { background: rgba(124, 58, 237, 0.07); }
.chat-row.mine { align-self: auto; flex-direction: row; }
.chat-row > .chat-avatar { margin-top: 1px; }

.chat-heure-gouttiere {
  flex: 0 0 30px;
  padding-top: 3px;
  font-style: normal;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.12s;
}

.chat-row:hover .chat-heure-gouttiere { opacity: 1; }

/* Les anciennes bulles portaient un fond et des coins : on les neutralise
   explicitement, leurs selecteurs etant plus specifiques que « .chat-bubble ». */
.chat-bubble,
.chat-row.mine .chat-bubble,
.chat-row:not(.mine) .chat-bubble,
.chat-row.grouped .chat-bubble,
.chat-row.grouped.mine .chat-bubble,
.chat-row.grouped:not(.mine) .chat-bubble {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.chat-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 1px; }
.chat-author { display: inline; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text); }
.chat-row.equipe .chat-author { color: var(--v-200); }

.chat-marque {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #282828;
  background: linear-gradient(135deg, var(--v-200), var(--v-400));
}

.chat-marque.note { color: #78350f; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.chat-marque.auto { color: var(--muted); background: none; border: 1px solid var(--border); }
.chat-marque.vous { color: var(--muted); background: none; border: 1px solid var(--border); }

.chat-time {
  float: none;
  display: inline;
  margin: 0;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.chat-text { font-size: 13px; line-height: 1.45; color: var(--text); }

.chat-row.interne { background: rgba(251, 191, 36, 0.08); box-shadow: inset 2px 0 0 var(--warn); }
.chat-row.auto { box-shadow: inset 2px 0 0 rgba(168, 85, 247, 0.45); }
.chat-row.auto .chat-text { color: var(--muted); font-style: italic; }
.chat-row.auto .chat-bubble { border: 0; background: none; }

/* Images d'un message */
.tk-images { max-width: 320px; margin: 5px 0 2px; }
.tk-vignette { border-radius: 10px; }
.tk-vignette img { height: 104px; }
.tk-images.n1 .tk-vignette img { height: auto; max-height: 220px; }

/* Composeur en pilule, qui s'allume au focus. */
.chat-compose {
  align-items: flex-end;
  gap: 6px;
  margin: 10px 14px 12px;
  padding: 5px 5px 5px 7px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: rgba(23, 23, 23, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.chat-compose:focus-within {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(23, 23, 23, 0.78);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16), 0 0 32px -14px rgba(124, 58, 237, 0.9);
}

.chat-compose textarea {
  padding: 9px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.5;
}

.chat-compose textarea:hover,
.chat-compose textarea:focus { border: 0; background: transparent; box-shadow: none; }

.chat-outil { width: 32px; height: 32px; border-radius: 50%; }
.chat-outil svg { width: 17px; height: 17px; }

.chat-send {
  width: 38px;
  height: 38px;
  opacity: 0.45;
  transform: scale(0.94);
  background: linear-gradient(140deg, var(--v-400), var(--v-500));
}

.chat-send svg { width: 18px; height: 18px; }
.chat-compose.pret .chat-send { opacity: 1; transform: none; }
.chat-compose.pret .chat-send:hover { transform: scale(1.07); }

.chat-ecrit { padding: 3px 18px 5px; font-size: 11px; }

/* Liste latérale compacte */
.chat-item { border-radius: 12px; padding: 9px 10px; transition: background 0.16s, border-color 0.16s; }
.chat-item:hover { border-color: var(--border); }

.chat-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.26), rgba(124, 58, 237, 0.08));
  border-color: rgba(168, 85, 247, 0.45);
}

.chat-item-dot { animation: supBattement 2.4s ease-in-out infinite; }

@keyframes supBattement {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.55; }
}


/* ---------- Liste des demandes : trait d'état et texte nu ---------- */
.chat-item {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 9px 10px 9px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: background 0.22s, transform 0.18s;
}

.chat-item + .chat-item { margin-top: 1px; }
.chat-item:hover { background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.02) 72%); transform: translateX(2px); }
.chat-item.active { background: linear-gradient(90deg, rgba(124, 58, 237, 0.32), rgba(124, 58, 237, 0.04) 76%); border-color: transparent; }

/* Reflet lent sur la demande ouverte. */
.chat-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.07) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: supReflet 4.2s ease-in-out infinite;
}

@keyframes supReflet {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Le trait porte l'état. */
.chat-item-barre {
  flex: 0 0 3px;
  align-self: stretch;
  border-radius: 0 999px 999px 0;
  background: #3a2a5e;
  transition: background 0.22s, box-shadow 0.22s, flex-basis 0.18s;
}

.chat-item.etat-open .chat-item-barre { background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 0 12px -1px rgba(251, 191, 36, 0.65); }
.chat-item.etat-answered .chat-item-barre { background: linear-gradient(180deg, var(--v-200), var(--v-500)); box-shadow: 0 0 12px -1px rgba(124, 58, 237, 0.75); }
.chat-item:hover .chat-item-barre { flex-basis: 4px; }
.chat-item.active .chat-item-barre { flex-basis: 4px; box-shadow: 0 0 16px 0 rgba(124, 58, 237, 0.8); }

.chat-item-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-haut { display: flex; align-items: baseline; gap: 6px; min-width: 0; }

.chat-item-nom {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-date { margin-left: auto; flex-shrink: 0; font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.chat-item-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v-200);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.9);
  animation: supBattement 2.4s ease-in-out infinite;
}

@keyframes supBattement {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.5; }
}

.chat-item-sujet {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #ded8f5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.chat-item:hover .chat-item-sujet { color: #fff; }
.chat-item.active .chat-item-sujet { color: #fff; text-shadow: 0 0 20px rgba(192, 132, 252, 0.45); }

.chat-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
}

.chat-item-meta > span + span::before { content: "·"; margin-right: 6px; opacity: 0.5; }
.chat-item-etat { display: inline-flex; align-items: center; gap: 5px; }

.chat-item-etat::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.chat-item.etat-open .chat-item-etat { color: #fbbf24; }
.chat-item.etat-answered .chat-item-etat { color: var(--v-200); }
.chat-item.etat-closed .chat-item-etat { color: var(--muted); }
.chat-item-pris { color: var(--v-100); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cadre de fenetre maison (application de bureau) ----------
   Memes boutons que dans le panneau : la fenetre sans cadre peut afficher la
   page de connexion ou le site, qui doivent donc pouvoir etre deplaces et
   fermes eux aussi. La classe n'est posee que par cadre.js, dans
   l'application ; dans un navigateur ce bloc ne s'applique jamais. */
html.cadre-maison { --barre-h: 34px; }
.cadre-barre { display: none; }

html.cadre-maison .cadre-barre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--barre-h);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
  background: linear-gradient(180deg, rgba(37, 37, 37, 0.98), rgba(28, 28, 28, 0.95));
  border-bottom: 1px solid var(--border);
  user-select: none;
  -webkit-app-region: drag;
}

.cadre-version {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.75;
}

/* Les boutons sont exclus de la zone de deplacement, sinon un clic dessus
   deplacerait la fenetre au lieu de les activer. */
.cadre-boutons { display: flex; height: 100%; -webkit-app-region: no-drag; }

.cadre-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.cadre-btn svg { width: 12px; height: 12px; }
.cadre-btn:hover { background: rgba(139, 92, 255, 0.3); color: #fff; }
.cadre-btn:active { background: rgba(139, 92, 255, 0.46); }
.cadre-btn.fermer:hover { background: #e0484d; color: #fff; }
.cadre-btn.fermer:active { background: #c53a3f; }
.cadre-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--v-200); }

/* La barre se superpose au haut de la page : on decale le contenu et l'en-tete
   collante d'autant, sinon ils passeraient dessous. */
html.cadre-maison body { padding-top: var(--barre-h); }
html.cadre-maison .topbar { top: var(--barre-h); }

/* ======================================================================
   ACCUEIL — blocs de conversion
   ====================================================================== */

/* .btn est en nowrap + overflow hidden : dans une rangee flex, un bouton au
   libelle long se laisse comprimer et son texte est coupe net au lieu de
   passer a la ligne suivante. On lui interdit de retrecir. */
.hero-actions .btn,
.home-final-actions .btn { flex: 0 0 auto; }

/* Un cran au-dessus de .lg, reserve aux deux appels a l'action principaux. */
.btn.xl {
  padding: 18px 38px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px;
}

.home-promo { margin-bottom: 20px; }
.home-promo .btn { margin-left: auto; }

/* ---------- Accroche ---------- */

.hero { max-width: 820px; }

.hero-offer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 6px;
}

.hero-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 15px;
  color: var(--v-200);
}

.hero-price b {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

.hero-price s { font-size: 15px; color: rgba(167, 139, 250, 0.55); }

.hero-perday {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v-100);
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid var(--border);
}

.hero-price-note {
  margin-bottom: 30px;
  font-size: 12.5px;
  color: var(--v-400);
}

/* ---------- Demonstration : une campagne en cours ---------- */

.home-stage {
  margin-top: 56px;
  scroll-margin-top: 96px;
}

.stage-win {
  border-radius: var(--radius);
  border: 1px solid rgba(168, 85, 247, 0.34);
  background: linear-gradient(168deg, rgba(32, 12, 60, 0.9), rgba(28, 28, 28, 0.94));
  box-shadow: 0 30px 80px rgba(24, 24, 24, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  overflow: hidden;
}

.stage-bar {
  display: flex;
  align-items: center;
  /* Sur telephone, le titre prend deux lignes et l'etiquette d'etat se coupait
     en « ENVOI EN / COURS ». Elle passe sous le titre plutot que se briser. */
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.1);
}

.stage-dots { display: flex; gap: 6px; }

.stage-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.35);
}

.stage-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v-200);
}

/* Les chiffres de la fenetre sont une mise en situation, pas une campagne
   reelle : l'etiquette le dit dans la barre de titre, la ou on la lit sans
   avoir a descendre jusqu'a la note. */
.stage-demo {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--v-200);
  opacity: 0.75;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.28);
}

/* Cartouche fixe. Une pastille clignotante tenait cette place : elle attirait
   l'oeil en permanence sans rien apprendre. L'icone la remplace et dit la meme
   chose — un envoi part — sans bouger. */
/* Plus de cartouche colore : du texte nu, en capitales largement espacees, que
   son halo detache du fond a la place d'un cadre. Le mono rattache l'etiquette
   aux compteurs du panneau, qui sont deja dans cette fonte. */
.stage-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  /* L'interlettrage en capitales rapproche les mots au point de les coller :
     « ENVOI EN COURS » se lisait « ENVOIEN COURS ». */
  word-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6ee7a0;
  text-shadow: 0 0 18px rgba(74, 222, 128, 0.5);
}

/* L'icone n'herite pas de text-shadow : son halo se pose au filtre. */
.stage-live .stage-ico { filter: drop-shadow(0 0 7px rgba(74, 222, 128, 0.65)); }

.stage-live em { font-style: normal; }

.stage-body { padding: 24px 26px 26px; }

.stage-target {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 22px;
}

.stage-target b { font-size: 17px; font-weight: 800; color: var(--v-100); }
.stage-target span { font-size: 12.5px; color: var(--muted); }

.stage-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 12.5px;
  color: var(--muted);
}

.stage-progress-head b {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 13.5px;
  color: #fff;
}

.stage-progress-head i { font-style: normal; }

.stage-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* --p est pose par app.js au moment ou le bloc entre dans l'ecran, pour que
   la barre se remplisse sous les yeux du visiteur et pas avant. */
.stage-fill {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v-400), var(--accent));
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.5);
  transition: width 1.6s cubic-bezier(0.22, 0.75, 0.3, 1);
}

.stage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.stage-stat {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid var(--border);
}

.stage-stat b {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

.stage-stat span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stage-stat.ok b { color: var(--ok); }
.stage-stat.err b { color: var(--err); }

/* Sans cadre, c'est l'espace qui separe les trois etats : il faut donc en
   donner nettement plus qu'entre deux pilules collees. */
.stage-accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(168, 85, 247, 0.14);
}

.stage-acc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--v-200);
}

.stage-acc em { font-style: normal; }

/* Un point rond tenait cette place et n'apprenait rien de plus que le libelle.
   Une coche pour un compte qui tourne, deux barres pour un compte en pause :
   l'etat se lit sans avoir a lire. */
.stage-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.stage-live .stage-ico { width: 12px; height: 12px; }

.stage-acc.on {
  color: #6ee7a0;
  text-shadow: 0 0 14px rgba(74, 222, 128, 0.32);
}

.stage-acc.pause {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.32);
}

.stage-acc.on .stage-ico { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.5)); }
.stage-acc.pause .stage-ico { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)); }

.stage-note {
  max-width: 620px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

.home-trust { margin-top: 34px; }

/* ---------- Le calcul ---------- */

.home-roi {
  margin-top: 64px;
  padding: 46px 32px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(168, 85, 247, 0.3);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.2), transparent 64%),
    linear-gradient(170deg, rgba(30, 12, 58, 0.66), rgba(28, 28, 28, 0.78));
}

.home-roi h2 {
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 30px;
}

.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 740px;
  margin: 0 auto;
}

.roi-cell {
  padding: 22px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(23, 23, 23, 0.44);
}

.roi-cell b {
  display: block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--v-100);
  font-variant-numeric: tabular-nums;
}

.roi-cell span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Le premier chiffre est le cout actuel, le dernier le gain : la couleur fait
   lire les trois cases dans cet ordre sans avoir a les relier a la main. */
.roi-cell.bad b { color: var(--err); text-decoration: line-through; text-decoration-thickness: 2px; }
.roi-cell.good b { color: var(--ok); }
.roi-cell.win {
  border-color: rgba(217, 70, 239, 0.45);
  background: rgba(217, 70, 239, 0.1);
}
.roi-cell.win b { color: #fff; }

.roi-punch {
  max-width: 620px;
  margin: 28px auto 26px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--v-100);
}

.roi-punch b { color: #fff; font-weight: 900; }

/* ---------- Ce que le paiement debloque ---------- */

.home-livr-head { margin-top: 64px; }
.home-livr-head h2 { max-width: 780px; }

/* Les quatre etapes de la livraison : une rangee sur grand ecran, deux sur
   tablette, une colonne sur telephone. */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1040px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards-4 { grid-template-columns: 1fr; } }

/* La phrase qui corrige le malentendu du depart : ce qu'on vend est un outil,
   pas une prestation. Elle merite d'etre lue seule. */
.livr-punch {
  max-width: 680px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.livr-punch b {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.home-quotes { margin-top: 56px; margin-bottom: 0; }

/* ---------- Cartes de formule ---------- */

/* Prix barre : width 100% + order -1 lui donnent sa propre ligne au-dessus du
   montant, comme sur les cartes de la boutique. */
.home-plan-price { flex-wrap: wrap; }

.home-plan-price s {
  width: 100%;
  order: -1;
  font-size: 13px;
  color: rgba(167, 139, 250, 0.55);
}

.home-plan-perday {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.home-plan-perday b {
  font-weight: 800;
  color: var(--v-100);
}

.home-plan-perday span { margin-left: 4px; }

/* Pastille de remise, a droite comme « le plus choisi » l'est a gauche : sur
   la carte mise en avant, les deux cohabitent sans se chevaucher. */
.home-plan-save {
  position: absolute;
  top: -11px;
  right: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--v-400), var(--accent));
  box-shadow: 0 6px 18px rgba(217, 70, 239, 0.42);
}

/* Les libelles portent maintenant le prix : ils debordent de la largeur de la
   carte si on les garde sur une seule ligne. */
.home-plan .btn.block { white-space: normal; }

.home-faq { margin-top: 64px; margin-bottom: 0; }

.home-faq-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.home-final h2 { line-height: 1.12; }

.home-final-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.home-final-note { flex: 0 0 100%; text-align: center; }

/* ---------- Barre d'achat ---------- */

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--v-500);
  background: linear-gradient(100deg, rgba(43, 43, 43, 0.96), rgba(33, 33, 33, 0.96));
  backdrop-filter: blur(18px);
  box-shadow: 0 -16px 44px rgba(21, 21, 21, 0.6);

  /* Masquee tant qu'app.js n'a pas vu le visiteur depasser l'accroche. */
  transform: translateY(104%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buybar.on { transform: none; }

.buybar-in {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
}

.buybar-txt { font-size: 13px; color: var(--v-100); }

.buybar-txt b {
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size-adjust: none;
  color: #fff;
}

/* Pousse le prix et le bouton contre le bord droit. */
.buybar-price {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.buybar-price b {
  margin-left: 6px;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
}

.buybar-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}

.buybar-close svg { width: 13px; height: 13px; }
.buybar-close:hover { color: var(--v-100); border-color: var(--v-300); }

/* Le contenu de la page doit pouvoir defiler au-dela de la barre, sinon elle
   recouvre le pied de page et le dernier appel a l'action. */
body.buybar-on .footer { padding-bottom: 96px; }

/* ---------- Ecrans etroits ---------- */

@media (max-width: 860px) {
  .stage-stats { grid-template-columns: 1fr; }
  .roi-grid { grid-template-columns: 1fr; }
  .buybar-txt { display: none; }
}

@media (max-width: 560px) {
  .home-promo .btn { margin-left: 0; }
  .home-final-actions { flex-direction: column; }

  /* Sous cette largeur, « Choisir ma formule — des 4,99 € » depasse la colonne
     meme seul sur sa ligne : le texte doit pouvoir se replier. */
  .hero-actions .btn,
  .home-roi .btn,
  .home-final-actions .btn {
    max-width: 100%;
    white-space: normal;
  }

  .btn.xl { padding: 16px 26px; font-size: 16px; }

  .buybar-tag { display: none; }
  .buybar-price { font-size: 0; }
  .buybar-price b { margin-left: 0; font-size: 18px; }
  .buybar-cta { flex: 1 1 auto; }
}