/* ============================================================
   messuccessions.fr — feuille de style (Vague 0, identité revue le 15/09/2026)
   Palette propre au site : ardoise + bronze, volontairement sobre
   (pas de vert/orange "startup" des sites frères — sujet succession
   et deuil, cf. guide-developpement-pre-lancement.md §1 et §3).
   Identité propre depuis le 15/09/2026 : Source Serif 4 sur les titres
   et les chiffres de résultat (Manrope reste sur le seul wordmark),
   sablier bronze plein en logo/favicon/OG et en marqueur de badge.
   Conventions reprises des sites frères (mesindependants.fr,
   messimulateursrh.fr) : footer plan du
   site en colonnes, menu par catégories, cartes d'outils en grille.
   ============================================================ */

/* Polices : chargées en <link> avec preconnect depuis le 16/09/2026 (plus d'@import). */

:root{
  --paper:#F6F5F2;
  --paper-alt:#EBE8E2;
  --ink:#20242A;
  --ink-soft:#565C63;
  --primary:#3C4A5C;      /* ardoise — calme, officiel */
  --primary-deep:#262F3B;
  --accent:#8C7048;       /* bronze mat — transmission, sans clinquant */
  --accent-soft:#B79A6B;
  --line:#DCD7CE;
  --ok:#3C5C4A;
  --ok-bg:#E6ECE7;
  --warn-bg:#F3EDE3;
  --radius:12px;
  --radius-sm:8px;
  --max:1040px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.6;
}
h1, h2, h3{
  font-family:'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight:600; letter-spacing:-0.005em; margin:0 0 .45em; color:var(--primary-deep);
}
header .brand{
  font-family:'Manrope','IBM Plex Sans',sans-serif;
  font-weight:800; letter-spacing:-0.015em; margin:0 0 .45em; color:var(--primary-deep);
}
p{ margin:0 0 1em; }
a{ color:var(--primary); }

/* ===== En-tête ===== */
header{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:10; }
.header-inner{
  max-width:var(--max); margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:relative;
}
header .brand{ text-decoration:none; font-size:1.05rem; display:flex; align-items:center; gap:8px; }
header .brand:hover{ opacity:.85; }
header .brand .word-accent{ color:var(--accent); }

.nav-toggle-input{ position:absolute; opacity:0; pointer-events:none; }
.nav-toggle-label{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; cursor:pointer; border-radius:var(--radius-sm); order:2;
}
.nav-toggle-label:hover{ background:var(--paper-alt); }
.nav-toggle-label span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; }

nav.main{
  display:none; flex-direction:column; gap:2px; width:100%; order:4;
  padding-top:8px; margin-top:2px; border-top:1px solid var(--line);
}
.nav-toggle-input:checked ~ nav.main{ display:flex; }
nav.main a{
  color:var(--ink-soft); text-decoration:none; font-size:.92rem;
  padding:11px 8px; border-radius:var(--radius-sm); display:block;
}
nav.main a:hover{ color:var(--primary); background:var(--paper-alt); }

.nav-dropdown{ position:relative; background:transparent; border:0; padding:0; margin:0; border-radius:0; }
.nav-dropdown summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px;
  color:var(--ink-soft); text-decoration:none; font-size:.92rem;
  padding:11px 8px; border-radius:var(--radius-sm);
}
.nav-dropdown summary:hover, .nav-dropdown summary:focus-visible{ color:var(--primary); background:var(--paper-alt); }
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary::after{ content:'▾'; font-size:.7em; transition:transform .15s; }
.nav-dropdown[open] summary::after{ transform:rotate(180deg); }
.nav-dropdown-menu{ display:flex; flex-direction:column; gap:2px; padding:2px 0 4px 14px; }
.nav-dropdown-menu a{
  color:var(--ink-soft); text-decoration:none; font-size:.9rem;
  padding:9px 8px; border-radius:var(--radius-sm); display:block;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ color:var(--primary); background:var(--paper-alt); }

@media (min-width:900px){
  .header-inner{ flex-wrap:nowrap; }
  .nav-toggle-label{ display:none; }
  nav.main{
    display:flex; flex-direction:row; flex-wrap:wrap; width:auto; order:2;
    border-top:none; padding-top:0; margin-top:0; gap:2px;
  }
  nav.main a{ padding:8px 12px; }
  .nav-dropdown summary{ padding:8px 12px; }
  .nav-dropdown-menu{
    position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:0 10px 30px rgba(20,20,30,.12); padding:8px;
    margin-top:6px; min-width:240px; gap:0; z-index:30;
  }
  .nav-dropdown-menu a{ padding:9px 10px; }
  .nav-dropdown-menu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
}

/* ===== Structure générale ===== */
main{ max-width:var(--max); margin:0 auto; padding:0 18px 40px; }
.content-block{ max-width:720px; margin:0 auto; padding:24px 18px 40px; }

/* Fil d'Ariane */
.crumb{ max-width:var(--max); margin:14px auto 0; padding:0 18px; font-size:.78rem; color:var(--ink-soft); }
.crumb a{ color:var(--ink-soft); text-decoration:none; }
.crumb a:hover{ color:var(--primary); text-decoration:underline; }
.crumb span[aria-current]{ color:var(--ink); font-weight:600; }

/* Hero */
.hero{ padding:34px 0 18px; }
.hero h1{ font-size:1.7rem; max-width:38ch; }
.hero p{ color:var(--ink-soft); font-size:.97rem; max-width:78ch; }
.trust-badges, .trust-strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.trust-badges span, .trust-strip span{
  display:inline-flex; align-items:center; gap:7px; font-weight:600;
  font-size:.78rem; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:6px 12px 6px 11px;
}
/* Marqueur de badge : le sablier de la marque, en bronze — aucun emoji (charte éditoriale). */
.trust-badges span::before, .trust-strip span::before{
  content:""; flex-shrink:0; width:11px; height:11px; background:var(--accent);
  clip-path:polygon(9% 0%, 91% 0%, 91% 9%, 58% 50%, 91% 91%, 91% 100%, 9% 100%, 9% 91%, 42% 50%, 9% 9%);
}

/* ===== Hero par situation : trois portes d'entrée (15/09/2026) =====
   Remplace l'entrée unique "liste d'outils" par les trois moments réels
   du visiteur : après un décès, en anticipation, ou pour un simple chiffrage. */
.hero-portes{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px; }
.porte{
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 18px; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.porte:hover, .porte:focus-visible{ border-color:var(--accent-soft); border-left-color:var(--primary); box-shadow:0 4px 14px rgba(32,36,42,.07); transform:translateY(-1px); }
.porte .porte-titre{
  font-family:'Source Serif 4', Georgia, serif; font-weight:600; font-size:1.05rem;
  color:var(--primary-deep); margin:0 0 4px; letter-spacing:-0.005em;
}
.porte p{ margin:0 0 8px; font-size:.87rem; color:var(--ink-soft); }
.porte .porte-suite{ font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); }
.porte .porte-suite::after{ content:' →'; }
@media (min-width:760px){ .hero-portes{ grid-template-columns:repeat(3, 1fr); } }

h2.section{ font-size:1.15rem; margin-top:34px; border-bottom:2px solid var(--accent); display:inline-block; padding-bottom:2px; }

/* Cartes d'outils en grille responsive */
.tools, .toolbox, .toolbox-mini{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px; }
@media (min-width:640px){
  .tools, .toolbox, .toolbox-mini{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
}
.tool-card{
  display:block; text-decoration:none; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  position:relative; height:100%; transition:box-shadow .15s ease, transform .15s ease;
}
.tool-card::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--primary); border-radius:var(--radius) 0 0 var(--radius); }
.tool-card:hover{ box-shadow:0 8px 24px rgba(38,47,59,.10); transform:translateY(-2px); }
.tool-card .tag{ font-family:'IBM Plex Mono', monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); }
.tool-card h3{ font-size:1.05rem; margin:4px 0 4px; }
.tool-card p{ font-size:.85rem; color:var(--ink-soft); margin:0; }

.toolbox-mini a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--ink); font-size:.85rem; font-weight:500; height:100%;
}
.toolbox-mini a:hover{ box-shadow:0 8px 24px rgba(38,47,59,.10); transform:translateY(-2px); }
.toolbox-mini a span{ color:var(--primary); font-family:'IBM Plex Mono', monospace; font-size:.7rem; flex-shrink:0; }

.why{ margin-top:34px; font-size:.92rem; color:var(--ink-soft); max-width:64ch; }
.why h2{ font-size:1.15rem; color:var(--ink); }

.mini-faq{ margin-top:16px; }
.mini-faq .faq-more{ margin:14px 2px 0; font-size:.82rem; }
.mini-faq .faq-more a{ color:var(--primary); font-weight:600; text-decoration:none; }
.mini-faq .faq-more a:hover{ text-decoration:underline; }

details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
details summary{ cursor:pointer; font-weight:600; }

/* Passerelle vers les sites frères */
.bridge{ margin:34px 0 0; padding:18px; background:var(--paper-alt); border:1px dashed #BDB6A9; border-radius:var(--radius-sm); }
.bridge .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.bridge .eyebrow::before{
  content:""; flex-shrink:0; width:10px; height:10px; background:var(--accent);
  clip-path:polygon(9% 0%, 91% 0%, 91% 9%, 58% 50%, 91% 91%, 91% 100%, 9% 100%, 9% 91%, 42% 50%, 9% 9%);
}
.bridge h3{ font-size:1rem; margin-bottom:6px; }
.bridge p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:12px; }
.bridge-links{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:640px){ .bridge-links{ flex-direction:row; } .bridge-links a{ flex:1 1 260px; } }
.bridge-links a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--ink); font-size:.85rem;
}
.bridge-links a span.tag2{ font-family:'IBM Plex Mono', monospace; font-size:.68rem; color:var(--primary); }

/* ===== Gabarit simulateur (fiche de calcul) ===== */
.fiche, .card{ max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.field .help{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
.field input, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:.95rem; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.radio-group{ display:flex; flex-wrap:wrap; gap:8px; }
.radio-group label{
  display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; background:#fff;
}
.radio-group input{ width:auto; }
.radio-group label:has(input:checked){ border-color:var(--primary); background:var(--ok-bg); }

.compute-btn{
  display:inline-block; background:var(--primary); color:#fff; border:none; border-radius:999px;
  padding:12px 26px; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 8px rgba(38,47,59,.25);
}
.compute-btn:hover{ background:var(--primary-deep); box-shadow:0 4px 14px rgba(38,47,59,.3); }

.pdf-btn{
  display:inline-block; background:#fff; color:var(--primary); border:1px solid var(--primary);
  border-radius:999px; padding:10px 20px; font-size:.88rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.link-btn{
  display:inline-block; background:transparent; color:var(--ink-soft); border:1px dashed var(--ink-soft);
  border-radius:999px; padding:9px 18px; font-size:.84rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:10px;
}
.link-btn:hover{ color:var(--primary); border-color:var(--primary); }
.result-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; }
.result-actions .pdf-btn, .result-actions .link-btn, .result-actions .compute-btn{ margin-top:0; }
.pont{ margin-top:14px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.86rem; }
.pont a{ font-weight:700; }
.tranche-table td.num, .tranche-table th.num{ text-align:right; white-space:nowrap; }
.pdf-privacy-note{ margin:8px 0 0; font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.pdf-privacy-note::before{ content:'🔒'; font-size:.85rem; }

.result-card{ margin-top:20px; padding:18px; border-radius:var(--radius); background:var(--paper-alt); border:1px solid var(--line); }
.result-card.winner{ background:var(--ok-bg); border-color:#C7D6CC; box-shadow:0 4px 16px rgba(60,92,74,.12); }
.result-card .amount{ font-size:1.75rem; font-weight:600; font-family:'Source Serif 4', Georgia, serif; color:var(--primary-deep); letter-spacing:-0.01em; }
.result-card table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.85rem; }
.result-card table td, .result-card table th{ padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; }
.result-card .amount.secondaire{ font-size:1.2rem; font-weight:500; color:var(--ink); }
.result-card .reste-reel{ margin-top:12px; padding-top:12px; border-top:1px solid #C7D6CC; font-weight:600; color:var(--primary-deep); }

/* Repli « Affiner ma situation » des simulateurs (mode express, 15/09/2026) */
details.avance{ margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper-alt); padding:0 14px; }
details.avance > summary{ cursor:pointer; padding:12px 0; font-weight:600; color:var(--primary-deep); list-style:none; }
details.avance > summary::-webkit-details-marker{ display:none; }
details.avance > summary::before{ content:'+'; display:inline-block; width:1.1em; font-weight:700; }
details.avance[open] > summary::before{ content:'−'; }
details.avance[open]{ padding-bottom:6px; }
details.avance > summary + .help{ margin-bottom:4px; }

.table-wrap{ overflow-x:auto; border-radius:var(--radius); }

.notice{ margin-top:16px; padding:12px 14px; background:var(--warn-bg); border-radius:var(--radius-sm); font-size:.82rem; color:var(--ink-soft); }
.notice strong{ color:var(--ink); }

/* Sourçage / dates de vérification */
.source-note{ margin-top:28px; font-size:.76rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; }

/* ===== Footer plan du site ===== */
footer{ max-width:var(--max); margin:30px auto 0; padding:24px 18px 30px; border-top:1px solid var(--line); }
.footer-tagline{ max-width:64ch; margin:0 0 20px; font-size:.85rem; color:var(--ink-soft); }
.footer-links{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 24px; margin-bottom:20px; }
@media (min-width:700px){ .footer-links{ grid-template-columns:repeat(4, 1fr); } }
.footer-col{ display:flex; flex-direction:column; }
.footer-col h4{ margin:0 0 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.footer-col h4 a{ color:var(--ink); font-weight:800; text-decoration:none; }
.footer-col h4 a:hover{ color:var(--primary); text-decoration:underline; }
.footer-col a{ display:block; padding:3px 0; font-size:.8rem; color:var(--ink-soft); text-decoration:none; font-weight:500; }
.footer-col a:hover{ color:var(--primary); text-decoration:underline; }
.footer-utility{ margin:0; padding-top:14px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-soft); }
.footer-utility a{ font-weight:600; color:var(--ink-soft); }
footer .disclaimer{ font-size:.72rem; color:var(--ink-soft); max-width:inherit; margin-top:14px; }

@media (max-width:600px){
  main{ padding:0 16px 30px; }
  .hero{ padding:22px 0 14px; }
  .hero h1{ font-size:1.4rem; }
  .fiche, .card{ padding:16px; }
  /* Chapô replié sur mobile (16/09/2026) : classe posée par nav.js
     uniquement si le texte dépasse, donc sans JS tout reste lisible. */
  .chapo-replie{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; margin-bottom:4px; }
}
.chapo-suite{
  background:none; border:0; padding:0; margin:0 0 6px; font:inherit; font-size:.88rem;
  font-weight:600; color:var(--primary); text-decoration:underline; cursor:pointer;
}
.chapo-suite:hover{ color:var(--accent); }

/* ===== Curseur d'âge (calculateur usufruit) ===== */
.slider-row{ display:flex; align-items:center; gap:12px; }
.slider-row input[type="range"]{ flex:1; padding:0; border:0; background:transparent; accent-color:var(--primary); }
.slider-row .slider-value{
  min-width:86px; text-align:right; font-family:'IBM Plex Mono', monospace;
  font-weight:600; color:var(--primary-deep); font-size:.95rem;
}

/* ===== Tableau de barème autonome (hors carte de résultat) ===== */
.table-wrap .bareme-table{ width:100%; border-collapse:collapse; font-size:.85rem; background:#fff; }
.bareme-table th, .bareme-table td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; }
.bareme-table thead th{ background:var(--paper-alt); font-weight:700; white-space:nowrap; }
.bareme-table tr.is-active{ background:var(--ok-bg); font-weight:600; }
.bareme-table tr.is-active td:first-child::after{ content:' ←'; color:var(--primary); }

/* ===== Répartition visuelle usufruit / nue-propriété ===== */
.split-bar{
  display:flex; height:32px; border-radius:var(--radius-sm); overflow:hidden;
  margin-top:14px; border:1px solid var(--line);
}
.split-bar span{
  display:flex; align-items:center; justify-content:center;
  font-size:.76rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden;
}
.split-bar .part-usufruit{ background:var(--primary); }
.split-bar .part-np{ background:var(--accent); }
.split-legend{ display:flex; gap:16px; margin-top:8px; font-size:.78rem; color:var(--ink-soft); flex-wrap:wrap; }
.split-legend b::before{ content:'■ '; }
.split-legend .lg-usufruit b{ color:var(--primary); }
.split-legend .lg-np b{ color:var(--accent); }

/* Suite « au décès de votre autre parent » (simulateur phare, 16/09/2026) */
.result-card .chrono{ margin:8px 0 12px; padding-left:20px; font-size:.9rem; line-height:1.55; }
.result-card .chrono li{ margin-bottom:8px; }
.vue-choix .radio-group label{ font-weight:600; }

/* Signature auteur (E-E-A-T), ajoutée le 16/09/2026 en pied des 12 pages de contenu. */
.author-note{margin:2rem 0 0;padding:1rem 1.25rem;border-left:3px solid var(--bronze,#8C7048);background:var(--paper-alt);border-radius:0 8px 8px 0;font-size:.92rem;color:var(--ink-soft)}
.author-note p{margin:0}
.author-note a{color:var(--ink)}