/* ==================================================
   ÉCRAN 404 — d'après la maquette 581:5781

   Bloc centré sur fond papier : pas de bandeau
   coloré. Arriver sur une page introuvable ne doit
   pas ressembler à l'entrée d'une page de contenu.
================================================== */

.erreur404__bloc {
    /* Même réserve que les entêtes de page pour le débordement du logo :
       le contenu est centré, donc rien ne passe dessous, mais la mesure
       reste la même partout. */
    padding-top: max(80px, calc(var(--v-logo-debord) + 24px));
    padding-bottom: 72px;
    background: var(--v-fond-page);
    text-align: center;
}

/* Le grand nombre, en turquoise : c'est le repère qui dit tout de suite
   ce qui se passe, avant même le titre. Décoratif — le titre porte le
   sens, et l'attribut aria-hidden le retire de la lecture d'écran. */
.erreur404__code {
    margin: 0;
    font-family: var(--v-font-titre);
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-turquoise-500);
}

.erreur404__titre {
    margin: 8px 0 0;
    font-size: 2rem;
    color: var(--v-texte-titre);
}

.erreur404__texte {
    max-width: 660px;
    margin: 16px auto 0;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    line-height: 160%;
    color: var(--v-texte-corps);
}

/* --------------------------------------------------
   CHAMP DE RECHERCHE

   La vraie porte de sortie : quelqu'un qui suit un
   lien mort sait ce qu'il cherchait.
-------------------------------------------------- */
.erreur404__recherche {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin: 28px auto 0;
    padding: 6px 6px 6px 8px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
}

.erreur404__champ {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 0;
    background: none;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    color: var(--v-texte-corps);
}

.erreur404__champ:focus {
    outline: 2px solid var(--v-surlignage);
    outline-offset: 2px;
    border-radius: var(--v-radius-pill);
}

.erreur404__bouton {
    flex: 0 0 auto;
}

/* --------------------------------------------------
   RACCOURCIS

   Quatre pastilles, comme la maquette : ce sont des
   destinations connues, pas des cartes à lire.
-------------------------------------------------- */
.erreur404__raccourcis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.erreur404__raccourci {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v-texte-titre);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.erreur404__raccourci:hover {
    border-color: var(--v-turquoise-500);
    color: var(--v-texte-titre);
}

/* --------------------------------------------------
   SUGGESTIONS

   Trois formations réelles plutôt qu'un cul-de-sac.
-------------------------------------------------- */
.erreur404__suggestions-titre {
    margin: 0 0 20px;
}

.erreur404__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */
@media (max-width: 991px) {
    .erreur404__grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    /* Le plancher de cette réserve a été dessiné pour un logo qui
       déborde de l'en-tête. Sous 992 px il ne déborde plus — la
       maquette le ramène à un rond de 36 px dans la barre — et
       --v-logo-debord vaut zéro : le plancher ne protège donc plus
       rien, il ouvre juste une bande vide au-dessus du titre. */
    .erreur404__bloc {
        padding-top: 48px;
    }
}

@media (max-width: 767px) {
    .erreur404__bloc {
        padding-top: 48px;
        padding-bottom: var(--v-section-y-mobile);
    }

    .erreur404__code { font-size: 4rem; }
    .erreur404__titre { font-size: 1.5rem; }

    /* Le bouton passe sous le champ : côte à côte, il ne resterait pas
       assez de place pour taper une requête. */
    .erreur404__recherche {
        flex-wrap: wrap;
        border-radius: var(--v-radius-lg);
    }

    .erreur404__champ { flex: 1 1 100%; }

    .erreur404__bouton {
        flex: 1 1 100%;
        justify-content: center;
    }

    .erreur404__grille {
        grid-template-columns: 1fr;
    }
}