/* =================================================================
   STYLE-INDEX.CSS — Index Page Specific Styles v52.99
   ================================================================= */

/* --- 12. ABOUT / MISSION BLOCK --- */
.bio-intro {
    line-height: 1.8;
}

/* Prevents CLS when i18n replaces French static text with English:
   the paragraph keeps its reserved height even if the translated
   text wraps differently. Desktop: narrower min-height (wider cols). */
.hero-bio {
    min-height: 5em;
}

@media (max-width: 768px) {
    .hero-bio {
        /* Mobile: text wraps more –> more lines –> more height to reserve */
        min-height: 12em;
    }
}


.role-subsection {
    margin-top: 40px;
}

.mission-block {
    padding: 30px;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: rgba(37, 99, 235, 0.05) !important;
    margin-top: 25px;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
}

.mission-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.4);
    transform: translateY(-5px);
}


/* content-wrapper--index: small top margin to sit below the hero */
.content-wrapper--index {
    margin-top: 15px;
}

/* role-subsection: spacing above the mission block */
.role-subsection {
    margin-top: 50px;
}

/* mission-title: primary-colored h3 with no top margin */
.mission-title {
    color: var(--color-primary);
    margin-top: 0;
}

/* mission-block-inner: full-width wrapper inside the mission card */
.mission-block-inner {
    width: 100%;
}

/* mission-role-row: flex row for "Role at Company" line */
.mission-role-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 15px;
    font-size: 1.15rem;
}

/* mission-at: secondary-colored connector word */
.mission-at {
    color: var(--color-text-secondary);
}

/* mission-desc: description paragraph with bottom margin */
.mission-desc {
    margin-bottom: 15px;
}

/* ecosystem-title: h3 with top + bottom margins */
.ecosystem-title {
    margin-top: 40px;
    margin-bottom: 15px;
}

/* other-activities-list: column flex layout for activity cards */
.other-activities-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

/* activity-item: consistent card padding */
.activity-item {
    padding: 20px;
}

/* skill-tag-group: small top margin before skill tag */
.skill-tag-group {
    margin-top: 10px;
}


/* --- 13. TOPIC CARDS / TILES --- */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.topic-card {
    padding: 25px 15px;
    text-align: center;
    background: linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
        var(--glass-border-gradient) border-box;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm), var(--glass-inner-shadow);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* Border Shimmer — pseudo-élément avec conic-gradient rotatif */
.topic-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from var(--shimmer-angle, 0deg),
            transparent 0%,
            rgba(37, 99, 235, 0.8) 15%,
            rgba(139, 92, 246, 0.9) 30%,
            rgba(6, 182, 212, 0.7) 45%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    animation: shimmer-spin 2.5s linear infinite paused;
}

.topic-card:hover::before {
    opacity: 1;
    animation-play-state: running;
}

/* Inner mask pour que seule la bordure soit visible */
.topic-card::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--glass-bg);
    border-radius: calc(var(--radius-lg) - 1px);
    z-index: -1;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

@keyframes shimmer-spin {
    to {
        --shimmer-angle: 360deg;
    }
}

@property --shimmer-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.topic-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 25px 50px -12px rgba(37, 99, 235, 0.3),
        0 0 20px rgba(139, 92, 246, 0.15);
}

.topic-icon {
    width: 36px;
    height: 36px;
    fill: var(--color-primary);
    margin-bottom: 4px;
}

.topic-name {
    font-weight: 600;
    font-size: 0.9rem;
}

/* skills-section: spacing above the skills block */
.skills-section {
    margin-top: 30px;
}

/* skills-container: wrapping flex container for skill tags */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.skill-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-tag-text);
    /* Use high-contrast blue */
    font-size: 0.82rem;
    font-weight: 700;
    /* Increased weight for legibility */
    margin: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Lighter border for clean look */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    word-break: break-word;
    /* Prevent overflow on small screens */
}

.skill-tag:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    /* Soft, premium glass-like glow instead of aggressive structural change */
}


/* --- 13b. ANIMATED STATS COUNTERS --- */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 32px 0 8px;
    padding: 0;
    flex-wrap: wrap;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
        var(--gradient-primary) border-box;
    border: 1.5px solid transparent;
    box-shadow: var(--shadow-md), var(--glass-inner-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    /* Reserve space to prevent CLS (v52.99) */
    min-height: 104px;
}

.stat-item {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 20px 16px;
    position: relative;
    transition: background 0.3s ease;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--color-border), transparent);
}

.stat-item:hover {
    background: rgba(37, 99, 235, 0.05);
}

.stat-value {
    display: block;
    font-family: var(--font-header);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    opacity: 0.85;
}

@media (max-width: 600px) {
    .stats-bar {
        gap: 0;
        flex-wrap: nowrap;
        /* Force the 3 items to stay on 1 line */
        min-height: 64px;
        /* Tighter mobile height */
    }

    .stat-item {
        min-width: auto;
        /* Remove min-width to allow shrinking */
        padding: 14px 4px;
        /* Tighter padding */
    }

    /* Hide the vertical separators on mobile for a cleaner, unified look */
    .stat-item:not(:last-child)::after {
        display: none;
    }

    .stat-value {
        font-size: 1.25rem;
        /* Slightly smaller for mobile row */
        margin-bottom: 2px;
    }

    .stat-label {
        font-size: 0.65rem;
        /* Smaller text to prevent wrapping */
        letter-spacing: 0.02em;
    }
}

/* --- 13c. HORIZONTAL SCROLL CAROUSELS (v52.99) --- */
@media (max-width: 900px) {

    .skills-container,
    .stats-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) transparent;
        position: relative;
        z-index: 1;
    }

    /* Bulletproof fix for Compositor Bug: hide horizontal scroll when menu is open */
    body.menu-open .skills-container,
    body.menu-open .stats-bar {
        overflow-x: hidden !important;
        scrollbar-width: none;
    }

    [data-theme="dark"] .skills-container,
    [data-theme="dark"] .stats-bar {
        scrollbar-color: var(--color-primary) transparent;
    }

    .skill-tag,
    .stat-item {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}