/*
 * shell.css — coquille de la refonte (sidebar
 * projet, sidebar drill-down rapport, Crawl hub, ChatBot minimal, états
 * « à venir »). Chargé uniquement par project.php et dashboard.php — ne touche
 * pas au reste de l'application (même convention que home-redesign.css /
 * project-redesign.css). Voir design_handoff_scouter_shell/README.md et
 * documentation/Rokapi/Design System/Design system.md.
 */

/* ==========================================================================
   1. Barre du haut — DÉPLACÉE
   ==========================================================================
   La barre blanche de la coquille projet est devenue la barre de TOUTE
   l'application : elle vit maintenant dans `assets/topbar.css`, chargé par
   `components/top-header.php` lui-même, donc présent sur chaque page. Il n'y a
   plus de variante `.header--shell` — il n'y a plus qu'une barre.
   ========================================================================== */

/* ==========================================================================
   2. Popover Partager le projet
   ========================================================================== */

.share-popover-wrap {
    position: relative;
}

.share-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 13px;
    box-shadow: 0 22px 50px -16px rgba(16, 26, 34, 0.32);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.share-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-popover-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color-subtle);
}

.share-popover-label {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 6px;
}

.share-popover-explain {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.share-popover-add {
    background: var(--surface-secondary-alt);
}

.share-popover-picker {
    position: relative;
}

/* Texte et icône en blanc, sur `--primary-dark` plutôt que `--primary-color` :
   sur le vert clair, du blanc mesure 2,97:1 — sous le seuil AA. Le vert foncé
   donne 5,15:1 en gardant le bouton franchement vert. Même arbitrage que la
   pilule active de Search Console. */
.share-popover-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    background: var(--primary-dark);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
}
.share-popover-picker-btn .material-symbols-outlined {
    color: inherit;
}
.share-popover-picker-btn:hover {
    filter: brightness(1.08);
}

.share-popover-picker-btn .material-symbols-outlined {
    font-size: 17px;
}

.share-popover-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 260px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 18px 40px -14px rgba(16, 26, 34, 0.28);
    display: none;
    z-index: 10;
}

.share-popover-picker-dropdown.show {
    display: block;
}

.share-popover-picker-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
}

.share-popover-picker-item:hover {
    background: var(--primary-bg);
}

.share-popover-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
}
/* Dans la liste, il n'y a pas de section pour porter les marges : sans ça,
   « Aucun partage » se collait au bord gauche et au bas du popover. Il reprend
   la géométrie d'une ligne de partage, pour tomber sur la même colonne. */
.share-popover-list .share-popover-empty {
    padding: 12px 16px 14px;
}

.share-popover-list {
    max-height: 260px;
    overflow-y: auto;
}

.share-popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color-faint);
}

.share-popover-row:last-child {
    border-bottom: 0;
}

.share-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--border-color-subtle);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

.share-avatar--owner {
    background: var(--primary-bg);
    color: var(--primary-dark);
}

.share-avatar--admin {
    background: var(--accent-ai-bg);
    color: var(--accent-ai-text);
}

.share-email {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex: none;
}

.share-role--owner { color: var(--primary-dark); }
.share-role--admin { color: var(--accent-ai-text); }

.share-popover-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    flex: none;
}

.share-popover-remove:hover {
    background: var(--danger-bg);
    color: var(--danger-dark);
}

.share-popover-remove .material-symbols-outlined {
    font-size: 16px;
}

/* ==========================================================================
   3. Sidebar projet — mode « liste plate »
   ========================================================================== */

.project-shell-body {
    display: flex;
    min-height: calc(100vh - 60px);
    background: var(--background);
}

/* Collante sur la hauteur de l'écran, avec son propre défilement.
   Sans cela elle s'étire à la hauteur du DOCUMENT : sur une page longue, le
   retour « Mes projets » (et le support, côté projet) se retrouve tout en bas,
   à mille pixels du regard. Elle occupe donc l'écran moins la barre du haut
   (60px, elle-même collante à top:0), et c'est le contenu de droite qui défile.
   `align-self: flex-start` est indispensable : sans lui, l'étirement par défaut
   du conteneur flex lui redonne la hauteur du document et annule le collant. */
.project-sidebar {
    width: 252px;
    flex: none;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    position: sticky;
    top: 60px;
    align-self: flex-start;
    height: calc(100vh - 60px);
    transition: width 0.15s ease;
}

.project-sidebar.collapsed {
    width: 68px;
}

.project-sidebar-collapse {
    position: absolute;
    top: 10px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.project-sidebar-collapse .material-symbols-outlined {
    font-size: 16px;
}

.project-sidebar-collapse:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
}

/* Seule la liste des destinations défile, si elle déborde ; le bas de la
   sidebar reste posé sur le bord inférieur. `min-height: 0` lève le minimum
   implicite des éléments flex, sans quoi la liste pousse le bas hors de vue au
   lieu de défiler. */
.project-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 24px;
    overflow-y: auto;
    min-height: 0;
}

/* Intertitre de groupe. Même graphie que celui de l'accueil
   (`.hp-sidebar-heading`) : c'est le même meuble, la hiérarchie doit s'y lire
   pareil. Discret par construction — il structure la liste, il ne rivalise pas
   avec les destinations. */
.project-sidebar-group-title {
    padding: 14px 10px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

/* Replié, le rail fait 68px : le mot n'y tient pas. On garde la COUPURE, qui
   reste informative, et on retire le texte — plutôt qu'un intitulé tronqué qui
   ne dirait rien. */
.project-sidebar.collapsed .project-sidebar-group-title {
    padding: 0;
    height: 1px;
    margin: 10px 14px;
    /* `--border-color` et non sa variante « subtle » : sur fond blanc, cette
       dernière était invisible — un filet qu'on ne voit pas ne regroupe rien. */
    background: var(--border-color);
    color: transparent;
    font-size: 0;
}

.project-sidebar-sep {
    height: 1px;
    background: var(--border-color-subtle);
    margin: 8px 4px;
}

.project-sidebar-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    /* Each item carries a `title` (tooltip on the collapsed rail), which the
       global tooltip system (style.css [data-tooltip]) turns into a "help"
       cursor — wrong here, these are real navigation links. */
    cursor: pointer;
}

.project-sidebar-item:hover {
    background: var(--sidebar-hover);
}

.project-sidebar-item.active {
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-weight: 600;
}

/* Pastille grise au repos, couleur du groupe à l'état ACTIF : c'est la
   sélection qui se signale, pas la liste entière. */
.project-sidebar-item .project-sidebar-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--gray-scrollbar);
    margin: 0 3px;
}

.project-sidebar-item.active .project-sidebar-dot {
    background: var(--item-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--item-color) 15%, transparent);
}

.project-sidebar-item .project-sidebar-tile {
    display: none;
}

.project-sidebar-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-sidebar-suffix {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    flex: none;
}

.project-sidebar-badge {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.project-sidebar-badge--ai {
    background: var(--accent-ai-bg);
    color: var(--accent-ai-text);
}

.project-sidebar-badge--soon {
    background: var(--border-color-subtle);
    color: var(--text-muted);
}

.project-sidebar-badge--connect {
    background: var(--secondary-bg);
    color: var(--secondary-color);
}

.project-sidebar-badge--todo {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* Mode replié : tuiles mono 38x38, label/point masqués, indicateur 3px à gauche */
.project-sidebar.collapsed .project-sidebar-nav {
    align-items: center;
}

.project-sidebar.collapsed .project-sidebar-item {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    margin: 2px auto;
}

.project-sidebar.collapsed .project-sidebar-item .project-sidebar-dot,
.project-sidebar.collapsed .project-sidebar-item .project-sidebar-label,
.project-sidebar.collapsed .project-sidebar-item .project-sidebar-suffix,
.project-sidebar.collapsed .project-sidebar-item .project-sidebar-badge {
    display: none;
}

.project-sidebar.collapsed .project-sidebar-item .project-sidebar-tile {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.project-sidebar.collapsed .project-sidebar-item.active {
    background: var(--primary-bg);
}

.project-sidebar.collapsed .project-sidebar-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--item-color);
}

.project-sidebar-bottom {
    margin-top: auto;
    flex: none;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-sidebar-usage {
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--surface-secondary);
    padding: 12px;
}

.project-sidebar.collapsed .project-sidebar-usage {
    padding: 8px 4px;
}

.project-sidebar-usage-head {
    margin-bottom: 8px;
}

.project-sidebar-usage-title {
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.project-sidebar.collapsed .project-sidebar-usage-head {
    display: none;
}

.project-sidebar-gauge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.project-sidebar-gauge-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.project-sidebar-gauge-value {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-sidebar.collapsed .project-sidebar-usage {
    display: none;
}

.project-sidebar-support {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 13.5px;
    text-decoration: none;
    /* Porte un `title` (tooltip), que le système global de tooltip transforme
       en `data-tooltip` → `cursor: help` (style.css) — faux, c'est un vrai
       lien. Même correctif que `.project-sidebar-item`. */
    cursor: pointer;
}

.project-sidebar-support:hover {
    background: var(--sidebar-hover);
}

/* Support est aussi une DESTINATION (pages/support.php) : quand on y est, le
   pied doit le dire, exactement comme un item de liste le fait. Sans cet état,
   la sidebar d'administration était la seule à ne rien marquer sur sa propre
   page — elle portait Support dans sa liste, où l'état actif existait déjà. */
.project-sidebar-support.active {
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-weight: 600;
}

.project-sidebar.collapsed .project-sidebar-support {
    justify-content: center;
}

.project-sidebar.collapsed .project-sidebar-support .project-sidebar-label {
    display: none;
}

/* ==========================================================================
   4. Sidebar drill-down — rapport de crawl
   ========================================================================== */

/* dashboard.php garde .dashboard-layout / .main-content (style.css) ; on
   ajuste juste la hauteur au nouveau header 60px (l'ancien était ~72px). */
.dashboard-layout {
    min-height: calc(100vh - 60px);
}

.report-sidebar {
    width: 300px;
    flex: none;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    /* Hauteur d'écran fixe, et c'est la LISTE qui défile — pas l'aside.
       En faisant défiler l'aside entier, le `margin-top: auto` de l'encart
       d'aide le poussait hors de la zone défilable : avec tous les groupes
       dépliés il se retrouvait à 2661px pour un contenu de 2631px, donc
       inatteignable, quoi qu'on fasse défiler. Voir .rs-supergroups. */
    height: calc(100vh - 60px);
    overflow: visible;
    position: sticky;
    top: 60px;
    align-self: flex-start;
}

.rs-back {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}

.rs-back:hover {
    background: var(--sidebar-hover);
    text-decoration: none;
}

.rs-back .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-muted);
}

.rs-crawl-card {
    position: relative;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--surface-secondary);
    margin-bottom: 16px;
}

.rs-crawl-card-label {
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 7px;
}

.rs-crawl-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rs-crawl-card-date {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.rs-crawl-card-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rs-crawl-card-selector-btn {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rs-crawl-card-selector-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

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

/* Le menu épouse la carte qui l'ouvre — un select enrichi, rien de plus.
   Il était calé à droite sur une largeur fixe de 300px, alors que la carte n'en
   fait que 275 dans une sidebar de 300 : il débordait de 14px À GAUCHE DE
   L'ÉCRAN, et c'est le début de chaque date qui se retrouvait coupé — justement
   ce qu'on vient y lire. `left: 0` + `right: 0` + `width: auto` le fait
   s'étendre exactement d'un bord à l'autre de la carte. */
.rs-crawl-dropdown {
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

.rs-compare-link {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: none;
}

.rs-compare-link:hover {
    text-decoration: underline;
}

.rs-compare-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary-color);
}

/* La seule zone qui défile. `min-height: 0` lève le minimum implicite des
   éléments flex, sans quoi la liste pousserait le bas de la sidebar hors de vue
   au lieu de défiler. Le haut (retour, carte du crawl) et le bas (liens directs,
   encart d'aide) restent posés, donc toujours atteignables. */
.rs-supergroups {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.rs-supergroup-header {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
}

.rs-supergroup-header:hover {
    background: var(--sidebar-hover);
}

.rs-supergroup.open > .rs-supergroup-header {
    color: var(--primary-dark);
}

.rs-supergroup-icon {
    font-size: 19px;
    color: var(--text-muted);
}

.rs-supergroup.open .rs-supergroup-icon {
    color: var(--primary-color);
}

.rs-supergroup-label {
    flex: 1;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.rs-supergroup-chevron {
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.rs-supergroup.open .rs-supergroup-chevron {
    transform: rotate(180deg);
}

.rs-supergroup-body {
    padding: 4px 0 10px 4px;
}

.rs-group {
    margin-bottom: 6px;
}

.rs-group-title {
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding: 6px 10px 4px;
}

.rs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px 7px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Une entrée qui OUVRE quelque chose (popin) au lieu de naviguer est un
   <button> : un <a> promettrait une adresse qu'il ne suit pas. Il lui faut la
   remise à zéro dont un <a> n'a pas besoin, sans quoi elle se distingue de ses
   voisines par sa police et son alignement. */
button.rs-item {
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.rs-item:hover {
    background: var(--sidebar-hover);
    text-decoration: none;
}

.rs-item.active {
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-weight: 600;
}

.rs-item-icon {
    font-size: 17px;
    color: var(--text-muted);
}

.rs-item.active .rs-item-icon {
    color: var(--primary-color);
}

.rs-bottom-links {
    flex: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color-subtle);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-bottom-links .rs-item {
    padding-left: 10px;
}

/* L'encart d'aide de la sidebar drill-down a été remplacé par le lien Support
   (voir components/sidebar-navigation.php) : ses règles `.rs-help*` sont parties
   avec lui. */

/* ==========================================================================
   5. project.php — coquille multi-vues (Crawl hub / ChatBot / à venir)
   ========================================================================== */

.pj-shell-main {
    flex: 1;
    min-width: 0;
    padding: 24px 26px;
    overflow-y: auto;
}

/* Reskin léger des cartes .pj-card / .pjx-* existantes (project-redesign.css)
   pour se rapprocher des rayons/ombres du nouveau système sans réécrire leur
   structure — elles héritent déjà des nouvelles couleurs/polices via les
   tokens globaux (style.css :root). */
.pj-shell-main .pj-card,
.pj-shell-main .pjx-state,
.pj-shell-main .pjx-history,
.pj-shell-main .pj-card--schedule {
    border-radius: 13px;
    border-color: var(--border-color);
}

/* --- En-tête de vue : un seul gabarit pour toutes ---------------------------

   La vue Search Console pose le gabarit (`.gsc-header`) : un titre de 25px,
   une ligne de contexte dessous, et une respiration franche avant le contenu.
   Data Explorer et Segments utilisaient `.de-header`, qui portait son PROPRE
   padding (20px 24px) — lequel s'ajoutait à celui de `.pj-shell-main`. D'où un
   titre décalé vers la droite et vers le bas par rapport à toutes les autres
   vues, et une tagline collée au contenu faute de marge basse.
   On neutralise le padding interne et on aligne le rythme sur `.gsc-header`. */
.pj-shell-main .de-header {
    padding: 0;
    margin: 1rem 0 1.25rem;
}

/* La MISE EN PAGE de l'en-tête vit ici, pas dans la feuille d'une vue.
   `.de-header` est partagé par Data Explorer, Segments, API/MCP et Datasets ;
   son `display: flex` n'était déclaré que dans `data-explorer.css`, si bien
   que les autres vues dépendaient d'une feuille qui ne les concerne pas pour
   aligner leur propre titre. Même gabarit que `.gsc-header` : titre et
   contexte à gauche, actions de page à droite, alignées sur la ligne de
   contexte. */
.pj-shell-main .de-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pj-shell-main .de-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Le bloc titre absorbe la largeur restante et peut rétrécir : une tagline
   longue (Datasets) faisait sinon passer le bouton d'action À LA LIGNE sous
   elle, `.de-header` étant en `flex-wrap: wrap`. Elle se répartit maintenant
   sur deux lignes et l'action reste à droite. */
.pj-shell-main .de-header-title {
    flex: 1;
    min-width: 0;
}

.pj-shell-main .de-header-title h1 {
    font-size: 25px;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}

.pj-shell-main .de-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* --- Vues « pleine hauteur » : Data Explorer et Segments --------------------

   Ces deux vues sont des ateliers : panneau de gauche + zone de travail, le
   tout devant tenir dans l'écran, chaque panneau défilant pour son compte.
   Elles calculaient leur hauteur en `calc(100vh - 72px)`, valeur accordée aux
   anciennes pages autonomes. Dans la coquille s'ajoutent la barre (60px), le
   padding de `.pj-shell-main` et l'en-tête de la vue : le bas dépassait, et
   avec lui le bouton d'enregistrement de Segments.

   Plutôt qu'un nouveau calcul magique — qui casserait au prochain changement de
   chrome — on borne la coquille et on laisse la vue prendre ce qui reste.
   `:has()` fait la détection : pas de classe à poser côté serveur, ce qui
   compte puisque `<main>` n'est PAS re-rendu lors d'un swap htmx. */
.project-shell-body:has(.sql-workspace-container),
.project-shell-body:has(.categorize-layout),
.project-shell-body:has(.datasets-view),
.project-shell-body:has(.ai-generations-view) {
    height: calc(100vh - 60px);
    min-height: 0;
}

.pj-shell-main:has(.sql-workspace-container),
.pj-shell-main:has(.categorize-layout),
.pj-shell-main:has(.datasets-view),
.pj-shell-main:has(.ai-generations-view) {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* ce sont les panneaux internes qui défilent */
    padding-bottom: 0;         /* la vue va jusqu'au bord bas */
}

/* L'en-tête garde sa hauteur naturelle, l'atelier prend le reste. */
.pj-shell-main:has(.sql-workspace-container) > .de-header,
.pj-shell-main:has(.categorize-layout) > .de-header,
.pj-shell-main:has(.datasets-view) > .de-header,
.pj-shell-main:has(.ai-generations-view) > .de-header {
    flex: none;
}

/* Les mêmes bornes pour la coquille DASHBOARD, qui monte désormais Segments
   (`pages/segments.php`). Ses conteneurs portent d'autres noms, d'où la
   répétition : `.dashboard-layout` et `.main-content` au lieu de
   `.project-shell-body` et `.pj-shell-main`.

   Sans elles, l'atelier n'était borné par rien : c'est la PAGE entière qui
   défilait, éditeur et tableau compris, au lieu de tenir dans l'écran avec
   chaque panneau défilant pour son compte — le comportement qu'on a côté
   projet.

   60px et non les `72px` que `.dashboard-layout` emploie ailleurs : la barre
   fait bien 60px (`topbar.css`), les 72 sont une valeur héritée d'un chrome
   plus ancien. On ne la corrige pas ici — elle ne sert qu'à un `min-height`,
   et la déplacer toucherait tous les rapports. */
.dashboard-layout:has(.categorize-layout) {
    height: calc(100vh - 60px);
    min-height: 0;
}

.main-content:has(.categorize-layout) {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* ce sont les panneaux internes qui défilent */
    padding-bottom: 0;
}

/* Le titre garde sa hauteur naturelle, l'atelier prend le reste. */
.main-content:has(.categorize-layout) > .page-title { flex: none; }

.main-content .categorize-layout {
    flex: 1;
    height: auto;
    max-height: none;
    /* Repli si `:has()` n'est pas supporté : la vue reste utilisable, elle
       occupe simplement une hauteur raisonnable au lieu de la place exacte.
       Même valeur que côté projet. */
    min-height: 70vh;
}

.pj-shell-main .sql-workspace-container,
.pj-shell-main .categorize-layout,
.pj-shell-main .datasets-view,
.pj-shell-main .ai-generations-view {
    height: auto;
    max-height: none;
    /* Repli si `:has()` n'est pas supporté : la vue reste utilisable, elle
       occupe simplement une hauteur raisonnable au lieu de la place exacte. */
    min-height: 70vh;
}

/* Les deux ateliers annulaient ici le padding latéral de la coquille
   (`margin: 0 -26px`) pour aller d'un bord à l'autre, en zones soudées sans
   marge ni rayon. Ils sont passés aux CARTES (voir data-explorer.css et
   segments.css) : ils restent donc dans le padding de la coquille, comme
   Crawl, Search Console ou API/MCP. Data Explorer, qui seul peut avoir besoin
   d'étaler une requête large, rend cette largeur à la demande par son bouton
   plein écran (⤢ dans la barre d'onglets). */

/* Cas nominal : la coquille est bornée, la vue prend exactement ce qui reste.
   `min-height: 0` est indispensable — sans lui un enfant flex refuse de
   descendre sous la hauteur de son contenu, et le panneau déborde à nouveau
   par le bas, emportant le bouton d'enregistrement. */
.pj-shell-main:has(.sql-workspace-container) .sql-workspace-container,
.pj-shell-main:has(.categorize-layout) .categorize-layout,
.pj-shell-main:has(.datasets-view) .datasets-view,
.pj-shell-main:has(.ai-generations-view) .ai-generations-view {
    flex: 1 1 auto;
    min-height: 0;
}

/* --- ChatBot minimal ------------------------------------------------- */

.chat-view {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px - 52px);
    align-items: center;
}

.chat-view-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 40px 20px;
}

.chat-view-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-color);
    margin-bottom: 18px;
}

.chat-view-title {
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.chat-view-subtitle {
    font-size: 14.5px;
    color: var(--text-tertiary);
    margin: 8px 0 28px;
}

.chat-view-input {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 720px;
    max-width: 100%;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--border-color-strong);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 4px 14px -6px rgba(16, 26, 34, 0.12);
}

.chat-view-input input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    background: transparent;
    color: var(--text-primary);
}

.chat-view-input input::placeholder {
    color: var(--text-placeholder);
}

.chat-view-input button {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--primary-on);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.55;
}

.chat-view-recent {
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    padding: 18px 26px;
    margin: 0 -26px -24px;
}

.chat-view-recent-title {
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 10px;
}

.chat-view-recent-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-view-recent-empty .material-symbols-outlined {
    font-size: 22px;
    opacity: 0.6;
}

/* --- États « à venir » ------------------------------------------------- */

.coming-soon-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 60px - 52px);
    padding: 40px 20px;
    max-width: 460px;
    margin: 0 auto;
}

.coming-soon-icon {
    font-size: 40px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.coming-soon-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.coming-soon-text {
    font-size: 13.5px;
    color: var(--text-tertiary);
    line-height: 1.55;
    margin: 0 0 16px;
}

.coming-soon-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--border-color-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Sélecteur de crawl de la sidebar rapport — un select enrichi, pas un panneau

   `.crawl-dropdown` vient de la barre du haut, où il flottait au-dessus d'une
   page entière : 320px minimum, ancré à droite, grande ombre. Rapporté dans une
   sidebar de 275px, il débordait de 14px À GAUCHE DE L'ÉCRAN — le début de
   chaque date était coupé, et c'est justement ce qu'on vient y lire.

   Ici il épouse la carte qui l'ouvre, et rien de plus.
   -------------------------------------------------------------------------- */

.rs-crawl-card .crawl-dropdown {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 34px -12px rgba(16, 26, 34, 0.28);
}

/* Lignes resserrées : au format d'une liste de sélection, pas d'une carte. */
.rs-crawl-card .crawl-dropdown-item {
    padding: 9px 11px;
    border-bottom: 1px solid var(--border-color-faint);
}
.rs-crawl-card .crawl-dropdown-item:last-child {
    border-bottom: 0;
}
.rs-crawl-card .crawl-dropdown-item:hover {
    background: var(--primary-bg);
}
.rs-crawl-card .crawl-dropdown-item.active {
    background: var(--primary-bg);
}
.rs-crawl-card .crawl-item-date {
    font-size: 13px;
}
.rs-crawl-card .crawl-item-id {
    font-family: var(--font-mono);
    font-size: 10.5px;
}
.rs-crawl-card .crawl-item-stats {
    font-size: 10.5px;
    margin-top: 1px;
}
/* Le badge « crawl courant » devient une pastille discrète : dans une liste où
   une seule ligne est active et déjà surlignée, il n'a plus à crier. */
.rs-crawl-card .crawl-item-badge {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 9.5px;
    letter-spacing: 0.03em;
    background: var(--primary-bg);
    color: var(--primary-dark);
}

/* Support, en pied de la sidebar drill-down — mêmes dimensions et mêmes états
   que `.project-sidebar-support` de la coquille projet : c'est la même
   destination, elle doit se présenter pareil. */
.rs-support {
    flex: none;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 13.5px;
    text-decoration: none;
    /* Même correctif que `.project-sidebar-item`/`.project-sidebar-support` :
       le `title` devient `data-tooltip` (tooltip.js) → cursor:help sinon. */
    cursor: pointer;
}
.rs-support:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.rs-support .material-symbols-outlined {
    font-size: 19px;
}

/* ==========================================================================
   5. Sélecteur de langue — pied de sidebar
   --------------------------------------------------------------------------
   Composant partagé par les quatre coquilles (accueil, projet, rapport de
   crawl, administration), toujours au même endroit : juste au-dessus de
   Support. Voir `web/components/language-switcher.php`.

   Il remplace la rangée de codes à deux lettres du menu de l'avatar, que
   personne ne trouvait : un contrôle nommé, avec drapeau et langue écrite dans
   sa propre langue, se reconnaît sans qu'on ait à le chercher.
   ========================================================================== */

.lang-switch {
    position: relative;
    flex: none;
}

.lang-switch-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lang-switch-trigger:hover {
    border-color: var(--border-color-strong);
    background: var(--sidebar-hover);
}

.lang-switch-trigger:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.lang-switch-globe {
    font-size: 18px;
    color: var(--text-secondary);
    flex: none;
}

/* Le nom prend toute la place restante et s'ellipse : « Português » dans une
   sidebar rétrécie ne doit pas pousser le chevron hors du bouton. */
.lang-switch-current {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-switch-caret {
    font-size: 18px;
    color: var(--text-muted);
    flex: none;
    transition: transform 0.15s ease;
}

.lang-switch.is-open .lang-switch-caret {
    transform: rotate(180deg);
}

/* Ouverture VERS LE HAUT : le composant est ancré en bas d'une colonne pleine
   hauteur, un menu descendant sortirait de l'écran. */
.lang-switch-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 196px;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    z-index: 60;
}

.lang-switch-menu[hidden] {
    display: none;
}

.lang-switch-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
}

.lang-switch-option:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.lang-switch-option.is-active {
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-weight: 600;
}

.lang-switch-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le drapeau est un SVG inline (aucune police d'emoji drapeau sur Windows) :
   la vignette porte le rayon et le liseré, le SVG remplit la boîte. */
.lang-switch-flag {
    flex: none;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lang-switch-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lang-switch-flag-code {
    width: 100%;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-switch-check {
    flex: none;
    font-size: 18px;
    color: var(--primary-dark);
    visibility: hidden;
}

.lang-switch-option.is-active .lang-switch-check {
    visibility: visible;
}

/* Sidebar repliée : il ne reste que le globe. Le menu, lui, garde sa largeur
   lisible et déborde sur le contenu — c'est un menu, il se referme. */
.project-sidebar.collapsed .lang-switch-trigger {
    justify-content: center;
    padding: 8px 0;
}

.project-sidebar.collapsed .lang-switch-current,
.project-sidebar.collapsed .lang-switch-caret {
    display: none;
}

.project-sidebar.collapsed .lang-switch-menu {
    right: auto;
    width: 196px;
}

/* Coquille du rapport de crawl : son pied n'a pas de conteneur `-bottom`, les
   deux éléments s'y suivent directement. On y reprend l'espacement du pied des
   autres coquilles (12px au-dessus du bloc, 8px entre les deux). */
.report-sidebar .lang-switch {
    margin-top: 12px;
}

.report-sidebar .lang-switch + .rs-support {
    margin-top: 8px;
}