/* ===========================================================================
   La fiche profil en carte d'identité, et les médailles (28/10/2026, 0.2.8)
   ---------------------------------------------------------------------------
   Un clic sur la photo de quelqu'un ouvre sa carte : bande du haut aux
   couleurs de la charte, photo à gauche, identité à droite, les médailles
   dessous, un pied façon bande de lecture. Voir public/js/profil-carte.js.
   =========================================================================== */

/* --- Les avatars se cliquent ------------------------------------------- */
.avatar-cliquable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.avatar-cliquable:hover { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(11,65,122,.18); }

/* --- Le voile et la carte ---------------------------------------------- */
.carte-identite-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,65,122,.35); backdrop-filter: blur(3px);
  padding: 16px;
  opacity: 0; transition: opacity .18s ease;
}
.carte-identite-overlay.visible { opacity: 1; }
.carte-identite {
  width: 460px; max-width: 100%;
  border-radius: 18px; overflow: hidden;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(11,65,122,.35);
  transform: translateY(14px) scale(.98); transition: transform .18s ease;
}
.carte-identite-overlay.visible .carte-identite { transform: none; }

.ci-bande {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(100deg, var(--navy) 0%, #1b5fa8 55%, var(--coral) 100%);
  color: #FFF;
}
.ci-marque { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: .12em; font-size: var(--txt-sm); }
.ci-type { flex: 1; font-size: var(--txt-xs); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ci-numero { font-family: 'Poppins', sans-serif; font-size: var(--txt-xs); font-weight: 700; letter-spacing: .1em; opacity: .95; }
.ci-fermer {
  border: 0; background: rgba(255,255,255,.18); color: #FFF; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; font-family: inherit;
}
.ci-fermer:hover { background: rgba(255,255,255,.3); }

.ci-corps {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 18px 6px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,96,88,.08), transparent 45%),
    linear-gradient(135deg, rgba(11,65,122,.07), transparent 60%),
    var(--card);
}
.ci-photo .avatar {
  border: 3px solid #FFF; box-shadow: 0 8px 20px rgba(11,65,122,.22);
  border-radius: 14px;
}
.ci-photo .avatar img { border-radius: 11px; }
.ci-infos { flex: 1; min-width: 0; }
.ci-nom { font-family: 'Poppins', sans-serif; font-size: var(--txt-xl); font-weight: 700; line-height: 1.2; }
.ci-role { font-size: var(--txt-sm); color: var(--text-soft); font-weight: 600; margin: 2px 0 10px; }
.ci-champs { margin: 0; display: grid; gap: 6px; }
.ci-champs > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--border); padding-bottom: 5px; }
.ci-champs dt { font-size: var(--txt-xs); color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: 0; }
.ci-champs dd { margin: 0; font-size: var(--txt-md); font-weight: 600; text-align: right; }

.ci-medailles { padding: 10px 18px 14px; }
.ci-medailles-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--txt-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 8px;
}
.ci-medailles-compte { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--navy); }

.ci-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 18px 12px; border-top: 1px solid var(--border);
  background: rgba(11,65,122,.04);
}
.ci-code { font-family: monospace; letter-spacing: -1px; color: var(--navy); opacity: .55; overflow: hidden; white-space: nowrap; flex: 1; }
.ci-signature { font-family: 'Poppins', sans-serif; font-style: italic; font-size: var(--txt-md); color: var(--navy); opacity: .8; }

/* --- Les médailles ------------------------------------------------------ */
.medailles-grille { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.medaille { display: flex; flex-direction: column; align-items: center; width: 76px; text-align: center; }
.medaille svg { width: 44px; height: 58px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); }
.medaille-ruban { fill: var(--coral); }
.medaille-ruban-fonce { fill: var(--brand-red); }
.medaille-anneau { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.medaille-rang { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13.5px; fill: rgba(0,0,0,.6); }
.medaille-or .medaille-disque { fill: var(--jaune); stroke: #c9951d; stroke-width: 1.5; }
.medaille-argent .medaille-disque { fill: #cfd5de; stroke: #8f99a6; stroke-width: 1.5; }
.medaille-bronze .medaille-disque { fill: #d08a4e; stroke: #8c5a2b; stroke-width: 1.5; }
.medaille-mois { font-size: var(--txt-xs); font-weight: 700; color: var(--text); margin-top: 2px; line-height: 1.2; }
.medaille-detail { font-size: var(--txt-xs); color: var(--text-soft); }
.medailles-vide { font-size: var(--txt-sm); color: var(--text-soft); line-height: 1.5; }
.medailles-note { font-size: var(--txt-xs); color: var(--text-soft); margin-top: 12px; line-height: 1.5; }

/* --- Thème sombre ------------------------------------------------------- */
[data-theme="dark"] .carte-identite-overlay { background: rgba(0,0,0,.55); }
[data-theme="dark"] .ci-photo .avatar { border-color: rgba(255,255,255,.2); }
[data-theme="dark"] .ci-medailles-compte, [data-theme="dark"] .ci-code, [data-theme="dark"] .ci-signature { color: #8FB3DE; }
[data-theme="dark"] .ci-pied { background: rgba(255,255,255,.04); }

/* --- Petit écran -------------------------------------------------------- */
@media (max-width: 560px) {
  .ci-corps { flex-direction: column; align-items: center; text-align: center; }
  .ci-champs > div { flex-direction: column; gap: 2px; }
  .ci-champs dd { text-align: center; }
}