/* accueil.css — les trois portes.
 *
 * C'est l'écran de départ, et il ne coûte aucun clic de plus : Orphéon Solo
 * imposait déjà un geste avant de jouer (un AudioContext créé sans clic reste
 * suspendu). Ce geste avait jusqu'ici un bouton et aucun contenu ; il a
 * maintenant un contenu.
 *
 * Deux portes de JEU, et une troisième en retrait. Elles ne sont pas de même
 * nature et l'écran ne fait pas semblant : « jeu libre » est un lieu où l'on
 * reste, « jouer un morceau » est un couloir, « préparer » ne se visite qu'une
 * fois. Trois boutons jumeaux auraient promis une symétrie qui n'existe pas.
 */
 /* `margin:auto` plutôt que `justify-content:center` : centré quand il y a la
    place, et quand il n'y en a pas (un téléphone couché) le contenu déborde
    vers le bas et reste atteignable. Un centrage par `justify-content` rend le
    HAUT inaccessible au défilement, ce qui mangerait le titre. */
 #vue_accueil{flex:1;min-height:0;overflow-y:auto;display:flex;
     flex-direction:column;gap:1.4rem;
     padding:1.5rem;max-width:620px;width:100%;margin:0 auto}
 #vue_accueil[hidden]{display:none}

 .accueil_titre{text-align:center;margin-top:auto}
 .accueil_titre h1{font-size:1.9rem;font-weight:800;letter-spacing:.01em;margin:0}
 .accueil_titre p{margin:.35rem 0 0;color:#9aa0a6;font-size:.88rem}

 .portes{display:flex;flex-direction:column;gap:.7rem;margin-bottom:auto}

 .porte{display:grid;grid-template-columns:3rem 1fr;align-items:center;
     gap:.2rem 1rem;text-align:left;padding:1.15rem 1.2rem;border-radius:14px;
     background:#1a1c21;min-height:88px}
 .porte .icone{grid-row:1/3;font-size:1.9rem;text-align:center;line-height:1}
 .porte .nom{font-size:1.2rem;font-weight:700}
 .porte .desc{color:#9aa0a6;font-size:.82rem;line-height:1.35}
 /* L'état courant sous la porte : le jeu d'accords sous la main, le morceau
    déjà chargé. L'accueil dit ainsi où l'on en était, au lieu d'être un écran
    de garde qu'on traverse sans regarder. */
 .porte .etat{grid-column:2;color:#8ab4f8;font-size:.8rem;margin-top:.15rem}
 .porte .etat:empty{display:none}

 /* La troisième porte se tient en retrait : c'est de la préparation, elle ne
    doit pas se disputer le regard avec les deux autres. */
 .porte.retrait{min-height:0;padding:.85rem 1.2rem;background:none}
 .porte.retrait .icone{font-size:1.25rem}
 .porte.retrait .nom{font-size:1rem;font-weight:600}