/* =====================================================
   1. VIEWPORT & ARCHITECTURE (DESKTOP)
   ===================================================== */
.design-hero-animated { width: 100%; position: relative; }
.designHeroSwiper { width: 100%; height: 920px; background-color: #111; overflow: hidden; }

.design-slide-img-layer { 
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; 
    background-size: cover; background-position: center;
}

/* OVERLAY PROGRESSIF RALENTI */
.design-slide-img-layer::after {
    content: ''; 
    position: absolute; inset: 0;
    background-color: var(--slide-overlay-color, #111827); 
    opacity: 1; 
    z-index: 2;
    pointer-events: none;
}

.swiper-slide-active .design-slide-img-layer::after {
    /* Durée 2.5s, 25 étapes pour une transition plus lente et fluide */
    animation: revealOverlay 2.5s steps(25) forwards;
}

@keyframes revealOverlay {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* =====================================================
   2. REPRODUCTION ANIMATION LIGNES (SVG)
   ===================================================== */
.u-line { fill: none; stroke: #ffffff; stroke-width: 0; stroke-opacity: 0; }
.swiper-slide-active .u-line { animation: openMaskStroke 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

@keyframes openMaskStroke {
    0% { stroke-width: 0; stroke-opacity: 0; }
    100% { stroke-width: 55px; stroke-opacity: 1; }
}

.swiper-slide-active .u-line:nth-child(1)  { animation-delay: 0.00s; }
.swiper-slide-active .u-line:nth-child(2)  { animation-delay: 0.03s; }
.swiper-slide-active .u-line:nth-child(3)  { animation-delay: 0.06s; }
.swiper-slide-active .u-line:nth-child(4)  { animation-delay: 0.09s; }
.swiper-slide-active .u-line:nth-child(5)  { animation-delay: 0.12s; }
.swiper-slide-active .u-line:nth-child(6)  { animation-delay: 0.15s; }
.swiper-slide-active .u-line:nth-child(7)  { animation-delay: 0.18s; }
.swiper-slide-active .u-line:nth-child(8)  { animation-delay: 0.21s; }
.swiper-slide-active .u-line:nth-child(9)  { animation-delay: 0.24s; }
.swiper-slide-active .u-line:nth-child(10) { animation-delay: 0.27s; }
.swiper-slide-active .u-line:nth-child(11) { animation-delay: 0.30s; }
.swiper-slide-active .u-line:nth-child(12) { animation-delay: 0.33s; }

/* =====================================================
   3. BLOC APLAT ET TEXTE (RESTAURÉ)
   ===================================================== */
.design-aplat-rising-block {
    position: absolute; bottom: 0; left: 8%; width: 480px; height: 75%;
    background-color: var(--design-aplat-color, #FF4F1A);
    z-index: 10; box-sizing: border-box; box-shadow: 20px 0px 50px rgba(0, 0, 0, 0.35);
    border-radius: 4px 4px 0 0; transform: translateY(105%);
    transition: transform 0.85s cubic-bezier(0.215, 0.610, 0.355, 1) 0.15s;
}
.swiper-slide-active .design-aplat-rising-block { transform: translateY(0); }

.content-layer {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
    padding: 0 40px; z-index: 30; opacity: 0; transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}
.swiper-slide-active .content-layer { opacity: 1; transform: translateY(0); }

.hero-text-inner p { margin: 15px; padding: 0; color: #ffffff !important; }
.hero-text-inner p:first-child strong { display: block;  font-size: clamp(28px, 2.5vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -1px; margin-bottom: 18px; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
/* ==========================================================================
   CORRECTION TYPOGRAPHIE APLAT HERO SLIDER
   ========================================================================== */
.hero-text-inner p:last-of-type strong,
.hero-text-inner strong { 
    display: block !important; 
    font-size: clamp(24px, 5vw, 30px) !important; /* Augmenté légèrement le 2vw en 5vw pour le mobile afin que le clamp réagisse bien */
    font-weight: 600 !important; 
    line-height: 1.2 !important; 
    letter-spacing: -0.5px !important; 
    text-shadow: 0 2px 8px rgba(0,0,0,.2) !important; 
}


/* =====================================================
   4. PERSONNAGE DESKTOP (FIXE & STABLE)
   ===================================================== */
.design-hero-subject-layer {
    position: absolute; bottom: 0; right: 0%; width: 100%; height: 100%;
    background-position: bottom right !important; 
    background-size: auto 90%; 
    background-repeat: no-repeat;
    z-index: 5; opacity: 0; 
    transform: none !important; 
    will-change: opacity;
    transition: opacity 0.85s cubic-bezier(0.215, 0.610, 0.355, 1) 0.3s;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}
.swiper-slide-active .design-hero-subject-layer { 
    opacity: 1; 
    animation: breathing 8s ease-in-out infinite; 
}
.swiper-slide:not(.swiper-slide-active) .design-hero-subject-layer { opacity: 0; transform: none !important; }

@keyframes breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* =====================================================
   5. ARCHITECTURE MOBILE
   ===================================================== */
.glameeto-hero-mobile { position: relative !important; display: block !important; height: 580px !important; width: 100% !important; overflow: hidden !important; background-color: #0f0f0f !important; }
.mob-slides-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; }
.mob-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; visibility: hidden !important; z-index: 1 !important; transition: opacity 0.8s ease-in-out, visibility 0.8s !important; }
.mob-slide.is-active { opacity: 1 !important; visibility: visible !important; z-index: 2 !important; }
.mob-slide::after { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0.4) !important; z-index: 2 !important; pointer-events: none !important; }
.mob-hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; filter: brightness(0.75) contrast(1.02) !important; z-index: 1 !important; }
.mob-text-container { position: absolute !important; bottom: 175px !important; left: 5% !important; width: 90% !important; z-index: 10 !important; }
.mob-text-layer { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; box-sizing: border-box !important; background: none !important; border-left: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, visibility 0.6s !important; }
.mob-text-layer.is-active { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; position: relative !important; }
.mob-text-inner { position: relative !important; padding-left: 22px !important; }
.mob-text-inner::before { content: '' !important; position: absolute !important; left: 0 !important; bottom: 0 !important; top: 0 !important; width: 8px !important; background-color: var(--mob-aplat-color, #FF4F1A) !important; transform: scaleY(0) !important; transform-origin: bottom !important; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s !important; }
.mob-text-layer.is-active .mob-text-inner::before { transform: scaleY(1) !important; }
.mob-text-inner, .mob-text-inner p { text-align: left !important; margin: 0 !important; color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important; }
.mob-text-inner p:first-child strong { display: block !important;  font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 8px !important; }

/* Masquage conditionnel */
.glameeto-hero-mobile { display: none !important; }
.design-hero-animated { display: block !important; }

@media (max-width: 768px) {
    .design-hero-animated { display: none !important; }
    .glameeto-hero-mobile { display: block !important; }
}
/* =====================================================
   6. ARCHITECTURE MOBILE (INTÉGRALE)
===================================================== */
.glameeto-hero-mobile {
    position: relative !important;
    display: block !important;
    height: 580px !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #0f0f0f !important;
}

.mob-slides-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.mob-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    transition: opacity 0.8s ease-in-out, visibility 0.8s !important;
}

.mob-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

.mob-slide::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(15, 15, 15, 0.85) 0%, rgba(15, 15, 15, 0.4) 60%, rgba(15, 15, 15, 0.15) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.mob-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: brightness(0.75) contrast(1.02) !important;
    z-index: 1 !important;
}

.mob-content-container {
    position: absolute !important;
    bottom: 175px !important; 
    left: 5% !important;
    width: 90% !important;
    z-index: 10 !important;
}

.mob-text-layer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: none !important;
    border-left: none !important; 
    padding: 0 !important; 
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, visibility 0.6s !important;
}

.mob-text-layer.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    position: relative !important; 
}

.mob-text-inner {
    position: relative !important;
    padding-left: 22px !important;
}

.mob-text-inner::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    width: 8px !important;
    background-color: var(--mob-aplat-color, #FF4F1A) !important;
    transform: scaleY(0) !important;
    transform-origin: bottom !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s !important;
}

.mob-text-layer.is-active .mob-text-inner::before {
    transform: scaleY(1) !important;
}

.mob-text-inner, .mob-text-inner p {
    text-align: left !important;
    margin: 0 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
}

.mob-text-inner p:first-child strong {
    display: block !important;
    font-size: 28px !important; 
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

.mob-text-inner p:not(:first-child):not(:last-child) {
    font-size: 16px !important; 
    font-weight: 400 !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    color: #f1f1f1 !important;
}

.mob-text-inner p:last-child strong {
    display: block !important;
    font-size: 20px !important; 
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* =====================================================
   7. SÉCURITÉ ET AFFICHAGE CONDITIONNEL
===================================================== */
.glameeto-hero-mobile { display: none !important; }
.design-hero-animated { display: block !important; }

@media (max-width: 768px) {
    .design-hero-animated { display: none !important; }
    .glameeto-hero-mobile { display: block !important; }
}