/* pq_etukit/style.css — Thème sombre premium EtuKit, animations douces, a11y */
:root{
  --bg: #0d0f16;
  --bg-2: #111527;
  --card: #13182a;
  --text: #e7ecff;
  --muted: #a9b3d3;
  --accent1: #7c5cff;
  --accent2: #22e3a4;
  --accent-grad: linear-gradient(135deg, var(--accent1), var(--accent2));
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(124,92,255,.25);
}

*{ box-sizing: border-box }
html, body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, #1a1f38 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
img{ max-width:100%; display:block }
a{ color: inherit; text-decoration: none }
a:focus-visible, button:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 12px }
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:#000; color:#fff; z-index:9999;
}

#bgParticles{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
}

.hero{
  position: relative;
  z-index: 1;
  padding: 88px 20px 24px;
}
.hero__inner{
  max-width: 1080px; margin: 0 auto; text-align: center;
}
.hero h1{
  font-weight: 800; line-height: 1.05; letter-spacing:.2px;
  font-size: clamp(28px, 4vw, 48px);
}
.hero .brand{
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle{
  color: var(--muted);
  margin: 10px auto 24px;
  max-width: 740px;
  font-size: clamp(16px, 2vw, 18px);
}
.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px }
.badge{
  padding:8px 12px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius: 999px; font-size: 12px; letter-spacing:.3px
}
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top: 18px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:14px; background: var(--accent-grad);
  box-shadow: var(--shadow); border:0; color:#0a0c12; font-weight:700; cursor:pointer;
}
.btn:hover{ transform: translateY(-1px) scale(1.01) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn-ghost{
  background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.12)
}

.stats{
  margin: 36px auto 0; padding: 14px 16px; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.stat{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding:16px; text-align:center
}
.stat__num{ font-size: clamp(24px, 4vw, 40px); font-weight: 900; letter-spacing:.3px }
.stat__label{ color: var(--muted); font-size: 13px; margin-top: 6px }

.timeline{
  position:relative; z-index:1; max-width: 1100px; margin: 36px auto 8px; padding: 0 24px;
}
.timeline ol{
  list-style: none; padding:0; margin:0; display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.tl-item{
  position:relative; background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 8px; text-align:center;
  font-size: 13px; color: var(--muted);
}
.tl-item.inview, .tl-item:hover{
  color: #fff; background: linear-gradient(180deg, rgba(124,92,255,.18), rgba(34,227,164,.12));
  border-color: rgba(124,92,255,.35);
}

.cards{
  position: relative; z-index: 1; max-width: 1100px; margin: 18px auto; padding: 8px 24px 40px;
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.card{
  background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px 18px 16px;
  box-shadow: var(--shadow); transform: translateY(8px); opacity: 0;
}
.card.reveal.show{ transform: translateY(0); opacity: 1; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s }
.card__icon{
  font-size: 24px; width: 48px; height: 48px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: 14px; margin-bottom: 10px
}
.card h2{ font-size: clamp(18px, 2.6vw, 22px); margin: 2px 0 8px }
.card p{ color: var(--muted); margin-top: 6px }
.ticks{ margin: 10px 0 0; padding-left: 20px }
.ticks li{ margin: 6px 0; position: relative }
.ticks li::marker{ content: "• " }
.ticks li::marker{ color: #9cd8c3 }

.vision{
  position: relative; z-index:1; max-width: 900px; margin: 14px auto 36px; padding: 24px; text-align: center;
  background: radial-gradient(600px 300px at 50% -60%, rgba(124,92,255,.25), transparent), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius: 20px
}
.vision h2{ font-size: clamp(20px, 3vw, 28px) }
.vision p{ color: var(--muted); margin: 6px auto 16px; max-width: 700px }

.site-footer{
  text-align:center; color: var(--muted); font-size: 13px; padding: 26px 12px 50px
}

/* Dot nav */
.dotnav{
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
}
.dotnav ul{ list-style: none; padding:0; margin:0; display:flex; flex-direction: column; gap: 10px }
.dotnav a{
  width: 38px; height: 38px; display:grid; place-items:center; border-radius: 12px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); text-decoration: none;
}
.dotnav a:hover{ transform: translateX(-2px) }

/* Thème clair (auto via data-theme) */
:root[data-theme="light"]{
  --bg: #f8fafc;
  --bg-2: #ffffff;
  --card: #ffffff;
  --text: #0c1222;
  --muted: #51607f;
  --accent1: #5a3df0;
  --accent2: #0fb98a;
  --shadow: 0 8px 24px rgba(10,20,40,.12);
}
:root[data-theme="light"] body{
  background: radial-gradient(1200px 800px at 70% -10%, #f3f6ff 0%, #f8fafc 60%) fixed, #f8fafc;
}
:root[data-theme="light"] .badge{ border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.03) }
:root[data-theme="light"] .stat, 
:root[data-theme="light"] .tl-item,
:root[data-theme="light"] .card{ border-color: rgba(0,0,0,.08); background: #fff }
:root[data-theme="light"] .vision{ background: radial-gradient(600px 300px at 50% -60%, rgba(124,92,255,.08), transparent), #fff; border-color: rgba(0,0,0,.08) }

/* Responsif */
@media (max-width: 900px){
  .stats{ grid-template-columns: 1fr; }
  .timeline ol{ grid-template-columns: repeat(3, 1fr) }
  .cards{ grid-template-columns: 1fr; }
  .dotnav{ display:none }
}

/* Réduction animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important }
}
/* CSS local minimal — s'appuie sur tes variables & composants existants (style.css / main.css) */

/* Petites puces “validées” pour les listes des cartes */
.tick-list{ margin: 10px 0 0 16px; color: var(--muted); }
.tick-list li{ margin: 6px 0; list-style: none; position: relative; padding-left: 18px; }
.tick-list li::before{
  content: "•"; position: absolute; left: 0; top: 0; line-height: 1.2;
  color: #32e67f; font-weight: 800;
}

/* Révélation douce des cartes (.reveal se plug sans casser tes anims) */
.reveal{ opacity: 0; transform: translateY(8px); transition: .45s ease; }
.reveal.show{ opacity: 1; transform: none; }

/* Timeline horizontale dans l’esprit de tes blocs sombres */
.pq-timeline{
  max-width: 1100px; margin: 18px auto 8px; padding: 0 16px;
}
.pq-timeline ol{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.pq-timeline li{
  text-align: center; padding: 10px 8px; border-radius: 12px;
  background: #0f1428; border: 1px solid var(--border); color: var(--muted);
}
.pq-timeline li.inview,
.pq-timeline li:hover{ color: var(--text); border-color: rgba(255,210,77,.35) }

/* Responsive aligné à ta grille */
@media (max-width: 980px){
  .pq-timeline ol{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px){
  .pq-timeline ol{ grid-template-columns: repeat(2, 1fr); }
}