:root {
    --poly-blue: #1a365d;
    --poly-gold: #e6a325;
    --poly-bg: #f8fafc;
    --white: #ffffff;
    --red-dev: #e11d48;
}

html, body {
    height: 100vh; width: 100vw; margin: 0; padding: 0;
    overflow: hidden; font-family: 'Inter', sans-serif;
    background-color: var(--poly-bg);
}

.dashboard {
    height: 100vh; display: flex; flex-direction: column;
    padding: 30px 40px; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
}

header, .dev-section { flex-shrink: 0; }

header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 3px solid var(--poly-gold); padding-bottom: 15px; margin-bottom: 30px;
}

header h1 { color: var(--poly-blue); margin: 0; font-size: 1.8rem; }
header p { color: #718096; margin: 0; }

.main-layout {
    display: flex; flex-grow: 1; gap: 25px; overflow: hidden; margin-bottom: 20px;
    position: relative; /* Important pour le positionnement mobile */
}

.grid-container {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px; flex-grow: 1; overflow-y: auto; padding: 10px 5px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.grid-container::-webkit-scrollbar { display: none; }

.card {
    background: var(--white); padding: 30px; border-radius: 12px;
    border-top: 5px solid var(--poly-blue); box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center; transition: all 0.3s ease;
    display: flex; flex-direction: column; justify-content: space-between;
    height: 280px;
}

.card:hover { transform: translateY(-8px); box-shadow: 0 12px 20px rgba(26, 54, 93, 0.15); }
.icon-box { font-size: 45px; color: var(--poly-blue); margin-bottom: 15px; }

.details-section {
    width: 0; opacity: 0; background: var(--white);
    border-radius: 12px; border-left: 5px solid var(--poly-gold);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}

.details-section.active { width: 400px; opacity: 1; padding: 25px; }

.details-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #edf2f7; padding-bottom: 10px; }
.details-body { flex-grow: 1; overflow-y: auto; padding: 20px 0; }

.btn-close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--red-dev); }

.btn-main {
    border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; text-decoration: none; display: inline-block;
    background: var(--poly-blue); color: white; padding: 10px 20px;
}
.btn-main:hover { background: var(--poly-gold); transform: scale(1.05); }

.btn-dev { background: var(--poly-blue); color: white; padding: 10px 18px; font-size: 0.8rem; }

.dev-section {
    padding: 20px; background: #f1f5f9; border-radius: 12px;
    border: 1px dashed var(--poly-blue); border-left: 6px solid var(--red-dev);
}
.dev-content { display: flex; justify-content: space-between; align-items: center; }
.dev-text strong { color: var(--red-dev); display: block; font-size: 0.85rem; }

/* --- AJUSTEMENT RESPONSIVE UNIQUE --- */

@media (max-width: 900px) {
    .details-section.active {
        position: fixed; /* Sort du flux pour ne pas écraser les cartes */
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        width: auto; /* Prend toute la place dispo moins les marges */
        z-index: 999;
        border-left: none;
        border-top: 8px solid var(--poly-gold);
        box-shadow: 0 0 50px rgba(0,0,0,0.3);
    }

    .dashboard { padding: 15px; }
    header h1 { font-size: 1.4rem; }
    .grid-container { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}