/* =========================================================
   PROPULX — COMING SOON V3
   BASE RESPONSIVE
   ========================================================= */


/* ---------- RESET ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #080908;
    color: #f4f2eb;

   font-family:
    "Oxanium",
    Arial,
    Helvetica,
    sans-serif;

    overflow-x: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    display: grid;
    place-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.12)
        ),
        url("assets/propulx-v3-background.png");

    background-repeat: no-repeat;

    /*
       COVER remplit toujours l'écran sans déformer l'image.
       Selon le ratio de l'écran, une partie du décor peut
       naturellement être recadrée.
    */
    background-size: cover;
    background-position: center center;
}


/* =========================================================
   CONTENU
   ========================================================= */

.hero-content {
    position: relative;
    z-index: 2;

    width: min(90vw, 1000px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* =========================================================
   LOGO PROPULX
   ========================================================= */

.propulx-logo {
    display: block;

    width: min(82vw, 1200px);
    height: auto;

    margin-inline: auto;
    margin-bottom: clamp(18px, 2.5vh, 34px);

    object-fit: contain;

    transform: translateX(-4%);
}

@media (min-width: 1200px) {
    .propulx-logo {
        transform: translateX(-8%);
    }
}

/* =========================================================
   TEXTE
   ========================================================= */

.hero-description {
    max-width: 850px;
    margin-inline: auto;

    font-size:
        clamp(1rem, 1.45vw, 1.75rem);

    font-weight: 400;
    line-height: 1.45;

    color: #f3f1eb;

    text-wrap: balance;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.90),
        0 0 22px rgba(0, 0, 0, 0.50);
}

.hero-description strong {
    color: #b39a50;
    font-weight: 700;
}


/* =========================================================
   BOUTON CONTACT
   ========================================================= */

.contact-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top:
        clamp(24px, 3vh, 36px);

    min-width: 0;

    padding:
        clamp(14px, 1.2vw, 14px)
        clamp(20px, 1.8vw, 18px);

    color: #0c0d0b;

    background:
        linear-gradient(
            135deg,
            #8f793c 0%,
            #c0a85d 48%,
            #9c8544 100%
        );

    border:
        1px solid rgba(222, 198, 119, 0.65);

    border-radius: 6px;

    font-size:
        clamp(0.82rem, 0.8vw, 0.98rem);

    font-weight: 800;
    letter-spacing: 0.04em;

    text-decoration: none;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(174, 147, 69, 0.15);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.contact-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(174, 147, 69, 0.30);
}

.contact-button:focus-visible {
    outline: 2px solid #d4bd72;
    outline-offset: 4px;
}

.contact-arrow {
    font-size: 1.1em;
    line-height: 1;
}

/* =========================================================
   V3 — IDENTITÉ DES TEXTES
   ========================================================= */

/* Phrase principale — accroche */
.hero-description {
    max-width: 720px;
    margin-inline: auto;

    font-size: clamp(1.55rem, 2.15vw, 2.55rem);
    font-weight: 500;
    line-height: 1.25;

    letter-spacing: -0.015em;

    color: #f5f3ed;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(0, 0, 0, 0.65);
}

.hero-description strong {
    display: block;

    margin-top: 6px;

    color: #c0a85d;

    font-size: 1.08em;
    font-weight: 800;
    font-style: italic;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(192, 168, 93, 0.22);
}


/* Petit texte — invitation */
.hero-contact-text {
    max-width: 620px;

    margin:
        clamp(18px, 2.2vh, 28px)
        auto
        0;

    font-size: clamp(0.82rem, 0.85vw, 0.98rem);
    font-weight: 400;
    line-height: 1.55;

    letter-spacing: 0.015em;

    color: rgba(245, 243, 237, 0.90);

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.95);
}

.hero-contact-text br + * {
    margin-top: 2px;
}


/* Le bouton respire après le petit texte */
.hero-contact-text + .contact-button {
    margin-top: clamp(18px, 2.2vh, 28px);
}