/* ==========================================================
   NUVATOOLS — FIGMA FINAL DESIGN
   Source de vérité : NuvaTools Design V3
   ========================================================== */

:root{
    --nf-bg:#fbfcff;
    --nf-surface:#ffffff;
    --nf-soft:#f7f9fe;
    --nf-soft-purple:#f1eeff;
    --nf-text:#0c1333;
    --nf-muted:#66728c;
    --nf-line:#e7ecf5;

    --nf-purple:#5a45f5;
    --nf-purple-2:#734af5;
    --nf-blue:#2979ff;
    --nf-green:#0ccb8c;
    --nf-pink:#ff3a6e;
    --nf-orange:#ff9b38;

    --nf-radius:16px;
    --nf-radius-lg:22px;

    --nf-shadow:
        0 10px 32px rgba(49,58,104,.07);
}

html[data-theme="dark"]{
    --nf-bg:#09101f;
    --nf-surface:#0f182a;
    --nf-soft:#131d31;
    --nf-soft-purple:#191a39;
    --nf-text:#f6f8ff;
    --nf-muted:#a8b3c9;
    --nf-line:#29364f;

    --nf-shadow:
        0 15px 38px rgba(0,0,0,.30);
}

html,
body{
    background:var(--nf-bg);
    color:var(--nf-text);
}

body{
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

/* ==========================================================
   HEADER
   ========================================================== */

.nv-header{
    position:sticky;
    top:0;
    z-index:1000;

    border-bottom:1px solid var(--nf-line);
    background:
        color-mix(
            in srgb,
            var(--nf-surface) 94%,
            transparent
        );

    backdrop-filter:blur(18px);
}

.nv-header-inner{
    max-width:1390px;
    min-height:66px;
    margin:auto;
    padding:0 22px;

    display:flex;
    align-items:center;
    gap:22px;
}

.nv-brand{
    position:relative;
    padding-left:52px;

    color:var(--nf-text);
    font-weight:850;
    font-size:21px;
    letter-spacing:-.04em;
}

.nv-brand::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;

    width:42px;
    height:42px;

    transform:translateY(-50%);

    background:
        url("/assets/brand/nuvatools-mark-v3.svg")
        center/contain no-repeat;
}

.nv-header a{
    text-decoration:none;
}

.nv-theme-toggle{
    width:42px;
    height:42px;

    border:1px solid var(--nf-line);
    border-radius:999px;

    background:var(--nf-soft);
    color:var(--nf-text);

    box-shadow:none;
}

/* ==========================================================
   HOME — HERO
   ========================================================== */

.v3-hero{
    position:relative;
    overflow:hidden;

    max-width:none;
    margin:0;
    padding:
        clamp(52px,6vw,88px)
        max(6vw,24px)
        54px;

    border:0;
    border-radius:0;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(117,91,255,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 28%,
            rgba(82,134,255,.15),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fbfcff,
            #f8faff
        );

    box-shadow:none;
}

html[data-theme="dark"] .v3-hero{
    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(108,78,255,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(50,111,255,.18),
            transparent 34%
        ),
        #09101f;
}

.v3-hero-grid{
    max-width:1360px;
    margin:auto;

    grid-template-columns:
        minmax(0,1.04fr)
        minmax(480px,.96fr);

    gap:58px;
}

.v3-hero-copy{
    max-width:690px;
}

.v3-hero-badge{
    margin-bottom:20px;

    padding:8px 13px;

    border:0;
    border-radius:999px;

    background:#f1eeff;
    color:#5441ea;

    font-size:11px;
    font-weight:800;
}

html[data-theme="dark"] .v3-hero-badge{
    background:#171834;
    color:#aaa0ff;
}

.v3-hero h1{
    max-width:760px;

    font-size:
        clamp(48px,5.1vw,76px);

    line-height:.98;
    letter-spacing:-.065em;

    color:var(--nf-text);
}

.v3-hero h1::after{
    content:"";
    display:block;

    width:68%;
    height:7px;
    margin-top:10px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #7651ff,
            #2979ff,
            transparent
        );

    opacity:.10;
}

.v3-hero-text{
    max-width:650px;
    margin-top:25px;

    color:var(--nf-muted);

    font-size:17px;
    line-height:1.55;
}

.v3-search-panel{
    overflow:hidden;

    padding:24px;

    border:1px solid
        color-mix(
            in srgb,
            var(--nf-line) 80%,
            transparent
        );

    border-radius:26px;

    background:
        color-mix(
            in srgb,
            var(--nf-surface) 88%,
            transparent
        );

    box-shadow:
        0 28px 70px
        rgba(65,70,125,.12);

    transform:rotate(2deg);
}

.v3-search-panel > *{
    transform:rotate(-2deg);
}

.v3-search-field{
    min-height:58px;

    border:1px solid var(--nf-line);
    border-radius:16px;

    background:var(--nf-surface);
}

.v3-search-field input{
    color:var(--nf-text);
}

.v3-search-count{
    background:
        linear-gradient(
            135deg,
            var(--nf-purple),
            var(--nf-blue)
        );
}

.v3-mini-stats{
    margin-top:18px;
}

.v3-mini-stats div{
    border-color:var(--nf-line);
    background:var(--nf-soft);
}

/* ==========================================================
   HOME — SECTIONS
   ========================================================== */

.v2-quick-wrap,
.v2-section{
    width:min(1390px,calc(100% - 40px));
    max-width:1390px;
}

.v2-quick-wrap{
    margin-top:26px;
}

.v2-quick-grid{
    grid-template-columns:
        repeat(6,minmax(0,1fr));
}

.v2-quick-card,
.v2-category-card,
.v2-tool-card,
.v2-latest-card{
    border:1px solid var(--nf-line);
    background:var(--nf-surface);

    box-shadow:none;
}

.v2-quick-card{
    min-height:102px;
    border-radius:14px;
}

.v2-category-card{
    min-height:205px;
    border-radius:16px;
}

.v2-category-card:hover,
.v2-tool-card:hover,
.v2-quick-card:hover{
    transform:translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--nf-purple) 32%,
            var(--nf-line)
        );

    box-shadow:var(--nf-shadow);
}

.v2-section{
    margin-top:56px;
}

.v2-section-head h2{
    font-size:
        clamp(28px,3vw,42px);

    color:var(--nf-text);
}

.v2-section-head p,
.v2-category-card p,
.v2-tool-content p{
    color:var(--nf-muted);
}

.v2-total-pill{
    border:1px solid var(--nf-line);
    background:var(--nf-surface);
    color:var(--nf-purple);
}

.v2-tools-grid{
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}

.v2-tool-card{
    min-height:145px;
    border-radius:14px;
}

/* Why block = panneau contrasté */

.v2-why{
    width:min(1390px,calc(100% - 40px));
    max-width:1390px;

    margin:64px auto 0;
    padding:38px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #151a37,
            #1f2454
        );
}

.v2-benefits article{
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
}

/* ==========================================================
   TOOL PAGE — FIGMA FINAL
   ========================================================== */

.tool-page{
    max-width:1440px;
    margin:auto;
}

.v3-tool-shell{
    max-width:1440px;
    margin:30px auto 0;
    padding:0 24px;
}

.v3-tool-head{
    padding:34px 38px;

    border:0;
    border-radius:22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(99,79,255,.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fbfcff,
            #f7f9ff
        );

    box-shadow:none;
}

html[data-theme="dark"] .v3-tool-head{
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(99,79,255,.22),
            transparent 36%
        ),
        #0e1729;
}

.v3-tool-head h1{
    max-width:900px;

    font-size:
        clamp(40px,4.4vw,62px);

    color:var(--nf-text);
}

.v3-tool-head > p{
    max-width:760px;

    color:var(--nf-muted);

    font-size:16px;
}

.v3-tool-head .trust span{
    border:1px solid var(--nf-line);
    border-radius:999px;

    background:var(--nf-surface);
}

.v3-tool-workbench{
    padding:24px;

    border:1px solid var(--nf-line);
    border-radius:16px;

    background:var(--nf-surface);

    box-shadow:none;
}

.v3-tool-workbench .field{
    display:block;
}

.v3-tool-workbench textarea{
    min-height:235px;
}

.v3-tool-workbench input,
.v3-tool-workbench textarea,
.v3-tool-workbench select{
    border:1px solid var(--nf-line);
    border-radius:12px;

    background:var(--nf-surface);
    color:var(--nf-text);
}

.v3-tool-workbench .primary{
    background:
        linear-gradient(
            135deg,
            #6242f5,
            #2979ff
        );

    border-radius:12px;

    box-shadow:none;
}

.v3-tool-workbench .secondary{
    border:1px solid var(--nf-line);
    border-radius:12px;

    background:var(--nf-soft);
    color:var(--nf-text);
}

.v3-tool-workbench .output-wrap{
    border:1px solid var(--nf-line);
    border-radius:12px;

    background:var(--nf-soft);
}

.nv-install-button{
    min-height:52px;

    padding:0 24px;

    border:0;
    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #623df6,
            #247bff
        );

    color:#fff;

    font-size:15px;

    box-shadow:none;
}

.nv-install-icon{
    background:rgba(255,255,255,.16);
    color:#fff;
}

/* FAQ + aide */

.nv-help-block{
    max-width:1392px;
    padding:0 24px;
}

.nv-howto,
.nv-faq,
.content-block{
    border:1px solid var(--nf-line);
    border-radius:16px;

    background:var(--nf-surface);

    box-shadow:none;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.nv-footer{
    margin-top:58px;

    border-top:1px solid var(--nf-line);

    background:var(--nf-surface);
}

.nv-footer-inner{
    max-width:1390px;
}

/* ==========================================================
   DARK MODE — TEXTES
   ========================================================== */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] summary,
html[data-theme="dark"] label{
    color:#f6f8ff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] em,
html[data-theme="dark"] .back,
html[data-theme="dark"] .feature-row span,
html[data-theme="dark"] .nv-example p,
html[data-theme="dark"] .nv-faq details p{
    color:#a8b3c9 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
    color:#f6f8ff !important;
}

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

@media(max-width:1180px){

    .v3-hero-grid{
        grid-template-columns:1fr;
    }

    .v3-search-panel{
        max-width:760px;
        transform:none;
    }

    .v3-search-panel > *{
        transform:none;
    }

    .v2-quick-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .v2-tools-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){

    .nv-header-inner{
        min-height:62px;
        padding:0 14px;
    }

    .nv-brand{
        font-size:18px;
    }

    .v3-hero{
        padding:
            38px 18px
            34px;
    }

    .v3-hero h1{
        font-size:
            clamp(42px,13vw,60px);
    }

    .v3-hero-text{
        font-size:15px;
    }

    .v2-quick-wrap,
    .v2-section,
    .v2-why{
        width:calc(100% - 28px);
    }

    .v2-quick-grid,
    .v2-tools-grid{
        grid-template-columns:1fr;
    }

    .v2-category-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .v3-tool-shell{
        padding:0 14px;
    }

    .v3-tool-head{
        padding:26px 20px;
    }

    .v3-tool-workbench{
        padding:18px;
    }

    .v3-tool-workbench .tool-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .v3-tool-workbench button{
        width:100%;
    }

    .nv-help-block{
        padding:0 14px;
    }
}

@media(max-width:480px){

    .v2-category-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   NUVATOOLS FIGMA HOME — STRUCTURE REELLE
   ========================================================= */

.nf-home{
    background:var(--nf-bg);
    color:var(--nf-text);
}

.nf-hero{
    position:relative;
    overflow:hidden;
    padding:44px 20px 30px;
    background:
        radial-gradient(
            circle at 1% 48%,
            rgba(113,85,255,.16),
            transparent 26%
        ),
        radial-gradient(
            circle at 93% 26%,
            rgba(88,126,255,.16),
            transparent 30%
        ),
        var(--nf-bg);
}

.nf-hero::before,
.nf-hero::after{
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:45% 55% 50% 50%;
    filter:blur(.2px);
}

.nf-hero::before{
    width:500px;
    height:280px;
    left:-250px;
    top:70px;
    transform:rotate(20deg);
    background:rgba(129,99,255,.12);
}

.nf-hero::after{
    width:650px;
    height:330px;
    right:-180px;
    top:15px;
    transform:rotate(-16deg);
    background:rgba(113,139,255,.10);
}

.nf-hero-inner{
    position:relative;
    z-index:2;
    max-width:1390px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(530px,.95fr);
    gap:52px;
    align-items:center;
}

.nf-hero-copy{
    min-width:0;
}

.nf-top-badge{
    width:max-content;
    max-width:100%;
    margin-bottom:18px;
    padding:8px 13px;
    border-radius:999px;
    background:#f1eeff;
    color:#503ef0;
    font-size:11px;
    font-weight:800;
}

.nf-top-badge span{
    margin-right:6px;
}

.nf-hero h1{
    max-width:700px;
    margin:0;
    color:var(--nf-text);
    font-size:clamp(50px,5.4vw,78px);
    line-height:.98;
    letter-spacing:-.066em;
    font-weight:850;
}

.nf-hero-subtitle{
    max-width:680px;
    margin:22px 0 0;
    color:var(--nf-muted);
    font-size:17px;
    line-height:1.55;
}

.nf-search{
    position:relative;
    display:grid;
    grid-template-columns:26px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    max-width:700px;
    min-height:58px;
    margin-top:24px;
    padding:6px 7px 6px 17px;
    border:1px solid var(--nf-line);
    border-radius:20px;
    background:var(--nf-surface);
    box-shadow:0 12px 32px rgba(53,66,115,.08);
}

.nf-search svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:var(--nf-purple);
    stroke-width:1.8;
}

.nf-search input{
    min-width:0;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:var(--nf-text);
    font:inherit;
    font-size:13px;
}

.nf-search button{
    min-width:140px;
    min-height:44px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,var(--nf-purple),var(--nf-blue));
    color:#fff;
    font-weight:750;
    cursor:pointer;
}

.nf-search-results{
    position:absolute;
    z-index:30;
    top:66px;
    left:0;
    right:0;
    border:1px solid var(--nf-line);
    border-radius:16px;
    background:var(--nf-surface);
    box-shadow:0 20px 50px rgba(22,32,70,.15);
}

.nf-popular-searches{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:10px;
    color:var(--nf-muted);
}

.nf-popular-searches strong{
    color:var(--nf-text);
}

.nf-popular-searches span{
    padding:6px 12px;
    border:1px solid var(--nf-line);
    border-radius:999px;
    background:var(--nf-soft);
}

.nf-hero-visual{
    position:relative;
    min-height:350px;
}

.nf-browser-mockup{
    position:absolute;
    left:40px;
    top:35px;
    width:500px;
    height:300px;
    overflow:hidden;
    border:1px solid #dfe6f4;
    border-radius:25px;
    background:#f8faff;
    box-shadow:0 25px 60px rgba(55,67,120,.12);
    transform:rotate(3deg);
}

.nf-browser-top{
    height:38px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    background:#eef3fb;
}

.nf-browser-top > span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f17063;
}

.nf-browser-top > span:nth-child(2){
    background:#f4bf4f;
}

.nf-browser-top > span:nth-child(3){
    background:#45c77c;
}

.nf-browser-search{
    margin-left:auto;
    width:230px;
    padding:7px 11px;
    border-radius:9px;
    background:#fff;
    color:#9aa5b8;
    font-size:9px;
}

.nf-browser-body{
    display:grid;
    grid-template-columns:130px 1fr;
    height:262px;
    padding:18px;
}

.nf-browser-body aside{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-right:14px;
}

.nf-browser-body aside strong{
    color:var(--nf-text);
    font-size:13px;
}

.nf-browser-body aside span{
    padding:8px;
    border-radius:8px;
    color:#687690;
    font-size:10px;
}

.nf-browser-body aside span.active{
    background:#f0edff;
    color:var(--nf-purple);
    font-weight:700;
}

.nf-browser-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.nf-browser-tool{
    display:flex;
    flex-direction:column;
    padding:12px;
    border:1px solid #e3e9f3;
    border-radius:12px;
    background:#fff;
}

.nf-mini-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin-bottom:8px;
    border-radius:10px;
}

.nf-browser-tool strong{
    color:#141c38;
    font-size:10px;
}

.nf-browser-tool small{
    margin-top:4px;
    color:#7a879d;
    font-size:8px;
}

.nf-tool-counter{
    position:absolute;
    z-index:4;
    right:0;
    top:48px;
    min-width:142px;
    padding:18px;
    border:1px solid var(--nf-line);
    border-radius:18px;
    background:var(--nf-surface);
    box-shadow:0 14px 35px rgba(50,60,105,.10);
}

.nf-tool-counter strong,
.nf-tool-counter span{
    display:block;
}

.nf-tool-counter strong{
    font-size:18px;
    color:var(--nf-text);
}

.nf-tool-counter span{
    margin-top:3px;
    color:var(--nf-purple);
    font-weight:800;
}

.nf-handwritten{
    position:absolute;
    z-index:5;
    left:-55px;
    top:4px;
    color:var(--nf-purple);
    font-size:17px;
    line-height:1.25;
    font-style:italic;
    transform:rotate(-6deg);
}

.nf-handwritten span{
    display:block;
    margin-left:90px;
    font-size:34px;
}

.nf-handwritten-right{
    left:auto;
    right:-8px;
    top:220px;
    transform:rotate(-4deg);
}

.nf-handwritten-right span{
    margin-left:-24px;
}

.nf-section{
    width:min(1390px,calc(100% - 40px));
    margin:18px auto 0;
}

.nf-section-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:14px;
}

.nf-section-title-row h2{
    margin:0;
    color:var(--nf-text);
    font-size:22px;
    letter-spacing:-.035em;
}

.nf-section-title-row p{
    margin:4px 0 0;
    color:var(--nf-muted);
    font-size:11px;
}

.nf-section-title-row a{
    color:var(--nf-purple);
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}

.nf-categories{
    padding:16px 18px 18px;
    border:1px solid var(--nf-line);
    border-radius:22px;
    background:var(--nf-surface);
}

.nf-category-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
    gap:9px;
}

.nf-category-card{
    min-height:96px;
    padding:11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:var(--nf-soft);
    text-decoration:none;
    transition:.16s ease;
}

.nf-category-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(44,58,105,.08);
}

.nf-category-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    margin-bottom:7px;
    border-radius:11px;
}

.nf-category-card strong{
    color:var(--nf-text);
    font-size:11px;
}

.nf-category-card small{
    margin-top:4px;
    color:var(--nf-muted);
    font-size:9px;
}

.nf-facts{
    min-height:78px;
    display:grid;
    grid-template-columns:repeat(4,1fr) 1.35fr;
    align-items:center;
    overflow:hidden;
    border:1px solid var(--nf-line);
    border-radius:18px;
    background:var(--nf-surface);
}

.nf-facts article{
    min-height:54px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    border-right:1px solid var(--nf-line);
}

.nf-fact-icon{
    font-size:24px;
    color:var(--nf-purple);
}

.nf-facts article strong,
.nf-facts article small{
    display:block;
}

.nf-facts article strong{
    font-size:18px;
    color:var(--nf-text);
}

.nf-facts article small{
    color:var(--nf-muted);
    font-size:9px;
}

.nf-facts blockquote{
    margin:0;
    padding:14px 20px;
}

.nf-facts blockquote strong,
.nf-facts blockquote span{
    display:block;
}

.nf-facts blockquote strong{
    color:var(--nf-text);
}

.nf-facts blockquote span{
    margin-top:5px;
    color:var(--nf-muted);
    font-size:10px;
}

.nf-popular-tools{
    margin-top:24px;
}

.nf-popular-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.nf-popular-card{
    min-width:0;
    min-height:80px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 32px;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:var(--nf-surface);
    text-decoration:none;
}

.nf-popular-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:11px;
}

.nf-popular-copy{
    min-width:0;
}

.nf-popular-copy strong,
.nf-popular-copy small{
    display:block;
}

.nf-popular-copy strong{
    color:var(--nf-text);
    font-size:11px;
}

.nf-popular-copy small{
    margin-top:4px;
    color:var(--nf-muted);
    font-size:9px;
    line-height:1.35;
}

.nf-popular-arrow{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--nf-soft);
    color:var(--nf-text);
}

.nf-trust{
    margin-top:28px;
    padding-bottom:18px;
    border-bottom:1px solid var(--nf-line);
}

.nf-trust h2{
    margin:0;
    color:var(--nf-text);
    font-size:16px;
}

.nf-trust p{
    margin:4px 0 15px;
    color:var(--nf-muted);
    font-size:10px;
}

.nf-trust-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    color:#65728a;
    font-size:15px;
    font-weight:750;
}

.nf-latest{
    margin-top:24px;
}

.nf-version{
    color:var(--nf-purple);
    font-weight:800;
}

.nf-latest-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.nf-latest-card{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:var(--nf-surface);
    text-decoration:none;
}

.nf-latest-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
}

.nf-latest-card strong,
.nf-latest-card small{
    display:block;
}

.nf-latest-card strong{
    color:var(--nf-text);
    font-size:10px;
}

.nf-latest-card small{
    margin-top:3px;
    color:var(--nf-muted);
    font-size:8px;
}

.nf-latest-card b{
    color:var(--nf-purple);
}

.nf-bottom-banner{
    width:min(1390px,calc(100% - 40px));
    min-height:72px;
    margin:30px auto 0;
    padding:14px 20px;
    display:grid;
    grid-template-columns:220px minmax(0,1fr) 240px;
    align-items:center;
    gap:24px;
    border:1px solid var(--nf-line);
    border-radius:18px;
    background:
        linear-gradient(
            120deg,
            var(--nf-surface),
            #f3f1ff
        );
}

.nf-bottom-brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.nf-bottom-brand img{
    width:44px;
    height:44px;
}

.nf-bottom-brand strong{
    color:var(--nf-text);
    font-size:20px;
}

.nf-bottom-brand strong span{
    color:var(--nf-purple);
}

.nf-bottom-message strong,
.nf-bottom-message span{
    display:block;
}

.nf-bottom-message strong{
    color:var(--nf-text);
    font-size:15px;
}

.nf-bottom-message span{
    margin-top:4px;
    color:var(--nf-muted);
    font-size:10px;
}

.nf-bottom-banner > a{
    min-height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,var(--nf-purple),var(--nf-blue));
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:750;
}

html[data-theme="dark"] .nf-top-badge{
    background:#191a38;
    color:#ada4ff;
}

html[data-theme="dark"] .nf-browser-mockup{
    border-color:#2b3852;
    background:#111b30;
}

html[data-theme="dark"] .nf-browser-top{
    background:#162139;
}

html[data-theme="dark"] .nf-browser-search,
html[data-theme="dark"] .nf-browser-tool{
    border-color:#29364f;
    background:#0e182b;
}

html[data-theme="dark"] .nf-browser-body aside span.active{
    background:#201d44;
}

html[data-theme="dark"] .nf-bottom-banner{
    background:
        linear-gradient(
            120deg,
            #10192b,
            #181735
        );
}

@media(max-width:1100px){

    .nf-hero-inner{
        grid-template-columns:1fr;
    }

    .nf-hero-visual{
        width:min(650px,100%);
        margin:auto;
    }

    .nf-facts{
        grid-template-columns:repeat(2,1fr);
    }

    .nf-facts blockquote{
        grid-column:1/-1;
    }

    .nf-popular-grid,
    .nf-latest-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .nf-bottom-banner{
        grid-template-columns:1fr;
    }
}

@media(max-width:720px){

    .nf-hero{
        padding:30px 14px 20px;
    }

    .nf-hero h1{
        font-size:clamp(42px,13vw,58px);
    }

    .nf-search{
        grid-template-columns:24px minmax(0,1fr);
        padding-right:14px;
    }

    .nf-search button{
        grid-column:1/-1;
        width:100%;
    }

    .nf-hero-visual{
        min-height:300px;
    }

    .nf-browser-mockup{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        height:280px;
        transform:none;
    }

    .nf-tool-counter{
        right:8px;
        top:12px;
    }

    .nf-handwritten{
        display:none;
    }

    .nf-section,
    .nf-bottom-banner{
        width:calc(100% - 28px);
    }

    .nf-category-row{
        display:flex;
        overflow-x:auto;
        padding-bottom:6px;
    }

    .nf-category-card{
        flex:0 0 110px;
    }

    .nf-facts{
        grid-template-columns:1fr 1fr;
    }

    .nf-facts article{
        border-bottom:1px solid var(--nf-line);
    }

    .nf-popular-grid,
    .nf-latest-grid{
        grid-template-columns:1fr;
    }

    .nf-trust-row{
        justify-content:flex-start;
    }
}

@media(max-width:460px){

    .nf-facts{
        grid-template-columns:1fr;
    }

    .nf-facts blockquote{
        grid-column:auto;
    }
}


/* =========================================================
   FIGMA FINAL — TOOL PAGE REELLE
   ========================================================= */

.nf-tool-page{
    width:min(1430px,calc(100% - 40px));
    margin:28px auto 0;
}

.nf-tool-hero{
    position:relative;
    overflow:hidden;
    padding:24px 28px 30px;
    border-radius:22px;
    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(101,76,255,.14),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #fbfcff,
            #f7f9ff
        );
}

.nf-tool-breadcrumb a{
    color:var(--nf-muted);
    text-decoration:none;
    font-size:11px;
    font-weight:650;
}

.nf-tool-title-row{
    display:grid;
    grid-template-columns:68px minmax(0,1fr) 190px;
    align-items:center;
    gap:18px;
    margin-top:18px;
}

.nf-tool-big-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:18px;
    font-size:25px;
}

.nf-tool-category{
    color:var(--nf-purple);
    font-size:10px;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.nf-tool-title-copy h1{
    margin:5px 0 0;
    color:var(--nf-text);
    font-size:clamp(34px,4vw,52px);
    line-height:1.02;
    letter-spacing:-.05em;
}

.nf-tool-title-copy p{
    max-width:750px;
    margin:10px 0 0;
    color:var(--nf-muted);
    font-size:14px;
    line-height:1.5;
}

.nf-tool-badges{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:13px;
}

.nf-tool-badges span{
    padding:6px 10px;
    border:1px solid var(--nf-line);
    border-radius:999px;
    background:var(--nf-surface);
    color:var(--nf-muted);
    font-size:9px;
    font-weight:700;
}

.nf-tool-tagline{
    padding-left:22px;
    border-left:1px solid var(--nf-line);
}

.nf-tool-tagline strong,
.nf-tool-tagline span{
    display:block;
}

.nf-tool-tagline strong{
    color:var(--nf-purple);
    font-size:18px;
}

.nf-tool-tagline span{
    margin-top:6px;
    color:var(--nf-muted);
    font-size:11px;
    line-height:1.4;
}

.nf-tool-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:18px;
    align-items:start;
    margin-top:18px;
}

.nf-tool-main{
    min-width:0;
}

.nf-tool-workbench{
    margin:0;
    padding:22px;
    border:1px solid var(--nf-line);
    border-radius:17px;
    background:var(--nf-surface);
    box-shadow:none;
}

.nf-workbench-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.nf-workbench-kicker{
    color:var(--nf-purple);
    font-size:9px;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.nf-workbench-top h2{
    margin:4px 0 0;
    color:var(--nf-text);
    font-size:18px;
}

.nf-workbench-private{
    padding:7px 10px;
    border-radius:999px;
    background:#edfbf5;
    color:#129266;
    font-size:9px;
    font-weight:750;
}

.nf-fields{
    display:grid;
    gap:14px;
}

.nf-field > span{
    color:var(--nf-text);
    font-size:11px;
    font-weight:750;
}

.nf-field textarea{
    min-height:250px;
}

.nf-field input,
.nf-field textarea,
.nf-field select{
    margin-top:7px;
    border:1px solid var(--nf-line)!important;
    border-radius:12px!important;
    background:var(--nf-surface)!important;
    color:var(--nf-text)!important;
}

.nf-tool-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.nf-tool-actions .primary,
.nf-tool-actions .secondary{
    min-height:42px;
    border-radius:11px;
}

.nf-tool-actions .primary{
    min-width:190px;
    border:0;
    background:
        linear-gradient(
            135deg,
            var(--nf-purple),
            var(--nf-blue)
        );
}

.nf-output{
    margin-top:18px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:var(--nf-soft);
}

.nf-output pre{
    min-height:120px;
}

.nf-tool-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:12px;
}

.nf-tool-features article{
    min-width:0;
    padding:14px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:var(--nf-surface);
}

.nf-tool-features article > span{
    display:block;
    margin-bottom:7px;
    color:var(--nf-purple);
    font-size:20px;
}

.nf-tool-features strong,
.nf-tool-features small{
    display:block;
}

.nf-tool-features strong{
    color:var(--nf-text);
    font-size:11px;
}

.nf-tool-features small{
    margin-top:4px;
    color:var(--nf-muted);
    font-size:9px;
    line-height:1.4;
}

.nf-tool-sidebar{
    display:grid;
    gap:12px;
}

.nf-side-card{
    position:relative;
    padding:18px;
    border:1px solid var(--nf-line);
    border-radius:16px;
    background:var(--nf-surface);
}

.nf-install-card{
    min-height:108px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:13px;
    align-items:start;
    background:
        linear-gradient(
            135deg,
            #5b43f5,
            #347cff
        );
    border:0;
    color:#fff;
}

.nf-side-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(255,255,255,.15);
    font-size:22px;
}

.nf-install-card strong{
    color:#fff;
    font-size:15px;
}

.nf-install-card p{
    margin:5px 0 0;
    color:rgba(255,255,255,.78);
    font-size:10px;
    line-height:1.4;
}

.nf-install-note{
    position:absolute;
    right:12px;
    top:12px;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:8px;
    font-weight:800;
}

.nf-side-label{
    display:block;
    margin-bottom:12px;
    color:var(--nf-purple);
    font-size:9px;
    font-weight:850;
    letter-spacing:.1em;
}

.nf-side-list{
    display:grid;
    gap:10px;
}

.nf-side-list span{
    color:var(--nf-muted);
    font-size:10px;
}

.nf-side-list b{
    margin-right:7px;
    color:#13ac78;
}

.nf-share-row{
    display:flex;
    gap:8px;
}

.nf-share-row button,
.nf-share-row a{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--nf-line);
    border-radius:11px;
    background:var(--nf-soft);
    color:var(--nf-text);
    text-decoration:none;
    cursor:pointer;
}

html[data-theme="dark"] .nf-tool-hero{
    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(101,76,255,.22),
            transparent 31%
        ),
        #0c1527;
}

html[data-theme="dark"] .nf-workbench-private{
    background:#0e3328;
    color:#61ddb3;
}

@media(max-width:980px){

    .nf-tool-grid{
        grid-template-columns:1fr;
    }

    .nf-tool-sidebar{
        grid-template-columns:repeat(2,1fr);
    }

    .nf-install-card{
        grid-column:1/-1;
    }
}

@media(max-width:700px){

    .nf-tool-page{
        width:calc(100% - 28px);
    }

    .nf-tool-title-row{
        grid-template-columns:56px minmax(0,1fr);
    }

    .nf-tool-tagline{
        display:none;
    }

    .nf-tool-big-icon{
        width:54px;
        height:54px;
    }

    .nf-tool-sidebar,
    .nf-tool-features{
        grid-template-columns:1fr;
    }

    .nf-tool-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .nf-tool-actions button{
        width:100%;
    }
}


/* =========================================================
   NUVATOOLS — FIGMA TOOL POLISH V2
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.tool-page{
    padding-bottom:60px;
}

.nf-tool-page{
    width:min(1450px,calc(100% - 48px));
    margin:22px auto 0;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.nf-tool-hero{
    min-height:210px;
    padding:28px 34px 34px;
    border:1px solid var(--nf-line);
    border-radius:26px;
    background:
        radial-gradient(
            circle at 96% 10%,
            rgba(113,80,255,.17),
            transparent 29%
        ),
        radial-gradient(
            circle at 75% 95%,
            rgba(48,126,255,.10),
            transparent 30%
        ),
        var(--nf-surface);
    box-shadow:0 16px 45px rgba(54,66,110,.06);
}

.nf-tool-title-row{
    grid-template-columns:82px minmax(0,1fr) 310px;
    gap:22px;
    margin-top:22px;
}

.nf-tool-big-icon{
    width:76px;
    height:76px;
    border-radius:22px;
    font-size:30px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 12px 28px rgba(67,79,130,.08);
}

.nf-tool-title-copy h1{
    font-size:clamp(44px,4.4vw,64px);
    line-height:.98;
    letter-spacing:-.06em;
}

.nf-tool-title-copy p{
    max-width:800px;
    font-size:15px;
    line-height:1.6;
}

.nf-tool-badges span{
    font-size:10px;
    padding:7px 11px;
}

.nf-tool-hero-benefits{
    display:grid;
    gap:9px;
}

.nf-tool-hero-benefits article{
    min-height:52px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(12px);
}

.nf-tool-hero-benefits article > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#f0edff;
    color:var(--nf-purple);
}

.nf-tool-hero-benefits strong,
.nf-tool-hero-benefits small{
    display:block;
}

.nf-tool-hero-benefits strong{
    color:var(--nf-text);
    font-size:11px;
}

.nf-tool-hero-benefits small{
    margin-top:2px;
    color:var(--nf-muted);
    font-size:9px;
}


/* ---------------------------------------------------------
   MAIN GRID
   --------------------------------------------------------- */

.nf-tool-grid{
    grid-template-columns:minmax(0,1fr) 360px;
    gap:22px;
    margin-top:22px;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

.nf-tool-tabs{
    width:max-content;
    max-width:100%;
    display:flex;
    gap:4px;
    margin:0 0 10px;
    padding:5px;
    border:1px solid var(--nf-line);
    border-radius:13px;
    background:var(--nf-surface);
}

.nf-tool-tabs a{
    padding:9px 16px;
    border-radius:9px;
    color:var(--nf-muted);
    text-decoration:none;
    font-size:10px;
    font-weight:700;
}

.nf-tool-tabs a.active{
    background:#f0edff;
    color:var(--nf-purple);
}


/* ---------------------------------------------------------
   WORKBENCH
   --------------------------------------------------------- */

.nf-tool-workbench{
    padding:26px;
    border-radius:18px;
    box-shadow:0 14px 40px rgba(52,65,108,.05);
}

.nf-workbench-top{
    padding-bottom:16px;
    border-bottom:1px solid var(--nf-line);
}

.nf-workbench-top h2{
    font-size:21px;
}

.nf-workbench-private{
    font-size:10px;
}

.nf-fields{
    margin-top:20px;
    gap:17px;
}

.nf-field > span{
    font-size:12px;
}

.nf-field input,
.nf-field textarea,
.nf-field select{
    padding:14px 15px!important;
    font-size:13px!important;
}

.nf-field textarea{
    min-height:340px;
    resize:vertical;
}

.nf-tool-actions{
    padding-top:18px;
    border-top:1px solid var(--nf-line);
}

.nf-tool-actions .primary,
.nf-tool-actions .secondary{
    min-height:46px;
    padding-left:18px;
    padding-right:18px;
    font-size:11px;
    font-weight:750;
}

.nf-tool-actions .primary{
    min-width:220px;
    box-shadow:0 10px 24px rgba(91,67,245,.18);
}

.nf-output{
    margin-top:20px;
    border-radius:15px;
}

.nf-output .output-head{
    padding:12px 14px;
    border-bottom:1px solid var(--nf-line);
}

.nf-output pre{
    min-height:145px;
    padding:17px!important;
    font-size:12px;
    line-height:1.55;
}


/* ---------------------------------------------------------
   FEATURE CARDS
   --------------------------------------------------------- */

.nf-tool-features{
    gap:12px;
    margin-top:14px;
}

.nf-tool-features article{
    min-height:112px;
    padding:17px;
    border-radius:15px;
}

.nf-tool-features article > span{
    font-size:23px;
}

.nf-tool-features strong{
    font-size:12px;
}

.nf-tool-features small{
    font-size:10px;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.nf-tool-sidebar{
    gap:14px;
}

.nf-side-card{
    padding:20px;
    border-radius:18px;
    box-shadow:0 12px 32px rgba(53,65,108,.04);
}

.nf-install-card{
    min-height:144px;
    grid-template-columns:56px minmax(0,1fr);
    padding:22px;
    border-radius:20px;
}

.nf-side-icon{
    width:52px;
    height:52px;
    font-size:25px;
}

.nf-install-card strong{
    font-size:17px;
}

.nf-install-card p{
    margin-top:7px;
    font-size:10px;
    line-height:1.5;
}

.nf-install-status{
    display:inline-block;
    margin-top:10px;
    padding:6px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:8px;
    font-weight:800;
}

.nf-side-label{
    font-size:9px;
}

.nf-side-list{
    gap:12px;
}

.nf-side-list span{
    font-size:11px;
}

.nf-side-faq-card strong{
    display:block;
    color:var(--nf-text);
    font-size:13px;
}

.nf-side-faq-card p{
    margin:7px 0 12px;
    color:var(--nf-muted);
    font-size:10px;
    line-height:1.5;
}

.nf-side-faq-card a{
    color:var(--nf-purple);
    text-decoration:none;
    font-size:10px;
    font-weight:750;
}

.nf-share-row button,
.nf-share-row a{
    width:44px;
    height:44px;
}


/* ---------------------------------------------------------
   GUIDE / FAQ
   --------------------------------------------------------- */

.nv-help-block{
    width:min(1450px,calc(100% - 48px));
    margin:28px auto 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(340px,.72fr)!important;
    gap:18px!important;
}

.nv-howto,
.nv-faq{
    padding:24px!important;
    border:1px solid var(--nf-line)!important;
    border-radius:18px!important;
    background:var(--nf-surface)!important;
}

.nv-help-block .kicker{
    font-size:9px;
    color:var(--nf-purple);
}

.nv-howto h2,
.nv-faq h2{
    margin-top:6px!important;
    color:var(--nf-text)!important;
    font-size:21px!important;
}

.nv-how-steps{
    display:grid;
    gap:10px;
    margin-top:18px!important;
    padding:0!important;
    list-style:none!important;
    counter-reset:step;
}

.nv-how-steps li{
    position:relative;
    min-height:54px;
    padding:13px 14px 13px 52px!important;
    border:1px solid var(--nf-line);
    border-radius:12px;
    background:var(--nf-soft);
    color:var(--nf-text);
    font-size:11px;
    line-height:1.5;
    counter-increment:step;
}

.nv-how-steps li::before{
    content:counter(step);
    position:absolute;
    left:12px;
    top:11px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#ece9ff;
    color:var(--nf-purple);
    font-size:10px;
    font-weight:850;
}

.nv-example{
    margin-top:14px!important;
    padding:15px!important;
    border-radius:12px!important;
    border:1px solid #dcd7ff!important;
    background:#f6f4ff!important;
}

.nv-example strong{
    color:var(--nf-purple);
    font-size:11px;
}

.nv-example p{
    margin:5px 0 0!important;
    color:var(--nf-muted);
    font-size:10px;
}

.nv-faq details{
    border:0!important;
    border-top:1px solid var(--nf-line)!important;
    border-radius:0!important;
    background:transparent!important;
}

.nv-faq details:first-of-type{
    margin-top:12px;
}

.nv-faq summary{
    padding:13px 0!important;
    color:var(--nf-text);
    font-size:11px;
    font-weight:750;
}

.nv-faq details p{
    padding:0 0 13px!important;
    color:var(--nf-muted)!important;
    font-size:10px!important;
    line-height:1.55;
}


/* ---------------------------------------------------------
   DESCRIPTION CONTENT BLOCK
   --------------------------------------------------------- */

.content-block{
    width:min(1450px,calc(100% - 48px))!important;
    margin:18px auto 0!important;
    padding:22px!important;
    border:1px solid var(--nf-line)!important;
    border-radius:18px!important;
    background:var(--nf-surface)!important;
}

.content-block h2{
    font-size:18px!important;
    color:var(--nf-text)!important;
}

.content-block > p{
    color:var(--nf-muted)!important;
    font-size:11px!important;
    line-height:1.6;
}

.feature-row{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
}

.feature-row > div{
    padding:14px!important;
    border:1px solid var(--nf-line)!important;
    border-radius:12px!important;
    background:var(--nf-soft)!important;
}

.feature-row b{
    font-size:11px;
    color:var(--nf-text);
}

.feature-row span{
    font-size:9px;
    color:var(--nf-muted);
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-tool-hero-benefits article{
    background:rgba(19,27,48,.82);
}

html[data-theme="dark"] .nf-tool-hero-benefits article > span,
html[data-theme="dark"] .nf-tool-tabs a.active,
html[data-theme="dark"] .nv-how-steps li::before{
    background:#201d45;
    color:#aaa1ff;
}

html[data-theme="dark"] .nv-example{
    border-color:#3a3567!important;
    background:#1c193a!important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1080px){

    .nf-tool-title-row{
        grid-template-columns:76px minmax(0,1fr);
    }

    .nf-tool-hero-benefits{
        grid-column:1/-1;
        grid-template-columns:repeat(3,1fr);
        margin-top:4px;
    }

    .nf-tool-grid{
        grid-template-columns:1fr;
    }

    .nf-tool-sidebar{
        grid-template-columns:repeat(2,1fr);
    }

    .nf-install-card{
        grid-column:1/-1;
    }
}

@media(max-width:800px){

    .nv-help-block{
        grid-template-columns:1fr!important;
    }

    .feature-row{
        grid-template-columns:1fr!important;
    }
}

@media(max-width:650px){

    .nf-tool-page,
    .nv-help-block,
    .content-block{
        width:calc(100% - 28px)!important;
    }

    .nf-tool-hero{
        padding:22px 18px;
    }

    .nf-tool-title-row{
        grid-template-columns:58px minmax(0,1fr);
    }

    .nf-tool-big-icon{
        width:56px;
        height:56px;
        border-radius:16px;
        font-size:22px;
    }

    .nf-tool-title-copy h1{
        font-size:38px;
    }

    .nf-tool-hero-benefits{
        grid-template-columns:1fr;
    }

    .nf-tool-sidebar{
        grid-template-columns:1fr;
    }

    .nf-tool-workbench{
        padding:18px;
    }

    .nf-field textarea{
        min-height:260px;
    }

    .nf-tool-tabs{
        width:100%;
    }

    .nf-tool-tabs a{
        flex:1;
        text-align:center;
    }
}


/* =========================================================
   NUVATOOLS — PUBLIC READABILITY PASS V1
   ========================================================= */

/* ---------------------------------------------------------
   BASE GENERALE
   --------------------------------------------------------- */

body{
    font-size:16px;
}

header,
nav,
main,
footer{
    text-rendering:optimizeLegibility;
}


/* ---------------------------------------------------------
   HEADER / NAVIGATION
   --------------------------------------------------------- */

.site-header a,
.site-header button,
.site-header select,
header a,
header button,
header select{
    font-size:14px !important;
}


/* ---------------------------------------------------------
   HOME
   --------------------------------------------------------- */

.nf-top-badge{
    font-size:13px !important;
}

.nf-hero-subtitle{
    font-size:18px !important;
    line-height:1.65 !important;
}

.nf-search input{
    font-size:15px !important;
}

.nf-search button{
    font-size:14px !important;
}

.nf-popular-searches{
    font-size:12px !important;
}

.nf-category-card strong{
    font-size:13px !important;
}

.nf-category-card small{
    font-size:11px !important;
}

.nf-section-title-row h2{
    font-size:26px !important;
}

.nf-section-title-row p{
    font-size:13px !important;
}

.nf-section-title-row a{
    font-size:13px !important;
}

.nf-facts article strong{
    font-size:21px !important;
}

.nf-facts article small{
    font-size:11px !important;
}

.nf-facts blockquote span{
    font-size:12px !important;
}

.nf-popular-copy strong{
    font-size:13px !important;
}

.nf-popular-copy small{
    font-size:11px !important;
    line-height:1.5 !important;
}

.nf-trust h2{
    font-size:20px !important;
}

.nf-trust p{
    font-size:12px !important;
}

.nf-trust-row{
    font-size:16px !important;
}

.nf-latest-card strong{
    font-size:12px !important;
}

.nf-latest-card small{
    font-size:10px !important;
}

.nf-bottom-message strong{
    font-size:17px !important;
}

.nf-bottom-message span{
    font-size:12px !important;
}

.nf-bottom-banner > a{
    font-size:13px !important;
}


/* ---------------------------------------------------------
   PAGE OUTIL
   --------------------------------------------------------- */

.nf-tool-breadcrumb a{
    font-size:13px !important;
}

.nf-tool-category{
    font-size:11px !important;
}

.nf-tool-title-copy p{
    font-size:17px !important;
}

.nf-tool-hero-benefits strong{
    font-size:13px !important;
}

.nf-tool-hero-benefits small{
    font-size:11px !important;
}

.nf-tool-tabs a{
    font-size:12px !important;
}

.nf-workbench-kicker{
    font-size:10px !important;
}

.nf-workbench-top h2{
    font-size:23px !important;
}

.nf-workbench-private{
    font-size:11px !important;
}

.nf-field > span{
    font-size:13px !important;
}

.nf-field input,
.nf-field textarea,
.nf-field select{
    font-size:15px !important;
}

.nf-tool-actions .primary,
.nf-tool-actions .secondary{
    font-size:13px !important;
}

.nf-output .output-head{
    font-size:13px !important;
}

.nf-output pre{
    font-size:14px !important;
}

.nf-install-card strong{
    font-size:18px !important;
}

.nf-install-card p{
    font-size:12px !important;
}

.nf-install-status{
    font-size:10px !important;
}

.nf-side-label{
    font-size:10px !important;
}

.nf-side-faq-card strong{
    font-size:15px !important;
}

.nf-side-faq-card p{
    font-size:12px !important;
}

.nf-side-faq-card a{
    font-size:12px !important;
}

.nv-help-block .kicker{
    font-size:10px !important;
}

.nv-howto h2,
.nv-faq h2{
    font-size:23px !important;
}

.nv-how-steps li{
    font-size:13px !important;
}

.nv-example strong{
    font-size:12px !important;
}

.nv-example p{
    font-size:12px !important;
}

.nv-faq summary{
    font-size:13px !important;
}

.nv-faq details p{
    font-size:12px !important;
}

.content-block h2{
    font-size:21px !important;
}

.content-block > p{
    font-size:13px !important;
}


/* ---------------------------------------------------------
   FOOTER / NEWSLETTER GENERIQUE
   --------------------------------------------------------- */

footer,
footer p,
footer a,
footer button,
footer input,
footer label{
    font-size:13px;
}

footer h2,
footer h3,
footer h4{
    font-size:17px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

    .nf-hero-subtitle{
        font-size:16px !important;
    }

    .nf-tool-title-copy p{
        font-size:15px !important;
    }

    .nf-field input,
    .nf-field textarea,
    .nf-field select{
        font-size:16px !important;
    }
}


/* =========================================================
   NUVATOOLS — NEWSLETTER FIGMA THEME FIX V1
   ========================================================= */

.newsletter{
    border:1px solid var(--nf-line) !important;
    border-radius:22px !important;
    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;
    box-shadow:0 14px 38px rgba(47,61,105,.05);
}

.newsletter h2{
    color:var(--nf-text) !important;
    font-size:24px !important;
}

.newsletter p{
    color:var(--nf-muted) !important;
    font-size:14px !important;
    line-height:1.6 !important;
}

.newsletter .kicker{
    color:var(--nf-purple) !important;
    font-size:11px !important;
}

.newsletter-row input{
    min-height:48px !important;
    padding:0 15px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:12px !important;

    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;

    font-size:14px !important;
}

.newsletter-row input::placeholder{
    color:var(--nf-muted) !important;
}

.newsletter-row button{
    min-height:48px !important;
    padding:0 20px !important;

    border:0 !important;
    border-radius:12px !important;

    background:
        linear-gradient(
            135deg,
            var(--nf-purple),
            var(--nf-blue)
        ) !important;

    color:#fff !important;
    font-size:13px !important;
    font-weight:750 !important;
}

.newsletter-consent{
    color:var(--nf-muted) !important;
    font-size:11px !important;
    line-height:1.5 !important;
}

.newsletter-consent span{
    color:var(--nf-muted) !important;
}


/* MODE SOMBRE */

html[data-theme="dark"] .newsletter{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
    color:var(--nf-text) !important;

    box-shadow:
        0 16px 42px
        rgba(0,0,0,.16);
}

html[data-theme="dark"] .newsletter h2{
    color:var(--nf-text) !important;
}

html[data-theme="dark"] .newsletter p,
html[data-theme="dark"] .newsletter-consent,
html[data-theme="dark"] .newsletter-consent span{
    color:var(--nf-muted) !important;
}

html[data-theme="dark"] .newsletter-row input{
    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}


/* L'ancien bloc visuel ajouté sur Home ne doit plus apparaître */

.nf-bottom-banner{
    display:none !important;
}


/* =========================================================
   NUVATOOLS — DOUBLE LOGO FIX
   Le logo officiel V3 est fourni par .nv-brand::before
   ========================================================= */

.nv-brand-mark{
    display:none !important;
}

.nv-brand::before{
    flex:0 0 auto;
}


/* =========================================================
   NUVATOOLS — TOOL FIGMA POLISH V3
   ========================================================= */


/* ---------------------------------------------------------
   PAGE GLOBALE
   --------------------------------------------------------- */

.tool-page{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 72px !important;
    overflow:visible !important;
}

.nf-tool-page{
    width:min(1460px,calc(100% - 52px)) !important;
    margin:28px auto 0 !important;
}


/* ---------------------------------------------------------
   HERO PLUS PROCHE DU FIGMA
   --------------------------------------------------------- */

.nf-tool-hero{
    position:relative;
    overflow:hidden;
    min-height:240px;

    padding:
        30px
        38px
        34px !important;

    border:1px solid var(--nf-line);
    border-radius:28px;

    background:
        radial-gradient(
            circle at 94% 18%,
            rgba(111,82,255,.19),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 100%,
            rgba(48,126,255,.11),
            transparent 34%
        ),
        var(--nf-surface) !important;

    box-shadow:
        0 18px 50px
        rgba(45,58,100,.07);
}

.nf-tool-hero::after{
    content:"";
    position:absolute;
    right:-110px;
    bottom:-115px;

    width:360px;
    height:260px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            rgba(95,70,245,.14),
            rgba(48,126,255,.06)
        );

    transform:rotate(-18deg);
    pointer-events:none;
}

.nf-tool-breadcrumb{
    position:relative;
    z-index:2;
}

.nf-tool-breadcrumb a{
    font-size:13px !important;
    font-weight:700 !important;
}

.nf-tool-title-row{
    position:relative;
    z-index:2;

    grid-template-columns:
        88px
        minmax(0,1fr)
        320px !important;

    gap:26px !important;
    margin-top:24px !important;
}

.nf-tool-big-icon{
    width:82px !important;
    height:82px !important;

    border-radius:23px !important;

    font-size:31px !important;

    box-shadow:
        0 15px 32px rgba(64,77,130,.10);
}

.nf-tool-category{
    font-size:11px !important;
    letter-spacing:.11em !important;
}

.nf-tool-title-copy h1{
    margin-top:6px !important;

    max-width:820px;

    font-size:
        clamp(46px,4.6vw,68px) !important;

    line-height:.96 !important;

    letter-spacing:-.06em !important;
}

.nf-tool-title-copy p{
    max-width:800px !important;
    margin-top:13px !important;

    font-size:17px !important;
    line-height:1.62 !important;
}


/* ---------------------------------------------------------
   3 CARTES BENEFICES HERO
   --------------------------------------------------------- */

.nf-tool-hero-benefits{
    display:grid !important;
    gap:10px !important;
}

.nf-tool-hero-benefits article{
    min-height:58px !important;

    grid-template-columns:
        42px
        minmax(0,1fr) !important;

    gap:12px !important;

    padding:
        10px
        13px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:15px !important;

    background:
        rgba(255,255,255,.80) !important;

    box-shadow:
        0 8px 24px
        rgba(48,61,105,.04);

    backdrop-filter:blur(14px);
}

.nf-tool-hero-benefits article > span{
    width:40px !important;
    height:40px !important;

    border-radius:11px !important;

    font-size:17px !important;
}

.nf-tool-hero-benefits strong{
    font-size:13px !important;
}

.nf-tool-hero-benefits small{
    margin-top:3px !important;
    font-size:11px !important;
}


/* ---------------------------------------------------------
   GRANDE GRILLE
   --------------------------------------------------------- */

.nf-tool-grid{
    grid-template-columns:
        minmax(0,1fr)
        370px !important;

    gap:24px !important;

    align-items:start !important;

    margin-top:24px !important;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

.nf-tool-tabs{
    margin-bottom:12px !important;

    padding:5px !important;

    border-radius:14px !important;

    box-shadow:
        0 8px 24px
        rgba(45,58,100,.035);
}

.nf-tool-tabs a{
    min-width:100px;
    padding:10px 17px !important;

    font-size:12px !important;
}

.nf-tool-tabs a.active{
    box-shadow:
        0 5px 14px
        rgba(89,67,245,.10);
}


/* ---------------------------------------------------------
   WORKBENCH PRINCIPAL
   --------------------------------------------------------- */

.nf-tool-workbench{
    position:relative;

    padding:
        28px
        28px
        26px !important;

    border-radius:21px !important;

    box-shadow:
        0 16px 48px
        rgba(46,59,104,.055) !important;
}

.nf-workbench-top{
    margin-bottom:0 !important;
    padding-bottom:19px !important;
}

.nf-workbench-kicker{
    font-size:10px !important;
}

.nf-workbench-top h2{
    margin-top:5px !important;
    font-size:23px !important;
}

.nf-workbench-private{
    padding:
        8px
        11px !important;

    font-size:11px !important;
}


/* ---------------------------------------------------------
   CHAMPS
   --------------------------------------------------------- */

.nf-fields{
    margin-top:22px !important;
    gap:19px !important;
}

.nf-field{
    gap:9px !important;
}

.nf-field > span{
    font-size:13px !important;
}

.nf-field input,
.nf-field select,
.nf-field textarea{
    border-radius:14px !important;

    padding:
        15px
        16px !important;

    font-size:15px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

.nf-field textarea{
    min-height:390px !important;

    line-height:1.62 !important;
}

.nf-field input:focus,
.nf-field select:focus,
.nf-field textarea:focus{
    border-color:
        var(--nf-purple) !important;

    box-shadow:
        0 0 0 4px
        rgba(91,67,245,.09) !important;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.nf-tool-actions{
    gap:10px !important;

    margin-top:22px !important;
    padding-top:20px !important;
}

.nf-tool-actions button{
    min-height:48px !important;

    padding:
        0
        20px !important;

    border-radius:12px !important;

    font-size:13px !important;
}

.nf-tool-actions .primary{
    min-width:235px !important;

    box-shadow:
        0 12px 26px
        rgba(89,67,245,.18) !important;
}


/* ---------------------------------------------------------
   RESULTAT
   --------------------------------------------------------- */

.nf-output{
    overflow:hidden;

    margin-top:22px !important;

    border-radius:16px !important;

    background:
        var(--nf-soft) !important;
}

.nf-output .output-head{
    min-height:48px;

    padding:
        0
        16px !important;

    display:flex;
    align-items:center;

    font-size:13px !important;
    font-weight:700;
}

.nf-output pre{
    min-height:175px !important;

    margin:0 !important;

    padding:
        19px
        18px !important;

    background:
        var(--nf-surface) !important;

    font-size:14px !important;
    line-height:1.65 !important;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.nf-tool-sidebar{
    position:sticky;
    top:92px;

    gap:14px !important;
}

.nf-side-card{
    padding:21px !important;

    border-radius:18px !important;

    box-shadow:
        0 12px 34px
        rgba(46,58,101,.045) !important;
}

.nf-install-card{
    min-height:160px !important;

    grid-template-columns:
        58px
        minmax(0,1fr) !important;

    padding:
        23px !important;

    border-radius:21px !important;

    box-shadow:
        0 18px 42px
        rgba(82,64,225,.18) !important;
}

.nf-side-icon{
    width:54px !important;
    height:54px !important;

    border-radius:14px !important;

    font-size:25px !important;
}

.nf-install-card strong{
    font-size:18px !important;
}

.nf-install-card p{
    margin-top:7px !important;

    font-size:12px !important;
    line-height:1.55 !important;
}

.nf-install-status{
    margin-top:11px !important;

    font-size:10px !important;
}

.nf-install-note{
    font-size:9px !important;
}


/* ---------------------------------------------------------
   CARTE FAQ
   --------------------------------------------------------- */

.nf-side-faq-card strong{
    font-size:15px !important;
}

.nf-side-faq-card p{
    font-size:12px !important;
    line-height:1.55 !important;
}

.nf-side-faq-card a{
    display:inline-flex;

    margin-top:2px;

    font-size:12px !important;
}


/* ---------------------------------------------------------
   PARTAGE
   --------------------------------------------------------- */

.nf-share-row{
    gap:9px !important;
}

.nf-share-row button,
.nf-share-row a{
    width:46px !important;
    height:46px !important;

    border-radius:12px !important;

    font-size:15px !important;
}


/* ---------------------------------------------------------
   GUIDE + FAQ
   --------------------------------------------------------- */

.nv-help-block{
    width:
        min(1460px,calc(100% - 52px)) !important;

    gap:20px !important;

    margin-top:30px !important;
}

.nv-howto,
.nv-faq{
    padding:27px !important;

    border-radius:20px !important;

    box-shadow:
        0 14px 40px
        rgba(46,59,104,.04);
}

.nv-howto h2,
.nv-faq h2{
    font-size:24px !important;
}

.nv-how-steps{
    gap:11px !important;
}

.nv-how-steps li{
    min-height:60px !important;

    padding:
        15px
        16px
        15px
        56px !important;

    border-radius:13px !important;

    font-size:13px !important;
}

.nv-how-steps li::before{
    width:32px !important;
    height:32px !important;

    top:13px !important;

    font-size:11px !important;
}

.nv-example{
    padding:17px !important;
}

.nv-example strong{
    font-size:13px !important;
}

.nv-example p{
    font-size:12px !important;
}

.nv-faq summary{
    padding:
        15px
        0 !important;

    font-size:13px !important;
}

.nv-faq details p{
    font-size:12px !important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.content-block{
    width:
        min(1460px,calc(100% - 52px)) !important;

    margin-top:20px !important;

    padding:25px !important;

    border-radius:20px !important;

    box-shadow:
        0 14px 40px
        rgba(46,59,104,.035);
}

.content-block h2{
    font-size:22px !important;
}

.content-block > p{
    max-width:1000px;

    font-size:14px !important;
    line-height:1.7 !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"]
.nf-tool-hero-benefits article{
    background:
        rgba(18,26,46,.86) !important;
}

html[data-theme="dark"]
.nf-output pre{
    background:
        var(--nf-surface) !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1120px){

    .nf-tool-title-row{
        grid-template-columns:
            80px
            minmax(0,1fr) !important;
    }

    .nf-tool-hero-benefits{
        grid-column:1/-1;

        grid-template-columns:
            repeat(3,1fr) !important;
    }

    .nf-tool-grid{
        grid-template-columns:1fr !important;
    }

    .nf-tool-sidebar{
        position:static;

        grid-template-columns:
            repeat(2,1fr) !important;
    }

    .nf-install-card{
        grid-column:1/-1;
    }
}


@media(max-width:720px){

    .nf-tool-page,
    .nv-help-block,
    .content-block{
        width:
            calc(100% - 28px) !important;
    }

    .nf-tool-hero{
        min-height:0;

        padding:
            22px
            18px !important;
    }

    .nf-tool-title-row{
        grid-template-columns:
            60px
            minmax(0,1fr) !important;

        gap:14px !important;
    }

    .nf-tool-big-icon{
        width:58px !important;
        height:58px !important;

        border-radius:16px !important;
    }

    .nf-tool-title-copy h1{
        font-size:40px !important;
    }

    .nf-tool-title-copy p{
        font-size:15px !important;
    }

    .nf-tool-hero-benefits{
        grid-template-columns:1fr !important;
    }

    .nf-tool-sidebar{
        grid-template-columns:1fr !important;
    }

    .nf-tool-workbench{
        padding:
            20px
            17px !important;
    }

    .nf-field textarea{
        min-height:280px !important;
    }

    .nf-tool-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .nf-tool-actions button{
        width:100% !important;
    }
}


/* =========================================================
   NUVATOOLS — TOOL DARK CONSISTENCY V1
   ========================================================= */

html[data-theme="dark"] .nf-tool-page{
    color:var(--nf-text);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-tool-hero{
    background:
        radial-gradient(
            circle at 94% 18%,
            rgba(111,82,255,.23),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 100%,
            rgba(48,126,255,.11),
            transparent 34%
        ),
        var(--nf-surface) !important;

    border-color:var(--nf-line) !important;
}


/* ---------------------------------------------------------
   WORKBENCH
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-tool-workbench{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-workbench-top{
    background:transparent !important;
    border-color:var(--nf-line) !important;
}


/* ---------------------------------------------------------
   CHAMPS
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-field input,
html[data-theme="dark"] .nf-field textarea,
html[data-theme="dark"] .nf-field select{
    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-field input::placeholder,
html[data-theme="dark"] .nf-field textarea::placeholder{
    color:var(--nf-muted) !important;
}

html[data-theme="dark"] .nf-field select option{
    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;
}


/* ---------------------------------------------------------
   RESULTAT
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-output{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-output .output-head{
    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-output .output-head span{
    color:var(--nf-text) !important;
}

html[data-theme="dark"] .nf-output pre,
html[data-theme="dark"] #toolOutput{
    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;
    border:0 !important;
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-tool-tabs{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-tool-tabs a{
    color:var(--nf-muted) !important;
}

html[data-theme="dark"] .nf-tool-tabs a.active{
    background:#211e47 !important;
    color:#aaa0ff !important;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-side-card{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nf-side-faq-card{
    background:var(--nf-surface) !important;
}


/* ---------------------------------------------------------
   GUIDE / FAQ
   --------------------------------------------------------- */

html[data-theme="dark"] .nv-howto,
html[data-theme="dark"] .nv-faq{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nv-how-steps li{
    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nv-faq details{
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .nv-faq summary{
    color:var(--nf-text) !important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

html[data-theme="dark"] .content-block{
    background:var(--nf-surface) !important;
    border-color:var(--nf-line) !important;
}


/* ---------------------------------------------------------
   OUTILS ASSOCIES / RELATED
   --------------------------------------------------------- */

html[data-theme="dark"] .related-tools,
html[data-theme="dark"] .related-grid,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .tool-related,
html[data-theme="dark"] .tool-related-card,
html[data-theme="dark"] .related-tools a{
    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}

html[data-theme="dark"] .related-tools a:hover,
html[data-theme="dark"] .related-card:hover,
html[data-theme="dark"] .tool-related-card:hover{
    background:var(--nf-soft) !important;
}

html[data-theme="dark"] .related-tools small,
html[data-theme="dark"] .related-tools p,
html[data-theme="dark"] .related-card small,
html[data-theme="dark"] .related-card p{
    color:var(--nf-muted) !important;
}


/* ---------------------------------------------------------
   CARTES GENERIQUES SUR PAGE OUTIL
   --------------------------------------------------------- */

html[data-theme="dark"] .tool-page .card,
html[data-theme="dark"] .tool-page article,
html[data-theme="dark"] .tool-page section{
    border-color:var(--nf-line);
}


/* =========================================================
   NUVATOOLS — FIGMA TOOL EXACT V1
   ========================================================= */


/* =========================
   HEADER
   ========================= */

.nv-header-inner{
    max-width:1500px !important;
    min-height:68px !important;
    gap:24px !important;
}

.nv-brand{
    flex:0 0 auto;
}

.nv-brand-text strong{
    font-size:22px !important;
}

.nv-brand-text small{
    font-size:9px !important;
}

.nv-main-nav{
    display:flex !important;
    align-items:center !important;
    gap:26px !important;
}

.nv-main-nav a{
    font-size:13px !important;
    font-weight:650 !important;
}

.nv-header-search{
    margin-left:auto;
    width:min(390px,30vw);
    min-height:40px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 12px;

    border:1px solid var(--nf-line);
    border-radius:14px;

    background:var(--nf-soft);
    color:var(--nf-muted);

    font-size:11px;
}

.nv-header-search span:nth-child(2){
    flex:1;
}

.nv-header-search kbd{
    display:grid;
    place-items:center;

    width:24px;
    height:24px;

    border:1px solid var(--nf-line);
    border-radius:6px;

    background:var(--nf-surface);
}


/* =========================
   LANGUAGE DROPDOWN
   ========================= */

.nv-lang-menu{
    position:relative;
    z-index:100;
}

.nv-lang-menu summary{
    min-width:100px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 12px;

    cursor:pointer;
    list-style:none;

    border:1px solid var(--nf-line);
    border-radius:13px;

    background:var(--nf-surface);

    font-size:11px;
}

.nv-lang-menu summary::-webkit-details-marker{
    display:none;
}

.nv-lang-dropdown{
    position:absolute;
    top:48px;
    right:0;

    width:190px;

    padding:7px;

    border:1px solid var(--nf-line);
    border-radius:15px;

    background:var(--nf-surface);

    box-shadow:
        0 20px 50px
        rgba(20,28,55,.18);
}

.nv-lang-item{
    display:grid;
    grid-template-columns:24px 32px 1fr;
    align-items:center;
    gap:7px;

    min-height:38px;

    padding:6px 9px;

    border-radius:9px;
}

.nv-lang-item:hover,
.nv-lang-item.active{
    background:var(--nf-soft);
}

.nv-lang-item strong{
    font-size:11px;
}

.nv-lang-item small{
    color:var(--nf-muted);
    font-size:10px;
}


/* =========================
   TOOL PAGE
   ========================= */

.fx-tool-page{
    width:min(1500px,calc(100% - 64px));
    margin:0 auto 60px;
}

.fx-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:58px;

    color:var(--nf-muted);
    font-size:12px;
}

.fx-breadcrumb strong{
    color:var(--nf-text);
}


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

.fx-tool-hero{
    display:grid;
    grid-template-columns:
        104px
        minmax(0,1fr)
        610px;

    align-items:center;
    gap:24px;

    padding:
        8px
        0
        28px;
}

.fx-tool-icon{
    width:100px;
    height:100px;

    display:grid;
    place-items:center;

    border:1px solid var(--nf-line);
    border-radius:22px;

    background:var(--nf-surface);

    font-size:38px;

    box-shadow:
        0 18px 45px
        rgba(39,53,96,.08);
}

.fx-free-pill{
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border-radius:999px;

    background:
        rgba(82,92,255,.10);

    color:var(--nf-purple);

    font-size:10px;
    font-weight:750;
}

.fx-tool-intro h1{
    margin:
        7px
        0
        3px;

    color:var(--nf-text);

    font-size:
        clamp(40px,4vw,58px);

    line-height:1;

    letter-spacing:-.055em;
}

.fx-tool-intro p{
    margin:0;
    max-width:690px;

    color:var(--nf-muted);

    font-size:15px;
    line-height:1.5;
}

.fx-hero-benefits{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:10px;
}

.fx-hero-benefits article{
    min-height:68px;

    display:grid;
    grid-template-columns:
        40px
        minmax(0,1fr);

    align-items:center;
    gap:10px;

    padding:12px;

    border:1px solid var(--nf-line);
    border-radius:14px;

    background:var(--nf-surface);
}

.fx-benefit-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:
        rgba(91,67,245,.10);

    color:var(--nf-purple);

    font-size:21px;
}

.fx-hero-benefits strong,
.fx-hero-benefits small{
    display:block;
}

.fx-hero-benefits strong{
    color:var(--nf-text);
    font-size:12px;
}

.fx-hero-benefits small{
    margin-top:3px;

    color:var(--nf-muted);
    font-size:10px;
}


/* =========================
   MAIN GRID
   ========================= */

.fx-tool-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        390px;

    gap:16px;

    align-items:start;
}


/* =========================
   WORKBENCH
   ========================= */

.fx-workbench{
    overflow:hidden;

    padding:16px;

    border:1px solid var(--nf-line);
    border-radius:17px;

    background:var(--nf-surface);
}

.fx-workbench-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    margin-bottom:12px;
}

.fx-source-tabs,
.fx-toolbar-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.fx-source-tabs button,
.fx-toolbar-actions button{
    min-height:40px;

    padding:0 14px;

    border:1px solid var(--nf-line);
    border-radius:9px;

    background:var(--nf-soft);
    color:var(--nf-text);

    font-size:11px;
    font-weight:650;
}

.fx-source-tabs button.active{
    border-color:
        rgba(91,67,245,.42);

    background:
        linear-gradient(
            135deg,
            rgba(91,67,245,.15),
            rgba(48,126,255,.10)
        );

    color:var(--nf-purple);
}

.fx-source-tabs button:disabled{
    opacity:.52;
}


/* =========================
   FIELD
   ========================= */

.fx-fields{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}

.fx-field{
    display:block !important;
}

.fx-field > span{
    display:none;
}

.fx-field textarea{
    min-height:300px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:11px !important;

    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;

    padding:16px !important;

    font-size:14px !important;
}

.fx-field input,
.fx-field select{
    background:var(--nf-soft) !important;
    color:var(--nf-text) !important;
    border-color:var(--nf-line) !important;
}


/* =========================
   CHAR LIMIT
   ========================= */

.fx-counter-limit{
    display:flex;
    justify-content:space-between;

    margin-top:-38px;

    padding:
        0
        14px
        16px;

    position:relative;
    z-index:2;

    color:var(--nf-muted);

    font-size:10px;
}


/* =========================
   LIVE STATS
   ========================= */

.fx-live-stats{
    display:grid;
    grid-template-columns:
        repeat(5,1fr);

    gap:9px;

    margin-top:14px;
}

.fx-live-stats article{
    min-height:78px;

    display:grid;
    grid-template-columns:
        42px
        minmax(0,1fr);

    align-items:center;
    gap:10px;

    padding:10px;

    border:1px solid var(--nf-line);
    border-radius:12px;

    background:var(--nf-surface);
}

.fx-stat-icon{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:
        rgba(91,67,245,.10);

    color:var(--nf-purple);

    font-size:18px;
    font-weight:800;
}

.fx-live-stats strong{
    display:block;

    color:var(--nf-text);

    font-size:18px;
}

.fx-live-stats small{
    display:block;

    margin-top:2px;

    color:var(--nf-muted);

    font-size:10px;
    line-height:1.25;
}


/* =========================
   ACTIONS
   ========================= */

.fx-tool-actions{
    display:flex !important;
    gap:9px !important;

    padding:
        14px
        0
        0 !important;
}

.fx-tool-actions button{
    min-height:42px !important;

    padding:
        0
        16px !important;

    font-size:11px !important;
}


/* =========================
   RESULT
   ========================= */

.fx-output{
    margin:
        14px
        0
        0 !important;

    border:1px solid var(--nf-line) !important;
    border-radius:12px !important;

    background:var(--nf-surface) !important;
}

.fx-output .output-head{
    min-height:42px;

    background:var(--nf-soft) !important;

    color:var(--nf-text) !important;

    border-color:var(--nf-line) !important;
}

.fx-output pre{
    min-height:110px !important;

    background:var(--nf-surface) !important;
    color:var(--nf-text) !important;

    font-size:12px !important;
}


/* =========================
   SIDEBAR
   ========================= */

.fx-tool-sidebar{
    display:grid;
    gap:12px;
}

.fx-install-card,
.fx-side-panel{
    padding:14px;

    border:1px solid var(--nf-line);
    border-radius:15px;

    background:var(--nf-surface);
}

.fx-install-card button{
    width:100%;
    min-height:52px;

    border:0;
    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #6544ff,
            #258cff
        );

    color:#fff;

    font-size:16px;
    font-weight:750;
}

.fx-install-card p{
    margin:
        8px
        0
        0;

    text-align:center;

    color:var(--nf-muted);

    font-size:10px;
}

.fx-install-card small{
    display:block;
    text-align:center;

    margin-top:4px;

    color:var(--nf-muted);

    font-size:9px;
}

.fx-side-panel h2{
    margin:
        0
        0
        10px;

    color:var(--nf-text);

    font-size:16px;
}


/* =========================
   OPTIONS
   ========================= */

.fx-option-row{
    display:grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        42px;

    align-items:center;
    gap:10px;

    min-height:55px;

    cursor:pointer;
}

.fx-option-row + .fx-option-row{
    margin-top:5px;
}

.fx-option-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:var(--nf-soft);

    color:var(--nf-purple);

    font-size:18px;
}

.fx-option-copy strong,
.fx-option-copy small{
    display:block;
}

.fx-option-copy strong{
    color:var(--nf-text);

    font-size:11px;
}

.fx-option-copy small{
    margin-top:3px;

    color:var(--nf-muted);

    font-size:9px;
}

.fx-option-row input{
    appearance:none;

    width:38px;
    height:22px;

    border-radius:999px;

    background:#adb5c9;

    position:relative;

    cursor:pointer;
}

.fx-option-row input::after{
    content:"";

    position:absolute;

    width:18px;
    height:18px;

    left:2px;
    top:2px;

    border-radius:50%;

    background:white;

    transition:.15s ease;
}

.fx-option-row input:checked{
    background:
        linear-gradient(
            90deg,
            #6245ff,
            #3976ff
        );
}

.fx-option-row input:checked::after{
    transform:
        translateX(16px);
}


/* =========================
   SHARE
   ========================= */

.fx-side-title-row{
    display:flex;
    gap:10px;
}

.fx-side-title-icon{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:var(--nf-soft);

    color:var(--nf-purple);
}

.fx-side-title-row h2{
    margin:0;
}

.fx-side-title-row p{
    margin:2px 0 0;

    color:var(--nf-muted);

    font-size:9px;
}

.fx-share-buttons{
    display:flex;
    gap:7px;

    margin-top:11px;
}

.fx-share-buttons button{
    width:39px;
    height:39px;

    border:1px solid var(--nf-line);
    border-radius:9px;

    background:var(--nf-soft);
    color:var(--nf-text);

    cursor:pointer;
}


/* =========================
   FAQ SIDEBAR
   ========================= */

.fx-faq-panel details{
    border:1px solid var(--nf-line);
    border-radius:9px;

    background:var(--nf-soft);
}

.fx-faq-panel details + details{
    margin-top:6px;
}

.fx-faq-panel summary{
    cursor:pointer;

    padding:10px;

    color:var(--nf-text);

    font-size:10px;
    font-weight:650;
}

.fx-faq-panel details p{
    margin:0;

    padding:
        0
        10px
        10px;

    color:var(--nf-muted);

    font-size:9px;
}


/* =========================
   GUIDE
   ========================= */

.fx-guide{
    margin-top:16px;

    padding:20px;

    border:1px solid var(--nf-line);
    border-radius:16px;

    background:var(--nf-surface);
}

.fx-guide h2{
    margin:
        5px
        0
        14px;

    color:var(--nf-text);

    font-size:20px;
}

.fx-guide-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:9px;
}

.fx-guide-grid article{
    display:grid;

    grid-template-columns:
        32px
        minmax(0,1fr);

    gap:9px;

    padding:11px;

    border:1px solid var(--nf-line);
    border-radius:10px;

    background:var(--nf-soft);
}

.fx-guide-grid article > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        rgba(91,67,245,.11);

    color:var(--nf-purple);

    font-size:10px;
    font-weight:800;
}

.fx-guide-grid p{
    margin:0;

    color:var(--nf-muted);

    font-size:10px;
    line-height:1.45;
}

.fx-guide-example{
    margin-top:10px;

    padding:12px;

    border-radius:10px;

    background:var(--nf-soft);
}

.fx-guide-example strong{
    color:var(--nf-text);

    font-size:11px;
}

.fx-guide-example p{
    margin:4px 0 0;

    color:var(--nf-muted);

    font-size:10px;
}


/* =========================
   CONTENT BELOW
   ========================= */

.content-block{
    width:min(1500px,calc(100% - 64px)) !important;

    margin:
        16px
        auto
        0 !important;
}


/* =========================
   DARK MODE
   ========================= */

html[data-theme="dark"] .fx-workbench,
html[data-theme="dark"] .fx-install-card,
html[data-theme="dark"] .fx-side-panel,
html[data-theme="dark"] .fx-guide,
html[data-theme="dark"] .fx-live-stats article,
html[data-theme="dark"] .fx-hero-benefits article,
html[data-theme="dark"] .fx-tool-icon{
    background:#101b30 !important;
    border-color:#263754 !important;
}

html[data-theme="dark"] .fx-field textarea,
html[data-theme="dark"] .fx-field input,
html[data-theme="dark"] .fx-field select,
html[data-theme="dark"] .fx-output,
html[data-theme="dark"] .fx-output pre{
    background:#101b30 !important;
    border-color:#314562 !important;
}

html[data-theme="dark"] .fx-output .output-head,
html[data-theme="dark"] .fx-source-tabs button,
html[data-theme="dark"] .fx-toolbar-actions button,
html[data-theme="dark"] .fx-option-icon,
html[data-theme="dark"] .fx-share-buttons button,
html[data-theme="dark"] .fx-faq-panel details,
html[data-theme="dark"] .fx-guide-grid article,
html[data-theme="dark"] .fx-guide-example,
html[data-theme="dark"] .nv-header-search{
    background:#142139 !important;
    border-color:#293c59 !important;
}


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

@media(max-width:1200px){

    .fx-tool-hero{
        grid-template-columns:
            90px
            minmax(0,1fr);
    }

    .fx-hero-benefits{
        grid-column:1/-1;
    }

    .fx-tool-layout{
        grid-template-columns:1fr;
    }

    .fx-tool-sidebar{
        grid-template-columns:
            repeat(2,1fr);
    }

    .fx-install-card{
        grid-column:1/-1;
    }

    .nv-header-search{
        display:none;
    }
}


@media(max-width:760px){

    .fx-tool-page{
        width:calc(100% - 28px);
    }

    .fx-tool-hero{
        grid-template-columns:
            64px
            minmax(0,1fr);
    }

    .fx-tool-icon{
        width:62px;
        height:62px;

        border-radius:16px;

        font-size:25px;
    }

    .fx-tool-intro h1{
        font-size:36px;
    }

    .fx-hero-benefits{
        grid-template-columns:1fr;
    }

    .fx-workbench-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .fx-source-tabs{
        display:grid;
        grid-template-columns:1fr;
    }

    .fx-toolbar-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .fx-live-stats{
        grid-template-columns:
            repeat(2,1fr);
    }

    .fx-tool-sidebar{
        grid-template-columns:1fr;
    }

    .fx-guide-grid{
        grid-template-columns:1fr;
    }

    .nv-main-nav{
        display:none !important;
    }
}


/* =========================================================
   NUVATOOLS — HOME SAFE POLISH V1
   IMPORTANT : NE TOUCHE PAS AU HERO
   ========================================================= */


/* ---------------------------------------------------------
   SECTIONS GENERALES
   --------------------------------------------------------- */

.nf-home .nf-section{
    margin-top:34px;
}


/* ---------------------------------------------------------
   CATEGORIES
   --------------------------------------------------------- */

.nf-home .nf-category-row{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:12px !important;
}

.nf-home .nf-category-card{
    min-height:112px !important;

    padding:17px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:15px !important;

    background:var(--nf-surface) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.nf-home .nf-category-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(91,67,245,.30) !important;

    box-shadow:
        0 14px 34px
        rgba(40,52,94,.07);
}

.nf-home .nf-category-card strong{
    color:var(--nf-text) !important;

    font-size:14px !important;
}

.nf-home .nf-category-card small{
    margin-top:5px !important;

    color:var(--nf-muted) !important;

    font-size:11px !important;
    line-height:1.45 !important;
}


/* ---------------------------------------------------------
   FACTS / STATS
   --------------------------------------------------------- */

.nf-home .nf-facts{
    padding:20px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:18px !important;

    background:var(--nf-surface) !important;
}

.nf-home .nf-facts article{
    min-height:86px !important;

    padding:15px 18px !important;
}

.nf-home .nf-facts article strong{
    color:var(--nf-text) !important;

    font-size:27px !important;
    line-height:1 !important;
}

.nf-home .nf-facts article small{
    margin-top:6px !important;

    color:var(--nf-muted) !important;

    font-size:11px !important;
}

.nf-home .nf-fact-icon{
    width:38px !important;
    height:38px !important;

    border-radius:10px !important;
}


/* ---------------------------------------------------------
   OUTILS POPULAIRES
   --------------------------------------------------------- */

.nf-home .nf-popular-grid{
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:12px !important;
}

.nf-home .nf-popular-card{
    min-height:132px !important;

    padding:18px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:16px !important;

    background:var(--nf-surface) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.nf-home .nf-popular-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(91,67,245,.32) !important;

    box-shadow:
        0 16px 36px
        rgba(42,54,96,.07);
}

.nf-home .nf-popular-icon{
    width:44px !important;
    height:44px !important;

    border-radius:11px !important;
}

.nf-home .nf-popular-copy strong{
    color:var(--nf-text) !important;

    font-size:14px !important;
}

.nf-home .nf-popular-copy small{
    color:var(--nf-muted) !important;

    font-size:11px !important;
    line-height:1.5 !important;
}

.nf-home .nf-popular-arrow{
    font-size:18px !important;
}


/* ---------------------------------------------------------
   TRUST
   --------------------------------------------------------- */

.nf-home .nf-trust{
    padding:28px 30px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(91,67,245,.06),
            rgba(48,126,255,.03)
        ),
        var(--nf-surface) !important;
}

.nf-home .nf-trust h2{
    color:var(--nf-text) !important;

    font-size:23px !important;
}

.nf-home .nf-trust p{
    color:var(--nf-muted) !important;

    font-size:13px !important;
    line-height:1.6 !important;
}

.nf-home .nf-trust-row{
    gap:12px !important;
}


/* ---------------------------------------------------------
   DERNIERS OUTILS
   --------------------------------------------------------- */

.nf-home .nf-latest-grid{
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:11px !important;
}

.nf-home .nf-latest-card{
    min-height:82px !important;

    padding:14px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:13px !important;

    background:var(--nf-surface) !important;
}

.nf-home .nf-latest-card:hover{
    border-color:
        rgba(91,67,245,.28) !important;
}

.nf-home .nf-latest-card strong{
    color:var(--nf-text) !important;

    font-size:13px !important;
}

.nf-home .nf-latest-card small{
    color:var(--nf-muted) !important;

    font-size:11px !important;
}

.nf-home .nf-latest-icon{
    width:38px !important;
    height:38px !important;

    border-radius:10px !important;
}


/* ---------------------------------------------------------
   TITRES DE SECTIONS
   --------------------------------------------------------- */

.nf-home .nf-section-title-row h2{
    color:var(--nf-text) !important;

    font-size:28px !important;

    letter-spacing:-.035em !important;
}

.nf-home .nf-section-title-row p{
    color:var(--nf-muted) !important;

    font-size:13px !important;
    line-height:1.55 !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"] .nf-home .nf-category-card,
html[data-theme="dark"] .nf-home .nf-facts,
html[data-theme="dark"] .nf-home .nf-popular-card,
html[data-theme="dark"] .nf-home .nf-trust,
html[data-theme="dark"] .nf-home .nf-latest-card{
    background:#101b30 !important;

    border-color:#263754 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1150px){

    .nf-home .nf-category-row{
        grid-template-columns:
            repeat(3,1fr) !important;
    }

    .nf-home .nf-popular-grid,
    .nf-home .nf-latest-grid{
        grid-template-columns:
            repeat(2,1fr) !important;
    }
}

@media(max-width:650px){

    .nf-home .nf-category-row,
    .nf-home .nf-popular-grid,
    .nf-home .nf-latest-grid{
        grid-template-columns:
            1fr !important;
    }
}


/* =========================================================
   NUVATOOLS — NEWSLETTER FIGMA POLISH V2
   ========================================================= */

.newsletter{
    position:relative;
    overflow:hidden;

    width:min(1500px,calc(100% - 64px)) !important;

    display:grid !important;
    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,.85fr) !important;

    align-items:center !important;

    gap:46px !important;

    margin:
        42px
        auto
        26px !important;

    padding:
        34px
        38px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:22px !important;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(91,67,245,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(48,126,255,.07),
            transparent 35%
        ),
        var(--nf-surface) !important;

    box-shadow:
        0 18px 48px
        rgba(40,52,94,.055) !important;
}


/* Décoration discrète */

.newsletter::after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-110px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(98,68,255,.16),
            transparent 68%
        );

    pointer-events:none;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.newsletter > div{
    position:relative;
    z-index:2;

    max-width:650px;
}

.newsletter .kicker{
    display:inline-flex !important;
    align-items:center !important;

    margin-bottom:8px !important;

    color:var(--nf-purple) !important;

    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.13em !important;
}

.newsletter h2{
    margin:
        0
        0
        8px !important;

    color:var(--nf-text) !important;

    font-size:
        clamp(24px,2.6vw,34px) !important;

    line-height:1.05 !important;
    letter-spacing:-.04em !important;
}

.newsletter p{
    max-width:590px !important;

    margin:0 !important;

    color:var(--nf-muted) !important;

    font-size:13px !important;
    line-height:1.65 !important;
}


/* ---------------------------------------------------------
   FORMULAIRE
   --------------------------------------------------------- */

.newsletter form{
    position:relative;
    z-index:2;

    width:100%;
}

.newsletter-row{
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto !important;

    gap:8px !important;

    padding:6px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:14px !important;

    background:var(--nf-soft) !important;
}

.newsletter-row input{
    width:100% !important;

    min-height:44px !important;

    padding:
        0
        12px !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:var(--nf-text) !important;

    font-size:13px !important;
}

.newsletter-row input::placeholder{
    color:var(--nf-muted) !important;
}

.newsletter-row button{
    min-height:44px !important;

    padding:
        0
        18px !important;

    border:0 !important;
    border-radius:10px !important;

    background:
        linear-gradient(
            135deg,
            #6545ff,
            #2e82ff
        ) !important;

    color:#fff !important;

    font-size:12px !important;
    font-weight:750 !important;

    cursor:pointer !important;

    box-shadow:
        0 8px 22px
        rgba(91,67,245,.18) !important;
}


/* ---------------------------------------------------------
   CONSENTEMENT
   --------------------------------------------------------- */

.newsletter-consent{
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;

    margin-top:9px !important;

    color:var(--nf-muted) !important;

    font-size:10px !important;
    line-height:1.45 !important;
}

.newsletter-consent input{
    flex:0 0 auto;

    margin-top:2px;
}

.newsletter-consent span{
    color:var(--nf-muted) !important;
}


/* Honeypot invisible */

.newsletter-hp{
    position:absolute !important;

    left:-99999px !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"] .newsletter{
    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(91,67,245,.17),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(48,126,255,.09),
            transparent 35%
        ),
        #101b30 !important;

    border-color:#263754 !important;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .newsletter-row{
    background:#142139 !important;
    border-color:#293c59 !important;
}

html[data-theme="dark"] .newsletter-row input{
    color:#f3f6fc !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:950px){

    .newsletter{
        grid-template-columns:1fr !important;

        gap:22px !important;

        padding:
            28px
            26px !important;
    }
}


@media(max-width:650px){

    .newsletter{
        width:calc(100% - 28px) !important;

        margin-top:30px !important;

        padding:
            24px
            18px !important;

        border-radius:18px !important;
    }

    .newsletter-row{
        grid-template-columns:1fr !important;
    }

    .newsletter-row button{
        width:100% !important;
    }

    .newsletter h2{
        font-size:26px !important;
    }
}


/* =========================================================
   NUVATOOLS — CATEGORY ICON COLOR PASS V1
   ========================================================= */

/*
 * Les SVG héritent désormais explicitement de la couleur
 * de leur catégorie au lieu de rester noirs.
 */

.nf-category-icon,
.nf-popular-icon,
.nf-latest-icon{
    position:relative;

    display:grid !important;
    place-items:center !important;

    overflow:hidden;

    color:#6550f5 !important;

    background:
        linear-gradient(
            135deg,
            rgba(101,80,245,.13),
            rgba(55,126,255,.08)
        ) !important;

    border:
        1px solid
        rgba(101,80,245,.12) !important;
}


/* SVG */

.nf-category-icon svg,
.nf-popular-icon svg,
.nf-latest-icon svg{
    width:22px !important;
    height:22px !important;

    color:inherit !important;

    fill:none !important;
    stroke:currentColor !important;

    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}


/*
 * Certains pictos utilisent des paths avec fill explicite.
 * On force la palette NuvaTools.
 */

.nf-category-icon svg *,
.nf-popular-icon svg *,
.nf-latest-icon svg *{
    vector-effect:
        non-scaling-stroke;
}


/* TEXTE */

.v2-cat-text{
    color:#7558ff !important;

    background:
        rgba(117,88,255,.11) !important;
}


/* DEVELOPPEUR */

.v2-cat-developer{
    color:#526dff !important;

    background:
        rgba(82,109,255,.11) !important;
}


/* SEO */

.v2-cat-seo{
    color:#9a55ee !important;

    background:
        rgba(154,85,238,.11) !important;
}


/* DATA */

.v2-cat-data{
    color:#327dea !important;

    background:
        rgba(50,125,234,.11) !important;
}


/* CONVERSION */

.v2-cat-conversion{
    color:#347bd9 !important;

    background:
        rgba(52,123,217,.11) !important;
}


/* GENERATEURS */

.v2-cat-generators{
    color:#8457ed !important;

    background:
        rgba(132,87,237,.11) !important;
}


/* PDF */

.v2-cat-pdf{
    color:#d95674 !important;

    background:
        rgba(217,86,116,.10) !important;
}


/* IMAGE */

.v2-cat-image{
    color:#b65bd9 !important;

    background:
        rgba(182,91,217,.10) !important;
}


/* AUDIO / VIDEO / MEDIA */

.v2-cat-media{
    color:#7b5ce6 !important;

    background:
        linear-gradient(
            135deg,
            rgba(123,92,230,.13),
            rgba(55,126,255,.08)
        ) !important;
}


/* RESEAU */

.v2-cat-network{
    color:#347aca !important;

    background:
        rgba(52,122,202,.11) !important;
}


/* FICHIERS */

.v2-cat-files{
    color:#5d68e8 !important;

    background:
        rgba(93,104,232,.11) !important;
}


/* FALLBACK : aucun SVG noir */

.nf-home .nf-category-icon svg path,
.nf-home .nf-category-icon svg line,
.nf-home .nf-category-icon svg circle,
.nf-home .nf-category-icon svg rect,
.nf-home .nf-category-icon svg polyline,
.nf-home .nf-category-icon svg polygon,

.nf-home .nf-popular-icon svg path,
.nf-home .nf-popular-icon svg line,
.nf-home .nf-popular-icon svg circle,
.nf-home .nf-popular-icon svg rect,

.nf-home .nf-latest-icon svg path,
.nf-home .nf-latest-icon svg line,
.nf-home .nf-latest-icon svg circle,
.nf-home .nf-latest-icon svg rect{
    stroke:currentColor !important;
}


/* Si un ancien SVG a un fill="#000..." */

.nf-home .nf-category-icon svg path[fill],
.nf-home .nf-popular-icon svg path[fill],
.nf-home .nf-latest-icon svg path[fill]{
    fill:currentColor !important;
}


/* MODE SOMBRE */

html[data-theme="dark"] .nf-category-icon,
html[data-theme="dark"] .nf-popular-icon,
html[data-theme="dark"] .nf-latest-icon{
    border-color:
        rgba(134,115,255,.18) !important;

    filter:
        saturate(1.08)
        brightness(1.12);
}


/* =========================================================
   NUVATOOLS — CATEGORY ONE LINE V1
   ========================================================= */

@media(min-width:1151px){

    .nf-home .nf-category-row{
        grid-template-columns:
            repeat(11,minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .nf-home .nf-category-card{
        min-height:92px !important;

        padding:
            12px
            10px !important;

        border-radius:13px !important;
    }

    .nf-home .nf-category-icon{
        width:34px !important;
        height:34px !important;

        margin-bottom:8px !important;

        border-radius:9px !important;
    }

    .nf-home .nf-category-icon svg{
        width:18px !important;
        height:18px !important;
    }

    .nf-home .nf-category-card strong{
        font-size:12px !important;

        line-height:1.25 !important;
    }

    .nf-home .nf-category-card small{
        margin-top:3px !important;

        font-size:9px !important;

        line-height:1.3 !important;
    }
}


/* =========================================================
   NUVATOOLS — HERO MINI ICONS COLOR PASS V1
   ========================================================= */

.nf-browser-tools .nf-mini-icon{
    width:34px !important;
    height:34px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:9px !important;

    color:#6550f5 !important;

    background:
        linear-gradient(
            135deg,
            rgba(101,80,245,.13),
            rgba(55,126,255,.08)
        ) !important;

    border:
        1px solid
        rgba(101,80,245,.12) !important;
}

.nf-browser-tools .nf-mini-icon svg{
    width:18px !important;
    height:18px !important;

    color:inherit !important;

    fill:none !important;
    stroke:currentColor !important;

    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}


/* Couleurs par catégorie */

.nf-browser-tools .v2-cat-text{
    color:#7558ff !important;
    background:rgba(117,88,255,.11) !important;
}

.nf-browser-tools .v2-cat-developer{
    color:#526dff !important;
    background:rgba(82,109,255,.11) !important;
}

.nf-browser-tools .v2-cat-seo{
    color:#9a55ee !important;
    background:rgba(154,85,238,.11) !important;
}

.nf-browser-tools .v2-cat-data{
    color:#327dea !important;
    background:rgba(50,125,234,.11) !important;
}

.nf-browser-tools .v2-cat-conversion{
    color:#347bd9 !important;
    background:rgba(52,123,217,.11) !important;
}

.nf-browser-tools .v2-cat-generators{
    color:#8457ed !important;
    background:rgba(132,87,237,.11) !important;
}

.nf-browser-tools .v2-cat-pdf{
    color:#d95674 !important;
    background:rgba(217,86,116,.10) !important;
}

.nf-browser-tools .v2-cat-image{
    color:#b65bd9 !important;
    background:rgba(182,91,217,.10) !important;
}

.nf-browser-tools .v2-cat-media{
    color:#7b5ce6 !important;

    background:
        linear-gradient(
            135deg,
            rgba(123,92,230,.13),
            rgba(55,126,255,.08)
        ) !important;
}

.nf-browser-tools .v2-cat-network{
    color:#347aca !important;
    background:rgba(52,122,202,.11) !important;
}

.nf-browser-tools .v2-cat-files{
    color:#5d68e8 !important;
    background:rgba(93,104,232,.11) !important;
}


/* Aucun SVG noir */

.nf-browser-tools .nf-mini-icon svg path,
.nf-browser-tools .nf-mini-icon svg line,
.nf-browser-tools .nf-mini-icon svg circle,
.nf-browser-tools .nf-mini-icon svg rect,
.nf-browser-tools .nf-mini-icon svg polyline,
.nf-browser-tools .nf-mini-icon svg polygon{
    stroke:currentColor !important;
}

.nf-browser-tools .nf-mini-icon svg path[fill]{
    fill:currentColor !important;
}


/* Dark mode */

html[data-theme="dark"] .nf-browser-tools .nf-mini-icon{
    border-color:
        rgba(134,115,255,.18) !important;

    filter:
        saturate(1.08)
        brightness(1.12);
}


/* =========================================================
   NUVATOOLS — RELATED TOOLS FIGMA V1
   ========================================================= */

.related-tools{
    width:min(1500px,calc(100% - 64px)) !important;

    margin:
        22px
        auto
        0 !important;
}

.related-tools-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;

    margin-bottom:14px;
}

.related-tools-head h2{
    margin:0 !important;

    color:var(--nf-text) !important;

    font-size:24px !important;
    letter-spacing:-.035em !important;
}

.related-tools-head p{
    margin:0 !important;

    color:var(--nf-muted) !important;

    font-size:12px !important;
}

.related-tools-grid{
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:12px !important;
}

.related-tool-card{
    position:relative;

    min-height:150px !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:flex-start !important;

    padding:
        18px
        18px
        17px !important;

    border:1px solid var(--nf-line) !important;
    border-radius:16px !important;

    background:var(--nf-surface) !important;

    color:var(--nf-text) !important;

    overflow:hidden;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}


/* petit pictogramme */

.related-tool-card::before{
    content:"◇";

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    margin-bottom:14px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            rgba(108,78,255,.14),
            rgba(49,126,255,.09)
        );

    color:#7357f5;

    font-size:20px;
    font-weight:800;
}


/* flèche discrète */

.related-tool-card::after{
    content:"↗";

    position:absolute;

    right:16px;
    top:16px;

    color:var(--nf-muted);

    font-size:16px;

    transition:
        transform .16s ease,
        color .16s ease;
}


.related-tool-card strong{
    display:block;

    padding-right:24px;

    color:var(--nf-text) !important;

    font-size:14px !important;
    line-height:1.35 !important;
}

.related-tool-card span{
    display:block;

    margin-top:8px !important;

    color:var(--nf-muted) !important;

    font-size:11px !important;
    line-height:1.55 !important;
}


/* variantes visuelles légères */

.related-tool-card:nth-child(2)::before{
    color:#4e6ff0;

    background:
        rgba(78,111,240,.11);
}

.related-tool-card:nth-child(3)::before{
    color:#9857de;

    background:
        rgba(152,87,222,.11);
}

.related-tool-card:nth-child(4)::before{
    color:#357acb;

    background:
        rgba(53,122,203,.11);
}


/* hover */

.related-tool-card:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(104,78,245,.32) !important;

    box-shadow:
        0 16px 38px
        rgba(42,54,96,.08);
}

.related-tool-card:hover::after{
    transform:
        translate(2px,-2px);

    color:var(--nf-purple);
}


/* dark */

html[data-theme="dark"] .related-tool-card{
    background:#101b30 !important;

    border-color:#263754 !important;
}

html[data-theme="dark"] .related-tool-card::before{
    filter:
        saturate(1.1)
        brightness(1.13);
}


/* responsive */

@media(max-width:1000px){

    .related-tools-grid{
        grid-template-columns:
            repeat(2,1fr) !important;
    }
}

@media(max-width:650px){

    .related-tools{
        width:
            calc(100% - 28px) !important;
    }

    .related-tools-head{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .related-tools-grid{
        grid-template-columns:
            1fr !important;
    }
}


/* =========================================================
   NUVATOOLS — DIRECTORY PAGES V1
   ========================================================= */

.nv-directory-page{
    width:min(1500px,calc(100% - 64px));
    margin:0 auto;
    padding:34px 0 60px;
}

.nv-directory-hero{
    padding:28px 0 32px;
}

.nv-directory-hero h1{
    margin:8px 0 10px;
    color:var(--nf-text);
    font-size:clamp(34px,4vw,54px);
    line-height:1;
    letter-spacing:-.05em;
}

.nv-directory-hero p{
    max-width:720px;
    margin:0;
    color:var(--nf-muted);
    font-size:14px;
    line-height:1.65;
}

.nv-directory-count{
    display:flex;
    align-items:baseline;
    gap:9px;
    margin-top:20px;
}

.nv-directory-count strong{
    color:var(--nf-purple);
    font-size:25px;
}

.nv-directory-count span{
    color:var(--nf-muted);
    font-size:12px;
}

.nv-directory-section{
    margin-top:28px;
}

.nv-directory-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:13px;
}

.nv-directory-section-head > div{
    display:flex;
    align-items:center;
    gap:12px;
}

.nv-directory-section-head h2{
    margin:0;
    color:var(--nf-text);
    font-size:22px;
    letter-spacing:-.03em;
}

.nv-directory-section-head p{
    margin:3px 0 0;
    color:var(--nf-muted);
    font-size:11px;
}

.nv-directory-section-head > a{
    color:var(--nf-purple);
    font-size:11px;
    font-weight:750;
}

.nv-directory-tools-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.nv-directory-tool-card{
    min-height:98px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--nf-line);
    border-radius:14px;
    background:var(--nf-surface);
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.nv-directory-tool-card:hover{
    transform:translateY(-2px);
    border-color:rgba(91,67,245,.30);
    box-shadow:0 12px 30px rgba(40,52,94,.07);
}

.nv-directory-tool-card strong{
    display:block;
    color:var(--nf-text);
    font-size:13px;
    line-height:1.3;
}

.nv-directory-tool-card small{
    display:block;
    margin-top:4px;
    color:var(--nf-muted);
    font-size:10px;
    line-height:1.4;
}

.nv-directory-arrow{
    color:var(--nf-muted);
    font-size:16px;
}

.nv-directory-categories-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.nv-directory-category-card{
    min-height:160px !important;
}

.nv-directory-category-count{
    display:block;
    margin-top:auto;
    padding-top:12px;
    color:var(--nf-purple);
    font-size:10px;
    font-weight:750;
}

html[data-theme="dark"] .nv-directory-tool-card{
    background:#101b30;
    border-color:#263754;
}

@media(max-width:1100px){

    .nv-directory-tools-grid,
    .nv-directory-categories-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){

    .nv-directory-page{
        width:calc(100% - 28px);
        padding-top:20px;
    }

    .nv-directory-tools-grid,
    .nv-directory-categories-grid{
        grid-template-columns:1fr;
    }

    .nv-directory-section-head{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* =========================================================
   NUVATOOLS — TOOLS DIRECTORY V2
   ========================================================= */

.nv-directory-page{
    padding-top:20px !important;
}


/* HERO */

.nv-directory-hero{
    position:relative;

    overflow:hidden;

    margin-bottom:20px;

    padding:
        38px
        38px
        34px !important;

    border:1px solid var(--nf-line);

    border-radius:22px;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(82,86,255,.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 80%,
            rgba(50,130,255,.08),
            transparent 30%
        ),
        var(--nf-surface);

    box-shadow:
        0 18px 50px
        rgba(40,52,94,.055);
}

.nv-directory-hero::after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-100px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(105,78,255,.16),
            transparent 70%
        );

    pointer-events:none;
}

.nv-directory-hero .kicker{
    position:relative;
    z-index:2;
}

.nv-directory-hero h1{
    position:relative;
    z-index:2;

    max-width:760px;

    font-size:
        clamp(38px,5vw,62px) !important;
}

.nv-directory-hero p{
    position:relative;
    z-index:2;

    max-width:760px !important;

    font-size:14px !important;
}

.nv-directory-count{
    position:relative;
    z-index:2;

    display:inline-flex !important;

    align-items:center;

    margin-top:22px !important;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(99,76,240,.14);

    border-radius:12px;

    background:
        rgba(100,76,240,.06);
}

.nv-directory-count strong{
    font-size:24px !important;
}


/* RECHERCHE */

.nv-tools-search-panel{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin:
        0
        0
        28px;

    padding:
        12px;

    border:1px solid var(--nf-line);

    border-radius:17px;

    background:var(--nf-surface);
}

.nv-tools-search-box{
    flex:1;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px;

    min-height:52px;

    padding:
        0
        13px;

    border:
        1px solid
        var(--nf-line);

    border-radius:13px;

    background:var(--nf-soft);
}

.nv-tools-search-icon{
    color:var(--nf-purple);

    font-size:22px;
}

.nv-tools-search-box input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:var(--nf-text);

    font-size:14px;
}

.nv-tools-search-box input::placeholder{
    color:var(--nf-muted);
}

.nv-tools-search-box kbd{
    padding:
        3px
        7px;

    border:
        1px solid
        var(--nf-line);

    border-radius:6px;

    background:var(--nf-surface);

    color:var(--nf-muted);

    font-size:10px;
}

.nv-tools-search-meta{
    min-width:145px;

    display:flex;

    align-items:baseline;
    justify-content:center;

    gap:6px;

    color:var(--nf-muted);

    font-size:11px;
}

.nv-tools-search-meta span:first-child{
    color:var(--nf-purple);

    font-size:22px;
    font-weight:800;
}


/* SECTIONS CATEGORIES */

.nv-directory-section{
    position:relative;

    margin-top:18px !important;

    padding:
        20px;

    border:
        1px solid
        var(--nf-line);

    border-radius:18px;

    background:var(--nf-surface);
}

.nv-directory-section-head{
    margin-bottom:16px !important;

    padding-bottom:14px;

    border-bottom:
        1px solid
        var(--nf-line);
}

.nv-directory-section-head > div{
    min-width:0;
}

.nv-directory-section-head .nf-category-icon{
    flex:0 0 auto;

    width:42px !important;
    height:42px !important;

    border-radius:11px !important;
}

.nv-directory-section-head h2{
    font-size:21px !important;
}

.nv-directory-section-head p{
    max-width:720px;

    font-size:11px !important;
    line-height:1.45;
}


/* CARTES */

.nv-directory-tools-grid{
    gap:9px !important;
}

.nv-directory-tool-card{
    min-height:102px !important;

    padding:
        14px !important;

    border-radius:13px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent
        ),
        var(--nf-soft) !important;
}

.nv-directory-tool-card .nf-popular-icon{
    width:40px !important;
    height:40px !important;

    border-radius:10px !important;
}

.nv-directory-tool-card strong{
    font-size:13px !important;

    letter-spacing:-.01em;
}

.nv-directory-tool-card small{
    margin-top:5px !important;

    font-size:10px !important;

    line-height:1.45 !important;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.nv-directory-tool-card:hover{
    transform:
        translateY(-3px) !important;

    border-color:
        rgba(102,78,245,.32) !important;

    background:
        linear-gradient(
            135deg,
            rgba(101,77,245,.055),
            rgba(50,126,255,.025)
        ),
        var(--nf-surface) !important;
}


/* FLECHE */

.nv-directory-arrow{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        rgba(95,77,225,.06);

    color:var(--nf-purple) !important;

    transition:
        transform .16s ease;
}

.nv-directory-tool-card:hover
.nv-directory-arrow{
    transform:translateX(2px);
}


/* ZERO RESULT */

.nv-directory-section.nv-tools-section-hidden{
    display:none !important;
}


/* DARK */

html[data-theme="dark"]
.nv-directory-hero,

html[data-theme="dark"]
.nv-tools-search-panel,

html[data-theme="dark"]
.nv-directory-section{
    background:#101b30 !important;

    border-color:#263754 !important;
}

html[data-theme="dark"]
.nv-tools-search-box,

html[data-theme="dark"]
.nv-directory-tool-card{
    background:#142139 !important;

    border-color:#293c59 !important;
}


/* MOBILE */

@media(max-width:700px){

    .nv-directory-hero{
        padding:
            27px
            20px !important;

        border-radius:18px;
    }

    .nv-tools-search-panel{
        align-items:stretch;

        flex-direction:column;
    }

    .nv-tools-search-meta{
        justify-content:flex-start;

        padding:
            0
            5px
            3px;
    }

    .nv-directory-section{
        padding:14px;
    }

}


/* =========================================================
   LANGUAGE MENU — AUTO CLOSE VISUAL V1
   ========================================================= */

.nv-lang-menu .nv-lang-dropdown{
    transition:
        opacity .12s ease,
        transform .12s ease;
}


/* =========================================================
   NUVATOOLS — CATEGORIES DIRECTORY V2
   ========================================================= */

.nv-directory-page
.nv-directory-categories-grid{
    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;
}


/* CARTE */

.nv-directory-category-card{
    position:relative;

    min-height:190px !important;

    display:flex !important;
    flex-direction:column !important;

    padding:
        20px !important;

    border:
        1px solid
        var(--nf-line) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            transparent
        ),
        var(--nf-surface) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}


/* ICONES */

.nv-directory-category-card
.nf-category-icon{
    width:46px !important;
    height:46px !important;

    margin-bottom:16px !important;

    border-radius:12px !important;
}

.nv-directory-category-card
.nf-category-icon svg{
    width:23px !important;
    height:23px !important;
}


/* TITRE */

.nv-directory-category-card strong{
    display:block;

    margin-bottom:6px;

    color:var(--nf-text) !important;

    font-size:16px !important;
    line-height:1.25 !important;

    letter-spacing:-.02em;
}


/* DESCRIPTION */

.nv-directory-category-card small{
    display:block;

    color:var(--nf-muted) !important;

    font-size:11px !important;
    line-height:1.55 !important;
}


/* COMPTEUR */

.nv-directory-category-count{
    margin-top:auto !important;

    padding-top:17px !important;

    display:flex !important;

    align-items:center;
    justify-content:space-between;

    color:var(--nf-purple) !important;

    font-size:11px !important;
    font-weight:750 !important;

    border-top:
        1px solid
        var(--nf-line);
}


/* PETITE FLECHE */

.nv-directory-category-count::after{
    content:"↗";

    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        rgba(99,78,235,.07);

    transition:
        transform .16s ease;
}


/* HOVER */

.nv-directory-category-card:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(98,76,242,.32) !important;

    box-shadow:
        0 16px 38px
        rgba(40,52,94,.075);
}

.nv-directory-category-card:hover
.nv-directory-category-count::after{
    transform:
        translate(2px,-2px);
}


/* HERO CATEGORIES */

.nv-directory-page
.nv-directory-hero{
    margin-bottom:26px !important;
}

.nv-directory-page
.nv-directory-hero h1{
    max-width:820px;
}


/* DARK */

html[data-theme="dark"]
.nv-directory-category-card{
    background:#101b30 !important;

    border-color:#263754 !important;
}

html[data-theme="dark"]
.nv-directory-category-count{
    border-color:#263754 !important;
}


/* RESPONSIVE */

@media(max-width:1100px){

    .nv-directory-page
    .nv-directory-categories-grid{
        grid-template-columns:
            repeat(2,1fr) !important;
    }
}

@media(max-width:650px){

    .nv-directory-page
    .nv-directory-categories-grid{
        grid-template-columns:
            1fr !important;
    }

    .nv-directory-category-card{
        min-height:165px !important;
    }
}


/* =========================================================
   NUVATOOLS_HEADER_SEARCH_FORM_V1
   ========================================================= */

.nv-header-search-form {
    margin: 0;
}

.nv-header-search-input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.nv-header-search-input::placeholder {
    color: inherit;
    opacity: .72;
}

.nv-header-search-input::-webkit-search-cancel-button {
    cursor: pointer;
}