/* L'assistant du site : la charte de nxtprocess.com — Archivo pour les titres, Barlow pour le texte, des angles
 * droits, le bleu foncé #0B1620 et le bleu d'action #1B7FC4. */
:root {
  --nuit: #0B1620; --gris: #6B7783; --bleu: #1B7FC4; --bleu-2: #166BA6;
  --papier: #F4F4F2; --blanc: #fff; --filet: rgba(11,22,32,.14);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html, body { height: 100%; }
body { font-family: 'Barlow', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--nuit); background: var(--papier); -webkit-font-smoothing: antialiased; }

.ast { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; background: var(--blanc); }
@media (min-width: 800px) { .ast { border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); } }

.ast-tete { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px; background: var(--nuit); color: var(--blanc); flex-shrink: 0; }
.ast-marque { font-family: 'Archivo', Helvetica, Arial, sans-serif; display: inline-flex; align-items: baseline; gap: 6px; }
.ast-marque strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ast-marque span { font-size: 11px; font-weight: 500; letter-spacing: .22em; color: rgba(255,255,255,.62); }
.ast-titre { font-size: 13px; color: rgba(255,255,255,.62); }
.cadre .ast-tete { padding-right: 74px; }
/* Presque plein écran : la conversation prend la largeur de la fenêtre, les messages gardent une ligne lisible. */
.v-plein .ast { max-width: none; border: 0; }
.v-plein .ast-msg { max-width: min(88%, 760px); }
.v-plein .ast-fil, .v-plein .ast-suggestions, .v-plein .ast-note, .v-plein .ast-tete { padding-left: max(20px, calc((100% - 900px) / 2)); padding-right: max(20px, calc((100% - 900px) / 2)); }
.v-plein.cadre .ast-tete { padding-right: max(74px, calc((100% - 900px) / 2)); }
.v-lateral .ast { max-width: none; border: 0; }
.ast-nouveau { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.8); font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; }
.ast-nouveau:hover { color: var(--blanc); border-color: var(--blanc); }

.ast-fil { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--papier); scroll-behavior: smooth; }
.ast-msg { max-width: 88%; padding: 10px 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.ast-msg p + p, .ast-msg ul + p, .ast-msg p + ul { margin-top: 8px; }
.ast-msg ul { padding-left: 18px; }
.ast-msg a { color: var(--bleu); text-underline-offset: 2px; }
.ast-msg.a { align-self: flex-start; background: var(--blanc); border: 1px solid var(--filet); }
.ast-msg.u { align-self: flex-end; background: var(--nuit); color: var(--blanc); }
.ast-msg.u a { color: #9CD0F2; }
.ast-msg.err { align-self: flex-start; background: #FBEDEB; border: 1px solid #E9B9B2; color: #8A2B20; }
.ast-info { align-self: center; font-size: 13px; color: var(--gris); border: 1px solid var(--filet); background: var(--blanc); padding: 6px 12px; }
.ast-info.ok { color: #1F6B45; border-color: #A9D3BC; background: #EEF8F2; }

.ast-points { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--filet); }
.ast-points i { width: 6px; height: 6px; background: var(--gris); animation: ast-pt 1s infinite ease-in-out; }
.ast-points i:nth-child(2) { animation-delay: .15s; } .ast-points i:nth-child(3) { animation-delay: .3s; }
@keyframes ast-pt { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ast-points i { animation: none; opacity: .6; } .ast-fil { scroll-behavior: auto; } }

.ast-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; background: var(--papier); flex-shrink: 0; }
.ast-suggestions:empty { display: none; }
.ast-suggestions button { font: inherit; font-size: 13px; font-weight: 500; color: var(--nuit); background: var(--blanc); border: 1px solid var(--filet); padding: 7px 12px; cursor: pointer; text-align: left; }
.ast-suggestions button:hover { border-color: var(--bleu); color: var(--bleu); }

.ast-saisie { display: flex; align-items: flex-end; gap: 0; border-top: 1px solid var(--filet); background: var(--blanc); flex-shrink: 0; }
.ast-saisie textarea { flex: 1; resize: none; border: 0; outline: 0; font: inherit; padding: 14px 16px; max-height: 140px; background: transparent; color: var(--nuit); }
.ast-saisie textarea::placeholder { color: var(--gris); }
.ast-saisie:focus-within { box-shadow: inset 0 2px 0 var(--bleu); }
.ast-saisie button { width: 52px; align-self: stretch; border: 0; background: var(--bleu); color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ast-saisie button:hover { background: var(--bleu-2); }
.ast-saisie button:disabled { background: #B8C2CC; cursor: not-allowed; }
.ast-note { font-size: 12px; color: var(--gris); padding: 8px 20px 12px; background: var(--blanc); }
.ast-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) { .ast-fil { padding: 14px; } .ast-msg { max-width: 94%; } .ast-suggestions { padding: 0 14px 10px; } .ast-tete { padding: 12px 14px; } }

/* Page centrale (v=central) : un grand champ au milieu, comme l'accueil d'un assistant ; dès la première question, la
 * conversation prend la place et le champ descend en bas. */
.ast-bienvenue { display: none; }
.central body { background: #FFF; }
.central.accueil .ast { max-width: none; border: 0; justify-content: center; align-items: center; padding: 24px 20px; gap: 22px; background: transparent; }
.central.accueil .ast-tete, .central.accueil .ast-fil { display: none; }
.central.accueil .ast-bienvenue { display: block; order: 1; text-align: center; width: min(760px, 100%); }
.ast-cap { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ast-cap svg { color: var(--bleu); flex-shrink: 0; }
.ast-bienvenue h1 { font-family: 'Archivo', Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; }
.ast-bienvenue p { margin-top: 10px; color: var(--gris); font-size: 1rem; }
.central.accueil .ast-saisie { order: 2; width: min(760px, 100%); flex-wrap: wrap; align-items: center; border: 1px solid var(--filet); background: #FFF; box-shadow: 0 6px 24px rgba(11,22,32,.08); padding: 14px 14px 12px; }
.central.accueil .ast-saisie:focus-within { box-shadow: 0 6px 24px rgba(11,22,32,.08), 0 0 0 2px var(--bleu); border-color: var(--bleu); }
.central.accueil .ast-saisie textarea { flex: 1 1 100%; min-height: 68px; padding: 4px 4px 10px; font-size: 1.05rem; }
.central.accueil .ast-saisie button { width: 42px; height: 42px; align-self: auto; margin-left: auto; }
.central.accueil .ast-suggestions { order: 3; width: min(760px, 100%); justify-content: center; padding: 0; background: transparent; }
.central.accueil .ast-note { order: 4; width: min(760px, 100%); text-align: center; background: transparent; padding: 0; }
/* Sur un fond foncé (t=sombre) */
.central.sombre body, .central.sombre.accueil .ast { background: var(--nuit); }
.central.sombre.accueil .ast-bienvenue h1 { color: #FFF; }
.central.sombre.accueil .ast-bienvenue p, .central.sombre.accueil .ast-note { color: rgba(255,255,255,.7); }
.central.sombre.accueil .ast-cap svg { color: #5BB0EA; }
.central.sombre.accueil .ast-suggestions button { background: transparent; color: #FFF; border-color: rgba(255,255,255,.4); }
.central.sombre.accueil .ast-suggestions button:hover { border-color: #5BB0EA; color: #FFF; background: rgba(255,255,255,.08); }
@media (max-width: 520px) { .central.accueil .ast { padding: 16px 14px; } }

/* Une réponse écrite à la main par quelqu'un de l'équipe (et non par l'assistant). */
.ast-msg.h { border-left: 3px solid var(--accent, #1B7FC4); }
.ast-par { font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--accent, #1B7FC4); margin-bottom: 3px; }