/* Outil · Arborescence : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ar-
   Deux colonnes (.outil-colonnes) : à gauche l'arbre (zone de hauteur fixe, qui défile ; on le modifie directement),
   une ligne d'état et les exports ; à droite le nom du projet, le modèle, les options. */
.ar .outil-fixe { align-items: stretch; }

.ar-zone { display: block; position: relative; width: 100%; box-sizing: border-box; text-align: left; height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 8px; border-radius: 14px;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux); }
@media (min-width: 960px) { .ar-zone { height: 520px; padding: 14px 12px; } }

/* Une ligne : les guides des niveaux, l'icône, le numéro, le nom (à taper), + et × */
.ar-ligne { --pas: 22px; position: relative; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 calc(var(--niveau) * var(--pas) + 8px); border-radius: 8px; }
.ar-ligne::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: calc(var(--niveau) * var(--pas));
  background: repeating-linear-gradient(to right, transparent 0 8px, var(--filet) 8px 9px, transparent 9px var(--pas)); pointer-events: none; }
.ar-ligne:hover, .ar-ligne:focus-within { background: rgba(242, 240, 235, .035); }
.ar-icone { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--texte2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ar-ligne:focus-within .ar-icone { stroke: var(--papier); }
.ar-num { flex: none; font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--texte2); }
.ar-num:empty { display: none; }
.ar-nom { flex: 1; min-width: 0; height: 30px; padding: 0 6px; margin-left: -6px; border: 0; outline: none; border-radius: 6px; background: none;
  font: 400 14px/1 var(--corps); color: var(--papier); text-overflow: ellipsis; }
.ar-nom:focus { background: rgba(242, 240, 235, .06); }
.ar-nom::selection { background: rgba(255, 90, 31, .35); }
.ar-mini { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: none; color: var(--texte2); opacity: 0; transition: opacity .15s var(--courbe), background .15s var(--courbe), color .15s var(--courbe); }
.ar-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-mini:hover { background: rgba(242, 240, 235, .08); color: var(--papier); }
.ar-mini[data-suppr]:hover { color: var(--orange); }
.ar-mini:disabled { visibility: hidden; }
.ar-ligne:hover .ar-mini, .ar-ligne:focus-within .ar-mini { opacity: 1; }
@media (hover: none) { .ar-mini { opacity: .7; } }
.ar-ligne.neuf { animation: ar-entre .28s var(--courbe); }
@keyframes ar-entre { from { opacity: 0; translate: -6px 0; } }

/* La poignée : l'icône du dossier, qu'on attrape pour le déplacer */
.ar-poignee { flex: none; display: grid; place-items: center; width: 28px; height: 32px; margin: 0 -5px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ar-poignee:hover .ar-icone { stroke: var(--papier); }
/* Glisser-déposer : le dossier tenu (et ce qu'il contient) s'efface, une barre orange ou un cadre montrent où il va */
.ar-ligne.tenue { opacity: .28; }
.ar-ligne.cible { background: rgba(255, 90, 31, .1); box-shadow: inset 0 0 0 1.5px var(--orange); }
.ar-ligne.cible .ar-icone { stroke: var(--orange); }
.ar-marque { position: absolute; right: 12px; height: 2px; border-radius: 1px; background: var(--orange); pointer-events: none; display: none; z-index: 2; }
.ar-marque::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.ar-marque.visible { display: block; }
.ar-fantome { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(30, 28, 25, .94); box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--filet); transform: translate(-14px, -50%) rotate(-2deg);
  font: 400 14px/1 var(--corps); color: var(--papier); white-space: nowrap; }
.ar-fantome .ar-icone { stroke: var(--orange); }
.ar-fantome b { font: 600 11px/1 var(--mono); color: var(--orange); }

/* Le dossier du projet, en tête, en orange */
.ar-racine .ar-icone { stroke: var(--orange); }
.ar-racine-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1 var(--mono); letter-spacing: .02em; color: var(--papier); }
.ar-racine:hover { background: none; }

/* « Ajouter un dossier », en bas de l'arbre */
.ar-ajouter { width: 100%; border: 0; background: none; cursor: pointer; font: 400 13.5px/1 var(--corps); color: var(--texte2); text-align: left; }
.ar-ajouter::before { display: none; }
.ar-ajouter:hover { color: var(--papier); }
.ar-ajouter:hover .ar-icone { stroke: var(--papier); }

.ar-etat { height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ar-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ar-actions .pastille { cursor: pointer; }
.ar-actions .pastille:hover { translate: none; }
.ar-actions .pastille:disabled { opacity: .3; cursor: default; }

.ar label .groupe { display: block; }
/* La date : Devant / Derrière, puis les formats, sous l'interrupteur ; retirées sans la date (choix du propriétaire : ce qui suit remonte) */
.ar-place { margin: 4px 0 8px; }
.ar-place button { padding: 9px 4px; }
.ar-dates { margin: 0 0 6px; }
.ar-dates button { padding: 9px 2px; font: 500 12px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.ar-dates.cache, .ar-place.cache { display: none; }
.ar-bas { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ar-bas .pastille { cursor: pointer; }
.ar-bas .pastille:hover { translate: none; }
.ar-bas .pastille:disabled { opacity: .3; cursor: default; }
.ar-astuce { margin: 0; text-align: left; }
/* Téléphone : le nom et le modèle d'abord, puis l'arbre et les exports, puis les options */
@media (max-width: 959px) {
  .ar-tete { order: -2; }
  .ar-zone, .ar-etat, .ar-actions { order: -1; }
  .ar-zone { height: 380px; }
}
@media (hover: none) { .ar-astuce { visibility: hidden; } }