/* =========================================================================
   Matrix Digital — portfolio.css
   Archive /portfolio/ (hero + filtres) + fiche projet (single). (P9)
   Les cartes .mx-projet-card sont stylées dans home.css (global).
   ========================================================================= */

/* ---------------------------------------------------------------- *
   ARCHIVE — HERO
 * ---------------------------------------------------------------- */
.mx-portfolio-hero {
    position: relative;
    padding: 56px 0 48px; /* offset header géré globalement sur #mx-main */
    overflow: hidden;
}
.mx-portfolio-hero__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(22, 199, 230, 0.22), transparent 60%),
        radial-gradient(ellipse at 85% 70%, rgba(195, 47, 217, 0.16), transparent 60%),
        var(--mx-black);
}
.mx-portfolio-hero__title { font-size: clamp(2.2rem, 6vw, 4rem); margin: 12px 0; }
.mx-portfolio-hero__sub { max-width: 56ch; color: var(--mx-muted); font-size: 1.1rem; }

/* ---------------------------------------------------------------- *
   ARCHIVE — FILTRES
 * ---------------------------------------------------------------- */
.mx-portfolio-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--gap-lg);
}
.mx-filtre {
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mx-off-white);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.mx-filtre:hover { color: var(--mx-white); border-color: rgba(255, 255, 255,0.45); }
.mx-filtre.is-active {
    color: #fff;
    background: var(--mx-gradient);
    border-color: transparent;
}
.mx-portfolio-empty { color: var(--mx-muted); padding: var(--gap-lg) 0; text-align: center; }
.mx-portfolio-placeholder { padding: var(--gap-xl) 0; display: flex; flex-direction: column; gap: 20px; align-items: center; }

/* ---------------------------------------------------------------- *
   SINGLE — HERO
 * ---------------------------------------------------------------- */
.mx-projet-hero { position: relative; } /* offset header géré globalement sur #mx-main */
.mx-projet-hero__media {
    position: relative;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--mx-navy-mid);
}
.mx-projet-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mx-projet-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--mx-black) 5%, transparent 60%);
}
.mx-projet-hero__inner { position: relative; margin-top: -60px; z-index: 1; }
.mx-projet-hero__meta { display: flex; gap: 8px; margin-bottom: 14px; }
.mx-projet-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); }
.mx-projet-hero__tagline { margin-top: 10px; font-size: 1.15rem; color: var(--service-accent, var(--mx-cyan)); }

/* ---------------------------------------------------------------- *
   SINGLE — CORPS
 * ---------------------------------------------------------------- */
.mx-projet-body { display: flex; flex-direction: column; gap: var(--gap-xl); max-width: 960px; }
.mx-projet-h2 { font-size: 1.5rem; margin-bottom: 14px; }
.mx-projet-ctx { gap: var(--gap-lg); }

.mx-projet-chiffres {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
    padding: var(--gap-lg);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
    text-align: center;
}
@media (min-width: 768px) { .mx-projet-chiffres { grid-template-columns: repeat(4, 1fr); } }
.mx-projet-chiffre__val {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    background: var(--mx-gradient-text);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mx-projet-chiffre__label { color: var(--mx-muted); font-size: 0.85rem; }

.mx-projet-galerie { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
@media (min-width: 768px) { .mx-projet-galerie { grid-template-columns: repeat(2, 1fr); } }
.mx-projet-galerie__item img { width: 100%; border-radius: var(--card-radius); border: 1px solid var(--mx-border); }
.mx-projet-galerie__item figcaption { margin-top: 8px; color: var(--mx-muted); font-size: 0.85rem; }

.mx-projet-quote {
    padding: var(--gap-lg);
    border-left: 3px solid var(--service-accent, var(--mx-blue));
    background: var(--mx-dark);
    border-radius: var(--card-radius);
}
.mx-projet-quote p { font-size: 1.2rem; color: var(--mx-off-white); line-height: 1.7; }
.mx-projet-quote cite { display: flex; flex-direction: column; margin-top: 16px; font-style: normal; }
.mx-projet-quote cite strong { color: var(--mx-white); }
.mx-projet-quote cite span { color: var(--mx-muted); font-size: 0.88rem; }

.mx-projet-live { text-align: center; }

/* ---------------------------------------------------------------- *
   SINGLE — NAVIGATION & CTA
 * ---------------------------------------------------------------- */
.mx-projet-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    margin-block: var(--gap-xl);
}
@media (min-width: 768px) { .mx-projet-nav { grid-template-columns: 1fr 1fr; } }
.mx-projet-nav__link {
    display: flex; flex-direction: column; gap: 6px;
    padding: var(--gap-md);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
    transition: border-color var(--t-base), transform var(--t-base);
}
.mx-projet-nav__link:hover { border-color: rgba(255, 255, 255,0.45); transform: translateY(-3px); }
.mx-projet-nav__link span { color: var(--mx-muted); font-size: 0.85rem; }
.mx-projet-nav__link strong { color: var(--mx-white); }
.mx-projet-nav__next { text-align: right; }