/* =========================================================
   IVOIREPROS — ANIMATIONS HERO
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.hero .eyebrow,
.hero h1,
.hero .lead,
.hero .actions,
.hero .signature {
    opacity: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero .eyebrow {
    animation:
        heroEyebrow 1.3s cubic-bezier(.22, 1, .36, 1) .5s
        forwards;
}


/* =========================================================
   TITRE
   ========================================================= */

.hero h1 {
    animation:
        heroTitle 1.4s cubic-bezier(.23, 1, .36, 1) .7s
        forwards;
}

.hero h1 > span {
    opacity: 0;
    transform: translateY(35px);
}

.hero h1 > span:nth-child(1) {
    animation:
        heroLine 1.2s cubic-bezier(.22, 1, .36, 1) .8s
        forwards;
}

.hero h1 > span:nth-child(2) {
    animation:
        heroLine 1.2s cubic-bezier(.22, 1, .36, 1) 1.15s
        forwards;
}

.hero h1 > span:nth-child(3) {
    animation:
        heroLine 1.2s cubic-bezier(.22, 1, .36, 1) 1.5s
        forwards;
}


/* =========================================================
   TEXTE
   ========================================================= */

.hero .lead {
    transform: translateY(20px);

    animation:
        heroFadeUp 1.2s cubic-bezier(.22, 1, .36, 1) 2s
        forwards;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.hero .actions {
    transform: translateY(20px);

    animation:
        heroFadeUp 1.2s cubic-bezier(.22, 1, .36, 1) 2.3s
        forwards;
}

.hero .actions .btn {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.hero .actions .btn:hover {
    transform: translateY(-4px);
}

.hero .actions .primary:hover {
    box-shadow:
        0 12px 35px rgba(212, 175, 55, .28);
}


/* =========================================================
   ORBITE
   ========================================================= */

.hero .orbit {
    opacity: 0;

    animation:
        heroOrbit 2.8s cubic-bezier(.22, 1, .36, 1) .35s
        forwards;
}


/* ---------------------------------------------------------
   Mouvement très lent de l'orbite
   --------------------------------------------------------- */

.hero .orbit::before {
    animation:
        orbitRotate 18s linear infinite;
}

.hero .orbit::after {
    animation:
        orbitRotateReverse 24s linear infinite;
}


/* =========================================================
   POINTS DE L'ORBITE
   ========================================================= */

.hero .node {
    opacity: 0;
    transform: scale(.4);

    animation:
        nodeAppear .8s cubic-bezier(.22, 1, .36, 1) forwards,
        nodePulse 3.5s ease-in-out 3s infinite;
}

.hero .n1 {
    animation-delay: 2s, 3.8s;
}

.hero .n2 {
    animation-delay: 2.35s, 4.05s;
}

.hero .n3 {
    animation-delay: 2.7s, 4.3s;
}


/* =========================================================
   SIGNATURE
   ========================================================= */

.hero .signature {
    transform: translateY(15px);

    animation:
        heroFadeUp 1.2s cubic-bezier(.22, 1, .36, 1) 2.8s
        forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes heroEyebrow {

    from {
        opacity: 0;
        transform: translateX(-25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes heroTitle {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes heroLine {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroFadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroOrbit {

    from {
        opacity: 0;
        transform: translateY(-50%) scale(.75);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

}


@keyframes orbitRotate {

    from {
        transform: rotate(28deg) scaleX(.45);
    }

    to {
        transform: rotate(388deg) scaleX(.45);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(-36deg) scaleX(.4);
    }

    to {
        transform: rotate(-396deg) scaleX(.4);
    }

}


@keyframes nodeAppear {

    from {
        opacity: 0;
        transform: scale(.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes nodePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero .eyebrow,
    .hero h1,
    .hero h1 > span,
    .hero .lead,
    .hero .actions,
    .hero .signature,
    .hero .orbit,
    .hero .node {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}


/* =========================================================
   IVOIREPROS — ANIMATIONS EXPERTISES
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.expertises-head,
.expertise {
    opacity: 0;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.expertises-head {
    transform: translateY(35px);

}


/* =========================================================
   CARTES
   ========================================================= */

.expertise {
    transform: translateY(45px);
}


/* =========================================================
   DÉCLENCHEMENT AU SCROLL
   ========================================================= */

   .expertises.show .expertises-head {
    animation:
        expertiseHead 1.1s cubic-bezier(.22, 1, .36, 1) .1s
        forwards;
}

.expertises.show .expertise:nth-child(1) {
    animation:
        expertiseCard 1.1s cubic-bezier(.22, 1, .36, 1) .35s
        forwards;
}

.expertises.show .expertise:nth-child(2) {
    animation:
        expertiseCard 1.1s cubic-bezier(.22, 1, .36, 1) .6s
        forwards;
}

.expertises.show .expertise:nth-child(3) {
    animation:
        expertiseCard 1.1s cubic-bezier(.22, 1, .36, 1) .85s
        forwards;
}



/* =========================================================
   NUMÉROS
   ========================================================= */

.expertise-number {
    transition:
        transform .4s ease,
        color .4s ease;
}


/* =========================================================
   ICÔNES
   ========================================================= */

.expertise-icon {
    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        color .4s ease;
}


/* =========================================================
   LIENS
   ========================================================= */

.expertise-link {
    transition:
        transform .35s ease,
        color .35s ease;
}


/* =========================================================
   SURVOL DES CARTES
   ========================================================= */

.expertise {
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.expertise:hover {
    transform: translateY(-8px);
}

.expertise:hover .expertise-icon {
    transform: translateY(-4px) scale(1.08);
}

.expertise:hover .expertise-number {
    transform: translateX(5px);
}

.expertise:hover .expertise-link {
    transform: translateX(5px);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes expertiseHead {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes expertiseCard {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .expertises-head,
    .expertise {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .expertise,
    .expertise-icon,
    .expertise-number,
    .expertise-link {
        transition: none !important;
    }

}


/* =========================================================
   IVOIREPROS — ANIMATIONS RÉALISATIONS
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.realisations-head,
.realisation-featured,
.realisation-card {
    opacity: 0;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */

.realisations-head {
    transform: translateY(40px);

}


/* =========================================================
   PROJET PRINCIPAL
   ========================================================= */

.realisation-featured {
    transform: translateY(50px);

}


/* =========================================================
   CARTES SECONDAIRES
   ========================================================= */

.realisation-card {
    transform: translateY(45px);
}

/* =========================================================
   DÉCLENCHEMENT AU SCROLL
   ========================================================= */

.realisations.show .realisations-head {
    animation:
        realisationHead 1.2s cubic-bezier(.22, 1, .36, 1) .1s
        forwards;
}

.realisations.show .realisation-featured {
    animation:
        realisationFeatured 1.3s cubic-bezier(.22, 1, .36, 1) .4s
        forwards;
}

.realisations.show .realisation-card:nth-child(1) {
    animation:
        realisationCard 1.1s cubic-bezier(.22, 1, .36, 1) .8s
        forwards;
}

.realisations.show .realisation-card:nth-child(2) {
    animation:
        realisationCard 1.1s cubic-bezier(.22, 1, .36, 1) 1.05s
        forwards;
}

.realisations.show .realisation-card:nth-child(3) {
    animation:
        realisationCard 1.1s cubic-bezier(.22, 1, .36, 1) 1.3s
        forwards;
}

.realisations.show .realisation-card:nth-child(4) {
    animation:
        realisationCard 1.1s cubic-bezier(.22, 1, .36, 1) 1.55s
        forwards;
}



/* =========================================================
   IMAGE / VISUEL PRINCIPAL
   ========================================================= */

.visual-frame {
    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        box-shadow .7s ease;
}

.realisation-featured:hover .visual-frame {
    transform: scale(1.025);
}


/* =========================================================
   LIENS
   ========================================================= */

.realisation-link {
    transition:
        transform .35s ease,
        color .35s ease;
}

.realisation-link:hover {
    transform: translateX(6px);
}


/* =========================================================
   TAGS
   ========================================================= */

.realisation-tags span {
    transition:
        transform .35s ease,
        border-color .35s ease;
}

.realisation-tags span:hover {
    transform: translateY(-3px);
}


/* =========================================================
   NUMÉROS
   ========================================================= */

.realisation-number {
    transition:
        transform .4s ease,
        opacity .4s ease;
}

.realisation:hover .realisation-number,
.realisation-card:hover .realisation-number {
    transform: translateX(5px);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes realisationHead {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes realisationFeatured {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes realisationCard {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .realisations-head,
    .realisation-featured,
    .realisation-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .visual-frame,
    .realisation-link,
    .realisation-tags span,
    .realisation-number {
        transition: none !important;
    }

}

/* =========================================================
   IVOIREPROS — ANIMATIONS PROCESSUS
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.processus-head,
.processus-item {
    opacity: 0;
}

.processus-head {
    transform: translateY(40px);
}

.processus-item {
    transform: translateY(45px);
}


/* =========================================================
   DÉCLENCHEMENT
   ========================================================= */

.processus.show .processus-head {
    animation:
        processusHead 1.2s cubic-bezier(.22, 1, .36, 1) .1s
        forwards;
}

.processus.show .processus-item:nth-child(1) {
    animation:
        processusItem 1.1s cubic-bezier(.22, 1, .36, 1) .35s
        forwards;
}

.processus.show .processus-item:nth-child(2) {
    animation:
        processusItem 1.1s cubic-bezier(.22, 1, .36, 1) .6s
        forwards;
}

.processus.show .processus-item:nth-child(3) {
    animation:
        processusItem 1.1s cubic-bezier(.22, 1, .36, 1) .85s
        forwards;
}

.processus.show .processus-item:nth-child(4) {
    animation:
        processusItem 1.1s cubic-bezier(.22, 1, .36, 1) 1.1s
        forwards;
}

.processus.show .processus-item:nth-child(5) {
    animation:
        processusItem 1.1s cubic-bezier(.22, 1, .36, 1) 1.35s
        forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes processusHead {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes processusItem {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .processus-head,
    .processus-item {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

}



/* =========================================================
   IVOIREPROS — ANIMATIONS À PROPOS
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.apropos-head,
.apropos-text,
.apropos-vision,
.apropos-signature {
    opacity: 0;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.apropos-head {
    transform: translateY(40px);

}


/* =========================================================
   TEXTE PRINCIPAL
   ========================================================= */

.apropos-text {
    transform: translateY(45px);

}


/* =========================================================
   VISION
   ========================================================= */

.apropos-vision {
    transform: translateX(35px);

}


/* =========================================================
   LIGNES DE VISION
   ========================================================= */

.vision-line {
    opacity: 0;
    transform: translateY(20px);
}

/* =========================================================
   SIGNATURE
   ========================================================= */

.apropos-signature {
    transform: translateY(25px);

}

/* =========================================================
   DÉCLENCHEMENT AU SCROLL
   ========================================================= */

.apropos.show .apropos-head {
    animation:
        aproposHead 1.2s cubic-bezier(.22, 1, .36, 1) .1s
        forwards;
}

.apropos.show .apropos-text {
    animation:
        aproposContent 1.2s cubic-bezier(.22, 1, .36, 1) .4s
        forwards;
}

.apropos.show .apropos-vision {
    animation:
        aproposVision 1.2s cubic-bezier(.22, 1, .36, 1) .55s
        forwards;
}

.apropos.show .vision-line:nth-child(1) {
    animation:
        visionLine 1s cubic-bezier(.22, 1, .36, 1) .75s
        forwards;
}

.apropos.show .vision-line:nth-child(2) {
    animation:
        visionLine 1s cubic-bezier(.22, 1, .36, 1) 1s
        forwards;
}

.apropos.show .vision-line:nth-child(3) {
    animation:
        visionLine 1s cubic-bezier(.22, 1, .36, 1) 1.25s
        forwards;
}

.apropos.show .apropos-signature {
    animation:
        aproposSignature 1.1s cubic-bezier(.22, 1, .36, 1) 1.6s
        forwards;
}




/* =========================================================
   NUMÉROS
   ========================================================= */

.vision-line > span {
    transition:
        transform .45s ease,
        color .4s ease;
}

.vision-line:hover > span {
    transform: translateX(5px);
}





/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes aproposHead {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes aproposContent {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes aproposVision {

    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes visionLine {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes aproposSignature {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .apropos-head,
    .apropos-text,
    .apropos-vision,
    .apropos-signature,
    .vision-line {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .vision-line > span {
        transition: none !important;
    }

}

/* =========================================================
   IVOIREPROS — ANIMATIONS CONTACT
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.contact-head,
.contact-info,
.contact-form {
    opacity: 0;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.contact-head {
    transform: translateY(40px);

    
}


/* =========================================================
   INFORMATIONS
   ========================================================= */

.contact-info {
    transform: translateX(-35px);

    
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.contact-form {
    transform: translateX(35px);

}


/* =========================================================
   BLOCS D'INFORMATIONS
   ========================================================= */

.contact-info-block {
    transition:
        transform .4s ease;
}

.contact-info-block:hover {
    transform: translateX(5px);
}

/* =========================================================
   DÉCLENCHEMENT AU SCROLL
   ========================================================= */

.contact.show .contact-head {
    animation:
        contactHead 1.6s cubic-bezier(.22, 1, .36, 1) .6s
        forwards;
}

.contact.show .contact-info {
    animation:
        contactInfo 1.4s cubic-bezier(.22, 1, .36, 1) .7s
        forwards;
}

.contact.show .contact-form {
    animation:
        contactForm 1.4s cubic-bezier(.22, 1, .36, 1) .95s
        forwards;
}


/* =========================================================
   IVOIREPROS — ANIMATIONS FOOTER
   ========================================================= */


/* =========================================================
   ÉTAT INITIAL
   ========================================================= */

.footer-brand,
.footer-column,
.footer-bottom {
    opacity: 0;
}


/* =========================================================
   ÉLÉMENTS
   ========================================================= */

.footer-brand {
    transform: translateY(35px);
}

.footer-column {
    transform: translateY(35px);
}

.footer-bottom {
    transform: translateY(20px);
}


/* =========================================================
   DÉCLENCHEMENT AU SCROLL
   ========================================================= */

.site-footer.show .footer-brand {
    animation:
        footerBrand 1.3s cubic-bezier(.22, 1, .36, 1) .15s
        forwards;
}

.site-footer.show .footer-column:nth-child(2) {
    animation:
        footerColumn 1.2s cubic-bezier(.22, 1, .36, 1) .4s
        forwards;
}

.site-footer.show .footer-column:nth-child(3) {
    animation:
        footerColumn 1.2s cubic-bezier(.22, 1, .36, 1) .65s
        forwards;
}

.site-footer.show .footer-column:nth-child(4) {
    animation:
        footerColumn 1.2s cubic-bezier(.22, 1, .36, 1) .9s
        forwards;
}

.site-footer.show .footer-bottom {
    animation:
        footerBottom 1.1s cubic-bezier(.22, 1, .36, 1) 1.25s
        forwards;
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-brand,
    .footer-column,
    .footer-bottom {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}


/* =========================================================
   HOVER — LIENS
   ========================================================= */

.footer-column a {
    transition:
        transform .3s ease,
        color .3s ease;
}

.footer-column a:hover {
    transform: translateX(5px);
}


/* =========================================================
   HOVER — CONTACT
   ========================================================= */

.footer-contact-link {
    transition:
        transform .35s ease,
        color .35s ease;
}

.footer-contact-link:hover {
    transform: translateX(6px);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes footerBrand {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes footerColumn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes footerBottom {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}




/* =========================================================
   CHAMPS
   ========================================================= */

.contact-form .form-group {
    transition:
        transform .35s ease;
}

.contact-form .form-group:focus-within {
    transform: translateX(4px);
}


/* =========================================================
   BOUTON D'ENVOI
   ========================================================= */

.contact-submit {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.contact-submit:hover {
    transform: translateY(-4px);
}

.contact-submit:hover span {
    transform: translateX(5px);
}

.contact-submit span {
    display: inline-block;

    transition:
        transform .35s ease;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes contactHead {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes contactInfo {

    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes contactForm {

    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-head,
    .contact-info,
    .contact-form {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .contact-info-block,
    .contact-form .form-group,
    .contact-submit,
    .contact-submit span {
        transition: none !important;
    }

}


/* =========================================================
   DIGITAL — ANIMATION DU HERO
   ========================================================= */

/* ---------------------------------------------------------
   Apparition générale
   --------------------------------------------------------- */

.digital-hero-content > * {
    opacity: 0;
    transform: translateY(28px);
    animation: digitalHeroReveal .8s ease-out forwards;
}


/* ---------------------------------------------------------
   Ordre d'apparition
   --------------------------------------------------------- */

.digital-hero-content .digital-kicker {
    animation-delay: .15s;
}

.digital-hero-content .digital-title {
    animation-delay: .30s;
}

.digital-hero-content .digital-intro {
    animation-delay: .48s;
}

.digital-hero-content .digital-actions {
    animation-delay: .64s;
}


/* ---------------------------------------------------------
   Animation
   --------------------------------------------------------- */

@keyframes digitalHeroReveal {

    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   Visuel du Hero
   --------------------------------------------------------- */

.digital-visual {
    opacity: 0;
    transform: translateY(-50%) scale(.94);
    animation: digitalVisualReveal 1.1s ease-out .35s forwards;
}

@keyframes digitalVisualReveal {

    from {
        opacity: 0;
        transform: translateY(-50%) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

}


/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .digital-hero-content > *,
    .digital-visual {
        opacity: 1;
        transform: none;
        animation: none;
    }

}

/* =========================================================
   DIGITAL — APPARITION DES SECTIONS AU SCROLL
   ========================================================= */

/* ---------------------------------------------------------
   État initial
   --------------------------------------------------------- */

.digital-section-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}


/* ---------------------------------------------------------
   État visible
   --------------------------------------------------------- */

.digital-section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .digital-section-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* =========================================================
   DIGITAL — ANIMATION DES CARTES
   ========================================================= */

.digital-card-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.digital-card-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   Décalage entre les cartes
   --------------------------------------------------------- */

.digital-solution:nth-child(2),
.digital-process-step:nth-child(2),
.digital-value:nth-child(2) {
    transition-delay: .12s;
}

.digital-solution:nth-child(3),
.digital-process-step:nth-child(3),
.digital-value:nth-child(3) {
    transition-delay: .24s;
}

.digital-solution:nth-child(4),
.digital-process-step:nth-child(4) {
    transition-delay: .36s;
}


/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .digital-card-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* =========================================================
   DIGITAL — ANIMATION « VOTRE PROJET »
   ========================================================= */

.digital-featured-project {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.digital-featured-project.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.digital-featured-project .digital-featured-content {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity .8s ease .15s,
        transform .8s ease .15s;
}

.digital-featured-project.is-visible .digital-featured-content {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------------------------
   ÉLÉMENT VISUEL / NUMÉRO
   --------------------------------------------------------- */

.digital-featured-project .digital-featured-label {
    opacity: 0;
    transform: scale(.9);
    transition:
        opacity .9s ease .3s,
        transform .9s cubic-bezier(.2,.8,.2,1) .3s;
}

.digital-featured-project.is-visible .digital-featured-label {
    opacity: 1;
    transform: scale(1);
}


/* ---------------------------------------------------------
   ACCESSIBILITÉ
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .digital-featured-project,
    .digital-featured-project .digital-featured-content,
    .digital-featured-project .digital-featured-label {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* =========================================================
   CREATION — ANIMATION DU VISUEL HERO
   ========================================================= */

.digital-page .digital-symbol {
    animation:
        creationSymbolReveal .9s ease-out .75s both,
        creationSymbolFloat 4s ease-in-out 1.65s infinite;
    transform-origin: center;
}


/* ---------------------------------------------------------
   Apparition du symbole
   --------------------------------------------------------- */

@keyframes creationSymbolReveal {

    from {
        opacity: 0;
        transform: scale(.4) rotate(-45deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}


/* ---------------------------------------------------------
   Mouvement très léger
   --------------------------------------------------------- */

@keyframes creationSymbolFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-8px) rotate(8deg);
    }

}


/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .digital-page .digital-symbol {
        animation: none;
        opacity: 1;
        transform: none;
    }

}