/* ==========================================
   SUBTOMEK - PARRAINAGE CLUB
   CSS autonome
   ========================================== */

:root {
    --bg-main: #021a29;
    --bg-deep: #041c2c;
    --bg-middle: #07506d;
    --bg-light: #0b8aaf;

    --accent: #00a6cf;
    --accent-dark: #006d99;

    --radius-large: 24px;
    --radius-small: 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ==========================================
   FOND ET COLONNE PRINCIPALE
   ========================================== */

.auth-page {
    min-height: 100vh;
    padding: 30px 18px;

    color: white;

    background: radial-gradient(
        circle at top,
        var(--bg-light) 0%,
        var(--bg-middle) 35%,
        var(--bg-main) 75%
    );
}

.auth-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* ==========================================
   BLOC 1 : PETIT LIVRE
   ========================================== */

.inscription-book-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;
    height: 75px;
}

.inscription-book {
    display: block;

    width: 70px;
    height: 70px;

    object-fit: contain;
    pointer-events: none;
}

/* ==========================================
   BLOC 2 : TITRE SUBTOMEK
   ========================================== */

.brand {
    width: 100%;
    margin: 10px auto 25px;
    padding: 0;

    text-align: center;
}

.brand strong {
    display: block;
    font-size: 2rem;
    letter-spacing: 4px;
}

.brand span {
    display: block;
    margin-top: 5px;
    opacity: .7;
}

/* ==========================================
   BLOC 3 : PLONGEUR
   ========================================== */

.auth-visual {
    position: relative;
    width: 100%;
    padding-top: 125px;

    isolation: isolate;
    overflow: visible;
}

.auth-decoration {
    position: absolute;

    width: 290px;
    height: 290px;

    top: -65px;
    left: -35px;
    right: auto;

    z-index: 1;

    object-fit: contain;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    -webkit-mask-image: none;
    mask-image: none;

    pointer-events: none;

    filter: drop-shadow(
        0 8px 12px rgba(0, 0, 0, .15)
    );
}

/* ==========================================
   CARTE DE L'OFFRE
   ========================================== */

.auth-card {
    position: relative;
    z-index: 2;

    padding: 30px 25px;

    background: rgba(255, 255, 255, .82);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(0, 30, 60, .15);

    color: #092638;
}

.parrainage-card {
    text-align: center;
}

.parrainage-card h1 {
    margin: 0 0 15px;

    font-size: 1.55rem;
    line-height: 1.3;

    color: #073e58;
}

/* ==========================================
   NOM DU CLUB
   ========================================== */

.auth-intro {
    margin: 0 0 22px;

    color: #6a7c86;
    line-height: 1.6;
}

.auth-intro strong {
    display: block;
    margin-top: 5px;

    color: #007ca6;
    font-size: 1.08rem;
}

/* ==========================================
   TARIF ANNUEL
   ========================================== */

.prix {
    margin: 18px 0;

    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;

    color: #0284c7;
}

/* ==========================================
   ENCADRÉ D'INFORMATION
   ========================================== */

.info {
    padding: 17px;

    border-radius: 12px;
    background: #eaf5fb;

    color: #155b7c;

    font-size: .92rem;
    line-height: 1.6;
}

/* Lien de parrainage invalide */

.info.erreur {
    background: #fef2f2;
    color: #b91c1c;
}

.erreur-texte {
    margin: 18px 0 0;

    color: #475569;
    line-height: 1.7;
}

/* ==========================================
   BOUTONS
   ========================================== */

.parrainage-actions {
    display: grid;
    gap: 12px;

    margin-top: 25px;
}

.parrainage-btn {
    display: block;

    padding: 15px 12px;

    border-radius: 12px;

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

    font-weight: 800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.parrainage-btn-primary {
    background: linear-gradient(
        135deg,
        var(--accent),
        var(--accent-dark)
    );

    color: white;
}

.parrainage-btn-secondary {
    background: #e2e8f0;
    color: #0f172a;
}

/* Effet au survol */

@media (hover: hover) {
    .parrainage-btn:hover {
        transform: translateY(-2px);

        box-shadow:
            0 6px 16px rgba(0, 50, 80, .15);
    }
}

/* Navigation au clavier */

.parrainage-btn:focus-visible {
    outline: 3px solid #0284c7;
    outline-offset: 3px;
}

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

@media (max-width: 600px) {

    .inscription-book-header {
        height: 60px;
    }

    .inscription-book {
        width: 55px;
        height: 55px;
    }

    .auth-visual {
        padding-top: 110px;
    }

    .auth-decoration {
        width: 235px;
        height: 235px;

        top: -45px;
        left: -15px;
        right: auto;
    }

    .auth-card {
        padding: 25px 20px;
    }

    .parrainage-card h1 {
        font-size: 1.35rem;
    }

    .prix {
        font-size: 2rem;
    }
}

@media (max-width: 380px) {

    .brand strong {
        font-size: 1.6rem;
        letter-spacing: 3px;
    }

    .auth-decoration {
        width: 205px;
        height: 205px;

        top: -30px;
        left: -10px;
        right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parrainage-btn {
        transition: none;
    }
}