*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Arial,sans-serif;color:#20252d;background:#eef0f2}.app-shell{position:relative;width:100%;max-width:680px;height:100vh;margin:0 auto;padding:4.5vh 6vw 2.5vh;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;overflow:hidden}.top-stripe{position:absolute;top:0;left:0;right:0;height:12px;background:#e43d34}.header{height:9%;min-height:62px;position:relative;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;flex-shrink:0}.header h1{margin:0;text-align:center;white-space:nowrap;font-size:36px;font-weight:800}.header em{color:#d7443c;font-style:normal}.icon-button{display:block!important;position:absolute;left:0;top:50%;width:42px;height:36px;padding:0;border:0;background:transparent;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:20}.icon-button span{display:block!important;width:38px;height:6px;margin:0 0 6px;background:#ae171d}.selector-panel{height:38%;min-height:285px;padding:2.2vh 12px;background:#f8f9fa;border:1px solid #dfe2e6;border-radius:14px;box-shadow:0 2px 4px rgba(0,0,0,.05);-webkit-flex-shrink:0;flex-shrink:0}.period{text-align:center;font-size:27px;font-weight:800;color:#04be58;white-space:nowrap}.period.outside{color:#d51f2b}.period.unknown{color:#747b85}.period-rule{width:72%;height:5px;margin:1.1vh auto 2vh;background:#050505}.types{height:calc(100% - 58px);display:-webkit-flex;display:flex}.type-card{height:100%;min-width:0;margin:0 6px;padding:8px;border:4px solid transparent;border-radius:22px;background:#fff0ef;display:-webkit-flex;display:flex;-webkit-flex:1 1 0;flex:1 1 0;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.type-card.selected{border-color:#ad1e24}.type-card strong{margin-top:2vh;font-size:25px;font-weight:500;white-space:nowrap}.bulb,.drop{display:block;width:80px!important;height:110px!important;-webkit-flex:none;flex:none}.bulb-glow{fill:#ffd45b;stroke:#111;stroke-width:6}.bulb-line{fill:none;stroke:#e6a900;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.bulb-base{fill:#aeb3b7;stroke:#111;stroke-width:5}.drop{fill:#67c5ed}.reading-panel{height:34%;min-height:300px;padding:2vh 5.5vw;background:#fff0ef;border:1px solid #e6aaa6;border-radius:14px;box-shadow:0 2px 4px rgba(0,0,0,.05);-webkit-flex-shrink:0;flex-shrink:0}.client-name{height:22%;min-height:48px;padding:1.2vh 8px;margin-bottom:2.3vh;overflow:hidden;background:#ffe0ab;text-align:center;font-size:25px;line-height:1.15;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.reading-panel label{display:block;margin:0 8px 1vh;color:#ad1e24;font-size:21px;font-weight:800}.reading-panel input{display:block;width:100%;height:25%;min-height:56px;padding:8px;border:1px solid #d6aaa7;border-radius:12px;background:#fff;text-align:center;font-size:26px;font-weight:700;outline:none}.reading-panel input:focus{border:2px solid #e83d34}.primary{border:0;border-radius:11px;background:#e83d34;color:#fff;font-weight:800;box-shadow:0 8px 12px rgba(156,31,36,.2)}#submitButton{width:100%;height:25%;min-height:56px;margin-top:2.2vh;font-size:26px}button.primary:disabled{background:#aeb3b7!important;color:#eef0f2;box-shadow:none;cursor:not-allowed;opacity:1}.status{min-height:17px;margin:.7vh 0 0;text-align:center;font-size:13px;font-weight:700}.status.error{color:#bd1e26}.status.success{color:#07853f}footer{height:5%;min-height:35px;border-top:1px solid #eee;color:#9ca3ae;font-size:15px;font-weight:800;display:-webkit-flex;display:flex;-webkit-align-items:flex-end;align-items:flex-end;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;flex-shrink:0}footer a{color:inherit;text-decoration:none}footer a:hover,footer a:focus{color:#ad1e24;text-decoration:underline}.modal{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:100;padding:18px;background:rgba(0,0,0,.65);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.modal[hidden]{display:none}.dialog{width:100%;max-width:500px;max-height:94vh;padding:24px;overflow:auto;background:#fff;border-radius:20px}.dialog-head,.dialog-actions{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}.dialog h2{margin:0}.close{border:0;background:none;font-size:34px}.hint{color:#667085;font-size:14px}fieldset{margin:18px 0;padding:14px;border:1px solid #ddd;border-radius:12px}legend,fieldset label{font-weight:800}fieldset label{display:block;margin:8px 0;font-size:14px}fieldset input{display:block;width:100%;margin-top:5px;padding:12px;border:1px solid #bbb;border-radius:8px;font-size:17px}.dialog-actions{gap:12px}.dialog-actions button{width:50%;padding:14px;border:0;border-radius:10px;font-weight:800}.secondary{background:#e8e9eb}.dialog button.primary.small{margin:0;padding:14px;font-size:16px}.confirm{text-align:center}.warning{width:50px;height:50px;margin:0 auto 12px;border-radius:50%;background:#fff0d0;color:#be7610;font-size:30px;font-weight:900;line-height:50px}
@media(max-width:520px){.app-shell{padding-left:4.5vw;padding-right:4.5vw}.header h1{font-size:27px}.icon-button{width:35px}.icon-button span{width:34px;height:5px;margin-bottom:5px}.period{font-size:21px}.type-card strong{font-size:18px}.bulb,.drop{width:65px!important;height:90px!important}.reading-panel{padding-left:4.5vw;padding-right:4.5vw}.client-name{font-size:20px}.reading-panel label{font-size:17px}#submitButton{font-size:20px}}
@media(max-height:760px) and (orientation:portrait){.app-shell{padding-top:3.2vh}.header{min-height:45px}.header h1{font-size:25px}.selector-panel{min-height:230px}.reading-panel{min-height:245px}.period{font-size:19px}.type-card strong{margin-top:1vh;font-size:17px}.bulb,.drop{width:58px!important;height:78px!important}.client-name{font-size:18px;margin-bottom:1vh}.reading-panel label{font-size:16px}#submitButton{margin-top:1vh;font-size:19px}.status{font-size:11px}}
/* Ordinateur et tablette en paysage */
@media(min-width:700px) and (orientation:landscape), (min-width:1000px){.app-shell{max-width:none;padding:3vh 4vw 2vh;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:space-between;align-content:space-between}.header{width:100%;height:12%;min-height:54px}.header h1{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:42px}.header .icon-button{left:0;display:block!important}.selector-panel,.reading-panel{height:70%;min-height:0;-webkit-align-self:center;align-self:center}.selector-panel{width:47%;padding:3vh 12px}.reading-panel{width:47%;padding:3vh 3vw}.period{font-size:27px}.period-rule{margin-bottom:3vh}.types{height:calc(100% - 65px)}.type-card strong{font-size:25px}.bulb,.drop{width:86px!important;height:118px!important}.client-name{font-size:27px;margin-bottom:4vh}.reading-panel label{font-size:23px}.reading-panel input{height:24%}#submitButton{height:24%;font-size:28px;margin-top:4vh}footer{width:100%;height:7%;min-height:28px}}
@media(min-width:700px) and (orientation:landscape) and (max-height:650px){.app-shell{padding-top:2vh}.header h1{font-size:30px}.selector-panel,.reading-panel{height:72%;padding-top:2vh;padding-bottom:2vh}.period{font-size:20px}.period-rule{margin:.8vh auto 1.5vh}.types{height:calc(100% - 42px)}.type-card strong{margin-top:1vh;font-size:18px}.bulb,.drop{width:58px!important;height:78px!important}.client-name{font-size:19px;margin-bottom:1.5vh}.reading-panel label{font-size:17px}.reading-panel input{min-height:43px}#submitButton{min-height:43px;margin-top:1.5vh;font-size:20px}.status{font-size:11px}}