/*
 * page.css, apparence de tout ce qui n'est pas l'écran LCD : la barre
 * applicative, le titre de page, les cartes, et le composant lui-même
 * (scène sombre, panneau, pagination des étapes, journal, formulaires
 * de l'éditeur).
 *
 * Les trois pages (accueil, édition, consultation) partagent ce
 * fichier : elles se ressemblent parce qu'elles s'habillent au même
 * endroit. Corriger une règle ici la corrige aussi dans les guides déjà
 * publiés, qui chargent ce même fichier.
 *
 * Toutes les couleurs et toutes les mesures viennent de jetons.css
 * (ARCADIA). Aucune valeur en dur ici : si une teinte manque, elle se
 * crée là-bas, pas au milieu d'une règle.
 *
 * Les polices sont demandées par les pages hôtes ; sans accès réseau,
 * tout retombe sur des polices système et rien ne casse.
 */

/* =======================================================================
 *  Caché veut dire caché
 * ===================================================================== */

/*
 * L'attribut « hidden » du HTML ne cache un élément que par une règle
 * par défaut du navigateur : display:none, de la plus faible priorité.
 * Toute classe qui pose un display (flex, inline-flex…) l'écrase, et
 * l'élément reste à l'écran alors que le programme le croit caché.
 *
 * Le produit s'en sert partout : le fil d'Ariane, la liste des guides à
 * ouvrir, la case « version supplémentaire », le bloc de secours du
 * catalogue. On tranche donc une fois pour toutes, ici : caché gagne.
 */
[hidden] { display: none !important; }

/* =======================================================================
 *  La page hôte
 * ===================================================================== */

.abb-mc-page {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  background: var(--abb-background);
  color: var(--abb-text-primary);
  font-family: var(--abb-police);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /*
   * La hauteur de ce qui reste collé en haut de la fenêtre. Par défaut,
   * la seule barre applicative : c'est le cas de l'accueil, de la
   * consultation et de tous les guides déjà publiés. Une page qui porte
   * en plus les onglets d'espace de travail la redéfinit pour elle
   * seule (.abb-mc-page--onglets). Tout ce qui se colle sous les barres
   * mesure sa distance là-dessus, et nulle part ailleurs.
   */
  --abb-hauteur-barres: var(--abb-hauteur-entete);
}

.abb-mc-page *,
.abb-mc-page *::before,
.abb-mc-page *::after {
  box-sizing: border-box;
}

/* ---- barre applicative ------------------------------------------------
 *
 * Une bande blanche de 48 px, toujours visible : le menu, la marque, le
 * nom du produit, où l'on se trouve, et les deux outils de droite. C'est
 * l'en-tête ARCADIA, resserré pour laisser la place au contenu.
 */

.abb-mc-page__barre {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--abb-hauteur-entete);
  padding: 0 16px;
  background: var(--abb-white);
  border-bottom: 1px solid var(--abb-grey-400);
}

.abb-mc-page__barre-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--abb-rayon);
  background: none;
  color: var(--abb-text-secondary);
  cursor: pointer;
  transition: background var(--abb-transition), color var(--abb-transition);
}

.abb-mc-page__barre-icone svg { width: 20px; height: 20px; display: block; }
.abb-mc-page__barre-icone:hover { background: var(--abb-grey-200); color: var(--abb-text-primary); }
.abb-mc-page__barre-icone:active { background: var(--abb-grey-200); color: var(--abb-grey-700); }

/* Le « ? » mène à la page À propos : c'est un lien, pas un bouton. Il
   garde l'apparence des autres icônes de la barre, sans soulignement. */
a.abb-mc-page__barre-icone { text-decoration: none; }

.abb-mc-page__barre-icone--actuelle {
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
}

/* ---- menu des trois tirets (programme/menu.js) -------------------------
 *
 * Un tiroir plein hauteur qui glisse depuis le bord gauche, sur le
 * modèle du menu du site abb.com, plutôt qu'un panneau accroché sous le
 * bouton. Un rideau (.abb-mc-menu-rideau) assombrit le reste de la page
 * pendant que le tiroir glisse ; les deux sont en position fixed, seul
 * autre emploi du projet avec le barrage d'ouverture d'etabli.css, et ne
 * se recouvrent jamais : les deux ne chargent pas sur les mêmes pages.
 * Le tiroir se montre et se cache par la classe --ouvert, JAMAIS par
 * [hidden] : une transform ne s'anime pas sur un élément à
 * « display: none », que [hidden] impose.
 */

.abb-mc-menu {
  display: inline-flex;
  flex: none;
}

.abb-mc-menu-rideau {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--abb-voile);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abb-transition);
}

.abb-mc-menu-rideau--ouvert {
  opacity: 1;
  pointer-events: auto;
}

.abb-mc-menu-panneau {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(300px, 85vw);
  padding: 16px 12px;
  background: var(--abb-white);
  box-shadow: var(--abb-ombre-carte);
  transform: translateX(-100%);
  transition: transform var(--abb-transition);
  overflow-y: auto;
}

.abb-mc-menu-panneau--ouvert { transform: translateX(0); }

.abb-mc-menu-titre {
  margin: 4px 34px 12px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-secondary);
}

.abb-mc-menu-fermer {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--abb-text-secondary);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.abb-mc-menu-fermer:hover { background: var(--abb-grey-200); }

.abb-mc-menu-fermer:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

.abb-mc-menu-lien {
  display: block;
  padding: 10px;
  border-radius: var(--abb-rayon);
  color: var(--abb-text-primary);
  font-size: 15px;
  text-decoration: none;
}

.abb-mc-menu-lien:hover { background: var(--abb-grey-100); }

/* L'entrée de la page où l'on se trouve déjà. Même recette que
   .abb-mc-page__barre-icone--actuelle : aucun troisième style d'état
   actif dans ce produit. */
.abb-mc-menu-lien--actuel {
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
}

.abb-mc-menu-lien:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

/* ---- sélecteur de thème (programme/theme.js) ---------------------------
 *
 * Deux boutons collés dans une capsule, à gauche des icônes existantes de
 * .abb-mc-page__barre-outils. Ils reprennent .abb-mc-page__barre-icone
 * pour la taille, le survol et le focus ; seul l'état actif s'ajoute ici,
 * et c'est la même recette que .abb-mc-page__barre-icone--actuelle
 * ci-dessus ; aucun troisième style d'état actif dans ce produit.
 */

.abb-mc-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--abb-rayon-capsule);
  background: var(--abb-grey-100);
}

.abb-mc-theme-bouton[aria-pressed="true"] {
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
}

.abb-mc-page__barre-separateur {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--abb-grey-400);
}

.abb-mc-page__barre-produit {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- l'étiquette « Prototype » (programme/mention.js) -------------------
 *
 * Elle suit le nom du produit dans la barre, sur toutes les pages et
 * dans les guides publiés. C'est un avertissement : elle en prend
 * l'ambre, exactement comme .abb-mc-bulle et .abb-mc-avis plus bas, et
 * l'encre reste l'encre pour qu'elle se lise. Elle ne se replie jamais,
 * même sur écran étroit où le fil d'Ariane, lui, disparaît : une
 * mention qu'on peut ne pas voir ne sert à rien.
 */

.abb-mc-mention {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--abb-rayon-capsule);
  background: var(--abb-warning-transparent);
  border: 1px solid var(--abb-warning);
  color: var(--abb-text-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

a.abb-mc-mention:hover { background: var(--abb-warning); }

/* ---- fil d'Ariane -------------------------------------------------------
 *
 * Il vit dans la barre, à droite du nom du produit : une ligne qui dit
 * d'où l'on vient. L'accueil le remplit tout seul au fil de la
 * navigation ; les guides publiés le portent écrit dans la page.
 */

.abb-mc-fil {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--abb-text-secondary);
  white-space: nowrap;
}

.abb-mc-fil-lien {
  color: var(--abb-primary-default);
  text-decoration: none;
  transition: color var(--abb-transition);
}

.abb-mc-fil-lien:hover { color: var(--abb-primary-hover); text-decoration: underline; }

.abb-mc-fil-lien:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
  border-radius: 2px;
}

.abb-mc-fil-separateur { color: var(--abb-grey-500); }

.abb-mc-fil-actuel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--abb-text-primary);
}

.abb-mc-page__barre-outils {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ---- la marque, dans la barre ------------------------------------------
 *
 * Zone réservée au logo de l'entreprise (logo/logo_abb.svg).
 * Le cadre en pointillés n'apparaît que si le fichier est absent.
 */

.abb-mc-marque {
  display: flex;
  align-items: center;
  flex: none;
  height: 20px;
}

/*
 * Le logo est un SVG sans largeur ni hauteur écrites dans le fichier :
 * il n'a qu'un viewBox, donc des proportions et pas de taille. On lui
 * impose donc une hauteur ferme : avec un simple max-height, il se
 * retrouve à zéro pixel de large dans une boîte flexible.
 */
.abb-mc-marque img {
  display: block;
  height: 100%;
  width: auto;
}

.abb-mc-marque--vide {
  min-width: 52px;
  justify-content: center;
  border: 1px dashed var(--abb-grey-400);
  border-radius: 2px;
}

.abb-mc-marque--vide::after {
  content: "logo_abb.svg";
  font-size: 9px;
  color: var(--abb-grey-500);
}

/* ---- onglets d'espace de travail ---------------------------------------
 *
 * Sous la barre applicative, une seconde bande : les espaces où l'on
 * travaille : l'éditeur de guides, l'atelier de consoles, le catalogue
 * des variateurs. Ce sont des
 * <a>, pas des boutons : chaque espace est une page à lui, et l'onglet
 * n'est que le chemin pour y aller. Le clic droit, le nouvel onglet et
 * le retour arrière du navigateur marchent donc comme partout ailleurs.
 *
 * Les pages qui les portent doivent poser « abb-mc-page--onglets » sur
 * leur <body> : c'est ce qui décale ce qui se colle en dessous.
 */

.abb-mc-onglets {
  position: sticky;
  top: var(--abb-hauteur-entete);
  z-index: 19;              /* sous la barre applicative (20), sur le reste */
  display: flex;
  gap: 2px;
  height: var(--abb-hauteur-onglets);
  padding: 0 16px;
  background: var(--abb-white);
  border-bottom: 1px solid var(--abb-grey-400);
}

.abb-mc-onglet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--abb-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--abb-transition), border-color var(--abb-transition);
}

.abb-mc-onglet:hover { color: var(--abb-text-primary); }

.abb-mc-onglet:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: -2px;
  border-radius: 2px;
}

/* L'espace où l'on se trouve. Lilas : c'est la couleur de ce qui agit. */
.abb-mc-onglet--actuel {
  color: var(--abb-primary-pressed);
  border-bottom-color: var(--abb-primary-default);
}

.abb-mc-page--onglets {
  --abb-hauteur-barres: calc(var(--abb-hauteur-entete) + var(--abb-hauteur-onglets));
}

/* ---- zone de titre de page ---------------------------------------------
 *
 * Le petit filet rouge au-dessus du titre est la signature ARCADIA.
 * Le rouge ABB ne sort pas des titres : ce filet, celui des titres de
 * groupe de l'accueil (accueil.css), et le logo. Nulle part ailleurs
 * il ne signifie quoi que ce soit.
 */

.abb-mc-page__cadre {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 40px;
}

.abb-mc-page__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}

.abb-mc-page__identite { min-width: 0; }

.abb-mc-page__identite::before {
  content: "";
  display: block;
  width: 32px;   /* le corps du titre qu'il coiffe, design.md 2.4 */
  height: 3px;
  margin-bottom: 12px;
  background: var(--abb-red);
}

.abb-mc-page__amorce {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-secondary);
}

.abb-mc-page h1 {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.abb-mc-page__sous-titre {
  margin: 0;
  max-width: 70ch;
  color: var(--abb-text-secondary);
  font-size: 14px;
}

.abb-mc-page__pied {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--abb-grey-400);
  color: var(--abb-text-secondary);
  font-size: 12px;
  max-width: 80ch;
}

.abb-mc-page__pied a { color: var(--abb-primary-default); }

/* La version de l'outil, posée en fin de pied par version.js. Elle
   hérite de la couleur et du corps du pied : rien à déclarer ici, et
   surtout aucune couleur (règle 3). */
.abb-mc-page__version {
  display: block;
  margin-top: 8px;
  opacity: .75;
}

/* L'avertissement de prototype, posé en tête de pied par mention.js.
   Il ouvre le pied et doit se lire avant le reste : même ambre que
   l'étiquette de la barre, encre pleine plutôt que le gris du pied. */
.abb-mc-page__avertissement {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 3px solid var(--abb-warning);
  color: var(--abb-text-primary);
  line-height: 1.5;
}

/* ---- le coin haut droit : outils de l'éditeur --------------------------- */

.abb-mc-page__coin {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.abb-mc-barre {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =======================================================================
 *  Boutons
 * ===================================================================== */

/*
 * Un seul bouton plein par écran, et il est lilas : c'est l'action que
 * l'on attend de l'utilisateur. Tout le reste est un contour.
 */

.abb-mc-bouton,
.abb-mc-bouton-plat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon-capsule);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--abb-transition), border-color var(--abb-transition), color var(--abb-transition);
}

.abb-mc-bouton svg,
.abb-mc-bouton-plat svg { width: 14px; height: 14px; flex: none; }

.abb-mc-bouton:hover { border-color: var(--abb-primary-default); color: var(--abb-primary-default); }
.abb-mc-bouton:active { border-color: var(--abb-primary-pressed); color: var(--abb-primary-pressed); }

.abb-mc-bouton:focus-visible,
.abb-mc-bouton-plat:focus-visible,
.abb-mc-bouton-mince:focus-visible,
.abb-mc-bouton-icone:focus-visible,
.abb-mc-page__barre-icone:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

/* Bouton plein : « Publier ». */
.abb-mc-bouton--fort {
  background: var(--abb-primary-default);
  border-color: var(--abb-primary-default);
  color: var(--abb-sur-couleur);
  font-weight: 600;
}

.abb-mc-bouton--fort:hover {
  background: var(--abb-primary-hover);
  border-color: var(--abb-primary-hover);
  color: var(--abb-sur-couleur);
}

.abb-mc-bouton--fort:active {
  background: var(--abb-primary-pressed);
  border-color: var(--abb-primary-pressed);
  color: var(--abb-sur-couleur);
}

.abb-mc-bouton--fort:disabled {
  background: var(--abb-primary-disabled);
  border-color: var(--abb-primary-disabled);
  cursor: default;
}

/* Bouton de contour lilas : « Recommencer ». */
.abb-mc-bouton-plat {
  margin-top: 16px;
  border-color: var(--abb-primary-default);
  color: var(--abb-primary-default);
}

.abb-mc-bouton-plat:hover:not(:disabled) { background: var(--abb-primary-transparent); color: var(--abb-primary-pressed); }
.abb-mc-bouton-plat:active:not(:disabled) { background: var(--abb-primary-transparent); color: var(--abb-primary-pressed); border-color: var(--abb-primary-pressed); }

.abb-mc-bouton-plat:disabled {
  border-color: var(--abb-grey-400);
  color: var(--abb-grey-500);
  cursor: default;
}

/* Petit bouton de service, dans les listes de l'éditeur. */
.abb-mc-bouton-mince {
  padding: 4px 10px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--abb-transition), color var(--abb-transition);
}

.abb-mc-bouton-mince:hover { border-color: var(--abb-primary-default); color: var(--abb-primary-default); }

.abb-mc-bouton-icone {
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--abb-transition), color var(--abb-transition);
}

.abb-mc-bouton-icone:hover { border-color: var(--abb-error); color: var(--abb-error); }

/* =======================================================================
 *  Cases à cocher et interrupteurs
 * ===================================================================== */

/*
 * Une seule case à cocher pour tout le produit : carrée, 16 px, lilas
 * une fois cochée. Elle sert aussi bien sur fond blanc (l'éditeur) que
 * sur la scène sombre (« guider »), d'où la bordure grise moyenne, qui
 * tient sur les deux.
 */

.abb-mc-coche input,
.abb-mc-interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--abb-grey-700);
  border-radius: 2px;
  background: var(--abb-white);
  cursor: pointer;
  transition: background var(--abb-transition), border-color var(--abb-transition);
}

.abb-mc-coche input:checked,
.abb-mc-interrupteur input:checked {
  background: var(--abb-primary-default);
  border-color: var(--abb-primary-default);
}

/* La coche : deux traits, dessinés en CSS, jamais une image. Elle
   s'écrit SUR le lilas de la case cochée, qui ne s'inverse jamais :
   --abb-sur-couleur, pas --abb-white (qui disparaîtrait en sombre). */
.abb-mc-coche input:checked::after,
.abb-mc-interrupteur input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--abb-sur-couleur);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*
 * Le bouton radio en est la variante ronde : il ne dit pas « ceci est
 * coché » mais « c'est celui-là et pas un autre ». Deux emplois : la
 * console en cours de rédaction, et ce que « Publier » fera du guide.
 */
.abb-mc-coche input[type="radio"] { border-radius: 50%; }

.abb-mc-coche input[type="radio"]:checked::after {
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--abb-sur-couleur);
  transform: none;
}

.abb-mc-coche input:focus-visible,
.abb-mc-interrupteur input:focus-visible,
.abb-mc-bascule input:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

.abb-mc-coche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
}

.abb-mc-coche-mention {
  font-size: 12px;
  color: var(--abb-text-secondary);
}

/* Interrupteur « mode expert » : le composant Switches d'ARCADIA. */
.abb-mc-bascule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--abb-text-secondary);
  user-select: none;
}

.abb-mc-bascule input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  width: 32px;
  height: 18px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: var(--abb-grey-500);
  cursor: pointer;
  transition: background var(--abb-transition);
}

/* Le curseur doit rester visible sur les deux fonds qu'il traverse (la
   piste grise au repos, le lilas une fois coché), donc --abb-sur-couleur,
   fixe, plutôt que --abb-white qui s'inverserait en sombre. */
.abb-mc-bascule input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--abb-sur-couleur);
  transition: transform var(--abb-transition);
}

.abb-mc-bascule input:checked { background: var(--abb-primary-default); }
.abb-mc-bascule input:checked::after { transform: translateX(14px); }

/*
 * Message d'état de la publication : muet, sauf en cas de nouvelle.
 *
 * Le vert et le rouge d'ARCADIA sont trop clairs pour porter du texte de
 * 12 px sur du blanc, à peine 3:1. On les met donc là où ils se voient
 * sans se lire : en fond très pâle, l'encre restant noire. Le message
 * garde sa couleur d'humeur et redevient lisible.
 */
.abb-mc-etat {
  margin: 0;
  font-size: 12px;
  text-align: right;
  color: var(--abb-text-secondary);
  max-width: 46ch;
  min-height: 1em;
}

.abb-mc-etat--succes:not(:empty),
.abb-mc-etat--erreur:not(:empty) {
  padding: 4px 10px;
  border-radius: var(--abb-rayon);
  color: var(--abb-text-primary);
}

.abb-mc-etat--succes:not(:empty) { background: var(--abb-success-transparent); }
.abb-mc-etat--erreur:not(:empty) { background: var(--abb-error-transparent); }

/* =======================================================================
 *  Le composant : scène à gauche, panneau à droite
 * ===================================================================== */

.abb-mc {
  font-family: var(--abb-police);
  color: var(--abb-text-primary);
}

.abb-mc-grille {
  display: grid;
  /*
   * La colonne de gauche est taillée pour loger la console à sa taille
   * de dessin : --abb-console-largeur, plus les 24 px de marge que la
   * scène pose de chaque côté. Une colonne plus étroite ne casserait
   * rien (le moteur réduirait la console), mais elle la réduirait en
   * permanence, pour rien.
   */
  grid-template-columns: minmax(280px, calc(var(--abb-console-largeur) + 48px)) 1fr;
  gap: 24px;
  align-items: start;
}

/*
 * La scène imite un plan de travail : un aplat, jamais de dégradé ni de
 * reflet, et le matériel posé dessus. Elle ne s'inverse pas : ce n'est
 * plus la seule surface sombre du produit depuis le mode sombre (les
 * cartes le deviennent aussi), mais elle reste la seule qui le soit
 * TOUJOURS : le filet ci-dessous ne sert qu'à la détacher des cartes
 * quand elles se confondent avec elle en sombre.
 */
.abb-mc-scene {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 8px;
  background: var(--abb-black);
  border: 1px solid light-dark(transparent, var(--abb-grey-400));
}

/*
 * La console suit le défilement.
 *
 * Le panneau de droite est toujours plus long qu'elle : les étapes s'y
 * accumulent sous l'identité du guide. Sans cela, dès qu'on descend
 * pour écrire une consigne, on perd de vue l'écran qu'on est en train
 * de décrire. La scène reste donc collée en haut de la fenêtre, sous la
 * barre applicative, pendant que le panneau défile à côté.
 *
 * Elle ne bouge que verticalement : sa place dans la colonne de gauche,
 * elle, ne change pas.
 *
 * Deux conditions pour que « sticky » ait un effet, toutes deux déjà
 * réunies plus haut : la grille pose « align-items: start » (sans quoi
 * la scène serait étirée sur toute la hauteur de la rangée et n'aurait
 * aucun jeu), et aucun ancêtre ne masque son débordement.
 *
 * Seulement à partir de deux colonnes : en dessous, la console est déjà
 * juste au-dessus des étapes, et la coller mangerait l'écran.
 */
@media (min-width: 901px) {
  .abb-mc-scene {
    position: sticky;
    top: calc(var(--abb-hauteur-barres) + 16px);
    /* Fenêtre trop courte pour la console entière : elle défile dans sa
       propre boîte plutôt que de se faire couper le bas. */
    max-height: calc(100vh - var(--abb-hauteur-barres) - 32px);
    overflow-y: auto;

    /*
     * Cet ascenseur-là ne se montre pas, comme ceux de l'afficheur, et
     * pour une raison de plus : ses quinze pixels se prendraient sur la
     * largeur de la console. Elle rapetisserait donc en rendant la
     * fenêtre plus courte (elle ne doit changer de taille pour rien), et
     * pire, la réduction la raccourcissant, l'ascenseur pourrait
     * disparaître, revenir, repartir : un battement sans fin. Sans
     * gouttière, la place offerte à la console ne dépend plus de ce
     * qu'elle mesure.
     */
    scrollbar-width: none;
  }

  .abb-mc-scene::-webkit-scrollbar { display: none; }
}

.abb-mc-scene-pied {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--abb-scene-trait);
  font-size: 12px;
  color: var(--abb-grey-700);
}

.abb-mc-scene-etiquette {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abb-mc-scene-message {
  display: none;
  text-align: right;
  color: var(--abb-warning);
  font-size: 12px;
  line-height: 1.35;
}

.abb-mc-scene-message--visible { display: block; }

/* La case « guider », sur fond sombre : la scène ne s'inverse pas, donc
   --abb-scene-attenue plutôt que --abb-grey-500, qui y deviendrait trop
   sombre pour se lire une fois le thème sombre actif. */
.abb-mc-interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--abb-scene-attenue);
}

/* ---- la bulle d'explication --------------------------------------------
 *
 * Elle ne paraît que sur une touche sans effet : c'est un avertissement,
 * elle en prend la couleur, et rien d'autre dans l'écran ne l'emprunte.
 */

.abb-mc-bulle {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: none;
  padding: 12px 14px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 3px solid var(--abb-warning);
  font-size: 13px;
  line-height: 1.45;
}

.abb-mc-bulle--visible { display: block; }

/* L'ambre est déjà porté par le filet et le fond : le nom de la touche,
   lui, doit se lire, donc il reste à l'encre. */
.abb-mc-bulle-touche {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-primary);
}

.abb-mc-bulle-fermer {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--abb-primary-default);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.abb-mc-bulle-fermer:focus-visible { outline: 2px solid var(--abb-primary-default); outline-offset: 2px; }

/* =======================================================================
 *  Panneau de consultation
 * ===================================================================== */

/*
 * Le panneau est la carte principale de l'écran : c'est là qu'on lit la
 * consigne, qu'on voit où l'on en est, et qu'on relit ce qu'on a tapé.
 */
.abb-mc-panneau {
  min-width: 0;
  padding: 24px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  box-shadow: var(--abb-ombre-carte);
}

/*
 * « Étape 3 sur 11 » : un badge d'information, pas un titre.
 *
 * Le lilas foncé plutôt que le lilas courant : sur le fond lilas pâle,
 * c'est le seul des deux qui passe la barre des 4,5:1. Même ramp, même
 * famille ; on ne quitte pas la palette pour rester lisible.
 */
.abb-mc-panneau-etape {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 8px;
  border-radius: var(--abb-rayon);
  background: var(--abb-info-transparent);
  color: var(--abb-primary-pressed);
  font-size: 12px;
  font-weight: 600;
}

.abb-mc-panneau-titre {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
}

.abb-mc-panneau-texte {
  margin: 0 0 16px;
  max-width: 60ch;
  min-height: 1.5em;
}

/* ---- repères : le composant Tag ---------------------------------------- */

.abb-mc-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.abb-mc-jetons:empty { margin-bottom: 0; }

.abb-mc-jeton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--abb-rayon-capsule);
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
  font-size: 12px;
  font-weight: 600;
}

.abb-mc-jeton svg { width: 14px; height: 14px; flex: none; }
.abb-mc-jeton-role { font-weight: 400; }

/* La pastille d'un jeton de voyant : la teinte relevée sur le matériel,
   posée en ligne par lecteur.js (--abb-voyant-teinte, même jeton que le
   voyant du châssis). Le repli sert quand l'étape n'a pas noté de
   couleur : le jeton reste lisible, il ne disparaît pas. */
.abb-mc-jeton-pastille {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--abb-voyant-teinte, var(--abb-voyant-repli));
  box-shadow: inset 0 0 0 1px var(--abb-voyant-contour);
}

/* Les voyants d'une étape, dans l'éditeur : une ligne par voyant que la
   console déclare, le nom puis les deux menus. */
.abb-mc-voyants:empty { display: none; }

.abb-mc-voyant-ligne {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.abb-mc-voyant-nom { flex: 1 1 auto; font-size: 13px; }

/* ---- pagination des étapes ---------------------------------------------
 *
 * Le parcours entier est visible dès l'ouverture : ce qui est fait, où
 * l'on est, ce qui reste, en clair. Chaque case est cliquable, et les
 * chevrons ne font rien de plus que la case voisine.
 */

.abb-mc-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 20px;
}

.abb-mc-case,
.abb-mc-rail-chevron {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--abb-transition), border-color var(--abb-transition), color var(--abb-transition);
}

.abb-mc-case:hover,
.abb-mc-rail-chevron:hover:not(:disabled) {
  border-color: var(--abb-primary-default);
  color: var(--abb-primary-default);
}

.abb-mc-case:focus-visible,
.abb-mc-rail-chevron:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

/* Déjà parcourue : lilas pâle, sans contour. */
.abb-mc-case--faite {
  background: var(--abb-primary-transparent);
  border-color: transparent;
  color: var(--abb-primary-pressed);
}

/* En cours : la seule case pleine. */
.abb-mc-case--actuelle {
  background: var(--abb-primary-default);
  border-color: var(--abb-primary-default);
  color: var(--abb-sur-couleur);
  font-weight: 600;
}

.abb-mc-case--actuelle:hover {
  background: var(--abb-primary-hover);
  border-color: var(--abb-primary-hover);
  color: var(--abb-sur-couleur);
}

/* À venir : présente, mais elle n'appelle pas. */
.abb-mc-case--avenir {
  background: var(--abb-white);
  border-color: var(--abb-grey-400);
  color: var(--abb-grey-500);
}

.abb-mc-rail-chevron {
  border-color: transparent;
  color: var(--abb-text-secondary);
  font-size: 14px;
}

.abb-mc-rail-chevron:disabled {
  color: var(--abb-grey-500);
  cursor: default;
}

/* ---- journal des appuis -------------------------------------------------
 *
 * Une liste ARCADIA : un en-tête gris clair, des lignes séparées d'un
 * trait, et à gauche de chaque touche une pastille qui dit en un coup
 * d'œil si l'appui a fait avancer, reculé, ou rien du tout.
 */

.abb-mc-journal {
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  overflow: hidden;
}

.abb-mc-journal-titre {
  margin: 0;
  padding: 8px 12px;
  background: var(--abb-grey-100);
  border-bottom: 1px solid var(--abb-grey-400);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-secondary);
}

.abb-mc-journal-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 224px;
  overflow: auto;
}

.abb-mc-journal-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--abb-grey-400);
}

.abb-mc-journal-ligne:last-child { border-bottom: 0; }

.abb-mc-journal-numero {
  flex: none;
  min-width: 18px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--abb-grey-500);
}

.abb-mc-journal-touche {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* La pastille de statut. Sa couleur vient du genre de l'appui, et elle
   ne veut dire que ça : vert, l'étape avance ; rouge, la touche n'a rien
   fait ; gris, on est revenu en arrière. */
.abb-mc-journal-touche::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--abb-success);
}

.abb-mc-journal-ligne--refus .abb-mc-journal-touche::before { background: var(--abb-error); }
.abb-mc-journal-ligne--retour .abb-mc-journal-touche::before { background: var(--abb-grey-500); }

.abb-mc-journal-resultat {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-journal-vide {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--abb-grey-500);
}

/* ---- alerte de cohérence ------------------------------------------------ */

.abb-mc-alerte {
  display: none;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: var(--abb-rayon);
  background: var(--abb-error-transparent);
  border-left: 3px solid var(--abb-error);
  font-size: 13px;
}

.abb-mc-alerte--visible { display: block; }
.abb-mc-alerte-liste { margin: 6px 0 0; padding-left: 18px; }

/* ---- choisir sa console, en consultation --------------------------------
 *
 * Le guide vaut pour plusieurs boîtiers qui déroulent les mêmes écrans.
 * Le technicien en a un devant lui : une touche par console, la sienne
 * enfoncée. Ce sont de vraies touches, larges, lisibles de loin : c'est
 * la première chose qu'on fait en ouvrant un guide, parfois debout
 * devant une armoire.
 */

.abb-mc-choix-console {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-grey-100);
}

.abb-mc-choix-console-mot {
  font-size: 12px;
  font-weight: 500;
  color: var(--abb-text-secondary);
}

.abb-mc-choix-console-rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Entre deux groupes : le guide passe de l'un à l'autre. Deux variantes,
   elles, sont côte à côte sans rien entre elles : on en prend une. */
.abb-mc-choix-console-puis {
  color: var(--abb-grey-500);
  font-size: 15px;
}

.abb-mc-choix-console-touche {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon-capsule);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--abb-transition), background var(--abb-transition),
              color var(--abb-transition);
}

.abb-mc-choix-console-touche:hover { border-color: var(--abb-primary-default); }

.abb-mc-choix-console-touche:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

/* Celle qu'on a devant soi : pleine, comme l'action principale du produit. */
.abb-mc-choix-console-touche--ici {
  background: var(--abb-primary-default);
  border-color: var(--abb-primary-default);
  color: var(--abb-sur-couleur);
}

.abb-mc-choix-console-touche--ici:hover {
  background: var(--abb-primary-hover);
  border-color: var(--abb-primary-hover);
}

/* Une variante qu'on ne joue pas : proposée, mais en retrait. Son volet
   n'est pas dans le parcours tant qu'on ne l'a pas cliquée. */
.abb-mc-choix-console-touche--ecartee {
  background: transparent;
  color: var(--abb-text-secondary);
}

/* Citée par le guide, absente du dossier consoles/ : elle reste
   cliquable (le guide se joue alors sur la console par défaut), mais
   on ne le cache pas. */
.abb-mc-choix-console-touche--absente {
  border-style: dashed;
  color: var(--abb-text-secondary);
}

/* ---- passage d'une console à l'autre ------------------------------------
 *
 * Le guide continue sur une autre console : le matériel change sous les
 * yeux du lecteur, il faut le lui dire. Ce n'est ni une erreur ni un
 * avertissement : c'est une information, donc du lilas, pas de l'ambre.
 */

.abb-mc-passage {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--abb-rayon);
  background: var(--abb-info-transparent);
  border-left: 3px solid var(--abb-info);
  font-size: 13px;
  line-height: 1.45;
}

.abb-mc-vide {
  padding: 24px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  color: var(--abb-text-secondary);
  font-size: 14px;
}

/* =======================================================================
 *  Panneau de l'éditeur
 * ===================================================================== */

.abb-mc-bloc {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--abb-grey-400);
}

.abb-mc-bloc:last-child { border-bottom: 0; padding-bottom: 0; }

.abb-mc-bloc-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.abb-mc-bloc-titre {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-secondary);
}

.abb-mc-compteur {
  font-size: 12px;
  color: var(--abb-grey-500);
}

.abb-mc-champ {
  display: block;
  margin-bottom: 12px;
}

.abb-mc-champ-etiquette {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--abb-text-secondary);
}

.abb-mc-champ-aide {
  display: block;
  margin: -2px 0 6px;
  font-size: 12px;
  color: var(--abb-grey-500);
}

.abb-mc-saisie {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color var(--abb-transition);
}

.abb-mc-saisie:focus {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 1px;
  border-color: var(--abb-primary-default);
}

.abb-mc-saisie::placeholder { color: var(--abb-grey-500); }
.abb-mc-saisie--courte { max-width: 40%; }

/* Remarque discrète sous un champ : n'empêche rien, prévient juste.
   L'ambre tient le filet et le fond, l'encre tient le texte. */
.abb-mc-avis {
  display: none;
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 2px solid var(--abb-warning);
  font-size: 12px;
  line-height: 1.4;
  color: var(--abb-text-primary);
}

.abb-mc-avis--visible { display: block; }

/* ---- bandeau de version, en tête d'un guide ---------------------------- */

/*
 * Visible sans être encombrant : une ligne fine sous le titre, que l'œil
 * saute quand il lit le guide et retrouve quand il cherche « quelle
 * version ai-je là ? ».
 */
.abb-mc-versions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-versions:empty { display: none; }

.abb-mc-versions-actuelle {
  padding: 3px 9px;
  background: var(--abb-primary-transparent);
  border-radius: var(--abb-rayon);
  color: var(--abb-primary-pressed);
  font-weight: 600;
}

.abb-mc-versions-auteur { font-style: italic; }

.abb-mc-versions-autres {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  color: var(--abb-grey-500);
}

/* La navigation entre versions : une liste déroulante, pas une pastille
   par version, leur nombre n'a pas de plafond. */
.abb-mc-versions-liste {
  width: auto;
  min-width: 13ch;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  background: var(--abb-white);
  color: var(--abb-text-secondary);
  font-family: inherit;
  font-size: 12px;
}

.abb-mc-versions-liste:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .abb-mc-versions-autres { margin-left: 0; padding-left: 0; }
}

/* ---- bandeau d'une copie autonome, tout en haut ------------------------ */

/*
 * Il n'apparaît que dans le fichier unique produit par « Télécharger »
 * (programme/portage.js), jamais dans le produit lui-même. Ce fichier
 * circule (par courriel, sur une clé), et son lecteur doit pouvoir
 * répondre seul à « quelle version ai-je là ? » et « de quand date
 * cette copie ? ». D'où un bandeau qu'on ne peut pas manquer, posé
 * avant le titre, et le ton d'un avis plutôt que d'une décoration :
 * ambre, comme tout ce qui mérite attention sans être une erreur.
 */
.abb-mc-portable {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--abb-warning);
  border-left-width: 4px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  font-size: 12px;
  color: var(--abb-text-primary);
}

.abb-mc-portable__etiquette {
  padding: 3px 9px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning);
  color: var(--abb-black);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.abb-mc-portable__fait { font-weight: 600; }

/* La conséquence, en clair : elle passe à la ligne et prend toute la
   largeur, pour se lire comme une phrase et non comme une étiquette. */
.abb-mc-portable__mot {
  flex: 1 0 100%;
  margin: 0;
  color: var(--abb-text-secondary);
  font-weight: 400;
  max-width: 80ch;
}

/* ---- les variateurs concernés, en deux étages -------------------------- */

.abb-mc-cibles { margin-bottom: 14px; }

.abb-mc-cibles-etage {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--abb-grey-100);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
}

.abb-mc-cibles-titre {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abb-text-secondary);
}

.abb-mc-cibles-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.abb-mc-cibles-modeles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.abb-mc-cibles-groupe-titre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--abb-text-secondary);
}

.abb-mc-cibles-attente {
  margin: 0;
  color: var(--abb-grey-500);
  font-size: 13px;
}

.abb-mc-cibles-resume {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--abb-text-secondary);
}

.abb-mc-cibles-resume--vide {
  padding: 6px 10px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 2px solid var(--abb-warning);
  color: var(--abb-text-primary);
}

/* ---- les consoles du guide, dans l'éditeur -----------------------------
 *
 * Un guide peut traverser plusieurs consoles. Une seule est en cours de
 * rédaction : elle est marquée par un filet lilas à gauche (la couleur
 * d'action du produit) et par le bouton radio de sa ligne.
 */

.abb-mc-consoles { margin-bottom: 14px; }

/* Le titre du bloc et l'interrupteur de report, sur la même ligne. */
.abb-mc-consoles-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.abb-mc-consoles-entete .abb-mc-champ-etiquette { margin-bottom: 0; }

.abb-mc-consoles-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.abb-mc-consoles-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--abb-grey-100);
  border: 1px solid var(--abb-grey-400);
  border-left: 3px solid transparent;
  border-radius: var(--abb-rayon);
}

.abb-mc-consoles-item--active {
  background: var(--abb-white);
  border-left-color: var(--abb-primary-default);
}

.abb-mc-consoles-item .abb-mc-coche {
  flex: 1;
  min-width: 0;
}

.abb-mc-consoles-compte {
  flex: none;
  font-size: 12px;
  color: var(--abb-text-secondary);
  white-space: nowrap;
}

/* Une console citée par le guide mais absente du dossier consoles/ :
   ce n'est pas une décoration, c'est un guide qu'on ne peut plus jouer. */
.abb-mc-consoles-manque {
  font-size: 12px;
  color: var(--abb-error);
}

/*
 * Ce que le report fait de cette console : soit elle suit sa jumelle
 * (du lilas, c'est une action en cours), soit son moteur est différent et
 * son volet reste à écrire à la main : du gris, ce n'est pas une faute.
 */
.abb-mc-consoles-suivi {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--abb-rayon);
  background: var(--abb-primary-transparent);
  color: var(--abb-primary-pressed);
  font-size: 11px;
  white-space: nowrap;
}

.abb-mc-consoles-apart {
  flex: none;
  font-size: 11px;
  color: var(--abb-text-secondary);
  white-space: nowrap;
}

.abb-mc-consoles-ajout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.abb-mc-consoles-ajout select { flex: 1; min-width: 0; }

/* ---- panneau de version, dans l'éditeur -------------------------------- */

.abb-mc-versionnage {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-left: 3px solid var(--abb-primary-default);
  border-radius: var(--abb-rayon);
}

.abb-mc-versionnage .abb-mc-champ-etiquette { margin-bottom: 8px; }

.abb-mc-versionnage-resume {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
}

.abb-mc-versionnage-resume--alerte {
  padding: 6px 10px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 2px solid var(--abb-warning);
  color: var(--abb-text-primary);
}

.abb-mc-versionnage-connues {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--abb-text-secondary);
}

.abb-mc-versionnage-connues:empty { display: none; }

/* La liste déroulante pour rouvrir une version publiée. */
.abb-mc-versionnage-ouverture {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Ce que « Publier » fera du guide : trois options radio l'une sous
   l'autre, pas une liste déroulante, c'est le choix qui décide où le
   guide s'écrit, il mérite d'être vu en entier. */
.abb-mc-versionnage-intention { margin-top: 10px; }

.abb-mc-versionnage-mot {
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-versionnage-intention .abb-mc-versionnage-mot {
  display: block;
  margin-bottom: 6px;
}

.abb-mc-versionnage-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.abb-mc-versionnage-option { font-size: 13px; }

/* Assez large pour la date qui suit la lettre, jamais plus large que le
   panneau. */
.abb-mc-versionnage-liste {
  width: auto;
  min-width: 13ch;
  max-width: 100%;
  font-size: 13px;
}

/* Le chemin de destination, annoncé avant de publier. */
.abb-mc-versionnage-chemin {
  margin: 8px 0 0;
  font-family: var(--abb-police-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--abb-text-secondary);
  word-break: break-all;
}

.abb-mc-versionnage-chemin:empty { display: none; }

/* ---- navigateur sans accès au disque ------------------------------------
 *
 * Firefox et Safari : l'atelier fonctionne, la publication passe par un
 * téléchargement. Ambre : rien n'est cassé, mais il faut le savoir avant
 * d'avoir écrit tout un guide.
 */

.abb-mc-avis-navigateur {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--abb-rayon);
  border-left: 3px solid var(--abb-warning);
  background: var(--abb-warning-transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--abb-text-primary);
}

/* ---- liste des guides à ouvrir ----------------------------------------- */

.abb-mc-choix-guide-actions { display: flex; gap: 8px; }

.abb-mc-choix-guide-liste {
  display: flex;
  flex-direction: column;
}

.abb-mc-choix-guide-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--abb-grey-400);
}

.abb-mc-choix-guide-item:last-child { border-bottom: 0; }

/* Le titre est un bouton : il ouvre la version la plus récente. Il en
   garde l'apparence d'un titre ; seul le survol trahit qu'il agit. */
.abb-mc-choix-guide-titre {
  grid-column: 1;
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--abb-text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--abb-transition);
}

.abb-mc-choix-guide-titre:hover { color: var(--abb-primary-default); }

.abb-mc-choix-guide-titre:focus-visible {
  outline: 2px solid var(--abb-primary-default);
  outline-offset: 2px;
  border-radius: 2px;
}

.abb-mc-choix-guide-meta {
  grid-column: 1;
  margin: 0;
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-choix-guide-versions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.abb-mc-choix-guide-versions .abb-mc-saisie { width: auto; min-width: 13ch; font-size: 13px; }

/* ---- liste des étapes enregistrées -------------------------------------- */

.abb-mc-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- séparateur de volet : le guide change de console ------------------
 *
 * Il n'apparaît que si le guide en traverse plusieurs. Le volet en cours
 * de rédaction porte le filet lilas, comme sa ligne dans « Consoles du
 * guide » : les deux endroits disent la même chose de la même façon.
 */

.abb-mc-etapes-volet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 7px 12px;
  background: var(--abb-grey-100);
  border: 1px solid var(--abb-grey-400);
  border-left: 3px solid transparent;
  border-radius: var(--abb-rayon) var(--abb-rayon) 0 0;
}

.abb-mc-etapes-volet:first-child { margin-top: 0; }

.abb-mc-etapes-volet--active { border-left-color: var(--abb-primary-default); }

.abb-mc-etapes-volet-nom {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abb-mc-etapes-volet-rang {
  flex: 1;
  font-size: 12px;
  color: var(--abb-text-secondary);
  white-space: nowrap;
}

/* L'étape qui suit un en-tête reprend l'angle là où celui-ci l'a laissé ;
   celle qui en précède un referme sa pile. */
.abb-mc-etapes-volet + .abb-mc-etape { border-radius: 0; }

.abb-mc-etape:has(+ .abb-mc-etapes-volet) {
  border-bottom: 1px solid var(--abb-grey-400);
  border-radius: 0 0 var(--abb-rayon) var(--abb-rayon);
}

.abb-mc-etape {
  border: 1px solid var(--abb-grey-400);
  border-bottom: 0;
  background: var(--abb-white);
}

.abb-mc-etape:first-child { border-radius: var(--abb-rayon) var(--abb-rayon) 0 0; }

.abb-mc-etape:last-child {
  border-bottom: 1px solid var(--abb-grey-400);
  border-radius: 0 0 var(--abb-rayon) var(--abb-rayon);
}

.abb-mc-etape--ouverte { border-left: 2px solid var(--abb-primary-default); }

.abb-mc-etape-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--abb-transition);
}

.abb-mc-etape-entete:hover { background: var(--abb-grey-100); }
.abb-mc-etape-entete:focus-visible { outline: 2px solid var(--abb-primary-default); outline-offset: -2px; }

.abb-mc-etape-numero {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  font-size: 12px;
  color: var(--abb-text-secondary);
}

.abb-mc-etape--ouverte .abb-mc-etape-numero {
  background: var(--abb-primary-default);
  border-color: var(--abb-primary-default);
  color: var(--abb-sur-couleur);
}

.abb-mc-etape-resume {
  flex: 1;
  min-width: 0;
}

.abb-mc-etape-titre {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abb-mc-etape-touche {
  display: block;
  font-size: 12px;
  color: var(--abb-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abb-mc-etape-alerte {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--abb-rayon);
  background: var(--abb-warning-transparent);
  border-left: 2px solid var(--abb-warning);
  color: var(--abb-text-primary);
  font-size: 11px;
  font-weight: 600;
}

.abb-mc-etape-corps {
  padding: 4px 12px 14px;
  border-top: 1px solid var(--abb-grey-400);
}

.abb-mc-etape-corps .abb-mc-champ:first-child { margin-top: 12px; }

.abb-mc-reperes { margin-bottom: 10px; }

.abb-mc-repere-ligne {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.abb-mc-rappel {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--abb-grey-500);
}

.abb-mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.abb-mc-vide-message {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  color: var(--abb-text-secondary);
  font-size: 14px;
}

/* ---- bandeau d'aperçu, au-dessus de la console --------------------------- */

.abb-mc-bandeau {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--abb-rayon);
  background: var(--abb-scene-trait);
  border-left: 3px solid var(--abb-warning);
  font-size: 12px;
  color: var(--abb-scene-texte);
}

.abb-mc-bandeau--visible { display: flex; }
.abb-mc-bandeau-texte { flex: 1 1 100%; }

/* =======================================================================
 *  Page « À propos »
 * =====================================================================
 *
 * Du texte, rien d'autre : deux colonnes de blocs sur grand écran, une
 * seule sur petit. La largeur de lecture est bornée à 68 caractères :
 * au-delà, l'œil perd la ligne suivante.
 */

.abb-mc-propos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.abb-mc-propos-bloc {
  padding: 20px;
  background: var(--abb-white);
  border: 1px solid var(--abb-grey-400);
  border-radius: var(--abb-rayon);
  box-shadow: var(--abb-ombre-carte);
}

/* L'avertissement de prototype, en tête de la page « à propos ». Il
   tient toute la largeur de la grille plutôt qu'une colonne : il se lit
   avant les autres blocs, il n'est pas l'un d'eux. Même ambre que
   l'étiquette de la barre et que le pied de page. */
.abb-mc-propos-bloc--prototype {
  grid-column: 1 / -1;
  background: var(--abb-warning-transparent);
  border-color: var(--abb-warning);
  border-left: 3px solid var(--abb-warning);
}

.abb-mc-propos-bloc--prototype p { color: var(--abb-text-primary); }

.abb-mc-propos-bloc h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abb-mc-propos-bloc p {
  margin: 0 0 10px;
  max-width: 68ch;
  color: var(--abb-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.abb-mc-propos-bloc p:last-child { margin-bottom: 0; }

.abb-mc-propos-bloc strong { color: var(--abb-text-primary); font-weight: 600; }

.abb-mc-propos-bloc a {
  color: var(--abb-primary-default);
  text-decoration: none;
}

.abb-mc-propos-bloc a:hover { color: var(--abb-primary-hover); text-decoration: underline; }

.abb-mc-propos-bloc code {
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--abb-grey-200);
  font-family: var(--abb-police-mono);
  font-size: 12px;
  color: var(--abb-text-primary);
}

.abb-mc-propos-etapes,
.abb-mc-propos-liste {
  margin: 0 0 10px;
  padding-left: 20px;
  max-width: 68ch;
  color: var(--abb-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.abb-mc-propos-etapes li,
.abb-mc-propos-liste li { margin-bottom: 6px; }

/* Le seul encart de la page : la contrainte de navigateur pour l'édition.
   Ambre, parce qu'elle mérite attention sans rien avoir cassé. */
.abb-mc-propos-avis {
  padding: 12px 14px;
  border-radius: var(--abb-rayon);
  border-left: 3px solid var(--abb-warning);
  background: var(--abb-warning-transparent);
}

/* La police réellement en service, écrite dans la police en question :
   c'est la démonstration en même temps que la réponse. */
.abb-mc-propos-police {
  padding: 10px 14px;
  border-radius: var(--abb-rayon);
  border-left: 3px solid var(--abb-grey-400);
  background: var(--abb-grey-100);
  font-size: 15px;
}

:root[data-police="marque"] .abb-mc-propos-police {
  border-left-color: var(--abb-success);
  background: var(--abb-success-transparent);
}

/* =======================================================================
 *  Écrans étroits
 * ===================================================================== */

@media (max-width: 900px) {
  .abb-mc-grille { grid-template-columns: 1fr; gap: 20px; }
  .abb-mc-page h1 { font-size: 26px; }
  .abb-mc-page__cadre { padding: 20px 16px 32px; }
  .abb-mc-page__entete { flex-direction: column-reverse; align-items: stretch; }
  .abb-mc-page__coin { align-items: flex-start; }
  .abb-mc-etat { text-align: left; }
  .abb-mc-page__barre { padding: 0 12px; gap: 8px; }
  .abb-mc-onglets { padding: 0 12px; overflow-x: auto; }
  .abb-mc-onglet { padding: 0 10px; }
  .abb-mc-fil { display: none; }
  .abb-mc-panneau { padding: 16px; }
  .abb-mc-scene { padding: 16px; }
}