/* theme.css — habillage « verre sombre, orange & bleu » (essai du 12/09/2026).
   Feuille SÉPARÉE, chargée après les feuilles de l'application, sur toutes les
   pages. Elle ne touche QU'AUX couleurs, fonds, bordures (couleur), rayons,
   ombres et transitions. Aucune propriété de boîte (padding, margin, width,
   height, display, position, font-size) : rien ne bouge d'un pixel — prouvé
   par deploy/mesure-theme.mjs (getBoundingClientRect avec et sans cette feuille).
   Pour revenir au thème clair : retirer le <link> dans src/app/layout.tsx.

   Palette : fond #0a0c10 ; surfaces #10131a / #171b24 ; texte #e8eaf0 ;
   atténué #8089a0 ; orange #f5923a (foncé #d9781f, clair #ffc98f) ;
   bleu #4f8cff ; rouge #f26060. */

/* ---------- 1. Fond de page : halos + grille fine ------------------------- */
html {
  background: #0a0c10;
  color: #e8eaf0;
  color-scheme: dark;
}
body {
  background: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 8% 0%, rgba(245, 146, 58, 0.08), transparent 70%),
    radial-gradient(60% 45% at 100% 100%, rgba(79, 140, 255, 0.08), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
}
/* Les fonds de page posés par les écrans deviennent transparents : le fond
   (halos, grille) est celui du body. */
.bg-\[\#f4f6f9\],
.hover\:bg-\[\#f4f6f9\]:hover {
  background-color: transparent;
}
main.bg-\[\#f4f6f9\] {
  background-color: transparent;
}

/* ---------- 2 + 3. Boîtes : verre sombre + liseré dégradé ------------------ */
/* Le liseré orange → bleu est dessiné par le double fond (padding-box pour le
   verre, border-box pour le dégradé) sur la bordure EXISTANTE, rendue
   transparente : même résultat que l'anneau en pseudo-élément, sans avoir à
   poser `position: relative` sur des boîtes qui contiennent des menus
   flottants — et sans risquer un ::before déjà utilisé. */
:where(div, section, article, li, ul, details, form, table, aside, header).border {
  border-color: transparent;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 26, 34, 0.92), rgba(15, 17, 23, 0.96)) padding-box,
    linear-gradient(
        160deg,
        rgba(245, 146, 58, 0.55),
        rgba(255, 255, 255, 0.07) 38%,
        rgba(255, 255, 255, 0.07) 62%,
        rgba(79, 140, 255, 0.4)
      )
      border-box;
  box-shadow:
    0 18px 40px -24px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Une boîte en pointillés (zone vide, dépôt) garde un simple trait discret. */
:where(div, section).border.border-dashed {
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
/* La barre latérale et le bandeau : verre, sans liseré dégradé (une seule
   bordure droite/basse, le dégradé y ferait une ligne coupée). */
aside.fixed,
header.sticky {
  background: linear-gradient(180deg, rgba(16, 19, 26, 0.94), rgba(10, 12, 16, 0.96));
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
.bg-white\/95 {
  background-color: rgba(16, 19, 26, 0.88);
}
/* Surfaces sans bordure. */
.bg-white {
  background-color: #10131a;
}
.bg-\[\#f9fafc\] {
  background-color: #10131a;
}
.bg-\[\#eef2f7\],
.hover\:bg-\[\#eef2f7\]:hover,
.bg-white\/10 {
  background-color: #171b24;
}
.bg-\[\#e8f0fe\] {
  background-color: rgba(245, 146, 58, 0.1);
}
.bg-\[\#dbe7fd\],
.hover\:bg-\[\#dbe7fd\]:hover {
  background-color: rgba(79, 140, 255, 0.22);
}
.bg-\[\#2563eb\]\/10 {
  background-color: rgba(245, 146, 58, 0.12);
}
.bg-\[\#2563eb\]\/25 {
  background-color: rgba(245, 146, 58, 0.28);
}
.bg-\[\#fef2f2\],
.bg-\[\#fee2e2\] {
  background-color: rgba(242, 96, 96, 0.12);
}
.bg-\[\#fecaca\] {
  background-color: rgba(242, 96, 96, 0.28);
}
.bg-\[\#ecfdf3\] {
  background-color: rgba(74, 222, 128, 0.12);
}
.bg-\[\#dc2626\] {
  background-color: #f26060;
}

/* Fenêtres et tiroirs : voile flouté derrière, anneau un peu plus lumineux. */
.fixed.inset-0 > button.absolute.inset-0,
.fixed.inset-0 > .absolute.inset-0 {
  background-color: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fixed.inset-0 .border-r.bg-white,
.fixed.inset-0 > div.relative.bg-white {
  background: linear-gradient(180deg, rgba(22, 26, 34, 0.96), rgba(15, 17, 23, 0.98));
  border-color: rgba(245, 146, 58, 0.35);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.95);
}

/* Bordures et filets. */
.border-\[\#e2e7ee\] {
  border-color: rgba(255, 255, 255, 0.08);
}
.ring-\[\#e2e7ee\] {
  --tw-ring-color: rgba(255, 255, 255, 0.18);
}
.border-\[\#b3bcc9\],
.hover\:border-\[\#b3bcc9\]:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.border-white\/15,
.hover\:border-white\/15:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.divide-\[\#eef2f7\] > :not(:last-child) {
  border-color: rgba(255, 255, 255, 0.06);
}
.border-\[\#2563eb\],
.border-\[\#2563eb\]\/70,
.hover\:border-\[\#2563eb\]:hover {
  border-color: #f5923a;
}
.border-\[\#2563eb\]\/40,
.border-\[\#2563eb\]\/30,
.border-\[\#2563eb\]\/25,
.hover\:border-\[\#2563eb\]\/50:hover,
.group:hover .group-hover\:border-\[\#2563eb\]\/40,
.focus\:border-\[\#2563eb\]\/50:focus {
  border-color: rgba(245, 146, 58, 0.45);
}
.border-\[\#fca5a5\],
.border-\[\#dc2626\]\/40,
.border-\[\#dc2626\]\/30,
.hover\:border-\[\#dc2626\]\/40:hover {
  border-color: rgba(242, 96, 96, 0.45);
}
.border-\[\#dc2626\],
.hover\:border-\[\#dc2626\]:hover {
  border-color: #f26060;
}
.border-\[\#86efac\] {
  border-color: rgba(74, 222, 128, 0.45);
}

/* Textes. */
.text-\[\#182230\],
.hover\:text-\[\#182230\]:hover,
.group:hover .group-hover\:text-\[\#182230\] {
  color: #e8eaf0;
}
.text-\[\#3d4a5c\],
.hover\:text-\[\#3d4a5c\]:hover {
  color: #c3c9d8;
}
.text-\[\#5c6a7d\] {
  color: #8089a0;
}
.text-\[\#94a0b0\] {
  color: #6f788d;
}
.text-\[\#b3bcc9\],
.placeholder\:text-\[\#b3bcc9\]::placeholder {
  color: #59627a;
}
.text-\[\#2563eb\],
.text-\[\#1d4ed8\],
.focus\:text-\[\#2563eb\]:focus,
.hover\:text-\[\#2563eb\]:hover,
.group:hover .group-hover\:text-\[\#2563eb\] {
  color: #f5923a;
}
.text-\[\#2563eb\]\/70 {
  color: rgba(245, 146, 58, 0.7);
}
.hover\:text-\[\#1d4ed8\]:hover {
  color: #ffc98f;
}
.text-\[\#dc2626\],
.text-\[\#b91c1c\],
.text-\[\#ef4444\],
.hover\:text-\[\#dc2626\]:hover {
  color: #f26060;
}
.text-\[\#15803d\],
.hover\:text-\[\#15803d\]:hover {
  color: #4ade80;
}
.text-\[\#b45309\] {
  color: #f5b74a;
}

/* ---------- 4. Boutons -------------------------------------------------------- */
/* Principaux : fond bleu plein dans le thème clair → dégradé orange. */
.bg-\[\#2563eb\] {
  background: linear-gradient(135deg, #ffb56b, #f5923a 45%, #d9781f);
  color: #1a0f05;
  border-color: transparent;
  border-radius: 10px;
  box-shadow: 0 10px 26px -12px rgba(245, 146, 58, 0.65);
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease;
}
.bg-\[\#2563eb\]:hover {
  filter: saturate(1.15) brightness(1.04);
  box-shadow: 0 12px 30px -12px rgba(245, 146, 58, 0.8);
}
.bg-\[\#2563eb\] .text-white,
.bg-\[\#2563eb\].text-white {
  color: #1a0f05;
}
/* Secondaires : contour bleu dans le thème clair → verre très léger, orange au
   survol. Le texte devient sombre quand le fond orange monte (règle héritée
   hover:text-white → ici #1a0f05). */
:where(button, a).border-\[\#2563eb\]\/40,
:where(button, a).border-\[\#2563eb\]\/70,
:where(button, a).border-\[\#2563eb\],
:where(button, a).border-\[\#e2e7ee\] {
  background-color: rgba(255, 255, 255, 0.025);
  border-radius: 10px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
:where(button, a).hover\:bg-\[\#1d4ed8\]:hover {
  background: linear-gradient(135deg, #ffb56b, #f5923a 45%, #d9781f);
  border-color: transparent;
  color: #1a0f05;
  box-shadow: 0 10px 26px -12px rgba(245, 146, 58, 0.65);
}
.hover\:text-white:hover {
  color: #1a0f05;
}
/* Le remplissage animé du bouton « Continuer » (connexion). */
span.bg-\[\#2563eb\] {
  border-radius: 0;
  box-shadow: none;
}
button:hover > span.relative {
  color: inherit;
}

/* ---------- 5. Champs de saisie ---------------------------------------------- */
input.border,
select.border,
textarea.border,
.bg-transparent:is(input, textarea, select) {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8eaf0;
  border-radius: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
input.border:focus,
select.border:focus,
textarea.border:focus,
.focus\:border-\[\#2563eb\]:focus {
  border-color: #f5923a;
  box-shadow: 0 0 0 4px rgba(245, 146, 58, 0.14);
}
select.border option {
  background-color: #10131a;
  color: #e8eaf0;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #f5923a;
}
.accent-\[\#2563eb\] {
  accent-color: #f5923a;
}

/* ---------- 6. Navigation ----------------------------------------------------- */
/* Élément actif : texte en dégradé vert → bleu + fin contour orange. */
aside a[aria-current="page"],
nav a[aria-current="page"],
.fixed a[aria-current="page"] {
  background-color: rgba(245, 146, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 146, 58, 0.45);
}
aside a[aria-current="page"] > span > span:first-child,
nav a[aria-current="page"] > span > span:first-child,
.fixed a[aria-current="page"] > span > span:first-child {
  background: linear-gradient(90deg, #f5923a, #ffc98f 55%, #4f8cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Onglets et filtres actifs (aria-current="true") : même contour, texte orange. */
[aria-current="true"] {
  color: #f5923a;
  box-shadow: inset 0 0 0 1px rgba(245, 146, 58, 0.45);
  border-radius: 8px;
}
/* Les chevrons des groupes dépliables : orange claire. */
details > summary span.text-\[\#94a0b0\],
details > summary .text-\[\#94a0b0\] {
  color: #ffc98f;
}
/* « Se déconnecter » : en rouge. */
aside form > button[type="submit"],
.fixed.inset-0 form > button[type="submit"] {
  color: #f26060;
  border-color: rgba(242, 96, 96, 0.45);
  background-color: rgba(242, 96, 96, 0.06);
}
aside form > button[type="submit"]:hover,
.fixed.inset-0 form > button[type="submit"]:hover {
  color: #ffffff;
  background: #f26060;
  border-color: transparent;
  box-shadow: 0 10px 26px -12px rgba(242, 96, 96, 0.7);
}

/* ---------- 7. Marque ----------------------------------------------------------- */
[data-marque] {
  background: linear-gradient(135deg, #ffb56b 0%, #f5923a 38%, #b07fd0 68%, #4f8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
main > div > div > header > div[aria-hidden] {
  background: linear-gradient(90deg, transparent, rgba(245, 146, 58, 0.9), transparent) !important;
}

/* ---------- Couleurs posées en ligne (style="…") et dans les SVG ---------------- */
[style*="color:#2563eb"],
[style*="color: #2563eb"] {
  color: #f5923a;
}
[style*="border-color:#2563eb"],
[style*="border-color: #2563eb"] {
  border-color: rgba(245, 146, 58, 0.6);
}
[style*="color:#1d4ed8"] {
  color: #ffc98f;
}
[style*="color:#dc2626"] {
  color: #f26060;
}
[style*="color:#15803d"] {
  color: #4ade80;
}
[style*="color:#182230"] {
  color: #e8eaf0;
}
[style*="color:#5c6a7d"] {
  color: #8089a0;
}
[style*="color:#94a0b0"] {
  color: #6f788d;
}
[style*="color:#b3bcc9"] {
  color: #59627a;
}
[style*="color:#ffffff"] {
  color: #1a0f05;
}
[style*="border-color:#e2e7ee"] {
  border-color: rgba(255, 255, 255, 0.08);
}
[style*="background:#e8f0fe"],
[style*="background-color:#e8f0fe"] {
  background-color: rgba(245, 146, 58, 0.12);
}
[style*="background:#ffffff"],
[style*="background-color:#ffffff"] {
  background-color: #171b24;
}
[style*="background:#2563eb"],
[style*="background-color:#2563eb"] {
  background: linear-gradient(135deg, #ffb56b, #f5923a 45%, #d9781f);
  color: #1a0f05;
}
[style*="background:#dc2626"],
[style*="background-color:#dc2626"] {
  background-color: #f26060;
}
svg [fill="#182230"] {
  fill: #e8eaf0;
}
svg [fill="#94a0b0"] {
  fill: #8089a0;
}
svg [fill="#5c6a7d"],
svg [fill="#3d4a5c"] {
  fill: #a0a8bb;
}
svg [stroke="#eef2f7"] {
  stroke: #171b24;
}
svg [fill="#2563eb"] {
  fill: #f5923a;
}
svg [stroke="#2563eb"] {
  stroke: #f5923a;
}
svg [fill="#dc2626"] {
  fill: #f26060;
}
svg [fill="#15803d"] {
  fill: #4ade80;
}

/* Photo de l'annonce : la légende sur dégradé noir reste blanche (déjà). */
::selection {
  background: rgba(245, 146, 58, 0.35);
  color: #e8eaf0;
}