/*
 * Lot 1 Version B « Ma journée » — règles de base du thème Nocturne.
 * Toutes les règles de thème sont scopées sous html[data-ui="v2"] (drapeau de workspace ui.shell_v2) :
 * sans l'attribut, cette feuille n'a aucun effet visible. Littéraux interdits ici : var(--ot-*) et rem.
 * Chargée après app.css (OptiTask/Pages/_Layout.cshtml).
 */

/* Corps 15 / 1.55 ; la famille suit --ot-font-family (redéfinie sous le scope dans tokens.css) */
html[data-ui="v2"] body {
    font-size: var(--ot-font-size-body);
    line-height: var(--ot-line-height-body);
}

/* Les contrôles natifs n'héritent pas de la police du document par défaut. Spécificité nulle (:where) :
   toute règle d'auteur existante l'emporte (ex. éditeurs JSON / HTML en --ot-font-family-mono). */
:where(html[data-ui="v2"]) :where(button, input, select, textarea) {
    font-family: inherit;
}

/* Titres en graisse ≤ 500. :not(#_) relève la spécificité au-dessus des styles de page historiques
   (« .card-header h2 { font-weight: … } ») sans recourir à !important. */
html[data-ui="v2"] :is(h1, h2, h3, h4, h5, h6):not(#_) {
    font-weight: var(--ot-font-weight-heading);
}

/* ─── Composant PhIcon (SVG Phosphor inline) — utilisable avec ou sans le scope v2 ─── */
.ph-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* Alias directionnel sans équivalent Phosphor (paper-plane-left = paper-plane-right retourné) */
.ph-icon--mirror {
    transform: scaleX(-1);
}

/* ─── Lot 2 : coquille v2 — barre haute (B-1…B-4) et barre d'onglets mobile ───
   Servie par MainLayout seulement sous ui.shell_v2 ; toutes les règles restent sous html[data-ui="v2"]. */
/* app.css : overflow-x: hidden sur body et .main-content en fait des conteneurs de défilement (overflow-y calculé à
   auto) alors que c'est la fenêtre qui défile ; tout position: sticky y restait figé (barre haute qui part au
   défilement, barre d'actions groupées de /work sous la ligne de flottaison). clip rogne pareil sans créer de
   conteneur de défilement ; html garde hidden, reporté sur la fenêtre.
   margin: 0 retire la marge de 8 px du navigateur (aucun reset chargé) : barre haute d'un bord à l'autre (README §5.1),
   collée en haut dès le chargement, et plus de défilement parasite de 16 px sous .page (min-height: 100vh).
   Vaut aussi pour le portail et les pages d'authentification (coquille B-7, écart L15). */
html[data-ui="v2"] body {
    overflow-x: clip;
    margin: 0;
}

html[data-ui="v2"] .ot-shell-v2 .main-content {
    padding-left: 0;
    overflow-x: clip;
}

html[data-ui="v2"] .ot-shell-v2 .main-content > article {
    padding-top: 1.75rem;
}

/* FocusOnNavigate place le focus sur le h1 à chaque navigation (lecteurs d'écran) : titre non interactif,
   pas d'anneau visible (même règle que le gabarit Blazor). Les contrôles gardent l'anneau existant. */
html[data-ui="v2"] .ot-shell-v2 h1:focus {
    outline: none;
}

html[data-ui="v2"] .ot-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ot-z-header);
    display: flex;
    align-items: center;
    gap: 2rem;
    height: var(--ot-topbar-height);
    padding: 0 2.5rem;
    background: var(--ot-color-surface-alt);
    box-shadow: 0 0.0625rem 0 var(--ot-color-divider);
}

/* La marque ne rétrécit jamais : avec min-width: 0, elle tombait à 0 px dès que la barre manquait de place et le
   sélecteur de workspace passait sous l'onglet « Accueil ». C'est le champ de l'assistant qui rétrécit. */
html[data-ui="v2"] .ot-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

html[data-ui="v2"] .ot-topbar__home {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 0.4375rem;
    text-decoration: none;
}

html[data-ui="v2"] .ot-topbar__home:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.1875rem;
}

html[data-ui="v2"] .ot-topbar__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    font-size: var(--ot-font-size-label);
    font-weight: var(--ot-font-weight-600);
    color: var(--ot-color-primary-muted);
    box-shadow: 0 0 0 0.0625rem var(--ot-color-primary), 0 0 0.875rem color-mix(in srgb, var(--ot-color-primary) 45%, transparent);
}

html[data-ui="v2"] .ot-topbar .workspace-icon {
    display: none;
}

html[data-ui="v2"] .ot-topbar__nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 1.625rem;
}

html[data-ui="v2"] .ot-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--ot-font-size-base);
    color: var(--ot-color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ot-transition-fast), box-shadow var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-topbar__link:hover,
html[data-ui="v2"] .ot-topbar__link.is-open {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-topbar__link.is-active {
    color: var(--ot-color-text-primary);
    box-shadow: inset 0 -0.125rem 0 var(--ot-color-primary);
}

html[data-ui="v2"] .ot-topbar__caret {
    width: 0.75rem;
    height: 0.75rem;
}

html[data-ui="v2"] .ot-topbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--ot-radius-full);
    font-size: var(--ot-font-size-label);
    line-height: 1.125rem;
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-topbar__tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-left: auto;
}

html[data-ui="v2"] .ot-topbar__backdrop {
    position: fixed;
    inset: var(--ot-topbar-height) 0 0 0;
    z-index: var(--ot-z-dropdown);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

html[data-ui="v2"] .ot-topbar__panel {
    position: fixed;
    top: var(--ot-topbar-height);
    left: 0;
    right: 0;
    z-index: calc(var(--ot-z-dropdown) + 1);
    max-height: calc(100vh - var(--ot-topbar-height));
    overflow-y: auto;
    padding: 1.5rem 2.5rem 1.75rem;
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-md);
}

html[data-ui="v2"] .ot-topbar__panel-head {
    display: none;
}

html[data-ui="v2"] .ot-topbar__sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.25rem 2rem;
}

html[data-ui="v2"] .ot-topbar__section-title {
    margin: 0 0 0.5rem;
    font-size: var(--ot-font-size-label);
    letter-spacing: var(--ot-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-topbar__section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-topbar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--ot-radius-lg);
    font-size: var(--ot-font-size-base);
    color: var(--ot-color-text-primary);
    text-decoration: none;
}

html[data-ui="v2"] .ot-topbar__item:hover {
    background: var(--ot-color-surface-hover);
}

html[data-ui="v2"] .ot-topbar__item.is-active {
    color: var(--ot-color-primary-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-tabbar {
    display: none;
}

/* Entre le mobile et ~1260 px, marque, cinq groupes et outils ne tiennent pas aux espacements de la maquette
   (1440 px) : on resserre, puis sous 60rem on ne garde que les icônes (initiales du workspace, assistant). Placé
   avant le bloc mobile, qui l'emporte en dessous de 48rem. */
@media (max-width: 80rem) {
    html[data-ui="v2"] .ot-topbar {
        gap: 1.5rem;
        padding: 0 1.5rem;
    }

    html[data-ui="v2"] .ot-topbar__nav {
        gap: 1.25rem;
    }
}

@media (max-width: 60rem) {
    html[data-ui="v2"] .ot-topbar {
        gap: 1rem;
        padding: 0 1rem;
    }

    html[data-ui="v2"] .ot-topbar__nav {
        gap: 1rem;
    }

    html[data-ui="v2"] .ot-topbar .workspace-name {
        display: none;
    }
}

/* Mobile : pas de navigation en barre haute ; barre d'onglets basse (cibles ≥ 44 px) et panneau en feuille */
@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-topbar {
        gap: 0.75rem;
        padding: 0 1rem;
    }

    html[data-ui="v2"] .ot-topbar__nav {
        display: none;
    }

    html[data-ui="v2"] .ot-shell-v2 .main-content {
        padding-bottom: var(--ot-tabbar-height);
    }

    /* Lot 14 : un élément amené à l'écran (focus, scrollIntoView) s'arrête au-dessus de la barre d'onglets fixe. */
    html[data-ui="v2"] {
        scroll-padding-bottom: calc(var(--ot-tabbar-height) + 1rem);
    }

    html[data-ui="v2"] .ot-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--ot-z-header);
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        height: var(--ot-tabbar-height);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ot-color-surface);
        box-shadow: 0 -0.0625rem 0 var(--ot-color-divider);
    }

    html[data-ui="v2"] .ot-tabbar__tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: var(--ot-button-min-height-touch);
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: var(--ot-font-size-label);
        color: var(--ot-color-text-muted);
        text-decoration: none;
        cursor: pointer;
    }

    html[data-ui="v2"] .ot-tabbar__tab.is-active {
        color: var(--ot-color-primary-muted);
    }

    html[data-ui="v2"] .ot-tabbar__badge {
        position: absolute;
        top: 0.625rem;
        left: calc(50% + 0.5rem);
    }

    html[data-ui="v2"] .ot-topbar__backdrop {
        inset: 0 0 var(--ot-tabbar-height) 0;
        background: color-mix(in srgb, var(--ot-color-surface-alt) 60%, transparent);
    }

    html[data-ui="v2"] .ot-topbar__panel {
        top: auto;
        bottom: var(--ot-tabbar-height);
        max-height: 70vh;
        padding: 1rem 1rem 1.25rem;
        border-radius: var(--ot-radius-xl) var(--ot-radius-xl) 0 0;
    }

    html[data-ui="v2"] .ot-topbar__panel-head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-weight: var(--ot-font-weight-500);
    }

    html[data-ui="v2"] .ot-topbar__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ot-button-min-height-touch);
        height: var(--ot-button-min-height-touch);
        margin-left: auto;
        border: 0;
        background: transparent;
        color: var(--ot-color-text-muted);
        cursor: pointer;
    }

    html[data-ui="v2"] .ot-topbar__item {
        min-height: var(--ot-button-min-height-touch);
    }
}

/* Petits téléphones (320 px) : les cibles de 44 px ne rétrécissent pas, les espacements si. */
@media (max-width: 22.5rem) {
    html[data-ui="v2"] .ot-topbar {
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    html[data-ui="v2"] .ot-topbar__tools {
        gap: 0.25rem;
    }

    html[data-ui="v2"] .ot-topbar .workspace-switcher {
        margin-right: 0;
    }
}

/* Composants existants réutilisés dans la barre haute (recherche, workspace, profil) : réhabillage scopé,
   sans toucher à leurs fichiers ni à leur rendu dans l'ancienne coquille. */
html[data-ui="v2"] .ot-topbar .workspace-trigger,
html[data-ui="v2"] .ot-topbar .ot-user-menu__trigger {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-base);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-topbar .gsearch-trigger {
    min-width: 16rem;
    height: 2.125rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    box-shadow: 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-topbar .gsearch-trigger:hover {
    box-shadow: 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-topbar .gsearch-kbd {
    border-radius: var(--ot-radius-sm);
    background: transparent;
    box-shadow: 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-muted);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-topbar .gsearch-trigger {
        min-width: 0;
    }

    html[data-ui="v2"] .ot-topbar .gsearch-trigger-label,
    html[data-ui="v2"] .ot-topbar .gsearch-kbd,
    html[data-ui="v2"] .ot-topbar .ot-user-menu__name,
    html[data-ui="v2"] .ot-topbar .workspace-name {
        display: none;
    }
}

/* Couleurs de données (§8 « contour, jamais d'aplat ») : fond à 18 %, liseré, texte tiré vers la couleur du texte
   pour rester lisible quelle que soit la couleur saisie par l'utilisateur. */
html[data-ui="v2"] .ot-data-chip {
    background-color: color-mix(in srgb, var(--ot-data-color, var(--ot-color-text-muted)) 18%, transparent);
    color: color-mix(in srgb, var(--ot-data-color, var(--ot-color-text-muted)) 45%, var(--ot-color-text-primary));
    box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--ot-data-color, var(--ot-color-text-muted)) 60%, transparent);
}

html[data-ui="v2"] .ot-data-text {
    color: color-mix(in srgb, var(--ot-data-color, var(--ot-color-text-muted)) 45%, var(--ot-color-text-primary));
}

/* Compte (§5.1) : avatar rond de 32 px à initiales ; le nom reste annoncé par aria-label du déclencheur. */
html[data-ui="v2"] .ot-topbar .ot-user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-border);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-label);
    font-weight: var(--ot-font-weight-600);
    letter-spacing: 0.02em;
}

html[data-ui="v2"] .ot-topbar .ot-user-menu__icon,
html[data-ui="v2"] .ot-topbar .ot-user-menu__name,
html[data-ui="v2"] .ot-topbar .ot-user-menu__caret {
    display: none;
}

html[data-ui="v2"] .ot-topbar .workspace-chevron {
    color: var(--ot-color-text-muted);
    font-size: var(--ot-font-size-base);
}

/* Cloche (§5.1) : icône au trait ; non-lus signalés par un point d'accent de 8 px, le nombre reste dans aria-label */
html[data-ui="v2"] .notif-bell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .notif-bell-btn .notif-bell-icon {
    display: inline-flex;
    font-size: 1.25rem;
}

html[data-ui="v2"] .notif-bell-btn .notif-badge {
    top: 0.5rem;
    right: 0.5rem;
    min-width: 0;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-primary);
    color: transparent;
    font-size: 0;
    overflow: hidden;
}

/* Pas d'emoji dans la coquille v2 : la loupe du déclencheur de recherche (span sans classe) est remplacée
   par l'icône Phosphor magnifying-glass (fichier local, en masque : suit la couleur du texte). */
html[data-ui="v2"] .ot-topbar .gsearch-trigger > span:first-child:not(.gsearch-trigger-label) {
    display: none;
}

html[data-ui="v2"] .ot-topbar .gsearch-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-topbar .gsearch-trigger::before {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background: var(--ot-color-primary);
    -webkit-mask: url("../icons/ph/magnifying-glass.svg") center / contain no-repeat;
    mask: url("../icons/ph/magnifying-glass.svg") center / contain no-repeat;
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-topbar .gsearch-trigger {
        justify-content: center;
        width: var(--ot-button-min-height-touch);
        height: var(--ot-button-min-height-touch);
        padding: 0;
    }
}

/* ─── Lot 3 : file « Travail » (B-2, /work) et accueil sans briefing (B-1, /) ───
   Écrans servis seulement sous ui.shell_v2 ; toutes les règles restent sous html[data-ui="v2"]. */
html[data-ui="v2"] .ot-visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html[data-ui="v2"] .ot-work,
html[data-ui="v2"] .ot-home {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.5rem 2.5rem;
}

html[data-ui="v2"] .ot-home {
    max-width: 47.5rem;
}

html[data-ui="v2"] .ot-work__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] :is(.ot-work__title, .ot-home__title) {
    margin: 0;
    font-size: var(--ot-font-size-h1);
    line-height: 1.2;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-work__subtitle,
html[data-ui="v2"] .ot-home__kicker {
    margin: 0.25rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-home__kicker {
    margin: 0 0 0.375rem;
}

html[data-ui="v2"] .ot-work__header-actions {
    display: flex;
    flex-wrap: wrap; /* 390 px : « Nouveau ticket » était coupé au bord droit */
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-base);
    font-weight: var(--ot-font-weight-500);
    text-decoration: none;
    transition: box-shadow var(--ot-transition-fast), color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-btn-outline--accent {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-btn-outline:hover {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-work__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-segmented {
    display: inline-flex;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    overflow: hidden;
}

html[data-ui="v2"] .ot-segmented__item {
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
    transition: background-color var(--ot-transition-fast), color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-segmented__item:hover {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-segmented__item.is-active {
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-segmented__count {
    margin-left: 0.25rem;
}

html[data-ui="v2"] .ot-pill-select select,
html[data-ui="v2"] .ot-pill-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: transparent;
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
    text-decoration: none;
    cursor: pointer;
}

/* Un select natif prend la largeur de sa plus longue option (« Société Générale de Câblage ») : la barre de filtres de
   /work passait sur deux lignes à 1440 px. Largeur de la valeur affichée (field-sizing) et plafond pour les autres
   navigateurs. */
html[data-ui="v2"] .ot-pill-select select {
    field-sizing: content;
    max-width: 12rem;
    text-overflow: ellipsis;
}

html[data-ui="v2"] .ot-pill-select select option {
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-pill-link:hover,
html[data-ui="v2"] .ot-pill-select select:hover {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
}

html[data-ui="v2"] .ot-work__sortnote {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    margin-top: -0.5rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work__sortnote .ph-icon {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font-size: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ot-color-primary-hover);
    text-underline-offset: 0.1875rem;
    cursor: pointer;
}

html[data-ui="v2"] .ot-work__why {
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-sm);
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-work__why p {
    margin: 0;
}

html[data-ui="v2"] .ot-work__why ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

html[data-ui="v2"] .ot-work__notice {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-work__empty,
html[data-ui="v2"] .ot-work__snoozed,
html[data-ui="v2"] .ot-home__footer {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-home__footer a,
html[data-ui="v2"] .ot-home__all {
    color: var(--ot-color-primary-muted);
    font-size: var(--ot-font-size-sm);
    text-decoration: none;
}

html[data-ui="v2"] .ot-home__footer a:hover,
html[data-ui="v2"] .ot-home__all:hover {
    text-decoration: underline;
}

html[data-ui="v2"] .ot-work__skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-skeleton-row {
    height: 3.5rem;
    border-radius: var(--ot-radius-sm);
    background: var(--ot-color-surface);
}

html[data-ui="v2"] .ot-home__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

html[data-ui="v2"] .ot-work__group-title {
    margin: 0 0 0.5rem;
    font-size: var(--ot-font-size-h3);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-work__group-count {
    margin-left: 0.375rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ligne : filet haut, survol surface-hover ; grille B-2 (36 / sujet / SLA / activité / agent / action) */
html[data-ui="v2"] .ot-work-row {
    display: grid;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
    padding: 0.5rem 0.5rem;
    border-top: 0.0625rem solid var(--ot-color-divider);
    transition: background-color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-work-row:hover {
    background: var(--ot-color-surface-hover);
}

/* Toute la ligne ouvre l'élément (handoff B1.4 « Toute la ligne = lien ») : le lien « Ouvrir » reste le seul lien
   (clavier, clic milieu, lecteur d'écran inchangés) et son ::after couvre la ligne. Les autres contrôles de la ligne
   (case de sélection, « pourquoi ? », reporter, reprendre, détail du score) passent au-dessus. */
html[data-ui="v2"] .ot-work-row {
    position: relative;
}

html[data-ui="v2"] .ot-work-row__action::after {
    content: "";
    position: absolute;
    inset: 0;
}

html[data-ui="v2"] .ot-work-row :is(.ot-work-row__select, .ot-work-row__why-toggle, .ot-work-row__snooze, .ot-work-row__resume, .ot-work-row__why) {
    position: relative;
    z-index: 1;
}

html[data-ui="v2"] .ot-work-row:hover .ot-work-row__action {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-work-row--grid {
    grid-template-columns: 2.25rem minmax(0, 1fr) 11.25rem 8.125rem 9.375rem auto;
}

/* Lot 4 (assistant.enabled) : colonne d'actions de largeur fixe, « pourquoi ? » ne décale pas les colonnes. */
html[data-ui="v2"] .ot-work--assistant .ot-work-row--grid {
    grid-template-columns: 2.25rem minmax(0, 1fr) 11.25rem 8.125rem 9.375rem 13rem;
}

html[data-ui="v2"] .ot-work-row--compact {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
    min-height: 3.5rem;
}

html[data-ui="v2"] .ot-work-row.is-snoozed {
    opacity: 0.7;
}

html[data-ui="v2"] .ot-work-row__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__glyph {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-work-row__priority {
    font-size: var(--ot-font-size-xs);
    font-weight: var(--ot-font-weight-600);
}

html[data-ui="v2"] .ot-work-row__priority[data-rank="1"],
html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__priority[data-rank="1"] {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-work-row__priority[data-rank="2"],
html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__priority[data-rank="2"] {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-work-row__priority[data-rank="3"],
html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__priority[data-rank="3"] {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work-row__priority[data-rank="4"],
html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__priority[data-rank="4"] {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work-row__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html[data-ui="v2"] .ot-work-row__title {
    overflow: hidden;
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-work-row__meta,
html[data-ui="v2"] .ot-work-row__activity,
html[data-ui="v2"] .ot-work-row__person {
    overflow: hidden;
    color: var(--ot-color-text-muted);
    font-size: var(--ot-font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-work-row__person {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-work-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface-muted);
    color: var(--ot-color-text-secondary);
    font-size: 0.625rem;
    font-weight: var(--ot-font-weight-600);
}

html[data-ui="v2"] .ot-work-row__due {
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    white-space: nowrap;
}

html[data-ui="v2"] .ot-work-row__due[data-tone="warning"] {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-work-row__due[data-tone="danger"] {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-work-row__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

html[data-ui="v2"] .ot-work-row__action {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    font-weight: var(--ot-font-weight-500);
    text-decoration: none;
    transition: box-shadow var(--ot-transition-fast), color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-work-row.is-now .ot-work-row__action {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-work-row__action:hover {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-work-row__snooze,
html[data-ui="v2"] .ot-work-row__resume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    color: var(--ot-color-text-muted);
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ot-work-row__snooze:hover,
html[data-ui="v2"] .ot-work-row__resume:hover {
    color: var(--ot-color-primary-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

/* Mobile (B-1m, B-2m) : sujet sur toute la largeur, échéance et action dessous ; cibles ≥ 44 px */
@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-work,
    html[data-ui="v2"] .ot-home {
        padding: 0 0.25rem 1.5rem;
    }

    html[data-ui="v2"] :is(.ot-work__title, .ot-home__title) {
        font-size: 1.5rem;
    }

    html[data-ui="v2"] .ot-work__toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    html[data-ui="v2"] .ot-segmented,
    html[data-ui="v2"] .ot-pill-select,
    html[data-ui="v2"] .ot-pill-link {
        flex-shrink: 0;
    }

    html[data-ui="v2"] .ot-work__sortnote {
        justify-content: flex-start;
        margin-top: 0;
    }

    html[data-ui="v2"] .ot-work-row--grid,
    html[data-ui="v2"] .ot-work--assistant .ot-work-row--grid,
    html[data-ui="v2"] .ot-work-row--compact {
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        grid-template-areas:
            "glyph main main"
            "glyph due actions";
        row-gap: 0.25rem;
        min-height: 4.5rem;
    }

    html[data-ui="v2"] .ot-work-row__glyph { grid-area: glyph; }
    html[data-ui="v2"] .ot-work-row__main { grid-area: main; }
    html[data-ui="v2"] .ot-work-row__due { grid-area: due; }
    html[data-ui="v2"] .ot-work-row__actions { grid-area: actions; }

    html[data-ui="v2"] .ot-work-row__activity,
    html[data-ui="v2"] .ot-work-row__person {
        display: none;
    }

    html[data-ui="v2"] .ot-work-row__action,
    html[data-ui="v2"] .ot-work-row__snooze,
    html[data-ui="v2"] .ot-work-row__resume,
    html[data-ui="v2"] .ot-segmented__item,
    html[data-ui="v2"] .ot-pill-select select,
    html[data-ui="v2"] .ot-pill-link {
        min-height: 2.75rem;
    }
}

/* ─── Lot 4 : assistant IA, option A — briefing et alertes (B-1), « pourquoi ? » (B-2) ───
   Servis sous ui.shell_v2 et assistant.enabled ; contenu déposé par l'agent rendu en texte brut. */
html[data-ui="v2"] :is(.ot-home--assistant, .ot-home--with-aside) {
    display: grid;
    grid-template-columns: minmax(0, 47.5rem) 22.5rem;
    align-items: start;
    column-gap: 3.5rem;
    max-width: none;
}

html[data-ui="v2"] .ot-home__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-briefing {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

html[data-ui="v2"] .ot-briefing__icon {
    margin-top: 0.1875rem;
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-briefing__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ot-color-text-secondary);
    white-space: pre-line;
}

html[data-ui="v2"] .ot-briefing__meta,
html[data-ui="v2"] .ot-briefing__pending {
    margin: 0.5rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-briefing__pending {
    margin: 0;
    font-style: italic;
}

html[data-ui="v2"] .ot-briefing__pending--idle {
    font-style: normal;
}

html[data-ui="v2"] .ot-briefing__error {
    margin: 0.5rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-briefing__generate {
    margin-top: 0.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-entity-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ot-color-primary-hover);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
}

html[data-ui="v2"] .ot-entity-link:hover {
    color: var(--ot-color-primary-muted);
}

/* Filet fondu (README §5.2) */
html[data-ui="v2"] .ot-fade-rule {
    height: 0.0625rem;
    margin: 0.25rem 0;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--ot-color-divider) 3rem, var(--ot-color-divider) calc(100% - 3rem), transparent);
    opacity: 1;
}

html[data-ui="v2"] .ot-home__aside {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 2rem;
}

html[data-ui="v2"] .ot-home__aside-title {
    margin: 0 0 0.25rem;
    font-size: var(--ot-font-size-xs);
    font-weight: var(--ot-font-weight-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-alert {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-alert__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-alert[data-kind="sla_breach"] .ot-alert__title {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-alert[data-kind="contract_renewal"] .ot-alert__title {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-alert__body {
    margin: 0;
    font-size: var(--ot-font-size-base);
    color: var(--ot-color-text-primary);
    white-space: pre-line;
}

html[data-ui="v2"] .ot-alert__hint {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-alert__dismiss {
    align-self: flex-start;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work-row__why-toggle {
    min-height: 2.25rem;
    padding: 0 0.25rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-work-row__why {
    grid-column: 1 / -1;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-work-row__why ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

@media (max-width: 64rem) {
    html[data-ui="v2"] :is(.ot-home--assistant, .ot-home--with-aside) {
        display: flex;
        flex-direction: column;
    }

    html[data-ui="v2"] .ot-home__aside {
        padding-top: 0;
    }
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-briefing__text {
        font-size: 0.90625rem;
    }

    html[data-ui="v2"] .ot-work-row__why {
        grid-area: auto;
    }
}

/* ─── Lot 5a : fiche ticket v2 (B-3, /helpdesk/tickets/{id}) ───
   Servie sous ui.shell_v2 + ui.ticket_v2 ; résumé et brouillon de l'assistant sous assistant.drafts. */
html[data-ui="v2"] .ot-ticket {
    padding: 0 1.5rem 2.5rem;
}

/* Toast de la fiche ticket v2 (retour des actions, erreurs Résumer / brouillon) : fixé en bas à droite, visible
   sans défilement ; sémantique Nocturne en trait et texte, jamais en aplat. Au-dessus de la barre d'onglets mobile. */
html[data-ui="v2"] .ot-ticket__toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: var(--ot-z-toast);
    min-width: 16rem;
    max-width: 26rem;
    padding: 0.875rem 1rem;
    border: 0.0625rem solid var(--ot-color-border);
    border-left: 0.25rem solid var(--ot-color-success);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    box-shadow: var(--ot-shadow-lg);
}

html[data-ui="v2"] .ot-ticket__toast.is-error {
    border-left-color: var(--ot-color-danger);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-ticket__toast {
        left: 1rem;
        right: 1rem;
        bottom: calc(var(--ot-tabbar-height) + 1rem);
        max-width: none;
    }
}

/* Lot 13 — toasts globaux (IToastService, Shared/Toast.razor) sous Nocturne : surface, trait coloré à gauche et
   texte principal, comme .ot-ticket__toast (README §8 : sémantique en trait et texte, jamais en aplat ; le blanc sur
   le rouge désaturé ne dépassait pas ~3:1). L'interface actuelle garde les aplats d'app.css. */
html[data-ui="v2"] .toast {
    position: relative;
    border: 0.0625rem solid var(--ot-color-border);
    border-left: 0.25rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    box-shadow: var(--ot-shadow-lg);
}

html[data-ui="v2"] .toast-error {
    border-left-color: var(--ot-color-danger);
}

html[data-ui="v2"] .toast-success {
    border-left-color: var(--ot-color-success);
}

html[data-ui="v2"] .toast-dismiss {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .toast-dismiss:hover {
    color: var(--ot-color-text-primary);
}

/* ─── Lot 13 — fiche ticket actuelle sous la coquille v2 (ui.shell_v2 ON, ui.ticket_v2 OFF) ───
   Pages/Helpdesk/Tickets/Show.razor + TicketSidebar / TicketReplyForm : rhabillage Nocturne sans refonte du balisage.
   Le <style> inline de Show.razor (couleurs codées en dur, et règles :deep() sans effet hors isolation CSS) reste
   intact pour l'interface actuelle : ces règles, plus spécifiques, ne s'appliquent que sous html[data-ui="v2"]. */
html[data-ui="v2"] .ticket-show-page {
    background: transparent;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-show-shell, .ticket-main-col, .ticket-discussion-col, .ticket-sidebar-col) {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page .card-surface {
    border: 0.0625rem solid var(--ot-color-border);
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-sm);
}

html[data-ui="v2"] .ticket-show-page .ticket-show-header {
    background: var(--ot-color-surface);
    border-bottom-color: var(--ot-color-divider);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-show-breadcrumb, .ticket-show-meta, .ticket-meta-sep) {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-number-h, .ticket-title) {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page a {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page .btn-back {
    border-radius: var(--ot-radius-lg);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ticket-show-page .btn-back:hover {
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page .text-muted {
    color: var(--ot-color-text-muted) !important;
}

html[data-ui="v2"] .ticket-show-page .ticket-tabs {
    background: var(--ot-color-surface);
    border-bottom-color: var(--ot-color-divider);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-tab, .reply-tab) {
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-secondary);
    font-weight: var(--ot-font-weight-500);
    cursor: pointer;
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-tab, .reply-tab):hover {
    background: var(--ot-color-surface-hover);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-tab, .reply-tab).active {
    background: var(--ot-color-primary-soft);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page .reply-tabs {
    display: flex;
    gap: 0.5rem;
}

html[data-ui="v2"] .ticket-show-page .reply-tab {
    padding: 0.5rem 0.875rem;
}

html[data-ui="v2"] .ticket-show-page .ticket-show-layout {
    background: var(--ot-color-surface);
}

/* Fil : cartes en surface, trait gauche pour l'auteur (sémantique en trait, jamais en aplat). */
html[data-ui="v2"] .ticket-show-page .reply-item.reply-original {
    background: var(--ot-color-surface);
    border-left-color: var(--ot-color-primary);
}

html[data-ui="v2"] .ticket-show-page .reply-item:not(.reply-original) {
    background: var(--ot-color-surface);
    border-color: var(--ot-color-border);
    box-shadow: none;
}

html[data-ui="v2"] .ticket-show-page .reply-item.reply-client:not(.reply-original) {
    border-left-color: var(--ot-color-border-strong);
}

html[data-ui="v2"] .ticket-show-page .reply-item.reply-agent:not(.reply-original):not(.reply-internal) {
    border-left-color: var(--ot-color-primary);
}

html[data-ui="v2"] .ticket-show-page .reply-item.reply-internal {
    background: var(--ot-color-surface) !important;
    border-color: var(--ot-color-border) !important;
    border-left-color: var(--ot-color-warning) !important;
}

html[data-ui="v2"] .ticket-show-page :is(.reply-body, .reply-author) {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page :is(.internal-note-banner, .internal-note-badge) {
    background: transparent;
    border-color: var(--ot-color-warning);
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ticket-show-page .status-log-entry {
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ticket-show-page .status-log-icon {
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page .ticket-locked-notice {
    border-color: var(--ot-color-warning);
    background: var(--ot-color-surface);
    color: var(--ot-color-warning);
}

/* Historique */
html[data-ui="v2"] .ticket-show-page .audit-entry {
    border-bottom-color: var(--ot-color-divider);
}

html[data-ui="v2"] .ticket-show-page .audit-dot {
    background: var(--ot-color-primary);
}

html[data-ui="v2"] .ticket-show-page .audit-user {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ticket-show-page .audit-details {
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ticket-show-page .audit-pagination {
    border-top-color: var(--ot-color-divider);
}

/* Colonne droite (TicketSidebar) : surface, filets et espacements que les :deep() inline n'appliquent pas. */
html[data-ui="v2"] .ticket-show-page .ticket-sidebar-surface {
    border-color: var(--ot-color-border);
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-sm);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
}

html[data-ui="v2"] .ticket-show-page .sidebar-section {
    padding: 0.875rem 0;
    border-bottom: 0.0625rem solid var(--ot-color-divider);
}

html[data-ui="v2"] .ticket-show-page .sidebar-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

html[data-ui="v2"] .ticket-show-page .sidebar-section h4 {
    margin: 0 0 0.75rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .reply-form) .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .form-group:last-child {
    margin-bottom: 0;
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .reply-form) label,
html[data-ui="v2"] .ticket-show-page .sla-label {
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ticket-show-page .sla-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
}

/* Champs : même rendu que les champs de la fiche v2 (.ot-ticket-field). */
html[data-ui="v2"] .ticket-show-page .form-control {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--ot-radius-md);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ticket-show-page .form-control:focus,
html[data-ui="v2"] .ticket-show-page .form-control:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary), 0 0 0 0.1875rem var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ticket-show-page select.form-control option {
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ticket-show-page .reply-editor {
    min-height: 10rem;
    padding: 0.75rem 0.875rem;
}

html[data-ui="v2"] .ticket-show-page .reply-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

html[data-ui="v2"] .ticket-show-page :is(.reply-form-footer, .reply-options) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* Boutons de la colonne et de l'historique : aspect .ot-btn-outline (trait, pas d'aplat). */
html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .audit-timeline) :is(button.btn-block, button.btn-sm, .btn-secondary),
html[data-ui="v2"] .ticket-show-page .audit-pagination .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    font-weight: var(--ot-font-weight-500);
    cursor: pointer;
    transition: box-shadow var(--ot-transition-fast), color var(--ot-transition-fast);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .audit-timeline) button.btn-sm {
    min-height: 2rem;
    padding: 0 0.75rem;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar button.btn-block {
    width: 100%;
    margin-bottom: 0.5rem;
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .audit-timeline) :is(button.btn-block, button.btn-sm, .btn-secondary):hover:not(:disabled) {
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar button:is(.btn-danger-outline, .btn-danger-outline:hover:not(:disabled)) {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-danger);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar button:is(.btn-warning-outline, .btn-warning, .btn-warning-outline:hover:not(:disabled), .btn-warning:hover:not(:disabled)) {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-warning);
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar button:is(.btn-info-outline, .btn-info, .btn-info-outline:hover:not(:disabled), .btn-info:hover:not(:disabled)) {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ticket-show-page :is(.ticket-sidebar, .audit-timeline) button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar :is(.btn-link-sm, .tag-remove-btn) {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ot-color-primary-muted);
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .advanced-action-form {
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem;
    border: 0.0625rem solid var(--ot-color-border);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface-alt);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .action-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .alert-danger-sm {
    border: 0.0625rem solid var(--ot-color-danger);
    border-radius: var(--ot-radius-md);
    background: transparent;
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .tag-suggestions {
    border: 0.0625rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-md);
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .tag-suggestion-item {
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    cursor: pointer;
}

html[data-ui="v2"] .ticket-show-page .ticket-sidebar .tag-suggestion-item:hover {
    background: var(--ot-color-surface-hover);
}

/* Toast de la fiche actuelle (hors .ticket-show-page) : surface et trait, comme les toasts globaux. */
html[data-ui="v2"] .toast-notification {
    border: 0.0625rem solid var(--ot-color-border);
    border-left: 0.25rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    box-shadow: var(--ot-shadow-lg);
}

/* Après la règle ci-dessus (même spécificité) : le trait gauche garde la sémantique erreur / succès. */
html[data-ui="v2"] .toast-notification.toast-error {
    border-left-color: var(--ot-color-danger);
}

html[data-ui="v2"] .toast-notification.toast-success {
    border-left-color: var(--ot-color-success);
}

/* « Supprimer le ticket » de la fiche actuelle : trait et texte danger, jamais d'aplat (§8). */
html[data-ui="v2"] .ticket-show-page button.btn-danger.ot-btn-danger,
html[data-ui="v2"] .ticket-show-page button.btn-danger.ot-btn-danger:hover:not(:disabled) {
    border: 0;
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-danger);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-ticket__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    column-gap: 2.5rem;
}

html[data-ui="v2"] .ot-ticket__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-ticket__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-ticket__crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ticket__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    color: var(--ot-color-text-secondary);
    text-decoration: none;
}

html[data-ui="v2"] .ot-ticket__back:hover {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-ticket__number {
    color: var(--ot-color-text-primary);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-ticket__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-ticket__actions .ot-btn-outline,
html[data-ui="v2"] .ot-ticket .ot-btn-outline {
    border: 0;
    background: transparent;
    cursor: pointer;
}

html[data-ui="v2"] .ot-ticket .ot-btn-outline:disabled,
html[data-ui="v2"] .ot-ticket__menu button:disabled,
html[data-ui="v2"] .ot-ticket-field select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-ticket__more {
    position: relative;
}

html[data-ui="v2"] .ot-ticket__more-toggle {
    justify-content: center;
    padding: 0;
    width: 2.5rem;
}

html[data-ui="v2"] .ot-ticket__menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    padding: 0.375rem;
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border), var(--ot-shadow-md);
}

html[data-ui="v2"] .ot-ticket__menu button {
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-sm);
    background: transparent;
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    text-align: left;
    cursor: pointer;
}

html[data-ui="v2"] .ot-ticket__menu button:hover,
html[data-ui="v2"] .ot-ticket__menu button:focus-visible {
    background: var(--ot-color-surface-hover);
}

html[data-ui="v2"] .ot-ticket__menu button.is-danger {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-ticket__title {
    margin: 0;
    font-size: var(--ot-font-size-h1);
    font-weight: var(--ot-font-weight-500);
    line-height: 1.25;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-ticket__pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-ticket-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    border-radius: var(--ot-radius-full);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-ticket-pill[data-tone="danger"] {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-danger);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-ticket-pill[data-tone="warning"] {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-warning);
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-ticket-pill[data-tone="success"] {
    color: var(--ot-color-success);
}

html[data-ui="v2"] .ot-ticket__panel {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-ticket__panel-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

html[data-ui="v2"] .ot-ticket-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ticket-field--wide {
    flex: 1 1 16rem;
}

html[data-ui="v2"] :is(.ot-ticket-field, .ot-composer__field) :is(select, input, textarea),
html[data-ui="v2"] .ot-ticket-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--ot-radius-md);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] :is(.ot-ticket-field, .ot-composer__field) :is(select, input, textarea):focus-visible,
html[data-ui="v2"] .ot-ticket-input:focus-visible,
html[data-ui="v2"] .ot-composer__body:focus-visible,
html[data-ui="v2"] .ot-draft-chat__input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary), 0 0 0 0.1875rem var(--ot-color-primary-soft);
}

html[data-ui="v2"] :is(.ot-ticket-field, .ot-composer__field) select option {
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-ticket__summary {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-soft), var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-ticket__summary-icon {
    flex-shrink: 0;
    margin-top: 0.1875rem;
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-ticket__summary-text {
    margin: 0;
    font-size: var(--ot-font-size-base);
    line-height: 1.55;
    color: var(--ot-color-text-secondary);
    white-space: pre-line;
}

html[data-ui="v2"] .ot-ticket__summary-meta {
    margin: 0.375rem 0 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

/* Conversation : client à gauche, réponse agent à droite, aparté pleine largeur, événements compacts. */
html[data-ui="v2"] .ot-thread {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-msg {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 80%;
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-msg--client {
    align-self: flex-start;
}

html[data-ui="v2"] .ot-msg--agent {
    align-self: flex-end;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-msg--note {
    align-self: stretch;
    max-width: none;
    background: var(--ot-color-surface-alt);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-warning);
}

html[data-ui="v2"] .ot-msg--note .ot-msg__head {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-msg--system {
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    max-width: none;
    padding: 0.25rem 0.75rem;
    background: transparent;
    box-shadow: none;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-msg__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-msg__head strong {
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-msg__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
    font-size: var(--ot-font-size-xs);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-msg__meta {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-msg__body {
    font-size: var(--ot-font-size-base);
    line-height: 1.55;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-ticket__locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ticket__history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-ticket__history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

html[data-ui="v2"] .ot-ticket__history-head h2 {
    margin: 0;
    font-size: var(--ot-font-size-h3);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-ticket__history-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-ticket__audit {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-ticket__audit li {
    display: grid;
    grid-template-columns: 11rem 10rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 0.0625rem solid var(--ot-color-divider);
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-ticket__audit-what {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-ticket__audit time,
html[data-ui="v2"] .ot-msg--system time {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ticket__pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

/* Composeur */
html[data-ui="v2"] .ot-composer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border), var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-composer.is-internal {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-warning), var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-composer__draft,
html[data-ui="v2"] .ot-composer__note-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-composer__draft .ph-icon,
html[data-ui="v2"] .ot-composer__draft svg {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-composer__draft strong {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-composer__note-banner {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-ticket-field textarea {
    height: auto;
}

html[data-ui="v2"] .ot-composer__body {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    min-height: 7.5rem;
    padding: 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-md);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-base);
    line-height: 1.55;
    resize: vertical;
}

html[data-ui="v2"] .ot-composer__options {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-composer__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-composer__field input {
    width: 7rem;
}

html[data-ui="v2"] .ot-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-composer__tabs {
    display: inline-flex;
    gap: 0.25rem;
}

html[data-ui="v2"] .ot-composer__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-bottom: 0.0625rem solid transparent;
    background: transparent;
    color: var(--ot-color-text-muted);
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ot-composer__tab.is-active {
    border-bottom-color: var(--ot-color-primary);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-composer__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

html[data-ui="v2"] .ot-composer__canned {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    font-size: var(--ot-font-size-sm);
    text-decoration: none;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-composer__canned kbd {
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--ot-radius-sm);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: transparent;
    color: var(--ot-color-text-muted);
    font-size: var(--ot-font-size-xs);
}

html[data-ui="v2"] .ot-composer .ot-btn-outline {
    border: 0;
    background: transparent;
    cursor: pointer;
}

html[data-ui="v2"] .ot-composer .ot-btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-composer .ta-upload {
    margin: 0;
}

html[data-ui="v2"] .ot-composer .ta-upload-buttons {
    margin: 0;
}

html[data-ui="v2"] :is(.ot-composer, .ot-portal, .ticket-show-page) :is(.ta-btn-file, .ta-btn-camera) {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: transparent;
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] :is(.ot-composer, .ot-portal, .ticket-show-page) :is(.ta-btn-file, .ta-btn-camera):hover {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
    background: transparent;
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] :is(.ot-composer, .ot-portal) .ta-file-item {
    border: 0;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    background: var(--ot-color-surface-alt);
}

html[data-ui="v2"] :is(.ot-composer, .ot-portal) :is(.ta-file-name, .ta-file-size, .ta-counter) {
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] :is(.ot-composer, .ot-portal) .ta-error {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-composer__error {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

/* Focus programmatique (lot 14) pour amener l'erreur à l'écran : élément non interactif, pas d'anneau. */
html[data-ui="v2"] .ot-composer__rewrite-error:focus {
    outline: none;
}

/* Colonne de droite */
html[data-ui="v2"] .ot-ticket__aside {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-ticket-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-ticket-card .ot-home__aside-title {
    margin: 0;
}

html[data-ui="v2"] .ot-ticket-card .ot-ticket-field {
    min-width: 0;
}

html[data-ui="v2"] .ot-ticket-card__muted {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ticket-card .ot-link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    min-height: 2.25rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-sla {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-sla__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-sla__row strong {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-sla__bar {
    height: 0.25rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface-alt);
    overflow: hidden;
}

html[data-ui="v2"] .ot-sla__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-sla[data-tone="warning"] .ot-sla__bar span {
    background: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-sla[data-tone="danger"] .ot-sla__bar span {
    background: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-sla[data-tone="danger"] .ot-sla__row strong {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-sla[data-tone="success"] .ot-sla__bar span {
    background: var(--ot-color-success);
}

html[data-ui="v2"] .ot-props {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-props dt {
    font-weight: var(--ot-font-weight-400);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-props dd {
    margin: 0;
    color: var(--ot-color-text-primary);
    overflow-wrap: anywhere;
}

html[data-ui="v2"] .ot-tags,
html[data-ui="v2"] .ot-links {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-tags__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    color: var(--ot-color-text-muted);
    cursor: pointer;
}

html[data-ui="v2"] .ot-tags__remove:hover {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-links {
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-links li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

html[data-ui="v2"] .ot-links__kind {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-links a {
    color: var(--ot-color-primary-muted);
    text-decoration: none;
}

html[data-ui="v2"] .ot-links a:hover {
    text-decoration: underline;
}

html[data-ui="v2"] .ot-links__title {
    flex-basis: 100%;
    color: var(--ot-color-text-secondary);
}

@media (max-width: 64rem) {
    html[data-ui="v2"] .ot-ticket__layout {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    html[data-ui="v2"] .ot-ticket__aside {
        width: 100%;
    }
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-ticket {
        padding: 0 1rem 2rem;
    }

    html[data-ui="v2"] .ot-ticket__title {
        font-size: var(--ot-font-size-h2);
    }

    html[data-ui="v2"] .ot-msg {
        max-width: 100%;
    }

    html[data-ui="v2"] .ot-ticket__audit li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    html[data-ui="v2"] .ot-ticket-field {
        min-width: 0;
        flex: 1 1 100%;
    }

    html[data-ui="v2"] .ot-composer__actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] .ot-ticket * {
        transition: none;
    }
}

/* ─── Lot 5b : board Kanban v2 (B-4, /board/{projectId}) et volet latéral de tâche ───
   Servi sous ui.shell_v2 ; limites WIP par statut (ECARTS D5). */
html[data-ui="v2"] .ot-board {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.5rem 2.5rem;
}

html[data-ui="v2"] .ot-board__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-board__crumb {
    color: var(--ot-color-text-secondary);
    text-decoration: none;
}

html[data-ui="v2"] .ot-board__crumb:hover {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-board__title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-board__title {
    margin: 0;
    font-size: var(--ot-font-size-h2);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-board__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-board__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-board .ot-segmented__item {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

html[data-ui="v2"] .ot-board .ot-btn-outline {
    border: 0;
    background: transparent;
    cursor: pointer;
}

html[data-ui="v2"] .ot-board__mobile-toggle {
    display: none;
}

/* Interrupteur « Mes tâches en tête » (30 × 16) */
html[data-ui="v2"] .ot-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
    cursor: pointer;
}

html[data-ui="v2"] .ot-switch input {
    position: absolute;
    opacity: 0;
    width: 1.875rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

html[data-ui="v2"] .ot-switch__track {
    display: inline-flex;
    align-items: center;
    width: 1.875rem;
    height: 1rem;
    padding: 0.125rem;
    box-sizing: border-box;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface-alt);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    transition: background-color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-switch__thumb {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-text-muted);
    transition: transform var(--ot-transition-fast), background-color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-switch input:checked + .ot-switch__track {
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-switch input:checked + .ot-switch__track .ot-switch__thumb {
    transform: translateX(0.875rem);
    background: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-switch input:focus-visible + .ot-switch__track {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.125rem;
}

/* Colonnes */
html[data-ui="v2"] .ot-board__columns {
    display: grid;
    grid-template-columns: repeat(var(--ot-board-columns, 5), minmax(15rem, 1fr));
    gap: 1rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

html[data-ui="v2"] .ot-board__column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-board__column-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-board__column-head h2 {
    margin: 0;
    font-size: var(--ot-font-size-md);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-board__count {
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-board__wip {
    margin-left: auto;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-board__wip[data-state="reached"] {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-board .plk-dd-dropzone,
html[data-ui="v2"] .ot-board__dropzone {
    display: flex;
    flex-direction: column;
    min-height: 5rem;
    border-radius: var(--ot-radius-xl);
}

/* Espacement porté par les cartes : les intercalaires de blazor-dragdrop (présents quand MaxItems est fixé)
   n'ajoutent rien tant qu'aucune carte ne les survole. */
html[data-ui="v2"] .ot-board .plk-dd-draggable {
    margin-bottom: 0.625rem;
}

html[data-ui="v2"] .ot-board .plk-dd-spacing {
    height: 0;
}

html[data-ui="v2"] .ot-board .plk-dd-spacing-dragged-over {
    height: auto;
    padding: 0.5rem;
}

html[data-ui="v2"] .ot-board .plk-dd-dragged-over {
    border: 0.0625rem dashed var(--ot-color-primary);
    background-color: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-board .plk-dd-dragged-over > div {
    background-color: transparent;
}

html[data-ui="v2"] .ot-board .plk-dd-in-transit {
    box-shadow: var(--ot-shadow-md);
}

html[data-ui="v2"] .ot-board__column.is-full .ot-board__dropzone {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-warning);
}

html[data-ui="v2"] .ot-board__empty {
    margin: -4.5rem 0 0;
    padding: 1.5rem 0;
    font-size: var(--ot-font-size-sm);
    text-align: center;
    color: var(--ot-color-text-muted);
    pointer-events: none;
}

/* Carte */
html[data-ui="v2"] .ot-board-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border: 0;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-board-card:hover,
html[data-ui="v2"] .ot-board-card:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover), var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-board-card.is-mine {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-board-card__column {
    align-self: flex-start;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--ot-radius-full);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-board-card__title {
    font-size: var(--ot-font-size-body-dense);
    line-height: 1.4;
}

html[data-ui="v2"] .ot-board-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-board-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

html[data-ui="v2"] .ot-board-card__due[data-tone="danger"] {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-board-card__due[data-tone="warning"] {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-board-card__assignee {
    margin-left: auto;
}

html[data-ui="v2"] .ot-board-card .ot-msg__avatar {
    width: 1.5rem;
    height: 1.5rem;
    box-shadow: 0 0 0 0.125rem var(--ot-color-surface);
}

/* Liste mobile (B-4m) : masquée sur grand écran */
html[data-ui="v2"] .ot-board__list {
    display: none;
}

html[data-ui="v2"] .ot-board__list-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-board__list-group .ot-home__aside-title {
    margin: 0.5rem 0 0;
}

/* Volet latéral de tâche (même contenu que la modale actuelle) */
html[data-ui="v2"] .task-detail-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    background: var(--ot-color-scrim, transparent);
}

html[data-ui="v2"] .task-detail-panel-overlay .task-detail-panel {
    width: 27.5rem;
    max-width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    box-shadow: -0.0625rem 0 0 var(--ot-color-border-strong), var(--ot-shadow-modal);
    overflow-y: auto;
}

html[data-ui="v2"] .task-detail-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .task-detail-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    color: var(--ot-color-text-secondary);
    cursor: pointer;
}

html[data-ui="v2"] .task-detail-panel-close:hover,
html[data-ui="v2"] .task-detail-panel-close:focus-visible {
    background: var(--ot-color-surface-hover);
    color: var(--ot-color-text-primary);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-board {
        padding: 0 1rem 2rem;
    }

    html[data-ui="v2"] .ot-board__mobile-toggle {
        display: inline-flex;
        justify-content: center;
        width: 2.75rem;
        padding: 0;
    }

    html[data-ui="v2"] .ot-board__actions .ot-segmented {
        display: none;
    }

    html[data-ui="v2"] .ot-board:not(.is-columns) .ot-board__list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    html[data-ui="v2"] .ot-board:not(.is-columns) .ot-board__columns {
        display: none;
    }

    html[data-ui="v2"] .ot-board.is-columns .ot-board__columns {
        grid-template-columns: repeat(var(--ot-board-columns, 5), 80vw);
        scroll-snap-type: x mandatory;
    }

    html[data-ui="v2"] .ot-board.is-columns .ot-board__column {
        scroll-snap-align: start;
    }

    html[data-ui="v2"] .task-detail-panel-overlay .task-detail-panel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] :is(.ot-board-card, .ot-switch__track, .ot-switch__thumb) {
        transition: none;
    }
}

/* ─── Lot 6b1 : portail client v2 (portal.v2) — coquille, connexion B-7, lien magique ───
   Propriétés logiques (inline / block) : le même CSS sert le français, l'anglais et l'arabe (dir="rtl").
   Couleur de marque du workspace (--ot-portal-brand) : trait de 1 px, halo du logo et onglet actif seulement. */
html[data-ui="v2"] .ot-portal {
    --ot-portal-accent: var(--ot-portal-brand, var(--ot-color-primary));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal__brandline {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--ot-portal-accent) 3rem, var(--ot-portal-accent) calc(100% - 3rem), transparent);
}

html[data-ui="v2"] .ot-portal__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4rem;
    padding-inline: clamp(1rem, 4vw, 3rem);
    background: var(--ot-color-surface);
    box-shadow: 0 0.0625rem 0 var(--ot-color-border);
}

html[data-ui="v2"] .ot-portal__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

html[data-ui="v2"] .ot-portal__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface-alt);
    box-shadow: 0 0 0 0.0625rem var(--ot-portal-accent), 0 0 1.125rem color-mix(in srgb, var(--ot-portal-accent) 35%, transparent);
    overflow: hidden;
}

html[data-ui="v2"] .ot-portal__logo--initials {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    background: transparent;
    color: var(--ot-color-primary-muted);
    font-size: var(--ot-font-size-label);
    font-weight: var(--ot-font-weight-600);
    letter-spacing: 0.02em;
}

html[data-ui="v2"] .ot-portal__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html[data-ui="v2"] .ot-portal__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

html[data-ui="v2"] .ot-portal__company {
    font-size: var(--ot-font-size-md);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-portal__tagline {
    font-size: var(--ot-font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal__nav {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    align-self: stretch;
}

html[data-ui="v2"] .ot-portal__tab {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.75rem;
    border-block-end: 0.125rem solid transparent;
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
    text-decoration: none;
}

html[data-ui="v2"] .ot-portal__tab:hover {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal__tab.active {
    border-block-end-color: var(--ot-portal-accent);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal__tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: auto;
}

html[data-ui="v2"] .ot-portal__user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal__logout {
    min-height: 2.75rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal__main {
    flex: 1;
    padding: 2.5rem clamp(1rem, 5vw, 5rem);
}

html[data-ui="v2"] .ot-portal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 1.25rem clamp(1rem, 5vw, 5rem);
    font-size: 0.71875rem; /* 11,5 px : pied légal du portail (README §5.6) */
    color: var(--ot-color-text-muted);
    box-shadow: 0 -0.0625rem 0 var(--ot-color-border);
}

html[data-ui="v2"] .ot-portal__footer a {
    color: inherit;
}

html[data-ui="v2"] .ot-portal__powered {
    margin-inline-start: auto;
}

/* Sélecteur de langue */
html[data-ui="v2"] .ot-portal-lang {
    position: relative;
}

html[data-ui="v2"] .ot-portal-lang__toggle,
html[data-ui="v2"] .ot-portal-lang--segmented button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    color: var(--ot-color-text-secondary);
    font: inherit;
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ot-portal-lang__toggle:hover,
html[data-ui="v2"] .ot-portal-lang--segmented button:hover {
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal-lang--segmented {
    display: inline-flex;
    border-radius: var(--ot-radius-lg);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    overflow: hidden;
}

html[data-ui="v2"] .ot-portal-lang--segmented button {
    border-radius: 0;
}

html[data-ui="v2"] .ot-portal-lang--segmented button.is-active {
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-lang__menu {
    position: absolute;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    padding: 0.375rem;
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border), var(--ot-shadow-md);
}

html[data-ui="v2"] .ot-portal-lang__menu button {
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-sm);
    background: transparent;
    color: var(--ot-color-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

html[data-ui="v2"] .ot-portal-lang__menu button:hover,
html[data-ui="v2"] .ot-portal-lang__menu button[aria-checked="true"] {
    background: var(--ot-color-surface-hover);
}

/* B-7 : connexion */
html[data-ui="v2"] .ot-portal-login {
    display: grid;
    grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    max-width: 75rem;
    margin-inline: auto;
    padding-block: clamp(1rem, 6vh, 4rem);
}

html[data-ui="v2"] .ot-portal-login__title {
    margin: 0 0 1rem;
    font-size: var(--ot-font-size-display);
    font-weight: var(--ot-font-weight-500);
    line-height: 1.15;
}

html[data-ui="v2"] .ot-portal-login__lead {
    margin: 0 0 2rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-login__field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding-inline: 1.25rem 0.375rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ot-portal-login__field:focus-within {
    box-shadow: inset 0 0 0 0.125rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-portal-login__field.has-error {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-danger);
}

html[data-ui="v2"] .ot-portal-login__field input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font: inherit;
    outline: none;
}

html[data-ui="v2"] .ot-portal-login__field .ot-btn-outline {
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-login__error {
    margin: 0.5rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-portal-login__sent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-login__sent svg {
    flex-shrink: 0;
    color: var(--ot-color-success);
}

html[data-ui="v2"] .ot-portal-login__sent strong {
    color: var(--ot-color-text-primary);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-portal-login__sent p {
    margin: 0.25rem 0 0;
}

html[data-ui="v2"] .ot-portal-login__help {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-login__help li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-portal-login__help svg {
    flex-shrink: 0;
    margin-block-start: 0.125rem;
}

html[data-ui="v2"] .ot-portal-login__aside {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    border-radius: var(--ot-radius-xl);
    background: radial-gradient(circle at 100% 0, var(--ot-color-section), transparent 70%);
}

html[data-ui="v2"] .ot-portal-bubble {
    max-width: 85%;
    padding: 0.875rem 1rem;
    font-size: var(--ot-font-size-base);
    line-height: 1.5;
}

html[data-ui="v2"] .ot-portal-bubble--client {
    align-self: flex-end;
    border-radius: var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-sm) var(--ot-radius-xl);
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-portal-bubble--team {
    align-self: flex-start;
    border-radius: var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-sm);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"][dir="rtl"] .ot-portal-bubble--client {
    border-radius: var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-sm);
}

html[data-ui="v2"][dir="rtl"] .ot-portal-bubble--team {
    border-radius: var(--ot-radius-xl) var(--ot-radius-xl) var(--ot-radius-sm) var(--ot-radius-xl);
}

html[data-ui="v2"] .ot-portal-login__legal {
    margin: 1rem 0 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

/* Lien magique */
html[data-ui="v2"] .ot-portal-magic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: clamp(2rem, 10vh, 6rem) auto 0;
    padding: 2rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    text-align: center;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-magic h1 {
    margin: 0;
    font-size: var(--ot-font-size-h3);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal-magic p {
    margin: 0;
}

html[data-ui="v2"] .ot-portal-magic .is-success {
    color: var(--ot-color-success);
}

html[data-ui="v2"] .ot-portal-magic .is-danger {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-portal-magic .ot-btn-outline {
    text-decoration: none;
}

/* Focus posé par programme sur le titre (FocusOnNavigate, tabindex -1 : jamais atteint au clavier) : pas d'anneau. */
html[data-ui="v2"] .ot-portal h1:focus {
    outline: none;
}

/* Arabe : Noto Sans Arabic en tête (déjà en repli dans --ot-font-family) */
html[data-ui="v2"][lang="ar"] .ot-portal {
    font-family: var(--ot-font-family-arabic);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-portal__bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-block: 0.5rem;
    }

    html[data-ui="v2"] .ot-portal__tagline,
    html[data-ui="v2"] .ot-portal__user-name {
        display: none;
    }

    html[data-ui="v2"] .ot-portal__nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    html[data-ui="v2"] .ot-portal__tab {
        min-height: 2.75rem;
    }

    html[data-ui="v2"] .ot-portal__main {
        padding: 1.5rem 1rem;
    }

    html[data-ui="v2"] .ot-portal-login {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-ui="v2"] .ot-portal-login__title {
        font-size: 1.625rem;
    }

    html[data-ui="v2"] .ot-portal-login__field {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html[data-ui="v2"] .ot-portal-login__field input {
        min-height: 3rem;
        padding-inline: 1.25rem;
        border-radius: var(--ot-radius-full);
        background: var(--ot-color-surface);
        box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    }

    html[data-ui="v2"] .ot-portal-login__field .ot-btn-outline {
        justify-content: center;
        min-height: 3rem;
        box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    }

    html[data-ui="v2"] .ot-portal-login__aside {
        display: none;
    }
}

/* ─── Lot 6b2 : accueil du portail v2 (B-5) ───
   Messagerie : démarrer une conversation, cartes « Avant d'écrire », conversations ; en marge interventions et
   collègues ayant accès. Propriétés logiques : même CSS en français, anglais et arabe. */
html[data-ui="v2"] .ot-portal-home {
    display: grid;
    grid-template-columns: minmax(0, 47.5rem) minmax(0, 20rem);
    align-items: start;
    column-gap: 3.5rem;
}

html[data-ui="v2"] .ot-portal-home__main {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-home__title {
    margin: 0 0 0.5rem;
    font-size: var(--ot-font-size-h1);
    font-weight: var(--ot-font-weight-500);
    line-height: 1.2;
}

html[data-ui="v2"] .ot-portal-home__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-home__tabs {
    display: none;
}

html[data-ui="v2"] .ot-portal-home__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-margin-block-start: 1rem;
}

html[data-ui="v2"] .ot-portal-home__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

html[data-ui="v2"] .ot-portal-home__section-head h2 {
    margin: 0;
    font-size: var(--ot-font-size-h4);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-portal-home__section-head span {
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-home__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block-start: 0.5rem;
}

html[data-ui="v2"] .ot-portal-home__aside section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Démarrer une conversation */
html[data-ui="v2"] .ot-portal-start {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ot-portal-start:focus-within {
    box-shadow: inset 0 0 0 0.125rem var(--ot-portal-accent, var(--ot-color-primary));
}

html[data-ui="v2"] .ot-portal-start__icon {
    margin-block-start: 0.375rem;
    color: var(--ot-color-primary);
    flex-shrink: 0;
}

html[data-ui="v2"] .ot-portal-start textarea {
    flex: 1;
    min-width: 0;
    min-height: 3rem;
    padding: 0.375rem 0;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

html[data-ui="v2"] .ot-portal-start .ot-btn-outline {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    min-height: 2.5rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Cartes « Avant d'écrire » */
html[data-ui="v2"] .ot-portal-help {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-portal-help__card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-portal-help__card svg {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-help__card h3 {
    margin: 0;
    font-size: var(--ot-font-size-base);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-portal-help__card p {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    line-height: 1.5;
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-help__card a {
    margin-block-start: auto;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-primary-muted);
}

/* Conversations */
html[data-ui="v2"] .ot-portal-conv {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-portal-conv__row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0.75rem;
    border-radius: var(--ot-radius-lg);
    color: inherit;
    text-decoration: none;
}

html[data-ui="v2"] .ot-portal-conv__row:hover {
    background: var(--ot-color-surface-hover);
}

html[data-ui="v2"] .ot-portal-conv__row:focus-visible {
    outline: var(--ot-button-focus-ring-width) solid var(--ot-color-primary);
    outline-offset: 0;
}

html[data-ui="v2"] .ot-portal-conv__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-conv__row.is-resolved .ot-portal-conv__badge {
    background: var(--ot-color-surface-muted);
    color: var(--ot-color-success);
}

html[data-ui="v2"] .ot-portal-conv__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-conv__subject {
    overflow: hidden;
    font-weight: var(--ot-font-weight-500);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-conv__row.is-unread .ot-portal-conv__subject {
    font-weight: var(--ot-font-weight-600);
}

html[data-ui="v2"] .ot-portal-conv__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-conv__meta .ot-ticket-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-conv__from {
    flex-shrink: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-conv__preview {
    overflow: hidden;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-conv__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-conv__awaiting {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-portal-conv__number {
    font-family: var(--ot-font-family-mono);
}

/* Marge : interventions à venir et collègues */
html[data-ui="v2"] .ot-portal-card {
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-portal-card h3 {
    margin: 0.25rem 0 0;
    font-size: var(--ot-font-size-base);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-portal-card__meta {
    margin: 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-card__meta::first-letter {
    text-transform: uppercase;
}

html[data-ui="v2"] .ot-portal-card__muted {
    margin: 0.25rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal-contacts li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* ─── Lot 6b2 : réhabillage Nocturne des pages portail non maquettées (liste « Mes tickets », création) ───
   Balisage et styles actuels conservés ; ces surcharges ne s'appliquent que sous portal.v2 (coquille .ot-portal). */
html[data-ui="v2"] .ot-portal :is(.pt-title, .ptc-title) {
    font-size: var(--ot-font-size-h2);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal .filter-tabs {
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface-muted);
}

html[data-ui="v2"] .ot-portal .filter-tab {
    border-radius: var(--ot-radius-full);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal .filter-tab.active {
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ot-portal :is(.btn-create, .btn-next, .btn-submit) {
    border-radius: var(--ot-radius-full);
    background: transparent;
    color: var(--ot-color-primary-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-portal :is(.btn-create, .btn-next:not(:disabled), .btn-submit:not(:disabled)):hover {
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-portal .btn-back-step {
    border-color: var(--ot-color-border-strong);
    border-radius: var(--ot-radius-full);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal .btn-back-step:hover {
    border-color: var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal :is(.pt-loading, .pt-empty, .pt-empty h3) {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal .pt-list {
    border-color: var(--ot-color-border);
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
}

html[data-ui="v2"] .ot-portal .pt-row {
    background: transparent;
    border-bottom-color: var(--ot-color-divider);
}

html[data-ui="v2"] .ot-portal .pt-row:hover {
    background: var(--ot-color-surface-hover);
}

html[data-ui="v2"] .ot-portal .pt-row-subject {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal :is(.pt-num, .pt-date, .pt-replies, .pt-arrow) {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal .pt-cat {
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface-muted);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal .ptc-back {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal :is(.step-section, .dynamic-form) {
    border-color: var(--ot-color-border);
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
}

html[data-ui="v2"] .ot-portal :is(.step-section h2, .cat-name) {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal :is(.step-sub, .dynamic-form-title, .form-group label) {
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal .cat-desc {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal .cat-card {
    border-color: var(--ot-color-border);
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface-alt);
}

html[data-ui="v2"] .ot-portal :is(.cat-card:hover, .cat-card.selected) {
    border-color: var(--ot-color-primary);
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-portal :is(.form-input, .form-textarea) {
    border-color: var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    box-sizing: border-box;
}

html[data-ui="v2"] .ot-portal :is(.form-input, .form-textarea):focus {
    border-color: var(--ot-color-primary);
    box-shadow: none;
}

html[data-ui="v2"] .ot-portal .required {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-portal .form-alert-error {
    border-color: var(--ot-color-danger);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    color: var(--ot-color-danger);
}

@media (max-width: 64rem) {
    html[data-ui="v2"] .ot-portal-home {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }
}

@media (max-width: 48rem) {
    /* B-5m : onglets d'ancrage (conversations, interventions, aide) sous la coquille */
    html[data-ui="v2"] .ot-portal-home__tabs {
        display: flex;
        gap: 0.5rem;
        margin-block-end: 1.25rem;
        overflow-x: auto;
    }

    html[data-ui="v2"] .ot-portal-home__tabs a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: 1rem;
        border-radius: var(--ot-radius-full);
        background: var(--ot-color-surface);
        box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
        color: var(--ot-color-text-secondary);
        text-decoration: none;
        white-space: nowrap;
    }

    html[data-ui="v2"] .ot-portal-home__title {
        font-size: 1.625rem;
    }

    html[data-ui="v2"] .ot-portal-start {
        flex-wrap: wrap;
    }

    html[data-ui="v2"] .ot-portal-start .ot-btn-outline {
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
    }

    html[data-ui="v2"] .ot-portal-conv__side time {
        display: none;
    }
}

/* ─── Lot 6b3 : conversation du portail v2 (B-6) ───
   Bulles du client en fin de ligne (à droite en français, à gauche en arabe), équipe en début de ligne : propriétés
   logiques uniquement, le sens suit dir="rtl". */
html[data-ui="v2"] .ot-portal-thread-page {
    display: grid;
    grid-template-columns: minmax(0, 56rem) minmax(0, 22.5rem);
    align-items: start;
    column-gap: 3.5rem;
}

html[data-ui="v2"] .ot-portal-thread {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-thread__crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-thread__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ot-color-text-secondary);
    text-decoration: none;
}

html[data-ui="v2"] .ot-portal-thread__back:hover {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-thread__number {
    font-family: var(--ot-font-family-mono);
}

/* Flèches et avion en papier retournés en arabe (README §5.7 : arrow-right, paper-plane-left). */
html[data-ui="v2"][dir="rtl"] .ot-portal-flip {
    transform: scaleX(-1);
}

html[data-ui="v2"] .ot-portal-thread__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

html[data-ui="v2"] .ot-portal-thread__heading {
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-thread__heading h1 {
    margin: 0 0 0.625rem;
    font-size: var(--ot-font-size-h2);
    font-weight: var(--ot-font-weight-500);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

html[data-ui="v2"] .ot-portal-thread__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-portal-thread__meta .ot-ticket-pill {
    white-space: nowrap;
}

html[data-ui="v2"] .ot-portal-thread__avatars {
    display: inline-flex;
}

html[data-ui="v2"] .ot-portal-thread__avatars .ot-msg__avatar {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
    box-shadow: 0 0 0 0.125rem var(--ot-color-surface-alt);
}

html[data-ui="v2"] .ot-portal-thread__avatars .ot-msg__avatar + .ot-msg__avatar {
    margin-inline-start: -0.375rem;
}

html[data-ui="v2"] .ot-portal .ot-msg__avatar.is-team {
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-portal-accent);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal-thread__resolve {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

/* Confirmation en ligne de la clôture (vérification locale Version B) */
html[data-ui="v2"] .ot-portal-thread__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

html[data-ui="v2"] .ot-portal-thread__confirm-text {
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal-thread__messages {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-portal-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 85%;
}

html[data-ui="v2"] .ot-portal-msg.is-client {
    flex-direction: row-reverse;
    align-self: flex-end;
}

html[data-ui="v2"] .ot-portal-msg.is-team {
    align-self: flex-start;
}

html[data-ui="v2"] .ot-portal-msg .ot-msg__avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
}

html[data-ui="v2"] .ot-portal-msg__bubble {
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--ot-radius-xl);
}

html[data-ui="v2"] .ot-portal-msg.is-client .ot-portal-msg__bubble {
    border-end-end-radius: var(--ot-radius-sm);
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-portal-msg.is-team .ot-portal-msg__bubble {
    border-end-start-radius: var(--ot-radius-sm);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-portal-msg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-msg__head strong {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal-msg__body {
    margin: 0;
    font-size: var(--ot-font-size-base);
    line-height: 1.55;
    color: var(--ot-color-text-primary);
    overflow-wrap: anywhere;
}

html[data-ui="v2"] .ot-portal-msg-system {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
    text-align: center;
}

html[data-ui="v2"] .ot-portal-msg-system__text {
    margin: 0;
}

html[data-ui="v2"] .ot-portal-thread__seen {
    margin: -0.5rem 0 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
    text-align: end;
}

html[data-ui="v2"] .ot-portal-thread__notice {
    margin: 0;
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-secondary);
}

/* Pièces jointes dans les bulles (TicketAttachmentList) */
html[data-ui="v2"] .ot-portal .tal-list {
    margin-top: 0.5rem;
}

html[data-ui="v2"] .ot-portal .tal-item {
    border: 0;
    border-radius: var(--ot-radius-md);
    background: transparent;
    padding: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal .tal-name {
    max-width: 20rem;
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal .tal-size {
    color: var(--ot-color-text-muted);
}

/* Composeur */
html[data-ui="v2"] .ot-portal-composer {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ot-portal-composer:focus-within {
    box-shadow: inset 0 0 0 0.125rem var(--ot-portal-accent, var(--ot-color-primary));
}

html[data-ui="v2"] .ot-portal-composer textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 3rem;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

html[data-ui="v2"] .ot-portal-composer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-portal-composer__actions .ta-upload {
    flex: 1;
    min-width: 0;
}

html[data-ui="v2"] .ot-portal-composer__actions .ta-upload-buttons {
    margin: 0;
}

html[data-ui="v2"] .ot-portal-composer .ot-btn-outline {
    border: 0;
    background: transparent;
    cursor: pointer;
}

html[data-ui="v2"] .ot-portal-composer__error {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

/* Colonne « À propos » */
html[data-ui="v2"] .ot-portal-thread__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block-start: 0.5rem;
}

html[data-ui="v2"] .ot-portal-thread__aside section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-block-end: 1.25rem;
    border-block-end: 0.0625rem solid var(--ot-color-divider);
}

html[data-ui="v2"] .ot-portal-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal-facts dt {
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-facts dd {
    margin: 0;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-portal-facts dd.is-high {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-portal-contacts__note {
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-portal-mayhelp {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-portal-mayhelp li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-portal-mayhelp a {
    color: inherit;
    text-decoration: none;
}

html[data-ui="v2"] .ot-portal-mayhelp a:hover {
    text-decoration: underline;
}

html[data-ui="v2"] .ot-portal-thread__note {
    margin: 0;
    font-size: var(--ot-font-size-xs);
    line-height: 1.5;
    color: var(--ot-color-text-muted);
}

@media (max-width: 64rem) {
    html[data-ui="v2"] .ot-portal-thread-page {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }
}

@media (max-width: 48rem) {
    /* B-6m : titre compact, bulles pleine largeur, bouton « résolu » pleine largeur au-dessus du composeur */
    html[data-ui="v2"] .ot-portal-thread__head {
        flex-direction: column;
        gap: 0.75rem;
    }

    html[data-ui="v2"] .ot-portal-thread__heading h1 {
        font-size: 1.25rem;
    }

    html[data-ui="v2"] .ot-portal-thread__resolve {
        order: 1;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    }

    html[data-ui="v2"] .ot-portal-msg {
        max-width: 92%;
    }

    html[data-ui="v2"] .ot-portal-msg .ot-msg__avatar {
        display: none;
    }
}

/* ─── Lot 8a : champ assistant et palette ⌘K (README §5.1 et §6) ───
   Saisie libre = recherche du workspace ; « > » = commandes Aller à / Créer.
   Barre trop courte : le champ rétrécit (placeholder en points de suspension) avant la marque et la navigation. */
html[data-ui="v2"] .ot-palette {
    min-width: 2.125rem;
}

html[data-ui="v2"] .ot-palette__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 23.75rem;
    max-width: min(32vw, 100%);
    min-height: 2.125rem;
    padding: 0 0.5rem 0 0.875rem;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-muted);
    font: inherit;
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ot-palette__trigger:hover {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-hover);
}

html[data-ui="v2"] .ot-palette__spark {
    flex-shrink: 0;
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-palette__placeholder {
    flex: 1;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-palette__kbd {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border-radius: var(--ot-radius-sm);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
    color: var(--ot-color-text-muted);
    font-family: var(--ot-font-family);
    font-size: 0.6875rem;
}

html[data-ui="v2"] .ot-palette__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ot-z-modal);
    border: 0;
    background: var(--ot-color-scrim);
}

html[data-ui="v2"] .ot-palette__dialog {
    position: fixed;
    top: 12vh;
    left: 50%;
    z-index: calc(var(--ot-z-modal) + 1);
    display: flex;
    flex-direction: column;
    width: min(40rem, calc(100vw - 2rem));
    max-height: 70vh;
    overflow: hidden;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-lg);
    transform: translateX(-50%);
}

html[data-ui="v2"] .ot-palette__field {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 0.0625rem 0 var(--ot-color-divider);
}

html[data-ui="v2"] .ot-palette__field:focus-within {
    box-shadow: 0 0.0625rem 0 var(--ot-color-divider), inset 0 -0.125rem 0 var(--ot-color-primary);
}

html[data-ui="v2"] .ot-palette__field-icon {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-palette__input {
    flex: 1;
    min-width: 0;
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font: inherit;
    font-size: var(--ot-font-size-md);
    outline: none;
    box-shadow: none;
}

html[data-ui="v2"] .ot-palette__input:focus,
html[data-ui="v2"] .ot-palette__input:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
}

html[data-ui="v2"] .ot-palette__list {
    margin: 0;
    padding: 0.375rem;
    overflow-y: auto;
    list-style: none;
}

html[data-ui="v2"] .ot-palette__section {
    padding: 0.625rem 0.625rem 0.25rem;
    font-size: var(--ot-font-size-xs);
    font-weight: var(--ot-font-weight-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-palette__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0 0.625rem;
    border-radius: var(--ot-radius-lg);
    color: var(--ot-color-text-primary);
    cursor: pointer;
}

html[data-ui="v2"] .ot-palette__item svg {
    flex-shrink: 0;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-palette__item.is-active {
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-palette__item.is-active svg {
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] .ot-palette__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-palette__context {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-palette__status {
    margin: 0;
    padding: 1.25rem 1rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-topbar__admin-mobile {
    display: none;
}

/* Barre compacte (même palier que la barre haute) : icône seule, à la hauteur du champ. */
@media (max-width: 60rem) {
    html[data-ui="v2"] .ot-palette__trigger {
        justify-content: center;
        width: 2.125rem;
        padding: 0;
    }

    html[data-ui="v2"] .ot-palette__placeholder,
    html[data-ui="v2"] .ot-palette__trigger .ot-palette__kbd {
        display: none;
    }
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-palette {
        min-width: var(--ot-button-min-height-touch);
    }

    html[data-ui="v2"] .ot-palette__trigger {
        justify-content: center;
        width: var(--ot-button-min-height-touch);
        height: var(--ot-button-min-height-touch);
        padding: 0;
    }

    html[data-ui="v2"] .ot-palette__placeholder,
    html[data-ui="v2"] .ot-palette__trigger .ot-palette__kbd {
        display: none;
    }

    html[data-ui="v2"] .ot-palette__dialog {
        top: 1rem;
    }

    html[data-ui="v2"] .ot-topbar__admin-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ot-button-min-height-touch);
        height: var(--ot-button-min-height-touch);
        border: 0;
        border-radius: var(--ot-radius-full);
        background: transparent;
        color: var(--ot-color-text-secondary);
        cursor: pointer;
    }

    html[data-ui="v2"] .ot-topbar__admin-mobile.is-open {
        color: var(--ot-color-primary-muted);
        box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    }
}

/* ─── Lot 8b : sélection et actions groupées de /work (README §5.3) ─── */
html[data-ui="v2"] .ot-work__header-actions .ot-btn-outline.is-active {
    color: var(--ot-color-primary-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-work-row__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

html[data-ui="v2"] .ot-work-row__select input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--ot-color-primary);
    cursor: pointer;
}

html[data-ui="v2"] .ot-work-row.is-selected {
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-bulkbar {
    position: sticky;
    bottom: 1rem;
    z-index: var(--ot-z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-md);
}

html[data-ui="v2"] .ot-bulkbar__row,
html[data-ui="v2"] .ot-bulkbar__form,
html[data-ui="v2"] .ot-bulkbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

html[data-ui="v2"] .ot-bulkbar__actions {
    margin-inline-start: auto;
}

html[data-ui="v2"] .ot-bulkbar__count {
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-bulkbar .ot-btn-outline {
    border: 0;
    background: transparent;
    cursor: pointer;
}

html[data-ui="v2"] .ot-bulkbar .ot-btn-outline.is-active {
    color: var(--ot-color-primary-muted);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-bulkbar .ot-btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-bulkbar__form label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-bulkbar__wide {
    flex: 1;
    min-width: 16rem;
}

html[data-ui="v2"] .ot-bulkbar__form :is(select, input) {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0 0.625rem;
    border: 0.0625rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    font: inherit;
}

html[data-ui="v2"] .ot-bulkbar__wide :is(select, input) {
    flex: 1;
    min-width: 0;
}

html[data-ui="v2"] .ot-bulkbar__hint {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-secondary);
}

html[data-ui="v2"] .ot-bulkbar__error {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-bulkbar {
        bottom: calc(var(--ot-tabbar-height) + 0.5rem);
    }

    html[data-ui="v2"] .ot-bulkbar__actions {
        margin-inline-start: 0;
    }
}

html[data-ui="v2"] .ot-work__header-actions button.ot-btn-outline {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* ─── Lot 8c : fiche ticket (actions suggérées, observateurs) et carte du board (priorité) ─── */
html[data-ui="v2"] .ot-suggest {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-suggest li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

html[data-ui="v2"] .ot-suggest li > svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-suggest__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

html[data-ui="v2"] .ot-suggest .ot-link-button {
    align-self: flex-start;
    color: var(--ot-color-primary-muted);
    text-align: start;
}

html[data-ui="v2"] .ot-suggest__why {
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-watchers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 0.375rem;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-watchers .ot-msg__avatar {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.625rem;
}

html[data-ui="v2"] .ot-ticket__anchor {
    display: block;
    scroll-margin-block-start: 5rem;
}

html[data-ui="v2"] .ot-board-card__priority {
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-board-card__priority[data-priority="high"] {
    color: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-board-card__priority[data-priority="low"] {
    color: var(--ot-color-text-muted);
}

/* ─── Lot 8d : « Mon équipe aujourd'hui » (B-1, README §5.2) ───
   Pastille 8 px : sauge présent, sable congé à valider, gris absent ou indisponible. */
html[data-ui="v2"] .ot-team-today ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-team-today li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-team-today__dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-team-today li[data-presence="present"] .ot-team-today__dot {
    background: var(--ot-color-success);
}

html[data-ui="v2"] .ot-team-today li[data-presence="leavetovalidate"] .ot-team-today__dot {
    background: var(--ot-color-warning);
}

html[data-ui="v2"] .ot-team-today__name {
    overflow: hidden;
    color: var(--ot-color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui="v2"] .ot-team-today__state {
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] a.ot-team-today__state {
    color: var(--ot-color-warning);
}

/* ── Assistant IA interne (lot 7b) : reformulation du composeur, résumé et brouillon à la demande,
      zone de question de B-1 et réponse dans ⌘K. Éléments absents du balisage si l'IA n'est pas disponible. ── */
html[data-ui="v2"] .ot-composer__rewrite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-composer__rewrite-icon {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-composer__pill {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-secondary);
    font-size: var(--ot-font-size-sm);
    cursor: pointer;
}

html[data-ui="v2"] .ot-composer__pill:hover:not(:disabled) {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-composer__pill:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.125rem;
}

html[data-ui="v2"] .ot-composer__pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-composer__rewrite-status {
    color: var(--ot-color-text-muted);
    font-style: italic;
}

html[data-ui="v2"] .ot-ticket__summary-body {
    flex: 1;
    min-width: 0;
}

html[data-ui="v2"] .ot-ticket__summary--empty {
    align-items: center;
}

html[data-ui="v2"] .ot-ticket__summary--empty .ot-ticket__summary-meta {
    margin: 0;
}

html[data-ui="v2"] .ot-ticket__summary-action,
html[data-ui="v2"] .ot-ticket__draft-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    min-height: 2.5rem;
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] :is(.ot-ticket__summary-action, .ot-ticket__draft-action):disabled {
    opacity: 0.6;
    cursor: progress;
}

html[data-ui="v2"] .ot-ticket__draft-action .ph-icon,
html[data-ui="v2"] .ot-ticket__draft-action svg {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-ticket__ai-actions {
    display: flex;
    justify-content: flex-end;
}

/* Chat de rédaction (brouillon IA conversationnel), au-dessus du composeur */
html[data-ui="v2"] .ot-draft-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border), var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-draft-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-draft-chat__title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--ot-font-size-sm);
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-draft-chat__title :is(.ph-icon, svg),
html[data-ui="v2"] .ot-draft-chat__msg--assistant .ot-draft-chat__meta :is(.ph-icon, svg) {
    color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-draft-chat__muted {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

/* Colonne inversée : la zone défilante s'ouvre en bas, sur le dernier échange, et y reste quand un échange s'ajoute. */
html[data-ui="v2"] .ot-draft-chat__scroll {
    display: flex;
    flex-direction: column-reverse;
    max-height: 22rem;
    overflow-y: auto;
}

html[data-ui="v2"] .ot-draft-chat__log {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-ui="v2"] .ot-draft-chat__msg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ot-radius-md);
    font-size: var(--ot-font-size-sm);
}

html[data-ui="v2"] .ot-draft-chat__msg--agent {
    align-self: flex-end;
    background: var(--ot-color-primary-soft);
}

html[data-ui="v2"] .ot-draft-chat__msg--assistant {
    align-self: flex-start;
    background: var(--ot-color-surface-alt);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border);
}

html[data-ui="v2"] .ot-draft-chat__msg.is-past {
    opacity: 0.6;
}

html[data-ui="v2"] .ot-draft-chat__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-draft-chat__meta strong {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-draft-chat__sent {
    color: var(--ot-color-success);
}

html[data-ui="v2"] .ot-draft-chat__text {
    margin: 0;
    color: var(--ot-color-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html[data-ui="v2"] .ot-draft-chat__text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

html[data-ui="v2"] .ot-draft-chat__turn-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

html[data-ui="v2"] .ot-draft-chat__turn-actions .ot-link-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-draft-chat__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--ot-font-size-xs);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-draft-chat__divider::before,
html[data-ui="v2"] .ot-draft-chat__divider::after {
    content: "";
    flex: 1;
    border-top: 0.0625rem solid var(--ot-color-border);
}

html[data-ui="v2"] .ot-draft-chat__form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

html[data-ui="v2"] .ot-draft-chat__input {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--ot-radius-md);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    background: var(--ot-color-surface-alt);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-sm);
    line-height: 1.5;
    resize: vertical;
}

html[data-ui="v2"] .ot-draft-chat__send {
    flex-shrink: 0;
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-draft-chat__msg {
        max-width: 100%;
    }

    html[data-ui="v2"] .ot-draft-chat__form {
        flex-direction: column;
        align-items: stretch;
    }
}

html[data-ui="v2"] .ot-ask {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

html[data-ui="v2"] .ot-ask__form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.375rem 0 1rem;
    border-radius: var(--ot-radius-full);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .ot-ask__form:focus-within {
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
}

html[data-ui="v2"] .ot-ask__input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-base);
}

html[data-ui="v2"] .ot-ask__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--ot-radius-full);
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-muted);
    color: var(--ot-color-primary);
    cursor: pointer;
}

html[data-ui="v2"] .ot-ask__submit:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.125rem;
}

html[data-ui="v2"] .ot-ask__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html[data-ui="v2"] .ot-ask__status,
html[data-ui="v2"] .ot-ask__error {
    margin: 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] .ot-ask__error {
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-ask__answer {
    padding: 0.875rem 1rem;
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary-soft), var(--ot-shadow-sm);
}

html[data-ui="v2"] :is(.ot-ask__question, .ot-palette__answer-question) {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.375rem;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-text-muted);
}

html[data-ui="v2"] :is(.ot-ask__text, .ot-palette__answer-text) {
    margin: 0;
    font-size: var(--ot-font-size-base);
    line-height: 1.55;
    color: var(--ot-color-text-secondary);
    white-space: pre-line;
}

html[data-ui="v2"] .ot-palette__answer {
    padding: 1rem;
    overflow-y: auto;
}

html[data-ui="v2"] .ot-palette__answer .ot-palette__status {
    padding: 0.25rem 0;
}

html[data-ui="v2"] .ot-palette__status--error {
    color: var(--ot-color-danger);
}

/* Bandeau d'erreur Blazor : le jaune clair historique rendait le texte (clair en Nocturne) illisible */
html[data-ui="v2"] #blazor-error-ui {
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    box-shadow: 0 -0.0625rem 0 var(--ot-color-danger);
}

html[data-ui="v2"] #blazor-error-ui .reload {
    color: var(--ot-color-primary-muted);
}

/* ─── Pages historiques sous v2 : sémantique en trait et en texte, jamais en aplat (§8) ─── */
html[data-ui="v2"] :is(.status-published, .status-active, .status-approved, .status-reimbursed) {
    background-color: color-mix(in srgb, var(--ot-color-success) 14%, transparent) !important;
    color: var(--ot-color-success) !important;
    box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--ot-color-success) 45%, transparent);
}

html[data-ui="v2"] :is(.status-expired, .status-rejected) {
    background-color: color-mix(in srgb, var(--ot-color-danger) 14%, transparent) !important;
    color: var(--ot-color-danger) !important;
    box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--ot-color-danger) 45%, transparent);
}

html[data-ui="v2"] :is(.status-archived, .status-cancelled) {
    background-color: transparent !important;
    color: var(--ot-color-text-muted) !important;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
}

html[data-ui="v2"] .btn-danger:not(.btn-link-small) {
    background: transparent;
    color: var(--ot-color-danger);
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-danger);
}

html[data-ui="v2"] .btn-danger:not(.btn-link-small):hover:not(:disabled) {
    background: color-mix(in srgb, var(--ot-color-danger) 14%, transparent);
}

html[data-ui="v2"] .badge-default {
    color: var(--ot-color-primary-muted);
}

/* Boutons d'action des pages historiques : accent en trait, jamais en aplat (§8), comme .ot-btn-outline--accent */
html[data-ui="v2"] :is(.btn-primary, .btn-add, .btn-edit, .btn-save, .export-btn):not(.ot-btn-outline) {
    background: transparent;
    border-color: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-primary);
    color: var(--ot-color-primary-muted);
}

html[data-ui="v2"] :is(.btn-primary, .btn-add, .btn-edit, .btn-save, .export-btn):not(.ot-btn-outline):hover:not(:disabled) {
    background: var(--ot-color-primary-soft);
    color: var(--ot-color-primary-muted);
}

/* Champs des pages historiques : « width: 100% » + padding débordait de la carte (visible à 390 px) */
html[data-ui="v2"] :where(input, select, textarea) {
    box-sizing: border-box;
}

/* Menu des langues du portail : voile transparent sous le menu, un clic à l'extérieur le replie */
html[data-ui="v2"] .ot-portal-lang__backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: transparent;
}

/* ─── Pages d'authentification (/Account/…) — cible Claude Design « Connexion back-office », 2026-10-02 ───
   VALIDATION-CONNEXION-BACK-OFFICE.md (écarts L1 à L22) : coquille de B-7 (.ot-portal, barre de marque, pied de page),
   pas de carte, colonne de 25rem alignée à gauche, halo d'accent à droite. Champs et bouton en contour, jamais d'aplat.
   Gabarits : _AuthLayout.cshtml (Connexion, Accès refusé) et AuthLayout.razor (Mot de passe oublié, Réinitialisation). */

/* Marge de 8 px du navigateur autour de la coquille B-7 (écart L15) : retirée pour toute la v2 (html[data-ui="v2"] body, lot 2). */

html[data-ui="v2"] .ot-auth {
    flex: 1 0 auto;
    box-sizing: border-box;
    width: min(75rem, 100% - 7rem);
    margin-inline: auto;
    padding-block: 3rem;
    display: grid;
    grid-template-columns: minmax(0, 25rem) 1fr;
    column-gap: 4rem;
    align-content: center;
    /* Recette Claude Design N1 : sans cela, la colonne suit le haut du halo (26,25rem) et les pages courtes
       (mot de passe oublié, accès refusé) remontent. */
    align-items: center;
}

html[data-ui="v2"] .ot-auth__glow {
    min-height: 26.25rem;
    background: radial-gradient(closest-side at 55% 45%, var(--ot-color-accent-900), transparent);
}

html[data-ui="v2"] .ot-auth__title {
    margin: 0 0 var(--ot-space-4);
    font-size: var(--ot-font-size-display);
    font-weight: var(--ot-font-weight-500);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

/* FocusOnNavigate pose le focus sur le h1 (tabindex -1, jamais atteint au clavier) : pas d'anneau (écart L19). */
html[data-ui="v2"] .ot-auth__title:focus {
    outline: none;
}

html[data-ui="v2"] .ot-auth__lead {
    margin: 0 0 2.1rem;
    font-size: var(--ot-font-size-md);
    line-height: 1.55;
    color: var(--ot-color-neutral-400);
    text-wrap: pretty;
}

html[data-ui="v2"] .ot-auth__lead strong {
    font-weight: var(--ot-font-weight-500);
    color: var(--ot-color-text-primary);
}

/* Identifiants refusés : alerte contour, au-dessus des champs, jamais doublée sous les champs (écarts L4, L5). */
html[data-ui="v2"] .ot-auth__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ot-space-3);
    margin-block-end: var(--ot-space-8);
    padding: var(--ot-space-4);
    border: 0.0625rem solid color-mix(in srgb, var(--ot-color-danger) 45%, transparent);
    border-radius: var(--ot-radius-lg);
    background: color-mix(in srgb, var(--ot-color-danger) 10%, transparent);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-base);
    line-height: 1.45;
}

html[data-ui="v2"] .ot-auth__alert svg {
    flex: none;
    margin-block-start: 0.0625rem;
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-auth__alert p {
    margin: 0;
}

html[data-ui="v2"] .ot-auth__fields {
    display: grid;
    gap: var(--ot-space-6);
}

html[data-ui="v2"] .ot-auth__field label {
    display: block;
    margin-block-end: 0.3125rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--ot-color-text-primary) 70%, transparent);
}

/* Champ : surface, liseré du champ de B-7, rayon 8 ; focus = bordure + anneau d'accent (écarts L7, L12, L18). */
html[data-ui="v2"] .ot-auth__input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    color: var(--ot-color-text-primary);
    font-size: var(--ot-font-size-body);
    caret-color: var(--ot-color-primary);
    transition: border-color var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-auth__input::placeholder {
    color: var(--ot-color-neutral-600);
}

html[data-ui="v2"] .ot-auth__input:hover {
    border-color: color-mix(in srgb, var(--ot-color-text-primary) 45%, transparent);
}

html[data-ui="v2"] .ot-auth__input:focus {
    border-color: var(--ot-color-primary);
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0;
}

html[data-ui="v2"] .ot-auth__input[aria-invalid="true"] {
    border-color: var(--ot-color-danger);
}

/* Recette N2 : champ en erreur et focalisé, un seul code couleur (danger), pas d'anneau accent sur bordure rouge. */
html[data-ui="v2"] .ot-auth__input[aria-invalid="true"]:focus {
    border-color: var(--ot-color-danger);
    outline-color: var(--ot-color-danger);
}

/* Remplissage automatique de Chrome : sinon fond bleu clair, seule surface claire de la page. */
html[data-ui="v2"] .ot-auth__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 62.5rem var(--ot-color-surface) inset;
    -webkit-text-fill-color: var(--ot-color-text-primary);
    caret-color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-auth__pw {
    position: relative;
}

html[data-ui="v2"] .ot-auth__pw .ot-auth__input {
    padding-inline-end: 2.75rem;
}

html[data-ui="v2"] .ot-auth__eye {
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--ot-radius-lg);
    background: transparent;
    color: var(--ot-color-neutral-500);
    cursor: pointer;
}

html[data-ui="v2"] .ot-auth__eye:hover {
    background: color-mix(in srgb, var(--ot-color-primary) 10%, transparent);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .ot-auth__eye:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0;
}

html[data-ui="v2"] .ot-auth__eye span {
    display: inline-flex;
}

html[data-ui="v2"] .ot-auth__eye [hidden] {
    display: none;
}

/* Message de champ : sous le champ, icône + texte, rouge désaturé de Nocturne (écarts L4, L22). */
html[data-ui="v2"] .ot-auth__error {
    display: flex;
    align-items: center;
    gap: var(--ot-space-2);
    margin: var(--ot-space-2) 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .ot-auth__error svg {
    flex: none;
}

/* Case « Rester connecté » : contrôle de 1rem thémé, libellé 14 px graisse 400 (écart L9). */
html[data-ui="v2"] .ot-auth__check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ot-space-3);
    min-height: 1.5rem;
    margin-block-start: var(--ot-space-6);
    font-size: var(--ot-font-size-base);
    cursor: pointer;
}

html[data-ui="v2"] .ot-auth__check input {
    position: absolute;
    inset-inline-start: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    opacity: 0;
}

html[data-ui="v2"] .ot-auth__box {
    display: grid;
    place-items: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 0.09375rem solid var(--ot-color-border-strong);
    border-radius: var(--ot-radius-sm);
    color: var(--ot-color-surface-alt);
}

html[data-ui="v2"] .ot-auth__box svg {
    opacity: 0;
}

html[data-ui="v2"] .ot-auth__check:hover .ot-auth__box {
    border-color: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-auth__check input:checked + .ot-auth__box {
    border-color: var(--ot-color-primary);
    background: var(--ot-color-primary);
}

html[data-ui="v2"] .ot-auth__check input:checked + .ot-auth__box svg {
    opacity: 1;
}

html[data-ui="v2"] .ot-auth__check input:focus-visible + .ot-auth__box {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.125rem;
}

/* Actions : bouton en contour d'accent (aspect .ot-btn-outline--accent) et lien sur la même ligne (écarts L6, L16). */
html[data-ui="v2"] .ot-auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ot-space-6);
    margin-block-start: var(--ot-space-8);
}

html[data-ui="v2"] .ot-auth__submit {
    justify-content: center;
    min-width: 9.25rem;
    padding-inline: var(--ot-space-6);
    border: 0;
    background: transparent;
    font-size: var(--ot-font-size-base);
    cursor: pointer;
    transition: background-color var(--ot-transition-fast), box-shadow var(--ot-transition-fast);
}

html[data-ui="v2"] .ot-auth__submit:hover {
    background: color-mix(in srgb, var(--ot-color-primary) 12%, transparent);
}

html[data-ui="v2"] .ot-auth__submit:active {
    background: color-mix(in srgb, var(--ot-color-primary) 22%, transparent);
}

html[data-ui="v2"] .ot-auth__submit:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0.125rem;
}

/* Envoi en cours : bouton occupé, second clic ignoré (écart L21). */
html[data-ui="v2"] .ot-auth__submit.is-loading {
    pointer-events: none;
    cursor: progress;
}

html[data-ui="v2"] .ot-auth__spin {
    display: none;
    animation: spinner-rotate 0.9s linear infinite;
}

html[data-ui="v2"] .ot-auth__submit.is-loading .ot-auth__spin {
    display: block;
}

html[data-ui="v2"] .ot-auth__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ot-space-2);
    color: var(--ot-color-accent-300);
    font-size: var(--ot-font-size-base);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ot-color-accent-300) 45%, transparent);
    text-underline-offset: 0.1875rem;
}

html[data-ui="v2"] .ot-auth__link:hover {
    color: var(--ot-color-accent-200);
    text-decoration-color: currentColor;
}

html[data-ui="v2"] .ot-auth__help {
    display: flex;
    align-items: center;
    gap: var(--ot-space-2);
    margin: 2.1rem 0 0;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-neutral-500);
}

html[data-ui="v2"] .ot-auth__help a:not(.ot-auth__link) {
    color: var(--ot-color-accent-300);
}

/* Lien envoyé (D7) : carte « Rien reçu ? » sur la surface, liseré Nocturne. */
html[data-ui="v2"] .ot-auth__card {
    padding: var(--ot-space-6);
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-sm);
}

html[data-ui="v2"] .ot-auth__card-title {
    margin: 0 0 var(--ot-space-2);
    font-weight: var(--ot-font-weight-500);
}

html[data-ui="v2"] .ot-auth__card-text {
    margin: 0 0 var(--ot-space-6);
    font-size: var(--ot-font-size-base);
    color: var(--ot-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] .ot-auth__spin {
        animation-duration: 2.4s;
    }
}

/* Mobile : une colonne alignée en haut (le clavier virtuel réduit la hauteur), cibles de 2,75rem (écarts L11, L20). */
@media (max-width: 48rem) {
    html[data-ui="v2"] .ot-auth {
        width: calc(100% - 2.1rem);
        padding-block: 2.1rem var(--ot-space-8);
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }

    html[data-ui="v2"] .ot-auth__glow {
        display: none;
    }

    html[data-ui="v2"] .ot-auth__title {
        font-size: 1.75rem;
    }

    html[data-ui="v2"] .ot-auth__lead {
        margin-block-end: var(--ot-space-8);
        font-size: var(--ot-font-size-body);
    }

    html[data-ui="v2"] .ot-auth__input {
        min-height: 2.75rem;
        font-size: var(--ot-font-size-md);
    }

    html[data-ui="v2"] .ot-auth__actions {
        flex-direction: column;
        align-items: stretch;
    }

    html[data-ui="v2"] .ot-auth__submit {
        width: 100%;
        min-height: 2.75rem;
    }

    html[data-ui="v2"] .ot-auth__actions .ot-auth__link {
        align-self: flex-start;
        padding-block: var(--ot-space-4);
    }

    html[data-ui="v2"] .ot-auth-shell .ot-portal__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ot-space-3);
        padding-block-end: max(1.25rem, env(safe-area-inset-bottom));
    }

    /* Recette N11 : « Propulsé par OptiTask » sous les coordonnées, pas seul à droite. */
    html[data-ui="v2"] .ot-auth-shell .ot-portal__powered {
        margin-inline-start: 0;
    }

    /* Recette N10 : pages d'authentification sans onglets ni outils, la barre garde une seule ligne de 3,5rem. */
    html[data-ui="v2"] .ot-auth-shell .ot-portal__bar {
        flex-wrap: nowrap;
        min-height: 3.5rem;
        padding-block: 0;
    }
}

/* Barre haute v2 : logo du workspace pour fond sombre à la place de la pastille d'initiales (WorkspaceMark). */
html[data-ui="v2"] .ot-topbar__logo {
    max-height: 1.5rem;
    max-width: 7.5rem;
}

/* ─── Fenêtres OptiTaskModal : en-tête neutre pour tous les modes — cible Claude Design « Modale utilisateur » §2.2
   (2026-10-02). Plus d'aplat ni de dégradé (orange en modification, bleu-vert en création) : le mode se lit dans la
   tuile d'icône, le titre et le bouton principal. Plein écran sous 48rem pour les formulaires. ─── */
html[data-ui="v2"] .optitask-modal {
    border-radius: var(--ot-radius-xl);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-lg);
}

html[data-ui="v2"] .optitask-modal .optitask-modal-header {
    min-height: 0;
    gap: var(--ot-space-4);
    padding: var(--ot-space-6) var(--ot-space-6) var(--ot-space-6) var(--ot-space-8);
    border-bottom: 0;
    border-radius: var(--ot-radius-xl) var(--ot-radius-xl) 0 0;
    background: linear-gradient(to right, transparent, var(--ot-color-divider) 3rem, var(--ot-color-divider) calc(100% - 3rem), transparent) bottom / 100% 0.0625rem no-repeat;
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .optitask-modal-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ot-radius-lg);
    background: var(--ot-color-accent-900);
    color: var(--ot-color-accent-300);
    font-size: 1.125rem;
    opacity: 1;
}

html[data-ui="v2"] .optitask-modal-mode-view .optitask-modal-icon {
    background: var(--ot-color-neutral-900);
    color: var(--ot-color-neutral-300);
}

html[data-ui="v2"] .optitask-modal-danger .optitask-modal-icon {
    background: color-mix(in srgb, var(--ot-color-danger) 14%, transparent);
    color: var(--ot-color-danger);
}

html[data-ui="v2"] .optitask-modal-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

html[data-ui="v2"] .optitask-modal-title {
    font-size: 1.25rem;
    font-weight: var(--ot-font-weight-500);
    line-height: 1.2;
}

html[data-ui="v2"] .optitask-modal-subtitle {
    margin: 0.125rem 0 0;
    overflow: hidden;
    font-size: var(--ot-font-size-sm);
    color: var(--ot-color-neutral-400);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le badge « Création / Modification » répétait le titre (écart M6). */
html[data-ui="v2"] .optitask-modal-badge {
    display: none;
}

html[data-ui="v2"] .optitask-modal-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--ot-radius-lg);
    color: var(--ot-color-neutral-500);
    opacity: 1;
}

html[data-ui="v2"] .optitask-modal-close:hover {
    background: color-mix(in srgb, var(--ot-color-primary) 10%, transparent);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .optitask-modal-close:focus-visible {
    outline: 0.125rem solid var(--ot-color-primary);
    outline-offset: 0;
}

html[data-ui="v2"] .optitask-modal-body {
    padding: var(--ot-space-8);
}

html[data-ui="v2"] .optitask-modal .optitask-modal-footer {
    gap: var(--ot-space-3);
    padding: var(--ot-space-6) var(--ot-space-8);
    border-top: 0;
    background: linear-gradient(to right, transparent, var(--ot-color-divider) 3rem, var(--ot-color-divider) calc(100% - 3rem), transparent) top / 100% 0.0625rem no-repeat;
}

/* Annuler / Fermer : contour neutre, jamais d'aplat sombre à côté d'une action principale en contour (écart M5). */
html[data-ui="v2"] .optitask-modal-footer .btn-secondary {
    border: 0;
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] .optitask-modal-footer .btn-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ot-color-text-primary) 7%, transparent);
}

html[data-ui="v2"] .optitask-modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 9.25rem;
}

/* Même corps pour toutes les actions du pied (Annuler était en 15,2 px, Enregistrer en 14,4 px). */
html[data-ui="v2"] .optitask-modal-footer :is(.btn-primary, .btn-secondary, .uw-back) {
    min-height: 2.25rem;
    font-size: var(--ot-font-size-base);
}

@media (max-width: 48rem) {
    html[data-ui="v2"] .optitask-modal-overlay:has(.optitask-modal:not(.optitask-modal-size-small)) {
        padding: 0;
    }

    html[data-ui="v2"] .optitask-modal:not(.optitask-modal-size-small) {
        position: fixed;
        inset: 0;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    html[data-ui="v2"] .optitask-modal:not(.optitask-modal-size-small) .optitask-modal-header {
        min-height: 3.5rem;
        padding: 0 var(--ot-space-4) 0 var(--ot-space-6);
        border-radius: 0;
    }

    html[data-ui="v2"] .optitask-modal:not(.optitask-modal-size-small) .optitask-modal-body {
        max-height: none;
        padding: var(--ot-space-6);
        overscroll-behavior: contain;
    }

    html[data-ui="v2"] .optitask-modal:not(.optitask-modal-size-small) .optitask-modal-footer {
        padding: var(--ot-space-4) var(--ot-space-6) calc(var(--ot-space-6) + env(safe-area-inset-bottom));
    }

    html[data-ui="v2"] .optitask-modal-close {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Formulaires de page (Départements, Équipes) et contacts portail (même correction que la fenêtre utilisateur, 2026-10-02) : Annuler en contour, jamais en aplat. */
html[data-ui="v2"] :is(.ot-page-form .form-actions, .portal-users) .btn-secondary {
    border: 0;
    background: transparent;
    box-shadow: inset 0 0 0 0.0625rem var(--ot-color-border-strong);
    color: var(--ot-color-text-primary);
}

html[data-ui="v2"] :is(.ot-page-form .form-actions, .portal-users) .btn-secondary:hover {
    background: color-mix(in srgb, var(--ot-color-text-primary) 7%, transparent);
}

/* Même gabarit de boutons que le pied des fenêtres : 2,25rem, 14 px. */
html[data-ui="v2"] :is(.ot-page-form .form-actions, .portal-users) :is(.btn-primary, .btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 var(--ot-space-6);
    font-size: var(--ot-font-size-base);
}

html[data-ui="v2"] .ot-page-form .ot-form-alert {
    margin-top: var(--ot-space-6);
}