/* Backoffice Imprimeca — CSS statique, volontairement hors Vite (zone admin
séparée, pas de build nécessaire), mais qui reprend la vraie DA du site
public (demande du 29/08/2026) : mêmes tokens que frontend/css/tokens.css,
mêmes polices auto-hébergées (Fredoka/Plus Jakarta Sans, cf. /public/fonts
— copiées depuis node_modules/@fontsource sous des noms stables, pas les
fichiers hashés de Vite qui changent à chaque build public), mêmes formes
(blobs, pilules, dégradés de marque). */
@font-face {
font-family: "Fredoka"; font-style: normal; font-display: swap; font-weight: 500;
src: url("/fonts/fredoka-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Fredoka"; font-style: normal; font-display: swap; font-weight: 600;
src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "Fredoka"; font-style: normal; font-display: swap; font-weight: 700;
src: url("/fonts/fredoka-latin-700-normal.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400;
src: url("/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 500;
src: url("/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600;
src: url("/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
:root {
--paper: #f1eef3;
--paper-alt: #e9e4ee;
--surface: #ffffff;
--rule: #e2dbe8;
--ink: #2b2733;
--ink-soft: #635d70;
--ink-faint: #a39bb0;
--accent: #ec8f66;
--accent-deep: #c96f47;
--sage: #7d9c8c;
--sage-soft: #e4ede9;
--blush: #f7dfe0;
--danger: #c0392b;
--danger-soft: #f6dedb;
--shadow: rgba(43, 39, 51, 0.08);
--shadow-strong: rgba(43, 39, 51, 0.18);
--font-body: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-display: "Fredoka", "Quicksand", "Segoe UI", sans-serif;
--radius-s: 14px;
--radius-m: 20px;
--radius-l: 28px;
--radius-pill: 16px;
--radius-blob: 42% 58% 60% 40% / 45% 45% 55% 55%;
--ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
/* Refonte du 23/09/2026 : gabarit et densité. */
--sidebar-w: 236px;
--rail-w: 72px;
--tabbar-h: 62px;
--gutter: 28px;
/* Hauteur de l'en-tête de page collé, mesurée par admin.js : tout ce qui
colle sous lui (onglets, en-têtes de tableau) s'y aligne. */
--sticky-top: 0px;
--card-shadow: 0 1px 2px rgba(43, 39, 51, 0.05), 0 6px 18px rgba(43, 39, 51, 0.06);
--focus-ring: 0 0 0 3px rgba(236, 143, 102, 0.35);
}
* { box-sizing: border-box; }
body.admin-body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
h1, h2, .admin-h1, .admin-h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Passage d'une page à l'autre (23/09/2026) : fondu natif du navigateur
entre deux pages ordinaires — aucune navigation AJAX. La barre latérale
porte son propre nom de transition : elle ne clignote pas au changement
de page, seul le contenu glisse. Un navigateur qui ne connaît pas la
règle navigue simplement comme avant. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 90ms ease-out both admin-vt-out; }
::view-transition-new(root) { animation: 160ms var(--ease-snap) both admin-vt-in; }
@keyframes admin-vt-out { to { opacity: 0; } }
@keyframes admin-vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* ─── Mise en page tableau de bord ──────────────────────────────────── */
.admin-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.admin-sidebar {
width: var(--sidebar-w); flex-shrink: 0;
background: var(--ink); color: var(--paper);
display: flex; flex-direction: column;
padding: 14px 0 12px;
/* Reste plaquée au viewport pendant que la page défile. C'est la liste
des liens, et elle seule, qui défile si l'écran est trop bas : le logo,
la recherche et le pied (mode de paiement) restent toujours visibles. */
position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
view-transition-name: admin-sidebar;
}
/* Halos de couleur en transparence faible, même traitement que le panneau
promo de /sur-mesure (.quote-configurator-promo) — la seule touche
"éditoriale" du site qu'on reprend telle quelle sur fond sombre. */
.admin-sidebar::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(circle at 15% 8%, rgba(236, 143, 102, 0.28), transparent 50%),
radial-gradient(circle at 90% 85%, rgba(125, 156, 140, 0.22), transparent 55%);
}
.admin-sidebar > * { position: relative; z-index: 1; }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 2px 18px 12px; color: inherit; text-decoration: none; }
.admin-brand-mark {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
background: var(--paper); display: flex; align-items: center; justify-content: center;
}
.admin-brand-mark svg { width: 22px; height: 22px; }
.admin-brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.admin-brand-word span { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.7; font-family: var(--font-body); }
/* Recherche rapide (palette Ctrl+K, 23/09/2026) : le bouton rappelle le
raccourci, sans lequel personne ne le découvre. */
.admin-search-btn {
display: flex; align-items: center; gap: 8px;
margin: 0 12px 10px; padding: 7px 10px;
border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.07); color: rgba(241, 238, 243, 0.68);
font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
transition: background 0.2s ease, color 0.2s ease;
}
.admin-search-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--paper); }
.admin-search-btn .admin-icon { width: 15px; height: 15px; }
.admin-search-btn-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-search-btn kbd { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.12); color: rgba(241, 238, 243, 0.7); }
/* Pictogrammes au trait de la navigation (23/09/2026). */
.admin-icon {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
kbd {
font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; line-height: 1.4;
padding: 1px 6px; border-radius: 6px;
border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft);
}
/* La liste seule défile quand l'écran est trop bas pour tout montrer. */
.admin-nav {
display: flex; flex-direction: column; flex: 1; gap: 1px; padding: 0 10px;
min-height: 0; overflow-y: auto; scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a {
/* `display: flex` explicite : dans une section repliable les liens ne
sont pas enfants directs du flex de .admin-nav (cf. 18/09/2026, deux
entrées s'étaient retrouvées côte à côte). */
display: flex; align-items: center; gap: 10px;
color: rgba(241, 238, 243, 0.72); text-decoration: none;
padding: 7px 10px; font-size: 0.88rem; font-weight: 500;
border-radius: 11px;
transition: color 0.15s ease, background 0.15s ease;
}
.admin-nav a .admin-icon { opacity: 0.85; }
.admin-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pastille de compteur (23/09/2026) : ce qui attend une action. Elle ne
s'affiche qu'au-dessus de zéro — un « 0 » permanent ne se lit plus. */
.admin-nav-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
background: var(--accent); color: #fff;
font-size: 0.72rem; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.admin-nav-count[hidden] { display: none; }
.admin-nav a.is-active .admin-nav-count { background: var(--ink); color: var(--paper); }
/* Intitulé de section de la sidebar (16/09/2026), devenu la poignée de son
accordéon le 18/09/2026 : toujours aussi discret — il structure la liste
sans concurrencer les entrées — mais désormais cliquable. */
.admin-nav-section { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-section-items { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-section.is-collapsed > .admin-nav-section-items { display: none; }
.admin-nav-group {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; padding: 12px 10px 4px;
font-family: inherit;
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
text-transform: uppercase; text-align: left;
color: rgba(241, 238, 243, 0.4);
background: none; border: 0;
user-select: none; cursor: pointer;
transition: color 0.2s ease;
}
.admin-nav-group:hover { color: rgba(241, 238, 243, 0.75); }
.admin-nav-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.admin-nav-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease; }
.admin-nav-section:not(.is-collapsed) > .admin-nav-group .admin-nav-chevron { transform: rotate(180deg); }
/* Une section repliée qui contient la page courante ne doit pas se taire :
une pastille rappelle qu'on est dedans. */
.admin-nav-section.is-collapsed > .admin-nav-group.has-active::after,
.admin-nav-section.is-collapsed > .admin-nav-group.has-count::after {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent); flex-shrink: 0; margin-left: auto;
}
.admin-nav a:hover { color: var(--paper); background: rgba(255,255,255,0.07); }
.admin-nav a.is-active { color: var(--ink); background: var(--accent); font-weight: 600; }
.admin-nav a.is-active .admin-icon { opacity: 1; }
.admin-sidebar-footer { padding: 10px 12px 0; margin: 8px 10px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.admin-user-row { display: flex; align-items: center; gap: 8px; }
.admin-user-row form { margin: 0; }
.admin-user { flex: 1; min-width: 0; font-size: 0.76rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-logout-btn {
display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
border: 0; border-radius: 10px; cursor: pointer;
background: rgba(255, 255, 255, 0.07); color: var(--paper);
transition: background 0.2s ease;
}
.admin-logout-btn:hover { background: var(--danger); }
.admin-logout-btn .admin-icon { width: 16px; height: 16px; }
/* Pastille du mode de paiement : ne sert qu'au rail replié (plus bas), où le
switch complet n'a pas la place. */
.admin-mode-chip { display: none; }
/* Bandeau « mode TEST » : téléphone seulement, cf. requête média mobile. */
.admin-test-ribbon { display: none; }
/* Barre d'onglets du téléphone et sa feuille « Plus » : cachées ailleurs. */
.admin-tabbar { display: none; }
/* `min-width: 0` indispensable (18/09/2026) : sans lui un enfant de flex
garde `min-width: auto` et refuse de descendre sous la largeur minimale
de son contenu — le tableau des produits poussait alors .admin-main à
965 px dans une fenêtre de 1000, et c'est la page entière qui défilait
horizontalement.
Plus de plafond à 1 140 px (23/09/2026) : sur un écran de 1 440 px il
laissait un tiers de la largeur vide, et c'est ce qui faisait déborder en
hauteur ce qui aurait tenu en largeur. */
.admin-main { flex: 1; min-width: 0; padding: 20px var(--gutter) 32px; max-width: 1640px; }
.admin-h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 1.45rem; line-height: 1.2; margin: 0 0 16px; }
.admin-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 1.05rem; margin: 0 0 12px; }
/* En-tête de page collé (23/09/2026) : titre et actions de la page restent
à portée pendant qu'on descend dans une liste — plus besoin de remonter
pour « Nouveau produit ». Il déborde dans la gouttière de .admin-main pour
que son fond couvre toute la largeur quand le contenu glisse dessous. */
.admin-page-header {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
position: sticky; top: 0; z-index: 30;
margin: -20px calc(-1 * var(--gutter)) 16px;
padding: 16px var(--gutter) 12px;
background: color-mix(in srgb, var(--paper) 90%, transparent);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.admin-page-header.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 8px 18px -12px var(--shadow-strong); }
.admin-page-header .admin-h1 { margin-bottom: 0; }
.admin-page-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.admin-page-sub { color: var(--ink-soft); font-size: 0.85rem; }
/* Regroupe plusieurs boutons côte à côte dans l'en-tête (ex. liste produits :
"Ajouter par IA" + "Nouveau produit") sans style inline au cas par cas. */
.admin-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-page-header-actions form { margin: 0; }
.admin-section {
background: var(--surface); border-radius: var(--radius-m); padding: 18px 20px; margin-bottom: 16px;
box-shadow: var(--card-shadow); position: relative; overflow: hidden; overflow: clip;
}
/* Liseré dégradé en tête de carte — même motif que .p-card::before côté
boutique, discret ici (2px) pour ne pas concurrencer le contenu. */
.admin-section::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--sage));
}
.admin-muted { color: var(--ink-soft); font-size: 0.9rem; }
/* ─── Lien "retour" (fiche facture/commande/devis/produit) ───────────
Même composant que .back-link côté site public (frontend/css/app.css) :
pastille + chevron SVG plutôt que "← Texte" en lien nu. Classe
distincte de .admin-link-btn, qui reste le style texte-souligné utilisé
pour les actions de ligne de tableau (Détails/Activer/Supprimer). */
.admin-back-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px 7px 10px; border-radius: var(--radius-pill);
border: 1.5px solid var(--rule); color: var(--ink-soft);
font-size: 0.85rem; font-weight: 600; text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.admin-back-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.admin-back-link:hover, .admin-back-link:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--paper); }
/* ─── Stat cards du tableau de bord ─────────────────────────────────── */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.admin-stat-card {
background: var(--surface); border-radius: var(--radius-m); padding: 14px 16px;
text-decoration: none; color: var(--ink); box-shadow: var(--card-shadow);
display: block; position: relative; overflow: hidden;
transition: transform 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap);
}
.admin-stat-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--sage));
}
a.admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px var(--shadow-strong); }
.admin-stat-value { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.admin-stat-label { font-weight: 600; margin-top: 2px; font-size: 0.9rem; }
.admin-stat-sub { color: var(--ink-soft); font-size: 0.8rem; margin-top: 1px; }
/* ─── Tableaux ───────────────────────────────────────────────────────── */
/* Le tableau est SA PROPRE zone de défilement horizontal, à toute largeur
(18/09/2026). Auparavant ce comportement n'existait qu'en dessous de
780 px : entre 780 et ~1200 px, rien ne rattrapait, et c'était la PAGE
entière qui défilait — la barre latérale restant collée pendant que le
contenu glissait dessous, on croyait voir des lignes décalées (capture
de l'exploitant). Mesuré avant correction : fenêtre de 1000 px, page de
1197 px de large.
`display: block` fait de la boîte externe la zone défilante ; les
lignes et cellules gardent leur mise en page tabulaire interne. Pas de
`white-space: nowrap` ici, contrairement au bloc mobile plus bas : sur
un grand écran les cellules doivent continuer de se replier, sinon un
tableau qui tenait sans défiler se met à défiler pour rien (vérifié en
1440 et 1600 px, rendu inchangé). */
.admin-table {
width: 100%; border-collapse: collapse; background: var(--surface);
border-radius: var(--radius-m); box-shadow: var(--card-shadow);
display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
/* Fondu des deux bords : sans lui les colonnes hors champ se coupent net
contre le bord de la carte, sans signe qu'il reste à faire glisser.
Piloté par admin.js (.is-scroll-start/.is-scroll-end), qui tourne déjà
à toutes les largeurs. */
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.admin-table.is-scroll-start {
mask-image: linear-gradient(to right, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.admin-table.is-scroll-end {
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
}
.admin-table.is-scroll-start.is-scroll-end {
/* Tout tient déjà dans la largeur : rien à faire glisser, pas de fondu. */
mask-image: none; -webkit-mask-image: none;
}
.admin-table th, .admin-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 0.88rem; vertical-align: middle; }
.admin-table th { background: var(--paper-alt); font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--paper); }
.admin-table a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
/* Cellule d'actions : surtout PAS `display: flex` sur le | lui-même
(corrigé le 18/09/2026). Un | passé en flex quitte la mise en page
tabulaire : il cesse de s'étirer à la hauteur de sa ligne — mesuré à 55 px
dans une ligne de 71 — et comme sa bordure basse et son fond s'arrêtent
là, la colonne Actions apparaissait comme un bloc blanc détaché, posé à
cheval sur le filet de séparation (capture de l'exploitant). Les boutons
s'alignent donc en ligne, ce qui laisse la cellule être une cellule. */
.admin-table-actions { white-space: nowrap; }
.admin-table-actions > * { display: inline-block; vertical-align: middle; margin: 0; }
.admin-table-actions > * + * { margin-left: 10px; }
/* ─── Liste produits (09/09/2026, nettoyage) ─────────────────────────── */
.admin-table-title {
color: var(--accent-deep); text-decoration: none; font-weight: 600;
/* Hauteur de ligne réservée pour DEUX lignes (13/09/2026) : un titre
tenant sur une seule ligne (ex. « Tirelire maison à peindre ») rendait
sa ligne du tableau visiblement plus basse que les lignes voisines à
titre sur 2 lignes -- signalé comme un « décalage » alors qu'aucune
colonne ne bouge (vérifié par mesure de position, colonnes alignées au
pixel) : c'est la hauteur de ligne qui varie et rompt le rythme visuel.
`display:inline-block` nécessaire pour qu'un `` (inline) respecte
min-height. */
display: inline-block; min-height: 3.2em;
}
/* Puce discrète signalant qu'un aperçu image apparaît au survol (JS,
.admin-title-preview-tip plus bas) -- seulement quand le produit a au
moins une photo (attribut posé côté vue). */
.admin-table-title[data-preview-img]::after { content: " 🖼"; opacity: 0.45; font-size: 0.85em; }
.admin-table-price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.admin-table-etsy { display: flex; align-items: center; gap: 8px; }
.admin-table-etsy form { margin: 0; }
.admin-table-empty { text-align: center; color: var(--ink-soft); padding: 28px 16px !important; }
/* Boutons d'action de la liste produits en icône (09/09/2026, demande
utilisateur — les libellés texte empilés dans les colonnes Etsy/Actions
alourdissaient chaque ligne). Rond compact façon .product-photo-btn (déjà
ce langage visuel dans la fiche produit), libellé porté par
`title`/`aria-label` plutôt qu'affiché. */
.admin-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
background: var(--paper-alt); color: var(--ink-soft); cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-snap);
}
.admin-icon-btn svg { width: 15px; height: 15px; }
.admin-icon-btn:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-1px); }
.admin-icon-btn:disabled { opacity: 0.35; cursor: default; }
.admin-icon-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
/* Teinte "actif" au repos (avant survol) pour le bouton Activer/Désactiver
-- seul indice visuel de l'état courant du produit, l'icône elle-même ne
change pas de forme entre les deux sens. */
.admin-icon-btn-active { background: var(--sage-soft); color: #4f6b5e; }
/* Bulle d'aperçu au survol du titre : positionnée en `fixed` par le script
de la page (calcul sur getBoundingClientRect), pas ancrée en CSS pur sur
la cellule -- .admin-table pose overflow:hidden pour ses coins arrondis,
qui aurait rogné une bulle en position absolue dépassant en bas du
tableau (dernières lignes de la liste). */
.admin-title-preview-tip {
position: fixed; z-index: 50; width: 150px; height: 150px;
border-radius: var(--radius-m); overflow: hidden; background: var(--paper-alt);
box-shadow: 0 18px 40px var(--shadow-strong);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
pointer-events: none;
}
.admin-title-preview-tip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.admin-title-preview-tip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pastille de couleur dans la colonne "Valeur" des options (30/08/2026) :
un hex brut en texte ("#7d9c8c") n'aide pas à visualiser la couleur réelle. */
.admin-color-swatch {
display: inline-block; width: 22px; height: 22px; border-radius: 50%;
vertical-align: middle; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--rule);
}
.admin-badge {
display: inline-block; font-family: var(--font-display); font-weight: 600;
padding: 4px 12px; border-radius: var(--radius-pill);
background: var(--sage-soft); color: #4f6b5e; font-size: 0.76rem;
}
.admin-badge-ok { background: var(--sage-soft); color: #4f6b5e; }
.admin-badge-muted { background: var(--paper-alt); color: var(--ink-faint); }
/* Manquait (bug, corrigé 09/09/2026) : utilisée par la liste produits pour
les échecs (Etsy, génération IA) mais jamais définie -- un échec
s'affichait avec la couleur par défaut de .admin-badge, indiscernable
d'un badge "ok" (même vert sauge). */
.admin-badge-warn { background: var(--danger-soft); color: var(--danger); }
/* Travail en cours (18/09/2026) : synchronisation Etsy déposée en file et
exécutée en tâche de fond. Distincte du vert « envoyée » et du rouge
« erreur » — une pastille d'attente qui emprunterait l'une des deux
annoncerait un résultat qui n'existe pas encore. Même défaut que celui
corrigé le 09/09 sur .admin-badge-warn, qui n'était jamais définie.
Le battement dit que quelque chose avance, sans réclamer l'attention ;
il se tait pour qui a demandé moins d'animations. */
.admin-badge-info { background: var(--blush); color: var(--accent-deep); }
.admin-badge-info { animation: admin-badge-pulse 1.8s ease-in-out infinite; }
@keyframes admin-badge-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
.admin-badge-info { animation: none; }
}
/* Carte générique (30/08/2026) : même habillage que .admin-section, sous un
nom plus court utilisé par les pages "détail" (demande pro) qui n'ont pas
de de section à côté du contenu. */
.admin-card {
background: var(--surface); border-radius: var(--radius-m); padding: 18px 20px; margin-bottom: 16px;
box-shadow: var(--card-shadow); position: relative; overflow: hidden; overflow: clip;
}
.admin-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--sage));
}
/* Bandeau d'information ponctuel (paramètre `?notice=`/`?erreur=` en query
string après une action) -- même palette que .admin-flash, nom distinct
car posé hors formulaire, en tête de fiche. */
.admin-notice { padding: 11px 18px; border-radius: var(--radius-s); margin-bottom: 16px; font-size: 0.9rem; font-weight: 500; background: var(--sage-soft); color: #4f6b5e; }
.admin-notice-error { background: var(--danger-soft); color: var(--danger); }
/* Historique d'une commande : simple liste chronologique, sans puce native
(déjà la date en gras comme repère visuel). */
.admin-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-timeline li { font-size: 0.9rem; padding-left: 14px; border-left: 2px solid var(--rule); }
.admin-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 8px 20px rgba(192, 57, 43, 0.3); }
.admin-btn-danger:hover { background: #9c2d20; border-color: #9c2d20; color: #fff; }
/* Filtres en contrôle segmenté (23/09/2026) : une seule pilule compacte
au lieu de boutons flottants séparés, qui prenaient une ligne entière
par groupe de filtres. */
.admin-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.admin-filter-bar:has(> a) {
display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px;
background: var(--paper-alt); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.admin-filter-bar a {
padding: 5px 12px; border-radius: 9px; background: transparent;
color: var(--ink-soft); text-decoration: none; font-size: 0.82rem; font-weight: 600;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.admin-filter-bar a:hover { color: var(--ink); }
.admin-filter-bar a.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px var(--shadow-strong); }
/* Rangée qui porte plusieurs groupes de filtres + un compteur + une
recherche, sur UNE ligne (liste des produits, commandes…). */
.admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-toolbar .admin-filter-bar { margin-bottom: 0; }
.admin-toolbar-spacer { flex: 1; }
.admin-count { color: var(--ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-search {
position: relative; display: flex; align-items: center; min-width: 0;
}
.admin-search .admin-icon { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
.admin-main .admin-search input {
width: 240px; max-width: 100%; padding: 7px 12px 7px 32px; font-size: 0.86rem; border-radius: 12px;
}
/* Sélecteur de vue tableau/galerie (18/09/2026) : posé au bout de la rangée
de filtres, poussé à droite pour ne pas se confondre avec eux — ce n'est
pas un filtre, il ne change pas QUELS produits s'affichent. */
.admin-view-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--paper-alt); }
.admin-view-switch a {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 9px;
font-size: 0.82rem; font-weight: 600; text-decoration: none;
color: var(--ink-soft);
}
.admin-view-switch a svg { width: 14px; height: 14px; }
.admin-view-switch a.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px var(--shadow-strong); }
/* Galerie des produits (18/09/2026). `minmax(0, 1fr)` et non `1fr` : un
titre long imposerait sinon sa largeur minimale à toute la colonne et
ferait déborder la grille (piège déjà rencontré sur la boutique). */
.admin-gallery {
display: grid; gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
margin-bottom: 18px;
}
.admin-gallery-card {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--radius-m); overflow: hidden;
box-shadow: 0 10px 26px var(--shadow);
}
/* Un produit hors ligne se reconnaît sans lire son badge : la photo pâlit.
La carte, elle, garde son contraste — les commandes doivent rester
lisibles, c'est justement sur ces produits qu'on va cliquer. */
.admin-gallery-card.is-inactive .admin-gallery-art { opacity: 0.55; filter: saturate(0.6); }
.admin-gallery-art {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1; background: var(--paper);
overflow: hidden; text-decoration: none;
}
.admin-gallery-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-gallery-empty { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; }
.admin-gallery-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.admin-gallery-title {
color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem;
line-height: 1.35;
}
.admin-gallery-title:hover { color: var(--accent-deep); }
.admin-gallery-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* `margin-top: auto` : les cartes d'une même rangée font déjà la même
hauteur (grille), mais sans ça la rangée de boutons remontait sous les
titres courts et redescendait sous les titres sur deux lignes — l'œil
lisait des cartes mal alignées. */
.admin-gallery-actions {
display: flex; gap: 8px; margin-top: auto;
padding-top: 10px; border-top: 1px solid var(--rule);
}
.admin-gallery-actions form { margin: 0; }
/* ─── Formulaires ────────────────────────────────────────────────────── */
.admin-form { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-radius: var(--radius-m); padding: 18px 20px; box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.admin-form::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--sage));
}
.admin-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-form-row label { flex: 1; min-width: 160px; }
/* Champs de saisie : scopés à .admin-main (toute la zone de contenu) et non
à .admin-form, pour s'appliquer aussi aux |