/* Same base block every page of the site defines in its own <style> (site_chrome.css, header and footer rely on these tokens and on the reset). */
:root {
  --blue-light: #2563eb; --orange: #fd7902; --orange-dark: #e97207; --ink: #084890;
  --fondboxbleu: #002753; --fondboutonbleu: #074283;
  --grey: #64748b; --grey-light: #f1f5f9; --white: #ffffff;
  --radius: 16px; --shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Inter', -apple-system, sans-serif; color: var(--ink); background: var(--grey-light); min-height: 100vh; display: flex; flex-direction: column; }
a { text-decoration: none; color: inherit; }

/* Guides section (2026-10-20): article layout shared by every page of /guides/. Colours follow the site tokens. */
:root { --g-ink: #084890; --g-orange: #fd7902; --g-orange-dark: #e97207; --g-grey: #64748b; --g-line: #e2e8f0; --g-bg: #f1f5f9; --g-white: #ffffff; --g-navy: #002753; }
.guide-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; flex: 1 0 auto; }
.guide-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 16px; color: #94a3b8; }
.guide-crumbs a { color: var(--g-ink); }
.guide-crumbs .sep { color: #cbd5e1; }
.guide-card { background: var(--g-white); border-radius: 16px; box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25); padding: 34px 32px 38px; color: #1e293b; line-height: 1.7; font-size: 17px; }
.guide-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g-orange-dark); margin-bottom: 10px; }
.guide-card h1 { font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--g-ink); margin-bottom: 14px; }
.guide-meta { font-size: 13px; color: var(--g-grey); margin-bottom: 22px; }
.guide-answer { background: #fff7ed; border-left: 5px solid var(--g-orange); border-radius: 10px; padding: 16px 20px; margin-bottom: 28px; font-size: 17px; color: #1e293b; }
.guide-answer strong { color: var(--g-ink); }
.guide-card h2 { font-size: 22px; font-weight: 800; color: var(--g-ink); margin: 32px 0 10px; line-height: 1.3; }
/* Owner's rule (2026-10-20): body text of the guides is fully justified, not left aligned. Hyphenation avoids wide gaps (html lang is en). */
.guide-card p, .guide-card li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.guide-card p { margin-bottom: 14px; }
.guide-card ul { margin: 0 0 14px 0; padding-left: 22px; }
.guide-card li { margin-bottom: 6px; }
.guide-card a { color: var(--g-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(8, 72, 144, .35); text-underline-offset: 3px; }
.guide-card a:hover { text-decoration-color: var(--g-orange); }
.guide-faq details { border: 1px solid var(--g-line); border-radius: 12px; padding: 0; margin-bottom: 10px; background: #fff; }
.guide-faq summary { cursor: pointer; font-weight: 700; color: var(--g-ink); padding: 14px 18px; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; float: right; font-size: 20px; line-height: 1; color: var(--g-orange-dark); }
.guide-faq details[open] summary::after { content: '\2212'; }
.guide-faq details p { padding: 0 18px 16px; margin: 0; }
.guide-cta { margin-top: 34px; background: var(--g-navy); color: #fff; border-radius: 14px; padding: 24px 26px; text-align: center; }
.guide-cta p { color: #fff; margin-bottom: 14px; font-size: 18px; font-weight: 600; text-align: center; }
.guide-cta a.btn { display: inline-block; background: linear-gradient(135deg, var(--g-orange), var(--g-orange-dark)); color: #fff; text-decoration: none; font-weight: 700; padding: 13px 26px; border-radius: 12px; }
.guide-cta a.btn:hover { filter: brightness(1.05); }
@media (max-width: 600px) { .guide-card { padding: 24px 18px 28px; font-size: 16px; } .guide-card h1 { font-size: 26px; } .guide-card h2 { font-size: 20px; } }

/* Guides home page: one card per article. Short blurbs stay left aligned (justified two-line text leaves wide gaps). */
.guide-list { display: grid; gap: 14px; margin-top: 26px; }
.guide-item { display: block; border: 1px solid var(--g-line); border-radius: 14px; padding: 18px 20px; text-decoration: none !important; color: inherit; transition: box-shadow .15s, border-color .15s; }
.guide-item:hover { border-color: var(--g-orange); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .3); }
.guide-item-title { display: block; font-size: 19px; font-weight: 800; color: var(--g-ink); margin-bottom: 4px; }
.guide-item-text { display: block; font-size: 16px; color: #475569; margin-bottom: 8px; text-align: left; }
.guide-item-more { display: block; font-size: 14px; font-weight: 700; color: var(--g-orange-dark); }
.guide-item-badge { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 3px 9px; }