/* ============================================================
   BotDev — Thème sombre
   ============================================================ */
:root {
  --bg: #0d0d14;
  --bg2: #131320;
  --panel: #181826;
  --panel2: #1e1e30;
  --border: #2a2a40;
  --text: #e8e8f0;
  --text-dim: #9a9ab0;
  --accent: #e07a5f;
  --accent2: #c95b49;
  --green: #3ba55d;
  --red: #ed4245;
  --yellow: #fee75c;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

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

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(224,122,95, .14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,91,73, .10), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c2c44; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------- Éléments de base ---------------------- */
/* v367 — le jeu d'icônes dessiné (App.glyphe) : il remplace les émojis
   d'interface. Le centrage est là, pas dans chaque gabarit : une icône et son
   libellé doivent partager la même ligne de base. */
.ico-svg { display: inline-block; vertical-align: -3px; flex: 0 0 auto; }
/* Le trait est defini ici, une seule fois. Les glyphes passes par App.glyphe
   portent deja leur groupe <g fill=none stroke=currentColor>, mais les SVG ecrits
   a la main dans les gabarits n'avaient rien : un <path> sans remplissage se
   rend en noir plein, d'ou les silhouettes noires sur les cartes. */
.ico-svg :is(path, rect, circle, line, polyline, polygon):not([fill]) {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ico-svg circle[fill], .ico-svg path[fill] { stroke: none; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 16px; cursor: pointer; font-size: 14px; font-weight: 700;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap; letter-spacing: .1px;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
  background: #b4452c;
  border: none; color: #fff;
  box-shadow: 0 4px 16px rgba(180,69,44, .3);
}
.btn-primary:hover { background: #9d3a23; border: none; box-shadow: 0 7px 22px rgba(180,122,95, .34); }
.btn-danger { box-shadow: 0 2px 10px rgba(237, 66, 69, .12); }
.btn-discord { box-shadow: 0 4px 16px rgba(224,122,95, .35); }
.btn-danger { background: rgba(237, 66, 69, .12); color: #ff7b7e; border-color: rgba(237, 66, 69, .35); }
.btn-danger:hover { border-color: var(--red); }
.btn-ghost { background: transparent; }
.btn-discord {
  background: #4752c4; color: #fff; border: none; width: 100%;
  justify-content: center; padding: 11px; font-weight: 700; font-size: 14px;
}
.btn-discord:hover { background: #3c46a8; border: none; }
/* Le bouton du bandeau heritait du fond translucide de la barre : texte blanc
   sur blanc en theme clair. Meme fond plat que les autres boutons Discord. */
/* (deplace plus bas : la barre du haut n'est pas dans #public-landing) */
.auth-divider {
  display: flex; align-items: center; gap: 12px; color: var(--text-dim);
  font-size: 12px; margin: 18px 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-icon { padding: 6px 8px; }

.input, .select, textarea.input {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; width: 100%; font-family: inherit;
  outline: none; transition: .15s;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--accent); }
.input::placeholder { color: #55556e; }
textarea.input { resize: vertical; min-height: 70px; }

label.field-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px;
  margin: 14px 0 6px;
}

/* ---------------------- Interrupteur ---------------------- */
.switch {
  position: relative; display: inline-block; width: 44px; height: 24px;
  flex-shrink: 0; cursor: pointer;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; background: #33334c; border-radius: 12px; transition: .2s;
}
.slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------------------- Badges / puces ---------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 12px; font-size: 12px;
  font-family: ui-monospace, Consolas, monospace; color: var(--text-dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }



/* ---------------------- Toasts ---------------------- */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--panel2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 12px 16px; font-size: 14px; box-shadow: var(--shadow);
  animation: toastIn .25s ease; max-width: 340px;
}
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------- Modales ---------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(5, 5, 12, .75); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 900;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow);
  animation: modalIn .2s ease;
}
.modal.large { width: min(1060px, 97vw); }
@keyframes modalIn { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.modal-header h3 { font-size: 16px; }
.modal-body { padding: 20px 22px; }
.modal-footer {
  padding: 16px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  position: sticky; bottom: 0; background: var(--panel);
}
.x-btn { background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; }
.x-btn:hover { color: #fff; }

/* ---------------------- Authentification ---------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: stretch; }
.auth-left {
  flex: 1.15; padding: 60px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(160deg, rgba(224,122,95,.16), rgba(201,91,73,.10) 60%, transparent);
  border-right: 1px solid var(--border);
}
.auth-left h1 { font-size: 28px; font-weight: 800; }
.auth-left h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-left .tagline { color: var(--text-dim); font-size: 16px; margin-top: 12px; max-width: 440px; line-height: 1.55; }
.auth-features { margin-top: 38px; display: flex; flex-direction: column; gap: 15px; }
.auth-features li { list-style: none; display: flex; gap: 11px; align-items: center; color: var(--text-dim); font-size: 14px; }
.auth-features .f-ico { font-size: 18px; }
.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; }
.auth-card { width: min(400px, 94vw); }
.auth-card h2 { font-size: 22px; margin-bottom: 4px; }
.auth-card .sub { color: var(--text-dim); margin-bottom: 22px; font-size: 14px; }
.auth-tabs { display: flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin-bottom: 24px; }
.auth-tabs button {
  flex: 1; background: none; border: none; color: var(--text-dim);
  padding: 9px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
}
.auth-tabs button.active { background: var(--panel2); color: var(--text); }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 18px; padding: 11px; }
.form-error { background: rgba(237,66,69,.12); border: 1px solid rgba(237,66,69,.35); color: #ff9a9c; padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; display: none; }
.form-error.show { display: block; }

.logo-row { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }

/* ---------------------- Navigation ---------------------- */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px; border-bottom: 1px solid var(--border);
  background: rgba(13, 13, 20, .82); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 100;
}
.navbar-right { display: flex; align-items: center; gap: 14px; }
.user-pill { display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 13px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff;
}

/* ---------------------- Dashboard ---------------------- */
.page { max-width: 1180px; margin: 0 auto; padding: 34px 26px 60px; }
.page h1 { font-size: 28px; margin-bottom: 6px; }
.page .sub { color: var(--text-dim); margin-bottom: 28px; }
.bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.bot-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; transition: .18s; display: flex; flex-direction: column; gap: 14px;
}
.bot-card:hover { border-color: #3a3a58; transform: translateY(-2px); }
.bot-card-top { display: flex; align-items: center; gap: 13px; }
.bot-avatar {
  width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
  background: var(--panel2); flex-shrink: 0;
}
.bot-avatar.fallback { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, rgba(224,122,95,.35), rgba(201,91,73,.35)); }
.bot-card h3 { font-size: 16px; }
.bot-card .uname { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.bot-card-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.bot-card-actions { display: flex; gap: 8px; margin-top: auto; }
.bot-card-actions .btn { flex: 1; justify-content: center; }

.new-bot-card {
  border: 2px dashed #33334c; border-radius: var(--radius); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 210px; cursor: pointer; color: var(--text-dim);
  font-weight: 600; transition: .18s; font-size: 14px;
}
.new-bot-card:hover { border-color: var(--accent); color: var(--text); }
.new-bot-card .plus { font-size: 28px; line-height: 1; }

/* ---------------------- Shell bot ---------------------- */
.bot-shell { max-width: 1180px; margin: 0 auto; padding: 26px; }
.bot-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 20px;
}
.bot-header .avatar { width: 56px; height: 56px; border-radius: 12px; }
.bot-header .avatar.fallback { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, rgba(224,122,95,.35), rgba(201,91,73,.35)); }
.bot-header h2 { font-size: 18px; }
.bot-header .sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.bot-header-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  background: var(--bg2); border: 1px solid var(--border); padding: 6px 13px; border-radius: 12px;
}





.side-link.active { background: linear-gradient(135deg, rgba(224,122,95,.22), rgba(201,91,73,.18)); color: var(--text); }
.side-link .ico { font-size: 16px; }



/* ---------------------- Cartes de contenu ---------------------- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: #33334f; box-shadow: 0 4px 16px rgba(0, 0, 0, .16); }
.card h3 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.card .card-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }


.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 15px; margin-bottom: 20px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 19px 21px; }
.stat-card .val { font-size: 28px; font-weight: 800; }
.stat-card .lbl { color: var(--text-dim); font-size: 13px; margin-top: 3px; }







.empty-state { text-align: center; padding: 46px 20px; color: var(--text-dim); }
.empty-state .big { font-size: 28px; margin-bottom: 10px; }

/* ---------------------- Liste de commandes ---------------------- */






.icon-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: var(--bg2); color: var(--text); }

/* ---------------------- Modules ---------------------- */







.module-card .m-head .switch { margin-left: auto; }

/* ---------------------- Éditeur de commandes ---------------------- */
.editor-layout { display: flex; gap: 0; min-height: 62vh; }
.editor-palette {
  width: 205px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border);
  padding: 16px 12px; overflow-y: auto; border-radius: 0 0 0 12px;
}
.editor-palette h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); margin: 14px 4px 8px; }
.editor-palette h4:first-child { margin-top: 0; }
.palette-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 13px;
  transition: .13s; text-align: left;
}
.palette-item:hover { border-color: var(--accent); transform: translateX(2px); }

.editor-canvas { flex: 1; padding: 18px; overflow-y: auto; min-width: 0; }
.editor-zone { border: 2px dashed transparent; border-radius: 8px; padding: 4px; min-height: 44px; transition: .12s; }
.editor-zone.dragover { border-color: var(--accent); background: rgba(224,122,95, .06); }
.zone-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  color: #6f6f8f; margin: 6px 4px; display: flex; gap: 6px; align-items: center;
}
.zone-empty { color: #55556e; font-size: 13px; font-style: italic; padding: 10px 6px; }

.block-card {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 10px; overflow: hidden;
}
.block-card.dragging { opacity: .45; }
.block-head {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: var(--bg2); border-bottom: 1px solid var(--border); cursor: grab;
}
.block-head .b-ico { font-size: 16px; }
.block-head .b-title { font-weight: 700; font-size: 13px; }
.block-head .b-actions { margin-left: auto; display: flex; gap: 2px; }
.block-head .icon-btn { font-size: 13px; }
.block-body { padding: 12px 13px; }
.block-body .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.block-body .input, .block-body .select { padding: 7px 10px; font-size: 13px; }
.block-body .field-label { margin: 9px 0 5px; font-size: 11px; }
.block-body .field-label:first-child { margin-top: 0; }

.if-wrap { border-left: 3px solid var(--yellow); margin-left: 6px; padding-left: 10px; }
.if-cond { display: grid; grid-template-columns: 1fr 130px 1fr; gap: 8px; align-items: center; padding: 10px 12px; background: rgba(254, 231, 92, .05); }

.row-item { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.row-item .input, .row-item .select, .row-item .dd-host { flex: 1; min-width: 0; }
.row-item .btn { flex-shrink: 0; }

.var-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.var-chip {
  font-family: ui-monospace, monospace; font-size: 11px; background: var(--bg2);
  border: 1px solid var(--border); color: #b9b9ff; padding: 2.5px 7px; border-radius: 4px; cursor: pointer;
}
.var-chip:hover { border-color: var(--accent); }

/* ---------------------- Réglages / divers ---------------------- */


.help-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 13px 15px; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.help-box ol { margin-left: 18px; }
.help-box b { color: var(--text); }






.spinner {
  width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center-loading { display: flex; justify-content: center; padding: 50px; }

/* ---------------------- Pages publiques (dashboard Optimus Prime) ---------------------- */
.pub-hero {
  text-align: center; padding: 64px 24px 48px; max-width: 860px; margin: 0 auto;
}
.pub-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(224,122,95, .12); border: 1px solid rgba(224,122,95, .35);
  color: #f2b3a3; padding: 7px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  margin-bottom: 22px;
}
.pub-hero h1 { font-size: 28px; font-weight: 800; line-height: 1.2; }
.pub-hero h1 .grad {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pub-tagline { color: var(--text-dim); font-size: 16px; max-width: 620px; margin: 18px auto 26px; line-height: 1.6; }
.pub-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pub-stats {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px;
}
.pub-stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 30px; min-width: 150px;
}
.pub-stat .val { font-size: 28px; font-weight: 800; }
.pub-stat .lbl { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.pub-section { max-width: 1180px; margin: 0 auto; padding: 30px 26px; }
.pub-section h2 { font-size: 22px; margin-bottom: 12px; }
.pub-sub { color: var(--text-dim); margin-bottom: 22px; }
.pub-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; }
.pub-feature {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 21px; transition: .15s;
}
.pub-feature:hover { border-color: #3a3a58; transform: translateY(-2px); }
.pub-feature .f-ico { font-size: 28px; }
.pub-feature b { display: block; margin: 9px 0 5px; font-size: 16px; }
.pub-feature p { color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.pub-footer {
  border-top: 1px solid var(--border); margin-top: 30px;
  padding: 24px 26px; text-align: center; color: var(--text-dim); font-size: 13px;
}
.pub-bot-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
}
.pub-avatar { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.pub-avatar.fallback {
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, rgba(224,122,95,.35), rgba(201,91,73,.35));
}
.pub-bot-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-left: auto; }
.pub-bot-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------- Barre de navigation mobile (façon app) ---------------------- */


@media (max-width: 900px) {
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }
  .auth-left { display: none; }
  .auth-right { padding: 20px; align-items: flex-start; }
  .auth-card { width: 100%; }
  .auth-card h2 { font-size: 22px; }

  /* Modales : feuille glissante depuis le bas (façon Android) */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    width: 100vw; max-width: 100vw; max-height: 92dvh;
    border-radius: 12px 12px 0 0; border-bottom: none;
    animation: sheetUp .25s cubic-bezier(.2, .9, .3, 1);
    overscroll-behavior: contain;
  }
  .modal.large { width: 100vw; }
  @keyframes sheetUp { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }

  /* Boutons et champs tactiles */
  .btn { min-height: 42px; }
  .btn-sm, .btn-icon { min-height: 36px; }
  .input, .select, textarea.input { font-size: 16px; }
  .field-label { font-size: 12px; }

  /* Retour tactile : les boutons réagissent au toucher */
  .btn:active, .btn-sm:active, .btn-icon:active, .palette-item:active, .x-btn:active {
    transform: scale(.95);
  }
  .btn, .btn-sm, .btn-icon, .x-btn, .palette-item { transition: transform .1s, filter .12s; }

  /* Navbar compacte façon app bar (elle défile ; l'app bar du dashboard reste collée) */
  .navbar {
    position: static;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    min-height: 52px;
  }
  .navbar-right { gap: 8px; }
  .navbar .user-pill { gap: 0; }
  .navbar .user-pill span, .navbar .user-pill .chip { display: none; }
  .navbar .user-pill .user-avatar { width: 32px; height: 32px; }
  .navbar #nav-admin { display: none; } /* le bouton Admin reste sur ordinateur */
  .navbar .nl-lbl { display: none; }     /* Déconnexion = icône seule */
  .navbar .nl-ico { font-size: 16px; line-height: 1; }
  .navbar .btn-sm { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; }

  /* Éditeur de blocs : colonnes empilées */
  .editor-layout { flex-direction: column; }
  .editor-palette { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .editor-palette h4 { width: 100%; margin: 4px 2px 2px; }
  .palette-item { width: auto; min-height: 38px; }
  .editor-canvas { padding: 12px; }
  .if-cond { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr !important; }
  .block-body .grid2 { grid-template-columns: 1fr !important; }

  /* Héros public compact */
  .pub-hero { padding: 40px 16px 30px; }
  .pub-hero h1 { font-size: 28px; }
  .pub-section { padding: 22px 14px; }
  .pub-stat { min-width: 100px; padding: 14px 18px; }

  .bot-shell { padding: 0 0 20px; }
  .bot-header { flex-wrap: wrap; padding: 14px; }
  .bot-header-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  
  
  
  .editor-layout { flex-direction: column; }
  .editor-palette { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
  .editor-palette h4 { width: 100%; margin: 8px 4px 2px; }
  .palette-item { width: auto; }
  .bot-shell { padding-bottom: 96px; }

  
  
  .mobile-nav button .ico { font-size: 18px; }
  .mobile-nav button.active { color: #8b93ff; }
}

/* v2.0 : typographie professionnelle (Inter) + navbar en verre */
body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.navbar {
  background: rgba(13, 13, 20, .72) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42, 42, 64, .8);
}

/* ============================================================
   🌟 HOXERA v2.8 — page d'accueil vivante (animations + pro)
   ============================================================ */

/* Halos flottants derrière le héros */
.pub-hero { position: relative; overflow: visible; }
.pub-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  pointer-events: none; z-index: -1; animation: blobFloat 11s ease-in-out infinite;
}
.pub-blob.b1 { width: 340px; height: 340px; background: rgba(224,122,95,.4); top: -80px; left: 4%; }
.pub-blob.b2 { width: 280px; height: 280px; background: rgba(201,91,73,.34); top: 30px; right: 6%; animation-delay: -4s; }
.pub-blob.b3 { width: 220px; height: 220px; background: rgba(242,166,94,.22); bottom: -60px; left: 42%; animation-delay: -8s; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(26px, -18px) scale(1.08); }
  66% { transform: translate(-20px, 14px) scale(.95); }
}

/* Titre : dégradé animé qui ondule */
.grad-anim {
  background: linear-gradient(90deg, #e07a5f, #f2a65e, #c95b49, #f2a65e, #e07a5f);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradSlide 7s linear infinite;
}
@keyframes gradSlide { from { background-position: 0% 0; } to { background-position: 300% 0; } }
.hero-title { animation: heroIn .7s cubic-bezier(.2,.8,.25,1) both; }
.pub-tagline { animation: heroIn .7s .12s cubic-bezier(.2,.8,.25,1) both; }
.pub-hero-actions { animation: heroIn .7s .22s cubic-bezier(.2,.8,.25,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Badge scintillant */
.pub-hero-badge.shimmer { position: relative; overflow: hidden; }
.pub-hero-badge.shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-120%); animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Lien serveur support sous les boutons */
.pub-support-link { margin-top: 14px; }
.pub-support-link a { color: var(--text-dim); font-size: 13px; transition: color .15s; }
.pub-support-link a:hover { color: #f2a65e; }

/* Révélation au défilement */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.25,1); }
.reveal.in { opacity: 1; transform: none; }

/* Cartes fonctionnalités : bordure dégradée au survol */
.pub-feature { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.pub-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(224,122,95,.55) !important;
  box-shadow: 0 16px 34px -18px rgba(224,122,95,.5);
}
.pub-feature .f-ico { transition: transform .2s ease; }
.pub-feature:hover .f-ico { transform: scale(1.18) rotate(-6deg); }

/* Maquette du dashboard (dessinée en CSS pur) */
.pub-mock {
  max-width: 760px; margin: 26px auto 0;
  background: #14151f; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(224,122,95,.12);
  animation: mockFloat 7s ease-in-out infinite;
}
@keyframes mockFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #191b28; border-bottom: 1px solid var(--border); }
.mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-bar .dot.r { background: #ed4245; } .mock-bar .dot.y { background: #fee75c; } .mock-bar .dot.g { background: #3ba55d; }
.mock-url { margin-left: 10px; font-size: 11px; color: var(--text-dim); background: #10111a; border-radius: 4px; padding: 3px 12px; }
.mock-body { display: flex; min-height: 250px; }
.mock-side { width: 160px; border-right: 1px solid var(--border); padding: 12px 10px; background: #10121d; }
.mock-srv { display: flex; align-items: center; gap: 8px; background: #1a1c2c; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 12px; }
.mock-srv .ms-ico { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #e07a5f, #c95b49); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mock-srv .ms-lines { flex: 1; } .mock-srv .ms-lines i { display: block; height: 5px; border-radius: 4px; background: #2c2f45; margin: 3px 0; }
.mock-srv .ms-lines i:first-child { width: 80%; }
.mock-item { height: 26px; border-radius: 8px; margin: 6px 0; background: #181a29; }
.mock-item.active { background: linear-gradient(90deg, rgba(224,122,95,.35), rgba(201,91,73,.15)); box-shadow: inset 0 0 0 1px rgba(224,122,95,.4); }
.mock-main { flex: 1; padding: 14px; }
.mock-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.mock-stat { flex: 1; height: 52px; border-radius: 8px; background: #181a29; border-top: 2px solid rgba(224,122,95,.5); }
.mock-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #161826; }
.mc-line { height: 8px; border-radius: 4px; background: #262940; margin: 8px 0; }
.mc-line.w40 { width: 40%; } .mc-line.w60 { width: 60%; } .mc-line.w75 { width: 75%; } .mc-line.w90 { width: 90%; }
.mc-bar { height: 12px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, #e07a5f, #c95b49 60%, #262940 60%); }

/* Pied de page */
.pub-footer-links { margin-top: 8px; display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 13px; }

/* Respect des préférences réduites */
@media (prefers-reduced-motion: reduce) {
  .pub-blob, .grad-anim, .pub-mock, .pub-hero-badge.shimmer::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Toasts v3.2 : icône, barre de vie, entrée élastique */
.toast {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px !important; font-weight: 600;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.75) !important;
  animation: toastIn .3s cubic-bezier(.2,.9,.3,1.25) both !important;
  position: relative; overflow: hidden;
}
.toast::before { content: '\2713'; font-size: 16px; }
.toast.error::before { content: '!'; }
.toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  animation: toastLife 4.2s linear both;
}
.toast.error::after { background: linear-gradient(90deg, #ed4245, #f97316); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastLife { from { width: 100%; } to { width: 0; } }

/* v3.3 : page de connexion théâtralisée + spinner de bouton */
.auth-glass {
  background: rgba(24, 24, 38, .66) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(224,122,95,.35) !important;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.8), 0 0 60px -30px rgba(224,122,95,.5) !important;
}
.auth-bot-ava {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0;
  overflow: hidden;
  background: #0b0d12;
  box-shadow: 0 0 0 4px rgba(224,122,95,.25), 0 14px 30px -10px rgba(224,122,95,.6);
  animation: avaFloat 3.4s ease-in-out infinite;
}
.auth-bot-ava img {
  /* v319 : photo de PROFIL Optimus (pas la bannière, pas l’emoji 🤖 orange) */
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; border-radius: 50%;
}
@keyframes avaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.auth-trust { display: flex; flex-direction: column; gap: 7px; margin: 18px 0 14px; text-align: left; }
.auth-trust span { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.btn-spin {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: btnSpin .7s linear infinite; vertical-align: -3px; margin-right: 6px;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
html.hx-light body { background: #f2f3f8; color: #1c1e26; }

/* ============================================================
   NEXORA v4.0 — Direction visuelle « produit humain »
   Couche finale : surfaces calmes, hiérarchie nette et animations
   discrètes. Elle conserve les classes historiques pour éviter toute
   régression fonctionnelle pendant la refonte.
   ============================================================ */
:root {
  --bg: #080b12;
  --bg2: #0f141e;
  --panel: #121923;
  --panel2: #182231;
  --border: #263246;
  --text: #f4f7fb;
  --text-dim: #91a0b7;
  --accent: #e88a70;
  --accent2: #d06a55;
  --green: #49d17d;
  --red: #f06c75;
  --yellow: #f4c96b;
  --radius: 14px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

html { background: #080b12; }
body {
  background:
    radial-gradient(900px 520px at 100% -12%, rgba(224,122,95,.13), transparent 66%),
    radial-gradient(760px 460px at -12% 100%, rgba(154,123,255,.09), transparent 68%),
    linear-gradient(180deg, #080b12 0%, #0a0e16 100%);
  color: var(--text);
  letter-spacing: .01px;
}
body::selection { background: rgba(224,122,95,.35); color: #fff; }

a { color: #9caaff; }
a:hover { color: #c3caff; }

.logo-row { gap: 11px; letter-spacing: -.2px; }
.logo {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(145deg, #7182ff 0%, #876eff 52%, #b074ff 100%);
  box-shadow: 0 8px 24px -10px rgba(224,122,95,.9), inset 0 1px 0 rgba(255,255,255,.28);
  font-size: 18px;
}
.logo-row img.logo { display: inline-flex; background: #151d2b; }

.navbar {
  min-height: 66px; padding: 13px clamp(16px, 4vw, 44px);
  background: rgba(8,11,18,.82) !important;
  border-bottom: 1px solid rgba(54,68,92,.62);
  box-shadow: 0 12px 35px -28px rgba(0,0,0,.9);
}
.navbar .logo-row { font-size: 18px; }
.navbar .btn { border-color: rgba(54,68,92,.85); background: rgba(18,25,35,.8); }
.navbar .btn:hover { border-color: rgba(224,122,95,.7); background: rgba(30,39,58,.86); }
/* Le bouton Discord garde le meme fond plat que partout ailleurs. */
.navbar .btn-primary { background: linear-gradient(135deg,#6477ff,#906fff); border: 0; }
/* Le bouton « Se connecter avec Discord » du bandeau doit etre identique a ceux
   du heros et du pied : meme fond plat, meme texte. La regle .navbar .btn qui le
   precedait le peignait en anthracite translucide. */
.navbar .btn-discord, .navbar .btn-discord:hover { background-color: #4752c4; color: #fff; }
.user-pill { color: #a9b5c9; }
.user-pill > span:first-of-type { color: #e9edf6; font-weight: 650; }

.btn {
  min-height: 40px; border-radius: 8px; padding: 9px 15px;
  border-color: #2b394f; background: #151e2b; color: #edf1f8;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); background: #1a2637; box-shadow: 0 10px 24px -16px rgba(224,122,95,.9); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary, .btn-discord {
  background-image: none;
  /* Le fond plat est redit ici : cette regle suit celles des deux classes. */
  background-color: #b4452c;
  color: #fff;
}
.btn-discord, .navbar #public-landing .btn-discord { background-color: #4752c4; color: #fff; }
#public-landing .btn-discord:hover { background-color: #3c46a8; }
.btn-primary:hover, .btn-discord:hover { background: linear-gradient(135deg, #e88a70, #d0765f); box-shadow: 0 16px 34px -16px rgba(224,122,95,1), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-danger { color: #ff9da3; background: rgba(240,108,117,.1); border-color: rgba(240,108,117,.3); }
.btn-danger:hover { border-color: #f06c75; background: rgba(240,108,117,.16); }
.btn-ghost { background: transparent !important; }

.input, .select, textarea.input {
  background: #101722; border-color: #29364b; color: #edf1f8; border-radius: 8px;
  min-height: 42px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input:hover, .select:hover, textarea.input:hover { border-color: #3c4d69; background: #121b28; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent); background: #111a28;
  box-shadow: 0 0 0 3px rgba(224,122,95,.12);
}
.input::placeholder { color: #62718a; }

.auth-wrap {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(224,122,95,.035) 1px, transparent 1px),
    linear-gradient(rgba(224,122,95,.035) 1px, transparent 1px),
    radial-gradient(720px 560px at 12% 18%, rgba(224,122,95,.12), transparent 66%),
    #080b12;
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.auth-left {
  position: relative; padding: clamp(34px, 7vw, 92px);
  background: linear-gradient(140deg, rgba(18,28,45,.82), rgba(8,11,18,.22) 72%);
  border-right: 1px solid rgba(54,68,92,.58);
}
.auth-left::after {
  content: ''; position: absolute; width: 260px; height: 260px; right: -130px; top: 18%;
  border-radius: 50%; background: rgba(224,122,95,.1); filter: blur(70px); pointer-events: none;
}
.auth-left h1 { max-width: 560px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -1.6px; }
.auth-left .tagline { max-width: 500px; color: #9aa8bd; font-size: 16px; }
.auth-features { gap: 13px; }
.auth-features li { color: #a7b2c5; }
.auth-features .f-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(224,122,95,.1); }
.auth-right { padding: clamp(20px, 5vw, 60px); }
.auth-card.auth-glass {
  padding: 32px 30px 28px; border-radius: 12px !important;
  background: rgba(17,24,35,.76) !important;
  border: 1px solid rgba(70,88,119,.62) !important;
  box-shadow: 0 30px 80px -32px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.auth-bot-ava { width: 82px; height: 82px; border: 3px solid rgba(255,255,255,.08); box-shadow: 0 18px 38px -18px rgba(224,122,95,.85); }
.auth-card h2 { letter-spacing: -.4px; }
.auth-trust { padding: 12px 13px; background: rgba(8,11,18,.34); border: 1px solid rgba(54,68,92,.46); border-radius: 12px; }

.pub-hero { max-width: 980px; padding: clamp(60px, 9vw, 120px) 24px 68px; }
.pub-hero-badge { background: rgba(224,122,95,.1); border-color: rgba(224,122,95,.32); color: #f2b3a3; }
.pub-hero h1 { font-size: clamp(36px, 6vw, 68px); letter-spacing: -2.4px; line-height: 1.02; }
.pub-tagline { max-width: 680px; color: #9ba8bc; font-size: 16px; }
.pub-stat { background: rgba(18,25,35,.8); border-color: #29364b; box-shadow: 0 16px 40px -28px rgba(0,0,0,.9); }
.pub-feature, .bot-card, .pub-bot-hero {
  background: linear-gradient(145deg, rgba(20,29,42,.94), rgba(14,20,30,.94));
  border-color: #29364b; border-radius: 12px;
  box-shadow: 0 18px 46px -34px rgba(0,0,0,.95);
}
.pub-feature:hover, .bot-card:hover { border-color: rgba(224,122,95,.62); box-shadow: 0 22px 48px -28px rgba(160,90,70,.55); }
.bot-card { padding: 22px; }

.modal-overlay { background: rgba(4,7,12,.78); backdrop-filter: blur(9px); }
.modal { background: #111923; border-color: #2b394f; border-radius: 12px; box-shadow: 0 32px 100px -30px #000, inset 0 1px 0 rgba(255,255,255,.04); }
.modal-header, .modal-footer { background: #111923; border-color: #29364b; }
.toast { background: #151f2d; border-color: #32435d; }

@media (max-width: 900px) {
  .auth-right { padding: 18px 14px; }
  .auth-card.auth-glass { padding: 25px 18px 22px; border-radius: 12px !important; }
  .pub-hero { padding-top: 48px; }
  .pub-hero h1 { letter-spacing: -1.2px; }
}

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

/* ============================================================
   🏠 HOXERA ULTRA PRO v195 — Home (Phase 3)
   Nouveau design spectaculaire de la page d'accueil, construit
   PAR-DESSUS la landing v167 (classes/id verrouillées conservées).
   ============================================================ */

/* ---------- Navbar : liens d'ancrage ---------- */
.navbar { position: sticky; top: 0; z-index: 60; }
.navbar-links { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.navbar-links a {
  color: var(--text-dim); font-size: 14px; font-weight: 650;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.navbar-links a:hover { color: var(--text); background: rgba(255,255,255,.06); }
html.hx-light .navbar-links a:hover { background: rgba(20,22,40,.07); color: #1c1e26; }

/* ---------- Kicker de section ---------- */
.hp-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.hp-kicker::before {
  content: ''; width: 22px; height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
/* Le decalage est porte par html { scroll-padding-top } : une seule source. */
/* Le bandeau est collant : sans reserve, un lien d'ancre ouvre la section a
   moitie cachee dessous. */
html { scroll-padding-top: 84px; }

/* ---------- Présentation Hoxera ---------- */
.hp-about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; margin-top: 26px; }
.hp-about-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb,224,122,95), .09), rgba(139,92,246,.05)), var(--panel2);
  border: 1px solid var(--border); border-radius: 12px; padding: 24px;
}
.hp-about-card h3 { font-size: 18px; margin-bottom: 6px; }
.hp-about-card p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0; }
.hp-robot {
  width: 76px; height: 76px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px -12px rgba(224,122,95,.55);
}
.hp-robot img {
  /* v316 : photo de PROFIL Discord (pas la bannière) */
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; border-radius: 12px;
}
.hp-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-pillar {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.hp-pillar:hover { transform: translateY(-3px); border-color: rgba(224,122,95,.5); box-shadow: 0 14px 28px -18px rgba(224,122,95,.45); }
.hp-pillar-ico {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(224,122,95,.14); border: 1px solid rgba(224,122,95,.3);
}
.hp-pillar b { font-size: 14px; display: block; }
.hp-pillar p { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }

.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.hp-step {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; position: relative;
}
.hp-step-n {
  position: absolute; top: -11px; left: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(224,122,95,.6);
}
.hp-step b { display: block; margin: 6px 0 4px; font-size: 14px; }
.hp-step p { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0; }

/* ---------- FAQ (accordéon) ---------- */
.hp-faq { max-width: 780px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 10px; }
.hp-faq-item {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .2s ease;
}
.hp-faq-item:hover { border-color: rgba(224,122,95,.45); }
.hp-faq-item[open] { border-color: rgba(224,122,95,.55); box-shadow: 0 14px 30px -20px rgba(224,122,95,.5); }
.hp-faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; font-weight: 700; font-size: 14px;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
/* v378 — le « + » tourné à 45° passait pour une croix de fermeture. On pose
   un vrai chevron du jeu d'icônes (masque SVG, donc il suit --accent) qui
   pivote vers le haut quand la question est ouverte.
   L'ancien caractère exigeait des fontes de secours différentes sur Android. */
.hp-faq-item summary::after {
  content: ''; margin-left: auto; width: 18px; height: 18px; flex: 0 0 18px;
  background-color: var(--accent); transition: transform .2s ease;
  -webkit-mask: var(--faq-chevron) center / contain no-repeat;
  mask: var(--faq-chevron) center / contain no-repeat;
}
.hp-faq-item[open] summary::after { transform: rotate(180deg); }
.hp-faq-item p {
  color: var(--text-dim); font-size: 14px; line-height: 1.65;
  padding: 14px 18px 16px; margin: 0;
}
.hp-faq-item[open] summary { padding-bottom: 12px; border-bottom: 1px solid var(--border); }

/* ---------- CTA final ---------- */
.hp-cta { padding: 10px 26px 50px; }
.hp-cta-inner {
  max-width: 900px; margin: 0 auto; text-align: center;
  background:
    radial-gradient(600px 240px at 50% -40%, rgba(224,122,95,.28), transparent 70%),
    linear-gradient(145deg, rgba(224,122,95,.08), rgba(139,92,246,.05)), var(--panel2);
  border: 1px solid rgba(224,122,95,.35);
  border-radius: 12px; padding: 44px 30px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.hp-cta-inner h2 { font-size: 28px; letter-spacing: -.4px; margin-bottom: 10px; }
.hp-cta-inner p { color: var(--text-dim); max-width: 540px; margin: 0 auto 22px; line-height: 1.6; }
.hp-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer enrichi ---------- */
.hp-footer { padding: 34px 26px 22px; border-top: 1px solid var(--border); }
.hp-footer-cols {
  max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; text-align: left;
}
.hp-footer-col { display: flex; flex-direction: column; gap: 8px; }
.hp-footer-col > b { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); margin-bottom: 4px; }
.hp-footer-col a { color: var(--text-dim); font-size: 14px; text-decoration: none; transition: color .15s ease; }
.hp-footer-col a:hover { color: var(--accent); }
.pub-footer-links a { color: var(--text-dim); text-decoration: none; transition: color .15s ease; }
.pub-footer-links a:hover { color: var(--accent); }
.hp-footer-brand b { font-size: 18px; }
.hp-footer-brand p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.hp-footer-bottom {
  max-width: 1080px; margin: 24px auto 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--text-dim); font-size: 13px;
}

/* ---------- Responsive Home Ultra Pro ---------- */
@media (max-width: 900px) {
  .navbar-links { display: none; }
  .hp-about-grid { grid-template-columns: 1fr; }
  .hp-pillars { grid-template-columns: 1fr 1fr; }
  .hp-steps { grid-template-columns: 1fr; gap: 18px; }
  .hp-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hp-about-card { flex-direction: column; text-align: center; }
  .hp-pillars { grid-template-columns: 1fr; }
  .hp-footer-cols { grid-template-columns: 1fr; }
  .hp-cta-inner { padding: 34px 20px; }
  .hp-footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Mode clair ---------- */
html.hx-light .hp-about-card { background: linear-gradient(145deg, rgba(224,122,95,.08), rgba(139,92,246,.03)), #fff; box-shadow: 0 8px 24px -16px rgba(30,34,60,.28); }
html.hx-light .hp-pillar { background: #fff; }
html.hx-light .hp-step { background: #fff; }
html.hx-light .hp-faq-item { background: #fff; }
html.hx-light .hp-cta-inner { background: radial-gradient(600px 240px at 50% -40%, rgba(224,122,95,.18), transparent 70%), linear-gradient(145deg, rgba(224,122,95,.06), rgba(139,92,246,.03)), #fff; }

/* ════════════════════════════════════════════════════════════════
   🔧 AUDIT UI v197 — landing publique
   ════════════════════════════════════════════════════════════════ */
/* Boutons CTA du hero : ne rétrécissent pas sous leur texte
   (le texte débordait du fond du bouton de 12px sur mobile) */
.pub-hero-actions .btn, .hp-cta-actions .btn { flex-shrink: 0; max-width: 100%; }

/* Blobs décoratifs : jamais de barre de défilement horizontale
   sur mobile (l'animation de pulsation les faisait dépasser de 4px) */
.pub-blob { max-width: 100%; }
@media (max-width: 700px) {
  .pub-hero { overflow: hidden; }
}

/* ---------- Audit UI v197 — CTA final mobile : le texte doit rentrer ---------- */
@media (max-width: 700px) {
  .hp-cta-actions .btn { white-space: normal; }
}

/* ============================================================
   🏠 HOXERA v337 — Home alignée sur le centre serveurs
   HTML v167/v195/v240 inchangé (classes et ids verrouillés).
   Couleurs + emplacement : même langage que le dashboard.
   ============================================================ */
body:has(#public-landing) {
  background:
    radial-gradient(920px 440px at 88% -10%, rgba(224,122,95,.15), transparent 58%),
    radial-gradient(720px 380px at -10% 110%, rgba(201,91,73,.08), transparent 56%),
    #0e0f15;
}
body:has(#public-landing) .navbar {
  background: rgba(14, 15, 21, .82) !important;
  border-bottom: 1px solid #2a2d3d;
}
#public-landing {
  --faq-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 9.6 12 15.2l5.6-5.6'/></svg>");
  --panel: #1a1c28;
  --panel2: #20222f;
  --border: #2a2d3d;
  --text: #e9eaf2;
  --text-dim: #8b8fa3;
}

/* Hero : texte à gauche, carte « en direct » à droite (comme le panneau d’accueil) */
#public-landing .pub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .82fr);
  grid-template-areas:
    "badge stage"
    "title stage"
    "tag stage"
    "actions stage"
    "support stage";
  align-items: center;
  text-align: left;
  column-gap: 48px;
  row-gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) 28px 44px;
}
#public-landing .pub-hero-badge {
  grid-area: badge;
  justify-self: start;
  margin-bottom: 14px;
  background: rgba(224,122,95,.12);
  border-color: rgba(224,122,95,.38);
}
#public-landing .hero-title { grid-area: title; margin: 0; }
#public-landing .pub-tagline {
  grid-area: tag;
  margin: 16px 0 22px;
  max-width: none;
  color: #8b8fa3;
}
#public-landing .pub-hero-actions { grid-area: actions; justify-content: flex-start; }
#public-landing .pub-support-link { grid-area: support; margin-top: 12px; }

#public-landing .pub-stats {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding: 18px 16px 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(280px 140px at 100% 0%, rgba(224,122,95,.2), transparent 70%),
    linear-gradient(165deg, rgba(255,255,255,.045), transparent 52%),
    #1a1c28;
  border: 1px solid rgba(224,122,95,.3);
  border-radius: 12px;
  box-shadow: 0 28px 60px -32px rgba(224,122,95,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
#public-landing .pub-stats::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #e07a5f, #c95b49, transparent 88%);
}
#public-landing .pub-stats::after {
  content: "En direct";
  order: -1;
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e07a5f;
  padding: 4px 6px 6px;
}
#public-landing .pub-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
  background: #20222f;
  border: 1px solid #2a2d3d;
  border-radius: 12px;
  box-shadow: none;
}
#public-landing .pub-stat .lbl { margin-top: 0; font-size: 12px; font-weight: 650; color: #8b8fa3; }
#public-landing .pub-stat .val {
  font-size: 22px;
  background: linear-gradient(135deg, #e07a5f, #f2a65e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cartes façon centre serveurs (tuiles + lueur argile, plus de violet) */
#public-landing .hp-about-card,
#public-landing .hp-pillar,
#public-landing .hp-step,
#public-landing .pub-feature,
#public-landing .hp-faq-item,
#public-landing .bot-card,
#public-landing .hp-cta-inner {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), #1a1c28;
  border: 1px solid #2a2d3d;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.85);
}
#public-landing .hp-about-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border-color: rgba(224,122,95,.32);
  background:
    radial-gradient(420px 180px at 100% -20%, rgba(224,122,95,.18), transparent 70%),
    linear-gradient(150deg, rgba(255,255,255,.05), transparent 55%),
    #1a1c28;
}
#public-landing .hp-about-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #e07a5f, #c95b49, transparent 88%);
}
#public-landing .hp-pillar,
#public-landing .hp-step,
#public-landing .pub-feature,
#public-landing .bot-card {
  border-radius: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease;
}
#public-landing .hp-pillar:hover,
#public-landing .pub-feature:hover,
#public-landing .bot-card:hover {
  transform: translateY(-4px);
  border-color: rgba(224,122,95,.6);
  box-shadow: 0 18px 40px -18px rgba(224,122,95,.45);
}
#public-landing .pub-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#public-landing .pub-feature .f-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(224,122,95,.12);
  border: 1px solid rgba(224,122,95,.28);
  font-size: 22px;
}
#public-landing .hp-cta-inner {
  border-color: rgba(224,122,95,.35);
  background:
    radial-gradient(600px 240px at 50% -40%, rgba(224,122,95,.22), transparent 70%),
    #1a1c28;
}

@media (max-width: 900px) {
  #public-landing .pub-hero {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 36px 16px 28px;
    gap: 0;
  }
  #public-landing .pub-hero-badge { align-self: center; }
  #public-landing .pub-tagline { margin-left: auto; margin-right: auto; }
  #public-landing .pub-hero-actions { justify-content: center; }
  #public-landing .pub-stats {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 22px;
  }
  #public-landing .pub-stats::after { width: 100%; text-align: left; }
  #public-landing .pub-stat {
    flex: 1 1 28%;
    min-width: 96px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  #public-landing .pub-features { grid-template-columns: 1fr; }
}

html.hx-light body:has(#public-landing) { background: #f2f3f8; }
html.hx-light body:has(#public-landing) .navbar {
  background: rgba(255,255,255,.86) !important;
  border-bottom-color: #e4e6ef;
}
html.hx-light #public-landing .pub-stats,
html.hx-light #public-landing .hp-about-card,
html.hx-light #public-landing .hp-pillar,
html.hx-light #public-landing .hp-step,
html.hx-light #public-landing .pub-feature,
html.hx-light #public-landing .hp-faq-item,
html.hx-light #public-landing .bot-card,
html.hx-light #public-landing .hp-cta-inner {
  background: #fff;
  border-color: #e4e6ef;
  box-shadow: 0 12px 28px -18px rgba(30,34,60,.28);
}
html.hx-light #public-landing .pub-stat { background: #f0f1f7; border-color: #e4e6ef; }

/* ============================================================
   🏠 HOXERA v338 — Home « produit », pas panneau d’admin
   Inspiré du NIVEAU pro (espace, 1 CTA, marque au centre).
   Interdit : cloner un autre bot (textes, vagues, police, classes dh-*).
   HTML v167/v240 toujours inchangé.
   ============================================================ */
body:has(#public-landing) {
  background: #12141c;
}
body:has(#public-landing) .navbar {
  background: rgba(18, 20, 28, .78) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#public-landing .pub-blob { opacity: .14; filter: blur(90px); }
#public-landing .pub-hero-badge.shimmer::after { animation: none; display: none; }

#public-landing .pub-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  gap: 0;
}
#public-landing .pub-hero::before {
  content: "";
  width: 132px;
  height: 132px;
  margin: 0 auto 26px;
  border-radius: 12px;
  background: #1a1c28 url("/api/public/bot-avatar") center / cover no-repeat;
  border: 2px solid rgba(224,122,95,.45);
  box-shadow: 0 28px 54px -22px rgba(224,122,95,.6);
}
#public-landing .pub-hero-badge {
  grid-area: auto;
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#public-landing .hero-title {
  grid-area: auto;
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.08;
  margin: 0;
}
#public-landing .grad-anim {
  animation: none;
  background: none;
  -webkit-text-fill-color: #e07a5f;
  color: #e07a5f;
}
#public-landing .pub-tagline {
  grid-area: auto;
  max-width: 540px;
  margin: 18px auto 28px;
  color: rgba(255,255,255,.62);
  font-size: 18px;
  line-height: 1.55;
}
#public-landing .pub-hero-actions {
  grid-area: auto;
  justify-content: center;
  gap: 10px;
}
#public-landing .pub-hero-actions .btn-primary {
  background: #b4452c;
  background-image: none;
  border-radius: 4px;
  font-size: 16px;
  padding: 14px 22px;
  box-shadow: none;
  filter: none;
}
#public-landing .pub-hero-actions .btn-primary:hover {
  background: #c95b49;
  filter: none;
  box-shadow: none;
  transform: none;
}
/* Le bouton « Se connecter avec Discord » garde le meme fond plein que dans le
   bandeau : en transparence il devenait illisible des que le fond clair
   s'activait. Les autres actions du heros restent en contour. */
#public-landing .pub-hero-actions .btn:not(.btn-primary):not(.btn-discord) {
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  width: auto;
}
#public-landing .pub-support-link {
  grid-area: auto;
  margin-top: 16px;
}
#public-landing .pub-support-link a { color: rgba(255,255,255,.45); font-size: 13px; }

#public-landing .pub-stats {
  grid-area: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
  width: 100%;
  margin-top: 48px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#public-landing .pub-stats::before,
#public-landing .pub-stats::after { display: none; content: none; }
#public-landing .pub-stat {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  text-align: center;
}
#public-landing .pub-stat .val {
  font-size: 28px;
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
#public-landing .pub-stat .lbl { color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .4px; }

#public-landing .pub-section { padding: 56px 26px; }
#public-landing .pub-section h2,
#public-landing .hp-section h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 750;
  letter-spacing: -.6px;
}

#public-landing .pub-features {
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
#public-landing .pub-feature {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 22px 4px 22px 0;
  transform: none !important;
}
#public-landing .pub-feature:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(224,122,95,.35) !important;
}
#public-landing .pub-feature .f-ico {
  width: auto; height: auto;
  background: none; border: none;
  font-size: 22px;
  transform: none !important;
}
#public-landing .pub-feature:hover .f-ico { transform: none !important; }
#public-landing .pub-feature b {
  font-size: 18px;
  letter-spacing: -.02em;
  color: #e07a5f;
}

#public-landing .hp-about-card,
#public-landing .hp-pillar,
#public-landing .hp-step,
#public-landing .hp-faq-item,
#public-landing .bot-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}
#public-landing .hp-about-card::before { opacity: .9; }
#public-landing .hp-pillar:hover,
#public-landing .bot-card:hover {
  transform: none;
  border-color: rgba(224,122,95,.4);
  box-shadow: none;
}
#public-landing .hp-cta-inner {
  background: none;
  border: 1px solid rgba(224,122,95,.35);
  box-shadow: none;
  border-radius: 12px;
}
#public-landing .hp-cta-inner .btn-primary {
  background: #b4452c;
  background-image: none;
  border-radius: 4px;
  box-shadow: none;
}

@media (max-width: 900px) {
  #public-landing .pub-hero {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px 18px 48px;
  }
  #public-landing .pub-hero::before { width: 96px; height: 96px; border-radius: 12px; margin-bottom: 18px; }
  #public-landing .pub-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 22px 28px;
    margin-top: 32px;
  }
  #public-landing .pub-stat { flex: 0 1 auto; min-width: 0; }
  #public-landing .pub-features { grid-template-columns: 1fr; }
}

html.hx-light body:has(#public-landing) { background: #f4f5f8; }
html.hx-light #public-landing .hero-title { color: #1c1e26; }
html.hx-light #public-landing .pub-tagline { color: #5c6270; }
html.hx-light #public-landing .pub-stat .val { -webkit-text-fill-color: #1c1e26; color: #1c1e26; }
html.hx-light #public-landing .pub-stat .lbl { color: #5f6472; }
html.hx-light #public-landing .pub-feature {
  border-bottom-color: #e4e6ef !important;
}
html.hx-light #public-landing .hp-about-card,
html.hx-light #public-landing .hp-pillar,
html.hx-light #public-landing .hp-step,
html.hx-light #public-landing .hp-faq-item,
html.hx-light #public-landing .bot-card,
html.hx-light #public-landing .hp-cta-inner {
  background: #fff;
  border-color: #e4e6ef;
}

/* Theme clair de l'accueil : les cartes etaient passees en clair, mais pas le
   texte pose dessus. Le badge du haut, les paragraphes des pavés et les liens du
   pied heritaient des couleurs sombres, soit 1,5 a 2,6:1 sur fond blanc. */
html.hx-light #public-landing .pub-hero-badge { background: rgba(224,122,95,.14); border-color: rgba(164,70,42,.32); color: #9c3f1f; }
html.hx-light #public-landing .pub-sub,
html.hx-light #public-landing .pub-tagline,
html.hx-light #public-landing .hp-about-card p,
html.hx-light #public-landing .hp-pillar p,
html.hx-light #public-landing .pub-feature p,
html.hx-light #public-landing .hp-step p,
html.hx-light #public-landing .hp-faq-item p { color: #4f5361; }
html.hx-light #public-landing .hp-faq-item summary { color: #1c1e26; }
/* v378 — la carte du bot : le pseudo et la ligne d'état gardaient le gris du
   thème sombre (3,2:1 sur fond blanc, mesuré à 375 et 1440 px). */
html.hx-light #public-landing .bot-card .uname,
html.hx-light #public-landing .bot-card .bot-card-status { color: #5f6472; }
html.hx-light #public-landing .hp-footer-col a,
html.hx-light #public-landing .pub-footer-links a { color: #474b59; }
html.hx-light #public-landing .hp-footer-col a:hover,
html.hx-light #public-landing .pub-footer-links a:hover { color: #a4462a; }
html.hx-light #public-landing .pub-footer,
html.hx-light #public-landing .hp-footer-brand p { color: #4f5361; }
html.hx-light #public-landing .hp-kicker { color: #a4462a; }
html.hx-light #public-landing .pub-support-link a { color: #3f4bc4; }
html.hx-light #public-landing .pub-support-link a:hover { color: #2c3591; }
.pub-support-link a { text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.pub-support-link a:hover { border-bottom-color: currentColor; }
/* Titre du heros et titres de pavés en couleur d'accentuation : sur fond clair,
   l'accent du theme sombre disparait. Meme teinte que les boutons primaires. */
html.hx-light #public-landing .grad,
html.hx-light #public-landing .pub-feature > b,
html.hx-light #public-landing .hp-pillar > b { -webkit-text-fill-color: #a4462a; color: #a4462a; }
html.hx-light #public-landing .hp-footer-col > b,
html.hx-light #public-landing .hp-footer-bottom,
html.hx-light #public-landing .hp-footer-bottom span { color: #5f6472; }

html.hx-light #public-landing .hp-cta-inner p { color: #43485a; }

/* ════════════════════════════════════════════════════════════════
   v377 — En-tête public : un seul bandeau, quel que soit l'écran
   ----------------------------------------------------------------
   Constat à 375 px : les quatre liens de section étaient masqués
   sans remplacement, et le bouton « Se connecter avec Discord »
   sortait de 10 px à droite. Le bandeau se replie donc en deux
   lignes courtes, et le menu prend le relais sous 900 px.
   ════════════════════════════════════════════════════════════════ */
.navbar { gap: 12px; flex-wrap: wrap; }
.navbar .logo-row { min-width: 0; flex: 0 1 auto; }
.navbar .logo-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-right { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
/* v378 — mesuré à 901 px, compte connecté : le logo (120 px), les quatre
   liens (372 px) et le bloc « pseudo + tableau de bord » (354 px) ne tiennent
   pas sur 901 px, et le groupe de droite basculait seul sur une deuxième
   ligne : le bandeau doublait de hauteur. Le pseudo et la pastille de liaison
   s'effacent quand la place manque, le bouton reste. */
@media (max-width: 1100px) {
  .navbar .user-pill { gap: 0; min-width: 0; }
  .navbar .user-pill > span:not(.chip) { display: none; }
}
.navbar-right .btn { max-width: 100%; white-space: nowrap; }

/* Bouton hamburger : caché sur grand écran, visible sous 900 px */
.nav-burger {
  display: none; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: rgba(18, 25, 35, .85); border: 1px solid rgba(54, 68, 92, .85);
  border-radius: 12px; cursor: pointer; flex: 0 0 auto;
}
.nav-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .18s ease, opacity .18s ease;
}
.navbar.menu-ouvert .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.menu-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
.navbar.menu-ouvert .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le panneau replié : pleine largeur, sous le bandeau, même fond */
.nav-menu {
  display: none; flex-basis: 100%; width: 100%;
  flex-direction: column; gap: 2px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(54, 68, 92, .62);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: block; padding: 12px 10px; border-radius: 8px;
  color: var(--text-dim); font-size: 15px; font-weight: 650; text-decoration: none;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--text); }

@media (max-width: 900px) {
  .navbar-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-menu:not([hidden]) { display: flex; }
  .navbar { padding: 11px clamp(14px, 4vw, 44px); }
  .navbar .logo-row { font-size: 17px; }
}
@media (max-width: 420px) {
  .navbar-right { gap: 10px; }
  .navbar .btn { font-size: 14px; padding: 9px 12px; }
  .navbar .logo-row { font-size: 16px; }
  .navbar .logo { width: 32px; height: 32px; }
}

/* v377 — sous 900 px, l'action principale vit dans le menu déroulant :
   la barre du haut ne garde que le logo et le hamburger. */
.nav-menu-action { padding: 8px 4px 4px; }
.nav-menu-action .btn, .nav-menu-action button {
  width: 100%; justify-content: center; text-align: center; white-space: normal;
}
/* v378 — le hamburger flottait au milieu du bandeau, un grand vide à sa
   droite (capture du 21/10). En cause : `justify-content: space-between`
   répartit l'espace entre TOUS les éléments de la ligne, et `.navbar-right`
   reste un élément de 0 px dont le bouton est masqué sous 900 px. Le
   hamburger se retrouvait donc à mi-chemin, entre le logo et ce fantôme.
   Côté connecté, le même fantôme — et son `order: 3` écrit pour la ligne
   unique — renvoyait tout le groupe de droite à la ligne suivante dès
   901 px. Une seule règle pour les deux cas : le logo tient la gauche, les
   actions la droite, le menu déroulant passe à la ligne en dernier. */
@media (max-width: 900px) {
  .navbar { justify-content: flex-end; }
  .navbar > .logo-row { margin-right: auto; }
  .navbar-right { order: 2; }
  .nav-burger { order: 3; }
  .nav-menu { order: 4; }
  .navbar > .navbar-right .btn { display: none; }
  .navbar.menu-ouvert .navbar-right { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   v378 — Cibles tactiles sur téléphone
   ----------------------------------------------------------------
   Mesuré à 375 px : les liens du pied de page et le lien vers le
   serveur support ne faisaient que 16 px de haut, alors que tout le
   reste de la page respecte 38 px minimum. Un lien de texte n'a pas
   besoin d'un fond, seulement d'une zone plus haute à toucher.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .hp-footer-col a,
  .pub-footer-links a,
  .pub-support-link a,
  .nav-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .pub-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
  .hp-footer-col a { padding-left: 0; padding-right: 0; }
}