/* ═══════════════════════════════════════════════════════════════════
   « AJOUTER À UNE LISTE » — bouton sur la page publique d'un lieu
   ===================================================================
   Demande d'Anthony (02/10/2026) : le client n'a pas d'onglet « Lieux »
   dans son espace, il lui faut un bouton SUR la page du lieu.

   Regles respectees : marges interieures reelles (rien de colle aux bords),
   pas de debordement, aucun texte tronque, animations discretes.
   Le style reste sobre pour ne pas jurer avec le theme du site.
   ═══════════════════════════════════════════════════════════════════ */

.ldt-listes-client {
  /* Rouge de la charte du site (demande d'Anthony : « du rouge et pas du bleu »).
     On prend la variable du theme si elle est disponible. */
  --ldt-rouge: var(--crm-accent, #ad081c);
  --ldt-rouge-fonce: #8c0616;
  margin: 18px 0;
  font-size: 0.95rem;
}

/* Bouton principal « Enregistrer ce décor » : ROUGE de la charte, avec un
   coeur. Le libelle et le coeur sont dans deux enfants, donc l'alignement se
   fait en flex (et non plus sur le texte du bouton). */
.ldt-listes-client__bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--ldt-rouge, #ad081c);
  border-radius: 10px;
  background: var(--ldt-rouge, #ad081c);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ldt-listes-client__bouton:hover {
  background: var(--ldt-rouge-fonce, #8c0616);
  border-color: var(--ldt-rouge-fonce, #8c0616);
  color: #fff;
  box-shadow: 0 4px 14px rgba(173, 8, 28, .22);
}

.ldt-listes-client__bouton:active {
  transform: translateY(1px);
  box-shadow: none;
}

.ldt-listes-client__bouton:disabled {
  opacity: .6;
  cursor: default;
  box-shadow: none;
}

.ldt-listes-client__bouton:focus-visible {
  outline: 3px solid rgba(173, 8, 28, .25);
  outline-offset: 2px;
}

/* Le coeur : dessine en SVG, il prend la couleur du texte (currentColor) et
   reste donc blanc sur le bouton rouge. Il se remplit legerement au survol,
   ce qui donne un retour visuel sans changer la lisibilite. */
.ldt-listes-client__coeur {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.ldt-listes-client__bouton:hover .ldt-listes-client__coeur {
  transform: scale(1.12);
}

.ldt-listes-client__bouton-txt {
  display: inline-block;
}

.ldt-listes-client__note {
  margin: 0 0 10px;
  color: #475569;
  line-height: 1.5;
}

/* ─── Messages ─── */
.ldt-listes-client__message {
  margin: 10px 0 0;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ldt-listes-client__message.is-ok {
  background: rgba(21, 128, 61, .07);
  color: #15803d;
}

.ldt-listes-client__message.is-ko {
  background: rgba(185, 28, 28, .06);
  color: #b91c1c;
}

/* ─── Panneau de choix ─── */
.ldt-listes-client__panneau {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(15, 23, 42, .06);
  max-width: 460px;
}

.ldt-listes-client__panneau-titre {
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
}

.ldt-listes-client__liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.ldt-listes-client__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #0f172a;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

/* Survol d'une liste : on reste sur du fond CLAIR et du texte FONCE.
   Bug corrige le 02/10/2026 : le survol rendait le texte illisible
   (blanc sur blanc) sur une liste deja cochee. */
.ldt-listes-client__item:hover {
  border-color: var(--ldt-rouge, #ad081c);
  background: rgba(173, 8, 28, .05);
  color: #0f172a;
}

/* Un lieu deja enregistre : on le montre clairement, sans le cacher. */
.ldt-listes-client__item.is-dedans {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .05);
  color: #0f172a;
}

/* Survol d'un lieu deja enregistre : le fond doit rester LISIBLE.
   On garde le fond vert clair et on renforce juste la bordure, au lieu
   d'appliquer le fond du survol general (qui delavait le texte). */
.ldt-listes-client__item.is-dedans:hover {
  border-color: rgba(21, 128, 61, .55);
  background: rgba(21, 128, 61, .09);
  color: #0f172a;
}

.ldt-listes-client__item-nom {
  font-weight: 550;
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
}

.ldt-listes-client__item-etat {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: #64748b;
  white-space: nowrap;
}

.ldt-listes-client__item.is-dedans .ldt-listes-client__item-etat {
  color: #15803d;
  font-weight: 550;
}

.ldt-listes-client__vide {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

/* ─── Création ─── */
.ldt-listes-client__creation {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, .08);
}

.ldt-listes-client__champ {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 9px;
  font: inherit;
  font-size: 0.92rem;
}

.ldt-listes-client__champ:focus {
  outline: none;
  border-color: var(--ldt-rouge, #ad081c);
  box-shadow: 0 0 0 3px rgba(173, 8, 28, .10);
}

.ldt-listes-client__creer {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--ldt-rouge, #ad081c);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 550;
  cursor: pointer;
  transition: background .18s ease;
}

.ldt-listes-client__creer:hover { background: var(--ldt-rouge-fonce, #8c0616); }
.ldt-listes-client__creer:disabled { opacity: .6; cursor: default; }

/* Bouton « Fermer » : un VRAI bouton, pas un lien souligne.
   Corrige le 02/10/2026 : c'etait un rectangle sans marge interieure, au
   survol rose et peu engageant. Desormais : bordure rouge, marge interieure
   reelle, survol rouge plein et texte blanc (toujours lisible). */
.ldt-listes-client__fermer {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--ldt-rouge, #ad081c);
  border-radius: 9px;
  background: #fff;
  color: var(--ldt-rouge, #ad081c);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.ldt-listes-client__fermer:hover {
  background: var(--ldt-rouge, #ad081c);
  border-color: var(--ldt-rouge, #ad081c);
  color: #fff;
}

.ldt-listes-client__fermer:active {
  background: var(--ldt-rouge-fonce, #8c0616);
  border-color: var(--ldt-rouge-fonce, #8c0616);
}

.ldt-listes-client__fermer:focus-visible {
  outline: 3px solid rgba(173, 8, 28, .25);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .ldt-listes-client__panneau { padding: 15px 15px; }
  .ldt-listes-client__item { flex-wrap: wrap; gap: 4px; }
  .ldt-listes-client__creation { flex-direction: column; }
  .ldt-listes-client__champ,
  .ldt-listes-client__creer { width: 100%; flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ldt-listes-client__bouton,
  .ldt-listes-client__item,
  .ldt-listes-client__creer { transition: none; }
}