/*
 * MyE360 · Composants
 * Chaque composant reprend les valeurs du code de l'artifact validé (D02 et références A à H).
 * Les variantes absentes de l'artifact sont signalées « dérivé ».
 */

/* ---------- Boutons (source : D02 Boutons) ---------- */
.mye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--mye-r-btn);
  background: var(--mye-primary);
  color: var(--mye-on-primary);
  font-size: var(--mye-fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform var(--mye-dur-press) ease, background-color var(--mye-dur-press) ease;
}

.mye-app a.mye-btn,
.mye-layer a.mye-btn { color: var(--mye-on-primary); }

.mye-btn:hover { background: var(--mye-primary-pressed); }
.mye-app a.mye-btn:hover { color: var(--mye-on-primary); }
.mye-btn:active { transform: scale(0.98); }

.mye-btn--secondary,
.mye-app a.mye-btn--secondary {
  background: var(--mye-surface-2);
  color: var(--mye-text);
}

.mye-btn--secondary:hover,
.mye-app a.mye-btn--secondary:hover { background: var(--mye-surface-3); color: var(--mye-text); }

.mye-btn--danger,
.mye-app a.mye-btn--danger {
  background: var(--mye-surface-2);
  color: var(--mye-danger);
}

.mye-btn--danger:hover { background: var(--mye-danger-soft); }

.mye-btn--tertiary,
.mye-app a.mye-btn--tertiary {
  height: 3rem;
  padding: 0 0.25rem;
  background: transparent;
  color: var(--mye-primary);
}

.mye-btn--tertiary:hover,
.mye-app a.mye-btn--tertiary:hover { background: transparent; color: var(--mye-primary-pressed); }

/* Bouton conditionnel (fournisseur activé seulement selon configuration) : contour pointillé de l'artifact */
.mye-btn--conditionnel,
.mye-app a.mye-btn--conditionnel,
.mye-btn--conditionnel:hover { background: transparent; color: var(--mye-text); border: 1.5px dashed var(--mye-control); }

.mye-btn--s { height: 2.75rem; padding: 0 1rem; font-size: var(--mye-fs-body-s); }
.mye-btn--block { display: flex; width: 100%; }

.mye-btn:disabled,
.mye-btn[aria-disabled="true"] {
  background: var(--mye-surface-3);
  color: var(--mye-text-2);
  transform: none;
}

.mye-btn[aria-busy="true"] { opacity: 0.9; pointer-events: none; }

.mye-spinner {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--mye-r-full);
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: mye-tourne 0.8s linear infinite;
}

@keyframes mye-tourne { to { transform: rotate(360deg); } }

/* Bouton rond de 48 px (source : référence A, en-tête) */
.mye-round {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--mye-r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mye-surface-2);
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-round { color: var(--mye-text); }

.mye-round__dot {
  position: absolute;
  top: 0.6875rem;
  right: 0.75rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-brand-red);
  box-shadow: 0 0 0 2px var(--mye-surface-2);
}

/* Lien d'action de 48 px (« Tout voir ») */
.mye-link {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--mye-fs-body-s);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Champs (source : D02 Champs) ---------- */
.mye-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mye-label {
  font-size: var(--mye-fs-body-s);
  font-weight: 600;
}

.mye-label__opt { font-weight: 400; color: var(--mye-text-2); }

.mye-input,
.mye-select,
.mye-textarea {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border-radius: var(--mye-r-m);
  border: 1px solid var(--mye-control);
  background: var(--mye-surface);
  color: var(--mye-text);
  font-size: var(--mye-fs-body-l);
}

.mye-textarea {
  height: auto;
  min-height: 8rem;
  padding: 0.875rem 1rem;
  line-height: 1.5;
  resize: vertical;
}

.mye-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2359616D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.mye-input[readonly] {
  border: 0;
  background: var(--mye-surface-2);
  color: var(--mye-text-2);
}

.mye-input[aria-invalid="true"],
.mye-select[aria-invalid="true"],
.mye-textarea[aria-invalid="true"] {
  border: 2px solid var(--mye-danger);
}

.mye-help {
  font-size: var(--mye-fs-small);
  color: var(--mye-text-2);
}

.mye-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--mye-fs-small);
  color: var(--mye-danger);
}

.mye-input-group { display: flex; gap: 0.5rem; }
.mye-input-group > .mye-input { flex: 1; min-width: 0; }

.mye-input-prefix {
  flex: none;
  height: 3.25rem;
  padding: 0 0.875rem;
  border-radius: var(--mye-r-m);
  border: 1px solid var(--mye-control);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  font-size: var(--mye-fs-body);
  font-weight: 600;
}

/* Mot de passe : bouton afficher dans le champ (dérivé du champ validé) */
.mye-password { position: relative; }
.mye-password .mye-input { padding-right: 3.5rem; }

.mye-password__toggle {
  position: absolute;
  right: 0.25rem;
  top: 0.125rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--mye-r-m);
  background: transparent;
  color: var(--mye-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Recherche (source : référence B) */
.mye-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3rem;
  padding: 0 0.875rem;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
  color: var(--mye-text-2);
}

.mye-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mye-text);
  font-size: var(--mye-fs-body);
}

.mye-search:focus-within { outline: 2px solid var(--mye-primary); outline-offset: 2px; }

/* ---------- Sélection (source : D02 Sélection) ---------- */
.mye-segment {
  display: flex;
  padding: 3px;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
}

.mye-segment__item {
  flex: 1;
  min-height: 2.625rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--mye-r-s);
  background: transparent;
  color: var(--mye-text-2);
  font-size: var(--mye-fs-body-s);
  font-weight: 500;
}

.mye-segment__item[aria-selected="true"],
.mye-segment__item[aria-pressed="true"] {
  background: var(--mye-surface);
  color: var(--mye-text);
  font-weight: 600;
  box-shadow: var(--mye-shadow-segment);
}

/* Puces de filtre : 36 px visibles dans une zone de 48 px */
.mye-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mye-chips--rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
  scrollbar-width: none;
}

.mye-chips--rail::-webkit-scrollbar { display: none; }

.mye-chip {
  flex: none;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  color: var(--mye-text);
}

.mye-chip > span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  font-size: var(--mye-fs-body-s);
  font-weight: 500;
}

.mye-chip[aria-pressed="true"] > span,
.mye-chip[aria-current="true"] > span {
  background: var(--mye-text);
  color: var(--mye-bg);
  font-weight: 600;
}

/* Option de réponse : contrôle, libellé, surface (source : référence E) */
.mye-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--mye-r-l);
  border: 1px solid var(--mye-sep);
  background: var(--mye-surface);
  cursor: pointer;
}

.mye-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mye-option__mark {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--mye-r-full);
  border: 2px solid var(--mye-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mye-on-primary);
}

.mye-option__mark .mye-i { visibility: hidden; }
.mye-option--multi .mye-option__mark { border-radius: var(--mye-r-xs); }

.mye-option__label {
  flex: 1;
  font-size: var(--mye-fs-body-l);
  line-height: 1.4;
}

.mye-option__state {
  display: none;
  font-size: var(--mye-fs-caption);
  font-weight: 600;
  color: var(--mye-primary);
}

.mye-option:has(input:checked) {
  /* Contour de 2 px sans décalage du contenu : bordure de 1 px doublée par une ombre intérieure */
  border-color: var(--mye-primary);
  box-shadow: inset 0 0 0 1px var(--mye-primary);
  background: var(--mye-primary-soft);
}

.mye-option:has(input:checked) .mye-option__mark {
  border: 0;
  background: var(--mye-primary);
}

.mye-option:has(input:checked) .mye-option__mark .mye-i { visibility: visible; }
.mye-option:has(input:checked) .mye-option__label { font-weight: 600; }
.mye-option:has(input:checked) .mye-option__state { display: inline; }
.mye-option:has(input:disabled) { cursor: not-allowed; opacity: 0.7; }

/* Interrupteur : vraie case à cocher, apparence iOS (source : D02) */
.mye-switch {
  position: relative;
  flex: none;
  width: 3.1875rem;
  height: 1.9375rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--mye-r-full);
  background: var(--mye-surface-3);
  cursor: pointer;
  transition: background-color var(--mye-dur) ease;
}

.mye-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1.6875rem;
  height: 1.6875rem;
  border-radius: var(--mye-r-full);
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform var(--mye-dur) ease;
}

.mye-switch:checked { background: var(--mye-success); }
.mye-switch:checked::after { transform: translateX(1.25rem); }
.mye-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* Case à cocher simple (dérivé : marque de l'option multiple) */
.mye-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 0;
  font-size: var(--mye-fs-body);
  line-height: 1.45;
  cursor: pointer;
}

.mye-check input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--mye-primary);
}

/* ---------- Listes (source : D02 Listes et sections) ---------- */
.mye-section { display: flex; flex-direction: column; gap: 0.25rem; }
.mye-section--gap { gap: 0.75rem; }

.mye-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.mye-list { display: flex; flex-direction: column; }
.mye-list--bleed { margin: 0 -1.25rem; }

.mye-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-row,
.mye-app a.mye-row:hover { color: var(--mye-text); }
.mye-app a.mye-row:hover .mye-row__title { color: var(--mye-primary); }

.mye-list--bleed .mye-row { padding: 0 1.25rem; }

.mye-row__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mye-r-m);
  background: var(--mye-primary-soft);
  color: var(--mye-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mye-row__icon--sand { background: var(--mye-media-sand); color: var(--mye-warning); }
.mye-row__icon--neutral { background: var(--mye-surface-2); color: var(--mye-text); }
.mye-row__icon--success { background: var(--mye-success-soft); color: var(--mye-success); }
.mye-row__icon--warning { background: var(--mye-warning-soft); color: var(--mye-warning); }
.mye-row__icon--danger { background: var(--mye-danger-soft); color: var(--mye-danger); }

.mye-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  padding: 0.875rem 0;
  border-bottom: 0.5px solid var(--mye-sep);
}

.mye-list > :last-child .mye-row__body,
.mye-list > .mye-row:last-child .mye-row__body,
.mye-row--last .mye-row__body { border-bottom: 0; }

.mye-row__text {
  flex: 1 1 auto;
  min-width: 45%;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mye-row__title { font-size: var(--mye-fs-body); font-weight: 600; }
.mye-row__title--regular { font-size: var(--mye-fs-body-l); font-weight: 400; }
.mye-row__meta { font-size: var(--mye-fs-small); color: var(--mye-text-2); }
.mye-row__end { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; font-size: var(--mye-fs-body-s); color: var(--mye-text-2); text-align: right; }
.mye-row__chevron { flex: none; color: var(--mye-text-2); }

.mye-row--compact { min-height: 3.5rem; }
.mye-row--compact .mye-row__body { padding: 1rem 0; }

/* Ligne d'une liste maître : ligne ordinaire en mobile, ligne sélectionnable en largeur (source : vue tablette G2) */
.mye-row--select { min-height: 4.5rem; }

@media (min-width: 64rem) {
  .mye-row--select {
    padding: 0.875rem 0.75rem;
    border-radius: var(--mye-r-l);
    min-height: 0;
  }

  .mye-row--select .mye-row__body { padding: 0; border: 0; }
  .mye-row--select .mye-row__chevron { display: none; }
  .mye-row--select[aria-current="true"],
  .mye-row--select[aria-current="page"] { background: var(--mye-primary-soft); }
}

/* Bloc date (source : référence B, événements) */
.mye-dateblock {
  flex: none;
  width: 3.25rem;
  height: 3.5rem;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mye-dateblock__m { font-size: var(--mye-fs-caption); font-weight: 700; color: var(--mye-brand-red); text-transform: uppercase; }
.mye-dateblock__d { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }

/* Avatars à initiales (source : référence A, G) */
.mye-avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-media-sky);
  color: var(--mye-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mye-fs-body-s);
  font-weight: 700;
  text-decoration: none;
}

.mye-avatar--s { width: 2.5rem; height: 2.5rem; font-size: var(--mye-fs-small); }
.mye-avatar--l { width: 4rem; height: 4rem; font-size: 1.125rem; }
.mye-avatar--xl { width: 5.5rem; height: 5.5rem; font-size: 1.5rem; }
.mye-avatar--sand { background: var(--mye-media-sand); color: var(--mye-warning); }
.mye-avatar--neutral { background: var(--mye-surface-3); color: var(--mye-text); }

/* ---------- Cartes (source : D02 Cartes) ---------- */
.mye-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--mye-r-xl);
  background: var(--mye-media-ink);
  aspect-ratio: 16 / 10;
}

.mye-media--43 { aspect-ratio: 4 / 3; border-radius: var(--mye-r-l); }
.mye-media--11 { aspect-ratio: 1 / 1; border-radius: var(--mye-r-m); }
.mye-media--169 { aspect-ratio: 16 / 9; border-radius: 1.25rem; }
.mye-media--flat { border-radius: 0; }
.mye-media--blue { background: var(--mye-media-blue); }
.mye-media--sky { background: var(--mye-media-sky); }
.mye-media--sand { background: var(--mye-media-sand); }

.mye-media img,
.mye-media__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mye-media__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-scrim);
  color: #FFFFFF;
  font-size: var(--mye-fs-caption);
  font-weight: 600;
}

.mye-media__badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--mye-r-full);
  background: #FFFFFF;
  color: #15171B;
  font-size: var(--mye-fs-caption);
  font-weight: 600;
}

.mye-card-media {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-card-media,
.mye-app a.mye-card-media:hover { color: var(--mye-text); }

.mye-card-media__body { display: flex; flex-direction: column; gap: 0.375rem; }

/* Carte éditoriale en largeur : média et texte côte à côte au-delà de 64rem (adaptation) */
@media (min-width: 64rem) {
  .mye-card-media--h {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.75rem;
    align-items: center;
  }
}

.mye-tile {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-tile,
.mye-app a.mye-tile:hover { color: var(--mye-text); }
.mye-tile__kicker { font-size: var(--mye-fs-caption); font-weight: 600; color: var(--mye-text-2); }
.mye-tile__title { font-size: var(--mye-fs-body); line-height: 1.3; font-weight: 600; }
.mye-tile__meta { font-size: var(--mye-fs-small); color: var(--mye-text-2); }

/* Carte de priorité : fond secondaire, sans bordure */
.mye-priority {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  border-radius: var(--mye-r-xl);
  background: var(--mye-surface-2);
}

.mye-priority__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--mye-fs-caption);
  font-weight: 600;
  color: var(--mye-info);
}

/* Bloc d'information à fond secondaire (dérivé de la carte de priorité, rayon 16 px de la vue G2) */
.mye-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.125rem;
  border-radius: var(--mye-r-l);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-panel,
.mye-app a.mye-panel:hover { color: var(--mye-text); }

.mye-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 48rem) {
  .mye-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .mye-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* Liste d'informations pratiques (source : référence C) */
.mye-facts { display: flex; flex-direction: column; }

.mye-fact {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 0.875rem 0;
  border-bottom: 0.5px solid var(--mye-sep);
}

.mye-fact:last-child { border-bottom: 0; }
.mye-fact > .mye-i { margin-top: 0.0625rem; color: var(--mye-text-2); }
.mye-fact__text { display: flex; flex-direction: column; gap: 0.125rem; }
.mye-fact__text strong { font-size: var(--mye-fs-body); }
.mye-fact__text span { font-size: var(--mye-fs-small); color: var(--mye-text-2); }

/* Définitions clé et valeur (dérivé des listes ouvertes) */
.mye-dl { display: flex; flex-direction: column; }

.mye-dl__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 0.5px solid var(--mye-sep);
  font-size: var(--mye-fs-body-s);
}

.mye-dl__row:last-child { border-bottom: 0; }
.mye-dl__row dt { color: var(--mye-text-2); }
.mye-dl__row dd { text-align: right; font-weight: 600; }

/* ---------- Statuts et engagement (source : D02 Statuts) ---------- */
.mye-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--mye-fs-body-s);
  color: var(--mye-text-2);
}

.mye-status--success { color: var(--mye-success); font-weight: 600; }
.mye-status--info { color: var(--mye-info); }
.mye-status--warning { color: var(--mye-warning); }
.mye-status--danger { color: var(--mye-danger); }
.mye-status--primary { color: var(--mye-primary); }

.mye-tag { font-size: var(--mye-fs-small); font-weight: 600; }
.mye-tag--success { color: var(--mye-success); }
.mye-tag--primary { color: var(--mye-primary); }
.mye-tag--muted { color: var(--mye-text-2); }
.mye-tag--warning { color: var(--mye-warning); }
.mye-tag--danger { color: var(--mye-danger); }

.mye-alert {
  display: flex;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--mye-r-l);
  background: var(--mye-info-soft);
  color: var(--mye-info);
  font-size: var(--mye-fs-body-s);
  line-height: 1.45;
}

.mye-alert > .mye-i { margin-top: 0.0625rem; }
.mye-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mye-alert__body strong { color: inherit; }
.mye-alert a { color: inherit; font-weight: 600; }
.mye-alert--warning { background: var(--mye-warning-soft); color: var(--mye-warning); }
.mye-alert--danger { background: var(--mye-danger-soft); color: var(--mye-danger); }
.mye-alert--success { background: var(--mye-success-soft); color: var(--mye-success); }
.mye-alert--neutral { background: var(--mye-surface-2); color: var(--mye-text); }

/* ---------- Chronologie verticale (source : D02, référence D) ---------- */
.mye-timeline { display: flex; flex-direction: column; }

.mye-timeline__item { display: flex; gap: 0.875rem; }

.mye-timeline__rail {
  flex: none;
  width: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mye-timeline__dot {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--mye-r-full);
  border: 2px solid var(--mye-sep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mye-on-primary);
}

.mye-timeline__line { flex: 1; width: 2px; background: var(--mye-sep); }
.mye-timeline__body { flex: 1; min-width: 0; padding-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.125rem; }
.mye-timeline__item:last-child .mye-timeline__body { padding-bottom: 0; }

.mye-timeline__item--done .mye-timeline__dot { border: 0; background: var(--mye-success); }
.mye-timeline__item--done .mye-timeline__line { background: var(--mye-success); }
.mye-timeline__item--current .mye-timeline__dot { border: 0; background: var(--mye-primary); }
.mye-timeline__item--current .mye-timeline__dot::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--mye-r-full); background: var(--mye-on-primary); }
.mye-timeline__item--pending .mye-timeline__dot { border: 2px dashed var(--mye-control); }
.mye-timeline__item--future .mye-timeline__title { color: var(--mye-text-2); }
.mye-timeline__title { font-weight: 600; }
.mye-timeline__item--current .mye-timeline__title { font-weight: 700; }

/* ---------- Panneau, confirmation, vide (source : D02) ---------- */
.mye-sheet {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  padding: 0.625rem 1.25rem 1.5rem;
  border: 0;
  border-radius: var(--mye-r-xl) var(--mye-r-xl) 0 0;
  background: var(--mye-surface);
  color: var(--mye-text);
  box-shadow: var(--mye-shadow-sheet);
}

.mye-sheet::backdrop { background: rgba(14, 16, 19, .4); }
.mye-sheet[open] { display: flex; flex-direction: column; gap: 0.75rem; }

.mye-sheet__grab {
  align-self: center;
  width: 2.25rem;
  height: 0.3125rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-surface-3);
}

.mye-sheet__actions { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }

@media (min-width: 48rem) {
  .mye-sheet {
    max-width: 30rem;
    margin: auto;
    padding: 1.5rem 1.75rem 1.75rem;
    border-radius: var(--mye-r-xl);
  }

  .mye-sheet__grab { display: none; }
}

.mye-empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--mye-r-xl);
  background: var(--mye-surface-2);
}

.mye-empty__title { font-size: 1.25rem; font-weight: 600; }
.mye-empty__text { font-size: var(--mye-fs-body); line-height: 1.5; color: var(--mye-text-2); }

/* ---------- Chargement et progression (source : D02) ---------- */
.mye-skel { border-radius: var(--mye-r-s); background: var(--mye-surface-2); }
.mye-skel--media { aspect-ratio: 16 / 10; border-radius: var(--mye-r-xl); }
.mye-skel--line { height: 0.875rem; }
.mye-skel--title { height: 1.375rem; border-radius: 0.5rem; }
.mye-skel--row { height: 4.5rem; border-radius: var(--mye-r-l); }
.mye-skel--bloc { height: 15rem; border-radius: var(--mye-r-xl); }
.mye-skel--tuile { aspect-ratio: 4 / 3; border-radius: var(--mye-r-l); }
.mye-skel--w40 { width: 40%; }
.mye-skel--w60 { width: 60%; }
.mye-skel--w75 { width: 75%; }

.mye-progress {
  display: block;
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: var(--mye-r-full);
  background: var(--mye-surface-3);
  color: var(--mye-primary);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

/* Élément natif progress : valeur portée par l'attribut value, sans style en ligne */
.mye-progress::-webkit-progress-bar { background: var(--mye-surface-3); border-radius: var(--mye-r-full); }
.mye-progress::-webkit-progress-value { background: var(--mye-primary); border-radius: var(--mye-r-full); }
.mye-progress::-moz-progress-bar { background: var(--mye-primary); border-radius: var(--mye-r-full); }

.mye-progress--thin { height: 0.25rem; }
.mye-progress--success::-webkit-progress-value { background: var(--mye-success); }
.mye-progress--success::-moz-progress-bar { background: var(--mye-success); }

/* ---------- Tableaux (source : D29, D30 et vue G2) ---------- */
.mye-table-wrap { overflow-x: auto; }

.mye-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mye-fs-body-s);
  line-height: 1.5;
}

.mye-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--mye-fs-caption);
  color: var(--mye-text-2);
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--mye-sep);
  vertical-align: bottom;
}

.mye-table td {
  padding: 0.75rem;
  border-bottom: 0.5px solid var(--mye-sep);
  vertical-align: top;
}

.mye-table td.mye-num,
.mye-table th.mye-num { text-align: right; }

/* ---------- Étapes d'un assistant (dérivé de la progression) ---------- */
.mye-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.mye-steps__label { display: flex; justify-content: space-between; font-size: var(--mye-fs-small); color: var(--mye-text-2); }
.mye-steps__label strong { color: var(--mye-text); }

.mye-stepnav { display: none; }

@media (min-width: 64rem) {
  .mye-stepnav { display: flex; flex-direction: column; }
  .mye-stepnav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.75rem;
    border-radius: var(--mye-r-m);
    color: var(--mye-text-2);
    text-decoration: none;
    font-size: var(--mye-fs-body-s);
  }
  .mye-stepnav a[aria-current="step"] { background: var(--mye-primary-soft); color: var(--mye-primary); font-weight: 600; }
  .mye-stepnav a.is-done { color: var(--mye-text); }
}

/* ---------- Composants métier ---------- */

/* Bandeau d'identité contrasté (source : référence H) */
.mye-idband {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1rem;
  border-radius: var(--mye-r-l);
  background: var(--mye-text);
  color: var(--mye-bg);
}

.mye-idband .mye-avatar { width: 2.5rem; height: 2.5rem; background: var(--mye-surface-3); color: var(--mye-text); font-size: var(--mye-fs-small); }
.mye-idband__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mye-idband__text strong { font-size: var(--mye-fs-body-l); }
.mye-idband__text span { font-size: var(--mye-fs-small); opacity: 0.85; }
.mye-idband__end { font-size: var(--mye-fs-small); font-weight: 600; }

/* Critère à saisie exacte (source : références H et H2) */
.mye-criterion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.75rem;
  border-bottom: 0.5px solid var(--mye-sep);
}

.mye-criterion:last-child { border-bottom: 0; }
.mye-criterion__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mye-criterion__name { font-size: var(--mye-fs-body); font-weight: 600; }
.mye-criterion__meta { font-size: var(--mye-fs-small); color: var(--mye-text-2); }

.mye-criterion__step {
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  font-size: 1.25rem;
}

.mye-criterion__input {
  flex: none;
  width: 4rem;
  height: 3rem;
  border-radius: var(--mye-r-m);
  border: 1.5px solid var(--mye-text);
  background: var(--mye-surface);
  color: var(--mye-text);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
}

.mye-criterion__input:placeholder-shown { border: 1.5px dashed var(--mye-control); }
.mye-criterion__input[aria-invalid="true"] { border: 2px solid var(--mye-danger); }

/* Palette de questions QCM (source : référence E) */
.mye-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.mye-palette__cell {
  position: relative;
  height: 3.25rem;
  border-radius: var(--mye-r-m);
  border: 1.5px solid var(--mye-control);
  background: var(--mye-surface);
  color: var(--mye-text);
  font-size: var(--mye-fs-body);
  font-weight: 600;
}

.mye-palette__cell.is-answered { border: 0; background: var(--mye-primary); color: var(--mye-on-primary); }
.mye-palette__cell[aria-current="true"] { border: 2px solid var(--mye-text); }
.mye-palette__cell.is-answered[aria-current="true"] { box-shadow: 0 0 0 2px var(--mye-bg), 0 0 0 4px var(--mye-text); border: 0; }

.mye-palette__flag {
  position: absolute;
  top: 0.25rem;
  right: 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--mye-brand-yellow);
}

.mye-palette__cell.is-pending { border: 1.5px dashed var(--mye-primary); background: var(--mye-primary-soft); color: var(--mye-text); }
.mye-palette__cell:disabled { cursor: not-allowed; }

.mye-palette-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--mye-fs-caption); color: var(--mye-text-2); }
.mye-palette-legende li { display: flex; align-items: center; gap: 0.375rem; }
.mye-palette-legende__plein { width: 0.875rem; height: 0.875rem; border-radius: 4px; background: var(--mye-primary); }
.mye-palette-legende__vide { width: 0.875rem; height: 0.875rem; border-radius: 4px; border: 1.5px solid var(--mye-control); }
.mye-palette-legende__flag { width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--mye-brand-yellow); }

/* Confrontation : deux portraits face à face (source : D02 composants métier) */
.mye-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.mye-versus__side { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.mye-versus__vs { font-size: var(--mye-fs-small); font-weight: 700; color: var(--mye-text-2); }

/* Ligne d'appel en segment (source : D02, D23) */
.mye-attend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  border-bottom: 0.5px solid var(--mye-sep);
}

.mye-attend__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mye-attend .mye-segment { flex: none; width: 12.5rem; }

/* Question versionnée (source : D02, D09) */
.mye-qversion { display: flex; flex-direction: column; gap: 0.375rem; }
.mye-qversion__meta { font-size: var(--mye-fs-small); color: var(--mye-text-2); }

/* Bouton de démonstration réseau (source : référence E, contour pointillé) */
.mye-demo-pill {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px dashed var(--mye-control);
  border-radius: var(--mye-r-full);
  background: var(--mye-bg);
  color: var(--mye-text-2);
  font-size: var(--mye-fs-caption);
}

/* Code du jour : huit cases (dérivé des champs validés) */
.mye-code {
  width: 100%;
  height: 3.75rem;
  padding: 0 1rem;
  border-radius: var(--mye-r-m);
  border: 1px solid var(--mye-control);
  background: var(--mye-surface);
  color: var(--mye-text);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Séparateur fin */
.mye-sep { height: 0; border: 0; border-top: 0.5px solid var(--mye-sep); margin: 0; }

/* Définition empilée : intitulé puis valeur (dérivé) */
.mye-dl__row--stack { flex-direction: column; gap: 0.25rem; }
.mye-dl__row--stack dd { text-align: left; font-weight: 400; color: var(--mye-text); }

/* Bloc repliable natif (dérivé des listes ouvertes) */
.mye-details > summary {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mye-primary);
  font-weight: 600;
  font-size: var(--mye-fs-body-s);
  cursor: pointer;
  list-style: none;
}

.mye-details > summary::-webkit-details-marker { display: none; }
.mye-details > summary::after { content: "+"; font-size: 1.125rem; font-weight: 500; }
.mye-details[open] > summary::after { content: "−"; }

.mye-text-center { text-align: center; }

/* Bouton rond sans fond (référence E, palette) */
.mye-round--nu { background: transparent; }

/* Pastille d'icône d'issue : reçu, temps écoulé, suspension (source : référence E, reçu) */
.mye-icon-badge {
  width: 4rem;
  height: 4rem;
  border-radius: var(--mye-r-full);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mye-icon-badge--success { background: var(--mye-success-soft); color: var(--mye-success); }
.mye-icon-badge--warning { background: var(--mye-warning-soft); color: var(--mye-warning); }
.mye-icon-badge--danger { background: var(--mye-danger-soft); color: var(--mye-danger); }
.mye-icon-badge--info { background: var(--mye-info-soft); color: var(--mye-info); }

/* Règles de mot de passe lisibles (source : D03) */
.mye-regles { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--mye-fs-small); color: var(--mye-text-2); }
.mye-regles li { display: flex; align-items: center; gap: 0.375rem; }
.mye-regles li.is-ok { color: var(--mye-success); }

/* Deux champs côte à côte au-delà de 48rem (prénom et nom) */
.mye-cols--2-champs { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 48rem) {
  .mye-cols--2-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mye-text { color: var(--mye-text); }

/* Titre de groupe de réglages : 14 px, 600, secondaire (source : référence F) */
.mye-group { display: flex; flex-direction: column; }
.mye-group__title { padding-bottom: 0.375rem; font-size: var(--mye-fs-small); font-weight: 600; color: var(--mye-text-2); }

/* Identité du compte : portrait de 88 px, nom 22 px (source : référence F) */
.mye-identity { display: flex; align-items: center; gap: 1rem; }
.mye-identity .mye-avatar { width: 5.5rem; height: 5.5rem; font-size: 1.75rem; }
.mye-identity__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mye-identity__name { font-size: var(--mye-fs-h2); line-height: 1.2; font-weight: 700; }
.mye-identity__meta { font-size: var(--mye-fs-body-s); color: var(--mye-text-2); line-height: 1.4; }

/* Bandeau d'assistance administrative (source : D04 COM-ASSIST-BANDEAU) */
.mye-assist {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--mye-text);
  color: var(--mye-bg);
  font-size: var(--mye-fs-small);
}

.mye-assist strong { color: var(--mye-bg); }
.mye-app .mye-assist a { color: var(--mye-bg); font-weight: 600; }

/* Utilitaires d'affichage selon la largeur */
.mye-flex-1 { flex: 1; min-width: 0; }
.mye-btn--h48 { height: 3rem; }

@media (max-width: 63.99rem) {
  .mye-app .mye-hide-mobile { display: none; }
}

@media (min-width: 64rem) {
  .mye-app .mye-hide-desktop { display: none; }
}

/* Ligne de liste déclenchant une action (bouton) : même apparence qu'un lien de liste */
.mye-row--bouton { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; }

/* Tableau de réglages : interrupteurs alignés au centre */
.mye-table--reglages th[scope="row"] { font-size: var(--mye-fs-body); font-weight: 500; color: var(--mye-text); display: flex; flex-direction: column; gap: 0.125rem; }
.mye-table--reglages td { vertical-align: middle; width: 5rem; }

/* Cadre de recadrage photo : carré plafonné */
.mye-photo-cadre { max-width: 20rem; }

/* Colonne d'accès utilisée dans une page de l'espace */
.mye-access--page { padding-left: 0; padding-right: 0; }

/* Semaine compacte de l'agenda formateur (source : D05 COM-AGENDA-CALENDRIER) */
.mye-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.mye-semaine button { min-height: 3.5rem; border: 0; border-radius: var(--mye-r-m); background: transparent; color: var(--mye-text); font-size: var(--mye-fs-body-l); font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; }
.mye-semaine button span { font-size: var(--mye-fs-caption); font-weight: 500; color: var(--mye-text-2); }
.mye-semaine button[aria-pressed="true"] { background: var(--mye-text); color: var(--mye-bg); }
.mye-semaine button[aria-pressed="true"] span { color: var(--mye-bg); }

/* Texte barré d'une ancienne valeur (version remplacée, date reportée) */
.mye-barre { text-decoration: line-through; color: var(--mye-text-2); }

/* Fil de messages d'une demande (source : D05 COM-AIDE-DEMANDE-DETAIL) */
.mye-fil { display: flex; flex-direction: column; gap: 1rem; }
.mye-fil__msg { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; border-radius: var(--mye-r-l); background: var(--mye-surface-2); }
.mye-fil__msg--equipe { background: var(--mye-primary-soft); }
.mye-fil__auteur { font-size: var(--mye-fs-small); color: var(--mye-text-2); }

/* Étapes numérotées d'un article (source : D05 COM-AIDE-ARTICLE) */
.mye-etapes { counter-reset: etape; display: flex; flex-direction: column; gap: 1rem; }
.mye-etapes li { counter-increment: etape; display: flex; gap: 0.875rem; align-items: flex-start; line-height: 1.5; }
.mye-etapes li::before { content: counter(etape); flex: none; width: 2rem; height: 2rem; border-radius: var(--mye-r-full); background: var(--mye-surface-2); display: flex; align-items: center; justify-content: center; font-size: var(--mye-fs-small); font-weight: 700; }

/* Point de notification non lue (source : D05 COM-NOTIF-CENTRE) */
.mye-notif-point { flex: none; align-self: flex-start; margin-top: 1.375rem; width: 0.5rem; height: 0.5rem; border-radius: var(--mye-r-full); background: var(--mye-primary); }
.mye-notif-point--lu { background: transparent; }
.mye-notifs .mye-row:not(.is-non-lu) .mye-row__title { font-weight: 400; }

/* En-tête de recherche : champ et Annuler */
.mye-recherche-tete { flex-wrap: nowrap; }

/* Indicateur d'attente large (remise en cours, source : référence E) */
.mye-spinner--l { width: 2.75rem; height: 2.75rem; border-width: 3px; border-color: var(--mye-primary-soft); border-top-color: var(--mye-primary); }

/* Bilan en liste à valeurs fortes (référence E, récapitulatif) */
.mye-dl--grand .mye-dl__row { min-height: 3.5rem; align-items: center; font-size: var(--mye-fs-body); }
.mye-dl--grand .mye-dl__row dt { color: var(--mye-text); }


/* ==========================================================================
   Composants métier ajoutés pendant la déclinaison des lots D06 à D28
   (extraits des planches mobiles ; une seule définition par composant)
   ========================================================================== */

/* Segment de navigation par liens : apparence du segment validé, chaque onglet est une page (D06, D14, D17) */
.mye-segment__lien { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0.25rem; text-align: center; text-decoration: none; }
.mye-app a.mye-segment__lien { color: var(--mye-text-2); }
.mye-app .mye-segment__lien[aria-current="page"] { background: var(--mye-surface); color: var(--mye-text); font-weight: 600; box-shadow: var(--mye-shadow-segment); }

/* carte de priorité cliquable (planche D06, carte du QCM) (lot D06) */
.mye-app a.mye-priority { color: var(--mye-text); text-decoration: none; }
.mye-app a.mye-priority:hover .mye-h2 { color: var(--mye-primary); }

/* écran d'issue centré sur une action (accusé, refus, session) (lot D06) */
.mye-issue { padding-top: 3rem; }

/* définition empilée dans un bilan à valeurs fortes, alignée à gauche (lot D06) */
.mye-dl--grand .mye-dl__row--stack { align-items: flex-start; }

/* note publiée (planche D08, 48 px, dénominateur 24 px secondaire) (lot D08) */
.mye-score { font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mye-score__sur { font-size: 1.5rem; font-weight: 600; color: var(--mye-text-2); }

/* progression avertissement (compétence en cours) (lot D08) */
.mye-progress--warning::-webkit-progress-value { background: var(--mye-warning); }
.mye-progress--warning::-moz-progress-bar { background: var(--mye-warning); }

/* ligne de proposition éditable (bonne réponse, texte, Monter, Descendre) (lot D09) */
.mye-proposition { display: flex; align-items: center; gap: 0.5rem; }
.mye-proposition > input[type="radio"],
.mye-proposition > input[type="checkbox"] { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--mye-primary); }
.mye-proposition > .mye-input { flex: 1; min-width: 0; }

/* étapes, chaque entrée de la liste de repères occupe la largeur (lot D09) */
.mye-stepnav li { display: flex; flex-direction: column; }

/* ligne de différence entre deux versions (lot D09) */
.mye-diff { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--mye-r-m); background: var(--mye-surface-2); }

/* bouton à l'apparence de lien (sans fond ni bordure) (lot D12) */
.mye-btn--nu { padding: 0; border: 0; background: transparent; color: var(--mye-primary); cursor: pointer; }

/* bloc secondaire en ligne avec vignette (référence B, Club360) (lot D12) */
.mye-panel--ligne { flex-direction: row; align-items: center; gap: 0.875rem; padding: 0.75rem; }
.mye-vignette { flex: none; width: 4.5rem; height: 4.5rem; }

/* l'aimantation de défilement respecte la marge de la collection (lot D12) */
.mye-rail, .mye-chips--rail { scroll-padding-inline: 1.25rem; }

/* bloc bordé (source : référence D, convocation dans la chronologie) (lot D13) */
.mye-bloc-borde {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: var(--mye-r-l);
  border: 1px solid var(--mye-sep);
}

/* grand bloc date primaire (source : référence D, 56 × 60 px) (lot D13) */
.mye-dateblock--primaire { width: 3.5rem; height: 3.75rem; background: var(--mye-primary); }
.mye-dateblock--primaire .mye-dateblock__m,
.mye-dateblock--primaire .mye-dateblock__d { color: var(--mye-on-primary); }
.mye-dateblock--primaire .mye-dateblock__d { font-size: 1.5rem; line-height: 1; }

/* lien de document dans un bloc (source : référence D, convocation PDF) (lot D13) */
.mye-fichier {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0 0.875rem;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  text-decoration: none;
}

.mye-app a.mye-fichier,
.mye-app a.mye-fichier:hover { color: var(--mye-text); }
.mye-fichier__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mye-fichier__text strong { font-size: var(--mye-fs-body-s); }
.mye-fichier__text span { font-size: var(--mye-fs-caption); color: var(--mye-text-2); }

/* comparaison avant et désormais (source : D14 ETU-CONVOC-MODIFIEE) (lot D13) */
.mye-avant-apres { width: 100%; border-collapse: collapse; font-size: var(--mye-fs-body-s); }
.mye-avant-apres th { text-align: left; font-size: var(--mye-fs-caption); font-weight: 600; color: var(--mye-text-2); padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--mye-sep); }
.mye-avant-apres td { padding: 0.75rem 0.5rem 0.75rem 0; border-bottom: 0.5px solid var(--mye-sep); vertical-align: top; }
.mye-avant-apres td:nth-child(2) { color: var(--mye-text-2); text-decoration: line-through; }
.mye-avant-apres td:nth-child(3) { font-weight: 600; }

/* barres horizontales avec valeur écrite (source : D15 ETU-STATS-UNIVERSITES) (lot D13) */
.mye-barres { display: flex; flex-direction: column; gap: 1rem; }
.mye-barres__item { display: flex; flex-direction: column; gap: 0.375rem; }
.mye-barres__tete { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--mye-fs-body-s); }
.mye-barres__tete span { color: var(--mye-text-2); }
.mye-barres .mye-progress { height: 0.5rem; }

/* ligne de chronologie avec statut écrit à droite (source : référence D) (lot D13) */
.mye-timeline__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.mye-timeline__statut { flex: none; font-size: var(--mye-fs-caption); font-weight: 600; }

/* confrontation en grand et à trois (D14 ETU-CONFR-FICHE, CONFR-TROIS) (lot D14) */
.mye-versus--grand { padding: 1.25rem 0; }
.mye-versus3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 1.25rem 0; }
.mye-avatar--vide { background: transparent; border: 2px dashed var(--mye-control); }

/* billet numérique (D16 ETU-EVT-TICKET), réutilisable par Alumni et événements (lot D16-D18) */
.mye-ticket { display: flex; flex-direction: column; border-radius: var(--mye-r-xl); border: 1px solid var(--mye-sep); background: var(--mye-surface); overflow: hidden; }
.mye-ticket__head { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem; }
.mye-ticket__code { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem; border-top: 1px dashed var(--mye-sep); text-align: center; }
.mye-ticket__ref { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* code QR de démonstration (motif neutre, jamais un vrai code) (lot D16-D18) */
.mye-qr { width: 10rem; height: 10rem; color: var(--mye-text); }
.mye-qr .mye-i { width: 100%; height: 100%; stroke-width: 1.25; }

/* aperçu de certificat aux proportions A4 paysage (D18 ETU-CERT-DETAIL) (lot D16-D18) */
.mye-certif {
  aspect-ratio: 297 / 210;
  border-radius: var(--mye-r-m);
  border: 1px solid var(--mye-sep);
  background: var(--mye-surface);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}

.mye-certif__marque { font-size: var(--mye-fs-caption); font-weight: 700; letter-spacing: 0.12em; color: var(--mye-brand-red); }
.mye-certif__type { font-family: var(--mye-font-serif); font-size: 1.25rem; font-weight: 700; }
.mye-certif__nom { font-size: var(--mye-fs-body-l); font-weight: 600; }
.mye-certif__num { font-size: var(--mye-fs-caption); color: var(--mye-text-2); font-variant-numeric: tabular-nums; }
.mye-certif--remplace { opacity: 0.6; }
.mye-certif--compact { padding: 0.75rem; }
.mye-certif--compact .mye-certif__type { font-size: var(--mye-fs-body); }

/* badge numérique rond (lot D16-D18) */
.mye-badge-rond { width: 4.5rem; height: 4.5rem; border-radius: var(--mye-r-full); background: var(--mye-media-sand); color: var(--mye-warning); display: flex; align-items: center; justify-content: center; }
.mye-badge-rond--vide { background: var(--mye-surface-2); color: var(--mye-text-2); border: 2px dashed var(--mye-control); }


/* critère sans filet bas (quantité isolée dans un panneau) (lot D19) */
.mye-criterion--nu { border-bottom: 0; }

/* lecteur vidéo dessiné (références H et H2), remplacé par Plyr à l'intégration (lot D26) */
.mye-lecteur {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--mye-r-l);
  background: #08090B;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mye-lecteur__play {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--mye-r-full);
  background: rgba(255, 255, 255, .2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mye-lecteur__barre {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.625rem;
  width: auto;
  height: 3px;
  border: 0;
  border-radius: var(--mye-r-full);
  background: rgba(255, 255, 255, .3);
  appearance: none;
  -webkit-appearance: none;
}

.mye-lecteur__barre::-webkit-progress-bar { background: rgba(255, 255, 255, .3); border-radius: var(--mye-r-full); }
.mye-lecteur__barre::-webkit-progress-value { background: #FFFFFF; border-radius: var(--mye-r-full); }
.mye-lecteur__barre::-moz-progress-bar { background: #FFFFFF; border-radius: var(--mye-r-full); }

.mye-lecteur__commandes { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mye-lecteur__saut { font-size: var(--mye-fs-caption); font-weight: 700; }
.mye-app .mye-lecteur__lire { width: 4rem; height: 4rem; background: var(--mye-text); color: var(--mye-bg); }
.mye-lecteur__duree { position: absolute; right: 0.625rem; bottom: 0.625rem; padding: 0.125rem 0.5rem; border-radius: var(--mye-r-xs); background: rgba(0, 0, 0, .6); color: #FFFFFF; font-size: var(--mye-fs-caption); font-variant-numeric: tabular-nums; }

/* rappel « Revoir » de la prestation (référence H, onglet Évaluation) (lot D26) */
.mye-jury-revoir {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--mye-r-m);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  font-size: var(--mye-fs-small);
  text-align: left;
}

/* matrice d'états (présidence, finale) : libellé écrit, couleur en signe secondaire (lot D26) */
.mye-etat-cellule { font-size: var(--mye-fs-small); font-weight: 600; white-space: nowrap; }

/* bloc d'information cliquable (temps officiel en lecture seule) (lot D26) */
.mye-panel--bouton { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }

/* Texte d'aide en bloc sous une valeur ou un libellé (lots D12, D19) */
.mye-block { display: block; }

/* « Tout voir » ne passe jamais à la ligne à côté d'un titre long (lot D12) */
.mye-section-head .mye-link { flex: none; }

/* Étape menée en parallèle (incubation pendant une étape compétitive) : anneau primaire et point (source : référence D) */
.mye-timeline__item--parallele .mye-timeline__dot { border: 2px solid var(--mye-primary); background: var(--mye-bg); }
.mye-timeline__item--parallele .mye-timeline__dot::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--mye-r-full); background: var(--mye-primary); }