/* El Kantara — holding page styles.
   Brand tokens from docs/02-brand-guidelines.md — never #1C3A5E. */

/* ── Self-hosted fonts (latin subset, woff2 only) ── */
@font-face{
  font-family:'Cormorant';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/cormorant-300.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-400italic.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/inter-500.woff2') format('woff2');
}

:root{
  --clair:#FFFBF3;
  --sable:#F3EDE0;
  --terre:#C55E36;
  --ocre:#CD8C73;
  --bleu:#274684;
  --ardoise:#485F8D;
  --olive:#535A29;
  --encre:#2A2A2A;
  --trait:#E5E0D5;
}

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

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

body{
  background:var(--clair);
  color:var(--encre);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* Very light texture, evokes sand grain */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(197,94,54,.05), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(39,70,132,.04), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.wrap{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px 40px;
  max-width:640px;
  margin:0 auto;
  width:100%;
}

/* ── LOGO ──────────────────────────────────────────
   Typographic lockup, per the logo reference
   (Ressources - 1/LOGO/el-kantara-logo-reference.html).
   ────────────────────────────────────────────────── */
.logo{
  animation:rise .9s cubic-bezier(.22,1,.36,1) both;
  margin-bottom:64px;
}
.logo .ek{
  font-family:'Cormorant',serif;
  font-weight:300;
  font-size:84px;
  letter-spacing:.08em;
  line-height:1;
  color:var(--encre);
  margin-bottom:18px;
}
.logo .nom{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--encre);
  opacity:.45;
  padding-left:.5em;
}

/* ── TEXT ── */
.accroche{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:36px;
  line-height:1.3;
  color:var(--bleu);
  margin-bottom:36px;
  animation:rise .9s .15s cubic-bezier(.22,1,.36,1) both;
}

.corps{
  font-size:17px;
  line-height:1.85;
  color:var(--encre);
  opacity:.78;
  max-width:440px;
  margin:0 auto 20px;
  animation:rise .9s .3s cubic-bezier(.22,1,.36,1) both;
}

.signature{
  font-family:'Cormorant Garamond',serif;
  font-size:19px;
  font-style:italic;
  color:var(--terre);
  margin-bottom:64px;
  animation:rise .9s .45s cubic-bezier(.22,1,.36,1) both;
}

/* ── RULE ── */
.filet{
  width:40px;
  height:1px;
  background:var(--terre);
  opacity:.4;
  margin:0 auto 56px;
  animation:widen 1.2s .6s cubic-bezier(.22,1,.36,1) both;
}

/* ── FORMS ── */
.form-zone{
  width:100%;
  max-width:420px;
  animation:rise .9s .6s cubic-bezier(.22,1,.36,1) both;
}
.form-label{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ardoise);
  margin-bottom:18px;
}
form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
input[type=email],
input[type=text],
textarea{
  flex:1;
  min-width:200px;
  padding:13px 16px;
  border:1px solid var(--trait);
  border-radius:3px;
  background:rgba(255,255,255,.6);
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:var(--encre);
  transition:border-color .25s,background .25s;
}
textarea{
  width:100%;
  flex:none;
  resize:vertical;
  line-height:1.6;
}
input::placeholder,
textarea::placeholder{color:var(--ardoise);opacity:.55}
input[type=email]:focus,
input[type=text]:focus,
textarea:focus{
  outline:none;
  border-color:var(--ocre);
  background:#fff;
}
button{
  padding:13px 28px;
  border:none;
  border-radius:3px;
  background:var(--terre);
  color:var(--clair);
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s,transform .15s;
}
button:hover{background:var(--ocre)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:default}
button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}

.mention{
  font-size:11.5px;
  color:var(--ardoise);
  opacity:.7;
  margin-top:14px;
  line-height:1.55;
}
.mention a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(72,95,141,.25)}
.mention a:hover{color:var(--terre)}

/* Honeypot: offscreen, not display:none (some bots detect it) */
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Form status messages (success / error) */
.statut{display:none}
.statut.on{display:block;animation:rise .6s cubic-bezier(.22,1,.36,1) both}
.statut.ok{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;
  color:var(--olive);
  padding:22px 0 4px;
}
.statut.err{
  font-size:13.5px;
  color:var(--terre);
  margin-top:14px;
  line-height:1.55;
}

/* ── CONTACT (collapsed <details>) ── */
.contact-zone{
  width:100%;
  max-width:420px;
  margin-top:56px;
  animation:rise .9s .75s cubic-bezier(.22,1,.36,1) both;
}
.contact-zone summary{
  display:inline-block;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ardoise);
  border-bottom:1px solid rgba(72,95,141,.25);
  padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.contact-zone summary::-webkit-details-marker{display:none}
.contact-zone summary:hover{color:var(--terre);border-color:rgba(197,94,54,.4)}
.contact-zone summary:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.contact-zone details[open] summary{margin-bottom:22px}
.contact-zone form{flex-direction:column}
.contact-zone input[type=text],
.contact-zone input[type=email]{width:100%;flex:none}
.contact-zone button{align-self:center;min-width:160px}

/* ── FOOTER ── */
footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:36px 24px 44px;
  border-top:1px solid var(--trait);
  animation:fade 1s .9s both;
}
.legal{
  font-size:11.5px;
  color:var(--ardoise);
  opacity:.65;
  line-height:1.7;
}
.legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(72,95,141,.25)}
.legal a:hover{color:var(--terre)}

/* ── ANIMATIONS ── */
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes widen{
  from{width:0;opacity:0}
  to{width:40px;opacity:.4}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

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

/* ── MOBILE ── */
@media(max-width:600px){
  .wrap{padding:56px 22px 32px}
  .logo{margin-bottom:48px}
  .logo .ek{font-size:64px}
  .accroche{font-size:28px;margin-bottom:28px}
  .corps{font-size:16px}
  .signature{margin-bottom:48px}
  .filet{margin-bottom:44px}
  form{flex-direction:column}
  input[type=email],button{width:100%}
  .contact-zone{margin-top:44px}
  .contact-zone button{align-self:stretch;min-width:0}
}