/* ============================================================
   La barre des designs
   Elle n'est pas posée sur la page : c'est une barre du site,
   sous l'en-tête, qui défile avec lui et s'habille dans la langue
   de chaque design. Structure ici, costume plus bas.
   ============================================================ */

.barre-designs{
  position:sticky;top:var(--h-topbar,52px);z-index:19;
  font-family:ui-monospace,"JetBrains Mono","IBM Plex Mono",Menlo,monospace;
  font-size:.75rem;line-height:1.3;
}
.barre-designs__in{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  padding-block:9px;overflow-x:auto;scrollbar-width:none;
}
.barre-designs__in::-webkit-scrollbar{display:none}

.barre-designs__mot{margin:0;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block}
.barre-designs__mot b{margin-right:6px}
.barre-designs__mot b{font-weight:700}
.bd-mood{font-style:italic;opacity:.72;transition:opacity .15s}
@media (max-width:1180px){.barre-designs__mot{display:none}}
.bd-fusion .bd-fusion__court{display:none}

.barre-designs__choix{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.bd-choix{
  display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  padding:6px 10px;text-decoration:none;color:inherit;
  border:2px solid transparent;transition:background .15s,border-color .15s,transform .15s;
}
.bd-choix i{
  width:24px;height:15px;flex:none;
  background:linear-gradient(90deg,var(--a) 0 34%,var(--b) 34% 67%,var(--c) 67%);
  border:1px solid rgba(0,0,0,.25);
}
.bd-choix b{font-weight:700;letter-spacing:.02em}
.bd-choix[aria-current]{cursor:default}

/* le bouton de fusion : un anneau de toutes les encres, à part des autres */
.bd-fusion{
  flex:none;padding:2px;border-radius:999px;text-decoration:none;
  background:conic-gradient(from var(--tour),#FF4D9E,#FFD23F,#5EE0C6,#1F5FD0,#B4261A,#FF4D9E);
  animation:fusion-tourne 3.5s linear infinite;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4);
}
@property --tour{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fusion-tourne{to{--tour:360deg}}
.bd-fusion span{
  display:block;padding:7px 14px;border-radius:999px;white-space:nowrap;
  font-weight:700;font-size:.71875rem;letter-spacing:.06em;text-transform:uppercase;
}
.bd-fusion span::before{content:"\2728  "}
.bd-fusion:hover,.bd-fusion:focus-visible{transform:rotate(-1.5deg) scale(1.04)}
.bd-fusion:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.bd-fusion[aria-current]{animation:none;background:none;cursor:default;transform:none}
.bd-fusion[aria-current] span{text-transform:none;letter-spacing:0;opacity:.7}


.fusion-toile{position:fixed;inset:0;z-index:9997;pointer-events:none}
@media (prefers-reduced-motion:reduce){.bd-fusion{animation:none}}
@media print{.barre-designs{display:none}}

/* ============================================================
   Le costume, un par design
   ============================================================ */

/* 01 — le procès-verbal : une ligne de plus au registre */
html[data-design="identite"] .barre-designs{background:var(--papier-2);border-bottom:2px solid var(--encre);color:var(--encre)}
html[data-design="identite"] .barre-designs__mot{font-size:.65625rem;letter-spacing:.1em;text-transform:uppercase}
html[data-design="identite"] .barre-designs__mot b{color:var(--officiel)}
html[data-design="identite"] .bd-mood{text-transform:none;letter-spacing:0;font-size:.71875rem}
html[data-design="identite"] .bd-choix{border-color:var(--trait);background:var(--papier);font-size:.6875rem}
html[data-design="identite"] .bd-choix:hover{border-color:var(--encre)}
html[data-design="identite"] .bd-choix[aria-current]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
html[data-design="identite"] .bd-fusion span{background:var(--papier);color:var(--encre)}

/* 02 — 1 h 30 : une ligne tapée sur le bois du bureau */
html[data-design="manuscrit"] .barre-designs{background:#1B140F;border-bottom:1px solid rgba(243,199,122,.18);color:#B8AA8E}
html[data-design="manuscrit"] .barre-designs__mot{font-size:.6875rem;letter-spacing:.08em}
html[data-design="manuscrit"] .barre-designs__mot b{color:var(--lampe)}
html[data-design="manuscrit"] .bd-mood{color:#9C8E75}
html[data-design="manuscrit"] .bd-choix{font-size:.6875rem;letter-spacing:.06em}
html[data-design="manuscrit"] .bd-choix:hover{color:var(--lampe)}
html[data-design="manuscrit"] .bd-choix[aria-current]{color:var(--lampe);border-bottom-color:var(--crayon)}
html[data-design="manuscrit"] .bd-choix i{filter:saturate(.7) brightness(.9)}
html[data-design="manuscrit"] .bd-fusion span{background:#130E0B;color:#EBE1C9}

/* 03 — riso : la bande d'encre, comme le bandeau de chiffres */
html[data-design="riso"] .barre-designs,html[data-design="ultime"] .barre-designs{
  background:var(--encre);color:var(--papier);border-bottom:3px solid var(--encre);
}
html[data-design="riso"] .barre-designs__mot,html[data-design="ultime"] .barre-designs__mot{font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}
html[data-design="riso"] .barre-designs__mot b,html[data-design="ultime"] .barre-designs__mot b{color:var(--jaune)}
html[data-design="riso"] .bd-mood,html[data-design="ultime"] .bd-mood{text-transform:none;letter-spacing:0;color:#C9C3B5}
html[data-design="riso"] .bd-choix,html[data-design="ultime"] .bd-choix{border-color:#3A3A38;font-size:.6875rem}
html[data-design="riso"] .bd-choix:hover,html[data-design="ultime"] .bd-choix:hover{border-color:var(--jaune)}
html[data-design="riso"] .bd-choix[aria-current],html[data-design="ultime"] .bd-choix[aria-current]{background:var(--rose);border-color:var(--rose);color:var(--encre)}
html[data-design="riso"] .bd-fusion span,html[data-design="ultime"] .bd-fusion span{background:var(--papier);color:var(--encre)}

/* 04 — immersif : un rail de verre */
html[data-design="immersif"] .barre-designs{
  background:color-mix(in srgb,var(--fond) 72%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--trait);color:var(--texte-2);
}
html[data-design="immersif"] .barre-designs__mot{font-size:.6875rem;letter-spacing:.06em}
html[data-design="immersif"] .barre-designs__mot b{color:var(--accent)}
html[data-design="immersif"] .bd-choix{border-radius:999px;border-color:transparent;font-size:.6875rem}
html[data-design="immersif"] .bd-choix i{border-radius:3px}
html[data-design="immersif"] .bd-choix:hover{background:var(--fond-3);color:var(--texte)}
html[data-design="immersif"] .bd-choix[aria-current]{background:var(--fond-3);border-color:var(--accent);color:var(--texte)}
html[data-design="immersif"] .bd-fusion span{background:var(--fond-2);color:var(--texte)}

/* Sous 600 px : pastilles sans libellé (le nom reste en aria-label), fusion en un mot.
   En fin de feuille exprès : les costumes plus haut redonnent leurs marges aux pastilles. */
/* Sur téléphone, la barre disparaît : elle prenait 53 px collants sur un
   écran de 844. Elle reste sur ordinateur. Décision du 9 septembre 2026. */
@media (max-width:600px){.barre-designs{display:none}}
@media (max-width:600px){
  .bd-choix b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bd-choix{padding:6px 2px;gap:0}
  .bd-choix i{width:20px}
  .barre-designs__in{gap:6px}
  .barre-designs__choix{gap:2px}
  .bd-fusion .bd-fusion__long{display:none}
  .bd-fusion .bd-fusion__court{display:block}
}
@media (max-width:360px){.bd-voter{padding:7px 8px}.bd-fusion span{padding:7px 8px}}