/* ===== Portail employé — Eco-Entretien ===== */
:root{
  --bg:#E8E3D6; --paper:#F7F7F4; --line:#DEDDD6; --ink:#1A1D1A; --muted:#58595B;
  --forest:#13472D; --leaf:#2F9E3F; --leaf-pale:#E6F0E4;
  --warn:#A63A22; --warn-pale:#F6E9E4; --panel:#FFFFFF;
  --mono:'IBM Plex Mono',monospace; --head:'Barlow',sans-serif; --body:'Public Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);font-family:var(--body);color:var(--ink);min-height:100vh;
  display:flex;justify-content:center;align-items:flex-start;padding:48px 14px 64px;
  -webkit-font-smoothing:antialiased;
}

/* Feuille */
.sheet{width:100%;max-width:480px;background:var(--paper);border-radius:6px;border:1px solid #D4CFC1;overflow:clip;}
.sheet-body{padding:36px 32px 44px;}

/* Marque */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:40px;padding-bottom:18px;border-bottom:2px solid var(--ink);}
.brand-left{display:flex;align-items:center;gap:12px;}
.brand-logo{width:38px;height:38px;object-fit:contain;flex:none;}
.brand{font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--ink);line-height:1;}
.brand-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-align:right;line-height:1.5;}

/* Titres */
h1{font-family:var(--head);font-weight:700;font-size:30px;line-height:1.12;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);text-wrap:balance;}
p.help{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 28px;text-wrap:pretty;}

/* Champs */
label.field-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:8px;}
.field{
  width:100%;font-family:var(--mono);font-size:18px;letter-spacing:.08em;padding:15px 16px;
  border:1px solid #C9C6BC;background:var(--panel);border-radius:4px;outline:none;
  margin-bottom:20px;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.field:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(47,158,63,.2);}
.field.small{font-size:13px;letter-spacing:0;}

/* Boutons */
.btn{
  margin-top:4px;width:100%;padding:17px 20px;background:var(--forest);color:#fff;border:none;
  font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:4px;cursor:pointer;transition:background .12s;
}
.btn:hover{background:#0E3822;}
.btn:active{background:var(--leaf);}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid #C9C6BC;}
.btn.secondary:hover{background:var(--panel);border-color:var(--ink);}

/* Messages */
.alert{padding:12px 14px;border-radius:3px;font-size:14px;font-weight:600;line-height:1.45;margin-bottom:22px;}
.alert.error{background:var(--warn-pale);border-left:2px solid var(--warn);color:var(--warn);}
.alert.success{background:var(--leaf-pale);border-left:2px solid var(--leaf);color:var(--forest);}

.note{margin-top:28px;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;}
.note.warn{color:var(--warn);}

/* En-tête vert forêt (tableau de bord) */
.hero{padding:28px;background:var(--forest);color:#fff;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;right:-60px;bottom:-70px;width:240px;height:240px;background:url(logo-blanc.png) center/contain no-repeat;opacity:.07;pointer-events:none;}
.hero .brand-row{margin-bottom:0;border-bottom-color:rgba(255,255,255,.25);}
.hero .brand{color:#fff;}
.hero-meta{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#C9D6CD;line-height:1.6;}
.greeting{margin-top:28px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;}
.greeting-hello{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#9FD4A6;}
.greeting-name{font-family:var(--head);font-size:34px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.05;}
.greeting-tag{font-size:14px;color:#E8E3D6;margin-top:4px;}

@media (max-width:420px){
  body{padding-top:20px;}
  .sheet-body{padding:30px 22px 34px;}
  h1{font-size:26px;}
  .brand-sub{display:none;}
}