/* ------------------------------------------------------------------ *
 *  custom.css — CSS brut, hors périmètre Tailwind uniquement.
 *
 *  Historique : ce fichier contenait des dizaines de règles `!important`
 *  qui forçaient la police, réécrivaient les couleurs indigo/violet en
 *  bleu et re-déclaraient à la main des utilitaires `md:*`. Tout ça est
 *  désormais géré proprement dans tailwind.config.js + input.css.
 *  On ne garde ici que ce que Tailwind ne fait pas : accessibilité.
 * ------------------------------------------------------------------ */

/* Anneau de focus visible au clavier (souris = pas d'anneau).
   Couleur = celle du texte (pas de bleu imposé). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Halo dégradé décoratif derrière les sections héros */
.section-glow {
  background-image:
    radial-gradient(48rem 22rem at 78% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(40rem 20rem at -5% 30%, rgba(96, 165, 250, 0.09), transparent 60%);
}
.dark .section-glow {
  background-image:
    radial-gradient(48rem 22rem at 78% -10%, rgba(37, 99, 235, 0.18), transparent 60%),
    radial-gradient(40rem 20rem at -5% 30%, rgba(37, 99, 235, 0.12), transparent 60%);
}

/* Motif de points léger */
.dot-grid {
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 16px 16px;
  color: #cbd5e1;
}
.dark .dot-grid { color: #334155; }

/* Navigation du tableau de bord (sidebar) */
.dash-nav a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .dash-nav a { color: #9ca3af; }
.dash-nav a:hover { background: #f3f4f6; color: #111827; }
.dark .dash-nav a:hover { background: #1f2937; color: #f9fafb; }
.dash-nav a.is-active,
.dark .dash-nav a.is-active { background: #2563eb; color: #fff; }

/* Navbar transparente au-dessus d'un hero plein cadre (page de recherche),
   tant qu'on n'a pas scrollé. Repasse en solide via .nav-solid (navbar.html). */
body.page-hero #site-navbar {
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
body.page-hero #site-navbar:not(.nav-solid) {
  background-color: transparent !important;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Barre du haut uniquement (pas le menu mobile déroulant, qui a son
   propre fond) : texte blanc, lisible sur la photo. */
body.page-hero #site-navbar:not(.nav-solid) :is(a, span, select, button):not(#register-dropdown-btn):not(#mobile-menu):not(#mobile-menu *) {
  color: #fff;
}
/* Survol : pastille blanche translucide, le texte RESTE blanc
   (avant : texte bleu foncé sur fond bleu très clair = illisible). */
body.page-hero #site-navbar:not(.nav-solid) :is(a, button):not(#register-dropdown-btn):not(#mobile-menu *):hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .16) !important;
}
body.page-hero #site-navbar:not(.nav-solid) select {
  border-color: rgba(255, 255, 255, .5);
  background-color: transparent;
}
body.page-hero #site-navbar:not(.nav-solid) button:not(#register-dropdown-btn):not(#mobile-menu *) {
  border-color: rgba(255, 255, 255, .45);
}

/* Respecte la préférence système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}