/* =====================================================================
   ALYO — Système de boutons « Pastille + reflet »
   Direction B retenue : icône sertie dans une pastille translucide,
   voile de lumière qui balaye au survol.

   COULEUR PILOTÉE PAR L'ACCENT : les boutons suivent désormais les
   tokens --accent / --accent-strong / --accent-ink / --on-accent /
   --accent-rgb de la page. Sur le site vitrine (data-accent="zest")
   ils deviennent VERTS ; dans le logiciel/CRM (--accent indigo) ils
   restent INDIGO. Les valeurs indigo ci-dessous servent de repli
   (fallback) pour les pages qui ne déclarent pas d'accent.
   ---------------------------------------------------------------------
   Usage minimal :
     <button class="btn btn-primary">
       <span class="ic-wrap"><svg class="ic-plus" ...></svg></span>
       <span class="lbl">Nouvelle réservation</span>
     </button>
   Voir demo.html pour le markup complet de chaque variante + les icônes.
   ===================================================================== */

:root {
  /* Palette vert émeraude (replis si --accent absent) */
  --z-ind-400:#5ED9AE;
  --z-ind-500:#14C98A;
  --z-ind-600:#0B7C57;   /* vert plein des boutons primaires */
  --z-ind-700:#0A6B4B;
  --z-ind-800:#0A5238;

  --z-ink:#0f1729;
  --z-ink-2:#51607a;
  --z-line:#e6e8f2;
  --z-line-2:#dfe2ef;

  --z-danger:#dc2626;
}

/* =====================================================================
   BASE — commune à toutes les variantes
   ===================================================================== */
.btn {
  font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:46px; padding:0 20px;
  border:0; border-radius:14px;
  font-weight:650; font-size:0.92rem; letter-spacing:-0.01em;
  cursor:pointer; position:relative; isolation:isolate;
  white-space:nowrap; -webkit-font-smoothing:antialiased;
}
.btn:focus-visible { outline:2px solid var(--accent, var(--z-ind-500)); outline-offset:2px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

.btn .ic-wrap { display:inline-flex; align-items:center; justify-content:center; flex:none; }
.btn .ic-wrap svg { width:18px; height:18px; display:block; }
.btn .lbl { position:relative; z-index:1; }
.btn svg { transition:transform .42s cubic-bezier(.34,1.45,.5,1); }

/* --- Micro-interactions d'icône (l'icône bouge au survol) --- */
.btn:hover svg.ic-plus    { transform:rotate(90deg); }
.btn:hover svg.ic-refresh { transform:rotate(-280deg); }
.btn:hover svg.ic-mail    { transform:translateX(2px); }
.btn:hover svg.ic-trash   { transform:rotate(-9deg) translateY(-1px); }
.btn:hover svg.ic-bell    { transform:rotate(-12deg); }

/* =====================================================================
   PRIMAIRE — Pastille icône + reflet lumineux
   ===================================================================== */
.btn-primary {
  color:var(--on-accent, #fff); background:var(--accent, var(--z-ind-600));
  border:0; border-radius:14px;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(var(--accent-rgb, 11, 108, 76),.30),
    0 10px 20px -9px rgba(var(--accent-rgb, 15, 158, 110),.45);
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
}
/* Quand une pastille est présente, on resserre le padding gauche pour la sertir.
   Sans pastille (texte seul, ou icône en fin comme une flèche), on garde le
   padding normal du socle .btn — utile pour la vitrine et les CTA "texte →". */
.btn-primary:has(.ic-wrap) { padding-left:8px; }
/* La pastille qui sertit l'icône */
.btn-primary .ic-wrap {
  width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.15);
  transition:background .25s ease;
  z-index:1;
}
.btn-primary .ic-wrap svg { width:16px; height:16px; }
/* Le voile de lumière qui balaye la surface */
.btn-primary::after {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.38) 50%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.btn-primary:hover {
  background:var(--accent-strong, #0B7C57); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 2px 5px rgba(var(--accent-rgb, 11, 108, 76),.28),
    0 16px 28px -11px rgba(var(--accent-rgb, 15, 158, 110),.5);
}
.btn-primary:hover::after  { transform:translateX(130%); }
.btn-primary:hover .ic-wrap { background:rgba(255,255,255,.28); }
.btn-primary:active { transform:translateY(0); }

/* Variante sans icône : on enlève simplement la pastille (padding normal) */
.btn-primary.no-icon { padding-left:20px; }

/* =====================================================================
   SECONDAIRE — surface blanche, texte indigo, contour fin
   ===================================================================== */
.btn-secondary {
  background:#fff; color:var(--accent-ink, var(--z-ind-700));
  border:1px solid var(--z-line-2);
  box-shadow:0 1px 2px rgba(15,23,41,.05);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-secondary:hover {
  border-color:color-mix(in srgb, var(--accent, #0F9E6E) 32%, #fff);
  background:var(--accent-soft, #f8f9ff); color:var(--accent-ink, var(--z-ind-600));
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(var(--accent-rgb, 12, 124, 90),.22);
}
.btn-secondary:active { transform:translateY(0); }

/* =====================================================================
   ICÔNE SEULE — carré 46×46
   ===================================================================== */
.btn-icon {
  width:46px; height:46px; padding:0;
  background:#fff; color:var(--z-ink-2);
  border:1px solid var(--z-line-2);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,41,.05);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-icon:hover { color:var(--accent-ink, var(--z-ind-600)); border-color:color-mix(in srgb, var(--accent, #0F9E6E) 32%, #fff); background:var(--accent-soft, #f8f9ff); transform:translateY(-1px); }
.btn-icon:active { transform:translateY(0); }

/* =====================================================================
   DANGER — discret au repos, plein rouge au survol
   ===================================================================== */
.btn-danger {
  background:#fff; color:var(--z-danger);
  border:1px solid #f1d2d2;
  box-shadow:0 1px 2px rgba(15,23,41,.05);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-danger:hover {
  background:var(--z-danger); color:#fff; border-color:var(--z-danger);
  transform:translateY(-1px);
  box-shadow:0 8px 18px -7px rgba(220,38,38,.55);
}
.btn-danger:active { transform:translateY(0); }

/* Petite taille optionnelle */
.btn-sm { height:38px; padding:0 14px; font-size:0.85rem; border-radius:11px; }
.btn-sm.btn-icon { width:38px; padding:0; }
.btn-sm.btn-primary .ic-wrap { width:26px; height:26px; border-radius:8px; }

/* =====================================================================
   PONT LEGACY → nouveau système
   Rattache les anciennes classes de boutons d'action de Alyo au
   nouveau look, pour que TOUT le logiciel adopte le système sans avoir
   à réécrire chaque markup. Chargé en dernier => gagne sur les anciennes
   feuilles. Les sélecteurs scopés (.settings-v2 …) sont dupliqués pour
   battre la spécificité d'origine.
   ===================================================================== */

/* --- Import menu (parametres) => choix secondaire --- */
.settings-v2 .btn-import {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 16px; border-radius:13px;
  font-family:inherit; font-weight:650; font-size:0.9rem; cursor:pointer;
  background:#fff; color:var(--accent-ink, var(--z-ind-700));
  border:1px solid var(--z-line-2);
  box-shadow:0 1px 2px rgba(15,23,41,.05);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.settings-v2 .btn-import:hover {
  border-color:color-mix(in srgb, var(--accent, #0F9E6E) 32%, #fff);
  background:var(--accent-soft, #f8f9ff); color:var(--accent-ink, var(--z-ind-600));
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(var(--accent-rgb, 12, 124, 90),.22);
}
.settings-v2 .btn-import svg { width:16px; height:16px; }

/* --- Ghost (zesto.css / campagnes) => secondaire --- */
.btn.btn-ghost,
.settings-v2 .btn-ghost,
.vc-btn.vc-btn-ghost {
  background:#fff; color:var(--accent-ink, var(--z-ind-700));
  border:1px solid var(--z-line-2);
  box-shadow:0 1px 2px rgba(15,23,41,.05);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn.btn-ghost:hover,
.settings-v2 .btn-ghost:hover,
.vc-btn.vc-btn-ghost:hover {
  border-color:color-mix(in srgb, var(--accent, #0F9E6E) 32%, #fff);
  background:var(--accent-soft, #f8f9ff); color:var(--accent-ink, var(--z-ind-600));
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(var(--accent-rgb, 12, 124, 90),.22);
}

/* --- Ink (admin) => primaire plein (accent) --- */
.btn.btn-ink {
  color:var(--on-accent, #fff); background:var(--accent, var(--z-ind-600));
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(var(--accent-rgb, 11, 108, 76),.30),
    0 10px 20px -9px rgba(var(--accent-rgb, 15, 158, 110),.45);
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.btn.btn-ink:hover {
  background:var(--accent-strong, #0B7C57); color:var(--on-accent, #fff); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 2px 5px rgba(var(--accent-rgb, 11, 108, 76),.28),
    0 16px 28px -11px rgba(var(--accent-rgb, 15, 158, 110),.5);
}

/* --- Save (parametres .settings-v2) => primaire --- */
.settings-v2 .btn-save {
  color:var(--on-accent, #fff); background:var(--accent, var(--z-ind-600));
  border:0; border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(var(--accent-rgb, 11, 108, 76),.30),
    0 10px 20px -9px rgba(var(--accent-rgb, 15, 158, 110),.45);
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.settings-v2 .btn-save:hover {
  background:var(--accent-strong, #0B7C57); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 28px -11px rgba(var(--accent-rgb, 15, 158, 110),.5);
}

/* --- Studio voix : primaire + petites variantes --- */
.vc-btn.vc-btn-primary {
  color:var(--on-accent, #fff); background:var(--accent, var(--z-ind-600));
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(var(--accent-rgb, 11, 108, 76),.30),
    0 10px 20px -9px rgba(var(--accent-rgb, 15, 158, 110),.45);
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.vc-btn.vc-btn-primary:hover {
  background:var(--accent-strong, #0B7C57); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 28px -11px rgba(var(--accent-rgb, 15, 158, 110),.5);
}

/* =====================================================================
   Accessibilité — coupe les animations si l'utilisateur le demande
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .btn-primary::after, .btn-primary .ic-wrap { transition:none !important; }
  .btn-primary:hover::after { transform:translateX(-130%); }
}