/* ==========================================================================
   Click & Start — Design System (composants)
   --------------------------------------------------------------------------
   ALIGNÉ SUR LA CHARTE GRAPHIQUE : les couleurs, dégradés, rayons et ombres
   proviennent des variables de `charte.css` (--cs-violet, --cs-magenta,
   --cs-degrade, --cs-radius…). Ce fichier NE réinvente PAS de palette : il
   fournit la bibliothèque de composants (préfixe « cs- ») construite sur ces
   tokens, pour que chaque page ait le même style que la page d'accueil.

   À charger APRÈS charte.css. Réf. visuelle : /src/views/styleguide.php
   Chaque var() a un repli identique à charte.css pour rester robuste seul.
   ========================================================================== */

:root {
  /* Tokens complémentaires absents de la charte (structure, pas identité) */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 24px;
  --cs-space-6: 32px;
  --cs-radius-btn: 999px;          /* boutons pilule (identité de la home) */
  --cs-focus-ring: 0 0 0 3px rgba(113, 65, 217, 0.18);
}

/* --------------------------------------------------------------------------
   1. Boutons — pilule violet→magenta comme la page d'accueil
   -------------------------------------------------------------------------- */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-2);
  padding: 13px 28px;
  border-radius: var(--cs-radius-btn);
  font-family: var(--cs-font-texte, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  flex: 0 0 auto;
}
.cs-btn:hover,
.cs-btn:focus { text-decoration: none; }
.cs-btn:focus-visible { outline: none; box-shadow: var(--cs-focus-ring); }
.cs-btn:disabled,
.cs-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* q_style.css stylise button[type="submit"] (fond magenta, radius 5px, padding
   18px…) avec une spécificité (0,1,1) qui bat .cs-btn (0,1,0). On réaffirme la
   forme sur les <button> du design system (chargé après → gagne à égalité) ; les
   variantes de couleur sont en (0,2,0) via .cs-btn.cs-btn.cs-btn--X ci-dessous. */
button.cs-btn {
  padding: 13px 28px;
  border-radius: var(--cs-radius-btn);
  font-size: 0.95rem;
  background-color: transparent;
}

/* Primaire : dégradé signature de la charte */
.cs-btn.cs-btn--primary {
  background: var(--cs-degrade, linear-gradient(135deg, #7141D9, #D941B0));
  color: #fff;
  box-shadow: 0 4px 14px rgba(113, 65, 217, 0.35);
}
.cs-btn.cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(113, 65, 217, 0.45); }

/* Secondaire : contour pilule (bouton « Je suis déjà client » de la home) */
.cs-btn.cs-btn--secondary {
  background: #fff;
  color: var(--cs-violet, #7141D9);
  border-color: var(--cs-lila, #EDE8F8);
}
.cs-btn.cs-btn--secondary:hover { border-color: var(--cs-violet, #7141D9); transform: translateY(-2px); }

/* Ghost : rempli léger violet (actions discrètes) */
.cs-btn.cs-btn--ghost {
  background: rgba(113, 65, 217, 0.08);
  color: var(--cs-violet, #7141D9);
}
.cs-btn.cs-btn--ghost:hover { background: rgba(113, 65, 217, 0.16); }

/* Danger : corail de la charte (actions destructives) */
.cs-btn.cs-btn--danger {
  background: #fff;
  color: var(--cs-corail, #F25749);
  border-color: #f6c0bb;
}
.cs-btn.cs-btn--danger:hover { background: #fff5f4; border-color: var(--cs-corail, #F25749); }

/* Succès : vert de la charte (CTA « aller », paiement) */
.cs-btn.cs-btn--success {
  background: var(--cs-succes, #2E9E5B);
  color: #fff;
  box-shadow: 0 4px 14px rgba(46, 158, 91, 0.3);
}
.cs-btn.cs-btn--success:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(46, 158, 91, 0.4); }

.cs-btn.cs-btn--block { width: 100%; }

/* Barre d'actions bas de formulaire */
.cs-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cs-space-4);
  margin-top: var(--cs-space-6);
  padding-top: var(--cs-space-5);
  border-top: 1px solid var(--cs-lila, #EDE8F8);
}
.cs-actions__group { display: flex; gap: var(--cs-space-3); }
@media (max-width: 768px) {
  .cs-actions { flex-direction: column-reverse; align-items: stretch; }
  .cs-actions .cs-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Champs de formulaire
   -------------------------------------------------------------------------- */
.cs-field { display: flex; flex-direction: column; margin-bottom: var(--cs-space-4); }
.cs-field__label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--cs-encre, #2A2438);
  margin-bottom: var(--cs-space-2);
}
.cs-field__label .cs-required { color: var(--cs-magenta, #D941B0); }

/* Sélecteur qualifié (input./select./textarea.) → spécificité (0,1,1) : indispensable
   pour battre la règle GLOBALE héritée `input[type="text"], select { … }` de q_style.css
   (même spécificité) ; design-system.css étant chargé après, il gagne à égalité. Sans
   ça, les inputs texte/select gardaient la largeur calc(100%-20px) et la bordure violette
   de q_style au lieu du style du design system. */
input.cs-field__input,
select.cs-field__input,
textarea.cs-field__input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--cs-lila, #EDE8F8);
  border-radius: var(--cs-radius, 14px);
  font-size: 0.9375rem;
  font-family: var(--cs-font-texte, "Montserrat", sans-serif);
  color: var(--cs-encre, #2A2438);
  background: #fff;
  box-sizing: border-box;
  margin: 0;
  transition: all 0.18s ease;
}
input.cs-field__input:focus,
select.cs-field__input:focus,
textarea.cs-field__input:focus {
  outline: none;
  border-color: var(--cs-violet, #7141D9);
  box-shadow: var(--cs-focus-ring);
}
/* Champ non saisissable (calculé) */
.cs-field__input[readonly],
.cs-field__input:disabled {
  background: var(--cs-lavande, #F7F5FC);
  border-style: dashed;
  color: var(--cs-gris, #6B6580);
  cursor: not-allowed;
}
.cs-field__hint { font-size: 0.83rem; color: var(--cs-gris, #6B6580); margin-top: var(--cs-space-1); line-height: 1.45; }

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cs-space-5);
}

/* --------------------------------------------------------------------------
   3. Cartes / sections
   -------------------------------------------------------------------------- */
.cs-card {
  background: #fff;
  border: 1px solid var(--cs-lila, #EDE8F8);
  border-radius: var(--cs-radius-lg, 20px);
  box-shadow: var(--cs-ombre, 0 4px 20px rgba(57, 34, 89, 0.08));
  padding: var(--cs-space-5);
  margin-bottom: var(--cs-space-5);
}
.cs-card__title {
  font-family: var(--cs-font-titres, "Poppins", sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cs-aubergine, #392259);
  margin: 0 0 var(--cs-space-4);
  padding-bottom: var(--cs-space-3);
  border-bottom: 1px solid var(--cs-lila, #EDE8F8);
}

/* --------------------------------------------------------------------------
   4. Alertes + encart d'aide
   -------------------------------------------------------------------------- */
.cs-alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--cs-radius, 14px);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--cs-space-4);
}
.cs-alert--info    { background: var(--cs-lavande, #F7F5FC); border-color: var(--cs-lila, #EDE8F8); border-left-color: var(--cs-violet, #7141D9); color: var(--cs-aubergine, #392259); }
.cs-alert--success { background: #eaf7ef; border-color: #bfe6cd; border-left-color: var(--cs-succes, #2E9E5B); color: #1c6b3d; }
.cs-alert--warning { background: #fdf3e7; border-color: #f6d9b0; border-left-color: var(--cs-orange, #F29441); color: var(--cs-vigilance, #B35900); }
.cs-alert--danger  { background: #fdecea; border-color: #f6c0bb; border-left-color: var(--cs-corail, #F25749); color: #a83027; }

/* Encart d'aide pédagogique (signification → pourquoi → exemple → vigilance) */
.cs-help {
  background: var(--cs-degrade-doux, linear-gradient(135deg, #F3EEFF, #FDEFF9));
  border-left: 4px solid var(--cs-violet, #7141D9);
  border-radius: var(--cs-radius, 14px);
  padding: 16px 20px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--cs-encre, #2A2438);
  margin-bottom: var(--cs-space-5);
}
.cs-help__title { margin: 0 0 6px; font-size: 1rem; color: var(--cs-aubergine, #392259); font-weight: 700; font-family: var(--cs-font-titres, "Poppins", sans-serif); }
.cs-help p { margin: 5px 0; }

/* --------------------------------------------------------------------------
   5. Badges
   -------------------------------------------------------------------------- */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
}
.cs-badge--primary { background: var(--cs-degrade, linear-gradient(135deg, #7141D9, #D941B0)); color: #fff; }
.cs-badge--violet  { background: var(--cs-lila, #EDE8F8); color: var(--cs-violet, #7141D9); }
.cs-badge--neutral { background: var(--cs-lila, #EDE8F8); color: var(--cs-gris, #6B6580); }
.cs-badge--success { background: #eaf7ef; color: #1c6b3d; }
.cs-badge--warning { background: #fdf3e7; color: var(--cs-vigilance, #B35900); }