/* Animations de révélation */
@keyframes revealUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.reveal-text {
    opacity: 0;
    animation: revealUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Titre Hero Responsive */
.hero-title-top {
    font-size: 2rem;
    margin-bottom: -0.5rem;
}

@media (min-width: 768px) {
    .hero-title-top {
        font-size: 2.5rem;
        margin-bottom: -1.5rem;
    }
}

/* ==========================================
   Design System & Custom Styles - YLmédia 2026
   ========================================== */

/* Icons & General */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

#solutions p {
    min-height: 235px;
    text-align: left;
}

.technical-grid {
    background-image: radial-gradient(circle, #c2c6d1 1px, transparent 1px);
    background-size: 40px 40px;
}

.outline-text {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
    color: transparent;
}

/* Animations de dégradés */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    background: linear-gradient(-45deg, #28517b, #354e7c, #90bbfc, #617fbb);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@media (max-width: 768px) {
    .animated-gradient {
        background: radial-gradient(100% 100% at 69% 78%, #5d99ff 0%, transparent), radial-gradient(100% 100% at 25% 25%, #38588e 0%, transparent), #5269a5;
        background-size: 200% 200%;
        /* Réduit la surface de calcul */
        animation: gradient 30s ease infinite;
        /* Animation plus lente = moins de calculs par seconde */
    }
}

.animated-contact {
    background: linear-gradient(-45deg, #90BBFC, #315F9A, #90BBFC, #315F9A);
    background-size: 400% 400%;
    animation: gradient 25s ease infinite;
}

/* Animation Bouton Principal (Bouton Aura) */
@property --7-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20.1953125%;
}

@property --7-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --8-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 75.703125%;
}

@property --8-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 21.3671875%;
}

:root {
    --7-x-position: 20.1953125%;
    --7-y-position: 80%;
    --8-x-position: 75.703125%;
    --8-y-position: 21.3671875%;
}

@keyframes main {
    25% {
        --7-x-position: 15%;
        --7-y-position: 15%;
        --8-x-position: 85%;
        --8-y-position: 80%;
    }

    50% {
        --7-x-position: 80%;
        --7-y-position: 15%;
        --8-x-position: 15%;
        --8-y-position: 85%;
    }
}

.btn-main {
    background: radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #38588e 0%, transparent),
        radial-gradient(100% 100% at var(--8-x-position) var(--8-y-position), #52bbaf 0%, transparent),
        #5269a5;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    transition-timing-function: ease-in;
}

/* Animations Portfolio */
@keyframes colorCycle {

    0%,
    15%,
    100% {
        filter: grayscale(100%);
    }

    3%,
    12% {
        filter: grayscale(0%);
    }
}

@keyframes revealColor {
    0% {
        filter: grayscale(100%);
    }

    50%,
    100% {
        filter: grayscale(0%);
    }
}

.portfolio-animate {
    animation: colorCycle 12s infinite;
}

.text-bleu {
    color: #628ecd;
}

@media (max-width: 768px) {
    .portfolio-animate {
        animation: revealColor linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 40%;
    }
}

.group:hover .portfolio-animate {
    animation: none !important;
    filter: grayscale(0%) !important;
    transition: filter 0.7s ease-in-out;
}

/* Sécurité & reCAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}

/* ==========================================
   Modern Pill CMP Design - Ultra Minimalist
   ========================================== */
#tarteaucitronAlertBig {
    position: fixed !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: auto !important;
    max-width: 90vw !important;
    background: #ffffff !important;
    border-radius: 100px !important;
    box-shadow: 0 10px 40px rgba(0, 28, 58, 0.15) !important;
    padding: 10px 24px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    z-index: 999999 !important;
    border: 1px solid #e1e3e4 !important;
}

#tarteaucitronDisclaimerAlert {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    color: #505f78 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#tarteaucitronDisclaimerAlert b {
    display: none !important;
}

#tarteaucitronPersonalize,
#tarteaucitronCloseAlert,
#tarteaucitronAllAllowed,
#tarteaucitronAllDenied {
    width: auto !important;
    display: inline-block !important;
    margin: 0 4px !important;
    padding: 8px 16px !important;
    height: auto !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

#tarteaucitronAllAllowed,
#tarteaucitronCloseAlert {
    background-color: #315f9a !important;
    color: #ffffff !important;
}

#tarteaucitronPersonalize {
    background-color: #f3f4f5 !important;
    color: #505f78 !important;
    border: none !important;
}

#tarteaucitronAllDenied {
    display: none !important;
}

#tarteaucitronPrivacyPolicy {
    display: none !important;
}

/* Étoiles animées - Avis Clients */
@property --11-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 25.2734375%;
}

@property --11-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 25.1171875%;
}

@property --12-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --12-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@keyframes star-gradient-animation {
    0% {
        --11-x-position: 25.2734375%;
        --11-y-position: 25.1171875%;
        --12-x-position: 80%;
        --12-y-position: 80%;
    }

    25% {
        --11-x-position: 15%;
        --11-y-position: 15%;
    }

    50% {
        --11-x-position: 80%;
        --11-y-position: 15%;
        --12-x-position: 20%;
        --12-y-position: 20%;
    }

    100% {
        --11-x-position: 25.2734375%;
        --11-y-position: 25.1171875%;
        --12-x-position: 80%;
        --12-y-position: 80%;
    }
}

.star-animated-gradient {
    background: radial-gradient(100% 100% at var(--11-x-position) var(--11-y-position), #fff124 0%, transparent),
        radial-gradient(100% 100% at var(--12-x-position) var(--12-y-position), #fe8103 0%, transparent),
        #f6ffec;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: star-gradient-animation 5s infinite ease-in;
    display: inline-block;
    font-variation-settings: 'FILL' 1 !important;
}