/* Compte HDS — même univers que la vitrine hdsstudio.fr : sombre, violet, premium. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }

:root {
  --fond: #09070f; --texte: #f5f1fc; --doux: #aaa2bf; --tres-doux: #726a88;
  --bord: rgba(255, 255, 255, .09); --bord-2: rgba(255, 255, 255, .16);
  --violet: #8b5cff; --lilas: #b9a2ff; --rose: #ff8fb8; --erreur: #ff8a9e; --ok: #6ee7b7;
  --degrade: linear-gradient(100deg, #b9a2ff 0%, #8b5cff 32%, #c26bf0 64%, #ff8fb8 100%);
  --courbe: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--fond); color: var(--texte); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.ciel { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurore { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.a1 { left: -25vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(139, 92, 255, .32), transparent 72%); animation: d1 26s ease-in-out infinite alternate; }
.a2 { right: -28vmax; top: 15vh; background: radial-gradient(closest-side, rgba(194, 71, 224, .2), transparent 72%); animation: d2 32s ease-in-out infinite alternate; }
.a3 { left: 15vw; bottom: -45vmax; background: radial-gradient(closest-side, rgba(79, 70, 229, .22), transparent 72%); animation: d1 38s ease-in-out infinite alternate-reverse; }
@keyframes d1 { to { transform: translate3d(12vmax, 10vmax, 0) scale(1.12); } }
@keyframes d2 { to { transform: translate3d(-14vmax, 12vmax, 0) scale(.92); } }

.entete { display: flex; align-items: center; height: 70px; padding: 0 max(22px, calc((100vw - 1100px) / 2)); }
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.marque img { border-radius: 9px; box-shadow: 0 6px 20px -6px rgba(139, 92, 255, .8); }
.marque b { font-weight: 800; }

.zone { flex: 1; display: grid; place-items: center; padding: 10px 18px 60px; }
.carte {
  width: min(440px, 100%); padding: 34px 30px 30px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 0 0 1px var(--bord) inset, 0 40px 90px -40px rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: arrive .6s var(--courbe) both;
}
.carte.large { width: min(560px, 100%); }
@keyframes arrive { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); } }

h1 { margin: 0 0 8px; font-size: 28px; font-weight: 780; letter-spacing: -.035em; line-height: 1.1; }
h2 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tres-doux); }
.degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro { margin: 0 0 24px; color: var(--doux); line-height: 1.55; font-size: 15.5px; }
.applis { display: flex; gap: 8px; margin: 0 0 22px; }
.applis img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8); }

.bouton {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #a582ff, #7b4dff); color: #fff; font-weight: 650; font-size: 15.5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 30px -12px rgba(139, 92, 255, .9);
  transition: transform .3s var(--courbe), box-shadow .3s, opacity .2s;
}
.bouton:hover { transform: translateY(-1px); }
a.bouton { text-decoration: none; }
.bouton:disabled { opacity: .6; cursor: default; transform: none; }
.bouton.google { background: #fff; color: #1f1f1f; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .9); }
.bouton.fantome { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--bord-2) inset; }
.bouton.danger { background: rgba(255, 90, 110, .12); color: var(--erreur); box-shadow: 0 0 0 1px rgba(255, 90, 110, .25) inset; }
.bouton.petit { width: auto; height: 38px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.g-logo { width: 20px; height: 20px; }

.ou { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--tres-doux); font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--bord-2); }

.onglets { display: flex; padding: 4px; margin: 0 0 18px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--bord) inset; }
.onglets button { flex: 1; height: 38px; border: 0; border-radius: 11px; background: none; color: var(--doux); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .25s, color .25s; }
.onglets button.actif { background: rgba(139, 92, 255, .9); color: #fff; }

form { display: grid; gap: 12px; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--doux); }
input {
  width: 100%; height: 50px; padding: 0 15px; border: 0; border-radius: 14px; outline: none;
  background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--bord-2) inset; color: #fff; font: 500 15.5px 'Inter', system-ui, sans-serif;
  transition: box-shadow .2s, background .2s;
}
input:focus { box-shadow: 0 0 0 2px var(--violet) inset; background: rgba(139, 92, 255, .08); }
.message { min-height: 20px; margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--erreur); }
.message.ok { color: var(--ok); }
.lien { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--doux); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.lien:hover { color: var(--texte); }

.cases { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.cases input { width: 48px; height: 58px; padding: 0; text-align: center; font-size: 24px; font-weight: 800; }

.tourne { width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--violet); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.attente { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 18px; color: var(--doux); font-weight: 600; }
.attente .tourne { margin: 0; width: 22px; height: 22px; }

.profil { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--degrade); font-size: 26px; font-weight: 800; color: #fff; box-shadow: 0 10px 30px -10px rgba(139, 92, 255, .9); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil b { display: block; font-size: 21px; letter-spacing: -.02em; }
.profil span { color: var(--doux); font-size: 14.5px; }
.bloc { margin: 0 0 18px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 1px var(--bord) inset; }
.ligne { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.ligne + .ligne { border-top: 1px solid var(--bord); }
.ligne .texte { flex: 1; min-width: 0; }
.ligne .texte b { display: block; font-size: 15px; }
.ligne .texte small { display: block; margin-top: 2px; color: var(--doux); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.pastille { display: inline-block; padding: 3px 9px; border-radius: 99px; background: rgba(110, 231, 183, .12); color: var(--ok); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }

.feuille-fond { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(5, 3, 10, .72); backdrop-filter: blur(6px); animation: fondu .25s both; }
@keyframes fondu { from { opacity: 0; } }
.sans-js { text-align: center; color: var(--doux); }

@media (max-width: 480px) {
  .carte { padding: 28px 20px 24px; border-radius: 26px; }
  h1 { font-size: 25px; }
  .cases input { width: 42px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }