/* =============================================================
   AXIOM GROUP — Page temporaire
   Layout 2 colonnes horizontal, fullscreen sans scroll desktop.
   DA : premium, sobre, suisse. Noir / ivoire / blanc.
   ============================================================= */

:root {
  --ink:        #111110;
  --ink-soft:   #3A3732;
  --ivory:      #F6F4EE;
  --ivory-soft: #E6E2D8;
  --mute:       #9B9890;
  --rule-light: rgba(246, 244, 238, 0.16);
  --rule-faint: rgba(246, 244, 238, 0.10);

  --ff-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ff-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--ivory);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ----- Fond plein écran (image bâtiment) ----------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("assets/background/axiom-building.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay sombre élégant — l'architecture reste perceptible */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(5, 7, 8, 0.55) 0%,
      rgba(5, 7, 8, 0.60) 55%,
      rgba(5, 7, 8, 0.68) 100%);
}

/* ----- Carte centrale horizontale ------------------------------------ */

.temp-card {
  width: min(1120px, 92vw);
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 4vw, 56px);
  padding: clamp(32px, 3.6vw, 48px);
  background: rgba(17, 17, 16, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid var(--rule-light);
  border-radius: 8px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.25);
  animation: card-in 900ms var(--ease) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Colonnes ------------------------------------------------------ */

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

.col--left {
  justify-content: center;
  gap: 22px;
}

.col--right {
  justify-content: center;
}

/* ----- Colonne gauche : message -------------------------------------- */

.logo {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.logo img {
  width: clamp(150px, 12vw, 188px);
  height: auto;
  display: block;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: clamp(18px, 2.4vw, 24px);
  line-height: 1.5;
}

.title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.lede {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.62;
  color: rgba(246, 244, 238, 0.80);
  margin-bottom: clamp(14px, 1.8vw, 20px);
  max-width: 42ch;
}

.badge {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 10px 0;
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
  width: 100%;
  text-align: center;
}

.col__bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-faint);
}

.col__bottom a {
  color: rgba(246, 244, 238, 0.78);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.col__bottom a:hover {
  color: var(--ivory);
  border-bottom-color: var(--rule-light);
}

.sep { color: rgba(246, 244, 238, 0.3); }

/* ----- Alertes succès / erreur (compactes) --------------------------- */

.alert {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 13px 16px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.alert--success {
  background: rgba(246, 244, 238, 0.10);
  border: 1px solid rgba(246, 244, 238, 0.25);
  color: var(--ivory);
}

.alert--error {
  background: rgba(180, 90, 80, 0.12);
  border: 1px solid rgba(180, 90, 80, 0.35);
  color: #f0d8d4;
}

.alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----- Formulaire ---------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.field .req { color: rgba(246, 244, 238, 0.5); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--ff-sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--ivory);
  background: rgba(246, 244, 238, 0.05);
  border: 1px solid var(--rule-light);
  border-radius: 4px;
  padding: 10px 13px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(246, 244, 238, 0.45);
  background: rgba(246, 244, 238, 0.08);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.field input.is-invalid,
.field textarea.is-invalid {
  border-color: rgba(200, 110, 100, 0.6);
}

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----- Bouton -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--ivory);
  border-radius: 4px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}

.btn:hover { background: var(--ivory-soft); }
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform 220ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */

/* Laptop court en hauteur : réduire paddings + textarea */
@media (min-width: 901px) and (max-height: 760px) {
  .temp-card {
    padding: 32px 40px;
    gap: 36px;
  }
  .logo { margin-bottom: 16px; }
  .logo img { width: 160px; }
  .eyebrow { margin-bottom: 14px; }
  .title { margin-bottom: 14px; }
  .lede { margin-bottom: 14px; }
  .field textarea { min-height: 76px; }
  .form-grid { gap: 12px; }
}

/* Tablette / mobile : layout vertical, scroll autorisé */
@media (max-width: 900px) {
  body {
    align-items: flex-start;
    padding: 20px;
  }

  .temp-card {
    grid-template-columns: 1fr;
    max-height: none;
    width: 100%;
    max-width: 560px;
    gap: 32px;
    padding: clamp(28px, 6vw, 44px);
    margin: 8px 0;
  }

  .col--left { gap: 24px; }

  .col__bottom {
    flex-wrap: wrap;
  }
}

/* Mobile étroit : formulaire 1 colonne */
@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .col__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sep { display: none; }
}

/* ----- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .temp-card { animation: none; }
  * { transition: none !important; }
}