/**
 * Règles CSS partagées par toutes les pages de public/*.html — inclus via
 * <link rel="stylesheet" href="shared.css"> juste avant le <style> propre à
 * chaque page (qui peut donc toujours surcharger ces règles si besoin).
 * Centralise ici tout ce qui doit s'appliquer identiquement sur tout le
 * site, pour ne plus avoir à dupliquer les mêmes règles dans chacun des
 * fichiers .html.
 */

/* Couleur de sélection de texte = rouge du site, au lieu du bleu par défaut
   du navigateur — #c2332f (le même rouge que --discord, plus foncé que
   --accent/#fb5452) pour rester lisible sans être trop clair/criard. */
::selection{
  background:#c2332f;
  color:#fff;
}
::-moz-selection{
  background:#c2332f;
  color:#fff;
}

/* Badge "BÊTA" à côté du nom du bot dans le logo (voir .logo .bot-name dans
   chaque page) — repose sur --accent/--accent-soft si la page les définit,
   sinon un rouge de repli identique à celui du site. */
.beta-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent, #fb5452);
  background:var(--accent-soft, rgba(251,84,82,.14));
  border:1px solid var(--accent, #fb5452);
  line-height:1;
}

/* Rond de chargement centré (voir session.js) — utilise --bg/--accent si la
   page les définit (couleurs du site), sinon une couleur de repli. */
#pypoLoadingOverlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg, #0d0808);
  opacity:0;pointer-events:none;
  /* Fondu appliqué uniquement à la DISPARITION (retrait de .show, qui
     retombe sur cette règle) — l'APPARITION doit être instantanée (voir
     .show ci-dessous, transition:none) : avec un fondu dans les deux sens,
     le contenu de la page se voyait furtivement "à travers" l'overlay
     pendant les ~300ms d'apparition. */
  transition:opacity .3s ease;
}
#pypoLoadingOverlay.show{opacity:1;pointer-events:auto;transition:none;}
#pypoLoadingOverlay .pypo-loading-content{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
#pypoLoadingOverlay .pypo-loading-logo{
  width:52px;height:52px;display:block;
  filter:drop-shadow(0 0 14px rgba(251,84,82,.55));
  animation:pypo-logo-pulse 1.6s ease-in-out infinite;
}
#pypoLoadingOverlay .pypo-spinner{
  width:40px;height:40px;border-radius:50%;
  border:4px solid var(--border, #3a1c1c);
  border-top-color:var(--accent, #fb5452);
  animation:pypo-spin .8s linear infinite;
}
#pypoLoadingOverlay .pypo-loading-text{
  color:var(--text-dim, #a88a89);font-size:13px;font-weight:600;
  letter-spacing:.3px;
}
@keyframes pypo-logo-pulse{
  0%, 100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.08);opacity:.85;}
}
@keyframes pypo-spin{
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  #pypoLoadingOverlay .pypo-spinner{animation-duration:1.6s;}
  #pypoLoadingOverlay .pypo-loading-logo{animation:none;}
}

/* Indique au navigateur que TOUTE la page supporte le thème sombre — sans
   ça, un champ <input type="date"> avec color-scheme:dark individuellement
   ne suffit pas toujours à faire passer le calendrier natif (popup) en
   sombre, il continue de suivre le color-scheme de la page entière. Limite
   connue : c'est la fenêtre du calendrier elle-même (rendue par le
   système/navigateur, pas par nous) — on obtient un thème sombre cohérent,
   mais pas exactement le rouge du site, ce composant natif n'expose pas
   plus de personnalisation que ça via CSS. */
:root{
  color-scheme:dark;
}

/* Cadre plus visible pour les cartes ".field-group" (formulaires de config)
   — le rouge du site en bordure semi-transparente + une ombre portée
   donnent un contour net, là où --border seul (quasi la même teinte que le
   fond de la carte) le rendait presque invisible. "body X" plutôt que "X"
   seul : chaque page redéfinit .field-group dans son propre <style> chargé
   APRÈS ce fichier, donc à spécificité égale sa règle gagnerait sinon,
   peu importe l'ordre — "body .field-group" (2 sélecteurs) passe devant. */
body .field-group{
  border-color:rgba(251,84,82,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
body .field-group input[type="text"],
body .field-group input[type="number"],
body .field-group input[type="date"],
body .field-group select,
body .cs-trigger{
  border-color:rgba(255,255,255,.14);
}

/* Barre de défilement aux couleurs du site (au lieu de la barre grise par
   défaut du navigateur) — s'appuie sur les variables déjà définies par
   chaque page (--bg/--border/--accent, voir le :root de chaque <style>),
   donc reste cohérente même si une page a une teinte légèrement différente.
   ::-webkit-scrollbar sans sélecteur ciblé s'applique à TOUT élément
   défilant (page entière, sidebar admin, modales, listes de logs...). */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--bg, #0d0808);
}
::-webkit-scrollbar-thumb{
  background:var(--border, #3a1c1c);
  border-radius:999px;
  border:2px solid var(--bg, #0d0808);
}
::-webkit-scrollbar-thumb:hover{
  background:var(--accent, #fb5452);
}
::-webkit-scrollbar-corner{
  background:var(--bg, #0d0808);
}
html{
  scrollbar-color:var(--border, #3a1c1c) var(--bg, #0d0808);
  scrollbar-width:thin;
}

/* ---- Menus déroulants "maison" (voir custom-select.js) ----
   Remplace la liste native d'un <select> (bleue, non stylable en CSS) par
   un menu maison. Le <select> d'origine reste dans le DOM, juste rendu
   invisible ici — .cs-trigger reprend volontairement le même habillage que
   les .field select existants (fond, bordure, rayon) pour ne rien changer
   à l'état fermé, seule la LISTE ouverte change vraiment. */
.cs-wrap{position:relative;display:block;width:100%;}
.cs-native{position:absolute;inset:0;opacity:0;pointer-events:none;}
.cs-trigger{
  display:block;width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-size:14px;font-family:inherit;text-align:left;
  padding:10px 34px 10px 12px;cursor:pointer;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s ease;
}
.cs-trigger::after{
  content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
  transition:border-color .15s ease;
}
.cs-trigger:hover{border-color:#5a3231;}
.cs-wrap.cs-open .cs-trigger{border-color:var(--accent);}
.cs-wrap.cs-open .cs-trigger::after{border-color:var(--accent);}
.cs-trigger.cs-placeholder{color:var(--text-dim);}
.cs-trigger:disabled{opacity:.45;cursor:not-allowed;}

.cs-popup{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;
  padding:6px;max-height:260px;overflow-y:auto;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.cs-option{
  display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--text);font-size:13.5px;font-family:inherit;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-option:hover{background:rgba(255,255,255,.06);}
.cs-option.cs-selected{background:var(--accent-soft);color:var(--accent);font-weight:600;}

/* Ligne "saisir une valeur" en haut du popup des menus number-select.js —
   la liste de paliers proposée reste une grille de valeurs prédéfinies,
   mais on doit toujours pouvoir taper une valeur exacte à la main. */
.cs-custom-row{
  display:flex;gap:6px;padding:2px 2px 8px;margin-bottom:6px;
  border-bottom:1px solid var(--border);
  position:sticky;top:-6px;background:var(--bg-elev);z-index:1;
}
.cs-custom-input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:13px;font-family:inherit;padding:7px 8px;
}
.cs-custom-input:focus{outline:none;border-color:var(--accent);}
.cs-custom-btn{
  flex-shrink:0;background:var(--accent);border:none;border-radius:7px;color:#fff;
  font-size:12.5px;font-weight:700;padding:0 12px;cursor:pointer;
}
.cs-custom-btn:hover{opacity:.9;}

/* ---- Téléphone / tablette (s'applique à toutes les pages) ----
   La grande majorité des pages public/*.html partagent le même squelette
   (header + main, .page-head, .save-bar, .stat-grid, .user-chip...) copié
   d'une page à l'autre — donc des règles génériques ici couvrent presque
   tout le site sans avoir à toucher chaque fichier individuellement.
   Sélecteurs en "body X" plutôt que "X" seul : chaque page redéfinit ces
   mêmes éléments dans son propre <style> chargé APRÈS ce fichier, donc à
   spécificité égale la règle de la page gagnerait sinon malgré le @media
   actif (specificité "body X" = 2 éléments > "X" = 1 élément, donc gagne
   toujours, peu importe l'ordre des règles). */
body{overflow-x:hidden;}
img, svg{max-width:100%;}

@media (max-width: 900px){
  body header{padding-left:20px;padding-right:20px;}
  body main{padding-left:20px;padding-right:20px;}
}

@media (max-width: 560px){
  body header{padding-left:14px;padding-right:14px;gap:8px;}
  body .logo .bot-name{font-size:15px;}
  body .beta-badge{font-size:8.5px;padding:1px 5px;}
  body .user-chip{padding-right:8px;}
  body .user-chip .names{max-width:118px;overflow:hidden;}
  body .user-chip .uname,
  body .user-chip .utag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body main{padding-left:14px;padding-right:14px;}
  body .page-head{flex-wrap:wrap;row-gap:10px;}
  body .save-bar{flex-wrap:wrap;row-gap:10px;}
  body .save-bar .save-btn{width:100%;}
}

/* Pied de page — liens légaux (Confidentialité/CGU), injecté sur toutes les
   pages public/*.html juste avant </body>. Pas de "body X" ici : .site-footer
   n'est défini nulle part ailleurs, aucun risque de collision de spécificité. */
.site-footer{
  max-width:760px;margin:40px auto 0;padding:20px 24px 32px;
  text-align:center;font-size:12px;color:var(--text-dim, #a88a89);
}
.site-footer a{
  color:var(--text-dim, #a88a89);text-decoration:none;
  transition:color .15s ease;
}
.site-footer a:hover{color:var(--accent, #fb5452);}
.site-footer .footer-sep{margin:0 8px;opacity:.5;}