/* ============================================================
   BETTER CLEANER — Portail d'entrée (welcome gate)
   Minimal : grand logo animé en 3D + Particulier / Professionnel.
   La photo reste visible derrière.
   ============================================================ */
.egate{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:center;overflow-y:auto;
  padding:clamp(24px,5vw,56px);background:#0a0a0c;}
/* rideau d’ouverture + halo chaud derrière le logo */
.egate::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:#07080b;animation:egCurtain 1.5s cubic-bezier(.22,1,.36,1) both;}
@keyframes egCurtain{0%{opacity:1}70%{opacity:.12}100%{opacity:0}}
.egate::before{content:"";position:absolute;left:50%;top:36%;width:min(940px,124vw);aspect-ratio:1;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,213,150,.20) 0%,rgba(255,201,132,.09) 34%,rgba(255,201,132,0) 66%);
  animation:egBloom 2.8s .3s cubic-bezier(.22,1,.36,1) both;}
@keyframes egBloom{from{opacity:0;transform:translate(-50%,-50%) scale(.55);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.egate-bg{position:absolute;inset:0;overflow:hidden;animation:egBgIn 2s cubic-bezier(.22,1,.36,1) both;}
@keyframes egBgIn{from{opacity:0;transform:scale(1.05);}to{opacity:1;transform:none;}}
.egate-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  animation:egKen 26s ease-in-out infinite alternate;will-change:transform;}
@keyframes egKen{from{transform:scale(1.04);}to{transform:scale(1.13) translateY(-1%);}}
/* voile sombre léger : améliore la lisibilité du texte et fait ressortir les boutons */
.egate-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  rgba(6,7,10,.52) 0%,rgba(6,7,10,.34) 34%,rgba(6,7,10,.44) 62%,rgba(6,7,10,.72) 100%);}

.egate-inner{position:relative;z-index:2;width:100%;max-width:680px;margin:auto 0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vw,40px);}

/* ---- phrase explicative sous le logo ---- */
.egate-tag{color:rgba(255,255,255,.94);text-align:center;font-weight:500;
  font-size:clamp(15px,2vw,21px);letter-spacing:.005em;max-width:22ch;margin:-8px 0 0;
  text-shadow:0 2px 16px rgba(0,0,0,.55);animation:egTag 1.25s .98s cubic-bezier(.22,1,.36,1) both;}
@keyframes egTag{from{opacity:0;transform:translateY(15px);filter:blur(9px);}to{opacity:1;transform:none;filter:blur(0);}}

/* ---- grand logo : apparition douce + éclat lumineux qui traverse ---- */
.egate-logo-wrap{position:relative;display:inline-block;}
.egate-logo{height:clamp(118px,21vw,244px);width:auto;will-change:transform,filter,opacity;
  filter:drop-shadow(0 22px 60px rgba(0,0,0,.6));
  animation:egLogoIn 1.6s .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes egLogoIn{
  from{opacity:0;transform:translateY(30px) scale(1.06);filter:blur(16px) drop-shadow(0 22px 60px rgba(0,0,0,0));}
  60%{opacity:1;}
  to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 22px 60px rgba(0,0,0,.6));}}
.egate-logo-wrap::after{content:"";position:absolute;left:50%;bottom:-16px;height:1px;width:0;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(255,224,178,0),rgba(255,228,186,.9),rgba(255,224,178,0));
  animation:egLine 1.5s 1.2s cubic-bezier(.22,1,.36,1) both;}
@keyframes egLine{from{width:0;opacity:0;}to{width:min(360px,64%);opacity:1;}}
.egate-glint{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url('../assets/logo-bc-hero-white.png') center/contain no-repeat;
  mask:url('../assets/logo-bc-hero-white.png') center/contain no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,225,170,.65) 50%,rgba(255,255,255,.95) 53%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat;
  /* Deux passages au lieu d'« infinite » : même montage que .uhx-mono —
     un dégradé animé derrière un masque PNG, que le GPU ne peut pas
     composer. En boucle, ça repeignait le logo indéfiniment sur le
     premier écran du site. Le reflet passe deux fois, puis s'arrête. */
  animation:egGlint 5.6s cubic-bezier(.35,.1,.25,1) 1.55s 2 both;}
@keyframes egGlint{0%{background-position:130% 0;}30%{background-position:-130% 0;}100%{background-position:-130% 0;}}
@media(max-width:700px){.egate-logo{width:min(88vw,624px) !important;height:auto !important;}}

/* ---- les deux choix ---- */
.egate-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;justify-content:center;width:100%;max-width:660px;
  animation:egRise 1.1s 1.08s cubic-bezier(.22,1,.36,1) both;}
.egbtn{animation:egFade .85s both;}
.egate-choice .egbtn:nth-child(1){animation-delay:1.2s;}
.egate-choice .egbtn:nth-child(2){animation-delay:1.38s;}
@keyframes egFade{from{opacity:0;}to{opacity:1;}}
.egbtn{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  color:#fff;padding:18px 32px;border-radius:18px;border:1.5px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7);
  transition:background .25s,border-color .25s,color .25s,transform .2s;min-height:86px;justify-content:center;cursor:pointer;}
.egbtn-t{font-size:clamp(17px,1.9vw,20px);font-weight:650;letter-spacing:-.01em;}
.egbtn-s{font-size:12.5px;font-weight:500;line-height:1.35;color:rgba(255,255,255,.82);letter-spacing:0;}
.egbtn:hover{background:#fff;color:#0a0a0c;border-color:#fff;transform:translateY(-2px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75);}
.egbtn:hover .egbtn-s{color:rgba(10,10,12,.66);}
.egbtn.on{background:#fff;color:#0a0a0c;border-color:#fff;}
.egbtn.on .egbtn-s{color:rgba(10,10,12,.66);}

/* ---- formulaire pro (déployé au choix « Professionnel ») ---- */
.egate-pro{width:100%;max-width:420px;display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease);}
.egate-pro.show{grid-template-rows:1fr;opacity:1;}
.egate-pro-in{min-height:0;display:flex;flex-direction:column;gap:13px;
  background:rgba(16,17,22,.58);backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:24px;}
.egate-pro .form-row{display:flex;flex-direction:column;gap:7px;}
.egate-pro .form-row label{color:rgba(255,255,255,.82);font-size:13px;font-weight:600;}
.egate-pro .form-row .muted{color:rgba(255,255,255,.5);}
.egate-pro input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:12px;padding:12px 14px;font-size:15px;width:100%;
  transition:border-color .2s,box-shadow .2s;}
.egate-pro input::placeholder{color:rgba(255,255,255,.4);}
.egate-pro input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12);}
.egate-pro .ins-hint{font-size:12.5px;margin-top:6px;display:flex;align-items:center;gap:5px;min-height:16px;}
.egate-pro .ins-hint svg{width:14px;height:14px;}
.egate-pro .ins-hint.wait{color:rgba(255,255,255,.6);}
.egate-pro .ins-hint.ok{color:#7fe0a8;}
.egate-enter{margin-top:6px;background:#fff;color:#0a0a0c;}
.egate-enter:hover{background:#fff;color:#0a0a0c;transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(0,0,0,.6);}
.egate-enter:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.egate-enter svg{width:18px;height:18px;}

/* ---- étape 2 : coordonnées & adresse ---- */
.egate-step2{width:100%;max-width:520px;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.egate-step2.show{opacity:1;transform:none;}
.egate-card{display:flex;flex-direction:column;gap:14px;background:rgba(16,17,22,.62);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:24px;}
.egate-card-h{display:flex;flex-direction:column;gap:5px;}
.egate-card-h b{color:#fff;font-size:17px;font-weight:650;letter-spacing:-.01em;}
.egate-card-h span{color:rgba(255,255,255,.6);font-size:13px;line-height:1.45;text-wrap:pretty;}
.eg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 18px;border-radius:14px;border:0;background:#fff;color:#1a1c20;
  font-family:inherit;font-size:14.5px;font-weight:650;cursor:pointer;transition:transform .18s,box-shadow .18s;}
.eg-google svg{width:18px;height:18px;flex:none;}
.eg-google:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(0,0,0,.7);}
.eg-or{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.42);font-size:12px;}
.eg-or::before,.eg-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14);}
.eg-fields{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.eg-f{grid-column:span 6;display:flex;flex-direction:column;gap:6px;}
.eg-f.eg-half{grid-column:span 3;}
.eg-f.eg-third{grid-column:span 2;}
.eg-f.eg-two-third{grid-column:span 4;}
.eg-f label{color:rgba(255,255,255,.72);font-size:12px;font-weight:600;}
.eg-f input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14.5px;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s;}
.eg-f input::placeholder{color:rgba(255,255,255,.34);}
.eg-f input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12);}
.eg-f input.err{border-color:#e2795f;box-shadow:0 0 0 3px rgba(226,121,95,.16);}
.egate:not(.is-pro) .eg-pro-only{display:none;}
.eg-zone{margin:0;font-size:12.5px;line-height:1.4;min-height:0;text-wrap:pretty;}
.eg-zone.ok{color:#7fe0a8;}
.eg-zone.warn{color:#f0c07a;}
.egate-card .egate-enter{align-items:center;min-width:0;max-width:none;width:100%;padding:14px 24px;
  border-radius:14px;font-size:15px;font-weight:650;border:0;}
.eg-skip{align-self:center;background:none;border:0;color:rgba(255,255,255,.5);font-family:inherit;font-size:13px;
  cursor:pointer;padding:2px;text-decoration:underline;text-underline-offset:3px;}
.eg-skip:hover{color:#fff;}
.eg-legal{margin:0;color:rgba(255,255,255,.36);font-size:11.5px;line-height:1.45;text-wrap:pretty;}
.egate.step2 .egate-logo{height:clamp(78px,12vw,140px) !important;width:auto !important;transition:height .5s var(--ease);}
.egate.step2 .egate-tag{display:none;}
.egate.step2 .egbtn{padding:12px 22px;}
.egate.step2 .egbtn-s{display:none;}
@media(max-width:560px){.eg-f.eg-half,.eg-f.eg-third,.eg-f.eg-two-third{grid-column:span 6;}.egate-card{padding:20px;}}

@keyframes egRise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

.egate.leaving{animation:egLeave .7s var(--ease) forwards;pointer-events:none;}
@keyframes egLeave{to{opacity:0;transform:scale(1.05);filter:blur(7px);}}

body.egate-open{overflow:hidden;}

@media(prefers-reduced-motion:reduce){
  .egate-bg,.egate-bg img,.egate-logo,.egate-choice,.egbtn,.egate-tag,.egate::before,.egate::after,.egate-logo-wrap::after{animation:none;}
  .egate::after{display:none;}
  .egate-logo{filter:drop-shadow(0 22px 60px rgba(0,0,0,.6));}
  .egate-glint{animation:none;background:none;}
  .egate-logo{opacity:1;transform:none;}
  .egate.leaving{animation:none;opacity:0;}
}
@media(max-width:560px){ .egate-choice{grid-template-columns:1fr;} .egbtn{padding:16px 24px;min-height:0;} }