/* ============================================================================
   DCE-IA — Bibliothèque de composants
   ----------------------------------------------------------------------------
   S'appuie EXCLUSIVEMENT sur les tokens de tokens.css. Aucune valeur codée en
   dur. Namespace cible `dce-*` (voir GUIDE.md pour la table de correspondance
   lp-* / app-* / dceia-* → dce-*).

   Stratégie de spécificité face au DSFR : les composants interactifs qui sont
   des liens ou des boutons sont ciblés avec un sélecteur de type préfixe
   (`a.dce-btn`, `button.dce-btn`) afin d'atteindre la spécificité (0,1,1) et de
   l'emporter sur `a[href]:hover` du DSFR (0,2,1) SANS `!important`. Chargé APRÈS
   le DSFR.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BOUTONS
   --------------------------------------------------------------------------- */
.dce-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--dce-space-2);
  font-family: inherit; font-size: var(--dce-text-sm); font-weight: var(--dce-weight-semibold);
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  padding: 0.55rem 1rem; border-radius: var(--dce-radius-xs);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dce-transition), border-color var(--dce-transition),
              color var(--dce-transition), box-shadow var(--dce-transition), transform 0.12s ease;
}
.dce-btn:focus-visible { outline: 2px solid var(--dce-focus-ring); outline-offset: 2px; }

/* Accent orange — action principale d'un écran (une seule occurrence). */
.dce-btn--accent { background: var(--dce-accent-400); color: #fff; }
a.dce-btn--accent:hover, button.dce-btn--accent:hover,
a.dce-btn--accent:focus, button.dce-btn--accent:focus { background: var(--dce-accent-600); color: #fff; }

/* Primaire bleu — action structurante secondaire (app). */
.dce-btn--primary { background: var(--dce-primary-500); border-color: var(--dce-primary-500); color: #fff; }
a.dce-btn--primary:hover, button.dce-btn--primary:hover { background: var(--dce-primary-700); border-color: var(--dce-primary-700); color: #fff; }

/* Secondaire — contour, fond blanc. */
.dce-btn--secondary { background: var(--dce-surface); border-color: var(--dce-border); color: var(--dce-text); }
a.dce-btn--secondary:hover, button.dce-btn--secondary:hover { border-color: var(--dce-primary-500); color: var(--dce-primary-500); }

/* Danger — suppression / action irréversible. */
.dce-btn--danger { background: var(--dce-error); border-color: var(--dce-error); color: #fff; }
a.dce-btn--danger:hover, button.dce-btn--danger:hover { background: var(--dce-error-text); border-color: var(--dce-error-text); color: #fff; }

/* Fantôme — sur fond sombre (sidebar). */
.dce-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
a.dce-btn--ghost:hover, button.dce-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Tailles */
.dce-btn--lg { font-size: var(--dce-text-base); padding: 0.9rem 1.7rem; border-radius: var(--dce-radius-md); }
.dce-btn--sm { font-size: var(--dce-text-xs); padding: 0.35rem 0.7rem; }

/* Ombre optionnelle sur l'accent (vitrine) */
.dce-btn--elevated { box-shadow: var(--dce-shadow-accent); }
a.dce-btn--elevated:hover, button.dce-btn--elevated:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,107,53,0.40); }

/* Désactivé (couvre :disabled et [disabled], survol neutralisé) */
.dce-btn:disabled, .dce-btn[disabled],
.dce-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
button.dce-btn:disabled:hover, a.dce-btn[aria-disabled="true"]:hover { background: inherit; }
button.dce-btn--accent:disabled:hover { background: var(--dce-accent-400); }

/* ---------------------------------------------------------------------------
   CARTES
   --------------------------------------------------------------------------- */
.dce-card {
  background: var(--dce-surface); border: 1px solid var(--dce-border);
  border-radius: var(--dce-radius-sm); box-shadow: var(--dce-shadow-xs);
  padding: 1.1rem 1.2rem;
}
.dce-card--vitrine { border-radius: var(--dce-radius-lg); box-shadow: var(--dce-shadow-sm); padding: 1.75rem; }
.dce-card--recommended { border: 2px solid var(--dce-accent-400); box-shadow: 0 10px 28px rgba(255,107,53,0.16); }
.dce-card--interactive { transition: var(--dce-transition-lift); }
.dce-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--dce-shadow-md); }

.dce-card__eyebrow {
  font-size: var(--dce-text-xs); text-transform: uppercase; letter-spacing: var(--dce-tracking-wide);
  color: var(--dce-text-muted); font-weight: var(--dce-weight-bold); margin: 0 0 0.7rem;
}

/* Carte KPI */
.dce-kpi { background: var(--dce-surface); border: 1px solid var(--dce-border); border-radius: var(--dce-radius-sm); box-shadow: var(--dce-shadow-xs); padding: 1rem 1.1rem; }
.dce-kpi__label { font-size: var(--dce-text-xs); color: var(--dce-text-muted); font-weight: var(--dce-weight-semibold); }
.dce-kpi__value { font-size: var(--dce-text-2xl); font-weight: var(--dce-weight-bold); color: var(--dce-primary-500); line-height: 1.1; margin-top: 0.25rem; }
.dce-kpi__meta { font-size: var(--dce-text-xs); color: var(--dce-text-muted); margin-top: 0.2rem; }
.dce-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dce-space-4); }

/* ---------------------------------------------------------------------------
   BADGES DE STATUT
   --------------------------------------------------------------------------- */
.dce-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--dce-text-2xs); font-weight: var(--dce-weight-semibold); letter-spacing: 0.01em;
  padding: 0.22rem 0.58rem 0.22rem 0.5rem; border-radius: var(--dce-radius-pill); line-height: 1.35;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
/* Point d'état : indicateur coloré en tête (traitement moderne). */
.dce-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.dce-badge--pending   { background: var(--dce-status-pending-surface);   color: var(--dce-status-pending-text); }
.dce-badge--running   { background: var(--dce-status-running-surface);   color: var(--dce-status-running-text); }
.dce-badge--done      { background: var(--dce-status-done-surface);      color: var(--dce-status-done-text); }
.dce-badge--failed    { background: var(--dce-status-failed-surface);    color: var(--dce-status-failed-text); }
.dce-badge--cancelled { background: var(--dce-status-cancelled-surface); color: var(--dce-status-cancelled-text); }
.dce-badge--pending::before   { background: var(--dce-neutral-300); }
.dce-badge--running::before   { background: var(--dce-accent-400); }
.dce-badge--done::before      { background: var(--dce-success); }
.dce-badge--failed::before    { background: var(--dce-error); }
.dce-badge--cancelled::before { background: var(--dce-warning); }

/* « En cours » : point pulsant (halo). Désactivé en reduced-motion. */
.dce-badge--running::before { animation: dce-badge-pulse 1.6s ease-in-out infinite; }
@keyframes dce-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dce-accent-400) 55%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dce-accent-400) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .dce-badge--running::before { animation: none; } }

/* ---------------------------------------------------------------------------
   TABLEAUX DE DONNÉES
   --------------------------------------------------------------------------- */
.dce-table-wrap { background: var(--dce-surface); border: 1px solid var(--dce-border); border-radius: var(--dce-radius-sm); overflow: hidden; }
.dce-table { width: 100%; border-collapse: collapse; font-size: var(--dce-text-sm); }
.dce-table thead th {
  background: var(--dce-surface-sunken); text-align: left;
  font-size: var(--dce-text-2xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--dce-text-muted); font-weight: var(--dce-weight-bold);
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--dce-border);
}
.dce-table tbody td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--dce-neutral-100); color: var(--dce-text); vertical-align: middle; }
.dce-table tbody tr:last-child td { border-bottom: none; }
.dce-table tbody tr[data-htmx-refresh] { animation: dce-row-in 0.4s ease; }
@keyframes dce-row-in { from { background: var(--dce-accent-50); } to { background: transparent; } }
.dce-table a { color: var(--dce-primary-500); text-decoration: none; font-weight: var(--dce-weight-medium); }
.dce-table a:hover { text-decoration: underline; }

/* Pagination */
.dce-pagination { display: flex; gap: 0.6rem; align-items: center; margin-top: var(--dce-space-4); font-size: var(--dce-text-sm); }
.dce-pagination__info { color: var(--dce-text-muted); }

/* ---------------------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------------------- */
.dce-field { margin-bottom: var(--dce-space-4); }
.dce-field__label { display: block; font-size: var(--dce-text-sm); font-weight: var(--dce-weight-medium); color: var(--dce-text); margin-bottom: 0.25rem; }
.dce-field__req { color: var(--dce-error); }
.dce-field__hint { font-size: var(--dce-text-xs); color: var(--dce-text-muted); margin: 0.25rem 0 0; }
.dce-field__error { font-size: var(--dce-text-xs); color: var(--dce-error-text); margin: 0.25rem 0 0; font-weight: var(--dce-weight-medium); }
.dce-input, .dce-select, .dce-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--dce-text-sm);
  color: var(--dce-text); background: var(--dce-surface);
  padding: 0.45rem 0.65rem; border: 1px solid var(--dce-border); border-radius: var(--dce-radius-xs);
  transition: border-color var(--dce-transition), box-shadow var(--dce-transition);
}
.dce-input:focus, .dce-select:focus, .dce-textarea:focus {
  outline: none; border-color: var(--dce-primary-500);
  box-shadow: 0 0 0 3px rgba(11,61,145,0.12);
}
.dce-field--invalid .dce-input, .dce-input[aria-invalid="true"] { border-color: var(--dce-error); }
.dce-field--invalid .dce-input:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.14); }

/* Zone de dépôt de fichier */
.dce-file { display: block; width: 100%; box-sizing: border-box; font-size: var(--dce-text-sm); color: var(--dce-text); background: var(--dce-surface-sunken); border: 1px dashed var(--dce-border); border-radius: var(--dce-radius-xs); padding: 0.5rem 0.6rem; cursor: pointer; font-family: inherit; }
.dce-file:hover { border-color: var(--dce-primary-500); }
.dce-file::file-selector-button { margin-right: 0.7rem; background: var(--dce-primary-500); color: #fff; border: none; border-radius: var(--dce-radius-xs); padding: 0.4rem 0.8rem; font-size: var(--dce-text-xs); font-weight: var(--dce-weight-semibold); cursor: pointer; font-family: inherit; }
.dce-file::file-selector-button:hover { background: var(--dce-primary-700); }

/* ---------------------------------------------------------------------------
   BANDEAUX D'ÉTAT (empilables : service / mode admin / mode LLM)
   Compacts : titre + description sur une ligne fine.
   --------------------------------------------------------------------------- */
.dce-banner { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.6rem; row-gap: 0.1rem; padding: 0.45rem 1.5rem; border-left: 4px solid var(--dce-info); background: var(--dce-info-surface); color: var(--dce-text); }
.dce-banner__title { margin: 0; font-size: var(--dce-text-base); font-weight: var(--dce-weight-bold); line-height: 1.3; }
.dce-banner__desc { margin: 0; font-size: var(--dce-text-sm); line-height: 1.3; color: var(--dce-text-muted); }
.dce-banner--warning { background: var(--dce-warning-surface); border-left-color: var(--dce-warning); }
.dce-banner--error   { background: var(--dce-error-surface);   border-left-color: var(--dce-error); }
.dce-banner--success { background: var(--dce-success-surface); border-left-color: var(--dce-success); }
.dce-banner--admin   { background: #fbeee7; border-left-color: var(--dce-accent-800); }

/* Alertes en bloc (fr-alert maison) */
.dce-alert { border: 1px solid var(--dce-info-border); border-left: 4px solid var(--dce-info); background: var(--dce-info-surface); border-radius: var(--dce-radius-sm); padding: 0.9rem 1.1rem; }
.dce-alert__title { margin: 0 0 0.3rem; font-size: var(--dce-text-base); font-weight: var(--dce-weight-bold); color: var(--dce-text); }
.dce-alert p { margin: 0; font-size: var(--dce-text-sm); color: var(--dce-text-muted); }
.dce-alert--success { border-color: var(--dce-success-border); border-left-color: var(--dce-success); background: var(--dce-success-surface); }
.dce-alert--warning { border-color: var(--dce-warning-border); border-left-color: var(--dce-warning); background: var(--dce-warning-surface); }
.dce-alert--error   { border-color: var(--dce-error-border);   border-left-color: var(--dce-error);   background: var(--dce-error-surface); }

/* Avertissement IA — obligatoire (transparence). */
.dce-ai-notice { border: 1px solid var(--dce-warning-border); border-left: 4px solid var(--dce-warning); background: var(--dce-warning-surface); border-radius: var(--dce-radius-sm); padding: 0.9rem 1.1rem; }
.dce-ai-notice__title { margin: 0 0 0.3rem; font-size: var(--dce-text-base); font-weight: var(--dce-weight-bold); color: var(--dce-warning-text); display: flex; align-items: center; gap: 0.4rem; }
.dce-ai-notice p { margin: 0; font-size: var(--dce-text-sm); color: var(--dce-text); line-height: var(--dce-leading-normal); }

/* ---------------------------------------------------------------------------
   MODALE DE CONFIRMATION
   --------------------------------------------------------------------------- */
.dce-modal-overlay { position: fixed; inset: 0; background: rgba(4,22,58,0.45); display: grid; place-items: center; z-index: 1000; padding: 1rem; }
.dce-modal { background: var(--dce-surface); border-radius: var(--dce-radius-lg); box-shadow: var(--dce-shadow-lg); max-width: 460px; width: 100%; padding: 1.5rem 1.6rem; }
.dce-modal__title { margin: 0 0 0.5rem; font-size: var(--dce-text-lg); font-weight: var(--dce-weight-bold); color: var(--dce-text); }
.dce-modal__body { font-size: var(--dce-text-sm); color: var(--dce-text-muted); line-height: var(--dce-leading-normal); }
.dce-modal__footer { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.3rem; }

/* ---------------------------------------------------------------------------
   FIL DE CONVERSATION (juriste / rédaction)
   --------------------------------------------------------------------------- */
.dce-thread { display: flex; flex-direction: column; gap: 0.8rem; }
.dce-msg { max-width: 80%; border: 1px solid var(--dce-border); border-radius: var(--dce-radius-md); padding: 0.6rem 0.85rem; }
.dce-msg--user { align-self: flex-end; background: var(--dce-primary-50); }
.dce-msg--ai   { align-self: flex-start; background: var(--dce-neutral-50); }
.dce-msg__role { font-size: 0.7rem; color: var(--dce-text-muted); font-weight: var(--dce-weight-bold); text-transform: uppercase; margin-bottom: 0.2rem; }
.dce-msg__body { font-size: var(--dce-text-base); color: var(--dce-text); line-height: var(--dce-leading-normal); }
.dce-msg__body p { margin: 0.4rem 0; }
.dce-msg__body :first-child { margin-top: 0; }
.dce-msg__body :last-child { margin-bottom: 0; }
.dce-copy-btn { align-self: flex-start; margin-top: 0.4rem; font-size: 0.7rem; padding: 0.15rem 0.55rem; border: 1px solid var(--dce-border); border-radius: var(--dce-radius-xs); background: var(--dce-surface); color: var(--dce-text-muted); cursor: pointer; }
.dce-copy-btn:hover { border-color: var(--dce-primary-500); color: var(--dce-primary-500); }

/* Journal d'avancement */
.dce-journal { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.dce-journal__step { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.15rem 0; font-size: var(--dce-text-sm); }
.dce-journal__step--done { color: var(--dce-text-muted); }
.dce-journal__step--current { font-weight: var(--dce-weight-semibold); color: var(--dce-text); }
.dce-journal__step--current .dce-journal__icon { animation: dce-pulse 1.2s ease-in-out infinite; }
@keyframes dce-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .dce-journal__step--current .dce-journal__icon { animation: none; } }

/* Barre de progression */
.dce-progress { width: 100%; height: 8px; border-radius: var(--dce-radius-pill); background: var(--dce-neutral-100); overflow: hidden; }
.dce-progress__bar { height: 100%; background: linear-gradient(90deg, var(--dce-primary-500), var(--dce-accent-400)); border-radius: inherit; transition: width 0.4s ease; }

/* ---------------------------------------------------------------------------
   PRIX / CRÉDITS
   --------------------------------------------------------------------------- */
.dce-price { font-size: var(--dce-text-xl); font-weight: var(--dce-weight-bold); color: var(--dce-primary-500); }
.dce-price__ht { font-size: var(--dce-text-xs); color: var(--dce-text-muted); font-weight: var(--dce-weight-normal); }
.dce-price__unit { font-size: var(--dce-text-xs); color: var(--dce-text-muted); margin-top: 0.3rem; }
.dce-credits { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.dce-credits__value { font-size: var(--dce-text-lg); font-weight: var(--dce-weight-bold); color: var(--dce-primary-500); }
.dce-credits__unit { font-size: var(--dce-text-xs); color: var(--dce-text-muted); }

/* ---------------------------------------------------------------------------
   LIENS (défaut applicatif)
   --------------------------------------------------------------------------- */
a { color: var(--dce-link); }
a:hover { color: var(--dce-link-hover); }