/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Boutons d’aide, fenêtres explicatives et aide des valeurs de listes.
 * Chargement : private/view.php.
 * Interactions : public/list-help.js.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/* Aides des listes : icône discrète près du libellé. */
.list-help-icon {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin:0 0 0 .4rem!important;
  padding:0!important;
  width:1.25rem!important;
  height:1.25rem!important;
  min-height:0!important;
  min-width:0!important;
  border:1px solid var(--app-primary-color, #1c75bc)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--app-primary-color, #1c75bc)!important;
  font-size:calc(.8rem * var(--app-font-scale, 1))!important;
  font-weight:700;
  line-height:1;
  cursor:pointer
}

.list-help-icon:focus-visible {
  outline:3px solid #f9b233;
  outline-offset:2px
}

.list-help-icon {
  text-decoration:none!important
}

/* Aide de l'onglet actif : à droite des onglets, également en mode agrandi. */
.framing-editor .study-tabs-toolbar {
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex:1;
  min-width:0;
  width:100%;
  margin:0 0 8px
}

.framing-editor .study-tabs-toolbar>.tabs {
  flex:1;
  min-width:0;
  margin:0;
  padding:0
}

.framing-editor .study-tab-help-current {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:none;
  min-height:28px
}

.framing-editor .study-tab-help-current[hidden] {
  display:none
}

.framing-editor .study-tab-help-current>.list-help-icon {
  margin:0!important
}

.framing-editor .fw-tabs-toolbar>.study-tabs-toolbar,.framing-editor .proto-toolbar>.study-tabs-toolbar {
  margin:0
}

/* Formulaire d’aide indépendant de la modification des valeurs. */
.list-help-form {
  border-top:1px solid #ddd;
  padding-top:1rem;
  margin-top:1rem
}

.list-help-toolbar,.list-help-options {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
  margin:.6rem 0
}

.list-help-toolbar button {
  font-size:calc(.75rem * var(--app-font-scale, 1));
  padding:.35rem .5rem
}

.list-help-options label {
  display:flex;
  gap:.4rem;
  align-items:center
}

.list-help-options input[type=checkbox] {
  width:auto
}

.list-help-editor {
  min-height:200px;
  max-height:480px;
  overflow:auto;
  border:1px solid #aab7c2;
  border-radius:5px;
  padding:.8rem;
  background:white;
  color:#253542
}

.list-help-editor:focus {
  outline:2px solid var(--app-primary-color, #1c75bc)
}

/* Images privées : largeur choisie dans l’éditeur, limitée au conteneur sur mobile. */
.list-help-rich img {
  display:block;
  max-width:100%;
  height:auto;
  margin:.6rem 0;
  object-fit:contain
}

.list-help-editor img {
  cursor:pointer
}

.list-help-editor img:focus-visible,.list-help-editor img[data-help-selected] {
  outline:3px solid var(--app-primary-color, #1c75bc);
  outline-offset:2px
}

.list-help-image-controls:not([hidden]) {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding:.6rem;
  background:var(--app-primary-soft, #edf5fb);
  border-radius:6px
}

.list-help-image-controls label {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  font-size:calc(.8rem * var(--app-font-scale, 1))
}

.list-help-image-controls input,.list-help-image-controls select {
  width:auto;
  max-width:100%;
  padding:.35rem .5rem;
  font-size:calc(.8rem * var(--app-font-scale, 1))
}

/* Texte et tableaux : même présentation dans l’éditeur et dans la modale. */
.list-help-rich {
  font-size:calc(.875rem * var(--app-font-scale, 1));
  line-height:1.55;
  overflow-wrap:anywhere;
  overflow-x:auto
}

.list-help-rich p {
  margin:.5rem 0
}

.list-help-rich h2 {
  font-size:calc(1.15rem * var(--app-font-scale, 1))
}

.list-help-rich h3,.list-help-rich h4 {
  font-size:calc(1rem * var(--app-font-scale, 1))
}

.list-help-rich ul,.list-help-rich ol {
  padding-left:1.5rem
}

.list-help-rich table {
  border-collapse:collapse;
  width:100%;
  margin:.6rem 0;
  font-size:calc(.85rem * var(--app-font-scale, 1))
}

.list-help-rich td,.list-help-rich th {
  border:1px solid #cbd5df;
  padding:.45rem .55rem;
  text-align:left;
  vertical-align:top;
  min-width:90px;
  white-space:normal
}

.list-help-rich th {
  background:var(--app-primary-soft, #edf5fb);
  color:var(--app-primary-color, #1c75bc);
  font-weight:700
}

/* Modale accessible, largeur limitée à l’écran ; tableaux défilants sur mobile. */
.list-help-dialog {
  width:850px;
  max-width:calc(100vw - 24px);
  max-height:85vh;
  box-sizing:border-box;
  border:0;
  border-radius:12px;
  padding:1.1rem;
  color:#253542;
  box-shadow:0 12px 45px #0004
}

.list-help-dialog::backdrop {
  background:#0007
}

.list-help-modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem
}

.list-help-modal-head h2 {
  font-size:calc(1.15rem * var(--app-font-scale, 1));
  margin:0
}

.list-help-modal-head button {
  flex-shrink:0
}

@media(max-width:600px) {
  .list-help-dialog {
    padding:.8rem
  }

  .list-help-modal-head h2 {
    font-size:calc(1rem * var(--app-font-scale, 1))
  }

  .list-help-rich {
    font-size:calc(.82rem * var(--app-font-scale, 1))
  }

}