:root {
  --bg: #ffffff;
  --card: #f6f8fb;
  --accent: #0a4d9e;   /* bleu */
  --accent-2: #f7c948; /* jaune */
  --text: #0b1b2b;
  --muted: #5a6b7f;
  --border: #d9e1ec;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:"Inter","Segoe UI",sans-serif;
  background: var(--bg); color: var(--text); line-height:1.6;
}
a { color: inherit; text-decoration: none; }

.hero { max-width:1200px; margin:0 auto; padding:60px 7vw 40px; }
.brand { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.logo { height:46px; width:auto; }
.pill { display:inline-block; padding:7px 12px; border-radius:999px;
  background:rgba(10,77,158,0.08); color:var(--accent); font-weight:700; letter-spacing:0.01em; }

.hero-body { display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.hero-text h1 { font-size:2.6rem; margin:12px 0 10px; line-height:1.1; }
.hero-text p { color: var(--muted); margin:0; }
.cta-row { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.btn {
  background:linear-gradient(120deg,var(--accent),#0c6ad4);
  color:#fff; padding:12px 18px; border-radius:12px; font-weight:700;
  box-shadow:0 8px 20px rgba(10,77,158,0.25); border:none; cursor:pointer;
}
.ghost { border:1px solid var(--accent); color:var(--accent); padding:11px 17px; border-radius:12px; font-weight:700; background:#fff; }

.hero-phone { justify-self:end; }
.phone-frame {
  width:320px; border-radius:24px; padding:12px;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
}
.phone-frame img { width:100%; border-radius:18px; display:block; background:#fff; }

.section { max-width:1100px; margin:0 auto; padding:40px 7vw; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.grid article {
  background: var(--card); border:1px solid var(--border);
  padding:18px; border-radius:14px;
}
.grid h3 { margin:0 0 8px; }
.grid p { margin:0; color:var(--muted); }

.process { background: #fff9ee; border:1px solid #f2e2b4; border-radius:16px; }
.process-text h2 { margin:0 0 14px; }
.process ol { padding-left:18px; color:var(--muted); margin:0 0 18px; }
.process li { margin-bottom:8px; }
.assistant {
  display:flex; gap:18px; align-items:center; background:#fff;
  border:1px solid var(--border); border-radius:14px; padding:14px;
  box-shadow:0 10px 24px rgba(10,77,158,0.08);
}
.assistant img { width:120px; height:auto; border-radius:12px; object-fit:cover; }
.assistant h3 { margin:0 0 6px; }
.assistant p { margin:0 0 10px; color:var(--muted); }
.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer; }

.gallery .section-head { margin-bottom:14px; }
.carousel { position:relative; }
.viewport { overflow:hidden; border-radius:16px; border:1px solid var(--border); background:#fff; }
.track { display:flex; transition: transform .35s ease; }
.track img { width:240px; height:auto; object-fit:contain; padding:12px; background:#fff; }
.nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; color:var(--accent); border:1px solid var(--border);
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:20px;
}
.nav.prev { left:-12px; }
.nav.next { right:-12px; }

.cta {
  text-align:center;
  background: linear-gradient(120deg, rgba(10,77,158,0.06), rgba(247,201,72,0.10));
  border:1px solid var(--border); border-radius:14px;
}
footer { text-align:center; padding:22px; color:var(--muted); border-top:1px solid var(--border); }

@media (max-width:900px){
  .hero-body { grid-template-columns:1fr; }
  .hero-phone { justify-self:start; }
  .hero-text h1 { font-size:2.2rem; }
  .assistant { flex-direction:column; align-items:flex-start; }
}
