/* FRAGMENTS — compléments (app.css dépasse déjà 400 lignes) : choix de la langue, carte « Les autres jeux d'Aulit ». */

/* Langue : deux pastilles FR / EN, façon touches de machine à écrire */
.langs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--rule); }
.langs button { min-width: 54px; min-height: 44px; border-radius: 9px; font: 700 17px var(--f-type); letter-spacing: .08em; color: var(--chalk-dim); }
.langs button[aria-pressed='true'] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.langs button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* Autres jeux : une fiche d'archives posée sur le bureau */
.autres { position: relative; margin: 26px 0 8px; padding: 22px 18px 10px; background: var(--paper); color: var(--ink);
  border-radius: 4px 4px 6px 6px; transform: rotate(-.6deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 40px rgba(91, 82, 68, .18); }
.autres::after { content: ''; position: absolute; top: -10px; right: 30px; width: 70px; height: 22px; background: rgba(232, 222, 198, .55);
  transform: rotate(4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.autres-tab { position: absolute; top: -14px; left: 14px; padding: 2px 12px; background: var(--paper-2); border-radius: 6px 6px 0 0;
  font: 700 13px var(--f-type); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.autres h3 { margin: 0 0 6px; font: 900 24px var(--f-stencil); letter-spacing: .04em; color: var(--ink); }
.autres ul { list-style: none; margin: 0; padding: 0; }
.autres li + li { border-top: 1px dashed rgba(91, 82, 68, .45); }
.autres a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'n b f' 'n s f'; column-gap: 12px; align-items: center;
  min-height: 64px; padding: 10px 2px; color: inherit; text-decoration: none; }
.autres a i { grid-area: n; font: 700 13px var(--f-type); font-style: normal; color: var(--red); transform: rotate(-8deg); }
.autres a b { grid-area: b; font: 900 21px var(--f-stencil); letter-spacing: .05em; }
.autres a span { grid-area: s; font: 400 15px var(--f-type); color: var(--ink-soft); line-height: 1.3; }
.autres a svg { grid-area: f; width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.autres a:hover svg, .autres a:focus-visible svg { transform: translateX(4px); }
.autres a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }