/* ============================================================================
   BULLE — LIQUID GLASS
   ----------------------------------------------------------------------------
   Couche de design centralisée. Ce fichier est chargé APRÈS « style.css » :
   il habille tout le site (appli, réglages, social, fenêtres, connexion,
   pages autonomes, administration) avec un même langage « verre liquide ».

   Principes :
   • Aucune couleur figée : tout dérive des jetons du thème (--violet, --fond,
     --panneau, --accent-2, --accent-3, --or, --texte…) et respecte donc le
     thème clair/sombre ainsi que la personnalisation Bull+ de chaque membre.
   • Le verre est STRUCTUREL (flou d'arrière-plan, liserés, reflets, profondeur)
     et non chromatique : l'identité Bulle (violet, bulles, arrondis) demeure.
   • Les animations utilisent les durées du thème quand elles existent
     (--t-fast, --t-med, --ease) et retombent sur des valeurs sûres sinon.
   ========================================================================== */

/* ==========================================================================
   1. JETONS LIQUID GLASS
   ========================================================================== */
:root {
  /* Rayons (le thème peut les resserrer via --rc-card / --rc-btn) */
  --lg-r-sm: 12px;
  --lg-r-md: 18px;
  --lg-r-lg: 24px;
  --lg-r-xl: 30px;

  /* Flou / saturation du verre */
  --lg-blur: 18px;
  --lg-blur-sm: 10px;
  --lg-blur-lg: 26px;
  --lg-sat: 180%;

  /* Taux de teinte des surfaces (plus le % est bas, plus c'est transparent) */
  --lg-tint-1: 68%; /* panneaux principaux */
  --lg-tint-2: 50%; /* panneaux secondaires */
  --lg-tint-3: 34%; /* surfaces légères */

  /* Teintes de verre, dérivées du panneau du thème */
  --lg-glass-1: color-mix(in srgb, var(--panneau, #fff) var(--lg-tint-1), transparent);
  --lg-glass-2: color-mix(in srgb, var(--panneau, #fff) var(--lg-tint-2), transparent);
  --lg-glass-3: color-mix(in srgb, var(--panneau, #fff) var(--lg-tint-3), transparent);
  --lg-glass-rail: color-mix(in srgb, var(--rail, var(--panneau, #fff)) 58%, transparent);

  /* Liserés lumineux (bords de verre) */
  --lg-stroke: color-mix(in srgb, #fff 62%, color-mix(in srgb, var(--violet, #6E45D9) 22%, transparent));
  --lg-stroke-soft: color-mix(in srgb, #fff 42%, transparent);

  /* Reflet spéculaire (haut-gauche) + léger glacis vertical */
  --lg-specular:
    radial-gradient(140% 96% at 14% -24%, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 44%);

  /* Relief interne (relief du bord supérieur) */
  --lg-inset:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 1px 0 0 rgba(255, 255, 255, .16);

  /* Profondeur douce */
  --lg-shadow:
    0 22px 48px -22px rgba(var(--shadow-rgb, 80, 62, 130), .58),
    0 7px 18px -12px rgba(var(--shadow-rgb, 80, 62, 130), .42);
  --lg-shadow-sm:
    0 10px 26px -16px rgba(var(--shadow-rgb, 80, 62, 130), .48);

  /* Courbes élastiques */
  --lg-ease: cubic-bezier(.22, 1.32, .36, 1);
  --lg-ease-soft: cubic-bezier(.4, .1, .2, 1);
}

html[data-theme="dark"] {
  --lg-tint-1: 62%;
  --lg-tint-2: 46%;
  --lg-tint-3: 30%;

  --lg-stroke: color-mix(in srgb, #fff 20%, color-mix(in srgb, var(--violet, #9B7BFF) 26%, transparent));
  --lg-stroke-soft: color-mix(in srgb, #fff 12%, transparent);

  --lg-specular:
    radial-gradient(140% 96% at 14% -24%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 46%);

  --lg-inset:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .38),
    inset 1px 0 0 rgba(255, 255, 255, .05);

  --lg-shadow:
    0 24px 54px -24px rgba(0, 0, 0, .78),
    0 8px 20px -12px rgba(0, 0, 0, .55);
  --lg-shadow-sm:
    0 10px 26px -14px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   2. FOND VIVANT (« couleurs floutées derrière les surfaces »)
   ========================================================================== */
html {
  background: var(--fond, #F7F5FC);
  min-height: 100%;
}
body {
  /* Le dégradé animé vit sur <html> : le corps devient transparent partout. */
  background: transparent;
  background-image: none;
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
html::before {
  background:
    radial-gradient(44vmax 44vmax at 12% 10%, color-mix(in srgb, var(--violet, #6E45D9) 34%, transparent), transparent 62%),
    radial-gradient(38vmax 38vmax at 88% 16%, color-mix(in srgb, var(--accent-2, #E0559B) 30%, transparent), transparent 62%),
    radial-gradient(46vmax 46vmax at 80% 92%, color-mix(in srgb, var(--accent-3, #2BB6C4) 28%, transparent), transparent 64%),
    radial-gradient(30vmax 30vmax at 16% 88%, color-mix(in srgb, var(--or, #FFD93D) 24%, transparent), transparent 66%);
  opacity: .9;
  animation: lg-drift-a 30s var(--lg-ease-soft) infinite alternate;
}
html::after {
  background:
    radial-gradient(36vmax 36vmax at 64% 44%, color-mix(in srgb, var(--violet, #6E45D9) 22%, transparent), transparent 60%),
    radial-gradient(28vmax 28vmax at 28% 64%, color-mix(in srgb, var(--accent-2, #E0559B) 22%, transparent), transparent 62%);
  opacity: .72;
  animation: lg-drift-b 44s var(--lg-ease-soft) infinite alternate;
}
@keyframes lg-drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(-2deg); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.13) rotate(2deg); }
}
@keyframes lg-drift-b {
  from { transform: translate3d(4%, 3%, 0) scale(1.1) rotate(3deg); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.02) rotate(-3deg); }
}

/* Recette réutilisable : n'importe quel bloc peut devenir une surface de verre */
.lg-glass {
  position: relative;
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
}

/* ==========================================================================
   3. CHARGEMENT / OUVERTURE (animations élastiques partagées)
   ========================================================================== */
@keyframes lg-pop-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.965); }
  62%  { opacity: 1; transform: translateY(0) scale(1.012); }
  100% { opacity: 1; transform: none; }
}
@keyframes lg-bubble-in {
  0%   { opacity: 0; transform: scale(.86); }
  70%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes lg-halo {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .8;  transform: scale(1.05); }
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.btn {
  position: relative;
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  transition:
    transform var(--t-fast, .14s) var(--lg-ease),
    background-color var(--t-fast, .14s) var(--lg-ease-soft),
    box-shadow var(--t-fast, .14s) var(--lg-ease-soft),
    border-color var(--t-fast, .14s) var(--lg-ease-soft);
}
.btn:hover { transform: translateY(-2px) scale(1.018); }
.btn:active { transform: translateY(0) scale(.965); }

/* Boutons neutres uniquement : les variantes colorées (vert, rouge, or,
   fantôme, doux) conservent leur teinte d'origine. */
.btn:not(.btn-primary):not(.btn-soft):not(.btn-green):not(.btn-red):not(.btn-gold):not(.btn-ghost-red) {
  background-color: color-mix(in srgb, var(--panneau, #fff) 30%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--btn-shadow, var(--lg-shadow-sm)), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Bouton principal : reflet spéculaire qui glisse au survol, posé sous le
   texte (z-index négatif) et donc compatible avec le thème clair ET sombre. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%),
    linear-gradient(100deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0) 68%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, 135% 0;
  background-repeat: no-repeat;
  transition: background-position .6s var(--lg-ease-soft);
}
.btn-primary:hover::after { background-position: 0 0, -25% 0; }

.btn-soft {
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.icon-btn {
  border-radius: 12px;
  transition: background var(--t-fast, .14s) var(--lg-ease-soft),
              color var(--t-fast, .14s) var(--lg-ease-soft),
              transform var(--t-fast, .14s) var(--lg-ease);
}
.icon-btn:hover {
  background: var(--violet-clair);
  color: var(--violet);
  transform: translateY(-1px);
}
.icon-btn:active:not([disabled]) { transform: translateY(0) scale(.92); }

/* ==========================================================================
   5. CHAMPS DE SAISIE
   ========================================================================== */
.input,
textarea.input,
select.input,
.field-box,
.auth-form input,
.auth-form .field-box,
.code-input {
  background-image: var(--lg-specular);
  background-color: var(--lg-glass-2);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  border-color: var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(255, 255, 255, .2);
  transition: border-color var(--t-fast, .14s) var(--lg-ease-soft),
              box-shadow var(--t-fast, .14s) var(--lg-ease-soft),
              background-color var(--t-fast, .14s) var(--lg-ease-soft);
}
.input:hover,
.field-box:hover { border-color: color-mix(in srgb, var(--violet) 30%, var(--lg-stroke-soft)); }
.input:focus,
textarea.input:focus,
select.input:focus,
.auth-form input:focus,
.field-box:focus-within {
  border-color: var(--violet);
  background-color: color-mix(in srgb, var(--panneau, #fff) 62%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.field-box input, .field-box input:focus { background: transparent; box-shadow: none; }

/* ==========================================================================
   6. ONGLETS / SEGMENTS / PASTILLES
   ========================================================================== */
.tabs,
.seg,
.social-tabs,
.share-grid + .seg {
  background-color: var(--lg-glass-3);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.tab.active,
.seg button.active {
  background-color: color-mix(in srgb, var(--panneau, #fff) 72%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: background-color var(--t-fast, .14s) var(--lg-ease-soft);
}
.chip {
  transition: background var(--t-fast, .14s) var(--lg-ease-soft),
              color var(--t-fast, .14s) var(--lg-ease-soft),
              transform var(--t-fast, .14s) var(--lg-ease);
}
.chip:hover { transform: translateY(-1px); }
.chip.active {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.status-pill, .tag, .role-chip, .tk-badge, .locked, .plus-exp, .plus-source {
  border: 1px solid var(--lg-stroke-soft);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ==========================================================================
   7. APPLICATION — rail, salons, zone principale, membres
   ========================================================================== */
.rail {
  background-color: var(--lg-glass-rail);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-right: 1px solid var(--lg-stroke-soft);
}
.side {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-right: 1px solid var(--lg-stroke-soft);
}
.main {
  background-color: color-mix(in srgb, var(--fond, #FFF7EE) 82%, transparent);
}
.main-head {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-bottom: 1px solid var(--lg-stroke-soft);
}
.members {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-left: 1px solid var(--lg-stroke-soft);
}
.me-panel {
  background-color: var(--lg-glass-2);
  border-top: 1px solid var(--lg-stroke-soft);
}

/* Boutons du rail (bulles) : relief de verre + réaction élastique */
.bubble {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), var(--lg-shadow-sm);
  transition: border-radius var(--t-med, .26s) var(--lg-ease),
              transform var(--t-med, .26s) var(--lg-ease),
              box-shadow var(--t-med, .26s) var(--lg-ease-soft);
}
.bubble:hover { transform: translateY(-2px) scale(1.04); }
.bubble:active { transform: translateY(0) scale(.95); }
.bubble.add {
  background-color: var(--lg-glass-2);
  border: 2px dashed var(--ligne-2);
  box-shadow: none;
}
.bubble.plus { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--or, #FFD93D) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bubble.admin { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.bubble.notifs { background-color: var(--lg-glass-2); }
.bubble.social {
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--violet) 72%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bubble.social:hover {
  box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--violet) 82%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Éléments de liste : survol « verre » doux */
.item,
.member,
.role-item,
.settings-nav button,
.cmdk-item,
.menu-item,
.notif-row,
.viewer-row,
.notif-item,
.cmdk-item {
  transition: background var(--t-fast, .14s) var(--lg-ease-soft),
              color var(--t-fast, .14s) var(--lg-ease-soft),
              transform var(--t-fast, .14s) var(--lg-ease);
}
.item.active,
.role-item.active,
.notif-row.unread,
.notif-item.unread {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Barre d'appel en cours */
.voice-bar {
  background-color: color-mix(in srgb, var(--vert) 16%, var(--lg-glass-2));
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.voice-bar-btns .vb { background-color: var(--lg-glass-1); border: 1px solid var(--lg-stroke-soft); }

/* Écran vocal */
.voice-tile {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow), var(--lg-inset);
  transition: transform var(--t-med, .26s) var(--lg-ease), box-shadow var(--t-med, .26s) var(--lg-ease-soft);
}
.voice-tile:not(.video):hover { transform: translateY(-3px); }
.call-ctrl {
  background-color: var(--lg-glass-1);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform var(--t-fast, .14s) var(--lg-ease), background var(--t-fast, .14s) var(--lg-ease-soft);
}
.call-ctrl:hover { transform: translateY(-2px) scale(1.05); }

/* ==========================================================================
   8. COMPOSITEUR, RÉPONSES, PIÈCES JOINTES
   ========================================================================== */
.composer form {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  transition: box-shadow var(--t-med, .26s) var(--lg-ease-soft), border-color var(--t-fast, .14s) var(--lg-ease-soft);
}
.composer form:focus-within {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--lg-stroke));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent), var(--lg-shadow), var(--lg-inset);
}
.reply-bar {
  background-color: var(--lg-glass-1);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  border: 1px solid var(--lg-stroke-soft);
  border-left: 3px solid var(--violet);
  box-shadow: var(--lg-shadow-sm);
}
.att-tray {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.att-card {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.att-sizes button { background-color: var(--lg-glass-1); border: 1px solid var(--lg-stroke-soft); }
.att-sizes button[aria-pressed="true"] { background: var(--violet); border-color: transparent; }
.voice-player {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.scroll-down {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.msg {
  transition: background var(--t-fast, .14s) var(--lg-ease-soft);
}
.msg-act {
  background-color: var(--lg-glass-1);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  box-shadow: var(--lg-shadow-sm);
}
.drop-zone > div {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 3px dashed var(--violet);
  box-shadow: var(--lg-shadow), var(--lg-inset);
}

/* ==========================================================================
   9. FENÊTRES, PANNEAUX, PARAMÈTRES, STUDIO
   ========================================================================== */
.modal-back {
  background: var(--voile);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  border-radius: var(--rc-modal, 26px);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  animation: lg-pop-in var(--t-med, .26s) var(--lg-ease);
}
.modal-close-x, .reply-bar-x { transition: background var(--t-fast, .14s) var(--lg-ease-soft); }

.choice, .radio-row label, .gift-user, .recap, .perk, .friend-row, .add-box, .share-prof {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform var(--t-fast, .14s) var(--lg-ease), border-color var(--t-fast, .14s) var(--lg-ease-soft), box-shadow var(--t-fast, .14s) var(--lg-ease-soft);
}
.friend-row:hover, .gift-user:hover, .choice:hover, .share-prof:hover { transform: translateY(-2px); }
.invite-code code, .secret, .backup-grid code, .kbd, .cmdk-kbd {
  background-color: var(--lg-glass-3);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Paramètres (plein écran) */
.settings {
  background-color: color-mix(in srgb, var(--fond, #F7F5FC) 80%, transparent);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
}
.settings-nav {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.settings-nav button.active {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.settings-close svg { border-color: var(--lg-stroke-soft); background-image: var(--lg-specular); }

.card {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
}
.account-hero, .pc-box, .plus-hero, .bs-preview {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.plus-hero { background-image: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%), var(--lg-specular); }
.theme-opt { background-color: var(--lg-glass-3); border: 3px solid var(--lg-stroke-soft); }
.theme-opt[aria-pressed="true"] { border-color: var(--violet); }
.toggle span { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.toggle span::after { box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.row ~ .row { border-top: 1px solid var(--lg-stroke-soft); }
.list-row { border-top: 1px solid var(--lg-stroke-soft); }

/* Points clés d'un compte / aperçu de profil */
.account-hero .banner, .profile-card .banner { border-radius: inherit; }

/* Bull+ Studio (plein écran) */
.bull-studio {
  background-color: color-mix(in srgb, var(--fond, #F7F5FC) 80%, transparent);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
}
.bull-studio .bs-nav {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  border-right: 1px solid var(--lg-stroke-soft);
}
.bull-studio .bs-head, .bull-studio .bs-toolbar {
  background-color: var(--lg-glass-1);
  border-color: var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.bull-studio .bs-nav button.active {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.bull-studio .bs-preset, .bull-studio .bs-color, .bull-studio .bs-slider, .bull-studio .bs-preview {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.bull-studio .bs-preset { transition: transform var(--t-fast, .14s) var(--lg-ease), border-color var(--t-fast, .14s) var(--lg-ease-soft); }
.bull-studio .bs-preset:hover { transform: translateY(-2px); }
.bull-studio .bs-bubble { background-color: var(--lg-glass-2); border: 1px solid var(--lg-stroke-soft); }

/* Support & administration (fenêtres dédiées) */
.support-panel, .admin-panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.support-box, .admin-box {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  animation: lg-pop-in var(--t-med, .26s) var(--lg-ease);
}
.support-head, .admin-head {
  background-color: var(--lg-glass-2);
  border-bottom: 1px solid var(--lg-stroke-soft);
}
.admin-frame { background: transparent; }
.tk-item, .tk-msg {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tk-item:hover { transform: translateY(-2px); }
.tk-msg.staff { background-color: color-mix(in srgb, var(--violet) 14%, var(--lg-glass-2)); }
.tk-empty { background-color: var(--lg-glass-3); border-color: var(--ligne-2); }

/* ==========================================================================
   10. NOTIFICATIONS, TOASTS, PALETTE DE COMMANDES, MENUS
   ========================================================================== */
.notif-center {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  animation: lg-pop-in var(--t-med, .26s) var(--lg-ease);
}
.notif-center header { border-bottom: 1px solid var(--lg-stroke-soft); }
.notif-item .ni-ic, .cmdk-item .ci-ic, .notif-ic {
  background-color: var(--lg-glass-3);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.vol-menu, .mention-pop, .emoji-panel {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  animation: lg-pop-in var(--t-fast, .14s) var(--lg-ease);
}
.mention-pop button:hover, .menu-item:hover, .viewer-row:hover { background: var(--survol); }

.cmdk-list { scrollbar-width: thin; }
.cmdk {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: 0 30px 70px -30px rgba(var(--shadow-rgb, 80, 62, 130), .8), var(--lg-inset);
  animation: lg-pop-in var(--t-med, .26s) var(--lg-ease);
}
.cmdk-item:hover, .cmdk-item.active {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Toasts : verre sombre translucide, lisible sur tous les fonds */
.toast-wrap .toast, #toast, .toast {
  background-color: color-mix(in srgb, var(--texte, #2B2340) 80%, transparent);
  background-image: var(--lg-specular);
  color: var(--panneau, #fff);
  backdrop-filter: blur(var(--lg-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.toast-wrap .toast.success, .toast.success { background-color: color-mix(in srgb, var(--vert) 88%, transparent); color: #fff; }
.toast-wrap .toast.error, .toast.error { background-color: color-mix(in srgb, var(--rouge) 88%, transparent); color: #fff; }
.toast-wrap .toast.warn, .toast.warn { background-color: color-mix(in srgb, var(--or) 90%, transparent); color: #fff; }

/* Bandeaux d'annonce (on ne touche pas à l'épaisseur : la barre de couleur
   latérale des types d'annonce est préservée) */
.announcement {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%);
  border-color: var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ==========================================================================
   11. RÉSEAU SOCIAL (publications, stories, commentaires)
   ========================================================================== */
.social-hero {
  box-shadow: 0 24px 52px -24px color-mix(in srgb, var(--violet) 80%, transparent);
  transition: transform var(--t-med, .26s) var(--lg-ease);
}
.social-tab.active {
  background-color: color-mix(in srgb, var(--violet) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.post {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow), var(--lg-inset);
  transition: transform var(--t-med, .26s) var(--lg-ease), box-shadow var(--t-med, .26s) var(--lg-ease-soft);
}
.post:hover { box-shadow: var(--lg-shadow), var(--lg-inset), 0 0 0 1px color-mix(in srgb, var(--violet) 16%, transparent); }
.post-media, .post-media img, .post-media video { border-radius: 14px; }
.post-act { transition: background var(--t-fast, .14s) var(--lg-ease-soft), color var(--t-fast, .14s) var(--lg-ease-soft), transform var(--t-fast, .14s) var(--lg-ease); }
.post-act:not(:disabled):hover { transform: translateY(-1px); }
.post-act.like:not(.on):hover { color: #E23A5A; }
.quote { background-color: var(--lg-glass-3); border: 1px solid var(--lg-stroke-soft); }
.story-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.story-item { transition: transform var(--t-fast, .14s) var(--lg-ease); }
.story-item:hover { transform: translateY(-2px); }
.story-ring.unseen { animation: lg-halo 3.2s ease-in-out infinite; }
.composer-modal .composer-head { border-bottom: 1px solid var(--lg-stroke-soft); padding-bottom: 10px; }
.composer-text, .comment-input { background-color: var(--lg-glass-2); border: 1px solid var(--lg-stroke-soft); }
.notif-ic { background-color: var(--lg-glass-3); border: 1px solid var(--lg-stroke-soft); }

/* ==========================================================================
   12. ÉCRAN DE CONNEXION / INSCRIPTION
   ========================================================================== */
.auth { background: transparent; }
.auth-blobs span { filter: blur(52px); }
.auth-card {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow), var(--lg-inset);
}
.auth-promo a {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
}
.auth-promo a:hover { background-color: var(--lg-glass-1); box-shadow: var(--lg-shadow-sm); }
.auth-info { background-color: var(--lg-glass-2); border: 1px solid var(--lg-stroke-soft); }
.auth-done .done-ic {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: lg-bubble-in .45s var(--lg-ease) both;
}
.form-error:not(:empty), #auth-error:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--rouge) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ==========================================================================
   12 bis. LIGHTBOX
   ========================================================================== */
.lightbox .lb-btn {
  background-color: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lb-btn:hover { background-color: color-mix(in srgb, #fff 22%, transparent); }

/* ==========================================================================
   13. PAGES AUTONOMES (Bulle+, paiement, téléchargement, hors ligne)
       Ces pages ne chargent pas style.css : on cible leurs classes propres.
   ========================================================================== */
.top {
  background-color: color-mix(in srgb, var(--fond, #F7F5FC) 62%, transparent);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-bottom: 1px solid var(--lg-stroke-soft);
}
.top .btn.soft, .top .btn.ghost { backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%); }

.card, .plan, .method, .notice, .recap, details, table.compare {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow), var(--lg-inset);
}
.plan.pop {
  border: 2px solid color-mix(in srgb, var(--or, #C08A1E) 60%, var(--lg-stroke));
  background-image:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--or, #C08A1E) 16%, transparent), transparent 60%),
    var(--lg-specular);
}
.perk, .perk .ic, kbd, .story-drop {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}
.perk { box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .32); }
table.compare thead th { background-color: var(--lg-glass-3); }
table.compare th, table.compare td { border-top: 1px solid var(--lg-stroke-soft); }
summary { transition: color var(--t-fast, .14s) var(--lg-ease-soft); }
.hero .chip, .hero .pill {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .4);
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(150%);
}
.brand .bubble, .logo .dot { box-shadow: 0 8px 20px color-mix(in srgb, var(--violet, #6E45D9) 45%, transparent); }
.step .num { box-shadow: 0 6px 16px color-mix(in srgb, var(--or, #C08A1E) 45%, transparent); }

/* Page hors ligne : le contenu devient une petite carte de verre */
body > div:only-of-type,
body > main { }
@media (max-width: 0px) { /* garde-fou : aucune règle vide intempestive */ }

/* ==========================================================================
   14. ADMINISTRATION (admin.css) — harmonisation du verre
   ========================================================================== */
.adm-body { background: transparent; }
.adm-side {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-right: 1px solid var(--lg-stroke-soft);
}
.adm-top {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-bottom: 1px solid var(--lg-stroke-soft);
}
.adm-main { background-color: color-mix(in srgb, var(--fond, #0B1712) 78%, transparent); }
.adm-nav button.active, .adm-link:hover {
  background-color: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.adm-table, .adm-table th, .adm-table td { border-color: var(--lg-stroke-soft); }
.offer-card, .role-card, .ann-card, .list-item, .perm, .kv, .skeleton, .priobox, .ann-card {
  background-color: var(--lg-glass-2);
  border: 1px solid var(--lg-stroke-soft);
  box-shadow: var(--lg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.adm-collapse, .adm-link { transition: background var(--t-fast, .14s) var(--lg-ease-soft), color var(--t-fast, .14s) var(--lg-ease-soft); }

/* ==========================================================================
   14 bis. COMPLÉMENTS D'INTERFACE
   ========================================================================== */
.cmdk-back {
  background: var(--voile);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.call-panel {
  background-color: var(--lg-glass-1);
  background-image: var(--lg-specular);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-bottom: 1px solid var(--lg-stroke-soft);
}

.bull-studio #bs-preview-col {
  background-color: var(--lg-glass-2);
  background-image: var(--lg-specular);
  border-left: 1px solid var(--lg-stroke-soft);
}

/* Carte de danger : conserve son liseré rouge (plus spécifique que .card) */
.danger-card { border-color: color-mix(in srgb, var(--rouge) 42%, transparent); }

/* Le conteneur d'annonces reste transparent ; seules les cartes sont en verre. */
.announce-wrap { background: none; }

/* ==========================================================================
   15. RESPONSIVE & PERFORMANCES
   ========================================================================== */
@media (max-width: 900px) {
  :root { --lg-blur: 14px; --lg-blur-lg: 18px; --lg-sat: 160%; }
}
@media (max-width: 620px) {
  /* Sur mobile : flous réduits et surfaces plus opaques pour rester lisibles
     et fluides. Le verre demeure, sans coût de rendu excessif. */
  :root {
    --lg-blur: 10px; --lg-blur-lg: 12px; --lg-blur-sm: 6px; --lg-sat: 150%;
    --lg-tint-1: 84%; --lg-tint-2: 70%; --lg-tint-3: 52%;
  }
  html::before { opacity: .8; animation-duration: 46s; }
  html::after { opacity: .6; animation-duration: 60s; }
  .main { background-color: color-mix(in srgb, var(--fond, #FFF7EE) 90%, transparent); }
  .post, .card, .plan, .modal { backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); }
  .bubble:hover, .btn:hover, .chip:hover, .friend-row:hover, .post:hover { transform: none; }
}

/* ==========================================================================
   16. ACCESSIBILITÉ — mouvement réduit / transparence réduite
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none !important; }
  .modal, .notif-center, .vol-menu, .mention-pop, .emoji-panel, .cmdk,
  .support-box, .admin-box, .auth-done .done-ic { animation: none !important; }
  .story-ring.unseen { animation: none !important; }
  .btn, .icon-btn, .bubble, .chip, .friend-row, .gift-user, .choice, .share-prof,
  .post, .post-act, .story-item, .tk-item, .call-ctrl, .voice-tile {
    transition: none !important;
  }
  .btn:hover, .bubble:hover, .chip:hover, .btn:active, .bubble:active { transform: none !important; }
}
html[data-motion="off"]::before, html[data-motion="off"]::after { animation: none !important; }

@media (prefers-reduced-transparency: reduce) {
  html::before, html::after { opacity: .25; animation: none; }
  :root { --lg-tint-1: 94%; --lg-tint-2: 88%; --lg-tint-3: 78%; }
  .rail, .side, .main-head, .members, .settings, .settings-nav, .bull-studio,
  .bull-studio .bs-head, .bull-studio .bs-toolbar, .top, .adm-side, .adm-top,
  .card, .plan, .modal, .notif-center, .cmdk, .support-box, .admin-box, .post,
  .composer form, .voice-tile, .field-box, .input, .btn, .toast, .vol-menu,
  .mention-pop, .emoji-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Impression : on retire les effets de verre et l'arrière-plan animé */
@media print {
  html::before, html::after { display: none !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
  body { background: #fff !important; }
}