:root {
  --bg: #07111f;
  --card: #0d1d31;
  --line: #ffffff18;
  --text: #f7f9fc;
  --muted: #9fb0c4;
  --cyan: #62e7f4;
  --green: #76e6b4;
  --max: 1180px;
  
  /* Nouvelles variables pour l'effet Tech Studio */
  --accent-gradient: linear-gradient(135deg, var(--cyan), #7000ff);
  --glass-bg: rgba(255, 255, 255, 0.025);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(12px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  /* Arrière-plan mis à jour avec deux halos lumineux (cyan et violet) */
  background: radial-gradient(800px 600px at 15% 10%, rgba(98, 231, 244, 0.06), transparent 60%),
              radial-gradient(800px 600px at 85% 40%, rgba(112, 0, 255, 0.05), transparent 60%),
              linear-gradient(#07111f, #081522 48%, #07111f);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: auto; }

nav {
  position: sticky; top: 0; z-index: 20;
  background: #07111fd9; backdrop-filter: blur(16px);
  border-bottom: 1px solid #ffffff10;
}
.bar { height: 72px; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 850; }
.brand b {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #15325c, #0b1b2f);
  border: 1px solid #73c7ff47;
}

.links { margin-left: auto; display: flex; gap: 20px; color: #bdc9d8; font-size: 14px; font-weight: 650; }
.links a:hover { color: #fff; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.lang button {
  border: 0; background: none; color: #8fa1b7; border-radius: 99px;
  padding: 7px 10px; font-weight: 800; cursor: pointer;
}
.lang .on { background: #eaf3ff; color: #07111f; }

.hero { padding: 86px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 54px; align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px;
  border: 1px solid #62e7f438; border-radius: 99px;
  background: #62e7f40e; color: #bceff4; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
}
.pill span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  color: transparent;
}
.pill i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 16px var(--green);
}

h1 {
  font-size: clamp(46px, 6.3vw, 78px); line-height: .98;
  letter-spacing: -.055em; margin: 24px 0;
  background: linear-gradient(90deg, #fff 10%, #8ad0ff 64%, #75e6d6);
  -webkit-background-clip: text; color: transparent;
}

.lead { font-size: 19px; color: #b6c4d5; max-width: 760px; }
.actions, .chips, .tags { display: flex; gap: 9px; flex-wrap: wrap; }
.actions { margin: 28px 0; }
.actions a {
  padding: 13px 18px; border-radius: 14px; font-weight: 800;
  border: 1px solid var(--line);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary { background: linear-gradient(135deg, #e7f3ff, #b9e4ff); color: #07111f; }
.primary:hover {
  box-shadow: 0 0 20px rgba(98, 231, 244, 0.3);
  transform: scale(1.02);
}
.secondary { background: #ffffff08; }

/* Chips et Tags transformés en badges lumineux */
.chips span, .tags span {
  padding: 7px 11px;
  border: 1px solid rgba(98, 231, 244, 0.22);
  border-radius: 99px;
  background: rgba(98, 231, 244, 0.08);
  color: var(--cyan);
  font-size: 11px; font-weight: 700;
  transition: background 0.3s ease;
}
.chips span:hover, .tags span:hover {
  background: rgba(98, 231, 244, 0.15);
}

/* Glassmorphism sur l'encart latéral */
.fit {
  padding: 24px; border-radius: 28px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 70px #0005;
}
.fit h3 { font-size: 14px; margin: 0 0 14px; }
.fit > div {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  align-items: center; padding: 12px; border-radius: 15px;
  background: #ffffff08; border: 1px solid #ffffff0d; margin-top: 9px;
}
.fit > div > b {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; background: #0b1828;
}
.fit strong, .fit small { display: block; }
.fit strong { font-size: 13px; }
.fit small { color: #8396ad; margin-top: 2px; }

.stats { padding: 10px 0 70px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--glass-border);
  border-radius: 22px; overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
}
.stats-grid > div { padding: 20px 22px; border-right: 1px solid var(--glass-border); }
.stats-grid > div:last-child { border: 0; }
.stats strong {
  display: block; font-size: 26px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  color: transparent;
}
.stats span { color: #8da0b6; font-size: 12px; }

section { padding: 72px 0; }
.head { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: end; margin-bottom: 32px; }
.head em, .copy em, .contact em {
  color: #79dce6; font-style: normal; font-size: 11px;
  font-weight: 850; text-transform: uppercase; letter-spacing: .13em;
}
.head h2, .contact h2 {
  font-size: clamp(34px, 4.5vw, 54px); line-height: 1.02;
  letter-spacing: -.045em; margin: 8px 0 0;
}
.head > p, .contact p { color: var(--muted); font-size: 17px; margin: 0; }

/* Glassmorphism et Hover sur les Projets */
.project {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 30px;
  padding: 24px; margin-top: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.project.reverse { grid-template-columns: 1.08fr .92fr; }
.project:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(112, 0, 255, 0.12);
  border-color: rgba(98, 231, 244, 0.25);
}

.copy { padding: 8px; }
.copy h3 { font-size: 36px; letter-spacing: -.04em; margin: 8px 0; }
.copy > p { color: #a6b5c8; }
.copy ul { padding-left: 18px; margin: 17px 0 0; color: #dce5ee; }
.copy li { margin: 9px 0; }
.copy li::marker { color: var(--green); }

.mock {
  min-height: 410px; border-radius: 22px;
  background: radial-gradient(circle at 50% 18%, #46a0ff2e, transparent 34%), linear-gradient(145deg, #0b1828, #08111e);
  display: grid; place-items: center; border: 1px solid #ffffff0d;
}
.phone {
  width: 210px; height: 380px; border: 9px solid #1c2b3d;
  border-radius: 36px; background: #050b12; overflow: hidden;
  box-shadow: 0 25px 60px #0008;
}
.screen { height: 100%; padding: 45px 13px 14px; background: linear-gradient(#0f2540, #08111d); }
.scan-top, .prayer-top {
  height: 108px; border-radius: 20px; padding: 15px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.scan-top { background: linear-gradient(135deg, #3178ff, #42c7e8); }
.scan-top small, .prayer-top small { opacity: .8; }
.scan-top b, .prayer-top b { font-size: 17px; }
.tiles, .prayers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.tiles i, .prayers i {
  height: 58px; display: grid; place-items: center;
  border-radius: 12px; background: #ffffff10;
  font-style: normal; font-size: 12px; text-align: center;
}
.rows { display: grid; gap: 7px; margin-top: 9px; }
.rows i { height: 38px; border-radius: 10px; background: #ffffff0d; }

.muslim .screen { background: linear-gradient(#f6fbf7, #e8f4ec); color: #103024; }
.prayer-top { background: linear-gradient(145deg, #0b6d53, #11866a); color: #fff; }
.muslim .prayers i, .features i { background: #fff; border: 1px solid #10302412; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.features i { height: 54px; display: grid; place-items: center; border-radius: 12px; font-style: normal; font-size: 11px; }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }

/* Glassmorphism et Hover sur les Grilles d'Information */
.services > div, .expertise > div, .process > div {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.services > div:hover, .expertise > div:hover, .process > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(112, 0, 255, 0.12);
  border-color: rgba(98, 231, 244, 0.25);
}
.services b, .process b {
  font-size: 11px; letter-spacing: .12em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  color: transparent;
}
.services h3 { margin: 24px 0 7px; }
.services p, .expertise p { color: #8fa2b9; font-size: 13px; margin: 0; }

.expertise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.expertise h3 { font-size: 14px; margin-top: 0; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.process h3 { margin: 20px 0 0; }

/* Glassmorphism sur la section Contact */
.contact {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 45px;
  padding: 36px; border-radius: 28px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
}
.contact > div:last-child { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.contact a {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #ffffff08; font-weight: 750;
}

footer { border-top: 1px solid var(--line); padding: 26px 0; color: #788ba2; font-size: 12px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; }

@media (max-width: 900px) {
  .hero-grid, .head, .project, .project.reverse, .contact { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .expertise { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid > div:nth-child(2) { border-right: 0; }
  .stats-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--glass-border); }
  .project.reverse .mock { order: -1; }
}

@media (max-width: 680px) {
  .wrap { width: calc(100% - 28px); }
  .links { display: none; }
  .bar { height: 64px; }
  .hero { padding-top: 54px; }
  .hero-grid { gap: 28px; }
  h1 { font-size: clamp(42px, 13vw, 60px); }
  .lead { font-size: 17px; }
  .actions a { width: 100%; text-align: center; }
  .stats-grid, .services, .expertise, .process { grid-template-columns: 1fr; }
  .stats-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--glass-border); }
  .stats-grid > div:last-child { border-bottom: 0; }
  section { padding: 54px 0; }
  .head { gap: 15px; }
  .project { padding: 16px; }
  .mock { min-height: 350px; }
  .phone { transform: scale(.88); }
  .contact { padding: 23px; }
  footer .wrap { flex-direction: column; }
}