/* ──────────────────────────────────────────────────────────────────────────
   LithoExpert · charte « ardoise et cuivre »
   Validée le 7 octobre 2026.

   L'uroscanner est en niveaux de gris, et c'est la matière première de
   l'application : l'ardoise reprend ce gris comme encre. Le cuivre, couleur
   des calculs uriques, est l'accent unique, réservé à l'action principale.

   Grammaire reprise de PemaTrack, Mobikisi et SINAVE :
     · une seule teinte dominante par application
     · l'encre dérive de la teinte, elle n'est jamais noire
     · le fond est un blanc cassé teinté, jamais blanc pur ni dégradé
     · rayons plats, de 6 à 18 px
     · Inter pour l'interface, IBM Plex Mono pour les chiffres
     · ombres teintées de la marque, jamais noires
     · les couleurs d'état ne se confondent jamais avec l'accent

   Clair par défaut, quel que soit le réglage du système. Le sombre ne vient
   que sur demande : la classe .dark-mode que pose le bouton du menu.

   Ce fichier se charge APRÈS myoneart.css et redéfinit ses jetons : aucun
   écran n'a besoin d'être réécrit pour changer de couleur.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── Fonds et surfaces ── */
  --fond:            #F2F4F5;
  --surface:         #FFFFFF;
  --surface-2:       #F7F9FA;
  --surface-3:       #EDF1F2;
  --card-bg:         #FFFFFF;
  --bg-gradient:     #F2F4F5;      /* plus de dégradé : un aplat */
  --head-bg:         #F7F9FA;

  /* ── Encre et texte ── */
  --encre:           #1A2328;
  --text-heading:    #1A2328;
  --heading-color:   #1A2328;
  --text-body:       #4A5A62;
  --text-muted:      #78888F;
  --text-subtle:     #8E9CA2;
  --text-inverse:    #FFFFFF;

  /* ── Traits ── */
  --border:          #DFE5E7;
  --border-light:    #EBEFF0;
  --border-strong:   #C5D0D3;
  --gray-border:     #DFE5E7;
  --gray-light:      #F7F9FA;
  --gray-text:       #78888F;
  --gray-dark:       #4A5A62;

  /* ── Accent cuivre ── */
  --primary:         #A8551F;
  --primary-color:   #A8551F;
  --primary-dark:    #8A4518;
  --primary-light:   #FCF3EB;
  --primary-bg:      #FCF3EB;
  --primary-gradient:#A8551F;      /* aplat, pas de dégradé */
  --accent:          #A8551F;
  --accent-fond:     #FCF3EB;

  /* Les anciens jetons violets pointent sur l'accent : plus aucun violet
     ne subsiste, même dans les écrans qui les utilisaient encore. */
  --indigo-color:    #A8551F;
  --indigo-bg:       #FCF3EB;
  --indigo-border:   #E8CDB6;
  --purple-color:    #A8551F;
  --purple-bg:       #FCF3EB;
  --purple-border:   #E8CDB6;

  /* ── États cliniques, tenus à l'écart de l'accent ── */
  --success:         #2F7A4F;
  --success-color:   #2F7A4F;
  --success-bg:      #ECF6F0;
  --success-bg-alpha:rgba(47,122,79,.09);
  --success-border:  #BCDCC9;
  --success-text:    #1F5637;

  --warning:         #9A6B14;
  --warning-bg:      #FBF4E4;
  --warning-border:  #E6D2A4;
  --warning-text:    #6E4C0D;

  --danger:          #A4453A;
  --danger-color:    #A4453A;
  --danger-bg:       #FBEEEC;
  --danger-bg-alpha: rgba(164,69,58,.09);
  --danger-border:   #E7C0BA;
  --danger-text:     #7B332B;

  --info:            #2A6B8A;
  --info-color:      #2A6B8A;
  --info-bg:         #EAF2F6;
  --info-bg-alpha:   rgba(42,107,138,.09);
  --info-border:     #BCD5E1;
  --info-text:       #1D4A60;

  /* ── Rayons, plats ── */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       18px;

  /* ── Ombres teintées d'ardoise ── */
  --shadow-color:    26, 35, 40;
  --shadow-xs:       0 1px 2px rgba(26,35,40,.05);
  --shadow-sm:       0 1px 2px rgba(26,35,40,.05), 0 2px 6px rgba(26,35,40,.05);
  --shadow-md:       0 2px 6px rgba(26,35,40,.06), 0 8px 20px -10px rgba(26,35,40,.12);
  --shadow-lg:       0 4px 10px rgba(26,35,40,.07), 0 16px 36px -16px rgba(26,35,40,.18);

  /* ── Surfaces translucides, discrètes ── */
  --glass-bg:          rgba(255,255,255,.88);
  --glass-bg-strong:   rgba(255,255,255,.96);
  --glass-blur:        blur(10px);
  --glass-blur-strong: blur(16px);
  --glass-border:        #DFE5E7;
  --glass-border-subtle: #EBEFF0;
  --glass-shadow:        0 1px 2px rgba(26,35,40,.05), 0 8px 20px -12px rgba(26,35,40,.12);
  --glass-shadow-hover:  0 2px 6px rgba(26,35,40,.07), 0 16px 32px -16px rgba(26,35,40,.18);

  /* ── Les huit types de calculs, d'après leur minéralogie ── */
  --t-urate:       #6A707C;
  --t-urique:      #C9821F;
  --t-struvite:    #9C8C6E;
  --t-cystine:     #B5A24A;
  --t-weddellite:  #4E7A86;
  --t-whewellite:  #2F4A53;
  --t-carbapatite: #8A7FA0;
  --t-brushite:    #A8551F;

  --ui:   'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sombre : jamais imposé par le réglage du système, uniquement sur demande.
   Le bouton du menu pose .dark-mode sur <body> ; les jetons posés là sont
   hérités par toute la page, donc aucune règle de composant à réécrire.
   ────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;

  --fond:            #13181B;
  --surface:         #1A2125;
  --surface-2:       #202A2E;
  --surface-3:       #273237;
  --card-bg:         #1A2125;
  --bg-gradient:     #13181B;
  --head-bg:         #202A2E;

  --encre:           #ECF1F2;
  --text-heading:    #ECF1F2;
  --heading-color:   #ECF1F2;
  --text-body:       #B2C0C5;
  --text-muted:      #829197;
  --text-subtle:     #6E7D83;
  --text-inverse:    #13181B;

  --border:          #2A353A;
  --border-light:    #222C31;
  --border-strong:   #3B484E;
  --gray-border:     #2A353A;
  --gray-light:      #202A2E;
  --gray-text:       #829197;
  --gray-dark:       #B2C0C5;

  --primary:         #D9894D;
  --primary-color:   #D9894D;
  --primary-dark:    #C57639;
  --primary-light:   #2A1E15;
  --primary-bg:      #2A1E15;
  --primary-gradient:#D9894D;
  --accent:          #D9894D;
  --accent-fond:     #2A1E15;

  --indigo-color:    #D9894D;
  --indigo-bg:       #2A1E15;
  --indigo-border:   #4A3524;
  --purple-color:    #D9894D;
  --purple-bg:       #2A1E15;
  --purple-border:   #4A3524;

  --success:         #5FB487;  --success-color: #5FB487;
  --success-bg:      #16271F;  --success-bg-alpha: rgba(95,180,135,.14);
  --success-border:  #2C4F3C;  --success-text:  #9BD6B6;

  --warning:         #D9AE5C;
  --warning-bg:      #2A2314;  --warning-border: #4D4024;  --warning-text: #EBD3A0;

  --danger:          #DB8478;  --danger-color: #DB8478;
  --danger-bg:       #2B1A18;  --danger-bg-alpha: rgba(219,132,120,.14);
  --danger-border:   #4F302C;  --danger-text:  #EDB3AB;

  --info:            #6FAFCB;  --info-color: #6FAFCB;
  --info-bg:         #17262D;  --info-bg-alpha: rgba(111,175,203,.14);
  --info-border:     #2E4752;  --info-text:  #A8CFDF;

  --shadow-color:    0, 0, 0;
  --shadow-xs:       0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:       0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:       0 2px 6px rgba(0,0,0,.45), 0 8px 20px -10px rgba(0,0,0,.6);
  --shadow-lg:       0 4px 10px rgba(0,0,0,.5), 0 16px 36px -16px rgba(0,0,0,.7);

  --glass-bg:          rgba(26,33,37,.88);
  --glass-bg-strong:   rgba(26,33,37,.96);
  --glass-border:        #2A353A;
  --glass-border-subtle: #222C31;
  --glass-shadow:        0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.6);
  --glass-shadow-hover:  0 2px 6px rgba(0,0,0,.5), 0 16px 32px -16px rgba(0,0,0,.7);

  --t-urate:       #8A909C;
  --t-urique:      #E0A050;
  --t-struvite:    #B9A98A;
  --t-cystine:     #CFBD68;
  --t-weddellite:  #6FA0AE;
  --t-whewellite:  #5A7E8A;
  --t-carbapatite: #A79BC0;
  --t-brushite:    #D9894D;
}

/* ──────────────────────────────────────────────────────────────────────────
   Corrections de fond : ce que les jetons seuls ne peuvent pas rattraper.
   ────────────────────────────────────────────────────────────────────────── */

/* Le fond de page était un dégradé à quatre arrêts. */
body, .page-bg, .app-bg {
  background: var(--fond) !important;
  color: var(--text-body);
}

/* Le texte en dégradé du titre devient de l'encre pleine. */
.gradient-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--encre) !important;
}

/* Les boutons d'accent perdent leur dégradé. */
.btn-primary, .btn-purple, .btn-indigo {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover, .btn-purple:hover, .btn-indigo:hover {
  background: var(--primary-dark) !important;
}

/* Cibles tactiles : rien sous 44 px sur les actions. */
.btn, .btn-primary, .btn-purple, .btn-indigo, button.btn { min-height: 44px; }

/* Focus visible partout, au clavier comme à la souris. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Les chiffres s'alignent en colonne. */
.val, .mono, td[data-num], .tabular { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* ──────────────────────────────────────────────────────────────────────────
   Les utilitaires Tailwind indigo, purple et violet restent écrits dans les
   gabarits. Plutôt que de réécrire cent usages, on les redirige ici vers
   l'échelle cuivre : la feuille se charge après le CDN, elle l'emporte.
   ────────────────────────────────────────────────────────────────────────── */
.bg-indigo-50,  .bg-purple-50   { background-color: #FCF3EB !important; }
.bg-indigo-100, .bg-purple-100  { background-color: #F6E4D4 !important; }
.bg-indigo-600, .bg-purple-600  { background-color: var(--primary) !important; }
.hover\:bg-indigo-50:hover      { background-color: #FCF3EB !important; }
.hover\:bg-indigo-700:hover     { background-color: var(--primary-dark) !important; }

.text-indigo-300 { color: #DCA87B !important; }
.text-indigo-400 { color: #C4793F !important; }
.text-indigo-500,
.text-indigo-600,
.text-purple-700 { color: var(--primary) !important; }
.text-indigo-700,
.text-indigo-800,
.text-indigo-900,
.text-purple-800,
.text-purple-900 { color: var(--primary-dark) !important; }
.hover\:text-indigo-600:hover { color: var(--primary) !important; }

.border-indigo-100, .border-purple-100 { border-color: #F2DECB !important; }
.border-indigo-200, .border-purple-200 { border-color: #E8CDB6 !important; }
.border-indigo-500                      { border-color: var(--primary) !important; }
.hover\:border-indigo-500:hover         { border-color: var(--primary) !important; }
.focus\:ring-indigo-500:focus           { --tw-ring-color: var(--primary) !important; }

/* Carte d'information : un filet cuivre a gauche suffit a marquer la section.
   Le pointille et l'aplat beige d'origine faisaient lire un dossier valide
   comme un brouillon, et noyaient l'accent sur de grandes surfaces. */
.info-card {
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--primary) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.15rem !important;
}