/* ===== Diagnostic viewer: unified topbar / navigation / notes ===== */

.diagnostic-viewer-shell,
.page-shell,
.card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.diagnostic-viewer-header-card.diagnostic-viewer-topbar {
    /* 16 px suffisaient tant qu'un titre de page suivait et rendait lui-meme
       vingt pixels d'air. Les titres repetaient l'onglet actif et sont
       masques : la premiere carte remonterait contre la barre. */
    margin-bottom: 26px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;

    background:
        radial-gradient(circle at 18% 0%, rgba(55, 110, 179, 0.32), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(var(--consultation-rgb), 0.16), transparent 34%),
        linear-gradient(
            135deg,
            rgba(var(--slate-mid-rgb), 0.82),
            rgba(39, 45, 72, 0.82) 52%,
            rgba(47, 42, 82, 0.80)
        );

    border: 1px solid rgba(165, 180, 252, 0.20);

    box-shadow: 0 16px 38px rgba(var(--black-rgb), 0.18),
        0 0 0 1px rgba(129, 140, 248, 0.08) inset,
        inset 0 1px 0 rgba(var(--white-rgb), 0.09),
        inset 0 -1px 0 rgba(var(--slate-rgb), 0.28);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* PREMIERE LIGNE : tout ce qui concerne CE resultat. Qui, quel test, la
   consultation, et ce qu'on fait du test. Les onglets sont descendus d'un
   cran : serres au milieu, ils se lisaient mal et laissaient aux outils une
   colonne de 200 px ou chaque champ s'ecrasait en hauteur. */
.diagnostic-viewer-topbar__head {
    display: grid;
    /* L'identite prend ce qu'il lui faut, les commandes prennent le reste et
       partent de la gauche : serrees contre le bord droit, elles fuyaient
       l'identite au lieu de la suivre. */
    grid-template-columns: auto minmax(0, 1fr);
    /* Le volet « Ecarter » s'ancre ici : c'est le seul repere qui lui donne
       toute la largeur de la carte devant lui. */
    position: relative;
    /* Un nom long venait presque toucher la premiere commande. La distance se
       pose APRES le raccourci `gap` : placee avant, elle etait reecrite. */
    gap: 18px;
    column-gap: 72px;
    /* En HAUT, pas au centre : centre, le nom flottait sous la ligne de base
       des commandes et la rangee cessait de se lire comme une seule ligne. */
    align-items: start;
    padding: 20px 20px 16px;
}

.diagnostic-viewer-topbar__client {
    min-width: 0;
}

.diagnostic-viewer-topbar__client .page-header__title {
    margin: 0;
    color: var(--ink-50);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.diagnostic-viewer-topbar__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin-top: 8px;

    color: rgba(var(--ink-200-rgb), 0.86);
    font-size: 16px;
    line-height: 1.3;
}

.diagnostic-viewer-topbar__meta span {
    display: inline-flex;
    align-items: center;
}

.diagnostic-viewer-topbar__meta span + span::before {
    content: "•";
    margin: 0 12px;
    color: rgba(var(--green-rgb), 0.82);
}

/* --- « AUCUN RESULTAT » N'EST PAS UN OUTIL ---------------------------
   Cette phrase heritait de `grid-area: tools` et de `justify-self: end` : elle
   se posait a la place du selecteur de resultat, collee au bord droit d'une
   carte par ailleurs vide. Mesure a 900 px de large : la phrase occupait de 678
   a 851, dans le vide, a droite d'un bandeau ou il n'y avait plus rien.

   Elle prend la largeur du bandeau et se lit sous le nom, la ou l'oeil arrive.
   C'est une nouvelle, pas une commande. */
.diagnostic-viewer-topbar__empty {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding: 14px 16px;
    border-radius: 12px;

    background: rgba(var(--slate-rgb), 0.32);
    border: 1px solid rgba(var(--slate-light-rgb), 0.14);
}

/* Les outils s'alignent maintenant EN LARGEUR : le choix du resultat, la
   consultation avec sa duree, puis ce qu'on fait du test. Ils reviennent a la
   ligne quand la place manque, plutot que de s'ecraser. */
/* UNE RANGEE, QUATRE COMMANDES. Elles s'empilaient dans une colonne étroite,
   chacune avec sa propre mise en page : un intitulé ici, un titre en
   majuscules là. Rien ne partageait de ligne de base, donc rien ne
   s'alignait.

   L'alignement se fait par le BAS : c'est là que sont les commandes, et c'est
   sur elles que l'œil se cale, pas sur des intitulés de longueurs inégales. */
.diagnostic-viewer-topbar__tools {
    grid-area: tools;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* A GAUCHE : les commandes repartent du meme bord que le volet « Ecarter »
       en dessous. Deux departs a quelques pixels l'un de l'autre se lisent
       comme un defaut d'alignement, pas comme deux zones. */
    justify-content: flex-start;
    gap: 12px;
    justify-self: start;
    min-width: 0;
}

/* Le patron commun : un intitulé court au-dessus, la commande en dessous. */
.viewer-tool-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.viewer-tool-field__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.62));
    white-space: nowrap;
}

/* SECONDE LIGNE : les onglets, sur toute la largeur. */
.diagnostic-viewer-topbar__tabs {
    padding: 0 20px 18px;
}

.diagnostic-viewer-topbar__tabs .diagnostic-viewer-topbar__nav {
    width: 100%;
}

.diagnostic-viewer-topbar__picker {
    min-width: 200px;
}

.diagnostic-viewer-topbar__picker select {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    max-width: none;
    height: 42px;
    margin: 0;
    padding: 0 30px 0 12px;

    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.78);
    border-color: rgba(var(--slate-light-rgb), 0.22);

    color: var(--ink-50);
    font-size: 14px;
    line-height: 1;
}

.diagnostic-viewer-topbar__tools .consultation-control {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.diagnostic-viewer-topbar__tools .consultation-control__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.diagnostic-viewer-topbar__tools .consultation-control__form .btn,
.diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn {
    min-width: 0;
    white-space: nowrap;
    height: 42px;
    min-height: 42px;
    /* SYMETRIQUE. `align-items: center` centre dans la boite de CONTENU, celle
       qui reste une fois le rembourrage retire : avec 4 px en haut et 0 en
       bas, cette boite penchait, et le texte avec. Le centrage faisait son
       travail, on lui donnait une boite de travers. */
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
    white-space: nowrap;
}

.diagnostic-viewer-tool-btn {
    appearance: none;
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
    /* `filter` EN TETE : il porte le geste. Sans lui dans cette liste, les
       huit pour cent sautaient d'un coup pendant que le pixel montait en
       0,18 s, et le survol se lisait comme un a-coup. */
    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.diagnostic-viewer-tool-btn--primary {
    color: var(--encre-sur-fond-fixe);
    background: linear-gradient(135deg, var(--consultation-deep), #33125C);
    border-color: rgba(var(--blue-pale-rgb), 0.34);
    box-shadow: 0 8px 18px rgba(var(--couleur-accent-fort-rgb), 0.22);
}

/* Son survol ne repeint plus : il reposait un degrade plus clair, qu'une
   surcouche de fin de fichier annulait ensuite en redeclarant le degrade de
   base. Deux paires de couleurs a tenir accordees pour un seul bouton. */
.diagnostic-viewer-tool-btn--primary:hover {
    color: rgb(var(--white-rgb));
    border-color: rgba(var(--blue-pale-rgb), 0.48);
}

.diagnostic-viewer-tool-btn--secondary {
    color: var(--ink-200);
    background: #402879;
    border-color: rgba(var(--slate-light-rgb), 0.18);
}

.diagnostic-viewer-tool-btn--secondary:hover {
    color: rgb(var(--white-rgb));
    background: #523496;
    border-color: rgba(var(--slate-light-rgb), 0.28);
    transform: translateY(-1px);
}

.diagnostic-viewer-nav {
    display: flex;
    justify-content: stretch;
    margin: 0;
}

.diagnostic-viewer-topbar__nav {
    grid-area: nav;
    align-self: center;
    min-width: 0;
}

.diagnostic-viewer-nav__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.diagnostic-viewer-topbar__nav--count-4 .diagnostic-viewer-nav__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    max-width: 460px;
    margin: 0 auto;
}

.diagnostic-viewer-notes-card {
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    border-radius: 18px;

    background: rgba(var(--slate-mid-rgb), 0.58);
    border: 1px solid rgba(var(--slate-light-rgb), 0.18);
    box-shadow: 0 10px 24px rgba(var(--black-rgb), 0.10),
        inset 0 1px 0 rgba(var(--white-rgb), 0.05);
    overflow: hidden;
}

.diagnostic-viewer-notes-card .expert-notes-card__summary {
    min-height: 44px;
    padding: 10px 16px;
}

.diagnostic-viewer-notes-card .expert-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
}

.diagnostic-viewer-notes-card .expert-notes-card__summary strong {
    font-size: 14px;
    font-weight: 600;
}

.diagnostic-viewer-notes-card .expert-notes-card__hint {
    font-size: 12px;
    font-weight: 500;
}

.diagnostic-viewer-notes-card .expert-notes-form--compact {
    padding: 12px 16px 14px;
}

.diagnostic-viewer-notes-card textarea {
    min-height: 96px;
}

@media (max-width: 1180px) {
    .diagnostic-viewer-topbar__head {
        grid-template-columns: minmax(0, 1fr) var(--diagnostic-viewer-tools-width);
        gap: 16px 18px;
    }

    /* PAS DE SECOND TRAIT ICI. Cette regle date de l'epoque ou la navigation
       vivait dans la grille de l'entete, d'ou la zone « nav nav » ci-dessus.
       Elle est depuis dans la zone des onglets, qui porte deja son filet de
       separation : sous 1180 px les deux se dessinaient, a dix-neuf pixels
       l'un de l'autre. */
}

@media (max-width: 760px) {
    .diagnostic-viewer-header-card.diagnostic-viewer-topbar {
        border-radius: 18px;
    }

    .diagnostic-viewer-topbar__head {
        --diagnostic-viewer-tools-width: 100%;

        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 16px;
    }

    .diagnostic-viewer-topbar__client .page-header__title {
        font-size: 24px;
    }

    .diagnostic-viewer-topbar__meta {
        font-size: 14px;
    }

    .diagnostic-viewer-topbar__tools {
        width: 100%;
        justify-self: stretch;
        grid-template-columns: 1fr;
    }

    .diagnostic-viewer-topbar__nav {
        padding-top: 14px;
    }

    .diagnostic-viewer-nav__panel {
        gap: 8px;
    }

    .diagnostic-viewer-notes-card {
        margin-bottom: 16px;
    }
}

@media (max-width: 460px) {
    .diagnostic-viewer-topbar__nav--count-4 .diagnostic-viewer-nav__panel {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* ===== Diagnostic viewer: resource age period ===== */

.resource-age-period {
    --resource-age-accent: rgba(var(--slate-light-rgb), 0.86);
    --resource-age-accent-soft: rgba(var(--slate-light-rgb), 0.16);
    --resource-age-accent-border: rgba(var(--slate-light-rgb), 0.28);

    margin-top: 12px;
    padding: 12px 14px 13px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--resource-age-accent-soft), rgba(var(--white-rgb), 0.025));
    border: 1px solid var(--resource-age-accent-border);
    box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.025) inset,
        0 8px 18px rgba(var(--black-rgb), 0.10);
}

.resource-age-period--reserve,
.resource-age-period--good {
    --resource-age-accent: rgba(var(--share-bright-rgb), 0.92);
    --resource-age-accent-soft: rgba(var(--share-bright-rgb), 0.13);
    --resource-age-accent-border: rgba(var(--share-bright-rgb), 0.30);
}

.resource-age-period--warn {
    --resource-age-accent: rgba(var(--amber-deep-rgb), 0.95);
    --resource-age-accent-soft: rgba(var(--amber-deep-rgb), 0.13);
    --resource-age-accent-border: rgba(var(--amber-deep-rgb), 0.32);
}

.resource-age-period--danger {
    --resource-age-accent: rgba(var(--red-rgb), 0.92);
    --resource-age-accent-soft: rgba(var(--red-rgb), 0.13);
    --resource-age-accent-border: rgba(var(--red-rgb), 0.32);
}

.resource-age-period__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 11px;
}

.resource-age-period__main {
    min-width: 0;
}

.resource-age-period__eyebrow {
    margin-bottom: 4px;
    color: rgba(var(--ink-300-rgb), 0.78);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.resource-age-period__title {
    color: var(--ink-50);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.resource-age-period__delta {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 7px 10px;
    border-radius: 999px;
    text-align: center;
    color: rgb(var(--white-rgb));
    background: var(--resource-age-accent-soft);
    border: 1px solid var(--resource-age-accent-border);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.resource-age-scale {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--black-rgb), 0.22);
}

.resource-age-scale__cell {
    min-width: 0;
    min-height: 54px;
    padding: 7px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--white-rgb), 0.04);
    border-right: 1px solid rgba(var(--white-rgb), 0.06);
    box-sizing: border-box;
}

.resource-age-scale__cell:last-child {
    border-right: 0;
}

.resource-age-scale__cell.is-calendar {
    background: linear-gradient(180deg, rgba(var(--blue-rgb), 0.22), rgba(var(--white-rgb), 0.04));
}

.resource-age-scale__cell.is-bio {
    background: linear-gradient(180deg, var(--resource-age-accent-soft), rgba(var(--white-rgb), 0.04));
    box-shadow: inset 0 0 0 1px var(--resource-age-accent-border);
}

.resource-age-scale__cell.is-calendar.is-bio {
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.20), var(--resource-age-accent-soft));
}

.resource-age-scale__markers {
    display: flex;
    justify-content: center;
    gap: 4px;
    min-height: 18px;
}

.resource-age-scale__marker {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* UNE ENCRE SOMBRE SUR UNE PASTILLE VIVE, et c'est une correction de
       contraste. Une lettre de 10 px en blanc rendait 3,68 sur le bleu et 3,76
       sur le rouge, pour 4,5 exiges ; la meme lettre en encre sombre rend 4,92
       et 4,81. Les deux pastilles restent de leur couleur -- c'est elle qui
       porte le sens -- et seule l'encre change. C'est le raisonnement de
       `--texte-sur-accent` : le texte d'un aplat vif n'est ni le blanc ni le
       texte plein du theme. */
    color: var(--encre-sur-voile, #0b1626);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(var(--black-rgb), 0.18);
}

.resource-age-scale__marker--calendar {
    background: rgba(var(--blue-rgb), 0.92);
}

.resource-age-scale__marker--bio {
    background: var(--resource-age-accent);
}

.resource-age-scale__label {
    /* CES BORNES SE LISENT POUR SITUER L AGE : elles ne peuvent pas etre le
       texte le plus eteint de la page. A 0,42 elles rendaient 3,02 sur les
       cases teintees de l'echelle, et 4,06 au cran de mention -- encore sous le
       seuil, parce que ces cases sont plus claires que le sol. Elles prennent
       donc le cran du texte courant sur fond contraste, mesure a 4,89. */
    color: rgba(var(--ink-300-rgb), var(--voile-11, 0.76));
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.resource-age-scale__cell.is-calendar .resource-age-scale__label,
.resource-age-scale__cell.is-bio .resource-age-scale__label {
    color: rgba(var(--ink-50-rgb), 0.92);
}

.resource-age-period__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    color: rgba(var(--ink-300-rgb), 0.75);
    font-size: 12px;
    line-height: 1.25;
}

.resource-age-period__legend strong {
    color: var(--ink-50);
}

.resource-age-period__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.resource-age-period__detail {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(var(--black-rgb), 0.22);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.resource-age-period__detail span,
.resource-age-period__detail small {
    display: block;
    color: rgba(var(--ink-300-rgb), 0.72);
    font-size: 12px;
    line-height: 1.25;
}

.resource-age-period__detail strong {
    display: block;
    margin: 4px 0 3px;
    color: var(--ink-50);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}

.resource-age-period__detail--muted strong {
    color: rgba(var(--ink-200-rgb), 0.82);
}

.resource-age-period__note {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-300-rgb), 0.74);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .resource-age-period__head,
    .resource-age-period__details {
        grid-template-columns: 1fr;
    }

    .resource-age-period__head {
        display: grid;
    }

    .resource-age-period__delta {
        justify-self: start;
    }

    .resource-age-scale {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Diagnostic viewer: shared resource overview ===== */

.brain-functions-top__left--resource {
    display: block !important;
    min-width: 0;
}

.brain-functions-top__left--full {
    grid-column: 1 / -1;
}

.brain-functions-top__left--with-metrics {
    grid-column: 1 / -1;
}

/* DEUX COLONNES QUAND LA PLACE EXISTE, UNE QUAND ELLE MANQUE -- ET C EST LA
   PLACE REELLE QUI DECIDE, PAS LA LARGEUR DE LA FENETRE.

   Les deux pistes etaient ecrites `minmax(320px, 1fr)` chacune, et le repli a
   une colonne vivait dans une media query a 760. Or la fenetre n'est plus la
   colonne depuis qu'il y a un rail : a 900 px de fenetre, le contenu n'en a que
   604, la media query ne se declenchait pas, et la grille demandait 654 px pour
   en recevoir 604 -- 44 px dehors, coupes par le corps.

   `auto-fit` avec `min(320px, 100%)` pose la question au CONTENEUR : il met deux
   colonnes s'il peut, une sinon, et le `min()` empeche la piste d'exiger 320 px
   dans un cadre qui en offre moins. Aucune largeur d'ecran a deviner, et rien ne
   change la ou la place existe deja. */
.brain-resource-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 14px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.brain-resource-overview--consultation {
    margin: 14px 0 16px;
}

.age-compare-card--resource-period,
.age-compare-card--resource-state {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.age-compare-card--resource-period {
    padding: 0;
    overflow: hidden;
}

.resource-age-period--standalone {
    margin-top: 0;
    height: 100%;
    box-sizing: border-box;
    border-radius: 18px;
}

.age-compare-card--resource-state {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: flex-start;
}

.resource-battery__description {
    margin-top: 9px;
    color: rgba(var(--ink-300-rgb), 0.72);
    font-size: 12px;
    line-height: 1.45;
}

/* Внутри общего resource overview карточки не должны наследовать
   раскладку старого верхнего блока brain-functions-top. */
.brain-functions-top__left .brain-resource-overview .age-compare-card--resource-period,
.brain-functions-top__left .brain-resource-overview .age-compare-card--resource-state {
    grid-column: auto;
}

.resource-state-note {
    margin-top: 2px;
    padding-top: 13px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.resource-state-note__title {
    margin-bottom: 8px;
    color: var(--ink-50);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.resource-state-note__text {
    display: grid;
    gap: 5px;
    color: rgba(var(--ink-200-rgb), 0.86);
    font-size: 14px;
    line-height: 1.45;
}

.brain-functions-top__left--with-metrics .brain-resource-overview {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

@media (max-width: 900px) {
    .brain-functions-top__left--with-metrics {
        grid-column: 1 / -1;
    }

    .brain-functions-top__left--with-metrics .brain-resource-overview {
        grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    }
}

@media (max-width: 760px) {
    .brain-resource-overview,
    .brain-functions-top__left--with-metrics .brain-resource-overview {
        grid-template-columns: 1fr;
    }

    .resource-state-note__title {
        font-size: 21px;
    }
}

/* ===== Brain functions ===== */

.brain-functions-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.brain-metric--reserve {
    border-color: rgba(var(--gold-soft-rgb), 0.46);
    box-shadow:
        0 0 0 1px rgba(var(--gold-soft-rgb), 0.10) inset,
        0 0 22px rgba(var(--gold-soft-rgb), 0.12);
}

.brain-metric {
    background: rgba(var(--slate-rgb), 0.32);
    /* Apres `background`, que le raccourci reinitialiserait : la bordure est
       translucide, et sans cette borne le fond passe dessous et l'assombrit
       sur son pourtour, ce qui se lit comme un second trait. */
    background-clip: padding-box;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 12px;
    padding: 14px;
}

.brain-metric__label {
    font-size: 13px;
    color: rgb(var(--slate-light-rgb));
    /* L'intitule et son chiffre forment UNE information : ils se lisent
       d'un seul regard, donc ils se touchent presque. */
    margin-bottom: 1px;
}

.brain-metric__value {
    font-size: 24px;
    font-weight: 700;
    /* Sans hauteur de ligne posee, un chiffre de 24 px en reserve pres de
       29 : l'ecart venait surtout de la, pas de la marge. */
    line-height: 1.15;
}

.brain-chart-wrap {
    position: relative;
    height: 420px;
    background: rgba(var(--black-rgb), 0.22);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 14px;
    padding: 16px;
}

.brain-metric--red {
    border-color: rgba(var(--red-rgb), 0.28);
    background: rgba(var(--red-deep-rgb), 0.14);
}

.brain-metric--red .brain-metric__label,
.brain-metric--red .brain-metric__value {
    color: var(--couleur-danger-doux);
}

.brain-metric--blue {
    border-color: rgba(var(--blue-rgb), 0.28);
    background: rgba(30, 64, 175, 0.14);
}

.brain-metric--blue .brain-metric__label,
.brain-metric--blue .brain-metric__value {
    color: var(--blue-pale);
}

.brain-metric--green {
    border-color: rgba(var(--share-bright-rgb), 0.28);
    background: rgba(20, 83, 45, 0.14);
}

.brain-metric--green .brain-metric__label,
.brain-metric--green .brain-metric__value {
    color: var(--couleur-succes-doux);
}

.brain-metric__label::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.brain-metric--red .brain-metric__label::before { background: rgb(var(--red-rgb)); }
.brain-metric--blue .brain-metric__label::before { background: rgb(var(--blue-rgb)); }
.brain-metric--green .brain-metric__label::before { background: rgb(var(--share-bright-rgb)); }

/* Gris : un repere, pas une des trois fonctions tracees. */
.brain-metric--grey .brain-metric__label::before { background: rgb(var(--slate-light-rgb)); }

.brain-metric--grey {
    border-color: rgba(var(--slate-light-rgb), 0.24);
    background: rgba(var(--ink-600-rgb), 0.14);
}

.brain-metric--grey .brain-metric__label,
.brain-metric--grey .brain-metric__value {
    color: var(--ink-200);
}

.brain-metric__norm {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
}

.brain-metric__norm-label {
    color: rgba(var(--ink-300-rgb), 0.68);
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 900px) {
    .brain-functions-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brain-chart-wrap {
        height: 320px;
    }
}

@media (max-width: 640px) {
    .brain-functions-metrics {
        grid-template-columns: 1fr;
    }
}

.brain-functions-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* Убираем промежуточные обёртки из раскладки,
   чтобы все карточки легли в общую сетку */
.brain-functions-top__left,
.brain-functions-top__right,
.brain-functions-top__left .brain-functions-metrics--age,
.brain-functions-top .brain-functions-side-metrics {
    display: contents;
}

.brain-functions-top__left .age-compare-card,
.brain-functions-top__left .brain-metric {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    box-sizing: border-box;
}

/* Первая строка: шкала + пояснение */
.brain-functions-top__left .age-compare-card {
    grid-column: span 2;
}

.brain-functions-top__left .brain-metric {
    grid-column: span 2;
}

/* Вторая строка: четыре плашки функций */
.brain-functions-side-metrics--below {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    margin-top: 16px;
    margin-bottom: 22px;
}

/* LE GENERAL D'ABORD, LE PARTICULIER ENSUITE.
   Cette regle vivait plus bas dans le fichier : a specificite egale, elle
   l'emportait sur la variante `--below`, qui doublait donc la classe de son
   conteneur pour reprendre la main. Remise a sa place, l'ordre suffit. */
.brain-functions-side-metrics .brain-metric {
    grid-column: span 1;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brain-functions-side-metrics--below .brain-metric {
    min-height: 78px;
    display: flex;
    flex-direction: column;

    /* Par le haut : centrees, les cartes se composaient chacune autour de leur
       propre milieu et rien ne tombait au meme niveau d'une carte a l'autre. */
    justify-content: flex-start;
}

/*
 * L'ALIGNEMENT VIENT DE LA GRILLE, PLUS D'UNE HAUTEUR RESERVEE.
 *
 * L'intitule reservait deux lignes (`min-height: 2.6em`) pour que la valeur
 * tombe au meme niveau d'une carte a l'autre quand un libelle passe sur deux
 * lignes. Mesure : le texte fait 15 px et la reserve 34, soit 19 px de vide
 * sous chaque intitule des que le libelle tient sur une ligne, c'est-a-dire
 * presque toujours.
 *
 * Les cartes partagent desormais les RANGEES de la grille qui les porte :
 * intitule, valeur, explication, norme. Chaque rangee prend la hauteur du plus
 * grand des quatre, et rien n'est reserve d'avance. Le cas du libelle sur deux
 * lignes reste donc traite, et les explications s'alignent elles aussi, ce que
 * la reserve ne faisait pas.
 */
.brain-functions-side-metrics--below .brain-metric__label {
    display: flex;
    align-items: flex-start;

    /* L'ecart vient deja de la marge du `::before` : un `gap` en plus le
       doublerait. */
    gap: 0;
}

/* LE SOCLE, pour un navigateur sans subgrid : la reserve d'origine, qui est le
   seul moyen d'aligner les valeurs quand un libelle passe sur deux lignes. */
.brain-functions-side-metrics--below .brain-metric__label {
    min-height: 2.6em;
}

/* AVEC SUBGRID, la grille aligne elle-meme et la reserve tombe. Ecrit dans ce
   sens, et non en `@supports not` : la negation etait evaluee a vrai alors que
   subgrid est bien reconnu, et elle renvoyait les cartes en flex derriere le
   dos de la regle principale. */
@supports (grid-template-rows: subgrid) {
    .brain-functions-side-metrics--below {
        grid-template-rows: repeat(4, auto);
    }

    .brain-functions-side-metrics--below .brain-metric {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;

        /* Un seul endroit decide de l'ecart entre les quatre rangees. Les
           marges que chaque enfant portait pour lui-meme sont annulees plus
           bas. */
        row-gap: 6px;
    }

    .brain-functions-side-metrics--below .brain-metric__label {
        min-height: 0;
    }
}

/* La pastille se centre sur la PREMIERE ligne du libelle. Alignee en haut de
   la boite, elle flottait au-dessus du texte quand celui-ci passait sur deux
   lignes ; la demi-hauteur de ligne moins son propre rayon la remet dessus. */
.brain-functions-side-metrics--below .brain-metric__label::before {
    flex: 0 0 auto;

    /* Repli pour les navigateurs sans `lh` : approximation sur la hauteur de
       ligne usuelle. */
    margin-top: calc(0.75em - 4px);

    /* Exact : la moitie de la hauteur de ligne reelle, moins le rayon. */
    margin-top: calc((1lh - 8px) / 2);
}

/* Le pied de norme se pose au bas de sa carte, quelle que soit la longueur du
   commentaire au-dessus. */
.brain-functions-side-metrics--below .brain-metric__norm {
    margin-top: auto;
    padding-top: 8px;
}

@media (max-width: 1100px) {
    .brain-functions-side-metrics--below {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .brain-functions-side-metrics--below {
        grid-template-columns: 1fr;
    }
}

.brain-functions-side-metrics .brain-metric__value {
    font-size: 22px;
}

.brain-functions-side-metrics .brain-metric__label {
    margin-bottom: 8px;
}

/* Dans la version en rangees, l'ecart est celui de la grille : les marges
   propres a chaque enfant s'y ajouteraient. */
.brain-functions-side-metrics--below .brain-metric > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ======================================================================
   LES TROIS BLOCS D'UNE CARTE RESPIRENT PAREIL
   ======================================================================
   Les quatre rangees sont a 6 px l'une de l'autre, mais ce n'est pas ce
   qu'on voit : a l'oeil, ce qui compte est l'ecart entre les ENCRES, et il
   depend de l'interligne de chaque bloc. Mesure : 8 px entre le nombre et
   le texte, 15 px entre le texte et la norme. La carte paraissait couper
   apres le nombre et respirer avant la norme.

   Sept pixels au-dessus du texte remettent les deux ecarts a la meme
   valeur. La regle est ecrite ICI, dans la portee de la remise a zero
   ci-dessus : posee ailleurs, elle pesait moins et ne s'appliquait pas.
   ====================================================================== */
.brain-functions-side-metrics--below .brain-metric > .brain-metric__hint {
    margin-top: 7px;
}

.brain-metric[data-series] {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: default;
}

.brain-metric[data-series]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--black-rgb), 0.18);
}

.brain-metric__value-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.brain-metric__value-row .brain-metric__value {
    flex: 0 0 auto;
    margin: 0;
}

.brain-metric__value-row .brain-metric__status {
    margin-left: 0;
}

.brain-metric__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;

    background: rgba(var(--amber-deep-rgb), 0.14);
    border: 1px solid rgba(var(--amber-deep-rgb), 0.34);
    color: var(--amber-pale);

    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.brain-metric--attention {
    box-shadow: inset 0 0 0 1px rgba(var(--etat-vigilance-rgb), 0.12),
        0 0 20px rgba(var(--etat-vigilance-rgb), 0.10);
}

.brain-metric--attention[data-series]:hover {
    box-shadow: 0 10px 24px rgba(var(--black-rgb), 0.18),
        inset 0 0 0 1px rgba(var(--etat-vigilance-rgb), 0.12),
        0 0 20px rgba(var(--etat-vigilance-rgb), 0.12);
}

@media (max-width: 1100px) {
    .brain-functions-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brain-functions-top__left .age-compare-card,
    .brain-functions-top__left .brain-metric,
    .brain-functions-side-metrics .brain-metric {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .brain-functions-top {
        grid-template-columns: 1fr;
    }

    .brain-functions-top__left .age-compare-card,
    .brain-functions-top__left .brain-metric,
    .brain-functions-side-metrics .brain-metric {
        grid-column: span 1;
    }
}

/* =========================================
   Diagnostic viewer: consultation mode
   ========================================= */

.consultation-viewer-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(var(--consultation-rgb), 0.30);
    background:
        linear-gradient(
            135deg,
            rgba(103, 52, 151, 0.84),
            rgba(59, 61, 219, 0.815) 52%,
            rgba(103, 52, 151, 0.84)
        );
    box-shadow: 0 0 0 1px rgba(var(--consultation-rgb), 0.04) inset,
        0 8px 20px rgba(var(--black-rgb), 0.08);
}

.consultation-viewer-notice__main {
    min-width: 0;
}

.consultation-viewer-notice__title {
    margin-bottom: 3px;
    color: #ddd6fe;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.consultation-viewer-notice__text {
    color: rgba(var(--violet-pale-rgb), 0.78);
    font-size: 13px;
    line-height: 1.4;
}

.consultation-viewer-notice__state {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(var(--slate-rgb), 0.34);
    border: 1px solid rgba(221, 214, 254, 0.14);
    color: rgba(var(--violet-pale-rgb), 0.80);
    font-size: 12px;
    line-height: 1.2;
}

.consultation-viewer-notice__state strong {
    color: rgb(var(--white-rgb));
}

.consultation-viewer-notice__state--empty {
    color: rgba(var(--violet-pale-rgb), 0.68);
}

.consultation-viewer-notice__clear-form {
    margin: 0;
}

.consultation-viewer-notice__clear-btn {
    appearance: none;
    border: 1px solid rgba(var(--red-light-rgb), 0.28);
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(var(--red-rgb), 0.12);
    color: var(--couleur-danger-doux);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.consultation-viewer-notice__clear-btn:hover {
    background: rgba(var(--red-rgb), 0.20);
    color: rgb(var(--white-rgb));
}

.consultation-section-share {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(var(--consultation-rgb), 0.22);
    background: linear-gradient(
            135deg,
            rgba(var(--consultation-rgb), 0.10),
            rgba(var(--white-rgb), 0.025)
        );
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.consultation-section-share--inline {
    margin-top: -4px;
}

.consultation-section-share__label {
    color: rgba(var(--violet-pale-rgb), 0.78);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.consultation-section-share__form {
    margin: 0;
    flex: 0 0 auto;
}

.consultation-section-share__button {
    appearance: none;
    border: 1px solid rgba(var(--consultation-rgb), 0.60);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(107, 48, 163, 0.54);
    color: var(--violet-pale);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    cursor: pointer;
    transition: 0.18s ease;
}
/* `.consultation-section-share__button:hover` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.3734 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.consultation-section-share__button.is-active {
    background: rgba(241, 45, 241, 0.58);
    border-color: rgba(var(--white-rgb), 0.8);
    color: var(--couleur-succes-doux);
}

@media (max-width: 760px) {
    .consultation-viewer-notice,
    .consultation-section-share {
        align-items: stretch;
        flex-direction: column;
    }

    .consultation-viewer-notice__state {
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .consultation-section-share__form,
    .consultation-section-share__button {
        width: 100%;
    }

    .consultation-section-share__button {
        text-align: center;
    }
}

.diagnostic-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.diagnostic-section-head h2 {
    margin: 0;
    min-width: 0;
}

.consultation-section-share__form--head {
    margin: 0;
    flex: 0 0 auto;
}

.consultation-section-share__button--head {
    white-space: nowrap;
}

.organs-system-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.organs-system-head .organs-system-title {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.organ-share-form {
    margin: 0;
    flex: 0 0 auto;
}

.organ-share-form--group {
    margin-left: auto;
}

.organ-side-card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
}

.organ-side-card__title-row .organ-side-card__title {
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
    overflow-wrap: normal;
}

.consultation-section-share__button--small {
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .organs-system-head,
    .organ-side-card__title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .organ-share-form,
    .organ-share-form--group,
    .organ-share-form .consultation-section-share__button {
        width: 100%;
    }
}

/* ===== Therapy blocks picker ===== */

.therapy-block-picker {
    margin: 18px 0 22px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(34, 62, 94, 0.6);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    backdrop-filter: blur(14px)
}

.therapy-block-picker__head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.therapy-block-picker__head h3 {
    margin-bottom: 6px;
}

.therapy-block-picker__select-wrap {
    min-width: 320px;
}

.therapy-block-picker__select-wrap label {
    margin-bottom: 6px;
}

.therapy-block-picker__select-wrap select {
    margin-bottom: 0;
}

.therapy-block-detail {
    display: grid;
    gap: 14px;
}

.therapy-block-detail__top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.therapy-block-detail__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink-50);
    margin-bottom: 8px;
}

.therapy-block-detail__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ink-300);
    font-size: 14px;
}

.therapy-block-detail__badge {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(var(--share-bright-rgb), 0.18);
    border: 1px solid rgba(var(--share-bright-rgb), 0.34);
    color: var(--couleur-succes-doux);
    font-size: 13px;
    font-weight: 700;
}

.therapy-block-detail__bulk {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.06);
}

.therapy-block-detail__bulk label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.therapy-block-detail__bulk input {
    width: 110px;
    margin-bottom: 0;
}

.therapy-block-items,
.therapy-item-children {
    display: grid;
    gap: 10px;
}

.therapy-block-child,
.therapy-item-child-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.06);
}

.therapy-block-child__name,
.therapy-item-child-row__title {
    font-weight: 600;
    color: var(--ink-50);
    line-height: 1.35;
}

.therapy-block-child__radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-weight: 700;
}

.therapy-block-child__radio input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: rgb(var(--share-bright-rgb));
}

.therapy-block-child__sessions,
.therapy-item-child-row__sessions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 14px;
}

.therapy-block-child__sessions input,
.therapy-item-child-row__sessions input {
    width: 82px;
    margin-bottom: 0;
    padding: 8px 10px;
}

.therapy-block-detail__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.therapy-item-children-form {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.therapy-item-children-form__submit {
    justify-self: start;
}

@media (max-width: 760px) {
    .therapy-block-picker__select-wrap {
        width: 100%;
        min-width: 0;
    }

    .therapy-block-child,
    .therapy-item-child-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .therapy-block-child__sessions,
    .therapy-item-child-row__sessions {
        justify-content: space-between;
    }

    .therapy-block-child__sessions input,
    .therapy-item-child-row__sessions input {
        width: 120px;
    }
}

/* ===== Therapy order history ===== */

.therapy-order-card-head,
.therapy-history-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.therapy-order-card-head h2,
.therapy-history-head h2 {
    margin-bottom: 6px;
}

.therapy-order-card-head .btn {
    flex: 0 0 auto;
}

.therapy-history-list {
    display: grid;
    gap: 12px;
}

.therapy-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 14px;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.therapy-history-row__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.therapy-history-row__title {
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-50);
}

.therapy-history-row__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--ink-300);
}

.therapy-history-row__courses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.therapy-history-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(var(--blue-rgb), 0.14);
    border: 1px solid rgba(var(--blue-rgb), 0.22);
    color: var(--blue-mist);
    font-size: 13px;
    line-height: 1.2;
}

.therapy-history-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.therapy-history-status--draft {
    background: rgba(var(--slate-light-rgb), 0.16);
    color: var(--ink-300);
}

.therapy-history-status--waiting {
    background: rgba(var(--etat-vigilance-rgb), 0.18);
    color: var(--amber-pale);
}

.therapy-history-status--active {
    background: rgba(var(--share-bright-rgb), 0.18);
    color: var(--couleur-succes-doux);
}

.therapy-history-status--error {
    background: rgba(var(--red-rgb), 0.18);
    color: var(--couleur-danger-doux);
}

.therapy-history-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--red-rgb), 0.12);
    border: 1px solid rgba(var(--red-rgb), 0.22);
    color: var(--couleur-danger-doux);
    font-size: 14px;
}

.therapy-history-row__actions {
    display: flex;
    justify-content: flex-end;
}

.therapy-history-delete-form {
    margin: 0;
}

.therapy-history-row__actions .therapy-remove-btn {
    white-space: nowrap;
}

.therapy-history-block-chip {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: rgba(var(--share-bright-rgb), 0.10);
    border: 1px solid rgba(var(--share-bright-rgb), 0.22);
}

.therapy-history-block-chip__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.therapy-history-block-chip__title {
    font-weight: 400;
    color: var(--green-pale);
}

.therapy-history-block-chip__count {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(var(--share-bright-rgb), 0.16);
    border: 1px solid rgba(var(--share-bright-rgb), 0.26);
    color: var(--couleur-succes-doux);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.therapy-history-block-chip__children {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.therapy-history-chip--child {
    background: rgba(var(--slate-rgb), 0.36);
    border-color: rgba(var(--white-rgb), 0.10);
    color: var(--ink-200);
}

.therapy-history-chip__meta {
    margin-left: 6px;
    color: rgb(var(--slate-light-rgb));
    font-size: 12px;
}

@media (max-width: 760px) {
    .therapy-history-row__actions .therapy-remove-btn {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .therapy-history-row {
        grid-template-columns: 1fr;
    }

    .therapy-history-row__actions {
        justify-content: stretch;
    }

    .therapy-history-row__actions .btn,
    .therapy-order-card-head .btn {
        width: 100%;
    }
}

/* ===== Help drawer / справочник ===== */

.diagnostic-section-head__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.help-trigger {
    appearance: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 999px;
    /*
     * VARIANTE H, PAS F : UN « ? » N'EST PAS UNE ACTION.
     *
     * Il ouvre une aide, il ne fait rien au dossier. Il prend donc la forme
     * discrete de la famille — fond teinte leger, contour, texte a la
     * couleur — et laisse le relief aux boutons qui agissent.
     *
     * Trois choses partent :
     *   - un reflet en degrade radial, idiome de bouton verni qu'on ne
     *     retrouve nulle part ailleurs sur la fiche ;
     *   - une ombre NOIRE, qui le creusait dans la carte au lieu de le poser
     *     dessus ;
     *   - le poids 900, plus lourd que n'importe quel libelle de l'ecran
     *     pour un seul caractere.
     *
     * Le texte passe de #dbeafe a #7e9fed : le bleu clair de la famille,
     * a 5,41 de contraste sur son propre fond.
     */
    border: 1px solid rgba(var(--blue-light-rgb), 0.34);
    background: rgba(var(--blue-light-rgb), 0.15);
    /*
     * LE « ? » RETROUVE SON STYLE, ET SE CENTRE VRAIMENT.
     *
     * Il n'etait centre que par `text-align`, ce qui ne vaut que sur
     * l'horizontale : verticalement il flottait, parce qu'un point
     * d'interrogation n'occupe pas sa boite comme une lettre. En boite
     * flexible, les deux axes sont tenus ensemble.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-mist);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    /* `filter` EN TETE : il porte le geste. Sans lui dans cette liste, les
       huit pour cent sautaient d'un coup pendant que le pixel montait en
       0,18 s, et le survol se lisait comme un a-coup. */
    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

/* Le geste commun : un pixel et huit pour cent au survol, le retour au sol
   et les memes huit pour cent en moins a l'appui. Le fond s'ouvre un peu,
   comme celui des autres H. */
.help-trigger:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    background: rgba(var(--blue-light-rgb), 0.24);
    border-color: rgba(var(--blue-light-rgb), 0.52);
}

.help-trigger:active {
    transform: translateY(0);
    filter: brightness(0.92);
}

.help-drawer {
    position: fixed;
    inset: 0;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    max-width: 100vw;

    transition:
        opacity .18s ease,
        visibility 0s linear 0.30s;
}

.help-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition-delay: 0s;
}

/*
 * LE VOILE DU TIROIR. Son element existait dans le gabarit sans une seule
 * ligne de style : la page restait pleinement visible derriere, et le panneau
 * se lisait comme une collision avec la barre d'outils plutot que comme une
 * couche posee par-dessus.
 */
.help-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--black-rgb), 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-drawer.is-open .help-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .help-drawer__backdrop {
        transition: none;
    }
}

.help-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(480px, calc(100vw - 24px));
    height: 100%;
    box-sizing: border-box;
    padding: 22px;
    overflow-y: auto;
    pointer-events: auto;
    overscroll-behavior: contain;

    background: radial-gradient(circle at top right, rgba(var(--blue-light-rgb), 0.16), transparent 38%),
        linear-gradient(180deg, rgba(var(--slate-mid-rgb), 0.96), rgba(var(--slate-rgb), 0.98));
    border-left: 1px solid rgba(var(--slate-light-rgb), 0.22);
    box-shadow: -24px 0 60px rgba(var(--black-rgb), 0.42);

    transform: translateX(calc(100% + 32px));
    transition:
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.30s ease;
    will-change: transform;

    color: var(--ink-200);
}

.help-drawer.is-open .help-drawer__panel {
    transform: translateX(0);
}

.help-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}

.help-drawer__eyebrow {
    margin-bottom: 6px;
    color: rgba(var(--blue-pale-rgb), 0.78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-drawer__title {
    margin: 0;
    color: var(--ink-50);
    font-size: 24px;
    line-height: 1.2;
    text-shadow: none;
}

.help-drawer__close {
    appearance: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 999px;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    background: rgba(var(--white-rgb), 0.06);
    color: var(--ink-300);
    cursor: pointer;
    transition: 0.18s ease;
}

.help-drawer__close:hover {
    background: rgba(var(--red-rgb), 0.18);
    border-color: rgba(var(--red-light-rgb), 0.34);
    color: rgb(var(--white-rgb));
}

.help-drawer__short {
    margin-bottom: 16px;
    padding: 13px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.14), rgba(var(--white-rgb), 0.035));
    border: 1px solid rgba(var(--blue-light-rgb), 0.24);
    color: rgba(var(--ink-200-rgb), 0.94);
    font-size: 14px;
    line-height: 1.5;
}

.help-drawer__short.is-hidden {
    display: none;
}

.help-drawer__body {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(var(--ink-200-rgb), 0.92);
}
/* `.help-drawer__body h2` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.2045 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.help-drawer__body h3 {
    margin: 22px 0 10px;
    font-size: 19px;

}

.help-drawer__body h4 {
    margin: 18px 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: rgba(var(--ink-200-rgb), 0.96);
}

.help-drawer__body h2 {
    margin: 26px 0 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    font-size: 22px;
    font-weight: 900;
}

.help-drawer__body h2:first-child {
    padding-top: 0;
    border-top: none;
}

.help-drawer__body h3:first-child,
.help-drawer__body h4:first-child {
    margin-top: 0;
}

.help-drawer__body p {
    margin: 0 0 13px;
}

.help-drawer__loading,
.help-drawer__empty {
    padding: 14px;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-200-rgb), 0.82);
}

.organ-side-card__title-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.organ-side-card__title-actions .organ-share-form {
    margin: 0;
}

@media (max-width: 760px) {
    .organ-side-card__title-row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .organ-side-card__title-actions {
        width: auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .organ-side-card__title-actions .help-trigger {
        width: 34px;
        min-width: 34px;
    }

    .organ-side-card__title-actions .organ-share-form,
    .organ-side-card__title-actions .consultation-section-share__button {
        width: auto;
    }
}

/* ===== Help markdown marker ===== */

.help-drawer__body .help-marker {
    display: inline;
    padding: 0.03em 0.28em;
    border-radius: 0.35em;
    background: linear-gradient(
            90deg,
            rgba(var(--amber-bright-rgb), 0.26),
            rgba(var(--amber-deep-rgb), 0.34)
        );
    color: #fff7d6;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: 0 0 0 1px rgba(var(--amber-bright-rgb), 0.10) inset,
        0 0 14px rgba(var(--amber-deep-rgb), 0.10);
}

@media (prefers-reduced-motion: reduce) {
    .help-drawer,
    .help-drawer__panel {
        transition: none;
    }
}

@media (max-width: 640px) {
    .diagnostic-section-head__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .help-drawer__panel {
        width: 100vw;
        padding: 18px;
    }

    .help-drawer__title {
        font-size: 22px;
    }
}

@media (max-width: 900px) {
    /* LE NOMBRE DE COLONNES N EST PLUS ECRIT ICI. `lk.css` demande 110 px
       minimum par barre -- la largeur du plus long libelle -- et `auto-fit` en
       range autant que la place le permet. Quatre colonnes forcees a 900, trois
       a 640, donnaient 97 px et cassaient « Изобретательность » en deux. Un
       nombre fixe contredit toujours un minimum. */
    .filters-bars {
        gap: 12px;
    }

    .filter-bar-card__chart {
        min-width: 0;
    }

    .filter-bar-card__bar {
        width: min(68px, 78%);
    }
}

@media (max-width: 640px) {
    .filters-bars {
        gap: 12px 10px;
    }

    .filter-bar-card__bar {
        width: 100%;
        max-width: 58px;
    }
}

/* Убираем технический горизонтальный overflow в блоке "Реальное / Мнимое" */
.diagnostic-viewer-shell,
.page-shell,
.card,
.filters-layout,
.filters-section,
.filters-bars {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.filters-layout,
.filters-section,
.filters-bars {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .filters-layout,
    .filters-section,
    .filters-bars {
        overflow-x: hidden;
    }
}

/* ===== Tooltip edge alignment for Qualities / Filters ===== */

/* Левая привязка подсказки */
.filters-bars > .filter-bar-card.is-tooltip-left::after,
.qualities-grid > .quality-card.is-tooltip-left::after,
.qualities-insight__items > .qualities-chip.is-tooltip-left::after {
    left: 0;
    right: auto;
    transform: translateX(0) translateY(4px);
}

.filters-bars > .filter-bar-card.is-tooltip-left::before,
.qualities-grid > .quality-card.is-tooltip-left::before,
.qualities-insight__items > .qualities-chip.is-tooltip-left::before {
    left: 34px;
    right: auto;
    transform: translateX(0) translateY(4px);
}

/* Правая привязка подсказки */
.filters-bars > .filter-bar-card.is-tooltip-right::after,
.qualities-grid > .quality-card.is-tooltip-right::after,
.qualities-insight__items > .qualities-chip.is-tooltip-right::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.filters-bars > .filter-bar-card.is-tooltip-right::before,
.qualities-grid > .quality-card.is-tooltip-right::before,
.qualities-insight__items > .qualities-chip.is-tooltip-right::before {
    left: auto;
    right: 34px;
    transform: translateX(0) translateY(4px);
}

.filters-bars > .filter-bar-card.is-tooltip-left:hover::after,
.filters-bars > .filter-bar-card.is-tooltip-right:hover::after,
.qualities-grid > .quality-card.is-tooltip-left:hover::after,
.qualities-grid > .quality-card.is-tooltip-right:hover::after,
.qualities-insight__items > .qualities-chip.is-tooltip-left:hover::after,
.qualities-insight__items > .qualities-chip.is-tooltip-right:hover::after {
    transform: translateX(0) translateY(0);
}

.filters-bars > .filter-bar-card.is-tooltip-left:hover::before,
.filters-bars > .filter-bar-card.is-tooltip-right:hover::before,
.qualities-grid > .quality-card.is-tooltip-left:hover::before,
.qualities-grid > .quality-card.is-tooltip-right:hover::before,
.qualities-insight__items > .qualities-chip.is-tooltip-left:hover::before,
.qualities-insight__items > .qualities-chip.is-tooltip-right:hover::before {
    transform: translateX(0) translateY(0);
}

/* ===== Real / Imaginary analytical lists ===== */

.filter-insights-panel {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--slate-rgb), 0.34), rgba(var(--white-rgb), 0.025));
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.filter-insights-panel--consultation {
    margin-top: 16px;
}

.filter-insights-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.filter-insights-column {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.filter-insights-column__title {
    color: var(--ink-50);
    font-size: 16px;
    line-height: 1.25;
    padding: 0 2px;
}

.stage-balance-card--filter-over-limit {
    border-color: rgba(var(--orange-rgb), 0.34);
    background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.13), rgba(var(--white-rgb), 0.025));
}

.stage-balance-card--filter-over-limit::before {
    background: rgba(var(--orange-rgb), 0.92);
}

.stage-balance-card--filter-low-resources {
    border-color: rgba(var(--slate-light-rgb), 0.24);
    background: linear-gradient(135deg, rgba(var(--slate-light-rgb), 0.10), rgba(var(--white-rgb), 0.025));
}

.stage-balance-card--filter-low-resources::before {
    background: rgba(var(--slate-light-rgb), 0.72);
}

@media (max-width: 760px) {
    .filter-insights-columns {
        grid-template-columns: 1fr;
    }

    .filter-insights-panel {
        padding: 12px;
    }
}

/* ===== Help media inside drawer ===== */

.help-media {
    margin: 18px 0;
}

.help-media__frame {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(var(--blue-light-rgb), 0.24);
    background: rgba(var(--surface-sombre-rgb), 0.38);
    box-shadow: 0 0 0 1px rgba(var(--blue-light-rgb), 0.05) inset,
        0 14px 30px rgba(var(--black-rgb), 0.18);
}

.help-media__image {
    display: block;
    width: 100%;
    height: auto;
    background: var(--black);
}

.help-media__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--black);
}

.help-media__caption {
    margin-top: 8px;
    color: rgba(var(--ink-300-rgb), 0.82);
    font-size: 13px;
    line-height: 1.45;
}

.help-media-missing {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--red-rgb), 0.12);
    border: 1px solid rgba(var(--red-rgb), 0.24);
    color: var(--couleur-danger-doux);
    font-size: 13px;
    line-height: 1.4;
}

.help-media-missing code {
    color: rgb(var(--white-rgb));
}

/* Le surtitre du visualiseur : il nomme l'ecran au-dessus du nom de la
   personne. Discret, en majuscules espacees, comme les autres surtitres. */
/*
 * LE SURTITRE NOMME L'ECRAN, il doit donc porter au moins autant que les
 * intitules des colonnes. A 11 px et sans graisse, il passait pour une mention
 * de bas de page au-dessus du nom qu'il annonce.
 */
.diagnostic-viewer-topbar__eyebrow {
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--portal-accent-clair-rgb));
}

/* --- Le choix de durée, à côté du bouton de lancement -------------------- */

.consultation-control__duree {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    color: rgba(var(--white-rgb), 0.65);
    font-size: 13px;
}

.consultation-control__duree select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--white-rgb), 0.28);
    background: rgba(var(--white-rgb), 0.12);

    /* Pleine, pas heritee : le libelle a cote est volontairement a 65 %
       d'opacite, et la valeur qu'on choisit ne doit pas l'etre. */
    color: var(--white);

    font: inherit;

    /*
     * Assez large pour l'intitule le plus long, fleche comprise. Sans cela le
     * champ se calait sur son contenu au rendu et tronquait le texte :
     * « 4 heures » s'affichait « 4 heure: ». En `ch` plutot qu'en pixels, pour
     * suivre la police au lieu de deviner une valeur.
     */
    min-width: 13ch;
    text-overflow: ellipsis;
}

/* Le libelle du selecteur de resultat, dans la barre du haut. */
.viewer-toolbar__label {
    display: inline-block;
    margin-right: 8px;
    color: rgba(var(--white-rgb), 0.65);
    font-size: 13px;
}

/* Sur téléphone, le choix passe au-dessus du bouton plutôt que de le pousser
   hors de l'écran. */
@media (max-width: 620px) {
    .consultation-control__form {
        flex-wrap: wrap;
    }

    .consultation-control__duree {
        flex-basis: 100%;
        margin: 0 0 8px;
    }
}

/* ===== Le menu deroulant natif suit le theme sombre =====
   Sans `color-scheme`, le navigateur dessine la liste d'un `<select>` sur fond
   clair : elle jurait avec l'interface et son option survolee devenait
   illisible. Cette propriete le renseigne, elle ne change rien au reste. */
.diagnostic-viewer select,
.consultation-control select {
    color-scheme: dark;
}

/*
 * Les options portent leurs propres couleurs, en OPAQUE.
 *
 * `color-scheme` ne suffit pas quand le champ a un fond personnalise : le
 * navigateur reprend alors la main et dessine sa liste en clair. Un fond
 * translucide ne conviendrait pas non plus, le systeme le composerait sur du
 * blanc.
 */
.diagnostic-viewer select option,
.consultation-control select option {
    background-color: var(--slate-mid);
    color: var(--ink-50);
}

/* ======================================================================
   CE QU'ON FAIT D'UN TEST QUI NE VAUT RIEN
   ======================================================================
   Le déclencheur vit sur la ligne du libellé « Résultat affiché », à côté de
   ce sur quoi il agit. Son volet s'ouvre EN SURIMPRESSION : dans le flux, il
   poussait les onglets vers le bas à chaque ouverture, et le déplacer ne
   faisait que changer ce qui bougeait.
   ====================================================================== */
/* L'intitule a gauche, « Ecarter ? » a droite : sur la largeur du champ, il
   se pose au-dessus de son bord droit et l'encadre, au lieu de suivre son
   etiquette comme s'il en faisait partie. */
.viewer-tool-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

/* PAS `relative` ICI : ancre sur son declencheur, qui se trouve au milieu de
   la rangee, un panneau de 760 px sortait de la carte par la droite. Il
   s'ancre sur l'en-tete, dont le bord gauche lui laisse toute la largeur. */
.test-judgement {
    position: static;
}

.test-judgement__trigger {
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(var(--white-rgb), 0.5);
    list-style: none;
    white-space: nowrap;
}

.test-judgement__trigger::-webkit-details-marker {
    display: none;
}

.test-judgement__trigger:hover,
.test-judgement[open] > .test-judgement__trigger {
    color: rgba(var(--white-rgb), 0.86);
}

/* Un test écarté le dit sans qu'on ait à ouvrir. */
.test-judgement.is-disregarded > .test-judgement__trigger {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--etat-vigilance-rgb), 0.18);
    border: 1px solid rgba(var(--etat-vigilance-rgb), 0.42);
    color: var(--amber-soft);
    font-weight: 600;
}

/* LE VOLET, PAR-DESSUS. Rien ne bouge dans la page : il se pose, il se
   referme, et le déclencheur n'a pas quitté sa place. */
.test-judgement__flyout {
    position: absolute;
    /* Il collait le bas de la carte : il remonte de la moitie de sa hauteur de
       chevauchement, et laisse voir le bord. */
    top: calc(100% - 34px);
    left: 20px;
    z-index: 60;

    width: min(980px, calc(100% - 40px));
    padding: 14px 16px;
    box-sizing: border-box;

    border-radius: 14px;
    border: 1px solid rgba(var(--white-rgb), 0.14);
    background: var(--ink-900);
    box-shadow: 0 22px 48px rgba(var(--black-rgb), 0.46);
}

.test-judgement.is-disregarded .test-judgement__flyout {
    border-color: rgba(var(--etat-vigilance-rgb), 0.34);
}

/* Une seule ligne : la phrase, le champ qui s'étire, le bouton à droite. Les
   champs cachés restent des éléments : ils sortent de la disposition, sans
   quoi ils décalent tout. */
.test-judgement__flyout form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.test-judgement__flyout form > input[type="hidden"] {
    display: none;
}

.test-judgement__help {
    /* `0 0 auto` : autorisee a retrecir, elle tombait a 206 px pendant que le
       champ prenait tout, et sa largeur maximale ne servait a rien. */
    flex: 0 0 auto;
    margin: 0;
    width: 42ch;
    max-width: 42ch;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
}

/* L'intitulé répète ce que dit déjà l'exemple dans le champ. Il reste pour
   les lecteurs d'écran. */
.test-judgement__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.test-judgement__flyout input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.test-judgement__button {
    flex: 0 0 auto;
    width: auto;
    min-width: 160px;
    margin: 0;
    white-space: nowrap;
}

/* L'etat « ecarte » sur une ligne : le motif et sa signature d'un cote, le
   retour de l'autre. Sur trois lignes empilees, le volet etait haut et vide. */
.test-judgement__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.test-judgement__etat {
    min-width: 0;
}

.test-judgement__ligne .test-judgement__reason {
    margin: 0 0 2px;
}

.test-judgement__ligne .test-judgement__signature {
    margin: 0;
}

.test-judgement__ligne form {
    flex: 0 0 auto;
}

.test-judgement__reason {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
}

.test-judgement__signature {
    margin: 0 0 12px;
    font-size: 12px;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
}

/* Un geste sans retour se déplie une fois de plus, à l'intérieur. */
.test-judgement__delete {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.test-judgement__delete > summary {
    cursor: pointer;
    font-size: 12px;
    color: rgba(var(--white-rgb), 0.5);
}

.test-judgement__delete[open] > summary {
    margin-bottom: 10px;
    color: rgba(var(--red-light-rgb), 0.92);
}

@media (max-width: 900px) {
    .test-judgement__flyout form {
        flex-wrap: wrap;
    }
}

/* Ce que lit un client avant que son praticien ne lui ait rien accordé. Une
   page sans onglet et sans contenu se lirait comme une panne. */
.viewer-nothing-shared {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 30px;
}

.viewer-nothing-shared__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink-50);
}

.viewer-nothing-shared__text {
    margin: 0;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(var(--white-rgb), 0.7);
}

/* Ce que le client garde APRÈS la consultation. Discret à côté du bouton de
   partage en direct, qui est le geste du moment ; celui-ci engage la suite. */
.block-access {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
    min-width: 0;
}

.block-access.is-granted .viewer-tool-field__label {
    color: rgba(var(--share-line-rgb), 0.9);
}

.block-access__state {
    /* La hauteur d'un champ, pour que le bouton voisin reste aligne. */
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    max-width: 22ch;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(var(--white-rgb), 0.72);
}

.block-access__duration {
    min-width: 170px;
}

/* Balise ET classe : les règles de champ de lk.css sont écrites en
   « .portal-field select », une classe seule perdrait la partie. */
/* `min-height` et non `height` : une hauteur fixe coupait le texte des que la
   police du theme depassait ce que la valeur supposait. */
.block-access__duration select {
    width: 100%;
    min-height: 42px;
    height: auto;
    margin: 0;
    padding: 8px 30px 8px 12px;
    box-sizing: border-box;
}

/* ======================================================================
   LA BARRE DE DÉFILEMENT DU TIROIR D'AIDE
   ======================================================================
   Elle sortait blanche, celle du système, sur un panneau sombre : une barre
   claire posée en travers du texte. Et le tiroir passait SOUS la barre du
   compte, dont le bouton flottait par-dessus le panneau.
   ====================================================================== */
.help-drawer {
    /* Au-dessus de la barre du compte : un tiroir qui s'ouvre par-dessus la
       page doit couvrir toute la page, sinon un bouton la traverse. */
    z-index: 4000;
}

.help-drawer__panel {
    scrollbar-width: thin;
    /* La barre de la charte : ce panneau n'a aucune raison d'avoir la sienne. */
    scrollbar-color: var(--barre-pouce) var(--barre-piste);
}

.help-drawer__panel::-webkit-scrollbar {
    width: 10px;
}

.help-drawer__panel::-webkit-scrollbar-track {
    background: transparent;
}

.help-drawer__panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--barre-pouce);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.help-drawer__panel::-webkit-scrollbar-thumb:hover {
    background: var(--barre-pouce-survol);
    background-clip: padding-box;
}

/* ======================================================================
   LE PARTAGE DURABLE
   ======================================================================
   Un interrupteur glissant, pas une case à cocher : le geste a deux états
   qui durent, et la glissière les montre sans qu'on ait à lire l'étiquette.

   Le bouton violet « Montrer » d'à côté fait autre chose : il affiche en
   direct pendant la séance. La forme les distingue autant que les mots.
   ====================================================================== */
.partage-durable {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.partage-durable__rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.partage-interrupteur {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(var(--white-rgb), 0.82);
    white-space: nowrap;
}

.partage-interrupteur input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.partage-interrupteur__glissiere {
    position: relative;
    flex: 0 0 auto;
    /* LA TAILLE EST CELLE DE TOUS LES INTERRUPTEURS DU PRODUIT : 34 x 20,
       bouton de 14, course de 14. Celui-ci en faisait 38 x 21 avec une course
       de 17, et sa variante d'onglet 32 x 18 avec une course de 14 : trois
       interrupteurs a trois tailles sur des ecrans qu'on enchaine. Ce qui
       reste propre a celui-ci est ce qu'il SIGNIFIE -- la piste verte -- pas
       sa geometrie. */
    box-sizing: border-box;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(var(--slate-light-rgb), 0.26);
    border: 1px solid rgba(var(--slate-light-rgb), 0.34);
    transition: background 0.16s ease, border-color 0.16s ease;
}

.partage-interrupteur__glissiere::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* Les deux encres communes : blanc a 62 % eteint, blanc plein allume. Le
       bouton reste blanc des deux cotes, c'est la piste qui dit l'etat. */
    background: rgba(var(--white-rgb), 0.62);
    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.34);

    /* LE MEME MOUVEMENT QUE LES AUTRES. Il portait un rebond de 0,42 s, avec
       un elan a rebours : joli sur un objet isole, mais une rangee d'onglets
       en porte un par onglet, et douze rebonds decales ne se lisent plus comme
       une reponse au doigt. La courbe retenue depasse legerement a l'arrivee,
       donc le bouton se POSE, et 0,2 s sur quatorze pixels ne traine pas. */
    transition: transform 0.2s cubic-bezier(.32, .72, .32, 1.1),
                background 0.16s ease;
}

.partage-interrupteur input:checked + .partage-interrupteur__glissiere {
    /* A droite, la piste est VERTE, pleinement : c'est l'etat « partage »,
       et il doit se lire d'un coup d'oeil dans une rangee d'onglets. */
    background: rgb(var(--share-bright-rgb));
    border-color: rgb(var(--share-bright-rgb));
}

.partage-interrupteur input:checked + .partage-interrupteur__glissiere::after {
    background: var(--lumiere);
}
/* `.partage-interrupteur input:checked + .partage-interrupteur__glissiere::after` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.3274 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.partage-interrupteur input:focus-visible + .partage-interrupteur__glissiere {
    outline: 2px solid rgba(var(--portal-accent-rgb), 0.8);
    outline-offset: 2px;
}

/* Grisé DANS SON ÉTAT : le parent prime, mais ce qui avait été coché reste
   visible, et se retrouve tel quel quand on décoche le parent. */
.partage-interrupteur.is-forced {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- L'interrupteur d'un bloc ACHETE ------------------------------------
   Il porte « Acheté » et non « Partager », il est allume, et il prend la teinte
   de l'acquis : la meme que le fond de son onglet, pour qu'on relie les deux
   d'un coup d'oeil.

   L'OPACITE DE `is-forced` NE S'APPLIQUE PAS ICI. Elle sert a dire « ce reglage
   suit un autre » ; ici l'interrupteur ne suit rien, il constate une propriete
   du bloc. A moitie efface, il aurait eu l'air en panne. Le curseur interdit et
   l'infobulle suffisent a dire qu'on ne le touche pas. */
.partage-interrupteur--achat.is-forced {
    opacity: 1;
}

.partage-interrupteur--achat input:checked + .partage-interrupteur__glissiere {
    background: rgba(var(--achat-line-rgb), 0.85);
    border-color: rgba(var(--achat-line-rgb), 0.85);
}

.partage-interrupteur--achat .partage-interrupteur__texte {
    color: rgb(var(--achat-line-rgb));
}

.partage-durable__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.partage-durable__duree {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
}

.partage-durable__duree select {
    min-height: 34px;
    height: auto;
    margin: 0;
    padding: 5px 28px 5px 10px;
    box-sizing: border-box;
    font-size: 13px;
}

.partage-durable__vider {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--red-light-rgb), 0.3);
    background: transparent;
    color: rgba(var(--red-light-rgb), 0.9);
    font-size: 12px;
    cursor: pointer;
}

.partage-durable__vider:hover {
    background: rgba(var(--red-light-rgb), 0.1);
}

/* Dans l'onglet, l'étiquette du switch ne se lit pas : c'est le nom de
   l'onglet qui dit de quelle page il s'agit. Elle reste pour l'oreille. */
.partage-interrupteur--onglet .partage-interrupteur__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* La variante d'onglet n'a plus de taille propre : elle prend celle de tous
   les autres. Ce qui la distingue est que son etiquette ne se lit pas, l'onglet
   la dit deja -- voir la regle juste au-dessus. */
/* `.partage-interrupteur--onglet input:checked + .partage-interrupteur__glissiere::after` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.3282 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

/* « Tout le test » ouvre la rangée : il porte sur ce que les onglets
   contiennent tous, sa place est donc avant eux. */
/* L'état du partage : coché n'est pas partagé, et l'écran doit le dire. */
.partage-durable__etat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.62));
}

.partage-durable__voyant {
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(var(--slate-light-rgb), 0.5);
}

.partage-durable__etat.is-published .partage-durable__voyant {
    background: rgb(var(--share-line-rgb));
    box-shadow: 0 0 0 3px rgba(var(--share-line-rgb), 0.18);
}

.partage-durable__etat.is-published {
    color: rgba(var(--share-line-rgb), 0.92);
}

/* Les interrupteurs étaient de travers : la glissière prenait la ligne de base
   du texte au lieu de son centre. */
.partage-interrupteur {
    align-items: center;
    line-height: 1;
}

.partage-interrupteur__glissiere {
    display: inline-block;
    vertical-align: middle;
}

.partage-interrupteur__texte {
    line-height: 1.2;
}

/* « Tout le test » prend la forme d'un onglet, avec son switch à droite du
   texte : il ouvre la rangée, il doit en avoir l'air. */
/* ======================================================================
   DEUX BLOCS VERTICAUX, À DROITE DE L'IDENTITÉ
   ======================================================================
   Chaque bloc empile son intitulé, sa commande et son bouton. La rangée
   alignait des éléments de hauteurs différentes sur une ligne de base
   commune : ça marche pour deux, ça se défait à quatre.
   ====================================================================== */
.viewer-tool-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.viewer-tool-stack .consultation-control,
.viewer-tool-stack .partage-durable {
    align-items: stretch;
}

.viewer-tool-stack .consultation-control__form,
.viewer-tool-stack .partage-durable__pied {
    flex-wrap: wrap;
}

/* Dans une colonne, le bouton prend la largeur de la commande au-dessus :
   c'est ce qui fait lire les trois comme un seul geste. */
.viewer-tool-stack .diagnostic-viewer-tool-btn {
    width: 100%;
}

/* ======================================================================
   LA LIGNE DU HAUT EN QUATRE QUARTS
   ======================================================================
   L'identite, la session qu'on regarde, l'acces qu'on ouvre, et l'etat de ce
   partage. Quatre colonnes egales : chacune porte un sujet, et leur largeur
   ne depend plus de la longueur de leur contenu.

   Sous 1200 px elles s'empilent dans cet ordre : on lit alors de haut en bas
   ce qu'on lisait de gauche a droite.
   ====================================================================== */
.diagnostic-viewer-topbar__head {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
}

.diagnostic-viewer-topbar__tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

/* Le partage rend DEUX colonnes : il ne doit pas former un bloc a lui seul. */
.diagnostic-viewer-topbar__tools .partage-durable {
    display: contents;
}

@media (max-width: 1200px) {
    .diagnostic-viewer-topbar__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-viewer-topbar__tools {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La modale du mot : meme facture que les autres dialogues du projet. */
.partage-mot {
    width: min(620px, calc(100vw - 32px));
    padding: 22px 24px;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 18px;
    background: var(--ink-900);
    color: rgba(var(--white-rgb), 0.88);
}

.partage-mot::backdrop {
    background: rgba(var(--black-rgb), 0.68);
}

.partage-mot__titre {
    margin: 0 0 8px;
    font-size: 18px;
}

.partage-mot__aide {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.62));
}

/* L'intitule repete le titre du dialogue : il reste pour l'oreille. */
.partage-mot__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.partage-mot textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px;
}

.partage-mot__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.test-judgement__dialog .test-judgement__reason {
    font-size: 15px;
}

.test-judgement__dialog input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.test-judgement__dialog .test-judgement__delete {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

/* ======================================================================
   LES TROIS COLONNES S'ALIGNENT LIGNE PAR LIGNE
   ======================================================================
   Intitulé, commande, bouton : chaque rôle occupe la même hauteur d'une
   colonne à l'autre, donc les trois se lisent en travers autant qu'en
   hauteur. Sans ça, un intitulé sur deux lignes ici décalait tout le reste
   de sa colonne, et l'œil ne trouvait plus de ligne commune.

   Le statut « Partagé avec le client » occupe la ligne des intitulés : c'est
   un indicateur, il se lit au même niveau que ce qu'il commente.
   ====================================================================== */
.viewer-note-client .viewer-tool-field__label,
.diagnostic-viewer-topbar__tools .viewer-tool-field__label,
.diagnostic-viewer-topbar__tools .partage-durable__etat {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 0;
}

.diagnostic-viewer-topbar__tools .viewer-tool-field__head {
    min-height: 22px;
}

.diagnostic-viewer-topbar__tools select {
    min-height: 42px;
    height: 42px;
    box-sizing: border-box;
}

/* Le bouton de consultation se comporte comme celui du partage : même
   hauteur, même largeur, même réaction à l'étroitesse. */
.diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn,
.diagnostic-viewer-topbar__tools .consultation-control__form .btn {
    width: 100%;
    min-height: 42px;
    height: 42px;
    box-sizing: border-box;
}

.diagnostic-viewer-topbar__tools .consultation-control,
.diagnostic-viewer-topbar__tools .consultation-control__form {
    display: block;
    width: 100%;
    margin: 0;
}

/* Le même écart partout : la colonne 2 empilait ses éléments à 5 px pendant
   que les autres les espaçaient de 10, et ses lignes glissaient d'autant. */
.diagnostic-viewer-topbar__tools .viewer-tool-field,
.diagnostic-viewer-topbar__tools .viewer-tool-stack {
    gap: 10px;
}

/* Un champ ne porte pas de marge propre : c'est l'écart de la colonne qui
   décide, sinon deux règles se disputent le même espace. */
.diagnostic-viewer-topbar__tools select,
.diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn,
.diagnostic-viewer-topbar__tools .consultation-control,
.diagnostic-viewer-topbar__tools .consultation-control__form,
.diagnostic-viewer-topbar__tools .diagnostic-viewer-topbar__picker {
    margin: 0;
}

/* ======================================================================
   LE MOT DU PRATICIEN, CHEZ LE CLIENT
   ======================================================================
   Avant les chiffres, parce qu'il dit sur quoi porter l'attention. Un bilan
   sans un mot se lit mal : on y trouve des courbes sans savoir quoi en faire.
   ====================================================================== */
.mot-du-praticien {
    border-left: 3px solid rgba(var(--blue-light-rgb), 0.62);
    background: rgba(var(--blue-rgb), 0.07);
}

.mot-du-praticien__eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(var(--blue-soft-rgb), 0.9);
}

.mot-du-praticien__texte {
    margin: 0;
    max-width: 78ch;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(var(--white-rgb), 0.88);
    white-space: pre-line;
}

/* La barre d'outils se cale à droite de son en-tête : les colonnes gardent
   leur largeur, c'est l'ensemble qui s'aligne sur le bord. */
.diagnostic-viewer-topbar__tools {
    justify-self: end;
    justify-content: end;
}

/* « Écarter » devient un bouton de colonne, comme « Arrêter le partage » dans
   la sienne : même hauteur, même largeur, même place dans la pile. */
.diagnostic-viewer-topbar__tools .test-judgement {
    display: block;
    width: 100%;
}

.diagnostic-viewer-topbar__tools .test-judgement__trigger {
    width: 100%;
    /* Meme hauteur que les autres commandes de la barre d'outils : c'est un
       <summary>, donc ni bouton ni champ par son nom, mais il se pose sur la
       meme ligne qu'eux et doit s'y aligner. */
    min-height: 42px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(var(--slate-light-rgb), 0.28);
    background: rgba(var(--slate-rgb), 0.34);
    color: rgba(var(--white-rgb), 0.72);
    font-size: 14px;
    white-space: nowrap;
}
/* `.diagnostic-viewer-topbar__tools .test-judgement__trigger:hover` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.3560, 3650 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.diagnostic-viewer-topbar__tools .test-judgement.is-disregarded .test-judgement__trigger {
    font-weight: 600;
}

/* « Tout le test » a la taille d'un onglet, une fois pour toutes : même
   hauteur, même arrondi, même graisse. Il ouvre la rangée, il doit en avoir
   exactement l'air. */
/* 48 px, comme le conteneur d'onglet mesuré à côté : deux pixels d'écart se
   voient quand les deux formes se touchent sur la même rangée. */
.partage-durable__vider[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* ======================================================================
   L'INTERIEUR DES ONGLETS
   ======================================================================
   La pastille du bouton glissant se calait a 2 px du haut d'une piste de 18,
   alors qu'il en faut 3 pour une pastille de 12 : elle penchait. On la centre
   au lieu de calculer, comme ca aucune taille ne peut la desaxer.

   Et l'onglet actif ne faisait pas la meme taille que les autres : son lien
   gardait son cadre et son ombre sous ceux du conteneur. Le conteneur porte la
   forme, le lien n'est plus qu'un texte cliquable.
   ====================================================================== */
.partage-interrupteur__glissiere::after {
    top: 50%;
    transform: translateY(-50%);
}

.partage-interrupteur input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(14px);
}

/* A l'appui le bouton s'allonge vers sa destination, comme les autres. */
.partage-interrupteur:active .partage-interrupteur__glissiere::after { width: 17px; }
.partage-interrupteur:active input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(11px);
}

/* Meme bouton, meme course : la variante d'onglet n'a plus rien a redire. */

/* Le troisieme etat : la selection differe de ce que le client voit. Le gris
   disait « rien a signaler », or il y a quelque chose a signaler. */
.partage-durable__etat.is-pending .partage-durable__voyant {
    background: rgb(var(--etat-vigilance-rgb));
    box-shadow: 0 0 0 3px rgba(var(--etat-vigilance-rgb), 0.18);
}

.partage-durable__etat.is-pending {
    color: rgba(var(--amber-soft-rgb), 0.95);
}

/* ======================================================================
   LE VOYANT BAT
   ======================================================================
   Un point fixe se confond avec une decoration. Un point qui bat se regarde,
   et c'est bien ce qu'on veut : le vert dit qu'une personne a acces a ses
   resultats en ce moment, le jaune qu'une decision attend.

   Il se tait quand rien n'est selectionne : la, il n'y a rien a regarder.
   ====================================================================== */
@keyframes voyant-battement {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.82);
        opacity: 0.68;
    }
}

.partage-durable__etat.is-published .partage-durable__voyant,
.partage-durable__etat.is-pending .partage-durable__voyant {
    animation: voyant-battement 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .partage-durable .partage-durable__voyant {
        animation: none;
    }
}

/* La ligne qui separe la barre de commandes des onglets. Elle n'existait que
   dans la disposition etroite : sur grand ecran, les deux rangees se
   touchaient sans rien pour dire qu'elles ne parlent pas de la meme chose. */
.diagnostic-viewer-topbar__tabs {
    border-top: 1px solid rgba(var(--slate-light-rgb), 0.14);
    padding-top: 18px;
}

/* ======================================================================
   LE STATUT SE PIN EN HAUT A DROITE
   ======================================================================
   C'est un indicateur : il dit l'etat de la carte entiere, pas celui de la
   colonne qui l'heberge. Pris dans la pile, il descendait avec elle et se
   retrouvait au milieu des commandes sur ecran etroit, la ou plus personne ne
   le cherche.

   Il quitte donc le flux et se pose au coin, ou l'oeil va d'instinct chercher
   un etat.
   ====================================================================== */
.partage-durable__etat {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    justify-content: flex-end;
    white-space: nowrap;
}

/* La place qu'il ne prend plus dans la pile ne doit pas rester vide. */
.diagnostic-viewer-topbar__tools .partage-durable__etat {
    margin: 0;
}

/* ======================================================================
   QUATRE BLOCS, TROIS DISPOSITIONS
   ======================================================================
   1 x 4 sur grand ecran, 2 x 2 sur tablette, 4 x 1 sur telephone. Il manquait
   le palier du milieu : on passait de quatre colonnes a une seule, et sur
   tablette les commandes s'entassaient dans une colonne etroite a droite
   pendant que la moitie gauche restait vide.

   Les quatre blocs deviennent des cases de la MEME grille : la barre d'outils
   ne forme plus un bloc a elle seule, ses colonnes rejoignent l'identite.
   ====================================================================== */
.diagnostic-viewer-topbar__tools {
    display: contents;
}

.diagnostic-viewer-topbar__head {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 18px;
}

.diagnostic-viewer-topbar__client {
    grid-area: auto;
}

@media (max-width: 1200px) {
    .diagnostic-viewer-topbar__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .diagnostic-viewer-topbar__head {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sur telephone, le statut reprend sa place dans le flux : epingle au
       coin, il chevaucherait le nom du client. */
    .partage-durable__etat {
        position: static;
        justify-content: flex-start;
    }
}

/* ======================================================================
   LE STATUT TIENT DANS LE CADRE
   ======================================================================
   Epingle a `right: 0` du bloc de tete, il partait sur le rembourrage de la
   carte et son texte se coupait au bord. On l'ancre sur la CARTE, pas sur le
   bloc, et on lui laisse le rembourrage.
   ====================================================================== */
.diagnostic-viewer-topbar {
    position: relative;
}

.partage-durable__etat {
    position: absolute;
    top: 12px;
    right: 20px;
    left: auto;
    max-width: calc(100% - 40px);
    z-index: 3;
}

.diagnostic-viewer-topbar__head {
    padding-top: 40px;
}

@media (max-width: 760px) {
    .partage-durable__etat {
        position: static;
        max-width: none;
        margin-bottom: 4px;
    }

    .diagnostic-viewer-topbar__head {
        padding-top: 20px;
    }
}

/* Les deux selecteurs parlent de la meme chose a la meme place : ils doivent
   se lire a la meme taille. */
.diagnostic-viewer-topbar__tools select,
.diagnostic-viewer-topbar__picker select {
    font-size: 15px;
}

/* En haut a droite A TOUS LES PALIERS, y compris sur telephone : c'est un
   indicateur, et un indicateur qu'il faut aller chercher au milieu d'une pile
   n'indique plus rien. Il se contente d'un texte plus court quand la place
   manque. */
@media (max-width: 760px) {
    .partage-durable__etat {
        position: absolute;
        top: 12px;
        right: 16px;
        left: auto;
        max-width: calc(100% - 32px);
        margin: 0;
        font-size: 11px;
    }

    .diagnostic-viewer-topbar__head {
        padding-top: 38px;
    }
}

/* « Tout le test » s'aligne sur les onglets : c'est le contenu qui le decalait,
   son interrupteur etant plus haut que le texte des autres. */
.diagnostic-viewer-nav__panel {
    align-items: center;
}

/* Le statut se lit de loin : c'est la seule chose de cette carte qui dise ce
   que le client voit en ce moment. En douze pixels gris, il passait pour une
   mention legale. */
.partage-durable__etat {
    font-size: 14px;
    font-weight: 600;
}

.partage-durable__voyant {
    width: 10px;
    height: 10px;
}

@media (max-width: 760px) {
    .partage-durable__etat {
        font-size: 12px;
    }
}

/* Le jambage du « j » de « Trente jours » se coupait : une hauteur fixe de
   40 px avec ce corps de texte ne laisse pas la place aux lettres qui
   descendent. On garde la hauteur comme MINIMUM, et la ligne respire. */
.diagnostic-viewer-topbar__tools select,
.diagnostic-viewer-topbar__picker select {
    height: auto;
    min-height: 42px;
    padding: 9px 30px 9px 12px;
    line-height: 1.35;
}

/* ======================================================================
   LE PARTAGE N'EST PAS LA CONSULTATION
   ======================================================================
   Le violet appartient a la consultation : « Demarrer la consultation » et les
   boutons « Montrer » le portent. Le partage durable l'empruntait, et deux
   gestes independants se ressemblaient a s'y meprendre.

   Le partage prend le vert, celui de ses propres interrupteurs et de son
   voyant. Une famille de couleur par famille de geste.
   ====================================================================== */
/*
 * LE VERT DU PARTAGE N'EST PLUS PEINT ICI.
 *
 * Ces deux regles, portees par le conteneur, etaient les plus fortes de
 * toutes : le survol a (0,3,0) reposait un vert translucide par-dessus le
 * degrade F, et le bouton changeait donc de couleur des qu'on passait la
 * souris dessus.
 *
 * Sa couleur vit desormais dans `.partage-duo__principal`, avec les autres
 * boutons de la fiche, et son geste dans le bloc commun de fin de fichier.
 * Deux endroits au lieu de cinq.
 */
.diagnostic-viewer-topbar__tools [data-partage-publier] {
    color: #ecfdf5;
}

.diagnostic-viewer-topbar__tools [data-partage-fermer] {
    background: rgba(6, 78, 59, 0.34);
    border-color: rgba(var(--share-line-rgb), 0.28);
    color: rgba(var(--green-pale-rgb), 0.92);
}
/* `.diagnostic-viewer-topbar__tools [data-partage-fermer]:hover` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.3777 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

/* ======================================================================
   « ECARTER » PORTE SA COULEUR, ET TOUT LE MONDE LE MEME ARRONDI
   ======================================================================
   Un test ecarte se signale en ambre partout ailleurs : la pastille de la
   liste, le cadre de sa modale. Son bouton restait neutre, et changeait
   d'arrondi au passage.
   ====================================================================== */
.diagnostic-viewer-topbar__tools .test-judgement__trigger {
    border-radius: 12px;
    border-color: rgba(var(--amber-rgb), 0.28);
    background: rgba(var(--amber-rgb), 0.07);
    color: rgba(var(--amber-pale-rgb), 0.86);
}

.diagnostic-viewer-topbar__tools .test-judgement__trigger:hover {
    border-color: rgba(var(--amber-rgb), 0.5);
    color: var(--amber-pale);
}

.diagnostic-viewer-topbar__tools .test-judgement.is-disregarded .test-judgement__trigger {
    border-color: rgba(var(--etat-vigilance-rgb), 0.55);
    background: rgba(var(--etat-vigilance-rgb), 0.18);
    color: var(--amber-soft);
}

/* Le meme arrondi pour tout ce qui se clique dans cette barre : trois valeurs
   differentes se voyaient des qu'ils se touchaient. */
.diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn,
.diagnostic-viewer-topbar__tools .consultation-control__form .btn,
.diagnostic-viewer-topbar__tools .test-judgement__trigger,
.diagnostic-viewer-topbar__tools select {
    border-radius: 12px;
}

/* Les intitulés nomment leur colonne : en gris fin, ils se confondaient avec
   le décor et on ne savait plus ce que commandait chaque pile. */
/* L'intitule du mot vit hors de la barre d'outils depuis qu'il a rejoint le
   cadre de la note : la regle le suit, sinon il gardait la facture de base et
   se lisait plus maigre que ses trois voisins. */
.viewer-note-client .viewer-tool-field__label,
.diagnostic-viewer-topbar__tools .viewer-tool-field__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(var(--blue-soft-rgb), 0.86);
}

/* ======================================================================
   LA MODALE « ÉCARTER » PORTE SA COULEUR
   ======================================================================
   Ses boutons héritaient du bleu et du vert génériques du projet : le geste
   d'écarter se signale en ambre partout ailleurs, et sa propre modale ne le
   disait pas.

   « Fermer » reste neutre : ne rien faire n'a pas de couleur.
   ====================================================================== */
.test-judgement__dialog .btn:not(.btn-secondary):not(.btn-danger) {
    background: rgba(var(--amber-rgb), 0.18);
    border: 1px solid rgba(var(--amber-rgb), 0.55);
    color: var(--amber-pale);
}

.test-judgement__dialog .btn:not(.btn-secondary):not(.btn-danger):hover {
    background: rgba(var(--amber-rgb), 0.28);
    border-color: rgba(var(--amber-rgb), 0.75);
    color: #fffbeb;
}

.test-judgement__dialog .btn-secondary {
    background: rgba(var(--white-rgb), 0.06);
    border: 1px solid rgba(var(--slate-light-rgb), 0.28);
    color: rgba(var(--white-rgb), 0.72);
}

.test-judgement__dialog .btn-secondary:hover {
    border-color: rgba(var(--slate-light-rgb), 0.5);
    color: var(--white);
}

.partage-interrupteur--onglet {
    align-self: center;
}

/* `align-self: stretch` faisait démarrer « Tout le test » au haut de la rangée
   pendant que ses voisins s'y centraient : quatre pixels d'écart. Toutes les
   cases font maintenant 48, il n'y a plus rien à étirer. */
/* Le bouton glissant se centrait dans sa propre boîte, pas dans l'onglet :
   on lui donne la hauteur de l'onglet, et son contenu se centre dedans. */
.partage-interrupteur--onglet {
    align-self: stretch;
    height: auto;
    min-height: 48px;
}

/* « Écarter » réagit comme ses voisins : même durée, même soulèvement. Il
   héritait d'un `transition: all` générique, donc d'un rythme différent de
   celui des boutons d'à côté. */
.diagnostic-viewer-topbar__tools .test-judgement__trigger {
    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.diagnostic-viewer-topbar__tools .test-judgement__trigger:hover {
    transform: translateY(-1px);
    background: rgba(var(--amber-rgb), 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-viewer-topbar__tools .test-judgement__trigger {
        transition: none;
    }

    .diagnostic-viewer-topbar__tools .test-judgement__trigger:hover {
        transform: none;
    }
}

/* Le bouton de note est une ACTION, comme « Partager les résultats » : même
   facture pleine, mais en bleu. Le vert appartient au partage, et joindre un
   mot n'est pas partager. */
.diagnostic-viewer-topbar__note {
    /* VARIANTE F. Ces valeurs vivaient dans une surcouche `body .…__note`
       posee 400 lignes plus bas, qui existait uniquement pour battre le
       degrade translucide qui se trouvait ici. */
    background: linear-gradient(135deg, #244DAE, #132A52);
    border-color: rgba(var(--blue-light-rgb), 0.5);
    box-shadow: 0 8px 18px rgba(36, 77, 174, 0.28);
    color: var(--encre-sur-fond-fixe);
}

/* SON SURVOL NE REPEINT PLUS.
   Il reposait un degrade entier, plus clair et monte vers le vif, avec une
   specificite superieure a celle de la regle F : le bouton reprenait donc son
   ancienne couleur des qu'on passait dessus. Le geste commun s'en charge. */
.diagnostic-viewer-topbar__note:hover {
    border-color: rgba(var(--blue-light-rgb), 0.72);
    color: var(--white);
}

/* Le bouton glissant prend exactement la hauteur du lien voisin : c'est le
   seul moyen d'être sûr qu'ils partagent le même centre, plutôt que de faire
   confiance à une chaîne de centrages imbriqués. */
.diagnostic-viewer-nav__item .partage-interrupteur--onglet {
    align-self: auto;
    height: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

/* ======================================================================
   LA RANGÉE D'ONGLETS : GÉOMÉTRIE IMPOSÉE
   ======================================================================
   Mesuré : les onglets à interrupteur faisaient 56 px quand les autres en
   faisaient 48, et leur bouton glissant se centrait 4 px trop haut. J'ai
   corrigé par retouches successives sans jamais tout tenir en même temps,
   parce que trois centrages imbriqués se disputaient la hauteur.

   Cette règle ferme le sujet : chaque case de la rangée fait 48 px, chaque
   contenu fait 46, aucune marge, et tout se centre dans sa boîte. Elle est
   volontairement la dernière du fichier pour l'emporter sur les précédentes.
   ====================================================================== */
.diagnostic-viewer-nav__panel > * {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    box-sizing: border-box;
    align-self: center;
    margin: 0;
}

.diagnostic-viewer-nav__item .partage-interrupteur--onglet {
    display: inline-flex;
    align-items: center;
}
/* « Montrer » appartient à la consultation : il en prend la bordure et le
   dégradé, pour qu'on voie d'un coup d'œil qu'il relève du même geste que
   « Démarrer la consultation », et non du partage. */
.consultation-section-share__button {
    background: linear-gradient(135deg, rgba(var(--consultation-deep-rgb), 0.82), rgba(147, 51, 200, 0.82));
    border: 1px solid rgba(var(--consultation-rgb), 0.62);
    color: var(--ink-50);
    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.consultation-section-share__button:hover {
    background: linear-gradient(135deg, rgba(124, 47, 214, 0.9), rgba(168, 60, 226, 0.9));
    border-color: rgba(196, 132, 252, 0.8);
    color: var(--white);
    transform: translateY(-1px);
}

/* Quand la section est déjà montrée, le bouton devient le geste inverse : il
   s'éteint, comme un interrupteur enfoncé. */
.consultation-section-share__button.is-active {
    background: rgba(107, 48, 163, 0.34);
    border-color: rgba(var(--consultation-rgb), 0.42);
    color: rgba(var(--violet-pale-rgb), 0.86);
}

@media (prefers-reduced-motion: reduce) {
    .consultation-section-share__button {
        transition: none;
    }

    .consultation-section-share__button:hover {
        transform: none;
    }
}

/* ======================================================================
   « ARRÊTER LE PARTAGE » : ROUGE, MAIS PAS PLEIN
   ======================================================================
   Il retire au client l'accès à ses résultats : c'est bien un geste de
   retrait, et le rouge le dit. Mais il se défait d'un clic sur « Partager les
   résultats », rien n'est détruit et la sélection reste intacte.

   Le rouge PLEIN reste donc réservé à « Supprimer définitivement », le seul
   geste de cette interface qui ne se rattrape pas. Ici, un contour et un
   texte rouges suffisent : on voit que c'est un retrait, on ne croit pas que
   c'est une destruction.
   ====================================================================== */
.diagnostic-viewer-topbar__tools [data-partage-fermer] {
    background: rgba(var(--red-deep-rgb), 0.22);
    border-color: rgba(var(--red-light-rgb), 0.42);
    color: rgba(var(--couleur-danger-doux-rgb), 0.92);
}

.diagnostic-viewer-topbar__tools [data-partage-fermer]:hover {
    background: rgba(var(--red-mid-rgb), 0.34);
    border-color: rgba(var(--red-light-rgb), 0.66);
    color: #fee2e2;
}

/* ======================================================================
   « ARRÊTER LE PARTAGE » RESTE CACHÉ QUAND IL EST CACHÉ
   ======================================================================
   L'attribut `hidden` ne vaut que par la règle `[hidden] { display: none }`
   de la feuille par défaut : la moindre déclaration `display` sur le bouton
   la bat. Il s'affichait donc alors que rien n'était partagé, en proposant
   d'arrêter ce qui n'avait pas commencé.

   Le JS pose et retire `hidden` selon l'état du serveur ; cette règle rend ce
   `hidden` effectif quelle que soit la mise en page qui l'entoure.
   ====================================================================== */
.diagnostic-viewer-topbar__tools [data-partage-fermer][hidden] {
    display: none !important;
}

/* ======================================================================
   L'INTERRUPTEUR DURABLE, À CÔTÉ DE « MONTRER »
   ======================================================================
   Il vivait dans la barre d'onglets, loin de la section qu'il concerne : on
   décidait de laisser un bloc au client sans l'avoir sous les yeux. Ici il
   accompagne le bouton, et les deux gestes se lisent ensemble : « Montrer »
   pousse la section maintenant, l'interrupteur la laisse après.
   ====================================================================== */
.partage-interrupteur--section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--share-line-rgb), 0.34);
    background: rgba(var(--share-fill-rgb), 0.16);
    white-space: nowrap;
    cursor: pointer;
}

.partage-interrupteur--section:hover {
    border-color: rgba(var(--share-line-rgb), 0.55);
    background: rgba(var(--share-fill-rgb), 0.26);
}

.partage-interrupteur--section .partage-interrupteur__texte {
    font-size: 12.5px;
    opacity: .92;
}

/* Déjà couvert par « tout le test » : l'interrupteur reste visible pour dire
   que le bloc part bien, mais il ne se manœuvre plus. */
.partage-interrupteur--section.is-forced {
    opacity: .55;
    cursor: not-allowed;
}

/* L'interrupteur qui porte sur l'onglet entier se distingue de celui qui porte
   sur un bloc : bordure plus sobre, pour qu'on ne les confonde pas. */
.partage-interrupteur--page {
    border-color: rgba(var(--slate-light-rgb), 0.34);
    background: rgba(71, 85, 105, 0.18);
}

.partage-interrupteur--page:hover {
    border-color: rgba(var(--slate-light-rgb), 0.55);
    background: rgba(71, 85, 105, 0.3);
}

/* ======================================================================
   LE BANDEAU : LA DISPOSITION ARRETEE LE 14/08
   ======================================================================
   Ecrit en dernier, donc gagnant a specificite egale sur les regles qui
   precedent. Six ajustements, tous decides sur maquette avant d'etre poses
   ici.
   ====================================================================== */

/* --- 1. « Ecarter ? » redevient un mot -------------------------------
   Il etait le seul endroit du produit ou ce geste prenait la forme d'un
   bouton de 40 px, a cause d'une surcharge propre au bandeau. On ne met pas
   en avant l'invitation a disqualifier un test : partout ailleurs c'est un
   mot a 12 px, blanc a 50 %, et il le redevient ici.

   Il reste centre sur la hauteur du selecteur voisin, sans quoi un mot nu
   flotterait a cote d'un champ de 40 px. */
body .diagnostic-viewer-topbar__tools .test-judgement__trigger {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 400;
    color: rgba(var(--white-rgb), 0.5);
}

body .diagnostic-viewer-topbar__tools .test-judgement__trigger:hover {
    background: none;
    border: 0;
    color: rgba(var(--white-rgb), 0.86);
}

/* Un test DEJA ecarte garde sa pastille ambre : la ce n'est plus une
   invitation, c'est un etat, et un etat se voit. */
body .diagnostic-viewer-topbar__tools .test-judgement.is-disregarded .test-judgement__trigger {
    padding: 2px 9px;
    min-height: 0;
    border: 1px solid rgba(var(--etat-vigilance-rgb), 0.55);
    border-radius: 999px;
    background: rgba(var(--etat-vigilance-rgb), 0.18);
    color: var(--amber-soft);
    font-weight: 600;
}

/* --- 2. La commande, sous l'identite ---------------------------------
   « Commander des programmes » quitte la rangee d'onglets, ou il finissait
   seul et centre sur une seconde ligne. Il porte sur la personne, pas sur un
   resultat : il ne depend d'ailleurs d'aucune session, et s'affiche donc meme
   quand aucune n'est choisie. */
.diagnostic-viewer-topbar__commande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 42 px : la hauteur de tous les controles de cet ecran, dont le bouton de
       consultation qui lui fait face. Il etait le seul a 40. */
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    box-sizing: border-box;

    /* L'ECART FRANC demande : la commande n'appartient pas a l'identite,
       elle porte dessus. Un espace serre les aurait fait lire ensemble.
       Les deux pixels ajoutes alignent sa ligne sur celle du bouton de
       consultation, qui part deux pixels plus bas a cause de l'intitule
       « EN DIRECT » pose au-dessus de lui. */
    margin-top: 28px;

    border-radius: 12px;

    /*
     * L'OR, PARCE QUE L'OR DIT DEJA « PROGRAMMES ».
     *
     * L'etape 4 du parcours, « Programmes en cours », porte exactement l'or de
     * la marque : 242, 190, 99. Le bouton qui commande ces programmes prend
     * donc la meme famille, et le client comme le praticien retrouvent la meme
     * couleur pour la meme chose d'un ecran a l'autre.
     *
     * Construit comme ses freres : la teinte VOYAGE de 22 degres vers le
     * cuivre, la saturation perd 14 points, la luminosite 12. C'est la meme
     * regle que le violet de la consultation et que le vert du partage, et
     * elle le place dans leur registre : contour de mise au point a 3,88
     * contre 3,89 et 3,99.
     *
     * La direction est choisie, pas subie : vers le jaune, le contour tombait
     * a 2,51 et le texte a 4,45, tous deux sous le seuil.
     */
    /* VARIANTE F : bord affirme et lueur PLEINE, de la couleur du bouton.
       L'ombre etait noire : elle creusait la barre au lieu de faire rayonner
       le bouton, et le bord a 0,34 le laissait se fondre dans son fond. */
    border: 1px solid rgba(var(--teinte-or), 0.52);
    /* L OR DESCEND DE QUATRE POINTS, ET C EST UNE CORRECTION DE CONTRASTE.
       `#98721B` vaut (152, 114, 27) : le blanc y mesure 4,41 pour 4,5 exiges,
       et c'est l'arret CLAIR du degrade qui decide, l'autre etant plus sombre.
       Le commentaire ci-dessus avait bien vu que la direction jaune tombait a
       4,45 ; celle-ci tombait a 4,41, quatre centiemes plus bas. `#926D19` rend
       4,75, a teinte et saturation inchangees.

       TROUVE EN COMPOSANT, PAS EN RELEVANT. La lecture des pixels ne voyait pas
       ce bouton : c'est `fonds_composes` qui calcule chaque arret du degrade sur
       le premier fond opaque et garde le pire. */
    background-image: linear-gradient(135deg, #926D19, #624A11);
    box-shadow: 0 8px 18px rgba(152, 114, 27, 0.28);

    color: var(--encre-sur-fond-fixe);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.diagnostic-viewer-topbar__commande:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(var(--teinte-or), 0.52);
    color: var(--white);
}

.diagnostic-viewer-topbar__commande.is-active {
    border-color: rgba(var(--teinte-or), 0.72);
    box-shadow: 0 0 0 1px rgba(var(--teinte-or), 0.28) inset, 0 8px 18px rgba(var(--black-rgb), 0.22);
    color: var(--white);
}

/* --- 3. Les selecteurs prennent une taille raisonnable ---------------
   Ils s'etiraient sur toute la largeur de leur colonne : une date de dix-neuf
   caracteres dans un champ de 300 px laisse un vide que rien ne justifie, et
   la barre en paraissait plus vide qu'elle ne l'est. Ils prennent desormais
   la place de leur contenu, bornee. */
.diagnostic-viewer-topbar__tools select,
.diagnostic-viewer-topbar__picker select {
    width: 100%;
    max-width: 250px;
}

.diagnostic-viewer-topbar__tools [data-partage-echeance] {
    max-width: 210px;
}

/* --- 4. La rangee du bas dit ce qu'elle commande ---------------------
   Six interrupteurs alignes sous des resultats ne disent pas ce qu'ils
   decident. L'intitule le dit, et « Tout le test » se tient a cote de lui :
   il ne designe aucune page, il les commande toutes. */
.diagnostic-viewer-nav__intitule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 12px;
}

.diagnostic-viewer-nav__quoi {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--blue-soft-rgb), 0.86);
}

/* --- 5. « Tout le test » perd sa boite -------------------------------
   Elle lui donnait exactement la facture d'un onglet, arrondi compris, alors
   qu'il n'ouvre aucune page. Il garde son interrupteur, qui est ce qu'il est
   vraiment. */
/* --- 6. La rangee s'aligne a gauche ----------------------------------
   Elle etait centree, ce qui n'a plus de sens des lors qu'un intitule la
   precede : le titre a gauche et les onglets au milieu ne se lisaient pas
   comme un ensemble. */
.diagnostic-viewer-topbar__nav .diagnostic-viewer-nav__panel {
    justify-content: flex-start;
}

/* ======================================================================
   LE BANDEAU, SUITE : LES ZONES, ET LE BLEU DE LA NOTE
   ====================================================================== */

/* --- « Ecarter ? » sur la ligne du selecteur -------------------------
   Il etait empile SOUS la consultation, avec laquelle il n'a rien a voir.
   Le champ de session devient une grille : l'intitule sur toute la largeur,
   puis le selecteur et le jugement cote a cote. Le selecteur prend la place
   restante, le mot garde la sienne. */
.diagnostic-viewer-topbar__tools .diagnostic-viewer-topbar__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    align-items: center;
}

.diagnostic-viewer-topbar__tools .diagnostic-viewer-topbar__result .viewer-tool-field__head {
    grid-column: 1 / -1;
}

/* --- Le filet, puis le titre de la zone « en direct » ----------------
   La colonne du milieu porte deux choses de nature differente : le contexte,
   c'est-a-dire la seance qu'on regarde, et l'action, c'est-a-dire la montrer.
   Un filet les separe plutot qu'un simple ecart, qui ne disait rien. */
.viewer-tool-stack__trait {
    height: 1px;
    margin: 6px 0 2px;
    background: rgba(var(--white-rgb), 0.10);
}

/* --- La zone du partage devient un panneau --------------------------
   Tout ce qui part chez le client vit desormais dans une meme boite, avec son
   propre fond : on voit d'un coup ou s'arrete ce qui sera transmis. C'est la
   seule zone du bandeau qui engage quelque chose au-dela de la seance. */
.diagnostic-viewer-topbar__tools .partage-durable {
    padding: 14px 16px 16px;
    border-radius: 16px;
    background: rgba(var(--black-rgb), 0.20);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    align-content: start;
}

/* --- Le bleu de la note : il descend, il ne devie plus ---------------
   Il voyageait de 24 degres vers l'ardoise pour s'assombrir, ce qui reglait
   un defaut mais en creait un autre : arrive a 198 degres, son bout sombre
   n'etait plus bleu mais turquoise, et le bouton changeait de couleur au
   lieu de changer de profondeur.

   Il tient maintenant sa teinte (222 -> 218 degres, soit 4 degres) et
   descend franchement en clarte, de 41 % a 20 %. Le contraste du blanc
   reste a 7,64 sur le bout clair. */
/* --- Le vert du partage, meme construction --------------------------
   Emeraude vers sapin : teinte -20, saturation -14, luminosite -12. */

/* ======================================================================
   LA ZONE DE PARTAGE REDEVIENT UNE ZONE
   ======================================================================
   Deux regles anterieures l'empechaient d'exister comme un tout, et il a fallu
   la voir a l'ecran pour s'en apercevoir :

     1. `display: contents` la dissolvait. Ses deux colonnes devenaient des
        elements independants de la barre, mon titre un troisieme, et le
        compteur comme la note retombaient sous l'identite. Un fond et un
        rembourrage poses sur une boite qui ne se dessine pas ne donnent rien.

     2. Son etat etait epingle en absolu sur la carte entiere, donc en haut a
        droite, loin des commandes qu'il decrit. On lisait « rien n'est encore
        partage » a l'oppose du bouton qui partage.

   Elle redevient une grille de deux colonnes, avec son titre au-dessus et son
   etat rendu a son flux.
   ====================================================================== */

body .diagnostic-viewer-topbar__tools .partage-durable {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    align-items: start;

    /* Elle prend la place qui reste, sans descendre sous une largeur ou ses
       deux colonnes s'ecraseraient. */
    flex: 1 1 340px;

    padding: 14px 16px 16px;
    border-radius: 16px;
    background: rgba(var(--black-rgb), 0.20);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

/* L'etat revient dans la zone qu'il decrit. */
body .partage-durable__etat {
    position: static;
    top: auto;
    right: auto;
    max-width: none;
}

/* La place reservee en haut de la carte n'a plus d'objet. */
body .diagnostic-viewer-topbar__head {
    padding-top: 4px;
}

@media (max-width: 900px) {
    body .diagnostic-viewer-topbar__tools .partage-durable {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======================================================================
   LA ZONE DE PARTAGE : UNE SEULE COLONNE
   ======================================================================
   En deux colonnes, l'etat les recouvrait. Il porte `white-space: nowrap`
   depuis l'epoque ou il flottait en absolu dans un coin, ou rien ne le
   contraignait ; rendu a son flux dans une colonne etroite, il ne pouvait plus
   se replier et debordait sur sa voisine.

   Une seule colonne rend le chevauchement impossible, quelle que soit la
   longueur du texte et quelle que soit la langue. Le russe est d'ailleurs plus
   long que le francais sur cette chaine.

   L'ordre de lecture est celui du geste : l'etat, ce qui est compte et le mot
   joint, puis la duree et le bouton qui engage. L'action ferme la zone.
   ====================================================================== */

body .diagnostic-viewer-topbar__tools .partage-durable {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    flex: 0 1 320px;
}

/* Il se replie comme n'importe quel texte : plus rien ne l'oblige a tenir sur
   une ligne, puisqu'il n'est plus epingle dans un coin. */
body .diagnostic-viewer-topbar__tools .partage-durable__etat {
    white-space: normal;
    z-index: auto;
    line-height: 1.35;
}

/* --- Le bloc de tete retrouve son rembourrage haut ------------------
   Il valait 40 px pour reserver la place de l'etat epingle dans le coin.
   L'etat etant rendu a son flux, j'avais ramene la valeur a 4, et l'identite
   s'est retrouvee collee au bord. On revient aux 20 px des trois autres
   cotes : la carte respire pareil partout. */
body .diagnostic-viewer-topbar__head {
    padding-top: 20px;
}

/* ======================================================================
   UN SEUL SURVOL POUR LES QUATRE DEGRADES
   ======================================================================
   Le dore montrait la bonne facon de faire : on souleve d'un pixel et on
   eclaircit la teinte qu'on a deja. Le violet, lui, REPEIGNAIT : son survol
   posait un second degrade, plus clair et decale en teinte, si bien que le
   bouton changeait de couleur en meme temps que d'etat.

   Un bouton qui change de famille au survol laisse croire qu'il fera autre
   chose que ce qu'il annoncait. On garde donc partout la meme mecanique :
   le relief et l'eclat disent « je reponds », la teinte ne bouge pas.
   ====================================================================== */

body .diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn:hover,
body .diagnostic-viewer-topbar__commande:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

body .diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn--secondary:hover {
    background: #402879;
    border-color: rgba(var(--slate-light-rgb), 0.28);
}

/* Les deux familles gardent leur teinte, et voient leur bord s'affirmer. */

/* ======================================================================
   LA ZONE DE PARTAGE : DEUX COLONNES, ET L'ETAT AU-DESSUS
   ======================================================================
   L'etat sort de sa pile : il ne decrit pas une colonne mais la zone entiere,
   et il se lit avant tout le reste. Il prend donc toute la largeur, sous le
   titre.

   Dessous, deux colonnes. A gauche ce qui engage : la duree, publier, arreter.
   A droite ce qui informe : le compte et le mot joint. La colonne de droite
   s'aligne sur le BAS de la gauche, donc sur « Arreter le partage », ce qui
   remplit le vide qu'elle laissait.
   ====================================================================== */

body .diagnostic-viewer-topbar__tools .partage-durable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    align-items: start;
    flex: 1 1 380px;
}

body .diagnostic-viewer-topbar__tools .partage-durable__etat {
    grid-column: 1 / -1;
}

/* ======================================================================
   L'OMBRE D'UN BOUTON EST FAITE DE SA PROPRE COULEUR
   ======================================================================
   Elle etait bleue sur le violet de la consultation ET sur le vert du partage
   (rgba(37, 99, 235, 0.22) dans les deux cas), noire sur le dore, absente sur
   la note. Quatre boutons d'une meme famille, quatre ombres sans rapport ni
   entre elles ni avec ce qu'elles portent.

   La regle : l'ombre reprend la teinte de DEPART du degrade, a 28 %. Sur un
   fond sombre, une ombre noire ne se voit pas ; une ombre teintee pose un
   halo qui rattache le bouton a sa famille et le decolle du fond. Les
   distances ne changent pas : 0 8px 18px, comme avant.
   ====================================================================== */

body .diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn--primary {
    box-shadow: 0 8px 18px rgba(var(--consultation-deep-rgb), 0.28);
}

body .diagnostic-viewer-topbar__commande {
    box-shadow: 0 8px 18px rgba(152, 114, 27, 0.28);
}

/* Le retrait garde une ombre discrete : il ne doit pas rivaliser avec les
   trois actions pleines, mais il ne doit pas non plus flotter sans assise. */
body .diagnostic-viewer-topbar__tools [data-partage-fermer] {
    box-shadow: 0 6px 14px rgba(var(--red-deep-rgb), 0.22);
}

/* L'etat doit passer AVANT les deux colonnes, pas entre elles. Le gabarit le
   rend apres la premiere : occupant toute la largeur, il coupait la grille en
   deux et renvoyait la seconde colonne a la ligne suivante. */
body .diagnostic-viewer-topbar__tools .partage-durable__etat {
    order: -1;
}

/* ======================================================================
   LA FICHE CLIENT : UNE BANDE, PUIS TROIS BLOCS
   ======================================================================
   EN HAUT, QUI ET QUOI LUI DIRE. L'identite a gauche, le mot qu'on lui adresse
   a droite sur deux colonnes. C'est ce qui concerne la PERSONNE, et cela se lit
   avant les reglages qui decident de ce qu'elle recoit.

   DESSOUS, TROIS BLOCS DE MEME LARGEUR, chacun un sujet entier :
     la seance qu'on regarde et comment on la montre en direct,
     ce qu'on lui laisse apres et pour combien de temps,
     les programmes qu'on lui commande.

   Les programmes etaient ranges avec le partage, ou ce bouton passait pour un
   de ses reglages. Ils ne se reglent pas : ni duree, ni selection, ni etat.

   Le conteneur des outils est en `display: contents` : ses trois zones sont des
   cellules de CETTE grille, pas d'une grille a elles. Tout se decide ici.

   GRAND ECRAN   identite | mot ..............
                 seance   | partage | programmes
   TABLETTE      identite | mot
                 seance   | partage
                 programmes sur les deux colonnes
   TELEPHONE     une colonne, dans l'ordre du geste
   ====================================================================== */

/* Le partage tient dans UNE colonne a toute largeur d'ecran. Il fut une grille
   de deux colonnes ; la declaration vit encore plus haut dans cette feuille,
   et c'est ici qu'elle est tranchee. */
body .diagnostic-viewer-topbar__tools .partage-durable {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* --- LES ZONES N'ONT PLUS DE CADRE -----------------------------------
   Elles en portaient un chacune, a l'interieur de la carte qui les contient
   deja toutes. Un cadre dans un cadre ne separe rien qu'un ecart ne separe
   mieux, et il coutait 30 px de haut par rangee en rembourrage.

   Ce qui les distingue desormais : l'ecart entre elles, et l'intitule que
   chacune porte en tete. */
body .viewer-bloc-seance,
body .viewer-bloc-programmes,
body .diagnostic-viewer-topbar__tools .partage-durable {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: none;
}

/* --- Grand ecran : la bande, puis les trois blocs --------------------- */
@media (min-width: 1201px) {
    body .diagnostic-viewer-topbar__head {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Les trois zones du bas partagent la meme rangee : c'est ce qui aligne
           leurs intitules, leurs selecteurs et leurs boutons. */
        grid-template-areas:
            "client mot     mot"
            "seance partage programmes";
    }
}

/* --- Tablette : deux colonnes, les programmes prennent la derniere ligne */
@media (min-width: 901px) and (max-width: 1200px) {
    body .diagnostic-viewer-topbar__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "client     mot"
            "seance     partage"
            "programmes programmes";
    }
}

/* --- Telephone : une colonne, et le mot suit l'identite ---------------
   Le mot s'adresse a la personne nommee juste au-dessus : il la suit, comme
   sur les deux autres largeurs. */
@media (max-width: 900px) {
    body .diagnostic-viewer-topbar__head {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "client"
            "mot"
            "seance"
            "partage"
            "programmes";
    }

    body .diagnostic-viewer-topbar__tools .partage-durable {
        position: relative;
    }

}

/* Chaque zone rejoint sa case, a toute largeur. Les noms de zones changent
   d'une largeur a l'autre, pas les affectations. */
body .diagnostic-viewer-topbar__client {
    grid-area: client;
}

body .viewer-note-client {
    grid-area: mot;
}

body .diagnostic-viewer-topbar__tools .partage-durable {
    grid-area: partage;
    min-width: 0;
}

body .viewer-bloc-programmes {
    grid-area: programmes;
}

/* ======================================================================
   LE MOT POUR LE CLIENT : UN CHAMP, PAS UNE MODALE
   ======================================================================
   Il fallait ouvrir un volet pour savoir s'il y avait deja quelque chose
   d'ecrit. Le champ le montre sans qu'on demande.

   SON BOUTON EST DANS SON CADRE, en haut a droite, a la hauteur de
   l'intitule : pose ailleurs, il agissait a distance sur un champ qu'il ne
   touchait pas.
   ====================================================================== */
.viewer-note-client {
    display: flex;
    /* EN RANGEE : l'intitule et son bouton a gauche, le champ prend le reste
       et toute la hauteur. En colonne, les deux premiers coutaient une ligne
       de 42 px au-dessus du champ pour une largeur de 135. */
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
    box-sizing: border-box;
}

.viewer-note-client__cote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Il ne s'etire pas et ne se comprime pas : c'est le champ qui prend et
       rend la place. */
    flex: 0 0 auto;
}

.viewer-note-client__champ {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    min-height: 76px;
    /* En hauteur seulement : en largeur, il sortirait de sa colonne. */
    resize: vertical;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--slate-light-rgb), 0.28);
    background: rgba(var(--slate-rgb), 0.42);
    color: rgba(var(--white-rgb), 0.9);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

/* L'AMORCE SE LIT VRAIMENT. A 0,38 elle contrastait a 3,5 contre 1, ce qui
   passait pour une invite de deux mots mais plus pour la consigne qu'elle
   porte maintenant. Mesure a l'ecran, pas devinee. */
.viewer-note-client__champ::placeholder {
    color: rgba(var(--white-rgb), var(--voile-mention, 0.56));
    opacity: 1;
}

/* Le contour de mise au point vient de la charte : on ne pose ici que le bord,
   sinon `outline: none` effacerait le repere du clavier. */
.viewer-note-client__champ:focus {
    border-color: rgba(var(--portal-accent-rgb), 0.6);
}

/* ======================================================================
   LE BOUTON D'ENVOI DU MOT
   ======================================================================
   Sa geometrie venait de la barre d'outils, dont il est sorti en rejoignant le
   cadre du mot. Il la porte donc lui-meme, et il ne se laisse pas comprimer
   par un intitule long a sa gauche.
   ====================================================================== */
.diagnostic-viewer-topbar__note {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    white-space: nowrap;
}

/* L'AIDE AU COIN DE L'IDENTITE. Hors du flux : dans la pile, elle aurait
   pousse le nom d'une ligne. La colonne est deja en `position: relative` par
   la grille, c'est donc sur elle qu'elle s'ancre. */
.diagnostic-viewer-topbar__client {
    position: relative;
}

.diagnostic-viewer-topbar__aide {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* ======================================================================
   LE RETRAIT, SOUS LE BOUTON
   ======================================================================
   On envoie souvent, on retire rarement : le retrait se donne la facture d'un
   lien, pas celle d'un bouton. Le message, lui, tient sous les deux et dit ce
   qui vient de se passer, dans les memes mots qu'avant.
   ====================================================================== */
.viewer-note-client__retrait {
    appearance: none;
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    /* LE CRAN DE LA MENTION, PAS UN CRAN A LUI. A 0,48 de blanc sur la bande du
       haut il rendait 4,33 pour 4,5 exiges (mesure `contraste.py`, les deux
       themes). 0,54 est la valeur que le produit donne deja a tout ce qui
       accompagne sans etre lu en premier, et elle rend 5,07 ici. Le repli porte
       la valeur du sombre, ou elle passe. */
    color: rgba(var(--white-rgb), var(--voile-mention, 0.54));
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.viewer-note-client__retrait:hover {
    color: rgba(var(--red-light-rgb), 0.92);
}

.viewer-note-client__retrait[disabled] {
    opacity: 0.5;
    cursor: progress;
}

/* PENDANT L'ENVOI, PUIS APRES. Ferme, il ne part pas deux fois ; confirme, il
   dit que c'est fait, le temps de le lire. */
.diagnostic-viewer-topbar__note[disabled] {
    opacity: 0.62;
    cursor: progress;
}

/*
 * LA CONFIRMATION SE FOND, ET ELLE TIENT.
 *
 * Le vert arrivait d'un bloc : `background-image` ne figurait pas dans la
 * liste des proprietes en transition du bouton, seul `background` y etait, et
 * le degrade passe par l'image. Le changement etait donc net comme un
 * clignotement.
 *
 * Et il tient MEME SOUS LE POINTEUR : apres un clic, la souris reste sur le
 * bouton, et le survol bleu reprenait la main sur le vert faute d'un poids
 * suffisant. On confirmait donc un envoi que personne ne voyait.
 */
.diagnostic-viewer-topbar__note {
    /* Elle nommait `background-image`, qui ne bouge plus, et ignorait
       `filter`, qui porte desormais le geste : l'eclaircissement sautait
       d'un coup au lieu de monter. */
    transition: transform .14s ease, filter .14s ease, border-color .14s ease, color .14s ease;
}

/*
 * « NOTE ENVOYEE » RESTE BLEU.
 *
 * Il virait au vert le temps de sa confirmation, deux secondes et demie. Or
 * le vert appartient au partage : joindre un mot n'est pas partager, et le
 * bouton changeait de famille pour dire qu'il avait fait son travail.
 *
 * C'est le LIBELLE qui porte la confirmation, le JavaScript le remplace par
 * « Note envoyee ». Le bord s'affirme le temps du message, et rien d'autre
 * ne bouge. Le twin `:hover` disparait avec : il redeclarait le fond a
 * (0,3,0) et bloquait donc le geste pendant ces deux secondes.
 */
body .diagnostic-viewer-topbar__note.is-envoye {
    border-color: rgba(var(--blue-light-rgb), 0.82);
}

/* ======================================================================
   LE BLOC DES PROGRAMMES
   ======================================================================
   Il ne porte qu'une commande, et c'est bien ce qu'il dit : les programmes se
   commandent, ils ne se reglent pas. Son bouton prend la largeur du bloc, comme
   les commandes de ses deux voisins.
   ====================================================================== */
body .viewer-bloc-programmes .diagnostic-viewer-topbar__commande {
    width: 100%;
    margin-top: 0;
}

/* --- Sur telephone, tout bouton prend la ligne -----------------------
   La consultation le faisait deja, seule. Un bouton large de son texte au
   milieu d'une colonne etroite semble inacheve a cote d'un voisin qui va d'un
   bord a l'autre, et la cible est plus facile a atteindre au pouce. */
@media (max-width: 900px) {
    body .diagnostic-viewer-topbar__commande,
body .diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn,
body .diagnostic-viewer-topbar__tools select {
        width: 100%;
        max-width: none;
    }
}

/* --- « Commander des programmes » suit le rythme de sa colonne --------
   Il portait un calage de 43 px, mesure a l'ecran du temps ou il vivait sous
   l'identite et devait rejoindre le bouton de consultation d'a cote. Il est
   depuis passe dans le panneau de partage, ou l'ecart entre commandes est
   decide par la pile : le calage n'y creusait plus qu'un trou. */
body .diagnostic-viewer-topbar__tools .partage-durable .diagnostic-viewer-topbar__commande {
    margin-top: 0;
}

/* --- Le statut ne deborde plus de son cadre --------------------------
   Il porte encore `white-space: nowrap` de l'epoque ou il flottait en absolu
   dans un coin, sans contrainte de largeur. Pose a droite de la ligne du
   titre, il sortait du cadre des que sa phrase depassait sa piste. Il se
   replie comme n'importe quel texte, et ne depasse jamais sa colonne. */
@media (min-width: 901px) {
    body .diagnostic-viewer-topbar__tools .partage-durable__etat {
        white-space: normal;
        max-width: 100%;
        min-width: 0;
    }
}

/* --- Le dore prend la largeur de sa colonne, comme la consultation ---
   Il restait a la largeur de son texte pendant que son voisin allait d'un
   bord a l'autre : deux boutons de meme rang, deux comportements. */
body .diagnostic-viewer-topbar__commande {
    width: 100%;
    box-sizing: border-box;
}

/* --- « Arreter le partage » garde son rouge au survol ----------------
   Il porte la classe de la variante secondaire, dont j'ai fige le fond violet
   au survol pour l'empecher de se repeindre. Le violet ecrasait donc son creux
   rouge des qu'on le survolait : le geste de retrait prenait la couleur de la
   consultation. Sa famille passe devant. */
body .diagnostic-viewer-topbar__tools [data-partage-fermer]:hover {
    background: rgba(var(--red-mid-rgb), 0.34);
    border-color: rgba(var(--red-light-rgb), 0.66);
    color: #fee2e2;
}

/* --- Le cadre ne sort plus de la carte -------------------------------
   Sous 1200 px je lui donnais `width: 100 %`. Une cellule de grille s'etire
   deja toute seule ; ce 100 % s'ajoutait a son rembourrage et a sa bordure des
   que la boite n'etait pas en `border-box`, et le cadre depassait a droite
   d'exactement cette somme. On retire la largeur et on borne la boite. */
body .diagnostic-viewer-topbar__tools .partage-durable {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1200px) {
    body .diagnostic-viewer-topbar__tools .partage-durable {
        width: auto;
    }
}

/* L'interrupteur suit la meme echelle : 34 sur 20, pastille de 14, course 17. */
body .partage-interrupteur--onglet .partage-interrupteur__glissiere {
    width: 34px;
    height: 20px;
}

body .partage-interrupteur--onglet .partage-interrupteur__glissiere::after {
    width: 14px;
    height: 14px;
}

body .partage-interrupteur--onglet input:checked + .partage-interrupteur__glissiere::after {
    transform: translateX(17px);
}

/* ======================================================================
   DEUX FINITIONS SUR LES ONGLETS
   ======================================================================
   1. LES MARGES. Le remplissage droit de 8 px suppose un interrupteur : il
      donne l'air qui l'entoure. Sur un onglet qui n'en a pas, « Synthese
      experte » notamment, le texte se retrouvait a 8 px du bord a droite et a
      14 a gauche. Sans interrupteur, les deux cotes valent 14, comme dans la
      maquette.

   2. LE SURVOL. Un onglet qui ne partage rien devenait vert sous le pointeur.
      Plusieurs regles anciennes le peignaient encore ; celle-ci ferme la
      question pour de bon, en excluant explicitement les deux etats verts.
   ====================================================================== */
body .diagnostic-viewer-nav__item:not(:has(.partage-interrupteur)) {
    padding-right: 14px;
}

body .diagnostic-viewer-nav__item:not(:has(.partage-interrupteur)) .diagnostic-viewer-nav__link {
    padding-right: 0;
}

/* Les onglets s'alignent sur leur milieu : sans cela, celui qui porte un
   contour l'emporte sur la hauteur de la rangee et decale ses voisins. */
body .diagnostic-viewer-nav__panel {
    align-items: center;
}

/* ======================================================================
   LE LIEN NE DEPASSE PLUS DE SON ONGLET
   ======================================================================
   `.diagnostic-viewer-nav__item .diagnostic-viewer-nav__link` pose 46 px de
   haut, et pese DEUX classes ; ma regle de hauteur, ecrite en
   `body ... > *`, n'en pesait qu'une : l'ancienne gagnait. Le lien mesurait
   donc 46 px dans un onglet de 40 et debordait de 3 px en haut comme en bas,
   ce qui se voyait des que le survol lui donnait un fond, et faisait paraitre
   l'onglet tombe d'un cran.

   Meme poids de selecteur, donc c'est la derniere ecrite qui l'emporte.
   ====================================================================== */
body .diagnostic-viewer-nav__item .diagnostic-viewer-nav__link,
body .diagnostic-viewer-nav__item .partage-interrupteur--onglet {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    align-self: center;
}

/* ======================================================================
   LA PASTILLE DU SWITCH COCHE NE TOMBE PLUS
   ======================================================================
   La pastille est centree par `top: 50%` + `translateY(-50%)`. En reglant sa
   course j'avais ecrit `transform: translateX(17px)` SEUL, ce qui remplace la
   valeur entiere et emporte le recentrage avec elle : la pastille retombait
   alors a `top: 50%`, soit sept pixels trop bas.

   Seuls les interrupteurs COCHES etaient concernes, ce qui explique que le
   defaut ne se voyait que sur les onglets verts.

   Les deux translations, dans cet ordre : on recentre, puis on deplace.
   ====================================================================== */
body .partage-interrupteur--onglet input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(17px);
}

/* La glissiere mesure ce qu'on lui demande : en `content-box`, la bordure
   ajoutait deux pixels et la piste faisait 36 sur 22 au lieu de 34 sur 20. */
body .partage-interrupteur--onglet .partage-interrupteur__glissiere {
    box-sizing: border-box;
}

/* ======================================================================
   LA COURSE DE LA PASTILLE, CALCULEE ET NON APPROCHEE
   ======================================================================
   La glissiere fait 34 px, la pastille 14, et elle part a 3 du bord gauche.
   Sa position finale est donc 34 - 14 - 3 = 17, ce qui fait une course de
   17 - 3 = 14 px. J'avais ecrit 17, c'est-a-dire la POSITION finale et non la
   distance a parcourir : la pastille sortait de trois pixels a droite.
   ====================================================================== */
body .partage-interrupteur--onglet input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(14px);
}

/* La course exacte, mesuree et non calculee de tete.
   La glissiere fait 34 px en `border-box`, ses deux filets d'un pixel laissent
   32 de boite interieure, la pastille en occupe 14 et part a 3. Sa place
   symetrique est donc 32 - 3 - 14 = 15, soit une course de 12.
   A 14, il restait 1 px a droite contre 3 a gauche : c'est ce leger decalage
   qui se voyait au zoom. */
body .partage-interrupteur--onglet input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(12px);
}

/* --- LE POUCE DE L'INTERRUPTEUR, ENFONCE SOUS LE DOIGT ----------------
   Les deux composantes sont ecrites ENSEMBLE. Une transformation posee en
   second REMPLACE la premiere : `scale()` seul effacait le `translateY(-50%)`
   qui centre le pouce, et celui-ci retombait vers le bas pendant le clic.
   C'est le piege exact qui avait deja decale ce meme pouce. */
body .partage-interrupteur:active .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) scale(0.88);
    transition: transform 0.15s ease;
}

body .partage-interrupteur:active input:checked + .partage-interrupteur__glissiere::after {
    transform: translateY(-50%) translateX(12px) scale(0.88);
    transition: transform 0.15s ease;
}

/* =========================================================================
   LES ONGLETS DU VISUALISEUR — ECRITS DE ZERO

   Tout ce qui les concernait a ete supprime : trente-cinq regles de peinture
   empilees en cinq generations de correctifs, dont plus personne ne pouvait
   dire laquelle gagnait. Ce bloc est desormais la SEULE source. Toute
   correction future se fait ICI, jamais par une regle ajoutee ailleurs.

   DEUX ELEMENTS, DEUX ROLES :

     LE CADRE (`__item`) est la surface. Il contient l'intitule ET son
     interrupteur, donc c'est lui qui porte la forme, le fond et la bordure.

     LE LIEN (`__link`) n'apporte que son texte. Il ne porte ni fond, ni
     bordure, ni ombre, dans aucun etat : quand les deux se peignaient, un
     second cadre s'allumait a l'interieur du premier.

   UN ONGLET SANS INTERRUPTEUR (« Synthese experte ») est un lien pose
   directement dans la barre. Il porte alors lui-meme la forme du cadre, ce que
   dit le selecteur `> .diagnostic-viewer-nav__link`.

   TROIS ETATS, ET UN SEUL SIGNE PAR INFORMATION :
     le FOND dit ce qui est partage : rien, une partie, tout ;
     la BORDURE dit l'onglet qu'on regarde, en cyan ;
     le SURVOL ne repeint RIEN. L'element se souleve d'un pixel, cela suffit.
   ========================================================================= */

/* --- La forme, commune aux deux montages ----------------------------- */
.diagnostic-viewer-nav__item,
.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    /* La hauteur vient de `.diagnostic-viewer-nav__panel > *`, qui la fixe pour
       tous les enfants de la barre. La redeclarer ici creerait un conflit que
       le prochain lecteur devrait arbitrer ; on suit celle qui existe. */
    border-radius: 12px;
    border: 1px solid rgba(var(--slate-light-rgb), 0.20);
    background: rgba(var(--slate-rgb), 0.55);
    /* APRES `background` : le raccourci reinitialise le clip. Sans cette borne,
       le fond passe SOUS la bordure translucide et l'assombrit sur son
       pourtour, ce qui se lit comme un second trait. */
    background-clip: padding-box;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.diagnostic-viewer-nav__item {
    padding: 0 8px 0 0;
}

.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link {
    padding: 0 14px;
}

/* --- Le lien : rien que du texte -------------------------------------- */
.diagnostic-viewer-nav__item .diagnostic-viewer-nav__link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 0 0 14px;
    border: 0;
    background: none;
    box-shadow: none;
}

.diagnostic-viewer-nav__link {
    color: rgba(var(--white-rgb), 0.86);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Ce qui est partage : le FOND --------------------------------------
   Une partie, puis tout. Le vert s'affirme, il ne change pas de teinte. */
.diagnostic-viewer-nav__item.is-partage-partiel {
    background: rgba(var(--share-fill-rgb), 0.22);
    border-color: rgba(var(--share-line-rgb), 0.30);
}

.diagnostic-viewer-nav__item.is-partage-total {
    background: rgba(var(--share-fill-rgb), 0.42);
    border-color: rgba(var(--share-line-rgb), 0.45);
}

/* --- Ce qui est ACHETE : le meme fond, tire vers le jaune ---------------
   L'onglet garde ses deux intensites, une partie puis tout : seule la TEINTE
   change. On lit donc toujours combien est partage, et en plus que ce qui
   l'est ne se reprend pas.

   L'INTERRUPTEUR, LUI, GARDE SON VERT. Il dit « c'est partage », ce qui reste
   vrai d'un bloc achete. La teinte de l'acquis est une propriete de l'onglet,
   pas du geste.

   Ces deux regles pesent (0,2,0) comme celles qu'elles remplacent, et sont
   ecrites APRES : a poids egal, la derniere gagne. */
.diagnostic-viewer-nav__item.is-achat.is-partage-partiel {
    background: rgba(var(--achat-fill-rgb), 0.24);
    border-color: rgba(var(--achat-line-rgb), 0.32);
}

.diagnostic-viewer-nav__item.is-achat.is-partage-total {
    background: rgba(var(--achat-fill-rgb), 0.44);
    border-color: rgba(var(--achat-line-rgb), 0.48);
}

/* Un onglet achete que le praticien n'a pas coche par ailleurs : il est
   partage quand meme, puisque l'achat publie d'office. Sans cette regle il
   resterait gris, ce qui serait faux. */
.diagnostic-viewer-nav__item.is-achat:not(.is-partage-partiel):not(.is-partage-total) {
    background: rgba(var(--achat-fill-rgb), 0.24);
    border-color: rgba(var(--achat-line-rgb), 0.32);
}

/* --- L'onglet qu'on regarde : L'EPAISSEUR ------------------------------
   Il garde la COULEUR de son etat, grise s'il ne partage rien, verte s'il
   partage : c'est son trait qui s'epaissit. Une bordure cyan aurait ajoute une
   troisieme couleur pour dire une chose que l'epaisseur dit deja, et elle
   couvrait l'etat de partage au lieu de s'y ajouter.

   `box-sizing: border-box` etant pose plus haut, l'onglet ne grandit pas d'un
   pixel : le trait s'epaissit vers l'interieur. */
.diagnostic-viewer-nav__item.is-vue,
.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link.is-active {
    border-width: 2px;
}

/* Un trait plus epais a besoin d'un peu moins d'opacite pour peser autant :
   sans cela l'onglet ouvert paraissait cerne. */
.diagnostic-viewer-nav__item.is-vue {
    border-color: rgba(var(--slate-light-rgb), 0.68);
}

.diagnostic-viewer-nav__item.is-vue.is-partage-partiel {
    border-color: rgba(var(--share-line-rgb), 0.75);
}

.diagnostic-viewer-nav__item.is-vue.is-partage-total {
    border-color: rgba(var(--share-line-rgb), 0.90);
}

/* L'onglet regarde garde la couleur de son etat, y compris celle de l'acquis :
   c'est son trait qui s'epaissit, pas sa teinte qui change. */
.diagnostic-viewer-nav__item.is-vue.is-achat {
    border-color: rgba(var(--achat-line-rgb), 0.92);
}

.diagnostic-viewer-nav__item.is-vue .diagnostic-viewer-nav__link,
.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link.is-active {
    color: rgb(var(--white-rgb));
}

/* --- L'INTERRUPTEUR SE CENTRE VRAIMENT ---------------------------------
   `.partage-interrupteur` est un `<label>`, et une regle generique donne huit
   pixels de marge basse a tous les labels. Or `align-self: center` centre la
   boite MARGE COMPRISE : l'element visible remontait donc de la moitie de
   cette marge, soit les quatre pixels qu'on mesurait. On annule la marge ici
   seulement ; ailleurs elle reste utile. */
.diagnostic-viewer-nav__item .partage-interrupteur {
    margin: 0;
    align-self: center;
}

/* --- Le survol : il souleve, il ne repeint pas ------------------------- */
.diagnostic-viewer-nav__item:hover,
.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-viewer-nav__item,
    .diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link {
        transition: none;
    }
    .diagnostic-viewer-nav__item:hover,
    .diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link:hover {
        transform: none;
    }
}

/* =========================================================================
   LA LIGNE D'ACTIONS D'UNE SECTION

   Ordre de lecture, de gauche a droite : ce qu'on FAIT d'abord, ce qu'on
   REGLE ensuite, et l'aide en dernier.

       Montrer     l'action, elle ouvre la section chez le client
       Partager    l'intitule de ce que regle l'interrupteur
       [switch]    le reglage lui-meme
       ?           l'aide, au bout, parce qu'on ne la cherche qu'en cas de doute

   L'ordre est pose en CSS et non dans le gabarit : les trois blocs sont
   produits a des endroits differents de la vue, les reordonner dans le HTML
   demanderait de deplacer des morceaux entre eux.
   ========================================================================= */

.diagnostic-section-head__actions .consultation-section-share__form {
    order: 1;
}

.diagnostic-section-head__actions .partage-interrupteur {
    order: 2;

    /* L'INTITULE PASSE A GAUCHE. `row-reverse` plutot qu'un deplacement dans
       le gabarit : c'est le meme label qui sert ailleurs avec l'ordre inverse,
       et on ne veut le changer QUE dans cette ligne. */
    flex-direction: row-reverse;

    /* `.partage-interrupteur` est un `<label>`, et une regle generique donne
       huit pixels de marge basse a tous les labels. Comme la ligne aligne ses
       blocs sur leur centre, c'est la boite MARGE COMPRISE qui se centre : le
       bloc visible remontait de quatre pixels, et l'aide ne s'alignait plus
       avec lui. */
    margin: 0;
    align-self: center;
}

.diagnostic-section-head__actions .help-trigger {
    order: 3;
}

/* =========================================================================
   « SYNTHESE EXPERTE » N'EST PAS DU MEME ORDRE

   Les autres onglets repondent tous a une seule question : qu'est-ce que le
   client voit ? Leur fond dit ce qui est partage, leur interrupteur le regle.
   Celui-ci ne participe pas a cette question : il n'a pas d'interrupteur, il
   ne se partage pas, il est la lecture du praticien.

   Mais ce reste UN ONGLET COMME LES AUTRES : il ouvre une page du meme
   visualiseur, et cette page renvoie elle-meme vers les suivantes. Le traiter
   en objet a part, sans fond et cerne de pointilles, le sortait d'une rangee a
   laquelle il appartient.

   IL GARDE DONC LA FORME COMMUNE, et se distingue par le peu qu'il faut :

     pas d'interrupteur    il n'y en a pas a montrer, et cette absence se voit
                           d'elle-meme dans une rangee ou tous les autres en
                           portent un ;
     un fond plus sobre    une nuance en dessous des autres, parce que son fond
                           ne dit rien du partage, la ou celui des autres si ;
     un ecart              quelques pixels le separent du groupe, assez pour
                           qu'on lise deux choses, pas assez pour qu'on lise
                           deux familles.

   La SELECTION est marquee comme partout ailleurs, par l'epaisseur du trait.
   ========================================================================= */
/* LA TEINTE DE LA LECTURE, EN CYAN.
   Cet onglet portait le violet, celui de la consultation. Or le violet dit
   deja autre chose dans cet ecran : le moment ou le praticien et son client
   regardent ensemble, la banniere active et le bouton qui l'ouvre. Le meme
   violet pour « ce qu'on lit » et pour « ce qu'on ouvre » demandait au
   lecteur de deviner lequel des deux on lui montre.

   Il prend donc le cyan, comme les pastilles de « Demande du client » : les
   deux servent a CHOISIR ce qu'on regarde, et se repondent maintenant.

   La FORME reste commune : meme fond, meme coin, meme epaisseur a la
   selection. Seule la teinte le distingue, ce qui suffit sans le sortir de la
   rangee. */
.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link {
    background: rgba(var(--cyan-rgb), 0.13);
    background-clip: padding-box;
    border-color: rgba(var(--cyan-rgb), 0.34);
    margin-right: 6px;
}

.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link:hover {
    border-color: rgba(var(--cyan-rgb), 0.48);
}

.diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link.is-active {
    border-width: 2px;
    border-color: rgba(var(--cyan-rgb), 0.85);
    background: rgba(var(--cyan-rgb), 0.20);
    color: rgb(var(--white-rgb));
}

/* --- LE NOM DU CLIENT SE LIT EN ENTIER -------------------------------
   Il etait coupe par des points de suspension. La raison ecrite ici etait le
   calage de 43 px des deux boutons de commande, que la hauteur de cette colonne
   aurait desaligne. Or ce calage N'EXISTE PLUS : le bouton dore est passe dans
   le panneau de partage et son decalage a ete retire (`margin-top: 0`, plus
   haut dans ce fichier). La contrainte est tombee, la troncature est restee.

   Mesure a 1280 px, avec un nom de quarante-quatre caracteres :
     coupe    titre 32 px, bandeau 294, boutons a 401 et 401
     entier   titre 64 px, bandeau 309, boutons a 417 et 417
   Les deux boutons descendent ENSEMBLE : ils restent alignes, le bandeau gagne
   quinze pixels, et rien ne deborde. Un nom se lit, il ne se devine pas au
   survol.

   `overflow-wrap: anywhere` pour le cas ou un seul mot serait plus large que la
   colonne : un nom compose sans espace ne doit pas sortir du cadre. */
.diagnostic-viewer-topbar__client .page-header__title {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* =========================================================================
   PARTAGER ET ARRETER : UN EMPLACEMENT, DEUX GESTES

   Ils portent sur la meme chose, en sens inverse. Poses cote a cote et de
   meme taille, ils se lisaient comme deux actions de meme poids, alors que
   l'une se fait a chaque consultation et l'autre presque jamais.

   Le vert prend donc toute la place restante, le rouge se reduit a un CARRE :
   sa largeur vaut sa hauteur, et c'est la proportion qui dit lequel on
   cherche. Deux boutons distincts dans une meme boite, et non un bouton a
   deux zones : chacun garde son role, son etat desactive et son intitule pour
   qui ecoute la page.
   ========================================================================= */
.partage-duo {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.partage-duo__principal {
    /* Il prend tout ce qui reste : `1 1 auto` et non une part fixe, pour que
       le carre garde sa forme quelle que soit la largeur de la colonne. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    /* VARIANTE F : le degrade, le bord affirme et la lueur, ici et nulle
       part ailleurs. Ces trois valeurs vivaient dans une surcouche
       `body .partage-duo__principal:not(:disabled)` posee en fin de fichier
       pour battre l'aplat translucide qui se trouvait a cette ligne meme. */
    border: 1px solid rgba(var(--share-line-rgb), 0.50);
    border-radius: 12px;
    background: linear-gradient(135deg, #1A7F50, #104E31);
    box-shadow: 0 8px 18px rgba(26, 127, 80, 0.28);
    color: rgb(var(--white-rgb));
    font-size: 14px;
    padding: 0 12px;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

/* Meme correction que pour le bleu : ce survol reposait l'ANCIEN aplat
   translucide, et effacait donc le degrade F a chaque passage de souris. */
.partage-duo__principal:hover:not(:disabled) {
    border-color: rgba(var(--share-line-rgb), 0.62);
}

.partage-duo__principal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* LE CARRE. `aspect-ratio` plutot qu'une largeur en pixels : la hauteur du
   bouton peut changer avec la langue ou la densite, et le carre doit le
   suivre sans qu'on repasse derriere. `flex: 0 0 auto` l'empeche de s'etirer. */
.partage-duo__arret {
    flex: 0 0 auto;
    aspect-ratio: 1;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--red-rgb), 0.42);
    border-radius: 12px;
    background: rgba(var(--red-rgb), 0.20);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.partage-duo__arret:hover {
    background: rgba(var(--red-rgb), 0.34);
    border-color: rgba(var(--red-rgb), 0.62);
}

.partage-duo__arret[hidden] {
    display: none;
}

/* Le signe d'arret, dessine : un carre plein, la convention du « stop ».
   Une icone tierce couterait une dependance pour un seul glyphe. */
.partage-duo__signe {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: rgba(var(--red-light-rgb), 0.92);
}

/* ======================================================================
   L'ETAT OUVRE LA CARTE, AU-DESSUS DE L'IDENTITE
   ======================================================================
   Il dit ce que cette personne voit EN CE MOMENT : il se lit avant son nom,
   et bien avant les reglages qui le changent. Range dans la zone de partage,
   il se decouvrait en dernier, apres les commandes qui en decident.

   Ses couleurs tenaient a un parent (`.partage-durable.is-published`) qu'il
   n'a plus. Elles sont passees sur lui-meme, et le script pose les memes
   classes aux deux endroits.
   ====================================================================== */
.diagnostic-viewer-topbar__client .partage-durable__etat {
    /* A GAUCHE, la pastille au coin. Il gardait le `flex-end` du temps ou il
       etait epingle en haut a droite de la carte : dans une colonne large, sa
       phrase partait se coller au bord droit, loin du nom qu'elle qualifie. */
    justify-content: flex-start;
    /* Et il revient a la ligne plutot que de deborder : le `nowrap` datait de
       la meme epoque, ou il flottait libre. */
    white-space: normal;
    /* Il annonce, il ne titre pas : l'ecart le detache de ce qui suit, sinon
       il se lisait comme une premiere ligne de l'identite. */
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* --- LES TROIS BLOCS DU BAS SONT DE MEME HAUTEUR ---------------------
   Trois cadres cote a cote qui s'arretent chacun a la hauteur de son contenu
   se lisent comme trois accidents. Ils vont donc tous jusqu'en bas de la
   rangee, leur contenu reste en haut, et ils se repondent.

   L'etirement est demande ICI et non sur la grille entiere : l'identite, sur
   la rangee du dessus, doit garder sa hauteur propre. */
body .viewer-bloc-programmes,
body .diagnostic-viewer-topbar__tools .partage-durable {
    align-self: stretch;
}

[exit 0]

/* ======================================================================
   LA BANDE DU HAUT SE RESSERRE
   ======================================================================
   Elle prenait plus de hauteur que ce qu'elle porte. Sans les cadres, les
   rembourrages interieurs n'ont plus de raison d'etre, et les ecarts entre
   rangees peuvent se reduire sans que rien ne se touche.
   ====================================================================== */
body .diagnostic-viewer-topbar__head {
    row-gap: 14px;
    column-gap: 20px;
    padding: 16px 20px 12px;
}

/* Dans une zone sans cadre, l'intitule et sa commande se suivent de pres :
   c'est leur proximite qui dit qu'ils vont ensemble, faute de bord. */
body .diagnostic-viewer-topbar__tools .viewer-tool-field,
body .diagnostic-viewer-topbar__tools .viewer-tool-stack {
    gap: 6px;
}

body .diagnostic-viewer-topbar__tools .partage-durable {
    gap: 6px;
}

/* Le trait qui separait la seance de la consultation dans son cadre : sans
   cadre, il coupe une colonne au lieu d'y ranger deux choses. */
body .viewer-tool-stack__trait {
    display: none;
}

/* ======================================================================
   LES TROIS DEGRADES FINISSENT SUR LA MEME LIGNE
   ======================================================================
   « Demarrer la consultation », « Partager les resultats » et « Commander des
   programmes » sont les trois gestes qui ferment la bande. Chacun terminait au
   bas de SA pile, donc a trois hauteurs differentes selon ce que sa colonne
   empilait au-dessus : 446, 489 et 441 pixels, mesures a l'ecran.

   Chaque zone va desormais jusqu'en bas de sa rangee, et son dernier geste s'y
   colle. C'est la grille qui decide de la ligne, plus le contenu.

   Les intitules et les selecteurs, eux, restent en haut de leur zone : c'est
   ce qu'on lit avant d'agir, et les trois colonnes les alignent entre elles.
   ====================================================================== */
body .viewer-bloc-seance {
    grid-area: seance;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

body .viewer-bloc-seance .consultation-control,
body .diagnostic-viewer-topbar__tools .partage-durable .partage-duo,
body .viewer-bloc-programmes .diagnostic-viewer-topbar__commande {
    margin-top: auto;
}

/* Le duo n'est pas un enfant direct de la zone : sa pile s'interpose. Sans
   cela, `margin-top: auto` le collait au bas de la PILE, qui s'arretait deux
   pixels avant le bas de la zone.

   Et la pile prend toute la LARGEUR de la zone : celle-ci aligne ses enfants
   sur son debut, donc la pile se reduisait a la largeur de son texte et le
   bouton vert avec elle. Il faisait 208 px dans une colonne de 418. */
body .diagnostic-viewer-topbar__tools .partage-durable > .viewer-tool-stack {
    flex: 1 1 auto;
    align-self: stretch;
}

/* ======================================================================
   LES DEUX SELECTEURS PRENNENT LEUR PLACE
   ======================================================================
   Ils etaient bornes a 250 et 210 px du temps ou leurs colonnes faisaient
   308 : dans une colonne de 418, ils laissaient un vide que rien ne
   justifiait.

   Celui de la date partage sa ligne avec « Ecarter ? », il s'arrete donc
   avant. Celui de la duree est seul sur la sienne et va d'un bord a l'autre,
   comme le bouton vert dessous.
   ====================================================================== */
body .diagnostic-viewer-topbar__picker select {
    max-width: 330px;
}

body .diagnostic-viewer-topbar__tools [data-partage-echeance] {
    max-width: none;
}

/* LA DUREE DESCEND AU RAS DE SON BOUTON. Elle flottait en haut de sa colonne,
   a une demi-hauteur du geste qu'elle regle, pendant que « Demarrer la
   consultation » et « Partager les resultats » se repondaient plus bas. Elle
   rejoint donc la ligne juste au-dessus d'eux. */
body .diagnostic-viewer-topbar__tools .partage-durable [data-partage-echeance] {
    margin-top: auto;
}

/* ======================================================================
   UN COMPTEUR QUI N'EST PAS UN BOUTON
   ======================================================================
   Il a la taille et le cadre des commandes qui l'entourent, parce qu'il tient
   leur ligne, mais il ne se clique pas : il ne porte donc ni relief ni
   couleur pleine. Garni, son cadre s'affirme, ce qui suffit a dire qu'il y a
   quelque chose a envoyer.
   ====================================================================== */
.viewer-compteur {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--slate-light-rgb), 0.30);
    background: rgba(var(--black-rgb), 0.22);
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
    font-size: 13px;
    text-align: center;
}

.viewer-compteur.is-garni {
    border-style: solid;
    border-color: rgba(var(--teinte-or), 0.34);
    background: rgba(var(--teinte-or), 0.08);
    color: rgba(253, 224, 171, 0.92);
}

/* Un bouton qu'on ne peut pas actionner doit le dire, sans quoi on clique et
   rien ne se passe. */
body .partage-duo__principal[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

/* ======================================================================
   SUR ECRAN ETROIT, LE MOT REPASSE EN COLONNE
   ======================================================================
   L'intitule et son bouton de cote coutent 152 px de largeur. Dans une colonne
   de 306, il n'en restait que 139 au champ, soit une quinzaine de caracteres
   par ligne. De haut en bas, le champ retrouve toute la largeur.
   ====================================================================== */
@media (max-width: 900px) {
    body .viewer-note-client {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* TROIS ELEMENTS, DEUX LIGNES. L'intitule, l'envoi et le retrait ne
       tiennent pas cote a cote dans 306 px : le retrait sortait du cadre. Le
       titre prend sa ligne, les deux gestes partagent la suivante. */
    body .viewer-note-client__cote {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
    }

    body .viewer-note-client__cote .viewer-tool-field__label {
        flex: 1 1 100%;
    }

    body .viewer-note-client__cote .diagnostic-viewer-topbar__note {
        flex: 0 1 auto;
    }

    body .viewer-note-client__champ {
        width: 100%;
    }
}

/* ======================================================================
   SUR TELEPHONE, LA RANGEE DEVIENT UNE PILE
   ======================================================================
   Sept elements sur une rangee, dans 306 px de large : ils passaient a la
   ligne n'importe ou, et l'intitule se retrouvait a cote d'un onglet plutot
   qu'au-dessus de ce qu'il annonce.

   L'ordre du gabarit est deja le bon, il suffit de le lire de haut en bas :
   ce que le client garde, tout le test, la synthese, puis chaque onglet.
   ====================================================================== */
@media (max-width: 900px) {
    /* La rangee elle-meme passe en colonne : sans cela, l'intitule et les
       onglets restaient cote a cote, chacun dans la moitie de la largeur. */
    body .diagnostic-viewer-nav {
        flex-direction: column;
        align-items: stretch;
    }

    body .diagnostic-viewer-nav__intitule {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 10px;
    }

    /* Il ne se centre plus : dans une pile, chaque ligne part du meme bord. */
    /* La grille de quatre colonnes n'a plus de sens ici : une seule. */
    body .diagnostic-viewer-nav__panel,
    body .diagnostic-viewer-topbar__nav--count-4 .diagnostic-viewer-nav__panel {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        grid-template-columns: none;
    }

    /* Chacun prend la ligne : un onglet large de son texte au milieu d'une
       colonne etroite semble inacheve, et la cible est plus facile au pouce. */
    body .diagnostic-viewer-nav__panel > .diagnostic-viewer-nav__link,
    body .diagnostic-viewer-nav__item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }
}

/* ======================================================================
   UN ONGLET FERME
   ======================================================================
   Il annonce sans ouvrir. Le lien est remplace par un simple texte, donc
   rien n'est cliquable et rien n'est focalisable : le cadenas ne fait que
   dire a l'oeil ce que le balisage dit deja au clavier et au lecteur
   d'ecran.

   Le poids `body ...` reprend celui des regles de hauteur ci-dessus, sinon
   la couleur du lien ordinaire l'emporterait.
   ====================================================================== */
body .diagnostic-viewer-nav__link--ferme {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: not-allowed;
    color: rgba(var(--white-rgb), 0.34);
    opacity: 0.72;
}

body .diagnostic-viewer-nav__link--ferme:hover {
    color: rgba(var(--white-rgb), 0.34);
    background: none;
}

.diagnostic-viewer-nav__cadenas {
    display: inline-flex;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.diagnostic-viewer-nav__cadenas svg {
    width: 100%;
    height: 100%;
}

/* L'onglet ferme ne prend pas la place reservee a l'interrupteur de partage,
   il n'en a pas : sans cela il flottait dans un creux de quatorze pixels. */
body .diagnostic-viewer-nav__item.is-ferme {
    padding-right: 14px;
}

/* Pour le lecteur d'ecran seulement : le cadenas est un dessin, il ne dit
   rien tout seul. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ======================================================================
   « TOUT LE TEST » PREND LA BOITE DES ONGLETS
   ======================================================================
   Il porte deja leurs classes, donc il herite de leur forme sans rien
   recopier. Restent deux differences, qui viennent de ce qu'il n'est pas
   un onglet : son intitule n'est pas un lien, et il vit hors de la rangee.
   ====================================================================== */

/* Le mot n'est pas cliquable ici : il nomme la boite, il ne mene nulle part.
   Sans cela il gardait la couleur et le survol d'un lien, et invitait a un
   clic qui n'aurait rien fait. */
body .diagnostic-viewer-nav__item--tout .diagnostic-viewer-nav__link {
    cursor: default;
    color: rgba(var(--white-rgb), 0.78);
}

body .diagnostic-viewer-nav__item--tout .diagnostic-viewer-nav__link:hover {
    background: none;
    color: rgba(var(--white-rgb), 0.78);
}

/* Hors de la rangee, il se cale seul sous l'intitule. */
body .diagnostic-viewer-nav__item--tout {
    align-self: flex-start;
}

/* ======================================================================
   COTE CLIENT : LE MOT REMPLIT LA BANDE, LES ONGLETS PARTENT DE LA GAUCHE
   ======================================================================
   La bande du haut est construite pour le praticien : son identite a
   gauche, et a droite tout ce qui decide de ce qu'on lui accorde. Un
   client n'a rien de tout cela, donc la moitie droite restait vide,
   pendant que le mot qu'on lui adresse s'etalait plus bas sur toute la
   largeur, juste avant les onglets.

   Le mot prend cette place : c'est la premiere chose a lire, et elle se
   lit maintenant a cote de son nom plutot qu'apres. La zone qu'il occupe
   est celle des outils, qui n'existent pas ici.
   ====================================================================== */
body .viewer-note-praticien {
    /* La zone « mot », celle qu'occupe deja la note cote praticien : la bande
       n'a pas de zone « tools », et un nom inconnu cree une zone implicite qui
       renvoie l'element a la rangee suivante.

       ELLE RESTE DANS SA ZONE. J'avais essaye de lui faire prendre toutes les
       rangees pour combler le vide sous elle : ca deplacait le selecteur de
       resultat, qui vit dans la rangee suivante et se retrouvait pousse en
       haut, a cote du bouton d'aide. Le vide est le moindre des deux maux. */
    grid-area: mot;
    align-self: stretch;
    min-width: 0;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--blue-soft-rgb), 0.22);
    border-left: 3px solid rgba(var(--blue-soft-rgb), 0.62);
    background: rgba(var(--blue-soft-rgb), 0.07);
}

.viewer-note-praticien__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--blue-soft-rgb), 0.86);
    margin-bottom: 6px;
}

.viewer-note-praticien__texte {
    /* Les retours a la ligne du praticien sont rendus ici, pas par des balises :
       le bloc est reecrit en texte pur par le sondage. `pre-line` honore les
       sauts et replie les espaces en trop. */
    white-space: pre-line;
    margin: 0;
    line-height: 1.55;
    color: rgba(var(--white-rgb), 0.90);
}

/* LES ONGLETS PARTENT DE LA GAUCHE.
   Centres, ils flottaient au milieu d'une rangee qu'ils ne remplissent
   pas : quatre pages sur un bandeau prevu pour huit. Et la grille a deux
   colonnes, utile quand chaque onglet porte son interrupteur, les empilait
   en carre alors qu'ici ils n'en portent aucun. */
body .diagnostic-viewer-topbar__nav--lecture-client .diagnostic-viewer-nav__panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-template-columns: none;
}

/* ======================================================================
   PENDANT UNE SEANCE, LA SECTION MONTREE VIT SUR LE PARCOURS
   ======================================================================
   Le bandeau remplace la copie, il ne s'ajoute pas a elle. Il dit trois
   choses dans l'ordre ou on se les demande : ce qui se passe, pourquoi
   cette page ne montre rien ici, et ou aller.
   ====================================================================== */
.viewer-en-seance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    background: rgba(var(--portal-accent-rgb), 0.08);
}

.viewer-en-seance__titre {
    font-size: 17px;
    font-weight: 700;
    color: rgba(var(--white-rgb), 0.96);
}

.viewer-en-seance__texte {
    margin: 0;
    max-width: 68ch;
    line-height: 1.55;
    color: rgba(var(--white-rgb), 0.76);
}

.viewer-en-seance__lien {
    margin-top: 4px;
}

/* ======================================================================
   SUR SES PROPRES RESULTATS, LE MOT DESCEND JUSQU'AU SELECTEUR
   ======================================================================
   La bande est batie pour le praticien : identite a gauche, mot a droite,
   puis une rangee de commandes. Sur ses propres resultats ces commandes
   n'existent pas, et le selecteur de resultat, qui n'a pas de zone nommee,
   se placait tout seul dans une rangee implicite. Le mot, cale sur la seule
   rangee du haut, s'arretait donc bien avant lui.

   On nomme la place du selecteur, et le mot prend les deux rangees. Les
   deux colonnes sont alors deterministes : plus rien ne se replace.
   ====================================================================== */
/* SEULE LA PILE DU SELECTEUR est nommee : le bloc des programmes en est une
   aussi, et la regle les envoyait tous les deux dans la meme case, l'un
   par-dessus l'autre. */
.diagnostic-viewer-topbar__head--soi .viewer-tool-stack:not(.viewer-bloc-programmes) {
    grid-area: seance;
}

/* LE MOT S'ETEND EN LONGUEUR, PAS EN HAUTEUR. Il occupe sa rangee jusqu'au
   bord droit : c'est une phrase, elle se lit sur la largeur. Etire en
   colonne, il devenait un panneau etroit et haut, avec des lignes courtes et
   du vide dessous.

   La rangee du dessous reste aux commandes : le selecteur a gauche, les
   programmes a droite quand il y en a. */
.diagnostic-viewer-topbar__head--soi .viewer-note-praticien {
    grid-column: 2 / -1;
    grid-row: 1;
}

/* LES PROGRAMMES PRENNENT LEUR LIGNE, comme le mot au-dessus : l'intitule
   ouvre, puis le compte et la commande se repondent sur la meme ligne, la
   commande a droite. Tasses dans une colonne, les trois s'empilaient en
   hauteur alors que la rangee etait vide a leur gauche.

   Uniquement sur SES resultats : ailleurs, cette rangee porte la seance et
   le partage, et le bloc doit leur laisser leurs colonnes. */
.diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes {
    grid-column: 2 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes .viewer-tool-field__label {
    flex: 1 0 100%;
}

/* Le compte se contente de la place qui reste : une largeur pleine, heritee
   de la disposition en colonne, renvoyait la commande a la ligne suivante. */
.diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes .viewer-compteur {
    flex: 3 1 240px;
    width: auto;
    min-width: 0;
}

/* La commande garde sa taille. Elle est batie pour une colonne, donc large
   de cent pour cent : sur une ligne, cette largeur la renvoyait a la suivante
   quoi qu'on demande a `flex`.

   ELLE PARTAGE LA LIGNE, OU LA PREND ENTIERE. Avec une taille figee, elle se
   retrouvait seule et calee a droite des que la place manquait, sous un compte
   qui, lui, tenait toute la largeur : deux poids, deux mesures pour deux
   elements qui vont ensemble. Une base commune les fait plier au meme moment
   et remplir chacun leur ligne. */
.diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes
    .diagnostic-viewer-topbar__commande {
    flex: 1 1 240px;
    width: auto;
    margin-left: 0;
}

/* LE MOT S'OUVRE SUR TROIS LIGNES. C'est la hauteur d'une consigne courte,
   celle qu'on ecrit le plus souvent ; au-dela il s'etend, il n'est pas
   coupe. Quatre lignes reservees laissaient un blanc sous la plupart des
   mots. */
.diagnostic-viewer-topbar__head--soi .viewer-note-praticien__texte {
    min-height: calc(3 * 1.55em);
}

/* ======================================================================
   LES PROGRAMMES QUAND LA LIGNE SE RESSERRE
   ======================================================================
   Sur une ligne large, le compte et la commande se repondent. Quand la
   place manque, la commande passait a la ligne suivante et s'y retrouvait
   seule, calee a droite : un bouton isole sous un champ pleine largeur se
   lit comme une erreur de mise en page.

   Sous 900 px la bande repasse en colonne ; le bloc suit, et ses deux
   elements prennent chacun leur ligne entiere. Au-dessus ils tiennent
   cote a cote sans se serrer.
   ====================================================================== */
@media (max-width: 900px) {
    /* SOUS 900 PX, LE BLOC REDEVIENT UNE PILE SIMPLE.
       
       La bande n'a plus qu'une colonne : mes placements visaient encore la
       deuxieme, une case qui n'existe pas, et le bloc se posait hors de la
       carte. Ils reprennent la largeur entiere.
       
       Et les trois elements s'empilent. Chacun reprend une largeur normale :
       les valeurs de `flex` heritees de la disposition en ligne (une base de
       cent pour cent, une croissance) ne veulent plus rien dire ici et
       faisaient deborder le compte hors du cadre. */
    /* L'ORDRE COMPTE ICI PLUS QU'AILLEURS. Sur un ecran etroit on ne voit
       qu'une chose a la fois : d'abord qui c'est, puis quel resultat on
       regarde, puis le mot qui dit ou porter l'attention, et enfin ce qu'on
       peut commander.

       Sans ces rangees explicites, le bloc des programmes se placait tout
       seul dans la premiere case libre et passait devant le selecteur. */
    .diagnostic-viewer-topbar__head--soi .diagnostic-viewer-topbar__client {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .diagnostic-viewer-topbar__head--soi .viewer-tool-stack:not(.viewer-bloc-programmes) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Le mot passe AVANT les programmes : il dit sur quoi porter l'attention,
       et une consigne se lit avant de commander. */
    .diagnostic-viewer-topbar__head--soi .viewer-note-praticien {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* MEME POIDS QUE LES REGLES DU GRAND ECRAN. Une requete media n'ajoute
       aucune specificite : ecrites en `> *`, ces valeurs pesaient moins que
       les `.viewer-compteur` et `.diagnostic-viewer-topbar__commande` d'au
       dessus, et ne s'appliquaient pas. */
    .diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes .viewer-tool-field__label,
    .diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes .viewer-compteur,
    .diagnostic-viewer-topbar__head--soi .viewer-bloc-programmes
        .diagnostic-viewer-topbar__commande {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

/* ======================================================================
   LE CADRE DU MOT, QUAND IL N'Y A PAS ENCORE DE MOT
   ======================================================================
   Il garde sa place : c'est elle qui dit ou le mot se lira. Mais il ne doit
   pas se faire passer pour un mot, d'ou le pointille et le gris.
   ====================================================================== */
.viewer-note-praticien.is-vide {
    border-style: dashed;
    border-left-style: dashed;
    background: rgba(var(--blue-soft-rgb), 0.03);
}

.viewer-note-praticien__texte--vide {
    color: rgba(var(--white-rgb), 0.44);
    font-style: italic;
}

/* Le meme geste pour les deux boutons qui l'avaient perdu : la note et la
   mise a jour du partage redeclaraient leur propre degrade au survol, a
   l'identique, donc rien ne se passait. */
/*
 * UN SELECTEUR ORPHELIN, ET LE GESTE DISPARAISSAIT.
 *
 * `body .…__note` figurait ici SANS `:hover`, reste d'une regle voisine
 * supprimee dont la virgule est restee. Le bouton bleu portait donc le
 * pixel et les huit pour cent EN PERMANENCE : il etait deja leve et deja
 * eclairci, et le survol ne pouvait plus rien lui ajouter.
 */
body .diagnostic-viewer-topbar__note:hover,
body .partage-duo__principal:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
   L'INTERRUPTEUR DE LA SECONDE ECHELLE (experimental, Admin seul)
   -------------------------------------------------------------------------

   Il vit dans la case « Temps de traitement de l'information », sous le
   chiffre. Il ne modifie aucune donnee : il relit l'abscisse de zero a l'age
   de la personne. Il est donc dessine plus discret que le chiffre au-dessus,
   pour qu'on ne le prenne pas pour un reglage du resultat.

   La case native est masquee mais reste FOCALISABLE (`opacity: 0` sur place,
   pas `display: none`) : au clavier, le contour se pose sur la piste.
   ------------------------------------------------------------------------- */

.echelle-age {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    /* Un filet, pas un cadre : la case a deja le sien. */
    padding-top: 9px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    cursor: pointer;
    position: relative;
}

.echelle-age__case {
    position: absolute;
    width: 30px;
    height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.echelle-age__piste {
    flex: 0 0 auto;
    width: 30px;
    height: 18px;
    border-radius: 9px;
    background: rgba(var(--white-rgb), 0.12);
    border: 1px solid rgba(var(--white-rgb), 0.14);
    position: relative;
    transition: background .16s ease, border-color .16s ease;
}

.echelle-age__piste::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--slate-light-rgb));
    transition: transform .16s ease, background .16s ease;
}

.echelle-age__case:checked + .echelle-age__piste {
    background: rgba(var(--blue-rgb), 0.42);
    border-color: rgba(var(--blue-rgb), 0.62);
}

.echelle-age__case:checked + .echelle-age__piste::after {
    transform: translateX(12px);
    background: var(--white);
}

.echelle-age__case:focus-visible + .echelle-age__piste {
    outline: 2px solid rgba(var(--portal-accent-rgb), 0.75);
    outline-offset: 2px;
}

.echelle-age__texte {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(var(--ink-300-rgb), 0.82);
}


/* L'appui, le geste inverse du survol : le bouton revient au sol et perd les
   huit pour cent que le survol lui donnait. Voir lk.css pour le raisonnement.
   Ce bloc ferme le fichier, donc il passe apres tous les survols. */
body .diagnostic-viewer-topbar__tools .diagnostic-viewer-tool-btn:active,
body .diagnostic-viewer-topbar__tools [data-partage-publier]:active,
body .diagnostic-viewer-topbar__commande:active,
body .diagnostic-viewer-topbar__note:active,
body .partage-duo__principal:active {
    transform: translateY(0);
    filter: brightness(0.92);
}