/* =========================================
   STYLE SPÉCIFIQUE : PAGE À PROPOS (V3 COMPACT)
   ========================================= */

/* --- 1. PROFILE CARD (COMPACT PREMIUM) --- */
.profile-card {
    display: flex;
    align-items: stretch;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 450px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
}

.card-image {
    width: 40%;
    position: relative;
    border-right: 1px solid #1a1a1a;
    background: #050505;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    opacity: 0.95;
}

.card-content {
    width: 60%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-family: var(--font-h);
    font-size: 2.2rem;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.accent-p {
    font-family: var(--font-h);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 500;
}

.body-text {
    font-family: var(--font-b);
    color: #999;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 30px;
}

.card-meta {
    display: flex;
    gap: 30px;
    border-top: 1px solid #222;
    padding-top: 20px;
    margin-bottom: 25px;
}

.meta-item span {
    display: block; color: var(--accent); font-size: 0.6rem;
    text-transform: uppercase; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px;
}
.meta-item p { color: #ddd; font-size: 0.85rem; font-weight: 500; }

.cta-link {
    color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem;
    transition: 0.3s; display: inline-block;
}
.cta-link:hover { color: var(--accent); transform: translateX(5px); }

/* --- 2. ARSENAL (BENTO GRID VISUEL) --- */
.gear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.gear-card.visual-card {
    background: #0a0a0a; border: 1px solid #1a1a1a; padding: 0;
    overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: all 0.3s ease;
}

.gear-visual {
    height: 200px; width: 100%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, #222 0%, #0a0a0a 70%);
    padding: 20px; transition: 0.4s ease;
}

.gear-visual img {
    max-height: 100%; max-width: 90%; object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.gear-content { padding: 20px; border-top: 1px solid #1a1a1a; background: #0a0a0a; flex-grow: 1; z-index: 2; }

/* --- 3. SPECS & EXPERTISE GRID --- */
.about-specs {
    background: #080808;
    padding: 80px 0;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.spec-card {
    padding: 30px; background: #0a0a0a; border: 1px solid #1a1a1a; transition: 0.3s;
}

.spec-card:hover { border-color: var(--accent); transform: translateY(-50px); }

.spec-number {
    display: block; font-family: var(--font-h); font-size: 2.5rem;
    color: #fff; font-weight: 700; margin-bottom: 5px;
}

.spec-label {
    font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px;
}

/* --- 4. GRILLE DES VALEURS --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    border-top: 1px solid #222;
    padding-top: 60px;
}

.value-item { padding: 20px; transition: 0.4s ease; }
.value-icon {
    font-size: 3rem; font-weight: 800; color: #1a1a1a;
    margin-bottom: 20px; font-family: var(--font-h); transition: 0.4s ease;
}
.value-item h3 { color: #fff; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 15px; letter-spacing: 1px; }
.value-item p { color: #777; line-height: 1.6; font-size: 0.95rem; }
.value-item:hover .value-icon { color: var(--accent); transform: translateX(10px); }

/* --- 5. RESPONSIVE & FIX HEADER MOBILE --- */

@media (max-width: 1024px) {
    .profile-card { flex-direction: column; height: auto; max-width: 500px; }
    .card-image { width: 100%; height: 400px; border-right: none; border-bottom: 1px solid #1a1a1a; }
    .card-content { width: 100%; padding: 30px 25px; }
    .gear-grid { grid-template-columns: repeat(2, 1fr); }
    .specs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* FIX CRITIQUE : Dégagement du Header Florska */
    .about-page-container, 
    .page-template-about-php main {
        padding-top: 140px !important; /* On pousse tout le contenu sous le logo */
    }

    .profile-card {
        margin-top: 0 !important;
        width: 100% !important;
    }

    .card-title { font-size: 1.8rem; }
    .card-meta { flex-direction: column; gap: 15px; }

    /* LE SWIPE MAGIC (Arsenal Mobile) */
    .gear-grid {
        display: flex; gap: 15px; overflow-x: auto; 
        scroll-snap-type: x mandatory; padding-bottom: 30px;
        margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .gear-grid::-webkit-scrollbar { display: none; }
    .gear-card.visual-card { min-width: 85vw; scroll-snap-align: center; }

    .values-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .specs-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .spec-number { font-size: 1.8rem; }
}