/* MyHydroLab : bac à sable de conception hydraulique. Charte eau (teal). */
* { box-sizing: border-box; }
:root { --encre:#0F2E3D; --teal:#0E9594; --teal-f:#0B7574; --fond:#F1F6F8;
  --carte:#FFFFFF; --ligne:#DCE6EA; --sourd:#5C7A85; --ok:#1E7A3C; --ok-bg:#E3F4E8;
  --ko:#C0392B; --ko-bg:#FDE8E8; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; }

.barre { background: var(--encre); color: #fff; display: flex; align-items: center; gap: 16px;
  padding: 9px 18px; flex: none; }
.logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: #fff; }
.goutte { font-size: 20px; align-self: center; }
.mot { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.hydro { color: #67D0CE; }
.sous { font-size: 11.5px; color: #9FC0C9; }
.barre-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fam { font-size: 12.5px; color: #9FC0C9; }
.fam select { margin-left: 4px; padding: 5px 7px; border-radius: 7px; border: 0; font: inherit; }
.btn { background: var(--teal); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px;
  font: inherit; font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--teal-f); }
.btn-sec { background: #24485a; }
.btn-sec:hover { background: #2f5b70; }

.zone { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
.zone:has(.resultat:not([hidden])) { grid-template-columns: 1fr 360px; }
.cote { padding: 14px; overflow: auto; border-right: 1px solid var(--ligne); }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.carte h2 { margin: 0 0 8px; font-size: 14px; }
.mode { display: block; padding: 8px; border-radius: 9px; cursor: pointer; }
.mode small { color: var(--sourd); }
.mode:has(input:checked) { background: #E6F4F4; }
.sel-defi { width: 100%; margin-top: 8px; padding: 8px; border: 1.5px solid var(--ligne); border-radius: 8px; font: inherit; }
#carte-consigne p { margin: 0 0 10px; line-height: 1.5; }
#cibles { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
#cibles dt { color: var(--sourd); } #cibles dd { margin: 0; font-weight: 600; }
.astuce ol { margin: 0; padding-left: 18px; color: var(--sourd); line-height: 1.5; }
.astuce b { color: var(--encre); }

.editeur { min-width: 0; }
.editeur iframe { width: 100%; height: 100%; border: 0; display: block; }

.resultat { position: relative; padding: 16px; overflow: auto; background: var(--carte);
  border-left: 1px solid var(--ligne); }
.fermer { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 18px;
  color: var(--sourd); cursor: pointer; }
.resultat h2 { font-size: 15px; margin: 14px 0 8px; }
.resultat h2:first-child { margin-top: 0; }
.note { color: var(--sourd); font-size: 13px; margin: 0 0 10px; }
.msg-err { background: var(--ko-bg); color: var(--ko); border-radius: 9px; padding: 10px 12px; }
.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sourd); padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
.t td { padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
.t tr.mauvais td { color: var(--ko); font-weight: 700; }
.t.petit { margin-top: 8px; }
.verdict { border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.verdict.ok { background: var(--ok-bg); color: var(--ok); }
.verdict.ko { background: var(--ko-bg); color: var(--ko); }
.diag { font-size: 13px; line-height: 1.5; margin: 10px 0; }
.controles { list-style: none; margin: 10px 0; padding: 0; font-size: 13px; }
.controles li { display: flex; gap: 7px; padding: 3px 0; align-items: baseline; }
.controles li span { flex: none; font-weight: 700; }
.controles li.oui span { color: var(--ok); } .controles li.non span { color: var(--ko); }

@media (max-width: 1100px) {
  .zone, .zone:has(.resultat:not([hidden])) { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cote { border-right: 0; border-bottom: 1px solid var(--ligne); }
  .editeur { height: 70vh; }
  .resultat { border-left: 0; border-top: 1px solid var(--ligne); }
}