/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Familles et technologies : accordéons, cartes, descriptions, édition et documents.
 * Chargement : private/view.php.
 * Interactions : public/technologies.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.
 */

/* Paramètres > Technologies : descriptifs des cartes, catalogue et modales. */
body.platform-appearance .technology-card .technology-card-description {
 font-size:var(--technology-card-size,12px);
 color:var(--technology-card-color,#222);
 font-weight:var(--technology-card-weight,400);
 line-height:var(--technology-card-line,1.5);
}

/*
 * EARON TECHNO — TECHNOLOGIES
 *
 * Fichier modifiable directement : public/css/technologies.css
 * Une propriété par ligne ; noms des classes conservés pour le JavaScript.
 * Les règles situées plus bas précisent les règles précédentes.
 * Les sections @media adaptent les composants aux petits écrans.
 *
 * SOMMAIRE
 * 01 — Familles, cartes et navigation technologique
 * 02 — Fiche détaillée et produits associés
 */
/* ==========================================================================
   01 — Familles, cartes et navigation technologique
   ========================================================================== */
/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-browser  {
  display: grid;
  grid-template-columns: 280px minmax(0px, 1fr);
  gap: 26px;
  align-items: start;
}

/* Famille technologique — dimensions et espacements. */
.family-column, .technology-column  {
  min-width: 0px;
}

/* Famille technologique — dimensions et espacements, lisibilité du texte. */
.family-column h2  {
  font-size: calc(17px * var(--app-font-scale, 1));
  margin-bottom: 15px;
}

/* Famille technologique — disposition, dimensions et espacements. */
.family-cards  {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.family-card  {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  color:var(--app-primary-color, #1c75bc);
  text-decoration: none;
  min-width: 0px;
}

/* Famille technologique — couleurs et contours. */
.family-card:hover  {
  border-color: var(--app-primary-color, #1c75bc);
  background: var(--app-primary-soft, #edf5fb);
}

/* Famille technologique — couleurs et contours. */
.family-card.is-selected  {
  border-color: var(--green);
  background: var(--app-primary-soft, #edf5fb);
  box-shadow: inset 3px 0 var(--green);
}

/* Famille technologique — disposition, lisibilité du texte. */
.family-card strong  {
  display: block;
  font-size: calc(14px * var(--app-font-scale, 1));
  line-height: 1.45;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours. */
.family-card small  {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours. */
.family-symbol  {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--app-primary-soft, #edf5fb);
  border-radius: 9px;
}

/* Famille technologique — dimensions et espacements. */
.family-symbol svg  {
  width: 29px;
  height: 29px;
}

/* Famille technologique — disposition, dimensions et espacements, lisibilité du texte. */
.family-manage  {
  display: block;
  font-size: calc(13px * var(--app-font-scale, 1));
  margin-top: 16px;
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-heading  {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* Présentation des technologies — lisibilité du texte. */
.technology-heading h2  {
  font-size: calc(21px * var(--app-font-scale, 1));
  line-height: 1.4;
}

/* Présentation des technologies — dimensions et espacements. */
.technology-heading .muted  {
  margin-top: 5px;
}

/* Présentation des technologies — dimensions et espacements. */
.technology-search input  {
  min-width: 120px;
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-cards  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 14px;
}

/* Présentation des technologies — disposition, dimensions et espacements, couleurs et contours. */
.technology-card  {
  min-width: 0px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Présentation des technologies — couleurs et contours. */
.technology-card:hover  {
  border-color: var(--app-primary-color, #1c75bc);
  box-shadow: rgba(20, 32, 53, 0.043) 0px 3px 12px;
}

/* Présentation des technologies — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.technology-open  {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 13px;
  flex: 1 1 0%;
  padding: 18px;
  color: var(--navy);
  text-decoration: none;
}

/* Présentation des technologies — dimensions et espacements. */
.technology-open .category-icon  {
  width: 40px;
  height: 40px;
  margin: 0px;
}

/* Présentation des technologies — dimensions et espacements. */
.technology-open .category-icon svg  {
  width: 30px;
  height: 30px;
}

/* Présentation des technologies — disposition, lisibilité du texte. */
.technology-open h3  {
  font-size: calc(15px * var(--app-font-scale, 1));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Présentation des technologies — dimensions et espacements, couleurs et contours, lisibilité du texte. */
.technology-count  {
  font-size: calc(13px * var(--app-font-scale, 1));
  color: var(--green);
  background: var(--app-primary-soft, #edf5fb);
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: auto;
}

/* Présentation des technologies — couleurs et contours, lisibilité du texte. */
.technology-card-hint  {
  font-size: calc(12px * var(--app-font-scale, 1));
  color: var(--muted);
}

/* Présentation des technologies — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.technology-details  {
  display: block;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  font-size: calc(12px * var(--app-font-scale, 1));
  background: #fafcfd;
}

/* Élément commun de présentation — dimensions et espacements, couleurs et contours, lisibilité du texte. */
/* Élément commun de présentation — dimensions et espacements, couleurs et contours. */
.empty-browser  {
  padding: 26px;
  color: var(--muted);
  background: white;
  border: 1px dashed var(--line);
  border-radius: 9px;
  margin: 14px 0px;
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-context  {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Famille technologique — comportement visuel. */
.family-card:focus-visible, .technology-open:focus-visible, .technology-details:focus-visible  {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 1050px)  {
  /* Présentation des technologies — disposition, dimensions et espacements. */
  .technology-browser  {
    grid-template-columns: 235px minmax(0px, 1fr);
    gap: 18px;
  }

  /* Présentation des technologies — disposition. */
  .technology-cards  {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 850px)  {
  /* Présentation des technologies — disposition. */
  .technology-browser  {
    grid-template-columns: 1fr;
  }

  /* Famille technologique — disposition. */
  .family-cards  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Présentation des technologies — dimensions et espacements. */
  .technology-column  {
    margin-top: 8px;
  }

}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 480px)  {
  /* Famille technologique — disposition. */
  .family-cards  {
    grid-template-columns: 1fr;
  }

  /* Présentation des technologies — disposition, dimensions et espacements. */
  .technology-cards  {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Présentation des technologies — dimensions et espacements. */
  .technology-open  {
    padding: 13px;
    gap: 10px;
  }

  /* Présentation des technologies — lisibilité du texte. */
  .technology-open h3  {
    font-size: calc(14px * var(--app-font-scale, 1));
  }

  /* Présentation des technologies — dimensions et espacements. */
  .technology-details  {
    padding: 10px 13px;
  }

  /* Présentation des technologies — dimensions et espacements, lisibilité du texte. */
  .technology-count  {
    font-size: calc(12px * var(--app-font-scale, 1));
    padding: 4px 6px;
  }

  /* Présentation des technologies — disposition. */
  .technology-card-hint  {
    display: none;
  }

}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours. */
.family-tile  {
  min-width: 0px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

/* Famille technologique — couleurs et contours. */
.family-tile .family-card  {
  border: 0px;
  border-radius: 0px;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
.family-detail-button  {
  display: block;
  width: 100%;
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line);
  border-radius: 0px;
  padding: 8px 14px;
  font-size: calc(12px * var(--app-font-scale, 1));
  color: var(--green);
  text-align: left;
  background: #fafcfd;
}

/* Famille technologique — comportement visuel. */
.family-detail-button:focus-visible  {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours. */
:is(#family-detail-dialog,.product-technology-summary-dialog)  {
  max-width: 720px;
  max-height: 90dvh;
  overflow: auto;
  color: var(--navy);
  padding: 24px;
}

/* Famille technologique — disposition, dimensions et espacements. */
.family-modal-top  {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* Famille technologique — dimensions et espacements. */
.family-modal-top button  {
  padding: 8px 12px;
}

/* Famille technologique — disposition, dimensions et espacements. */
.family-modal-heading  {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Famille technologique — disposition, dimensions et espacements, lisibilité du texte. */
.family-modal-heading h2  {
  font-size: calc(23px * var(--app-font-scale, 1));
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin-top: 4px;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours. */
.family-modal-facts  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: var(--app-primary-soft, #edf5fb);
  padding: 16px;
  border-radius: 9px;
  margin: 22px 0px;
}

/* Famille technologique — dimensions et espacements, couleurs et contours, lisibilité du texte. */
.family-modal-facts dt  {
  font-size: calc(13px * var(--app-font-scale, 1));
  color:var(--app-primary-color, #1c75bc);
  margin-bottom: 6px;
}

/* Famille technologique — disposition, dimensions et espacements, lisibilité du texte. */
.family-modal-facts dd  {
  margin: 0px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Famille technologique — disposition, dimensions et espacements, couleurs et contours, lisibilité du texte. */
:is(#family-detail-dialog,.product-technology-summary-dialog) .family-description  {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--navy);
  font-size: calc(14px * var(--app-font-scale, 1));
  line-height: 1.7;
  margin: 12px 0px 22px;
}

/* Famille technologique — disposition, dimensions et espacements, lisibilité du texte. */
.family-edit-link  {
  display: inline-block;
  font-size: calc(14px * var(--app-font-scale, 1));
  margin-bottom: 4px;
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 480px)  {
  /* Famille technologique — dimensions et espacements. */
  :is(#family-detail-dialog,.product-technology-summary-dialog)  {
    width: calc(100% - 24px);
    padding: 18px;
  }

  /* Famille technologique — lisibilité du texte. */
  .family-modal-heading h2  {
    font-size: calc(20px * var(--app-font-scale, 1));
  }

  /* Famille technologique — disposition, dimensions et espacements. */
  .family-modal-facts  {
    grid-template-columns: 1fr;
    gap: 12px;
  }

}

/* ==========================================================================
   02 — Fiche détaillée et produits associés
   ========================================================================== */
/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-detail-columns  {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
  gap: 26px;
  align-items: start;
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-field-column  {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0px;
}

/* Présentation des technologies — dimensions et espacements, lisibilité du texte. */
.technology-editor textarea  {
  line-height: 1.5;
  min-height: 0px;
}

/* Présentation des technologies — disposition, lisibilité du texte. */
.technology-editor .readonly-value  {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* Présentation des technologies — disposition. */
.technology-editor .tabs  {
  flex-wrap: wrap;
}

/* Présentation des technologies — dimensions et espacements. */
.technology-security-list  {
  list-style: none;
  padding: 0px;
  margin: 18px 0px;
}

/* Présentation des technologies — dimensions et espacements, couleurs et contours. */
.technology-security-list li  {
  padding: 14px 0px;
  border-bottom: 1px solid var(--line);
}

/* Présentation des technologies — disposition, dimensions et espacements. */
.technology-security-list a  {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Présentation des technologies — couleurs et contours. */
.technology-editor [data-preview-document][aria-pressed="true"]  {
  color: var(--green);
  background: var(--app-primary-soft, #edf5fb);
  border-color: var(--green);
}

/* Adaptation à la largeur de l’écran ou aux préférences d’animation. */
@media (max-width: 850px)  {
  /* Présentation des technologies — disposition. */
  .technology-detail-columns  {
    grid-template-columns: 1fr;
  }

}

/* ==========================================================================
   PERSONNALISATIONS
   Ajoutez vos ajustements ici si vous préférez conserver les règles ci-dessus.
   Une règle identique placée plus bas est prioritaire à spécificité égale.
   Pensez aux règles @media pour vérifier le résultat sur téléphone.
   ========================================================================== */
/* 03 — Cartes compactes et actions regroupées du référentiel */
.taxonomy-pagehead  {
  justify-content: flex-start;
  gap: 20px;
  align-items: center;
}

.taxonomy-pagehead h1  {
  font-size: calc(23px * var(--app-font-scale, 1));
}

.taxonomy-options  {
  position: relative;
}

.taxonomy-options summary  {
  cursor: pointer;
  font-size: calc(13px * var(--app-font-scale, 1));
}

.taxonomy-options > div  {
  position: absolute;
  top: 100%;
  /* Menu ancré à droite : il se déploie vers la gauche dans la page Technologies. */
  right: 0;
  left: auto;
  z-index: 10;
  width: 300px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 5px 20px #0002;
  border-radius: 8px;
}

.taxonomy-options a, .taxonomy-options button  {
  display: block;
  width: 100%;
  text-align: left;
  font-size: calc(12px * var(--app-font-scale, 1));
  margin: 4px 0;
  padding: 7px;
}

.family-card strong  {
  display: inline;
  font-size: calc(13px * var(--app-font-scale, 1));
}

.family-card small, .technology-heading small  {
  display: inline;
  font-weight: 400;
  color: #888;
}

.technology-heading h2  {
  font-size: calc(17px * var(--app-font-scale, 1));
}

.technology-card-title  {
  display: flex;
  gap: 9px;
  align-items: center;
}

.technology-open h3  {
  font-size: calc(13px * var(--app-font-scale, 1));
  font-weight: 500;
  margin: 0;
}

.technology-open  {
  padding: 13px;
  gap: 10px;
}

.technology-card-description  {
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.taxonomy-card-actions  {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.taxonomy-card-actions button  {
  font-size: calc(11px * var(--app-font-scale, 1));
  min-height: 0;
  padding: 5px 8px;
}

/* Modales de consultation et de saisie : labels bleus et champs compacts. */
#taxonomy-editor-dialog  {
  width: min(1100px, 85vw);
  max-width: 95vw;
  max-height: 85dvh;
  overflow: auto;
  padding: 18px;
}

.taxonomy-editor-top  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: -18px;
  background: white;
  z-index: 5;
  padding: 10px 0;
}

#taxonomy-editor-dialog h1, :is(#family-detail-dialog,.product-technology-summary-dialog) h2  {
  font-size: calc(20px * var(--app-font-scale, 1));
}

#taxonomy-editor-dialog label, :is(#family-detail-dialog,.product-technology-summary-dialog) h3  {
  color: var(--app-primary-color, #1c75bc);
  font-size: calc(13px * var(--app-font-scale, 1));
}

#taxonomy-editor-dialog input, #taxonomy-editor-dialog select, #taxonomy-editor-dialog textarea, #taxonomy-editor-dialog .readonly-value  {
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.4;
}

#taxonomy-editor-dialog .technology-field-column  {
  gap: 10px;
}

#taxonomy-editor-dialog button  {
  font-size: calc(12px * var(--app-font-scale, 1));
  padding: 6px 10px;
}

#taxonomy-editor-dialog legend  {
  display: none;
}

:is(#family-detail-dialog,.product-technology-summary-dialog) .family-description  {
  font-size: calc(13px * var(--app-font-scale, 1));
  line-height: 1.5;
}

/* 04 — Défilement indépendant : titres et recherche restent visibles. */
.technology-browser  {
  align-items: stretch;
  min-height: 320px;
}

.technology-browser > .family-column, .technology-browser > .technology-column  {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.technology-browser .family-cards, .technology-browser > .technology-column > .technology-cards  {
  overflow-y: auto;
  min-height: 0;
  padding-right: 8px;
  align-content: start;
  scrollbar-gutter: stable;
}

/* Présentation commune à ces éléments ; mêmes propriétés et même contexte d’écran. */
.technology-browser .family-tile, .technology-browser .technology-heading, .technology-browser .technology-search  {
  flex-shrink: 0;
}

/* Modales : titre et fermeture alignés, actions à droite des onglets. */
.taxonomy-editor-top  {
  flex-wrap: wrap;
}

.taxonomy-editor-top h1  {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1;
}

.taxonomy-editor-top [data-taxonomy-status]:empty  {
  display: none;
}

.taxonomy-form-actions  {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

#taxonomy-editor-dialog .tabs  {
  align-items: center;
}

#taxonomy-editor-dialog .panel, #taxonomy-editor-dialog fieldset, #taxonomy-editor-dialog .form-body  {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  min-width: 0;
}

#taxonomy-editor-dialog input, #taxonomy-editor-dialog select, #taxonomy-editor-dialog textarea, #taxonomy-editor-dialog .readonly-value  {
  color: #000;
  opacity: 1;
}

#taxonomy-editor-dialog .technology-detail-columns  {
  gap: 18px;
}

#taxonomy-editor-dialog .technology-field-column > .field  {
  margin: 0;
}

/* Les quatre textes Informations occupent chacun huit lignes identiques. */
#taxonomy-editor-dialog #technology-group-0 textarea, #taxonomy-editor-dialog #technology-group-1 .technology-field-column:first-child textarea  {
  height: calc(8 * 1.4em + 16px);
  min-height: calc(8 * 1.4em + 16px);
}

#taxonomy-editor-dialog #technology-group-1 .technology-detail-columns  {
  align-items: stretch;
}

#taxonomy-editor-dialog #technology-group-1 .technology-field-column:last-child > .field  {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#taxonomy-editor-dialog #technology-group-1 .technology-field-column:last-child textarea  {
  flex: 1;
  height: auto;
}

/* Familles : identité 10/12 + 2/12 ; sept textes de six lignes. */
.family-name-code  {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(70px, 2fr);
  gap: 10px;
}

.family-name-code input  {
  min-width: 0;
  width: 100%;
}

.family-editor textarea  {
  height: calc(6 * 1.4em + 16px);
  min-height: calc(6 * 1.4em + 16px);
}

.taxonomy-product-cards  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

@media (max-width: 850px)  {
  .technology-browser  {
    height: auto !important;
  }

  .technology-browser .family-cards,   .technology-browser > .technology-column > .technology-cards  {
    max-height: 65dvh;
  }

}

/* 05 — Les cartes gardent leur hauteur de contenu dans une galerie défilante.
   Sans cette règle, la grille peut compresser les rangées et masquer le footer. */
.technology-cards  {
  grid-auto-rows: max-content;
}

.technology-card  {
  min-height: min-content;
}

.technology-card .taxonomy-card-actions  {
  flex-shrink: 0;
  /* Galerie Technologies et onglet Technologies rattachées d'une famille. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.technology-card .taxonomy-card-actions > :is(button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-inline: 6px;
}

.technology-card .taxonomy-card-actions > :is(button, .button) svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.family-editor .technology-card-title h3  {
  font-size: calc(12px * var(--app-font-scale, 1));
  font-weight: 700;
}

/* Modale famille : seuls les panneaux d'onglets défilent. */
#taxonomy-editor-dialog.is-family-editor[open]  {
  display: flex;
  flex-direction: column;
  height: 85dvh;
  overflow: hidden;
}

#taxonomy-editor-dialog.is-family-editor .taxonomy-editor-top  {
  flex-shrink: 0;
  position: static;
}

#taxonomy-editor-dialog.is-family-editor [data-taxonomy-content], #taxonomy-editor-dialog.is-family-editor .family-editor, #taxonomy-editor-dialog.is-family-editor #record-editor  {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}

#taxonomy-editor-dialog.is-family-editor .tabs  {
  flex-shrink: 0;
}

#taxonomy-editor-dialog.is-family-editor .form-body  {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-gutter: stable;
}

.family-ai-dialog  {
  width: 60vw;
  max-height: 85dvh;
  overflow: auto;
  padding: 20px;
}

.family-ai-dialog h2  {
  font-size: calc(18px * var(--app-font-scale, 1));
}

.family-ai-dialog p  {
  font-size: calc(13px * var(--app-font-scale, 1));
}

.family-ai-dialog textarea  {
  width: 100%;
  height: 52dvh;
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.5;
  color: #000;
}

/* Contrôle des sept textes avant application, sans modifier la fiche à la lecture du fichier. */
.family-ai-dialog > label, .family-ai-review label  {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--app-primary-color, #1c75bc);
  font-size: calc(13px * var(--app-font-scale, 1));
}

.family-ai-review:not([hidden])  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.family-ai-review textarea  {
  height: 130px;
}

.family-ai-dialog > .taxonomy-card-actions  {
  position: sticky;
  bottom: -20px;
  background: white;
  padding: 12px 0;
}

@media (max-width: 700px)  {
  .family-ai-review:not([hidden])  {
    grid-template-columns: 1fr;
  }

}

/* Conserver une largeur utilisable sur les petits écrans. */
@media (max-width: 700px)  {
  .family-ai-dialog  {
    width: 94vw;
  }

}

/* Familles : en-têtes d'accordéon et description compacte de la famille active. */
.family-card > span:not(.family-symbol):not(.family-accordion-chevron)  {
  flex: 1;
  min-width: 0;
}

.family-accordion-chevron  {
  font-size: calc(20px * var(--app-font-scale, 1));
  flex: 0 0 auto;
  transition: transform .15s ease;
}

.family-card[aria-expanded="true"] .family-accordion-chevron  {
  transform: rotate(90deg);
}

.family-accordion-panel[hidden]  {
  display: none;
}

.family-accordion-description  {
  font-size: calc(11px * var(--app-font-scale, 1));
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 12px;
  color: #445164;
}

/* Titres compacts, identiques dans la galerie et les technologies rattachées. */
.technology-card .technology-card-title h3  {
  font-size: calc(12px * var(--app-font-scale, 1));
  font-weight: 700;
}

/* Famille consultée : bouton actif, sur les espaces EARON et client. */
body.platform-appearance .technology-browser .family-card.is-selected  {
  background: var(--app-primary-color, #1c75bc);
  border-color: var(--app-primary-color, #1c75bc);
  color: var(--app-button-text, #fff);
  box-shadow: none;
}

body.platform-appearance .technology-browser .family-card.is-selected :is(strong, small, .family-symbol, .family-accordion-chevron)  {
  color: inherit;
}

body.platform-appearance .technology-browser .family-card.is-selected .family-symbol  {
  background: transparent;
}

.client-technology-browser button.family-card  {
  width: 100%;
  text-align: left;
  white-space: normal;
  font-family: inherit;
  cursor: pointer;
}

.client-technology-browser [hidden]  {
  display: none !important;
}

.client-technology-browser .client-taxonomy-filter  {
  margin: 0;
  font-size: calc(12px * var(--app-font-scale, 1));
}

.client-technology-facts  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 13px 12px;
}

.client-technology-facts .technology-count, .client-technology-selection  {
  font-size: calc(11px * var(--app-font-scale, 1));
}

.client-technology-selection  {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
}

.client-technology-selection input  {
  width: auto;
  margin: 0;
}

/* Classic galleries (EARON, clients, family dialogs): compact cards expand
   only their own content. The full description is never line-clamped. */
.technology-cards { align-items:start; }
.technology-cards .technology-card { align-self:start; }
.technology-cards .technology-open { flex:0 0 auto;padding:10px 12px;gap:8px; }
.technology-cards .technology-card-description { display:none;-webkit-line-clamp:unset;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere; }
.technology-cards .technology-card.is-description-open .technology-card-description { display:block; }
.technology-cards .client-technology-facts { padding:0 12px 8px;gap:5px; }
.technology-cards .taxonomy-card-actions { padding:6px 8px; }
.technology-card [data-technology-description] { margin-left:auto; }
.technology-card.is-description-open [data-technology-description] svg { transform:rotate(180deg); }
@media (hover:hover) and (pointer:fine) {
 .technology-cards .technology-card:hover .technology-card-description { display:block; }
}

/* Smooth natural-height reveal, without a maximum-height cutoff. */
.technology-cards .technology-open-animated { gap:0; }
.technology-description-reveal {
 display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;
 transition:grid-template-rows var(--technology-card-transition,.28s) ease,margin-top var(--technology-card-transition,.28s) ease,opacity var(--technology-card-transition,.28s) ease,visibility 0s var(--technology-card-transition,.28s);
}
.technology-cards .technology-description-reveal > .technology-card-description {
 display:block;min-height:0;overflow:hidden;
}
.technology-card.is-description-open .technology-description-reveal {
 grid-template-rows:1fr;margin-top:8px;opacity:1;visibility:visible;transition-delay:0s;
}
@media (hover:hover) and (pointer:fine) {
 .technology-card:hover .technology-description-reveal {
  grid-template-rows:1fr;margin-top:8px;opacity:1;visibility:visible;transition-delay:0s;
 }
}
@media (prefers-reduced-motion:reduce) {
 .technology-description-reveal { transition:none; }
}

/* Shared saved card appearance, including the local settings preview. */
body.platform-appearance .technology-card { background:var(--technology-card-background,#fff); }
body.platform-appearance .technology-card .technology-card-title h3 {
 font-size:var(--technology-card-title-size,calc(12px * var(--app-font-scale,1)));
 color:var(--technology-card-title-color,var(--app-primary-color));
 font-weight:var(--technology-card-title-weight,700);
 line-height:var(--technology-card-title-line,1.5);
}
body.platform-appearance .technology-card .technology-card-title .category-icon {
 color:var(--technology-card-icon-color,var(--app-primary-color));
 width:calc(var(--technology-card-icon-size,30px) + 10px);
 height:calc(var(--technology-card-icon-size,30px) + 10px);
 flex:0 0 auto;
}
body.platform-appearance .technology-card .technology-card-title .category-icon svg {
 width:var(--technology-card-icon-size,30px);height:var(--technology-card-icon-size,30px);
}
body.platform-appearance .technology-card .technology-count {
 --_secondary-button-background:var(--technology-card-count-background,var(--app-secondary-button-background)) !important;
 --_secondary-button-text:var(--technology-card-count-color,var(--app-primary-color)) !important;
 background:var(--technology-card-count-background,var(--app-secondary-button-background));
 color:var(--technology-card-count-color,var(--app-primary-color));
 font-size:var(--technology-card-count-size,calc(11px * var(--app-font-scale,1))) !important;
}
body.platform-appearance .technology-card .taxonomy-card-actions {
 background:var(--technology-card-footer-background,var(--technology-card-background,#fff));
}