/* ITD - Blog & Articles Styles - VERSION COMPLÈTE CORRIGÉE */

/* ============================================ */
/* BLOG INDEX PAGE */
/* ============================================ */

/* Blog hero */
.blog-hero{
    padding:4rem 0 3rem;
    background:linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    text-align:center;
}
.blog-hero h1{
    margin:.5rem 0 1rem;
    font-size:clamp(28px,5vw,42px);
}
.blog-hero__lead{
    max-width:700px;
    margin:0 auto;
    font-size:18px;
    color:#374151;
    line-height:1.6;
}

/* Categories filter */
.blog-categories{
    padding:2rem 0 1rem;
    background:#fff;
    border-bottom:1px solid #e8edf3;
}
.categories-filter{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}
.category-btn{
    padding:.6rem 1.2rem;
    border:2px solid #e8edf3;
    border-radius:999px;
    background:#fff;
    color:#374151;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:all .2s;
}
.category-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}
.category-btn--active{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

/* Featured article */
.blog-articles{
    padding:3rem 0 4rem;
}
.featured-article{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
    margin-bottom:3rem;
}
@media(min-width:64rem){
    .featured-article{
        grid-template-columns:1.2fr 1fr;
    }
}
.featured-article__image{
    position:relative;
    min-height:300px;
    background:#f8fafc;
}
.featured-article__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.featured-article .article-badge{
    position:absolute;
    bottom:1rem;
    right:1rem;
    padding:.4rem .8rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    background:#fff;
    box-shadow:var(--shadow);
}
.article-badge--telecom{color:var(--primary)}
.article-badge--voip{color:var(--violet)}
.article-badge--reseau{color:#059669}
.article-badge--securite{color:#dc2626}
.article-badge--hebergement{color:var(--accent)}

.featured-article__content{
    padding:2rem;
    display:grid;
    gap:1rem;
    align-content:start;
}
.featured-article__content h2{
    margin:0;
    font-size:clamp(22px,3vw,32px);
}
.featured-article__content h2 a{
    color:#1f2a44;
}
.featured-article__content h2 a:hover{
    color:var(--primary);
}
.featured-article__content > p{
    margin:0;
    color:#374151;
    line-height:1.7;
    font-size:16px;
}

/* Articles grid */
.articles-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    margin-bottom:3rem;
}
@media(min-width:48rem){
    .articles-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .articles-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Blog card */
.blog-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:1.5rem;
    box-shadow:var(--shadow);
    display:grid;
    gap:1rem;
    align-content:start;
    transition:transform .2s,box-shadow .2s;
    position:relative;
}
.blog-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.blog-card .article-badge{
    position:absolute;
    bottom:1rem;
    right:1rem;
}
.blog-card h3{
    margin:0;
    font-size:18px;
    line-height:1.4;
}
.blog-card h3 a{
    color:#1f2a44;
}
.blog-card h3 a:hover{
    color:var(--primary);
}
.blog-card > p{
    margin:0;
    color:#374151;
    font-size:15px;
    line-height:1.6;
}
.blog-card__footer{
    margin-top:auto;
    padding-top:1rem;
    padding-right:5rem;
    border-top:1px solid #e8edf3;
}

/* Pagination */
.blog-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
}
.pagination-btn{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1.2rem;
    border:2px solid #e8edf3;
    border-radius:999px;
    background:#fff;
    color:#374151;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
}
.pagination-btn svg{
    width:16px;
    height:16px;
}
.pagination-btn:hover:not(:disabled){
    border-color:var(--primary);
    color:var(--primary);
}
.pagination-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}
.pagination-numbers{
    display:flex;
    gap:8px;
}
.pagination-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
}
.pagination-number:hover{
    background:#f8fafc;
}
.pagination-number--active{
    background:var(--primary);
    color:#fff;
}

/* Newsletter CTA */
.cta-newsletter{
    padding:4rem 0;
    background:#f8fafc;
}
.newsletter-box{
    max-width:800px;
    margin:0 auto;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:2.5rem;
    box-shadow:var(--shadow);
    display:grid;
    gap:1.5rem;
    text-align:center;
}
.newsletter-box__icon{
    width:64px;
    height:64px;
    border-radius:16px;
    background:linear-gradient(135deg, #eef2ff 0%, #F3E8FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
}
.newsletter-box__icon svg{
    width:32px;
    height:32px;
    stroke:var(--primary);
}
.newsletter-box h3{
    margin:0;
    font-size:clamp(22px,3vw,28px);
}
.newsletter-box p{
    margin:0;
    color:#374151;
    line-height:1.6;
}
.newsletter-form{
    display:flex;
    gap:12px;
    max-width:500px;
    margin:0 auto;
    flex-wrap:wrap;
}
.newsletter-form input{
    flex:1;
    min-width:250px;
    padding:.8rem 1.2rem;
    border:2px solid #e8edf3;
    border-radius:999px;
    font-size:15px;
}
.newsletter-form input:focus{
    outline:none;
    border-color:var(--primary);
}
.newsletter-form button{
    white-space:nowrap;
}

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

/* Article hero */
.article-hero{
    padding:3rem 0 2rem;
    background:linear-gradient(135deg,rgba(65,105,225,.03) 0%,rgba(148,0,211,.03) 100%);
    border-bottom:1px solid #e8edf3;
}
.article-hero__breadcrumb{
    display:flex;
    gap:.5rem;
    align-items:center;
    margin-bottom:1rem;
    font-size:14px;
}
.article-hero__breadcrumb a{
    color:var(--primary);
    text-decoration:none;
}
.article-hero__breadcrumb a:hover{
    text-decoration:underline;
}
.article-hero__breadcrumb span{
    color:var(--muted);
}
.article-hero h1{
    margin:.75rem 0 1rem;
    font-size:clamp(28px,5vw,42px);
    line-height:1.2;
}
.article-hero__lead{
    font-size:18px;
    color:#374151;
    line-height:1.6;
    margin:0 0 1.5rem;
}
.article-meta{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:14px;
}

/* Article layout */
.article-content{
    padding:3rem 0;
}
.article-content .container{
    max-width:1200px;
}
.article-grid{
    display:grid;
    gap:3rem;
    grid-template-columns:1fr;
}
@media(min-width:64rem){
    .article-grid{
        grid-template-columns:250px 1fr;
    }
}

/* Table of contents */
.article-toc{
    display:none;
}
@media(min-width:64rem){
    .article-toc{
        display:block;
    }
}
.toc-sticky{
    position:sticky;
    top:100px;
}
.toc-sticky h3{
    margin:0 0 1rem;
    font-size:16px;
}
.toc-nav{
    display:grid;
    gap:.5rem;
}
.toc-nav a{
    color:#374151;
    text-decoration:none;
    font-size:14px;
    padding:.5rem;
    border-radius:6px;
    transition:all .2s;
}
.toc-nav a:hover{
    background:#f8fafc;
    color:var(--primary);
}

/* Article main content */
.article-main{
    max-width:960px;
}
.article-intro{
    margin-bottom:3rem;
    padding:1.5rem;
    background:#f8fafc;
    border-left:4px solid var(--primary);
    border-radius:0 8px 8px 0;
}
.article-section{
    margin:3rem 0;
    padding:2rem 0;
    border-bottom:1px solid #e8edf3;
}
.article-section:last-of-type{
    border-bottom:none;
}
.article-section h2{
    margin:0 0 1.5rem;
    font-size:clamp(24px,4vw,32px);
    color:var(--ink);
}
.article-section h3{
    margin:2rem 0 1rem;
    font-size:20px;
    color:var(--ink);
}
.article-section h4{
    margin:1.5rem 0 .75rem;
    font-size:18px;
    color:var(--ink);
}
.article-section p{
    margin:0 0 1rem;
    color:#374151;
    line-height:1.7;
    font-size:16px;
}
.article-section ul,
.article-section ol{
    margin:0 0 1rem;
    padding-left:1.5rem;
    color:#374151;
    line-height:1.7;
}
.article-section li{
    margin:.5rem 0;
}
.article-section strong{
    color:var(--ink);
    font-weight:600;
}
.article-section .lead{
    font-size:18px;
    font-weight:500;
    color:#1f2937;
    margin-bottom:1.5rem;
}

/* ============================================ */
/* COMPOSANTS ARTICLE - PRÉFIXÉS .article- */
/* ============================================ */

/* Feature boxes - CORRIGÉ */
.article-feature-box{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    margin:1.5rem 0;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.article-feature-box h4{
    margin:0 0 1rem;
    font-size:18px;
    color:var(--primary);
}
.article-feature-box ul{
    margin:0;
    padding-left:1.25rem;
}
.article-feature-box li{
    margin:.5rem 0;
    font-size:15px;
}

/* Feature grid - CORRIGÉ */
.article-feature-grid{
    display:grid;
    gap:1.5rem;
    margin:2rem 0;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.article-feature-item{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.article-feature-icon{
    width:48px;
    height:48px;
    stroke:var(--primary);
    margin-bottom:1rem;
}
.article-feature-item h4{
    margin:0 0 .5rem;
    font-size:17px;
}
.article-feature-item p{
    margin:0;
    font-size:14px;
    color:#374151;
}

/* Pricing summary - CORRIGÉ */
.article-pricing-summary{
    display:grid;
    gap:2rem;
    margin:2rem 0;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .article-pricing-summary{
        grid-template-columns:repeat(2,1fr);
    }
}
.article-pricing-col{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:12px;
    padding:2rem;
}
.article-pricing-col h3{
    margin:0 0 1.5rem;
    font-size:20px;
    text-align:center;
}
.price-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.75rem 0;
    border-bottom:1px solid #f3f4f6;
}
.price-item:last-of-type{
    border-bottom:none;
}
.price-label{
    color:#374151;
    font-size:14px;
}
.price-value{
    font-weight:600;
    color:var(--ink);
    font-size:15px;
}
.price-total{
    margin-top:1rem;
    padding-top:1rem;
    border-top:2px solid var(--primary);
    text-align:center;
}
.price-total span{
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:.5rem;
}
.price-total strong{
    display:block;
    font-size:22px;
    color:var(--primary);
    margin-bottom:.25rem;
    font-weight:700;
}
.price-total small{
    color:var(--muted);
    font-size:13px;
}
.price-note{
    margin:1rem 0 0;
    padding:1rem;
    background:#f8fafc;
    border-radius:8px;
    font-size:14px;
    color:#374151;
    text-align:center;
}

/* Use cases - CORRIGÉ */
.article-use-cases{
    display:grid;
    gap:2rem;
    margin:2rem 0;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .article-use-cases{
        grid-template-columns:repeat(2,1fr);
    }
}
.article-use-case{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.article-use-case h3{
    margin:0 0 .75rem;
    font-size:18px;
}
.article-use-case p{
    margin:0 0 1rem;
    color:#374151;
    font-size:14px;
}
.article-use-case ul{
    margin:0;
    padding-left:1.25rem;
}
.article-use-case li{
    margin:.5rem 0;
    font-size:14px;
}

/* Comparison grid - CORRIGÉ */
.article-comparison-grid{
    display:grid;
    gap:1.5rem;
    margin:2rem 0;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .article-comparison-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.article-comparison-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
}
.article-comparison-card h3{
    margin:0 0 1rem;
    font-size:17px;
}
.article-comparison-card p{
    margin:0 0 1rem;
    font-size:14px;
    color:#374151;
}
.article-comparison-note{
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid #f3f4f6;
    font-size:13px;
    color:var(--muted);
    font-style:italic;
}
.article-comparison-card--highlight{
    border:2px solid var(--primary);
    background:linear-gradient(135deg,rgba(65,105,225,.02) 0%,rgba(148,0,211,.02) 100%);
}

/* Comparison table */
.article-comparison-table-wrapper{
    overflow-x:auto;
    margin:2rem 0;
}
.article-comparison-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.article-comparison-table thead{
    background:var(--primary);
    color:#fff;
}
.article-comparison-table th{
    padding:1rem;
    text-align:left;
    font-weight:600;
    font-size:15px;
}
.article-comparison-table td{
    padding:1rem;
    border-bottom:1px solid #e8edf3;
    font-size:14px;
}
.article-comparison-table tbody tr:last-child td{
    border-bottom:none;
}
.article-comparison-table tbody tr:hover{
    background:#f8fafc;
}

/* Timeline simple */
.timeline-simple{
    margin:2rem 0;
}
.timeline-step{
    display:flex;
    gap:1rem;
    align-items:start;
    margin-bottom:2rem;
}
.timeline-step:last-child{
    margin-bottom:0;
}
.step-number{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}
.step-content h4{
    margin:0 0 .5rem;
    font-size:17px;
}
.step-content p{
    margin:0;
    font-size:14px;
    color:#374151;
}

/* Process steps - CORRIGÉ */
.article-process-steps{
    display:grid;
    gap:1.5rem;
    margin:2rem 0;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .article-process-steps{
        grid-template-columns:repeat(2,1fr);
    }
}
.article-process-step{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    position:relative;
}
.article-process-number{
    position:absolute;
    top:-12px;
    left:1.5rem;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
}
.article-process-step h4{
    margin:1rem 0 .75rem;
    font-size:17px;
}
.article-process-step p{
    margin:0;
    font-size:14px;
    color:#374151;
    line-height:1.6;
}

/* Zone intervention */
.zone-intervention{
    margin:2rem 0;
    padding:1.5rem;
    background:#f8fafc;
    border-radius:12px;
}
.zone-intervention h3{
    margin:0 0 1rem;
    font-size:18px;
}
.zone-intervention ul{
    margin:0;
    padding-left:1.25rem;
}
.zone-intervention li{
    margin:.75rem 0;
    font-size:15px;
    line-height:1.6;
}

/* FAQ */
.faq-list{
    margin:2rem 0;
}
.faq-list .faq-item{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    margin-bottom:1rem;
    overflow:hidden;
}
.faq-list .faq-item summary{
    padding:1.25rem;
    cursor:pointer;
    font-weight:600;
    font-size:16px;
    color:var(--ink);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.faq-list .faq-item summary::-webkit-details-marker{
    display:none;
}
.faq-list .faq-item summary::after{
    content:"▼";
    font-size:12px;
    color:var(--primary);
    transition:transform .3s;
}
.faq-list .faq-item[open] summary::after{
    transform:rotate(180deg);
}
.faq-list .faq-item summary:hover{
    background:#f8fafc;
}
.faq-list .faq-item p{
    margin:0;
    padding:0 1.25rem 1.25rem;
    color:#374151;
    line-height:1.7;
    font-size:15px;
}

/* Alert boxes */
.alert-warning{
    margin:2rem 0;
    padding:1.5rem;
    background:#fff3cd;
    border:1px solid #ffc107;
    border-radius:12px;
}
.alert-warning strong{
    color:#856404;
    display:block;
    margin-bottom:.5rem;
}
.alert-warning p{
    margin:0;
    color:#856404;
    font-size:15px;
    line-height:1.6;
}

/* Highlight boxes */
.highlight-box{
    background:linear-gradient(135deg, rgba(65,105,225,.03) 0%, rgba(148,0,211,.03) 100%);
    border-left:4px solid var(--primary);
    border-radius:8px;
    padding:1.5rem;
    margin:2rem 0;
}
.highlight-box--info{
    border-left-color:var(--primary);
}
.highlight-box--warning{
    border-left-color:var(--accent);
    background:linear-gradient(135deg, rgba(255,165,0,.03) 0%, rgba(255,140,0,.03) 100%);
}
.highlight-box--success{
    border-left-color:#059669;
    background:linear-gradient(135deg, rgba(5,150,105,.03) 0%, rgba(16,185,129,.03) 100%);
}
.highlight-box h4{
    margin:0 0 .5rem;
    color:#1f2a44;
    font-size:18px;
}
.highlight-box p{
    margin:.5rem 0;
}

/* Pros/Cons lists */
.pros-cons-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    margin:2rem 0;
}
@media(min-width:48rem){
    .pros-cons-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.pros-card,
.cons-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    box-shadow:var(--shadow);
}
.pros-card h4,
.cons-card h4{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 1rem;
    font-size:18px;
}
.pros-card h4 svg{
    width:20px;
    height:20px;
    color:#059669;
}
.cons-card h4 svg{
    width:20px;
    height:20px;
    color:#dc2626;
}
.pros-card ul,
.cons-card ul{
    margin:0;
    padding-left:20px;
}
.pros-card li::marker{
    color:#059669;
}
.cons-card li::marker{
    color:#dc2626;
}

/* Price cards */
.price-range{
    display:inline-block;
    background:#eef2ff;
    color:var(--primary);
    padding:.4rem .8rem;
    border-radius:999px;
    font-weight:700;
    font-size:14px;
}

/* Article CTA */
.article-cta{
    margin:2rem 0;
    text-align:center;
}
.article-cta p{
    margin:0;
}
.article-cta-final{
    margin:4rem 0 0;
    padding:3rem;
    background:linear-gradient(135deg,var(--primary) 0%,var(--violet) 100%);
    border-radius:16px;
    text-align:center;
    color:#fff;
}
.article-cta-final h2{
    color:#fff;
    margin:0 0 1rem;
    font-size:clamp(24px,4vw,32px);
}
.article-cta-final p{
    color:rgba(255,255,255,.9);
    font-size:17px;
    margin:0 0 2rem;
}
.cta-buttons{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}
.cta-note{
    margin:1.5rem 0 0;
    font-size:14px;
    color:rgba(255,255,255,.8);
}

/* Images et figures */
.article-content figure{
    margin:2rem 0;
}
.article-content figure img{
    width:100%;
    height:auto;
    border-radius:12px;
    box-shadow:var(--shadow);
}
.article-content figcaption{
    text-align:center;
    margin-top:1rem;
    color:var(--muted);
    font-size:14px;
    font-style:italic;
    line-height:1.5;
}

/* Related articles */
.related-articles{
    padding:3rem 0;
    background:#f8fafc;
}
.related-articles h3{
    text-align:center;
    margin:0 0 2rem;
    font-size:clamp(22px,3vw,28px);
}
.related-grid{
    display:grid;
    gap:1.5rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .related-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
.related-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:12px;
    padding:1.5rem;
    box-shadow:var(--shadow);
    display:grid;
    gap:1rem;
    align-content:start;
    transition:transform .2s,box-shadow .2s;
}
.related-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.related-card__meta{
    font-size:13px;
    color:var(--muted);
}
.related-card h4{
    margin:0;
    font-size:18px;
    color:#1f2a44;
}
.related-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}
.related-card__link{
    color:var(--primary);
    font-weight:600;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.related-card__link svg{
    width:16px;
    height:16px;
}
.related-card__link:hover{
    text-decoration:underline;
}

/* ============================================ */
/* SECTION SECOURS 4G - NOUVEAU DESIGN */
/* ============================================ */

.secours-highlight{
    background:linear-gradient(135deg, rgba(65,105,225,.08) 0%, rgba(148,0,211,.08) 100%);
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:2.5rem;
    text-align:center;
    margin:2rem 0 3rem;
}
.secours-icon{
    width:72px;
    height:72px;
    background:linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.5rem;
    box-shadow:0 8px 24px rgba(65,105,225,.2);
}
.secours-icon svg{
    width:40px;
    height:40px;
    stroke:#fff;
}
.secours-highlight h3{
    margin:0 0 1rem;
    font-size:24px;
    color:#1f2a44;
}
.secours-highlight p{
    margin:0;
    font-size:17px;
    color:#374151;
    max-width:700px;
    margin:0 auto;
    line-height:1.6;
}

.secours-grid{
    display:grid;
    gap:2rem;
    margin:2rem 0;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .secours-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

.secours-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:2rem;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.secours-card--highlight{
    border-color:#4169E1;
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}
.secours-card__header{
    margin-bottom:1.5rem;
}
.secours-badge{
    display:inline-block;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:1rem;
}
.secours-badge--blue{
    background:#eef2ff;
    color:#4169E1;
}
.secours-badge--green{
    background:#D1FAE5;
    color:#059669;
}
.secours-card h3{
    margin:0;
    font-size:20px;
    color:#1f2a44;
}

.secours-pricing{
    display:grid;
    gap:1rem;
    margin-bottom:1.5rem;
}
.secours-price-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem;
    background:#f8fafc;
    border-radius:10px;
}
.secours-price-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:#374151;
}
.secours-price-label svg{
    stroke:#4169E1;
    flex-shrink:0;
}
.secours-price-value{
    font-size:16px;
    font-weight:700;
    color:#1f2a44;
}

.secours-total{
    padding-top:1.5rem;
    border-top:2px solid #e8edf3;
    text-align:center;
}
.secours-total span{
    display:block;
    font-size:14px;
    color:var(--muted);
    margin-bottom:.5rem;
}
.secours-total strong{
    display:block;
    font-size:20px;
    color:#4169E1;
    font-weight:700;
}

.secours-roi{
    display:grid;
    gap:1.5rem;
    margin-bottom:1.5rem;
}
.roi-item{
    display:flex;
    gap:1rem;
    align-items:center;
    padding:1rem;
    background:#f8fafc;
    border-radius:10px;
}
.roi-icon{
    font-size:32px;
    flex-shrink:0;
}
.roi-content{
    flex:1;
}
.roi-label{
    font-size:14px;
    color:#374151;
    margin-bottom:.25rem;
}
.roi-value{
    font-size:20px;
    font-weight:700;
    color:#1f2a44;
}
.roi-value span{
    font-size:14px;
    font-weight:400;
    color:var(--muted);
}

.secours-conclusion{
    padding:1rem;
    background:#D1FAE5;
    border-radius:10px;
    text-align:center;
    font-size:15px;
    color:#047857;
}

/* ============================================ */
/* SECTION PRIX - NOUVEAU DESIGN */
/* ============================================ */

.prix-category{
    margin:3rem 0;
}
.prix-category-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 2rem;
    font-size:22px;
    color:#1f2a44;
}
.prix-category-title svg{
    stroke:#4169E1;
}

.prix-cards{
    display:grid;
    gap:1.5rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .prix-cards{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(min-width:64rem){
    .prix-cards{
        grid-template-columns:repeat(2,1fr);
    }
}

.prix-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:1.5rem;
    display:grid;
    gap:1rem;
    align-content:start;
    position:relative;
    transition:transform .2s,box-shadow .2s;
}
.prix-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.prix-card--featured{
    border-color:#4169E1;
    background:linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}

.prix-card__badge{
    position:absolute;
    top:-10px;
    left:1.5rem;
    padding:.35rem .8rem;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e8edf3;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#374151;
}
.prix-card__badge--primary{
    background:#4169E1;
    color:#fff;
    border-color:#4169E1;
}

.prix-card h4{
    margin:1rem 0 0;
    font-size:18px;
    color:#1f2a44;
}

.prix-card__price{
    padding:1rem 0;
    border-bottom:2px solid #e8edf3;
    text-align:center;
}
.prix-amount{
    display:block;
    font-size:24px;
    font-weight:700;
    color:#1f2a44;
    line-height:1.2;
}
.prix-unit{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-top:.25rem;
}

.prix-features{
    margin:0;
    padding:0;
    list-style:none;
}
.prix-features li{
    display:flex;
    align-items:center;
    gap:8px;
    margin:.5rem 0;
    font-size:14px;
    color:#374151;
}
.prix-features svg{
    stroke:#059669;
    flex-shrink:0;
}

/* ============================================ */
/* SECTION PRIX STANDARD TÉLÉPHONIQUE */
/* ============================================ */

.standard-pricing-grid{
    display:grid;
    gap:2rem;
    margin:2rem 0 3rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .standard-pricing-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

.standard-pricing-card{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:16px;
    padding:2rem;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.standard-pricing-card--highlight{
    border-color:#059669;
    background:linear-gradient(135deg, rgba(5,150,105,.02) 0%, rgba(16,185,129,.02) 100%);
}

.standard-pricing-header{
    text-align:center;
    margin-bottom:2rem;
}
.standard-pricing-icon{
    width:72px;
    height:72px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1rem;
}
.standard-pricing-icon--blue{
    background:linear-gradient(135deg, #4169E1 0%, #6B46C1 100%);
}
.standard-pricing-icon--blue svg{
    stroke:#fff;
}
.standard-pricing-icon--green{
    background:linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.standard-pricing-icon--green svg{
    stroke:#fff;
}

.standard-pricing-header h3{
    margin:0 0 .5rem;
    font-size:22px;
    color:#1f2a44;
}
.standard-pricing-subtitle{
    margin:0;
    font-size:14px;
    color:var(--muted);
}

.standard-pricing-items{
    display:grid;
    gap:1rem;
    margin-bottom:2rem;
}

.standard-price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1rem;
    background:#f8fafc;
    border-radius:12px;
}
.standard-price-label{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
}
.standard-price-label svg{
    flex-shrink:0;
    fill:#4169E1;
}
.standard-price-label > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.label-main{
    font-size:15px;
    color:#1f2a44;
    font-weight:600;
}
.label-sub{
    font-size:13px;
    color:var(--muted);
}
.standard-price-value{
    font-size:18px;
    font-weight:700;
    color:#1f2a44;
    white-space:nowrap;
}

.standard-pricing-total{
    padding-top:1.5rem;
    border-top:2px solid #e8edf3;
    text-align:center;
}
.standard-pricing-total--primary{
    border-top-color:#059669;
}
.total-label{
    display:block;
    font-size:14px;
    color:var(--muted);
    margin-bottom:.5rem;
}
.total-amount{
    display:block;
    font-size:26px;
    font-weight:700;
    color:#1f2a44;
    margin-bottom:.25rem;
}
.standard-pricing-total--primary .total-amount{
    color:#059669;
}
.total-note{
    display:block;
    font-size:13px;
    color:var(--muted);
}

/* Note informative */
.standard-pricing-note{
    display:flex;
    gap:12px;
    align-items:start;
    padding:1.5rem;
    background:#eef2ff;
    border:1px solid #c7d2fe;
    border-radius:12px;
    margin:2rem 0;
}
.standard-pricing-note svg{
    flex-shrink:0;
    stroke:#4169E1;
    margin-top:2px;
}
.standard-pricing-note p{
    margin:0;
    font-size:15px;
    color:#374151;
    line-height:1.6;
}

/* ROI Box */
.standard-roi-box{
    margin:3rem 0;
    padding:2rem;
    background:linear-gradient(135deg, rgba(65,105,225,.03) 0%, rgba(148,0,211,.03) 100%);
    border:2px solid #e8edf3;
    border-radius:16px;
}
.standard-roi-box h3{
    margin:0 0 2rem;
    text-align:center;
    font-size:24px;
    color:#1f2a44;
}

.roi-comparison{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
}
@media(min-width:48rem){
    .roi-comparison{
        grid-template-columns:repeat(2,1fr);
    }
}

.roi-col{
    background:#fff;
    border:2px solid #e8edf3;
    border-radius:14px;
    overflow:hidden;
}
.roi-col--better{
    border-color:#059669;
    box-shadow:0 8px 24px rgba(5,150,105,.1);
}

.roi-col-header{
    padding:1.5rem;
    text-align:center;
    background:#f8fafc;
}
.roi-col--better .roi-col-header{
    background:linear-gradient(135deg, rgba(5,150,105,.08) 0%, rgba(16,185,129,.08) 100%);
}
.roi-label{
    display:inline-block;
    padding:.3rem .7rem;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.75rem;
}
.roi-label--old{
    background:#f3f4f6;
    color:#6b7280;
}
.roi-label--new{
    background:#059669;
    color:#fff;
}
.roi-title{
    display:block;
    font-size:16px;
    font-weight:700;
    color:#1f2a44;
}

.roi-items{
    padding:1.5rem;
}
.roi-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.75rem 0;
    border-bottom:1px solid #f3f4f6;
    font-size:14px;
}
.roi-item:last-child{
    border-bottom:none;
}
.roi-item span{
    color:#374151;
}
.roi-item strong{
    color:#1f2a44;
    font-weight:700;
}
.roi-item--missing{
    opacity:.6;
}
.roi-item--missing span{
    color:#6b7280;
}
.roi-item--feature span{
    color:#059669;
    font-weight:600;
}

.roi-total{
    padding:1.5rem;
    text-align:center;
    background:#f8fafc;
    font-size:22px;
    font-weight:700;
    color:#1f2a44;
}
.roi-total--savings{
    background:linear-gradient(135deg, rgba(5,150,105,.08) 0%, rgba(16,185,129,.08) 100%);
    color:#059669;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.savings{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    color:#047857;
    background:#D1FAE5;
    padding:.35rem .8rem;
    border-radius:999px;
}

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

@media(max-width:47.999rem){
    .article-hero{
        padding:2rem 0 1.5rem;
    }
    .article-content{
        padding:2rem 0;
    }
    .article-section{
        margin:2rem 0;
    }
    .article-pricing-summary,
    .article-use-cases,
    .article-comparison-grid,
    .article-process-steps{
        grid-template-columns:1fr;
    }
    .article-cta-final{
        padding:2rem 1.5rem;
    }
    .cta-buttons{
        flex-direction:column;
    }
    .standard-price-row{
        flex-direction:column;
        align-items:flex-start;
        gap:.75rem;
    }
    .standard-price-value{
        align-self:flex-end;
    }
    .total-amount{
        font-size:22px;
    }
}

/* ============================================ */
/* BLOG - Feature items compacts */
/* ============================================ */

/* Grid pour les feature items */
.article-feature-grid {
    display: grid;
    gap: 16px; /* Réduit de 20-24px */
    grid-template-columns: 1fr;
    margin: 1.5rem 0;
}

@media (min-width: 48rem) {
    .article-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Feature item - version compacte pour blog */
.feature-item {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 18px; /* Réduit de 28px */
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 10px; /* Réduit de 14-16px */
    transition: all .2s;
}

.feature-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(65,105,225,.08);
    transform: translateY(-2px);
}

/* Icône compacte */
.feature-item .feature-icon,
.feature-icon {
    width: 40px; /* Réduit de 56px */
    height: 40px;
    color: var(--primary);
    stroke-width: 2;
    flex-shrink: 0;
}

/* Titre */
.feature-item h4 {
    margin: 0;
    font-size: 16px; /* Réduit de 18-20px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

/* Description */
.feature-item p {
    margin: 0;
    font-size: 14px; /* Réduit de 15px */
    line-height: 1.5;
    color: #374151;
}

/* Version liste verticale si nécessaire */
.feature-item--list {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.feature-item--list .feature-icon {
    width: 36px;
    height: 36px;
}

.feature-item--list h4 {
    font-size: 15px;
}

.feature-item--list p {
    font-size: 13px;
}

/* ============================================ */
/* AUTRES ÉLÉMENTS DU BLOG - Optimisation */
/* ============================================ */

/* Use cases */
.article-use-cases {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .article-use-cases {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article-use-case,
.use-case {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 20px;
}

.article-use-case h3,
.use-case h3 {
    margin: 0 0 .5rem;
    font-size: 17px;
    color: var(--ink);
}

.article-use-case p,
.use-case p {
    margin: 0 0 .75rem;
    font-size: 14px;
    color: var(--muted);
}

.article-use-case ul,
.use-case ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: #374151;
}

.article-use-case li,
.use-case li {
    margin: .4rem 0;
}

/* Process steps */
.article-process-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .article-process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article-process-step {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.process-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.article-process-step h4 {
    margin: 0 0 .5rem;
    font-size: 16px;
}

.article-process-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

/* Comparison cards */
.article-comparison-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .article-comparison-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.article-comparison-card,
.comparison-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 20px;
}

.comparison-card--highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(65,105,225,.02) 0%, rgba(148,0,211,.02) 100%);
}

.article-comparison-card h3,
.comparison-card h3 {
    margin: 0 0 .75rem;
    font-size: 17px;
}

.article-comparison-card p,
.comparison-card p {
    margin: 0 0 .5rem;
    font-size: 14px;
    line-height: 1.5;
}

.comparison-note {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
}

/* Feature boxes - pour les listes de fonctionnalités */
.article-feature-box {
    background: #f8fafc;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 1rem 0;
}

.article-feature-box h4 {
    margin: 0 0 .75rem;
    font-size: 16px;
    color: var(--ink);
}

.article-feature-box ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: #374151;
}

.article-feature-box li {
    margin: .4rem 0;
}

/* Responsive - Très petit écran */
@media (max-width: 29.999rem) {
    .feature-item {
        padding: 14px;
        gap: 8px;
    }

    .feature-item .feature-icon {
        width: 36px;
        height: 36px;
    }

    .feature-item h4 {
        font-size: 15px;
    }

    .feature-item p {
        font-size: 13px;
    }
}