/* === BASE GLOBALE === */
body {
    background-image: url("assets/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    font-family: "Geo", sans-serif;
    color: white;
    transition: all 0.5s ease;
    margin: 0;
    padding: 0;
}

p {
    font-size: clamp(1rem, 1.1rem, 1.2rem);
    text-shadow: 5px 5px 5px #000000;
}

h1, h2 {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    color: white;
}

/* === MENU === */
.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    margin-bottom: 2%;
}

.menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0;
    margin: 0;
    font-weight: 1000;
    color: white;
    text-shadow: 0 0 10px #ffffff;
}

.menu li {
    list-style: none;
    margin-top: 0.8ch;
}

.menu li a {
    color: white;
    text-decoration: none;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.menu a:hover {
    text-decoration: underline;
}

.btn_menu img {
    width: 5ch;
}

/* === CATALOGUE / PLANETES === */
.bloc-p2 {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 20px;
    margin: 20px auto;
    width: 80%;
    max-width: 1000px;
    backdrop-filter: blur(6px);
}

.planet-icon {
    width: 50px;
    height: auto;
}

.planete_mini {
    margin: 0;
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    color: white;
}

.desc_planete {
    margin-top: 5px;
    color: white;
    line-height: 1.5;
    font-size: clamp(0.9rem, 3.5vw, 1rem);
}

/* === PAGE ACCUEIL === */
.desc_planete_mini {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 5%;
}

.desc_planete_mini img {
    width: 20ch;
}

#presentation {
    text-align: center;
    width: 75%;
    margin: 0 auto;
}

#top_planetes {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.25);
    padding-left: 3ch;
    border-radius: 10ch;
    text-align: center;
    width: 75%;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

video, iframe {
    width: 75%;
    border: none;
    display: flex;
    flex-direction: column;
    border-radius: 2ch;
    text-align: center;
    margin: 0 auto;
    margin-top: 3%;
}

/* === PAGE TARIFS === */
.carre {
    display: flex;          
    justify-content: center; 
    align-items: center;     
    flex-grow: 1;           
    gap: 100px;             
    flex-wrap: wrap;        
}

.formule {
    color: rgb(160, 12, 233);
    display: flex;
    flex-direction: column;     
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    border-radius: 25px;
    border: 5px solid rgb(160, 12, 233);
    background-color: rgba(246, 7, 250, 0.1); 
}

.prix {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ff6cff;
}

.desc {
    font-size: 1.1rem;
    color: #e3b7ff;
}

.btn {
    background-color: rgb(160, 12, 233);
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.btn:hover {
    background-color: rgb(113, 3, 224);
}

.reservation {
    display: none; 
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.rectangle {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30px;
    border-radius: 15px;
    color: white;
    text-align: center;
}


/* === A PROPOS === */
.about-us {
    margin-top: 5px;
    color: white;
    padding: 20px;
    font-size: clamp(1.4rem, 5vw, 1.5rem);
    line-height: 1.8;
}

.bloc-p4 {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(0,0,0,0.3);
    padding: 20px;
    border-radius: 20px;
    margin: 20px auto;
    width: 80%;
    max-width: 1000px;
    backdrop-filter: blur(6px);
}

.social {
    background: rgba(0,0,0,0.3);
    padding: 20px;
    border-radius: 20px;
    margin: 20px auto;
    width: 80%;
    max-width: 1000px;
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.social a img {
    width: 8rem;
    height: 8em;
    border-radius: 10ch;
}

/* === FORMULAIRE === */
.formulaire-box {
    width: 700px;
    padding: 40px;
    border-radius: 12px;
    border: 7px solid rgb(160, 12, 233);
    background-color: rgba(191, 7, 237, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formulaire {
    width: 25rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 17px;
}

.formulaire label {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.formulaire input,
.formulaire textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgb(160, 12, 233);
    border-radius: 8px;
    padding: 10px;
    color: rgb(161, 7, 238);
}

.envoyer {
    background-color: rgb(160, 12, 233);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: bold;
}

/* === MOBILE / RESPONSIVE === */
@media (max-width: 768px) {
    p { font-size: 1rem; }
    h1 { width: auto; padding: 0 10px; }
    .bloc-p2, #top_planetes, .desc_planete_mini { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
    .planet-icon { width: 70px; }
    .menu ul { flex-direction: column; gap: 1rem; }
    .menu li { width: 100%; text-align: center; margin-top: 0; }
    .carre { flex-direction: column; gap: 1rem; }
    .formulaire { width: 100%; }
    video, iframe { width: 100%; max-width: 100%; }
}

/* === THEME CLAIR / ALT-THEME === */
body.alt-theme {
    background-image: url("assets/background-light.png");
    color: black;
}

body.alt-theme .menu {
    background-color: rgba(255, 210, 143, 0.397);
}

body.alt-theme .menu li a {
    color: black;
    text-shadow: none;
}

body.alt-theme h1, body.alt-theme h2, body.alt-theme p, body.alt-theme .planete_mini {
    color: black;
    text-shadow: none;
}

body.alt-theme #top_planetes,
body.alt-theme .bloc-p2,
body.alt-theme .bloc-p4,
body.alt-theme .social,
body.alt-theme .formulaire-box {
    background: rgba(255, 255, 255, 0.11);
    color: black;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 20px;
    backdrop-filter: blur(0);
}

body.alt-theme .desc_planete_mini img {
    filter: brightness(1.1);
}

body.alt-theme .formule h2,
body.alt-theme .formule .prix,
body.alt-theme .formule .desc {
    color: black;
}

body.alt-theme .btn {
    background-color: rgb(160, 12, 233);
    color: white;
}

body.alt-theme .btn:hover {
    background-color: rgb(113, 3, 224);
}

body.alt-theme .envoyer {
    background-color: rgb(160, 12, 233);
    color: white;
}

body.alt-theme .envoyer:hover {
    background-color: rgb(113, 3, 224);
}

body.alt-theme iframe {
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 1ch;
}

.formulaire-box {
    width: 90%;
    padding: 20px;
    box-sizing: border-box;

}