/* ===========================
   Arkyo Minimal Design System
   Palette: noir / blanc / bleu
   =========================== */

/* 1) Variables (faciles à ajuster) */
:root{
  --bg: #0d0d0d;
  --bg-elev: #151515;
  --text: #ffffff;
  --muted: #c7c7c7;
  --line: #2a2a2a;
  --brand: #1a73e8;      /* bleu Arkyo (accent) */
  --brand-600: #1558b3;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --container: 1200px;
  --space:  clamp(16px, 2vw, 24px);
  --space-lg: clamp(32px, 4vw, 56px);
}

/* 2) Reset doux + accessibilité */
*{ box-sizing:border-box; }
html{ color-scheme: dark; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:16px;
  top:16px;
  padding:10px 14px;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  font-weight:600;
  transform:translateY(-200%);
  transition:transform .2s ease;
  z-index:100;
}
.skip-link:focus{ transform:translateY(0); }

/* 3) Layout & utilitaires */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline: var(--space); }
.section{ padding: var(--space-lg) 0; }
.section--light{ background:#fff; color:#0d0d0d; }
.section--dark{ background:var(--bg); color:var(--text); }
.section--elev{ background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.grid{ display:grid; gap:var(--space); }
.grid--2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

/* 4) Typo */
.h1{ font-size: clamp(32px, 6vw, 52px); line-height:1.15; letter-spacing:-0.02em; margin:0 0 var(--space); }
.h2{ font-size: clamp(24px, 3.5vw, 36px); line-height:1.2; margin:0 0 calc(var(--space)/1.5); }
.h3{ font-size: clamp(18px, 2.5vw, 22px); margin:0 0 8px; }
.lead{ font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); }

/* 5) Header / Nav / Footer */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(13,13,13,.85); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.nav__brand{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:600; }
.nav__menu{ display:flex; gap:18px; }
.nav__link{ color:#fff; opacity:.9; padding:8px 10px; border-radius:8px; }
.nav__link--active{ opacity:1; background:rgba(255,255,255,0.08); }
.nav__link:hover{ background:var(--bg-elev); text-decoration:none; }
.nav__link--active{ opacity:1; background:var(--bg-elev); }

/* 6) Hero */
.hero{ padding: clamp(56px, 8vw, 120px) 0; background:
  radial-gradient(80% 60% at 20% 0%, rgba(26,115,232,.18), transparent 60%),
  radial-gradient(70% 50% at 100% 0%, rgba(26,115,232,.14), transparent 60%),
  var(--bg);
}
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: calc(var(--space) * 1.25); }

/* 7) Boutons */
.btn{ display:inline-block; border:0; border-radius:10px; padding:12px 18px; font-weight:600; cursor:pointer; transition: transform .04s ease, opacity .2s ease; }
.btn:active{ transform: translateY(1px); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-600); text-decoration:none; }
.btn--ghost{ background:transparent; color:#fff; border:1px solid var(--line); }
.btn--ghost:hover{ background:var(--bg-elev); text-decoration:none; }

/* 8) Cartes / panels */
.card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.1);
  box-shadow: var(--shadow);
}
.card--light{ background:#fff; color:#0d0d0d; border-color:#e6e6e6; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* 9) Listes “features” & FAQ */
.features{ display:grid; gap:var(--space); grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px){ .features{ grid-template-columns:1fr; } }
.feature__title{ margin:8px 0; font-weight:600; }
.feature__desc{ color:var(--muted); }

.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq__q{ font-weight:600; }
.faq__a{ color:var(--muted); margin-top:6px; }

/* 10) Tableaux tarifs (pricing) */
.pricing{ display:grid; gap:var(--space); grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px){ .pricing{ grid-template-columns:1fr; } }
.price{
  background:linear-gradient(180deg, var(--bg-elev), #0b0b0b);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: calc(var(--space) * 1.2);
}
.price__header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 14px; }
.price__value{ font-size:28px; font-weight:700; }
.price__list{ margin:14px 0 18px; padding:0 0 0 18px; color:var(--muted); }

/* 11) Forms basiques (pour Contact si pas HubSpot) */
.input, .select, .textarea{
  width:100%; background:var(--bg-elev); color:#fff;
  border:1px solid var(--line); border-radius:10px;
  padding:12px 14px;
}
.input::placeholder, .textarea::placeholder{ color:#9a9a9a; }
.form-row{ display:grid; gap:var(--space); grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 900px){ .form-row{ grid-template-columns: 1fr; } }

/* 12) Footer */
.site-footer{ border-top:1px solid var(--line); background:#0b0b0b; color:#cfcfcf; padding: var(--space-lg) 0; }
.footer-cols{ display:grid; gap:var(--space); grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 900px){ .footer-cols{ grid-template-columns:1fr; } }

/* 13) Petits helpers */
.m0{ margin:0!important; } .mt0{ margin-top:0!important; } .mb0{ margin-bottom:0!important; }
.mt{ margin-top:var(--space)!important; } .mb{ margin-bottom:var(--space)!important; }
.center{ text-align:center; } .right{ text-align:right; }
.divider{ height:1px; background:var(--line); margin: var(--space) 0; }

/* 14) Impression minimaliste */
@media print{
  .site-header, .site-footer, .btn{ display:none!important; }
  body{ background:#fff; color:#000; }
}