/* Contact page — two-column layout: inquiry panel (left) and document
   previews (right). Colors run through the theme variables so dark mode
   matches the mockup (white outlines on black) and light mode inverts
   cleanly. The input zones use a fixed blue accent in both themes. */

:root {
  --contact-blue: #3FC1F0;
  --contact-green: #2BFFA0;
  /* Placeholder ornamental/display font for the post-send playground
     box — swap in the custom font later by changing this one variable. */
  --font-playground: 'Bungee Shade', 'Comic Sans MS', cursive;
}

.contact-main {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

/* Single column by default; two columns from the desktop breakpoint up.
   (Mobile layout untouched for now — it just stacks.) */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* ---- LEFT: inquiry panel ---- */

.contact-panel {
  border: 1px solid var(--color-fg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Solid page background + own stacking context: the bee texture
     (z-index 1) can never show through or paint over the form. */
  background: var(--color-bg);
  position: relative;
  z-index: 2;
}

.contact-panel-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-caption);
  border-bottom: 1px solid var(--color-fg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

/* Wrapper around the three blue zones; the playground box overlays it.
   Its height gets locked by JS at send time so the green box fills the
   exact same footprint the fields occupied. */
.contact-fields {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: gap 0.3s ease-out;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: gap 0.3s ease-out, flex-grow 0.3s ease-out;
}

.contact-field label {
  font-size: var(--font-caption);
  max-height: 2em;
  overflow: hidden;
  transition: opacity 0.15s ease-out, max-height 0.3s ease-out;
}

.contact-field input,
.contact-field textarea {
  font-family: var(--font-mono);
  font-size: var(--font-body);
  color: #0A0A0A;
  background: var(--contact-blue);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  width: 100%;
  transition: background-color 0.3s ease-out, color 0.2s ease-out;
}

.contact-field textarea {
  resize: vertical;
  min-height: 200px;
}

/* ---- Sent state: blue zones merge into one green box ----
   Labels fade + collapse, gaps close, backgrounds turn green; the
   message field grows to absorb the freed space so the block keeps its
   footprint. The playground overlay then fades in on top (~500ms total,
   sequenced by JS). */

.contact-form.is-sent .contact-fields {
  gap: 0;
}

.contact-form.is-sent .contact-field {
  gap: 0;
}

.contact-form.is-sent .contact-field:nth-last-of-type(1) {
  flex-grow: 1;
}

.contact-form.is-sent .contact-field:nth-last-of-type(1) textarea {
  flex-grow: 1;
  transition: background-color 0.3s ease-out, color 0.2s ease-out, flex-grow 0.3s ease-out;
}

.contact-form.is-sent .contact-field label {
  opacity: 0;
  max-height: 0;
}

.contact-form.is-sent .contact-field input,
.contact-form.is-sent .contact-field textarea {
  background: var(--contact-green);
  color: transparent;
  pointer-events: none;
}

/* ---- Green playground box (post-send) ---- */

.contact-playground {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--contact-green);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.contact-playground[hidden] {
  display: none;
}

.contact-playground.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.contact-playground-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  color: var(--contact-blue);
  font-family: var(--font-playground);
  font-size: 2.7rem; /* 1.5rem × 1.8 */
  line-height: 1.2;
}

.contact-playground-input:focus-visible {
  outline: none;
}

.contact-playground-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  color: #0A0A0A;
}

/* Sent pill: label swapped to "Merci beaucoup de contacter →" and the
   button chrome dissolves — background, border and padding melt away so
   it reads as plain text, not a clickable button. */
.contact-form .contact-pill {
  transition:
    background-color 0.3s ease-out,
    border-color 0.3s ease-out,
    color 0.3s ease-out,
    padding 0.3s ease-out;
}

.contact-pill.is-sent,
.contact-pill:disabled {
  pointer-events: none;
  cursor: default;
  color: var(--color-fg);
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Validation notice: small rounded rectangle shown when a field is
   empty and the send does nothing. */
.contact-form-error {
  align-self: flex-start;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  color: var(--color-fg);
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

/* ---- Shared pill button ---- */

.contact-pill {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  color: var(--color-bg);
  background: var(--color-fg);
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  cursor: pointer;
}

.contact-pill:hover,
.contact-pill:focus-visible {
  color: var(--color-fg);
  background: transparent;
}

/* ---- Bee heads texture (carried over from index) ----
   Same cluster arrangement as index.css; the container is already
   anchored to the right edge by bee-heads.css. On load it wipes in from
   the right — fast and crisp. Heads are non-interactive here so they
   never block the doc tabs or download pill underneath. */

.bee-head-1 { top: 28%; width: 669px; --base-rotation: -14deg; }
.bee-head-2 { top: 30%; width: 489px; --base-rotation: 9deg; }
.bee-head-3 { top: 26%; width: 797px; --base-rotation: 16deg; }
.bee-head-4 { top: 32%; width: 591px; --base-rotation: -19deg; }
.bee-head-5 { top: 29%; width: 900px; --base-rotation: 5deg; }
.bee-head-6 { top: 31%; width: 694px; --base-rotation: -7deg; }

.bee-heads-container .bee-head {
  pointer-events: none;
}

@keyframes bee-wipe-in {
  from { transform: translate(110%, -50%); }
  to   { transform: translate(0, -50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .bee-heads-container {
    animation: bee-wipe-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* ---- RIGHT: documents ---- */

.contact-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Same stacking treatment as the form panel — above the bee texture. */
  position: relative;
  z-index: 2;
}

.contact-docs-tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-size: var(--font-caption);
}

.contact-docs-tab {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  color: var(--color-fg);
  background: none;
  border: none;
  padding: 0 0 2px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.contact-docs-tab.is-active {
  border-bottom-color: var(--color-fg);
}

/* Align the download pill's left edge with the paper's left edge (the
   paper is centered at max 520px; the margin bridges the difference). */
.contact-docs .contact-pill {
  margin-left: calc((100% - min(100%, 520px)) / 2);
}

/* Paper preview — textured backdrop shows until real document images
   (assets/cv.webp, assets/lettre.webp) are dropped in. The two imgs are
   stacked; .is-shown controls which one is visible, with a ~300ms
   crossfade on desktop and an instant swap on mobile (site rule: no
   animation on mobile). */
.contact-docs-preview {
  position: relative;
  width: min(100%, 520px);
  align-self: center;
  aspect-ratio: 0.77;
  border-radius: 2px;
  overflow: hidden;
  background-color: #E9E7E3;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.014) 0px, transparent 1px, transparent 2px);
}

.contact-docs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-docs-img.is-shown {
  opacity: 1;
}

@media (max-width: 599px) {
  .contact-docs-img {
    transition: none;
  }

  /* Site rule: no animations on mobile — the merge is an instant swap. */
  .contact-fields,
  .contact-field,
  .contact-field label,
  .contact-field input,
  .contact-field textarea,
  .contact-playground,
  .contact-form .contact-pill {
    transition: none;
  }
}

/* ---- Desktop layout ----
   Kept LAST in the file: these override the base (stacked) rules above,
   and with equal specificity the later rule must win. */
@media (min-width: 1024px) {
  /* Two plain columns, both top-aligned: the panel's top border and the
     paper's top edge sit on the same line by construction. The tabs are
     lifted out of the flow (absolute, anchored to the paper's top-right)
     so they float above that line without pushing the paper down. */
  .contact-columns {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    align-items: start;
  }

  .contact-docs {
    position: relative;
  }

  /* One horizontal row of labels, hugging the alignment line from above */
  .contact-docs-tabs {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: var(--space-1);
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }
}

/* ---- Bee heads on the contact page ----
   Intentionally NO overrides: the texture uses the bee-heads.css default
   — anchored to the RIGHT edge, bleeding off at right: -180px, identical
   to the index. It sits at z-index 1 beneath the form panel and the
   docs column (both opaque, z-index 2 above), so it only shows in the
   gaps around the content. Static, no travel animation; hidden on
   mobile via bee-heads.css. */