.search-page-title {
            margin: var(--space-3) 0 var(--space-1);
            font-size: clamp(1.4rem, 4vw, 1.8rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .search-page-sub {
            margin: 0;
            color: var(--muted);
            font-size: 0.92rem;
        }

        .search-form {
            display: flex;
            margin-top: 0;
            background: var(--bg-paper);
            border: none;
            border-radius: 999px;
            padding: 5px 5px 5px 8px;
            transition: box-shadow 120ms;
        }
        .search-form:focus-within {
            box-shadow: 0 0 0 3px var(--violet-soft);
        }
        .search-form input[type="search"] {
            flex: 1;
            border: none;
            background: transparent;
            padding: 10px 14px;
            font-size: 16px;
            min-height: 44px;
            font-family: inherit;
            color: var(--ink);
        }
        .search-form input[type="search"]:focus { outline: none; box-shadow: none; }
        .search-form button {
            background: var(--ink);
            color: var(--bg);
            border: none;
            border-radius: 999px;
            padding: 0 20px;
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 500;
            cursor: pointer;
            min-height: 44px;
            letter-spacing: -0.01em;
        }
        .search-form button:hover { background: color-mix(in srgb, var(--ink) 88%, var(--violet)); }

        /* ========== Breadcrumb sous-catégories ========== */
        .search-crumb {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: var(--space-4);
            font-family: var(--font-mono);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--muted);
            text-decoration: none;
        }
        .search-crumb:hover { color: var(--violet); text-decoration: none; }
        .search-crumb svg { width: 12px; height: 12px; }

        /* ========== Tuiles catégorie (color saturé + couverture de livre en signature) ========== */
        .discover-section { margin-top: var(--space-5); }
        .discover-section__title {
            margin: 0 0 var(--space-3);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--ink);
        }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-2);
        }
        @media (min-width: 600px) {
            .category-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
        }
        @media (min-width: 900px) {
            .category-grid { grid-template-columns: repeat(4, 1fr); }
        }
        .category-tile {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            min-height: 120px;
            padding: 14px 14px 16px;
            background: var(--tile-color, var(--violet));
            color: white;
            border-radius: var(--radius);
            overflow: hidden;
            text-decoration: none;
            transition: transform 200ms;
            isolation: isolate;
        }
        .category-tile:hover {
            transform: translateY(-2px) scale(1.01);
            text-decoration: none;
            color: white;
        }
        /* Subtle gradient overlay pour donner de la profondeur (foncé en bas) */
        .category-tile::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(165deg, transparent 35%, rgba(0,0,0,0.18) 100%);
            pointer-events: none;
            z-index: 0;
        }
        .category-tile__badge {
            position: relative;
            z-index: 1;
            display: inline-block;
            margin-bottom: 6px;
            font-family: var(--font-mono);
            font-size: 0.58rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: rgba(255, 255, 255, 0.78);
            font-weight: 500;
        }
        .category-tile__name {
            position: relative;
            z-index: 1;
            font-weight: 600;
            font-size: 1.05rem;
            letter-spacing: -0.015em;
            line-height: 1.2;
            color: white;
        }
        /* Couverture de livre en signature, en biais en bas-droite */
        .category-tile__cover {
            position: absolute;
            bottom: -10px;
            right: -8px;
            width: 62px;
            height: auto;
            aspect-ratio: 2/3;
            object-fit: cover;
            border-radius: var(--radius-sm);
            transform: rotate(14deg);
            box-shadow: var(--shadow-lg);
            z-index: 0;
            pointer-events: none;
        }
        /* "Pour vous" : pas de couverture mais une étoile en signature */
        .category-tile__sparkle {
            position: absolute;
            bottom: 8px;
            right: 8px;
            color: rgba(255, 255, 255, 0.55);
            z-index: 0;
            pointer-events: none;
        }
        .category-tile__sparkle svg { width: 28px; height: 28px; }

        .subcat-empty {
            margin-top: var(--space-4);
            padding: var(--space-5) var(--space-4);
            background: var(--bg-paper);
            border: 1px dashed var(--border-strong);
            border-radius: var(--radius);
            text-align: center;
        }
        .subcat-empty__title {
            margin: 0;
            font-weight: 600;
            font-size: 1rem;
            color: var(--ink);
        }
        .subcat-empty__hint {
            margin: 8px 0 0;
            font-size: 0.9rem;
            color: var(--muted);
        }

        /* ========== Résultats de recherche ========== */
        .result-list {
            list-style: none;
            padding: 0;
            margin: var(--space-5) 0 0;
            display: grid;
            gap: var(--space-4);
        }
        .result-card {
            display: grid;
            grid-template-columns: 64px 1fr;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--bg-elevated);
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            align-items: start;
            text-decoration: none;
            color: inherit;
            transition: transform 200ms, box-shadow 200ms;
        }
        .result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
        .result-card__cover {
            width: 64px;
            aspect-ratio: 2/3;
            object-fit: cover;
            border-radius: var(--radius);
            background: var(--bg-paper);
            box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--cover-ring);
        }
        .result-card__cover--placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--subtle);
            font-size: 1.4rem;
        }
        .result-card__title {
            font-weight: 500;
            font-size: 0.98rem;
            line-height: 1.25;
            letter-spacing: -0.015em;
            margin: 0 0 4px;
        }
        .result-card__subtitle {
            font-size: 0.85rem;
            font-weight: 400;
            color: var(--muted);
            line-height: 1.3;
            margin: 0 0 4px;
            letter-spacing: -0.005em;
        }
        .result-card__meta {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            color: var(--muted);
            letter-spacing: 0.04em;
        }
        .result-card__meta + .result-card__meta { margin-top: 2px; }
        @media (min-width: 600px) {
            .result-card { grid-template-columns: 80px 1fr; }
            .result-card__cover { width: 80px; }
        }

        /* ========== Sections de résultats (Catalogue / À découvrir) ========== */
        .search-section {
            margin-top: var(--space-6);
        }
        .search-section:first-of-type {
            margin-top: var(--space-5);
        }
        .search-section__title {
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: -0.005em;
            color: var(--muted);
            margin: 0 0 var(--space-3);
        }
        .search-section .result-list {
            margin-top: 0;
        }


        /* ========== Sélecteur de type (Livres / Auteurs / Lecteurs) ========== */
        /* Segmented control compact sous la barre, toujours visible : on choisit
           le type AVANT de taper (évite un appel Google Books inutile). Pastille
           blanche qui glisse sous le segment actif (position pilotée par le
           controller Stimulus). Vrais radios = accessible clavier + sans-JS. */
        .search-scope {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 5.5rem); /* 3 segments égaux, calés sur le plus long label */
            width: fit-content;                        /* le bloc hugge son contenu (plus étroit que la barre) */
            margin: var(--space-4) auto var(--space-2);  /* centré horizontalement */
            padding: 3px;
            background: var(--bg-paper);
            border: 1px solid var(--border);
            border-radius: 999px;
        }
        /* Pastille blanche qui slide entre les segments */
        .search-scope__thumb {
            position: absolute;
            top: 3px;
            bottom: 3px;
            left: 3px;
            width: calc((100% - 6px) / 3);
            background: #fff;
            border-radius: 999px;
            box-shadow: var(--shadow-sm), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
            transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            z-index: 0;
        }
        @media (prefers-reduced-motion: reduce) {
            .search-scope__thumb { transition: none; }
        }
        .search-scope__seg {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            margin: 0;
            padding: 0;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted);
            cursor: pointer;
            user-select: none;
            transition: color 160ms ease;
        }
        /* Compense l'espace de fin (letter-spacing) -> texte vraiment centré */
        .search-scope__seg span { text-indent: 0.06em; }
        .search-scope__seg:hover { color: var(--ink); }
        /* Radio masqué visuellement mais accessible (clavier + lecteurs d'écran) */
        .search-scope__seg input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }
        /* Segment actif : texte foncé sur la pastille blanche (lisible clair ET sombre) */
        .search-scope__seg.is-active,
        .search-scope__seg.is-active:hover {
            color: #15151a;
        }
        /* Focus clavier visible : anneau violet autour de la pastille */
        .search-scope:has(input:focus-visible) .search-scope__thumb {
            box-shadow: var(--shadow-sm), 0 0 0 2px var(--violet);
        }

        /* ========== Variantes result-card pour user/author ========== */
        .result-card__cover--round {
            border-radius: 50%;
            width: 56px;
            height: 56px;
            object-fit: cover;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: var(--muted);
            background: var(--bg-paper);
        }
        .result-card--user {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
        }
        .result-card__link {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: var(--space-3);
            align-items: center;
            text-decoration: none;
            color: inherit;
            flex: 1;
            min-width: 0;
        }
        .result-card__bio {
            font-size: 0.82rem;
            color: var(--muted);
            margin: 4px 0 0;
            line-height: 1.4;
        }
        .result-card__action {
            flex-shrink: 0;
        }

        /* ============================================================
         * Layout desktop (≥ 1024px) — résultats en grille 2-3 colonnes
         * ============================================================ */

        @media (min-width: 1024px) {
            /* Élargit .app-main sur la page recherche (autres pages
               restent en 760px). */
            body.page-search .app-main {
                max-width: 1100px;
            }

            /* Grille 2 colonnes pour les résultats. */
            .result-list {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-3) var(--space-4);
            }

            /* Cards un peu plus généreuses sur desktop pour respirer. */
            .result-card {
                grid-template-columns: 88px 1fr;
                padding: var(--space-3) var(--space-4);
            }
            .result-card__cover {
                width: 88px;
            }
            .result-card--user .result-card__cover,
            .result-card__cover--round {
                width: 72px;
                height: 72px;
            }
        }

        /* Très grand écran (≥1400px) : 3 colonnes pour exploiter l'espace. */
        @media (min-width: 1400px) {
            body.page-search .app-main {
                max-width: 1380px;
            }
            .result-list {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ========== Autocomplétion (menu suggestions) ========== */
        .search-form-wrap { position: relative; }
        .search-suggest__menu {
            position: absolute;
            left: 0; right: 0;
            top: calc(100% + 4px);
            z-index: 30;
            background: var(--bg-elevated);
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            overflow: hidden auto;
            max-height: 60vh;
        }
        .search-suggest__item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            min-height: 44px;
            padding: 8px var(--space-3);
            text-decoration: none;
            color: var(--ink);
            border-bottom: 1px solid var(--border);
        }
        .search-suggest__item:last-child { border-bottom: none; }
        .search-suggest__item.is-active,
        .search-suggest__item:active { background: var(--violet-soft); }
        .search-suggest__cover {
            flex: 0 0 auto;
            width: 34px; height: 51px;
            object-fit: cover;
            border-radius: var(--radius-sm);
            background: var(--bg-paper);
        }
        .search-suggest__cover--round { height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--muted); }
        .search-suggest__cover--ph { display: inline-block; }
        .search-suggest__text { display: flex; flex-direction: column; min-width: 0; }
        .search-suggest__title { font-size: 0.95rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .search-suggest__meta { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }