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

body{

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

    min-height:100vh;

    background:
    radial-gradient(circle at center,
    #10224a 0%,
    #081120 40%,
    #020617 100%);

    color:white;

    overflow-x:hidden;

}
	body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle at 20% 20%,
        rgba(56,189,248,.12),
        transparent 30%
    ),
    radial-gradient(
        circle at 80% 60%,
        rgba(139,92,246,.12),
        transparent 30%
    ),
    radial-gradient(
        circle at 50% 90%,
        rgba(14,165,233,.10),
        transparent 30%
    );

    pointer-events:none;}
.card{

    overflow:hidden;
    position:relative;

    color:inherit;
    text-decoration:none;
    display:block;
    cursor:pointer;
}
a.card, a.card:link, a.card:visited, a.card:hover, a.card:active{
    color:inherit;
    text-decoration:none;
}
a.card h4, a.card p{
    color:inherit;
    text-decoration:none;
}
.card::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transition:.6s;
}
.card:hover::before{

    left:100%;
}

header h1{

    letter-spacing:4px;

    animation:titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow{

    0%,100%{
        text-shadow:
        0 0 20px #38bdf8,
        0 0 50px #38bdf8;
    }

    50%{
        text-shadow:
        0 0 30px #7dd3fc,
        0 0 80px #38bdf8,
        0 0 120px #38bdf8;
    }
}

header{

    text-align:center;

    padding:40px 20px;
}

header h1{

    font-family:'Montserrat',sans-serif;

    font-size:4rem;

    color:#7dd3fc;

    text-shadow:
    0 0 20px #38bdf8,
    0 0 50px #38bdf8;
}

header p{

    margin-top:15px;

    color:#cbd5e1;

    font-size:1.1rem;
}

main{

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

    min-height:650px;
}

#flower{

    position:relative;

    width:650px;
    height:650px;
}

/*#center{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:180px;
    height:180px;

    border-radius:50%;

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

    backdrop-filter:blur(15px);

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

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

    box-shadow:
    0 0 30px rgba(0,212,255,.5);
}*/
#center{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:220px;
    height:220px;

    border-radius:50%;

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

    background:
    radial-gradient(
        circle at 35% 35%,
        #7dd3fc,
        #2563eb 45%,
        #0f172a 100%
    );

    border:2px solid rgba(125,211,252,.3);

    box-shadow:
        0 0 30px rgba(56,189,248,.8),
        0 0 80px rgba(56,189,248,.5),
        0 0 150px rgba(56,189,248,.3);

    animation:pulseCenter 4s ease-in-out infinite;
}
@keyframes pulseCenter{

    0%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.05);
    }
}

#center h2{

    font-family:'Montserrat';

    font-size:3rem;

    color:#ffffff;
}

#center span{

    font-size:.85rem;

    text-align:center;

    color:#cbd5e1;
}
#center{
    z-index: 10;
}

.petal{
	

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

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

    text-align:center;

    padding:25px;

    text-decoration:none;

    color:white;

    backdrop-filter:blur(15px);

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

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

    box-shadow:
    0 0 20px rgba(56,189,248,.4),
	0 0 40px rgba(56,189,248,.15);

    /*transition:
    transform .3s,
    box-shadow .3s,
    background .3s;*/
	
	/*transition: transform .25s ease, box-shadow .3s ease;*/
	transition: box-shadow .3s ease, background .3s ease;
	
	--scale: 1;
    transform: translate(-50%, -50%) scale(var(--scale));
    transform-origin: center;
}
#center{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.petal{
    cursor:pointer;
}
.petal{
    z-index: 5;
}
.petal{
    width:150px;
    height:150px;

    transform: translate(-50%, -50%);
}
.petal::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;
}

/*.petal:hover{

    transform:scale(1.15);

    box-shadow:
    0 0 20px #00d4ff,
    0 0 40px #00d4ff,
    0 0 60px #00d4ff;

    background:rgba(0,212,255,.15);

    z-index:999;
}*/
.petal:hover{
    --scale: 1.35;

    background: rgba(0,212,255,.18);
    border-color: rgba(125,211,252,.7);

    box-shadow:
        0 0 20px #38bdf8,
        0 0 40px #38bdf8,
        0 0 80px #38bdf8,
        0 0 120px #38bdf8;

    z-index: 999;
}
#flower::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:520px;
    height:520px;

    border-radius:50%;

    border:1px solid rgba(125,211,252,.08);
}
#flower::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:350px;
    height:350px;

    border-radius:50%;

    border:1px solid rgba(125,211,252,.05);
}

.resources{

    max-width:1200px;

    margin:auto;

    padding:80px 20px;
}

.resources h3{

    text-align:center;

    font-size:2rem;

    margin-bottom:40px;
}

.cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;
}

.card{

    padding:25px;

    border-radius:20px;

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

    backdrop-filter:blur(10px);

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

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 20px rgba(0,212,255,.3);
}

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;
}

.particle{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#38bdf8;

    animation:float linear infinite;
}

@keyframes float{

    from{
        transform:translateY(100vh);
    }

    to{
        transform:translateY(-120px);
    }
}

@media(max-width:768px){

    #flower{

        width:100%;
        height:auto;

        display:flex;
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

    #center{

        position:relative;

        left:auto;
        top:auto;

        transform:none;

        margin-bottom:20px;
    }

    .petal{

        position:relative;

        width:280px;
        height:70px;

        border-radius:20px;
    }

    header h1{

        font-size:2.5rem;
    }

}
.floating-menu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

/* bouton principal */
.main-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);

    color: white;
    font-size: 26px;

    box-shadow:
        0 0 15px rgba(56, 189, 248, 0.4),
        0 0 30px rgba(56, 189, 248, 0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-btn:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 20px #38bdf8,
        0 0 40px #38bdf8;
}

/* menu déroulant */
.menu-items {
    position: absolute;
    bottom: 75px;
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;

    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    transition: all 0.3s ease;
}

/* état actif */
.floating-menu.active .menu-items {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* liens */
.menu-items a {
    text-decoration: none;
    color: white;
    font-size: 14px;

    padding: 10px 14px;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.25s ease;
}

/* hover des liens */
.menu-items a:hover {
    transform: translateX(-5px) scale(1.05);
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* animation d’apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ==========================
   TRANSITION VOYAGE SPATIAL
   ========================== */

#warp-transition{
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle,
            rgba(125,211,252,0.2) 0%,
            rgba(56,189,248,0.4) 40%,
            rgba(255,255,255,1) 100%
        );

    opacity:0;
    pointer-events:none;

    z-index:99999;

    transition:
        opacity .8s ease,
        transform .8s ease;

    transform:scale(0.2);
}

#warp-transition.active{
    opacity:1;
    transform:scale(5);
}
.petal.warping{

    z-index:10000;

    animation:warpPlanet .8s forwards;
}

@keyframes warpPlanet{

    0%{
        transform:
        translate(-50%,-50%)
        scale(1);
    }

    100%{
        transform:
        translate(-50%,-50%)
        scale(8);

        opacity:0;
    }
}