/* ═══════════════════════════════════════════════════════════════
   MAISON ÉLOA — Espace client (passerelle vers la galerie de preuves interne)
   ---------------------------------------------------------------
   Styles SPÉCIFIQUES à espace-client.html — chargés APRÈS site.css.
   Réutilise tous les tokens (--noir, --or, --serif…) et composants
   (.contact/.contact-iris, .form/.field, .steps/.step, .chips,
   .contact-side/.contact-rows, .btn*, .sec-head…) de site.css.
   Ici : seulement le strictement nouveau (dégagement du header,
   panneau d'accès, pastille d'icône, séparateur, icône « espace client »).
   Aucun état initial invisible en CSS (cf. règle site.css / ?capture).
   (L'icône « espace client » de la nav — .nav-usr — vit dans site.css,
    car le lien apparaît aussi sur la landing qui ne charge que site.css.)
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1 · HERO passerelle (réutilise .contact + .contact-iris) ---------- */
/* Le hero est la 1re section : dégager la hauteur du header fixe + barre démo. */
.esc-hero{
  padding-top:calc(var(--nav-h) + var(--demobar-h,44px) + clamp(24px,5vh,60px));
  padding-bottom:clamp(60px,10vh,110px);
}
.esc-revelateur{
  margin:22px auto 0;max-width:36ch;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(15px,1.7vw,20px);line-height:1.4;color:var(--ivoire-40);
}
.esc-note-demo{
  margin:22px auto 0;max-width:52ch;font-size:12.5px;line-height:1.6;color:var(--ivoire-60);
}
.esc-cue{
  margin-top:clamp(30px,5vh,52px);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--or-vif);
}

/* ---------- 2 · PANNEAU D'ACCÈS ---------- */
.esc-access{padding:clamp(100px,18vh,190px) 0;background:var(--noir)}
.esc-access .sec-head{text-align:center;max-width:640px;margin-inline:auto}
.esc-access .sec-sub{margin-inline:auto}
/* eyebrow avec petite icône (clé) alignée */
.esc-label-ic{display:inline-flex;align-items:center;gap:9px;justify-content:center}
.esc-label-ic svg{width:15px;height:15px;color:var(--or-vif)}

.esc-card{
  max-width:560px;margin-inline:auto;
  background:rgba(23,20,16,.72);border:1px solid var(--ligne);border-radius:6px;
  padding:clamp(28px,3.6vw,46px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  text-align:left;
}

/* identifiants de démonstration (affichés — ils ne protègent rien) */
.esc-creds{
  border:1px dashed var(--or-20);border-radius:5px;
  padding:16px 18px;margin-bottom:26px;background:rgba(198,161,91,.05);
}
.esc-creds-h{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-vif);margin-bottom:12px;
}
.esc-creds-list{display:flex;flex-wrap:wrap;gap:8px 28px}
.esc-creds-list>div{display:flex;flex-direction:column;gap:2px}
.esc-creds-list dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-40)}
.esc-creds-list dd{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);color:var(--ivoire);letter-spacing:.02em}
.esc-creds-note{margin-top:14px;font-size:12px;line-height:1.5;color:var(--ivoire-60)}

/* le formulaire : réutilise .field de site.css */
.esc-form .field{margin-bottom:18px}
.esc-card .btn[type="submit"]{width:100%;justify-content:center;margin-top:4px}
.esc-card .btn svg{width:16px;height:16px}

/* champ mot de passe + bouton afficher/masquer */
.esc-pass-wrap{position:relative;display:flex;align-items:center}
.esc-pass-wrap input{flex:1 1 auto;padding-right:52px}
.esc-pass-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:6px;display:grid;place-items:center;color:var(--ivoire-40);
  transition:color .3s;
}
.esc-pass-toggle:hover{color:var(--or-vif)}
.esc-pass-toggle svg{width:20px;height:20px}
.esc-pass-toggle .ic-eye-off{display:none}
.esc-pass-toggle[aria-pressed="true"] .ic-eye{display:none}
.esc-pass-toggle[aria-pressed="true"] .ic-eye-off{display:block}

/* message d'erreur (lié au formulaire, aria-live) */
.esc-error{
  display:none;margin:0 0 16px;padding:11px 14px;border-radius:5px;
  background:rgba(233,184,166,.08);border:1px solid rgba(233,184,166,.34);
  color:#EBC3B4;font-size:13.5px;line-height:1.5;
}
.esc-error.is-shown{display:block}
.esc-form input[aria-invalid="true"]{border-color:#E9B8A6}

.esc-form .form-note{margin-top:16px;text-align:center}
.esc-help{
  display:block;margin-top:2px;font-size:11.5px;line-height:1.45;letter-spacing:.01em;
  text-transform:none;color:var(--ivoire-40);
}

/* ---------- 3 · CE QUE VOUS FEREZ (réutilise .exp › .steps › .step) ---------- */
/* on remplace le ƒ-stop (.step-f) par une pastille d'icône or */
.esc-ic{
  width:clamp(46px,5vw,58px);height:clamp(46px,5vw,58px);border-radius:50%;
  border:1px solid var(--or-20);display:grid;place-items:center;color:var(--or);flex:0 0 auto;
}
.esc-ic svg{width:24px;height:24px}

/* ---------- 4 · À VOTRE RYTHME & AIDE (réutilise .contact-grid/.contact-side) ---------- */
.esc-trust{padding:clamp(100px,18vh,190px) 0;background:var(--noir-2)}
.esc-trust .contact-grid{margin-top:0}
.esc-trust p:not(.sec-label){
  color:var(--ivoire-60);margin-bottom:20px;max-width:54ch;font-size:clamp(15px,1.5vw,17px);
}
.esc-trust strong{color:var(--ivoire);font-weight:500}
.esc-help-h{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,28px);margin-bottom:6px}
.esc-help-line{color:var(--ivoire-60);font-size:clamp(14px,1.45vw,16px);max-width:40ch}

/* ---------- 5 · CLÔTURE (réutilise .tarifs › .tarifs-core) ---------- */
.esc-sign{
  margin-top:34px;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(15px,1.7vw,19px);color:var(--ivoire-40);
}

/* ---------- capture : le hero réutilise .contact (min-height:0 déjà géré) ---------- */
/* rien de spécifique : sections statiques, animations coupées par body.capture-mode * */