@layer components {
    /*
     * Le visuel occupe davantage la colonne droite sur ordinateur.
     * Ce fichier est chargé après app.css et remplace les anciennes dimensions.
     */

    /*
     * Palette propre au hero.
     *
     * Le thème clair utilise une déclinaison chaude issue des couleurs déjà
     * présentes dans Shapline : rouge rosé, pêche et orange doux.
     *
     * Le thème sombre conserve volontairement l'apparence historique du hero.
     */
    :root {
        --hero-text: #35151c;
        --hero-text-soft: rgba(53, 21, 28, 0.72);
        --hero-border: rgba(112, 48, 42, 0.14);
        --hero-grid: rgba(112, 48, 42, 0.055);
        --hero-media-border: rgba(112, 48, 42, 0.16);
        --hero-media-background: rgba(255, 255, 255, 0.46);
        --hero-media-shadow: 0 32px 78px rgba(115, 52, 39, 0.18);
        --hero-glass-background: rgba(255, 255, 255, 0.5);
        --hero-glass-background-hover: rgba(255, 255, 255, 0.72);
        --hero-glass-border: rgba(112, 48, 42, 0.16);
        --hero-dot: rgba(53, 21, 28, 0.28);
        --hero-dot-active: var(--primary);
    }

    :root[data-theme="dark"] {
        --hero-text: #ffffff;
        --hero-text-soft: rgba(255, 255, 255, 0.72);
        --hero-border: rgba(255, 255, 255, 0.12);
        --hero-grid: rgba(255, 255, 255, 0.035);
        --hero-media-border: rgba(255, 255, 255, 0.18);
        --hero-media-background: rgba(255, 255, 255, 0.07);
        --hero-media-shadow: 0 38px 90px rgba(0, 0, 0, 0.38);
        --hero-glass-background: rgba(255, 255, 255, 0.1);
        --hero-glass-background-hover: rgba(255, 255, 255, 0.17);
        --hero-glass-border: rgba(255, 255, 255, 0.2);
        --hero-dot: rgba(255, 255, 255, 0.34);
        --hero-dot-active: #ffffff;
    }

    .hero-carousel {
        color: var(--hero-text);
        border-color: var(--hero-border);
        background:
            radial-gradient(
                circle at 78% 18%,
                rgba(229, 72, 93, 0.19),
                transparent 28rem
            ),
            radial-gradient(
                circle at 58% 92%,
                rgba(209, 141, 102, 0.3),
                transparent 29rem
            ),
            radial-gradient(
                circle at 8% 25%,
                rgba(255, 138, 98, 0.12),
                transparent 22rem
            ),
            linear-gradient(
                118deg,
                #fff8f4 0%,
                #ffe9df 44%,
                #f7cfb5 100%
            );
    }

    :root[data-theme="dark"] .hero-carousel {
        background:
            radial-gradient(
                circle at 76% 22%,
                rgba(229, 72, 93, 0.42),
                transparent 28rem
            ),
            radial-gradient(
                circle at 60% 90%,
                rgba(133, 54, 173, 0.34),
                transparent 28rem
            ),
            linear-gradient(
                118deg,
                #160a11,
                #2d1021 55%,
                #29143c
            );
    }

    .hero-carousel::after {
        background-image:
            linear-gradient(
                var(--hero-grid) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                var(--hero-grid) 1px,
                transparent 1px
            );
    }

    .hero .eyebrow {
        color: var(--primary-strong);
    }

    :root[data-theme="dark"] .hero .eyebrow {
        color: #ff9eb0;
    }

    .hero-slide p {
        color: var(--hero-text-soft);
    }

    .hero-slide__media {
        border-color: var(--hero-media-border);
        background: var(--hero-media-background);
        box-shadow: var(--hero-media-shadow);
    }

    .hero-slide__media::after {
        background:
            linear-gradient(
                to top,
                rgba(92, 43, 33, 0.12),
                transparent 45%
            );
    }

    :root[data-theme="dark"] .hero-slide__media::after {
        background:
            linear-gradient(
                to top,
                rgba(22, 7, 14, 0.32),
                transparent 45%
            );
    }

    .hero .btn--glass {
        color: var(--hero-text);
        border-color: var(--hero-glass-border);
        background: var(--hero-glass-background);
    }

    .hero .btn--glass:hover {
        color: var(--hero-text);
        background: var(--hero-glass-background-hover);
    }

    .hero .carousel-dot {
        background: var(--hero-dot);
    }

    .hero .carousel-dot.is-active {
        background: var(--hero-dot-active);
    }

    .hero-slide {
        grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
        gap: clamp(1.25rem, 3vw, 3rem);
        padding: clamp(1.75rem, 4vw, 3.75rem);
    }

    .hero-slide__media {
        width: 100%;
        max-width: 600px;
        max-height: none;
        aspect-ratio: 1 / 1;
        justify-self: end;
        transform: rotate(1.25deg);
    }

    .hero-slide__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 1100px) and (min-width: 901px) {
        .hero-slide {
            grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr);
            padding: clamp(1.75rem, 3.5vw, 3rem);
        }

        .hero-slide__media {
            max-width: 520px;
        }
    }

    /*
     * En mobile les anciennes min-height de 850 à 900 px forçaient le
     * carousel à rester beaucoup plus haut que son contenu réel.
     *
     * Les slides passent donc dans le flux normal. Seule la slide active est
     * affichée et le carousel prend automatiquement la hauteur nécessaire.
     */
    @media (max-width: 900px) {
        .hero-carousel {
            display: grid;
            min-height: 0;
        }

        .hero-slide {
            position: relative;
            inset: auto;
            display: none;
            grid-area: 1 / 1;
            grid-template-columns: 1fr;
            align-content: start;
            gap: 1.35rem;
            padding: 1.5rem clamp(1.5rem, 5vw, 3rem);
            transform: none;
        }

        .hero-slide.is-active {
            display: grid;
        }

        .hero-slide__content {
            max-width: none;
        }

        .hero-slide__media {
            width: min(100%, 560px);
            max-width: none;
            max-height: none;
            aspect-ratio: 1 / 1;
            justify-self: center;
            transform: none;
        }

        /*
         * Sur mobile les commandes ne sont plus positionnées dans un grand
         * espace vide au bas du carousel : elles suivent directement la slide.
         */
        .carousel-controls {
            position: relative;
            right: auto;
            bottom: auto;
            left: auto;
            grid-area: 2 / 1;
            justify-self: center;
            padding: 0.15rem 1rem 1.1rem;
        }

        [dir="rtl"] .carousel-controls {
            right: auto;
            left: auto;
        }
    }

    @media (max-width: 680px) {
        .hero-slide {
            gap: 1.15rem;
            padding: 1.25rem;
        }

        .hero-slide__media {
            width: min(100%, 460px);
            max-height: none;
            aspect-ratio: 1 / 1;
        }

        .carousel-controls {
            padding-bottom: 0.9rem;
        }
    }

    @media (max-width: 430px) {
        .hero-slide {
            padding: 1rem;
        }

        .hero-slide__media {
            width: 100%;
        }

        .carousel-controls {
            padding-bottom: 0.8rem;
        }
    }
}