/* --------------------------------------------------------------------------
   MODALE DE CONNEXION / INSCRIPTION
   Adaptation du modèle "sign-in-card" repéré par le client (React + Tailwind +
   framer-motion) en HTML/CSS/JS pur, et repeinte aux couleurs du site : dégradé
   corail → framboise → raisin au lieu du violet sur noir, et carte de verre
   CLAIRE avec le logo du magasin.
   Effets repris du modèle : halos animés, grain, carte inclinable en 3D,
   faisceaux lumineux qui parcourent la bordure, bouton avec état de chargement.
   -------------------------------------------------------------------------- */

.acm{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.acm.on{opacity:1;pointer-events:auto}

/* Les halos sont peints en degrades RADIAUX et non en <div> floutes.
   La version d'origine empilait trois blocs de 120vh en `filter: blur(80px)` :
   le navigateur passait son temps a les recomposer et etranglait tout le reste
   — une inscription mettait 6 s au lieu de 1 s, et finissait par expirer.
   Le rendu est le meme, le cout quasi nul. */
.acm-bg{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(60% 42% at 50% -6%, rgba(255,255,255,.34), transparent 70%),
    radial-gradient(52% 46% at 50% 108%, rgba(245,176,46,.30), transparent 70%),
    radial-gradient(34% 34% at 14% 30%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(160deg,#F2696B 0%,#E1567E 38%,#8B5CF6 72%,#3B2E52 100%)}

/* Grain : même technique que le modèle, en SVG inline. */
.acm-noise{position:absolute;inset:0;opacity:.06;
  background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Respiration lumineuse : une simple variation d'opacite sur un degre
   radial, sans `filter` — animable par le compositeur sans recalcul. */
.acm-glow{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.acm-glow.g1{top:-18%;left:15%;width:70%;height:52%;animation:acmBreathe 8s ease-in-out infinite}
.acm-glow.g2{bottom:-22%;left:20%;width:60%;height:60%;
  background:radial-gradient(circle,rgba(245,176,46,.20),transparent 70%);
  animation:acmBreathe 6s ease-in-out infinite 1s}
@keyframes acmBreathe{0%,100%{opacity:.5}50%{opacity:.9}}

.acm-stage{position:relative;z-index:2;width:min(400px,100%);perspective:1500px}
.acm-card{position:relative;border-radius:26px;transition:transform .18s ease-out;
  transform-style:preserve-3d}

/* Faisceaux lumineux qui font le tour de la carte.
   Ils se deplacent en `transform` et non en `left/top` : animer une position
   force le navigateur a refaire la mise en page a CHAQUE image, ce qui rendait
   la page si lente qu'une inscription pouvait expirer. Une transformation est
   traitee par le compositeur, sans recalcul. */
.acm-beams{position:absolute;inset:-1px;border-radius:27px;overflow:hidden;pointer-events:none}
.acm-beams i{position:absolute;display:block;opacity:.8;will-change:transform}
.acm-beams .b1{top:0;left:0;height:3px;width:50%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:acmBeamX 3.4s linear infinite}
.acm-beams .b2{top:0;right:0;width:3px;height:50%;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  animation:acmBeamY 3.4s linear infinite .85s}
.acm-beams .b3{bottom:0;right:0;height:3px;width:50%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:acmBeamXr 3.4s linear infinite 1.7s}
.acm-beams .b4{bottom:0;left:0;width:3px;height:50%;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  animation:acmBeamYr 3.4s linear infinite 2.55s}
@keyframes acmBeamX {from{transform:translateX(-100%)} to{transform:translateX(200%)}}
@keyframes acmBeamXr{from{transform:translateX(100%)}  to{transform:translateX(-200%)}}
@keyframes acmBeamY {from{transform:translateY(-100%)} to{transform:translateY(200%)}}
@keyframes acmBeamYr{from{transform:translateY(100%)}  to{transform:translateY(-200%)}}

/* Fond quasi opaque plutot qu'un `backdrop-filter` : sur un degrade deja
   dense la difference ne se voit pas, mais le flou d'arriere-plan coutait
   cher a chaque image. */
.acm-glass{position:relative;background:#FFFDFC;
  border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:26px 24px;
  box-shadow:0 30px 70px rgba(60,20,50,.38);overflow:hidden}
.acm-x{position:absolute;top:14px;inset-inline-end:14px;border:0;background:transparent;
  cursor:pointer;font-size:15px;color:var(--muted);padding:5px;z-index:3}
.acm-x:hover{color:var(--coral)}

.acm-head{text-align:center;margin-bottom:16px}
/* Le logo du magasin est clair : un cercle legerement teinte le fait
   ressortir au lieu de le noyer dans du blanc sur blanc. */
.acm-logo{width:62px;height:62px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#FFF1EC,#FDE4EC);border:1px solid rgba(242,105,107,.22);
  box-shadow:0 8px 22px rgba(225,86,126,.20);overflow:hidden}
.acm-logo img{width:76%;height:76%;object-fit:contain}
.acm-head h2{font-family:var(--display);font-size:22px;margin-top:12px}
.acm-head p{color:var(--muted);font-size:12.5px;margin-top:4px}

.acm-field{position:relative;margin-top:11px}
.acm-field .ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);opacity:.6;transition:opacity .25s,color .25s;
  pointer-events:none;display:block}
.acm-field .ic svg{width:100%;height:100%;display:block}
.acm-field.focus .ic{opacity:1;color:var(--coral)}
.acm-field.focus .ic{opacity:1}
.acm-field input{width:100%;border:1px solid var(--line);background:#FBF7F5;border-radius:14px;
  padding:13px 44px;font:600 14.5px/1.2 var(--font);color:var(--ink);outline:none;
  transition:border-color .22s,box-shadow .22s,background .22s,transform .22s}
.acm-field input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.acm-field input:focus{border-color:var(--coral);background:#fff;
  box-shadow:0 0 0 4px rgba(242,105,107,.14);transform:translateY(-1px)}
.acm-eye{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;opacity:.5;padding:4px;
  width:25px;height:25px;color:var(--muted)}
.acm-eye svg{width:17px;height:17px;display:block}
.acm-eye:hover{opacity:1}

.acm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.acm-check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer}
.acm-check input{width:16px;height:16px;accent-color:var(--coral)}
.acm-link{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;cursor:pointer;font-family:var(--font)}
.acm-link:hover{color:var(--coral)}

.acm-submit{position:relative;width:100%;margin-top:17px;border:0;cursor:pointer;overflow:hidden;
  background:var(--grad);color:#fff;border-radius:14px;height:46px;
  font:800 14.5px/1 var(--font);
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 12px 30px rgba(225,86,126,.34);transition:transform .18s,box-shadow .18s}
.acm-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(225,86,126,.44)}
.acm-submit:active{transform:translateY(0)}
.acm-submit[disabled]{opacity:.85;cursor:default;transform:none}
.acm-spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;
  border-radius:50%;animation:acmSpin .7s linear infinite}
@keyframes acmSpin{to{transform:rotate(360deg)}}

.acm-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px}
.acm-or span{font-size:11.5px;color:var(--muted)}
.acm-or::before,.acm-or::after{content:"";flex:1;height:1px;background:var(--line)}

.acm-google{width:100%;height:46px;border:1px solid var(--line);background:#fff;border-radius:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  font:700 13.5px/1 var(--font);color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.acm-google:hover{border-color:#C3CFF6;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(80,100,200,.16)}
.acm-google svg{width:17px;height:17px;flex:none}

.acm-foot{text-align:center;font-size:12.5px;color:var(--muted);margin-top:15px}
.acm-foot button{border:0;background:transparent;cursor:pointer;color:var(--coral);
  font:800 12.5px/1 var(--font);position:relative;padding:0 1px}
.acm-foot button::after{content:"";position:absolute;bottom:-2px;inset-inline-start:0;
  width:0;height:1px;background:var(--coral);transition:width .3s}
.acm-foot button:hover::after{width:100%}
.acm-err{margin-top:12px;background:#FDE7E7;color:#a3323c;border-radius:12px;
  padding:10px 13px;font:600 12.5px/1.45 var(--font)}
.acm-note{margin-top:10px;background:#FEF3DC;color:#7a5410;border-radius:12px;
  padding:9px 12px;font:600 11.5px/1.45 var(--font)}

/* Le mouvement décoratif ne doit pas s'imposer à qui le refuse. */
@media(prefers-reduced-motion:reduce){
  .acm-glow,.acm-beams i{animation:none}
  .acm-card{transition:none}
}
@media(max-width:520px){ .acm-glass{padding:22px 18px} }