:root {
  --bg: #0b0e14;
  --bg-alt: #10141c;
  --surface: #151a24;
  --border: #232938;
  --text: #e8eaf0;
  --text-muted: #97a0b3;
  --accent: #5b8cff;
  --accent-2: #8b5cff;
  --font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
p { margin: 0 0 16px; color: var(--text-muted); }

a { color: inherit; text-decoration: none; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.logo {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--text); }

/* Chat avec Pat mis en évidence dans la nav (icône scintillante façon IA). */
.nav-pat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent) !important;
  font-weight: 600;
}
.nav-pat-icon {
  display: inline-block;
  animation: nav-pat-sparkle 2.5s ease-in-out infinite;
}
@keyframes nav-pat-sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.55; transform: scale(1.2) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-pat-icon { animation: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Hero */
.hero {
  padding: 120px 0 100px;
  background:
    radial-gradient(600px circle at 20% 20%, rgba(91, 140, 255, 0.15), transparent 60%),
    radial-gradient(600px circle at 80% 40%, rgba(139, 92, 255, 0.12), transparent 60%);
}

.hero-inner {
  max-width: 860px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border);
  box-shadow: 0 0 0 6px rgba(91, 140, 255, 0.1);
  flex-shrink: 0;
}

.eyebrow {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  background: linear-gradient(90deg, var(--text), var(--accent) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
}

.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Sections */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-alt); }
.section-intro { max-width: 560px; }

.game-back {
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.game-back a { color: var(--text-muted); }
.game-back a:hover { color: var(--accent); }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-highlights {
  display: grid;
  gap: 16px;
}

.highlight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.highlight-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
}

.highlight-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.skill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.skill-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.skill-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.skill-card p { margin: 0; font-size: 0.92rem; }

/* Projects */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-tag {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Contact */
.contact-inner { text-align: center; }
.contact-inner .section-intro { margin-left: auto; margin-right: auto; }

.contact-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-inner p { margin: 0; }

/* Server list */
.server-details {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.9rem;
}

.server-details dt {
  color: var(--text-muted);
  font-weight: 600;
}

.server-details dd {
  margin: 0;
}

.server-secret {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--bg-alt);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.server-locked {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Auth forms */
.auth-section { padding: 70px 0; }

.auth-container {
  max-width: 420px;
  margin: 0 auto;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.auth-form label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
}

.auth-form input {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-form button { margin-top: 20px; }

.auth-checkbox {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 14px !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
}

.auth-checkbox input {
  padding: 0;
  width: auto;
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
}

.auth-switch a { color: var(--accent); }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #dadce0;
}

.btn-google svg { flex-shrink: 0; }

.auth-divider {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0;
}

.form-error {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.form-success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* Admin */
.table-wrap { overflow-x: auto; margin-bottom: 40px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th, .admin-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-invite { background: rgba(151, 160, 179, 0.15); color: var(--text-muted); }
.role-membre { background: rgba(91, 140, 255, 0.15); color: var(--accent); }
.role-admin { background: rgba(139, 92, 255, 0.15); color: var(--accent-2); }

.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-form select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

.name-input {
  width: 90px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.btn-small { padding: 6px 14px; font-size: 0.85rem; }

.admin-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.server-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.server-form label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.server-form input, .server-form textarea, .server-form select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}

.server-form-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bannières de carte serveur — dégradés CSS abstraits, jamais d'images (droits d'usage) */
.server-card {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  isolation: isolate;
}

.server-banner {
  height: 88px;
  margin: -24px -24px 16px -24px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--game-c1, var(--accent)), var(--game-c2, var(--accent-2)));
  position: relative;
}

.server-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 14px);
}

.server-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--surface) 100%);
}

.server-card[data-game="palworld"]  { --game-c1: #ff9f43; --game-c2: #8b5cff; }
.server-card[data-game="valheim"]   { --game-c1: #4ade80; --game-c2: #2f6f4f; }
.server-card[data-game="minecraft"] { --game-c1: #7cb342; --game-c2: #5b8cff; }

/* Panel Palworld */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-active,
.status-running    { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.status-activating,
.status-paused     { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.status-inactive,
.status-failed,
.status-stopped,
.status-unknown    { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }

.infra-vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.infra-vm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.infra-vm-card h3 {
  margin-top: 0;
}

.infra-terminal-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

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

.infra-terminal-modal-inner {
  background: #1e1e1e;
  border-radius: var(--radius);
  width: min(900px, 92vw);
  height: min(600px, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.infra-terminal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

#infra-terminal-container {
  flex: 1;
  padding: 8px;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-links.open { max-height: calc(100vh - 70px); overflow-y: auto; }

  .nav-links li { border-top: 1px solid var(--border); }

  .nav-links a {
    display: block;
    padding: 16px 24px;
  }

  .hero { padding: 90px 0 70px; }

  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero-subtitle { margin-left: auto; margin-right: auto; }
}

/* Menu rouage (thème / compte / déconnexion) — partagé par toutes les pages */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.settings-menu {
  position: relative;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
}

.settings-toggle:hover,
.settings-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--text);
  transform: rotate(30deg);
}

.settings-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  animation: settings-dropdown-in 0.15s ease;
  z-index: 200;
}

.settings-dropdown[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .settings-dropdown {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

@keyframes settings-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}

.settings-section + .settings-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 12px;
}

.settings-section a {
  display: block;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-section a:hover {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.15), rgba(139, 92, 255, 0.15));
  color: var(--text);
}

.settings-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 8px 8px;
  word-break: break-all;
}

/* Page Changelog */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.changelog-entry h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  margin: 0;
}

.changelog-entry ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--text-muted);
}

.changelog-entry li {
  margin-bottom: 6px;
}

/* ============================================================
   Identité visuelle du thème moderne : palette et disposition de
   nav distinctes du thème classique (qui reste figé). Toutes les
   règles ci-dessous sont additives par rapport à la copie de
   styles.css qui précède dans ce fichier — les nouvelles valeurs
   de :root gagnent sur les précédentes (même règle, plus loin
   dans le fichier), et cascadent automatiquement partout où le
   reste du CSS utilise déjà var(--accent)/var(--accent-2)/
   var(--radius) etc.
   ============================================================ */
:root {
  --bg: #07080d;
  --bg-alt: #0c0e18;
  --surface: #12141f;
  --border: #232042;
  --text: #f1f2f8;
  --text-muted: #9098b3;
  --accent: #22d3ee;
  --accent-2: #c026d3;
  --radius: 20px;
}

.hero {
  background:
    radial-gradient(600px circle at 20% 20%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(600px circle at 80% 40%, rgba(192, 38, 211, 0.14), transparent 60%);
}

.hero-photo {
  box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12);
}

/* Nav en forme de pilule sur desktop (le panneau mobile déplié reste tel quel) */
@media (min-width: 641px) {
  .nav {
    padding: 14px 20px;
  }

  .nav-links {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 24px;
  }

  .logo {
    font-size: 1.2rem;
    letter-spacing: 0.01em;
  }
}

/* Liste des thèmes dans le menu rouage (registre extensible) */
.settings-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 8px 4px;
}

/* Sous-menus dans la barre principale (IA, Coulisses, ...) - reutilise .settings-dropdown/
   .settings-section pour le panneau (deja generique), seul le declencheur a un style dedie pour
   se fondre avec les liens de nav simples plutot que ressembler a un bouton rond comme le rouage/
   l avatar. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0;
  transition: color 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] {
  color: var(--text);
}

@media (max-width: 640px) {
  .nav-dropdown-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 16px 24px;
  }
}

/* Champs qui doivent occuper toute la largeur du .server-form parent (textarea CSS perso, champ
   de prompt IA) - un textarea/input sans width explicite garde sa largeur intrinseque (~20
   colonnes) meme dans un conteneur large, d ou le "mal dimensionne" signale par Cyprien. Classe
   dediee plutot que .server-form textarea/input generique pour ne pas elargir les champs plus
   petits (color, select) qui, eux, sont voulus compacts. */
.field-wide {
  width: 100%;
  box-sizing: border-box;
}

/* Cloche de notifications (22/07/2026) - badge rond superpose au bouton, panneau deroulant
   generique (reutilise .settings-dropdown/.settings-section, cf. plus haut). */
.nav-notif-toggle {
  position: relative;
  font-size: 1.1rem;
}

.nav-notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #e0433a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2em 0.4em;
  border-radius: 1em;
  min-width: 1.2em;
  text-align: center;
}

.nav-notif-dropdown {
  width: 320px;
  max-width: 90vw;
  max-height: 400px;
  overflow-y: auto;
}

.nav-notif-item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.88rem;
  text-decoration: none;
  color: inherit;
}

.nav-notif-item:hover {
  background: rgba(128, 128, 128, 0.1);
}

.nav-notif-unread {
  background: rgba(91, 140, 255, 0.08);
  font-weight: 600;
}

.nav-notif-time {
  font-size: 0.78em;
  opacity: 0.6;
  font-weight: 400;
}

.theme-option-active {
  color: var(--accent) !important;
  font-weight: 600;
}

/* Onglets de la page Admin (Utilisateurs / Serveurs / IA). */
.admin-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin: 20px 0 0;
  flex-wrap: wrap;
}

.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, var(--text));
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.admin-tab-btn:hover {
  color: var(--text);
}

.admin-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ai-settings-form textarea {
  font: inherit;
  min-height: 180px;
  resize: vertical;
}

/* Labels + champs sur des lignes separees (les labels de ce formulaire sont
   longs et descriptifs - collés à l'input sur la même ligne, ça devenait
   illisible). */
.ai-settings-form label {
  display: block;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.ai-settings-form label > input,
.ai-settings-form label > select,
.ai-settings-form label > textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-weight: 400;
  box-sizing: border-box;
}
.ai-settings-form .field-help {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}
.ai-settings-form .ai-settings-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}

.ai-settings-model-picker {
  display: block;
  max-width: 480px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.ai-settings-model-picker select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 400;
}
.ai-settings-model-picker .field-help {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Galerie d'utilisateurs (page Admin) : une carte par utilisateur, rôle visible/modifiable
   directement, le reste (nom, accès Claude, délégation) se déplie au clic sur l'en-tête. */
.user-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0 40px;
}

.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Une carte dépliée (détails visibles) prend toute la largeur de la grille
   au lieu de rester coincée dans une colonne étroite - surtout utile pour
   les cartes de config IA (Chat/Image) qui ont beaucoup de champs. */
.user-card:has(.user-card-details:not([hidden])) {
  grid-column: 1 / -1;
}

.user-card-details .ai-settings-form {
  max-width: 640px;
}

.ai-settings-form label.ai-agent-enabled {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.ai-settings-form label.ai-agent-enabled input {
  width: auto;
  display: inline;
}

.user-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.user-card-identity h4 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.user-card-email {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  word-break: break-all;
}

.user-card-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-card-header[aria-expanded="true"] .user-card-chevron {
  transform: rotate(180deg);
}

.user-card-primary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-card-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.role-form select {
  flex: 1;
}

.user-card-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

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

.user-card-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.user-card-delegation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* ============================================================
   THÈME V3 — "salle des machines" : esthétique poste de contrôle,
   cadre en équerres + rails de mesure sur les côtés + grille
   schématique, palette ambre/turquoise (distincte du cyan/magenta
   de V2). Voir la maquette de validation pour le concept complet.
   Thème sombre assumé, ne varie pas avec la préférence système
   (toute la famille de thèmes du site est sombre).
   ============================================================ */
:root {
  --bg: #060a10;
  --bg-alt: #0c131a;
  --surface: #0d151d;
  --border: #1c2b38;
  --text: #e9f2f5;
  --text-muted: #7d95a6;
  --accent: #ff9d3d;
  --accent-2: #4fd1c5;
  --radius: 6px;
  --max-width: 1280px;
  --hud-rail-w: 96px;
  --hud-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (min-width: 1600px) {
  .container { padding-left: 140px; padding-right: 140px; }
}

.hero {
  background:
    radial-gradient(600px circle at 20% 20%, rgba(255, 157, 61, 0.16), transparent 60%),
    radial-gradient(600px circle at 80% 40%, rgba(79, 209, 197, 0.13), transparent 60%);
}

.hero-photo {
  box-shadow: 0 0 0 6px rgba(255, 157, 61, 0.12);
}

.hero h1 {
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--hud-mono);
  letter-spacing: 0.14em;
}

/* Nav : logo mono + marqueur, liens plus techniques */
.logo {
  font-family: var(--hud-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.logo::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}

.nav-links a:hover {
  color: var(--accent-2);
}

.settings-toggle {
  border-radius: 4px;
}

.settings-toggle:hover,
.settings-toggle[aria-expanded="true"] {
  border-color: var(--accent);
}

.settings-dropdown {
  border-radius: 4px;
}

/* Cartes de jeu : coins en équerre au survol au lieu du dégradé de bordure de V2 */
.game-card::after {
  content: none;
}

.game-card {
  position: relative;
  border-radius: var(--radius);
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow 0.2s ease;
  pointer-events: none;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.game-card:hover::before {
  box-shadow: 0 0 0 1px var(--accent);
}

.game-versions-badge {
  background: var(--accent);
  color: #1a0f04;
}

/* ---------- Chrome HUD (rails + équerres + grille), injecté par partials/nav.php ---------- */
.hud-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.14;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 15%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 15%, black 40%, transparent 85%);
}

.hud-glow {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
}

.hud-glow-1 { top: -120px; left: 8%; width: 420px; height: 420px; background: var(--accent); }
.hud-glow-2 { top: 30%; right: 4%; width: 360px; height: 360px; background: var(--accent-2); }

.hud-bracket {
  position: fixed;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-color: var(--border);
  pointer-events: none;
  opacity: 0;
  animation: hud-bracket-in 0.6s ease forwards;
}
.hud-bracket-tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; animation-delay: 0.05s; }
.hud-bracket-tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; animation-delay: 0.15s; }
.hud-bracket-bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; animation-delay: 0.25s; }
.hud-bracket-br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; animation-delay: 0.35s; }

@keyframes hud-bracket-in {
  from { opacity: 0; transform: scale(1.4); }
  to { opacity: 1; transform: scale(1); }
}

.hud-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--hud-rail-w);
  z-index: 3;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 100px 0 40px;
  pointer-events: none;
}

@media (min-width: 1600px) {
  .hud-rail { display: flex; }
  .hud-rail-left { left: 0; }
  .hud-rail-right { right: 0; }
}

.hud-rail-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--hud-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.hud-rail-ticks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hud-tick {
  width: 13px;
  height: 1px;
  background: var(--border);
  display: block;
}

.hud-tick.major {
  width: 20px;
  background: var(--text-muted);
}

.hud-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 157, 61, 0.25);
}

.hud-rail-readouts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-family: var(--hud-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}

.hud-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hud-readout-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.hud-readout-value {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hud-bracket { animation: none; opacity: 1; }
}

/* Google AI - centre de gestion des quotas/coûts (dashboard, toolbar, quotas, alertes, graphiques) */
.google-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}
.google-admin-toolbar .btn,
.google-admin-toolbar form {
  margin: 0;
}

.quota-bar-row {
  margin: 10px 0;
  max-width: 640px;
}
.quota-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.quota-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.quota-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quota-bar-fill.quota-ok { background: #4ade80; }
.quota-bar-fill.quota-warn { background: #fbbf24; }
.quota-bar-fill.quota-danger { background: #f87171; }

.google-alerts-list {
  list-style: none;
  margin: 8px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
}
.google-alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
}
.google-alert-info { background: rgba(91, 140, 255, 0.1); border-color: rgba(91, 140, 255, 0.3); }
.google-alert-warn { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; }
.google-alert-danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: #f87171; }

.pat-chart {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px 0 20px;
}
.pat-chart-bar {
  fill: var(--accent);
}
.pat-chart-label {
  fill: var(--text-muted);
  font-size: 8px;
}

.google-history-filters {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.google-history-filters label {
  flex: 1 1 160px;
  min-width: 140px;
}

/* Fais ton histoire - Bob l'éponge */
.spongebob-json-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.spongebob-json-output {
  width: 100%;
  max-width: 100%;
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  resize: vertical;
}

/* Historique des histoires Bob l'éponge - liste d'étapes détaillée */
.spongebob-steps-list {
  margin: 8px 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
}
.spongebob-steps-list li {
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.spongebob-steps-list li:last-child {
  border-bottom: none;
}

/* Avatar/pseudo + bibliotheque de styles perso (ajoute le 20/07/2026) */
.avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.avatar-badge-sm { width: 1.5rem; height: 1.5rem; font-size: 0.9rem; }
.avatar-badge-md { width: 2.25rem; height: 2.25rem; font-size: 1.2rem; }
.avatar-badge-lg { width: 4rem; height: 4rem; font-size: 2rem; }

.avatar-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.avatar-emoji-option {
  position: relative;
  display: inline-block;
}
.avatar-emoji-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.avatar-emoji-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  font-size: 1.1rem;
}
.avatar-emoji-option input:checked + span {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.style-swatch {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.2rem;
  border: 1px solid var(--border);
}

.nav-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}