/* =====================================================================
   Centre d'aide / Help Center — My Official Links (session 14)
   Même direction artistique que l'accueil : sombre, dégradé indigo →
   violet → cyan. Lecture confortable : colonne de texte ~720 px.
   ===================================================================== */
:root {
    --h-bg: #05070F; --h-bg2: #0B1020; --h-card: #0F1528; --h-line: rgba(148,163,184,.16);
    --h-text: #F8FAFC; --h-body: #CBD5E1; --h-muted: #94A3B8;
    --h-grad: linear-gradient(120deg, #6366F1 0%, #8B5CF6 48%, #22D3EE 100%);
    --h-cyan: #22D3EE;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 50% -200px, rgba(99,102,241,.22), transparent 70%), var(--h-bg); color: var(--h-text); font: 400 16px/1.65 'Inter', system-ui, sans-serif; }
h1, h2, h3 { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; line-height: 1.2; }
a { color: #a5b4fc; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--h-cyan); outline-offset: 3px; border-radius: 6px; }
.h-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* En-tête */
.h-top { position: sticky; top: 0; z-index: 20; background: rgba(5,7,15,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--h-line); }
.h-top-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.h-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 17px 'Sora', sans-serif; }
.h-logo .logo-mark { height: 23px; width: auto; }
.h-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.h-nav > a { color: var(--h-body); text-decoration: none; font-weight: 500; font-size: 14px; }
.h-nav > a:hover { color: #fff; }
.h-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 12px; background: var(--h-grad); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(99,102,241,.8); }
.h-btn:hover { filter: brightness(1.08); }
.h-btn-ghost { background: transparent; border: 1px solid rgba(165,180,252,.45); box-shadow: none; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font: 600 12px/1 'Inter', sans-serif; }
.lang-switch a, .lang-switch span { padding: 6px 9px; border-radius: 999px; color: var(--h-muted); text-decoration: none; }
.lang-switch span[aria-current] { background: rgba(124,92,255,.35); color: #fff; }

/* Hub */
.h-hero { text-align: center; padding: 64px 0 28px; }
.h-hero h1 { font-size: clamp(32px, 5vw, 52px); margin: 6px 0 12px; }
.h-hero p { color: var(--h-body); max-width: 640px; margin: 0 auto; }
.h-kicker { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--h-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.h-search { display: flex; gap: 10px; max-width: 640px; margin: 28px auto 0; padding: 8px; border-radius: 18px; background: var(--h-card); border: 1px solid rgba(99,102,241,.4); box-shadow: 0 20px 60px -30px rgba(99,102,241,.9); }
.h-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: 500 16px 'Inter', sans-serif; padding: 10px 12px; outline: none; }
.h-search input::placeholder { color: #64748b; }
.h-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 36px 0 8px; }
.h-tool-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(99,102,241,.16), rgba(34,211,238,.06)); border: 1px solid rgba(99,102,241,.35); text-decoration: none; color: #fff; }
.h-tool-card span { grid-row: span 2; font-size: 28px; line-height: 44px; text-align: center; }
.h-tool-card strong { font-family: 'Sora', sans-serif; }
.h-tool-card em { font-style: normal; color: var(--h-muted); font-size: 14px; }
.h-tool-card:hover { border-color: rgba(34,211,238,.6); }
.h-cat { padding: 34px 0 6px; scroll-margin-top: 90px; }
.h-cat h2 { font-size: 24px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.h-cat-desc { color: var(--h-muted); margin: 0 0 16px; }
.h-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.h-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line); text-decoration: none; color: #fff; transition: border-color .2s, transform .2s; }
.h-card strong { font-family: 'Sora', sans-serif; font-size: 16.5px; line-height: 1.35; }
.h-card span { color: var(--h-muted); font-size: 14px; line-height: 1.5; }
.h-card:hover { border-color: rgba(139,92,246,.6); transform: translateY(-2px); }
.h-results { padding: 28px 0 0; }
.h-results h2 { font-size: 20px; }
.h-allfaq { max-width: 820px; margin: 40px auto 20px; }

/* Article */
.h-article { max-width: 800px; padding-top: 24px; padding-bottom: 40px; }
.h-crumbs { font-size: 13.5px; color: var(--h-muted); margin-bottom: 18px; }
.h-crumbs a { color: var(--h-muted); text-decoration: none; }
.h-crumbs a:hover { color: #fff; }
.h-art-head h1 { font-size: clamp(28px, 4.4vw, 42px); margin: 8px 0 8px; }
.h-meta { color: var(--h-muted); font-size: 13.5px; margin: 0 0 18px; }
.h-intro { font-size: 18px; color: #e2e8f0; }
.h-intro p { margin: 0 0 12px; }
.h-tool { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; margin: 22px 0; border-radius: 16px; background: linear-gradient(120deg, rgba(99,102,241,.18), rgba(34,211,238,.08)); border: 1px solid rgba(99,102,241,.4); }
.h-tool div { display: flex; flex-direction: column; gap: 3px; }
.h-tool span { color: var(--h-body); font-size: 14.5px; }
.h-toc { padding: 16px 20px; border-radius: 14px; background: var(--h-bg2); border: 1px solid var(--h-line); margin: 8px 0 10px; }
.h-toc ol { margin: 8px 0 0; padding-left: 20px; }
.h-toc li { margin: 3px 0; }
.h-toc a { color: var(--h-body); text-decoration: none; }
.h-toc a:hover { color: #fff; }
.h-sec { padding-top: 10px; scroll-margin-top: 90px; }
.h-sec h2 { font-size: 24px; margin: 26px 0 10px; }
.h-sec h3 { font-size: 18px; margin: 18px 0 6px; }
.h-sec p, .h-sec li { color: var(--h-body); }
.h-sec strong { color: #fff; }
.h-sec ol, .h-sec ul { padding-left: 22px; }
.h-sec li { margin: 6px 0; }
.h-faq details { border: 1px solid var(--h-line); border-radius: 14px; background: var(--h-card); margin: 10px 0; padding: 0 18px; }
.h-faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; color: #fff; list-style: none; position: relative; padding-right: 28px; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 22px; color: var(--h-muted); }
.h-faq details[open] summary::after { content: '−'; }
.h-faq details p { margin: 0 0 16px; color: var(--h-body); }
.h-cta { margin: 40px 0 10px; }
.h-cta-card { padding: 28px; border-radius: 22px; background: radial-gradient(500px 220px at 0% 0%, rgba(139,92,246,.35), transparent 70%), radial-gradient(500px 240px at 100% 100%, rgba(34,211,238,.18), transparent 70%), var(--h-card); border: 1px solid rgba(139,92,246,.4); }
.h-cta-card h2 { margin: 0 0 8px; font-size: 24px; }
.h-cta-card p { color: var(--h-body); margin: 0 0 18px; }
.h-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.h-related { margin: 34px 0 0; }
.h-related h2 { font-size: 22px; }

/* Pied de page */
.h-foot { border-top: 1px solid var(--h-line); margin-top: 50px; padding: 26px 0 40px; color: var(--h-muted); font-size: 13.5px; }
.h-foot p { margin: 0 0 8px; max-width: 820px; }
.h-foot a { color: var(--h-body); }

@media (max-width: 640px) {
    .h-nav > a:not(.h-btn) { display: none; }
    .h-hero { padding-top: 40px; }
    .h-tool { flex-direction: column; align-items: stretch; }
    .h-grid { grid-template-columns: 1fr; }
    .h-search { flex-direction: column; }
    .h-intro { font-size: 17px; }
}
/* Petits écrans : logo + FR/EN sur la même ligne que le bouton quand c'est possible. */
@media (max-width: 640px) { .h-top-in { gap: 10px; } .h-nav { gap: 10px; } .h-btn { padding: 10px 14px; font-size: 13.5px; } }

/* =====================================================================
   THÈME CLAIR (optionnel) + bouton de thème — session 14
   Le sombre reste le thème par défaut. Le clair n'est actif que si
   <html data-theme="light"> (choix enregistré : localStorage mol_theme).
   ===================================================================== */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #CBD5E1; cursor: pointer; flex: 0 0 auto; transition: color .2s, background .2s, border-color .2s; }
.theme-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }
.theme-toggle svg { display: block; }
.theme-toggle .tt-moon { display: none; }

html[data-theme="light"] {
    --h-bg: #F6F7FB; --h-bg2: #EEF1F8; --h-card: #FFFFFF; --h-line: rgba(15,23,42,.10);
    --h-text: #0B1020; --h-body: #334155; --h-muted: #5B6478;
    --h-grad: linear-gradient(120deg, #4F46E5 0%, #7C3AED 50%, #0E7490 100%);
    --h-cyan: #0E7490;
    color-scheme: light;
}
html[data-theme="light"] body { background: radial-gradient(1200px 600px at 50% -200px, rgba(79,70,229,.10), transparent 70%) no-repeat, var(--h-bg); color: var(--h-text); }
html[data-theme="light"] a { color: #4F46E5; }
html[data-theme="light"] a:hover { color: #3730A3; }
html[data-theme="light"] :focus-visible { outline-color: #4F46E5; }

/* Bouton de thème + FR/EN */
html[data-theme="light"] .theme-toggle { background: #FFFFFF; border-color: rgba(15,23,42,.14); color: #334155; }
html[data-theme="light"] .theme-toggle:hover { color: #0B1020; background: #EEF1F8; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }
html[data-theme="light"] .lang-switch { background: #FFFFFF; border-color: rgba(15,23,42,.14); }
html[data-theme="light"] .lang-switch a, html[data-theme="light"] .lang-switch span { color: #5B6478; }
html[data-theme="light"] .lang-switch a:hover { color: #0B1020; }
html[data-theme="light"] .lang-switch span[aria-current] { background: rgba(79,70,229,.14); color: #3730A3; }

/* En-tête */
html[data-theme="light"] .h-top { background: rgba(246,247,251,.86); border-bottom-color: rgba(15,23,42,.10); }
html[data-theme="light"] .h-logo { color: #0B1020; }
html[data-theme="light"] .h-nav > a { color: #334155; }
html[data-theme="light"] .h-nav > a:hover { color: #0B1020; }
html[data-theme="light"] .h-btn { color: #fff !important; box-shadow: 0 10px 26px -12px rgba(79,70,229,.55); }
html[data-theme="light"] .h-btn-ghost { background: #FFFFFF; color: #3730A3 !important; border: 1px solid rgba(79,70,229,.35); box-shadow: none; }
html[data-theme="light"] .h-btn-ghost:hover { background: #EEF1F8; filter: none; }

/* Hub */
html[data-theme="light"] .h-search { background: #FFFFFF; border-color: rgba(79,70,229,.28); box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }
html[data-theme="light"] .h-search input { color: #0B1020; }
html[data-theme="light"] .h-search input::placeholder { color: #6B7280; }
html[data-theme="light"] .h-tool-card { background: linear-gradient(160deg, rgba(79,70,229,.08), rgba(14,116,144,.05)), #FFFFFF; border-color: rgba(79,70,229,.22); color: #0B1020; box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }
html[data-theme="light"] .h-tool-card:hover { border-color: rgba(14,116,144,.5); }
html[data-theme="light"] .h-card { color: #0B1020; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
html[data-theme="light"] .h-card:hover { border-color: rgba(124,58,237,.45); box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }

/* Article */
html[data-theme="light"] .h-crumbs a { color: #5B6478; }
html[data-theme="light"] .h-crumbs a:hover { color: #0B1020; }
html[data-theme="light"] .h-intro { color: #1E293B; }
html[data-theme="light"] .h-tool { background: linear-gradient(120deg, rgba(79,70,229,.08), rgba(14,116,144,.05)), #FFFFFF; border-color: rgba(79,70,229,.25); box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }
html[data-theme="light"] .h-toc { background: #FFFFFF; }
html[data-theme="light"] .h-toc a { color: #334155; }
html[data-theme="light"] .h-toc a:hover { color: #4F46E5; }
html[data-theme="light"] .h-sec strong { color: #0B1020; }
html[data-theme="light"] .h-sec a { color: #4F46E5; }
html[data-theme="light"] .h-faq summary { color: #0B1020; }
html[data-theme="light"] .h-faq details[open] { border-color: rgba(79,70,229,.25); box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }
html[data-theme="light"] .h-cta-card { background: radial-gradient(500px 220px at 0% 0%, rgba(124,58,237,.10), transparent 70%), radial-gradient(500px 240px at 100% 100%, rgba(14,116,144,.08), transparent 70%), #FFFFFF; border-color: rgba(124,58,237,.25); box-shadow: 0 18px 50px -24px rgba(15,23,42,.25); }

/* Pied de page */
html[data-theme="light"] .h-foot a { color: #334155; }
html[data-theme="light"] .h-foot a:hover { color: #4F46E5; }
/* ===================== fin du thème clair ===================== */