/* ============================================================
   Hero Section — Psyrates
   ============================================================ */

/* ---- Conteneur principal ---- */

.hero {
    position   : relative;
    width      : 100%;
    min-height : 100vh;
    display    : flex;
    align-items: center;
    isolation  : isolate;
}

/* ---- Vidéo de fond ---- */

.hero__video {
    position  : absolute;
    inset     : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transform : scale(1.05);
    z-index   : -2;
}

/* ---- Overlay dégradé ---- */

.hero__overlay {
    position  : absolute;
    z-index   : -1;
    inset     : 0;
    background: rgba(0,0,0,0.65);
    transform : scale(1.05);
}

/* ---- Contenu ---- */

.hero__content {
    position       : relative;
    width          : 100%;
    max-width      : 1200px;
    margin         : 0 auto;
    padding        : 6rem 1.5rem 6rem;
    text-align     : center;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 0;
}

/* ---- Animations d'entrée ---- */

@keyframes hero-fade-up {
    from {
        opacity  : 0;
        transform: translateY(30px);
    }
    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

.hero--anim-1 { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero--anim-2 { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.hero--anim-3 { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.hero--anim-4 { animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }

.hero__badge-wrap.hero--anim-1,
.hero__form-wrap.hero--anim-3 {
    animation: none;
    opacity: 1;
    transform: none;
}

.hero__badge-wrap.hero--anim-1 .hero__badge {
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__form-wrap.hero--anim-3 .hero__form {
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* ---- Badge ---- */

.hero__badge-wrap {
    margin-bottom: 20px;
}

.hero__badge {
    display        : inline-block;
    padding        : 10px calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-radius  : 50px;
    border         : 1px solid rgba(255, 255, 255, 0.22);
    background     : rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    font-family    : 'Montserrat', sans-serif;
    font-size      : 11px;
    font-weight    : 600;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    color          : rgba(255, 255, 255, 0.90);
    line-height    : 1.6;
    text-align     : center;
    max-width: calc(320px + (340 - 320) * ((100vw - 320px) / (1920 - 320)));
}

/* ---- Titre H1 ---- */

.hero__title {
    font-family   : 'Montserrat', sans-serif;
    font-size      : clamp(2rem, 5vw, 4.5rem);
    font-weight    : 900;
    line-height    : 1.05;
    letter-spacing : -0.02em;
    color          : #ffffff;
    margin         : 0 0 48px;
}

/* Gradient bleu animé sur la deuxième ligne */
.hero__title-gradient {
    display           : inline;
    background-image  : linear-gradient(
        90deg,
        #2470DB 0%,
        #4a90e8 25%,
        #7ab8f5 50%,
        #4a90e8 75%,
        #2470DB 100%
    );
    background-size   : 200% 100%;
    -webkit-background-clip: text;
    background-clip   : text;
    -webkit-text-fill-color: transparent;
    animation         : hero-shimmer 4s ease-in-out infinite;
}

@keyframes hero-shimmer {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0%   50%; }
    100% { background-position: 100% 50%; }
}

/* ---- Formulaire ---- */

.hero__form-wrap {
    width    : 100%;
    max-width: 600px;
    margin   : 0 auto 40px;
}

.hero__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 100px;
    padding: 10px 10px 10px 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Sélecteur ville */

.hero__select-wrap {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex       : 1;
    min-width  : 0;
}

.hero__select-icon {
    flex-shrink: 0;
    color      : rgba(255, 255, 255, 0.60);
}

.hero__select {
    width           : 100%;
    background      : transparent;
    border          : none;
    outline         : none;
    font-family     : 'Montserrat', sans-serif;
    font-size       : 14px;
    font-weight     : 600;
    color           : #ffffff;
    cursor          : pointer;
    appearance      : none;
    -webkit-appearance: none;
}

.hero__select option {
    background : #1F1F1F;
    color      : #ffffff;
    font-weight: 500;
}

.hero__select:focus {
    outline: none;
}

/* Placeholder couleur atténuée sur l'option vide */
.hero__select option[value=""] {
    color: rgba(255, 255, 255, 0.45);
}

/* ---- Custom Dropdown ---- */

.hero__dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}

.hero__dropdown {
    background: rgba(255, 255, 255, .1);
    border-radius: 50px;
    width: 100%;
}

.hero__dropdown-trigger {
    display    : flex;
    align-items: center;
    gap        : 8px;
    cursor     : pointer;
    padding    : 4px 0;
    user-select: none;
    height: 48px;
    padding-left: 18px;
}

.hero__dropdown-trigger:focus-visible {
    outline: none;
}

.hero__dropdown-placeholder {
    flex          : 1;
    font-family   : 'Montserrat', sans-serif;
    font-size     : 14px;
    font-weight   : 600;
    color         : rgba(255, 255, 255, 0.55);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    min-width     : 0;
    transition    : color 0.15s ease;
    text-align: left;
}

.hero__dropdown-placeholder.is-selected {
    color: #ffffff;
}

.hero__dropdown-chevron {
    flex-shrink: 0;
    color      : rgba(255, 255, 255, 0.55);
    transition : transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__dropdown.is-open .hero__dropdown-chevron {
    transform: rotate(180deg);
}

.hero__dropdown-list {
    display        : none;
    position       : absolute;
    min-width      : 300px;
    max-height     : 320px;
    overflow-y     : auto;
    background     : #ffffff;
    border         : 1px solid #E8E8E8;
    border-radius  : 16px;
    box-shadow     : 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index        : 99999;
    list-style     : none;
    margin         : 0;
    padding        : 6px;
    scrollbar-width: thin;
    scrollbar-color: #D0D0D0 transparent;
}

.hero__dropdown-list::-webkit-scrollbar {
    width: 4px;
}
.hero__dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}
.hero__dropdown-list::-webkit-scrollbar-thumb {
    background    : #D0D0D0;
    border-radius : 4px;
}

.hero__dropdown-list.is-open {
    display: block;
}

.hero__dropdown-item {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    padding       : 9px 10px;
    border-radius : 10px;
    cursor        : pointer;
    transition    : background 0.12s ease;
}

.hero__dropdown-item:hover,
.hero__dropdown-item:focus {
    background: #F5F5F5;
    outline   : none;
}

.hero__dropdown-item.is-selected {
    background: #F5F9FF;
}

.hero__dropdown-item + .hero__dropdown-item {
    border-top: 1px solid #F0F0F0;
    margin-top: 2px;
}

.hero__dropdown-item-img {
    width        : 40px;
    height       : 40px;
    border-radius: 10px;
    object-fit   : cover;
    flex-shrink  : 0;
}

.hero__dropdown-item-img--placeholder {
    background     : #EEF3FB;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #2470DB;
    border-radius  : 10px;
    width          : 40px;
    height         : 40px;
    flex-shrink    : 0;
}

.hero__dropdown-item-name {
    flex          : 1;
    font-family   : 'Montserrat', sans-serif;
    font-size     : 13px;
    font-weight   : 600;
    color         : #1F1F1F;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    min-width     : 0;
}

.hero__dropdown-item-price {
    font-family: 'Montserrat', sans-serif;
    font-size  : 13px;
    font-weight: 700;
    color: var(--color-text-muted, #737373);
    white-space: nowrap;
    flex-shrink: 0;
}

.hero__dropdown-item.is-selected .hero__dropdown-item-price {
    color: var(--color-primary, #1F1F1F);
}

.hero__dropdown-item-check {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 20px;
    height         : 20px;
    border-radius  : 999px;
    color          : #2470DB;
    background     : rgba(36, 112, 219, 0.10);
    flex-shrink    : 0;
    opacity        : 0;
    transform      : scale(0.85);
    transition     : opacity 0.15s ease, transform 0.15s ease;
}

.hero__dropdown-item.is-selected .hero__dropdown-item-check {
    opacity  : 1;
    transform: scale(1);
}

.hero__availability {
    display        : flex;
    justify-content: center;
    margin-top     : 14px;
}

.hero__availability[hidden] {
    display: none;
}

.hero__availability-badge {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    max-width      : 100%;
    padding        : 10px 16px;
    border         : 1px solid rgba(255, 255, 255, 0.18);
    border-radius  : 999px;
    background     : rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    box-shadow     : inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.hero__availability-text {
    font-family   : 'Montserrat', sans-serif;
    font-size     : 13px;
    font-weight   : 600;
    color         : #ffffff;
    line-height   : 1.4;
    text-align    : center;
    text-wrap     : balance;
}

@media (max-width: 767px) {
    .hero__dropdown-list {
        min-width: 260px;
    }
}

/* Bouton CTA principal */

.hero__cta {
    display        : inline-flex;
    align-items    : center;
    gap            : 7px;
    padding        : 13px 24px;
    border-radius  : 100px;
    background     : var(--color-accent, #F36E20);
    color          : #ffffff;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 16px;
    font-weight    : 700;
    letter-spacing : 0.03em;
    text-decoration: none;
    white-space    : nowrap;
    flex-shrink    : 0;
    transition     : background var(--transition-normal),
                     box-shadow  var(--transition-normal),
                     transform   var(--transition-normal);
    box-shadow     : 0 4px 14px rgba(243, 110, 32, 0.35);
    height: 56px;
}

.hero__cta:hover {
    background : var(--color-cta-hover, #E95D0C);
    box-shadow : 0 6px 24px rgba(243, 110, 32, 0.50);
    transform  : translateY(-2px);
    color      : #ffffff;
}

.hero__cta:active {
    transform : translateY(0);
    box-shadow: 0 2px 8px rgba(243, 110, 32, 0.30);
}

/* ---- Stats ---- */

.hero__stats {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    gap            : calc(16px + (28 - 16) * ((100vw - 320px) / (1920 - 320)));
    padding        : 0;
    margin         : 0;
    list-style     : none;
}

.hero__stat {
    display    : flex;
    align-items: center;
    gap        : 7px;
    font-family: 'Montserrat', sans-serif;
    font-size  : 13px;
    font-weight: 500;
    color      : rgba(255, 255, 255, 0.85);
}

.hero__stat svg {
    color      : var(--color-highlight, #2470DB);
    flex-shrink: 0;
}

/* ---- Barre sticky mobile ---- */

.hero__sticky-bar {
    position      : fixed;
    bottom        : 0;
    left          : 0;
    right         : 0;
    z-index       : 40;
    background    : rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    border-top    : 1px solid var(--color-border, #EBEBEB);
    box-shadow    : 0 -4px 20px rgba(0, 0, 0, 0.10);
    padding       : 12px 1.5rem;

    /* Masquée par défaut */
    transform  : translateY(100%);
    opacity    : 0;
    visibility : hidden;
    transition : transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                 opacity   0.3s ease,
                 visibility 0s linear 0.3s;
}

.hero__sticky-bar.is-visible {
    transform  : translateY(0);
    opacity    : 1;
    visibility : visible;
    transition : transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                 opacity   0.3s ease;
}

.hero__sticky-bar-inner {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
    max-width      : 600px;
    margin         : 0 auto;
}

.hero__sticky-bar-info {
    min-width: 0;
}

.hero__sticky-bar-city {
    font-family  : 'Montserrat', sans-serif;
    font-size    : 14px;
    font-weight  : 800;
    color        : var(--color-primary, #1F1F1F);
    margin       : 0;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.hero__sticky-bar-sub {
    font-family: 'Montserrat', sans-serif;
    font-size  : 12px;
    color      : var(--color-text-muted, #737373);
    margin     : 2px 0 0;
}

.hero__cta--small {
    padding   : 10px 18px;
    font-size : 12px;
}

/* Masquer la barre sticky sur desktop */
@media (min-width: 1024px) {
    .hero__sticky-bar {
        display: none;
    }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 767px) {

    .hero__content {
        padding: 8rem 1rem 4rem;
    }

    .hero__title {
        font-size    : 36px;
        margin-bottom: 32px;
    }

    .hero__form {
        flex-direction: column;
        border-radius : 24px;
        padding       : 12px;
        gap           : 8px;
    }

    .hero__select-wrap {
        width  : 100%;
        padding: 8px 12px;
    }

    .hero__cta {
        width          : 100%;
        justify-content: center;
        border-radius  : 100px;
    }

    .hero__availability {
        margin-top: 12px;
    }

    .hero__availability-badge {
        width        : 100%;
        border-radius: 18px;
        padding      : 10px 14px;
    }

    .hero__availability-text {
        font-size: 12px;
    }

    .hero__stats {
        flex-wrap: unset;
        flex-direction: column;
        align-items: center;
    }

    .hero__stat {
        font-size: 12px;
    }

    .hero__sticky-bar-inner {
        flex-direction: column;
    }

}

@media (min-width: 768px) and (max-width: 1023px) {

    .hero__title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
}