/* v22 — company-context : l'arbre Company OS, objet interactif de la page.
   Scopé sous #context, chargé après toutes les feuilles existantes. */

#context.company-context { align-items: center; }

/* ---------- la carte ---------- */
#context .context-map {
  --tree: #dbe3ec;          /* trait de l'arbre */
  --ind: 32px;              /* retrait : tronc -> ligne */
  --elb: 32px;              /* le coude meurt pile sur le bord de la tuile */
  --sub: 22px;              /* retrait du sous-arbre */
  --sub-elb: 16px;
  --tc: 17px;               /* centre optique de la tuile d'icône */
  position: relative;
  width: 100%;
  max-width: 392px;
  justify-self: center;
  padding: 24px 24px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 26px 50px -34px rgba(11, 18, 32, .30);
}
/* grain papier, imperceptible (3,5 %) */
#context .context-map::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- racine ---------- */
#context .context-root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--ink);
}
#context .context-root img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(11, 18, 32, .06); }
/* raccord racine -> tronc */
#context .context-root::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 100%;
  width: 1px;
  height: 12px;
  background: var(--tree);
}

/* ---------- branches ---------- */
#context .context-branches {
  position: relative;
  border-left: 0;
  margin: 12px 0 0 17px;
  padding: 0 0 0 var(--ind);
}
#context .context-branches > .os-leaf,
#context .context-branches > .os-folder { display: block; position: relative; padding: 0; font-size: 15px; }

/* tronc vertical, porté par chaque nœud : il se raccorde d'un nœud à l'autre */
#context .context-branches > .os-leaf::before,
#context .context-branches > .os-folder::before {
  content: '';
  position: absolute;
  left: calc(var(--ind) * -1);
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  background: var(--tree);
}
/* dernier nœud : le tronc s'arrête pile au centre de la ligne */
#context .context-branches > :last-child::before { bottom: auto; height: 50%; }
/* v22.1 : plus de ligne racine, le tronc démarre au centre du premier nœud */
#context .context-branches > :first-child::before { top: 50%; }

/* coude horizontal, il meurt exactement sur le bord de la pastille de survol */
#context .context-branches > .os-leaf::after,
#context .context-branches > .os-folder > summary::before {
  content: '';
  position: absolute;
  left: calc(var(--ind) * -1);
  top: 50%;
  width: var(--elb);
  height: 1px;
  background: var(--tree);
}

/* ---------- une ligne ---------- */
#context .os-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -9px;
  padding: 7px 9px;
  border-radius: 12px;
  background: transparent;
  transition: background-color .22s cubic-bezier(.2, .7, .2, 1);
}
#context .context-branches > .os-folder > summary {
  position: relative;
  display: block;
  padding: 0;
  min-height: 48px;
  list-style: none;
  cursor: pointer;
  outline: none;
}
#context .context-branches > .os-folder > summary::-webkit-details-marker { display: none; }

/* chevron */
#context .os-label { flex: 1 1 auto; }
#context .os-twist {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 34px;
  margin-left: 8px;
  color: #9aaec4;
}
#context .os-tree .os-chevron {
  display: block;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 0;
  font-size: 0;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), color .22s;
}
#context .os-folder[open] > summary .os-chevron { transform: rotate(90deg); }

/* tuile d'icône */
#context .os-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dde5ee;
  border-radius: 10px;
  background: #fff;
  color: #6e94b7;
  transition: color .24s, border-color .24s, background-color .24s, transform .18s cubic-bezier(.2, .7, .2, 1);
}
#context .os-icon svg { grid-area: 1 / 1; }
#context .os-folder-open { opacity: 0; transition: opacity .26s cubic-bezier(.2, .7, .2, 1); }
#context .os-folder-shut { opacity: 1; transition: opacity .26s cubic-bezier(.2, .7, .2, 1); }
#context .os-folder[open] > summary .os-folder-open { opacity: 1; }
#context .os-folder[open] > summary .os-folder-shut { opacity: 0; }
#context .os-folder[open] > summary .os-icon { background: #f2f8ff; border-color: #cfe4ff; color: var(--blue); }

/* libellés */
#context .os-label {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
}
#context .context-branches small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: #6b7280;
}

/* états */
#context .os-folder > summary:hover .os-row { background: #f4f8fc; }
#context .os-folder > summary:hover .os-icon { border-color: #c8dcf0; color: #4b86bd; }
#context .os-folder > summary:hover .os-twist { color: #6e94b7; }
#context .os-folder > summary:active .os-row { background: #eef4fb; }
#context .os-folder > summary:active .os-icon { transform: scale(.96); }
#context .os-folder > summary:focus-visible .os-row {
  background: #f2f8ff;
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- sous-arbre ---------- */
#context .os-panel { display: grid; grid-template-rows: 1fr; }
#context .os-panel > .os-children { overflow: hidden; min-height: 0; }
.js #context .os-panel { transition: grid-template-rows .38s cubic-bezier(.2, .7, .2, 1); }

#context .os-tree .os-children {
  border-left: 0;
  margin: 0 0 0 var(--tc);
  padding: 0 0 0 var(--sub);
  display: flex;
  flex-direction: column;
}
/* raccord tuile ouverte -> tronc du sous-arbre */
#context .os-folder[open] > summary::after {
  content: '';
  position: absolute;
  left: var(--tc);
  top: calc(50% + 17px);
  bottom: 0;
  width: 1px;
  background: var(--tree);
}
/* respiration sous le sous-arbre, à l'intérieur de la zone rognée pour que le repli tombe à zéro */
#context .os-children::after { content: ''; display: block; height: 10px; }
#context .os-tree .os-children span {
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #4b5563;
}
#context .os-children span::before {
  content: '';
  position: absolute;
  left: calc(var(--sub) * -1);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tree);
}
#context .os-children span:last-child::before { bottom: auto; height: 50%; }
#context .os-children span::after {
  content: '';
  position: absolute;
  left: calc(var(--sub) * -1);
  top: 50%;
  width: var(--sub-elb);
  height: 1px;
  background: var(--tree);
}

/* entrée des enfants à l'ouverture */
.js #context .os-folder[open] > .os-panel .os-children span { animation: ctx-child .34s cubic-bezier(.2, .7, .2, 1) both; }
.js #context .os-children span:nth-child(1) { animation-delay: .04s; }
.js #context .os-children span:nth-child(2) { animation-delay: .08s; }
.js #context .os-children span:nth-child(3) { animation-delay: .12s; }
.js #context .os-children span:nth-child(4) { animation-delay: .16s; }
.js #context .os-children span:nth-child(5) { animation-delay: .20s; }
.js #context .os-children span:nth-child(6) { animation-delay: .24s; }
.js #context .os-children span:nth-child(7) { animation-delay: .28s; }
@keyframes ctx-child { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ---------- légende ---------- */
#context .visual-caption {
  position: relative;
  display: block;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .01em;
  color: var(--muted-2);
  text-align: center;
}

/* ---------- entrée au scroll, en cascade ---------- */
.js #context .context-map .context-root,
.js #context .context-map .os-row,
.js #context .context-map .visual-caption {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .52s cubic-bezier(.2, .7, .2, 1), transform .52s cubic-bezier(.2, .7, .2, 1), background-color .22s cubic-bezier(.2, .7, .2, 1);
}
.js #context .context-map.is-visible .context-root,
.js #context .context-map.is-visible .os-row,
.js #context .context-map.is-visible .visual-caption { opacity: 1; transform: none; }
.js #context .context-branches > :nth-child(1) .os-row { transition-delay: .08s; }
.js #context .context-branches > :nth-child(2) .os-row { transition-delay: .14s; }
.js #context .context-branches > :nth-child(3) .os-row { transition-delay: .20s; }
.js #context .context-branches > :nth-child(4) .os-row { transition-delay: .26s; }
.js #context .context-branches > :nth-child(5) .os-row { transition-delay: .32s; }
.js #context .context-branches > :nth-child(6) .os-row { transition-delay: .38s; }
.js #context .context-map .visual-caption { transition-delay: .46s; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  #context .context-map {
    --ind: 26px;
    --elb: 26px;
    max-width: none;
    padding: 20px 18px 16px;
  }
  #context .context-branches { margin-left: 16px; }
  #context .context-root::after { left: 16px; }
  #context .os-label { font-size: 15px; }
  #context .visual-caption { margin-top: 18px; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .js #context .context-map .context-root,
  .js #context .context-map .os-row,
  .js #context .context-map .visual-caption { opacity: 1; transform: none; }
  .js #context .os-folder[open] > .os-panel .os-children span { animation: none; }
}