/* ==========================================================================
   MYPARCS - DESIGN SYSTÈME COMPLET
   ========================================================================== */
:root {
    --bg: #09090b;
    --card: #151b26;
    --border: #27272a;
    --accent: #38bdf8;
    --text: #f1f5f9;
    --purple: #d8b4fe;
    --gold: #f59e0b;
    --danger: #ef4444;
    --success: #10b981;
}

body { background-color: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; margin: 0; padding-top: 80px; overflow-x: hidden; }
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }

/* --- BANDEAU EXPLORATION (NEON) --- */
.explo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 40px; }
.explo-card { 
    background: #111827; border: 1px solid var(--border); border-radius: 12px; 
    padding: 15px; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: 0.3s;
}
.explo-card:hover { background: #1e293b; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }

.border-purple { border-left: 3px solid #a855f7; }
.border-red    { border-left: 3px solid #ef4444; }
.border-yellow { border-left: 3px solid #f59e0b; }
.border-green  { border-left: 3px solid #10b981; }
.border-blue   { border-left: 3px solid #3b82f6; }
.border-cyan   { border-left: 3px solid #22d3ee; }

.explo-txt h3 { margin: 0; font-size: 0.9em; color: #d8b4fe; font-weight: 800; }
.explo-txt p { margin: 2px 0 0 0; font-size: 0.75em; color: #a855f7; opacity: 0.9; }

/* --- GRILLE DES PARCS --- */
.parks-container { display: grid; gap: 25px; transition: 0.3s; padding-bottom: 50px; }
.grid-view { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.list-view { grid-template-columns: 1fr; }

.park-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; position: relative; transition: 0.3s; display: flex; flex-direction: column; height: 100%; }
.park-card:hover { border-color: var(--accent); transform: translateY(-5px); z-index: 5; }

/* Header de carte (Image + Badges) */
.card-header { height: 200px; position: relative; flex-shrink: 0; }
.park-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.badge-status { position: absolute; top: 15px; left: 15px; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(8px); color: white; padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 0.85em; display:flex; align-items:center; gap:5px; }
.badge-count { position: absolute; top: 15px; left: 130px; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); color: white; padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: 0.85em; border: 1px solid rgba(255,255,255,0.1); }

/* Boutons flottants */
.float-actions { position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.float-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(5px); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.float-btn:hover { background: var(--accent); color: #000; }
.active-red { background: #ef4444 !important; }
.active-green { background: #10b981 !important; }

/* Corps de la carte */
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.park-title { font-size: 1.4em; font-weight: 800; color: white; display: flex; align-items: center; gap: 10px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #4b5563; }
.status-dot.open { background-color: var(--success); box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.6); }
.status-dot.closed { background-color: var(--danger); box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.5); }

.park-country { color: #94a3b8; font-size: 0.9em; margin-bottom: 10px; }
.auto-clock { background: rgba(56, 189, 248, 0.1); color: var(--accent); padding: 2px 8px; border-radius: 6px; font-weight: 700; font-family: monospace; font-size: 0.85em; }

/* GRILLE D'ACTIONS (LES 8 BOUTONS) */
.actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #0b0d11; padding: 15px; border-radius: 20px; margin-top: auto; }
.action-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #94a3b8; font-size: 0.8em; font-weight: 700; transition: 0.2s; }
.action-item:hover { color: white; transform: translateY(-2px); }
.action-item i { font-size: 1.2em; margin-bottom: 5px; }
.text-oracle { color: #d8b4fe; font-weight: 800; text-shadow: 0 0 10px rgba(216, 180, 254, 0.3); }

/* BOUTON RETOUR UNIFIÉ */
.btn-back { width: 45px; height: 35px; background: #1e293b; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: white; border: 1px solid var(--border); text-decoration: none; }

/* RESPONSIVE */
@media (max-width: 1200px) { .explo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .explo-grid { grid-template-columns: repeat(2, 1fr); } .grid-view { grid-template-columns: 1fr; } }

/* --- OPTIMISATION DU CHARGEMENT --- */

/* Empêche les images de faire bouger le reste de la page en attendant de charger */
img {
    font-size: 0; /* Évite un bug d'espace vide */
    content-visibility: auto; /* Optimisation navigateur moderne */
}

/* Effet de fondu progressif sur les cartes pour éviter les saccades */
.park-card, .attraction-card, .dashboard-card {
    view-transition-name: card; /* Pour les navigateurs compatibles */
    animation: fadeInSmooth 0.5s ease-out;
}

@keyframes fadeInSmooth {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Amélioration de la fluidité du défilement (Scroll) */
html {
    scroll-behavior: smooth;
}

/* --- COULEURS DES POINTS DE STATUT --- */

/* VERT : Ouvert normalement */
.status-dot.dot-open { 
    background-color: #10b981 !important; 
    box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.5); 
}

/* ROUGE : Fermé */
.status-dot.dot-closed { 
    background-color: #ef4444 !important; 
}

/* ORANGE : Ouvre dans moins de 30 min */
.status-dot.dot-opening-soon { 
    background-color: #f59e0b !important; 
    box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.5);
    animation: pulse-orange 1.5s infinite; 
}

/* BLEU : Ferme dans moins de 60 min */
.status-dot.dot-closing-soon { 
    background-color: #3b82f6 !important; 
    box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.5);
    animation: pulse-blue 1.5s infinite; 
}

/* Animations */
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}