/* ==========================================================================
   Assistant de projet (/mon-projet) : parcours guidé, une question par écran.
   Feuille indépendante, chargée uniquement sur les pages de l'assistant (pas de build Tailwind nécessaire).
   Elle réutilise les jetons du design du site (--cream, --card, --ink, --patina…, définis dans assets/styles/app.css).
   ========================================================================== */

.assistant { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4.5rem; }
.assistant--wide { max-width: 62rem; }

.assistant-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--ink-soft); }
.assistant-top a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; color: var(--ink-soft); text-decoration: none; border-radius: 999px; padding: 0 0.5rem; }
.assistant-top a:hover { color: var(--green-deep); }
.assistant-top a:focus-visible { outline: 2px solid var(--patina-dark); outline-offset: 2px; }

.assistant-progress { margin-top: 0.4rem; height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.assistant-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--patina); transition: width 0.5s var(--ease); }

.assistant-title { margin-top: 2rem; font-size: clamp(1.75rem, 4.6vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
.assistant-title:focus { outline: none; }
.assistant-help { margin-top: 0.85rem; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.assistant-why { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
.assistant-why::before { content: 'Pourquoi cette question ? '; font-weight: 600; color: var(--patina-dark); }

.assistant-options { margin-top: 1.75rem; display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .assistant-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.assistant-option { display: block; position: relative; }
.assistant-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.assistant-card {
    display: flex; align-items: center; gap: 0.9rem; min-height: 4rem; height: 100%; padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--line); border-radius: 1.25rem; background: var(--card); cursor: pointer;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.assistant-card:hover { border-color: rgba(71, 152, 135, 0.55); transform: translateY(-1px); }
.assistant-input:checked + .assistant-card { border-color: var(--patina); background: #fff; box-shadow: 0 0 0 3px rgba(71, 152, 135, 0.18); }
.assistant-input:focus-visible + .assistant-card { outline: 3px solid var(--patina-dark); outline-offset: 2px; }

.assistant-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.9rem; background: rgba(71, 152, 135, 0.12); color: var(--patina-dark); }
.assistant-text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.assistant-label { font-weight: 600; line-height: 1.35; color: var(--ink); }
.assistant-desc { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }

.assistant-check { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; border: 1.5px solid rgba(34, 48, 45, 0.25); color: transparent; background: #fff; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
.assistant-options--multi .assistant-check { border-radius: 0.45rem; }
.assistant-check svg { width: 0.85rem; height: 0.85rem; }
.assistant-input:checked + .assistant-card .assistant-check { background: var(--patina-dark); border-color: var(--patina-dark); color: #fff; }

.assistant-field { width: 100%; margin-top: 0.5rem; padding: 0.85rem 1rem; border: 1.5px solid rgba(34, 48, 45, 0.18); border-radius: 1rem; background: #fff; color: var(--ink); font: inherit; line-height: 1.5; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.assistant-field:hover { border-color: rgba(34, 48, 45, 0.32); }
.assistant-field:focus { outline: none; border-color: var(--patina); box-shadow: 0 0 0 3px rgba(71, 152, 135, 0.2); }
.assistant-field[aria-invalid='true'] { border-color: #c2553a; }
textarea.assistant-field { resize: vertical; min-height: 7rem; }
.assistant-label-text { display: block; margin-top: 1.5rem; font-weight: 600; color: var(--ink); }
.assistant-hint { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--ink-soft); }

.assistant-alert { margin-top: 1.5rem; padding: 0.9rem 1.1rem; border-radius: 1rem; border: 1px solid rgba(194, 85, 58, 0.35); background: #fbeee9; color: #8a2f19; font-size: 0.9375rem; line-height: 1.55; }
.assistant-alert:focus { outline: 2px solid #c2553a; outline-offset: 2px; }
.assistant-field-error { margin-top: 0.4rem; font-size: 0.875rem; color: #a53b22; }

.assistant-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.assistant-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
    font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.assistant-btn--primary { background: var(--patina-dark); color: #fff; }
.assistant-btn--primary:hover { background: var(--green-deep); transform: translateY(-1px); }
.assistant-btn--ghost { background: transparent; color: var(--green-deep); border-color: rgba(34, 48, 45, 0.25); }
.assistant-btn--ghost:hover { border-color: var(--patina); background: rgba(71, 152, 135, 0.08); }
.assistant-btn:focus-visible { outline: 3px solid var(--patina-dark); outline-offset: 3px; }
.assistant-btn[disabled] { opacity: 0.7; cursor: wait; transform: none; }
.assistant-link-btn { min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; font: inherit; font-size: 0.9375rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(34, 48, 45, 0.3); cursor: pointer; }
.assistant-link-btn:hover { color: var(--green-deep); }
.assistant-link-btn:focus-visible { outline: 2px solid var(--patina-dark); outline-offset: 2px; border-radius: 6px; }

.assistant-panel { background: var(--card); border: 1px solid var(--line); border-radius: 1.75rem; padding: 1.5rem; box-shadow: var(--shadow-soft); }
@media (min-width: 40rem) { .assistant-panel { padding: 1.9rem; } }
.assistant-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--patina-dark); }
.assistant-h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.assistant-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.assistant-tag { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(71, 152, 135, 0.12); color: var(--patina-dark); padding: 0.2rem 0.75rem; font-size: 0.8125rem; font-weight: 600; }
.assistant-steps { counter-reset: step; display: grid; gap: 0.9rem; padding: 0; margin: 1.1rem 0 0; list-style: none; }
.assistant-steps li { counter-increment: step; display: flex; gap: 0.9rem; align-items: flex-start; line-height: 1.6; color: var(--ink); }
.assistant-steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--patina-dark); color: #fff; font-size: 0.875rem; font-weight: 700; }
.assistant-rows { margin: 1rem 0 0; padding: 0; list-style: none; }
.assistant-rows li { display: grid; gap: 0.2rem 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .assistant-rows li { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; } }
.assistant-rows dt, .assistant-rows .k { font-size: 0.875rem; color: var(--ink-soft); }
.assistant-rows .v { color: var(--ink); line-height: 1.55; }
.assistant-rows a { font-size: 0.875rem; color: var(--patina-dark); }

@media (prefers-reduced-motion: no-preference) {
    .assistant-option { animation: assistant-in 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
    @keyframes assistant-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-card, .assistant-progress > span, .assistant-field, .assistant-btn { transition: none; }
    .assistant-card:hover, .assistant-btn--primary:hover { transform: none; }
}