/* Ebee : thème clair uniquement. Couleurs eBay : rouge #e53238, bleu #0064d2, jaune #f5af02, vert #86b817. */
:root {
  --fond:#f5f6f8; --carte:#fff; --texte:#191919; --doux:#6b7280; --ligne:#e5e7eb;
  --bleu:#0064d2; --bleu-clair:#eaf2fd; --rouge:#e53238; --jaune:#f5af02; --vert:#2f9e44;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font:16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--bleu); }
h1 { font-size:1.7rem; line-height:1.2; margin:0 0 20px; }
h2 { font-size:1.05rem; margin:0 0 12px; }
h3 { font-size:1rem; margin:8px 0 4px; }
p { margin:0 0 12px; }

/* --- éléments communs --- */
.logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; color:var(--texte); text-decoration:none; }
.bouton, button { background:var(--bleu); color:#fff; border:0; border-radius:10px; padding:11px 18px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
.bouton:hover, button:hover { background:#0054b3; }
.bouton.petit { padding:7px 14px; font-size:14px; }
button.lien { background:none; color:var(--bleu); padding:0; font-weight:500; }
button.lien:hover { background:none; text-decoration:underline; }
button.lien.danger { color:var(--rouge); }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--ligne); border-radius:10px; background:#fff; color:inherit; font:inherit; }
input:focus, select:focus { outline:2px solid var(--bleu-clair); border-color:var(--bleu); }
label { display:flex; flex-direction:column; gap:5px; font-size:14px; color:var(--doux); font-weight:500; }
.aide { color:var(--doux); font-size:13px; margin:4px 0 0; }
.vide { color:var(--doux); margin:0; }
.msg { border-radius:10px; padding:10px 14px; margin:0 0 16px; background:#fff; border:1px solid var(--ligne); border-left:4px solid var(--doux); }
.msg.ok { border-left-color:var(--vert); }
.msg.erreur { border-left-color:var(--rouge); }
.carte { background:var(--carte); border:1px solid var(--ligne); border-radius:14px; padding:22px; margin:0 0 18px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.carte-tete { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.carte-tete h2 { margin:0; }
.puce { display:inline-block; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:600; background:#eef0f3; color:var(--doux); }
.puce.vert { background:#e7f6ec; color:#1f7a3a; }
.puce.bleu { background:var(--bleu-clair); color:var(--bleu); }
.puce.jaune { background:#fff4d6; color:#8a6100; }
.puce.gris { background:#eef0f3; color:var(--doux); }
.point { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--rouge); margin-right:8px; }
.point.on { background:var(--vert); }
.ligne { display:flex; gap:10px; flex-wrap:wrap; }
.ligne input { flex:1; min-width:0; }
.grille { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grille .large { grid-column:1 / -1; }
.tableau { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--doux); font-weight:600; padding:8px; font-size:13px; }
td { padding:12px 8px; border-top:1px solid var(--ligne); vertical-align:middle; }
.prix { white-space:nowrap; }
.actions { display:flex; flex-direction:column; gap:4px; white-space:nowrap; }
.actions form { margin:0; }
.alerte { padding:14px 0; border-top:1px solid var(--ligne); }
.alerte:first-child { border-top:0; padding-top:0; }
.alerte-haut { display:flex; justify-content:space-between; gap:16px; }
.alerte-haut a { font-weight:600; text-decoration:none; }
.alerte p { margin:2px 0 0; }
.profil { margin:0 0 8px; }
.profil div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--ligne); }
.profil div:first-child { border-top:0; padding-top:0; }
.profil dt { color:var(--doux); } .profil dd { margin:0; font-weight:600; overflow-wrap:anywhere; text-align:right; }

/* --- pages publiques (présentation, connexion) --- */
.entete { display:flex; justify-content:space-between; align-items:center; max-width:960px; margin:0 auto; padding:18px 20px; }
.public { max-width:960px; margin:0 auto; padding:0 20px 48px; }
.pied { text-align:center; font-size:14px; padding:32px 20px 40px; }
.pied a { color:var(--doux); display:inline-flex; }
.pied a:hover { color:#5865F2; }
.logo-discord { width:28px; height:28px; }
.numero { display:inline-flex; flex:none; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; background:#e9ebf0; color:var(--texte); font-weight:700; }
.centre { display:flex; justify-content:center; align-items:center; min-height:calc(100vh - 150px); padding:24px 0; }
.formulaire-connexion { width:100%; max-width:420px; }
.formulaire-connexion { padding:32px 28px; }
.formulaire-connexion h1 { font-size:1.5rem; }
.logo-carte { display:flex; justify-content:center; margin-bottom:14px; }
.sous-titre { color:var(--doux); margin:0 0 22px; }
.connexion { display:flex; flex-direction:column; gap:14px; }
.connexion .aide { margin:0; }
.appareil { background:var(--fond); border:1px solid var(--ligne); border-radius:10px; padding:10px 14px; font-weight:600; }

/* --- espace connecté : menu à gauche --- */
.espace { display:flex; min-height:100vh; }
.menu { width:232px; flex:none; background:#fff; border-right:1px solid var(--ligne); padding:0 14px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.menu::before { content:""; display:block; height:4px; margin:0 -14px 18px; background:linear-gradient(90deg, var(--rouge) 0 25%, var(--bleu) 25% 50%, var(--jaune) 50% 75%, #86b817 75%); }
.menu .logo { padding:0 8px 18px; }
.menu nav { display:flex; flex-direction:column; gap:4px; }
.menu nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--texte); text-decoration:none; font-weight:500; }
.menu nav a svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.menu nav a:hover { background:var(--fond); }
.menu nav a.actif { background:var(--bleu-clair); color:var(--bleu); font-weight:600; }
.menu .bas { margin-top:auto; padding:14px 8px 0; border-top:1px solid var(--ligne); }
.menu .bot { color:var(--doux); font-size:14px; margin:0 0 8px; }
.menu .bas form { margin:0; }
.contenu { flex:1; min-width:0; padding:32px 36px 48px; }
.contenu > * { max-width:900px; margin-left:auto; margin-right:auto; }

/* --- mobile --- */
@media (max-width:760px) {
  .espace { flex-direction:column; }
  .menu { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; padding:0 12px 10px; border-right:0; border-bottom:1px solid var(--ligne); }
  .menu::before { flex:none; width:calc(100% + 24px); margin:0 -12px 10px; }
  .menu .logo { padding:0 4px 8px; }
  .menu nav { flex-direction:row; flex:1 0 100%; order:3; overflow-x:auto; gap:2px; }
  .menu nav a { padding:8px 9px; white-space:nowrap; font-size:14px; }
  .menu nav a svg { display:none; }
  .menu .bas { margin:0 0 6px auto; border:0; padding:0; display:flex; align-items:center; gap:12px; }
  .menu .bot { margin:0; font-size:13px; }
  .contenu { padding:20px 16px 40px; }
  .grille { grid-template-columns:1fr; }
  .carte { padding:16px; }
  th:nth-child(2), td:nth-child(2) { display:none; }
}
.menu nav a.externe { margin-top:10px; border-top:1px solid var(--ligne); border-radius:0 0 10px 10px; padding-top:14px; }

/* --- page de présentation --- */
.hero { padding:56px 0 8px; }
.hero h1 { font-size:2.8rem; line-height:1.1; max-width:620px; margin:0 0 28px; }
.bouton.grand { padding:14px 28px; font-size:1.05rem; }
.etapes { list-style:none; margin:44px 0 28px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.etape { background:var(--carte); border:1px solid var(--ligne); border-top:4px solid var(--ligne); border-radius:14px; padding:22px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.etape h2 { font-size:1.1rem; margin:14px 0 8px; }
.etape p { margin:0; color:var(--doux); font-size:.97rem; }
.etape .numero { width:34px; height:34px; color:#fff; }
.etape.rouge { border-top-color:var(--rouge); } .etape.rouge .numero { background:var(--rouge); }
.etape.bleu { border-top-color:var(--bleu); } .etape.bleu .numero { background:var(--bleu); }
.etape.jaune { border-top-color:var(--jaune); } .etape.jaune .numero { background:var(--jaune); color:#191919; }
.actions-hero { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.bouton-discord { display:inline-flex; align-items:center; gap:10px; background:#5865F2; color:#fff; text-decoration:none; font-weight:600; font-size:1.05rem; border-radius:10px; padding:14px 24px; }
.bouton-discord:hover { background:#4752c4; }
.bouton-discord .logo-discord { width:24px; height:24px; }
.transparence { display:flex; gap:14px; align-items:flex-start; background:var(--carte); border:1px solid var(--ligne); border-radius:14px; padding:18px 22px; color:var(--doux); font-size:.95rem; }
.transparence p { margin:0; }
.transparence .puce { flex:none; margin-top:1px; }
@media (max-width:760px) { .etapes { grid-template-columns:1fr; } .transparence { flex-direction:column; gap:8px; } }
@media (max-width:760px) { .hero { padding-top:36px; } .hero h1 { font-size:2.1rem; } }

/* --- panneau administrateur --- */
.tuiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:0 0 18px; }
.tuile { background:var(--carte); border:1px solid var(--ligne); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.tuile-nom { color:var(--doux); font-size:13px; font-weight:600; }
.tuile strong { font-size:1.9rem; line-height:1.2; }
.tuile strong.rouge { color:var(--rouge); }
.rang { display:flex; align-items:center; gap:12px; padding:5px 0; }
.rang-nom { width:56px; flex:none; color:var(--doux); font-size:13px; }
.rang-nom.large { width:auto; flex:1; color:var(--texte); font-size:14px; }
.barre { flex:1; height:10px; background:#eef0f3; border-radius:999px; overflow:hidden; }
.barre span { display:block; height:100%; border-radius:999px; background:var(--bleu); }
.barre span.vert { background:var(--vert); } .barre span.jaune { background:var(--jaune); }
.barre span.rouge { background:var(--rouge); } .barre span.orange { background:#f08a24; } .barre span.bleu { background:var(--bleu); }
.rang strong { min-width:28px; text-align:right; font-size:14px; }
.puce.rouge { background:#fde8e9; color:#b3202a; }
.evenement { display:flex; gap:12px; align-items:baseline; padding:8px 0; border-top:1px solid var(--ligne); font-size:14px; }
.evenement:first-of-type { border-top:0; }
.evenement > span:nth-child(2) { flex:1; overflow-wrap:anywhere; }
.evenement .puce { flex:none; font-size:12px; padding:2px 9px; }
@media (max-width:760px) { .tuiles { grid-template-columns:1fr 1fr; } }