/* ============================================================================
 * Module : artisan/styles/pages/profil.css
 * Rôle   : Styles spécifiques à la page Profil (header avatar, sections, logo
 *          upload, bandeaux d'avertissement, classes utilitaires field-error).
 *
 * Tout ce qui est générique (`.field`, `.btn-primary`, `.dashboard-card`, etc.)
 * vient de `dashboard-shell.css`.
 *
 * Dépend de : tokens.css + dashboard-shell.css
 * Utilisé par : /artisan/profil.html
 * ============================================================================ */

/* ─── Container principal ──────────────────────────────────────── */
.profil-container {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── Bandeaux d'avertissement ─────────────────────────────────── */
.profil-warning {
  background: #fef3c7;
  border: 1.5px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #92400e;
  font-weight: var(--weight-semibold);
  font-size: .86rem;
}

.profil-info {
  background: #dbeafe;
  border: 1.5px solid #93c5fd;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #1e40af;
  font-weight: var(--weight-medium);
  font-size: .86rem;
}

/* ─── Header de la carte profil ────────────────────────────────── */
.profil-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-100);
}

.profil-avatar {
  width: 52px;
  height: 52px;
  background: var(--brand);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.profil-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.profil-header-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: 1.1rem;
  color: var(--brand-dark);
}

.profil-header-sub {
  font-size: .82rem;
  color: var(--gray-400);
}

/* ─── Sections internes (titres en petites majuscules) ───────── */
.profil-section-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-400);
  margin: 24px 0 14px;
}
.profil-section-title:first-child { margin-top: 0; }

.profil-section-title .hint {
  font-size: .75rem;
  font-weight: var(--weight-normal);
}

.profil-section-hint {
  font-size: .82rem;
  color: var(--gray-500);
  margin: -8px 0 14px;
}

/* ─── Grille 2 colonnes pour les fields ────────────────────────── */
.profil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.profil-grid .field.profil-span-2 {
  grid-column: 1 / -1;
}

.profil-grid .field label .hint {
  color: var(--gray-400);
  font-weight: var(--weight-normal);
}

/* ─── Logo upload ──────────────────────────────────────────────── */
.logo-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.logo-preview {
  width: 120px;
  height: 120px;
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  overflow: hidden;
  flex-shrink: 0;
}

.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-empty {
  font-size: .78rem;
  color: var(--gray-400);
}

.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.logo-feedback {
  font-size: .82rem;
  min-height: 18px;
}
.logo-feedback.error   { color: #dc2626; }
.logo-feedback.success { color: #16a34a; }

/* Bouton de danger (rouge) — pas dans dashboard-shell.css */
.btn-danger {
  background: white;
  color: #dc2626;
  border: 1.5px solid #fca5a5;
  padding: 7px 14px;
  font-size: .78rem;
}
.btn-danger:hover:not(:disabled) {
  background: #fef2f2;
}

/* ─── Bouton de sauvegarde ─────────────────────────────────────── */
.profil-save-row {
  margin-top: 24px;
}

.btn-large {
  padding: 11px 24px;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
}

/* ─── Sections auto + assurance ────────────────────────────────── */
.profil-auto,
.profil-assurance {
  margin-top: 12px;
}

/* ─── Cards extras (prestations, modèles) ─────────────────────── */
.profil-extra .dashboard-card-header .icon-bubble {
  width: 38px;
  height: 38px;
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
}
.profil-extra .dashboard-card-header h2 {
  font-size: 1rem;
  color: var(--gray-900);
}

.profil-extra-text {
  font-size: .86rem;
  color: var(--gray-500);
  line-height: 1.55;
  margin: 6px 0 16px;
}

.profil-extra-hint {
  font-size: .78rem;
  color: var(--gray-400);
  margin-top: 14px;
  line-height: 1.5;
}

.btn-link-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--brand-50);
  color: var(--brand);
  border: 1.5px solid var(--brand-100);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: .88rem;
  text-decoration: none;
}
.btn-link-card:hover { background: var(--brand-100); }

.modeles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .82rem;
  color: var(--gray-600);
}
.modeles-list .modele-row {
  padding: 10px 12px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modeles-list .modele-name {
  font-weight: var(--weight-semibold);
  color: var(--brand-dark);
}
.modeles-list .modele-meta {
  font-size: .75rem;
  color: var(--gray-500);
}

.modeles-list .modeles-empty {
  font-size: .82rem;
  color: var(--gray-400);
  font-style: italic;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .profil-grid {
    grid-template-columns: 1fr;
  }
  .profil-grid .field.profil-span-2 {
    grid-column: auto;
  }
}