/* LASTLINE — Gabarit des guides (/guides//) Référence : guides/plan-evacuation-incendie/ (page modèle validée). S'appuie sur les tokens d'accueil.css. Lecture longue, mobile d'abord. */ /* ─── Thème lecture : fond clair (guides uniquement) ─────────────────────── Décision produit 2026-09-13 : un guide de ~2000 mots en gris clair sur fond quasi noir fatigue à la lecture. La nav et le pied de page RESTENT sombres (identité de marque, cf. accueil.css) : ce bloc ne redéfinit les tokens que dans l'arbre .guide-top / .guide, jamais sur :root — la portée d'une custom property CSS couvre l'élément et ses descendants, jamais ses frères (nav, footer), qui gardent donc les valeurs sombres d'origine. reste sombre lui aussi (inchangé) : nav et footer se détachent dessus, la zone de lecture forme un "papier" clair entre les deux. */ .guide-top, .guide { --bg0: #F7F5EF; --bg1: #FFFFFF; --bg2: #EFEBDD; --bg3: #E7E2D0; --line: #E2DCC9; --line-strong: #D6CFB8; --text0: #1C1B16; --text1: #38362B; --text2: #6C6851; --text3: #928C71; --phosphor: #3E7A34; --phosphor-dim: #2C5626; --amber: #8A5A12; --critical: #A6362B; --glow: rgba(62,122,52,0.14); background: var(--bg0); color: var(--text1); } .nav-bg { background: #08090B; } /* nav pleinement opaque au-dessus du fond clair */ /* Boutons et case cochée : on garde le vert vif d'origine (texte noir dessus) plutôt que le vert plus sombre ci-dessus, choisi lui pour rester lisible en texte courant sur fond clair — ce sont deux usages différents. */ .guide .btn, .guide-top .btn { background: #7CB05A; color: #08090B; } .guide .checklist input:checked { background: #7CB05A; border-color: #7CB05A; } /* Le schéma reste un "écran" sombre, comme les aperçus de téléphone du reste du site : ses propres couleurs de traits (définies dans le SVG) deviendraient invisibles sur un fond clair. */ .guide .figure svg { background: #101216; border-color: #262b33; } .guide-top { max-width: 760px; margin: 0 auto; padding: 118px 24px 0; } .crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text2); display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--text3); } .crumbs a { color: var(--text2); } .crumbs a:hover { color: var(--phosphor); } .guide-head { margin-top: 26px; } .guide-head .kicker { color: var(--phosphor); } .guide-head h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 14px 0 16px; text-wrap: balance; } .guide-lede { color: var(--text1); font-size: 18px; line-height: 1.6; margin: 0; } .guide-meta { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text2); display: flex; flex-wrap: wrap; gap: 6px 16px; } /* Réponse directe : le paragraphe que les moteurs de réponse reprennent */ .answer { margin: 30px 0 0; padding: 20px 22px; border-radius: 14px; background: var(--bg1); border: 1px solid rgba(124,176,90,0.28); } .answer .kicker { color: var(--phosphor); font-size: 10.5px; } .answer p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--text0); } .toc { margin: 26px 0 0; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 14px; } .toc b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); font-weight: 500; } .toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; } .toc a { color: var(--text1); font-size: 15px; } .toc a:hover { color: var(--phosphor); } /* Corps de l'article */ .guide { max-width: 760px; margin: 0 auto; padding: 8px 24px 40px; color: var(--text1); font-size: 17px; line-height: 1.72; } .guide h2 { color: var(--text0); font-size: clamp(23px, 3.2vw, 29px); line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; margin: 60px 0 14px; scroll-margin-top: 90px; text-wrap: balance; } .guide h3 { color: var(--text0); font-size: 19px; line-height: 1.35; font-weight: 600; margin: 30px 0 8px; } .guide p { margin: 0 0 16px; } .guide strong { color: var(--text0); font-weight: 600; } .guide a { color: var(--phosphor); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .guide a:hover { color: var(--text0); } .guide ul, .guide ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; } .guide li::marker { color: var(--phosphor); } /* Étapes numérotées (vraie séquence) */ .steps { list-style: none; padding: 0 !important; counter-reset: s; gap: 0 !important; } .steps > li { counter-increment: s; position: relative; padding: 4px 0 22px 52px; border-left: 1px solid var(--line-strong); margin-left: 17px; padding-left: 36px; } .steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; } .steps > li::before { content: counter(s); position: absolute; left: -18px; top: 0; width: 35px; height: 35px; border-radius: 99px; background: var(--bg2); border: 1px solid rgba(124,176,90,0.4); color: var(--phosphor); font-family: var(--mono); font-size: 14px; display: grid; place-items: center; } .steps > li h3 { margin-top: 2px; } /* Tableau de décision */ .table-wrap { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--line-strong); border-radius: 14px; } .guide table { border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.55; min-width: 520px; } .guide th, .guide td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-strong); vertical-align: top; } .guide th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); font-weight: 500; background: var(--bg1); } .guide tr:last-child td { border-bottom: 0; } .guide td:first-child { color: var(--text0); font-weight: 500; width: 38%; } /* Encadrés */ .note { margin: 8px 0 22px; padding: 16px 18px; border-radius: 12px; background: var(--bg1); border-left: 3px solid var(--amber); font-size: 16px; } .note b { color: var(--text0); } .note.stop { border-left-color: var(--critical); } /* Schéma */ .figure { margin: 10px 0 26px; } .figure svg { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--bg1); border: 1px solid var(--line-strong); } .figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text2); line-height: 1.5; } /* Checklist imprimable */ .checklist { list-style: none; padding: 0 !important; gap: 0 !important; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; } .checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border-bottom: 1px solid var(--line-strong); font-size: 16px; } .checklist li:last-child { border-bottom: 0; } .checklist input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 3px 0 0; border: 1.5px solid var(--text2); border-radius: 5px; cursor: pointer; display: grid; place-items: center; } .checklist input:checked { background: var(--phosphor); border-color: var(--phosphor); } .checklist input:checked::after { content: "✓"; color: #08090B; font-size: 13px; font-weight: 700; } .checklist input:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; } .print-btn { margin: 14px 0 0; background: transparent; color: var(--text1); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .print-btn:hover, .print-btn:focus-visible { border-color: var(--phosphor); color: var(--phosphor); } /* FAQ */ .faq { display: grid; gap: 10px; margin-top: 8px; } .faq details { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg1); } .faq summary { cursor: pointer; list-style: none; padding: 15px 44px 15px 18px; color: var(--text0); font-weight: 500; position: relative; line-height: 1.45; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 18px; top: 13px; color: var(--phosphor); font-family: var(--mono); font-size: 18px; } .faq details[open] summary::after { content: "–"; } .faq summary:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; border-radius: 12px; } .faq details > div { padding: 0 18px 4px; } /* Sources */ .sources { font-size: 14.5px; line-height: 1.6; } .sources li { color: var(--text2); } .sources a { word-break: break-word; } /* Encadré LASTLINE (CTA) */ .ll-box { margin: 56px 0 10px; padding: 26px 24px; border-radius: 18px; background: var(--bg1); border: 1px solid rgba(124,176,90,0.3); } .ll-box .kicker { color: var(--phosphor); } .ll-box h2 { margin: 10px 0 12px !important; font-size: 24px !important; } .ll-box ul { margin-bottom: 14px; } .ll-box .ll-honest { font-size: 14.5px; color: var(--text2); } .ll-box .btn { color: #08090B; text-decoration: none; margin-top: 6px; } .next { margin-top: 36px; } .next ul { list-style: none; padding: 0; gap: 10px; } .next a { display: block; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text0); text-decoration: none; } .next a:hover { border-color: var(--phosphor); color: var(--phosphor); } .next small { display: block; color: var(--text2); font-size: 13.5px; margin-top: 2px; } @media (max-width: 640px) { .guide-top { padding-top: 100px; padding-left: 20px; padding-right: 20px; } .guide { font-size: 16.5px; padding-left: 20px; padding-right: 20px; } .guide-lede { font-size: 17px; } .steps > li { padding-left: 30px; } } /* Impression : seul l'essentiel, lisible sur papier blanc */ @media print { .nav, footer, .ll-box, .next, .toc, .print-btn, .crumbs { display: none !important; } body { background: #fff !important; color: #000 !important; } .guide, .guide-top { max-width: none; padding: 0 !important; color: #000 !important; } .guide h1, .guide h2, .guide h3, .guide strong, .guide-head h1, .answer p, .guide td:first-child { color: #000 !important; } .answer, .note, .faq details, .table-wrap, .checklist { background: #fff !important; border-color: #999 !important; } .guide a { color: #000 !important; } .figure svg { border-color: #999; } .checklist input { border-color: #000; } details { display: block; } details > * { display: block !important; } }