/* ==========================================================================
   LE SCHÉMA HUMAN DESIGN À L'ÉCRAN — le dessin, ses deux tableaux, et l'effet
   au survol. Un seul fichier pour le calculateur ET pour l'app.

   ⛔ AUCUNE COULEUR ICI. Chaque page donne les siennes dans son « marque.css » :
       --hd-inconscient        la couleur du design      (tableau de gauche)
       --hd-conscient          la couleur de la personnalité (tableau de droite)
       --hd-sur-inconscient    ce qui s'écrit sur la première
       --hd-sur-conscient      ce qui s'écrit sur la seconde
       --hd-centre             un centre défini
       --hd-trait              les contours, les numéros, les pastilles allumées
       --hd-papier             l'intérieur des centres ouverts et des canaux
       --hd-silhouette         la silhouette, derrière
   ========================================================================== */
.schema-hd { display: grid; gap: 14px; align-items: start;
             grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
             grid-template-areas: "inconscient dessin conscient"; }
.schema-hd .hd-dessin { grid-area: dessin; min-width: 0; }
.schema-hd .hd-table.inconscient { grid-area: inconscient; }
.schema-hd .hd-table.conscient { grid-area: conscient; }
/* À l'étroit (un téléphone) : le dessin en haut, les deux tableaux dessous. */
.schema-hd.etroit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 8px;
                    grid-template-areas: "dessin dessin" "inconscient conscient"; }

.hd-table h4 { font-family: var(--police-titre, inherit); margin: 0 0 8px; text-align: center; font-size: .66rem; font-weight: 700;
               line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; }
.hd-table.inconscient h4 { color: var(--hd-inconscient); }
.hd-table.conscient h4 { color: var(--hd-conscient); }
.hd-rang { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 8px;
           margin-bottom: 3px; font-size: .74rem; line-height: 1.15; cursor: default;
           transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
.hd-table.inconscient .hd-rang { background: var(--hd-inconscient); color: var(--hd-sur-inconscient); }
.hd-table.conscient .hd-rang { background: var(--hd-conscient); color: var(--hd-sur-conscient); }
.hd-rang .hd-nom { flex: 1; min-width: 0; text-align: left; white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; }
.hd-table.conscient .hd-nom { text-align: right; }
.hd-rang b { font-weight: 700; white-space: nowrap; }
.hd-glyphe { width: 1.1em; text-align: center; flex: none; }

svg.bodygraph { width: 100%; height: auto; display: block; }
.bodygraph * { transition: opacity .25s ease; }
.bodygraph .silhouette { fill: var(--hd-silhouette); stroke: none; }
.bodygraph .centre-defini { fill: var(--hd-centre); stroke: var(--hd-trait); stroke-linejoin: round; cursor: pointer; }
.bodygraph .centre-ouvert { fill: var(--hd-papier); stroke: var(--hd-trait); stroke-linejoin: round; cursor: pointer; }
.bodygraph .canal-gaine { fill: none; stroke: var(--hd-trait); }
.bodygraph .canal-eteint { fill: none; stroke: var(--hd-papier); }
.bodygraph .canal-conscient { fill: none; stroke: var(--hd-conscient); }
.bodygraph .canal-inconscient { fill: none; stroke: var(--hd-inconscient); }
.bodygraph .pastille { fill: var(--hd-papier); stroke: none; }
.bodygraph .pastille-active { fill: var(--hd-trait); stroke: none; }
.bodygraph text { font-family: var(--police-chiffres, system-ui, sans-serif); pointer-events: none; }
.bodygraph ellipse { pointer-events: none; }
.bodygraph .num-porte { fill: var(--hd-trait); }
.bodygraph .num-porte.actif { fill: var(--hd-papier); }

/* L'EFFET : un centre est visé (souris, doigt ou clavier). Tout s'estompe,
   sauf lui, ses portes, ses moitiés de canaux et les astres qui s'y trouvent. */
.schema-hd.vise .bodygraph [data-centre],
.schema-hd.vise .bodygraph [data-porte],
.schema-hd.vise .bodygraph [data-canal] { opacity: .1; }
.schema-hd.vise .bodygraph .hd-vif { opacity: 1; }
.schema-hd.vise .hd-rang { opacity: .5; }
.schema-hd.vise .hd-rang.hd-vif { opacity: 1; transform: scale(1.05); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) {
  .bodygraph *, .hd-rang { transition: none; }
}

/* LA FICHE sous le schéma : le titre à gauche, la valeur à droite. */
.hd-fiche { display: grid; grid-template-columns: minmax(8.5em, 38%) 1fr; gap: 0 16px;
            margin: 0; text-align: left; font-size: .92rem; line-height: 1.4; }
.hd-fiche dt, .hd-fiche dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--hd-filet, rgba(0, 0, 0, .1)); }
.hd-fiche dt:first-of-type, .hd-fiche dt:first-of-type + dd { border-top: 0; }
.hd-fiche dt { font-weight: 700; font-family: var(--police-titre, inherit); font-size: .82em; letter-spacing: .03em; }