/* ============================================================
   KeyZen — Styles pour le portefeuille unifié (admin)
   ============================================================ */

/* ---- Badges de mode de persistance ---- */
.unified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.unified-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.unified-badge-ok {
  background: color-mix(in srgb, #2d7a3e 12%, transparent);
  color: #2d7a3e;
  border-color: color-mix(in srgb, #2d7a3e 25%, transparent);
}
.unified-badge-ok .dot { background: #2d7a3e; }
.unified-badge-local {
  background: color-mix(in srgb, #c8a96a 15%, transparent);
  color: #8a6f3e;
  border-color: color-mix(in srgb, #c8a96a 30%, transparent);
}
.unified-badge-local .dot { background: #c8a96a; }

.unified-error-banner {
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, #c05a3e 8%, transparent);
  border: 1px solid color-mix(in srgb, #c05a3e 25%, transparent);
  border-radius: 8px;
  color: #7a3925;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

/* ---- Drawer XL pour la fiche bien ---- */
.admin-drawer-xl {
  max-width: 960px !important;
  width: 90vw;
}

@media (max-width: 720px) {
  .admin-drawer-xl {
    width: 100vw;
    max-width: none !important;
  }
}

/* ---- Onglets internes du drawer ----
   CR 09/2026 (Fix urgent) \u2014 Onglets tronqu\u00e9s dans le drawer d'\u00e9dition.
   Bug reproduit : dans un flex column parent (.admin-drawer), les tabs
   avaient flex-shrink:1 par d\u00e9faut \u2192 compress\u00e9s \u00e0 21px de haut au lieu
   de 35px n\u00e9cessaires. Seul le haut des ic\u00f4nes \u00e9mojis \u00e9tait visible,
   les labels ("Contenus voyageur", "Photos"...) coup\u00e9s en bas.
   Trois corrections cumul\u00e9es :
   1. flex-shrink: 0 \u2192 la barre garde toujours sa hauteur
   2. overflow-x: auto (pas "overflow: auto") \u2192 scroll horizontal seul
   3. padding-bottom explicite (0.5rem) \u2192 espace pour la border-bottom
      de l'onglet actif + z\u00e9ro clipping des descendeurs typographiques */
.unified-tabs {
  display: flex;
  gap: 4px;
  padding: 0.75rem 1.25rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, rgba(43, 36, 26, 0.1));
  scrollbar-width: thin;
  /* Signal visuel du scroll horizontal quand la barre d\u00e9borde \u00e0 droite */
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, black 0, black calc(100% - 20px), transparent 100%);
}
/* Sur \u00e9crans larges (drawer XL), le mask n'est utile que quand le contenu
   d\u00e9passe r\u00e9ellement. On peut le d\u00e9sactiver si tous les tabs tiennent. */
@media (min-width: 720px) {
  .unified-tabs { mask-image: none; -webkit-mask-image: none; }
}
.unified-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 180ms;
  white-space: nowrap;
  margin-bottom: -1px;
}
.unified-tab:hover {
  color: var(--text);
}
.unified-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.unified-tab-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.unified-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---- Switcher de langue en haut d'onglet ---- */
.unified-lang-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 8px;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Éditeur de highlights (liste de chips éditables) ---- */
.highlights-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  background: var(--surface, #fff);
}
.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.highlights-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.highlights-item input {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--surface, #fff);
}
.highlights-item input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.highlights-actions {
  display: inline-flex;
  gap: 2px;
}
.highlights-actions button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 150ms;
}
.highlights-actions button:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text-soft);
}
.highlights-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.highlights-actions button.danger:hover:not(:disabled) {
  color: #b34d3a;
  border-color: #b34d3a;
  background: color-mix(in srgb, #b34d3a 8%, transparent);
}

.highlights-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
}
.highlights-add input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--surface, #fff);
}
.highlights-add input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* ---- Grille des photos admin ---- */
.unified-photos-summary {
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.unified-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.unified-photo-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  transition: all 180ms;
  cursor: grab;
}
.unified-photo-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.unified-photo-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.unified-photo-card.drop-target {
  border-color: var(--accent);
  border-style: dashed;
  border-width: 2px;
}
.unified-photo-card.is-hidden {
  opacity: 0.55;
}
.unified-photo-card.is-hidden .unified-photo-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 8px,
    rgba(0, 0, 0, 0.25) 8px,
    rgba(0, 0, 0, 0.25) 16px
  );
  pointer-events: none;
}

.unified-photo-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f0ede4;
  overflow: hidden;
}
.unified-photo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.unified-photo-order {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  pointer-events: none;
}
.unified-photo-cover-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 8px;
  background: #094713;
  color: #fff;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.unified-photo-hidden-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 8px;
  background: rgba(180, 100, 60, 0.9);
  color: #fff;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  pointer-events: none;
}
.unified-photo-drag {
  position: absolute;
  bottom: 6px;
  right: 6px;
  color: #fff;
  font-size: 0.85rem;
  opacity: 0.7;
  cursor: grab;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.unified-photo-meta {
  padding: 0.55rem 0.6rem;
}
.unified-photo-meta input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.78rem;
  background: transparent;
  margin-bottom: 0.4rem;
}
.unified-photo-meta input:focus {
  outline: 1px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.unified-photo-actions {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.unified-photo-actions button {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}
.unified-photo-actions button:hover {
  color: var(--text);
  border-color: var(--text-soft);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.unified-photo-actions button.danger:hover {
  color: #b34d3a;
  border-color: #b34d3a;
  background: color-mix(in srgb, #b34d3a 8%, transparent);
}

/* ---- S\u00e9lecteur de photo de couverture du guide ----
   CR 09/2026 \u2014 permet \u00e0 l'admin de choisir quelle photo apparait en
   couverture du guide voyageur, parmi les photos d\u00e9j\u00e0 upload\u00e9es sur
   le bien. Par d\u00e9faut : la cover du bien (option "Par d\u00e9faut" en 1er). */
.guide-cover-picker {
  margin-bottom: 2rem;
  padding: 1.15rem 1.25rem 1.35rem;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 10px;
}
.guide-cover-picker-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.guide-cover-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.65rem;
}
.guide-cover-picker-item {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: all 150ms;
  font-family: inherit;
}
.guide-cover-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-cover-picker-item:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
}
.guide-cover-picker-item.active {
  border-color: var(--accent);
  border-width: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.guide-cover-picker-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Vignette "Par d\u00e9faut" (pas d'image, ic\u00f4ne + label) */
.guide-cover-picker-default {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text-soft);
  text-align: center;
}
.guide-cover-picker-icon {
  font-size: 1.4rem;
  color: var(--accent);
  line-height: 1;
}
.guide-cover-picker-label {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}
.guide-cover-picker-label small {
  font-size: 0.65rem;
  color: var(--text-soft);
  font-weight: 400;
}
.guide-cover-picker-default.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
/* Badge "coch\u00e9" sur l'\u00e9l\u00e9ment actif */
.guide-cover-picker-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ---- Zone d'ajout ---- */
.unified-photo-add {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  margin-top: 1rem;
}
.unified-photo-add h5 {
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}