/* Contavia — vitrine — design system galaxie SANTVIA ("Liquid Glass" macOS 27, sobre) */

:root {
  --bg: #EDF0F3;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --panel: #FFFFFF;
  --ink: #0C1626;
  --muted: #667689;
  --faint: #7C8A9C;
  --hair: #D9DFE6;
  --navy: #16233D;
  --gold: #8A6820;
  --gold-2: #A98232;
  --erp: #3457A0; /* accent produit Contavia — bleu ERP */
  --erp-2: #4A6DB8;
  --glass-surface: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 20px 60px -24px rgba(12, 22, 38, 0.35);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080F1C;
    --surface: #0F1B2D;
    --surface-2: #132339;
    --panel: #0C1626;
    --ink: #E9EDF2;
    --muted: #93A3B7;
    --faint: #6E7F94;
    --hair: #20334D;
    --navy: #0C1626;
    --gold: #CDA24E;
    --gold-2: #E1C079;
    --erp: #6E93DA;
    --erp-2: #8FADE6;
    --glass-surface: rgba(15, 27, 45, 0.56);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="light"] {
  --bg: #EBEEF1;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --ink: #0C1626;
  --muted: #54657A;
  --faint: #7C8A9C;
  --hair: #D8DEE5;
  --gold: #8A6820;
  --erp: #3457A0;
  --glass-surface: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.55);
}

:root[data-theme="dark"] {
  --bg: #080F1C;
  --surface: #0F1B2D;
  --surface-2: #132339;
  --ink: #E9EDF2;
  --muted: #93A3B7;
  --faint: #6E7F94;
  --hair: #20334D;
  --gold: #CDA24E;
  --erp: #6E93DA;
  --glass-surface: rgba(15, 27, 45, 0.56);
  --glass-border: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: inherit; }

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

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.icon path, .icon circle, .icon rect, .icon polyline, .icon line {
  vector-effect: non-scaling-stroke;
}

:focus-visible {
  outline: 2px solid var(--erp);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Chrome / header — glass bar */
.chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass-surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--hair);
}
.chrome-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand .mark { width: 30px; height: 34px; flex: 0 0 auto; }
.brand .san { font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--muted); }
.brand .sep { color: var(--hair); font-size: 18px; }
.brand .prod { font-weight: 600; font-size: 20px; }
.ret {
  /* Masque par defaut. L'en-tete porte 5 liens, la langue, le theme et le CTA : mesure
     faite, les quatre blocs occupaient 1180px pile, soit la largeur exacte du conteneur.
     Il ne reapparait donc que la ou il tient vraiment — nav masquee, ou fenetre large. */
  display: none; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--muted); text-decoration: none; padding: 6px 9px;
  border: 1px solid var(--hair); border-radius: 9px; white-space: nowrap;
}
.ret:hover { color: var(--ink); border-color: var(--gold); }
nav.primary {
  display: flex;
  gap: 18px;
  align-items: center;
}
nav.primary a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 550;
}
nav.primary a:hover { color: var(--ink); }

.chrome-actions { display: flex; align-items: center; gap: 10px; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  font-family: inherit;
}
.chip-btn:hover { border-color: var(--erp); }

select#lang-switch {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--ink);
  padding: 7px 28px 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--erp-2), var(--erp));
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 12px 24px -12px rgba(52, 87, 160, 0.55);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair);
  color: var(--ink);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  background: var(--surface);
}

/* Hero */
.hero {
  padding: 96px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 480px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(52, 87, 160, 0.24), transparent 70%),
    radial-gradient(50% 50% at 80% 10%, rgba(138, 104, 32, 0.14), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--erp);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
h1.hero-title {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 22px 0 20px;
  max-width: 15ch;
  font-weight: 680;
}
.hero-sub {
  font-size: 1.14rem;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 32px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-note { font-size: 0.84rem; color: var(--faint); }

/* Glass panel/card */
.glass {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

.hero-panel {
  margin-top: 56px;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.stat b {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stat span {
  font-size: 0.82rem;
  color: var(--muted);
}

section { padding: 72px 0; }
.section-head { max-width: 62ch; margin-bottom: 44px; }
.kicker {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--erp);
  margin-bottom: 10px;
}
h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  font-weight: 650;
}
.section-lead { color: var(--muted); font-size: 1.02rem; margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hair);
}
.card .icon { color: var(--erp); margin-bottom: 14px; width: 26px; height: 26px; }
.card h3 { margin: 0 0 8px; font-size: 1.04rem; font-weight: 620; }
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.card .badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--gold);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 3px 10px;
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.split ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.split li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--muted);
}
.split li .icon { color: var(--erp); margin-top: 2px; }
.split li strong { color: var(--ink); }

.mcp-card {
  padding: 30px;
  border-radius: var(--radius-lg);
}
.mcp-card pre {
  margin: 18px 0 0;
  background: var(--navy-deep);
  color: #C9D6E8;
  border-radius: var(--radius-sm);
  padding: 18px;
  font-family: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  overflow-x: auto;
  line-height: 1.6;
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hair);
}
table.compare caption { text-align: left; padding: 14px 20px 0; color: var(--faint); font-size: 0.8rem; }
table.compare th, table.compare td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.88rem;
}
table.compare thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 620;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.compare td.yes { color: var(--erp); font-weight: 620; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody th { font-weight: 620; }

.faq-list { display: grid; gap: 12px; max-width: 76ch; }
.faq-item {
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--erp); transition: transform 0.18s ease; flex: none; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item p { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }

.cta-band {
  padding: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  background: linear-gradient(160deg, var(--navy-deep), #14243B);
  color: #E9EDF2;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #93A3B7; margin: 0; }

footer {
  border-top: 1px solid var(--hair);
  padding: 48px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 0 0 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { text-decoration: none; color: var(--muted); font-size: 0.88rem; }
.footer-grid a:hover { color: var(--ink); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--faint);
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}

@media (max-width: 880px) {
  .hero-panel { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  nav.primary { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Sélecteur de langue galaxie — 36 langues, drapeaux SVG, séparation UE / autres.
   ⭐ Deux colonnes + hauteur bornée + défilement : sans ça, 36 entrées font ~1150 px
   et les dernières langues sont hors de l'écran, donc inatteignables. */
.langsel{position:relative;font-size:.78rem}
.langsel summary{list-style:none;cursor:pointer;color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:5px 9px;display:inline-flex;align-items:center;gap:4px}
.langsel summary::-webkit-details-marker{display:none}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:6px;min-width:150px;z-index:60;box-shadow:0 10px 30px rgba(12,22,38,.18);display:grid;grid-template-columns:repeat(2,minmax(128px,1fr));gap:1px;max-height:min(62vh,392px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:560px){.langmenu{grid-template-columns:1fr;min-width:0;right:-8px}}
.langmenu a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:13px;padding:7px 10px;border-radius:7px}
.langmenu a:hover{background:var(--surface-2)}
.langgrp{grid-column:1/-1;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px;font-weight:600;position:sticky;top:-6px;background:var(--surface);z-index:1}
.flag{width:18px;height:13.5px;flex:0 0 18px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
@media (min-width: 640px) and (max-width: 880px) { .ret { display: inline-flex; } }
@media (min-width: 1240px) { .ret { display: inline-flex; } }