/* ============================================
   HERO HOME - Page d'accueil uniquement
   Layout: Logo gauche + Baseline + Boutons droite (maquette Figma)
   ============================================ */

/* Video background */
.laika-hero-home__background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay - bottom half (backdrop-filter pour assombrir sans ajouter de couleur) */
.laika-hero-home::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    backdrop-filter: brightness(0.4);
    -webkit-backdrop-filter: brightness(0.4);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
    z-index: 2;
    pointer-events: none;
}

.laika-hero-home {
    position: relative;
    width: auto;
    height: calc(100vh - 135px); /* 100vh - (75px top + 60px bottom) */
    max-height: calc(100vh - 135px); /* Cap sur la hauteur viewport — évite le débordement sur petits écrans */
    overflow: hidden; /* #651 — revert scroll indicator retiré */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--color-noir);
    margin: 75px 60px 60px 60px; /* Top 75px pour header, reste 60px pour cadre blanc */
    padding: 0;
}

/* Clip le background mais pas le scroll indicator */
.laika-hero-home__background {
    overflow: hidden;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .laika-hero-home {
        margin: 75px 40px 40px 40px; /* Réduction marges tablet */
        height: calc(100vh - 155px);
        max-height: calc(100vh - 155px);
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .laika-hero-home {
        margin: 24px; /* Cadre blanc 24px uniforme sur les 4 côtés */
        height: auto; /* Reset height desktop — le contenu dicte la hauteur sur mobile */
        max-height: none; /* Reset max-height desktop */
        min-height: calc(100vh - 48px); /* 100vh - 24px top - 24px bottom */
        min-height: calc(100svh - 48px);
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 769px) and (max-width: 1032px) {
    .laika-hero-home {
        margin: 4.1667vw; /* 60 px sur 1440 px, cadre de l'accueil de l'ordinateur */
        min-height: calc(100vh - 8.3334vw);
        min-height: calc(100svh - 8.3334vw);
    }
}

/* Background */
.laika-hero-home__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.laika-hero-home__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Content container - Conteneur utilisant toute la largeur avec padding */
.laika-hero-home__content {
    position: relative;
    z-index: 3;
    width: 100%;

    max-width: 1800px; /* Limite raisonnable pour grands écrans */
    margin: 0 auto; /* Centré si très grand écran */
    padding: 0 var(--space-3xl) var(--space-3xl) var(--space-3xl); /* aligné bas ; 80px de chaque côté : le blip (40px) plus une marge de 40px */
    display: flex;
    align-items: flex-end; /* Aligner les deux côtés par le bas */
    justify-content: space-between; /* Logo à gauche, boutons à droite */
    gap: clamp(30px, 4vw, 100px); /* Espacement généreux entre logo et boutons */
}

/* Zone gauche : Logo + Baseline */
.laika-hero-home__left {
    flex: 1;
    max-width: clamp(350px, 38vw, 800px);
}

.laika-hero-home__logo {
    width: 100%;
    max-width: clamp(350px, 38vw, 800px);
}

.laika-hero-home__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.laika-hero-home__baseline {
    font-family: var(--font-body);
    font-size: var(--fs-body-small);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--color-blanc);
    max-width: 500px;
    margin-top: var(--space-xl);
}

/* Zone droite : Boutons - Dans le flux normal, pas absolute */
.laika-hero-home__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-end;
    flex-shrink: 0;
    /* Plus de position absolute */
}

.laika-hero-home__buttons-intro {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    font-weight: var(--fw-light);
    color: var(--color-blanc);
    margin-bottom: var(--space-sm);
    text-align: right;
}

/* Button styles - Selon maquette Figma 423x115px */
.laika-hero-home__button {
    font-family: var(--font-heading) !important;
    font-size: clamp(24px, 2.2vw, 36px); /* Taille exacte NOUS/VOUS */
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-blanc);
    background: transparent;
    border: 2px solid var(--color-blanc);
    padding: 0;
    text-align: center;
    width: clamp(260px, 22vw, 423px);
    height: clamp(80px, 7.5vw, 115px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
}

.laika-hero-home__button:hover {
    background-color: var(--color-blanc);
    color: var(--color-noir);
}

/* Bouton VOUS - Structure spéciale - Même taille que NOUS */
.laika-hero-home__button--vous {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: default;
    width: clamp(260px, 22vw, 423px);
    height: clamp(80px, 7.5vw, 115px);
    transition: var(--transition-normal);
}

.laika-hero-home__button--vous:hover {
    background-color: var(--color-blanc);
}

.laika-hero-home__button-label {
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.2vw, 36px); /* Même taille que NOUS */
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-blanc);
    transition: var(--transition-normal);
}

.laika-hero-home__button--vous:hover .laika-hero-home__button-label {
    color: var(--color-noir);
}

.laika-hero-home__button-links {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading); /* PP Neue Machina aussi */
    font-size: 16px; /* Taille exacte */
    font-weight: var(--fw-regular);
}

.laika-hero-home__button-links a {
    color: var(--color-blanc);
    text-decoration: none;
    transition: var(--transition-normal);
    text-transform: lowercase;
}

.laika-hero-home__button-links a:hover {
    color: #666666;
}

.laika-hero-home__button--vous:hover .laika-hero-home__button-links a {
    color: var(--color-noir);
}

/* Couleur définie dynamiquement par JavaScript */

.laika-hero-home__button-links .separator {
    color: var(--color-blanc);
    opacity: 0.5;
    transition: var(--transition-normal);
}

.laika-hero-home__button--vous:hover .laika-hero-home__button-links .separator {
    color: var(--color-noir);
    opacity: 0.5;
}


/* ============================================
   RESPONSIVE
   ============================================ */

/* Écrans moyens (< 1200px) - Passer en colonne quand logo et boutons se rapprochent */
@media (max-width: 1200px) {
    .laika-hero-home__content {
        flex-direction: column;
        align-items: center; /* Neutralise le flex-end desktop — en colonne, center = centré horizontalement */
        justify-content: center;
        text-align: center;
        gap: var(--space-4xl);
    }

    .laika-hero-home__left {
        max-width: 700px;
    }

    .laika-hero-home__logo {
        max-width: 700px;
        margin: 0 auto;
    }

    .laika-hero-home__baseline {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .laika-hero-home__buttons {
        position: static; /* Annuler position absolute */
        transform: none; /* Annuler transform */
        align-items: center;
        width: 100%;
        margin-top: 0;
    }
}

/* Petits écrans desktop (max-height: 900px) — écrans 13-14 pouces */
@media (max-height: 900px) and (min-width: 769px) {
    .laika-hero-home__content {
        padding: 40px var(--space-3xl) clamp(var(--space-xl), 10vh, var(--space-3xl)); /* haut réduit pour gagner de la hauteur ; bas de 40 à 80 px selon la hauteur de fenêtre : le blip du bas (40 px) plus une marge qui garde le contenu des téléphones en paysage */
        gap: var(--space-2xl); /* 60px au lieu de 100px */
    }

    .laika-hero-home__left {
        max-width: 500px;
    }

    .laika-hero-home__logo {
        max-width: 500px;
    }

    .laika-hero-home__button {
        height: 90px;
        font-size: 28px;
    }

    .laika-hero-home__button--vous {
        height: 90px;
    }

    .laika-hero-home__button-label {
        font-size: 28px;
    }
}

/* Tablet (< 1024px) - Réduction tailles */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .laika-hero-home__left {
        max-width: 600px;
    }

    .laika-hero-home__logo {
        max-width: 600px;
    }

    .laika-hero-home__button {
        font-size: 28px;
        height: 100px;
    }

    .laika-hero-home__button--vous {
        height: 100px;
    }

    .laika-hero-home__button-label {
        font-size: 28px;
    }

    .laika-hero-home .scroll-indicator {
        width: 80px;
        height: 80px;
        bottom: -40px;
        padding-top: 8px;
    }

    .laika-hero-home .scroll-indicator__stem {
        height: 26px;
    }

    .laika-hero-home .scroll-indicator__chevron {
        width: 6px;
        height: 6px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
    .laika-hero-home__content {
        padding: 100px 24px 40px 24px; /* 100px top pour dégager le header transparent */
        gap: var(--space-2xl);
    }

    .laika-hero-home__logo {
        max-width: min(320px, 75%); /* Logo beaucoup plus grand (était 220px) */
    }

    .laika-hero-home__baseline {
        font-size: var(--fs-tiny);
        max-width: 100%;
    }

    .laika-hero-home__buttons {
        width: 100%;
        align-items: stretch; /* #642 — les boutons prennent tous la hauteur du plus grand (VOUS) */
    }

    .laika-hero-home__button {
        width: 100%;
        max-width: none;
        height: auto; /* #642 — flex stretch aligne les hauteurs automatiquement */
        font-size: 22px;
        padding: 24px 20px; /* #641 — padding augmenté pour éloigner des blips */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .laika-hero-home__button--vous {
        width: 100%;
        max-width: none;
        height: auto; /* #642 — flex stretch aligne les hauteurs automatiquement */
        padding: 24px 20px; /* #641 — padding augmenté pour éloigner des blips */
    }

    .laika-hero-home__button-label {
        font-size: 22px;
    }

    .laika-hero-home__button-links {
        font-size: 13px;
    }

    .laika-hero-home .scroll-indicator {
        width: 60px;
        height: 60px;
        bottom: -30px;
        padding-top: 6px;
        pointer-events: auto;
    }

    .laika-hero-home .scroll-indicator__stem {
        height: 20px;
    }

    .laika-hero-home .scroll-indicator__chevron {
        width: 6px;
        height: 6px;
    }
}

/* Very small mobile (< 480px) */
@media (max-width: 480px) {
    .laika-hero-home__logo {
        max-width: min(280px, 75%); /* Plus grand qu'avant (était 250px) */
    }

    .laika-hero-home__content {
        gap: var(--space-2xl);
    }
}

/* ============================================
   PAYSAGE TACTILE - Accueil composé comme l'ordinateur : logo en bas à gauche, boutons en bas à droite
   ============================================ */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1376px) {
    .laika-hero-home {
        margin: 75px 4.1667vw 4.1667vw 4.1667vw; /* cadre de l'ordinateur : 60 px sur 1440 px */
        height: calc(100vh - 75px - 4.1667vw);
        height: calc(100svh - 75px - 4.1667vw);
        max-height: calc(100vh - 75px - 4.1667vw);
        max-height: calc(100svh - 75px - 4.1667vw);
    }

    .laika-hero-home__content {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
    }

    .laika-hero-home__left {
        max-width: clamp(350px, 38vw, 800px);
    }

    .laika-hero-home__logo {
        max-width: clamp(350px, 38vw, 800px);
        margin: 0;
    }

    .laika-hero-home__baseline {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .laika-hero-home__buttons {
        align-items: flex-end;
        width: auto;
    }
}