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;

}


/* =============================================
   Grand ecran : des touches blanches plus larges
   Les largeurs declarees totalisaient 178 vw pour 100 disponibles, si
   bien que flex comprimait tout d'un facteur 0.56 : une touche blanche
   ne faisait que 8 vw. En ajustant les deux largeurs pour que la somme
   tienne dans l'ecran, elles gagnent un tiers sans etre comprimees.
   Pour les elargir davantage, baisser le diviseur 9.5 et augmenter le
   diviseur 60 d'autant : 8 blanches + 9 noires doivent rester sous
   100 vw, sinon flex reprend la main.
   ============================================= */
@media screen and (min-width: 769px) {
  .toucheb,
  header a {
    width: calc(100vw / 9.5);   /* 10.5 vw, contre 8 vw auparavant */
    min-width: 0;
  }

  header a {
    font-size: clamp(11px, 1.05vw, 19px);
  }

  .touchen {
    width: calc(100vw / 60);
  }
}

.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;
}
/* Surbrillance d'une option : survol, option retenue, et parcours au
   clavier. Chrome ignore background-color seul sur option:checked, d'ou
   le degre uni en renfort.
   A savoir : ces regles ne portent que sur Chrome et Firefox sous
   Windows et Linux. macOS, iOS et Android dessinent leurs menus avec le
   systeme et n'appliquent aucune feuille de style. */
option:hover,
option:checked,
option:focus {
  background-color: #845313;
  background: linear-gradient(#845313, #845313);
  color: #FFF;
}

/* Teinte des commandes natives que le navigateur accepte de colorer */
select,
input[type="search"],
input[type="number"] {
  accent-color: #8B4513;
}

/* La selection de texte, elle, est coloree partout sans exception */
::selection {
  background-color: #8B4513;
  color: #FFF;
}
/* 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 */
}

/* =============================================
   Hauteurs de l'interface
   Mesurees sur la page par assets/js/mesures.js quand il est charge ;
   ces valeurs ne sont qu'un repli. Voir la charte graphique.
   ============================================= */
:root {
  --hauteur-entete: 136px;
  --hauteur-filtres: 56px;
}

/* =============================================
   Pages de contenu
   Debarras, contact, a propos. Meme palette que le reste du site, mais
   execution allegee : bordures fines, ombres douces, beaucoup d'air.
   Rien ici ne touche au catalogue, qui garde ses propres regles.
   ============================================= */
.page-contenu {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(var(--hauteur-entete) + 24px) 16px 64px;
  box-sizing: border-box;
}

.page-titre {
  display: table;
  margin: 0 auto 32px;
  padding: 12px 28px;
  font-family: 'Space Mono', sans-serif;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  text-align: center;
  color: #FFF;
  background-color: #8B4513;
  border: 2px solid #8B4513;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.carte {
  background: #D2B48C;
  border: 2px solid #8B4513;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  padding: 24px 28px;
  margin-bottom: 24px;
}

.carte h2 {
  margin: 0 0 12px;
  font-family: Orbitron, sans-serif;
  font-size: clamp(16px, 2.4vw, 20px);
  color: #6d350f;
}

.carte p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  color: #4c3b2a;
  text-align: left;   /* le texte justifie creait des rivieres sur mobile */
}

.carte p:last-child {
  margin-bottom: 0;
}

/* Une carte mise en avant, pour l'offre gratuite */
.carte.en-avant {
  background: #EADBC0;
  border-color: #654321;
  border-left-width: 6px;
}

.etiquette {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-family: 'Space Mono', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #FFF;
  background-color: #654321;
  border-radius: 999px;
}

/* --- Grille de tarifs --- */
.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.tarif {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: #EADBC0;
  border: 2px solid #8B4513;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.tarif-intitule {
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  color: #6d350f;
}

.tarif-prix {
  font-family: 'Space Mono', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #3E2723;
  line-height: 1.1;
}

.tarif-note {
  font-size: 13px;
  line-height: 1.5;
  color: #4c3b2a;
}

.mention {
  margin: 16px 0 0;
  font-size: 13px;
  font-style: italic;
  color: #4c3b2a;
}

/* --- Coordonnees --- */
.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.tuile-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #EADBC0;
  border: 2px solid #8B4513;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.tuile-contact .intitule {
  font-family: Orbitron, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6d350f;
}

.tuile-contact a,
.tuile-contact span.valeur {
  font-family: 'Space Mono', sans-serif;
  font-size: 16px;
  color: #3E2723;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tuile-contact a:hover {
  color: #8B4513;
  text-decoration: underline;
}

.carte-plan {
  padding: 0;
  overflow: hidden;
}

.carte-plan iframe {
  display: block;
  width: 100%;
  height: 380px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tous les boutons d'une meme rangee : icones rondes et boutons
   allonges partagent la meme hauteur, et passent a la ligne ensemble
   quand la largeur manque. */
.reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.reseaux > a:not(.bouton-reseau) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  background: #EADBC0;
  border: 2px solid #8B4513;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.reseaux > a:not(.bouton-reseau):hover {
  background: #D2B48C;
}

/* Bouton d'abonnement. Le widget officiel de Google a ete abandonne :
   son interface attend un nom d'utilisateur herite, pas un handle en @,
   et renvoyait donc « Error ». Ce lien ouvre la boite de confirmation
   d'abonnement de YouTube, sans script tiers ni cookie. */
.bouton-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 1 auto;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px;
  white-space: nowrap;
  font-family: Orbitron, sans-serif;
  font-size: 15px;
  text-decoration: none;
  color: #FFF;
  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, color 0.3s;
}

.bouton-reseau i {
  font-size: 20px;
}

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

.bouton-reseau:active {
  background-color: #A0522D;
  color: #000;
}

/* --- Fiches d'accordeur --- */
.grille-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px;
}

.fiche {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #EADBC0;
  border: 2px solid #8B4513;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.fiche img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 8px;
  box-shadow: none;
}

.fiche-role {
  font-family: Orbitron, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6d350f;
}

.fiche-nom {
  font-family: 'Space Mono', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #3E2723;
}

.fiche address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: #4c3b2a;
}

.fiche-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiche-services li {
  padding: 3px 10px;
  font-size: 12px;
  color: #4c3b2a;
  background: #D2B48C;
  border-radius: 999px;
}

.fiche-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
}

.fiche-contact a,
.fiche-contact span {
  font-family: 'Space Mono', sans-serif;
  font-size: 14px;
  color: #3E2723;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fiche-contact a:hover {
  color: #8B4513;
  text-decoration: underline;
}

/* --- Article editorial --- */
.article {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}

.article img {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.article .chapeau {
  font-size: 18px;
  line-height: 1.6;
  color: #3E2723;
  font-style: italic;
}

.article p {
  font-size: 16px;
  line-height: 1.8;
  color: #4c3b2a;
  text-align: left;
  margin: 0 0 16px;
}

.article p:last-child {
  margin-bottom: 0;
}

.citation {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid #8B4513;
  font-family: 'Space Mono', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #3E2723;
}

/* =============================================
   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.
   ============================================= */
/* .conteneur-texte est une rangee flex : sans cette ligne, le bloc est
   dimensionne par son contenu et la grille retombe sur une colonne. */
.bloc-services {
  flex: 1 1 100%;
  width: 100%;
}

.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
   L'ambre n'est lisible que sur fond sombre : sur le bois clair des
   cartes #EFC27B plafonne a 1.19 de contraste. L'etoile a donc sa
   propre pastille brune #654321, ou il atteint 5.33.
   ============================================= */
.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: #EFC27B;
}

.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(239, 194, 123, 0.75); }
  35%  { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(239, 194, 123, 0); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1);    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
}

/* 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: #EFC27B;
}

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

#compte-favoris {
  min-width: 18px;
  padding: 1px 5px;
  background-color: #EFC27B;
  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 {
    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;
}

/* =============================================
   Listes deroulantes personnalisees
   Produites par assets/js/listes.js. Elles ne remplacent le menu natif
   qu'au-dela de 768 px : sur telephone le selecteur du systeme reste
   bien plus confortable, et sa surbrillance n'est de toute facon pas
   celle du site.
   ============================================= */
.liste-custom {
  display: none;            /* le natif tient la place par defaut */
  position: relative;
}

body.listes-refaites #contenu-filtres select {
  display: none;
}

body.listes-refaites .liste-custom {
  display: block;
}

.liste-bouton {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  font-family: Orbitron, sans-serif;
  font-size: 15px;
  padding: 8px 10px;
  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;
}

.liste-bouton::after {
  content: "\25BE";
  font-size: 11px;
  flex: 0 0 auto;
}

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

.liste-bouton[aria-expanded="true"] {
  background-color: #654321;
  color: #FFF;
}

.liste-bouton:focus-visible {
  outline: 3px solid #3E2723;
  outline-offset: 2px;
}

.liste-options {
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background-color: #EADBC0;   /* sable : derive du bois clair du panneau,
                                  dont il se detache par la bordure et
                                  l'ombre. Le texte y tient 7.83 et la
                                  surbrillance 4.77 de contraste. */
  border: 2px solid #8B4513;
  border-radius: 5px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.liste-options li {
  padding: 8px 10px;
  cursor: pointer;
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  color: #4c3b2a;
  border-radius: 3px;
}

/* La surbrillance que les menus natifs refusaient : bois, et non bleu */
.liste-options li.survolee {
  background-color: #845313;
  color: #FFF;
}

.liste-options li.choisie {
  background-color: #D2B48C;
  color: #000;
  font-weight: 700;
  /* un liseré plutot qu'une bordure : aucun decalage de mise en page */
  box-shadow: inset 3px 0 0 #8B4513;
}

.liste-options li.choisie.survolee {
  background-color: #8B4513;
  color: #FFF;
}

/* =============================================
   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 {
    /* Rappel : ces deux variables sont definies globalement plus haut.
       Elles sont reprises ici a l'identique pour que le bloc reste
       lisible d'un seul tenant.
       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;
  }

  /* Meme hauteur pour les trois commandes, et meme largeur pour les
     deux boutons : la barre doit se lire comme un ensemble. */
  #bouton-filtres,
  #bascule-favoris,
  #recherche {
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
  }

  #bouton-filtres,
  #bascule-favoris {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 88px;
    font-size: 14px;
    gap: 6px;
  }

  #recherche {
    flex: 1 1 auto;
    min-width: 0;
    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 */
  }


  /* Pages de contenu : une colonne, et l'image avant le texte */
  .page-contenu {
    padding: calc(var(--hauteur-entete) + 16px) 12px 48px;
  }

  .carte {
    padding: 20px 18px;
  }

  .article {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article img {
    max-width: 220px;
    justify-self: center;
  }

  .carte-plan iframe {
    height: 300px;
  }

  #compteur-cartes {
    display: block;
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;   /* sous le panneau de filtres, qui est a 1050 */
    opacity: 0.5;    /* repere discret : il ne doit pas masquer la carte */
    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 */
  }

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

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