/* Utility classes : remplacent les attributs style="" inline pour permettre une CSP stricte sans 'unsafe-inline'. */

.is-hidden-init { visibility: hidden; }
.fade-controlled { opacity: 0; transition: opacity 0.5s ease; }

.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

.bg-success    { background: var(--success); }
.bg-error      { background: var(--error); }
.bg-warning    { background: var(--warning); }
.bg-text-muted { background: var(--text-muted); }

.bg-stripes-light {
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 3px, transparent 3px, transparent 7px);
}
.bg-stripes-dark {
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 3px, transparent 3px, transparent 7px);
}

.flex-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.flex-row-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.no-pad-top      { padding-top: 0 !important; }
.tight-section   { padding-top: 0 !important; padding-bottom: var(--spacing-2xl) !important; }

/* Tooltip dots — couleurs dynamiques en classes au lieu d'inline pour CSP */
.tip-dot.dot-success { background: var(--success); }
.tip-dot.dot-error   { background: var(--error); }
.tip-dot.dot-warning { background: var(--warning); }
.tip-dot.dot-muted   { background: var(--text-muted); }
.tip-dot.dot-unknown { background: rgba(255,255,255,0.25); }
.text-muted-inline   { color: var(--text-muted); }

.alert-icon          { margin-right: 0.4rem; font-size: 0.75rem; }
.tip-row-spaced      { margin-bottom: 0.15rem; }

/* Bannière Mevastream */
.logo.logo2,
.logo2 {
  width: auto !important;
  height: 44px !important;
  max-width: 280px;
  display: flex;
  align-items: center;
}
.logo.logo2 img,
.logo2 img,
.logo.logo2 picture,
.logo.logo2 picture img {
  width: auto !important;
  height: 44px !important;
  max-width: 280px;
  object-fit: contain;
  display: block;
}
a.footer-logo {
  display: inline-flex;
  align-items: center;
}
a.footer-logo img {
  height: 36px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
.fade-in, .fade-in-up { opacity: 1; }