/* ==========================================================================
   admin.css — Panneau d'administration (même famille visuelle que le site)
   ========================================================================== */

:root {
  --jaune: #FFC400;
  --bleu: #0B4EA2;
  --fond: #0E0F11;
  --panneau: #17191D;
  --panneau-2: #1E2126;
  --bord: #2A2F35;
  --bord-clair: #3A4149;
  --texte: #EDEFF2;
  --texte-doux: #A7AFB8;
  --ok: #4CC38A;
  --erreur: #FF7B7B;
  --rayon: 12px;
}

/* L'attribut hidden doit toujours masquer l'élément, même quand une règle
   de mise en page lui impose display: grid ou flex (sinon deux écrans
   s'affichent l'un sous l'autre). */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.55;
}
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.08rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }
code { background: var(--panneau-2); padding: 2px 6px; border-radius: 6px; font-size: .86em; }
label { display: block; font-size: .84rem; font-weight: 700; margin: 0 0 6px; }
.muted { color: var(--texte-doux); }
.petit { font-size: .82rem; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .93rem;
  background: #12141a; color: var(--texte); border: 1px solid var(--bord-clair); border-radius: 9px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(255,196,0,.15); }
textarea { resize: vertical; min-height: 90px; }
input[type="color"] { width: 54px; height: 38px; padding: 3px; background: #12141a; border: 1px solid var(--bord-clair); border-radius: 9px; cursor: pointer; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--jaune); cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 11px 18px; border-radius: 9px; border: 1px solid transparent; font: inherit; font-weight: 700;
  font-size: .9rem; cursor: pointer; transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-jaune { background: var(--jaune); color: #15171b; }
.btn-gris { background: var(--panneau-2); color: var(--texte); border-color: var(--bord-clair); }
.btn-danger { background: transparent; color: var(--erreur); border-color: rgba(255,123,123,.4); }
.btn-petit { padding: 7px 12px; font-size: .82rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ============================== CONNEXION ============================== */

.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 420px at 50% 0%, rgba(255,196,0,.09), transparent 65%), var(--fond); }
.connexion-boite {
  width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--panneau-2), var(--panneau));
  border: 1px solid var(--bord); border-radius: 16px; padding: 30px;
}
.connexion-logo { height: 46px; width: auto; margin: 0 auto 14px; }
.connexion-boite h1 { text-align: center; }
.connexion-boite > p.muted { text-align: center; margin-bottom: 22px; }
.connexion-boite label { margin-top: 12px; }
.connexion-boite .btn { width: 100%; margin-top: 20px; }
.message-connexion { margin: 14px 0 0; font-size: .9rem; font-weight: 600; color: var(--erreur); min-height: 20px; text-align: center; line-height: 1.5; }
.message-connexion.reseau { color: var(--jaune); }
.connexion-boite .petit { margin: 16px 0 0; text-align: center; line-height: 1.5; }

/* =============================== PANNEAU =============================== */

.panneau { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; }

.barre {
  background: #0b0c0e; border-right: 1px solid var(--bord);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.barre-marque { display: flex; gap: 11px; align-items: center; padding: 18px 18px 16px; border-bottom: 1px solid var(--bord); }
.barre-marque img { height: 34px; width: auto; }
.barre-marque strong { display: block; font-size: .96rem; }
.barre-marque span { display: block; }

.barre-nav { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; overflow-y: auto; flex: 1; }
.barre-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--texte-doux); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.barre-nav button:hover { background: var(--panneau-2); color: #fff; }
.barre-nav button.actif { background: rgba(255,196,0,.12); border-color: rgba(255,196,0,.35); color: var(--jaune); }
.barre-nav .pt { width: 18px; text-align: center; opacity: .95; }
.pastille { margin-left: auto; background: var(--jaune); color: #15171b; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; }

.barre-bas { border-top: 1px solid var(--bord); padding: 14px; display: grid; gap: 8px; }
.lien-site { font-size: .88rem; font-weight: 600; color: var(--texte); }
.lien-site:hover { color: var(--jaune); }
.lien-quitter { background: transparent; border: 1px solid var(--bord-clair); color: var(--texte-doux); border-radius: 9px; padding: 9px; font: inherit; font-size: .86rem; cursor: pointer; }
.lien-quitter:hover { border-color: var(--erreur); color: var(--erreur); }

/* =============================== CONTENU =============================== */

.contenu { min-width: 0; display: flex; flex-direction: column; }
.contenu-entete {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 26px; background: rgba(14,15,17,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord);
}
.contenu-entete h1 { margin: 0; }
.entete-droite { display: flex; align-items: center; gap: 12px; }
.etat { font-size: .84rem; font-weight: 700; color: var(--ok); }
.etat.modifie { color: var(--jaune); }
.etat.erreur { color: var(--erreur); }

.contenu-corps { padding: 26px; max-width: 1080px; }

.carte-bloc {
  background: linear-gradient(180deg, var(--panneau-2), var(--panneau));
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; margin-bottom: 20px;
}
.carte-bloc > h2 { padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--bord); }
.aide { font-size: .84rem; color: var(--texte-doux); margin: -6px 0 16px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.champ { margin-bottom: 16px; }
.ligne-case { display: flex; align-items: center; gap: 10px; }
.ligne-case label { margin: 0; }

/* Listes répétables */
.element-liste { border: 1px solid var(--bord); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: #14161b; }
.element-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.element-numero { width: 26px; height: 26px; border-radius: 7px; background: var(--panneau-2); border: 1px solid var(--bord-clair);
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: var(--jaune); flex: 0 0 auto; }
.element-tete .actions { margin-left: auto; display: flex; gap: 6px; }
.bouton-icone { width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--bord-clair); background: var(--panneau); color: var(--texte-doux); cursor: pointer; font-size: .9rem; }
.bouton-icone:hover { color: #fff; border-color: var(--texte-doux); }
.bouton-icone.supprimer:hover { color: var(--erreur); border-color: var(--erreur); }

/* Choix d'image */
.choix-image { display: flex; gap: 12px; align-items: flex-start; }
.choix-image .apercu {
  width: 132px; height: 92px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
  border: 1px dashed var(--bord-clair); background: #101216; display: grid; place-items: center; color: #5c646d; font-size: .72rem;
}
.choix-image .apercu img { width: 100%; height: 100%; object-fit: cover; }
.choix-image .commandes { flex: 1; display: grid; gap: 8px; }
.choix-image input[type="file"] { display: none; }

/* Graphiques simples du tableau de bord */
.grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: linear-gradient(180deg, var(--panneau-2), var(--panneau)); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; }
.stat strong { display: block; font-size: 1.8rem; color: var(--jaune); font-weight: 900; line-height: 1.1; }
.stat span { font-size: .84rem; color: var(--texte-doux); }
.raccourcis { display: flex; flex-wrap: wrap; gap: 10px; }

/* Messages */
.message-item { border: 1px solid var(--bord); border-radius: 10px; padding: 16px; margin-bottom: 12px; background: #14161b; }
.message-item.non-lu { border-left: 3px solid var(--jaune); }
.message-tete { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.message-tete strong { font-size: .96rem; }
.message-tete .date { margin-left: auto; font-size: .8rem; color: var(--texte-doux); }
.message-sujet { font-size: .84rem; color: var(--jaune); font-weight: 700; }
.message-texte { white-space: pre-wrap; font-size: .92rem; color: var(--texte); background: #101216; border-radius: 8px; padding: 12px; }
.message-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Tableau de bord : panneaux */
.deux-panneaux { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.liste-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.liste-simple li { display: flex; gap: 10px; font-size: .9rem; }
.liste-simple .coche { color: var(--jaune); font-weight: 800; }

@media (max-width: 900px) {
  .panneau { grid-template-columns: 1fr; }
  .barre { position: static; height: auto; }
  .barre-nav { flex-direction: row; flex-wrap: wrap; }
  .barre-nav button { width: auto; }
  .duo, .trio, .quatre, .grille-stats, .deux-panneaux { grid-template-columns: 1fr; }
  .contenu-entete { flex-direction: column; align-items: flex-start; }
}