/* L’oreille : santé et écoute (ecoute.html) */
.ear-hero{min-height:560px}
.ear-hero .plugin-back{margin-bottom:28px}
.ear-hero-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:40px 30px;border-radius:22px;background:var(--ink);color:#fff;transform:rotate(-3deg);box-shadow:0 18px 40px #15192530}
.ear-hero-card span,.ear-hero-card strong{padding:18px 20px;border-radius:12px;background:#252b38;font:600 clamp(16px,2.4vw,26px) 'DM Mono'}
.ear-hero-card strong{background:var(--orange);color:#fff}
.ear-hero-card i{font-style:normal;font:26px 'DM Mono';color:var(--mint)}
.ear-small{font-size:13px!important;color:var(--muted)}
.ear-links{display:flex;flex-wrap:wrap;gap:4px 18px}

/* Dose sonore */
.dose-tool{--zone:#2c9d63;margin:22px 0;padding:18px;border-radius:18px;background:var(--ink);color:#fff}
.dose-tool[data-zone=watch]{--zone:#d9a520}.dose-tool[data-zone=warn]{--zone:#ff7048}.dose-tool[data-zone=danger]{--zone:#e0412b}
.dose-top{display:grid;gap:12px}
.dose-top>label{display:grid;gap:8px;font-size:13px;color:#cfd5e1}
.dose-level{font:600 22px 'DM Mono';color:#fff}
.dose-range{width:100%;accent-color:var(--zone)}
.dose-situations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.dose-situations button{display:grid;gap:2px;padding:8px 10px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font:inherit;text-align:left;cursor:pointer}
.dose-situations b{font-size:12px}
.dose-situations small{font:10px 'DM Mono';color:#8f98aa}
.dose-situations button[aria-pressed=true]{border-color:var(--zone);box-shadow:0 0 0 2px color-mix(in srgb,var(--zone) 40%,transparent)}
.dose-result{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px;padding:16px;border-radius:12px;background:#252b38}
.dose-gauge{height:10px;border-radius:5px;background:linear-gradient(90deg,#2c9d63 0 40%,#d9a520 40% 50%,#ff7048 50% 70%,#e0412b 70%);opacity:.35;position:relative}
.dose-gauge i{position:absolute;left:0;top:-3px;bottom:-3px;border-radius:6px;background:var(--zone);opacity:1;box-shadow:0 0 0 2px #151925}
.dose-result small{font:10px 'DM Mono';color:#8f98aa;letter-spacing:.06em}
.dose-time{display:block;margin:4px 0;font:600 30px 'DM Mono';color:var(--zone)}
.dose-note{margin:0;font-size:14px!important;color:#cfd5e1!important}

/* Alertes */
.alert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}
.alert-grid article{padding:16px;border-radius:12px;background:#fff1ec;border-top:4px solid var(--orange)}
.alert-grid b{display:block;margin-bottom:4px}
.alert-grid p{margin:0;font-size:13px;color:#434958}

/* Courbes d’égale sonie */
.loudness-figure{margin:18px 0;padding:16px;border-radius:18px;background:var(--ink);color:#fff}
.loudness-figure figcaption{margin-top:8px;font-size:12.5px;color:#aeb8c6}
.ld-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ld-buttons button{display:grid;padding:7px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.ld-buttons small{font:10px 'DM Mono';font-weight:400;color:#8f98aa}
.ld-buttons button[aria-pressed=true]{background:#1f2a40;border-color:#6f9bff}
.loudness-chart svg{display:block;width:100%;height:auto}
.ld-grid{stroke:#ffffff12}.ld-grid.ref{stroke:#ffffff40;stroke-dasharray:4 4}
.ld-tick{font:10px 'DM Mono',monospace;fill:#8f98aa}
.ld-axis{font:10px 'DM Mono',monospace;fill:#aab2c2}
.ld-curve{fill:none;stroke:#ffffff38;stroke-width:2}
.ld-curve.on{stroke:var(--mint);stroke-width:3.5}
.ld-label{font:10px 'DM Mono',monospace;fill:#8f98aa}.ld-label.on{fill:var(--mint);font-weight:700}
.ld-gap{stroke:var(--orange);stroke-width:2.5}
.ld-gapref{stroke:var(--orange);stroke-width:1;stroke-dasharray:3 3}
.ld-gaplabel{font:700 12px 'DM Mono',monospace;fill:#ff9a7e}
.ld-readout{margin:8px 0 0;font-size:14px!important;color:#cfd5e1!important}
.ear-mix{grid-template-columns:repeat(3,1fr)!important}

@media(max-width:900px){.dose-situations{grid-template-columns:repeat(3,minmax(0,1fr))}.alert-grid{grid-template-columns:1fr 1fr}.ear-mix{grid-template-columns:1fr!important}}
@media(max-width:700px){.ear-hero{min-height:0}.ear-hero-card{transform:none}}
