/* ==========================================================================
   ST Patrimoine — habillage V1 « héritage couture » des SIMULATEURS (sim.css)
   Chargée APRÈS le <style> inline de chaque page : elle re-skinne le
   vocabulaire commun (nav, h1, .sim, .result, .big, .btn, .scard…) sans
   toucher aux mises en page spécifiques. Noir & blanc, hairlines, Didot
   italique pour les chiffres phares. + Conversion : barre d'appel mobile.
   ========================================================================== */

:root {
  --blue: #000;              /* les kickers/focus hérités deviennent noirs */
  --green: #000;             /* les « gains » passent au noir couture */
  --ink: #1d1d1f;
  --grey: #6e6e73;
  --bg: #f5f5f7;
  --line: #d2d2d7;
  --serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---- Navigation : couture ------------------------------------------------ */
header { border-bottom: 1px solid var(--line); }
.nav { height: 64px; font-size: 11px; letter-spacing: 0.24em; }
.nav a:last-child {
  border: 1px solid #000; border-radius: 999px; padding: 10px 20px;
  background: #000; color: #fff; transition: background .18s, color .18s;
}
.nav a:last-child:hover { background: transparent; color: #000; }

/* ---- Typographie --------------------------------------------------------- */
.kicker { color: #000; letter-spacing: 0.34em; }
.kicker::before { content: "\2014\00a0\00a0"; color: var(--grey); }
h1 {
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: -0.03em !important;
  line-height: 0.98 !important;
  font-size: clamp(2.1rem, 5.6vw, 3.3rem) !important;
}
.lead { color: var(--grey); }

/* ---- Carte simulateur ---------------------------------------------------- */
.sim { border: 1px solid #000; border-radius: 20px; box-shadow: none; }
.inputwrap input, .inputwrap select {
  border-radius: 2px; border-color: var(--line);
}
.inputwrap input:focus, .inputwrap select:focus { border-color: #000; }
input[type="range"]::-webkit-slider-thumb { border-color: #000; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
::selection { background: #000; color: #fff; }

/* ---- Résultats : le chiffre est un objet de couture ---------------------- */
.result { border-radius: 16px; }
.result .big, .verdict strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: #000;
  letter-spacing: -0.015em;
  font-size: clamp(2.2rem, 6.5vw, 3rem);
}
.result .lbl { letter-spacing: 0.26em; color: var(--grey); }
.result .row b { font-weight: 600; }

/* Scénarios / comparaisons : rangs hairline, meilleur = filet noir */
.srow, .crow { border-radius: 14px; border-color: var(--line); }
.srow.best, .crow.best { border-color: #000; box-shadow: 0 0 0 1px #000 inset; }
.srow.best .amt, .crow.best .amt { color: #000; }
.srow .track i, .crow .track i { background: #cfcfd6; }
.srow.best .track i, .crow.best .track i { background: #000; }
.warn { color: #7a5a12; background: rgba(122, 90, 18, .07); }

/* ---- Boutons ------------------------------------------------------------- */
.btn {
  background: #000; border: 1px solid #000;
  letter-spacing: 0.2em; transition: background .18s, color .18s, transform .18s cubic-bezier(.22,.61,.36,1);
}
.btn:hover { background: transparent; color: #000; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: #000; border-color: #000; }
.btn.ghost:hover { background: #000; color: #fff; }

/* ---- Note pédagogique & légal --------------------------------------------- */
.note { border-radius: 16px; border-left: 2px solid #000; }
footer { border-top: 1px solid var(--line); }

/* ---- Listing (/simulateurs/) ---------------------------------------------- */
.scard {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s;
  box-shadow: none;
}
.scard:hover { transform: translateY(-3px); border-color: #000; box-shadow: none; }
.scard .cat { color: #000; letter-spacing: 0.26em; }
.scard .cat::before { content: "\2014\00a0"; color: var(--grey); }
.scard h3 { font-weight: 500; letter-spacing: -0.015em; }

/* ---- Barre d'appel mobile (conversion : « appeler tout de suite ») -------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.callbar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 999px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
}
.callbar .call { background: #000; color: #fff; border: 1px solid #000; }
.callbar .rdv { background: #fff; color: #000; border: 1px solid #000; }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: 76px; }
}

/* ---- Accessibilité -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .scard, .srow .track i, .crow .track i { transition: none !important; }
}