@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
 
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
 
:root{
  --bg:#F5F4F0;--sur:#FFF;--bdr:#E2E0D8;--mut:#8F8D84;--txt:#1A1917;
  --acc:#1A56DB;--grn:#166534;--grn-l:#DCFCE7;--amb:#92400E;--amb-l:#FEF3C7;
  --red:#991B1B;--red-l:#FEE2E2;--r:12px;--rs:8px;--f:'DM Sans',system-ui,sans-serif
}
 
/* ── Base ── */
body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--txt);
  max-width:480px;
  margin:0 auto;
  padding:16px 16px 100px;
  min-height:100vh;
  overflow-y:auto;
  -webkit-font-smoothing:antialiased
}
 
/* ── Bouton retour ── */
a.btn-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--mut);text-decoration:none;padding:8px 0;margin-bottom:16px;min-height:44px}
a.btn-back:active{color:var(--txt)}
 
/* ── Header accueil ── */
.header{text-align:center;margin-bottom:24px}
.header h1{font-size:26px;font-weight:700;margin-bottom:6px}
.header p{font-size:13px;color:var(--mut)}
 
/* ── Boutons et liens nav ── */
button,a.btn-nav{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:16px 14px;margin-bottom:10px;
  border:1px solid var(--bdr);border-radius:var(--r);
  background:var(--sur);cursor:pointer;font-family:var(--f);
  font-size:14px;font-weight:500;text-decoration:none;color:var(--txt);
  touch-action:manipulation;transition:background .12s;min-height:52px
}
button:active,a.btn-nav:active{background:#EEEEE9}
 
/* ── Image accueil ── */
.bottom-image{width:100vw;height:calc(100vh - 180px);margin-top:16px;margin-left:calc(-50vw + 50%);object-fit:cover;display:block}
 
/* ── Footer ── */
footer{
  position:fixed;bottom:0;left:0;width:100%;text-align:center;
  padding:10px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--bdr);font-size:12px;color:var(--mut);
  z-index:100
}
footer a{color:var(--mut);text-decoration:none}
footer a:hover{text-decoration:underline}
 
/* ══════════════════════════════
   FORMULAIRE ÉTAT DES LIEUX
══════════════════════════════ */
 
/* ── Confirmation envoi ── */
.success-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:40px 24px 32px;text-align:center;margin-top:16px}
.success-icon{width:64px;height:64px;border-radius:50%;background:var(--grn-l);color:var(--grn);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.success-card h2{font-size:20px;font-weight:600;margin-bottom:8px}
.success-card p{font-size:14px;color:var(--mut);margin-bottom:24px}
.btn-retry{display:inline-flex;align-items:center;gap:6px;padding:14px 24px;background:var(--acc);color:#fff;border-radius:var(--rs);font-size:14px;font-weight:600;text-decoration:none;min-height:50px}
.btn-retry:active{opacity:.85}
 
/* ── Stepper ── */
.stepper{margin-bottom:20px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.stepper::-webkit-scrollbar{display:none}
.stepper-track{display:flex;align-items:center;padding:4px 0;min-width:max-content}
.step-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:4px 6px;min-height:48px;min-width:44px}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--bdr);color:var(--mut);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.step-label{font-size:10px;color:var(--mut);white-space:nowrap;font-weight:500}
.step-btn.active .step-num{background:var(--acc);color:#fff}
.step-btn.active .step-label{color:var(--acc)}
.step-btn.done .step-num{background:var(--grn);color:#fff}
.step-btn.done .step-label{color:var(--grn)}
.step-btn:disabled{opacity:.4;cursor:not-allowed}
.step-line{flex:1;height:2px;background:var(--bdr);min-width:12px;margin-bottom:14px;transition:background .3s}
.step-line.done{background:var(--grn)}
 
/* ── Étapes ── */
.form-step{display:none}
.form-step.active{display:block;animation:fs .2s ease}
@keyframes fs{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#edl-form{overflow-y:visible;max-height:none}
 
/* ── En-tête étape ── */
.step-header{margin-bottom:16px}
.step-tag{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px}
.step-header h2{font-size:22px;font-weight:600}
 
/* ── Champs étape 1 ── */
.field-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-label{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.req{color:#C23B3B}
.field-input{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--bdr);border-radius:var(--rs);
  font-family:var(--f);font-size:16px;color:var(--txt);
  background:#FAFAF8;-webkit-appearance:none;appearance:none;
  transition:border-color .15s;min-height:50px
}
.field-input:focus{outline:none;border-color:var(--acc);background:#fff}
.field-input.invalid{border-color:#C23B3B;background:#FFF5F5}
.select-wrap{position:relative}
.field-select{padding-right:36px;cursor:pointer}
.select-wrap::after{content:'';position:absolute;right:13px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-top:6px solid var(--mut);pointer-events:none}
 
/* ── Blocs items ── */
.item-block{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:14px;margin-bottom:10px}
.item-error{border-color:#C23B3B;background:#FFF5F5}
.item-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:12px}
.item-title svg{color:var(--mut);flex-shrink:0}
 
/* ── Boutons état ── */
.etat-row{display:flex;gap:6px;margin-bottom:10px}
.etat-btn{flex:1;cursor:pointer}
.etat-btn input[type="radio"]{display:none}
.etat-inner{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 4px;border-radius:var(--rs);border:1.5px solid var(--bdr);
  background:#FAFAF8;color:var(--mut);font-size:12px;font-weight:600;
  white-space:nowrap;transition:all .15s;cursor:pointer;min-height:46px
}
.etat-bon     input:checked+.etat-inner{background:var(--grn-l);border-color:#22C55E;color:var(--grn)}
.etat-moyen   input:checked+.etat-inner{background:var(--amb-l);border-color:#F59E0B;color:var(--amb)}
.etat-mauvais input:checked+.etat-inner{background:var(--red-l);border-color:#F87171;color:var(--red)}
 
/* ── Zone photo ── */
.photo-zone{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px dashed #BED4F8;border-radius:var(--rs);background:#EEF4FF;color:var(--acc);font-size:13px;font-weight:500;cursor:pointer;margin-bottom:8px;min-height:46px}
.photo-zone:active{opacity:.8}
.photo-zone.has-file{border-color:#22C55E;background:var(--grn-l);color:var(--grn)}
.photo-input{display:none}
.opt{font-size:11px;font-weight:400;color:var(--mut);margin-left:4px}
 
/* ── Commentaire ── */
.item-comment{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:var(--rs);font-family:var(--f);font-size:14px;color:var(--txt);background:#FAFAF8;resize:none;-webkit-appearance:none}
.item-comment:focus{outline:none;border-color:var(--acc)}
.item-comment::placeholder{color:#C0BDB4}
 
/* ── Boutons nav formulaire ── */
.btn-row{display:flex;gap:10px;margin-top:16px}
.btn-next,.btn-submit{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px;background:var(--acc);color:#fff;border:none;
  border-radius:var(--rs);font-family:var(--f);font-size:15px;font-weight:600;
  cursor:pointer;transition:opacity .15s;min-height:52px;touch-action:manipulation
}
.btn-next:active,.btn-submit:active{opacity:.88}
.btn-next:only-child{width:100%}
.btn-submit:disabled{background:var(--bdr);color:var(--mut);cursor:not-allowed}
.btn-prev{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:15px 18px;background:none;color:var(--mut);
  border:1.5px solid var(--bdr);border-radius:var(--rs);
  font-family:var(--f);font-size:14px;font-weight:500;cursor:pointer;
  white-space:nowrap;min-height:52px;touch-action:manipulation
}
.btn-prev:active{background:var(--bg)}
 
/* ── Récapitulatif ── */
.recap-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.recap-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#F8F7F2;border-bottom:1px solid var(--bdr)}
.recap-room{font-size:17px;font-weight:700}
.recap-type{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase}
.tag-entree{background:#DBEAFE;color:#1E40AF}
.tag-sortie{background:#EDE9FE;color:#5B21B6}
.recap-info{padding:12px 16px;border-bottom:1px solid var(--bdr);display:flex;flex-direction:column;gap:6px}
.recap-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.recap-row span{color:var(--mut)}
.recap-section{padding:10px 16px;border-bottom:1px solid var(--bdr)}
.recap-section:last-child{border-bottom:none}
.recap-section-title{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.recap-item{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px}
.recap-item-etat{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.tag-tres-bon{background:var(--grn-l);color:var(--grn)}
.tag-bon{background:var(--amb-l);color:var(--amb)}
.tag-mauvais{background:var(--red-l);color:var(--red)}
.tag-empty{background:var(--bdr);color:var(--mut)}
 
/* ── Certification ── */
.certif-card{background:#EEF4FF;border:1.5px solid #BED4F8;border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.certif-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.certif-check{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--acc);cursor:pointer}
.certif-text{font-size:13px;color:#1E40AF;line-height:1.55}
 
/* ── Adaptation mobile ── */
@media(max-width:480px){
  .etat-inner{min-height:48px}
  .btn-next,.btn-prev,.btn-submit{min-height:54px}
  .field-input{min-height:52px}
  .photo-zone{min-height:50px}
}