/* ═══════════════════════════════════════
   Organigramme radial — page /equipage.html
   ═══════════════════════════════════════ */
.org{position:relative;z-index:3;padding:100px clamp(16px,4vw,40px) 60px;max-width:1300px;margin-inline:auto}
.org__head{text-align:center;margin-bottom:26px}
.org__head .lead{margin-inline:auto}

/* ─── Barre d'outils ─── */
.org__tools{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:14px;
}
.org__legend{display:flex;gap:14px;flex-wrap:wrap}
.org-key{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--steel);
}
.org-key i{
  width:10px;height:10px;background:var(--c);flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.org__zoom{display:flex;gap:6px}
.org__zoom button{
  font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;
  color:var(--steel);background:rgba(84,173,247,.06);
  border:1px solid rgba(84,173,247,.22);
}
.org__zoom button:hover{color:var(--txt);border-color:var(--cyan);background:rgba(84,173,247,.14)}

/* ─── Scène ─── */
.org__stage{
  position:relative;
  border:1px solid rgba(84,173,247,.16);
  background:
    radial-gradient(60% 50% at 50% 50%,rgba(84,173,247,.07),transparent 70%),
    linear-gradient(to top,rgba(10,26,37,.5),rgba(4,10,16,.6));
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  overflow:hidden;
}
#chart{
  display:block;width:100%;height:min(78vh,860px);
  touch-action:none;cursor:grab;
}
#chart:active{cursor:grabbing}
.org__state{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--steel);
  pointer-events:none;
}
.org__hint{
  text-align:center;margin:16px 0 0;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--steel);opacity:.55;
}

/* ─── Anneaux de grade ─── */
.org-ring{fill:none;stroke:rgba(168,179,189,.14);stroke-width:1;stroke-dasharray:3 9}
.org-ring-label{
  fill:rgba(168,179,189,.45);font-family:'JetBrains Mono',monospace;
  font-size:15px;letter-spacing:.22em;text-anchor:middle;
}

/* ─── Liaisons ─── */
.org-spine{stroke-width:2;opacity:.3}
.org-link{fill:none;stroke-width:1.4;opacity:.45}

/* ─── Noyau ─── */
.org-core-halo{fill:rgba(255,176,32,.07);stroke:none}
.org-core-ring{fill:none;stroke:rgba(255,210,74,.5);stroke-width:1.5;stroke-dasharray:5 7}
.org-core-label{
  fill:#ffd24a;font-family:'Bai Jamjuree',sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.16em;text-anchor:middle;
}
.org-core-empty{
  fill:rgba(168,179,189,.5);font-family:'JetBrains Mono',monospace;
  font-size:14px;text-anchor:middle;
}

/* ─── Noms de division ─── */
.org-div{
  font-family:'Bai Jamjuree',sans-serif;font-weight:700;font-size:26px;
  letter-spacing:.1em;text-anchor:middle;opacity:.9;
}

/* ─── Membres ─── */
.org-node{cursor:pointer}
.org-hex{fill:rgba(10,26,37,.9);stroke:none}
.org-hex-ring{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.75;transition:opacity .2s,stroke-width .2s}
.org-ini{
  fill:var(--c);font-family:'Bai Jamjuree',sans-serif;font-weight:600;
  text-anchor:middle;letter-spacing:-.02em;
}
.org-name{
  fill:#e6ecf2;font-family:'Bai Jamjuree',sans-serif;font-weight:500;
  font-size:17px;text-anchor:middle;paint-order:stroke;
  stroke:#000;stroke-width:4px;stroke-linejoin:round;
}
.org-name--big{font-size:21px;font-weight:600}

.org-node:hover .org-hex-ring,
.org-node:focus-visible .org-hex-ring{opacity:1;stroke-width:3}
.org-node:focus-visible{outline:none}
.org-node:focus-visible .org-name{fill:var(--c)}

@media (max-width:700px){
  #chart{height:64vh}
  .org-name{font-size:21px}
  .org-div{font-size:30px}
  .org-ring-label{font-size:18px}
}

/* Rattachement d'un Apôtre à l'axe de sa division */
.org-tie{stroke-width:2;opacity:.55;stroke-dasharray:4 5}

/* ═══════════════════════════════════════
   FICHE MEMBRE
   Panneau latéral à droite sur ordinateur, feuille basse sur téléphone.
   ═══════════════════════════════════════ */
.sheet__scrim{
  position:fixed;inset:0;z-index:120;background:rgba(3,6,10,.6);
  backdrop-filter:blur(3px);animation:scrim .25s;
}
@keyframes scrim{from{opacity:0}}
.sheet__scrim[hidden]{display:none}
/* Sur grand écran le graphe reste manipulable : pas de voile. */
@media (min-width:861px){.sheet__scrim{display:none}}

.sheet{
  --c:var(--cyan);
  position:fixed;z-index:130;
  background:linear-gradient(to top,rgba(8,20,28,.97),rgba(6,14,21,.97));
  backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  display:flex;flex-direction:column;
  transition:transform .42s var(--ease),opacity .3s var(--ease);
  overscroll-behavior:contain;
}
.sheet__in{padding:26px 26px 30px;overflow-y:auto;text-align:center}

/* Ordinateur : panneau collé à droite */
@media (min-width:861px){
  .sheet{
    top:86px;right:18px;width:352px;max-height:calc(100svh - 110px);
    clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
    transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none;
  }
  .sheet.is-open{transform:none;opacity:1;pointer-events:auto}
  .sheet__grab{display:none}
}

/* Téléphone : feuille qui monte du bas */
@media (max-width:860px){
  .sheet{
    left:0;right:0;bottom:0;max-height:82svh;border-bottom:0;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
  .sheet.is-open{transform:none}
  .sheet__grab{
    display:block;width:44px;height:4px;border-radius:3px;margin:10px auto 0;
    background:rgba(168,179,189,.35);flex:none;
  }
  .sheet__in{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}

.sheet__x{
  position:absolute;top:10px;right:12px;z-index:2;
  width:34px;height:34px;font-size:14px;cursor:pointer;
  color:var(--steel);background:rgba(255,255,255,.07);border:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.sheet__x:hover{background:rgba(255,255,255,.16);color:var(--txt)}

.sheet__av{
  width:116px;height:130px;margin:6px auto 14px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 34%,transparent),#0a1a24);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent);
}
.sheet__av img{width:100%;height:100%;object-fit:cover}
.sheet__av b{font-size:2.3rem;font-weight:600;color:var(--c);letter-spacing:-.02em}

.sheet__badge{
  display:inline-block;padding:5px 14px;margin-bottom:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  font-weight:700;color:#04121c;background:var(--c);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.sheet__name{
  font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 3px;
  color:var(--txt);overflow-wrap:anywhere;line-height:1.2;
}
.sheet__call{font-style:italic;color:var(--c);opacity:.9;margin:0 0 18px;font-size:.95rem}
.sheet__call[hidden]{display:none}

.sheet__rows{margin:0 0 18px;display:grid;gap:0;text-align:left}
.sheet__rows > div{
  display:flex;justify-content:space-between;gap:14px;padding:10px 2px;
  border-bottom:1px solid rgba(168,179,189,.12);
}
.sheet__rows > div:first-child{border-top:1px solid rgba(168,179,189,.12)}
.sheet__rows dt{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);opacity:.65;margin:0;
}
.sheet__rows dd{margin:0;font-weight:500;font-size:.95rem;text-align:right;overflow-wrap:anywhere}

.sheet__bio{font-size:.92rem;line-height:1.65;color:var(--steel);margin:0 0 18px;text-align:left}
.sheet__bio[hidden]{display:none}

.sheet__code{display:flex;gap:2px;height:17px;align-items:flex-end;justify-content:center;opacity:.4}
.sheet__code i{display:block;width:2px;background:var(--c)}

/* Nœud sélectionné dans le graphe */
.org-node.is-active .org-hex-ring{opacity:1;stroke-width:3.5}
.org-node.is-active .org-name{fill:var(--c)}

@media (prefers-reduced-motion:reduce){
  .sheet{transition:none}
}

/* ─── Habillage de la fiche : au niveau des anciennes cartes ─── */
.sheet{overflow:hidden}
.sheet::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(85% 42% at 50% 0%,color-mix(in srgb,var(--c) 26%,transparent),transparent 72%);
}
.sheet__in{position:relative;z-index:1}
.sheet__x,.sheet__grab{z-index:3}

/* Filigrane du sigle de division */
.sheet__wm{
  position:absolute;z-index:0;left:50%;top:92px;transform:translate(-50%,-50%);
  font-family:'Bai Jamjuree',sans-serif;font-weight:700;font-size:5.4rem;line-height:1;
  letter-spacing:-.05em;color:var(--c);opacity:.09;pointer-events:none;white-space:nowrap;
}

/* Avatar : halo coloré, comme sur les cartes */
.sheet__av{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),
             0 14px 38px -12px color-mix(in srgb,var(--c) 70%,transparent);
}

/* Jauge de rang : un segment par grade */
.sheet__gauge{display:flex;gap:4px;justify-content:center;margin:0 0 20px}
.sheet__gauge i{
  display:block;width:26px;height:4px;background:rgba(168,179,189,.16);
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
}
.sheet__gauge i.on{background:var(--c);box-shadow:0 0 9px color-mix(in srgb,var(--c) 70%,transparent)}

/* Lignes de données : légèrement encadrées */
.sheet__rows{
  padding:2px 14px;background:rgba(0,0,0,.25);
  border-left:2px solid color-mix(in srgb,var(--c) 45%,transparent);
}
.sheet__rows > div:last-child{border-bottom:0}
.sheet__rows dd{color:var(--txt)}

.sheet__bio{
  padding:14px 16px;background:rgba(84,173,247,.05);
  border-left:2px solid rgba(168,179,189,.18);font-style:italic;
}

/* L'attribut `hidden` doit primer sur les règles d'affichage de classe :
   sans cela `.org__state{display:grid}` maintient le message de chargement
   visible même après `hidden = true`. */
[hidden]{display:none!important}

/* ─── Légende devenue filtre : une case par division ─── */
.org-key{
  font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--steel);background:rgba(255,255,255,.03);
  border:1px solid rgba(168,179,189,.18);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:.22s var(--ease);
}
.org-key b{font-weight:400;opacity:.55;font-size:10px}
.org-key:hover{border-color:var(--c);color:var(--txt)}

/* Décochée : grisée et barrée */
.org-key[aria-pressed="false"]{opacity:.4}
.org-key[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 1px var(--c)}
.org-key[aria-pressed="false"] b{text-decoration:line-through}

/* Cochée : liseré et pastille pleine */
.org-key[aria-pressed="true"]{
  color:var(--txt);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.org-key[aria-pressed="true"] i{box-shadow:0 0 10px color-mix(in srgb,var(--c) 80%,transparent)}

/* ─── Titre de rang, en toutes lettres ─── */
.sheet__rank{
  margin:0 0 9px;font-family:'Bai Jamjuree',sans-serif;font-weight:600;
  font-size:1.05rem;letter-spacing:.01em;color:var(--c);
  text-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent);
}

/* ─── Reflet qui balaie la fiche à l'ouverture ─── */
.sheet__sweep{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    transparent 36%,
    color-mix(in srgb,var(--c) 16%,transparent) 47%,
    rgba(255,255,255,.14) 50%,
    color-mix(in srgb,var(--c) 16%,transparent) 53%,
    transparent 64%);
}
.sheet__sweep.is-lit{animation:sheet-sweep 1.15s var(--ease) .16s both}
@keyframes sheet-sweep{
  0%{opacity:0;transform:translateX(-72%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(72%)}
}

/* Reflet permanent sur l'avatar, façon surface vitrée */
.sheet__av{position:relative}
.sheet__av::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(128deg,
    rgba(255,255,255,.26) 0 18%,
    rgba(255,255,255,.07) 30%,
    transparent 46%);
}

@media (prefers-reduced-motion:reduce){
  .sheet__sweep{display:none}
}

/* ═══════════════════════════════════════
   INCLINAISON 3D DE LA FICHE
   Le glissement d'ouverture et l'inclinaison partagent la même propriété
   `transform` : on les compose via deux variables pour qu'elles ne
   s'écrasent pas mutuellement.
   ═══════════════════════════════════════ */
.sheet{
  --slide:translate(0,0);
  --tilt:rotateX(0deg) rotateY(0deg);
  transform:perspective(1100px) var(--slide) var(--tilt);
  transform-style:preserve-3d;
  will-change:transform;
}
/* L'inclinaison suit le pointeur sans latence ; le glissement garde sa durée. */
.sheet.is-tilting{transition:none}

@media (min-width:861px){
  .sheet{--slide:translateX(calc(100% + 30px));opacity:0;pointer-events:none}
  .sheet.is-open{--slide:translateX(0);opacity:1;pointer-events:auto}
}
@media (max-width:860px){
  .sheet{--slide:translateY(100%)}
  .sheet.is-open{--slide:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .sheet{--tilt:none!important}
}

/* Les règles précédentes posaient `transform` sur `.sheet.is-open`, avec une
   spécificité supérieure à `.sheet` : elles annulaient la composition. On la
   réaffirme au même niveau de spécificité, et plus loin dans la feuille. */
@media (min-width:861px){
  .sheet,.sheet.is-open{transform:perspective(1100px) var(--slide) var(--tilt)}
}
@media (max-width:860px){
  .sheet,.sheet.is-open{transform:perspective(1100px) var(--slide) var(--tilt)}
}

/* ─── Feuille basse : pivot sur le bord inférieur ───
   En pivotant autour du centre, une rotation de quelques degrés fait sortir
   le bas de la feuille de l'écran et donne l'impression qu'elle a glissé
   trop bas. Le pivot sur le bord bas la maintient ancrée. */
@media (max-width:860px){
  .sheet{transform-origin:50% 100%}
  /* Marge de sécurité : la feuille ne peut jamais dépasser sous l'écran. */
  .sheet{max-height:min(82svh,82dvh)}
}

/* ═══════════════════════════════════════
   CORRECTIF — glissement et inclinaison séparés
   Le glissement d'ouverture était construit avec var() à l'intérieur de
   `transform`. Les propriétés personnalisées n'étant pas interpolables,
   la transition devient peu fiable selon le moteur : sur WebKit le panneau
   pouvait rester à sa position de départ, hors écran.
   Le panneau reprend donc un `transform` littéral et transitionnable ;
   l'inclinaison 3D passe sur un calque interne.
   ═══════════════════════════════════════ */
.sheet{
  transform-style:flat;
  will-change:transform;
}
@media (min-width:861px){
  .sheet{transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none}
  .sheet.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
}
@media (max-width:860px){
  .sheet{transform:translateY(100%);transform-origin:50% 100%}
  .sheet.is-open{transform:translateY(0)}
}

/* Calque d'inclinaison : hérite de --tilt, posé par le script sur .sheet. */
.sheet__tilt{
  display:contents;
}
@media (hover:hover) and (pointer:fine){
  .sheet__tilt{
    display:block;height:100%;
    transform:perspective(1100px) var(--tilt,rotateX(0deg) rotateY(0deg));
    transform-style:preserve-3d;
    transition:transform .3s var(--ease);
  }
  .sheet.is-tilting .sheet__tilt{transition:none}
}

/* Le calque d'inclinaison participe au flux de la feuille : il doit occuper
   la hauteur restante et laisser le contenu défiler à l'intérieur. */
.sheet__tilt{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;position:relative;
  transform:perspective(1100px) var(--tilt,rotateX(0deg) rotateY(0deg));
  transform-style:preserve-3d;
  transition:transform .3s var(--ease);
}
.sheet.is-tilting .sheet__tilt{transition:none}
@media (max-width:860px){
  /* Pivot en bas : la feuille reste ancrée au bord de l'écran. */
  .sheet__tilt{transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){
  .sheet__tilt{transform:none}
}

/* ═══════════════════════════════════════
   FEUILLE BASSE — mécanique de secours
   Le glissement par `transform` ne prenait pas sur l'appareil cible, sans
   que la cause ait pu être identifiée à distance. On change de levier :
   `translate` est une propriété autonome, animable, indépendante du
   `transform` du calque d'inclinaison.
   Surtout, `visibility` porte désormais l'état ouvert/fermé : si le
   glissement ne s'applique pas — propriété non reconnue, règle écrasée —
   la fiche s'affiche quand même en place au lieu de rester hors écran.
   ═══════════════════════════════════════ */
@media (max-width:860px){
  .sheet{
    transform:none!important;
    translate:0 100%;
    visibility:hidden;
    transition:translate .4s var(--ease),visibility 0s linear .4s;
  }
  .sheet.is-open{
    translate:0 0;
    visibility:visible;
    transition:translate .4s var(--ease),visibility 0s;
  }
}

/* Cible tactile : invisible, mais capte les appuis autour de l'hexagone. */
.org-hit{fill:transparent;stroke:none;pointer-events:all}

/* ─── Gestes tactiles parasites ───
   Le carré bleu au toucher est la surbrillance de tape du navigateur, le
   liseré blanc l'amorce de sélection ou le menu contextuel d'appui long.
   Les trois brouillent la lecture et retardent l'ouverture de la fiche. */
#chart,#chart *{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}
#chart{touch-action:none}
.org-node:focus{outline:none}

/* ═══════════════════════════════════════
   CIBLE TACTILE UNIQUE
   Les <image> des avatars captaient l'appui et déclenchaient le geste
   natif du navigateur (menu « enregistrer l'image »), qui retarde ou
   supprime le `click` : d'où l'obligation de maintenir le doigt.
   Tout le contenu du nœud devient non interactif ; seul le cercle de
   visée reçoit les événements.
   ═══════════════════════════════════════ */
.org-node image,
.org-node .org-hex,
.org-node .org-hex-ring,
.org-node .org-ini,
.org-node .org-name{
  pointer-events:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.org-hit{pointer-events:all;fill:transparent;stroke:none}

/* ─── Fiche masquée par son membre : « censurée » ─── */
.org-node--redacted .org-hex{fill:#0b0f14;stroke-dasharray:4 3}
.org-node--redacted .org-ini{fill:var(--c);opacity:.7}
.org-node--redacted .org-name{letter-spacing:-.05em;opacity:.55}
.sheet--redacted #sheetName{letter-spacing:-.04em;color:#e9ebf2;opacity:.8}
.sheet--redacted #sheetAv{filter:grayscale(1)}
.sheet--redacted #sheetBio{font-style:italic;opacity:.7}