/* Navigation SIA — barre compacte (pastilles, 14–15px, fond nuit) */
:root {
  --sia-topnav-height: 48px;
  /* Chrome haut = topnav + safe-area (status bar / encoche).
     Les panneaux fixed sous la barre utilisent --sia-chrome-top, pas seulement --sia-topnav-height. */
  --sia-chrome-top: calc(var(--sia-topnav-height) + var(--sia-safe-top, env(safe-area-inset-top, 0px)));
  --sia-nav-font: 0.9rem; /* ~14.4px @ root 16 / ~16px @ root 18 */
  --sia-nav-pill-bg: #17176B;
  --sia-nav-icon-glow: rgba(23, 23, 107, 0.55);
}

#nav-placeholder {
  min-height: var(--sia-topnav-height);
  flex-shrink: 0;
}

.topnav {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--sia-bg-deep, #080B12);
  border-bottom: 1px solid rgba(221, 229, 245, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

.topnav.menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1019;
  pointer-events: auto;
}

.topnav-inner { 
  width: 100%;
  max-width: 100%;
  margin: 0 auto; 
  padding: 5px clamp(12px, 1.5vw, 20px); 
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1vw, 16px); 
  min-height: var(--sia-topnav-height);
  box-sizing: border-box;
  min-width: 0;
}

/* Spacer desktop retiré : clusters gauche / centre / droite occupent la grille */
.topnav-inner::after {
  content: none;
  display: none;
}

.topnav-inner > .nav-cluster-center {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
}

.topnav-inner > .burger-menu {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  z-index: 3;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--sia-text-on-dark, #DDE5F5);
  transition: opacity 0.2s;
  padding-top: 2px;
}

.brand:hover {
  opacity: 1;
}

/* A1 — logo + nom d'entreprise à droite, verticale sous le nom */
.brand.brand--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  gap: 0;
  border-radius: 8px;
  min-width: 0;
  max-width: min(340px, 38vw);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.brand.brand--horizontal .brand-logo-horizontal {
  height: 36px;
  width: auto;
  max-width: min(120px, 22vw);
  flex-shrink: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  filter: none;
}

/* Bascule logo blanc (défaut) / noir (thème clair)
   Spécificité >= .brand.brand--horizontal .brand-logo-horizontal pour ne pas être écrasée. */
.brand.brand--horizontal .brand-logo-horizontal--on-dark {
  display: block;
}

.brand.brand--horizontal .brand-logo-horizontal--on-light {
  display: none;
}

[data-theme="light"] .brand.brand--horizontal .brand-logo-horizontal--on-light {
  display: block;
}

[data-theme="light"] .brand.brand--horizontal .brand-logo-horizontal--on-dark {
  display: none;
}

/* Thème clair : logo noir directement sur la topnav claire, sans pastille */
[data-theme="light"] .brand.brand--horizontal .brand-logo-horizontal {
  filter: none;
}

.brand .logo { 
  width: auto; 
  height: 4rem; 
  aspect-ratio: 1;
  background: transparent;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 
    0 0 24px rgba(23, 63, 155, 0.2);
}

.brand .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.brand .title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 0;
}

.brand .brand-name {
  font-family: var(--font-display, 'Source Serif Pro', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--sia-text-on-dark, #DDE5F5);
}

.brand .brand-line {
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--sia-muted, #5C6575);
}

.brand .brand-baseline {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sia-muted, #5C6575);
  opacity: 0.9;
}

/* Co-branding : nom d'org à côté du logo, verticale en dessous (UI only) */
.brand-cobrand {
  display: none; /* révélé en flex via JS si org ou verticale */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  margin: 0 0 0 10px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in oklab, var(--sia-text-on-dark, #DDE5F5) 35%, transparent);
  max-width: min(240px, 28vw);
  line-height: 1.15;
  gap: 1px;
}

.brand-org-name,
.brand-vertical-name {
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.brand-org-name:not(:empty) {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #17176B;
}

.brand-vertical-name:not(:empty) {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #5C6575;
  opacity: 1;
}

.brand-org-name:not(:empty) + .brand-vertical-name:not(:empty)::before {
  content: none;
}

[data-theme="light"] .brand-cobrand {
  border-left-color: color-mix(in oklab, var(--sia-text-on-light, #17176B) 30%, transparent);
}

[data-theme="light"] .brand-org-name,
[data-theme="light"] .brand-org-name:not(:empty) {
  color: #17176B;
  font-weight: 400;
}

[data-theme="light"] .brand-vertical-name,
[data-theme="light"] .brand-vertical-name:not(:empty) {
  color: #5C6575;
  font-weight: 400;
  opacity: 1;
}

[data-theme="dark"] .brand-org-name,
[data-theme="dark"] .brand-org-name:not(:empty) {
  color: #DDE5F5;
}

[data-theme="dark"] .brand-vertical-name,
[data-theme="dark"] .brand-vertical-name:not(:empty) {
  color: #5C6575;
}

/* ============================================
   Maquette : clusters gauche / centre / droite
   ============================================ */

.nav-cluster-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.nav-cluster-center .brand.brand--horizontal {
  max-width: none;
  justify-content: center;
}

.nav-cluster-center .brand.brand--horizontal .brand-logo-horizontal {
  object-position: center;
  height: 40px;
  max-width: min(180px, 34vw);
}

.nav-product-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

[data-theme="light"] .nav-product-switch {
  background: #FFFFFF;
  border-color: rgba(92, 101, 117, 0.28);
}

.nav-product-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sia-text-on-dark, #DDE5F5) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
}

[data-theme="light"] .nav-product-tab {
  color: #5C6575 !important;
}

.nav-product-tab:hover {
  background: color-mix(in oklab, #17176B 12%, transparent) !important;
  color: inherit !important;
}

.nav-product-tab.active {
  background: #17176B !important;
  color: #f7f7f7 !important;
  box-shadow: none !important;
}

.nav-cluster-left,
.nav-cluster-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: auto;
}

.nav-icon-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  gap: 0 !important;
  background: #dde5f5;
  color: #17176B;
  border-color: transparent;
  box-shadow: none;
}

.nav-icon-cluster .nav-icon {
  filter: none;
  color: #17176B;
  stroke: currentColor;
}

.nav-icon-cluster img.nav-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3200%) hue-rotate(222deg) brightness(90%) contrast(105%);
}

.nav-icon-cluster .nav-icon-btn:hover,
.nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn:hover,
.topnav .nav-icon-cluster a.nav-icon-btn:hover {
  background: #cfd8ee;
  color: #17176B;
  box-shadow: none;
  border-color: transparent;
}

.nav-icon-cluster .nav-icon-btn:hover .nav-icon,
.nav-icon-cluster .nav-icon-btn:hover img.nav-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3200%) hue-rotate(222deg) brightness(90%) contrast(105%);
}

.nav-icon-cluster a.nav-icon-btn.active,
.nav-icon-cluster .nav-dropdown-toggle.has-active-child,
.topnav .nav-icon-cluster a.nav-icon-btn.active {
  background: #17176B;
  color: #f7f7f7;
  box-shadow: none;
}

.nav-icon-cluster a.nav-icon-btn.active .nav-icon,
.nav-icon-cluster .nav-dropdown-toggle.has-active-child .nav-icon {
  color: #f7f7f7;
  stroke: currentColor;
  filter: none;
}

.nav-icon-cluster a.nav-icon-btn.active img.nav-icon,
.nav-icon-cluster .nav-dropdown-toggle.has-active-child img.nav-icon {
  filter: brightness(0) invert(97%);
}

.nav-icon-btn span,
.nav-icon-btn .nav-dropdown-chevron {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nav-icon-cluster .nav-dropdown {
  display: flex;
  align-items: center;
}

.nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn {
  margin: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #dde5f5;
  color: #17176B;
  border-color: transparent;
  box-shadow: none;
  gap: 0 !important;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-size: var(--sia-nav-font);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f7f7f7;
  padding: 7px 10px;
  border-radius: 9999px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.topnav .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--sia-nav-icon-glow));
}

/* Icônes charte : fill natif #5c6575 + halo violet léger (charte barre) */
.topnav img.nav-icon {
  stroke: none;
  fill: none;
  filter: drop-shadow(0 0 6px var(--sia-nav-icon-glow));
  opacity: 1;
}

/* Actif / hover : icônes en #f7f7f7, halo un peu plus fort */
.topnav a:hover img.nav-icon,
.topnav a.active img.nav-icon,
.topnav button:hover img.nav-icon,
.topnav button.active img.nav-icon,
.topnav .nav-dropdown-toggle:hover img.nav-icon,
.topnav .nav-dropdown-toggle.has-active-child img.nav-icon {
  filter: brightness(0) invert(97%) drop-shadow(0 0 8px var(--sia-nav-icon-glow));
  opacity: 1;
}

.topnav a:hover {
  background: rgba(23, 63, 155, 0.35);
  border-color: transparent;
  color: #f7f7f7;
}

.topnav a.active {
  background: var(--sia-nav-pill-bg, #17176B);
  color: #f7f7f7;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(23, 63, 155, 0.45);
}

.topnav a.nav-link-muted {
  font-size: 0.82rem;
  font-weight: 500;
  color: #f7f7f7;
  opacity: 0.8;
}

.nav-admin-link {
  position: relative;
}

.nav-admin-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #E52827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.nav-agents-toggle {
  position: relative;
}

#nav-agents-label {
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-agents-badge {
  position: static;
  margin-left: 2px;
  flex-shrink: 0;
}

.nav-agents-menu {
  min-width: 280px;
  max-width: min(360px, 92vw);
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

.nav-agents-group-label {
  padding: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(247, 247, 247, 0.55);
}

.nav-agents-item {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
}

.nav-agents-item-name {
  font-weight: 600;
}

.nav-agents-meta {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.65;
}

.nav-agents-empty {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(247, 247, 247, 0.7);
}

[data-theme="light"] .nav-agents-group-label {
  color: #5C6575;
}

[data-theme="light"] .nav-agents-empty {
  color: #5C6575;
}

/* ============================================
   SECTION HÉRO AVEC GRAND LOGO SIA
   Utilisable sur les pages principales
   ============================================ */

.sia-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, #080B12 0%, #1A1F2E 50%, #080B12 100%);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Effet de particules subtil en arrière-plan */
.sia-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(199, 163, 94, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(23, 63, 155, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.sia-hero-logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(199, 163, 94, 0.1);
  border: 3px solid #c7a35e;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 30px rgba(199, 163, 94, 0.4),
    0 0 60px rgba(23, 63, 155, 0.25),
    inset 0 0 20px rgba(199, 163, 94, 0.1);
  animation: hero-logo-glow 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes hero-logo-glow {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(199, 163, 94, 0.4),
      0 0 60px rgba(23, 63, 155, 0.25),
      inset 0 0 20px rgba(199, 163, 94, 0.1);
    transform: scale(1);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(199, 163, 94, 0.6),
      0 0 80px rgba(23, 63, 155, 0.35),
      inset 0 0 30px rgba(199, 163, 94, 0.15);
    transform: scale(1.02);
  }
}

.sia-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.sia-hero-title {
  margin-top: 1.25rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #DDE5F5;
  text-align: center;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

.sia-hero-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #5C6575;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.sia-hero-tagline {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #c7a35e;
  text-align: center;
  font-style: italic;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

/* Animation d'entrée au chargement */
@keyframes hero-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sia-hero-logo {
  animation: hero-fade-in 0.6s ease-out, hero-logo-glow 4s ease-in-out infinite 0.6s;
}

.sia-hero-title {
  animation: hero-fade-in 0.6s ease-out 0.2s both;
}

.sia-hero-subtitle {
  animation: hero-fade-in 0.6s ease-out 0.3s both;
}

.sia-hero-tagline {
  animation: hero-fade-in 0.6s ease-out 0.4s both;
}

/* ============================================
   NAVIGATION LIENS CONTAINER
   ============================================ */

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: stretch;
  justify-content: stretch;
  gap: clamp(4px, 0.6vw, 12px);
  margin-left: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  pointer-events: none;
}

.nav-links > * {
  pointer-events: auto;
}

/* Éléments réservés au menu burger mobile — jamais affichés sur desktop */
.nav-mobile-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .topnav,
  .topnav-inner,
  .nav-links {
    overflow: visible;
  }

  .nav-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    flex-wrap: nowrap;
    justify-content: stretch;
    min-width: 0;
    gap: 8px;
  }

  .nav-cluster-left {
    grid-column: 1;
    justify-self: start;
    overflow: visible;
  }

  .nav-cluster-left .nav-icon-cluster,
  .nav-cluster-left .nav-dropdown {
    overflow: visible;
  }

  /* Icônes à gauche : le menu s’ouvre vers la droite (évite la coupe hors écran) */
  .nav-cluster-left .nav-dropdown-menu {
    left: 0;
    right: auto;
  }

  .nav-cluster-right {
    grid-column: 3;
    justify-self: end;
  }

  .nav-dropdown-agents-keep {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  /* Nav publique : logo à gauche, pastilles centrées dans la barre. */
  #public-navigation .topnav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  #public-navigation .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    z-index: 2;
  }

  #public-navigation .nav-links {
    display: flex;
    flex-wrap: nowrap;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    gap: clamp(2px, 0.5vw, 10px);
  }

}

/* ============================================
   DROPDOWN « PLUS » (desktop)
   ============================================ */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 7px 10px;
  font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
  font-size: var(--sia-nav-font);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f7f7f7;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.nav-dropdown-toggle:hover {
  background: rgba(23, 63, 155, 0.35);
  border-color: transparent;
  color: #f7f7f7;
}

.nav-dropdown.open .nav-dropdown-toggle {
  background: rgba(23, 63, 155, 0.4);
  border-color: transparent;
}

.nav-dropdown-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.65;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: var(--sia-bg-deep, #080B12);
  border: 1px solid var(--sia-bg-raised, #111723);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 1040;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  display: flex !important;
  width: 100%;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  box-sizing: border-box;
}

.nav-dropdown-menu a[style*="display: none"] {
  display: none !important;
}

.nav-dropdown-menu a:hover {
  background: rgba(23, 63, 155, 0.28);
}

.nav-dropdown-menu a.active {
  background: var(--sia-brand, #17176B);
}

.nav-dropdown-menu .nav-pwa-install {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.nav-dropdown-menu .nav-pwa-install[hidden] {
  display: none !important;
}

.nav-dropdown-menu .nav-pwa-install:hover {
  background: rgba(23, 63, 155, 0.28);
}

.nav-dropdown-menu .nav-pwa-install .nav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--sia-bg-raised, #111723);
  margin: 4px 8px;
}

/* Highlight du toggle quand un lien enfant est actif — pastille comme l'actif */
.nav-dropdown-toggle.has-active-child {
  background: var(--sia-nav-pill-bg, #17176B);
  border-color: transparent;
  color: #f7f7f7;
  box-shadow: 0 2px 10px rgba(23, 63, 155, 0.45);
}

/* Thème clair */
[data-theme="light"] .nav-dropdown-toggle {
  color: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .nav-dropdown-toggle:hover {
  background: rgba(23, 63, 155, 0.14);
  border-color: transparent;
  color: var(--sia-bg-deep, #080B12);
}

[data-theme="light"] .nav-dropdown.open .nav-dropdown-toggle {
  background: rgba(23, 63, 155, 0.18);
  border-color: transparent;
}

[data-theme="light"] .nav-dropdown-toggle.has-active-child {
  background: var(--sia-nav-pill-bg, #17176B);
  color: #f7f7f7;
}

[data-theme="light"] .nav-icon-cluster .nav-icon,
[data-theme="light"] .nav-icon-cluster img.nav-icon,
[data-theme="light"] .topnav .nav-icon-cluster .nav-icon,
[data-theme="light"] .topnav .nav-icon-cluster img.nav-icon {
  filter: none;
}

[data-theme="light"] .nav-icon-cluster img.nav-icon,
[data-theme="light"] .topnav .nav-icon-cluster img.nav-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3200%) hue-rotate(222deg) brightness(90%) contrast(105%);
}

[data-theme="light"] .nav-icon-cluster a.nav-icon-btn:hover,
[data-theme="light"] .topnav .nav-icon-cluster a.nav-icon-btn:hover {
  background: #cfd8ee;
  color: #17176B;
  box-shadow: none;
}

[data-theme="light"] .nav-icon-cluster a.nav-icon-btn:hover img.nav-icon,
[data-theme="light"] .topnav .nav-icon-cluster a.nav-icon-btn:hover img.nav-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3200%) hue-rotate(222deg) brightness(90%) contrast(105%);
}

[data-theme="light"] .nav-icon-cluster a.nav-icon-btn.active,
[data-theme="light"] .topnav .nav-icon-cluster a.nav-icon-btn.active {
  background: #17176B;
  color: #f7f7f7;
  box-shadow: none;
}

[data-theme="light"] .nav-icon-cluster a.nav-icon-btn.active img.nav-icon,
[data-theme="light"] .topnav .nav-icon-cluster a.nav-icon-btn.active img.nav-icon,
[data-theme="light"] .nav-icon-cluster .nav-dropdown-toggle.has-active-child img.nav-icon {
  filter: brightness(0) invert(97%);
}

[data-theme="light"] .nav-dropdown-menu {
  background: var(--sia-bg-light, #F7F7F7);
  border-color: rgba(92, 101, 117, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .nav-dropdown-menu a {
  color: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .nav-dropdown-menu a:hover {
  background: rgba(23, 63, 155, 0.12);
}

[data-theme="light"] .nav-dropdown-menu a.active {
  background: var(--sia-brand, #17176B);
  color: var(--sia-text-on-dark, #DDE5F5);
}

[data-theme="light"] .nav-dropdown-menu .nav-pwa-install {
  color: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .nav-dropdown-menu .nav-pwa-install:hover {
  background: rgba(23, 63, 155, 0.12);
}

[data-theme="light"] .nav-dropdown-menu a.nav-link-muted {
  color: #2D4570;
}

[data-theme="light"] .nav-dropdown-divider {
  background: rgba(92, 101, 117, 0.3);
}

/* ============================================
   BOUTON BURGER (caché par défaut sur desktop)
   ============================================ */

.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1030;
}

.burger-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--sia-text-on-dark, #DDE5F5);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animation du burger en X quand ouvert */
.burger-menu.open .burger-bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.burger-menu.open .burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger-menu.open .burger-bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* ============================================
   MEDIA QUERIES - RESPONSIVE MOBILE
   ============================================ */

/* Tablette et mobile (≤ 1023px — aligné layout app / chat) */
@media (max-width: 1023px) {
  :root {
    --sia-topnav-height: 48px;
    --sia-chrome-top: calc(var(--sia-topnav-height) + var(--sia-safe-top, env(safe-area-inset-top, 0px)));
  }

  .topnav-inner {
    display: flex;
    padding: 4px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    min-height: var(--sia-topnav-height);
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
  }

  .topnav-inner::after {
    content: none;
    display: none;
  }

  .topnav-inner > .brand,
  .topnav-inner > .nav-cluster-center,
  .topnav-inner > .burger-menu {
    grid-column: auto;
  }

  .nav-cluster-center {
    flex-direction: row;
    gap: 8px;
    justify-self: center;
  }

  .nav-cluster-center .brand.brand--horizontal .brand-logo-horizontal {
    height: 28px;
  }

  .nav-product-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }

  .nav-product-tab {
    min-width: 56px;
    padding: 4px 10px !important;
    font-size: 0.8rem;
  }

  .brand {
    max-width: calc(100% - 50px);
    min-width: 0;
    gap: 6px;
    padding-top: 0;
  }

  .brand.brand--horizontal .brand-logo-horizontal {
    height: 36px;
    max-width: min(160px, 46vw);
  }

  .brand .logo {
    height: 2rem;
    box-shadow: none;
    padding: 2px;
  }
  
  .brand .title {
    font-size: 0.75rem;
  }
  
  .brand .brand-baseline {
    display: none;
  }
  
  /* Afficher le bouton burger */
  .burger-menu {
    display: flex;
  }

  /* Chat mobile : topnav collapse (0 hauteur) — le burger vit dans
     .chat-header-mobile à la même hauteur que chez ChatGPT (juste sous
     la status bar). La nav reste dans le DOM pour le panneau.
     --sia-chrome-top = safe-area seule (plus de topnav visuelle). */
  body.sia-chat-page {
    --sia-topnav-height: 0px;
    --sia-chrome-top: var(--sia-safe-top, env(safe-area-inset-top, 0px));
  }

  body.sia-chat-page > .topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    min-height: 0;
    padding-top: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    z-index: 1020;
  }

  body.sia-chat-page > .topnav .topnav-inner {
    min-height: 0;
    height: 0;
    padding: 0;
    overflow: visible;
  }

  body.sia-chat-page > .topnav .brand,
  body.sia-chat-page > .topnav .nav-cluster-center {
    display: none !important;
  }

  /* Burger topnav : gardé pour le click() JS, invisible (le visible est
     .chat-nav-burger dans le header chat) */
  body.sia-chat-page > .topnav .burger-menu {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
  }

  body.sia-chat-page > .topnav .nav-links {
    position: fixed;
    top: var(--sia-chrome-top, var(--sia-safe-top, 0px));
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--sia-chrome-top, var(--sia-safe-top, 0px)));
  }
  
  /* Menu de navigation mobile : panneau déroulant sous la barre */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-column: auto;
    justify-self: stretch;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    background: var(--sia-bg-deep);
    border-top: 1px solid #1A1F2E;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    padding: 8px 0 max(10px, env(safe-area-inset-bottom));
    gap: 2px;
    z-index: 1030;
    max-height: calc(100dvh - var(--sia-chrome-top, var(--sia-topnav-height)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-links.open {
    display: flex;
    pointer-events: auto;
  }

  .nav-links > * {
    pointer-events: auto;
  }

  #nav-agents-hub,
  #nav-chat-hub {
    display: none !important;
  }

  .nav-cluster-left,
  .nav-cluster-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
  }

  .nav-icon-cluster {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
  }

  .nav-icon-btn,
  .nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn {
    width: 100%;
    height: auto;
    min-height: 44px;
    min-width: 0;
    justify-content: flex-start;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    gap: 7px !important;
  }

  .nav-icon-btn span,
  .nav-icon-btn .nav-dropdown-chevron {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .nav-dropdown-agents-keep {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    pointer-events: auto;
  }

  .brand-cobrand {
    padding: 8px 16px 12px;
    margin: 0;
    border-left: none;
    max-width: none;
  }
  
  .nav-links a {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    text-align: left;
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  /* Entrée « Mes conversations » — bouton stylé comme les liens du menu burger */
  .nav-links .nav-mobile-only {
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-family: var(--font-sans, 'Source Sans Pro', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #f7f7f7;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links .nav-mobile-only:active {
    background: rgba(23, 63, 155, 0.15);
  }

  [data-theme="light"] .nav-links .nav-mobile-only {
    color: var(--sia-muted, #5C6575);
  }

  .nav-links {
    margin-left: 0;
  }
  
  .nav-links a:hover {
    background: rgba(23, 63, 155, 0.15);
  }
  
  .nav-links a.active {
    background: var(--sia-brand, #17176B);
  }

  /* Dropdown aplati en liste simple sur mobile */
  .nav-dropdown {
    display: contents;
  }

  .nav-dropdown-toggle {
    display: none;
  }

  .nav-dropdown-menu {
    display: contents !important;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }

  .nav-dropdown-menu a {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 1rem;
    min-height: 44px;
  }

  .nav-dropdown-menu .nav-pwa-install {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1rem;
    min-height: 44px;
  }

  .nav-dropdown-divider {
    width: calc(100% - 32px);
    margin: 4px 16px;
  }

  [data-theme="light"] .nav-links {
    background: var(--sia-bg-light, #F7F7F7);
    border-top-color: rgba(92, 101, 117, 0.35);
  }

  [data-theme="light"] .nav-links a {
    color: var(--sia-muted, #5C6575);
  }

  [data-theme="light"] .nav-links a.nav-link-muted {
    color: var(--sia-muted, #5C6575);
  }

  [data-theme="light"] .nav-links a:hover {
    background: rgba(23, 63, 155, 0.12);
    color: var(--sia-brand, #17176B);
  }

  [data-theme="light"] .nav-links a.active {
    color: #f7f7f7;
  }
  
  /* Bouton burger — style ChatGPT : à gauche (avant le logo), traits nets,
     sans pastille. Inner 28×20 (padding 12px 8px) : conserve la géométrie
     space-between attendue par l'animation d'ouverture (translateY 8.5px). */
  .burger-menu {
    order: -1;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: transparent;
  }

  .burger-menu:active {
    background: color-mix(in oklab, var(--sia-text-on-dark, #DDE5F5) 12%, transparent);
  }

  /* Hero réduit en mini-bandeau sur mobile */
  .sia-hero {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
  }

  .sia-hero::before {
    display: none;
  }

  .sia-hero-logo {
    width: 36px;
    height: 36px;
    padding: 4px;
    border-width: 1.5px;
    box-shadow: none;
    animation: none;
    flex-shrink: 0;
  }

  .sia-hero-title {
    font-size: 0.95rem;
    margin: 0;
    text-align: left;
  }

  .sia-hero-subtitle,
  .sia-hero-tagline {
    display: none;
  }
}

/* ============================================
   THEME TOGGLE (nav)
   ============================================ */

.sia-theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  background: rgba(23, 63, 155, 0.15);
  border-radius: 9999px;
  padding: 3px;
}

.sia-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sia-text-on-dark, #DDE5F5);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.sia-theme-btn:hover {
  background: rgba(92, 101, 117, 0.25);
  color: #ffffff;
}

.sia-theme-btn.active {
  background: var(--sia-brand, #4B7BF5);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   MODE CLAIR DE LA NAV
   ============================================ */

[data-theme="light"] .topnav {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 1024px) {
  html[data-theme="light"] body.sia-chat-page > .topnav {
    background: #FFFFFF;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  [data-theme="light"] .nav-links {
    background: transparent;
  }
}

[data-theme="light"] .brand,
[data-theme="light"] .brand .brand-name {
  color: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .brand .brand-line,
[data-theme="light"] .brand .brand-baseline {
  color: var(--sia-muted, #5C6575);
}

/* Clair : texte inactif #5C6575 (lisible sur fond #F7F7F7) ; actif = pastille charte */
[data-theme="light"] .topnav a {
  color: var(--sia-muted, #5C6575);
}

[data-theme="light"] .topnav a.nav-link-muted {
  color: var(--sia-muted, #5C6575);
}

[data-theme="light"] .topnav a:hover {
  background: rgba(23, 63, 155, 0.14);
  border-color: transparent;
  color: var(--sia-brand, #17176B);
}

[data-theme="light"] .topnav a.active {
  background: var(--sia-brand, #17176B);
  color: #f7f7f7;
}

[data-theme="light"] .topnav a:hover img.nav-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(78%) saturate(2500%) hue-rotate(213deg) brightness(92%) contrast(95%);
}

[data-theme="light"] .topnav a.active img.nav-icon {
  filter: brightness(0) invert(97%);
}

[data-theme="light"] .nav-dropdown-toggle {
  color: var(--sia-muted, #5C6575);
}

[data-theme="light"] .nav-cluster-right .nav-dropdown-toggle,
[data-theme="light"] .nav-cluster-right > a#nav-deconnexion {
  color: #17176B;
}

[data-theme="light"] .nav-cluster-right .nav-dropdown-toggle img.nav-icon,
[data-theme="light"] .topnav .nav-cluster-right .nav-dropdown-toggle img.nav-icon,
[data-theme="light"] .topnav .nav-cluster-right .nav-dropdown-toggle:hover img.nav-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3200%) hue-rotate(222deg) brightness(90%) contrast(105%);
}

[data-theme="light"] .nav-cluster-right .nav-dropdown-toggle.has-active-child img.nav-icon,
[data-theme="light"] .topnav .nav-cluster-right .nav-dropdown-toggle.has-active-child img.nav-icon {
  filter: brightness(0) invert(97%);
}

[data-theme="light"] .nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn,
.nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn,
[data-theme="light"] .nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn:hover,
.nav-icon-cluster .nav-dropdown.open .nav-dropdown-toggle.nav-icon-btn,
[data-theme="light"] .nav-icon-cluster .nav-dropdown.open .nav-dropdown-toggle.nav-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #dde5f5;
  color: #17176B;
  box-shadow: none;
  border-color: transparent;
}

[data-theme="light"] .nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn:hover,
.nav-icon-cluster .nav-dropdown-toggle.nav-icon-btn:hover {
  background: #cfd8ee;
}

[data-theme="light"] .nav-icon-cluster .nav-dropdown-toggle.has-active-child,
.nav-icon-cluster .nav-dropdown-toggle.has-active-child {
  background: #17176B;
  color: #f7f7f7;
  box-shadow: none;
}

[data-theme="light"] .burger-bar {
  background: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .burger-menu:active {
  background: rgba(17, 23, 35, 0.08);
}

[data-theme="light"] .sia-theme-toggle {
  background: rgba(17, 23, 35, 0.1);
}

[data-theme="light"] .sia-theme-btn {
  color: var(--sia-text-on-light, #17176B);
}

[data-theme="light"] .sia-theme-btn:hover {
  background: rgba(17, 23, 35, 0.12);
  color: var(--sia-bg-deep, #080B12);
}

[data-theme="light"] .sia-theme-btn.active {
  background: var(--sia-brand, #17176B);
  color: var(--sia-text-on-dark, #DDE5F5);
}

@media (max-width: 1023px) {
  [data-theme="light"] .nav-links {
    background: var(--sia-bg-light, #F7F7F7);
  }
}

/* ============================================
   THEME TOGGLE RESPONSIVE
   ============================================ */

@media (max-width: 1023px) {
  .sia-theme-toggle {
    margin-left: 0;
    margin-right: 2px;
    flex-shrink: 0;
    padding: 2px;
  }

  .sia-theme-btn {
    width: 28px;
    height: 28px;
  }

  .sia-theme-btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .sia-theme-btn {
    width: 28px;
    height: 28px;
  }

  .sia-theme-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* Petit mobile (≤ 480px) */
@media (max-width: 480px) {
  :root {
    --sia-topnav-height: 44px;
  }

  /* Co-branding : nom d'org masqué sur petit écran (tronqué, illisible).
     La verticale (SIA Notaires…) reste visible. */
  .brand-org-name {
    display: none !important;
  }

  .brand-org-name:not(:empty) + .brand-vertical-name:not(:empty)::before {
    content: none;
  }

  .brand-cobrand {
    max-width: min(160px, 42vw);
  }

  .topnav-inner {
    padding: 3px 8px;
    min-height: var(--sia-topnav-height);
  }
  
  .brand .logo {
    height: 1.6rem;
  }
  
  .brand .title {
    font-size: 0.7rem;
  }
  
  .brand .brand-line {
    font-size: 0.65rem;
  }
  
  .nav-links a {
    padding: 8px 12px;
    font-size: 0.95rem;
    min-height: 48px; /* zone tactile Android 48dp, meme sur petit mobile */
  }
  
  .burger-menu {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    box-sizing: border-box;
  }

  .sia-hero {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
  }

  .sia-hero-logo {
    width: 28px;
    height: 28px;
  }

  .sia-hero-title {
    font-size: 0.8rem;
  }
}

/* ============================================
   Guide install PWA iOS (Safari)
   ============================================ */

.sia-pwa-ios-guide {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sia-pwa-ios-guide.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sia-pwa-ios-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, 0.55);
}

.sia-pwa-ios-guide-card {
  position: relative;
  width: min(420px, 100%);
  margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: var(--sia-bg-deep, #080B12);
  color: var(--sia-text-on-dark, #DDE5F5);
  border: 1px solid rgba(221, 229, 245, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.sia-pwa-ios-guide-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
}

.sia-pwa-ios-guide-steps {
  margin: 0 0 10px;
  padding-left: 1.25rem;
  line-height: 1.45;
  font-size: 0.92rem;
}

.sia-pwa-ios-guide-steps li + li {
  margin-top: 6px;
}

.sia-pwa-ios-guide-hint {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: #9DAEC8;
}

.sia-pwa-ios-guide-close {
  display: block;
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--sia-brand, #17176B);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="light"] .sia-pwa-ios-guide-card {
  background: var(--sia-bg-light, #F7F7F7);
  color: var(--sia-text-on-light, #17176B);
  border-color: rgba(92, 101, 117, 0.35);
}

[data-theme="light"] .sia-pwa-ios-guide-hint {
  color: #2D4570;
}

.sia-pwa-ios-guide-lead {
  margin-bottom: 12px;
}

.sia-pwa-ios-guide-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sia-pwa-ios-guide-copy {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(221, 229, 245, 0.28);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sia-pwa-ios-guide-copy.is-copied {
  border-color: rgba(76, 175, 120, 0.55);
  color: #8fd6a8;
}

[data-theme="light"] .sia-pwa-ios-guide-copy {
  border-color: rgba(92, 101, 117, 0.4);
}

[data-theme="light"] .sia-pwa-ios-guide-copy.is-copied {
  color: #1b6b3a;
}

/* Bandeau Chrome / Firefox / Edge iOS */
.sia-pwa-chrome-ios-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 10040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--sia-bg-deep, #080B12);
  color: var(--sia-text-on-dark, #DDE5F5);
  border: 1px solid rgba(221, 229, 245, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sia-pwa-chrome-ios-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sia-pwa-chrome-ios-banner-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  padding-right: 8px;
}

.sia-pwa-chrome-ios-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sia-pwa-chrome-ios-banner-copy,
.sia-pwa-chrome-ios-banner-more {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.sia-pwa-chrome-ios-banner-copy {
  border: none;
  background: var(--sia-brand, #17176B);
  color: #fff;
}

.sia-pwa-chrome-ios-banner-copy.is-copied {
  background: #2f6b4a;
}

.sia-pwa-chrome-ios-banner-more {
  border: 1px solid rgba(221, 229, 245, 0.28);
  background: transparent;
  color: inherit;
}

.sia-pwa-chrome-ios-banner-dismiss {
  margin-left: auto;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #9DAEC8;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

[data-theme="light"] .sia-pwa-chrome-ios-banner {
  background: var(--sia-bg-light, #F7F7F7);
  color: var(--sia-text-on-light, #17176B);
  border-color: rgba(92, 101, 117, 0.35);
}

[data-theme="light"] .sia-pwa-chrome-ios-banner-more {
  border-color: rgba(92, 101, 117, 0.4);
}

[data-theme="light"] .sia-pwa-chrome-ios-banner-dismiss {
  color: #2D4570;
}

/* Bandeau navigateur recommandé (Firefox, Safari, etc.) */
.sia-browser-compat {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 10035;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sia-bg-deep, #080B12);
  color: var(--sia-text-on-dark, #DDE5F5);
  border: 1px solid rgba(221, 229, 245, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sia-browser-compat.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sia-browser-compat.is-closing {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.sia-browser-compat-text {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.sia-browser-compat-dismiss {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--sia-brand, #17176B);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="light"] .sia-browser-compat {
  background: var(--sia-bg-light, #F7F7F7);
  color: var(--sia-text-on-light, #17176B);
  border-color: rgba(92, 101, 117, 0.35);
}