(header cliquable)
* • (body scrollable)
*
* Exclusivité (une seule section ouverte par aside) + persistance de
* l'état ouvert par aside : gérées côté JS (editor-side-tabs.js).
*
* Layout : les sections fermées ne prennent que la hauteur de leur summary
* (flex-shrink: 0). La section OUVERTE prend tout l'espace restant
* (flex: 1) — son body scrolle si le contenu dépasse. */
.editor-side__acc {
display: flex;
flex-direction: column;
flex-shrink: 0; /* ne rétrécit jamais côté aside */
min-height: 0;
border-bottom: 1px solid var(--c-border);
}
.editor-side__acc:last-child { border-bottom: 0; }
.editor-side__acc[open] {
/* Aucun flex-basis / grow imposé : la section prend la hauteur naturelle
* de son summary + body. Le body est capé par un `max-height` calculé
* en JS (cf. editor-side-tabs.js → applyBodyMaxHeight) — au-delà, il
* scrolle via `overflow-y: auto`. On évite ainsi les quirks de flex
* sur qui ne propageaient pas le shrink correctement. */
overflow: hidden;
}
/* Header cliquable — même palette que l'ancien header gris. */
.editor-side__acc-head {
list-style: none; /* hide default marker */
padding: 10px var(--sp-4);
background: var(--c-bg-subtle);
color: var(--c-text-muted);
font-size: var(--fs-sm);
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
flex-shrink: 0;
transition: background var(--tr-base), color var(--tr-base);
}
.editor-side__acc-head::-webkit-details-marker { display: none; }
.editor-side__acc-head:hover { color: var(--c-text); }
.editor-side__acc[open] > .editor-side__acc-head {
background: var(--c-bg-elevated);
color: var(--c-text);
border-bottom: 1px solid var(--c-border);
}
.editor-side__acc-title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-side__acc-caret {
width: 12px;
height: 8px;
flex-shrink: 0;
transition: transform var(--tr-fast);
}
.editor-side__acc[open] > .editor-side__acc-head .editor-side__acc-caret {
transform: rotate(180deg);
}
/* Body : hauteur naturelle jusqu'au max-height posé en inline par le JS
* (calcul = hauteur de l'aside − somme des summaries). Au-delà, scroll
* interne via `overflow-y: auto`. */
.editor-side__acc-body {
max-height: none; /* écrasé par style inline JS */
overflow-y: auto;
padding: var(--sp-2) var(--sp-3);
}
/* ── Toolbar de l'éditeur (même gris clair que le header des sides) ─
Sticky sous le header global, avec un gap de 16px (= sp-4, même valeur
que le gap entre les colonnes du shell) sous le header pour respirer.
Bordure basse noire (cohérence avec la bordure noire de la carte).
Le masquage du contenu scrollant dans le gap est réalisé par un
box-shadow plein de 16px projeté vers le haut avec la couleur du
fond de page : pas d'élément DOM, donc la bordure du card est
préservée et le shadow blend invisiblement avec la marge supérieure
page-bg de l'editor-shell à la position naturelle. */
.editor-toolbar {
display: flex; align-items: center;
flex-wrap: wrap;
gap: var(--sp-1); /* groupes plus serrés */
padding: var(--sp-3) var(--sp-4);
background: var(--c-bg-subtle);
border: 1px solid var(--c-text);
position: sticky;
top: calc(var(--header-height) + var(--sp-4));
z-index: 5;
border-top-left-radius: calc(var(--radius-lg) - 1px);
border-top-right-radius: calc(var(--radius-lg) - 1px);
margin: 0 -1px;
/* Deux ombres solides (blur 0) cumulées :
1. Cache anti-scroll 16px en haut (couleur fond de page) — masque
le contenu qui scrolle dans le gap entre header et toolbar.
2. Halo 2px gris (fond de page) sur tous les côtés via spread,
décalé légèrement vers le haut → donne une ombre portée
discrète qui détache visuellement le toolbar de la carte. */
box-shadow:
0 calc(-1 * var(--sp-6)) 0 0 var(--c-bg),
0 -2px 0 2px var(--c-bg);
}
/* Tant que la toolbar n'est pas marquée is-ready (= après mountEditor),
on masque tout son contenu — sinon les boutons apparaissent au load
avant que les handlers JS ne soient câblés, ce qui clignote et permet
à l'utilisateur de cliquer dans le vide. */
.editor-toolbar > * { opacity: 0; pointer-events: none; }
.editor-toolbar.is-ready > * { opacity: 1; pointer-events: auto; }
.editor-toolbar__group {
display: inline-flex; align-items: center;
gap: 2px;
}
.editor-toolbar__sep {
width: 1px;
align-self: stretch;
background: var(--c-border);
margin: 4px 3px; /* léger air autour du filet,
en plus du gap sp-1 du toolbar */
}
/* ── Label « document en lecture seule » ──────────────────────────────
Texte rouge nu (pas de pill/badge), affiché à côté des boutons toujours
visibles (commentaires + recherche) DÈS QUE la toolbar est en mode
lecture seule — peu importe la cause (chapitre verrouillé OU pas de
permission d'écriture). Caché par défaut. */
.editor-toolbar__lock-label {
display: none;
margin-left: var(--sp-3);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--c-accent, #ea0000);
white-space: nowrap;
}
.editor-toolbar--readonly .editor-toolbar__lock-label {
display: inline-block;
}
/* ── Mode lecture seule (rôle sans write OU chapitre verrouillé) ───────
Masque tous les groupes du toolbar SAUF ceux marqués --always (les
commentaires + la recherche, qui restent toujours accessibles), et
les séparateurs (qui n'ont plus de sens). */
.editor-toolbar--readonly .editor-toolbar__group:not(.editor-toolbar__group--always),
.editor-toolbar--readonly .editor-toolbar__sep {
display: none;
}
/* Le bouton « mode révision » est dans le groupe --always (à côté du
commentaire, pour rester dispo en écriture même quand tout le reste
de la toolbar est masqué) mais il n'a de SENS qu'en mode écriture :
activer un mode capture sur un doc verrouillé ne servirait à rien.
On le masque donc explicitement quand le doc est en read-only. */
.editor-toolbar--readonly [data-cmd="track-changes"] {
display: none;
}
.editor-toolbar__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--c-text);
cursor: pointer;
/* Pas de bordure au repos — apparaît au hover (noir léger) ou à
* l'actif (client). Transition sur box-shadow pour le fondu. */
transition: background var(--tr-base), box-shadow var(--tr-base);
padding: 0;
}
/* Hover : fond blanc (vs bg-subtle de la toolbar) + fine bordure noir
* 25 % pour matérialiser le bouton. S'applique à tous les boutons
* toolbar non désactivés ; l'actif a son propre :hover client plus bas. */
.editor-toolbar__btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-text) 8%, transparent);
}
.editor-toolbar__btn:disabled {
color: var(--c-text-muted);
cursor: default;
opacity: 0.45;
}
/* Bouton actif (mark/heading appliqué au curseur).
* Combinaison bg client en opacité réduite + bordure pleine + icône colorée
* → reste lisible même si la couleur client est très foncée (proche du noir).
* box-shadow inset plutôt que border pour éviter le shift de 1px au repos. */
.editor-toolbar__btn.is-active {
background: color-mix(in srgb, var(--c-client) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-client) 60%, transparent);
color: var(--c-client);
}
.editor-toolbar__btn.is-active:hover {
background: color-mix(in srgb, var(--c-client) 10%, transparent);
}
/* Exception : le bouton « mode révision » en état actif prend un
signalement plus fort (bg client PLEIN + bordure client + icône
blanche). Rationale UX : c'est un mode global qui change la sémantique
de chaque édition — il doit sauter aux yeux beaucoup plus que les
toggles habituels (gras, italique…) qui n'affectent que la sélection. */
.editor-toolbar__btn[data-cmd="track-changes"].is-active {
background: var(--c-client);
box-shadow: inset 0 0 0 1px var(--c-client);
color: #fff;
}
.editor-toolbar__btn[data-cmd="track-changes"].is-active:hover {
background: color-mix(in srgb, var(--c-client) 88%, black);
}
/* Contributeur / rôle sans permission : le bouton est disabled côté JS
(pas cliquable) mais reste à opacité PLEINE. L'info importante à
véhiculer est « le mode est ON / OFF » — dimmer masquerait ce signal
au user qui n'a pas le droit d'agir mais doit tout de même savoir
l'état courant du doc. */
.editor-toolbar__btn[data-cmd="track-changes"]:disabled {
opacity: 1;
cursor: not-allowed;
color: var(--c-text);
}
.editor-toolbar__btn[data-cmd="track-changes"].is-active:disabled {
color: #fff;
}
/* ── Split-button (style Word : toggle principal + caret variants) ──────
* Cohérent avec la charte toolbar : aucune bordure au repos. La
* structure (bordure wrapper + filet séparateur) n'apparaît qu'au hover.
* En mode actif, le filet séparateur disparaît pour que les deux halves
* forment visuellement un seul bloc plein. */
.editor-toolbar__split {
display: inline-flex;
align-items: stretch;
/* position: relative pour que le dropdown panel des variants se
* positionne par rapport à la wrapper (gauche = bord gauche du bouton
* principal), pas par rapport au caret seul. */
position: relative;
/* Bordure transparente au repos — réserve la place sans tracer
* de filet, évite le shift de layout au hover. */
border: 1px solid transparent;
border-radius: var(--radius-sm);
transition: border-color var(--tr-base), background var(--tr-base);
}
/* Neutralise le position:relative natif de .dropdown pour que le panel
* remonte jusqu'à .editor-toolbar__split comme containing block. */
.editor-toolbar__split .dropdown { position: static; }
.editor-toolbar__split .dropdown__panel {
left: 0; /* aligné sur le bouton principal */
top: calc(100% + 6px);
}
/* Coins arrondis partagés : main (gauche) + caret (droite). */
.editor-toolbar__split .editor-toolbar__split-main {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.editor-toolbar__split .editor-toolbar__btn--caret {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
width: 18px; /* caret juste un poil élargi (flèche reste 8px) */
transition: background var(--tr-base);
}
/* Hover sur le caret uniquement (zone cliquable distincte du bouton
* principal) : fond noir 8 %. Fonctionne même en état actif. */
.editor-toolbar__split .editor-toolbar__btn--caret:hover {
background: color-mix(in srgb, var(--c-text) 8%, transparent);
}
.editor-toolbar__split .editor-toolbar__btn--caret .icon-mask {
width: 8px; height: 8px; /* flèche réduite */
}
/* Évite que le caret hérite des styles list-marker natifs */
.editor-toolbar__btn--caret { list-style: none; }
.editor-toolbar__btn--caret::-webkit-details-marker { display: none; }
/* Hover du split inactif : fond blanc + fine bordure noir 25 % posée
* sur la wrapper (les deux halves apparaissent comme un seul widget
* encadré). On supprime alors la bordure individuelle des inner buttons
* pour éviter le double tracé. */
.editor-toolbar__split:hover {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
border-color: color-mix(in srgb, var(--c-text) 8%, transparent);
}
.editor-toolbar__split .editor-toolbar__btn:hover {
box-shadow: none; /* la wrapper porte la bordure pour le split */
}
/* État actif : wrapper bg + bordure client, deux halves fusionnent
* visuellement (pas de filet séparateur), box-shadow inset des inner
* buttons neutralisé (sinon double bordure). */
.editor-toolbar__split:has(.editor-toolbar__split-main.is-active) {
background: color-mix(in srgb, var(--c-client) 5%, transparent);
border-color: color-mix(in srgb, var(--c-client) 60%, transparent);
}
.editor-toolbar__split:has(.editor-toolbar__split-main.is-active):hover {
background: color-mix(in srgb, var(--c-client) 10%, transparent);
}
/* Le main devient transparent (le bg client vient de la wrapper) ; le
* caret GARDE son fond noir 8 % posé par sa règle de base — c'est ce
* qui le distingue visuellement en permanence du bouton principal. */
.editor-toolbar__split:has(.editor-toolbar__split-main.is-active) .editor-toolbar__split-main {
background: transparent;
box-shadow: none;
color: var(--c-client);
}
.editor-toolbar__split:has(.editor-toolbar__split-main.is-active) .editor-toolbar__btn--caret {
box-shadow: none;
color: var(--c-client);
}
/* Panel des variants — grille de tuiles carrées avec mini-preview de la
* liste rendue (style Word). Le navigateur dessine nativement la puce ou
* la numérotation via list-style-type, on n'a qu'à styler le conteneur. */
.editor-toolbar__variants--grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
padding: var(--sp-2);
min-width: 0;
}
.editor-toolbar__variant {
aspect-ratio: 1;
width: 60px;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
padding: 6px 6px 6px 18px; /* place pour la puce/numéro à gauche (ordered) */
cursor: pointer;
transition: border-color var(--tr-base), background var(--tr-base);
}
/* Variante bullet : un seul caractère puce centré dans le carré, pas de
* mini-liste (les puces non ordonnées sont visuellement explicites). Tuile
* + symbole plus petits que les variants ordonnées (qui doivent contenir
* une mini-liste). */
.editor-toolbar__variant--bullet {
width: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.variant-bullet {
font-size: 14px;
line-height: 1;
color: var(--c-text);
}
/* Ajustements typographiques par caractère :
* - cercle (○) un cran plus fin (caractère un peu massif visuellement)
* - carré (▪) un cran plus gros (caractère visuellement plus petit) */
.variant-bullet--circle { font-size: 13px; }
.variant-bullet--square { font-size: 22px; }
/* Pour le panneau de variants BULLET : 4 tuiles sur une seule ligne
* (dash + disc + circle + square). Override du grid 3-cols par défaut. */
.editor-toolbar__variants--grid[data-cmd-group="list_bullet"] {
grid-template-columns: repeat(4, auto);
}
.editor-toolbar__variant:hover {
border-color: color-mix(in srgb, var(--c-text) 25%, transparent);
background: var(--c-bg-elevated);
}
.editor-toolbar__variant.is-active {
border-color: color-mix(in srgb, var(--c-client) 60%, transparent);
background: color-mix(in srgb, var(--c-client) 5%, transparent);
}
.editor-toolbar__variant.is-active .variant-preview,
.editor-toolbar__variant.is-active .variant-bullet {
color: var(--c-client);
}
/* Mini-preview interne : 3 li, chacune avec une petite barre horizontale
* (le span) qui simule du texte. Les markers (puces/numéros) viennent
* naturellement du navigateur via list-style-type sur le ul/ol. */
.variant-preview {
margin: 0;
padding-left: 0;
list-style-position: outside;
font-size: 9px;
line-height: 1;
color: var(--c-text-muted);
}
.variant-preview li {
margin-bottom: 4px;
}
.variant-preview li:last-child { margin-bottom: 0; }
.variant-preview span {
display: inline-block;
width: 28px;
height: 3px;
background: currentColor;
opacity: 0.5;
border-radius: 1px;
vertical-align: middle;
}
.editor-toolbar__btn svg { width: 18px; height: 18px; display: block; }
.editor-toolbar__btn .icon-mask { width: 18px; height: 18px; }
.editor-toolbar__btn--text {
font-size: var(--fs-md);
font-weight: 650;
font-family: var(--font-sans);
line-height: 1;
}
.editor-toolbar__btn--text sup,
.editor-toolbar__btn--text sub {
font-size: 0.65em;
font-weight: 600;
}
/* ── Contenu éditeur (lorem statique pour la Phase 1) ──────────────── */
.editor-content {
padding: var(--sp-8) var(--sp-10) var(--sp-12);
color: var(--c-text);
line-height: var(--lh-base);
font-size: var(--fs-md);
}
.editor-content p {
margin: 0 0 var(--sp-4);
}
.editor-h1, .editor-h2 {
display: flex; align-items: baseline;
gap: var(--sp-6);
margin: 0 0 var(--sp-5);
}
.editor-h1 { font-size: 1.875rem; font-weight: 800; } /* 30px */
.editor-h2 { font-size: 1.5rem; font-weight: 800; margin-top: var(--sp-6); }
.editor-h-num { color: var(--c-client); min-width: 2.5rem; }
.editor-h-text { color: var(--c-client); }
/* Lien « cassé » illustratif (ancre rouge barrée) du mock. */
.editor-link-broken {
color: var(--c-accent);
text-decoration: line-through;
}
/* NB : règles du CONTENU édité (.ProseMirror) → public/css/editor-prose.css
* (séparée car partagée avec l'export HTML, voir le memo associé).
*
* Ici ne restent que les styles du CHROME éditeur : overlay de connexion,
* toolbar, side panels, etc. */
/* ── État de connexion : overlay « connexion en cours » + opacité
* réduite sur l'éditeur et les 2 side panels. Le header reste intact
* (l'overlay est dans .editor-shell, pas au-dessus du header). On utilise
* :has() pour remonter l'état depuis #editor-root jusqu'au shell parent. */
.editor-shell { position: relative; }
.editor-shell__status {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
padding: var(--sp-3) var(--sp-5);
background: var(--c-bg-elevated);
color: var(--c-text);
font-size: var(--fs-sm);
font-weight: 600;
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
pointer-events: none;
display: none; /* affiché conditionnellement plus bas */
}
.editor-shell__status-connecting,
.editor-shell__status-disconnected { display: none; }
/* État connecting : opacité réduite sur card + sides, overlay visible. */
.editor-shell:has(#editor-root[data-connection="connecting"]) .editor-card,
.editor-shell:has(#editor-root[data-connection="connecting"]) .editor-side {
opacity: 0.3;
transition: opacity var(--tr-base, 0.2s);
pointer-events: none;
}
.editor-shell:has(#editor-root[data-connection="connecting"]) .editor-shell__status { display: block; }
.editor-shell:has(#editor-root[data-connection="connecting"]) .editor-shell__status-connecting { display: inline; }
/* État disconnected : même grisé + libellé différent (reconnexion en cours). */
.editor-shell:has(#editor-root[data-connection="disconnected"]) .editor-card,
.editor-shell:has(#editor-root[data-connection="disconnected"]) .editor-side {
opacity: 0.3;
transition: opacity var(--tr-base, 0.2s);
pointer-events: none;
}
.editor-shell:has(#editor-root[data-connection="disconnected"]) .editor-shell__status { display: block; }
.editor-shell:has(#editor-root[data-connection="disconnected"]) .editor-shell__status-disconnected { display: inline; }
/* État connected : transition douce vers opacité pleine. */
.editor-shell .editor-card,
.editor-shell .editor-side {
transition: opacity var(--tr-base, 0.2s);
}
/* ── Compteur de présence — fixed en bas de viewport, centré ───────────
* :
* summary = pill ovale avec icône user + libellé compteur
* panel = liste des connectés (avatar, nom, rôle, mailto) qui
* S'OUVRE VERS LE HAUT (bottom: 100% + offset)
*
* Position fixed = reste visible quel que soit le scroll de l'éditeur.
* Z-index 50 pour passer devant le contenu et derrière une éventuelle
* modale (qui sera > 100). Fermeture sur clic extérieur ou Escape via
* dropdown-outside-close.js (handler global déjà en place).
*/
.editor-presence {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: max-content;
z-index: 50;
}
/* Empêche le badge curseur d'un participant (positionné absolute) de
* déclencher une scrollbar horizontale au niveau du document quand il
* déborde la largeur de l'éditeur. `clip` clipper seulement visuellement,
* sans créer de scroll container (compatible avec position: sticky). */
body.page-editor { overflow-x: clip; }
.editor-presence__button {
list-style: none; /* retire la flèche native */
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: 999px;
font-size: var(--fs-sm);
color: var(--c-text-secondary);
transition: background var(--tr-base), color var(--tr-base),
border-color var(--tr-base);
}
.editor-presence__button::-webkit-details-marker { display: none; }
/* Neutralise la règle globale .dropdown[open] summary { color: var(--c-text) }
* (sinon le texte devient noir une fois la liste ouverte). On garde le
* texte secondaire à l'état repos+open, et on passe en blanc au hover. */
.editor-presence[open] .editor-presence__button {
color: var(--c-text-secondary);
}
/* Spécificité bumpée (.class .class:hover) pour battre la règle globale
* .dropdown[open] summary qui s'imposerait sinon en état open+hover. */
.editor-presence .editor-presence__button:hover,
.editor-presence .editor-presence__button:focus-visible {
background: var(--c-client);
color: white;
border-color: var(--c-client);
}
.editor-presence__button svg {
width: 16px; height: 16px;
flex-shrink: 0;
}
.editor-presence__panel {
position: absolute;
/* Reset le `top` posé par la règle globale .dropdown__panel — sinon
* top + bottom simultanés provoquent un comportement contradictoire,
* et `top` gagne → le panel s'ouvrirait vers le bas. */
top: auto;
bottom: calc(100% + var(--sp-2));
left: 50%;
transform: translateX(-50%);
min-width: 340px;
max-width: 420px;
padding: var(--sp-3);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 10;
}
.editor-presence__title {
margin: 0 0 var(--sp-2);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-text-muted);
}
.editor-presence__list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: var(--sp-2);
max-height: 320px;
overflow-y: auto;
}
.editor-presence__user {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2);
border-top: 1px solid var(--c-border); /* filet séparateur clair */
border-radius: var(--radius-sm);
transition: background var(--tr-base);
}
.editor-presence__user:first-child { border-top: 0; }
/* Hover : fond gris subtil pour souligner la cible (cible de clic = enveloppe
* mailto). Le filet du top reste visible. */
.editor-presence__user:hover { background: var(--c-bg-subtle); }
/* Charte CTA : filet gris discret au repos + bg couleur client + icône
* blanche au hover, transition douce. */
.editor-presence__contact {
margin-left: auto;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text-muted);
background: transparent;
border: 1px solid var(--c-text-muted);
border-radius: 50%;
transition: background var(--tr-base), color var(--tr-base),
border-color var(--tr-base);
flex-shrink: 0;
}
.editor-presence__contact:hover {
background: var(--c-client);
color: white;
border-color: var(--c-client);
}
.editor-presence__contact .icon-mask { width: 16px; height: 16px; }
.editor-presence__avatar {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--c-user-bg, #d0e4fd);
color: var(--c-user-fg, #066ef0);
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; font-weight: 650;
overflow: hidden;
}
.editor-presence__avatar img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.editor-presence__info {
display: flex; flex-direction: column;
line-height: 1.25;
min-width: 0;
}
.editor-presence__info strong {
font-weight: 600;
font-size: var(--fs-md);
color: var(--c-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-presence__info small {
color: var(--c-user-fg, var(--c-text-muted));
font-size: var(--fs-xs);
}
/* ── Modale « renommer le chapitre » ───────────────────────────────────
* Overlay blanc à 85% (charte) + card centrée. Pas de transition pour
* rester instantanée (focus immédiat sur l'input). Z-index élevé pour
* passer devant la presence pill (z-index 50). */
.editor-rename-modal {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.editor-rename-modal__card {
width: 100%;
max-width: 460px;
background: var(--c-bg-elevated);
/* Bordure noire + ombre légère standard — convention uniforme sur
toutes les modales de l'app (cf. .versions-modal, .editor-confirm-modal). */
border: 1px solid var(--c-text);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-5) var(--sp-6) var(--sp-4);
display: flex; flex-direction: column;
gap: var(--sp-3);
}
.editor-rename-modal__title {
margin: 0;
font-size: var(--fs-lg);
font-weight: 650;
color: var(--c-text);
}
.editor-rename-modal__label {
font-size: var(--fs-sm);
color: var(--c-text-secondary);
margin: 0;
}
.editor-rename-modal__input {
width: 100%;
font-size: var(--fs-md);
}
.editor-rename-modal__error {
margin: 0;
color: var(--c-accent, #ea0000);
font-size: var(--fs-sm);
}
.editor-rename-modal__actions {
display: flex; justify-content: flex-end;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
/* ── Modale de confirmation générique (remplace window.confirm) ─────────
* Même structure visuelle que la modale rename : overlay blanc à 85%,
* card centrée. Variante --danger pour le bouton de confirmation quand
* l'action est destructive (suppression de commentaire, par ex.). */
.editor-confirm-modal {
position: fixed;
inset: 0;
/* 400 pour passer au-dessus du modal versions (z-index 300).
Un confirm est TOUJOURS déclenché depuis un autre contexte —
il doit rester le plus haut z-index de l'app. */
z-index: 400;
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.editor-confirm-modal__card {
width: 100%;
max-width: 420px;
background: var(--c-bg-elevated);
/* Bordure noire (couleur texte) pour détacher franchement la card
de l'overlay clair. Convention partagée avec .versions-modal
pour toutes les modales de l'app. */
border: 1px solid var(--c-text);
border-radius: var(--radius-lg);
/* Ombre standard légère — même pattern que .versions-modal__card et
les dropdowns/popovers de l'app. */
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-5) var(--sp-6) var(--sp-4);
display: flex; flex-direction: column;
gap: var(--sp-3);
}
.editor-confirm-modal__title {
margin: 0;
font-size: var(--fs-lg);
font-weight: 650;
color: var(--c-text);
}
.editor-confirm-modal__message {
margin: 0;
font-size: var(--fs-sm);
color: var(--c-text-muted);
line-height: 1.5;
}
.editor-confirm-modal__actions {
display: flex; justify-content: flex-end;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
/* Min-width sur les boutons du modal confirm — sinon un label court comme
« ok » rend le bouton presque circulaire à cause du border-radius, ce qui
fait bizarre. 84px garantit une forme rectangulaire lisible même pour les
labels d'un ou deux mots. */
.editor-confirm-modal__actions .btn {
min-width: 84px;
}
/* Pas d'outline focus sur les boutons du modal — le contexte modal est
déjà clair, l'outline par défaut décalé de 3px fait un halo disgracieux
autour du bouton primary quand il reçoit le focus initial (btnConfirm.focus()). */
.editor-confirm-modal__actions .btn:focus,
.editor-confirm-modal__actions .btn:focus-visible {
outline: none;
}
/* ── Overlay hover sur tableau ─────────────────────────────────────
Matérialise le tableau survolé par une bordure couleur client + 2
flèches (au-dessus/en-dessous) qui insèrent un paragraphe avant/après
le tableau. `pointer-events: none` sur l'overlay lui-même pour ne
PAS bloquer les clics vers les cellules ; les 2 flèches réactivent
`pointer-events: auto` pour rester interactives. */
/* Bordure de survol autour du tableau — filet noir léger. Passe en
client + épaisseur double quand le tableau est SÉLECTIONNÉ (via la
case à cocher en haut-gauche → NodeSelection PM). */
.pm-table-hover-overlay {
position: absolute;
/* Doit passer SOUS la toolbar éditeur sticky (z-index: 5) quand le
tableau scrolle jusqu'à croiser la toolbar — sinon l'outline et
les flèches d'insertion débordent visuellement par-dessus les
boutons. Reste au-dessus du flow normal du document (aucun
z-index concurrent < 3 côté contenu). La toolbar flottante
tableau (z-index: 101) continue de passer par-dessus, elle. */
z-index: 3;
pointer-events: none; /* laisse passer les clics aux cellules */
outline: 1px solid var(--c-text, #111);
outline-offset: 2px;
border-radius: 2px;
transition: outline-color var(--tr-base), outline-width var(--tr-base);
}
.pm-table-hover-overlay[hidden] { display: none; }
/* Tableau sélectionné (NodeSelection via la case à cocher) : signal
fort — filet COULEUR CLIENT 2 px pour se distinguer clairement du
simple survol (filet noir 1 px). Cohérent avec les autres states
actifs de la UI (client comme signal principal). */
.pm-table-hover-overlay.is-selected {
outline: 2px solid var(--c-client);
}
/* Case à cocher en haut-gauche : coche = NodeSelection sur la table.
Style Word / CKEditor : petit carré blanc bordé noir → carré client
avec ✓ blanc quand coché. */
.pm-table-hover-overlay__select {
position: absolute;
top: -12px;
left: -12px;
pointer-events: auto;
width: 20px;
height: 20px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
background: #fff;
color: transparent; /* ✓ invisible tant que non coché */
border: 1.5px solid var(--c-text, #111);
border-radius: 3px;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
transition: background var(--tr-base), border-color var(--tr-base), color var(--tr-base);
}
.pm-table-hover-overlay__select::before {
/* Coche ✓ SVG-like via caractère — apparaît quand .is-checked. */
content: '✓';
font-size: 14px;
line-height: 1;
font-weight: 650;
}
.pm-table-hover-overlay__select:hover {
border-color: var(--c-client);
}
/* Checkbox cochée quand l'overlay parent est en `.is-selected`
(NodeSelection sur le tableau). Même couleur client que la bordure —
un seul état source (`.is-selected` sur l'overlay), pas de double-tracking. */
.pm-table-hover-overlay.is-selected .pm-table-hover-overlay__select {
background: var(--c-client);
border-color: var(--c-client);
color: #fff;
}
/* Boutons ronds — même charte que .editor-chapter-title__handle :
28px blanc / bordure noire / icône noire au repos, bg client + icône
blanche au hover. Boîte pointer-events: auto pour rester cliquable
pendant que l'overlay parent est en pointer-events: none. */
.pm-table-hover-overlay__arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: auto;
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
background: #fff;
color: var(--c-text, #111);
border: 1px solid var(--c-text, #111);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
.pm-table-hover-overlay__arrow:hover {
background: var(--c-client);
color: #fff;
border-color: var(--c-client);
}
.pm-table-hover-overlay__arrow--above { top: -14px; }
.pm-table-hover-overlay__arrow--below { bottom: -14px; }
.pm-table-hover-overlay__arrow .icon-mask { width: 14px; height: 14px; }
/* Disabled : voisin déjà paragraphe vide → inutile d'ajouter un autre.
Cachée entièrement (comme les handles du chapter_title). */
.pm-table-hover-overlay__arrow:disabled { display: none; }
/* ── Floating toolbar tableau — quand curseur dans une cellule ────
Mêmes règles visuelles que la toolbar image (32×32, hover 1px inset,
is-active client). */
.editor-table-toolbar {
position: absolute;
z-index: 101;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2);
max-width: calc(100vw - 32px);
background: var(--c-bg-subtle); /* même gris clair que la toolbar principale */
border: 1px solid var(--c-text);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-1) var(--sp-2);
user-select: none;
}
.editor-table-toolbar[hidden] { display: none; }
.editor-table-toolbar__group {
display: flex;
align-items: center;
gap: 2px;
}
.editor-table-toolbar__group + .editor-table-toolbar__group {
border-left: 1px solid var(--c-border);
padding-left: var(--sp-2);
}
.editor-table-toolbar__btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--c-text);
cursor: pointer;
font: inherit;
font-size: 11px;
line-height: 1;
transition: background var(--tr-base), box-shadow var(--tr-base), color var(--tr-base);
}
.editor-table-toolbar__btn:hover {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-text) 8%, transparent);
}
.editor-table-toolbar__btn.is-active {
background: color-mix(in srgb, var(--c-client) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-client) 60%, transparent);
color: var(--c-client);
}
.editor-table-toolbar__btn.is-active:hover {
background: color-mix(in srgb, var(--c-client) 10%, transparent);
}
/* Bouton disabled — sert notamment aux boutons merge/split qui ne
sont pas toujours applicables (ex: pas de multi-sélection = pas de
fusion possible). */
.editor-table-toolbar__btn:disabled {
color: var(--c-text-muted);
opacity: 0.4;
cursor: default;
pointer-events: none;
}
.editor-table-toolbar__btn--danger { color: #c4302b; }
.editor-table-toolbar__btn--danger:hover {
background: rgba(196, 48, 43, 0.08);
box-shadow: inset 0 0 0 1px rgba(196, 48, 43, 0.3);
}
/* Icônes SVG dans les boutons — 18×18 (charte toolbars éditeur). */
.editor-table-toolbar__btn .icon-mask {
width: 18px;
height: 18px;
}
/* Option « supprimer » d'un dropdown en rouge (delete row / delete col).
Sélecteur doublé pour battre la specificité du `.editor-image-toolbar__option
{ color: var(--c-text) }` déclaré plus bas dans le fichier. */
.editor-image-toolbar__option.editor-image-toolbar__option--danger {
color: #c4302b;
}
.editor-image-toolbar__option.editor-image-toolbar__option--danger:hover {
background: rgba(196, 48, 43, 0.08);
color: #c4302b;
}
/* ── Grid picker « insérer un tableau » (style Word) ───────────────
Popover flottant ancré sous le bouton toolbar. Grille de cellules,
hover pour choisir N×M, click pour insérer. */
.editor-table-picker {
z-index: 300;
background: var(--c-bg-elevated);
border: 1px solid var(--c-text);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-2);
user-select: none;
}
.editor-table-picker__grid {
display: grid;
grid-template-columns: repeat(var(--picker-cols, 10), 20px);
gap: 2px;
}
.editor-table-picker__cell {
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.06); /* gris très clair au repos */
border: 1px solid rgba(0, 0, 0, 0.10);
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
transition: background var(--tr-base), border-color var(--tr-base);
}
/* Cellule dans la sélection en cours (calcul « toutes celles jusqu'à
la cellule survolée ») → fond client atténué + bordure client pleine.
Cohérent avec les autres states is-active du reste de la UI. */
.editor-table-picker__cell.is-active {
background: color-mix(in srgb, var(--c-client) 20%, transparent);
border-color: var(--c-client);
}
.editor-table-picker__label {
margin-top: var(--sp-2);
text-align: center;
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
/* ── Modale dimensions image — étend la confirm-modal ──────────────
2 champs (W / H) avec un bouton cadenas central. Padlock locked =
les 2 dimensions sont liées par le ratio natif de l'image. */
.editor-image-dimensions-modal__card { max-width: 360px; }
.editor-image-dimensions-modal__fields {
display: flex;
align-items: flex-end;
gap: var(--sp-2);
}
.editor-image-dimensions-modal__field {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.editor-image-dimensions-modal__field-label {
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.editor-image-dimensions-modal__field-input {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
font: inherit;
font-size: var(--fs-sm);
background: var(--c-bg);
color: var(--c-text);
}
.editor-image-dimensions-modal__field-input:focus {
outline: none;
border-color: var(--c-client);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-client) 25%, transparent);
}
/* Cadenas purement décoratif : indique que largeur/hauteur sont liées
par le ratio natif. Pas interactif. */
.editor-image-dimensions-modal__lock {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 1px; /* aligne sur la baseline des inputs */
color: var(--c-text-muted);
}
.editor-image-dimensions-modal__lock .icon-mask {
width: 16px;
height: 16px;
}
.editor-confirm-modal__confirm--danger {
background: var(--c-error-fg);
color: var(--c-text-on-dark);
border: 1px solid var(--c-error-fg);
}
.editor-confirm-modal__confirm--danger:hover {
background: color-mix(in srgb, var(--c-error-fg) 85%, #000);
border-color: color-mix(in srgb, var(--c-error-fg) 85%, #000);
}
/* ── ContextMenu : panel toujours visible ancré au bloc courant ─────────
* Pas de trigger : le panel apparaît dès que le curseur entre dans un
* bloc éligible. Position calculée en JS : bord DROIT du panel = 10 px
* à gauche du bord gauche de .ProseMirror (centrée max-width 1100).
* Position verticale via `transform: translateY` (GPU compositing) pour
* éviter le jitter Chrome quand la toolbar sticky se réaligne au scroll.
* Z-index 100 → au-dessus de tout sauf modales (z-index 200). */
.editor-contextmenu {
position: absolute;
top: 0; /* ancre, le transform fait le décalage Y */
z-index: 100;
min-width: 220px;
background: var(--c-bg-elevated);
border: 1px solid var(--c-text);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-2);
will-change: transform;
}
/* ─── Floating toolbar : image sélectionnée ──────────────────────────
Apparaît au-dessus (ou en-dessous si pas la place) de l'image
sélectionnée. Position calculée par floating-toolbar.js et écrite en
style inline `top` / `left` relatifs à `.editor-shell`. */
.editor-image-toolbar {
position: absolute;
z-index: 101; /* au-dessus du ContextMenu */
display: flex;
align-items: center;
flex-wrap: wrap; /* repli sur 2 lignes si trop large */
gap: var(--sp-2);
max-width: calc(100vw - 32px);
background: var(--c-bg-subtle); /* même gris clair que la toolbar principale */
border: 1px solid var(--c-text);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: var(--sp-1) var(--sp-2);
user-select: none;
}
.editor-image-toolbar__group[hidden] { display: none; }
.editor-image-toolbar[hidden] { display: none; }
.editor-image-toolbar__group {
display: flex;
align-items: center;
gap: 2px;
}
.editor-image-toolbar__group + .editor-image-toolbar__group {
/* Filet séparateur entre groupes (align / largeur / suppr). */
border-left: 1px solid var(--c-border);
padding-left: var(--sp-2);
}
/* Boutons identiques à la toolbar éditeur (charte unifiée) :
carré 32×32, transparent au repos, légère bordure inset + bg au
hover, et en is-active : bg client teinté + bordure client + couleur
icône passée en --c-client (l'icon-mask hérite via background-color =
currentColor). */
.editor-image-toolbar__btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--c-text);
cursor: pointer;
font: inherit;
font-size: var(--fs-xs);
line-height: 1.1;
gap: 4px;
transition: background var(--tr-base), box-shadow var(--tr-base), color var(--tr-base);
}
.editor-image-toolbar__btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-text) 8%, transparent);
}
.editor-image-toolbar__btn.is-active {
background: color-mix(in srgb, var(--c-client) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-client) 60%, transparent);
color: var(--c-client);
}
.editor-image-toolbar__btn.is-active:hover {
background: color-mix(in srgb, var(--c-client) 10%, transparent);
}
/* Dropdown largeur : on accepte une largeur > 32px pour pouvoir
afficher « 100 % », « 320 px », etc. Square strict cassé ici. */
.editor-image-toolbar__btn--width {
width: auto;
min-width: 56px;
padding: 0 8px;
}
.editor-image-toolbar__btn--delete {
color: #c4302b;
}
.editor-image-toolbar__btn--delete:hover {
background: rgba(196, 48, 43, 0.08);
box-shadow: inset 0 0 0 1px rgba(196, 48, 43, 0.3);
}
/* Icônes (masquées via icon-mask). */
.editor-image-toolbar__btn .icon-mask {
width: 18px;
height: 18px;
}
/* ── Dropdown « style image » (CKEditor-style) ────────────────────── */
.editor-image-toolbar__group--dropdown {
position: relative; /* ancre du popover */
}
.editor-image-toolbar__btn--dropdown {
gap: 2px;
/* Boutons dropdown = un poil plus larges qu'un carré 32×32 : il faut
accueillir l'icône principale + le caret sans les tasser. */
width: auto;
min-width: 44px;
padding: 0 6px;
}
/* Légère respiration entre l'icône principale et le caret du dropdown. */
.editor-image-toolbar__btn--dropdown .editor-image-toolbar__caret {
margin-left: 4px;
}
/* Caret du dropdown — même taille que dans la toolbar éditeur (8×8).
Pas d'opacité custom : le caret utilise le même `currentColor` que
l'icône principale (icon-mask), donc suit exactement les mêmes
états inactive / is-active / disabled que le reste du bouton. */
.editor-image-toolbar__caret.icon-mask {
width: 8px;
height: 8px;
}
.editor-image-toolbar__popover {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
min-width: 220px;
background: var(--c-bg-elevated);
border: 1px solid var(--c-text);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
z-index: 102; /* au-dessus du panel parent */
white-space: nowrap; /* labels sur 1 ligne (les modes long
comme « insérer une colonne à droite »
doivent tenir sans se casser en 2 lignes) */
}
.editor-image-toolbar__popover .editor-image-toolbar__option-label {
white-space: nowrap;
}
.editor-image-toolbar__popover[hidden] { display: none; }
.editor-image-toolbar__option {
appearance: none;
background: transparent;
border: 0;
text-align: left;
padding: 6px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--c-text);
font: inherit;
font-size: var(--fs-xs);
display: flex;
align-items: center;
gap: 8px;
transition: background var(--tr-base);
}
.editor-image-toolbar__option:hover {
background: color-mix(in srgb, var(--c-text) 6%, transparent);
}
.editor-image-toolbar__option.is-active {
background: color-mix(in srgb, var(--c-client) 18%, transparent);
font-weight: 600;
}
.editor-image-toolbar__option .icon-mask {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.editor-image-toolbar__option-label {
flex: 1;
min-width: 0;
}
/* (Réservé) Masque le ContextMenu quand un commentaire est actif —
la classe `body.has-active-comment` n'est plus posée par le JS
actuel (les états is-active/is-resolved sont gérés par des PM
Decorations sur la mark elle-même, pas par un toggle global).
Garde la règle si jamais on remet un toggle global plus tard. */
body.has-active-comment .editor-contextmenu {
display: none !important;
}
/* Filet séparateur entre groupes visibles. On utilise `~` (general
* sibling) plutôt que `+` (adjacent) pour SAUTER les groupes masqués :
* ex. blocktype VISIBLE, blockstyles HIDDEN, heading-numbering VISIBLE
* → heading-numbering reçoit bien le filet en se basant sur blocktype
* comme « précédent visible », même si blockstyles est entre les deux. */
.editor-contextmenu__group:not([hidden]) ~ .editor-contextmenu__group:not([hidden]) {
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--c-border);
}
/* CellSelection multi-lignes/cellules : le menu reste visible mais on
masque tous les groupes qui n'ont pas de sens pour un range de cellules
(styles de bloc, type de bloc, numérotation heading, styles de caractère).
Seuls rowStyle et trameColor restent utilisables. */
.editor-contextmenu--cell-selection .editor-contextmenu__group--blocktype,
.editor-contextmenu--cell-selection .editor-contextmenu__group--styles,
.editor-contextmenu--cell-selection .editor-contextmenu__group--heading-num,
.editor-contextmenu--cell-selection .editor-contextmenu__group--charstyles {
display: none;
}
/* En mode CellSelection, rowStyle devient le PREMIER groupe visible :
pas de filet séparateur au-dessus (les groupes masqués ci-dessus
sont en display:none donc invisibles, mais la règle générique
`:not([hidden]) ~ :not([hidden])` ne fait pas la différence entre
[hidden] et display:none — on force explicitement le reset ici).
Sélecteur DOUBLÉ (chaque classe apparaît deux fois) pour matcher la
spécificité de la règle générique (0,4,0 avec les deux `:not([hidden])`)
et gagner via l'ordre de déclaration. */
.editor-contextmenu.editor-contextmenu--cell-selection
.editor-contextmenu__group.editor-contextmenu__group--row-style {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.editor-contextmenu__group-title {
font-size: 0.7rem;
font-weight: 650;
text-transform: none; /* bas de casse comme tout le reste UI */
color: color-mix(in srgb, var(--c-text-muted) 65%, transparent);
padding: 0 var(--sp-2) var(--sp-1);
}
.editor-contextmenu__item {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
color: var(--c-text);
cursor: pointer;
transition: background var(--tr-base), color var(--tr-base);
}
.editor-contextmenu__item:hover:not(:disabled) {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
}
.editor-contextmenu__item.is-active {
background: color-mix(in srgb, var(--c-client) 8%, transparent);
color: var(--c-client);
font-weight: 600;
}
.editor-contextmenu__item:disabled {
color: var(--c-text-muted);
cursor: default;
opacity: 0.5;
}
/* ── Block type select : dropdown stylé (trigger + liste) ──────────── */
.editor-blocktype-select { position: relative; }
.editor-blocktype-select__trigger {
list-style: none;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: transparent;
color: var(--c-text);
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: 500;
transition: background var(--tr-base), border-color var(--tr-base);
}
.editor-blocktype-select__trigger::-webkit-details-marker { display: none; }
.editor-blocktype-select__trigger:hover {
background: color-mix(in srgb, var(--c-text) 5%, transparent);
border-color: color-mix(in srgb, var(--c-text) 25%, transparent);
}
.editor-blocktype-select[open] .editor-blocktype-select__trigger {
border-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}
.editor-blocktype-select__current {
flex: 1;
text-align: left;
font-weight: 600; /* type courant un peu plus marqué */
}
.editor-blocktype-select__caret {
color: var(--c-text-muted);
width: 10px; height: 10px;
flex-shrink: 0;
}
.editor-blocktype-select__list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
min-width: 100%;
padding: var(--sp-1);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 1;
}
/* Sections « style de paragraphe » / « style de titre » — listing vertical
* d'options sans preview (l'application est invisible au repos puisque le
* style par défaut ne pose pas de classe). */
.editor-contextmenu__styles-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.editor-contextmenu__item--style {
font-size: var(--fs-sm);
}
/* ── Palette « couleur de trame » (contextmenu) ────────────────────
6 swatches carrés côte-à-côte : 5 grays du clair au foncé + 1
couleur client. Le swatch actif porte un anneau couleur client. */
.editor-contextmenu__trame-swatches {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 0;
}
.editor-contextmenu__trame-swatch {
appearance: none;
width: 22px;
height: 22px;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--radius-sm);
cursor: pointer;
transition: transform var(--tr-base), box-shadow var(--tr-base);
}
.editor-contextmenu__trame-swatch:hover {
transform: scale(1.08);
}
.editor-contextmenu__trame-swatch.is-active {
box-shadow: 0 0 0 2px var(--c-client);
border-color: transparent;
}
/* Palette prédéfinie — cohérente avec les classes CSS `.is-trame--`
du rendu tableau. Les 5 premiers sont de vrais gris du très clair au
très foncé (le premier = défaut). Les 2 derniers sont client-clair
et client à 100 %. */
.editor-contextmenu__trame-swatch--gray-1 { background: #f2f2f2; }
.editor-contextmenu__trame-swatch--gray-2 { background: #d9d9d9; }
.editor-contextmenu__trame-swatch--gray-3 { background: #a6a6a6; }
.editor-contextmenu__trame-swatch--gray-4 { background: #595959; }
.editor-contextmenu__trame-swatch--gray-5 { background: #262626; }
.editor-contextmenu__trame-swatch--client-light { background: color-mix(in srgb, var(--c-client, #666) 22%, transparent); }
.editor-contextmenu__trame-swatch--client { background: var(--c-client, #666); }
.editor-contextmenu__item--restart {
margin-top: 4px;
padding-top: var(--sp-2);
border-top: 1px solid var(--c-border);
color: var(--c-text-muted);
}
.editor-contextmenu__item--restart.is-active {
color: var(--c-client);
font-weight: 600;
}
/* Items « bloc » : preview stylé qui ressemble à la cible (Notion-like).
* Chaque preview prend la couleur client + une taille progressive selon
* le niveau heading. */
.editor-contextmenu__item--block {
padding: var(--sp-2) var(--sp-3);
line-height: 1.2;
}
.editor-contextmenu__preview {
display: inline-block;
color: inherit;
}
.editor-contextmenu__preview--paragraph {
font-size: 0.9rem;
font-weight: 400;
color: var(--c-text);
}
.editor-contextmenu__preview--h1 {
font-size: 1.4rem;
font-weight: 800;
color: var(--c-client);
}
.editor-contextmenu__preview--h2 {
font-size: 1.2rem;
font-weight: 800;
color: var(--c-client);
}
.editor-contextmenu__preview--h3 {
font-size: 1.05rem;
font-weight: 650;
color: var(--c-client);
}
.editor-contextmenu__preview--h4 {
font-size: 0.95rem;
font-weight: 650;
color: var(--c-client);
}
.editor-contextmenu__preview--h5 {
font-size: 0.9rem;
font-weight: 650;
color: var(--c-client);
}
.editor-contextmenu__preview--h6 {
font-size: 0.85rem;
font-weight: 650;
color: var(--c-client);
font-style: italic;
}
/* Previews « Note X » — mêmes proportions que les titres réguliers mais
* décalées d'un cran vers le bas (Note 1 ≈ h2, Note 2 ≈ h3, …) et poids
* légèrement inférieur pour rester lisiblement distincts. Le rendu doit
* matcher visuellement le style appliqué dans l'éditeur. */
.editor-contextmenu__preview--note1 {
font-size: 1.2rem;
font-weight: 700;
color: var(--c-client);
}
.editor-contextmenu__preview--note2 {
font-size: 1.05rem;
font-weight: 700;
color: var(--c-client);
}
.editor-contextmenu__preview--note3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--c-client);
}
.editor-contextmenu__preview--note4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--c-client);
}
.editor-contextmenu__preview--note5 {
font-size: 0.85rem;
font-weight: 600;
color: var(--c-client);
font-style: italic;
}
/* ════════════════════════════════════════════════════════════════════════
* CLIENT LIST — page de sélection de client (super_admin sans tenant)
* Listing simple : logo (ou dot couleur) + nom + flèche à droite.
* Chaque ligne est un bouton form qui POST /clients/switch.
* ════════════════════════════════════════════════════════════════════════ */
.client-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: var(--sp-1);
}
.client-list li form { margin: 0; }
.client-list__item {
width: 100%;
display: flex; align-items: center;
gap: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
font: inherit; color: inherit;
transition: background var(--tr-base), border-color var(--tr-base),
transform var(--tr-fast);
}
.client-list__item:hover {
background: var(--c-bg-subtle);
border-color: var(--c-client);
}
.client-list__item:focus-visible {
outline: 2px solid var(--c-client);
outline-offset: 2px;
}
.client-list__logo {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.client-list__logo img {
max-width: 40px; max-height: 32px;
object-fit: contain;
}
.client-list__name {
flex: 1;
font-size: var(--fs-md);
font-weight: 600;
}
.client-list__arrow {
color: var(--c-text-muted);
transition: color var(--tr-base), transform var(--tr-base);
flex-shrink: 0;
}
.client-list__item:hover .client-list__arrow {
color: var(--c-client);
transform: translateX(3px);
}
/* ════════════════════════════════════════════════════════════════════════
* ADMIN — pages CRUD (clients, utilisateurs, super-admins)
* ════════════════════════════════════════════════════════════════════════ */
/* Grille de cards adaptative (clients, utilisateurs…). */
.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--sp-4);
}
.admin-card {
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
display: flex; flex-direction: column;
gap: var(--sp-4);
}
.admin-card--archived {
opacity: 0.6;
}
.admin-card__head {
display: flex; align-items: center;
gap: var(--sp-3);
}
.admin-card__id { flex: 1; min-width: 0; }
.admin-card__name {
margin: 0;
font-size: var(--fs-lg);
font-weight: 650;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-card__slug {
margin: 0;
font-size: var(--fs-xs);
color: var(--c-text-faded);
font-family: var(--font-mono);
}
.admin-card__logo {
max-height: 36px;
max-width: 72px;
object-fit: contain;
}
.admin-card__meta {
display: flex; gap: var(--sp-5);
margin: 0;
}
.admin-card__meta > div {
display: flex; flex-direction: column;
}
.admin-card__meta dt {
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.admin-card__meta dd {
margin: 0;
font-size: var(--fs-lg);
font-weight: 650;
}
.admin-card__actions {
display: flex; gap: var(--sp-4);
flex-wrap: wrap;
align-items: center;
padding-top: var(--sp-3);
border-top: 1px solid var(--c-border);
}
.admin-card__inline-form { display: inline-block; }
/* Pastille de couleur (réutilisée dans le sélecteur de client header). */
.client-dot {
width: 14px; height: 14px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,.08);
}
/* Boutons d'action discrets (variantes de .link--button). */
.link--muted { color: var(--c-text-faded); }
.link--danger { color: var(--c-error-fg); }
.link--danger:hover { color: var(--c-accent); }
/* ── Color picker custom (input hex + swatch cliquable + popover HSV) ── */
.color-picker {
position: relative;
display: inline-flex; flex-direction: column;
gap: var(--sp-3);
}
/* Le swatch est positionné DANS l'input à gauche (carré, absolument).
L'input réserve la place via padding-left. */
.color-picker__field {
position: relative;
display: inline-block;
width: 160px;
}
.color-picker__swatch {
position: absolute;
top: 50%;
/* Marge gauche égale à la marge verticale (input height − swatch ÷ 2),
sinon le swatch « colle » au bord gauche. */
left: 7px;
transform: translateY(-50%);
width: 24px; height: 24px;
border-radius: var(--radius-sm);
/* Bordure noire en opacité réduite : visible sur swatch clair,
discrète sur swatch foncé. */
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
padding: 0;
transition: transform var(--tr-fast), border-color var(--tr-base);
z-index: 1;
}
.color-picker__swatch:hover { border-color: rgba(0, 0, 0, 0.45); }
.color-picker__swatch:focus-visible {
outline: 2px solid var(--c-text);
outline-offset: 2px;
}
.color-picker__input {
width: 100%;
padding-left: 40px; /* place pour le swatch (24 + 6 + ~10) */
font-family: var(--font-mono);
text-transform: uppercase;
}
/* Popover du picker : flotte sous le swatch, masquable via [hidden]. */
.color-picker__popover {
position: absolute;
top: calc(100% + var(--sp-2));
left: 0;
z-index: 50;
width: 220px;
padding: var(--sp-3);
background: var(--c-bg-elevated);
border: 1px solid var(--c-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column;
gap: var(--sp-3);
user-select: none;
}
/* Le `display: flex` ci-dessus écrase l'attribut HTML [hidden] qui
pose display:none avec une spécificité plus faible. On force le hide
quand l'attribut est présent. */
.color-picker__popover[hidden] { display: none; }
/* Carré saturation/value */
.color-picker__sv {
position: relative;
height: 160px;
border-radius: var(--radius-sm);
cursor: crosshair;
/* background appliqué par JS (gradient noir + gradient teinte) */
background: linear-gradient(to top, #000, transparent),
linear-gradient(to right, #fff, #ff0000);
}
.color-picker__sv-thumb {
position: absolute;
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.4);
transform: translate(-50%, -50%);
pointer-events: none;
background: #ff0000;
}
/* Slider de teinte */
.color-picker__hue {
position: relative;
height: 14px;
border-radius: 999px;
cursor: ew-resize;
background: linear-gradient(to right,
#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
#0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.color-picker__hue-thumb {
position: absolute;
top: 50%;
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.4);
transform: translate(-50%, -50%);
pointer-events: none;
background: transparent;
}
/* Preview image dans les formulaires (logo, etc.). `align-self: start`
pour ne pas se faire stretcher horizontalement par le flex column du
`.field` parent (sinon object-fit:contain centrerait l'image dans
une boîte étalée à 100%). */
.form__preview {
display: block;
align-self: flex-start;
max-height: 6rem;
width: auto;
object-fit: contain;
margin: 0 0 var(--sp-2);
}
/* ── Flash toast : fixé en haut, fade in/out sur 1.5s ────────────────── */
.flash-toast {
position: fixed;
top: calc(var(--header-height) + var(--sp-3));
left: 50%;
transform: translateX(-50%);
z-index: 100;
max-width: 90vw;
padding: var(--sp-3) var(--sp-5);
border-radius: 999px;
box-shadow: var(--shadow-lg);
font-size: var(--fs-sm);
font-weight: 500;
pointer-events: none;
animation: flash-toast 2800ms ease forwards;
}
.flash-toast--success {
background: var(--c-success-bg);
color: var(--c-success-fg);
border: 1px solid rgba(30,111,58,.25);
}
.flash-toast--error {
background: var(--c-error-bg);
color: var(--c-error-fg);
border: 1px solid rgba(138,26,20,.25);
}
@keyframes flash-toast {
0% { opacity: 0; transform: translate(-50%, -10px); }
12% { opacity: 1; transform: translate(-50%, 0); }
78% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -10px); visibility: hidden; }
}
/* Actions de form (boutons en ligne) */
.form-actions {
display: flex;
gap: var(--sp-3);
align-items: center;
}
/* Erreur sous un champ */
.field__error {
font-size: var(--fs-xs);
color: var(--c-error-fg);
}
/* ════════════════════════════════════════════════════════════════════════
* DATA TABLE — tableau de listing admin (utilisateurs, etc.)
* ════════════════════════════════════════════════════════════════════════ */
/* border-collapse: separate (au lieu de collapse) + overflow: visible :
nécessaire pour que les tooltips des .icon-action de la 1re ligne
ne se fassent pas clipper par le bord du tableau. Les coins arrondis
sont appliqués cell-par-cell pour compenser. */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
font-size: var(--fs-sm);
}
.data-table th,
.data-table td {
padding: var(--sp-3) var(--sp-4);
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--c-border);
}
.data-table thead th {
background: var(--c-bg-subtle);
font-weight: 600;
color: var(--c-text-muted);
font-size: var(--fs-xs);
text-transform: lowercase;
}
/* Coins arrondis : sur les cellules d'angle (en-tête haut, dernière
ligne bas) pour que le bg colorée respecte le radius du tableau. */
.data-table thead tr:first-child th:first-child {
border-top-left-radius: calc(var(--radius-lg) - 1px);
}
.data-table thead tr:first-child th:last-child {
border-top-right-radius: calc(var(--radius-lg) - 1px);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:last-child td:first-child {
border-bottom-left-radius: calc(var(--radius-lg) - 1px);
}
.data-table tbody tr:last-child td:last-child {
border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}
.data-table tbody tr:hover { background: var(--c-bg-subtle); }
.data-table__col--avatar { width: 48px; padding-right: 0; }
/* Logo client / asset image en cellule d'avatar (carrée, max 38×38). */
.data-table__logo {
display: block;
max-width: 38px; max-height: 38px;
object-fit: contain;
margin: -6px 0; /* compense pour ne pas pousser la ligne */
}
/* Texte principal (nom) + texte secondaire (slug, etc.) dans la même cellule. */
.data-table__primary { font-weight: 600; }
.data-table__secondary {
font-size: var(--fs-xs);
color: var(--c-text-faded);
font-family: var(--font-mono);
}
/* Variante large du client-dot (utilisé en avatar de table). */
.client-dot--lg { width: 24px; height: 24px; }
/* Avatar visuellement agrandi via transform: scale (n'affecte pas le
layout, donc la hauteur de ligne ne change pas et il reste centré
verticalement comme l'avatar nominal). */
.data-table__col--avatar .avatar {
transform: scale(1.36);
transform-origin: center;
}
.data-table__col--mono { font-family: var(--font-mono); font-size: 0.8125rem; }
/* Sélecteur double (.data-table td.X) pour battre `.data-table td`
(specificité 0,1,1) qui imposait text-align: left. */
.data-table td.data-table__col--actions,
.data-table th.data-table__col--actions {
text-align: right; white-space: nowrap;
}
.data-table__col--actions form { display: inline-block; }
.data-table__col--actions .link--button + .link--button,
.data-table__col--actions form + form,
.data-table__col--actions .link--button + form,
.data-table__col--actions form + .link--button {
margin-left: var(--sp-3);
}
.data-table__col--actions .icon-action + .icon-action,
.data-table__col--actions form + .icon-action,
.data-table__col--actions .icon-action + form,
.data-table__col--actions form + form { margin-left: 2px; }
/* Bouton icône carré (pour les colonnes Actions très chargées).
Tooltip custom couleur client via ::before+attr(aria-label) — pas de
`title` natif (qui doublonnerait). Accessibilité OK via aria-label. */
.icon-action {
position: relative;
display: inline-flex;
align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: var(--radius-sm);
border: 0;
background: transparent;
color: var(--c-text-muted);
cursor: pointer;
padding: 0;
transition: background var(--tr-base), color var(--tr-base);
vertical-align: middle;
text-decoration: none;
}
.icon-action:hover {
background: var(--c-bg-subtle);
color: var(--c-text);
text-decoration: none;
}
.icon-action svg { width: 16px; height: 16px; display: block; }
.icon-action .icon-mask { width: 16px; height: 16px; }
.icon-action--danger:hover {
background: var(--c-error-bg);
color: var(--c-error-fg);
}
/* ── Carte « utilisateurs » (admin/users/index) ───────────────────────
Wrapper rond blanc + ombre douce dans l'esprit des cartes du dashboard.
À l'intérieur : header titre + bouton, puis la data-table (sans border
ni radius propre — la carte porte ces styles). */
.users-card {
background: var(--c-bg-elevated);
border: 1px solid var(--c-text); /* filet noir cohérent avec .card--bordered */
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
/* PAS d'overflow:hidden ici — sinon le dropdown du gear sur la
dernière ligne se ferait clipper. Les coins arrondis sont préservés
en posant border-radius sur les cellules d'angle de la table (cf.
règles ci-dessous), pas via un overflow du conteneur. */
/* Air sous la dernière ligne pour que le filet du bas soit bien
séparé du bord arrondi de la card. */
padding: 0 var(--sp-2) var(--sp-5);
}
.users-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.users-card__title {
margin: 0;
font-size: var(--fs-2xl);
font-weight: 800;
color: var(--c-text);
}
/* À l'intérieur d'une users-card, la data-table perd sa propre carte
(la card englobante porte déjà le bg/border-radius/shadow). Les
marges + filets sont retravaillés en interne pour matcher l'esprit
du dashboard (séparateurs insetés, pas bord à bord). */
.users-card .data-table {
background: transparent;
border: 0;
}
.users-card .data-table thead th {
background: transparent;
color: var(--c-text-faded);
cursor: pointer;
user-select: none;
transition: color var(--tr-base);
}
.users-card .data-table thead th:hover { color: var(--c-text-muted); }
.users-card .data-table thead th.is-sorted { color: var(--c-text); }
/* Padding cellules tbody : plus d'air vertical (sp-5) ET horizontal
(sp-6) pour aérer le bloc et matcher les marges du header de la card. */
.users-card .data-table tbody td {
padding: var(--sp-5) var(--sp-6);
}
/* Padding cellules thead : plus compact (sp-2 vertical) — la titière
reste discrète, c'est seulement un repère de tri. */
.users-card .data-table thead th {
padding: var(--sp-2) var(--sp-6);
}
/* Pas de filet sous la titière : la thead ne pose pas de border-bottom,
seuls les filets entre lignes du tbody marquent la séparation. */
.users-card .data-table thead th { border-bottom: 0; }
/* Filets entre les lignes : INSETÉS (pas bord à bord). On retire le
border-bottom natif des td et on dessine un trait via ::after sur
chaque cellule. La 1re colonne décale son trait de sp-5 à gauche,
la dernière colonne le décale de sp-5 à droite → résultat : ligne
continue rentrée des 2 côtés.
La DERNIÈRE ligne garde aussi son filet (pas display:none) pour
matcher l'esprit « marche » sous chaque utilisateur ; un padding-
bottom sur la card laisse de l'air entre ce dernier filet et le bord. */
.users-card .data-table tbody td { border-bottom: 0; position: relative; }
.users-card .data-table tbody td::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--c-border);
pointer-events: none;
}
.users-card .data-table tbody td:first-child::after { left: var(--sp-6); }
.users-card .data-table tbody td:last-child::after { right: var(--sp-6); }
/* Hover : PAS de changement de fond — seul le filet du bas passe au noir
pour marquer la ligne survolée. Approche minimaliste cohérente avec
l'esprit du dashboard. */
.users-card .data-table tbody tr:hover { background: transparent; }
.users-card .data-table tbody tr:hover > td::after { background: var(--c-text); }
/* Avatar dans la cellule dédiée : très légèrement plus gros que dans
les autres data-tables. Le transform ne pousse pas la ligne. Les
initiales (pour les comptes sans photo) sont réduites pour ne pas
paraître écrasées dans le cercle agrandi. */
.users-card .data-table__col--avatar .avatar {
transform: scale(1.55);
font-size: 0.625rem; /* ~10px, plus discret que --fs-xs */
}
/* Caret de tri à côté du titre de colonne. Au repos = ▼ gris atténué.
Quand la colonne est triée (is-sorted-asc / -desc), il devient noir
et bascule en ▲ (asc) ou reste ▼ (desc), pour signaler la direction. */
.data-table__sort-caret {
display: inline-block;
margin-left: 4px;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--c-text-faded);
vertical-align: middle;
transform: translateY(-1px);
transition: border-top-color var(--tr-base), transform var(--tr-base);
}
.data-table thead th.is-sorted-desc .data-table__sort-caret {
border-top-color: var(--c-text);
}
.data-table thead th.is-sorted-asc .data-table__sort-caret {
border-top-color: var(--c-text);
transform: translateY(-1px) rotate(180deg);
}
/* Ligne « invitation en attente » : grisée pour distinguer des comptes
actifs ; le statut est remplacé par le délai d'expiration en couleur
client (cohérent avec les autres accents UI du dashboard). */
.data-table__row--pending td:not(.data-table__col--actions):not(.data-table__invite-expires) {
color: var(--c-text-faded);
font-style: normal;
}
.data-table__row--pending:hover {
background: transparent;
}
/* Cellules courantes d'une ligne d'invitation (sauf l'action et le
message d'expiration) : grisées + non italique. */
.users-card .data-table__row--pending td:not(.data-table__col--actions):not(.data-table__invite-expires) {
font-style: normal;
color: var(--c-text-faded);
}
/* Cellule du message « expire dans X » : couleur client, poids normal,
pas d'italique. Posée APRÈS la règle ci-dessus → gagne le cascade
à spécificité équivalente, et bat le legacy mustard via 3 classes + élément. */
.users-card .data-table__row--pending td.data-table__invite-expires {
color: var(--c-client);
font-weight: 400;
font-style: normal;
}
/* Menu actions (gear icon → dropdown). Le summary est carré, hover doux.
Le panel est aligné à droite (dropdown__panel--right) avec largeur min
plus grande pour accueillir les libellés longs. */
.user-actions {
display: inline-block;
position: relative;
}
.user-actions__trigger {
display: inline-flex;
align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--c-text-muted);
cursor: pointer;
transition: background var(--tr-base), color var(--tr-base);
list-style: none;
position: relative;
}
/* z-index supérieur au menu UNIQUEMENT sur le trigger du dropdown OUVERT,
pour que la roue reste « épinglée » par-dessus son propre panel.
Si on l'appliquait à tous les triggers, les roues des AUTRES lignes
(closed) passeraient aussi au-dessus du menu actif → pollution visuelle. */
.user-actions[open] > .user-actions__trigger {
z-index: 25;
}
.user-actions__trigger::-webkit-details-marker { display: none; }
.user-actions__trigger:hover {
background: var(--c-bg-subtle);
color: var(--c-text);
}
.user-actions__trigger .icon-mask { width: 16px; height: 16px; }
.user-actions__menu {
min-width: 260px;
/* Décalé de 3px haut/droite par rapport au trigger pour que la
roue soit visuellement plus centrée dans le coin du menu (et que
la pointe de la roue ne soit pas pile sur le bord noir).
`top: -3px` + `right: -3px` → menu un poil plus haut & plus à droite. */
top: -3px;
right: -3px;
border-color: var(--c-text);
/* Padding interne. Le padding-right est plus grand (= largeur de
la roue + une marge) pour que le texte d'un item ne puisse JAMAIS
passer sous la roue. */
padding: 0 calc(30px + var(--sp-1)) 0 var(--sp-2);
}
/* Force chaque