/* Back-office — Chasse au cadeau */
:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212a; --line:#272c37;
  --txt:#e8eaf0; --muted:#8b93a7; --gold:#e2b24a; --green:#22c55e; --red:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px}
a{color:var(--gold);text-decoration:none}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.04em;display:flex;align-items:center;gap:9px}
.brand small{font-weight:500;color:var(--muted);letter-spacing:0}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.topbar-right{display:flex;align-items:center;gap:10px}
.switcher select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-family:inherit}

.tabs{display:flex;gap:4px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:12px 15px;color:var(--muted);font-weight:600;font-size:.93rem;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--gold);border-bottom-color:var(--gold)}

.wrap{max-width:1080px;margin:0 auto;padding:26px 18px 60px}
h1{font-size:1.5rem;margin:0 0 4px}
h2{font-size:1.08rem;margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 22px;font-size:.92rem}

.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px;margin-bottom:18px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.stat{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px}
.stat b{display:block;font-size:2rem;line-height:1.1;color:var(--gold)}
.stat span{color:var(--muted);font-size:.85rem}

label{display:block;font-size:.83rem;color:var(--muted);margin:0 0 6px;font-weight:600}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;padding:11px 13px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);font-family:inherit;font-size:.95rem}
input[type=color]{width:100%;height:42px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px}
textarea{min-height:80px;resize:vertical}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}
.check{display:flex;align-items:center;gap:9px;color:var(--txt);font-size:.93rem;margin:8px 0}
.check input{width:18px;height:18px;accent-color:var(--gold)}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#111;border:0;border-radius:10px;
  padding:12px 20px;font-weight:700;font-size:.95rem;font-family:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn--ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn--red{background:var(--red);color:#fff}
.btn-sm{padding:7px 13px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:.86rem}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:0}
.code{font-family:ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.06em;color:var(--gold)}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:.75rem;font-weight:700}
.badge.ok{background:rgba(34,197,94,.16);color:#4ade80}
.badge.wait{background:rgba(226,178,74,.16);color:var(--gold)}
.badge.dead{background:rgba(239,68,68,.16);color:#f87171}

.alert{padding:12px 15px;border-radius:11px;margin-bottom:16px;font-size:.92rem}
.alert.ok{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35)}
.alert.err{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35)}
.alert.warn{background:rgba(226,178,74,.12);border:1px solid rgba(226,178,74,.35)}

.login{max-width:390px;margin:9vh auto}
.foot{text-align:center;color:var(--muted);font-size:.78rem;padding:22px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.86rem;word-break:break-all}

/* ==========================================================================
   Boutons et surfaces arrondis — cohérent avec le jeu et le site START GO
   ========================================================================== */
:root{ --r-pilule:999px; --r-panneau:18px; --r-champ:14px; }

.btn, .btn-sm, button.btn, .tab, .nav a{ border-radius:var(--r-pilule) }
.btn{
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 8px 20px -14px rgba(0,0,0,.9);
}
.btn:active{ transform:translateY(1px) }
.btn:focus-visible, .btn-sm:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.card, .panel, .alert, .note, .stat, .box{ border-radius:var(--r-panneau) }
input, select, textarea{ border-radius:var(--r-champ) }
table{ border-radius:var(--r-panneau); overflow:hidden }
.badge, .badge-s, .pill, .tag{ border-radius:var(--r-pilule) }
.leaflet-container{ border-radius:0 }

.bandeau-test{
  background:#3a2410;border-bottom:1px solid #7a4a18;color:#ffca7a;
  padding:11px 20px;font-size:.88rem;text-align:center;
}
.bandeau-test a{color:#fff;font-weight:700;margin-left:8px}

/* qui est connecté : agence ou restaurateur */
.qui{
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
}
.qui.agence{ background:rgba(226,178,74,.14); border-color:var(--gold); color:var(--gold) }

/* --- Page Points & série ------------------------------------------------- */
.stat-cards{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.stat-cards .sc{
  flex:1 1 140px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-panneau,16px);padding:14px 16px;text-align:center
}
.stat-cards .sc b{display:block;font-size:1.5rem;line-height:1.15;color:var(--accent,#e2b24a)}
.stat-cards .sc span{font-size:.74rem;opacity:.62}
label.switch{
  display:flex;align-items:center;gap:10px;margin:6px 0 2px;cursor:pointer;font-weight:600
}
label.switch input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--accent,#e2b24a)}
p.aide{font-size:.85rem;opacity:.62;line-height:1.5;margin:4px 0 14px}
.card hr{border:0;border-top:1px solid var(--line);margin:20px 0 16px}
.ok-line{color:#7fdca0;font-weight:600;margin:0}
.err-line{color:#ffab92;font-weight:600;margin:0}
ul.manque{margin:10px 0 0;padding-left:20px;font-size:.88rem;line-height:1.6}
ul.manque code{background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px}
.bandeau-points{background:rgba(226,178,74,.14);border-color:rgba(226,178,74,.5)}

/* ==========================================================================
   ═══ HABILLAGE FUTURISTE DU BACK-OFFICE ═══
   Plus sobre que le jeu — c'est un outil de travail — mais le même langage :
   verre, liserés lumineux, angles marqués. Palette inchangée.
   ========================================================================== */
:root{
  --lueur:      color-mix(in srgb, var(--gold) 55%, transparent);
  --lueur-forte:color-mix(in srgb, var(--gold) 85%, transparent);
  --voile:      color-mix(in srgb, var(--gold) 10%, transparent);
  --sortie:cubic-bezier(.16,1,.3,1);
}

body{
  background:
    radial-gradient(90% 60% at 50% -10%, var(--voile), transparent 55%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/100% 64px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/64px 100%,
    var(--bg);
  background-attachment:fixed;
}
body::before{                       /* la grille s'efface vers le bas */
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 25%, rgba(15,17,21,.85) 85%, var(--bg) 100%);
}
.topbar, .tabs, .wrap, .foot{ position:relative; z-index:1 }

/* --- Barre du haut et onglets -------------------------------------------- */
.topbar{
  background:rgba(23,26,33,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand .dot{ box-shadow:0 0 16px 2px var(--lueur-forte); animation:pouls-dot 2.6s ease-in-out infinite }
@keyframes pouls-dot{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

.tabs{
  background:rgba(23,26,33,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.tabs a{ position:relative; border-bottom:0; transition:color .18s ease }
.tabs a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px;
  background:var(--gold); border-radius:999px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .26s var(--sortie);
}
.tabs a:hover::after{ transform:scaleX(.5) }
.tabs a.on::after{ transform:scaleX(1); box-shadow:0 0 12px 1px var(--lueur-forte) }

/* --- Panneaux ------------------------------------------------------------ */
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--panel);
  border:1px solid var(--line);
  border-radius:4px 18px 4px 18px;
  box-shadow:0 18px 44px -30px #000;
}
.card::before{
  content:''; position:absolute; left:0; top:0; width:20px; height:20px;
  border-top:2px solid var(--gold); border-left:2px solid var(--gold);
  border-top-left-radius:4px; opacity:.5;
}

/* --- Boutons ------------------------------------------------------------- */
.btn, .btn-sm{
  position:relative; overflow:hidden; border-radius:999px;
  transition:transform .16s var(--sortie), box-shadow .16s ease, filter .16s ease;
}
.btn{
  background:linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 76%, #000));
  box-shadow:0 0 0 1px var(--lueur-forte), 0 8px 24px -10px var(--lueur);
}
.btn:hover{ box-shadow:0 0 0 1px var(--gold), 0 10px 28px -8px var(--lueur) }
.btn:active{ transform:translateY(1px) scale(.985) }
.btn--ghost{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--lueur-forte) }
.btn-sm{ border-radius:999px; transition:all .16s var(--sortie) }

/* --- Champs -------------------------------------------------------------- */
input[type=text], input[type=number], input[type=password], input[type=email], input[type=tel], select, textarea{
  border-radius:12px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--lueur-forte);
  box-shadow:0 0 0 3px var(--voile);
}

/* --- Tableaux et pastilles ---------------------------------------------- */
table th{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
tr{ transition:background .14s ease }
tbody tr:hover, table tr:hover{ background:rgba(255,255,255,.02) }
.badge, .badge-s{ border-radius:999px; letter-spacing:.02em }
.code, .mono{
  border-radius:8px; padding:3px 9px;
  background:rgba(0,0,0,.32); border:1px solid var(--line);
  color:var(--gold); text-shadow:0 0 12px var(--lueur);
}

/* --- Cartes de chiffres de la page Points -------------------------------- */
.stat-cards .sc{
  position:relative; overflow:hidden;
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--panel);
}
.stat-cards .sc::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.7;
}
.stat-cards .sc b{ text-shadow:0 0 22px var(--lueur) }

/* --- Bandeaux ------------------------------------------------------------ */
.bandeau-test, .bandeau-points{
  border-radius:0; border-left:0; border-right:0;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.alert{ border-radius:4px 14px 4px 14px }

@media (prefers-reduced-motion: reduce){
  .brand .dot{ animation:none }
}

/* --- Choix du mode de dépôt des cadeaux ---------------------------------- */
.choix-mode{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:14px; margin-bottom:10px; border-radius:4px 16px 4px 16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.choix-mode input{ margin-top:3px; accent-color:var(--gold); width:18px; height:18px; flex:0 0 18px }
.choix-mode span{ display:flex; flex-direction:column; gap:4px; font-size:.88rem;
                  color:var(--muted); line-height:1.5 }
.choix-mode span b{ color:var(--txt); font-size:.98rem }
.choix-mode.is-on{
  border-color:var(--lueur-forte); background:var(--voile);
  box-shadow:0 0 22px -10px var(--lueur);
}

/* =========================================================================
   BOUTONS ANIMÉS — tout le back-office
   Un bouton doit répondre au survol, au clic et à l'attente. Trois états,
   trois signaux, partout de la même façon.
   ========================================================================= */
.btn, .btn-sm, button.btn, .tabs a, .switcher select{
  transition:transform .16s cubic-bezier(.2,1,.3,1),
             box-shadow .24s ease, background .2s ease,
             border-color .2s ease, color .2s ease, filter .2s ease;
}
.btn{ position:relative; overflow:hidden }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px var(--gold) }
.btn:active{ transform:translateY(0) scale(.97) }

/* l'onde partant du point cliqué : le clic devient visible */
.btn::after{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-radius:50%; background:rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
}
.btn:active::after{ animation:btn-onde .5s ease-out }
@keyframes btn-onde{
  0%  { transform:translate(-50%,-50%) scale(0);  opacity:.5 }
  100%{ transform:translate(-50%,-50%) scale(26); opacity:0 }
}

.btn-sm{ border:1px solid var(--line) }
.btn-sm:hover{ transform:translateY(-1px); border-color:var(--gold); color:var(--gold) }
.btn-sm:active{ transform:scale(.95) }

/* un bouton qui travaille : on le dit, on ne laisse pas l'écran muet */
.btn[disabled], .btn-sm[disabled], button[disabled]{
  opacity:.55; cursor:default; transform:none !important; box-shadow:none !important;
}
.btn.occupe{ position:relative; color:transparent !important }
.btn.occupe::before{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid rgba(0,0,0,.25); border-top-color:#1a1305; border-radius:50%;
  animation:btn-tourne .7s linear infinite;
}
@keyframes btn-tourne{ to{ transform:rotate(360deg) } }

/* les onglets du haut : le trait glisse au lieu d'apparaître */
.tabs a{ position:relative }
.tabs a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:-1px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.2,1,.3,1);
}
.tabs a:hover::after{ transform:scaleX(1) }
.tabs a.on::after{ transform:scaleX(1) }

/* les cases à cocher et les champs répondent aussi */
input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel],
input[type=url], select, textarea{
  transition:border-color .2s ease, box-shadow .24s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(226,178,74,.16);
}

/* les cartes se soulèvent très légèrement quand on les survole */
.card{ transition:border-color .24s ease, box-shadow .3s ease }
.card:hover{ box-shadow:0 18px 44px -34px #000 }

@media (prefers-reduced-motion: reduce){
  .btn, .btn-sm, .tabs a, .card{ transition:none !important }
  .btn:hover, .btn-sm:hover{ transform:none }
  .btn:active::after{ animation:none }
}

/* --- Carte : la page occupe toute la largeur, la carte a besoin de place --- */
body.page-carte .wrap{ max-width:1320px }

/* ---- images du restaurant (logo, couverture) --------------------------- */
.img-row{ align-items:flex-start }
.img-apercu{
  display:grid; place-items:center; margin:6px 0 8px; border-radius:12px; overflow:hidden;
  background:var(--panel2, #14161c); border:1px dashed var(--line, #2a2d36);
}
.img-apercu--logo{ width:120px; height:120px }
.img-apercu--logo img{ max-width:100%; max-height:100%; object-fit:contain }
.img-apercu--cover{ width:100%; max-width:320px; aspect-ratio:16/9 }
.img-apercu--cover img{ width:100%; height:100%; object-fit:cover }
.img-apercu .muted{ font-size:.78rem }
.img-plus{ margin-top:6px; font-size:.82rem }
.img-plus summary{ cursor:pointer; color:var(--muted); }
.img-plus input{ margin-top:6px }
input[type=file]{ font-size:.85rem; max-width:100% }
.brand-logo{ height:70px; width:auto; vertical-align:middle; margin-right:6px }
.login-logo{ height:104px; width:auto; max-width:100%; margin:0 auto 14px; display:block }
.ch-jeu{ height:78px; width:auto; margin:0 auto 12px; display:block }

/* --- Les deux espaces de l'agence ---------------------------------------- */
.espaces{ display:flex; gap:3px; padding:3px; border-radius:999px; border:1px solid var(--line); background:var(--panel2) }
.espaces a{ padding:7px 14px; border-radius:999px; font-size:.8rem; font-weight:800; letter-spacing:.04em; color:var(--muted); white-space:nowrap; transition:color .18s, background .18s }
.espaces a:hover{ color:var(--txt) }
.espaces a.on{ color:#0b0d12; background:linear-gradient(120deg, var(--gold), #f5d98a); box-shadow:0 6px 18px -8px var(--gold) }
.tabs-label{ align-self:center; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 14px 0 2px; border-right:1px solid var(--line); margin-right:6px; white-space:nowrap }
.tabs--agence{ background:linear-gradient(90deg, rgba(226,178,74,.10), var(--panel) 40%) }
.tabs--agence .tabs-label{ color:var(--gold) }
@media (max-width:760px){ .espaces a{ padding:7px 10px; font-size:.74rem } .topbar-right{ flex-wrap:wrap } }

/* --- Dossier client (agence) --------------------------------------------- */
.dossier-client{ border-left:3px solid var(--line); margin-bottom:18px }
.dossier-client.ok{ border-left-color:#4ade80 } .dossier-client.warn{ border-left-color:var(--gold) } .dossier-client.ko{ border-left-color:#f87171 }
.dc-tete{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-start }
.dc-tete h2{ font-size:1.15rem } .dc-actions{ display:flex; gap:6px; flex-wrap:wrap }
.dc-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px 18px; margin-top:14px }
.dc-grille b{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } .dc-grille span{ font-size:.92rem }
.dc-docs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.dc-docs span{ padding:5px 11px; border-radius:999px; font-size:.8rem; font-weight:700; border:1px solid var(--line) }
.dc-docs .oui{ color:#4ade80; border-color:rgba(74,222,128,.4) } .dc-docs .non{ color:#f87171; border-color:rgba(248,113,113,.4) }