/* ============================================================
   _header.css — Le rail de l'Ordre · barre latérale de navigation
   Une seule plaque d'obsidienne, pleine de matière : pas de verre
   dépoli (le rail est fixe et l'arrière-plan est animé, tout verre
   le ferait recomposer à chaque frame), mais un dégradé de braises
   en haut et au pied, un liseré à droite, et une couleur de maison
   par entrée.
   Échelle de la famille : entrées de 52 px en pilule, glyphe de 20 px,
   plaque de profil bordée de la couleur du rang.
   Contrats tenus : ids #siteSidebar, #sidebarToggle, #sidebarClose,
   #sidebarOverlay, #themeToggle, #sidebarPeek · classes .site-sidebar,
   .sidebar-launcher, .sidebar-overlay, état .is-open, état .is-peek · variable
   --sidebar-width consommée par le filigrane de fond.
   Moteur : public/assets/js/sidebar.js (tiroir ≤960 px, aperçu du profil au
   pouce), app.js (thème). L'aperçu en vol sur le bureau est du seul CSS ; sa
   cascade d'étages est portée par les @keyframes sb-* et jouée par la porte
   d'entrée `.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek)`.
   ============================================================ */

/* ── 1. Jetons du rail ──────────────────────────────────────── */
/* Posés sur le corps et non sur le rail : le lanceur et le voile sont
   ses frères dans l'arbre, ils doivent parler la même monnaie. */
body.has-sidebar{
  --sidebar-width: 344px;
  --nav-h: 0px;
  --sb-ink: #f8ede8;
  --sb-soft: #d6c0ba;
  --sb-muted: #9b8288;
  --sb-ruby: #ff4d63;
  --sb-ember: #ff8a4c;

  --sb-gold: #ffdc9a;
  /* La maison du rang, écrit en ligne par le gabarit quand le conseil a
     un grade. Sans lui, la plaque reste à la braise ordinaire. */
  --sb-house: var(--sb-ember);
  --sb-line: #ffb9a326;
  --sb-line-soft: #ffb9a314;
  --sb-plate: linear-gradient(168deg, #ff3d5c12, transparent 46%), linear-gradient(6deg, #ff8a4c0f, transparent 34%), #100a0cf2;

  --sb-ease: cubic-bezier(.16, 1, .3, 1);
  /* Cadence du pointeur, la même que dans la fenêtre de Fido : la descente
     est immédiate, le relâchement reprend l'amortie du rail. */
  --sb-tap: .08s;
  /* Le socle de l'Ordre est posé sur la voûte : !important écarte le
     padding hérité de la feuille responsive legacy. */
  padding: 0 0 0 var(--sidebar-width) !important;
}
html[data-theme="light"] body.has-sidebar{
  --sb-ink: #2b1a18;
  --sb-soft: #5d4642;
  --sb-muted: #8b706c;
  --sb-ruby: #d8303f;
  --sb-ember: #d1671f;

  --sb-gold: #a4560d;
  --sb-house: #b7652c;
  --sb-line: #b9544633;
  --sb-line-soft: #b954461a;
  --sb-plate: linear-gradient(168deg, #ffffff, transparent 46%), linear-gradient(6deg, #ffd9b84d, transparent 34%), #fff7f0f7;

}

/* ── 2. La plaque ───────────────────────────────────────────── */
.site-sidebar,.site-sidebar *{ box-sizing: border-box }
.has-sidebar .app-shell{ width: 100%; min-width: 0; max-width: none }
.site-sidebar{
  position: fixed; inset: 0 auto 0 0; z-index: 1000;
  width: var(--sidebar-width); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--sb-plate);
  border-right: 1px solid var(--sb-line);
  box-shadow: 18px 0 46px #0502063d, 1px 0 26px #ee5d460f;
  color: var(--sb-ink); font-family: var(--font-body, sans-serif);
}
/* Les braises du pied dorment derrière la matière : tout ce qui se lit
   ou se clique passe au premier plan. */
.site-sidebar > :not(.sidebar-embers){ position: relative; z-index: 1 }

/* ── 3. La couronne : l'emblème et sa fermeture ─────────────── */
.sidebar-crown{
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 18px 16px;
}
.sidebar-brand{
  display: block; width: 100%; aspect-ratio: 8 / 3;
  border-radius: 16px; text-decoration: none; overflow: hidden;
}
/* Le liseré de l'emblème est une simple ligne : le mot « Ordre des bannis »
   est blanc dans l'image, il lui faut l'obsidienne, même en thème clair. */
.sidebar-brand > img{
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 14px #ef3b3545);
  transition: filter .3s var(--sb-ease);
}
.sidebar-brand:hover > img{ filter: drop-shadow(0 0 20px #ef3b3575) }
.sidebar-brand:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 5px }
html[data-theme="light"] .sidebar-brand{ background: #170e10; box-shadow: inset 0 0 0 1px #b9544633 }
.sidebar-close{
  position: absolute; top: 16px; right: 14px;
  display: none; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--sb-line-soft); border-radius: 50%;
  background: #ffffff08; color: var(--sb-soft); font-size: 17px;
  cursor: pointer;
  transition: background var(--sb-tap), color var(--sb-tap), border-color var(--sb-tap), rotate .25s var(--sb-ease);
}
.sidebar-close:hover{ background: #ff4d6326; border-color: #ff9a5c59; color: var(--sb-ink); rotate: 90deg }
.sidebar-close:active{ background: #ff4d632e; transform: scale(.92); transition-duration: var(--sb-tap) }

/* ── 4. La plaque du profil ─────────────────────────────────── */
/* Le wrap porte l'espacement et l'empilement : la carte d'aperçu, posée en
   volée hors du rail, doit passer au-dessus de la rampe qui la suit dans
   l'ordre du document. */
.sidebar-profile-wrap{ flex: 0 0 auto; position: relative; z-index: 2 }
.sidebar-profile-plate{ position: relative; margin: 4px 16px 16px }
.sidebar-profile{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--sb-house) 26%, transparent);
  border-radius: 22px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--sb-house) 13%, transparent), transparent 62%), #ffffff05;
  box-shadow:
    inset 0 1px 0 #ffffff14, 0 12px 28px #05020642,
    0 0 18px color-mix(in srgb, var(--sb-house) 20%, transparent),
    0 0 46px color-mix(in srgb, var(--sb-house) 10%, transparent);
  color: var(--sb-ink); text-decoration: none;
  transition: border-color .25s var(--sb-ease), box-shadow .25s var(--sb-ease), background .25s var(--sb-ease), translate var(--sb-tap);
}
/* Le grade s'écrit deux fois sur la plaque : en clair, et en filigrane dans
   son propre glyphe. Le signe est plus haut que la plaque et déborde du coin
   bas droit — un sceau qu'on ne montre qu'à moitié, rogné par le cadre même
   de la plaque (`overflow: hidden`), pas par un masque posé dessus. */
.sidebar-profile-mark{
  position: absolute; right: 0; bottom: -22px; z-index: 0;
  font-size: 122px; line-height: 1; rotate: -12deg;
  color: transparent; opacity: .17; pointer-events: none;
  background-image: linear-gradient(158deg,
    var(--sb-house) 10%,
    color-mix(in srgb, var(--sb-house) 62%, #ffe9c9) 44%,
    transparent 86%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--sb-house) 42%, transparent));
  transition: opacity .3s var(--sb-ease), rotate .35s var(--sb-ease), scale .35s var(--sb-ease);
}
.sidebar-profile > .sidebar-avatar,.sidebar-profile > .sidebar-profile-main,.sidebar-profile > .sidebar-profile-arrow{ position: relative; z-index: 1 }
/* `a:hover{color:var(--c-link-hover)}` de la normalisation est plus spécifique
   que la règle de repos de la plaque : sans redire l'encre ici, le nom
   de l'agent virerait au noir du contenu au survol. */
.sidebar-profile:hover{
  color: var(--sb-ink);
  border-color: color-mix(in srgb, var(--sb-house) 62%, transparent);
  background: linear-gradient(125deg, color-mix(in srgb, var(--sb-house) 20%, transparent), transparent 66%), #ffffff07;
  box-shadow:
    inset 0 1px 0 #ffffff1a, 0 12px 30px #05020659,
    0 0 26px color-mix(in srgb, var(--sb-house) 30%, transparent),
    0 0 60px color-mix(in srgb, var(--sb-house) 14%, transparent);
}
.sidebar-profile:hover .sidebar-profile-mark{ opacity: .3; rotate: -6deg; scale: 1.06 }
.sidebar-profile:active{ translate: 0 1px; transition-duration: var(--sb-tap) }
.sidebar-profile:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 4px }
.sidebar-avatar{
  display: grid; place-items: center;
  width: 70px; height: 70px; flex: 0 0 70px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffffff12, #ffffff03), #2a1c1f;
  color: color-mix(in srgb, var(--sb-house) 80%, var(--sb-soft));
  font-size: 33px; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sb-house) 40%, transparent), 0 0 22px color-mix(in srgb, var(--sb-house) 26%, transparent), inset 0 1px 0 #ffffff1a;
}
.sidebar-avatar > img{ width: 100%; height: 100%; object-fit: cover }
.sidebar-profile-main{ min-width: 0 }
.sidebar-profile-main > strong{
  display: block; font-size: 19.5px; font-weight: 550; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-profile-main > small{
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--sb-house) 72%, var(--sb-muted));
  text-shadow: 0 0 12px color-mix(in srgb, var(--sb-house) 40%, transparent);
}
.sidebar-profile-arrow{ font-size: 15px; color: var(--sb-muted); transition: translate .25s var(--sb-ease), color .25s var(--sb-ease) }
.sidebar-profile:hover .sidebar-profile-arrow{ translate: 3px 0; color: var(--sb-house) }
html[data-theme="light"] .sidebar-profile{ background: linear-gradient(125deg, color-mix(in srgb, var(--sb-house) 12%, transparent), transparent 62%), #ffffffa8; box-shadow: inset 0 1px 0 #ffffffa8, 0 10px 22px #b954461f, 0 0 16px color-mix(in srgb, var(--sb-house) 16%, transparent) }
html[data-theme="light"] .sidebar-profile-main > small{ text-shadow: none }
html[data-theme="light"] .sidebar-profile-mark{
  opacity: .21;
  background-image: linear-gradient(158deg,
    color-mix(in srgb, var(--sb-house) 62%, #3b170c) 4%,
    var(--sb-house) 46%,
    transparent 93%);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sb-house) 26%, transparent));
}
html[data-theme="light"] .sidebar-profile:hover .sidebar-profile-mark{ opacity: .3 }
html[data-theme="light"] .sidebar-avatar{ background: linear-gradient(150deg, #fff, #f2ddd2); color: #7a4a2c }

/* ── 4 bis. L'aperçu du profil ──────────────────────────────── */
/* Deux régimes, une seule carte :
   — au pouce (tactile, et le tiroir ≤960 px où le rail est modal) : la carte
     s'ouvre en accordéon dans le rail, commandée par son bouton ;
   — sur le bureau (large et sachant survoler) : elle se pose en sous-rail
     collé à droite du rail et se montre au survol de la plaque, sans une
     ligne de script.
   L'accordéon est la base : ce qui ne sait pas survoler n'a rien à attendre
   du vol. Le contact est franc — aucun vide entre la plaque et la carte, ou
   le pointeur perdrait le survol en traversant le liseré. */
.sidebar-profile-peek{
  position: absolute; right: 15px; top: 50%; translate: 0 -50%; z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--sb-line-soft); border-radius: 50%;
  background: #ffffff0a; color: var(--sb-soft); font-size: 16px;
  cursor: pointer;
  transition: background var(--sb-tap), color var(--sb-tap), border-color var(--sb-tap);
}
.sidebar-profile-peek:hover{ background: #ff4d6322; border-color: color-mix(in srgb, var(--sb-house) 46%, transparent); color: var(--sb-ink) }
.sidebar-profile-peek:active{ background: #ff4d632e; transition-duration: var(--sb-tap) }
.sidebar-profile-peek:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 3px }
.sidebar-profile-peek > i{ transition: rotate .25s var(--sb-ease) }
.sidebar-profile-wrap.is-peek .sidebar-profile-peek > i{ rotate: 180deg }
/* La flèche de navigation s'efface mais garde sa place dans la grille : la
   plaque ne se resserre pas quand le bouton la recouvre. */
.sidebar-profile-arrow{ visibility: hidden }

.sidebar-peek{
  display: grid; align-content: start;
  margin: 0 16px 16px;
  border: 1px solid color-mix(in srgb, var(--sb-house) 30%, transparent);
  border-radius: 22px; overflow: hidden;
  /* Opaque : la carte vole au-dessus du contenu de la page, dont le filigrane
     géant transparaissait à 3 % et se lisait comme une salissure. La vie vient
     du lavis de maison, pas d'une vitre. */
  background: linear-gradient(168deg, color-mix(in srgb, var(--sb-house) 9%, transparent), transparent 52%), #100a0c;
  box-shadow: inset 0 1px 0 #ffffff14, 0 16px 34px #0502065c, 0 0 26px color-mix(in srgb, var(--sb-house) 14%, transparent);
  color: var(--sb-ink);
  transform-origin: top center; backface-visibility: hidden;
  animation: sb-peek-in .42s var(--sb-ease) both;
}
.sidebar-peek[hidden]{ display: none }
/* La carte se déploie, elle ne se montre pas : chaque étage arrive après son
   voisin, du bandeau au pied. Le déclencheur est le même pour les deux
   régimes — `:hover` et `:focus-within` tiennent la carte en vol sur le
   bureau, `.is-peek` la déplie au pouce — donc une seule liste de règles
   sert les deux, et les animations ne jouent qu'à l'ouverture. */
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) :is(
  .sidebar-peek-banner,.sidebar-peek-seal,.sidebar-peek-avatar,.sidebar-peek-id,
  .sidebar-peek-badge,.sidebar-peek-facts > div,.sidebar-peek-open
){ animation-duration: .46s; animation-timing-function: var(--sb-ease); animation-fill-mode: both }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-banner{ animation-name: sb-crop-settle; animation-duration: .95s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-seal{ animation-name: sb-seal-drop; animation-delay: .18s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-avatar{ animation-name: sb-face-in; animation-delay: .1s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-id{ animation-name: sb-slide-in; animation-delay: .2s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-badge{ animation-name: sb-badge-in }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-badge:nth-child(2){ animation-delay: .34s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-badge:nth-child(1){ animation-delay: .28s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-facts > div{ animation-name: sb-slide-in; animation-duration: .4s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-facts > div:nth-child(2){ animation-delay: .36s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-facts > div:nth-child(3){ animation-delay: .42s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-facts > div:nth-child(1){ animation-delay: .3s }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-open{ animation-name: sb-rise-in; animation-delay: .46s }
/* Le bandeau porte la bannière du membre, recadrée et pleine largeur : un
   cadre centré avec des gouttières floues ferait une photo dans une carte,
   pas une carte dans une photo. Sans bannière, c'est la maison qui tient la
   place, en teinte. Le sceau se pose en haut à droite, à l'opposé de
   l'identité qui mord sur la bande. */
.sidebar-peek-cover{
  position: relative; height: 78px; overflow: hidden;
  background: linear-gradient(112deg, color-mix(in srgb, var(--sb-house) 26%, transparent), transparent 64%), #ffffff08;
}
/* La lumière balaie la bande une seule fois, à l'ouverture : c'est le geste
   qui dit « la carte s'allume », pas une boucle qui repeint le rail. La lame
   est un calque translating — pas un `background-position` — pour que le balayage
   reste sur le compositeur et ne repeigne pas soixante fois la seconde. */
.sidebar-peek-cover::after{
  content: ''; position: absolute; top: -30%; bottom: -30%; left: -46%; width: 44%;
  z-index: 3; pointer-events: none; opacity: 0;
  rotate: 14deg;
  background: linear-gradient(90deg, transparent, #ffe6c954 44%, #fff7ea8c 52%, #ffe6c954 60%, transparent);
}
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-cover::after{
  animation: sb-sheen 1.05s var(--sb-ease) .1s both;
}
.sidebar-peek-banner{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.sidebar-peek-seal{
  position: absolute; top: 8px; right: 11px; z-index: 2; width: 34px; height: 34px;
  object-fit: contain; filter: drop-shadow(0 2px 8px #050206bf); transform-origin: 70% 30%;
}
.sidebar-peek-head{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin-top: -35px; padding: 0 14px 12px;
  border-bottom: 1px solid var(--sb-line-soft);
}
/* Le sol de l'étage d'identité : la tête mord sur la bannière, il lui faut un
   plan de travail. Le `::before` part à z-index -1 dans le contexte de la tête
   (positionnée, `z-index: 1`) → sous le texte, au-dessus de l'image. */
.sidebar-peek-head::before{
  content: ''; position: absolute; z-index: -1; inset: -12px 0 0;
  background: linear-gradient(#100a0c00, #100a0ccc 46%, #100a0c);
  pointer-events: none;
}
/* L'anneau reprend le fond de la carte : l'avatar se détache de la bannière
   sans qu'un liseré blanc le découpe. Même calibre que sur la plaque — c'est
   le même visage, il ne peut pas rapetisser en se détaillant. */
.sidebar-peek-avatar{
  position: relative; overflow: visible;
  width: 70px; height: 70px; flex-basis: 70px; font-size: 33px;
  box-shadow: 0 0 0 3px #100a0c, 0 0 0 4px color-mix(in srgb, var(--sb-house) 46%, transparent), 0 10px 20px #0502067a;
}
/* L'anneau de la carte déborde du disque : sans le `overflow: visible` plus
   haut, la roture serait rognée et le visage coupé carré. */
.sidebar-peek-avatar > img{ border-radius: 50% }
.sidebar-peek-avatar::after{
  content: ''; position: absolute; inset: -12px; z-index: 2; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--sb-house) 62%, transparent) 70%, transparent 84%);
}
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-avatar::after{
  animation: sb-bloom .72s var(--sb-ease) .22s both;
}
.sidebar-peek-id{ min-width: 0 }
.sidebar-peek-id > strong{
  display: block; font-size: 17px; font-weight: 550; line-height: 1.28;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Les deux pastilles ont la même géométrie — le rang ne se dit pas par la
   taille mais par la couleur : celle du grade prend l'accent de la maison,
   celle de vérification garde le vert de service. Elles courent sous le nom,
   sur toute la largeur de la carte : le libellé d'un grade est long, à
   l'étroit derrière l'avatar il se brise et sa voisine devient bancal. */
.sidebar-peek-badges{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.sidebar-peek-badge{
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 9px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--sb-house) 42%, transparent);
  background: color-mix(in srgb, var(--sb-house) 15%, transparent);
  color: color-mix(in srgb, var(--sb-house) 80%, var(--sb-ink));
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
.sidebar-peek-badge > i{ flex: 0 0 auto; font-size: 12px }
.sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-badge > i{
  animation: sb-flare .6s var(--sb-ease) .44s both;
}
.sidebar-peek-badge--ok{ border-color: #45d69f5c; background: #45d69f1f; color: #86e7bd }
.sidebar-peek-facts{ margin: 0; padding: 4px 14px 8px; display: grid }
.sidebar-peek-facts > div{
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--sb-line-soft);
}
.sidebar-peek-facts > div:last-child{ border-bottom: 0 }
/* La ligne survolée prend une braise et allume son filet : la carte arrête
   d'être un tableau de bord, elle répond au curseur. Le lavis déborde de
   8 px hors de la ligne mais reste dans les 14 px de respiration du bloc —
   sinon la carte, en `overflow:auto` sur le bureau, ferait pousser une
   barre de défilement horizontale. */
.sidebar-peek-facts > div::before{
  content: ''; position: absolute; z-index: -1; inset: 0 -8px; border-radius: 11px;
  background: color-mix(in srgb, var(--sb-house) 9%, transparent);
  opacity: 0; transition: opacity .2s var(--sb-ease);
}
.sidebar-peek-facts > div:hover::before{ opacity: 1 }
.sidebar-peek-facts dt{
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted);
  transition: color .2s var(--sb-ease);
}
.sidebar-peek-facts dt > i{
  font-size: 13px; color: color-mix(in srgb, var(--sb-house) 66%, var(--sb-muted));
  transition: color .2s var(--sb-ease), scale .25s var(--sb-ease);
}
.sidebar-peek-facts dd{
  margin: 0; justify-self: end; text-align: right;
  font-size: 13px; color: var(--sb-soft); overflow-wrap: anywhere;
  transition: color .2s var(--sb-ease);
}
.sidebar-peek-facts em{ font-style: normal; color: var(--sb-muted) }
/* La ligne survolée allume son greffe et son chiffre : le curseur trouve une
   prise, la carte n'est plus un simple relevé. */
.sidebar-peek-facts > div:hover dt{ color: var(--sb-soft) }
.sidebar-peek-facts > div:hover dt > i{ color: var(--sb-gold); scale: 1.16 }
.sidebar-peek-facts > div:hover dd{ color: var(--sb-ink) }
.sidebar-peek-open{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--sb-line-soft);
  background: #ffffff05; color: color-mix(in srgb, var(--sb-house) 82%, var(--sb-ink));
  font-size: 13px; font-weight: 550; text-decoration: none;
  transition: background .2s var(--sb-ease), color .2s var(--sb-ease), border-top-color .25s var(--sb-ease);
}
.sidebar-peek-open:hover{
  background: color-mix(in srgb, var(--sb-house) 16%, transparent);
  border-top-color: color-mix(in srgb, var(--sb-house) 55%, transparent);
  color: var(--sb-ink);
}
.sidebar-peek-open:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: -3px }
.sidebar-peek-open > i{ font-size: 14px; transition: translate .25s var(--sb-ease), color .2s var(--sb-ease) }
.sidebar-peek-open:hover > i{ translate: 3px -3px }
html[data-theme="light"] .sidebar-peek{ background: linear-gradient(168deg, color-mix(in srgb, var(--sb-house) 8%, transparent), transparent 52%), #fff7f0; box-shadow: inset 0 1px 0 #ffffffb8, 0 12px 26px #b9544624 }
/* Le nom et l'avatar mordent sur la bannière : sans sol sous l'étage d'en-tête,
   une bannière claire mangerait l'encre. Le lavis part du haut de la bande et
   se referme sur le fond de la carte. */
html[data-theme="light"] .sidebar-peek-head::before{ background: linear-gradient(#fff7f000, #fff7f0cc 46%, #fff7f0) }
/* L'anneau de l'avatar reprend le fond de la carte : posé sur la bannière, il
   doit la découper en crème, pas en encre. */
html[data-theme="light"] .sidebar-peek-avatar{ box-shadow: 0 0 0 3px #fff7f0, 0 0 0 4px color-mix(in srgb, var(--sb-house) 42%, transparent), 0 10px 20px #b9544633 }
html[data-theme="light"] .sidebar-peek-cover{ background: linear-gradient(112deg, color-mix(in srgb, var(--sb-house) 20%, transparent), transparent 64%), #b954460a }
html[data-theme="light"] .sidebar-peek-seal{ filter: drop-shadow(0 2px 8px #b9544659) }
/* Le vert d'office, trop laitier sur crème : on prend sa teinte de service en
   foncé pour qu'elle reste lisible sur le fond clair. */
html[data-theme="light"] .sidebar-peek-badge--ok{ border-color: #1d8a5b4d; background: #1d8a5b14; color: #14684a }
html[data-theme="light"] .sidebar-peek-open{ background: #b954460a }
/* Le repos crème est écrit sur `html[data-theme=…] .sidebar-peek-open` (0,2,1) :
   il batterait `.sidebar-peek-open:hover` (0,2,0) et le lavis du survol ne
   s'allumerait plus du tout en clair. Le survol reprend donc la même ancêtre. */
html[data-theme="light"] .sidebar-peek-open:hover{ background: color-mix(in srgb, var(--sb-house) 15%, transparent) }
html[data-theme="light"] .sidebar-profile-peek{ background: #ffffffa8; color: #7a4a2c }
/* Braise crème : le lavis du survol doit rester une ombre chaude, pas une
   plaque rouge, sur le fond laitier. La lame de lumière, elle, passe en
   ambre — un blanc sur crème ne se verrait pas. */
html[data-theme="light"] .sidebar-peek-facts > div::before{ background: color-mix(in srgb, var(--sb-house) 12%, transparent) }
html[data-theme="light"] .sidebar-peek-cover::after{
  background: linear-gradient(90deg, transparent, #e8a56b59 44%, #ffd8a38a 52%, #e8a56b59 60%, transparent);
}
html[data-theme="light"] .sidebar-peek-avatar::after{
  background: radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--sb-house) 46%, transparent) 72%, transparent 86%);
}
html[data-theme="light"] .sidebar-peek-facts > div:hover dt > i{ color: #b4761b }

@media (min-width: 961px) and (hover: hover) {
  .sidebar-profile-peek{ display: none }
  .sidebar-profile-arrow{ visibility: visible }
  .sidebar-peek{
    position: absolute; top: -6px; left: 100%; z-index: 3;
    width: 340px; margin: 0; overflow: auto;
    max-height: calc(100dvh - 32px);
    border-left: 0; border-radius: 0 22px 22px 0;
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sb-house) 30%, transparent),
      inset 0 1px 0 #ffffff14, 22px 20px 46px #0502067a,
      0 0 30px color-mix(in srgb, var(--sb-house) 16%, transparent);
    /* Inerte au repos : `visibility: hidden` n'arrive qu'après le fondu et ne
       protège donc pas les 0,42 s de fermeture — sans cette ligne, la carte
       transparente avale encore le clic destiné au contenu de la page. */
    opacity: 0; visibility: hidden; pointer-events: none;
    /* La carte pivote sur son bord gauche, comme une page qu'on lève : le
       `perspective()` est la première fonction de `transform` pour que la
       foreshortening porte sur la rotation, pas sur un espace déjà tordu. */
    transform-origin: left center;
    transform: perspective(860px) rotateY(-21deg) translateX(-14px);
    animation: none;
    transition: opacity .22s var(--sb-ease) .16s, transform .36s var(--sb-ease) .16s, visibility 0s .42s;
  }
  /* Le survol tient la carte ouverte depuis ses propres enfants : la carte est
     dans le wrap, et `:hover` remonte l'arbre quel que soit le positionnement. */
  .sidebar-profile-wrap:hover > .sidebar-peek,
  .sidebar-profile-wrap:focus-within > .sidebar-peek,
  .sidebar-profile-wrap.is-peek > .sidebar-peek{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: perspective(860px) rotateY(0deg) translateX(0);
    transition: opacity .18s var(--sb-ease), transform .42s var(--sb-ease), visibility 0s;
  }
}

/* ── 5. La rampe : groupes et entrées ───────────────────────── */
.sidebar-navigation{
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 13px 18px;
  scrollbar-width: thin; scrollbar-color: var(--sb-line) transparent;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px);
  mask-image: linear-gradient(180deg, transparent 0, #000 10px);
}
.sidebar-navigation::-webkit-scrollbar{ width: 6px }
.sidebar-navigation::-webkit-scrollbar-thumb{ background: var(--sb-line); border-radius: 999px }
.sidebar-group-label{
  display: flex; align-items: center; gap: 10px;
  padding: 20px 8px 9px 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sb-muted);
}
/* Le label traîne un fil qui s'éteint vers la droite : la matière continue
   la ligne au lieu d'ajouter un cadre. */
.sidebar-group-label::after{
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--sb-line), transparent);
}
.sidebar-group:first-child .sidebar-group-label{ padding-top: 4px }

.sidebar-link{
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; margin: 4px 0; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px;
  color: color-mix(in srgb, var(--nav-color, #ff8a4c) 13%, var(--sb-soft)); text-decoration: none;
  font-size: 15px; font-weight: 450; letter-spacing: .005em;
  transition: color .22s var(--sb-ease), background .22s var(--sb-ease), border-color .22s var(--sb-ease), box-shadow .22s var(--sb-ease), translate var(--sb-tap);
}
.sidebar-link > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* L'encre du glyphe garde sa teinte au repos : descendre à 66 % vers le gris
   du rail fond les treize couleurs en une seule beige. Le voile restant est
   mince, et la lueur porte la chaleur sur l'obsidienne. */
.sidebar-link > i{
  flex: 0 0 24px; width: 24px; text-align: center; font-size: 20px;
  color: color-mix(in srgb, var(--nav-color, #ff8a4c) 88%, var(--sb-muted));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nav-color, #ff8a4c) 26%, transparent));
  transition: color .22s var(--sb-ease), filter .22s var(--sb-ease);
}
.sidebar-link:hover{
  color: var(--nav-color, var(--sb-ember));
  border-color: color-mix(in srgb, var(--nav-color, #ff8a4c) 26%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--nav-color, #ff8a4c) 13%, transparent), color-mix(in srgb, var(--nav-color, #ff8a4c) 3%, transparent));
}
.sidebar-link:hover > i{
  color: var(--nav-color, var(--sb-ember));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nav-color, #ff8a4c) 40%, transparent));
}
.sidebar-link[aria-current="page"]{
  color: var(--nav-color, var(--sb-ember));
  border-color: color-mix(in srgb, var(--nav-color, #ff8a4c) 42%, transparent);
  background: linear-gradient(105deg, color-mix(in srgb, var(--nav-color, #ff8a4c) 21%, transparent), color-mix(in srgb, var(--nav-color, #ff8a4c) 5%, transparent) 72%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-color, #ff8a4c) 22%, transparent), 0 0 18px color-mix(in srgb, var(--nav-color, #ff8a4c) 15%, transparent);
}
.sidebar-link[aria-current="page"] > i{
  color: var(--nav-color, var(--sb-ember));
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--nav-color, #ff8a4c) 62%, transparent));
}
.sidebar-link[aria-current="page"] > span{ text-shadow: 0 0 15px color-mix(in srgb, var(--nav-color, #ff8a4c) 28%, transparent) }
.sidebar-link:active{ translate: 0 1px; box-shadow: inset 0 2px 9px #05020659; transition-duration: var(--sb-tap) }
.sidebar-link:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 3px }
html[data-theme="light"] .sidebar-link:active{ box-shadow: inset 0 2px 8px #7a140f33 }
html[data-theme="light"] .sidebar-link[aria-current="page"] > span{ text-shadow: none }

/* ── 6. Une couleur de maison par entrée ────────────────────── */
/* La teinte vit sur l'entrée, jamais sur la page : deux rails, deux
   palettes, sans collision. La rampe tresse quatre familles — rouge, or,
   rose, braise — et les alterne le long du rail : deux voisines ne
   partagent jamais une famille, donc jamais deux glyphes de la même
   couleur. Le jumeau clair descend la rampe d'un cran, faute de quoi
   l'ambre et l'or s'effacent sur le fond pêche. */
.site-sidebar [data-nav="home"]{ --nav-color: #ff6158 }
.site-sidebar [data-nav="lore"]{ --nav-color: #ffbb3d }
.site-sidebar [data-nav="communaute"]{ --nav-color: #ff85b3 }
.site-sidebar [data-nav="roles"]{ --nav-color: #ff8f4a }
.site-sidebar [data-nav="dashboard"]{ --nav-color: #ff5e74 }
.site-sidebar [data-nav="dashboard.applications"]{ --nav-color: #f2c94c }
.site-sidebar [data-nav="reclamations"]{ --nav-color: #f56a9c }
.site-sidebar [data-nav="respondent.dashboard"]{ --nav-color: #ff7a3c }
.site-sidebar [data-nav="reclamations.manage"]{ --nav-color: #ff4d63 }
.site-sidebar [data-nav="admin.members"]{ --nav-color: #ffd48c }
.site-sidebar [data-nav="admin.config"]{ --nav-color: #ff6f8a }
.site-sidebar [data-nav="support"]{ --nav-color: #ffa24b }
.site-sidebar [data-nav="fido"]{ --nav-color: #ff7568 }
html[data-theme="light"] .site-sidebar [data-nav="home"]{ --nav-color: #b3372c }
html[data-theme="light"] .site-sidebar [data-nav="lore"]{ --nav-color: #96680d }
html[data-theme="light"] .site-sidebar [data-nav="communaute"]{ --nav-color: #b04674 }
html[data-theme="light"] .site-sidebar [data-nav="roles"]{ --nav-color: #a85a1a }
html[data-theme="light"] .site-sidebar [data-nav="dashboard"]{ --nav-color: #ab2f45 }
html[data-theme="light"] .site-sidebar [data-nav="dashboard.applications"]{ --nav-color: #8a6c12 }
html[data-theme="light"] .site-sidebar [data-nav="reclamations"]{ --nav-color: #a3406a }
html[data-theme="light"] .site-sidebar [data-nav="respondent.dashboard"]{ --nav-color: #a5501a }
html[data-theme="light"] .site-sidebar [data-nav="reclamations.manage"]{ --nav-color: #a5233c }
html[data-theme="light"] .site-sidebar [data-nav="admin.members"]{ --nav-color: #8f6b2c }
html[data-theme="light"] .site-sidebar [data-nav="admin.config"]{ --nav-color: #a83d55 }
html[data-theme="light"] .site-sidebar [data-nav="support"]{ --nav-color: #a05f18 }
html[data-theme="light"] .site-sidebar [data-nav="fido"]{ --nav-color: #a94034 }

/* ── 7. Le pied du rail ─────────────────────────────────────── */
.sidebar-footer{
  flex: 0 0 auto;
  padding: 13px 18px 16px;
  border-top: 1px solid var(--sb-line-soft);
}
.sidebar-signout{ display: block }
:is(a.sidebar-signout, .sidebar-signout > button){
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--sb-line-soft); border-radius: 999px;
  background: #ffffff05; color: var(--sb-soft);
  font-family: inherit; font-size: 14px; text-decoration: none; text-align: left;
  cursor: pointer;
  transition: background .22s var(--sb-ease), color .22s var(--sb-ease), border-color .22s var(--sb-ease), translate var(--sb-tap);
}
:is(a.sidebar-signout, .sidebar-signout > button) > i{ font-size: 17px; color: var(--sb-muted); transition: color .22s var(--sb-ease) }
:is(a.sidebar-signout, .sidebar-signout > button):hover{
  background: #ff4d631f; border-color: #ff9a5c59; color: var(--sb-ink);
}
:is(a.sidebar-signout, .sidebar-signout > button):hover > i{ color: var(--sb-ruby) }
:is(a.sidebar-signout, .sidebar-signout > button):active{ translate: 0 1px; transition-duration: var(--sb-tap) }
:is(a.sidebar-signout, .sidebar-signout > button):focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 3px }
html[data-theme="light"] :is(a.sidebar-signout, .sidebar-signout > button){ background: #b954460a; color: var(--sb-soft) }
html[data-theme="light"] :is(a.sidebar-signout, .sidebar-signout > button):hover{ background: #d8303f1a; border-color: #b9544659; color: var(--sb-ink) }

.sidebar-meta{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px }
.sidebar-meta > small{ font-size: 11px; letter-spacing: .04em; color: var(--sb-muted) }
.sidebar-theme{
  display: grid; place-items: center; position: relative;
  width: 38px; height: 38px;
  border: 1px solid var(--sb-line-soft); border-radius: 999px;
  background: #ffffff05; color: var(--sb-soft); font-size: 16px;
  cursor: pointer;
  transition: background .22s var(--sb-ease), color .22s var(--sb-ease), border-color .22s var(--sb-ease), translate var(--sb-tap);
}
.sidebar-theme:hover{ background: #ffb3401f; border-color: #ffcf8f59; color: var(--sb-gold) }
.sidebar-theme:active{ translate: 0 1px; transition-duration: var(--sb-tap) }
.sidebar-theme:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 3px }
/* L'interrupteur montre ce qu'il va donner, pas ce qu'il est : la lune en
   thème sombre, le soleil en thème clair. Deux glyphes, triés en CSS,
   puisque app.js ne touche que l'attribut data-theme. */
.sidebar-theme-icon{ grid-area: 1 / 1; transition: opacity .25s var(--sb-ease), rotate .35s var(--sb-ease) }
.sidebar-theme-icon--light{ opacity: 0; rotate: -90deg }
html[data-theme="light"] .sidebar-theme-icon--dark{ opacity: 0; rotate: 90deg }
html[data-theme="light"] .sidebar-theme-icon--light{ opacity: 1; rotate: 0deg }
html[data-theme="light"] .sidebar-theme{ background: #b954460a; color: #8b5a2b }
html[data-theme="light"] .sidebar-theme:hover{ background: #cf750b1f; border-color: #b9544659; color: #8b5a2b }

/* ── 8. Les braises du pied ─────────────────────────────────── */
/* Sept mottes seulement, en translate + opacity : le rail est fixe, une
   couche de plus recomposée à chaque frame se paierait sur toute la page. */
.sidebar-embers{
  position: absolute; inset: auto 0 0 0; z-index: 0;
  height: 210px; overflow: hidden; pointer-events: none;
}
.sidebar-embers > i{
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--w); height: var(--w); border-radius: 50%;
  background: radial-gradient(circle, #ffc08a, #ff5a3d00 68%);
  opacity: 0;
  animation: sb-ember-rise var(--t) linear var(--d) infinite;
}
.sidebar-embers > i:nth-child(1){ --x: 14%; --w: 4px; --t: 9.5s; --d: -1s }
.sidebar-embers > i:nth-child(2){ --x: 33%; --w: 3px; --t: 12s; --d: -5s }
.sidebar-embers > i:nth-child(3){ --x: 52%; --w: 5px; --t: 10.5s; --d: -8s }
.sidebar-embers > i:nth-child(4){ --x: 68%; --w: 3px; --t: 13.5s; --d: -3s }
.sidebar-embers > i:nth-child(5){ --x: 82%; --w: 4px; --t: 11s; --d: -9s }
.sidebar-embers > i:nth-child(6){ --x: 24%; --w: 3px; --t: 14s; --d: -11s }
.sidebar-embers > i:nth-child(7){ --x: 61%; --w: 4px; --t: 12.5s; --d: -6.5s }
@keyframes sb-ember-rise {
  0% { opacity: 0; translate: 0 0; scale: .55 }
  14% { opacity: .8 }
  62% { opacity: .42 }
  100% { opacity: 0; translate: 9px -190px; scale: 1.15 }
}
html[data-theme="light"] .sidebar-embers{ opacity: .5 }

/* ── 8 b. La chorégraphie de l'aperçu ──────────────────────────
   Deux régimes, une grammaire. Sur le bureau, la carte est une page qu'on
   lève sur son bord gauche (`rotateY` + `perspective`, pilotés en transition
   car c'est l'ouverture elle-même qui décide du moment). Dans le tiroir, elle
   se déplie à plat-3D depuis son arête haute (`rotateX`, porté par une
   animation puisque `hidden` la fait renaître à chaque pouce). Les étages —
   bandeau, sceau, visage, nom, pastilles, faits, pied — partent du repos et
   n'y reviennent pas : ils entrent en cascade, jamais en boucle, donc rien ne
   repeint le rail et `[data-modeste]` n'a rien à geler. */
@keyframes sb-peek-in {
  from { opacity: 0; transform: perspective(820px) rotateX(-17deg) translateY(-10px) scale(.97) }
  to   { opacity: 1; transform: perspective(820px) rotateX(0deg) translateY(0) scale(1) }
}
/* La bannière arrive déjà recadrée et se pose : un léger dézoom, pas un zoom,
   pour que le regard monte vers le visage plutôt que de fuir vers les bords. */
@keyframes sb-crop-settle {
  from { opacity: 0; scale: 1.13; translate: 0 5px }
  to   { opacity: 1; scale: 1; translate: 0 0 }
}
/* Le sceau tombe à plat avec un temps de retard et rebondit : c'est lui qui
   clôt la bande, après la lumière. */
@keyframes sb-seal-drop {
  0% { opacity: 0; translate: 0 -16px; rotate: -24deg; scale: .5 }
  58% { opacity: 1; translate: 0 2px; rotate: 7deg; scale: 1.08 }
  78% { rotate: -2deg; scale: .99 }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1 }
}
@keyframes sb-face-in {
  0% { opacity: 0; scale: .82; translate: 0 9px }
  66% { opacity: 1; scale: 1.05; translate: 0 -1px }
  100% { opacity: 1; scale: 1; translate: 0 0 }
}
@keyframes sb-slide-in {
  from { opacity: 0; translate: -14px 0 }
  to   { opacity: 1; translate: 0 0 }
}
@keyframes sb-badge-in {
  from { opacity: 0; translate: 0 7px; scale: .84 }
  to   { opacity: 1; translate: 0 0; scale: 1 }
}
@keyframes sb-rise-in {
  from { opacity: 0; translate: 0 13px }
  to   { opacity: 1; translate: 0 0 }
}
/* La lame de lumière traverse la bande une seule fois. */
@keyframes sb-sheen {
  0% { opacity: 0; translate: 0 0 }
  16% { opacity: 1 }
  74% { opacity: .85 }
  100% { opacity: 0; translate: 320% 0 }
}
/* L'anneau du visage s'ouvre comme une pupille, puis s'efface : il dit
   « c'est lui », il ne clignote pas. */
@keyframes sb-bloom {
  0% { opacity: 0; scale: .46 }
  38% { opacity: 1 }
  100% { opacity: 0; scale: 1.34 }
}
/* Le greffon du grade s'allume avec une amorce tournante : la hiérarchie se
   lit dans le geste, pas dans la taille. */
@keyframes sb-flare {
  0% { opacity: 0; scale: .35; rotate: -34deg }
  52% { opacity: 1; scale: 1.26; rotate: 9deg }
  100% { opacity: 1; scale: 1; rotate: 0deg }
}

/* ── 9. Le tiroir : ≤960 px, le rail devient porte ──────────── */
@media (max-width: 960px) {
  body.has-sidebar{ padding: 62px 0 0 !important }
  .site-sidebar{
    width: min(var(--sidebar-width), calc(100vw - 36px));
    translate: -100% 0; visibility: hidden;
    box-shadow: 18px 0 46px #05020680;
    transition: translate .28s var(--sb-ease), visibility 0s .28s;
  }
  /* visibility saute à 0 s à l'ouverture : sidebar.js pose le focus sur le
     bouton fermer dans le même tick, et un élément encore caché ne se focus pas. */
  .site-sidebar.is-open{ translate: 0 0; visibility: visible; transition: translate .28s var(--sb-ease), visibility 0s }
  .sidebar-close{ display: grid }
  .sidebar-launcher{
    position: fixed; top: 11px; left: 16px; z-index: 998;
    display: flex; align-items: center; gap: 9px;
    min-height: 42px; padding: 0 16px;
    border: 1px solid var(--sb-line); border-radius: 999px;
    background: linear-gradient(150deg, #ffffff0e, #ffffff03), #100a0ce6;
    color: var(--sb-ink); font-family: var(--font-body, sans-serif);
    font-size: 14px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
    transition: background .22s var(--sb-ease), border-color .22s var(--sb-ease), translate var(--sb-tap);
  }
  .sidebar-launcher > i{ font-size: 21px; color: var(--sb-ember) }
  .sidebar-launcher:hover{ border-color: #ff9a5c73; background: linear-gradient(150deg, #ff4d631f, #ffffff03), #170e10e6 }
  .sidebar-launcher:active{ translate: 0 1px; transition-duration: var(--sb-tap) }
  .sidebar-launcher:focus-visible{ outline: 2px solid var(--sb-gold); outline-offset: 3px }
  .sidebar-overlay{
    position: fixed; inset: 0; z-index: 999;
    background: #050206b8; backdrop-filter: blur(4px);
  }
  .sidebar-overlay[hidden]{ display: none }
  html[data-theme="light"] .sidebar-launcher{ background: #fff7f0f0; color: var(--sb-ink); border-color: #b9544633 }
  html[data-theme="light"] .sidebar-overlay{ background: #3b25298c }
}
@media (min-width: 961px) {
  .sidebar-launcher,.sidebar-close,.sidebar-overlay{ display: none }
}

/* ── 10. Sans moteur : la rampe reste posée à plat ──────────── */
html.no-js body.has-sidebar{ padding: 0 !important }
html.no-js .site-sidebar{ position: relative; width: 100%; height: auto; translate: none; visibility: visible }
html.no-js .sidebar-navigation{ overflow: visible; -webkit-mask-image: none; mask-image: none }
html.no-js .sidebar-launcher,html.no-js .sidebar-close{ display: none }
/* Sans moteur, personne ne déplie la carte : le bouton reste effacé, la carte
   se montre d'emblée sous la plaque. */
html.no-js .sidebar-profile-peek{ display: none }

/* ── 11. Rythme et transparence réduits ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .site-sidebar,.site-sidebar :is(a, button){ transition: none }
  .sidebar-embers{ display: none }
  .sidebar-close:hover,.sidebar-theme-icon{ rotate: none }
  .sidebar-embers > i{ animation: none }
  /* La carte se montre, elle ne se déplie plus : le `rotateY` du bureau est
     effacé dans les deux états, sinon la transition coupée laisserait la carte
     figée à plat. Les étages repartent au repos — la cascade est un geste, pas
     une information, elle peut tomber sans rien cacher. Les sélecteurs sont
     repris tels quels depuis la porte d'entrée : `animation: none` posé plus
     bas ne suffirait pas à battre leur spécificité. */
  .sidebar-peek{
    animation: none; transform: none;
    transition: opacity .16s linear, visibility 0s;
  }
  .sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) > .sidebar-peek{ transform: none }
  .sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) :is(
    .sidebar-peek-banner,.sidebar-peek-seal,.sidebar-peek-avatar,.sidebar-peek-id,
    .sidebar-peek-badge,.sidebar-peek-badge > i,.sidebar-peek-facts > div,.sidebar-peek-open
  ){ animation: none }
  .sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-cover::after,
  .sidebar-profile-wrap:is(:hover, :focus-within, .is-peek) .sidebar-peek-avatar::after{
    animation: none
  }
  .sidebar-peek-avatar::after{ display: none }
  .sidebar-peek-cover::after{ display: none }
  .sidebar-peek-facts > div:hover dt > i,.sidebar-peek-open:hover > i{ scale: none; translate: none }
}
/* Le verre du voile et du lanceur tombe : la matière redevient plate. */
@media (prefers-reduced-transparency: reduce) {
  .site-sidebar{ background: #100a0c }
  .sidebar-overlay{ backdrop-filter: none }
  html[data-theme="light"] .site-sidebar{ background: #fff7f0 }
}