/* ============================================================================
   lbosupport.com — assets/css/support.css
   ----------------------------------------------------------------------------
   SURCOUCHE locale, chargée APRÈS le Design System v3.2.0 du CDN. Elle ne
   redéfinit pas le DS : elle ajoute les composants propres au site support
   (hero, grille KB, listes, article, formulaire) en s'appuyant sur les tokens
   du DS et sur l'accent du pôle support (--accent, posé par head.php).
   ============================================================================ */

.container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.sup-muted { color: #6b7280; }
.sup-muted a, .sup-article a { color: var(--accent); }

/* Hero */
.sup-hero {
    padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(2rem, 6vw, 4rem);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #475569) 38%, #1a1a1a),
        color-mix(in srgb, var(--accent, #475569) 12%, #0a0a0a));
    color: #fff; text-align: center;
}
.sup-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .75rem; }
.sup-hero p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto; }
.sup-hero__search { margin-top: 1.5rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.sup-hero__search input { width: min(480px, 90vw); padding: .8rem 1rem; border: 0; border-radius: 8px; font-size: 1rem; }

/* Sections */
.sup-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.sup-section--alt { background: #f8fafc; }
.sup-section__title { font-size: 1.5rem; margin: 0 0 1.25rem; }

/* Grille de cartes */
.sup-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sup-card {
    display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 1.5rem; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sup-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent, #475569) 40%, transparent);
    border-color: color-mix(in srgb, var(--accent, #475569) 30%, #e5e7eb);
}
.sup-card__icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent, #475569) 12%, #fff); color: var(--accent, #475569);
    font-size: 20px; margin-bottom: .75rem;
}
.sup-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.sup-card p { margin: 0; color: #4b5563; font-size: .92rem; }
.sup-card__meta { margin-top: .75rem; font-size: .8rem; color: #6b7280; }

/* Listes d'articles */
.sup-list { display: flex; flex-direction: column; gap: .5rem; }
.sup-list__item {
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1rem 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.sup-list__item:hover { border-color: var(--accent, #475569); transform: translateX(2px); }
.sup-list__item span { color: #6b7280; font-size: .9rem; }

/* Fil d'ariane */
.sup-breadcrumb { font-size: .85rem; color: #6b7280; margin-bottom: 1rem; }
.sup-breadcrumb a { color: #6b7280; text-decoration: none; }
.sup-breadcrumb a:hover { color: var(--accent, #475569); }

/* Badges */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge--pole { background: color-mix(in srgb, var(--accent, #475569) 12%, #fff); color: var(--accent, #475569); }

/* Article */
.sup-article { max-width: 760px; margin: 0 auto; }
.sup-article h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .75rem; }
.sup-article__meta { color: #6b7280; font-size: .85rem; margin-bottom: 1.5rem; }
.sup-article__body { font-size: 1.02rem; line-height: 1.7; }
.sup-article__body h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.sup-article__body h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.sup-article__body pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.sup-article__body code { background: color-mix(in srgb, var(--accent, #475569) 12%, #fff); color: var(--accent, #475569); padding: .1rem .35rem; border-radius: 4px; }
.sup-article__body pre code { background: none; color: inherit; padding: 0; }
.sup-article__body blockquote { border-left: 3px solid var(--accent, #475569); margin: 1rem 0; padding: .5rem 1rem; color: #4b5563; background: #f8fafc; }
.sup-article__body ul, .sup-article__body ol { padding-left: 1.4rem; }

/* Bloc « utile » */
.sup-helpful { margin-top: 3rem; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 12px; text-align: center; background: #f8fafc; }
.sup-helpful__btns { display: flex; gap: .75rem; justify-content: center; margin-top: .75rem; }
.sup-helpful form { margin: 0; }

/* Formulaire ticket */
.sup-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.sup-field { display: flex; flex-direction: column; gap: .5rem; }
.sup-field label { font-weight: 600; font-size: .9rem; }
.sup-field input, .sup-field select, .sup-field textarea { padding: .7rem .9rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .95rem; font-family: inherit; }
.sup-notice { background: #f8fafc; border: 1px solid #e5e7eb; border-left: 3px solid var(--accent, #475569); border-radius: 10px; padding: 1.25rem; }
.sup-notice strong { display: block; margin-bottom: .25rem; }

/* Boutons (au cas où le DS ne les fournit pas tous) */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.2rem; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #111; text-decoration: none; }
.btn:hover { border-color: var(--accent, #475569); color: var(--accent, #475569); }
.btn--primary { background: var(--accent, #475569); border-color: var(--accent, #475569); color: #fff; }
.btn--primary:hover { filter: brightness(.95); color: #fff; }

/* ─── Bande de recherche KB (sous le hero riche) ─────────────────────────── */
.sup-search-band {
    background: var(--ds-color-surface, #f8fafc);
    border-bottom: 1px solid var(--ds-color-border, #e2e8f0);
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.sup-search-band__title {
    text-align: center;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--ds-color-text, #0f172a);
}
.sup-search-band .sup-hero__search {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    gap: .75rem;
}
.sup-search-band .sup-hero__search input {
    flex: 1;
    padding: .85rem 1.1rem;
    border: 1px solid var(--ds-color-border, #cbd5e1);
    border-radius: 10px;
    font-size: 1rem;
}

/* ─── « À lire aussi » (suggestions d'articles) ──────────────────────────── */
.sup-related {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ds-color-border, #e2e8f0);
}
.sup-related__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--ds-color-text, #0f172a);
}

/* ─── Thématisation par couleur de catégorie ─────────────────────────────── */
/* Carte de suggestion : liseré gauche à la couleur de la catégorie. */
.sup-list__item--themed {
    border-left: 3px solid var(--cat, #475569);
}
/* Petit tag catégorie au-dessus du titre dans les suggestions. */
.sup-cat-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}
/* Carte catégorie (accueil + kb) : liseré haut à la couleur de la catégorie. */
.sup-card--themed {
    border-top: 3px solid var(--cat, #475569);
}

/* ── Formulaire ticket : variantes notice, consentement, honeypot ────────── */
.sup-notice--ok  { border-left-color: #0a7d28; background: #f0fbf3; }
.sup-notice--err { border-left-color: #b00020; background: #fdf2f3; }
.sup-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: #4b5563; }
.sup-consent input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    margin: .15rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    flex: 0 0 auto;
    accent-color: var(--accent, #475569);
    cursor: pointer;
}
.sup-consent span { cursor: pointer; }
.sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Suivi de ticket (track.php) : méta + fil de conversation ────────────── */
.sup-ticket-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sup-ticket-meta__ref { font-size: .9rem; color: #4b5563; }
.sup-ticket-subject { font-size: 1.25rem; margin: 0 0 1.25rem; }
.sup-thread { display: flex; flex-direction: column; gap: .75rem; max-width: 760px; margin: 0 0 1.5rem; }
.sup-msg { padding: .85rem 1rem; border-radius: 10px; border: 1px solid #e5e7eb; }
.sup-msg__who { font-size: .78rem; color: #6b7280; margin-bottom: .35rem; font-weight: 600; }
.sup-msg__body { white-space: pre-wrap; }
.sup-msg--client { background: #f8fafc; }
.sup-msg--agent { background: var(--sup-color-soft, #eef1f5); border-left: 3px solid var(--accent, #475569); }
.sup-thread__reply { max-width: 760px; margin-left: 0; }

/* ── Base de connaissances : navigation par rail de catégories (kb.php) ───── */
/* Layout 2 colonnes : rail persistant à gauche, contenu à droite. */
.kb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; margin-top: 1.5rem; }

/* Rail de catégories (sticky en desktop). */
.kb-rail { position: sticky; top: 1rem; }
.kb-rail__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 700; margin: 0 0 .6rem .25rem; }
.kb-rail__list { display: flex; flex-direction: column; gap: 2px; }
.kb-cat {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .6rem .75rem; border-radius: 9px; border-left: 3px solid transparent;
    text-decoration: none; color: #374151; font-size: .92rem;
    transition: background .12s, color .12s;
}
.kb-cat:hover { background: #f3f4f6; }
.kb-cat__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--cat, #475569); }
.kb-cat__name { flex: 1; }
.kb-cat__count { font-size: .78rem; color: #9ca3af; background: #f3f4f6; border-radius: 999px; padding: .05rem .5rem; }
.kb-cat.is-active {
    background: color-mix(in srgb, var(--accent, #475569) 9%, #fff);
    color: var(--accent, #475569); font-weight: 700; border-left-color: var(--accent, #475569);
}
.kb-cat.is-active .kb-cat__count { color: var(--accent, #475569); background: color-mix(in srgb, var(--accent, #475569) 14%, #fff); }

/* Chips horizontales (mobile uniquement ; masquées en desktop). */
.kb-chips { display: none; gap: .5rem; overflow-x: auto; padding: .25rem .25rem 0; margin: 1rem -.25rem 0; -webkit-overflow-scrolling: touch; }
.kb-chip {
    flex: 0 0 auto; padding: .45rem .85rem; border: 1px solid #e5e7eb; border-radius: 999px;
    background: #fff; font-size: .85rem; color: #374151; white-space: nowrap; text-decoration: none;
}
.kb-chip:hover { border-color: var(--accent, #475569); }
.kb-chip.is-active { background: var(--accent, #475569); border-color: var(--accent, #475569); color: #fff; font-weight: 600; }

/* Colonne contenu : en-tête (titre de la vue + compteur). */
.kb-content__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.kb-content__title { font-size: 1.4rem; margin: 0; }
.kb-count { font-size: .88rem; color: #6b7280; white-space: nowrap; }

/* Bloc d'aide en bas de liste. */
.kb-help { margin-top: 2rem; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #f8fafc; text-align: center; }
.kb-help p { margin: 0 0 1rem; color: #4b5563; }

/* Responsive : sous 860px, le rail laisse place aux chips horizontales. */
@media (max-width: 860px) {
    .kb-layout { grid-template-columns: 1fr; gap: 1rem; }
    .kb-rail { display: none; }
    .kb-chips { display: flex; }
}

/* ── Bannière « Découvrir un autre pôle » (bas d'article) ────────────────────
   Couleur pilotée par --pole (posé en inline sur .sup-discover). */
.sup-discover { margin: 2.5rem 0 1.5rem; }
.sup-discover__card {
    display: grid; grid-template-columns: 40% 1fr; align-items: stretch;
    min-height: 180px; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; background: #fff;
    border: 1px solid color-mix(in srgb, var(--pole, #475569) 28%, #e5e7eb);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--pole, #475569) 55%, transparent);
    transition: transform .15s, box-shadow .15s;
}
.sup-discover__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--pole, #475569) 65%, transparent);
}
.sup-discover__media {
    background-color: color-mix(in srgb, var(--pole, #475569) 25%, #1a1a1a);
    background-size: cover; background-position: center; min-height: 160px;
}
.sup-discover__body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
.sup-discover__eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--pole, #475569); }
.sup-discover__name { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.sup-discover__baseline {
    color: #6b7280; font-size: .95rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sup-discover__cta { margin-top: .4rem; font-weight: 700; color: var(--pole, #475569); }
.sup-discover__card:hover .sup-discover__cta { text-decoration: underline; }
@media (max-width: 640px) {
    .sup-discover__card { grid-template-columns: 1fr; }
    .sup-discover__media { min-height: 140px; }
}

/* ── Page ticket : mise en page 2 colonnes soignée ──────────────────────────── */
.sup-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; align-items: start; }
.sup-ticket__lead { margin: 0 0 1.25rem; }
.sup-form--card { max-width: none; margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.75rem; box-shadow: 0 10px 30px -20px rgba(0,0,0,.25); }
.sup-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sup-field input:focus, .sup-field textarea:focus, .sup-field select:focus {
    outline: none; border-color: var(--accent, #475569);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #475569) 18%, transparent);
}
.sup-form__actions { margin-top: .25rem; }
.btn--lg { padding: .85rem 1.6rem; font-size: 1rem; }
.sup-ticket__aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.5rem; }
.sup-panel { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.25rem 1.4rem; }
.sup-panel__title { font-size: 1.05rem; margin: 0 0 .75rem; }
.sup-steps { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .5rem; color: #374151; font-size: .92rem; }
.sup-panel__note { margin: 1rem 0 0; font-size: .82rem; color: #6b7280; }
.sup-panel--kb { border-left: 3px solid var(--accent, #475569); }
.sup-panel--kb p { margin: 0 0 .75rem; }
/* Bouton KB : occupe toute la largeur du panneau et passe à la ligne (évite le débordement du texte long). */
.sup-panel--kb .btn { display: block; width: 100%; box-sizing: border-box; text-align: center; white-space: normal; line-height: 1.3; }
/* Bloc contact téléphone (colonne de droite de la page de demande). */
.sup-panel__tel { margin: 0; font-size: 1.15rem; font-weight: 700; }
.sup-panel__tel a { color: inherit; text-decoration: none; }
.sup-panel__tel a:hover { color: var(--accent, #475569); text-decoration: underline; }
@media (max-width: 820px) {
    .sup-ticket { grid-template-columns: 1fr; }
    .sup-ticket__aside { position: static; }
    .sup-form__grid { grid-template-columns: 1fr; }
}