/* matiere.css — les TROIS régimes de matière du contrat. Aucun autre.
   Chargé après tokens.css, avant app.css. Consomme les tokens de tokens.css.
   .glass = régime de travail · .chrome = les 6 moments · .paper = la lecture.
   Additif : les vues Phase 3 posent ces classes ; le rendu actuel n'en dépend pas. */

/* ============ VERRE — arête chromée + spéculaire 135° UNIQUE + double ombre ============ */
.glass{
  position: relative; isolation: isolate;
  background-color: var(--glass-fill);
  border-radius: var(--r);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 0 var(--chrome-hi) inset,      /* arête haute — le liseré 1px qui fait 60% du « ça fait cher » */
    0 -1px 0 0 var(--chrome-lo) inset,     /* arête basse */
    0 0 0 1px var(--glass-line),           /* trait de contour */
    0 1px 2px var(--sh-contact),           /* ombre de contact — l'objet touche */
    0 14px 40px -12px var(--sh-diffuse);   /* ombre de diffusion — l'objet flotte */
  transition: box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.glass::before{                            /* l'asset éventuel — JAMAIS sur l'élément (le filter mangerait le texte) */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background: var(--glass-img, none) center/cover no-repeat;
  filter: brightness(1.5) contrast(1.06);
}
.glass::after{                             /* le spéculaire — 135°, TOUJOURS, une seule source */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(135deg,
      var(--glass-spec-1) 0%,
      var(--glass-spec-2) 28%,
      transparent 52%),
    radial-gradient(120% 80% at 8% 0%, var(--chrome-tint) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.glass:hover{
  transform: translateY(-1px);             /* 1px. Pas 4. Pas de scale. Pas de rebond. */
  box-shadow:
    0 1px 0 0 var(--chrome-hi) inset,
    0 -1px 0 0 var(--chrome-lo) inset,
    0 0 0 1px var(--glass-line),
    0 1px 2px var(--sh-contact),
    0 20px 52px -12px var(--sh-diffuse);
}
/* Cartes de LISTE : arête + spéculaire + fond opaque, mais AUCUN backdrop-filter (20 cartes floutées = jank). */
.glass--flat{ backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--surface-solid); }

@media (prefers-reduced-motion: reduce){ .glass{ transition: none } .glass:hover{ transform: none } }

/* ============ CHROME — conic + grain + réfraction. UN SEUL animé à l'écran. ============ */
@property --chrome-angle{ syntax:'<angle>'; initial-value:210deg; inherits:false; }
@keyframes aroz-chrome-drift{ to{ --chrome-angle: 570deg } }   /* +360° */

.chrome{
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  background:
    conic-gradient(from var(--chrome-angle) at 30% 20%,
      oklch(0.92 0.02 250) 0deg,
      oklch(0.35 0.01 250) 60deg,
      oklch(0.98 0.01 90)  120deg,      /* le « coup de blanc » — l'accroche du miroir */
      oklch(0.28 0.02 28)  190deg,
      oklch(0.62 0.11 28)  240deg,      /* l'oxblood entre dans le métal — la signature AROZ */
      oklch(0.88 0.03 200) 300deg,
      oklch(0.92 0.02 250) 360deg);
  filter: contrast(1.12) saturate(1.05);
  animation: aroz-chrome-drift 24s linear infinite;   /* 24s/tour : le chrome respire, il ne tourne pas */
}
.chrome::before{                         /* réfraction du fond derrière */
  content:""; position:absolute; inset:-20%; z-index:-1;
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  filter: url(#avRefract);               /* filtre SVG déjà présent dans le shell */
}
.chrome::after{                          /* grain — ce qui fait lire du métal et non du plastique */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: var(--noise-64); background-size: 64px 64px;
  opacity: .06; mix-blend-mode: overlay;
}
.chrome:hover{ animation-duration: 12s }  /* la matière réagit à la présence — seul moment perceptible */
@media (prefers-reduced-motion: reduce){
  .chrome{ animation: none; --chrome-angle: 210deg }   /* fixe, mais toujours beau */
}

/* ============ PAPIER — opaque, zéro effet, lisibilité verrouillée ============ */
.paper{
  background: var(--surface-solid);      /* OPAQUE */
  backdrop-filter: none; -webkit-backdrop-filter: none;   /* explicitement désactivé */
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 2px var(--sh-contact);
}
.paper *{ text-shadow: none }