/* ==========================================================
   BUTTONS · Design System 
========================================================== */

:root{
  /* Fonts */
  --btn-ff: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);

  /* Sizes */
  --btn-h-sm: 38px;
  --btn-h-md: 46px;
  --btn-h-lg: 54px;
  --btn-px: 18px;

  /* Radius */
  --btn-radius: var(--radius-md, 10px);
  --btn-radius-pill: 999px;

  /* Shadow (soft) */
  --btn-shadow: 0 1px 0 rgba(16, 24, 40, .05);

  /* Base colors */
  --btn-text: #15212F;
  --btn-bg: #fff;
  --btn-border: rgba(15, 23, 42, .18);

  /* Accent palette (à adapter à tes tokens) */
  --btn-primary: #ef233c;   /* accent */
  --btn-success: #16a34a;
  --btn-warning: #f59e0b;
  --btn-danger:  #dc2626;
  --btn-neutral: #64748b;

  /* Focus */
  --btn-focus: rgba(239, 35, 60, .25);
}

.c-btn{
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);

  font-family: var(--btn-ff);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.1;

  height: var(--btn-h-md);
  padding: 0 var(--btn-px);

  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  user-select: none;

  transition:
    transform .08s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.c-btn:hover{ filter: brightness(.99); }
.c-btn:active{ transform: translateY(1px); }

.c-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--btn-focus), var(--btn-shadow);
}

.c-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Layout / shape */
.c-btn--block{ width: 100%; }
.c-btn--pill{ border-radius: var(--btn-radius-pill); }

/* Sizes */
.c-btn--sm{ height: var(--btn-h-sm); font-size: 13px; }
.c-btn--md{ height: var(--btn-h-md); }
.c-btn--lg{ height: var(--btn-h-lg); font-size: 15px; }

/* ===== Variants (solid) ===== */
.c-btn--primary{
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: #fff;
}
.c-btn--success{
  background: var(--btn-success);
  border-color: var(--btn-success);
  color: #fff;
}
.c-btn--warning{
  background: var(--btn-warning);
  border-color: var(--btn-warning);
  color: #111;
}
.c-btn--danger{
  background: var(--btn-danger);
  border-color: var(--btn-danger);
  color: #fff;
}
.c-btn--neutral{
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, .10);
  color: #0f172a;
}

/* ===== Outline ===== */
.c-btn--outline{
  background: transparent;
}
.c-btn--outline.c-btn--primary{ border-color: var(--btn-primary); color: var(--btn-primary); }
.c-btn--outline.c-btn--success{ border-color: var(--btn-success); color: var(--btn-success); }
.c-btn--outline.c-btn--warning{ border-color: var(--btn-warning); color: #b45309; }
.c-btn--outline.c-btn--danger { border-color: var(--btn-danger);  color: var(--btn-danger); }
.c-btn--outline.c-btn--neutral{ border-color: var(--btn-neutral); color: var(--btn-neutral); }

.c-btn--outline:hover{
  background: rgba(15, 23, 42, .04);
}

/* ===== Ghost (texte only) ===== */
.c-btn--ghost{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.c-btn--ghost:hover{
  background: rgba(15, 23, 42, .06);
}

.c-btn-panel{
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
}

/* =========================================
   CLOSE BUTTON (generic)
   BEM: .c-close (+ modifiers if needed)
   ========================================= */

.c-close{
  --close-size: 36px;
  --close-stroke: 2px;
  --close-radius: 999px;

  --close-fg: var(--btn-text);                /* couleur de la croix */
  --close-bg: transparent;                  /* fond normal */
  --close-bg-hover: rgba(0,0,0,.06);        /* halo hover */
  --close-bg-active: rgba(0,0,0,.10);       /* halo active */
  --close-focus: rgba(0,0,0,.18);           /* ring focus */

  inline-size: var(--close-size);
  block-size: var(--close-size);
  display: inline-grid;
  place-items: center;


  padding: 0;
  border: 0;
  border-radius: var(--close-radius);
  background: var(--close-bg);
  color: var(--close-fg);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.c-close::before,
.c-close::after{
  content: "";
  position: absolute;
  inline-size: calc(var(--close-size) * .52);
  block-size: var(--close-stroke);
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
}

/* le container doit être positionné pour les pseudo-elements */
.c-close{ position: relative; }

/* croix */
.c-close::before{ transform: rotate(45deg); }
.c-close::after{  transform: rotate(-45deg); }

/* hover / active */
.c-close:hover{
  background: var(--close-bg-hover);
  transform: rotate(90deg) scale(1.03);
}

.c-close:active{
  background: var(--close-bg-active);
  transform: rotate(90deg) scale(.98);
}

/* focus accessible */
.c-close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--close-focus);
}

/* état désactivé */
.c-close:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.c-close--abs{
  position: absolute;
  top: var(--close-top, 12px);
  right: var(--close-right, 12px);
  z-index: var(--close-z, 2);
}

.c-btn-panel{
  display: grid;
  gap: 10px;
}