/* ==========================================================================
   OpenLabCSS — couche d'extension au-dessus de PicoCSS v2
   --------------------------------------------------------------------------
   Chargé APRÈS Pico et AVANT styles.css (cf. core/templates/core/base.html).

   Principes (cf. doc/openlabcss.md) :
   - Pico reste le socle de rendu. Aucun Bootstrap runtime.
   - Les tokens dérivent des --pico-* (le dark mode est hérité gratuitement).
     Net-neuf uniquement : les couleurs d'état (success/warning/danger/info/
     neutral).
   - openlab.css = layouts + composants. styles.css = overrides projet et cas
     limites (sélecteurs par id).
   - Règle des ≥ 2 zones : une classe n'est créée que si le pattern se répète
     dans au moins deux zones, ou s'il supprime un volume significatif d'inline
     sur une page critique.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Espacements — dérivés de --pico-spacing */
  --ol-space-xs: calc(var(--pico-spacing) * 0.25);
  --ol-space-sm: calc(var(--pico-spacing) * 0.5);
  --ol-space-md: var(--pico-spacing);
  --ol-space-lg: calc(var(--pico-spacing) * 1.5);
  --ol-space-xl: calc(var(--pico-spacing) * 2.5);

  /* Radius — dérivé de --pico-border-radius */
  --ol-radius: var(--pico-border-radius);

  /* Largeurs de page */
  --ol-page-width: 1024px;
  --ol-page-width-narrow: 40rem;

  /* Échelle typographique appliquée aux paliers Pico (surcharge projet dans
     styles.css). */
  --ol-font-scale: 100%;

  /* Couleur de marque (bouton par défaut) — réutilise la var ESIEA existante */
  --ol-accent: var(--esiea-orange);
  --ol-accent-hover: color-mix(in srgb, var(--esiea-orange) 88%, black 12%);

  /* Couleurs d'état — net-neuf (paires fond / texte) */
  --ol-success-bg: #d4edda;
  --ol-success-fg: #155724;
  --ol-warning-bg: #fff3cd;
  --ol-warning-fg: #856404;
  --ol-danger-bg: #f8d7da;
  --ol-danger-fg: #721c24;
  --ol-info-bg: #d1ecf1;
  --ol-info-fg: #0c5460;
  --ol-neutral-bg: #e2e3e5;
  --ol-neutral-fg: #383d41;

  /* Couleur de base des variantes "danger" (bouton, notice…) */
  --ol-danger: #c0392b;
  --ol-danger-hover: color-mix(in srgb, #c0392b 88%, black 12%);
}

/* Couleurs d'état — variante sombre (fonds assombris, texte éclairci).
   Réagit à la fois à la préférence système (mode auto) ET au thème forcé
   (data-theme="dark"), comme Pico lui-même. Le garde :not([data-theme="light"])
   empêche la media query de repeindre en sombre lorsque l'utilisateur force le
   clair sous un OS en mode sombre (cf. doc/openlabcss.md § Thème). */
:root[data-theme="dark"] {
  --ol-success-bg: color-mix(in srgb, #2ecc71 22%, transparent);
  --ol-success-fg: #8fe3ad;
  --ol-warning-bg: color-mix(in srgb, #f1c40f 22%, transparent);
  --ol-warning-fg: #f4d779;
  --ol-danger-bg: color-mix(in srgb, #e74c3c 22%, transparent);
  --ol-danger-fg: #f1a59c;
  --ol-info-bg: color-mix(in srgb, #3498db 22%, transparent);
  --ol-info-fg: #93cdee;
  --ol-neutral-bg: color-mix(in srgb, var(--pico-muted-color) 22%, transparent);
  --ol-neutral-fg: var(--pico-muted-color);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ol-success-bg: color-mix(in srgb, #2ecc71 22%, transparent);
    --ol-success-fg: #8fe3ad;
    --ol-warning-bg: color-mix(in srgb, #f1c40f 22%, transparent);
    --ol-warning-fg: #f4d779;
    --ol-danger-bg: color-mix(in srgb, #e74c3c 22%, transparent);
    --ol-danger-fg: #f1a59c;
    --ol-info-bg: color-mix(in srgb, #3498db 22%, transparent);
    --ol-info-fg: #93cdee;
    --ol-neutral-bg: color-mix(in srgb, var(--pico-muted-color) 22%, transparent);
    --ol-neutral-fg: var(--pico-muted-color);
  }
}

/* ==========================================================================
   2. LAYOUTS (priorité)
   ========================================================================== */

/* Largeurs de page — remplacent le `main.container-fluid` systématique. */
.page {
  width: 100%;
  max-width: var(--ol-page-width);
  margin-inline: auto;
}

.page--wide {
  max-width: none;
}

.page--narrow {
  max-width: var(--ol-page-width-narrow);
}

/* Bloc à rythme vertical. */
.section + .section {
  margin-block-start: var(--ol-space-lg);
}

/* Barre d'actions horizontale. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ol-space-sm);
}

.toolbar--between {
  justify-content: space-between;
}

/* Groupe d'éléments inline (actions, badges) — remplace l'ancien `.flex`. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ol-space-sm);
}

/* Les formulaires « bouton seul » alignés dans un cluster (ou une action-row)
   ne portent pas la marge de bloc par défaut de Pico. */
.cluster form,
.action-row form {
  margin: 0;
}

/* Rythme vertical entre enfants directs. */
.stack > * + * {
  margin-block-start: var(--ol-space-md);
}

/* Deux zones côte à côte (qui repassent en colonne si étroit). */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ol-space-lg);
}

.split > * {
  flex: 1 1 0;
  min-width: min(100%, 18rem);
}

/* Grille de catalogue (machines, articles, formations). Colonnes fixes (4 sur
   desktop) plutôt qu'auto-fill : privilégie la densité d'information à la
   taille des cartes. */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ol-space-md);
}

@media (max-width: 64rem) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

/* Grille de cartes d'actions : trois colonnes sur desktop, puis deux et une.
   Contrairement à `.resource-grid`, le nombre de colonnes est prévisible pour
   les hubs qui proposent un petit ensemble de raccourcis. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ol-space-md);
}

.card-grid > * {
  flex: 0 1 calc((100% - var(--ol-space-md) - var(--ol-space-md)) / 3);
  min-width: 0;
}

@media (max-width: 64rem) {
  .card-grid > * {
    flex-basis: calc((100% - var(--ol-space-md)) / 2);
  }
}

@media (max-width: 40rem) {
  .card-grid > * {
    flex-basis: 100%;
  }
}

/* Grille des pages détail (paires label / valeur). */
.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ol-space-sm) var(--ol-space-lg);
  align-items: baseline;
}

/* En-tête d'une page détail (formation, machine…) : icône à gauche, hgroup à
   droite. Neutralise les marges par défaut de Pico sur header/hgroup — tout
   l'espacement est piloté ici. */
.detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ol-space-md);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.detail-header__icon {
  position: relative;
  flex-shrink: 0;
}

.detail-header hgroup {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* ==========================================================================
   3. COMPOSANTS DE BASE
   ========================================================================== */

/* Conteneur type carte (dérivé d'`article`). */
.panel {
  background: var(--pico-card-background-color);
  border-radius: var(--ol-radius);
  box-shadow: var(--pico-card-box-shadow);
  padding: var(--ol-space-md);
}

/* Badge d'état. */
.status-badge {
  display: inline-block;
  padding: var(--ol-space-xs) var(--ol-space-sm);
  border-radius: var(--ol-radius);
  font-size: 0.75rem;
  line-height: 1.2;
  background: var(--ol-neutral-bg);
  color: var(--ol-neutral-fg);
}

.status-badge--success { background: var(--ol-success-bg); color: var(--ol-success-fg); }
.status-badge--warning { background: var(--ol-warning-bg); color: var(--ol-warning-fg); }
.status-badge--danger  { background: var(--ol-danger-bg);  color: var(--ol-danger-fg); }
.status-badge--info    { background: var(--ol-info-bg);    color: var(--ol-info-fg); }
.status-badge--neutral { background: var(--ol-neutral-bg); color: var(--ol-neutral-fg); }

/* Fil d'étapes d'un cycle de vie (#233 — cycle de vie d'une session).
   Primitive générique : l'avancement est porté par les jetons d'état
   (--ol-*-bg / -fg), sans aucune couleur littérale — contrairement au stepper
   .rm-step* de calendar.css, scopé calendrier et codé en hexa, qu'elle est
   destinée à remplacer à terme.
   Exception assumée à la règle des ≥ 2 zones : une seule zone consommatrice
   aujourd'hui (cf. la justification dans doc/openlabcss.md). */
.ol-steps {
  display: flex;
  flex-direction: column;
  gap: var(--ol-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ol-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ol-space-sm);
}

/* Pastille numérotée : neutre par défaut, colorée par le modificateur d'état. */
.ol-step__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--ol-neutral-bg);
  color: var(--ol-neutral-fg);
}

.ol-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--ol-space-xs);
}

.ol-step--done .ol-step__num    { background: var(--ol-success-bg); color: var(--ol-success-fg); }
.ol-step--current .ol-step__num { background: var(--ol-info-bg);    color: var(--ol-info-fg); }

/* Étape à venir ou sans objet : atténuée. L'opacité porte sur le seul libellé,
   jamais sur la pastille, pour ne pas passer sous le contraste minimal.
   `--na` = étape inapplicable (ex. « marquer les présences » sans aucun
   inscrit) : à distinguer de `--done`, qui annoncerait un travail accompli. */
.ol-step--todo .ol-step__body,
.ol-step--na .ol-step__body { opacity: 0.7; }

/* L'étape courante est le point d'attention : son libellé porte le poids. */
.ol-step--current .ol-step__label { font-weight: 600; }

/* Séparateur temporel de repli dans une timeline (ex. historique machine) :
   affiché uniquement quand aucun événement du jour n'est présent, pour marquer
   la bascule futur → passé. Repère « maintenant », d'où les jetons info. */
.history-separator td {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ol-info-fg);
  background: var(--ol-info-bg);
  padding-block: var(--ol-space-xs);
}

/* Repère temporel par ligne de l'historique machine (#44).
   Orange volontairement littéral (#e67e22) : lisible en clair comme en sombre,
   il fait aussi écho à l'orange des réservations machine du calendrier.
   Le style de trait porte le sens : pointillé = futur, plein = passé. */
tr.history-row--future { border-left: 2px dashed #e67e22; }
tr.history-row--past   { border-left: 3px solid #e67e22; }

/* Bloc « aujourd'hui » : fond orange + bordure latérale gauche ; bords haut/bas
   sur les première/dernière lignes du jour pour fermer le bloc. */
.history-row--today td { background: color-mix(in srgb, #e67e22 15%, transparent); }
.history-row--today td:first-child { border-left: 3px solid #e67e22; }
.history-row--today-first td { border-top: 2px solid #e67e22; }
.history-row--today-last td  { border-bottom: 2px solid #e67e22; }

/* Barre de filtres horizontale (formulaire de filtres). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ol-space-md);
  margin-block: var(--ol-space-md);
}

.filter-bar fieldset {
  flex: 1;
  min-width: 12rem;
  margin: 0;
}

/* Paire « Filtrer » / « Réinitialiser » : les garde solidaires quand la barre
   passe à la ligne (flex-wrap ci-dessus), sinon le bouton de reset se retrouve
   seul sur une rangée orpheline. */
.filter-bar__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--ol-space-sm);
}

/* Conteneur de table scrollable horizontalement. */
.table-wrap {
  overflow-x: auto;
}

/* Message d'information / alerte (remplaçant de `alert`). */
.notice {
  padding: var(--ol-space-md);
  border-radius: var(--ol-radius);
  border-inline-start: 4px solid var(--ol-neutral-fg);
  background: var(--ol-neutral-bg);
  color: var(--ol-neutral-fg);
}

.notice--success { background: var(--ol-success-bg); color: var(--ol-success-fg); border-inline-start-color: var(--ol-success-fg); }
.notice--warning { background: var(--ol-warning-bg); color: var(--ol-warning-fg); border-inline-start-color: var(--ol-warning-fg); }
.notice--danger  { background: var(--ol-danger-bg);  color: var(--ol-danger-fg);  border-inline-start-color: var(--ol-danger-fg); }
.notice--info    { background: var(--ol-info-bg);    color: var(--ol-info-fg);    border-inline-start-color: var(--ol-info-fg); }

/* Encart en colonne d'un .split : ne pas s'étirer sur la hauteur de la colonne
   voisine. `.split` laisse volontairement ses enfants s'étirer (deux cartes
   côte à côte se lisent mieux à hauteur égale), mais un encart de deux lignes
   ainsi dilaté devient un grand aplati de couleur — c'était le cas du bandeau
   « Session fermée » face à la carte de détails d'une session. */
.split > .notice { align-self: start; }

/* Toasts flottants (messages Django) — cf. components/messages.html + js/toast.js.
   Positionnés en haut, au centre de l'écran ; empilés verticalement. */
.ol-toast-container {
  position: fixed;
  top: var(--ol-space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--ol-space-sm);
  width: min(90vw, 32rem);
  pointer-events: none; /* le conteneur ne capte pas les clics ; les toasts oui */
}

.ol-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ol-space-sm);
  margin: 0;
  /* Bordure complète, colorée par l'état (currentColor = couleur du texte du
     variant notice--*). Écrase le border-inline-start hérité de .notice. */
  border: 2px solid currentColor;
  box-shadow: var(--pico-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  pointer-events: auto;
  /* État initial (avant animation d'entrée) — fondu + glissement. */
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.ol-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ol-toast.is-leaving {
  opacity: 0;
  transform: translateY(-0.75rem);
}

/* Le fond des variantes est translucide en dark mode (color-mix … transparent).
   Un toast flotte au-dessus du contenu : on recompose la teinte sur un fond
   opaque (surface Pico) pour éviter l'effet « voile ». Ne touche pas aux
   .notice inline. */
:root[data-theme="dark"] .ol-toast {
  --ol-success-bg: color-mix(in srgb, #2ecc71 22%, var(--pico-background-color));
  --ol-warning-bg: color-mix(in srgb, #f1c40f 22%, var(--pico-background-color));
  --ol-danger-bg:  color-mix(in srgb, #e74c3c 22%, var(--pico-background-color));
  --ol-info-bg:    color-mix(in srgb, #3498db 22%, var(--pico-background-color));
  --ol-neutral-bg: color-mix(in srgb, var(--pico-muted-color) 22%, var(--pico-background-color));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ol-toast {
    --ol-success-bg: color-mix(in srgb, #2ecc71 22%, var(--pico-background-color));
    --ol-warning-bg: color-mix(in srgb, #f1c40f 22%, var(--pico-background-color));
    --ol-danger-bg:  color-mix(in srgb, #e74c3c 22%, var(--pico-background-color));
    --ol-info-bg:    color-mix(in srgb, #3498db 22%, var(--pico-background-color));
    --ol-neutral-bg: color-mix(in srgb, var(--pico-muted-color) 22%, var(--pico-background-color));
  }
}

.ol-toast__body {
  flex: 1;
}

.ol-toast__close {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0 var(--ol-space-xs);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ol-toast { transition: opacity 0.32s ease; transform: none; }
  .ol-toast.is-leaving,
  .ol-toast.is-visible { transform: none; }
}

/* État vide (liste sans résultat). */
.empty-state {
  padding: var(--ol-space-xl) var(--ol-space-md);
  text-align: center;
  color: var(--pico-muted-color);
}

/* Ligne d'actions (groupe de boutons en fin de formulaire/section). */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ol-space-sm);
  margin-block-start: var(--ol-space-md);
}

/* Carte de catalogue cliquable (machines, articles…). Pensée pour vivre dans
   une `.resource-grid`, mais utilisable seule. */
.resource-card {
  position: relative;
  height: 100%;
  padding-bottom: calc(var(--pico-block-spacing-vertical) + 2.25rem);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.resource-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 12%);
}

/* Neutralise les marges par défaut de Pico sur hgroup/footer dans une carte :
   le positionnement est entièrement piloté par les classes dédiées ci-dessous. */
.resource-card hgroup {
  margin: 0;
}

/* Zone basse de la carte, plaquée en bas indépendamment de la hauteur du
   contenu au-dessus — aligne les badges entre cartes voisines dans une
   .resource-grid. `.resource-card` réserve la place via padding-bottom. */
.resource-card__footer {
  position: absolute;
  left: var(--pico-block-spacing-horizontal);
  right: var(--pico-block-spacing-horizontal);
  bottom: var(--pico-block-spacing-vertical);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Image de carte (couverture). Par défaut arrondie et contenue ; la variante
   `--bleed` la fait déborder jusqu'aux bords de la carte. */
.resource-card__media {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--ol-radius);
}

.resource-card__media--lg {
  max-height: 280px;
}

.resource-card__media--bleed {
  height: 150px;
  max-height: none;
  border-radius: 0;
  margin: calc(var(--pico-block-spacing-vertical) * -1)
          calc(var(--pico-block-spacing-horizontal) * -1)
          var(--pico-block-spacing-vertical);
}

/* Placeholder (carte sans image) — à combiner avec `--bleed`. */
.resource-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-weight: bold;
}

.resource-card__title {
  margin-bottom: var(--ol-space-xs);
}

.resource-card__meta {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
}

/* Description tronquée à deux lignes. */
.resource-card__desc {
  margin-block: var(--ol-space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.brand
{
  padding:0;
}

/* Marque (logo) dans la navbar : cadre la hauteur du <li> et aligne les deux
   logos côte à côte, centrés verticalement. */
.brand a {
  display: inline-flex;
  align-items: center;
  gap: var(--ol-space-sm);
}
.brand img {
  height: 3em;
  width: auto;
  transition: height 0.3s ease;
}

/* Header fixe : reste visible au scroll. `.is-scrolled` (posée par
   js/sticky-header.js) compacte le logo et le padding vertical des liens/
   boutons de nav (variable Pico déjà utilisée par leur `padding`) et ajoute
   une ombre pour détacher la barre du contenu qui défile dessous. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 900;
  background: var(--esiea-blue);
  transition: box-shadow 0.3s ease;
}

.site-header nav > ul > li > a,
.site-header nav > ul > li > button {
  color:#fff;
  transition: padding-block 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--pico-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.12));
  --pico-nav-element-spacing-vertical: 0.3rem;
}

.site-header.is-scrolled .brand img {
  height: 2.1em;
}

/* ==========================================================================
   4. BOUTONS & BREADCRUMB
   ========================================================================== */

/* Boutons : on scope les variables Pico sur les boutons UNIQUEMENT (et non au
   niveau document) afin de conserver l'orange de marque sans repeindre les
   liens, qui gardent le `--pico-primary` bleu du thème. Remplace l'ancien
   override global de styles.css et autorise les variantes ci-dessous. */
button,
[type="submit"],
[type="button"],
[type="reset"],
a[role="button"] {
  --pico-primary-background: var(--ol-accent);
  --pico-primary-border: var(--ol-accent);
  --pico-primary-hover-background: var(--ol-accent-hover);
  --pico-primary-hover-border: var(--ol-accent-hover);
  margin-bottom: 0;
}

/* Variante danger (suppression, action destructive). */
button.danger,
[type="submit"].danger,
[type="button"].danger,
a[role="button"].danger {
  --pico-primary-background: var(--ol-danger);
  --pico-primary-border: var(--ol-danger);
  --pico-primary-hover-background: var(--ol-danger-hover);
  --pico-primary-hover-border: var(--ol-danger-hover);
}

/* Variante ghost (action discrète : fond transparent, texte accent). */
button.ghost,
[type="button"].ghost,
a[role="button"].ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ol-accent);
}

button.ghost:hover,
[type="button"].ghost:hover,
a[role="button"].ghost:hover {
  background: color-mix(in srgb, var(--ol-accent) 12%, transparent);
}

[role=group], [role=search] {
 margin-bottom: 0;
}

/* Dans les barres (toolbar, filtres), les boutons ne s'étirent pas à 100 %
   comme dans un formulaire : ils reprennent une largeur automatique. */
.toolbar button,
.toolbar [role="button"],
.filter-bar button,
.filter-bar [role="button"] {
  width: auto;
}

/* Bouton compact (actions denses en cellule de tableau). */
.btn-compact {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* `.secondary` et `.outline` restent fournis par Pico (cf. doc). */

/* Breadcrumb : séparateurs en CSS (`::before`) au lieu de `<li>` textuels. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: var(--pico-muted-color);
}

.breadcrumb-item
{
  padding-right:0;
}
.breadcrumb-item+.breadcrumb-item
{
  padding-left:0;
}

.breadcrumb-item.active {
  color: var(--pico-muted-color);
}

/* ==========================================================================
   5. UTILITAIRES
   ========================================================================== */

/* Texte atténué (tirets « — », mentions secondaires). Reprend la couleur
   muette de Pico ; seul utilitaire toléré (cf. doc/openlabcss.md). */
.muted {
  color: var(--pico-muted-color);
}

.disabled
{
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}