/* ═══════════════════════════════════════════════════════════
   COINMALIN — commercant-profil.css (styles spécifiques)
═══════════════════════════════════════════════════════════ */

body { padding-bottom:100px }

/* ═══ LAYOUT PRINCIPAL ═══ */
.main { max-width:var(--w); margin:0 auto; padding:0 20px }
.main__inner { padding:24px 0 }

/* ═══ PAGE HEAD ═══ */
.page-head {
  display:flex; align-items:flex-start; gap:18px;
  margin-bottom:28px; flex-wrap:wrap;
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:20px;
  box-shadow:var(--sh1);
}
.avatar-circle {
  position:relative; width:80px; height:80px;
  border-radius:var(--r3); overflow:hidden; flex-shrink:0;
  box-shadow:var(--sh2);
}
.avatar-img { width:100%; height:100%; object-fit:cover }
.avatar-edit {
  position:absolute; inset:0;
  background:rgba(9,28,16,.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--wh); opacity:0; transition:opacity var(--ease);
}
.avatar-circle:hover .avatar-edit { opacity:1 }

.page-head__info { flex:1; min-width:0 }
.page-head__badges {
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap; margin-bottom:8px;
}
.badge-cat { background:var(--bl); color:var(--rc) }
.badge-plan { background:var(--gd-lt); color:var(--warn) }
.badge-status { display:flex; align-items:center; gap:5px }
.badge-status--open { background:#ECFDF5; color:#065F46 }
.badge-status--closed { background:#FEF2F2; color:#991B1B }
.status-dot {
  width:6px; height:6px; border-radius:50%;
  background:currentColor; animation:pulse-dot 2s ease infinite;
}
.page-head__name {
  font-family:var(--serif); font-size:1.55rem;
  color:var(--t1); line-height:1.15; margin-bottom:6px;
  letter-spacing:-.02em;
}
.page-head__loc { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--t3) }

/* ═══ ONGLETS PROFIL ═══ */
.tabs {
  display:flex; background:var(--wh);
  border:1px solid var(--bd); border-radius:50px;
  padding:4px; gap:3px; margin-bottom:22px;
  overflow-x:auto; scrollbar-width:none; box-shadow:var(--sh1);
}
.tabs::-webkit-scrollbar { display:none }
.tab-btn {
  flex-shrink:0; padding:9px 16px; border-radius:50px;
  font-size:13px; font-weight:500; color:var(--t3);
  transition:all var(--ease); white-space:nowrap;
}
.tab-btn:hover { color:var(--t1) }
.tab-btn--active {
  background:var(--rc); color:var(--wh); font-weight:600;
  box-shadow:0 2px 10px rgba(21,98,64,.22);
}
.tab-content { display:none; animation:fade-in .28s var(--ease) both }
.tab-content.active { display:block }

/* ═══ SECTIONS FORMULAIRE ═══ */
.form-section {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:20px;
  margin-bottom:12px; box-shadow:var(--sh1);
}
.form-section__title {
  font-family:var(--serif); font-size:1.05rem;
  color:var(--t1); margin-bottom:4px; letter-spacing:-.01em;
}
.form-section__sub { font-size:12px; color:var(--t3); margin-bottom:18px; line-height:1.6 }

/* ═══ CHAMPS ═══ */
.field-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px }
.field-group:last-child { margin-bottom:0 }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:440px) { .field-row { grid-template-columns:1fr } }

.field-label {
  font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t3);
}
.field-optional { font-weight:400; text-transform:none; letter-spacing:0; color:var(--t4) }

.field-wrap {
  display:flex; align-items:center;
  background:var(--bg); border:1.5px solid var(--bd);
  border-radius:var(--r2); overflow:hidden; min-height:50px;
  transition:all var(--ease);
}
.field-wrap:focus-within {
  border-color:var(--mg); background:var(--wh);
  box-shadow:0 0 0 3px rgba(30,122,80,.1);
}
.field-wrap--textarea { min-height:auto; align-items:flex-start }
.field-wrap--select { position:relative }

.field-input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; color:var(--t1); padding:12px 16px; min-width:0;
}
.field-input::placeholder { color:var(--t4) }
.field-input--center { text-align:center; font-weight:600; font-size:15px }

.field-textarea {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; color:var(--t1); padding:12px 16px;
  resize:none; line-height:1.65; width:100%;
}
.field-textarea::placeholder { color:var(--t4) }

.field-select {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; color:var(--t1); padding:12px 16px 12px 40px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.field-select-icon { position:absolute; left:13px; color:var(--t3); pointer-events:none; top:50%; transform:translateY(-50%) }
.field-chevron { position:absolute; right:12px; color:var(--t3); pointer-events:none; top:50%; transform:translateY(-50%) }
.field-prefix {
  display:flex; align-items:center; gap:6px;
  padding:0 12px 0 14px; border-right:1.5px solid var(--bd);
  font-size:13px; font-weight:600; color:var(--t2);
  white-space:nowrap; flex-shrink:0;
  background:var(--wh); height:100%; min-height:48px;
}
.field-flag { width:18px; border-radius:2px }
.field-icon { padding:0 10px 0 14px; color:var(--t4); display:flex; align-items:center; flex-shrink:0 }
.field-suffix { padding:0 14px 0 0; font-size:13px; font-weight:600; color:var(--rc); flex-shrink:0 }
.field-count { font-size:11px; color:var(--t4); text-align:right; font-weight:500; margin-top:3px }

/* ═══ STATUT GRID ═══ */
.statut-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media(min-width:480px) { .statut-grid { grid-template-columns:repeat(4,1fr) } }
.statut-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 12px; background:var(--bg);
  border:2px solid var(--bd); border-radius:var(--r2);
  font-size:12px; text-align:center; transition:all var(--ease); cursor:pointer;
}
.statut-card:hover { border-color:var(--bd2) }
.statut-card--active { border-color:var(--rc); background:var(--bl); box-shadow:0 0 0 3px rgba(21,98,64,.1) }
.statut-card strong { font-size:13px; color:var(--t1); font-weight:600 }
.statut-card span { font-size:11px; color:var(--t3) }
.statut-dot { width:10px; height:10px; border-radius:50% }
.statut-dot--green { background:#22C55E }
.statut-dot--red { background:var(--err) }
.statut-dot--orange { background:#F59E0B }

/* ═══ PHOTOS ═══ */
.photos-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; margin-bottom:14px;
}
@media(min-width:480px) { .photos-grid { grid-template-columns:repeat(3,1fr) } }
@media(min-width:640px) { .photos-grid { grid-template-columns:repeat(4,1fr) } }

.photo-slot {
  position:relative; border-radius:var(--r2);
  overflow:hidden; aspect-ratio:4/3; background:var(--bg);
}
.photo-slot--main { border:2px solid var(--rc) }
.photo-slot--loading {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:2px dashed var(--bd2);
}
.photo-spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--bd2); border-top-color:var(--rc);
  animation:_spin .7s linear infinite;
}
@keyframes _spin { to { transform:rotate(360deg) } }
.photo-slot img { width:100%; height:100%; object-fit:cover }
.photo-slot__overlay {
  position:absolute; inset:0; background:rgba(9,28,16,.5);
  opacity:0; display:flex; align-items:flex-start;
  justify-content:space-between; padding:8px;
  transition:opacity var(--ease);
}
.photo-slot:hover .photo-slot__overlay { opacity:1 }
.photo-main-badge {
  font-size:9px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--gd); color:var(--dk);
  padding:3px 7px; border-radius:50px;
}
.photo-make-main {
  font-size:10px; font-weight:700;
  background:rgba(255,255,255,.9); color:var(--dk);
  border-radius:50px; padding:4px 9px; transition:all var(--ease);
}
.photo-make-main:hover { background:var(--wh) }
.photo-delete {
  width:26px; height:26px; border-radius:50%;
  background:rgba(220,38,38,.8); color:var(--wh);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease); flex-shrink:0;
}
.photo-delete:hover { background:var(--err) }
.photo-add {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px;
  background:var(--bg); border:1.5px dashed var(--bd2);
  border-radius:var(--r2); aspect-ratio:4/3;
  color:var(--rc); font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--ease);
}
.photo-add:hover { background:var(--bl); border-color:var(--rc) }

.upload-zone {
  border:2px dashed var(--bd); border-radius:var(--r2);
  padding:28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:all var(--ease);
}
.upload-zone:hover { border-color:var(--bd2); background:var(--bl) }
.upload-zone svg { color:var(--t4) }
.upload-zone p { font-size:13px; color:var(--t3) }
.upload-zone p button { color:var(--rc); font-weight:600; text-decoration:underline }
.upload-zone span { font-size:11px; color:var(--t4) }

/* ═══ HORAIRES ═══ */
.horaires-table {
  border:1px solid var(--bd); border-radius:var(--r2);
  overflow:hidden; margin-bottom:14px;
}
.horaire-row {
  display:grid; grid-template-columns:90px 1fr 1fr 50px;
  align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--bd);
}
.horaire-row:last-child { border-bottom:none }
.horaire-row--head {
  background:var(--bg); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--t3);
}
.horaire-jour { font-size:13px; font-weight:600; color:var(--t1) }
.time-inp {
  border:1.5px solid var(--bd); border-radius:var(--r1);
  padding:7px 8px; font-size:13px; font-weight:500; color:var(--t1);
  background:var(--wh); outline:none; transition:border-color var(--ease);
  width:100%; -webkit-appearance:none;
}
.time-inp:focus { border-color:var(--mg) }
.time-inp:disabled { opacity:.35; cursor:not-allowed }
.horaire-row.is-closed .time-inp { opacity:.3; pointer-events:none }
.horaires-tip {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--t3);
  background:var(--bl); border-radius:var(--r1);
  padding:10px 12px; line-height:1.55;
}
.horaires-tip svg { color:var(--rc); flex-shrink:0; margin-top:1px }

/* ═══ TOGGLE ═══ */
.toggle-sm { cursor:pointer; display:flex; align-items:center; justify-content:center }
.toggle-sm input { display:none }
.toggle-track-sm {
  display:block; width:38px; height:22px;
  border-radius:11px; background:var(--bd);
  position:relative; transition:background var(--ease);
}
.toggle-sm input:checked + .toggle-track-sm { background:var(--err) }
.toggle-thumb-sm {
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--wh); box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform var(--ease);
}
.toggle-sm input:checked + .toggle-track-sm .toggle-thumb-sm { transform:translateX(16px) }

/* ═══ ÉQUIPEMENTS ═══ */
.equip-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media(min-width:480px) { .equip-grid { grid-template-columns:repeat(3,1fr) } }
@media(min-width:640px) { .equip-grid { grid-template-columns:repeat(4,1fr) } }
.equip-card { cursor:pointer; position:relative }
.equip-card input { display:none }
.equip-card__inner {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 10px; background:var(--bg);
  border:1.5px solid var(--bd); border-radius:var(--r2);
  text-align:center; transition:all var(--ease);
}
.equip-card input:checked ~ .equip-card__inner { background:var(--bl); border-color:var(--rc) }
.equip-card:hover .equip-card__inner { border-color:var(--bd2) }
.equip-icon { font-size:1.45rem; line-height:1 }
.equip-card__inner strong { font-size:12px; font-weight:600; color:var(--t1) }
.equip-card__inner span { font-size:10px; color:var(--t3); line-height:1.4 }
.equip-check {
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%;
  background:var(--bd); display:flex; align-items:center;
  justify-content:center; transition:all var(--ease); opacity:0;
}
.equip-card input:checked ~ .equip-check { background:var(--rc); opacity:1 }

/* ═══ BOTTOM SAVE ═══ */
.bottom-save { display:flex; align-items:center; gap:12px; padding:20px 0 }
.btn-save-main {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px; background:var(--rc); color:var(--wh);
  border-radius:var(--r2); font-size:15px; font-weight:600;
  transition:all var(--ease); box-shadow:0 4px 18px rgba(21,98,64,.24);
}
.btn-save-main:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; transform:none }
.btn-save-main:not(:disabled):hover { background:var(--dk); transform:translateY(-2px); box-shadow:var(--sh3) }
.btn-cancel {
  padding:16px 22px; border-radius:var(--r2);
  border:1.5px solid var(--bd); font-size:14px; font-weight:500;
  color:var(--t3); background:var(--wh); transition:all var(--ease); white-space:nowrap;
}
.btn-cancel:hover { border-color:var(--bd2); color:var(--t1) }

@media(min-width:640px) { .main { padding:0 24px } .main__inner { padding:32px 0 } }