/* Guides : mise en page article (sommaire fixe, typographie, encadrés) dans la DA de l'accueil */
.gd-hero { padding: 48px 0 40px; background: linear-gradient(135deg, rgba(48, 75, 254, 0.06) 0%, transparent 60%); border-bottom: 1px solid var(--border); }
.gd-hero-in { max-width: 980px; }
.gd-hero .breadcrumb { margin: 0 0 16px; }
.gd-hero h1 { margin: 0 0 18px; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 860px; }
.gd-author { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gd-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #304BFE; }
.gd-author b { display: block; font-size: 0.95rem; }
.gd-author span { font-size: 0.84rem; color: var(--text-muted); }
.gd-start { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 24px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(48, 75, 254, 0.25); background: var(--bg-card); color: var(--text); text-decoration: none; }
.gd-start span { font-size: 0.78rem; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; }
.gd-start:hover { border-color: var(--brand); }

.gd-wrap { padding-top: 48px; }
.gd-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1100px; }
.gd-toc { position: sticky; top: 96px; }
.gd-toc-k { margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gd-toc ol { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: toc; border-left: 2px solid var(--border); }
.gd-toc li { counter-increment: toc; }
.gd-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 0.88rem; line-height: 1.4; color: var(--text-muted); text-decoration: none; }
.gd-toc a:hover { color: var(--text); }
.gd-toc a.on { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.gd-toc-cta { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--brand-soft); }
.gd-toc-cta b { font-size: 0.92rem; }
.gd-toc-cta span { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.gd-toc-cta .btn { justify-content: center; }

.gd-article { max-width: 720px; margin: 0; font-size: 1.06rem; line-height: 1.8; }
.gd-article > p:first-child { font-size: 1.15rem; line-height: 1.7; color: var(--text); }
.gd-article h2 { margin: 56px 0 16px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 1.6rem; line-height: 1.25; scroll-margin-top: 96px; }
.gd-article h3 { margin: 32px 0 10px; font-size: 1.2rem; }
.gd-article a { color: var(--brand); font-weight: 500; }
.gd-article table { border-radius: 12px; overflow: hidden; }
.gd-article thead tr { background: var(--bg-alt); }
.gd-article .article-callout { margin: 28px 0; padding: 20px 22px; border: 1px solid rgba(48, 75, 254, 0.2); border-left: 4px solid var(--brand); border-radius: 0 14px 14px 0; background: var(--brand-soft); font-size: 1rem; line-height: 1.7; }
.gd-article .article-stat { border-radius: 14px; background: linear-gradient(135deg, rgba(48, 75, 254, 0.06), rgba(58, 207, 145, 0.08)); border-color: rgba(48, 75, 254, 0.18); }
.gd-article .article-stat .stat-big { background: linear-gradient(90deg, #304BFE, #3ACF91); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font-heading); font-weight: 700; }
.gd-article details { margin: 0; border-bottom: 1px solid var(--border); }

@media (max-width: 1000px) {
  .gd-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gd-toc { position: static; }
  .gd-toc ol { display: none; }
  .gd-toc-k { display: none; }
}

/* FAQ générale */
.fq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fq-nav a { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font-size: 0.88rem; font-weight: 500; text-decoration: none; }
.fq-nav a:hover { border-color: var(--brand); color: var(--brand); }
.fq-wrap { max-width: 860px; }
.fq-cat { margin-bottom: 48px; scroll-margin-top: 96px; }
.fq-cat h2 { margin: 0 0 14px; font-size: 1.45rem; text-align: left; }
.fq-cat .hf-list { max-width: none; }
.hf-a { margin: 0 0 20px; font-size: 0.97rem; line-height: 1.75; color: var(--text-muted); }
.hf-a p { margin: 0 0 10px; }
.hf-a a { color: var(--brand); font-weight: 500; }
.hf-a strong { color: var(--text); }

/* Glossaire */
.gl-wrap { max-width: 1100px; }
.gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gl-term { display: flex; flex-direction: column; padding: 22px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); scroll-margin-top: 96px; }
.gl-term:target { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(48, 75, 254, 0.12); }
.gl-term h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.1rem; }
.gl-term p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); }
.gl-see { margin-top: 12px; font-size: 0.88rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.gl-see:hover { text-decoration: underline; }
@media (max-width: 760px) { .gl-grid { grid-template-columns: 1fr; } }

/* Calculateur de demandes (outils/roi) */
.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; }
.roi-in, .roi-out { padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); }
.roi-out { background: linear-gradient(160deg, #F2F5FF 0%, var(--bg-card) 60%); border-color: rgba(48, 75, 254, 0.2); }
.roi-l { display: block; margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
.roi-l:not(:first-child) { margin-top: 22px; }
.roi-f { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-alt); color: var(--text); font: 1rem var(--font); }
.roi-euro { display: flex; align-items: center; gap: 10px; }
.roi-euro .roi-f { max-width: 180px; }
.roi-in input[type="range"] { width: 100%; accent-color: #304BFE; }
.roi-help { margin: 18px 0 0; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.roi-k { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.roi-big, .roi-ca { margin: 0 0 22px; }
.roi-big b, .roi-ca b { display: block; font-family: var(--font-heading); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; background: linear-gradient(90deg, #304BFE, #3ACF91); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roi-big span, .roi-ca span { font-size: 0.92rem; color: var(--text-muted); }
.roi-ex { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.roi-ex a { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text); text-decoration: none; font-size: 0.9rem; }
.roi-ex a:hover { border-color: var(--brand); }
.roi-ex span { font-size: 0.8rem; color: var(--text-muted); }
.roi-go { width: 100%; justify-content: center; }
.roi-note { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: 0.84rem; color: var(--text-muted); }
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; } }
/* Tableaux des guides : défilent dans leur cadre sur mobile au lieu d'élargir la page */
.gd-article table { display: block; max-width: 100%; overflow-x: auto; }
.gd-article > div:has(> table) { max-width: 100%; overflow-x: auto; }
/* Calculateur de demandes en étapes */
.roi-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.roi-prog li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.roi-prog li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-alt); font-size: 0.72rem; }
.roi-prog li.on { border-top-color: #304BFE; color: var(--text); }
.roi-prog li.on b { background: linear-gradient(135deg, #304BFE, #3ACF91); color: #fff; }
.roi-q { margin: 0 0 16px; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.roi-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roi-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--bg-card); color: var(--text); font: 600 0.9rem var(--font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.roi-tile:hover { border-color: rgba(48, 75, 254, 0.45); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(48, 75, 254, 0.1); }
.roi-tile.on { border-color: transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #304BFE, #3ACF91) border-box; }
.roi-tile-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.roi-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.roi-back { padding: 0; border: 0; background: none; color: var(--text-muted); font: 600 0.9rem var(--font); cursor: pointer; }
.roi-back::before { content: "← "; }
.roi-back:hover { color: var(--brand); }
.roi-nav .btn { border-radius: 999px; }
.roi-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.roi-presets button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font: 500 0.84rem var(--font); cursor: pointer; }
.roi-presets button:hover { border-color: var(--brand); color: var(--brand); }
.roi-recap-l { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.roi-recap-l li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt); font-size: 0.9rem; }
.roi-recap-l span { color: var(--text-muted); }
.roi-recap .roi-restart::before { content: "↺ "; }
.roi-out { transition: opacity .3s ease, filter .3s ease; }
.roi-out:not(.is-ready) { opacity: .45; filter: grayscale(.4); }
@media (max-width: 560px) { .roi-tiles { grid-template-columns: 1fr; } .roi-prog li { font-size: 0; gap: 0; justify-content: center; } }
.roi-ex .roi-ex-note { padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--text); font-size: 0.84rem; line-height: 1.45; list-style: none; }
.gd-toc .gd-toc-cta .btn, .gd-toc .gd-toc-cta .btn:hover { color: #fff; font-weight: 600; }
.gd-toc .gd-toc-cta .btn { margin-left: 0; padding: 11px 18px; border-left: 0; line-height: 1.2; }