/* Landing campanio.fr — la charte du PRODUIT, à l'identique (src/index.css de
   l'application) : le bronze de la cloche, un fond neutre franc. La page est
   claire ; seule la veille — le bandeau d'ouverture et l'appel final — passe
   au sombre : c'est l'heure où la vigie travaille. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #f4f4f6;
  --panel: #ffffff;
  --border: #dcdae2;
  --ink: #21232a;
  --muted: #5f6470;
  --bronze: #8a5a1c;
  --bronze-clair: #d9a054;
  --nuit: #17181d;
  --nuit-panel: #21232b;
  --nuit-ink: #e6e6ea;
  --nuit-muted: #a2a6b3;
  --alerte: #b23c33;
  --ok: #1c7a43;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }

.wrap { width: min(1080px, 100% - 44px); margin-inline: auto; }

/* ── Barre ─────────────────────────────────────────────────────────────── */
.topbar { background: var(--nuit); color: var(--nuit-ink); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; letter-spacing: -0.01em; }
.logo img { width: 27px; height: 27px; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topnav a { color: var(--nuit-muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.topnav a:hover { color: var(--nuit-ink); }
.topnav .cta { color: var(--nuit); background: var(--bronze-clair); font-weight: 700; }
.topnav .cta:hover { color: var(--nuit); background: #e8b471; }
@media (max-width: 700px) { .topnav a:not(.cta) { display: none; } }

/* ── Ouverture ─────────────────────────────────────────────────────────── */
.hero { background: var(--nuit); color: var(--nuit-ink); padding: 60px 0 84px; }
/* Deux colonnes : le propos à gauche, l'alerte telle qu'elle arrive à droite —
   la promesse et sa preuve dans le même regard. */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { font-weight: 900; font-size: clamp(33px, 4.3vw, 53px); line-height: 1.06; letter-spacing: -0.03em; max-width: 18ch; }
.hero .lede { font-size: clamp(17px, 1.8vw, 21px); color: var(--nuit-muted); max-width: 62ch; margin: 22px 0 0; }
.hero .lede strong { color: var(--nuit-ink); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px; padding: 13px 22px; border-radius: 10px; }
.btn-solid { background: var(--bronze-clair); color: var(--nuit); }
.btn-solid:hover { background: #e8b471; }
.btn-ghost { border: 1px solid #4a4d59; color: var(--nuit-ink); }
.btn-ghost:hover { border-color: var(--nuit-muted); }
.hero-trust { margin: 26px 0 0; font-size: 14.5px; color: var(--nuit-muted); }

/* L'illustration : une alerte telle qu'elle arrive, rendue en HTML — pas une
   capture d'écran maquillée. Le nom d'entreprise est explicitement fictif. */
.alerte-demo {
  margin: 0; background: var(--nuit-panel); border: 1px solid #33363f;
  border-radius: var(--radius); padding: 20px 22px; max-width: 460px;
  display: flex; gap: 15px; align-items: flex-start;
}
.alerte-demo .cloche { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(217, 160, 84, 0.16); display: grid; place-items: center; }
.alerte-demo .cloche svg { width: 20px; height: 20px; stroke: var(--bronze-clair); }
.alerte-demo .titre { font-weight: 700; }
.alerte-demo .detail { margin: 4px 0 0; font-size: 15px; color: var(--nuit-muted); }
.alerte-demo .quand { margin: 8px 0 0; font-size: 13.5px; color: #9096a3; } /* ≥ 4,5:1 sur le panneau sombre */
.alerte-demo .grave { color: #ef8078; font-weight: 700; }

/* ── Sections claires ──────────────────────────────────────────────────── */
section { padding: 74px 0; }
section h2 { font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.025em; line-height: 1.12; max-width: 20ch; }
section h2 + .chapo { font-size: 18.5px; color: var(--muted); max-width: 60ch; margin: 16px 0 0; }

.probleme { background: var(--panel); border-block: 1px solid var(--border); }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 26px; } }
.chiffre { font-weight: 900; font-size: clamp(46px, 7vw, 78px); line-height: 1; letter-spacing: -0.04em; color: var(--bronze); }
.chiffre small { display: block; margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--muted); }
.probleme p { margin: 0 0 16px; }
.probleme p:last-child { margin-bottom: 0; }

/* La chaîne : une vraie séquence, donc de vrais numéros. */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; counter-reset: pas; }
@media (max-width: 820px) { .etapes { grid-template-columns: 1fr; gap: 30px; } }
.etape { counter-increment: pas; }
.etape::before {
  content: counter(pas); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
  background: var(--bronze); color: #fff; font-weight: 700; font-size: 16px;
}
.etape h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.etape p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

/* Deux niveaux d'alerte : volontairement DISSEMBLABLES, pas deux cartes jumelles. */
.niveaux { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; margin-top: 44px; }
@media (max-width: 820px) { .niveaux { grid-template-columns: 1fr; } }
.niveau-fort { background: var(--nuit); color: var(--nuit-ink); border-radius: var(--radius); padding: 30px 32px; }
.niveau-fort h3 { font-size: 21px; font-weight: 700; }
.niveau-fort p { color: var(--nuit-muted); font-size: 16px; margin: 10px 0 20px; }
.niveau-doux { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px; }
.niveau-doux h3 { font-size: 19px; font-weight: 700; }
.niveau-doux p { color: var(--muted); font-size: 16px; margin: 10px 0 18px; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 16px; }
.liste li { display: flex; gap: 10px; align-items: baseline; }
.liste li::before { content: '—'; flex: none; opacity: 0.5; }
.niveau-fort .liste li::before { color: var(--bronze-clair); opacity: 1; }

/* Franchise : le bloc qui dit ce que le produit NE fait pas. */
.franchise { background: var(--panel); border-block: 1px solid var(--border); }
.franchise dl { margin: 34px 0 0; display: grid; gap: 26px; }
.franchise dt { font-weight: 700; font-size: 17.5px; }
.franchise dd { margin: 6px 0 0; color: var(--muted); max-width: 72ch; }

/* Pour qui : liste éditoriale, pas une grille de cartes. */
.profils { margin-top: 40px; display: grid; gap: 0; }
.profil { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid var(--border); }
.profil:last-child { border-bottom: 1px solid var(--border); }
@media (max-width: 700px) { .profil { grid-template-columns: 1fr; gap: 6px; } }
.profil h3 { font-size: 18px; font-weight: 700; }
.profil p { margin: 0; color: var(--muted); }

/* Tarifs */
.tarifs { background: var(--panel); border-block: 1px solid var(--border); }
.grille-tarifs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
@media (max-width: 900px) { .grille-tarifs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grille-tarifs { grid-template-columns: 1fr; } }
.palier { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; background: var(--bg); }
.palier.mis-en-avant { border-color: var(--bronze); background: var(--panel); box-shadow: 0 1px 0 var(--bronze) inset, 0 0 0 1px var(--bronze); }
.palier h3 { font-size: 16px; font-weight: 700; color: var(--muted); text-transform: none; }
.palier .prix { font-weight: 900; font-size: 34px; letter-spacing: -0.03em; margin: 10px 0 2px; }
.palier .prix span { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.palier p { margin: 12px 0 0; font-size: 15.5px; color: var(--muted); }
.tarifs .note { margin: 26px 0 0; font-size: 15px; color: var(--muted); }

/* Appel final + pied */
.final { background: var(--nuit); color: var(--nuit-ink); }
.final h2 { max-width: 24ch; }
.final p { color: var(--nuit-muted); max-width: 60ch; margin: 16px 0 0; font-size: 18px; }
.final .hero-actions { margin-top: 30px; }

footer { background: var(--nuit); color: var(--nuit-muted); border-top: 1px solid #2c2f38; padding: 30px 0 44px; font-size: 14.5px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer a { color: var(--nuit-muted); }
footer .marque { color: var(--nuit-ink); font-weight: 700; }