{# ---------------------- Full Screen Search ---------------------- #}
<div class="modal fade" id="searchModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content" style="background: rgba(20, 24, 62, 0.85);">
            <div class="modal-header border-0">
                <button type="button" class="btn btn-square bg-white btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex align-items-center justify-content-center">
                <div class="input-group" style="max-width: 600px;">
                    <input type="text" class="form-control bg-transparent border-light text-light p-3"
                        placeholder="Recherchez une actualité...">
                    <button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

{# ---------------------- Hero Section ---------------------- #}
<div class="container-fluid pt-5 bg-dark-cyber hero-header-alt mb-5">
    <div class="container pt-5">
        <div class="row g-5 pt-5">
            <div class="text-center">
                <h1 class="display-4 text-white mb-3 animated slideInRight shine-text">Erreur 404</h1>
            </div>
        </div>
    </div>
</div>

<!-- 404 Content -->
<div class="container-fluid py-3 pb-5 wow fadeIn" data-wow-delay="0.1s">
    <div class="container text-center ">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <i class="bi bi-exclamation-triangle display-1 text-dark-cyber"></i>
                <h1 class="display-1">404</h1>
                <h2 class="mb-4">Oups, page introuvable</h2>
                <p class="mb-4 text-muted">
                    {{ errorMessage|default('La page demandée est introuvable.') }}
                </p>
                <a class="btn rounded-pill bg-dark-cyber-secondary text-light py-3 px-5 " href="{{ path('home.index') }}">Retour à l’accueil</a>
            </div>
        </div>
    </div>
</div>


{# ---------------------- Back to Top ---------------------- #}
<a href="#" class="btn btn-lg text-light bg-cyber-red btn-lg-square back-to-top pt-2">
    <i class="bi bi-arrow-up"></i>
</a>