/* ============================================================
   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); }

/* 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: #be123c;
  border-color: color-mix(in srgb, #be123c 70%, var(--border-strong));
  color: #fff;
}
.btn--danger:hover { background: #9f1239; }

/* 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 {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); /* 180px */
  gap: var(--space-4);
  overflow: visible;
  justify-items: stretch;
}
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-card {
  flex: initial;
  width: auto;
  min-width: 0;
  overflow: hidden;
}
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 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 1024px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); /* 220px */
  }
}
@media (max-width: 640px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1920px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* 240px */
    gap: calc(var(--space-4) * 1.25);
  }
}
@media (min-width: 2560px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
    gap: calc(var(--space-4) * 1.5);
  }
}

/* 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 .footerxxxl__inner { padding-top: 32px; }
  footer.login-footer.footerxxxl .footerxxxl__grid { grid-template-columns: 1fr; gap: 18px; }
  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 (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 { align-items: center; text-align: center; }
}
@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);
  --rep-radius: 16px;
  --rep-radius-sm: 12px;
  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; }
.reputation__name { 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;
}