:root{--blue:#064785;--blue-dark:#043765;--teal:#064785;--light:#e6e6e6;--text:#003f7c}*{box-sizing:border-box}body{margin:0;background:#f4f4f4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text)}.phone{max-width:520px;min-height:100vh;margin:0 auto;background:white;position:relative;overflow:hidden}.screen{display:none;min-height:100vh;padding:10px 10px 96px}.screen.active{display:block}.home-screen{padding:64px 18px 120px;text-align:center}.brand{margin:auto}.brand-logo{display:block;width:78%;max-width:310px;margin:0 auto 4px;object-fit:contain}.proson-home-logo{width:62%;max-width:250px;margin-bottom:12px}.cra-home-logo{width:36%;max-width:150px;border-radius:16px;margin-bottom:24px}.tagline{font-size:20px;font-weight:600;color:#555}.home-screen h1{font-size:25px;color:var(--blue);margin:28px 0 18px}.product-card{height:140px;position:relative;margin:auto;width:250px}.box,.radiator,.belt{position:absolute;background:linear-gradient(135deg,#111,#777);box-shadow:0 15px 25px #ddd}.box{left:35px;top:46px;width:105px;height:50px;transform:skewY(8deg)}.radiator{right:48px;top:20px;width:78px;height:95px}.belt{left:98px;top:100px;width:90px;height:28px;border-radius:20px}address{font-style:normal;font-size:22px;line-height:1.25}.continue{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);min-width:170px}.topbar{height:58px;background:#e5e5e5;display:flex;align-items:center;gap:12px;padding:8px 18px;margin:-10px -10px 24px}.play{width:54px;height:54px;border:0;border-radius:0;background:transparent url("assets/play-proson.png") center/contain no-repeat;color:transparent;font-size:0;line-height:1;padding:0}.info{margin-left:auto;border:3px solid navy;color:navy;border-radius:50%;width:38px;height:38px;background:white;font:bold 26px Georgia}.top-title{font-size:18px;line-height:1.1;color:var(--text);flex:1}.centered{text-align:center}.centered h2{font-size:25px;font-weight:400;line-height:1.25;margin:20px 28px}.preset{display:block;margin:14px auto;padding:22px 10px;width:78%;background:var(--blue);color:#fff;border:0;font-size:25px}.manual{display:flex;justify-content:center;align-items:center;gap:35px;font-size:26px}.manual input{width:150px;font-size:26px;text-align:center;color:#777;border:2px solid #999;padding:6px}.next{position:absolute;right:22px;bottom:25px}.primary{background:var(--blue);color:white;border:0;padding:14px 24px;font-size:24px}.maxline{text-align:center;font-size:20px;line-height:1.2;margin:12px 4px 30px}.outputs{margin-bottom:100px}.output-head{display:flex;align-items:center;background:var(--blue);color:white;font-size:25px;padding:17px 18px;margin-top:0}.output-head button{margin-left:auto;border:0;border-radius:50%;background:white;color:var(--blue);font-size:32px;width:36px;height:36px;line-height:34px;font-weight:bold}.row{display:grid;grid-template-columns:1fr 130px 42px;align-items:center;gap:12px;padding:9px 0 9px 12px;border-bottom:1px solid #ddd;font-size:25px}.row input{width:100%;border:1px solid #ddd;border-radius:8px;padding:7px 10px;text-align:right;font-size:25px;font-weight:bold;color:var(--blue)}.del{border:0;background:#ed1717;color:white;border-radius:50%;width:32px;height:32px;font-size:22px;font-weight:bold}.bottom-nav{position:absolute;bottom:18px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none}.bottom-nav button{pointer-events:auto}.switch-row{grid-template-columns:1fr 75px 58px}.switches{display:grid;gap:4px}.sw{display:flex;align-items:center;gap:6px}.dial{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#ffff85 0 45%,#222 47% 55%,#ffff85 57%);border:2px solid #333}.num{display:inline-block;background:var(--blue);color:#fff;font-weight:bold;text-align:center;font-size:28px;width:43px;padding:4px}.meters{font-size:22px;color:#000}.tabs{display:flex;justify-content:space-between;padding:20px}.tabs button{background:var(--blue);color:#fff;border:0;font-size:28px;padding:16px 50px}dialog{border:0;max-width:520px;width:100%;height:100%;padding:10px;background:white;color:#000}dialog::backdrop{background:rgba(0,0,0,.25)}.helptext{font-size:22px;line-height:1.25}.close{float:right;margin:10px}hr{border:0;border-top:2px solid #bbb;margin:38px 0}.hidden{display:none}
@media(min-width:700px){body{padding:20px}.phone,dialog{box-shadow:0 0 20px #ccc;border-radius:18px;min-height:860px}.screen{min-height:860px}}

@media(max-height:760px){.home-screen{padding-top:28px}.proson-home-logo{width:52%;max-width:210px}.cra-home-logo{width:30%;max-width:125px;margin-bottom:14px}.product-card{height:100px;transform:scale(.8)}address{font-size:18px}.home-screen h1{font-size:22px;margin:16px 0 10px}.continue{bottom:24px}}
.cum-note{font-size:16px;line-height:1.2;margin:8px 10px 8px;color:#444;font-weight:600}.row.invalid input{border:2px solid #d30000;background:#fff2f2;color:#b00000}.error-message{margin:0 10px 10px 12px;padding:9px 10px;border-left:5px solid #d30000;background:#fff2f2;color:#b00000;font-size:17px;line-height:1.25}.primary.disabled,.primary:disabled{opacity:.45;cursor:not-allowed}

/* v12 - harmonie couleurs PROSON */
.primary,.preset,.tabs button{background:var(--blue)!important;color:#fff!important;border:0}
.primary:hover,.preset:hover,.tabs button:hover{background:var(--blue-dark)!important}
.primary:focus-visible,.preset:focus-visible,.tabs button:focus-visible{outline:3px solid rgba(6,71,133,.28);outline-offset:2px}
.global-note{font-size:16px;line-height:1.2;margin:-20px 10px 18px;color:#444;font-weight:600;text-align:center}

/* v13 - boutons de commande arrondis */
.primary,
.preset,
.tabs button,
.continue,
.next,
.close,
.bottom-nav button {
  border-radius: 14px !important;
}
.output-head button,
.del,
.play,
.info {
  border-radius: 50% !important;
}
button {
  -webkit-tap-highlight-color: transparent;
}

/* v14 - choix de langue par drapeaux */
.language-select{display:flex;justify-content:center;gap:18px;margin:10px 0 20px}
.flag-btn,.flag-small{border:2px solid transparent;background:#fff;border-radius:14px;cursor:pointer;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.flag-btn{font-size:38px;padding:9px 14px}
.flag-small{font-size:23px;padding:5px 7px}
.flag-btn.active,.flag-small.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,71,133,.16)}
.lang-mini{display:flex;gap:6px;margin-left:auto;align-items:center}
.lang-mini + .info{margin-left:0}
@media(max-width:420px){.flag-btn{font-size:34px}.flag-small{font-size:20px;padding:4px 6px}.topbar{gap:8px;padding-left:12px;padding-right:12px}.top-title{font-size:15px}}

/* v15 - 5 langues */
.language-select{flex-wrap:wrap;max-width:360px;margin-left:auto;margin-right:auto}
.lang-mini{gap:2px}
.flag-small{font-size:19px;padding:4px 5px;border-radius:10px}
@media(max-width:420px){.flag-small{font-size:17px;padding:3px 4px}.topbar{gap:5px}.play{width:46px;height:46px}.info{width:34px;height:34px;font-size:22px}}

/* v16 - drapeaux sur une seule ligne */
.language-select{
  flex-wrap:nowrap !important;
  max-width:none !important;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
}
.language-select::-webkit-scrollbar{display:none}
.lang-mini{
  flex-wrap:nowrap !important;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:190px;
  scrollbar-width:none;
}
.lang-mini::-webkit-scrollbar{display:none}
@media(max-width:420px){
  .language-select{gap:8px !important; justify-content:center;}
  .flag-btn{font-size:30px !important; padding:7px 8px !important; border-radius:12px !important;}
  .lang-mini{max-width:165px; gap:1px !important;}
  .flag-small{font-size:15px !important; padding:3px 3px !important; border-radius:8px !important;}
}