/* ==========================================================================
   SyncMyGAL — direction artistique
   Papier chaud + encre profonde + bleu électrique. Typo display Space Grotesk.
   Zéro JavaScript. Une seule feuille, cache 1 an.
   ========================================================================== */

:root {
  --paper: #faf7f2;
  --paper-deep: #f1ece3;
  --ink: #101822;
  --ink-60: #4c5a6b;
  --navy: #0c1424;
  --navy-2: #131f36;
  --accent: #2f6bff;
  --accent-deep: #1e50d8;
  --call-green: #34c759;
  --call-red: #ff3b30;
  --gold: #e8b64c;
  --line: #e2dbcf;
  --radius: 14px;
  --max: 1120px;
  --font-display: "Space Grotesk", "Segoe UI", -apple-system, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
h1, h2, h3, .logo, .price, ol.steps li::before {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
::selection { background: var(--accent); color: #fff; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { font-weight: 700; font-size: 1.35rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo::before {
  content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--call-green); margin-right: 9px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--call-green) 20%, transparent);
}
.logo span { color: var(--accent); }
nav.main { display: flex; align-items: center; gap: 26px; }
nav.main a { color: var(--ink-60); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
nav.main a:hover { color: var(--ink); }
nav.main a.cta {
  background: var(--ink); color: var(--paper); padding: 10px 20px; border-radius: 999px; font-weight: 600;
  transition: background 0.15s;
}
nav.main a.cta:hover { background: var(--accent); color: #fff; }
.lang { font-size: 0.85rem; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.lang:hover { border-color: var(--ink-60); }

/* ---------- Hero (fond encre) ---------- */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, #1d3a7a55, transparent 60%),
    radial-gradient(700px 400px at -10% 110%, #2f6bff22, transparent 60%),
    var(--navy);
  color: #eef2f8;
  overflow: hidden;
}
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px;
  align-items: center; padding-top: 92px; padding-bottom: 92px;
}
.hero .kicker {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; font-weight: 700; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.sub { font-size: 1.18rem; color: #aebbd0; max-width: 34em; margin-bottom: 34px; }
.hero .note { margin-top: 16px; font-size: 0.88rem; color: #7e8ca3; }

.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 1.02rem;
  font-family: var(--font-display); letter-spacing: -0.01em;
  box-shadow: 0 8px 24px -8px var(--accent);
  transition: transform 0.12s, background 0.15s;
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn.ghost { background: transparent; box-shadow: none; border: 1.5px solid #3d4c66; color: #d7dfec; margin-left: 14px; }
.btn.ghost:hover { border-color: #93a5c2; background: #ffffff10; }
.btn.on-paper { box-shadow: 0 8px 24px -10px var(--accent); }
.btn.ghost.on-paper { border-color: var(--line); color: var(--ink); }
.btn.ghost.on-paper:hover { border-color: var(--ink-60); background: var(--paper-deep); }

/* ---------- Téléphone (pur CSS) ---------- */
.phone-scene { position: relative; justify-self: center; }
.phone {
  width: 290px; border-radius: 44px; padding: 14px;
  background: linear-gradient(160deg, #2a3548, #171f30);
  box-shadow: 0 40px 80px -30px #000c, inset 0 1px 1px #ffffff26;
}
.phone .screen {
  border-radius: 32px; background: linear-gradient(180deg, #1a2436, #0d1320);
  padding: 40px 22px 30px; text-align: center; position: relative;
}
.phone .notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 8px; border-radius: 999px; background: #060a12;
}
.phone .incoming { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7e8ca3; }
.phone .avatar {
  width: 78px; height: 78px; border-radius: 50%; margin: 20px auto 14px;
  background: linear-gradient(140deg, var(--accent), #7aa2ff);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: #fff;
}
.phone .caller { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #f2f6fc; }
.phone .role { font-size: 0.85rem; color: #93a5c2; margin-top: 3px; }
.phone .company { font-size: 0.78rem; color: #5d6c84; margin-bottom: 34px; }
.phone .actions { display: flex; justify-content: space-between; padding: 0 18px; }
.phone .action { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 0.68rem; color: #93a5c2; }
.phone .dot {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.phone .dot.decline { background: var(--call-red); }
.phone .dot.accept { background: var(--call-green); animation: ringpulse 1.6s ease-out infinite; }
@keyframes ringpulse {
  0% { box-shadow: 0 0 0 0 #34c75966; }
  70% { box-shadow: 0 0 0 16px #34c75900; }
  100% { box-shadow: 0 0 0 0 #34c75900; }
}
.before-chip {
  /* Décalée sous le téléphone : elle ne doit jamais recouvrir les boutons
     d'appel, sinon la démonstration « avant / après » devient illisible. */
  position: absolute; left: -128px; bottom: -30px;
  background: #fff; color: var(--ink); border-radius: 12px; padding: 10px 16px;
  font-size: 0.8rem; box-shadow: 0 14px 34px -14px #0009;
  transform: rotate(-4deg);
}
.before-chip b { display: block; font-size: 0.9rem; }
.before-chip s { color: var(--ink-60); text-decoration: none; }
.before-chip .tag { color: var(--call-red); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Sections papier ---------- */
section { padding: 84px 0; }
section.deep { background: var(--paper-deep); }
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; margin-bottom: 14px; }
.lede { color: var(--ink-60); max-width: 42em; margin-bottom: 46px; font-size: 1.12rem; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 2px 0 var(--line);
}
.card h3 { font-size: 1.15rem; margin-bottom: 9px; }
.card p { color: var(--ink-60); font-size: 0.97rem; }
/* Icônes SVG en trait : nettes à toute résolution, aucune police emoji
   requise, et un registre d'outil d'infrastructure. */
.card svg.icon {
  display: block; width: 30px; height: 30px; margin-bottom: 16px;
  color: var(--accent);
}
.card .icon { font-size: 1.7rem; display: block; margin-bottom: 14px; }

ol.steps { counter-reset: step; list-style: none; max-width: 730px; }
ol.steps li { counter-increment: step; padding: 22px 0 22px 74px; position: relative; }
ol.steps li + li { border-top: 1px dashed var(--line); }
ol.steps li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 20px;
  font-weight: 700; font-size: 1.5rem; color: var(--accent);
}
ol.steps b { display: block; font-size: 1.08rem; }
ol.steps span { color: var(--ink-60); font-size: 0.96rem; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px;
  background: #fff; display: flex; flex-direction: column;
}
.plan.featured { background: var(--navy); color: #eef2f8; border-color: var(--navy); position: relative; }
.plan.featured .seats, .plan.featured ul li { color: #aebbd0; }
.plan.featured::before {
  content: attr(data-badge);
  position: absolute; top: -13px; left: 30px;
  background: var(--gold); color: var(--navy); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px;
}
.plan h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.plan.featured h3 { color: var(--gold); }
.plan .price { font-size: 3rem; font-weight: 700; margin: 12px 0 2px; }
.plan .price small { font-size: 1rem; font-weight: 500; color: var(--ink-60); }
.plan.featured .price small { color: #aebbd0; }
.plan .seats { color: var(--ink-60); margin-bottom: 22px; font-size: 0.95rem; }
.plan ul { list-style: none; margin-bottom: 30px; flex: 1; }
.plan ul li { padding: 7px 0 7px 26px; position: relative; font-size: 0.95rem; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--call-green); font-weight: 700; }
.plan .btn { text-align: center; }

/* ---------- Tableaux ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
table.compare th, table.compare td { padding: 14px 18px; text-align: left; }
table.compare thead th {
  background: var(--navy); color: #eef2f8; font-family: var(--font-display);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
}
table.compare tbody tr + tr td { border-top: 1px solid var(--line); }
table.compare td.yes { color: #0a8f5b; font-weight: 650; }
table.compare td.no { color: #b23c3c; }

/* ---------- FAQ ---------- */
details.faq { border-bottom: 1px solid var(--line); padding: 6px 2px; background: transparent; }
details.faq summary {
  font-weight: 650; cursor: pointer; padding: 16px 36px 16px 0; list-style: none;
  font-family: var(--font-display); font-size: 1.03rem; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px;
  color: var(--accent); font-size: 1.5rem; font-weight: 400;
}
details.faq[open] summary::after { content: "–"; }
details.faq p { padding: 0 0 18px; color: var(--ink-60); max-width: 60em; }
details.faq a { color: var(--accent); }

/* ---------- Articles ---------- */
article.prose { max-width: 760px; padding: 64px 0 72px; }
article.prose h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; font-weight: 700; margin-bottom: 18px; }
article.prose h1::after {
  content: ""; display: block; width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold)); margin-top: 18px;
}
article.prose .meta { color: var(--ink-60); font-size: 0.88rem; margin-bottom: 36px; }
article.prose h2 { font-size: 1.55rem; margin-top: 52px; padding-left: 18px; position: relative; }
article.prose h2::before {
  content: ""; position: absolute; left: 0; top: 0.28em; bottom: 0.28em;
  width: 4px; border-radius: 2px; background: var(--accent);
}
article.prose ul { list-style: none; padding-left: 4px; }
article.prose ul li { padding-left: 26px; position: relative; }
article.prose ul li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
article.prose > p:first-of-type:not(.meta) { font-size: 1.12rem; color: var(--ink); }
article.prose h3 { font-size: 1.15rem; margin-top: 30px; margin-bottom: 8px; font-family: var(--font-display); }
article.prose p, article.prose li { color: #2b3949; margin-bottom: 15px; }
article.prose ul, article.prose ol { padding-left: 26px; margin-bottom: 18px; }
article.prose a { color: var(--accent); }
article.prose code {
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 7px; font-size: 0.88em;
}
article.prose blockquote {
  border-left: 4px solid var(--gold); padding: 14px 22px; background: #fff;
  border-radius: 0 10px 10px 0; margin: 26px 0; color: var(--ink-60);
  box-shadow: 0 2px 0 var(--line);
}
nav.crumbs { padding-top: 26px; font-size: 0.85rem; color: var(--ink-60); }
nav.crumbs a { color: var(--ink-60); }

/* ---------- Bande CTA + footer ---------- */
.cta-band {
  background:
    radial-gradient(800px 300px at 50% 130%, #2f6bff44, transparent 65%),
    var(--navy);
  color: #fff; text-align: center; padding: 88px 28px;
}
.cta-band h2 { color: #fff; max-width: 24em; margin: 0 auto 14px; }
.cta-band p { color: #aebbd0; margin-bottom: 32px; }

footer.site { background: var(--paper-deep); border-top: 1px solid var(--line); padding: 44px 0; font-size: 0.9rem; color: var(--ink-60); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
footer.site a { color: var(--ink-60); margin-right: 20px; }
footer.site a:hover { color: var(--ink); }

/* ---------- Scène 3D du hero ---------- */
/* Le canvas est un décor : il se place derrière le texte, ne capte jamais le
   pointeur, et apparaît en fondu seulement une fois WebGL confirmé (classe
   .ready posée par hero.js). Sans WebGL il reste invisible et la maquette
   CSS du téléphone porte la page à elle seule. */
.hero { position: relative; }
#hero-3d {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
  z-index: 0;
}
#hero-3d.ready { opacity: 1; }
.hero .wrap { position: relative; z-index: 1; }
/* Le téléphone garde un halo qui le détache du maillage 3D. */
.hero .phone-scene::before {
  content: ""; position: absolute; inset: -18% -22%;
  background: radial-gradient(closest-side, #0c1424cc, transparent 78%);
  z-index: -1;
}

/* ---------- Révélation au défilement ---------- */
/* .reveal n'est posé QUE par JavaScript : sans JS, rien n'est masqué. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.revealed { opacity: 1; transform: none; }
.reveal { transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; text-align: center; }
  .phone-scene { margin-top: 20px; }
  .before-chip { left: -10px; }
}
@media (max-width: 700px) {
  /* Le maillage 3D ne doit jamais concurrencer le titre sur un écran étroit. */
  #hero-3d.ready { opacity: 0.4; }
}
@media (max-width: 640px) {
  nav.main a:not(.cta):not(.lang) { display: none; }
  .btn.ghost { margin-left: 0; margin-top: 12px; }
  section { padding: 60px 0; }
}