/* ==========================================================================
   style.css — feuille commune à inscription.php et admin.php
   Reprend exactement l'identité visuelle de index.html
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ---- Base identique à index.html ---------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Aucune image ne déborde de son conteneur, quelle que soit sa taille. */
img { max-width: 100%; height: auto; }

body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  background-color: #14110f;
  color: #333333;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.page { width: 100%; max-width: 620px; }
.page--large { max-width: 1180px; }

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
  overflow: hidden;
}

.main-content { padding: 24px; }

/* ---- Bannière dorée (identique à index.html) ---------------------------- */
.main-banner-container {
  position: relative;
  width: 100%;
  min-height: 110px;
  padding: 20px 18px;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #8b6508 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.main-banner-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.9rem;
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  line-height: 1.2;
}

.main-banner-sub {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 8px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.header-logo {
  display: block;
  max-width: 260px;
  max-height: 150px;
  width: auto;
  height: auto;
  margin: 20px auto 4px auto;
  object-fit: contain;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

.badge-prive {
  display: inline-block;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ---- Titres -------------------------------------------------------------- */
.event-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #000000;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 8px;
}

.event-date {
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  text-align: center;
  margin-bottom: 6px;
}

.event-lieu {
  text-align: center;
  color: #6b7280;
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff4757;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sidebar-title .count,
.compteur {
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

/* ==========================================================================
   FORMULAIRES — version centrée
   ========================================================================== */
.form-centre { max-width: 440px; margin: 0 auto; text-align: center; }

.champ { margin-bottom: 22px; text-align: center; }
.champ > label {
  display: block;
  font-weight: 700;
  color: #111827;
  font-size: 1rem;
  margin-bottom: 8px;
}
.aide { display: block; font-weight: 400; color: #6b7280; font-size: 0.83rem; margin-top: 3px; }

input[type=text], input[type=email], input[type=url], input[type=password], textarea, select {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 0.98rem;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type=text], input[type=email], input[type=password] { text-align: center; }
select { text-align: center; text-align-last: center; cursor: pointer; }
textarea { resize: vertical; min-height: 86px; text-align: left; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #ff4757;
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15);
}
input.erreur, textarea.erreur { border-color: #dc2626; background: #fef2f2; }
::placeholder { color: #9ca3af; }

.msg-erreur {
  color: #dc2626;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 7px;
  display: none;
}
.msg-erreur.visible { display: block; }

/* ---- Champ profil mis en avant ------------------------------------------- */
.champ-profil {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #ff4757;
  border-radius: 8px;
  padding: 20px 18px;
  margin-bottom: 22px;
  text-align: center;
}
.champ-profil > label { font-size: 1.08rem; margin-bottom: 10px; }
.champ-profil input[type=url] {
  font-size: 1.05rem;
  padding: 16px 16px;
  text-align: center;
  border-width: 2px;
  border-color: #d1d5db;
  background: #ffffff;
}
.champ-profil input[type=url]:focus { border-color: #ff4757; }

/* ---- Choix de catégorie --------------------------------------------------- */
/* La grille s'accorde au nombre de catégories réellement ouvertes :
   jamais de ligne bancale avec un carreau esseulé en dessous. */
.types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
  justify-content: center;
}
.types[data-nb="1"] { grid-template-columns: 1fr;             max-width: 220px; }
.types[data-nb="2"] { grid-template-columns: repeat(2, 1fr);  max-width: 320px; }
.types[data-nb="3"] { grid-template-columns: repeat(3, 1fr);  max-width: 440px; }
.types[data-nb="4"] { grid-template-columns: repeat(2, 1fr);  max-width: 340px; }  /* 2 + 2 */
.types[data-nb="5"] { grid-template-columns: repeat(3, 1fr);  max-width: 440px; }
/* 5 carreaux : les deux derniers sont centrés sous les trois premiers */
.types[data-nb="5"] .type-opt:nth-child(4) { grid-column: 1 / span 1; margin-left: 50%; }
.types[data-nb="5"] .type-opt:nth-child(5) { grid-column: 2 / span 1; margin-left: 50%; }
.types[data-nb="6"] { grid-template-columns: repeat(3, 1fr);  max-width: 440px; }
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt span.boite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px 10px;
  background-color: #f9fafb;
  border: 2px solid #f3f4f6;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
  text-align: center;
  user-select: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.type-opt span.boite .emo { font-size: 1.6rem; line-height: 1; }
/* ♀ ♂ ⚧ sont des caractères texte : la plupart des polices n'en proposent aucune
   graisse, d'où le contour, qui épaissit réellement le tracé. */
.type-opt span.boite .emo--genre {
  font-size: 2.1rem;
  font-weight: 900;
  -webkit-text-stroke: 0.7px currentColor;
}
/* Sélectionné, le carreau se colore : le symbole suit le reste du texte */
.type-opt input:checked + span.boite .emo--genre { color: inherit !important; }
.type-opt span.boite .places { font-size: 0.75rem; font-weight: 600; color: #6b7280; }
.type-opt span.boite:hover { background-color: #f3f4f6; border-color: #e5e7eb; }
.type-opt input:checked + span.boite { background-color: #ffffff; }
.type-opt[data-type=couple] input:checked + span.boite { border-color: #a855f7; color: #a855f7; }
.type-opt[data-type=femme]  input:checked + span.boite { border-color: #ec4899; color: #ec4899; }
.type-opt[data-type=homme]  input:checked + span.boite { border-color: #3b82f6; color: #3b82f6; }
.type-opt[data-type=trans]  input:checked + span.boite { border-color: #eab308; color: #eab308; }
.type-opt input:focus-visible + span.boite { outline: 2px solid #ff4757; outline-offset: 2px; }

/* Écrans étroits : deux colonnes, et le carreau orphelin prend toute la largeur */
@media (max-width: 430px) {
  .types { gap: 10px; }
  .types[data-nb="3"],
  .types[data-nb="4"],
  .types[data-nb="5"],
  .types[data-nb="6"] { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
  .types[data-nb="3"] .type-opt:last-child,
  .types[data-nb="5"] .type-opt:last-child { grid-column: 1 / -1; }
  .types[data-nb="5"] .type-opt:nth-child(4),
  .types[data-nb="5"] .type-opt:nth-child(5) { grid-column: auto; margin-left: 0; }
  .types[data-nb="5"] .type-opt:nth-child(5) { grid-column: 1 / -1; }
  .type-opt span.boite { padding: 14px 8px; font-size: 0.9rem; }
  .type-opt span.boite .emo { font-size: 1.4rem; }
}

.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   BOUTONS — reprennent le style du bouton d'inscription de index.html
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ff4757;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s, opacity 0.2s;
}
.btn:hover { background-color: #e03040; box-shadow: 0 4px 14px rgba(255, 71, 87, 0.4); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn--large { width: 100%; padding: 17px 28px; font-size: 1.06rem; }
.btn--gris { background-color: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; box-shadow: none; }
.btn--gris:hover { background-color: #e5e7eb; box-shadow: none; }
.btn--vert { background-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
.btn--vert:hover { background-color: #15803d; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4); }
.btn--bleu { background-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
.btn--bleu:hover { background-color: #2563eb; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4); }
.btn--orange { background-color: #ea580c; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3); }
.btn--orange:hover { background-color: #c2410c; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4); }
.btn--rouge { background-color: #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); }
.btn--rouge:hover { background-color: #b91c1c; }
.btn--mini { padding: 8px 12px; font-size: 0.82rem; box-shadow: none; }

/* ---- Barres de boutons CENTRÉES ------------------------------------------ */
.barre-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.barre-haut { text-align: center; margin-bottom: 20px; }
.barre-haut h1 {
  color: #ffffff;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: 14px;
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.alerte {
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid;
  text-align: center;
}
.alerte--ko { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.alerte--ok { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.alerte--info { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

.rappel {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #ff4757;
  border-radius: 6px;
  padding: 15px 18px;
  font-size: 0.86rem;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

/* ---- Confirmation --------------------------------------------------------- */
.confirmation { text-align: center; padding: 16px 0; }
.confirmation .coche {
  width: 76px; height: 76px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: #f0fdf4;
  border: 3px solid #16a34a;
  color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.confirmation h2 { color: #111827; font-size: 1.4rem; margin-bottom: 10px; }
.confirmation p { color: #6b7280; font-size: 0.95rem; line-height: 1.6; max-width: 420px; margin: 0 auto; }

/* ==========================================================================
   STATISTIQUES (style des .price-box de index.html)
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.stat {
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid #e5e7eb;
}
.stat b { display: block; font-size: 1.35rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.stat small { font-size: 0.82rem; font-weight: 700; color: #6b7280; }

/* --- Première ligne : vue d'ensemble, quatre tuiles de même largeur --- */
.stats--global { grid-template-columns: repeat(4, 1fr); }
.stat--phare { background-color: #fff1f2; border-color: #fecdd3; }
.stat--phare b { color: #ff4757; }
.stat--phare small { color: #b91c1c; }
.stat--libre b { color: #9ca3af; }

/* --- Seconde ligne : une tuile par catégorie ouverte à l'inscription --- */
.stats--types {
  margin-top: 12px; padding-top: 14px; border-top: 1px solid #f3f4f6;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.stat--type[data-cat=couple] { --cat: #a855f7; --cat-clair: #faf5ff; --cat-bord: #e9d5ff; }
.stat--type[data-cat=femme]  { --cat: #ec4899; --cat-clair: #fdf2f8; --cat-bord: #fbcfe8; }
.stat--type[data-cat=homme]  { --cat: #3b82f6; --cat-clair: #eff6ff; --cat-bord: #bfdbfe; }
.stat--type[data-cat=trans]  { --cat: #a16207; --cat-clair: #fefce8; --cat-bord: #fde68a; }
.stat--type {
  background-color: var(--cat-clair, #f9fafb);
  border-color: var(--cat-bord, #e5e7eb);
  padding: 12px 8px;
}
.stat--type b { color: var(--cat, #111827); font-size: 1.25rem; margin-bottom: 3px; }
.stat--type small { display: block; color: var(--cat, #6b7280); font-size: 0.76rem; }
.stat-pers {
  display: inline-block; margin-top: 6px; padding: 1px 9px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--cat-bord, #e5e7eb);
  color: var(--cat, #6b7280); font-size: 0.66rem; font-weight: 700; white-space: nowrap;
}

@media (max-width: 620px) {
  .stats--global { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Étiquettes ----------------------------------------------------------- */
.puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.puce--couple  { background: #faf5ff; color: #a855f7; border-color: #e9d5ff; }
.puce--femme   { background: #fdf2f8; color: #ec4899; border-color: #fbcfe8; }
.puce--homme   { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.puce--trans   { background: #fefce8; color: #a16207; border-color: #fde68a; }
.puce--attente { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.puce--approuve{ background: #f0fdf4; color: #15803d; border-color: #86efac; }
.puce--refuse  { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
.puce--liste   { background: #fff7ed; color: #c2410c; border-color: #fdba74; }

/* ==========================================================================
   QUOTAS PAR CATÉGORIE
   ========================================================================== */
.quotas { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f3f4f6; }
.quotas-titre {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.6px; color: #6b7280; text-align: center; margin-bottom: 12px;
}
.quota-ligne {
  display: grid; grid-template-columns: 150px 1fr 200px;
  align-items: center; gap: 12px; padding: 7px 0;
}
.quota-nom { font-weight: 700; color: #374151; font-size: 0.86rem; }
.quota-barre {
  height: 9px; border-radius: 999px; background: #f3f4f6;
  border: 1px solid #e5e7eb; overflow: hidden;
}
.quota-barre i { display: block; height: 100%; transition: width .4s ease; }
.quota-texte { font-size: 0.82rem; color: #6b7280; text-align: right; white-space: nowrap; }
.quota-texte b { color: #374151; }
.quota--plein .quota-texte { color: #b91c1c; }
.quota--plein .quota-texte b { color: #b91c1c; }
.quota--plein .quota-barre i { background: #dc2626 !important; }
.quota--presque .quota-texte { color: #b45309; }
.quotas-aide {
  margin-top: 12px; font-size: 0.78rem; color: #9ca3af;
  text-align: center; line-height: 1.55;
}
.quotas-aide b { color: #c2410c; }
.ligne-liste { background-color: #fff8f3 !important; }

/* ==========================================================================
   TABLEAUX COMPACTS — page des participants
   ========================================================================== */
/* min-width remis à zéro : la règle générale « table » impose 700px,
   ce qui forcerait une barre de défilement dans les volets de catégorie. */
.tableau-compact { width: 100%; min-width: 0; font-size: 0.85rem; table-layout: auto; }
.tableau-compact th,
.tableau-compact td { padding: 8px 9px; vertical-align: middle; }
.tableau-compact th { white-space: nowrap; }

/* Largeurs : les colonnes techniques sont fixes, le pseudo prend le reste
   sans jamais s'étirer démesurément. */
.tableau-compact .col-num     { width: 36px; text-align: center; }
.tableau-compact .col-pseudo  { width: 22%; min-width: 130px; word-break: break-word; }
.tableau-compact .col-pl      { width: 42px; text-align: center; font-weight: 700; color: #6b7280; }
.tableau-compact .col-cat     { width: 130px; }
.tableau-compact .col-repli   { width: 16%; min-width: 92px; }
.tableau-compact .col-date    { width: 70px; color: #9ca3af; font-size: 0.78rem; white-space: nowrap; }
.tableau-compact .col-actions { width: 138px; text-align: center; }

.tableau-compact .col-pseudo b { color: #111827; }
.tableau-compact .col-pseudo .lien-profil {
  display: inline-block; margin-left: 5px; color: #3b82f6;
  text-decoration: none; font-weight: 700;
}
.tableau-compact .col-pseudo .lien-profil:hover { color: #1d4ed8; }
.mini-liste {
  display: block; margin-top: 2px; font-size: 0.68rem;
  font-weight: 700; color: #c2410c;
}

/* Cellule repliée : extrait cliquable */
.cel-repliee {
  max-width: 100%; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: #f9fafb; border: 1px solid #e5e7eb; color: #4b5563;
  font-family: inherit; font-size: 0.76rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cel-repliee:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.cel-vide { color: #d1d5db; }

/* Actions en icônes */
.tableau-compact .actions { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; }
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px; padding: 0;
  border-radius: 6px; cursor: pointer;
  background: #f9fafb; border: 1px solid #e5e7eb; color: #6b7280;
  font-family: inherit; line-height: 1; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
/* Les icônes sont en SVG : elles héritent de la couleur du bouton */
.ico svg { width: 15px; height: 15px; display: block; }
.ico:hover { transform: translateY(-1px); }
.ico:disabled { opacity: 0.35; cursor: default; transform: none; }

/* Fond clair au repos, couleur franche au survol */
.ico:hover        { background: #eef0f3; border-color: #cbd5e1; color: #374151; }

.ico--bleu        { background: #eff6ff; border-color: #bfdbfe; color: #3b82f6; }
.ico--bleu:hover  { background: #3b82f6; border-color: #2563eb; color: #fff; }

.ico--vert        { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.ico--vert:hover  { background: #16a34a; border-color: #15803d; color: #fff; }

.ico--orange      { background: #fff7ed; border-color: #fed7aa; color: #ea580c; }
.ico--orange:hover{ background: #ea580c; border-color: #c2410c; color: #fff; }

.ico--rouge       { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.ico--rouge:hover { background: #dc2626; border-color: #b91c1c; color: #fff; }

/* Actions neutres : gris très clair, gris franc au survol */
.ico--gris        { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.ico--gris:hover  { background: #64748b; border-color: #475569; color: #fff; }

/* ==========================================================================
   GROUPES DE CATÉGORIE, REPLIABLES
   ========================================================================== */
.groupe-cat {
  border: 1px solid #f3f4f6; border-radius: 8px;
  overflow: hidden; margin-bottom: 10px;
}
.groupe-cat-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; cursor: pointer; list-style: none;
  background: #f9fafb; transition: background 0.2s;
}
.groupe-cat-titre::-webkit-details-marker { display: none; }
.groupe-cat-titre:hover { background: #f3f4f6; }
.groupe-cat[open] > .groupe-cat-titre { background: #fff; border-bottom: 1px solid #f3f4f6; }
.groupe-cat-gauche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

/* Chaque catégorie porte sa couleur, reprise par le compteur et la bulle */
.groupe-cat[data-cat=couple] { --cat: #a855f7; --cat-clair: #faf5ff; --cat-bord: #e9d5ff; }
.groupe-cat[data-cat=femme]  { --cat: #ec4899; --cat-clair: #fdf2f8; --cat-bord: #fbcfe8; }
.groupe-cat[data-cat=homme]  { --cat: #3b82f6; --cat-clair: #eff6ff; --cat-bord: #bfdbfe; }
.groupe-cat[data-cat=trans]  { --cat: #a16207; --cat-clair: #fefce8; --cat-bord: #fde68a; }

.groupe-cat-compte {
  padding: 2px 11px; border-radius: 999px; white-space: nowrap;
  background: #ffffff; color: var(--cat, #374151);
  border: 1px solid var(--cat-bord, #e5e7eb);
  font-size: 0.78rem; font-weight: 800;
}
.groupe-cat-pers {
  padding: 2px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--cat-clair, #f3f4f6); color: var(--cat, #6b7280);
  border: 1px solid var(--cat-bord, #e5e7eb);
  font-size: 0.74rem; font-weight: 700;
}
.groupe-cat-fleche { color: #9ca3af; font-size: 0.8rem; flex: none; transition: transform 0.25s; }
.groupe-cat[open] .groupe-cat-fleche { transform: rotate(180deg); }
.compteur--gris { background-color: #e5e7eb; color: #6b7280; }

/* ==========================================================================
   FENÊTRE DE DÉTAIL
   ========================================================================== */
.voile-detail {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 17, 15, 0.78); padding: 20px;
  align-items: center; justify-content: center;
}
.voile-detail.visible { display: flex; }
.fenetre-detail {
  background: #fff; border-radius: 12px; width: 100%; max-width: 420px;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.fenetre-detail-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
  font-weight: 800; color: #111827; font-size: 0.92rem;
}
.fenetre-detail-fermer {
  width: 28px; height: 28px; flex: none; border-radius: 6px; cursor: pointer;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280; font-size: 0.8rem;
}
.fenetre-detail-fermer:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.fenetre-detail-corps { padding: 18px; overflow-y: auto; }
.detail-valeur {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 14px; font-size: 0.9rem; line-height: 1.65; color: #374151;
  word-break: break-word; white-space: pre-wrap;
}

@media (max-width: 760px) {
  .tableau-compact .col-cat { width: auto; }
  .tableau-compact .col-actions { width: auto; }
}
@media (max-width: 620px) {
  .quota-ligne { grid-template-columns: 1fr; gap: 5px; text-align: center; }
  .quota-texte { text-align: center; }
}

/* ==========================================================================
   TABLEAU ADMIN
   ========================================================================== */
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 700px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
th {
  background-color: #f9fafb;
  color: #6b7280;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
tbody tr:hover { background-color: #f9fafb; }
td.num { color: #9ca3af; font-weight: 700; width: 44px; text-align: center; }
.ligne-attente { background-color: #fffdf5; }
.ligne-editee { background-color: #eff6ff !important; }
.vide { text-align: center; color: #9ca3af; padding: 34px 12px; font-weight: 600; font-style: italic; }

.actions { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; }
.actions form { display: inline; margin: 0; }

.lien-profil {
  font-size: 0.8rem;
  color: #ff4757;
  text-decoration: none;
  font-weight: 600;
}
.lien-profil:hover { text-decoration: underline; }

/* ---- Formulaire d'édition ------------------------------------------------- */
.edition { border: 2px solid #3b82f6; }
.edition-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  text-align: left;
  margin-bottom: 20px;
}
.edition-grille .champ { text-align: left; margin-bottom: 0; }
.edition-grille .champ > label { text-align: left; }
.edition-grille input[type=text],
.edition-grille input[type=email],
.edition-grille input[type=url] { text-align: left; }
.edition-grille select { text-align: left; text-align-last: left; }
.edition-pleine { grid-column: 1 / -1; }

/* ---- Liens bas de page ---------------------------------------------------- */
.liens { text-align: center; padding: 4px 0 12px; }
.liens a {
  color: #ffffff;
  opacity: 0.75;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 10px;
}
.liens a:hover { opacity: 1; text-decoration: underline; }

.copyright {
  text-align: center;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 14px 0 4px;
}

@media (max-width: 560px) {
  body { padding: 16px 12px; }
  .main-content { padding: 18px; }
  .main-banner-title { font-size: 1.4rem; }
  .btn { width: 100%; }
  .barre-boutons .btn { width: auto; flex: 1 1 140px; }
}