/* =============================================================================
   SETRAG BILLETTIQUE — Couche premium
   Raffinement visuel : aurores animées, bordures dégradées, micro-interactions.
   À charger APRÈS setrag.css.
   ============================================================================= */

/* --- Halos animés (aurore équatoriale) ---------------------------------- */
.aurore { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurore i {
  position: absolute; border-radius: 50%; filter: blur(96px); opacity: .24;
  mix-blend-mode: screen; animation: derive 26s ease-in-out infinite alternate;
}
.aurore i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(45,225,252,.55), transparent 68%); }
.aurore i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: -8vw; animation-delay: -8s;
  background: radial-gradient(circle, rgba(201,162,39,.55), transparent 68%); }
.aurore i:nth-child(3) { width: 52vw; height: 42vw; left: 28vw; bottom: -22vw; animation-delay: -15s;
  background: radial-gradient(circle, rgba(0,160,90,.42), transparent 70%); }
@keyframes derive {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3vw,4vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,-3vh,0) scale(.94); }
}
[data-theme="clair"] .aurore i { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .aurore i, .rail-ligne::after, .train-mobile, .balayage { animation: none !important; }
}

/* --- Grain optique très fin --------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.3'/></svg>");
}
[data-theme="clair"] .grain { opacity: .12; }

/* --- Cartes : bordure dégradée et reflet -------------------------------- */
.carte { position: relative; isolation: isolate; }
.carte::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.02) 38%, rgba(201,162,39,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; transition: var(--t);
}
.carte-or::before {
  background: linear-gradient(150deg, rgba(245,217,123,.65), rgba(45,225,252,.28) 55%, rgba(201,162,39,.55));
}
.carte.interactive:hover::before { opacity: 1; }
.carte.interactive:hover { box-shadow: 0 22px 60px rgba(0,0,0,.42); }
.carte-relief::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

/* --- Boutons : brillance au survol -------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  transition: transform .65s cubic-bezier(.22,.8,.3,1);
}
.btn:hover::after { transform: translateX(120%); }
.btn-xl { border-radius: 12px; }

/* --- Indicateurs --------------------------------------------------------- */
.kpi-valeur, .heure, .gros, table.tbl td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.kpi { transition: var(--t); }
.kpi:hover { transform: translateY(-2px); border-color: var(--bordure-2); }
.kpi::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.16), transparent 70%); pointer-events: none;
}

/* --- Titres -------------------------------------------------------------- */
.titre-or { filter: drop-shadow(0 4px 22px rgba(201,162,39,.26)); }
h1 { line-height: 1.06; }
.sur-titre { position: relative; padding-left: 26px; }
.sur-titre::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--or-500), transparent);
}

/* --- Champs -------------------------------------------------------------- */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,162,39,.14), 0 6px 22px rgba(201,162,39,.14);
}

/* --- Carte animée du réseau --------------------------------------------- */
.reseau-carte { width: 100%; height: auto; display: block; overflow: visible; }
.reseau-voie { fill: none; stroke: url(#degradeVoie); stroke-width: 2.6; stroke-linecap: round; }
.reseau-halo { fill: none; stroke: rgba(45,225,252,.14); stroke-width: 13; stroke-linecap: round; }
.reseau-gare { fill: #16273f; stroke: rgba(201,162,39,.7); stroke-width: 1.6; }
.reseau-gare-maj { fill: #E4BC45; stroke: rgba(245,217,123,.95); stroke-width: 2.4; }
.reseau-label { font-size: 10px; fill: #9DB0CE; letter-spacing: .02em; }
.reseau-label-maj { font-size: 12px; fill: #F5D97B; font-weight: 700; }
.train-mobile { filter: drop-shadow(0 0 9px rgba(45,225,252,.95)); }

/* --- Résultats ----------------------------------------------------------- */
.resultat { position: relative; overflow: hidden; }
.resultat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; opacity: 0; transition: var(--t);
  background: linear-gradient(180deg, var(--or-400), var(--cyan));
}
.resultat:hover::before { opacity: 1; }

/* --- Onglets ------------------------------------------------------------- */
.onglet { position: relative; }
.onglet.actif::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--or-500), var(--cyan));
}

/* --- Billet : filigrane -------------------------------------------------- */
.billet::after {
  content: 'SETRAG'; position: absolute; right: -14px; bottom: -24px; pointer-events: none;
  font-size: 5.4rem; font-weight: 900; letter-spacing: -.06em; opacity: .05; color: #fff;
}
.billet-qr { box-shadow: 0 8px 26px rgba(0,0,0,.35); }

/* --- Tableaux ------------------------------------------------------------ */
table.tbl tbody tr { transition: background .16s; }
table.tbl tbody tr:hover { background: rgba(201,162,39,.06); }

/* --- Tunnel de vente : fil d'étapes ------------------------------------- */
.etapes { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.etape { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--texte-faible); }
.etape b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--bordure); font-size: .72rem; }
.etape.faite b { background: rgba(22,199,132,.2); border-color: rgba(22,199,132,.5); color: #5EEAB4; }
.etape.active { color: var(--or-300); }
.etape.active b { background: var(--or-500); color: #10192B; border-color: var(--or-300);
  box-shadow: 0 0 0 4px rgba(201,162,39,.18); }
.etape-lien { flex: 1; min-width: 16px; height: 1px; background: var(--bordure); }

/* --- Barre latérale des applications métier ----------------------------- */
.appli { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral {
  background: rgba(14,26,46,.72); border-right: 1px solid var(--bordure); padding: 1.1rem .8rem;
  backdrop-filter: blur(18px); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
[data-theme="clair"] .lateral { background: rgba(255,255,255,.85); }
.lateral-groupe { margin-top: 1.2rem; }
.lateral-groupe > span { display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-faible); padding: 0 .6rem .4rem; font-weight: 700; }
.lateral a, .lateral button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .55rem .7rem; border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  color: var(--texte-doux); font-family: inherit; font-size: .86rem; transition: var(--t); margin-bottom: 2px;
}
.lateral a:hover, .lateral button:hover { background: var(--surface-2); color: var(--texte); }
.lateral button.actif { background: linear-gradient(90deg, rgba(201,162,39,.2), transparent); color: var(--or-300); font-weight: 600; }
.lateral button.actif::before { content: ''; width: 3px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--or-400), var(--cyan)); margin-left: -.7rem; margin-right: .3rem; }
.zone-travail { padding: 1.4rem 1.6rem 3rem; min-width: 0; }
@media (max-width: 900px) {
  .appli { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--bordure);
    display: flex; gap: .3rem; overflow-x: auto; padding: .6rem; }
  .lateral-groupe { margin: 0; display: flex; gap: .3rem; }
  .lateral-groupe > span { display: none; }
  .lateral button { white-space: nowrap; width: auto; }
  .lateral button.actif::before { display: none; }
}

/* --- Écran de connexion des applications métier ------------------------- */
.ecran-cx { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.boite-cx { width: min(430px, 96vw); }

/* --- Scanner du contrôleur ---------------------------------------------- */
.viseur { position: relative; border-radius: var(--r-m); overflow: hidden; background: #000; aspect-ratio: 4/3; }
.viseur video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viseur-cadre { position: absolute; inset: 14%; border: 2px solid rgba(201,162,39,.85); border-radius: 14px; }
.viseur-cadre::before, .viseur-cadre::after {
  content: ''; position: absolute; left: -2px; right: -2px; height: 2px; background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}
.viseur-cadre::before { top: 0; animation: balayage 2.4s ease-in-out infinite alternate; }
.viseur-cadre::after { display: none; }
@keyframes balayage { from { transform: translateY(0); } to { transform: translateY(calc(72vw * .72 * .001 * 100px)); } }
.verdict { padding: 1.6rem; border-radius: var(--r-l); text-align: center; }
.verdict-ok { background: linear-gradient(160deg, rgba(22,199,132,.26), rgba(22,199,132,.06));
  border: 1px solid rgba(22,199,132,.5); }
.verdict-ko { background: linear-gradient(160deg, rgba(255,77,94,.26), rgba(255,77,94,.06));
  border: 1px solid rgba(255,77,94,.5); }
.verdict-avert { background: linear-gradient(160deg, rgba(255,176,32,.26), rgba(255,176,32,.06));
  border: 1px solid rgba(255,176,32,.5); }
.verdict .symbole { font-size: 3.4rem; line-height: 1; }

/* --- Apparition au défilement ------------------------------------------- */
.revele { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.revele.vu { opacity: 1; transform: none; }

/* --- Scrollbar ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(201,162,39,.4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(201,162,39,.32); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,.55); background-clip: content-box; }

@media (max-width: 980px) {
  #hero-grille, #grille-details { grid-template-columns: 1fr !important; }
  .bandeau-etat { font-size: .68rem; }
}