/* Réglages de yty.yt (03/11/2026) : pastilles langue et jour/nuit, même gabarit que les sites
   RELICKEEPER (44 px de haut, pilule, filet fin, 13 px). La langue affiche l'autre langue ;
   le jour/nuit affiche le mode vers lequel on bascule. Couleurs propres à yty.yt : noir, blanc, or. */
.yty-reglages { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }

/* Bandeau commun des sites RELICKEEPER (03/11/2026) : menu à gauche, réglages à droite.
   Reste en haut au défilement sur ordinateur ; sur téléphone, il défile avec la page. */
.yty-bandeau {
  --yty-mute: #5f5c57; --yty-ink: #1a1a1a; --yty-filet: rgba(0,0,0,.2);
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 16px;
  background: rgba(250,247,241,.9); border-bottom: 1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .yty-bandeau {
  --yty-mute: #a8a49c; --yty-ink: #f2f0eb; --yty-filet: rgba(255,255,255,.2);
  background: rgba(18,17,20,.88); border-bottom-color: rgba(255,255,255,.08);
}
/* Une ancre (#manifesto…) ne doit pas arriver sous le bandeau resté en haut. */
html { scroll-padding-top: 72px; }
.yty-bandeau .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.yty-sites { flex: 1; min-width: 0; }

/* Menu commun : même balisage et mêmes règles que relickeeper.fr (.rk-sites). Le préfixe :root .yty-bandeau
   l'emporte sur le filet doré et la couleur de survol que l'accueil donne à tous ses liens. */
:root .yty-bandeau .rk-sites { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
:root .yty-bandeau .rk-sites a.rk-rubrique {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--yty-mute); text-decoration: none; white-space: nowrap; --rk-trait: var(--rk-rubrique);
}
:root .yty-bandeau .rk-sites a.rk-rubrique::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--rk-trait-vu, var(--rk-trait)); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
:root .yty-bandeau .rk-sites a.rk-rubrique:hover { color: var(--yty-ink); }
:root .yty-bandeau .rk-sites a.rk-rubrique:hover::after { transform: scaleX(1); }
:root .yty-bandeau .rk-sites a.rk-rubrique[aria-current] { color: var(--yty-ink); font-weight: 700; }
:root .yty-bandeau .rk-sites a.rk-rubrique[aria-current]::after { transform: scaleX(1); height: 2px; }
.rk-site-picto { display: inline-flex; flex: 0 0 auto; color: var(--rk-rubrique); }
.rk-site-picto svg { width: 15px; height: 15px; }
/* De jour, pictogrammes et trait assombris : or, cyan et vert bruts sont sous 3:1 sur fond clair. */
:root:not([data-theme="dark"]) .yty-bandeau .rk-site-picto { color: color-mix(in srgb, var(--rk-rubrique), black 45%); }
:root:not([data-theme="dark"]) .yty-bandeau .rk-sites a { --rk-trait-vu: color-mix(in srgb, var(--rk-trait), black 45%); }
/* L'éditeur : YTY, après un filet, sans couleur de la charte ; ici c'est le site courant, donc sans flèche. */
.rk-filet { align-self: stretch; width: 1px; margin: 12px 0; background: var(--yty-filet); }
:root .yty-bandeau .rk-editeur a.rk-rubrique { --rk-trait: var(--yty-ink); }
:root .yty-bandeau .rk-editeur .rk-site-picto { color: currentColor; }

@media (max-width: 760px) {
  /* Sur téléphone, deux lignes : les réglages en haut à droite, le menu dessous, sur toute la largeur. */
  html { scroll-padding-top: 0; }
  .yty-bandeau { position: relative; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px 2px; }
  .yty-bandeau .yty-reglages { margin-left: auto; }
  .yty-sites { order: 2; flex-basis: 100%; }
  :root .yty-bandeau .rk-sites {
    overflow-x: auto; scrollbar-width: none; gap: 12px; padding-right: 15%;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .yty-bandeau .rk-sites::-webkit-scrollbar { display: none; }
  :root .yty-bandeau .rk-sites a.rk-rubrique { letter-spacing: .14em; }
}

.yty-reglages .yty-pastille {
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-transform: none;
  min-height: 44px; padding: 6px 16px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.18); border-radius: 999px;
  background: rgba(255,255,255,.88); color: #1a1a1a; text-decoration: none; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.yty-reglages .yty-pastille::after { content: none !important; }
.yty-reglages .yty-pastille:hover { color: #B8860B; border-color: #B8860B; }
.yty-reglages .yty-pastille:focus-visible { outline: 2px solid #B8860B; outline-offset: 2px; }
.yty-reglages .yty-pastille:active { scale: .96; transition-duration: 0s; }

/* Croissant (vers la nuit) ou soleil (vers le jour), dessinés en CSS. */
.yty-reglages .yty-pastille-ico {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 74% 28%, transparent 5px, currentColor 5.6px);
}
:root[data-theme="dark"] .yty-reglages .yty-pastille-ico {
  width: 9px; height: 9px; margin: 2.5px; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}
/* Le libellé suit data-theme, posé avant le rendu par yty-theme.js : pas de saut. */
.yty-vers-jour { display: none; }
:root[data-theme="dark"] .yty-vers-nuit { display: none; }
:root[data-theme="dark"] .yty-vers-jour { display: inline; }

:root[data-theme="dark"] .yty-reglages .yty-pastille { background: rgba(24,23,27,.86); color: #e8e6e1; border-color: rgba(255,255,255,.2); }
:root[data-theme="dark"] .yty-reglages .yty-pastille:hover { color: #D4AF37; border-color: #D4AF37; }

/* Fondu de 0,32 s, posé par yty-theme.js le temps de la bascule seulement. */
.yty-fondu, .yty-fondu *, .yty-fondu *::before, .yty-fondu *::after {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease, box-shadow .32s ease !important;
}

@media (max-width: 760px) {
  .yty-reglages { gap: 6px; }
  .yty-reglages .yty-pastille { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .yty-reglages .yty-pastille { transition: none; }
  .yty-reglages .yty-pastille:active { scale: none; opacity: .55; }
}