/* ========================================================================== */
/* ETHNOS R534 — VOLET CONNEXION UNIQUE                                       */
/* Source unique active pour accueil commercial + accueil découverte.          */
/* Le placement vertical est contextuel ; structure, formulaire, style et      */
/* comportement restent communs.                                               */
/* Bouton validation : standard officiel R216, géométrie du volet conservée.   */
/* ========================================================================== */

:root{
  --ethnos-auth-top:clamp(68px,7.5vh,92px);
}
html.ethnosGuestDiscovery{
  --ethnos-auth-top:var(--topbar,56px);
}

.ethnosAuthOverlay{
  position:fixed;
  z-index:310;
  top:var(--ethnos-auth-top);
  right:0;
  bottom:0;
  left:0;
  background:rgba(4,18,33,.24);
  opacity:0;
  visibility:hidden;
  transition:opacity 280ms ease,visibility 280ms ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.ethnosAuthOverlay.is-open{
  opacity:1;
  visibility:visible;
}

.ethnosAuthDrawer{
  position:fixed;
  z-index:311;
  top:var(--ethnos-auth-top);
  right:0;
  width:clamp(410px,27vw,520px);
  height:calc(100vh - var(--ethnos-auth-top));
  overflow:hidden;
  color:#071a39;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:linear-gradient(180deg,rgba(255,252,247,.99),rgba(255,247,237,.985));
  border-left:1px solid rgba(242,103,34,.28);
  border-bottom:1px solid rgba(242,103,34,.22);
  border-bottom-left-radius:30px;
  box-shadow:-22px 24px 58px rgba(5,22,39,.24);
  transform:translateX(104%);
  transition:transform 420ms cubic-bezier(.2,.78,.24,1);
  overscroll-behavior:contain;
}
.ethnosAuthDrawer.is-open{
  transform:translateX(0);
}

.ethnosAuthDrawer__visual{
  position:relative;
  height:clamp(132px,13.5vh,178px);
  overflow:hidden;
  background-image:
    linear-gradient(rgba(255,250,242,.30),rgba(255,250,242,.42)),
    url("../assets/images/rejoindre-visages-filigrane.jpg");
  background-size:cover;
  background-position:center center;
}
.ethnosAuthDrawer__visual::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:52%;
  background:linear-gradient(180deg,transparent,rgba(255,250,242,.82));
  pointer-events:none;
}
.ethnosAuthDrawer__visualLabel{
  position:absolute;
  z-index:1;
  left:26px;
  bottom:18px;
  color:#071a39;
  font-size:.78rem;
  font-weight:750;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.ethnosAuthDrawer__close{
  position:absolute;
  z-index:3;
  top:16px;
  right:17px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#071a39;
  font-family:Arial,sans-serif;
  font-size:1.55rem;
  line-height:1;
  text-align:center;
  cursor:pointer;
  border:1px solid rgba(7,26,57,.16);
  border-radius:999px;
  background:rgba(255,252,247,.92);
  box-shadow:0 8px 20px rgba(7,26,57,.12);
  transition:transform 180ms ease,border-color 180ms ease;
}
.ethnosAuthDrawer__close span{
  display:block;
  width:1em;
  height:1em;
  line-height:.92em;
  text-align:center;
  transform:translateY(-.5px);
}
@media (hover:hover){
  .ethnosAuthDrawer__close:hover{
    transform:rotate(5deg) scale(1.05);
    border-color:rgba(242,103,34,.58);
  }
}

.ethnosAuthDrawer__content{
  padding:clamp(22px,2vw,34px) clamp(26px,2.4vw,42px) 34px;
}
.ethnosAuthDrawer h2{
  margin:0;
  color:#071a39;
  font-size:clamp(2rem,2.35vw,2.9rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:850;
}
.ethnosAuthDrawer h2 span{
  color:#f26722;
}
.ethnosAuthDrawer__intro{
  margin:14px 0 22px;
  max-width:390px;
  color:#445066;
  font-size:clamp(.92rem,.98vw,1.08rem);
  line-height:1.5;
}

.ethnosAuthForm{
  display:grid;
  gap:15px;
}
.ethnosAuthForm label{
  display:grid;
  gap:7px;
  color:#071a39;
  font-size:.86rem;
  font-weight:750;
}
.ethnosAuthForm input{
  box-sizing:border-box;
  width:100%;
  height:49px;
  padding:0 15px;
  color:#071a39;
  font:inherit;
  border:1px solid rgba(7,26,57,.17);
  border-radius:12px;
  outline:none;
  background:rgba(255,255,255,.88);
  transition:border-color 180ms ease,box-shadow 180ms ease;
}
.ethnosAuthForm input:focus{
  border-color:rgba(242,103,34,.72);
  box-shadow:0 0 0 4px rgba(242,103,34,.10);
}
.ethnosAuthPasswordField{
  position:relative;
  display:block;
}
.ethnosAuthPasswordField input{
  padding-right:86px;
}
.ethnosAuthPasswordToggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  height:34px;
  padding:0 11px;
  color:#071a39;
  font-size:.72rem;
  font-weight:750;
  cursor:pointer;
  border:0;
  border-radius:8px;
  background:rgba(7,26,57,.07);
}
.ethnosAuthForm__error{
  min-height:18px;
  margin:-3px 0 0;
  color:#b63a28;
  font-size:.76rem;
  line-height:1.35;
}

/* Standard officiel R216 ; hauteur commerciale demandée conservée à 50 px. */
.ethnosAuthForm__submit{
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50px;
  min-height:50px;
  max-height:50px;
  padding:0 12px;
  border:1px solid rgba(255,211,183,.92);
  border-radius:12px;
  background:linear-gradient(180deg,#ffad7a 0%,#ee8d55 100%);
  color:#071826;
  font-family:Manrope,"Segoe UI",Arial,sans-serif;
  font-size:clamp(10px,.72vw,13px);
  font-weight:500;
  font-style:normal;
  line-height:1;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  text-shadow:none;
  white-space:nowrap;
  box-shadow:0 1px 0 #c96d3d,0 3px 5px rgba(0,0,0,.11);
  filter:none;
  transform:translateY(0);
  cursor:pointer;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.ethnosAuthForm__submit:hover,
.ethnosAuthForm__submit:focus-visible{
  filter:brightness(1.025);
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 2px 0 #c96d3d,0 4px 6px rgba(0,0,0,.12);
}
.ethnosAuthForm__submit:active{
  filter:brightness(.995);
  transform:translateY(1px);
  box-shadow:0 0 0 #c96d3d,0 2px 3px rgba(0,0,0,.09);
}
.ethnosAuthForm__submit:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
  transform:none;
}

.ethnosAuthDrawer__join{
  box-sizing:border-box;
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px 16px;
  margin-top:19px;
  padding:15px 17px;
  color:#071a39;
  font:inherit;
  text-align:left;
  border:1px solid rgba(7,26,57,.12);
  border-radius:13px;
  background:rgba(255,255,255,.58);
  cursor:not-allowed;
}
.ethnosAuthDrawer__join span{
  grid-column:1;
  color:#5c6574;
  font-size:.76rem;
}
.ethnosAuthDrawer__join strong{
  grid-column:1;
  font-size:.91rem;
}
.ethnosAuthDrawer__join i{
  grid-column:2;
  grid-row:1 / span 2;
  color:#f26722;
  font-size:1.35rem;
  font-style:normal;
  transition:transform 180ms ease;
}
.ethnosAuthDrawer__join:hover i{
  transform:translateX(4px);
}

/* L'onglet invité ne doit pas rester devant le volet partagé. */
html.ethnosGuestDiscovery body.hasEthnosAuthDrawer [data-guest-signup-card]{
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (prefers-reduced-motion:reduce){
  .ethnosAuthDrawer,
  .ethnosAuthOverlay{
    transition:none;
  }
}

/* Conservation du réglage commercial R222 à 1280 × 720. */
@media (width:1280px) and (height:720px){
  .ethnosAuthForm{
    gap:7.5px;
  }
  .ethnosAuthForm__error{
    min-height:9px;
    margin:-1.5px 0 0;
    font-size:.72rem;
    line-height:1.2;
  }
}

/* Même adaptation pleine largeur que les deux implémentations historiques. */
@media (max-width:900px){
  .ethnosAuthDrawer{
    width:100%;
    border-left:0;
    border-radius:0;
  }
}
@media (max-width:430px){
  html:not(.ethnosGuestDiscovery){
    --ethnos-auth-top:calc(62px + env(safe-area-inset-top,0px));
  }
  .ethnosAuthDrawer{
    height:calc(100dvh - var(--ethnos-auth-top));
  }
}
/* R695 — l'inscription est de nouveau ouverte. */
a.ethnosAuthDrawer__join{cursor:pointer;text-decoration:none}a.ethnosAuthDrawer__join:hover{border-color:rgba(242,103,34,.38);background:rgba(255,255,255,.78)}