/* account.css
 *
 * Feuille de style partagee entre login.html, index.html et admin.html
 * (compte account.rvkxse.com). Auparavant dupliquee inline dans un seul
 * gros index.html qui melait connexion/profil/admin ; extraite ici pour
 * que les 3 pages restent visuellement identiques sans copier-coller le
 * CSS trois fois. Toute regle specifique a un seul ecran (ex: #login-screen,
 * #admin-screen) reste presente mais n'a simplement aucun effet sur les
 * pages qui n'ont pas l'element correspondant dans leur DOM.
 */


  :root {
    --bg: #06070c;
    --bg-elevated: #0a0b12;
    --panel: #12141e;
    --panel-2: #171a26;
    --border: #21242f;
    --border-strong: #333a4d;
    --ink: #eef0f8;
    --muted: #8991ac;
    --muted-2: #5c6377;
    --accent: #7c5cff;
    --accent-hover: #8f6dff;
    --accent-soft: rgba(124,92,255,0.13);
    --accent-2: #33d6c0;
    --accent-2-soft: rgba(51,214,192,0.13);
    --green: #43c98d;
    --green-soft: rgba(67,201,141,0.13);
    --red: #f0665f;
    --red-soft: rgba(240,102,95,0.13);
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.35), 0 16px 40px -24px rgba(0,0,0,0.7);
    --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4), 0 20px 48px -20px rgba(0,0,0,0.75);
    --shadow-pop: 0 24px 70px -20px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.03) inset;
  }
  * { box-sizing: border-box; }
  html { color-scheme: dark; }
  body {
    margin: 0; min-height: 100vh; font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 900px 520px at 14% -8%, rgba(124,92,255,0.11), transparent 58%),
      radial-gradient(ellipse 760px 480px at 100% 8%, rgba(51,214,192,0.055), transparent 55%),
      radial-gradient(ellipse 900px 500px at 50% 120%, rgba(124,92,255,0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    letter-spacing: -0.005em;
    overflow-x: hidden;
    overflow-y: auto;}
  header {
    position: sticky; top: 0; z-index: 40;
    padding: 0 28px;
    display: flex; align-items: center;
    background: rgba(6,7,12,0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
  }
  .header-inner {
    width: 100%; margin: 0; max-width: none;
    padding: 16px 0; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  }
  header img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(124,92,255,0.75); }
  header h1 {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: 15.5px; letter-spacing: 0.01em; text-transform: uppercase;
  }
  header h1 span { color: var(--accent-2); font-weight: 600; }

  main { max-width: 640px; margin: 0 auto; padding: 48px 20px 90px; }

  #login-screen {
    display: none;
    max-width: 400px; margin: 64px auto 0; padding: 40px 36px 36px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--border); border-top: 1px solid rgba(124,92,255,0.5);
    border-radius: var(--radius); text-align: center;
    box-shadow: var(--shadow-pop);
  }
  #login-screen img { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 18px; box-shadow: 0 10px 24px -10px rgba(124,92,255,0.65); }
  #login-screen h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
  #login-screen p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 26px; }
  #telegram-login-container { display: flex; justify-content: center; width: 100%; }

  .auth-tabs { display: flex; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 20px; }
  .auth-tab { flex: 1; border: none; background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
  .auth-tab:hover { color: var(--ink); }
  .auth-tab.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px -6px rgba(124,92,255,0.8); }

  #local-auth-form, #admin-auth-form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 22px; }
  #local-auth-form input, #admin-auth-form input {
    background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--ink);
    border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; font-family: inherit; width: 100%;
    transition: border-color .15s, box-shadow .15s;
  }
  #local-auth-form input:focus, #admin-auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  #local-auth-form input::placeholder, #admin-auth-form input::placeholder { color: var(--muted-2); }
  #local-auth-form .error, #admin-auth-form .error { color: var(--red); font-size: 12.5px; display: none; }
  #local-auth-form button[type="submit"], #admin-auth-form button[type="submit"] { margin-top: 6px; padding: 11px; font-size: 13.5px; font-weight: 600; }
  #login-screen p a { color: var(--accent); }
  .hint { color: var(--muted-2); font-size: 11.5px; margin: -4px 0 0; line-height: 1.5; }

  .auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0; }
  .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  #app-screen { display: none; }
  #app-screen.active { display: block; }
  .greeting { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
  .greeting b { color: var(--ink); }

  .profile-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 26px 24px; margin-bottom: 24px;
    box-shadow: var(--shadow-card);
  }
  .profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
  .profile-avatar {
    position: relative;
    width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), #4a2fc4);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff;
    overflow: hidden; cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(124,92,255,0.7);
  }
  .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .profile-avatar .avatar-edit {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(8,9,15,0.55); color: #fff; font-size: 10px; font-weight: 600;
    opacity: 0; transition: opacity 0.15s;
  }
  .profile-avatar:hover .avatar-edit { opacity: 1; }
  .profile-avatar-actions { display: flex; flex-direction: column; gap: 4px; }
  .avatar-remove-link { color: var(--muted-2); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
  .avatar-remove-link:hover { color: var(--red); }
  .assoc-link { display: block; margin-top: 4px; color: var(--accent-2); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
  .assoc-link:hover { color: var(--accent); }
  .profile-title { font-weight: 700; font-size: 16.5px; font-family: var(--font-display); letter-spacing: -0.01em; }
  .profile-sub { color: var(--muted-2); font-size: 12px; margin-top: 2px; }

  .profile-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
    padding-top: 18px; border-top: 1px solid var(--border);
  }
  .profile-field .label { color: var(--muted-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .profile-field .value { color: var(--ink); font-size: 13.5px; margin-top: 4px; word-break: break-word; }
  .profile-field .value.dim { color: var(--muted); }
  .badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
    padding: 2px 9px; border-radius: 20px; font-weight: 600; letter-spacing: 0.02em;
  }
  .badge.on { background: var(--green-soft); color: var(--green); }
  .badge.off { background: var(--panel-2); color: var(--muted-2); border: 1px solid var(--border); }

  .section-label { color: var(--muted-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 12px 2px; }

  .service-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px;
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .service-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }
  .service-icon {
    width: 60px; height: 60px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6);
  }
  /* AVANT : une regle .service-icon.<key> par service (mail, cloud), a
     ajouter en dur ici a chaque nouveau service. Corrige : la couleur du
     degrade est calculee dynamiquement en JS (buildServiceIcon) a partir de
     la cle du service, donc aucune regle CSS specifique n'est plus requise
     quel que soit le service ajoute depuis le panel admin.
     Logo redimensionne pour remplir entierement le cadre (au lieu de 92%
     + object-fit:contain qui laissait une marge et pouvait rogner un logo
     non carre sans jamais le faire deborder) : 100% + object-fit:cover
     + overflow:hidden sur le parent pour rester dans le border-radius. */
  .service-icon img { width: 100%; height: 100%; object-fit: cover; }

  .service-body { flex: 1; min-width: 0; }
  .service-name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; }
  .service-status { font-size: 12px; margin-top: 4px; font-weight: 500; }
  .service-status.linked { color: var(--green); }
  .service-status.unlinked { color: var(--muted-2); }
  .service-status.unavailable { color: var(--red); }

  .btn {
    border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--ink);
    padding: 8px 15px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s, transform .1s, box-shadow .15s;
  }
  .btn:hover { border-color: var(--border-strong); background: #1d2130; }
  .btn:active { transform: translateY(1px); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(124,92,255,0.75); }
  .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

  .link-form { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-direction: column; gap: 10px; }
  .link-form.open { display: flex; }
  .link-form input {
    background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--ink);
    border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  .link-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .link-form .error { color: var(--red); font-size: 12.5px; display: none; }
  .link-form .actions { display: flex; gap: 8px; }

  footer { text-align: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
  #logout-link, #admin-link { color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: color 0.15s, text-decoration-color 0.15s; }
  #logout-link:hover { color: var(--ink); text-decoration-color: var(--muted); }
  #admin-link { color: var(--accent-2); }
  #admin-link:hover { text-decoration-color: var(--accent-2); }

  /* ==================== SUPPRESSION DE COMPTE ==================== */
  .delete-account-anchor { position: relative; display: inline-flex; }

  .btn.danger-ghost {
    background: transparent; border: none; color: var(--muted);
    font-size: 12.5px; padding: 0; text-decoration: underline; text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s;
  }
  .btn.danger-ghost:hover { color: var(--red); text-decoration-color: var(--red); }

  .delete-account-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: min(320px, 88vw);
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 1px solid rgba(240,102,95,0.55);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 20px 18px 16px;
    text-align: left;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.14s ease-out, transform 0.14s ease-out;
  }
  .delete-account-popup.open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
  .delete-account-arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .delete-account-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--red-soft); color: var(--red);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .delete-account-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
  }
  .delete-account-help {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  .delete-account-help strong { color: var(--ink); }
  .delete-account-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .delete-account-field label { color: var(--muted-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
  .delete-account-keyword { color: var(--red); letter-spacing: 0.03em; }
  .delete-account-popup input {
    background: var(--bg); border: 1px solid var(--border-strong); color: var(--ink);
    border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: inherit; width: 100%;
    transition: border-color 0.15s;
  }
  .delete-account-popup input:focus { outline: none; border-color: var(--red); }
  #delete-account-confirm-text { text-transform: uppercase; letter-spacing: 0.04em; }
  #delete-account-error { margin-bottom: 4px; }
  .delete-account-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .delete-account-actions .btn { padding: 7px 12px; font-size: 12.5px; }
  .btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
  .btn.danger:hover:not(:disabled) { background: #ff7a72; border-color: #ff7a72; }
  .btn.danger:disabled { background: var(--panel-2); border-color: var(--border); color: var(--muted-2); cursor: not-allowed; }

  /* ==================== PANEL ADMIN ==================== */
  #admin-screen { display: none; }
  #admin-screen.active { display: block; }
  .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .admin-header h2 { margin: 0; font-family: var(--font-display); font-size: 18px; }
  .admin-back { color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; }

  .admin-row {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 15px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-card);
    transition: border-color .15s;
  }
  .admin-row:hover { border-color: var(--border-strong); }
  /* Correctif (voir conversation) : cette colonne se faisait ecraser bien
     en dessous de 220px par .admin-row-actions des qu'une ligne contenait
     beaucoup de controles (ex: ligne fusionnee app+service avec 2 toggles
     + 3 boutons) — visible surtout quand admin-row-sub commence par un mot
     non coupable (URL) qui se retrouvait alors casse caractere par
     caractere. flex-shrink:0 garantit desormais que cette colonne ne
     descend JAMAIS sous sa largeur minimale : c'est .admin-row-actions qui
     passe a la ligne suivante (deja permis par flex-wrap:wrap sur
     .admin-row) quand la place manque, plutot que d'ecraser le texte. */
  .admin-row-body { flex: 1 1 320px; min-width: 320px; flex-shrink: 0; }
  /* Nom + badges restent toujours sur la meme ligne (comme "RVKXSE MAIL")
     au lieu de se scinder ("RVKXSE CLOUD" sur une ligne, badges en
     dessous) : c'est .admin-row-actions (boutons Modifier/Supprimer) qui
     passe a la ligne suivante quand la carte est trop etroite, jamais le
     titre lui-meme. */
  .admin-row-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  /* Regroupe les badges "App"/"Service" d'une ligne combinee en une seule
     unite flex : soit ils tiennent tous les deux a cote du nom, soit ils
     passent TOUS les deux a la ligne suivante ensemble - jamais l'un a
     cote du nom et l'autre isole tout seul en dessous. */
  .admin-row-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  /* word-break: break-word (retire) etait trop agressif : combine a une
     colonne etroite, il coupait un mot non coupable (URL) lettre par
     lettre au lieu de le couper a un endroit lisible. overflow-wrap seul
     suffit a empecher tout debordement, en ne cassant qu'en dernier
     recours. */
  .admin-row-sub { color: var(--muted-2); font-size: 12px; margin-top: 3px; overflow-wrap: break-word; }
  .admin-empty { color: var(--muted-2); font-size: 13px; padding: 6px 2px 18px; }

  /* Regroupe toggles + boutons d'une ligne admin (voir admin.html) : evite
     que chaque controle wrap independamment quand ils sont trop nombreux
     (ex: ligne fusionnee app+service, 2 toggles + 3 boutons) -> ils
     passent ensemble a la ligne suivante plutot que d'ecraser
     .admin-row-body a une largeur illisible. */
  .admin-row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

  .admin-user-services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .admin-svc-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
    padding: 3px 9px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted-2);
  }
  .admin-svc-pill.linked { color: var(--green); border-color: rgba(67,201,141,0.3); }
  .admin-svc-pill .unlink-x { cursor: pointer; color: var(--red); font-weight: 700; }

  /* Badge d'etat active/desactive d'une app (voir renderAdminApps). */
  .admin-app-status { color: var(--muted-2); }
  .admin-app-status.enabled { color: var(--green); border-color: rgba(67,201,141,0.3); }
  .admin-app-status.disabled { color: var(--muted); border-color: var(--border-strong); }

  /* Switch on/off pour activer/desactiver une app (voir renderAdminApps).
     Checkbox natif cache pour l'accessibilite (focus/clavier/lecteur
     d'ecran), piste + curseur en CSS pur par-dessus. */
  .toggle-switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
  .toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
  .toggle-switch .track {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    transition: background .15s ease, border-color .15s ease;
  }
  .toggle-switch .thumb {
    position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: transform .15s ease, background .15s ease;
  }
  .toggle-switch input:checked ~ .track { background: var(--green-soft); border-color: var(--green); }
  .toggle-switch input:checked ~ .thumb { transform: translateX(18px); background: var(--green); }
  .toggle-switch input:focus-visible ~ .track { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
  .toggle-switch input:disabled { cursor: default; }
  .toggle-switch input:disabled ~ .track { opacity: 0.5; }

  #admin-add-app-form { display: none; }
  #admin-add-app-form.open { display: flex; }
  .admin-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

  /* ==================== SCROLLS ====================
     Pas de scrollbars globales inutiles.
     Les zones fonctionnelles qui en ont besoin gardent leur propre scroll. */
  html, body {
    overflow-x: hidden;
  }
  body {
    overflow-y: auto;
  }

  /* ==================== RECADRAGE PHOTO DE PROFIL ==================== */
  #avatar-crop-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.78);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  #avatar-crop-modal.open { display: flex; }
  .avatar-crop-dialog {
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    padding: 20px;
  }
  .avatar-crop-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 17px;
  }
  .avatar-crop-help {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 12.5px;
  }
  #avatar-crop-stage {
    position: relative;
    width: 100%;
    height: min(58vh, 360px);
    min-height: 260px;
    overflow: hidden;
    border-radius: 10px;
    background: #05060a;
    border: 1px solid var(--border);
    touch-action: none;
    cursor: grab;
  }
  #avatar-crop-stage.dragging { cursor: grabbing; }
  #avatar-crop-image {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transform-origin: 0 0;
  }
  #avatar-crop-stage::after {
    content: "";
    position: absolute;
    width: min(78%, 300px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.48);
    pointer-events: none;
  }
  .avatar-crop-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .avatar-crop-controls label {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
  }
  #avatar-crop-zoom {
    flex: 1;
    accent-color: var(--accent);
  }
  .avatar-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
  }
  @media (max-width: 480px) {
    #avatar-crop-modal { padding: 10px; }
    .avatar-crop-dialog { padding: 14px; }
    #avatar-crop-stage { height: 58vh; min-height: 240px; }
  }


  /* Masquer visuellement la scrollbar principale à droite
     sans bloquer le défilement si le contenu dépasse l'écran. */
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }