/* ============================================
   COMPONENT • c-input / c-select / c-textarea
=============================================== */

/* -------- Input (bloc) -------- */
.c-input{
  width: 100%;
  height: var(--input-h);
  margin: 0 0 var(--input-mb);
  padding: 0 var(--input-px);
  border-radius: var(--input-radius);
  border: 1px solid #b3b3b3;
  color: var(--input-fg);
  background: var(--input-bg);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.c-input::placeholder{
  color: var(--input-placeholder);
  opacity: 1;
}

.c-input:focus{
  border-color: var(--cl-accent, #ff1749);
  box-shadow: 0 0 0 4px rgba(255,23,73,.12);
}

/* -------- Select -------- */
.c-select{
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--input-px);
  border-radius: var(--input-radius);
  /*border: 1px solid var(--input-border);*/
  border: 1px solid #b3b3b3;
  color: var(--input-fg);
  background: var(--input-bg);
  outline: none;
  appearance: none;
}

.c-select:focus{
  border-color: rgba(15, 23, 42, .30);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}

.c-select:disabled{
  opacity: .7;
}

/* -------- Textarea -------- */
.c-textarea{
  width: 100%;
  min-height: 250px;
  margin: 0 0 var(--input-mb);
  padding: 15px;
  border: 1px solid #b3b3b3;
  border-radius: var(--input-radius);
  color: var(--input-fg);
  background: var(--input-bg);
  outline: none;
}

/* -------- Variantes / utilitaires (BEM) -------- */
.c-input--short{max-width: 220px;}
.c-input--no-margin{ margin: 0 !important; }
.c-input--no-margin-bottom{ margin-bottom: 0 !important; }
.c-input--no-padding{ padding: 0 !important; }
.c-input--no-border{ border: 0 !important; }
.c-input--no-background{ background: none !important; }
.c-input--auto-height{ height: auto !important; }

/* (Option) tailles */
.c-input--sm{ height: 40px; }
.c-input--lg{ height: 54px; }

/* -------- Search cancel button (uniquement si tu utilises .c-input sur search) -------- */
.c-input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;

  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;

  background-color: #e0e0e0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l6 6m0-6L4 10' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  opacity: 0;
  transform: scale(0.8);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.c-input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button{
  opacity: 1;
  transform: scale(1);
}

.c-input[type="search"]::-webkit-search-cancel-button:active{
  transform: scale(0.9);
}

.c-textarea--no-margin{ margin: 0 !important; }
.c-textarea--short{max-height: 220px;}