/* ============================================================================
   Contact Us — rebuilt 2026-08-22 from contact/wireframe.html, approved that
   morning. Replaces the 2026-08-21 bento, which was three tiles and a black
   monolith and had nothing in common with any other route on the site.
   ---------------------------------------------------------------------------
   THE INVARIANT, and it is the reason this file exists. Founder, 2026-08-22:
   "pour creer cette coherence visuel ca vient surtout de la headline, sa taille
   et son emplacement qui doit rester constant."

   So the headline is not styled here in the sense of being designed here. It is
   COPIED from blog.css `.bmast` / `.bmast a`, declaration for declaration:

       font-size       clamp(1.85rem, 2.9vw, 2.6rem)
       font-weight     680
       letter-spacing  -0.042em
       line-height     1
       padding-bottom  clamp(12px, 1.4vw, 20px) + 1px hairline, full width
       shell padding   clamp(84px, 8.4vw, 118px) var(--gutter) 0
       --gutter        clamp(18px, 2.5vw, 38px)  <- .topbar's own left/right

   If any of those six change on /blog/, they change here in the same pass, or
   the coherence this page was rebuilt for is gone. Nothing on this page may
   move, resize or sit above the headline — the pill that used to ("Contact",
   directly over a headline reading "Contact Us") was deleted on sight, 2026-08-22:
   a label that repeats its own title carries nothing. The same pill on About is
   the same defect and is queued for the same treatment.

   WHAT IS *NOT* BORROWED FROM /blog/: its rail-and-pane mechanism. A two-pane
   reader answers a page with two jobs — navigate an archive, read an article.
   A contact page has one job. Porting the mechanism was the first pass and it
   was rejected on sight the same morning ("je t'ai pas dit de copier le layout
   en entier, c'est tout de meme une contact us page").

   THE LAYOUT is the founder's own call: two columns, the things you fill in on
   the left, a small styled picture on the right.

   THE PICTURE IS SMALL AND TOP-ANCHORED. `max-height: 56%` is deliberate: run
   it to the full column height and the picture becomes the subject of the page,
   which is the form. The three facts sit under it rather than in a column of
   their own — they are read once each and do not deserve a third of the width.

   FIELDS ARE UNDERLINES, NEVER BOXES. A filled input box is a card by another
   name and would re-import exactly the vocabulary this rebuild deletes. They
   get their own line token, a notch darker than `--line`, so a control reads as
   a control and not as a divider.

   BANNED HERE, as on /blog/: the mono `--font-label` and UPPERCASE micro-labels
   (rejected on sight 2026-08-20). The wireframe uses both because a wireframe is
   allowed to look like a wireframe. The facts' labels are sentence-case sans at
   eyebrow weight, the same treatment as the blog rail's "Categories".

   Chrome untouched: no background override, no topbar override, no radius of
   its own on `.hero`. `main.css` owns the ground, the grey card and the bar; a
   route owns its layout, not its skin.
   ========================================================================== */

.contact-doc {
  /* Both EXACTLY blog.css. Do not round either to a nicer number. */
  --gutter: clamp(18px, 2.5vw, 38px);
  --shell: 1660px;
  /* A notch darker than --line (0.1): a field is a control, a divider is not. */
  --field-line: rgba(26, 26, 26, 0.2);
}

.contact-doc .hero { display: flex; flex-direction: column; min-height: 0; }

/* The top padding clears the absolutely-positioned topbar, the same move
   .bshell and about.css make. It is dropped at 780, where main.css puts the
   bar back in the flow as a sticky element and the padding becomes a hole. */
.cshell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(84px, 8.4vw, 118px) var(--gutter) 0;
}

/* ---- THE HEADLINE. blog.css `.bmast`, verbatim. -------------------------- */

.cmast {
  flex: none;
  margin: 0;
  padding-bottom: clamp(12px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.9vw, 2.6rem);
  font-weight: 680;
  letter-spacing: -0.042em;
  line-height: 1;
}

/* ---- two columns: what you fill in | the picture -------------------------- */

.cbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(300px, 27vw, 430px));
  gap: clamp(28px, 4vw, 72px);
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(22px, 2.6vw, 40px) 0 clamp(20px, 2.2vw, 34px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.ccol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.cdek {
  max-width: 62ch;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  color: var(--ink-2);
  font-size: clamp(0.86rem, 0.96vw, 1.02rem);
  font-weight: 450;
  letter-spacing: -0.012em;
  line-height: 1.55;
}

/* ---- the form ------------------------------------------------------------ */

/* The message row takes the slack. Everything above it is fixed height, the
   textarea absorbs whatever the window has left, and the send row sits on the
   floor — so no run of empty stage opens under the button. "Gros espaces vides"
   is a named red flag and it is what killed the previous version of this page. */
.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(20px, 2.3vw, 34px) clamp(24px, 3vw, 52px);
  flex: 1 1 auto;
  min-height: 0;
}

.cfield { display: flex; flex-direction: column; min-width: 0; }
.cfield--wide { grid-column: 1 / -1; min-height: 0; }

.cfield > label {
  margin-bottom: 9px;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 520;
  letter-spacing: -0.012em;
}

.cfield > label i { font-style: normal; color: var(--ink-3); }

.cfield > input,
.cfield > select,
.cfield > textarea {
  appearance: none;
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: -0.014em;
  transition: border-color 180ms var(--ease-ui);
}

.cfield > textarea {
  height: 100%;
  min-height: 72px;
  resize: none;
  line-height: 1.5;
}

.cfield > input::placeholder,
.cfield > textarea::placeholder { color: var(--ink-3); }

.cfield > input:hover,
.cfield > select:hover,
.cfield > textarea:hover { border-bottom-color: rgba(26, 26, 26, 0.34); }

.cfield > input:focus,
.cfield > select:focus,
.cfield > textarea:focus {
  outline: 0;
  border-bottom-color: var(--ink);
}

/* Native select arrows differ per platform and none of them match a hairline
   field; `appearance: none` plus a drawn chevron is the only way to keep the
   four controls reading as one set. */
.cfield--select { position: relative; }

.cfield--select::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 16px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}

.cformfoot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  flex-wrap: wrap;
}

.csend {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cta-apple-bg);
  color: var(--cta-apple-fg);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 640;
  letter-spacing: -0.016em;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), transform 200ms var(--ease-ui);
}

.csend:hover { background: var(--cta-apple-bg-hover); transform: translateY(-1px); }
.csend:active { transform: translateY(0); }
.csend:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cnote {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-3);
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.cnote a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.cnote a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---- the picture --------------------------------------------------------- */

/* The blog's `.slot`: a flat neutral field with a hairline, no label and no
   hatch. Production is not a wireframe. Dropping an <img> inside is the whole
   act of publishing the photograph later — no CSS changes, no markup around it.
   Founder call 2026-08-21: "tu laisses les images toujours en vide". */
.cslot {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 5;
  max-height: 56%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(14px, 1.2vw, 18px);
  background: var(--paper);
}

.cslot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- the three facts ----------------------------------------------------- */

.cfacts { margin: clamp(20px, 2.2vw, 30px) 0 0; padding: 0; list-style: none; }

.cfacts li { padding: clamp(10px, 1.1vw, 15px) 0; border-top: 1px solid var(--line); }
.cfacts li:last-child { border-bottom: 1px solid var(--line); }

/* Sentence-case sans at eyebrow weight — the blog rail's "Categories"
   treatment. The mono uppercase micro-label the wireframe uses is banned. */
.cfacts b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1;
}

.cfacts span {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 520;
  letter-spacing: -0.016em;
  line-height: 1.4;
}

.cfacts a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.cfacts a:hover { text-decoration-color: var(--ink); }
.cfacts a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---- the honeypot -------------------------------------------------------- */

/* Off-screen rather than `display: none`: the cheap bots that skip hidden
   inputs are exactly the ones this catches, so it has to be a real, focusable,
   fillable field that no human ever meets. `aria-hidden` and `tabindex=-1` on
   the markup keep it away from screen readers and the tab order. */
.chp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- the two end states -------------------------------------------------- */

/* One line each, in place of the button row. No tick, no green, no "Thanks!" —
   the page said one working day and the confirmation repeats the promise
   instead of celebrating a form submission. */
.csent, .cfail { display: none; }
.cform[data-state="sent"] .cformfoot,
.cform[data-state="failed"] .cformfoot { display: none; }
.cform[data-state="sent"] .csent { display: block; }
.cform[data-state="failed"] .cfail { display: block; }
.cform[data-state="sent"] .csent { color: var(--ink); }

/* --------------------------------------------------- short desktop window -- */

@media (min-width: 901px) and (max-height: 830px) {
  .cshell { padding-top: 98px; }
  .cdek { margin-bottom: clamp(16px, 1.8vw, 24px); font-size: clamp(0.82rem, 0.88vw, 0.94rem); }
  .cform { gap: clamp(15px, 1.7vw, 24px) clamp(24px, 3vw, 52px); }
  .cslot { max-height: 48%; }
}

/* --------------------------------------------------------------- mobile ---- */

@media (max-width: 900px) {
  .contact-doc { overflow: clip visible; }
  .contact-doc .site-frame { height: auto; min-height: 100svh; grid-template-rows: minmax(0, 1fr) auto; }
  .contact-doc .hero { overflow: visible; }

  .cshell { padding: clamp(76px, 12vw, 96px) 21px 0; }

  .cbody {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 34px);
    padding: clamp(20px, 5vw, 28px) 0 clamp(28px, 6vw, 38px);
    overflow: visible;
    scrollbar-gutter: auto;
  }

  /* The form stays first: it is what the page is for. The picture and the
     facts follow it, they do not gate it. */
  .cform { grid-template-columns: 1fr; grid-template-rows: none; gap: clamp(18px, 4.5vw, 24px); }
  .cfield > textarea { height: auto; min-height: 128px; }
  .cslot { aspect-ratio: 16 / 10; max-height: none; }
}

@media (max-width: 780px) {
  .cshell { padding-top: clamp(14px, 3.5vw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .cfield > input, .cfield > select, .cfield > textarea, .csend { transition: none; }
  .csend:hover { transform: none; }
}