:root {
  --ink: #101828;
  --navy: #07152b;
  --navy-2: #0e2342;
  --blue: #2563eb;
  --cyan: #19c7df;
  --mint: #2bd49f;
  --amber: #f3c969;
  --coral: #f26d5b;
  --paper: #f7f9fc;
  --white: #ffffff;
  --muted: #667085;
  --line: rgba(16, 24, 40, 0.11);
  --line-dark: rgba(255, 255, 255, 0.12);
  --shadow: 0 24px 70px rgba(16, 24, 40, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}

.nav {
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(18px);
  color: var(--white);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.scrolled .nav {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
  color: var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  width: 220px;
  height: 46px;
}

.brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}


.parent-home-link {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}
.parent-home-link > svg { width: 18px; height: 18px; }
.parent-home-link > span {
  display: block !important;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 7px 10px;
  border-radius: 8px;
  color: #fff;
  background: rgba(5,18,35,.96);
  box-shadow: 0 10px 24px rgba(2,10,24,.25);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.parent-home-link:hover { transform: translateY(-2px); color: #032129; background: var(--cyan); border-color: var(--cyan); }
.parent-home-link:hover > span,.parent-home-link:focus-visible > span { opacity: 1; transform: translate(-50%,0); }
.site-header.scrolled .parent-home-link { color: var(--ink); background: rgba(16,24,40,.04); border-color: var(--line); }
.support-page .site-header.scrolled .parent-home-link { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.nav-panel .parent-home-mobile { display: none; }

.logo-scrolled,
.site-header.scrolled .logo-hero {
  opacity: 0;
}

.site-header.scrolled .logo-scrolled {
  opacity: 1;
}

.nav-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
}

.mobile-nav-head,
.mobile-nav-signature {
  display: none;
}


/* Keep the desktop links visually centred while slightly tightening the
   space after the parent-company return control on wide screens. */
@media (min-width: 1600px) {
  .brand,
  .parent-home-link { left: 36px; }
}

.nav-access {
  position: relative;
}

.nav-access summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-access summary::-webkit-details-marker { display: none; }
.nav-access summary > svg { width: 15px; height: 15px; transition: transform .18s ease; }
.nav-access[open] summary > svg { transform: rotate(180deg); }
.nav-access summary:hover, .nav-access[open] summary { color: var(--cyan); background: rgba(255, 255, 255, .08); }
.site-header.scrolled .nav-access summary { color: var(--muted); }
.site-header.scrolled .nav-access summary:hover, .site-header.scrolled .nav-access[open] summary { color: var(--cyan-dark); background: rgba(25, 199, 223, .08); }

.nav-access-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  width: 290px;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(223, 231, 238, .95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(7, 24, 45, .2);
  transform: translateX(-50%);
}

.nav-access-menu a,
.site-header.scrolled .nav-access-menu a {
  min-height: 58px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  overflow: visible;
  text-decoration: none;
}

.nav-access-menu a::before, .nav-access-menu a::after { display: none; }
.nav-access-menu a:hover, .site-header.scrolled .nav-access-menu a:hover { color: var(--cyan-dark); background: #edfafd; transform: none; }
.nav-access-menu a > svg { width: 35px; height: 35px; padding: 8px; border-radius: 10px; color: #0a7b8a; background: #e7f8fa; }
.nav-access-menu a > span { min-width: 0; display: grid; gap: 1px; }
.nav-access-menu strong { font-size: 12px; }
.nav-access-menu small { color: #718293; font-size: 10px; font-weight: 600; }

.nav-panel a {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav-panel a::before,
.nav-panel a::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-panel a::before {
  inset: 3px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: scale(0.88);
}

.nav-panel a::after {
  right: 16px;
  bottom: 7px;
  left: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}

.nav-panel a:hover {
  transform: translateY(-1px);
}

.site-header.scrolled .nav-panel a {
  color: var(--muted);
}

.nav-panel a:hover,
.site-header.scrolled .nav-panel a:hover {
  color: var(--cyan);
}

.nav-panel a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.nav-panel a:hover::after {
  transform: scaleX(1);
}

.site-header.scrolled .nav-panel a::before {
  background: rgba(25, 199, 223, 0.09);
}

.nav-cta,
.btn,
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.nav-cta {
  position: relative;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--cyan);
  color: #032129;
  white-space: nowrap;
  overflow: hidden;
}

.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.42) 45%, transparent 62% 100%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.nav-cta:hover::after {
  transform: translateX(120%);
}

.nav-cta span,
.nav-cta svg {
  position: relative;
  z-index: 1;
}

.nav-cta:hover,
.btn-primary:hover,
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(25, 199, 223, 0.28);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
}

.language-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.site-header.scrolled .language-switch {
  border-color: var(--line);
  background: rgba(16, 24, 40, 0.04);
}

.language-switch button {
  min-width: 34px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.site-header.scrolled .language-switch button {
  color: var(--muted);
}

.language-switch button.is-active {
  background: var(--cyan);
  color: #032129;
  box-shadow: 0 8px 18px rgba(25, 199, 223, 0.22);
}

.hero {
  position: relative;
  min-height: 92vh;
  padding: 126px 0 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 12%, rgba(43, 212, 159, 0.3), transparent 28%),
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.42), transparent 34%),
    linear-gradient(135deg, var(--navy), #10233c 50%, #07111f);
  color: var(--white);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
  gap: 52px;
  align-items: center;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 16px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 800;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0;
}

.eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 7px rgba(43, 212, 159, 0.12);
}

.hero-experience {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(243, 201, 105, 0.36);
  border-radius: 999px;
  background: rgba(243, 201, 105, 0.08);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.hero-experience svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Manrope, Inter, sans-serif;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  max-width: 640px;
  font-size: clamp(40px, 4.8vw, 66px);
  font-weight: 800;
}

.hero-text {
  max-width: 540px;
  margin: 20px 0 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
}

.hero-actions,
.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  padding: 0 24px;
  border: 1px solid transparent;
}

.btn svg,
.nav-cta svg,
.submit-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.btn-primary {
  background: var(--cyan);
  color: #031f27;
}

.btn-secondary,
.btn-tertiary {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.btn-secondary:hover,
.btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
  max-width: 650px;
}

.metrics div {
  padding: 13px 14px;
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.metrics strong {
  display: block;
  color: var(--white);
  font-size: 24px;
  font-family: Manrope, Inter, sans-serif;
  line-height: 1.1;
}

.metrics span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.hero-visual {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slider {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* .hero-slide : voir le bloc Animations en fin de fichier. */

/* .hero-dots : voir le bloc Animations en fin de fichier. */

.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ticket-top span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.ticket-top strong {
  color: var(--mint);
  font-size: 12px;
}

.trust-band {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding-bottom: 46px;
  background: linear-gradient(180deg, var(--navy) 0 50%, var(--white) 50% 100%);
}

.trust-list {
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)),
    var(--white);
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.12);
  backdrop-filter: blur(14px);
}

.remote-support {
  position: relative;
  z-index: 2;
  padding: 34px 0 20px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f0f8ff 45%, #ffffff 100%);
}

.remote-support-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(270px, 330px);
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 34px 34px;
  border: 1px solid rgba(90, 222, 240, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(25, 199, 223, 0.32), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(43, 212, 159, 0.15), transparent 28%),
    linear-gradient(125deg, #07152b 0%, #0e2a4f 58%, #0b3c54 100%);
  box-shadow:
    0 28px 70px rgba(7, 21, 43, 0.24),
    0 0 0 6px rgba(37, 99, 235, 0.04);
}

.remote-support-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--mint));
}

.remote-support-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: 24%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.remote-support-icon {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #032129;
  background: linear-gradient(145deg, #72e9f5, var(--cyan));
  box-shadow:
    0 18px 34px rgba(25, 199, 223, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.remote-support-icon > svg {
  width: 34px;
  height: 34px;
}

.remote-support-icon > span {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 3px solid #0d2b4a;
  border-radius: 50%;
  color: #063b31;
  background: var(--mint);
}

.remote-support-icon > span svg {
  width: 14px;
  height: 14px;
}

.remote-support-copy {
  min-width: 0;
}

.remote-support-copy .section-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(43, 212, 159, 0.34);
  border-radius: 999px;
  color: #8ff5d3;
  background: rgba(43, 212, 159, 0.1);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.remote-support-copy .section-kicker svg {
  width: 13px;
  height: 13px;
}

.remote-support-copy h2 {
  margin: 0;
  color: var(--white);
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
}

.remote-support-copy > p:not(.section-kicker) {
  max-width: 650px;
  margin: 8px 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.remote-support-copy > small {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.remote-support-copy > small svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--cyan);
}

.remote-downloads {
  display: grid;
  gap: 8px;
}

.remote-download {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  color: var(--white);
  background: linear-gradient(135deg, #2563eb, #1976ea);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.remote-download:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 18px 34px rgba(25, 199, 223, 0.24);
}

.remote-download-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

.remote-download-mac {
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 12px 26px rgba(3, 15, 35, 0.24);
}

.remote-download-mac .remote-download-icon {
  color: var(--white);
  background: var(--navy);
}

.remote-download-icon svg {
  width: 21px;
  height: 21px;
}

.remote-download span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.remote-download span:nth-child(2) small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
}

.remote-download-mac span:nth-child(2) small {
  color: #6c7788;
}

.remote-download span:nth-child(2) strong {
  font-size: 15px;
  line-height: 1.2;
}

.remote-download > svg {
  width: 18px;
  height: 18px;
  color: #a9f5ff;
}

.remote-download-mac > svg {
  color: var(--blue);
}

.remote-download-diagnostic {
  color: #062b2a;
  border-color: rgba(143, 245, 211, 0.46);
  background: linear-gradient(135deg, #8ff5d3, #36d6b3);
  box-shadow: 0 12px 26px rgba(43, 212, 159, 0.22);
}

.remote-download-diagnostic .remote-download-icon {
  color: #dffff4;
  background: #0b4a45;
}

.remote-download-diagnostic span:nth-child(2) small {
  color: #1b625b;
}

.remote-download-diagnostic > svg {
  color: #0b4a45;
}

.remote-version {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 980px) {
  .remote-support-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .remote-downloads {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-download-diagnostic {
    grid-column: 1 / -1;
  }

  .remote-version {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .remote-support {
    padding: 22px 0 8px;
  }

  .remote-support-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 20px 22px;
    text-align: center;
  }

  .remote-support-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
  }

  .remote-support-copy > small {
    justify-content: center;
    text-align: left;
  }

  .remote-support-copy .section-kicker {
    margin-right: auto;
    margin-left: auto;
  }

  .remote-downloads {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .remote-download-diagnostic {
    grid-column: auto;
  }

  .remote-version {
    grid-column: auto;
  }
}

.trust-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 66px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: servicePulse 5s ease-in-out infinite;
}

.trust-list span:nth-child(1) {
  color: #2563eb;
  animation-delay: 0s;
}

.trust-list span:nth-child(2) {
  color: #0f9f76;
  animation-delay: 0.25s;
}

.trust-list span:nth-child(3) {
  color: #0ea5e9;
  animation-delay: 0.5s;
}

.trust-list span:nth-child(4) {
  color: #7c3aed;
  animation-delay: 0.75s;
}

.trust-list span:nth-child(5) {
  color: #ef6655;
  animation-delay: 1s;
}

.trust-list span:hover {
  transform: translateY(-3px);
  border-color: currentColor;
  box-shadow: 0 14px 28px rgba(16, 24, 40, 0.11);
}

.trust-list span svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.services {
  padding-top: 76px;
}

.section {
  padding: 104px 0;
}

.services,
.method,
.offers,
.client-portal,
.contact,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.section-heading {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 46px;
  text-align: center;
}

.section-heading .section-kicker {
  margin-bottom: 14px;
}

.section-heading h2 {
  max-width: 760px;
  margin-inline: auto;
}

.section-heading p:last-child {
  max-width: 680px;
  margin: 18px auto 0;
}

.section-heading h2,
.method h2,
.portal h2,
.contact h2 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
}

.section-heading p:last-child,
.method p,
.portal p,
.contact p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.section-heading p:last-child {
  margin: 18px auto 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card,
.offer-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card {
  position: relative;
  min-height: 250px;
  padding: 30px;
  border-top: 4px solid rgba(37, 99, 235, 0.7);
  overflow: hidden;
  isolation: isolate;
}

.service-card:nth-child(2n) {
  border-top-color: rgba(43, 212, 159, 0.72);
}

.service-card:nth-child(3n) {
  border-top-color: rgba(242, 109, 91, 0.72);
}

.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.service-card::before {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 18%, rgba(37, 99, 235, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), transparent 48%);
  opacity: 0;
}

.service-card::after {
  top: -4px;
  left: 0;
  width: 42%;
  height: 4px;
  border-radius: 0 999px 999px 0;
  background: currentColor;
  transform: translateX(-110%);
}

.service-card:nth-child(2n)::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(43, 212, 159, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(43, 212, 159, 0.08), transparent 48%);
}

.service-card:nth-child(3n)::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(242, 109, 91, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(242, 109, 91, 0.08), transparent 48%);
}

.service-card:hover,
.offer-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: var(--shadow);
}

.service-card:hover {
  transform: translateY(-8px);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover::after {
  transform: translateX(0);
}

.service-card svg,
.offer-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--blue);
}

.service-card svg {
  width: 54px;
  height: 54px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.service-card:nth-child(2n) svg {
  background: rgba(43, 212, 159, 0.1);
  color: var(--mint);
}

.service-card:nth-child(3n) svg {
  background: rgba(242, 109, 91, 0.1);
  color: var(--coral);
}

.service-card:hover svg {
  transform: translateY(-4px) scale(1.06) rotate(-3deg);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.12);
}

.service-card:nth-child(2n):hover svg {
  box-shadow: 0 14px 28px rgba(43, 212, 159, 0.16);
  background: rgba(43, 212, 159, 0.14);
}

.service-card:nth-child(3n):hover svg {
  box-shadow: 0 14px 28px rgba(242, 109, 91, 0.16);
  background: rgba(242, 109, 91, 0.14);
}

.service-card h3,
.offer-card h3,
.timeline-item h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
}

.service-card p,
.offer-card p,
.timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.method {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(25, 199, 223, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(16, 24, 40, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
}

.method-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 56px;
  align-items: center;
}

.method-copy {
  max-width: 520px;
}

.method-copy > p {
  max-width: 500px;
}

.method-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.method-points div {
  min-height: 118px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 42px rgba(16, 24, 40, 0.08);
}

.method-points strong,
.method-points span {
  display: block;
}

.method-points strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-family: Manrope, Inter, sans-serif;
  font-size: 18px;
  line-height: 1.1;
}

.method-points span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.timeline {
  position: relative;
  display: grid;
  gap: 16px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 48px;
  left: 49px;
  width: 2px;
  background: linear-gradient(var(--cyan), rgba(25, 199, 223, 0.1));
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 20px;
  min-height: 138px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.timeline-item span {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #031f27;
  background: var(--cyan);
  box-shadow: 0 0 0 10px rgba(25, 199, 223, 0.11);
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
}

.timeline-content {
  align-self: center;
}

.offers {
  background: linear-gradient(180deg, #ffffff, #f6f9fd);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  padding-top: 16px;
}

.offer-card {
  position: relative;
  min-height: 640px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.offer-card.featured {
  color: var(--white);
  background:
    radial-gradient(circle at 80% 0%, rgba(43, 212, 159, 0.28), transparent 32%),
    linear-gradient(145deg, #102c56, #07152b);
  border-color: rgba(25, 199, 223, 0.36);
}

.popular {
  position: absolute;
  top: -15px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 7px 18px;
  border-radius: 999px;
  background: #bed8ff;
  color: #10233c;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.offer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.09);
}

.offer-icon svg {
  width: 26px;
  height: 26px;
}

.featured .offer-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cyan);
}

.offer-card p {
  min-height: auto;
}

.offer-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 18px 0 4px;
  color: var(--navy);
}

.featured .offer-price {
  color: var(--white);
}

.offer-price span {
  color: #667085;
  font-size: 16px;
  font-weight: 900;
}

.featured .offer-price span,
.featured .offer-price small {
  color: rgba(255, 255, 255, 0.72);
}

.offer-price strong {
  font-size: 54px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1px;
}

.offer-price small {
  color: #667085;
  font-size: 14px;
  font-weight: 800;
}

.offer-price-quote strong {
  font-size: 38px;
  letter-spacing: 0;
}

.offer-posts {
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.offer-commitment {
  margin: 2px 0 10px;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured .offer-posts {
  color: rgba(255, 255, 255, 0.74);
}

.featured .offer-commitment {
  color: rgba(255, 255, 255, 0.65);
}

.offer-card ul {
  display: grid;
  gap: 12px;
  margin: 28px 0 26px;
  padding: 0;
  list-style: none;
}

.offer-card li {
  position: relative;
  display: flex;
  gap: 10px;
  color: #475467;
  font-size: 14px;
  line-height: 1.45;
}

.featured li,
.featured p {
  color: rgba(255, 255, 255, 0.72);
}

.offer-card li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.48);
  color: #2563eb;
  background: transparent;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.offer-card li:not(.offer-label)::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 5px;
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.featured li::before {
  border-color: rgba(190, 216, 255, 0.82);
  color: #bed8ff;
}

.offer-card li.offer-label {
  align-items: center;
  margin-top: 8px;
  color: #10233c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured li.offer-label {
  color: #c9f7ff;
}

.offer-card li.offer-label::before {
  content: none;
}

.offer-card li.offer-label svg {
  width: 20px;
  height: 20px;
  color: #f26d5b;
}

.featured li.offer-label svg {
  color: #c9f7ff;
}

.offer-card li.muted {
  color: #8a95a8;
}

.offer-card li.muted::before {
  color: #8aa0bd;
  border-color: rgba(138, 160, 189, 0.72);
}

.offer-card li.excluded {
  color: #b54d3f;
}

.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
}

.featured .card-link {
  background: var(--cyan);
  color: #031f27;
}

.portal {
  padding: 104px 0;
  color: var(--white);
  background:
    radial-gradient(circle at 90% 20%, rgba(242, 109, 91, 0.2), transparent 26%),
    linear-gradient(135deg, #08101f, #10233c);
}

.portal-inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: center;
}

.portal p {
  color: rgba(255, 255, 255, 0.64);
  margin: 20px 0 32px;
}

.client-portal {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(37, 99, 235, 0.18), transparent 32%),
    linear-gradient(180deg, #0d2142, #0b1b37 62%, #091932);
}

.client-portal-inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  gap: 72px;
}

.client-portal .section-kicker {
  color: #6ea2ff;
}

.client-portal h2 {
  max-width: 560px;
  color: var(--white);
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.08;
}

.client-portal .portal-copy > p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 17px;
  line-height: 1.8;
}

.portal-benefits {
  display: grid;
  gap: 16px;
  margin: 34px 0;
}

.portal-benefits div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.portal-benefits span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, 0.42);
  border-radius: 8px;
  color: #f3c969;
  background: rgba(37, 99, 235, 0.25);
  box-shadow: inset 0 0 18px rgba(37, 99, 235, 0.16);
}

.portal-benefits div:nth-child(2) span {
  color: var(--cyan);
}

.portal-benefits div:nth-child(3) span {
  color: #b9c8ff;
}

.portal-benefits div:nth-child(4) span {
  color: #dfe8ff;
}

.portal-benefits svg {
  width: 20px;
  height: 20px;
}

.portal-benefits p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 700;
}

.client-portal .portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.client-portal .btn {
  min-height: 54px;
  padding-inline: 24px;
  border-radius: 8px;
}

.client-portal .btn-secondary {
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
}

.portal-app-quick {
  max-width: 620px;
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) repeat(2, minmax(130px, .9fr));
  gap: 8px;
  margin-top: 18px;
  padding: 9px;
  border: 1px solid rgba(110, 162, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.portal-app-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 7px 4px 4px;
}

.portal-app-label > img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.portal-app-label > span,
.portal-app-quick button > span {
  min-width: 0;
  display: grid;
  text-align: left;
}

.portal-app-label small,
.portal-app-quick button small {
  color: rgba(255, 255, 255, .5);
  font-size: 8px;
  font-weight: 750;
}

.portal-app-label strong { color: #fff; font-size: 11px; }

.portal-app-quick button {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #fff;
  background: rgba(7, 21, 43, .72);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.portal-app-quick button:hover {
  border-color: rgba(25, 199, 223, .5);
  background: rgba(25, 199, 223, .12);
  transform: translateY(-1px);
}

.portal-app-quick button > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--cyan);
}

.portal-app-quick button strong { font-size: 10px; }

.portal-preview {
  display: grid;
  gap: 18px;
}

.portal-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
}

.portal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 14px;
  color: var(--white);
  font-weight: 900;
}

.portal-panel-head span,
.live-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #9ec2ff;
  background: rgba(37, 99, 235, 0.18);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.live-badge {
  color: var(--mint);
  background: rgba(43, 212, 159, 0.12);
}

.live-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.portal-ticket {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ticket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4b7dff;
}

.ticket-dot.urgent {
  background: #f26d5b;
}

.ticket-dot.resolved {
  background: #4b7dff;
}

.ticket-dot.open {
  background: var(--blue);
}

.portal-ticket strong {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.portal-ticket small {
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
}

.portal-ticket em {
  min-width: 68px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #9ec2ff;
  background: rgba(37, 99, 235, 0.22);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.portal-ticket em.is-resolved {
  color: var(--mint);
  background: rgba(43, 212, 159, 0.14);
}

.portal-ticket em.is-open {
  color: var(--amber);
  background: rgba(243, 201, 105, 0.14);
}

.stats-panel {
  padding-bottom: 22px;
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 26px;
}

.portal-stats div {
  min-height: 86px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.portal-stats strong {
  color: var(--white);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.portal-stats span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-board {
  padding: 24px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.26);
}

.helpdesk {
  background:
    radial-gradient(circle at 86% 16%, rgba(43, 212, 159, 0.2), transparent 25%),
    radial-gradient(circle at 12% 78%, rgba(37, 99, 235, 0.18), transparent 28%),
    linear-gradient(135deg, #07101d, #10233c 62%, #0b1728);
}

.helpdesk-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
  gap: 48px;
  align-items: start;
}

.helpdesk-copy {
  position: sticky;
  top: 118px;
}

.helpdesk-steps {
  display: grid;
  gap: 12px;
  margin: 28px 0;
}

.helpdesk-steps div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.helpdesk-steps span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #032129;
  background: var(--cyan);
  font-family: Manrope, Inter, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.helpdesk-steps strong,
.helpdesk-steps small {
  display: block;
}

.helpdesk-steps strong {
  align-self: end;
  line-height: 1.1;
}

.helpdesk-steps small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
}

.helpdesk-console {
  display: grid;
  gap: 18px;
}

.remote-request-card {
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid rgba(25, 199, 223, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 10%, rgba(25, 199, 223, 0.16), transparent 28%),
    linear-gradient(135deg, #ffffff, #f7fbff);
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
}

.remote-request-copy {
  display: grid;
  gap: 5px;
}

.remote-request-copy > span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.remote-request-copy h3 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.2;
}

.remote-request-copy p {
  max-width: 560px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.remote-request-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #031f27;
  background: var(--cyan);
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 14px 28px rgba(25, 199, 223, 0.26);
  cursor: pointer;
}

.remote-request-btn svg,
.remote-request-copy svg {
  width: 15px;
  height: 15px;
}

.ticket-form.is-prefilled {
  animation: requestReady 1.4s ease;
}

@keyframes requestReady {
  0%,
  100% {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  }
  35% {
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.16),
      0 0 0 5px rgba(25, 199, 223, 0.18);
  }
}

.ticket-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.ticket-form-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.ticket-form-head span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ticket-form-head h3 {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
}

.ticket-form-head svg {
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
}

.remote-mode-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(25, 199, 223, 0.28);
  border-radius: 8px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.09);
}

.remote-mode-banner svg {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 8px;
  color: #032129;
  background: var(--cyan);
}

.remote-mode-banner strong,
.remote-mode-banner span {
  display: block;
}

.remote-mode-banner strong {
  color: var(--navy);
  font-size: 14px;
}

.remote-mode-banner span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.ticket-form label,
.ticket-form legend {
  display: grid;
  gap: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.ticket-form .full {
  grid-column: 1 / -1;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--ink);
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ticket-form input,
.ticket-form select {
  height: 50px;
  padding: 0 14px;
}

.ticket-form textarea {
  resize: vertical;
  min-height: 126px;
  padding: 14px;
}

.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus {
  border-color: rgba(25, 199, 223, 0.65);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.12);
}

.priority-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.priority-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.priority-options label {
  display: block;
}

.priority-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.priority-options span {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: #344054;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.priority-options span svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.priority-options small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.priority-options input:checked + span {
  border-color: rgba(25, 199, 223, 0.75);
  background: rgba(25, 199, 223, 0.1);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.1);
}

.helpdesk-board {
  background: rgba(255, 255, 255, 0.07);
}

.support-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.support-flow span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 900;
}

.support-flow span.is-active {
  color: #032129;
  border-color: transparent;
  background: var(--mint);
}

.ticket-confirmation {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(43, 212, 159, 0.28);
  border-radius: 8px;
  background: rgba(43, 212, 159, 0.1);
}

.ticket-confirmation[hidden] {
  display: none;
}

.ticket-confirmation strong,
.ticket-confirmation span {
  display: block;
}

.ticket-confirmation span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.ticket-confirmation a {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #032129;
  background: var(--mint);
  font-size: 12px;
  font-weight: 900;
}

.ticket-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ticket-list-head span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ticket-list-head button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ticket-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ticket-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
}

.ticket-record {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}

.ticket-record:first-child {
  border-top: 1px solid var(--line);
}

.ticket-record-dot {
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.ticket-record.is-urgente .ticket-record-dot {
  background: var(--amber);
}

.ticket-record.is-critique .ticket-record-dot {
  background: var(--coral);
}

.ticket-record strong,
.ticket-record span {
  display: block;
}

.ticket-record strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.ticket-record span,
.ticket-record small {
  color: var(--muted);
  font-size: 13px;
}

.ticket-record small {
  text-align: right;
  white-space: nowrap;
}

.support-page {
  background: #f7f9fc;
}

.support-page .site-header.scrolled .nav,
.support-page .nav {
  background: rgba(7, 21, 43, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.support-page .site-header.scrolled .logo-hero {
  opacity: 1;
}

.support-page .site-header.scrolled .logo-scrolled {
  opacity: 0;
}

.support-page .site-header.scrolled .nav-panel a {
  color: rgba(255, 255, 255, 0.76);
}

.support-page .site-header.scrolled .language-switch {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.support-page .site-header.scrolled .language-switch button {
  color: rgba(255, 255, 255, 0.78);
}

.support-page .site-header.scrolled .language-switch button.is-active {
  color: #032129;
}

/* ── Auth page (nouvelle version full-height 2 colonnes) ─────────────────── */
.auth-page {
  position: relative;
  min-height: calc(100dvh - 88px);
  margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}

/* Colonne gauche branding */
.auth-brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 56px;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(37, 99, 235, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(25, 199, 223, 0.22), transparent 45%),
    linear-gradient(145deg, #050e1c, #0c1e38 60%, #071627);
  color: var(--white);
}


.auth-brand-inner {
  position: relative;
  z-index: 2;
  max-width: 440px;
  display: grid;
  gap: 20px;
}

.auth-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-logo { height: 36px; }

.auth-logo-text {
  font-size: 22px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.5px;
}

.auth-logo-text strong { font-weight: 900; color: var(--cyan); }

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(25, 199, 223, 0.35);
  background: rgba(25, 199, 223, 0.1);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  width: fit-content;
}

.auth-brand-badge svg { width: 14px; height: 14px; }

.auth-brand-title {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -1.5px;
}

.auth-brand-title span { color: var(--cyan); }

.auth-brand-desc {
  margin: 0;
  color: rgba(255,255,255,0.58);
  font-size: 15px;
  line-height: 1.7;
}

.auth-trust-list {
  display: grid;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 4px;
}

.auth-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 13.5px;
}

.auth-trust-item svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cyan); }

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
  width: fit-content;
  margin-top: 4px;
}

.auth-back-link:hover { color: rgba(255,255,255,0.75); }
.auth-back-link svg { width: 14px; height: 14px; }

/* Colonne droite formulaires */
.auth-forms-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 56px;
  background: #f2f5fa;
  overflow-y: auto;
}

/* Tabs */
.auth-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: #dde3ed;
  margin-bottom: 18px;
  width: 100%;
  max-width: 520px;
}

.auth-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-tab svg { width: 15px; height: 15px; }

.auth-tab.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.1);
}

/* Auth card */
.auth-card {
  display: grid;
  gap: 18px;
  padding: 56px 32px;
  border: 1px solid #dde3ed;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 4px 32px rgba(16, 24, 40, 0.07);
  max-width: 520px;
}

.auth-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.auth-card-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--cyan);
  background: rgba(25, 199, 223, 0.1);
  border: 1px solid rgba(25, 199, 223, 0.2);
}

.auth-card-icon.login-icon {
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}

.auth-card-icon.recover-icon {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.18);
}

.auth-card-icon svg { width: 24px; height: 24px; }

.auth-card-eyebrow {
  margin: 0 0 4px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-card-title {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* Champs */
.auth-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field-full {
  grid-column: 1 / -1;
}

.auth-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.auth-field-label svg { width: 13px; height: 13px; color: var(--muted); }

.auth-field input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #dce2ea;
  border-radius: 10px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fafbfd;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-field input:focus {
  border-color: rgba(25, 199, 223, 0.65);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.1);
}

.auth-field input::placeholder { color: #b8c1cc; }

.auth-card-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -4px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.auth-link-btn {
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.auth-link-btn:hover {
  color: var(--cyan);
}

.auth-mini-copy {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.65;
}

.auth-back-login {
  justify-self: center;
}

.turnstile-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 65px;
  margin: -2px 0 0;
  overflow: hidden;
}

.turnstile-wrap .cf-turnstile {
  max-width: 300px;
  transform-origin: top center;
}

.turnstile-wrap iframe {
  max-width: 100%;
}

.auth-security-strip {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.auth-security-strip span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  color: #526072;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.auth-security-strip svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
  flex: 0 0 auto;
}

/* Bouton submit */
.auth-submit-btn {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0e2342, #1a3a6b);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(14, 35, 66, 0.3);
}

.auth-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(14, 35, 66, 0.38);
}

.auth-submit-btn svg { width: 18px; height: 18px; }

/* Hint / status */
.auth-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: #4a5568;
  font-size: 12px;
  line-height: 1.6;
}

.auth-hint svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--blue); margin-top: 1px; }
.auth-hint.is-success { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.2); color: #065f46; }
.auth-hint.is-success svg { color: #059669; }
.auth-hint.is-warning { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.18); color: #991b1b; }
.auth-hint.is-warning svg { color: #dc2626; }

/* Anciens styles desactives */
.support-hero { display: none; }
.auth-stack, .client-login-card { display: none; }

.login-status {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(37, 99, 235, 0.06);
  font-size: 13px;
}

.login-status.is-warning {
  border-color: rgba(242, 109, 91, 0.24);
  color: #8a3a2d;
  background: rgba(242, 109, 91, 0.09);
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(16, 24, 40, 0.06);
  min-width: 0;
  overflow: hidden;
}

.workspace-topbar span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-topbar h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.logout-btn {
  min-width: 150px;
  padding: 0 18px;
}

.ticket-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ticket-checkbox span {
  color: #344054;
  font-size: 13px;
}

.attachment-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.attachment-field input[type="file"] {
  height: auto;
  padding: 13px;
  cursor: pointer;
}

.client-workspace {
  background: var(--paper);
  padding: 32px 0 48px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

.support-page .client-workspace {
  padding-top: 120px;
  padding-bottom: 56px;
}

.support-page .client-workspace > .container {
  width: min(1520px, calc(100vw - 64px));
  max-width: 1520px;
  margin-inline: auto;
}

.support-page .workspace-topbar,
.support-page .client-dashboard,
.support-page .admin-workspace {
  width: 100%;
}

@media (max-width: 980px) {
  .support-page .client-workspace {
    padding-top: 104px;
  }

  .support-page .client-workspace > .container {
    width: min(100% - 32px, 1180px);
  }
}

@media (max-width: 680px) {
  .support-page .client-workspace {
    padding-top: 92px;
    padding-bottom: 40px;
  }

  .support-page .client-workspace > .container {
    width: min(100% - 24px, 1180px);
  }
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
  align-items: start;
}

.client-dashboard {
  display: grid;
  gap: 24px;
}

.client-summary {
  position: static;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  align-items: stretch;
}

.client-history {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.client-history .ticket-top span,
.client-history .ticket p span,
.client-history .ticket small,
.client-history .board-stats span,
.client-history .ticket-list-head span,
.client-history .ticket-record span,
.client-history .ticket-record small {
  color: var(--muted);
}

.client-history .ticket-top strong {
  color: #0f9f76;
}

.client-history .board-stats div {
  border-color: var(--line);
  background: #fbfcfe;
}

.client-history .board-stats strong {
  color: var(--ink);
}

.client-history .ticket-list-head {
  border-top-color: var(--line);
}

.client-history .ticket-empty {
  color: var(--muted);
  border-color: rgba(16, 24, 40, 0.16);
}

.client-new-ticket {
  max-width: 920px;
}

.client-new-ticket .remote-request-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

.client-new-ticket .ticket-form {
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.secure-dashboard {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.secure-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.secure-dashboard-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.secure-dashboard-head svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.secure-dashboard-head strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 12px;
}

.secure-empty {
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px dashed rgba(37, 99, 235, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(43, 212, 159, 0.06));
}

.secure-empty > svg {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.09);
}

.secure-empty h2 {
  font-size: 30px;
}

.secure-empty p {
  margin: 0;
  color: var(--muted);
}

.secure-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.secure-metrics div {
  min-height: 82px;
  display: grid;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.secure-metrics strong,
.secure-metrics span {
  display: block;
}

.secure-metrics strong {
  color: var(--ink);
  font-size: 15px;
}

.secure-metrics span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.admin-workspace {
  display: grid;
  gap: 24px;
}

.admin-overview {
  position: static;
}

.admin-clients-panel {
  position: static;
}

.admin-client-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-client-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.admin-client-card strong,
.admin-client-card span,
.admin-client-card small {
  display: block;
}

.admin-client-card strong {
  color: var(--ink);
  font-size: 15px;
}

.admin-client-card span {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.admin-client-card small {
  color: var(--muted);
  font-size: 12px;
}

.admin-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
}

.admin-ticket-board {
  color: var(--white);
  background:
    radial-gradient(circle at 88% 10%, rgba(43, 212, 159, 0.16), transparent 26%),
    linear-gradient(135deg, #07152b, #10233c);
}

.admin-ticket-card {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
}

.admin-ticket-card:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-ticket-card strong,
.admin-ticket-card span,
.admin-ticket-card small {
  display: block;
}

.admin-ticket-card strong {
  font-size: 15px;
}

.admin-ticket-card span,
.admin-ticket-card small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.admin-ticket-card.is-selected strong {
  color: var(--cyan);
}

.ticket-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.ticket-badge svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  position: relative;
  top: -0.5px;
}

/* ─ Priorites ─ */
.ticket-badge.priority-normale {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.25);
}

.ticket-badge.priority-urgente {
  color: #92400e;
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.3);
}

.ticket-badge.priority-critique {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.11);
  border-color: rgba(239, 68, 68, 0.28);
  animation: critiquePulse 2s ease infinite;
}

@keyframes critiquePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%       { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
}

.admin-ticket-card.priority-critique,
.admin-ticket-card.priority-critical {
  border-color: rgba(242, 109, 91, 0.42);
  box-shadow: inset 4px 0 0 rgba(242, 109, 91, 0.9);
}

.admin-ticket-card.priority-urgente,
.admin-ticket-card.priority-urgent {
  border-color: rgba(243, 201, 105, 0.42);
  box-shadow: inset 4px 0 0 rgba(243, 201, 105, 0.9);
}

.admin-ticket-card.priority-normale,
.admin-ticket-card.priority-normal {
  box-shadow: inset 4px 0 0 rgba(25, 199, 223, 0.78);
}

.ticket-record button,
.ticket-record a {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid rgba(25, 199, 223, 0.36);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(25, 199, 223, 0.08);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ticket-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ticket-detail-panel {
  grid-column: 2 / -1;
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: var(--white);
  color: #344054;
  font-size: 13px;
}

.ticket-detail-panel[hidden] {
  display: none;
}

.ticket-detail-panel p {
  margin: 0;
}

.ticket-detail-panel strong {
  font-size: 13px;
}

.ticket-detail-interventions {
  display: grid;
  gap: 8px;
}

.ticket-detail-interventions article {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.ticket-detail-interventions span {
  color: var(--ink);
  font-weight: 900;
}

.ticket-detail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-detail-attachments a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.intervention-form {
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.ticket {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ticket > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
}

.ticket.urgent > div {
  background: var(--coral);
}

.ticket.done > div {
  background: var(--mint);
}

.ticket p {
  margin: 0;
}

.ticket p strong,
.ticket p span {
  display: block;
}

.ticket p strong {
  font-size: 15px;
}

.ticket p span,
.ticket small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.board-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.board-stats div {
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}

.board-stats strong,
.board-stats span {
  display: block;
}

.board-stats strong {
  font-size: 28px;
  line-height: 1;
}

.board-stats span {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.contact {
  background: var(--paper);
}

.contact-inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 56px;
  align-items: start;
}

.contact-copy {
  position: sticky;
  top: 118px;
}

.contact-copy p {
  margin: 18px 0 28px;
}

.contact-links {
  display: grid;
  gap: 12px;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-weight: 800;
}

.contact-links svg {
  color: var(--blue);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.contact-form .full {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--ink);
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input,
.contact-form select {
  height: 50px;
  padding: 0 14px;
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
  padding: 14px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.submit-btn {
  min-height: 54px;
  border: 0;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
}

.footer {
  padding: 46px 0;
  color: rgba(255, 255, 255, 0.66);
  background: #07101d;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: center;
}

.footer img {
  width: 150px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
}

.footer p {
  margin: 0;
}

.footer-experience {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid rgba(25, 199, 223, 0.3);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(25, 199, 223, 0.08);
  font-size: 13px;
}

.footer-emblem {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .footer-emblem img {
  width: auto;
  height: 58px;
  max-width: 210px;
  margin: 0;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.footer .footer-emblem img:hover {
  opacity: 1;
}

.footer-emblem ~ .copyright {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
  margin-top: -4px;
  text-align: center;
}

.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease,
    color 0.22s ease;
}

.footer-socials a:hover {
  transform: translateY(-3px);
  color: #04121f;
  border-color: var(--cyan);
  background: var(--cyan);
}

.footer-socials svg {
  width: 17px;
  height: 17px;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-weight: 800;
}

.footer-links a:hover {
  color: var(--cyan);
}

.copyright {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

.copyright strong {
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: 0.03em;
}

.copyright span:last-child {
  color: rgba(255, 255, 255, 0.78);
}

.footer-app {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(330px, .9fr) auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid rgba(25, 199, 223, .2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 120%, rgba(25, 199, 223, .17), transparent 18rem),
    linear-gradient(135deg, rgba(14, 35, 66, .95), rgba(7, 24, 45, .98));
  box-shadow: 0 22px 65px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.footer-app-intro {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer .footer-app-icon {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .27);
}

.footer-app-intro > div { min-width: 0; }
.footer-app-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5ddce8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-app-kicker svg { width: 13px; height: 13px; }
.footer-app h2 {
  margin: 5px 0 4px;
  color: #fff;
  font: 800 20px/1.2 Manrope, sans-serif;
  letter-spacing: -.025em;
}
.footer-app .footer-app-intro p {
  margin: 0;
  color: rgba(255, 255, 255, .57);
  font-size: 10px;
  line-height: 1.55;
}

.footer-app-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.footer-app-platforms button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.footer-app-platforms button:hover {
  border-color: rgba(25, 199, 223, .44);
  background: rgba(25, 199, 223, .1);
  transform: translateY(-1px);
}

.footer-platform-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #081a2e;
  background: #61dce7;
}
.footer-platform-icon svg { width: 18px; height: 18px; }
.footer-app-platforms button > span:nth-child(2) { min-width: 0; display: grid; }
.footer-app-platforms small { color: rgba(255, 255, 255, .48); font-size: 8px; font-weight: 700; }
.footer-app-platforms strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.footer-app-platforms button > svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .4); }

.footer-app-qr {
  display: grid;
  gap: 6px;
}
.footer-app-qr-open {
  display: grid;
  grid-template-columns: 86px auto;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}
.footer .footer-app-qr img {
  width: 86px;
  height: 86px;
  margin: 0;
  padding: 5px;
  border-radius: 11px;
  background: #fff;
}
.footer-app-qr-open span { display: grid; gap: 2px; }
.footer-app-qr-open strong { color: #fff; font-size: 10px; }
.footer-app-qr-open small { color: rgba(255, 255, 255, .47); font-size: 8px; }
.footer-app-qr-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 3px;
  color: rgba(255, 255, 255, .55);
  font-size: 8px;
  font-weight: 750;
  text-decoration: none;
}
.footer-app-qr-download:hover { color: var(--cyan); }
.footer-app-qr-download svg { width: 11px; height: 11px; }

.scroll-top {
  position: fixed;
  right: 286px;
  bottom: 31px;
  z-index: 42;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 199, 223, 0.32);
  border-radius: 50%;
  color: #032129;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.16);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.scroll-top:hover {
  border-color: var(--cyan);
  transform: translateY(-3px) scale(1);
}

.scroll-top svg {
  width: 20px;
  height: 20px;
}

/* Assistant ITDesk : voir le bloc dedie en fin de fichier. */

/* @keyframes float : voir le bloc Animations en fin de fichier. */

@keyframes servicePulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card svg,
  .service-card::before,
  .service-card::after,
  .trust-list span,
  .hero-slide.is-active {
    animation: none;
    transition: none;
  }
}

@media (max-width: 980px) {
  .nav {
    min-height: 66px;
    padding: 0 18px;
  }

  .brand {
    margin-right: auto;
  }

  .language-switch {
    position: absolute;
    top: 50%;
    right: 70px;
    z-index: 2;
    order: initial;
    margin: 0;
    transform: translateY(-50%);
  }

  .nav-toggle {
    display: inline-flex;
    order: 3;
    position: relative;
    margin-left: auto;
    z-index: 3;
    margin-left: 0;
    transition: background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
  }

  .site-header.scrolled .nav-toggle {
    background: rgba(16, 24, 40, 0.06);
  }

  .nav-toggle[aria-expanded="true"],
  .site-header.scrolled .nav-toggle[aria-expanded="true"] {
    color: #04121f;
    background: var(--cyan);
    box-shadow: 0 10px 26px rgba(25, 199, 223, 0.32);
  }

  .nav-cta {
    display: none;
  }

  .parent-home-link { display: none !important; }

  /* ── Menu mobile : panneau lateral ──────────────────────────────────────── */
  body.nav-open .site-header {
    z-index: 1000;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(3, 12, 26, 0.6);
    backdrop-filter: blur(3px);
    animation: nav-scrim-in 0.3s ease both;
  }

  @keyframes nav-scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .nav-panel {
    order: 4;
    position: fixed;
    z-index: 2;
    inset: 0 0 0 auto;
    left: auto;
    width: min(340px, 86vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 18px 26px;
    border: 0;
    border-left: 1px solid rgba(25, 199, 223, 0.16);
    border-radius: 0;
    background:
      radial-gradient(circle at 112% 4%, rgba(25, 199, 223, 0.22), transparent 34%),
      linear-gradient(180deg, #112a4c 0%, #08182f 100%);
    box-shadow: -24px 0 70px rgba(2, 10, 24, 0.5);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    pointer-events: auto;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.45s;
  }

  .nav-panel.is-open {
    visibility: visible;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s;
  }

  .mobile-nav-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    min-height: 104px;
    padding: 18px 62px 16px 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-nav-head img {
    display: block;
    width: 190px;
    height: auto;
    max-height: none;
    margin: 0;
  }

  .mobile-nav-head span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .nav-panel .parent-home-mobile,
  .site-header.scrolled .nav-panel .parent-home-mobile {
    display:flex!important;gap:11px;color:#8ff4ff;background:rgba(25,199,223,.1);border-color:rgba(25,199,223,.22);
  }
  .nav-panel .parent-home-mobile svg { width:19px;height:19px;flex:0 0 auto; }
  .nav-panel .parent-home-mobile span { display:inline!important; }

  .nav-panel a,
  .site-header.scrolled .nav-panel a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
  }

  .nav-panel a:hover,
  .site-header.scrolled .nav-panel a:hover {
    color: #fff;
    background: rgba(25, 199, 223, 0.12);
    border-color: rgba(25, 199, 223, 0.26);
    transform: none;
  }

  .nav-panel a.is-active,
  .site-header.scrolled .nav-panel a.is-active {
    color: var(--cyan);
    background: linear-gradient(90deg, rgba(25, 199, 223, 0.18), rgba(25, 199, 223, 0.04));
    border-color: rgba(25, 199, 223, 0.32);
  }

  .nav-panel a::before,
  .nav-panel a::after {
    display: none;
  }

  .mobile-nav-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 26px 12px 0;
    text-align: center;
  }

  .mobile-nav-signature img {
    display: block;
    width: min(168px, 68%);
    height: auto;
    margin: 0;
    opacity: 0.88;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  }

  .nav-access { width: 100%; }
  .nav-access summary,
  .site-header.scrolled .nav-access summary {
    min-height: 54px;
    width: 100%;
    justify-content: space-between;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    font-weight: 600;
  }
  .nav-access[open] summary,
  .nav-access summary:hover,
  .site-header.scrolled .nav-access[open] summary,
  .site-header.scrolled .nav-access summary:hover {
    color: var(--cyan);
    background: rgba(25, 199, 223, .12);
    border-color: rgba(25, 199, 223, .26);
  }
  .nav-access-menu {
    position: static;
    width: 100%;
    padding: 6px 8px 10px 18px;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.035);
    box-shadow: none;
    transform: none;
  }
  .nav-panel .nav-access-menu a,
  .site-header.scrolled .nav-panel .nav-access-menu a {
    min-height: 56px;
    grid-template-columns: 34px minmax(0,1fr);
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    color: rgba(255,255,255,.88);
  }
  .nav-panel .nav-access-menu a:hover { color: #fff; background: rgba(25,199,223,.12); }
  .nav-access-menu small { color: rgba(255,255,255,.52); }

  .nav-access-menu strong { font-size: 13px; }

  .hero-inner,
  .section-heading,
  .method-inner,
  .helpdesk-inner,
  .support-hero-inner,
  .workspace-grid,
  .auth-stack,
  .admin-grid,
  .portal-inner,
  .client-portal-inner,
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 118px;
    padding-bottom: 58px;
  }

  .hero-visual {
    display: none;
  }

  .service-grid,
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-copy {
    position: static;
  }

  .helpdesk-copy {
    position: static;
  }

  .secure-dashboard {
    position: static;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-app {
    grid-template-columns: minmax(260px, 1fr) minmax(330px, 1fr);
  }

  .footer-app-qr {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 28px, 1180px);
  }

  .brand img {
    width: 100%;
    height: 100%;
  }

  .brand {
    width: 172px;
    height: 48px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 58px;
  }

  h1 {
    font-size: 40px;
  }

  .hero-text {
    font-size: 16px;
  }

  .metrics,
  .service-grid,
  .offer-grid,
  .portal-stats,
  .auth-security-strip,
  .board-stats,
  .ticket-form,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .metrics div {
    min-height: 72px;
    padding: 10px 9px;
  }

  .metrics strong {
    font-size: 21px;
  }

  .metrics span {
    font-size: 11px;
    line-height: 1.35;
  }

  .hero-visual {
    display: none;
  }

  .hero-slider {
    inset: 0;
  }

  .hero-slide {
    width: 100%;
    max-height: 250px;
  }

  .hero-dots {
    display: none;
  }

  .section,
  .portal {
    padding: 74px 0;
  }

  .support-hero {
    min-height: auto;
    padding: 118px 0 58px;
  }

  .trust-band {
    padding-bottom: 24px;
  }

  .trust-list {
    grid-template-columns: 1fr;
    justify-content: stretch;
    min-height: auto;
  }

  .trust-list span {
    min-height: 52px;
    justify-content: flex-start;
    padding: 0 15px;
    font-size: 12px;
  }

  .services {
    padding-top: 64px;
  }

  .section-heading {
    gap: 16px;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 14px;
    padding: 24px;
  }

  .timeline::before {
    display: none;
  }

  .method-points {
    grid-template-columns: 1fr;
  }

  .offer-card {
    min-height: auto;
    padding-bottom: 32px;
  }

  .client-portal {
    padding: 76px 0;
  }

  .client-portal-inner {
    gap: 44px;
  }

  .portal-preview {
    max-width: 640px;
  }

  .portal-ticket {
    grid-template-columns: auto 1fr;
  }

  .portal-ticket em {
    grid-column: 2;
    width: fit-content;
  }

  .client-portal .portal-actions {
    display: grid;
  }

  .remote-request-card {
    align-items: stretch;
    flex-direction: column;
  }

  .remote-request-btn {
    width: 100%;
  }

  .contact-form .full {
    grid-column: auto;
  }

  .ticket-form .full {
    grid-column: auto;
  }

  .priority-options,
  .support-flow {
    grid-template-columns: 1fr;
  }

  .ticket-record {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .ticket-record small {
    grid-column: 2;
    text-align: left;
  }

  .secure-metrics {
    grid-template-columns: 1fr;
  }

  .admin-client-list {
    grid-template-columns: 1fr;
  }

  .workspace-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .logout-btn {
    width: 100%;
  }

  .client-login-card,
  .secure-dashboard,
  .ticket-form,
  .ticket-board {
    padding: 20px;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .portal-app-quick {
    grid-template-columns: 1fr 1fr;
  }

  .portal-app-label {
    grid-column: 1 / -1;
  }

  .footer-app {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .footer-app-platforms {
    grid-template-columns: 1fr;
  }

  .footer-app-qr {
    grid-column: auto;
    justify-self: start;
  }

  .scroll-top {
    right: 84px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    z-index: 59;
  }

  .ai-chat-panel {
    width: calc(100vw - 28px);
    max-height: min(640px, calc(100dvh - 96px));
  }
}

/* Accueil mobile : les deux badges restent dans le cadre, les appels a
   l'action occupent une largeur coherente et les indicateurs ne debordent
   plus sur les telephones etroits. */
@media (max-width: 680px) {
  .hero-copy,
  .hero-badges {
    min-width: 0;
  }

  .hero-badges {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-badges .eyebrow,
  .hero-experience {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 9px 12px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }

  .hero-badges .eyebrow {
    letter-spacing: 0.12em;
  }

  .hero-badges .eyebrow > span:first-child,
  .hero-experience svg {
    flex: 0 0 auto;
  }

  .hero-experience {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-right: 16px;
    padding-left: 16px;
    text-align: center;
    white-space: normal;
  }

  .metrics div {
    min-width: 0;
    overflow: hidden;
  }

  .metrics span {
    overflow-wrap: anywhere;
  }

  body.ai-open .scroll-top {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(36px, 10.2vw, 40px);
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Helpdesk Professional Upgrades ─────────────────────────────────────────── */

/* Nav actions wrapper */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Nav user bloc (connecte) ────────────────────────────────────────────────── */
.nav-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: default;
}

.nav-user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #032129;
  background: var(--cyan);
  font-size: 14px;
  font-weight: 900;
}

.nav-user-avatar svg {
  width: 18px;
  height: 18px;
}

.nav-user-avatar.has-initial svg {
  display: none;
}

.nav-user-text {
  display: grid;
  line-height: 1.2;
}

.nav-user-name {
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-user-role {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KPI bar client ──────────────────────────────────────────────────────────── */
.client-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kpi-card:hover {
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
  transform: translateY(-2px);
}

.kpi-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.kpi-icon svg {
  width: 22px;
  height: 22px;
}

.kpi-total .kpi-icon { color: var(--blue); background: rgba(37, 99, 235, 0.1); }
.kpi-open .kpi-icon { color: #d97706; background: rgba(243, 201, 105, 0.18); }
.kpi-response .kpi-icon { color: #0891b2; background: rgba(25, 199, 223, 0.12); }
.kpi-secure .kpi-icon { color: #059669; background: rgba(43, 212, 159, 0.12); }

.kpi-body {
  display: grid;
  gap: 2px;
}

.kpi-body strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.kpi-body span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* ── Section bar (tickets list header) ───────────────────────────────────────── */
.client-tickets-section {
  display: grid;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}

.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-bar-left svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.section-bar-left > strong {
  font-size: 15px;
  color: var(--ink);
}

.count-chip {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.1);
  font-size: 12px;
  font-weight: 900;
}

.status-dot-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.status-dot-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: 0 0 auto;
}

/* ── Ticket confirmation banner ──────────────────────────────────────────────── */
.ticket-confirmation {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(43, 212, 159, 0.32);
  border-radius: 10px;
  background: rgba(43, 212, 159, 0.07);
  box-shadow: 0 16px 38px rgba(5, 150, 105, 0.12);
  scroll-margin-top: 110px;
}

.ticket-confirmation.is-visible {
  animation: confirmPulse 1.2s ease;
}

@keyframes confirmPulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 212, 159, 0.32); }
  45% { box-shadow: 0 0 0 7px rgba(43, 212, 159, 0.12); }
  100% { box-shadow: 0 16px 38px rgba(5, 150, 105, 0.12); }
}

.confirm-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #059669;
  background: rgba(43, 212, 159, 0.16);
}

.confirm-icon svg {
  width: 22px;
  height: 22px;
}

.confirm-body {
  flex: 1;
  display: grid;
  gap: 3px;
}

.confirm-body strong {
  color: #065f46;
  font-size: 14px;
}

.confirm-body span {
  color: #047857;
  font-size: 13px;
  line-height: 1.4;
}

.confirm-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(43, 212, 159, 0.4);
  border-radius: 999px;
  color: #065f46;
  background: rgba(43, 212, 159, 0.12);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease;
}

.confirm-wa:hover {
  background: rgba(43, 212, 159, 0.22);
}

.confirm-wa svg {
  width: 14px;
  height: 14px;
}

/* Topbar actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--white);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn.is-active {
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  border-color: rgba(25, 199, 223, 0.4);
}

.tab-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Notification bell ─────────────────────────────────────────────────────── */
.notif-bell {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.2s ease;
}

.notif-bell:hover {
  background: rgba(255, 255, 255, 0.18);
}

.notif-bell svg {
  width: 20px;
  height: 20px;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: #032129;
  background: var(--coral);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.notif-panel {
  position: absolute;
  top: 88px;
  right: 5vw;
  z-index: 60;
  width: min(380px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.22);
  overflow: hidden;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}

.notif-panel-head strong {
  font-size: 14px;
}

.notif-panel-head button {
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
}

.notif-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notif-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
}

.notif-item:last-child {
  border-bottom: 0;
}

.notif-item.is-unread {
  background: rgba(25, 199, 223, 0.05);
}

.notif-item:hover {
  background: #f7f9fc;
}

.notif-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
}

.notif-icon svg {
  width: 18px;
  height: 18px;
}

.notif-content p {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.notif-content small {
  color: var(--muted);
  font-size: 11px;
}

.notif-item.is-unread .notif-content p {
  font-weight: 700;
}

/* ── Modal ticket details ──────────────────────────────────────────────────── */
.ticket-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 21, 43, 0.72);
  backdrop-filter: blur(4px);
}

.ticket-modal {
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.ticket-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}

.modal-ref {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  margin-bottom: 6px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.14);
  font-size: 12px;
  font-weight: 900;
}

.ticket-modal-head h3 {
  margin: 0;
  font-size: 18px;
}

.ticket-modal-head button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.ticket-modal-head button:hover {
  background: #f7f9fc;
}

.ticket-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: grid;
  gap: 20px;
  align-content: start;
}

.modal-loading {
  text-align: center;
  color: var(--muted);
  padding: 40px;
}

.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.modal-info-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.modal-info-row > strong {
  font-size: 14px;
}

.modal-section {
  display: grid;
  gap: 12px;
}

.modal-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: #344054;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-section h4 svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.modal-section p {
  margin: 0;
  color: #344054;
  line-height: 1.6;
  font-size: 14px;
}

.modal-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(25, 199, 223, 0.32);
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.08);
  font-size: 12px;
  font-weight: 900;
  transition: background 0.2s ease;
}

.attachment-link:hover {
  background: rgba(25, 199, 223, 0.16);
}

.attachment-link svg {
  width: 14px;
  height: 14px;
}

body.modal-open {
  overflow: hidden;
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.modal-timeline,
.timeline-list {
  display: grid;
  gap: 0;
  position: relative;
}

.modal-timeline::before,
.timeline-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: var(--line);
}

.timeline-entry {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  position: relative;
}

.timeline-entry:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--line);
  position: relative;
  z-index: 1;
}

.timeline-dot.status-cloture { background: var(--mint); }
.timeline-dot.status-resolu { background: #10b981; }
.timeline-dot.status-en-cours,
.timeline-dot.status-en-intervention { background: var(--cyan); }
.timeline-dot.status-en-attente-client { background: var(--amber); }
.timeline-dot.status-ouvert,
.timeline-dot.status-en-triage { background: var(--blue); }
.timeline-dot.status-recu { background: #94a3b8; }

.timeline-content {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  margin-top: 2px;
}

.timeline-entry-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.timeline-entry-head strong {
  font-size: 14px;
  color: var(--ink);
}

.timeline-entry-head small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.timeline-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 11px;
  font-weight: 900;
}

.timeline-notes {
  margin: 4px 0 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.timeline-admin {
  color: var(--muted);
  font-size: 11px;
}

.timeline-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}

/* Timeline dans la form admin */
.ticket-timeline-wrap {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline-head svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

/* ── Admin KPI bar ────────────────────────────────────────────────────────── */
.admin-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-kpi-card:hover {
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1);
  transform: translateY(-2px);
}

.admin-kpi-card.akpi-alert {
  border-color: rgba(242, 109, 91, 0.22);
  background: rgba(242, 109, 91, 0.03);
}

.admin-kpi-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.admin-kpi-icon svg { width: 22px; height: 22px; }

.akpi-clients { color: var(--blue); background: rgba(37, 99, 235, 0.1); }
.akpi-tickets { color: #0891b2; background: rgba(25, 199, 223, 0.12); }
.akpi-open    { color: #d97706; background: rgba(243, 201, 105, 0.18); }
.akpi-done    { color: #059669; background: rgba(43, 212, 159, 0.12); }

.admin-kpi-body { display: grid; gap: 2px; }
.admin-kpi-body strong { color: var(--ink); font-size: 26px; font-weight: 800; line-height: 1; }
.admin-kpi-body span   { color: var(--muted); font-size: 12px; font-weight: 600; }

/* ── Admin main layout ────────────────────────────────────────────────────── */
.admin-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 20px;
  align-items: start;
}

.admin-left-col {
  display: grid;
  gap: 20px;
}

.admin-right-col {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 0;
}

/* ── Admin panel block (clients / tickets) ─────────────────────────────────── */
.admin-panel-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}

.admin-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-panel-title svg { width: 18px; height: 18px; color: var(--blue); }
.admin-panel-title > strong { font-size: 14px; color: var(--ink); }

.admin-panel-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-toggle-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.panel-toggle-btn:hover { background: #eef0f4; }
.panel-toggle-btn svg { width: 16px; height: 16px; }

/* Live dot */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #059669;
}

.live-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: livePulse 1.8s ease infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ── Admin client cards ────────────────────────────────────────────────────── */
.admin-client-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.aclient-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease;
}

.aclient-card:hover { background: #f7f9fc; }

.aclient-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.1);
  font-size: 16px;
  font-weight: 900;
}

.aclient-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.aclient-body strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aclient-body span {
  display: block;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aclient-body small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aclient-right {
  flex: 0 0 auto;
  text-align: center;
}

.aclient-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 40px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.1);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.aclient-count small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* ── Admin ticket cards (nouvelle version) ─────────────────────────────────── */
.admin-ticket-list-wrap {
  display: grid;
  gap: 0;
}

.atk-card {
  position: relative;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 14px 16px 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  overflow: hidden;
}

.atk-card:last-child { border-bottom: 0; }
.atk-card:hover { background: #f7f9fc; }

.atk-card.is-selected {
  background: rgba(37, 99, 235, 0.04);
  box-shadow: inset 3px 0 0 var(--blue);
}

/* Barre de priorite a gauche */
.atk-priority-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

.atk-card.priority-critique .atk-priority-bar { background: var(--coral); }
.atk-card.priority-urgente .atk-priority-bar  { background: var(--amber); }
.atk-card.priority-normale .atk-priority-bar  { background: var(--cyan); }

.atk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.atk-ref {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  font-family: monospace;
  letter-spacing: 0.04em;
}

.atk-subject {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atk-client {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.atk-client svg { width: 13px; height: 13px; color: var(--muted); }
.atk-client .atk-sep { color: var(--line); }

.atk-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.atk-meta .atk-sep { opacity: 0.4; }

.atk-pj {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--blue);
  font-weight: 800;
}

.atk-pj svg { width: 11px; height: 11px; }

/* ── Intervention form card (colonne droite) ──────────────────────────────── */
.intervention-placeholder {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 48px 32px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: #f7f9fc;
}

.placeholder-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
}

.placeholder-icon svg { width: 28px; height: 28px; }

.intervention-placeholder strong {
  color: var(--ink);
  font-size: 16px;
}

.intervention-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.intervention-form-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

/* En-tete ticket selectionne */
.intervention-ticket-head {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #07152b, #0e2342);
  color: var(--white);
}

.ithead-ref {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ithead-ref-label {
  font-size: 11px;
  font-weight: 900;
  font-family: monospace;
  color: var(--cyan);
  letter-spacing: 0.06em;
}

.ithead-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ithead-subject {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}

.ithead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ithead-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.ithead-meta svg { width: 13px; height: 13px; }

/* Corps du formulaire */
.intervention-form-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.intervention-form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.intervention-form-section-title svg { width: 16px; height: 16px; color: var(--blue); }

.intervention-form-body label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.intervention-form-body input,
.intervention-form-body select,
.intervention-form-body textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--ink);
  outline: 0;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.intervention-form-body input,
.intervention-form-body select { height: 46px; padding: 0 12px; }
.intervention-form-body textarea { padding: 12px; resize: vertical; min-height: 110px; }

.intervention-form-body input:focus,
.intervention-form-body select:focus,
.intervention-form-body textarea:focus {
  border-color: rgba(25, 199, 223, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.1);
}

.intervention-form-body .full { grid-column: 1 / -1; }

.intervention-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

/* ── Admin filters bar ────────────────────────────────────────────────────── */
.admin-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
}

.admin-search-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search-wrap svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.admin-search-wrap input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px 0 40px;
  background: #fbfcfe;
  color: var(--ink);
  font-size: 14px;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-search-wrap input:focus {
  border-color: rgba(25, 199, 223, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.1);
}

.admin-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-filter-group select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  outline: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.admin-filter-group select:focus {
  border-color: rgba(25, 199, 223, 0.55);
}

.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-reset-btn:hover {
  color: var(--coral);
  border-color: rgba(242, 109, 91, 0.36);
}

.filter-reset-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Client profile ──────────────────────────────────────────────────────── */
.profile-panel {
  display: grid;
  gap: 24px;
}

.profile-card {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.07);
}

.profile-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.1);
}

.profile-avatar svg {
  width: 32px;
  height: 32px;
}

.profile-company {
  color: var(--muted);
  font-size: 14px;
}

.profile-stats .secure-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Login status success ─────────────────────────────────────────────────── */
.login-status.is-success {
  border-color: rgba(43, 212, 159, 0.28);
  color: #065f46;
  background: rgba(43, 212, 159, 0.1);
}

/* ── Button danger ───────────────────────────────────────────────────────── */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(242, 109, 91, 0.36);
  border-radius: 999px;
  color: #8a2f24;
  background: rgba(242, 109, 91, 0.08);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: rgba(242, 109, 91, 0.18);
  border-color: rgba(242, 109, 91, 0.6);
}

.btn-danger svg {
  width: 16px;
  height: 16px;
}

/* ── Ticket record action buttons ────────────────────────────────────────── */
.btn-details,
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-details {
  border: 1px solid rgba(37, 99, 235, 0.28);
  color: var(--blue);
  background: rgba(37, 99, 235, 0.06);
}

.btn-details:hover {
  background: rgba(37, 99, 235, 0.14);
}

.btn-whatsapp {
  border: 1px solid rgba(43, 212, 159, 0.32);
  color: #065f46;
  background: rgba(43, 212, 159, 0.1);
  text-decoration: none;
}

.btn-whatsapp:hover {
  background: rgba(43, 212, 159, 0.2);
}

.btn-details svg,
.btn-whatsapp svg {
  width: 14px;
  height: 14px;
}

/* ── Admin client card clickable ─────────────────────────────────────────── */
.admin-client-card {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-client-card:hover {
  border-color: rgba(25, 199, 223, 0.4);
  box-shadow: 0 4px 16px rgba(25, 199, 223, 0.1);
}

.ticket-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 11px;
  font-weight: 900;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.ticket-badge.status-ouvert,
.ticket-badge.status-recu {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.25);
}

.ticket-badge.status-en-triage {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
}

.ticket-badge.status-en-cours,
.ticket-badge.status-en-intervention {
  color: #064b5a;
  background: rgba(25, 199, 223, 0.14);
  border-color: rgba(25, 199, 223, 0.3);
  font-weight: 900;
}

.ticket-badge.status-en-attente-client {
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.ticket-badge.status-resolu,
.ticket-badge.status-cloture {
  color: #065f46;
  background: rgba(16, 185, 129, 0.11);
  border-color: rgba(16, 185, 129, 0.25);
}

.ticket-badge.status-annule {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.22);
}

/* ── Admin ticket card span icon ─────────────────────────────────────────── */
.admin-ticket-card span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-ticket-card span svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.settings-page {
  display: grid;
  gap: 22px;
}

.settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 20px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.07);
}

.settings-breadcrumb {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #064b5a;
  background: rgba(25, 199, 223, 0.12);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-hero h3 {
  margin: 14px 0 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.settings-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.settings-add-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}

.settings-add-head,
.settings-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-add-head svg,
.settings-category-title svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.settings-add-card label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.settings-add-card input,
.settings-controls input,
.settings-type-form input,
.settings-type-row input {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--white);
  outline: 0;
}

.settings-list {
  display: grid;
  gap: 16px;
}

.settings-category-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.05);
}

.settings-category-card.is-disabled,
.settings-type-row.is-disabled {
  opacity: 0.62;
}

.settings-category-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-category-title strong {
  color: var(--ink);
  font-size: 16px;
}

.settings-controls,
.settings-type-row,
.settings-type-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 92px 92px auto auto;
  gap: 10px;
  align-items: center;
}

.settings-type-form {
  grid-template-columns: minmax(180px, 1fr) 92px auto;
  padding: 12px;
  border: 1px dashed rgba(37, 99, 235, 0.24);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.04);
}

.settings-types-list {
  display: grid;
  gap: 9px;
}

.settings-type-row {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.settings-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #344054;
  background: var(--white);
  font-size: 12px;
  font-weight: 900;
}

.settings-toggle input {
  width: 16px;
  height: 16px;
}

.mini-action-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--white);
  background: var(--navy);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.mini-action-btn svg {
  width: 15px;
  height: 15px;
}

.mini-action-btn.is-danger {
  background: #b42318;
}

.settings-type-empty {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 13px;
}

/* Phase 1 clients module */
.clients-page {
  display: grid;
  gap: 20px;
  padding-bottom: 60px;
}

.clients-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.07);
}

.clients-toolbar h3 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.clients-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: start;
}

.clients-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.clients-filter-bar select {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

.clients-list {
  display: grid;
  gap: 0;
}

.client-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  text-align: left;
  cursor: pointer;
}

.client-row:hover {
  background: #f7f9fc;
}

.client-row:focus-visible {
  outline: 3px solid rgba(25, 199, 223, 0.22);
  outline-offset: -3px;
}

.client-row.is-inactive {
  opacity: 0.68;
}

.client-row-avatar {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.1);
  font-size: 17px;
  font-weight: 900;
}

.client-row-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.client-row-body strong,
.client-row-body span,
.client-row-body small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row-body strong {
  color: var(--ink);
  font-size: 14px;
}

.client-row-body span {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.client-row-body small {
  color: var(--muted);
  font-size: 11px;
}

.client-row-stats,
.client-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.client-kpi {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 58px;
  padding: 7px 8px;
  border-radius: 8px;
  color: #1f2937;
  background: #f3f6fa;
  font-size: 11px;
  font-weight: 800;
}

.client-kpi strong {
  font-size: 18px;
  line-height: 1;
}

.client-kpi span {
  color: #6b7280;
  font-size: 10px;
}

.client-kpi.is-open {
  color: #92400e;
  background: #fff7ed;
}

.client-detail-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.client-detail-header,
.client-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-detail-header h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 22px;
}

.client-detail-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.client-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.client-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.client-detail-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}

.client-detail-section h4,
.client-section-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.client-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.client-info-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  background: var(--white);
}

.client-info-item small {
  color: #6b7280;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-info-item strong {
  min-width: 0;
  color: #111827;
  font-size: 13px;
  word-break: break-word;
}

.client-contact-list,
.client-user-list {
  display: grid;
  gap: 9px;
}

.client-contact-card,
.client-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  background: var(--white);
}

.client-contact-card.is-inactive,
.client-user-card.is-inactive {
  opacity: 0.62;
}

.client-contact-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.client-contact-body strong {
  color: var(--ink);
  font-size: 13px;
}

.client-contact-body span,
.client-contact-body small {
  color: var(--muted);
  font-size: 11px;
}

.client-contact-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.client-notes {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.client-edit-form,
.client-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.client-contact-form {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.07);
}

.client-edit-form .ticket-form-head,
.client-contact-form .ticket-form-head {
  grid-column: 1 / -1;
}

.client-edit-form label,
.client-contact-form label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.client-edit-form label em,
.client-contact-form label em {
  color: #ef4444;
  font-style: normal;
}

.client-edit-form input,
.client-edit-form textarea,
.client-contact-form input,
.client-contact-form textarea {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--white);
  outline: 0;
}

.client-edit-form input,
.client-contact-form input {
  height: 42px;
}

.client-edit-form textarea,
.client-contact-form textarea {
  resize: vertical;
}

.client-edit-form .full,
.client-contact-form .full {
  grid-column: 1 / -1;
}

.client-form-toggle {
  width: fit-content;
}

.client-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Phase 2 assets module */
.assets-page,
.client-assets-page {
  display: grid;
  gap: 20px;
  padding-bottom: 60px;
}

.assets-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}

.assets-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(120px, 0.45fr));
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.assets-filter-bar select {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.assets-filter-bar .admin-search-wrap,
.network-filter-bar .admin-search-wrap {
  min-width: 0;
}

.assets-filter-bar .admin-search-wrap input,
.network-filter-bar .admin-search-wrap input {
  width: 100%;
  height: 42px;
}

.assets-filter-bar select,
.network-filter-bar select,
.reports-selector-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.assets-list {
  display: grid;
  gap: 0;
}

.asset-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(120px, 0.45fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}

.asset-row:hover {
  background: #f7f9fc;
}

.asset-row:focus-visible {
  outline: 3px solid rgba(25, 199, 223, 0.22);
  outline-offset: -3px;
}

.asset-row.is-inactive {
  opacity: 0.62;
}

.asset-row-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}

.asset-row-icon svg {
  width: 20px;
  height: 20px;
}

.asset-row-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.asset-row-body strong,
.asset-row-body span,
.asset-row-body small,
.asset-row-network strong,
.asset-row-network small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-row-body strong {
  color: var(--ink);
  font-size: 14px;
}

.asset-row-body span {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.asset-row-body small,
.asset-row-network small {
  color: var(--muted);
  font-size: 11px;
}

.asset-row-network {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.asset-row-network strong {
  color: #0f766e;
  font-size: 13px;
}

.asset-row-badges,
.asset-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.asset-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  color: #344054;
  background: #f3f6fa;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.asset-badge.status-in_service { color: #065f46; background: #d1fae5; }
.asset-badge.status-in_stock { color: #1d4ed8; background: #dbeafe; }
.asset-badge.status-under_maintenance { color: #92400e; background: #fef3c7; }
.asset-badge.status-retired,
.asset-badge.status-lost { color: #4b5563; background: #e5e7eb; }
.asset-badge.criticality-critical { color: #991b1b; background: #fee2e2; }
.asset-badge.criticality-high { color: #9a3412; background: #ffedd5; }
.asset-badge.criticality-normal { color: #075985; background: #e0f2fe; }
.asset-badge.criticality-low { color: #166534; background: #dcfce7; }

.asset-detail-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.asset-edit-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.07);
}

.asset-edit-form .ticket-form-head,
.asset-edit-form .full {
  grid-column: 1 / -1;
}

.asset-edit-form label,
.asset-network-grid label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.asset-edit-form label em {
  color: #ef4444;
  font-style: normal;
}

.asset-edit-form input,
.asset-edit-form select,
.asset-edit-form textarea,
.asset-network-grid input,
.asset-network-grid select,
.asset-network-grid textarea,
.asset-spec-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--white);
  outline: 0;
}

.asset-edit-form input,
.asset-edit-form select,
.asset-network-grid input,
.asset-network-grid select,
.asset-spec-row input {
  height: 42px;
}

.asset-form-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e8eef5;
  border-radius: 10px;
  background: #fbfcfe;
}

.asset-form-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.asset-spec-editor,
.asset-spec-list {
  display: grid;
  gap: 9px;
}

.asset-spec-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(160px, 1fr) minmax(80px, 0.35fr) auto;
  gap: 9px;
  align-items: center;
}

.asset-spec-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asset-network-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.asset-form-toggle {
  width: fit-content;
}

.client-assets-summary {
  display: grid;
  gap: 10px;
}

.asset-summary-breakdown {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.asset-summary-breakdown span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #344054;
  background: #eef2f7;
  font-size: 12px;
  font-weight: 800;
}

.client-readonly-assets {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.07);
}

.client-asset-detail {
  border-top: 1px solid var(--line);
}

.ticket-linked-assets {
  border: 1px solid #dbe8f4;
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
  margin: 14px 0;
}

.linked-assets-head,
.linked-asset-row,
.related-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.linked-assets-head {
  margin-bottom: 12px;
}

.linked-assets-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linked-assets-head strong {
  color: #0d1b2a;
}

.linked-assets-head span {
  color: #6b7280;
  font-size: 12px;
}

.ticket-linked-assets-list,
.related-ticket-list {
  display: grid;
  gap: 10px;
}

.linked-asset-row,
.related-ticket-row {
  border: 1px solid #e6edf5;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.linked-asset-body,
.related-ticket-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.linked-asset-body strong,
.related-ticket-row strong {
  color: #0d1b2a;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.linked-asset-body span,
.related-ticket-row span {
  color: #6b7280;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.linked-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ticket-asset-link-form {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: 10px;
  align-items: end;
}

.ticket-asset-link-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #4b5b70;
  font-size: 12px;
  font-weight: 700;
}

.ticket-asset-link-form select {
  height: 38px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.ticket-asset-link-form .login-status {
  grid-column: 1 / -1;
}

.asset-badge.link-reported_asset,
.asset-badge.link-affected_asset,
.asset-badge.link-replacement_asset,
.asset-badge.link-related_asset {
  color: #334155;
  background: #e2e8f0;
}

.modal-linked-assets .linked-asset-row {
  align-items: flex-start;
}

.related-tickets-section {
  overflow: hidden;
}

.diagnostics-page,
.client-diagnostics-page {
  display: grid;
  gap: 18px;
}

.diagnostics-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.client-diagnostics-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diagnostics-list {
  display: grid;
  gap: 10px;
}

.diagnostic-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.diagnostic-row:hover {
  border-color: #c8d7e6;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.diagnostic-edit-form,
.recommendation-edit-form {
  margin-top: 16px;
}

.diagnostic-item-editor,
.diagnostic-checklist,
.diagnostics-mini-list {
  display: grid;
  gap: 10px;
}

.diagnostic-item-row {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) 130px 120px 90px 80px auto;
  gap: 8px;
  align-items: start;
}

.diagnostic-item-row textarea {
  grid-column: 1 / -2;
  min-height: 66px;
}

.diagnostic-item-row input,
.diagnostic-item-row select,
.diagnostic-item-row textarea {
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.diagnostic-item-card {
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  display: grid;
  gap: 5px;
}

.diagnostic-item-card strong {
  color: #0d1b2a;
}

.diagnostic-item-card span,
.diagnostic-item-card p {
  color: #667085;
  font-size: 12px;
  margin: 0;
}

.asset-badge.score-critical,
.ticket-badge.score-critical {
  color: #991b1b;
  background: #fee2e2;
}

.asset-badge.score-warning {
  color: #92400e;
  background: #fef3c7;
}

.asset-badge.score-good {
  color: #075985;
  background: #e0f2fe;
}

.asset-badge.score-excellent {
  color: #166534;
  background: #dcfce7;
}

.asset-badge.score-unknown,
.asset-badge.visibility-hidden {
  color: #4b5563;
  background: #e5e7eb;
}

.asset-badge.visibility-visible {
  color: #065f46;
  background: #d1fae5;
}

.asset-badge.diagnostic-status-archived,
.asset-badge.recommendation-status-archived {
  color: #4b5563;
  background: #e5e7eb;
}

.asset-badge.recommendation-priority-urgent,
.asset-badge.recommendation-priority-high {
  color: #991b1b;
  background: #fee2e2;
}

.network-page,
.client-network-page {
  display: grid;
  gap: 20px;
}

.network-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.4fr) minmax(160px, 0.6fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.network-filter-bar select {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.network-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.45fr);
  gap: 18px;
  align-items: start;
}

.network-device-list,
.network-links-list {
  display: grid;
  gap: 10px;
}

.network-device-row,
.network-link-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.network-link-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.network-map-wrap {
  min-height: 360px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
  overflow: hidden;
}

.network-map-wrap svg {
  width: 100%;
  min-height: 360px;
  display: block;
}

.network-map-wrap svg.is-editable .network-node {
  cursor: grab;
}

.network-map-wrap svg.is-dragging,
.network-map-wrap svg.is-dragging .network-node {
  cursor: grabbing;
}

.network-link-line {
  stroke: #94a3b8;
  stroke-width: 3;
  stroke-linecap: round;
}

.network-link-line.link-fiber { stroke: #0ea5e9; }
.network-link-line.link-wifi { stroke: #10b981; stroke-dasharray: 8 8; }
.network-link-line.link-vpn { stroke: #8b5cf6; stroke-dasharray: 12 6; }
.network-link-line.link-trunk,
.network-link-line.link-uplink { stroke: #f59e0b; }

.network-link-label,
.network-node text {
  fill: #334155;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.network-link-label {
  fill: #64748b;
  font-size: 11px;
}

.network-node circle {
  fill: #fff;
  stroke: #2563eb;
  stroke-width: 4;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.12));
}

.network-node.node-router circle,
.network-node.node-firewall circle { stroke: #ef4444; }
.network-node.node-switch circle { stroke: #0ea5e9; }
.network-node.node-access_point circle { stroke: #10b981; }
.network-node.node-server circle,
.network-node.node-nas circle { stroke: #6366f1; }
.network-node.node-internet circle { stroke: #f59e0b; }

.network-node .network-node-sub {
  fill: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.network-edit-form {
  margin-top: 4px;
}

.network-client-summary {
  display: grid;
  gap: 10px;
}

.vault-page {
  display: grid;
  gap: 20px;
}

.vault-status-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 14px 16px;
  background: #f8fbff;
}

.vault-status-box svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.vault-status-box strong,
.vault-status-box small {
  display: block;
}

.vault-status-box strong {
  color: #0d1b2a;
}

.vault-status-box small {
  color: #667085;
  margin-top: 3px;
}

.vault-status-box.is-ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.vault-status-box.is-ready svg {
  color: #16a34a;
}

.vault-status-box.is-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.vault-status-box.is-warning svg {
  color: #ea580c;
}

.vault-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(420px, 1.35fr);
  gap: 18px;
  align-items: start;
}

.vault-audit-panel {
  margin-bottom: 18px;
}

.vault-list,
.vault-log-list {
  display: grid;
  gap: 10px;
}

.vault-row,
.vault-log-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.vault-row:hover {
  border-color: #c8d7e6;
  background: #f7f9fc;
}

.vault-log-row {
  grid-template-columns: minmax(90px, 0.4fr) minmax(0, 1fr);
}

.vault-log-row strong {
  color: #0d1b2a;
  text-transform: capitalize;
}

.vault-log-row span {
  color: #667085;
  font-size: 12px;
}

.vault-secret-output {
  display: grid;
  gap: 10px;
}

.vault-secret-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.vault-secret-box input {
  min-width: 0;
  height: 42px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 0 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.vault-secret-box small {
  grid-column: 1 / -1;
  color: #667085;
}

.vault-confirm-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #344054;
  font-size: 0.9rem;
  font-weight: 700;
}

.vault-edit-form {
  margin-top: 4px;
}

/* ── Responsive additions ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Auth page responsive */
  .auth-page {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 66px);
    margin-top: 66px;
    inset: auto;
    overflow-y: auto;
  }

  .auth-brand {
    padding: 30px 28px 26px;
    min-height: 240px;
    align-items: flex-end;
  }

  .auth-brand-title { font-size: 32px; }
  .auth-trust-list { display: none; }

  .auth-forms-col {
    padding: 18px 24px 28px;
  }

  .auth-card {
    padding: 30px 20px;
    border-radius: 14px;
  }

  .auth-card-head {
    align-items: flex-start;
    gap: 12px;
  }

  .auth-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .auth-card-title {
    font-size: 20px;
  }

  .auth-fields-grid {
    grid-template-columns: 1fr;
  }

  .auth-field-full {
    grid-column: 1;
  }

  .auth-tabs, .auth-card {
    max-width: 100%;
  }

  .auth-security-strip {
    max-width: 100%;
  }

  .auth-tabs {
    overflow-x: auto;
  }

  .turnstile-wrap {
    min-height: 58px;
  }

  .turnstile-wrap .cf-turnstile {
    transform: scale(0.9);
  }

  .auth-card-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-search-wrap {
    width: 100%;
  }
  .modal-info-grid {
    grid-template-columns: 1fr;
  }
  .profile-stats .secure-metrics {
    grid-template-columns: 1fr;
  }
  .client-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-main-grid {
    grid-template-columns: 1fr;
  }
  .settings-hero,
  .settings-category-head,
  .settings-controls,
  .settings-type-row,
  .settings-type-form,
  .clients-layout,
  .assets-layout,
  .diagnostics-layout,
  .assets-filter-bar,
  .client-kpi-grid,
  .client-info-grid,
  .client-edit-form,
  .client-contact-form,
  .asset-edit-form,
  .asset-network-grid,
  .asset-spec-list,
  .network-filter-bar,
  .network-layout,
  .vault-layout {
    grid-template-columns: 1fr;
  }

  .diagnostic-item-row,
  .ticket-asset-link-form {
    grid-template-columns: 1fr;
  }

  .diagnostic-item-row textarea {
    grid-column: auto;
  }
  .clients-toolbar,
  .client-detail-header,
  .client-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .client-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .client-row-stats,
  .client-row-actions,
  .asset-row-network,
  .asset-row-badges,
  .asset-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .asset-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .asset-spec-row {
    grid-template-columns: 1fr;
  }
  .network-device-row,
  .network-link-row,
  .vault-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .network-link-row .asset-row-actions,
  .network-device-row .asset-row-actions,
  .vault-row .asset-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .vault-secret-box {
    grid-template-columns: 1fr;
  }
  .network-map-wrap,
  .network-map-wrap svg {
    min-height: 300px;
  }
  .clients-filter-bar {
    grid-template-columns: 1fr;
  }
  .admin-right-col {
    position: static;
  }
  .nav-user-text {
    display: none;
  }
  .nav-user-info {
    padding: 5px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 680px) {
  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tab-btn {
    justify-content: center;
  }
  .ticket-modal {
    max-height: 95vh;
  }
  .notif-panel {
    right: 14px;
    left: 14px;
    width: auto;
  }
  .client-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kpi-card {
    padding: 14px;
  }
  .kpi-body strong {
    font-size: 18px;
  }
  .ticket-confirmation {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .confirm-wa {
    align-self: stretch;
    justify-content: center;
  }
  .section-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ─── Sociétés (admin) ──────────────────────────────────────────────────────── */
.admin-companies-panel {}

.acompany-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: background 0.15s;
}
.acompany-card:hover { background: #f7f9fc; }
.acompany-card.is-inactive { opacity: 0.55; }

.acompany-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acompany-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acompany-body strong { font-size: 13px; color: #0d1b2a; line-height: 1.3; }
.acompany-body span  { font-size: 11px; color: #5a6a7a; }
.acompany-body small { font-size: 11px; color: #8a99aa; }

.acompany-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.acompany-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.acompany-stat strong { font-size: 14px; font-weight: 700; color: #0d1b2a; }
.acompany-stat small  { font-size: 10px; color: #8a99aa; }

/* ─── Utilisateurs société (admin) ─────────────────────────────────────────── */
.auser-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.15s;
  flex-wrap: wrap;
}
.auser-card:hover { background: #f7f9fc; }
.auser-card.is-inactive { opacity: 0.55; }

.auser-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8eef5;
  color: #1a3a5c;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auser-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auser-body strong { font-size: 13px; color: #0d1b2a; }
.auser-body span   { font-size: 11px; color: #5a6a7a; }
.auser-body small  { font-size: 11px; color: #8a99aa; }

.auser-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.auser-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.auser-role svg { width: 11px; height: 11px; }
.auser-role.role-manager {
  background: #e8f0fe;
  color: #1a56db;
  border: 1px solid #bcd0fa;
}
.auser-role.role-user {
  background: #f0f5ff;
  color: #4a6a8a;
  border: 1px solid #d0dcea;
}
.auser-tickets { font-size: 11px; color: #8a99aa; }

.auser-actions {
  width: 100%;
  display: flex;
  gap: 6px;
  padding-top: 8px;
  flex-wrap: wrap;
}

.badge-inactive {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
}

/* Bouton retour sociétés */
.panel-toggle-btn.is-back {
  background: #f0f5ff;
  color: #1a3a5c;
  border: 1px solid #d0dcea;
}
.panel-toggle-btn.is-back:hover { background: #e0eaff; }

/* KPI companies */
.akpi-companies { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

/* ─── Bandeau Manager ───────────────────────────────────────────────────────── */
.manager-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.manager-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.manager-banner-left svg { width: 22px; height: 22px; color: #64b5f6; flex-shrink: 0; }
.manager-banner-left strong { font-size: 15px; font-weight: 700; display: block; }
.manager-banner-left span  { font-size: 11px; color: #90aec8; }

.manager-banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.manager-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.manager-filter-wrap label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #90aec8;
  white-space: nowrap;
}
.manager-filter-wrap label svg { width: 12px; height: 12px; }
.manager-filter-wrap select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.manager-filter-wrap select option { background: #1a3a5c; color: #fff; }

.manager-banner .mini-action-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.manager-banner .mini-action-btn:hover { background: rgba(255,255,255,0.25); }
.manager-banner .mini-action-btn svg { width: 13px; height: 13px; }

/* ─── Panel stats Manager ───────────────────────────────────────────────────── */
.manager-stats-panel {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13,27,42,0.06);
}

.manager-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f7f9fc;
  border-bottom: 1px solid #e8eef5;
}
.manager-stats-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0d1b2a;
}
.manager-stats-head svg { width: 16px; height: 16px; color: #1a56db; }

.manager-stats-body { padding: 16px 18px; }

.manager-stats-kpis {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mstat-kpi {
  flex: 1;
  min-width: 80px;
  background: #f7f9fc;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  border: 1px solid #e8eef5;
}
.mstat-kpi strong { display: block; font-size: 24px; font-weight: 800; color: #0d1b2a; }
.mstat-kpi span   { font-size: 11px; color: #5a6a7a; }
.mstat-kpi.mstat-open   strong { color: #d97706; }
.mstat-kpi.mstat-done  strong { color: #16a34a; }

.mstat-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #5a6a7a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.mstat-section-title svg { width: 13px; height: 13px; }

.mstat-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
  gap: 12px;
}
.mstat-user-row:last-child { border-bottom: none; }
.mstat-user-info { display: flex; flex-direction: column; gap: 1px; }
.mstat-user-info strong { font-size: 13px; color: #0d1b2a; }
.mstat-user-info small  { font-size: 11px; color: #8a99aa; }
.mstat-user-count {
  font-size: 16px;
  font-weight: 800;
  color: #1a3a5c;
  flex-shrink: 0;
}

/* admin-company-users-panel */
.admin-company-users-panel .panel-toggle-btn.is-back svg { width: 14px; height: 14px; }

/* ─── Nouveaux statuts ──────────────────────────────────────────────────────── */
.ticket-badge.status-recu {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.28);
}
.ticket-badge.status-en-attente-fournisseur {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
}
.timeline-dot.status-recu         { background: #60a5fa; }
.timeline-dot.status-annule       { background: #9ca3af; }
.timeline-dot.status-en-attente-fournisseur { background: #a78bfa; }

/* ─── Timeline enrichie ─────────────────────────────────────────────────────── */
.timeline-entry {
  display: flex;
  gap: 12px;
  position: relative;
}
.timeline-entry:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: -8px;
  width: 2px;
  background: #e8eef5;
}
.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}
.timeline-dot svg { width: 13px; height: 13px; color: #fff; }

.timeline-content { flex: 1; padding-bottom: 16px; min-width: 0; }
.timeline-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.timeline-entry-head strong { font-size: 13px; font-weight: 700; color: #0d1b2a; }
.timeline-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.timeline-entry-meta small { font-size: 11px; color: #8a99aa; white-space: nowrap; }
.timeline-admin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #5a6a7a;
}
.timeline-admin svg { width: 10px; height: 10px; }

.timeline-status-badge { margin-bottom: 6px; }

/* Notes internes vs notes client */
.timeline-notes {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.timeline-notes p { margin: 4px 0 0; color: #1a2a3a; word-break: break-word; }
.timeline-notes.internal {
  background: #fff8ee;
  border-left: 3px solid #f59e0b;
}
.timeline-notes.internal .notes-label { color: #92400e; }
.timeline-notes.client {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
}
.timeline-notes.client .notes-label { color: #065f46; }
.notes-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.notes-label svg { width: 10px; height: 10px; }

.timeline-attachment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #1a56db;
  margin-top: 6px;
  text-decoration: none;
}
.timeline-attachment:hover { text-decoration: underline; }
.timeline-attachment svg { width: 12px; height: 12px; }

.timeline-entry-creation .timeline-dot { background: #94a3b8; }

/* ─── Métriques de temps (strip modal) ─────────────────────────────────────── */
.ticket-timing-strip {
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.timing-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  padding: 10px 12px;
}
.timing-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e8eef5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timing-icon svg { width: 14px; height: 14px; color: #5a6a7a; }
.timing-body { display: flex; flex-direction: column; gap: 1px; }
.timing-label { font-size: 10px; color: #8a99aa; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.timing-value { font-size: 12px; font-weight: 700; color: #0d1b2a; }
.timing-sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #1a56db;
  margin-top: 2px;
}
.timing-sub svg { width: 11px; height: 11px; }

.timing-card.metric-response .timing-icon { background: rgba(245, 158, 11, 0.12); }
.timing-card.metric-response .timing-icon svg { color: #d97706; }
.timing-card.metric-response .timing-sub { color: #d97706; }
.timing-card.metric-resolved .timing-icon { background: rgba(16, 185, 129, 0.12); }
.timing-card.metric-resolved .timing-icon svg { color: #059669; }
.timing-card.metric-resolved .timing-sub { color: #059669; }
.timing-card.metric-closed .timing-icon { background: rgba(107, 114, 128, 0.1); }
.timing-card.metric-closed .timing-icon svg { color: #6b7280; }

.timing-summary {
  width: 100%;
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #e8eef5;
  margin-top: 4px;
}
.timing-kpi {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timing-kpi svg { width: 13px; height: 13px; color: #5a6a7a; }
.timing-kpi strong { font-size: 14px; font-weight: 800; color: #0d1b2a; }
.timing-kpi small { font-size: 11px; color: #8a99aa; }

/* ─── Métriques sur fiche ticket client ─────────────────────────────────────── */
.ticket-record-timing {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.trec-timing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.trec-timing svg { width: 11px; height: 11px; }
.trec-timing.response { background: rgba(245, 158, 11, 0.1); color: #92400e; border: 1px solid rgba(245,158,11,0.25); }
.trec-timing.resolved { background: rgba(16, 185, 129, 0.1); color: #065f46; border: 1px solid rgba(16,185,129,0.25); }

/* ─── Formulaire intervention admin enrichi ─────────────────────────────────── */
.intervention-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.intervention-fields-grid .full { grid-column: 1 / -1; }

.ifield-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}
.ifield-label svg { width: 13px; height: 13px; color: #6b7280; }
.ifield-label em { color: #ef4444; font-style: normal; }
.ifield-hint {
  font-size: 10px;
  font-weight: 400;
  color: #8a99aa;
  margin-left: 4px;
}

.intervention-form-body label { display: flex; flex-direction: column; }
.intervention-form-body label + label { margin-top: 12px; }

/* Distinction visuelle zones notes */
.intervention-form-body textarea[name="notes"] {
  border-left: 3px solid #f59e0b;
  background: #fffdf5;
}
.intervention-form-body textarea[name="notesClient"] {
  border-left: 3px solid #10b981;
  background: #f0fdf4;
}

/* Bouton "Détails complets" dans l'en-tête ticket sélectionné */
.ithead-modal-btn {
  margin-top: 4px;
  font-size: 11px;
}

/* Description ticket modal */
.modal-description {
  white-space: pre-wrap;
  word-break: break-word;
  color: #374151;
  font-size: 13px;
  line-height: 1.6;
  background: #f7f9fc;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
}

/* ═══ SESSION 5 — Dashboards stats & rapports ═══════════════════════════════ */

/* ─── KPIs client enrichis ──────────────────────────────────────────────────── */
.kpi-card.kpi-resolved .kpi-icon { background: rgba(16,185,129,0.12); }
.kpi-card.kpi-resolved .kpi-icon svg { color: #059669; }
.kpi-card.kpi-resolved strong { color: #059669; }
.kpi-card.kpi-critical .kpi-icon { background: rgba(239,68,68,0.12); }
.kpi-card.kpi-critical .kpi-icon svg { color: #dc2626; }
.kpi-card.kpi-critical strong { color: #dc2626; }
.kpi-card.kpi-resolve-time .kpi-icon { background: rgba(99,102,241,0.12); }
.kpi-card.kpi-resolve-time .kpi-icon svg { color: #6366f1; }

/* ─── Filtres client (statut/mois) ──────────────────────────────────────────── */
.client-filters-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.client-filter-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
.client-filter-select:focus { outline: none; border-color: #1a56db; }
.section-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ─── KPIs admin enrichis ───────────────────────────────────────────────────── */
.admin-kpi-bar { flex-wrap: wrap; }
.admin-kpi-card.akpi-critical .admin-kpi-body strong { color: #dc2626; }
.akpi-crit { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
.akpi-resolved { background: linear-gradient(135deg, #10b981, #059669) !important; }
.akpi-response { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.akpi-resol { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }

/* ─── Barre filtre global admin ─────────────────────────────────────────────── */
.admin-global-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.admin-global-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  color: #374151;
}
.admin-filter-group { flex-wrap: wrap; gap: 6px; }
.admin-filter-group select { height: 32px; padding: 0 8px; font-size: 12px; }

/* ─── Panneau stats société/utilisateur ─────────────────────────────────────── */
.admin-stats-panel {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.admin-stats-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f7f9fc;
  border-bottom: 1px solid #e8eef5;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-stats-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0d1b2a;
}
.admin-stats-panel-title svg { width: 16px; height: 16px; color: #1a56db; }
.admin-stats-panel-actions { display: flex; align-items: center; gap: 8px; }
.admin-stats-month-select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 11px;
  background: #fff;
}
.admin-stats-panel-body { padding: 16px; }

/* ─── KPIs stats société ─────────────────────────────────────────────────────── */
.cstat-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.cstat-kpi {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 10px;
  padding: 10px 12px;
  gap: 3px;
}
.cstat-kpi strong { font-size: 22px; font-weight: 800; color: #0d1b2a; }
.cstat-kpi small  { font-size: 10px; color: #8a99aa; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.cstat-kpi.cstat-open strong { color: #d97706; }
.cstat-kpi.cstat-done strong { color: #059669; }
.cstat-kpi.cstat-crit strong { color: #dc2626; }
.cstat-kpi.cstat-time strong { color: #6366f1; font-size: 16px; }

/* ─── Cards utilisateurs dans stats société ──────────────────────────────────── */
.cstat-user-card {
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.cstat-user-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.auser-avatar.small { width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }
.cstat-user-info { flex: 1; }
.cstat-user-info strong { font-size: 13px; font-weight: 700; color: #0d1b2a; }
.cstat-user-info small { display: block; font-size: 11px; color: #6b7280; }
.cstat-user-numbers { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cstat-user-numbers span { font-size: 13px; font-weight: 700; color: #1a56db; }
.cstat-user-numbers small { font-size: 10px; color: #8a99aa; display: flex; align-items: center; gap: 3px; }
.cstat-user-numbers small svg { width: 10px; height: 10px; }
.cstat-user-actions { display: flex; gap: 6px; margin-top: 8px; }
.acompany-stats-btn { margin-left: auto; flex-shrink: 0; }

/* ─── Stats utilisateur tickets list ────────────────────────────────────────── */
.ustat-ticket-row {
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ustat-ticket-ref { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ustat-ticket-ref code { font-size: 11px; color: #6366f1; background: rgba(99,102,241,0.08); padding: 1px 5px; border-radius: 4px; }
.ustat-ticket-subject { font-size: 13px; font-weight: 600; color: #0d1b2a; margin-bottom: 6px; }
.ustat-ticket-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ustat-ticket-meta small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #6b7280; }
.ustat-ticket-meta small svg { width: 10px; height: 10px; }

/* ─── Stat breakdown / progress bars ────────────────────────────────────────── */
.stat-breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.stat-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-breakdown-count { font-size: 12px; font-weight: 700; color: #374151; white-space: nowrap; }
.stat-progress-wrap {
  height: 4px;
  background: #e8eef5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.stat-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.bar-blue { background: linear-gradient(90deg, #1a56db, #60a5fa); }
.bar-green { background: linear-gradient(90deg, #059669, #34d399); }

/* ─── Page rapports ──────────────────────────────────────────────────────────── */
.reports-page { max-width: 960px; margin: 0 auto; padding: 0 0 60px; }
.reports-hero {
  padding: 20px 0 16px;
  border-bottom: 1px solid #e8eef5;
  margin-bottom: 24px;
}
.reports-hero h3 { margin: 4px 0 6px; font-size: 20px; font-weight: 800; color: #0d1b2a; }
.reports-hero p  { font-size: 13px; color: #6b7280; margin: 0; }

.reports-selector-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.reports-selector-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.reports-selector-field select {
  height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  background: #fff;
  color: #374151;
}
.reports-selector-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reports-status { font-size: 13px; color: #dc2626; padding: 6px 0; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover { border-color: #1a56db; color: #1a56db; background: #f0f5ff; }
.btn-secondary svg { width: 14px; height: 14px; }

/* ─── Rapport preview ────────────────────────────────────────────────────────── */
.report-preview-wrap { border: 1px solid #e8eef5; border-radius: 12px; overflow: hidden; }

.report-page {
  background: #fff;
  padding: 32px 36px;
  border-bottom: 2px dashed #e8eef5;
}
.report-page:last-child { border-bottom: none; }

.report-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid #0d1b2a;
}
.report-logo { height: 40px; object-fit: contain; }
.report-header-info { flex: 1; }
.report-title { font-size: 20px; font-weight: 800; color: #0d1b2a; margin: 0 0 6px; }
.report-meta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.report-meta-row span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6b7280; }
.report-meta-row svg { width: 12px; height: 12px; }
.report-meta-row strong { color: #0d1b2a; font-weight: 700; }

.report-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.report-kpi-card {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  gap: 4px;
}
.report-kpi-value { font-size: 28px; font-weight: 800; color: #0d1b2a; line-height: 1; }
.report-kpi-label { font-size: 11px; color: #8a99aa; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.report-kpi-card.report-kpi-done   { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.2); }
.report-kpi-card.report-kpi-done   .report-kpi-value { color: #059669; }
.report-kpi-card.report-kpi-open   { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); }
.report-kpi-card.report-kpi-open   .report-kpi-value { color: #d97706; }
.report-kpi-card.report-kpi-crit   { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); }
.report-kpi-card.report-kpi-crit   .report-kpi-value { color: #dc2626; }
.report-kpi-card.report-kpi-time   { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); }
.report-kpi-card.report-kpi-time   .report-kpi-value { color: #6366f1; font-size: 20px; }
.report-kpi-card.report-kpi-assets { background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.2); }
.report-kpi-card.report-kpi-assets .report-kpi-value { color: #0284c7; }
.report-kpi-card.report-kpi-diag { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.2); }
.report-kpi-card.report-kpi-diag .report-kpi-value { color: #059669; }
.report-kpi-card.report-kpi-reco { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); }
.report-kpi-card.report-kpi-reco .report-kpi-value { color: #d97706; }

.report-section { margin-bottom: 20px; }
.report-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f2f5;
}
.report-section-title svg { width: 14px; height: 14px; color: #6366f1; }

.report-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.report-cat-name { font-size: 12px; font-weight: 600; color: #374151; min-width: 120px; }
.report-cat-bar-wrap { flex: 1; height: 6px; background: #e8eef5; border-radius: 4px; overflow: hidden; }
.report-cat-bar { height: 100%; background: linear-gradient(90deg, #1a56db, #60a5fa); border-radius: 4px; }
.report-cat-count { font-size: 12px; font-weight: 700; color: #374151; min-width: 24px; text-align: right; }

.report-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-mini-grid div {
  border: 1px solid #e8eef5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  display: grid;
  gap: 3px;
}

.report-mini-grid strong {
  font-size: 18px;
  color: #0d1b2a;
}

.report-mini-grid span {
  font-size: 10px;
  color: #8a99aa;
  text-transform: uppercase;
  font-weight: 700;
}

.report-follow-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.report-follow-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  font-size: 12px;
}

.report-follow-item strong {
  color: #0d1b2a;
}

.report-follow-item span {
  color: #6b7280;
}

.report-follow-item em {
  color: #334155;
  font-style: normal;
  font-weight: 800;
}

/* ─── Page utilisateur dans rapport ─────────────────────────────────────────── */
.report-page-user { padding-top: 28px; }

.report-user-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eef5;
}
.report-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a56db, #0ea5e9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.report-user-name  { font-size: 16px; font-weight: 800; color: #0d1b2a; margin: 0; }
.report-user-email { font-size: 12px; color: #6b7280; }
.report-user-kpis  { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.report-user-kpi   { display: flex; flex-direction: column; align-items: center; background: #f7f9fc; border: 1px solid #e8eef5; border-radius: 8px; padding: 6px 12px; }
.report-user-kpi strong { font-size: 16px; font-weight: 800; color: #0d1b2a; }
.report-user-kpi small  { font-size: 10px; color: #8a99aa; white-space: nowrap; }

/* ─── Tableau tickets dans rapport ──────────────────────────────────────────── */
.report-tickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.report-tickets-table th {
  text-align: left;
  padding: 8px 10px;
  background: #f7f9fc;
  border-bottom: 2px solid #e8eef5;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 700;
  white-space: nowrap;
}
.report-tickets-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
  color: #374151;
}
.report-tickets-table tr:hover td { background: #fafbfc; }
.report-ticket-subject { max-width: 200px; word-break: break-word; }
.report-interventions-row td { background: #f9fafb; padding: 0; }
.report-interventions-wrap { padding: 8px 14px 12px; }
.report-intervention-item {
  padding: 6px 0;
  border-top: 1px dashed #e8eef5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #374151;
}
.report-intervention-item strong { font-size: 12px; }
.report-intervention-item p { flex-basis: 100%; color: #4b5563; margin: 2px 0 0; font-style: italic; }
.report-intervention-item small { color: #9ca3af; }

/* ─── Manager stats enrichies ───────────────────────────────────────────────── */
.mstat-user-row-detail { flex-direction: column; gap: 4px; }
.mstat-user-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mstat-user-meta > * { font-size: 11px; color: #6b7280; display: flex; align-items: center; gap: 3px; }
.mstat-user-meta > * svg { width: 10px; height: 10px; }
.mstat-kpi.mstat-critical { background: rgba(239,68,68,0.08); }
.mstat-kpi.mstat-critical strong { color: #dc2626; }
.mstat-kpi.mstat-time { background: rgba(99,102,241,0.08); }
.mstat-kpi.mstat-time strong { color: #6366f1; }

[data-generate-report].is-loading {
  opacity: 0.82;
  cursor: wait;
}

[data-generate-report].is-loading svg {
  animation: spin 0.8s linear infinite;
}

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

/* ─── Impression PDF (window.print) ─────────────────────────────────────────── */
@media (max-width: 420px) {
  .auth-forms-col {
    padding-right: 16px;
    padding-left: 16px;
  }

  .auth-card {
    padding: 26px 16px;
  }

  .turnstile-wrap {
    min-height: 54px;
  }

  .turnstile-wrap .cf-turnstile {
    transform: scale(0.82);
  }

  .footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 360px) {
  .turnstile-wrap {
    min-height: 50px;
  }

  .turnstile-wrap .cf-turnstile {
    transform: scale(0.76);
  }
}

@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  html,
  body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }

  body * {
    visibility: hidden !important;
  }

  [data-report-preview],
  [data-report-preview] * {
    visibility: visible !important;
  }

  [data-view="reports"],
  .reports-page,
  [data-report-preview] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .site-header,
  .workspace-topbar,
  .reports-hero,
  .reports-selector-bar,
  [data-print-report],
  [data-generate-report],
  .reports-status { display: none !important; }

  .report-preview-wrap {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .report-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    page-break-after: auto;
    break-after: auto;
    break-inside: auto;
    box-shadow: none !important;
    background: #fff !important;
    color: #0b1220 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .report-page + .report-page { margin-top: 8mm !important; }
  .report-tickets-table { font-size: 10px; }
  .report-tickets-table th,
  .report-tickets-table td { padding: 5px 6px; }
  .report-user-head,
  .report-summary-grid,
  .report-section-title { page-break-inside: avoid; break-inside: avoid; }
  .report-kpi-card { min-width: 80px; padding: 10px 12px; }
}

/* ─── Bouton stats société sur carte ────────────────────────────────────────── */
.acompany-card { position: relative; }
.acompany-stats-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
.acompany-card:hover .acompany-stats-btn { opacity: 1; }

@media (max-width: 480px) {
  .auth-tabs {
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .auth-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .auth-tab {
    gap: 4px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 38px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .auth-tab svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
}

/* ── Backoffice 2026: pilotage societes, utilisateurs et acces ───────────── */
.support-page .client-workspace {
  background:
    radial-gradient(circle at 88% 4%, rgba(25, 199, 223, 0.08), transparent 24rem),
    #f4f7fb;
}

.portal-app .workspace-topbar {
  align-items: flex-start;
  padding: 22px 24px;
  border-color: #dce5ee;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(19, 43, 67, 0.07);
}

.portal-app .workspace-topbar h2 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 34px);
  letter-spacing: -0.035em;
}

.portal-app .topbar-actions {
  flex: 1;
  justify-content: flex-end;
}

.portal-app .tab-btn {
  min-height: 40px;
  padding: 0 13px;
  border-color: #dce5ee;
  border-radius: 9px;
  background: #f8fafc;
  font-size: 12px;
}

.portal-app .tab-btn:hover {
  color: #0a7181;
  border-color: rgba(25, 199, 223, 0.4);
  background: #f0fbfd;
}

.portal-app .tab-btn.is-active {
  color: #043e49;
  border-color: rgba(25, 199, 223, 0.38);
  background: linear-gradient(180deg, #e9fbfd, #def6fa);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.portal-app .logout-btn {
  min-width: auto;
  min-height: 40px;
  border-radius: 9px;
}

.admin-workspace {
  gap: 18px;
}

.admin-command-center {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
  gap: 28px;
  align-items: center;
  padding: 30px 32px;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(28, 208, 226, 0.24), transparent 17rem),
    linear-gradient(135deg, #07182d 0%, #0d2942 62%, #0a5262 140%);
  box-shadow: 0 18px 42px rgba(7, 24, 45, 0.18);
}

.admin-command-center::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.025),
    0 0 0 84px rgba(255, 255, 255, 0.018);
}

.admin-command-copy {
  max-width: 690px;
}

.admin-command-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #75e2ef;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-command-eyebrow svg {
  width: 15px;
  height: 15px;
}

.admin-command-copy h3 {
  max-width: 680px;
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.admin-command-copy p {
  max-width: 650px;
  margin: 0;
  color: #b8cad9;
  font-size: 14px;
  line-height: 1.7;
}

.admin-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-primary-action,
.admin-secondary-action {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 1px 11px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.admin-primary-action {
  color: #062733;
  border-color: #65dbe9;
  background: linear-gradient(135deg, #79e5ef, #31c6d8);
}

.admin-primary-action:hover,
.admin-secondary-action:hover {
  transform: translateY(-2px);
}

.admin-secondary-action:hover {
  border-color: rgba(117, 226, 239, 0.48);
  background: rgba(255, 255, 255, 0.13);
}

.admin-primary-action > span,
.admin-secondary-action > span {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.admin-secondary-action > span {
  color: #76e1ed;
  background: rgba(17, 196, 217, 0.14);
}

.admin-primary-action svg,
.admin-secondary-action svg {
  width: 20px;
  height: 20px;
}

.admin-primary-action strong,
.admin-secondary-action strong {
  align-self: end;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-primary-action small,
.admin-secondary-action small {
  align-self: start;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-kpi-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi-card:nth-child(3),
.admin-kpi-card:nth-child(n + 6) {
  display: none;
}

.admin-kpi-card {
  min-height: 104px;
  padding: 20px;
  border-color: #dce5ee;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(19, 43, 67, 0.055);
}

.admin-kpi-card:hover {
  transform: none;
  box-shadow: 0 12px 28px rgba(19, 43, 67, 0.09);
}

.admin-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.admin-kpi-body strong {
  font-size: 29px;
  letter-spacing: -0.04em;
}

.admin-kpi-body span {
  margin-top: 3px;
  color: #6b7c8f;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-panel-block {
  border-color: #dce5ee;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(19, 43, 67, 0.055);
}

.admin-panel-head {
  padding: 16px 18px;
  background: #f8fafc;
}

.admin-companies-panel,
.admin-company-users-panel {
  order: 1;
}

.admin-tickets-panel {
  order: 2;
}

.admin-clients-panel {
  display: none;
}

.admin-company-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e7edf3;
}

.acompany-card {
  min-height: 86px;
  padding: 16px;
  border: 0;
  background: #fff;
}

.acompany-card:hover {
  background: #f4fbfc;
}

.acompany-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #0b2943;
}

.acompany-stats-btn {
  top: 9px;
  right: 9px;
}

.admin-filters-bar {
  border-color: #dce5ee;
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(19, 43, 67, 0.05);
}

.clients-toolbar {
  padding: 25px 28px;
  border-color: #dce5ee;
  border-radius: 16px;
  background:
    linear-gradient(115deg, rgba(25, 199, 223, 0.07), transparent 45%),
    #fff;
  box-shadow: 0 10px 30px rgba(19, 43, 67, 0.07);
}

.clients-toolbar h3 {
  margin-top: 7px;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.clients-toolbar-copy {
  max-width: 670px;
  margin: 7px 0 0;
  color: #6b7c8f;
  font-size: 13px;
}

.clients-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.clients-layout {
  grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.42fr);
}

.client-row {
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.client-row:hover {
  background: #f3fbfc;
  box-shadow: inset 3px 0 #20bfd2;
}

.submit-btn.compact {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}

.client-user-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.client-portal-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
  border: 1px solid #dce5ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(19, 43, 67, 0.08);
}

.client-portal-user-form .ticket-form-head,
.client-portal-user-form .full {
  grid-column: 1 / -1;
}

.client-portal-user-form label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.client-portal-user-form label em {
  color: #ef4444;
  font-style: normal;
}

.client-portal-user-form input,
.client-portal-user-form select {
  min-width: 0;
  height: 44px;
  border: 1px solid #d8e1ea;
  border-radius: 9px;
  padding: 0 12px;
  color: #102033;
  background: #fff;
  font: inherit;
  outline: 0;
}

.client-portal-user-form input:focus,
.client-portal-user-form select:focus {
  border-color: #22bfd1;
  box-shadow: 0 0 0 3px rgba(25, 199, 223, 0.12);
}

.portal-password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.portal-access-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #cdeef2;
  border-radius: 10px;
  color: #326270;
  background: #f0fbfc;
  font-size: 12px;
  line-height: 1.55;
}

.portal-access-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #0ca8bb;
}

.portal-access-result {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #a7e1c9;
  border-radius: 12px;
  background: #f1fbf6;
}

.portal-access-result-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.portal-access-result-head > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #087b57;
  background: #d8f4e8;
}

.portal-access-result-head > span svg {
  width: 19px;
  height: 19px;
}

.portal-access-result-head > div {
  display: grid;
  gap: 2px;
}

.portal-access-result-head strong {
  color: #0d4e3b;
  font-size: 14px;
}

.portal-access-result-head small {
  color: #527266;
  font-size: 11px;
}

.portal-credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-credential-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(17, 122, 87, 0.12);
  border-radius: 8px;
  background: #fff;
}

.portal-credential-grid .full {
  grid-column: 1 / -1;
}

.portal-credential-grid small {
  color: #668177;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-credential-grid strong {
  overflow: hidden;
  color: #153f32;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .admin-command-center {
    grid-template-columns: 1fr;
  }

  .admin-main-grid,
  .clients-layout {
    grid-template-columns: 1fr;
  }

  .admin-right-col {
    position: static;
  }
}

@media (max-width: 820px) {
  .portal-app .workspace-topbar {
    padding: 18px;
  }

  .portal-app .topbar-actions {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .portal-app .tab-btn,
  .portal-app .logout-btn {
    flex: 0 0 auto;
  }

  .admin-command-center {
    padding: 24px;
  }

  .admin-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-company-list,
  .admin-client-list {
    grid-template-columns: 1fr;
  }

  .clients-toolbar {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .admin-command-actions,
  .client-portal-user-form,
  .portal-credential-grid {
    grid-template-columns: 1fr;
  }

  .admin-command-center {
    padding: 21px;
  }

  .admin-command-copy h3 {
    font-size: 25px;
  }

  .admin-kpi-card {
    min-height: 92px;
    padding: 15px;
  }

  .admin-kpi-body strong {
    font-size: 25px;
  }

  .clients-toolbar {
    padding: 20px;
  }

  .clients-toolbar-actions,
  .clients-toolbar-actions > * {
    width: 100%;
  }

  .portal-password-field {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .brand { width: 144px; height: 44px; }
  .language-switch { right: 64px; transform: translateY(-50%) scale(.9); transform-origin: right center; }
}

/* =========================================================================
   Animations page d'accueil — entrée du hero, slider, révélation au scroll
   Objectif : mouvement doux et discret, jamais de saut.
   ========================================================================= */

/* --- Entrée du hero -------------------------------------------------------
   Anime en CSS pur avec `both` : l'etat initial tient pendant le delai, et
   si les animations ne s'appliquent pas le contenu reste visible.
   Aucune dependance au JS, donc aucun risque de contenu masque.          */

@keyframes heroRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroVisualIn {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Les trois pages qui partagent styles.css ont chacune leur variante de
   hero (.hero-inner, .hero-copy, .audit-hero-copy) : on les couvre toutes
   pour que l'enchainement soit identique partout. */
.hero-badges,
.hero h1,
.audit-hero h1,
.hero-text,
.hero-actions,
.metrics,
.audit-metrics {
  animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-badges  { animation-delay: 0.05s; }
.hero h1,
.audit-hero h1 { animation-delay: 0.16s; }
.hero-text    { animation-delay: 0.28s; }
.hero-actions { animation-delay: 0.38s; }
.metrics,
.audit-metrics { animation-delay: 0.48s; }

.hero-visual,
.audit-hero-card {
  animation: heroVisualIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Le point du badge respire au lieu de rester fige. */
.hero-badges .eyebrow > span:first-child {
  animation: badgeGlow 2.6s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 212, 159, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(43, 212, 159, 0); }
}

/* --- Slider du hero -------------------------------------------------------
   Correctif important : l'entree utilisait `transform`, or `.is-active`
   applique aussi `animation: float` sur `transform`. L'animation gagne
   toujours sur la transition, la diapo sautait donc directement a l'echelle
   finale. On separe les deux : `translate`/`scale` pour l'entree (proprietes
   individuelles), `transform` pour le flottement. Les deux se composent.  */

/* Le visuel gagne un peu de hauteur et le slider reserve une bande basse :
   les puces ne se posent plus sur l'image des offres. */
.hero-visual {
  min-height: 556px;
}

.hero-slider {
  inset: 0 0 54px 0;
}

/* Les diapos sont `position:absolute` sans coordonnees : leur place venait
   donc de la « position statique » calculee par le conteneur flex, qui traite
   un enfant absolu comme s'il etait de taille nulle. L'image partait du
   centre et debordait vers le bas d'environ 250 px. On la centre pour de bon. */
/* --- Harmonisation de la taille percue des diapos -------------------------
   Les visuels n'ont pas le meme cadrage : les boites produit occupent une
   zone etroite et haute, les illustrations SVG une zone large et basse.
   A conteneur identique, la « masse visuelle » variait de ~35 % d'une diapo
   a l'autre (mesure : 245x351 px pour Standard contre 474x326 px pour la
   diapo securite), d'ou l'impression de saut de taille entre les plans.
   On normalise la moyenne geometrique du dessin reellement visible a 330 px
   et on recentre les visuels legerement decadres. Valeurs mesurees sur le
   rendu reel ; a reajuster si un visuel est remplace. */
.hero-slide {
  --slide-scale: 1;
  --slide-x: 0px;
  --slide-y: 0px;
}

.hero-slide[data-slide="grouped"]  { --slide-scale: 1;     --slide-x: 0px;   --slide-y: 0px;  }
.hero-slide[data-slide="standard"] { --slide-scale: 1.126; --slide-x: 1px;   --slide-y: -1px; }
.hero-slide[data-slide="pro"]      { --slide-scale: 1.031; --slide-x: -12px; --slide-y: -5px; }
.hero-slide[data-slide="premium"]  { --slide-scale: 1.086; --slide-x: -12px; --slide-y: 6px;  }
.hero-slide[data-slide="security"] { --slide-scale: 0.839; --slide-x: -2px;  --slide-y: 1px;  }
.hero-slide[data-slide="network"]  { --slide-scale: 0.894; --slide-x: 0px;   --slide-y: 4px;  }

.hero-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 610px);
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  translate: calc(-50% + var(--slide-x)) calc(-50% + var(--slide-y) + 18px);
  scale: calc(var(--slide-scale) * 0.965);
  transform: none;
  /* L'ombre reste fixe : animer un `filter` (drop-shadow + blur) a chaque
     changement de diapo obligeait le navigateur a repeindre l'image entiere,
     ce qui provoquait des images sautees -- le « clignotement » constate. */
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, 0.48));
  transition:
    opacity 0.62s cubic-bezier(0.83, 0, 0.17, 1),
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate, scale;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 0;
}

/* Correctif du clignotement principal.
   Avant : `.is-leaving` coupait l'animation `float` (`animation: none`).
   Le `transform` revenait donc a zero en une seule image alors que la diapo
   etait encore totalement opaque -- un saut vertical mesure jusqu'a ~13 px
   selon le moment du cycle de flottement.
   Maintenant le flottement reste attache a la diapo pendant toute sa sortie.
   Les valeurs sont strictement identiques a celles de `.is-active`, donc
   l'animation n'est pas relancee : elle se poursuit sans rupture. */
.hero-slide.is-active,
.hero-slide.is-leaving {
  animation: float 7s ease-in-out 0.85s infinite;
}

.hero-slide.is-active {
  opacity: 1;
  translate: calc(-50% + var(--slide-x)) calc(-50% + var(--slide-y));
  scale: var(--slide-scale);
  pointer-events: auto;
  z-index: 2;
}

/* Sortie dirigee : la diapo sortante s'efface vers le haut au lieu de
   redescendre vers son etat d'origine, ce qui donnait un va-et-vient.
   `z-index` garantit que la diapo entrante passe toujours au-dessus,
   quel que soit l'ordre des elements dans le HTML. */
.hero-slide.is-leaving {
  opacity: 0;
  translate: calc(-50% + var(--slide-x)) calc(-50% + var(--slide-y) - 14px);
  scale: calc(var(--slide-scale) * 0.985);
  z-index: 1;
}

/* Retour a l'etat de repos, une fois la diapo invisible : sans transition ni
   animation, pour eviter une remontee/descente inutile de 0,9 s en arriere
   plan (et le saut de `transform` qui l'accompagnait). */
.hero-slide.is-resetting {
  transition: none !important;
  animation: none !important;
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -13px, 0); }
}

.hero-slider.is-paused .hero-slide.is-active,
.hero-slider.is-paused .hero-slide.is-leaving {
  animation-play-state: paused;
}

/* --- Puces du slider ------------------------------------------------------
   Elles etaient posees sur l'image (right:12%) et masquaient le visuel des
   offres. Elles passent sous le visuel, centrees, avec une jauge de
   progression sur la puce active.                                        */

.hero-dots {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(4, 16, 32, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  z-index: 2;
}

.hero-dots button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  overflow: hidden;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease;
}

.hero-dots button:hover {
  background: rgba(255, 255, 255, 0.55);
}

.hero-dots button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.hero-dots button.is-active {
  width: 34px;
  background: rgba(255, 255, 255, 0.22);
}

/* Jauge : l'animation redemarre seule puisque la classe vient d'etre posee. */
.hero-dots button.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cyan);
  transform-origin: left center;
  transform: scaleX(0);
  animation: dotProgress var(--hero-slide-duration, 5200ms) linear forwards;
}

.hero-dots.is-paused button.is-active::after {
  animation-play-state: paused;
}

@keyframes dotProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Revelation au scroll -------------------------------------------------
   Le masquage n'est applique que si le JS a pose l'attribut sur <html>,
   afin que le contenu reste visible sans JS.                             */

html[data-reveal-ready] .reveal-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html[data-reveal-ready] .reveal-item.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Micro-interactions ---------------------------------------------------
   Des courbes plus douces que le `ease` par defaut sur les elements
   survoles le plus souvent.                                              */

.btn,
.nav-cta,
.card-link {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.24s ease,
              border-color 0.24s ease,
              box-shadow 0.24s ease;
}

.btn:hover,
.nav-cta:hover {
  transform: translateY(-2px);
}

.btn:active,
.nav-cta:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

.service-card,
.offer-card {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s ease,
              box-shadow 0.32s ease,
              background 0.32s ease;
}

/* --- Accessibilite --------------------------------------------------------
   Mouvement reduit : tout reste visible, plus rien ne bouge.             */

@media (prefers-reduced-motion: reduce) {
  .hero-badges,
  .hero h1,
  .audit-hero h1,
  .hero-text,
  .hero-actions,
  .metrics,
  .audit-metrics,
  .hero-visual,
  .audit-hero-card,
  .hero-badges .eyebrow > span:first-child {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hero-slide {
    transition: opacity 0.2s linear;
    translate: calc(-50% + var(--slide-x)) calc(-50% + var(--slide-y));
    scale: var(--slide-scale);
  }

  .hero-slide.is-active,
  .hero-slide.is-leaving {
    animation: none !important;
  }

  .hero-slide.is-leaving {
    translate: calc(-50% + var(--slide-x)) calc(-50% + var(--slide-y));
    scale: var(--slide-scale);
    filter: none;
  }

  .hero-dots button.is-active::after {
    animation: none;
    transform: scaleX(1);
  }

  html[data-reveal-ready] .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover,
  .nav-cta:hover {
    transform: none;
  }
}

/* =========================================================================
   Assistant ITDesk — bulle flottante sur ordinateur, feuille plein ecran
   sur telephone.
   ========================================================================= */

.ai-chat-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}

/* --- Panneau --------------------------------------------------------------- */

.ai-chat-panel {
  display: flex;
  flex-direction: column;
  width: min(384px, calc(100vw - 28px));
  max-height: min(74vh, 620px);
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 70px rgba(7, 21, 40, 0.26);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transform-origin: right bottom;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-chat-widget.is-open .ai-chat-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --- En-tete --------------------------------------------------------------- */

.ai-chat-head {
  flex: 0 0 auto;
  padding: 15px 16px;
  color: var(--white);
  background: linear-gradient(135deg, #07152b 0%, #0d3b5c 60%, #0e4660 100%);
}

.ai-drag-handle { display: none; }

.ai-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-agent,
.ai-avatar {
  position: relative;
  flex: 0 0 auto;
  display: block;
}

.ai-agent img,
.ai-avatar img {
  display: block;
  width: 44px;
  height: 44px;
  padding: 3px;
  border-radius: 50%;
  background: var(--white);
  object-fit: contain;
}

.ai-agent-dot,
.ai-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid #0d3b5c;
  border-radius: 50%;
  background: var(--mint);
}

.ai-avatar::after { border-color: var(--white); }

.ai-agent-dot.is-off { background: #94a3b8; }

.ai-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ai-head-copy strong {
  display: block;
  font-size: 15px;
  line-height: 1.15;
}

.ai-head-copy small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  line-height: 1.3;
}

.ai-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s ease;
}

.ai-close:hover { background: rgba(255, 255, 255, 0.22); }

.ai-close svg,
.ai-chat-form svg { width: 18px; height: 18px; }

/* --- Conversation ---------------------------------------------------------- */

.ai-chat-body {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f6f9fc;
  scrollbar-width: thin;
}

.ai-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: aiBubbleIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-row--user { align-items: flex-end; }
.ai-row--bot  { align-items: flex-start; }

@keyframes aiBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ai-message {
  max-width: 90%;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
}

.ai-message.bot {
  color: #2c3d52;
  background: var(--white);
  border: 1px solid #e6edf5;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.ai-message.user {
  color: #05323c;
  background: linear-gradient(135deg, rgba(25, 199, 223, 0.22), rgba(43, 212, 159, 0.22));
  border: 1px solid rgba(25, 199, 223, 0.28);
  border-radius: 14px 14px 4px 14px;
}

/* Indicateur de saisie : trois points, plutot qu'un texte fige. */
.ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px;
}

.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9fb1c4;
  animation: aiTypingDot 1.1s ease-in-out infinite;
}

.ai-typing span:nth-child(2) { animation-delay: 0.16s; }
.ai-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes aiTypingDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}

/* --- Actions proposees sous une reponse ------------------------------------ */

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
}

.ai-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d7e3ef;
  border-radius: 10px;
  background: var(--white);
  color: #0d3b5c;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s ease, background 0.18s ease;
}

.ai-action svg { width: 15px; height: 15px; flex: 0 0 auto; }

.ai-action:hover {
  transform: translateY(-1px);
  border-color: rgba(25, 199, 223, 0.6);
  background: #f4fcfe;
}

.ai-action.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--mint));
  color: #032129;
}

/* --- Suggestions ----------------------------------------------------------- */

/* Retour a la ligne plutot que defilement horizontal : une puce a moitie
   visible sur le bord droit se lit comme un defaut d'affichage. */
.ai-suggestions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 16px 3px;
  background: var(--white);
  border-top: 1px solid #eef3f8;
}

.ai-suggestion {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 36px;
  padding: 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #dde7f1;
  border-radius: 999px;
  color: #3a4c60;
  background: #fbfcfe;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.ai-suggestion:hover {
  border-color: rgba(25, 199, 223, 0.6);
  color: #064b5a;
  background: #f2fbfd;
}

/* --- Saisie ---------------------------------------------------------------- */

.ai-chat-form {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  padding: 11px 16px 6px;
  background: var(--white);
}

.ai-chat-form input {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #dde7f1;
  border-radius: 12px;
  background: #fbfcfe;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ai-chat-form input:focus {
  background: var(--white);
  border-color: rgba(25, 199, 223, 0.65);
  box-shadow: 0 0 0 4px rgba(25, 199, 223, 0.13);
}

.ai-chat-form button {
  display: grid;
  place-items: center;
  height: 46px;
  border: 0;
  border-radius: 12px;
  color: #032129;
  background: linear-gradient(135deg, var(--cyan), var(--mint));
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.ai-chat-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(25, 199, 223, 0.3);
}

.ai-chat-disclaimer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 16px 10px;
  background: var(--white);
  color: #93a3b5;
  font-size: 11px;
  line-height: 1.4;
}

.ai-chat-disclaimer svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* --- Pied de panneau ------------------------------------------------------- */

.ai-chat-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e6edf5;
  border-top: 1px solid #e6edf5;
}

.ai-foot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  background: var(--white);
  color: #0d3b5c;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.ai-foot-btn svg { width: 16px; height: 16px; }

.ai-foot-btn:hover { background: #f4f9fd; }

.ai-foot-btn--wa { color: #12864a; }
.ai-foot-btn--wa:hover { background: #f1fbf5; }

/* --- Lanceur --------------------------------------------------------------- */

.ai-chat-launcher {
  position: relative;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 999px;
  color: #032129;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(7, 21, 40, 0.2);
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
}

.ai-chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(7, 21, 40, 0.26);
}

.ai-launcher-copy {
  display: grid;
  text-align: left;
}

.ai-launcher-copy strong {
  font-size: 14px;
  line-height: 1.15;
}

.ai-launcher-copy small {
  color: var(--muted);
  font-size: 11.5px;
}

.ai-launcher-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #032129;
  background: linear-gradient(135deg, var(--cyan), var(--mint));
}

.ai-launcher-icon svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }

.ai-chat-widget.is-open .ai-icon-open  { opacity: 0; transform: rotate(90deg) scale(0.6); }
.ai-chat-widget.is-open .ai-icon-close { opacity: 1; transform: none; }

/* Halo discret pour signaler l'assistant sans etre envahissant. */
.ai-chat-launcher::before {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.5;
  animation: aiHalo 3.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

.ai-chat-widget.is-open .ai-chat-launcher::before { animation: none; opacity: 0; }

@keyframes aiHalo {
  0%        { transform: scale(1);    opacity: 0.4; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Telephone : feuille ancree en bas ------------------------------------- */

@media (max-width: 720px) {
  .ai-chat-widget {
    right: 14px;
    bottom: 14px;
    left: 14px;
    justify-items: end;
  }

  .ai-chat-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    /* dvh suit la barre d'adresse mobile ; vh sert de repli. */
    height: 86vh;
    height: 86dvh;
    max-height: none;
    border: 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transform-origin: center bottom;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  .ai-chat-widget.is-open .ai-chat-panel { transform: none; }

  /* Poignee : indique que le panneau est une feuille que l'on referme. */
  .ai-drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
  }

  .ai-chat-head { padding: 12px 16px 15px; }

  .ai-chat-body { padding: 16px 14px; gap: 13px; }

  .ai-message { max-width: 88%; font-size: 14.5px; }

  .ai-suggestions { padding: 11px 14px 3px; }
  .ai-chat-form { padding: 11px 14px 6px; }
  .ai-chat-disclaimer { padding: 2px 14px 10px; }

  /* 16px minimum : en dessous, iOS zoome sur le champ a la mise au point. */
  .ai-chat-form input { font-size: 16px; height: 48px; }
  .ai-chat-form button { height: 48px; }

  .ai-action { min-height: 40px; font-size: 13px; }
  .ai-suggestion { min-height: 38px; font-size: 13px; }
  .ai-foot-btn { min-height: 52px; }

  /* Le lanceur reste une pastille : la barre de texte prend trop de place. */
  .ai-launcher-copy { display: none; }
  .ai-chat-launcher .ai-avatar { display: none; }

  .ai-chat-launcher {
    width: 58px;
    height: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
    justify-self: end;
  }

  .ai-launcher-icon { width: 44px; height: 44px; }

  .ai-chat-launcher::before { right: 7px; bottom: 7px; }

  /* Panneau ouvert : le lanceur disparait pour ne pas flotter par-dessus. */
  .ai-chat-widget.is-open .ai-chat-launcher {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

  /* Fond fige derriere la feuille. */
  body.ai-open {
    overflow: hidden;
    touch-action: none;
  }

  .ai-chat-widget.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 40, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: aiScrimIn 0.28s ease both;
    pointer-events: none;
    z-index: -1;
  }

  @keyframes aiScrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@media (max-width: 380px) {
  .ai-chat-footer { grid-template-columns: 1fr; }
  .ai-message { max-width: 92%; }
}

/* Ecran bas de plafond (telephone en paysage) : la feuille prend tout. */
@media (max-width: 720px) and (max-height: 520px) {
  .ai-chat-panel { height: 100vh; height: 100dvh; border-radius: 0; }
}

/* Petite tablette et telephone en paysage : le panneau flottant reste, mais
   il exploite toute la hauteur utile et le lanceur s'efface quand il est
   ouvert, sinon les deux se superposent. */
@media (min-width: 721px) and (max-width: 1000px) and (max-height: 620px) {
  .ai-chat-panel {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
}

@media (max-width: 1000px) {
  .ai-chat-widget.is-open .ai-chat-launcher {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-panel,
  .ai-row,
  .ai-action,
  .ai-chat-launcher,
  .ai-launcher-icon svg {
    transition: none;
    animation: none;
  }

  .ai-chat-launcher::before,
  .ai-typing span { animation: none; }
  .ai-typing span { opacity: 0.6; }
}

/* =========================================================================
   Offres — public vise, prix unitaire, delai de prise en charge
   ========================================================================= */

/* A qui s'adresse le forfait : le visiteur se reconnait avant de lire
   la liste des prestations. */
.offer-audience {
  margin: 6px 0 0;
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.featured .offer-audience { color: #7fd8ff; }

.offer-card h3 + .offer-audience + p {
  margin-top: 8px;
}

/* Prix ramene au poste : c'est l'argument le plus fort de Confort
   (225 DH contre 433 DH), il etait invisible jusqu'ici. */
.offer-unit {
  margin: 0 0 10px;
  color: #12805f;
  font-size: 13px;
  font-weight: 800;
}

.featured .offer-unit { color: var(--mint); }

.offer-price-quote + .offer-unit {
  color: #667085;
  font-weight: 700;
}

.featured .offer-price-quote + .offer-unit { color: rgba(255, 255, 255, 0.7); }

.offer-commitment {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}

/* Delai de prise en charge : le vrai differenciateur, mis en evidence
   plutot que noye dans la liste. */
.offer-sla {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.06);
  color: #1b3a63;
  font-size: 12.5px;
  line-height: 1.3;
}

/* Libelle puis valeur, l'un sous l'autre : sur une seule ligne, « Prise en
   charge prioritaire sous » se coupait et rejetait la duree a l'oppose. */
.offer-sla > span {
  display: grid;
  gap: 2px;
}

.offer-sla strong {
  color: #10233c;
  font-size: 15px;
  font-weight: 900;
}

.offer-sla svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #2563eb;
}

.featured .offer-sla {
  border-color: rgba(25, 199, 223, 0.4);
  background: rgba(25, 199, 223, 0.12);
  color: rgba(255, 255, 255, 0.86);
}

.featured .offer-sla strong { color: var(--white); }
.featured .offer-sla svg { color: var(--cyan); }

.offer-card ul { margin-top: 22px; }

.offer-card li > span {
  flex: 1 1 auto;
  min-width: 0;
}

.offer-card li strong {
  color: #10233c;
  font-weight: 800;
}

.featured li strong { color: var(--white); }

/* Mention legere sous la grille : evite les malentendus sur le materiel
   et les licences, et precise ce que « heures ouvrees » recouvre. */
.offer-footnote {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 780px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
}

.offer-footnote svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: #94a3b8;
}

/* Cartes courtes : le comparatif reste lisible, le perimetre complet est
   presente dans une fenetre de details accessible au clavier. */
.offer-card {
  min-height: 610px;
}

.offer-highlights {
  margin-bottom: 22px;
}

.offer-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.offer-actions .card-link {
  margin-top: 0;
}

.offer-details-button {
  min-height: 44px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  color: #16365f;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.offer-details-button:hover {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
  transform: translateY(-1px);
}

.featured .offer-details-button {
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
}

.featured .offer-details-button:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.offer-details-button:focus-visible,
.offer-dialog-close:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.32);
  outline-offset: 3px;
}

.offer-dialog {
  width: min(880px, calc(100% - 28px));
  max-height: min(860px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 32px 90px rgba(7, 21, 43, 0.34);
  overflow: auto;
}

.offer-dialog::backdrop {
  background: rgba(4, 15, 31, 0.72);
  backdrop-filter: blur(5px);
}

.offer-dialog-panel {
  position: relative;
  padding: 38px;
}

.offer-dialog-panel > .section-kicker {
  margin-bottom: 8px;
}

.offer-dialog-panel h2 {
  max-width: calc(100% - 48px);
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
}

.offer-dialog-lead {
  max-width: 680px;
  margin: 12px 0 28px;
  color: var(--muted);
}

.offer-dialog-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #f6f8fb;
  cursor: pointer;
}

.offer-dialog-close svg {
  width: 19px;
  height: 19px;
}

.offer-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 18px;
}

.offer-dialog-grid > div {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.offer-dialog-grid h3 {
  margin: 0 0 14px;
  font-size: 17px;
}

.offer-dialog-inherits {
  margin: -3px 0 14px;
  color: #16365f;
  font-size: 13px;
  font-weight: 800;
}

.offer-dialog-grid ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 19px;
  color: #475467;
  font-size: 14px;
  line-height: 1.55;
}

.offer-dialog-cta {
  width: fit-content;
  min-width: 190px;
  margin-top: 24px;
  padding: 0 22px;
}

@media (max-width: 680px) {
  .offer-sla {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .offer-footnote {
    margin-top: 20px;
    font-size: 12px;
  }

  .offer-dialog-panel {
    padding: 28px 20px 22px;
  }

  .offer-dialog-close {
    top: 15px;
    right: 15px;
  }

  .offer-dialog-grid {
    grid-template-columns: 1fr;
  }

  .offer-dialog-grid > div {
    padding: 18px;
  }

  .offer-dialog-cta {
    width: 100%;
  }
}

/* Les liens du menu pointent vers #services, #offers, #contact… L'en-tete
   etant fixe, la cible arrivait masquee dessous.
   `scroll-padding` sur <html> reste sans effet ici : `overflow-x: hidden`
   deplace le conteneur de defilement. La marge posee sur la cible, elle,
   est respectee quel que soit l'element qui defile. */
section[id],
.section[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 980px) {
  section[id],
  .section[id] { scroll-margin-top: 78px; }
}