/* ==========================================================================
   PLANÈTE MISSIONS — PAGE D’ACCUEIL
   Plein écran sans défilement
   ========================================================================== */

:root {
    --black: #000000;
    --white: #f4f2ee;
    --muted: #9b9b9b;

    --gold: #c39b5b;
    --gold-soft: #d1ad72;
    --gold-light: #f0d39b;

    --font-heading: Georgia, "Times New Roman", serif;
    --font-main: Arial, Helvetica, sans-serif;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;

    background: var(--black);
    color-scheme: dark;

    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;

    background: var(--black);
    color: var(--white);

    font-family: var(--font-main);
    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   FOND
   ========================================================================== */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(255, 255, 255, 0.022),
            transparent 38%
        ),
        linear-gradient(var(--black), var(--black));
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;
    pointer-events: none;

    opacity: 0.018;

    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.45) 0 1px,
            transparent 1px 5px
        ),
        repeating-radial-gradient(
            circle at 75% 65%,
            rgba(255, 255, 255, 0.28) 0 1px,
            transparent 1px 7px
        );

    background-size: 9px 8px, 13px 12px;

    mix-blend-mode: screen;
}

a {
    color: inherit;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
    position: relative;
    z-index: 2;

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

    min-width: 0;

    padding:
        calc(clamp(12px, 2.7vh, 28px) + var(--safe-top))
        calc(20px + var(--safe-right))
        clamp(7px, 1.5vh, 16px)
        calc(20px + var(--safe-left));
}

.logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;

    text-decoration: none;
    outline: none;
}

.navbar-logo {
    display: block;

    width: auto;
    height: clamp(40px, min(6vw, 8.5vh), 76px);

    max-width: min(84vw, 760px);
    max-height: 11vh;

    object-fit: contain;

    filter: drop-shadow(
        0 0 14px rgba(195, 155, 91, 0.04)
    );

    transition:
        opacity 300ms ease,
        transform 300ms ease,
        filter 300ms ease;
}

.logo-link:hover .navbar-logo,
.logo-link:focus-visible .navbar-logo {
    opacity: 0.94;

    transform: translateY(-1px);

    filter: drop-shadow(
        0 0 18px rgba(195, 155, 91, 0.12)
    );
}

.logo-link:focus-visible {
    border-radius: 3px;

    outline: 1px solid var(--gold);
    outline-offset: 8px;
}

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

.hero {
    position: relative;
    z-index: 1;

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

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    gap: clamp(14px, 3vh, 30px);

    padding:
        clamp(10px, 3vh, 36px)
        calc(clamp(20px, 7vw, 100px) + var(--safe-right))
        max(
            clamp(20px, 4vh, 48px),
            calc(18px + var(--safe-bottom))
        )
        calc(clamp(20px, 7vw, 100px) + var(--safe-left));

    overflow: hidden;

    text-align: center;
}

.hero h1 {
    flex: 0 1 auto;

    max-width: 900px;
    margin: 0;

    color: var(--white);

    font-family: var(--font-heading);

    /*
       La taille tient compte de la largeur ET
       de la hauteur disponible.
    */
    font-size: clamp(
        2.8rem,
        min(8vw, 14.5vh),
        7.5rem
    );

    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.035em;

    text-wrap: balance;
}

.hero p {
    flex: 0 1 auto;

    max-width: 680px;
    margin: 0;

    color: var(--muted);

    font-size: clamp(
        0.92rem,
        min(1.35vw, 2.45vh),
        1.28rem
    );

    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.025em;

    text-wrap: balance;
}

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

.cta-button {
    position: relative;
    z-index: 1;
    isolation: isolate;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: min(100%, 300px);
    min-height: clamp(46px, 7vh, 56px);

    margin-top: clamp(2px, 0.8vh, 10px);

    padding:
        clamp(11px, 1.7vh, 14px)
        clamp(24px, 4vw, 34px);

    overflow: visible;

    border: 1px solid var(--gold);

    background: rgba(0, 0, 0, 0.2);
    color: var(--gold-soft);

    font-family: var(--font-main);
    font-size: clamp(0.68rem, 1vw, 0.76rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.22em;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
    outline: none;

    box-shadow:
        inset 0 0 0 rgba(195, 155, 91, 0);

    transition:
        color 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;
}

/*
   Halo lent autour du bouton.
   Il apparaît, s’étend doucement,
   puis disparaît.
*/

.cta-button::before {
    content: "";

    position: absolute;
    inset: -8px;

    z-index: -2;
    pointer-events: none;

    border: 1px solid rgba(209, 173, 114, 0.4);

    opacity: 0;

    box-shadow:
        0 0 12px rgba(195, 155, 91, 0.18),
        0 0 28px rgba(195, 155, 91, 0.12),
        inset 0 0 15px rgba(195, 155, 91, 0.08);

    transform: scale(0.96);

    animation: cta-halo 4.5s ease-in-out infinite;
}

/*
   Deuxième halo, plus diffus,
   pour éviter un effet trop mécanique.
*/

.cta-button::after {
    content: "";

    position: absolute;
    inset: -18px;

    z-index: -3;
    pointer-events: none;

    background: radial-gradient(
        ellipse at center,
        rgba(195, 155, 91, 0.16) 0%,
        rgba(195, 155, 91, 0.07) 38%,
        transparent 72%
    );

    opacity: 0;
    transform: scale(0.86);

    filter: blur(7px);

    animation: cta-glow 4.5s ease-in-out infinite;
}

@keyframes cta-halo {
    0%,
    18%,
    100% {
        opacity: 0;
        transform: scale(0.96);
    }

    45% {
        opacity: 0.65;
    }

    68% {
        opacity: 0.22;
        transform: scale(1.08);
    }

    82% {
        opacity: 0;
        transform: scale(1.12);
    }
}

@keyframes cta-glow {
    0%,
    18%,
    100% {
        opacity: 0;
        transform: scale(0.86);
    }

    44% {
        opacity: 0.7;
    }

    68% {
        opacity: 0.28;
        transform: scale(1.05);
    }

    82% {
        opacity: 0;
        transform: scale(1.12);
    }
}

.cta-button:hover,
.cta-button:focus-visible {
    border-color: var(--gold-light);

    background: var(--gold);
    color: var(--black);

    transform: translateY(-2px);

    box-shadow:
        0 12px 34px rgba(195, 155, 91, 0.14),
        0 0 24px rgba(195, 155, 91, 0.12);
}

.cta-button:hover::before,
.cta-button:focus-visible::before,
.cta-button:hover::after,
.cta-button:focus-visible::after {
    animation-play-state: paused;
    opacity: 0;
}

.cta-button:focus-visible {
    outline: 1px solid var(--white);
    outline-offset: 5px;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media screen and (max-width: 600px) {
    .navbar {
        padding-top:
            calc(clamp(13px, 2.5vh, 20px) + var(--safe-top));

        padding-bottom: clamp(6px, 1.2vh, 10px);
    }

    .navbar-logo {
        height: clamp(38px, min(11vw, 7.5vh), 50px);
        max-width: 88vw;
    }

    .hero {
        gap: clamp(16px, 2.8vh, 24px);

        padding-top: clamp(12px, 3vh, 28px);

        padding-inline:
            calc(20px + var(--safe-right))
            calc(20px + var(--safe-left));
    }

    .hero h1 {
        font-size: clamp(
            2.9rem,
            min(15vw, 13vh),
            5rem
        );

        line-height: 0.98;
    }

    .hero p {
        max-width: 360px;

        font-size: clamp(
            0.94rem,
            min(4.2vw, 2.25vh),
            1.08rem
        );

        line-height: 1.55;
    }

    .cta-button {
        width: min(100%, 310px);

        min-height: clamp(48px, 6.5vh, 52px);

        padding-inline: 22px;

        font-size: 0.72rem;
        letter-spacing: 0.2em;
    }
}

/* ==========================================================================
   ÉCRANS PC PEU HAUTS
   Exemples : 1366 × 768, PC portable, fenêtre réduite
   ========================================================================== */

@media screen and (min-width: 601px) and (max-height: 850px) {
    .navbar {
        padding-top:
            calc(clamp(10px, 2vh, 18px) + var(--safe-top));

        padding-bottom: clamp(5px, 1vh, 9px);
    }

    .navbar-logo {
        height: clamp(42px, min(5vw, 7.5vh), 58px);
    }

    .hero {
        gap: clamp(12px, 2.4vh, 20px);

        padding-top: clamp(8px, 2vh, 18px);
        padding-bottom:
            max(18px, calc(12px + var(--safe-bottom)));
    }

    .hero h1 {
        font-size: clamp(
            3.2rem,
            min(7vw, 13vh),
            5.8rem
        );
    }

    .hero p {
        font-size: clamp(
            0.9rem,
            min(1.3vw, 2.2vh),
            1.06rem
        );

        line-height: 1.45;
    }

    .cta-button {
        min-height: clamp(44px, 6.5vh, 50px);
        margin-top: 0;
        padding-block: 10px;
    }
}

/* ==========================================================================
   ÉCRANS TRÈS PEU HAUTS
   Exemples : fenêtre PC très réduite ou écran paysage
   ========================================================================== */

@media screen and (max-height: 620px) {
    .navbar {
        padding-top:
            calc(6px + var(--safe-top));

        padding-bottom: 4px;
    }

    .navbar-logo {
        height: clamp(32px, 8vh, 42px);
    }

    .hero {
        gap: clamp(7px, 1.7vh, 12px);

        padding-top: 5px;

        padding-bottom:
            max(8px, calc(5px + var(--safe-bottom)));
    }

    .hero h1 {
        font-size: clamp(
            2.2rem,
            min(6vw, 12vh),
            4rem
        );

        line-height: 0.94;
    }

    .hero p {
        max-width: 620px;

        font-size: clamp(
            0.78rem,
            min(1.1vw, 2.15vh),
            0.92rem
        );

        line-height: 1.35;
    }

    .cta-button {
        min-width: 250px;
        min-height: 40px;

        margin-top: 0;

        padding: 8px 22px;

        font-size: 0.65rem;
    }
}

/* ==========================================================================
   ÉCRANS TRÈS ÉTROITS ET TRÈS PEU HAUTS
   Téléphones en mode paysage
   ========================================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
    body {
        grid-template-columns: minmax(140px, 30vw) minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    .navbar {
        height: 100%;

        padding:
            calc(12px + var(--safe-top))
            12px
            calc(12px + var(--safe-bottom))
            calc(12px + var(--safe-left));
    }

    .navbar-logo {
        max-width: 25vw;
        max-height: 70vh;
    }

    .hero {
        justify-content: center;

        gap: 8px;

        padding:
            calc(10px + var(--safe-top))
            calc(18px + var(--safe-right))
            calc(10px + var(--safe-bottom))
            12px;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vh, 3.2rem);
    }

    .hero p {
        font-size: clamp(0.75rem, 3.2vh, 0.9rem);
    }

    .cta-button {
        min-width: 230px;
        min-height: 38px;

        padding: 7px 18px;
    }
}

/* ==========================================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .cta-button::before {
        opacity: 0.25;

        animation: none;
        transform: scale(1);
    }

    .cta-button::after {
        display: none;
    }
}