/* ══════════════════════════════════════════════════════════════════════════
   ds-emoji-bouton.css — le bouton 😊 et le sélecteur flottant (ds-emoji-bouton.js)
   Au-dessus de tout (stories, panneaux, modales) ; en feuille sur téléphone.
   ══════════════════════════════════════════════════════════════════════════ */
.ds-emoji-ouvrir {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none;
    background: none; color: var(--text-dim, #aaa); cursor: pointer; font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
}
.ds-emoji-ouvrir:hover, .ds-emoji-ouvrir:focus-visible, .ds-emoji-ouvrir[aria-expanded="true"] {
    color: var(--red, #ff2525); background: rgba(255,255,255,.06);
}
.ds-emoji-ouvrir:disabled { opacity: .4; cursor: default; }
/* Sur une story (fond image) : lisible. */
.ds-emoji-ouvrir--clair { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Ordinateur seulement (souris ou pavé) : sur téléphone et tablette, le clavier a déjà ses emojis. */
.ds-emoji-ouvrir--bureau { display: none; }
@media (hover: hover) and (pointer: fine) { .ds-emoji-ouvrir--bureau { display: inline-flex; } }
/* Dans un champ de l'inscription (onboarding) : à droite, avant l'icône du champ. */
.m-field .ds-emoji-ouvrir--champ {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; font-size: .9rem; z-index: 2;
}
/* Dans une zone de texte de l'inscription : en bas à gauche (le compteur est à droite). */
.bio-field .ds-emoji-ouvrir--zone { position: absolute; left: 6px; bottom: 6px; width: 30px; height: 30px; font-size: .9rem; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
    /* L'icône du champ cède sa place au bouton emoji (le champ garde sa marge habituelle). */
    .m-field .f-icon--sans-emoji { display: none; }
    .bio-field .bio-textarea.avec-emoji { padding-bottom: 36px !important; }
}

.dse {
    position: fixed; z-index: 100000; width: 340px; height: 380px; max-height: calc(100vh - 16px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card-bg, #17171b); color: var(--text, #f2f2f2);
    border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0,0,0,.55); font-family: inherit;
}
.dse[hidden] { display: none; }
.dse--feuille {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; height: min(52vh, 420px);
    border-radius: 16px 16px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.dse--large { width: auto; right: 8px; }
.dse-tete { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px; flex-shrink: 0; }
.dse-recherche {
    flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 17px; font: inherit; font-size: .82rem;
    border: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--bg-input, rgba(255,255,255,.05)); color: inherit;
}
.dse-recherche:focus { outline: none; border-color: var(--red, #ff2525); }
.dse-tons { position: relative; flex-shrink: 0; }
.dse-ton { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border, rgba(255,255,255,.2)); cursor: pointer; padding: 0; }
.dse-ton-menu {
    position: absolute; right: 0; top: 28px; z-index: 3; display: flex; gap: 4px; padding: 5px;
    background: var(--card-bg, #17171b); border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 10px;
}
.dse-ton-menu[hidden] { display: none; }
.dse-ton-opt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.dse-ton-opt:hover, .dse-ton-opt:focus-visible { border-color: var(--red, #ff2525); }
.dse-cats {
    display: flex; gap: 2px; padding: 0 6px 4px; flex-shrink: 0;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); overflow-x: auto; scrollbar-width: none;
}
.dse-cats::-webkit-scrollbar { display: none; }
.dse-cats--inactif { opacity: .45; }
.dse-cat {
    flex: 1 0 30px; height: 30px; border: none; background: none; border-radius: 8px; cursor: pointer;
    color: var(--text-dimmer, #777); font-size: .82rem; border-bottom: 2px solid transparent;
}
.dse-cat:hover { color: var(--text, #fff); }
.dse-cat.actif { color: var(--red, #ff2525); border-bottom-color: var(--red, #ff2525); }
.dse-zone { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dse-attente {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-dim, #999); font-size: 1.2rem;
}
.dse-attente[hidden] { display: none; }
/* content-visibility : le navigateur ne calcule que les sections proches de l'écran (1 900 emojis). */
.dse-section { content-visibility: auto; }
.dse-titre {
    position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 10px; background: var(--card-bg, #17171b);
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dimmer, #777);
}
.dse-cases, .dse-grille--plat {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; padding: 2px 6px 8px;
}
.dse-grille--plat { padding-top: 6px; }
.dse-e {
    height: 36px; border: none; background: none; border-radius: 8px; cursor: pointer; padding: 0;
    font-size: 1.35rem; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.dse-e:hover, .dse-e:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.dse-vide { grid-column: 1 / -1; text-align: center; color: var(--text-dim, #999); font-size: .8rem; padding: 24px 0; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ds-emoji-ouvrir { transition: none; } }