/*
 * components.css — chrome & primitives partagées de la refonte v2.
 * Classes préfixées `lx-`. Liée par page (pas d'import global) → n'affecte
 * que les templates qui la référencent explicitement.
 * Dépend des tokens `--lx-*` définis dans app.css.
 */

.lx-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* ── Eyebrow / texte dégradé ────────────────────────────────────────────── */
.lx-eyebrow {
    font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--lx-violet); display: inline-flex; align-items: center; gap: 9px;
}
.lx-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--lx-violet); opacity: .6; }
.lx-grad-text { background: var(--lx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.lx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    padding: 12px 22px; border-radius: 10px; transition: all .2s var(--lx-ease); white-space: nowrap;
}
.lx-btn-primary {
    color: #fff; background: var(--lx-grad); background-size: 160% 160%; background-position: 0 50%;
    box-shadow: 0 8px 22px rgba(107, 79, 224, 0.30);
}
.lx-btn-primary:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(107, 79, 224, 0.40); }
.lx-btn-primary:active { transform: translateY(0); }
.lx-btn-ghost { color: var(--lx-text); border: 0.5px solid var(--lx-border); background: #fff; }
.lx-btn-ghost:hover { border-color: var(--lx-violet); color: var(--lx-violet); background: var(--lx-violet-soft); }
.lx-btn-lg { padding: 15px 28px; font-size: 15px; border-radius: 12px; }
.lx-btn-light { color: var(--lx-text); background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.lx-btn-light:hover { transform: translateY(-1px); }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.lx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--lx-ease), transform .7s var(--lx-ease); }
.lx-reveal.in { opacity: 1; transform: none; }
.lx-reveal.d1 { transition-delay: .08s; }
.lx-reveal.d2 { transition-delay: .16s; }
.lx-reveal.d3 { transition-delay: .24s; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.lx-site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 0.5px solid var(--lx-border);
}
.lx-site-header__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lx-logo { font-weight: 600; font-size: 18px; letter-spacing: .14em; color: var(--lx-violet); }
.lx-logo span { font-weight: 300; }
.lx-logo b { font-weight: 300; color: var(--lx-faint); }
.lx-nav { display: flex; align-items: center; gap: 30px; }
.lx-nav-links { display: flex; align-items: center; gap: 26px; }
.lx-nav-links a { font-size: 13.5px; font-weight: 500; color: var(--lx-text-soft); transition: color .2s; }
.lx-nav-links a:hover, .lx-nav-links a.on { color: var(--lx-violet); }
.lx-nav-right { display: flex; align-items: center; gap: 14px; }
.lx-signin { font-size: 13.5px; font-weight: 600; color: var(--lx-text); }
.lx-signin:hover { color: var(--lx-violet); }

/* ── Sélecteur de langue ────────────────────────────────────────────────── */
.lx-lang { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lx-lang a { color: var(--lx-faint); padding: 3px 5px; border-radius: 5px; transition: all .2s; text-transform: uppercase; }
.lx-lang a.on { color: var(--lx-violet); background: var(--lx-violet-soft); }
.lx-lang a:hover { color: var(--lx-text); }
.lx-lang i { color: var(--lx-border); font-style: normal; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lx-site-footer { background: var(--lx-ivory); border-top: 0.5px solid var(--lx-border); padding: 64px 0 30px; }
.lx-ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.lx-ft-brand .lx-logo { display: inline-block; margin-bottom: 14px; }
.lx-ft-brand p { font-size: 13.5px; font-weight: 300; color: var(--lx-muted); max-width: 260px; }
.lx-ft-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-text); margin-bottom: 16px; }
.lx-ft-col a { display: block; font-size: 13.5px; font-weight: 400; color: var(--lx-text-soft); padding: 5px 0; transition: color .2s; }
.lx-ft-col a:hover { color: var(--lx-violet); }
.lx-ft-bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 52px; padding-top: 26px; border-top: 0.5px solid var(--lx-border); }
.lx-ft-bot span { font-size: 12px; color: var(--lx-faint); }

/* ── FAQ accordéon ──────────────────────────────────────────────────────── */
.lx-qa { border-bottom: 0.5px solid var(--lx-border); }
.lx-qa > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: 24px 4px; font-size: 16.5px; font-weight: 500; color: var(--lx-text); }
.lx-qa .lx-plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .3s var(--lx-ease); }
.lx-qa .lx-plus::before, .lx-qa .lx-plus::after { content: ""; position: absolute; background: var(--lx-violet); border-radius: 2px; }
.lx-qa .lx-plus::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.lx-qa .lx-plus::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: opacity .3s; }
.lx-qa.open .lx-plus { transform: rotate(90deg); }
.lx-qa.open .lx-plus::after { opacity: 0; }
.lx-qa .lx-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--lx-ease); }
.lx-qa .lx-a p { padding: 0 4px 24px; font-size: 15px; font-weight: 300; color: var(--lx-text-soft); max-width: 660px; }

/* ── Responsive & accessibilité ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .lx-nav-links { display: none; }
    .lx-ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .lx-container { padding: 0 20px; }
    .lx-lang, .lx-signin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lx-reveal { opacity: 1; transform: none; }
}