/* Kea's - Styles additionnels (accessibilité, resets légers)
   Ne modifie pas la charte graphique existante ; améliore l'accessibilité et les performances.
*/
:root{--keas-orange:#f97316}
*{box-sizing:border-box}
img,video,iframe{max-width:100%;height:auto}

/* Focus visible accessible */
:focus{outline:3px solid var(--keas-orange);outline-offset:3px}

/* Utility for screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}}

/* Improve contrast where necessary without changing colors */
button, a{ -webkit-font-smoothing:antialiased }

/* Small helper for consistent container padding on very small screens */
.container{padding-left:1rem;padding-right:1rem}

/* ----- Styles moved from inline <style> in index.html ----- */
/* Section underline and hover */
.section-title::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background-color: #f97316;
   margin: 1rem auto;
   transition: width 0.3s ease;
}
.section-title:hover::after {
   width: 100px;
}

/* Reveal animation for scroll */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
   opacity: 1;
   transform: translateY(0);
}

/* Premium Card Style */
.premium-card {
    background-color: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 1rem;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: rgba(234, 88, 12, 0.3); /* keas-orange with opacity */
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--keas-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.premium-card:hover::before {
    transform: scaleX(1);
}

/* Typography Enhancements */
.text-balance {
    text-wrap: balance;
}

.tracking-premium {
    letter-spacing: 0.15em;
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* Flicker Animation for Modal Backdrop */
@keyframes flicker-bg {
    0% { opacity: 0.8; }
    5% { opacity: 0.75; }
    10% { opacity: 0.8; }
    15% { opacity: 0.85; }
    20% { opacity: 0.8; }
    25% { opacity: 0.75; }
    30% { opacity: 0.8; }
    50% { opacity: 0.8; }
    55% { opacity: 0.78; }
    60% { opacity: 0.82; }
    100% { opacity: 0.8; }
}
.animate-flicker-bg {
    animation: flicker-bg 4s infinite;
}

/* Card hover */
.card-hover {
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Shine effect */
.group:hover .shine-effect {
   opacity: 0.3;
   transform: translateX(100%);
}
.shine-effect {
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
   transform: skewX(-25deg);
   transition: 0.7s;
   pointer-events: none;
}

/* Parallax helper for hero background */
.parallax-bg {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

/* Text Justify Pretty */
.text-justify-pretty {
   text-align: justify;
   text-justify: inter-word;
}

/* Infinite Scroll Animation */
@keyframes scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}
.animate-scroll {
   animation: scroll 30s linear infinite;
}
.hover\:pause:hover {
   animation-play-state: paused;
}

/* Remove tap highlight / active rectangle on mouse/touch while preserving keyboard focus */
.no-click-outline, #navbar a, #navbar button, .postuler-no-outline {
   -webkit-tap-highlight-color: transparent;
}

/* Keep visible outline for keyboard users */
*:focus {
   outline: none;
}
*:focus-visible {
   outline: 3px solid var(--keas-orange);
   outline-offset: 3px;
}

/* ----- New Styles from Update ----- */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pillar-item {
    position: relative;
    overflow: hidden;
    transition: flex-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-item:hover {
    flex-grow: 2;
}
.pillar-bg {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pillar-item:hover .pillar-bg {
    transform: scale(1.1);
}
.pillar-content {
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2), transparent);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(234, 88, 12, 0.15);
}

.card-concept {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e5e7eb;
}
.card-concept:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #f97316;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #ea580c; border-radius: 4px; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-scroll {
    animation: scroll 40s linear infinite;
}

.text-justify-pretty { text-align: justify; text-justify: inter-word; }

/* Icon Utility for SVG Sprites */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -0.125em;
}
