:root{
  --red:#dc2f34;
  --blue:#59bdd8;
  --dark:#1b1b1b;
  --light:#f2f2f2;
  --muted:#9a9a9a;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#fff;
  color:var(--dark);
}
.app{
  max-width:430px;
  min-height:100vh;
  margin:auto;
  background:#fff;
  position:relative;
  overflow:hidden;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
}
.logo{
  font-weight:900;
  letter-spacing:1px;
  font-size:42px;
  color:#ef4b50;
  text-align:center;
  line-height:1;
}
.logo span{
  display:inline-block;
  width:58px;
  height:58px;
  border:8px solid #ef4b50;
  background:#65c5df;
  border-radius:50%;
  vertical-align:middle;
  margin:0 -3px;
}
.logo small{
  display:block;
  font-size:15px;
  letter-spacing:5px;
  margin-left:150px;
  margin-top:-5px;
}
.header{
  background:var(--red);
  color:white;
  padding:28px 28px 34px;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  position:relative;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.back,.menu-btn,.icon-btn{
  border:0;
  background:transparent;
  color:inherit;
  font-size:30px;
  width:auto;
  padding:5px;
  cursor:pointer;
}
.header .logo{
  background:white;
  border-radius:6px;
  padding:5px 12px;
  font-size:28px;
}
.header .logo span{
  width:38px;height:38px;border-width:5px;
}
.header .logo small{
  display:none;
}
.title{
  font-size:36px;
  font-weight:900;
  text-shadow:0 3px 2px rgba(0,0,0,.25);
  margin:26px 0 0;
  text-transform:uppercase;
}
.center{ text-align:center }
.screen{ padding:24px; }
.login-top{
  min-height:380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.login-top h1{
  color:var(--red);
  font-size:38px;
  margin:30px 0 4px;
}
.login-top p{
  color:#a44444;
  font-size:25px;
  margin:0;
}
.login-card{
  background:var(--blue);
  border-radius:16px;
  padding:30px 32px;
  margin:0 32px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
input,select,textarea{
  width:100%;
  padding:15px 18px;
  border-radius:24px;
  border:2px solid transparent;
  margin:10px 0;
  font-size:16px;
  background:white;
  outline:none;
}
textarea{border-radius:16px;min-height:88px}
.form-red input,.form-red select,.form-red textarea{
  border-color:#df575b;
  border-radius:0;
  text-align:center;
}
button.primary{
  background:#ef4b50;
  color:#fff;
  border:0;
  border-radius:24px;
  padding:15px 18px;
  font-size:19px;
  font-weight:800;
  width:100%;
  cursor:pointer;
  margin-top:14px;
}
button.secondary{
  background:var(--blue);
  color:white;
  border:0;
  border-radius:24px;
  padding:14px;
  font-weight:800;
  cursor:pointer;
}
.link-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin:4px 0 10px;
}
a,.link{
  color:#267e99;
  cursor:pointer;
  text-decoration:underline;
}
.footer-red{
  background:#f83a31;
  height:150px;
  margin-top:-65px;
}
.dashboard-top{
  padding:22px 22px 0;
}
.dash-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.company{
  font-weight:900;
  color:#cc3438;
  text-transform:uppercase;
  font-size:16px;
}
.small-icon{
  width:36px;height:36px;border:0;background:white;font-size:28px;color:#c11;cursor:pointer;
}
.search{
  display:flex;
  gap:8px;
  align-items:center;
  padding:14px 70px 8px 70px;
}
.search input{
  margin:0;
  color:#777;
}
.progress{
  margin:10px auto 20px;
  width:150px;
  height:82px;
  border-radius:150px 150px 0 0;
  border:22px solid #5fc4de;
  border-bottom:0;
  position:relative;
}
.progress:before{
  content:"";
  position:absolute;
  left:-22px;
  top:-22px;
  width:72px;
  height:72px;
  border-radius:100% 0 0 0;
  border-top:22px solid #ef4b50;
  transform:rotate(-10deg);
}
.progress span{
  position:absolute;
  left:0;right:0;
  bottom:-34px;
  text-align:center;
  font-weight:900;
  font-size:22px;
}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 30px;
  padding:15px 45px 35px;
}
.module{
  border:0;
  background:white;
  cursor:pointer;
  text-align:center;
  font-weight:900;
  font-size:14px;
}
.module .emoji{
  font-size:54px;
  height:75px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.form-page{
  padding:22px 42px;
}
.page-logo{
  font-size:32px;
  text-align:left;
  margin-bottom:35px;
}
.page-logo span{width:45px;height:45px;border-width:6px}
.page-logo small{display:none}
.form-title{
  text-align:center;
  font-size:23px;
  text-decoration:underline;
  font-weight:900;
  margin:18px 0;
  text-transform:uppercase;
}
.big-emoji{
  text-align:center;
  font-size:74px;
  margin:8px 0 16px;
}
.reminder{
  margin-top:55px;
  text-align:center;
  line-height:1.45;
}
.reminder b{color:#b72a2e}
.list{
  padding:20px;
}
.record{
  background:#fff;
  border:1px solid #eee;
  border-left:6px solid var(--red);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.record small{color:#777}
.actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.actions button{
  flex:1;
  border:0;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
}
.danger{background:#f05b5b;color:white}
.ok{background:#59bdd8;color:white}
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:#111;
  color:white;
  padding:12px 18px;
  border-radius:999px;
  font-size:14px;
  z-index:99;
}
.hidden{display:none}
@media (min-width:700px){
  body{background:#eaeaea}
  .app{box-shadow:0 0 24px rgba(0,0,0,.12)}
}


/* v13 DESIGN PRO ACTIF + ALERTES + IMPRESSION */
body{
  background: radial-gradient(circle at top, #ffffff 0%, #f1f6f8 42%, #e8eef2 100%);
}
.app{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%);
}
.header{
  background:linear-gradient(135deg,#d92830,#ff684d)!important;
  box-shadow:0 12px 30px rgba(217,40,48,.25);
}
.card,.record{
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 24px rgba(20,35,45,.10)!important;
}
.screen input,.form-page input,.form-page textarea{
  transition:.18s ease;
  border-radius:16px!important;
  border:2px solid #e6eef2!important;
  background:#fff!important;
  text-align:left!important;
}
.screen input:focus,.form-page input:focus,.form-page textarea:focus{
  border-color:#59bdd8!important;
  box-shadow:0 0 0 4px rgba(89,189,216,.18);
  transform:translateY(-1px);
}
.alert{
  margin:12px 0;
  padding:13px 14px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.alert.neutral{background:#f1f1f1;color:#444;border-left:6px solid #aaa}
.alert.good,.mini-alert.good{background:#e9f9ef;color:#107a37;border-left:6px solid #22a652}
.alert.warning,.mini-alert.warning{background:#fff6df;color:#956100;border-left:6px solid #f2b705}
.alert.bad,.mini-alert.bad{background:#ffe9e9;color:#b71818;border-left:6px solid #e53935}
.mini-alert{
  margin-top:8px;
  padding:9px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:12px;
}
.photo-box{
  display:block;
  background:linear-gradient(135deg,#dc2f34,#f36b4f);
  color:white;
  text-align:center;
  font-weight:900;
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow:0 8px 18px rgba(220,47,52,.22);
}
.photo-box input{display:none}
#photoPreview img{box-shadow:0 6px 18px rgba(0,0,0,.12)}
.print-btn{
  width:100%;
  margin-top:10px;
  border:0;
  border-radius:18px;
  padding:14px;
  color:#111;
  background:linear-gradient(135deg,#ffe45e,#ffbd2e);
  font-size:17px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(255,189,46,.28);
  cursor:pointer;
}
.print-small{
  background:#ffd247!important;
  color:#111!important;
  font-weight:900;
}
.module{
  border-radius:22px!important;
  padding:12px 6px!important;
  transition:.16s ease;
  box-shadow:0 8px 18px rgba(20,35,45,.08);
}
.module:active{transform:scale(.96)}
button.primary{
  background:linear-gradient(135deg,#dc2f34,#ff5a42)!important;
  box-shadow:0 8px 18px rgba(220,47,52,.22);
}
button.secondary{
  background:linear-gradient(135deg,#59bdd8,#36a6c5)!important;
}


/* v14 MODERN DESIGN + ALERTES TEMPÉRATURE HACCP */
:root{
  --brand-red:#e72f38;
  --brand-blue:#28a9d6;
  --ok:#0fa958;
  --bad:#e11d2e;
  --card:#ffffff;
}
.app{
  background:
    radial-gradient(circle at 20% 0%, rgba(40,169,214,.18), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(231,47,56,.13), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f5f9fb 100%)!important;
}
.header{
  background:linear-gradient(135deg,#c91822 0%,#ff4d42 52%,#ff7a4f 100%)!important;
  border-bottom-left-radius:28px!important;
  border-bottom-right-radius:28px!important;
}
.title{
  letter-spacing:.5px;
}
.logo{
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.10));
}
.grid{
  gap:18px!important;
  padding:15px 28px 35px!important;
}
.module{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9)!important;
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.module .emoji{
  background:linear-gradient(135deg,#fff,#f0fbff);
  border-radius:22px;
  width:74px;
  height:74px!important;
  margin:auto;
  box-shadow:inset 0 0 0 1px rgba(40,169,214,.12);
}
.form-page{
  padding:22px 26px!important;
}
.form-title{
  background:linear-gradient(135deg,#111,#444);
  color:#fff;
  text-decoration:none!important;
  border-radius:18px;
  padding:13px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.big-emoji{
  background:#fff;
  border-radius:24px;
  width:110px;
  margin:12px auto 18px!important;
  box-shadow:0 10px 24px rgba(20,35,45,.10);
}
.alert{
  border:0!important;
  border-radius:20px!important;
  padding:15px!important;
}
.alert.good{
  background:linear-gradient(135deg,#e8fff2,#c9f7dc)!important;
  color:#066b35!important;
  box-shadow:0 10px 22px rgba(15,169,88,.18)!important;
}
.alert.bad{
  background:linear-gradient(135deg,#ffe8ea,#ffd0d5)!important;
  color:#a30f1a!important;
  box-shadow:0 10px 22px rgba(225,29,46,.18)!important;
}
.temp-line{
  padding:10px;
  border-radius:14px;
  margin:6px 0;
  font-weight:900;
}
.temp-line.good{background:rgba(15,169,88,.12);color:#066b35}
.temp-line.bad{background:rgba(225,29,46,.12);color:#a30f1a}
button.primary,.print-btn,button.secondary{
  transition:.15s ease;
}
button.primary:active,.print-btn:active,button.secondary:active{
  transform:scale(.97);
}
.record{
  border-radius:20px!important;
  background:rgba(255,255,255,.95)!important;
}
.mini-alert.good{
  background:linear-gradient(135deg,#e8fff2,#c9f7dc)!important;
  color:#066b35!important;
}
.mini-alert.bad{
  background:linear-gradient(135deg,#ffe8ea,#ffd0d5)!important;
  color:#a30f1a!important;
}


/* v15 - DESIGN MODERNE + ALERTES POSITIF/NÉGATIF */
.app{
  background:
    radial-gradient(circle at 10% 4%, rgba(0,207,255,.22), transparent 28%),
    radial-gradient(circle at 95% 8%, rgba(255,75,66,.20), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f3f8fb 52%,#eef5f8 100%)!important;
}
.header{
  background:
    linear-gradient(135deg,#b71321 0%,#ef3340 48%,#ff7a45 100%)!important;
  box-shadow:0 18px 38px rgba(183,19,33,.28)!important;
  border-bottom-left-radius:34px!important;
  border-bottom-right-radius:34px!important;
}
.form-page{
  padding:22px!important;
}
.form-title{
  background:
    linear-gradient(135deg,#101828 0%,#202b3f 100%)!important;
  color:white!important;
  text-decoration:none!important;
  border-radius:22px!important;
  padding:16px!important;
  box-shadow:0 14px 30px rgba(16,24,40,.22)!important;
}
.big-emoji{
  width:118px!important;
  height:118px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ffffff,#effbff)!important;
  border-radius:32px!important;
  box-shadow:0 16px 32px rgba(18,38,63,.14)!important;
}
.modern-select,
.form-page input,
.form-page textarea{
  border-radius:18px!important;
  border:2px solid rgba(40,169,214,.18)!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 8px 18px rgba(18,38,63,.06)!important;
  font-weight:700;
}
.modern-select{
  width:100%;
  padding:15px 18px;
  margin:10px 0;
  font-size:16px;
  color:#1d2939;
  outline:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #ef3340 50%),
    linear-gradient(135deg, #ef3340 50%, transparent 50%)!important;
  background-position:
    calc(100% - 22px) calc(1em + 8px),
    calc(100% - 15px) calc(1em + 8px)!important;
  background-size:7px 7px,7px 7px!important;
  background-repeat:no-repeat!important;
}
.form-page input:focus,
.form-page textarea:focus,
.modern-select:focus{
  border-color:#18a8d8!important;
  box-shadow:0 0 0 5px rgba(24,168,216,.18), 0 10px 22px rgba(18,38,63,.10)!important;
}
.temp-alert{
  padding:10px!important;
  border-radius:24px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.temp-card{
  display:flex;
  gap:13px;
  align-items:flex-start;
  border-radius:22px;
  padding:15px;
  margin:10px 0;
  box-shadow:0 14px 30px rgba(18,38,63,.12);
}
.temp-card.good{
  background:linear-gradient(135deg,#dcffeb 0%,#bdf5d4 100%);
  color:#065f33;
  border:2px solid rgba(15,169,88,.25);
}
.temp-card.bad{
  background:linear-gradient(135deg,#ffe1e5 0%,#ffc3ca 100%);
  color:#96121e;
  border:2px solid rgba(225,29,46,.25);
}
.temp-icon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.temp-title{
  font-size:16px;
  font-weight:1000;
  margin-bottom:4px;
}
.temp-message{
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
.alert.good{
  background:linear-gradient(135deg,#dcffeb,#bdf5d4)!important;
  color:#065f33!important;
}
.alert.bad{
  background:linear-gradient(135deg,#ffe1e5,#ffc3ca)!important;
  color:#96121e!important;
}
button.primary{
  border-radius:20px!important;
  padding:16px!important;
  background:linear-gradient(135deg,#ef3340,#ff7048)!important;
  box-shadow:0 14px 26px rgba(239,51,64,.26)!important;
  letter-spacing:.3px;
}
button.secondary{
  border-radius:20px!important;
  background:linear-gradient(135deg,#28a9d6,#1d8fb8)!important;
}
.print-btn{
  border-radius:20px!important;
  background:linear-gradient(135deg,#ffd84d,#ffb52e)!important;
  box-shadow:0 14px 26px rgba(255,181,46,.24)!important;
}
.record{
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.8)!important;
  box-shadow:0 14px 30px rgba(18,38,63,.10)!important;
}
.mini-alert.good{
  background:linear-gradient(135deg,#dcffeb,#bdf5d4)!important;
  color:#065f33!important;
  border-left:0!important;
  border-radius:16px!important;
}
.mini-alert.bad{
  background:linear-gradient(135deg,#ffe1e5,#ffc3ca)!important;
  color:#96121e!important;
  border-left:0!important;
  border-radius:16px!important;
}


/* v16 - Hover/touch couleurs + messages dates */
.field-wrap{
  margin:10px 0 14px;
}
.field-wrap input,
.field-wrap select{
  margin-bottom:4px!important;
}
.field-help{
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  color:#526070;
  background:rgba(40,169,214,.08);
  border-left:4px solid #28a9d6;
  padding:8px 10px;
  border-radius:10px;
  margin-top:4px;
}
.date-info-card{
  background:linear-gradient(135deg,#eef9ff,#dff4ff);
  border:1px solid rgba(40,169,214,.22);
  color:#155d75;
  border-radius:18px;
  padding:13px 14px;
  margin:12px 0;
  font-size:13px;
  font-weight:850;
  box-shadow:0 8px 20px rgba(40,169,214,.12);
}

/* Hover desktop + active mobile */
.module:hover{
  background:linear-gradient(135deg,#ffffff,#e9f9ff)!important;
  box-shadow:0 16px 34px rgba(40,169,214,.22)!important;
  transform:translateY(-4px);
  color:#0b7194!important;
}
.module:hover .emoji{
  background:linear-gradient(135deg,#28a9d6,#78ddff)!important;
  color:white!important;
  transform:scale(1.06) rotate(-2deg);
}
.module:active{
  background:linear-gradient(135deg,#ffe9ea,#ffffff)!important;
  box-shadow:0 10px 22px rgba(231,47,56,.24)!important;
  transform:scale(.96)!important;
}
button.primary:hover{
  background:linear-gradient(135deg,#b90f1c,#ff493d)!important;
  box-shadow:0 18px 34px rgba(239,51,64,.35)!important;
  transform:translateY(-2px);
}
button.primary:active{
  background:linear-gradient(135deg,#8f0d16,#e72f38)!important;
  transform:scale(.97)!important;
}
button.secondary:hover{
  background:linear-gradient(135deg,#117ea4,#38c6f0)!important;
  box-shadow:0 16px 30px rgba(40,169,214,.30)!important;
  transform:translateY(-2px);
}
button.secondary:active{
  background:linear-gradient(135deg,#0b6786,#28a9d6)!important;
  transform:scale(.97)!important;
}
.print-btn:hover,.print-small:hover{
  background:linear-gradient(135deg,#ffb000,#ffe063)!important;
  box-shadow:0 16px 30px rgba(255,181,46,.35)!important;
  transform:translateY(-2px);
}
.print-btn:active,.print-small:active{
  background:linear-gradient(135deg,#e89900,#ffc43b)!important;
  transform:scale(.97)!important;
}
.back:hover,.menu-btn:hover,.small-icon:hover,.icon-btn:hover{
  color:#ffe45e!important;
  transform:scale(1.08);
}
.record:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(18,38,63,.16)!important;
}

/* Design plus graphique */
.dashboard-top{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.65));
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  margin-bottom:8px;
}
.progress{
  position:relative;
  filter:drop-shadow(0 10px 18px rgba(40,169,214,.22));
}
.progress:after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  background:#ef3340;
  border:4px solid #fff;
  border-radius:50%;
  right:12px;
  top:-25px;
  box-shadow:0 5px 10px rgba(239,51,64,.28);
}
.form-page:before{
  content:"";
  display:block;
  height:6px;
  width:90px;
  margin:0 auto 18px;
  border-radius:999px;
  background:linear-gradient(90deg,#ef3340,#ffb52e,#28a9d6);
}
.temp-card.good:hover{
  box-shadow:0 18px 38px rgba(15,169,88,.24);
  transform:translateY(-2px);
}
.temp-card.bad:hover{
  box-shadow:0 18px 38px rgba(225,29,46,.24);
  transform:translateY(-2px);
}
.temp-card{
  transition:.16s ease;
}
.modern-select:hover,
.form-page input:hover,
.form-page textarea:hover{
  border-color:#28a9d6!important;
  box-shadow:0 12px 24px rgba(40,169,214,.12)!important;
}


/* v17 - COULEUR TEMPÉRATURE INSTANTANÉE SUR LE CHAMP */
.form-page input.live-good,
.form-page select.live-good,
.modern-select.live-good{
  background:linear-gradient(135deg,#dcffeb,#bdf5d4)!important;
  border:3px solid #0fa958!important;
  color:#064e2b!important;
  box-shadow:0 0 0 5px rgba(15,169,88,.18), 0 14px 28px rgba(15,169,88,.20)!important;
}

.form-page input.live-bad,
.form-page select.live-bad,
.modern-select.live-bad{
  background:linear-gradient(135deg,#ffe1e5,#ffc3ca)!important;
  border:3px solid #e11d2e!important;
  color:#8f101b!important;
  box-shadow:0 0 0 5px rgba(225,29,46,.18), 0 14px 28px rgba(225,29,46,.20)!important;
}

.field-wrap.field-good::after{
  content:"✅ Conforme";
  display:block;
  margin-top:6px;
  padding:8px 10px;
  border-radius:12px;
  color:#064e2b;
  background:#dcffeb;
  font-weight:1000;
  font-size:12px;
}

.field-wrap.field-bad::after{
  content:"⚠️ Attention à la température";
  display:block;
  margin-top:6px;
  padding:8px 10px;
  border-radius:12px;
  color:#8f101b;
  background:#ffe1e5;
  font-weight:1000;
  font-size:12px;
}

.temp-alert.good{
  background:linear-gradient(135deg,#dcffeb,#bdf5d4)!important;
  border:3px solid #0fa958!important;
}

.temp-alert.bad{
  background:linear-gradient(135deg,#ffe1e5,#ffc3ca)!important;
  border:3px solid #e11d2e!important;
}

/* neutralisation des hover qui écrasaient les couleurs */
.form-page input.live-good:hover,
.form-page select.live-good:hover,
.modern-select.live-good:hover{
  background:linear-gradient(135deg,#dcffeb,#bdf5d4)!important;
  border-color:#0fa958!important;
}

.form-page input.live-bad:hover,
.form-page select.live-bad:hover,
.modern-select.live-bad:hover{
  background:linear-gradient(135deg,#ffe1e5,#ffc3ca)!important;
  border-color:#e11d2e!important;
}


/* v18 FORCE COULEUR TEMPÉRATURE - PRIORITÉ MAX */
input.temperature-green,
.form-page input.temperature-green,
.field-wrap input.temperature-green,
select.temperature-green,
.form-page select.temperature-green,
.modern-select.temperature-green{
  background:#00c853 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:4px solid #008c3a !important;
  box-shadow:0 0 0 6px rgba(0,200,83,.22), 0 14px 30px rgba(0,200,83,.30) !important;
  font-weight:1000 !important;
}

input.temperature-red,
.form-page input.temperature-red,
.field-wrap input.temperature-red,
select.temperature-red,
.form-page select.temperature-red,
.modern-select.temperature-red{
  background:#e60023 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:4px solid #990018 !important;
  box-shadow:0 0 0 6px rgba(230,0,35,.22), 0 14px 30px rgba(230,0,35,.30) !important;
  font-weight:1000 !important;
}

input.temperature-green::placeholder,
input.temperature-red::placeholder{
  color:rgba(255,255,255,.85) !important;
}

.temperature-wrap-green .field-help{
  background:#d9ffe8 !important;
  color:#006b2d !important;
  border-left-color:#00c853 !important;
}

.temperature-wrap-red .field-help{
  background:#ffe0e5 !important;
  color:#990018 !important;
  border-left-color:#e60023 !important;
}

.temperature-wrap-green::after{
  content:"✅ Conforme";
  display:block;
  margin-top:7px;
  background:#00c853;
  color:white;
  padding:9px 12px;
  border-radius:13px;
  font-weight:1000;
  text-align:center;
}

.temperature-wrap-red::after{
  content:"⚠️ Attention à la température";
  display:block;
  margin-top:7px;
  background:#e60023;
  color:white;
  padding:9px 12px;
  border-radius:13px;
  font-weight:1000;
  text-align:center;
}

.temp-ok-box{
  background:#00c853 !important;
  color:white !important;
  padding:12px;
  border-radius:14px;
  font-weight:1000;
  margin:7px 0;
}

.temp-bad-box{
  background:#e60023 !important;
  color:white !important;
  padding:12px;
  border-radius:14px;
  font-weight:1000;
  margin:7px 0;
}

#versionBadge{
  position:fixed;
  top:8px;
  right:8px;
  background:#111;
  color:#fff;
  z-index:9999;
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  opacity:.85;
}


/* v19 - Photo mobile non bloquante + DLC explicite */
.photo-status{
  padding:12px;
  border-radius:14px;
  font-weight:1000;
  text-align:center;
  margin:8px 0;
}
.photo-status.loading{
  background:#fff7d6;
  color:#8a5a00;
  border:2px solid #ffd24d;
}
.photo-status.ready{
  background:#dcffeb;
  color:#065f33;
  border:2px solid #16a34a;
}
.photo-status.error{
  background:#ffe1e5;
  color:#96121e;
  border:2px solid #e60023;
}
input[data-field="DLC"]{
  border-color:#ffb52e!important;
  background:linear-gradient(135deg,#fffaf0,#fff3d6)!important;
}
input[data-field="DLC"]:focus{
  box-shadow:0 0 0 5px rgba(255,181,46,.22)!important;
}


/* v20 - Photo mobile vraiment non bloquante */
.photo-status{
  padding:12px;
  border-radius:14px;
  font-weight:1000;
  text-align:center;
  margin:8px 0;
}
.photo-status.loading{
  background:#fff4cc!important;
  color:#7a5200!important;
  border:2px solid #ffcc33!important;
}
.photo-status.ready{
  background:#dcffeb!important;
  color:#065f33!important;
  border:2px solid #16a34a!important;
}
.photo-status.error{
  background:#ffe1e5!important;
  color:#96121e!important;
  border:2px solid #e60023!important;
}
#versionBadge::after{
  content:" / v20 photo non-bloquante";
}


/* v21 - Loading photo obligatoire */
button.is-loading{
  opacity:.75!important;
  pointer-events:none!important;
  filter:saturate(.8);
}

#photoSavingOverlay{
  position:fixed;
  inset:0;
  background:rgba(12,18,28,.58);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(5px);
}

.photo-saving-card{
  width:82%;
  max-width:320px;
  background:white;
  border-radius:24px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  font-weight:1000;
  color:#111827;
}

.spinner{
  width:54px;
  height:54px;
  border-radius:50%;
  border:6px solid #e5e7eb;
  border-top-color:#e60023;
  margin:0 auto 18px;
  animation:spinV21 .8s linear infinite;
}

@keyframes spinV21{
  to{transform:rotate(360deg)}
}

#photoSavingText{
  font-size:16px;
  line-height:1.35;
}


/* v22 - photo simple img1/img2 + loading visible */
button.is-loading{
  opacity:.75!important;
  pointer-events:none!important;
}

#photoSavingOverlay{
  position:fixed;
  inset:0;
  background:rgba(12,18,28,.65);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
}

.photo-saving-card{
  width:84%;
  max-width:330px;
  background:#fff;
  border-radius:26px;
  padding:30px 22px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  font-weight:1000;
  color:#101828;
}

.spinner{
  width:58px;
  height:58px;
  border-radius:50%;
  border:7px solid #e5e7eb;
  border-top-color:#e60023;
  margin:0 auto 18px;
  animation:spinV22 .75s linear infinite;
}

@keyframes spinV22{to{transform:rotate(360deg)}}

#photoSavingText{
  font-size:17px;
  line-height:1.35;
}


/* v24 upload serveur réel OVH */
.hidden-camera-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  overflow:hidden!important;
}

.camera-btn-v24{
  width:96px;
  height:96px;
  border-radius:50%;
  background:linear-gradient(135deg,#e60023,#ff5252);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:44px;
  margin:18px auto;
  box-shadow:0 15px 35px rgba(230,0,35,.35);
  cursor:pointer;
}

#uploadOverlayV24{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999;
  backdrop-filter:blur(6px);
}

.upload-card-v24{
  width:84%;
  max-width:330px;
  background:#fff;
  border-radius:26px;
  padding:30px 22px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  color:#111;
  font-weight:1000;
}

.upload-spinner-v24{
  width:60px;
  height:60px;
  border-radius:50%;
  border:7px solid #e5e7eb;
  border-top-color:#e60023;
  margin:0 auto 18px;
  animation:spinUploadV24 .8s linear infinite;
}

@keyframes spinUploadV24{to{transform:rotate(360deg)}}

button.is-loading{
  opacity:.7!important;
  pointer-events:none!important;
}

.upload-test-floating{
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:9999;
  width:auto!important;
  padding:10px 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  background:#111!important;
  color:#fff!important;
}

.upload-test-floating-v26{
  position:fixed!important;
  right:10px!important;
  bottom:10px!important;
  z-index:10000!important;
  width:auto!important;
  padding:10px 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  background:#e60023!important;
  color:white!important;
}
.photo-status.ready{
  background:#dcffeb!important;
  color:#065f33!important;
  border:2px solid #16a34a!important;
}

.history-photo-v27{
  width:100%!important;
  display:block;
  border-radius:16px!important;
  border:2px solid #16a34a!important;
  background:#f2f2f2!important;
  min-height:120px!important;
  object-fit:cover!important;
  margin-top:8px!important;
}
.photo-status.error{
  background:#ffe1e5!important;
  color:#96121e!important;
  border:2px solid #e60023!important;
  padding:10px!important;
  border-radius:12px!important;
  font-weight:900!important;
}


/* ===== V28 STABLE ===== */

.hidden-camera-input-v28{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
}

.camera-btn-v28{
  width:130px;
  height:130px;
  border-radius:30px;
  background:linear-gradient(135deg,#e60023,#ff6b57);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:20px auto;
  color:white;
  font-weight:900;
  box-shadow:0 18px 40px rgba(230,0,35,.30);
}

.camera-btn-v28 span{
  font-size:50px;
}

.camera-btn-v28 small{
  margin-top:6px;
  font-size:12px;
}

#sideMenuV28{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.side-backdrop-v28{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.side-panel-v28{
  position:absolute;
  right:0;
  top:0;
  width:82%;
  max-width:340px;
  height:100%;
  background:white;
  padding:22px;
  box-sizing:border-box;
  border-top-left-radius:30px;
  border-bottom-left-radius:30px;
  box-shadow:-10px 0 40px rgba(0,0,0,.25);
}

.side-close-v28{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  background:#111!important;
  color:white!important;
  padding:0!important;
  font-size:24px!important;
  float:right;
}

.side-title-v28{
  margin-top:50px;
  font-size:30px;
  font-weight:1000;
  color:#e60023;
}

.side-card-v28{
  margin-top:25px;
  background:#f4f7fb;
  padding:18px;
  border-radius:20px;
}

.side-logout-v28{
  margin-top:25px;
  background:linear-gradient(135deg,#e60023,#ff6b57)!important;
}



/* ===== V29 ===== */

.camera-v29{
  width:130px;
  height:130px;
  margin:20px auto;
  border-radius:30px;
  background:linear-gradient(135deg,#e60023,#ff725e);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white;
  box-shadow:0 18px 40px rgba(230,0,35,.35);
}

.camera-icon-v29{
  font-size:52px;
}

.camera-text-v29{
  margin-top:8px;
  font-size:12px;
  font-weight:900;
}

#menuV29{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.menu-backdrop-v29{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.menu-panel-v29{
  position:absolute;
  right:0;
  top:0;
  width:82%;
  max-width:340px;
  height:100%;
  background:white;
  border-top-left-radius:30px;
  border-bottom-left-radius:30px;
  padding:22px;
  box-sizing:border-box;
  box-shadow:-10px 0 40px rgba(0,0,0,.25);
}

.menu-close-v29{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  background:#111!important;
  color:white!important;
  font-size:24px!important;
  padding:0!important;
  float:right;
}

.menu-title-v29{
  margin-top:55px;
  font-size:30px;
  font-weight:1000;
  color:#e60023;
}

.menu-card-v29{
  margin-top:25px;
  background:#f4f7fb;
  border-radius:20px;
  padding:18px;
}

.menu-label-v29{
  font-weight:1000;
}

.menu-logout-v29{
  margin-top:25px;
  background:linear-gradient(135deg,#e60023,#ff725e)!important;
}



/* ===== V30 ===== */

.camera-v30{
  width:130px;
  height:130px;
  margin:20px auto;
  border-radius:30px;
  background:linear-gradient(135deg,#e60023,#ff6b57);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white;
  box-shadow:0 18px 40px rgba(230,0,35,.35);
}

.camera-icon-v30{
  font-size:52px;
}

.camera-text-v30{
  margin-top:8px;
  font-size:12px;
  font-weight:1000;
}

#menuV30{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.menu-overlay-v30{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.menu-panel-v30{
  position:absolute;
  top:0;
  right:0;
  width:82%;
  max-width:340px;
  height:100%;
  background:white;
  border-top-left-radius:30px;
  border-bottom-left-radius:30px;
  padding:22px;
  box-sizing:border-box;
  box-shadow:-10px 0 40px rgba(0,0,0,.25);
}

.menu-close-v30{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  background:#111!important;
  color:white!important;
  padding:0!important;
  font-size:24px!important;
  float:right;
}

.menu-title-v30{
  margin-top:55px;
  font-size:30px;
  font-weight:1000;
  color:#e60023;
}

.menu-card-v30{
  margin-top:25px;
  background:#f4f7fb;
  border-radius:20px;
  padding:18px;
}

.menu-label-v30{
  font-weight:1000;
}

.menu-logout-v30{
  margin-top:25px;
  background:linear-gradient(135deg,#e60023,#ff6b57)!important;
}