/*
 * Mouvements du site recrutement.fdi.fr
 *
 * Remplace les animations de l'ancien thème : plus de transition globale
 * sur tous les éléments, plus de fondus au défilement (ScrollReveal).
 * Un seul moment marquant (l'ouverture en losange du bandeau, une fois par
 * session) et des transitions courtes qui répondent aux actions.
 */

:root {
    --fdi-orange: #EF7D00;
    --fdi-ease-out: cubic-bezier(.16, 1, .3, 1);
    --fdi-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --fdi-t-response: 180ms;
    --fdi-t-state: 320ms;
}

/* L'ancien thème animait tout (« * { transition: all .5s } »). */
* {
    transition: none;
}

/* ScrollReveal masquait ces éléments en attendant leur apparition. */
html.sr .chiffre,
html.sr .chiffres big {
    visibility: visible;
}

/* ---- Ouverture en losange (première page de la session) ---- */

@keyframes fdi-aperture {
    from {
        clip-path: polygon(50% 47%, 52% 50%, 50% 53%, 48% 50%);
    }
    to {
        clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
    }
}

@keyframes fdi-appear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

html.fdi-intro #main {
    animation: fdi-aperture 550ms var(--fdi-ease-out) backwards;
}

html.fdi-intro #header {
    animation: fdi-appear 300ms var(--fdi-ease-out) 250ms backwards;
}

html.fdi-intro #main .page_content {
    animation: fdi-appear 300ms var(--fdi-ease-out) 350ms backwards;
}

/* ---- En-tête : compactage progressif au défilement ---- */

#header {
    transition: background-color var(--fdi-t-state) var(--fdi-ease-out);
}

#header .row,
#header .logo h1 {
    transition: padding var(--fdi-t-state) var(--fdi-ease-out),
                font-size var(--fdi-t-state) var(--fdi-ease-out);
}

/* ---- Boutons et liens : réponse immédiate ---- */

.btn,
#header a,
footer a {
    transition: background-color var(--fdi-t-response) ease,
                color var(--fdi-t-response) ease,
                border-color var(--fdi-t-response) ease,
                opacity var(--fdi-t-response) ease;
}

/* ---- Offres : survol d'origine (ombre portée, intitulé en orange) ---- */

/* La transition venait de « * { transition: all .5s } » dans l'ancien thème. */
tr {
    transition: all .5s cubic-bezier(.645, .045, .355, 1);
}

/* Navigation au clavier : même rendu qu'au survol. */
tr.offre:focus-visible {
    outline: 2px solid var(--fdi-orange);
    outline-offset: -2px;
    box-shadow: 0 0 29px 0 rgba(68, 68, 68, .5);
}

tr.offre:focus-visible .poste {
    color: var(--fdi-orange);
}

/* ---- Préférence système : pas d'animation ---- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}