/* css/xp-contact.css — CONTACT, a flat brand page in the client's charter (on css/xp-page.css + css/shop.css +
   css/shop-content.css). No WebGL: a blanc cassé header with, on wide screens, the shop's sage arch (gen:ct-arch: the
   logo in blanc cassé, the baseline, the street, the hours; a palm's shadow on the wall, a sage heart); then square cards
   with a hairline: the order and the facts side by side, the « autre demande » under them. */

html.xpp-contact {
  --ct-gutter: var(--sc-gutter, 20px);
  --ct-max: 1240px;
  background: var(--field);
}
html.xpp-contact body { background: var(--field); color: var(--ink); }

/* ---------- hero ---------- */
.ct { position: relative; overflow-x: clip; } /* the palm's shadow runs off the right edge */
.ct-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; box-sizing: border-box; width: min(var(--ct-max), 100% - 2 * var(--ct-gutter));
  margin: 0 auto; padding: calc(var(--top-h, 84px) + clamp(32px, 6vh, 72px)) 0 clamp(36px, 6vh, 64px); }
.ct-hero > * { grid-column: 1; }
.ct-kicker { justify-self: start; margin: 0 0 20px; padding: 9px 14px 8px calc(14px + var(--tr-label)); background: var(--sauge); color: var(--ink);
  font: 400 var(--t-label)/1.2 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.ct-title { margin: 0; max-width: 14ch; font: 400 var(--t-display)/1.03 var(--font-sans); letter-spacing: var(--tr-display); color: var(--ink); text-wrap: balance; }
.ct-title em { font-style: normal; }
.ct-lead { margin: 22px 0 0; max-width: 46ch; font: 400 var(--t-lead)/1.6 var(--font-sans); color: var(--ink-2); }
.ct-status { margin-top: 18px; }
.ct-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* the shop's sign: a sage arch (a doorway in the wall, lit from the top right), wide screens only */
.ct-arch { display: none; }
@media (min-width: 900px) {
  .ct-hero { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(320px, 34vw, 460px)); column-gap: clamp(32px, 6vw, 112px); }
  .ct-arch { position: relative; display: grid; grid-column: 2; grid-row: 1 / span 8; align-self: stretch; min-height: 460px; isolation: isolate; }
  .ct-arch__niche { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 30% 10% 18%; border-radius: var(--r-niche);
    background: var(--sauge); text-align: center;
    box-shadow: inset 26px 30px 44px -20px rgb(61 69 64 / .34), inset -2px 0 0 rgb(255 255 255 / .55); }
  .ct-arch__logo { width: min(78%, 250px); height: auto; color: var(--blanc-casse); fill: currentColor; }
  .ct-arch__base { padding-left: .3em; font: 400 10.5px/1.3 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
  .ct-arch__street, .ct-arch__hours { font: 400 13px/1.4 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink); }
  .ct-arch__street { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgb(0 0 0 / .22); }
  .ct-arch__palm { position: absolute; z-index: 2; top: -14%; right: -22%; width: 112%; max-width: none; height: auto; opacity: .12; pointer-events: none;
    transform-origin: 96% 2%; animation: ct-sway 13s var(--ease-sine) infinite alternate; }
  .ct-arch__heart { --hs: clamp(110px, 10vw, 150px); z-index: 2; left: -54px; bottom: 6%; transform: rotate(-8deg); }
}
@keyframes ct-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.4deg) translate3d(-8px, 5px, 0); } }

/* ---------- the cards ---------- */
.ct-sheet { display: grid; gap: 16px; width: min(var(--ct-max), 100% - 2 * var(--ct-gutter)); margin: 0 auto; padding-bottom: clamp(24px, 4vh, 48px); }
@media (min-width: 1000px) {
  .ct-sheet { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  .ct-ask { grid-column: 1 / -1; }
}
.ct-sec { box-sizing: border-box; min-width: 0; scroll-margin-top: calc(var(--top-h, 84px) + 12px); }
.ct-card { box-sizing: border-box; padding: clamp(24px, 2.8vw, 40px); background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-family: var(--font-sans); color-scheme: light; }
.ct-card :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ct-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ct-h2 { margin: 0; font: 400 clamp(26px, 2.3vw, 34px)/1.12 var(--font-sans); letter-spacing: -.012em; }
.ct-h2 em { font-style: normal; }
.ct-h2:focus { outline: none; }
.ct-text { margin: 12px 0 0; max-width: 56ch; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- the order ---------- */
.ct-edit { font-size: 15px; }
.ct-lines { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ct-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ct-line__img { width: 52px; height: 52px; object-fit: contain; border-radius: var(--r-niche); background: var(--field-hi); }
.ct-line--coffret .ct-line__img, .ct-line--cup .ct-line__img { object-fit: cover; }
.ct-line__name { margin: 0; font: 400 16px/1.3 var(--font-sans); }
.ct-line__meta { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ct-line__sum { font: 400 16px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-line--cup .ct-line__sum { font-weight: 400; font-size: 14.5px; color: var(--ink-2); white-space: normal; text-align: right; max-width: 9em; }
.ct-sums { display: grid; gap: 4px; padding: 14px 0 0; }
.ct-sum { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.ct-sum--offer { color: var(--accent); }
.ct-sum--total { align-items: baseline; margin-top: 6px; font-size: 12px; letter-spacing: var(--tr-caps); text-transform: uppercase; }
.ct-sum--total strong { font: 400 28px/1 var(--font-sans); letter-spacing: -.01em; text-transform: none; font-variant-numeric: tabular-nums lining-nums; }
.ct-sum__note { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ct-order__go { display: grid; gap: 10px; margin-top: 20px; }
.ct-order__send { width: 100%; min-height: 54px; }
.ct-fine { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ct-order__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ct-order__quick-t { margin: 26px 0 12px; font-size: 15px; color: var(--ink-2); }

/* ---------- the facts ---------- */
.ct-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 20px 0 0; border-top: 1px solid var(--line); }
.ct-fact { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ct-fact__k { font: 400 11.5px/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink); }
.ct-fact__v { display: grid; gap: 4px; justify-items: start; margin: 0; font-size: 16px; line-height: 1.5; }
.ct-fact__v p, .ct-fact__v address { margin: 0; font-style: normal; }
.ct-fact__num { font-variant-numeric: tabular-nums; }
.ct-fact__row { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ct-fact__a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.ct-fact__a .ico { width: 18px; height: 18px; }
.ct-fact__muted { color: var(--ink-2); font-size: 15px; }
.ct-fact__status { margin-top: 2px; }

/* ---------- another request ---------- */
.ct-ask__form { display: grid; gap: 18px; margin-top: 22px; }
.ct-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-l { padding: 0; font: 400 12px/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink); }
.ct-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink-2); }
.ct-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line-ui); border-radius: 0; background: var(--ivoire); color: var(--ink);
  font: 400 16px/1.4 var(--font-sans); }
.ct-input::placeholder { color: var(--ink-2); opacity: 1; }
.ct-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--ink); }
.ct-input[aria-invalid="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
textarea.ct-input { min-height: 96px; resize: vertical; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-err { margin: 0; font: 400 14.5px/1.4 var(--font-sans); color: var(--accent); }
.ct-preview { padding: 16px 18px; background: var(--field-hi); }
.ct-preview__k { margin: 0 0 8px; font: 400 11.5px/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); }
.ct-preview__t { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.ct-ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ct-ask__send { min-height: 52px; }
.ct-ask__send .ico { width: 20px; height: 20px; }

@media (max-width: 559.98px) {
  .ct-hero__cta .cta { flex: 1 1 100%; }
  .ct-facts { grid-template-columns: minmax(0, 1fr); }
  .ct-row { grid-template-columns: minmax(0, 1fr); }
  .ct-order__links .cta { flex: 1 1 auto; }
  .ct-ask__send { flex: 1 1 100%; }
  .ct-ask__actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ct-arch__palm { animation: none; } }