[Résolu] Réglage de CSS

Bonjour à tous

Cela fait des heures que j'essaie de régler les media-queries d'un fichier CSS et que je tourne en rond.

La page https://www.alma-musica.net/html/partitions/index.php

Le problème :
En mode "large écran" (PC), la présentation me satisfait
En mode "téléphone portrait" c'est également OK
Ce qui ne marche pas, c'est le mode "téléphone paysage" ou tablette, où l'écran est moins large qu'un PC et plus large qu'un téléphone en mode portrait.
Lorsque l'écran est moins large que 850px, je supprime la colonne de droite dont l'intérêt est secondaire. Cela permet de réduire la largeur et c'est comme ça que ça marche sur écran étroit.
Par contre sur un écran de taille intermédiaire la colonne disparaît mais je ne parviens pas à centrer le contenu de la page horizontalement.

Je suppose que ça dit sauter aux yeux d'une autre personne, mais je suis tellement englué dedans que je n'y comprends plus rien. Il est vrai que c'est une structure un peu complexe, avec pas mal de niveaux d'enchâssement, mais ça ne devrait pas empêcher de traiter le problème.

Quelqu'un pourrait il avoir la bonté de me venir en aide ?

Bonjour,

on voit que tes lecteurs audio débordent l'écran en mobile, en mode portrait. Ils ont donc une place allouée, place qui pourrait empêcher le centrage du reste. C'est une hypothèse, je n'ai pas testé. Tu as aussi plus loin du texte "version SSA, version SSA (chiffrée)" qui déborde aussi l'écran. Peut-être une piste ici aussi.
Sinon, l'une des possibilités est d'ajouter ça :

@media (max-width:768px) and (orientation: landscape) {
 main {
    flex-direction:row;
      }
}

Il faut quelque part dans le css un @media pour l'orientation landscape, à toi d'y mettre ce qui pose problème.
Aussi, mais ça n'a rien à voir avec ton problème, je crois que tes icônes pour les partitions et le son sont à la fois trop petites et trop rapprochées. Pour plus large que ça, Google Search Console m'a tapé sur les doigts.

Merci de bien vouloir de venir en aide.

Je n'avais pas pensé à mettre un @media landscape, je vais regarder de ce côté.

Effectivement les lecteurs audio débordent, je ne m'en étais pas rendu compte.
En fait il n'y a qu'un seul lecteur audio qui se déplace en fonction de l'endroit où on l'appelle.
Je vais régler ça.

Il s'agit d'un site qui n'est en pratique accédé que par les membres de l'association. Aucun ne m'a signalé de problème de proximité. Je ne m'intéresse pas à l'avis de Google tant que ça ne correspond pas au ressenti de mes utilisateurs, c'est un luxe qu'on peut s'autoriser quand on ne cherche pas à conquérir de nouveaux utilisateurs

Merci du conseil, mais ça ne suffit pas à résoudre le problème
La version de test courante est à l'adresse https://www.alma-musica.net/html/partitions/@index.php
Pour simplifier, j'ai supprimé la taille intermédiaire de 750px, au moins provisoirement.
Restent deux problèmes que je n'arrive pas à résoudre :
sur iPhone en mode paysage

comment centrer l'image, le but de

@media screen and (max-width:850px) {
     div.performers {
        display: none;
    }
    ....
}

étant de récupérer de la place

en mode portrait

comment faire que les titres longs ne sortent pas de l'écran

Il s'agit de flex en cascade, je ne m'y retrouve toujours pas...

Après pas mal d'essais et erreurs, je suis parvenu à faire un réglage qui -- du moins pour l'instant -- me semble satisfaisant.

Merci à tous pour vos réponses qui m'ont aidé dans cette tâche difficile.