/* =====================================================
   SARED BLOG – PREMIUM CLEAN VERSION
   Dark • Glass • Gradient • SEO Ready
===================================================== */

:root{
--bg-dark:#050816;
--bg-card:rgba(255,255,255,0.04);
--border-soft:rgba(255,255,255,0.08);
--text-main:#FFFFFF;
--text-muted:#9CA3AF;
--primary:#7C5CFF;
--primary-2:#5A3DFF;
}

/* ================= GLOBAL ================= */

body{
background:var(--bg-dark);
color:var(--text-main);
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.container{
width:min(1180px,calc(100% - 40px));
margin:auto;
}

a{
text-decoration:none;
color:inherit;
}

/* ================= HERO ================= */

.blog-hero{
padding:140px 0 100px;
text-align:center;
background:
radial-gradient(circle at 20% 30%, rgba(124,92,255,0.18), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(91,33,182,0.12), transparent 60%),
var(--bg-dark);
}

.blog-hero h1{
font-size:clamp(2.5rem,5vw,3.4rem);
font-weight:800;
letter-spacing:-0.02em;
margin-bottom:18px;
background:linear-gradient(135deg,#fff,#A78BFA);
-webkit-background-clip:text;
color:transparent;
}

.blog-hero p{
color:rgba(255,255,255,0.7);
font-size:18px;
max-width:680px;
margin:auto;
}

/* ================= SEGMENTATION ================= */

.blog-segmentation{
padding:100px 0 60px;
}

.segmentation-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:40px;
}

.seg-card{
padding:50px;
border-radius:28px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(18px);
transition:.4s;
}

.seg-card:hover{
transform:translateY(-8px);
border-color:#7C5CFF;
box-shadow:0 40px 100px rgba(0,0,0,0.6);
}

.seg-label{
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
color:#9CA3AF;
font-weight:700;
}

.premium-label{
color:#A78BFA;
}

.seg-card h3{
font-size:26px;
margin:15px 0 12px;
}

.seg-card p{
color:var(--text-muted);
}

.seg-card.entreprise{
background:linear-gradient(135deg,rgba(124,92,255,0.12),rgba(90,61,255,0.08));
border:1px solid rgba(124,92,255,0.35);
}

/* ================= FEATURED ================= */

.blog-featured-hero{
padding:120px 0;
}

.featured-hero-card{
padding:70px;
border-radius:32px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(124,92,255,0.35);
backdrop-filter:blur(20px);
box-shadow:0 60px 140px rgba(0,0,0,0.8);
transition:.4s;
}

.featured-hero-card:hover{
transform:translateY(-6px);
}

.featured-hero-badge{
display:inline-block;
padding:8px 16px;
border-radius:999px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
background:rgba(124,92,255,0.18);
border:1px solid rgba(124,92,255,0.3);
color:#A78BFA;
margin-bottom:24px;
}

.featured-hero-card h2{
font-size:clamp(28px,3vw,40px);
line-height:1.25;
margin-bottom:22px;
}

.featured-hero-excerpt{
font-size:18px;
line-height:1.8;
color:#9CA3AF;
margin-bottom:35px;
}

.featured-hero-footer{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
}

.featured-date{
font-size:14px;
color:rgba(255,255,255,0.5);
}

.btn-featured{
padding:14px 28px;
border-radius:14px;
background:linear-gradient(135deg,#7C5CFF,#5A3DFF);
font-weight:700;
color:#fff;
box-shadow:0 20px 50px rgba(124,92,255,0.4);
transition:.3s;
}

.btn-featured:hover{
transform:translateY(-3px);
}

/* ================= BLOG GRID ================= */

.blog-list{
padding:80px 0;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:40px;
}

.blog-card{
background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:22px;
overflow:hidden;
display:flex;
flex-direction:column;
transition:.35s;
}

.blog-card:hover{
transform:translateY(-8px);
border-color:rgba(124,92,255,0.4);
box-shadow:
0 25px 60px rgba(0,0,0,0.5),
0 0 40px rgba(124,92,255,0.15);
}

.blog-card img{
width:100%;
height:220px;
object-fit:cover;
}

.blog-content{
padding:25px;
display:flex;
flex-direction:column;
flex:1;
}

.blog-category{
font-size:12px;
font-weight:700;
padding:6px 12px;
border-radius:999px;
background:rgba(124,92,255,0.15);
color:var(--primary);
margin-bottom:15px;
text-transform:uppercase;
}

.blog-card h3{
font-size:20px;
margin-bottom:12px;
}

.blog-excerpt{
font-size:15px;
color:var(--text-muted);
margin-bottom:20px;
flex:1;
}

.blog-meta{
display:flex;
justify-content:space-between;
font-size:13px;
color:var(--text-muted);
}

.blog-read{
color:var(--primary);
font-weight:700;
}

/* ================= CARROUSEL ================= */

.blog-latest{
padding:110px 0 70px;
position:relative;
}

.blog-latest::before{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(124,92,255,0.12), transparent 70%);
pointer-events:none;
}

.blog-latest::before{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(124,92,255,0.12), transparent 70%);
pointer-events:none;
}
.blog-latest-title{
font-size:clamp(2rem,3vw,2.6rem);
font-weight:900;
text-align:center;
margin-bottom:60px;
letter-spacing:-0.02em;

background:linear-gradient(135deg,#ffffff,#c4b5fd);
-webkit-background-clip:text;
color:transparent;
}
.blog-carousel{
display:flex;
gap:32px;

overflow-x:auto;
scroll-snap-type:x mandatory;

padding:0 5px 10px;
}

.carousel-item{
flex:0 0 340px;
max-width:340px;

scroll-snap-align:start;

background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:20px;
overflow:hidden;
}

.blog-carousel::-webkit-scrollbar{
height:6px;
}

.blog-carousel::-webkit-scrollbar-thumb{
background:rgba(124,92,255,0.4);
border-radius:10px;
}

.carousel-item{
scroll-snap-align:start;
background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:20px;
overflow:hidden;
}

.carousel-image-wrapper{
aspect-ratio:16/9;
overflow:hidden;
}

.carousel-image-wrapper img{
width:100%;
height:100%;
object-fit:cover;
}

.carousel-content{
padding:18px 20px 22px;
}

.carousel-category{
font-size:11px;
letter-spacing:.15em;
color:rgba(255,255,255,0.6);
text-transform:uppercase;
}

.carousel-title{
font-size:1rem;
font-weight:700;
margin:6px 0;
}

.carousel-date{
font-size:12px;
color:rgba(255,255,255,0.55);
}

/* ================= CTA ================= */

.blog-cta-mid{
padding:120px 0;
}

.grid-2{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.cta-box{
text-align:center;
padding:60px;
border-radius:28px;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
box-shadow:0 40px 100px rgba(124,92,255,0.35);
}

.cta-box.premium{
background:linear-gradient(135deg,#1e1b4b,#2a1f6f);
border:1px solid rgba(124,92,255,0.35);
}

.btn-gradient{
display:inline-flex;
padding:14px 28px;
border-radius:14px;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
font-weight:700;
color:#fff;
}

/* ================= PAGINATION ================= */

.blog-pagination{
margin:70px 0 120px;
text-align:center;
}

.blog-pagination a{
display:inline-block;
margin:0 6px 10px;
padding:10px 16px;
border-radius:12px;
border:1px solid var(--border-soft);
color:var(--text-muted);
}

.blog-pagination a.active{
background:linear-gradient(135deg,var(--primary),var(--primary-2));
color:#fff;
border:none;
}

/* ================= ARTICLE ================= */

.article-detail{
max-width:900px;
margin:auto;
padding:60px 20px;
}

.article-detail h1{
font-size:2.4rem;
margin-bottom:20px;
}

.article-image{
max-height:420px;
object-fit:cover;
border-radius:10px;
margin:20px 0;
}

.article-content{
max-width:850px;
margin:auto;
line-height:1.8;
color:#ddd;
}

.article-content h2{
margin-top:40px;
font-size:1.6rem;
}

.article-content p{
margin-bottom:1.2rem;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

.featured-hero-footer{
flex-direction:column;
align-items:flex-start;
}

}

@media(max-width:768px){

.blog-hero{
padding:100px 0 60px;
}

.blog-card img{
width:100%;
height:200px;
object-fit:cover;
transition:transform .4s ease;
}

.blog-card:hover img{
transform:scale(1.05);
}
.featured-hero-card{
padding:40px 30px;
}

}

.blog-card{
background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:22px;
overflow:hidden;
display:flex;
flex-direction:column;

transition:.35s ease;
}

.blog-card:hover{
transform:translateY(-6px);
border-color:rgba(124,92,255,0.4);

box-shadow:
0 25px 60px rgba(0,0,0,0.5),
0 0 40px rgba(124,92,255,0.15);
}

.blog-content{
padding:24px;
display:flex;
flex-direction:column;
gap:12px;
}


@media(max-width:768px){

.blog-carousel{
grid-auto-columns:85%;
gap:22px;
}

.blog-latest-title{
margin-bottom:40px;
}

.blog-card img{
height:180px;
}

}

.blog-card h3{
font-size:1.15rem;
line-height:1.4;
font-weight:800;
}

.blog-excerpt{
font-size:14px;
color:var(--text-muted);
}

@media(max-width:768px){

.blog-carousel{
grid-auto-columns:85%;
gap:22px;
}

.blog-latest-title{
margin-bottom:40px;
}

.blog-card img{
height:180px;
}

}

/* =====================================================
   MOBILE FIX – DERNIERS ARTICLES
===================================================== */

@media (max-width:768px){

  .blog-latest{
    padding:80px 0 40px;
  }

  .blog-latest .container{
    width:calc(100% - 24px);
  }

  .blog-latest-title{
    font-size:2rem;
    margin-bottom:36px;
  }

  .blog-carousel{
    display:flex;
    overflow-x:auto;
    gap:18px;

    scroll-snap-type:x mandatory;
    padding-bottom:10px;
  }

  .carousel-item{
    flex:0 0 88%;
    max-width:88%;
    scroll-snap-align:start;
  }

  .carousel-image-wrapper{
    aspect-ratio:16/10;
  }

  .carousel-image-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .carousel-content{
    padding:16px;
  }

  .carousel-title{
    font-size:1rem;
    line-height:1.4;
  }

}

@media (max-width:768px){

.blog-carousel{
gap:18px;
}

.carousel-item{
flex:0 0 88%;
max-width:88%;
}

.blog-latest .container{
width:calc(100% - 24px);
}

}

.blog-carousel::-webkit-scrollbar{
display:none;
}

.blog-carousel{
scrollbar-width:none;
}