/* Sonomètre et feu tricolore : même vert que le reste du site */
#features.son-section { padding-top: 1em; }
.son-section [hidden] { display: none !important; }

.son-scene {
	max-width: 60em; margin: 0 auto; padding: 2em 1.5em 1.6em; text-align: center; background: #fff;
	border: 2px solid #e5e5e5; border-radius: 1.2em; transition: background-color .5s ease, border-color .5s ease;
}
.son-scene[data-etat="vert"] { background: #f3fbf7; border-color: #9bd8bd; }
.son-scene[data-etat="orange"] { background: #fff8ee; border-color: #f3c27b; }
.son-scene[data-etat="rouge"] { background: #fff1ef; border-color: #ee9a90; }

.son-feu { display: flex; justify-content: center; gap: clamp(.8em, 3vw, 2em); margin: 0 0 1.2em 0; }
.son-lampe {
	display: block; width: clamp(5.5em, 17vw, 10em); height: clamp(5.5em, 17vw, 10em); border-radius: 50%;
	background: #e8e8e8; box-shadow: inset 0 .25em .6em rgba(0,0,0,.15); transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.son-scene[data-etat="vert"] .son-lampe.vert { background: #2fbf7a; box-shadow: 0 0 2.4em rgba(47,191,122,.6), inset 0 -.4em .6em rgba(0,0,0,.12); }
.son-scene[data-etat="orange"] .son-lampe.orange { background: #f5a524; box-shadow: 0 0 2.4em rgba(245,165,36,.6), inset 0 -.4em .6em rgba(0,0,0,.12); }
.son-scene[data-etat="rouge"] .son-lampe.rouge { background: #e5483a; box-shadow: 0 0 2.6em rgba(229,72,58,.65), inset 0 -.4em .6em rgba(0,0,0,.12); animation: son-pulse .9s ease-in-out infinite; }
@keyframes son-pulse { 50% { transform: scale(1.06); } }

.son-message { margin: 0 0 1.2em 0; min-height: 1.6em; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; font-size: clamp(1.3em, 3.6vw, 2.2em); color: #444; }
.son-scene[data-etat="vert"] .son-message { color: #16855a; }
.son-scene[data-etat="orange"] .son-message { color: #b8710a; }
.son-scene[data-etat="rouge"] .son-message { color: #c0382b; }

.son-jauge { position: relative; max-width: 40em; height: 1.5em; margin: 0 auto 1.2em auto; border-radius: 1em; overflow: hidden; background: #eee; }
.son-jauge-zones { position: absolute; inset: 0; display: flex; opacity: .28; }
.son-jauge-zones span { display: block; height: 100%; }
.son-jauge-zones .z-vert { background: #2fbf7a; } .son-jauge-zones .z-orange { background: #f5a524; } .son-jauge-zones .z-rouge { background: #e5483a; }
.son-jauge-niveau { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #444; border-radius: 1em; transition: width .08s linear; }
.son-scene[data-etat="vert"] .son-jauge-niveau { background: #2fbf7a; } .son-scene[data-etat="orange"] .son-jauge-niveau { background: #f5a524; } .son-scene[data-etat="rouge"] .son-jauge-niveau { background: #e5483a; }
.son-jauge-seuil { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #222; border-radius: 2px; }

.son-compteur { margin: 0 0 1em 0; color: #878787; font-size: .95em; }
.son-compteur strong { color: #16855a; font-size: 1.2em; }
.son-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; }
.son-actions .button { margin: 0; width: auto !important; }
.son-erreur { min-height: 1.4em; margin: .8em 0 0 0; color: #c0382b; font-size: .9em; font-weight: 700; }

.son-reglages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 2em; max-width: 60em; margin: 1.2em auto 0 auto; padding: 1.2em 1.4em; border: 2px solid #e5e5e5; border-radius: 1.2em; background: #fff; text-align: left; }
.son-champ { display: grid; grid-template-columns: 1fr auto; gap: .3em .8em; align-items: center; }
.son-champ label { font-size: .85em; color: #878787; grid-column: 1 / -1; }
.son-champ input[type="range"] { -webkit-appearance: auto; appearance: auto; width: 100%; height: 1.8em; padding: 0; border: 0; background: transparent; accent-color: #16855a; cursor: pointer; }
.son-valeur { min-width: 2.2em; text-align: right; font-weight: 700; color: #16855a; }
.son-bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6em 1em; align-items: center; }
.son-mini {
	font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-shadow: none; width: auto !important;
	border: 2px solid #5cc79a; color: #16855a !important; background: #fff !important; padding: .4em 1em; border-radius: 2em; font-size: .85em; letter-spacing: 0; text-transform: none; transition: background-color .25s, color .25s;
}
.son-mini:hover:not([disabled]) { background: #16855a !important; color: #fff !important; }
.son-mini[disabled] { opacity: .45; cursor: default; }
.son-case { display: inline-block !important; grid-column: auto !important; font-size: .85em !important; color: #666 !important; cursor: pointer; margin: 0 !important; }
.son-case input { appearance: auto; -webkit-appearance: checkbox; opacity: 1; position: static; width: auto; margin-right: .4em; }
.son-textes { max-width: 60em; margin: 1.2em auto 0 auto; padding: 1.2em 1.4em; border: 2px solid #e5e5e5; border-radius: 1.2em; background: #fff; text-align: left; }
.son-textes-titre { text-align: left; margin: 0 0 .8em 0; font-size: .85em; color: #878787; }
.son-texte { display: grid; grid-template-columns: auto 4.5em minmax(0, 1fr); gap: .6em; align-items: center; margin-bottom: .6em; }
.son-texte label { font-size: .9em; color: #666; margin: 0; }
.son-texte input[type="text"] { width: 100%; font: inherit; padding: .45em .7em; border: 2px solid #e5e5e5; border-radius: .6em; background: #fff; color: #555; box-sizing: border-box; }
.son-texte input[type="text"]:focus { outline: none; border-color: #16855a; }
.son-pastille { width: 1.1em; height: 1.1em; border-radius: 50%; display: inline-block; }
.son-pastille.vert { background: #2fbf7a; } .son-pastille.orange { background: #f5a524; } .son-pastille.rouge { background: #e5483a; }
.son-textes .son-mini { margin-top: .4em; }
.son-aide, .son-rgpd { max-width: 46em; margin: 1.2em auto 0 auto; font-size: .85em; color: #878787; text-align: center; }
.son-rgpd { font-size: .8em; margin-top: .6em; }

/* Plein écran */
.son-scene:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; border: 0; border-radius: 0; padding: 2em; }
.son-scene:fullscreen .son-lampe { width: min(24vw, 34vh); height: min(24vw, 34vh); }
.son-scene:fullscreen .son-message { font-size: clamp(2em, 6vw, 4.5em); }
.son-scene:fullscreen .son-jauge { width: 80%; max-width: none; height: 2.2em; }

@media screen and (max-width: 736px) {
	.son-reglages { grid-template-columns: minmax(0, 1fr); }
	.son-scene { padding: 1.5em 1em; }
}
@media (prefers-reduced-motion: reduce) { .son-lampe, .son-scene { transition: none; animation: none !important; } }