/**
 * 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 = bleu du site, au lieu du bleu par défaut
   du navigateur — var(--discord)/#5865f2 (assez saturé/foncé pour rester
   lisible en blanc, contrairement à --accent/#38bdf8, trop clair). */
::selection{
  background:var(--discord, #5865f2);
  color:#fff;
}
::-moz-selection{
  background:var(--discord, #5865f2);
  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;
}

/* Désactive le "text autosizer" de Chrome mobile/Android — sur une page aux
   colonnes plutôt étroites (comme la plupart de celles du site), il gonfle
   automatiquement la taille du texte (et donc tout ce qui en dépend en em)
   au-delà de ce que le CSS précise, uniformément sur toute la page — donne
   l'impression que le site est "zoomé" alors qu'aucune règle CSS ne le dit
   explicitement (invisible dans l'inspecteur sans le savoir). */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* 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;}
}

/* Le groupe de droite (langue/serveur support/connexion Discord — voir
   .header-right dans accueil.html/admin.html) ne rentre pas à côté du logo
   sur téléphone. Passe en grille 2 colonnes plutôt que de laisser le bouton
   de connexion partir hors champ (masqué par body{overflow-x:hidden}
   ci-dessus, donc invisible et inaccessible sans ça) — demandé explicitement :
   nom du bot en haut à gauche, EN/FR juste en dessous (toujours à gauche),
   connexion Discord en haut à droite, serveur support en dessous (toujours à
   droite). .header-right passe en display:contents pour que ses enfants
   deviennent des éléments de grille directs de header, positionnables
   librement avec .logo/.lang-toggle sans changer l'ordre du HTML. */
@media (max-width: 640px){
  body header{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:8px;}
  body .header-right{display:contents;}
  body .logo{grid-column:1;grid-row:1;}
  body .lang-toggle{grid-column:1;grid-row:2;justify-self:start;}
  body #connectZone{grid-column:2;grid-row:1;justify-self:end;}
  body .support-link{grid-column:2;grid-row:2;justify-self:end;}
}

@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;}