/* ============ Centre d'aide Bizouk — styles partagés ============ */
.hlp-wrap { max-width: 1080px; margin: 0 auto; padding: 32px 16px 72px; color: var(--bzk-dm-text, #2a2a30); }
.hlp-wrap * { box-sizing: border-box; }

/* Fil d'ariane / retour */
.hlp-crumb { font-size: 13px; color: var(--bzk-dm-text-muted, #8a8a94); margin-bottom: 18px; }
.hlp-crumb a { color: #b8860b; text-decoration: none; font-weight: 600; }
.hlp-crumb a:hover { text-decoration: underline; }

/* En-tête de page */
.hlp-hero { text-align: center; padding: 8px 0 26px; }
.hlp-hero .hlp-eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#b8860b; background:var(--bzk-dm-surface-2, #fdf6e3); padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.hlp-hero h1 { font-size: 38px; font-weight: 900; letter-spacing: -1px; margin: 0 0 10px; line-height: 1.1; }
.hlp-hero p { font-size: 17px; color: var(--bzk-dm-text-muted, #6a6a74); max-width: 640px; margin: 0 auto; line-height: 1.55; }

/* Barre de recherche (ancre visuelle, filtre client-side) */
.hlp-search { max-width: 560px; margin: 22px auto 0; position: relative; }
.hlp-search input { width:100%; padding:14px 18px 14px 46px; font-size:15px; border:2px solid var(--bzk-dm-border, #eee6d0); border-radius:14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.hlp-search input:focus { border-color:#f0c040; box-shadow:0 0 0 4px rgba(240,192,64,.15); }
/* Icône ancrée à l'input : le dropdown de résultats étant en position:absolute
   (hors flux), la hauteur de .hlp-search vaut celle de l'input → top:50% OK. */
.hlp-search .hlp-search-ico { position:absolute; left:16px; top:26px; transform:translateY(-50%); color:#c3a24a; font-size:18px; pointer-events:none; }

/* Résultats de recherche (dropdown transverse) */
.hlp-results { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 8px); background:var(--bzk-dm-surface, #fff); border:1px solid var(--bzk-dm-border, #eee6d0); border-radius:14px; box-shadow:0 18px 44px rgba(40,30,0,.14); overflow:hidden; text-align:left; max-height:60vh; overflow-y:auto; }
.hlp-res-item { display:flex; align-items:center; gap:12px; padding:12px 16px; text-decoration:none; color:inherit; border-bottom:1px solid var(--bzk-dm-border, #f5f0e3); }
.hlp-res-item:last-child { border-bottom:none; }
.hlp-res-item:hover, .hlp-res-item.is-active { background:var(--bzk-dm-surface-2, #fdf6e3); text-decoration:none; color:inherit; }
.hlp-res-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.hlp-res-title { font-size:14.5px; font-weight:700; color:var(--bzk-dm-text, #2a2a30); }
.hlp-res-sub { font-size:12px; color:var(--bzk-dm-text-muted, #9a9aa2); margin-top:1px; }
.hlp-res-badge { flex-shrink:0; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding:3px 9px; border-radius:999px; }
.hlp-res-orga { background:var(--bzk-dm-surface-2, #eef4ff); color:#2f5cc0; }
.hlp-res-client { background:var(--bzk-dm-surface-2, #fdf6e3); color:#a07d16; }
.hlp-res-empty { padding:16px; font-size:13.5px; color:var(--bzk-dm-text-muted, #9a9aa2); }

/* Deux grandes portes d'entrée */
.hlp-doors { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:34px 0 12px; }
.hlp-door { display:block; text-decoration:none; color:inherit; border:2px solid var(--bzk-dm-border, #f0ead6); border-radius:20px; padding:30px 28px; background:var(--bzk-dm-surface, #fff); transition:transform .18s, box-shadow .18s, border-color .18s; }
.hlp-door:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(40,30,0,.10); border-color:#f0c040; text-decoration:none; color:inherit; }
.hlp-door .hlp-door-ico { font-size:34px; width:64px; height:64px; line-height:64px; text-align:center; border-radius:16px; background:var(--bzk-dm-surface-2, #fdf6e3); color:#b8860b; margin-bottom:16px; }
.hlp-door h2 { font-size:22px; font-weight:900; margin:0 0 8px; }
.hlp-door p { font-size:14.5px; color:var(--bzk-dm-text-muted, #6a6a74); margin:0 0 14px; line-height:1.5; }
.hlp-door .hlp-door-cta { font-weight:800; color:#b8860b; font-size:14px; }
.hlp-door .hlp-door-cta i { transition:transform .15s; }
.hlp-door:hover .hlp-door-cta i { transform:translateX(4px); }

/* Sections thématiques */
.hlp-section { margin-top: 44px; }
.hlp-section-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--bzk-dm-border, #f4eeda); }
.hlp-section-head .hlp-sec-ico { font-size:20px; width:42px; height:42px; line-height:42px; text-align:center; border-radius:12px; background:var(--bzk-dm-surface-2, #fdf6e3); color:#b8860b; flex-shrink:0; }
.hlp-section-head h2 { font-size:23px; font-weight:900; margin:0; letter-spacing:-.4px; }
.hlp-section-head .hlp-sec-sub { font-size:13.5px; color:var(--bzk-dm-text-muted, #8a8a94); margin:2px 0 0; }

/* Grille de cartes fonctionnalités */
.hlp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.hlp-card { border:1px solid var(--bzk-dm-border, #efe9da); border-radius:16px; padding:20px; background:var(--bzk-dm-surface, #fff); transition:box-shadow .15s, border-color .15s; }
.hlp-card:hover { box-shadow:0 8px 24px rgba(40,30,0,.07); border-color:#f0dca0; }
.hlp-card h3 { font-size:16px; font-weight:800; margin:0 0 8px; display:flex; align-items:center; gap:9px; }
.hlp-card h3 .la { color:#b8860b; font-size:18px; }
.hlp-card p { font-size:13.5px; color:var(--bzk-dm-text-2, #5f5f68); line-height:1.55; margin:0 0 12px; }
.hlp-card .hlp-links { display:flex; flex-wrap:wrap; gap:8px; }
.hlp-card .hlp-links a { font-size:12.5px; font-weight:700; text-decoration:none; color:#8a6d12; background:var(--bzk-dm-surface-2, #fdf6e3); padding:6px 11px; border-radius:9px; transition:background .12s, color .12s; }
.hlp-card .hlp-links a:hover { background:#f0c040; color:#3a2e00; }
.hlp-card .hlp-links a i { font-size:11px; opacity:.7; margin-right:3px; }

/* Tag "sur un évènement" pour signaler les pages contextuelles */
.hlp-ctx { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#a07d16; background:#fbf1cf; padding:2px 8px; border-radius:6px; margin-left:6px; vertical-align:middle; }

/* Encadré astuce */
.hlp-tip { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(135deg,#fdf6e3,#fbf0cf); border:1px solid #f0dca0; border-radius:16px; padding:18px 20px; margin-top:22px; }
.hlp-tip .la { font-size:24px; color:#b8860b; flex-shrink:0; margin-top:2px; }
.hlp-tip h4 { margin:0 0 4px; font-size:15px; font-weight:800; }
.hlp-tip p { margin:0; font-size:13.5px; color:var(--bzk-dm-text-2, #5f5f68); line-height:1.5; }

/* Sommaire ancré (organisateur) */
.hlp-toc { background:var(--bzk-dm-surface-2, #fbf9f2); border:1px solid var(--bzk-dm-border, #efe9da); border-radius:16px; padding:20px 22px; margin:26px 0 8px; }
.hlp-toc h4 { margin:0 0 12px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--bzk-dm-text-muted, #8a8a94); }
.hlp-toc ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px 18px; }
.hlp-toc a { text-decoration:none; color:var(--bzk-dm-text-2, #3a3a44); font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; padding:3px 0; }
.hlp-toc a:hover { color:#b8860b; }
.hlp-toc a .la { color:#c3a24a; font-size:15px; }

/* Bandeau contact bas de page */
.hlp-contact-band { text-align:center; margin-top:52px; padding:34px; background:#1e1e24; border-radius:20px; color:#fff; }
.hlp-contact-band h3 { font-size:24px; font-weight:900; margin:0 0 8px; }
.hlp-contact-band p { color:#b9b9c2; font-size:15px; margin:0 0 18px; }
.hlp-btn { display:inline-block; background:#f0c040; color:#1a1a20; font-weight:800; padding:13px 28px; border-radius:12px; text-decoration:none; border:none; cursor:pointer; font-size:15px; transition:transform .12s, box-shadow .12s; }
.hlp-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(240,192,64,.3); color:var(--bzk-dm-text, #1a1a20); text-decoration:none; }
.hlp-btn-ghost { background:transparent; color:#f0c040; border:2px solid #f0c040; margin-left:8px; }
.hlp-btn-ghost:hover { background:#f0c040; color:#1a1a20; }

/* Liens légaux pied */
.hlp-legal { text-align:center; margin-top:26px; font-size:13px; color:var(--bzk-dm-text-muted, #9a9aa2); }
.hlp-legal a { color:var(--bzk-dm-text-muted, #8a8a94); text-decoration:none; }
.hlp-legal a:hover { color:#b8860b; }

/* Décalage d'ancre : quand on saute vers une section (sommaire / lien profond),
   on laisse respirer le titre au lieu de le coller au bord haut. */
.hlp-section, [id]:target { scroll-margin-top: 24px; }

/* Accessibilité clavier : focus visibles et cohérents sur tout l'interactif. */
.hlp-door:focus-visible,
.hlp-card .hlp-links a:focus-visible,
.hlp-toc a:focus-visible,
.hlp-res-item:focus-visible,
.hlp-btn:focus-visible,
.hlp-search input:focus-visible {
    outline: 3px solid rgba(240,192,64,.55);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Bouton « haut de page » (pages longues). Masqué par défaut, révélé en JS. */
.hlp-totop {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: #1e1e24; color: #f0c040; font-size: 20px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.hlp-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hlp-totop:hover { background: #000; }

@media (max-width: 720px) {
    .hlp-wrap { padding: 24px 14px 64px; }
    .hlp-doors { grid-template-columns:1fr; }
    .hlp-hero h1 { font-size:29px; }
    .hlp-hero p { font-size:15.5px; }
    .hlp-grid { grid-template-columns:1fr; }
    .hlp-section-head h2 { font-size:20px; }
    /* Cibles tactiles plus généreuses */
    .hlp-card .hlp-links a { padding:9px 13px; font-size:13px; }
    .hlp-toc a { padding:7px 0; }
    /* Bandeau contact : les boutons s'empilent proprement */
    .hlp-contact-band { padding:26px 20px; }
    .hlp-contact-band .hlp-btn { display:block; width:100%; max-width:320px; margin:0 auto 10px; }
    .hlp-contact-band .hlp-btn-ghost { margin-left:auto; }
    .hlp-totop { right:14px; bottom:14px; }
}

/* Respect des préférences de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
    .hlp-door, .hlp-card, .hlp-btn, .hlp-door .hlp-door-cta i, .hlp-totop { transition:none !important; }
    .hlp-door:hover, .hlp-btn:hover { transform:none !important; }
}

/* Mode sombre : les seuls éléments à palette propre (dégradé crème, badges crème) — tout le reste passe par les jetons --bzk-dm-*. */
html.dark-mode .hlp-tip { background:var(--bzk-dm-surface); border-color:var(--bzk-dm-border); }
html.dark-mode .hlp-ctx { background:var(--bzk-dm-surface-3); color:#e3b73f; }
html.dark-mode .hlp-search input { background:var(--bzk-dm-surface); color:var(--bzk-dm-text); }
html.dark-mode .hlp-contact-band { background:var(--bzk-dm-surface); border:1px solid var(--bzk-dm-border); }

/* ---------- Articles pas à pas (/help/article/…) — jetons --bzk-dm-* : clair inchangé, sombre automatique ---------- */
.hlp-article-wrap { max-width:780px; }
.hlp-article { background:var(--bzk-dm-surface, #fff); border:1px solid var(--bzk-dm-border, #efe9da); border-radius:18px; padding:30px 32px; }
.hlp-article-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.hlp-article-ico { flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:26px; color:#b8860b; background:var(--bzk-dm-surface-2, #fdf6e3); }
.hlp-article h1 { font-size:28px; line-height:1.2; font-weight:900; margin:0 0 6px; color:var(--bzk-dm-text, #1a1a20); }
.hlp-article-lead { font-size:16.5px; line-height:1.55; color:var(--bzk-dm-text-muted, #6a6a74); margin:0; }
.hlp-steps { counter-reset:hlp-step; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hlp-steps li { counter-increment:hlp-step; position:relative; padding-left:46px; font-size:15.5px; line-height:1.6; color:var(--bzk-dm-text, #2a2a30); }
.hlp-steps li::before { content:counter(hlp-step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:#f0c040; color:#1a1a20; font-weight:800; font-size:14px; display:grid; place-items:center; }
.hlp-steps a, .hlp-note a { color:#b8860b; font-weight:700; }
.hlp-note { margin:26px 0 0; padding:16px 20px; border-radius:14px; background:var(--bzk-dm-surface-2, #fbf9f2); border:1px solid var(--bzk-dm-border, #efe9da); }
.hlp-note h2 { font-size:14px; font-weight:800; margin:0 0 8px; color:var(--bzk-dm-text, #2a2a30); display:flex; align-items:center; gap:6px; }
.hlp-note h2 .la { color:#b8860b; font-size:18px; }
.hlp-note ul { margin:0; padding-left:18px; }
.hlp-note li { font-size:14px; line-height:1.55; color:var(--bzk-dm-text-2, #4a4a54); margin:4px 0; }
.hlp-article-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.hlp-btn-sm { padding:9px 16px; font-size:14px; border-radius:10px; }
.hlp-feedback { margin-top:28px; padding-top:20px; border-top:1px solid var(--bzk-dm-border, #efe9da); display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.hlp-feedback-q { margin:0; font-weight:700; font-size:14.5px; color:var(--bzk-dm-text, #2a2a30); }
.hlp-feedback-btns { display:flex; gap:8px; }
.hlp-btn-ghost-sm { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px; font-weight:700; font-size:13.5px; cursor:pointer;
  background:transparent; color:var(--bzk-dm-text, #2a2a30); border:1.5px solid var(--bzk-dm-border, #e2dccb); }
.hlp-btn-ghost-sm:hover { border-color:#f0c040; }
.hlp-feedback-more { flex-basis:100%; display:flex; flex-direction:column; gap:8px; }
.hlp-feedback-more[hidden], .hlp-feedback-btns[hidden], .hlp-feedback-q[hidden], .hlp-feedback-thanks[hidden] { display:none; }
.hlp-feedback-more label { font-size:13.5px; font-weight:700; color:var(--bzk-dm-text, #2a2a30); }
.hlp-feedback-more textarea { width:100%; border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; border:1.5px solid var(--bzk-dm-border, #e2dccb); background:var(--bzk-dm-surface, #fff); color:var(--bzk-dm-text, #2a2a30); }
.hlp-feedback-more .hlp-btn { align-self:flex-start; }
.hlp-feedback-thanks { margin:0; font-size:14px; color:#2e7d32; font-weight:700; }
.hlp-article-date { margin:16px 0 0; font-size:12.5px; color:var(--bzk-dm-text-muted, #9a9aa2); }
.hlp-related { margin-top:34px; }
.hlp-related h2 { font-size:18px; font-weight:900; margin:0 0 12px; color:var(--bzk-dm-text, #1a1a20); }
.hlp-related-list, .hlp-article-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.hlp-related-item, .hlp-article-card { position:relative; display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:14px; text-decoration:none;
  background:var(--bzk-dm-surface, #fff); border:1px solid var(--bzk-dm-border, #efe9da); color:inherit; transition:border-color .15s, transform .15s; }
.hlp-related-item:hover, .hlp-article-card:hover { border-color:#f0c040; transform:translateY(-2px); text-decoration:none; color:inherit; }
.hlp-related-item > .la, .hlp-article-card > .la { font-size:22px; color:#b8860b; margin-top:2px; flex:0 0 auto; }
.hlp-related-item strong, .hlp-article-card strong { display:block; font-size:14.5px; color:var(--bzk-dm-text, #1a1a20); margin-bottom:3px; }
.hlp-related-item small, .hlp-article-card small { display:block; font-size:13px; line-height:1.45; color:var(--bzk-dm-text-muted, #6a6a74); }
.hlp-article-card { padding-bottom:30px; }
.hlp-article-tag { position:absolute; right:14px; bottom:10px; font-style:normal; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--bzk-dm-text-muted, #9a9aa2); }
.hlp-section-articles { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.hlp-section-articles-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--bzk-dm-text-muted, #8a8a94); display:inline-flex; align-items:center; gap:5px; }
.hlp-section-articles a { font-size:13.5px; font-weight:700; text-decoration:none; color:#8a6d12; background:var(--bzk-dm-surface-2, #fdf6e3); border:1px solid var(--bzk-dm-border, #f0e3b8); padding:6px 12px; border-radius:999px; }
.hlp-section-articles a:hover { border-color:#f0c040; }
@media (max-width:640px) { .hlp-article { padding:22px 18px; } .hlp-article h1 { font-size:23px; } }
/* Sombre : couleurs de marque sur fond sombre */
html.dark-mode .hlp-section-articles a { color:#e3b73f; }
html.dark-mode .hlp-feedback-thanks { color:#6cc070; }

/* Page « Avis et fonctionnement » (/avis-clients) */
.hlp-avis-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:22px 0 8px; }
.hlp-avis-stat { border:1px solid var(--bzk-dm-border, #efe9da); border-radius:16px; padding:18px 20px; background:var(--bzk-dm-surface, #fff); display:flex; flex-direction:column; gap:6px; }
.hlp-avis-stat strong { font-size:34px; font-weight:900; line-height:1; color:var(--bzk-dm-text, #2a2a30); }
.hlp-avis-stat strong small { font-size:16px; font-weight:700; color:var(--bzk-dm-text-muted, #8a8a94); }
.hlp-avis-stat span { font-size:14px; line-height:1.45; color:var(--bzk-dm-text-2, #4a4a52); }
.hlp-avis-stat em { font-style:normal; font-size:13px; font-weight:700; color:#b8860b; }
.hlp-avis-stat a { font-size:13px; font-weight:700; color:#b8860b; text-decoration:none; }
.hlp-avis-stat a:hover { text-decoration:underline; }
.hlp-avis-method { font-size:13px; color:var(--bzk-dm-text-muted, #8a8a94); margin:0 0 6px; }
.hlp-avis-faq h2 { font-size:20px; font-weight:800; margin:28px 0 8px; color:var(--bzk-dm-text, #2a2a30); }
.hlp-avis-faq p { font-size:15.5px; line-height:1.65; margin:0; color:var(--bzk-dm-text-2, #4a4a52); }
.hlp-avis-faq a { color:#b8860b; font-weight:600; }