/* ============================================================
   L'ASSISTANT IA — accueil (section sombre) et page /assistant-ia
   Jetons de tokens.css ; mobile d'abord (640 / 768 / 1024).
   ============================================================ */

/* ---------- Téléphone de démonstration (_assistant-demo.html.twig) ---------- */

.talk {
    margin: 0 auto;
    max-width: 320px;
}

.talk__phone {
    display: flex;
    flex-direction: column;
    height: 560px;
    border: 9px solid var(--primitive-gray-900, #111318);
    border-radius: 2.4rem;
    background: var(--color-paper);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    color: var(--color-ink);
    text-align: left;
}

.talk__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1.1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}
.talk__island {
    width: 70px;
    height: 18px;
    border-radius: 999px;
    background: var(--primitive-gray-900, #111318);
}

.talk__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
}
.talk__bar strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; line-height: 1.1; }
.talk__bar small { display: block; color: var(--color-text-muted); font-size: 0.72rem; }
.talk__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-primary);
}

.talk .talk__thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0;
    padding: 0.8rem 0.75rem;
    list-style: none;
    background: #fff;
    overflow: hidden;
}

.talk__msg {
    max-width: 88%;
    padding: 0.55rem 0.8rem;
    border-radius: 16px;
    font-size: 0.84rem;
    line-height: 1.45;
}
.talk__msg--user {
    align-self: flex-end;
    background: var(--color-primary);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.talk__msg--bot {
    align-self: flex-start;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 5px;
}
.talk__voice {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    opacity: 0.8;
}

.talk__typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
}
.talk__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: talk-blink 1.1s infinite ease-in-out;
}
.talk__typing span:nth-child(2) { animation-delay: 0.18s; }
.talk__typing span:nth-child(3) { animation-delay: 0.36s; }

.talk__card {
    align-self: stretch;
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    font-size: 0.78rem;
}
.talk__card-title { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--color-primary); }
.talk__card-line { color: var(--color-text-light); }
.talk__publish {
    justify-self: start;
    margin-top: 0.25rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--color-action);
    color: #fff;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.talk__publish.is-pressed { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(184, 70, 30, 0.18); }

.talk__done {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: #e3f1e8;
    color: #1f5f36;
    font-size: 0.76rem;
    font-weight: 600;
}

.talk__composer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem 0.9rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-paper);
}
.talk__field {
    flex: 1;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.talk__mic, .talk__send {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}
.talk__mic { border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-primary); }
.talk__send { background: var(--color-action); color: #fff; }

.talk__caption {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: var(--primitive-space-4, 1rem);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.home-dark .talk__caption { color: rgba(255, 255, 255, 0.7); }
.talk__replay {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.3rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.talk__replay[hidden] { display: none; }

/* La remise à zéro ul[class], ol[class] de vitrine.css l'emporte sur une classe seule :
   les listes de cette feuille sont donc qualifiées (ol.ask-steps, .talk .talk__thread…). */

/* Lecture : les étapes apparaissent l'une après l'autre (assistant-demo.js). */
.talk.is-playing [data-talk-step]:not(.is-shown) { display: none; }
.talk.is-playing [data-talk-step].is-shown { animation: talk-in 0.35s ease both; }
.talk [data-talk-step][hidden] { display: none; }

@keyframes talk-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@keyframes talk-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .talk.is-playing [data-talk-step].is-shown,
    .talk__typing span { animation: none; }
}

@media (max-width: 380px) {
    .talk__phone { height: 520px; }
}

/* ---------- Accueil : la section de l'éditeur devient « le mode expert », claire ---------- */

.home-expert .home-checks li { color: var(--color-text-light); }
.home-expert .home-checks strong { color: var(--color-ink); }
.home-expert .home-checks svg { color: var(--color-primary); }
.home-expert h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.875rem); margin-bottom: var(--primitive-space-4); }
.home-expert .lead { margin-bottom: var(--primitive-space-6); }

.home-talk .hero__actions,
.ask-hero .hero__actions { justify-content: flex-start; }

.home-talk__plans {
    margin: var(--primitive-space-5, 1.25rem) 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- Page /assistant-ia ---------- */

.ask-hero {
    padding-block: var(--section-pad);
}
.ask-hero .home-split { align-items: center; }
.ask-hero h1 {
    font-size: var(--text-hero);
    line-height: 1.05;
    margin-bottom: var(--primitive-space-5, 1.25rem);
}
.ask-hero .lead { color: rgba(255, 255, 255, 0.8); max-width: 34rem; }

/* Trois temps : demander, vérifier, valider */
ol.ask-steps {
    display: grid;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ask;
}
@media (min-width: 900px) {
    ol.ask-steps { grid-template-columns: repeat(3, 1fr); }
}
.ask-step {
    position: relative;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-card);
}
.ask-step__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--primitive-space-4, 1rem);
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-primary);
}
.ask-step h3 { font-size: var(--text-xl, 1.25rem); margin-bottom: 0.4rem; }
.ask-step h3::before {
    counter-increment: ask;
    content: counter(ask) ". ";
    color: var(--color-primary);
}
.ask-step p { margin: 0; color: var(--color-text-light); }

/* Exemples de demandes */
ul.ask-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto;
    padding: 0;
    max-width: 58rem;
    list-style: none;
}
.ask-examples li {
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card);
    font-size: var(--text-sm);
    color: var(--color-ink);
}
.ask-examples li::before { content: "« "; color: var(--color-primary); }
.ask-examples li::after { content: " »"; color: var(--color-primary); }

/* Notification sur l'écran verrouillé */
.ask-notif {
    max-width: 340px;
    margin: 0 auto;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
    color: var(--color-ink);
    text-align: left;
}
.ask-notif__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--color-text-muted); }
.ask-notif__head img { border-radius: 6px; }
.ask-notif strong { display: block; margin-top: 0.35rem; font-size: 0.9rem; }
.ask-notif p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--color-text-light); }
.ask-lock {
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(70% 60% at 30% 0%, rgba(143, 179, 232, 0.55), transparent 70%),
        linear-gradient(160deg, #24477a, #16181d);
    text-align: center;
    color: #fff;
}
.ask-lock__time { font-family: var(--font-heading); font-size: 3.25rem; font-weight: 700; line-height: 1; }
.ask-lock__date { margin-bottom: var(--spacing-md); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); }

/* Crédits par offre */
ul.ask-credits {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0 auto;
    padding: 0;
    max-width: 52rem;
    list-style: none;
}
@media (min-width: 768px) {
    ul.ask-credits { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.ask-credit {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-card);
    text-align: center;
}
.ask-credit--featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.ask-credit__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg, 1.125rem); }
.ask-credit__count { display: block; margin: 0.35rem 0; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.ask-credit p { margin: 0; font-size: var(--text-sm); color: var(--color-text-light); }
.ask-note { margin-top: var(--spacing-md); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Surtitre dans une ligne texte / visuel : même allure que dans un en-tête de section. */
.feature-row__text .kicker {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--primitive-space-3);
}