/* ============================================================
   COMPONENTS SYSTEM v5.0 — JSL Distribution
   - Composants publics (cards/KPI/tables/nav/footer/reputation/about/services/support)
   - Pas de tokens globaux (voir theme_system.css)
   ============================================================ */

/* -----------------------------
   Typographie fluide (public)
   ----------------------------- */
main.page-content .login-card h1 { font-size: var(--ui-h1); line-height: 1.15; }
main.page-content .login-card h2 { font-size: var(--ui-h2); line-height: 1.25; }
main.page-content .login-card h3 { font-size: var(--ui-h3); line-height: 1.25; }

/* Distance reading: strengthen key titles on very large screens */
@media (min-width: 1920px) {
  main.page-content .section-title.modern,
  main.page-content .depot-title.modern,
  main.page-content .employe-title.modern { letter-spacing: 0.3px; }
}

/* -----------------------------
   Accueil — image hero
   ----------------------------- */
.home-hero__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
  margin: 0 0 14px 0;
}
@media (min-width: 1024px) {
  .home-hero__image { max-height: 70vh; }
}

/* -----------------------------
   Top nav (legacy) — adouci
   ----------------------------- */
.top-nav .top-nav-iconLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  flex: none;
}
.top-nav .top-nav-icon { width: 1.375rem; height: 1.375rem; display: block; object-fit: contain; }
.top-nav .top-nav-iconLink:hover {
  background: color-mix(in srgb, var(--primary-500) 10%, var(--card));
  border-color: color-mix(in srgb, var(--primary-500) 22%, var(--border-strong));
}
.top-nav a {
  color: color-mix(in srgb, var(--fg) 88%, var(--primary-600));
  font-weight: 700;
  border: 1px solid transparent;
}
.top-nav a:hover {
  background: color-mix(in srgb, var(--primary-500) 10%, var(--card));
  box-shadow: none;
  border-color: color-mix(in srgb, var(--primary-500) 22%, var(--border-strong));
  transform: none;
}
.top-nav-logout button { background: var(--primary-500); box-shadow: none; }
.top-nav-logout button:hover { background: var(--primary-600); box-shadow: none; }

/* -----------------------------
   Login cards (hiérarchie premium)
   ----------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  border-radius: var(--premium-radius-16);
  padding: var(--ui-card-pad-y) var(--ui-card-pad-x);
  box-sizing: border-box;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  border-radius: var(--premium-radius-16);
  width: min(100%, var(--ui-content-max));
  padding: var(--ui-card-pad-y) var(--ui-card-pad-x);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.login-card + .login-card { margin-top: 0; }

/* Quand la page est structurée par .page-container, on aligne et on laisse le "gap" gérer l'espacement. */
.page-container .login-card {
  width: 100% !important;
  margin: 0 !important;
}
.page-container .login-card + .login-card { margin-top: 0; }
.login-card h1, .login-card h2 { letter-spacing: .2px; }
.login-card h1 { color: var(--fg); }
.login-card h2 { color: color-mix(in srgb, var(--fg) 75%, var(--muted)); }
.login-card p { color: color-mix(in srgb, var(--fg) 78%, var(--muted)); }
.login-card img {
  display: block;
  border-radius: var(--premium-radius-12);
  box-shadow: var(--premium-shadow-1);
}

/* About: centre les cartes “valeurs” (compat legacy) */
.page-container .about-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  min-width: 0;
}

/* Hero gradient identity box (blue/gray/white) */
.page-container .hero-gradient-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}
.page-container .hero-gradient-text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-600) 92%, #ffffff) 0%,
    color-mix(in srgb, #94a3b8 55%, #ffffff) 52%,
    #ffffff 100%
  );
  color: #0f172a;
  font-weight: 900;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow);
  max-width: 100%;
  min-width: 0;
}

/* About hero: augmenter légèrement la hauteur média pour mieux voir la photo */
.page-container .about-hero__media {
  min-height: clamp(26rem, 42vw, 38rem);
}

/* Services: neutralise le layout legacy (styles.css) pour uniformité v8 */
.page-container .services-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  min-width: 0;
  font-family: inherit;
}

.page-container .services-hero,
.page-container .services-section {
  /* adopte la même “card” que les autres pages (login-card) */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: var(--card) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--premium-radius-16) !important;
}

.page-container .services-section + .services-section {
  margin-top: 0 !important;
}

.page-container .services-section__title {
  text-align: center;
  letter-spacing: 0.2px;
}

.page-container .services-hero__content {
  background: transparent !important;
}

.page-container .services-grid {
  /* garde le parent maître des colonnes, sans largeur fixe enfants */
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--grid-gap) !important;
  align-items: stretch !important;
}
@media (min-width: 48rem) { /* 768px */
  .page-container .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 64rem) { /* 1024px */
  .page-container .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 80rem) { /* 1280px */
  .page-container .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.page-container .service-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--border-strong) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--premium-radius-16) !important;
}

.about-cards.about-cards--single {
  grid-template-columns: 1fr;
}
.about-card__head {
  justify-content: center;
  text-align: center;
}
.about-card__title,
.about-card__desc {
  text-align: center;
}

/* Executive card (Direction Générale) — anti-débordement + occupation totale */
.about-section--executive .executive-card {
  display: grid;
  grid-template-columns: minmax(12.5rem, 17.5rem) 1fr; /* 200–280px */
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center; /* photo + texte centrés verticalement */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.about-section--executive .executive-card__media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.about-section--executive .executive-card__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0.75rem;
}

.about-section--executive .executive-card__content {
  width: 100%;
  min-width: 0; /* CRITIQUE : empêche le débordement */
  display: flex;
  flex-direction: column;
  justify-content: center; /* texte centré verticalement */
}

.about-section--executive .executive-card__headline {
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.about-section--executive .executive-card__desc {
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
}

@media (max-width: 56.25rem) { /* 900px */
  .about-section--executive .executive-card {
    grid-template-columns: 1fr;
  }

  .about-section--executive .executive-card__media {
    max-width: min(20rem, 100%);
    margin-inline: auto;
  }
}

/* Homepage — Notre méthodologie
   La mise en page “sans trous” des `.summary-box` est gouvernée par `layout_system.css`
   (flex-wrap + bases 100/50/33.333). */

/* Grands écrans — “Nos piliers stratégiques” : 4 cartes = 4 colonnes (sans espace mort) */
@media (min-width: 80rem) { /* 1280px */
  main.page-content section.login-card[aria-label="Nos piliers stratégiques"] .summary-box > * {
    flex: 1 0 calc((100% - (3 * var(--grid-gap))) / 4) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Très grands écrans — “Notre méthodologie” : 5 étapes = 5 colonnes (sans 4+1) */
@media (min-width: 96rem) { /* 1536px */
  main.page-content section.login-card[aria-label="Notre méthodologie"] .summary-box > * {
    flex: 1 0 calc((100% - (4 * var(--grid-gap))) / 5) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Section titles: less flashy */
.section-title.modern,
.section-title,
.depot-title,
.employe-title { box-shadow: var(--shadow); }

/* -----------------------------
   Tables (visuel)
   ----------------------------- */
.table-container {
  border: 1px solid var(--border-strong);
  border-radius: var(--premium-radius-16);
  box-shadow: var(--shadow);
}
.styled-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--ui-table-font);
}
.styled-table thead { background: color-mix(in srgb, var(--card) 92%, var(--primary-500)); }
.styled-table tbody tr:hover { background: color-mix(in srgb, var(--primary-500) 8%, var(--card)); }
.styled-table th,
.styled-table td { padding: var(--ui-table-cell-pad); }

/* -----------------------------
   Charts (bar + donut) — CSP-friendly (no inline style)
   ----------------------------- */
.enterprise-chart__barsSvg {
  display: block;
  width: 100%;
  height: 12px;
}
.enterprise-chart__barRect--primary { fill: var(--primary-500); }
.enterprise-chart__barRect--secondary { fill: color-mix(in srgb, var(--primary-500) 40%, var(--muted)); }

.enterprise-donut__svg {
  display: block;
  max-width: 20rem; /* 320px */
  margin-inline: auto;
}
.enterprise-donut__track {
  fill: none;
  stroke: var(--chart-pie-gray-light);
  stroke-width: 12;
  stroke-opacity: 0.85;
}
.enterprise-donut__slice {
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
  stroke: var(--enterprise-donut-color, var(--chart-pie-blue-primary));
}
.enterprise-donut__swatch { flex: none; }
.enterprise-donut__swatchRect {
  fill: var(--enterprise-donut-color, var(--chart-pie-blue-primary));
}

/* Strict tones for circular charts (no inline stroke/fill allowed) */
.enterprise-donut__tone--primary { --enterprise-donut-color: var(--chart-pie-blue-primary); }
.enterprise-donut__tone--secondary { --enterprise-donut-color: var(--chart-pie-blue-secondary); }
.enterprise-donut__tone--grayLight { --enterprise-donut-color: var(--chart-pie-gray-light); }
.enterprise-donut__tone--gray { --enterprise-donut-color: var(--chart-pie-gray-neutral); }
.enterprise-donut__tone--white { --enterprise-donut-color: var(--chart-pie-white); }

/* -----------------------------
   Bar chart vertical — style "plotly_white" (reproduit Streamlit/Plotly Express).
   Contrat: mêmes donut_slices (label/pct/value_display/tone).
   Géométrie SVG calculée côté Python (templatetag chart_geometry.to_bar_geometry).
   ----------------------------- */
.enterprise-bar {
  padding: 18px 20px 16px;
  background: #ffffff;
}
.enterprise-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.enterprise-bar__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0d6efd; /* Plotly Express title color */
  letter-spacing: 0.01em;
}
.enterprise-bar__badge { text-align: right; line-height: 1.15; }
.enterprise-bar__badgeTop {
  font-size: 22px;
  font-weight: 700;
  color: #0d6efd;
}
.enterprise-bar__badgeBottom {
  font-size: 11px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.enterprise-bar__svgWrap {
  /* Permet un scroll horizontal quand le SVG est plus large que le conteneur
     (typique avec 52 semaines). Sur écran large, le SVG remplit naturellement. */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar visible et stylée — sur macOS Safari elles sont auto-hide par défaut,
     ce qui rend la scroll invisible si l'utilisateur ne touche pas la zone. */
  scrollbar-width: thin;
  scrollbar-color: #6c757d #e9ecef;
  /* Indique la possibilité de scroll au curseur (curseur grab). */
  cursor: grab;
}
.enterprise-bar__svgWrap:active { cursor: grabbing; }
/* WebKit / Chromium / Safari — scrollbar bien visible (~10px). */
.enterprise-bar__svgWrap::-webkit-scrollbar {
  height: 12px;
  background: #f1f3f5;
}
.enterprise-bar__svgWrap::-webkit-scrollbar-thumb {
  background: #adb5bd;
  border-radius: 6px;
  border: 2px solid #f1f3f5;
}
.enterprise-bar__svgWrap::-webkit-scrollbar-thumb:hover { background: #6c757d; }

/* min-width = largeur naturelle du viewBox SVG, pour éviter l'écrasement vertical
   (le navigateur conserve l'aspect ratio via preserveAspectRatio="xMidYMid meet"). */
.enterprise-bar__svgWrap--xs  .enterprise-bar__svg { min-width: 600px; }
.enterprise-bar__svgWrap--sm  .enterprise-bar__svg { min-width: 800px; }
.enterprise-bar__svgWrap--md  .enterprise-bar__svg { min-width: 1000px; }
.enterprise-bar__svgWrap--lg  .enterprise-bar__svg { min-width: 1300px; }
.enterprise-bar__svgWrap--xl  .enterprise-bar__svg { min-width: 1600px; }
.enterprise-bar__svgWrap--xxl .enterprise-bar__svg { min-width: 1900px; }

/* Hint visuel "Faites défiler" — n'apparaît que pour les vues larges (lg/xl/xxl). */
.enterprise-bar__scrollHint {
  display: none;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  margin: 4px 0 0;
  padding: 4px 8px;
  background: #fff3cd;
  border-radius: 4px;
  border: 1px solid #ffeaa7;
}
.enterprise-bar__svgWrap--lg + .enterprise-bar__scrollHint,
.enterprise-bar__svgWrap--xl + .enterprise-bar__scrollHint,
.enterprise-bar__svgWrap--xxl + .enterprise-bar__scrollHint {
  display: block;
}
.enterprise-bar__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  min-height: 360px;
  background: #ffffff;
  font-family: inherit;
}
.enterprise-bar__grid {
  stroke: #e9ecef;
  stroke-width: 1;
  stroke-dasharray: 0; /* plotly_white = lignes pleines très claires */
}
.enterprise-bar__axis {
  stroke: #adb5bd;
  stroke-width: 1;
}
.enterprise-bar__yLabel,
.enterprise-bar__xLabel {
  font-size: 13px;
  fill: #495057;
  font-family: inherit;
}
.enterprise-bar__barValue {
  font-size: 13px;
  fill: #212529;
  font-weight: 700;
  font-family: inherit;
}
.enterprise-bar__rect {
  transition: opacity 0.15s ease;
}
.enterprise-bar__rect:hover { opacity: 0.85; }

/* Trace de tendance — polyline qui relie tous les dots (couleur primary, semi-transparente). */
.enterprise-bar__trend {
  stroke: #1f77b4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  fill: none;
}

/* Lollipop chart : stem (ligne fine verticale) + dot (cercle au sommet) */
.enterprise-bar__stem {
  stroke: var(--chart-pie-gray-light, #ced4da);
  stroke-width: 1.5;
  opacity: 0.6;
}
.enterprise-bar__dot {
  fill: #1f77b4;
  stroke: #ffffff;
  stroke-width: 1.5;
  transition: opacity 0.15s ease;
  cursor: pointer;
  outline: none;
}
.enterprise-bar__dot:hover {
  opacity: 0.75;
}
.enterprise-bar__dot:focus-visible {
  stroke: #ffc107;
  stroke-width: 3;
}
.enterprise-bar__dot.is-selected {
  stroke: #0d6efd;
  stroke-width: 3;
}

/* Panneau de détails (mis à jour par enterprise_bar_interactive.js) */
.enterprise-bar__details {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-left: 4px solid #1f77b4;
  border-radius: 6px;
  font-size: 13px;
  color: #495057;
}
.enterprise-bar__detailsDot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #ced4da;
}
.enterprise-bar__detailsBody {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.enterprise-bar__detailsHint {
  color: #6c757d;
  font-style: italic;
}
.enterprise-bar__detailsContent {
  display: none;
  align-items: baseline;
  gap: 8px;
}
.enterprise-bar__details.is-visible .enterprise-bar__detailsHint { display: none; }
.enterprise-bar__details.is-visible .enterprise-bar__detailsContent { display: inline-flex; }
.enterprise-bar__detailsLabel {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
}
.enterprise-bar__detailsPct {
  font-size: 13px;
  font-weight: 600;
  color: #0d6efd;
}
.enterprise-bar__detailsValue {
  font-size: 13px;
  color: #495057;
}
.enterprise-bar__detailsSep {
  color: #adb5bd;
}
.enterprise-bar__detailsPeriodWrap {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.enterprise-bar__detailsPeriod {
  font-size: 13px;
  font-weight: 500;
  color: #0d6efd;
  font-style: italic;
}
.enterprise-bar__detailsLink {
  margin-left: auto;
  padding: 4px 12px;
  background: #0d6efd;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.enterprise-bar__detailsLink:hover { background: #084298; color: #fff; }
.enterprise-bar__detailsLink[hidden] { display: none; }
/* Stems colorés selon tone (utilise la même variable que les fills) */
.enterprise-bar__tone-stroke--primary   { stroke: #1f77b4; }
.enterprise-bar__tone-stroke--secondary { stroke: #ff7f0e; }
.enterprise-bar__tone-stroke--gray      { stroke: #6c757d; }
.enterprise-bar__tone-stroke--grayLight { stroke: #adb5bd; }
.enterprise-bar__tone-stroke--white     { stroke: #ced4da; }

/* Légende sous le graphe */
.enterprise-bar__legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.enterprise-bar__legendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #495057;
}
.enterprise-bar__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.enterprise-bar__legendLabel { font-weight: 500; }
.enterprise-bar__legendValue { color: #6c757d; }
.enterprise-bar__legendValue strong { color: #212529; margin-right: 2px; }

/* Tones — palette Plotly Express par défaut (#1f77b4 + variantes) */
.enterprise-bar__tone--primary   { fill: #1f77b4; background-color: #1f77b4; }
.enterprise-bar__tone--secondary { fill: #ff7f0e; background-color: #ff7f0e; }
.enterprise-bar__tone--gray      { fill: #6c757d; background-color: #6c757d; }
.enterprise-bar__tone--grayLight { fill: #adb5bd; background-color: #adb5bd; }
.enterprise-bar__tone--white     { fill: #ffffff; background-color: #ffffff; stroke: #ced4da; stroke-width: 1; border: 1px solid #ced4da; }

/* -----------------------------
   Bannière "Filtres actifs" — confirme à l'utilisateur que les graphes sont filtrés.
   ----------------------------- */
.active-filters-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 0 14px;
  background: #e7f1ff;
  border: 1px solid #b6d4fe;
  border-left: 4px solid #0d6efd;
  border-radius: 6px;
  font-size: 13px;
  color: #084298;
}
.active-filters-banner__label {
  font-weight: 600;
  margin-right: 4px;
}
.active-filters-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #ffffff;
  border: 1px solid #b6d4fe;
  border-radius: 999px;
  font-size: 12px;
}
.active-filters-banner__badgeKey {
  font-weight: 600;
  color: #084298;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.active-filters-banner__badgeValue {
  color: #212529;
  font-weight: 500;
}
.active-filters-banner__clear {
  margin-left: auto;
  font-size: 12px;
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
}
.active-filters-banner__clear:hover { color: #084298; }

/* Quick period presets — boutons d'accès rapide 7d/30d/90d/YTD */
.quick-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}
.quick-presets__label {
  font-size: 12px;
  color: #495057;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.quick-presets__btn {
  padding: 5px 12px;
  background: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 999px;
  font-size: 12px;
  color: #495057;
  text-decoration: none;
  transition: all 0.15s ease;
}
.quick-presets__btn:hover {
  background: #e7f1ff;
  border-color: #0d6efd;
  color: #0d6efd;
}
.quick-presets__btn.is-active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
  font-weight: 600;
}
.quick-presets__btn--reset {
  margin-left: auto;
  background: transparent;
  border-style: dashed;
}

/* SLA — bannière statut global + table + badges */
.sla-overall {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin: 12px 0 18px;
  border-radius: 8px;
  border-left: 6px solid;
}
.sla-overall--ok { background: #e6f5e8; border-left-color: #2b8a3e; }
.sla-overall--warning { background: #fff8e1; border-left-color: #f59f00; }
.sla-overall--critical { background: #ffe3e3; border-left-color: #c92a2a; }
.sla-overall__icon { font-size: 32px; line-height: 1; }
.sla-overall--ok .sla-overall__icon { color: #2b8a3e; }
.sla-overall--warning .sla-overall__icon { color: #f59f00; }
.sla-overall--critical .sla-overall__icon { color: #c92a2a; }
.sla-overall__body { display: flex; flex-direction: column; gap: 2px; }
.sla-overall__body strong { font-size: 16px; }
.sla-overall__sub { font-size: 12px; color: #6c757d; }

.sla-row--ok td { background-color: #f4faf6; }
.sla-row--warning td { background-color: #fffaeb; }
.sla-row--critical td { background-color: #fff5f5; }
.sla-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sla-badge--ok { background: #2b8a3e; color: #fff; }
.sla-badge--warning { background: #f59f00; color: #fff; }
.sla-badge--critical { background: #c92a2a; color: #fff; }

.sla-mini--ok .lp-kpi__value { color: #2b8a3e; }
.sla-mini--warning .lp-kpi__value { color: #f59f00; }
.sla-mini--critical .lp-kpi__value { color: #c92a2a; }

/* Risk badges */
.risk-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.risk-badge--faible { background: #d3f9d8; color: #2b8a3e; }
.risk-badge--modéré { background: #fff3bf; color: #5c3d00; }
.risk-badge--élevé { background: #ffd8a8; color: #b85e00; }
.risk-badge--critique { background: #ffc9c9; color: #c92a2a; }
.dash-risk--critique td { background-color: #fff5f5; }
.dash-risk--élevé td { background-color: #fff8e1; }

/* Dashboard sections */
.dash-section {
  margin: 22px 0;
}
.dash-section__title {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}
.dash-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dash-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #e7f1ff;
  border: 1px solid #b6d4fe;
  border-radius: 8px;
  color: #0d6efd;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.dash-link:hover {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

/* Dashboard annotations contextuelles */
.dash-annotation {
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
  border-left: 4px solid;
}
.dash-annotation--info { background: #e7f5ff; border-left-color: #1971c2; }
.dash-annotation--warning { background: #fff8e1; border-left-color: #f59f00; }
.dash-annotation--incident { background: #ffe3e3; border-left-color: #c92a2a; }
.dash-annotation--milestone { background: #e6f5e8; border-left-color: #2b8a3e; }
.dash-annotation__period {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  color: #6c757d;
  font-style: italic;
}
.dash-annotation__desc { margin: 6px 0 0; font-size: 13px; color: #495057; }

/* Forecast — lignes prévisionnelles */
.forecast-row { background: #f8f9fa; font-style: italic; }
.forecast-row td:nth-child(2) { color: #adb5bd; font-weight: 600; }

/* -----------------------------
   Saisonnalité : mise en forme de la ligne "Total mois" + note "année en cours".
   ----------------------------- */
.lp-table__totalRow td {
  background: #f1f3f5;
  font-weight: 700;
  border-top: 2px solid #adb5bd;
}

/* Table "Top écarts" — alignement num à droite + colonnes Écart colorées selon signe */
.list-premium .lp-table.lp-table--ecarts thead th:nth-child(n+5),
.list-premium .lp-table.lp-table--ecarts tbody td:nth-child(n+5) {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.list-premium .lp-table.lp-table--ecarts tbody td:nth-child(7),
.list-premium .lp-table.lp-table--ecarts tbody td:nth-child(8) {
  font-weight: 700;
}
/* Couleur des écarts : vert = sous-liquidation (client paie moins), rouge = sur-liquidation. */
.list-premium .lp-table tbody tr.lp-table__ecartRow--positive td:nth-child(7),
.list-premium .lp-table tbody tr.lp-table__ecartRow--positive td:nth-child(8) {
  color: #c92a2a;  /* rouge — sur-liquidation = défavorable client */
}
.list-premium .lp-table tbody tr.lp-table__ecartRow--negative td:nth-child(7),
.list-premium .lp-table tbody tr.lp-table__ecartRow--negative td:nth-child(8) {
  color: #2b8a3e;  /* vert — sous-liquidation = favorable client */
}

/* Ligne critique — semaine sous-performante (rouge alertant mais lisible) */
.list-premium .lp-table tbody tr.lp-table__criticalRow {
  background: #fff5f5;
}
.list-premium .lp-table tbody tr.lp-table__criticalRow:hover {
  background: #ffe3e3;
}
.list-premium .lp-table tbody tr.lp-table__criticalRow td {
  color: #c92a2a;
  font-weight: 600;
  border-left: 3px solid #fa5252;
}
.list-premium .lp-table tbody tr.lp-table__criticalRow td:first-child {
  position: relative;
  padding-left: 28px;
}
.list-premium .lp-table tbody tr.lp-table__criticalRow td:first-child::before {
  content: "!";
  position: absolute;
  left: 12px;
  color: #fa5252;
  font-size: 14px;
  font-weight: 900;
}
/* Override : ne pas garder le zébrage pair pour les lignes critiques (sinon couleur mélangée). */
.list-premium .lp-table tbody tr.lp-table__criticalRow:nth-child(even) {
  background: #fff5f5;
}
.lp-table-footnote {
  margin: 8px 14px 12px;
  padding: 8px 12px;
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  font-size: 12px;
  color: #664d03;
}
/* Table saisonnalité / hebdomadaire : alignement num à droite + tabular nums + nowrap.
   Spécificité augmentée pour battre `.list-premium .lp-table thead th { text-align: left }`
   défini dans list_premium.css. */
.list-premium .lp-table.lp-table--saisonnalite thead th:not(:first-child),
.list-premium .lp-table.lp-table--saisonnalite tbody td:not(:first-child) {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.list-premium .lp-table.lp-table--saisonnalite thead th:first-child,
.list-premium .lp-table.lp-table--saisonnalite tbody td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* Form layout invariants */
.form-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

/* Buttons invariants (opt-in via .btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn:hover {
  border-color: color-mix(in srgb, var(--primary-500) 28%, var(--border-strong));
  box-shadow: var(--shadow);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--primary {
  background: var(--primary-500);
  border-color: color-mix(in srgb, var(--primary-500) 65%, var(--border-strong));
  color: #fff;
}
.btn--primary:hover { background: var(--primary-600); }
.btn--danger {
  background: var(--danger, #c3002f);
  border-color: color-mix(in srgb, var(--danger, #c3002f) 70%, var(--border-strong));
  color: #fff;
}
.btn--danger:hover { background: var(--danger-600, #9f0026); }

/* Cards/KPI: border + shadow coherence */
.summary-card,
.summary-box,
.depot-summary,
.sidebar-box { border: 1px solid var(--border-strong); box-shadow: var(--shadow); }

@media (max-width: 640px) {
  .login-card,
  .table-container,
  .summary-card,
  .depot-summary,
  .sidebar-box { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
}

/* -----------------------------
   Titles decorator (ex titles_overrides.css)
   ----------------------------- */
main.page-content h1,
main.page-content h2 { text-align: center; }

@supports ((-webkit-background-clip:text) or (background-clip: text)) {
  main.page-content h1,
  main.page-content h2 {
    background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 55%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  @supports ((-webkit-background-clip:text) or (background-clip: text)) {
    main.page-content h1,
    main.page-content h2 {
      background: linear-gradient(90deg, #f8fafc 0%, #60a5fa 55%, #bfdbfe 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }
}

/* -----------------------------
   Link decorators (ex link_decorators.css)
   ----------------------------- */
main.page-content a:not(.services-cta-btn):not(.whatsapp-btn):not(.enterprise-boxlink),
footer.login-footer a:not(.services-cta-btn):not(.whatsapp-btn):not(.enterprise-boxlink) {
  font-weight: 800;
  color: color-mix(in srgb, var(--fg) 88%, var(--primary-600));
  text-decoration: none;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-500) 35%, var(--border-strong)),
    color-mix(in srgb, var(--primary-500) 55%, transparent),
    color-mix(in srgb, var(--primary-500) 35%, var(--border-strong))
  );
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding: 0 2px 2px 2px;
  border-radius: 8px;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
main.page-content a:not(.services-cta-btn):not(.whatsapp-btn):not(.enterprise-boxlink):hover,
footer.login-footer a:not(.services-cta-btn):not(.whatsapp-btn):not(.enterprise-boxlink):hover {
  color: var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-500) 10%, transparent);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08);
  transform: translateY(-1px);
}

/* Footer override (ex footer_overrides.css) */
footer.login-footer { margin-top: 0; border-top: 1px solid var(--border-strong); }
footer.login-footer a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* -----------------------------
   KPI full width correction (ex kpi_full_width.css)
   ----------------------------- */
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive,
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive {
  width: 100% !important;
  max-width: 100%;
  display: grid !important;
  gap: 12px;
  overflow: visible;
}
/* Rangée compteurs : 4 colonnes égales */
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-row--4 {
  grid-template-columns: repeat(4, 1fr) !important;
}
/* Rangée montants : 3 colonnes égales */
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-row--3 {
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: 0;
}
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-card,
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive .kpi-card {
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
  flex: none !important;
}
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-value,
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-amount,
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-label,
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive .kpi-value,
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive .kpi-amount,
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive .kpi-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}
section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive .kpi-value {
  font-size: clamp(16px, 1.6vw, 28px);
}
@media (max-width: 900px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive,
  section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive,
  section.login-card[aria-label="Indicateurs KPI"] .kpi-strip.kpi-responsive {
    grid-template-columns: 1fr !important;
  }
}

/* Dark mode: piloté par les tokens (theme_system.css) + prefers-color-scheme. */

/* ------------------------------------------------------------
   NAVIGATION PREMIUM XXXL (ex nav_xxxl.css, tokens déplacés)
   ------------------------------------------------------------ */
.navxxxl {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: linear-gradient(180deg, rgba(10, 61, 98, 0.98), rgba(21, 67, 96, 0.96));
  border-bottom: 1px solid rgba(244, 246, 247, 0.14);
  box-shadow: var(--navxxxl-shadow);
  will-change: transform;
}
.navxxxl__inner {
  max-width: var(--navxxxl-max);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 16px;
}
.navxxxl.navxxxl--scrolled .navxxxl__inner { padding-top: 10px; padding-bottom: 10px; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navxxxl.navxxxl--scrolled {
    background: linear-gradient(180deg, rgba(10, 61, 98, 0.86), rgba(21, 67, 96, 0.84));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.navxxxl__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navxxxl-white);
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: var(--navxxxl-radius);
  border: 1px solid transparent;
}
.navxxxl__brand:focus-visible { outline: 3px solid var(--navxxxl-white); outline-offset: 2px; }
.navxxxl__brand:hover { border-color: rgba(244, 246, 247, 0.24); background: rgba(255, 255, 255, 0.06); }
.navxxxl__logo { width: 2.125rem; height: 2.125rem; display: block; object-fit: contain; }
.navxxxl__brandText { font-size: 15px; text-transform: uppercase; letter-spacing: 1.2px; }
.navxxxl__nav { display: inline-flex; justify-content: center; align-items: center; gap: 14px; }
.navxxxl__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  text-decoration: none;
  color: var(--navxxxl-white);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 750;
  font-size: 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-align: center;
}
.navxxxl__link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  border-radius: 3px;
}
.navxxxl__link:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(244, 246, 247, 0.20); }
.navxxxl__link:hover::after { transform: scaleX(1); }
.navxxxl__link:focus-visible { outline: 3px solid var(--navxxxl-white); outline-offset: 2px; }
.navxxxl__cta { display: flex; justify-content: flex-end; }
.navxxxl__ctaForm { margin: 0; }
.navxxxl__ctaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.navxxxl__ctaBtn--primary {
  background: var(--navxxxl-white);
  color: var(--navxxxl-blue-1);
  border-color: rgba(244, 246, 247, 0.65);
  box-shadow: var(--navxxxl-shadow-soft);
}
.navxxxl__ctaBtn--primary:hover { transform: translateY(-1px); background: var(--navxxxl-gray-1); }
.navxxxl__ctaBtn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--navxxxl-white);
  border-color: rgba(244, 246, 247, 0.24);
}
.navxxxl__ctaBtn--secondary:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.navxxxl__ctaBtn--full { width: 100%; }
.navxxxl__ctaBtn:focus-visible { outline: 3px solid var(--navxxxl-white); outline-offset: 2px; }
.navxxxl__toggle {
  display: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(244, 246, 247, 0.24);
  border-radius: 12px;
  width: 2.875rem;
  height: 2.625rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.navxxxl__toggleBars,
.navxxxl__toggleBars::before,
.navxxxl__toggleBars::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background: var(--navxxxl-white);
  border-radius: 2px;
  position: relative;
}
.navxxxl__toggleBars::before { position: absolute; top: -6px; }
.navxxxl__toggleBars::after { position: absolute; top: 6px; }
.navxxxl__toggle:focus-visible { outline: 3px solid var(--navxxxl-white); outline-offset: 2px; }

/* Scroll lock (class toggled by `static/js/nav_xxxl.js`) */
html.is-navxxxl-open,
body.is-navxxxl-open {
  overflow: hidden;
}

.navxxxl__overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 61, 98, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9001;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.navxxxl__drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(90vw, 26.25rem);
  z-index: 9002;
  background: linear-gradient(180deg, rgba(10, 61, 98, 0.98), rgba(21, 67, 96, 0.96));
  border-left: 1px solid rgba(244, 246, 247, 0.16);
  box-shadow: var(--navxxxl-shadow);
  padding: 16px 16px 18px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.navxxxl__drawerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(244, 246, 247, 0.14);
}
.navxxxl__drawerBrand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.navxxxl__drawerLogo { width: 1.875rem; height: 1.875rem; display: block; object-fit: contain; }
.navxxxl__drawerTitle {
  color: var(--navxxxl-white);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 13px;
  white-space: nowrap;
}
.navxxxl__close {
  appearance: none;
  border: 1px solid rgba(244, 246, 247, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: var(--navxxxl-white);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
}
.navxxxl__close:focus-visible { outline: 3px solid var(--navxxxl-white); outline-offset: 2px; }
.navxxxl__drawerNav { padding-top: 14px; display: grid; gap: 8px; }
.navxxxl__drawerLink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(244, 246, 247, 0.16);
  text-decoration: none;
  color: var(--navxxxl-white);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}
.navxxxl__drawerLink:hover { background: rgba(255, 255, 255, 0.06); }
.navxxxl__drawerCta { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(244, 246, 247, 0.14); }
@media (max-width: 1023px) {
  .navxxxl__inner { grid-template-columns: auto 1fr auto; }
  .navxxxl__nav { display: none; }
  .navxxxl__cta { display: none; }
  .navxxxl__toggle { display: inline-flex; justify-self: end; }
}
.navxxxl.navxxxl--open .navxxxl__overlay,
body.is-navxxxl-open .navxxxl__overlay { opacity: 1; pointer-events: auto; }
.navxxxl.navxxxl--open .navxxxl__drawer,
body.is-navxxxl-open .navxxxl__drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .navxxxl__link::after,
  .navxxxl__ctaBtn { transition: none; }
}

/* ------------------------------------------------------------
   FOOTER PREMIUM XXXL (ex footer_xxxl.css, tokens déplacés)
   ------------------------------------------------------------ */
footer.login-footer.footerxxxl {
  margin-top: 0;
  background: linear-gradient(180deg, var(--footerxxxl-blue-2), var(--footerxxxl-blue-1));
  color: var(--footerxxxl-gray-1);
  box-shadow: var(--footerxxxl-shadow-top), var(--footerxxxl-shadow-inset);
  border-top: 1px solid rgba(244, 246, 247, 0.16);
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 0 !important;
  border-radius: 0;
}
footer.login-footer.footerxxxl .footerxxxl__inner {
  max-width: var(--footerxxxl-max);
  margin-left: auto;
  margin-right: auto;
  padding: 40px 18px 18px;
  position: relative;
}
footer.login-footer.footerxxxl .footerxxxl__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(760px 260px at 80% 20%, rgba(255, 255, 255, 0.08), transparent 65%);
  pointer-events: none;
  opacity: 0.9;
}
footer.login-footer.footerxxxl .footerxxxl__inner > * { position: relative; }
footer.login-footer.footerxxxl .footerxxxl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* 240px */
  gap: clamp(22px, 3vw, 34px);
}
footer.login-footer.footerxxxl .footerxxxl__col { min-width: 0; }
footer.login-footer.footerxxxl .footerxxxl__contact { text-align: center; }
footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__title,
footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__k { text-align: center; }
footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__stack { justify-items: center; }
footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__item { justify-items: center; }
footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__v { justify-content: center; }
footer.login-footer.footerxxxl .footerxxxl__brandRow { display: flex; align-items: center; gap: 12px; }
footer.login-footer.footerxxxl .footerxxxl__brandLogo {
  width: 2.125rem; height: 2.125rem; display: block; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(44, 62, 80, 0.20));
}
footer.login-footer.footerxxxl .footerxxxl__brandName {
  color: var(--footerxxxl-white);
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.15;
}
footer.login-footer.footerxxxl .footerxxxl__brandTag {
  margin-top: 4px;
  color: rgba(244, 246, 247, 0.86);
  font-weight: 650;
  letter-spacing: 0.3px;
  font-size: 12px;
}
footer.login-footer.footerxxxl .footerxxxl__rule { height: 1px; width: 100%; margin: 14px 0 12px; background: rgba(244, 246, 247, 0.16); }
footer.login-footer.footerxxxl .footerxxxl__muted { margin: 0; color: rgba(244, 246, 247, 0.82); line-height: 1.55; font-size: 13px; }
footer.login-footer.footerxxxl .footerxxxl__title {
  color: var(--footerxxxl-white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
  margin: 0 0 12px;
}
footer.login-footer.footerxxxl .footerxxxl__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
footer.login-footer.footerxxxl .footerxxxl__list li {
  color: rgba(244, 246, 247, 0.86);
  font-size: 13px;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
footer.login-footer.footerxxxl .footerxxxl__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: rgba(244, 246, 247, 0.70);
}
footer.login-footer.footerxxxl .footerxxxl__stack { display: grid; gap: 14px; }
footer.login-footer.footerxxxl .footerxxxl__item { display: grid; gap: 6px; }
footer.login-footer.footerxxxl .footerxxxl__k {
  color: rgba(244, 246, 247, 0.78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}
footer.login-footer.footerxxxl .footerxxxl__v {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
footer.login-footer.footerxxxl a.footerxxxl__link,
footer.login-footer.footerxxxl a.footerxxxl__link:link,
footer.login-footer.footerxxxl a.footerxxxl__link:visited {
  display: inline-flex;
  align-items: baseline;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--footerxxxl-white) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(244, 246, 247, 0.65);
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: transform 160ms ease, text-decoration-color 160ms ease, opacity 160ms ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
footer.login-footer.footerxxxl a.footerxxxl__link.footerxxxl__link--secondary::before {
  content: "•";
  margin: 0 10px 0 10px;
  color: rgba(244, 246, 247, 0.70);
}
footer.login-footer.footerxxxl a.footerxxxl__link:hover { text-decoration-color: var(--footerxxxl-white); transform: translateY(-1px); }
footer.login-footer.footerxxxl a.footerxxxl__link:focus-visible { outline: 3px solid var(--footerxxxl-white); outline-offset: 2px; border-radius: 8px; }
footer.login-footer.footerxxxl .footerxxxl__divider { margin: 28px 0 14px; height: 1px; background: rgba(244, 246, 247, 0.16); }
footer.login-footer.footerxxxl .footerxxxl__bottomInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(244, 246, 247, 0.75);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.3px;
}
@media (max-width: 1024px) {
  footer.login-footer.footerxxxl .footerxxxl__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  footer.login-footer.footerxxxl { box-shadow: var(--footerxxxl-shadow-inset); }
  footer.login-footer.footerxxxl .footerxxxl__inner { padding-top: 18px; padding-left: 14px; padding-right: 14px; padding-bottom: 12px; }
  footer.login-footer.footerxxxl .footerxxxl__grid,
  footer.login-footer.footerxxxl .footerxxxl__divider { display: none; }
  footer.login-footer.footerxxxl .footerxxxl__bottomInner { flex-direction: column; align-items: center; text-align: center; }
  footer.login-footer.footerxxxl .footerxxxl__v { display: grid; gap: 8px; overflow: visible; }
  footer.login-footer.footerxxxl .footerxxxl__contact .footerxxxl__v { justify-items: center; }
  footer.login-footer.footerxxxl a.footerxxxl__link.footerxxxl__link--secondary::before { content: ""; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  footer.login-footer.footerxxxl a.footerxxxl__link { transition: none; }
}

/* ------------------------------------------------------------
   Reputation (ex reputation_reviews.css)
   ------------------------------------------------------------ */
.reputation {
  --rep-bg: var(--card);
  --rep-border: color-mix(in srgb, var(--border-strong) 70%, transparent);
  --rep-muted: var(--muted);
  --rep-text: var(--fg);
  --rep-accent: var(--primary-500);
  --rep-shadow: var(--shadow);
  /* AUDIT FIX DIFFÉRÉ: valeurs remplacées par variables thème */
  --rep-radius: var(--premium-radius-16);
  --rep-radius-sm: var(--premium-radius-12);
  color: var(--rep-text);
}
.reputation__header { display: block; text-align: center; gap: 12px; margin-bottom: 14px; }
.reputation__title { margin: 0; letter-spacing: 0.2px; text-align: center; }
.reputation__subtitle {
  margin: 6px 0 0 0;
  color: var(--rep-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.reputation__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rep-accent) 28%, transparent);
  background: color-mix(in srgb, var(--rep-accent) 10%, transparent);
  color: var(--primary-600);
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 12px;
  white-space: nowrap;
}
.reputation__summary {
  border: 1px solid var(--rep-border);
  border-radius: var(--rep-radius);
  background: var(--rep-bg);
  box-shadow: var(--rep-shadow);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.reputation__scorecard { display: flex; align-items: center; gap: 14px; }
.reputation__score { font-size: 44px; line-height: 1; font-weight: 950; letter-spacing: -0.6px; }
.reputation__scoreMeta { display: flex; flex-direction: column; gap: 4px; }
.reputation__stars { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; letter-spacing: 1px; color: var(--rep-accent); }
.reputation__source { color: var(--rep-muted); font-weight: 800; font-size: 13px; }
.reputation__facts { display: grid; gap: 8px; color: var(--rep-muted); font-weight: 700; }
.reputation__fact strong { color: var(--rep-text); font-weight: 900; }
.reputation__cta { display: flex; justify-content: flex-start; }
.reputation__ctaLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  background: var(--primary-600);
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.reputation__ctaLink:hover { background: var(--primary-500); }
.reputation__ctaLink:focus-visible { outline: 3px solid color-mix(in srgb, var(--rep-accent) 40%, transparent); outline-offset: 3px; }
.reputation__trustbar {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent);
  color: var(--rep-muted);
  font-weight: 700;
  font-size: 13px;
}
.reputation__grid { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 20px); width: 100%; max-width: 100%; min-width: 0; }
.reputation__card {
  min-width: 0;
  border: 1px solid var(--rep-border);
  border-radius: var(--rep-radius-sm);
  background: var(--rep-bg);
  padding: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
  display: flex;
  flex-direction: column;
}
.reputation__card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10); }
.reputation__cardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.reputation__name { font-weight: 950; letter-spacing: 0.2px; min-width: 0; overflow-wrap: anywhere; }
.reputation__cardStars { color: var(--rep-accent); font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.reputation__text { margin: 0; color: color-mix(in srgb, var(--rep-text) 86%, var(--rep-muted)); font-style: italic; line-height: 1.5; }
.reputation__meta { margin-top: 10px; color: var(--rep-muted); font-weight: 700; font-size: 12px; }
@media (min-width: 768px) {
  .reputation__summary { grid-template-columns: 15rem 1fr auto; align-items: center; } /* 240px */
  .reputation__cta { justify-content: flex-end; }
  .reputation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .reputation__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .reputation__badge { align-self: center; }
  .reputation__score { font-size: 40px; }
}
main.page-content .reputation a.reputation__ctaLink {
  background-image: none;
  background-repeat: initial;
  background-size: initial;
  background-position: initial;
  background-color: var(--primary-600);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow: none;
  transform: none;
}
main.page-content .reputation a.reputation__ctaLink:hover {
  color: #ffffff;
  background-color: var(--primary-500);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
main.page-content .reputation a.reputation__ctaLink:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rep-accent) 40%, transparent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .reputation__card { transition: none; }
  .reputation__card:hover { transform: none; }
}

/* ------------------------------------------------------------
   Assistance premium (ex assistance_premium.css)
   ------------------------------------------------------------ */
.support-page,
.support-page-premium {
  --support-bg: var(--card);
  --support-border: var(--border-strong);
  --support-radius: 16px;
  --support-shadow: var(--shadow);
  --support-gap: 16px;
  width: 100%;
}
.support-page .support-header,
.support-page-premium .support-header {
  margin: 0 auto;
  width: min(68.75rem, calc(100% - 2rem));
  background: var(--support-bg);
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius);
  box-shadow: var(--support-shadow);
  padding: 26px 28px;
  text-align: center;
}
.support-page .support-title,
.support-page-premium .support-title {
  margin: 0 0 10px 0;
  font-weight: 950 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.12 !important;
  font-size: clamp(24px, 3.2vw, 44px) !important;
  color: var(--fg) !important;
  text-shadow: none !important;
}
.support-page .support-subtitle,
.support-page-premium .support-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 17px);
}
.support-page .support-grid,
.support-page-premium .support-grid {
  margin: 18px auto 0 auto;
  width: min(68.75rem, calc(100% - 2rem));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--support-gap);
  align-items: start;
}
@media (min-width: 1025px) {
  .support-page .support-grid,
  .support-page-premium .support-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.support-page .support-card,
.support-page .contact-card,
.support-page-premium .support-card,
.support-page-premium .contact-card {
  background: var(--support-bg);
  border: 1px solid var(--support-border);
  border-radius: var(--support-radius);
  box-shadow: var(--support-shadow);
  padding: 22px 22px;
  text-align: left;
}
.support-page .support-card__title,
.support-page-premium .support-card__title {
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  text-align: left;
  font-weight: 950 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.15 !important;
  font-size: clamp(16px, 2.0vw, 22px) !important;
  color: var(--fg) !important;
  text-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--support-border) 65%, transparent);
}
.support-page .support-form,
.support-page-premium .support-form { max-width: 61.25rem; margin: 0 auto; }
.support-page .support-formGrid,
.support-page-premium .support-formGrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 769px) {
  .support-page .support-formGrid,
  .support-page-premium .support-formGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.support-page .support-field,
.support-page-premium .support-field {
  background: color-mix(in srgb, var(--card) 92%, var(--primary-500));
  border: 1px solid color-mix(in srgb, var(--border-strong) 75%, transparent);
  border-radius: 12px;
  padding: 14px 14px;
  text-align: left;
}
.support-page .support-field--wide,
.support-page-premium .support-field--wide { grid-column: 1 / -1; }
.support-page .support-field label,
.support-page-premium .support-field label {
  display: block;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--fg);
  margin: 0 0 8px 0;
}
.support-page .support-help,
.support-page-premium .support-help {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 700;
}
.support-page .support-field input,
.support-page .support-field textarea,
.support-page-premium .support-field input,
.support-page-premium .support-field textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border-strong) 75%, transparent);
  border-radius: 12px;
  padding: 12px 12px;
  background: var(--card);
  color: var(--fg);
  font-weight: 700;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
  min-height: 44px;
}
.support-page .support-field textarea,
.support-page-premium .support-field textarea { resize: vertical; min-height: 140px; }
.support-page .support-field input:focus,
.support-page .support-field textarea:focus,
.support-page-premium .support-field input:focus,
.support-page-premium .support-field textarea:focus {
  border-color: color-mix(in srgb, var(--primary-500) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 22%, transparent);
}
.support-page .support-field input::placeholder,
.support-page .support-field textarea::placeholder,
.support-page-premium .support-field input::placeholder,
.support-page-premium .support-field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-weight: 700;
}
.support-page .support-required,
.support-page-premium .support-required { color: var(--primary-600); }
.support-page .support-feedback,
.support-page-premium .support-feedback {
  min-height: 18px;
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: .1px;
  font-size: 13px;
}
.support-page .support-feedback[data-kind="err"],
.support-page-premium .support-feedback[data-kind="err"] { color: var(--primary-600); }
.support-page .support-feedback[data-kind="ok"],
.support-page-premium .support-feedback[data-kind="ok"] { color: color-mix(in srgb, var(--fg) 72%, var(--primary-500)); }
.support-page .support-count,
.support-page-premium .support-count { margin-top: 6px; color: color-mix(in srgb, var(--muted) 78%, transparent); font-weight: 800; font-size: 12px; }
.support-page .support-field input[aria-invalid="true"],
.support-page .support-field textarea[aria-invalid="true"],
.support-page-premium .support-field input[aria-invalid="true"],
.support-page-premium .support-field textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--primary-600) 70%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent);
}
.support-page .support-field input[data-valid="true"],
.support-page .support-field textarea[data-valid="true"],
.support-page-premium .support-field input[data-valid="true"],
.support-page-premium .support-field textarea[data-valid="true"] {
  border-color: color-mix(in srgb, var(--primary-500) 55%, var(--border-strong));
}
.support-page .support-actions,
.support-page-premium .support-actions { display: grid; gap: 10px; justify-items: start; margin-top: 14px; }
.support-page .support-btn,
.support-page-premium .support-btn {
  width: 100%;
  max-width: 32.5rem;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .3px;
  background: var(--primary-500);
  color: #fff;
  transition: var(--transition);
}
.support-page .support-btn:hover,
.support-page-premium .support-btn:hover { background: var(--primary-600); transform: none; box-shadow: none; }
.support-page .support-btn:focus-visible,
.support-page-premium .support-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-500) 35%, transparent); outline-offset: 3px; }
.support-page .support-btn:disabled,
.support-page-premium .support-btn:disabled { opacity: .7; cursor: not-allowed; }
.support-page .trust-row,
.support-page-premium .trust-row { color: var(--muted); font-weight: 800; text-align: left; font-size: 13px; }
.support-page .support-msg,
.support-page-premium .support-msg { max-width: 61.25rem; margin: 0 auto 12px auto; }
.support-page .support-msg--ok,
.support-page-premium .support-msg--ok { color: var(--primary-600); font-weight: 900; }
.support-page .support-msg--err,
.support-page-premium .support-msg--err { color: var(--primary-600); font-weight: 900; }
.support-page .contact-list,
.support-page-premium .contact-list { display: grid; gap: 12px; }
.support-page .contact-item,
.support-page-premium .contact-item {
  margin: 0;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 75%, transparent);
  background: color-mix(in srgb, var(--card) 92%, var(--primary-500));
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.support-page .contact-item--address,
.support-page-premium .contact-item--address { align-items: flex-start; }
.support-page .contact-k,
.support-page-premium .contact-k {
  flex: none;
  min-width: 8.75rem;
  max-width: 11.875rem;
  font-weight: 950;
  color: color-mix(in srgb, var(--fg) 72%, var(--muted));
  letter-spacing: 0.3px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.support-page .contact-k::after,
.support-page-premium .contact-k::after { content: " :"; }
.support-page .contact-v,
.support-page-premium .contact-v {
  flex: 1;
  min-width: 0;
  color: var(--fg);
  font-weight: 800;
  overflow-wrap: anywhere;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
}
.support-page .contact-v--email,
.support-page-premium .contact-v--email { flex-wrap: nowrap; overflow-wrap: normal; word-break: normal; }
.support-page .contact-email,
.support-page-premium .contact-email {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}
.support-page .contact-phone,
.support-page-premium .contact-phone { white-space: nowrap; }
.support-page .contact-phone--secondary::before,
.support-page-premium .contact-phone--secondary::before {
  content: "•";
  display: inline-block;
  margin-right: 10px;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}
@media (max-width: 1024px) {
  .support-page .contact-k,
  .support-page-premium .contact-k { min-width: 0; max-width: none; white-space: nowrap; }
}
main.page-content .support-page a.support-link,
main.page-content .support-page-premium a.support-link {
  background-image: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--primary-500);
  font-weight: 950;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main.page-content .support-page a.support-link:focus-visible,
main.page-content .support-page-premium a.support-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-500) 35%, transparent);
  outline-offset: 3px;
}

/* -----------------------------
   Declarations list — sortable table headers
   ----------------------------- */
.enterprise-table thead th a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.enterprise-table thead th a:hover {
  text-decoration: underline;
}

/* -----------------------------
   PDF dropzone — import declarations / liquidations
   ----------------------------- */
.u-text-success { color: var(--success, #116149); }
.pdf-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border-strong, #e6e9ef);
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--bg, #f7f9fc));
  cursor: pointer;
  user-select: none;
}
.pdf-dropzone.is-dragover {
  border-color: var(--primary-500, #1f3c88);
  background: color-mix(in srgb, var(--primary-500, #1f3c88) 8%, var(--card, #fff));
}
.pdf-dropzone__icon {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary-500, #1f3c88) 12%, var(--card, #fff));
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--primary-700, #102a6d);
}
.pdf-dropzone__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pdf-dropzone__title {
  font-weight: 900;
  color: var(--primary-600, #1a357a);
  line-height: 1.1;
}
.pdf-dropzone__hint {
  font-size: 12px;
  color: var(--muted, #4b5563);
}
.pdf-dropzone__filename {
  font-size: 12px;
  color: var(--fg, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 17.5rem;
}
.pdf-dropzone__status {
  margin-left: auto;
  font-weight: 900;
  white-space: nowrap;
}
.pdf-dropzone__status--missing { color: var(--danger, #c3002f); }
.pdf-dropzone__status--ok { color: var(--success, #116149); }
/* File input "visually hidden" qui couvre 100% du label :
   un clic n'importe où dans la dropzone ouvre la boîte de dialogue.
   On utilise !important pour neutraliser .internal-shell .form-field
   qui imposerait sinon max-width: 520px et casserait la zone cliquable. */
.pdf-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 1;
}
tr.row-missing-pdf .pdf-dropzone {
  border-color: color-mix(in srgb, var(--danger, #c3002f) 55%, var(--border-strong, #e6e9ef));
  background: color-mix(in srgb, var(--danger, #c3002f) 6%, var(--card, #fff));
}

/* Wrapper + bandeau de prévisualisation PDF (sous la dropzone) */
.pdf-dropzone-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.pdf-preview-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-500, #1f3c88) 8%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--primary-500, #1f3c88) 22%, var(--border-strong, #e6e9ef));
}
.pdf-preview-link {
  color: var(--primary-600, #1a357a);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdf-preview-link::before {
  content: "↗";
  font-weight: 900;
}
.pdf-preview-link:hover { text-decoration: underline; }
.pdf-preview-clear {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger, #c3002f) 35%, var(--border-strong, #e6e9ef));
  color: var(--danger, #c3002f);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pdf-preview-clear:hover {
  background: var(--danger, #c3002f);
  color: #fff;
}

/* -----------------------------
   Importer contracts UI
   ----------------------------- */
.importer-contracts-ui { --c-border: #e5e7eb; --c-bg: #ffffff; --c-muted:#6b7280; --c-ink:#111827; --c-blue:#1d4ed8; --c-green:#047857; --c-amber:#b45309; --c-red:#b42318; }
.importer-contracts-ui .contract-hero__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.importer-contracts-ui .contract-hero__kicker { font-size:.84rem; color: var(--c-muted); letter-spacing:.2px; }
.importer-contracts-ui .contract-hero__title { margin:.15rem 0 0; font-size:1.35rem; }
.importer-contracts-ui .contract-hero__sub { margin-top:.35rem; color: var(--c-muted); }
.importer-contracts-ui .contract-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.importer-contracts-ui .contract-badge { display:inline-flex; align-items:center; gap:8px; padding:.22rem .55rem; border-radius:999px; font-size:.78rem; font-weight:900; letter-spacing:.2px; border:1px solid transparent; white-space:nowrap; }
.importer-contracts-ui .contract-badge--ok { background: color-mix(in srgb, #039855 14%, #ffffff); color: #027A48; border-color: color-mix(in srgb, #039855 28%, var(--c-border)); }
.importer-contracts-ui .contract-badge--warn { background: color-mix(in srgb, #F79009 16%, #ffffff); color: #B54708; border-color: color-mix(in srgb, #F79009 30%, var(--c-border)); }
.importer-contracts-ui .contract-badge--danger { background: color-mix(in srgb, #D92D20 12%, #ffffff); color: #B42318; border-color: color-mix(in srgb, #D92D20 26%, var(--c-border)); }
.importer-contracts-ui .contract-badge--muted { background: color-mix(in srgb, #64748b 12%, #ffffff); color: #334155; border-color: color-mix(in srgb, #64748b 22%, var(--c-border)); }
.importer-contracts-ui .metric-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.importer-contracts-ui .metric { border:1px solid var(--c-border); border-radius:12px; padding:10px; background: var(--c-bg); min-width:0; }
.importer-contracts-ui .metric__label { color: var(--c-muted); font-size:.78rem; font-weight:850; letter-spacing:.2px; }
.importer-contracts-ui .metric__value { margin-top:6px; font-size:1.2rem; font-weight:950; color: var(--c-ink); }
.importer-contracts-ui .metric__meta { margin-top:4px; color: var(--c-muted); font-size:.78rem; }
.importer-contracts-ui .kv { display:grid; grid-template-columns: 180px 1fr; gap:6px 12px; margin-top:10px; }
.importer-contracts-ui .kv__k { color: var(--c-muted); font-weight:850; }
.importer-contracts-ui .kv__v { color: var(--c-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.importer-contracts-ui .grid-2 { display:grid; grid-template-columns: 1.15fr .85fr; gap:12px; }
.importer-contracts-ui .pdf-shell { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: #ffffff; }
.importer-contracts-ui .pdf-shell__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--c-border); background: color-mix(in srgb, #f8fafc 70%, #ffffff); }
.importer-contracts-ui .pdf-shell__title { font-weight:950; font-size:.92rem; }
.importer-contracts-ui .doc-banner { padding:10px 12px; border-bottom:1px solid var(--c-border); background: color-mix(in srgb, #eef2ff 18%, #ffffff); }
.importer-contracts-ui .doc-banner__title { font-weight:950; font-size:.82rem; color: var(--c-ink); }
.importer-contracts-ui .doc-banner__text { margin-top:4px; color: var(--c-muted); font-size:.78rem; line-height:1.25; }
.importer-contracts-ui .doc-banner__kv { margin-top:8px; display:flex; flex-wrap:wrap; gap:8px 12px; }
.importer-contracts-ui .doc-banner__kv .chip { display:inline-flex; align-items:center; gap:8px; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--c-border); background:#fff; font-size:.76rem; }
.importer-contracts-ui .pdf-shell__frame { width:100%; height: 720px; border:0; display:block; background:#fff; }
.importer-contracts-ui .pdf-shell--fullscreen { position: fixed; inset: 0; z-index: 9999; border-radius: 0; }
.importer-contracts-ui .pdf-shell--fullscreen .pdf-shell__frame { height: calc(100vh - 54px); }
.importer-contracts-ui .empty-state { border:1px dashed var(--c-border); border-radius:12px; padding:12px; background: color-mix(in srgb, #f8fafc 70%, #ffffff); color: var(--c-muted); }
.importer-contracts-ui .row-selected { background: rgba(0,0,0,0.03); }
.importer-contracts-ui .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums; }
.importer-contracts-ui .gov-muted { color: var(--c-muted); }
@media (max-width: 960px) {
  .importer-contracts-ui .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .importer-contracts-ui .grid-2 { grid-template-columns: 1fr; }
  .importer-contracts-ui .kv { grid-template-columns: 1fr; }
}