/* =========================================================
THE CAVE PROD — DOWNLOAD.HTML
Catalogue des logiciels — liste tableau compacte
========================================================= */

.tools-hero{
    position:relative;
    min-height:440px;
    padding:155px 0 70px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 20%,rgba(200,122,61,.18),transparent 33%),
        radial-gradient(circle at 85% 70%,rgba(246,201,0,.08),transparent 30%),
        linear-gradient(135deg,#080808,#101010 55%,#090909);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.tools-hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.12;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,#000,transparent);
}

.tools-hero-content{position:relative;z-index:2}

.tools-kicker,.section-label{
    display:inline-block;
    color:#d88743;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.tools-hero h1{
    max-width:900px;
    margin:18px 0 22px;
    font-size:clamp(3.6rem,8vw,7rem);
    line-height:.88;
}

.tools-lead{
    max-width:820px;
    font-size:clamp(1rem,2vw,1.25rem);
    line-height:1.7;
}

.tools-values{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.tools-values span{
    padding:8px 13px;
    border:1px solid rgba(216,135,67,.32);
    border-radius:999px;
    background:rgba(216,135,67,.08);
    color:#f2c49c;
    font-size:.86rem;
    font-weight:700;
}

.tools-list{
    padding:70px 0 90px;
    background:#0a0a0a;
}

.tools-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.tools-section-head h2{margin:8px 0 0}
.tools-status{color:#777;font-size:.9rem}

/* Le conteneur historique #toolsGrid est conservé pour ne changer que le nécessaire. */
.tools-grid{display:block}

.tools-table-wrap{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#111;
}

.tools-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}

.tools-table th{
    padding:14px 16px;
    background:#171717;
    border-bottom:1px solid rgba(255,255,255,.1);
    color:#777;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-align:left;
    text-transform:uppercase;
}

.tools-table td{
    padding:18px 16px;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#b8b8b8;
    vertical-align:middle;
}

.tools-table tbody tr:last-child td{border-bottom:0}

.tools-table tbody tr{
    transition:background .18s ease;
}

.tools-table tbody tr:hover{
    background:rgba(216,135,67,.045);
}

.tool-name-link{
    color:#fff;
    font-family:"Bebas Neue",sans-serif;
    font-size:1.75rem;
    line-height:1;
    white-space:nowrap;
}

.tool-name-link:hover{color:#f2c49c}

.tool-type{
    display:inline-flex;
    padding:6px 9px;
    border-radius:999px;
    background:#202020;
    color:#d88743;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}

.tool-row-hook{
    display:block;
    margin-bottom:4px;
    color:#eee;
    font-size:.9rem;
    line-height:1.35;
}

.tool-row-description{
    display:block;
    max-width:560px;
    color:#8f8f8f;
    font-size:.82rem;
    line-height:1.45;
}

.tool-stat-cell{
    font-size:.8rem;
    white-space:nowrap;
}

.tool-stat-cell span+span{margin-left:7px}
.stat-positive{color:#ddd}
.tool-stat-empty{color:#555}

.tool-action-cell{text-align:right}

.tool-details{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid rgba(216,135,67,.28);
    border-radius:9px;
    color:#f2c49c;
    font-size:.78rem;
    font-weight:800;
    white-space:nowrap;
}

.tool-details:hover{
    background:rgba(216,135,67,.09);
    border-color:rgba(216,135,67,.5);
}

.tools-empty{
    padding:35px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:#131313;
    color:#aaa;
    text-align:center;
}

.tools-note{
    padding:65px 0;
    background:#101010;
}

.tools-note-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    align-items:start;
    padding:30px;
    border:1px solid rgba(216,135,67,.26);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(216,135,67,.09),rgba(255,255,255,.02));
}

.note-icon{font-size:2.2rem}
.tools-note-card h2{margin:0 0 8px;font-size:2.1rem}
.tools-note-card p{margin:0;line-height:1.7}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Mobile : le tableau devient une liste de fiches compactes. */
@media(max-width:850px){
    .tools-hero{
        min-height:auto;
        padding:140px 0 65px;
    }

    .tools-section-head{
        align-items:start;
        flex-direction:column;
    }

    .tools-table-wrap{
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
    }

    .tools-table,.tools-table tbody,.tools-table tr,.tools-table td{
        display:block;
        width:100%;
    }

    .tools-table thead{display:none}

    .tools-table tr{
        margin-bottom:14px;
        padding:18px;
        border:1px solid rgba(255,255,255,.09);
        border-radius:15px;
        background:#141414;
    }

    .tools-table td{
        display:grid;
        grid-template-columns:120px minmax(0,1fr);
        gap:12px;
        padding:8px 0;
        border:0;
        white-space:normal;
    }

    .tools-table td::before{
        content:attr(data-label);
        color:#666;
        font-size:.68rem;
        font-weight:800;
        letter-spacing:.06em;
        text-transform:uppercase;
    }

    .tool-action-cell{
        display:block!important;
        padding-top:14px!important;
        text-align:left;
    }

    .tool-action-cell::before{display:none}

    .tool-details{width:100%;justify-content:space-between}
    .tool-name-link{white-space:normal}
}

@media(max-width:520px){
    .tools-table td{
        grid-template-columns:1fr;
        gap:4px;
    }

    .tools-note-card{grid-template-columns:1fr}
}