/* ============================================================
   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;  /* guardrail:ignore — dimension décorative fixe (pastille/filet), pas un conteneur */
  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;  /* guardrail:ignore — dimension décorative fixe (pastille/filet), pas un conteneur */
  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;
}

/* --- UI-07 : états manquants du bouton canonique ---------------------------
   `.btn` n'avait ni focus visible ni retour d'appui, alors que 100 % des
   variantes du projet (859 usages relevés) s'appuient sur cette base : les
   compléter ici atteint les 1 900 boutons sans toucher un seul gabarit.
   Rien n'est retiré ni redéfini — uniquement ce qui manquait. */

.btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

/* Cible tactile : l'audit UI-05 a relevé 88 boutons sous 24 px. Le minimum
   recommandé est 36 px ; le remplissage existant n'est pas modifié. */
.btn {
  min-height: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}

/* --- UI-07 : composant Alert -----------------------------------------------
   `.enterprise-alert` est utilisée 95 fois dans 31 gabarits — dont des pages
   PUBLIQUES (vérification de facture, signature de contrat) — et n'avait
   AUCUNE règle CSS : le bandeau s'affichait en texte nu.

   La définition reprend la géométrie de son jumeau `.enterprise-feedback`
   (filet latéral, même rythme) mais consomme des jetons au lieu des
   hexadécimaux en dur : elle suit donc le thème sans bloc sombre propre.
   Les deux familles restent distinctes — `alert` sert la couche publique,
   `feedback` la couche applicative (constat UI-05 corrigé en UI-06). */

.enterprise-alert {
  padding: 0.875rem 1rem;
  border-radius: 10px;
  margin-top: 0.875rem;
  border: 1px solid var(--premium-border, #e6e9ef);
  border-left: 4px solid var(--premium-muted, #4b5563);
  background: var(--premium-card, #ffffff);
  color: var(--premium-fg, #1a1a1a);
}

.enterprise-alert--danger,
.enterprise-alert--error {
  border-left-color: var(--danger, #c3002f);
}

/* Recherche faite : il n'existe AUCUN jeton de statut global. `--danger` est
   le seul défini dans le socle ; `--success` et `--warn` sont scopés par
   module (`--lp-success`, `--cp-warn`, `--es-success`, `--ig-danger`…).
   Créer des jetons globaux relève du lot design system, pas d'UI-07 : les
   valeurs sont donc explicites et signalées comme dette dans le rapport. */
.enterprise-alert--success {
  border-left-color: #0f766e; /* dette : aucun jeton --success global */
}

.enterprise-alert--warning {
  border-left-color: #b45309; /* dette : aucun jeton --warn global */
}

.enterprise-alert__title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* --- UI-07 : focus visible des champs --------------------------------------
   `.lp-input` (144 usages) et `.form-field` (74) n'avaient aucun
   `:focus-visible`. Un `:focus` existe sur `.lp-input`, mais rien ne couvrait
   la navigation au clavier de façon explicite ni `.form-field`. */

.form-field:focus-visible,
.lp-input:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
}
.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)) {
    :where(html:not([data-theme="light"])) main.page-content h1,
    :where(html:not([data-theme="light"])) 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;  /* guardrail:ignore — dimension décorative fixe (pastille/filet), pas un conteneur */
}
.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; }
}


/* ============================================================
   ÉTATS DE CHARGEMENT ET DE RETOUR (UI-06)
   ------------------------------------------------------------
   Cette section n'introduit AUCUN mécanisme nouveau : elle rend
   visibles des accroches déjà posées par le socle existant.

   `enterprise_forms.js` applique déjà, sur chaque formulaire :
     - `.is-submitted`  sur le <form>
     - `disabled`, `aria-disabled` et `.is-submitting`
       sur les boutons de soumission NON cliqués
   `enterprise_feedback_global.js` expose déjà `setFormBusy()`,
   qui pose `aria-busy` sur le formulaire.

   Or `.is-submitting` n'avait aucune règle CSS, et `[disabled]`
   non plus : l'utilisateur ne voyait rien changer. C'est ce
   vide-là que cette section comble.

   Les tailles sont en `em` : elles suivent la police du bouton,
   et le garde-fou interdit les largeurs en px dans cette feuille.
   ============================================================ */

@keyframes jsl-spin {
  to { transform: rotate(360deg); }
}

/* Indicateur de travail en cours, partagé par tous les états. */
.is-submitting::after,
.is-pending::after,
[aria-busy="true"] .jsl-busy-dot::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jsl-spin 0.7s linear infinite;
}

/* Bouton effectivement cliqué : retour visuel SANS `disabled`,
   car désactiver le soumetteur casse la navigation après un 302
   (contrainte documentée dans enterprise_forms.js).

   Le sélecteur d'élément (`button.is-pending`) est volontaire : cette
   feuille est chargée tôt, et une règle `cursor` à classe unique dans
   une feuille plus tardive l'emporterait sinon par simple ordre. */
.is-pending,
button.is-pending,
input.is-pending {
  cursor: progress;
  opacity: 0.85;
}

/* Boutons de soumission voisins, neutralisés pendant l'envoi. */
.is-submitting,
button.is-submitting,
input.is-submitting {
  cursor: progress;
  opacity: 0.7;
}

/* Un bouton désactivé doit se voir. Aucune règle ne couvrait ce
   cas : il était visuellement identique à un bouton actif. */
button[disabled],
input[type="submit"][disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
}

/* Le formulaire entier signale son activité. */
form[aria-busy="true"] {
  cursor: progress;
}

form[aria-busy="true"] .form-field,
form[aria-busy="true"] .lp-input {
  opacity: 0.75;
}

/* ------------------------------------------------------------
   État vide générique — rendu par app/partials/enterprise_empty_state.html
   Reprend la sobriété de `.lp-empty`, en y ajoutant ce qui lui
   manque : un titre, une explication et une action de sortie.
   ------------------------------------------------------------ */
.enterprise-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--premium-muted, #4b5563);
  border: 1px dashed var(--premium-border, #e6e9ef);
  border-radius: 12px;
  background: var(--premium-card, #ffffff);
}

.enterprise-empty__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--premium-fg, #1a1a1a);
  margin: 0;
}

.enterprise-empty__text {
  font-size: 0.875rem;
  margin: 0;
  max-inline-size: 46ch;
}

.enterprise-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Les boutons du socle descendent à 22 px de haut : sous le minimum tactile
   de 24 px relevé par l'audit UI-05. Un état vide est précisément l'endroit
   où l'on demande à l'utilisateur d'agir — la cible doit être atteignable. */
.enterprise-empty__actions .btn,
.enterprise-empty__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: 0.9rem;
}

/* Dans un tableau, l'état vide occupe la cellule sans bordure propre. */
td > .enterprise-empty,
th > .enterprise-empty {
  border: 0;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .is-submitting::after,
  .is-pending::after,
  [aria-busy="true"] .jsl-busy-dot::after {
    animation: none;
  }
}


/* ============================================================
   SOCLE DE TABLEAU (UI-08)
   ------------------------------------------------------------
   L'audit UI-08 a mesuré 434 tableaux répartis en DEUX familles
   réelles — et non trois :

     enterprise-table + styled-table   257 (59 %)  — portées ENSEMBLE
     lp-table                           87 (20 %)
     non classée                        80 (18 %)

   Les deux familles établies sont déjà convergentes : même teinte
   d'en-tête `rgba(31,60,136,.08)`, densité 43/49 px contre 41/45,
   conteneur de défilement dans les deux cas. Elles ne sont donc
   PAS fusionnées — décision OPTION B, jetons communs.

   Ce socle ne vise que la famille non classée, mesurée à
   **3,10:1** de contraste d'en-tête — sous le seuil WCAG. Il est
   volontairement à faible spécificité (`:where()` = 0) : toute
   famille qui définit son propre en-tête garde la main.
   ============================================================ */

/* Une règle d'en-tête a été tentée puis RETIRÉE : à spécificité nulle elle ne
   pouvait pas battre les styles locaux des pages (`.dash-table th` est défini
   dans le `<style>` inline de sa page, spécificité 101). Relever la
   spécificité l'aurait fait primer sur les deux familles établies — ce que ce
   socle doit précisément éviter. La remise à niveau des 80 tableaux non
   classés est donc une migration page par page, pas un travail de socle.

   Ne subsiste ici que ce qui comble un vide réel sans rien surcharger :
   le focus clavier des éléments interactifs de tableau, qu'aucune règle ne
   couvrait. */
:where(.app-main table) a:focus-visible,
:where(.app-main table) button:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
}

/* =====================================================================
   UI-13 — Plancher de cible tactile du châssis
   ---------------------------------------------------------------------
   Mesuré au rendu, viewport réel vérifié par iframe, sur toutes les pages
   du corpus : le lien d'évitement, le fil d'Ariane et les liens de pied de
   page mesuraient 17 à 18 px de haut — sous le plancher de 24 px retenu par
   le programme. Ils sont présents sur chaque écran, ce qui en fait le plus
   gros gisement de cibles courtes de l'application.

   Aucune règle du projet ne disputait `min-height` sur ces sélecteurs (vérifié
   au CSSOM), une spécificité faible suffit donc.

   Le pied de page passe en `inline-block` : une boîte inline ne se laisse pas
   agrandir, sa hauteur suit les métriques de la fonte et non `line-height`.
   Les libellés concernés tiennent sur une ligne à 320 px, la mesure le
   confirme — aucun débordement introduit.
   ===================================================================== */
.skip-to-main,
.enterprise-breadcrumb__link {
  min-height: 1.5rem;
}

.footer-enterprise-xxl__link,
.footer-enterprise-xxl__btn {
  display: inline-block;
  min-height: 1.5rem;
}