/* Arnaque ou pas ?: the home page, the free result and the look of every page of the site.
   A public-service look: slate blue, light grey paper, one very readable typeface (Public Sans,
   made for public services), solid buttons.
   The red, amber and green are the three risk levels of the real reports. This file is only
   ever loaded by this site (arnaque/page_head.html), so the shared classes take its look too. */

@font-face {
  font-family: "Public Sans Arnaque";
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ---------------------------------------------------------------- every page */
:root {
  --c1: #2f4a66;
  --c2: #22384f;
  --ink: #16212c;
  --paper: #f4f6f8;
  --line: #d9e0e7;
  --muted: #55626f;
  --danger: #b42318;
  --warn: #9a5b00;
  --ok: #1e7a3c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 33, 44, 0.06);
}
body { background: #f4f6f8; font-family: "Public Sans Arnaque", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; }
h1, h2, h3, .brand { font-family: "Public Sans Arnaque", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
/* The bar keeps its width for the content, its white band runs across the whole window. */
.topbar { max-width: 1180px; background: #ffffff; box-shadow: 0 0 0 100vmax #ffffff, 0 1px 0 100vmax #d9e0e7; clip-path: inset(0 -100vmax -1px); }
.brand { font-size: 1.12rem; color: #16212c; }
.brand-emoji {
  display: inline-block; font-size: 0; width: 30px; height: 30px; flex: 0 0 auto; vertical-align: middle;
  background: url("logo.svg") center / contain no-repeat;
}
.topnav a, .footer { color: #55626f; }
.card { border: 1px solid #d9e0e7; box-shadow: 0 1px 2px rgba(22, 33, 44, 0.06); border-radius: 10px; }
.badge { background: #e6edf4; color: #22384f; }
.offer-price b, .price { font-family: "Public Sans Arnaque", system-ui, sans-serif; color: #22384f; }
.btn { background: #2f4a66; color: #ffffff; border-radius: 8px; box-shadow: none; }
.btn:hover { background: #22384f; filter: none; }
.btn.secondary { background: #ffffff; color: #22384f; border: 2px solid #2f4a66; }
input[type="text"], input[type="email"], select, textarea { background: #ffffff; border-color: #b8c3ce; border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: #2f4a66; }
.score.danger .value { color: #b42318; }
.score.warning .value { color: #9a5b00; }
.score.good .value { color: #1e7a3c; }
.alert-danger { background: #fdeceb; color: #8a1a12; }
.alert-warning { background: #fff4e0; color: #6b4000; }
.alert-info { background: #e8eef5; color: #22384f; }
.teaser-arrow { color: #2f4a66; }

/* ---------------------------------------------------------------- shared pieces */
.ar {
  --ar-ink: #16212c;
  --ar-soft: #3b4a58;
  --ar-muted: #55626f;
  --ar-slate: #2f4a66;
  --ar-slate-deep: #22384f;
  --ar-slate-light: #e6edf4;
  --ar-paper: #f4f6f8;
  --ar-card: #ffffff;
  --ar-line: #d9e0e7;
  --ar-line-strong: #b8c3ce;
  --ar-red: #b42318;
  --ar-red-light: #fdeceb;
  --ar-amber: #9a5b00;
  --ar-amber-light: #fff4e0;
  --ar-green: #1e7a3c;
  --ar-green-light: #e7f4ec;
  --ar-display: "Public Sans Arnaque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ar-body: "Public Sans Arnaque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--ar-body);
  color: var(--ar-ink);
  line-height: 1.6;
}
.ar h1, .ar h2, .ar h3, .ar h4 { font-family: var(--ar-display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.ar p { margin: 0; }
.ar-wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.ar-card { background: var(--ar-card); border: 1px solid var(--ar-line); border-radius: 10px; box-sizing: border-box; }
.ar-kicker { font-family: var(--ar-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-slate); }
.ar-note { font-size: 0.9rem; color: var(--ar-muted); }
.ar-step-label { font-family: var(--ar-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-muted); }
.ar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  font-family: var(--ar-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-align: center;
  padding: 13px 22px; min-height: 52px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ar-slate); color: #ffffff; text-decoration: none;
}
.ar-btn:hover { background: var(--ar-slate-deep); color: #ffffff; }
.ar-btn[disabled] { opacity: 0.6; cursor: wait; }
.ar a:focus-visible, .ar button:focus-visible, .ar input:focus-visible, .ar select:focus-visible, .ar textarea:focus-visible, .ar summary:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.ar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-list li { position: relative; padding-left: 18px; }
.ar-list li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 2px; background: var(--ar-slate); }
.ar-pill { display: inline-block; width: fit-content; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ar-slate-light); color: var(--ar-slate-deep); }
.ar-tag { width: fit-content; font-size: 0.86rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--ar-slate-light); color: var(--ar-slate-deep); }
.ar-price { font-family: var(--ar-display); font-weight: 800; font-size: 1.7rem; color: var(--ar-slate-deep); white-space: nowrap; }
.ar-level { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-radius: 8px; border-left: 6px solid; }
.ar-level strong { font-family: var(--ar-display); font-size: 1.45rem; }
.ar-level.danger { background: var(--ar-red-light); border-color: var(--ar-red); color: #7a160f; }
.ar-level.danger strong { color: var(--ar-red); }
.ar-level.warning { background: var(--ar-amber-light); border-color: var(--ar-amber); color: #5c3700; }
.ar-level.warning strong { color: var(--ar-amber); }
.ar-level.good { background: var(--ar-green-light); border-color: var(--ar-green); color: #134d26; }
.ar-level.good strong { color: var(--ar-green); }
.ar-alert { padding: 12px 14px; border-radius: 8px; }
.ar-alert.danger { background: var(--ar-red-light); color: #7a160f; }
.ar-alert.warning { background: var(--ar-amber-light); color: #5c3700; }

/* The page around the home: white bar, grey paper, the logo instead of the emoji. */
body:has(.ar-home) .footer { max-width: 1180px; }

/* ---------------------------------------------------------------- hero */
.ar-hero { padding-block: 36px 48px; background: #ffffff; border-bottom: 1px solid var(--ar-line); }
.ar-hero-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) { .ar-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; } }
.ar-hero-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ar-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); font-weight: 800; color: var(--ar-ink); max-width: 22em; }
.ar-lead { font-size: 1.05rem; color: var(--ar-soft); max-width: 40em; }
.ar-form { padding: 20px; display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--ar-slate); }
.ar-form label { display: block; margin: 6px 0 4px; font-family: var(--ar-display); font-weight: 700; font-size: 0.98rem; }
.ar-form .hint { font-family: var(--ar-body); font-weight: 400; color: var(--ar-muted); font-size: 0.9rem; }
.ar-form textarea, .ar-form input[type="text"], .ar-form select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1.02rem; padding: 10px 12px; margin: 0;
  border: 1.5px solid var(--ar-line-strong); border-radius: 8px; background: #ffffff; color: var(--ar-ink);
}
.ar-form textarea { min-height: 112px; resize: vertical; }
.ar-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.ar-fields > div { min-width: 0; }
.ar-form .ar-btn { width: 100%; margin-top: 12px; font-size: 1.1rem; }
.ar-form .ar-note { text-align: center; margin-top: 6px; }

.ar-sources { padding: 20px 22px; background: var(--ar-paper); }
.ar-sources h2 { font-size: 1.2rem; margin-bottom: 12px; }
.ar-sources ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ar-sources li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--ar-slate); }
.ar-sources strong { font-family: var(--ar-display); font-size: 1rem; }
.ar-sources a { color: var(--ar-slate-deep); }
.ar-sources span { font-size: 0.92rem; color: var(--ar-soft); }

.ar-result-zone { scroll-margin-top: 16px; }
.ar-result-zone:not([hidden]) { display: block; padding-block: 28px 40px; }

/* ---------------------------------------------------------------- band */
.ar-band { background: var(--ar-slate-deep); color: #ffffff; }
.ar-band ul { list-style: none; margin: 0 auto; padding-block: 18px; display: grid; gap: 12px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ar-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-band li { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; }
.ar-band svg { flex: 0 0 auto; color: #a9c1d9; }

/* ---------------------------------------------------------------- products */
.ar-intro { padding-block: 64px 20px; display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.ar-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ar-intro p { color: var(--ar-soft); font-size: 1.05rem; }
.ar-product { padding-block: 40px; }
.ar-product.alt { background: #ffffff; border-block: 1px solid var(--ar-line); }
.ar-product-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) {
  .ar-product-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
  .ar-product.alt .ar-shot { order: 2; }
}
.ar-shot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ar-before { display: flex; flex-direction: column; gap: 6px; }
.ar-sms { align-self: flex-start; max-width: 30em; background: #e9ecef; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 0.98rem; }
.ar-sms-from { font-size: 0.8rem; font-weight: 700; color: var(--ar-muted); margin-bottom: 2px !important; }
.ar-typed { background: #fffdf5; border: 1px dashed var(--ar-line-strong); border-radius: 8px; padding: 10px 14px; font-size: 0.96rem; color: var(--ar-soft); }
.ar-typed-choice { font-size: 0.84rem; font-weight: 700; color: var(--ar-muted); margin-bottom: 4px !important; }
.ar-report { padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ar-report h4 { font-size: 1rem; margin-top: 4px; }
.ar-report .ar-pill { position: absolute; top: 14px; right: 14px; }
.ar-report-mini { padding: 14px; gap: 10px; background: #ffffff; border: 1px solid var(--ar-line); border-radius: 10px; font-size: 0.95rem; }
.ar-sources-line { font-size: 0.88rem; color: var(--ar-muted); border-top: 1px solid var(--ar-line); padding-top: 8px; }
.ar-urgent { background: var(--ar-amber-light); color: #5c3700; padding: 10px 12px; border-radius: 8px; font-weight: 700; }
.ar-steps-mini { margin: 0; padding: 0; list-style: none; counter-reset: ar-step; display: flex; flex-direction: column; gap: 8px; }
.ar-steps-mini li { counter-increment: ar-step; position: relative; padding-left: 34px; }
.ar-steps-mini li::before {
  content: counter(ar-step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-family: var(--ar-display); font-weight: 700; font-size: 0.85rem;
  background: var(--ar-slate); color: #ffffff;
}
.ar-steps-mini strong { display: block; font-family: var(--ar-display); }
.ar-letter { background: var(--ar-paper); border: 1px solid var(--ar-line); border-radius: 6px; padding: 14px 16px; font-family: Georgia, "Times New Roman", serif; font-size: 0.95rem; display: flex; flex-direction: column; gap: 8px; }
.ar-letter strong { font-family: inherit; }
.ar-letter-sign { text-align: right; }
.ar-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ar-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.ar-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ar-copy > p { color: var(--ar-soft); }
.ar-copy .ar-btn { width: fit-content; }

.ar-more { padding-block: 40px 64px; }
.ar-more-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .ar-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ar-tile { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ar-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ar-tile-head strong:first-child, .ar-tile-title { font-family: var(--ar-display); font-size: 1.15rem; }
.ar-tile-head strong + strong { font-family: var(--ar-display); color: var(--ar-slate-deep); white-space: nowrap; }
.ar-tile p { color: var(--ar-soft); font-size: 0.96rem; }
.ar-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; }
.ar-tile a { font-weight: 700; color: var(--ar-slate-deep); }
.ar-tile-free { background: var(--ar-slate-light); border-color: #c6d4e2; }
.ar-mail { display: flex; flex-direction: column; gap: 4px; background: var(--ar-paper); border: 1px solid var(--ar-line); border-left: 4px solid var(--ar-red); border-radius: 6px; padding: 10px 12px; font-size: 0.9rem; }
.ar-mail span { color: var(--ar-soft); }

/* ---------------------------------------------------------------- how, trust, guides, FAQ */
.ar-how { background: #ffffff; border-block: 1px solid var(--ar-line); padding-block: 56px; }
.ar-how h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 28px; }
.ar-how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 860px) { .ar-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ar-how-steps li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ar-step-n { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--ar-display); font-weight: 800; font-size: 1.2rem; background: var(--ar-slate); color: #ffffff; }
.ar-how-steps h3 { font-size: 1.2rem; }
.ar-how-steps p { color: var(--ar-soft); }
.ar-quote { border-left: 3px solid var(--ar-red); padding-left: 12px; font-size: 0.95rem; }
.ar-trust { padding-block: 52px; }
.ar-trust-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .ar-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.ar-trust h2 { font-size: 1.4rem; margin-bottom: 8px; }
.ar-trust p { color: var(--ar-soft); }
.ar-guides { padding-block: 0 20px; }
.ar-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-guides a { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #ffffff; border: 1px solid var(--ar-line); text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--ar-slate-deep); }
.ar-faq { padding-block: 32px 60px; }
.ar-faq .ar-wrap { max-width: 860px; }
.ar-faq h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.ar-faq details { border-top: 1px solid var(--ar-line-strong); padding-block: 16px; }
.ar-faq details:last-child { border-bottom: 1px solid var(--ar-line-strong); }
.ar-faq summary { font-family: var(--ar-display); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.ar-faq details p { margin-top: 8px; color: var(--ar-soft); }

/* ---------------------------------------------------------------- free result */
.ar-res { display: grid; gap: 20px; }
@media (min-width: 960px) { .ar-res.ar-res-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.ar-res-verdict, .ar-res-offer { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ar-res h2 { font-size: 1.35rem; }
.ar-res h3 { font-size: 1.05rem; margin-top: 6px; }
.ar-todo { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ar-todo strong { display: block; font-family: var(--ar-display); }
.ar-todo a { color: var(--ar-slate-deep); font-weight: 700; overflow-wrap: anywhere; }
.ar-res-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ar-res-offer { border: 2px solid var(--ar-slate); }
.ar-res-offer > p { color: var(--ar-soft); }
.ar-compare { border: 1px solid var(--ar-line); border-radius: 8px; overflow: hidden; font-size: 0.9rem; }
.ar-compare > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-compare span { padding: 8px 10px; border-top: 1px solid var(--ar-line); }
.ar-compare span:first-child { color: var(--ar-muted); background: var(--ar-paper); }
.ar-compare-head span { border-top: 0; font-family: var(--ar-display); font-weight: 700; }
.ar-compare-head span:first-child { color: var(--ar-ink); background: #e9ecef; }
.ar-compare-head span + span { background: var(--ar-slate); color: #ffffff; }
.ar-res-offer .ar-btn { width: 100%; }
.ar-res-facts { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--ar-soft); display: flex; flex-direction: column; gap: 2px; }
.ar-res-small { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: #ffffff; border: 1px solid var(--ar-line); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--ar-ink); }
.ar-res-small:hover { border-color: var(--ar-slate); color: var(--ar-ink); }
.ar-res-small .price { font-family: var(--ar-display); font-size: 1.1rem; color: var(--ar-slate-deep); white-space: nowrap; }
/* On the private page of a relative (proche.html) the result sits inside a card. */
.card .ar-res-verdict { padding: 0; border: 0; }

/* ---------------------------------------------------------------- teasers (product pages) */
.ar-teaser { display: flex; flex-direction: column; gap: 10px; }
.ar-teaser-duo { display: grid; gap: 12px; align-items: start; }
@media (min-width: 640px) { .teaser-page .ar-teaser-duo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.teaser-carte .ar-teaser { font-size: 0.9rem; }

@media (max-width: 520px) {
  /* Like the shared rule for form[data-free]: the thin consent bar waits for the free result. */
  body:has(#gratuit form[data-arnaque]) .consent:not([data-show]) { display: none; }
  body:has(#gratuit form[data-arnaque]):has(.consent:not([data-show])).has-consent { padding-bottom: 0; }
  body { font-size: 16px; }
  .ar-hero { padding-block: 16px 32px; }
  .ar-hero-text { gap: 10px; }
  .ar-kicker { font-size: 0.78rem; }
  .ar-hero h1 { font-size: 1.5rem; }
  .ar-form { padding: 14px; gap: 2px; }
  .ar-form label { font-size: 0.92rem; margin-top: 4px; }
  .ar-form .hint { font-size: 0.84rem; }
  .ar-form textarea { min-height: 92px; font-size: 1rem; }
  .ar-fields { gap: 8px; }
  .ar-form .ar-btn { margin-top: 10px; }
  .ar-lead { font-size: 0.98rem; }
  .ar-intro { padding-block: 44px 8px; }
  .ar-product { padding-block: 32px; }
  .ar-copy .ar-btn { width: 100%; }
  .ar-report { padding: 16px; }
  .ar-report .ar-pill { position: static; }
}