/* ═══════════════════════════════════════════════════════════════════════════
   admin-cabinet — surcouche visuelle (11/09/2026)
   Palette « MyStockx » : fond #0a0c10, surfaces #10131a/#171b24, texte #e8eaf0,
   menthe #4f8cff, bleu #c957ff, rouge #f26060.

   RÈGLE ABSOLUE : habillage seul — couleurs, fonds, bordures (couleur), rayons,
   ombres, transitions. AUCUNE propriété de boîte (padding/margin/width/height/
   display/font-size). Aucune règle de globals.css ni de Tailwind n'est modifiée :
   cette feuille est chargée APRÈS et n'est dans aucun @layer, elle gagne donc
   sur les utilitaires Tailwind (qui vivent dans @layer utilities). Les règles
   `.page-claire …` de globals.css sont hors layer elles aussi : on les dépasse
   par spécificité (.page-claire répété).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --t-bg: #0a0c10; --t-text: #e8eaf0; --t-muted: #8089a0;
  --t-mint: #4f8cff; --t-mint-dark: #3a6fe0; --t-mint-light: #8fb4ff; --t-blue: #c957ff; --t-red: #f26060; /* « mint » = bleu, « blue » = rose-violet depuis le 11/09 soir */
  --t-glass: linear-gradient(180deg, rgba(22, 26, 34, 0.92), rgba(15, 17, 23, 0.96));
  --t-glass-2: linear-gradient(180deg, rgba(28, 32, 42, 0.92), rgba(19, 22, 30, 0.96));
  --t-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --t-ring-grad: linear-gradient(160deg, rgba(79, 140, 255, 0.55), rgba(255, 255, 255, 0.07) 38%, rgba(255, 255, 255, 0.07) 62%, rgba(201, 87, 255, 0.40));
  --t-btn-grad: linear-gradient(135deg, #6ea0ff, #4f8cff 45%, #3a6fe0);
  --t-brand-grad: linear-gradient(135deg, #6ea0ff 0%, #4f8cff 35%, #a35cff 68%, #ff5fb8 100%);
  --t-text-grad: linear-gradient(90deg, #4f8cff, #9c8cff 50%, #ff5fb8);
}

/* ── 1. Fond de page : halos + grille ──────────────────────────────────────── */
html { background: var(--t-bg); }
body { background: transparent; color: var(--t-text); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(79, 140, 255, 0.085), transparent 62%),
    radial-gradient(900px 520px at 104% 108%, rgba(201, 87, 255, 0.075), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--t-bg);
}
/* Le panneau était en « page claire » (fond #e2e4e8) : on rend le fond transparent
   et on remet le texte clair. Les pages de connexion (fond #0a0a0b) laissent voir les halos. */
.page-claire.page-claire.page-claire { background-color: transparent; color: var(--t-text); }
.bg-\[\#0a0a0b\] { background-color: transparent; }
.bg-\[\#e2e4e8\] { background-color: transparent; }

/* ── 1b. Neutralisation des retraductions « page claire » de globals.css ────
   Elles passaient le texte blanc en bleu nuit HORS des boîtes. Sur fond sombre,
   on remet les valeurs Tailwind d'origine (blanc translucide). Spécificité :
   (.page-claire ×3 + utilitaire) > (.page-claire + utilitaire + :not(:is(…))). */
.page-claire.page-claire.page-claire .text-white\/10 { color: rgb(255 255 255 / 10%); }
.page-claire.page-claire.page-claire .text-white\/15 { color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .text-white\/20 { color: rgb(255 255 255 / 20%); }
.page-claire.page-claire.page-claire .text-white\/25 { color: rgb(255 255 255 / 25%); }
.page-claire.page-claire.page-claire .text-white\/30 { color: rgb(255 255 255 / 30%); }
.page-claire.page-claire.page-claire .text-white\/35 { color: rgb(255 255 255 / 35%); }
.page-claire.page-claire.page-claire .text-white\/40 { color: rgb(255 255 255 / 40%); }
.page-claire.page-claire.page-claire .text-white\/45 { color: rgb(255 255 255 / 45%); }
.page-claire.page-claire.page-claire .text-white\/50 { color: rgb(255 255 255 / 50%); }
.page-claire.page-claire.page-claire .text-white\/55 { color: rgb(255 255 255 / 55%); }
.page-claire.page-claire.page-claire .text-white\/60 { color: rgb(255 255 255 / 60%); }
.page-claire.page-claire.page-claire .text-white\/65 { color: rgb(255 255 255 / 65%); }
.page-claire.page-claire.page-claire .text-white\/70 { color: rgb(255 255 255 / 70%); }
.page-claire.page-claire.page-claire .text-white\/75 { color: rgb(255 255 255 / 75%); }
.page-claire.page-claire.page-claire .text-white\/80 { color: rgb(255 255 255 / 80%); }
.page-claire.page-claire.page-claire .text-white { color: #fff; }
.page-claire.page-claire.page-claire .text-\[\#f3f6fc\] { color: var(--t-text); }
.page-claire.page-claire.page-claire .text-\[\#4cc3ff\] { color: var(--t-mint); }
.page-claire.page-claire.page-claire .text-\[\#8fdcff\] { color: var(--t-mint-light); }
.page-claire.page-claire.page-claire .hover\:text-white\/60:hover { color: rgb(255 255 255 / 60%); }
.page-claire.page-claire.page-claire .hover\:text-white\/70:hover { color: rgb(255 255 255 / 70%); }
.page-claire.page-claire.page-claire .hover\:text-white\/80:hover { color: rgb(255 255 255 / 80%); }
.page-claire.page-claire.page-claire .hover\:text-white\/90:hover { color: rgb(255 255 255 / 90%); }
.page-claire.page-claire.page-claire .hover\:text-white:hover { color: #fff; }
.page-claire.page-claire.page-claire .hover\:text-white\/15:hover { color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .hover\:text-\[\#4cc3ff\]:hover { color: var(--t-mint); }
.page-claire.page-claire.page-claire .disabled\:text-white\/40:disabled { color: rgb(255 255 255 / 40%); }
.page-claire.page-claire.page-claire .disabled\:text-white\/15:disabled { color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .border-white\/5 { border-color: rgb(255 255 255 / 5%); }
.page-claire.page-claire.page-claire .border-white\/10 { border-color: rgb(255 255 255 / 10%); }
.page-claire.page-claire.page-claire .border-white\/15 { border-color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .border-white\/20 { border-color: rgb(255 255 255 / 20%); }
.page-claire.page-claire.page-claire .hover\:border-white\/25:hover { border-color: rgb(255 255 255 / 25%); }
.page-claire.page-claire.page-claire .hover\:border-white\/30:hover { border-color: rgb(255 255 255 / 30%); }
.page-claire.page-claire.page-claire .hover\:border-white\/35:hover { border-color: rgb(255 255 255 / 35%); }
.page-claire.page-claire.page-claire .divide-white\/5 > :not(:last-child) { border-color: rgb(255 255 255 / 5%); }
.page-claire.page-claire.page-claire .decoration-white\/15 { text-decoration-color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .decoration-white\/20 { text-decoration-color: rgb(255 255 255 / 20%); }
.page-claire.page-claire.page-claire .bg-white\/10 { background-color: rgb(255 255 255 / 10%); }
.page-claire.page-claire.page-claire .bg-white\/15 { background-color: rgb(255 255 255 / 15%); }
.page-claire.page-claire.page-claire .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 10%); }
/* Le texte bleu nuit posé en dur sur le fond clair redevient clair. */
.page-claire.page-claire.page-claire .text-\[\#16181c\]:not(.bg-\[\#4cc3ff\], .hover\:bg-\[\#4cc3ff\]:hover) { color: var(--t-text); }

/* ── 2. Surfaces : verre sombre ─────────────────────────────────────────────── */
.page-claire.page-claire .border { background-color: transparent; color: var(--t-text); }
.bg-\[\#202226\], .bg-\[\#202226\]\/95 { background: var(--t-glass); }
.bg-\[\#16181c\] { background: linear-gradient(180deg, rgba(14, 16, 22, 0.94), rgba(10, 12, 16, 0.97)); }
.bg-\[\#2b2e34\] { background: rgba(255, 255, 255, 0.06); }
.bg-\[\#101216\] { background: rgba(8, 10, 14, 0.9); }

/* ── 3. Boîtes : anneau dégradé menthe → bleu + ombre douce ────────────────────
   Une « boîte » = un élément bordé (.border) qui n'est ni un champ ni un bouton
   ni un lien. Les boutons/liens/champs ont leur propre habillage plus bas. */
/* Les liens et boutons « tuiles » (rembourrage de carte p-3…p-12) sont des boîtes aussi. */
.border:not(input, select, textarea, button, a, summary, .rounded-full),
:is(a, button, summary).border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):not(.rounded-full) {
  border-color: transparent;
  background: var(--t-glass);
  border-radius: 14px;
}
/* L'anneau a besoin d'un ancêtre positionné : on ne pose `relative` QUE sur les boîtes qui
   ne sont pas déjà positionnées (un cadre `absolute inset-4` doit rester absolu). */
.border:not(input, select, textarea, button, a, summary, .rounded-full, .absolute, .fixed, .sticky, .relative),
:is(a, button, summary).border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):not(.rounded-full, .absolute, .fixed, .sticky, .relative) {
  position: relative;
}
/* Un cadre purement décoratif (absolu, sans contenu) garde une bordure fine, pas un fond de carte */
.border.absolute.pointer-events-none { background: transparent; border-color: rgba(79, 140, 255, 0.25); }
.border.absolute.pointer-events-none::before { content: none; }
.border:not(input, select, textarea, button, a, summary, .rounded-full)::before,
:is(a, button, summary).border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):not(.rounded-full)::before {
  content: ''; position: absolute; inset: -0.5px; border-radius: inherit; padding: 1px;
  background: var(--t-ring-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 0;
}
/* Ombre douce sur les vraies boîtes (celles qui ont un rembourrage de carte) */
.border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):not(input, select, textarea) { box-shadow: var(--t-shadow); }
/* Tuile-lien au survol : anneau plus vif, pas de fond menthe (ce n'est pas un bouton) */
:is(a, button, summary).border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):hover { background: var(--t-glass-2); color: inherit; border-color: transparent; }
:is(a, button, summary).border:is(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):hover::before { background: linear-gradient(160deg, rgba(79, 140, 255, 0.8), rgba(255, 255, 255, 0.09) 38%, rgba(255, 255, 255, 0.09) 62%, rgba(201, 87, 255, 0.6)); }
/* Pastilles rondes (badges en ligne, parfois coupées sur deux lignes) : pas d'anneau,
   juste leur bordure d'origine légèrement relevée */
.border.rounded-full { border-radius: 9999px; background: rgba(255, 255, 255, 0.04); }
/* Une boîte d'alerte colorée garde sa teinte (rouge / ambre / vert) par-dessus le verre */
.border.bg-\[\#e0533d\]\/\[0\.04\], .border.bg-\[\#e0533d\]\/15, .border.bg-red-500\/15 { background: rgba(242, 96, 96, 0.08); }
.border.border-\[\#e0533d\]\/25::before { background: linear-gradient(160deg, rgba(242, 96, 96, 0.6), rgba(242, 96, 96, 0.2)); }

/* ── 4. Boutons ────────────────────────────────────────────────────────────── */
/* secondaires : tout bouton/lien bordé */
:is(button, a, summary).border:not(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12) {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
:is(button, a).border:not(.p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12):hover { background: rgba(79, 140, 255, 0.07); border-color: rgba(79, 140, 255, 0.5); color: var(--t-mint); }
/* accent (ancien ciel #4cc3ff) → menthe */
.text-\[\#4cc3ff\], .open\:text-\[\#4cc3ff\][open], .text-\[\#4cc3ff\]\/70 { color: var(--t-mint); }
.hover\:text-\[\#4cc3ff\]:hover { color: var(--t-mint); }
.border-\[\#4cc3ff\] { border-color: rgba(79, 140, 255, 0.8); }
.border-\[\#4cc3ff\]\/70 { border-color: rgba(79, 140, 255, 0.7); }
.border-\[\#4cc3ff\]\/60 { border-color: rgba(79, 140, 255, 0.6); }
.border-\[\#4cc3ff\]\/50 { border-color: rgba(79, 140, 255, 0.5); }
.border-\[\#4cc3ff\]\/40 { border-color: rgba(79, 140, 255, 0.4); }
.border-\[\#4cc3ff\]\/30 { border-color: rgba(79, 140, 255, 0.3); }
.border-\[\#4cc3ff\]\/25 { border-color: rgba(79, 140, 255, 0.25); }
.hover\:border-\[\#4cc3ff\]:hover { border-color: rgba(79, 140, 255, 0.8); }
.hover\:border-\[\#4cc3ff\]\/50:hover { border-color: rgba(79, 140, 255, 0.5); }
.hover\:border-\[\#4cc3ff\]\/40:hover { border-color: rgba(79, 140, 255, 0.4); }
.hover\:border-\[\#4cc3ff\]\/30:hover { border-color: rgba(79, 140, 255, 0.3); }
.focus\:border-\[\#4cc3ff\]:focus, .focus\:border-\[\#4cc3ff\]\/50:focus { border-color: rgba(79, 140, 255, 0.7); }
.decoration-\[\#4cc3ff\]\/30 { text-decoration-color: rgba(79, 140, 255, 0.3); }
.hover\:decoration-\[\#4cc3ff\]:hover { text-decoration-color: var(--t-mint); }
.bg-\[\#4cc3ff\]\/\[0\.04\], .bg-\[\#4cc3ff\]\/5 { background-color: rgba(79, 140, 255, 0.05); }
.bg-\[\#4cc3ff\]\/\[0\.06\] { background-color: rgba(79, 140, 255, 0.07); }
.bg-\[\#4cc3ff\]\/10 { background-color: rgba(79, 140, 255, 0.10); }
.hover\:bg-\[\#4cc3ff\]\/20:hover { background-color: rgba(79, 140, 255, 0.20); }
/* Boîtes teintées d'accent : anneau plus menthe */
.border.bg-\[\#4cc3ff\]\/\[0\.04\], .border.bg-\[\#4cc3ff\]\/\[0\.06\], .border.bg-\[\#4cc3ff\]\/10 { background: rgba(79, 140, 255, 0.06); }
/* primaires : fond plein accent → dégradé menthe + halo (le texte sombre reste sombre) */
.bg-\[\#4cc3ff\], .bg-\[\#3987e5\] {
  background: var(--t-btn-grad);
  color: #0a0f1e;
  box-shadow: 0 10px 26px -12px rgba(79, 140, 255, 0.65);
  border-color: transparent;
  transition: filter 0.18s, box-shadow 0.18s;
}
.bg-\[\#4cc3ff\]:hover, .hover\:bg-\[\#7fd4ff\]:hover, .bg-\[\#7fd4ff\] { background: var(--t-btn-grad); filter: saturate(1.1) brightness(1.05); color: #0a0f1e; }
.hover\:bg-\[\#4cc3ff\]:hover { background: var(--t-btn-grad); color: #0a0f1e; border-color: transparent; box-shadow: 0 10px 26px -12px rgba(79, 140, 255, 0.65); }
.hover\:text-\[\#16181c\]:hover { color: #0a0f1e; }
.bg-\[\#4cc3ff\] .text-\[\#16181c\], .bg-\[\#4cc3ff\].text-\[\#16181c\] { color: #0a0f1e; }
/* Couleurs d'état */
.text-\[\#e0533d\] { color: var(--t-red); }
.bg-\[\#e0533d\] { background: linear-gradient(135deg, #ff7a7a, #f26060 50%, #d94848); color: #fff; border-color: transparent; }
.bg-\[\#2fbf71\] { background: var(--t-btn-grad); color: #0a0f1e; }
.text-\[\#2fbf71\]\/70 { color: rgba(79, 140, 255, 0.8); }

/* ── 5. Champs de saisie ───────────────────────────────────────────────────── */
input.border, select.border, textarea.border,
.page-claire input, .page-claire select, .page-claire textarea {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--t-text);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
input.border:focus, select.border:focus, textarea.border:focus,
.page-claire input:focus, .page-claire select:focus, .page-claire textarea:focus {
  outline: none;
  border-color: rgba(79, 140, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.045);
}
.page-claire input::placeholder, .page-claire textarea::placeholder { color: #5a647c; }
.page-claire select option { background: #10131a; color: var(--t-text); }
.page-claire input[type="checkbox"], .page-claire input[type="radio"] { accent-color: var(--t-mint); }

/* ── 6. Navigation ─────────────────────────────────────────────────────────── */
aside.fixed {
  background: linear-gradient(180deg, rgba(17, 20, 27, 0.97), rgba(11, 13, 18, 0.99));
  border-right-color: transparent;
}
aside.fixed::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.55), rgba(255, 255, 255, 0.08) 45%, rgba(201, 87, 255, 0.45));
}
header.sticky { background: linear-gradient(180deg, rgba(17, 20, 27, 0.92), rgba(11, 13, 18, 0.95)); border-bottom-color: rgba(255, 255, 255, 0.08); }
/* Marque « Groupe Deprez » en dégradé */
aside.fixed .text-\[\#4cc3ff\].tracking-\[0\.35em\], header.sticky .text-\[\#4cc3ff\] {
  background: var(--t-text-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Élément actif du menu : contour menthe + lettres dégradées ; inactifs gris */
nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(79, 140, 255, 0.12), rgba(201, 87, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(79, 140, 255, 0.30), inset 2px 0 0 0 var(--t-mint);
}
nav a[aria-current="page"] span.truncate {
  background: var(--t-text-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
nav a:not([aria-current="page"]):hover { background: rgba(255, 255, 255, 0.04); }
nav svg { color: var(--t-mint-light); }
nav a[href="/logout"], nav a[href*="deconnexion"], nav button[formaction*="logout"], form[action*="logout"] button, .text-red-300 { color: var(--t-red); }

/* ── 7. Fenêtres et voiles ─────────────────────────────────────────────────── */
.fixed.inset-0.bg-black\/70, .fixed.inset-0.bg-black\/60, .bg-black\/70, .bg-black\/60, .bg-black\/30 {
  background-color: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fixed.inset-0 > .border::before, .fixed.inset-0 .border.p-5::before, .fixed.inset-0 .border.p-6::before {
  background: linear-gradient(160deg, rgba(79, 140, 255, 0.65), rgba(255, 255, 255, 0.08) 35%, rgba(201, 87, 255, 0.45));
}

/* ── 8. Divers ─────────────────────────────────────────────────────────────── */
::selection { background: rgba(79, 140, 255, 0.3); color: #fff; }
.text-\[\#e0a23d\] { color: #f0b657; }
.bg-\[\#c9a961\] { background: var(--t-brand-grad); color: #0a0f1e; }

/* ── 9. Page de connexion / vitrine : l'« or » d'origine passe en menthe ─────── */
.text-\[\#c9a961\] { color: var(--t-mint); }
.border-\[\#c9a961\] { border-color: rgba(79, 140, 255, 0.8); }
.border-\[\#c9a961\]\/70 { border-color: rgba(79, 140, 255, 0.7); }
.border-\[\#c9a961\]\/50 { border-color: rgba(79, 140, 255, 0.5); }
.bg-\[\#c9a961\]\/10 { background-color: rgba(79, 140, 255, 0.10); }
.bg-\[\#c9a961\] { background: var(--t-btn-grad); color: #0a0f1e; box-shadow: 0 10px 26px -12px rgba(79, 140, 255, 0.65); }
.text-\[\#e0a08e\] { color: var(--t-red); }
.border-\[\#d17f6a\] { border-color: rgba(242, 96, 96, 0.6); }
/* Décor doré posé en style inline (halos, filets) : rotation de teinte or → menthe */
[style*="201,169,97"], [style*="201, 169, 97"] { filter: hue-rotate(178deg) saturate(1.15);   /* or (43°) → bleu (≈220°) */ }
.focus\:border-\[\#c9a961\]:focus { border-color: rgba(79, 140, 255, 0.8); box-shadow: 0 4px 12px -8px rgba(79, 140, 255, 0.6); }
.hover\:border-\[\#c9a961\]:hover { border-color: rgba(79, 140, 255, 0.8); }
.hover\:border-\[\#c9a961\]\/50:hover { border-color: rgba(79, 140, 255, 0.5); }
.hover\:text-\[\#c9a961\]:hover { color: var(--t-mint); }
.peer:focus ~ .peer-focus\:text-\[\#c9a961\], .peer-focus\:text-\[\#c9a961\]:is(.peer:focus ~ *) { color: var(--t-mint); }