/* =====================================================
   MAACO INVEST — portfolio.css
   Pages portfolio public : index (hub) + show (fiche projet)
   ===================================================== */

/* =====================================================
   ===== PORTFOLIO INDEX =====
   ===================================================== */

/* ---------- 1. HERO — dark, identique à about-hero / srvd-hero ---------- */
.ptfio-hero {
    position: relative;
    min-height: 90vh;
    background: var(--noir);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
}
.ptfio-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    z-index: 0;
    pointer-events: none;
}
.ptfio-hero-orb-1 { top: -10%; right: 0;    width: 480px; height: 480px; background: radial-gradient(circle, rgba(122,77,176,0.30), transparent 70%); }
.ptfio-hero-orb-2 { bottom: 0;  left: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(232,61,77,0.18),  transparent 70%); }

.ptfio-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eyebrow — pill dark identique aux autres pages */
.ptfio-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--space-6);
}
.ptfio-hero-eyebrow .pulse-dot {
    width: 8px; height: 8px;
    background: var(--vert);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.2);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
    50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Titre — même taille / poids / espacement que about-hero-title */
.ptfio-hero-title {
    font-size: clamp(36px, 5.5vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: #F0EEEE;
    margin-bottom: var(--space-5);
}
/* Accent violet — même police, juste la couleur change */
.ptfio-hero-accent {
    color: var(--violet-300);
}

.ptfio-hero-tagline {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.65;
    color: rgba(240,238,238,0.55);
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 700px) { .ptfio-hero { min-height: auto; padding: 90px 0 70px; } }

/* ---------- 1bis. SHOWCASE — image pleine largeur ---------- */
.ptfio-showcase {
    background: var(--noir);
    line-height: 0;
    position: relative;
}
.ptfio-showcase-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.ptfio-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 8s ease;
}
.ptfio-showcase-wrap:hover .ptfio-showcase-img { transform: scale(1.03); }
.ptfio-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(2,2,2,0.2) 0%, transparent 30%,
        transparent 60%, rgba(2,2,2,0.5) 100%);
    pointer-events: none;
}
@media (max-width: 700px) { .ptfio-showcase-wrap { aspect-ratio: 4/3; } }

/* ---------- 2. FILTRES — dark sticky ---------- */
.ptfio-filters {
    background: rgba(2,2,2,0.92);
    padding: var(--space-5) 0;
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ptfio-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ptfio-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    color: rgba(240,238,238,0.6);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
}
.ptfio-filter:hover {
    background: rgba(97,57,143,0.2);
    border-color: rgba(97,57,143,0.5);
    color: #F0EEEE;
    transform: translateY(-2px);
}
.ptfio-filter-active {
    background: var(--cat-color, #61398F) !important;
    border-color: var(--cat-color, #61398F) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.ptfio-filter-icon { font-size: 15px; }
.ptfio-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255,255,255,0.1);
    color: rgba(240,238,238,0.7);
    border-radius: var(--radius-full);
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
}
.ptfio-filter-active .ptfio-filter-count {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* ---------- 3. GRILLE PROJETS — fond noir ---------- */
.ptfio-grid-section {
    background: var(--noir);
    padding: var(--space-7) 0 var(--space-10);
}

.ptfio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 1000px) { .ptfio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ptfio-grid { grid-template-columns: 1fr; } }

.ptfio-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    background-color: var(--violet-700);
    text-decoration: none;
    color: white;
    display: block;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.ptfio-card-featured {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 10;
}
@media (max-width: 1000px) { .ptfio-card-featured { grid-column: span 2; } }
@media (max-width: 600px) { .ptfio-card-featured { grid-column: span 1; aspect-ratio: 4 / 3; } }

.ptfio-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
    transition: all var(--transition-smooth);
}
.ptfio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.3);
    color: white;
}
.ptfio-card:hover::before {
    background: linear-gradient(180deg, rgba(96, 57, 142, 0.3) 0%, rgba(0, 0, 0, 0.92) 100%);
}

/* Cover (badges absolus) */
.ptfio-card-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ptfio-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.ptfio-badge-internal {
    background: rgba(255, 255, 255, 0.95);
    color: var(--violet-700);
}
.ptfio-badge-external {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ptfio-card-featured-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--violet-700), var(--rouge));
    color: white;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(96, 57, 142, 0.4);
}

/* Body (texte en bas) */
.ptfio-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
    z-index: 2;
    color: white;
}

.ptfio-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    margin-bottom: var(--space-3);
}

.ptfio-card-title {
    color: white;
    font-size: clamp(20px, 1.8vw, 24px);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.ptfio-card-featured .ptfio-card-title {
    font-size: clamp(24px, 2.2vw, 32px);
}

.ptfio-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-3);
}
.ptfio-card-year {
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.ptfio-card-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 var(--space-3);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}
.ptfio-card:hover .ptfio-card-tagline {
    max-height: 80px;
    opacity: 1;
}

.ptfio-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    transition: gap var(--transition-base);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ptfio-card-cta svg { width: 14px; height: 14px; }
.ptfio-card:hover .ptfio-card-cta {
    opacity: 1;
    transform: translateY(0);
    gap: 10px;
}

/* État vide */
.ptfio-empty {
    text-align: center;
    padding: var(--space-9) var(--space-6);
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(97,57,143,0.4);
    border-radius: var(--radius-xl);
    max-width: 640px;
    margin: 0 auto;
}
.ptfio-empty-icon { font-size: 56px; margin-bottom: var(--space-4); }
.ptfio-empty h3 { font-size: 22px; color: #F0EEEE; margin-bottom: var(--space-3); }
.ptfio-empty p { font-size: 14px; color: rgba(240,238,238,0.55); line-height: 1.6; margin-bottom: var(--space-5); }

/* ---------- 5. CTA FINAL — violet sombre clip-path ↘ ---------- */
/* Styles home-cta-final + cta-cards copiés pour isolation CSS */
.ptfio-cta-final {
    background: #150830;
    color: #F0EEEE;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 52px, 100% 100%, 0 100%);
    padding: calc(var(--space-9) + 52px) 0 var(--space-9);
    margin-top: -52px;
    z-index: 2;
}
.ptfio-cta-final .cta-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.ptfio-cta-final .cta-bg-orb-1 { width:500px; height:500px; top:-100px; right:-150px; background: radial-gradient(circle,rgba(97,57,143,0.45),transparent 65%); }
.ptfio-cta-final .cta-bg-orb-2 { width:400px; height:400px; bottom:-80px; left:-100px; background: radial-gradient(circle,rgba(97,57,143,0.25),transparent 65%); }
.ptfio-cta-final > .container { position:relative; z-index:1; }
.ptfio-cta-final .cta-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-8); }
@media (max-width:900px) { .ptfio-cta-final .cta-cards { grid-template-columns:1fr; max-width:500px; margin-left:auto; margin-right:auto; } }
.ptfio-cta-final .cta-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-xl); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); transition:all var(--transition-smooth); position:relative; }
.ptfio-cta-final .cta-card:hover { background:rgba(255,255,255,0.09); border-color:rgba(97,57,143,0.5); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.ptfio-cta-final .cta-card--primary { background:rgba(97,57,143,0.3); border-color:rgba(97,57,143,0.55); }
.ptfio-cta-final .cta-card--primary:hover { background:rgba(97,57,143,0.45); border-color:rgba(97,57,143,0.8); }
.ptfio-cta-final .cta-card-icon { width:52px; height:52px; border-radius:var(--radius-md); background:rgba(97,57,143,0.25); border:1px solid rgba(97,57,143,0.35); display:flex; align-items:center; justify-content:center; color:var(--violet-300); }
.ptfio-cta-final .cta-card-icon svg { width:24px; height:24px; }
.ptfio-cta-final .cta-card--primary .cta-card-icon { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); color:white; }
.ptfio-cta-final .cta-card-badge { position:absolute; top:var(--space-4); right:var(--space-4); padding:4px 12px; background:#61398F; color:white; font-family:var(--font-display); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:var(--radius-full); }
.ptfio-cta-final .cta-card-title { font-size:21px; font-weight:800; letter-spacing:-0.02em; color:#F0EEEE; margin:0; }
.ptfio-cta-final .cta-card-desc { font-size:14px; color:rgba(240,238,238,0.55); line-height:1.6; margin:0; flex:1; }
.ptfio-cta-final .cta-card-btn { display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-3); color:var(--violet-300); font-family:var(--font-display); font-weight:700; font-size:14px; text-decoration:none; transition:gap var(--transition-base),color var(--transition-base); }
.ptfio-cta-final .cta-card-btn:hover { gap:10px; color:#F0EEEE; }
.ptfio-cta-final .cta-card--primary .cta-card-btn { color:white; }
.ptfio-cta-final .cta-reassurance { text-align:center; margin-top:var(--space-8); font-family:var(--font-display); font-size:13px; color:rgba(240,238,238,0.4); letter-spacing:0.5px; }

/* =====================================================
   ===== PORTFOLIO SHOW (fiche projet) =====
   ===================================================== */

/* ---------- 1. HERO IMMERSIF ---------- */
.ptshow-hero {
    position: relative;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    background-color: var(--violet-900);
    display: flex;
    align-items: flex-end;
    padding: 120px 0 60px;
    overflow: hidden;
}
.ptshow-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 30%, transparent 50%, rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(135deg, rgba(96, 57, 142, 0.25) 0%, transparent 60%);
    z-index: 1;
}
.ptshow-hero-inner {
    position: relative;
    z-index: 2;
    color: white;
}

.ptshow-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
    margin-bottom: var(--space-5);
    transition: all var(--transition-base);
}
.ptshow-hero-back:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateX(-3px);
}
.ptshow-hero-back svg { width: 16px; height: 16px; }

.ptshow-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--cat-color, var(--violet-700));
    color: white;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.ptshow-hero-title {
    color: white;
    font-size: clamp(40px, 7vw, 84px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
    max-width: 900px;
    margin: 0 0 var(--space-4);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.ptshow-hero-tagline {
    font-family: var(--font-script);
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    max-width: 720px;
    margin: 0 0 var(--space-6);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Méta hero (client, secteur, année) */
.ptshow-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    max-width: max-content;
}
.ptshow-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ptshow-hero-meta-item span {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.ptshow-hero-meta-item strong {
    font-family: var(--font-display);
    font-size: 16px;
    color: white;
    letter-spacing: -0.01em;
}

@media (max-width: 700px) {
    .ptshow-hero { min-height: 60vh; padding: 100px 0 40px; }
    .ptshow-hero-meta { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
}

/* ---------- 2. CONTENU PRINCIPAL ---------- */
.ptshow-content {
    background: var(--beige-50);
    padding: var(--space-10) 0;
}
.ptshow-content-inner {
    max-width: 820px;
}
.ptshow-block {
    margin-bottom: var(--space-9);
    position: relative;
}
.ptshow-block:last-child { margin-bottom: 0; }
.ptshow-block-num {
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 120px;
    color: rgba(96, 57, 142, 0.06);
    line-height: 0.85;
    letter-spacing: -0.04em;
    z-index: 0;
    pointer-events: none;
}
.ptshow-block-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--violet-700);
    background: var(--violet-100);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}
.ptshow-block-title {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-5);
    position: relative;
    z-index: 1;
}
.ptshow-block-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--gris-700);
    position: relative;
    z-index: 1;
}

.ptshow-empty-block {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: white;
    border-radius: var(--radius-xl);
    border: 1px dashed var(--violet-300);
}
.ptshow-empty-icon { font-size: 56px; margin-bottom: var(--space-3); }
.ptshow-empty-block h3 { font-size: 22px; margin-bottom: var(--space-3); }
.ptshow-empty-block p { font-size: 14px; color: var(--gris-700); line-height: 1.65; margin-bottom: var(--space-5); }

/* ---------- 3. KPI / RÉSULTATS ---------- */
.ptshow-kpis {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(122, 77, 176, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(232, 61, 77, 0.18) 0%, transparent 50%),
        linear-gradient(180deg, var(--noir) 0%, #14101c 100%);
    color: white;
    padding: var(--space-10) 0;
    position: relative;
    overflow: hidden;
}
.ptshow-kpis-header {
    text-align: center;
    margin-bottom: var(--space-7);
}
.ptshow-kpis-header h2 {
    color: white;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 0;
}
.ptshow-kpis-header h2 .script {
    font-family: var(--font-script);
    color: var(--violet-300);
    font-size: 1.1em;
}
.ptshow-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.ptshow-kpi {
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    transition: all var(--transition-smooth);
}
.ptshow-kpi:hover {
    background: rgba(122, 77, 176, 0.15);
    border-color: var(--violet-300);
    transform: translateY(-4px);
}
.ptshow-kpi-num {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 60px);
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(135deg, white, var(--violet-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-3);
}
.ptshow-kpi-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-300);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.4;
}

/* ---------- 4. GALERIE ---------- */
.ptshow-gallery { background: var(--beige-50); padding: var(--space-10) 0; }

.ptshow-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-7);
}
@media (max-width: 700px) { .ptshow-gallery-grid { grid-template-columns: 1fr; } }

.ptshow-gallery-item {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.ptshow-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.ptshow-gallery-item-large {
    grid-column: span 2;
}
@media (max-width: 700px) { .ptshow-gallery-item-large { grid-column: span 1; } }
.ptshow-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ptshow-gallery-item figcaption {
    padding: var(--space-3) var(--space-4);
    background: white;
    color: var(--gris-700);
    font-size: 13px;
    font-family: var(--font-display);
    border-top: 1px solid var(--beige-200);
}

/* ---------- 5. TÉMOIGNAGE ---------- */
.ptshow-testimonial {
    background: var(--beige-100);
    padding: var(--space-10) 0;
}
.ptshow-testimonial-card {
    max-width: 820px;
    margin: 0 auto;
    background: linear-gradient(135deg, white, var(--violet-50));
    border: 1px solid var(--violet-200);
    border-left: 6px solid var(--violet-700);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-7);
    position: relative;
}
.ptshow-testimonial-mark {
    position: absolute;
    top: 0;
    left: var(--space-5);
    font-family: Georgia, serif;
    font-size: 120px;
    color: var(--violet-300);
    opacity: 0.5;
    line-height: 0.8;
    pointer-events: none;
}
.ptshow-testimonial-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.45;
    color: var(--noir);
    font-style: italic;
    margin: 0 0 var(--space-6);
    letter-spacing: -0.015em;
}
.ptshow-testimonial-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--beige-300);
}
.ptshow-testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gradient-violet);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    box-shadow: 0 8px 16px rgba(96, 57, 142, 0.25);
}
.ptshow-testimonial-author { line-height: 1.4; }
.ptshow-testimonial-author strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--noir);
}
.ptshow-testimonial-author span {
    color: var(--gris-600);
    font-size: 13px;
}

/* ---------- 6. CTA conversion ---------- */
.ptshow-cta {
    background: var(--noir);
    padding: var(--space-10) 0;
    position: relative;
    overflow: hidden;
}
.ptshow-cta::before {
    content: '';
    position: absolute;
    top: -180px; left: -180px;
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(122, 77, 176, 0.45), transparent 70%);
    border-radius: 50%;
    animation: ptfioCtaFloatA 12s infinite ease-in-out;
}
.ptshow-cta::after {
    content: '';
    position: absolute;
    bottom: -180px; right: -180px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(232, 61, 77, 0.35), transparent 70%);
    border-radius: 50%;
    animation: ptfioCtaFloatB 15s infinite ease-in-out;
}
.ptshow-cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    max-width: 720px;
    margin: 0 auto;
}
.ptshow-cta-inner h2 {
    color: white;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: var(--space-4) 0 var(--space-5);
}
.ptshow-cta-inner h2 .script-word {
    font-family: var(--font-script);
    color: var(--violet-300);
    font-size: 1.1em;
}
.ptshow-cta-inner p {
    font-size: 16px;
    color: var(--gris-300);
    line-height: 1.65;
    margin-bottom: var(--space-7);
}
.ptshow-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- 7. PROJETS LIÉS ---------- */
.ptshow-related { background: var(--beige-50); padding: var(--space-10) 0; }
.ptshow-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-7);
}
@media (max-width: 800px) { .ptshow-related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ptshow-related-grid { grid-template-columns: 1fr; } }

.ptshow-related-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: white;
    display: block;
    transition: all var(--transition-smooth);
}
.ptshow-related-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
}
.ptshow-related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    color: white;
}
.ptshow-related-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(255, 255, 255, 0.95);
    color: var(--violet-700);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(8px);
}
.ptshow-related-overlay {
    position: absolute;
    inset: 0;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
}
.ptshow-related-overlay h3 {
    color: white;
    font-size: 17px;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.ptshow-related-overlay p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    margin: 0;
    font-family: var(--font-display);
}

/* =====================================================
   LIGHT THEME — RÉALISATIONS (index) · charte (4 contextes)
   A) blanc · D) cartes-projet = tuiles image (intactes) · B) CTA violet
   ===================================================== */

/* ---- Fonds blancs ---- */
.ptfio-hero,
.ptfio-grid-section { background: #FFFFFF; }
/* Même fond hero→grille : compenser le top à 48px de base → 96px */
.ptfio-grid-section { padding-top: var(--space-9); }

/* ===================== HERO (A) ===================== */
.ptfio-hero-orb-1 { background: radial-gradient(circle, rgba(97,57,143,0.10), transparent 70%); }
.ptfio-hero-orb-2 { display: none; }
.ptfio-hero-eyebrow { background: rgba(97,57,143,0.07); border-color: rgba(97,57,143,0.20); color: var(--violet); }
.ptfio-hero-title { color: #1B1726; }
.ptfio-hero-accent { color: var(--violet); }
.ptfio-hero-tagline { color: #56525F; }

/* ===================== FILTRES — barre claire sticky ===================== */
.ptfio-filters { background: rgba(255,255,255,0.92); border-bottom-color: rgba(27,23,38,0.08); }
.ptfio-filter { background: #FFFFFF; border-color: rgba(27,23,38,0.10); color: #56525F; box-shadow: 0 1px 3px rgba(27,23,38,0.04); }
.ptfio-filter:hover { background: rgba(97,57,143,0.08); border-color: rgba(97,57,143,0.35); color: var(--violet); }
.ptfio-filter-active { box-shadow: 0 6px 16px rgba(97,57,143,0.25); }
.ptfio-filter-count { background: rgba(27,23,38,0.06); color: #56525F; }

/* ===================== GRILLE (A) — cartes = tuiles image (D, intactes) ===================== */
.ptfio-empty { background: #FFFFFF; border-color: rgba(97,57,143,0.30); }
.ptfio-empty h3 { color: #1B1726; }
.ptfio-empty p { color: #56525F; }

/* ===================== CTA FINAL (B) — violet, séparation droite ===================== */
.ptfio-cta-final {
    background: linear-gradient(160deg, #6A3F9C 0%, #4A2C72 100%);
    clip-path: none;
    margin-top: 0;
    padding: var(--space-9) 0;
}