/* css/guide.css — guide pédagogique (onglet Myopie / Presbytie). Ajout Grok 2026-10-25 */
.guide-hero .guide-kicker{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:50px;background:rgba(255,255,255,.14);color:#fff;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.guide-section{padding-top:28px}
.guide-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;max-width:1140px}
.guide-aside{position:sticky;top:calc(var(--sticky-h,80px) + 16px);background:#f7fafd;border:1px solid #dde4ee;border-radius:14px;padding:18px}
.guide-aside__title{margin:0 0 10px;font-weight:700;color:#003366;font-size:.95rem}
.guide-steps{list-style:none;margin:0;padding:0}
.guide-steps li{margin:0 0 4px}
.guide-steps a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;color:#1e293b;text-decoration:none;font-size:.92rem;line-height:1.35}
.guide-steps a:hover{background:#eaf4fb;color:#007ACC}
.guide-steps__n{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid #007ACC;color:#007ACC;font-weight:700;font-size:.8rem}
.guide-steps li.is-current a{background:#003366;color:#fff}
.guide-steps li.is-current .guide-steps__n{background:#007ACC;border-color:#007ACC;color:#fff}
.guide-article{max-width:820px;min-width:0}
.guide-article h2{font-size:1.45rem;color:#003366;margin:40px 0 14px;padding-bottom:12px;border-bottom:2px solid #dde4ee}
.guide-article p,.guide-article li{line-height:1.75}
.guide-article ul{padding-inline-start:22px}
.guide-article a{color:#007ACC}
.guide-lead{font-size:1.15rem;line-height:1.8;color:#1e293b;margin:0 0 24px}
.guide-visual{margin:8px 0 28px;padding:18px;background:#fff;border:1px solid #dde4ee;border-radius:14px}
.guide-visual__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.guide-visual svg,.guide-visual img{width:100%;height:auto;display:block;border-radius:10px}
.guide-visual figcaption{margin-top:8px;font-size:.88rem;color:#475569;text-align:center;line-height:1.4}
.guide-visual__legend{margin:12px 0 0;font-size:.82rem;color:#64748b;text-align:center}
.guide-box{border-radius:14px;padding:18px 22px;margin:24px 0}
.guide-box__title{margin:0 0 8px;font-weight:700;display:flex;gap:8px;align-items:center}
.guide-box__title span{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-size:.8rem;color:#fff}
.guide-box ul{margin:0;padding-inline-start:20px}
.guide-box li{margin:4px 0}
.guide-box--key{background:#eaf4fb;border-inline-start:5px solid #007ACC}
.guide-box--key .guide-box__title{color:#003366}.guide-box--key .guide-box__title span{background:#007ACC}
.guide-box--tip{background:#eef8f1;border-inline-start:5px solid #2e9d5b}
.guide-box--tip .guide-box__title{color:#1f6b3e}.guide-box--tip .guide-box__title span{background:#2e9d5b;font-style:italic;font-family:Georgia,serif}
.guide-box--tip p{margin:0}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.guide-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border:1px solid #dde4ee;border-radius:12px;background:#fff;text-decoration:none!important;color:#003366!important;font-weight:600;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.guide-card:hover{border-color:#007ACC;box-shadow:0 6px 18px rgba(0,51,102,.08)}
.guide-card__go{color:#007ACC;font-size:1.2rem}
[dir="rtl"] .guide-card__go,[dir="rtl"] .guide-next__t{unicode-bidi:plaintext}
.guide-next{display:block;margin:34px 0 0;padding:18px 22px;border-radius:14px;background:#003366;color:#fff!important;text-decoration:none!important}
.guide-next__lbl{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.guide-next__t{display:block;font-size:1.1rem;font-weight:700;margin-top:2px}
.guide-disclaimer{margin:26px 0 0;font-size:.85rem;color:#64748b}
@media (max-width:900px){
  .guide-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .guide-aside{min-width:0;max-width:100%}
  .guide-aside{position:static}
  .guide-steps{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .guide-steps li{flex:0 0 auto;margin:0}
  .guide-steps a{white-space:nowrap;border:1px solid #dde4ee;background:#fff}
}
@media (max-width:560px){ .guide-visual__row{grid-template-columns:1fr} .guide-lead{font-size:1.05rem} }
.guide-page .byline-text{flex-wrap:wrap}.guide-page .byline-date{white-space:normal}