/* ═══════════════════════════════════════════════════
   Vigilus Facilities — CSS principal
   Brand red  : #be1933
   Brand blue : #17a2e0
   ═══════════════════════════════════════════════════ */

:root {
    --red:      #be1933;
    --red-dk:   #9e1528;
    --red-lt:   #fdf3f5;
    --blue:     #18a4e3;
    --blue-dk:  #1182b8;
    --blue-lt:  #eaf7fd;
    --dark:     #09131f;
    --dark-2:   #0e1f33;
}

/* ── Scroll & focus ─────────────────────────────── */
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Dark bg utilities ──────────────────────────── */
.bg-dark-900  { background-color: var(--dark); }
.bg-dark-800  { background-color: var(--dark-2); }
.from-dark-900 { --tw-gradient-from: var(--dark); }
.from-dark-800 { --tw-gradient-from: var(--dark-2); }
.to-dark-900   { --tw-gradient-to:   var(--dark); }
.to-dark-800   { --tw-gradient-to:   var(--dark-2); }
.text-dark-900 { color: var(--dark); }

/* ── Blue light section background ─────────────── */
.bg-blue-lt { background-color: var(--blue-lt); }
.bg-red-lt  { background-color: var(--red-lt); }

/* ═══════════════ GRADIENT ANIMATION ═══════════════ */
@keyframes gradShift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
@keyframes gradShiftH {
    0%, 100% { background-position: 0% center; }
    50%       { background-position: 100% center; }
}

/* ── Bouton solide rouge brand ── */
.btn-gradient {
    background-color: var(--red);
    color: #fff !important;
    transition: background-color .2s, transform .15s, box-shadow .2s;
}
.btn-gradient:hover {
    background-color: var(--red-dk);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(190,25,51,.35);
}

/* ── Bande gradient marque (rouge → noir → bleu) animée ── */
@keyframes heroShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes blobFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(4%, -6%) scale(1.08); }
    66%  { transform: translate(-5%, 4%) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes blobFloat2 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-6%, 5%) scale(1.12); }
    66%  { transform: translate(4%, -4%) scale(0.92); }
    100% { transform: translate(0, 0) scale(1); }
}
.band-gradient {
    position: relative;
    background: linear-gradient(125deg,
        #be1933 0%, #8a0f23 18%,
        #09131f 45%, #0a2540 65%,
        #18a4e3 100%);
    background-size: 250% 250%;
    animation: heroShift 14s ease infinite;
    overflow: hidden;
}
.band-gradient::before,
.band-gradient::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
}
.band-gradient::before {
    width: 60%;
    padding-bottom: 60%;
    top: -15%;
    left: -10%;
    background: radial-gradient(ellipse, rgba(190,25,51,.55) 0%, transparent 65%);
    animation: blobFloat 10s ease-in-out infinite;
}
.band-gradient::after {
    width: 50%;
    padding-bottom: 50%;
    bottom: -20%;
    right: -8%;
    background: radial-gradient(ellipse, rgba(24,164,227,.50) 0%, transparent 65%);
    animation: blobFloat2 13s ease-in-out infinite;
}

/* ── Barre top du navbar ────────────────────────── */
.top-gradient-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--red) 0%, var(--blue) 50%, var(--red) 100%);
    background-size: 200% auto;
    animation: gradShiftH 5s linear infinite;
}

/* ── Icône ISO badge ────────────────────────────── */
.iso-icon-grad {
    background: linear-gradient(135deg, var(--red), var(--blue));
}

/* ── Texte en dégradé ───────────────────────────── */
.text-grad {
    background: linear-gradient(135deg, var(--red), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Ligne accent animée sous les titres ─────────── */
.accent-line {
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--red), var(--blue));
    background-size: 200% auto;
    animation: gradShiftH 4s linear infinite;
    margin-bottom: 1rem;
}

/* ── Logo slider ────────────────────────────────── */
@keyframes logo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.logo-marquee                { animation: logo-scroll 40s linear infinite; }
.logo-marquee:hover          { animation-play-state: paused; }

/* ── Line clamp ─────────────────────────────────── */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Prose (blog) ───────────────────────────────── */
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight:800; color:#111827; margin-top:1.5em; margin-bottom:.5em; }
.prose p  { color:#4b5563; line-height:1.8; margin-bottom:1em; }
.prose ul { list-style-type:disc; padding-left:1.5rem; margin-bottom:1em; }
.prose ul li { color:#4b5563; margin-bottom:.25em; }
.prose a  { color:var(--blue); text-decoration:underline; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--red), var(--blue));
    border-radius: 3px;
}

/* ── Animations page ────────────────────────────── */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp .6s ease-out forwards; }
main { animation: fadeInUp .4s ease-out; }

/* ── Toast ──────────────────────────────────────── */
#messages-container > div { animation: fadeInUp .3s ease-out; }

/* ── Forms ──────────────────────────────────────── */
select option { background: white; color: #374151; }

/* ═══════════ OVERRIDES TAILWIND (rouge → brand) ═══ */
/* Ces overrides assurent la cohérence sur tout le site */

/* Accents bleus explicites */
.text-brand-blue  { color: var(--blue) !important; }
.bg-brand-blue    { background-color: var(--blue) !important; }
.border-brand-blue{ border-color: var(--blue) !important; }
.text-brand-red   { color: var(--red) !important; }
.bg-brand-red     { background-color: var(--red) !important; }