/* =================================== */
/* SPS Sécurité - Modern Design CSS      */
/* =================================== */

/* === Theme variables (dark par défaut, light au toggle) === */
:root, .dark {
    --c-primary: 10 25 47;
    --c-secondary: 17 34 64;
    --c-light: 248 250 252;
    --c-dark: 2 6 23;
    --c-text: 255 255 255;
    --c-muted: 148 163 184;
    color-scheme: dark;
    --clr-accent-rgb: 6, 182, 212;
    --clr-accent-dark-rgb: 8, 145, 178;
    --clr-accent-light-rgb: 103, 232, 249;
    --clr-grad-to-rgb: 2, 132, 199;
}

.light {
    --c-primary: 248 250 252;
    --c-secondary: 255 255 255;
    --c-light: 10 25 47;
    --c-dark: 226 232 240;
    --c-text: 10 25 47;
    --c-muted: 71 85 105;
    --clr-accent-rgb: 6, 182, 212;
    --clr-accent-dark-rgb: 8, 145, 178;
    --clr-accent-light-rgb: 103, 232, 249;
    --clr-grad-to-rgb: 2, 132, 199;
    color-scheme: light;
}

body {
    background-color: rgb(var(--c-primary));
    color: rgb(var(--c-text));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Theme toggle icons === */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
.light .theme-icon-sun { display: block; }
.light .theme-icon-moon { display: none; }

/* === Light mode overrides === */
.light .text-white { color: rgb(var(--c-text)); }
.light .text-gray-300 { color: #1E293B; }
.light .text-gray-400 { color: #475569; }
.light .text-gray-500 { color: #64748B; }

/* Préserver le texte blanc/icônes blanches sur fonds accent */
.light .bg-accent,
.light .bg-red,
.light .btn-primary { color: #FFFFFF !important; }
.light .service-icon svg,
.light .bg-gradient-to-br svg,
.light .bg-accent svg,
.light .bg-red svg { color: #FFFFFF; }

/* Surfaces translucides : inversion en mode clair */
.light .bg-white\/5 { background-color: rgba(10, 25, 47, 0.04); }
.light .bg-white\/10 { background-color: rgba(10, 25, 47, 0.06); }
.light .bg-white\/20 { background-color: rgba(10, 25, 47, 0.08); }

.light .border-white\/5 { border-color: rgba(10, 25, 47, 0.06); }
.light .border-white\/10 { border-color: rgba(10, 25, 47, 0.1); }
.light .border-white\/15 { border-color: rgba(10, 25, 47, 0.12); }
.light .border-white\/20 { border-color: rgba(10, 25, 47, 0.15); }
.light .border-white\/30 { border-color: rgba(10, 25, 47, 0.2); }

/* Cards & surfaces glass en mode clair */
.light .glass { background-color: rgba(255, 255, 255, 0.75); border-color: rgba(10, 25, 47, 0.08); }
.light .glass-dark { background-color: rgba(241, 245, 249, 0.85); border-color: rgba(10, 25, 47, 0.06); }
.light .service-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%); border-color: rgba(10, 25, 47, 0.08); box-shadow: 0 4px 20px rgba(10, 25, 47, 0.06); }
.light .service-card:hover { box-shadow: 0 20px 60px rgba(var(--clr-accent-rgb), 0.15); }
.light .feature-card { background: rgba(255, 255, 255, 0.85); border-color: rgba(10, 25, 47, 0.08); }
.light .feature-card:hover { background: rgba(255, 255, 255, 1); }
.light .stat-card { background: rgba(255, 255, 255, 0.85); }
.light .stat-card:hover { background: rgba(255, 255, 255, 1); }

/* Navbar scrolled en mode clair */
.light #navbar.scrolled { background: rgba(248, 250, 252, 0.95); box-shadow: 0 4px 30px rgba(var(--clr-accent-rgb), 0.08); }

/* Header au-dessus du hero (photo sombre dans les deux modes) :
   le texte reste clair même en mode light tant que la navbar est en haut */
.light body:has(#accueil) #navbar:not(.scrolled) .ml-10 > a,
.light body:has(#accueil) #navbar:not(.scrolled) .ml-10 > div > a { color: #D1D5DB; }
.light body:has(#accueil) #navbar:not(.scrolled) .flex-shrink-0 span { color: #FFFFFF; }
.light body:has(#accueil) #navbar:not(.scrolled) #mobile-menu-btn { color: #D1D5DB; }
.light body:has(#accueil) #navbar:not(.scrolled) #mobile-menu-btn:hover { color: #FFFFFF; }
.light body:has(#accueil) #navbar:not(.scrolled) #theme-toggle { border-color: rgba(255, 255, 255, 0.15); }
.light body:has(#accueil) #navbar:not(.scrolled) #theme-toggle:hover { background-color: rgba(255, 255, 255, 0.05); }

/* Scrollbar en mode clair */
.light ::-webkit-scrollbar-track { background: #E2E8F0; }

/* === Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

p {
    line-height: 1.6;
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0A192F;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--clr-accent-rgb));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--clr-accent-dark-rgb));
}

/* === Selection === */
::selection {
    background: rgb(var(--clr-accent-rgb));
    color: #FFFFFF;
}

/* === Hero Carousel Plein Écran (effet vidéo) === */
#hero-bg-carousel {
    position: absolute;
    inset: 0;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.hero-bg-slide.is-active {
    opacity: 1;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Affiche le haut de la photo (crop par le haut) */
    object-position: center top;
    /* Le zoom Ken Burns s'ancre en haut : la photo reste collée au bord supérieur */
    transform-origin: center top;
    transform: scale(1.05);
    will-change: transform;
}

/* Ken Burns cinématique : variantes par slide (effet "caméra vidéo") */
.hero-bg-slide.is-active .hero-bg-img {
    animation: heroKenBurns 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero-bg-slide[data-slide="1"].is-active .hero-bg-img,
.hero-bg-slide[data-slide="5"].is-active .hero-bg-img {
    animation-name: heroKenBurnsB;
}
.hero-bg-slide[data-slide="2"].is-active .hero-bg-img,
.hero-bg-slide[data-slide="6"].is-active .hero-bg-img {
    animation-name: heroKenBurnsC;
}
.hero-bg-slide[data-slide="3"].is-active .hero-bg-img,
.hero-bg-slide[data-slide="7"].is-active .hero-bg-img {
    animation-name: heroKenBurnsD;
}

@keyframes heroKenBurns {
    0%   { transform: scale(1.09) translate(0, 0); }
    100% { transform: scale(1.04) translate(-1.5%, -0.8%); }
}
@keyframes heroKenBurnsB {
    0%   { transform: scale(1.05) translate(-1.2%, -0.4%); }
    100% { transform: scale(1.11) translate(1.4%, -0.8%); }
}
@keyframes heroKenBurnsC {
    0%   { transform: scale(1.1) translate(0, -0.6%); }
    100% { transform: scale(1.04) translate(1.2%, -0.6%); }
}
@keyframes heroKenBurnsD {
    0%   { transform: scale(1.05) translate(0.8%, -0.5%); }
    100% { transform: scale(1.1) translate(-1%, -0.8%); }
}

/* Pause "vidéo" au survol : images et barres figées */
#accueil.hero-paused .hero-bg-img { animation-play-state: paused; }
#accueil.hero-paused .hero-dot-fill { transition-play-state: paused; }

/* === Overlay cinéma : lisibilité + vignettage, teinté au thème === */
.hero-overlay {
    background:
        linear-gradient(90deg, rgba(var(--clr-primary-rgb), 0.94) 0%, rgba(var(--clr-primary-rgb), 0.78) 28%, rgba(var(--clr-primary-rgb), 0.45) 55%, rgba(var(--clr-primary-rgb), 0.18) 78%, rgba(var(--clr-primary-rgb), 0.05) 100%),
        linear-gradient(180deg, rgba(var(--clr-primary-rgb), 0.5) 0%, rgba(var(--clr-primary-rgb), 0) 30%, rgba(var(--clr-primary-rgb), 0) 62%, rgba(var(--clr-primary-rgb), 0.85) 100%);
}

/* En mode clair, le hero reste sombre (texte clair posé sur une photo) */
.light .hero-overlay {
    background:
        linear-gradient(90deg, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.78) 28%, rgba(10, 25, 47, 0.45) 55%, rgba(10, 25, 47, 0.18) 78%, rgba(10, 25, 47, 0.05) 100%),
        linear-gradient(180deg, rgba(10, 25, 47, 0.5) 0%, rgba(10, 25, 47, 0) 30%, rgba(10, 25, 47, 0) 62%, rgba(10, 25, 47, 0.85) 100%);
}

/* Le contenu du hero reste clair en mode light (posé sur une photo sombre) */
.light #accueil .text-white { color: #FFFFFF; }
.light #accueil .text-gray-300 { color: #D1D5DB; }
.light #accueil .text-gray-400 { color: #9CA3AF; }
.light #accueil .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.light #accueil .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.light #accueil .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.light #accueil .border-white\/5 { border-color: rgba(255, 255, 255, 0.06); }
.light #accueil .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.light #accueil .border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.light #accueil .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.light #accueil .glass { background-color: rgba(10, 25, 47, 0.55); border-color: rgba(255, 255, 255, 0.12); }


/* === Grain argentique animé (effet film vivant) === */
.hero-grain {
    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='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.035;
    mix-blend-mode: overlay;
    animation: heroGrainShift 14s linear infinite;
}

@keyframes heroGrainShift {
    0%   { background-position: 0 0; }
    100% { background-position: 70px 42px; }
}

/* === Lueur pulsante sur la barre de progression active === */
.hero-dot.is-active .hero-dot-fill {
    animation: heroDotGlow 2.2s ease-in-out infinite;
}

@keyframes heroDotGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--clr-accent-rgb), 0.5); }
    50%      { box-shadow: 0 0 18px rgba(var(--clr-accent-rgb), 0.95); }
}

/* === Flip du compteur à chaque slide === */
.hero-counter-flip {
    display: inline-block;
    animation: heroCounterFlip 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes heroCounterFlip {
    0%   { transform: translateY(16px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* === Entrée en cascade des CTA (une seule fois au chargement) === */
.hero-cta-anim > * {
    opacity: 0;
    animation: heroTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-slide { transition: opacity 0.6s ease; }
    .hero-bg-slide.is-active .hero-bg-img { animation: none; }
    .hero-dot-fill,
    .hero-dot.is-active .hero-dot-fill { transition: none; }
    .hero-grain,
    .hero-dot.is-active .hero-dot-fill,
    .hero-counter-flip,
    .hero-cta-anim > * { animation: none !important; opacity: 1 !important; }
}

/* === Entrée du texte en cascade (stagger) === */
@keyframes heroTextIn {
    0% {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-text-anim {
    animation: heroTextIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* === Dots = barres de progression (style vidéo) === */
.hero-dot {
    position: relative;
    width: 46px;
    height: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    transition: background 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.hero-dot-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: rgb(var(--clr-accent-rgb));
    box-shadow: 0 0 10px rgba(var(--clr-accent-rgb), 0.7);
    transition: none;
}

.hero-dot.is-active .hero-dot-fill {
    width: 100%;
    transition: width 3.5s linear;
}

/* === Flèches de navigation === */
.hero-arrow:hover svg {
    transform: scale(1.15);
}

.hero-arrow svg {
    transition: transform 0.3s ease;
}

/* === Bouton avec effet de reflet (shine) === */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-glow:hover::after {
    left: 120%;
}

/* === Service Icon (Accent Cyan) === */
.service-icon {
    background: linear-gradient(135deg, rgb(var(--clr-accent-rgb)) 0%, rgb(var(--clr-accent-dark-rgb)) 100%);
}

/* === Navigation === */
#navbar {
    transition: all 0.3s ease;
}

#navbar.scrolled {
    background: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(var(--clr-accent-rgb), 0.1);
}

/* === Service Cards === */
.service-card {
    background: linear-gradient(135deg, rgba(17, 34, 64, 0.5) 0%, rgba(10, 25, 47, 0.5) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--clr-accent-rgb), 0.12) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--clr-accent-rgb), 0.4);
    box-shadow: 0 20px 60px rgba(var(--clr-accent-rgb), 0.18);
}

.service-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgb(var(--clr-accent-rgb)) 0%, rgb(var(--clr-accent-dark-rgb)) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(var(--clr-accent-rgb), 0.25);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

/* === Feature Cards === */
.feature-card {
    background: rgba(17, 34, 64, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    background: rgba(17, 34, 64, 0.7);
    border-color: rgba(var(--clr-accent-rgb), 0.4);
    transform: translateY(-4px);
}

/* === Button Effects === */
.btn-primary {
    background: linear-gradient(135deg, rgb(var(--clr-accent-rgb)) 0%, rgb(var(--clr-accent-dark-rgb)) 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(var(--clr-accent-rgb), 0.35);
}

/* === Form Styles === */
input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb), 0.15);
    border-color: rgb(var(--clr-accent-rgb));
}

/* === Card Hover Effects === */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

/* === Custom Colors === */
.bg-red {
    background-color: #DC2626;
}

.bg-red\/20 {
    background-color: rgba(220, 38, 38, 0.2);
}

.text-red {
    color: #DC2626;
}

.text-red-400 {
    color: #F87171;
}

.text-red-600 {
    color: #DC2626;
}

.border-red {
    border-color: #DC2626;
}

.border-red\/30 {
    border-color: rgba(220, 38, 38, 0.3);
}

.hover\:bg-red-600:hover {
    background-color: #B91C1C;
}

.hover\:text-red-400:hover {
    color: #F87171;
}

.hover\:shadow-red\/50:hover {
    box-shadow: 0 20px 60px rgba(220, 38, 38, 0.5);
}

/* === Glassmorphism === */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
    background: rgba(10, 25, 47, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* === Reveal Animations === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* === Mobile Menu === */
.mobile-menu-enter {
    animation: slideDown 0.3s ease-out forwards;
}

.mobile-menu-exit {
    animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* === Responsive Utilities === */
@media (max-width: 768px) {
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(17, 34, 64, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* === Print Styles === */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* === Accessibility === */
:focus-visible {
    outline: 2px solid rgb(var(--clr-accent-rgb));
    outline-offset: 2px;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    body {
        background: #000000;
        color: #FFFFFF;
    }

    .service-card,
    .feature-card {
        border: 2px solid #FFFFFF;
    }
}

/* === Dark Mode (already default) === */
@media (prefers-color-scheme: dark) {
    body {
        background: #0A192F;
        color: #FFFFFF;
    }
}

/* === Custom Red Color Variables === */
:root {
    --red-primary: #DC2626;
    --red-secondary: #B91C1C;
    --red-accent: #F87171;
}

/* === Special Grid Patterns === */
.pattern-dots {
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* === Footer Customization === */
.footer-social {
    transition: all 0.3s ease;
}

.footer-social:hover {
    background-color: rgba(var(--clr-accent-rgb), 0.2);
}

/* === Navigation Active States === */
.nav-active {
    color: rgb(var(--clr-accent-rgb)) !important;
}

/* === CTA Buttons === */
.cta-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.cta-button:hover::before {
    opacity: 1;
}

/* === Stats Cards === */
.stat-card {
    background: rgba(17, 34, 64, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(17, 34, 64, 0.7);
}

/* === Timeline/Process Steps === */
.process-step {
    position: relative;
}

.process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--clr-accent-rgb), 0.4) 0%, transparent 100%);
}

.process-step:last-child::after {
    display: none;
}

/* =================================== */
/* ANIMATIONS SLIDE-UP - SÉCURITÉ PRIVÉE */
/* =================================== */

/* Animation slide-up principale */
@keyframes slideUpSecurity {
    0% {
        opacity: 0;
        transform: translateY(60px) translateX(0);
        filter: blur(8px);
    }
    30% {
        filter: blur(4px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
        filter: blur(0);
    }
}

/* Animation slide-up avec effet de sécurité */
@keyframes slideUpSecurityShield {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.95);
        filter: blur(10px);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    20% {
        clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    }
    40% {
        clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
        filter: blur(5px);
    }
    60% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        filter: blur(2px);
    }
    80% {
        filter: blur(0);
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Animation slide-up avec effet de scan */
@keyframes slideUpScan {
    0% {
        opacity: 0;
        transform: translateY(70px);
        filter: blur(6px);
    }
    25% {
        opacity: 0.3;
        filter: blur(4px);
    }
    50% {
        opacity: 0.7;
        filter: blur(2px);
        transform: translateY(10px);
    }
    75% {
        opacity: 0.95;
        filter: blur(0);
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Animation slide-up stagger pour éléments en série */
@keyframes slideUpStagger {
    0% {
        opacity: 0;
        transform: translateY(50px) translateX(-10px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
        filter: blur(0);
    }
}

/* Animation de révélation professionnelle */
@keyframes revealProfessional {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: brightness(0.7) blur(3px);
    }
    50% {
        filter: brightness(1) blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1) blur(0);
    }
}

/* Classes d'animation slide-up */
.animate-slide-up {
    animation: slideUpSecurity 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-slide-up-shield {
    animation: slideUpSecurityShield 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-slide-up-scan {
    animation: slideUpScan 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-up-stagger {
    animation: slideUpStagger 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-reveal-professional {
    animation: revealProfessional 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Délais d'animation pour effet stagger */
.animate-slide-up-delay-1 { animation-delay: 0.1s; }
.animate-slide-up-delay-2 { animation-delay: 0.2s; }
.animate-slide-up-delay-3 { animation-delay: 0.3s; }
.animate-slide-up-delay-4 { animation-delay: 0.4s; }
.animate-slide-up-delay-5 { animation-delay: 0.5s; }
.animate-slide-up-delay-6 { animation-delay: 0.6s; }
.animate-slide-up-delay-7 { animation-delay: 0.7s; }
.animate-slide-up-delay-8 { animation-delay: 0.8s; }

/* État initial invisible pour les animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(4px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Animation spécifique pour les cartes de service */
.service-card-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(8px);
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card-animate.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Animation pour les statistiques */
.stat-animate {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(5px);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Animation de chargement de sécurité */
@keyframes securityPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0.4);
        border-color: rgba(var(--clr-accent-rgb), 0.8);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(var(--clr-accent-rgb), 0.2);
        border-color: rgb(var(--clr-accent-rgb));
    }
}

.security-pulse {
    animation: securityPulse 2s ease-in-out infinite;
}

/* Animation de badge de sécurité */
@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(var(--clr-accent-rgb), 0.3), inset 0 0 10px rgba(var(--clr-accent-rgb), 0.1);
        background: rgba(var(--clr-accent-rgb), 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--clr-accent-rgb), 0.6), inset 0 0 15px rgba(var(--clr-accent-rgb), 0.2);
        background: rgba(var(--clr-accent-rgb), 0.15);
    }
}

.badge-security {
    animation: badgeGlow 3s ease-in-out infinite;
}

/* La classe scan-line ne sert plus que de conteneur (position/overflow) */
.scan-line {
    position: relative;
    overflow: hidden;
}

/* Effet de protection active */
@keyframes protectionActive {
    0%, 100% {
        border-color: rgba(var(--clr-accent-rgb), 0.3);
        background: rgba(var(--clr-accent-rgb), 0.05);
    }
    50% {
        border-color: rgba(var(--clr-accent-rgb), 0.8);
        background: rgba(var(--clr-accent-rgb), 0.1);
    }
}

.protection-active {
    animation: protectionActive 2.5s ease-in-out infinite;
}

/* Animation d'alerte légère */
@keyframes alertPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.alert-indicator {
    animation: alertPulse 3s ease-in-out infinite;
}

/* === Défilement des logos de certification (marquee) === */
.logo-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    padding: 0.75rem 0;
}

.logo-marquee-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    animation: logoMarqueeScroll 40s linear infinite;
}

.logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
}

.logo-marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5rem;
    padding: 0 1.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
}

.logo-marquee-item img {
    max-height: 3.25rem;
    max-width: 9.5rem;
    object-fit: contain;
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transition: transform 0.3s ease;
}

.logo-marquee-item:hover img {
    transform: scale(1.2);
}

@keyframes logoMarqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Mode clair */
.light .logo-marquee-item {
    background: rgba(10, 25, 47, 0.04);
    border-color: rgba(10, 25, 47, 0.08);
}

.light .logo-marquee-item img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.light .logo-marquee-item:hover img {
    transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track {
        animation: none;
    }
}

/* === Statistiques teintées (section "La confiance se mérite") === */
.stat-tint-1 { --tint: 6, 182, 212; }   /* cyan */
.stat-tint-2 { --tint: 59, 130, 246; }  /* bleu */
.stat-tint-3 { --tint: 16, 185, 129; }  /* émeraude */
.stat-tint-4 { --tint: 245, 158, 11; }  /* ambre */

.stat-tint {
    background: rgba(var(--tint), 0.5);
    border-color: rgba(var(--tint), 0.75);
}

.stat-tint .stat-icon {
    background: rgba(var(--tint), 0.55);
}

.stat-tint .stat-value {
    color: rgb(var(--tint));
}

/* Mode clair : teintes légèrement atténuées, valeurs foncées pour le contraste */
.light .stat-tint {
    background: rgba(var(--tint), 0.35);
    border-color: rgba(var(--tint), 0.6);
}

.light .stat-tint .stat-value {
    color: color-mix(in srgb, rgb(var(--tint)) 68%, #0A192F);
}