/* ==================== components/contact-links.css ==================== */
/* Liens de contact footer - Présent sur toutes les pages */

/* ==================== CONTAINER DU CONTACT ==================== */

#contact-container {
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

/* ==================== CONTACT BLOCK ==================== */

.account-block.contact-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
  /*padding: var(--box-gap);*/
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast);
}

.account-block.contact-block:hover {
  box-shadow: var(--shadow-sm);
}

/* ==================== CONTACT ROW (6 colonnes) ==================== */

.contact-row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: var(--box-gap) !important;
}

/* ==================== CONTACT BOX (cases individuelles) ==================== */

.contact-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  min-height: 60px;
}

.contact-box:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-box:active {
  transform: translateY(0);
}

/* ==================== CONTACT ICON ==================== */

.contact-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.contact-box:hover .contact-icon {
  transform: scale(1.1);
  color: var(--color-primary-dark);
}

/* Couleurs spécifiques par plateforme (optionnel) */
.contact-box:nth-child(1) .contact-icon {
  /* Email - Bleu primaire */
  color: var(--color-primary);
}

.contact-box:nth-child(2) .contact-icon {
  /* Telegram - Bleu Telegram */
  color: #0088cc;
}

.contact-box:nth-child(3) .contact-icon {
  /* Discord - Bleu Discord */
  color: #5865F2;
}

/* Mode sombre : ajuster les couleurs */
:root[data-theme="dark"] .contact-box:nth-child(2) .contact-icon {
  color: #29b6f6;
}

:root[data-theme="dark"] .contact-box:nth-child(3) .contact-icon {
  color: #7289da;
}

/* ==================== CONTACT LABEL ==================== */

.contact-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}

/* ==================== FORCE GRID (spécificité maximale) ==================== */

/* Desktop : forcer 6 colonnes */
#contact-container .dashboard-container .account-block.contact-block .account-header-row.contact-row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
}

/* ==================== RESPONSIVE ==================== */

/* Tablette (768px et moins) */
@media (max-width: 768px) {
  /* ✅ Garder 3 colonnes en tablette - Spécificité maximale */
  #contact-container .dashboard-container .account-block.contact-block .account-header-row.contact-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--box-gap) !important;
  }
  
  /*.contact-box {
    padding: var(--spacing-sm);
    min-height: 40px;
  }*/
  
  .contact-icon {
    width: 28px;
    height: 28px;
  }
  
  .contact-label {
    font-size: var(--font-size-sm);
  }
}

/* Mobile (480px et moins) */
@media (max-width: 480px) {
  /* ✅ Forcer 3 colonnes en mobile - Spécificité maximale */
  #contact-container .dashboard-container .account-block.contact-block .account-header-row.contact-row {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: calc(var(--box-gap) / 2) !important;
  }
  
  /*.account-block.contact-block {
    padding: calc(var(--box-gap) / 2);
  }*/
  
  .contact-box {
    padding: var(--spacing-sm);
    min-height: 40px;
  }
  
  .contact-icon {
    width: 24px;
    height: 24px;
  }
  
  .contact-label {
    font-size: var(--font-size-xs);
  }
  
  /* ✅ Logo encore plus petit en mobile */
  .contact-box-logo svg.easyalgos-logo {
    max-height: 24px !important;
    max-width: 100% !important;
  }
}

/* ==================== ACCESSIBILITÉ ==================== */

.contact-box:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==================== PRINT ==================== */

@media print {
  #contact-container {
    display: none;
  }
}

/* ==================== CASES VIDES ET LOGO ==================== */

/* Cases vides (désactivées) */
.contact-box-empty {
  cursor: default;
  opacity: 0.5;
}

.contact-box-empty:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

/* Case avec logo (EasyAlgos) */
/*.contact-box-logo {
  padding: var(--spacing-md) !important; /* ✅ Optionnel : ajuster le padding */
/*}*/

/* ✅ Sélecteur plus spécifique pour battre reset.css */
/*.contact-box-logo svg.easyalgos-logo {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  max-height: 32px !important;
  transition: all var(--transition-fast) !important;
  margin: 0 auto !important;  /* ✅ Centrer le logo */
/*}*/

/* Effet hover sur le logo */
.contact-box-logo:hover svg.easyalgos-logo {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Adapter les couleurs du logo en mode sombre */
:root[data-theme="dark"] svg.easyalgos-logo path[fill="#0B1125"] {
  fill: #E8E8E8;
}

/* ==================== NOTES ==================== */

/*
COMPOSANT CONTACT LINKS :
✅ 3 cases horizontales : Email, Telegram, Discord
✅ Icônes SVG natives (pas de dépendances externes)
✅ Responsive : reste en 3 colonnes même en mobile
✅ Protection anti-spam pour l'email (JavaScript)
✅ Couleurs spécifiques par plateforme
✅ Animations au survol

PERSONNALISATION :
- Modifier les couleurs des icônes lignes 73-86
- Ajuster les tailles d'icônes lignes 63-67
- Ajouter/supprimer des cases facilement
*/