/* ============================================================
   Système de design — aligné sur le vrai CRM Trevys en production
   (or/encre, glassmorphism, Geist) — voir apps/agent/equipe.html sur
   le POC OVH (pas le mockup Next.js de design-system/, pas encore livré)
   ============================================================ */

:root,
:root[data-theme="dark"] {
    --ink: #0b1120;
    --ink-1: rgba(30, 27, 20, 0.6);
    --ink-2: rgba(17, 15, 11, 0.94);
    --ink-3: rgba(255, 255, 255, 0.06);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-bright: rgba(200, 150, 42, 0.3);
    --brass: #d9ad4f;
    --brass-bright: #f0c874;
    --brass-dim: rgba(217, 173, 79, 0.5);
    --ivory: #eae4d6;
    --ivory-dim: #a89e8c;
    --ivory-faint: #7d7364;
    --erreur: #f87171;
    --ombre-portee: 0 8px 32px rgba(0, 0, 0, 0.35);
    --glow-1: #2a2210;
    --glow-2: #241c0c;
    --glow-3: #1f1a10;
    --glass-blur: 20px;
    --glass-blur-strong: 24px;
    --champ-bg: rgba(0, 0, 0, 0.25);
    --champ-bg-focus: rgba(0, 0, 0, 0.4);
    --code-bg: rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --ink: #f7f4ec;
    --ink-1: rgba(255, 255, 255, 0.7);
    --ink-2: rgba(255, 255, 255, 0.92);
    --ink-3: rgba(23, 18, 33, 0.05);
    --hairline: rgba(23, 18, 33, 0.08);
    --hairline-bright: rgba(150, 105, 20, 0.3);
    --brass: #a67c1e;
    --brass-bright: #7a5b12;
    --brass-dim: rgba(166, 124, 30, 0.4);
    --ivory: #1a1710;
    --ivory-dim: #5c5648;
    --ivory-faint: #8a8272;
    --erreur: #dc2626;
    --ombre-portee: 0 8px 32px rgba(20, 15, 5, 0.12);
    --glow-1: #faf3e0;
    --glow-2: #fdf6e8;
    --glow-3: #fff8ec;
    --glass-blur: 20px;
    --glass-blur-strong: 24px;
    --champ-bg: rgba(255, 255, 255, 0.6);
    --champ-bg-focus: rgba(255, 255, 255, 0.9);
    --code-bg: rgba(23, 18, 33, 0.06);
    color-scheme: light;
}

:root {
    --radius-l: 24px;
    --radius-m: 16px;
    --radius-s: 8px;
    --font-affiche: "Geist", -apple-system, "Segoe UI", sans-serif;
    --font-corps: "Geist", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
    transition: background-color 0.25s ease;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-corps);
    color: var(--ivory);
    position: relative;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at 10% 0%, var(--glow-1) 0%, transparent 45%),
        radial-gradient(circle at 90% 10%, var(--glow-2) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, var(--glow-3) 0%, transparent 45%),
        var(--ink);
    background-attachment: fixed;
}

a { color: inherit; }

::selection { background: var(--brass); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-bright); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ivory-faint); background-clip: padding-box; }

/* ---------------------------------------------------------- */
/* Connexion                                                    */
/* ---------------------------------------------------------- */

.page-login {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.page-login::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(200, 150, 42, 0.16) 0%, rgba(200, 150, 42, 0.05) 38%, transparent 68%);
    z-index: 0;
}

.carte-login {
    position: relative;
    z-index: 1;
    background: var(--ink-2);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-l);
    box-shadow: var(--ombre-portee);
    padding: 3rem 2.75rem 2.5rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    animation: monter-fondu 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.carte-login .marque {
    width: 40px;
    height: 40px;
    margin-bottom: 1.75rem;
}

.carte-login h1 {
    font-family: var(--font-affiche);
    font-weight: 600;
    font-size: 2rem;
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}

.carte-login .sous-titre {
    font-size: 0.875rem;
    color: var(--ivory-dim);
    margin: 0 0 2rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

.champ label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ivory-dim);
    font-weight: 600;
}

.champ input {
    background: var(--champ-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    padding: 0.75rem 0.9rem;
    color: var(--ivory);
    font-family: var(--font-corps);
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.champ input::placeholder,
.champ textarea::placeholder { color: var(--ivory-faint); }

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
    outline: none;
    border-color: var(--brass);
    background: var(--champ-bg-focus);
    box-shadow: 0 0 0 4px rgba(200, 150, 42, 0.14);
}

.champ textarea,
.champ select {
    background: var(--champ-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    padding: 0.75rem 0.9rem;
    color: var(--ivory);
    font-family: var(--font-corps);
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.champ textarea { resize: vertical; }

.champ input[type="checkbox"] { width: auto; }

.aide-champ {
    font-size: 0.78rem;
    color: var(--ivory-faint);
    margin: 0;
}

/* ---------------------------------------------------------- */
/* Paramètres (agents, connecteurs)                             */
/* ---------------------------------------------------------- */

.zone-parametres {
    height: 100vh;
    overflow-y: auto;
    padding: 2rem clamp(1.25rem, 6vw, 5rem);
}

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

.parametres-header h1 {
    font-family: var(--font-affiche);
    font-weight: 600;
    font-size: 1.6rem;
    margin: 0;
}

.bouton-principal {
    padding: 0.7rem 1.1rem;
    background: var(--brass);
    color: var(--ink);
    border: none;
    border-radius: var(--radius-s);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(200, 150, 42, 0.55);
}

.vide-parametres {
    color: var(--ivory-dim);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------- */
/* Grille de cartes (agents, connecteurs, moteurs)              */
/* inspirée de /agent/equipe/ sur le CRM Trevys                 */
/* ---------------------------------------------------------- */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.carte-ressource {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--ink-1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    padding: 1rem 1.1rem;
}

.carte-ressource.inactif { opacity: 0.55; }

.carte-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

.carte-corps {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.carte-nom {
    font-size: 0.95rem;
    color: var(--ivory);
    overflow-wrap: break-word;
}

.carte-sous-titre {
    font-size: 0.76rem;
    color: var(--ivory-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte-etat {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
    flex-shrink: 0;
}

.carte-etat.actif { color: #059669; background: rgba(5, 150, 105, 0.14); }
.carte-etat.inactif { color: var(--ivory-faint); background: var(--ink-3); }

.section-creation {
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.section-creation h2 {
    font-family: var(--font-affiche);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

.formulaire-parametres {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 560px;
}

.galerie-etiquettes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 560px;
}

.galerie-etiquettes-label {
    font-size: 0.78rem;
    color: var(--ivory-faint);
    margin-right: 0.25rem;
}

.etiquette {
    --couleur-etiquette: var(--brass);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--hairline);
    background: var(--ink-1);
    color: var(--ivory-dim);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.etiquette:hover {
    border-color: var(--couleur-etiquette);
    color: var(--ivory);
}

.etiquette.actif {
    background: var(--couleur-etiquette);
    border-color: var(--couleur-etiquette);
    color: #fff;
}

.sidebar .lien-agent.actif { background: var(--ink-3); color: var(--brass-bright); }

/* ---------------------------------------------------------- */
/* Accordéons de la sidebar (Agents, Conversations, Paramètres)  */
/* ---------------------------------------------------------- */

.accordeon summary {
    cursor: pointer;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ivory-faint);
    font-weight: 700;
    padding: 0.5rem 0.35rem;
    margin-bottom: 0.35rem;
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
}

.accordeon summary::-webkit-details-marker { display: none; }

.accordeon summary::after {
    content: "›";
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.accordeon[open] summary::after { transform: rotate(90deg); }

.accordeon summary:hover { background: var(--ink-3); color: var(--ivory); }

.recherche-sidebar {
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--champ-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    color: var(--ivory);
    font-size: 0.82rem;
    font-family: var(--font-corps);
}

.recherche-sidebar::placeholder { color: var(--ivory-faint); }
.recherche-sidebar:focus { outline: none; border-color: var(--brass); }

.liste-conversations li {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.1rem;
}

.liste-conversations li a { flex: 1; min-width: 0; }

.bouton-supprimer {
    flex-shrink: 0;
    opacity: 0;
    background: none;
    border: none;
    color: var(--ivory-faint);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    font-size: 0.72rem;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.liste-conversations li:hover .bouton-supprimer { opacity: 1; }
.bouton-supprimer:hover { color: var(--erreur); background: rgba(220, 38, 38, 0.14); }

.liste-parametres { display: flex; flex-direction: column; gap: 0.1rem; }

.liste-parametres li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-s);
    font-size: 0.83rem;
    color: var(--ivory-dim);
}

.liste-parametres li:hover { background: var(--ink-3); }
.liste-parametres li em { font-style: normal; color: var(--ivory-faint); font-size: 0.72rem; }
.liste-parametres .nom-agent { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lien-ajouter-parametre {
    display: block;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    color: var(--brass);
    text-decoration: none;
}

.lien-ajouter-parametre:hover { text-decoration: underline; }

/* ---------------------------------------------------------- */
/* Panneau de suivi de l'agent (connecteurs + moteur)            */
/* ---------------------------------------------------------- */

.bouton-activite-flottant {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ivory);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.bouton-activite-flottant:hover { transform: rotate(-12deg); }

.panneau-activite {
    min-width: 0;
    overflow: hidden;
    background: var(--ink-2);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    border-left: 1px solid var(--hairline);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.panneau-activite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}

.panneau-activite-header button {
    background: none;
    border: none;
    color: var(--ivory-dim);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
}

.panneau-activite-header button:hover { color: var(--ivory); }

.panneau-activite-liste {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entree-activite {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.entree-activite.echec { border-color: rgba(220, 38, 38, 0.4); }

.entree-activite .entree-titre { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }

.entree-activite .entree-detail { color: var(--ivory-faint); font-size: 0.74rem; }

.panneau-activite-liste .vide { color: var(--ivory-dim); font-size: 0.85rem; padding: 0.5rem; }

.carte-login button[type="submit"] {
    margin-top: 0.75rem;
    padding: 0.85rem;
    background: var(--brass);
    color: var(--ink);
    border: none;
    border-radius: var(--radius-s);
    font-family: var(--font-corps);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.carte-login button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(200, 150, 42, 0.55);
    filter: brightness(1.04);
}

.carte-login button[type="submit"]:active { transform: translateY(0); }

.erreur {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--erreur);
    font-size: 0.85rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--radius-s);
    padding: 0.6rem 0.8rem;
    margin: 0 0 1.25rem;
}

.succes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #059669;
    font-size: 0.85rem;
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: var(--radius-s);
    padding: 0.6rem 0.8rem;
    margin: 0 0 1.25rem;
}

.bandeau-messages {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 360px;
}

.bandeau-messages .erreur,
.bandeau-messages .succes {
    margin: 0;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.25);
}

.carte-action {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--ink-1);
    border: 1px solid var(--hairline-bright);
    border-radius: var(--radius-m);
    padding: 0.9rem 1rem;
    margin-top: 0.6rem;
    max-width: 480px;
}

.carte-action-titre {
    font-weight: 600;
    color: var(--brass);
}

.carte-action-corps p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

.carte-action-boutons {
    display: flex;
    gap: 0.5rem;
}

.carte-action-refusee {
    color: var(--ivory-dim);
    font-size: 0.85rem;
    margin: 0;
}

/* ---------------------------------------------------------- */
/* Capacités IA (Hermes) — registre / cabinet, or & encre        */
/* ---------------------------------------------------------- */

.zone-capacites {
    max-width: 1040px;
    position: relative;
    background-image:
        repeating-linear-gradient(0deg, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(90deg, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent 34px);
    background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(to bottom, black, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black, black 65%, transparent 100%);
    opacity: 1;
}

.zone-capacites > * { position: relative; }

.capacites-hero { margin-bottom: 2.2rem; }

.capacites-hero-oeillet {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-corps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.9rem;
}

.capacites-hero-oeillet::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--brass);
}

.capacites-hero h1 {
    font-family: "Fraunces", var(--font-affiche);
    font-optical-sizing: auto;
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 0.9rem;
    color: var(--ivory);
}

.capacites-hero-sous-titre {
    color: var(--ivory-dim);
    font-size: 0.98rem;
    max-width: 52ch;
    margin: 0 0 1.6rem;
    line-height: 1.55;
}

/* Bandeau "relevé de compte" : deux filets, valeurs séparées par des traits verticaux */
.ledger-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    border-top: 1px solid var(--hairline-bright);
    border-bottom: 1px solid var(--hairline-bright);
    padding: 0.95rem 0;
    margin-bottom: 2.4rem;
}

.ledger-champ {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 1.6rem;
}

.ledger-champ:first-child { padding-left: 0; }

.ledger-etiquette {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ivory-faint);
}

.ledger-valeur {
    font-family: var(--font-affiche);
    font-size: 1rem;
    color: var(--ivory);
}

.ledger-valeur-vivante {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #34d399;
}

.ledger-separateur {
    width: 1px;
    background: var(--hairline);
    align-self: stretch;
}

.capacites-statut-point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: pouls-statut 2.2s infinite;
    flex-shrink: 0;
}

@keyframes pouls-statut {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.capacites-badge-isole {
    display: inline-block;
    font-size: 0.74rem;
    color: var(--brass);
    background: var(--champ-bg);
    border: 1px solid var(--hairline-bright);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    margin-top: 0.5rem;
}

/* ---- Capacité vedette (terminal isolé) — bannière distincte ---- */
.capacite-vedette {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(217, 173, 79, 0.1), transparent 55%),
        var(--ink-2);
    border: 1px solid var(--hairline-bright);
    border-radius: var(--radius-l);
    padding: 1.5rem 1.7rem;
    margin-bottom: 2rem;
    cursor: pointer;
    box-shadow: var(--ombre-portee);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.capacite-vedette:hover { transform: translateY(-2px); }

.capacite-vedette input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.capacite-vedette-cachet {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    background: var(--ink-3);
    border: 1.5px solid var(--hairline-bright);
    filter: grayscale(0.7) opacity(0.6);
    transition: filter 0.2s ease, border-color 0.2s ease;
}

.capacite-vedette-active .capacite-vedette-cachet {
    filter: grayscale(0) opacity(1);
    border-color: var(--brass);
    box-shadow: 0 0 0 4px var(--champ-bg);
}

.capacite-vedette-corps { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }

.capacite-vedette-surtitre {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
}

.capacite-vedette-label {
    font-family: "Fraunces", var(--font-affiche);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ivory);
}

.capacite-vedette-description {
    color: var(--ivory-dim);
    font-size: 0.9rem;
    max-width: 48ch;
}

/* ---- Familles / catégories ---- */
.capacites-famille { margin-bottom: 2.2rem; }

.capacites-famille-entete {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.capacites-famille-numero {
    font-family: var(--font-affiche), monospace;
    font-size: 0.75rem;
    color: var(--brass-dim);
    letter-spacing: 0.05em;
}

.capacites-famille-entete h2 {
    font-family: var(--font-corps);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin: 0;
    white-space: nowrap;
}

.capacites-famille-trait {
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.capacites-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.9rem;
}

.capacite-carte {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--ink-1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--hairline);
    border-left: 3px solid transparent;
    border-radius: var(--radius-m);
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    opacity: 0;
    animation: capacite-entree 0.5s ease forwards;
}

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

.capacite-carte:hover {
    border-color: var(--hairline-bright);
    transform: translateY(-1px);
}

.capacite-carte.capacite-active {
    border-left-color: var(--brass);
    box-shadow: 0 8px 24px -14px rgba(217, 173, 79, 0.4);
}

.capacite-carte input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.capacite-icone {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--ink-3);
    filter: grayscale(0.7) opacity(0.6);
    transition: filter 0.2s ease, background 0.2s ease;
}

.capacite-active .capacite-icone {
    filter: grayscale(0) opacity(1);
    background: var(--champ-bg);
}

.capacite-corps {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
    padding-top: 0.1rem;
}

.capacite-label {
    font-weight: 600;
    font-size: 0.93rem;
}

.capacite-description {
    color: var(--ivory-dim);
    font-size: 0.79rem;
    line-height: 1.4;
}

/* Interrupteur "laiton" — piste gravée + fermoir métallique */
.capacite-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: var(--champ-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--hairline);
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
    margin-top: 0.15rem;
}

.capacite-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(155deg, #cfc6b4, #8f887a);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s ease;
}

.capacite-carte input:checked ~ .capacite-toggle,
.capacite-vedette input:checked ~ .capacite-toggle-grand {
    background: linear-gradient(180deg, rgba(217, 173, 79, 0.35), rgba(217, 173, 79, 0.18));
    border-color: var(--brass);
}

.capacite-carte input:checked ~ .capacite-toggle::after,
.capacite-vedette input:checked ~ .capacite-toggle-grand::after {
    transform: translateX(17px);
    background: linear-gradient(155deg, var(--brass-bright), var(--brass));
}

.capacite-carte input:focus-visible ~ .capacite-toggle,
.capacite-vedette input:focus-visible ~ .capacite-toggle-grand {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

.capacite-toggle-grand {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--champ-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--hairline);
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.capacite-toggle-grand::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(155deg, #cfc6b4, #8f887a);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s ease;
}

.capacites-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--hairline);
}

.capacites-actions-aide {
    color: var(--ivory-faint);
    font-size: 0.82rem;
}

.capacites-avance {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
}

.capacites-avance a {
    color: var(--ivory-dim);
    font-size: 0.85rem;
    text-decoration: none;
}

.capacites-avance a:hover {
    color: var(--brass);
}

/* Nav partagée entre les pages Hermes (Capacités / Cron / Skills / MCP / Connexion) */
.hermes-nav {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.6rem;
}

.hermes-nav a {
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--ivory-dim);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-s);
    transition: color 0.15s ease, background 0.15s ease;
}

.hermes-nav a:hover {
    color: var(--ivory);
    background: var(--ink-1);
}

.hermes-nav a.actif {
    color: var(--brass);
    background: var(--champ-bg);
}

/* Listes Cron / MCP (lignes avec actions) */
.hermes-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
}

.hermes-ligne {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--ink-1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    padding: 0.85rem 1rem;
}

.hermes-ligne-inactif { opacity: 0.6; }

.hermes-ligne-corps {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.hermes-ligne-detail {
    color: var(--ivory-dim);
    font-size: 0.82rem;
}

.hermes-ligne-detail code {
    background: var(--code-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-affiche), monospace;
}

/* Carte de skill en <button> plutôt qu'en <label>+checkbox */
.hermes-carte-bouton {
    width: 100%;
    text-align: left;
    border: 1px solid var(--hairline);
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.capacite-toggle-statique::after {
    transform: translateX(0);
}

.capacite-toggle-actif {
    background: var(--brass-dim);
    border-color: var(--brass);
}

.capacite-toggle-actif::after {
    transform: translateX(16px);
    background: var(--brass-bright);
}

@keyframes monter-fondu {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------- */
/* Charpente générale                                          */
/* ---------------------------------------------------------- */

.page-chat {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 292px 1fr 0px;
    height: 100vh;
    transition: grid-template-columns 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-chat.avec-activite {
    grid-template-columns: 292px 1fr 320px;
}

/* ---------------------------------------------------------- */
/* Sidebar                                                      */
/* ---------------------------------------------------------- */

.sidebar {
    background: var(--ink-2);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    border-right: 1px solid var(--hairline);
    padding: 1.5rem 1.1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-marque {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.35rem 0.25rem;
    margin-bottom: 0.25rem;
}

.sidebar-marque .glyphe {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.sidebar-marque span {
    font-family: var(--font-affiche);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ivory);
    letter-spacing: -0.01em;
}

.sidebar-section h2 {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ivory-faint);
    font-weight: 700;
    margin: 0 0 0.65rem;
    padding: 0 0.35rem;
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }

.sidebar .liste-agents > li { margin-bottom: 0.15rem; }

.sidebar .liste-agents > li > a.lien-agent,
.sidebar .liste-agents > li > span.lien-agent {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-s);
    font-size: 0.87rem;
    color: var(--ivory);
    transition: background 0.15s ease;
}

.sidebar .liste-agents > li:hover > a.lien-agent,
.sidebar .liste-agents > li:hover > span.lien-agent { background: var(--ink-3); }

.sidebar .nom-agent { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sous-liste-agents {
    list-style: none;
    margin: 0.15rem 0 0.4rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.lien-agent-sous {
    display: block;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-s);
    font-size: 0.8rem;
    color: var(--ivory-dim);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.lien-agent-sous:hover { background: var(--ink-3); color: var(--ivory); }

.lien-agent-sous.actif { background: var(--ink-3); color: var(--brass-bright); }

.bouton-mini {
    font-size: 0.7rem;
    color: var(--brass);
    opacity: 0;
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    transition: opacity 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.sidebar li:hover .bouton-mini { opacity: 1; }
.bouton-mini:hover { background: rgba(200, 150, 42, 0.14); }
.bouton-mini-visible { opacity: 1; }

.sous-agents {
    position: relative;
    margin: 0.15rem 0 0.35rem 0.95rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--hairline);
}

.sous-agents li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-s);
    font-size: 0.82rem;
    color: var(--ivory-dim);
    transition: background 0.15s ease, color 0.15s ease;
}

.sous-agents li:hover a { background: var(--ink-3); color: var(--ivory); }

.liste-conversations li { margin-bottom: 0.1rem; }

.liste-conversations a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-s);
    font-size: 0.85rem;
    color: var(--ivory-dim);
    border-left: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

.liste-conversations a span.titre-conv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liste-conversations li:hover a { background: var(--ink-3); color: var(--ivory); }

.liste-conversations li.actif a {
    color: var(--brass-bright);
    border-color: var(--brass);
    background: rgba(200, 150, 42, 0.08);
}

.sidebar .vide {
    color: var(--ivory-faint);
    font-style: italic;
    font-size: 0.82rem;
    padding: 0.4rem 0.35rem;
}

.pastille {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

.sidebar-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--ivory-faint);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidebar-footer a:hover { color: var(--ivory); }

/* ---------------------------------------------------------- */
/* Zone de chat                                                 */
/* ---------------------------------------------------------- */

.zone-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background:
        radial-gradient(ellipse 1100px 500px at 50% -10%, rgba(200, 150, 42, 0.07), transparent 60%),
        var(--ink);
}

.zone-chat-vide {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
}

.zone-chat-vide p {
    font-family: var(--font-affiche);
    font-size: 1.35rem;
    color: var(--ivory-dim);
    max-width: 360px;
    line-height: 1.5;
}

.zone-chat-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1.75rem;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}

.zone-chat-header .pastille { width: 9px; height: 9px; }

.zone-chat-header strong {
    font-family: var(--font-affiche);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 2.25rem clamp(1.25rem, 8vw, 9rem) 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.bouton-scroll-bas {
    position: absolute;
    right: clamp(1.25rem, 4vw, 3rem);
    bottom: 6.5rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink-2);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--hairline);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ombre-portee);
    z-index: 5;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bouton-scroll-bas:hover { transform: translateY(-2px); }
.bouton-scroll-bas[hidden] { display: none; }

.message {
    max-width: 100%;
    animation: apparaitre 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.message-role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--ivory-faint);
    margin-bottom: 0.45rem;
}

.bouton-lire {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.45;
    padding: 0;
    line-height: 1;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bouton-lire:hover { opacity: 1; transform: scale(1.15); }

.message-contenu {
    font-size: 0.98rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.piece-jointe {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--brass-bright);
    background: rgba(200, 150, 42, 0.1);
    border: 1px solid var(--hairline-bright);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.5rem;
}

/* Contenu Markdown rendu (assistant) */
.message-contenu.markdown { white-space: normal; }
.message-contenu.markdown > *:first-child { margin-top: 0; }
.message-contenu.markdown > *:last-child { margin-bottom: 0; }
.message-contenu.markdown p { margin: 0 0 0.85em; }
.message-contenu.markdown h1,
.message-contenu.markdown h2,
.message-contenu.markdown h3 {
    font-family: var(--font-affiche);
    font-weight: 600;
    color: var(--ivory);
    margin: 1.2em 0 0.5em;
    line-height: 1.3;
}
.message-contenu.markdown h1 { font-size: 1.4em; }
.message-contenu.markdown h2 { font-size: 1.22em; }
.message-contenu.markdown h3 { font-size: 1.08em; }
.message-contenu.markdown strong { color: var(--ivory); font-weight: 700; }
.message-contenu.markdown em { color: var(--brass-bright); font-style: italic; }
.message-contenu.markdown a { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 2px; }
.message-contenu.markdown ul,
.message-contenu.markdown ol { margin: 0 0 0.85em; padding-left: 1.4em; }
.message-contenu.markdown li { margin-bottom: 0.3em; }
.message-contenu.markdown blockquote {
    margin: 0 0 0.85em;
    padding: 0.2em 0 0.2em 1em;
    border-left: 2px solid var(--brass-dim);
    color: var(--ivory-dim);
    font-style: italic;
}
.message-contenu.markdown code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.86em;
    background: var(--code-bg);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 0.12em 0.4em;
    color: var(--brass-bright);
}
.message-contenu.markdown pre {
    background: var(--code-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-s);
    padding: 0.9em 1em;
    overflow-x: auto;
    margin: 0 0 0.85em;
}
.message-contenu.markdown pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--ivory);
}
.message-contenu.markdown hr { border: none; border-top: 1px solid var(--hairline); margin: 1.2em 0; }
.message-contenu.markdown table { border-collapse: collapse; margin: 0 0 0.85em; font-size: 0.92em; }
.message-contenu.markdown th,
.message-contenu.markdown td { border: 1px solid var(--hairline); padding: 0.4em 0.7em; text-align: left; }
.message-contenu.markdown th { color: var(--brass-bright); font-weight: 700; }

/* Utilisateur : bulle pleine, alignée à droite */
.message-user {
    max-width: 68%;
    margin-left: auto;
    background: var(--ink-1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m) var(--radius-m) 4px var(--radius-m);
    padding: 0.85rem 1.1rem;
}

.message-user .message-role { color: var(--brass-dim); text-align: right; }
.message-user .message-contenu { color: var(--ivory); }

/* Assistant : traitement éditorial, pas de bulle — filet doré à gauche */
.message-assistant {
    border-left: 2px solid var(--hairline-bright);
    padding-left: 1.15rem;
}

.message-assistant .message-contenu { color: var(--ivory); }

/* Curseur de frappe pendant le streaming */
.message-assistant.en-cours .message-contenu::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 3px;
    background: var(--brass);
    vertical-align: text-bottom;
    animation: clignoter 0.9s steps(1) infinite;
}

@keyframes clignoter {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------- */
/* Barre de composition                                         */
/* ---------------------------------------------------------- */

.fichier-selectionne[hidden] { display: none; }

.fichier-selectionne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 clamp(1.25rem, 8vw, 9rem) 0.6rem;
    padding: 0.5rem 0.9rem;
    background: rgba(200, 150, 42, 0.08);
    border: 1px solid var(--hairline-bright);
    border-radius: var(--radius-m);
    font-size: 0.83rem;
    color: var(--brass-bright);
    animation: apparaitre 0.2s ease both;
}

#fichier-retirer {
    background: none;
    border: none;
    color: var(--ivory-dim);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    transition: color 0.15s ease;
}

#fichier-retirer:hover { color: var(--erreur); }

.compose {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0 clamp(1.25rem, 8vw, 9rem) 1.75rem;
    padding: 0.55rem 0.55rem 0.55rem 0.65rem;
    background: var(--ink-2);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-l);
    box-shadow: var(--ombre-portee);
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.compose:focus-within {
    border-color: var(--brass-dim);
    box-shadow: var(--ombre-portee), 0 0 0 4px rgba(200, 150, 42, 0.1);
}

.compose textarea {
    flex: 1;
    resize: none;
    background: transparent;
    border: none;
    padding: 0.65rem 0.4rem;
    color: var(--ivory);
    font-family: var(--font-corps);
    font-size: 0.95rem;
    line-height: 1.5;
    max-height: 200px;
}

.compose textarea::placeholder { color: var(--ivory-faint); }
.compose textarea:focus { outline: none; }

/* Boutons secondaires (joindre, micro) — fantômes, discrets */
.bouton-icone {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--ivory-dim);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bouton-icone:hover { background: var(--ink-3); color: var(--ivory); }

#bouton-micro.en-ecoute {
    color: var(--erreur);
    background: rgba(220, 38, 38, 0.14);
    animation: pulser 1.2s ease-in-out infinite;
}

@keyframes pulser {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Bouton d'envoi — plein, laiton, seul élément de couleur de la barre */
#bouton-envoyer {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brass);
    color: var(--ink);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    transition: transform 0.15s ease, filter 0.15s ease;
}

#bouton-envoyer::after {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>") no-repeat center / contain;
}

#bouton-envoyer:hover { transform: translateY(-1px) scale(1.03); filter: brightness(1.05); }
#bouton-envoyer:active { transform: translateY(0) scale(0.98); }
#bouton-envoyer:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------- */
/* Bouton de thème (clair / sombre)                              */
/* ---------------------------------------------------------- */

.bouton-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ivory);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.bouton-theme:hover { transform: rotate(-12deg); }

.icone-sombre, .icone-clair { display: none; }
:root[data-theme="dark"] .icone-sombre { display: inline; }
:root[data-theme="light"] .icone-clair { display: inline; }

.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.bouton-theme-flottant {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
}

/* ---------------------------------------------------------- */
/* Menu mobile (tiroir de navigation)                            */
/* ---------------------------------------------------------- */

.bouton-menu-mobile {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 30;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ivory);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--ombre-portee);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar-overlay.visible { display: block; opacity: 1; }

/* ---------------------------------------------------------- */
/* Responsive — tablette et mobile                               */
/* ---------------------------------------------------------- */

/* Tablette : sidebar plus étroite, messages moins larges */
@media (max-width: 1024px) {
    .page-chat { grid-template-columns: 240px 1fr 0px; }
    .page-chat.avec-activite { grid-template-columns: 240px 1fr 280px; }
    .messages { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }
    .compose { margin-left: clamp(1.25rem, 4vw, 3rem); margin-right: clamp(1.25rem, 4vw, 3rem); }
    .message-user { max-width: 78%; }
}

/* Mobile : sidebar en tiroir plein écran, déclenché par le bouton menu.
   Trop étroit pour pousser le chat : le panneau de suivi repasse en tiroir superposé. */
@media (max-width: 780px) {
    .page-chat, .page-chat.avec-activite { grid-template-columns: 1fr; }

    .panneau-activite {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 25;
        box-shadow: var(--ombre-portee);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .page-chat.avec-activite .panneau-activite { transform: translateX(0); }

    .bouton-menu-mobile { display: flex; }

    .sidebar {
        position: fixed;
        inset: 0 25% 0 0;
        z-index: 20;
        max-width: 320px;
        transform: translateX(-105%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: var(--ombre-portee);
    }

    .sidebar.ouvert { transform: translateX(0); }

    .zone-chat-header { padding-left: 4.2rem; }
    .zone-chat-vide { padding-left: 3.5rem; }

    .messages { padding: 1.75rem 1rem 1rem; }
    .compose { margin-left: 1rem; margin-right: 1rem; }
    .fichier-selectionne { margin-left: 1rem; margin-right: 1rem; }
    .message-user { max-width: 88%; }
    .carte-login { padding: 2.25rem 1.75rem 2rem; }
}