/* La barre « Trois portes » (assets/trois-portes.js) : trois boutons, un par page sonore. L'or est celui du site (--gold, #c9a15a). */
.trois-portes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:64ch; margin:6px auto 18px; }
.trois-portes-btn{ display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center; padding:9px 8px; border:1px solid rgba(201,161,90,.45); border-radius:6px; text-decoration:none; color:var(--dim,#a9a9a6); background:transparent; }
.trois-portes-btn:hover, .trois-portes-btn:focus-visible{ border-color:var(--gold,#c9a15a); color:var(--gold,#c9a15a); }
.trois-portes-btn[aria-current="page"]{ border-color:var(--gold,#c9a15a); background:rgba(201,161,90,.14); color:var(--gold,#c9a15a); cursor:default; }
.trois-portes-libelle{ font-weight:600; font-size:calc(14px + var(--fs-bump,0px)); line-height:1.25; overflow-wrap:anywhere; }
.trois-portes-role{ font-size:calc(11px + var(--fs-bump,0px)); line-height:1.3; opacity:.85; overflow-wrap:anywhere; }
@media (max-width:520px){ .trois-portes{ grid-template-columns:1fr; } .trois-portes-btn{ flex-direction:row; justify-content:space-between; gap:10px; padding:8px 12px; } .trois-portes-role{ text-align:right; } }