/* =====================================================
   MAACO INVEST — blog.css  (v2 premium dark)
   Palette : Noir #020202 (65%) · Violet #61398F (25%) · Blanc #F0EEEE (10%)
   ===================================================== */

/* =====================================================
   1. HERO — identique à about-hero / srvd-hero
   ===================================================== */
.blog-hero {
    position: relative;
    min-height: 90vh;
    background: var(--noir);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
}

.blog-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    z-index: 0;
    pointer-events: none;
}
.blog-hero-orb-1 { top: -10%; right: 0;    width: 480px; height: 480px; background: radial-gradient(circle, rgba(122,77,176,0.30), transparent 70%); }
.blog-hero-orb-2 { bottom: 0;  left: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(232,61,77,0.18),  transparent 70%); }

.blog-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 */
.blog-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(2,2,2,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(2,2,2,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(2,2,2,0.65);
    margin-bottom: var(--space-6);
}
.blog-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 que about-hero-title */
.blog-hero-title {
    font-size: clamp(36px, 5.5vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: #020202;
    margin-bottom: var(--space-5);
}
/* Accent violet — même police, juste la couleur */
.blog-hero-accent {
    color: var(--violet-300);
}

.blog-hero-sub {
    font-size: clamp(16px, 1.5vw, 18px);
    color: rgba(2,2,2,0.55);
    line-height: 1.7;
    max-width: 600px;
    text-align: center;
}

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

/* =====================================================
   2. SHOWCASE — image pleine largeur
   ===================================================== */
.blog-showcase {
    background: var(--noir);
    line-height: 0;
    position: relative;
}
.blog-showcase-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.blog-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 8s ease;
}
.blog-showcase-wrap:hover .blog-showcase-img { transform: scale(1.03); }
.blog-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) { .blog-showcase-wrap { aspect-ratio: 4/3; } }

/* =====================================================
   3. ARTICLES — fond blanc clip-path diagonal ↗
   ===================================================== */
.blog-articles {
    background: #F0EEEE;
    padding: calc(var(--space-10) + 52px) 0 var(--space-10);
    clip-path: polygon(0 52px, 100% 0, 100% 100%, 0 100%);
    margin-top: -52px;
    z-index: 1;
    position: relative;
}

/* État vide */
.blog-empty {
    text-align: center;
    padding: var(--space-9) var(--space-6);
    background: white;
    border: 1px dashed rgba(97,57,143,0.3);
    border-radius: var(--radius-xl);
    max-width: 640px;
    margin: 0 auto;
}
.blog-empty-icon { font-size: 56px; margin-bottom: var(--space-4); }
.blog-empty h3 { font-size: 22px; color: #020202; margin-bottom: var(--space-3); }
.blog-empty p { font-size: 15px; color: rgba(2,2,2,0.6); line-height: 1.65; margin-bottom: var(--space-5); }

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

.blog-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: #020202;
    border: 1px solid rgba(2,2,2,0.07);
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(2,2,2,0.12);
    border-color: rgba(97,57,143,0.2);
    color: #020202;
}

/* Card featured (1er article) — prend 2 colonnes */
.blog-card--featured {
    grid-column: span 2;
}
.blog-card--featured .blog-card-cover {
    aspect-ratio: 16 / 7;
}
@media (max-width: 1000px) { .blog-card--featured { grid-column: span 2; } }
@media (max-width: 600px)  { .blog-card--featured { grid-column: span 1; } }

/* Cover */
.blog-card-cover {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #61398F 0%, #3b1f6e 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(2,2,2,0.35) 100%);
    transition: opacity var(--transition-smooth);
    opacity: 0;
}
.blog-card:hover .blog-card-cover::after { opacity: 1; }

.blog-card-cat {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: inline-block;
    padding: 4px 12px;
    background: rgba(2,2,2,0.65);
    backdrop-filter: blur(8px);
    color: white;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--radius-full);
}

/* Body */
.blog-card-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: rgba(2,2,2,0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.blog-card-meta span + span::before {
    content: '·';
    margin-right: 10px;
}
.blog-card-title {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #020202;
    margin: 0;
}
.blog-card--featured .blog-card-title {
    font-size: clamp(20px, 2vw, 26px);
}
.blog-card-excerpt {
    font-size: 14px;
    color: rgba(2,2,2,0.6);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.blog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: #61398F;
    transition: gap var(--transition-base);
}
.blog-card-cta svg { width: 14px; height: 14px; }
.blog-card:hover .blog-card-cta { gap: 10px; }

/* =====================================================
   4. CTA FINAL — violet sombre diagonal ↘
   (Styles home-cta-final copiés pour isolation CSS)
   ===================================================== */
.blog-cta-final {
    background: #efe9f9;
    color: #020202;
    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;
}
.blog-cta-final .cta-bg-orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.blog-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%); }
.blog-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%); }
.blog-cta-final > .container { position:relative; z-index:1; }
.blog-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) { .blog-cta-final .cta-cards { grid-template-columns:1fr; max-width:500px; margin-left:auto; margin-right:auto; } }
.blog-cta-final .cta-card { background:rgba(2,2,2,0.05); border:1px solid rgba(2,2,2,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; }
.blog-cta-final .cta-card:hover { background:rgba(2,2,2,0.09); border-color:rgba(97,57,143,0.5); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.blog-cta-final .cta-card--primary { background:rgba(97,57,143,0.3); border-color:rgba(97,57,143,0.55); }
.blog-cta-final .cta-card--primary:hover { background:rgba(97,57,143,0.45); border-color:rgba(97,57,143,0.8); }
.blog-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); }
.blog-cta-final .cta-card-icon svg { width:24px; height:24px; }
.blog-cta-final .cta-card--primary .cta-card-icon { background:rgba(2,2,2,0.12); border-color:rgba(2,2,2,0.2); color:white; }
.blog-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); }
.blog-cta-final .cta-card-title { font-size:21px; font-weight:800; letter-spacing:-0.02em; color:#020202; margin:0; }
.blog-cta-final .cta-card-desc { font-size:14px; color:rgba(2,2,2,0.55); line-height:1.6; margin:0; flex:1; }
.blog-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); }
.blog-cta-final .cta-card-btn:hover { gap:10px; color:#020202; }
.blog-cta-final .cta-card--primary .cta-card-btn { color:white; }
.blog-cta-final .cta-reassurance { text-align:center; margin-top:var(--space-8); font-family:var(--font-display); font-size:13px; color:rgba(2,2,2,0.4); letter-spacing:0.5px; }

/* =====================================================
   LIGHT THEME — BLOG · charte (4 contextes)
   A) blanc · C) cartes article violettes · D) showcase image · B) CTA violet
   ===================================================== */

/* ---- Fonds blancs purs ---- */
.blog-hero,
.blog-articles { background: #FFFFFF; }

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

/* ===================== ARTICLES (A) — séparation droite ===================== */
.blog-articles { clip-path: none; margin-top: 0; padding: var(--space-10) 0; border-top: 1px solid rgba(27,23,38,0.08); }
.blog-empty h3 { color: #1B1726; }
.blog-empty p { color: #56525F; }

/* ===================== CARTES ARTICLE → violettes (C) ===================== */
.blog-card { background: #61398F; border-color: rgba(255,255,255,0.12); color: #F0EEEE; }
.blog-card:hover { border-color: rgba(255,255,255,0.28); box-shadow: 0 18px 44px rgba(97,57,143,0.30); color: #F0EEEE; }
.blog-card-meta { color: #D4BFEC; }
.blog-card-title { color: #F0EEEE; }
.blog-card-excerpt { color: rgba(240,238,238,0.72); }
.blog-card-cta { color: #D4BFEC; }
.blog-card:hover .blog-card-cta { color: #FFFFFF; }

/* ===================== CTA FINAL (B) — violet, séparation droite ===================== */
.blog-cta-final {
    background: linear-gradient(160deg, #6A3F9C 0%, #4A2C72 100%);
    color: #F0EEEE;
    clip-path: none;
    margin-top: 0;
    padding: var(--space-9) 0;
}
.blog-cta-final .section-eyebrow { color: #D4BFEC; }
.blog-cta-final .section-title { color: #F0EEEE; }
.blog-cta-final .cta-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.blog-cta-final .cta-card:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); }
.blog-cta-final .cta-card--primary { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.30); }
.blog-cta-final .cta-card-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.20); color: #D4BFEC; }
.blog-cta-final .cta-card--primary .cta-card-icon { background: #FFFFFF; border-color: #FFFFFF; color: var(--violet); }
.blog-cta-final .cta-card-badge { background: #FFFFFF; color: var(--violet); }
.blog-cta-final .cta-card-title { color: #F0EEEE; }
.blog-cta-final .cta-card-desc { color: rgba(240,238,238,0.60); }
.blog-cta-final .cta-card-btn { color: #D4BFEC; }
.blog-cta-final .cta-card-btn:hover { color: #FFFFFF; }
.blog-cta-final .cta-card--primary .cta-card-btn { color: #FFFFFF; }
.blog-cta-final .cta-reassurance { color: rgba(240,238,238,0.50); }