/* =====================================================
   RESOCOM — Article du Resoblog
====================================================== */

.resocom-article-page{
    background:#F7F8FB;
    color:#344054;
}

.resocom-article-container{
    width:min(1320px, calc(100% - 40px));
    margin:0 auto;
}

.resocom-article-hero{
    padding:72px 0 90px;
    background:
        radial-gradient(circle at 12% 0%, rgba(246,144,61,.20), transparent 34%),
        radial-gradient(circle at 90% 100%, rgba(98,163,196,.20), transparent 36%),
        linear-gradient(145deg, #010A1F, #0F2F46 58%, #16486B);
    color:#fff;
}

.resocom-article-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:38px;
    color:rgba(255,255,255,.64);
    font-size:14px;
}

.resocom-article-breadcrumb a{ color:inherit; text-decoration:none; }
.resocom-article-breadcrumb a:hover{ color:#fff; }

.resocom-article-category{
    display:inline-flex;
    margin-bottom:18px;
    padding:7px 13px;
    border:1px solid rgba(246,144,61,.42);
    border-radius:999px;
    background:rgba(246,144,61,.12);
    color:#FFD0AA;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;
}

.resocom-article-hero h1{
    max-width:920px;
    margin:0;
    color:#fff;
    font-size:clamp(34px, 5vw, 60px);
    font-weight:950;
    letter-spacing:-.045em;
    line-height:1.05;
}

.resocom-article-lead{
    max-width:780px;
    margin:22px 0 0;
    color:rgba(255,255,255,.8);
    font-size:clamp(17px, 2vw, 21px);
    line-height:1.65;
}

.resocom-article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
    color:rgba(255,255,255,.68);
    font-size:14px;
    font-weight:650;
}

.resocom-article-featured{
    position:relative;
    z-index:2;
    margin-top:-48px;
}

.resocom-article-featured img{
    display:block;
    width:100%;
    max-height:580px;
    object-fit:cover;
    border:7px solid #fff;
    border-radius:26px;
    box-shadow:0 24px 70px rgba(1,10,31,.16);
}

.resocom-article-layout{
    padding-top:72px;
    padding-bottom:90px;
}

.resocom-article-content{
    min-width:0;
    padding:48px clamp(24px, 5vw, 64px);
    border:1px solid rgba(15,47,70,.09);
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 55px rgba(1,10,31,.06);
    font-size:17px;
    line-height:1.82;
}

.resocom-article-content :is(h2,h3,h4){
    scroll-margin-top:120px;
    color:#010A1F;
    font-weight:900;
    letter-spacing:-.025em;
}

.resocom-article-content h2{ margin:52px 0 18px; font-size:clamp(26px, 3vw, 34px); line-height:1.22; }
.resocom-article-content h3{ margin:36px 0 14px; font-size:23px; line-height:1.3; }
.resocom-article-content > :first-child{ margin-top:0; }
.resocom-article-content p{ margin:0 0 24px; }
.resocom-article-content a{ color:#BE3F23; text-underline-offset:3px; }
.resocom-article-content img{ max-width:100%; height:auto; border-radius:16px; }
.resocom-article-content figure{ margin:36px 0; }
.resocom-article-content figcaption{ margin-top:9px; color:#667085; font-size:13px; text-align:center; }
.resocom-article-content blockquote{
    margin:36px 0;
    padding:24px 28px;
    border-left:4px solid #F6903D;
    border-radius:0 16px 16px 0;
    background:#F7F8FB;
    color:#0F2F46;
    font-size:18px;
    font-weight:650;
}
.resocom-article-content :is(ul,ol){ margin:0 0 28px; padding-left:24px; }
.resocom-article-content li{ margin-bottom:10px; }

.resocom-article-video{
    width:100%;
    margin:36px 0;
    overflow:hidden;
    border-radius:18px;
    background:#010A1F;
    box-shadow:0 18px 45px rgba(1,10,31,.14);
    aspect-ratio:16 / 9;
}

.resocom-article-video--short{
    width:min(100%, 420px);
    margin-right:auto;
    margin-left:auto;
    aspect-ratio:9 / 16;
}

.resocom-article-video iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.resocom-article-toc-widget{
    position:fixed;
    z-index:50;
    right:50%;
    bottom:20px;
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    gap:12px;
    opacity:0;
    pointer-events:none;
    transform:translate(50%, 18px);
    transition:opacity .22s ease, transform .22s ease;
}

.resocom-article-toc-widget.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translate(50%, 0);
}

.resocom-article-toc-toggle{
    display:inline-flex;
    width:min(560px, calc(100vw - 32px));
    min-height:76px;
    align-items:center;
    gap:14px;
    padding:11px 18px;
    border:0;
    border-radius:999px;
    background:#0F2F46;
    box-shadow:0 14px 36px rgba(1,10,31,.24);
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:850;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease;
}

.resocom-article-toc-toggle:hover{ background:#16486B; transform:translateY(-2px); }
.resocom-article-toc-toggle svg{ width:24px; height:24px; flex:0 0 24px; }
.resocom-article-toc-toggle__text{ display:grid; min-width:0; flex:1; gap:5px; text-align:left; }
.resocom-article-toc-toggle__row{ display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:10px; min-width:0; }
.resocom-article-toc-toggle__row--next{ color:rgba(255,255,255,.62); }
.resocom-article-toc-toggle__row--next[hidden]{ display:none; }
.resocom-article-toc-toggle__label{ font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.resocom-article-toc-toggle__current,
.resocom-article-toc-toggle__next{
    overflow:hidden;
    font-size:13px;
    font-weight:750;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.resocom-article-toc-toggle__current{ color:#fff; }
.resocom-article-toc-toggle__chevron{ flex:0 0 auto; font-size:18px; transition:transform .2s ease; }
.resocom-article-toc-toggle[aria-expanded="true"] .resocom-article-toc-toggle__chevron{ transform:rotate(180deg); }

.resocom-article-toc-toggle:focus-visible,
.resocom-article-toc button:focus-visible{
    outline:3px solid rgba(246,144,61,.5);
    outline-offset:3px;
}

.resocom-article-toc{
    width:min(560px, calc(100vw - 32px));
    max-height:min(70vh, 560px);
    padding:24px;
    overflow:auto;
    border:1px solid rgba(15,47,70,.11);
    border-radius:22px;
    background:#fff;
    box-shadow:0 24px 70px rgba(1,10,31,.20);
}

.resocom-article-toc[hidden]{ display:none; }
.resocom-article-toc__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.resocom-article-toc__head button{
    display:flex;
    width:34px;
    height:34px;
    flex:0 0 34px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#F2F4F7;
    color:#344054;
    font:inherit;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.resocom-article-toc__eyebrow{ margin:0 0 5px; color:#BE3F23; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.resocom-article-toc h2{ margin:0 0 18px; color:#010A1F; font-size:21px; font-weight:900; }
.resocom-article-toc ol{ display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.resocom-article-toc a{
    display:block;
    padding:9px 0 9px 14px;
    border-left:2px solid #E4E7EC;
    color:#667085;
    font-size:14px;
    font-weight:650;
    line-height:1.4;
    text-decoration:none;
    transition:border-color .2s ease, color .2s ease;
}
.resocom-article-toc a:hover,
.resocom-article-toc a.is-active{ border-color:#F6903D; color:#0F2F46; }
.resocom-article-toc a[data-level="3"]{ padding-left:24px; font-size:13px; }

.resocom-article-related,.resocom-article-products{ padding:80px 0; }
.resocom-article-related{ background:#fff; }
.resocom-article-products{ background:#F1F4F7; }
.resocom-article-section-head{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.resocom-article-section-head p{ margin:0 0 8px; color:#BE3F23; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.resocom-article-section-head h2{ margin:0; color:#010A1F; font-size:clamp(27px,3.5vw,40px); font-weight:950; }
.resocom-article-section-head>a{ color:#16486B; font-weight:850; text-decoration:none; }
.resocom-article-related__grid,.resocom-article-products__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.resocom-article-related-card{ overflow:hidden; border:1px solid rgba(15,47,70,.1); border-radius:22px; background:#fff; box-shadow:0 14px 38px rgba(1,10,31,.06); }
.resocom-article-related-card__image{ display:flex; height:190px; align-items:center; justify-content:center; overflow:hidden; background:#0F2F46; color:#fff; font-weight:900; text-decoration:none; }
.resocom-article-related-card__image img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.resocom-article-related-card:hover img{ transform:scale(1.035); }
.resocom-article-related-card__content{ padding:22px; }
.resocom-article-related-card time{ color:#667085; font-size:12px; font-weight:700; }
.resocom-article-related-card h3{ margin:9px 0 10px; font-size:20px; line-height:1.3; }
.resocom-article-related-card h3 a{ color:#010A1F; text-decoration:none; }
.resocom-article-related-card p{ margin:0 0 16px; color:#667085; font-size:14px; line-height:1.6; }
.resocom-article-related-card__link{ color:#BE3F23; font-size:14px; font-weight:850; text-decoration:none; }
.resocom-article-products__grid>a{ display:block; padding:28px; border:1px solid rgba(15,47,70,.1); border-radius:22px; background:#fff; color:#344054; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.resocom-article-products__grid>a:hover{ transform:translateY(-4px); box-shadow:0 18px 45px rgba(1,10,31,.09); }
.resocom-article-products__grid span{ color:#BE3F23; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.resocom-article-products__grid h3{ margin:10px 0; color:#010A1F; font-size:23px; }
.resocom-article-products__grid p{ margin:0 0 20px; line-height:1.6; }
.resocom-article-products__grid strong{ color:#16486B; font-size:14px; }

.resocom-article-cta{
    padding:76px 0;
    background:#0F2F46;
    color:#fff;
    text-align:center;
}
.resocom-article-cta p{ margin:0 0 10px; color:#F6903D; font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.resocom-article-cta h2{ max-width:720px; margin:0 auto 28px; color:#fff; font-size:clamp(27px, 4vw, 40px); font-weight:950; line-height:1.15; }
.resocom-article-cta a{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding:14px 24px;
    border-radius:999px;
    background:#F6903D;
    color:#fff;
    font-weight:850;
    text-decoration:none;
}
.resocom-article-cta a:hover{ background:#BE3F23; }
.resocom-article-cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.resocom-article-cta a.resocom-article-cta__back{ border:1px solid rgba(255,255,255,.28); background:transparent; }
.resocom-article-cta a.resocom-article-cta__back:hover{ background:rgba(255,255,255,.1); }

@media(max-width:960px){
    .resocom-article-layout{ padding-top:52px; }
    .resocom-article-related__grid,.resocom-article-products__grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:640px){
    .resocom-article-container{ width:min(100% - 28px, 1320px); }
    .resocom-article-hero{ padding:50px 0 72px; }
    .resocom-article-breadcrumb{ margin-bottom:28px; }
    .resocom-article-layout{ padding-top:42px; padding-bottom:58px; }
    .resocom-article-content{ padding:30px 20px; border-radius:20px; font-size:16px; }
    .resocom-article-toc-widget{
        top:auto;
        right:50%;
        bottom:10px;
        flex-direction:column-reverse;
        align-items:center;
        transform:translate(50%, 18px);
    }
    .resocom-article-toc-widget.is-visible{ transform:translate(50%, 0); }
    .resocom-article-toc-toggle{ width:calc(100vw - 20px); min-height:70px; padding:9px 14px; }
    .resocom-article-toc-toggle__row{ grid-template-columns:56px minmax(0,1fr); gap:7px; }
    .resocom-article-toc{ width:calc(100vw - 20px); }
    .resocom-article-toc{ max-height:65vh; }
    .resocom-article-meta span[aria-hidden="true"]{ display:none; }
    .resocom-article-meta{ flex-direction:column; gap:5px; }
    .resocom-article-related,.resocom-article-products{ padding:56px 0; }
    .resocom-article-section-head{ align-items:flex-start; flex-direction:column; }
    .resocom-article-related__grid,.resocom-article-products__grid{ grid-template-columns:1fr; }
    .resocom-article-cta__actions{ flex-direction:column; align-items:stretch; }
}