:root{
  --bg:#F4F5F8; --surface:#fff; --line:#E3E6EC; --ink:#151A2D; --muted:#667085; --faint:#98A2B3;
  --brand:#2F3E9E; --brand-soft:#EEF0FB; --accent:#0EA5A4;
  --ok:#12805C; --ok-bg:#E6F6EF; --warn:#B45309; --warn-bg:#FEF3E2; --bad:#B42318; --bad-bg:#FDECEA; --off:#475467; --off-bg:#EEF0F3;
  --r:14px; --sh:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 Inter,system-ui,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--brand)}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.01em}
h1{font-size:24px; font-weight:800} h2{font-size:17px; font-weight:700} h3{font-size:15px; font-weight:700}

/* barre du haut */
.la-top{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:24px; padding:0 24px; height:64px; background:var(--ink); color:#fff}
.la-brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700}
.la-brand .mark{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#5B6CF0,#0EA5A4); font-weight:800; font-size:13px; letter-spacing:.04em}
.la-brand small{display:block; font-size:11px; font-weight:500; opacity:.6; margin-top:-2px}
.la-top nav{display:flex; gap:4px; flex:1}
.la-top nav a{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9px; color:#C9CEDB; text-decoration:none; font-weight:600; font-size:14px}
.la-top nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.la-top nav a.on{background:rgba(255,255,255,.12); color:#fff}
.la-user{display:flex; align-items:center; gap:8px; font-size:14px; color:#C9CEDB}
.la-user form{margin:0}
.la-user button{border:0; background:rgba(255,255,255,.08); color:#fff; width:34px; height:34px; border-radius:9px; cursor:pointer}
.la-user button:hover{background:rgba(255,255,255,.16)}

.la-main{max-width:1180px; margin:0 auto; padding:28px 24px 80px}
.la-main.narrow{max-width:440px; padding-top:9vh}
.la-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.la-head p{margin:4px 0 0; color:var(--muted)}

/* messages */
.la-flash{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:12px; margin-bottom:16px; font-weight:500; border:1px solid transparent}
.la-flash i{margin-top:3px}
.la-flash.ok{background:var(--ok-bg); color:var(--ok); border-color:#B7E4CF}
.la-flash.err{background:var(--bad-bg); color:var(--bad); border-color:#F5C2BC}
.la-flash.info{background:var(--brand-soft); color:var(--brand); border-color:#D3D8F5}

/* cartes */
.la-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:22px; margin-bottom:18px}
.la-card > h2{margin-bottom:4px} .la-card > .sub{margin:0 0 16px; color:var(--muted); font-size:14px}
.la-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.la-stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:16px 18px}
.la-stat span{display:block; color:var(--muted); font-size:13px; font-weight:600}
.la-stat strong{display:block; font-size:28px; font-weight:800; margin-top:2px}
.la-stat.ok strong{color:var(--ok)} .la-stat.warn strong{color:var(--warn)} .la-stat.off strong{color:var(--off)}

/* boutons */
.la-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; white-space:nowrap}
.la-btn:hover{background:#F9FAFB}
.la-btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.la-btn.primary:hover{background:#26338A}
.la-btn.danger{color:var(--bad); border-color:#F5C2BC}
.la-btn.danger:hover{background:var(--bad-bg)}
.la-btn.sm{height:32px; padding:0 11px; font-size:13px}
.la-btn.block{width:100%}
.la-btns{display:flex; flex-wrap:wrap; gap:8px}
form.inline{display:inline}

/* tableau */
.la-toolbar{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.la-search{flex:1; max-width:340px; position:relative}
.la-search i{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint)}
.la-search input{padding-left:36px}
.la-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh)}
.la-table th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; background:#F9FAFB; padding:11px 14px; border-bottom:1px solid var(--line)}
.la-table td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14px}
.la-table tr:last-child td{border-bottom:0}
.la-table tr:hover td{background:#FAFBFD}
.la-who{display:flex; align-items:center; gap:12px}
.la-who img{width:40px; height:40px; border-radius:10px; object-fit:cover; background:var(--brand-soft); border:1px solid var(--line)}
.la-who b{display:block} .la-who small{color:var(--muted)}
.la-url{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted); text-decoration:none}
.la-url:hover{color:var(--brand)}
.la-badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap}
.la-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.la-badge.ok{background:var(--ok-bg); color:var(--ok)} .la-badge.warn{background:var(--warn-bg); color:var(--warn)}
.la-badge.bad{background:var(--bad-bg); color:var(--bad)} .la-badge.off{background:var(--off-bg); color:var(--off)}
.la-empty{text-align:center; padding:48px 20px; color:var(--muted)}
.la-empty i{font-size:34px; color:var(--faint); display:block; margin-bottom:10px}

/* formulaires */
.la-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.la-grid .full{grid-column:1/-1}
.la-grid.three{grid-template-columns:repeat(3,1fr)}
label.la-l{display:block; font-weight:600; font-size:13.5px; margin-bottom:6px}
label.la-l small{font-weight:400; color:var(--muted)}
.la-in, select.la-in, textarea.la-in{width:100%; height:42px; padding:0 12px; border:1px solid #D0D5DD; border-radius:10px; font:inherit; font-size:14.5px; background:#fff; color:var(--ink)}
textarea.la-in{height:auto; min-height:80px; padding:10px 12px; resize:vertical}
.la-in:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(47,62,158,.12)}
.la-in[type=color]{padding:4px; width:64px}
.la-help{display:block; margin-top:5px; font-size:12.5px; color:var(--muted)}
.la-prefix{display:flex; align-items:stretch}
.la-prefix .la-in{border-radius:10px 0 0 10px}
.la-prefix span{display:flex; align-items:center; padding:0 12px; border:1px solid #D0D5DD; border-left:0; border-radius:0 10px 10px 0; background:#F9FAFB; color:var(--muted); font-size:13.5px; white-space:nowrap}
.la-choice{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.la-choice label{display:flex; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:13.5px}
.la-choice label b{display:block; font-size:14px}
.la-choice label span{color:var(--muted)}
.la-choice label:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.la-choice input{margin-top:3px; accent-color:var(--brand)}
.la-check{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.la-check input{margin-top:4px; accent-color:var(--brand)}
details.la-adv{border-top:1px solid var(--line); margin-top:18px; padding-top:14px}
details.la-adv summary{cursor:pointer; font-weight:600; color:var(--brand)}
.la-sticky{position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:14px 0; background:linear-gradient(transparent,var(--bg) 30%)}

/* fiche crèche */
.la-cols{display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start}
.la-kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; margin:0}
.la-kv dt{color:var(--muted)} .la-kv dd{margin:0; font-weight:600; word-break:break-word}
.la-logo-big{width:88px; height:88px; border-radius:18px; object-fit:cover; border:1px solid var(--line); background:var(--brand-soft)}
.la-secret{display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:10px; background:#F9FAFB; border:1px dashed #D0D5DD; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; margin:6px 0 12px}
.la-secret code{flex:1; word-break:break-all}
.la-warn-box{padding:12px 14px; border-radius:10px; background:var(--warn-bg); color:var(--warn); font-size:13.5px; font-weight:500}
.la-log td{font-size:13px}

/* connexion */
.la-login{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 40px rgba(16,24,40,.08); padding:32px}
.la-login .la-brand{color:var(--ink); justify-content:center; margin-bottom:22px}
.la-login .la-brand small{opacity:1; color:var(--muted)}
.la-login .la-brand .mark{color:#fff}
.la-login .row{margin-bottom:14px}

@media (max-width:900px){
  .la-stats{grid-template-columns:1fr 1fr}
  .la-cols{grid-template-columns:1fr}
  .la-choice{grid-template-columns:1fr}
  .la-top nav span{display:none}
  .la-table .hide-sm{display:none}
}
@media (max-width:600px){
  .la-grid,.la-grid.three{grid-template-columns:1fr}
  .la-top{padding:0 14px; gap:12px}
  .la-main{padding:20px 14px 60px}
}