/* ============================================================
   MODERN.CSS — petites touches d'interface, purement additives.
   Aucune couleur/police n'est redéfinie ici : tout s'appuie sur les
   variables déjà déclarées par index.css / milsim.css, donc ce fichier
   fonctionne à l'identique sur les deux thèmes (ambre / vert tactique).
   Chargé après la feuille de style principale sur chaque page.
   ============================================================ */

/* Défilement doux (ancres, retour en haut de liste…) */
html{ scroll-behavior:smooth; }
/* Le menu mobile (nav.tabs) glisse depuis la droite via
   transform:translateX(100%) quand il est fermé : sans cette ligne, la
   plupart des navigateurs comptent quand même sa boîte d'origine (avant
   transform) dans la largeur défilable de la page, ce qui ajoute un
   espace vide à droite et élargit toute la page horizontalement dès que
   le menu existe dans le DOM (visible ou non). */
html,body{ overflow-x:hidden; }

/* Easing plus doux sur les transitions déjà existantes */
button,.btn,.panel,.card,.mode-card,.chip,tr,input,select,textarea{
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
button,.btn{ transition-duration:.18s; position:relative; overflow:hidden; }
tr{ transition:background-color .15s ease; }
/* .notif-bell affiche un badge de compteur en négatif (top:-6px; right:-6px)
   à l'intérieur du bouton : il serait rogné par l'overflow:hidden ci-dessus. */
.notif-bell{ overflow:visible; }

/* Léger relief au survol des boutons et lignes de tableau — seulement sur
   les pointeurs précis (souris), pour ne pas laisser un état "hover" collé
   après un tap sur mobile/tactile. */
@media (hover:hover) and (pointer:fine){
  button:hover,.btn:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.35); }
  button.primary:hover{ box-shadow:0 3px 14px rgba(232,163,61,.35); }
  /* Panels/cards réellement cliquables (le site leur ajoute déjà cursor:pointer
     en inline via onclick) gagnent une profondeur au survol. */
  .panel[onclick]:hover,.card[onclick]:hover,.mode-card[onclick]:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.4);
    border-color:var(--accent-dim);
  }
  .chip.select:hover{ transform:translateY(-1px); }
}
button:active,.btn:active{ transform:translateY(0) scale(.98); }
.panel[onclick],.card[onclick],.mode-card[onclick]{
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease;
}

/* Toast : glissement + fondu au lieu d'un simple fondu sec */
.toast{
  transform:translate(-50%, 10px);
  transition:opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.toast.show{ transform:translate(-50%, 0); }

/* Barres d'onglets secondaires (.tab-switch : "Individuel / Association /
   Global / Fair / Saisons / Comparer / Badges" en Statistiques, vues du
   Calendrier…) : sur petit écran elles ne rentrent pas et se retrouvaient
   écrasées (flex-shrink par défaut). On les transforme en rangée qui
   défile horizontalement, comme des chips, sans jamais comprimer le
   texte des boutons. Sans effet sur desktop quand tout tient déjà. */
.tab-switch{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-bottom:2px; /* évite que le focus-ring des boutons soit rogné */
}
.tab-switch::-webkit-scrollbar{ display:none; }
.tab-switch button{ flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; }

/* Tableaux — refonte du responsive.
   assets/js/table-scroll.js enveloppe automatiquement chaque <table> dans
   ce conteneur au moment où elle apparaît dans le DOM (voir ce fichier
   pour le pourquoi). Ça remplace l'ancien hack table{display:block} qui
   cassait l'alignement des colonnes sur mobile.
   La colonne des noms (th/td.name-col, déjà utilisée par le site un peu
   partout) reste fixée à gauche pendant que le reste défile. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-scroll table{ width:100%; }
.table-scroll th,.table-scroll td{ white-space:nowrap; }
.table-scroll th.name-col,.table-scroll td.name-col{
  position:sticky; left:0;
  box-shadow:2px 0 6px -2px rgba(0,0,0,.5);
}
.table-scroll td.name-col{ z-index:2; background:var(--panel); }
.table-scroll tr:nth-child(even) td.name-col{ background:#1d2019; } /* panel + le même léger voile que le zébrage des autres colonnes, en dur car un fond sticky doit rester opaque */
.table-scroll th.name-col{ z-index:3; background:var(--panel3); }

/* Colonnes resserrées : les tableaux (surtout ceux avec beaucoup de
   colonnes de stats) prenaient plus de place que nécessaire et
   débordaient de l'écran sur mobile alors que le contenu (chiffres,
   libellés courts) tient très bien en plus compact. */
.table-scroll th,.table-scroll td{ padding:6px 7px; font-size:12.5px; }
.table-scroll th{ font-size:9.5px; padding:7px 7px; }
@media (max-width:760px){
  .table-scroll th,.table-scroll td{ padding:6px 6px; font-size:12px; }
  .table-scroll th{ font-size:9px; }
}

/* Ligne "c'est toi" dans les classements (.leaderboard-row-me) : l'ancien
   style dessinait un outline sur le <tr>, qui rend mal sur un tableau à
   bordures fusionnées (contour tronqué/mal aligné, surtout avec la
   colonne des noms fixée juste au-dessus). Remplacé par un bandeau
   teinté + une bordure d'accent sur la colonne des noms — le même motif
   que les conversations/onglets actifs ailleurs sur le site. */
.table-scroll .leaderboard-row-me td{ background:rgba(232,163,61,.10); }
.table-scroll .leaderboard-row-me td.name-col{
  background:linear-gradient(rgba(232,163,61,.16), rgba(232,163,61,.16)), var(--panel);
  border-left:3px solid var(--accent);
  color:var(--accent);
  padding-left:5px; /* compense les 3px de bordure pour garder le texte aligné avec les lignes voisines */
}
.table-scroll .leaderboard-row-me:hover td{ background:rgba(232,163,61,.15); }

/* Bottom-nav / menu "⋯ Plus" : verre dépoli discret.
   NB : pas sur .topbar — nav.tabs (le menu latéral mobile) et son fond
   cliquable (.nav-scrim) sont en position:fixed et enfants directs de
   .topbar ; un backdrop-filter sur .topbar en ferait le point d'ancrage
   de ces enfants "fixed" (au lieu de l'écran), ce qui les empêche de
   suivre le défilement et réduit la zone cliquable du fond à la seule
   hauteur du bandeau du haut. */
.bottom-nav,.nav-more-panel{
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
}

/* Modale : fond flouté + léger zoom d'ouverture */
.modal-bg{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
@media (prefers-reduced-motion: no-preference){
  .modal-bg.show .modal{ animation:modalPop .2s cubic-bezier(.2,.8,.3,1.1); }
}
@keyframes modalPop{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }

/* Scrollbar thématisée (Chromium/WebKit + Firefox) */
*{ scrollbar-width:thin; scrollbar-color:var(--line) var(--panel); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; border:2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

/* Effet "ripple" au clic (assets/js/ripple.js ajoute déjà un <span class="ripple-el">
   sur pointerdown, mais aucun style ne lui donnait vie jusqu'ici). */
.ripple-el{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.35); transform:scale(0); opacity:.6;
  animation:rippleAnim .5s ease-out;
}
button.primary .ripple-el{ background:rgba(20,22,8,.35); }
@keyframes rippleAnim{ to{ transform:scale(2.2); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  button:hover,.btn:hover,.panel[onclick]:hover,.card[onclick]:hover,.mode-card[onclick]:hover,.chip.select:hover{
    transform:none; box-shadow:none;
  }
}

/* ============================================================
   Aide contextuelle (.help-tip) — composant créé par
   assets/js/help-tooltip.js (pastille "?" + bulle au survol/focus/clic).
   S'appuie uniquement sur les variables existantes des deux thèmes.
   ============================================================ */
.help-tip{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-left:6px; vertical-align:middle; flex:none;
  border:1px solid var(--line); border-radius:50%;
  background:var(--panel2); color:var(--accent);
  font-size:10.5px; font-style:normal; font-weight:600; line-height:1; font-family:inherit;
  cursor:help; user-select:none; -webkit-tap-highlight-color:transparent;
}
.help-tip:hover,.help-tip:focus,.help-tip.open{ border-color:var(--accent); }
.help-tip:focus{ outline:none; }
.help-tip-bubble{
  display:none; position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%); width:max-content; max-width:min(280px, calc(100vw - 24px));
  background:var(--panel3); color:inherit; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; font-size:12px; line-height:1.5; text-align:left; font-weight:400;
  white-space:normal; letter-spacing:normal; text-transform:none;
  box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:120;
}
/* Petite flèche sous la bulle, bordure + intérieur */
.help-tip-bubble::before,.help-tip-bubble::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--line);
}
.help-tip-bubble::after{ margin-top:-2px; border-top-color:var(--panel3); }
.help-tip:hover .help-tip-bubble,
.help-tip:focus .help-tip-bubble,
.help-tip.open .help-tip-bubble{ display:block; }

/* ============================================================
   Bandeau "Mode démo" (composant posé par auth-api.js /
   boot-landing.js quand le compte courant est le compte de
   démonstration). Dismissible, aux couleurs du thème courant.
   ============================================================ */
.demo-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 14px; margin:0 0 10px; font-size:12px; line-height:1.45;
  background:rgba(232,163,61,.10); border:1px solid var(--accent-dim); border-radius:8px;
}
.demo-banner b{ color:var(--accent); }
.demo-banner .demo-banner-close{
  background:none; border:none; color:var(--muted2); cursor:pointer;
  font-size:12px; padding:2px 4px; margin-left:auto; flex:none;
}
.demo-banner .demo-banner-close:hover{ color:var(--accent); }

/* ============================================================
   Centre de notifications — séparateur de jour dans la cloche
   plein écran (onglet "Notifications" de l'appli).
   ============================================================ */
.ncenter-day{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted2); margin:16px 0 6px; padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.ncenter-day:first-child{ margin-top:6px; padding-top:0; border-top:none; }

/* ============================================================
   Panel admin « Coûts & capacité » — grille de statistiques
   et états financiers (surplus / déficit).
   ============================================================ */
.stat-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.stat-grid .stat-box{ flex:1 1 150px; min-width:140px; }
.text-good{ color:#22c55e; }
.text-danger{ color:#ef4444; }