:root {
  --generic-gradient: linear-gradient(135deg, #2f6fed 0%, #7b5cff 30%, #c65cdb 55%, #ff6f61 78%, #ffb648 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  /* --theme-* sont définies inline par index.php (couleurs réglables depuis l'admin) ;
     les valeurs ici ne servent que de filet de sécurité si jamais absentes. */
  background: var(--theme-bg, #fafafa);
  color: var(--theme-text, #111111);
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Centré horizontalement ET verticalement dans la fenêtre, quelle que soit
     sa taille. Si le contenu est plus grand que l'écran (petit mobile,
     beaucoup de liens), il déborde simplement en haut et en bas sans jamais
     être coupé — le centrage vertical ne s'applique que quand ça tient. */
}

.links-wrap {
  width: 100%;
  max-width: 460px;
  padding: 56px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.links-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 20px 50px rgba(0,0,0,0.12);
}
.links-avatar-generic { background: var(--generic-gradient); }

.links-name {
  font-size: 21px;
  font-weight: 800;
  margin-top: 18px;
  margin-bottom: 24px;
  text-align: center;
}

/* Rangée d'icônes rondes (réseaux sociaux) — reprend le look de l'original,
   distinct des boutons pleine largeur en dessous. */
.links-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 28px;
}
.link-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-button-bg, #ffffff);
  color: var(--theme-accent, #814625);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.link-icon-btn:hover {
  transform: scale(1.08);
  background: var(--theme-accent, #814625);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.link-icon-btn:active { transform: scale(0.94); }
.link-icon-btn svg { width: 24px; height: 24px; display: block; }

.links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--theme-button-bg, #ffffff);
  border: none;
  /* Contour fin façon "hairline" : un box-shadow de 1px rend un trait plus net
     qu'un border, quel que soit le zoom/écran — et reste fin même en couleur. */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  border-radius: 14px;
  padding: 15px 18px;
  color: var(--theme-button-text, #111111);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.link-btn:hover {
  box-shadow: 0 0 0 1px var(--theme-accent, #814625), 0 2px 8px rgba(0,0,0,0.06);
}
.link-btn:active { transform: scale(0.98); }

.link-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--theme-accent, #814625);
}
.link-btn-icon svg { width: 100%; height: 100%; display: block; }

.link-btn-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .links-wrap { padding: 40px 20px 40px; }
}