:root,
[data-theme="clair"] {
  --marque-principale: #00334d;
  --marque-accent: #0aeadc;
  --marque-sombre: #022e37;
  --marque-secondaire: #444444;
  --blanc: #ffffff;
  --blanc-casse: #f7f7f7;
  --gris-clair: #e8e8e8;
  --gris-neutre: #c0c4cc;
  --gris-moyen: #707070;
  --gris-fonce: #4a4a4a;
  --texte-principal: #000000;
  --texte-secondaire: #444444;
  --texte-tertiaire: #707070;
  --pastel-teal-tres-clair: #f0fdfc;
  --pastel-teal-clair: #e0faf8;
  --pastel-orange: #fff0e8;
  --pastel-rose: #fde8e6;
  --pastel-vert: #e5f5e0;
  --pastel-bleu: #e0eff9;
  --vert: #1a8a5a;
  --bleu: #2a6db5;
  --orange: #d4682a;
  --alerte: #c21503;
  --alerte-clair: #e84030;
  --police: "Figtree", sans-serif;
  --espace-xs: 8px;
  --espace-s: 12px;
  --espace-m: 16px;
  --espace-l: 20px;
  --espace-xl: 24px;
  --espace-2xl: 30px;
  --espace-3xl: 40px;
  --rayon-tag: 4px;
  --rayon-bouton: 8px;
  --rayon-carte: 12px;
  --rayon-capsule: 80px;
  --ombre-carte: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
  --bordure: rgba(0, 0, 0, 0.12);
  --bordure-forte: rgba(0, 0, 0, 0.2);
  --transition: 0.2s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--blanc-casse);
  color: var(--texte-principal);
  font-family: var(--police);
  font-size: 14px;
  line-height: 1.6;
}

button,
textarea {
  font: inherit;
}

.bande {
  display: flex;
  height: 5px;
}

.bande span {
  flex: 1;
}

.bande .c1 { background: #00334d; }
.bande .c2 { background: #0aeadc; }
.bande .c3 { background: #022e37; }
.bande .c4 { background: #444444; }

.config-bandeau {
  display: flex;
  gap: var(--espace-s);
  align-items: center;
  padding: 8px var(--espace-3xl);
  background: var(--pastel-bleu);
  border-bottom: 1px solid var(--bordure);
  color: var(--bleu);
  font-size: 12px;
}

.config-note {
  color: var(--texte-secondaire);
}

.entete {
  padding: var(--espace-xl) var(--espace-3xl);
  background: var(--marque-sombre);
  color: var(--blanc);
}

.entete-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--espace-l);
  align-items: end;
}

.surtitre {
  margin-bottom: 4px;
  color: var(--marque-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.entete h1 {
  margin: 0;
  font-size: 22px;
}

.meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.entete-side {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mini-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mini-value {
  font-size: 12px;
  font-weight: 700;
}

.btn-reset {
  margin-top: 10px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.btn-reset:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.onglets-bar {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

.onglets {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  padding: 0 var(--espace-3xl);
}

.onglet {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 14px 22px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texte-secondaire);
  font-size: 12px;
  font-weight: 600;
}

.onglet .num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--gris-clair);
}

.onglet.actif {
  color: var(--marque-principale);
  border-bottom-color: var(--marque-accent);
}

.onglet.actif .num {
  background: var(--marque-principale);
  color: var(--blanc);
}

.onglet.inactif {
  opacity: 0.5;
  cursor: not-allowed;
}

.layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-3xl) var(--espace-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--espace-xl);
  align-items: start;
}

.layout-debug {
  max-width: 1680px;
  grid-template-columns: minmax(0, 1fr) 420px 360px;
}

.panneau,
.grille-panneau {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
}

.debug-panneau {
  background: #07162f;
  color: #8ec5ff;
  border: 1px solid rgba(0, 174, 255, 0.28);
  border-radius: var(--rayon-carte);
  box-shadow: 0 10px 40px rgba(0, 18, 42, 0.45);
  overflow: hidden;
}

.debug-panneau-tech {
  box-shadow: 0 8px 28px rgba(0, 18, 42, 0.36);
}

.panneau {
  display: flex;
  flex-direction: column;
  min-height: 72vh;
}

.panneau-entete,
.grille-entete {
  padding: var(--espace-l) var(--espace-xl);
  border-bottom: 1px solid var(--bordure);
}

.debug-entete {
  padding: var(--espace-l) var(--espace-xl);
  border-bottom: 1px solid rgba(0, 174, 255, 0.2);
  background: linear-gradient(180deg, rgba(0, 101, 214, 0.18), rgba(7, 22, 47, 0.95));
}

.debug-entete h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #d7eeff;
}

.debug-kicker {
  margin-bottom: 4px;
  color: #00d4ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.debug-sous {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(142, 197, 255, 0.78);
}

.panneau-entete {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-bot {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marque-principale);
  color: var(--marque-accent);
}

.panneau-entete h2,
.grille-entete h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.sous {
  font-size: 11px;
  color: var(--texte-tertiaire);
}

.etat-courant {
  margin: var(--espace-l) var(--espace-l) 0;
  padding: 10px 12px;
  border-radius: var(--rayon-bouton);
  background: var(--pastel-teal-tres-clair);
  color: var(--marque-principale);
  font-size: 12px;
  font-weight: 600;
}

.alerte {
  margin: var(--espace-m) var(--espace-l) 0;
  padding: 10px 12px;
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon-tag);
  background: var(--pastel-rose);
  color: var(--alerte);
  font-size: 12px;
  font-weight: 600;
}

.chat-zone {
  flex: 1;
  overflow-y: auto;
  padding: var(--espace-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.msg {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg.assistant {
  align-self: flex-start;
  background: var(--pastel-teal-clair);
  border-bottom-left-radius: 4px;
}

.msg.user {
  align-self: flex-end;
  background: var(--marque-principale);
  color: var(--blanc);
  border-bottom-right-radius: 4px;
}

.msg.system {
  align-self: center;
  background: transparent;
  color: var(--texte-tertiaire);
  font-size: 11px;
  padding: 0;
}

.upload-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 var(--espace-l) var(--espace-m);
}

.upload-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-capsule);
  background: var(--blanc-casse);
  color: var(--texte-secondaire);
  font-size: 11px;
  font-weight: 600;
}

.zone-saisie {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: var(--espace-m) var(--espace-l);
  border-top: 1px solid var(--bordure);
}

.zone-saisie textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 14px;
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--rayon-bouton);
  outline: none;
}

.zone-saisie textarea:focus,
.champ:focus {
  border-color: var(--marque-principale);
  box-shadow: 0 0 0 3px rgba(10, 234, 220, 0.2);
}

.btn,
.btn-fantome,
.btn-icone {
  transition: all var(--transition);
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--rayon-bouton);
  font-size: 13px;
  font-weight: 600;
}

.btn-primaire {
  background: var(--marque-principale);
  color: var(--blanc);
}

.btn-primaire:hover:not(:disabled) {
  background: var(--marque-sombre);
}

.btn-contour {
  border: 1px solid var(--marque-principale);
  background: var(--blanc);
  color: var(--marque-principale);
}

.btn-contour:hover:not(:disabled) {
  background: var(--pastel-teal-clair);
}

.btn-accent {
  width: 100%;
  background: var(--marque-accent);
  color: var(--marque-sombre);
  font-weight: 700;
}

.btn-accent:disabled,
.btn-primaire:disabled,
.btn-icone:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-fantome {
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--marque-principale);
}

.btn-fantome:hover {
  background: var(--pastel-teal-clair);
}

.barre-progression {
  width: 100%;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--gris-clair);
}

.barre-progression-remplissage {
  height: 100%;
  width: 0;
  background: var(--marque-accent);
  transition: width 0.4s ease;
}

.progression-label {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--texte-tertiaire);
  font-size: 11px;
}

.grille-corps {
  max-height: calc(100vh - 340px);
  min-height: 280px;
  overflow-y: auto;
  padding: var(--espace-l) var(--espace-xl);
}

.debug-corps {
  max-height: calc(100vh - 260px);
  min-height: 280px;
  overflow-y: auto;
  padding: var(--espace-l);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.debug-corps.tech {
  gap: 8px;
}

.debug-vide {
  padding: 14px;
  border: 1px dashed rgba(0, 174, 255, 0.32);
  border-radius: var(--rayon-bouton);
  color: rgba(142, 197, 255, 0.75);
  font-size: 12px;
}

.debug-item {
  padding: 12px;
  border: 1px solid rgba(0, 174, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 34, 73, 0.8);
}

.debug-item.tech {
  padding: 10px;
  background: rgba(0, 34, 73, 0.68);
}

.debug-item.error {
  border-color: rgba(255, 97, 97, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 97, 97, 0.08);
}

.debug-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 10px;
  color: rgba(142, 197, 255, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.debug-badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.16);
  color: #00d4ff;
  font-weight: 800;
}

.debug-badge.error {
  background: rgba(255, 97, 97, 0.18);
  color: #ff8f8f;
}

.debug-message {
  margin-bottom: 8px;
  color: #d7eeff;
  font-size: 12px;
  font-weight: 700;
}

.debug-payload {
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  background: rgba(0, 10, 24, 0.78);
  color: #58b5ff;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.debug-item.tech .debug-payload {
  font-size: 10px;
  max-height: 160px;
}

.grille-bloc {
  margin-bottom: var(--espace-l);
}

.grille-bloc-titre {
  margin-bottom: 8px;
  color: var(--texte-tertiaire);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.champ-carte {
  margin-bottom: var(--espace-m);
  padding: 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  background: var(--blanc);
}

.champ-carte.en-attente {
  border-style: dashed;
  background: var(--pastel-teal-tres-clair);
}

.champ-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--texte-secondaire);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-statut {
  padding: 2px 7px;
  border-radius: var(--rayon-capsule);
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.badge-statut.empty {
  background: var(--gris-clair);
  color: var(--texte-tertiaire);
}

.badge-statut.proposed {
  background: var(--pastel-teal-clair);
  color: var(--marque-principale);
}

.badge-statut.confirmed {
  background: var(--pastel-vert);
  color: var(--vert);
}

.badge-statut.needs_attention {
  background: var(--pastel-orange);
  color: var(--orange);
}

.champ-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--texte-principal);
}

.champ-empty {
  color: var(--texte-tertiaire);
  font-size: 12px;
  font-style: italic;
}

.champ-justification {
  margin-top: 4px;
  color: var(--texte-secondaire);
  font-size: 11px;
}

.champ-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bordure-forte);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--texte-secondaire);
}

.btn-icone:hover:not(:disabled) {
  color: var(--marque-principale);
  border-color: var(--marque-principale);
}

.obligation-note {
  margin-top: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon-tag);
  background: var(--pastel-rose);
  color: var(--alerte);
  font-size: 11px;
  font-weight: 600;
}

.grille-pied {
  padding: var(--espace-l) var(--espace-xl);
  border-top: 1px solid var(--bordure);
  background: var(--blanc-casse);
}

.note {
  margin-top: 8px;
  color: var(--texte-tertiaire);
  font-size: 10.5px;
  text-align: center;
}

@media (max-width: 900px) {
  .config-bandeau,
  .entete,
  .layout,
  .onglets {
    padding-left: var(--espace-l);
    padding-right: var(--espace-l);
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .layout-debug {
    grid-template-columns: 1fr;
  }

  .entete-inner {
    flex-direction: column;
    align-items: start;
  }

  .entete-side {
    text-align: left;
    align-items: flex-start;
  }

  .grille-corps {
    max-height: none;
  }
}