/* ============================================================================
 * cpb-design-system.css — Fondation graphique CPBRODERIE (palier 6C-1a)
 *
 * SOURCE CANONIQUE des design tokens (couleurs, typographie, espacements,
 * rayons, ombres, états métier) + composants COMMUNS opt-in préfixés `.cpb-*`.
 *
 * PORTÉE : à charger AVANT les feuilles spécifiques (espace-client.css, futures
 * feuilles admin/boutique). Aucun style global agressif : rien n'est appliqué à
 * `body`, `*`, aux titres nus ni aux `<button>`/`<input>` génériques — donc
 * l'inclusion de ce fichier ne modifie AUCUNE page existante tant que ses
 * classes ne sont pas explicitement posées dans le HTML (application = 6C-1b).
 *
 * NOTE 6C-1a-C : ce fichier est la SOURCE UNIQUE des tokens de marque. Le portail
 * `espace-client.css` (chargé APRÈS, par core/_client_layout.php) ne les redéfinit
 * plus : il les consomme via var(--cpb-*). Les empreintes SHA des tests 6A-4 ont
 * été mises à jour en conséquence (cascade re-basée).
 * ========================================================================== */

:root {
  /* ---- Marque : marine / or ---- */
  --cpb-navy: #13294B;
  --cpb-navy-deep: #0C1D36;
  --cpb-navy-soft: #E9EEF6;
  --cpb-gold: #C9A227;
  --cpb-gold-soft: #F7F0DC;
  --cpb-gold-line: #E7D9AE;
  --cpb-gold-text: #8C6D1F;
  /* Bleu public conservé comme couleur SECONDAIRE (D1). */
  --cpb-blue: #1E40AF;

  /* ---- Neutres ---- */
  --cpb-bg: #F5F6F9;
  --cpb-card: #FFFFFF;
  --cpb-border: #E3E7EF;
  --cpb-text: #182235;
  --cpb-muted: #5B6472;

  /* ---- États messages ---- */
  --cpb-ok-bg: #ECFDF5;
  --cpb-ok-border: #A7F3D0;
  --cpb-ok-text: #065F46;
  --cpb-err-bg: #FEF2F2;
  --cpb-err-border: #FECACA;
  --cpb-err-text: #991B1B;
  --cpb-warn-bg: #FFFBEB;
  --cpb-warn-border: #FDE68A;
  --cpb-warn-text: #92400E;
  --cpb-info-bg: #EFF3FB;
  --cpb-info-border: #C9D6EC;
  --cpb-info-text: #1E3A5F;

  /* ---- Rayons / ombres ---- */
  --cpb-radius: 14px;
  --cpb-radius-sm: 10px;
  --cpb-radius-pill: 999px;
  --cpb-shadow: 0 1px 3px rgba(19, 41, 75, 0.07);
  --cpb-shadow-hover: 0 6px 18px rgba(19, 41, 75, 0.10);

  /* ---- Espacements (échelle 4px) ---- */
  --cpb-space-1: 4px;
  --cpb-space-2: 8px;
  --cpb-space-3: 12px;
  --cpb-space-4: 16px;
  --cpb-space-5: 24px;
  --cpb-space-6: 32px;

  /* ---- Largeurs de contenu ---- */
  --cpb-content: 1100px;
  --cpb-content-narrow: 560px;

  /* ---- Divers ---- */
  --cpb-transition: 0.15s ease;
  --cpb-z-header: 100;
  --cpb-z-modal: 1000;

  /* ---- Typographie (Inter cible, fallbacks système) ---- */
  --cpb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cpb-font-mono: ui-monospace, SFMono-Regular, Consolas, Monaco, monospace;
  --cpb-fs-h1: 22px;
  --cpb-fs-h2: 18px;
  --cpb-fs-base: 15px;
  --cpb-fs-label: 13px;
  --cpb-fs-help: 12px;
  --cpb-fs-table: 14px;
  --cpb-lh-base: 1.5;
  --cpb-fw-normal: 400;
  --cpb-fw-medium: 600;
  --cpb-fw-bold: 700;

  /* ---- Couleurs de pastille des ÉTATS MÉTIER ---- */
  --cpb-st-draft: #8A97AC;       /* brouillon */
  --cpb-st-incomplete: #C77D0A;  /* incomplet */
  --cpb-st-await: var(--cpb-gold);/* action attendue */
  --cpb-st-published: #10B981;   /* publié */
  --cpb-st-active: var(--cpb-navy);/* actif */
  --cpb-st-disabled: #9AA3B2;    /* désactivé */
  --cpb-st-archived: #6B7280;    /* archivé */
  --cpb-st-pay-await: #C77D0A;   /* paiement attendu */
  --cpb-st-deposit: var(--cpb-gold);/* acompte reçu */
  --cpb-st-paid: #10B981;        /* payé */
  --cpb-st-error: #EF4444;       /* erreur */
  --cpb-st-success: #10B981;     /* succès */
  --cpb-st-info: #3B6AA0;        /* information */
}

/* ============================================================================
 * Racine opt-in (à poser sur un conteneur pour appliquer police + couleur).
 * ========================================================================== */
.cpb-root {
  font-family: var(--cpb-font);
  color: var(--cpb-text);
  line-height: var(--cpb-lh-base);
}

/* ============================================================================
 * Boutons
 * `.cpb-btn` et `.cpb-btn-secondary` reprennent À L'IDENTIQUE la base existante
 * du portail (non divergent) afin d'être disponibles pour les futures surfaces.
 * Variantes ajoutées : quiet, danger, publish (noms nouveaux, sans collision).
 * ========================================================================== */
.cpb-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--cpb-navy);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.cpb-btn:hover {
  background: var(--cpb-navy-deep);
}
.cpb-btn:focus-visible {
  outline: 2px solid var(--cpb-gold);
  outline-offset: 2px;
}
.cpb-btn-secondary {
  background: #fff;
  color: var(--cpb-navy);
  border: 1px solid var(--cpb-border);
}
.cpb-btn-secondary:hover {
  background: var(--cpb-bg);
}
/* Discret : texte/fond neutre. */
.cpb-btn-quiet {
  background: transparent;
  color: var(--cpb-text);
  border: 1px solid var(--cpb-border);
}
.cpb-btn-quiet:hover {
  background: var(--cpb-bg);
}
/* Danger : rouge ISOLÉ (jamais mêlé aux actions courantes). */
.cpb-btn-danger {
  background: #fff;
  color: var(--cpb-err-text);
  border: 1px solid var(--cpb-err-border);
}
.cpb-btn-danger:hover {
  background: var(--cpb-err-bg);
}
/* Publication : action forte distincte (accent or). */
.cpb-btn-publish {
  background: var(--cpb-gold);
  color: var(--cpb-navy-deep);
  border: 0;
}
.cpb-btn-publish:hover {
  background: var(--cpb-gold-line);
}
.cpb-btn[disabled],
.cpb-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
 * Champs de formulaire (opt-in)
 * ========================================================================== */
.cpb-field {
  display: block;
  margin-bottom: var(--cpb-space-4);
}
.cpb-label {
  display: block;
  font-size: var(--cpb-fs-label);
  font-weight: var(--cpb-fw-medium);
  color: var(--cpb-text);
  margin-bottom: var(--cpb-space-1);
}
.cpb-help {
  display: block;
  font-size: var(--cpb-fs-help);
  color: var(--cpb-muted);
  margin-top: var(--cpb-space-1);
}
.cpb-input,
.cpb-select,
.cpb-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--cpb-font);
  font-size: 14px;
  color: var(--cpb-text);
  background: #fff;
  padding: 9px 11px;
  border: 1px solid var(--cpb-border);
  border-radius: var(--cpb-radius-sm);
}
.cpb-textarea {
  resize: vertical;
}
.cpb-input:focus,
.cpb-select:focus,
.cpb-textarea:focus {
  outline: 2px solid var(--cpb-gold);
  outline-offset: 1px;
  border-color: var(--cpb-navy);
}

/* ============================================================================
 * Alerte (opt-in) — parallèle de `.cpb-msg` du portail, pour les autres surfaces
 * ========================================================================== */
.cpb-alert {
  border: 1px solid var(--cpb-border);
  border-radius: var(--cpb-radius-sm);
  padding: 12px 14px;
  font-size: 14px;
}
.cpb-alert.is-ok {
  background: var(--cpb-ok-bg);
  border-color: var(--cpb-ok-border);
  color: var(--cpb-ok-text);
}
.cpb-alert.is-err {
  background: var(--cpb-err-bg);
  border-color: var(--cpb-err-border);
  color: var(--cpb-err-text);
}
.cpb-alert.is-warn {
  background: var(--cpb-warn-bg);
  border-color: var(--cpb-warn-border);
  color: var(--cpb-warn-text);
}
.cpb-alert.is-info {
  background: var(--cpb-info-bg);
  border-color: var(--cpb-info-border);
  color: var(--cpb-info-text);
}

/* ============================================================================
 * En-tête de page (opt-in)
 * ========================================================================== */
.cpb-page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cpb-space-2) var(--cpb-space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--cpb-space-4);
}
.cpb-page-header h1 {
  font-family: var(--cpb-font);
  font-size: var(--cpb-fs-h1);
  font-weight: var(--cpb-fw-bold);
  color: var(--cpb-navy);
  margin: 0;
}

/* ============================================================================
 * Statut MÉTIER (opt-in) — pastille + libellé (couleur + texte, jamais couleur
 * seule). Distinct de `.cpb-badge` du portail (statuts de commande).
 * ========================================================================== */
.cpb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: var(--cpb-fw-medium);
  color: var(--cpb-text);
  background: var(--cpb-bg);
  border: 1px solid var(--cpb-border);
  border-radius: var(--cpb-radius-pill);
  padding: 3px 10px;
}
.cpb-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cpb-muted);
}
.cpb-status.is-draft::before { background: var(--cpb-st-draft); }
.cpb-status.is-incomplete::before { background: var(--cpb-st-incomplete); }
.cpb-status.is-await::before { background: var(--cpb-st-await); }
.cpb-status.is-published::before { background: var(--cpb-st-published); }
.cpb-status.is-active::before { background: var(--cpb-st-active); }
.cpb-status.is-disabled::before { background: var(--cpb-st-disabled); }
.cpb-status.is-archived::before { background: var(--cpb-st-archived); }
.cpb-status.is-pay-await::before { background: var(--cpb-st-pay-await); }
.cpb-status.is-deposit::before { background: var(--cpb-st-deposit); }
.cpb-status.is-paid::before { background: var(--cpb-st-paid); }
.cpb-status.is-error::before { background: var(--cpb-st-error); }
.cpb-status.is-success::before { background: var(--cpb-st-success); }
.cpb-status.is-info::before { background: var(--cpb-st-info); }

/* ============================================================================
 * Tableau responsive (opt-in) — enveloppe scrollable horizontalement en mobile
 * ========================================================================== */
.cpb-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cpb-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cpb-fs-table);
}

/* ============================================================================
 * État vide (opt-in)
 * ========================================================================== */
.cpb-empty-state {
  text-align: center;
  color: var(--cpb-muted);
  padding: 28px 16px;
  border: 1px dashed var(--cpb-border);
  border-radius: var(--cpb-radius);
  background: var(--cpb-card);
}
.cpb-empty-state-title {
  font-weight: var(--cpb-fw-medium);
  color: var(--cpb-text);
  margin-bottom: var(--cpb-space-1);
}

/* ============================================================================
 * Accessibilité — masquage visuel accessible (lecteurs d'écran). Le `!important`
 * est le motif standard de ce utilitaire (garantir le masquage quel que soit le
 * contexte) : seule exception justifiée du fichier.
 * ========================================================================== */
.cpb-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
 * Responsive
 * ========================================================================== */
@media (max-width: 640px) {
  .cpb-page-header {
    flex-direction: column;
    align-items: stretch;
  }
}