/* ==========================================================================
   Serrure'YES — charte « Open Close »
   One layer over the original theme, printed after style.css and the
   Customizer's Additional CSS (see functions.php, wp_head priority 102).
   Everything the site colours through tokens follows the :root block;
   the rest are the few rules that hard-code the old blue.
   Palette and fonts taken from openclose-serrurier.fr (Nov 2026).
   Revert to the blue design: remove the wp_head hook in functions.php.
   ========================================================================== */
:root {
  --yl: #ff6a55;       /* OC coral — accent surfaces */
  --yl-d: #e8503b;     /* coral, deeper — hovers, large text */
  --yl-t: #b33316;     /* coral for small text: 6.2:1 on white */
  --yl-100: #ffe4dd;   /* coral tint */
  --yl-50: #fff5f2;
  --blue: #ff6a55;
  --blue-d: #c2452f;   /* 5.0:1 on white — nav current, mail pill */
  --blue-100: #ffe4dd;
  --ink: #252b3a;      /* OC navy */
  --ink-2: #343b4d;
  --muted: #5a6273;
  --red: #c2452f;
  --red-tint: #ffe4dd;
  --cream: #fbf8f2;    /* OC warm cream */
  --line: #e4e1da;
  --line-2: #efece6;
  --gold: #c9a961;
  --r: 18px;
  --shadow: 0 1px 2px rgba(37,43,58,.04), 0 16px 34px -18px rgba(37,43,58,.24);
  --f-display: "Clash Display", "General Sans", system-ui, sans-serif;
  --f-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  /* OC's #ff6a55 under white text is 2.8:1; these stops are 4.6–5.0:1 */
  --cta: linear-gradient(160deg, #e5563f, #cf4430 50%, #c2452f);
}

/* ---------- type ---------- */
body { font-family: var(--f-body); color: var(--ink-2); }
h1, h2, h3, h4,
.eyebrow, .pl b, .pl .from, .trust-item strong, .card .price, .card .price small,
.price-table thead th, .price-table td.p, .price-table .fixe,
.price-table td.p[data-label]::before, .step::before, .site-footer h4,
.btn, .logo .txt strong {
  font-family: var(--f-display);
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
h1 { letter-spacing: -.025em; }
/* OC highlights with colour, not an underline (3.5:1 on cream = AA large) */
h1 em, h2 em, .hl { background: none; padding: 0; color: var(--yl-d); }

/* eyebrow → OC's coral-tint pill label */
.eyebrow {
  background: var(--yl-100); color: var(--yl-t);
  padding: 5px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
}

/* ---------- buttons: OC pills ---------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .005em; }
.btn-blue {
  background: var(--cta); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(232,80,59,.75);
}
.btn-blue:hover { box-shadow: 0 18px 34px -14px rgba(232,80,59,.85); filter: brightness(1.04); }
.btn-wa { box-shadow: 0 14px 28px -14px rgba(17,131,68,.7); }
.btn-ghost { background: #fff; border: 1.5px solid rgba(37,43,58,.1); color: var(--ink); }
.btn-ghost:hover { border-color: var(--yl); color: var(--ink); }
.btn-ghost-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost-light:hover { background: var(--cream); color: var(--ink); }

/* ---------- top bar + header ---------- */
.topbar { color: #a9afbd; }
.site-header { background: rgba(255,255,255,.96); }
.logo .txt strong { font-weight: 600; letter-spacing: -.01em; }

/* ---------- hero: warm cream instead of the blue glow ---------- */
.hero { background: linear-gradient(180deg, var(--cream) 0%, #f6efe4 100%); border-bottom: 1px solid var(--line); }
.hero-badges li { border-color: var(--line); }
.hero-badges li:hover { border-color: var(--yl); box-shadow: 0 2px 8px -3px rgba(232,80,59,.4); }
.hero-badges svg { color: var(--yl-d); }
.pricebox { border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow); }

/* ---------- sections & cards ---------- */
section.alt { background: var(--cream); }
.card { border-radius: var(--r); border-color: var(--line); }
/* the live cards' SVG icons were stripped at import (11 empty boxes on the home page);
   OC's cards carry no icon, so an empty box simply goes */
.card .ico:empty { display: none; }
.step::before { background: var(--cta); }
.trust { background: var(--ink); }
.trust-item strong { color: var(--gold); }          /* OC's gold stat numbers: 6.3:1 on navy */
.trust-item span { color: #a9afbd; }

/* price grid: OC's navy header row, navy prices */
.price-table-wrap { border-radius: var(--r); border-color: var(--line); }
.price-table thead th { background: var(--ink); color: #fff; }
.price-table td.p { color: var(--ink); }
.price-table tbody tr:hover { background: var(--cream); }

/* ---------- closing CTA: OC's inset navy card on cream ---------- */
.cta-band { background: var(--cream); padding: 64px 20px; }
.cta-band .wrap {
  background: var(--ink); color: #fff; border-radius: 28px;
  max-width: 1080px; padding: 56px 32px;
  box-shadow: 0 30px 60px -36px rgba(37,43,58,.6);
}
.cta-band p { color: #c3c8d2; }

/* ---------- footer ---------- */
.site-footer { color: #a9afbd; }
.site-footer a { color: #d3d7df; }
.site-footer .logo .txt strong i { color: #ff8a78; }  /* 6.2:1 on navy */
.site-footer .logo .txt small { color: var(--gold); }
.site-footer .siret { background: #2c3344; border-color: #39415a; }
.site-footer .legal { border-top-color: #39415a; color: #959cab; }
.site-footer .legal a { color: #959cab; }

/* ---------- small things ---------- */
.wa-fab { box-shadow: 0 10px 24px -8px rgba(17,131,68,.55); }

@media (prefers-reduced-motion: reduce) {
  .btn-blue:hover { filter: none; }
}