/* ============================================================
   CSTMD Rapports — feuille de style principale
   Palette : navy (sérieux/réglementaire) + amber (alerte/ADR)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Palette active (Marine par défaut) */
  --color-navy: #15233D;
  --color-navy-light: #1F3258;
  --color-amber: #E8870E;
  --color-amber-dark: #C76F08;
  --color-on-amber: #ffffff;   /* texte sur fond accent */
  --color-on-navy: #ffffff;    /* texte sur fond topbar */
  /* UI */
  --color-bg: #F4F5F7;
  --color-card: #FFFFFF;
  --color-text: #1F2937;
  --color-heading: #15233D;
  --color-text-muted: #6B7280;
  --color-border: #E2E4E9;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE9;
  --color-success: #1E7B34;
  --color-success-bg: #EAF6EC;
  --radius: 8px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Palettes définies après le thème sombre (en bas de fichier) */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  margin-top: 0;
}

/* ---------- Pages d'authentification (login, création de compte) ---------- */

.page-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 45%, var(--color-bg) 45%);
}

.auth-card {
  background: var(--color-card);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(21, 35, 61, 0.18);
  width: 100%;
  max-width: 380px;
}

.auth-subtitle {
  color: var(--color-text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

form input, form select, form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-card);
  color: var(--color-text);
}

form textarea { resize: vertical; }

form input:focus, form select:focus, form textarea:focus {
  outline: 2px solid var(--color-amber);
  outline-offset: 1px;
  border-color: var(--color-amber);
}

button {
  margin-top: 1.5rem;
  width: 100%;
  background: var(--color-amber);
  color: var(--color-on-amber);
  border: none;
  padding: 0.7rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover { background: var(--color-amber-dark); }

.message-erreur, .message-info {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.message-erreur { background: var(--color-error-bg); color: var(--color-error); }
.message-info { background: var(--color-success-bg); color: var(--color-success); }
.message-succes { background: var(--color-success-bg); color: var(--color-success); padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 0.5rem; }

/* Badges de statut colorés */
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.statut-vert { background: #d1fae5; color: #065f46; }
.statut-orange { background: #fef3c7; color: #92400e; }
.statut-rouge { background: #fee2e2; color: #991b1b; }
[data-theme="sombre"] .statut-vert { background: #064e3b; color: #6ee7b7; }
[data-theme="sombre"] .statut-orange { background: #451a03; color: #fbbf24; }
[data-theme="sombre"] .statut-rouge { background: #450a0a; color: #fca5a5; }

.btn-secondaire.active { background: var(--color-amber); color: var(--color-on-amber); }

/* ---------- Pages internes (tableau de bord, etc.) ---------- */

.topbar {
  background: var(--color-navy);
  color: var(--color-on-navy);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.6rem 1.5rem;
  gap: 1rem;
}

.topbar-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}

.topbar-title:hover {
  opacity: 0.85;
}

.topbar-icones {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.topbar-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-amber);
  transition: background 0.15s;
}

.topbar-icone svg {
  width: 20px;
  height: 20px;
}

.topbar-icone:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Menu profil ──────────────────────────────────────────── */
.profil-menu {
  position: relative;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
}

.profil-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--color-on-navy);
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1;
  margin: 0;
  transition: background 0.15s;
}

.profil-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.profil-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-amber);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.profil-nom {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profil-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.profil-trigger[aria-expanded="true"] .profil-chevron {
  transform: rotate(180deg);
}

.profil-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 0.35rem 0;
  z-index: 200;
}

.profil-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}

.profil-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.profil-item:hover {
  background: var(--color-bg);
}

.profil-item--danger {
  color: #c0392b;
}

.profil-item--danger svg {
  opacity: 1;
}

.profil-item--toggle {
  justify-content: flex-start;
}

.profil-toggle-track {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  background: var(--color-border);
  border-radius: 10px;
  padding: 2px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.profil-item--toggle.is-on .profil-toggle-track {
  background: var(--color-navy);
}

.profil-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.profil-item--toggle.is-on .profil-toggle-thumb {
  transform: translateX(16px);
}

.profil-separator {
  height: 1px;
  background: var(--color-border);
  margin: 0.35rem 0;
}

.content {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ---------- En-tête de section + bouton d'action ---------- */

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-primary {
  background: var(--color-amber);
  color: var(--color-on-amber);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.btn-primary:hover { background: var(--color-amber-dark); }

.lien-retour {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.lien-retour:hover { color: var(--color-navy); }

/* ---------- Grille d'entreprises ---------- */

.entreprise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.entreprise-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.entreprise-card:hover {
  box-shadow: 0 6px 16px rgba(21, 35, 61, 0.12);
  transform: translateY(-2px);
}

.entreprise-card h2 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.entreprise-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.entreprise-entete h2 {
  margin-bottom: 0;
}

.logo-vignette {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.logo-fiche {
  max-height: 70px;
  max-width: 180px;
  object-fit: contain;
  border-radius: 4px;
}

.fiche-entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.entreprise-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Formulaires multi-colonnes ---------- */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row input { width: 100%; }

/* ---------- Grille des sections d'un dossier entreprise ---------- */

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: block;
}

.section-card:hover {
  box-shadow: 0 6px 16px rgba(21, 35, 61, 0.12);
  transform: translateY(-2px);
}

.section-card h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.section-card p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.section-card-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.section-card-disabled:hover {
  box-shadow: none;
  transform: none;
}

/* ---------- Tableaux de données ---------- */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.table-donnees {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card);
}

.table-donnees th, .table-donnees td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  white-space: nowrap;
}

.table-donnees th {
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-donnees tbody tr:last-child td { border-bottom: none; }
.table-donnees tbody tr:hover { background: var(--color-bg); }

.cellule-tronquee {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-classe {
  background: var(--color-navy);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.lien-supprimer {
  color: var(--color-error);
  text-decoration: none;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.15s;
}

.lien-supprimer::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--color-error);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.lien-supprimer:hover {
  background: rgba(211, 47, 47, 0.1);
}

/* ---------- Rond de statut (actions) ---------- */

.statut-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.statut-badge::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.statut-en_attente::before { background-color: #F59E0B; }
.statut-en_cours::before   { background-color: #3B82F6; }
.statut-realisee::before   { background-color: #22C55E; }

/* ---------- Zone de gestion sensible (archiver / supprimer) ---------- */

.card-danger {
  border-color: #F0D5D2;
  background: #FFFBFA;
  margin-top: 2.5rem;
}

.card-danger h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.card-danger p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.btn-danger {
  display: inline-block;
  background: var(--color-error);
  color: #fff;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.15s ease;
}

.btn-danger:hover { background: #931f19; }

.lien-secondaire {
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.lien-secondaire a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.lien-secondaire a:hover { color: var(--color-navy); }

.choix-radio {
  display: block;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0.8rem 0;
  cursor: pointer;
}

.choix-radio input {
  width: auto;
  margin-right: 0.5rem;
}

.lien-secondaire-inline {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-amber-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.lien-secondaire-inline:hover { text-decoration: underline; }

code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
  color: var(--color-navy);
}

/* ---------- KPI et graphiques du tableau de bord ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-amber);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.15s, transform 0.12s;
}

a.kpi-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.kpi-number {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1;
}

.kpi-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}

.graphiques-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.conteneur-graphique {
  position: relative;
  height: 240px;
  margin-top: 0.5rem;
}

.form-tri {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.form-tri label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-tri select {
  width: auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.form-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.form-filtre select,
.form-filtre input[type="text"] {
  width: auto;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.form-filtre input[type="text"] {
  min-width: 220px;
}

.btn-secondaire {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondaire:hover {
  background: var(--color-navy);
  color: #fff;
}

.apercu-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.apercu-logo img {
  max-height: 60px;
  max-width: 140px;
  object-fit: contain;
}

.texte-aide {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* ============================================================
   Thème sombre — n'override que les variables de couleur.
   Comme tous les composants utilisent var(--color-xxx), ils
   s'adaptent automatiquement, sauf 2-3 exceptions ci-dessous.
   ============================================================ */

[data-theme="sombre"] {
  --color-navy: #2A4373;
  --color-navy-light: #35508C;
  --color-amber: #F2A93C;
  --color-amber-dark: #D98F1F;
  --color-bg: #111827;
  --color-card: #1E2A3B;
  --color-text: #F1F5F9;
  --color-heading: #F2A93C;
  --color-text-muted: #94A3B8;
  --color-border: #334155;
  --color-error: #FCA5A5;
  --color-error-bg: #3B1E1E;
  --color-success: #6EE7A0;
  --color-success-bg: #14301F;
}

[data-theme="sombre"] .card-danger {
  border-color: #4A2A2A;
  background: #241616;
}

[data-theme="sombre"] .entreprise-card:hover,
[data-theme="sombre"] .section-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* En mode sombre, les headings utilisent la couleur d'accent de la palette */
[data-theme="sombre"] h1,
[data-theme="sombre"] h2,
[data-theme="sombre"] h3 {
  color: var(--color-heading);
}

/* Inputs et selects en mode sombre */
[data-theme="sombre"] form input,
[data-theme="sombre"] form select,
[data-theme="sombre"] form textarea {
  background: #0F172A;
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ── Palettes — définies APRÈS le thème sombre pour avoir priorité ── */

/* ── Palettes thème clair ─────────────────────────────────── */
[data-palette="ardoise"] {
  --color-navy: #2B4162; --color-navy-light: #3A5580;
  --color-amber: #0A8754; --color-amber-dark: #076B42;
  --color-heading: #2B4162; --color-on-amber: #fff; --color-on-navy: #fff;
}
[data-palette="foret"] {
  --color-navy: #1A3A2A; --color-navy-light: #254D39;
  --color-amber: #5B9B35; --color-amber-dark: #477A27;
  --color-heading: #1A3A2A; --color-on-amber: #fff; --color-on-navy: #fff;
}
[data-palette="bordeaux"] {
  --color-navy: #4A1626; --color-navy-light: #6B2035;
  --color-amber: #C9963A; --color-amber-dark: #A87A2E;
  --color-heading: #4A1626; --color-on-amber: #fff; --color-on-navy: #fff;
}
[data-palette="ocean"] {
  --color-navy: #0D3B53; --color-navy-light: #155272;
  --color-amber: #0EA5D0; --color-amber-dark: #0B84A8;
  --color-heading: #0D3B53; --color-on-amber: #fff; --color-on-navy: #fff;
}
[data-palette="nuit"] {
  --color-navy: #1A1A2E; --color-navy-light: #2D2D54;
  --color-amber: #7C3AED; --color-amber-dark: #6328C9;
  --color-heading: #1A1A2E; --color-on-amber: #fff; --color-on-navy: #fff;
}

/* ── Palettes thème sombre (accents lumineux) ─────────────── */
[data-theme="sombre"][data-palette="ardoise"] {
  --color-navy: #2B4162; --color-navy-light: #3A5580;
  --color-amber: #2DD4BF; --color-amber-dark: #0FB8A2;
  --color-heading: #2DD4BF; --color-on-amber: #111827; --color-on-navy: #fff;
}
[data-theme="sombre"][data-palette="foret"] {
  --color-navy: #1A3A2A; --color-navy-light: #254D39;
  --color-amber: #86EFAC; --color-amber-dark: #4ADE80;
  --color-heading: #86EFAC; --color-on-amber: #111827; --color-on-navy: #fff;
}
[data-theme="sombre"][data-palette="bordeaux"] {
  --color-navy: #4A1626; --color-navy-light: #6B2035;
  --color-amber: #FCD34D; --color-amber-dark: #FBBF24;
  --color-heading: #FCD34D; --color-on-amber: #111827; --color-on-navy: #fff;
}
[data-theme="sombre"][data-palette="ocean"] {
  --color-navy: #0D3B53; --color-navy-light: #155272;
  --color-amber: #38BDF8; --color-amber-dark: #0EA5E8;
  --color-heading: #38BDF8; --color-on-amber: #111827; --color-on-navy: #fff;
}
[data-theme="sombre"][data-palette="nuit"] {
  --color-navy: #1A1A2E; --color-navy-light: #2D2D54;
  --color-amber: #A78BFA; --color-amber-dark: #8B5CF6;
  --color-heading: #A78BFA; --color-on-amber: #fff; --color-on-navy: #fff;
}