/* =========================================================
   SUNDRIVE — MAINTENANCE
   ========================================================= */

:root {
    --black: #05030b;
    --black-2: #0b0615;

    --pink: #ff0aa8;
    --pink-light: #ff45c8;

    --purple: #8d35ff;
    --purple-dark: #4b168e;

    --orange: #ff7848;

    --white: #fff8ff;
    --muted: #c4b9cc;
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(141, 53, 255, .15),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 10, 168, .10),
            transparent 30%
        ),
        var(--black);

    color: var(--white);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}


/* =========================================================
   PAGE
   ========================================================= */

.page {
    position: relative;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 30px 6vw;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.glow {
    position: fixed;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: .25;

    z-index: 0;
}

.glow-1 {
    width: 350px;
    height: 350px;

    background: var(--pink);

    top: -150px;
    right: -100px;
}

.glow-2 {
    width: 300px;
    height: 300px;

    background: var(--purple);

    bottom: -150px;
    left: -100px;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
    position: relative;

    z-index: 10;

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

    width: 100%;
}


/* Logo header */

.brand {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.header-logo {
    display: block;

    width: 145px;
    height: auto;

    filter:
        drop-shadow(0 0 8px rgba(255, 10, 168, .45))
        drop-shadow(0 0 25px rgba(141, 53, 255, .25));

    transition: transform .3s ease;
}

.header-logo:hover {
    transform: scale(1.04);
}


/* Status */

.status {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 999px;

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

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;

    backdrop-filter: blur(10px);
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--pink);

    box-shadow:
        0 0 8px var(--pink),
        0 0 18px var(--pink);

    animation: pulse 1.8s infinite;
}


/* =========================================================
   MAIN
   ========================================================= */

.maintenance {
    position: relative;

    z-index: 5;

    flex: 1;

    width: 100%;
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content {
    max-width: 620px;
}


/* Petit titre */

.small-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: var(--pink-light);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .16em;
}

.small-title span {
    width: 30px;
    height: 2px;

    background: var(--pink);

    box-shadow:
        0 0 8px var(--pink);
}


/* H1 */

h1 {
    max-width: 650px;

    font-size: clamp(52px, 7vw, 96px);

    line-height: .95;

    letter-spacing: -.055em;

    font-weight: 800;

    margin-bottom: 30px;
}

h1 span {
    display: block;

    font-family: "Pacifico", cursive;

    font-weight: 400;

    font-size: .75em;

    letter-spacing: -.02em;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--pink-light),
            var(--purple)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(0 0 15px rgba(255,10,168,.20));
}


/* Description */

.description {
    max-width: 540px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.75;

    margin-bottom: 18px;
}

.contact-text {
    color: #eee5f0;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 25px;
}


/* =========================================================
   TELEPHONES
   ========================================================= */

.phones {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.phone {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 220px;

    padding: 14px 18px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

    color: var(--white);

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

    backdrop-filter: blur(12px);
}

.phone:hover {
    transform: translateY(-3px);

    border-color: rgba(255,10,168,.55);

    background:
        linear-gradient(
            135deg,
            rgba(255,10,168,.12),
            rgba(141,53,255,.08)
        );
}

.phone-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,10,168,.12);

    color: var(--pink-light);

    font-size: 17px;

    box-shadow:
        inset 0 0 15px rgba(255,10,168,.08);
}

.phone small {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;
}

.phone strong {
    display: block;

    font-size: 15px;
}


/* =========================================================
   VISUEL LOGO
   ========================================================= */

.visual {
    position: relative;

    min-height: 570px;

    display: grid;

    place-items: center;
}


/* Cercles */

.visual-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255,10,168,.18);

    pointer-events: none;
}

.ring-1 {
    width: 390px;
    height: 390px;

    animation: rotate 22s linear infinite;
}

.ring-2 {
    width: 480px;
    height: 480px;

    border-color: rgba(141,53,255,.15);

    animation: rotateReverse 30s linear infinite;
}

.ring-3 {
    width: 570px;
    height: 570px;

    border-color: rgba(255,255,255,.06);

    border-style: dashed;

    animation: rotate 45s linear infinite;
}


/* Glow derrière le logo */

.sun-glow {
    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,10,168,.28),
            rgba(141,53,255,.12) 45%,
            transparent 70%
        );

    filter: blur(20px);

    animation: breathe 4s ease-in-out infinite;
}


/* Conteneur du logo */

.logo-container {
    position: relative;

    width: 320px;
    height: 320px;

    display: grid;
    place-items: center;

    z-index: 5;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06),
            rgba(10,5,18,.85) 68%
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 40px rgba(255,10,168,.18),
        0 0 100px rgba(141,53,255,.12),
        inset 0 0 40px rgba(255,10,168,.05);

    backdrop-filter: blur(10px);
}


/* Halo du logo */

.logo-glow {
    position: absolute;

    inset: 15px;

    border-radius: 50%;

    border: 1px solid rgba(255,10,168,.25);

    box-shadow:
        0 0 20px rgba(255,10,168,.15),
        inset 0 0 20px rgba(255,10,168,.08);

    animation: pulseRing 3s ease-in-out infinite;
}


/* Logo principal */

.main-logo {
    position: relative;

    width: 245px;
    height: 245px;

    object-fit: contain;

    z-index: 10;

    filter:
        drop-shadow(0 0 10px rgba(255,10,168,.55))
        drop-shadow(0 0 30px rgba(255,10,168,.30))
        drop-shadow(0 0 50px rgba(141,53,255,.20));

    animation: floatingLogo 4s ease-in-out infinite;
}


/* Texte sous logo */

.visual-label {
    position: absolute;

    bottom: 22px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .25em;
}

.visual-label span {
    color: var(--pink);

    text-shadow:
        0 0 10px var(--pink);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: relative;

    z-index: 10;

    display: flex;

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

    gap: 20px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.07);

    color: #8e8295;

    font-size: 11px;
}

.footer strong {
    color: #ddd2e0;
}

.address {
    text-align: center;
}

.copyright {
    text-align: right;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.75);
    }
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes rotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes breathe {
    0%, 100% {
        transform: scale(.95);
        opacity: .7;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


@keyframes pulseRing {
    0%, 100% {
        transform: scale(.96);
        opacity: .5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes floatingLogo {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


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

@media (max-width: 900px) {

    .page {
        padding: 25px 25px;
    }

    .maintenance {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 20px;

        padding: 60px 0;
    }

    .content {
        max-width: 700px;
        margin: auto;
    }

    .small-title {
        justify-content: center;
    }

    .description,
    .contact-text {
        margin-left: auto;
        margin-right: auto;
    }

    .phones {
        justify-content: center;
    }

    .visual {
        min-height: 430px;
    }

    .ring-1 {
        width: 300px;
        height: 300px;
    }

    .ring-2 {
        width: 370px;
        height: 370px;
    }

    .ring-3 {
        width: 440px;
        height: 440px;
    }

    .logo-container {
        width: 250px;
        height: 250px;
    }

    .main-logo {
        width: 190px;
        height: 190px;
    }

    .footer {
        flex-direction: column;

        text-align: center;

        padding-bottom: 10px;
    }

    .address,
    .copyright {
        text-align: center;
    }
}


@media (max-width: 600px) {

    .page {
        padding: 20px 18px;
    }

    .topbar {
        align-items: flex-start;
    }

    .header-logo {
        width: 115px;
    }

    .status {
        padding: 8px 11px;

        font-size: 9px;
    }

    h1 {
        font-size: 50px;

        margin-bottom: 24px;
    }

    .description {
        font-size: 15px;
    }

    .phones {
        flex-direction: column;

        align-items: stretch;
    }

    .phone {
        width: 100%;

        justify-content: flex-start;
    }

    .visual {
        min-height: 360px;
    }

    .ring-1 {
        width: 230px;
        height: 230px;
    }

    .ring-2 {
        width: 290px;
        height: 290px;
    }

    .ring-3 {
        width: 350px;
        height: 350px;
    }

    .logo-container {
        width: 205px;
        height: 205px;
    }

    .main-logo {
        width: 155px;
        height: 155px;
    }

    .visual-label {
        bottom: 5px;

        font-size: 9px;
    }
}