/* ============================================================
   Carte mentale — composant du socle Crise et Résilience
   ------------------------------------------------------------
   Un arbre qu'on déplace, qu'on zoome et qu'on plie. Le dessin est
   posé par js/carte-mentale.js ; ce fichier ne décrit que l'allure.

   Modèle d'origine : la base de connaissances client (Héma-Québec).
   Il vivait en double, recopié dans le dossier d'exercice : une
   correction d'un côté ne suivait pas de l'autre. Une seule copie
   désormais, ici.

   Structure attendue :
     .carte-mentale            le conteneur, en position relative
       .carte                  la fenêtre qui écoute les gestes
         .monde                le plan qu'on translate et qu'on met à l'échelle
           svg.traits          les liaisons
           button.nd           un nœud (autant que de fiches)

   Rien n'est en dur : tout passe par les variables du thème.
   ============================================================ */

/* Couleurs des branches. Posées une fois, jamais en dur dans une règle. */
:root{
  --br-or:     var(--accent);
  --br-rouge:  var(--error);
  --br-vert:   var(--success);
  --br-cyan:   var(--info);
  --br-ambre:  var(--warning);
  --br-bleu:   #6aa9f0;
  --br-violet: #b98ce0;
  --br-indigo: #8f9bf0;
  --br-gris:   var(--text-muted);
}
/* en clair, les trois teintes froides manquent de contraste sur blanc */
html:has(body.theme-light), body.theme-light{
  --br-bleu:   #2a6ec4;
  --br-violet: #7f4bb8;
  --br-indigo: #4a58c0;
}

/* ---------- la scène ---------- */
.carte-mentale{position:relative}
/* 🚨 ENFANT DIRECT. `.carte-mentale .carte` frappait toute classe `.carte` sous
   l'hote : le chronogramme du dossier d'exercice, dont chaque jalon porte une
   `.carte`, voyait ses cartes passer en `position:absolute; inset:0` et sortir
   a 1424 px de large. Le JS ne cherche de toute facon que `:scope > .carte`. */
.carte-mentale > .carte{position:absolute;inset:0;overflow:hidden;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none}
.carte-mentale > .carte.tire{cursor:grabbing}
.carte-mentale > .carte > .monde{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.carte-mentale > .carte .traits{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.carte-mentale .trait{fill:none;stroke:var(--coul,var(--accent));stroke-width:2;opacity:.55;
  stroke-linecap:round}
/* la ligne du temps d une frise : un axe plein, un point par jalon, un piquet
   discret vers chaque boite */
.carte-mentale .trait.axe{stroke-width:2.5;opacity:.8}
.carte-mentale .trait.piquet{stroke-width:1.5;opacity:.4}
.carte-mentale .jalon-point{fill:var(--coul,var(--accent));opacity:.9}

/* ---------- un nœud ---------- */
/* 🚨 L'ALLURE ET LE PLACEMENT SONT SEPARES. Un noeud sert aussi hors d'une
   carte : le chronogramme du dossier d'exercice pose ses trois boites dans le
   flux et veut le meme formalisme. Seule la carte les place en absolu. */
.carte-mentale > .carte .nd{position:absolute}
.nd{box-sizing:border-box;display:flex;gap:9px;align-items:flex-start;
  padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--bg-card);color:var(--text);font-family:inherit;text-align:left;
  cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.nd:hover{background:var(--bg-card-hover);border-color:var(--coul,var(--accent))}
.nd.vise{border-color:var(--coul,var(--accent));box-shadow:0 0 0 2px var(--accent-alpha)}
.nd.eteint{opacity:.28}
.nd .ic{flex:0 0 auto;width:22px;height:22px;color:var(--coul,var(--accent))}
.nd .ic svg{width:22px;height:22px;display:block}
.carte-mentale .ic.web{cursor:pointer;border-radius:var(--radius-xs);padding:1px;margin:-1px;
  transition:var(--transition-norm)}
.carte-mentale .ic.web:hover{background:var(--accent-alpha);color:var(--accent)}
.nd .lb{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.35;font-weight:600;
  overflow-wrap:break-word}
/* 🚨 --text-comment mesure 3,80 de contraste sur le fond d'un noeud (il en faut
   4,5 a 11 px) : « 3 points », « 2 personnes » est un comptage, pas du texte
   decoratif. Il prend l'encre du niveau au-dessus. */
.nd .sous{display:block;margin-top:3px;font-size:11px;font-weight:400;
  color:var(--text-muted);line-height:1.4}

/* le pli : un rond qui dit s'il reste quelque chose dessous */
.nd .pli{flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--border-light);background:var(--bg-input);color:var(--text-muted);
  font-size:11px;line-height:17px;text-align:center;font-weight:700}
.nd.ouvert .pli{background:var(--coul,var(--accent));
  border-color:var(--coul,var(--accent));color:var(--bg-base)}
.nd.feuille .pli,.nd.terminal .pli{display:none}

/* la racine et les branches se distinguent par le poids, pas par la couleur seule */
.nd.n0{padding:14px 16px;border-color:var(--accent);border-width:2px;
  background:var(--bg-elevated)}
/* meme police que les autres noeuds : la racine se distingue par sa taille et
   son cadre, pas par un serif (Alex, 2026-08-14) */
.nd.n0 .lb{font-size:16px;letter-spacing:.3px}
.nd.n0 .ic,.nd.n0 .ic svg{width:26px;height:26px}
.nd.n1{border-left:3px solid var(--coul,var(--accent))}
.nd.n1 .lb{font-size:13.5px}

/* ---------- marques posées dans un nœud ---------- */
/* le drapeau vit dans la ligne du titre, jamais seul : il précise, il ne remplace pas */
.carte-mentale .dr,.dr{display:inline-block;width:17px;height:11.5px;margin-right:6px;
  vertical-align:baseline;border-radius:2px;overflow:hidden;border:1px solid var(--border-light);
  line-height:0}
.carte-mentale .dr svg,.dr svg{width:100%;height:100%;display:block}
/* le livre dit qu'un cas est décortiqué ailleurs, en entier */
.nd .etu{flex:0 0 auto;width:18px;height:18px;color:var(--coul,var(--accent));
  cursor:pointer;opacity:.75;transition:var(--transition-norm)}
.nd .etu svg{width:18px;height:18px;display:block}
.nd .etu:hover{opacity:1;transform:scale(1.12)}
/* une fiche qui vient du client se voit d'un coup d'œil */
.nd .conf{flex:0 0 auto;width:18px;height:18px;color:var(--warning)}
.nd .conf svg{width:18px;height:18px;display:block}

/* La barre d'outils et le panneau de lecture ne sont PAS ici : ils tiennent à
   l'écran qui les porte (largeur, position, ce qu'ils racontent). Le socle
   s'arrête au dessin. */

/* À L'IMPRESSION : rien ici, volontairement.
   Des nœuds posés en absolu dans un cadre à hauteur d'écran ne sortent pas
   d'eux-mêmes. Chaque programme décide : garder sa matière en clair sous la
   carte et effacer le dessin, ou mettre la scène à plat. Le socle ne tranche
   pas à sa place. */