/* Tamala Groupe — admin */
:root{
  --teal:#0E7A68; --teal-deep:#0A5546; --teal-dark:#08382F;
  --orange:#EFA637; --bg:#F1F5F3; --surface:#fff; --ink:#16241F;
  --muted:#5B6E67; --line:#E2E9E4; --radius:14px;
  --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body.admin{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px}
a{color:var(--teal); text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); margin:0}
.emblem{width:34px; height:34px}

/* ---------- Login ---------- */
.admin--login{min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(900px 500px at 50% -10%, rgba(14,122,104,.14), transparent), var(--bg)}
.login-card{background:var(--surface); width:min(420px,92vw); padding:2.4rem; border-radius:18px; box-shadow:0 30px 60px -30px rgba(8,56,47,.4); border:1px solid var(--line)}
.login-card__brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.15rem; margin-bottom:1.4rem}
.login-card h1{font-size:1.5rem; margin-bottom:1.2rem}
.login-card__back{display:inline-block; margin-top:1.1rem; color:var(--muted); font-size:.9rem}

/* ---------- Layout ---------- */
.admin-side{position:fixed; inset:0 auto 0 0; width:250px; background:var(--teal-dark); color:#fff; display:flex; flex-direction:column; padding:1.3rem 1rem; z-index:50}
.admin-brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-family:var(--font-display); font-size:1.12rem; margin-bottom:1.6rem; padding-inline:.4rem}
.admin-brand .emblem{filter:none}
.admin-nav{display:flex; flex-direction:column; gap:.15rem; flex:1}
.admin-nav__label{font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.45); margin:1.1rem .6rem .35rem}
.admin-nav a{color:rgba(255,255,255,.82); padding:.6rem .7rem; border-radius:9px; font-size:.94rem; transition:.15s}
.admin-nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.admin-nav a.is-active{background:var(--teal); color:#fff; font-weight:600}
.admin-nav__logout{margin-top:.4rem; color:var(--orange) !important}
.admin-side__site{margin-top:1rem; color:rgba(255,255,255,.7); font-size:.88rem; padding:.5rem .7rem}
.admin-side__site:hover{color:var(--orange)}

.admin-main{margin-left:250px; padding:1.6rem clamp(1rem,3vw,2.4rem) 4rem; min-height:100vh}
.admin-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap}
.admin-top h1{font-size:1.6rem}
.admin-user{color:var(--muted); font-size:.9rem}
.admin-burger{display:none; position:fixed; top:12px; left:12px; z-index:60; width:44px; height:44px; border:0; border-radius:10px; background:var(--teal-dark); color:#fff; font-size:1.3rem; cursor:pointer}

/* ---------- Cartes / métriques ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem}
.metric{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; display:flex; flex-direction:column; gap:.2rem; transition:.18s}
.metric:hover{transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(8,56,47,.4)}
.metric__n{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--teal-deep)}
.metric__l{color:var(--muted); font-size:.9rem}

/* ---------- Panneaux ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.4rem}
.panel__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem}
.panel__head h2{font-size:1.15rem}
.panel__head--page{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem}
.hint{color:var(--muted); font-size:.92rem; margin:0}
.quick{display:flex; gap:.7rem; flex-wrap:wrap}
.back-link{display:inline-block; margin-bottom:1rem; color:var(--muted)}

/* ---------- Tables ---------- */
.table{width:100%; border-collapse:collapse}
.table th{text-align:left; font-family:var(--font-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:.6rem .7rem; border-bottom:2px solid var(--line)}
.table td{padding:.75rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table tr.is-unread{background:#fff8ec}
.row-actions{display:flex; gap:.9rem; white-space:nowrap}
.row-actions a{font-size:.9rem}
.row-actions .danger, .danger{color:#c0392b}
.cell-icon svg{width:26px; height:26px; color:var(--teal-deep)}
.thumb{height:34px; width:auto; border-radius:6px; vertical-align:middle; margin-left:.4rem}
.thumb--wide{height:44px; width:76px; object-fit:cover}
.thumb--empty{display:inline-grid; place-items:center; height:44px; width:76px; background:var(--bg); border-radius:6px; color:var(--muted)}
.badge{display:inline-block; padding:.2em .6em; border-radius:99px; font-size:.76rem; background:var(--line); color:var(--muted)}
.badge--ok{background:#e0f0e7; color:#1a7a4a}
.badge--new{background:var(--orange); color:#241703}

/* ---------- Formulaires ---------- */
.form label{display:block; font-family:var(--font-display); font-weight:500; font-size:.86rem; margin-bottom:1rem}
.form input, .form textarea, .form select{width:100%; margin-top:.35rem; padding:.6em .75em; border:1.5px solid var(--line); border-radius:9px; font-family:var(--font-body); font-size:.96rem; background:#fff; color:var(--ink)}
.form input:focus, .form textarea:focus{outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,122,104,.14)}
.form input:disabled{background:var(--bg); color:var(--muted)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form__sub{font-size:1rem; margin:.6rem 0 1rem; padding-top:1rem; border-top:1px solid var(--line)}
.check{display:flex; align-items:center; gap:.5rem; font-family:var(--font-body) !important}
.check input{width:auto; margin:0}
.field-hint{display:inline-flex; align-items:center; font-size:.85rem; color:var(--muted); margin-top:.3rem}
.form--inline{padding:1.1rem; border:1px dashed var(--line); border-radius:11px; margin-bottom:1rem}
.inline-actions{display:flex; gap:.6rem}
.btn--danger{background:#c0392b}
.btn--danger:hover{background:#a12f22}

/* Boutons (repris du site) */
.btn{display:inline-flex; align-items:center; gap:.5em; background:var(--teal); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.92rem; padding:.6em 1.15em; border-radius:9px; border:0; cursor:pointer; transition:.18s}
.btn:hover{background:var(--teal-deep); color:#fff}
.btn--lg{padding:.75em 1.4em; font-size:1rem}
.btn--sm{padding:.45em .9em; font-size:.84rem}
.btn--block{width:100%; justify-content:center}
.btn--ghost{background:transparent; color:var(--teal-deep); border:1.5px solid var(--teal)}
.btn--ghost:hover{background:var(--teal); color:#fff}

/* Sélecteur d'icônes */
.icon-picker{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.5rem}
.icon-opt{display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.8rem .5rem; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; text-align:center; transition:.15s; font-family:var(--font-body) !important; font-weight:400 !important; margin:0 !important}
.icon-opt input{position:absolute; opacity:0; width:0; height:0}
.icon-opt__svg{color:var(--teal-deep)}
.icon-opt__svg svg{width:26px; height:26px}
.icon-opt__label{font-size:.74rem; color:var(--muted); line-height:1.2}
.icon-opt.is-selected, .icon-opt:hover{border-color:var(--teal); background:#eef5f2}
.icon-opt.is-selected{box-shadow:0 0 0 3px rgba(14,122,104,.14)}

/* Alertes */
.alert{border-radius:10px; padding:.8em 1rem; margin-bottom:1.2rem; font-size:.94rem}
.alert--ok{background:#e6f4ec; color:#166a41; border:1px solid #bfe2cd}
.alert--err{background:#fdecec; color:#a12626; border:1px solid #f3c9c9}

/* Messages */
.messages{display:grid; gap:1rem}
.message{border:1px solid var(--line); border-radius:12px; padding:1.2rem}
.message.is-unread{border-color:var(--orange); background:#fffaf1}
.message__head{display:flex; justify-content:space-between; gap:1rem; margin-bottom:.6rem}
.message__subject{font-family:var(--font-display); font-weight:600; margin:.2rem 0}
.message__body{color:#33443d; margin:.4rem 0 1rem}

.sticky-save{position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 40%); padding:1rem 0; margin-top:-.5rem}

@media (max-width:860px){
  .admin-side{transform:translateX(-100%); transition:transform .25s; box-shadow:0 0 40px rgba(0,0,0,.3)}
  .admin-side.is-open{transform:none}
  .admin-main{margin-left:0; padding-top:4rem}
  .admin-burger{display:block}
  .cards{grid-template-columns:1fr 1fr}
  .form__row{grid-template-columns:1fr}
  .icon-picker{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){ .cards{grid-template-columns:1fr} .icon-picker{grid-template-columns:1fr 1fr} }