/* FormaSkills — chantier « backoffice ».
   1) Menu latéral à trois niveaux (§103) : groupe → entrée → sous-entrées.
   2) Moyens de paiement conditionnels (§81) : liste « acceptés pour ce panier » et motifs.
   3) Règles d'affichage des moyens de paiement (écran d'administration).
   Jetons uniquement ; propriétés logiques (RTL) ; points de rupture de l'échelle. */

/* ---------------------------------------------------------------- 1. Menu à trois niveaux */

.nav-branch{position:relative;margin-block-end:2px}
/* Le bouton de dépliage reprend l'apparence d'une entrée : même hauteur, même pictogramme. */
.nav-item.nav-parent{inline-size:100%;background:none;border:0;cursor:pointer;text-align:start;font:inherit;font-weight:500;margin-block-end:0}
.nav-item.nav-parent:focus-visible,.nav-subitem:focus-visible{outline:var(--fs-focus-outline);outline-offset:var(--fs-focus-offset)}
.nav-parent .nav-branch-caret{inline-size:var(--fs-icon-xs);block-size:var(--fs-icon-xs);flex:none;margin-inline-start:auto;opacity:.65;transition:transform var(--fs-normal) var(--fs-ease)}
.nav-parent .count + .nav-branch-caret{margin-inline-start:var(--fs-space-2xs)}
.nav-branch:not(.open) .nav-branch-caret{transform:rotate(-90deg)}
[dir="rtl"] .nav-branch:not(.open) .nav-branch-caret{transform:rotate(90deg)}
/* La branche qui contient la page courante se lit sans la couleur seule : texte en gras + filet. */
.nav-branch.has-active > .nav-parent{color:var(--fs-sidebar-active-text);font-weight:600}
.nav-branch.has-active > .nav-parent .ic{color:var(--fs-primary-text)}

.nav-sub{list-style:none;margin:0;padding-block:2px;padding-inline:0;margin-inline-start:22px;border-inline-start:1px solid var(--fs-border-subtle)}
.nav-sub[hidden]{display:none}
.nav-sub li{margin:0}
.nav-subitem{display:flex;align-items:center;gap:var(--fs-space-xs);min-block-size:var(--fs-target-min);padding-block:7px;padding-inline:14px 12px;border-radius:var(--fs-radius-sm);color:var(--fs-sidebar-text);font-size:var(--fs-text-sm);font-weight:500;line-height:1.3;position:relative}
.nav-subitem:hover{background:var(--fs-surface-sunken);color:var(--fs-text)}
.nav-subitem .count{margin-inline-start:auto;background:var(--fs-accent-solid);color:var(--fs-on-solid);font-size:var(--fs-text-xs);font-weight:700;padding-block:0;padding-inline:6px;border-radius:var(--fs-radius-full);min-inline-size:20px;text-align:center}
.nav-subitem.active{background:var(--fs-sidebar-active);color:var(--fs-sidebar-active-text);font-weight:600}
/* Repère non chromatique de l'entrée courante : pastille en début de ligne, en plus du fond. */
.nav-subitem.active::before{content:"";position:absolute;inset-inline-start:-4px;inset-block:6px;inline-size:3px;border-radius:var(--fs-radius-full);background:var(--fs-primary)}

.nav-branch.animating .nav-sub{overflow:hidden;transition:block-size var(--fs-normal) var(--fs-ease)}

/* Barre latérale réduite (icônes seules, écran large) : les sous-entrées s'ouvrent en volet flottant
   à côté de l'icône. Position fixe : le volet échappe au défilement de la barre ; sa hauteur est
   posée par le script à la hauteur de l’entrée. */
.app.collapsed .nav-parent .nav-branch-caret{display:none}
.app.collapsed .nav-sub{display:none;position:fixed;inset-inline-start:calc(var(--fs-sidebar-w-collapsed) - 4px);z-index:var(--fs-z-dropdown);min-inline-size:220px;max-block-size:70vh;overflow-y:auto;margin:0;padding:var(--fs-space-xs);background:var(--fs-surface-raised);border:1px solid var(--fs-border);border-radius:var(--fs-radius-md);box-shadow:var(--fs-shadow-lg)}
.app.collapsed .nav-sub::before{content:attr(aria-label);display:block;padding-block:4px 8px;padding-inline:10px;font-size:var(--fs-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fs-text-faint)}
.app.collapsed .nav-branch.flyout-open .nav-sub{display:block}
.app.collapsed .nav-subitem span{display:inline}
.app.collapsed .nav-subitem .count{display:inline-block}

@media (max-width:1024px){
  /* Barre latérale en tiroir : libellés complets, accordéon en ligne, jamais de volet flottant. */
  .app.collapsed .nav-parent .nav-branch-caret{display:block}
  .app.collapsed .nav-sub{position:static;display:block;min-inline-size:0;max-block-size:none;overflow:visible;margin-inline-start:22px;padding:2px 0;background:none;border:0;border-inline-start:1px solid var(--fs-border-subtle);border-radius:0;box-shadow:none}
  .app.collapsed .nav-sub::before{content:none}
  .app.collapsed .nav-sub[hidden]{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nav-parent .nav-branch-caret,.nav-branch.animating .nav-sub{transition:none}
}

/* ---------------------------------------------------------------- 2. Moyens de paiement (§81) */

.pay-accepted{margin-block-start:var(--fs-space-md);padding-block-start:var(--fs-space-sm);border-block-start:1px solid var(--fs-border-subtle)}
.pay-accepted-title{display:block;font-size:var(--fs-text-sm);font-weight:600;margin-block-end:var(--fs-space-xs)}
.pay-accepted-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pay-accepted-list li{display:inline-flex;align-items:center;gap:6px;padding-block:4px;padding-inline:10px;border-radius:var(--fs-radius-full);background:var(--fs-surface-sunken);font-size:var(--fs-text-xs);font-weight:600;color:var(--fs-text-secondary)}
.pay-accepted-list .ic{inline-size:var(--fs-icon-xs);block-size:var(--fs-icon-xs);color:var(--fs-success-text)}
.pay-hidden-list{list-style:none;margin-block:var(--fs-space-xs) 0;margin-inline:0;padding:0;font-size:var(--fs-text-xs);color:var(--fs-text-muted)}
.pay-hidden-list li{display:flex;gap:6px;align-items:flex-start;margin-block-end:4px}
.pay-hidden-list .ic{inline-size:var(--fs-icon-xs);block-size:var(--fs-icon-xs);flex:none;margin-block-start:1px}

/* ---------------------------------------------------------------- 3. Règles d'affichage (administration) */

.pr-grid{display:grid;gap:var(--fs-space-md);grid-template-columns:1fr}
@media (min-width:1101px){.pr-grid{grid-template-columns:1fr 1fr}}
.pr-card .card-header{display:flex;align-items:center;gap:var(--fs-space-sm)}
.pr-card .card-header .ic{color:var(--fs-primary-text)}
.pr-card fieldset{border:0;margin:0 0 var(--fs-space-md);padding:0;min-inline-size:0}
.pr-card legend{font-weight:600;font-size:var(--fs-text-sm);margin-block-end:var(--fs-space-xs);padding:0}
.pr-checks{display:flex;flex-wrap:wrap;gap:var(--fs-space-xs) var(--fs-space-md)}
.pr-summary{font-size:var(--fs-text-xs);color:var(--fs-text-muted);margin-block-start:var(--fs-space-2xs)}
.pr-state{display:inline-flex;align-items:center;gap:4px}

/* ---------------------------------------------------------------- 4. Visionneuse de documents (F-49) */

/* Page autonome (sans app.css) : typographie de la plateforme, jetons chargés par tokens.css. */
.docviewer{font-family:var(--fs-font);font-size:var(--fs-text-base);line-height:1.5}

.docviewer .dv-page img{display:block;max-inline-size:100%;block-size:auto;-webkit-user-drag:none}
.docviewer .dv-prep{padding:var(--fs-space-lg);background:var(--fs-surface);border-radius:var(--fs-radius-md);box-shadow:var(--fs-shadow-sm)}
.docviewer .dv-prep strong{display:block;font-size:var(--fs-text-lg);color:var(--fs-text);margin-block-end:var(--fs-space-xs)}
.docviewer .dv-prep p{margin:0}