/* ------------------------------------------------------------------ *
 *  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, .dash-nav button {
  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;
  width: 100%;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .dash-nav a, .dark .dash-nav button { color: #9ca3af; }
.dash-nav a:hover, .dash-nav button:hover { background: #f3f4f6; color: #111827; }
.dark .dash-nav a:hover, .dark .dash-nav button:hover { background: #1f2937; color: #f9fafb; }
.dash-nav a.is-active,
.dark .dash-nav a.is-active { background: #2563eb; color: #fff; }

/* Sidebar du dashboard dédié (templates/dashboard/base.html) — toujours
   sombre (même en thème clair, comme les outils SaaS type Minea) donc
   pas de variante .dark ici, contrairement à .dash-nav ci-dessus. */
.app-nav a, .app-nav button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
  width: 100%;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav a:hover, .app-nav button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.app-nav a.is-active { background: #2563eb; color: #fff; }

/* Sidebar du dashboard : FIXE (reste à l'écran pendant le scroll du
   contenu) et réductible en icônes seules (#sidebar-toggle-btn,
   static/src/app.js). État persisté dans localStorage comme le thème
   clair/sombre — appliqué avant le 1er rendu (script inline dans
   templates/dashboard/base.html) pour ne pas avoir de flash. */
@media (min-width: 1024px) {
  #app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15rem;
    transition: width 0.15s ease;
  }
  #app-main {
    margin-left: 15rem;
    transition: margin-left 0.15s ease;
  }
  html.sidebar-collapsed #app-sidebar { width: 4.5rem; }
  html.sidebar-collapsed #app-main { margin-left: 4.5rem; }
  html.sidebar-collapsed #app-sidebar .nav-label,
  html.sidebar-collapsed #app-sidebar .brand-label {
    display: none;
  }
  html.sidebar-collapsed #app-sidebar a,
  html.sidebar-collapsed #app-sidebar button {
    justify-content: center;
  }
  html.sidebar-collapsed #sidebar-toggle-btn .sidebar-toggle-icon {
    transform: rotate(180deg);
  }
  /* Ligne logo + bouton réduire : moins de marge pour que les deux
     icônes tiennent dans les 4.5rem de la sidebar réduite. */
  html.sidebar-collapsed #app-sidebar > div:first-child {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.25rem;
  }
}

/* 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-cta-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-cta-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-cta-btn):not(#mobile-menu *) {
  border-color: rgba(255, 255, 255, .45);
}
/* Logo : blanc sur la navbar transparente au-dessus du hero, couleur
   normale (bleu de marque) dès qu'on a scrollé (.nav-solid). */
body.page-hero #site-navbar:not(.nav-solid) #navbar-logo {
  filter: brightness(0) invert(1);
}

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

/* Visite guidée (static/src/tour.js) : l'élément ciblé passe au-dessus du
   fond assombri (z-index) et reçoit un anneau bleu — pas de découpe CSS
   complexe dans l'overlay, juste un z-index plus élevé que lui. */
.clentaro-tour-highlight {
  position: relative;
  z-index: 9999;
  box-shadow: 0 0 0 4px #2563eb;
  border-radius: 0.75rem;
}

/* Animation de chargement de marque : le "C" du logo qui tourne, à la
   place du spinner SVG générique. Image référencée en relatif (ce
   fichier CSS vit dans static/css/, le logo dans static/img/logo/) :
   pas besoin de passer par {% static %}, utilisable aussi bien dans
   les templates que dans le JS statique (search.js). */
@keyframes clentaro-spin {
  to { transform: rotate(360deg); }
}
.spinner-c {
  display: inline-block;
  background-image: url("../img/logo/logo1-clean.1ba782d93d39.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: clentaro-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner-c { animation: none; }
}