/*
 * « CE QUE LE CLIENT LIRA POUR CETTE ZONE » : LA FENETRE, ET SON CONTENU.
 *
 * ELLE EST SERVIE A DEUX PRODUITS depuis le 19/10/2026 : le visualiseur, qui
 * la portait dans `diagnostic-expert.css`, et l'interface de l'Expert, qui
 * vient d'en avoir besoin (ligne 3 du releve Online/Expert).
 *
 * POURQUOI ELLE EST SORTIE DE `diagnostic-expert.css` : cette feuille-la
 * partage huit classes avec celles de l'Expert -- `btn`, `is-active`,
 * `expert-screen`, `expert-consultation-point` parmi elles -- et la servir
 * entiere aurait repeint son ecran.
 *
 * ELLE VIT HORS DE `.vx-bloc`, et c'est pourquoi elle n'est pas servie par
 * `RessourcesExpertController`, qui recadre tout sous ce conteneur : la
 * fenetre est posee a la racine de la page, le prefixe ne l'atteindrait pas.
 *
 * NE RIEN AJOUTER ICI QUI NE SOIT PAS LA FENETRE : son perimetre est la
 * raison d'etre du fichier, et il se verifie d'un `grep`.
 */

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

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

/*
 * LA FENETRE SE POSE DANS LA ZONE DE CONTENU, pas par-dessus les meubles.
 *
 * L'ADMIN, LE 19/10/2026 : « le haut est cache, meme traitement que les
 * autres modales ». La barre du site est `sticky` et mordait sur le titre.
 *
 * LES BORNES EXISTENT DEJA : la cale de l'Expert mesure le rail et la barre a
 * chaque defilement et les publie en variables. Les reprendre evite d'ecrire
 * une hauteur d'en-tete en dur, et le repli `0px / 100vw` garde la fenetre
 * entiere la ou la cale n'est pas chargee -- « Mimexpert », par exemple.
 */
.expert-advice-preview-modal {
    position: fixed;
    top: var(--vx-voile-haut, 0px);
    left: var(--vx-voile-gauche, 0px);
    /*
     * LE VOILE S ANCRE SUR SES QUATRE COTES, il ne se calcule plus.
     *
     * L'ADMIN, LE 20/10/2026 : « Le bas de la modale/flou est rogne ».
     *
     * MESURE SUR LA PAGE REELLE au moment du defaut : `--vx-voile-hauteur`
     * valait 620px et `--vx-voile-haut` n'etait PAS posee. Le voile partait
     * donc de zero (son repli) et s'arretait a 620 sur une fenetre de 674 :
     * CINQUANTE-QUATRE PIXELS non couverts en bas, ou la page restait nette
     * sous une fenetre censee la masquer.
     *
     * LA CAUSE N EST PAS LA VALEUR, C EST LA FORME. Une hauteur calculee a
     * partir de deux variables n'est juste que si les deux sont posees, a
     * jour, et coherentes entre elles. Elles sont ecrites par un autre module
     * (`graphe-en-grand` dans l'Expert, la cale dans le visualiseur), a un
     * autre moment, et rien ne garantit l'accord -- un redimensionnement
     * suffit a les perimer.
     *
     * `right` ET `bottom` A ZERO SUPPRIMENT LA QUESTION : le voile descend
     * jusqu'au bas de la fenetre quoi qu'il arrive, et les variables ne
     * servent plus qu'a ce qu'elles savent faire, borner le HAUT et la
     * GAUCHE pour ne pas recouvrir les meubles de l'interface. Une variable
     * absente retombe alors sur zero, ce qui donne un voile plein ecran --
     * trop large, jamais trop court.
     */
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    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, 0, 0), 0.74);
    backdrop-filter: blur(8px);
}

.expert-advice-preview-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    /* LA HAUTEUR SE PREND SUR LE VOILE, pas sur la fenetre : depuis que
       celui-ci commence sous la barre, `100vh` depassait d'autant. */
    max-height: min(860px, 100%);
    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, 30, 41, 59), 0.96);
    border: 1px solid rgba(var(--white-rgb, 255, 255, 255), 0.12);
    box-shadow: 0 28px 90px rgba(var(--black-rgb, 0, 0, 0), 0.48),
        inset 0 1px 0 rgba(var(--white-rgb, 255, 255, 255), 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, 255, 255, 255), 0.08);
    background: rgba(var(--slate-rgb, 15, 23, 42), 0.28);
}

.expert-advice-preview-modal__eyebrow {
    color: rgba(var(--white-rgb, 255, 255, 255), 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, 255, 255, 255), 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, 255, 255, 255), 0.10);
    border-radius: 14px;
    background: rgba(var(--white-rgb, 255, 255, 255), 0.06);
    color: rgba(var(--white-rgb, 255, 255, 255), 0.88);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

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

.expert-advice-preview-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 22px;
}

.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, 255, 255, 255), 0.04);
    border: 1px solid rgba(var(--white-rgb, 255, 255, 255), 0.08);
    color: rgba(var(--white-rgb, 255, 255, 255), 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, 255, 255, 255), 0.04);
    border: 1px solid rgba(var(--white-rgb, 255, 255, 255), 0.08);
}

.expert-advice-preview-content__eyebrow {
    color: rgba(var(--blue-soft-rgb, 147, 197, 253), 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, 255, 255, 255), 0.96);
    font-size: 20px;
    line-height: 1.25;
}

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

/* =====================================================================
   LES TRENTE-SIX REGLES QUI SUIVENT ONT DEUX ANCETRES DEPUIS LE 30/10/2026.

   Elles habillaient le contenu des recommandations -- les quatre familles,
   leurs periodes, leurs listes -- et toutes etaient ecrites sous
   `.expert-advice-preview-modal`, parce que c'est la fenetre qui le portait.

   LE BLOC 6 LE DEPLIE MAINTENANT DANS SA LIGNE, et le contenu a perdu ses
   trente-six regles d'un coup : mesure a l'ecran le 30/10, les familles
   arrivaient en file indienne, sans encadre, sans etiquettes de periode.
   C'est le defaut qu'on ne voit qu'en ouvrant -- le texte etait bien la, et
   toutes les mesures de presence passaient.

   `.vx-conseil__contenu` a la meme specificite que `.expert-advice-preview-
   modal` : la paire se comporte comme une seule regle, et aucune des deux
   ne prend le pas sur l'autre.
   ===================================================================== */
.expert-advice-preview-modal .journey-course-advice,
.vx-conseil__contenu .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,
.vx-conseil__contenu .journey-course-advice {
    --journey-accent-rgb: 242, 190, 99;
    --journey-accent-solid: rgb(var(--teinte-or, 242, 190, 99));

    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,
.vx-conseil__contenu .journey-course-advice__title {
    margin: 0;
    color: rgba(var(--white-rgb, 255, 255, 255), 0.96);
    font-size: 22px;
    line-height: 1.25;
}

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

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

/*
 * LE GROUPE N A PLUS SA BOITE.
 *
 * L'ADMIN, LE 19/10/2026 : « retirer le cadre a l'interieur qui fait trop ».
 * Il avait raison : une boite dans une boite, et les quatre lignes dedans en
 * avaient chacune une troisieme. Trois cadres emboites pour quatre phrases.
 *
 * LES LIGNES GARDENT LA LEUR : c'est elle qui dit qu'on peut cliquer.
 */
.expert-advice-preview-modal .journey-course-advice-group,
.vx-conseil__contenu .journey-course-advice-group {
    display: grid;
    gap: 12px;
}

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

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

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

/*
 * QUATRE LIGNES DEPLIABLES, L UNE SOUS L AUTRE.
 *
 * L'ADMIN, LE 19/10/2026 : « Met en 1x4, en lignes depliables ».
 *
 * J'avais compris quatre colonnes, et la mesure visuelle lui donne raison :
 * a 240 px par carte, « Gestes a faire soi-meme » tombait sur trois lignes
 * et les badges mordaient sur le titre. Pleine largeur, chaque famille tient
 * son titre a gauche, ses trois « quand » a droite, et son detail se deplie
 * dessous.
 */
.expert-advice-preview-modal .journey-course-advice-themes,
.vx-conseil__contenu .journey-course-advice-themes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

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

/* LE TRAIT DES QUATRE TYPES DE RECOMMANDATION EST NEUTRE.

   L'ADMIN, LE 04/11/2026 : « le bord jaune, je l'aurais mis en gris neutre,
   a l'interieur, pour les 4 types de recommandations ».

   Il portait l'or du parcours (`--journey-accent-rgb`), une couleur qui dit
   « programme » ailleurs dans le produit et qui ne dit rien ici : les quatre
   types -- gestes, alimentation, complements, comportement -- ne sont pas
   quatre familles, ce sont quatre rubriques du meme conseil. Et depuis que
   la ligne qui les contient porte la couleur de SA famille, un second accent
   a l'interieur se lisait comme une seconde origine.

   `--texte-discret` EST LE GRIS DU PRODUIT, pas un ton choisi ici, et il
   suit le theme. */
.expert-advice-preview-modal .journey-course-advice-theme::before,
.vx-conseil__contenu .journey-course-advice-theme::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: color-mix(in srgb, var(--texte-discret, #94a3b8) 60%, transparent);
}

/*
 * LE RESUME EST UNE GRILLE D UNE COLONNE : le titre, puis les badges.
 *
 * `__summary-main` s'efface (`display: contents`) pour que ses trois enfants
 * -- titre, texte, badges -- deviennent des cases de CETTE grille. Sans cela
 * les badges resteraient prisonniers de leur parent, sous le texte, et il
 * aurait fallu toucher au partial que le parcours de la personne partage.
 *
 * LES BADGES ETAIENT A DROITE, SUR LA LIGNE DU TITRE, et la colonne du titre
 * se contractait pour leur faire place : « Gestes a faire soi-meme » tombait
 * sur trois lignes dans une colonne de cent pixels, et « Alimentation »
 * touchait le premier badge sans un espace. L'Admin, le 04/11/2026 : « mets
 * a la ligne les jetons pour laisser le titre entier ».
 *
 * UNE SEULE COLONNE, DONC, et quatre rangees : le titre, les badges, le
 * texte, le lien. Le titre ne se fait plus rogner par ce qui l'accompagne.
 */
.expert-advice-preview-modal .journey-course-advice-theme__summary,
.vx-conseil__contenu .journey-course-advice-theme__summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    padding: 16px 18px;
    cursor: pointer;
}

.expert-advice-preview-modal .journey-course-advice-theme__summary-main,
.vx-conseil__contenu .journey-course-advice-theme__summary-main {
    display: contents;
}

.expert-advice-preview-modal .journey-course-advice-theme__title,
.vx-conseil__contenu .journey-course-advice-theme__title {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* LE CHEVRON SUIT LE TEXTE, il ne pend plus sous sa ligne de base. */
.expert-advice-preview-modal .journey-course-advice-theme__toggle-icon,
.vx-conseil__contenu .journey-course-advice-theme__toggle-icon {
    display: block;
    line-height: 1;
}

/* LES TROIS « QUAND » SOUS LE TITRE, cote a cote : la ligne fait toute la
   largeur de la carte, ils y tiennent sans s'empiler, et le titre garde la
   sienne. */
.expert-advice-preview-modal .journey-course-advice-theme__periods,
.vx-conseil__contenu .journey-course-advice-theme__periods {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
}

.expert-advice-preview-modal .journey-course-advice-theme__lead,
.vx-conseil__contenu .journey-course-advice-theme__lead {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* LE DEPLI SE FAIT AU CLIC SUR LA CARTE ENTIERE -- c'est un `<summary>`. Le
   lien reste, en bas et discret, parce qu'un pli qui ne s'annonce pas ne se
   decouvre pas. */
.expert-advice-preview-modal .journey-course-advice-theme__toggle,
.vx-conseil__contenu .journey-course-advice-theme__toggle {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
}

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

/* SA MISE EN PAGE EST PASSEE A LA GRILLE DU RESUME, ci-dessus : cette regle
   ne garde que ce qui vaut encore pour une boite effacee. */
.expert-advice-preview-modal .journey-course-advice-theme__summary-main,
.vx-conseil__contenu .journey-course-advice-theme__summary-main {
    min-width: 0;
}

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

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

.expert-advice-preview-modal .journey-course-advice-theme__periods,
.vx-conseil__contenu .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,
.vx-conseil__contenu .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, 255, 255, 255), 0.08);
    background: rgba(var(--white-rgb, 255, 255, 255), 0.06);
    color: rgba(var(--white-rgb, 255, 255, 255), 0.78);
}

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

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--week,
.vx-conseil__contenu .journey-course-advice-theme__period-tag--week {
    color: rgba(var(--amber-pale-rgb, 253, 230, 138), 0.96);
    background: rgba(var(--amber-deep-rgb, 245, 158, 11), 0.13);
    border-color: rgba(var(--amber-deep-rgb, 245, 158, 11), 0.24);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--month,
.vx-conseil__contenu .journey-course-advice-theme__period-tag--month {
    color: rgba(var(--blue-pale-rgb, 191, 219, 254), 0.96);
    background: rgba(var(--blue-rgb, 59, 130, 246), 0.13);
    border-color: rgba(var(--blue-rgb, 59, 130, 246), 0.24);
}

.expert-advice-preview-modal .journey-course-advice-theme__period-tag--neutral,
.vx-conseil__contenu .journey-course-advice-theme__period-tag--neutral {
    color: rgba(var(--ink-200-rgb, 226, 232, 240), 0.88);
    background: rgba(var(--slate-light-rgb, 148, 163, 184), 0.10);
    border-color: rgba(var(--slate-light-rgb, 148, 163, 184), 0.20);
}

/*
 * LE LIEN DU PLI, ALIGNE SUR SA PROPRE LIGNE.
 *
 * L'ADMIN, LE 19/10/2026 : « "Voir toutes les recommandations" a l'air
 * visuellement casse, corrige ». Il l'etait : en sortant de la rangee flex du
 * resume pour entrer dans la grille, il est devenu un bloc, et son chevron
 * est reste sur la ligne de base du texte -- donc plus bas que le mot.
 */
.expert-advice-preview-modal .journey-course-advice-theme__toggle,
.vx-conseil__contenu .journey-course-advice-theme__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    color: rgba(var(--white-rgb, 255, 255, 255), 0.74);
    background: rgba(var(--white-rgb, 255, 255, 255), 0.08);
    border: 1px solid rgba(var(--white-rgb, 255, 255, 255), 0.08);
    border-radius: 999px;
    padding: 6px 10px;
}

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

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

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

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

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

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

/* ET LA SEULE REGLE ADAPTATIVE DE LA FENETRE. Elle vit dans un `@media` qui
   ne porte qu'elle : il part donc entier, comme le reste. */
@media (max-width: 900px) {
    .expert-advice-preview-modal .journey-course-advice-themes,
    .vx-conseil__contenu .journey-course-advice-themes {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LES BLOCS 5 ET 6, DANS LES DEUX PRODUITS.

   ===================== LE DEFAUT MESURE =====================

   L'ADMIN, LE 20/10/2026, capture a l'appui : « le "Verifie en reel,
   visuellement", je ne suis pas certain qu'il ait ete suivi ».

   Il avait raison, et voici ce que la verification visuelle a trouve sur
   l'ecran Synthese de l'Expert, le 20/10 : le bouton « Recommandations »
   rendu en GRIS NATIF DU NAVIGATEUR (fond rgb(240,240,240), texte noir,
   police systeme) sur un fond sombre ; les listes des blocs 5 et 6 coupees
   par une barre de defilement interne, alors que l'Admin avait demande le
   19/10 « pas de scroll sur cette partie 5 » ; et le bloc 6 large de 481 px
   sur une page de 1536, laissant un vide de pres de six cents pixels.

   ===================== POURQUOI RIEN N AVAIT CRIE =====================

   LES HUIT REGLES QUI CORRIGEAIENT TOUT CELA EXISTENT -- dans
   `vue-expert-bloc.css`, sous `.vx-bloc.vx-bloc.vx-bloc`. Ce prefixe est
   celui que le VISUALISEUR ajoute en servant ses feuilles. L'Expert, lui,
   sert ces memes ecrans SANS cette enveloppe : aucune des huit ne l'atteint.

   Les mesures faites alors ne pouvaient pas le dire : elles comptaient les
   boutons (sept, le bon nombre) et lisaient des largeurs (toutes non
   nulles). Un bouton sans style est un bouton present.

   ===================== POURQUOI ICI =====================

   Cette feuille est servie aux DEUX produits -- c'est la raison pour
   laquelle elle a ete extraite. Les selecteurs y vont donc SANS prefixe, et
   portent des classes qui n'existent que sur cet ecran. Les versions
   prefixees restent ou elles sont : dans le visualiseur elles disent la meme
   chose, et les retirer ferait courir un risque pour reparer un doublon.
   ========================================================================== */

/* =====================================================================
   LE BLOC 6 EN LIGNES DEPLIABLES, DEPUIS LE 30/10/2026.

   L'ADMIN : « une ligne avec le titre et le repere, et depliable exclusif
   (un seul a la fois) avec l'interieur. Le partage (et "montrer") a droite
   de la ligne. »

   CE QUE CA REMPLACE : sept cartes en grille de quatre, de hauteurs
   inegales, chacune avec un bouton qui ouvrait une fenetre par-dessus la
   page. Les regles de ce bouton (`.vx-conseil__apercu`) sont parties avec
   lui ; le texte qu'il montrait se deplie maintenant dans sa ligne.

   LES CLASSES SONT NOMMEES TROIS FOIS LA OU ELLES POSENT UN `padding` :
   `theme.css` du visualiseur pose `.vx-bloc, .vx-bloc * { padding: 0 }`,
   meme specificite qu'une classe seule et charge APRES cette feuille. Le
   fond et l'encre passent, le `padding` non -- et un bouton serre ne se
   distingue d'un bouton normal que si on le regarde.
   ===================================================================== */

.vx-conseil {
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.06);
    overflow: hidden;
}

/* DEPLIEE, LA LIGNE RESTE DE SA FAMILLE. L'Admin : « y compris depliee ».
   Le cyan disait « ouverte » en repeignant le filet et le fond, donc la
   provenance disparaissait au moment ou l'on ouvre pour la lire. L'ouverture
   se dit maintenant par un voile plus dense de la MEME teinte -- on voit
   qu'il se passe quelque chose, on ne change pas de langage. */
.vx-conseil[open] {
    border-color: rgba(var(--origine-rgb), 0.5);

    /* DEPLIEE, LA TEINTE RESTE SUR LA LIGNE ET QUITTE LE CORPS.

       L'ADMIN, LE 04/11/2026, devant un conseil ouvert : « la c'est tres
       colore, donner le meme effet que les cases ? ou plus leger ? ». Plus
       leger, et voici pourquoi : une carte d'analyse fait trois lignes, un
       voile de dix pour cent s'y lit comme une teinte. Un conseil deplie en
       fait trente, avec ses propres blocs qui portent leurs propres couleurs
       -- des jetons verts, ambres et bleus. Le meme voile y devient un aplat
       qui se dispute avec ce qu'il contient.

       LA LIGNE GARDE LE VOILE, le corps revient au fond commun. La famille se
       lit toujours, au meme endroit qu'a l'etat ferme, et le texte se lit
       mieux. */
    background: transparent;

    /* LE TRAIT D ORIGINE SURVIT A L OUVERTURE.

       L'ADMIN, LE 03/11/2026 : « a l'ouverture la ligne devient cyan ». La
       regle ci-dessus repeint les QUATRE bords de la ligne ouverte, celui de
       gauche compris : la provenance disparaissait au moment precis ou on
       ouvre pour la lire. Le cyan dit « ouverte », il n'a pas a dire d'ou
       vient le conseil. */
    border-left-color: var(--origine);
}

/* LA LIGNE ENTIERE OUVRE. Le marqueur natif du `summary` part : il se place
   avant tout le reste, sans rapport avec la grille de la ligne, et le
   chevron qu'on dessine tient sa place exactement. */
/* LA LIGNE PORTE LA COULEUR DE SON BLOC D ORIGINE.

   L'ADMIN, LE 03/11/2026 : « couleurs de la ligne de la provenance ». Les
   quatre blocs de la synthese ont chacun leur teinte, posee sur leur
   section ; un conseil porte celle du bloc d'ou il vient.

   TROIS PIXELS AU BORD, comme les sections : un aplat teinte sur une ligne
   de texte abaisse le contraste de ce qu'on doit lire. Le gris du cas
   neutre dit « pas de bloc d'origine », pas « peu important ».

   LES JETONS VIENNENT DU SOCLE (`--origine-*`), donc ces lignes et les
   sections changent ensemble le jour ou une famille change de couleur. */
/* LE MEME DESSIN QUE LES CARTES DES BLOCS 2, 3 ET 4.

   L'ADMIN, LE 04/11/2026 : « aligner le design de la partie Recommandations
   sur les cartes et leur provenance, la couleur du fond, la bordure, y
   compris depliee ».

   Les cartes d'analyse portent un filet et un fond teintes par leur famille ;
   ces lignes-ci n'avaient qu'un trait a gauche. Elles prennent les trois,
   avec le trait garde plus epais : c'est lui qui aligne l'oeil quand onze
   lignes se suivent.

   LE VOILE SE COMPOSE A PARTIR DU TRIPLET de la famille, pas d'une couleur
   ecrite ici, et il se pose sur le TRANSPARENT : dix pour cent de la teinte
   par-dessus ce qui est deja la. Mele a `--surface-carte`, il ne rendait
   rien -- ce jeton porte un DEGRADE, et `color-mix` n'accepte que des
   couleurs : la declaration tombait entiere et le fond restait transparent.
   Mesure a l'ecran, fond lu `rgba(0, 0, 0, 0)` sur les onze lignes. */
.vx-conseil {
    --origine-rgb: var(--texte-discret-rgb, 148, 163, 184);
    --origine: rgb(var(--origine-rgb));

    border: 1px solid rgba(var(--origine-rgb), 0.38);
    border-left: 3px solid var(--origine);
    background: color-mix(in srgb, rgb(var(--origine-rgb)) 10%, transparent);
}

.vx-conseil--entretien { --origine-rgb: var(--origine-entretien-rgb); }
.vx-conseil--tension { --origine-rgb: var(--origine-tension-rgb); }
.vx-conseil--corps { --origine-rgb: var(--origine-corps-rgb); }

.vx-conseil__ligne.vx-conseil__ligne.vx-conseil__ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
}

.vx-conseil[open] > .vx-conseil__ligne {
    background: color-mix(in srgb, rgb(var(--origine-rgb)) 10%, transparent);
}

.vx-conseil__ligne::-webkit-details-marker {
    display: none;
}

.vx-conseil__ligne:hover {
    background: rgba(148, 163, 184, 0.09);
}

.vx-conseil__chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    border-left: 6px solid var(--text-secondary, rgba(148, 163, 184, 0.9));
    transition: transform 0.15s ease;
}

.vx-conseil[open] .vx-conseil__chevron {
    transform: rotate(90deg);
}

/* TITRE ET REPERE SUR LA MEME LIGNE, et ils passent a la ligne ensemble si
   la fenetre est etroite : ce sont deux parts d'une meme mention. */
.vx-conseil__nom {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.vx-conseil__titre {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
}

.vx-conseil__repere {
    font-size: 12.5px;
    color: var(--text-secondary, rgba(203, 213, 225, 0.75));
}

.vx-conseil__repere-etiquette {
    font-weight: 400;
}

/* L ELEMENT EN GRAS, ET C EST LUI QUI OUVRE SON ORGANE. L'Admin, le
   30/10/2026 : « Mettre en gras le repere corporel (l'element), et cliquer
   dessus renvoie vers l'organe en question. » */
.vx-conseil__repere-nom {
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
}

.vx-conseil__repere-nom--porte {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.vx-conseil__repere-nom--porte:hover {
    color: var(--accent-color, #38bdf8);
    text-decoration-style: solid;
}

/* LES GESTES AU BOUT DE LA LIGNE, dans leur propre case : « Afficher »
   toujours, « Partager » en mode partage, « Montrer » en consultation. */
.vx-conseil__gestes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vx-conseil__gestes:empty {
    display: none;
}

/* LES DEUX GESTES DU PARTAGE SONT UN SEUL BLOC, ET ILS SE LISENT EN RANGEE.

   `ecran-synthese-experte.js` pose ici un CLONE qui porte « Montrer » ET
   « Partager cet element ». Ce clone est un `<span>` nu : sans disposition,
   ses deux enfants retombent l'un sous l'autre, et la pile se serre contre
   « Afficher » reste seul a droite. L'Admin, le 03/11/2026 : « Disposition a
   revoir ».

   LA MEME RANGEE QUE LA CASE QUI L ACCUEILLE, et le meme ecart : les trois
   gestes se lisent alors sur une ligne, a la meme hauteur. La regle jumelle
   existe deja pour les cartes analytiques (`vue-expert-bloc.css`), ou le
   clone est pose dans une colonne etroite et s'aligne en `space-between` ;
   ici la case est large, donc les gestes se suivent. */
.vx-conseil__gestes [data-vx-geste-pose] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* LE GESTE « AFFICHER » : LA FORME DE « Montrer », LA COULEUR EN PROPRE.
   L'Admin : « Go bleu. Meme style que "Montrer" pour la forme. » C'est une
   action distincte des deux autres, et une couleur distincte est ce qui le
   dit sans legende. */
.vx-conseil__afficher.vx-conseil__afficher.vx-conseil__afficher {
    padding: 7px 10px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.14);
    color: rgb(147, 197, 253);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.vx-conseil__afficher:hover:not(:disabled) {
    background: rgba(96, 165, 250, 0.24);
    border-color: rgba(96, 165, 250, 0.7);
}

/* POSE : l'aplat plein, pour qu'un coup d'oeil sur le bloc dise combien de
   reperes partent chez le client. */
.vx-conseil__afficher.is-pose.is-pose.is-pose {
    background: rgb(59, 130, 246);
    border-color: rgb(59, 130, 246);
    color: #fff;
}

.vx-conseil__afficher:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* CE QUE LES REPERES AFFICHES PESENT CHEZ LE CLIENT.

   Demande de Florent le 15/11/2026. La ligne dit toujours le nombre de
   lignes envoyees ; elle prend son filet d'alerte au-dela du seuil porte par
   la page (`data-seuil-charge`).

   LE FILET A GAUCHE PLUTOT QU UN APLAT : la ligne est entre l'en-tete du
   bloc et la liste des reperes. Un aplat de couleur y ferait une troisieme
   surface et se lirait comme une erreur ; le filet marque sans repeindre.

   LE THEME CLAIR EST ECRIT PLUS BAS, dans sa section. L'ambre pose pour un
   fond sombre rend pale sur du blanc, et c'est exactement le defaut que les
   quatre regards du 20/10/2026 cherchent. */
.vx-conseils-charge {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary, rgba(148, 163, 184, 0.85));
}

.vx-conseils-charge.est-lourde {
    padding: 6px 0 6px 10px;
    border-left: 2px solid rgba(250, 204, 21, 0.75);
    color: var(--text-primary, #e2e8f0);
}

/* LE DEPLI. Il porte ce que le client lira pour ce repere, demande au
   serveur a la premiere ouverture. */
.vx-conseil__corps.vx-conseil__corps.vx-conseil__corps {
    padding: 4px 14px 14px 28px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.vx-conseil__vu {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-secondary, rgba(148, 163, 184, 0.8));
}

.vx-conseil__contenu {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-primary, #e2e8f0);
}

/* ================== LE THEME CLAIR DU VISUALISEUR ==================
   Les jetons `--text-primary` et consorts s'inversent avec le theme, mais
   les aplats ecrits en `rgba()` ici ne bougent pas : poses pour un fond
   sombre, ils rendent du gris pale sur du blanc. Les quatre regards du
   20/10/2026 sont la pour ca. */
/* LA FAMILLE TIENT AUSSI EN CLAIR, et ces deux regles sont les seules qui
   decident la-bas : ecrites apres, elles battent celles du haut a poids egal.
   Les voiles y sont plus legers -- une teinte se voit plus vite sur du blanc
   -- et c'est la seule difference. */
html[data-theme="clair"] .vx-conseil {
    border-color: rgba(var(--origine-rgb), 0.3);
    background: color-mix(in srgb, rgb(var(--origine-rgb)) 7%, transparent);
}

html[data-theme="clair"] .vx-conseil[open] {
    border-color: rgba(var(--origine-rgb), 0.42);
    background: transparent;
}

html[data-theme="clair"] .vx-conseil[open] > .vx-conseil__ligne {
    background: color-mix(in srgb, rgb(var(--origine-rgb)) 8%, transparent);
}

html[data-theme="clair"] .vx-conseil__ligne:hover {
    background: rgba(100, 116, 139, 0.09);
}

html[data-theme="clair"] .vx-conseil__afficher.vx-conseil__afficher.vx-conseil__afficher {
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(37, 99, 235, 0.1);
    color: rgb(29, 78, 216);
}

html[data-theme="clair"] .vx-conseil__afficher:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.18);
}

html[data-theme="clair"] .vx-conseil__afficher.is-pose.is-pose.is-pose {
    background: rgb(37, 99, 235);
    border-color: rgb(37, 99, 235);
    color: #fff;
}

/* LA CHARGE EN CLAIR. L'ambre de l'alerte (250, 204, 21) est posee pour un
   fond sombre : sur du blanc elle rend un jaune de surligneur, qui se lit
   comme une decoration et non comme un avertissement. On descend d'un cran
   vers l'ambre fonce, celui des etats de donnee du produit en theme clair.

   LES DEUX CONVENTIONS D ATTRIBUT SONT COUVERTES, comme plus bas dans ce
   fichier : le produit en ligne ecrit `clair`, l'Expert ecrit `light`. La
   regle du haut est faite pour un fond sombre -- son encre tombe sur
   `#e2e8f0` quand `--text-primary` est absent, et il l'est chez l'Expert --
   donc n'ecrire que `clair` aurait laisse du presque-blanc sur le fond pale
   de l'Expert en theme clair. C'est le defaut mesure le 30/10/2026 sur le
   depli de ce meme bloc, et il se reproduit a chaque regle nouvelle. */
html[data-theme="clair"] .vx-conseils-charge,
html[data-theme="light"] .vx-conseils-charge {
    color: rgba(71, 85, 105, 0.95);
}

html[data-theme="clair"] .vx-conseils-charge.est-lourde,
html[data-theme="light"] .vx-conseils-charge.est-lourde {
    border-left-color: rgb(180, 83, 9);
    color: rgb(51, 65, 85);
}

/* =====================================================================
   L EXPERT NE CONNAIT PAS LES JETONS DU PRODUIT EN LIGNE.

   MESURE A L ECRAN, 30/10/2026, synthese experte de l'Expert en theme
   clair : le contenu deplie rendait du blanc sur fond pale -- titres,
   phrases et etiquettes illisibles. `--white-rgb` et `--ink-200-rgb` sont
   ABSENTS la-bas (mesure : `getPropertyValue` rend une chaine vide), donc
   les vingt et un `rgba(var(--white-rgb, 255, 255, 255), x)` tombaient sur
   leur repli blanc.

   POURQUOI CA NE SE VOYAIT PAS AVANT : la fenetre portait son propre fond
   sombre, quel que soit le theme. Le depli, lui, est pose sur le fond de la
   page -- et c'est la que le repli devient faux.

   LES VALEURS SONT CELLES DU VISUALISEUR EN CLAIR, relevees chez lui le
   meme jour : poser les memes ne change rien de ce cote, et donne a
   l'Expert ce qui lui manque. Les deux conventions d'attribut sont
   couvertes : `clair` pour le produit en ligne, `light` pour l'Expert.

   LE THEME SOMBRE N EST PAS TOUCHE : la, les replis sont justement les
   valeurs que le visualiseur porte, et les deux produits rendaient pareil.
   ===================================================================== */
html[data-theme="clair"] .vx-conseil__contenu,
html[data-theme="light"] .vx-conseil__contenu {
    --white-rgb: 17, 24, 39;
    --ink-200-rgb: 51, 65, 85;
    --slate-light-rgb: 248, 250, 252;

    /* ET LES TROIS TEINTES DES ETIQUETTES DE PERIODE. Elles portent l'encre
       des pastilles « A commencer maintenant / cette semaine / sur le mois »,
       et leurs valeurs sombres sont des teintes PALES, faites pour un fond
       noir. Mesure du 30/10 dans l'Expert clair : les trois pastilles
       rendaient leur fond et plus leur texte -- lisibles comme des pastilles
       vides. Les fonds et les bordures, eux, ne bougent pas d'un theme a
       l'autre et n'ont rien a recevoir ici. */
    --couleur-succes-doux-rgb: 17, 106, 50;
    --amber-pale-rgb: 122, 82, 4;
    --blue-pale-rgb: 30, 64, 175;
}

/* LE BLOC 6 PREND SA LIGNE ENTIERE, et ses reperes se rangent en grille :
   ce sont des cartes courtes et nombreuses. Sans cette regle il restait sur
   une seule colonne, d'ou le vide mesure a droite. */
[data-vx-bloc-conseils] {
    grid-column: 1 / -1;
}

/* UNE LIGNE PAR REPERE, LES UNES SOUS LES AUTRES. La grille de cartes
   (quatre colonnes de 280 pixels) est partie avec les cartes : des lignes
   qui se deplient n'ont pas de colonnes. */
[data-vx-bloc-conseils] .expert-col-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ET LES PARTIES 5 ET 6 NE DEFILENT PAS DANS LEUR COIN. `.expert-col-list`
   de la livraison porte `max-height: 480px` : c'est juste pour les blocs 2 a
   4, dont les listes comptent des dizaines d'entrees. On ne touche pas a la
   regle de la livraison, on la leve pour ces deux cartes-la. */
.expert-col-card--courses .expert-col-list,
.expert-col-card--advice .expert-col-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}

/* ET LA COCHE RESTE CONTRE SON NOM : `.expert-chip-topline` porte
   `space-between`, inoffensif tant qu'elle n'avait qu'un enfant. */
.expert-col-card--courses .expert-chip-topline {
    justify-content: flex-start;
    gap: 8px;
}

/* LES REGLES DE LA COCHE SONT PARTIES LE 20/10/2026 avec la coche
   elle-meme (Admin : « Retire la case, ca redirige vers le bon element
   deja, la carte »). */

/* LE BLOC 5 PREND SA LIGNE ENTIERE, comme le 6 et pour la meme raison. Le
   visualiseur l'avait deja, l'Expert non : son bloc 5 restait large de 481
   pixels pendant que le 6 en prenait 1 474, ce qui est precisement le genre
   d'ecart qu'on ne voit qu'en regardant. */
[data-vx-bloc-programmes] {
    grid-column: 1 / -1;
}