avec input + list déjà en HTML
Structure générée / attendue :
=========================================================================== */
/* ── Wrapper ── */
.combobox {
position: relative;
display: flex;
align-items: center;
}
/* ── Input texte (recherche / affichage) ── */
.combobox__input {
flex: 1;
min-width: 0;
height: var(--input-height-sm);
padding: 0 var(--space-2) 0 var(--space-2);
border: var(--border-width) solid var(--color-border-strong);
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: var(--text-xs);
font-family: var(--font-sans);
color: var(--color-text-main);
background: var(--color-surface);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.combobox__input::placeholder {
color: var(--color-text-light);
font-weight: var(--font-normal);
}
.combobox__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}
/* Quand l'input est focus, le toggle partage le même état visuel */
.combobox__input:focus ~ .combobox__toggle {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
}
.combobox__input.has-value {
color: var(--color-primary-dark);
font-weight: var(--font-semi);
}
/* ── Bouton toggle (chevron) — séparateur bordure gauche ── */
.combobox__toggle {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: var(--input-height-sm);
padding: 0;
border: var(--border-width) solid var(--color-border-strong);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--color-surface);
color: var(--color-text-light);
cursor: pointer;
transition: color var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-fast);
}
.combobox__toggle:hover {
color: var(--color-primary);
background: var(--color-primary-alpha-06);
}
.combobox.is-open .combobox__toggle {
border-color: var(--color-primary);
color: var(--color-primary);
}
.combobox.is-open .combobox__toggle svg {
transform: rotate(180deg);
}
/* ── Dropdown list — affiche 10 éléments, scroll au-delà ── */
.combobox__list {
display: none;
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: var(--z-dropdown, 100);
margin: 0;
padding: 4px 0;
background: var(--color-surface);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
max-height: 288px; /* 10 items × 28px + 8px padding */
overflow-y: auto;
list-style: none;
overscroll-behavior: contain;
}
.combobox.is-open .combobox__list {
display: block;
}
/* Scrollbar fine */
.combobox__list::-webkit-scrollbar { width: 4px; }
.combobox__list::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: 2px;
}
/* ── Item ── */
.combobox__item {
padding: 5px 10px;
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--color-text-main);
cursor: pointer;
white-space: nowrap;
transition: background .1s;
}
.combobox__item:hover,
.combobox__item.is-focused {
background: var(--color-primary-alpha-08);
color: var(--color-primary-dark);
}
.combobox__item.is-selected {
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-weight: var(--font-semi);
}
.combobox__item.is-hidden {
display: none;
}
/* ── Item interne (Tenant) — distinction visuelle tenant vs partenaire ── */
.combobox__item--internal {
color: var(--color-primary-dark);
font-weight: var(--font-medium);
border-bottom: var(--border-width) dashed var(--color-border);
}
.combobox__item--internal:last-of-type {
border-bottom-style: solid;
}
/* ── Message "aucun résultat" ── */
.combobox__empty {
padding: 8px 10px;
font-size: var(--text-xs);
color: var(--color-text-muted);
font-style: italic;
}
/* ===========================================================================
TOPBAR LINKS — boutons/liens dans la topbar (page_actions)
Remplace : .sp-topbar-link (specs + transco), .topbar-upload-btn (4 fichiers)
Usage :
Modèle CSV ← lien ghost secondaire (sp-topbar-link = alias compat)
+ Nouveau ← CTA primaire (outline→fill)
=========================================================================== */
/* Lien ghost dans la topbar (téléchargement de modèle, liens annexes…) */
.topbar-link,
.sp-topbar-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-muted);
text-decoration: none;
padding: var(--space-1) var(--space-3);
border: var(--border-width) solid transparent;
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.topbar-link:hover,
.sp-topbar-link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-alpha-08);
}
/* CTA primaire dans la topbar — outline teal par défaut, filled au hover.
Usage : class="btn btn-sm btn-topbar"
Ex : + Nouveau X, Envoyer un fichier
Ancienne classe : topbar-upload-btn (alias conservé pour compat) */
.btn-topbar,
.topbar-upload-btn {
border: var(--border-width-md) solid var(--color-primary);
color: var(--color-primary);
font-weight: var(--font-semi);
transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-topbar:hover,
.topbar-upload-btn:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
text-decoration: none;
}
/* ===========================================================================
COMBOBOX — extensions flows (group filtering + cross-exclusion)
Ajout à la suite du bloc .combobox dans components.css
=========================================================================== */
/* Masquage par groupe ou exclusion cross-combo (flows sender/receiver) */
.combobox__item--group-hidden,
.combobox__item--excluded {
display: none;
}
/* ===========================================================================
DATA TABLE — tableau de données canonique
Source de vérité : flows (copie stricte)
Sélecteurs :
.data-table : classe canonique (flows, transco)
.file-table : alias (files, specs, projets, partenaires, tenancy)
.table-card : wrapper card (transco, files, specs, projets, partenaires, tenancy)
.files-table-wrap : alias wrapper
=========================================================================== */
/* ---------------------------------------------------------------------------
Wrapper card
--------------------------------------------------------------------------- */
.table-card,
.files-table-wrap {
background: var(--color-surface);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
/* En-tête figé pleine page — COMPOSANT CANONIQUE (.table-card--flush).
Ajouter la classe sur le
: le
(déjà sticky
via .data-table th) reste collé sous la topbar pendant que la PAGE défile —
pas de scroll interne, les lignes gardent leur densité pleine page.
.table-card a `overflow:hidden` (coins arrondis) qui PIÈGE position:sticky →
on le neutralise, et on cale le thead sous la topbar fixe. ATTENTION : si la
card est imbriquée dans une autre carte overflow:hidden (ex. monitoring
.flows-card), neutraliser AUSSI le parent, sinon le sticky reste piégé.
À adopter par tous les tableaux (partenaires, specs, projets, tenancy…). */
.table-card--flush { overflow: visible; }
.table-card--flush .data-table thead th { top: var(--topbar-height); }
/* FIX RESP-R2 : sous tablette/mobile, les tables larges (nombreuses colonnes)
défilent horizontalement DANS leur carte au lieu d'être clippées par
l'overflow:hidden de base ou de pousser la page (cas --flush). La hauteur de
la carte suit le contenu → aucun scroll vertical interne. Le sticky page du
pattern --flush est relâché sous ce seuil (peu utile sur petit écran). */
@media (max-width: 1024px) {
.table-card,
.table-card--flush,
.files-table-wrap { overflow: auto; }
}
/* ---------------------------------------------------------------------------
Table base
--------------------------------------------------------------------------- */
.data-table,
.file-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
/* ---------------------------------------------------------------------------
Header
--------------------------------------------------------------------------- */
.data-table th,
.file-table th {
padding: 10px var(--space-4);
font-size: var(--text-2xs);
font-weight: var(--font-bold);
color: var(--color-text-main);
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: var(--border-width-md) solid var(--color-border);
white-space: nowrap;
background: var(--color-bg);
text-align: center;
vertical-align: middle;
position: sticky;
top: 0;
z-index: var(--z-raised);
}
/* ---------------------------------------------------------------------------
Cellules
--------------------------------------------------------------------------- */
.data-table td,
.file-table td {
padding: 11px var(--space-4);
border-bottom: var(--border-width) solid var(--color-border);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-main);
vertical-align: middle;
text-align: center;
white-space: nowrap;
transition: background var(--transition-fast);
}
.data-table tbody tr:last-child td,
.file-table tbody tr:last-child td {
border-bottom: none;
}
/* ---------------------------------------------------------------------------
Hover ligne
--------------------------------------------------------------------------- */
.data-table tbody tr:hover td,
.file-table tbody tr:hover td {
background: var(--color-primary-alpha-04);
}
/* ---------------------------------------------------------------------------
Liens dans les cellules
--------------------------------------------------------------------------- */
.data-table tbody td a,
.file-table tbody td a {
color: var(--color-text-main);
font-weight: inherit;
text-decoration: none;
}
.data-table tbody td a:hover,
.file-table tbody td a:hover {
color: var(--color-primary);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
Colonnes utilitaires
--------------------------------------------------------------------------- */
.data-table .col-center,
.file-table .col-center { text-align: center; }
.data-table .col-primary,
.data-table .col-tertiary,
.file-table .col-primary,
.file-table .col-tertiary {
color: var(--color-text-main);
font-weight: inherit;
}
.data-table .col-check,
.file-table .col-check {
width: 1%;
padding: 0 var(--space-2);
text-align: center;
}
.data-table .col-check input[type="checkbox"],
.file-table .col-check input[type="checkbox"] {
cursor: pointer;
accent-color: var(--color-primary);
}
.data-table .col-mono,
.file-table .col-mono {
font-family: var(--font-mono);
font-size: var(--text-xs);
}
/* Colonne "partie prenante" (Émetteur, Récepteur) — noms longs tronqués
avec ellipsis + tooltip natif (title="..."). Évite le scroll horizontal
quand un partner a un nom raisonnablement long (ex: "FRIGEX Logistique
Froid SAS"). La largeur max est adaptée au breakpoint : étroite sur
tablette/laptop, plus large sur écran XL. */
.data-table .col-party,
.file-table .col-party {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 1600px) {
.data-table .col-party,
.file-table .col-party {
max-width: 260px;
}
}
@media (max-width: 1024px) {
.data-table .col-party,
.file-table .col-party {
max-width: 140px;
}
}
/* ---------------------------------------------------------------------------
Colonne actions — pattern canonique (2026-04-01)
Pattern A (défaut) : "Ouvrir" (detail) + "Éditer" (edit, conditionnel)
→ Specs, Projects, Transco, Tenancy orgs, Tenancy groups
Pattern B (lecture) : "Ouvrir" (detail) + "Voir" (preview)
→ Files IN, Files OUT (+ bouton ↓ download)
Pattern C (single) : "Ouvrir" seul
→ Partners groups
Règles :
- Toujours btn-xs + btn-ghost (le sélecteur ci-dessous override la taille)
- "Ouvrir" = 1er bouton, toujours présent → page detail
- "Éditer" = 2e bouton conditionnel → page edit
- "Voir" = variante lecture → preview ou detail read-only
- Boutons spécifiques métier (Basculer, ↓) en extra
--------------------------------------------------------------------------- */
.data-table .col-actions,
.file-table .col-actions {
text-align: center;
white-space: nowrap;
width: 1%;
}
/* Cellule hôte d'un état vide : le qui accueille .empty-state ne
doit apporter ni padding ni filet, sinon l'état vide se retrouve encadré
comme une donnée. Le motif était écrit en `style="padding:0;border:none"`
dans les gabarits — 16 occurrences dans 10 modules, donc un composant, pas
un cas particulier. */
/* Cellule d'ÉTAT VIDE d'un tableau — « Aucune règle », « Aucune alerte »…
Employée par six tableaux (Fichiers, Projets) et définie NULLE PART :
sa seule règle vivait sous `.pj-card .pj-inner-table`, un sélecteur dont
plus aucun gabarit ne porte la classe. Six états vides sans mise en forme,
qui passaient pour du texte brut mal centré.
Sélecteur en (0,2,1) plutôt qu'un `!important` : il suffit à battre le
`padding` de `.data-table td`.
⚠ La classe sert AUSSI de marqueur sémantique sur un (centre de
notifications : une route qui ne filtre rien), où elle ne doit rien peindre —
d'où le sélecteur limité aux cellules. Une garde s'appuie sur ce marqueur ;
le renommer casse un test, et à raison. */
.data-table td.col-empty,
.file-table td.col-empty {
text-align: center;
color: var(--color-text-muted);
padding: var(--space-8) var(--space-4);
}
.data-table td.cell-flush,
.file-table td.cell-flush {
padding: 0;
border: none;
}
/* Wrapper scrollable horizontalement — tables larges (schéma déclarable à N
colonnes) : scroll interne plutôt que débordement de la carte. */
.data-table-scroll {
overflow-x: auto;
border-top: var(--border-width) solid var(--color-border);
}
.data-table .col-actions .btn,
.file-table .col-actions .btn {
padding: 3px var(--space-2);
font-size: var(--text-2xs);
font-family: var(--font-sans);
}
/* Dans une colonne d'actions, un ghost reprend un filet : sans lui, deux
libellés nus flotteraient dans la cellule sans se lire comme des boutons.
Ce filet vaut pour les DEUX ghosts. Il ne couvrait que `.btn-ghost` : à côté
d'« Éditer » au filet clair, « Supprimer » gardait le sien, plus sombre —
deux poids pour deux boutons de même rang. */
.data-table .col-actions .btn.btn-ghost,
.data-table .col-actions .btn.btn-danger-ghost,
.file-table .col-actions .btn.btn-ghost,
.file-table .col-actions .btn.btn-danger-ghost {
color: var(--color-text-muted);
border-color: var(--color-border);
}
.data-table .col-actions .btn.btn-ghost:hover,
.file-table .col-actions .btn.btn-ghost:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-alpha-08);
}
/* Seul le SURVOL sépare les deux : le voisin va au teal, celui-ci au rouge.
Même geste, deux annonces — c'est là que la nature de l'action se dit. */
.data-table .col-actions .btn.btn-danger-ghost:hover,
.file-table .col-actions .btn.btn-danger-ghost:hover {
color: var(--color-danger-text);
border-color: var(--color-danger);
background: var(--color-danger-bg);
}
.data-table .col-actions a,
.file-table .col-actions a,
.data-table .col-actions a:hover,
.file-table .col-actions a:hover {
text-decoration: none;
}
/* ── Tri colonnes (lien cliquable dans | ) ── */
.th-sort {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.th-sort:hover { color: var(--color-text-main); }
.th-sort .caret { font-size: var(--text-2xs); opacity: .6; }
/* ---------------------------------------------------------------------------
Badges dans les cellules
--------------------------------------------------------------------------- */
.data-table td .badge,
.file-table td .badge {
font-weight: var(--font-normal);
font-size: var(--text-xs);
padding: 2px 8px;
}
/* ---------------------------------------------------------------------------
États de lignes
--------------------------------------------------------------------------- */
/* Ligne sélectionnée (bulk select) */
.data-table tr.is-selected td,
.file-table tr.is-selected td {
background: var(--color-primary-alpha-08);
}
/* Ligne inactive / draft */
.data-table tr.row-inactive td,
.file-table tr.row-inactive td,
.data-table tr.row--inactive td,
.file-table tr.row--inactive td {
opacity: 0.55;
}
.data-table tr.row-inactive:hover td,
.file-table tr.row-inactive:hover td,
.data-table tr.row--inactive:hover td,
.file-table tr.row--inactive:hover td {
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
Page layout — wrapper flex column pour toutes les pages list
--------------------------------------------------------------------------- */
.page-layout {
display: flex;
flex-direction: column;
gap: var(--space-8);
/* FIX RESP-WIDE (2026) : les listes remplissent la largeur disponible au lieu
de se figer à 1280px collées à gauche, ce qui laissait un grand vide à droite
sur grand écran.
FIX RESP-WIDE-2 : le défaut d'alors n'était pas le plafond, c'était l'absence
de CENTRAGE — on avait retiré le mauvais des deux. Preuve : à 1440px la
largeur utile ne vaut que 1160px, donc le plafond 1280 n'était JAMAIS atteint
sous ~1560px de viewport ; le « vide à droite » ne pouvait venir que des
1920/2560. Sans plafond, une liste s'étire à ~2280px sur un 2560 : les
colonnes se diluent, l'œil ne suit plus la ligne, et toolbar/pied de tableau
(space-between) écartèlent leurs extrémités sur toute la largeur.
Le plafond est donc rétabli — HAUT et centré — mais porté par le
modificateur `.page-layout--wide` ci-dessous, opt-in gabarit par gabarit :
la bonne largeur dépend du nombre de colonnes, elle ne se décrète pas en
bloc pour les 20 listes. `.page-layout` nu reste fluide. */
width: 100%;
}
/* Palier 0 « Liste large » — OPT-IN, un gabarit à la fois.
Plafond HAUT + CENTRAGE : les deux, pas l'un ou l'autre. Le plafond seul
reproduit le défaut d'origine (contenu collé à gauche, vide à droite) ; le
centrage seul ne borne rien. Calibré pour que 1920 reste inchangé (largeur
utile 1640) et que seuls les 2560+ soient bornés.
Pourquoi opt-in : la largeur qui convient dépend du NOMBRE DE COLONNES de la
liste. Une table à 10 colonnes a besoin de 1600 ; une liste à 4 colonnes s'y
perd et veut plutôt .page-layout--form. On l'applique donc module par module,
après contrôle à l'œil, jamais en bloc. */
.page-layout--wide {
max-width: var(--page-width-wide);
margin-inline: auto;
}
/* ===========================================================================
POPOVER — petit panneau ancré au-dessus d'un déclencheur
FIX FANOUT-LIST-VIS (2026-05-16) — Composant réutilisable. Premier usage :
bouton "+N" dans la liste des fan-out de redirection / forward pour révéler
la liste complète des destinataires (cf. pipeline_specs.css, popover.js).
Convention alignée sur .combobox__list :
- z-index : var(--z-dropdown, 100)
- shadow : var(--shadow-md)
- hover : var(--color-primary-alpha-08) + var(--color-primary-dark)
Structure HTML (composant générique, cf. templates/components/_popover.html) :
=========================================================================== */
.popover {
position: absolute;
z-index: var(--z-dropdown, 100);
/* top/left injectés par popover.js au moment de l'ouverture */
}
.popover[hidden] {
display: none;
}
/* ── Flèche pointant vers le trigger ─────────────────────────────────── */
.popover__arrow {
width: 12px;
height: 6px;
margin-left: 14px;
background: var(--color-surface);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
position: relative;
z-index: 2;
}
/* ── Container ───────────────────────────────────────────────────────── */
.popover__container {
background: var(--color-surface);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
min-width: 220px;
max-width: 320px;
overflow: hidden;
}
/* ── Header ──────────────────────────────────────────────────────────── */
.popover__header {
padding: 8px 14px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border-width) solid var(--color-border);
}
.popover__title {
font-size: var(--text-2xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.popover__count {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ── Body ────────────────────────────────────────────────────────────── */
.popover__body {
padding: 4px 0;
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
}
/* Scrollbar fine — aligné sur .combobox__list */
.popover__body::-webkit-scrollbar { width: 4px; }
.popover__body::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: 2px;
}
/* ── Item ────────────────────────────────────────────────────────────── */
.popover__item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
text-decoration: none;
color: var(--color-text-main);
border-left: 3px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.popover__item:hover,
.popover__item:focus-visible,
.popover__item.is-focused {
background: var(--color-primary-alpha-08);
color: var(--color-primary-dark);
border-left-color: var(--color-primary);
outline: none;
}
.popover__item--static {
cursor: default;
}
.popover__item--static:hover,
.popover__item--static:focus-visible {
background: transparent;
border-left-color: transparent;
color: var(--color-text-main);
}
.popover__item-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.popover__item-name {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popover__item-sub {
font-size: var(--text-2xs);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.popover__item-icon {
color: var(--color-text-light);
flex-shrink: 0;
}
/* ── Footer ──────────────────────────────────────────────────────────── */
.popover__footer {
padding: 6px 14px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
border-top: var(--border-width) solid var(--color-border);
background: var(--color-bg);
}
.popover__kbd {
font-family: var(--font-mono);
font-size: var(--text-2xs);
color: var(--color-text-muted);
background: var(--color-surface);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-sm);
padding: 1px 5px;
line-height: 1;
}
.popover__hint {
font-size: var(--text-2xs);
color: var(--color-text-muted);
}
/* ── Trigger générique ───────────────────────────────────────────────── */
.popover-trigger {
cursor: pointer;
}
/* ===========================================================================
TRANSPORT PLACEHOLDER — empty-state « configurez depuis la fiche »
Canonique, partagé : partenaires (partners/form.html)
Promu depuis l'ex-.pf-transport-soon (partners.css),
sans changement de rendu.
=========================================================================== */
.transport-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8);
gap: var(--space-3);
text-align: center;
color: var(--color-text-light);
}
.transport-placeholder__icon { color: var(--color-text-light); }
.transport-placeholder__title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-muted); }
.transport-placeholder__desc { font-size: var(--text-xs); color: var(--color-text-light); max-width: 320px; }
/* ===========================================================================
COPIER — bouton « copier dans le presse-papiers »
Canonique, partagé : partenaires (liste), fichiers (listes + panneaux).
Promu depuis l'ex-.pt-copy-btn (partners.css), sans changement de rendu ;
s'y ajoute la confirmation VISIBLE (bulle « Copié »), l'infobulle seule
n'étant pas relue par le navigateur après le clic.
Comportement : js/shared/copy-button.js (contrat `data-copy`).
=========================================================================== */
.copy-cell {
display: inline-flex;
align-items: center;
gap: var(--space-2);
max-width: 100%;
min-width: 0;
}
.copy-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 2px var(--space-2);
font-size: var(--text-2xs);
font-family: var(--font-sans);
color: var(--color-text-muted);
background: transparent;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.copy-btn:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-alpha-06);
}
.copy-btn:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-alpha-12);
}
.copy-btn.is-copied,
.copy-btn.is-copied:hover {
color: var(--color-success);
border-color: var(--color-success-border);
background: var(--color-success-bg);
}
/* Confirmation : bulle au-dessus du bouton, le temps du retour visuel.
Le libellé est posé par le JS (traduit), le CSS ne fait que l'afficher. */
.copy-btn.is-copied::after {
content: attr(data-copied-label);
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
z-index: var(--z-tooltip, 60);
padding: 2px var(--space-2);
font-size: var(--text-2xs);
font-family: var(--font-sans);
line-height: 1.4;
white-space: nowrap;
color: var(--color-success);
background: var(--color-success-bg);
border: var(--border-width) solid var(--color-success-border);
border-radius: var(--radius-sm);
pointer-events: none;
}
/* ── Variante inline : icône seule, discrète.
Effacée au repos, elle apparaît au survol de la LIGNE — une table de
fichiers en afficherait sinon une par ligne, ce qui ferait du bruit.
Toujours visible au focus clavier et pendant la confirmation, sinon
l'action serait inatteignable sans souris. ── */
.copy-btn--inline {
padding: 2px;
border: none;
background: transparent;
opacity: 0;
transition: opacity .15s, color .15s, background .15s;
}
.copy-btn--inline svg {
width: 12px;
height: 12px;
}
.copy-btn--inline:hover {
background: var(--color-primary-alpha-06);
border: none;
}
.copy-btn--inline:focus-visible {
opacity: 1;
box-shadow: none;
border: none;
}
tr:hover .copy-btn--inline,
.copy-btn--inline:focus-visible,
.copy-btn--inline.is-copied {
opacity: 1;
}
/* Hors table (panneau déplié, fiche) : rien ne « survole la ligne », le
bouton doit donc rester visible. */
.copy-cell--static .copy-btn--inline { opacity: 1; }
/* Champ tampon du repli sans API Clipboard : présent le temps d'un tick,
ne doit ni se voir ni déplacer quoi que ce soit. */
.copy-btn__buffer {
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}
/* ===========================================================================
MDL-TILE — tuile de modèle (vitrine « Modèles & formats »)
Pourquoi une tuile et pas une ligne de table : `.data-table td` est mono,
centré et `white-space: nowrap` — c'est un composant fait pour des codes,
des dates et des statuts. Une DESCRIPTION y devient un mur monospace qui
déborde en largeur et repousse la colonne d'actions hors de l'écran.
La tuile assume l'inverse : texte en sans, replié, sur trois lignes au plus.
=========================================================================== */
.mdl-tile {
display: flex;
flex-direction: column;
transition: border-color var(--transition-fast);
}
.mdl-tile:hover { border-color: var(--color-primary-light); }
.mdl-tile .card-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
height: 100%;
}
/* Trois lignes au plus, coupées proprement — la description entière se lit
sur la fiche du modèle, ce n'est pas ici qu'on l'épuise. */
.mdl-tile__desc {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Collées en bas : les descriptions n'ont pas la même longueur, les boutons
doivent malgré tout s'aligner d'une tuile à l'autre. */
.mdl-tile__actions {
display: flex;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-2);
}
@media (max-width: 1100px) {
.mdl-tile { min-width: 0; }
}
|