body {
    /* Old browsers */
    background: #3E2723; /* Dark Sienna */
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(-45deg, #3E2723, #654321);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(-45deg, #3E2723, #654321);
    font-family: Montserrat, sans-serif;
    margin: 0;
    padding: 0;

}

main {
    margin: 20px;
}

#chargement {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: opacity 1s ease-out; /* Ajoute une transition d'opacité de 0.5 seconde */
  box-shadow: none;
}

#chargement.hidden {
  opacity: 0; /* Baisse l'opacité à 0 lorsqu'il est masqué */
}

.bold-text  {
  font-weight: 700;
}
h2 {
    margin-bottom: 10px;
}

p {
    margin: 3px;

}

.normal {
  font-weight: normal;
}

#conteneur_texte h1,
.conteneur-texte h1 {
    display: table; /* Passer à un affichage en bloc pour occuper toute la largeur */
    text-align: center;
    font-family: 'Space Mono', sans-serif;
    padding: 10px 20px;
    /* margin: 2px; */
    margin: 0 auto; /* Centrage horizontal */
    background-color: #8B4513; /* Marron foncé */
    color: #FFF; /* Texte blanc */
    /* font-family: Georgia, serif; Police de caractères */
    /* font-size: 16px; */
    border: 2px solid #8B4513; /* Bordure marron foncé */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 

}

#Barre_de_selection{
  margin: 0 auto;
  margin-top: calc(28vh); /* à  ajouter à cause de la barre de menu qui 
  suit l'utilisateur */
  width: 95%; /* Utiliser presque toute la largeur */
  max-width: 1400px; /* Augmenter encore */
  display: flex; /* pour avoir les différentes choses que l'on peut choisir dans la barre de sélection qui 
  se mettent sur une même ligne */
  align-items: stretch; /* Centre verticalement */
  justify-content: center;
  flex-wrap: nowrap; /* Forcer sur une seule ligne sur desktop */
  gap: 10px; /* Espace entre les sélecteurs */
}

@media screen and (max-width: 768px) {
  #Barre_de_selection {
    flex-wrap: wrap; /* Permettre le retour à la ligne sur mobile */
  }
}

.pianos-container,
#pianos-container {
  /* max-width: 800px; */
  margin: 0 auto;
  margin-top: 22vh; /* Espace pour le header fixe (si pas de barre de sélection) */
  padding: 20px;
  display: flex; /* Utilisation de flexbox permet d'avoir les éléments de la 
  même taille sur une même ligne */
  flex-wrap: wrap; /* Permettre le retour à la ligne des éléments */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
}

/* Quand la barre de sélection est présente, pas besoin de margin-top sur le conteneur */
#Barre_de_selection + #pianos-container {
  margin-top: 20px; /* Petit espace après la barre de sélection */
}

#conteneur_texte {
  box-sizing: border-box;
  width: calc(100% - 40px);
  margin: 20px;
  padding: 20px 40px;
  background: #D2B48C;
  border: 5px solid #8B4513;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  text-align: left;
}

#conteneur_texte h2 {
  font-size: 20px;
  color: #6d350f; /* Bois sombre : 4.91 de contraste sur #D2B48C, AA */
  margin-top: 24px;
  margin-bottom: 8px;
}

#conteneur_texte h3 {
  font-size: 14px;
  font-weight: normal;
  color: #4c3b2a;
  margin-top: 0;
  line-height: 1.6;
}
  
.piano {
  position: relative;
  display: inline-block;
  border: 5px solid #8B4513;
  border-radius: 15px;
  padding: 20px;
  padding-top: 10px;
  margin: 20px;
  background:#D2B48C;
  text-align: left; /* a gauche pour le numéro */
  height: 580px;
  width: 400px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
  /* 5px de décalage horizontal, 5px de décalage vertical, flou de 10px, couleur de l'ombre avec une opacité de 0.5 */    

}

.piano h2 {
  font-size: 24px;
  margin-top: 0;
}

/*C'est la marque donc le nom du piano*/
.piano h3 {
  font-family: 'Space Mono', sans-serif;
  margin: 5px;
  margin-top: 0px;
}

.piano p {
  margin: 5px 0;
}

.piano img {
  max-width: 100%; 
  max-height: 300px;
  margin: auto;
  transition: transform 0.3s ease; /* Ajoute une transition pour l'effet de transformation */
}

.piano img:hover {
  transform: scale(1.05); /* Agrandit l'image de 5% lorsqu'elle est survolée */
}

img, iframe{
  border-radius: 30px;
  margin: 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

iframe{
  max-width: 100%; 
}
.social-icons {
  display: flex;
  justify-content: center; /* Centre les icônes horizontalement */
  margin-top: 20px; /* Espace au-dessus des icônes */
}

.social-icons a {
  margin: 0 10px; /* Espace entre les icônes */
  color: #000; /* Couleur des icônes */
  text-decoration: none; /* Supprime le soulignement des liens */
}
.youtube-icon i {
  color: red; /* Définit la couleur de l'icône YouTube en rouge */
}
.facebook-icon i {
  color: #1877F2; /* Définit la couleur de l'icône Facebook en bleu */
}

  .lien_photo, .bouton, select{
    /* Style du lien */
    display: inline-block;
    font-family: Orbitron, sans-serif;
    padding: 10px 20px;
    background-color: #8B4513; /* Marron foncé */
    color: #FFF; /* Texte blanc */
    text-decoration: none; /* Supprimer le soulignement */
    font-size: 16px;
    border: 2px solid #8B4513; /* Bordure marron foncé */
    border-radius: 5px; /* Coins arrondis */
    text-align: center; /* Centrer le texte */
    transition: background-color 0.3s, color 0.3s; /* Transition en douceur */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
    /* Effet au survol */
  
}
.bouton, select{
  display: table; /* Passer à un affichage en bloc pour occuper toute la largeur*/
  margin: 0 auto; /* Centrage horizontal */
  
}

/* Champ de recherche. Fond clair et non brun, contrairement aux
   boutons : un texte saisi doit rester lisible pendant la frappe.
   La bordure et la police le rattachent au reste de la barre. */
#recherche {
  font-family: Orbitron, sans-serif;
  flex: 1;
  min-width: 180px;
  margin: 0 5px;
  padding: 15px 10px;
  box-sizing: border-box;
  background-color: #FFF;
  color: #4c3b2a;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 16px;  /* en deca de 16px, iOS zoome a la prise de focus */
}

#recherche::placeholder {
  color: #4c3b2a;
  opacity: 0.7;
}

select{
  /* max-width: 800px; */
  padding: 15px 10px;
  margin: 0px 5px; /* Réduire les marges */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  flex: 1; /* Permet aux éléments d'occuper le même espace horizontalement */
  min-width: 150px; /* Largeur minimum */
}
.lien_photo:hover, .bouton:hover, select:hover{
    background-color: #D2B48C; /* Marron plus clair au survol */
    color: #000; /* Texte noir au survol */
}


.lien_photo:active, .bouton:active, select:active{
  background-color: #A0522D; /* Nouvelle couleur lorsque le bouton est cliqué */
  color: #000; /* Texte noir */
}

#piano_num {
  display: inline-block;
  margin: 0; /* Supprime toute marge externe */
  /* margin: 100px; */
  text-align:left;
  font-family: 'Space Mono', sans-serif;
  padding: 1px 1px;
  background-color: #654321; /* Marron foncé */
  color: #FFF; /* Texte blanc */
  /* font-family: Georgia, serif; Police de caractères */
  font-size: 16px;
  border: 2px solid #8B4513; /* Bordure marron foncé */
  border-radius: 5px; /* Coins arrondis */
}
.corpscasepiano {
  text-align:center;
  margin: 0;
  padding: 0;
}


/* HEADER  */

.nav-bureau {
  display: contents; /* les touches restent enfants flex de .clavier-piano */
}

.nav-mobile {
  display: none;
}

.clavier-piano {
  position: fixed; /* Fixer la position de l'en-tête */
  top: 0; /* Fixer l'en-tête en haut de la fenêtre du navigateur */
  left: 0;
  width: 100vw; /* Largeur en fonction de la largeur de la fenêtre */
  height: 100px; /* Hauteur fixe */
  z-index: 1000; /* Assurez-vous que l' */
  display: flex;
  justify-content: center;
  background-color: #000;
  padding: 0;
  visibility: hidden;
}

.toucheb, header a {
  width: calc(100vw / 7); /* 7 touches blanches */
  height: 100px;
  /* height: calc(20vh); */
  background-color: rgb(255, 255, 255);
  /* background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(230, 230, 230, 0.8)); */
  /* border: 4px solid #000; */
    border-top-left-radius: 0; /* Coin supérieur gauche : forme de rectangle */
    border-top-right-radius: 0; /* Coin supérieur droit : forme de rectangle */
  border-bottom-left-radius: 1vw; /* Coin inférieur gauche : coins arrondis */
  border-bottom-right-radius: 1vw; /* Coin inférieur droit : coins arrondis */
  display: flex;
  box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.5); 
  justify-content: center;
  align-items: center;
  visibility: visible;
  opacity: 0.9;
  line-height: 150%;

}

header a {
  display: flex;
  flex-direction: column;
  justify-content: 110% ;
  /* height: 100%; */
  color: #000;
  padding: 10px;
  text-decoration: none;
  font-weight: bold; /* Mettre le texte en gras */
  text-align: center;
  font-family: "Orbitron", sans-serif;
  background: white;
  transition: background 0.5s, background-color 0.5s;
  overflow: hidden; /* Masquer tout contenu dépassant des limites de l'élément */
  min-width: 105px;
  min-height: 60px;
  /* max-width: 100px; */
  font-size: 1.2vw; /* Taille de police relative */
}

.touchen {
  width: calc(100vw / 14); /* 14 touches noires */
  height: 60px;
  /* height: calc(18vh); */
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0.1, 0.1, 0.1, 0.4));
  border-top-left-radius: 0; /* Coin supérieur gauche : forme de rectangle */
  border-top-right-radius: 0; /* Coin supérieur droit : forme de rectangle */
  border-bottom-left-radius: 10px; /* Coin inférieur gauche : coins arrondis */
  border-bottom-right-radius: 10px; /* Coin inférieur droit : coins arrondis */
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 

}

header a:hover {
  background: linear-gradient(to top, rgba(167, 167, 167, 0.5), rgba(255, 255, 255, 0.9)); /* Dégradé blanc avec transparence */
  background-color: #a6a6a6;

}
header a:active {
  background-color: #414141;
  background: #a6a6a6;
}

.touchen.milieu {
  min-width: 30px;
  min-height: 50px;

}


.conteneur-texte {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  overflow: hidden;
  border: 5px solid #8B4513;
  width: 80%;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
  background:#D2B48C;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
  text-align: justify; /* Alignement du texte à gauche */
  /* 5px de décalage horizontal, 5px de décalage vertical, flou de 10px, couleur de l'ombre avec une opacité de 0.5 */    
}

.conteneur-texte p, .conteneur-texte h3, .conteneur-texte h4 {
  text-align: left;
}

.text {
  justify-content: space-around;
}

/* A voir s'il faut l'enlever déjà un truc dans le select */


/* Ajouter un style pour la flèche du menu déroulant */
#colorPicker::-ms-expand {
  display: none; /* Masquer la flèche pour Internet Explorer */
}

/* Style des options */
  option {
  font-family: Orbitron, sans-serif;
  background-color: #D2B48C; /* Marron plus clair au survol */
  color: #000; /* Couleur du texte */
  padding: 10px;
  font-size: 16px;
}
option:hover{
  background-color: #845313; /* Marron plus clair au survol */
}
/* Effet au survol (pas possible sur option, donc uniquement sur le select) */
#colorPicker:hover {
  background-color: #D2B48C; /* Marron plus clair au survol */
  color: #000000;
}

/* Style au focus */
select:focus {
  outline: none;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); /* Ombre au focus */
}

/* =============================================
   Liens vers les autres services
   Grille a colonnes egales : les boites font la meme taille et un
   ecart les separe, quelle que soit la longueur du libelle.
   ============================================= */
.liens-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 12px;
}

.liens-services a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  font-family: Orbitron, sans-serif;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  background-color: #8B4513;
  color: #FFF;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, color 0.3s;
}

.liens-services a:hover {
  background-color: #D2B48C;
  color: #000;
}

.liens-services a:active {
  background-color: #A0522D;
  color: #000;
}

/* =============================================
   Favoris
   Le dore n'est lisible que sur fond sombre : sur le bois clair des
   cartes il plafonne a 1.07 de contraste. L'etoile a donc sa propre
   pastille brune, ou #FFD700 atteint 5.06.
   ============================================= */
.btn-favori {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #654321;
  border: 2px solid #8B4513;
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, transform 0.15s;
  line-height: 1;
}

.btn-favori::before {
  content: "\2606";          /* etoile creuse */
  font-size: 22px;
  color: #FFF;
}

.btn-favori.actif::before {
  content: "\2605";          /* etoile pleine */
  color: #FFD700;
}

.btn-favori:hover {
  background-color: #8B4513;
}

.btn-favori:active {
  transform: scale(0.92);
}

.btn-favori.anime {
  animation: eclat-favori 0.6s ease-out;
}

@keyframes eclat-favori {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
  35%  { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1);    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
}

/* Message passager de confirmation */
#message-favori {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 1200;
  padding: 10px 18px;
  background-color: #3E2723;
  color: #FFD700;
  font-family: 'Space Mono', sans-serif;
  font-size: 14px;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

#message-favori.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Bouton d'acces aux favoris, dans la barre */
#bascule-favoris {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 15px 18px;
  background-color: #8B4513;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
}

#bascule-favoris::before {
  content: "\2606";
  font-size: 18px;
  color: #FFF;
  line-height: 1;
}

#bascule-favoris[aria-pressed="true"] {
  background-color: #3E2723;
}

#bascule-favoris[aria-pressed="true"]::before {
  content: "\2605";
  color: #FFD700;
}

#bascule-favoris:hover {
  background-color: #654321;
}

#compte-favoris {
  min-width: 18px;
  padding: 1px 5px;
  background-color: #FFD700;
  color: #3E2723;
  border-radius: 10px;
  font-family: 'Space Mono', sans-serif;
  font-size: 12px;
  text-align: center;
}

/* Les animations restent discretes pour qui en a demande moins */
@media (prefers-reduced-motion: reduce) {
  .btn-favori,
  .btn-favori.anime,
  #message-favori {
    animation: none;
    transition: none;
  }
}

/* =============================================
   Panneau de filtres repliable
   Un seul bloc cliquable dans la barre : les criteres se deploient par
   dessus le catalogue, sans en modifier la hauteur.
   ============================================= */
#Barre_de_selection {
  position: relative;   /* ancre du panneau deploye */
}

#bouton-filtres {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: Orbitron, sans-serif;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #8B4513;
  color: #FFF;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
}

#bouton-filtres::-webkit-details-marker {
  display: none;   /* le triangle natif de Safari */
}

#bouton-filtres::after {
  content: "\25BE";   /* chevron vers le bas */
  font-size: 12px;
}

#panneau-filtres[open] #bouton-filtres::after {
  content: "\25B4";
}

#bouton-filtres:hover {
  background-color: #D2B48C;
  color: #000;
}

#compte-filtres {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  background-color: #FFF;
  color: #8B4513;
  border-radius: 10px;
  font-family: 'Space Mono', sans-serif;
  font-size: 12px;
  text-align: center;
}

#contenu-filtres {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1050;
  width: min(760px, calc(100vw - 16px));
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  padding: 16px;
  background: #D2B48C;
  border: 5px solid #8B4513;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.groupe-filtre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}

.groupe-filtre > label,
.groupe-filtre > legend {
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  color: #4c3b2a;
  padding: 0;
}

.groupe-filtre.fourchette {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 6px;
}

.groupe-filtre.fourchette > legend {
  grid-column: 1 / -1;
}

.groupe-filtre.fourchette .tiret {
  color: #4c3b2a;
}

#contenu-filtres input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  font-family: Orbitron, sans-serif;
  font-size: 16px;   /* en deca de 16px, iOS zoome a la prise de focus */
  padding: 8px;
  background-color: #FFF;
  color: #4c3b2a;
  border: 2px solid #8B4513;
  border-radius: 5px;
}

#contenu-filtres select {
  width: 100%;
  margin: 0;
  min-width: 0;
  padding: 8px;
  font-size: 15px;
}

#reinitialiser {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #654321;
  color: #FFF;
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, color 0.3s;
}

#reinitialiser:hover {
  background-color: #D2B48C;
  color: #000;
}

/* =============================================
   Compteur de position dans le catalogue
   Produit par assets/js/compteur.js. Masque par defaut : il n'a de sens
   que dans le defilement plein ecran du mobile.
   ============================================= */
#compteur-cartes {
  display: none;
}

@media screen and (max-width: 768px) {
    /* Styles pour les appareils mobiles */

  .conteneur-texte {
    flex-direction: column;   /* Aligne les éléments verticalement */
    align-items: center;      /* Centre les éléments horizontalement (facultatif) */
    justify-content: flex-start; /* Aligne les éléments en haut du conteneur */
  

  }
  /* Bascule des deux navigations : seule source de verite du seuil mobile */
  .nav-bureau {
    display: none;
  }

  .nav-mobile {
    display: contents;
  }

  .toucheb {
    visibility: hidden;
  }

  header a {
    font-size: 3vw; /* Taille de police relative */
  }

  .touchen {
    visibility: hidden;
  }

  .touchen.milieu {
  visibility: visible;
  }
  /* =============================================
     Catalogue mobile : une carte par ecran, defilement vertical
     Le doigt remonte la page et chaque piano s'arrete plein cadre.
     Magnetisme natif, sans JavaScript, pour survivre a la
     reconstruction du conteneur par filtres.js.
     ============================================= */
  :root {
    /* Empreinte reelle de l'en-tete, et non sa hauteur declaree :
       .clavier-piano annonce 100px, mais ses touches blanches sont en
       content-box et cumulent height:100px + padding:10px haut et bas,
       soit 120px, qui debordent du conteneur. S'y ajoute leur ombre
       portee. 136px degagent les touches et l'essentiel de l'ombre.
       C'est, avec la ligne suivante, le seul nombre a ajuster. */
    --hauteur-entete: 136px;
    --hauteur-filtres: 56px;   /* #Barre_de_selection, une seule rangee */
  }

  /* Toutes les pages doivent degager l'en-tete fixe */
  #pianos-container,
  .pianos-container {
    margin-top: var(--hauteur-entete);
  }

  /* La barre de filtres se replie sous l'en-tete, sur une rangee.
     Sans cela son margin-top de 28vh laissait un vide de plus de
     200 px et le plein ecran perdait tout son sens. */
  #Barre_de_selection {
    flex-wrap: nowrap;   /* une seule rangee : le bouton puis la recherche */
    align-items: center;
    margin: 0;
    margin-top: var(--hauteur-entete);
    width: 100%;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
  }

  #bouton-filtres {
    padding: 10px 12px;
    font-size: 14px;
    gap: 6px;
  }

  #recherche {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    font-size: 16px;   /* a conserver : iOS zoome en deca */
  }

  /* Le plein ecran ne vise QUE les conteneurs qui portent des cartes.
     accord.php et a_propos.php reutilisent l'id #pianos-container pour
     du texte : les y enfermer dans un defilement d'une hauteur d'ecran
     les rendrait illisibles. D'ou cette classe explicite.
     L'identifiant est repris dans le selecteur par necessite : la regle
     de base .pianos-container, #pianos-container pese (1,0,0) et
     l'emporterait sur une simple classe, laissant passer son
     flex-wrap: wrap qui brise le magnetisme vertical. */
  #pianos-container.catalogue-plein-ecran {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    height: calc(100vh - var(--hauteur-entete));
    height: calc(100dvh - var(--hauteur-entete));
    overflow-y: auto;
    overflow-x: hidden;
    /* proximity et non mandatory : une carte au descriptif long depasse
       la hauteur de l'ecran, et le magnetisme obligatoire rendrait son
       bas inatteignable. En proximity le doigt parcourt librement la
       carte, puis l'arret se fait sur la suivante. */
    scroll-snap-type: y proximity;
    gap: 0;
    padding: 0;
    scrollbar-width: none;
  }

  /* Le catalogue : la barre de filtres a deja degage l'en-tete */
  #Barre_de_selection + #pianos-container.catalogue-plein-ecran {
    margin-top: 0;
    height: calc(100vh - var(--hauteur-entete) - var(--hauteur-filtres));
    height: calc(100dvh - var(--hauteur-entete) - var(--hauteur-filtres));
  }

  #pianos-container.catalogue-plein-ecran::-webkit-scrollbar {
    display: none;
  }

  #pianos-container.catalogue-plein-ecran .piano {
    flex: 0 0 auto;                 /* la carte prend la hauteur de son contenu */
    min-height: 100%;               /* et occupe au minimum tout l'ecran */
    width: 100%;
    box-sizing: border-box;         /* bordures et padding compris dans les 100% */
    height: auto;
    margin: 0;
    border-radius: 0;               /* plein cadre : les coins arrondis n'ont plus lieu d'etre */
    overflow: visible;              /* surtout pas de defilement imbrique : il
                                       captait le geste et enfermait le doigt
                                       dans la premiere carte */
    scroll-snap-align: start;
    scroll-snap-stop: always;       /* une carte a la fois, pas trois d'un coup */
  }

  #pianos-container.catalogue-plein-ecran .piano img {
    max-height: 34vh;               /* laisse de la place au descriptif */
  }

  #compteur-cartes {
    display: block;
    position: fixed;
    right: 12px;
    top: calc(var(--hauteur-entete) + 8px);
    z-index: 1100;
    padding: 6px 12px;
    background-color: #654321;
    color: #FFF;
    font-family: 'Space Mono', sans-serif;
    font-size: 13px;
    border: 2px solid #8B4513;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;           /* ne doit jamais intercepter le geste */
  }

  /* Le catalogue a une barre de filtres : la pastille descend d'autant */
  #compteur-cartes.sous-filtres {
    top: calc(var(--hauteur-entete) + var(--hauteur-filtres) + 8px);
  }

  #compteur-cartes.compteur-vide {
    display: none;                  /* aucun piano ne correspond au filtre */
  }

  .piano {
    height: auto;                   /* hors catalogue plein ecran */
  }
}