/* Composants IA du site public (devis, cohérence du dossier, « Pourquoi ce résultat ? », factures).
   Propriétaire : front public (P3) · AI_SPEC § 2.3, § 5.3, § 7.3 · tokens de site.css uniquement, un seul marqueur IA (.ai-badge). */

/* Éléments communs */
.ai-invoices [hidden], .ai-quote [hidden], .ai-consistency [hidden], #ai-invoices-slot[hidden], #ai-quote-slot[hidden] { display: none !important; }
.ai-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); max-width: none; }
.ai-foot .ai-badge { margin-right: 6px; position: relative; top: -1px; }
.ai-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.ai-legal { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); max-width: none; }
.ai-status { margin: var(--sp-3) 0 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-3); }
.ai-status:empty { display: none; }
.ai-unavailable { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.ai-drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); }
.ai-drop .dz-title { font: 600 1rem/1.3 var(--font-heading); color: var(--ink); }
.ai-drop .dz-btn { pointer-events: none; }
.ai-drop .dz-hint { font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.ai-link { appearance: none; background: none; border: 0; padding: 0; font-family: var(--font-body); font-weight: 600; font-size: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ai-link:hover { color: var(--brand-hover); }
.ai-dl { margin: var(--sp-4) 0 0; display: grid; }
.ai-dl div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.ai-dl dt { color: var(--ink-3); flex: none; }
.ai-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ai-sign { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 .8125rem/1 var(--font-heading); margin-top: 1px; }
.ai-sign.is-ok { background: var(--success-bg); color: var(--success); }
.ai-sign.is-warn { background: #fff; color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand-deep); }
.ai-sign.is-off { background: var(--bg-alt); color: var(--ink-3); }
.ai-sign.is-block { background: var(--danger-bg); color: var(--danger); }

/* Repliables (summary en lien avec chevron) */
.ai-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--brand); min-height: 32px; }
.ai-details > summary::-webkit-details-marker { display: none; }
.ai-details > summary::after { content: ""; width: 18px; height: 18px; background: currentColor; transition: transform .15s; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ai-details[open] > summary::after { transform: rotate(180deg); }
.ai-details > summary:hover { color: var(--brand-hover); text-decoration: underline; }

/* F4 – Devis : zone repliable + carte d'analyse */
.ai-quote { background: var(--bg-brand); border-radius: var(--radius); }
.ai-quote > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); }
.ai-quote > summary::-webkit-details-marker { display: none; }
.ai-quote > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; background: var(--brand); transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ai-quote[open] > summary::after { transform: rotate(180deg); }
.ai-quote-title { font: 600 1rem/1.35 var(--font-heading); color: var(--ink); }
.ai-quote-sub { grid-column: 1; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); margin-top: 2px; }
.ai-quote > summary:hover .ai-quote-title { color: var(--brand-hover); }
.ai-quote-body { padding: 0 var(--sp-5) var(--sp-5); }
.ai-quote-body .dropzone { background: #fff; }
.ai-quote-card { background: #fff; border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-4); }
.ai-card-title { margin: 0; font-weight: 600; font-size: 1.0625rem; }
.ai-card-status { margin: var(--sp-1) 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
.ai-card-status .ai-badge { margin-right: 6px; position: relative; top: -1px; }
.ai-advice { margin: var(--sp-4) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.ai-warnings { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.ai-warnings li { max-width: none; }
.ai-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.ai-applied { margin: var(--sp-4) 0 0; }
.ai-quote-enrich { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ai-quote-enrich .ai-dl { margin-top: var(--sp-2); }

/* F1 – Cohérence du dossier (étape 3) */
.ai-consistency { background: var(--bg-brand); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.ai-cons-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ai-cons-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .875rem/1 var(--font-heading); color: #fff; background: var(--brand-deep); margin-top: 1px; }
.ai-cons-icon.is-warn { background: var(--brand-pale); color: var(--brand-deep); box-shadow: inset 0 0 0 2px var(--brand-deep); }
.ai-cons-title { margin: 0; font: 600 1rem/1.4 var(--font-heading); color: var(--ink); }
.ai-cons-expl { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.ai-consistency .notice { margin-top: var(--sp-3); }
.ai-consistency .ai-details { margin-top: var(--sp-3); }
.ai-cons-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.ai-cons-list li { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none; font-size: var(--fs-small); line-height: var(--lh-small); }
.ai-cons-list strong { display: block; font-weight: 600; color: var(--ink); }
.ai-cons-state { color: var(--ink-3); }
.ai-cons-list .is-point .ai-cons-state { color: var(--brand-deep); font-weight: 600; }
.ai-cons-msg { display: block; color: var(--ink-2); margin-top: 2px; font-weight: 400; }
/* Points à vérifier : seule partie mise en relief du bandeau (pas de fond d'alerte coloré, règle 2) */
.ai-cons-points { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); background: #fff; border-left: 3px solid var(--brand-deep); border-radius: var(--radius-sm, 8px); }
.ai-cons-points li { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none; font-size: var(--fs-small); line-height: var(--lh-small); }
.ai-cons-points strong { display: block; font-weight: 600; color: var(--brand-deep); }
.ai-loading { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-3); }

/* F1 – « Pourquoi ce résultat ? » (étape 4) */
.ai-why-body { margin-top: var(--sp-3); padding: var(--sp-5); background: var(--bg-alt); border-radius: var(--radius); }
.ai-why-intro { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); }
.ai-rules, .ai-change { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ai-rules li, .ai-change li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); max-width: none; }
.ai-rule-detail { color: var(--ink-3); }
.ai-why-sub { margin: var(--sp-5) 0 var(--sp-2); font: 600 .9375rem/1.3 var(--font-heading); color: var(--ink); }
.ai-change li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin: 7px 7px 0; }
.ai-why-body .link-arrow { margin-top: var(--sp-4); }

/* F6 – Factures (page Affacturage) */
.ai-invoices { max-width: 1184px; }
.ai-inv-head { max-width: 720px; margin-bottom: var(--sp-6); }
.ai-inv-head h2 { margin-bottom: var(--sp-3); }
.ai-inv-head .lead { margin: 0; }
.ai-inv-queue { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.ai-inv-queue:empty { display: none; }
.ai-inv-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--bg-alt); border-radius: var(--radius); font-size: var(--fs-small); max-width: none; }
.ai-inv-name { font-weight: 600; overflow-wrap: anywhere; }
.ai-inv-state { color: var(--ink-3); text-align: right; }
.ai-inv-queue li.is-done .ai-inv-state { color: var(--success); font-weight: 600; }
.ai-inv-queue li.is-error { background: var(--danger-bg); }
.ai-inv-queue li.is-error .ai-inv-state { color: var(--danger); font-weight: 600; }
.ai-inv-queue li.is-skip .ai-inv-state { color: var(--warning); font-weight: 600; }
.ai-inv-queue .progress { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ai-inv-queue .progress span { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.ai-inv-msg { margin-top: var(--sp-4); }
.ai-inv-msg:empty { display: none; }
.ai-inv-result:empty { display: none; }
.ai-inv-result { margin-top: var(--sp-8); }
.ai-inv-summary { margin: 0 0 var(--sp-6); max-width: 72ch; }
.ai-inv-summary p { margin: 0; }
.ai-inv-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--sp-6); align-items: start; }
/* Numéros, montants et dates sur une ligne ; le débiteur et le motif passent à la ligne pour que le tableau tienne dans son cadre */
.ai-inv-table td, .ai-inv-table th { white-space: nowrap; }
.ai-inv-table td.ai-inv-debtor { white-space: normal; min-width: 7.5rem; }
.ai-inv-table th:last-child, .ai-inv-table td:last-child { width: 9.5rem; }
.ai-inv-table td, .ai-inv-table th { padding-left: 12px; padding-right: 12px; }
.ai-inv-total { background: var(--bg-brand); border-radius: var(--radius-lg); padding: var(--sp-6); }
.ai-inv-total .label { color: var(--ink-3); }
.ai-inv-total .figure { margin: var(--sp-1) 0 var(--sp-2); display: block; }
.ai-inv-total .help { margin: 0 0 var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.ai-inv-total .btn { width: 100%; }
.ai-inv-total .ai-link { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-small); }
.ai-inv-findings-title { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--fs-h4); }
.ai-inv-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ai-inv-findings li { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: none; font-size: .9375rem; line-height: 1.5; }
.ai-level { font-weight: 600; white-space: nowrap; }
.ai-level.is-attention { color: var(--brand-deep); }
.ai-level.is-bloquant { color: var(--danger); }
.ai-level.is-info { color: var(--ink-3); }
.ai-inv-infos { margin-top: var(--sp-4); }
.ai-inv-infos .ai-inv-findings { margin-top: var(--sp-3); }
.ai-inv-questions { margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); background: var(--bg-alt); border-radius: var(--radius); }
.ai-inv-questions h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-h4); }
.ai-inv-questions ol { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font-size: .9375rem; line-height: 1.5; }
.ai-inv-questions .ai-foot { margin-top: var(--sp-3); }
.ai-inv-reason { display: block; min-width: 7.5rem; font-size: var(--fs-small); color: var(--ink-3); margin-top: 2px; white-space: normal; }

/* Le total passe sous le tableau dès que les six colonnes ne tiennent plus à côté de lui */
@media (max-width: 1100px) { .ai-inv-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .ai-quote > summary { padding: var(--sp-4); }
  .ai-quote-body { padding: 0 var(--sp-4) var(--sp-4); }
  .ai-quote-card, .ai-consistency { padding: var(--sp-4) var(--sp-5); }
  .ai-card-actions .btn { width: 100%; }
  .ai-dl div { flex-direction: column; gap: 2px; }
  .ai-dl dd { text-align: left; }
}
/* Tableau des factures en cartes compactes sous 620 px (aucun défilement horizontal) */
@media (max-width: 620px) {
  .ai-inv-table-wrap { border: 0; overflow: visible; }
  .ai-inv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ai-inv-table, .ai-inv-table tbody { display: block; width: 100%; }
  .ai-inv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
  .ai-inv-table tbody tr:hover { background: transparent; }
  .ai-inv-table td { display: block; padding: 0 !important; border: 0; white-space: normal; text-align: left; grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-3); }
  .ai-inv-table td:nth-child(1) { grid-column: 1; font-weight: 600; color: var(--ink); font-size: .9375rem; }
  .ai-inv-table td:nth-child(6) { grid-column: 2; grid-row: 1; justify-self: end; }
  .ai-inv-table td:nth-child(2) { color: var(--ink); min-width: 0; }
  .ai-inv-table td:nth-child(n+3):nth-child(-n+5)::before { content: attr(data-label) " : "; }
  .ai-inv-table td.num { text-align: left; }
  .ai-inv-table td:last-child { width: auto; }
}