/* ==========================================================================
   Tools Directory — ri-tools-* / ri-tool-* namespace
   Matches reference HTML: /Users/vico/Documents/reference-html/repereia-tools-directory-reference.html
   ========================================================================== */

/* ── Outer wrapper ──────────────────────────────────────────────────────────── */
.ri-tools-directory {
    padding: 30px 0 22px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.ri-tools-crumb {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 20px;
}
.ri-tools-crumb a {
    color: #64748b;
    text-decoration: none;
}
.ri-tools-crumb a:hover { color: var(--ri-blue); }
.ri-tools-crumb b {
    color: var(--ri-blue);
    font-weight: 700;
}

/* ── Page grid ──────────────────────────────────────────────────────────────── */
.ri-tools-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: stretch;
}

/* ── Main column ────────────────────────────────────────────────────────────── */
.ri-tools-main {
    min-width: 0;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.ri-tools-hero {
    position: relative;
    padding-right: 250px;
    min-height: 170px;
}
.ri-tools-hero h1 {
    font-size: 34px;
    line-height: 1.05;
    margin: 0 0 15px;
    letter-spacing: -1px;
    color: #020b1c;
}
.ri-tools-hero p {
    font-size: 14px;
    color: #52617d;
    line-height: 1.55;
    max-width: 620px;
    margin: 0;
}

/* Hero decorative art */
.ri-tools-hero__art {
    position: absolute;
    right: 5px;
    top: -18px;
    width: 220px;
    height: 150px;
    pointer-events: none;
}

/* Orb */
.ri-tools-hero__orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #eef1ff 0, #f8f9ff 62%, transparent 63%);
}

/* Mini cards */
.ri-tools-hero__mini-card {
    position: absolute;
    left: 18px;
    width: 175px;
    height: 58px;
    border: 1px solid #e1e6f1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(37, 57, 107, 0.08);
}
.ri-tools-hero__mini-card--a { top: 22px; }
.ri-tools-hero__mini-card--b { top: 88px; }

/* Lines inside mini cards */
.ri-tools-hero__line {
    height: 5px;
    border-radius: 4px;
    background: #e8ebf6;
    margin: 13px 14px;
}
.ri-tools-hero__line--short { width: 38%; }
.ri-tools-hero__line--mid   { width: 60%; }

/* AI badge */
.ri-tools-hero__ai-badge {
    position: absolute;
    right: 0;
    top: 17px;
    background: linear-gradient(135deg, #5632ff, #395eff);
    color: #fff;
    font-weight: 900;
    font-size: 25px;
    border-radius: 7px;
    padding: 5px 7px;
    line-height: 1;
}

/* Magnifier */
.ri-tools-hero__mag {
    position: absolute;
    left: 98px;
    top: 74px;
    width: 48px;
    height: 48px;
    border: 6px solid #3e51ff;
    border-radius: 50%;
}
.ri-tools-hero__mag::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 6px;
    background: #3e51ff;
    transform: rotate(45deg);
    right: -28px;
    bottom: -12px;
    border-radius: 5px;
}

/* ── Search form ────────────────────────────────────────────────────────────── */
.ri-tools-search-form {
    margin-top: 20px;
}

/* Search bar */
.ri-tools-search {
    height: 54px;
    border: 1px solid #dfe4ef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #fff;
    gap: 10px;
}
.ri-tools-search svg {
    flex: 0 0 18px;
    color: #8899bb;
}
.ri-tools-search input {
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 13px;
    min-width: 0;
    color: #071126;
    background: transparent;
}
.ri-tools-search input::placeholder {
    color: #9aabbf;
}

/* ── Filter selects row ─────────────────────────────────────────────────────── */
.ri-tools-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* Single filter wrapper */
.ri-tools-filter {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.ri-tools-filter__label {
    display: block;
    color: #7a87a1;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    pointer-events: none;
    position: absolute;
    top: 9px;
    left: 13px;
    z-index: 1;
}

.ri-tools-filter select {
    min-width: 150px;
    height: 56px;
    border: 1px solid #dfe4ef;
    border-radius: 8px;
    background: #fff;
    padding: 20px 36px 8px 13px;
    font-size: 12px;
    font-weight: 500;
    color: #31405f;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a87a1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    line-height: 1;
}
.ri-tools-filter select:focus {
    outline: 2px solid #5945ff;
    outline-offset: 1px;
}

/* ── Quick filter chips ─────────────────────────────────────────────────────── */
.ri-tools-quick-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.ri-tools-quick-filter {
    padding: 8px 15px;
    border-radius: 16px;
    background: #f5f7fb;
    color: #43516f;
    font-size: 11px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.ri-tools-quick-filter:hover {
    background: #eef0f9;
    color: #31405f;
}
.ri-tools-quick-filter--active {
    border-color: #5945ff;
    color: #4738ff;
    background: #fff;
}

/* ── Ad placeholder 970×90 ──────────────────────────────────────────────────── */
.ri-tools-adwide {
    height: 96px;
    margin: 22px 0;
    background: linear-gradient(135deg, #f9faff, #f2f4ff);
    border: 1px solid #e9edf7;
    border-radius: 10px;
    color: #193c98;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
}
.ri-tools-adwide::after {
    content: "PUBLICITÉ";
    position: absolute;
    right: 18px;
    top: 14px;
    border: 1px solid #bac6ed;
    border-radius: 10px;
    padding: 3px 7px;
    font-size: 8px;
    color: #193c98;
}
.ri-tools-adwide b {
    font-size: 20px;
    font-weight: 500;
    display: block;
}
.ri-tools-adwide span {
    display: block;
    font-size: 13px;
    margin-top: 7px;
}

/* ── Results head (count + sort) ────────────────────────────────────────────── */
.ri-tools-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 12px;
}
.ri-tools-results-head b {
    font-size: 13px;
    font-weight: 700;
    color: #020b1c;
}
.ri-tools-sort {
    border: 1px solid #dfe4ef;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 11px;
    background: #fff;
    cursor: pointer;
    color: #31405f;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a87a1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.ri-tools-sort:focus {
    outline: 2px solid #5945ff;
    outline-offset: 1px;
}

/* ── Tools grid ─────────────────────────────────────────────────────────────── */
.ri-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ── Tool card ──────────────────────────────────────────────────────────────── */
.ri-tool-card {
    border: 1px solid #e2e7f0;
    border-radius: 10px;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ri-tool-card:hover {
    border-color: #b8c7e8;
    box-shadow: 0 4px 18px rgba(37, 57, 107, 0.09);
}

.ri-tool-card__inner {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Card head */
.ri-tool-card__head {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
}

/* Logo */
.ri-tool-card__logo {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    background: linear-gradient(135deg, #36b8aa, #1b8f9a);
}
.ri-tool-card__logo--img {
    background: #fff;
    padding: 6px;
    border: 1px solid rgba(0,0,0,.07);
}
.ri-tool-card__logo--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ri-tool-card__logo--initials {
    font-weight: 900;
    font-size: 22px;
    color: #fff;
}
.ri-tool-card__logo--brand-svg {
    background: #f8f9ff;
    border: 1px solid rgba(0,0,0,.07);
    padding: 6px;
}
.ri-tool-card__logo--brand-svg svg {
    width: 38px;
    height: 38px;
    color: #1a2238;
}
.ri-tool-card__logo-initials {
    font-weight: 900;
    font-size: 22px;
    color: #fff;
    line-height: 1;
    display: block;
    text-align: center;
}

/* Meta */
.ri-tool-card__meta {
    min-width: 0;
}
.ri-tool-card__name {
    font-size: 16px;
    margin: 0;
    color: #020b1c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.ri-tool-card__cat {
    font-size: 10px;
    color: #71809b;
    display: block;
    margin-top: 3px;
}

/* Rating — only shown when ri_tool_rating > 0 */
.ri-tool-card__rating {
    margin-top: 14px;
    font-size: 12px;
    color: #475570;
    display: flex;
    align-items: center;
    gap: 3px;
}
.ri-tool-card__rating span[aria-hidden] {
    color: #ffae00;
}

/* Description */
.ri-tool-card__desc {
    font-size: 12px;
    line-height: 1.5;
    color: #475570;
    margin: 12px 0;
    flex: 1;
}

/* Feature tags */
.ri-tool-card__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ri-tool-card__tag {
    font-size: 10px;
    color: #3656bb;
    background: #f4f6ff;
    border-radius: 14px;
    padding: 6px 10px;
    line-height: 1;
}

/* Bottom row */
.ri-tool-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    font-size: 11px;
}
.ri-tool-card__pricing {
    color: #43516f;
    font-size: 10px;
}
.ri-tool-card__cta {
    color: #2850ef;
    font-weight: 700;
    font-size: 11px;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.ri-tools-empty {
    padding: 40px 20px;
    text-align: center;
    color: #52617d;
    font-size: 14px;
}
.ri-tools-empty a {
    color: #2747ff;
    font-weight: 700;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */
/* ── Load-more button ───────────────────────────────────────────────────────── */
.ri-tools-more {
    display: block;
    width: 100%;
    margin: 28px 0 0;
    padding: 13px 20px;
    background: #fff;
    border: 1.5px solid #dce2ee;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #2747ff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.ri-tools-more:hover:not(:disabled) {
    background: #f5f7ff;
    border-color: #b8c4f0;
}
.ri-tools-more:disabled {
    color: #7b87a0;
    cursor: default;
}

/* ── CTA band — full-width below the page grid ──────────────────────────────── */
.ri-tools-cta {
    margin-top: 28px;
    background: linear-gradient(135deg, #061633, #020b1c);
    border-radius: 12px;
    color: #fff;
    min-height: 190px;
    padding: 34px 330px 34px 34px;
    position: relative;
    overflow: hidden;
}
.ri-tools-cta h3 {
    font-size: 20px;
    margin: 0 0 9px;
    color: #fff;
}
.ri-tools-cta p {
    font-size: 12px;
    color: #d8e0f0;
    margin: 0;
}
.ri-tools-cta a {
    display: inline-block;
    margin-top: 20px;
    background: linear-gradient(90deg, #5932ff, #2f62ff);
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.ri-tools-cta a:hover {
    opacity: 0.9;
}

/* CTA illustration */
.ri-tools-cta__visual {
    position: absolute;
    right: 28px;
    top: 20px;
    width: 250px;
    height: 150px;
    pointer-events: none;
}
.ri-tools-cta__screen {
    position: absolute;
    right: 0;
    top: 16px;
    width: 180px;
    height: 102px;
    border-radius: 9px;
    border: 1px solid #243b75;
    background: linear-gradient(135deg, #0a2045, #151c5b);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.ri-tools-cta__screen::before,
.ri-tools-cta__screen::after {
    content: "";
    position: absolute;
    left: 48px;
    height: 7px;
    border-radius: 6px;
    background: #344da2;
}
.ri-tools-cta__screen::before {
    top: 30px;
    width: 92px;
}
.ri-tools-cta__screen::after {
    top: 51px;
    width: 68px;
}
.ri-tools-cta__lens {
    position: absolute;
    left: 27px;
    top: 57px;
    width: 67px;
    height: 67px;
    border: 9px solid #514cff;
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(79, 74, 255, 0.3);
}
.ri-tools-cta__lens::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid #735cff;
    border-radius: 50%;
}
.ri-tools-cta__lens::after {
    content: "";
    position: absolute;
    width: 53px;
    height: 10px;
    border-radius: 8px;
    background: linear-gradient(90deg, #524cff, #6842ff);
    transform: rotate(-45deg);
    left: -38px;
    bottom: -20px;
}
.ri-tools-cta__spark {
    position: absolute;
    right: -3px;
    top: 30px;
    color: #6b55ff;
    font-size: 25px;
    line-height: 1;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.ri-tools-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── "Outils à découvrir" panel ─────────────────────────────────────────────── */
.ri-tools-discover {
    border: 1px solid #e2e7f0;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
}
.ri-tools-discover h3 {
    font-size: 17px;
    margin: 0 0 18px;
    color: #020b1c;
}

/* Discover row — matches reference: 28px num | 36px logo | 1fr name | auto score */
.ri-tools-discover__row {
    display: grid;
    grid-template-columns: 28px 36px 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 13px 0;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.ri-tools-discover__row:hover b {
    color: #2747ff;
}

/* Score column (4th) — only rendered when ri_tool_rating > 0 */
.ri-tools-discover__score {
    font-size: 11px;
    font-weight: 700;
    color: #31405f;
    white-space: nowrap;
}
.ri-tools-discover__score::before {
    content: "★ ";
    color: #ffae00;
}
.ri-tools-discover__num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f4fa;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #52617d;
    font-weight: 600;
}

/* Discover logo: override size — works on both <div> and <span> */
.ri-tools-discover__row .ri-tool-card__logo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    font-size: 16px;
}
.ri-tools-discover__row .ri-tool-card__logo-initials {
    font-size: 14px;
}

/* Discover info — <span> blockified by grid context */
.ri-tools-discover__info {
    display: block;
    min-width: 0;
    overflow: hidden;
}
.ri-tools-discover__info b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #020b1c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.1s;
}
.ri-tools-discover__info small {
    display: block;
    font-size: 10px;
    color: #7b87a0;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Side link */
.ri-tools-side-link {
    display: block;
    text-align: center;
    color: #2647ff;
    font-size: 12px;
    font-weight: 700;
    margin-top: 15px;
    text-decoration: none;
}
.ri-tools-side-link:hover {
    text-decoration: underline;
}

/* ── Ad 300×250 ─────────────────────────────────────────────────────────────── */
.ri-tools-ad300 {
    height: 250px;
    background: linear-gradient(135deg, #f9faff, #f2f4ff);
    border: 1px solid #e9edf7;
    border-radius: 12px;
    color: #193c98;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
}
.ri-tools-ad300::after {
    content: "PUBLICITÉ";
    position: absolute;
    right: 18px;
    top: 14px;
    border: 1px solid #bac6ed;
    border-radius: 10px;
    padding: 3px 7px;
    font-size: 8px;
    color: #193c98;
}
.ri-tools-ad300 b {
    font-size: 16px;
    font-weight: 500;
    display: block;
}
.ri-tools-ad300 span {
    font-size: 12px;
    margin-top: 6px;
    color: #94a3b8;
    display: block;
}

/* ── Newsletter ─────────────────────────────────────────────────────────────── */
.ri-tools-newsletter {
    background: linear-gradient(135deg, #031027, #07152e);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
}
.ri-tools-newsletter h3 {
    font-size: 16px;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.4;
}
.ri-tools-newsletter p {
    font-size: 12px;
    color: #d7deed;
    margin: 0;
}
.ri-tools-newsletter__form {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}
.ri-tools-newsletter__form input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 5px;
    padding: 12px;
    font-size: 12px;
    color: #071126;
    background: #fff;
}
.ri-tools-newsletter__form input::placeholder {
    color: #9aabbf;
}
.ri-tools-newsletter__form button {
    border: 0;
    border-radius: 5px;
    padding: 0 14px;
    background: linear-gradient(90deg, #5a33ff, #2c62ff);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.ri-tools-newsletter__form button:hover {
    opacity: 0.9;
}

/* ── Feature filter panel ───────────────────────────────────────────────────── */
.ri-tools-feature-filter {
    border: 1px solid #e2e7f0;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
}
.ri-tools-feature-filter h3 {
    font-size: 17px;
    margin: 0 0 18px;
    color: #020b1c;
}

/* Feature row */
.ri-tools-feature-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f5;
    font-size: 12px;
    text-decoration: none;
    color: #071126;
}
.ri-tools-feature-link:last-of-type {
    border-bottom: 0;
}
.ri-tools-feature-link:hover {
    color: #2747ff;
}
.ri-tools-feature-link--active {
    color: #4738ff;
    font-weight: 700;
}

.ri-tools-feature-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ri-tools-feature-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #f3f5ff;
    color: #4056b8;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
}
.ri-tools-feature-icon svg {
    width: 13px;
    height: 13px;
}
.ri-tools-feature-count {
    color: #53617d;
    font-size: 11px;
}

/* ── Responsive: ≤1180px (intermediate: narrower CTA) ──────────────────────── */
@media (max-width: 1180px) and (min-width: 1001px) {
    .ri-tools-cta {
        padding-right: 245px;
    }
    .ri-tools-cta__visual {
        width: 190px;
        height: 125px;
        right: 18px;
        top: 30px;
        transform: scale(0.86);
        transform-origin: right center;
    }
}

/* ── Responsive: ≤1000px (sidebar stacks below, 2-col tool grid) ────────────── */
@media (max-width: 1000px) {
    .ri-tools-page-grid {
        grid-template-columns: 1fr;
    }
    .ri-tools-hero {
        padding-right: 0;
        min-height: 0;
    }
    .ri-tools-hero__art {
        display: none;
    }
    .ri-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ri-tools-cta {
        padding: 30px;
    }
    .ri-tools-cta__visual {
        display: none;
    }
}

/* ── Responsive: ≤620px (single col tool grid, horizontal chip scroll) ──────── */
@media (max-width: 620px) {
    .ri-tools-grid {
        grid-template-columns: 1fr;
    }
    .ri-tools-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .ri-tools-filter select {
        min-width: 0;
        width: 100%;
    }
    .ri-tools-quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ri-tools-quick-filters::-webkit-scrollbar {
        display: none;
    }
    .ri-tools-hero h1 {
        font-size: 28px;
    }
    .ri-tools-cta {
        padding: 26px 24px;
    }
}