/* ===== Expert consultation structured points ===== */
.expert-consultation-card__intro {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.30);
    border: 1px dashed rgba(var(--blue-soft-rgb), 0.22);
    color: rgba(var(--ink-300-rgb), 0.86);
    font-size: 13px;
    line-height: 1.45;
}

.expert-profile-info > summary {
    cursor: pointer;
    user-select: none;
}

.expert-profile-info > summary:hover {
    opacity: 0.9;
}
/* `.expert-consultation-points` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.1300 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.expert-consultation-point {
    display: grid;
    gap: 10px;
    text-decoration: none;
}

.expert-consultation-point--clickable {
    position: relative;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.expert-consultation-point--clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--blue-soft-rgb), 0.28);
    background: rgba(var(--slate-rgb), 0.48);
    box-shadow: 0 12px 24px rgba(var(--black-rgb), 0.22),
        inset 0 1px 0 rgba(var(--white-rgb), 0.07);
}

.expert-consultation-point--clickable::after {
    content: "↗";
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(var(--couleur-accent-doux-rgb), 0.52);
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.expert-consultation-point--clickable:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.expert-consultation-point__source {
    display: flex;
    align-items: center;
    gap: 5px 7px;
    flex-wrap: wrap;
    padding-right: 18px;
}

.expert-consultation-point__source-label {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(var(--amber-deep-rgb), 0.13);
    border: 1px solid rgba(var(--amber-deep-rgb), 0.24);
    color: rgba(var(--amber-pale-rgb), 0.94);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.expert-consultation-point__source strong {
    flex: 0 0 100%;
    min-width: 0;
    color: var(--ink-50);
    font-size: 14px;
    line-height: 1.25;
    text-wrap: pretty;
}

.expert-consultation-point__source-meta {
    color: rgba(var(--ink-300-rgb), 0.70);
    font-size: 12px;
    line-height: 1.25;
}

.expert-consultation-point__block {
    display: grid;
    gap: 4px;
}

.expert-consultation-point__block span {
    color: rgba(var(--blue-soft-rgb), 0.82);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.expert-consultation-point__block p {
    margin: 0;
    color: rgba(var(--ink-200-rgb), 0.94);
    font-size: 14px;
    line-height: 1.45;
}

.expert-consultation-point__block--check {
    padding-top: 8px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-consultation-point__block--check span {
    color: rgba(var(--violet-soft-rgb), 0.86);
}

.expert-consultation-point--clickable[data-tooltip] {
    overflow: visible;
}

.expert-consultation-point--clickable[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    max-width: min(260px, calc(100vw - 32px));
    width: max-content;

    background: rgba(var(--slate-rgb), 0.96);
    color: var(--white);
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;

    opacity: 0;
    pointer-events: none;
    transition: 0.18s ease;
    z-index: 500;
    box-shadow: 0 6px 20px rgba(var(--black-rgb), 0.3);
}

.expert-consultation-point--clickable[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.expert-consultation-point__context-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(var(--blue-soft-rgb), 0.22);
    background: rgba(var(--slate-rgb), 0.22);
    color: rgba(var(--ink-300-rgb), 0.82);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .expert-consultation-points {
        grid-template-columns: 1fr;
    }
}

/* ===== Expert screen ===== */

.expert-screen {
    display: grid;
    gap: 18px;
}

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

.expert-grid--overview .expert-section-card {
    padding: 14px 12px;
}

.expert-grid--overview .expert-eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.07em;    
}

.expert-grid--overview .expert-section-card h3 {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.18;
}

.expert-grid--overview .expert-chip-list {
    gap: 8px;
}

.expert-grid--overview .expert-chip {
    border-radius: 12px;
}
/* CES 2 REGLES ETAIENT DECLAREES DEUX FOIS.

   Ce premier jeu etait entierement reecrit plus bas (l.1200).
   A selecteur et poids egaux, la derniere ecrite gagne : rien de ce qui
   vivait ici ne s'appliquait, et le lire donnait une fausse idee de ce
   que l'ecran fait.

     `.expert-grid--overview .expert-chip strong`
     `.expert-grid--overview .expert-chip span` */

.expert-grid--overview .expert-chip__reason {
    margin-top: 3px;
}

.expert-grid--overview .expert-section-card h3 {
    text-wrap: balance;
}

.expert-grid--overview .expert-chip strong {
    text-wrap: pretty;
}
.expert-chip--clickable {
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.expert-chip--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(var(--black-rgb), 0.24),
        inset 0 1px 0 rgba(var(--white-rgb), 0.08);
}

.expert-chip--clickable::after {
    content: "↗";
    position: absolute;
    top: 8px;
    right: 9px;
    color: rgba(var(--couleur-accent-doux-rgb), 0.52);
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.expert-chip--clickable:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.expert-chip--clickable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--blue-pale-rgb), 0.42),
        0 12px 24px rgba(var(--black-rgb), 0.24);
}

.expert-chip--clickable[data-tooltip] {
    overflow: visible;
}

.expert-chip--clickable[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;

    /* По умолчанию подсказка показывается сверху */
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    max-width: min(260px, calc(100vw - 32px));
    width: max-content;

    background: rgba(var(--slate-rgb), 0.96);
    color: var(--white);

    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;

    opacity: 0;
    pointer-events: none;
    transition: 0.18s ease;
    z-index: 500;

    box-shadow: 0 6px 20px rgba(var(--black-rgb), 0.3);
}

/* Для верхних карточек в скролл-блоке показываем подсказку вниз,
   чтобы её не обрезало верхней границей списка */
.expert-section-card--scroll .expert-chip-list > .expert-chip--clickable:nth-child(-n + 2)::before {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}

.expert-chip--clickable[data-tooltip]:hover {
    z-index: 120;
}

.expert-chip--clickable[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.expert-section-card--scroll .expert-chip-list > .expert-chip--clickable:nth-child(-n + 2):hover::before {
    transform: translateX(-50%) translateY(0);
}

.expert-chip--clickable[data-tooltip=""]::before {
    display: none;
}
@media (max-width: 1100px) {
    .expert-grid.expert-grid--overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .expert-section-card--scroll {
        height: auto;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .expert-section-card--scroll .expert-chip-list,
    .expert-section-card--scroll .expert-list {
        overflow: visible;
        padding-right: 0;
    }
}

.expert-grid--overview .expert-chip span.expert-chip-submeta,
.expert-chip span.expert-chip-submeta {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 500;
    color: rgba(var(--ink-300-rgb), 0.62);
}

.expert-card--life {
    border: 2px solid rgba(var(--amber-deep-rgb), 0.42);
    background: radial-gradient(circle at top right, rgba(var(--amber-deep-rgb), 0.14), transparent 42%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.34), rgba(var(--slate-rgb), 0.92));
    box-shadow: 0 0 0 1px rgba(var(--amber-deep-rgb), 0.09) inset,
        0 12px 34px rgba(var(--black-rgb), 0.22);    
}

.expert-card--life .expert-chip {
    border-color: rgba(var(--amber-deep-rgb), 0.40);
    background: linear-gradient(135deg, rgba(var(--amber-deep-rgb), 0.14), rgba(var(--slate-rgb), 0.74));
}

.expert-card--resource {
    border: 2px solid rgba(var(--share-bright-rgb), 0.38);
    background: radial-gradient(circle at top right, rgba(var(--share-bright-rgb), 0.13), transparent 42%),
        linear-gradient(180deg, rgba(20, 83, 45, 0.32), rgba(var(--slate-rgb), 0.92));
    box-shadow: 0 0 0 1px rgba(var(--share-bright-rgb), 0.09) inset,
        0 12px 34px rgba(var(--black-rgb), 0.22);
}

.expert-card--resource .expert-chip {
    border-color: rgba(var(--share-bright-rgb), 0.38);
    background: linear-gradient(135deg, rgba(var(--share-bright-rgb), 0.14), rgba(var(--slate-rgb), 0.74));
}

.expert-card--tension {
    border: 2px solid rgba(var(--red-rgb), 0.38);
    background: radial-gradient(circle at top right, rgba(var(--red-rgb), 0.13), transparent 42%),
        linear-gradient(180deg, rgba(var(--red-deep-rgb), 0.34), rgba(var(--slate-rgb), 0.92));
    box-shadow: 0 0 0 1px rgba(var(--red-rgb), 0.09) inset,
        0 12px 34px rgba(var(--black-rgb), 0.22);
}

.expert-card--tension .expert-chip {
    border-color: rgba(var(--red-rgb), 0.38);
    background: linear-gradient(135deg, rgba(var(--red-rgb), 0.14), rgba(var(--slate-rgb), 0.74));
}

.expert-card--psychosomatic {
    border: 2px solid rgba(129, 140, 248, 0.42);
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(49, 46, 129, 0.36), rgba(var(--slate-rgb), 0.92));
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.10) inset,
        0 12px 34px rgba(var(--black-rgb), 0.22);
}

.expert-card--psychosomatic .expert-chip {
    border-color: rgba(129, 140, 248, 0.38);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(var(--slate-rgb), 0.74));
}

.expert-card--courses {
    border: 1px solid rgba(var(--blue-light-rgb), 0.18);
    background: radial-gradient(circle at top right, rgba(var(--blue-light-rgb), 0.08), transparent 36%),
        rgba(var(--slate-mid-rgb), 0.72);
}

.expert-card--courses .expert-chip {
    border-color: rgba(var(--blue-light-rgb), 0.24);
    background: linear-gradient(135deg, rgba(var(--blue-light-rgb), 0.08), rgba(var(--white-rgb), 0.02));
}

.expert-card--courses .expert-chip__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}

.expert-card--courses .expert-chip__topline strong {
    min-width: 0;
}

.expert-course-toggle-form {
    flex: 0 0 auto;
    margin-left: auto;
}

.expert-card--courses .therapy-action-btn {
    white-space: nowrap;
}

.expert-advice-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.expert-advice-section__title {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.expert-advice-section__title h3 {
    margin-bottom: 0;
}

.expert-advice-section__title .muted {
    font-size: 13px;
    line-height: 1.35;
}

.expert-advice-section__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.expert-advice-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-advice-card-btn {
    appearance: none;
    width: 100%;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(var(--white-rgb), 0.10);
    color: rgba(var(--white-rgb), 0.90);

    font: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;

    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.expert-advice-card-btn:hover {
    border-color: rgba(var(--white-rgb), 0.18);
    color: var(--white);
    transform: translateY(-1px);
}

.expert-advice-card-btn--preview {
    background: rgba(var(--blue-rgb), 0.5);
}

.expert-advice-card-btn--preview:hover {
    background: rgba(var(--blue-rgb), 0.966);
}

/* « CHOISIR » REJOINT LE VERT DU PRODUIT, ET C EST UNE CORRECTION DE CONTRASTE.

   Il portait `rgba(19, 172, 27, 0.788)`, un vert ecrit en dur qui n'appartient a
   aucune famille : compose sur la carte il rend rgb(19, 142, 31), et le blanc a
   90 % y mesure 3,76 pour 4,5 exiges. Mesure sur les pixels peints,
   `contraste.py`, theme sombre, neuf occurrences sur l'ecran expert.

   MEME AVEC DU BLANC PLEIN IL NE PASSAIT PAS -- 4,27. Ce n'est donc pas l'encre
   qu'il fallait remonter, c'est le fond qu'il fallait descendre.

   `--share-fill-rgb` est le vert sur lequel le produit pose deja du blanc
   (16, 122, 87). Au repos, voile a 92 % sur la carte : 5,79. Au survol, plein :
   5,32. Le survol ECLAIRCIT toujours, puisque le voile se pose sur une surface
   sombre -- le geste reste le meme, seul le fond change de famille.

   La correction vit dans la feuille du PRODUIT, a la regle fautive
   (`REGLES_CONSTRUCTION.md`, section 6) : l'ecran expert ne charge pas les
   couches retenues sur toutes les pages, et l'ecrire la-bas l'aurait faite
   passer pour reglee. */
.expert-advice-card-btn--select {
    background: rgba(var(--share-fill-rgb), 0.92);
}

.expert-advice-card-btn--select:hover,
.expert-advice-card-btn--select.is-active {
    background: rgb(var(--share-fill-rgb));
}

.expert-advice-card-btn--select.is-active {
    background: rgba(85, 59, 51, 0.78);
}

.expert-card--courses.expert-advice-section {
    overflow: visible;
    padding-bottom: 22px;
}

.expert-advice-candidates-grid {
    margin-bottom: 4px;
}

.expert-advice-head-form {
    margin: 0;
}

.expert-advice-head-btn {
    appearance: none;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(var(--white-rgb), 0.10);
    color: rgba(var(--white-rgb), 0.88);

    font: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;

    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.expert-advice-head-btn--primary {
    background: rgba(19, 172, 27, 0.788);
}

.expert-advice-head-btn--primary:hover {
    background: rgba(23, 207, 32, 0.788);
    border-color: rgba(var(--white-rgb), 0.18);
    color: var(--white);
    transform: translateY(-1px);
}

.expert-advice-head-btn--secondary {
    background: rgba(85, 59, 51, 0.78);
    border-color: rgba(var(--white-rgb), 0.10);
    color: rgba(var(--white-rgb), 0.88);
}

.expert-advice-head-btn--secondary:hover {
    background: rgba(104, 73, 62, 0.88);
    border-color: rgba(var(--white-rgb), 0.18);
    color: var(--white);
    transform: translateY(-1px);
}

.expert-advice-head-btn:disabled,
.expert-advice-head-btn.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.2);
    transform: none;
}

.expert-advice-head-btn:disabled:hover,
.expert-advice-head-btn.is-disabled:hover {
    color: rgba(var(--white-rgb), 0.88);
    transform: none;
}

.expert-advice-section__help {
    flex: 0 0 auto;
}

.expert-advice-section__intro {

    margin: 0;
    color: rgba(var(--ink-200-rgb));
    font-size: 14px;
    line-height: 1.45;
}

body.has-expert-advice-preview-modal {
    overflow: hidden;
}

.expert-advice-preview-modal[hidden] {
    display: none;
}

.expert-advice-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 28px;
}

.expert-advice-preview-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--black-rgb), 0.74);
    backdrop-filter: blur(8px);
}

.expert-advice-preview-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: min(860px, calc(100vh - 56px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(111, 145, 255, 0.16), transparent 34%),
        rgba(var(--slate-mid-rgb), 0.96);
    border: 1px solid rgba(var(--white-rgb), 0.12);
    box-shadow: 0 28px 90px rgba(var(--black-rgb), 0.48),
        inset 0 1px 0 rgba(var(--white-rgb), 0.08);
}

.expert-advice-preview-modal__head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--slate-rgb), 0.28);
}

.expert-advice-preview-modal__eyebrow {
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.expert-advice-preview-modal__title {
    margin: 6px 0 0;
    color: rgba(var(--white-rgb), 0.98);
    font-size: 24px;
    line-height: 1.2;
}

.expert-advice-preview-modal__close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 1px solid rgba(var(--white-rgb), 0.10);
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.06);
    color: rgba(var(--white-rgb), 0.88);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.expert-advice-preview-modal__close:hover {
    background: rgba(var(--white-rgb), 0.11);
    color: var(--white);
}

.expert-advice-preview-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--barre-pouce) var(--barre-piste);
}

.expert-advice-preview-modal__loading,
.expert-advice-preview-modal__empty,
.expert-advice-preview-content__empty {
    padding: 16px;
    border-radius: 16px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--white-rgb), 0.74);
    font-size: 14px;
    line-height: 1.5;
}

.expert-advice-preview-content {
    display: grid;
    gap: 16px;
}

.expert-advice-preview-content__head {
    display: grid;
    gap: 7px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-advice-preview-content__eyebrow {
    color: rgba(var(--blue-soft-rgb), 0.86);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.expert-advice-preview-content__head h3 {
    margin: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-size: 20px;
    line-height: 1.25;
}

.expert-advice-preview-content__head p {
    margin: 0;
    color: rgba(var(--ink-200-rgb), 0.78);
    font-size: 14px;
    line-height: 1.5;
}

.expert-advice-preview-modal .journey-course-advice {
    display: grid;
    gap: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ===== Expert advice preview: course advice cards ===== */

.expert-advice-preview-modal .journey-course-advice {
    --journey-accent-rgb: 242, 190, 99;
    --journey-accent-solid: rgb(var(--teinte-or));

    display: grid;
    gap: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.expert-advice-preview-modal .journey-course-advice__title {
    margin: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-size: 22px;
    line-height: 1.25;
}

.expert-advice-preview-modal .journey-course-advice__intro {
    margin: 0;
    color: rgba(var(--white-rgb), 0.74);
    font-size: 14px;
    line-height: 1.55;
}

.expert-advice-preview-modal .journey-course-advice__groups {
    display: grid;
    gap: 16px;
}

.expert-advice-preview-modal .journey-course-advice-group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-advice-preview-modal .journey-course-advice-group__title {
    margin: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-size: 18px;
    line-height: 1.35;
}

.expert-advice-preview-modal .journey-course-advice-group__meta {
    color: rgba(var(--white-rgb), 0.72);
    font-size: 14px;
    line-height: 1.45;
}

.expert-advice-preview-modal .journey-course-advice-group__meta strong {
    color: rgba(var(--white-rgb), 0.88);
}

.expert-advice-preview-modal .journey-course-advice-themes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.expert-advice-preview-modal .journey-course-advice-theme {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
    box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.02) inset,
        0 8px 20px rgba(var(--black-rgb), 0.10);
}

.expert-advice-preview-modal .journey-course-advice-theme::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(var(--journey-accent-rgb), 0.72);
}

.expert-advice-preview-modal .journey-course-advice-theme__summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
}

.expert-advice-preview-modal .journey-course-advice-theme__summary::-webkit-details-marker {
    display: none;
}

.expert-advice-preview-modal .journey-course-advice-theme__summary-main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.expert-advice-preview-modal .journey-course-advice-theme__title {
    color: rgba(var(--white-rgb), 0.96);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

.expert-advice-preview-modal .journey-course-advice-theme__lead {
    color: rgba(var(--white-rgb), 0.74);
    font-size: 14px;
    line-height: 1.55;
}

.expert-advice-preview-modal .journey-course-advice-theme__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.25;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.06);
    color: rgba(var(--white-rgb), 0.78);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--now {
    color: rgba(var(--couleur-succes-doux-rgb), 0.96);
    background: rgba(var(--share-bright-rgb), 0.13);
    border-color: rgba(var(--share-bright-rgb), 0.24);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--week {
    color: rgba(var(--amber-pale-rgb), 0.96);
    background: rgba(var(--amber-deep-rgb), 0.13);
    border-color: rgba(var(--amber-deep-rgb), 0.24);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--month {
    color: rgba(var(--blue-pale-rgb), 0.96);
    background: rgba(var(--blue-rgb), 0.13);
    border-color: rgba(var(--blue-rgb), 0.24);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--neutral {
    color: rgba(var(--ink-200-rgb), 0.88);
    background: rgba(var(--slate-light-rgb), 0.10);
    border-color: rgba(var(--slate-light-rgb), 0.20);
}

.expert-advice-preview-modal .journey-course-advice-theme__toggle {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    color: rgba(var(--white-rgb), 0.74);
    background: rgba(var(--white-rgb), 0.08);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    border-radius: 999px;
    padding: 6px 10px;
}

.expert-advice-preview-modal .journey-course-advice-theme[open] .journey-course-advice-theme__toggle {
    background: rgba(var(--white-rgb), 0.12);
    color: rgba(var(--white-rgb), 0.94);
}

.expert-advice-preview-modal .journey-course-advice-theme__body {
    padding: 0 18px 16px;
    display: grid;
    gap: 10px;
}

.expert-advice-preview-modal .journey-course-advice-theme__period {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--white-rgb), 0.02);
    border: 1px solid rgba(var(--white-rgb), 0.05);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-label {
    margin-bottom: 6px;
    color: rgba(var(--white-rgb), 0.84);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.expert-advice-preview-modal .journey-course-advice-theme__list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
    color: rgba(var(--ink-200-rgb), 0.88);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .expert-advice-preview-modal .journey-course-advice-themes {
        grid-template-columns: 1fr;
    }
}

body.has-expert-advice-preview-modal footer {
    display: none !important;
}

@media (max-width: 760px) {
    .expert-advice-section__head {
        align-items: stretch;
        flex-direction: column;
    }

    .expert-advice-section__actions {
        justify-content: flex-start;
    }

    .expert-advice-head-btn,
    .expert-advice-head-form {
        width: 100%;
    }

    .expert-advice-head-btn {
        min-height: 34px;
    }

    .expert-advice-section__help {
        width: 42px;
    }
}

.expert-chip-list.expert-advice-candidates-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
    column-gap: 12px;
    align-items: start;
    grid-auto-rows: auto;
}

.expert-chip-list.expert-advice-candidates-grid .expert-chip {
    height: auto;
    min-height: 0;
    align-content: start;
}

.expert-card--courses .expert-advice-candidates-grid .expert-chip.expert-advice-source--brain {
    border-color: rgba(var(--blue-light-rgb), 0.38);
    background: radial-gradient(circle at top right, rgba(var(--blue-light-rgb), 0.12), transparent 42%),
        linear-gradient(135deg, rgba(var(--blue-light-rgb), 0.16), rgba(var(--slate-rgb), 0.58));
}

.expert-card--courses .expert-advice-candidates-grid .expert-chip.expert-advice-source--life {
    border-color: rgba(var(--amber-deep-rgb), 0.40);
    background: radial-gradient(circle at top right, rgba(var(--amber-deep-rgb), 0.13), transparent 42%),
        linear-gradient(135deg, rgba(var(--amber-deep-rgb), 0.16), rgba(var(--slate-rgb), 0.58));
}

.expert-card--courses .expert-advice-candidates-grid .expert-chip.expert-advice-source--tension {
    border-color: rgba(var(--red-rgb), 0.38);
    background: radial-gradient(circle at top right, rgba(var(--red-rgb), 0.12), transparent 42%),
        linear-gradient(135deg, rgba(var(--red-rgb), 0.15), rgba(var(--slate-rgb), 0.58));
}

.expert-card--courses .expert-advice-candidates-grid .expert-chip.expert-advice-source--psychosomatic {
    border-color: rgba(129, 140, 248, 0.42);
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 42%),
        linear-gradient(135deg, rgba(99, 102, 241, 0.17), rgba(var(--slate-rgb), 0.58));
}

.expert-card--courses .expert-advice-candidates-grid .expert-chip.expert-advice-source--neutral {
    border-color: rgba(var(--slate-light-rgb), 0.24);
}

@media (max-width: 1180px) {
    .expert-chip-list.expert-advice-candidates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .expert-chip-list.expert-advice-candidates-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .expert-card--courses .expert-chip__topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .expert-course-toggle-form {
        margin-left: 0;
    }
}

.expert-section-card--scroll {
    height: 680px;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.expert-section-card--scroll .expert-chip-list,
.expert-section-card--scroll .expert-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    padding-bottom: 4px;

    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
}

.expert-card--resource .expert-chip-list {
    margin-bottom: 0;
}

.expert-section-card--scroll .expert-chip-list,
.expert-section-card--scroll .expert-list {
    scrollbar-width: thin;
    scrollbar-color: var(--barre-pouce) var(--barre-piste);
}

.expert-section-card--scroll .expert-chip-list::-webkit-scrollbar,
.expert-section-card--scroll .expert-list::-webkit-scrollbar {
    width: 10px;
}

.expert-section-card--scroll .expert-chip-list::-webkit-scrollbar-track,
.expert-section-card--scroll .expert-list::-webkit-scrollbar-track {
    background: transparent;
}

.expert-section-card--scroll .expert-chip-list::-webkit-scrollbar-thumb,
.expert-section-card--scroll .expert-list::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(var(--white-rgb), 0.18),
        rgba(var(--white-rgb), 0.08)
    );
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.expert-section-card--scroll .expert-chip-list::-webkit-scrollbar-thumb:hover,
.expert-section-card--scroll .expert-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(var(--white-rgb), 0.28),
        rgba(var(--white-rgb), 0.14)
    );
    border: 2px solid transparent;
    background-clip: padding-box;
}

.expert-grid--overview .expert-chip {
    padding: 10px 12px;
    gap: 4px;
}

.expert-grid--overview .expert-chip strong {
    font-size: 15px;
    line-height: 1.28;
}

.expert-grid--overview .expert-chip span {
    font-size: 13px;
    line-height: 1.35;
}

.expert-grid--overview .expert-chip__reason {
    font-size: 12px;
    line-height: 1.42;
    padding-top: 7px;
}

.expert-eyebrow {
    margin-bottom: 8px;
    color: var(--blue-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.expert-picker-card {
    display: grid;
}

.expert-picker-form {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.expert-picker-form__field {
    min-width: 0;
}

.expert-picker-form__field select {
    margin-bottom: 0;
}

.expert-picker-form__action .btn {
    height: 42px;
    white-space: nowrap;
}

.expert-direction-note {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(var(--slate-rgb), 0.30);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    line-height: 1.55;
}

.expert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.expert-section-card {
    margin-bottom: 0;
}

.expert-section-card--wide {
    grid-column: 1 / -1;
}

.expert-consultation-card {
    border: 2px solid rgba(var(--amber-deep-rgb), 0.36);
    background: radial-gradient(circle at top right, rgba(var(--amber-deep-rgb), 0.11), transparent 42%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.22), rgba(var(--slate-mid-rgb), 0.78));
}

.expert-consultation-card .expert-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    display: grid;
    gap: 10px 18px;
}

.expert-consultation-card .expert-list li {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.30);
    border: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-consultation-card__intro {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.30);
    border: 1px dashed rgba(var(--blue-soft-rgb), 0.22);
    color: rgba(var(--ink-300-rgb), 0.86);
    font-size: 13px;
    line-height: 1.45;
}

.expert-consultation-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 14px;
}

.expert-consultation-point {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.34);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-200-rgb), 0.92);
    line-height: 1.45;
}

.expert-section-card__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.expert-section-card h3 {
    margin-bottom: 10px;
    color: var(--ink-50);
}

.expert-lead {
    margin: 0;
    color: rgba(var(--ink-200-rgb), 0.90);
    line-height: 1.65;
}

.expert-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 9px;
    color: rgba(var(--ink-200-rgb), 0.90);
    line-height: 1.55;
}

.expert-chip-list {
    display: grid;
    gap: 10px;
}

.expert-chip {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    font-weight: 400;
}

.expert-chip strong {
    color: var(--ink-50);
    line-height: 1.35;
}

.expert-chip span {
    color: rgba(var(--ink-200-rgb), 0.78);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.expert-chip--danger {
    border-color: rgba(var(--red-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--red-rgb), 0.15), rgba(var(--white-rgb), 0.025));
}

.expert-chip--warning {
    border-color: rgba(var(--amber-deep-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--amber-deep-rgb), 0.14), rgba(var(--white-rgb), 0.025));
}

.expert-chip--safe {
    border-color: rgba(var(--share-bright-rgb), 0.26);
    background: linear-gradient(135deg, rgba(var(--share-bright-rgb), 0.13), rgba(var(--white-rgb), 0.025));
}

.expert-chip--neutral {
    border-color: rgba(var(--slate-light-rgb), 0.22);
}

.expert-section-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.expert-section-link {
    display: grid;
    gap: 7px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--blue-light-rgb), 0.18);
    text-decoration: none;
    color: inherit;
    transition: 0.18s ease;
}

.expert-section-link:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--blue-light-rgb), 0.38);
    background: rgba(var(--blue-light-rgb), 0.10);
}

.expert-section-link strong {
    color: var(--couleur-accent-doux);
}

.expert-section-link span {
    color: rgba(var(--ink-200-rgb), 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.expert-actions {
    margin-top: 16px;
}

.expert-notes-form textarea {
    min-height: 168px;
    margin-bottom: 12px;
}

.expert-notes-form__footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.expert-notes-form__footer .btn {
    flex: 0 0 auto;
}

.expert-future-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--blue-rgb), 0.10);
    border: 1px solid rgba(var(--blue-rgb), 0.18);
    color: var(--blue-pale);
    font-size: 14px;
    line-height: 1.55;
}

.expert-picker-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.expert-direction-form {
    display: grid;
    gap: 8px;
}

/*
 * NI L'UN NI L'AUTRE NE PORTE DE MARGE : C'EST LA GRILLE QUI ESPACE.
 *
 * Le libelle gardait les 8 px de marge basse que le site donne a tout
 * `label`, qui s'ajoutaient aux 8 px d'ecart de la grille. Le selecteur
 * partait donc seize pixels sous son titre, les pastilles huit sous le leur,
 * et les deux rangees ne pouvaient pas s'aligner malgre des titres poses sur
 * la meme ligne.
 */
.expert-direction-form label,
.expert-direction-form select {
    margin-bottom: 0;
}

/* LA MEME HAUTEUR QUE LES PASTILLES D'EN FACE. Le selecteur en faisait 44
   quand elles en font 48, et les deux colonnes finissaient a quatre pixels
   l'une de l'autre. */
.expert-direction-form select {
    height: 48px;
}

.expert-task-panel {
    display: grid;
    /* LE MEME ECART QUE LA COLONNE VOISINE, sans quoi les pastilles partent
       deux pixels plus bas que le selecteur alors que les deux titres sont
       sur la meme ligne. */
    gap: 8px;
}

.expert-task-panel__label {
    color: rgba(var(--white-rgb), 0.92);
    font-weight: 700;
}

.expert-task-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    /* LA HAUTEUR DE L'ONGLET « Synthese experte », relevee a 48 px. */
    min-height: 48px;
}

/*
 * LE DESSIN DES ONGLETS DE LA FICHE, EN CYAN.
 *
 * Releve sur « Synthese experte » plutot que suppose : hauteur 38, rayon 12,
 * texte de 14 px en graisse 400, fond ardoise au repos, bord a la couleur
 * quand c'est actif. Seule la teinte change.
 *
 * Elles etaient des gelules a rayon 999, en graisse 700, hautes de 34 : trois
 * ecarts avec la barre qu'elles surmontent, pour une meme fonction, choisir
 * ce qu'on regarde.
 */
.expert-task-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 14px;

    border-radius: 12px;
    border: 1px solid rgba(var(--slate-light-rgb), 0.20);
    background: rgba(var(--slate-rgb), 0.55);
    /* Apres `background`, que le raccourci reinitialise : sans cette borne, le
       fond passe sous le bord translucide et l'assombrit sur son pourtour. */
    background-clip: padding-box;

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

    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
}

.expert-task-tag:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(var(--cyan-rgb), 0.48);
    color: var(--white);
}

.expert-task-tag:active {
    transform: translateY(0);
    filter: brightness(0.92);
}

.expert-task-tag.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));
}

.expert-task-tag.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(var(--ink-300-rgb), 0.72);
    background: rgba(var(--slate-light-rgb), 0.10);
    border-color: rgba(var(--slate-light-rgb), 0.18);
    box-shadow: none;
    filter: grayscale(0.2);
}

.expert-task-tag.is-disabled::after {
    content: "скоро";
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-300-rgb), 0.72);
    font-size: 11px;
    font-weight: 700;
}

.expert-chip__reason {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-200-rgb), 0.82);
    font-size: 13px;
    line-height: 1.5;
}

/* LA PISTE DE TRAVAIL D UNE CARTE, sous son constat.
   Elle se lit APRES le constat, jamais a sa place : un filet a gauche et un
   libelle en petites capitales la posent en second niveau, comme le bloc du
   meme nom au bloc 1. Elle n'existe que cote praticien. */
.expert-chip__piste {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid rgba(var(--portal-accent-rgb), 0.35);
    color: rgba(var(--ink-300-rgb), 0.78);
    font-size: 12px;
    line-height: 1.5;
}

.expert-chip__piste > span {
    display: block;
    margin-bottom: 2px;
    color: rgba(var(--ink-300-rgb), 0.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.expert-block-note {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--blue-rgb), 0.10);
    border: 1px solid rgba(var(--blue-rgb), 0.18);
    color: rgba(var(--blue-mist-rgb), 0.92);
    font-size: 14px;
    line-height: 1.55;
}

.expert-block-note.expert-block-note--compact {
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(var(--ink-300-rgb), 0.78);
}

.expert-block-note.expert-block-note--footer {
    flex: 0 0 auto;
    margin: 8px 0 0;
    background: rgba(var(--slate-rgb), 0.38);
    border: 1px dashed rgba(var(--blue-soft-rgb), 0.22);
}

.expert-card--resource .expert-block-note--footer {
    box-shadow: none;
}

.expert-chip__secondary {
    display: block;
    margin-top: 8px;
    color: rgba(var(--ink-300-rgb), 0.72);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .expert-picker-layout {
        grid-template-columns: 1fr;
    }

    .expert-task-tags {
        gap: 8px;
    }

    .expert-task-tag {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

@media (max-width: 980px) {
    .expert-picker-form,
    .expert-grid,
    .expert-grid--main {
        grid-template-columns: 1fr;
    }

    .expert-picker-form__action .btn {
        width: 100%;
    }

    .expert-notes-form__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .expert-notes-form__footer .btn {
        width: 100%;
    }
}

.expert-screen {
    gap: 14px;
}

.expert-picker-card {
    gap: 12px;
    padding: 16px 18px;
}

.expert-picker-intro {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-picker-intro .expert-eyebrow {
    margin-bottom: 5px;
}

.expert-picker-intro h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}

.expert-picker-intro p {
    margin: 0;
    color: rgba(var(--ink-200-rgb), 0.82);
    font-size: 14px;
    line-height: 1.45;
}

/* DEUX COLONNES, MAIS SEULEMENT QUAND IL Y A LA PLACE.
   Cette regle etait posee sans condition, apres celle qui ramene la grille a
   une colonne sous 980 px : elle la reecrasait. Le telephone se retrouvait
   donc avec une premiere colonne de 300 px dans 316 px disponibles, et les
   etiquettes de tache debordaient la page de 66 px vers la droite. */
@media (min-width: 981px) {
    .expert-picker-layout {
        grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr);
        gap: 16px;
    }
}

.expert-direction-note--compact {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.38);
    border: 1px dashed rgba(var(--blue-soft-rgb), 0.20);
    font-size: 12px;
    line-height: 1.35;
    color: rgba(var(--ink-300-rgb), 0.82);
}

.expert-direction-note--compact strong {
    color: rgba(var(--couleur-accent-doux-rgb), 0.92);
}

.expert-direction-note--compact .expert-direction-note__text {
    flex-basis: 100%;
    color: rgba(var(--slate-light-rgb), 0.88);
}

/* CE QUI PART CHEZ LE CLIENT, contre le couple qu'on vient de choisir.
   L'interrupteur lui-meme est habille par `diagnostic-viewer.css`, qui le pose
   partout ailleurs : ici on ne regle que sa place et le mot qui l'accompagne. */
.expert-partage-synthese {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(var(--slate-rgb), 0.28);
}

.expert-partage-synthese__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(var(--ink-300-rgb), 0.78);
}

/* CE QUI EST PARTAGE AILLEURS. L'onglet verdit des qu'une synthese est
   accordee, et l'interrupteur ne parle que du couple affiche : cette ligne
   nomme celui qui est parti, et y mene. Elle prend la couleur du partage,
   parce que c'est de partage qu'elle parle. */
.expert-partage-synthese__note--ailleurs {
    flex-basis: 100%;
    color: rgba(var(--share-line-rgb, 74, 222, 128), 0.86);
}

.expert-partage-synthese__note--ailleurs a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.expert-notes-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.expert-notes-card__summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: rgba(var(--slate-mid-rgb), 0.72);
    border-radius: 12px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.expert-notes-card__summary::-webkit-details-marker {
    display: none;
}

.expert-notes-card__summary:hover {
    background: rgba(var(--ink-600-rgb), 0.82);
}

.expert-notes-card__summary .expert-eyebrow {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
}

.expert-notes-card__summary strong {
    color: var(--ink-50);
    font-size: 16px;
    line-height: 1.2;
}

.expert-notes-card__hint {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(var(--blue-rgb), 0.12);
    border: 1px solid rgba(var(--blue-light-rgb), 0.20);
    color: rgba(var(--blue-pale-rgb), 0.86);
    font-size: 12px;
    line-height: 1;
}

.expert-notes-card__summary::after {
    content: "▾";
    color: rgba(var(--ink-300-rgb), 0.72);
    font-size: 16px;
    transition: transform 0.18s ease;
}

.expert-notes-card[open] .expert-notes-card__summary::after {
    transform: rotate(180deg);
}

.expert-notes-card[open] .expert-notes-card__summary {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}

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

.expert-notes-form--compact {
    padding: 14px 16px 16px;
    background: rgba(var(--slate-mid-rgb), 0.62);
}

.expert-notes-form--compact textarea {
    min-height: 132px;
    margin-bottom: 10px;
}

.is-expert-focused {
    position: relative;
    z-index: 40;
    animation: expertFocusPulse 3.6s ease;
}

@keyframes expertFocusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--blue-pale-rgb), 0),
            0 0 0 0 rgba(var(--blue-light-rgb), 0);
        transform: scale(1);
    }

    16% {
        box-shadow: 0 0 0 3px rgba(var(--blue-pale-rgb), 0.75),
            0 0 28px rgba(var(--blue-light-rgb), 0.50);
        transform: scale(1.015);
    }

    70% {
        box-shadow: 0 0 0 2px rgba(var(--blue-pale-rgb), 0.34),
            0 0 18px rgba(var(--blue-light-rgb), 0.24);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--blue-pale-rgb), 0),
            0 0 0 0 rgba(var(--blue-light-rgb), 0);
        transform: scale(1);
    }
}

/* ===== Expert current request notice ===== */

.expert-current-request {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: radial-gradient(circle at top right, rgba(var(--blue-light-rgb), 0.14), transparent 42%),
        rgba(var(--slate-rgb), 0.34);
    border: 1px solid rgba(var(--blue-soft-rgb), 0.20);
}

.expert-current-request__eyebrow {
    color: rgba(var(--blue-soft-rgb), 0.86);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.expert-current-request__main {
    display: grid;
    gap: 4px;
}

.expert-current-request__main span {
    color: rgba(var(--ink-300-rgb), 0.78);
    font-size: 13px;
    line-height: 1.3;
}

.expert-current-request__main strong {
    color: var(--ink-50);
    font-size: 22px;
    line-height: 1.18;
    font-weight: 700;
}

.expert-current-request__text {
    padding-top: 8px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--ink-200-rgb), 0.82);
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Expert advice: specialist text ===== */

/* UNE COLONNE QUI PEUT SE SERRER, PAS UNE COLONNE `auto`.

   Une grille d'une seule colonne implicite prend la taille MIN-CONTENT de ce
   qu'elle contient, et un element de grille porte `min-width: auto` : la piste
   ne descend donc jamais sous le plus large de ses enfants. Sur un telephone,
   la carte des recommandations mesurait 382 px dans un cadre de 338 et sortait
   par la droite -- 18 px de debordement a 390, sans barre ni signe, parce que
   le corps la coupait.

   `minmax(0, 1fr)` dit l'inverse : la piste peut descendre a zero, et c'est au
   contenu de se replier. Rien ne change des que la place existe.

   LES TROIS GRILLES SONT EMBOITEES, et corriger la plus profonde ne suffisait
   pas : l'ecran entier reprenait le debordement a son compte, dix pixels au
   lieu de dix-huit. Une grille implicite est une grille quand meme. */
.expert-screen,
.expert-advice-form,
.expert-generated-recommendations {
    grid-template-columns: minmax(0, 1fr);
}

.expert-advice-form {
    display: grid;
    gap: 18px;
}

.expert-generated-recommendations {
    display: grid;
    gap: 12px;
}

.expert-generated-recommendations__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.expert-generated-recommendations__head h4 {
    margin: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}

.expert-generated-recommendations__head p {
    margin: 5px 0 0;
    color: rgba(var(--ink-200-rgb), 0.72);
    font-size: 13px;
    line-height: 1.45;
}

.expert-generated-recommendations__head > span {
    /* IL SE SERRE PLUTOT QUE DE SORTIR. En `0 0 auto` il gardait sa largeur
       naturelle quoi qu'il arrive : des que la colonne de contenu descend sous
       environ 630 px -- ce que fait le rail du visualiseur a 900 de fenetre --
       il depassait de sa rangee et le corps le coupait, sans barre ni signe.
       Mesure : bord droit a 900,63 pour une rangee qui finit a 866.
       `min-width: 0` est ce qui autorise vraiment le retrecissement : sans lui,
       un element de flex ne descend pas sous la largeur de son contenu. */
    flex: 0 1 auto;
    min-width: 0;
    color: rgba(var(--ink-300-rgb), 0.62);
    font-size: 12px;
    line-height: 1.35;
}

.expert-generated-recommendations {
    padding-top: 18px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
}

.expert-generated-recommendations__empty {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
    color: rgba(var(--ink-200-rgb), 0.72);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .expert-generated-recommendations__head {
        flex-direction: column;
    }

    .expert-generated-recommendations__head > span {
        flex: none;
    }
}

/* ======================================================================
   LE TERME CLINIQUE, EN SECOND NIVEAU
   ======================================================================
   Le titre porte la formulation neutre, qui décrit un état. Le terme clinique
   vient dessous, plus petit et en retrait : c'est une correspondance offerte
   au praticien, pas ce que la fiche affirme. Sa discrétion typographique dit
   exactement ce qu'il est.
   ====================================================================== */
.expert-chip__correspondance {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    letter-spacing: .01em;
    color: rgba(var(--slate-light-rgb), 0.82);
    font-style: italic;
}