/* Rail latéral — à partir de 900 px. */

.side-rail {
    position: fixed;
    right: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    /*
      26 px et non 999 px. Un rayon « pilule » vaut la moitie de la plus petite
      dimension : sur le rail deplie (163 x 116), cela fait 58 px, et les coins
      du bouton — qui touche presque les bords — tombent alors EN DEHORS de la
      silhouette arrondie. La pastille verte semble deborder du cadre blanc.
      A 26 px, le bord du conteneur passe a 6,3 px du haut, le bouton commence
      a 9 px : il reste dedans dans les deux etats.
    */
    border-radius: 26px;
    padding: 8px;
    box-shadow: var(--shadow-soft);
}

/*
  Le rail est compact (icônes seules) et ne s'ouvre qu'au survol ou au focus.
  Un rail large en permanence finit toujours par recouvrir une photo ou une
  pastille de commune à une largeur qu'on n'avait pas prévue.
*/
.side-rail a.btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    transition:
        width 0.22s var(--ease-editorial),
        padding 0.22s var(--ease-editorial),
        background-color 0.18s var(--ease-editorial),
        border-color 0.18s var(--ease-editorial);
}

.side-rail a.btn svg {
    margin-inline: 13px;
    flex: none;
}

.side-rail .rail-label {
    display: inline-block;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-width 0.22s var(--ease-editorial),
        opacity 0.16s var(--ease-editorial);
}

.side-rail a.btn:hover,
.side-rail a.btn:focus-visible {
    width: auto;
    padding-right: var(--sp-4);
}

.side-rail a.btn:hover .rail-label,
.side-rail a.btn:focus-visible .rail-label {
    max-width: 160px;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .side-rail a.btn,
    .side-rail .rail-label {
        transition: none;
    }
}