/* =========================================
   INTEL.CSS - DESIGN "GHOST GLASS"
   ========================================= */

.palace-body {
    background-color: #000000;
    height: 100vh; margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #fff; overflow: hidden;
}

.navbar { z-index: 100; }

/* 1. L'UNIVERS */
.main-universe {
    width: 100%; height: 100%;
    transition: filter 0.6s ease;
}
/* Flou léger quand ouvert (pour garder le contexte) */
.soft-blur {
    filter: blur(5px); 
}

.palace-container {
    display: flex; justify-content: space-between; align-items: center;
    width: 95%; max-width: 1600px; height: 100%; padding: 0 40px; margin: 0 auto;
}

/* --- COLONNES LATÉRALES (Inchangé, toujours beau) --- */
.side-column {
    width: 300px; height: 70%;
    display: flex; flex-direction: column; justify-content: center; gap: 60px;
    position: relative; overflow: hidden;
}
.curved-line-left, .curved-line-right {
    position: absolute; top: 0; width: 100%; height: 100%;
    border: 1px solid rgba(212, 175, 55, 0.5); opacity: 0.6; pointer-events: none;
}
.curved-line-left {
    right: -50%; border-radius: 50%; border-right: none; border-top: none; border-bottom: none;
    box-shadow: -5px 0 20px rgba(212, 175, 55, 0.1);
}
.curved-line-right {
    left: -50%; border-radius: 50%; border-left: none; border-top: none; border-bottom: none;
    box-shadow: 5px 0 20px rgba(212, 175, 55, 0.1);
}
.left-col { text-align: right; padding-right: 40px; }
.right-col { text-align: left; padding-left: 40px; }

.pearl-icon {
    width: 10px; height: 10px; background: #d4af37; border-radius: 50%;
    margin-bottom: 15px; display: inline-block;
    box-shadow: 0 0 15px #d4af37, inset 0 0 5px rgba(255,255,255,0.5);
}
.info-block h3 {
    font-family: 'Cormorant Garamond', serif; color: #d4af37; font-size: 1.6rem; 
    letter-spacing: 2px; margin-bottom: 10px; font-weight: 600;
}
.info-block p { font-size: 0.9rem; line-height: 1.6; color: #bbb; }

/* --- SYSTÈME CENTRAL --- */
.center-stage {
    position: relative; width: 600px; height: 600px;
    display: flex; justify-content: center; align-items: center;
}
.core-jewel {
    width: 150px; height: 150px; border-radius: 50%; background: #000;
    border: 2px solid #d4af37; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 80px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(212, 175, 55, 0.2); z-index: 10;
}
.jewel-img { width: 70%; }

.rotating-ring {
    position: absolute; width: 500px; height: 500px;
    border-radius: 50%; animation: spin 80s linear infinite; z-index: 20;
}
.ring-border {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid rgba(212, 175, 55, 0.6); border-radius: 50%;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}

.satellite-anchor { position: absolute; width: 0; height: 0; }
.pos-1 { top: 0; left: 50%; }
.pos-2 { top: 82%; left: 91%; }
.pos-3 { top: 82%; left: 9%; }

.satellite-content {
    animation: spin-reverse 80s linear infinite;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; width: 160px;
    transform-origin: center center; margin-left: -80px; margin-top: -20px; 
}
.sat-dot {
    width: 14px; height: 14px; background: #000; border: 2px solid #d4af37; border-radius: 50%;
    margin-bottom: 8px; box-shadow: 0 0 15px #d4af37; transition: 0.4s;
}
.sat-text {
    font-size: 0.7rem; letter-spacing: 2px; color: #fff; font-weight: bold;
    background: #000; padding: 8px 15px; border: 1px solid #333; border-radius: 30px;
    transition: 0.4s; white-space: nowrap;
}
.satellite-content:hover .sat-dot { transform: scale(1.3); background: #d4af37; box-shadow: 0 0 30px #d4af37; }
.satellite-content:hover .sat-text { border-color: #d4af37; color: #d4af37; background: rgba(212,175,55,0.1); }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* --- 4. L'OVERLAY "GHOST GLASS" (La Correction) --- */

#ghost-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0; pointer-events: none;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease;
}

#ghost-overlay.active {
    opacity: 1; pointer-events: all; z-index: 9999;
}

/* Zone transparente pour cliquer et fermer */
.click-catcher {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); /* Très léger, on voit bien derrière */
}

/* LA CARTE EN VERRE */
.ghost-card {
    position: relative;
    width: 500px; max-width: 85%;
    padding: 60px 40px;
    border-radius: 50px;
    
    /* Le secret du verre */
    background: rgba(15, 15, 15, 0.6); /* Semi-transparent */
    backdrop-filter: blur(20px); /* Le flou magique */
    -webkit-backdrop-filter: blur(20px);
    
    /* Bordure subtile */
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Ombre douce */
    
    text-align: center;
    transform: scale(0.95) translateY(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ghost-overlay.active .ghost-card {
    transform: scale(1) translateY(0);
}

.ghost-card h2 {
    font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: #d4af37;
    margin-bottom: 20px; letter-spacing: 3px; text-transform: uppercase;
    text-shadow: 0 0 30px rgba(212,175,55,0.4); /* Glow sur le texte */
}

/* Petits points de séparation */
.sep-dots {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 30px;
}
.sep-dots span {
    width: 4px; height: 4px; background: #d4af37; border-radius: 50%; opacity: 0.6;
}

.ghost-card p {
    font-family: 'Montserrat', sans-serif; font-size: 1rem; color: #f0f0f0;
    line-height: 1.8; margin-bottom: 40px; font-weight: 300;
}

.btn-ghost {
    display: inline-block;
    padding: 15px 40px; 
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05); /* Très légère teinte */
    color: #d4af37;
    text-decoration: none; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    border-radius: 40px;
    transition: 0.3s;
}
.btn-ghost:hover {
    background: #d4af37; color: #000; box-shadow: 0 0 30px rgba(212,175,55,0.4);
}

/* MOBILE */
@media (max-width: 1100px) {
    .palace-container { flex-direction: column; padding-top: 100px; height: auto; }
    .side-column { display: none; }
    .center-stage { transform: scale(0.65); }
    .rotating-ring, .satellite-content { animation: none; }
    .ghost-card { width: 90%; padding: 40px 20px; }
}



/* =========================================
   FOOTER ROYAL (DESIGN VALIDÉ)
   ========================================= */

.royal-footer {
    width: 100%;
    background-color: #000000;
    margin-top: auto; /* Le pousse tout en bas */
    z-index: 50;
    padding: 60px 0 40px 0;
    border-top: 1px solid #111;
    position: relative;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Séparateur Ligne-Losange-Ligne */
.footer-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    opacity: 0.5;
}

.footer-divider .line {
    width: 100px; height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37);
}
.footer-divider .line:last-child {
    background: linear-gradient(90deg, #d4af37, transparent);
}
.footer-divider .diamond {
    color: #d4af37; font-size: 0.8rem;
}

/* Menu des Liens */
.footer-menu {
    display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
}

.footer-menu a {
    font-family: 'Cormorant Garamond', serif; /* Police Luxe */
    font-size: 0.9rem;
    color: #888;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.4s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 5px;
}

.footer-menu a:hover {
    color: #d4af37;
    border-bottom-color: #d4af37;
}

/* Copyright */
.footer-copy {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    color: #333;
    letter-spacing: 3px;
    margin-top: 20px;
}

/* MOBILE */
@media (max-width: 800px) {
    .footer-menu { gap: 20px; flex-direction: column; }
    .footer-divider .line { width: 40px; }
}

/* =========================================
   INTEL.CSS - CORRECTION FOOTER
   ========================================= */

/* 1. ON DÉBLOQUE LE BODY */
html, body.palace-body {
    height: 100%; /* Prend au moins toute la hauteur */
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    
    /* LE SECRET EST ICI : */
    overflow-x: hidden; /* Cache le scroll horizontal */
    overflow-y: auto;   /* AUTORISE le scroll vertical (pour voir le footer) */
    
    display: flex;
    flex-direction: column; /* Organise la page en colonne */
}

.navbar { z-index: 100; position: fixed; top: 0; width: 100%; }

/* 2. L'UNIVERS POUSSE LE FOOTER */
.main-universe {
    flex: 1; /* Prend tout l'espace disponible, pousse le footer en bas */
    width: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    
    /* On ajoute des marges pour ne pas que le footer colle au cercle */
    padding-top: 100px; 
    padding-bottom: 100px; 
    
    min-height: 100vh; /* L'univers fait au moins la taille de l'écran */
}

/* ... LE RESTE DE TON CSS NE CHANGE PAS ... */
/* (palace-container, side-column, center-stage, etc.) */

/* Assure-toi que le footer a ce style (normalement déjà dans style.css ou intel.css) */
.royal-footer {
    width: 100%;
    background-color: #000000;
    /* margin-top: auto; est géré par le flex du body */
    z-index: 50;
    padding: 60px 0 40px 0;
    border-top: 1px solid #111;
    position: relative; /* Il redevient un élément normal du flux */
}