/*
 * « 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;
}

.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, 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 {
    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 {
    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 {
    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 {
    display: grid;
    gap: 12px;
}

.expert-advice-preview-modal .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 {
    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 {
    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 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.expert-advice-preview-modal .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);
}

.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, 90, 230, 248), 0.72);
}

/*
 * LE RESUME EST UNE GRILLE : titre a gauche, badges a droite.
 *
 * `__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.
 */
.expert-advice-preview-modal .journey-course-advice-theme__summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    padding: 16px 18px;
    cursor: pointer;
}

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

.expert-advice-preview-modal .journey-course-advice-theme__title {
    grid-column: 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 {
    display: block;
    line-height: 1;
}

/* LES TROIS « QUAND » EN HAUT A DROITE, cote a cote : la ligne fait toute la
   largeur de la fenetre, ils y tiennent sans s'empiler. */
.expert-advice-preview-modal .journey-course-advice-theme__periods {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
}

.expert-advice-preview-modal .journey-course-advice-theme__lead {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* 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 {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
}

.expert-advice-preview-modal .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 {
    min-width: 0;
}

.expert-advice-preview-modal .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 {
    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 {
    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, 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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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, 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 {
    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 {
    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 {
        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.
   ========================================================================== */

/* `align-self: flex-start` N EST PAS UN DETAIL : la liste est une colonne
   flex, dont les enfants s'etirent par defaut. Le bouton prenait donc la
   largeur entiere de la carte, ce qui lui donnait l'air d'une barre vide
   plutot que d'un bouton -- c'est sous cette forme que l'Admin l'a vu. */
/* LA CLASSE EST NOMMEE TROIS FOIS, et c'est le `padding` qui l'exige.
   `theme.css` du visualiseur pose un reset `.vx-bloc, .vx-bloc * { padding: 0 }`
   -- meme specificite qu'une classe seule, mais chargee APRES celle-ci, donc
   elle gagnait. Mesure du 20/10/2026 sur la page du Online : `padding: 0px`
   la ou la regle demande `5px 12px`, d'ou un bouton serre qui ne ressemblait
   pas a celui de l'Expert. Le fond et l'encre, eux, passaient : le reset ne
   les touche pas, et c'est ce qui rendait le defaut difficile a voir. */
.vx-conseil__apercu.vx-conseil__apercu.vx-conseil__apercu {
    align-self: flex-start;
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary, #f8fafc);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.vx-conseil__apercu:hover:not(:disabled) {
    background: rgba(56, 189, 248, 0.14);
    border-color: var(--accent-color, #38bdf8);
}

.vx-conseil__apercu:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 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;
}

[data-vx-bloc-conseils] .expert-col-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}

/* 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;
}