/* ================================================================
   TRIKROMI — Page CONTACT
   Même univers que la page À propos (Almarai hero + Inter, noir/blanc/
   gris, "+" et "/"). Classes préfixées .ctx- pour ne rien casser.
   ================================================================ */

.ctx {
  --ink:#0b0b0b; --paper:#ffffff; --mist:#f4f3f1; --sand:#ece9e3;
  --grey:#5a5a5a; --faint:#9a9a9a; --line:#e0ded8; --pill:#e9e7e2;
  --disp:var(--font-display);   /* Almarai — comme les heros du site */
  --body:var(--font-body);      /* Inter — comme le reste du site */
  font-family:var(--body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
.ctx * { box-sizing:border-box; }
.ctx ::selection { background:var(--ink); color:var(--paper); }

.ctx-wrap { width:100%; max-width:1680px; margin:0 auto; padding:0 clamp(20px,5vw,90px); }
.ctx-eyebrow {
  font-family:var(--body); font-size:clamp(11px,0.85vw,14px); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:12px;
}
.ctx-eyebrow::before { content:''; width:34px; height:1px; background:currentColor; opacity:0.6; }

/* ---------------- HERO ---------------- */
.ctx-hero { padding:clamp(130px,16vw,230px) 0 clamp(40px,5vw,70px); }
.ctx-hero__eyebrow { margin-bottom:clamp(22px,3vw,40px); }
.ctx-hero__title {
  font-family:var(--disp); font-weight:800;
  font-size:clamp(44px,7.5vw,150px); line-height:0.95; letter-spacing:-0.045em;
}
.ctx-hero__title em { font-style:normal; color:var(--faint); }
.ctx-hero__sub {
  margin-top:clamp(22px,2.4vw,36px); max-width:640px;
  font-size:clamp(16px,1.3vw,22px); line-height:1.5; color:var(--grey);
}

/* ---------------- CORPS : infos + formulaire ---------------- */
.ctx-body { padding:clamp(40px,5vw,80px) 0 clamp(80px,10vw,160px); }
.ctx-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(34px,5vw,100px); align-items:start; }

/* colonne infos */
.ctx-aside { display:flex; flex-direction:column; gap:clamp(28px,3vw,46px); }
.ctx-block__l {
  font-size:clamp(11px,0.85vw,13px); font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:clamp(10px,1vw,16px);
}
.ctx-mail {
  font-family:var(--disp); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(22px,2.4vw,40px); color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--ink); padding-bottom:4px; transition:opacity .3s ease;
}
.ctx-mail:hover { opacity:0.55; }
.ctx-block__t { font-size:clamp(16px,1.2vw,20px); line-height:1.5; color:var(--ink); }
.ctx-block__t span { color:var(--faint); }
.ctx-social { display:flex; gap:10px; flex-wrap:wrap; }
.ctx-social a {
  font-size:clamp(12px,0.9vw,14px); font-weight:500; letter-spacing:-0.02em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; background:var(--pill); border-radius:999px;
  padding:9px 18px; transition:background .3s ease, color .3s ease;
}
.ctx-social a:hover { background:var(--ink); color:var(--paper); }

/* ---------------- FORMULAIRE ---------------- */
.ctx-form { border:1px solid var(--line); border-radius:26px; padding:clamp(24px,3vw,52px); background:var(--paper); }
.ctx-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.5vw,24px); }
.ctx-field { display:flex; flex-direction:column; margin-bottom:clamp(16px,1.6vw,26px); }
.ctx-field label {
  font-size:clamp(11px,0.8vw,13px); font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--grey); margin-bottom:10px;
}
.ctx-field label .req { color:#b04632; }
.ctx-input, .ctx-select, .ctx-textarea {
  font-family:var(--body); font-size:clamp(15px,1.05vw,17px); color:var(--ink);
  background:#faf9f7;
  border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; width:100%; transition:border-color .25s ease, background .25s ease;
  -webkit-appearance:none; appearance:none;
}
.ctx-input::placeholder, .ctx-textarea::placeholder { color:#b3b1ab; }
.ctx-input:focus, .ctx-select:focus, .ctx-textarea:focus {
  outline:none; border-color:var(--ink); background:#fff;
}
.ctx-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5a5a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; padding-right:42px; cursor:pointer;
}
.ctx-textarea { min-height:150px; resize:vertical; line-height:1.5; }

.ctx-submit {
  display:inline-flex; align-items:center; gap:12px; margin-top:6px;
  font-family:var(--body); font-size:clamp(15px,1.1vw,18px); font-weight:600; letter-spacing:-0.01em;
  color:var(--paper); background:var(--ink); border:none; border-radius:999px;
  padding:16px 34px; cursor:pointer; transition:opacity .25s ease, transform .25s ease;
}
.ctx-submit:hover { opacity:0.88; }
.ctx-submit:active { transform:scale(0.99); }
.ctx-submit:disabled { opacity:0.5; cursor:default; }
.ctx-submit .arrow { transition:transform .25s ease; }
.ctx-submit:hover .arrow { transform:translateX(4px); }

.ctx-formfoot { margin-top:clamp(16px,1.4vw,22px); font-size:clamp(12px,0.85vw,14px); color:var(--faint); line-height:1.5; }
.ctx-formfoot a { color:var(--grey); }

/* messages succès / erreur */
.ctx-note { display:none; border-radius:16px; padding:18px 22px; font-size:clamp(14px,1vw,16px); line-height:1.5; margin-bottom:22px; }
.ctx-note--ok { background:#0b0b0b; color:#fff; }
.ctx-note--ko { background:#fbeae6; color:#9a3a26; border:1px solid #f0c8bd; }
.ctx-note.show { display:block; }
.ctx-honey { position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* ---------------- ÉTAPES (rassurance) ---------------- */
.ctx-steps { background:var(--mist); padding:clamp(70px,8vw,130px) 0; }
.ctx-steps__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,40px); margin-top:clamp(40px,4vw,70px); }
.ctx-step__n { font-family:var(--body); font-weight:800; font-size:clamp(30px,3vw,52px); letter-spacing:-0.04em; color:var(--ink); }
.ctx-step__t { font-weight:600; font-size:clamp(16px,1.2vw,20px); margin:14px 0 8px; }
.ctx-step__d { color:var(--grey); font-size:clamp(14px,1vw,16px); line-height:1.5; }
.ctx-steps__t { font-family:var(--body); font-weight:600; font-size:clamp(22px,2.4vw,40px); letter-spacing:-0.03em; }

/* reveal (observer du site) */
.ctx .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.ctx .reveal.in, .ctx .reveal.is-visible, .ctx .reveal.visible, .ctx .reveal.show { opacity:1; transform:none; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .ctx-grid { grid-template-columns:1fr; gap:clamp(34px,8vw,56px); }
  .ctx-row { grid-template-columns:1fr; }
  .ctx-steps__grid { grid-template-columns:1fr; gap:30px; }
}

/* ============================================================
   TYPO ALIGNÉE SUR LA DA DU SITE
   display = Almarai 400, serré (comme les héros / la page à propos)
   ============================================================ */
.ctx-hero__title {
  font-weight: 400;
  font-size: clamp(44px, 8vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.06em;
}
.ctx-mail { font-weight: 400; }
.ctx-step__n { font-weight: 400; }