/* --- DESIGN SYSTEM CHANV OFFICIAL (APPS HUB) --- */
:root {
    --chanv-blanc: #FFFFFF;
    --chanv-beige: #DDCBA4;
    --chanv-fibre: #F1EADA;
    --chanv-terre: #282828;

    --bg-main: var(--chanv-blanc);
    --bg-alternate: var(--chanv-fibre);
    --text-main: var(--chanv-terre);
    --accent: var(--chanv-beige);

    --shadow-soft: 0 4px 20px rgba(40, 40, 40, 0.05);
    --shadow-bold: 0 12px 40px rgba(40, 40, 40, 0.1);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--chanv-blanc);
    background-image: radial-gradient(var(--chanv-fibre) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0;
    min-height: 100vh;
}

h1,
h2,
h3,
.dash-title {
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.hidden {
    display: none !important;
}

/* --- HEADER --- */
.main-header {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    padding: 40px 20px 90px;
    position: relative;
    overflow: hidden;
}

.main-header::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--chanv-blanc);
    transform: skewY(-2deg);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
}

.header-titles h1 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.header-titles p {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 4px;
    opacity: 0.7;
    max-width: 280px;
}

.logo-wrapper {
    text-decoration: none;
    display: flex;
    align-items: center;
    background: var(--chanv-fibre);
    padding: 12px 18px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    flex-shrink: 0;
}

.logo-wrapper:hover {
    filter: brightness(0.97);
    box-shadow: var(--shadow-bold);
}

.main-logo {
    height: 40px;
    display: block;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* --- Global FR/EN Language Toggle --- */
.header-lang-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 3px;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

.lang-toggle-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-toggle-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
}

.lang-toggle-btn.active {
    background: var(--chanv-beige);
    color: var(--chanv-terre);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.view-toggle {
    display: flex;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 600px;
}

.toggle-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.toggle-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.05);
}

.toggle-btn.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.2);
}

.toggle-btn.active .toggle-label {
    color: white;
}

.header-user-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* --- AVATAR + BURGER BUTTON --- */
.avatar-burger-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.avatar-burger-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: var(--transition);
}

.avatar-burger-btn:hover .avatar-burger-inner {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.avatar-burger-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    transition: var(--transition);
}

.avatar-burger-btn:hover .avatar-burger-photo {
    border-color: rgba(255, 255, 255, 0.5);
}

.avatar-burger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 16px;
}

.avatar-burger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    transition: var(--transition);
}

.avatar-burger-icon span:nth-child(2) {
    width: 70%;
}

.avatar-burger-btn:hover .avatar-burger-icon span {
    background: white;
}

.avatar-burger-btn:hover .avatar-burger-icon span:nth-child(2) {
    width: 100%;
}

.user-details {
    text-align: right;
}

.header-user-section .user-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none;
}

.header-user-section .user-role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6) !important;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    object-fit: cover;
}

/* --- ECOSYSTEM DROPDOWN --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /* Accolé au bouton */
    background-color: white;
    min-width: 240px;
    box-shadow: var(--shadow-bold);
    border-radius: var(--radius);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid var(--chanv-fibre);
}

.dropdown-section {
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    background: #fafafa;
    border-bottom: 1px solid var(--chanv-fibre);
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.2s;
}

.dropdown-content a {
    color: var(--chanv-terre);
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--chanv-fibre);
}

/* --- DASHBOARD --- */
.container-dashboard {
    max-width: 1200px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.welcome-section {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.welcome-left {
    flex-shrink: 0;
}

.welcome-section h2 {
    font-size: 28px;
    color: var(--chanv-terre);
}

.welcome-right {
    text-align: right;
    min-width: 0;
}

.welcome-date {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--chanv-terre);
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.welcome-quote {
    font-size: 13px;
    font-style: italic;
    color: #888;
    margin: 0;
    line-height: 1.5;
    max-width: 420px;
    margin-left: auto;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 20px;
    min-height: 200px;
}

.category-header {
    grid-column: 1 / -1;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--chanv-terre);
    padding: 8px 0 0;
    border-bottom: 2px solid var(--chanv-beige);
    margin-top: 10px;
}

.category-header:first-child {
    margin-top: 0;
}

.restricted-notice {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
    max-width: 600px;
    margin: 40px auto;
}

.notice-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.restricted-notice h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--chanv-terre);
}

.restricted-notice p {
    color: #666;
    margin: 5px 0;
}

.app-tile {
    background: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--chanv-fibre);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Tiles with image: no top padding, image fills card */
.app-tile.has-image {
    padding: 0;
}

/* Tiles with emoji only: keep padding */
.app-tile.emoji-only {
    padding: 24px 16px;
}

.app-tile:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-bold);
    border-color: var(--chanv-beige);
}

.app-icon {
    font-size: 40px;
    margin-bottom: 14px;
}

/* Image icon: fills the card width */
.app-icon-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chanv-fibre);
    overflow: hidden;
}

.app-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-icon-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

/* Site tiles: logos need contain, not cover */
.app-tile.site-tile .app-icon-image img {
    object-fit: contain;
    padding: 20px;
}

.app-tile-text {
    padding: 10px 12px 14px;
    width: 100%;
}

.app-name {
    font-family: 'Outfit';
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 3px;
}

.app-desc {
    font-size: 0.8em;
    color: #666;
    line-height: 1.4;
}

/* --- BOUTONS --- */
.btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--chanv-beige);
    color: var(--chanv-terre);
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.btn-ecosystem {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ecosystem:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-admin {
    background: var(--chanv-terre);
    color: white;
}

.btn-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-help:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Emoji Picker */
.emoji-field-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.emoji-field-row input { flex: 1; }

.emoji-picker-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
    flex-shrink: 0;
}

.emoji-picker-btn:hover {
    background: var(--chanv-fibre);
    transform: scale(1.08);
}

.emoji-picker-dropdown {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid var(--chanv-fibre);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    width: 300px;
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-picker-dropdown.hidden { display: none; }

.emoji-picker-item {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.emoji-picker-item:hover {
    background: var(--chanv-fibre);
}

/* Footer */
.app-footer {
    text-align: center;
    padding: 24px 16px;
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
body[data-gtheme="dark"] .app-footer {
    color: rgba(255,255,255,0.35);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-logout:hover {
    background: rgba(229, 62, 62, 0.25);
    color: #fff;
}

/* --- MODALS & ADMIN --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    max-width: 600px;
    width: 100%;
    position: relative;
    margin: auto 0;
}

.admin-modal {
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal > h2,
.admin-modal > .admin-tabs,
.admin-modal > .close-modal {
    flex-shrink: 0;
}

.admin-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    margin: 30px 0;
    border-bottom: 2px solid var(--chanv-fibre);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--chanv-beige) transparent;
    padding-bottom: 4px;
}

.admin-tabs::-webkit-scrollbar {
    height: 4px;
}
.admin-tabs::-webkit-scrollbar-thumb {
    background: var(--chanv-beige);
    border-radius: 4px;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn.active {
    color: var(--chanv-terre);
    border-bottom: 3px solid var(--chanv-beige);
}

/* --- ADMIN TABLES & SEARCH --- */
.admin-header-actions {
    margin-bottom: 20px;
}

.search-wrapper {
    position: relative;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 11px;
    font-size: 14px;
    pointer-events: none;
}

.search-wrapper input {
    padding-left: 45px;
}

.admin-table-wrapper {
    background: #fafafa;
    border-radius: var(--radius);
    border: 1px solid var(--chanv-fibre);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th {
    background: #f0f0f0;
    padding: 12px 20px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.admin-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--chanv-fibre);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-fibre);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    color: var(--chanv-terre);
}

.user-email {
    font-size: 11px;
    color: #999;
}

.role-select {
    padding: 6px 12px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: white;
    cursor: pointer;
}

.timestamp {
    font-size: 12px;
    color: #999;
}

/* --- BADGES & BUTTONS --- */
.access-badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.access-badge.public {
    background: #E6FFFA;
    color: #2C7A7B;
}

.access-badge.restreint {
    background: #FFF5F5;
    color: #C53030;
}

.btn-settings {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-settings:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-beige);
    transform: translateY(-1px);
}

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.btn-icon:hover {
    background: var(--chanv-fibre);
    transform: scale(1.05);
}

.btn-icon-danger:hover {
    background: #FFE5E5;
    border-color: #FEB2B2;
}

.loading,
.error {
    text-align: center;
    padding: 40px;
    font-weight: 500;
    font-size: 14px;
    color: #999;
}

.error {
    color: #E53E3E;
}

/* --- FORMULAIRES --- */
.form-group {
    margin-bottom: 20px;
}
/* RÈGLE GLOBALE : dans une modale, un champ de formulaire prend TOUTE la
   largeur de son groupe. Sans elle, chaque textarea/input retombait sur sa
   taille intrinsèque du navigateur (champ à moitié vide — bug récurrent).
   Les exceptions ciblées (ex: champ icône) gardent la main via un
   sélecteur plus spécifique. */
.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="search"],
.modal-content .form-group input[type="email"],
.modal-content .form-group input[type="date"],
.modal-content .form-group input[type="number"],
.modal-content .form-group input[type="url"],
.modal-content .form-group textarea,
.modal-content .form-group select {
    width: 100%;
    box-sizing: border-box;
}
.modal-content .form-group textarea { resize: vertical; min-height: 64px; }

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--chanv-terre);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--chanv-vert);
    cursor: pointer;
}

.form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #666;
}

input,
select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid var(--chanv-fibre);
    font-family: inherit;
    font-size: 14px;
}

input:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

/* --- LOGIN --- */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--chanv-fibre);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: white;
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.main-logo-login {
    height: 60px;
    margin-bottom: 30px;
}

.error-text {
    color: #E53E3E;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* --- LOADER & TOAST --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--chanv-fibre);
    border-top-color: var(--chanv-beige);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--chanv-terre);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: var(--shadow-bold);
    z-index: 10001;
    transition: 0.4s;
}

#toast.show {
    /* Mobile : remonter au-dessus de la barre système (sinon coupé/masqué). */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    text-align: center;
}

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- SETTINGS MODAL (Per-App Roles) --- */
.settings-modal {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
}

.settings-user-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 30px 20px;
    background: var(--chanv-fibre);
}

.settings-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.1);
}

.settings-user-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0;
}

.settings-user-info p {
    font-size: 13px;
    color: #888;
    margin: 2px 0 0;
}

.settings-divider {
    height: 1px;
    background: var(--chanv-fibre);
}

.settings-apps-list {
    padding: 20px 30px;
    max-height: 400px;
    overflow-y: auto;
}

.settings-super-admin {
    padding: 16px 30px;
    background: linear-gradient(135deg, rgba(58, 92, 57, 0.04), rgba(58, 92, 57, 0.08));
    border-bottom: 1px solid var(--chanv-fibre);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--chanv-terre);
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--chanv-green);
    cursor: pointer;
}

.settings-app-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--chanv-fibre);
}

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

.settings-app-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-app-icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chanv-fibre);
    border-radius: 10px;
    flex-shrink: 0;
}

.settings-app-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--chanv-terre);
}

.settings-apps-list .role-select {
    width: auto;
    min-width: 180px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: var(--transition);
}

.settings-apps-list .role-select:focus {
    outline: none;
    border-color: var(--chanv-beige);
    box-shadow: 0 0 0 3px rgba(221, 203, 164, 0.2);
}

.settings-modal .modal-actions {
    padding: 16px 30px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-secondary {
    background: var(--chanv-fibre);
    color: var(--chanv-terre);
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: #e0d5c0;
}

.settings-modal .close-modal {
    top: 15px;
    right: 20px;
    z-index: 10;
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        text-align: center;
        position: relative;
    }

    .header-user-section {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    /* Mobile : nav du header masquée — LECLAUDE et le reste passent par le
       menu burger (l'entrée LECLAUDE y ouvre le bulletin) */
    .header-nav {
        display: none;
    }

    .welcome-section {
        flex-direction: column;
        gap: 16px;
    }

    .welcome-right {
        text-align: left;
    }

    .welcome-quote {
        margin-left: 0;
        max-width: 100%;
    }

    /* Hide name/role on mobile — only show avatar burger */
    .header-user-section .user-details {
        display: none !important;
    }

    .avatar-burger-inner {
        padding: 3px 10px 3px 3px;
    }

    .avatar-burger-photo {
        width: 30px;
        height: 30px;
    }

    .avatar-burger-icon {
        width: 14px;
        gap: 3px;
    }

    .settings-app-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .settings-apps-list .role-select {
        width: 100%;
    }

    .view-toggle {
        max-width: 100%;
        gap: 3px;
    }

    .toggle-btn {
        padding: 8px 4px;
        font-size: 12px;
        gap: 3px;
    }

    /* Admin panel mobile */
    .modal-overlay {
        padding: 10px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .app-tile.emoji-only {
        padding: 16px 10px;
    }

    .app-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .app-tile-text {
        padding: 8px 8px 10px;
    }

    .app-name {
        font-size: 0.85em;
    }

    .app-desc {
        font-size: 0.72em;
    }

    .modal-content {
        padding: 20px 16px;
    }

    .admin-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .admin-tabs {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 2px;
    }

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

    .tab-btn {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .admin-table td,
    .admin-table th {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* --- UNIVERSAL SIDEBAR --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
}

.sidebar-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: var(--chanv-terre);
    z-index: 9999;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
}

.sidebar-panel.open {
    right: 0;
}

.sidebar-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}

.sidebar-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(221, 203, 164, 0.3), 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.sidebar-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: white;
    text-align: center;
}

.sidebar-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
}

.sidebar-favs {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-favs-title {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0 12px;
}

.sidebar-favs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-fav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.sidebar-fav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

.sidebar-fav-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-fav-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px;
}

.sidebar-no-favs {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    padding: 8px 0;
}

.sidebar-logout {
    flex-shrink: 0;
    width: calc(100% - 48px);
    margin: 0 24px 24px;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
}

.sidebar-tour {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    margin: 16px 0 12px;
    width: 100%;
    transition: var(--transition);
}

.sidebar-tour:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.sidebar-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-lang-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}

@media (max-width: 768px) {
    .sidebar-panel {
        width: 280px;
        right: -280px;
    }
    .sidebar-avatar {
        width: 60px;
        height: 60px;
    }
    .sidebar-name {
        font-size: 15px;
    }
}

/* ============================================== */
/* --- FAVORIS (Bouton cœur sur tiles) --- */
/* ============================================== */

/* Badge de notification (formations en attente, etc.) */
.app-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #E53E3E;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45);
    animation: app-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

.app-badge-overdue {
    animation: app-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes app-badge-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes app-badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45); }
    50% { box-shadow: 0 2px 18px rgba(229, 62, 62, 0.85); }
}

/* Bouton cœur sur les tiles */
.fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: var(--transition);
    padding: 0;
}

.fav-btn img {
    transition: var(--transition);
}

.fav-btn:hover {
    transform: scale(1.15);
}

.fav-btn:hover img {
    content: url('images/favorite-hover.svg');
}

.fav-btn.fav-active:hover img {
    content: url('images/favorite-active-hover.svg');
}

/* ============================================== */
/* --- CHATBOT GANDALF (Floating bottom-right) --- */
/* ============================================== */

.chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    font-size: 28px;
    cursor: pointer;
    box-shadow: var(--shadow-bold);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.chatbot-toggle:hover {
    transform: scale(1.08);
    background: #1a1a1a;
}

.chatbot-icon {
    line-height: 1;
}

.chatbot-panel {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9001;
    border: 1px solid rgba(40, 40, 40, 0.08);
}

.chatbot-header {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-title-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-avatar {
    font-size: 24px;
    line-height: 1;
}

.chatbot-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.chatbot-subtitle {
    font-size: 11px;
    opacity: 0.7;
}

.chatbot-close {
    background: transparent;
    border: none;
    color: var(--chanv-blanc);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.chatbot-close:hover {
    opacity: 0.7;
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--chanv-fibre);
}

.chatbot-msg {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 85%;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chatbot-msg-bot {
    background: var(--chanv-blanc);
    color: var(--chanv-terre);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-soft);
}

.chatbot-msg-user {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chatbot-msg-streaming::after {
    content: '▌';
    animation: chatbot-blink 1s infinite;
    margin-left: 2px;
    opacity: 0.6;
}

@keyframes chatbot-blink {
    0%, 50% { opacity: 0.6; }
    51%, 100% { opacity: 0; }
}

.chatbot-msg-error {
    background: #fee;
    color: #c33;
    border: 1px solid #fbb;
}

.chatbot-tool-indicator {
    align-self: flex-start;
    font-size: 11px;
    opacity: 0.6;
    font-style: italic;
    padding: 4px 12px;
}

/* ============================================== */
/* --- ADMIN HEADER ROW (title + env toggle + close) --- */
/* ============================================== */

.admin-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-header-row h2 {
    margin: 0;
    white-space: nowrap;
    flex: 1;
}

.admin-header-row .close-modal {
    position: static;
}

/* Toggle switch */
.admin-env-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.admin-env-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.admin-env-toggle-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.2s, opacity 0.2s;
}

/* DEV label (left) — highlighted when on dev, dimmed on prod */
#adminEnvLabelDev  { color: #92400E; opacity: 1; transition: opacity 0.2s; }
#adminEnvLabelProd { color: #166534; opacity: 0.35; transition: opacity 0.2s; }

/* When checked (= prod), flip opacity */
.admin-env-toggle input:checked ~ #adminEnvLabelDev  { opacity: 0.35; }
.admin-env-toggle input:checked ~ #adminEnvLabelProd { opacity: 1; }

.admin-env-slider {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    border-radius: 20px;
    background: #FBBF24;
    transition: background 0.3s;
}

.admin-env-toggle input:checked + .admin-env-slider {
    background: #22C55E;
}

.admin-env-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Checked = PROD (slider right) */
.admin-env-toggle input:checked + .admin-env-slider::before {
    transform: translateX(18px);
}

/* ============================================== */
/* --- FEEDBACK DASHBOARD --- */
/* ============================================== */

/* --- Skill editor modal --- */
.skill-editor-modal {
    max-width: 820px;
    width: 100%;
}

.skill-editor-meta {
    font-size: 12px;
    color: #888;
    margin: -10px 0 16px;
}

.skill-editor-body {
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    min-height: 300px;
    resize: vertical;
}

.skill-tools-readonly {
    margin: 16px 0;
    background: var(--chanv-fibre);
    border-radius: 10px;
    padding: 12px 16px;
}

.skill-tools-readonly summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--chanv-terre);
    user-select: none;
}

.skill-tools-readonly summary:hover {
    opacity: 0.7;
}

.skill-tool-row {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
}

.skill-tool-name {
    margin-bottom: 4px;
}

.skill-tool-name code {
    background: var(--chanv-fibre);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.skill-tool-desc {
    color: #555;
    margin-bottom: 6px;
}

.skill-tool-row details {
    margin-top: 6px;
}

.skill-tool-row details summary {
    font-size: 11px;
    cursor: pointer;
    color: #888;
}

.skill-tool-row details pre {
    background: #1a1a1a;
    color: #f4f4f4;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.4;
    margin: 6px 0 0;
}

/* --- Settings tabs (Apps / Skills IA) --- */
.settings-tabs {
    display: flex;
    gap: 0;
    margin: 16px 0 0;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 3px;
}

.settings-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.settings-tab:hover {
    color: var(--chanv-terre);
}

.settings-tab.active {
    background: var(--chanv-terre);
    color: #fff;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.15);
}

.settings-tab-content {
    margin-top: 16px;
    animation: settingsTabFadeIn 0.25s ease-out;
}

.settings-tab-content.hidden {
    display: none;
}

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

.settings-section-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 14px;
    line-height: 1.4;
}

.settings-skills-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.settings-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    gap: 16px;
}

.settings-skill-info {
    flex: 1;
    min-width: 0;
}

.settings-skill-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--chanv-terre);
}

.settings-skill-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--chanv-terre);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Bandeau statut Basecamp en haut de l'onglet Feedback */
.basecamp-banner {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    border-left: 4px solid;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.basecamp-banner[data-level="ok"]   { background: #D4F5E2; color: #166534; border-left-color: #22C55E; }
.basecamp-banner[data-level="info"] { background: #DBEAFE; color: #1E40AF; border-left-color: #3B82F6; }
.basecamp-banner[data-level="warn"] { background: #FEF3C7; color: #92400E; border-left-color: #F59E0B; }
.basecamp-banner a, .basecamp-banner .link-btn {
    color: inherit;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.basecamp-banner a:hover, .basecamp-banner .link-btn:hover {
    opacity: 0.7;
}

/* Header de l'onglet Feedback : aligner boutons d'action + filtres */
#tab-feedback .admin-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Boutons "Rafraîchir" et "Importer" plus compacts pour matcher les filter chips */
#tab-feedback .admin-header-actions > .btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
}

.feedback-filter {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.feedback-filter-btn {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.feedback-filter-btn:hover {
    background: var(--chanv-fibre);
    color: var(--chanv-terre);
}

.feedback-filter-btn.active {
    background: var(--chanv-terre);
    color: #fff;
    border-color: var(--chanv-terre);
}

.feedback-table th, .feedback-table td {
    vertical-align: middle;
}

.fb-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.fb-status-done    { background: #D4F5E2; color: #166534; }
.fb-status-pending { background: #FEF3C7; color: #92400E; }
.fb-status-deleted { background: #F3F4F6; color: #6B7280; }
.fb-status-error   { background: #FEE2E2; color: #991B1B; }
.fb-status-unknown { background: #F3F4F6; color: #6B7280; }

.fb-type {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.fb-type-bug     { background: #FEE2E2; color: #991B1B; }
.fb-type-feature { background: #E0E7FF; color: #3730A3; }

/* ============================================== */
/* --- ONBOARDING --- */
/* ============================================== */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(6px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: birthdayFadeIn 0.3s ease-out;
}

.onboarding-card {
    position: relative;
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    width: 560px;
    max-width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(40, 40, 40, 0.35);
    animation: birthdayPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-skip {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: var(--transition);
    z-index: 2;
}

.onboarding-skip:hover {
    color: var(--chanv-terre);
    background: var(--chanv-fibre);
}

.onboarding-slides {
    flex: 1;
    overflow-y: auto;
    padding: 50px 50px 30px;
    text-align: center;
}

.onboarding-slide {
    animation: onboardingSlideIn 0.35s ease-out;
}

@keyframes onboardingSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.onboarding-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--chanv-fibre);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboarding-emoji-large {
    font-size: 80px;
    line-height: 1;
    margin: 12px 0 24px;
}

.onboarding-title {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    color: var(--chanv-terre);
    margin: 0 0 14px;
    line-height: 1.25;
}

.onboarding-body {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.onboarding-body strong {
    color: var(--chanv-terre);
    font-weight: 600;
}

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 24px;
    border-top: 1px solid var(--chanv-fibre);
    gap: 16px;
    flex-wrap: wrap;
}

.onboarding-dots {
    display: flex;
    gap: 8px;
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: var(--transition);
}

.onboarding-dot.active {
    background: var(--chanv-terre);
    transform: scale(1.3);
}

.onboarding-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.onboarding-actions .btn {
    min-width: 110px;
}

/* --- Rail ULTRA PREMIUM : chip département + timeline « Ta première journée » --- */
.onb-dept-chip {
    display: inline-block;
    margin: 10px 0 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
    font-size: 13px;
    font-weight: 600;
}

.onb-timeline {
    margin: 18px auto 4px;
    max-width: 420px;
    text-align: left;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
}

.onb-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding: 7px 0;
}

.onb-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 58px;
    top: 26px;
    bottom: -8px;
    width: 2px;
    background: rgba(76, 175, 80, .25);
}

.onb-timeline-time {
    flex: 0 0 44px;
    font-weight: 700;
    font-size: 13px;
    color: #2e7d32;
    padding-top: 2px;
    text-align: right;
}

.onb-timeline-dot {
    flex: 0 0 10px;
    height: 10px;
    border-radius: 50%;
    background: #4caf50;
    margin-top: 5px;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, .18);
}

.onb-timeline-body { flex: 1; min-width: 0; }

.onb-timeline-subject {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.onb-timeline-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.35;
}

body[data-gtheme="dark"] .onb-dept-chip {
    background: rgba(76, 175, 80, .18);
    color: #a5d6a7;
}
body[data-gtheme="dark"] .onb-timeline-subject { color: rgba(255, 255, 255, .92); }
body[data-gtheme="dark"] .onb-timeline-meta { color: rgba(255, 255, 255, .55); }

/* =====================================================================
   GTOUR — moteur de visite guidée (coach-marks) du rail d'accueil
   ===================================================================== */
.gtour {
    position: fixed;
    inset: 0;
    z-index: 13000;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: auto;
}

.gtour--visible { opacity: 1; }

/* Spotlight : découpe lumineuse — le voile est porté par son box-shadow,
   il « morphe » d'une cible à l'autre grâce à la transition. */
.gtour-spot {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 200vmax rgba(10, 16, 22, .72);
    transition: all .45s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.gtour-spot.on::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 2px solid rgba(76, 175, 80, .95);
    animation: gtourPulse 1.6s ease-out infinite;
}

@keyframes gtourPulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, .45); }
    70% { box-shadow: 0 0 0 12px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.gtour-card {
    position: fixed;
    width: min(370px, calc(100vw - 24px));
    background: linear-gradient(180deg, #fff 0%, #f9fcf9 100%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .08);
    padding: 20px 22px 14px;
    transition: left .45s cubic-bezier(.4, 0, .2, 1), top .45s cubic-bezier(.4, 0, .2, 1);
}

.gtour-card--wide { width: min(480px, calc(100vw - 24px)); }

.gtour-card--center {
    text-align: center;
    padding: 30px 28px 16px;
}

.gtour-card--in .gtour-content {
    animation: gtourIn .35s ease-out;
}

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

.gtour-skip {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
}

.gtour-skip:hover { color: #555; text-decoration: underline; }

.gtour-emoji {
    font-size: 46px;
    line-height: 1;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(102, 187, 106, .18), rgba(102, 187, 106, .05) 62%, transparent 75%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12));
}

.gtour-title {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
    line-height: 1.25;
    padding-right: 46px;
}

.gtour-card--center .gtour-title { padding-right: 0; }

.gtour-body {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
}

.gtour-body strong { color: #2e7d32; }
/* Bouton d'action des étapes « branchements » (notifications, Gmail) */
.gtour-action { margin-top: 14px; }
.gtour-action .btn { width: 100%; }
.gtour-optional { margin-top: 8px; font-size: 0.8rem; opacity: 0.65; text-align: center; }

.gtour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* CTA long (ex. « Commencer ma formation ») → passe sous la barre au lieu de déborder */
    gap: 10px 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.gtour-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 90px;
    min-width: 0;
}

.gtour-stepof {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.gtour-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.gtour-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #66bb6a, #2e7d32);
    transition: width .45s ease;
}

.gtour-actions {
    display: flex;
    gap: 8px;
    margin-left: auto; /* reste à droite, même quand la ligne passe sous la barre */
    max-width: 100%;
}

.gtour-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    max-width: 100%;
}

.gtour-actions .btn-primary {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    border: none;
    box-shadow: 0 4px 14px rgba(46, 125, 50, .32);
}

.gtour-actions .btn-primary:hover { filter: brightness(1.07); }

@media (max-width: 480px) {
    .gtour-card { padding: 16px 16px 12px; }
    .gtour-emoji { font-size: 42px; }
    .gtour-title { font-size: 16px; }
    .gtour-body { font-size: 13px; }
    .gtour-progress { min-width: 64px; }
    .gtour-stepof { display: none; }
}

body[data-gtheme="dark"] .gtour-card {
    background: linear-gradient(180deg, #202b38 0%, #1b242f 100%);
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .3);
}
body[data-gtheme="dark"] .gtour-emoji {
    background: radial-gradient(circle at 50% 42%, rgba(165, 214, 167, .16), rgba(165, 214, 167, .04) 62%, transparent 75%);
}
body[data-gtheme="dark"] .gtour-title { color: rgba(255, 255, 255, .92); }
body[data-gtheme="dark"] .gtour-body { color: rgba(255, 255, 255, .65); }
body[data-gtheme="dark"] .gtour-body strong { color: #a5d6a7; }
body[data-gtheme="dark"] .gtour-foot { border-top-color: rgba(255, 255, 255, .08); }
body[data-gtheme="dark"] .gtour-bar { background: rgba(255, 255, 255, .12); }
body[data-gtheme="dark"] .gtour-skip { color: rgba(255, 255, 255, .45); }
body[data-gtheme="dark"] .gtour-skip:hover { color: rgba(255, 255, 255, .75); }

@media (max-width: 480px) {
    .onboarding-slides { padding: 50px 24px 20px; }
    .onboarding-emoji-large { font-size: 64px; }
    .onboarding-title { font-size: 22px; }
    .onboarding-body { font-size: 14px; }
    .onboarding-footer { padding: 14px 18px; }
    .onboarding-actions .btn { min-width: 0; padding: 8px 14px; font-size: 13px; }
}

/* --- Bouton "Refaire le tour" --- */
.btn-tour {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-tour:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}


/* ============================================== */
/* --- ANNIVERSAIRE --- */
/* ============================================== */

.birthday-overlay {
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 40, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: birthdayFadeIn 0.4s ease-out;
}

#birthdayConfetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.birthday-card {
    position: relative;
    z-index: 2;
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    padding: 50px 60px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(40, 40, 40, 0.3);
    max-width: 90vw;
    animation: birthdayPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.birthday-cake {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 16px;
    animation: birthdayBounce 1.4s ease-in-out infinite;
    display: inline-block;
}

.birthday-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    color: var(--chanv-terre);
    margin: 0 0 12px;
    line-height: 1.2;
}

.birthday-title span {
    background: linear-gradient(135deg, #DDCBA4, #E89F71);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.birthday-message {
    color: #666;
    font-size: 15px;
    margin: 0 0 28px;
}

.birthday-card .btn {
    min-width: 160px;
    margin: 0 auto;
}

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

@keyframes birthdayPop {
    0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes birthdayBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-12px) rotate(5deg); }
}

@media (max-width: 480px) {
    .birthday-card {
        padding: 36px 28px;
    }
    .birthday-cake { font-size: 56px; }
    .birthday-title { font-size: 24px; }
}

.chatbot-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(40, 40, 40, 0.1);
    font-size: 11px;
    opacity: 0.75;
}

.chatbot-sources-label {
    font-weight: 600;
    margin-right: 4px;
}

.chatbot-source-tag {
    display: inline-block;
    background: var(--chanv-fibre);
    padding: 2px 8px;
    border-radius: 10px;
    margin: 2px 2px 0 0;
    font-size: 10px;
}

.chatbot-input-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(40, 40, 40, 0.08);
    background: var(--chanv-blanc);
}

.chatbot-input-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(40, 40, 40, 0.15);
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.chatbot-input-form input:focus {
    border-color: var(--chanv-terre);
}

.chatbot-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.chatbot-send:hover {
    background: #1a1a1a;
}

.chatbot-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .chatbot-panel {
        right: 8px;
        bottom: 88px;
        width: calc(100vw - 16px);
        height: calc(100vh - 110px);
    }

    .chatbot-toggle {
        bottom: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 22px;
        z-index: 900;
    }


}

/* --- BUG REPORT --- */
.bug-report-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 900;
    height: 38px;
    padding: 0 14px 0 10px;
    border-radius: 20px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    opacity: 0.65;
    font-family: 'Inter', sans-serif;
}

.bug-report-btn span {
    font-size: 12px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.bug-report-btn:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-color: var(--chanv-beige);
}

.bug-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(6px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bug-report-overlay.hidden {
    display: none;
}

/* La hauteur est BORNÉE et le corps défile — même convention que toutes les
   autres modales du fichier (.admin-modal, .us-modal). Sans ça, cinq vignettes
   font ~870 px de modale dans un écran de téléphone de 660 : l'overlay est en
   position fixe et centré, donc le débordement part autant en haut qu'en bas,
   rien ne défile, et le bouton « Envoyer » devient tout simplement
   inatteignable — le signalement ne peut plus partir.
   min(90dvh, 100%) : dvh suit la barre d'outils iOS qui se rétracte, et le
   100% borne à l'overlay pour ne pas déborder de ses 20 px de marge. */
.bug-report-modal {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    max-width: 480px;
    width: 100%;
    /* Repli EXPLICITE : sur un moteur sans dvh, tout le min() est invalide et
       la déclaration est jetée — donc plus aucun plafond, et le bug revient
       en entier. Le vh se fait juste rogner par la barre d'outils iOS. */
    max-height: 90vh;
    max-height: min(90dvh, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bugSlideUp 0.3s ease;
}

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

.bug-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--chanv-fibre);
    /* Reste visible pendant le défilement du corps : sans ça l'en-tête se
       comprime au lieu de laisser le corps prendre le débordement. */
    flex-shrink: 0;
}

.bug-report-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.bug-report-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.bug-report-close:hover {
    color: var(--chanv-terre);
}

.bug-report-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Un élément flex refuse par défaut de descendre sous la taille de son
       contenu. Explicite ici : c'est CE zéro qui autorise le corps à se
       comprimer et à prendre le débordement au lieu de pousser la modale
       au-delà de son plafond. */
    min-height: 0;
}

.bug-type-toggle {
    display: flex;
    gap: 4px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    width: 100%;
}

.bug-type-btn {
    flex: 1;
    /* Sans ce zéro, « Nouvelle fonctionnalité » refuse de descendre sous sa
       largeur min-content et déborde de quelques pixels à 320 px — ce qui,
       depuis que le corps de la modale défile, fait apparaître une barre de
       défilement HORIZONTALE au lieu d'être rogné en silence. */
    min-width: 0;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.bug-type-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.04);
}

.bug-type-btn.active {
    background: var(--chanv-terre);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.bug-report-body label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 6px;
}

.bug-report-body label + label {
    margin-top: 16px;
}

.bug-report-body textarea {
    width: 100%;
    border: 1px solid var(--chanv-fibre);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.2s;
    color: var(--chanv-terre);
    margin-bottom: 4px;
}

.bug-report-body textarea:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

/* Select « Application concernée » : même peau que le textarea (le style
   global input/select à bordure 2px détonnerait dans cette modale). */
.bug-report-body select {
    width: 100%;
    border: 1px solid var(--chanv-fibre);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--chanv-terre);
    background: #fff;
    margin-bottom: 16px;
}

.bug-report-body select:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

.bug-screenshot-area {
    border: 2px dashed #ddd;
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    margin-top: 6px;
}

.bug-screenshot-area.drag-over {
    border-color: var(--chanv-beige);
    background: rgba(221, 203, 164, 0.08);
}

.bug-screenshot-placeholder {
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    padding: 12px;
}

.bug-screenshot-placeholder:hover {
    color: #888;
}

/* Galerie des captures jointes (jusqu'à BUG_SHOTS_MAX). auto-fill + minmax :
   les vignettes se rangent d'elles-mêmes, 2 colonnes sur un téléphone, 3 ou 4
   sur un écran large, sans jamais déborder en largeur. auto-fill et non
   auto-fit : une capture seule garde la taille d'une vignette au lieu de
   s'étaler sur toute la ligne. */
.bug-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.bug-shots:empty {
    display: none;
}

.bug-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

.bug-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bug-shot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.bug-shot-remove:hover {
    background: rgba(200,50,50,0.8);
}

/* Marge SEULEMENT quand la galerie est peuplée : sinon la zone vide est
   décalée du haut sans rien à séparer.
   DÉCLARÉE AVANT le bloc tactile plus bas : même sélecteur, donc même
   spécificité — et une media query n'en ajoute aucune. Placée après, elle
   reprenait le dessus et annulait la cible agrandie au doigt. */
.bug-shots:not(:empty) + .bug-screenshot-placeholder {
    margin-top: 10px;
    padding: 8px;
}

/* --- Doigt plutôt que souris ------------------------------------------
   Convention déjà posée ailleurs dans ce fichier (.chat-attach-x, .cmm-reacts,
   .tasks-grip) : sur pointeur grossier, on remonte les cibles. Un ✕ de 22 px
   passe sous le plancher de 24 px du WCAG 2.2, et la zone « ajouter une
   capture » tombait à une bande de 32 px — c'est pourtant LE contrôle qui sert
   à joindre les captures 2 à 5.
   Le passage des champs à 16 px vit ici et non dans une requête de largeur :
   iOS zoome sur TOUT écran tactile, un iPad ou un téléphone couché compris. */
@media (pointer: coarse) {
    .bug-shot-remove {
        width: 32px;
        height: 32px;
        font-size: 14px;
        top: 2px;
        right: 2px;
    }

    .bug-shots:not(:empty) + .bug-screenshot-placeholder {
        padding: 14px 8px;
    }

    .bug-report-close {
        min-width: 40px;
        min-height: 40px;
    }

    .bug-report-body textarea,
    .bug-report-body select {
        font-size: 16px;
    }
}

.bug-screenshot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Révélé par bug-report.js seulement si navigator.clipboard.read() est
   réellement utilisable — jamais de bouton mort. */
.bug-screenshot-paste {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    background: #fff;
    /* Couleur EXPLICITE : `inherit` remonterait au blanc cassé de
       .bug-report-modal en thème sombre → texte blanc sur fond blanc.
       --text-main n'est pas redéfini en sombre, d'où la règle dédiée plus bas. */
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bug-screenshot-paste:hover:not(:disabled) {
    border-color: var(--chanv-beige);
    background: rgba(221, 203, 164, 0.08);
}

.bug-screenshot-paste:disabled {
    opacity: 0.6;
    cursor: wait;
}

.bug-screenshot-hint {
    font-size: 12px;
    line-height: 1.3;
    color: #aaa;
}

.bug-report-submit {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    border: none;
    border-radius: var(--radius);
    background: var(--chanv-terre);
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.bug-report-submit:hover:not(:disabled) {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

.bug-report-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .bug-report-btn {
        bottom: 12px;
        left: 12px;
        height: 32px;
        width: 32px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 14px;
    }
    .bug-report-btn span {
        display: none;
    }
}

/* ==================== DEVLOG BUTTON ==================== */
.actu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    padding: 7px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
}

.actu-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.4);
}

.actu-btn-icon { font-size: 13px; }

.actu-notif-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #E53E3E;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45);
    animation: app-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.actu-notif-pulse {
    animation: app-badge-pulse 1.8s ease-in-out infinite;
}

/* ==================== L'ACTU VIEW ==================== */
.actu-view {
    max-width: 900px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.actu-container { animation: fadeIn 0.3s ease; }

.actu-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.actu-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.actu-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.actu-title-block {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.actu-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--chanv-terre);
    margin: 0;
    line-height: 1.2;
}

.actu-subtitle {
    font-size: 13px;
    color: #888;
    margin: 0;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* --- FR / EN toggle pill --- */
.actu-lang-toggle {
    display: flex;
    gap: 2px;
    background: var(--chanv-fibre);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.06);
}

.actu-lang-btn {
    padding: 5px 14px;
    border: none;
    background: transparent;
    color: #999;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.actu-lang-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.04);
}

.actu-lang-btn.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 1px 4px rgba(40, 40, 40, 0.2);
}

/* ==================== HERO ==================== */
.actu-hero { margin-bottom: 32px; }

.actu-hero-card {
    background: linear-gradient(135deg, #FDFAF3, #F5EFE0);
    border: 1px solid var(--chanv-beige);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.actu-hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--chanv-beige), var(--chanv-terre), var(--chanv-beige));
}

.actu-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-bold);
}

.actu-hero-card.unread { border-color: var(--chanv-terre); }

.actu-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.actu-hero-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.08);
    padding: 4px 12px;
    border-radius: 6px;
}

.actu-unread-badge {
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: #EF5350;
    padding: 3px 10px;
    border-radius: 10px;
}

.actu-hero-lang { margin-left: auto; font-size: 18px; }

.actu-hero-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin-bottom: 10px;
}

.actu-hero-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    font-weight: 500;
    margin-bottom: 14px;
}

.actu-hero-preview {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actu-hero-cta {
    display: none;
}

.actu-hero-cta-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--chanv-terre);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    z-index: 2;
}

.actu-hero-cta-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.actu-hero-card { position: relative; }

.actu-hero-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.actu-hero-empty-icon { font-size: 40px; margin-bottom: 12px; }
.actu-hero-empty h3 { font-size: 20px; color: var(--chanv-terre); margin-bottom: 8px; }
.actu-hero-empty p { color: #888; max-width: 400px; margin: 0 auto; font-size: 14px; }
.actu-hero-loading { text-align: center; padding: 40px; }

/* ==================== RUBRIQUES / TABS ==================== */
.actu-rubriques { margin-bottom: 20px; }

.actu-rubriques-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin: 0 0 10px;
}

.actu-tabs {
    display: flex;
    gap: 6px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
}

.actu-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--chanv-terre);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    text-align: center;
}

.actu-tab:hover { background: rgba(40, 40, 40, 0.05); }

.actu-tab.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.2);
}

.actu-tab.coming-soon {
    color: #bbb;
    position: relative;
}

.actu-tab.coming-soon::after {
    content: 'bientôt';
    position: absolute;
    top: -6px;
    right: -2px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: var(--chanv-beige);
    padding: 1px 5px;
    border-radius: 4px;
}

.actu-tab.coming-soon.active {
    background: #eee;
    color: #999;
    box-shadow: none;
}

.actu-tab-content { padding-top: 8px; }
.actu-tab-icon { height: 16px; width: auto; vertical-align: middle; margin-right: 2px; }

.actu-no-more {
    text-align: center;
    color: #aaa;
    font-size: 13px;
    padding: 20px;
    font-style: italic;
}

.actu-coming-soon {
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.actu-coming-soon-icon { font-size: 42px; margin-bottom: 14px; }
.actu-coming-soon h3 { font-size: 18px; color: var(--chanv-terre); margin-bottom: 8px; }
.actu-coming-soon p { color: #888; max-width: 380px; margin: 0 auto; font-size: 14px; }

/* ==================== CHANGELOG CARDS ==================== */
.changelog-list {
    display: block;
}

.changelog-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--chanv-fibre);
    padding: 18px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.changelog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--chanv-beige), var(--chanv-terre));
    opacity: 0;
    transition: opacity 0.3s;
}

.changelog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-bold);
    border-color: var(--chanv-beige);
}

.changelog-card:hover::before { opacity: 1; }

.card-unread-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #EF5350;
    border-radius: 50%;
    animation: notifPulse 2s infinite;
}

.changelog-card.unread { border-left: 3px solid var(--chanv-terre); }

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

.changelog-card-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--chanv-terre);
    background: var(--chanv-fibre);
    padding: 3px 8px;
    border-radius: 5px;
}

.changelog-card-badge.custom { background: #E8F5E9; color: #2E7D32; }
.changelog-card-lang { font-size: 15px; }

.changelog-card-period {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.changelog-card-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.changelog-card-preview {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.changelog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--chanv-fibre);
}

.changelog-card-author { font-size: 10px; color: #aaa; font-weight: 500; }

.changelog-card-arrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--chanv-beige);
    transition: var(--transition);
}

.changelog-card:hover .changelog-card-arrow { transform: translateX(4px); color: var(--chanv-terre); }

.changelog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.changelog-empty-icon { font-size: 42px; margin-bottom: 14px; }
.changelog-empty h3 { font-size: 20px; color: var(--chanv-terre); margin-bottom: 8px; }
.changelog-empty p { color: #888; max-width: 400px; margin: 0 auto; }
.changelog-loading { grid-column: 1 / -1; text-align: center; padding: 40px 20px; }
.changelog-loading p { color: #888; margin-top: 12px; }

/* ==================== ADMIN CONTROLS ==================== */
.changelog-admin-controls {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--chanv-fibre);
}

.changelog-admin-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.changelog-token-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #FFF8E1;
    border: 1px solid #FFD54F;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #6D4C00;
}

.changelog-token-warning.critical { background: #FFF3E0; border-color: #FF9800; color: #B74600; }
.changelog-token-warning.expired { background: #FFEBEE; border-color: #EF5350; color: #B71C1C; }
.changelog-warning-icon { font-size: 16px; flex-shrink: 0; }

.changelog-generate-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 18px;
    background: var(--chanv-fibre);
    border-radius: 12px;
}

.changelog-generate-form label { font-size: 12px; font-weight: 600; color: #666; }

.changelog-date-input {
    padding: 7px 10px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: white;
}

.changelog-lang-select {
    padding: 7px 12px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: white;
    cursor: pointer;
    font-family: inherit;
}

.changelog-generate-btn { margin-left: auto; }

/* ==================== DETAIL / ARTICLE ==================== */
.changelog-detail { animation: fadeIn 0.3s ease; }

.actu-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.changelog-detail-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.changelog-detail-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.actu-detail-hebdo-link {
    background: linear-gradient(135deg, var(--chanv-beige), var(--chanv-fibre));
    border: 1px solid var(--chanv-beige);
    color: var(--chanv-terre);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.actu-detail-hebdo-link:hover {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
    transform: translateX(3px);
}
.changelog-detail-period { margin-bottom: 12px; }

.changelog-detail-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--chanv-terre);
    text-transform: capitalize;
}

.changelog-detail-stats-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.changelog-stat-pill {
    padding: 5px 12px;
    background: var(--chanv-fibre);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.changelog-article {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--chanv-fibre);
    box-shadow: var(--shadow-soft);
    padding: 40px 48px;
    line-height: 1.85;
    font-size: 15.5px;
    color: #2d2d2d;
    max-width: 800px;
    margin: 0 auto;
}

/* First paragraph drop cap effect */
.changelog-article > p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    font-weight: 800;
    line-height: 0.85;
    margin: 4px 10px 0 0;
    color: var(--chanv-beige);
    font-family: 'Georgia', 'Times New Roman', serif;
}

.changelog-article h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--chanv-beige);
    line-height: 1.3;
    color: var(--chanv-terre);
}

/* h2 — Magazine rubric style with left accent band */
.changelog-article h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 18px;
    padding: 12px 20px;
    color: var(--chanv-terre);
    background: linear-gradient(135deg, rgba(200,173,127,0.08), rgba(200,173,127,0.03));
    border-left: 4px solid var(--chanv-beige);
    border-bottom: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    letter-spacing: 0.3px;
}
.changelog-article h3 { font-size: 17px; font-weight: 700; margin: 28px 0 12px; color: #444; }
.changelog-article h4 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: #666; }
.changelog-article p {
    margin: 0 0 20px;
    padding-bottom: 18px;
    position: relative;
}
/* Subtle golden separator between consecutive paragraphs */
.changelog-article p + p::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--chanv-beige), transparent);
    margin: 0 auto 18px;
    opacity: 0.5;
}
.changelog-article ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.changelog-article li { padding: 5px 0 5px 24px; position: relative; line-height: 1.7; }
.changelog-article li::before { content: '\2022'; position: absolute; left: 6px; color: var(--chanv-beige); font-weight: 800; font-size: 18px; }
.changelog-article li.depth-1 { padding-left: 42px; font-size: 14px; color: #555; }
.changelog-article li.depth-1::before { left: 26px; content: '\25E6'; }
.changelog-article strong { font-weight: 700; color: var(--chanv-terre); }
.changelog-article em { font-style: italic; color: #777; }
.changelog-article code { background: var(--chanv-fibre); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'Menlo', 'Monaco', monospace; }

/* Blockquote — Editorial pull-quote with decorative marks */
.changelog-article blockquote {
    border-left: 4px solid var(--chanv-beige);
    background: linear-gradient(135deg, rgba(200,173,127,0.08), rgba(200,173,127,0.02));
    margin: 28px 0;
    padding: 24px 28px 20px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic;
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    position: relative;
}
.changelog-article blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 52px;
    font-family: Georgia, serif;
    color: var(--chanv-beige);
    opacity: 0.4;
    line-height: 1;
}
.changelog-article blockquote p { margin: 0; }

/* hr — Ornamental separator with central diamond */
.changelog-article hr {
    border: none;
    height: auto;
    margin: 36px 0;
    text-align: center;
    overflow: visible;
    background: none;
}
.changelog-article hr::before {
    content: '◆';
    display: block;
    position: relative;
    font-size: 12px;
    color: var(--chanv-beige);
    letter-spacing: 8px;
}
.changelog-article hr::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--chanv-beige), transparent);
    margin-top: -7px;
}

.changelog-article a { color: var(--chanv-terre); font-weight: 600; text-decoration: underline; text-decoration-color: var(--chanv-beige); text-underline-offset: 3px; }
.changelog-article a:hover { text-decoration-color: var(--chanv-terre); }

/* Images — Editorial style with shadow and rounded corners */
.changelog-article img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 24px auto;
}
.changelog-article .article-img-wrapper {
    margin: 28px 0;
    text-align: center;
}
.changelog-article .article-img-caption {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Tables — Magazine style with dark header */
.changelog-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 13px; border-radius: 10px; overflow: hidden; border: 1px solid var(--chanv-fibre); }
.changelog-table th { background: var(--chanv-terre); color: #F1EADA; padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.changelog-table td { padding: 10px 16px; border-bottom: 1px solid var(--chanv-fibre); }
.changelog-table tr:nth-child(even) { background: rgba(200,173,127,0.04); }
.changelog-table tr:last-child td { border-bottom: none; }
.changelog-table tr:hover { background: rgba(200,173,127,0.08); }

/* Inline "Lire l'article" clickable buttons */
.article-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--chanv-beige), #c9a96e);
    color: white;
    border: none;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    margin-left: 6px;
    vertical-align: middle;
}
.article-inline-link:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(200,173,127,0.4);
    background: linear-gradient(135deg, #c9a96e, var(--chanv-terre));
}

/* List items that contain article links — card-like style */
.changelog-article li.has-article-link {
    background: linear-gradient(135deg, #FDFAF3, #F9F3E8);
    border: 1px solid rgba(200,173,127,0.2);
    border-radius: var(--radius);
    padding: 14px 20px 14px 24px;
    margin-bottom: 10px;
    transition: var(--transition);
}
.changelog-article li.has-article-link:hover {
    border-color: var(--chanv-beige);
    box-shadow: 0 2px 12px rgba(200,173,127,0.15);
    transform: translateX(4px);
}
.changelog-article li.has-article-link::before {
    top: 16px;
}

/* Hero linked articles buttons */
.actu-hero-linked {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}
.actu-hero-linked-btn {
    background: rgba(200,173,127,0.15);
    border: 1px solid var(--chanv-beige);
    color: var(--chanv-terre);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.actu-hero-linked-btn:hover {
    background: var(--chanv-beige);
    color: white;
}

/* Linked articles inside article detail */
.article-linked-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--chanv-fibre);
}
.article-linked-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0 0 16px;
}
.article-linked-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.article-linked-btn {
    background: linear-gradient(135deg, var(--chanv-beige), #c9a96e);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}
.article-linked-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-bold);
}

/* Edition badge variant */
.actu-hero-badge.edition,
.changelog-card-badge.edition {
    background: linear-gradient(135deg, var(--chanv-terre), #444);
    color: white;
}
.changelog-card-badge.tech {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color: white;
}
.changelog-card-badge.production {
    background: linear-gradient(135deg, #C4A97D, #A68B5B);
    color: white;
}
.changelog-card-badge.ventes {
    background: linear-gradient(135deg, #00897B, #00695C);
    color: white;
}
.changelog-card-badge.groupe {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    color: white;
}

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

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .actu-btn { padding: 8px 12px; font-size: 12px; }
    .actu-btn-label { display: none; }
    .actu-title { font-size: 22px; }
    .actu-header { gap: 12px; }
    .actu-hero-card { padding: 20px; }
    .actu-hero-dates { font-size: 17px; }
    .actu-hero-stats { flex-wrap: wrap; gap: 8px; font-size: 12px; }
    .actu-tabs { flex-wrap: wrap; }
    .actu-tab { font-size: 12px; padding: 8px 10px; }
    .changelog-list-grid { grid-template-columns: 1fr; }
    .changelog-article { padding: 20px; font-size: 14px; }
    .changelog-article h1 { font-size: 20px; }
    .changelog-article h2 { font-size: 18px; }
    .changelog-article h3 { font-size: 15px; }
    .changelog-generate-form { flex-direction: column; align-items: stretch; }
    .changelog-generate-btn { margin-left: 0; }
    .changelog-detail-stats-bar { gap: 6px; }
    .changelog-stat-pill { font-size: 11px; padding: 4px 10px; }
    .actu-hero-cta-btn { position: static; margin-top: 12px; width: 100%; }
    .actu-detail-topbar { flex-direction: row; }
}

/* ==================== PRIVATE CARDS ==================== */
.changelog-card.private {
    border: 1px dashed var(--chanv-beige);
    background: #FDFAF3;
}
.changelog-card.private::before { background: linear-gradient(90deg, #999, #bbb); }
.card-private-icon {
    position: absolute; top: 10px; right: 10px; font-size: 14px; opacity: 0.6;
}
.changelog-card-badge.private { background: #F3E5F5; color: #6A1B9A; }

.actu-private-section {
    margin-top: 32px;
    padding: 20px;
    border: 1px dashed var(--chanv-beige);
    border-radius: 12px;
    background: linear-gradient(135deg, #FDFAF3, #F9F3E8);
}
.actu-private-title {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-private-badge {
    display: inline-block;
    background: #F3E5F5;
    color: #6A1B9A;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    margin-right: 10px;
}

/* ==================== ARCHIVES ==================== */
.actu-archives-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 14px;
    border: 1px dashed var(--chanv-beige);
    border-radius: 12px;
    background: transparent;
    color: var(--chanv-terre);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.actu-archives-btn:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-terre);
}

.actu-archives-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.actu-archives-header h3 { font-size: 18px; font-weight: 700; margin: 0; }

.actu-archives-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.changelog-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ==================== ARTICLE ACTIONS ==================== */
.changelog-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    background: white;
    color: var(--chanv-terre);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.btn-action:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-beige);
}
.btn-action-danger:hover {
    background: #FFEBEE;
    border-color: #EF5350;
    color: #C62828;
}

/* ==================== ADMIN ROWS ==================== */
.changelog-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 10px 0;
}
.changelog-admin-row:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 12px;
    margin-bottom: 4px;
}
.changelog-admin-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--chanv-terre);
    min-width: 130px;
    white-space: nowrap;
}
.changelog-admin-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.changelog-admin-dates label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}
.changelog-admin-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .changelog-admin-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .changelog-admin-dates {
        width: 100%;
    }
}
/* =====================================================================
   --- NOTIFICATION BELL + PANEL (dark sidebar theme) ---
   ===================================================================== */

.sidebar-panel .notif-bell-wrapper {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
}

.notif-bell {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
    position: relative;
    color: white;
}

.notif-bell:hover {
    background: rgba(221, 203, 164, 0.18);
    border-color: rgba(221, 203, 164, 0.35);
    transform: scale(1.08);
}

.notif-bell.notif-active {
    background: rgba(221, 203, 164, 0.15);
    border-color: var(--chanv-beige);
    box-shadow: 0 0 12px rgba(221, 203, 164, 0.12);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--chanv-terre);
    animation: notifBounce 0.3s ease-out;
}

@keyframes notifBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* --- Panel dropdown (dark) --- */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 310px;
    max-height: 480px;
    background: #232323;
    border-radius: var(--radius);
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(221, 203, 164, 0.1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

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

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(221, 203, 164, 0.05);
    border-bottom: 1px solid rgba(221, 203, 164, 0.08);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--chanv-beige);
}

.notif-panel-actions { display: flex; gap: 4px; }

.notif-panel-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    color: rgba(255, 255, 255, 0.4);
}

.notif-panel-actions button:hover {
    background: rgba(221, 203, 164, 0.12);
    color: var(--chanv-beige);
}

.notif-list { flex: 1; overflow-y: auto; max-height: 400px; }
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(221, 203, 164, 0.15); border-radius: 4px; }

/* --- Notification items --- */
.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.notif-item:hover { background: rgba(221, 203, 164, 0.07); }
.notif-item.notif-unread { background: rgba(221, 203, 164, 0.04); border-left: 3px solid var(--chanv-beige); }
.notif-item.notif-read { opacity: 0.5; }

.notif-item-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; padding-top: 2px; }
.notif-item-body { flex: 1; min-width: 0; }

.notif-item-title {
    font-weight: 700;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 3px;
    white-space: normal;
    word-break: break-word;
}

.notif-item-text {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.notif-item-time { font-size: 10px; color: rgba(221, 203, 164, 0.35); margin-top: 4px; }
.notif-empty, .notif-loading { padding: 30px 16px; text-align: center; color: rgba(255, 255, 255, 0.3); font-size: 13px; }

/* =====================================================================
   --- NOTIFICATION DETAIL MODAL ---
   ===================================================================== */

.notif-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease-out;
}

.notif-modal {
    background: #1e1e1e;
    border: 1px solid rgba(221, 203, 164, 0.12);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(221, 203, 164, 0.06);
    animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(221, 203, 164, 0.08);
    background: rgba(221, 203, 164, 0.03);
}

.notif-modal-header-icon { font-size: 28px; flex-shrink: 0; padding-top: 2px; }
.notif-modal-header-info { flex: 1; min-width: 0; }

.notif-modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
    word-break: break-word;
    line-height: 1.3;
}

.notif-modal-meta {
    font-size: 11px;
    color: rgba(221, 203, 164, 0.45);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.notif-modal-source {
    background: rgba(221, 203, 164, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--chanv-beige);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notif-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
    flex-shrink: 0;
}
.notif-modal-close:hover { background: rgba(255, 255, 255, 0.1); color: white; }

.notif-modal-body { padding: 22px; overflow-y: auto; flex: 1; }

.notif-modal-text {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-word;
    white-space: pre-wrap;
}

.notif-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(221, 203, 164, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.notif-modal-btn {
    background: rgba(221, 203, 164, 0.1);
    border: 1px solid rgba(221, 203, 164, 0.18);
    color: var(--chanv-beige);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.notif-modal-btn:hover { background: rgba(221, 203, 164, 0.18); border-color: var(--chanv-beige); }

/* =====================================================================
   "Mes demandes" — vue plein écran
   ===================================================================== */
.mytickets-view {
    max-width: 900px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}
.mytickets-container { animation: fadeIn 0.3s ease; }
.mytickets-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mytickets-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.mytickets-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
}
.mytickets-title-block { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mytickets-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--chanv-terre);
    margin: 0;
    line-height: 1.2;
}
.mytickets-subtitle { font-size: 13px; color: #888; margin: 0; }

.mytickets-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mytickets-filter {
    background: white;
    border: 1px solid #e2e2e2;
    color: #555;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mytickets-filter:hover { border-color: var(--chanv-terre); color: var(--chanv-terre); }
.mytickets-filter.active {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
}

.mytickets-list { display: flex; flex-direction: column; gap: 12px; }
.mytickets-loading, .mytickets-empty {
    padding: 40px 20px; text-align: center; color: #888;
    background: #fafafa; border-radius: 12px;
}

.mt-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mt-card:hover {
    border-color: var(--chanv-terre);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.mt-card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mt-card-row-top { font-size: 12px; }
.mt-card-row-bottom { font-size: 12px; color: #888; }
.mt-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-card-date { color: #999; font-size: 11px; white-space: nowrap; }
.mt-card-message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.mt-card-machine { color: #666; font-size: 12px; }
.mt-card-bclink {
    color: var(--chanv-terre, #555);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.mt-card-bclink:hover { text-decoration: underline; }

/* Badges */
.mt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
}
.mt-badge-feature { background: #FEF3C7; color: #92400E; }
.mt-badge-bug { background: #FEE2E2; color: #991B1B; }
.mt-badge-support { background: #E0E7FF; color: #3730A3; }
.mt-badge-open { background: #DCFCE7; color: #166534; }
.mt-badge-resolved { background: #E5E7EB; color: #374151; }

/* Détail */
.mt-detail { font-size: 14px; color: #333; }
.mt-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mt-detail-date { font-size: 12px; color: #888; margin-left: auto; }
.mt-detail-title {
    font-size: 20px; font-weight: 700; color: var(--chanv-terre);
    margin: 0 0 16px 0; line-height: 1.3;
}
.mt-detail-meta {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; color: #555;
    background: #f8f8f8; padding: 12px 14px; border-radius: 10px;
    margin-bottom: 16px;
}
.mt-detail-meta a { color: var(--chanv-terre); text-decoration: none; font-weight: 600; }
.mt-detail-meta a:hover { text-decoration: underline; }
.mt-detail-message {
    background: #fafafa;
    padding: 14px 16px;
    border-radius: 10px;
    white-space: pre-wrap;
    line-height: 1.5;
    margin-bottom: 18px;
    border-left: 3px solid var(--chanv-beige, #DDCBA4);
}

.mt-cadrage {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.mt-cadrage-title { font-weight: 700; color: #78350F; margin-bottom: 6px; font-size: 14px; }
.mt-cadrage-status { font-size: 13px; color: #92400E; margin-bottom: 8px; }
.mt-cadrage-link {
    display: inline-block; margin-right: 10px;
    color: #78350F; font-weight: 600; font-size: 13px;
    text-decoration: none;
}
.mt-cadrage-link:hover { text-decoration: underline; }
.mt-cadrage-meta { font-size: 11px; color: #92400E; opacity: 0.7; margin-top: 6px; }

.mt-comments { margin-bottom: 18px; }
.mt-comments-title { font-weight: 700; color: #333; margin-bottom: 10px; font-size: 14px; }
.mt-comments-empty {
    color: #999; font-style: italic; font-size: 13px;
    padding: 12px; text-align: center;
}
.mt-comment {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.mt-comment-hdr {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px; gap: 8px;
}
.mt-comment-author { font-weight: 700; font-size: 13px; color: #333; }
.mt-comment-date { font-size: 11px; color: #999; }
.mt-comment-text { font-size: 13px; color: #444; white-space: pre-wrap; line-height: 1.4; }

.mt-add-comment { margin-top: 14px; }
.mt-add-comment textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}
.mt-add-comment textarea:focus {
    outline: none; border-color: var(--chanv-terre);
}
.mt-detail-actions {
    display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; flex-wrap: wrap;
}
.mt-resolved-note {
    text-align: center; padding: 12px; color: #666; font-style: italic;
    background: #f5f5f5; border-radius: 10px; margin-top: 12px; font-size: 13px;
}

/* --- Drive Access Cards (dans tab Agent IA) --- */
/* Drive ACL — Table compacte */
.drive-access-cards { margin-top: 8px; }
.drive-acl-table-wrapper {
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--chanv-fibre); border-radius: 10px;
    background: #fafafa;
}
.drive-acl-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.drive-acl-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f2ede4; color: var(--chanv-terre);
    padding: 8px 12px; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--chanv-fibre); text-align: left;
}
.drive-acl-row td { padding: 8px 12px; border-bottom: 1px solid rgba(0,0,0,0.05); vertical-align: middle; }
.drive-acl-row:last-child td { border-bottom: none; }
.drive-acl-row:hover { background: rgba(201,168,118,0.06); }
.drive-acl-name { font-weight: 600; color: var(--chanv-terre); white-space: nowrap; }
.drive-acl-perms { text-align: center; white-space: nowrap; }
.drive-acl-perm-badge { font-size: 14px; margin: 0 1px; }
.drive-acl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.drive-acl-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 12px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.drive-acl-tag.group { background: rgba(201,168,118,0.12); color: var(--chanv-terre); }
.drive-acl-tag.email { background: #e8f4fd; color: #2b6cb0; }
.drive-acl-actions { text-align: right; white-space: nowrap; }
.drive-acl-action-btn {
    background: none; border: none; cursor: pointer; font-size: 13px;
    padding: 3px 5px; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s;
}
.drive-acl-action-btn:hover { opacity: 1; }
.drive-acl-action-btn.delete:hover { background: rgba(255,100,100,0.1); }
.drive-acl-count {
    text-align: right; font-size: 11px; color: #999;
    padding: 6px 12px 0;
}

/* =====================================================================
   Vue "Plan" — bâtiment + capteurs Temp Stick
   ===================================================================== */
.plan-view {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.plan-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 18px 0;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    scrollbar-width: thin;
}
.plan-tabs:empty { display: none; }
.plan-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    bottom: -1px;
}
.plan-tab:hover {
    color: var(--chanv-terre);
    background: rgba(221,203,164,0.15);
}
.plan-tab-active {
    color: var(--chanv-terre);
    background: white;
    border-color: #eee;
    border-bottom-color: white;
    cursor: default;
}
.plan-tab-count {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
}
.plan-tab-active .plan-tab-count {
    background: var(--chanv-terre);
    color: white;
}
.plan-tab-empty {
    color: #d97706;
    font-size: 18px;
    line-height: 1;
}
.plan-tab-rename {
    margin-left: 4px;
    opacity: 0.5;
    padding: 6px 10px;
    font-size: 12px;
}
.plan-tab-rename:hover { opacity: 1; background: transparent; }

.plan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    gap: 12px;
    flex-wrap: wrap;
}
.plan-toolbar-left, .plan-toolbar-right {
    display: flex; gap: 8px; align-items: center;
}
.plan-btn {
    background: white;
    border: 1px solid #ddd;
    color: #333;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.plan-btn:hover { background: var(--chanv-beige, #DDCBA4); border-color: var(--chanv-terre); }
.plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.plan-btn-primary {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
}
.plan-btn-primary:hover { background: #1a1a1a; }
.plan-zoom-level {
    font-size: 12px;
    color: #888;
    min-width: 48px;
    text-align: center;
    font-weight: 600;
}

.plan-status {
    padding: 8px 18px;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid #f0f0f0;
}
.plan-status-warn { color: #92400E; background: #FEF3C7; }
.plan-status-err  { color: #991B1B; background: #FEE2E2; }

.plan-stage {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    background:
        linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
        linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
        linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
    cursor: grab;
    user-select: none;
}
.plan-stage-grabbing { cursor: grabbing; }
.plan-edit-mode .plan-stage { cursor: default; }

.plan-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transition: transform 0.05s linear;
}

#planImage {
    display: block;
    max-width: none;
    pointer-events: none; /* on capture les events sur le stage */
    user-select: none;
}

.plan-markers {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* --- Markers --- */
/* Le marker est positionné en % du canvas (qui se scale). Pour rester lisible
   à tout zoom, le marker se contre-scale via --plan-scale (set par JS).
   Limites : on borne entre 0.5x (sinon trop gros à fort zoom) et 4x. */
.plan-marker {
    position: absolute;
    width: 24px; height: 24px;
    transform: translate(-50%, -50%) scale(clamp(0.6, calc(1 / var(--plan-scale, 1)), 4));
    transform-origin: center center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}
.plan-edit-mode .plan-marker[data-editable="true"] {
    cursor: grab;
}
.plan-edit-mode .plan-marker[data-editable="true"]:active { cursor: grabbing; }

.plan-marker-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #10B981;
    border: 3px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35);
    animation: planPulse 2s infinite ease-out;
}
.plan-marker-offline .plan-marker-dot { background: #9CA3AF; animation: none; }
.plan-marker-unknown .plan-marker-dot { background: #F59E0B; animation: none; }
@keyframes planPulse {
    0%   { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0 rgba(16,185,129,0.5); }
    70%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 16px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0 rgba(16,185,129,0); }
}

/* Label permanent (temp + humidité) — visible en tout temps */
.plan-marker-label {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,0.93);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.plan-marker-offline .plan-marker-label { background: rgba(120,120,120,0.93); }
.plan-marker-temp { color: #FCA5A5; }
.plan-marker-hum  { color: #93C5FD; }
.plan-marker-label::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: rgba(20,20,20,0.93);
}
.plan-marker-offline .plan-marker-label::before { border-right-color: rgba(120,120,120,0.93); }

/* Bubble détail (nom + last check-in) — au survol uniquement */
.plan-marker-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #222;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border: 1px solid #e2e2e2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 3;
}
.plan-marker:hover .plan-marker-bubble {
    opacity: 1;
}
.plan-marker-bubble::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
}
.plan-marker-name { font-weight: 700; color: var(--chanv-terre, #555); }
.plan-marker-time { font-size: 11px; color: #888; margin-top: 2px; }

/* --- Tray (capteurs à placer) — overlay en coords écran, hors canvas transformé --- */
.plan-tray-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20;
}
.plan-tray-container:empty { display: none; }
.plan-tray {
    position: absolute;
    top: 16px; right: 16px;
    width: 240px;
    background: rgba(255,255,255,0.97);
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    pointer-events: auto;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.plan-tray-hint {
    margin-top: 8px;
    font-size: 10px; color: #999;
    font-style: italic; text-align: center;
}
.plan-tray-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #555; margin-bottom: 8px;
}
.plan-tray-list { display: flex; flex-direction: column; gap: 4px; }
.plan-tray-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 12px;
    cursor: grab;
    transition: var(--transition);
    user-select: none;
}
.plan-tray-item:hover {
    background: var(--chanv-beige, #DDCBA4);
    transform: translateX(-2px);
}
.plan-tray-item:active { cursor: grabbing; }
.plan-tray-name { font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-tray-temp { font-weight: 700; color: #666; }

/* =====================================================================
   Chat employés (dev-only)
   ===================================================================== */
.btn-chat {
    background: white;
    color: var(--chanv-terre, #333);
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-chat:hover { background: var(--chanv-beige, #DDCBA4); }
.chat-nav-badge {
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f5f5f5;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.chat-header {
    background: var(--chanv-terre, #282828);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.chat-back {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.chat-back:hover { background: rgba(255,255,255,0.1); }
.chat-title { font-size: 18px; margin: 0; font-weight: 700; }
.chat-header-spacer { flex: 1; }

.chat-body {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
    overflow: hidden;
}

/* --- Sidebar conversations --- */
.chat-sidebar {
    background: white;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-sidebar-actions {
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.chat-new-btn { width: 100%; }
.chat-convs-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Onglets Conversations / Salons au-dessus de la liste */
.chat-tabs-row { display: flex; gap: 6px; padding: 0 14px 10px; }
.chat-tab {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 10px;
    border: 1px solid #e8e2d6; border-radius: 10px;
    background: #faf7f0; color: #6b5a3a;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.chat-tab:hover { background: #f1ead9; }
.chat-tab.active { background: var(--chanv-terre); border-color: var(--chanv-terre); color: #fff; }
.chat-tab-badge {
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #e53935; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.chat-tab-badge.hidden { display: none; }
body[data-gtheme="dark"] .chat-tab { background: #241F19; border-color: rgba(221, 203, 164, 0.2); color: #d9c9a5; }
body[data-gtheme="dark"] .chat-tab:hover { background: #2E271E; }
body[data-gtheme="dark"] .chat-tab.active { background: #D9BC77; border-color: #D9BC77; color: #241F19; }

/* Mobile façon Messenger : le gros bouton laisse sa ligne au ✏️ rond de
   l'en-tête « Chat employés » ; la recherche garde toute sa largeur.
   Desktop : inchangé (bouton pleine largeur, ✏️ masqué). */
.chat-sidebar-top { display: contents; }
.chat-compose-btn {
    display: none;
    width: 36px; height: 36px; flex: none;
    border: none; border-radius: 50%;
    background: var(--chanv-beige, #DDCBA4); color: var(--chanv-terre, #282828);
    font-size: 16px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    transition: transform 0.1s;
}
.chat-compose-btn:active { transform: scale(0.92); }
@media (max-width: 768px) {
    .chat-compose-btn { display: inline-flex; }
    .chat-sidebar-actions { display: none; }
}

.chat-conv-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
    position: relative;
    align-items: center;
}
.chat-conv-item:hover { background: #fafafa; }
.chat-conv-active { background: rgba(221,203,164,0.18); }
.chat-conv-active:hover { background: rgba(221,203,164,0.25); }
.chat-conv-unread .chat-conv-name { font-weight: 800; color: var(--chanv-terre); }
.chat-conv-unread .chat-conv-preview { color: #444; font-weight: 600; }

.chat-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 16px;
}
.chat-avatar-room { background: var(--chanv-terre, #555); font-size: 18px; }
.chat-avatar-letter { background: var(--chanv-beige, #C9A876); color: var(--chanv-terre); }

.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-conv-name {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-time { font-size: 11px; color: #999; white-space: nowrap; }
.chat-conv-preview {
    font-size: 13px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.chat-conv-dot {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    background: #E53E3E;
    border-radius: 50%;
}

/* --- Pane messages --- */
.chat-pane {
    background: white;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
    padding: 40px;
}
.chat-empty-icon { font-size: 48px; margin-bottom: 16px; }

.chat-pane-header {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.chat-pane-title { flex: 1; min-width: 0; }
.chat-pane-name {
    font-weight: 700; font-size: 16px; color: var(--chanv-terre);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-pane-subtitle { font-size: 12px; color: #999; }
.chat-pane-edit {
    background: transparent; border: none; cursor: pointer;
    font-size: 18px; opacity: 0.5; padding: 6px;
    transition: opacity 0.15s;
}
.chat-pane-edit:hover { opacity: 1; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-day-sep {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin: 16px 0 8px;
    position: relative;
}
.chat-day-sep::before, .chat-day-sep::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 80px);
    height: 1px;
    background: #e5e5e5;
}
.chat-day-sep::before { left: 0; }
.chat-day-sep::after { right: 0; }

.chat-msg {
    display: flex;
    gap: 10px;
    padding: 4px 0;
}
.chat-msg-grouped { margin-top: -4px; }
.chat-msg-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--chanv-beige, #DDCBA4);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--chanv-terre); font-size: 14px;
}
.chat-msg-avatar-letter { background: var(--chanv-beige, #DDCBA4); }
.chat-msg-avatar-spacer { width: 36px; flex-shrink: 0; }
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-hdr {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-msg-author { font-weight: 700; color: var(--chanv-terre); font-size: 13px; }
.chat-msg-time { font-size: 11px; color: #999; }
.chat-msg-content {
    background: white;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    color: #222;
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 80%;
    display: inline-block;
}
.chat-msg-own .chat-msg-content {
    background: var(--chanv-terre, #2d3748);
    border-color: var(--chanv-terre, #2d3748);
    color: white;
}
.chat-msg-own .chat-msg-author { display: none; }

/* --- Alignement type Basecamp : mes messages à DROITE, les autres à GAUCHE --- */
.chat-msg-own { flex-direction: row-reverse; }
.chat-msg-own .chat-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.chat-msg-own .chat-msg-hdr { flex-direction: row-reverse; }
.chat-msg-other .chat-msg-body { display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg-own .chat-msg-content,
.chat-msg-other .chat-msg-content { max-width: 100%; }

/* --- Réactions emoji --- */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-msg-own .chat-reactions { justify-content: flex-end; }
.chat-reaction {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f1f1f1; border: 1px solid #e2e2e2; border-radius: 12px;
    padding: 1px 8px; font-size: 13px; cursor: pointer; line-height: 1.5;
    transition: background .12s, border-color .12s;
}
.chat-reaction span { font-size: 11px; font-weight: 700; color: #666; }
.chat-reaction:hover { background: #e8e8e8; }
.chat-reaction-mine { background: #E9E2D0; border-color: var(--chanv-or, #A8863F); }
.chat-reaction-mine span { color: var(--chanv-terre, #2d3748); }

/* Palette de réaction rapide (au clic sur 😊) */
.chat-react-palette {
    position: fixed; z-index: 400;
    display: flex; gap: 2px; padding: 4px 6px;
    background: #fff; border: 1px solid #e2e2e2; border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.chat-react-choice {
    border: none; background: none; cursor: pointer; font-size: 20px;
    padding: 3px; border-radius: 8px; line-height: 1; transition: transform .1s, background .1s;
}
.chat-react-choice:hover { transform: scale(1.25); background: #f1f1f1; }
.chat-react-more { font-weight: 700; color: #888; border-left: 1px solid #eee; margin-left: 2px; padding-left: 6px; }
/* Palette déployée (au clic sur ＋) : grille scrollable de tous les emojis */
.chat-react-palette-full { flex-wrap: wrap; width: 300px; max-height: 240px; overflow-y: auto; gap: 1px; }
.chat-react-palette-full .chat-react-choice { font-size: 18px; }
body[data-gtheme="dark"] .chat-react-more { color: rgba(255,255,255,.5); border-left-color: rgba(221,203,164,.14); }

/* --- Historique au scroll-up : indicateur discret en haut du flux ---
   (réutilise l'animation chat-typing-dots, dorée → lisible en dark mode d'office) */
.chat-hist-loading { display: flex; justify-content: center; padding: 8px 0 4px; opacity: .7; }

/* --- Indicateur de saisie (3 points sautillants) --- */
.chat-typing { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--chanv-or, #A8863F); display: inline-block;
    animation: chatTypingBounce 1.2s infinite ease-in-out both;
}
.chat-typing-dots i:nth-child(1) { animation-delay: -0.24s; }
.chat-typing-dots i:nth-child(2) { animation-delay: -0.12s; }
.chat-typing-txt { font-size: 12px; color: #888; font-style: italic; }
@keyframes chatTypingBounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots i { animation: none; opacity: .8; }
}

/* --- Gandalf bot messages --- */
/* Avatar du bot = icône de l'app (img) — plus de pastille emoji violette */
.chat-msg-avatar-bot {
    background: #241F19;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
/* Message ADRESSÉ à Gandalf : le /gandalf est masqué, la bulle prend un
   contour violet « magicien » bien visible (même signature que le mode du
   composeur). S'applique aussi à tous les messages de l'utilisateur dans la
   conversation dédiée Gandalf. */
/* Pastille « ⬇ Nouveaux messages » : sticky dans la liste — visible quand on
   lit plus haut et qu'un message arrive, sans JAMAIS déplacer la vue. */
.chat-newmsg-pill { position: sticky; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: block; margin: 8px auto 0; border: none; cursor: pointer; z-index: 5;
    background: var(--chanv-terre, #6B5A3A); color: #fff; font-weight: 700; font-size: 13px;
    border-radius: 999px; padding: 8px 16px; box-shadow: 0 4px 14px rgba(40,34,24,.35); }
.chat-newmsg-pill:hover { filter: brightness(1.1); }
body[data-gtheme="dark"] .chat-newmsg-pill { background: #DDCBA4; color: #2b2415; }

/* PAS de fond violet : il écrasait le fond de la bulle (texte blanc illisible
   en clair). Le contour + accent + halo portent la signature, la bulle garde
   ses couleurs d'origine (donc son contraste). */
.chat-msg-togandalf .chat-msg-content {
    border: 2px solid rgba(142, 111, 199, 0.9);
    border-right-width: 4px; /* accent côté bulle (messages à soi = à droite) */
    box-shadow: 0 0 12px rgba(142, 111, 199, 0.4);
}
body[data-gtheme="dark"] .chat-msg-togandalf .chat-msg-content {
    border-color: rgba(167, 139, 250, 0.85);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
}
.chat-msg-bot .chat-msg-content {
    background: linear-gradient(135deg, #EEF2FF 0%, #F3E8FF 100%);
    border-color: #C7D2FE;
    color: #1E1B4B;
    position: relative;
}
.chat-msg-bot .chat-msg-content::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px; bottom: -1px;
    width: 3px;
    background: linear-gradient(180deg, #6366F1, #8B5CF6);
    border-radius: 12px 0 0 12px;
}
.chat-msg-author-bot {
    color: #6366F1 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-msg-author-tag {
    background: #6366F1;
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-empty-msgs {
    text-align: center; color: #999;
    padding: 40px 20px;
    font-size: 14px;
}

/* --- Composer --- */
.chat-composer {
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.chat-composer-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    min-width: 0;
}
.chat-composer textarea {
    flex: 1;
    min-width: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 16px; /* < 16px = auto-zoom iOS au focus */
    line-height: 1.4;
    resize: none;
    min-height: 42px;
    max-height: 160px;
    outline: none;
    box-sizing: border-box;
}
.chat-composer textarea:focus { border-color: var(--chanv-terre); }
.chat-tool-btn {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.chat-tool-btn:hover { background: #f5f1e8; border-color: var(--chanv-terre); }
/* Groupe d'outils à gauche (façon Messenger) : se replie derrière la flèche › à la saisie. */
.chat-tools-left { display: inline-flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; min-width: 0; }
.chat-tools-expand { display: none; font-size: 22px; font-weight: 700; color: var(--chanv-terre); }
.chat-composer-row.tools-collapsed .chat-tools-left { display: none; }
.chat-composer-row.tools-collapsed .chat-tools-expand { display: flex; }
.chat-send {
    white-space: nowrap;
    width: 42px; height: 42px; min-width: 42px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
/* Envoyer masqué tant qu'il n'y a rien à envoyer (pas encore dans le champ) → élargit le champ */
.chat-composer-row .chat-send { display: none; }
.chat-composer-row.can-send .chat-send { display: flex; }
/* Pas de scrollbar dans le champ (elle masquait le radius à droite, effet bizarre) */
.chat-composer textarea { scrollbar-width: none; }
.chat-composer textarea::-webkit-scrollbar { display: none; }
/* Menu du « + » : petite feuille qui remonte au-dessus du composeur */
.chat-composer { position: relative; }
.chat-plus-menu {
    position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 40;
    background: var(--chanv-blanc, #fff); border: 1px solid rgba(40,34,24,.12);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(40,34,24,.20);
    padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 200px;
}
.chat-plus-menu.hidden { display: none; }
.chat-plus-menu button {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    border: none; background: none; padding: 11px 12px; border-radius: 10px; cursor: pointer;
    font-size: 14px; font-weight: 500; color: inherit;
}
.chat-plus-menu button:hover { background: rgba(168,134,63,.12); }
.chat-plus-btn { font-size: 22px; font-weight: 400; line-height: 1; }
body[data-gtheme="dark"] .chat-plus-menu { background: #2b2823; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .chat-plus-menu button { color: rgba(255,255,255,.9); } /* sinon noir sur fond sombre */
body[data-gtheme="dark"] .chat-plus-menu button:hover { background: rgba(221,203,164,.12); }
.chat-plus-check { margin-left: auto; color: #8E6FC7; font-weight: 800; }
.chat-plus-check.hidden { display: none; }

/* ---- Mode Gandalf IA : le composeur devient « magicien » (violet) ---- */
.chat-gandalf-bar { display: flex; align-items: center; gap: 9px; margin: 0 4px 7px;
    padding: 7px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: linear-gradient(100deg, rgba(142,111,199,.16), rgba(142,111,199,.06));
    border: 1px solid rgba(142,111,199,.45); color: #6D51A8; }
.chat-gandalf-bar.hidden { display: none; }
.chat-gandalf-bar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-gandalf-bar-x { border: none; background: none; cursor: pointer; color: inherit;
    font-size: 14px; font-weight: 800; padding: 2px 7px; border-radius: 7px; flex-shrink: 0; }
.chat-gandalf-bar-x:hover { background: rgba(142,111,199,.18); }
body[data-gtheme="dark"] .chat-gandalf-bar { color: #C4B5FD; border-color: rgba(167,139,250,.4);
    background: linear-gradient(100deg, rgba(167,139,250,.14), rgba(167,139,250,.05)); }
.chat-composer.gandalf-mode .chat-composer-row {
    border-radius: 22px;
    box-shadow: 0 0 0 2px rgba(142,111,199,.65), 0 0 14px rgba(142,111,199,.30);
    background: linear-gradient(120deg, rgba(142,111,199,.10), rgba(142,111,199,.04));
}
.chat-composer.gandalf-mode textarea { caret-color: #8E6FC7; }
.chat-composer.gandalf-mode textarea::placeholder { color: #8E6FC7; opacity: .85; }
.chat-composer.gandalf-mode .chat-send { background: #8E6FC7 !important; border-color: #8E6FC7 !important; }
.chat-composer.gandalf-mode .chat-plus-btn { color: #8E6FC7; }
body[data-gtheme="dark"] .chat-composer.gandalf-mode .chat-composer-row {
    box-shadow: 0 0 0 2px rgba(167,139,250,.6), 0 0 16px rgba(167,139,250,.28);
    background: linear-gradient(120deg, rgba(167,139,250,.12), rgba(167,139,250,.05));
}
body[data-gtheme="dark"] .chat-composer.gandalf-mode textarea::placeholder { color: #C4B5FD; }
body[data-gtheme="dark"] .chat-composer.gandalf-mode .chat-send { background: #A78BFA !important; border-color: #A78BFA !important; color: #241F33 !important; }

/* Preview de la pièce jointe en attente */
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px dashed #ccc;
    border-radius: 12px;
    background: #faf8f4;
    font-size: 13px;
    min-width: 0;
}
.chat-attach-preview.hidden { display: none; }
.chat-attach-preview img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.chat-attach-icon { font-size: 22px; flex-shrink: 0; }
.chat-attach-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    min-width: 0;
}
.chat-attach-preview small { color: #999; flex-shrink: 0; }
.chat-attach-x {
    margin-left: auto;
    border: none; background: none;
    font-size: 15px;
    cursor: pointer;
    color: #999;
    padding: 4px;
    flex-shrink: 0;
}
.chat-attach-x:hover { color: #e53e3e; }
/* Aperçu multi-pièces-jointes : chaque fichier = une puce (wrap) */
.chat-attach-preview { flex-wrap: wrap; }
.chat-attach-item { display: inline-flex; align-items: center; gap: 8px; background: rgba(40,34,24,.04); border: 1px solid rgba(40,34,24,.1); border-radius: 10px; padding: 5px 8px; max-width: 230px; }
.chat-attach-item .chat-attach-name { max-width: 110px; }
.chat-attach-item .chat-attach-x { margin-left: 2px; }
body[data-gtheme="dark"] .chat-attach-item { background: rgba(221,203,164,.06); border-color: rgba(221,203,164,.16); }

/* Enregistrement vocal en cours */
.chat-rec-bar { display: none; }
.chat-composer.is-recording .chat-rec-bar {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
    min-height: 42px;
}
.chat-composer.is-recording textarea,
.chat-composer.is-recording .chat-tools-left,
.chat-composer.is-recording .chat-tools-expand,
.chat-composer.is-recording .chat-mic-btn { display: none; }
/* Pendant l'enregistrement, ➤ = arrêter+envoyer → toujours visible (prime sur can-send) */
.chat-composer.is-recording .chat-send { display: flex; }
.chat-rec-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #e53e3e;
    animation: chatRecBlink 1s infinite;
    flex-shrink: 0;
}
@keyframes chatRecBlink { 50% { opacity: 0.25; } }
.chat-rec-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
}

/* Pièces jointes dans les messages */
.chat-att { margin-top: 6px; }
.chat-att-img {
    display: block;
    /* 80vw − 110px = place réelle de la bulle mobile : colonne − padding 40
       − avatar 36 − gap 10, plafonnée à 80% (.chat-msg-line), moins l'heure
       groupée + ⋯ tactile. 70vw débordait dès que le viewport < 688px
       (ticket UsmGYJdaaacT7i75uldt). Pas de % : cyclique en shrink-to-fit. */
    max-width: min(280px, calc(80vw - 110px));
    max-height: 300px;
    border-radius: 12px;
    cursor: zoom-in;
    background: #eee;
    min-height: 60px;
    min-width: 80px;
    object-fit: cover;
}
.chat-att-audio {
    display: block;
    width: min(300px, 75vw);
    height: 42px;
}
.chat-att-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    max-width: min(300px, 75vw);
    min-width: 0;
    text-align: left;
}
.chat-att-file:hover { border-color: var(--chanv-terre); background: #faf8f4; }
.chat-att-file-icon { font-size: 20px; flex-shrink: 0; }
.chat-att-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    min-width: 0;
}
.chat-att-file small { color: #999; flex-shrink: 0; }
.chat-att-error { font-size: 12px; color: #999; font-style: italic; }
/* Image en échec transitoire : léger fond rougeâtre (retentée au rendu suivant) */
.chat-att-img.chat-att-broken { background: rgba(179,38,30,.08); cursor: default; }

/* Drag & drop */
.chat-pane { position: relative; }
.chat-pane.chat-dropping::after {
    content: 'Dépose ton fichier ici  📎';
    position: absolute;
    inset: 10px;
    z-index: 5;
    border: 2px dashed var(--chanv-terre);
    border-radius: 16px;
    background: rgba(244, 239, 227, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--chanv-terre);
    pointer-events: none;
}

/* Lightbox image plein écran */
/* --- Modal Nouvelle conv --- */
.chat-type-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}
.chat-type-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    transition: all 0.15s;
}
.chat-type-btn.active { background: white; color: var(--chanv-terre); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.chat-selected-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 0;
    min-height: 32px;
}
.chat-no-selected { color: #aaa; font-size: 12px; font-style: italic; padding: 6px 0; }
.chat-chip {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.chat-chip:hover { background: #c9a876; }
.chat-chip-x { font-size: 14px; line-height: 1; }
.chat-users-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 8px;
}
.chat-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}
.chat-user-item:last-child { border-bottom: none; }
.chat-user-item:hover { background: #fafafa; }
.chat-user-photo {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    display: flex; align-items: center; justify-content: center;
    color: var(--chanv-terre); font-weight: 700; font-size: 13px;
}
.chat-user-info { flex: 1; min-width: 0; }
.chat-user-name { font-weight: 600; font-size: 13px; color: #222; }
.chat-user-email { font-size: 11px; color: #999; }

.chat-loading, .chat-error, .chat-empty-list {
    padding: 30px 14px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.chat-error { color: #c53030; }

/* Responsive */
@media (max-width: 768px) {
    .chat-body { grid-template-columns: 1fr; }
    .chat-sidebar { display: none; }
    .chat-view.chat-show-sidebar .chat-sidebar { display: flex; }
    .chat-view.chat-show-sidebar .chat-pane { display: none; }
}

/* =====================================================================
 * MONITEUR — Palantir service cards (Super Admin)
 * ===================================================================== */

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.monitor-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #3a3a3a);
    border-left: 3px solid var(--status-color, #888);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-color: var(--status-color, #888);
}

.mc-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-color, #888);
    box-shadow: 0 0 6px var(--status-color, transparent);
    flex-shrink: 0;
}
.mc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.mc-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #f0f0f0);
}
.mc-env {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.mc-env-prod {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}
.mc-env-dev {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.mc-sparkline {
    width: 100%;
    height: 36px;
    opacity: 0.9;
}

.mc-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.mc-metric {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    color: var(--text-secondary, #aaa);
}
.mc-metric-icon {
    font-size: 0.7rem;
}
.mc-metric span:not(.mc-metric-icon) {
    font-weight: 500;
    color: var(--text-primary, #f0f0f0);
}
.mc-metric small {
    font-size: 0.65rem;
    color: var(--text-secondary, #888);
}

.mc-footer {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    color: var(--text-secondary, #777);
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #333);
}

@media (max-width: 640px) {
    .monitor-grid {
        grid-template-columns: 1fr;
    }
    .mc-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* =====================================================================
   Module Tâches (dev-only)
   ===================================================================== */
.btn-tasks {
    background: white;
    color: var(--chanv-terre, #333);
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-tasks:hover { background: var(--chanv-beige, #DDCBA4); }
.tasks-nav-badge {
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tasks-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f7f7f5;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.tasks-list > * { flex-shrink: 0; }

.tasks-header {
    background: var(--chanv-terre, #282828);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.tasks-back {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.tasks-back:hover { background: rgba(255,255,255,0.1); }
.tasks-title { font-size: 18px; margin: 0; font-weight: 700; flex: 1; }
.tasks-new-btn { white-space: nowrap; }

/* Toolbar */
.tasks-toolbar {
    padding: 14px 24px;
    background: white;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tasks-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.tasks-filter-group {
    display: flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.tasks-filter, .tasks-status {
    background: transparent;
    border: none;
    color: #666;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.tasks-filter.active, .tasks-status.active {
    background: white;
    color: var(--chanv-terre);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tasks-search {
    border: 1px solid #ddd;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    min-width: 200px;
    outline: none;
}
.tasks-search:focus { border-color: var(--chanv-terre); }

.tasks-status-line {
    padding: 8px 24px;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: white;
    border-bottom: 1px solid #f5f5f5;
}

/* Liste */
.tasks-list {
    flex: 1;
    min-height: 0; /* flex:1 + overflow : sans ceci, contenu long = clip SANS scroll */
    overflow-y: auto;
    /* voir règle .tasks-list>* plus bas : les blocs ne doivent JAMAIS se compresser */
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 1440px;   /* grand écran : on profite de l'espace */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.tasks-loading, .tasks-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    background: white;
    border-radius: 12px;
}
.tasks-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* Card */
.tasks-card {
    background: white;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    border-left-width: 3px;
}
.tasks-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.tasks-card-priority-urgent { border-left-color: #DC2626; }
.tasks-card-priority-high   { border-left-color: #EA580C; }
.tasks-card-priority-normal { border-left-color: #94A3B8; }
.tasks-card-priority-low    { border-left-color: #10B981; }
.tasks-card-done { opacity: 0.55; }
.tasks-card-done .tasks-card-title { text-decoration: line-through; }

.tasks-card-check {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.1s;
}
.tasks-card-check:hover { transform: scale(1.15); }

.tasks-card-body { flex: 1; min-width: 0; }
.tasks-card-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    margin-bottom: 4px;
    line-height: 1.3;
    /* Le titre est une ANCRE (⌘/Ctrl+clic → nouvel onglet, ticket Z0vjLu) :
       on lui retire l'apparence de lien, la carte entière reste cliquable. */
    display: block;
    text-decoration: none;
}
.tasks-card-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin-bottom: 6px;
}
.tasks-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.tasks-meta-chip {
    background: #f0f0f0;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    /* mobile : un long chemin de projet se tronque au lieu de déborder de la carte */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.tasks-chip-urgent { background: #FEE2E2; color: #991B1B; }
.tasks-chip-high   { background: #FFEDD5; color: #9A3412; }
.tasks-chip-low    { background: #D1FAE5; color: #065F46; }
.tasks-chip-normal { background: #E0E7FF; color: #3730A3; }
.tasks-chip-done   { background: #D1FAE5; color: #065F46; }
.tasks-chip-open   { background: #E0E7FF; color: #3730A3; }
.tasks-chip-in_progress { background: #FEF3C7; color: #92400E; }
.tasks-chip-project { background: rgba(221,203,164,0.4); color: var(--chanv-terre); }
.tasks-due-late { background: #FEE2E2 !important; color: #991B1B !important; }

.tasks-card-assignees {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.tasks-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    border: 2px solid white;
    box-shadow: 0 0 0 1px #e2e2e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: var(--chanv-terre, #555);
    margin-left: -6px;
}
.tasks-avatar:first-child { margin-left: 0; }
.tasks-avatar-letter { background: var(--chanv-beige, #DDCBA4); }

/* Form modal */
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }

.tasks-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    min-height: 32px;
}
.tasks-no-selected { color: #aaa; font-size: 12px; font-style: italic; padding: 6px 0; }
.tasks-assign-me {
    background: rgba(221,203,164,0.3);
    border: none;
    color: var(--chanv-terre, #555);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    font-family: inherit;
    transition: background 0.15s;
}
.tasks-assign-me:hover { background: var(--chanv-beige, #DDCBA4); }
.tasks-chip {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tasks-chip:hover { background: #C9A876; }
.tasks-chip-x { font-size: 14px; line-height: 1; }
.tasks-assignee-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 6px;
}
.tasks-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}
.tasks-user-item:last-child { border-bottom: none; }
.tasks-user-item:hover { background: #fafafa; }
.tasks-user-photo {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chanv-terre);
    font-weight: 700;
    font-size: 13px;
}
.tasks-user-info { flex: 1; min-width: 0; }
.tasks-user-name { font-weight: 600; font-size: 13px; color: #222; }
.tasks-user-email { font-size: 11px; color: #999; }
.tasks-empty-list { padding: 18px; text-align: center; color: #999; font-size: 12px; }

/* Detail modal */
.tasks-detail-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tasks-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0 0 14px 0;
    line-height: 1.3;
}
.tasks-detail-desc {
    background: #fafafa;
    padding: 12px 14px;
    border-radius: 8px;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    border-left: 3px solid var(--chanv-beige);
}
.tasks-detail-fields { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.tasks-detail-field { flex: 1; min-width: 180px; }
.tasks-detail-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.tasks-detail-field > div { font-size: 13px; color: #444; }
.tasks-detail-assignees {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tasks-detail-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.tasks-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.btn-danger {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-danger:hover { background: #FCA5A5; }

.tasks-comments-title {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}
.tasks-comments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tasks-comments-empty {
    text-align: center;
    color: #aaa;
    font-style: italic;
    font-size: 13px;
    padding: 14px;
}
.tasks-comment {
    background: #fafafa;
    border-radius: 8px;
    padding: 10px 12px;
}
.tasks-comment-hdr {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}
.tasks-comment-date { color: #999; font-size: 11px; }
.tasks-comment-content {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    white-space: pre-wrap;
}
.tasks-comment-form {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.tasks-comment-form textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 40px;
    outline: none;
}
.tasks-comment-form textarea:focus { border-color: var(--chanv-terre); }

/* @mentions dans les commentaires */
.tasks-comment-input-wrap { position: relative; flex: 1; }
.tasks-comment-input-wrap textarea { width: 100%; box-sizing: border-box; }
.tasks-mention {
    background: rgba(99,102,241,0.12);
    color: #4338CA;
    font-weight: 600;
    border-radius: 4px;
    padding: 0 3px;
}
.tasks-mention-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-width: 90%;
    background: white;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    z-index: 30;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.tasks-mention-dropdown.hidden { display: none; }
.tasks-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.tasks-mention-item:hover, .tasks-mention-item.active { background: rgba(99,102,241,0.1); }
.tasks-mention-photo {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    display: flex; align-items: center; justify-content: center;
    color: var(--chanv-terre); font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.tasks-mention-name { font-size: 13px; font-weight: 600; color: #333; }

/* --- Firestore Monitor Section --- */
.monitor-firestore-section {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.monitor-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #f0f0f0);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.monitor-firestore-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.monitor-fs-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #3a3a3a);
    border-left: 3px solid #f59e0b;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.monitor-fs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-color: #f59e0b;
}
.fs-monitor-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fs-mon-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fs-mon-label {
    font-size: 10px;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.fs-mon-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #f0f0f0);
}

/* ============================================================
   LECLAUDE — Bulletin interne magazine
   ============================================================ */

/* View container */
.leclaude-view {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f5f5f0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #1a1a1a;
}

/* ---------- TOP BAR ---------- */
.lc-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 16px;
    height: 52px;
    background: #1a1a1a;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}
.lc-topbar-back {
    background: none; border: none; color: #fff; font-size: 18px;
    cursor: pointer; padding: 6px 10px; border-radius: 6px;
    transition: background .2s; justify-self: start;
    display: flex; align-items: center; gap: 4px;
}
.lc-topbar-back:hover { background: rgba(255,255,255,0.1); }
.lc-topbar-brand {
    font-size: 16px; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center; white-space: nowrap;
}
.lc-plus { color: #E3000B; font-weight: 900; }
.lc-topbar-actions {
    justify-self: end; display: flex; align-items: center; gap: 8px;
}
.lc-topbar-btn {
    background: none; border: none;
    color: rgba(255,255,255,0.7); padding: 6px; border-radius: 50%; cursor: pointer;
    font-size: 14px; transition: all .2s;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
}
.lc-topbar-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lc-topbar-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Language switch */
.lc-lang-switch { display: flex; gap: 2px; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 2px; }
.lc-lang-btn {
    background: none; border: none; color: rgba(255,255,255,0.5);
    padding: 4px 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; border-radius: 4px; transition: all .2s;
    letter-spacing: 1px;
}
.lc-lang-btn.active { background: #E3000B; color: #fff; }
.lc-lang-btn:hover:not(.active) { color: #fff; }

/* ---------- LAYOUT ---------- */
.lc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 52px);
}

/* ---------- SIDEBAR ---------- */
.lc-sidebar {
    background: #fff;
    border-right: 1px solid #e0e0e0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
/* Watermark emblème Chanv dans le sidebar */
.lc-sidebar::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    aspect-ratio: 1;
    max-width: 140px;
    background: url('/images/chanv-emblem-white.svg') center/contain no-repeat;
    opacity: 0.025;
    pointer-events: none;
    filter: invert(1);
    z-index: 0;
}
/* Pied de sidebar – identité Groupe Chanv */
.lc-sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid #e8e8e8;
    position: relative;
    z-index: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.lc-sidebar-footer-emblem {
    width: 18px;
    height: 18px;
    filter: invert(1);
    opacity: 0.4;
}
.lc-sidebar-footer-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}
/* Carré rouge façon La Presse : LE / CLAUDE empilés dans un carré parfait */
.lc-logo-block {
    background: #E3000B;
    aspect-ratio: 1 / 1;
    padding: 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}
.lc-logo-text {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.0;
    color: #fff;
    /* Inter plafonne à 900 : le contour épaissit les lettres (effet extra-black) */
    -webkit-text-stroke: 2.5px #fff;
    text-transform: uppercase;
    display: block;
}
.lc-logo-subtitle {
    display: block;
    align-self: stretch;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}
.lc-sidebar-meta {
    padding: 12px 20px 10px;
    border-bottom: 1px solid #ddd;
}
.lc-date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.lc-edition-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #aaa;
    line-height: 1.5;
}
.lc-edition-number {
    font-size: 9px;
    font-weight: 700;
    color: #888;
    letter-spacing: 1.5px;
    margin-bottom: 1px;
}

/* Sidebar sections */
.lc-sidebar-section {
    padding: 20px;
    border-bottom: 1px solid #eee;
}
.lc-sidebar-heading {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lc-heading-marker {
    width: 16px; height: 16px;
    background: #E3000B;
    display: inline-block;
    flex-shrink: 0;
}
.lc-marker-agenda {
    background: none;
    width: 18px; height: 18px;
}

/* Brief items — journalistic sommaire */
.lc-brief-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background .2s;
    cursor: pointer;
}
.lc-brief-item:last-child { border-bottom: none; }
.lc-brief-item:hover { background: rgba(227,0,11,0.03); }
.lc-brief-bullet {
    width: 5px;
    height: 5px;
    background: #1a1a1a;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.lc-brief-title {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.3px;
    color: #1a1a1a;
    cursor: pointer;
    transition: color .2s;
}
.lc-brief-title:hover {
    color: #E3000B;
}
.lc-brief-text {
    font-size: 11px;
    color: #888;
    margin: 2px 0 0;
    line-height: 1.4;
}
.lc-brief-separator {
    display: none;
}
.lc-agenda-link {
    font-size: 11px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity .2s;
}
.lc-agenda-link:hover { opacity: 0.7; }

/* Popup overlay */
.lc-popup-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: lc-fadeIn .2s ease;
}
.lc-popup {
    background: #fff; border-radius: 12px; padding: 32px;
    max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
}
.lc-popup-title { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.lc-popup-msg { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 24px; }
.lc-popup-actions { display: flex; gap: 12px; justify-content: center; }
.lc-popup-btn {
    padding: 10px 24px; border-radius: 8px; font-size: 13px;
    font-weight: 700; cursor: pointer; border: none;
    text-decoration: none; display: inline-block; transition: all .2s;
}
.lc-popup-btn-primary { background: #E3000B; color: #fff; }
.lc-popup-btn-primary:hover { background: #c5000a; transform: translateY(-1px); }
.lc-popup-btn-cancel { background: #f0f0f0; color: #333; }
.lc-popup-btn-cancel:hover { background: #e0e0e0; }
@keyframes lc-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Agenda items */
.lc-agenda-item {
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #1a1a1a;
}
.lc-agenda-text {
    font-size: 13px;
    margin: 0 0 2px;
    line-height: 1.4;
    font-weight: 500;
}
.lc-agenda-date {
    font-size: 11px;
    color: #888;
    text-transform: capitalize;
}
.lc-agenda-link {
    display: block;
    margin-top: 16px;
}

/* ---------- MAIN AREA ---------- */
.lc-main {
    background: #f5f5f0;
}

/* Sub-header bar */
.lc-subheader-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba(26, 26, 26, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 24px;
}
.lc-subheader-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* ---------- HERO ---------- */
.lc-hero {
    position: relative;
    min-height: 620px;
    background: linear-gradient(135deg, #2d5016 0%, #4a7c28 30%, #6b9e3a 60%, #8fbc5a 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.lc-hero.has-image {
    background-size: cover;
    background-position: center;
}
.lc-hero.lc-repo-enabled { cursor: grab; }
.lc-hero.lc-repositioning { cursor: grabbing; }
.lc-hero.lc-repo-enabled:hover .lc-repo-hint { opacity: 1; }
.lc-hero-overlay {
    width: 100%;
    padding: 48px 40px 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.lc-hero-title {
    font-size: 72px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.0;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 950px;
}
.lc-hero-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 28px;
    line-height: 1.5;
    max-width: 720px;
}
.lc-hero-cta {
    /* Plein par défaut (demande édito) : rouge de marque, texte blanc ;
       hover = rouge plus foncé. (Avant : contour → plein au survol.) */
    background: #E3000B;
    border: 2px solid #E3000B;
    color: #fff;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .3s;
    text-transform: uppercase;
}
.lc-hero-cta:hover {
    background: #B50009;
    border-color: #B50009;
    color: #fff;
}

/* ---------- COLONNE MONDE DU CHANVRE (dans le sidebar, façon La Presse) ---------- */
.lc-chanvre-col {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.lc-chanvre-col .lc-card {
    height: auto;
    flex: 1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    border-left: none;
    border-right: none;
}
.lc-chanvre-col .lc-card .lc-card-body { flex: 1; }

/* En bref dans la colonne de gauche (desktop) */
.lc-briefs-slot {
    position: relative;
    z-index: 1;
    background: #fff;
    border-top: 2px solid #1a1a1a;
}

/* ---------- BANDEAU BAS DE PAGE : À venir (+ En bref sur mobile) ---------- */
.lc-bottom-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px;
    background: #fff;
    border-top: 2px solid #1a1a1a;
}
.lc-bottom-info .lc-sidebar-section {
    padding: 24px 28px;
}
.lc-bottom-info .lc-sidebar-section + .lc-sidebar-section {
    border-left: 1px solid #e8e8e8;
}

/* Formats colonne (chanvre) */
.lc-card-col-top .lc-card-img-wrap,
.lc-card-col-top .lc-card-img-placeholder,
.lc-card-col-bottom .lc-card-img-wrap,
.lc-card-col-bottom .lc-card-img-placeholder {
    height: auto;
    flex: 1;
    min-height: 220px;
}
.lc-card-body.lc-card-col-bottom { flex-direction: column-reverse; }
.lc-card-col-bottom .lc-card-text { padding-top: 50px; } /* dégage la barre de catégorie */

/* ---------- GRID 2×2 ---------- */
.lc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

/* Culture d'entreprise : pleine largeur en bas de page, un peu plus haute */
.lc-card-full { grid-column: 1 / -1; height: 440px; }

/* Formats bande (culture) */
.lc-card-body.lc-card-band-left,
.lc-card-body.lc-card-band-right { flex-direction: row; }
.lc-card-body.lc-card-band-right { flex-direction: row-reverse; }
.lc-card-band-left .lc-card-img-wrap,
.lc-card-band-right .lc-card-img-wrap,
.lc-card-band-left .lc-card-img-placeholder,
.lc-card-band-right .lc-card-img-placeholder {
    width: 55%;
    height: 100%;
    flex-shrink: 0;
}
.lc-card-band-left .lc-card-text,
.lc-card-band-right .lc-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 40px 32px;
}
.lc-card-band-left .lc-card-title,
.lc-card-band-right .lc-card-title { font-size: 26px; }

/* En mode « image pleine » sans image : le placeholder remplit toute la carte */
.lc-card-overlay .lc-card-img-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

/* Position du texte en mode « image pleine » (overlay) */
.lc-card-overlay .lc-card-text.lc-tpos-center {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}
.lc-card-overlay .lc-card-text.lc-tpos-top {
    top: 0;
    bottom: auto;
    padding-top: 54px; /* sous la barre de catégorie */
    background: linear-gradient(rgba(0,0,0,0.7), transparent);
}
.lc-card-overlay .lc-card-text.lc-tpos-center.lc-text-black {
    background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.75));
}
.lc-card-overlay .lc-card-text.lc-tpos-top.lc-text-black {
    background: linear-gradient(rgba(255,255,255,0.85), transparent);
}

/* Paysage / tablette : colonne plus étroite, logo qui ne déborde plus */
@media (max-width: 1200px) {
    .lc-logo-text { font-size: 42px; -webkit-text-stroke: 2px #fff; }
    .lc-chanvre-col .lc-card { min-height: 340px; }
    .lc-hero-title { font-size: 52px; }
    .lc-card-full { height: 380px; }
}
@media (max-width: 768px) {
    .lc-card-full { height: auto; min-height: 300px; }
    .lc-card-body.lc-card-band-left,
    .lc-card-body.lc-card-band-right { flex-direction: column; }
    .lc-card-band-left .lc-card-img-wrap,
    .lc-card-band-right .lc-card-img-wrap,
    .lc-card-band-left .lc-card-img-placeholder,
    .lc-card-band-right .lc-card-img-placeholder { width: 100%; height: 160px; flex: none; }
    .lc-card-band-left .lc-card-text,
    .lc-card-band-right .lc-card-text { padding: 16px 20px; }
    /* Mobile : le format bande (Culture) s'empile comme les autres cartes —
       son titre reprend la même taille que les leurs (26px → 18px). */
    .lc-card-band-left .lc-card-title,
    .lc-card-band-right .lc-card-title { font-size: 18px; }
    .lc-bottom-info { grid-template-columns: 1fr; border-top-width: 1px; }
    .lc-bottom-info .lc-sidebar-section { padding: 16px; }
    .lc-bottom-info .lc-sidebar-section + .lc-sidebar-section { border-left: none; border-top: 1px solid #e8e8e8; }
}

/* ---------- CARD ---------- */
.lc-card {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid #e8e8e8;
    background: #fff;
    overflow: hidden;
    height: 320px;
}
.lc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 2;
}

/* Card category header — glassmorphism */
.lc-card-category {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    background: rgba(26, 26, 26, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Card body — fills the card */
.lc-card-body {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.lc-card-img-wrap {
    width: 100%;
    height: 200px;
    /* Hauteur d'image UNIFORME : sans flex-shrink:0, un résumé plus long
       comprimait l'image de SA carte — deux cartes côte à côte n'avaient
       pas la même zone d'image. */
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.lc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform .4s;
    user-select: none;
}
.lc-card:hover .lc-card-img { transform: scale(1.05); }
.lc-card-img-wrap.lc-repositioning .lc-card-img { cursor: grabbing; transform: none; }
.lc-card-img-wrap.lc-repo-enabled { cursor: grab; }
.lc-card-img-wrap.lc-repo-enabled .lc-card-img { cursor: grab; }
.lc-card-img-wrap.lc-repositioning { cursor: grabbing; }
.lc-repo-hint {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 3px 10px;
    border-radius: 10px; pointer-events: none; z-index: 5; white-space: nowrap;
    opacity: 0; transition: opacity .2s;
}
.lc-card-img-wrap.lc-repo-enabled:hover .lc-repo-hint { opacity: 1; }

.lc-card-img-placeholder {
    width: 100%;
    height: 200px;
    flex-shrink: 0; /* même règle que lc-card-img-wrap : zone d'image uniforme */
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
}

/* Card text */
.lc-card-text {
    padding: 20px;
}
.lc-card-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}
.lc-card-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.5;
    /* Résumé borné à 2 lignes : la zone texte a une hauteur fixe (carte 320px
       − image 200px) — un résumé long poussait le « Lire la suite » hors carte. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lc-card-cta {
    font-size: 12px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Card layout: side-by-side ── */
.lc-card-body.lc-card-side {
    flex-direction: row;
}
.lc-card-side .lc-card-img-wrap {
    width: 45%;
    height: 100%;
    flex-shrink: 0;
}
.lc-card-side .lc-card-text {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lc-card-side .lc-card-category {
    left: auto;
    right: 0;
    border-radius: 0;
}

/* ── Card layout: overlay ── */
.lc-card-body.lc-card-overlay {
    position: relative;
}
.lc-card-overlay .lc-card-img-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%;
}
.lc-card-overlay .lc-card-text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
}
.lc-card-overlay .lc-card-title { color: inherit; }
.lc-card-overlay .lc-card-subtitle { color: inherit; opacity: 0.85; }
.lc-card-overlay .lc-card-cta { color: inherit; opacity: 0.9; }

/* Overlay with black text */
.lc-card-overlay .lc-card-text.lc-text-black {
    background: linear-gradient(transparent, rgba(255,255,255,0.85));
    color: #1a1a1a;
}
.lc-card-overlay .lc-card-text.lc-text-black .lc-card-cta { color: #E3000B; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODÈLE DE MISE EN PAGE ORTHOGONAL
   Placement image (media) découplé de la largeur et du slot. Voir
   public/js/leclaude-layout.js (logique pure testée) + spec
   docs/superpowers/specs/2026-07-15-leclaude-mise-en-page-design.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* Image en bas (texte au-dessus) */
.lc-card-body.lc-media-bottom { flex-direction: column-reverse; }
.lc-media-bottom .lc-card-text { padding-top: 46px; } /* dégage la barre de catégorie */

/* Image à gauche / à droite */
.lc-card-body.lc-media-left { flex-direction: row; }
.lc-card-body.lc-media-right { flex-direction: row-reverse; }
.lc-media-left .lc-card-img-wrap, .lc-media-right .lc-card-img-wrap,
.lc-media-left .lc-card-img-placeholder, .lc-media-right .lc-card-img-placeholder {
    width: 45%;
    height: 100%;
    flex-shrink: 0;
}
.lc-media-left .lc-card-text, .lc-media-right .lc-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Pleine largeur en image latérale = bande éditoriale (image plus généreuse) */
.lc-card-full .lc-media-left .lc-card-img-wrap, .lc-card-full .lc-media-right .lc-card-img-wrap,
.lc-card-full .lc-media-left .lc-card-img-placeholder, .lc-card-full .lc-media-right .lc-card-img-placeholder {
    width: 55%;
}
.lc-card-full .lc-media-left .lc-card-text, .lc-card-full .lc-media-right .lc-card-text {
    padding: 56px 40px 32px;
}
.lc-card-full .lc-media-left .lc-card-title, .lc-card-full .lc-media-right .lc-card-title { font-size: 26px; }

/* Habillage magazine (wrap) : image INCRUSTÉE dans le texte, qui coule autour
   puis revient dessous — demandé par l'éditrice (left/right restent les
   colonnes historiques pour ne pas changer les éditions publiées). */
.lc-card-body.lc-media-wrap-left, .lc-card-body.lc-media-wrap-right {
    display: block;
    padding-top: 46px; /* dégage la barre de catégorie (absolute) */
}
.lc-card-body.lc-media-wrap-left::after, .lc-card-body.lc-media-wrap-right::after {
    content: ''; display: block; clear: both;
}
.lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-wrap,
.lc-media-wrap-left .lc-card-img-placeholder, .lc-media-wrap-right .lc-card-img-placeholder {
    width: 45%;
    max-height: 360px;
    overflow: hidden;
    border-radius: 6px;
}
.lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-left .lc-card-img-placeholder { float: left; margin: 4px 18px 10px 20px; }
.lc-media-wrap-right .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-placeholder { float: right; margin: 4px 20px 10px 18px; }
.lc-media-wrap-left .lc-card-img, .lc-media-wrap-right .lc-card-img {
    width: 100%; height: auto; display: block; /* hauteur naturelle (pas 100% colonne) */
}
.lc-media-wrap-left .lc-card-text, .lc-media-wrap-right .lc-card-text {
    display: block; /* le flex column empêchait les lignes de contourner le float */
}

/* Carte pleine largeur, image en haut/bas : l'image occupe l'espace disponible
   (sinon une image de 200px flotte dans une carte de 440px) */
.lc-card-full > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-wrap,
.lc-card-full > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-placeholder {
    height: auto;
    flex: 1 1 auto;
    min-height: 240px;
}

/* Colonne « à la une » : l'image remplit la hauteur de la colonne */
.lc-chanvre-col .lc-card-body:not(.lc-card-overlay) .lc-card-img-wrap,
.lc-chanvre-col .lc-card-body:not(.lc-card-overlay) .lc-card-img-placeholder {
    height: auto;
    flex: 1 1 auto;
    min-height: 220px;
}

/* ── Contrôles d'édition sur carte : réordonnancement + accès popover ── */
.lc-card-controls {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 11;
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 4px;
}
.lc-card-ctl {
    width: 30px; height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.75);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.lc-card-ctl:hover { background: rgba(255,255,255,0.14); color: #fff; }
.lc-drag-handle { cursor: grab; }
.lc-drag-handle:active { cursor: grabbing; }
.lc-card.lc-dragging { opacity: 0.45; }
.lc-card.lc-drag-over { outline: 3px solid #E3000B; outline-offset: -3px; }

/* ── Popover « Mise en page » (axes orthogonaux, lisible clair/sombre) ── */
.lc-layout-popover {
    position: fixed; /* ancré à la fenêtre : robuste quel que soit le conteneur de défilement */
    z-index: 3000;
    min-width: 210px;
    max-width: min(320px, 92vw);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lc-lp-seg { display: flex; flex-direction: column; gap: 6px; }
.lc-lp-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: #999;
}
.lc-lp-row { display: flex; flex-wrap: wrap; gap: 5px; }
.lc-lp-btn {
    width: 36px; height: 32px;
    border: 1px solid #d8d8d8;
    background: #f6f6f6;
    color: #444;
    border-radius: 7px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.lc-lp-btn:hover { background: #ececec; border-color: #bbb; }
.lc-lp-btn.active { background: #E3000B; border-color: #E3000B; color: #fff; }
.lc-lp-pin {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d8d8d8;
    background: #f6f6f6;
    color: #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px; font-weight: 700;
    transition: all 0.15s;
}
.lc-lp-pin:hover { background: #ececec; }
.lc-lp-pin.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

body[data-gtheme="dark"] .lc-layout-popover {
    background: #1f1f1f; color: #f0f0f0; border-color: rgba(255,255,255,0.14);
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
body[data-gtheme="dark"] .lc-lp-label { color: rgba(255,255,255,0.5); }
body[data-gtheme="dark"] .lc-lp-btn {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8);
}
body[data-gtheme="dark"] .lc-lp-btn:hover { background: #363636; border-color: rgba(255,255,255,0.28); }
body[data-gtheme="dark"] .lc-lp-btn.active { background: #E3000B; border-color: #E3000B; color: #fff; }
body[data-gtheme="dark"] .lc-lp-pin {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: #f0f0f0;
}
body[data-gtheme="dark"] .lc-lp-pin:hover { background: #363636; }
body[data-gtheme="dark"] .lc-lp-pin.active { background: #f0f0f0; border-color: #f0f0f0; color: #1a1a1a; }

/* Dégradation mobile de la mise en page orthogonale. IMPORTANT : placée APRÈS
   les règles de base .lc-media-* ci-dessus — à spécificité égale, l'ordre source
   décide, donc ces surcharges mobiles DOIVENT venir après pour l'emporter. */
@media (max-width: 768px) {
    /* Images latérales (media left/right) → empilées en une colonne */
    .lc-card-body.lc-media-left, .lc-card-body.lc-media-right { flex-direction: column; }
    .lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-wrap,
    .lc-media-wrap-left .lc-card-img-placeholder, .lc-media-wrap-right .lc-card-img-placeholder {
        float: none; width: 100%; margin: 0 0 10px 0; max-height: none;
    }
    .lc-media-left .lc-card-img-wrap, .lc-media-right .lc-card-img-wrap,
    .lc-media-left .lc-card-img-placeholder, .lc-media-right .lc-card-img-placeholder {
        width: 100%; height: 160px; flex: none;
    }
    .lc-card-full .lc-media-left .lc-card-img-wrap, .lc-card-full .lc-media-right .lc-card-img-wrap,
    .lc-card-full .lc-media-left .lc-card-img-placeholder, .lc-card-full .lc-media-right .lc-card-img-placeholder {
        width: 100%;
    }
    .lc-media-left .lc-card-text, .lc-media-right .lc-card-text { padding: 16px 20px; }
    /* Carré orphelin promu pleine largeur : même hauteur d'image que les autres
       cartes sur mobile. On ne vise QUE les cartes promues (.lc-card-promoted),
       PAS les vrais « large » (à la une, culture media-top) qui gardent leur
       proéminence — sinon on rabote une carte qui s'affichait bien. */
    .lc-card-promoted > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-wrap,
    .lc-card-promoted > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-placeholder {
        height: 160px; flex: none; min-height: 0;
    }
}

/* ── Alignement du résumé de carte (text_align) ── */
.lc-card-text.lc-talign-left { text-align: left; align-items: flex-start; }
.lc-card-text.lc-talign-center { text-align: center; align-items: center; }
.lc-card-text.lc-talign-right { text-align: right; align-items: flex-end; }
/* Prime sur le text-align imposé en dur par .lc-tpos-center (image pleine, texte
   centré) : même spécificité (0,3,0) mais déclaré APRÈS → l'alignement explicite
   choisi par l'éditrice l'emporte, y compris le retour à gauche. */
.lc-card-overlay .lc-card-text.lc-talign-left { text-align: left; }
.lc-card-overlay .lc-card-text.lc-talign-center { text-align: center; }
.lc-card-overlay .lc-card-text.lc-talign-right { text-align: right; }
/* left = défaut (aucune classe) */

/* ── Article masqué (réversible) : grisé + badge — mode édition seulement ── */
.lc-card.lc-card-hidden { opacity: 0.5; filter: grayscale(0.6); transition: opacity .2s; }
.lc-card.lc-card-hidden:hover { opacity: 0.8; }
.lc-hidden-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 12;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 5px 8px 5px 10px;
}
.lc-hidden-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    color: #fff; text-transform: uppercase;
}
.lc-hidden-show-btn {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.lc-hidden-show-btn:hover { background: #E3000B; border-color: #E3000B; }

/* ── Éditeur « En bref » (inline sidebar, mode édition) ── */
.lc-brief-edit-row {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.lc-brief-select { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }
.lc-brief-mv, .lc-brief-del {
    width: 26px; height: 28px; flex: none;
    border: 1px solid #ddd; background: #f6f6f6; color: #555;
    border-radius: 5px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.lc-brief-mv:hover { background: #ececec; }
.lc-brief-del:hover { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
.lc-brief-add-btn {
    width: 100%; margin-top: 8px;
    border: 1px dashed #ccc; background: transparent; color: #666;
    border-radius: 6px; padding: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.lc-brief-add-btn:hover { border-color: #E3000B; color: #E3000B; background: rgba(227,0,11,0.04); }

/* ── Menu déroulant de la barre d'outils de rédaction (taille / police) ── */
.lc-tb-select {
    height: 30px;
    border: 1px solid #ddd;
    background: #f6f6f6;
    color: #333;
    border-radius: 5px;
    font-size: 12px;
    padding: 0 6px;
    cursor: pointer;
    max-width: 130px;
}
.lc-tb-select:hover { background: #eee; border-color: #ccc; }

/* Dark mode */
body[data-gtheme="dark"] .lc-brief-edit-row { border-color: rgba(255,255,255,0.08); }
body[data-gtheme="dark"] .lc-brief-mv,
body[data-gtheme="dark"] .lc-brief-del,
body[data-gtheme="dark"] .lc-tb-select {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.82);
}
body[data-gtheme="dark"] .lc-brief-mv:hover,
body[data-gtheme="dark"] .lc-tb-select:hover { background: #363636; }
body[data-gtheme="dark"] .lc-brief-add-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }

/* ── Card layout editor controls ── */
.lc-layout-picker {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 4px;
}
.lc-layout-btn {
    width: 32px; height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.lc-layout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lc-layout-btn.active {
    background: #E3000B;
    border-color: #E3000B;
    color: #fff;
}
.lc-color-toggle {
    width: 24px; height: 24px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
}
.lc-color-toggle:hover { border-color: #fff; }
.lc-color-toggle.lc-ct-white { background: #fff; }
.lc-color-toggle.lc-ct-black { background: #1a1a1a; }

/* ── Brief CTA ── */
.lc-brief-cta {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}
.lc-brief-cta:hover { opacity: 0.7; }

/* ---------- ARCHIVES LINK ---------- */
.lc-archives-link {
    padding: 40px;
    text-align: center;
}
.lc-archives-btn {
    background: none;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s;
}
.lc-archives-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

/* ---------- ARTICLE VIEW ---------- */
.lc-article-view {
    background: #fff;
    min-height: calc(100vh - 52px);
}
.lc-article-topbar {
    display: none; /* Replaced by inline hero navigation */
}

/* ── Article Hero (magazine style) ── */
.lc-art-hero {
    position: relative;
    min-height: 380px;
    background: #1a1a1a;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.lc-art-hero.has-bg {
    min-height: 420px;
}
.lc-art-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 48px 40px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}
.lc-art-hero.has-bg .lc-art-hero-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}
.lc-art-category-tag {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}
.lc-art-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    max-width: 700px;
}
.lc-art-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 16px;
    line-height: 1.5;
    max-width: 600px;
}
.lc-art-date {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.5px;
}

/* ── Article Body ── */
.lc-art-body-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}
.lc-art-body {
    font-size: 17px;
    line-height: 1.85;
    color: #333;
}
.lc-art-body p {
    margin-bottom: 20px;
}
.lc-art-body p:first-child {
    font-size: 19px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.7;
}
.lc-art-body strong {
    font-weight: 700;
    color: #1a1a1a;
}
.lc-art-body h1, .lc-art-body h2, .lc-art-body h3 {
    color: #1a1a1a;
    margin-top: 36px;
    margin-bottom: 14px;
}
.lc-art-body h1 { font-size: 28px; }
.lc-art-body h2 { font-size: 22px; }
.lc-art-body h3 { font-size: 18px; }
.lc-art-body img {
    max-width: 100%;
    border-radius: 4px;
    margin: 24px 0;
}

/* ── Back link ── */
.lc-art-back-link {
    display: inline-block;
    margin-top: 48px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #E3000B;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.lc-art-back-link:hover {
    color: #a00008;
}

/* ---------- EDITOR BANNER ---------- */
.lc-editor-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: #fef3cd;
    border-top: 3px solid #ffc107;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lc-editor-badge {
    background: #ffc107;
    color: #1a1a1a;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}
.lc-editor-info {
    font-size: 13px;
    color: #555;
    flex: 1;
}
.lc-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Editor buttons */
.lc-editor-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.lc-btn-submissions { background: #e3f2fd; color: #1565c0; }
.lc-btn-submissions:hover { background: #bbdefb; }
.lc-btn-generate { background: #f3e5f5; color: #7b1fa2; }
.lc-btn-generate:hover { background: #e1bee7; }
.lc-btn-publish { background: #2e7d32; color: #fff; }
.lc-btn-publish:hover { background: #1b5e20; }
.lc-btn-add { background: #e3f2fd; color: #1565c0; }
.lc-btn-add:hover { background: #bbdefb; }
.lc-btn-dismiss { background: #ffebee; color: #c62828; }
.lc-btn-dismiss:hover { background: #ffcdd2; }
.lc-btn-upload { background: #fff3e0; color: #e65100; }
.lc-btn-upload:hover { background: #ffe0b2; }
.lc-btn-import { background: #f5f5f5; color: #666; }
.lc-btn-import:hover { background: #eee; }
.lc-btn-save { background: #2e7d32; color: #fff; width: 100%; margin-top: 16px; padding: 12px; font-size: 15px; }
.lc-btn-save:hover { background: #1b5e20; }
/* Bouton désactivé (traitement en cours) : grisé + curseur bloqué, pour signaler
   clairement à l'utilisateur qu'une action est en cours et qu'il n'a rien à
   re-cliquer. Placé APRÈS les variantes/hover pour l'emporter à spécificité
   égale ; le :hover désactivé est neutralisé aussi. */
.lc-editor-btn:disabled,
.lc-editor-btn:disabled:hover {
    background: #cfcfcf;
    color: #7a7a7a;
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
    transform: none;
}
body[data-gtheme="dark"] .lc-editor-btn:disabled,
body[data-gtheme="dark"] .lc-editor-btn:disabled:hover {
    background: #3a352d;
    color: rgba(255,255,255,0.38);
}

.lc-badge {
    background: #1565c0;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* ---------- EDITOR FORM ---------- */
.lc-editor-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin: 20px 0 6px;
}
.lc-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
}
.lc-input:focus { border-color: #E3000B; outline: none; }
.lc-input-full { width: 100%; }
/* ── Rich Editor (WYSIWYG) ── */
.lc-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
.lc-tb-btn {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: all .15s;
    line-height: 1;
    min-width: 30px;
    text-align: center;
}
.lc-tb-btn:hover { background: #eee; border-color: #ccc; }
.lc-tb-btn.active { background: #E3000B; color: #fff; border-color: #E3000B; }
.lc-tb-sep { width: 1px; background: #ddd; margin: 2px 4px; align-self: stretch; }
.lc-editor-content {
    width: 100%;
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
    box-sizing: border-box;
    outline: none;
    color: #1a1a1a;
    background: #fff;
}
/* Color picker in toolbar */
.lc-tb-color-input {
    width: 28px; height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0; cursor: pointer;
    background: transparent;
}
/* Font-size select in toolbar */
.lc-tb-size-select {
    height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    padding: 0 4px;
}

/* ---------- TÂCHES v2 : projets, listes, regroupements ---------- */
.tasks-projects-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 24px;align-items:center;
    background:rgba(40,34,24,.03);border-bottom:1px solid rgba(40,34,24,.1)}
body[data-gtheme="dark"] .tasks-projects-row{background:rgba(221,203,164,.04)}
.tasks-projects-row:empty{display:none}
.tasks-proj-chip{border:1px solid rgba(40,34,24,.15);background:none;border-radius:99px;
    padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;color:inherit;
    font-family:inherit;transition:all .15s}
.tasks-proj-chip:hover{background:rgba(168,134,63,.1)}
.tasks-proj-chip.on{background:var(--chanv-terre,#282828);color:#fff;border-color:var(--chanv-terre,#282828)}
.tasks-proj-chip.tasks-proj-chanvre.on{background:rgba(45,106,36,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-operations.on{background:rgba(21,87,153,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-innovation.on{background:rgba(94,53,177,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-culture.on{background:rgba(198,93,7,.9);border-color:transparent}
.tasks-proj-chip{box-sizing:border-box;white-space:nowrap;line-height:1.2;height:36px;
    display:inline-flex;align-items:center;gap:6px}
.tasks-proj-spacer{flex:1}
/* Les deux boutons d'action : même taille, même forme, mêmes espacements */
.tasks-row-btn{height:36px;padding:0 16px;font-size:13px;white-space:nowrap;border-radius:99px;
    display:inline-flex;align-items:center;gap:6px;box-sizing:border-box}
.tasks-projects-row .tasks-proj-new{height:36px;padding:0 16px;font-size:13px}
/* Lisibilité des chips inactifs (le texte se perdait dans le fond sombre) */
.tasks-proj-chip{color:#4d463b}
body[data-gtheme="dark"] .tasks-projects-row .tasks-proj-chip{color:rgba(255,255,255,.78)}
/* Compteur détaché du libellé : « Projets (36) » se lit comme une seule
   étiquette et le nombre s'y noie. En pastille, il se repère du coin de l'œil. */
.tasks-chip-count{display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:99px;
    font-size:11.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
    background:rgba(40,34,24,.09);color:inherit}
.tasks-proj-chip.on .tasks-chip-count{background:rgba(255,255,255,.22)}
body[data-gtheme="dark"] .tasks-chip-count{background:rgba(255,255,255,.14)}

/* « Nouveau projet » est l'action principale de l'écran : elle se distingue des
   bascules de vue, qui ne sont pas des actions.
   L'or de marque (#A8863F) ne donne que 3,42:1 avec du texte blanc — sous le
   seuil AA de 4,5. On le fonce pour CE bouton (4,88:1) : le blanc sur or est ce
   que demande la maquette, et l'assombrir est la seule façon de le tenir. */
.tasks-projects-row .tasks-proj-new{background:#8A6D2A;border-color:transparent;
    color:#fff;font-weight:650}
.tasks-projects-row .tasks-proj-new:hover{background:#725A22}
/* Actions secondaires (Duplications, Créer un groupe) : même gabarit que les
   bascules, sans le remplissage — elles agissent, elles ne sélectionnent pas. */
.tasks-projects-row .tasks-row-group,
.tasks-projects-row .tasks-row-dup{height:36px;padding:0 14px;font-size:13px}
/* Ce bouton a été dessiné pour un bandeau SOMBRE (blanc sur blanc translucide).
   Déplacé dans la barre d'actions CLAIRE, ses couleurs ne l'ont pas suivi :
   contraste mesuré 1,00 — le libellé était invisible. On le raccorde au gabarit
   des autres actions secondaires. */
.tasks-projects-row .tasks-row-dup{background:none;border:1px solid rgba(40,34,24,.15);
    color:#4d463b;border-radius:99px;font-weight:600;
    /* inline-flex + gap : le gabarit d'origine collait l'icône au libellé. */
    display:inline-flex;align-items:center;gap:6px}
.tasks-projects-row .tasks-row-dup:hover{background:rgba(168,134,63,.1)}
body[data-gtheme="dark"] .tasks-projects-row .tasks-row-dup{color:rgba(255,255,255,.78);
    border-color:rgba(221,203,164,.25)}
/* Sélecteur d'icône (dropdown du picker global) — width:auto : la classe
   globale .emoji-picker-btn force 36px et éjectait le caret hors du bouton */
.tasks-emoji-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:auto;min-width:74px;height:42px;padding:0 12px 0 14px;
    border:1px solid rgba(40,34,24,.2);border-radius:10px;background:none;cursor:pointer;
    font-size:19px;font-family:inherit;line-height:1;box-sizing:border-box}
.tasks-emoji-btn:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
.tasks-emoji-caret{font-size:10px;opacity:.6;transform:translateY(1px)}
body[data-gtheme="dark"] .tasks-emoji-btn{border-color:rgba(221,203,164,.25);color:rgba(255,255,255,.88);background:none}
/* La modale projet respire : champs pleine largeur */
#projectFormModal input[type="text"],
#projectFormModal textarea{width:100%;box-sizing:border-box}
#projectFormModal textarea{min-height:64px;resize:vertical}
/* Grille de cartes projets (façon Basecamp) */
.tasks-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:10px 2px 22px}
.tasks-proj-grid>*{min-width:0} /* mobile : une carte ne déborde jamais de la grille */
.tasks-proj-card{max-width:100%;overflow:hidden}
.tpc-name{overflow-wrap:break-word}
/* Hauteur régulière des cartes : nom plafonné à 2 lignes (jamais de débordement) */
.tpc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpc-meta{flex-wrap:wrap}
.tasks-proj-grid-sub{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tasks-proj-card{position:relative;color:#2b2620;background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.13);
    border-radius:14px;padding:14px 16px 12px;cursor:pointer;height:150px;
    border-top:4px solid rgba(21,87,153,.7);box-shadow:0 3px 12px rgba(40,34,24,.06);
    transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;gap:6px}
.tasks-proj-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(40,34,24,.13)}
.tasks-proj-card.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.75)}
.tasks-proj-card.tasks-proj-operations{border-top-color:rgba(21,87,153,.75)}
.tasks-proj-card.tasks-proj-innovation{border-top-color:rgba(94,53,177,.75)}
.tasks-proj-card.tasks-proj-culture{border-top-color:rgba(198,93,7,.75)}
.tasks-proj-card-sub{height:120px;padding:11px 13px 9px}
.tpc-head{display:flex;align-items:center;gap:8px;padding-right:22px}
.tasks-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;
    margin-right:2px;vertical-align:baseline;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.tasks-crumb .tasks-color-dot{margin-right:6px}
.tpc-icon{font-size:17px}
.tpc-name{font-weight:750;font-size:14px;line-height:1.25;color:inherit;text-decoration:none}
.tpc-desc{font-size:12px;opacity:.6;line-height:1.4;overflow:hidden;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpc-meta{margin-top:auto;display:flex;gap:12px;font-size:11px;opacity:.55;
    font-family:ui-monospace,'SF Mono',monospace}
.tpc-fav{position:absolute;top:8px;right:10px;border:none;background:none;cursor:pointer;
    font-size:16px;color:#b9a56f;opacity:.5;padding:2px}
.tpc-fav:hover{opacity:1}
.tpc-fav.on{opacity:1;color:#D9A521}
/* #1 Groupes de projets privés (dossiers) */
.tpc-group{position:absolute;top:8px;right:32px;border:none;background:none;cursor:pointer;font-size:14px;opacity:.4;padding:2px}
.tpc-group:hover{opacity:1}
.tasks-proj-card .tpc-head{padding-right:46px}
/* Dossiers : un vrai « dossier » qui CONTIENT des projets (onglet + corps rempli).
   Couleur pilotée par --fc (r g b) → teintes dérivées, lisibles clair ET sombre. */
.tasks-folder{position:relative;margin:26px 0 18px;--fc:168 134 63}
/* Dossiers repliés : grille (plusieurs par ligne) au lieu d'un empilement */
.tasks-folders-grid{display:flex;flex-wrap:wrap;gap:30px 22px;align-items:flex-start;margin:8px 0 12px}
.tasks-folders-grid .tasks-folder{margin:14px 0 0}
.tasks-folders-grid .tasks-folder-closed{width:300px;max-width:44vw}
.tasks-folder.tasks-proj-chanvre{--fc:45 106 36}
.tasks-folder.tasks-proj-operations{--fc:21 87 153}
.tasks-folder.tasks-proj-innovation{--fc:94 53 177}
.tasks-folder.tasks-proj-culture{--fc:198 93 7}
/* Onglet du dossier (haut-gauche) avec pente droite façon languette */
.tasks-folder-tab{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:2;
    margin-left:8px;padding:9px 22px 12px 15px;min-width:132px;cursor:pointer;
    font-weight:750;font-size:15px;color:inherit;
    background:rgb(var(--fc) / 0.20);border:1px solid rgb(var(--fc) / 0.42);border-bottom:none;
    border-radius:13px 5px 0 0;box-shadow:inset 0 3px 0 rgb(var(--fc) / 0.9)}
.tasks-folder-tab::after{content:"";position:absolute;right:-13px;top:-1px;bottom:0;width:26px;z-index:-1;
    background:rgb(var(--fc) / 0.20);border-top:1px solid rgb(var(--fc) / 0.42);border-right:1px solid rgb(var(--fc) / 0.42);
    border-radius:0 10px 0 0;transform:skewX(24deg);transform-origin:bottom left}
.tasks-folder-tab:hover,.tasks-folder-tab:hover::after{background:rgb(var(--fc) / 0.28)}
/* Corps du dossier : rempli, contient les cartes de projets */
.tasks-folder-body{position:relative;z-index:1;margin-top:-1px;padding:16px;min-height:64px;
    background:rgb(var(--fc) / 0.07);border:1px solid rgb(var(--fc) / 0.32);border-radius:3px 16px 16px 16px;
    box-shadow:0 8px 22px rgba(40,34,24,.08),inset 0 1px 0 rgb(var(--fc) / 0.12)}
/* Dossier FERMÉ : grande carte (≈ double largeur, triple hauteur du repli d'avant),
   image bien visible si présente + effet « pile de projets rangés dedans ». */
.tasks-folder-closed{position:relative;width:300px;max-width:100%;height:158px;margin-top:-1px;cursor:pointer;overflow:hidden;
    border:1px solid rgb(var(--fc) / 0.34);border-radius:3px 16px 16px 16px;background:rgb(var(--fc) / 0.1);
    box-shadow:0 8px 20px rgba(40,34,24,.14),6px 7px 0 -2px rgb(var(--fc) / 0.18),12px 14px 0 -4px rgb(var(--fc) / 0.1)}
.tasks-folder-closed:hover{filter:brightness(1.04)}
.tfc-cover{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;padding:6px;box-sizing:border-box}
/* Refonte 21/07 : carte repliée SANS languette — coins réguliers, infos par-dessus */
.tfc-flat{margin-top:0 !important;border-radius:14px !important}
.tfc-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
    padding:8px 9px 14px 12px;border-radius:14px 14px 0 0;
    background:linear-gradient(rgba(10,8,5,.52),rgba(10,8,5,0))}
.tfc-title{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.tfc-name{font-size:13.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfc-n{flex-shrink:0;background:rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:800}
.tfc-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.tfc-gear,.tfc-chev{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:999px;background:rgba(10,8,5,.32);color:#fff;font-size:12.5px;cursor:pointer}
.tfc-gear:hover{background:rgba(10,8,5,.55)}
.tfc-count{display:none}
body[data-gtheme="dark"] .tasks-folder-closed{background:rgb(var(--fc) / 0.16);
    box-shadow:0 8px 20px rgba(0,0,0,.4),6px 7px 0 -2px rgb(var(--fc) / 0.2),12px 14px 0 -4px rgb(var(--fc) / 0.12)}
.tgh-icon{font-size:19px}
.tgh-img{display:inline-block;width:28px;height:28px;border-radius:7px;background-size:cover;background-position:center;background-color:rgb(var(--fc) / 0.25);flex-shrink:0}
.tgh-name{font-weight:750;font-size:15px}
.tgh-count{font-size:11px;opacity:.75;font-family:ui-monospace,monospace;background:rgb(var(--fc) / 0.22);border-radius:999px;padding:2px 9px;font-weight:700}
.tgh-manage{margin-left:auto;border:none;background:none;cursor:pointer;font-size:14px;opacity:.55;padding:2px}
.tgh-manage:hover{opacity:1}
.tgh-chev{opacity:.6;font-size:13px}
.tasks-group-empty{grid-column:1/-1;font-size:12.5px;opacity:.6;padding:10px 4px}
/* Dark mode : teintes du dossier renforcées (le corps doit rester visible) */
body[data-gtheme="dark"] .tasks-folder-tab,body[data-gtheme="dark"] .tasks-folder-tab::after{background:rgb(var(--fc) / 0.34)}
body[data-gtheme="dark"] .tasks-folder-tab:hover,body[data-gtheme="dark"] .tasks-folder-tab:hover::after{background:rgb(var(--fc) / 0.44)}
body[data-gtheme="dark"] .tasks-folder-body{background:rgb(var(--fc) / 0.13);box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 1px 0 rgb(var(--fc) / 0.16)}
/* Mobile : dossiers de projet en grille 2 par ligne + pile allégée (sinon le
   décalage 3D déborde et rend « cassé » sur les petites cartes). */
@media (max-width:640px){
    .tasks-folders-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;align-items:start}
    .tasks-folders-grid .tasks-folder{margin:10px 0 0;min-width:0}
    .tasks-folders-grid .tasks-folder-closed{width:100%;max-width:100%}
    .tasks-folder-closed{height:120px;border-radius:3px 14px 14px 14px;
        box-shadow:0 5px 14px rgba(40,34,24,.14),4px 5px 0 -2px rgb(var(--fc) / 0.16)}
    body[data-gtheme="dark"] .tasks-folder-closed{box-shadow:0 5px 14px rgba(0,0,0,.4),4px 5px 0 -2px rgb(var(--fc) / 0.2)}
    .tasks-folder-tab{min-width:0;max-width:100%;margin-left:3px;padding:7px 15px 10px 11px;font-size:13px;gap:6px;overflow:hidden}
    .tasks-folder-tab .tgh-name{font-size:13px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .tasks-folder-tab .tgh-count{padding:2px 7px}
    .tasks-folder-tab .tgh-manage{margin-left:auto}

    .tfc-bigicon{font-size:40px}
    .tasks-folder-body{padding:12px}
}
.tasks-groups-actions{margin:12px 2px}
.tasks-gcolors{display:flex;gap:8px;margin-top:4px}
.tasks-gcolor{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.tasks-gcolor.tasks-proj-chanvre{background:rgba(45,106,36,.9)}
.tasks-gcolor.tasks-proj-operations{background:rgba(21,87,153,.9)}
.tasks-gcolor.tasks-proj-innovation{background:rgba(94,53,177,.9)}
.tasks-gcolor.tasks-proj-culture{background:rgba(198,93,7,.9)}
.tasks-gcolor.on{border-color:#33302a;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tasks-form-label{display:block;font-size:12px;font-weight:600;opacity:.7;margin:0 0 3px}
/* Onglet CRM masqué tant que l'accès n'est pas confirmé (Super Admin ou rôle __crm).
   Révélé par l'ajout de la classe body.crm-access dans Shell.init. */
body:not(.crm-access) [data-gs-route="crm"]{display:none !important}
body:not(.plan-access) [data-gs-route="plan"]{display:none !important}
body:not(.agri-access) [data-gs-route="agriculture"]{display:none !important}
/* Ligne « Nouveau groupe de tâches » (formulaire de tâche) */
.tasks-newgroup-row{display:flex;gap:8px;align-items:center}
/* Image de groupe : fichier OU « Depuis Studio » */
.tasks-group-img-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tasks-group-studio-pick{margin-top:6px}
.tasks-group-studio-pick:not(:empty){display:flex;align-items:center;gap:8px;font-size:12px;background:rgb(168 134 63 / .12);border-radius:8px;padding:5px 8px}
.tasks-group-studio-pick img{width:34px;height:34px;object-fit:cover;border-radius:5px}
.tgs-clear{border:none;background:none;cursor:pointer;opacity:.55;font-size:12px;margin-left:auto;color:inherit}
.tgs-clear:hover{opacity:1}
.tasks-newgroup-row input{flex:1;min-width:0}
body[data-gtheme="dark"] .tasks-gcolor.on{border-color:#DDCBA4}
/* #6 Sélecteurs d'emplacement (projet → liste → groupe) au formulaire de tâche */
.tasks-loc-pickers{display:flex;flex-direction:column;gap:7px}
.tasks-loc-pickers select{width:100%}
/* Fil d'Ariane vue projet */
.tasks-crumb{display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 2px 12px;flex-wrap:wrap}
.tasks-crumb{color:#4d463b}
body[data-gtheme="dark"] .tasks-crumb{color:rgba(255,255,255,.82)}
.tasks-crumb button{border:none;background:none;cursor:pointer;color:inherit;opacity:.6;
    font-family:inherit;font-size:13px;font-weight:600;padding:3px 6px;border-radius:6px}
.tasks-crumb button:hover{opacity:1;background:rgba(168,134,63,.12)}
.tasks-crumb span{opacity:.4}
.tasks-crumb strong{font-weight:750}
/* Fil d'Ariane de la vue DÉTAIL d'une tâche : reste collé en haut pendant le
   scroll. #tasksList est le conteneur scrollable (overflow-y:auto, padding-top:16px) ;
   le box-shadow négatif peint ce padding pour qu'aucun contenu ne dépasse au-dessus
   du breadcrumb collé. Fond = celui de .tasks-view (clair #f7f7f5 / sombre #201d19). */
.tasks-crumb-sticky{
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 12px;
    padding: 8px 2px;
    background: #f7f7f5;
    box-shadow: 0 -18px 0 0 #f7f7f5, 0 6px 10px -8px rgba(0,0,0,.14);
}
body[data-gtheme="dark"] .tasks-crumb-sticky{
    background: #201d19;
    box-shadow: 0 -18px 0 0 #201d19, 0 6px 10px -8px rgba(0,0,0,.4);
}
.tasks-newsub-btn{margin:2px 0 10px}
/* Titres de sections de l'espace projet (Tâches / Babillard / …) */
.tasks-section-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:750;
    margin:30px 2px 4px;color:#33302a}
body[data-gtheme="dark"] .tasks-section-title{color:rgba(255,255,255,.9)}
/* Babillard : rangées de fils */
.tasks-board-list{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}
/* Rangées de fils et de documents : ce sont de VRAIS liens depuis le ticket
   Z0vjLu (⌘/Ctrl+clic, clic du milieu, « ouvrir dans un nouvel onglet »). Les
   deux déclarations ci-dessous neutralisent le style d'ancre par défaut — la
   rangée doit rester identique à l'œil, qu'elle soit <a> ou <button>. */
.tasks-board-row{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
    border:1px solid rgba(40,34,24,.1);background:var(--chanv-blanc,#fff);border-radius:12px;
    padding:11px 14px;cursor:pointer;font-family:inherit;color:#2b2620;transition:all .12s;
    text-decoration:none;box-sizing:border-box}
.tasks-board-row:hover{border-color:rgba(168,134,63,.45);box-shadow:0 3px 10px rgba(40,34,24,.08)}
body[data-gtheme="dark"] .tasks-board-row{background:#2b2823;border-color:rgba(221,203,164,.14);color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-board-row:hover{border-color:rgba(221,203,164,.35)}
.tbr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tbr-title{font-weight:700;font-size:14px}
.tbr-meta{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbr-cat{border:1px solid rgba(168,134,63,.4);border-radius:99px;padding:0 7px;font-size:10.5px;
    color:#8a6d1f;text-transform:uppercase;letter-spacing:.04em}
body[data-gtheme="dark"] .tbr-cat{color:#D9BC77;border-color:rgba(221,203,164,.35)}
.tbr-count{background:rgba(21,87,153,.85);color:#fff;border-radius:99px;min-width:22px;height:22px;
    display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.tasks-board-empty{font-size:13px;opacity:.55;font-style:italic;padding:10px 4px 4px}
.tasks-rec-pill{font-family:ui-monospace,'SF Mono',monospace;font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;border:1px solid rgba(168,134,63,.45);color:#8a6d1f;
    border-radius:99px;padding:2px 8px;flex-shrink:0}
body[data-gtheme="dark"] .tasks-rec-pill{color:#D9BC77;border-color:rgba(221,203,164,.35)}
#listFormModal select{width:100%;box-sizing:border-box}
/* Kanban */
.tasks-viewtoggle{display:inline-flex;gap:0;margin-left:14px;border:1px solid rgba(168,134,63,.35);
    border-radius:99px;overflow:hidden;font-size:12px}
.tasks-viewtoggle button{border:none;background:none;cursor:pointer;padding:5px 14px;
    font-family:inherit;font-size:12px;font-weight:600;color:inherit;opacity:.6}
.tasks-viewtoggle button.on{background:rgba(168,134,63,.18);opacity:1}
.tasks-kanban-wrap{overflow-x:auto;padding-bottom:8px;margin:12px 0 20px}
.tasks-kanban{display:flex;gap:14px;align-items:flex-start;min-width:min-content}
.tasks-kcol{width:270px;flex-shrink:0;background:rgba(40,34,24,.04);border:1px solid rgba(40,34,24,.1);
    border-radius:13px;padding:10px}
body[data-gtheme="dark"] .tasks-kcol{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.13)}
.tasks-kcol-over{border-color:#A8863F;background:rgba(168,134,63,.08)}
.tasks-kcol-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.tkh-name{font-weight:750;font-size:13px;flex:1;text-transform:uppercase;letter-spacing:.04em}
.tkh-n{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;opacity:.55}
.tasks-kcol-body{display:flex;flex-direction:column;gap:8px;min-height:60px}
.tasks-kcard{background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.13);border-radius:10px;
    padding:10px 12px;cursor:grab;transition:box-shadow .12s}
body[data-gtheme="dark"] .tasks-kcard{background:#2b2823;border-color:rgba(221,203,164,.15)}
.tasks-kcard:hover{box-shadow:0 4px 12px rgba(40,34,24,.14)}
.tasks-kcard-drag{opacity:.4}
.tasks-kcard-done{opacity:.55}
.tasks-kcard-title{font-size:13px;font-weight:600;line-height:1.35}
.tasks-kcard-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tasks-kcard-who{display:flex}
.tasks-kcard-who .tasks-avatar{width:20px;height:20px;font-size:9px;margin-left:-5px}
.tasks-kcol-new{flex-shrink:0;align-self:flex-start;border:1px dashed rgba(168,134,63,.4);background:none;
    border-radius:13px;padding:12px 18px;font-size:13px;font-weight:600;color:#8a6d1f;
    cursor:pointer;font-family:inherit;margin-top:2px}
.tasks-kcol-new:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-kcol-new{color:#D9BC77;border-color:rgba(221,203,164,.3)}
.tasks-kcol .tasks-addtask-row{margin-top:2px;padding:6px}

/* Docs & fichiers */
.tasks-docs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
/* .tasks-manage-btn porte margin-left:auto (fil d'Ariane) — ici on groupe à gauche */
.tasks-docs-actions .tasks-manage-btn,
.tasks-section-title .tasks-manage-btn{margin-left:0}
.tasks-docs-actions .tasks-manage-btn{background:rgba(168,134,63,.1);border-color:rgba(168,134,63,.35);
    padding:8px 16px;font-size:13px}
.tasks-docs-actions .tasks-manage-btn:hover{background:rgba(168,134,63,.2)}
body[data-gtheme="dark"] .tasks-docs-actions .tasks-manage-btn{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-docs-actions .tasks-manage-btn:hover{background:rgba(221,203,164,.15)}
.tasks-docs-folders{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.tasks-doc-icon{font-size:19px;width:34px;height:34px;display:grid;place-items:center;
    background:rgba(168,134,63,.1);border-radius:9px;flex-shrink:0}
body[data-gtheme="dark"] .tasks-doc-icon{background:rgba(221,203,164,.09)}
/* Fil de post */
.tasks-post-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.tasks-post-title{margin:0 0 2px;font-size:20px}
.tasks-post-body{font-size:14.5px;line-height:1.6;white-space:normal}
/* Toggles d'outils (⚙️ Gérer) */
.tasks-tools-rows{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tasks-tool-row{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.tasks-tool-row input{width:16px;height:16px}
.tasks-tool-row em{font-size:10.5px;font-style:normal;opacity:.55;border:1px solid rgba(128,116,94,.4);
    border-radius:99px;padding:1px 7px;margin-left:4px;text-transform:uppercase;letter-spacing:.05em}
.tasks-tool-off{opacity:.5;cursor:default}
/* Cartes de modérateurs (⚙️ Gérer) */
.tasks-mod-card{border:1px solid rgba(40,34,24,.14);border-radius:12px;padding:12px 14px;margin-top:10px}
body[data-gtheme="dark"] .tasks-mod-card{border-color:rgba(221,203,164,.18)}
.tasks-mod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tasks-mod-rights{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}
.tasks-mod-rights .tasks-tool-row{font-size:13px}
#projModPick{padding:8px 10px;border-radius:8px;border:1px solid rgba(40,34,24,.2);font-size:13px;
    background:none;color:inherit;box-sizing:border-box}
body[data-gtheme="dark"] #projModPick{border-color:rgba(221,203,164,.25);background:#2b2823}
/* Bandeau « activité qui te concerne » (mentions, babillard) en tête du module */
.tasks-activity-banner{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;
    background:rgba(168,134,63,.08);border:1px solid rgba(168,134,63,.3);border-radius:12px;
    padding:10px 14px}
.tasks-activity-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    border:none;background:none;cursor:pointer;font-family:inherit;font-size:13px;
    color:#4d463b;padding:4px 2px;border-radius:8px}
.tasks-activity-row:hover{background:rgba(168,134,63,.1)}
.tasks-activity-row .tar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasks-activity-row .tar-t strong{font-weight:700}
/* Ticket support i2jiQZ (17/08) : bandeau d'activité repliable */
.tasks-activity-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;
    background:none;cursor:pointer;padding:4px 6px;font:inherit;font-size:.82rem;font-weight:700;color:inherit;opacity:.85}
.tasks-activity-toggle:hover{opacity:1}
.tasks-activity-toggle .tat-chev{width:14px;text-align:center}
.tasks-activity-banner.is-collapsed .tasks-activity-line{display:none}
/* Ticket support i2jiQZ (suite) : croix par ligne pour retirer UNE notification,
   cumulable avec le repli du bandeau entier. Discrète, franche au survol. */
.tasks-activity-line{display:flex;align-items:center;gap:4px}
.tasks-activity-line .tasks-activity-row{flex:1;min-width:0}
.tasks-activity-dismiss{flex:0 0 auto;width:auto;border:none;background:none;cursor:pointer;
    font:inherit;font-size:18px;line-height:1;color:inherit;opacity:.4;
    padding:4px 8px;border-radius:6px}
.tasks-activity-dismiss:hover{opacity:1;background:rgba(168,134,63,.18)}
body[data-gtheme="dark"] .tasks-activity-banner{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .tasks-activity-row{color:rgba(255,255,255,.82)}
body[data-gtheme="dark"] .tasks-activity-row:hover{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-activity-dismiss{color:rgba(255,255,255,.82)}
body[data-gtheme="dark"] .tasks-activity-dismiss:hover{background:rgba(221,203,164,.16)}
/* Zone danger des modales projet/liste : de l'air quand les boutons passent
   sur deux lignes (l'Archiver se collait à Annuler/Sauvegarder) */
#projectFormModal .modal-actions,
#listFormModal .modal-actions,
#docFormModal .modal-actions,
#postFormModal .modal-actions,
#linkFormModal .modal-actions,
#folderFormModal .modal-actions,
#columnFormModal .modal-actions{gap:12px;align-items:center;margin-top:20px}
/* Zone danger : structurellement séparée des actions (filet + air garanti),
   fini le pari sur le row-gap d'un flex qui replie */
.tasks-danger-zone{margin-top:26px;padding-top:18px;border-top:1px solid rgba(179,64,47,.25)}
.tasks-danger-zone.hidden{display:none}
body[data-gtheme="dark"] .tasks-danger-zone{border-top-color:rgba(224,131,111,.3)}
/* Espace de travail d'une tâche (vue pleine page, pas une modale) */
.tasks-workspace{width:100%;max-width:none;box-sizing:border-box;background:var(--chanv-blanc,#fff);
    border:1px solid rgba(40,34,24,.12);border-radius:16px;padding:28px 34px;
    box-shadow:0 6px 24px rgba(40,34,24,.07)}
/* Le texte long reste lisible même en pleine largeur */
.tasks-workspace .tasks-detail-desc,
.tasks-workspace .tasks-comment-content,
.tasks-workspace .tasks-post-body{max-width:78ch}
body[data-gtheme="dark"] .tasks-workspace{background:#26221b;border-color:rgba(221,203,164,.14);
    box-shadow:0 6px 24px rgba(0,0,0,.35)}
.tasks-crumb-dim{opacity:.55}
/* Fil de discussion façon Basecamp */
.tasks-comment{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(40,34,24,.09)}
.tasks-comment:last-child{border-bottom:none}
body[data-gtheme="dark"] .tasks-comment{border-bottom-color:rgba(221,203,164,.12)}
.tasks-comment-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;
    display:grid;place-items:center;font-weight:700}
.tasks-comment-main{flex:1;min-width:0}
.tasks-comment-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.tasks-comment-hdr strong{font-size:14px}
.tasks-comment-date{font-size:11.5px;opacity:.5}
.tasks-comment-content{font-size:14px;line-height:1.55}
.tasks-comment-form{display:flex;gap:10px;align-items:flex-end;margin-top:16px}
.tasks-comment-form textarea{width:100%;box-sizing:border-box}
@media (max-width:640px){ .tasks-workspace{padding:18px 16px;border-radius:12px} }
.tasks-manage-btn{margin-left:auto;border:1px solid rgba(168,134,63,.4);background:none;box-sizing:border-box;
    border-radius:99px;padding:5px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
    color:#8a6d1f;font-family:inherit;opacity:1!important}
.tasks-manage-btn:hover{background:rgba(168,134,63,.1)}
body[data-gtheme="dark"] .tasks-manage-btn{color:#D9BC77;border-color:rgba(221,203,164,.35)}
body[data-gtheme="dark"] .tasks-manage-btn:hover{background:rgba(221,203,164,.08)}
/* Chips membres sélectionnés (formulaire projet) */
.tasks-selected-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(168,134,63,.12);
    border:1px solid rgba(168,134,63,.3);border-radius:99px;padding:3px 10px;font-size:12.5px;
    margin:0 6px 6px 0}
.tasks-selected-chip button{border:none;background:none;cursor:pointer;font-size:11px;opacity:.6;padding:0}
.tasks-selected-chip button:hover{opacity:1}
body[data-gtheme="dark"] .tasks-proj-card{background:#2b2823;border-color:rgba(221,203,164,.16);color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-chanvre{border-top-color:rgba(96,180,80,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-operations{border-top-color:rgba(95,160,220,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-innovation{border-top-color:rgba(160,120,230,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-culture{border-top-color:rgba(235,140,60,.95)}
body[data-gtheme="dark"] .tpc-desc{opacity:.65}
body[data-gtheme="dark"] .tpc-meta{opacity:.6}
body[data-gtheme="dark"] .tasks-proj-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
body[data-gtheme="dark"] .tasks-crumb button:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .tasks-selected-chip{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.3)}
.tasks-proj-new{border-style:dashed;color:#8a6d1f;border-color:rgba(168,134,63,.5)}
.tasks-proj-new:hover{color:#A8863F;border-color:#A8863F;background:rgba(168,134,63,.08)}
.tasks-proj-sep{width:1px;height:20px;background:rgba(40,34,24,.18);margin:0 2px;flex-shrink:0}
/* En-tête de section (« PRISES DE COMMANDES… »). Ces titres servent de REPÈRE
   VISUEL pour naviguer dans une longue liste : ils étaient à 10,5 px et surtout
   à opacity .55, ce qui les rendait flous quelle que soit leur taille. On
   agrandit ET on remplace l'opacité par une vraie couleur — un texte délavé
   reste illisible même en plus gros. Casse et interlettrage conservés : c'est
   la signature visuelle de ces titres. */
.tasks-group-label{font-family:ui-monospace,'SF Mono',monospace;font-size:13px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:#6b5a3a;opacity:1;margin:22px 4px 10px;
    display:flex;align-items:center;gap:10px}
.tasks-group-label::after{content:"";flex:1;height:1px;background:rgba(40,34,24,.14)}
/* Le compteur reste secondaire, mais lisible. */
.tasks-group-label .tgl-n{opacity:1;color:#9a8663;font-weight:700}
.tasks-group-overdue{color:#b3402f;opacity:.9}
/* Bloc de liste : l'en-tête et ses tâches dans la MÊME carte */
.tasks-list-block{background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.12);
    border-radius:14px;margin:14px 0;overflow:hidden;box-shadow:0 3px 12px rgba(40,34,24,.05)}
body[data-gtheme="dark"] .tasks-list-block{background:#26221b;border-color:rgba(221,203,164,.15);
    box-shadow:0 3px 12px rgba(0,0,0,.3)}
.tasks-list-body{padding:6px 14px 12px;display:flex;flex-direction:column;gap:8px}
.tasks-list-body .tasks-group-label{margin:12px 2px 2px}
.tasks-list-body .tasks-card{box-shadow:none;border-color:rgba(40,34,24,.1)}
body[data-gtheme="dark"] .tasks-list-body .tasks-card{border-color:rgba(221,203,164,.12);background:#2b2823}
.tasks-list-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
    background:rgba(168,134,63,.09);border-bottom:1px solid rgba(168,134,63,.2)}
.tasks-list-head .tlh-name{font-weight:750;font-size:14.5px;color:#33302a}
body[data-gtheme="dark"] .tasks-list-head .tlh-name{color:rgba(255,255,255,.9)}
.tasks-list-head .tlh-prog{flex:1;max-width:220px;height:5px;border-radius:99px;background:rgba(40,34,24,.12);overflow:hidden;min-width:60px}
.tasks-list-head .tlh-count.tlh-empty{margin-left:auto;font-family:inherit;letter-spacing:0;font-style:italic}
body[data-gtheme="dark"] .tasks-list-head .tlh-count{color:rgba(255,255,255,.55);opacity:1}
body[data-gtheme="dark"] .tasks-group-label{color:rgba(255,255,255,.88);opacity:1}
.tasks-list-head .tlh-prog i{display:block;height:100%;background:#A8863F;border-radius:99px}
.tasks-list-head .tlh-count{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;opacity:.6}
.tasks-list-head .tlh-newtask{margin-left:0;background:rgba(168,134,63,.12);border-color:rgba(168,134,63,.45);
    font-weight:700;padding:6px 14px;white-space:nowrap}
.tasks-list-head .tlh-newtask:hover{background:rgba(168,134,63,.22)}
body[data-gtheme="dark"] .tasks-list-head .tlh-newtask{background:rgba(221,203,164,.1)}
.tasks-addtask-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
    border:1px dashed rgba(168,134,63,.35);background:none;border-radius:9px;padding:9px;
    font-size:12.5px;font-weight:600;color:#8a6d1f;cursor:pointer;font-family:inherit;margin-top:4px}
.tasks-addtask-row:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-addtask-row{color:#D9BC77;border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-addtask-row:hover{background:rgba(221,203,164,.07)}
.tasks-list-head .tlh-add{border:none;background:none;cursor:pointer;font-size:13px;opacity:.6;padding:2px 6px;border-radius:6px}
.tasks-list-head .tlh-add:hover{opacity:1;background:rgba(168,134,63,.15)}
.tasks-newlist-btn{display:block;margin:22px auto 8px;border:1px dashed rgba(168,134,63,.55);
    background:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:600;
    color:#8a6d1f;cursor:pointer;font-family:inherit}
.tasks-newlist-btn:hover{border-color:#A8863F;color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-newlist-btn{color:#D9BC77;border-color:rgba(221,203,164,.4)}
body[data-gtheme="dark"] .tasks-newlist-btn:hover{color:#E8CD8C;background:rgba(221,203,164,.08)}
/* Rangées de groupes (modale liste) */
.tasks-group-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.tasks-group-row input{flex:1;box-sizing:border-box}
.tasks-group-row-del{border:none;background:none;cursor:pointer;font-size:13px;opacity:.55;padding:4px 8px;border-radius:6px}
.tasks-group-row-del:hover{opacity:1;background:rgba(200,60,50,.15)}
.tasks-list-groups-hint{font-size:12px;opacity:.55;margin:2px 0 4px}
#listFormModal input[type="text"]{width:100%;box-sizing:border-box}
body[data-gtheme="dark"] .tasks-projects-row{border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .tasks-proj-sep{background:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-proj-new{color:#D9BC77;border-color:rgba(221,203,164,.4)}
body[data-gtheme="dark"] .tasks-proj-new:hover{color:#E8CD8C;border-color:#D9BC77;background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-proj-chip{border-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-proj-chip.on{background:rgba(221,203,164,.85);color:#211e19;border-color:transparent}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-chanvre.on{background:rgba(45,106,36,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-operations.on{background:rgba(21,87,153,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-innovation.on{background:rgba(94,53,177,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-culture.on{background:rgba(198,93,7,.85);color:#fff}
body[data-gtheme="dark"] .tasks-group-label::after{background:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .tasks-group-overdue{color:#F1A9A0}
body[data-gtheme="dark"] .tasks-list-head{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .tasks-list-head .tlh-prog{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .tasks-newlist-btn{border-color:rgba(221,203,164,.3)}

/* ---------- CARTE DE PROFIL (survol + clic) ---------- */
[data-user-card]{cursor:pointer}
.ucard{background:var(--chanv-blanc,#fff);color:#2b2620;border:1px solid rgba(40,34,24,.15);
    border-radius:14px;padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.22);width:280px;box-sizing:border-box}
body[data-gtheme="dark"] .ucard{background:#2b2823;color:rgba(255,255,255,.9);
    border-color:rgba(221,203,164,.22);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.ucard-hover{position:fixed;z-index:2350;animation:ucardIn .12s ease-out}
@keyframes ucardIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ucard-hover{animation:none}}
.ucard-head{display:flex;align-items:center;gap:12px}
.ucard-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
    display:grid;place-items:center;font-size:20px;font-weight:700;
    background:rgba(168,134,63,.2)}
.ucard-name{font-weight:750;font-size:15px}
.ucard-role{font-size:12px;opacity:.6;margin-top:1px}
.ucard-vacation{font-size:12px;color:#b8860b;margin-top:2px}
body[data-gtheme="dark"] .ucard-vacation{color:#e0b64d}
.ucard-phrase{font-size:12.5px;font-style:italic;opacity:.7;margin-top:10px;
    border-top:1px solid rgba(128,116,94,.2);padding-top:8px;text-align:center}
.ucard-actions{margin-top:12px}
.ucard-actions .btn{width:100%;font-size:13px;padding:8px 12px}
.ucard-overlay{position:fixed;inset:0;z-index:2360;display:flex;align-items:center;
    justify-content:center;background:rgba(15,12,8,.5)}
.ucard-modal{position:relative;width:320px}
.ucard-close{position:absolute;top:10px;right:12px;border:none;background:none;
    cursor:pointer;font-size:13px;opacity:.5;color:inherit}
.ucard-close:hover{opacity:1}

/* ---------- COMPOSEUR GANDALF (surfaces d'écriture partagées) ---------- */
.gc-composer{border:1px solid rgba(40,34,24,.16);border-radius:14px;padding:10px 12px;
    background:var(--chanv-blanc,#fff);margin-top:14px}
.gc-composer.gc-dropping{border-color:#A8863F;background:rgba(168,134,63,.06)}
body[data-gtheme="dark"] .gc-composer{background:#2b2823;border-color:rgba(221,203,164,.18)}
.gc-input-wrap{position:relative}
.gc-input{width:100%;box-sizing:border-box;border:none;background:none;resize:none;
    font-family:inherit;font-size:14px;color:inherit;outline:none;min-height:44px;line-height:1.5}
.gc-input::placeholder{opacity:.5}
.gc-quote-bar{display:flex;align-items:center;gap:8px;font-size:12.5px;
    border-left:3px solid rgba(168,134,63,.55);background:rgba(40,34,24,.05);
    border-radius:8px;padding:6px 10px;margin-bottom:8px}
.gc-quote-bar strong{flex-shrink:0}
.gc-quote-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.65}
.gc-quote-bar button{border:none;background:none;cursor:pointer;opacity:.6;font-size:11px}
.gc-quote-bar button:hover{opacity:1}
.gc-quote-bar.hidden{display:none}
body[data-gtheme="dark"] .gc-quote-bar{background:rgba(221,203,164,.08)}
.gc-chips{display:flex;flex-wrap:wrap;gap:6px}
.gc-chips:not(:empty){margin-bottom:8px}
.gc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
    border:1px solid rgba(168,134,63,.35);background:rgba(168,134,63,.08);
    border-radius:99px;padding:4px 10px;max-width:260px}
.gc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-chip button{border:none;background:none;cursor:pointer;font-size:10px;opacity:.6;padding:0}
.gc-chip button:hover{opacity:1}
.gc-toolbar{display:flex;align-items:center;gap:6px;border-top:1px solid rgba(40,34,24,.1);
    padding-top:8px;margin-top:6px;flex-wrap:wrap}
body[data-gtheme="dark"] .gc-toolbar{border-top-color:rgba(221,203,164,.12)}
.gc-tb{border:none;background:none;cursor:pointer;font-size:15px;font-weight:700;
    padding:5px 8px;border-radius:8px;color:inherit;opacity:.7;font-family:inherit}
.gc-tb:hover{opacity:1;background:rgba(168,134,63,.12)}
.gc-tb-status{font-size:13px;margin-left:4px}
.gc-send{margin-left:auto;padding:6px 18px;border-radius:99px;font-size:13px}
/* Dropdowns emoji / gif / mentions */
.gc-emoji-dd,.gc-gif-dd,.gc-mention-dd{position:absolute;bottom:calc(100% + 6px);left:0;z-index:40;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.16);border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);padding:8px;max-width:min(340px,90vw)}
body[data-gtheme="dark"] .gc-emoji-dd,body[data-gtheme="dark"] .gc-gif-dd,body[data-gtheme="dark"] .gc-mention-dd{
    background:#2b2823;border-color:rgba(221,203,164,.2);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.gc-emoji-dd{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;overflow-y:auto}
.gc-emoji-dd.hidden,.gc-gif-dd.hidden,.gc-mention-dd.hidden{display:none}
.gc-emoji-dd button{border:none;background:none;cursor:pointer;font-size:17px;padding:4px;border-radius:6px}
.gc-emoji-dd button:hover{background:rgba(168,134,63,.15)}
.gc-gif-dd{width:min(340px,90vw)}
.gc-gif-search{width:100%;box-sizing:border-box;margin-bottom:8px;padding:7px 10px;
    border:1px solid rgba(40,34,24,.15);border-radius:8px;font-size:13px;background:none;color:inherit}
.gc-gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:240px;overflow-y:auto;font-size:12px}
.gc-gif-grid img{width:100%;height:76px;object-fit:cover;border-radius:8px;cursor:pointer}
.gc-gif-grid img:hover{outline:2px solid #A8863F}
.gc-mention-dd{display:flex;flex-direction:column;min-width:220px}
.gc-mention-dd button{border:none;background:none;cursor:pointer;text-align:left;
    padding:7px 10px;border-radius:8px;font-size:13px;color:inherit;font-family:inherit}
.gc-mention-dd button:hover{background:rgba(168,134,63,.12)}
/* Rendu des pièces jointes dans les fils */
.gc-atts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.gc-att{border:1px solid rgba(40,34,24,.14);border-radius:10px;overflow:hidden;cursor:pointer;
    background:none;padding:0;font-family:inherit;color:inherit;text-decoration:none;
    display:flex;flex-direction:column;max-width:220px}
.gc-att:hover{border-color:rgba(168,134,63,.5)}
body[data-gtheme="dark"] .gc-att{border-color:rgba(221,203,164,.18)}
.gc-att-cap{font-size:11px;padding:5px 9px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
/* Une PHOTO se regarde sans cliquer (ticket vW7CZcWB, L. Bussière) : la tuile
   de 220×130 en object-fit:cover rognait une photo de téléphone en bandeau
   illisible. Même cadre que le carrousel (≥2 images), et l'image entière. */
.gc-att-img{max-width:min(340px,62vw)}
.gc-att-img img{width:auto;max-width:min(340px,62vw);height:auto;max-height:300px;
    object-fit:contain;display:block;background:rgba(128,128,128,.1)}
.gc-att-img .gc-att-cap{max-width:min(340px,62vw)}
.gc-att-file{flex-direction:row;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px}
.gc-att-file small{opacity:.55}
.gc-att-proj{cursor:pointer}
.gc-att-proj:hover .gc-att-cap{color:#A8863F}
.gc-att-go{opacity:.55}
.gc-att-proj img{width:100%;max-width:220px;height:90px;object-fit:cover;display:block}
.gc-att-broken{opacity:.4}
/* Citation dans un commentaire + bouton citer */
.gc-quote{border-left:3px solid rgba(168,134,63,.5);background:rgba(40,34,24,.05);
    border-radius:0 8px 8px 0;padding:4px 10px;margin:2px 0 6px;font-size:12px}
body[data-gtheme="dark"] .gc-quote{background:rgba(221,203,164,.07)}
.gc-quote-author{font-weight:700;margin-right:6px}
.gc-quote-text{opacity:.65}
.tasks-comment-tools{margin-left:auto;display:flex;gap:2px}
.tasks-comment-quote-btn{border:none;background:none;cursor:pointer;font-size:12px;
    opacity:0;padding:1px 5px;border-radius:5px}
.tasks-comment:hover .tasks-comment-quote-btn{opacity:.6}
@media (hover:none){.tasks-comment-quote-btn{opacity:.6}} /* tactile : citer atteignable */
.tasks-comment-quote-btn:hover{opacity:1!important;background:rgba(168,134,63,.15)}
.tasks-comment-deleted{opacity:.5;font-size:13px}
.tasks-comment-editbox{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;
    font-family:inherit;font-size:13.5px;border-radius:8px;border:1px solid rgba(168,134,63,.4);
    padding:8px 10px;background:none;color:inherit}
/* Réactions des commentaires */
.gc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;position:relative}
.gc-react{border:1px solid rgba(40,34,24,.15);background:rgba(40,34,24,.03);border-radius:99px;
    padding:2px 9px;font-size:12px;cursor:pointer;font-family:inherit;color:inherit}
.gc-react:hover{border-color:rgba(168,134,63,.5)}
.gc-react-mine{border-color:#A8863F;background:rgba(168,134,63,.14)}
.gc-react-add{opacity:0;transition:opacity .15s}
.tasks-comment:hover .gc-react-add{opacity:.6}
@media (hover:none){.gc-react-add{opacity:.6}} /* tactile : réagir atteignable */
.gc-react-add:hover{opacity:1!important}
.gc-react-palette{position:absolute;bottom:calc(100% + 4px);left:0;z-index:45;display:flex;gap:2px;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.18);border-radius:99px;
    padding:4px 8px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.gc-react-palette button{border:none;background:none;cursor:pointer;font-size:16px;padding:2px 4px;border-radius:6px}
.gc-react-palette button:hover{background:rgba(168,134,63,.15);transform:scale(1.15)}
body[data-gtheme="dark"] .gc-react{border-color:rgba(221,203,164,.2);background:rgba(221,203,164,.05)}
body[data-gtheme="dark"] .gc-react-mine{border-color:#D9BC77;background:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .gc-react-palette{background:#2b2823;border-color:rgba(221,203,164,.25);box-shadow:0 8px 22px rgba(0,0,0,.5)}
.gc-attachzone{border:1px dashed rgba(168,134,63,.4);border-radius:10px;padding:10px 12px}
.gc-attachzone.gc-dropping{border-color:#A8863F;background:rgba(168,134,63,.06)}
.gc-tb-label{font-size:12px;font-weight:600}
body[data-gtheme="dark"] .gc-attachzone{border-color:rgba(221,203,164,.3)}

/* ---------- LEVIER DE MIGRATION (panneau Gestion) ---------- */
.migration-lever-box{max-width:640px}
.migration-hint{font-size:13px;color:#777;line-height:1.5}
.migration-switch{display:flex;gap:0;border:2px solid var(--chanv-fibre);border-radius:14px;
    overflow:hidden;margin:14px 0 20px;width:fit-content}
.migration-engine{border:none;background:none;cursor:pointer;font-family:inherit;
    font-size:16px;font-weight:700;padding:14px 28px;color:#888;transition:all .2s}
.migration-engine.active{background:var(--chanv-terre);color:#fff}
.migration-sub{margin:18px 0 8px;font-size:13.5px}
.migration-sub small{font-weight:400;opacity:.6}
.migration-overrides{display:flex;flex-direction:column;gap:8px}
.migration-override-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 12px;background:var(--chanv-fibre);border-radius:10px;font-size:13.5px}
.mo-select{padding:6px 10px;border-radius:8px;border:1px solid rgba(0,0,0,.15);font-size:12.5px}
.migration-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.migration-status{font-size:13px;color:#777}
.migration-history{display:flex;flex-direction:column;gap:5px;font-size:12px;max-height:180px;overflow-y:auto}
.mig-hist-row code{font-size:10.5px;opacity:.7}
body[data-gtheme="dark"] .migration-switch{border-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .migration-engine.active{background:rgba(221,203,164,.85);color:#211e19}
body[data-gtheme="dark"] .migration-override-row{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .migration-hint,
body[data-gtheme="dark"] .migration-status{color:rgba(255,255,255,.55)}
body[data-gtheme="dark"] .mo-select{background:#2b2823;color:rgba(255,255,255,.85);border-color:rgba(221,203,164,.2)}

/* ---------- LECLAUDIFIER + articles custom (éditrice) ---------- */
.lc-card-add-article {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 220px; cursor: pointer;
    border: 2px dashed rgba(40, 34, 24, 0.25); border-radius: 12px;
    background: rgba(40, 34, 24, 0.03); color: #6b6459;
    font-family: inherit; font-size: 15px; font-weight: 700;
    transition: all 0.2s ease;
}
.lc-card-add-article:hover { border-color: #E3000B; color: #E3000B; background: rgba(227, 0, 11, 0.04); }
.lc-add-plus { font-size: 30px; }
.lc-custom-color-row { display: flex; gap: 10px; margin: 4px 0 14px; }
.lc-color-swatch {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; padding: 0; transition: transform 0.15s;
}
.lc-color-swatch:hover { transform: scale(1.1); }
.lc-color-swatch.active { border-color: #1a1a1a; box-shadow: 0 0 0 2px #fff inset; }
.lc-btn-delete-article { margin-left: 10px; color: #b3402f; border-color: #b3402f; }
.lc-leclaudifier-panel { border-color: #e8d9b8; background: linear-gradient(135deg, #fffcf4 0%, #faf3e0 100%); }
.lc-leclaudifier-panel .lc-ai-panel-title { color: #8a6d1f; }

/* Overlays de comparaison / d'intégration */
.lc-compare-overlay {
    /* AU-DESSUS de tout LECLAUDE (popups à 10000) : la modale d'intégration
       apparaissait DERRIÈRE l'éditeur — l'éditrice ne la voyait jamais. */
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 12, 8, 0.6); padding: 18px;
}
.lc-compare-box {
    background: #fff; color: #1a1a1a; border-radius: 14px;
    width: min(1100px, 96vw); max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.lc-compare-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 15px;
}
.lc-compare-close { border: none; background: none; cursor: pointer; font-size: 16px; padding: 4px 8px; }
.lc-compare-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    overflow-y: auto; flex: 1;
}
.lc-compare-col { padding: 16px 18px; min-width: 0; }
.lc-compare-col + .lc-compare-col { border-left: 1px solid rgba(0, 0, 0, 0.08); background: #fffcf4; }
.lc-compare-col-head {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: #8a6d1f; margin-bottom: 10px;
}
.lc-compare-title { font-size: 20px; margin: 0 0 6px; }
.lc-compare-subtitle { font-size: 14px; color: #666; margin: 0 0 12px; }
.lc-compare-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.lc-integrate-box { width: min(560px, 96vw); }
.lc-integrate-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.lc-integrate-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.45; }
.lc-integrate-opt input { margin-top: 3px; width: 16px; height: 16px; }
.lc-integrate-opt em { color: #b3402f; font-size: 12.5px; font-style: normal; }
.lc-integrate-opt-off { opacity: 0.5; cursor: default; }
.lc-integrate-status { font-size: 13px; color: #666; min-height: 18px; }
@media (max-width: 720px) {
    .lc-compare-cols { grid-template-columns: 1fr; }
    .lc-compare-col + .lc-compare-col { border-left: none; border-top: 2px solid #e8d9b8; }
}
/* Dark mode (coquille du hub) */
body[data-gtheme="dark"] .lc-compare-box { background: #211e19; color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .lc-compare-head,
body[data-gtheme="dark"] .lc-compare-actions { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .lc-compare-col + .lc-compare-col { border-color: rgba(221,203,164,.14); background: rgba(221,203,164,.06); }
body[data-gtheme="dark"] .lc-compare-subtitle,
body[data-gtheme="dark"] .lc-integrate-status { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .lc-compare-close { color: rgba(255,255,255,.6); }
body[data-gtheme="dark"] .lc-card-add-article { border-color: rgba(221,203,164,.3); background: rgba(221,203,164,.05); color: rgba(255,255,255,.6); }

/* ---------- ASSISTANT IA (Mot de la semaine) ---------- */
.lc-ai-panel {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e3ddf5;
    border-radius: 10px;
    background: linear-gradient(135deg, #faf9ff 0%, #f4f1fc 100%);
}
.lc-ai-panel-title {
    font-size: 14px;
    font-weight: 800;
    color: #5e35b1;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.lc-ai-panel-hint {
    font-size: 12px;
    color: #777;
    margin: 0 0 10px;
    line-height: 1.4;
}
.lc-ai-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9d2ef;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    resize: vertical;
    outline: none;
}
.lc-ai-input:focus { border-color: #5e35b1; }
.lc-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.lc-ai-btn {
    border: 1px solid #d9d2ef;
    background: #fff;
    color: #4a3f6b;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.lc-ai-btn:hover:not(:disabled) { background: #ede9fa; border-color: #5e35b1; }
.lc-ai-btn:disabled { opacity: 0.5; cursor: wait; }
.lc-ai-btn-primary {
    background: #5e35b1;
    border-color: #5e35b1;
    color: #fff;
}
.lc-ai-btn-primary:hover:not(:disabled) { background: #4a2a8f; }
.lc-ai-btn-undo { border-style: dashed; color: #888; }
.lc-ai-status {
    font-size: 12px;
    color: #5e35b1;
    margin-top: 8px;
    min-height: 16px;
}
.lc-editor-content:focus { border-color: #E3000B; }
.lc-editor-content h3 { font-size: 18px; font-weight: 800; margin: 20px 0 8px; }
.lc-editor-content h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.lc-editor-content blockquote {
    border-left: 3px solid #E3000B;
    padding: 8px 16px;
    margin: 12px 0;
    color: #555;
    font-style: italic;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
}
.lc-editor-content ul, .lc-editor-content ol { padding-left: 24px; margin: 8px 0; }
.lc-editor-content li { margin-bottom: 4px; }
.lc-editor-content hr { border: none; border-top: 1px solid #e0e0e0; margin: 16px 0; }
.lc-editor-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 8px 0;
    cursor: default;
}

/* ── Inline images in articles ── */
.lc-inline-img {
    margin: 20px 0;
    text-align: center;
}
.lc-inline-img img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .2s, box-shadow .2s;
}
.lc-inline-img img:hover { transform: scale(1.01); box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.lc-inline-img figcaption {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    font-style: italic;
}

/* ── Vidéo inline (corps d'article, depuis Studio Chanv) ── */
.lc-inline-video {
    margin: 20px 0;
    text-align: center;
}
.lc-inline-video video {
    width: 100%;
    max-width: 100%;
    max-height: 480px;
    border-radius: 8px;
    background: #000;
    display: inline-block;
    vertical-align: top;
}
.lc-inline-video.lc-img-left { text-align: left; }
.lc-inline-video.lc-img-center { text-align: center; }
.lc-inline-video.lc-img-right { text-align: right; }
.lc-inline-video.lc-img-sm video { max-width: 40%; }
.lc-inline-video.lc-img-md video { max-width: 60%; }
.lc-inline-video.lc-img-lg video { max-width: 80%; }
.lc-inline-video.lc-img-full video { max-width: 100%; }
.lc-inline-video.lc-img-selected { outline: 2px solid #E3000B; outline-offset: 2px; border-radius: 8px; }

/* Badge ▶ sur une tuile VIDÉO du picker Studio */
.gsp-asset { position: relative; }
.gsp-asset-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    pointer-events: none;
}

/* ── Inline image toolbar (editor) ── */
.lc-img-toolbar {
    position: absolute;
    display: flex;
    gap: 3px;
    padding: 5px 6px;
    background: #222;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 20;
    transform: translateX(-50%);
    animation: lc-fadeIn .15s ease;
}
.lc-img-toolbar::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #222;
}
.lc-img-tb-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}
.lc-img-tb-btn:hover { background: #444; color: #fff; }
.lc-img-tb-btn.active { background: #E3000B; color: #fff; border-color: #E3000B; }
.lc-img-tb-sep { width: 1px; background: #444; margin: 2px 3px; align-self: stretch; }
.lc-img-tb-btn.danger:hover { background: #c00; color: #fff; }
/* Selected image highlight */
.lc-editor-content figure.lc-img-selected {
    outline: 2px solid #E3000B;
    outline-offset: 3px;
    border-radius: 8px;
}
/* Alignment classes */
.lc-inline-img.lc-img-left { text-align: left; }

/* ── Habillage : gauche/droite FLOTTENT la figure entière (image + légende) —
   le texte de l'article coule autour puis revient dessous. S'applique dans
   l'ÉDITEUR et dans le RENDU publié (mêmes classes dans body_html). ── */
figure.lc-inline-img.lc-img-left  { float: left;  margin: 6px 20px 10px 0; clear: left; }
figure.lc-inline-img.lc-img-right { float: right; margin: 6px 0 10px 20px; clear: right; }
/* En float, la largeur vient de la FIGURE (une figure flottée « pleine
   largeur » n'aurait aucun sens → 45 % par défaut) ; l'img la remplit. */
figure.lc-inline-img.lc-img-left, figure.lc-inline-img.lc-img-right { width: 45%; }
figure.lc-inline-img.lc-img-left.lc-img-sm,  figure.lc-inline-img.lc-img-right.lc-img-sm  { width: 33%; }
figure.lc-inline-img.lc-img-left.lc-img-md,  figure.lc-inline-img.lc-img-right.lc-img-md  { width: 50%; }
figure.lc-inline-img.lc-img-left.lc-img-lg,  figure.lc-inline-img.lc-img-right.lc-img-lg  { width: 60%; }
figure.lc-inline-img.lc-img-left img, figure.lc-inline-img.lc-img-right img { max-width: 100% !important; width: 100%; }
/* Redimensionner ne doit JAMAIS rogner (retour Sarah-Jane) : en habillage ou en
   taille S/M/L, l'image garde ses PROPORTIONS entières — le max-height:400 +
   object-fit:cover de base coupait le haut/bas des images hautes réduites. */
figure.lc-inline-img.lc-img-left img, figure.lc-inline-img.lc-img-right img,
.lc-inline-img.lc-img-sm img, .lc-inline-img.lc-img-md img, .lc-inline-img.lc-img-lg img {
    height: auto !important;
    max-height: none !important;
    object-fit: initial !important;
}
@media (max-width: 640px) {
    figure.lc-inline-img.lc-img-left, figure.lc-inline-img.lc-img-right { float: none; width: 100%; margin: 8px 0; }
}
.lc-inline-img.lc-img-center { text-align: center; }
.lc-inline-img.lc-img-right { text-align: right; }
/* Size classes */
.lc-inline-img.lc-img-sm img { max-width: 33%; }
.lc-inline-img.lc-img-md img { max-width: 50%; }
.lc-inline-img.lc-img-lg img { max-width: 75%; }
.lc-inline-img.lc-img-full img { max-width: 100%; }

/* ── Data tables in articles ── */
.lc-art-body table.lc-data-table,
.lc-editor-content table.lc-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.5;
}
.lc-data-table thead {
    background: #f5f5f0;
}
.lc-data-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #888;
    padding: 10px 14px;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}
.lc-data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #333;
}
.lc-data-table tbody tr:last-child td {
    border-bottom: none;
}
.lc-data-table tbody tr:hover {
    background: #fafaf5;
}
@media (max-width: 768px) {
    .lc-data-table { font-size: 12px; }
    .lc-data-table th,
    .lc-data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .lc-art-body table.lc-data-table,
    .lc-editor-content table.lc-data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lc-data-table { font-size: 11px; }
}

/* ── "Le mot de" — Invitation Banner ── */
.lc-mot-de-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #f5f0eb 0%, #ede7e0 100%);
    border-left: 4px solid #E3000B;
    font-size: 14px;
    color: #333;
    animation: lc-fadeIn .3s ease;
}
.lc-mot-de-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.lc-mot-de-banner-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 8px 18px;
    background: #E3000B;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.lc-mot-de-banner-btn:hover { background: #b0000a; }
.lc-mot-de-banner-btn-edit {
    background: #555;
}
.lc-mot-de-banner-btn-edit:hover { background: #333; }

/* ==================== COMMENTAIRES ==================== */
.lc-comments {
    margin-top: 48px;
    border-top: 2px solid #1a1a1a;
    padding-top: 24px;
}
.lc-comments-heading {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
}
.lc-comment-composer {
    background: #fafaf5;
    border: 1px solid #e8e8e0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 26px;
}
.lc-comment-name-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
}
.lc-comment-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}
.lc-comment-write-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.lc-comment-textarea {
    flex: 1;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
}
.lc-comment-submit-row {
    text-align: right;
    margin-top: 10px;
}
.lc-comment-submit {
    background: #E3000B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.lc-comment-submit:disabled { opacity: 0.6; cursor: default; }
.lc-comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.lc-comment-reply {
    margin-left: 46px;
    border-bottom: none;
    padding-top: 4px;
}
.lc-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lc-comment-avatar-initials {
    background: #e8e2d3;
    color: #6b5f48;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.lc-comment-content { flex: 1; min-width: 0; }
.lc-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.lc-comment-author { font-size: 13.5px; font-weight: 800; }
.lc-comment-guest-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
    background: #f0ede4;
    border-radius: 6px;
    padding: 1px 7px;
}
.lc-comment-date { font-size: 11px; color: #999; }
.lc-comment-body {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.lc-comment-actions { margin-top: 6px; display: flex; gap: 14px; }
.lc-comment-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
}
.lc-comment-action:hover { color: #1a1a1a; }
.lc-comment-delete:hover { color: #E3000B; }
.lc-comment-reply-box { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; }
.lc-comment-reply-box .lc-comment-textarea { min-height: 44px; }
.lc-comments-empty { color: #999; font-size: 14px; font-style: italic; }
@media (max-width: 768px) {
    .lc-comment-reply { margin-left: 24px; }
    .lc-comment-composer { padding: 10px 12px; }
}

/* ── "Le mot de" — Card in grid ── */
/* Mot de l'employé — intégré en OUVERTURE de l'édito (voir viewLeclaudeHero) */
.lc-edito-mot-de {
    background: #fffdf6;
    border-left: 3px solid #E3000B;
    padding: 26px 30px;
    margin: 0 0 34px;
}
.lc-edito-mot-de-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #E3000B;
    margin-bottom: 10px;
}
.lc-edito-mot-de-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.25;
}
.lc-edito-mot-de img { max-width: 100%; height: auto; }
/* Photo de l'article : flottée en haut à droite, proportion originale plafonnée en hauteur */
.lc-edito-mot-de-photo {
    float: right;
    width: auto !important;
    height: auto;
    max-width: 42% !important;
    max-height: 320px;
    margin: 4px 0 16px 24px;
    border-radius: 6px;
}
.lc-edito-mot-de-photo-placeholder {
    float: right;
    width: 38%;
    aspect-ratio: 4 / 3;
    margin: 4px 0 16px 24px;
    border: 2px dashed #d8cfba;
    border-radius: 6px;
    background: #faf6ec;
    color: #a9997a;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}
.lc-mot-de-photo-editable { cursor: pointer; }
.lc-mot-de-photo-editable:hover { outline: 3px solid rgba(227, 0, 11, 0.4); outline-offset: 2px; }
@media (max-width: 768px) {
    .lc-edito-mot-de-photo,
    .lc-edito-mot-de-photo-placeholder {
        float: none;
        display: block;
        max-width: 100% !important;
        width: auto;
        margin: 0 auto 16px;
    }
}
/* Zone photo de l'éditeur invité */
.lc-mot-de-photo-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.lc-mot-de-photo-preview {
    max-width: 180px;
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.lc-edito-mot-de-signature {
    font-style: italic;
    color: #666;
    margin: 18px 0 0;
}
.lc-edito-mot-de-sep {
    border: none;
    border-top: 2px solid #1a1a1a;
    width: 90px;
    margin: 0 auto 36px;
}

.lc-mot-de-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 32px;
    margin: 0;
    background: #fffdf6;
    color: #1a1a1a;
    border-top: 3px solid #E3000B;
    border-bottom: 1px solid #e8e2d3;
    cursor: pointer;
    transition: background .2s;
}
.lc-mot-de-card:hover {
    background: #fbf5e8;
}
.lc-mot-de-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #E3000B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}
.lc-mot-de-content {
    flex: 1;
    min-width: 0;
}
.lc-mot-de-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #E3000B;
    margin-bottom: 4px;
}
.lc-mot-de-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
}
.lc-mot-de-excerpt {
    font-size: 13px;
    font-style: italic;
    color: #777;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── "Le mot de" — Editor (Writing form) ── */
.lc-mot-de-editor-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}
.lc-mot-de-editor-header {
    margin-bottom: 32px;
}
.lc-mot-de-editor-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 16px 0 8px;
}
.lc-mot-de-editor-sub {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.lc-editor-upload-zone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lc-editor-preview-img {
    max-width: 300px;
    max-height: 200px;
    border-radius: 6px;
    object-fit: cover;
}
.lc-editor-file-input { display: none; }
.lc-edit-section-btn {
    margin-top: 32px;
    padding: 12px 24px;
    background: #fef3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.lc-edit-section-btn:hover { background: #ffc107; }

/* ---------- ADMIN PANEL ---------- */
.lc-admin-panel {
    position: fixed;
    bottom: 60px;
    right: 24px;
    width: 400px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    z-index: 65;
}
.lc-admin-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lc-admin-toggle-icon {
    font-size: 12px;
    transition: transform .2s;
}
.lc-admin-collapsed .lc-admin-toggle-icon { transform: rotate(-90deg); }
.lc-admin-collapsed .lc-admin-title { margin-bottom: 0; }
.lc-admin-body { transition: max-height .3s ease, opacity .2s ease; overflow: hidden; }
.lc-admin-collapsed .lc-admin-body { max-height: 0; opacity: 0; pointer-events: none; }
.lc-editor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.lc-no-editors { color: #999; font-size: 13px; }
.lc-add-editor {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.lc-add-editor .lc-input { flex: 1; }

/* ---------- DRAG & DROP ---------- */
.lc-droppable {
    position: relative;
    transition: border-color .2s;
}
.lc-drag-over {
    border: 3px dashed #E3000B !important;
    opacity: 0.7;
}

/* ---------- SUBMISSIONS ---------- */
.lc-submission-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.lc-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.lc-submission-date { font-size: 12px; color: #999; }
.lc-submission-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.lc-submission-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lc-submission-actions .lc-input {
    width: auto;
    padding: 6px 10px;
    font-size: 12px;
}
.lc-submissions-empty {
    text-align: center;
    color: #999;
    font-size: 16px;
    padding: 60px 0;
}

/* ---------- ARCHIVES ---------- */
.lc-archive-card {
    padding: 16px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lc-archive-card:hover {
    background: #f5f5f0;
    border-color: #E3000B;
}
.lc-archive-card h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}
.lc-archive-dates {
    font-size: 12px;
    color: #888;
}

/* ---------- RESPONSIVE ---------- */

/* ── Tablette / paysage ── */
@media (max-width: 1024px) {
    .lc-layout { grid-template-columns: 220px 1fr; }
    .lc-hero { min-height: 480px; }
    .lc-hero-title { font-size: 42px; }
    .lc-hero-subtitle { font-size: 15px; }
    /* Contenu du carré rouge centré (LE/CLAUDE reste empilé, aligné à gauche dans son bloc) */
    .lc-logo-block { padding: 16px; gap: 10px; align-items: center; }
    .lc-logo-text { font-size: 34px; -webkit-text-stroke: 1.5px #fff; }
    .lc-chanvre-col .lc-card { min-height: 300px; }
    .lc-card { height: 280px; }
    .lc-card-full { height: 320px; }
    .lc-art-title { font-size: 34px; }
    .lc-art-hero-overlay { padding: 40px 32px 32px; }
    .lc-art-body-wrap { padding: 36px 24px 60px; }
    .lc-studio-modal { width: min(94vw, 840px); }
}

/* ── Mobile / Petit tablet ── */
@media (max-width: 768px) {
    /* Topbar compact */
    .lc-topbar {
        grid-template-columns: auto 1fr auto;
        padding: 0 10px;
        height: 46px;
        gap: 6px;
    }
    .lc-topbar-brand {
        font-size: 12px;
        letter-spacing: 1.5px;
    }
    .lc-topbar-back { font-size: 16px; padding: 4px 6px; }
    .lc-topbar-btn { width: 30px; height: 30px; }
    .lc-topbar-btn svg { width: 15px; height: 15px; }
    .lc-lang-switch { padding: 1px; gap: 1px; }
    .lc-lang-btn { padding: 3px 7px; font-size: 10px; }

    /* Layout single-column */
    .lc-layout {
        grid-template-columns: 1fr;
    }

    /* Sidebar → en-tête : logo LE/CLAUDE empilé à gauche (70%),
       bloc date/édition à droite (30%), comme la maquette desktop */
    .lc-sidebar {
        display: grid;
        grid-template-columns: 7fr 3fr;
        align-items: stretch;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        overflow: visible;
    }
    .lc-sidebar::after { display: none; } /* Hide watermark on mobile */
    .lc-sidebar-footer { display: none; }
    .lc-chanvre-col { display: none; } /* la carte chanvre rejoint le flux principal */

    .lc-logo-block {
        aspect-ratio: auto;
        padding: 18px 16px;
        align-items: flex-start;
        text-align: left;
        gap: 8px;
        justify-content: center;
    }
    .lc-logo-text { font-size: 34px; letter-spacing: 0.5px; -webkit-text-stroke: 1.5px #fff; }
    .lc-logo-subtitle { font-size: 7px; letter-spacing: 2px; align-self: flex-start; text-align: left; }
    .lc-sidebar-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 10px 12px;
        border-bottom: none;
        border-left: 1px solid #eee;
    }
    .lc-edition-number { font-size: 12px; }
    .lc-date { font-size: 10px; letter-spacing: 1px; margin-bottom: 0; }
    .lc-edition-label { font-size: 7px; }
    .lc-sidebar-section { padding: 10px 16px; }
    .lc-sidebar-heading { font-size: 11px; margin: 0 0 10px; cursor: pointer; position: relative; }
    .lc-sidebar-heading::after {
        content: '▾';
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        font-size: 14px; color: #999; transition: transform 0.2s;
    }
    .lc-sidebar-heading.lc-collapsed::after { transform: translateY(-50%) rotate(-90deg); }
    .lc-sidebar-content.lc-hidden { display: none; }

    /* Grid single-column */
    .lc-grid {
        grid-template-columns: 1fr;
    }

    /* Hero compact — height:auto + padding haut : le titre de la Une ne doit
       jamais être coupé sous la barre « Actualités Chanv » */
    .lc-hero {
        min-height: 440px;
        height: auto;
    }
    .lc-hero-title { font-size: 34px; max-width: 100%; }
    .lc-hero-subtitle { font-size: 14px; max-width: 100%; }
    .lc-hero-overlay { padding: 76px 16px 20px; }
    .lc-hero-cta { padding: 8px 16px; font-size: 11px; }

    /* Cards compact */
    .lc-card { height: auto; }
    .lc-card-img-wrap { height: 160px; }
    .lc-card-info { padding: 12px; }
    .lc-card-title { font-size: 15px; }
    .lc-card-excerpt { font-size: 12px; }

    /* Side layout → column on mobile */
    .lc-card-body.lc-card-side { flex-direction: column; }
    .lc-card-side .lc-card-img-wrap { width: 100%; height: 160px; }
    .lc-card-side .lc-card-text { width: 100%; }

    /* Overlay : tous les enfants sont en absolu — sans hauteur minimum,
       la carte s'effondre à ~0 et la section disparaît sur mobile */
    .lc-card-body.lc-card-overlay { min-height: 300px; }
    .lc-card-overlay .lc-card-img-wrap { height: 100%; }

    /* Layout picker */
    .lc-layout-picker { bottom: 4px; }

    /* Article hero mobile */
    .lc-art-hero { min-height: 260px; }
    .lc-art-hero.has-bg { min-height: 280px; }
    .lc-art-hero-overlay { padding: 24px 16px 20px; }
    .lc-art-title { font-size: 24px; max-width: 100%; letter-spacing: 0; }
    .lc-art-subtitle { font-size: 14px; max-width: 100%; }
    .lc-art-category-tag { font-size: 9px; padding: 3px 8px; }

    /* Article body mobile */
    .lc-art-body-wrap { padding: 24px 16px 60px; }
    .lc-art-body { font-size: 15px; line-height: 1.75; }
    .lc-art-body p:first-child { font-size: 16px; }
    .lc-art-body h1 { font-size: 22px; }
    .lc-art-body h2 { font-size: 18px; }
    .lc-art-body h3 { font-size: 16px; }

    /* Editor banner mobile */
    .lc-editor-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
    }
    .lc-editor-badge { font-size: 10px; text-align: center; }
    .lc-editor-info { font-size: 11px; }
    .lc-editor-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .lc-editor-btn { padding: 6px 10px; font-size: 11px; }

    /* Editor toolbar scroll on mobile */
    .lc-editor-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 8px;
    }
    .lc-editor-toolbar::-webkit-scrollbar { display: none; }
    .lc-tb-btn { flex-shrink: 0; padding: 4px 8px; font-size: 12px; min-width: 28px; }
    .lc-editor-content { min-height: 200px; padding: 12px; font-size: 14px; }

    /* Admin panel full-width */
    .lc-admin-panel {
        width: calc(100% - 24px);
        right: 12px;
        max-height: 70vh;
    }

    /* Article content (old) */
    .lc-article-content { padding: 16px 12px 60px; }

    /* Studio picker fullscreen */
    .lc-studio-modal {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    .lc-studio-projects {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .lc-studio-assets {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 6px;
    }
    .lc-studio-body { padding: 12px; }
    .lc-studio-header { padding: 12px 14px; }

    /* Inline image toolbar */
    .lc-inline-img-toolbar {
        transform: scale(0.9);
    }

    /* Archives */
    .lc-archive-card { padding: 10px; }

    /* Le mot de — mobile */
    .lc-mot-de-banner { flex-wrap: wrap; padding: 12px 14px; font-size: 13px; }
    .lc-mot-de-banner-btn { margin-left: 0; width: 100%; text-align: center; margin-top: 8px; }
    .lc-mot-de-card { padding: 16px; gap: 14px; }
    .lc-mot-de-avatar { width: 44px; height: 44px; font-size: 16px; }
    .lc-mot-de-title { font-size: 15px; }
    .lc-mot-de-editor-wrap { padding: 24px 16px 60px; }
    .lc-mot-de-editor-title { font-size: 22px; }
}

/* ── Petit mobile ── */
@media (max-width: 480px) {
    .lc-topbar-brand { font-size: 10px; letter-spacing: 1px; }
    .lc-topbar { height: 42px; padding: 0 8px; }
    .lc-lang-btn { padding: 2px 5px; font-size: 9px; }

    .lc-logo-text { font-size: 20px; letter-spacing: 1px; }
    .lc-logo-subtitle { font-size: 7px; }
    .lc-logo-block { padding: 18px 12px 14px; }

    .lc-hero { min-height: 180px; }
    .lc-hero-title { font-size: 18px; }
    .lc-hero-subtitle { font-size: 12px; }

    .lc-art-hero { min-height: 200px; }
    .lc-art-title { font-size: 20px; }
    .lc-art-subtitle { font-size: 13px; }
    .lc-art-body-wrap { padding: 16px 12px 60px; }
    .lc-art-body { font-size: 14px; }
    .lc-art-body p:first-child { font-size: 15px; }

    .lc-card-img-wrap { height: 140px; }
    .lc-card-info { padding: 10px; }
    .lc-card-title { font-size: 14px; }

    .lc-editor-banner { padding: 8px 10px; }
    .lc-editor-btn { padding: 5px 8px; font-size: 10px; }

    .lc-studio-projects { grid-template-columns: 1fr; }
    .lc-studio-assets { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* ==================== STUDIO CHANV PICKER ==================== */
.lc-studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lc-fadeIn .2s ease;
}
@keyframes lc-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lc-studio-modal {
    background: #1e1e1e;
    border-radius: 16px;
    width: min(90vw, 840px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    border: 1px solid #333;
    overflow: hidden;
}
.lc-studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}
.lc-studio-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}
.lc-studio-close {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all .15s;
}
.lc-studio-close:hover { color: #fff; background: #333; }

.lc-studio-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.lc-studio-back {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
}
.lc-studio-back:hover { color: #fff; }

.lc-studio-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.lc-studio-project-card {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    border: 1px solid #3a3a3a;
    transition: all .2s;
}
.lc-studio-project-card:hover {
    border-color: #667eea;
    background: #2e2e3e;
    transform: translateY(-2px);
}
.lc-studio-project-card h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}
.lc-studio-project-card span {
    font-size: 12px;
    color: #888;
}

.lc-studio-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.lc-studio-asset {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s;
}
.lc-studio-asset:hover {
    border-color: #667eea;
    transform: scale(1.03);
}
.lc-studio-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lc-studio-asset-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    font-size: 11px;
    padding: 16px 6px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-studio-loading {
    text-align: center;
    color: #888;
    padding: 40px;
    font-size: 14px;
}
.lc-studio-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 14px;
}

.lc-studio-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
}
.lc-studio-upload-btn {
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
    white-space: nowrap;
}
.lc-studio-upload-btn:hover { background: #5a6fd6; }

/* ── Image Loading Overlay ── */
.lc-image-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: all;
}
.lc-image-loading-overlay.visible { opacity: 1; }

.lc-image-loading-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.lc-image-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #eee;
    border-top-color: #E3000B;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: lc-spin 0.8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lc-image-loading-text {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.lc-image-loading-sub {
    font-size: 13px;
    color: #888;
}

/* ═══════════ CHAT : PICKER EMOJI / GIF ═══════════ */
/* Desktop : bulle AU-DESSUS de la barre de saisie (order:-1 dans le flex-column),
   comme avant. Sur mobile (≤768) elle repasse SOUS l'input (voir plus bas). */
.chat-picker{order:-1;max-height:260px;overflow-y:auto;background:var(--chanv-blanc);
    border:1px solid rgba(40,34,24,.12);border-radius:14px;margin:0 0 8px;padding:10px;
    box-shadow:0 8px 24px rgba(40,34,24,.12)}
@media (max-width:768px){
    /* Mobile : le panneau prend la place du clavier, SOUS la barre de saisie */
    .chat-picker{order:0;margin:6px 0 0;max-height:min(46vh,300px)}
}
.chat-picker-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:rgba(40,38,34,.5);margin:8px 4px 4px}
.chat-picker-cat:first-child{margin-top:0}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px}
.chat-emoji{border:none;background:none;font-size:20px;padding:4px;border-radius:8px;cursor:pointer;line-height:1.2}
.chat-emoji:hover{background:rgba(168,134,63,.15)}
.chat-gif-search{width:100%;border:1px solid rgba(40,34,24,.15);border-radius:10px;
    padding:8px 12px;font-size:13px;margin-bottom:8px;background:#FBF9F4}
.chat-gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.chat-gif-item{width:100%;height:90px;object-fit:cover;border-radius:10px;cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease}
.chat-gif-item:hover{transform:scale(1.04);box-shadow:0 4px 12px rgba(40,34,24,.25)}
.chat-gif-btn{font-size:10.5px;font-weight:800;letter-spacing:.04em}
.chat-att-gif{max-width:260px;max-height:220px;border-radius:12px;display:block}
.chat-gif-credit{font-size:10px;color:rgba(40,38,34,.4);text-align:right;margin-top:6px}

/* =====================================================================
   MODE SOMBRE — surcharges body[data-gtheme="dark"]
   Palette shell : fond #201d19, panneaux #2b2823 / #332f28,
   texte rgba(255,255,255,.92/.62/.40), lignes rgba(221,203,164,.14),
   accent or #DDCBA4, ombres rgba(0,0,0,.3).
   Uniquement des surcharges — les règles claires restent intactes.
   L'ancienne UI standalone (main-header, dropdown avatar, chatbot flottant,
   login/loader) est masquée sous body.shell-on : volontairement ignorée.
   ===================================================================== */

/* ---- Grille Apps (tuiles, catégories, notices) ---- */
body[data-gtheme="dark"] .app-tile {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .app-tile:hover {
    border-color: rgba(221,203,164,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .app-desc { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .app-icon-image { background: #332f28; }
body[data-gtheme="dark"] .app-icon-image::after {
    background: linear-gradient(to bottom, transparent, #2b2823);
}
body[data-gtheme="dark"] .category-header {
    color: rgba(255,255,255,.92);
    border-bottom-color: rgba(221,203,164,.28);
}
body[data-gtheme="dark"] .restricted-notice {
    background: #2b2823;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .restricted-notice h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .restricted-notice p { color: rgba(255,255,255,.62); }

/* ---- Modales & formulaires partagés ---- */
body[data-gtheme="dark"] .modal-content {
    background: #2b2823;
    color: rgba(255,255,255,.85);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
body[data-gtheme="dark"] .modal-content label { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .modal-content input,
body[data-gtheme="dark"] .modal-content select,
body[data-gtheme="dark"] .modal-content textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .modal-content input::placeholder,
body[data-gtheme="dark"] .modal-content textarea::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .modal-content input:focus,
body[data-gtheme="dark"] .modal-content textarea:focus { border-color: rgba(221,203,164,.45); }
body[data-gtheme="dark"] .close-modal { color: rgba(255,255,255,.5); }
/* Paramètres utilisateur (Gestion → Utilisateurs et Rôles) : les noms codaient
   var(--chanv-terre) en dur → noir sur modale sombre, illisible. */
body[data-gtheme="dark"] .settings-app-name { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .settings-app-icon { background: rgba(221,203,164,.12); }
body[data-gtheme="dark"] .settings-app-row { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .settings-tabs { background: rgba(221,203,164,.1); }
body[data-gtheme="dark"] .settings-tab { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .settings-tab:hover { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .settings-tab.active { background: rgba(221,203,164,.85); color: #211e19; }
body[data-gtheme="dark"] .settings-section-hint { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .settings-skill-row { background: rgba(221,203,164,.08); }
body[data-gtheme="dark"] .settings-skill-name { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .settings-skill-desc { color: rgba(255,255,255,.55); }
/* En-tête du profil : le fond cream (--chanv-fibre) est fixe → en dark, le nom
   passait en blanc sur clair. On teinte l'en-tête en sombre pour rester cohérent
   avec la modale et garder le nom lisible. */
body[data-gtheme="dark"] .settings-user-header { background: rgba(221,203,164,.09); }
body[data-gtheme="dark"] .settings-user-info h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .settings-user-info p { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .toggle-label { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .form-hint { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .admin-tabs { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .tab-btn { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .tab-btn.active {
    color: rgba(255,255,255,.92);
    border-bottom-color: #DDCBA4;
}

/* ---- Tables & boutons d'administration (Gestion) ---- */
body[data-gtheme="dark"] .admin-table-wrapper {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .admin-table th {
    background: #332f28;
    color: rgba(255,255,255,.5);
}
body[data-gtheme="dark"] .admin-table td { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .user-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .user-avatar { background: #332f28; }
body[data-gtheme="dark"] .role-select {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .btn-settings,
body[data-gtheme="dark"] .btn-icon,
body[data-gtheme="dark"] .btn-action {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .btn-settings:hover,
body[data-gtheme="dark"] .btn-icon:hover,
body[data-gtheme="dark"] .btn-action:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.3);
}
body[data-gtheme="dark"] .btn-icon-danger:hover {
    background: rgba(204,107,90,.2);
    border-color: rgba(204,107,90,.45);
}
body[data-gtheme="dark"] .skill-tool-row { background: #332f28; }
body[data-gtheme="dark"] .skill-tool-name code {
    background: rgba(221,203,164,.15);
    color: #DDCBA4;
}
body[data-gtheme="dark"] .skill-tool-desc { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .skill-tools-readonly summary { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .access-badge.public { background: rgba(44,122,123,.25); color: #7EDCE2; }
body[data-gtheme="dark"] .access-badge.restreint { background: rgba(197,48,48,.2); color: #FCA5A5; }

/* ---- Emoji picker (formulaires & composer) ---- */
body[data-gtheme="dark"] .emoji-picker-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .emoji-picker-btn:hover { background: rgba(221,203,164,.13); }
body[data-gtheme="dark"] .emoji-picker-dropdown {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
body[data-gtheme="dark"] .emoji-picker-item:hover { background: rgba(221,203,164,.13); }

/* ---- Badges feedback & bannières ---- */
body[data-gtheme="dark"] .basecamp-banner[data-level="info"] { background: rgba(59,130,246,.16); color: #93C5FD; }
body[data-gtheme="dark"] .basecamp-banner[data-level="warn"] { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .fb-status-pending { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .fb-status-error { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .fb-type-bug { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .fb-type-feature { background: rgba(99,102,241,.2); color: #A5B4FC; }

/* ---- Onboarding & anniversaire ---- */
body[data-gtheme="dark"] .onboarding-card {
    background: #2b2823;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .onboarding-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .onboarding-body { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .onboarding-body strong { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .onboarding-image { background: #332f28; }
body[data-gtheme="dark"] .onboarding-footer { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .onboarding-dot { background: rgba(255,255,255,.2); }
body[data-gtheme="dark"] .birthday-card { background: #2b2823; }
body[data-gtheme="dark"] .birthday-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .birthday-message { color: rgba(255,255,255,.62); }

/* ---- Signalement de bug ---- */
body[data-gtheme="dark"] .bug-report-btn {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
body[data-gtheme="dark"] .bug-report-btn span { color: rgba(255,255,255,.7); }
body[data-gtheme="dark"] .bug-report-modal {
    background: #2b2823;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .bug-report-header { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .bug-type-toggle { background: #201d19; }
body[data-gtheme="dark"] .bug-type-btn { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .bug-type-btn:hover {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.05);
}
body[data-gtheme="dark"] .bug-type-btn.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .bug-report-body label { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .bug-report-body textarea,
body[data-gtheme="dark"] .bug-report-body input,
body[data-gtheme="dark"] .bug-report-body select {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .bug-screenshot-paste {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .bug-screenshot-paste:hover:not(:disabled) {
    background: rgba(255,255,255,.05);
}
body[data-gtheme="dark"] .bug-screenshot-hint { color: rgba(255,255,255,.5); }

/* ---- Actu / Changelog ---- */
body[data-gtheme="dark"] .changelog-card {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .changelog-card:hover {
    border-color: rgba(221,203,164,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .changelog-card-badge {
    background: #332f28;
    color: #DDCBA4;
}
body[data-gtheme="dark"] .changelog-card-badge.custom { background: rgba(46,125,50,.25); color: #A5D6A7; }
body[data-gtheme="dark"] .changelog-card-period { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-card-preview { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .changelog-card-stats { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .changelog-card-footer { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .changelog-empty {
    background: #2b2823;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .changelog-empty h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-admin-controls { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .changelog-generate-form { background: #332f28; }
body[data-gtheme="dark"] .changelog-generate-form label { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .changelog-date-input,
body[data-gtheme="dark"] .changelog-lang-select {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .changelog-stat-pill {
    background: #332f28;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .changelog-detail-dates { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .changelog-article h1 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article h2 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article h3 { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .changelog-token-warning {
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.35);
    color: #FCD34D;
}

/* ---- Mes tickets ---- */
body[data-gtheme="dark"] .mytickets-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .mytickets-filter {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.7);
}
body[data-gtheme="dark"] .mytickets-filter:hover {
    border-color: rgba(221,203,164,.4);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .mytickets-filter.active {
    background: #DDCBA4;
    color: #201d19;
    border-color: #DDCBA4;
}
body[data-gtheme="dark"] .mytickets-loading,
body[data-gtheme="dark"] .mytickets-empty {
    background: #2b2823;
    color: rgba(255,255,255,.5);
}
body[data-gtheme="dark"] .mt-card {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .mt-card:hover {
    border-color: rgba(221,203,164,.4);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
body[data-gtheme="dark"] .mt-card-message { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-card-machine { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .mt-card-bclink { color: #DDCBA4; }
body[data-gtheme="dark"] .mt-badge-feature { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .mt-badge-bug { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .mt-badge-support { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .mt-badge-open { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .mt-badge-resolved { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
body[data-gtheme="dark"] .mt-detail { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-detail-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .mt-detail-meta {
    background: #332f28;
    color: rgba(255,255,255,.7);
}
body[data-gtheme="dark"] .mt-detail-meta a { color: #DDCBA4; }
body[data-gtheme="dark"] .mt-detail-message { background: #332f28; }
body[data-gtheme="dark"] .mt-cadrage { background: rgba(224,164,88,.14); }
body[data-gtheme="dark"] .mt-cadrage-title { color: #E8C288; }
body[data-gtheme="dark"] .mt-cadrage-status,
body[data-gtheme="dark"] .mt-cadrage-meta { color: #DBA96A; }
body[data-gtheme="dark"] .mt-cadrage-link { color: #E8C288; }
body[data-gtheme="dark"] .mt-comments-title { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-comment { background: #332f28; }
body[data-gtheme="dark"] .mt-comment-author { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-comment-text { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .mt-add-comment textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .mt-resolved-note {
    background: #332f28;
    color: rgba(255,255,255,.6);
}

/* ---- Drive ACL (tab Agent IA de Gestion) ---- */
body[data-gtheme="dark"] .drive-acl-table-wrapper {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .drive-acl-table thead th {
    background: #332f28;
    color: rgba(255,255,255,.7);
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .drive-acl-row td { border-bottom-color: rgba(255,255,255,.06); }
body[data-gtheme="dark"] .drive-acl-row:hover { background: rgba(221,203,164,.08); }
body[data-gtheme="dark"] .drive-acl-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .drive-acl-tag.group { background: rgba(221,203,164,.15); color: #DDCBA4; }
body[data-gtheme="dark"] .drive-acl-tag.email { background: rgba(96,165,250,.16); color: #93C5FD; }

/* ---- Vue Plan (bâtiment + capteurs) ---- */
body[data-gtheme="dark"] .plan-view {
    background: #2b2823;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
body[data-gtheme="dark"] .plan-tabs {
    background: #201d19;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .plan-tab { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .plan-tab:hover {
    color: rgba(255,255,255,.85);
    background: rgba(221,203,164,.13);
}
body[data-gtheme="dark"] .plan-tab-active {
    color: rgba(255,255,255,.92);
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    border-bottom-color: #2b2823;
}
body[data-gtheme="dark"] .plan-toolbar {
    background: #201d19;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .plan-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .plan-btn:hover {
    background: rgba(221,203,164,.2);
    border-color: rgba(221,203,164,.4);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .plan-btn-primary {
    background: #DDCBA4;
    border-color: #DDCBA4;
    color: #201d19;
}
body[data-gtheme="dark"] .plan-btn-primary:hover { background: #c2ac7c; }
body[data-gtheme="dark"] .plan-status {
    color: rgba(255,255,255,.55);
    border-bottom-color: rgba(255,255,255,.06);
}
/* Statuts pastel → translucides lisibles sur sombre */
body[data-gtheme="dark"] .plan-status-warn { color: #E8C288; background: rgba(224,164,88,.14); }
body[data-gtheme="dark"] .plan-status-err { color: #F1A9A0; background: rgba(204,107,90,.16); }
body[data-gtheme="dark"] .plan-stage {
    background:
        linear-gradient(45deg, #26231e 25%, transparent 25%),
        linear-gradient(-45deg, #26231e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #26231e 75%),
        linear-gradient(-45deg, transparent 75%, #26231e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
    background-color: #201d19;
}
body[data-gtheme="dark"] .plan-marker-bubble {
    background: #332f28;
    color: rgba(255,255,255,.85);
    border-color: rgba(221,203,164,.2);
}
body[data-gtheme="dark"] .plan-marker-bubble::after { border-top-color: #332f28; }
body[data-gtheme="dark"] .plan-marker-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .plan-marker-time { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .plan-tray {
    background: rgba(43,40,35,.97);
    border-color: rgba(221,203,164,.2);
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .plan-tray-title { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .plan-tray-item { background: #332f28; }
body[data-gtheme="dark"] .plan-tray-item:hover { background: rgba(221,203,164,.22); }
body[data-gtheme="dark"] .plan-tray-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .plan-tray-temp { color: rgba(255,255,255,.62); }

/* ---- Messages (chat employés) ---- */
body[data-gtheme="dark"] .btn-chat,
body[data-gtheme="dark"] .btn-tasks {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .btn-chat:hover,
body[data-gtheme="dark"] .btn-tasks:hover { background: rgba(221,203,164,.2); }
body[data-gtheme="dark"] .chat-view { background: #201d19; }
body[data-gtheme="dark"] .chat-sidebar {
    background: #2b2823;
    border-right-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .chat-sidebar-actions { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-conv-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .chat-conv-item:hover { background: #332f28; }
body[data-gtheme="dark"] .chat-conv-active { background: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-conv-active:hover { background: rgba(221,203,164,.18); }
body[data-gtheme="dark"] .chat-conv-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .chat-conv-unread .chat-conv-name { color: rgba(255,255,255,.95); }
body[data-gtheme="dark"] .chat-conv-preview { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .chat-conv-unread .chat-conv-preview { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .chat-pane { background: #2b2823; }
body[data-gtheme="dark"] .chat-pane-header { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-pane-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .chat-messages { background: #201d19; }
body[data-gtheme="dark"] .chat-day-sep { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-day-sep::before,
body[data-gtheme="dark"] .chat-day-sep::after { background: rgba(255,255,255,.1); }
body[data-gtheme="dark"] .chat-msg-author { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .chat-msg-content {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.88);
}
body[data-gtheme="dark"] .chat-msg-own .chat-msg-content {
    background: #443e33;
    border-color: #443e33;
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-msg-bot .chat-msg-content {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.3);
    color: #C7D2FE;
}
body[data-gtheme="dark"] .chat-reaction { background: #332f28; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .chat-reaction span { color: rgba(255,255,255,.6); }
body[data-gtheme="dark"] .chat-reaction:hover { background: #3a352c; }
body[data-gtheme="dark"] .chat-reaction-mine { background: #4a4130; border-color: var(--chanv-or,#A8863F); }
body[data-gtheme="dark"] .chat-reaction-mine span { color: #DDCBA4; }
body[data-gtheme="dark"] .chat-react-palette { background: #2b2823; border-color: rgba(221,203,164,.18); }
body[data-gtheme="dark"] .chat-react-choice:hover { background: #3a352c; }
body[data-gtheme="dark"] .chat-typing-txt { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .chat-composer {
    background: #2b2823;
    border-top-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .chat-composer textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-composer textarea::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-composer textarea:focus { border-color: rgba(221,203,164,.45); }
body[data-gtheme="dark"] .chat-tool-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .chat-tool-btn:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.3);
}
body[data-gtheme="dark"] .chat-attach-preview {
    background: #332f28;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .chat-att-img { background: #332f28; }
body[data-gtheme="dark"] .chat-att-file {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .chat-att-file:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.4);
}
body[data-gtheme="dark"] .chat-pane.chat-dropping::after {
    background: rgba(32,29,25,.92);
    border-color: #DDCBA4;
    color: #DDCBA4;
}
/* Modale nouvelle conversation */
body[data-gtheme="dark"] .chat-type-toggle { background: #201d19; }
body[data-gtheme="dark"] .chat-type-btn { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .chat-type-btn.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .chat-users-list { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-user-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .chat-user-item:hover { background: #332f28; }
body[data-gtheme="dark"] .chat-user-name { color: rgba(255,255,255,.85); }

/* ---- Pickers emoji / GIF du chat ---- */
body[data-gtheme="dark"] .chat-picker {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .chat-picker-cat { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-gif-search {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-gif-search::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-gif-credit { color: rgba(255,255,255,.35); }

/* ---- Vue Tâches ---- */
body[data-gtheme="dark"] .tasks-view { background: #201d19; color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-toolbar {
    background: #2b2823;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .tasks-filter-group { background: #201d19; }
body[data-gtheme="dark"] .tasks-filter,
body[data-gtheme="dark"] .tasks-status { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .tasks-filter.active,
body[data-gtheme="dark"] .tasks-status.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .tasks-search {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .tasks-search::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .tasks-status-line {
    background: #2b2823;
    border-bottom-color: rgba(255,255,255,.05);
    color: rgba(255,255,255,.40);
}
body[data-gtheme="dark"] .tasks-loading,
body[data-gtheme="dark"] .tasks-empty {
    background: #2b2823;
    color: rgba(255,255,255,.5);
}
/* Bordure gauche = couleur de priorité : on ne touche que les 3 autres côtés */
body[data-gtheme="dark"] .tasks-card {
    background: #2b2823;
    border-top-color: rgba(221,203,164,.14);
    border-right-color: rgba(221,203,164,.14);
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .tasks-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
body[data-gtheme="dark"] .tasks-card-title { color: rgba(255,255,255,.9); }
body[data-gtheme="dark"] .tasks-card-desc { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .tasks-meta-chip {
    background: #332f28;
    color: rgba(255,255,255,.7);
}
/* Chips statut/priorité : variantes translucides sur sombre */
body[data-gtheme="dark"] .tasks-chip-urgent { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .tasks-chip-high { background: rgba(234,88,12,.18); color: #FDBA74; }
body[data-gtheme="dark"] .tasks-chip-low { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .tasks-chip-normal { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .tasks-chip-done { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .tasks-chip-open { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .tasks-chip-in_progress { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .tasks-chip-project { background: rgba(221,203,164,.2); color: #DDCBA4; }
body[data-gtheme="dark"] .tasks-due-late { background: rgba(220,38,38,.18) !important; color: #FCA5A5 !important; }
body[data-gtheme="dark"] .tasks-avatar {
    border-color: #2b2823;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
/* Détail & commentaires */
body[data-gtheme="dark"] .tasks-detail-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tasks-detail-desc {
    background: #332f28;
    color: rgba(255,255,255,.75);
}
body[data-gtheme="dark"] .tasks-detail-field label { color: rgba(255,255,255,.45); }
body[data-gtheme="dark"] .tasks-detail-field > div { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .tasks-comments-title { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-comment { background: #332f28; }
body[data-gtheme="dark"] .tasks-comment-content { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .tasks-comment-form textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .tasks-assignee-list { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .tasks-user-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .tasks-user-item:hover { background: #332f28; }
body[data-gtheme="dark"] .tasks-user-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-mention {
    background: rgba(99,102,241,.2);
    color: #A5B4FC;
}
body[data-gtheme="dark"] .tasks-mention-dropdown {
    background: #2b2823;
    border-color: rgba(221,203,164,.2);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
body[data-gtheme="dark"] .tasks-mention-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .btn-danger {
    background: rgba(204,107,90,.16);
    color: #F1A9A0;
    border-color: rgba(204,107,90,.4);
}
body[data-gtheme="dark"] .btn-danger:hover { background: rgba(204,107,90,.3); }


/* ═══════════ CHAT : ÉDITION / SUPPRESSION + RESPONSIVE ═══════════ */
/* Ligne bulle + outils : les outils sont COLLÉS à la bulle concernée (avant :
   absolute au bord de la ligne → à l'opposé de la bulle alignée). */
.chat-msg-line{display:flex;align-items:center;gap:6px;max-width:80%}
.chat-msg-own .chat-msg-line{flex-direction:row-reverse}   /* bulle à droite, outils à sa gauche */
.chat-msg-bubble{min-width:0}
.chat-msg-tools{display:none;gap:2px;flex-shrink:0;
    background:var(--chanv-blanc);border:1px solid rgba(40,34,24,.12);border-radius:8px;
    padding:2px 4px;box-shadow:0 2px 8px rgba(40,34,24,.12);z-index:5}
/* Les outils n'apparaissent qu'au CLIC sur le message (avant : au survol → trop). */
.chat-msg.chat-msg-active .chat-msg-tools{display:inline-flex}
.chat-msg-active .chat-msg-content{outline:2px solid rgba(168,134,63,.35);outline-offset:1px}
.chat-msg-bubble{cursor:default} /* le clic ouvre les outils, mais la bulle ne doit pas SEMBLER cliquable */
.cmt-btn{border:none;background:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:5px;line-height:1}
.cmt-btn:hover{background:rgba(168,134,63,.15)}
.chat-msg-deleted{font-style:italic;opacity:.55}
.chat-msg-edited{font-size:11px;opacity:.55;font-style:italic}
/* Traduction temporaire d'un message (perso) */
.chat-msg-trbanner{margin-top:5px;font-size:11px;opacity:.7;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chat-msg-truntr{border:none;background:none;cursor:pointer;color:inherit;font:inherit;font-size:11px;opacity:.9;padding:0;text-decoration:underline}
.chat-msg-truntr:hover{opacity:1}
body[data-gtheme="dark"] .chat-msg-tools{background:#2b2823;border-color:rgba(221,203,164,.18)}

/* ═══════════ CHAT : CITATION / RÉPONSE ═══════════ */
/* Bloc citation dans la bulle : rappel du message d'origine, cliquable */
.chat-quote{display:flex;flex-direction:column;gap:1px;cursor:pointer;
    border-left:3px solid rgba(168,134,63,.55);border-radius:6px;
    background:rgba(40,34,24,.06);padding:4px 8px;margin-bottom:5px;max-width:100%;
    color:#33302a}   /* hors de .chat-msg-content : la couleur n'est pas héritée de la bulle */
.chat-quote:hover{background:rgba(40,34,24,.1)}
.cq-author{font-size:11px;font-weight:700;opacity:.8}
.cq-text{font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body[data-gtheme="dark"] .chat-quote{background:rgba(221,203,164,.1);color:rgba(255,255,255,.85)}
body[data-gtheme="dark"] .chat-quote:hover{background:rgba(221,203,164,.16)}
/* Bandeau « réponse à » au-dessus du composeur */
.chat-reply-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;
    border-left:3px solid rgba(168,134,63,.55);border-radius:8px;
    background:rgba(40,34,24,.06);margin-bottom:6px;font-size:12px}
.chat-reply-bar.hidden{display:none}
.crb-author{font-weight:700;flex-shrink:0}
.crb-text{opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
body[data-gtheme="dark"] .chat-reply-bar{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .crb-author{color:#DDCBA4} /* citation lisible en dark (était noir sur noir) */
body[data-gtheme="dark"] .crb-text{color:rgba(255,255,255,.88)}
/* Message d'origine mis en évidence après un clic sur une citation */
.chat-msg-flash .chat-msg-bubble{animation:chatQuoteFlash 1.5s ease}
@keyframes chatQuoteFlash{0%,60%{box-shadow:0 0 0 3px rgba(168,134,63,.45)}100%{box-shadow:none}}

/* ═══════════ STUDIO PICKER (composant partagé chat / IA / LECLAUDE) ═══════════ */
.gsp-overlay{position:fixed;inset:0;z-index:2300;/* > .modal-overlay (2000) : le Composeur vit dans des modales */display:flex;align-items:center;justify-content:center;
    background:rgba(15,12,8,.55);padding:16px}
.gsp-modal{background:#fff;color:#33302a;border-radius:16px;width:min(720px,94vw);
    max-height:84vh;display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.35)}
.gsp-header{display:flex;align-items:center;gap:8px;padding:12px 16px;
    border-bottom:1px solid rgba(40,34,24,.1)}
.gsp-logo{font-size:18px;flex-shrink:0}
.gsp-crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;
    scrollbar-width:none;white-space:nowrap}
.gsp-crumbs::-webkit-scrollbar{display:none}
.gsp-crumb{border:none;background:none;cursor:pointer;font-size:13.5px;font-weight:600;
    color:inherit;opacity:.6;padding:4px 6px;border-radius:6px;flex-shrink:0}
.gsp-crumb:hover{opacity:1;background:rgba(168,134,63,.12)}
.gsp-crumb-here{opacity:1;cursor:default}
.gsp-crumb-here:hover{background:none}
.gsp-crumb-sep{opacity:.35;font-size:13px;flex-shrink:0}
.gsp-icon-btn{border:none;background:none;cursor:pointer;font-size:15px;color:inherit;
    padding:4px 8px;border-radius:8px;flex-shrink:0;line-height:1}
.gsp-icon-btn:hover{background:rgba(168,134,63,.15)}
.gsp-icon-btn.hidden{display:none}
.gsp-searchrow{padding:10px 16px 0}
.gsp-search{width:100%;box-sizing:border-box;border:1px solid rgba(40,34,24,.15);
    border-radius:10px;padding:8px 12px;font-size:14px;background:rgba(40,34,24,.03);color:inherit;outline:none}
.gsp-search:focus{border-color:rgba(168,134,63,.55)}
.gsp-body{overflow-y:auto;padding:12px 16px 16px;flex:1}
.gsp-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    opacity:.5;margin:10px 2px 8px}
.gsp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gsp-tile{border:1px solid rgba(40,34,24,.12);border-radius:12px;padding:0;overflow:hidden;
    cursor:pointer;background:none;text-align:left;color:inherit;display:flex;flex-direction:column;
    transition:transform .12s,box-shadow .12s}
.gsp-tile:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(40,34,24,.14)}
.gsp-tile-cover{aspect-ratio:4/3;background:rgba(128,128,128,.1);display:flex;
    align-items:center;justify-content:center;overflow:hidden}
.gsp-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gsp-tile-emoji{font-size:26px;opacity:.7}
.gsp-tile-name{padding:8px 10px 2px;font-size:12.5px;font-weight:600;overflow:hidden;
    text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gsp-tile-meta{padding:0 10px 9px;font-size:11px;opacity:.55;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.gsp-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.gsp-asset{border:1px solid rgba(40,34,24,.12);border-radius:10px;padding:0;overflow:hidden;
    cursor:pointer;background:none;transition:transform .12s,box-shadow .12s}
.gsp-asset:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(40,34,24,.18)}
.gsp-asset img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gsp-actionrow{margin:2px 2px 10px}
.gsp-action-btn{border:1px solid rgba(168,134,63,.45);background:rgba(168,134,63,.1);color:inherit;
    border-radius:10px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.gsp-action-btn:hover{background:rgba(168,134,63,.2)}
.gsp-loading,.gsp-empty,.gsp-error{padding:26px 8px;text-align:center;font-size:13.5px;opacity:.6}
.gsp-error{color:#b3402f;opacity:1}
/* Dark mode */
body[data-gtheme="dark"] .gsp-modal{background:#211e19;color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .gsp-header{border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .gsp-search{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .gsp-tile,
body[data-gtheme="dark"] .gsp-asset{border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .gsp-tile:hover,
body[data-gtheme="dark"] .gsp-asset:hover{box-shadow:0 4px 14px rgba(0,0,0,.5)}
body[data-gtheme="dark"] .gsp-tile-cover{background:rgba(221,203,164,.07)}
body[data-gtheme="dark"] .gsp-crumb:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .gsp-icon-btn:hover{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .gsp-action-btn{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.3)}
/* Multi-sélection : état sélectionné (✓) + bandeau de sélection */
.gsp-asset{position:relative}
.gsp-asset-sel{outline:2.5px solid #A8863F;outline-offset:-2px}
.gsp-asset-check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;
    background:#A8863F;color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.gsp-asset-sel .gsp-asset-check{display:flex}
.gsp-tray{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px;
    border-top:1px solid rgba(40,34,24,.1);background:rgba(168,134,63,.06)}
.gsp-tray.hidden{display:none}
.gsp-tray-thumbs{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:thin;padding:2px}
.gsp-tray-thumb{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid rgba(40,34,24,.15)}
.gsp-tray-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gsp-tray-x{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,15,8,.55);color:#fff;font-size:13px;font-weight:800}
.gsp-tray-thumb:hover .gsp-tray-x{display:flex}
.gsp-tray-send{flex:0 0 auto;border:none;cursor:pointer;background:#A8863F;color:#fff;font-weight:700;border-radius:999px;padding:9px 20px;font-size:14px;white-space:nowrap}
.gsp-tray-send:hover{background:#96762f}
body[data-gtheme="dark"] .gsp-tray{border-top-color:rgba(221,203,164,.14);background:rgba(221,203,164,.05)}
body[data-gtheme="dark"] .gsp-asset-sel{outline-color:#DDCBA4}
body[data-gtheme="dark"] .gsp-asset-check{background:#DDCBA4;color:#2b2415}
body[data-gtheme="dark"] .gsp-tray-send{background:#DDCBA4;color:#2b2415}
body[data-gtheme="dark"] .gsp-tray-send:hover{background:#EBD9B4}
body[data-gtheme="dark"] .gsp-action-btn:hover{background:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .gsp-error{color:#F1A9A0}
/* --- Mini Studio : cartes de marque (3 brand guides) --- */
.gsp-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.gsp-brand{position:relative;border:none;border-radius:14px;cursor:pointer;overflow:hidden;
    aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    padding:14px;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 8px rgba(40,34,24,.12)}
.gsp-brand:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(40,34,24,.22)}
.gsp-brand-deco{position:absolute;left:0;right:0;bottom:0;height:4px;opacity:.9}
.gsp-brand-logo{max-width:74%;max-height:60%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.18))}
/* Le logo se suffit à lui-même : le nom ne s'affiche QUE si le logo échoue. */
.gsp-brand-name{display:none;font-size:13.5px;font-weight:700;letter-spacing:.02em;text-align:center;opacity:.92}
.gsp-brand-noimg .gsp-brand-logo{display:none}
.gsp-brand-noimg .gsp-brand-name{display:block}
/* --- Chips (catégories / sections de marque) --- */
.gsp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gsp-brand-tabs{position:sticky;top:0;z-index:1;padding-bottom:4px;background:inherit}
.gsp-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(40,34,24,.16);
    background:rgba(168,134,63,.07);color:inherit;cursor:pointer;border-radius:20px;
    padding:7px 13px;font-size:12.5px;font-weight:600;transition:background .12s ease,border-color .12s ease}
.gsp-chip:hover{background:rgba(168,134,63,.16)}
.gsp-chip.on{background:rgba(168,134,63,.9);border-color:rgba(168,134,63,.9);color:#2b2415}
.gsp-chip small{font-size:10.5px;font-weight:600;opacity:.55}
.gsp-chip.on small{opacity:.7}
.gsp-byproject{margin-top:16px}
.gsp-byproject .gsp-action-btn{width:100%;justify-content:center;display:flex}
/* légende sous les vignettes (recherche IA / catégorie) */
.gsp-asset{display:flex;flex-direction:column}
.gsp-asset-cap{padding:5px 7px 6px;font-size:10.5px;font-weight:500;line-height:1.25;text-align:left;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.gsp-asset-broken img{display:none}
.gsp-asset-broken::before{content:"🚫";display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:20px;opacity:.4}
.gsp-tile-broken img{display:none}
.gsp-tile-broken::before{content:"🎬";font-size:26px;opacity:.5}
body[data-gtheme="dark"] .gsp-chip{border-color:rgba(221,203,164,.2);background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .gsp-chip:hover{background:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .gsp-chip.on{background:rgba(221,203,164,.85);border-color:rgba(221,203,164,.85);color:#221e19}
body[data-gtheme="dark"] .gsp-brand{box-shadow:0 2px 10px rgba(0,0,0,.4)}
body[data-gtheme="dark"] .gsp-brand:hover{box-shadow:0 8px 24px rgba(0,0,0,.6)}
@media (max-width:640px){
    .gsp-overlay{padding:0}
    .gsp-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
    .gsp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .gsp-brands{gap:8px}
    .gsp-brand{aspect-ratio:1;padding:10px}
}

@media (max-width: 640px){
    /* Composeur sur UNE SEULE ligne façon Messenger : outils (repliables au focus)
       · champ (pill) · emoji · envoi. Le repli .tools-collapsed remplace les 4
       outils par la flèche › et libère toute la place au champ dès qu'on écrit. */
    .chat-composer-row{gap:6px;flex-wrap:nowrap;align-items:center}
    .chat-composer textarea{flex:1 1 auto;order:0;font-size:16px;min-height:44px;min-width:0;padding:10px 16px;border-radius:22px}
    .chat-tools-left{gap:4px}
    .chat-tool-btn{width:38px;height:38px;min-width:38px;padding:0;font-size:17px;flex:0 0 auto}
    .chat-send{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;flex:0 0 auto;margin-left:2px}
    /* Mobile : outils au tap sur le message aussi (via .chat-msg-active) */
    .chat-msg-tools{position:static;box-shadow:none;border:none;background:none;margin-left:4px}
    .chat-msg.chat-msg-active .chat-msg-tools{display:inline-flex}
}

/* ══════════ Tâches : archivés retrouvables + terminées repliées ══════════ */
.tasks-archived-zone{margin:34px 0 10px}
.tasks-archived-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
    background:none;border:1px dashed rgba(107,90,58,.35);border-radius:10px;padding:10px 14px;
    font-size:.92rem;font-weight:600;color:#8a7a5c;cursor:pointer;transition:all .15s}
.tasks-archived-toggle:hover{border-color:#A8863F;color:#A8863F;background:rgba(168,134,63,.06)}
.tasks-archived-toggle .tat-chev{margin-left:auto;font-size:.85rem}
body[data-gtheme="dark"] .tasks-archived-toggle{color:#b8a985;border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-archived-toggle:hover{color:#E8CD8C;background:rgba(221,203,164,.07)}
.tasks-proj-grid-archived{margin-top:12px}
.tasks-proj-card-archived{opacity:.72;cursor:default;filter:saturate(.5);height:auto;min-height:96px}
.tasks-proj-card-archived:hover{transform:none;box-shadow:none}
.tpc-unarchive{margin-top:10px}
.tasks-done-fold{margin-top:10px;border-top:1px dashed rgba(107,90,58,.25);padding-top:6px}
.tasks-done-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
    padding:7px 4px;font-size:.88rem;font-weight:600;color:#8a7a5c;user-select:none}
.tasks-done-fold summary::-webkit-details-marker{display:none}
.tasks-done-fold summary::before{content:'▸';font-size:.8rem;transition:transform .15s}
.tasks-done-fold[open] summary::before{transform:rotate(90deg)}
.tasks-done-fold summary:hover{color:#A8863F}
.tasks-done-fold-body{opacity:.78}
body[data-gtheme="dark"] .tasks-done-fold{border-top-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-done-fold summary{color:#b8a985}
body[data-gtheme="dark"] .tasks-done-fold summary:hover{color:#E8CD8C}

/* Fiche tâche : échéance bien visible */
.tasks-due-big{font-weight:750;font-size:1.02rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tasks-due-big.overdue{color:#b3261e}
.tasks-due-big .tasks-due-rel{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;
    background:rgba(168,134,63,.14);color:#8a6d2f;white-space:nowrap}
.tasks-due-big.overdue .tasks-due-rel{background:rgba(179,38,30,.12);color:#b3261e}
.tasks-due-none{opacity:.55;font-style:italic}
body[data-gtheme="dark"] .tasks-due-big.overdue{color:#ff8a80}
body[data-gtheme="dark"] .tasks-due-big .tasks-due-rel{background:rgba(221,203,164,.15);color:#E8CD8C}
body[data-gtheme="dark"] .tasks-due-big.overdue .tasks-due-rel{background:rgba(255,138,128,.15);color:#ff8a80}

/* ══════════ LE HALL : accueil visuel d'un projet (cartes-outils) ══════════ */
.hall-hero{text-align:center;padding:26px 18px 20px;background:#fff;border:1px solid rgba(107,90,58,.16);
    border-radius:18px;box-shadow:0 8px 26px rgba(60,48,25,.07);margin-bottom:20px;position:relative}
.hall-ico{font-size:2.2rem;line-height:1}
.hall-name{font-size:1.55rem;font-weight:800;margin:4px 0 2px}
.hall-desc{color:#8a7a5c;font-size:.95rem;max-width:52ch;margin:0 auto}
.hall-people{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.hall-av{width:32px;height:32px;border-radius:50%;background:#6d5a3a;color:#fff;display:inline-flex;
    align-items:center;justify-content:center;font-size:.72rem;font-weight:800;cursor:pointer;border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.18);overflow:hidden}
.hall-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hall-av-more{background:#a8946e;cursor:default}
.hall-invite{border:1px dashed rgba(107,90,58,.4);background:none;border-radius:999px;padding:5px 14px;
    font-size:.8rem;font-weight:600;color:#8a7a5c;cursor:pointer;transition:all .15s}
.hall-invite:hover{border-color:#A8863F;color:#A8863F}
.hall-activity{margin-top:10px;font-size:.78rem;color:#a8946e;min-height:1em}
.hall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Journal du projet, sous les outils du hall (ticket kVzny5n) : une colonne
   qui se lit, pas une carte de plus dans la grille. */
.hall-feed{margin-top:18px}
.hall-feed:empty{display:none}
.hall-feed-head{display:flex;align-items:baseline;gap:10px;font-weight:800;font-size:.9rem;
    padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(107,90,58,.16)}
.hall-feed-actors{margin-left:auto;font-weight:600;font-size:.76rem;color:#a8946e}
.hall-feed-empty{font-size:.82rem;color:#a8946e;padding:6px 0}
.hall-feed-day{margin-top:12px}
.hall-feed-date{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:#a8946e;margin-bottom:4px}
.hall-feed-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:.84rem;line-height:1.45}
.hfr-ico{flex:0 0 auto}
.hfr-h{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.74rem;color:#a8946e}
.hfr-txt{min-width:0}
.hfr-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hfr-txt a:hover{color:#A8863F}
.hfr-txt i{opacity:.7;font-style:normal}
body[data-gtheme="dark"] .hall-feed-head{border-bottom-color:rgba(221,203,164,.18)}
.hall-grid>*{min-width:0} /* un long titre de tâche ne doit jamais élargir sa carte (Studio coupé) */
@media(max-width:1000px){.hall-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hall-grid{grid-template-columns:1fr 1fr;gap:10px}}
.hall-card{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:14px 15px 12px;
    min-height:140px;display:flex;flex-direction:column;gap:9px;cursor:pointer;transition:transform .12s, box-shadow .12s}
.hall-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,48,25,.12)}
.hc-head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.98rem;
    border-bottom:1px solid rgba(107,90,58,.14);padding-bottom:9px}
.hc-ico{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    font-size:.9rem;color:#fff;flex:none}
.hc-green{background:#2D6A24}.hc-blue{background:#155799}.hc-yellow{background:#C9A227}
.hc-cyan{background:#0E7C86}.hc-violet{background:#5E35B1}.hc-red{background:#C0392B}.hc-brown{background:#6d5a3a}
.hc-badge{margin-left:auto;background:#b3261e;color:#fff;font-size:.68rem;border-radius:999px;padding:1px 8px;font-weight:800}
/* Renommage inline de la carte Tâches (✎ visible pour les gestionnaires) */
.hc-edit{border:none;background:none;cursor:pointer;font-size:.78rem;opacity:0;padding:2px 5px;border-radius:6px;color:inherit;transition:opacity .12s}
.hall-card:hover .hc-edit{opacity:.55}
.hc-edit:hover{opacity:1;background:rgba(168,134,63,.14)}
.hc-edit-input{flex:1;min-width:0;border:1px solid rgba(168,134,63,.5);border-radius:8px;padding:4px 8px;font:inherit;font-size:.9rem;background:#fff;color:inherit;outline:none}
.hc-edit-ok,.hc-edit-cancel{border:none;cursor:pointer;border-radius:7px;padding:4px 8px;font-weight:800;font-size:.8rem}
.hc-edit-ok{background:#A8863F;color:#fff}
.hc-edit-cancel{background:rgba(40,34,24,.08);color:inherit}
body[data-gtheme="dark"] .hc-edit-input{background:#2E271E;border-color:rgba(221,203,164,.35)}
body[data-gtheme="dark"] .hc-edit-cancel{background:rgba(221,203,164,.12)}
@media (pointer:coarse){.hall-card .hc-edit{opacity:.45}} /* mobile : pas de hover */
.hc-peek{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:#6d5f49;flex:1}
.hc-row{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hc-row>span,.hc-row>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hc-row.late{color:#b3261e;font-weight:600}
.hc-row.hc-muted{opacity:.6;font-style:italic}
.hc-row.hc-link:hover{color:#A8863F;text-decoration:underline}
.hc-dot{width:7px;height:7px;border-radius:50%;background:#2D6A24;flex:none}
.hc-dot.o{background:#C65D07}.hc-dot.r{background:#b3261e}
.hc-bar{height:5px;border-radius:4px;background:#EFE7D4;overflow:hidden}
.hc-bar i{display:block;height:100%;background:#2D6A24}
.hc-more{margin-top:auto;color:#A8863F;font-weight:700;font-size:.76rem}
body[data-gtheme="dark"] .hall-hero,body[data-gtheme="dark"] .hall-card{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .hall-name{color:#EFE7D6}
body[data-gtheme="dark"] .hall-desc,body[data-gtheme="dark"] .hc-peek{color:#b8a985}
body[data-gtheme="dark"] .hall-av{border-color:#241F19}
body[data-gtheme="dark"] .hc-head{color:#EFE7D6;border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .hc-bar{background:#2E271E}
body[data-gtheme="dark"] .hc-more{color:#D9BC77}
body[data-gtheme="dark"] .hc-row.late{color:#ff8a80}
body[data-gtheme="dark"] .hall-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}

/* ── Calendrier du projet ── */
.cal-head{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.cal-month{font-size:1.15rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a7a5c;padding:4px 0}
.cal-cell{background:#fff;border:1px solid rgba(107,90,58,.14);border-radius:10px;min-height:92px;padding:6px;display:flex;flex-direction:column;gap:3px}
.cal-out{opacity:.45}
.cal-today{border-color:#A8863F;box-shadow:inset 0 0 0 1px #A8863F}
.cal-day{font-size:.75rem;font-weight:700;color:#8a7a5c}
.cal-today .cal-day{color:#A8863F}
.cal-task{font-size:.7rem;font-weight:600;background:rgba(45,106,36,.12);color:#2D6A24;border-radius:6px;
    padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-task.late{background:rgba(179,38,30,.12);color:#b3261e}
.cal-task.done{background:#EFE7D4;color:#8a7a5c;text-decoration:line-through}
.cal-more{font-size:.68rem;color:#8a7a5c;font-weight:700}
@media(max-width:700px){.cal-cell{min-height:64px}.cal-task{font-size:.62rem}}
body[data-gtheme="dark"] .cal-cell{background:#241F19;border-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .cal-day,body[data-gtheme="dark"] .cal-dow,body[data-gtheme="dark"] .cal-more{color:#b8a985}
body[data-gtheme="dark"] .cal-task{background:rgba(96,158,86,.18);color:#9fd48f}
body[data-gtheme="dark"] .cal-task.late{background:rgba(255,138,128,.16);color:#ff8a80}
body[data-gtheme="dark"] .cal-task.done{background:#2E271E;color:#8a7a5c}
body[data-gtheme="dark"] .cal-today{border-color:#D9BC77;box-shadow:inset 0 0 0 1px #D9BC77}

/* ── Ordre des cartes (⚙️ Gérer) ── */
.tasks-order-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tasks-order-chip{border:1px solid rgba(107,90,58,.3);border-radius:999px;padding:6px 14px;font-size:.82rem;
    font-weight:600;background:#fff;cursor:grab;user-select:none}
.tasks-order-chip.dragging{opacity:.4}
body[data-gtheme="dark"] .tasks-order-chip{background:#241F19;border-color:rgba(221,203,164,.3);color:#EFE7D6}

/* Cartes sous-projet du hall : de vrais espaces, avec leur couleur */
.hall-card-sub{border-top:3px solid rgba(107,90,58,.4)}
.hall-card-sub.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.8)}
.hall-card-sub.tasks-proj-operations{border-top-color:rgba(21,87,153,.8)}
.hall-card-sub.tasks-proj-innovation{border-top-color:rgba(94,53,177,.8)}
.hall-card-sub.tasks-proj-culture{border-top-color:rgba(198,93,7,.8)}
.hc-sub{background:var(--chip,#EFE7D4);font-size:1.05rem}
.hall-card-new{border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:140px;
    color:#8a7a5c;font-weight:700}
.hall-card-new:hover{color:#A8863F;border-color:#A8863F}
body[data-gtheme="dark"] .hall-card-new{color:#b8a985}
body[data-gtheme="dark"] .hall-card-new:hover{color:#E8CD8C;border-color:#E8CD8C}
body[data-gtheme="dark"] .hc-sub{background:#2E271E}
.hall-hero{border-top:4px solid rgba(107,90,58,.4)}
.hall-hero.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.8)}
.hall-hero.tasks-proj-operations{border-top-color:rgba(21,87,153,.8)}
.hall-hero.tasks-proj-innovation{border-top-color:rgba(94,53,177,.8)}
.hall-hero.tasks-proj-culture{border-top-color:rgba(198,93,7,.8)}

/* Hero du hall : bouton Nouveau classeur + modale « Où créer ? » */
.hall-hero-actions{margin-top:10px}
.tasks-scope-q{color:#8a7a5c;margin:4px 0 14px}
.tasks-scope-btns{display:flex;flex-direction:column;gap:10px}
/* Espace entre les choix (picker groupe / créer où / traduire) et « Annuler »
   — sinon le bouton d'action se colle/chevauche la dernière option. */
.tasks-scope-btns + .modal-actions{margin-top:16px}
.tasks-scope-btns .btn{width:100%}
body[data-gtheme="dark"] .tasks-scope-q{color:#b8a985}
.tgl-add{margin-left:6px;opacity:0;transition:opacity .12s}
.tasks-group-label:hover .tgl-add{opacity:1}
@media(hover:none){.tgl-add{opacity:.7}} /* mobile : toujours visible */

/* ══════════ RÉUNIONS : module natif (ex-Planificateur) ══════════ */
#reunions-view{max-width:1100px;margin:0 auto;padding:18px 20px 60px;width:100%}
.rn-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.rn-range{font-size:1.05rem}
.rn-days{display:flex;flex-direction:column;gap:16px}
.rn-day{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:12px 16px}
.rn-day.rn-today{border-color:#A8863F;box-shadow:inset 0 0 0 1px #A8863F}
.rn-day-head{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:8px;
    border-bottom:1px solid rgba(107,90,58,.14);padding-bottom:8px;margin-bottom:8px}
.rn-empty{color:#8a7a5c;font-style:italic;font-size:.85rem;padding:4px 0}
.rn-row{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:background .12s}
.rn-row:hover{background:rgba(168,134,63,.07)}
.rn-row.rn-done{opacity:.55}
.rn-time{font-weight:800;font-size:.95rem;min-width:64px;display:flex;flex-direction:column}
.rn-time .rn-dur{font-weight:600;font-size:.7rem;color:#8a7a5c}
.rn-main{flex:1;min-width:0}
.rn-subject{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-detail{font-size:.8rem;color:#8a7a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-avs{display:flex}
.rn-av{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px}
.rn-av:first-child{margin-left:0}
.rn-av-ph{background:#6d5a3a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800}
.rn-join{white-space:nowrap}
.rn-types{display:flex;gap:8px;flex-wrap:wrap}
.rn-type{border:1px solid rgba(107,90,58,.3);border-radius:999px;padding:7px 14px;background:none;
    font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;color:inherit}
.rn-type.on{background:#A8863F;border-color:#A8863F;color:#fff}
.rn-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:560px){.rn-form-grid{grid-template-columns:1fr}}
.rn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rn-chip{background:rgba(168,134,63,.12);border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.rn-chip button{border:none;background:none;cursor:pointer;font-size:.75rem;opacity:.6;color:inherit}
.rn-chip button:hover{opacity:1}
.rn-chip-muted{opacity:.6;font-style:italic}
.rn-userlist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rn-user{text-align:left;border:1px solid rgba(107,90,58,.18);border-radius:8px;padding:7px 12px;background:none;
    cursor:pointer;font-size:.85rem;color:inherit;transition:background .12s}
.rn-user:hover{background:rgba(168,134,63,.08)}
.rn-user-mail{opacity:.5;font-size:.75rem;margin-left:6px}
.rn-meet-opt{display:flex;align-items:center;gap:9px;margin:6px 0 4px;cursor:pointer;font-size:.9rem}
/* Bug support mnuNfs (17/08) : la règle générique input{width:100%} étirait la checkbox
   et poussait son libellé à l'extrême droite — le formulaire semblait « sans texte ». */
.rn-meet-opt input[type="checkbox"]{width:auto;margin:0;flex:0 0 auto}
.rn-conflicts{background:rgba(179,38,30,.09);border-left:3px solid #b3261e;color:#b3261e;
    border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:10px}
.rn-d-meta{color:#6d5f49;font-size:.92rem;margin:4px 0}
.rn-d-desc{margin:12px 0;line-height:1.55}
.rn-d-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a7a5c;margin:14px 0 6px}
.rn-d-attendees{display:flex;flex-wrap:wrap;gap:6px}
.rn-d-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
body[data-gtheme="dark"] .rn-day{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .rn-day.rn-today{border-color:#D9BC77;box-shadow:inset 0 0 0 1px #D9BC77}
body[data-gtheme="dark"] .rn-day-head{color:#EFE7D6;border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .rn-subject{color:#EFE7D6}
body[data-gtheme="dark"] .rn-time{color:#EFE7D6}
body[data-gtheme="dark"] .rn-detail,body[data-gtheme="dark"] .rn-empty,body[data-gtheme="dark"] .rn-time .rn-dur,
body[data-gtheme="dark"] .rn-d-meta,body[data-gtheme="dark"] .rn-d-label{color:#b8a985}
body[data-gtheme="dark"] .rn-av{border-color:#241F19}
body[data-gtheme="dark"] .rn-chip{background:rgba(221,203,164,.14);color:#EFE7D6}
body[data-gtheme="dark"] .rn-type{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .rn-type.on{background:#D9BC77;border-color:#D9BC77;color:#241F19}
body[data-gtheme="dark"] .rn-user{border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .rn-conflicts{background:rgba(255,138,128,.1);color:#ff8a80;border-left-color:#ff8a80}
/* Bug support mnuNfs (17/08) : les <label> génériques restaient #666 en mode sombre
   (quasi noir sur noir). Même teinte que .rn-d-label dark. */
body[data-gtheme="dark"] label{color:#b8a985}
body[data-gtheme="dark"] .rn-meet-opt{color:#EFE7D6}

/* ══════════ P3 Messages ↔ Tâches : carte de tâche + partage ══════════ */
.chat-taskcard{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 14px;
    border:1px solid rgba(107,90,58,.25);border-left:3px solid #2D6A24;border-radius:10px;
    background:rgba(45,106,36,.06);cursor:pointer;transition:background .12s;min-width:220px}
.chat-taskcard:hover{background:rgba(45,106,36,.12)}
.ctc-ico{font-size:1.05rem;flex:none}
.ctc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ctc-title{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctc-meta{font-size:.75rem;opacity:.65}
.ctc-go{color:#A8863F;font-weight:700}
body[data-gtheme="dark"] .chat-taskcard{background:rgba(96,158,86,.1);border-color:rgba(221,203,164,.22);border-left-color:#609e56}
body[data-gtheme="dark"] .chat-taskcard:hover{background:rgba(96,158,86,.18)}
.tasks-share-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.tasks-share-row{text-align:left;border:1px solid rgba(107,90,58,.2);border-radius:10px;padding:10px 14px;
    background:none;cursor:pointer;font-size:.9rem;font-weight:600;color:inherit;transition:background .12s}
.tasks-share-row:hover{background:rgba(168,134,63,.08)}
body[data-gtheme="dark"] .tasks-share-row{border-color:rgba(221,203,164,.2)}

/* Confirmations LECLAUDE stylées (remplacent les confirm() natifs) */
.lc-confirm-warning{line-height:1.6}
.lc-confirm-danger{color:#c62828;font-weight:700}
.lc-btn-danger{background:#c62828!important;color:#fff!important;border:none!important}

/* Outils de message au SURVOL (desktop) — plus besoin de cliquer la bulle,
   indispensable pour les images/vocaux dont le clic a déjà un rôle */
@media (hover:hover){
    .chat-msg:hover .chat-msg-tools{display:inline-flex}
}
/* Vocal : bouton 📝 + transcription privée */
.chat-att-voice{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-transcribe-btn{flex:none}
.chat-transcript{flex-basis:100%;font-size:.85rem;font-style:italic;line-height:1.5;
    background:rgba(168,134,63,.08);border-left:3px solid #A8863F;border-radius:8px;padding:8px 12px;margin-top:4px}
.chat-transcript .ct-note{display:block;font-size:.7rem;font-style:normal;opacity:.55;margin-top:4px}
body[data-gtheme="dark"] .chat-transcript{background:rgba(221,203,164,.08);border-left-color:#D9BC77}

/* ══════════ SUPPORT IT : demandes + stats ══════════ */
#support-view{max-width:1000px;margin:0 auto;padding:18px 20px 60px;width:100%}
.sup-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.sup-filters{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sup-filters input{flex:1;min-width:200px;padding:9px 12px;border-radius:10px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit}
.sup-list{display:flex;flex-direction:column;gap:8px}
.sup-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(107,90,58,.16);
    border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .1s, box-shadow .1s}
.sup-row:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(60,48,25,.1)}
.sup-row.sup-done{opacity:.6}
.sup-badge{font-size:1.1rem;flex:none}
.sup-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sup-msg{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-meta{font-size:.78rem;color:#8a7a5c}
.sup-status{font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 10px;background:#EFE7D4;color:#8a7a5c;white-space:nowrap}
.sup-status.on{background:rgba(179,38,30,.13);color:#b3261e}
.sup-d-meta{color:#8a7a5c;font-size:.85rem;margin:4px 0 10px}
.sup-d-msg{background:rgba(168,134,63,.07);border-radius:10px;padding:12px 14px;line-height:1.55;margin-bottom:12px;white-space:pre-wrap}
.sup-comments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:240px;overflow-y:auto}
.sup-comment{background:#F5F0E4;border-radius:10px;padding:9px 12px;font-size:.88rem;line-height:1.5}
.sup-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
@media(max-width:620px){.sup-stats-grid{grid-template-columns:1fr 1fr}}
.sup-stat{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:16px;text-align:center}
.sup-stat-n{font-size:1.8rem;font-weight:800}
.sup-stat-l{font-size:.78rem;color:#8a7a5c;text-transform:uppercase;letter-spacing:.06em}
.sup-charts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:720px){.sup-charts{grid-template-columns:1fr}}
.sup-charts h3{font-size:.95rem;margin:0 0 10px}
.sup-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.82rem}
.sup-bar-name{width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.sup-bar{flex:1;height:8px;border-radius:6px;background:#EFE7D4;overflow:hidden}
.sup-bar i{display:block;height:100%;background:#A8863F}
.sup-bar-n{width:30px;text-align:right;font-weight:700}
body[data-gtheme="dark"] .sup-row,body[data-gtheme="dark"] .sup-stat{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .sup-msg,body[data-gtheme="dark"] .sup-stat-n{color:#EFE7D6}
body[data-gtheme="dark"] .sup-meta,body[data-gtheme="dark"] .sup-stat-l,body[data-gtheme="dark"] .sup-d-meta{color:#b8a985}
body[data-gtheme="dark"] .sup-status{background:#2E271E;color:#b8a985}
body[data-gtheme="dark"] .sup-status.on{background:rgba(255,138,128,.16);color:#ff8a80}
body[data-gtheme="dark"] .sup-comment{background:#2E271E;color:#EFE7D6}
body[data-gtheme="dark"] .sup-d-msg{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .sup-bar{background:#2E271E}
body[data-gtheme="dark"] .sup-bar i{background:#D9BC77}
body[data-gtheme="dark"] .sup-charts h3,
body[data-gtheme="dark"] .sup-bar-name,
body[data-gtheme="dark"] .sup-bar-n{color:#EFE7D6}

/* ── Support IT : prise en charge, états, conversation, traduction ── */
/* États : accent à gauche + pastille de statut colorée (« change de couleur ») */
.sup-row{border-left:3px solid transparent}
.sup-row.st-on{border-left-color:#b3261e}
.sup-row.st-prog{border-left-color:#c8891f;background:#FBF6EA}
.sup-row.st-done{border-left-color:#2d7d46}
.sup-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.sup-status.prog{background:rgba(200,137,31,.16);color:#a86a12}
.sup-status.done{background:rgba(45,125,70,.15);color:#2d7d46}
/* Avatars (liste + fil) */
.sup-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.sup-av img{width:100%;height:100%;object-fit:cover}
.sup-av-l{background:#A8863F;color:#fff;font-size:.72rem;font-weight:800}
/* Puce « responsable » dans une ligne */
.sup-assignee{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:.78rem;font-weight:700;color:#a86a12;background:rgba(200,137,31,.1);border-radius:999px;padding:2px 9px 2px 3px;width:fit-content}
.sup-assignee .sup-av{width:19px;height:19px}
.sup-assignee .sup-av-l{font-size:.62rem}
/* Bouton « Je m'en occupe » / « Relais » — pastille contour discrète
   (ne doit pas voler la vedette au statut ni ressembler au CTA principal). */
.sup-claim-btn{border:1px solid rgba(168,134,63,.5);cursor:pointer;font-size:.76rem;font-weight:800;border-radius:999px;padding:5px 12px;background:transparent;color:#8a6d1f;white-space:nowrap}
.sup-claim-btn:hover{background:rgba(168,134,63,.12)}
.sup-claim-btn.is-relay{border-color:rgba(200,137,31,.5);color:#a86a12}
.sup-claim-btn.is-relay:hover{background:rgba(200,137,31,.14)}
/* Détail : en-tête + bouton traduire */
.sup-d-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sup-d-top h3{margin:0;font-size:1.05rem}
.sup-d-link{display:inline-block;margin:6px 8px 0 0;font-size:.85rem;padding:6px 12px}
.sup-tr-btn{border:1px solid rgba(107,90,58,.3);background:transparent;color:#8a7a5c;cursor:pointer;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 12px;white-space:nowrap}
.sup-tr-btn:hover{background:rgba(168,134,63,.1)}
.sup-tr-btn.on{background:rgba(168,134,63,.16);color:#8a6d1f;border-color:transparent}
/* Fil de conversation à bulles */
.sup-thread{display:flex;flex-direction:column;gap:12px;margin:8px 0 14px;max-height:46vh;overflow-y:auto;padding:6px 2px}
.sup-bubble-row{display:flex;gap:8px;align-items:flex-end}
.sup-bubble-row.me{flex-direction:row-reverse}
.sup-bubble{max-width:78%;background:#F5F0E4;border-radius:14px;padding:8px 12px}
.sup-bubble-row.me .sup-bubble{background:rgba(168,134,63,.16)}
.sup-bubble-head{font-size:.72rem;font-weight:800;color:#8a7a5c;margin-bottom:2px;display:flex;gap:8px;align-items:baseline}
.sup-bubble-row.me .sup-bubble-head{flex-direction:row-reverse}
.sup-bubble-time{font-weight:600;opacity:.7;font-size:.68rem}
.sup-bubble-text{font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:#2B2620}
/* Zone de réponse */
.sup-reply{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.sup-reply textarea{flex:1;resize:vertical;min-height:44px}
.sup-reply .btn{padding:10px 16px;font-size:1.05rem}
.sup-d-actions{justify-content:space-between}
.sup-d-actions-l{display:inline-flex;gap:8px;flex-wrap:wrap}
/* Dark */
body[data-gtheme="dark"] .sup-row.st-prog{background:#26201A}
body[data-gtheme="dark"] .sup-status.prog{background:rgba(217,188,119,.16);color:#E6C879}
body[data-gtheme="dark"] .sup-status.done{background:rgba(127,196,122,.16);color:#8fd08a}
body[data-gtheme="dark"] .sup-assignee{color:#E6C879;background:rgba(217,188,119,.12)}
body[data-gtheme="dark"] .sup-claim-btn{border-color:rgba(221,203,164,.4);color:#DDCBA4}
body[data-gtheme="dark"] .sup-claim-btn:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .sup-claim-btn.is-relay{border-color:rgba(217,188,119,.5);color:#E6C879}
body[data-gtheme="dark"] .sup-tr-btn{color:#b8a985;border-color:rgba(221,203,164,.28)}
body[data-gtheme="dark"] .sup-tr-btn.on{background:rgba(221,203,164,.16);color:#DDCBA4}
body[data-gtheme="dark"] .sup-bubble{background:#2E271E}
body[data-gtheme="dark"] .sup-bubble-row.me .sup-bubble{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .sup-bubble-text{color:#EFE7D6}
body[data-gtheme="dark"] .sup-bubble-head{color:#b8a985}

/* ══════════ PALANTIR : services + alertes + machines ══════════ */
#palantir-view{max-width:1100px;margin:0 auto;padding:18px 20px 60px;width:100%}
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pal-card{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.pal-card.pal-bad{border-color:rgba(179,38,30,.5);box-shadow:inset 3px 0 0 #b3261e}
.pal-card-head{display:flex;align-items:center;gap:8px;font-size:.95rem}
.pal-spark{width:60px;height:20px;margin-left:auto}
.pal-spark polyline{fill:none;stroke:#A8863F;stroke-width:1.5}
.pal-metrics{display:flex;gap:14px;font-size:.82rem;font-weight:600;flex-wrap:wrap}
.pal-metrics .pal-err{color:#b3261e}
.pal-meta{font-size:.76rem;color:#8a7a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-meta-full{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;margin:2px 0}
body[data-gtheme="dark"] .pal-card{background:#241F19;border-color:rgba(221,203,164,.16);color:#EFE7D6}
body[data-gtheme="dark"] .pal-meta{color:#b8a985}
body[data-gtheme="dark"] .pal-spark polyline{stroke:#D9BC77}

/* ══════════ Étiquettes QR — AVERY 22805 (24 × 1.5"×1.5", Letter) ══════════ */
#averyPrintSheet{display:none}
@media print{
    body *{visibility:hidden !important}
    body{background:#fff !important;margin:0 !important;padding:0 !important}
    #averyPrintSheet,#averyPrintSheet *{visibility:visible !important}
    #averyPrintSheet{display:grid !important;
        grid-template-columns:repeat(4,1.8125in);grid-template-rows:repeat(6,1.6875in);gap:0;
        padding-top:.4375in;padding-left:.625in;
        position:fixed;top:0;left:0;width:8.5in;height:11in;background:#fff;z-index:99999}
    .avery-label{width:1.8125in;height:1.6875in;display:flex;flex-direction:column;align-items:center;
        justify-content:center;text-align:center;overflow:hidden;box-sizing:border-box;page-break-inside:avoid}
    .avery-qr img,.avery-qr canvas{width:76px !important;height:76px !important}
    .avery-name{margin-top:2px;font-family:Arial,sans-serif;font-size:6.5pt;font-weight:700;color:#000;
        line-height:1.1;word-break:break-all;max-width:1.3in;overflow:hidden}
    @page{size:letter;margin:0}
}

/* Étiquettes : rangées de sélection + grille de placement (feuille entamée) */
.pal-lbl-row{display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.pal-lbl-row .pal-lbl-name{flex:1;font-weight:600;text-align:left}
.pal-place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.pal-place-cell{aspect-ratio:1.07;border:1.5px dashed rgba(107,90,58,.35);border-radius:8px;background:none;
    cursor:pointer;font-size:.68rem;font-weight:700;color:inherit;overflow:hidden;padding:2px;transition:all .12s}
.pal-place-cell .pal-place-num{opacity:.35;font-size:.8rem}
.pal-place-cell.filled{border-style:solid;border-color:#2D6A24;background:rgba(45,106,36,.1);color:#2D6A24}
.pal-place-cell.blocked{border-style:solid;border-color:rgba(179,38,30,.5);background:rgba(179,38,30,.08);color:#b3261e;font-size:1rem}
.pal-place-cell:hover{transform:scale(1.04)}
body[data-gtheme="dark"] .pal-place-cell{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .pal-place-cell.filled{border-color:#609e56;background:rgba(96,158,86,.15);color:#9fd48f}
body[data-gtheme="dark"] .pal-place-cell.blocked{border-color:#ff8a80;background:rgba(255,138,128,.12);color:#ff8a80}

/* Notes : vue lecture + éditeur */
.note-view-date{font-size:.78rem;color:#8a7a5c;margin:-6px 0 14px}
#noteViewTitle{color:#33302a}
.note-view-body{line-height:1.7;padding:4px 2px;color:#33302a}
.note-view-body h2,.note-view-body h3{margin:14px 0 6px}
.note-view-body ul{padding-left:22px}
.note-view-body blockquote{border-left:3px solid #A8863F;margin:8px 0;padding:4px 12px;opacity:.85}
.note-view-body code{background:rgba(168,134,63,.12);border-radius:4px;padding:1px 5px}
/* Liens : or Chanv (le bleu par défaut jure avec le thème) */
.note-view-body a{color:#8a6d2f;text-decoration:underline;text-underline-offset:2px}
.note-view-body a:hover{color:#A8863F}
.note-toolbar{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.note-toolbar button{border:1px solid rgba(107,90,58,.25);background:none;border-radius:8px;
    min-width:32px;height:30px;padding:0 10px;cursor:pointer;font-size:.85rem;color:inherit;transition:all .12s}
.note-toolbar button:hover{border-color:#A8863F;color:#A8863F}
body[data-gtheme="dark"] .note-view-date{color:#b8a985}
body[data-gtheme="dark"] .note-toolbar button{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .note-view-body code{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] #noteViewTitle{color:rgba(255,255,255,.95)}
body[data-gtheme="dark"] .note-view-body{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .note-view-body a{color:#DDCBA4}
body[data-gtheme="dark"] .note-view-body a:hover{color:#EBD9B4}

/* Chat : recherche de conversations + bande mobile de navigation */
.chat-search-row{padding:0 12px 10px}
.chat-search-row input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;
    border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-size:.9rem}
.chat-conv-strip{display:none}
@media (max-width:860px){
    body.shell-on .chat-view.show-pane .chat-conv-strip{display:flex;gap:4px;overflow-x:auto;
        padding:6px 10px;border-bottom:1px solid rgba(107,90,58,.15);-webkit-overflow-scrolling:touch;
        scrollbar-width:none;flex:none}
    .chat-conv-strip::-webkit-scrollbar{display:none}
    .chat-strip-item{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;
        background:none;padding:4px 6px;border-radius:10px;min-width:52px;cursor:pointer;position:relative;opacity:.75}
    .chat-strip-item.on{opacity:1;background:rgba(168,134,63,.14)}
    .chat-strip-item.unread::after{content:'';position:absolute;top:3px;right:8px;width:8px;height:8px;
        border-radius:50%;background:#b3261e}
    .chat-strip-item .chat-conv-avatar,.chat-strip-item img{width:34px !important;height:34px !important}
    .chat-strip-name{font-size:.62rem;font-weight:600;color:inherit;white-space:nowrap}
}
body[data-gtheme="dark"] .chat-search-row input{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .chat-conv-strip{border-bottom-color:rgba(221,203,164,.15)}

/* Accès par application (Gestion → Utilisateurs) */
.app-roles-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px}
.app-role-col{background:#fff;border:1px solid rgba(107,90,58,.18);border-radius:14px;padding:12px}
.app-role-col-off{opacity:.65}
.app-role-head{font-weight:800;font-size:.85rem;border-bottom:1px solid rgba(107,90,58,.15);padding-bottom:8px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
/* La colonne « Non visible » liste tout l'annuaire depuis qu'elle ne ment
   plus : elle défile au lieu d'étirer la planche sur trois écrans. */
.app-role-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;max-height:320px;overflow-y:auto;align-content:flex-start}
.app-role-chip{background:rgba(168,134,63,.12);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.app-role-chip button{border:none;background:none;cursor:pointer;font-size:.72rem;opacity:.55;color:inherit}
.app-role-chip button:hover{opacity:1;color:#b3261e}
.app-role-empty{opacity:.4;font-size:.85rem}
.app-role-add{position:relative;margin-top:10px}
.app-role-add input{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px dashed rgba(107,90,58,.35);background:transparent;color:inherit;font-size:.82rem}
.app-role-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid rgba(107,90,58,.25);border-radius:10px;box-shadow:0 10px 24px rgba(60,48,25,.15);z-index:30;overflow:hidden}
.app-role-suggest button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 12px;cursor:pointer;font-size:.85rem;color:inherit}
.app-role-suggest button:hover{background:rgba(168,134,63,.1)}
.app-role-suggest small{opacity:.5;margin-left:6px}
body[data-gtheme="dark"] .app-role-col,body[data-gtheme="dark"] .app-role-suggest{background:#241F19;border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .app-role-chip{background:rgba(221,203,164,.14)}

/* Drag & drop des puces de rôle entre colonnes */
.app-role-chip[draggable="true"]{cursor:grab}
.app-role-chip.dragging{opacity:.45;cursor:grabbing}
.app-roles-columns.drag-on .app-role-col{outline:2px dashed rgba(168,134,63,.35);outline-offset:-2px}
.app-role-col.drop-ready{outline:2px solid rgba(168,134,63,.85);outline-offset:-2px;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .app-roles-columns.drag-on .app-role-col{outline-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .app-role-col.drop-ready{outline-color:rgba(221,203,164,.8);background:rgba(221,203,164,.08)}

/* ── Page Note (lecture/édition en place, plus de modal) ── */
.note-page{max-width:820px;margin:0 auto;padding:4px 2px 40px}
.note-page-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;
    padding-bottom:14px;border-bottom:1px solid rgba(107,90,58,.15)}
.note-page-bar .btn{margin:0}
.note-page-spacer{flex:1}
.note-page .note-view-date{margin:0;white-space:nowrap}
.note-read h1{font-size:1.5rem;line-height:1.3;margin:0 0 14px;text-wrap:balance}
.note-read .note-view-body{max-width:72ch;font-size:1.02rem}
.note-edit textarea{width:100%;box-sizing:border-box;min-height:62vh;resize:vertical;
    line-height:1.6;font-size:.98rem;padding:14px;border-radius:12px}
.note-edit-preview{min-height:62vh;border:1px solid rgba(107,90,58,.2);border-radius:12px;
    padding:14px;box-sizing:border-box;max-width:none}
body[data-gtheme="dark"] .note-page-bar{border-bottom-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .note-edit-preview{border-color:rgba(221,203,164,.2)}

/* Pièces jointes des notes (📎 réutilise GandalfComposer) */
.note-edit-att{margin-top:12px}
.note-view-att{margin-top:20px}
.note-view-att:empty{display:none}
.note-view-att .gc-atts{margin-top:0}

/* Confirmation stylée des notes (pas de confirm() natif) */
.note-confirm-overlay{position:fixed;inset:0;background:rgba(30,25,15,.45);z-index:10060;
    display:grid;place-items:center;padding:20px}
.note-confirm-box{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;
    box-shadow:0 18px 50px rgba(30,25,15,.3)}
.note-confirm-msg{font-weight:600;line-height:1.5;margin-bottom:18px}
.note-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.note-confirm-actions .btn{margin:0}
body[data-gtheme="dark"] .note-confirm-box{background:#2a241c;color:#EDE4D2}

/* Palette de réactions étendue (+) des fils */
.gc-react-palette-full{max-width:340px;max-height:220px;overflow-y:auto;flex-wrap:wrap;display:flex}

/* Sections de la liste de conversations + épingle */
.chat-convs-sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    opacity:.5;padding:12px 14px 4px;user-select:none}
.chat-conv-item{position:relative}
.chat-conv-pin{position:absolute;right:8px;bottom:6px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1)}
.chat-conv-item:hover .chat-conv-pin{opacity:.6}
@media (hover:none){.chat-conv-pin{opacity:.5}} /* tactile : épingle atteignable au doigt */
.chat-conv-pin:hover{opacity:1!important}
.chat-conv-pin.on{opacity:.9;filter:none}

/* Épingle personnelle des tâches */
.tasks-card{position:relative}
.tasks-card-pin{position:absolute;top:6px;right:8px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1);z-index:2}
.tasks-card:hover .tasks-card-pin{opacity:.55}
.tasks-card-pin:hover{opacity:1!important}
.tasks-card-pin.on{opacity:.95;filter:none}
.tasks-card-pinned{border-left:3px solid #A8863F}
.tasks-group-pinned{color:#A8863F}

/* Séparateur personnes | salons dans la bande mobile */
.chat-strip-sep{flex:none;width:5px;height:5px;border-radius:1px;transform:rotate(45deg);
    background:#A8863F;opacity:.55;margin:0 8px;align-self:center}

/* =====================================================================
   Tâches — passe RESPONSIVE mobile (projets, listes, cartes, hall)
   ===================================================================== */
@media (max-width: 640px) {
    /* La zone respire moins mais chaque pixel sert au contenu */
    .tasks-list{padding:10px 10px 90px}
    .tasks-header{padding:10px 12px;gap:10px}
    /* En-tête compact : le bouton Duplications se réduit à l'icône 🔁 sur mobile */
    .tasks-dupmgr-btn span{display:none}
    .tasks-dupmgr-btn{padding:7px 11px}

    /* Fil d'Ariane : une ligne défilable au doigt, jamais d'empilement */
    .tasks-crumb{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:2px}
    .tasks-crumb::-webkit-scrollbar{display:none}
    .tasks-crumb>*{flex-shrink:0}

    /* Grille projets : 2 colonnes compactes */
    .tasks-proj-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .tasks-proj-card{padding:11px 12px 9px;height:104px}
    .tasks-proj-card-archived{height:auto;min-height:84px}
    .tpc-desc{display:none} /* la description attend le tap — le nom prime */

    /* En-tête de liste : le nom garde sa ligne, actions en dessous */
    .tasks-list-head{flex-wrap:wrap;gap:8px;padding:10px 12px}
    .tasks-list-head .tlh-name{flex:1 1 100%;font-size:14px}
    .tasks-list-head .tlh-prog{max-width:none;flex:1;min-width:50px}
    .tasks-list-body{padding:6px 8px 10px}

    /* Cartes : plus denses, avatars discrets */
    .tasks-card{padding:10px 10px;gap:9px}
    .tasks-card-title{font-size:14px}
    .tasks-card-desc{font-size:12px}
    .tasks-card-assignees{transform:scale(.88);transform-origin:top right}
    .tasks-card-pin{opacity:.4} /* pas de survol au doigt : l'épingle reste accessible */

    /* Hall : cartes-outils sur UNE colonne pleine largeur (lisible), hero compact */
    .hall-grid{grid-template-columns:1fr;gap:10px}
    .hall-hero{padding:18px 14px}
    .hall-name{font-size:1.25rem}

    /* Bascule Listes/Tableau + titre : empilables sans déborder */
    .tasks-section-title{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .tasks-viewtoggle{margin-left:0}

    /* Kanban : colonnes défilables horizontalement d'un doigt */
    .tasks-kanban-wrap{-webkit-overflow-scrolling:touch}
}
@media (max-width: 400px) {
    .tasks-proj-grid{grid-template-columns:1fr}
}

/* Palantir — carte Budget GCP (bas des moniteurs) */
.pal-budget-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    opacity:.55;margin:18px 2px 8px}
.pal-budget-nums{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px;flex-wrap:wrap}
.pal-budget-cost{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.pal-budget-of{opacity:.55;font-size:.85rem}
.pal-budget-pct{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.pal-budget-bar{height:7px;border-radius:99px;background:rgba(40,34,24,.12);overflow:hidden}
.pal-budget-bar i{display:block;height:100%;border-radius:99px;background:#6E8A63}
.pal-budget-warn .pal-budget-bar i{background:#BC7E29}
.pal-budget-warn .pal-budget-pct{color:#BC7E29}
.pal-budget-crit .pal-budget-bar i{background:#B85443}
.pal-budget-crit .pal-budget-pct{color:#B85443}
body[data-gtheme="dark"] .pal-budget-bar{background:rgba(221,203,164,.16)}

/* =====================================================================
   DARK MODE — passe lisibilité : scrollbars + textes sombres sur fond sombre
   ===================================================================== */
/* Scrollbars : la barre blanche jurait sur le fond sombre */
body[data-gtheme="dark"]{scrollbar-color:rgba(221,203,164,.28) transparent}
body[data-gtheme="dark"] *{scrollbar-color:rgba(221,203,164,.28) transparent}
body[data-gtheme="dark"] ::-webkit-scrollbar{width:9px;height:9px}
body[data-gtheme="dark"] ::-webkit-scrollbar-track{background:transparent}
body[data-gtheme="dark"] ::-webkit-scrollbar-thumb{background:rgba(221,203,164,.24);border-radius:99px}
body[data-gtheme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(221,203,164,.4)}

/* Textes codés sombres → encre claire quand le fond devient sombre */
body[data-gtheme="dark"] .tasks-section-title{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .tasks-proj-chip{color:rgba(237,228,210,.85);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-proj-chip.on{color:#f2ead8}
body[data-gtheme="dark"] .chat-quote{color:rgba(237,228,210,.8)}
body[data-gtheme="dark"] .mt-detail{color:rgba(237,228,210,.88)}
body[data-gtheme="dark"] .note-toolbar button{color:rgba(237,228,210,.85);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tlh-count{color:rgba(237,228,210,.7)}
body[data-gtheme="dark"] .tasks-crumb button{color:rgba(237,228,210,.8)}

/* Palantir — fenêtre détail (clic sur une carte) */
.pal-clickable{cursor:pointer;transition:transform .1s,box-shadow .12s}
.pal-clickable:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(40,34,24,.14)}
.pal-detail-overlay{position:fixed;inset:0;background:rgba(30,25,15,.5);z-index:10060;
    display:grid;place-items:center;padding:16px}
.pal-detail-box{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:86vh;
    display:flex;flex-direction:column;box-shadow:0 22px 60px rgba(30,25,15,.35)}
.pal-detail-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
    border-bottom:1px solid rgba(107,90,58,.15);font-size:1.05rem}
.pal-detail-x{margin-left:auto;border:none;background:none;cursor:pointer;font-size:15px;opacity:.5;padding:4px}
.pal-detail-x:hover{opacity:1}
.pal-detail-body{padding:14px 18px 18px;overflow-y:auto}
.pal-detail-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin-bottom:10px;opacity:.85}
.pal-detail-chart{display:flex;align-items:flex-end;gap:2px;height:120px;
    border-bottom:1px solid rgba(107,90,58,.2);padding-bottom:1px;margin-bottom:14px}
.pal-detail-chart i{flex:1;min-width:2px;background:rgba(168,134,63,.45);border-radius:2px 2px 0 0}
.pal-detail-chart i:hover{background:#A8863F}
.pal-detail-chart i.peak{background:#B85443}
.pal-detail-table-wrap{overflow-x:auto}
.pal-detail-table{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
.pal-detail-table th{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(107,90,58,.2);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
.pal-detail-table td{padding:5px 8px;border-bottom:1px solid rgba(107,90,58,.08)}
.pal-detail-table tr.peak td{background:rgba(184,84,67,.09);font-weight:700}
body[data-gtheme="dark"] .pal-detail-box{background:#26221b;color:#EDE4D2}
body[data-gtheme="dark"] .pal-detail-head{border-bottom-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .pal-detail-table th{border-bottom-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .pal-detail-table td{border-bottom-color:rgba(221,203,164,.08)}
/* --- Fenêtre de détail enrichie (statut, projection, tendances, seuil) --- */
.pal-detail-status{border-radius:12px;padding:12px 14px;margin-bottom:12px;border:1px solid rgba(107,90,58,.18);
    border-left-width:4px;background:rgba(168,134,63,.06)}
.pal-detail-status .pds-big{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.pal-detail-status .pds-big small{font-size:.9rem;font-weight:600;opacity:.6}
.pal-detail-status .pds-sub{font-size:.85rem;opacity:.8;margin-top:2px}
.pal-detail-status .pds-bar{height:7px;border-radius:4px;background:rgba(107,90,58,.15);margin-top:9px;overflow:hidden}
.pal-detail-status .pds-bar span{display:block;height:100%;background:currentColor;opacity:.75;border-radius:4px}
.pal-tone-ok{border-left-color:#2D6A24;color:#2D6A24}
.pal-tone-mid{border-left-color:#A8863F;color:#8a6d2f}
.pal-tone-warn{border-left-color:#d98a2b;color:#b5701a}
.pal-tone-crit{border-left-color:#B85443;color:#a8412f}
.pal-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pal-detail-kpis{margin-bottom:12px}
.pal-chip{font-size:.78rem;padding:4px 10px;border-radius:999px;background:rgba(168,134,63,.1);
    border:1px solid rgba(107,90,58,.15);font-variant-numeric:tabular-nums;color:inherit}
.pal-chip b{font-weight:750}
.pal-chip.up,.pal-chip.bad{background:rgba(184,84,67,.12);border-color:rgba(184,84,67,.3);color:#a8412f}
.pal-chip.down,.pal-chip.good{background:rgba(45,106,36,.12);border-color:rgba(45,106,36,.3);color:#2D6A24}
.pal-detail-proj{border:1px dashed rgba(168,134,63,.4);border-radius:12px;padding:11px 13px;margin-bottom:12px;background:rgba(168,134,63,.05)}
.pal-detail-proj .pdp-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.65;margin-bottom:7px}
.pal-detail-graninfo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pal-gran-toggle{display:inline-flex;border:1px solid rgba(107,90,58,.25);border-radius:8px;overflow:hidden}
.pal-gran-toggle button{border:none;background:none;cursor:pointer;font:inherit;font-size:.78rem;padding:4px 12px;color:inherit;opacity:.7}
.pal-gran-toggle button.on{background:rgba(168,134,63,.85);color:#2b2415;opacity:1;font-weight:650}
.pal-thr-legend{font-size:.75rem;opacity:.7}
.pal-detail-chart{position:relative}
.pal-thr-line{position:absolute;left:0;right:0;height:0;border-top:2px dashed rgba(184,84,67,.7);pointer-events:none;z-index:1}
.pal-detail-chart i.pal-bar-ok{background:rgba(45,106,36,.5)}
.pal-detail-chart i.pal-bar-mid{background:rgba(168,134,63,.6)}
.pal-detail-chart i.pal-bar-warn{background:#d98a2b}
.pal-detail-chart i.pal-bar-crit,.pal-detail-chart i.pal-bar-peak{background:#B85443}
.pal-detail-chart i:hover{filter:brightness(1.15)}
body[data-gtheme="dark"] .pal-detail-status{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .pal-tone-ok{color:#9fd48f}
body[data-gtheme="dark"] .pal-tone-mid{color:#DDCBA4}
body[data-gtheme="dark"] .pal-tone-warn{color:#e0a03a}
body[data-gtheme="dark"] .pal-tone-crit{color:#ff8a80}
body[data-gtheme="dark"] .pal-chip{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .pal-chip.up,body[data-gtheme="dark"] .pal-chip.bad{background:rgba(255,138,128,.14);border-color:rgba(255,138,128,.35);color:#ff8a80}
body[data-gtheme="dark"] .pal-chip.down,body[data-gtheme="dark"] .pal-chip.good{background:rgba(96,158,86,.15);border-color:rgba(96,158,86,.35);color:#9fd48f}
body[data-gtheme="dark"] .pal-detail-proj{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .pal-gran-toggle{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .pal-gran-toggle button.on{background:rgba(221,203,164,.85);color:#221e19}
body[data-gtheme="dark"] .pal-detail-chart i.pal-bar-ok{background:rgba(96,158,86,.5)}
/* --- Bandeau « nouvelle version disponible » (onglets ouverts) --- */
.gv-update-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99999;
    display:flex;align-items:center;gap:14px;padding:11px 13px 11px 20px;border-radius:999px;
    background:#33302a;color:#fff;box-shadow:0 10px 32px rgba(0,0,0,.35);font-size:.9rem;
    max-width:calc(100vw - 24px);animation:gvFadeIn .3s ease}
.gv-update-banner button{border:none;cursor:pointer;background:#DDCBA4;color:#2b2415;font-weight:750;
    border-radius:999px;padding:8px 18px;font-size:.85rem;white-space:nowrap;flex-shrink:0}
.gv-update-banner button:hover{background:#EBD9B4}
@keyframes gvFadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.gv-update-banner{left:12px;right:12px;transform:none;bottom:12px;border-radius:14px;justify-content:space-between}}

/* Menu ⋯ des messages (façon Basecamp) : flottant, zéro reflow */
.chat-msg-dots{border:none;background:none;cursor:pointer;font-size:15px;line-height:1;
    padding:1px 6px;border-radius:7px;color:inherit;opacity:0;transition:opacity .12s;vertical-align:middle}
.chat-msg:hover .chat-msg-dots{opacity:.55}
.chat-msg-dots:hover{opacity:1!important;background:rgba(168,134,63,.15)}
.chat-msg-line{display:flex;align-items:flex-start;gap:6px}
.chat-msg-line>.chat-msg-dots{margin-top:4px}
@media (hover:none){.chat-msg-dots{opacity:.75}} /* tactile : toujours BIEN visible (pas de survol au doigt) */
.chat-msg-menu{position:fixed;z-index:10070;background:#fff;border:1px solid rgba(107,90,58,.2);
    border-radius:14px;box-shadow:0 14px 40px rgba(30,25,15,.25);padding:8px;min-width:190px}
.cmm-reacts{display:flex;gap:2px;padding:2px 2px 8px;border-bottom:1px solid rgba(107,90,58,.14);margin-bottom:6px}
.cmm-reacts button{border:none;background:none;font-size:17px;padding:4px;border-radius:8px;cursor:pointer;line-height:1}
.cmm-reacts button:hover{background:rgba(168,134,63,.15);transform:scale(1.15)}
.cmm-item{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
    font-size:13.5px;padding:8px 10px;border-radius:9px;color:inherit;font-family:inherit}
.cmm-item:hover{background:rgba(168,134,63,.12)}
.cmm-danger{color:#b3261e}
body[data-gtheme="dark"] .chat-msg-menu{background:#2b2823;border-color:rgba(221,203,164,.2);color:#EDE4D2}
body[data-gtheme="dark"] .cmm-reacts{border-bottom-color:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .cmm-danger{color:#ff8a80}

/* Popover « qui a réagi » */
.chat-react-who{position:fixed;z-index:10070;background:#fff;border:1px solid rgba(107,90,58,.2);
    border-radius:12px;box-shadow:0 10px 28px rgba(30,25,15,.22);padding:8px 12px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:280px;font-size:13px}
.crw-emoji{font-size:17px}
.crw-name{background:rgba(168,134,63,.12);border-radius:999px;padding:2px 9px;font-weight:600}
body[data-gtheme="dark"] .chat-react-who{background:#2b2823;border-color:rgba(221,203,164,.2);color:#EDE4D2}
body[data-gtheme="dark"] .crw-name{background:rgba(221,203,164,.15)}


/* Dark mode — 2e passe lisibilité (heures, méta, séparateurs, bande convs) */
body[data-gtheme="dark"] .chat-msg-time{color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .chat-msg-dots{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .chat-msg:hover .chat-msg-dots{opacity:.8}
body[data-gtheme="dark"] .chat-day-sep{color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .chat-strip-name{color:rgba(255,255,255,.72)}
body[data-gtheme="dark"] .chat-conv-time,body[data-gtheme="dark"] .chat-conv-preview{color:rgba(255,255,255,.62)}
body[data-gtheme="dark"] .chat-pane-subtitle{color:rgba(255,255,255,.62)}
body[data-gtheme="dark"] .chat-msg-edited{color:rgba(255,255,255,.55)}
body[data-gtheme="dark"] .tasks-comment-date,body[data-gtheme="dark"] .note-date,
body[data-gtheme="dark"] .tbr-meta,body[data-gtheme="dark"] .pal-meta,
body[data-gtheme="dark"] .sup-meta{color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .tasks-card-desc{color:rgba(255,255,255,.68)}
/* Deux règles sombres existent pour ce sélecteur (l'autre plus haut) : les
   garder ALIGNÉES, sinon la dernière chargée gagne en silence. */
body[data-gtheme="dark"] .tasks-group-label{color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-group-label .tgl-n{color:rgba(221,203,164,.75)}

/* Palantir — environnement indisponible (accès restreint) */
.pal-unavail{padding:22px 18px;text-align:center;color:var(--gs-ink-faint,#8a7a5c);font-size:.9rem;
    background:rgba(168,134,63,.06);border:1px dashed rgba(168,134,63,.35);border-radius:12px;margin:4px 0}
body[data-gtheme="dark"] .pal-unavail{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.3);color:rgba(255,255,255,.55)}

/* 🔁 Duplication — formulaire à la carte */
.dup-modal .dup-body{display:flex;flex-direction:column;gap:14px;max-height:62vh;overflow-y:auto;padding:2px 2px 4px}
.dup-field{display:flex;flex-direction:column;gap:6px}
.dup-field>label{font-weight:650;font-size:.9rem}
.dup-field>label small{font-weight:400;opacity:.55;font-size:.78rem}
.dup-field select,.dup-field input[type=text],.dup-field input[type=date],#dupFixedDate{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-family:inherit;font-size:.9rem}
.dup-radios{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem}
.dup-radios label{display:inline-flex;align-items:center;gap:5px;font-weight:500;cursor:pointer}
.dup-check{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:500;cursor:pointer}
.dup-adddate{align-self:flex-start;border:1px dashed rgba(168,134,63,.4);background:none;color:inherit;border-radius:8px;padding:5px 11px;cursor:pointer;font-size:.82rem}
.dup-adddate:hover{background:rgba(168,134,63,.08)}
.dup-date-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.dup-date-row input{flex:1}
.dup-x{border:none;background:none;cursor:pointer;opacity:.5;font-size:.85rem;padding:2px 6px}
.dup-x:hover{opacity:1;color:#b3261e}
.dup-hint{font-size:.72rem;opacity:.55;font-family:ui-monospace,'SF Mono',monospace}
.dup-namepreview{font-size:.82rem;color:#A8863F;font-weight:600;margin-top:3px}
.dup-summary{background:rgba(168,134,63,.09);border-radius:10px;padding:11px 13px;font-size:.85rem}
.dup-summary:empty{display:none}
.dup-preview-list{margin-top:6px;font-size:.8rem;opacity:.85;max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dup-due{opacity:.6;font-size:.75rem}
body[data-gtheme="dark"] .dup-field select,body[data-gtheme="dark"] .dup-field input,body[data-gtheme="dark"] #dupFixedDate{border-color:rgba(221,203,164,.28)}
body[data-gtheme="dark"] .dup-namepreview{color:#DDCBA4}
body[data-gtheme="dark"] .dup-summary{background:rgba(221,203,164,.08)}

/* 🔁 Duplication — corrections layout (surcharge les règles globales label/input) */
.dup-modal .dup-check,.dup-modal .dup-radios label{display:inline-flex!important;align-items:center;gap:7px;
    text-transform:none;font-weight:500;color:inherit;margin-bottom:0;font-size:.86rem;cursor:pointer}
.dup-modal input[type="checkbox"],.dup-modal input[type="radio"]{width:auto!important;padding:0!important;margin:0!important;flex:none;min-width:0}
.dup-modal .dup-checks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
/* Générateur de dates */
.dup-gen{background:rgba(168,134,63,.06);border:1px solid rgba(168,134,63,.2);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.dup-gen-freq{width:100%}
.dup-days{display:flex;gap:5px;flex-wrap:wrap}
.dup-day{width:34px;height:34px;border-radius:9px;border:1px solid rgba(107,90,58,.3);background:transparent;color:inherit;cursor:pointer;font-size:.8rem;font-weight:600}
.dup-day.on{background:var(--chanv-blanc,#A8863F);background:#A8863F;color:#fff;border-color:#A8863F}
.dup-gen-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem}
.dup-gen-range input{flex:1;min-width:120px}
.dup-gen-btn{align-self:flex-start;border:none;background:#A8863F;color:#fff;border-radius:9px;padding:7px 14px;cursor:pointer;font-size:.84rem;font-weight:600}
.dup-gen-btn:hover{background:#96762f}
.dup-or{text-align:center;font-size:.75rem;opacity:.5;margin:2px 0}
body[data-gtheme="dark"] .dup-gen{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .dup-day{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .dup-day.on{background:#DDCBA4;color:#241f16;border-color:#DDCBA4}

/* 🔁 Duplication — réassignation à une personne (P3) */
.dup-reassign{position:relative;margin-top:8px;display:flex;flex-direction:column;gap:7px}
.dup-reassign input[type="text"]{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-size:.86rem}
.dup-reassign-suggest{position:absolute;left:0;right:0;top:38px;z-index:20;background:#fff;border:1px solid rgba(107,90,58,.25);border-radius:10px;box-shadow:0 10px 24px rgba(60,48,25,.15);overflow:hidden}
.dup-reassign-suggest button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 12px;cursor:pointer;font-size:.85rem;color:inherit}
.dup-reassign-suggest button:hover{background:rgba(168,134,63,.1)}
.dup-reassign-suggest small{opacity:.5;margin-left:6px}
.dup-reassign-empty{padding:8px 12px;opacity:.5;font-size:.82rem}
.dup-reassign-chips{display:flex;flex-wrap:wrap;gap:6px}
.dup-chip{background:rgba(168,134,63,.14);border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dup-chip button{border:none;background:none;cursor:pointer;font-size:.7rem;opacity:.55;color:inherit;padding:0}
.dup-chip button:hover{opacity:1;color:#b3261e}
body[data-gtheme="dark"] .dup-reassign input[type="text"],body[data-gtheme="dark"] .dup-reassign-suggest{background:#241F19;border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dup-chip{background:rgba(221,203,164,.16)}

/* 👥 Import Basecamp — champs d'alias personnes */
.bc-alias-input{box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-family:inherit;font-size:.86rem}
body[data-gtheme="dark"] .bc-alias-input{background:#241F19;border-color:rgba(221,203,164,.25)}

/* 🎤 Dictée vocale des notes (#10) */
#noteMicBtn.recording{background:rgba(220,38,38,.14);border-radius:6px;animation:noteMicPulse 1.1s ease-in-out infinite}
@keyframes noteMicPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* 🌐 Traduction temporaire d'une tâche (#11) */
.tasks-tr-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;background:rgba(168,134,63,.12);border:1px solid rgba(168,134,63,.3);border-radius:8px;padding:5px 10px;margin:2px 0 10px}
.tasks-tr-revert{border:none;background:none;cursor:pointer;color:inherit;font-weight:600;text-decoration:underline;padding:0;font-size:.82rem}
body[data-gtheme="dark"] .tasks-tr-banner{background:rgba(221,203,164,.14);border-color:rgba(221,203,164,.3)}

/* 🔁 Duplication — récurrence durable (P6) */
.dup-gen-durable{border-top:1px dashed rgba(168,134,63,.3);margin-top:9px;padding-top:9px;display:flex;flex-direction:column;gap:8px}
.dup-gen-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.82rem}
.dup-gen-end label{display:inline-flex;align-items:center;gap:5px}
.dup-gen-end input[type="number"]{width:52px;padding:4px 6px}
.dup-gen-end input[type="date"]{width:auto;padding:4px 6px}
.dup-activate-btn{background:#2d6a24;align-self:flex-start}
.dup-activate-btn:hover{background:#255a1e}
body[data-gtheme="dark"] .dup-activate-btn{background:#4c8f41}

/* 🗂️ Onglets de tâches ouvertes (réordonnables, façon onglets de navigateur) */
.tasks-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 24px 0;flex-shrink:0;scrollbar-width:none}
.tasks-tabs::-webkit-scrollbar{display:none}
.tasks-tabs.hidden{display:none}
.tasks-tab{display:flex;align-items:center;gap:6px;flex:0 0 auto;max-width:200px;padding:7px 8px 7px 12px;
    border-radius:10px 10px 0 0;background:rgba(107,90,58,.08);border:1px solid transparent;border-bottom:none;
    cursor:pointer;font-size:.84rem;color:inherit;user-select:none;transition:background .12s}
.tasks-tab:hover{background:rgba(107,90,58,.14)}
.tasks-tab.on{background:var(--chanv-blanc,#fff);border-color:rgba(107,90,58,.18);font-weight:600}
.tasks-tab-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tasks-tab-close{border:none;background:none;cursor:pointer;font-size:.7rem;opacity:.5;color:inherit;
    padding:2px 5px;border-radius:6px;flex:none;line-height:1}
.tasks-tab-close:hover{opacity:1;background:rgba(179,38,30,.12);color:#b3261e}
.tasks-tab.dragging{opacity:.45}
.tasks-tab.drop-before{box-shadow:-2px 0 0 0 var(--chanv-terre,#A8863F)}
body[data-gtheme="dark"] .tasks-tab{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-tab.on{background:#2b2823;border-color:rgba(221,203,164,.18)}
@media (max-width:640px){ .tasks-tabs{padding:6px 12px 0} }

/* ✅ Indicateur de tâche clôturée (haut = bannière, bas = note ; piloté par le statut) */
.tasks-closed-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:11px 14px;
    border-radius:10px;background:rgba(45,106,36,.12);color:#2d6a24;font-size:.95rem;
    border:1px solid rgba(45,106,36,.28)}
.tasks-closed-note{margin:12px 0 0;padding:9px 12px;text-align:center;font-size:.85rem;font-weight:500;
    color:#2d6a24;background:rgba(45,106,36,.08);border-radius:8px}
body[data-gtheme="dark"] .tasks-closed-banner{background:rgba(76,143,65,.18);color:#8fd47f;border-color:rgba(76,143,65,.32)}
body[data-gtheme="dark"] .tasks-closed-note{background:rgba(76,143,65,.12);color:#8fd47f}

/* 🔁 Gestion des duplications récurrentes (panneau + cartes de règles) */
.tasks-dupmgr-btn{margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    color:#fff;border-radius:9px;padding:7px 13px;cursor:pointer;font-size:.86rem;font-weight:600;white-space:nowrap;transition:background .15s}
.tasks-dupmgr-btn:hover{background:rgba(255,255,255,.22)}
.dupmgr-sub{font-size:.84rem;opacity:.72;margin:2px 0 14px;line-height:1.45}
.dupmgr-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:14px}
.dupmgr-scope,.dupmgr-states{display:inline-flex;gap:6px;flex-wrap:wrap}
.dupmgr-tab,.dupmgr-state{border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;border-radius:999px;
    padding:5px 12px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .13s}
.dupmgr-tab:hover,.dupmgr-state:hover{border-color:#A8863F;color:#A8863F}
.dupmgr-tab.active,.dupmgr-state.active{background:#A8863F;color:#fff;border-color:#A8863F}
.dupmgr-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:2px}
.dupmgr-empty{padding:26px 16px;text-align:center;opacity:.55;font-size:.9rem}
.dupmgr-card{border:1px solid rgba(107,90,58,.18);border-radius:12px;padding:12px 14px;background:rgba(168,134,63,.04)}
.dupmgr-card-stopped{opacity:.62}
.dupmgr-card-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.dupmgr-desc{font-weight:700;font-size:.95rem}
.dupmgr-badge{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.dupmgr-badge-active{background:rgba(45,106,36,.14);color:#2d6a24}
.dupmgr-badge-paused{background:rgba(168,134,63,.16);color:#8a6d1f}
.dupmgr-badge-stopped{background:rgba(107,90,58,.14);color:#7a6a52}
.dupmgr-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;font-size:.8rem;opacity:.82}
.dupmgr-err{margin-top:8px;font-size:.8rem;color:#b3261e;background:rgba(179,38,30,.08);border-radius:8px;padding:6px 10px}
.dupmgr-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.dupmgr-act{padding:6px 11px!important;font-size:.8rem!important;margin:0!important}
.dupmgr-edit{margin-top:11px;border-top:1px dashed rgba(168,134,63,.3);padding-top:11px;display:flex;flex-direction:column;gap:8px}
.dupmgr-edit-title{font-size:.85rem;font-weight:600}
.dupmgr-radio{display:flex;align-items:center;gap:7px;font-size:.85rem;flex-wrap:wrap}
.dupmgr-radio input[type="radio"]{width:auto!important;padding:0!important;margin:0;flex:none;min-width:0}
.dupmgr-count{width:60px!important;padding:4px 6px;min-width:0}
.dupmgr-until{width:auto!important;padding:4px 6px;min-width:0}
.dupmgr-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
body[data-gtheme="dark"] .dupmgr-card{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .dupmgr-tab,body[data-gtheme="dark"] .dupmgr-state{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dupmgr-badge-active{background:rgba(76,143,65,.2);color:#8fd47f}
body[data-gtheme="dark"] .dupmgr-badge-paused{background:rgba(221,203,164,.16);color:#e0c98a}
body[data-gtheme="dark"] .dupmgr-badge-stopped{background:rgba(221,203,164,.1);color:#b8a985}
body[data-gtheme="dark"] .dupmgr-edit{border-top-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dupmgr-err{color:#ff8a80;background:rgba(179,38,30,.16)}

/* ===== Carte de validation de duplication (garde-fou IA) ===== */
.dup-confirm-card{margin:10px 0;border:1px solid rgba(40,40,40,.14);border-radius:14px;background:#faf8f4;overflow:hidden;max-width:560px}
.dupc-loading,.dupc-closed{padding:14px 16px;font-size:.9rem;color:#6b6b6b}
.dupc-head{display:flex;align-items:center;gap:8px;padding:11px 15px;background:linear-gradient(90deg,rgba(232,165,62,.14),rgba(232,165,62,.04));border-bottom:1px solid rgba(40,40,40,.08)}
.dupc-ico{font-size:1.15rem}
.dupc-title{font-weight:700;font-size:.95rem;color:#282828}
.dupc-body{padding:12px 15px}
.dupc-meta{font-size:.9rem;color:#333;margin-bottom:6px}
.dupc-dest{font-size:.85rem;color:#555;margin:2px 0 8px}
.dupc-sub,.dupc-dates{font-size:.82rem;color:#666;margin-top:6px}
.dupc-table-wrap{max-height:230px;overflow:auto;border:1px solid rgba(40,40,40,.1);border-radius:8px;margin-top:6px}
.dupc-table{width:100%;border-collapse:collapse;font-size:.83rem}
.dupc-table th{position:sticky;top:0;background:#f0ece4;text-align:left;padding:6px 9px;font-weight:600;color:#555;border-bottom:1px solid rgba(40,40,40,.1)}
.dupc-table td{padding:5px 9px;border-bottom:1px solid rgba(40,40,40,.05)}
.dupc-table td.dupc-due{white-space:nowrap;color:#777;text-align:right;font-variant-numeric:tabular-nums}
.dupc-more{font-size:.8rem;color:#888;margin-top:5px;font-style:italic}
.dupc-warns{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.dupc-warn{font-size:.78rem;color:#9a6a00;background:rgba(232,165,62,.14);padding:2px 8px;border-radius:6px}
.dupc-diff{display:flex;flex-direction:column;gap:5px}
.dupc-diff-row{display:flex;gap:8px;align-items:baseline;font-size:.86rem}
.dupc-diff-lbl{min-width:52px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#999}
.dupc-diff-after{font-weight:600;color:#2d6a24}
.dupc-actions{display:flex;gap:8px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid rgba(40,40,40,.08);background:rgba(40,40,40,.02)}
.dupc-btn{font-size:.85rem;padding:7px 14px}
.dup-confirm-card.dupc-busy{opacity:.7;pointer-events:none}
.dupc-done{padding:13px 16px;font-size:.9rem;color:#2d6a24;background:rgba(45,106,36,.07)}
.dupc-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dupc-link{font-size:.8rem;background:rgba(45,106,36,.1);color:#2d6a24;padding:3px 9px;border-radius:6px;text-decoration:none}
.dupc-link:hover{background:rgba(45,106,36,.2)}
body[data-gtheme="dark"] .dup-confirm-card{background:#26241f;border-color:rgba(255,255,255,.12)}
body[data-gtheme="dark"] .dupc-head{background:linear-gradient(90deg,rgba(232,165,62,.18),rgba(232,165,62,.03));border-color:rgba(255,255,255,.08)}
body[data-gtheme="dark"] .dupc-title{color:#f0ece4}
body[data-gtheme="dark"] .dupc-meta{color:#ddd}
body[data-gtheme="dark"] .dupc-dest{color:#b8b2a6}
body[data-gtheme="dark"] .dupc-sub,body[data-gtheme="dark"] .dupc-dates,body[data-gtheme="dark"] .dupc-loading,body[data-gtheme="dark"] .dupc-closed{color:#9a948a}
body[data-gtheme="dark"] .dupc-table-wrap{border-color:rgba(255,255,255,.1)}
body[data-gtheme="dark"] .dupc-table th{background:#2f2c26;color:#c5bfb3;border-color:rgba(255,255,255,.1)}
body[data-gtheme="dark"] .dupc-table td{border-color:rgba(255,255,255,.06)}
body[data-gtheme="dark"] .dupc-table td.dupc-due{color:#9a948a}
body[data-gtheme="dark"] .dupc-actions{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.08)}
body[data-gtheme="dark"] .dupc-diff-after{color:#6fbf60}
body[data-gtheme="dark"] .dupc-done{color:#8fd67f;background:rgba(45,106,36,.15)}
body[data-gtheme="dark"] .dupc-link{background:rgba(111,191,96,.14);color:#8fd67f}

/* ===== Projet archivé : actions (désarchiver / supprimer définitivement) ===== */
.tpc-arch-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tpc-delete{background:transparent;border:1px solid rgba(180,40,40,.4);color:#b42828;padding:5px 9px;line-height:1;border-radius:8px;cursor:pointer;font-size:14px}
.tpc-delete:hover{background:rgba(180,40,40,.1)}
body[data-gtheme="dark"] .tpc-delete{border-color:rgba(240,120,120,.4);color:#f08a8a}
body[data-gtheme="dark"] .tpc-delete:hover{background:rgba(240,120,120,.12)}

/* ===== Modale de confirmation destructive ===== */
.tasks-danger-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}
.tasks-danger-box{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.tdm-title{font-weight:700;font-size:1.05rem;color:#b42828;margin-bottom:10px}
.tdm-msg{font-size:.92rem;color:#444;line-height:1.5;margin-bottom:18px}
.tdm-actions{display:flex;gap:10px;justify-content:flex-end}
body[data-gtheme="dark"] .tasks-danger-box{background:#26241f;box-shadow:0 12px 40px rgba(0,0,0,.5)}
body[data-gtheme="dark"] .tdm-title{color:#f08a8a}
body[data-gtheme="dark"] .tdm-msg{color:#c5bfb3}

/* ===== Surbrillance d'une liste ciblée depuis le fil d'Ariane ===== */
@keyframes tasksListFlash{0%{box-shadow:0 0 0 3px rgba(232,165,62,0)}25%{box-shadow:0 0 0 3px rgba(232,165,62,.6)}100%{box-shadow:0 0 0 3px rgba(232,165,62,0)}}
.tasks-list-flash{animation:tasksListFlash 1.5s ease-out;border-radius:12px}
.tasks-ask-gandalf{white-space:nowrap}

/* =====================================================================
   Verrou biométrique GANDALF — overlay plein écran (app native uniquement)
   Voir public/js/app-lock.js. Révélé par l'attribut data-glock-armed posé
   sur <html> (jamais posé hors natif) — anti-flash : le CSS peut couvrir
   le contenu dès la première frame, avant même que le JS ait pu toucher
   le DOM. z-index=100010 : au-dessus de tout l'existant (max audité :
   100003, pastille pwa-install). OPAQUE (pas de rgba) : le contenu
   dessous doit être réellement masqué, jamais entr'aperçu.
   ===================================================================== */
#gAppLock {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100010;
    background: #F4EFE3;
}
html[data-glock-armed] #gAppLock {
    display: flex;
}
body[data-gtheme="dark"] #gAppLock {
    background: #201d19;
}
.glock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.glock-logo {
    font-size: 52px;
    line-height: 1;
}
.glock-title {
    font-size: 16px;
    font-weight: 600;
    color: #2D2A26;
}
body[data-gtheme="dark"] .glock-title {
    color: #EFE6D6;
}

/* =====================================================================
   DocViewer — visualiseur de documents intégré (Messages + Tâches)
   ===================================================================== */
.dv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.72);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10060;
    padding: 14px;
}
.dv-overlay.open { display: flex; }
.dv-modal {
    background: #faf7f1;
    border-radius: 16px;
    width: min(1040px, 100%);
    height: min(92vh, 1100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.dv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #F1EADA;
    border-bottom: 1px solid rgba(120, 100, 70, 0.25);
    flex-shrink: 0;
}
.dv-name {
    font-size: 13px;
    font-weight: 700;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dv-actions button {
    background: none;
    border: 1px solid rgba(120, 100, 70, 0.3);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
    color: #282828;
}
.dv-actions button:hover { background: rgba(40, 40, 40, 0.08); }
.dv-body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}
.dv-loading, .dv-error {
    text-align: center;
    padding: 40px 16px;
    color: #6b6151;
    font-size: 14px;
}
.dv-error button {
    border: 1px solid rgba(120, 100, 70, 0.35);
    background: white;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
}
.dv-pdf { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dv-page {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    background: white;
    max-width: 100%;
    height: auto;
}
.dv-pagecount {
    text-align: center;
    font-size: 11px;
    color: #6b6151;
    padding: 10px 0 4px;
}
.dv-doc {
    background: white;
    border-radius: 10px;
    padding: 28px clamp(16px, 5vw, 48px);
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.65;
    color: #23201b;
    font-size: 15px;
}
.dv-doc h1, .dv-doc h2, .dv-doc h3 { margin: 1em 0 0.4em; line-height: 1.25; }
.dv-doc p { margin: 0 0 0.7em; }
.dv-doc img { max-width: 100%; height: auto; }
.dv-doc table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.dv-doc td, .dv-doc th { border: 1px solid rgba(120, 100, 70, 0.3); padding: 5px 9px; font-size: 13px; }
.dv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dv-tab {
    border: 1px solid rgba(120, 100, 70, 0.3);
    background: white;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    color: #282828;
}
.dv-tab.active { background: #282828; color: #fff; border-color: #282828; }
.dv-sheet { overflow: auto; background: white; border-radius: 10px; padding: 8px; }
.dv-sheet table { border-collapse: collapse; font-size: 12.5px; }
.dv-sheet td { border: 1px solid rgba(120, 100, 70, 0.25); padding: 4px 8px; white-space: nowrap; }
.dv-text {
    background: white;
    border-radius: 10px;
    padding: 16px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: #23201b;
}
@media (max-width: 640px) {
    .dv-overlay { padding: 0; }
    .dv-modal { width: 100%; height: 100%; border-radius: 0; }
}
/* — thème sombre — */
body[data-gtheme="dark"] .dv-modal { background: #201d19; }
body[data-gtheme="dark"] .dv-header { background: #2b2823; border-bottom-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .dv-name,
body[data-gtheme="dark"] .dv-actions button { color: rgba(255, 255, 255, 0.85); }
body[data-gtheme="dark"] .dv-actions button { border-color: rgba(221, 203, 164, 0.25); }
body[data-gtheme="dark"] .dv-actions button:hover { background: rgba(221, 203, 164, 0.13); }
body[data-gtheme="dark"] .dv-loading, body[data-gtheme="dark"] .dv-error, body[data-gtheme="dark"] .dv-pagecount { color: rgba(255, 255, 255, 0.5); }
body[data-gtheme="dark"] .dv-tab { background: #2b2823; color: rgba(255, 255, 255, 0.8); border-color: rgba(221, 203, 164, 0.2); }
body[data-gtheme="dark"] .dv-tab.active { background: #DDCBA4; color: #201d19; border-color: #DDCBA4; }
/* Documents/tableaux/texte restent sur fond BLANC en sombre : fidèle au fichier
   (un PDF/Word est un objet blanc) et lisible sans réécrire les couleurs du contenu. */
.dv-err-detail { display: inline-block; margin-top: 10px; opacity: 0.6; font-size: 11px; }

/* =====================================================================
   Appels — bulles dans Messages + overlay d'appel entrant (UX Messenger)
   ===================================================================== */
.chat-pane-call {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}
.chat-pane-call:hover { background: rgba(120, 100, 70, 0.12); }
.chat-call-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(120, 100, 70, 0.08);
    border: 1px solid rgba(120, 100, 70, 0.2);
    font-size: 13.5px;
}
.chat-call-bubble .chat-call-ic { font-size: 16px; }
.chat-call-live { border-color: #2e7d4f; background: rgba(46, 125, 79, 0.1); }
.chat-call-missed { border-color: rgba(179, 64, 46, 0.5); color: #b3402e; }
.ucard-modal .btn + .btn { margin-top: 8px; }
.chat-pane-title-clickable { cursor: pointer; border-radius: 10px; }
.chat-pane-title-clickable:hover { background: rgba(102, 126, 234, 0.08); }
.chat-members-modal {
    max-width: 420px; width: min(92vw, 420px); max-height: 70vh;
    display: flex; flex-direction: column;
    background: #fff; color: #282828;
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    margin-top: 8vh;
}
body[data-gtheme="dark"] .chat-members-modal { background: #332f28; color: #f0ead9; }
.chat-members-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.chat-members-head h3 { margin: 0; font-size: 16px; }
.chat-members-close { background: none; border: none; font-size: 16px; cursor: pointer; color: inherit; opacity: 0.7; }
.chat-members-close:hover { opacity: 1; }
.chat-members-list { overflow-y: auto; padding: 0 10px 12px; }
.chat-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; }
.chat-member-row:hover { background: rgba(102, 126, 234, 0.07); }
.cm-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.cm-initial { display: inline-flex; align-items: center; justify-content: center; background: rgba(102, 126, 234, 0.22); font-weight: 700; }
.cm-name { font-weight: 600; font-size: 14px; }
.cm-mail { font-size: 12px; opacity: 0.65; }

/* ── Analyse IA des bugs (Support IT) : verdict + contre-expertise ── */
.sup-ai { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.sup-ai-card { background: #FBF6EA; border: 1px solid rgba(168, 134, 63, 0.25); border-radius: 12px; padding: 12px 14px; }
.sup-ai-head { font-weight: 800; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sup-ai-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #EFE7D4; color: #6b5a3a; }
.sup-ai-badge.ok { background: rgba(45, 125, 70, 0.15); color: #2d7d46; }
.sup-ai-badge.warn { background: rgba(200, 137, 31, 0.16); color: #a86a12; }
.sup-ai-badge.bad { background: rgba(179, 38, 30, 0.13); color: #b3261e; }
.sup-ai-diag { font-size: 0.9rem; line-height: 1.5; }
.sup-ai-note { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.sup-ai-details { margin-top: 8px; font-size: 0.88rem; }
.sup-ai-details summary { cursor: pointer; font-weight: 700; }
.sup-ai-edit { margin: 8px 0; }
.sup-ai-file { font-weight: 700; font-size: 0.82rem; margin-bottom: 4px; }
.sup-ai-edit pre { margin: 3px 0; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.sup-ai-del { background: rgba(179, 38, 30, 0.08); border-left: 3px solid #b3261e; }
.sup-ai-add { background: rgba(45, 125, 70, 0.09); border-left: 3px solid #2d7d46; }
.sup-ai-vigi { margin: 6px 0 0 18px; font-size: 0.86rem; }
.sup-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-ai-running, .sup-ai-failed { font-size: 0.9rem; padding: 10px 12px; border-radius: 12px; background: #FBF6EA; border: 1px dashed rgba(168, 134, 63, 0.4); }
body[data-gtheme="dark"] .sup-ai-card, body[data-gtheme="dark"] .sup-ai-running, body[data-gtheme="dark"] .sup-ai-failed { background: #241F19; border-color: rgba(221, 203, 164, 0.2); color: #EFE7D6; }
body[data-gtheme="dark"] .sup-ai-badge { background: #2E271E; color: #b8a985; }
body[data-gtheme="dark"] .sup-ai-badge.ok { background: rgba(129, 199, 132, 0.15); color: #81c784; }
body[data-gtheme="dark"] .sup-ai-badge.warn { background: rgba(255, 183, 77, 0.15); color: #ffb74d; }
body[data-gtheme="dark"] .sup-ai-badge.bad { background: rgba(255, 138, 128, 0.16); color: #ff8a80; }

/* ── Annonce globale (📣) : popup centré, aux couleurs de l'app, 2 thèmes ── */
.gannounce-overlay {
    /* AU-DESSUS de la salle d'appel (10070) : Dany n'a pas vu l'annonce test
       parce qu'il était en réunion — le popup passait dessous. */
    position: fixed; inset: 0; z-index: 10090;
    background: rgba(30, 26, 20, 0.55); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gannounce-card {
    background: #FDFBF6; color: #282828;
    border: 1px solid rgba(168, 134, 63, 0.35);
    border-top: 4px solid #A8863F;
    border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    max-width: 520px; width: min(94vw, 520px);
    max-height: 88vh; /* la carte ne déborde jamais de l'écran — le corps défile */
    padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.gannounce-head { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
.gannounce-author { font-size: 0.82rem; font-weight: 700; color: #8a7a5c; text-transform: uppercase; letter-spacing: 0.06em; }
.gannounce-msg { font-size: 0.98rem; line-height: 1.55; overflow-wrap: break-word; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.gannounce-ok { align-self: flex-end; margin-top: 6px; }
.gannounce-hint { font-size: 0.82rem; color: #8a7a5c; }
.gannounce-input {
    width: 100%; resize: vertical; min-height: 110px;
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 12px;
    padding: 10px 12px; font: inherit; background: #fff; color: inherit;
}
.gannounce-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gannounce-duration {
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 10px;
    padding: 8px 10px; font: inherit; background: #fff; color: inherit;
}
.gannounce-send { margin-left: auto; }
body[data-gtheme="dark"] .gannounce-card { background: #332f28; color: #f0ead9; border-color: rgba(221, 203, 164, 0.28); border-top-color: #D9BC77; }
body[data-gtheme="dark"] .gannounce-author, body[data-gtheme="dark"] .gannounce-hint { color: #b8a985; }
body[data-gtheme="dark"] .gannounce-input, body[data-gtheme="dark"] .gannounce-duration { background: #241F19; color: #f0ead9; border-color: rgba(221, 203, 164, 0.25); }

/* Vue riche du composeur : le jeton [img:…] s'affiche comme vignette */
.gc-rich-mirror {
    position: absolute; inset: 0; z-index: 0;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
    overflow: hidden; pointer-events: none;
    background: transparent;
}
.gc-rich-wrap > textarea { position: relative; z-index: 1; width: 100%; }
.gc-rich-wrap.gc-rich-on > textarea {
    color: transparent !important;
    background: transparent !important;
}
.gc-rich-token {
    /* SEULE l'image se voit (contain, à gauche) — pas de fond ni de cadre sur
       toute la largeur du jeton : fini la « traîne » grise étirée. */
    background-size: contain; background-repeat: no-repeat; background-position: left center;
    color: transparent !important;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.chat-bot-link { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(102, 126, 234, 0.5); }

/* Liens dans les messages de conversation — thème CLAIR : ils prennent la
   couleur du TEXTE de leur bulle (blanc sur mes bulles sombres, noir sur les
   bulles claires reçues) et restent SOULIGNÉS pour rester identifiables. Le
   bleu navigateur par défaut était illisible sur les bulles sombres. En thème
   sombre, la règle plus spécifique body[data-gtheme="dark"] .chat-msg-content a
   (juste en dessous) garde le beige lisible — pas de régression. */
.chat-msg-own .chat-msg-content a,
.chat-msg-other .chat-msg-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
    word-break: break-word;
}

/* Liens dans les CONTENUS (messages, commentaires, notes, tickets) : le bleu
   navigateur est illisible sur fond sombre → blanc cassé souligné. */
body[data-gtheme="dark"] .chat-msg-content a,
body[data-gtheme="dark"] .tasks-comment-content a,
body[data-gtheme="dark"] .tasks-detail-desc a,
body[data-gtheme="dark"] .note-view-body a,
body[data-gtheme="dark"] .sup-thread a,
body[data-gtheme="dark"] .ai-msg a,
body[data-gtheme="dark"] .sup-ai a,
body[data-gtheme="dark"] #changelog-article a,
body[data-gtheme="dark"] .gannounce-msg a {
    color: #F0EAD9;
    text-decoration: underline;
    text-decoration-color: rgba(240, 234, 217, 0.5);
}

.groom-tr-lang { font-size: 10px; opacity: .55; font-style: normal; margin-left: 5px;
    background: rgba(221, 203, 164, 0.16); border-radius: 999px; padding: 1px 6px; cursor: help; }
/* 🏕️ Mini-import Basecamp personnel (modale Réglages) */
.bcm-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.bcm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--gs-line, #E3DCCB);
    border-radius: 10px; cursor: pointer; font-size: 14px; }
/* La règle globale `input { width:100% … }` étire la case sur toute la rangée
   et écrase le nom (largeur 0 + overflow:hidden) — même piège que .dup-modal. */
.bcm-row input[type="checkbox"] { width: auto !important; flex: none; padding: 0 !important; margin: 0 !important; min-width: 0; }
.bcm-row:hover { border-color: var(--gs-accent, #A8863F); }
.bcm-row.bcm-done { opacity: .55; cursor: default; }
.bcm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcm-badge { flex-shrink: 0; font-size: 11px; border-radius: 999px; padding: 2px 9px; background: rgba(168, 134, 63, 0.14); }
.bcm-badge.bcm-ok { background: rgba(90, 160, 90, 0.16); }
.bcm-status { margin-top: 10px; font-size: 13px; opacity: .8; }

.tasks-icon-none { font-size: 12px; opacity: .6; font-style: italic; }
.rn-gcal-badge { font-size: 12px; opacity: .8; margin-left: 4px; }
.rn-gcal-note { opacity: .8; font-style: italic; margin-top: 8px; }

/* ✉️ Bouton d'envoi de brouillon Gmail sous un message de l'Assistant */
.ai-draft-send {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(168, 134, 63, 0.35);
    background: rgba(168, 134, 63, 0.08);
}
.ai-draft-send-info { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-draft-send-btn {
    border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer;
    font-weight: 700; font-size: 13px; font-family: inherit;
    background: #A8863F; color: #FFF8EA; transition: transform .12s, filter .12s;
}
.ai-draft-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ai-draft-send-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ai-draft-send-gmail { font-size: 12px; opacity: .75; }
.ai-draft-sent { border-color: rgba(90, 160, 90, 0.45); background: rgba(90, 160, 90, 0.10); }
body[data-gtheme="dark"] .ai-draft-send { background: rgba(221, 203, 164, 0.07); border-color: rgba(221, 203, 164, 0.3); }
body[data-gtheme="dark"] .ai-draft-send-btn { background: #DDCBA4; color: #2A2415; }
body[data-gtheme="dark"] .ai-draft-sent { border-color: rgba(140, 200, 140, 0.4); background: rgba(140, 200, 140, 0.08); }

.gc-inline-img {
    /* ⚠️ pas de % dans max-width : dans une bulle inline-block (shrink-to-fit),
       un % est cyclique → ignoré au calcul intrinsèque, et la bulle se
       dimensionnait sur la largeur NATURELLE de la capture (immense vide à
       droite de l'image). Le calc vw (comme .chat-att-img) n'est pas
       cyclique ; 80vw − 110px = place réelle de la bulle mobile (70vw
       débordait de la colonne, ticket UsmGYJdaaacT7i75uldt). */
    display: block; max-width: min(340px, calc(80vw - 110px)); max-height: 300px;
    border-radius: 10px; margin: 6px 0; cursor: zoom-in;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
/* ── Visionneuse-galerie partagée (messages, commentaires, notes, articles,
   CRM, Agent IA) — public/js/img-gallery.js ───────────────────────────────
   z-index 10065 : au-dessus des overlays de contenu (doc-viewer, détails…),
   sous la salle d'appel (10080) et l'annonce globale (10090). Le suffixe
   « -overlay » est requis : version-check.js diffère le rechargement
   automatique tant qu'un overlay est ouvert. Voile sombre dans les deux
   thèmes (comme la lightbox qu'elle remplace). */
.gimg-gallery-overlay {
    position: fixed; inset: 0; z-index: 10065;
    background: rgba(20, 18, 14, 0.94); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    overscroll-behavior: contain;
    -webkit-user-select: none; user-select: none;
}
.gimg-track {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior: contain; touch-action: pan-x pinch-zoom;
}
.gimg-track::-webkit-scrollbar { display: none; }
.gimg-slide {
    flex: 0 0 100%; min-width: 100%; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center; position: relative;
    padding: 56px 12px 44px;
}
.gimg-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.gimg-slide:not(.is-ready) .gimg-img { display: none; }
.gimg-state {
    position: absolute; color: #fff; font-size: 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gimg-retry {
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
    background: transparent; color: #fff; padding: 6px 14px;
    font: inherit; font-size: 13px; cursor: pointer;
}
.gimg-close {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gimg-count {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: max(20px, calc(env(safe-area-inset-top) + 6px)); left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 18, 14, 0.55); color: #fff;
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
    pointer-events: none;
}
.gimg-nav {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-size: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gimg-prev { left: 12px; }
.gimg-next { right: 12px; }
.gimg-nav[disabled] { opacity: 0.25; cursor: default; }
@media (hover: none) { .gimg-nav { display: none; } } /* tactile : on glisse */
.gimg-dots {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; bottom: max(14px, env(safe-area-inset-bottom));
    left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.gimg-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.gimg-dot.on { background: #fff; }
.gimg-dl {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; bottom: max(30px, calc(env(safe-area-inset-bottom) + 16px)); left: 50%;
    transform: translateX(-50%); border: none; border-radius: 999px;
    background: rgba(255, 255, 255, 0.15); color: #fff; padding: 8px 16px;
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gimg-dl.hidden { display: none; }
.gimg-solo .gimg-nav, .gimg-solo .gimg-count, .gimg-solo .gimg-dots { display: none; }

/* ── WSWNW — bilan hebdomadaire (What · So What · Now What) ── */
.wswnw-wrap { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
.wswnw-hero {
    background: linear-gradient(135deg, var(--chanv-terre, #282828), #4a3e2a);
    color: #fff; border-radius: 16px; padding: 26px 28px 22px; margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.wswnw-hero h2 { margin: 10px 0 8px; font-size: 24px; font-family: 'Outfit', sans-serif; }
.wswnw-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: 0.85; max-width: 640px; }
.wswnw-hero-line {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.7;
}
.wswnw-hero-line::before, .wswnw-hero-line::after { content: none; }
.wswnw-hero-line span { position: relative; padding: 0 2px; }
.wswnw-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.wswnw-tab {
    flex: 1; padding: 9px 12px; border: 1px solid #e8e2d6; border-radius: 10px;
    background: #faf7f0; color: #6b5a3a; font-family: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer;
}
.wswnw-tab.on { background: var(--chanv-terre, #282828); border-color: var(--chanv-terre, #282828); color: #fff; }
.wswnw-card {
    background: #fff; border: 1px solid #e8e2d6; border-left: 4px solid var(--chanv-beige, #DDCBA4);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.wswnw-label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.wswnw-label span { font-weight: 500; font-size: 13px; opacity: 0.75; }
.wswnw-label-sub { font-weight: 600; font-size: 13px; margin-top: 10px; }
.wswnw-card textarea {
    width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
    border: 1px solid rgba(107, 90, 58, 0.25); border-radius: 10px;
    padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5;
    background: transparent; color: inherit;
}
.wswnw-card textarea[readonly] { opacity: 0.85; border-style: dashed; }
.wswnw-ta-tools { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.wswnw-polish-btn, .wswnw-revert-btn {
    border: 1px solid rgba(168, 134, 63, 0.4); border-radius: 999px;
    background: rgba(168, 134, 63, 0.08); color: #6b5a3a;
    padding: 4px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wswnw-polish-btn:hover, .wswnw-revert-btn:hover { background: rgba(168, 134, 63, 0.16); }
.wswnw-polish-btn:disabled { opacity: 0.6; cursor: wait; }
.wswnw-polish-note { font-size: 11.5px; opacity: 0.55; }
.wswnw-locked-banner {
    background: rgba(107, 90, 58, 0.1); border: 1px solid rgba(107, 90, 58, 0.3);
    border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px;
}
body[data-gtheme="dark"] .wswnw-polish-btn, body[data-gtheme="dark"] .wswnw-revert-btn {
    border-color: rgba(221, 203, 164, 0.3); background: rgba(221, 203, 164, 0.08); color: #d9c9a5;
}
body[data-gtheme="dark"] .wswnw-locked-banner { background: rgba(221, 203, 164, 0.08); border-color: rgba(221, 203, 164, 0.25); }
.wswnw-meta { display: flex; gap: 18px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; flex-wrap: wrap; }
.wswnw-prefill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wswnw-prefill-hint { font-size: 12.5px; opacity: 0.7; flex: 1; min-width: 220px; }
.wswnw-radio-row { display: flex; gap: 22px; margin: 4px 0 6px; }
.wswnw-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.wswnw-actions { display: flex; align-items: center; gap: 16px; margin: 18px 0 8px; }
.wswnw-weekend { font-size: 13.5px; opacity: 0.75; font-weight: 600; }
.wswnw-done-banner {
    background: rgba(45, 125, 70, 0.1); border: 1px solid rgba(45, 125, 70, 0.35);
    color: #2d7d46; border-radius: 10px; padding: 10px 14px; font-size: 13.5px;
    font-weight: 600; margin-bottom: 12px;
}
.wswnw-history { font-size: 12.5px; opacity: 0.65; margin-top: 6px; }
.wswnw-loading { text-align: center; padding: 50px 20px; opacity: 0.65; }
.wswnw-review-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wswnw-week-pick {
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 10px;
    padding: 8px 10px; font: inherit; background: transparent; color: inherit;
}
.wswnw-counts { font-weight: 700; font-size: 13.5px; margin-right: auto; }
.wswnw-missing {
    background: rgba(200, 137, 31, 0.1); border: 1px solid rgba(200, 137, 31, 0.35);
    border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px;
}
.wswnw-synth { border-left-color: #A8863F; font-size: 14px; line-height: 1.6; }
.wswnw-synth.stale { opacity: 0.75; }
.wswnw-stale-note { font-size: 12.5px; font-weight: 700; color: #a86a12; margin-bottom: 8px; }
.wswnw-sub-list { margin-top: 6px; }
.wswnw-sub-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e8e2d6; border-radius: 10px;
    padding: 11px 14px; margin-bottom: 6px; cursor: pointer;
}
.wswnw-sub-row:hover { border-color: var(--chanv-beige, #DDCBA4); }
.wswnw-sub-row.warn { border-left: 4px solid #b3402e; }
.wswnw-sub-name { font-weight: 700; font-size: 14px; }
.wswnw-sub-when { font-size: 12px; opacity: 0.6; }
.wswnw-sub-detail {
    background: #faf7f0; border: 1px solid #eee4d2; border-radius: 10px;
    padding: 12px 16px; margin: -2px 0 10px; font-size: 14px; line-height: 1.55;
}
.wswnw-sub-detail h4 { margin: 10px 0 4px; font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; }

/* Sections WHAT / SO WHAT / NOW WHAT — séparations NETTES pour la lecture de
   David (retour 24/07). Étiquette colorée par section + trait de séparation. */
.wswnw-sec { padding: 14px 0 2px; border-top: 2px solid rgba(107, 90, 58, 0.16); }
.wswnw-sec:first-of-type { border-top: none; padding-top: 4px; }
.wswnw-sec > h4 {
    display: inline-block; margin: 0 0 9px; padding: 4px 13px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; opacity: 1;
    color: #fff; border-radius: 999px;
}
.wswnw-sec-what > h4 { background: #155799; }
.wswnw-sec-so   > h4 { background: #A8863F; }
.wswnw-sec-now  > h4 { background: #2d7d46; }
.wswnw-sec > div { font-size: 14px; line-height: 1.6; }
.wswnw-sec-confidence {
    margin-top: 16px; padding-top: 12px; border-top: 2px solid rgba(107, 90, 58, 0.16);
    font-size: 12.5px; font-weight: 700; opacity: 0.8;
}
/* Bouton « Synthèse IA de cette fiche » en tête de chaque bilan */
.wswnw-person-synth-row { margin: 0 0 6px; }
.wswnw-person-synth-btn {
    border: 1.5px solid rgba(168, 134, 63, 0.55); border-radius: 999px;
    background: rgba(168, 134, 63, 0.12); color: #6b5a3a;
    padding: 6px 16px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.wswnw-person-synth-btn:hover { background: rgba(168, 134, 63, 0.22); }
.wswnw-person-synth-btn:disabled { opacity: 0.6; cursor: wait; }
.wswnw-person-synth-box { margin: 8px 0 4px; }
body[data-gtheme="dark"] .wswnw-person-synth-btn {
    border-color: rgba(221, 203, 164, 0.35); background: rgba(221, 203, 164, 0.1); color: #d9c9a5;
}
body[data-gtheme="dark"] .wswnw-sec,
body[data-gtheme="dark"] .wswnw-sec-confidence { border-top-color: rgba(221, 203, 164, 0.18); }
.wswnw-solution { background: rgba(168, 134, 63, 0.08); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.wswnw-config { margin-top: 22px; font-size: 13.5px; }
.wswnw-config summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.wswnw-config label { display: block; font-weight: 600; margin: 10px 0 4px; }
.wswnw-config textarea {
    width: 100%; box-sizing: border-box; border: 1px solid rgba(107, 90, 58, 0.25);
    border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
    background: transparent; color: inherit;
}
.wswnw-config button { margin-top: 10px; }
/* Vendredi non soumis : libellé de nav en alerte (le badge « ! » est déjà rouge) */
.gshell-item-due { color: var(--gs-crit, #b3402e) !important; font-weight: 700; }
/* Thème sombre */
body[data-gtheme="dark"] .wswnw-tab { background: #241F19; border-color: rgba(221, 203, 164, 0.2); color: #d9c9a5; }
body[data-gtheme="dark"] .wswnw-tab.on { background: #D9BC77; border-color: #D9BC77; color: #241F19; }
body[data-gtheme="dark"] .wswnw-card,
body[data-gtheme="dark"] .wswnw-sub-row { background: #2A251D; border-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .wswnw-sub-detail { background: #241F19; border-color: rgba(221, 203, 164, 0.12); }
body[data-gtheme="dark"] .wswnw-card textarea,
body[data-gtheme="dark"] .wswnw-config textarea,
body[data-gtheme="dark"] .wswnw-week-pick { border-color: rgba(221, 203, 164, 0.25); }
body[data-gtheme="dark"] .wswnw-done-banner { background: rgba(129, 199, 132, 0.1); border-color: rgba(129, 199, 132, 0.3); color: #81c784; }
/* Le dark mode du hub ne redéfinit pas --text-main (#282828) : chaque app doit
   reposer une couleur de texte claire. WSWNW ne le faisait pas → texte quasi-noir
   sur cartes sombres = « écriture illisible » (retour David 24/07). Une couleur
   héritée claire sur .wswnw-wrap répare tous les textes qui n'imposent pas déjà la
   leur : textareas (color:inherit), labels, sections du bilan, bannières, liste
   « manquants »… Les onglets/boutons/pastilles gardent leur couleur (l'héritage est
   toujours plus faible qu'une déclaration directe). */
body[data-gtheme="dark"] .wswnw-wrap { color: #e8dcc4; }
body[data-gtheme="dark"] .wswnw-missing { background: rgba(200, 137, 31, 0.14); border-color: rgba(200, 137, 31, 0.4); }
body[data-gtheme="dark"] .wswnw-stale-note { color: #e0a03a; }

/* ── Carrousel d'images (≥2 dans un même message/commentaire) ──
   Le cadre est dimensionné en JS sur la 1re image ET sur la place réellement
   disponible (_sizeCarousel, composer.js) : sans ça une capture en portrait
   laissait deux bandes vides et le cadre, large de 70vw, débordait de la
   colonne des messages sur mobile. Ces valeurs ne servent qu'avant le
   chargement de la première image. */
.gc-carousel { position: relative; width: min(340px, 62vw); max-width: 100%; margin: 6px 0; }
.gc-car-track {
    display: flex; overflow-x: auto; height: 100%;
    scroll-snap-type: x mandatory;
    border-radius: 10px; scrollbar-width: none;
}
.gc-car-track::-webkit-scrollbar { display: none; }
.gc-car-slide {
    flex: 0 0 100%; min-width: 100%;
    scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center;
    background: rgba(120, 100, 70, 0.08);
}
.gc-car-slide img {
    max-width: 100%; max-height: 300px; height: auto;
    margin: 0; border-radius: 0; box-shadow: none;
    object-fit: contain; min-width: 0; min-height: 0;
}
/* Cadre calé sur l'image : elle occupe tout le cadre, plus de bandes vides. */
.gc-carousel[data-sized] .gc-car-slide img {
    width: 100%; height: 100%; max-height: none;
}
.gc-car-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.5); color: #fff;
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.gc-carousel:hover .gc-car-nav { opacity: 1; }
.gc-car-prev { left: 6px; }
.gc-car-next { right: 6px; }
@media (hover: none) { .gc-car-nav { display: none; } } /* tactile : on glisse */
.gc-car-count {
    position: absolute; top: 6px; right: 8px;
    background: rgba(20, 18, 14, 0.55); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    pointer-events: none;
}
.gc-car-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.gc-car-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.gc-car-dot.on { background: #fff; }

.chat-call-tr {
    background: rgba(102, 126, 234, 0.14); border: none; cursor: pointer;
    padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: inherit;
}
.chat-call-tr:hover { background: rgba(102, 126, 234, 0.3); }
.chat-transcript-modal { max-width: 640px; width: min(94vw, 640px); max-height: 80vh; }
.chat-transcript-list { padding: 0 16px 16px; }
.chat-tr-turn { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; }
.chat-tr-turn b { display: block; font-size: 0.8rem; opacity: 0.75; margin-bottom: 2px; }

.chat-genmedia-actions { display: flex; gap: 6px; margin-top: 6px; }
.chat-genmedia-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(102, 126, 234, 0.14);
    color: inherit; text-decoration: none;
    border: none; cursor: pointer;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
}
.chat-genmedia-btn:hover { background: rgba(102, 126, 234, 0.32); }
body[data-gtheme="dark"] .chat-genmedia-btn { background: rgba(102, 126, 234, 0.28); }
body[data-gtheme="dark"] .chat-genmedia-btn:hover { background: rgba(102, 126, 234, 0.45); }

.chat-call-join {
    background: #2e7d4f;
    color: #fff !important;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
}
.chat-call-end {
    background: none;
    border: 1px solid rgba(120, 100, 70, 0.3);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px 8px;
}
.gcall-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10080;
    padding: 20px;
}
.gcall-card {
    background: #201d19;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    padding: 34px 30px 26px;
    width: min(360px, 100%);
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    animation: gcallPulse 1.6s ease-in-out infinite;
}
@keyframes gcallPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) { .gcall-card { animation: none; } }
.gcall-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: #332f28;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    overflow: hidden;
}
.gcall-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gcall-name { font-size: 20px; font-weight: 750; margin-bottom: 4px; }
.gcall-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-bottom: 22px; }
.gcall-actions { display: flex; gap: 12px; justify-content: center; }
.gcall-actions button {
    border: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.gcall-answer { background: #2e7d4f; color: #fff; }
.gcall-answer:hover { background: #256742; }
.gcall-decline { background: #b3402e; color: #fff; }
.gcall-decline:hover { background: #96331f; }
body[data-gtheme="dark"] .chat-pane-call:hover { background: rgba(221, 203, 164, 0.13); }
body[data-gtheme="dark"] .chat-call-bubble { background: rgba(221, 203, 164, 0.08); border-color: rgba(221, 203, 164, 0.2); }
body[data-gtheme="dark"] .chat-call-live { border-color: #6fbf8f; background: rgba(111, 191, 143, 0.12); }
body[data-gtheme="dark"] .chat-call-missed { color: #e07a5f; border-color: rgba(224, 122, 95, 0.5); }

/* Vidéos en pièces jointes / générées — lecteurs inline (Messages + Tâches) */
.chat-att-videowrap, .gc-att-videowrap { max-width: 380px; }
.chat-att-video, .gc-att-video {
    width: 100%;
    border-radius: 12px;
    background: #000;
    display: block;
}
.gc-att-videowrap .gc-att-cap { display: block; font-size: 11px; margin-top: 4px; opacity: 0.7; }

/* =====================================================================
   CallRoom — salle d'appel intégrée (Phase 2 visio)
   ===================================================================== */
.groom-overlay {
    position: fixed;
    inset: 0;
    background: #14110d;
    z-index: 10070;
    display: flex;
}
.groom-shell { display: flex; flex-direction: column; width: 100%; height: 100%; }
.groom-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #201d19;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.groom-title { font-weight: 750; font-size: 14px; }
.groom-banner {
    font-size: 11.5px;
    background: rgba(224, 164, 74, 0.18);
    color: #e0a44a;
    border: 1px solid rgba(224, 164, 74, 0.4);
    padding: 2px 10px;
    border-radius: 999px;
    animation: groomBlink 2s ease-in-out infinite;
}
@keyframes groomBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .groom-banner { animation: none; } }
.groom-actions { margin-left: auto; display: flex; gap: 8px; }
.groom-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}
.groom-btn:hover { background: rgba(255, 255, 255, 0.15); }
.groom-btn.on { background: #e0a44a; border-color: #e0a44a; color: #201d19; font-weight: 700; }
.groom-btn-danger { background: #b3402e; border-color: #b3402e; }
.groom-btn-danger:hover { background: #96331f; }
.groom-body { flex: 1; display: flex; min-height: 0; }
.groom-stage { flex: 1; min-width: 0; position: relative; }
.groom-stage iframe { width: 100%; height: 100%; border: none; }
.groom-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    gap: 6px;
}
.groom-loading a { color: #DDCBA4; }
.groom-transcript {
    width: min(340px, 38vw);
    background: #1b1815;
    border-left: 1px solid rgba(221, 203, 164, 0.15);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.groom-tr-head {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(221, 203, 164, 0.12);
}
.groom-tr-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.groom-tr-seg { margin-bottom: 8px; }
.groom-tr-seg b { color: #DDCBA4; font-weight: 700; }
@media (max-width: 720px) {
    .groom-body { flex-direction: column; }
    .groom-transcript { width: 100%; height: 32vh; border-left: none; border-top: 1px solid rgba(221, 203, 164, 0.15); }
    .groom-btn span { display: none; }
}

/* Grille vidéo de la salle native (mesh) */
.groom-grid {
    display: grid;
    gap: 8px;
    padding: 10px;
    height: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
}
.groom-grid { position: relative; }
/* MA caméra en INCRUSTATION (coin bas-droit) dès qu'un autre participant est là */
.groom-grid.pip-self .groom-tile[data-self="1"] {
    position: absolute; right: 14px; bottom: 14px; z-index: 6;
    width: clamp(120px, 22%, 240px); height: auto; aspect-ratio: 16/10;
    border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.groom-tile.groom-leader .groom-tile-name::before { content: '👑 '; }
.groom-tile.groom-hand-up::after {
    content: '🖐'; position: absolute; top: 8px; left: 8px; z-index: 4;
    font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: groomHand 1.2s ease-in-out infinite;
}
@keyframes groomHand { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
.groom-mod {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s;
}
.groom-tile:hover .groom-mod { opacity: 1; }
/* Tactile : l'hôte doit pouvoir modérer (couper micro/cam, éjecter) au doigt. */
@media (hover: none) { .groom-mod { opacity: 1; } }
.groom-mod button {
    width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(20, 18, 14, 0.65); color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.groom-mod button:hover { background: rgba(179, 38, 30, 0.8); }
.groom-tile-status {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-weight: 700; font-size: 0.9rem;
    border-radius: inherit; text-align: center; padding: 8px;
}
.groom-tile-status.hidden { display: none; }
.groom-tile-failed { outline: 2px solid #b3261e; }
/* 🧙 Tuile « webcam » de Gandalf (mode réunion) */
.groom-tile--gandalf { outline: 2px solid rgba(120, 170, 255, 0.55); box-shadow: 0 0 24px rgba(120, 170, 255, 0.35); }
.groom-gandalf-cam { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.groom-gandalf-live {
    position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 5px;
    background: rgba(20, 18, 14, 0.6); color: #7fffa8; font-weight: 700; font-size: 0.72rem;
    padding: 3px 9px; border-radius: 999px; letter-spacing: .3px;
}
.groom-gandalf-live::before { content: ''; } /* le point ● est dans le texte */
.groom-tr-rec { padding: 18px 14px; text-align: center; font-weight: 600; color: var(--crm-ink, #e8e2d4); line-height: 1.5; }
.groom-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.groom-grid[data-count="3"], .groom-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
.groom-grid[data-count="5"], .groom-grid[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; }
.groom-grid[data-count="7"], .groom-grid[data-count="8"], .groom-grid[data-count="9"] { grid-template-columns: 1fr 1fr 1fr; }
.groom-tile.self-hidden { display: none; }
.groom-tile {
    position: relative;
    background: #0d0b09;
    border-radius: 14px;
    overflow: hidden;
    min-height: 120px;
}
.groom-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.groom-tile-name {
    position: absolute;
    left: 8px; bottom: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 999px;
}
.groom-controls {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.groom-ctl {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(30, 27, 22, 0.85);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.55;
}
.groom-ctl.on { opacity: 1; background: rgba(46, 125, 79, 0.85); border-color: rgba(46, 125, 79, 0.9); }
.groom-ctl:hover { transform: scale(1.06); }
.groom-stage { position: relative; }


/* ══════════ Salle d'appel : habillage IDENTITÉ GANDALF ══════════
   Surfaces brun chaud, doré Chanv (#DDCBA4/#D9BC77), pilules — la salle
   reste sombre (standard visio) mais parle la même langue que l'app. */
.groom-overlay { background: linear-gradient(135deg, #201d19 0%, #2a251e 55%, #201d19 100%); }
.groom-header {
    background: rgba(42, 37, 30, 0.92);
    border-bottom: 1px solid rgba(221, 203, 164, 0.16);
    color: #EFE7D6;
}
.groom-title { color: #EFE7D6; letter-spacing: 0.01em; }
.groom-banner {
    background: rgba(217, 188, 119, 0.16);
    color: #D9BC77;
    border-color: rgba(217, 188, 119, 0.45);
}
.groom-btn {
    border-radius: 999px;
    border-color: rgba(221, 203, 164, 0.3);
    color: #EFE7D6;
    background: rgba(221, 203, 164, 0.08);
    font-weight: 600;
}
.groom-btn:hover { background: rgba(221, 203, 164, 0.18); }
.groom-btn.on { background: #DDCBA4; border-color: #DDCBA4; color: #282828; }
.groom-btn-danger { background: rgba(179, 64, 46, 0.85); border-color: rgba(179, 64, 46, 0.9); color: #fff; }
.groom-ctl {
    border-color: rgba(221, 203, 164, 0.35);
    background: rgba(42, 37, 30, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.groom-ctl.on { background: #DDCBA4; border-color: #DDCBA4; color: #282828; opacity: 1; }
.groom-tile {
    background: #2a251e;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(221, 203, 164, 0.12);
}
.groom-tile video { border-radius: 0; }
.groom-tile-name {
    background: rgba(32, 29, 25, 0.75);
    color: #EFE7D6;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    left: 10px; bottom: 10px;
    backdrop-filter: blur(4px);
}
.groom-grid.pip-self .groom-tile[data-self="1"] { border: 2px solid rgba(221, 203, 164, 0.55); }
.groom-mod button { border-radius: 999px; background: rgba(42, 37, 30, 0.8); }
.groom-mod button:hover { background: #DDCBA4; color: #282828; }
.groom-tile-status { background: rgba(32, 29, 25, 0.68); color: #EFE7D6; }
.groom-transcript {
    background: #241F19;
    border-left: 1px solid rgba(221, 203, 164, 0.14);
}
.groom-tr-head { color: #D9BC77; font-weight: 800; }
.groom-tr-seg { color: #EFE7D6; }
.groom-tr-seg b { color: #b8a985; font-weight: 700; }


/* ══════════ Flèches ← de retour : VISIBLES partout (retour Dany 20/07) ══════════
   Cible toutes les classes de retour de l'app — pastille contrastée, bord
   doré, taille de cible confortable, lisible clair ET sombre. */
.chat-pane-back, .tasks-back, .actu-back, .chat-back,
.lc-topbar-back, .changelog-detail-back, .ai-sidebar-back {
    background: rgba(168, 134, 63, 0.14) !important;
    border: 1.5px solid rgba(168, 134, 63, 0.55) !important;
    color: #6b5a3a !important;
    border-radius: 12px !important;
    min-width: 40px; min-height: 36px;
    font-size: 17px !important;
    font-weight: 800 !important;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.chat-pane-back:hover, .tasks-back:hover, .actu-back:hover, .chat-back:hover,
.lc-topbar-back:hover, .changelog-detail-back:hover, .ai-sidebar-back:hover {
    background: rgba(168, 134, 63, 0.28) !important;
    transform: translateX(-2px);
}
body[data-gtheme="dark"] .chat-pane-back, body[data-gtheme="dark"] .tasks-back,
body[data-gtheme="dark"] .actu-back, body[data-gtheme="dark"] .chat-back,
body[data-gtheme="dark"] .lc-topbar-back, body[data-gtheme="dark"] .changelog-detail-back,
body[data-gtheme="dark"] .ai-sidebar-back {
    background: rgba(221, 203, 164, 0.14) !important;
    border-color: rgba(221, 203, 164, 0.5) !important;
    color: #DDCBA4 !important;
}

/* Exception : la sidebar de l'Agent IA est TOUJOURS sombre (fond terre), même
   en thème clair → le brun foncé « clair » ci-dessus y était illisible. Ce
   bouton garde la variante beige-sur-sombre dans LES DEUX thèmes. */
.ai-sidebar .ai-sidebar-back {
    background: rgba(221, 203, 164, 0.14) !important;
    border-color: rgba(221, 203, 164, 0.5) !important;
    color: #DDCBA4 !important;
}
.ai-sidebar .ai-sidebar-back:hover {
    background: rgba(221, 203, 164, 0.26) !important;
}

/* ── Ligne d'action unifiée des Tâches (David #1-5) ── */
.tasks-search-inline {
    width: 180px; max-width: 32vw;
    transition: width 0.2s;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
}
.tasks-search-inline:focus { width: 280px; }
.tasks-row-dup { border-radius: 999px; }
#tasksProjectsRow { flex-wrap: wrap; row-gap: 6px; }

/* Palette de la pastille de couleur (David #7) */
.tasks-color-dot { cursor: pointer; }
.tasks-color-dot:hover { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(168, 134, 63, 0.25); }
.tasks-color-pop {
    position: fixed; z-index: 9000;
    display: flex; gap: 8px; padding: 10px 12px;
    background: #FDFBF6; border: 1px solid rgba(168, 134, 63, 0.35);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.tasks-color-pop button {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7); cursor: pointer;
}
.tasks-color-pop button:hover { transform: scale(1.15); }
body[data-gtheme="dark"] .tasks-color-pop { background: #332f28; border-color: rgba(221, 203, 164, 0.3); }

/* #8-9 (David) : la rangée compteur disparaît quand vide (le nb vit dans la carte projet) */
.tasks-status-line:empty { display: none; }

/* Recherche dans la visionneuse de transcription */
.chat-tr-search {
    margin: 0 16px 10px; padding: 8px 14px;
    border-radius: 999px; border: 1px solid rgba(107, 90, 58, 0.3);
    font: inherit; font-size: 13px; background: transparent; color: inherit;
}
.chat-tr-turn mark { background: rgba(217, 188, 119, 0.45); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Carte fantôme « Créer un groupe » : MÊME silhouette que les dossiers fermés
   (languette 13px/5px en haut-gauche + corps 300×158) mais en pointillés. */
.tasks-folder-ghost { cursor: pointer; }
.tasks-folder-ghost .tfg-tab {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    margin-left: 8px; padding: 9px 22px 12px 15px; min-width: 60px;
    font-weight: 750; font-size: 15px; color: #8a7a5c;
    border: 2px dashed rgba(168, 134, 63, 0.45); border-bottom: none;
    border-radius: 13px 5px 0 0;
}
.tasks-folder-ghost .tfg-body {
    display: flex; align-items: center; justify-content: center;
    width: 300px; max-width: 44vw; height: 158px; margin-top: -1px;
    border: 2px dashed rgba(168, 134, 63, 0.45);
    border-radius: 0 14px 14px 14px;
    color: #8a7a5c; font-weight: 700; font-size: 0.98rem;
    transition: background 0.15s, border-color 0.15s;
}
.tasks-folder-ghost:hover .tfg-body,
.tasks-folder-ghost:hover .tfg-tab { background: rgba(168, 134, 63, 0.09); border-color: rgba(168, 134, 63, 0.7); }
body[data-gtheme="dark"] .tasks-folder-ghost .tfg-tab,
body[data-gtheme="dark"] .tasks-folder-ghost .tfg-body { border-color: rgba(221, 203, 164, 0.32); color: #b8a985; }
body[data-gtheme="dark"] .tasks-folder-ghost:hover .tfg-tab,
body[data-gtheme="dark"] .tasks-folder-ghost:hover .tfg-body { background: rgba(221, 203, 164, 0.07); border-color: rgba(221, 203, 164, 0.55); }

/* 📅 Agenda du jour (Aujourd'hui) */
.today-agenda { background: rgba(168, 134, 63, 0.07); border: 1px solid rgba(168, 134, 63, 0.2); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.today-agenda .ta-head { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }
.today-agenda .ta-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.9rem; }
.today-agenda .ta-time { font-weight: 700; min-width: 52px; color: #8a7a5c; font-variant-numeric: tabular-nums; }
.today-agenda .ta-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-agenda .ta-meet { text-decoration: none; }
body[data-gtheme="dark"] .today-agenda { background: rgba(221, 203, 164, 0.06); border-color: rgba(221, 203, 164, 0.18); }
body[data-gtheme="dark"] .today-agenda .ta-time { color: #b8a985; }

/* 📧 Courriels (Aujourd'hui) */
.today-agenda .ta-mail { text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 6px; }
.today-agenda .ta-mail:hover { background: rgba(168, 134, 63, 0.1); }
.today-agenda .ta-unread .ta-title { font-weight: 700; }
.today-agenda .ta-x { margin-left: auto; background: none; border: none; cursor: pointer; opacity: 0.6; }
.today-agenda .ta-x:hover { opacity: 1; }

/* Carte découverte + rangées courriel : texte TOUJOURS lisible */
.today-agenda .ta-head { color: inherit; display: flex; align-items: center; gap: 6px; }
.today-agenda .ta-row .ta-title { color: inherit; opacity: 0.92; }
.today-recent-item .trm-ava { font-size: 18px; }

/* 📬 Invitation Gmail (Aujourd'hui) — chaleureuse et fun */
.gm-discover {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin: 10px 0;
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(221, 203, 164, 0.22), rgba(168, 134, 63, 0.12) 60%, rgba(221, 203, 164, 0.18));
    border: 1px solid rgba(168, 134, 63, 0.35);
}
.gm-discover .gmd-emoji { font-size: 34px; transform: rotate(-8deg); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)); }
.gm-discover:hover .gmd-emoji { animation: gmdWiggle 0.6s ease-in-out; }
@keyframes gmdWiggle { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg) scale(1.1); } }
.gm-discover .gmd-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-discover .gmd-txt b { font-size: 0.98rem; color: inherit; }
.gm-discover .gmd-txt span { font-size: 0.83rem; opacity: 0.8; }
.gm-discover .gmd-cta { white-space: nowrap; border-radius: 999px; font-size: 13px; }
.gm-discover .ta-x { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 14px; }
.gm-discover .ta-x:hover { opacity: 1; }
.gm-discover .gmd-txt b { color: #3a3226; }
.gm-discover .gmd-txt span { color: #6b5a3a; opacity: 1; }
body[data-gtheme="dark"] .gm-discover {
    background: linear-gradient(120deg, rgba(221, 203, 164, 0.12), rgba(217, 188, 119, 0.06) 60%, rgba(221, 203, 164, 0.1));
    border-color: rgba(221, 203, 164, 0.3);
}
body[data-gtheme="dark"] .gm-discover .gmd-txt b { color: #F0EAD9; }
body[data-gtheme="dark"] .gm-discover .gmd-txt span { color: #b8a985; }
body[data-gtheme="dark"] .gm-discover .ta-x { color: #b8a985; }
@media (prefers-reduced-motion: reduce) { .gm-discover:hover .gmd-emoji { animation: none; } }
/* Mobile : l'invitation s'empile proprement — texte à côté de l'enveloppe,
   bouton pleine largeur dessous, ✕ ancré au coin (fini la colonne étrange). */
@media (max-width: 640px) {
    .gm-discover { flex-wrap: wrap; position: relative; padding-right: 16px; }
    .gm-discover .gmd-emoji { font-size: 30px; }
    .gm-discover .gmd-txt { flex: 1 1 0; min-width: 0; padding-right: 26px; }
    .gm-discover .gmd-cta { flex: 1 1 100%; margin-top: 8px; padding: 10px; text-align: center; justify-content: center; }
    .gm-discover .ta-x { position: absolute; top: 10px; right: 10px; }
}

/* Lignes COURRIEL du panneau récents : même gabarit que les messages */
.today-recent-item.trm-mail { text-decoration: none; display: flex; align-items: center; gap: 10px; overflow: hidden; }
/* PAS de color:inherit ici : les .trm-name/.trm-preview de shell.css portent
   déjà les bonnes couleurs de thème (var(--gs-ink)) — les écraser rendait le
   texte noir sur fond sombre en dark. L'ancre reset juste sa couleur de lien. */
.today-recent-item.trm-mail, .today-recent-item.trm-mail:visited { color: var(--gs-ink, #333); }
.today-recent-item.trm-mail .trm-body { min-width: 0; flex: 1; }
.today-recent-item.trm-mail .trm-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm-mailava {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--gs-panel-2, #E9E2D0); color: var(--gs-ink, #4A4238);
}
.trm-mailava svg { width: 17px; height: 17px; display: block; }
body[data-gtheme="dark"] .trm-mailava { background: rgba(221, 203, 164, 0.16); color: #DDCBA4; }

/* Carte fantôme « Créer un groupe » alignée sur les cartes sans languette */
.tasks-folder-ghost .tfg-tab{display:none}
.tasks-folder-ghost .tfg-body{border-radius:14px}

/* Panneau images par langue (LECLAUDE) */
.lc-langimg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.lc-langimg-modal { background: #fff; color: #1a1a1a; width: 100%; max-width: 480px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lc-langimg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.1); }
.lc-langimg-close { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; }
.lc-langimg-rows { padding: 8px 12px 16px; }
.lc-langimg-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.lc-langimg-row:last-child { border-bottom: none; }
.lc-langimg-thumb { width: 84px; height: 52px; object-fit: cover; border-radius: 6px; background: #eee; flex: none; }
.lc-langimg-empty { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999; text-align: center; }
.lc-langimg-meta { flex: 1; display: flex; flex-direction: column; }
.lc-langimg-lang { font-weight: 700; }
.lc-langimg-sub { font-size: 12px; color: #888; }
.lc-langimg-actions { display: flex; gap: 6px; }
.lc-langimg-choose, .lc-langimg-reset { border: 1px solid rgba(0,0,0,.15); background: #f5f5f0; color: #1a1a1a; border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.lc-langimg-badge { position: absolute; top: 8px; right: 8px; font-size: 12px; background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: 1px 6px; z-index: 3; }
@media (prefers-color-scheme: dark) {
  .lc-langimg-modal { background: #1f1f24; color: #eee; }
  .lc-langimg-choose, .lc-langimg-reset { background: #2c2c33; color: #eee; border-color: rgba(255,255,255,.15); }
  .lc-langimg-sub { color: #aaa; }
}
body[data-gtheme="dark"] .lc-langimg-modal { background: #1f1f24; color: #eee; }
body[data-gtheme="dark"] .lc-langimg-choose, body[data-gtheme="dark"] .lc-langimg-reset { background: #2c2c33; color: #eee; border-color: rgba(255,255,255,.15); }
body[data-gtheme="dark"] .lc-langimg-sub { color: #aaa; }


/* ── Habillage d'image DANS le texte des articles (éditeur + rendu publié).
   Classes posées par la mini-barre au clic sur une image dans l'éditeur. ── */
img.lc-float-left, img.lc-float-right {
    width: 45%;
    height: auto;
    border-radius: 6px;
}
img.lc-float-left  { float: left;  margin: 4px 18px 8px 0; }
img.lc-float-right { float: right; margin: 4px 0 8px 18px; }
@media (max-width: 640px) {
    img.lc-float-left, img.lc-float-right { float: none; width: 100%; margin: 8px 0; }
}
/* Sélection dans l'éditeur */
.lc-editor-content img { cursor: pointer; }
.lc-editor-content img.lc-img-selected { outline: 2px solid var(--chanv-terre, #8a6d3b); outline-offset: 2px; }
/* Mini-barre flottante */
.lc-imgfloat-bar {
    position: absolute;
    z-index: 10000;
    display: flex;
    gap: 4px;
    padding: 5px 6px;
    background: var(--chanv-blanc, #fff);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.lc-imgfloat-btn {
    border: 1px solid transparent;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 7px;
    cursor: pointer;
}
.lc-imgfloat-btn:hover { background: rgba(0,0,0,.06); }
.lc-imgfloat-btn.active { border-color: var(--chanv-terre, #8a6d3b); background: rgba(138,109,59,.12); }
body[data-gtheme="dark"] .lc-imgfloat-bar { background: #2a2620; border-color: rgba(255,255,255,.14); }
body[data-gtheme="dark"] .lc-imgfloat-btn:hover { background: rgba(255,255,255,.08); }


/* Heure PAR MESSAGE sur les messages groupés (comme Basecamp) — discrète,
   alignée à la bulle. La rupture de groupe à 15 min remet l'en-tête complète. */
.chat-msg-time-grouped {
    font-size: 11px;
    color: rgba(0,0,0,.38);
    align-self: center;
    margin-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
body[data-gtheme="dark"] .chat-msg-time-grouped { color: rgba(255,255,255,.35); }


/* ── Liens dans les articles LECLAUDE : élégants (soulignés, couleur du
   texte — pas de bleu/violet navigateur). Vaut pour les liens auto-détectés
   (lc-link) ET les <a> déjà présents dans le contenu. ── */
.lc-art-body a, .lc-card-text a, a.lc-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2.5px;
    text-decoration-color: rgba(0,0,0,.45);
    word-break: break-word;
    transition: text-decoration-color .15s;
}
.lc-art-body a:hover, .lc-card-text a:hover, a.lc-link:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: #E3000B; /* rouge de marque au survol */
}
.lc-art-body a:visited, .lc-card-text a:visited, a.lc-link:visited { color: inherit; }
body[data-gtheme="dark"] .lc-art-body a, body[data-gtheme="dark"] .lc-card-text a, body[data-gtheme="dark"] a.lc-link {
    text-decoration-color: rgba(255,255,255,.4);
}


/* ── Images inline PAR LANGUE : badge 🌐 en édition quand une variante EN/ES
   existe, et rangée EN/ES du sous-panneau de la barre d'image. ── */
.lc-editor-content figure.lc-inline-img { position: relative; }
.lc-editor-content figure.lc-inline-img:has(img[data-src-en], img[data-src-es])::after {
    content: '🌐';
    position: absolute;
    top: 6px; right: 6px;
    font-size: 14px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    padding: 2px 4px;
    pointer-events: none;
}
.lc-img-tb-langrow { display: flex; gap: 4px; align-items: center; }


/* ══════════ LECLAUDE — Statistiques de lecture (Super Admin) ══════════
   Préfixe lc-stat-* volontairement distinct de .sup-* : le magazine LECLAUDE
   est TOUJOURS sur fond clair (.leclaude-view), même en thème sombre — les
   surcharges body[data-gtheme="dark"] de .sup-* y donneraient du texte clair
   sur fond clair. Aucune variante sombre ici, c'est voulu. */
.lc-stat-pick { margin-bottom: 20px; font-size: 13px; color: #555; }
.lc-stat-pick select { margin-left: 8px; }
.lc-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 620px) { .lc-stats-grid { grid-template-columns: 1fr 1fr; } }
.lc-stat { background: #fff; border: 1px solid rgba(107,90,58,.16); border-radius: 14px; padding: 16px; text-align: center; }
.lc-stat-n { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; line-height: 1.15; }
.lc-stat-l { font-size: .74rem; color: #8a7a5c; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.lc-stat-h { font-size: .72rem; color: #a9998a; margin-top: 3px; }
.lc-stat-block { margin-bottom: 28px; }
.lc-stat-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 10px; color: #1a1a1a; }
.lc-stat-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .lc-stat-two { grid-template-columns: 1fr; } }
.lc-stat-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .82rem; color: #1a1a1a; }
.lc-stat-bar-name { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.lc-stat-bar { flex: 1; height: 8px; border-radius: 6px; background: #EFE7D4; overflow: hidden; }
.lc-stat-bar i { display: block; height: 100%; background: #A8863F; }
.lc-stat-bar-n { width: 92px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-stat-empty { font-size: .85rem; color: #8a7a5c; font-style: italic; }
.lc-stat-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.lc-stat-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7a5c; border-bottom: 1px solid rgba(107,90,58,.18); padding: 6px 8px; }
.lc-stat-table td { padding: 7px 8px; border-bottom: 1px solid rgba(107,90,58,.08); font-variant-numeric: tabular-nums; }
.lc-stat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-stat-chip { background: #EFE7D4; color: #6b5a3a; border-radius: 999px; padding: 4px 11px; font-size: .78rem; }

/* ══════════ Mentions @ (composeur + bulles) ══════════ */
.chat-mention-pop {
    position: absolute; bottom: calc(100% + 8px); left: 12px;
    min-width: 240px; max-width: min(330px, calc(100% - 24px));
    background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16); z-index: 60; padding: 4px;
    max-height: 262px; overflow-y: auto;
}
.chat-mention-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; background: none; border-radius: 9px;
    cursor: pointer; font-size: .92rem; color: inherit; text-align: left;
}
.chat-mention-item.is-active, .chat-mention-item:hover { background: rgba(0, 0, 0, .06); }
.chat-mention-item img, .chat-mention-init {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px;
}
.chat-mention-init {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gs-accent, #A8863F); color: #fff; font-weight: 700; font-size: .8rem;
}
.chat-mention-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-gtheme="dark"] .chat-mention-pop { background: #23262b; border-color: rgba(255, 255, 255, .14); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
body[data-gtheme="dark"] .chat-mention-item.is-active, body[data-gtheme="dark"] .chat-mention-item:hover { background: rgba(255, 255, 255, .09); }

/* Pastille @Nom dans les bulles — @moi ressort davantage */
.chat-mention { background: rgba(168, 134, 63, .16); color: #7a5f22; border-radius: 6px; padding: 0 4px; font-weight: 600; }
.chat-mention-me { background: rgba(245, 166, 35, .30); color: #8a5a00; }
body[data-gtheme="dark"] .chat-mention { background: rgba(212, 181, 116, .20); color: #e8cf9a; }
body[data-gtheme="dark"] .chat-mention-me { background: rgba(245, 166, 35, .32); color: #ffd98a; }
/* Dans MA bulle (fond accent) : rester lisible dans les deux thèmes */
.chat-msg-own .chat-mention, .chat-msg-own .chat-mention-me { background: rgba(255, 255, 255, .28); color: inherit; }

/* ══════════ Projet disparu (lien mort) — clin d'œil GANDALF ══════════ */
.tasks-vanished { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 16px 46px; }
.tasks-vanished img { width: min(430px, 88vw); border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .38); }
.tasks-vanished h2 { margin: 8px 0 0; font-size: 1.45rem; letter-spacing: .05em; }
.tasks-vanished p { margin: 0; max-width: 48ch; opacity: .85; line-height: 1.5; }
.tasks-vanished .tv-back { margin-top: 10px; padding: 11px 24px; border: 0; border-radius: 999px; background: var(--gs-accent, #A8863F); color: #fff; font-weight: 600; cursor: pointer; font-size: .95rem; }
.tasks-vanished .tv-back:hover { filter: brightness(1.08); }

/* ══════════ GIFs maison (bac commun injecté dans le flux GIPHY) ══════════ */
.chat-gif-ours { position: relative; display: inline-block; }
.chat-gif-ours-badge {
    position: absolute; top: 4px; left: 4px; font-size: .72rem;
    background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 1px 4px; pointer-events: none;
}
.chat-gif-ours-del {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff;
    font-size: .85rem; line-height: 1; cursor: pointer; display: none;
}
.chat-gif-ours:hover .chat-gif-ours-del { display: block; }
.chat-gif-add-link { cursor: pointer; color: var(--gs-accent, #A8863F); font-weight: 600; }
.chat-gif-add-link:hover { text-decoration: underline; }

/* ---------- Sous-tâches (checklist enrichi) ---------- */
.tasks-subtasks { margin: 18px 0 4px; }
.tasks-subtasks-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tasks-subtasks-title { font-weight: 600; }
.tasks-subtasks-count { font-size: 12px; color: var(--gs-muted, #8a8a8a); }
.tasks-subtasks-bar { height: 6px; border-radius: 3px; background: var(--gs-line, #e6e6e6); overflow: hidden; margin-bottom: 10px; }
.tasks-subtasks-bar-fill { height: 100%; background: var(--gs-accent, #4a9e6f); transition: width .2s ease; }
.tasks-subtasks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tasks-subtask { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-radius: 6px; }
.tasks-subtask:hover { background: var(--gs-hover, rgba(127,127,127,.08)); }
.tasks-subtask-text { flex: 1; }
.tasks-subtask.done .tasks-subtask-text { text-decoration: line-through; color: var(--gs-muted, #8a8a8a); }
.tasks-subtask-check, .tasks-subtask-del { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; }
.tasks-subtask-del { color: var(--gs-muted, #8a8a8a); opacity: 0; transition: opacity .15s; }
.tasks-subtask:hover .tasks-subtask-del { opacity: 1; }
.tasks-subtask-due { font-size: 11px; color: var(--gs-muted, #8a8a8a); white-space: nowrap; }
.tasks-avatar-xs { width: 18px; height: 18px; font-size: 10px; }
.tasks-subtask-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tasks-subtask-add input[type="text"] { flex: 1; min-width: 160px; }
.tasks-subtask-badge { display: inline-flex; align-items: center; gap: 3px; }
.tasks-subtask-move { background: none; border: none; cursor: pointer; color: var(--gs-muted, #8a8a8a); opacity: 0; transition: opacity .15s; font-size: 13px; line-height: 1; padding: 2px; }
.tasks-subtask:hover .tasks-subtask-move { opacity: .7; }
.tasks-subtask:hover .tasks-subtask-move:disabled { opacity: .15; }
.tasks-subtask-move:not(:disabled):hover { opacity: 1; }
.tasks-subtask-move:disabled { cursor: default; }

/* Cibles tactiles chat (audit 2026-08-03 S18/S21/S25) : en tactile, les
   cibles réactions/pièces jointes montent à ≥40px — alignées sur le
   composeur (38-44px). Le desktop garde ses tailles compactes. */
@media (hover: none) {
    .chat-msg-dots,
    .cmm-reacts button,
    .chat-react-choice,
    .chat-attach-x {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .chat-react-palette-full { gap: 6px; width: min(320px, calc(100vw - 16px)); }
    .chat-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
    .cmm-reacts { flex-wrap: wrap; }
    .chat-msg-menu { max-width: min(320px, calc(100vw - 16px)); }
}

/* Bandeau d'échec d'envoi (audit S28) — visible clair ET sombre */
.chat-send-fail {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 0 8px 4px;
    border-radius: 10px; font-size: 13px;
    background: color-mix(in srgb, #c0392b 12%, #fff);
    border: 1px solid color-mix(in srgb, #c0392b 45%, transparent);
}
.chat-send-fail span { flex: 1; min-width: 0; }
.chat-send-fail-online { outline: 2px solid #2e7d32; }
.chat-send-fail-x { background: none; border: none; cursor: pointer; min-width: 40px; min-height: 40px; }
body[data-gtheme="dark"] .chat-send-fail {
    background: color-mix(in srgb, #c0392b 25%, #332f28);
    border-color: color-mix(in srgb, #c0392b 55%, transparent);
    color: #f2e6da;
}

/* Repli hors shell natif (PWA plein écran) : le composeur se protège
   lui-même de la barre gestuelle (audit S32). Sans effet quand le
   conteneur .chat-view.show-pane applique déjà l'inset (shell natif). */
.chat-composer { --chat-composer-pb: 12px; padding-bottom: max(var(--chat-composer-pb, 0px), env(safe-area-inset-bottom)); }

/* =====================================================================
   ÉDITEUR DE TEXTE ENRICHI DES MESSAGES (GandalfRichText — js/richtext.js)
   Deux familles :
     .grt-bar / .grt-editor  → la SAISIE (WYSIWYG dans le composeur du chat)
     .grt-*  sous .chat-msg-content → le RENDU dans les bulles
   Le mode sombre est obligatoire ici : le hub bascule via
   body[data-gtheme="dark"] et n'utilise pas prefers-color-scheme.
   ===================================================================== */

/* ── Saisie ── */
.grt-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
/* Le <textarea> reste la source de vérité de la valeur, mais il ne doit jamais
   se voir. `clip` masque bien la BOÎTE — pas le CURSEUR : iOS le dessinait à la
   position naturelle du champ, c'est-à-dire juste sous la zone d'édition, d'où
   un curseur bleu flottant hors du cadre.
   `caret-color: transparent` supprime précisément ce curseur, et l'ancrage
   top/left dans un .grt-wrap positionné évite qu'il se place ailleurs.
   On n'utilise PAS `left:-9999px` : cela créerait un débordement horizontal. */
.grt-wrap{position:relative}
.grt-hidden-source{position:absolute!important;top:0!important;left:0!important;
    width:1px!important;height:1px!important;
    padding:0!important;margin:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    caret-color:transparent!important;color:transparent!important;pointer-events:none!important}
.grt-bar{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding:3px 2px;margin-bottom:2px}
.grt-bar::-webkit-scrollbar{display:none}
.grt-btn{flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border:1px solid transparent;
    background:none;border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px;
    line-height:1;color:#4d463b;opacity:.65;transition:opacity .12s,background .12s}
.grt-btn:hover{opacity:1;background:rgba(168,134,63,.12)}
.grt-btn[aria-pressed="true"]{opacity:1;background:rgba(168,134,63,.18);border-color:rgba(168,134,63,.5);color:#8a6d2f}
.grt-sep{flex:0 0 auto;width:1px;height:18px;background:rgba(0,0,0,.12);margin:0 4px}
.grt-editor{min-height:38px;max-height:220px;overflow-y:auto;padding:8px 10px;outline:none;
    border-radius:10px;font-family:inherit;font-size:14px;line-height:1.45;color:#2b2620;
    background:transparent;word-break:break-word}
.grt-editor:focus{outline:none}
.grt-editor.grt-empty:before{content:attr(data-placeholder);opacity:.45;pointer-events:none}
/* iOS zoome sur tout champ < 16px : on neutralise ça sur mobile. */
@media (max-width:640px){ .grt-editor{font-size:16px} .grt-btn{min-width:34px;height:34px} }

body[data-gtheme="dark"] .grt-btn{color:rgba(255,255,255,.75)}
body[data-gtheme="dark"] .grt-btn:hover{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .grt-btn[aria-pressed="true"]{background:rgba(221,203,164,.2);
    border-color:rgba(221,203,164,.45);color:#ddcba4}
body[data-gtheme="dark"] .grt-sep{background:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .grt-editor{color:rgba(255,255,255,.9)}

/* ── Mise en forme : saisie ET rendu partagent la même allure ── */
.grt-editor blockquote,.chat-msg-content .grt-quote{border-left:3px solid rgba(168,134,63,.55);
    margin:5px 0;padding:1px 0 1px 10px;color:inherit;opacity:.9}
.grt-editor ul,.grt-editor ol,.chat-msg-content .grt-ul,.chat-msg-content .grt-ol{margin:4px 0;padding-left:22px}
.grt-editor li,.chat-msg-content li{margin:1px 0}
.grt-editor code,.chat-msg-content .grt-code{background:rgba(120,110,90,.14);padding:1px 5px;
    border-radius:5px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.92em}
.grt-editor pre,.chat-msg-content .grt-pre{background:rgba(120,110,90,.12);padding:8px 10px;
    border-radius:8px;overflow-x:auto;margin:5px 0}
.grt-editor pre code,.chat-msg-content .grt-pre code{background:none;padding:0}
.grt-editor mark,.chat-msg-content .grt-mark{background:rgba(255,214,102,.55);color:inherit;
    padding:0 2px;border-radius:3px}
/* Surligneur couleurs (spec 2026-08-17, ticket tnOlYluI) — allowlist, clair/sombre.
   !important : sinon le jaune générique « .grt-editor mark » ci-dessus gagne
   en spécificité dans l'éditeur. Classes globales : chat, commentaires,
   descriptions de tâches partagent le même rendu. */
.grt-mark-vert{background:rgba(105,219,124,.45)!important;color:inherit}
.grt-mark-bleu{background:rgba(102,178,255,.45)!important;color:inherit}
.grt-mark-rose{background:rgba(255,128,171,.45)!important;color:inherit}
body[data-gtheme="dark"] .grt-mark-vert{background:rgba(105,219,124,.28)!important;color:#fff}
body[data-gtheme="dark"] .grt-mark-bleu{background:rgba(102,178,255,.28)!important;color:#fff}
body[data-gtheme="dark"] .grt-mark-rose{background:rgba(255,128,171,.30)!important;color:#fff}
/* Split-button surligneur de la barre grt */
.grt-hl{display:inline-flex;position:relative;align-items:center}
.grt-hl-arrow{padding:0 3px;font-size:10px;min-width:0}
.grt-hl-pop{position:absolute;top:100%;left:0;display:flex;gap:5px;padding:6px;background:var(--bg-card,#fff);
    border:1px solid rgba(0,0,0,.14);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:40}
body[data-gtheme="dark"] .grt-hl-pop{background:#2a2a2e;border-color:rgba(255,255,255,.14)}
.grt-hl-swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.grt-editor h1,.grt-editor h2,.grt-editor h3,.chat-msg-content .grt-h{font-size:1.08em;
    font-weight:750;margin:6px 0 2px;line-height:1.3}
.grt-editor hr,.chat-msg-content .grt-hr{border:none;border-top:1px solid rgba(120,110,90,.28);margin:8px 0}
.chat-msg-content .grt-p{margin:0}
.chat-msg-content .grt-p + .grt-p{margin-top:3px}
.grt-editor img.grt-img,.chat-msg-content img.grt-img{max-width:100%;border-radius:8px;vertical-align:middle}
.chat-msg-content .grt-link{text-decoration:underline}

body[data-gtheme="dark"] .grt-editor code,
body[data-gtheme="dark"] .chat-msg-content .grt-code,
body[data-gtheme="dark"] .grt-editor pre,
body[data-gtheme="dark"] .chat-msg-content .grt-pre{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .grt-editor mark,
body[data-gtheme="dark"] .chat-msg-content .grt-mark{background:rgba(255,214,102,.34);color:#fff}
body[data-gtheme="dark"] .grt-editor hr,
body[data-gtheme="dark"] .chat-msg-content .grt-hr{border-top-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .grt-editor blockquote,
body[data-gtheme="dark"] .chat-msg-content .grt-quote{border-left-color:rgba(221,203,164,.5)}

/* ── Balayage des lignes « Messages et courriels » (vue Aujourd'hui) ──
   Droite = marquer lu · Gauche = masquer.
   Le repère est RÉVÉLÉ sous la ligne pendant le geste : l'utilisateur voit ce
   qui va se passer et peut faire marche arrière tant qu'il n'a pas relâché.
   Il ne s'allume (opacité pleine) qu'une fois le seuil de validation franchi. */
.trm-swipe { position: relative; }
.trm-swipe-act {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: space-between; padding: 0 18px; border-radius: 12px;
    pointer-events: none; opacity: 0; transition: opacity .12s ease;
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.trm-swipe-act .trm-swipe-read { color: #1c6b3a; }
.trm-swipe-act .trm-swipe-hide { color: #8a5a2f; margin-left: auto; }
/* Seul le côté vers lequel on glisse est visible. */
.trm-sw-right .trm-swipe-act { opacity: .5; background: rgba(46,160,90,.14); }
.trm-sw-left  .trm-swipe-act { opacity: .5; background: rgba(168,134,63,.14); }
.trm-sw-right .trm-swipe-hide, .trm-sw-left .trm-swipe-read { visibility: hidden; }
/* Seuil franchi : le geste est « armé », relâcher validera. */
.trm-sw-armed.trm-sw-right .trm-swipe-act { opacity: 1; background: rgba(46,160,90,.22); }
.trm-sw-armed.trm-sw-left  .trm-swipe-act { opacity: 1; background: rgba(168,134,63,.22); }

body[data-gtheme="dark"] .trm-swipe-act .trm-swipe-read { color: #7ee0a4; }
body[data-gtheme="dark"] .trm-swipe-act .trm-swipe-hide { color: #ddcba4; }
body[data-gtheme="dark"] .trm-sw-right .trm-swipe-act { background: rgba(46,160,90,.2); }
body[data-gtheme="dark"] .trm-sw-left  .trm-swipe-act { background: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .trm-sw-armed.trm-sw-right .trm-swipe-act { background: rgba(46,160,90,.3); }
body[data-gtheme="dark"] .trm-sw-armed.trm-sw-left  .trm-swipe-act { background: rgba(221,203,164,.24); }

/* ── Composeur du chat AVEC éditeur enrichi (maquette 2026-08-13) ─────
   Rangée 1 : le CHAMP, large et redimensionnable.
   Rangée 2 : outils ronds · séparateur · bouton « Aa » … emoji · envoi.
   La mise en forme n'occupe plus de place en permanence : elle vit dans une
   infobulle ouverte par « Aa ». Le composeur redevient calme au repos.
   Tout est gardé par :has(.grt-editor) — sans éditeur enrichi monté, la
   disposition d'origine reste intacte. */
.chat-composer .grt-wrap { flex: 1 1 auto; min-width: 0; }
.chat-composer .grt-editor {
    border: 1px solid rgba(168,134,63,.55); border-radius: 14px; background: #fff;
    padding: 14px 16px; font-size: 15px; line-height: 1.5; color: #2b2620;
    min-height: 96px; max-height: 40vh; overflow-y: auto;
    resize: vertical;            /* poignée en bas à droite, comme la maquette */
}
.chat-composer .grt-editor:focus { border-color: var(--chanv-or, #A8863F); box-shadow: 0 0 0 3px rgba(168,134,63,.10); }
body[data-gtheme="dark"] .chat-composer .grt-editor {
    background: #2b2823; border-color: rgba(221,203,164,.3); color: rgba(255,255,255,.92);
}

/* Disposition en deux rangées, à toutes les largeurs. */
.chat-composer-row:has(.grt-editor) { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.chat-composer-row:has(.grt-editor) .grt-wrap { flex: 0 0 100%; order: 0; }
.chat-composer-row:has(.grt-editor) .chat-tools-expand,
.chat-composer-row:has(.grt-editor) .chat-tools-left,
.chat-composer-row:has(.grt-editor) .chat-fmt-slot,
.chat-composer-row:has(.grt-editor) .chat-rec-bar { order: 1; }
/* Emoji et envoi calés à DROITE. On fait absorber l'espace libre par le bloc
   de mise en forme plutôt que par une marge auto sur l'emoji : cette marge
   consommait toute la place et poussait le bouton d'envoi à la ligne suivante,
   seul et aligné à gauche, dès que la rangée devenait étroite. */
.chat-composer-row:has(.grt-editor) .chat-fmt-slot { flex: 1 1 auto; }
.chat-composer-row:has(.grt-editor) #chatEmojiBtn { order: 2; }
.chat-composer-row:has(.grt-editor) .chat-send { order: 3; }

/* Outils ronds façon maquette. */
.chat-composer-row:has(.grt-editor) .chat-tool-btn {
    width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(40,34,24,.16); background: #fff; font-size: 17px;
}
.chat-composer-row:has(.grt-editor) .chat-tool-btn:hover { border-color: var(--chanv-or, #A8863F); }
body[data-gtheme="dark"] .chat-composer-row:has(.grt-editor) .chat-tool-btn {
    background: #2b2823; border-color: rgba(221,203,164,.22);
}
/* Bouton d'envoi : disque plein, la seule couleur pleine du composeur. */
.chat-composer-row:has(.grt-editor) .chat-send {
    width: 52px; height: 52px; min-width: 52px; padding: 0; border-radius: 50%;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
}

/* ── Bouton « Aa » + infobulle de mise en forme ── */
.chat-fmt-slot { display: inline-flex; align-items: center; gap: 10px; }
/* Filet de séparation entre les outils et la mise en forme (maquette). */
.chat-fmt-slot::before {
    content: ''; width: 1px; height: 24px; background: rgba(40,34,24,.16);
}
body[data-gtheme="dark"] .chat-fmt-slot::before { background: rgba(221,203,164,.22); }
.grt-fmt { position: relative; display: inline-flex; }
.grt-fmt-btn {
    width: 42px; height: 42px; border: 1px solid transparent; border-radius: 12px;
    background: none; cursor: pointer; font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px; font-weight: 700; color: #6b5a3a; line-height: 1;
    transition: background .12s, color .12s;
}
.grt-fmt-btn:hover { background: rgba(168,134,63,.10); }
.grt-fmt-btn.on { background: rgba(168,134,63,.16); color: var(--chanv-or, #A8863F); }
body[data-gtheme="dark"] .grt-fmt-btn { color: #ddcba4; }
body[data-gtheme="dark"] .grt-fmt-btn:hover { background: rgba(221,203,164,.12); }
body[data-gtheme="dark"] .grt-fmt-btn.on { background: rgba(221,203,164,.2); color: #E8CD8C; }

/* L'infobulle s'ouvre AU-DESSUS du bouton : sous le champ, elle recouvrirait
   le texte qu'on est en train de mettre en forme. */
.grt-bar.grt-pop {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 40; display: flex; align-items: center; gap: 2px;
    background: #fff; border-radius: 14px; padding: 8px 10px;
    box-shadow: 0 8px 28px rgba(40,34,24,.16); border: 1px solid rgba(40,34,24,.08);
    overflow: visible;
}
.grt-bar.grt-pop[hidden] { display: none; }
/* Petite flèche vers le bouton — l'infobulle doit dire d'où elle vient. */
.grt-bar.grt-pop::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #fff;
}
body[data-gtheme="dark"] .grt-bar.grt-pop { background: #2f2b24; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .grt-bar.grt-pop::after { border-top-color: #2f2b24; }
.grt-bar.grt-pop .grt-btn { min-width: 36px; height: 36px; font-size: 15px; }

@media (max-width: 640px) {
    /* Mobile : mêmes rangées, tailles resserrées pour que la rangée d'outils
       tienne sur UNE ligne. Sans ce resserrement, emoji et envoi passaient à la
       ligne suivante et le bouton d'envoi se retrouvait seul, aligné à gauche. */
    .chat-composer .grt-editor { font-size: 16px; min-height: 80px; padding: 12px 14px; }
    .chat-composer-row:has(.grt-editor) { column-gap: 4px; }
    .chat-composer-row:has(.grt-editor) .chat-tools-left { gap: 4px; }
    .chat-composer-row:has(.grt-editor) .chat-tool-btn { width: 34px; height: 34px; min-width: 34px; font-size: 15px; }
    .chat-composer-row:has(.grt-editor) .chat-send { width: 42px; height: 42px; min-width: 42px; font-size: 17px; }
    .chat-composer-row:has(.grt-editor) .chat-fmt-slot { gap: 6px; min-width: 0; }
    .grt-fmt-btn { width: 34px; height: 34px; font-size: 16px; }
    /* L'infobulle ne doit jamais déborder de l'écran sur un petit mobile. */
    .grt-bar.grt-pop { left: 0; transform: none; max-width: calc(100vw - 32px); overflow-x: auto; }
    .grt-bar.grt-pop::after { left: 20px; transform: none; }
}

/* Enregistrement vocal : la règle d'origine masquait « .chat-composer textarea »,
   qui n'est plus la surface visible — l'éditeur enrichi restait donc affiché EN
   MÊME TEMPS que la barre rouge d'enregistrement. */
.chat-composer.is-recording .grt-wrap,
.chat-composer.is-recording .grt-bar { display: none; }
/* Envoi en cours : `disabled` n'existe pas sur un contenteditable — l'adaptateur
   pose cette classe pour que l'état soit VISIBLE autant que réel. */
.chat-composer .grt-editor.grt-disabled { opacity: .55; pointer-events: none; }

/* ── Réordonner les tâches par glisser-déposer (vue Listes) ───────────
   Une zone de dépôt = une SECTION. Le curseur « grab » n'apparaît qu'au
   survol : afficher une poignée permanente alourdirait des listes déjà
   denses, et toute la carte est saisissable. */
.tasks-dropzone { min-height: 2px; }
.tasks-card[draggable="true"] { cursor: grab; }
.tasks-card[draggable="true"]:active { cursor: grabbing; }
/* La carte saisie reste visible (on doit voir CE qu'on déplace) mais s'efface
   assez pour que l'aperçu d'insertion derrière elle se lise. */
.tasks-card-dragging {
    opacity: .45; transform: scale(.985);
    box-shadow: 0 6px 18px rgba(40,34,24,.16);
}
/* Section active : un liseré discret confirme où le dépôt aura lieu. */
.tasks-dropzone.tasks-dz-over {
    background: rgba(168,134,63,.05);
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.28);
    border-radius: 10px;
}
body[data-gtheme="dark"] .tasks-card-dragging { box-shadow: 0 6px 18px rgba(0,0,0,.45); }
body[data-gtheme="dark"] .tasks-dropzone.tasks-dz-over {
    background: rgba(221,203,164,.06);
    box-shadow: inset 0 0 0 1px rgba(221,203,164,.3);
}
/* Pointeur grossier (tactile) : le glisser HTML5 n'y est pas fiable et
   entrerait en conflit avec le défilement. On neutralise proprement plutôt
   que d'offrir un geste qui échoue une fois sur deux. */
@media (pointer: coarse) {
    .tasks-card[draggable="true"] { cursor: default; }
}

/* ── Vue Projets : en-têtes de section, tri, bascule, menu ⋮ ──────────
   Ces titres structurent la page (« ⭐ Favoris », « 📁 Tous les projets ») :
   ils sont volontairement PLUS LISIBLES que les étiquettes de groupe
   (.tasks-group-label, petites et en majuscules) — ce ne sont pas des
   étiquettes, ce sont des repères de navigation. */
.tasks-sec-head { display: flex; align-items: center; gap: 10px; margin: 26px 2px 12px; }
/* nowrap + flex-shrink:0 : le filet extensible (.tsh-rule) comprimait le
   titre jusqu'à le couper en deux lignes, alors que la place ne manquait pas. */
.tsh-title { font-size: 17px; font-weight: 750; color: #2b2620; letter-spacing: -.01em;
    white-space: nowrap; flex: 0 0 auto; }
.tsh-count { font-size: 13px; font-weight: 700; color: #9a8663; }
.tsh-rule { flex: 1; height: 1px; background: rgba(40,34,24,.12); }
/* width:auto + flex:0 0 auto — une règle GLOBALE `input, select { width:100% }`
   (style.css ~1047) faisait occuper au menu toute la largeur restante, et le
   filet se retrouvait à 0 px. */
.tsh-sort {
    font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 9px;
    border: 1px solid rgba(40,34,24,.16); background: #fff; color: #4d463b; cursor: pointer;
    width: auto; flex: 0 0 auto;
}
.tsh-views { display: inline-flex; gap: 2px; border: 1px solid rgba(40,34,24,.16); border-radius: 9px; padding: 2px; background: #fff; }
.tsh-view {
    border: none; background: none; cursor: pointer; border-radius: 7px;
    width: 30px; height: 26px; font-size: 14px; color: #7a6c55;
}
.tsh-view.on { background: rgba(168,134,63,.16); color: var(--chanv-or, #A8863F); }
body[data-gtheme="dark"] .tsh-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tsh-rule { background: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tsh-sort,
body[data-gtheme="dark"] .tsh-views { background: #2b2823; border-color: rgba(221,203,164,.22); color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tsh-view { color: rgba(255,255,255,.65); }
body[data-gtheme="dark"] .tsh-view.on { background: rgba(221,203,164,.2); color: #E8CD8C; }

/* Menu ⋮ — le bouton n'apparaît qu'au survol de la carte pour ne pas alourdir
   une grille déjà dense ; il reste visible tant que son menu est ouvert. */
.tpc-more {
    position: absolute; top: 10px; right: 8px; z-index: 3;
    border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1;
    color: #7a6c55; opacity: 0; transition: opacity .12s; padding: 2px 4px; border-radius: 6px;
}
.tasks-proj-card:hover .tpc-more,
.tasks-proj-row:hover .tpc-more,
.tpc-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .tpc-more { opacity: 1; } }
.tpc-more:hover { background: rgba(40,34,24,.07); }
.tpc-menu {
    position: absolute; top: 34px; right: 6px; z-index: 20; min-width: 210px;
    background: #fff; border: 1px solid rgba(40,34,24,.12); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40,34,24,.18); padding: 6px; display: flex; flex-direction: column;
}
.tpc-menu button {
    text-align: left; border: none; background: none; cursor: pointer; font: inherit;
    font-size: 13.5px; padding: 9px 10px; border-radius: 8px; color: #2b2620;
}
.tpc-menu button:hover { background: rgba(168,134,63,.1); }
.tpc-menu .tpc-menu-danger { color: #b3402f; }
.tpc-menu .tpc-menu-danger:hover { background: rgba(179,64,47,.09); }
body[data-gtheme="dark"] .tpc-menu { background: #2f2b24; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tpc-menu button { color: rgba(255,255,255,.9); }
body[data-gtheme="dark"] .tpc-menu button:hover { background: rgba(221,203,164,.12); }

/* ── Mode LISTE : une rangée par projet, beaucoup plus dense ── */
.tasks-proj-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 2px 22px; }
.tasks-proj-row {
    position: relative; display: flex; align-items: center; gap: 10px;
    background: var(--chanv-blanc, #fff); border: 1px solid rgba(40,34,24,.13);
    border-left: 4px solid rgba(21,87,153,.7); border-radius: 10px;
    padding: 11px 14px; cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.tasks-proj-row:hover { transform: translateX(2px); box-shadow: 0 4px 14px rgba(40,34,24,.10); }
.tasks-proj-row.tasks-proj-chanvre { border-left-color: rgba(45,106,36,.75); }
.tasks-proj-row.tasks-proj-operations { border-left-color: rgba(21,87,153,.75); }
.tasks-proj-row.tasks-proj-innovation { border-left-color: rgba(94,53,177,.75); }
.tasks-proj-row.tasks-proj-culture { border-left-color: rgba(198,93,7,.75); }
.tpr-icon { font-size: 16px; }
.tpr-name { font-weight: 750; font-size: 14px; white-space: nowrap; }
.tpr-desc { flex: 1; min-width: 0; font-size: 13px; color: #7a6c55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpr-meta { font-size: 12.5px; color: #9a8663; white-space: nowrap; }
.tasks-proj-row .tpc-fav, .tasks-proj-row .tpc-group { position: static; }
.tasks-proj-row .tpc-more { position: static; }
body[data-gtheme="dark"] .tasks-proj-row { background: #26221b; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tpr-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tpr-desc { color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
    .tpr-desc { display: none; }        /* la description mangerait toute la ligne */
    .tasks-sec-head { flex-wrap: wrap; row-gap: 8px; }
}

/* Barre d'outils du chat TOUJOURS déployée avec l'éditeur enrichi : le champ
   ayant sa propre rangée, replier les outils ne lui rend aucune largeur — la
   flèche « › » n'aurait plus qu'un effet : masquer des boutons utiles. */
.chat-composer-row:has(.grt-editor) .chat-tools-expand { display: none !important; }
.chat-composer-row:has(.grt-editor).tools-collapsed .chat-tools-left { display: inline-flex !important; }

/* CLAVIER OUVERT : la barre gestuelle de l'iPhone est recouverte, donc toute
   réserve `env(safe-area-inset-bottom)` devient un ESPACE VIDE où l'on voit le
   fond pointillé de la page.
   Deux réserves existent, à des niveaux différents :
     1. le composeur lui-même (style.css) — traité ici ;
     2. le CONTENEUR `.chat-view.show-pane` (css/shell.css, conversation
        ouverte) — c'est LA cause principale du liseré signalé, traitée dans
        shell.css où la règle d'origine est définie. */
body.kb-open .chat-composer { padding-bottom: var(--chat-composer-pb, 12px); }

/* =====================================================================
   GRANDEURS D'UNIFORME — modale du formulaire + récapitulatif de commande
   ===================================================================== */
.us-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(20, 18, 14, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    /* Clavier ouvert sur iPhone : la modale doit rester atteignable. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
}
.us-modal {
    background: var(--card-bg, #fff);
    color: var(--text, #1c1a17);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    width: 100%; max-width: 440px;
    max-height: 90vh; overflow-y: auto;
    padding: 22px 22px 18px;
}
.us-modal-wide { max-width: 900px; }
.us-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.us-intro { margin: 0 0 18px; font-size: .88rem; line-height: 1.45; opacity: .78; }

.us-fields { display: flex; flex-direction: column; gap: 14px; }
.us-field { display: flex; flex-direction: column; gap: 6px; }
.us-label { font-size: .85rem; font-weight: 600; }
/* `width` explicite : une règle globale `input, select { width: 100% }`
   étirait le select sur toute la largeur de la page. */
.us-field select {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 1rem;
    border: 1px solid var(--border, #d9d2c4); border-radius: 10px;
    background: var(--input-bg, #fff); color: inherit;
}
.us-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.us-note { margin: 10px 0 0; font-size: .76rem; opacity: .6; text-align: right; }

/* Totaux : le tableau qu'on transmet au fournisseur. */
.us-totals { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.us-tot {
    flex: 1 1 190px; min-width: 150px;
    border: 1px solid var(--border, #e3ddd0); border-radius: 12px; padding: 10px 12px;
}
.us-tot-h { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-bottom: 6px; }
.us-tot-l { display: flex; justify-content: space-between; padding: 3px 0; font-size: .92rem; }
.us-tot-l span { font-variant-numeric: tabular-nums; opacity: .75; }
.us-tot-empty { font-size: .84rem; opacity: .5; font-style: italic; }

.us-table-wrap { overflow-x: auto; max-height: 46vh; overflow-y: auto; border: 1px solid var(--border, #e3ddd0); border-radius: 12px; }
.us-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.us-table th, .us-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border, #eee7db); white-space: nowrap; }
.us-table thead th { position: sticky; top: 0; background: var(--card-bg, #fff); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; z-index: 1; }
.us-table tbody tr:last-child td { border-bottom: 0; }
/* Qui n'a pas encore répondu : c'est la relance à faire avant de commander. */
.us-missing td { opacity: .5; }
.us-dept { display: block; font-size: .74rem; opacity: .6; }

@media (max-width: 600px) {
    .us-modal { padding: 18px 16px 14px; border-radius: 14px; }
    .us-actions .btn { flex: 1 1 auto; }
}

/* Rappel : la saisie vit dans Gestion Employés, pas ici. */
.us-hint { margin: -8px 0 16px; font-size: .8rem; opacity: .6; font-style: italic; }
/* Taille présente sur une fiche mais absente de la charte actuelle : comptée
   quand même (la charte a pu changer après la saisie), signalée comme telle. */
.us-tot-l.us-hors b::after { content: ' ⚠'; opacity: .7; font-size: .8em; }
.us-tot-l.us-hors { opacity: .75; }

/* Poignées de réorganisation (listes et groupes de tâches).
   Le glisser part de la POIGNÉE et non du bloc : un bloc de liste contient déjà
   des cartes déplaçables, et rendre le bloc lui-même « draggable » ferait
   démarrer les deux glissers en même temps. */
.tasks-grip{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:22px;margin-right:2px;flex:0 0 auto;
    cursor:grab;user-select:none;
    color:rgba(40,34,24,.28);font-size:13px;line-height:1;letter-spacing:-1px;
    border-radius:5px;transition:color .12s, background .12s;
}
.tasks-grip:active{cursor:grabbing}
.tasks-grip:hover{color:rgba(40,34,24,.6);background:rgba(168,134,63,.12)}
/* Discrète au repos, franche au survol du bloc : elle ne doit pas concurrencer
   le titre, mais rester trouvable sans chercher. */
.tasks-list-head .tasks-grip,
.tasks-group-label .tasks-grip{opacity:.45}
.tasks-list-head:hover .tasks-grip,
.tasks-group-label:hover .tasks-grip{opacity:1}
body[data-gtheme="dark"] .tasks-grip{color:rgba(255,255,255,.32)}
body[data-gtheme="dark"] .tasks-grip:hover{color:rgba(255,255,255,.7);background:rgba(221,203,164,.12)}

/* Bloc en cours de déplacement : on le distingue sans le faire disparaître —
   il sert de repère pour viser la nouvelle position. */
/* Une SECTION réunit l'étiquette d'un groupe et ses tâches. Simple conteneur :
   sans display propre, le flux vertical reste celui d'avant le regroupement.
   Il existe pour que le groupe se déplace AVEC son contenu. */
.tasks-section{display:block}
.tasks-block-dragging{opacity:.55;outline:2px dashed rgba(168,134,63,.65);outline-offset:2px;border-radius:10px}

/* Cible tactile : sur mobile la poignée doit rester attrapable sans zoomer. */
@media (pointer:coarse){ .tasks-grip{width:30px;height:30px;font-size:15px} }