/**
 * ================================================================
 * FICHIER : adm_dictee.css
 * EMPLACEMENT : 2027_B2B/_modules/adm_dictee/adm_dictee.css
 * SHORT_DESC : Styles de la dictée vocale universelle du back-office
 * DESCRIPTION : Bouton micro discret pour textarea et champs texte dans l'atelier,
 *               animation de pulsation en écoute, respect du thème actif.
 *               Le bouton est placé dans le champ, à droite (icône seule), sans décaler le formulaire (n° 1174).
 * MODIFICATIONS :
 *   - 21/10/2026 16:34 : Message bref sous le champ (adm_dictee_message, verre fumé) quand la dictée ne peut pas démarrer (Claude, Dialogue 2027_B2B n° 1785) — A VALIDER PAR JaxX
 *   - 13/10/2026 16:20 : Bouton en position absolue dans le champ, à droite, icône seule, marge intérieure du champ pour ne
 *                        pas recouvrir le texte ; conteneur flexible dans les rangées flex (Dialogue n° 1174, Claude #3) — A VALIDER PAR JaxX
 *   - 10/10/2026 16:20 : Bouton Dicter placé dans le flux, au-dessus du champ, aligné à droite, sans recouvrement ni padding artificiel (Dialogue n° 670) — A VALIDER PAR JaxX
 * ================================================================
 */

/* 10/10/2026 16:20 (Dialogue n° 670) : ancien conteneur (bouton en absolu dans le champ)
.adm_dictee_conteneur
{
    position: relative;
    display: block;
    width: 100%;
}
*/
.adm_dictee_conteneur
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

/* 10/10/2026 16:20 (Dialogue n° 670) : ancien positionnement du bouton
.adm_dictee_bt
{
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
}
*/
.adm_dictee_bt
{
    position: static;
    align-self: flex-end;
    flex: 0 0 auto;
    margin: 0 0 4px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--border_radius, 6px);
    /* 10/10/2026 16:24 (Dialogue n° 670) : anciens jetons inexistants dans le thème (bouton sombre en mode clair)
    border: 1px solid var(--couleur_bordure, rgba(255, 255, 255, 0.15));
    background: var(--couleur_fond_bouton, rgba(25, 25, 25, 0.7));
    color: var(--couleur_texte_discret, #aaa);
    */
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.15));
    background: var(--surface_input, rgba(25, 25, 25, 0.7));
    color: var(--encre_second, #aaa);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: auto;
    /* 10/10/2026 16:20 (Dialogue n° 670) : z-index: 5; backdrop-filter: blur(4px); (plus de recouvrement) */
    user-select: none;
}

.adm_dictee_bt:hover,
.adm_dictee_bt:focus-visible
{
    /* 10/10/2026 16:24 (Dialogue n° 670) : anciens jetons
    color: var(--couleur_texte_principal, #fff);
    background: var(--couleur_fond_bouton_survol, rgba(40, 40, 40, 0.9));
    */
    color: var(--encre, #fff);
    border-color: var(--couleur_accent, #d4af37);
    background: var(--surface, rgba(40, 40, 40, 0.9));
}

.adm_dictee_bt_actif
{
    background: var(--couleur_accent, #d4af37) !important;
    color: #000 !important;
    border-color: var(--couleur_accent, #d4af37) !important;
    animation: adm_dictee_pulsation 1.5s infinite ease-in-out;
}

.adm_dictee_bt_svg
{
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.adm_dictee_bt_libelle
{
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

@keyframes adm_dictee_pulsation
{
    0%
    {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
    }
    70%
    {
        box-shadow: 0 0 0 8px rgba(212, 175, 55, 0);
    }
    100%
    {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

/* 13/10/2026 16:20 (Claude, Dialogue n° 1174 de JaxX : « les boutons de dictée vocale ne doivent pas décaler les formulaires,
   le bouton doit être en position absolue ou positionné intelligemment ») : le bouton revient DANS le champ, à droite, en icône
   seule (libellé lu par les lecteurs d'écran), et le champ garde une marge intérieure à droite pour que le texte ne passe pas
   dessous (demande n° 670 : sans recouvrement). Les règles ci-dessous l'emportent sur le placement « au-dessus » du 10/10. */
.adm_dictee_conteneur
{
    display: block;
}

/* Champ placé dans une rangée flex (barre de recherche, champ + bouton) : le conteneur prend la place du champ */
.adm_dictee_conteneur.adm_dictee_conteneur_ligne
{
    flex: 1 1 auto;
    width: auto;
}

.adm_dictee_conteneur > .adm_champ_avec_dictee
{
    width: 100%;
}

.adm_dictee_conteneur > .adm_dictee_bt
{
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    margin: 0;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    background: transparent;
    border-color: transparent;
}

.adm_dictee_conteneur > .adm_dictee_bt.adm_dictee_bt_actif
{
    transform: translateY(-50%);
}

/* Zones de texte : bouton dans le coin haut droit */
.adm_dictee_conteneur.adm_dictee_conteneur_zone > .adm_dictee_bt
{
    top: 6px;
    transform: none;
}

.adm_dictee_conteneur > .adm_dictee_bt .adm_dictee_bt_libelle
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adm_dictee_conteneur > input.adm_champ_avec_dictee,
.adm_dictee_conteneur > textarea.adm_champ_avec_dictee
{
    padding-right: 40px !important;
}

/* Ajustement pour les textarea */
/* 10/10/2026 16:20 (Dialogue n° 670) : padding artificiel supprimé, le bouton n'est plus dans le champ
textarea.adm_champ_avec_dictee
{
    padding-right: 42px !important;
}
*/

/* Ajustement pour les inputs une ligne */
/* 10/10/2026 16:20 (Dialogue n° 670) : padding artificiel supprimé
input.adm_champ_avec_dictee
{
    padding-right: 38px !important;
}
*/

/* 21/10/2026 16:34 (Claude, Dialogue 2027_B2B n° 1785) : message bref sous le champ quand la dictée ne peut pas démarrer
   (micro refusé, service de dictée indisponible, micro absent), en verre fumé (directive n° 1532), repli opaque — A VALIDER PAR JaxX */
.adm_dictee_message
{
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 6;
    max-width: min(420px, 92vw);
    padding: 8px 10px;
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.18));
    border-radius: var(--border_radius, 6px);
    background: var(--fume_degrade, linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))), var(--fume_teinte, rgba(18, 18, 22, 0.94));
    box-shadow: var(--fume_ombre, 0 6px 18px rgba(0, 0, 0, 0.35));
    color: var(--encre, #fff);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .adm_dictee_message
    {
        -webkit-backdrop-filter: var(--fume_flou, blur(12px));
        backdrop-filter: var(--fume_flou, blur(12px));
    }
}

@media (prefers-reduced-transparency: reduce)
{
    .adm_dictee_message
    {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgb(18, 18, 22);
    }
}