/* ============================================================================
   Cara · Components · Onboarding — modale première visite (U4 v2)
   ----------------------------------------------------------------------------
   Port fidèle de la maquette validée _preview_onboarding_v1.html. TOUTES les
   classes sont préfixées « cara-onb- » pour éviter toute collision avec les
   styles applicatifs (.modal/.btn/.chip/.panel/.conn… existent déjà ailleurs).
   Les variables locales (couleurs de la maquette) sont scopées à l'overlay :
   aucune pollution du :root global. Typo via var(--font-*) de cara_brand.css —
   les @font-face DAATSystem-* NE sont PAS redéclarés ici.
   ============================================================================ */

.cara-onb-overlay {
    /* Palette locale (maquette U4 v2, thème clair Cara) */
    --onb-s: #fff;
    --onb-bg: #F7F9FC;
    --onb-ink: #0F172A;
    --onb-mut: #64748B;
    --onb-faint: #94A3B8;
    --onb-br: #0B5CFF;
    --onb-brd: #0A4FD8;
    --onb-brs: #EEF4FF;
    --onb-brg: #A9D1FF;
    --onb-brbd: #DCE8FF;
    --onb-bd: #E6ECF3;
    --onb-bds: #D8E1EC;
    --onb-sec: #0F766E;
    --onb-secs: #CCFBF1;
    --onb-secbd: #5EEAD4;
    --onb-val: #D97706;
    --onb-vals: #FFFBEB;
    --onb-valbd: #FCD34D;
    --onb-valink: #92400E;
    --onb-sh-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05);
    --onb-sh-lg: 0 24px 70px rgba(15, 23, 42, .16), 0 4px 14px rgba(15, 23, 42, .06);

    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: var(--onb-ink);
    /* --font-sans = token réel (cara_brand/_legacy-bridge) ; --font-ui n'existe pas. */
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(236, 243, 255, .96) 0%, transparent 58%),
        radial-gradient(900px 560px at 8% 108%, rgba(234, 246, 243, .96) 0%, transparent 55%),
        rgba(15, 23, 42, .34);
    overflow-y: auto;
}
.cara-onb-overlay * { box-sizing: border-box; }

/* Orbe signature = vrai logo Cara (asset dégradé autonome ; pas de fond ni d'anneau
   décoratif qui jurerait bleu-sur-bleu). Le conteneur ne fait que dimensionner. */
.cara-onb-orb {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cara-onb-orb-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(11, 92, 255, .24));
}

.cara-onb-modal {
    width: 100%;
    max-width: 860px;
    background: var(--onb-s);
    border: 1px solid var(--onb-bd);
    border-radius: 24px;
    box-shadow: var(--onb-sh-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cara-onb-rise .5s cubic-bezier(.2, .75, .2, 1);
}
@keyframes cara-onb-rise {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to { opacity: 1; transform: none; }
}

/* Header */
.cara-onb-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--onb-bd);
}
.cara-onb-head .cara-onb-orb { width: 28px; height: 28px; }
.cara-onb-brand { line-height: 1.15; }
.cara-onb-brand b { font-weight: 600; letter-spacing: -.01em; }
.cara-onb-brand small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--onb-faint);
}
.cara-onb-dots { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cara-onb-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--onb-bds);
    transition: all .35s;
}
.cara-onb-dots i.on { background: var(--onb-br); width: 22px; border-radius: 99px; }
.cara-onb-dots i.past { background: var(--onb-brg); }
.cara-onb-x {
    margin-left: 14px;
    color: var(--onb-faint);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    background: none;
    border: none;
    padding: 4px;
}
.cara-onb-x:hover { color: var(--onb-mut); }

/* Stage + panneaux */
.cara-onb-stage { padding: 34px 40px 30px; min-height: 388px; }
.cara-onb-panel { display: none; }
.cara-onb-panel.on { display: block; animation: cara-onb-fade .42s cubic-bezier(.2, .7, .2, 1); }
@keyframes cara-onb-fade {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}
.cara-onb-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--onb-br);
    margin-bottom: 13px;
}
.cara-onb-panel.cara-onb-data .cara-onb-eyebrow { color: var(--onb-sec); }
.cara-onb-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 33px;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 12px;
    text-wrap: balance;
}
.cara-onb-sub { color: var(--onb-mut); font-size: 15.5px; max-width: 54ch; margin: 0 0 24px; }
.cara-onb-sub b { color: var(--onb-ink); font-weight: 500; }

/* Bulle chat (vocabulaire réel) */
.cara-onb-line { display: flex; gap: 13px; align-items: flex-start; }
.cara-onb-line .cara-onb-orb { width: 32px; height: 32px; margin-top: 1px; }
.cara-onb-bubble {
    background: var(--onb-s);
    border: 1px solid var(--onb-bd);
    border-radius: 15px;
    border-top-left-radius: 7px;
    padding: 15px 17px;
    box-shadow: var(--onb-sh-sm);
    flex: 1;
    min-width: 0;
}
.cara-onb-bubble.cara-onb-bubble-bare { padding: 0; border: none; box-shadow: none; background: none; }
.cara-onb-bubble p { margin: 0; }
.cara-onb-bubble p + .cara-onb-chips { margin-top: 13px; }
.cara-onb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cara-onb-chip {
    font-size: 13px;
    color: var(--onb-br);
    background: var(--onb-brs);
    border: 1px solid var(--onb-brbd);
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: .16s;
}
.cara-onb-chip:hover { background: #E2ECFF; }
.cara-onb-chip .cara-onb-m { font-family: var(--font-mono); font-size: 11px; color: var(--onb-faint); margin-left: 6px; }

/* Panneau 2 — carte consentement (DÉMO visuelle) */
.cara-onb-consent {
    border: 1px solid var(--onb-valbd);
    background: var(--onb-vals);
    border-radius: 14px;
    padding: 15px 17px;
    margin-top: 4px;
}
.cara-onb-consent-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cara-onb-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--onb-valink);
    background: #FEF3C7;
    border: 1px solid var(--onb-valbd);
    border-radius: 6px;
    padding: 2px 8px;
}
.cara-onb-req { font-weight: 600; font-size: 14px; color: var(--onb-valink); }
.cara-onb-consent p { margin: 0 0 13px; font-size: 13.5px; color: #7c5309; }
.cara-onb-consent-act { display: flex; gap: 9px; }
/* Boutons illustratifs : rendus en <span> non interactifs (aucun handler). */
.cara-onb-mini {
    font-size: 13px;
    font-weight: 500;
    border-radius: 9px;
    padding: 7px 15px;
    border: 1px solid var(--onb-bd);
    background: #fff;
    color: var(--onb-ink);
    display: inline-block;
}
.cara-onb-mini-ok { background: var(--onb-val); border-color: var(--onb-val); color: #fff; }
.cara-onb-peda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--onb-mut);
}
.cara-onb-peda span { display: inline-flex; align-items: center; gap: 7px; }
.cara-onb-peda svg { width: 14px; height: 14px; color: var(--onb-sec); flex: 0 0 auto; }

/* Panneau 3 — connecteurs (logos réels) */
.cara-onb-conns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cara-onb-conn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--onb-bd);
    border-radius: 12px;
    background: var(--onb-s);
}
.cara-onb-logo { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px; object-fit: contain; }
.cara-onb-conn-m { flex: 1; min-width: 0; }
.cara-onb-conn-m b { font-weight: 600; font-size: 13.5px; display: block; }
.cara-onb-conn-m span { font-size: 11.5px; color: var(--onb-mut); }
.cara-onb-link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--onb-br);
    border: 1px solid var(--onb-brbd);
    background: var(--onb-brs);
    border-radius: 8px;
    padding: 6px 13px;
    cursor: pointer;
    white-space: nowrap;
}
.cara-onb-link:hover { background: #E2ECFF; }
.cara-onb-oauth { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; font-size: 12.5px; color: var(--onb-mut); }
.cara-onb-oauth svg { width: 14px; height: 14px; color: var(--onb-sec); flex: 0 0 auto; }

/* Panneau 4 — composer (aperçu visuel) */
.cara-onb-composer {
    border: 1px solid var(--onb-bds);
    border-radius: 16px;
    background: var(--onb-s);
    padding: 15px 17px;
    box-shadow: var(--onb-sh-sm);
}
.cara-onb-q { font-size: 15.5px; }
.cara-onb-cur {
    display: inline-block;
    width: 2px;
    height: 17px;
    background: var(--onb-br);
    margin-left: 1px;
    vertical-align: -3px;
    animation: cara-onb-blink 1.1s step-end infinite;
}
@keyframes cara-onb-blink { 50% { opacity: 0; } }
.cara-onb-composer-r { display: flex; align-items: center; margin-top: 14px; }
.cara-onb-hint { font-size: 12.5px; color: var(--onb-faint); }
.cara-onb-send {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--onb-br);
    display: grid;
    place-items: center;
}
.cara-onb-send svg { width: 16px; height: 16px; color: #fff; }
.cara-onb-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cara-onb-sug {
    font-size: 12.5px;
    color: var(--onb-mut);
    border: 1px solid var(--onb-bd);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    background: var(--onb-s);
}
.cara-onb-sug:hover { border-color: var(--onb-brbd); color: var(--onb-brd); background: var(--onb-brs); }

/* Footer */
.cara-onb-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-top: 1px solid var(--onb-bd);
    background: linear-gradient(180deg, #fff, #FBFCFE);
}
.cara-onb-back, .cara-onb-skip {
    font-size: 13.5px;
    color: var(--onb-mut);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
}
.cara-onb-back:hover, .cara-onb-skip:hover { color: var(--onb-ink); }
.cara-onb-sp { margin-left: auto; }
.cara-onb-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 22px;
    cursor: pointer;
    border: 1px solid var(--onb-br);
    background: var(--onb-br);
    color: #fff;
    box-shadow: 0 1px 2px rgba(11, 92, 255, .32);
    transition: .16s;
}
.cara-onb-btn:hover { background: var(--onb-brd); border-color: var(--onb-brd); }
.cara-onb-btn.cara-onb-go { background: var(--onb-sec); border-color: var(--onb-sec); box-shadow: 0 1px 2px rgba(15, 118, 110, .3); }
.cara-onb-btn.cara-onb-go:hover { background: #0c5f58; }
.cara-onb-overlay :focus-visible { outline: 2px solid var(--onb-br); outline-offset: 2px; }

/* Responsive */
@media (max-width: 560px) {
    .cara-onb-conns { grid-template-columns: 1fr; }
    .cara-onb-stage { padding: 26px 22px 24px; }
    .cara-onb-h1 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .cara-onb-overlay *, .cara-onb-modal { animation: none !important; transition: none !important; }
}