:root{
  --bg:#07111f;--panel:rgba(15,23,42,.78);--border:rgba(255,255,255,.12);
  --text:#f8fafc;--muted:#a8b3c7;--primary:#3b82f6;--danger:#ef4444;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}
.background{position:fixed;inset:0;background:
radial-gradient(circle at 20% 20%,#173f73 0,transparent 30%),
radial-gradient(circle at 80% 75%,#0f7f99 0,transparent 28%),
linear-gradient(135deg,#07111f,#0d2038)}
.app-shell{position:relative;z-index:1;min-height:100vh}
.glass-card{background:var(--panel);border:1px solid var(--border);backdrop-filter:blur(22px);box-shadow:0 25px 80px rgba(0,0,0,.35)}
.login-view{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);padding:38px;border-radius:28px}
.brand{text-align:center;margin-bottom:28px}.brand h1{margin:15px 0 5px}.brand p{color:var(--muted)}
.default-logo{width:82px;height:82px;border-radius:24px;margin:auto;display:grid;place-items:center;font-size:34px;font-weight:800;background:linear-gradient(145deg,#60a5fa,#2563eb)}
.login-form,.editor-form{display:grid;gap:16px}.login-form label{display:grid;gap:8px}
input,select,textarea{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:white;outline:none}
.password-wrap{display:flex;gap:8px}.password-wrap button{border:0;border-radius:12px;padding:0 12px}
.primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button{border:0;border-radius:13px;padding:11px 15px;color:white;cursor:pointer}
.primary-button{background:linear-gradient(135deg,#4f9cff,#2563eb)}.secondary-button{background:rgba(59,130,246,.18)}
.ghost-button{background:rgba(255,255,255,.08);border:1px solid var(--border)}.danger-button{background:rgba(239,68,68,.22)}
.icon-button{background:transparent}.small{padding:8px 12px}.message{color:#fda4af;text-align:center;min-height:20px}
.dashboard-view{padding:20px}.topbar{max-width:1400px;margin:auto;border-radius:20px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.topbar small{display:block;color:var(--muted);margin-top:3px}.topbar-actions{display:flex;gap:10px}.content{max-width:1400px;margin:50px auto 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-heading h2,.modal-header h2{margin:0}
.eyebrow{font-size:12px;letter-spacing:.14em;color:#7dd3fc;font-weight:800}
.redirect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.redirect-card{padding:22px;border-radius:22px}.redirect-card h3{margin:0}.redirect-card p{color:var(--muted);min-height:42px;line-height:1.45}
.redirect-logo{width:64px;height:64px;border-radius:17px;object-fit:contain;background:rgba(255,255,255,.08);margin-bottom:18px;display:grid;place-items:center;font-size:24px;font-weight:800}
.redirect-footer{display:flex;justify-content:space-between;align-items:center}.access-link{color:white;text-decoration:none;padding:9px 13px;border-radius:11px;background:rgba(59,130,246,.22)}
.status{font-size:13px;color:#dbeafe}.empty-state{padding:40px;border-radius:22px;text-align:center}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.75)}
.modal-panel,.editor-panel{position:relative;width:min(1000px,100%);max-height:90vh;overflow:auto;border-radius:25px}.editor-panel{width:min(620px,100%)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--border)}
.tabs{display:flex;gap:8px;padding:15px 22px 0}.tab{border:0;border-radius:11px;padding:9px 13px;background:transparent;color:var(--muted)}
.tab.active{background:rgba(59,130,246,.2);color:white}.modal-content{padding:20px 22px}.tab-panel{display:none}.tab-panel.active{display:block}
.panel-toolbar{display:flex;justify-content:space-between;align-items:center}.admin-list,.permission-list{display:grid;gap:10px;margin-top:14px}
.admin-row,.permission-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.admin-row small{display:block;color:var(--muted);margin-top:4px}.row-actions{display:flex;gap:8px}.editor-form{padding:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field{display:grid;gap:7px}.full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:9px}
.toast{position:fixed;right:20px;bottom:20px;z-index:200;padding:13px 16px;border-radius:13px;background:#0f172a;border:1px solid var(--border)}
@media(max-width:700px){.login-card{padding:28px 22px}.dashboard-view{padding:10px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.admin-row{grid-template-columns:1fr}}


/* Animations supplémentaires */
.background{animation:backgroundFloat 14s ease-in-out infinite alternate;transform:scale(1.04)}
.login-card{animation:loginArrival .7s cubic-bezier(.2,.8,.2,1) both}
.brand .default-logo{animation:logoFloat 4s ease-in-out infinite;box-shadow:0 18px 50px rgba(37,99,235,.35)}
.login-form input{transition:border-color .25s,box-shadow .25s,transform .25s}
.login-form input:focus{border-color:rgba(96,165,250,.85);box-shadow:0 0 0 4px rgba(59,130,246,.14);transform:translateY(-1px)}
.primary-button,.secondary-button,.ghost-button,.access-link,.redirect-card{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,opacity .25s ease}
.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.access-link:hover{transform:translateY(-2px)}
.primary-button:disabled{opacity:.65;cursor:wait}
.primary-button.loading::after{content:"";display:inline-block;width:14px;height:14px;margin-left:9px;border:2px solid rgba(255,255,255,.45);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
.redirect-card{animation:cardArrival .55s cubic-bezier(.2,.8,.2,1) both}
.redirect-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 30px 90px rgba(0,0,0,.46)}
.redirect-card:hover .redirect-logo{transform:scale(1.08) rotate(-2deg)}
.redirect-logo{transition:transform .3s ease}
.dashboard-view:not(.hidden){animation:dashboardArrival .55s ease both}
.login-view.leaving{animation:loginLeave .28s ease forwards}
.shake{animation:shake .35s ease}
.modal-panel,.editor-panel{animation:modalArrival .32s cubic-bezier(.2,.8,.2,1) both}

@keyframes loginArrival{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}}
@keyframes loginLeave{to{opacity:0;transform:scale(1.025);filter:blur(5px)}}
@keyframes dashboardArrival{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardArrival{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes modalArrival{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes backgroundFloat{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(12deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}


/* ================================
   VERSION 3 — ADMINISTRATION & UX
================================ */

:root{
  --panel-strong:rgba(12,20,36,.94);
  --panel-soft:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --blue:#60a5fa;
  --blue-strong:#2563eb;
  --cyan:#22d3ee;
}

/* Boutons : clic plus vivant */
button,.access-link{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
button::after,.access-link::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
button.clicked::after,.access-link.clicked::after{
  animation:rippleClick .46s ease-out;
}
button.clicked,.access-link.clicked{
  animation:buttonPress .24s ease;
}
button:active,.access-link:active{
  transform:translateY(1px) scale(.97);
}
@keyframes rippleClick{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.5}
  100%{transform:translate(-50%,-50%) scale(18);opacity:0}
}
@keyframes buttonPress{
  0%{transform:scale(1)}
  45%{transform:scale(.95)}
  100%{transform:scale(1)}
}

/* Connexion : ne se lance jamais automatiquement */
.login-view{
  transition:opacity .28s ease,filter .28s ease,transform .28s ease;
}

/* Fenêtre administration plus moderne */
.modal-panel{
  width:min(1120px,calc(100vw - 32px));
  background:
    linear-gradient(180deg,rgba(18,29,49,.97),rgba(8,15,29,.97));
  border:1px solid rgba(125,211,252,.16);
  box-shadow:
    0 34px 100px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.modal-header{
  position:sticky;
  top:0;
  z-index:4;
  background:linear-gradient(180deg,rgba(17,28,47,.98),rgba(17,28,47,.92));
  backdrop-filter:blur(18px);
}
.modal-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.compact{
  padding:9px 13px;
}
.modal-content{
  padding:24px;
}
.tabs{
  position:sticky;
  top:85px;
  z-index:3;
  padding:14px 22px;
  background:rgba(10,18,32,.91);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.tab{
  min-width:130px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
}
.tab:hover{
  background:rgba(255,255,255,.06);
  color:white;
}
.tab.active{
  background:linear-gradient(135deg,rgba(59,130,246,.32),rgba(34,211,238,.13));
  border-color:rgba(96,165,250,.32);
  box-shadow:0 8px 24px rgba(37,99,235,.14);
}

/* Listes administrateur */
.admin-list{
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:14px;
}
.admin-row{
  min-height:90px;
  padding:17px 18px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.admin-row:hover{
  transform:translateY(-3px);
  border-color:rgba(96,165,250,.26);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}
.admin-row,.permission-row{
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.admin-row strong{
  font-size:16px;
}
.admin-row small{
  line-height:1.45;
}
.row-actions button{
  min-width:94px;
}
.panel-toolbar{
  margin-bottom:16px;
}
.panel-toolbar h3{
  font-size:20px;
  margin:0;
}

/* Onglet Droits : correction texte blanc sur fond blanc */
#permissionUserSelect{
  color:#f8fafc;
  background:#111c30;
  border:1px solid rgba(125,211,252,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  appearance:auto;
}
#permissionUserSelect option{
  color:#111827;
  background:#ffffff;
}
.permission-list{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-top:18px;
}
.permission-row{
  min-height:60px;
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.045);
}
.permission-row:hover{
  background:rgba(59,130,246,.09);
  border-color:rgba(96,165,250,.26);
}
.permission-row label{
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer;
  width:100%;
}
.permission-row input[type="checkbox"]{
  width:20px;
  height:20px;
  accent-color:#3b82f6;
}

/* État de chargement administration */
.modal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  border-radius:25px;
  background:rgba(7,17,31,.56);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.adminModal.is-loading .modal-panel::before,
#adminModal.is-loading .modal-panel::before{
  opacity:1;
  pointer-events:auto;
}
#adminModal.is-loading .modal-panel::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:11;
  width:42px;
  height:42px;
  margin:-21px;
  border:4px solid rgba(255,255,255,.20);
  border-top-color:#60a5fa;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* Formulaires d’administration */
.editor-panel{
  background:linear-gradient(180deg,rgba(17,28,47,.98),rgba(8,15,29,.98));
  border:1px solid rgba(125,211,252,.18);
}
.editor-form input,
.editor-form select,
.editor-form textarea{
  background:#101b2f;
  border-color:rgba(255,255,255,.11);
}
.editor-form input:focus,
.editor-form select:focus,
.editor-form textarea:focus{
  border-color:rgba(96,165,250,.8);
  box-shadow:0 0 0 4px rgba(59,130,246,.13);
}
.editor-form select option{
  color:#111827;
  background:#fff;
}

/* Meilleur comportement mobile */
@media(max-width:760px){
  .modal-panel{width:100%;max-height:94vh}
  .tabs{overflow-x:auto;top:78px}
  .tab{min-width:120px}
  .admin-list{grid-template-columns:1fr}
  .modal-header-actions{gap:6px}
  .compact{padding:8px 10px}
}