/*
 * Sympa — components.css
 *
 * Composants réutilisables du thème : boutons, cartes, badges, etc.
 * Chaque composant inclut ses états (survol, clic, focus) — ils font
 * partie du composant. Les animations d'apparition sont dans motion.css.
 *
 * tokens.css et global.css doivent être chargés avant ce fichier.
 */


/* ════════════════════════════════════════════════════════════════
   Boutons
   Signature Sympa = bordure noire 1.5px + ombre décalée 3px,
   appliquée aux CTA cliquables (primary, secondary, white).
   ════════════════════════════════════════════════════════════════ */

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sympa-space-2);
  font: 500 14px/20px var(--sympa-font-sans);
  padding: 10px 20px;                    /* spec bouton « 10×20 » */
  border: 0;
  border-radius: var(--sympa-radius-md);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--sympa-dur-sm) var(--sympa-ease-out);
}

/* Désactivé — ex. pendant l'envoi d'un formulaire. */
.s-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Variante grande taille */
.s-btn-lg {
  padding: var(--sympa-space-3) var(--sympa-space-6);
  font-size: 15px;
}

/* Primaire — CTA principal, fond indigo */
.s-btn--primary {
  background: var(--sympa-brand-600);
  color: var(--sympa-surface);
  border: 1.5px solid var(--sympa-ink-900);
  box-shadow: var(--sympa-shadow-offset);
}
.s-btn--primary:hover { background: var(--sympa-brand-700); }
.s-btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--sympa-ink-900);
}

/* Secondaire — fond papier */
.s-btn--secondary {
  background: var(--sympa-paper);
  color: var(--sympa-ink-900);
  border: 1.5px solid var(--sympa-ink-900);
  box-shadow: var(--sympa-shadow-offset);
}
.s-btn--secondary:hover { background: var(--sympa-surface); }
.s-btn--secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--sympa-ink-900);
}

/* Blanc — pour les fonds colorés (ex. CTA final indigo) */
.s-btn--white {
  background: var(--sympa-surface);
  color: var(--sympa-ink-900);
  border: 1.5px solid var(--sympa-ink-900);
  box-shadow: var(--sympa-shadow-offset);
}
.s-btn--white:hover { background: var(--sympa-paper); }
.s-btn--white:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--sympa-ink-900);
}

/* Ghost — bouton discret, sans signature */
.s-btn--ghost {
  background: transparent;
  color: var(--sympa-ink-700);
  padding: var(--sympa-space-2) var(--sympa-space-4);
}
.s-btn--ghost:hover {
  background: var(--sympa-brand-50);
  color: var(--sympa-ink-900);
}

/* Link — bouton à l'apparence d'un lien texte */
.s-btn--link {
  background: transparent;
  color: var(--sympa-brand-600);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.s-btn--link:hover { color: var(--sympa-brand-700); }


/* ════════════════════════════════════════════════════════════════
   Cartes de contenu — fond blanc, bordure fine
   ════════════════════════════════════════════════════════════════ */

.s-card {
  background: var(--sympa-surface);
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-lg);
  padding: var(--sympa-space-5);
}

/* Carte cliquable (ex. carte de tuto) — léger soulèvement au survol */
.s-card--tuto {
  transition: transform var(--sympa-dur-md) var(--sympa-ease-out),
              box-shadow var(--sympa-dur-md) var(--sympa-ease-out);
}
.s-card--tuto:hover {
  transform: translateY(-2px);
  box-shadow: var(--sympa-shadow-xs);
}

/* Carte de tuto (lien complet) — contenu empilé pour aligner le CTA
 * et la meta en bas. Utilisé sur la home et dans « Tutos liés » d'un
 * article. Distinct de .s-tuto-tile qui sert sur la page /tutos/. */
.s-tuto {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.s-tuto:hover { text-decoration: none; }

.s-tuto__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sympa-space-3);
}
.s-tuto__title {
  margin-bottom: var(--sympa-space-2);
  font-size: 18px;
  line-height: 26px;
}
.s-tuto__excerpt {
  margin: 0 0 var(--sympa-space-3);
  font: 400 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  /* L'extrait absorbe l'espace restant → meta toujours en bas. */
  flex-grow: 1;
}
.s-tuto__more {
  font: 500 13px/18px var(--sympa-font-sans);
}
.s-tuto__meta {
  margin-top: var(--sympa-space-3);
  font: 500 11px/14px var(--sympa-font-sans);
  letter-spacing: 0.02em;
  color: var(--sympa-ink-400);
}


/* ════════════════════════════════════════════════════════════════
   Stat cards — fond pastel, sans bordure
   ════════════════════════════════════════════════════════════════ */

.s-stat {
  padding: var(--sympa-space-4);
  border-radius: var(--sympa-radius-lg);
}
.s-stat--mint    { background: var(--sympa-mint);    color: var(--sympa-mint-ink); }
.s-stat--peach   { background: var(--sympa-peach);   color: var(--sympa-peach-ink); }
.s-stat--lavande { background: var(--sympa-lavande); color: var(--sympa-lavande-ink); }
.s-stat--jaune   { background: var(--sympa-jaune);   color: var(--sympa-jaune-ink); }

.s-stat__num { font: 700 32px/36px var(--sympa-font-sans); letter-spacing: -0.01em; }
.s-stat__lbl { font: 500 13px/18px var(--sympa-font-sans); margin-top: 2px; opacity: 0.85; }


/* ════════════════════════════════════════════════════════════════
   Badges — pilule, fond pastel
   ════════════════════════════════════════════════════════════════ */

.s-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sympa-space-1) var(--sympa-space-3);
  border-radius: var(--sympa-radius-full);
  font: 500 12px/16px var(--sympa-font-sans);
}
.s-badge--mint    { background: var(--sympa-mint);     color: var(--sympa-mint-ink); }
.s-badge--peach   { background: var(--sympa-peach);    color: var(--sympa-peach-ink); }
.s-badge--lavande { background: var(--sympa-lavande);  color: var(--sympa-lavande-ink); }
.s-badge--jaune   { background: var(--sympa-jaune);    color: var(--sympa-jaune-ink); }
.s-badge--brand   { background: var(--sympa-brand-50); color: var(--sympa-brand-800); }
/* Pastels d'extension — réservés aux badges (pas utilisés par .s-stat). */
.s-badge--rose      { background: var(--sympa-rose);      color: var(--sympa-rose-ink); }
.s-badge--bleu      { background: var(--sympa-bleu);      color: var(--sympa-bleu-ink); }
.s-badge--sauge     { background: var(--sympa-sauge);     color: var(--sympa-sauge-ink); }
.s-badge--corail    { background: var(--sympa-corail);    color: var(--sympa-corail-ink); }
.s-badge--orange    { background: var(--sympa-orange);    color: var(--sympa-orange-ink); }
.s-badge--gris      { background: var(--sympa-gris);      color: var(--sympa-gris-ink); }
.s-badge--emeraude  { background: var(--sympa-emeraude);  color: var(--sympa-emeraude-ink); }
.s-badge--ocre      { background: var(--sympa-ocre);      color: var(--sympa-ocre-ink); }
.s-badge--rouge     { background: var(--sympa-rouge);     color: var(--sympa-rouge-ink); }
.s-badge--prune     { background: var(--sympa-prune);     color: var(--sympa-prune-ink); }
.s-badge--turquoise { background: var(--sympa-turquoise); color: var(--sympa-turquoise-ink); }

/* Petit point décoratif, hérite de la couleur du badge */
.s-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Badge cliquable : matérialise l'interaction sans changer la palette.
 * Utilisé sur le hero d'un tuto et dans la carte « Outils utilisés »
 * (badges qui pointent vers /tutos/?cat= ou ?tag=). Les badges en
 * <span> sur les tuiles ne sont pas concernés. */
a.s-badge {
  cursor: pointer;
  transition: transform var(--sympa-dur-sm) var(--sympa-ease-out),
              box-shadow var(--sympa-dur-sm) var(--sympa-ease-out);
}
a.s-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(26, 26, 46, 0.08);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════
   Feature chip — carré 40×40 contenant une icône
   ════════════════════════════════════════════════════════════════ */

.s-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sympa-radius-md);
  background: var(--sympa-brand-50);
  color: var(--sympa-brand-600);
}


/* ════════════════════════════════════════════════════════════════
   Champs de formulaire
   ════════════════════════════════════════════════════════════════ */

.s-input {
  padding: 10px 12px;                    /* spec input « 10×12 » */
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-md);
  background: var(--sympa-surface);
  color: var(--sympa-ink-900);
  font: 400 14px/20px var(--sympa-font-sans);
  box-sizing: border-box;
  transition: border-color var(--sympa-dur-sm) var(--sympa-ease-out),
              box-shadow   var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-input::placeholder { color: var(--sympa-ink-300); }

/* Focus : outline retiré MAIS remplacé par un anneau accessible
   (bordure brand-600 + halo) — conforme à la règle focus. */
.s-input:focus {
  outline: none;
  border-color: var(--sympa-brand-600);
  box-shadow: 0 0 0 3px var(--sympa-brand-50);
}