/* Guide public TekynodUI — charte du site, contenu et captures réelles. */
.module-page .page-inner { max-width: 1260px; }
.module-page main { overflow-wrap: break-word; }
.module-page p { line-height: 1.75; }
.module-page .module-section { margin-block: 90px; }
.module-hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 54px; align-items: center; padding-block: 30px 48px; }
.module-eyebrow { display: flex; align-items: center; gap: 12px; font-size: .8125rem; letter-spacing: .12em; font-weight: 700; color: var(--c-accent); margin-bottom: 24px; }
.module-eyebrow img { width: 38px; height: 38px; object-fit: contain; }
.module-hero h1 { font: 650 clamp(2.6rem, 4.3vw, 4.1rem)/1.09 var(--font-head); letter-spacing: -.045em; margin: 0 0 26px; }
.module-hero h1 span, .module-mobile-story h2 span, .module-support h2 span { color: var(--c-accent); }
.module-lead { font-size: 1.12rem; color: var(--c-text-dim); margin-bottom: 24px; max-width: 35rem; }
.module-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.module-tags span { font-size: .875rem; border: 1px solid var(--c-border-hi); border-radius: 7px; padding: 5px 9px; color: var(--c-text-dim); }
.module-small { font-size: .875rem; color: var(--c-text-dim); margin-top: 18px; }
.module-hero-preview { margin: 0; padding: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border-hi); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.24); min-width: 0; }
.module-preview-label { display: flex; gap: 12px; justify-content: space-between; font-size: .8125rem; color: var(--c-text-dim); padding: 10px 6px 16px; }
.module-hero-preview > a { display: block; height: 570px; overflow: hidden; border-radius: 10px; background: #fff; }
.module-hero-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.module-hero-preview figcaption { font-size: .8125rem; color: var(--c-text-dim); padding: 13px 7px 5px; line-height: 1.6; }
.module-value-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--c-border-hi); }
.module-value-strip > div { display: flex; align-items: center; gap: 18px; padding: 26px 20px; }
.module-value-strip > div + div { border-left: 1px solid var(--c-border); }
.module-number { font: 400 2rem var(--font-head); color: var(--c-accent); opacity: .8; }
.module-value-strip p { margin: 0; }
.module-value-strip strong, .module-value-strip p span { display: block; }
.module-value-strip strong { font-size: 1rem; }
.module-value-strip p span { font-size: .875rem; color: var(--c-text-dim); margin-top: 3px; }
.module-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.module-feature-grid .card { padding: 28px; }
.module-feature-grid h3 { font: 600 1.35rem/1.3 var(--font-head); margin: 14px 0; }
.module-feature-grid .card > p:not(.module-feature-index) { font-size: 1rem; color: var(--c-text-dim); margin: 0; }
.module-feature-index { color: var(--c-accent); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; margin: 0; }
.module-page .section-title { font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1.18; letter-spacing: -.025em; }
.module-page .section-subtitle { max-width: 52rem; margin-top: 18px; }
.module-page .section-header { margin-bottom: 30px; }
.module-mobile-story { display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: 75px; padding: 45px 60px; border: 1px solid var(--c-border); background: var(--glass-bg-2); border-radius: 24px; }
.module-mobile-story h2, .module-support h2 { font: 600 clamp(1.8rem,3vw,2.7rem)/1.2 var(--font-head); letter-spacing: -.025em; margin: 10px 0 24px; }
.module-mobile-story p { color: var(--c-text-dim); font-size: 1rem; }
.module-mobile-preview { margin: 0 auto; width: 265px; }
.module-mobile-preview img { display: block; width: 100%; max-height: 490px; object-fit: cover; object-position: top; border: 6px solid var(--c-border-hi); border-radius: 25px; background: #fff; }
.module-mobile-preview figcaption { font-size: .8125rem; color: var(--c-text-dim); margin-top: 15px; line-height: 1.6; text-align: center; }
.module-check-list { list-style: none; padding: 0; margin: 22px 0; }
.module-check-list li { position: relative; padding-left: 26px; margin: 14px 0; line-height: 1.7; font-size: 1rem; }
.module-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; }
.module-guide-heading { display: flex; justify-content: space-between; gap: 50px; align-items: flex-end; padding-bottom: 30px; border-bottom: 1px solid var(--c-border-hi); }
.module-guide-heading h2 { font: 600 clamp(1.8rem,3vw,2.5rem)/1.2 var(--font-head); margin: 8px 0 0; letter-spacing: -.02em; }
.module-guide-heading > p { max-width: 25rem; color: var(--c-text-dim); font-size: .9375rem; margin: 0; }
.module-guide-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 60px; padding-top: 40px; }
.module-toc { align-self: start; position: sticky; top: 112px; display: grid; gap: 4px; border-left: 2px solid var(--c-border-hi); padding-left: 18px; }
.module-toc > span { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 12px; }
.module-toc a { display: block; padding: 9px 0; font-size: .875rem; line-height: 1.5; color: var(--c-text-dim); }
.module-toc a:hover { color: var(--c-accent); }
.guide-section { margin-bottom: 52px; padding-bottom: 42px; border-bottom: 1px solid var(--c-border); scroll-margin-top: 20px; }
.guide-role { font-size: .8125rem; letter-spacing: .1em; color: var(--c-accent); font-weight: 600; margin-bottom: 9px; }
.guide-content h3 { font: 600 1.65rem/1.35 var(--font-head); letter-spacing: -.02em; margin-bottom: 22px; }
.guide-content h4 { font: 600 1.15rem/1.4 var(--font-head); margin: 28px 0 12px; }
.guide-content p, .guide-content li { font-size: 1rem; color: var(--c-text-dim); }
.guide-content p { margin: 0 0 18px; }
.guide-content p.guide-role { font-size: .8125rem; color: var(--c-accent); margin-bottom: 9px; }
.guide-content strong { color: var(--c-text); font-weight: 600; }
.guide-content ul, .guide-content ol { padding-left: 22px; margin: 0 0 22px; }
.guide-content li { padding-left: 5px; margin: 13px 0; line-height: 1.75; }
.guide-steps li::marker { color: var(--c-accent); font-weight: 700; }
.guide-content .module-check-list { padding-left: 0; }
.guide-content .module-check-list li { padding-left: 26px; }
.guide-note { border-left: 3px solid var(--c-accent); padding: 18px 22px; margin: 25px 0; background: var(--accent-bg); border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.75; color: var(--c-text-dim); }
.guide-content code { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px; padding: 2px 5px; font-size: .875rem; overflow-wrap: anywhere; color: var(--c-text); }
.guide-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--c-border-hi); border-radius: 12px; }
.guide-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.65; }
.guide-table-wrap caption { text-align: left; padding: 15px 18px; font-weight: 600; color: var(--c-text); background: var(--c-surface); }
.guide-table-wrap th, .guide-table-wrap td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-border); }
.guide-table-wrap th { font-weight: 600; width: 36%; }
.guide-table-wrap thead { background: var(--accent-bg); }
.guide-table-wrap td { color: var(--c-text-dim); }
.module-faq details { padding: 0 24px; border-bottom: 1px solid var(--c-border-hi); }
.module-faq summary { cursor: pointer; font: 500 1.12rem/1.5 var(--font-head); padding: 24px 0; }
.module-faq details[open] summary { color: var(--c-accent); }
.module-faq details > div { max-width: 58rem; padding-bottom: 24px; color: var(--c-text-dim); font-size: 1rem; }
.module-support { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.8fr); gap: 55px; padding: 45px; border-radius: 24px; background: var(--glass-bg-2); border: 1px solid var(--c-border-hi); }
.module-support p { color: var(--c-text-dim); }
.module-support-actions { display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.module-support-actions p { font-size: .875rem; }
.module-document-date { border-top: 1px solid var(--c-border); padding-top: 24px; font-size: .875rem; color: var(--c-text-dim); margin-bottom: 70px; }
.module-document-date a { margin-left: 15px; text-decoration: underline; }
@media (max-width: 1100px) {
  .module-hero { gap: 28px; }
  .module-hero h1 { font-size: 3rem; }
  .module-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-guide-layout { gap: 30px; grid-template-columns: 215px minmax(0,1fr); }
  .module-mobile-story { padding: 35px; gap: 35px; grid-template-columns: 1fr 280px; }
}
@media (max-width: 780px) {
  .module-page .module-section { margin-block: 60px; }
  .module-hero { grid-template-columns: 1fr; padding-block: 15px 35px; }
  .module-hero h1 { font-size: clamp(2.4rem,7vw,3.3rem); }
  .module-hero-preview { max-width: 560px; width: 100%; margin: 0 auto; }
  .module-hero-preview > a { height: 470px; }
  .module-value-strip { grid-template-columns: 1fr; }
  .module-value-strip > div { padding: 20px 12px; }
  .module-value-strip > div + div { border-left: 0; border-top: 1px solid var(--c-border); }
  .module-guide-layout { display: block; padding-top: 25px; }
  .module-toc { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 20px; margin-bottom: 40px; }
  .module-toc > span { grid-column: 1/-1; }
  .module-guide-heading { display: block; }
  .module-guide-heading > p { margin-top: 20px; }
  .module-mobile-story, .module-support { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .module-mobile-preview { width: 240px; }
  .module-support { gap: 10px; }
}
@media (max-width: 480px) {
  .module-feature-grid { grid-template-columns: 1fr; }
  .module-feature-grid .card { padding: 24px; }
  .module-eyebrow { letter-spacing: .04em; font-size: .8125rem; }
  .module-eyebrow img { width: 30px; height: 30px; }
  .module-hero-preview > a { height: 365px; }
  .module-hero .hero-cta-row { align-items: stretch; flex-direction: column; }
  .module-preview-label { font-size: .75rem; }
  .module-toc { grid-template-columns: 1fr; }
  .guide-content h3 { font-size: 1.45rem; }
  .guide-table-wrap th, .guide-table-wrap td { padding: 12px; }
  .module-faq details { padding: 0 8px; }
  .module-support, .module-mobile-story { padding: 24px 20px; }
  .module-document-date a { display: block; margin: 12px 0 0; }
}
@media print {
  .module-hero, .module-guide-layout, .module-mobile-story, .module-support { display: block; }
  .module-hero-preview, .module-mobile-preview, .hero-cta-row, .module-support-actions { display: none; }
  .module-page * { color: #111 !important; box-shadow: none !important; background: transparent !important; }
  .guide-section, .module-page .module-section { margin: 20px 0; }
  .guide-content h3, .guide-content h4 { break-after: avoid; }
}