/* Rokapi Dashboard - Modern UI */

/* Public Sans (corps) — vendorisé en local, aucun CDN au runtime */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/public-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/public-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/public-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/public-sans-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/public-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/public-sans-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/public-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/public-sans-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono (labels, valeurs numériques, URLs, codes HTTP, dates) — vendorisé en local */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Mono — vendorisée comme les autres.
   Elle arrivait par un `@import url('https://fonts.googleapis.com/…')` posé en
   tête de crawl-panel.css : une dépendance à un CDN tiers pour les polices, et
   un @import qui sérialise le chargement (le navigateur doit d'abord recevoir
   crawl-panel.css pour découvrir qu'il lui faut une autre feuille, puis cette
   feuille pour découvrir les fichiers). L'import demandait quatre graisses ;
   une seule est utilisée, par `.notif-item-id`. */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/roboto-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/roboto-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Tokens — refonte de la coquille (2026-08). Remplacement global des couleurs et
 * typographies (turquoise/system-ui → vert Rokapi/Public Sans+IBM Plex Mono), issu
 * de design_handoff_scouter_shell/. Voir documentation/Rokapi/Design System/.
 */
:root {
    /* Marque / accent (crawl) */
    --primary-color: #14A98B;
    --primary-dark: #0B7C63;
    /* Cran EN DESSOUS de --primary-dark, pour le SURVOL des boutons pleins qui
       partent déjà du vert foncé (le vert clair ne porte pas de texte blanc au
       seuil AA, voir la note de .share-popover-picker-btn). Un survol assombrit
       toujours : éclaircir rapprocherait le fond du blanc du libellé.
       Contraste du blanc sur ce fond : 7,6:1 (contre 5,15:1 au repos). */
    --primary-darker: #085F4B;
    --primary-light: #0E9E7E;
    --primary-on: #052A22;
    --primary-bg: #E9F7F3;

    /* Search Console / info */
    --secondary-color: #3E62C8;
    --secondary-bg: #E9EFFB;
    --info: #3E62C8;

    /* IA / assistant */
    --accent-ai: #6A51D8;
    --accent-ai-bg: #F0EDFB;
    --accent-ai-bg-soft: #F7F5FE;
    --accent-ai-border: #DCD5F5;
    --accent-ai-text: #5B45BE;
    --accent-ai-on: #FFFFFF;      /* encre posée SUR un aplat violet */
    --on-brand-fill: #FFFFFF;     /* encre posée SUR un aplat de marque */
    --accent-admin: #7C3AED;      /* violet « super administrateur » */
    --accent-role: #2563EB;       /* bleu « administrateur »  */
    --accent-role-muted: #64748B; /* gris « lecteur » */
    --accent-role-user: #0891B2;  /* cyan « utilisateur » */

    /* Fond & surfaces */
    --background: #F7F8F9;
    --background-frame: #EDF0F2;
    --card-bg: #FFFFFF;
    --surface-secondary: #FBFCFC;
    --surface-secondary-alt: #FAFBFB;

    /* Texte */
    --text-primary: #101A22;
    --text-secondary: #485863;
    --text-tertiary: #7C8B94;
    --text-muted: #9AA7AF;
    --text-placeholder: #A3AEB6;

    /* Bordures */
    --border-color: #E6EAEE;
    --border-color-strong: #DCE2E6;
    --border-color-subtle: #EDF1F3;
    --border-color-faint: #F3F5F6;

    /* Gris utilitaires additionnels */
    --gray-divider: #F0F3F4;
    --gray-scrollbar: #CBD5DB;
    --gray-breadcrumb: #C4CDD3;
    --gray-chevron: #B4BEC5;
    --gray-dot-border: #C6D0D6;
    --gray-ring-track: #DDE3E7;

    /* Sidebar (coquille projet, mode liste plate) */
    --sidebar-bg: #FFFFFF;
    --sidebar-hover: #F7F9FA;

    /* États */
    --success: #1E7A52;
    --success-bg: #DFF2E8;
    --warning: #E9A23B;
    --warning-bg: #FAF0D2;
    --warning-text: #8A6D16;
    --danger: #E5484D;
    --danger-dark: #C93B40;
    --danger-5xx: #8B1F23;
    --danger-bg: #FBE4E2;
    --danger-bg-faint: #FFF5F5;   /* rose d'alerte le plus pâle (lignes de titres) */

    /* Pastilles de CODE HTTP (200/3xx/4xx/5xx). Valeurs claires d'origine ;
       en sombre, fond profond et texte pastel — voir getCodeBadge(). */
    --success-bg-code: #D4EDDA;
    --warning-bg-code: #FFF3CD;
    --warning-text-code: #856404;
    --danger-bg-code: #F8D7DA;
    --danger-bg-code-strong: #F5C6CB;
    --badge-neutral-bg-code: #E2E3E5;
    --text-neutral-code: #383D41;

    /* Pastilles de TYPE DE TICKET (App\Support\TicketType). La palette vivait
       en dur dans le PHP : elle passe par des tokens pour suivre le thème,
       les valeurs claires restent celles d'origine. */
    --ticket-crawl-fg: #8A6F42;  --ticket-crawl-bg: #F6F3EC;  --ticket-crawl-bd: #E8E2D5;
    --ticket-bug-fg:   #A1564F;  --ticket-bug-bg:   #F8F1F0;  --ticket-bug-bd:   #ECDCDA;
    --ticket-integ-fg: #6D6191;  --ticket-integ-bg: #F3F2F8;  --ticket-integ-bd: #E2E0EC;
    --ticket-feat-fg:  #4B826F;  --ticket-feat-bg:  #EFF5F3;  --ticket-feat-bd:  #DBE8E3;
    --ticket-bill-fg:  #4D6B93;  --ticket-bill-bg:  #F0F3F8;  --ticket-bill-bd:  #DDE3ED;
    --ticket-quest-fg: #5F6D73;  --ticket-quest-bg: #F2F4F5;  --ticket-quest-bd: #E2E6E8;

    /* Sombre (en-têtes de panneaux, encarts d'aide) */
    --dark-bg: #101A22;
    --dark-text-secondary: #98A9B4;

    /* Typographie */
    --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    /*
     * Tokens ajoutés avec le mode sombre (2026-08). En clair, leurs valeurs
     * reprennent EXACTEMENT ce que les feuilles écrivaient en dur — le rendu
     * clair ne bouge pas d'un pixel ; en sombre, le bloc `html.theme-dark`
     * ci-dessous les redéfinit. Toute couleur qui doit changer avec le thème
     * DOIT passer par un token : c'est la seule mécanique de bascule.
     */

    /* Ombres — élévation des surfaces. En sombre, l'ombre porte moins que la
       bordure : les valeurs y sont plus denses mais plus courtes. */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.18);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Voile des modales */
    --overlay: rgba(16, 26, 34, 0.55);

    /* Surfaces utilitaires */
    --hover-bg: #F7F9FA;            /* survol de ligne, d'entrée de menu */
    --input-bg: #FFFFFF;            /* champs de formulaire */
    --badge-neutral-bg: #F0F3F4;    /* pastilles neutres, compteurs */

    /* Alertes (héritage bootstrap homogénéisé) */
    --success-border: #C3E6CB;
    --danger-border: #F5C6CB;
    --warning-border: #FFEEBA;
    --info-bg: #D1ECF1;
    --info-text: #0C5460;
    --info-border: #BEE5EB;

    /* Graphiques (Highcharts / Chart.js — lus par assets/theme.js).
       Les valeurs CLAIRES sont EXACTEMENT les défauts natifs de Highcharts :
       le thème clair reste identique au pixel près, seul le sombre dévie. */
    --chart-title: #333333;
    --chart-label: #333333;
    --chart-axis-title: #666666;
    --chart-subtitle: #666666;
    --chart-grid: #e6e6e6;
    --chart-grid-minor: #f2f2f2;   /* graduations intermédiaires (axes log) */
    --chart-axis-line: #333333;
    --chart-legend: #333333;
    --chart-legend-hover: #000000;
    --chart-legend-hidden: #666666;
    --chart-nav-active: #0022ff;
    --chart-nav-inactive: #cccccc;
    --chart-tooltip-bg: #ffffff;
    --chart-tooltip-text: #333333;
    /* Grille et axe « doux » : ceux que la vue Search Console dessine
       elle-même, plus clairs que les défauts Highcharts. */
    --chart-grid-soft: #F0F3F6;
    --chart-axis-soft: #E1E8ED;
    /* Filet entre les tuiles d'un treemap. Blanc sur fond clair ; en sombre
       il devient TRANSPARENT — un liseré blanc pur entre chaque bloc pique
       les yeux sur fond sombre, alors que les tuiles se distinguent déjà par
       leur couleur. */
    --chart-tile-border: #FFFFFF;
    /* Aplat « rien à montrer » d'un graphique (treemap ou part unique) :
       un gris neutre, sombre quand le thème l'est. */
    --chart-empty-fill: #E5E7EB;

    /*
     * Nuances HÉRITÉES. Elles existaient en dur un peu partout AVANT le mode
     * sombre, à des valeurs proches mais jamais égales aux tokens de rôle
     * ci-dessus. Les rabattre sur `--text-secondary` & co. aurait déplacé le
     * thème clair, qui ne devait pas bouger d'un pixel : elles gardent donc
     * ici leur valeur exacte, et ne servent qu'à donner un pendant sombre à
     * ces couleurs-là. N'EN AJOUTE PAS pour du code neuf — un nouvel écran
     * prend les tokens de rôle.
     */
    --text-slate: #657786;
    --text-slate-soft: #94A3B8;
    --text-slate-mid: #64748B;
    --text-slate-strong: #334155;
    --text-ink: #1E293B;
    --text-ink-900: #1F2937;
    --text-ink-950: #0F172A;
    --danger-bright: #EF4444;
    --text-ink-plain: #333333;
    --text-navy: #2C3E50;
    --text-gray: #6B7280;
    --text-gray-soft: #9CA3AF;
    --text-gray-warm: #95A5A6;
    --text-moss: #5F776F;
    --success-solid: #27AE60;
    --success-vivid: #2ECC71;
    --success-deep: #155724;
    --success-forest: #166534;
    --danger-deep: #721C24;
    --danger-solid: #C0392B;
    --danger-vivid: #DC2626;
    --danger-soft: #C0574B;
    --warning-ochre: #B9770E;
    --warning-cream-bg: #FEF5EC;
}

/*
 * MODE SOMBRE — la classe `theme-dark` sur <html> (posée avant la première
 * peinture par partials/head-assets.php, déplacée par assets/theme.js) suffit
 * à basculer TOUTE l'application : chaque couleur de l'interface passe par un
 * token de `:root`, et ce bloc les redéfinit tous.
 *
 * Principes de la palette :
 *  - fonds bleu-gris très sombres (jamais noir pur), texte cassé (jamais
 *    blanc pur) — les contrastes AA sont tenus sans éblouir ;
 *  - le vert Rokapi est LÉGÈREMENT éclairci (#14A98B → #1DBD9C) : sur fond
 *    sombre, c'est lui le texte, il doit porter le contraste ;
 *  - les fonds teintés d'état (succès, alerte, danger, IA) deviennent des
 *    teintes profondes, leurs textes des pastels — le rapport figure/fond
 *    s'inverse, jamais la teinte.
 */
html.theme-dark {
    color-scheme: dark;

    /* Marque / accent (crawl) */
    /* Sens INVERSÉ par rapport au thème clair, et c'est voulu : `--primary-dark`
       et `--primary-darker` sont les états de SURVOL des boutons pleins. En
       clair, survoler assombrit (le libellé est blanc) ; en sombre, l'aplat
       porte une encre foncée (`--on-brand-fill`), donc survoler doit
       ÉCLAIRCIR — sinon le survol fait disparaître le libellé. */
    --primary-color: #1DBD9C;
    --primary-dark: #2ECBAA;
    --primary-darker: #45D6B9;
    --primary-light: #25CBA9;
    --primary-on: #06231C;
    --primary-bg: #0E2A24;

    /* Search Console / info */
    --secondary-color: #7C9BE8;
    --secondary-bg: #1B2740;
    --info: #7C9BE8;

    /* IA / assistant */
    --accent-ai: #9B87F0;
    --accent-ai-bg: #272040;
    --accent-ai-bg-soft: #1F1A33;
    --accent-ai-border: #3A3160;
    --accent-ai-text: #B4A5F5;
    --accent-ai-on: #1B1233;
    --on-brand-fill: #06231C;
    --accent-admin: #B79BF5;
    --accent-role: #7FAAF5;
    --accent-role-muted: #9BA9B4;
    --accent-role-user: #45B8D4;

    /* Fond & surfaces */
    --background: #12181D;
    --background-frame: #0C1114;
    --card-bg: #1A2127;
    --surface-secondary: #202830;
    --surface-secondary-alt: #1E252C;

    /* Texte */
    --text-primary: #E8EDF0;
    --text-secondary: #A9B6BE;
    --text-tertiary: #84939D;
    --text-muted: #909DA6;
    --text-placeholder: #828F98;

    /* Bordures */
    --border-color: #2A343C;
    --border-color-strong: #37424B;
    --border-color-subtle: #242E35;
    --border-color-faint: #1F282E;

    /* Gris utilitaires additionnels */
    --gray-divider: #232D34;
    --gray-scrollbar: #3A454E;
    --gray-breadcrumb: #4A565F;
    --gray-chevron: #7C8992;
    --gray-dot-border: #43505A;
    --gray-ring-track: #333E47;

    /* Sidebar */
    --sidebar-bg: #161D22;
    --sidebar-hover: #1E262D;

    /* États. `--danger-dark` reste un rouge SOMBRE : c'est le survol des
       boutons pleins à texte blanc, l'éclaircir ferait perdre le libellé. */
    --success: #4CC38A;
    --success-bg: #14352A;
    --warning: #E9A23B;
    --warning-bg: #3A2E14;
    --warning-text: #E5C065;
    --danger: #F05A5E;
    --danger-dark: #C93B40;
    --danger-5xx: #FF9296;
    --danger-bg: #3B1D1F;
    --danger-bg-faint: #331A1C;

    /* Pastilles de code HTTP */
    --success-bg-code: #14352A;
    --warning-bg-code: #3A2E14;
    --warning-text-code: #E5C065;
    --danger-bg-code: #3B1D1F;
    --danger-bg-code-strong: #4A2325;
    --badge-neutral-bg-code: #29343C;
    --text-neutral-code: #C3CDD4;

    /* Pastilles de type de ticket : fond profond, texte pastel de la teinte. */
    --ticket-crawl-fg: #D6BE8E;  --ticket-crawl-bg: #322A1C;  --ticket-crawl-bd: #463C28;
    --ticket-bug-fg:   #E5A09A;  --ticket-bug-bg:   #35221F;  --ticket-bug-bd:   #4B2F2B;
    --ticket-integ-fg: #B4A8D8;  --ticket-integ-bg: #262238;  --ticket-integ-bd: #37314E;
    --ticket-feat-fg:  #8CC7B2;  --ticket-feat-bg:  #17302A;  --ticket-feat-bd:  #23453C;
    --ticket-bill-fg:  #97B4D8;  --ticket-bill-bg:  #1B2735;  --ticket-bill-bd:  #2A3A4C;
    --ticket-quest-fg: #AFBBC1;  --ticket-quest-bg: #262E33;  --ticket-quest-bd: #364049;

    /* Sombre (en-têtes de panneaux, encarts d'aide) — encore plus profond que
       les cartes, pour garder le même rapport « encart posé sur la page ». */
    --dark-bg: #0B1116;
    --dark-text-secondary: #98A9B4;

    /* Ombres & voile */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.55);
    --overlay: rgba(0, 0, 0, 0.65);

    /* Surfaces utilitaires */
    --hover-bg: #202830;
    --input-bg: #141B20;
    --badge-neutral-bg: #29343C;

    /* Alertes */
    --success-border: #1E4A38;
    --danger-border: #55282B;
    --warning-border: #544217;
    --info-bg: #13303A;
    --info-text: #7FC9DC;
    --info-border: #1C4550;

    /* Graphiques */
    --chart-title: #E8EDF0;
    --chart-label: #A9B6BE;
    --chart-axis-title: #97A6B0;
    --chart-subtitle: #97A6B0;
    --chart-grid: #262F37;
    --chart-grid-minor: #1E262D;
    --chart-axis-line: #3D4952;
    --chart-legend: #A9B6BE;
    --chart-legend-hover: #E8EDF0;
    --chart-legend-hidden: #5F6B73;
    --chart-nav-active: #7C9BE8;
    --chart-nav-inactive: #4A565F;
    --chart-tooltip-bg: #202830;
    --chart-tooltip-text: #E8EDF0;
    --chart-grid-soft: #262F37;
    --chart-axis-soft: #3D4952;
    --chart-tile-border: transparent;
    --chart-empty-fill: #29343C;

    /* Pendants sombres des nuances héritées (voir le bloc clair). Les textes
       foncés deviennent clairs, les fonds pâles deviennent profonds. */
    --text-slate: #A9B6BE;
    --text-slate-soft: #97A6B0;
    --text-slate-mid: #A9B6BE;
    --text-slate-strong: #C6D0D7;
    --text-ink: #E8EDF0;
    --text-ink-900: #E8EDF0;
    --text-ink-950: #F0F4F7;
    --danger-bright: #F4696D;
    --text-ink-plain: #E8EDF0;
    --text-navy: #E8EDF0;
    --text-gray: #A9B6BE;
    --text-gray-soft: #8B99A3;
    --text-gray-warm: #8B99A3;
    --text-moss: #9FB3AA;
    --success-solid: #4CC38A;
    --success-vivid: #5FD199;
    --success-deep: #6BD3A0;
    --success-forest: #6BD3A0;
    --danger-deep: #F49A9D;
    --danger-solid: #F05A5E;
    --danger-vivid: #F05A5E;
    --danger-soft: #F08085;
    --warning-ochre: #E5C065;
    --warning-cream-bg: #3A2E14;
}

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

/* Global Scrollbar Styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-scrollbar);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-chevron);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-scrollbar) transparent;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Header — voir assets/topbar.css
   La barre du haut (`.header` et ses éléments : marque, fil d'Ariane, boutons)
   vit désormais dans `assets/topbar.css`, chargé par `components/top-header.php`
   lui-même. Elle était ici en version sombre et là-bas en version blanche pour
   la seule coquille projet : deux barres pour un même rôle. Une seule reste, la
   blanche. Ne pas redéclarer `.header*` ici. */

.header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Crawl Selector */
.crawl-selector {
    position: relative;
    margin-left: 1.5rem;
}

.crawl-selector-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(78, 205, 196, 0.15);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.crawl-selector-btn:hover {
    background: rgba(78, 205, 196, 0.25);
    border-color: rgba(78, 205, 196, 0.5);
}

.crawl-selector-btn .material-symbols-outlined {
    font-size: 18px;
}

.crawl-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 320px;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1002;
    border: 1px solid rgba(78, 205, 196, 0.2);
}

.crawl-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}


.crawl-dropdown-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color-subtle);
    transition: background 0.2s ease;
    color: var(--text-primary);
    text-decoration: none;
}

.crawl-dropdown-item:last-child {
    border-bottom: none;
}

.crawl-dropdown-item:hover {
    background: var(--surface-secondary);
}

.crawl-dropdown-item.active {
    background: var(--primary-bg);
    border-left: 3px solid var(--primary-color);
}

.crawl-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.crawl-item-date {
    font-weight: 600;
    color: var(--text-primary);
}

.crawl-item-badge {
    background: var(--primary-color);
    color: var(--on-brand-fill);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.crawl-item-badge--baseline {
    background: #e67e22;
}

.crawl-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.crawl-item-stats {
    display: flex;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-gray-warm);
}

.crawl-item-stats span:nth-child(2) {
    color: #d1d5db;
}

.crawl-item-id {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.7rem;
    color: var(--text-slate-soft);
    font-weight: 400;
    margin-left: 0.35rem;
}

/* Config icons mini (crawl selector) */
.crawl-item-config {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.config-mini {
    font-size: 18px !important;
    color: #d1d5db;
    transition: color 0.2s;
}

.config-mini.active {
    color: var(--primary-color);
}

/* Au survol de la ligne, les icônes actives se colorent */
.crawl-dropdown-item:hover .config-mini.active {
    color: var(--primary-color);
}

.config-depth-mini {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--background-frame);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 4px;
    transition: all 0.2s;
}

.crawl-dropdown-item:hover .config-depth-mini {
    color: var(--primary-color);
    background: rgba(78, 205, 196, 0.1);
}

.btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

/* Version outline pour boutons sur fond clair */
.btn-primary-outline,
.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}

.btn-primary-outline:hover,
.btn-outline:hover {
    background: var(--primary-color);
    color: var(--on-brand-fill);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.25);
}

.btn-primary-action {
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

.btn-primary-action:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 201, 196, 0.3);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #27AE60;
    transform: translateY(-2px);
}

.btn-success-light {
    background: #6DD5A8;
    color: white;
}

.btn-success-light:hover {
    background: #5BC799;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #C0392B;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-secondary {
    background: #95A5A6;
    color: white;
}

.btn-secondary:hover {
    background: #7F8C8D;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.project-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.project-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.project-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

.project-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.project-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.project-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-view {
    flex: 1;
    background: var(--primary-color);
    color: var(--on-brand-fill);
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-view:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Dashboard Layout */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 72px);
}

.sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    color: white;
    padding: 2rem 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
    max-height: calc(100vh - 72px);
    min-height: calc(100vh - 72px);
    position: sticky;
    top: 72px;
    align-self: flex-start;
}

/* Scrollbar personnalisée pour la sidebar */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(78, 201, 196, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(78, 201, 196, 0.5);
}

/* Pour Firefox */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(78, 201, 196, 0.3) rgba(255, 255, 255, 0.05);
}

.sidebar-nav {
    list-style: none;
}

.sidebar-nav li {
    margin-bottom: 0.5rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: var(--sidebar-hover);
    color: white;
    border-left-color: var(--primary-color);
}

.sidebar-nav a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sidebar-nav a.disabled:hover {
    background: transparent;
    border-left-color: transparent;
}

.sidebar-section {
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-top: 1rem;
}

.sidebar-section-header {
    padding: 1rem 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.15);
    border-left: 3px solid transparent;
    user-select: none;
}

.sidebar-section-header:hover {
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.8);
    border-left-color: var(--primary-color);
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    font-size: 16px;
    opacity: 0.6;
}

.expand-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
    color: rgba(255,255,255,0.4);
}

.sidebar-section-content {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    padding-left: 0.5rem;
}

.sidebar-section-content .sidebar-nav {
    margin-bottom: 0;
}

.sidebar-section-content .sidebar-nav li {
    margin-bottom: 0.25rem;
}

.sidebar-section-content .sidebar-nav a {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    font-weight: 400;
}

.sidebar-section-content .sidebar-nav a .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.7;
}

.main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    max-width: 1600px;
    margin:auto;
}

/* Navigation htmx en cours : la sidebar du rapport déclare
   hx-indicator="#main-content", htmx pose donc `htmx-request` sur le contenu
   sortant pendant toute la requête. On l'estompe et on gèle ses interactions —
   sans ça, l'ancien rapport restait figé sans le moindre signe, puis était
   remplacé d'un coup. Le délai de transition évite un clignotement sur les
   réponses servies depuis le cache (< 150 ms). */
#main-content.htmx-request,
#project-view.htmx-request {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s;
}

/* Scorecards */
.scorecards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.scorecard {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid var(--primary-color);
}

.scorecard.success {
    border-left-color: var(--success);
}

.scorecard.warning {
    border-left-color: var(--warning);
}

.scorecard.info {
    border-left-color: var(--info);
}

.scorecard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.scorecard-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.scorecard-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.scorecard-icon.primary {
    background: rgba(78, 205, 196, 0.1);
    color: var(--primary-color);
}

.scorecard-icon.success {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
}

.scorecard-icon.warning {
    background: rgba(243, 156, 18, 0.1);
    color: var(--warning);
}

.scorecard-icon.info {
    background: rgba(52, 152, 219, 0.1);
    color: var(--info);
}

.scorecard-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.scorecard-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Charts Section */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
}

.chart-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.chart-header {
    margin-bottom: 1.5rem;
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Data Table */
.table-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.table-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.table-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box {
    position: relative;
}

.search-box input {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    width: 250px;
}

.filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--card-bg);
    cursor: pointer;
}

.btn-columns {
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-columns:hover {
    background: var(--background);
}

/* =============================================
   BOUTONS D'ACTION TABLE (Colonnes, Copier, Export)
   ============================================= */

.btn-table-action {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    /* Explicite, et non héritée : ces boutons sont tantôt des <button> — dont
       la hauteur de ligne native vaut `normal` — tantôt des <a>, qui héritent
       celle du corps de page. « Ouvrir dans l'explorateur » dépassait ses
       voisins d'exactement cet écart. */
    line-height: 1.25;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.btn-table-action .material-symbols-outlined {
    font-size: 18px;
    /* Une police d'icônes porte sa propre hauteur de ligne, plus haute que le
       texte : sans cette remise à plat, un bouton avec icône grandit. */
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Style Colonnes - Neutre/Gris */
.btn-table-action.btn-columns-select {
    background: var(--background-frame);
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}

.btn-table-action.btn-columns-select:hover {
    background: var(--gray-divider);
    border-color: var(--gray-chevron);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Style Copier - Outline */
.btn-table-action.btn-copy {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}

.btn-table-action.btn-copy:hover {
    background: var(--surface-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.15);
}

.btn-table-action.btn-copy:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Style Export - Outline, comme Copier.

   Il a longtemps porté le dégradé plein, du temps où il était la seule sortie
   du tableau. « Ouvrir dans l'explorateur » lui succède à ce rôle : copier et
   exporter emportent la vue courante, explorer ouvre la suite du travail. Deux
   boutons pleins côte à côte ne mettent plus rien en avant. */
.btn-table-action.btn-export {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}

.btn-table-action.btn-export:hover {
    background: var(--surface-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.15);
}

.btn-table-action.btn-export:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Style Explorer - l'action principale du tableau, pleine. */
.btn-table-action.btn-explorer {
    background: var(--primary-color);
    color: var(--on-brand-fill);
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(20, 169, 139, 0.25);
}

.btn-table-action.btn-explorer:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--on-brand-fill);
    box-shadow: 0 4px 12px rgba(20, 169, 139, 0.35);
}

/* C'est un vrai lien — clic milieu, nouvel onglet, copie de l'adresse : autant
   de gestes qu'un <button> n'offre pas. Reste à lui retirer sa tenue de lien.
   `display: flex` est déjà porté par `.btn-table-action`, mais un <a> non
   stylé retombe en `inline` : sans cette remise à plat, les trois boutons se
   sont empilés les uns sous les autres. */
a.btn-table-action,
a.btn-table-action:hover,
a.btn-table-action:focus,
a.btn-table-action:visited {
    text-decoration: none;
}

/* Le titre et son bouton de périmètre, à gauche de l'en-tête. */
.table-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.table-title-row .table-title {
    margin: 0;
}

/* Un bouton d'action réduit à son icône : même tenue que « Copier », sans
   libellé. Le `padding` redevient symétrique, sinon l'icône seule est décalée
   vers la gauche par la réserve faite au texte. */
.btn-table-action.btn-icon-only {
    background: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-color-strong);
    padding: 0.4rem;
    gap: 0;
    border-radius: 8px;
}

.btn-table-action.btn-icon-only:hover {
    background: var(--surface-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Le groupe d'actions, à droite du titre du tableau. */
.table-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* La zone de défilement et la barre de pied du tableau vivaient dans
   `data-table.css`, que le tableau de bord ne charge pas : la barre du bas y
   était sans fond ni séparateur, alors qu'elle en avait un côté projet. Même
   composant, deux apparences selon la coquille. */
.table-scroll-area {
    overflow: hidden;
}

.table-footer-bar {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-secondary);
}

/* =============================================
   PAGINATION DES TABLEAUX
   =============================================
   Une SEULE taille, en haut comme en bas. Les deux barres étaient stylées
   séparément, en attributs `style` : celle du haut avait des boutons et un
   texte d'un cran plus grands que celle du bas, pour la même fonction, à trois
   cents pixels d'écart. C'est la petite qui fait foi — la pagination
   accompagne le tableau, elle ne le concurrence pas. */

.table-pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.table-pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border: 1px solid var(--border-color-strong);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-pager-btn:hover:not(:disabled) {
    background: var(--surface-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.table-pager-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.table-pager-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Active state (feedback au clic) */
.btn-table-action:active {
    transform: scale(0.97);
}

/* État disabled */
.btn-table-action:disabled,
.btn-table-action.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table thead {
    background: var(--background);
}

.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr:hover {
    background: var(--background);
}

.data-table td a[href^="http"] {
    max-width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pagination-buttons {
    display: flex;
    gap: 0.5rem;
}

.pagination-buttons button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.pagination-buttons button:hover:not(:disabled) {
    background: var(--background);
}

.pagination-buttons button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
}

.badge-warning {
    background: rgba(243, 156, 18, 0.1);
    color: var(--warning);
}

.badge-danger {
    background: rgba(231, 76, 60, 0.1);
    color: var(--danger);
}

.badge-info {
    background: rgba(52, 152, 219, 0.1);
    color: var(--info);
}

/* Column Selector Modal */
/* 1300 : AU-DESSUS de toute la chrome. À 1000, la barre du haut (`.header`,
   z-index 1001) et le panneau de suivi de crawl (1050-1200) traversaient le
   voile gris — on voyait la topbar en pleine lumière par-dessus le masque
   d'une popin ouverte. Reste sous les bandeaux et les menus portés dans le
   <body> (9999+), qui doivent pouvoir s'afficher PAR-DESSUS une popin. */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
    z-index: 1300;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.column-list {
    list-style: none;
}

.column-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.column-item:last-child {
    border-bottom: none;
}

.column-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.column-item label {
    cursor: pointer;
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-layout {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .scorecards {
        grid-template-columns: 1fr;
    }
}

/* Material Icons */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle;
}

.icon-filled {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Loading */
.loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.spinner {
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal for New Project */
/* Seconde définition de `.modal` (héritée), plus bas dans la feuille : c'est
   ELLE qui gagne. Le z-index doit donc être tenu aux deux endroits — voir la
   note de la première. */
.modal {
    display: none;
    position: fixed;
    z-index: 1300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s;
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.modal-close {
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close:hover {
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.form-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.form-section h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-checkbox label {
    cursor: pointer;
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn-secondary {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--gray-ring-track);
}

.form-message {
    margin-top: 1rem;
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-deep);
    border: 1px solid var(--success-border);
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

/* Status Badges */
.badge-running {
    background: var(--info) !important;
    color: white !important;
    animation: pulse 2s infinite;
}

.badge-pending {
    background: var(--warning) !important;
    color: white !important;
}

.badge-failed {
    background: var(--danger) !important;
    color: white !important;
}

.badge-completed {
    background: var(--success) !important;
    color: white !important;
}

.badge-stopped {
    background: var(--warning) !important;
    color: white !important;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Monitor Page Styles */
.monitor-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.status-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-item {
    background: var(--background);
    padding: 1rem;
    border-radius: 8px;
}

.status-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.status-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.logs-container {
    background: #1E1E1E;
    color: #D4D4D4;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.log-line {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.log-info {
    color: #4EC9B0;
}

.log-success {
    color: #6A9955;
}

.log-warning {
    color: #CE9178;
}

.log-error {
    color: #F48771;
}

.log-debug {
    color: #9CDCFE;
}

/* Log types styling */
.log-header {
    color: #4FC1FF;
    font-weight: bold;
    font-family: monospace;
}

.log-credit {
    color: #4FC1FF;
    font-style: italic;
    opacity: 0.8;
}

.log-progress {
    display: block;
    padding: 0.75rem;
    border-left: 3px solid #4EC9B0;
    margin: 0.5rem 0;
    background: rgba(78, 201, 176, 0.05);
    border-radius: 4px;
}

.log-progress span {
    margin-right: 0.5rem;
}

.log-depth {
    color: #6A9955;
    font-weight: bold;
}

.log-speed {
    color: #4FC1FF;
    font-weight: 600;
}

.log-count {
    color: #9CDCFE;
}

.log-bar {
    flex: 1;
    height: 8px;
    background: #2D2D2D;
    border-radius: 4px;
    overflow: hidden;
    min-width: 100px;
}

.log-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4EC9B0 0%, #6A9955 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.log-success {
    color: #6A9955;
    font-weight: bold;
    padding: 0.5rem;
    background: rgba(106, 153, 85, 0.1);
    border-radius: 4px;
    border-left: 3px solid #6A9955;
}

.log-info {
    color: #4EC9B0;
    padding: 0.25rem 0;
}

/* Domain cards */
.domains-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.domain-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.domain-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.domain-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.domain-header:hover {
    background: rgba(78, 201, 196, 0.02);
}

.domain-info {
    flex: 1;
}

.domain-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.domain-favicon {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
}

.domain-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.domain-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.domain-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    margin: -1.5rem -1.5rem -1.5rem 1rem;
    background: rgba(78, 201, 196, 0.06);
    border-radius: 30px 0 0 30px;
    position: relative;
}

.expand-icon {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
}

.domain-crawls {
    padding: 1rem 1.5rem 1.5rem;
    background: var(--surface-secondary);
    max-height: 400px;
    overflow-y: auto;
}

.crawl-view-all {
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.6rem; font-size: 0.8rem; font-weight: 500;
    color: var(--primary-color); text-decoration: none;
    border-top: 1px solid var(--border-color);
}
.crawl-view-all:hover { background: rgba(78,205,196,0.05); }

/* =============================================
   CRAWLS TABLE - Design Airy/Modern
   ============================================= */
.crawls-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
}

/* En-tête épuré - fond blanc, texte gris */
.crawls-table-modern thead {
    background: transparent;
}

.crawls-table-modern thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

/* Lignes cliquables */
.crawl-row-clickable {
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--gray-divider);
}

.crawl-row-clickable:hover {
    background: linear-gradient(90deg, rgba(78, 205, 196, 0.04) 0%, rgba(78, 205, 196, 0.08) 100%);
}

.crawl-row-clickable:last-child {
    border-bottom: none;
}

.crawls-table-modern td {
    padding: 0.875rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.crawl-date {
    font-weight: 500;
    color: var(--text-primary);
}

.crawl-stat {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.stat-pending {
    color: var(--text-slate-soft);
}

/* Badges de statut - Style Subtle/Soft */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.status-completed {
    background: rgba(46, 204, 113, 0.12);
    color: #1e8449;
}

.status-running {
    background: rgba(52, 152, 219, 0.12);
    color: #1a5276;
    animation: subtle-pulse 2s infinite;
}

.status-pending {
    background: rgba(243, 156, 18, 0.12);
    color: var(--warning-text);
}

.status-queued {
    background: rgba(243, 156, 18, 0.12);
    color: var(--warning-text);
}

.status-processing {
    background: rgba(155, 89, 182, 0.12);
    color: #6c3483;
    animation: subtle-pulse 2s infinite;
}

.status-failed {
    background: rgba(231, 76, 60, 0.12);
    color: #922b21;
}

.status-stopped {
    background: rgba(243, 156, 18, 0.12);
    color: var(--warning-text);
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Configuration icons */
.config-icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.config-depth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    background: rgba(78, 205, 196, 0.1);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
}

/* Action icon (œil monitoring) */
.crawl-action {
    text-align: center;
}

.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.action-icon:hover {
    background: rgba(78, 205, 196, 0.1);
    color: var(--primary-color);
}

.action-icon .material-symbols-outlined {
    font-size: 20px;
}

/* Legacy crawls-table (pour rétrocompatibilité) */
.crawls-table:not(.crawls-table-modern) thead {
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

.crawls-table:not(.crawls-table-modern) th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crawls-table:not(.crawls-table-modern) tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.crawls-table:not(.crawls-table-modern) tbody tr:hover {
    background: var(--surface-secondary);
}

.crawls-table:not(.crawls-table-modern) tbody tr:last-child {
    border-bottom: none;
}

.crawls-table:not(.crawls-table-modern) td {
    padding: 1rem;
    color: var(--text-primary);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Search input */
.search-input {
    outline: none;
}

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(78, 201, 196, 0.1);
}

/* Sort Dropdown */
.sort-dropdown-wrapper {
    position: relative;
}

.sort-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s ease;
    min-width: 280px;
}

.sort-dropdown-btn:hover {
    border-color: var(--primary-color);
    background: rgba(78, 201, 196, 0.02);
}

.sort-dropdown-btn .material-symbols-outlined:first-child {
    font-size: 20px;
    color: var(--primary-color);
}

.sort-dropdown-btn .material-symbols-outlined:last-child {
    font-size: 20px;
    color: var(--text-secondary);
    margin-left: auto;
}

.sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: none;
    z-index: 100;
    overflow: hidden;
}

.sort-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease;
}

.sort-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.sort-dropdown-item:hover {
    background: rgba(78, 201, 196, 0.05);
    border-left-color: var(--primary-color);
}

.sort-dropdown-item.active {
    background: rgba(78, 201, 196, 0.1);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.sort-dropdown-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-secondary);
}

.sort-dropdown-item.active .material-symbols-outlined {
    color: var(--primary-color);
}

/* Custom Dropdown (crawl speed) */
.custom-dropdown-wrapper {
    position: relative;
}

.custom-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.custom-dropdown-toggle:hover {
    border-color: var(--primary-color);
    background: rgba(78, 201, 196, 0.02);
}

.custom-dropdown-toggle .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: none;
    z-index: 100;
    overflow: hidden;
}

.custom-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease;
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.custom-dropdown-item:hover {
    background: rgba(78, 201, 196, 0.05);
    border-left-color: var(--primary-color);
}

.custom-dropdown-item.active {
    background: rgba(78, 201, 196, 0.1);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.custom-dropdown-item .material-symbols-outlined {
    flex-shrink: 0;
}

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 249, 252, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.page-loader.active {
    display: flex;
}

.loader-content {
    text-align: center;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

/* ==================== CATEGORY SYSTEM ==================== */

/* Container with Sidebar */
.container-with-sidebar {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    gap: 2rem;
    padding: 2rem;
}

/* Fallback for no sidebar (no projects) */
.container-with-sidebar:not(:has(.categories-sidebar)) {
    display: block;
    max-width: 1400px;
}

.main-content-area {
    flex: 1;
    min-width: 0;
}

/* Categories Sidebar */
.categories-sidebar {
    width: 260px;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    height: fit-content;
    position: sticky;
    top: 90px;
}

.categories-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.categories-sidebar-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--background);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
}

/* Category Filter Items (Sidebar) */
.categories-sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-filter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    background: transparent;
}

.category-filter-item:hover {
    background: var(--background);
    border-left-color: var(--primary-color);
}

.category-filter-item.active {
    background: rgba(78, 201, 196, 0.1);
    border-left-color: var(--primary-color);
}

.category-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-filter-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.category-filter-count {
    background: var(--background);
    color: var(--text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.category-filter-item.active .category-filter-count {
    background: var(--primary-color);
    color: var(--on-brand-fill);
}

/* Add Category Link */
.category-add-link {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-add-category {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-category:hover {
    background: rgba(78, 201, 196, 0.05);
    border-color: var(--primary-color);
    border-style: solid;
}

/* Simple Category Badge */
.category-badge-simple {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    padding-left: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.category-badge-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-badge-clickable:hover {
    background: var(--background);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.category-badge-none {
    color: var(--text-secondary);
    border-style: dashed;
}

/* Category Dropdown in Domain Card */
.category-selector {
    position: relative;
    display: inline-block;
}

.category-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    color: var(--text-primary);
    font-weight: 500;
}

.category-dropdown-btn:hover {
    border-color: var(--primary-color);
    background: rgba(78, 201, 196, 0.05);
}

.category-dropdown-btn .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary-color);
}

.category-dropdown-menu {
    position: fixed;
    min-width: 250px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

.category-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(78, 201, 196, 0.05) 0%, rgba(68, 160, 141, 0.05) 100%);
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.category-dropdown-item:hover {
    background: rgba(78, 201, 196, 0.05);
    border-left-color: var(--primary-color);
}

.category-dropdown-item.active {
    background: rgba(78, 201, 196, 0.1);
    border-left-color: var(--primary-color);
}

.category-dropdown-item .category-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.category-dropdown-item .category-color-dot {
    width: 10px;
    height: 10px;
}

/* Category Management Modal */
.category-modal {
    z-index: 10000;
}

.cat-modal-container {
    background: var(--card-bg);
    border-radius: 16px;
    width: 95%;
    max-width: 550px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

.cat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.cat-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cat-modal-title .material-symbols-outlined {
    font-size: 24px;
    color: var(--primary-color);
}

.cat-modal-title h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cat-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cat-modal-close:hover {
    background: var(--background-frame);
    color: var(--text-primary);
}

.cat-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

/* Formulaire d'ajout */
.cat-add-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.cat-color-input {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cat-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.cat-color-input::-webkit-color-swatch {
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 8px;
}

.cat-color-input::-moz-color-swatch {
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 8px;
}

.cat-name-input {
    flex: 1;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.cat-name-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cat-add-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    background: var(--primary-color);
    color: var(--on-brand-fill);
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cat-add-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.cat-add-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Liste des catégories */
.cat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cat-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color-subtle);
}

.cat-item:last-child {
    border-bottom: none;
}

.cat-item-color {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cat-item-color:hover {
    transform: scale(1.08);
}

.cat-item-color input[type="color"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cat-item-info {
    flex: 1;
    min-width: 0;
}

.cat-item-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    border: none;
    background: transparent;
    padding: 0.15rem 0;
    width: 100%;
    outline: none;
}

.cat-item-name:focus {
    background: rgba(78, 205, 196, 0.08);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    margin-left: -0.5rem;
}

.cat-item-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cat-item-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.cat-item-delete:hover {
    opacity: 1;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

.cat-item-delete .material-symbols-outlined {
    font-size: 18px;
}

.cat-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Empty state */
.cat-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.cat-empty .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.color-picker-wrapper {
    position: relative;
}

.color-picker-preview {
    width: 100%;
    height: 45px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.color-picker-preview:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.color-picker-preview input[type="color"] {
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: none;
    cursor: pointer;
}

/* Clean color picker */
.color-picker-clean {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.color-picker-clean::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
}

.color-picker-clean::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-picker-clean::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 5rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.empty-state-icon {
    margin-bottom: 1.5rem;
}

.empty-state-icon .material-symbols-outlined {
    font-size: 80px;
    color: var(--primary-color);
    opacity: 0.3;
}

.empty-state-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.empty-state-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Deux portes sur un compte vide : créer un projet (le geste principal, en
   vert) et crawler une liste d'URLs sans projet (secondaire). Elles se suivent
   sur une ligne, centrées comme le reste du bloc, et passent l'une sous l'autre
   quand la place manque. */
.empty-state-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.empty-state-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.categories-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.categories-empty .material-symbols-outlined {
    font-size: 64px;
    color: var(--border-color);
    margin-bottom: 1rem;
}

.categories-empty h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Styles pour les filtres avancés */
.filter-group {
    position: relative;
    transition: all 0.3s ease;
}

.filter-group:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filter-condition {
    transition: all 0.2s ease;
}

.filter-condition:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.group-logic {
    font-weight: 600;
    color: var(--primary-color);
}

.category-checkbox {
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--primary-color) !important;
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    outline: none;
    transition: all 0.2s;
}

.category-checkbox:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    position: relative;
}

.category-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.category-checkbox:hover {
    border-color: var(--primary-color);
}

/* Animation d'apparition des filtres */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-group,
.filter-condition {
    animation: slideIn 0.3s ease;
}

/* Dropdown de colonnes */
.column-dropdown {
    animation: slideIn 0.2s ease;
}

.column-dropdown::-webkit-scrollbar {
    width: 8px;
}

.column-dropdown::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: 4px;
}

.column-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.column-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    /* Pas de `flex-direction: column` sur `.container-with-sidebar` — voir le
       commentaire long dans `responsive.css` (§ TABLET) : l'accueil est une
       coquille à hauteur fixe, l'empiler efface le contenu sous le pli. La
       règle voisine décrit l'ancienne sidebar « carte » (`.categories-sidebar`,
       plus rendue par aucune page) ; elle est laissée telle quelle, sans
       effet, plutôt que d'élargir ce correctif à du CSS mort. */

    .categories-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }
    
    .categories-sidebar-filters {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    
    .category-form-row {
        grid-template-columns: 1fr;
    }
    
    .filter-condition {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .filter-operator-container,
    .filter-value-container {
        min-width: 100% !important;
    }
}

/* ============================================
   NOTIFICATIONS GLOBALES
   ============================================ */
.global-status-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: none;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInUpStatus 0.3s ease-out;
    max-width: 400px;
}

@keyframes slideInUpStatus {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.global-status-success {
    background: var(--success-bg);
    color: var(--success-deep);
    border: 1px solid var(--success-border);
}

.global-status-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.global-status-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.global-status-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* ============================================
   MODAL NOUVEAU PROJET - REDESIGN UX
   ============================================ */

/* Container principal de la modal */
.crawl-modal-redesign {
    max-width: 700px !important;
    width: 95% !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 !important;
}

.crawl-modal-redesign form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Zone Hero - Titre + Close uniquement */
.crawl-modal-hero {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    flex-shrink: 0;
}

.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.05rem;
    font-weight: 600;
}

.hero-title .material-symbols-outlined {
    font-size: 22px;
}

.hero-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.75rem;
    cursor: pointer;
    opacity: 0.8;
    line-height: 1;
    padding: 0;
}

.hero-close:hover {
    opacity: 1;
}

/* Le contrôle segmenté « Spider / Liste » de la popin de crawl a été retiré :
   le mode vient désormais du POINT D'ENTRÉE (« Crawl du site », « Crawl de
   liste », Quick crawl) et non d'un choix reposé dans le formulaire — qui
   permettait de le contredire, et de lancer un spider depuis l'écran des
   crawls de liste. Voir assets/crawl-mode.js et App\Crawl\CrawlType. */

/* Body URL Groups (inside General tab) */
.body-url-group {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-subtle);
}

.body-url-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.body-url-label .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary-color);
}

.body-url-input {
    width: 100%;
    padding: 0.65rem 0.875rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.body-url-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.body-url-input::placeholder {
    color: var(--text-tertiary);
}

/* URL List textarea (fixed height, scrollable) */
.body-url-textarea {
    width: 100%;
    height: 180px;
    max-height: 180px;
    padding: 0.65rem 0.875rem;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.body-url-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.body-url-textarea::placeholder {
    color: var(--text-tertiary);
}

/* URL list footer (hint + counter) */
.url-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
}

.url-list-hint {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.url-counter {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 600;
}

/* File Upload Zone */
.file-upload-zone {
    margin-top: 0.6rem;
}

.file-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: var(--surface-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.file-upload-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(78, 205, 196, 0.05);
}

.file-upload-btn .material-symbols-outlined {
    font-size: 16px;
}

.file-upload-hint {
    color: var(--text-secondary);
    font-size: 0.65rem;
    opacity: 0.7;
    margin-left: 0.2rem;
}

.file-upload-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: rgba(78, 205, 196, 0.08);
    border: 1px solid rgba(78, 205, 196, 0.25);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.file-upload-info .material-symbols-outlined {
    font-size: 16px;
    color: var(--primary-color);
}

.file-upload-name {
    font-weight: 500;
    flex: 1;
}

.file-upload-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 2px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.file-upload-remove:hover {
    color: var(--danger);
    background: rgba(231, 76, 60, 0.1);
}

.file-upload-remove .material-symbols-outlined {
    font-size: 14px;
}

/* Système d'onglets */
.crawl-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    /* Filet : les onglets ne se compriment plus sous leur libellé, une fenêtre
       trop étroite les ferait donc déborder de la popin. Ils défilent. */
    overflow-x: auto;
    scrollbar-width: none;
}

.crawl-tabs::-webkit-scrollbar { display: none; }

.crawl-tab {
    /* Cinq onglets se partagent les 700 px de la popin (et du tiroir « Mode
       expert » de l'assistant, réglé sur la même largeur). Ils se répartissent
       l'espace RESTANT (`flex: 1 1 auto`) sans jamais descendre sous la largeur
       de leur libellé (`min-width: max-content`) : à parts égales, « Règles &
       Scope » se faisait rogner par son propre bouton, qui clippe son contenu.
       `nowrap` empêche le repli sur deux lignes, qui ferait grandir la barre. */
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 0.55rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.crawl-tab:hover {
    background: rgba(78, 205, 196, 0.08);
    color: var(--text-primary);
}

.crawl-tab.active {
    background: var(--card-bg);
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.crawl-tab .material-symbols-outlined {
    font-size: 18px;
}

/* Contenu des onglets */
.crawl-tab-content {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 220px);
}

.crawl-tab-pane {
    display: none;
    padding: 1.25rem 1.5rem;
    animation: fadeIn 0.15s ease;
}

.crawl-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-intro {
    display: none;
}

/* Grille de paramètres (Onglet Général) */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    background: transparent;
    border-bottom: 1px solid var(--border-color-subtle);
}

.setting-row:last-child {
    border-bottom: none;
}


.setting-row-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.setting-row-label .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary-color);
}

.setting-row-label h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.setting-row-label p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
}

.setting-row-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setting-input-number {
    width: 70px;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.setting-input-number:focus {
    outline: none;
    border-color: var(--primary-color);
}

.setting-unit {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ---- Plafond d'URLs (menu de paliers + saisie libre) -------------------
   Voir assets/max-urls-field.js et components/crawl-config-fields.php.
   La ligne sort du gabarit « libellé à gauche, contrôle à droite » des autres
   réglages : le contrôle est un bloc de plusieurs étages (menu, saisie libre,
   phrase de confirmation), qu'un alignement vertical centré ferait flotter au
   milieu du libellé. */
.setting-row--stack {
    align-items: flex-start;
    padding: 0.75rem 0;
}

.setting-row--stack .setting-row-label {
    padding-top: 0.65rem;
    min-width: 0;
}

/* Base de 260px : le composant vit aussi dans le drawer « Mode expert » de
   l'assistant (560px de large, moins ses marges). */
.max-urls-control {
    flex: 0 1 260px;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
}

/* -- Menu de paliers -----------------------------------------------------
   Mêmes proportions que le sélecteur de vitesse voisin (.custom-speed-select) :
   deux réglages côte à côte dans le même onglet ne doivent pas s'écrire de deux
   façons. Les classes restent distinctes — un jour l'un des deux bougera. */
.max-urls-select {
    position: relative;
    width: 100%;
}

.max-urls-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.max-urls-trigger:hover {
    border-color: var(--primary-color);
}

.max-urls-select.open .max-urls-trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.max-urls-trigger-value {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.max-urls-trigger-name,
.max-urls-option-name {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.max-urls-arrow {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.max-urls-select.open .max-urls-arrow {
    transform: rotate(180deg);
}

/* `position: fixed` et déplacé dans le <body> à l'ouverture : la popin de crawl
   et le drawer de l'assistant défilent en overflow caché, un menu laissé dans
   le flux s'y ferait couper au premier palier. Position calculée en JS. */
.max-urls-dropdown {
    position: fixed;
    display: none;
    padding: 0.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 26, 34, 0.12);
    z-index: 2147483647;
}

.max-urls-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.max-urls-option:hover {
    background: var(--surface-secondary);
}

.max-urls-option--selected {
    background: var(--primary-bg);
}

/* Sélecteur `span.` et non `.max-urls-icon` seul : `partials/icon-font.php`
   pose `.material-symbols-outlined { display: inline-block; font-size: 24px }`
   dans un <style> inline du <head>, donc APRÈS cette feuille et à spécificité
   égale — il gagnait, le `display: flex` ne s'appliquait pas et le glyphe
   restait de travers dans son carré vert, en 24px. Le nom d'élément suffit à
   passer devant. */
span.max-urls-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: var(--primary-dark);
    background: var(--primary-bg);
    border-radius: 6px;
}

/* -- Saisie libre (« Personnalisé ») ------------------------------------- */
.max-urls-field {
    position: relative;
    display: flex;
    align-items: center;
}

.max-urls-field[hidden] {
    display: none;
}

.max-urls-input {
    width: 100%;
    padding: 0.5rem 3.25rem 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.max-urls-input::placeholder {
    font-weight: 500;
    color: var(--text-placeholder);
}

.max-urls-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Suffixe ANCRÉ dans le champ (et non posé à côté) : le nombre grandit vers la
   gauche, une unité posée à droite du champ s'en éloignerait à chaque chiffre
   ajouté. `pointer-events: none` pour que le clic dessus donne quand même le
   focus au champ. */
.max-urls-suffix {
    position: absolute;
    right: 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    pointer-events: none;
}

/* -- Phrase de confirmation et avertissement ----------------------------- */
.max-urls-feedback {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.max-urls-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--warning-text);
}

.max-urls-warning[hidden] {
    display: none;
}

.max-urls-warning span.material-symbols-outlined {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.35;
    color: var(--warning);
}

@media (max-width: 640px) {
    .setting-row--stack {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .max-urls-control {
        flex-basis: auto;
    }
}

/* Onglet « robots.txt » : le robots.txt virtuel (assets/virtual-robots.js) --- */
.vrobots-pane {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* La case vit seule ici, sans la grille de règles de l'onglet Portée : sa
   bordure basse pendrait dans le vide. */
.vrobots-pane .rule-toggle {
    border-bottom: none;
    padding-bottom: 0;
}

.vrobots-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--warning);
    border-radius: 6px;
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.78rem;
    line-height: 1.4;
}

.vrobots-warning[hidden] {
    display: none;
}

.vrobots-warning .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--warning);
}

/* Le raccourci qui recoche « Respecter robots.txt » : un lien dans la phrase,
   pas un bouton — l'action est une correction, pas une décision. */
.vrobots-link {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.vrobots-editor {
    display: flex;
    flex-direction: column;
}

.vrobots-editor[hidden] {
    display: none;
}

.vrobots-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    min-height: 1.6rem;
}

.vrobots-status {
    font-size: 0.72rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrobots-reload {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vrobots-reload:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.vrobots-reload .material-symbols-outlined {
    font-size: 15px;
}

/* La zone de saisie prend toute la place du volet : un robots.txt se lit en
   entier ou ne se lit pas, et c'est le seul champ de cet onglet. */
.vrobots-textarea {
    width: 100%;
    min-height: 320px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

.vrobots-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Custom Speed Select Dropdown */
.custom-speed-select {
    position: relative;
    width: 100%;
}

/* Quand ouvert, pas de hover effect sur le trigger */
.custom-speed-select.open .speed-select-trigger {
    border-color: var(--border-color);
}

.custom-speed-select.open .speed-select-trigger:hover {
    border-color: var(--border-color);
}

.speed-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

.speed-select-trigger:hover {
    border-color: var(--primary-color);
}

.speed-select-value {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.speed-select-text {
    display: flex;
    flex-direction: column;
}

.speed-select-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.speed-select-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.speed-select-arrow {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-speed-select.open .speed-select-arrow {
    transform: rotate(180deg);
}

.speed-select-dropdown {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 2147483647;
    display: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}


.custom-speed-select.open .speed-select-dropdown {
    display: block;
}

.speed-select-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.speed-select-option:hover {
    background: var(--surface-secondary);
}

.speed-select-option.selected {
    background: rgba(78, 205, 196, 0.1);
}

.speed-select-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Speed icons colors */
.speed-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.speed-icon-very_slow {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.speed-icon-slow {
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
}

.speed-icon-fast {
    color: var(--primary-color);
    background: rgba(78, 205, 196, 0.1);
}

.speed-icon-unlimited {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

/* Sélecteur de mode */
.mode-selector {
    display: flex;
    gap: 0.5rem;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    border-color: var(--primary-color);
}

.mode-btn.active {
    border-color: var(--primary-color);
    /* `--primary-bg` et non l'ancien turquoise rgba(78,205,196,…) : reliquat
       d'avant le changement de palette, alors que la bordure juste au-dessus
       était déjà passée au vert actuel. */
    background: var(--primary-bg);
}

.mode-btn .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary-color);
}

.mode-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Onglet Scope */
.scope-section {
    margin-bottom: 1rem;
}

.scope-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.scope-section-title .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary-color);
}

.scope-section-content {
    background: transparent;
    padding: 0;
}

.domains-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.8rem;
    resize: vertical;
    min-height: 60px;
}

.domains-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.scope-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.scope-hint .material-symbols-outlined {
    font-size: 14px;
    color: var(--primary-color);
}

/* Toggle switches */
.rules-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rule-toggle:last-child {
    border-bottom: none;
}

.rule-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rule-toggle:hover {
    border-color: var(--primary-color);
}

.rule-toggle input[type="checkbox"] {
    display: none;
}

.rule-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--gray-scrollbar);
    border-radius: 10px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.rule-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--card-bg);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.rule-toggle input:checked + .rule-toggle-slider {
    background: var(--primary-color);
}

.rule-toggle input:checked + .rule-toggle-slider::after {
    transform: translateX(16px);
}

.rule-toggle-content {
    flex: 1;
}

.rule-toggle-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.rule-toggle-hint {
    display: none; /* Masqué pour gagner de la place */
}

/* Auth fields */
.auth-fields {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-grid .form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

.auth-grid .form-group input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 100%;
    font-size: 0.85rem;
}

/* Onglet Extraction */
.extractors-container {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.extractors-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.extractors-empty {
    text-align: center;
    padding: 1.25rem;
    color: var(--text-secondary);
}

.extractors-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extractors-empty-icon .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.extractors-empty h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.extractors-empty p {
    font-size: 0.8rem;
    margin: 0;
}

.extractor-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color-subtle);
}

.extractor-item:last-child {
    border-bottom: none;
}

/* Extractor inline layout */
.extractor-item .extractor-name {
    flex: 0 0 20%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Custom Extractor Type Dropdown */
.extractor-type-dropdown {
    position: relative;
    flex: 0 0 85px;
}

.extractor-type-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.extractor-type-trigger:hover {
    border-color: var(--primary-color);
}

.extractor-type-trigger .material-symbols-outlined {
    font-size: 16px;
    color: var(--text-secondary);
}

.extractor-type-options {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 2147483647;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.extractor-type-dropdown.open .extractor-type-options {
    display: block;
}

.extractor-type-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.extractor-type-option:first-child {
    border-radius: 6px 6px 0 0;
}

.extractor-type-option:last-child {
    border-radius: 0 0 6px 6px;
}

.extractor-type-option:hover {
    background: var(--surface-secondary);
}

.extractor-type-option.selected {
    background: rgba(78, 205, 196, 0.1);
    color: var(--primary-color);
    font-weight: 500;
}

.extractor-item .extractor-pattern {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.8rem;
}

.extractor-item input:focus,
.extractor-item select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Toggle switch XPath/Regex */
.extractor-type-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.type-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.type-label.active {
    color: var(--primary-color);
    font-weight: 600;
}

.type-switch {
    position: relative;
    width: 32px;
    height: 18px;
    cursor: pointer;
}

.type-switch input {
    display: none;
}

.type-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    border-radius: 9px;
    transition: background 0.3s ease;
}

.type-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--card-bg);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.type-switch input:checked + .type-switch-slider {
    background: var(--secondary-color);
}

.type-switch input:checked + .type-switch-slider::after {
    transform: translateX(14px);
}

.extractor-item-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.extractor-item-delete:hover {
    opacity: 1;
    color: var(--danger);
}

.extractor-item-delete .material-symbols-outlined {
    font-size: 18px;
}

.extractor-item-pattern input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.8rem;
}

.extractor-item-pattern input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-add-extractor {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-extractor:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ==========================================================================
   Testeur d'extracteurs — bouton de l'onglet Extraction et tiroir
   (assets/extractor-tester.js). Chargé partout où le formulaire de crawl
   l'est : popins de l'accueil et du projet, « Mode expert » de l'assistant,
   fiche de configuration d'un crawl.
   ========================================================================== */
.btn-test-extractors {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.45rem 0.8rem;
    background: var(--primary-bg);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-test-extractors:hover { border-color: var(--primary-color); }
.btn-test-extractors .material-symbols-outlined { font-size: 18px; }

.ext-tester-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001; /* au-dessus de la fiche de configuration (.cfgm, 9999) */
    display: flex;
    justify-content: flex-end;
    background: rgba(16, 26, 34, 0.4);
}
.ext-tester-overlay[hidden] { display: none; }
.ext-tester {
    width: 880px;
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.ext-tester-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.ext-tester-head h2 { margin: 0; font-size: 1.05rem; }
.ext-tester-head p { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.82rem; }
.ext-tester-close {
    background: none;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
}
.ext-tester-close:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.ext-tester-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.ext-tester-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); }
.ext-tester-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
}
.ext-tester-tabs button.active { color: var(--primary-dark); border-bottom-color: var(--primary-color); }
.ext-tester-tabs .material-symbols-outlined { font-size: 18px; }
.ext-tester-source label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; }
.ext-tester-source textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-color-strong);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    resize: vertical;
}
.ext-tester-source textarea:focus { outline: 2px solid var(--primary-color); outline-offset: -1px; }
.ext-tester-source .ext-tester-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}
.ext-tester-hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--text-tertiary); }
.ext-tester-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.ext-tester-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.ext-tester-status { font-size: 0.82rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.45rem; }
.ext-tester-status.is-error { color: var(--danger-dark); }
.ext-tester-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color-strong);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: ext-tester-spin 0.8s linear infinite;
}
@keyframes ext-tester-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ext-tester-spinner { animation-duration: 2.4s; } }

.ext-tester-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.ext-tester-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ext-tester-table th,
.ext-tester-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border-color-subtle); text-align: left; vertical-align: top; }
.ext-tester-table tbody tr:last-child > * { border-bottom: 0; }
.ext-tester-table thead th { background: var(--surface-secondary); font-weight: 600; min-width: 150px; }
.ext-tester-table thead th:first-child,
.ext-tester-table tbody th { min-width: 170px; max-width: 240px; }
.ext-tester-table tbody th { font-weight: 400; background: var(--surface-secondary-alt); }
/* La colonne des extracteurs reste visible quand on fait défiler les sources. */
.ext-tester-table thead th:first-child,
.ext-tester-table tbody th { position: sticky; left: 0; z-index: 1; }
.ext-tester-srcname { display: flex; align-items: center; gap: 0.35rem; word-break: break-all; }
.ext-tester-code { flex: none; padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; }
.ext-tester-code--ok { background: var(--success-bg); color: var(--success); }
.ext-tester-code--redirect { background: var(--warning-bg); color: var(--warning-text); }
.ext-tester-code--ko { background: var(--danger-bg); color: var(--danger-dark); }
.ext-tester-srcnote { display: block; margin-top: 0.25rem; font-weight: 400; font-size: 0.74rem; color: var(--text-secondary); }
.ext-tester-srcnote.is-error { color: var(--danger-dark); }
.ext-tester-srcdetail { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 0.7rem; color: var(--text-tertiary); word-break: break-word; }
.ext-tester-name { display: block; font-weight: 600; word-break: break-all; }
.ext-tester-type { display: inline-block; margin: 0.2rem 0; padding: 0 0.3rem; border-radius: 3px; background: var(--secondary-bg); color: var(--secondary-color); font-size: 0.68rem; font-weight: 600; }
.ext-tester-expr { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); word-break: break-all; }
.ext-tester-cell { min-width: 150px; }
.ext-tester-cell.is-na { color: var(--text-muted); }
.ext-tester-cell[data-et-ctx] { cursor: help; }
.ext-tester-cell[data-et-ctx]:hover,
.ext-tester-cell[data-et-ctx]:focus { background: var(--primary-bg); outline: none; }
.ext-tester-value { word-break: break-word; }
.ext-tester-empty { color: var(--text-tertiary); }
.ext-tester-matches { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--text-tertiary); }
.ext-tester-state { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; }
.ext-tester-state .material-symbols-outlined { font-size: 16px; }
.ext-tester-cell.is-nomatch .ext-tester-state { color: var(--warning-text); }
.ext-tester-cell.is-invalid .ext-tester-state { color: var(--danger-dark); }
.ext-tester-reason { display: block; margin-top: 0.2rem; color: var(--text-secondary); }
.ext-tester-detail { display: block; margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); word-break: break-word; }
.ext-tester-context {
    position: fixed;
    z-index: 2;
    padding: 0.6rem 0.7rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color-strong);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    pointer-events: none;
}
.ext-tester-context-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; }
.ext-tester-context pre {
    margin: 0;
    padding: 0.6rem 0.7rem;
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-primary);
}
.ext-tester-footnote { margin: 0.75rem 0 0; font-size: 0.76rem; color: var(--text-tertiary); }
html.ext-tester-open { overflow: hidden; }
@media (max-width: 640px) {
    .ext-tester-head { padding: 0.9rem 1rem 0.75rem; }
    .ext-tester-body { padding: 0.75rem 1rem 1.25rem; }
}

.extraction-help-toggle {
    margin-top: 0.75rem;
}

.extraction-help-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.extraction-help-toggle a:hover {
    color: var(--primary-color);
}

.extraction-help-toggle .material-symbols-outlined {
    font-size: 16px;
}

.extraction-help {
    background: var(--surface-secondary);
    border-radius: 6px;
    padding: 0.65rem;
    margin-top: 0.5rem;
}

.extraction-examples {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.extraction-example {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.extraction-example-type {
    background: rgba(78, 205, 196, 0.15);
    color: var(--primary-color);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 45px;
    text-align: center;
}

.extraction-example code {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.extraction-example-desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Onglet Avancé */
.advanced-section {
    margin-bottom: 1rem;
}

.advanced-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.advanced-section-title .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary-color);
}

/* Custom User-Agent Select Dropdown */
.custom-ua-select {
    position: relative;
    width: 100%;
    margin-bottom: 0.75rem;
}

.ua-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ua-select-trigger:hover {
    border-color: var(--primary-color);
}

/* Quand ouvert, pas de hover effect sur le trigger */
.custom-ua-select.open .ua-select-trigger {
    border-color: var(--border-color);
}

.custom-ua-select.open .ua-select-trigger:hover {
    border-color: var(--border-color);
}

.ua-select-value {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ua-select-text {
    display: flex;
    flex-direction: column;
}

.ua-select-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ua-select-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ua-select-arrow {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-ua-select.open .ua-select-arrow {
    transform: rotate(180deg);
}

.ua-select-dropdown {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 2147483647;
    display: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.custom-ua-select.open .ua-select-dropdown {
    display: block;
}

.ua-select-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ua-select-option:hover {
    background: var(--surface-secondary);
}

.ua-select-option.selected {
    background: rgba(78, 205, 196, 0.1);
}

.ua-select-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* UA icons colors */
.ua-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.ua-icon-scouter {
    color: var(--primary-color);
    background: rgba(78, 205, 196, 0.1);
}

.ua-icon-googlebot {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.1);
}

.ua-icon-chrome {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.ua-custom-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ua-custom-input label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ua-custom-input input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
}

/* --- IPs du crawler (onglet Avancé) ----------------------------------------
   Source : App\Crawl\CrawlerIdentity. Un encart discret sous le User-Agent :
   c'est une information de dépannage, pas un réglage. Ici et pas dans
   crawl-config.css : le composant sert aussi dans index.php et l'assistant,
   qui ne chargent pas cette feuille-là. */
.crawler-ips-desc {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.crawler-ips-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.crawler-ips-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.crawler-ips-list code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    user-select: all;
}
.crawler-ips-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}
.crawler-ips-copy:hover { border-color: var(--primary-color); color: var(--primary-dark); }
.crawler-ips-copy .material-symbols-outlined { font-size: 15px; }
.crawler-ips-copy.is-copied { border-color: var(--primary-color); color: var(--primary-dark); }

/* Headers container */
.headers-container {
    background: transparent;
    padding: 0;
}

.headers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.header-item {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color-subtle);
}

.header-item:last-child {
    border-bottom: none;
}

.header-item-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.35rem;
    align-items: center;
}

.header-item-row input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
}

.header-item-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.header-item-delete:hover {
    opacity: 1;
    color: var(--danger);
}

.header-item-delete .material-symbols-outlined {
    font-size: 18px;
}

.btn-add-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-header:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.headers-hint {
    display: none; /* Masqué */
}

/* Footer de la modal - Toujours visible */
.crawl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-secondary);
    flex-shrink: 0;
}

.crawl-modal-footer .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-launch {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-brand-fill) !important;
}

.btn-launch:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-launch .material-symbols-outlined {
    font-size: 16px;
}

/* Responsive pour la modal */
@media (max-width: 768px) {
    .crawl-modal-redesign {
        max-width: 100% !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .crawl-tabs {
        flex-wrap: wrap;
    }
    
    .crawl-tab {
        /* Les libellés sont masqués juste en dessous : plus rien à préserver,
           `min-width` doit lâcher pour que les deux lignes se répartissent. */
        flex: 1 1 50%;
        min-width: 0;
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    
    .crawl-tab span:not(.material-symbols-outlined) {
        display: none;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .speed-selector {
        flex-wrap: wrap;
    }
    
    .speed-btn {
        flex: 1 1 45%;
    }
    
    .mode-selector {
        flex-direction: column;
    }
    
    .user-agent-options {
        grid-template-columns: 1fr;
    }
    
    .auth-grid {
        grid-template-columns: 1fr;
    }

    .crawl-tab-content {
        max-height: calc(100vh - 200px);
    }

    .body-url-textarea {
        height: 150px;
        max-height: 150px;
    }
}

/* Modern Tooltips */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Le curseur suit l'ACTION, pas l'infobulle.
   ------------------------------------------------------------------------
   `tooltip.js` convertit TOUT `title=""` en `data-tooltip` — y compris sur un
   lien ou un bouton, où il est là pour nommer l'action, pas pour expliquer un
   terme. La règle ci-dessus posait alors un point d'interrogation sur un
   élément qui navigue ou qui agit : le curseur annonçait de l'aide et le clic
   changeait de page.

   La règle vit ICI, une fois, et non en correctif par composant. C'était le
   mode de réparation précédent (`.project-sidebar-item`, `.rs-support`,
   `.ds-item`…) : chaque nouvel écran portant une icône d'action avec un
   `title` reproduisait le bug, et personne ne pouvait le savoir avant de
   survoler. Une icône d'aide, elle, n'est ni un lien ni un bouton — elle garde
   `help` sans rien déclarer.

   Reste le cas des ENFANTS non interactifs d'une ligne cliquable (le titre
   d'une conversation dans une liste, par exemple) : le curseur doit y suivre
   la ligne, ce que fait `cursor: inherit` posé par le composant. Voir la note
   « Un `title` sur un élément cliquable change son curseur » de la
   documentation (Design System → Composants UI). */
a[data-tooltip],
button[data-tooltip],
summary[data-tooltip],
label[data-tooltip],
[role="button"][data-tooltip],
[data-tooltip][onclick] {
    cursor: pointer;
}

/* Tooltip Body */
.tooltip-bubble {
    position: absolute;
    background: #2C3E50;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    margin-bottom: 8px;
}

/* Flèche du Tooltip (Triangle) */
.tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #2C3E50 transparent transparent transparent;
}

/* État actif */
.tooltip-bubble.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}

/* Ajustement pour la flèche quand le tooltip est décalé */
.tooltip-bubble.show::after {
    left: 50%;
    transform: translateX(0);
}

/* Global Tooltip - Pour les attributs title (assets/tooltip.js)

   > La bulle et sa flèche partagent UNE variable
   > Elles avaient chacune la leur : `background: #2C3E50` en dur sur la bulle,
   > `var(--text-navy)` sur la flèche. Les deux coïncident en thème clair — le
   > jeton y vaut exactement #2C3E50 — mais `--text-navy` s'INVERSE en mode
   > sombre (#E8EDF0) alors que l'hexadécimal ne bouge pas : la flèche passait
   > au blanc sous une bulle restée foncée. Un même élément visuel ne peut pas
   > tirer sa couleur de deux endroits ; il n'y en a plus qu'un.

   Le fond ne suit volontairement PAS le thème : une infobulle est une surface
   flottante qui doit se détacher de ce qu'elle recouvre, et elle reste donc
   foncée dans les deux modes — comme les autres surfaces de survol de
   l'application. */
.global-tooltip {
    --tooltip-bg: #2C3E50;

    position: fixed;
    background: var(--tooltip-bg);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 99999;
}

/* Flèche vers le HAUT : la bulle est sous l'élément, le cas par défaut. */
.global-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tooltip-bg);
}

/* Flèche vers le BAS quand la bulle a basculé au-dessus de l'élément, faute de
   place en dessous (voir `positionTooltip()`). Sans cette bascule, la flèche
   restait accrochée en haut, pointant vers le vide au lieu de désigner
   l'élément survolé — et le cas est fréquent : tout ce qui est en bas d'écran. */
.global-tooltip.is-above::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--tooltip-bg);
}

.global-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* =============================================
   NOUVELLE NAVIGATION - Icon Rail + Sidebar Panel
   ============================================= */

/* Icon Rail - Barre d'icônes principale */
.icon-rail {
    width: 100px;
    min-width: 100px;
    background: linear-gradient(180deg, #1a252f 0%, #2C3E50 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0;
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    z-index: 100;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
}

.icon-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0 0.75rem;
}

/* Config en bas de l'icon rail */
.icon-rail-bottom {
    margin-top: auto;
    padding: 0 0.75rem 0.5rem;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.icon-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    position: relative;
    gap: 0.35rem;
}

.icon-rail-item .material-symbols-outlined {
    font-size: 24px;
    transition: transform 0.2s ease;
}

.icon-rail-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
    text-align: center;
    line-height: 1.3;
}

.icon-rail-item:hover {
    background: rgba(78, 205, 196, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.icon-rail-item:hover .material-symbols-outlined {
    transform: scale(1.1);
}

.icon-rail-item.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    /* Le jeton, pas `white` : le dégradé s'éclaircit en mode sombre et le blanc
       y tombe à 2,6:1 — sous le seuil lisible. `--on-brand-fill` vaut justement
       `#FFFFFF` en clair (rien ne change) et une encre sombre en mode sombre,
       où il remonte à 6,3:1. */
    color: var(--on-brand-fill);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.icon-rail-item.active .icon-rail-label {
    opacity: 1;
}

/* État "panneau ouvert" - style plus léger que active */
.icon-rail-item.panel-open:not(.active) {
    background: rgba(78, 205, 196, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.icon-rail-item.panel-open:not(.active) .icon-rail-label {
    opacity: 0.9;
}

/* Sidebar Panel - Panneau secondaire */
.sidebar-panel {
    width: 0;
    min-width: 0;
    background: #2C3E50;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
}

.sidebar-panel.open {
    width: 240px;
    min-width: 240px;
}

.sidebar-panel-section {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Activer le scroll seulement quand la classe scrollable est ajoutée (après animation) */
.sidebar-panel.open.scrollable .sidebar-panel-section {
    overflow-y: auto;
}

.sidebar-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.sidebar-panel-header .material-symbols-outlined:first-child {
    font-size: 22px;
    color: var(--primary-color);
}

.sidebar-panel-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-panel-group {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-panel-group:last-child {
    border-bottom: none;
}

.sidebar-panel-group-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-panel-group-title::before {
    content: '';
    flex: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-panel-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-panel-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.sidebar-panel-item .material-symbols-outlined {
    font-size: 20px;
    opacity: 0.7;
}

.sidebar-panel-item:hover {
    background: rgba(78, 205, 196, 0.1);
    color: white;
    border-left-color: transparent;
}

.sidebar-panel-item:hover .material-symbols-outlined {
    opacity: 1;
    color: var(--primary-color);
}

.sidebar-panel-item.active {
    background: linear-gradient(90deg, rgba(78, 205, 196, 0.2) 0%, rgba(78, 205, 196, 0.05) 100%);
    color: white;
    border-left-color: var(--primary-color);
    border-radius: 0 6px 6px 0;
    margin-left: 0;
    padding-left: calc(1rem + 0.5rem);
}

.sidebar-panel-item.active .material-symbols-outlined {
    opacity: 1;
    color: var(--primary-color);
}

/* ========================================
   Comparison Control Bar
   ======================================== */
/* ===== Project Page — Bento Layout ===== */
.pj { max-width: 1600px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }

/* Breadcrumb */
.pj-breadcrumb { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-tertiary); margin-bottom: 1.25rem; }
.pj-breadcrumb a { color: var(--text-tertiary); text-decoration: none; }
.pj-breadcrumb a:hover { color: var(--primary-color); }
.pj-breadcrumb .material-symbols-outlined { font-size: 14px; }
.pj-breadcrumb-current { color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pj-breadcrumb-current img { width: 14px; height: 14px; }

/* Bento Grid */
.pj-bento {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.pj-col-left { display: flex; flex-direction: column; gap: 1rem; width: 320px; flex-shrink: 0; }
.pj-col-center { display: flex; flex-direction: column; gap: 1rem; flex: 1; min-width: 0; }
.pj-col-right { display: flex; flex-direction: column; gap: 1rem; width: 280px; flex-shrink: 0; }
.pj-actions-float { display: flex; flex-direction: column; gap: 0.5rem; }

/* Card base */
.pj-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    /* Pas d'ombre : les surfaces de la vue projet sont delimitees par leur
       bordure seule (voir la note « Surfaces a plat » du design system). */
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.pj-card-title { font-size: 0.8rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 1rem; }
.pj-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.pj-card-count { font-size: 0.75rem; background: var(--background); color: var(--text-secondary); padding: 2px 8px; border-radius: 10px; font-weight: 600; }

/* Action buttons (floating, no card) */

.pj-btn-launch {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.85rem 1.5rem; border-radius: 12px; border: none;
    background: var(--primary-color); color: var(--on-brand-fill);
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(78,205,196,0.3);
}
.pj-btn-launch:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(78,205,196,0.4); }
.pj-btn-launch .material-symbols-outlined { font-size: 18px; }
.pj-btn-launch--disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.pj-btn-schedule {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 1rem; border-radius: 8px;
    background: none; border: 1px dashed var(--border-color);
    color: var(--text-tertiary); font-size: 0.75rem; cursor: default; opacity: 0.6;
}
.pj-btn-newcrawl {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.25rem; border-radius: 10px; border: 1px solid var(--border-color);
    background: var(--card-bg, #fff); color: var(--text-primary);
    font-size: 0.8rem; font-weight: 500; text-decoration: none; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pj-btn-newcrawl:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(78,205,196,0.15); }
.pj-btn-newcrawl .material-symbols-outlined { font-size: 16px; color: var(--primary-color); }

/* Variante PLEINE : l'écran « Crawl de liste » n'a qu'une action, elle porte
   donc le vert de marque comme « Nouveau projet » sur l'accueil.

   Les valeurs sont reproduites ici plutôt que la classe `.btn-primary-action`
   réutilisée : sur la vue projet, `data-explorer.css` la redéfinit en bouton
   BLANC à icône verte et passe après `style.css` dans le <head> — l'emprunt
   aurait donné exactement l'inverse de ce qu'on veut. L'encre passe par
   `--on-brand-fill` : en sombre le vert s'éclaircit et du blanc dessus tombe
   sous le seuil de lisibilité. */
.pj-btn-newcrawl--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--on-brand-fill);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.35);
}
.pj-btn-newcrawl--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.45);
}
.pj-btn-newcrawl--primary .material-symbols-outlined { color: inherit; }

/* Report card — Gauges */
.pj-gauges { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1rem; }
.pj-gauge { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.pj-gauge-svg { width: 56px; height: 56px; }
.pj-gauge-bg { fill: none; stroke: var(--gray-ring-track); stroke-width: 3; }
.pj-gauge-fill { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.pj-gauge-fill--primary { stroke: var(--primary-color); }
.pj-gauge-fill--info { stroke: #60a5fa; }
.pj-gauge-fill--success { stroke: #22c55e; }
.pj-gauge-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.pj-gauge-label { font-size: 0.65rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }

.pj-btn-report {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: center;
    padding: 0.5rem 1.25rem; border-radius: 8px; border: none;
    background: var(--primary-color); color: var(--on-brand-fill); text-decoration: none;
    font-size: 0.8rem; font-weight: 600;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(78,205,196,0.25);
}
.pj-btn-report:hover { background: var(--primary-dark); box-shadow: 0 3px 10px rgba(78,205,196,0.35); }
.pj-btn-report .material-symbols-outlined { font-size: 16px; }

.pj-empty-text { color: var(--text-tertiary); font-size: 0.85rem; text-align: center; }

/* Schedule card */
.pj-card--schedule { gap: 0.5rem; }
/* Schedule header */
.sched-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

/* OFF state */
.sched-off { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.75rem 0; }
.sched-off .material-symbols-outlined { font-size: 1.75rem; color: var(--text-tertiary); opacity: 0.25; }
.sched-off span:last-child { font-size: 0.75rem; color: var(--text-tertiary); }

/* Template block */
.sched-template {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.5rem 0.75rem; border-radius: 8px;
    background: var(--background, #f5f7fa);
}
.sched-template-label { font-size: 0.65rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.sched-template .pj-model-btn { background: transparent; border-color: transparent; font-size: 0.75rem; padding: 0.25rem 0.4rem; }
.sched-template .pj-model-btn:hover { border-color: var(--primary-color); }

/* Sentence builder */
.sched-sentence {
    margin-top: 0.75rem;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 0.4rem; /* row-gap plus généreux que le column-gap : lisible
                           une fois les pastilles UTC/locale repliées à la ligne */
    font-size: 0.85rem; color: var(--text-primary); line-height: 1.4;
}
#schedTimeDropdown { width: 90px; }
.sched-freq-dropdown { white-space: nowrap; }
.sched-monthday-dropdown { width: 60px; }

/* #schedTimeWrap ("à" + sélecteur d'heure + badge UTC + pastille locale) est
   un <span> — donc en flux inline normal, PAS flex — à l'intérieur du flex
   .sched-sentence. Quand ça ne tient pas sur une ligne, le repli entre le
   badge et la pastille suivait alors le line-height du texte (bien plus
   généreux qu'un gap), d'où l'espace vertical disproportionné une fois replié.
   En flex ici aussi : le gap explicite reprend la main, indépendamment du
   line-height du texte "à". */
#schedTimeWrap {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    min-width: 0; /* laisse le item flex du parent rétrécir, sinon le repli interne ne se déclenche jamais */
}

/* Badge UTC + pastille heure locale, à côté du sélecteur d'heure. Le gap du
   parent (#schedTimeWrap ci-dessus, ou .npw-schedule-sentence dans le wizard
   de création de projet) gère déjà l'espacement : pas de margin ici. */
.sched-utc-badge {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.5rem; border-radius: 999px;
    background: var(--primary-color); color: var(--on-brand-fill);
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap;
}
.sched-local-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.6rem; border-radius: 999px;
    border: 1px dashed var(--border-color);
    font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, var(--text-primary));
    white-space: nowrap;
}
.sched-local-pill .sched-local-time-value { font-weight: 700; color: var(--text-primary); }
.sched-local-tag {
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: var(--background, #f5f7fa); color: var(--text-tertiary);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Time picker dropdown */
.sched-time-custom { position: relative; display: inline-block; }
.sched-time-trigger {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border: none; border-radius: 6px;
    background: rgba(78,205,196,0.1); color: var(--primary-color);
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.sched-time-trigger:hover { background: rgba(78,205,196,0.18); }
.sched-time-trigger .material-symbols-outlined { font-size: 14px; }

.sched-time-dropdown {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
    min-width: 100%; max-height: 200px; overflow-y: auto; overflow-x: hidden;
    background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 300;
}
.sched-time-dropdown.show { display: block; }
.sched-time-option {
    padding: 0.35rem 1rem; font-size: 0.8rem; font-weight: 500;
    color: var(--text-primary); cursor: pointer; text-align: center;
    transition: background 0.1s;
}
.sched-time-option:hover { background: rgba(78,205,196,0.08); }
/* Le centrage vaut pour les options NUMÉRIQUES (heures, jour du mois) ; les
   libellés texte de la fréquence (« Toutes les semaines »… ) se lisent
   alignés à gauche, comme toute liste de texte. */
.sched-freq-dropdown .sched-time-option { text-align: left; }
.sched-time-option--active { color: var(--primary-color); font-weight: 700; background: rgba(78,205,196,0.06); }

/* Day chips */
.sched-days { display: flex; gap: 4px; margin: 0.75rem 0; }
.sched-day {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-color);
    background: var(--surface-secondary); color: var(--text-gray-soft); font-size: 0.6rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
}
.sched-day:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(78,205,196,0.05); }
.sched-day--active { background: var(--primary-color); color: var(--on-brand-fill); border-color: var(--primary-color); box-shadow: 0 2px 6px rgba(78,205,196,0.3); }
.sched-day--active:hover { background: var(--primary-dark); }

/* Next run (footer summary) */
.sched-next {
    display: flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.7rem; color: var(--text-tertiary); margin-top: 0.25rem;
}
.sched-next .material-symbols-outlined { font-size: 14px; margin-top: 0.1rem; }
.sched-next-lines { display: flex; flex-direction: column; gap: 0.2rem; }
/* Taille posée ici (pas seulement héritée de .sched-next) : réutilisée telle
   quelle hors de ce conteneur dans le wizard de création de projet
   (new-project-wizard.js), qui lui ajoute sa propre marge — pas d'icône
   "event" ni de .sched-next-lines à cet endroit-là. */
.sched-local-caption { font-size: 0.7rem; color: var(--text-tertiary); }

/* Décalage de jour entre l'heure UTC planifiée et l'heure locale du navigateur */
.sched-warning {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin-top: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 8px;
    background: var(--warning-bg); color: var(--warning-text);
    font-size: 0.75rem; line-height: 1.4;
}
.sched-warning .material-symbols-outlined { font-size: 16px; color: var(--warning); margin-top: 0.05rem; }

/* Contextual save button */
.sched-save {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 1rem; border: none; border-radius: 8px;
    background: var(--primary-color); color: var(--on-brand-fill);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 8px rgba(78,205,196,0.3);
    margin-top: 0.5rem; align-self: flex-end;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
    animation: schedSaveIn 0.2s ease;
}
.sched-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(78,205,196,0.4); }
.sched-save .material-symbols-outlined { font-size: 16px; }
.sched-save--done { background: #22c55e; }
@keyframes schedSaveIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* Supprimer la planification (I13) : discret, en bas de la carte — on la
   désactive bien plus souvent qu'on ne l'efface. */
.sched-delete {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.75rem; padding: 0.3rem 0.6rem;
    border: none; border-radius: 6px; background: none;
    color: var(--text-tertiary); font-size: 0.75rem; cursor: pointer;
}
.sched-delete:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); }
.sched-delete .material-symbols-outlined { font-size: 15px; }
/* Model selector */
.pj-model-selector { position: relative; }
.pj-model-btn {
    display: flex; align-items: center; gap: 0.4rem; width: 100%;
    padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: 8px;
    font-size: 0.8rem; color: var(--text-primary); background: var(--card-bg, #fff);
    cursor: pointer; text-align: left;
}
.pj-model-btn:hover { border-color: var(--primary-color); }
.pj-model-btn .material-symbols-outlined { font-size: 16px; color: var(--text-tertiary); }
.pj-model-btn span:last-child { margin-left: auto; }

.pj-model-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 200; max-height: 200px; overflow-y: auto;
    margin-top: 4px;
}
.pj-model-dropdown.show { display: block; }
.pj-model-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
    cursor: pointer; transition: background 0.1s; font-size: 0.8rem;
}
.pj-model-item:hover { background: rgba(78,205,196,0.06); }

.pj-toggle { position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer; }
.pj-toggle input { opacity: 0; width: 0; height: 0; }
.pj-toggle-track { position: absolute; inset: 0; background: var(--gray-ring-track); border-radius: 18px; transition: 0.25s; }
.pj-toggle-thumb { position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #FFFFFF; border-radius: 50%; transition: 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.pj-toggle input:checked + .pj-toggle-track { background: var(--primary-color); }
.pj-toggle input:checked + .pj-toggle-track .pj-toggle-thumb { left: 18px; }

/* History — Crawl rows */
.pj-crawl-list { display: flex; flex-direction: column; min-height: 490px; }

.pj-crawl-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.04);
    transition: background 0.1s;
}
.pj-crawl-row:first-child { border-top: none; }
.pj-crawl-row--clickable { cursor: pointer; }
.pj-crawl-row:hover { background: var(--hover-bg); }

/* Config icons inside crawl rows — smaller and muted */
.pj-crawl-config .config-icon { font-size: 14px; transition: opacity 0.1s; }
.pj-crawl-config .config-icon.inactive { opacity: 0.1; }
.pj-crawl-config .config-icon.active { opacity: 0.7; color: var(--text-primary); }
.pj-crawl-config .config-depth-badge { font-size: 0.6rem; }
.pj-crawl-config .config-depth-badge { font-size: 0.6rem; }
.pj-crawl-config .config-list-badge { font-size: 0.55rem; }


/* Actions hidden by default, visible on hover */

.pj-crawl-type { flex-shrink: 0; }
.pj-crawl-type .material-symbols-outlined { font-size: 16px; color: var(--text-tertiary); }

.pj-crawl-info { display: flex; align-items: center; gap: 0.5rem; width: 200px; flex-shrink: 0; }
.pj-crawl-date { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; }

/* Status pills — pastel */
.pj-status { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.pj-status--completed { background: #dcfce7; color: #166534; }
.pj-status--running { background: var(--secondary-bg); color: #1e40af; }
.pj-status--queued { background: var(--warning-bg); color: #92400e; }
.pj-status--processing { background: #e0e7ff; color: #3730a3; }
.pj-status--failed { background: var(--danger-bg); color: #991b1b; }
.pj-status--stopped { background: var(--background-frame); color: var(--text-gray); }

.pj-crawl-kpis { display: flex; gap: 1rem; flex: 1; min-width: 0; }
.pj-crawl-kpi { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.pj-crawl-kpi strong { color: var(--text-primary); font-weight: 600; }

/* Config pills */
.pj-crawl-config { display: flex; gap: 4px; flex-shrink: 0; }
.pj-pill { font-size: 0.6rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--background); color: var(--text-tertiary); }
.pj-pill--active { background: rgba(78,205,196,0.12); color: var(--primary-color); }

/* Action icon buttons */
.pj-crawl-actions { display: flex; gap: 2px; flex-shrink: 0; margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid rgba(0,0,0,0.06); }
.pj-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: none; border: none; padding: 0;
    color: var(--text-tertiary); cursor: pointer;
    text-decoration: none; transition: color 0.15s, background 0.15s;
}
.pj-icon-btn .material-symbols-outlined { font-size: 16px; }
.pj-icon-btn:hover { background: var(--background); color: var(--primary-color); }

.pj-empty { padding: 2rem; text-align: center; color: var(--text-tertiary); }
.pj-empty .material-symbols-outlined { font-size: 2.5rem; opacity: 0.3; }

/* Info box — flat list with dots */
.pj-info-list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.pj-info-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.pj-info-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pj-info-dot--neutral { background: #d1d5db; }
.pj-info-dot--success { background: #22c55e; }
.pj-info-dot--error { background: #ef4444; }
.pj-info-dot--running { background: #3b82f6; }
.pj-info-dot--pulse { animation: pjPulse 1.5s ease-in-out infinite; }
@keyframes pjPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pj-info-value { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-left: auto; }
.pj-info-label { font-size: 0.75rem; color: var(--text-secondary); }

.pj-info-size {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--background, #f5f7fa);
    font-size: 0.8rem; color: var(--text-secondary);
}
.pj-info-size .material-symbols-outlined { font-size: 16px; color: var(--text-tertiary); }
.pj-info-size strong { color: var(--text-primary); margin-left: auto; }

/* Danger zone (separate card) */
.pj-card--danger { padding: 1rem; }
.pj-danger-zone { }
.pj-danger-label { display: block; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: 0.4rem; }
.pj-btn-delete {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    width: 100%; padding: 0.45rem; border: 1px solid rgba(239,68,68,0.2); border-radius: 8px;
    background: transparent; color: var(--danger-vivid); font-size: 0.75rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; opacity: 0.6;
}
.pj-btn-delete:hover { background: var(--danger-bg); border-color: #fca5a5; opacity: 1; }
.pj-btn-delete .material-symbols-outlined { font-size: 14px; }

/* Share block */
.pj-share-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0.75rem; }
.pj-share-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.5rem; border-radius: 6px;
}
.pj-share-item:hover { background: var(--background, #f5f7fa); }
.pj-share-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary-color); color: var(--on-brand-fill);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; flex-shrink: 0;
}
.pj-share-avatar--admin { background: #8b5cf6; }
.pj-share-avatar--owner { background: #f59e0b; }
.pj-share-email { font-size: 0.75rem; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-share-role { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.pj-share-role--admin { background: #ede9fe; color: var(--accent-ai); }
.pj-share-role--owner { background: var(--warning-bg); color: #d97706; }
.pj-share-role--shared { background: var(--secondary-bg); color: var(--accent-role); }
.pj-share-remove {
    display: none; background: none; border: none; padding: 2px; cursor: pointer;
    color: var(--text-tertiary); border-radius: 4px; flex-shrink: 0;
}
.pj-share-item:hover .pj-share-remove { display: flex; }
.pj-share-remove:hover { color: var(--danger); background: var(--danger-bg); }
.pj-share-remove .material-symbols-outlined { font-size: 14px; }

.pj-share-empty { font-size: 0.75rem; color: var(--text-tertiary); text-align: center; padding: 0.5rem; }

/* Share picker */
.pj-share-add-inline { margin-top: 0.25rem; }
.pj-share-picker { position: relative; }
.pj-share-picker-btn {
    display: flex; align-items: center; gap: 0.35rem; width: 100%;
    padding: 0.4rem 0.5rem; border: 1px dashed var(--border-color); border-radius: 6px;
    background: none; color: var(--text-tertiary); font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s;
}
.pj-share-picker-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pj-share-picker-btn .material-symbols-outlined { font-size: 16px; }

.pj-share-picker-dropdown {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
    background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 200;
    max-height: 180px; overflow-y: auto;
}
.pj-share-picker-dropdown.show { display: block; }

.pj-share-picker-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; cursor: pointer; transition: background 0.1s;
}
.pj-share-picker-item:hover { background: rgba(78,205,196,0.06); }
.pj-share-picker-item .pj-share-avatar { width: 22px; height: 22px; font-size: 0.55rem; }
.pj-share-picker-item .pj-share-email { font-size: 0.75rem; }

/* Pagination */
.pj-pagination {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
    padding: 0.6rem 0.75rem; border-top: 1px solid rgba(0,0,0,0.04);
}
.pj-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: none; border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.pj-page-btn:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.pj-page-btn:disabled { opacity: 0.3; cursor: default; }
.pj-page-btn .material-symbols-outlined { font-size: 18px; }
.pj-page-info { font-size: 0.75rem; color: var(--text-tertiary); font-weight: 500; }

@media (max-width: 768px) {
    .pj { padding: 1rem; }
    .pj-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
    .pj-actions-float, .pj-card--report, .pj-card--schedule, .pj-card--info, .pj-card--history, .pj-card--share, .pj-card--danger { grid-column: 1; grid-row: auto; }
    .pj-crawl-kpis { display: none; }
    .pj-crawl-config { display: none; }
}

/* ===== Comparison Bar ===== */
.comparison-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
}

/* Label "Compare with:" */
.comparison-bar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Badge labels (used in dropdown items) */
.comparison-bar-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.comparison-bar-badge--ref {
    color: var(--primary-color);
}

.comparison-bar-badge--base {
    color: #e67e22;
}

/* Selector */
.comparison-bar-selector {
    margin-left: 0;
}

.comparison-bar-control-btn {
    background: var(--card-bg) !important;
    border: 1px solid #e67e22 !important;
    color: var(--text-primary) !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 4px rgba(230, 126, 34, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.comparison-bar-control-btn:hover {
    background: var(--warning-cream-bg) !important;
    border-color: #d35400 !important;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.2);
}

.comparison-bar-control-btn .material-symbols-outlined {
    color: #e67e22 !important;
}

.comparison-bar-selector .crawl-dropdown {
    transition: none;
    transform: none;
}

.comparison-bar-selector .crawl-dropdown.show {
    transform: none;
}

/* Swap button */
.comparison-bar-swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 6px;
    color: var(--text-tertiary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.comparison-bar-swap:hover {
    color: var(--primary-color);
    background: rgba(78, 205, 196, 0.1);
}

.comparison-bar-swap .material-symbols-outlined {
    font-size: 20px;
}

/* Close button */
.comparison-bar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.35rem;
    border-radius: 6px;
    color: var(--text-tertiary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.comparison-bar-close:hover {
    color: var(--danger);
    background: rgba(231, 76, 60, 0.1);
}

.comparison-bar-close .material-symbols-outlined {
    font-size: 20px;
}

.crawl-dropdown-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Scrollbar pour le panel - style accent vert */
.sidebar-panel::-webkit-scrollbar,
.sidebar-panel-section::-webkit-scrollbar,
.sidebar-panel *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sidebar-panel::-webkit-scrollbar-track,
.sidebar-panel-section::-webkit-scrollbar-track,
.sidebar-panel *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.sidebar-panel::-webkit-scrollbar-thumb,
.sidebar-panel-section::-webkit-scrollbar-thumb,
.sidebar-panel *::-webkit-scrollbar-thumb {
    background: rgba(78, 205, 196, 0.4);
    border-radius: 10px;
}

.sidebar-panel::-webkit-scrollbar-thumb:hover,
.sidebar-panel-section::-webkit-scrollbar-thumb:hover,
.sidebar-panel *::-webkit-scrollbar-thumb:hover {
    background: rgba(78, 205, 196, 0.6);
}

/* Firefox */
.sidebar-panel,
.sidebar-panel-section,
.sidebar-panel * {
    scrollbar-width: thin;
    scrollbar-color: rgba(78, 205, 196, 0.4) rgba(0, 0, 0, 0.1);
}

/* Ajuster le main-content pour la nouvelle navigation */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 72px);
}

.main-content {
    flex: 1;
    padding: 2rem;
    /* 60px de respiration en plus tout en bas : la bulle Sherpa IA flotte à
       24px du bord sur 56px de haut, elle recouvrait donc la fin d'un tableau
       ou d'un graphique qu'on essayait justement de lire. Avec cette marge, un
       défilement jusqu'en bas laisse le dernier élément entièrement dégagé. */
    padding-bottom: calc(2rem + 60px);
    overflow-y: auto;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .icon-rail {
        width: 70px;
        min-width: 70px;
    }
    
    .icon-rail-label {
        display: none;
    }
    
    .sidebar-panel.open {
        width: 200px;
        min-width: 200px;
    }
}

/* =============================================
   KEBAB MENU (Menu d'actions 3 points)
   ============================================= */

.kebab-menu-wrapper {
    position: relative;
    z-index: 100;
}

.btn-kebab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.btn-kebab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.btn-kebab .material-symbols-outlined {
    font-size: 22px;
}

.kebab-dropdown-menu {
    position: fixed;
    min-width: 180px;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 10000;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.kebab-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease;
}

.kebab-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.kebab-dropdown-item:hover {
    background: rgba(78, 201, 196, 0.08);
}

/* Une entrée du menu peut être un vrai lien (« Ouvrir le dernier crawl ») :
   sans ça, elle arriverait soulignée et en bleu au milieu des autres. */
a.kebab-dropdown-item {
    text-decoration: none;
    color: var(--text-primary);
}

.kebab-dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Item principal (Nouveau crawl) */
.kebab-dropdown-item.primary {
    font-weight: 600;
}

.kebab-dropdown-item.primary .material-symbols-outlined {
    color: var(--primary-color);
}

/* Item danger (Supprimer) */
.kebab-dropdown-item.danger {
    color: var(--danger);
}

.kebab-dropdown-item.danger:hover {
    background: rgba(231, 76, 60, 0.08);
}

.kebab-dropdown-item.danger .material-symbols-outlined {
    color: var(--danger);
}

/* Séparateur */
.kebab-dropdown-separator {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

/* Le choix du type de crawl a quitté la popin (voir assets/crawl-mode.js) :
   ni bascule héritée, ni contrôle segmenté ici. */

/* Badge Liste dans la colonne Configuration */
.config-list-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 22px;
    background: rgba(139, 92, 246, 0.12);
    color: var(--accent-ai);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   Bouton « Se connecter avec Google »

   Un bouton d'identification tiers ne se redessine pas : il doit ressembler à
   celui que l'utilisateur reconnaît partout ailleurs, sinon il hésite. Fond
   blanc, filet gris, logo « G » multicolore, libellé sombre — les proportions
   des guidelines Google.

   Le logo est un SVG INLINE en data-URI : aucun appel réseau, aucune
   dépendance à un CDN (même règle que les polices, cf. vendor/fonts).
   Auparavant, un simple rond bleu en CSS tenait lieu de logo — placeholder
   assumé du handoff, jamais remplacé.
   ========================================================================== */
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--border-color-strong, #DCE2E6);
    border-radius: 8px;
    background: var(--card-bg, #FFFFFF);
    color: var(--text-primary, #101A22);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.btn-google:hover {
    background: var(--sidebar-hover, #F7F9FA);
    border-color: var(--gray-scrollbar, #CBD5DB);
    text-decoration: none;
    color: var(--text-primary, #101A22);
}
.btn-google::before {
    content: '';
    width: 18px;
    height: 18px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================================
   Mode sombre — retouches ciblées de style.css
   Le reste de la bascule passe par les tokens (haut de fichier). Ici, les
   seuls cas où un token ne suffit pas : textes d'état posés sur des teintes
   rgba figées, dont la version claire est un ton FONCÉ de la teinte — en
   sombre, c'est le ton clair qui porte le contraste.
   ========================================================================= */
html.theme-dark .status-completed { color: #4CC38A; }
html.theme-dark .status-running { color: #6EB7E8; }
html.theme-dark .status-processing { color: #B08CD9; }
html.theme-dark .status-failed { color: #F08085; }

/* =========================================================================
   Bandeau « analyses incomplètes » du rapport (web/partials/main-content.php)
   -------------------------------------------------------------------------
   Affiché quand `crawls.postprocess_failed` est renseignée : le crawl a bien
   collecté ses pages, mais une étape de post-traitement n'a pas écrit sa table
   dérivée. Sans ce bandeau, le rapport se lit comme un rapport complet — un
   PageRank absent vaut 0 partout, pas « erreur ».

   Ambre et non rouge : la donnée n'est pas FAUSSE, elle est INCOMPLÈTE, et le
   rouge est réservé à ce qui est cassé côté site (4xx/5xx). En tête de contenu,
   pleine largeur, sur toutes les pages du rapport — on ne sait pas par laquelle
   l'utilisateur arrive.
   ========================================================================= */
.dash-pp-failed {
    display: flex; align-items: flex-start; gap: 0.75rem;
    margin: 0 0 1.25rem; padding: 0.9rem 1.1rem;
    border: 1px solid #E9C46A; border-left-width: 4px;
    border-radius: 10px; background: rgba(233, 196, 106, 0.12);
}
.dash-pp-failed .material-symbols-outlined { color: #B7791F; font-size: 22px; line-height: 1; }
.dash-pp-failed strong { display: block; color: var(--text-primary); font-size: 0.95rem; }
.dash-pp-failed p { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
html.theme-dark .dash-pp-failed { border-color: #A67C1A; background: rgba(233, 196, 106, 0.10); }
html.theme-dark .dash-pp-failed .material-symbols-outlined { color: #E9C46A; }

/* ==========================================================================
   Puces de filtres ET / OU (web/assets/filter-chips.js)
   Communes aux trois barres de filtres : URL Explorer, Link Explorer et
   FilterBar. Ici, dans la feuille que toutes les coquilles chargent, et non
   dans filter-bar.css que le tableau de bord ne charge pas.
   ========================================================================== */

/* Connecteurs : de vrais boutons. Cliquer « ET » fusionne les deux groupes en
   un OU ; cliquer « OU » scinde le groupe en deux ET. */
.chip-connector {
    border: 1px dashed transparent;
    background: none;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.4;
}
.chip-connector--and { color: var(--text-tertiary); margin: 0 0.15rem; }
.chip-connector--or { color: var(--primary-dark); }
.chip-connector:hover,
.chip-connector:focus-visible {
    border-color: currentColor;
    background: var(--card-bg);
    outline: none;
}

/* Un groupe OU se lit comme UN bloc. */
.chip-group--or {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(78, 205, 196, 0.08);
    border-radius: 6px;
    padding: 2px 4px;
}
.chip-group:not(.chip-group--or) { display: inline-flex; align-items: center; gap: 0.2rem; }

/* « + OU » VISIBLE en fin de groupe — le « + » au survol d'une puce était
   introuvable (retour de la beta), et inexistant au toucher. */
.chip-add-or-btn {
    border: 1px dashed var(--border-color);
    background: none;
    color: var(--text-tertiary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.chip-add-or-btn:hover,
.chip-add-or-btn:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-dark);
    outline: none;
}
/* L'ancien « + » au survol ne doit plus apparaître, où que traîne sa règle. */
.filter-chip .chip-add-or { display: none !important; }

/* Phrase de lecture sous la barre, dès qu'un OU existe. */
.filter-reading {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.filter-reading[hidden] { display: none; }