/* =============================================================================
   Styles de la vitrine
   -----------------------------------------------------------------------------
   Ces regles habillent la documentation elle-meme, pas les composants du
   Design System. Rien ici ne doit etre reutilise par un projet client : la
   frontiere est volontaire, pour que la vitrine puisse evoluer sans risque
   d'effet de bord sur la bibliotheque.

   Elles consomment neanmoins les memes tokens --my-*, ce qui garantit que la
   documentation reste coherente avec ce qu'elle documente.

   Prefixe sc- (showcase) et non my- : eviter toute confusion entre un style
   de documentation et un style de composant.
   ============================================================================= */

.showcase-content {
    padding: var(--my-space-lg);
    max-width: 1180px;
}

@media (max-width: 599px) {
    .showcase-content {
        padding: var(--my-space-md);
    }
}

/* ---- Barre laterale ---- */

/* Les intitules de groupe de la barre laterale sont rendus par MyNavSection,
   dans la bibliotheque. Ne restent ici que les entrees grisees, propres a la
   vitrine : une application cliente n'a pas de pages a venir. */

/* ---- Entree de navigation a venir ----
   Reprend le gabarit de .my-navlink pour que la barre se lise comme un sommaire
   continu, mais sans etat de survol ni curseur main : rien n'est cliquable. */

.sc-nav-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 3px 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: var(--my-radius-md);
    font-size: 0.92rem;
    font-weight: var(--my-font-weight-bold);
    letter-spacing: -0.1px;
    color: var(--my-text-heading);
    opacity: 0.38;
    cursor: default;
    user-select: none;
}

/* Barre repliee : meme carre que les entrees actives, icone seule. */
.sc-nav-pending--mini {
    width: 52px;
    height: 52px;
    margin: 4px auto;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
}

.sc-nav-pending .mud-icon-root.sc-nav-pending-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--my-text-muted);
}

.sc-nav-pending-text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Compteur de composants : en chiffres a largeur fixe pour que les pastilles
   s'alignent verticalement d'une ligne a l'autre. */
.sc-nav-pending-count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: var(--my-radius-full);
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-2xs);
    font-variant-numeric: tabular-nums;
}

/* ---- En-tete de page ---- */

.sc-page-header {
    margin-bottom: var(--my-space-xl);
    padding-bottom: var(--my-space-md);
    border-bottom: 1px solid var(--my-border-subtle);
}

/* En-tete d'un second composant documente sur la meme page : il a besoin d'air
   au-dessus de lui, ce qu'un en-tete de page en tete de page n'a pas. */
.sc-page-header--secondaire {
    margin-top: calc(var(--my-space-xl) * 2);
}

.sc-page-intro {
    margin-top: var(--my-space-sm);
    max-width: 70ch;
    font-size: var(--my-font-size-lg);
    line-height: var(--my-line-height-loose);
    color: var(--my-text-body);
}

/* ---- Section de documentation ---- */

.sc-section {
    margin-bottom: var(--my-space-xl);
}

.sc-section-head {
    margin-bottom: var(--my-space-md);
}

.sc-section-note {
    margin-top: var(--my-space-xs);
    max-width: 78ch;
    color: var(--my-text-muted);
    font-size: var(--my-font-size-md);
}

/* Encart d'avertissement : sert a consigner les decisions et les pieges,
   qui sont la vraie valeur d'un Design System par rapport a un catalogue. */
.sc-callout {
    display: flex;
    gap: var(--my-space-sm);
    padding: var(--my-space-md);
    margin: var(--my-space-md) 0;
    border-radius: var(--my-radius-sm);
    border-left: 3px solid var(--my-info-500);
    background: var(--my-info-100);
    font-size: var(--my-font-size-md);
    line-height: var(--my-line-height-snug);
}

.sc-callout--warning {
    border-left-color: var(--my-warning-500);
    background: var(--my-warning-100);
}

.sc-callout p {
    margin: 0;
}

.sc-callout strong {
    color: var(--my-text-heading);
}

/* ---- Grilles ---- */

.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--my-space-md);
}

.sc-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---- Pastille de couleur ---- */

.sc-swatch {
    border-radius: var(--my-radius-md);
    overflow: hidden;
    background: var(--my-surface-card);
    border: 1px solid var(--my-border-subtle);
}

.sc-swatch-preview {
    height: 76px;
}

.sc-swatch-body {
    padding: var(--my-space-sm) var(--my-space-md) var(--my-space-md);
}

.sc-swatch-role {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    font-size: var(--my-font-size-md);
}

.sc-swatch-usage {
    margin-top: 2px;
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
    line-height: var(--my-line-height-snug);
}

/* ---- Nom de token ---- */

.sc-token {
    display: inline-block;
    margin-top: var(--my-space-sm);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--my-surface-sunken);
    color: var(--my-text-body);
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-2xs);
    user-select: all;
}

/* ---- Ligne de demonstration : apercu a gauche, token a droite ---- */

.sc-row {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
    padding: var(--my-space-sm) 0;
    border-bottom: 1px solid var(--my-border-subtle);
}

.sc-row:last-child {
    border-bottom: none;
}

.sc-row-preview {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
}

.sc-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sc-row-name {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    font-size: var(--my-font-size-md);
}

.sc-row-detail {
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-2xs);
    color: var(--my-text-muted);
}

@media (max-width: 899px) {
    .sc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--my-space-xs);
    }

    .sc-row-preview {
        flex-basis: auto;
    }
}

/* Barre representant un espacement */
.sc-space-bar {
    height: 20px;
    border-radius: 3px;
    background: var(--my-action-primary);
}

/* Carre representant un rayon */
.sc-radius-box {
    width: 92px;
    height: 62px;
    background: var(--my-brand-primary-subtle);
    border: 2px solid var(--my-action-primary);
}

/* Carte representant une ombre */
.sc-shadow-box {
    width: 130px;
    height: 62px;
    border-radius: var(--my-radius-md);
    background: var(--my-surface-card);
}

/* ---- Bloc de demonstration : apercu + code ---- */

.sc-demo {
    margin-bottom: var(--my-space-lg);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    overflow: hidden;
    background: var(--my-surface-card);
}

.sc-demo-head {
    display: flex;
    align-items: baseline;
    gap: var(--my-space-sm);
    flex-wrap: wrap;
    padding: var(--my-space-sm) var(--my-space-md);
    border-bottom: 1px solid var(--my-border-subtle);
    background: var(--my-surface-sunken);
}

.sc-demo-title {
    font-weight: var(--my-font-weight-bold);
    font-size: var(--my-font-size-md);
    color: var(--my-text-heading);
}

.sc-demo-note {
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
}

/* L'apercu est pose sur le fond de page, comme le composant le sera en vrai. */
.sc-demo-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--my-space-md);
    padding: var(--my-space-lg);
    background: var(--my-surface-page);
}

.sc-demo-preview--dark {
    background: var(--my-nav-bg);
}

.sc-demo-preview--stack {
    flex-direction: column;
    align-items: stretch;
}

/*  Intitule d'un extrait complementaire : il dit d'ou vient le code, ce qui compte
    quand celui-ci n'est pas le markup de l'apercu mais le composant qu'il ouvre. */
.sc-demo-code-titre {
    margin: 0;
    padding: var(--my-space-sm) var(--my-space-md) 0;
    border-top: 1px solid var(--my-border-subtle);
    background: var(--my-neutral-900);
    color: var(--my-neutral-400);
    font-size: var(--my-font-size-xs);
}

/*  Un intitule est suivi de son code : le bloc ne reprend donc pas la bordure, qui
    ferait un trait au milieu de l'ensemble. */
.sc-demo-code-titre + .sc-demo-code {
    border-top: none;
}

/*  Identifiant sans extrait : le cas doit se voir, sinon le bloc perd son code sans
    que rien ne le signale. */
.sc-demo-manquant {
    margin: 0;
    padding: var(--my-space-sm) var(--my-space-md);
    border-top: 1px solid var(--my-border-subtle);
    background: var(--my-warning-100);
    color: var(--my-text-heading);
    font-size: var(--my-font-size-xs);
}

.sc-demo-code {
    margin: 0;
    padding: var(--my-space-md);
    border-top: 1px solid var(--my-border-subtle);
    background: var(--my-neutral-900);
    color: var(--my-neutral-200);
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-xs);
    line-height: var(--my-line-height-snug);
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

.sc-demo-code code {
    font-family: inherit;
    font-size: inherit;
    background: none;
}

/* ---- Ecran de demonstration ----
   Cadre imitant une fenetre d'application, pour que les exemples d'ecrans
   se distinguent de la documentation qui les entoure. */

.sc-screen {
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-md);
    overflow: hidden;
    box-shadow: var(--my-shadow-md);
    margin-bottom: var(--my-space-lg);
}

.sc-screen-bar {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    padding: var(--my-space-sm) var(--my-space-md);
    background: var(--my-nav-bg);
    color: var(--my-nav-text);
    font-size: var(--my-font-size-sm);
    font-weight: var(--my-font-weight-bold);
}

.sc-screen-body {
    padding: var(--my-space-lg);
    background: var(--my-surface-page);
}

/* ---- Mise en page interne des ecrans d'exemple ----
   Ces classes appartiennent aux exemples, pas a la bibliotheque. Quand un motif
   se repete d'un ecran a l'autre, c'est le signe qu'il faut porter le composant
   correspondant plutot que d'etoffer cette section. */

.ex-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--my-space-md);
    flex-wrap: wrap;
}

.ex-field {
    margin-bottom: var(--my-space-md);
}

.ex-field:last-child {
    margin-bottom: 0;
}

.ex-doc {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    padding: var(--my-space-sm) 0;
    border-bottom: 1px solid var(--my-border-subtle);
}

.ex-doc:last-child {
    border-bottom: none;
}

.ex-doc-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--my-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cadre telephone, pour les exemples destines au mobile */
.ex-phone {
    width: 375px;
    max-width: 100%;
    border: 10px solid var(--my-neutral-800);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--my-shadow-lg);
}

.ex-phone-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--my-space-sm) var(--my-space-md);
    background: var(--my-nav-bg);
    color: var(--my-nav-text);
    font-size: var(--my-font-size-sm);
    font-weight: var(--my-font-weight-bold);
}

.ex-phone-body {
    padding: var(--my-space-md);
    background: var(--my-surface-page);
}

/* Force les regles mobiles a l'interieur du cadre telephone, quelle que soit
   la largeur reelle de la fenetre : sans cela, l'exemple mentirait sur le rendu
   qu'aura l'application sur un vrai telephone. */
.ex-phone-body {
    font-size: var(--my-font-size-lg);
    --my-control-height-md: var(--my-control-height-lg);
}

.ex-phone-body .mud-button-root.my-btn {
    min-height: var(--my-touch-target-min);
}

/* ---- Selecteur de marque ---- */

.sc-brand-swatches {
    display: flex;
    gap: 3px;
    margin-right: var(--my-space-sm);
}

.sc-brand-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--my-radius-full);
}

/* ---- Ecran de demarrage ----

   Il reprend l'apparence de MyLoadableContent sans pouvoir en etre : il s'affiche
   avant le demarrage de Blazor, donc avant qu'aucun composant n'existe. La classe
   .my-loadable, definie dans components-container.css, fait le centrage et l'espace
   entre l'indicateur et son libelle ; ces regles n'ajoutent que ce qui lui est
   propre - le remplissage progressif, que le composant n'a pas.

   Le cercle conserve sa progression chiffree, alimentee par le chargeur Blazor.
   Un indicateur indetermine comme celui du composant perdrait cette information,
   alors que le telechargement du runtime .NET est l'attente la plus longue de
   l'application - la seule ou un pourcentage vaut mieux qu'une rotation. */

.my-boot {
    /* Un peu au-dessus du centre : l'oeil place le centre optique plus haut que le
       centre geometrique, et un bloc exactement centre parait tomber. */
    min-height: 70vh;
    justify-content: center;
}

.my-boot .loading-progress {
    width: 5rem;
    height: 5rem;
}

.my-boot .loading-progress circle {
    fill: none;
    stroke: var(--my-border-subtle);
    stroke-width: 3;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

/*  Le second cercle se remplit a mesure du telechargement.

    LE COEFFICIENT N'EST PAS ARBITRAIRE

    Le chargeur Blazor fournit l'avancement en pourcentage. Or un pourcentage
    donne a stroke-dasharray ne se rapporte pas au perimetre du cercle mais a la
    diagonale normalisee du viewport, soit 50 pour un viewBox de 50 par 50.

    Le perimetre vaut 2 * pi * 20, environ 125,66 unites, ce qui fait 251,3 % de
    50. Le coefficient est donc 2,513 : a 100 %, le trait fait exactement le tour.
    Un coefficient calcule sur le perimetre - 1,256 - ne remplissait que la moitie
    du cercle a la fin du telechargement, sans que rien ne paraisse faux. */
.my-boot .loading-progress circle:last-child {
    stroke: var(--my-action-primary);
    stroke-linecap: round;
    stroke-dasharray: calc(2.513 * var(--blazor-load-percentage, 0%)), 500;
    transition: stroke-dasharray 0.05s ease-in-out;
}

/* ---- Bandeau d'erreur ----

   Affiche par Blazor quand une exception echappe a un composant. La couleur
   d'erreur est le role prevu pour cela : le modele de projet employait un jaune
   d'avertissement, qui sous-estime ce qui vient de se produire - l'application ne
   repond plus. */

/*  Les elements sont poses en ligne plutot qu'en absolu : la croix de l'original
    etait positionnee par rapport au bandeau, et chevauchait le texte des que
    celui-ci passait a la ligne sur un ecran etroit. */
#blazor-error-ui {
    display: none;
    align-items: center;
    gap: var(--my-space-md);
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    padding: var(--my-space-md) var(--my-space-lg);
    background: var(--my-error-100);
    border-top: 3px solid var(--my-error-500);
    color: var(--my-text-heading);
    font-size: var(--my-font-size-md);
}

/* Blazor pose display:block en style en ligne pour reveler le bandeau, ce qui
   annule le flex ci-dessus. La regle le retablit avec une specificite suffisante. */
#blazor-error-ui[style*="display"] {
    display: flex !important;
}

#blazor-error-ui .reload {
    color: var(--my-error-500);
    font-weight: var(--my-font-weight-bold);
}

#blazor-error-ui .dismiss {
    margin-left: auto;
    cursor: pointer;
    color: var(--my-text-muted);
    text-decoration: none;
}


/* Les regles du sommaire de page ont ete retirees avec le sommaire lui-meme :
   depuis qu'un composant vaut une page, elle tient en trois ou quatre sections et
   n'a rien a annoncer que le lecteur ne voie deja. La marge de defilement des
   sections part avec, plus rien ne defilant vers l'une d'elles. */


/* ---- Page de composant ---- */

.sc-composant-titre {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
    flex-wrap: wrap;
}

/* ---- Quand l'employer, quand l'eviter ----
   Deux colonnes cote a cote : le contraste est plus parlant qu'une liste de
   recommandations. Elles passent l'une sous l'autre sous 900 px, ou deux colonnes
   deviendraient trop etroites pour des phrases. */

.sc-usage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--my-space-md);
    margin-bottom: var(--my-space-xl);
}

@media (max-width: 899px) {
    .sc-usage {
        grid-template-columns: 1fr;
    }
}

.sc-usage-bloc {
    padding: var(--my-space-md);
    border-radius: var(--my-radius-sm);
    border-left: 3px solid var(--my-border-default);
    background: var(--my-surface-card);
}

/* Vert et rouge, mais jamais seuls : les intitules disent explicitement
   "a employer quand" et "a eviter quand", donc l'information reste lisible sans
   percevoir la couleur. */
.sc-usage-bloc--oui {
    border-left-color: var(--my-success-500);
}

.sc-usage-bloc--non {
    border-left-color: var(--my-error-500);
}

.sc-usage-corps {
    margin-top: var(--my-space-xs);
    color: var(--my-text-body);
    font-size: var(--my-font-size-md);
    line-height: var(--my-line-height-snug);
}

.sc-usage-corps p {
    margin: 0 0 var(--my-space-xs);
}

.sc-usage-corps p:last-child {
    margin-bottom: 0;
}

/* ---- Tableau de parametres ---- */

.sc-param-type {
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-2xs);
    color: var(--my-action-secondary);
}

/* Valeur par defaut sur sa propre ligne : accolee a la description elle s'y
   confondrait. */
.sc-param-defaut {
    display: block;
    margin-top: 2px;
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
}

/* ---- Index d'une famille ---- */

.sc-index-carte {
    display: flex;
    align-items: flex-start;
    gap: var(--my-space-md);
    padding: var(--my-space-md);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--my-transition-fast), box-shadow var(--my-transition-fast);
}

.sc-index-carte:hover {
    border-color: var(--my-action-primary);
    box-shadow: var(--my-shadow-sm);
    text-decoration: none;
}

.sc-index-nom {
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

.sc-index-role {
    margin-top: 2px;
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
    line-height: var(--my-line-height-snug);
}

/* ---- Lignes de la demonstration de MyReorderGrid ----

   L'en-tete et les lignes sont fournis par l'appelant : le composant ne les
   dessine pas, chaque ecran ayant ses propres colonnes. Ces regles sont donc
   celles d'un appelant d'exemple, et non celles du composant. */

.sc-reorder-entete,
.sc-reorder-ligne {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
    padding: var(--my-space-sm) var(--my-space-md);
}

/* L'en-tete reste visible pendant le defilement des lignes. */
.sc-reorder-entete {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--my-surface-sunken);
    border-bottom: 1px solid var(--my-border-default);
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--my-text-muted);
}

.sc-reorder-ligne {
    background: var(--my-surface-card);
    border-bottom: 1px solid var(--my-border-subtle);
}

/* ---- Entrees de navigation presentees hors de leur barre ----

   Une entree occupe toute la largeur de son conteneur : posee dans une
   demonstration, elle s'etirerait sur toute la page et ne ressemblerait plus a
   ce qu'elle est. Ce conteneur lui rend la largeur de la barre laterale, et
   uniquement cela : le fond, la bordure et l'ombre restent ceux de la barre
   reelle et n'ont pas a etre repris ici. */
.sc-nav-demo {
    width: var(--my-sidebar-width);
    max-width: 100%;
    padding: var(--my-space-sm) var(--my-space-md);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-card);
}

/*  Reproduction de MyNavSidebar hors de la charpente de page : le composant
    fixe sa propre hauteur a 100vh, ce qui convient a une barre reelle mais
    deborderait une simple demonstration. Le cadre impose une hauteur et
    masque le surplus ; la specificite de deux classes chainees suffit a
    l'emporter sur la regle de la bibliotheque sans la modifier. */
.sc-nav-sidebar-demo {
    display: flex;
    gap: var(--my-space-md);
    height: 420px;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    overflow: hidden;
    background: var(--my-surface-sunken);
}

.sc-nav-sidebar-demo .my-sidebar {
    height: 100%;
}

/* =============================================================================
   Demonstration des conteneurs d'ecran
   -----------------------------------------------------------------------------
   MyMainContentStack et MyListMainContentStack se dimensionnent sur la hauteur
   de leur conteneur, qui est normalement l'ecran entier. Pour les montrer dans
   une page de documentation, il faut donc un cadre qui joue ce role : hauteur
   bornee, colonne flex, et une fausse barre de titre pour qu'on voie ce qui
   reste en place et ce qui defile.
   ============================================================================= */

.sc-stack-demo {
    display: flex;
    flex-direction: column;
    height: 360px;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    overflow: hidden;
    background: var(--my-surface-page);
}

/* Fausse barre de titre : elle ne defile pas, ce qui rend visible le fait que
   seul le contenu bouge. */
.sc-stack-demo__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    padding: 0 var(--my-space-md);
    height: 56px;
    border-bottom: 1px solid var(--my-border-subtle);
    background: var(--my-surface-card);
    color: var(--my-text-heading);
    font-weight: var(--my-font-weight-bold);
}

.sc-stack-demo__bar-sub {
    color: var(--my-text-muted);
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-regular);
}

/*  Le faux ecran de l'application simulee : il tient la place du contenu et
    montre lequel des ecrans est selectionne. */
.sc-nav-sidebar-demo__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-xs);
    color: var(--my-text-muted);
    font-size: var(--my-font-size-sm);
    padding: var(--my-space-md);
    text-align: center;
}

.sc-nav-sidebar-demo__content .mud-icon-root.sc-nav-sidebar-demo__icon {
    font-size: 2.5rem;
    color: var(--my-neutral-300);
    margin-bottom: var(--my-space-xs);
}

.sc-nav-sidebar-demo__title {
    margin: 0;
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

.sc-nav-sidebar-demo__line {
    max-width: 34ch;
    margin: 0;
    line-height: var(--my-line-height-loose);
}

/* L'adresse est montree pour souligner qu'elle ne change jamais dans la barre
   d'adresse du navigateur : elle vit dans la demonstration, pas dans le routeur. */
.sc-nav-sidebar-demo__path {
    margin: var(--my-space-xs) 0 0;
    padding: 2px 8px;
    border-radius: var(--my-radius-sm);
    background: var(--my-surface-card);
    color: var(--my-text-muted);
    font-family: var(--my-font-mono);
    font-size: var(--my-font-size-xs);
}