:root {
  --or: #D4AF37;
  --or-clair: #F4E5B2;
  --or-fonce: #A8871F;

  /* ---- Thème SOMBRE (par défaut) ---- */
  --noir: #0E0E0E;
  --noir-clair: #1A1A1A;
  --texte: #f0f0f0;
  --texte-secondaire: #B8B8B8;
  --bordure: #2a2a2a;
  --bordure-douce: #333333;
  --champ-bg: #0f0f0f;
  --champ-bordure: #333333;
  --champ-texte: #ffffff;
  --degrade-1: #171717;
  --degrade-2: #101010;
  --degrade-stat-1: #181818;
  --sidebar-bg: #141414;

  /* Couleurs sémantiques (mêmes valeurs dans les deux thèmes jusqu'ici,
     centralisées ici plutôt que codées en dur à chaque usage) */
  --danger: #e5534b;
  --succes: #3ecb7b;
  --texte-sur-or: #111;
}

[data-theme="light"] {
  --noir: #F7F5EF;
  --noir-clair: #FFFFFF;
  --texte: #1a1a1a;
  --texte-secondaire: #555555;
  --bordure: #e6ddc0;
  --bordure-douce: #ddd7c4;
  --champ-bg: #ffffff;
  --champ-bordure: #d8d0b0;
  --champ-texte: #111111;
  --degrade-1: #ffffff;
  --degrade-2: #f5f0e0;
  --degrade-stat-1: #ffffff;
  --sidebar-bg: #ffffff;
}

body {
  background-color: var(--noir);
  color: var(--texte);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--or); }
a:hover { color: var(--or-clair); }

/* ---- Thème : bouton de bascule ---- */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--or-fonce);
  color: var(--or);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.theme-toggle-btn:hover { background-color: rgba(212,175,55,0.15); }

/* Bouton de bascule flottant, utilisé sur les pages sans navbar (login, inscription, setup, maintenance) */
.theme-toggle-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1050;
  background-color: var(--noir-clair);
}

/* ---- Sélecteur de langue (icône globe + menu déroulant, façon Binance) ---- */
.lang-switcher-wrap { position: relative; display: inline-flex; margin-right: 8px; }
.lang-switcher-btn {
  background: transparent;
  border: 1px solid var(--or-fonce);
  color: var(--or);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: background-color 0.15s ease;
}
.lang-switcher-btn:hover { background-color: rgba(212,175,55,0.15); }
.lang-switcher-btn[aria-expanded="true"] { background-color: rgba(212,175,55,0.15); }

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 210px;
  max-height: 360px;
  overflow-y: auto;
  background-color: var(--noir-clair);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  z-index: 1060;
}
.lang-dropdown.open { display: block; }
.lang-dropdown .lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--texte);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.2;
}
.lang-dropdown .lang-option:hover { background-color: rgba(212,175,55,0.12); color: var(--or); }
.lang-dropdown .lang-option.active { color: var(--or); font-weight: 600; background-color: rgba(212,175,55,0.08); }
.lang-dropdown .lang-option-name { flex: 1 1 auto; }
.lang-dropdown .lang-code-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.55;
  text-transform: uppercase;
}
.lang-dropdown .lang-option-check { font-size: 0.85rem; color: var(--or); visibility: hidden; flex-shrink: 0; }
.lang-dropdown .lang-option.active .lang-option-check { visibility: visible; }

.lang-switcher-floating {
  position: fixed;
  top: 18px;
  right: 66px;
  z-index: 1050;
}

/* Sur desktop, le bouton globe est poussé près du bord DROIT de la navbar
   (order-lg-2), donc le menu déroulant ancré à droite (inset-inline-end:0,
   s'étend vers la gauche) tient très bien dans l'écran. En dessous du
   breakpoint lg, order-lg-2 ne s'applique plus et le bouton se retrouve
   près du bord GAUCHE : le même ancrage à droite fait alors déborder le
   menu hors de l'écran vers la gauche (mesuré : jusqu'à 160px invisibles
   sur 210px de large). On inverse l'ancrage uniquement pour le sélecteur
   intégré à la navbar — la variante flottante (.lang-switcher-floating,
   utilisée sur les pages sans navbar) reste près du bord droit à toutes
   les tailles et n'a pas ce problème. */
@media (max-width: 991.98px) {
  .lang-switcher-wrap:not(.lang-switcher-floating) .lang-dropdown {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}
.lang-switcher-floating .lang-switcher-btn { background-color: var(--noir-clair); }

.hr-soft { border-color: var(--bordure-douce) !important; }

/* ---- Logos ---- */
.site-logo-img { height: 32px; width: auto; border-radius: 4px; }
.crypto-logo-sm { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.crypto-logo-md { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---- Drapeaux (pays) ---- */
.flag-sm { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); flex-shrink: 0; }
.flag-preview { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

/* ---- Logos opérateurs GSM ---- */
.operator-logo-sm { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; flex-shrink: 0; }
.operator-logo-preview { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; }

/* ---- Navbar ---- */
.navbar-salacel {
  background-color: var(--noir-clair);
  border-bottom: 1px solid var(--or-fonce);
}
.navbar-salacel .navbar-brand {
  color: var(--or) !important;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.4rem;
  /* min-width:0 (via overflow:hidden) permet à ce flex-item de rétrécir sous
     sa largeur naturelle : sans ça, un nom de site un peu long pousse toute
     la barre de navigation — et donc la page entière — plus large que
     l'écran sur mobile. Le nom tronque proprement avec "..." à la place. */
  overflow: hidden;
}
.navbar-salacel .navbar-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
@media (max-width: 400px) {
  .navbar-salacel .navbar-brand { font-size: 1.1rem; }
}
.navbar-salacel .nav-link { color: var(--texte) !important; opacity: 0.9; }
.navbar-salacel .nav-link:hover { color: var(--or) !important; opacity: 1; }

/* Icône du menu mobile (☰) : le SVG par défaut de Bootstrap a un trait
   presque noir, pensé pour un fond clair — invisible sur le fond sombre
   de la navbar en thème sombre (--noir-clair très foncé). Remplacé par un
   trait doré (bon contraste sur fond sombre ET clair) ; la règle
   [data-theme="light"] restaure le SVG d'origine (thème clair jamais
   cassé, seul le sombre en avait besoin). */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 175, 55, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- Boutons ---- */
.btn-or {
  background-color: var(--or);
  border-color: var(--or);
  color: var(--texte-sur-or);
  font-weight: 600;
}
.btn-or:hover { background-color: var(--or-clair); border-color: var(--or-clair); color: var(--texte-sur-or); }
.btn-outline-or { border-color: var(--or); color: var(--or); }
.btn-outline-or:hover { background-color: var(--or); color: var(--texte-sur-or); }

/* ---- Cartes ---- */
.card-salacel {
  background-color: var(--noir-clair);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  color: var(--texte);
}
.card-salacel:hover { border-color: var(--or-fonce); }

/* ---- Chat support en direct (widget client, voir includes/footer.php + assets/js/chat.js) ---- */
.bg-or-soft { background-color: rgba(212,175,55,0.12); }

.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1055;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--or);
  color: var(--texte-sur-or);
  font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab-active { background-color: var(--noir-clair); color: var(--or); border: 1px solid var(--or); }

.chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--noir);
}

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 1055;
  width: min(360px, calc(100vw - 44px));
  height: min(480px, calc(100vh - 140px));
  background-color: var(--noir-clair);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel-header {
  background-color: var(--or);
  color: var(--texte-sur-or);
  font-weight: 700;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-panel-header .btn-close { filter: none; opacity: 0.7; }
.chat-panel-header .btn-close:hover { opacity: 1; }

.chat-panel-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
}

.chat-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-bubble-client { background-color: var(--or); color: var(--texte-sur-or); border-bottom-right-radius: 4px; }
.chat-bubble-admin { background-color: var(--noir); color: var(--texte); border: 1px solid var(--bordure); border-bottom-left-radius: 4px; }
.chat-bubble-time { font-size: 0.65rem; opacity: 0.65; margin-top: 3px; text-align: right; }

.chat-empty-state { padding: 24px 8px; }

.chat-panel-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--bordure-douce);
}
.chat-panel-form input {
  flex: 1 1 auto;
  background-color: var(--noir);
  border: 1px solid var(--bordure);
  color: var(--texte);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.9rem;
}
.chat-panel-form input:focus { outline: none; border-color: var(--or); }
.chat-panel-form button {
  background-color: var(--or);
  color: var(--texte-sur-or);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  cursor: pointer;
}

@media (max-width: 480px) {
  .chat-panel { right: 12px; bottom: 82px; }
  .chat-fab { right: 14px; bottom: 14px; }
}

/* ---- Pages légales (CGU, confidentialité, mentions légales) ---- */
.legal-content { line-height: 1.7; }
.legal-content p, .legal-content ul { margin-bottom: 1rem; }
.legal-content h4 { margin-top: 1.75rem; }
.legal-content code { color: var(--or); background: rgba(212,175,55,0.08); padding: 0.1em 0.4em; border-radius: 4px; }

/* ---- Formulaire d'échange ---- */
.exchange-box {
  background: linear-gradient(145deg, var(--degrade-1), var(--degrade-2));
  border: 1px solid var(--or-fonce);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(212,175,55,0.08);
}
.exchange-fields { display: flex; }
.exchange-box .form-control, .exchange-box .form-select {
  background-color: var(--champ-bg); border: 1px solid var(--champ-bordure); color: var(--champ-texte);
}
.exchange-box .form-control:focus, .exchange-box .form-select:focus {
  border-color: var(--or); box-shadow: 0 0 0 0.2rem rgba(212,175,55,0.2);
  background-color: var(--champ-bg); color: var(--champ-texte);
}
.exchange-box .form-control[readonly] {
  opacity: 0.75;
  cursor: not-allowed;
}
.exchange-arrow { color: var(--or); font-size: 1.6rem; }

/* ---- Statut Trader (Bronze/Argent/Or/Platine) ---- */
.tier-badge {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--tier-color, var(--or));
  background-color: color-mix(in srgb, var(--tier-color, var(--or)) 15%, transparent);
  border: 2px solid var(--tier-color, var(--or));
}
.tier-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background-color: var(--bordure-douce);
  overflow: hidden;
}
.tier-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.tier-badge-sm { width: 36px; height: 36px; font-size: 1rem; }
.leaderboard-row-sep { border-top: 1px solid var(--bordure-douce); }

/* ---- Installation en application (PWA) ---- */
.pwa-install-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1040;
  background-color: var(--or);
  color: var(--texte-sur-or);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwa-ios-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1040;
  background-color: var(--noir-clair);
  border: 1px solid var(--or-fonce);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.pwa-ios-hint button {
  background: transparent;
  border: none;
  color: var(--texte-secondaire);
  font-size: 1.3rem;
  line-height: 1;
  margin-left: auto;
}
.btn-chat-notify {
  background: transparent;
  border: none;
  color: var(--texte-sur-or);
  font-size: 1rem;
  opacity: 0.85;
}
.btn-chat-notify:hover { opacity: 1; }
@media (max-width: 767.98px) {
  .pwa-install-btn { left: 12px; bottom: 90px; }
}

/* ---- Bascule Achat / Vente (page d'accueil) ---- */
.tx-type-toggle { display: flex; gap: 12px; }
.tx-type-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--bordure-douce);
  background-color: var(--champ-bg);
  color: var(--texte-secondaire);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.tx-type-card:hover { transform: translateY(-1px); }
.tx-type-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.tx-type-label { font-weight: 600; flex: 1; }
.tx-type-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 2px solid currentColor;
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.tx-type-check i {
  font-size: 0.85rem;
  color: var(--noir);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tx-type-buy:hover { border-color: var(--succes); }
.tx-type-sell:hover { border-color: var(--danger); }
.btn-check:checked + .tx-type-buy {
  border-color: var(--succes);
  background-color: rgba(62, 203, 123, 0.12);
  color: var(--succes);
}
.btn-check:checked + .tx-type-sell {
  border-color: var(--danger);
  background-color: rgba(229, 83, 75, 0.12);
  color: var(--danger);
}
.btn-check:checked + .tx-type-card .tx-type-check {
  opacity: 1;
  background-color: currentColor;
}
.btn-check:checked + .tx-type-card .tx-type-check i { opacity: 1; transform: scale(1); }
.btn-check:focus-visible + .tx-type-card { outline: 2px solid var(--or); outline-offset: 2px; }
@media (max-width: 420px) {
  .tx-type-label { font-size: 0.9rem; }
  .tx-type-card { padding: 12px; gap: 8px; }
}
.rate-pill {
  background-color: rgba(212,175,55,0.12);
  border: 1px solid var(--or-fonce);
  color: var(--or-clair);
  border-radius: 30px;
  padding: 4px 14px;
  font-size: 0.85rem;
  display: inline-block;
}
[data-theme="light"] .rate-pill { color: var(--or-fonce); }

.text-or { color: var(--or) !important; }
.divider-or { width: 60px; height: 3px; background-color: var(--or); border: none; margin: 0.5rem 0 1.5rem; }

/* ---- Marché crypto en temps réel (page d'accueil) ---- */
.market-ticker {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.market-card {
  flex: 0 0 auto;
  min-width: 150px;
  background: linear-gradient(145deg, var(--degrade-stat-1), var(--degrade-2));
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s ease, background-color 0.4s ease;
}
.market-card .market-symbol { font-weight: 700; color: var(--texte); }
.market-card .market-price { font-size: 1.05rem; font-weight: 700; color: var(--or); display: block; margin: 2px 0; }
.market-card .market-change { font-size: 0.8rem; font-weight: 600; }
.price-up { color: var(--succes) !important; }
.price-down { color: var(--danger) !important; }
@keyframes marketFlashUp { 0% { background-color: rgba(62,203,123,0.25); } 100% { background-color: transparent; } }
@keyframes marketFlashDown { 0% { background-color: rgba(229,83,75,0.25); } 100% { background-color: transparent; } }
.market-flash-up { animation: marketFlashUp 1.2s ease; }
.market-flash-down { animation: marketFlashDown 1.2s ease; }
.market-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background-color: var(--succes); margin-right: 6px; animation: marketPulse 1.6s infinite;
}
@keyframes marketPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Annonces & événements (page d'accueil) ---- */
.announcement-banner {
  border: 1px solid var(--or-fonce);
  border-left: 4px solid var(--or);
  border-radius: 10px;
  background: rgba(212,175,55,0.06);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.announcement-banner .announcement-title { color: var(--or); font-weight: 700; }
.announcement-date { color: var(--texte-secondaire); font-size: 0.8rem; }

/* ---- Bandeau défilant "annonce" (urgence de lecture) ---- */
.urgent-ticker {
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, #7a1a15, #b3261e);
  border: 1px solid #ff6b5e;
  border-radius: 10px;
  overflow: hidden;
}
.urgent-ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #5c130f;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  white-space: nowrap;
  animation: marketPulse 1.6s infinite;
}
.urgent-ticker-track {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
}
.urgent-ticker-content {
  display: inline-flex;
  align-items: center;
  animation: urgentScroll 28s linear infinite;
  color: #fff;
  font-weight: 500;
  padding: 0.7rem 0;
}
.urgent-ticker-track:hover .urgent-ticker-content { animation-play-state: paused; }
.urgent-ticker-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.urgent-ticker-item img { height: 22px; width: 22px; object-fit: cover; border-radius: 4px; }
.urgent-ticker-sep { margin: 0 2rem; opacity: 0.6; }
@keyframes urgentScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Cartes actualités / événements ---- */
.news-card {
  background: linear-gradient(145deg, var(--degrade-stat-1), var(--degrade-2));
  border: 1px solid var(--bordure);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-card-img { width: 100%; height: 140px; object-fit: cover; }
.news-card-title { color: var(--texte); font-weight: 700; margin-bottom: 0.4rem; }

footer.footer-salacel {
  background-color: var(--noir-clair);
  border-top: 1px solid var(--or-fonce);
  color: var(--texte-secondaire);
}

/* ---- Admin ---- */
.sidebar-admin {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--or-fonce);
  width: 260px;
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--sidebar-bg);
  --bs-offcanvas-color: var(--texte);
}
@media (min-width: 992px) {
  /* flex-shrink:0 est le correctif clé : sans lui, la largeur réelle de la
     barre latérale varie selon le contenu de CHAQUE page (le flex-item le
     plus "gourmand" grignote l'autre), ce qui provoque un décalage visible
     du menu en naviguant d'une page admin à l'autre. La barre latérale doit
     toujours garder ses 260px pile, quoi qu'il arrive dans le contenu. */
  .sidebar-admin { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; }
}
.min-w-0 { min-width: 0; }

/* Réserve toujours la place de la scrollbar verticale : sans ça, une page
   admin courte (sans scroll) est légèrement plus large qu'une page longue
   (avec scroll), ce qui décale tout le contenu — y compris la barre
   latérale sticky — de la largeur de la scrollbar (~15px) en changeant
   de page. */
html { scrollbar-gutter: stable; }

/* Bouton "œil" afficher/masquer mot de passe (voir assets/js/password-toggle.js) */
.pw-toggle-group .pw-toggle-btn {
  border-color: var(--or-fonce);
  color: var(--texte);
  background: transparent;
}
.pw-toggle-group .pw-toggle-btn:hover,
.pw-toggle-group .pw-toggle-btn:focus {
  color: var(--or);
  border-color: var(--or);
  background: rgba(212,175,55,0.1);
}
.pw-toggle-group .form-control:focus + .pw-toggle-btn,
.pw-toggle-group .form-control:focus ~ .pw-toggle-btn {
  border-color: var(--or);
}
.sidebar-admin .nav-link { color: var(--texte); border-radius: 8px; margin-bottom: 4px; opacity: 0.9; }
.sidebar-admin .nav-link.active, .sidebar-admin .nav-link:hover { background-color: rgba(212,175,55,0.15); color: var(--or); opacity: 1; }
.topbar-admin { background-color: var(--sidebar-bg); border-bottom: 1px solid var(--or-fonce); }
.stat-card { background: linear-gradient(145deg, var(--degrade-stat-1), var(--degrade-2)); border: 1px solid var(--or-fonce); border-radius: 14px; padding: 1.2rem; }
.stat-card .stat-value { color: var(--or); font-size: 1.8rem; font-weight: 700; }
.table-salacel { color: var(--texte); }
.table-salacel thead { color: var(--or); border-bottom: 2px solid var(--or-fonce); }

/* Le tableau récapitulatif de la modale de confirmation d'échange n'a pas de
   défilement horizontal possible (modale de taille fixe) : une adresse
   crypto ou un numéro de compte long doit pouvoir se couper sur plusieurs
   lignes, sinon il déborde du cadre. ⚠️ Ne PAS appliquer ça à .table-salacel
   en général : les tableaux avec .table-responsive (listes de transactions,
   admin...) gèrent déjà un contenu large via le défilement horizontal
   standard Bootstrap — overflow-wrap:anywhere y a l'effet inverse de celui
   voulu (le calcul de largeur des colonnes réduit leur largeur "préférée"
   à presque rien, ce qui empêche le défilement et fait éclater chaque
   cellule en texte vertical, lettre par lettre, sur petit écran).
   Régression détectée et corrigée le 21/08/2026, voir Mes transactions. */
#confirmModal td { overflow-wrap: anywhere; }

/* Neutralise les classes Bootstrap sombres codées en dur (ex: journal API) en mode clair */
[data-theme="light"] .bg-dark { background-color: var(--noir-clair) !important; color: var(--texte) !important; border-color: var(--bordure) !important; }
[data-theme="light"] .text-light { color: var(--texte) !important; }
[data-theme="light"] .btn-close-white { filter: none; }

.login-box {
  max-width: 460px;
  margin: 6vh auto;
  background: linear-gradient(145deg, var(--degrade-1), var(--degrade-2));
  border: 1px solid var(--or-fonce);
  border-radius: 16px;
  padding: 2.5rem;
}

/* ---- KYC / dépôt crypto / preuve de paiement ---- */
.deposit-address-box {
  background: var(--champ-bg);
  border: 1px dashed var(--or);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  word-break: break-all;
  font-family: monospace;
  color: var(--or-clair);
}
[data-theme="light"] .deposit-address-box { color: var(--or-fonce); }
.kyc-doc-thumb, .proof-doc-thumb {
  border: 1px solid var(--or-fonce);
  border-radius: 10px;
  max-width: 100%;
  max-height: 260px;
}
.step-locked {
  opacity: 0.55;
  pointer-events: none;
}

/* ---- Suivi visuel de transaction (stepper), voir track.php et
   renderTransactionStepper() dans includes/functions.php ---- */
.tx-stepper-wrap { position: relative; overflow: hidden; }

.tx-stepper {
  display: flex;
  align-items: flex-start;
  margin: 28px 0 6px;
}
.tx-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 0;
}
.tx-step-connector {
  position: absolute;
  top: 27px;
  left: calc(-50% + 27px);
  right: calc(50% + 27px);
  height: 3px;
  background: var(--bordure);
  z-index: 0;
}
.tx-step:first-child .tx-step-connector { display: none; }
.tx-step-connector-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--or-fonce), var(--or));
  transition: width 0.7s cubic-bezier(.4,0,.2,1);
}
.tx-step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--noir);
  border: 2px solid var(--bordure);
  color: var(--texte-secondaire);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.tx-step.done .tx-step-circle {
  background: var(--or);
  border-color: var(--or);
  color: var(--texte-sur-or);
  animation: txStepPopIn 0.5s cubic-bezier(.34,1.56,.64,1);
}
.tx-step.current .tx-step-circle {
  background: rgba(212,175,55,0.14);
  border-color: var(--or);
  color: var(--or);
  animation: txStepPulse 1.8s ease-out infinite;
}
.tx-step.failed .tx-step-circle {
  background: rgba(229,83,75,0.14);
  border-color: var(--danger);
  color: var(--danger);
}
.tx-step-label {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texte-secondaire);
  line-height: 1.25;
  max-width: 110px;
}
.tx-step.done .tx-step-label, .tx-step.current .tx-step-label { color: var(--texte); }
.tx-step.current .tx-step-label { color: var(--or); }
.tx-step.failed .tx-step-label { color: var(--danger); }

@keyframes txStepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes txStepPopIn {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.tx-step-info { text-align: center; margin: 20px 0 4px; }
.tx-step-info-count {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--or);
  font-weight: 700;
  margin-bottom: 4px;
}
.tx-step-info-count.failed { color: var(--danger); }
.tx-step-info-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.tx-step-info-desc { color: var(--texte-secondaire); font-size: 0.88rem; }

.tx-confetti-piece {
  position: absolute;
  top: 36px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  animation: txConfettiBurst 1.1s ease-out forwards;
}
@keyframes txConfettiBurst {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-step-circle, .tx-confetti-piece,
  .market-flash-up, .market-flash-down, .market-live-dot,
  .urgent-ticker-label, .urgent-ticker-content { animation: none !important; }
}

/* ---- Responsive : vertical sur mobile (leçon du 21/08 : toujours tester
   plusieurs largeurs, pas juste desktop/mobile) ---- */
@media (max-width: 560px) {
  .tx-stepper { flex-direction: column; align-items: stretch; gap: 0; }
  .tx-step { flex-direction: row; align-items: center; text-align: left; padding: 6px 0; }
  .tx-step-connector {
    position: absolute;
    top: -6px;
    bottom: calc(50% + 26px);
    left: 25px;
    right: auto;
    width: 3px;
    height: auto;
  }
  .tx-step-connector-fill { width: 100%; height: 0%; transition: height 0.7s cubic-bezier(.4,0,.2,1); }
  .tx-step-label { margin-top: 0; margin-left: 14px; max-width: none; text-align: left; }
}

/* =========================================================
   Ajustements responsive mobile (petits écrans)
   ========================================================= */

/* Les groupes de boutons (filtres admin) ne doivent jamais forcer
   un débordement horizontal de la page sur petit écran. */
.btn-group { flex-wrap: wrap; }
.btn-group > .btn { flex: 0 0 auto; }

/* Carte de connexion / inscription / maintenance : sur mobile, les boutons
   flottants (langue, thème) sont en position fixe en haut à droite ; on
   laisse assez de marge en haut pour qu'ils ne chevauchent jamais le
   contenu de la carte, et on réduit le padding pour les petits écrans. */
@media (max-width: 575.98px) {
  .login-box {
    max-width: 100%;
    margin: 84px 14px 24px;
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
  }
  .exchange-box { border-radius: 14px; }
  .stat-card .stat-value { font-size: 1.5rem; }
  .table-salacel { font-size: 0.85rem; }
  .urgent-ticker-label { font-size: 0.7rem; padding: 0.6rem 0.7rem; }
  h1.fw-bold { font-size: 1.6rem; }
}

/* Évite qu'une longue adresse crypto ou un long libellé ne fasse déborder
   les petites cartes sur mobile (drapeaux, logos + texte). */
@media (max-width: 400px) {
  .login-box { padding: 1.5rem 1rem; }
}

/* =========================================================================
   Design "app mobile" de l'accueil (carte héros, puces de taux, actions
   rapides, barre de navigation basse). La barre de navigation basse et les
   ajustements associés ne s'affichent qu'en dessous de 767.98px : sur
   ordinateur, le site garde son menu classique en haut (voir includes/
   header.php), seule l'identité visuelle (cartes dorées) est partagée.
   ========================================================================= */

.app-hero-card {
  border-radius: 20px;
  padding: 28px 26px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
.app-hero-card-guest {
  background: linear-gradient(135deg, var(--or-fonce) 0%, var(--or) 55%, var(--or-clair) 100%);
}
.app-hero-card-guest .app-hero-title { color: #111; }
.app-hero-card-guest .app-hero-title .text-or { color: #111 !important; text-decoration: underline; text-decoration-color: rgba(17,17,17,0.35); }
.app-hero-card-guest .app-hero-subtitle { color: rgba(17,17,17,0.75); }
.app-hero-card-user {
  background: linear-gradient(160deg, var(--degrade-1), var(--degrade-2));
  border: 1px solid var(--or-fonce);
}
.app-hero-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; text-wrap: balance; }
.app-hero-subtitle { font-size: 0.92rem; color: var(--texte-secondaire); margin-bottom: 14px; }
.app-hero-rate { font-size: 0.85rem; font-weight: 600; color: var(--or-clair); margin-bottom: 4px; }
.app-hero-card-guest .app-hero-rate { color: rgba(17,17,17,0.8); }
.app-hero-greeting { font-size: 0.85rem; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app-hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: #111111; color: #F4E5B2 !important;
  font-weight: 600; border-radius: 12px; padding: 12px 20px;
  text-decoration: none;
}
.app-hero-cta:hover { color: var(--or) !important; }

.rate-chip-row { display: flex; overflow-x: auto; gap: 8px; padding: 16px 2px 4px; scrollbar-width: none; }
.rate-chip-row::-webkit-scrollbar { display: none; }
.rate-chip-row .rate-pill { flex-shrink: 0; white-space: nowrap; }

.quick-actions-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0 8px; }
.quick-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; color: inherit; text-decoration: none;
  padding: 0; cursor: pointer; font-family: inherit;
}
.quick-action-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(212,175,55,0.12); border: 1px solid var(--or-fonce); color: var(--or-clair);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
[data-theme="light"] .quick-action-icon { color: var(--or-fonce); }
.quick-action-label { font-size: 0.68rem; color: var(--texte-secondaire); text-align: center; }

/* ---- Barre de navigation basse façon app (mobile uniquement) ---- */
.app-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background-color: var(--noir-clair);
  border-top: 1px solid var(--or-fonce);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.app-bottom-nav-inner { display: flex; align-items: center; justify-content: space-around; }
.app-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--texte-secondaire); text-decoration: none; font-size: 0.64rem; font-weight: 600;
}
.app-bottom-nav a i { font-size: 1.15rem; }
.app-bottom-nav a.active { color: var(--or); }

@media (max-width: 767.98px) {
  :root { --bottomnav-h: 74px; }
  .app-bottom-nav { display: block; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .chat-fab { bottom: calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom)); }
  .chat-panel { bottom: calc(var(--bottomnav-h) + 82px + env(safe-area-inset-bottom)); }
  .pwa-install-btn { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); }
  .pwa-ios-hint { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); }
  .app-hero-card { padding: 24px 20px; border-radius: 18px; }
  .app-hero-title { font-size: 1.4rem; }
}

/* Sur tablette/ordinateur, la barre basse disparaît (menu classique en
   haut) : la carte héros et les actions rapides restent alignées sur la
   largeur du calculateur juste en dessous plutôt que d'étirer sur toute
   la largeur du conteneur. */
@media (min-width: 768px) {
  .app-hero-card, .rate-chip-row, .quick-actions-row {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}