/*
 * Site vitrine — mêmes couleurs, même police et même sobriété que
 * l'application (web/src/assets/styles/main.css) : deux graisses, filets fins,
 * cartes arrondies à 12 px, aucune ombre lourde.
 *
 * Aucune ressource extérieure (police comprise) : pas de requête vers un tiers,
 * donc rien à déclarer ni à faire accepter, et une CSP qui n'autorise que le site.
 */
:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --text: #1c1917;
  --text-2: #57534e;
  --text-3: #78716c;
  --line: #e7e5e4;
  --brand: #a06550;
  --brand-dark: #855142;
  --brand-soft: #faf6f4;
  --brand-line: #e3cdc2;
  --radius: 12px;
  --width: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
/* Lignes équilibrées : pas de « à » orphelin en bout de titre. */
h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* ─── En-tête ─────────────────────────────────────────────────────────────── */
.header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 15px; }
.nav a { text-decoration: none; color: var(--text-2); white-space: nowrap; }
.nav a:hover { color: var(--text); }
/* Sur téléphone, l'en-tête garde « Se connecter » — un client qui revient n'a
   pas d'autre chemin vers sa connexion — et l'inscription. Les tarifs restent
   dans la page et le pied de page. Faute de place, le nom laisse le logo seul
   sous 420 px, sans quitter le nom accessible du lien. Les liens longs
   attendent 1024 px : à 768, le menu complet débordait de 50 px. */
.nav .optional, .nav .wide { display: none; }
@media (min-width: 768px) { .nav .optional { display: inline; } }
@media (min-width: 1024px) { .nav .wide { display: inline; } }
@media (max-width: 419px) {
  .header .wrap { gap: 12px; }
  .nav { gap: 14px; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px;
  font-size: 15px; font-weight: 500; text-decoration: none; text-align: center;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff !important; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--text) !important; }
.btn-secondary:hover { border-color: var(--text-3); }
.btn-small { padding: 7px 14px; font-size: 14px; }

/* ─── Sections ────────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 56px; text-align: center; }
.hero h1 { font-size: 36px; max-width: 760px; margin: 0 auto; }
.hero .lead { font-size: 18px; color: var(--text-2); max-width: 640px; margin: 20px auto 0; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
/* Sur téléphone, les boutons s'empilent : une colonne à la largeur du plus long,
   pour qu'ils aient tous la même. */
@media (max-width: 479px) { .hero .actions { display: grid; grid-template-columns: max-content; justify-content: center; } }
.hero .note { font-size: 14px; color: var(--text-3); margin-top: 16px; }
@media (min-width: 768px) { .hero { padding: 104px 0 80px; } .hero h1 { font-size: 48px; } }

.section { padding: 56px 0; border-top: 1px solid var(--line); }
.section h2 { font-size: 28px; }
.section .intro { color: var(--text-2); margin-top: 12px; max-width: 640px; }
@media (min-width: 768px) { .section { padding: 80px 0; } .section h2 { font-size: 32px; } }

.grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { font-size: 18px; }
.card p { color: var(--text-2); margin-top: 8px; font-size: 15px; }
.tag {
  display: block; width: fit-content; margin-top: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-dark);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
}

/* ─── Accueil : captures, fonctions phares, liste courte, garanties ──────── */
/* Les captures sont de vraies pages de l'application : un filet et un rayon,
   pas d'ombre portée, comme les cartes de l'application elle-même. */
.hero-shot, .feature-media { margin: 0; }
.hero-shot { margin: 48px auto 0; max-width: 1080px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.hero-shot img { display: block; width: 100%; height: auto; }
/* Sur téléphone, la capture d'ordinateur deviendrait illisible : on montre
   l'application telle qu'elle s'affiche sur un téléphone (<picture>). */
@media (max-width: 599px) {
  .hero-shot { max-width: 280px; border-radius: 20px; }
  .feature-media picture img { max-width: 260px; border-radius: 20px; }
}
@media (min-width: 768px) { .hero-shot { margin-top: 64px; } }

/* Une fonction par rangée, séparées d'un filet : trois récits plutôt qu'une
   grille de cartes identiques. Sur grand écran, texte et capture côte à côte
   (`feature-reverse` : capture à gauche) ; un tableau large garde toute la
   largeur, texte au-dessus (`feature-wide`), pour rester lisible. */
.feature { display: grid; gap: 28px; padding: 40px 0; border-top: 1px solid var(--line); }
.feature:first-child { padding-top: 0; border-top: 0; }
.feature:last-child { padding-bottom: 0; }
.feature h2 { font-size: 24px; max-width: 640px; }
.feature h2 .tag { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.feature p { color: var(--text-2); margin-top: 12px; max-width: 600px; }
@media (min-width: 768px) { .section .feature h2 { font-size: 28px; } .feature { padding: 56px 0; } }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
  .feature-reverse { grid-template-columns: 6fr 5fr; }
  .feature-reverse .feature-text { order: 2; }
  .feature-wide { grid-template-columns: 1fr; gap: 32px; }
  /* Capture dense (tableau) : plus de place pour l'image que pour le texte. */
  .feature-big { grid-template-columns: 4fr 7fr; }
  .feature-big.feature-reverse { grid-template-columns: 7fr 4fr; }
}

/* Fond terre cuite très pâle : les trois captures, de formes différentes,
   s'y posent toutes de la même façon. */
.feature-media { display: flex; justify-content: center; align-items: center; padding: 28px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius); }
.feature-media picture { display: contents; }
.feature-media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.feature-media .phone { max-width: 230px; border-radius: 20px; }
.feature-media .card-shot { max-width: 300px; }
.feature-wide .feature-media { padding: 24px; }
@media (min-width: 768px) { .feature-wide .feature-media { padding: 40px; } }

.more { list-style: none; padding: 0; margin-top: 24px; display: grid; column-gap: 40px; }
@media (min-width: 640px) { .more { grid-template-columns: repeat(2, 1fr); } }
.more li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.more .tag { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }

/* Intégrations : disponibles d'abord, « en préparation » en retrait. Pas de
   logos : un nom suffit, et les marques ne sont pas les nôtres. */
.integrations { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 16px; }
@media (min-width: 768px) { .integrations { grid-template-columns: repeat(3, 1fr); } }
.integrations li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.integrations li p { color: var(--text-2); font-size: 15px; margin-top: 8px; }
.integrations .integration-name { display: flex; align-items: center; gap: 10px; margin-top: 0; color: var(--text); font-weight: 500; font-size: 17px; }
.integrations .tag { display: inline-block; margin: 0; }
.integrations .soon { background: transparent; border-style: dashed; }
.tag-soon { background: transparent; border-color: var(--line); color: var(--text-3); }
.aside { color: var(--text-3); font-size: 15px; margin-top: 20px; max-width: 640px; }

.trust-list { list-style: none; padding: 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .trust-list { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.trust-list li { color: var(--text-2); font-size: 15px; }
.trust-list strong { display: block; color: var(--text); font-weight: 500; font-size: 16px; margin-bottom: 4px; }

.band { background: var(--surface); }
.band .wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (min-width: 768px) { .band .wrap { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ─── Tarifs ──────────────────────────────────────────────────────────────── */
.plan { display: flex; flex-direction: column; }
.plan .price { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; margin-top: 16px; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; flex: 1; }
.plan li { padding: 8px 0 8px 24px; border-top: 1px solid var(--line); font-size: 15px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); }
.plan.featured { border-color: var(--brand); }
.referral { margin-top: 24px; background: var(--brand-soft); border-color: var(--brand-line); }
.referral h3 { color: var(--brand-dark); }

/* ─── Texte long (page réforme) ───────────────────────────────────────────── */
.prose { max-width: 720px; }
.prose h2 { font-size: 24px; margin-top: 40px; }
.prose p, .prose li { color: var(--text-2); margin-top: 12px; }
.prose ul { padding-left: 20px; }
.prose strong { color: var(--text); font-weight: 500; }

/* ─── Pied de page ────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 40px 0; font-size: 14px; color: var(--text-3); }
.footer .wrap { display: flex; flex-direction: column; gap: 16px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer a { text-decoration: none; color: var(--text-2); }
.footer a:hover { color: var(--text); }
@media (min-width: 768px) { .footer .wrap { flex-direction: row; justify-content: space-between; align-items: center; } }