/* Feuille partagée par les deux pages vitrines, / (fr) et /en/ (en).
   Partagée et non dupliquée à dessein : deux pages qui doivent rester identiques
   divergent à la première retouche si chacune porte son style.
   Les couleurs sont celles des pages juridiques (privacy, account-deletion,
   support), qui les inlinent — elles n'ont pas à bouger sans que celles-ci suivent. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f1923;
  color: #8fa3b3;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ---------- En-tête ---------- */

.hero { text-align: center; padding: 72px 0 56px; }

.hero img.icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.hero .tagline {
  font-size: 19px;
  max-width: 620px;
  margin: 0 auto 28px;
  color: #cddbe5;
}

.badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #4caf8a;
  border: 1px solid #2a3b4a;
  background: #16222c;
  border-radius: 999px;
  padding: 8px 18px;
}

/* ---------- Blocs de fonctionnalités ---------- */

.feature {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid #1e2c38;
}

.feature:nth-child(even) { flex-direction: row-reverse; }

.feature .shot { flex: 0 0 260px; }

.feature .shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid #2a3b4a;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

.feature .text { flex: 1; }

.feature h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.feature p { font-size: 17px; }

@media (max-width: 720px) {
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 30px; }
  .hero .tagline { font-size: 17px; }
  .feature,
  .feature:nth-child(even) {
    flex-direction: column;
    gap: 28px;
    padding: 44px 0;
  }
  .feature .shot { flex: none; max-width: 240px; align-self: center; }
  .feature .text { text-align: center; }
}

/* ---------- Encart « et aussi » ---------- */

.also {
  border: 1px solid #2a3b4a;
  background: #16222c;
  border-radius: 16px;
  padding: 28px 30px;
  margin: 56px 0;
}

.also h2 {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.also ul { margin: 0 0 0 20px; font-size: 16px; }
.also li { margin-bottom: 8px; }
.also li:last-child { margin-bottom: 0; }
.also strong { color: #cddbe5; font-weight: 600; }

/* ---------- Pied ---------- */

footer {
  border-top: 1px solid #1e2c38;
  padding: 40px 0 64px;
  font-size: 15px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 20px;
}

footer .lang { color: #5f7385; }

a { color: #4caf8a; }
a:hover { text-decoration: none; }