.hero-wrapper {
    overflow-x: hidden;
}

/* Ensure header top stays above carousel and allow carousel overflow for animations */
.header-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 4rem);
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(21rem, 35vw, 35rem);
}

.header-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
}

.hero-carousel {
    width: 100%;
    margin-top: 0;
    z-index: 0;
}

.carousel-slides {
    overflow: visible;
}

/* --- Typographie et Logo --- */

.logo-ichigo {
    max-width: 150px;
    height: auto;
}

.text-slogan {
    color: var(--primary-red);
    font-size: 1.3rem;
    letter-spacing: 0.3px;
    font-weight: 500;
}

.subtitle {
    color: var(--primary-red);
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.hero-title {
    color: var(--dark-grey);
    font-size: 3rem;
    font-weight: 550;
    font-family: 'Montserrat', sans-serif;
    transform: scaleY(0.95); /* Légère compression verticale pour un effet plus dynamique */
}

/* --- Boutons et Animations (Fluid Hover) --- */
.btn-custom-red {
    background-color: var(--primary-red);
    color: white;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-fluid-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-custom-red:hover, .smartphones-cta:hover {
    background-color: #ffffff;
    color: rgb(26, 26, 26);
    transform: scale(0.95) !important;
    border: 1px solid var(--primary-red);
}

.header-actions {
    position: fixed;
    top: 1.15rem;
    right: 2rem;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.header-top .text-slogan {
    justify-content: center;
    justify-self: center;
    max-width: min(100%, 620px);
    margin: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
}

.btn-download-app {
    position: relative;
    background: #ffffff;
    color: #171717;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    animation: download-popup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.btn-download-app::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: inherit;
    opacity: 0.85;
    pointer-events: none;
    animation: download-popup-ring 2.4s ease-out infinite;
}

.btn-download-app:hover {
    background: #171717;
    color: #ffffff;
    border-color: #171717;
    transform: translateY(-2px) scale(0.98) !important;
}

@keyframes download-popup {
    from {
        opacity: 0;
        transform: translate3d(0, -16px, 0) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes download-popup-ring {
    0% {
        opacity: 0.75;
        transform: scale(0.98);
    }
    65% {
        opacity: 0;
        transform: scale(1.12);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

/* --- Image --- */
.hero-image {
    --hero-image-scale: 1.3;
    transform: scale(var(--hero-image-scale));
    z-index: 2;
}

.phone-detail-img {
    max-width: 300px;
    height: auto;
}

/* --- Carousel Hero --- */
.hero-carousel {
    position: relative;
}

.carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-slides .ps-md-5 {
    padding-left: 7rem !important;
}

.carousel-slides {
    height: clamp(500px, 100vh, 720px);
}

.carousel-slide.is-active {
    display: flex;
}

.carousel-slide .subtitle,
.carousel-slide .hero-title,
.carousel-slide .hero-paragraphe,
.carousel-slide .btn-anim,
.carousel-slide .btn-anim-2,
.carousel-slide .phone-detail-img {
    opacity: 0;
    will-change: transform, opacity;
}

.carousel-slide .btn-anim {
    display: inline-block;
}

.carousel-slide.is-active .subtitle {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.carousel-slide.is-active .hero-title {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.05s;
}

.carousel-slide.is-active .hero-paragraphe {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}


.carousel-slide.is-active .btn-anim {
    animation: ppt-morph-up 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
}

/* Slide 2 et 4: bouton "Voir details" en animation gauche -> droite */
.carousel-slide.spark-slide.is-active .btn-anim,
.carousel-slide.joy-slide.is-active .btn-anim {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
}

.carousel-slide.is-active .btn-anim-2 {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
    animation-fill-mode: both;
}

.carousel-slide.is-active .phone-detail-img {
    animation: ppt-morph-right 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.05s;
}

@keyframes ppt-morph-left {
    0% {
        opacity: 0;
        transform: translate3d(-200px, 0, 0) scale(0.98);
    }
    65% {
        opacity: 1;
        transform: translate3d(6px, 0, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.60);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ppt-morph-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0) scale(0.98);
    }
    70% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes ppt-morph-right {
    0% {
        opacity: 0;
        transform: translate3d(140px, 0, 0) scale(var(--hero-image-scale, 1.3));
    }
    65% {
        opacity: 1;
        transform: translate3d(-8px, 0, 0) scale(var(--hero-image-scale, 1.3));
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(var(--hero-image-scale, 1.3));
    }
}

@keyframes slide-image-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide 1 et slide 3: apparition de l'image par opacite uniquement */
.carousel-slide.hot-slide.is-active .hot-girl-img,
.carousel-slide.note-edge-slide.is-active .note-edge-img {
    animation: slide-image-fade-in 2s ease-out forwards;
    animation-delay: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-slide .subtitle,
    .carousel-slide .hero-title,
    .carousel-slide .hero-paragraphe,
    .carousel-slide .btn-anim,
    .carousel-slide .btn-anim-2,
    .carousel-slide .phone-detail-img {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .carousel-slide.note-edge-slide.is-active {
        animation: none !important;
    }

    .carousel-slide.spark-slide.is-active {
        animation: none !important;
    }

    .carousel-slide.hot-slide.is-active {
        animation: none !important;
    }

    .carousel-slide.hot-slide::before {
        animation: none !important;
        opacity: 1;
    }

    .carousel-slide.note-edge-slide::after {
        animation: none !important;
        transform: translate3d(0, -50%, 0);
    }

    .carousel-slide.spark-slide::after {
        animation: none !important;
        transform: translate3d(0, -50%, 0);
    }

    .carousel-slide.joy-slide.is-active {
        animation: none !important;
    }

    .carousel-slide.joy-slide::before {
        animation: none !important;
        transform: none;
    }
}

/* --- Slide NOTE Edge --- */
.carousel-slide.intro-slide {
    position: relative;
    padding: 0;
    align-items: stretch;
    animation: none;
}

.carousel-slide.intro-slide .intro-media {
    height: 100%;
}

.carousel-slide.intro-slide picture,
.carousel-slide.intro-slide .intro-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-slide.note-edge-slide {
    position: relative;
    padding: 8px 0;
    background:
        radial-gradient(135% 130% at 30% 68%, #aeb0b4 0%, #c4c5c8 42%, #efefef 100%),
        linear-gradient(135deg, #cbcccf 0%, #e0e0e2 52%, #f4f4f4 100%);
    overflow: hidden;
    z-index: 0;
}

.carousel-slide.note-edge-slide.is-active {
    animation: none;
}

.carousel-slide.note-edge-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(48% 42% at 88% 16%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(42% 38% at 22% 80%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.carousel-slide.note-edge-slide::after {
    content: "";
    position: absolute;
    width: min(64vw, 930px);
    height: min(64vw, 930px);
    right: clamp(-280px, -18vw, -140px);
    top: 50%;
    transform: translate3d(0, -50%, 0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

.carousel-slide.note-edge-slide > * {
    position: relative;
    z-index: 1;
}

.note-edge-title {
    color: #30333d;
    letter-spacing: 0;
    line-height: 1;
}

.note-edge-description {
    color: #3e424b;
    font-size: 1.05rem;
    line-height: 1.42;
    max-width: 34rem;
}

.note-edge-price {
    color: #30333d;
    font-size: clamp(1.3rem, 2.15vw, 2.85rem);
    font-weight: 600;
    line-height: 1.22;
}

.note-edge-price span {
    color: #30333d;
}

.carousel-slide.note-edge-slide .note-edge-cta {
    background-color: #32333d;
    border-color: #32333d;
    color: #ffffff;
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(40, 42, 50, 0.24);
    letter-spacing: 0.2px;
}

.carousel-slide.note-edge-slide .note-edge-cta:hover {
    background-color: #ffffff;
    color: #1f1f1f;
    border-color: #32333d;
}

.carousel-slide.note-edge-slide .hero-image {
    --hero-image-scale: 1.02;
}

.carousel-slide.note-edge-slide .note-edge-media {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: clamp(0rem, 2vw, 2.3rem);
}

.carousel-slide.note-edge-slide .note-edge-img {
    width: 65%;
    max-width: clamp(430px, 54vw, 980px);
    filter: drop-shadow(0 28px 52px rgba(76, 78, 84, 0.25));
}

@keyframes note-edge-bg-morph {
    from {
        transform: translate3d(12%, -50%, 0);
    }
    to {
        transform: translate3d(0, -50%, 0);
    }
}

.carousel-slide.note-edge-slide.is-active::after {
    animation: note-edge-bg-morph 2s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

/* --- Slide Infinix HOT  --- */
.carousel-slide.hot-slide {
    position: relative;
    background-color: #efeaeb;
    overflow: hidden;
}

.carousel-slide.hot-slide::before {
    content: none;
}

.carousel-slide.hot-slide > * {
    position: relative;
    z-index: 1;
}

.carousel-slide.hot-slide .hot-media {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: clamp(0rem, 2vw, 2rem);
}

.carousel-slide.hot-slide .hero-image {
    --hero-image-scale: 1;
}

.carousel-slide.hot-slide .hot-girl-img {
    width: 100%;
    max-width: clamp(35vw, 38vw, 700px);
}

.carousel-slide.hot-slide .hot-highlight {
    color: var(--primary-red);
}

.carousel-slide.hot-slide .hot-description {
    max-width: 34rem;
    color: #3f434a;
    font-size: 1.05rem;
    line-height: 1.42;
}

.carousel-slide.hot-slide .hot-price {
    color: #333640;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.carousel-slide.hot-slide .hot-price span {
    color: var(--primary-red);
}

.carousel-slide.hot-slide .btn-custom-red {
    border-radius: 0 !important;
}

@keyframes hot-bg-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.carousel-slide.hot-slide.is-active {
    animation: none;
}

.carousel-slide.hot-slide.is-active::before {
    animation: hot-bg-fade 2s ease both;
    animation-delay: 0.5s;
}

/* --- Slide Tecno Spark --- */
.carousel-slide.spark-slide {
    position: relative;
    padding: 8px 0;
    background:
        radial-gradient(120% 130% at 30% 58%, #deecef 0%, #bddfe4 46%, #8ecad2 100%),
        linear-gradient(135deg, #ccedf2 0%, #9bd6dd 52%, #86c7d0 100%);
    overflow: hidden;
    z-index: 0;
}

.carousel-slide.spark-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58% 65% at 68% 66%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 56%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(48% 46% at 88% 15%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.carousel-slide.spark-slide::after {
    content: "";
    position: absolute;
    width: min(58vw, 880px);
    height: min(58vw, 880px);
    right: clamp(-220px, -14vw, -120px);
    top: 50%;
    transform: translate3d(0, -50%, 0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 68%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.92;
}

.carousel-slide.spark-slide > * {
    position: relative;
    z-index: 1;
}

.carousel-slide.spark-slide .subtitle {
    color: #2a62ad;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    letter-spacing: 0.2px;
    opacity: 1;
}

.carousel-slide.spark-slide .spark-title {
    color: #225fb5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.8rem;
    line-height: 1;
}

.carousel-slide.spark-slide .spark-title-main {
    color: #225fb5;
}

.carousel-slide.spark-slide .spark-title-accent {
    color: #2f3440;
}

.carousel-slide.spark-slide .spark-description {
    color: #3f4852;
    max-width: 33rem;
    font-size: clamp(1rem, 1.14vw, 1rem);
    line-height: 1.44;
}

.carousel-slide.spark-slide .spark-price {
    color: #2f3440;
    font-size: clamp(1.3rem, 2.2vw, 2.9rem);
    font-weight: 600;
    line-height: 1.25;
}

.carousel-slide.spark-slide .spark-price span {
    color: #215eb4;
}

.carousel-slide.spark-slide .spark-cta {
    background-color: #2466bd;
    border-color: #2466bd;
    border-radius: 0;
    box-shadow: 0 14px 32px rgba(30, 96, 177, 0.25);
    letter-spacing: 0.2px;
}

.carousel-slide.spark-slide .spark-cta:hover {
    background-color: #ffffff;
    color: #1c1c1c;
    border-color: #2466bd;
}

.carousel-slide.spark-slide .btn-custom-red {
    text-transform: none;
}

.carousel-slide.spark-slide .spark-media {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: clamp(0rem, 2vw, 2rem);
}

.carousel-slide.spark-slide .hero-image {
    --hero-image-scale: 1.08;
}

.carousel-slide.spark-slide .spark-phone-img {
    width: 100%;
    max-width: clamp(380px, 48vw, 760px);
    filter: drop-shadow(0 22px 46px rgba(52, 99, 149, 0.22));
}

@keyframes spark-bg-morph {
    from {
        transform: translate3d(12%, -50%, 0);
    }
    to {
        transform: translate3d(0, -50%, 0);
    }
}

.carousel-slide.spark-slide.is-active {
    animation: none;
}

.carousel-slide.spark-slide.is-active::after {
    animation: spark-bg-morph 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

/* --- Slide Joy Violet --- */
.carousel-slide.joy-slide {
    position: relative;
    background: transparent;
    overflow: hidden;
    z-index: 0;
}

.carousel-slide.joy-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(56% 74% at 66% 42%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(40% 54% at 58% 92%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 78%);
    z-index: 0;
    pointer-events: none;
}

.carousel-slide.joy-slide > * {
    position: relative;
    z-index: 1;
}

.carousel-slide.note-edge-slide .subtitle{
    color: #30333d;
}

.carousel-slide.joy-slide .subtitle {
    color: #f7eaffeb;
    font-size: clamp(1rem, 1.18vw, 1.18rem);
}

.carousel-slide.joy-slide .joy-title {
    color: #f5f1fa;
    letter-spacing: 0;
    line-height: 1;
}

.carousel-slide.joy-slide .joy-description {
    color: rgba(246, 236, 255, 0.92);
    max-width: 35rem;
    font-size: clamp(1rem, 1.1vw, 1rem);
    line-height: 1.42;
}

.carousel-slide.joy-slide .joy-price {
    color: #f8f4fc;
    font-size: clamp(1.3rem, 2.15vw, 2.85rem);
    font-weight: 600;
    line-height: 1.22;
}

.carousel-slide.joy-slide .joy-price span {
    color: #f8f4fc;
}

.carousel-slide.joy-slide .joy-cta {
    background-color: #f1bfd1;
    border-color: #f1bfd1;
    color: #6f34ba;
    border-radius: 0;
    box-shadow: 0 14px 30px rgba(48, 14, 84, 0.26);
    letter-spacing: 0.2px;
}

.carousel-slide.joy-slide .joy-cta:hover {
    background-color: #ffffff;
    color: #542196;
    border-color: #ffffff;
}

.carousel-slide.joy-slide .joy-media {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: clamp(0rem, 1.8vw, 1.6rem);
}

.carousel-slide.joy-slide .hero-image {
    --hero-image-scale: 1;
}

.carousel-slide.joy-slide .joy-girl-img {
    width: 90%;
    max-width: clamp(430px, 50vw, 920px);
    filter: drop-shadow(0 18px 36px rgba(36, 6, 68, 0.35));
}

@keyframes joy-glow-morph {
    from {
        transform: translate3d(8%, 0, 0) scale(1.02);
    }
    to {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.carousel-slide.joy-slide.is-active {
    animation: none;
}

.carousel-slide.joy-slide.is-active::before {
    animation: joy-glow-morph 2.4s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.hero-carousel-dots {
    position: absolute;
    left: 113px;
    bottom: 150px;
    z-index: 12;
}

/* --- Indicateurs de pagination --- */
.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dark-grey);
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-dot.active {
    background-color: var(--primary-red);
}

.carousel-dot[data-dot="1"].active {
    background-color: #225fb5;
}

.carousel-dot[data-dot="2"].active {
    background-color: #9B9B9D;
}

.carousel-dot[data-dot="3"].active {
    background-color: #f1bfd1;
}

/* --- Section Nos Smartphones (Marque chips) --- */
.marque-chip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marque-chip li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 2.6rem;
    background: #ffffff;
    border: 1.5px solid #222222;
    color: #111111;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    min-width: 160px;
    max-width: 240px;
    text-align: center;
}

/* Smaller screens: stack and reduce padding */
@media (max-width: 767.98px) {
    .marque-chip.w-50 {
        width: 90% !important;
    }
    .marque-chip {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .marque-chip li {
        padding: 0.45rem 1rem;
        min-width: auto;
        font-size: 0.95rem;
    }
}


.section-title {
    color: #3b3b3b;
    font-size: 4rem;
    letter-spacing: -0.5px;
}

/* Scroll reveal (style type Framer Motion) */
body.has-scroll-anim .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 24px), 0) scale(var(--reveal-scale, 1));
    transition:
        opacity 4s cubic-bezier(0.19, 1, 0.22, 1),
        transform 4s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

body.has-scroll-anim .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: var(--reveal-delay, 0ms);
}

.section-title.reveal-on-scroll {
    --reveal-y: 16px;
}

.reveal-fade {
    --reveal-x: 0;
    --reveal-y: 0;
}

.reveal-from-left {
    --reveal-x: -32px;
    --reveal-y: 0;
}

.reveal-from-bottom {
    --reveal-x: 0;
    --reveal-y: 28px;
}

.reveal-from-right {
    --reveal-x: 32px;
    --reveal-y: 0;
}

.reveal-zoom {
    --reveal-x: 0;
    --reveal-y: 0;
    --reveal-scale: 0.92;
}

@media (prefers-reduced-motion: reduce) {
    body.has-scroll-anim .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Fly-in animations (section Besoin d'aide) - réversibles pour scroll up */
.fly-left,
.fly-right,
.fly-up,
.fly-down {
    opacity: 0;
    transition:
        opacity 0.85s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.fly-left {
    transform: translateX(-80px) scale(0.96);
}

.fly-right {
    transform: translateX(80px) scale(0.96);
}

.fly-up {
    transform: translateY(50px) scale(0.97);
}

.fly-down {
    transform: translateY(-40px);
}

.fly-left.fly-visible,
.fly-right.fly-visible,
.fly-up.fly-visible,
.fly-down.fly-visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}

.fly-up.fly-d1 {
    transition-delay: 0.08s;
}

.fly-up.fly-d2 {
    transition-delay: 0.16s;
}

.fly-up.fly-d3 {
    transition-delay: 0.24s;
}

.fly-up.fly-d4 {
    transition-delay: 0.32s;
}

.fly-up.fly-d5 {
    transition-delay: 0.40s;
}

.fly-up.fly-d6 {
    transition-delay: 0.50s;
}

@media (prefers-reduced-motion: reduce) {
    .fly-left,
    .fly-right,
    .fly-up,
    .fly-down {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.smartphones-cta {
    min-width: 350px;
    min-height: 60px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 200;
    padding: 0.5rem 2rem;
}
/* Bouton interactif rouge (Style Carrousel) */
.btn-slider-next {
    width: 60px;
    height: 60px;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center;
    z-index: 20;
    padding: 0;
    box-shadow: 0 4px 15px rgba(225, 43, 62, 0.4);
}

.btn-slider-next:hover {
    transform: translateY(-50%) scale(0.85) !important;
}

/* --- Section Services --- */
.icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.service-item:hover .icon-circle {
    transform: rotate(10deg) scale(1.1);
}

.service-item h4 {
    font-weight: 550;
    color: #2a2a2a;
    font-size: 1.8rem;
}

/* Carte CTA Rouge */
.service-cta-card {
    background-color: var(--primary-red);
    box-shadow: 0 10px 30px rgba(225, 43, 62, 0.2);
    transition: transform 0.3s ease;
    cursor: default;
}

.service-cta-card:hover {
    transform: translateY(-5px);
}

.service-cta-card h4 {
    font-size: 1.8rem;
    line-height: 1.3;
}

/* --- Section Présentation Vidéo --- */
.video-section {
    background: linear-gradient(135deg, #7541BE 0%, #A34492 50%, #E04A5B 100%);
    position: relative;
    overflow: hidden;
}

.video-title {
    line-height: 1;
    letter-spacing: 3px;
}

.video-paragraph {
    font-size: 1.1rem;
}

.subtitle.letter-spacing-1 {
    letter-spacing: 2px;
}

/* Image / Thumbnail de la vidéo */
.video-thumbnail-container {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
}

.video-thumbnail-container:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4) !important;
}

/* Style de l'icône de lecture (Play) */
.play-icon-overlay {
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.video-thumbnail-container:hover .play-icon-overlay {
    transform: translate(-50%, -50%) scale(1.15);
}

.play-icon-overlay svg circle {
    transition: stroke-width 0.3s ease;
}

.video-thumbnail-container:hover .play-icon-overlay svg circle {
    stroke-width: 6;
}

/* --- Video Modal --- */
body.video-modal-open {
    overflow: hidden;
}

.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 9999;
}

.video-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-modal__dialog {
    width: min(960px, 92vw);
    background: #000;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.video-modal__frame {
    aspect-ratio: 16 / 9;
}

.video-modal__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.video-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.video-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- App Download Modal --- */
body.app-download-modal-open {
    overflow: hidden;
}

.app-download-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 10000;
}

.app-download-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-download-modal__dialog {
    position: relative;
    width: min(430px, 92vw);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.app-download-modal__content {
    padding: 2rem;
    text-align: center;
}

.app-download-modal__eyebrow {
    margin: 0 0 0.45rem;
    color: var(--primary-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.app-download-modal__content h2 {
    margin: 0;
    color: #171717;
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: 0;
}

.app-download-modal__text {
    max-width: 21rem;
    margin: 0.8rem auto 1.35rem;
    color: #5f6268;
    font-size: 0.98rem;
    line-height: 1.5;
}

.app-download-modal__qr {
    width: min(240px, 70vw);
    aspect-ratio: 1;
    margin: 0 auto 1.35rem;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.app-download-modal__qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.app-download-modal__direct {
    width: 100%;
    padding: 0.85rem 1.2rem;
    font-weight: 800;
}

.app-download-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f2f2f2;
    color: #171717;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.app-download-modal__close:hover {
    background: #171717;
    color: #ffffff;
}

/* --- Section Contact --- */
.contact-person-img {
    max-height: 550px;
    width: auto;
    display: block;
    transform: scale(1.2);
    margin: 0 auto;
}

/* Style des champs de saisie */
.custom-input {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

.custom-input:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 0.25 margin-bottom rgba(225, 43, 62, 0.1);
    outline: none;
}

.custom-input::placeholder {
    color: #adb5bd;
    opacity: 0.7;
}

/* Étiquettes (Labels) */
.form-label {
    color: #444;
    margin-bottom: 0.4rem;
}

/* Animation au survol du bouton "Envoyer" spécifique */
.contact-form .btn-custom-red {
    font-size: 1.1rem;
    text-transform: none; /* Reste fidèle à la maquette */
    letter-spacing: 0.5px;
}

.btn.btn-custom-red{
    border-radius: 0 !important;
}

/* --- Footer Section --- */
.footer-section {
    /* Rappel du dégradé du Hero pour boucler la page */
    background-color: #fff7f5;
    color: #333;
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-title {
    font-size: 1.1rem;
    color: #2a2a2a;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    text-decoration: none;
    color: #555;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-red);
    padding-left: 5px;
}

/* Icônes Sociales (Cercles blancs) */
.social-icon {
    width: 38px;
    height: 38px;
    background-color: #fff;
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--primary-red);
    color: #fff;
    transform: translateY(-3px);
}

.copyright-text {
    letter-spacing: 1px;
    color: #666;
}

/* Ajustement spécifique pour très grands écrans */
@media (min-width: 1600px) {
    .carousel-slide.hot-slide .hot-girl-img {
        max-width: clamp(500px, 42vw, 600px);
    }

    .carousel-slide.joy-slide .joy-girl-img {
        max-width: clamp(500px, 42vw, 800px);
    }
}

/* Responsive */
@media (max-width: 767.98px) {
    .contact-person-img {
        max-height: 350px;
        margin-bottom: 2rem;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    .footer-section {
        text-align: center;
    }
    
    .footer-section .d-flex {
        justify-content: center;
    }
}

/* Ajustement spécifique pour mobile */
@media (max-width: 991.98px) {
    .video-section .col-lg-5 {
        max-width: 500px; /* Évite que l'image soit trop grande sur tablettes */
        margin: 0 auto;
    }

    .hero-title {
        font-size: 3.2rem;
        line-height: 1.1;
        letter-spacing: 2px;
    }

    .carousel-slides {
        height: clamp(540px, 80vh, 760px);
    }

    .hero-image {
        --hero-image-scale: 1.15;
    }

    .phone-detail-img {
        max-width: 380px;
    }

    .carousel-slide.note-edge-slide .note-edge-media {
        justify-content: center;
        padding-right: 0;
    }

    .carousel-slide.note-edge-slide .note-edge-img {
        max-width: min(86vw, 620px);
    }

    .note-edge-description {
        max-width: 100%;
    }

    .carousel-slide.hot-slide .hot-girl-img {
        max-width: clamp(320px, 56vw, 620px);
    }

    .carousel-slide.hot-slide .hot-description {
        max-width: 100%;
        font-size: 1rem;
    }

    .carousel-slide.hot-slide .hot-price {
        font-size: 1.7rem;
    }

    .carousel-slide.spark-slide .spark-title {
        gap: 0 0.55rem;
    }

    .carousel-slide.spark-slide .spark-media {
        justify-content: center;
        padding-right: 0;
    }

    .carousel-slide.spark-slide .spark-phone-img {
        max-width: min(84vw, 520px);
    }

    .hero-carousel-dots {
        left: clamp(1rem, 5vw, 3.2rem);
        bottom: clamp(20px, 4vh, 42px);
    }

    .carousel-slide.joy-slide .joy-media {
        justify-content: center;
        padding-right: 0;
    }

    .carousel-slide.joy-slide .joy-girl-img {
        max-width: min(84vw, 560px);
    }

    .carousel-slide.joy-slide .joy-description {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .hero-title {
        font-size: 2.6rem;
        line-height: 1.1;
        letter-spacing: 1px;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .carousel-slide {
        margin-top: 1.5rem !important;
    }

    .carousel-slides {
        height: clamp(600px, 90vh, 840px);
    }

    .hero-image {
        --hero-image-scale: 1.05;
    }

    .phone-detail-img {
        max-width: 320px;
    }

    .carousel-slide.note-edge-slide {
        padding: 16px 0;
    }

    .carousel-slide.note-edge-slide .note-edge-media {
        justify-content: center;
        padding-right: 0;
        margin-top: 0.75rem;
    }

    .carousel-slide.note-edge-slide .note-edge-img {
        max-width: min(92vw, 460px);
    }

    .note-edge-title {
        letter-spacing: 0.2px;
    }

    .note-edge-description {
        max-width: 100%;
        font-size: 0.96rem;
    }

    .note-edge-price {
        font-size: 1.75rem;
    }

    .carousel-slide.hot-slide .hot-media {
        justify-content: center;
        padding-right: 0;
        margin-top: 0.75rem;
    }

    .carousel-slide.hot-slide .hot-girl-img {
        max-width: min(92vw, 440px);
        transform: translate3d(0, 8px, 0);
    }

    .carousel-slide.hot-slide .hot-description {
        font-size: 0.96rem;
    }

    .carousel-slide.hot-slide .hot-price {
        font-size: 1.45rem;
    }

    .carousel-slide.spark-slide .spark-title {
        justify-content: center;
    }

    .carousel-slide.spark-slide .spark-description {
        max-width: 100%;
    }

    .carousel-slide.spark-slide .spark-price {
        font-size: 1.85rem;
    }

    .carousel-slide.spark-slide .spark-media {
        justify-content: center;
        padding-right: 0;
        margin-top: 0.75rem;
    }

    .carousel-slide.spark-slide .spark-phone-img {
        max-width: min(90vw, 420px);
    }

    .smartphones-cta {
        min-width: 260px;
        min-height: 58px;
        font-size: 1rem;
        width: 100%;
        max-width: 360px;
    }

    .hero-carousel-dots {
        left: 50%;
        bottom: clamp(16px, 2.6vh, 28px);
        transform: translateX(-50%);
    }

    .carousel-slide.joy-slide .joy-media {
        justify-content: center;
        padding-right: 0;
        margin-top: 0.75rem;
    }

    .carousel-slide.joy-slide .joy-girl-img {
        max-width: min(92vw, 430px);
    }

    .carousel-slide.joy-slide .joy-description {
        max-width: 100%;
        font-size: 0.96rem;
    }

    .carousel-slide.joy-slide .joy-price {
        font-size: 1.75rem;
    }
}

/* Ajustement pour l'alignement sur mobile */
@media (max-width: 768px) {
    .service-item {
        margin-bottom: 1.5rem;
    }
}

/* Responsive : ajustement du bouton sur mobile */
@media (max-width: 768px) {
    .btn-slider-next {
        right: 15px; /* On rentre le bouton dans le conteneur sur petit écran */
    }
}

/* --- Corrections mobile/tablette pour le hero carousel --- */
@media (max-width: 991.98px) {
    .header-top {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .header-top {
        row-gap: 0.75rem;
    }

    .header-top .text-end {
        width: 100%;
        text-align: center !important;
    }

    .carousel-slides {
        height: auto;
        min-height: 0;
    }

    .carousel-slide {
        margin-top: 0 !important;
        padding: 1rem 0.75rem 0.5rem;
    }

    .carousel-slide [class$="-content"] {
        margin-bottom: 1.25rem !important;
        text-align: center !important;
    }

    .carousel-slide .subtitle,
    .carousel-slide .hero-title,
    .carousel-slide .hero-paragraphe {
        margin-left: auto;
        margin-right: auto;
    }

    .carousel-slide .btn-anim {
        width: 100%;
    }

    .carousel-slide .btn-anim .btn-custom-red {
        width: min(100%, 280px);
    }

    .carousel-slide .phone-detail-img {
        max-width: min(88vw, 380px);
    }

    .carousel-slide .hot-media,
    .carousel-slide .spark-media,
    .carousel-slide .note-edge-media,
    .carousel-slide .joy-media {
        min-height: 220px;
        margin-top: 0.25rem;
    }

    .hero-carousel-dots {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        justify-content: center;
        margin-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .carousel-slides .ps-md-5{
        padding-left: 0 !important;
    }
}

/* --- Hero carousel fullscreen override from final mockup --- */
.hero-wrapper {
    position: relative;
    width: 100%;
}

.hero-carousel {
    position: relative;
    width: 100%;
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
}

.carousel-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.carousel-slide.is-active {
    display: flex !important;
}

.hot-media,
.spark-media,
.note-edge-media,
.joy-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: block !important;
    z-index: 0 !important;
}

.hot-media img,
.spark-media img,
.note-edge-media img,
.joy-media img,
.hot-media picture img,
.spark-media picture img,
.note-edge-media picture img,
.joy-media picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
}

.carousel-slide .hero-image {
    --hero-image-scale: 1 !important;
    transform: none !important;
}

.hot-content,
.spark-content,
.note-edge-content,
.joy-content {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 680px !important;
    padding: 0 0 5rem 6rem !important;
    text-align: left !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex: 0 0 auto !important;
}

.carousel-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.05) 70%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: auto !important;
    transform: none !important;
}

.carousel-slide.spark-slide::after,
.carousel-slide.note-edge-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0) 70%
    ) !important;
    animation: none !important;
}

.carousel-slide .hero-title,
.carousel-slide .note-edge-title,
.carousel-slide .joy-title {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.carousel-slide .subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

.carousel-slide .hero-paragraphe,
.carousel-slide .hot-description,
.carousel-slide .spark-description,
.carousel-slide .note-edge-description,
.carousel-slide .joy-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

.carousel-slide .hot-price,
.carousel-slide .spark-price,
.carousel-slide .note-edge-price,
.carousel-slide .joy-price {
    color: #ffffff !important;
}

.carousel-slide .hot-price span,
.carousel-slide .spark-price span {
    color: #ffffff !important;
}

.carousel-slide.spark-slide .spark-title,
.carousel-slide.spark-slide .spark-title-main,
.carousel-slide.spark-slide .spark-title-accent {
    color: #ffffff !important;
}

.carousel-slide.spark-slide .subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

.header-top {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(1.5rem, 4vw, 4rem) !important;
    padding-left: clamp(1rem, 4vw, 3rem) !important;
    padding-right: clamp(21rem, 35vw, 35rem) !important;
}

.hero-carousel-dots {
    position: absolute !important;
    left: auto !important;
    right: 3rem !important;
    bottom: 2.5rem !important;
    z-index: 12 !important;
    transform: none !important;
}

.carousel-dot[data-dot="4"].active {
    background-color: #e12b3e;
}

.carousel-dot[data-dot="5"].active {
    background-color: #b5714a;
}

@media (max-width: 991.98px) {
    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content {
        padding: 0 0 4rem 3rem !important;
        max-width: 560px !important;
    }

    .header-top {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        grid-template-columns: auto !important;
        justify-content: center !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .carousel-slides {
        height: calc(100vh - 70px) !important;
        min-height: calc(100vh - 70px) !important;
    }
}

@media (max-width: 767.98px) {
    .header-actions {
        top: auto;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: calc(100vw - 2rem);
    }

    .header-actions .btn {
        padding: 0.62rem 0.9rem !important;
        font-size: 0.78rem;
    }

    .header-actions .btn-download-app {
        width: auto;
        padding: 0.72rem 1rem !important;
        font-size: 0.82rem;
    }

    .carousel-slides {
        height: 100svh !important;
        min-height: 100svh !important;
    }

    .carousel-slide {
        align-items: flex-end !important;
    }

    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content {
        padding: 0 1.25rem 3.5rem 1.25rem !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .hero-carousel-dots {
        right: 50% !important;
        transform: translateX(50%) !important;
        bottom: 1.2rem !important;
    }

    .header-top {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        justify-content: center !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .header-brand {
        justify-content: center;
    }
}

/* GT slide */
.carousel-slide.gt-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #c8c8c8;
    z-index: 0;
}

.gt-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.gt-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

.gt-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 700px !important;
    padding: 0 0 4rem 6rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

@media (max-width: 991.98px) {
    .gt-content {
        padding: 0 0 3.5rem 3rem !important;
        max-width: 560px !important;
    }
}

@media (max-width: 767.98px) {
    .gt-content {
        padding: 0 1.25rem 3.5rem 1.25rem !important;
        max-width: 100% !important;
    }
}

/* Tsain'phonie slide */
.carousel-slide.tsain-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #f5ede6;
    z-index: 0;
}

.tsain-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.tsain-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
}

.carousel-slide.tsain-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to right,
        rgba(245, 237, 230, 0.92) 0%,
        rgba(245, 237, 230, 0.75) 35%,
        rgba(245, 237, 230, 0.2) 60%,
        rgba(245, 237, 230, 0) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: auto !important;
    transform: none !important;
    animation: none !important;
}

.tsain-content {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 3 !important;
    width: 52% !important;
    max-width: 680px !important;
    padding: 0 3rem 0 6rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.carousel-slide.tsain-slide .subtitle {
    color: #b5714a !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.4px !important;
}

.tsain-title {
    color: #1a1a1a !important;
    font-size: clamp(1.8rem, 3vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    font-family: 'Montserrat', sans-serif !important;
    transform: scaleY(0.95) !important;
}

.tsain-description {
    color: #444 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.tsain-price {
    color: #1a1a1a !important;
    font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.tsain-price span {
    color: #1a1a1a !important;
}

.tsain-cta {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.tsain-cta:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important;
    transform: scale(1) !important;
    border: none !important;
}

.carousel-slide.tsain-slide .subtitle,
.carousel-slide.tsain-slide .tsain-title,
.carousel-slide.tsain-slide .tsain-description,
.carousel-slide.tsain-slide .tsain-price {
    opacity: 0;
    will-change: transform, opacity;
}

.carousel-slide.tsain-slide .btn-anim {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity;
}

.carousel-slide.tsain-slide.is-active .subtitle {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.carousel-slide.tsain-slide.is-active .tsain-title {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.05s;
}

.carousel-slide.tsain-slide.is-active .tsain-description {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

.carousel-slide.tsain-slide.is-active .tsain-price {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
}

.carousel-slide.tsain-slide.is-active .btn-anim {
    animation: ppt-morph-left 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.2s;
}

.carousel-slide.tsain-slide.is-active .tsain-img {
    animation: slide-image-fade-in 2s ease-out forwards;
    animation-delay: 0.05s;
}

@media (max-width: 991.98px) {
    .tsain-content {
        width: 60% !important;
        padding: 0 2rem 0 3rem !important;
    }
}

@media (max-width: 767.98px) {
    .tsain-content {
        width: 100% !important;
        padding: 0 1.25rem 3.5rem 1.25rem !important;
        justify-content: flex-end !important;
    }
    .carousel-slide.tsain-slide::after {
        background: linear-gradient(
            to top,
            rgba(245, 237, 230, 0.95) 0%,
            rgba(245, 237, 230, 0.7) 50%,
            rgba(245, 237, 230, 0) 100%
        ) !important;
    }

    .tsain-title {
        color: #1a1a1a !important;
    }
}

/* --- Hero carousel: responsive refinements --- */
.hero-carousel {
    --hero-content-pad-x: clamp(1rem, 5vw, 6rem);
    --hero-content-pad-bottom: clamp(2.5rem, 6vh, 5rem);
}

.hot-content,
.spark-content,
.note-edge-content,
.joy-content,
.gt-content {
    max-width: min(680px, calc(100% - (var(--hero-content-pad-x) * 2))) !important;
}

@media (max-width: 1199.98px) {
    .header-top {
        column-gap: 1.5rem;
        padding-right: clamp(18rem, 43vw, 31rem);
    }

    .header-top .text-slogan {
        max-width: min(100%, 430px);
        font-size: 1.05rem;
    }

    .header-actions .btn {
        padding: 0.8rem 1.15rem !important;
        font-size: 0.86rem;
    }

    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content,
    .gt-content {
        max-width: min(600px, calc(100% - (var(--hero-content-pad-x) * 2))) !important;
    }

    .hero-carousel-dots {
        right: clamp(1rem, 3vw, 2rem) !important;
    }
}

@media (max-width: 991.98px) {
    .carousel-slides {
        height: min(100dvh, 860px) !important;
        min-height: min(100dvh, 860px) !important;
    }

    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content,
    .gt-content {
        padding: 0 var(--hero-content-pad-x) var(--hero-content-pad-bottom) var(--hero-content-pad-x) !important;
    }

    .tsain-content {
        width: min(100%, 560px) !important;
        max-width: min(560px, calc(100% - (var(--hero-content-pad-x) * 2))) !important;
        top: auto !important;
        bottom: 0 !important;
        padding: 0 var(--hero-content-pad-x) var(--hero-content-pad-bottom) var(--hero-content-pad-x) !important;
        justify-content: flex-end !important;
    }

    .hero-carousel-dots {
        bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 767.98px) {
    .carousel-slides {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content,
    .gt-content,
    .tsain-content {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding:
            0 max(1rem, env(safe-area-inset-right))
            calc(3.4rem + env(safe-area-inset-bottom))
            max(1rem, env(safe-area-inset-left)) !important;
    }

    .carousel-slide .subtitle {
        font-size: clamp(0.74rem, 2.4vw, 0.88rem) !important;
        margin-bottom: 0.45rem !important;
    }

    .carousel-slide .hero-title,
    .carousel-slide .note-edge-title,
    .carousel-slide .joy-title,
    .gt-content .hero-title,
    .tsain-title {
        font-size: clamp(1.55rem, 7.8vw, 2.45rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        margin-bottom: 0.45rem !important;
    }

    .carousel-slide .hero-paragraphe,
    .carousel-slide .hot-description,
    .carousel-slide .spark-description,
    .carousel-slide .note-edge-description,
    .carousel-slide .joy-description,
    .tsain-description {
        font-size: clamp(0.82rem, 2.9vw, 0.98rem) !important;
        line-height: 1.34 !important;
    }

    .carousel-slide .hot-price,
    .carousel-slide .spark-price,
    .carousel-slide .note-edge-price,
    .carousel-slide .joy-price,
    .tsain-price,
    .gt-content .hero-paragraphe:last-of-type {
        font-size: clamp(1.2rem, 5.4vw, 1.75rem) !important;
        line-height: 1.15 !important;
    }

    .carousel-slide .btn-anim {
        margin-top: 0.9rem !important;
        width: 100% !important;
    }

    .carousel-slide .btn-anim .btn-custom-red {
        width: min(100%, 270px) !important;
        font-size: 0.9rem !important;
        padding: 0.72rem 1.2rem !important;
    }

    .carousel-slide [class$="-content"] > img {
        max-height: clamp(30px, 6vw, 46px) !important;
        width: auto !important;
        margin-bottom: 0.45rem !important;
    }

    .hero-carousel-dots {
        right: 50% !important;
        transform: translateX(50%) !important;
        bottom: calc(0.7rem + env(safe-area-inset-bottom)) !important;
        gap: 0.55rem !important;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }

    .header-top {
        padding:
            max(0.6rem, env(safe-area-inset-top))
            0.9rem
            0.65rem !important;
    }
}

@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 500px) {
    .carousel-slide .subtitle {
        display: none !important;
    }

    .hot-content,
    .spark-content,
    .note-edge-content,
    .joy-content,
    .gt-content,
    .tsain-content {
        padding-bottom: calc(2.6rem + env(safe-area-inset-bottom)) !important;
    }

    .carousel-slide .hero-title,
    .carousel-slide .note-edge-title,
    .carousel-slide .joy-title,
    .gt-content .hero-title,
    .tsain-title {
        font-size: clamp(1.2rem, 4.8vw, 1.65rem) !important;
        margin-bottom: 0.28rem !important;
    }

    .carousel-slide .hero-paragraphe,
    .carousel-slide .hot-description,
    .carousel-slide .spark-description,
    .carousel-slide .note-edge-description,
    .carousel-slide .joy-description,
    .tsain-description {
        font-size: clamp(0.74rem, 2.2vw, 0.88rem) !important;
        line-height: 1.24 !important;
    }

    .carousel-slide .btn-anim .btn-custom-red {
        width: min(100%, 220px) !important;
        font-size: 0.82rem !important;
        padding: 0.56rem 0.95rem !important;
    }
}

/* --- Hero carousel: mobile image downscale tuning --- */
@media (max-width: 767.98px) {
    .carousel-slide {
        --hero-mobile-image-scale: 0.9;
    }

    .carousel-slide.hot-slide {
        --hero-mobile-image-scale: 0.86;
    }

    .carousel-slide.spark-slide {
        --hero-mobile-image-scale: 0.88;
    }

    .carousel-slide.note-edge-slide {
        --hero-mobile-image-scale: 0.9;
    }

    .carousel-slide.joy-slide {
        --hero-mobile-image-scale: 0.88;
    }

    .carousel-slide.gt-slide {
        --hero-mobile-image-scale: 0.9;
    }

    .carousel-slide.tsain-slide {
        --hero-mobile-image-scale: 0.9;
    }

    .hot-media img,
    .spark-media img,
    .note-edge-media img,
    .joy-media img,
    .gt-media img,
    .tsain-media img,
    .hot-media picture img,
    .spark-media picture img,
    .note-edge-media picture img,
    .joy-media picture img {
        transform: scale(var(--hero-mobile-image-scale)) !important;
        transform-origin: center bottom !important;
        object-position: center center !important;
    }
}

@media (max-width: 575.98px) {
    .carousel-slide {
        --hero-mobile-image-scale: 0.86;
    }

    .carousel-slide.hot-slide {
        --hero-mobile-image-scale: 0.82;
    }

    .carousel-slide.spark-slide {
        --hero-mobile-image-scale: 0.84;
    }

    .carousel-slide.joy-slide {
        --hero-mobile-image-scale: 0.84;
    }
}