/* OnlyPDF — thème startup innovante, lisible et sans éléments décoratifs superflus */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #66bcb4;
    --primary-dark: #3f948b;
    --primary-soft: #effaf8;
    --ink: #111827;
    --ink-soft: #4b5563;
    --muted: #7b8492;
    --bg: #f8faf9;
    --surface: #ffffff;
    --border: #e5e9e8;
    --border-strong: #cbd8d6;
    --lavender: #f3effb;
    --peach: #fff5ec;
    --blue-soft: #eff5fb;
    --green-soft: #eef8f2;
    --shadow: 0 10px 30px rgba(17, 24, 39, .055);
    --radius: 16px;
    --transition: 180ms ease;
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }

.container {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 0 32px;
}

/* Navigation : simple, inspirée d’une jeune SaaS */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, 100%);
    height: 66px;
    margin: 0 auto;
    padding: 0 32px;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.04em;
    text-decoration: none;
}

.nav__logo i { color: var(--primary-dark); font-size: 20px; }
.nav__logo:hover { color: var(--primary-dark); }
.nav__actions, .nav__translate { display: flex; align-items: center; }
.nav__translate { position: relative; }

.nav__icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.nav__icon-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }

.lang-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    min-width: 180px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu__item { display: flex; width: 100%; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); cursor: pointer; font: 500 13px inherit; text-align: left; }
.lang-menu__item:hover { background: var(--primary-soft); color: var(--ink); }
.lang-menu__item.active { color: var(--primary-dark); font-weight: 700; }
.nav__icon-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.lang-menu__item[aria-pressed="true"] { font-weight: 700; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-menu__item { text-align: right; }
html[dir="rtl"] .nav__back, html[dir="rtl"] .nav__actions { direction: rtl; }

/* Hero : message direct et compréhensible */
.hero {
    padding: 76px 32px 66px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.hero__content { width: min(760px, 100%); margin: 0 auto; text-align: center; }
.hero__title { margin-bottom: 16px; color: var(--ink); font-size: clamp(38px, 6vw, 64px); font-weight: 760; letter-spacing: -.065em; line-height: 1.05; }
.hero__title-line, .hero__title-brand { display: block; }
.hero__title-brand { color: var(--primary-dark); }
.hero__title-brand::after { display: none; }
.hero__subtitle { max-width: 570px; margin: 0 auto; color: var(--muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.6; }
.hero__decoration { display: none; }

/* Section de découverte */
.tools-section { padding: 50px 32px 82px; background: var(--bg); }
.tools-section__header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tools-section__title { color: var(--ink); font-size: 27px; font-weight: 720; letter-spacing: -.045em; }
.tools-section__count { color: var(--muted); font-size: 13px; }

/* Navigation de catégories : onglets plats, sans pilules */
.filters { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.filter { position: relative; padding: 0 0 13px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 600 13px inherit; }
.filter::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.filter:hover { color: var(--ink); }
.filter--active, .filter--active:hover { color: var(--primary-dark); }
.filter--active::after { background: var(--primary); }

/* Grille plus lisible : moins de blocs, plus d’espace */
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.tool-card {
    display: flex;
    align-items: center;
    min-height: 102px;
    gap: 15px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(17,24,39,.025);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.tool-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.tool-card:active { transform: translateY(0); }

.tool-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 17px;
    transition: background var(--transition), color var(--transition);
}

.tool-card:hover .tool-card__icon { background: var(--primary); color: #fff; }
.tool-card__svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-card__icon--red { color: #b9787d; background: #fcf1f2; }
.tool-card__icon--blue { color: #668bb0; background: var(--blue-soft); }
.tool-card__icon--green { color: #619a7b; background: var(--green-soft); }
.tool-card__icon--orange, .tool-card__icon--yellow { color: #b99468; background: var(--peach); }
.tool-card__icon--purple { color: #917dad; background: var(--lavender); }
.tool-card__icon--teal, .tool-card__icon--menthe { color: #5b9b96; background: var(--primary-soft); }
.tool-card[data-category="ai"] { background: var(--surface); }
.tool-card__info { min-width: 0; flex: 1; }
.tool-card__name { margin-bottom: 5px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 680; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.tool-card__desc { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.tool-card__arrow { flex-shrink: 0; color: #c4cbc9; font-size: 12px; transition: color var(--transition), transform var(--transition); }
.tool-card:hover .tool-card__arrow { color: var(--primary-dark); transform: translateX(3px); }
.tool-card--coming-soon { cursor: pointer; border-style: dashed; background: linear-gradient(135deg, #fff, #f5faf8); }
.tool-card--coming-soon:hover { border-color: #b8d8d0; box-shadow: 0 12px 28px rgba(39, 126, 117, .11); }
.tool-card--coming-soon .tool-card__icon { background: #fff4dc; color: #c38a31; }
.tool-card--coming-soon:hover .tool-card__icon { background: #fff0ce; color: #b87815; }
.tool-card--coming-soon .tool-card__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; white-space: normal; }
.tool-card__status { display: inline-flex; flex-shrink: 0; align-items: center; border: 1px solid #f1d7a6; border-radius: 999px; padding: 3px 7px; background: #fff8ea; color: #aa7626; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tool-card--coming-soon .tool-card__arrow { color: #cf9a4a; }
.tool-card--coming-soon:hover .tool-card__arrow { color: #b87815; transform: translateX(2px); }

.footer { padding: 34px 32px; border-top: 1px solid var(--border); background: var(--bg); text-align: center; }
.footer__text { color: var(--muted); font-size: 12px; }

@media (max-width: 1024px) {
    .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .nav { padding: 0 18px; }
    .hero { padding: 56px 20px 48px; }
    .hero__title { font-size: 36px; }
    .tools-section { padding: 36px 18px 56px; }
    .tools-section__header { align-items: flex-start; flex-direction: column; gap: 6px; }
    .filters { gap: 20px; overflow-x: auto; flex-wrap: nowrap; padding-top: 2px; scrollbar-width: none; }
    .filters::-webkit-scrollbar { display: none; }
    .filter { flex: 0 0 auto; }
    .tools-grid { grid-template-columns: 1fr; gap: 11px; }
    .tool-card { min-height: 78px; padding: 15px; }
    .tool-card__icon { width: 41px; height: 41px; flex-basis: 41px; }
}

@media (max-width: 420px) {
    .hero__title { font-size: 31px; }
    .hero__subtitle { font-size: 14px; }
    .tool-card__desc { font-size: 11px; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border-radius: 99px; background: #d7e0de; }
::-webkit-scrollbar-thumb:hover { background: #b9cbc8; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ==================== ERGONOMIE PREMIUM — AJUSTEMENT DISCRET ==================== */
:root {
    --bg: #f5f8f7;
    --muted: #68747d;
    --border: #dfe8e5;
    --border-strong: #b9d0cb;
    --shadow: 0 12px 30px rgba(17, 24, 39, .075);
}

.header { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 10px rgba(17, 24, 39, .035); }
.nav__icon-btn { box-shadow: 0 1px 3px rgba(17, 24, 39, .035); }
.tool-card { box-shadow: 0 3px 10px rgba(17, 24, 39, .035); }
.tool-card:hover { box-shadow: 0 12px 28px rgba(17, 24, 39, .085); }
.tool-card__arrow { color: #9eaeaa; }
.filter:focus-visible, .nav__icon-btn:focus-visible, .lang-menu__item:focus-visible, .tool-card:focus-visible, a:focus-visible {
    outline: 3px solid rgba(63, 148, 139, .28);
    outline-offset: 3px;
}