/* ════════════════════════════════════════════════════════════════
   EDUCATED — SCHEDULER (Emploi du temps)
   Fichier : wwwroot/css/educated-scheduler.css
   À charger APRÈS le bundle DevExpress et après educated-design-tokens.css

   v2 — TOUS les sélecteurs sont désormais issus du DOM réel
   (DevExpress Blazor 26.1.4). Plus aucune supposition.

   PRINCIPE
   · Compactage réel de la grille 15 min
   · Habillage vivant aligné sur les tokens V6 : Geist, indigo #4F46E5
   · Cosmétique pure — on ne touche JAMAIS aux styles inline top/left/
     width/height des rendez-vous : DevExpress les calcule en absolu
     depuis la géométrie mesurée. On n'utilise que box-shadow (et non
     border) sur .dxbl-sc-apt pour ne pas décaler d'un pixel.

   RÉGLAGE UNIQUE : --edu-sc-cell-h en section 0.
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  0. VARIABLES LOCALES                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-scheduler {
    /* Hauteur d'une cellule de 15 min → 4× = hauteur d'une heure.
       13px → 52px/heure (densité d'une échelle horaire classique).
       11 = très dense · 13 = recommandé · 16 = confortable */
    --edu-sc-cell-h: 13px;
}


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  1. TYPOGRAPHIE + CADRE GÉNÉRAL                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .dxbl-scheduler,
    .dxbl-scheduler * {
        font-family: var(--font-body, "Geist", "Public Sans", system-ui, -apple-system, sans-serif) !important;
        font-variant-numeric: tabular-nums;
    }

.dxbl-scheduler {
    background: var(--surface-1, #fff);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.dxbl-sc-table {
    border-collapse: separate;
    border-spacing: 0;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  2. COMPACTAGE DE LA GRILLE                                   ║
   ║  Le line-height du contenu des cellules bloquait la descente : ║
   ║  on l'écrase aussi sur les <span> internes.                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-vertical-view tr,
.dxbl-sc-vertical-view td.dxbl-sc-time-cell,
.dxbl-sc-vertical-view td.dxbl-sc-minute-cell {
    height: var(--edu-sc-cell-h) !important;
    min-height: var(--edu-sc-cell-h) !important;
    max-height: var(--edu-sc-cell-h) !important;
    line-height: var(--edu-sc-cell-h) !important;
    padding: 0 !important;
}

    .dxbl-sc-vertical-view td.dxbl-sc-minute-cell > span {
        display: block;
        line-height: var(--edu-sc-cell-h) !important;
        font-size: 9px !important;
    }

.dxbl-sc-vertical-view td.dxbl-sc-hour-cell {
    padding: 0 !important;
    vertical-align: top;
    line-height: var(--edu-sc-cell-h) !important;
}

/* Doublon "08:00" sous le "08" — supprimé, il ne sert qu'en mode étroit */
.dxbl-sc-hour-min-text-compact {
    display: none !important;
}

/* Bande "toute la journée" — inutile, toutes les séances sont horodatées.
   Commente ce bloc si tu crées des évènements journée entière. */
.dxbl-sc-horizontal-view td.dxbl-sc-all-day-area {
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. BARRE D'OUTILS — Today ‹ › date · Resources · Week        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-tb-wrapper {
    background: var(--surface-1, #fff);
    border-bottom: 1px solid var(--line, #E5E7EB);
    padding: 8px 12px;
}

.dxbl-sc-toolbar .dxbl-btn.dxbl-toolbar-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xs, 6px) !important;
    color: var(--ink-1, #1E293B) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--ease-fast, 80ms ease), border-color var(--ease-fast, 80ms ease), color var(--ease-fast, 80ms ease);
}

    .dxbl-sc-toolbar .dxbl-btn.dxbl-toolbar-btn:hover {
        background: var(--surface-2, #FAFBFD) !important;
        border-color: var(--line, #E5E7EB) !important;
        color: var(--ink-0, #0F172A) !important;
    }

    .dxbl-sc-toolbar .dxbl-btn.dxbl-toolbar-btn:active {
        transform: translateY(0.5px);
    }

/* Icônes SVG — teintées, jamais noires. display:block pour supprimer
       l'espace de jambage qui les décale verticalement. */
.dxbl-sc-toolbar .dxbl-btn .dxbl-image {
    display: block !important;
    color: var(--ink-3, #94A3B8) !important;
    width: 15px;
    height: 15px;
    vertical-align: middle !important;
}

.dxbl-sc-toolbar .dxbl-btn.dxbl-toolbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dxbl-sc-toolbar .dxbl-btn:hover .dxbl-image {
    color: var(--brand, #4F46E5) !important;
}

/* "Today" — c'est l'action principale, elle mérite un traitement pill */
.dxbl-sc-toolbar .dxbl-btn-group-first .dxbl-btn.dxbl-toolbar-btn {
    background: var(--brand-soft, #EEEAFF) !important;
    color: var(--brand, #4F46E5) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
}

    .dxbl-sc-toolbar .dxbl-btn-group-first .dxbl-btn.dxbl-toolbar-btn:hover {
        background: var(--brand-soft-2, #DAD4FF) !important;
        border-color: transparent !important;
    }

.dxbl-sc-toolbar .dxbl-btn-group-first .dxbl-btn .dxbl-image,
.dxbl-sc-toolbar .dxbl-btn-group-first .dxbl-btn:hover .dxbl-image {
    color: var(--brand, #4F46E5) !important;
}

/* La plage de dates — c'est le titre de l'écran, pas un bouton parmi d'autres */
.dxbl-sc-toolbar .dxbl-btn.dxbl-toolbar-btn span {
    font-size: inherit;
}

.dxbl-sc-toolbar .dxbl-btn-group:nth-child(3) .dxbl-btn span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F172A) !important;
    letter-spacing: -0.015em;
}

/* Chevron des dropdowns — discret */
.dxbl-sc-toolbar .dxbl-toolbar-dropdown-toggle {
    color: var(--ink-4, #CBD5E1) !important;
    width: 12px;
    height: 12px;
}

/* Séparateurs de groupes */
.dxbl-sc-toolbar .dxbl-toolbar-group-separator {
    background: var(--line, #E5E7EB) !important;
    width: 1px !important;
    height: 18px !important;
    align-self: center;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. EN-TÊTES DE JOURS                                         ║
   ║  DOM : td.dxbl-sc-date-hr > .dxbl-sc-date-hr-wrapper           ║
   ║         > .dxbl-sc-date-hr-month / -day / -week                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-horizontal-view td.dxbl-sc-date-hr {
    background: var(--surface-1, #fff) !important;
    border-bottom: 1px solid var(--line, #E5E7EB) !important;
    border-right: 1px solid var(--line, #E5E7EB) !important;
    padding: 10px 0 8px !important;
}

.dxbl-sc-date-hr-wrapper {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Le numéro du jour — ancre visuelle de la colonne */
.dxbl-sc-date-hr-day {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--ink-0, #0F172A) !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
}

/* Le mois, quand il change (1er septembre) */
.dxbl-sc-date-hr-month {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--brand, #4F46E5) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Le jour de la semaine */
.dxbl-sc-date-hr-week {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--ink-3, #94A3B8) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Coin haut-gauche (au-dessus de la règle des heures) */
.dxbl-sc-horizontal-view td.dxbl-sc-time-rulers-caption {
    background: var(--surface-1, #fff) !important;
    border-bottom: 1px solid var(--line, #E5E7EB) !important;
    border-right: 1px solid var(--line, #E5E7EB) !important;
}

/* Jour courant — pastille indigo. La classe exacte n'apparaissait pas
   dans le DOM capturé (semaine sans "aujourd'hui") : ce sélecteur large
   couvre les variantes DevExpress. */
td.dxbl-sc-date-hr[class*="today"] .dxbl-sc-date-hr-day,
td.dxbl-sc-date-hr[class*="current"] .dxbl-sc-date-hr-day {
    background: var(--brand, #4F46E5) !important;
    color: #fff !important;
    border-radius: 999px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-brand, 0 4px 14px rgba(79,70,229,.35));
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  5. RÈGLE DES HEURES                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-vertical-view td.dxbl-sc-time-scale-cell {
    background: var(--surface-1, #fff) !important;
    border-right: 1px solid var(--line, #E5E7EB) !important;
}

.dxbl-sc-hour-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--ink-2, #475569) !important;
    letter-spacing: -0.01em;
    padding-right: 8px;
}

.dxbl-sc-vertical-view td.dxbl-sc-minute-cell > span {
    color: var(--ink-4, #CBD5E1) !important;
    font-weight: 500;
    padding-right: 7px;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  6. CELLULES DE LA GRILLE                                     ║
   ║  · dxbl-sc-dashed-cell        = frontière de quart d'heure     ║
   ║  · SANS dashed                = dernière cellule de l'heure    ║
   ║  · dxbl-scheduler-disabled-color = hors heures ouvrées         ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-vertical-view td.dxbl-sc-time-cell {
    background: var(--surface-1, #fff);
    border-right: 1px solid var(--line, #E5E7EB);
    border-bottom: 1px solid transparent;
    transition: background 90ms ease;
}

    /* Quart d'heure : repère minimal, il ne doit pas concurrencer l'heure */
    .dxbl-sc-vertical-view td.dxbl-sc-time-cell.dxbl-sc-dashed-cell {
        border-bottom: 1px dotted var(--line, #E5E7EB);
    }

    /* Fin d'heure : trait plein — c'est lui qui structure la lecture */
    .dxbl-sc-vertical-view td.dxbl-sc-time-cell:not(.dxbl-sc-dashed-cell) {
        border-bottom: 1px solid var(--line-2, #DDE2EA);
    }

/* Week-end / hors plage — gris très léger */
.dxbl-sc-vertical-view td.dxbl-scheduler-disabled-color {
    background: var(--surface-3, #F3F5F9) !important;
}

/* Survol d'un créneau libre — invite au clic */
.dxbl-sc-vertical-view td.dxbl-sc-time-cell:hover {
    background: var(--brand-soft, #EEEAFF);
}

.dxbl-sc-vertical-view td.dxbl-sc-time-cell.dxbl-scheduler-disabled-color:hover {
    background: var(--surface-3, #F3F5F9) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  7. RENDEZ-VOUS (séances)                                     ║
   ║  ────────────────────────────────────────────────────────────  ║
   ║  DOM réel :                                                    ║
   ║    .dxbl-sc-apt (position absolue, top/left/width/height       ║
   ║                  inline — NE JAMAIS TOUCHER)                   ║
   ║      .dxbl-top-handle / .dxbl-bottom-handle   (poignées)       ║
   ║      .dxbl-sc-apt-container.dxbl-sc-apt-template               ║
   ║        .dxbl-sc-apt-container                                  ║
   ║          .dxbl-apt-bg          ← couleur du LABEL (inline)     ║
   ║          .dxbl-apt-content                                     ║
   ║            .dxbl-apt-status-container > .dxbl-apt-status        ║
   ║                                 ← couleur du STATUT (inline)   ║
   ║            .dxbl-sc-content-wrapper                            ║
   ║              .dxbl-sc-apt-subject / -time / -description        ║
   ║                                                                ║
   ║  On encadre la carte avec box-shadow (jamais border) : une      ║
   ║  bordure ajouterait 2px à une boîte dimensionnée en inline et   ║
   ║  décalerait le rendez-vous par rapport à la grille.             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-apt {
    border-radius: var(--radius, 10px) !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px var(--line, #E5E7EB), var(--sh-1, 0 1px 2px rgba(15,23,42,.04)) !important;
    transition: box-shadow 140ms var(--ease-std, cubic-bezier(.4,0,.2,1)), transform 140ms var(--ease-std, cubic-bezier(.4,0,.2,1)) !important;
    animation: edu-apt-in 260ms var(--ease-std, cubic-bezier(.4,0,.2,1)) both;
}

@keyframes edu-apt-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dxbl-sc-apt:hover {
    box-shadow: 0 0 0 1px var(--brand-soft-2, #DAD4FF), var(--sh-3, 0 8px 24px rgba(15,23,42,.08)) !important;
    transform: translateY(-1px);
    z-index: 5;
}

.dxbl-sc-apt:active {
    transform: translateY(0);
}

/* Fond de la carte — .dxbl-apt-bg porte la couleur du Label en inline.
   Tant que Label = None il est blanc ; on ajoute un wash indigo très
   léger par-dessous pour que la carte ne soit pas plate.
   Si tu actives les couleurs par matière (Content.ColorLevel), commente
   ce bloc : le Label reprendra la main. */
.dxbl-sc-apt .dxbl-sc-apt-container {
    background: linear-gradient(160deg, var(--brand-soft, #EEEAFF) 0%, var(--surface-1, #fff) 55%);
}

.dxbl-sc-apt .dxbl-apt-bg.xaf-scheduler-none-label-apt {
    background-color: transparent !important;
}

/* Barre de statut — affinée, arrondie, collée au bord */
.dxbl-sc-apt .dxbl-apt-status-container {
    padding: 4px 0 4px 3px !important;
}

.dxbl-sc-apt .dxbl-apt-status {
    width: 3px !important;
    border-radius: 999px !important;
}

/* Contenu */
.dxbl-sc-apt .dxbl-sc-content-wrapper {
    padding: 5px 9px 5px 7px !important;
}

.dxbl-sc-apt-subject {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F172A) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.012em !important;
}

.dxbl-sc-apt-time {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--brand, #4F46E5) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.005em;
}

.dxbl-sc-apt-description {
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #94A3B8) !important;
    line-height: 1.35 !important;
}

/* Poignées de redimensionnement — visibles seulement au survol */
.dxbl-sc-apt .dxbl-top-handle,
.dxbl-sc-apt .dxbl-bottom-handle {
    opacity: 0;
    transition: opacity 120ms ease;
}

.dxbl-sc-apt:hover .dxbl-top-handle,
.dxbl-sc-apt:hover .dxbl-bottom-handle {
    opacity: 1;
}

/* Fantôme de glisser-déposer */
.dxbl-sc-editable-vertical-apts .dxbl-sc-apt,
.dxbl-sc-apt-dragging-hint-portal .dxbl-sc-apt {
    opacity: .75 !important;
    box-shadow: 0 0 0 1.5px var(--brand, #4F46E5), var(--sh-3, 0 8px 24px rgba(15,23,42,.08)) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  8. INDICATEUR D'HEURE COURANTE                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-sc-time-marker-line,
.dxbl-sc-time-indicator-line {
    background: var(--danger, #E11D48) !important;
    height: 1.5px !important;
}

.dxbl-sc-time-marker-image {
    background: var(--danger, #E11D48) !important;
    border-radius: 50% !important;
    width: 9px !important;
    height: 9px !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .14);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  9. SCROLLBARS                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-scheduler .dxbl-scroll-viewer-scroll-thumb {
    background: var(--line-2, #DDE2EA) !important;
    border-radius: 3px !important;
    transition: background 120ms ease;
}

    .dxbl-scheduler .dxbl-scroll-viewer-scroll-thumb:hover {
        background: var(--line-3, #CBD5E1) !important;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  10. TOOLTIP / POPOVER DE SÉANCE                              ║
   ║  ────────────────────────────────────────────────────────────  ║
   ║  DOM réel (dxbl-flyout > dxbl-flyout-dialog.dxbl-sc-tooltip) : ║
   ║    .dxbl-sc-tooltip-header                                     ║
   ║      .dxbl-sc-tooltip-header-label-container ← couleur Label    ║
   ║      .dxbl-sc-tooltip-header-subject                            ║
   ║      button.dxbl-btn-tool > svg.dxbl-edit-icon                  ║
   ║    .dxbl-sc-tooltip-container                                   ║
   ║      .dxbl-sc-tooltip-item                                      ║
   ║        .dxbl-sc-tooltip-item-icon > svg                         ║
   ║        .dxbl-sc-tooltip-item-text                               ║
   ║    dxbl-flyout-arrow > .dxbl-arrow                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Le popover vit dans un dxbl-popup-portal détaché, HORS de
   .dxbl-scheduler : la règle de police de la section 1 ne l'atteint pas.
   Il faut la redéclarer ici. */
.dxbl-sc-tooltip,
.dxbl-sc-tooltip * {
    font-family: var(--font-body, "Geist", "Public Sans", system-ui, -apple-system, sans-serif) !important;
    font-variant-numeric: tabular-nums;
}

    .dxbl-sc-tooltip.dxbl-flyout-dialog {
        background: var(--surface-1, #fff) !important;
        border: 1px solid var(--line, #E5E7EB) !important;
        border-radius: var(--radius-lg, 12px) !important;
        box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 18px 44px -12px rgba(15,23,42,.22) !important;
        overflow: hidden !important;
        min-width: 280px;
        animation: edu-tip-in 160ms var(--ease-std, cubic-bezier(.4,0,.2,1)) both;
    }

@keyframes edu-tip-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── En-tête ─────────────────────────────────────────────────── */
.dxbl-sc-tooltip .dxbl-sc-tooltip-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 12px 13px 16px !important;
    background: linear-gradient(160deg, var(--brand-soft, #EEEAFF) 0%, var(--surface-1, #fff) 70%) !important;
    border-bottom: 1px solid var(--line, #E5E7EB) !important;
}

/* Pastille de couleur du Label — carrée et vide tant que Label = None,
   on la transforme en petit point ; masquée quand elle est blanche. */
.dxbl-sc-tooltip .dxbl-sc-tooltip-header-label-container {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    flex: none !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}

    .dxbl-sc-tooltip .dxbl-sc-tooltip-header-label-container.xaf-scheduler-none-label-apt {
        display: none !important;
    }

.dxbl-sc-tooltip .dxbl-sc-tooltip-header-subject {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F172A) !important;
    letter-spacing: -0.018em !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bouton crayon — pastille fantôme qui s'allume en indigo */
.dxbl-sc-tooltip .dxbl-btn.dxbl-btn-tool {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xs, 6px) !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    flex: none !important;
    color: var(--ink-3, #94A3B8) !important;
    transition: background var(--ease-fast, 80ms ease), color var(--ease-fast, 80ms ease);
}

    .dxbl-sc-tooltip .dxbl-btn.dxbl-btn-tool:hover {
        background: var(--brand-soft, #EEEAFF) !important;
        color: var(--brand, #4F46E5) !important;
    }

    .dxbl-sc-tooltip .dxbl-btn.dxbl-btn-tool .dxbl-edit-icon {
        display: block !important;
        width: 15px !important;
        height: 15px !important;
        color: currentColor !important;
    }

    /* Le contenu interne du bouton DevExpress doit être centré lui aussi */
    .dxbl-sc-tooltip .dxbl-btn.dxbl-btn-tool > * {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
    }

/* ── Corps ───────────────────────────────────────────────────── */
.dxbl-sc-tooltip .dxbl-sc-tooltip-container {
    padding: 12px 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.dxbl-sc-tooltip .dxbl-sc-tooltip-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

    /* Le <div> qui enveloppe le texte doit occuper la place restante,
       sinon le centrage vertical se fait sur une boîte trop haute. */
    .dxbl-sc-tooltip .dxbl-sc-tooltip-item > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

.dxbl-sc-tooltip .dxbl-sc-tooltip-item-icon {
    /* Verrouillage complet : les icônes DevExtreme (.dx-icon) portent
       leurs propres largeurs, et flex:none seul ne les contient pas.
       flex-basis explicite + max-width + box-sizing = badge carré garanti. */
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-xs, 6px) !important;
    background: var(--surface-2, #FAFBFD) !important;
    border: 1px solid var(--line, #E5E7EB) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    /* line-height à 0 : sinon la hauteur de ligne héritée recentre mal
       le SVG dans le badge. */
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* display:block supprime l'espace de jambage réservé sous un SVG
       inline (vertical-align: baseline par défaut) — c'est ce qui
       décalait l'icône vers le haut. */
    /* Cible aussi .dx-icon / .dxsc-*-icon, dont les largeurs propres
       élargissaient le second badge. */
    .dxbl-sc-tooltip .dxbl-sc-tooltip-item-icon svg,
    .dxbl-sc-tooltip .dxbl-sc-tooltip-item-icon svg.dx-icon,
    .dxbl-sc-tooltip .dxbl-sc-tooltip-item-icon .dxbl-image {
        display: block !important;
        flex: 0 0 12px !important;
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 12px !important;
        max-height: 12px !important;
        color: var(--ink-3, #94A3B8) !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
    }

.dxbl-sc-tooltip .dxbl-sc-tooltip-item-text {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ink-1, #1E293B) !important;
    line-height: 1.35 !important;
}

/* Première ligne = l'horaire : c'est l'information principale */
.dxbl-sc-tooltip .dxbl-sc-tooltip-item:first-child .dxbl-sc-tooltip-item-icon {
    background: var(--brand-soft, #EEEAFF) !important;
    border-color: transparent !important;
}

    .dxbl-sc-tooltip .dxbl-sc-tooltip-item:first-child .dxbl-sc-tooltip-item-icon svg {
        color: var(--brand, #4F46E5) !important;
    }

.dxbl-sc-tooltip .dxbl-sc-tooltip-item:first-child .dxbl-sc-tooltip-item-text {
    color: var(--ink-0, #0F172A) !important;
    font-weight: 600 !important;
}

/* ── Flèche du popover ───────────────────────────────────────── */
.dxbl-flyout-arrow .dxbl-arrow {
    background: var(--surface-1, #fff) !important;
    border-color: var(--line, #E5E7EB) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIN educated-scheduler.css v2
   ════════════════════════════════════════════════════════════════ */