/* CalculPension — thème 2 « Doux & Confiant » (copie exacte du motif validé) */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', system-ui, -apple-system, sans-serif; color:#3d3229; background:#faf6f0; line-height:1.65; }
.serif { font-family:Georgia, 'Times New Roman', serif; }
.wrap { max-width:1040px; margin:0 auto; padding:0 22px; }
header { background:#faf6f0; padding:16px 0; border-bottom:1px solid #efe6d8; position:sticky; top:0; z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .wordmark { font-size:23px; font-weight:800; color:#0e5f5b; letter-spacing:-.3px; }
.brand .wordmark em { font-style:normal; color:#d99a2b; }
nav a { margin-left:24px; text-decoration:none; color:#5c554b; font-size:15px; font-weight:500; }
nav a:hover { color:#0e5f5b; }
.hero { text-align:center; padding:64px 0 44px; }
.kicker { display:inline-block; background:#fdf0d5; color:#8a5a00; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:8px 18px; border-radius:30px; margin-bottom:20px; }
.hero h1 { font-family:Georgia,serif; font-size:40px; line-height:1.25; color:#2e2a24; max-width:720px; margin:0 auto 16px; font-weight:600; }
.hero p { font-size:18px; color:#6b6257; max-width:620px; margin:0 auto; }
.tabs { display:flex; gap:8px; justify-content:center; margin:34px 0 0; }
.tab { padding:13px 30px; border-radius:30px; border:1.5px solid #e2d9c8; background:#fff; font-size:16px; font-weight:700; color:#6b6257; cursor:pointer; }
.tab.active { background:#0e5f5b; border-color:#0e5f5b; color:#fff; }
.calc-card { background:#fff; border-radius:20px; box-shadow:0 16px 48px rgba(14,95,91,.10); padding:40px; border:1px solid #efe6d8; margin:26px 0 56px; }
.calc-pane { display:none; }
.calc-pane.active { display:block; }
.calc-pane h2 { font-size:22px; color:#0e5f5b; margin-bottom:4px; }
.calc-pane .sub { color:#8a8073; margin-bottom:26px; font-size:15px; }
.grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:10px; }
.grid.two { grid-template-columns:1fr 1fr; }
label { display:block; font-size:13px; font-weight:600; color:#5c554b; margin-bottom:8px; }
label small { font-weight:400; color:#a09a8d; }
input, select { width:100%; padding:13px 15px; border:1.5px solid #e2d9c8; border-radius:12px; font-size:16px; background:#fffdf9; font-family:inherit; }
input:focus, select:focus { outline:none; border-color:#0e5f5b; }
.hint { font-size:13px; color:#a09a8d; margin-top:6px; }
.result { margin-top:26px; background:#f2fbf5; border:1.5px solid #bfe6c9; border-radius:14px; padding:26px; }
.result .amount { font-size:46px; font-weight:800; color:#1e7a34; line-height:1.1; }
.result .annual { font-size:17px; color:#3d6b41; margin-top:4px; }
.result small { color:#8a8073; display:block; margin-top:10px; font-size:13px; }
.breakdown { margin-top:22px; border:1px solid #efe6d8; border-radius:12px; overflow:hidden; }
.breakdown table { width:100%; border-collapse:collapse; font-size:15px; }
.breakdown td { padding:11px 16px; border-bottom:1px solid #f3ede2; }
.breakdown tr:last-child td { border-bottom:none; }
.breakdown td:last-child { text-align:right; font-weight:600; }
.breakdown tr.total td { background:#0e5f5b; color:#fff; font-weight:700; }
.breakdown tr.total td:last-child { font-size:18px; }
.delta { display:inline-block; background:#e8f7ec; color:#1e7a34; font-weight:700; padding:4px 14px; border-radius:20px; font-size:15px; margin-left:10px; }
.note { background:#fff8e8; border:1px solid #f0dfae; border-radius:12px; padding:16px 20px; font-size:14px; color:#6b5a2e; margin-top:20px; }
.reassure { display:flex; gap:26px; justify-content:center; margin-top:20px; flex-wrap:wrap; font-size:14px; color:#6b6257; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:56px; }
.feat { background:#fff; border-radius:16px; padding:30px; border:1px solid #efe6d8; }
.feat .icon { font-size:30px; margin-bottom:12px; }
.feat h3 { font-size:17px; color:#0e5f5b; margin-bottom:8px; }
.feat p { font-size:15px; color:#6b6257; }
footer { padding:36px 0 48px; font-size:14px; color:#8a8073; border-top:1px solid #efe6d8; }
footer a { color:#8a8073; text-decoration:none; margin-right:20px; }
footer .fcols { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:24px; }
footer .fcols h4 { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:#5c554b; margin-bottom:12px; }
footer .fcols a { display:block; margin:0 0 8px; }
footer .fine { margin-top:14px; }

/* ---- Pages guides ---- */
.article { max-width:780px; margin:0 auto; padding:8px 0 48px; }
.article-hero { text-align:center; padding:48px 0 30px; }
.article-hero h1 { font-family:Georgia,serif; font-size:36px; line-height:1.28; color:#2e2a24; max-width:740px; margin:0 auto 14px; font-weight:600; }
.article-hero .lede { font-size:19px; color:#6b6257; max-width:680px; margin:0 auto; }
.byline { text-align:center; font-size:14px; color:#a09a8d; margin-top:18px; }
.article h2 { font-family:Georgia,serif; font-size:26px; color:#0e5f5b; margin:42px 0 14px; font-weight:600; line-height:1.35; }
.article h3 { font-size:19px; color:#2e2a24; margin:26px 0 10px; font-weight:700; }
.article p { font-size:17px; margin-bottom:16px; color:#3d3229; }
.article ul, .article ol { margin:0 0 18px 24px; font-size:17px; color:#3d3229; }
.article li { margin-bottom:9px; }
.article a { color:#0e5f5b; font-weight:600; text-decoration:underline; text-decoration-color:#d99a2b; text-underline-offset:3px; }
.article a:hover { color:#0b4a47; }
.direct { background:#fff; border-left:5px solid #d99a2b; border-radius:0 14px 14px 0; padding:20px 24px; margin:26px 0; box-shadow:0 8px 28px rgba(14,95,91,.07); }
.direct p { margin:0; font-size:17px; }
.direct strong { color:#0e5f5b; }
.exemple { background:#eef7f4; border:1px solid #bcdad5; border-radius:14px; padding:22px 24px; margin:24px 0; }
.exemple h4 { font-family:Georgia,serif; font-size:18px; color:#0e5f5b; margin-bottom:12px; }
.exemple p, .exemple li { font-size:16px; }
.exemple .calc-line { font-family:Georgia,serif; font-size:17px; background:#fff; border:1px dashed #9fc4bd; border-radius:10px; padding:12px 16px; margin:10px 0; }
.exemple .total-line { font-size:19px; font-weight:800; color:#0e5f5b; margin-top:10px; }
.avert { background:#fff8e8; border:1px solid #f0dfae; border-radius:14px; padding:18px 22px; margin:24px 0; font-size:15px; color:#6b5a2e; }
table.taux { width:100%; border-collapse:collapse; background:#fff; font-size:15.5px; margin:20px 0 26px; border:1px solid #efe6d8; border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(14,95,91,.06); }
table.taux caption { caption-side:bottom; text-align:left; font-size:13px; color:#8a8073; padding:10px 4px 0; font-style:italic; }
table.taux thead th { background:#0e5f5b; color:#fff; text-align:left; padding:13px 14px; font-size:14px; font-weight:700; }
table.taux thead th.num, table.taux td.num { text-align:right; }
table.taux tbody td { padding:11px 14px; border-bottom:1px solid #f3ede2; }
table.taux tbody tr:nth-child(even) td { background:#fbf8f2; }
table.taux tbody tr:last-child td { border-bottom:none; }
details.faq { background:#fff; border:1px solid #efe6d8; border-radius:12px; margin-bottom:10px; }
details.faq summary { padding:15px 18px; cursor:pointer; font-weight:700; color:#0e5f5b; font-size:16px; list-style:none; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::before { content:"+ "; color:#d99a2b; font-weight:800; }
details.faq[open] summary::before { content:"– "; }
details.faq .faq-body { padding:0 20px 18px; font-size:16px; color:#5c554b; }
.sommaire { background:#fff; border:1px solid #efe6d8; border-radius:14px; padding:20px 24px; margin:24px 0; }
.sommaire h3 { font-size:15px; text-transform:uppercase; letter-spacing:1px; color:#8a8073; margin:0 0 10px; }
.sommaire ol { margin:0 0 0 20px; font-size:15.5px; }
.sommaire li { margin-bottom:6px; }
.sommaire a { font-weight:600; }
.related { background:#fff; border:1px solid #efe6d8; border-radius:16px; padding:26px 28px; margin:40px 0 0; }
.related h3 { font-family:Georgia,serif; font-size:20px; color:#0e5f5b; margin-bottom:12px; }
.related ul { list-style:none; margin:0; }
.related li { margin-bottom:8px; font-size:16px; }
.signature { margin-top:36px; padding-top:18px; border-top:1px solid #efe6d8; font-size:14px; color:#8a8073; }

@media(max-width:720px){
  .grid,.grid.two,.features{grid-template-columns:1fr;}
  .hero h1{font-size:29px;}
  .article-hero h1{font-size:27px;}
  .calc-card{padding:26px;}
  footer .fcols{grid-template-columns:1fr;}
  nav a{margin-left:14px; font-size:13.5px;}
  .article h2{font-size:23px;}
}
@media print { header nav, footer { display:none; } }

/* ==========================================================================
   CalculPension — ajouts shell (navigation mobile, dropdown Guide,
   validation inline, bannières légales, boîtes de réponse/formule, boutons)
   ========================================================================== */

h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
input, select, textarea { font-size: 16px; } /* jamais de zoom auto sur mobile */

/* --- bouton hamburger (≤700px) --- */
.menu-toggle {
  display: none; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #e2d9c8; border-radius: 12px;
  padding: 10px 16px; font-size: 16px; font-weight: 700; color: #0e5f5b;
  cursor: pointer; font-family: inherit; line-height: 1;
}
.menu-toggle:hover { border-color: #0e5f5b; }
.mobile-menu { display: none; border-top: 1px solid #efe6d8; background: #faf6f0; }
.mobile-menu.open { display: block; }
.mobile-menu .wrap { padding-top: 8px; padding-bottom: 20px; max-height: 72vh; overflow-y: auto; }
.mobile-menu h4 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #8a8073; margin: 16px 0 4px; font-family: inherit;
}
.mobile-menu a {
  display: block; padding: 10px 4px; color: #3d3229; text-decoration: none;
  font-size: 16px; border-bottom: 1px solid #efe6d8;
}
.mobile-menu a:hover, .mobile-menu a:focus { color: #0e5f5b; }
.mobile-menu a[aria-current="page"] { color: #0e5f5b; font-weight: 700; }

/* --- dropdown Guide (desktop) --- */
.dropdown { position: relative; }
.dropbtn {
  margin-left: 24px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #5c554b;
  padding: 6px 0;
}
.dropbtn:hover, .dropbtn:focus { color: #0e5f5b; }
.dropdown-content {
  display: none; position: absolute; top: 100%; right: 0; min-width: 330px;
  background: #fff; border: 1px solid #efe6d8; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(14,95,91,.14); padding: 10px; z-index: 60;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display: block; }
.dropdown-content a {
  display: block; margin: 0; padding: 9px 12px; font-size: 14.5px;
  color: #3d3229; text-decoration: none; border-radius: 8px;
}
.dropdown-content a:hover, .dropdown-content a:focus { background: #faf6f0; color: #0e5f5b; }

/* --- validation inline (zéro alert()) --- */
.error {
  display: none; font-size: 14px; color: #b3261e; background: #fdecea;
  border-radius: 8px; padding: 8px 12px; margin-top: 6px;
}
.error.show { display: block; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #b3261e; }

/* --- bannière légale (barème indicatif) --- */
.legal-banner {
  background: #fff; border: 2px solid #d99a2b; border-radius: 14px;
  padding: 18px 22px; margin: 26px 0; font-size: 15.5px; color: #3d3229;
}
.legal-banner strong { color: #8a5a00; }

/* --- réponse directe (GEO) --- */
.direct-answer {
  background: #fff; border: 1px solid #efe6d8; border-left: 5px solid #0e5f5b;
  border-radius: 14px; padding: 20px 24px; margin: 26px auto 0;
  max-width: 760px; text-align: left; font-size: 16.5px;
}
.direct-answer .worked {
  display: block; margin-top: 12px; background: #f2fbf5;
  border: 1px solid #bfe6c9; border-radius: 10px; padding: 12px 16px;
  font-size: 15.5px; color: #2c5b31;
}
.updated { font-size: 13.5px; color: #8a8073; margin-top: 14px; }

/* --- boîte formule --- */
.formula-box {
  background: #faf6f0; border: 1px dashed #0e5f5b; border-radius: 12px;
  padding: 18px 22px; margin: 18px 0; font-size: 17px; text-align: center;
  overflow-wrap: anywhere; hyphens: auto; color: #2e2a24;
}
.formula-box strong { color: #0e5f5b; }

/* --- boutons --- */
.btn {
  display: inline-block; background: #0e5f5b; color: #fff; border: 0;
  padding: 13px 30px; border-radius: 30px; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none; font-family: inherit; margin-top: 10px;
}
.btn:hover { background: #0a4a46; color: #fff; }
.btn.secondary { background: #fff; color: #0e5f5b; border: 1.5px solid #0e5f5b; }
.btn.secondary:hover { background: #0e5f5b; color: #fff; }
.linklike {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: #6b6257; text-decoration: underline; padding: 0;
}

/* --- tableau d'arriérés (revalorisation) --- */
table.arrears { width: 100%; border-collapse: collapse; font-size: 15px; margin: 18px 0; background: #fff; border: 1px solid #efe6d8; border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; }
table.arrears th, table.arrears td { padding: 10px 12px; border-bottom: 1px solid #f3ede2; text-align: right; white-space: nowrap; }
table.arrears th:first-child, table.arrears td:first-child { text-align: left; }
table.arrears thead th { background: #0e5f5b; color: #fff; font-size: 13.5px; }
table.arrears tbody tr:last-child td { border-bottom: none; }
table.arrears input { padding: 8px 10px; font-size: 15px; max-width: 130px; }
table.arrears tr.total td { background: #0e5f5b; color: #fff; font-weight: 700; }

@media (max-width: 700px) {
  .desktop-nav { display: none !important; }
  .menu-toggle { display: inline-flex; }
  .dropbtn { margin-left: 0; }
  .result .amount { font-size: 34px; }
}
@media print {
  .menu-toggle, .mobile-menu, .tabs, .reassure, .no-print { display: none !important; }
  header { position: static; }
  body { background: #fff; }
  .calc-card { box-shadow: none; margin: 0 0 20px; }
  .calc-pane { display: block !important; page-break-inside: avoid; }
  .hero { padding: 20px 0; }
}

/* ---- FAQ / pages légales / contact ---- */
nav a.active { color:#0e5f5b; font-weight:700; }
.breadcrumb { font-size:13.5px; color:#8a8073; padding:22px 0 0; }
.breadcrumb ol { list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; }
.breadcrumb li { margin:0; }
.breadcrumb a { color:#0e5f5b; text-decoration:none; font-weight:600; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb li + li::before { content:"\203A"; margin-right:8px; color:#c9bda9; }
.placeholder { background:#fff8e8; border:2px dashed #d99a2b; border-radius:14px; padding:20px 24px; margin:26px 0; font-size:16px; color:#6b5a2e; }
.placeholder strong { display:block; color:#8a5a00; margin-bottom:8px; font-size:17px; }
.placeholder .todo { font-family:Georgia,serif; font-size:18px; color:#0e5f5b; }
.legal-list { list-style:none; margin:0 0 18px; padding:0; }
.legal-list li { margin-bottom:10px; font-size:16px; }
.legal-list .todo { font-weight:700; color:#0e5f5b; }
textarea { width:100%; padding:13px 15px; border:1.5px solid #e2d9c8; border-radius:12px; font-size:16px; background:#fffdf9; font-family:inherit; color:#3d3229; min-height:150px; resize:vertical; }
textarea:focus { outline:none; border-color:#0e5f5b; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { margin-bottom:20px; }
.field-error { color:#b3261e; font-size:13.5px; margin-top:6px; display:none; }
.field-error.show { display:block; }
input.invalid, select.invalid, textarea.invalid { border-color:#b3261e; }
.btn { display:inline-block; background:#0e5f5b; color:#fff; border:none; border-radius:30px; padding:14px 38px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn:hover { background:#0b4c49; }
.btn:disabled { opacity:.6; cursor:default; }
.form-ok { background:#f2fbf5; border:1.5px solid #bfe6c9; color:#2e6b35; border-radius:12px; padding:16px 20px; margin-top:20px; display:none; font-size:16px; }
.form-ok.show { display:block; }
.form-err { background:#fdf0ef; border:1.5px solid #eec5c0; color:#8f2b25; border-radius:12px; padding:16px 20px; margin-top:20px; display:none; font-size:16px; }
.form-err.show { display:block; }
.form-note { font-size:14px; color:#8a8073; margin-top:14px; }
@media(max-width:720px){ .form-row{grid-template-columns:1fr;} }

/* Breadcrumbs — fil d'Ariane */
.breadcrumbs { font-size:13px; color:#8a8073; padding:12px 0 0; }
.breadcrumbs a { color:#0e5f5b; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs .sep { margin:0 8px; color:#c9bfae; }
.breadcrumbs [aria-current="page"] { color:#8a8073; }