/* Rituel — le système volumétrique (« Spatial UI », README §5).
   Tout élément d'interface a une épaisseur. Trois recettes, reprises aux
   valeurs exactes de la passation : ne pas arrondir sur une grille de 4 ou 8. */

/* ── 5.1 Carte claire ──────────────────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(176deg, rgba(255,255,255,.92), rgba(246,240,231,.62));
  border-radius: 28px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 -3px 4px rgba(46,43,37,.07),
    0 2px 0 rgba(214,204,188,.7),
    0 4px 0 rgba(199,188,170,.38),
    0 18px 30px -14px rgba(46,43,37,.28),
    0 40px 58px -28px rgba(46,43,37,.3);
  transition: box-shadow 320ms var(--ease-out);
}
/* L'élévation est animée en box-shadow UNIQUEMENT : les transform sont
   composés en JS dans une seule écriture (README §5.1 et §7.4). */
.card:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 -3px 4px rgba(46,43,37,.07),
    0 3px 0 rgba(214,204,188,.7),
    0 6px 0 rgba(199,188,170,.38),
    0 26px 42px -16px rgba(46,43,37,.34),
    0 56px 78px -30px rgba(46,43,37,.36);
}
.card--rail { border-radius: 30px; max-width: 372px }

/* Carte nuit : même volume, l'ordre des lumières s'inverse. */
.card--night {
  background: linear-gradient(176deg, rgba(49,55,35,.93), rgba(37,41,25,.9));
  color: var(--night-ink);
  box-shadow:
    inset 0 1px 0 rgba(239,241,229,.16),
    inset 0 0 0 1px rgba(239,241,229,.08),
    0 2px 0 rgba(20,23,14,.8),
    0 4px 0 rgba(15,17,10,.5),
    0 22px 38px -16px rgba(12,14,8,.6),
    0 48px 70px -30px rgba(12,14,8,.55);
}
.card--night .kicker { color: var(--color-accent-2-300) }

/* ── 5.2 Bouton : interrupteur mécanique ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 700;
  border-radius: var(--radius-pill); padding: 17px 32px;
  transition: box-shadow 160ms var(--ease-out);
}
.btn--primary {
  background: linear-gradient(180deg, #a5854f, #8c6a3f 56%, #7c5c36);
  color: var(--color-neutral-100);
  text-shadow: 0 -1px 0 rgba(38,28,14,.5);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 4px rgba(38,28,14,.4),
    0 1px 0 #6e5230, 0 2px 0 #634828, 0 3px 0 #59401f, 0 4px 0 #4e3a22,
    0 7px 12px rgba(46,43,37,.3), 0 20px 32px -12px rgba(46,43,37,.36);
}
/* À l'appui, les quatre paliers d'extrusion disparaissent : le bouton s'enfonce. */
.btn--primary:active {
  box-shadow:
    inset 0 4px 8px rgba(38,28,14,.52), inset 0 -1px 0 rgba(255,255,255,.1),
    0 1px 0 #4e3a22, 0 2px 4px rgba(46,43,37,.24);
}
.btn--secondary {
  background: linear-gradient(180deg, #fdfaf5, #f3ece1 58%, #eae1d3);
  color: var(--color-accent-800);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 4px rgba(46,43,37,.08),
    0 1px 0 #ded4c4, 0 2px 0 #d2c7b5, 0 3px 0 #c6bba8, 0 4px 0 #bbb09c,
    0 7px 12px rgba(46,43,37,.18), 0 20px 32px -12px rgba(46,43,37,.22);
}
.btn--secondary:active {
  box-shadow:
    inset 0 4px 8px rgba(46,43,37,.2), inset 0 -1px 0 rgba(255,255,255,.5),
    0 1px 0 #bbb09c, 0 2px 4px rgba(46,43,37,.16);
}
.btn--sm { font-size: 14px; padding: 12px 22px }

/* **Le libellé garde sa couleur au survol.** `brand.css` pose
   `a:hover { color: var(--color-accent) }` — une règle à 0,1,1 qui l'emporte
   sur `.btn--primary` (0,1,0). Un bouton est un `<a>` : au survol son texte
   passait en bronze **sur un aplat bronze**, et il ne restait que la gélule.
   `brand.css` est la source de vérité de la passation et ne se modifie pas :
   on reprend la main ici, à spécificité supérieure. Même piège que le
   `:not(.btn)` de la navigation dans `chrome.css`. */
a.btn--primary:hover { color: var(--color-neutral-100) }
a.btn--secondary:hover { color: var(--color-accent-800) }

/* ── 5.3 Typographie gravée / embossée ─────────────────────────────────── */
.engraved {
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 3px 0 rgba(255,255,255,.4),
               0 6px 12px rgba(46,43,37,.2);
}
.engraved--body { text-shadow: 0 1px 0 rgba(255,255,255,.7) }
/* Sur fond nuit l'ordre s'inverse : l'ombre dure passe au-dessus. */
.engraved--night { text-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(239,241,229,.16) }

/* ── Veils sur fond nuit : les seuls paliers autorisés (brand.css) ──────── */
.night-panel {
  background: linear-gradient(176deg, rgba(49,55,35,.93), rgba(37,41,25,.9));
  color: var(--night-ink);
  border-radius: var(--radius-lg);
}