:root{
  --green:#1c3a2e;--green-dark:#142b22;--red:#8c2b22;--gold:#c8a04a;
  --bg:#f3f1ea;--panel:#fff;--line:#e6e1d4;--ink:#2a2620;--muted:#857c6c;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Jost',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
input,textarea,select,button{font-family:inherit;font-size:1rem}

/* LOGIN */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green-dark),var(--green));padding:1.5rem}
.login-box{background:#fff;padding:3rem 2.6rem;border-radius:16px;width:100%;max-width:400px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.login-logo{font-family:'Cinzel',serif;font-size:2rem;color:var(--green);text-align:center;display:flex;flex-direction:column}
.login-logo em{font-family:'Jost';font-style:normal;font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:.4rem}
.login-sub{text-align:center;color:var(--muted);margin:.4rem 0 2rem;font-size:.9rem}
.login-box label{display:block;font-size:.82rem;font-weight:500;color:var(--green);margin-bottom:1.1rem}
.login-box input{width:100%;margin-top:.4rem;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:9px;transition:.2s}
.login-box input:focus{outline:none;border-color:var(--gold)}
.btn-primary{width:100%;padding:.9rem;background:var(--green);color:#fff;border:0;border-radius:9px;cursor:pointer;
  font-weight:500;letter-spacing:.05em;transition:.25s;text-transform:uppercase;font-size:.85rem}
.btn-primary:hover{background:var(--green-dark)}
.login-error{color:var(--red);text-align:center;margin-top:1rem;font-size:.9rem;min-height:1.2em}

/* APP LAYOUT */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--green-dark);color:#e9e3d3;display:flex;flex-direction:column;padding:1.6rem 1rem;position:sticky;top:0;height:100vh}
.side-logo{font-family:'Cinzel',serif;font-size:1.5rem;text-align:center;padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1.2rem;display:flex;flex-direction:column}
.side-logo em{font-family:'Jost';font-style:normal;font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-top:.3rem}
#tabs{display:flex;flex-direction:column;gap:.25rem;flex:1}
#tabs button{background:none;border:0;color:#cfc8b6;text-align:left;padding:.75rem .9rem;border-radius:9px;cursor:pointer;font-size:.92rem;transition:.2s;display:flex;gap:.5rem;align-items:center}
#tabs button:hover{background:rgba(255,255,255,.07);color:#fff}
#tabs button.active{background:var(--gold);color:var(--green-dark);font-weight:500}
.side-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;display:flex;flex-direction:column;gap:.6rem}
.view-site{color:var(--gold);text-decoration:none;font-size:.88rem;padding:.5rem .9rem;text-align:center;border:1px solid rgba(200,160,74,.4);border-radius:8px;transition:.2s}
.view-site:hover{background:rgba(200,160,74,.15)}
.logout{background:none;border:0;color:#b99;cursor:pointer;font-size:.85rem;padding:.4rem}
.logout:hover{color:#f0a48c}

.content{padding:2.2rem 2.6rem;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.topbar h1{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--green)}
.user-chip{background:#fff;padding:.5rem 1rem;border-radius:40px;font-size:.85rem;color:var(--muted);box-shadow:0 4px 14px rgba(0,0,0,.05)}

/* CARDS / FORMS */
.card{background:var(--panel);border-radius:14px;padding:2rem;box-shadow:0 8px 30px rgba(0,0,0,.06);margin-bottom:1.6rem}
.card h2{font-size:1.15rem;color:var(--green);margin-bottom:1.3rem;display:flex;align-items:center;gap:.5rem}
.card h2 .hint{font-size:.78rem;color:var(--muted);font-weight:400}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.82rem;font-weight:500;color:var(--green);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:9px;transition:.2s;background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field .help{font-size:.76rem;color:var(--muted);margin-top:.35rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
.row-actions{display:flex;gap:.7rem;margin-top:.5rem;flex-wrap:wrap}

.btn{padding:.7rem 1.4rem;border:0;border-radius:9px;cursor:pointer;font-weight:500;transition:.2s;font-size:.9rem}
.btn-save{background:var(--green);color:#fff}
.btn-save:hover{background:var(--green-dark)}
.btn-add{background:var(--gold);color:var(--green-dark)}
.btn-add:hover{filter:brightness(1.07)}
.btn-del{background:#fbe9e7;color:var(--red)}
.btn-del:hover{background:var(--red);color:#fff}
.btn-ghost{background:#eee9dd;color:var(--ink)}
.btn-ghost:hover{background:#e1dac9}
.btn-sm{padding:.45rem .9rem;font-size:.82rem}

/* IMAGE PICKER */
.img-field{display:flex;gap:1rem;align-items:flex-start}
.img-preview{width:120px;height:120px;border-radius:10px;background:#eee9dd center/cover no-repeat;flex-shrink:0;border:1.5px solid var(--line)}
.img-controls{flex:1}
.img-controls input[type=text]{margin-bottom:.6rem}

/* MENU EDITOR */
.cat-block{background:var(--panel);border-radius:14px;padding:1.5rem;box-shadow:0 8px 30px rgba(0,0,0,.06);margin-bottom:1.4rem;border-left:4px solid var(--gold)}
.cat-head{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.cat-head .field{margin:0}
.cat-head .field.grow{flex:1;min-width:160px}
.item-row{display:grid;grid-template-columns:1.4fr 2.6fr .75fr auto;gap:.7rem;align-items:center;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.item-row input{padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:8px;width:100%}
.item-row input:focus{outline:none;border-color:var(--gold)}
.item-flags{display:flex;gap:.6rem;align-items:center;font-size:.78rem;color:var(--muted);margin-top:.3rem;grid-column:1/-1;flex-wrap:wrap}
.item-flags label{display:flex;gap:.3rem;align-items:center;cursor:pointer}
.item-actions{display:flex;gap:.4rem}
.icon-btn{width:34px;height:34px;border:0;border-radius:8px;cursor:pointer;background:#f0ece0;transition:.2s;font-size:.95rem}
.icon-btn:hover{background:#e3ddcc}
.icon-btn.del:hover{background:var(--red);color:#fff}

/* GALLERY ADMIN */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.gal-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.gal-card img{width:100%;height:140px;object-fit:cover;background:#eee}
.gal-card .gal-body{padding:.7rem}
.gal-card input{width:100%;padding:.45rem .6rem;border:1.5px solid var(--line);border-radius:7px;margin-bottom:.5rem;font-size:.85rem}
.uploader{border:2px dashed var(--line);border-radius:12px;padding:2rem;text-align:center;color:var(--muted);cursor:pointer;transition:.2s;margin-bottom:1.4rem}
.uploader:hover,.uploader.drag{border-color:var(--gold);background:#fcfaf3;color:var(--green)}

/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--green);color:#fff;padding:.9rem 1.5rem;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);transform:translateY(140%);transition:.4s;z-index:300;font-size:.92rem}
.toast.show{transform:none}
.toast.err{background:var(--red)}

.muted{color:var(--muted);font-size:.88rem}

/* Interrupteur (toggle) */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.switch-row span b{display:block;color:var(--green);font-weight:500;font-size:.98rem}
.switch-row span small{display:block;color:var(--muted);font-size:.82rem;margin-top:.2rem}
.switch{position:relative;flex-shrink:0;width:52px;height:30px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .slider{position:absolute;inset:0;background:#cfc8b6;border-radius:30px;transition:.25s}
.switch .slider::before{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider::before{transform:translateX(22px)}
.switch input:focus-visible + .slider{outline:2px solid var(--gold);outline-offset:2px}
.swatch{display:flex;align-items:center;gap:.6rem}
.swatch input[type=color]{width:46px;height:42px;padding:0;border:1.5px solid var(--line);border-radius:8px;cursor:pointer}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  #tabs{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3;margin-top:1rem}
  .side-bottom{flex-direction:row;border:0;padding:0}
  .content{padding:1.4rem}
  .grid2,.grid3{grid-template-columns:1fr}
  .item-row{grid-template-columns:1fr 1fr}
}