/* ══════════════════════════════════════════════════════════
   MINDSET PSY - DYNAMISME & ANIMATIONS
   → Coller à la fin de style.css OU linker comme fichier séparé
   ══════════════════════════════════════════════════════════ */

/* --- ANIMATIONS AU SCROLL --- */
.js-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal.js-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.filiere-card.js-reveal { transform: translateY(40px) scale(0.97); }
.quality-card.js-reveal { transform: translateY(25px); }
.story-image.js-reveal  { transform: translateX(40px); }
.story-image.js-visible { transform: translateX(0); }
.story-content.js-reveal  { transform: translateX(-40px); }
.story-content.js-visible { transform: translateX(0); }

/* --- COMPTEURS ANIMÉS --- */
.counters-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
    border-radius: 16px;
    text-align: center;
    color: white;
    box-shadow: 0 12px 40px rgba(93, 172, 168, 0.25);
}
.counter-item { display: flex; flex-direction: column; align-items: center; }
.counter-value { display: flex; align-items: baseline; justify-content: center; }
.counter-number { font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.counter-suffix { font-size: 1.8rem; font-weight: 700; opacity: 0.9; }
.counter-label { font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.85; font-weight: 500; }
@media (max-width: 768px) {
    .counters-band { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 2rem 1rem; }
    .counter-number { font-size: 2rem; }
    .counter-suffix { font-size: 1.3rem; }
}

/* --- FILTRES DYNAMIQUES --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.5rem 0; justify-content: center; }
.filter-btn {
    padding: 0.5rem 1.2rem; border: 2px solid var(--color-border); background: white;
    color: var(--color-text); border-radius: 50px; font-size: 0.85rem; font-weight: 600;
    font-family: var(--font-body); cursor: pointer; transition: all 0.25s ease;
}
.filter-btn:hover { border-color: var(--color-teal); color: var(--color-teal); background: #f0fdfa; transform: translateY(-1px); }
.filter-btn.active { background: var(--color-teal); color: white; border-color: var(--color-teal); box-shadow: 0 4px 12px rgba(93, 172, 168, 0.3); }

/* --- BARRE DE RECHERCHE --- */
.search-container { margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box .search-icon { position: absolute; left: 14px; color: #a0aec0; pointer-events: none; transition: color 0.2s; }
.search-box input {
    width: 100%; padding: 0.85rem 2.5rem 0.85rem 2.8rem; border: 2px solid var(--color-border);
    border-radius: 50px; font-size: 0.95rem; font-family: var(--font-body); color: var(--color-text);
    background: white; transition: all 0.3s ease; outline: none;
}
.search-box input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 4px rgba(93, 172, 168, 0.12); }
.search-box input::placeholder { color: #a0aec0; }
.search-clear { position: absolute; right: 14px; font-size: 1.3rem; color: #a0aec0; cursor: pointer; display: none; line-height: 1; }
.search-clear:hover { color: #e53e3e; }
.search-results { display: none; text-align: center; padding: 0.5rem 0; font-size: 0.85rem; }
.search-count { color: var(--color-teal); font-weight: 600; }
.search-no-result { color: #e53e3e; }

/* --- NAVBAR SHRINK --- */
.nav-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease; }
.nav-scrolled .container { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
.nav-scrolled .logo-img { height: 50px; transition: height 0.3s ease; }

/* --- MICRO-INTERACTIONS HOVER --- */
.formation-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.formation-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); }
.quality-card { transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.quality-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.btn { transition: all 0.25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.btn:active { transform: translateY(0); }

/* --- HERO ANIMATION ENTRÉE --- */
.hero-title     { animation: fadeInUp 0.8s ease-out both; }
.hero-description { animation: fadeInUp 0.8s ease-out 0.2s both; }
.hero-cta       { animation: fadeInUp 0.8s ease-out 0.4s both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}