/* =====================================================================
   Bruits de couleur Cap555 - bloc autonome, avec outils/commun/fenetre.css
   9 vignettes (3 colonnes), panneaux de réglage du vert et du rose réglable.
   Fenêtre orange soutenu (choix de Christine, 03/11/2026) ; les réglages,
   titres et valeurs, orange dans les autres outils, sont ici en vert clair.
   ===================================================================== */
.br {
  --of-1: #d2601f; --of-2: #b04714; --of-3: #8a330c;
  --of-lueur-haut: rgba(255, 190, 130, .42); --of-lueur-bas: rgba(255, 122, 26, .3);
  --of-orange: #c6e3cf;        /* accents de cette fenêtre : vert clair au lieu d'orange */
  --of-orange-doux: #c6e3cf;
  --of-doux: #fbe6d4;          /* textes secondaires : crème, lisible sur l'orange */
}
.br input[type=range] {
  background: linear-gradient(90deg, #c6e3cf 0, #7fbf95 var(--pct, 50%), rgba(255, 255, 255, .2) var(--pct, 50%));
}
.br input[type=range]::-webkit-slider-thumb {
  background: radial-gradient(circle at 35% 35%, #ffffff, #c6e3cf 62%);
  box-shadow: 0 0 0 3px rgba(198, 227, 207, .3), 0 0 14px rgba(198, 227, 207, .55);
}
.br input[type=range]::-moz-range-thumb {
  background: radial-gradient(circle at 35% 35%, #ffffff, #c6e3cf 62%);
  box-shadow: 0 0 0 3px rgba(198, 227, 207, .3), 0 0 14px rgba(198, 227, 207, .55);
}
.br select {
  border-color: rgba(198, 227, 207, .45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c6e3cf' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.br-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.br .br-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1rem .8rem 1.1rem;
  font: inherit; text-align: center;
  color: var(--of-texte);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.br .br-btn:hover { border-color: var(--of-orange); transform: translateY(-2px); }
.br .br-btn:focus-visible { outline: 2px solid var(--of-vert-clair); outline-offset: 3px; }
.br .br-btn[aria-pressed="true"] {
  border-color: var(--of-orange);
  background: linear-gradient(180deg, rgba(156, 49, 69, .55), rgba(0, 0, 0, .35));
  box-shadow: 0 0 0 3px rgba(198, 227, 207, .25), 0 0 30px rgba(198, 227, 207, .3);
}
.br-onde { display: block; width: 100%; height: 64px; overflow: hidden; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.br-onde svg { display: block; width: 200%; height: 100%; }
.br-btn[aria-pressed="true"] .br-onde svg { animation: br-defile 3s linear infinite; }
.br-btn[data-bruit="rose"][aria-pressed="true"] .br-onde svg { animation-duration: 4.5s; }
.br-btn[data-bruit="brun"][aria-pressed="true"] .br-onde svg { animation-duration: 7s; }
.br-btn[data-bruit="gris"][aria-pressed="true"] .br-onde svg { animation-duration: 4s; }
.br-btn[data-bruit="vert"][aria-pressed="true"] .br-onde svg { animation-duration: 5.5s; }
.br-btn[data-bruit="bleu"][aria-pressed="true"] .br-onde svg { animation-duration: 2.2s; }
.br-btn[data-bruit="violet"][aria-pressed="true"] .br-onde svg { animation-duration: 1.6s; }
.br-btn[data-bruit="pluie"][aria-pressed="true"] .br-onde svg { animation-duration: 3.5s; }
.br-btn[data-bruit="rosereglable"][aria-pressed="true"] .br-onde svg { animation-duration: 4.5s; }
/* panneaux de réglage du vert et du rose réglable */
.br-perso { display: grid; gap: .8rem; margin-bottom: 1rem; }
.br-perso[hidden] { display: none; }
.br-perso .of-sous-titre { margin: 0; }
.br-perso .of-petit { margin: 0; }
.br-perso .of-valeur { min-width: 7.5em; }
.br .br-origine {
  justify-self: start;
  font: inherit; font-size: .9rem;
  padding: .5rem 1rem; border-radius: 999px;
  color: var(--of-texte);
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
}
.br .br-origine:hover { border-color: var(--of-orange); }
.br .br-origine:focus-visible { outline: 2px solid var(--of-vert-clair); outline-offset: 3px; }
@keyframes br-defile { to { transform: translateX(-50%); } }
.br-nom { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.25rem; }
.br-desc { font-size: .86rem; color: var(--of-doux); }
.br-lecture { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--of-vert-clair); }
.br-btn[aria-pressed="true"] .br-lecture::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--of-orange); box-shadow: 0 0 8px var(--of-orange); }
.br .br-etat { margin: 1.1rem 0; text-align: center; font-size: 1rem; color: var(--of-texte); }
.br-reglages { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
@media (max-width: 820px) {
  .br-choix { grid-template-columns: 1fr; gap: .7rem; }
  .br .br-btn { display: grid; grid-template-columns: 7rem 1fr; grid-template-rows: auto auto auto; column-gap: .9rem; text-align: left; align-items: center; }
  .br-onde { grid-row: 1 / 4; height: 56px; }
  .br-reglages { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
  .br-perso .of-curseur { grid-template-columns: 12rem minmax(0, 1fr) auto; }
}

/* Réglages en plusieurs verts (demande de Christine, 03/11/2026) :
   titres vert anis, libellés vert d'eau, valeurs vert menthe, notes vert clair,
   barres des curseurs en dégradé du vert anis au vert prairie. */
.br .of-sous-titre { color: #d4f7a8; }
.br .of-curseur label, .br .of-champ { color: #e2f5e7; }
.br .of-valeur { color: #a6f0b4; }
.br .of-petit { color: #c6e3cf; }
.br input[type=range] {
  background: linear-gradient(90deg, #d4f7a8 0, #7fd19a calc(var(--pct, 50%) * .6), #3f9a62 var(--pct, 50%), rgba(255, 255, 255, .2) var(--pct, 50%));
}
.br input[type=range]::-webkit-slider-thumb { background: radial-gradient(circle at 35% 35%, #ffffff, #a6f0b4 62%); }
.br input[type=range]::-moz-range-thumb { background: radial-gradient(circle at 35% 35%, #ffffff, #a6f0b4 62%); }