/* Clairval Fiduciaire — thème */
:root { --font: "Source Sans", system-ui, sans-serif; --fg: #1d2a44; --bg: #f4efe6; --radius: 10px; --accent: #1d2a44; --accent-fg: #fff; --accent-ink: #1d2a44;
  --btn-line: #d8cdb8; --btn-bg: #fffdf8; --btn-fg: #1d2a44; --btn-hover-bg: #b08d57; --btn-hover-fg: #fff; --btn-radius: 8px; }
.ledger { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.face--front { background: #1d2a44; color: #f4efe6; display: flex; flex-direction: column; justify-content: center; padding: 8% 9%; }
.face--front::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #b08d57; }
.f-in { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: center; }
.mark { width: 64px; height: 64px; grid-row: span 2; }
.brand { margin: 0; font-family: "Cormorant", serif; font-weight: 600; font-size: clamp(2.2rem, 6.4vw, 3rem); line-height: .95; letter-spacing: .01em; }
.brand span { display: block; font-family: "Source Sans", sans-serif; font-size: .3em; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: #b08d57; margin-top: 10px; }
.sub { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(176, 141, 87, .45); font-size: .88rem; letter-spacing: .06em; color: #cfd5e2; }
.place { position: absolute; right: 9%; bottom: 8%; margin: 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #b08d57; }
.face--back { background: #fffdf8; color: #1d2a44; padding: 7% 8%; display: flex; border: 1px solid #e3d9c6; }
.b-in { display: flex; flex-direction: column; justify-content: space-between; width: 100%; gap: 10px; }
.who { margin: 0; font-family: "Cormorant", serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.role { margin: 4px 0 0; font-size: .8rem; color: #8a6d3e; letter-spacing: .04em; }
.prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.prices li { display: flex; align-items: baseline; gap: 8px; }
.prices li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted #c9bba1; }
.prices b { order: 2; font-weight: 600; white-space: nowrap; }
.contact { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid #e3d9c6; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 3px 16px; color: #4a5568; }
.contact a { text-decoration: none; color: #1d2a44; font-weight: 600; border-bottom: 1px solid #b08d57; }
@media (max-width: 520px) {
  .face--front { justify-content: flex-start; padding-top: 26%; }
  .f-in { grid-template-columns: 1fr; row-gap: 16px; }
  .mark { grid-row: auto; }
  .brand { font-size: 3rem; }
  .place { left: 9%; right: auto; }
  .face--back { padding: 13% 10%; }
  .prices { gap: 10px; }
  .prices li { display: grid; gap: 0; }
  .prices li::after { display: none; }
  .prices b { color: #8a6d3e; }
  .contact { flex-direction: column; gap: 8px; }
}