/* Oqora CRM · styles de la section Automatisations (23/10/2026).
   Toutes les règles sont préfixées par la classe racine de la section (.s-auto) ; seule crm.css (lot 0) définit des
   jetons :root et des règles globales (contrat H.2). Pensé d'abord pour le téléphone de Jules (375 px). */
.s-auto{ display:block; max-width:860px; }
.s-auto .sa-chargement{ padding:var(--sp-6) 0; }
.s-auto p{ margin:0; }

/* Liste : un bloc par compte, une ligne par automatisation */
.s-auto .sa-liste{ display:flex; flex-direction:column; gap:var(--sp-5); }
.s-auto .sa-compte{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-auto .sa-compte h2{ margin:0; }
.s-auto .sa-groupes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.s-auto .sa-groupe{ width:100%; min-height:var(--tap); display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; text-align:left; cursor:pointer; border:0; color:var(--ink);
  background:var(--bande); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font:inherit; }
.s-auto .sa-groupe:hover{ background:var(--rule-soft); }
.s-auto .sa-groupe:focus-visible{ box-shadow:0 0 0 3px var(--bleu-ring); }
.s-auto .sa-groupe-nom{ font-weight:650; min-width:0; flex:1 1 12em; overflow-wrap:anywhere; }

/* Dossiers (un par moment du parcours), fermés au départ */
.s-auto .sa-dossiers{ display:flex; flex-direction:column; gap:var(--sp-2); }
.s-auto .sa-dossier{ border:1px solid var(--rule-soft); border-radius:var(--r-sm); background:var(--surface); }
.s-auto .sa-dossier-titre{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); font-weight:750; color:var(--ink); list-style:none; }
.s-auto .sa-dossier-titre::-webkit-details-marker{ display:none; }
.s-auto .sa-dossier-titre::before{ content:"\25B8"; color:var(--ink-soft); flex:none; transition:transform .15s; }
.s-auto .sa-dossier[open] > .sa-dossier-titre::before{ transform:rotate(90deg); }
.s-auto .sa-dossier-titre:focus-visible{ box-shadow:0 0 0 3px var(--bleu-ring); border-radius:var(--r-sm); }
.s-auto .sa-dossier-nom{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.s-auto .sa-dossier-nombre{ flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft);
  background:var(--rule-soft); border-radius:var(--r-full); padding:2px 9px; }
.s-auto .sa-dossier > .sa-groupes{ padding:0 var(--sp-3) var(--sp-3); }

/* États colorés */
.s-auto .sa-etat{ display:inline-flex; align-items:center; flex:none; border-radius:var(--r-full); padding:3px 10px;
  font-size:var(--fs-xs); font-weight:700; max-width:100%; white-space:normal; }
.s-auto .sa-etat--active{ background:var(--vert-tint); color:var(--vert); }
.s-auto .sa-etat--ghl{ background:var(--bleu-tint); color:var(--bleu-dark); }
.s-auto .sa-etat--pause{ background:var(--rule-soft); color:var(--ink-soft); }

/* Détail */
.s-auto .sa-detail{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.s-auto .sa-tete{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
.s-auto .sa-tete h2{ overflow-wrap:anywhere; }
.s-auto .sa-compte-nom{ font-size:var(--fs-sm); font-weight:650; }
.s-auto .sa-bloc{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-auto .sa-bloc-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-3);
  flex-wrap:wrap; }
.s-auto .sa-bloc-tete h3{ font-size:var(--fs-md); font-weight:750; overflow-wrap:anywhere; }
.s-auto .sa-maj{ font-size:var(--fs-sm); }
.s-auto .sa-bloc--ghl{ background:var(--bande); }
.s-auto .sa-bloc-resume{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; font-weight:700;
  color:var(--ink); list-style-position:inside; overflow-wrap:anywhere; }
.s-auto .sa-bloc-corps{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-auto details.sa-bloc[open] .sa-bloc-corps{ margin-top:var(--sp-2); }
.s-auto .sa-description{ color:var(--ink-soft); overflow-wrap:anywhere; }
.s-auto .sa-petit-titre{ font-size:var(--fs-xs); font-weight:750; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); }
.s-auto .sa-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.s-auto .sa-note{ background:var(--ambre-tint); color:var(--ambre); border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3); font-weight:600; }
.s-auto .sa-ok{ background:var(--vert-tint); color:var(--vert); border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3); font-weight:650; }
.s-auto .sa-erreur{ background:var(--rouge-tint); color:var(--rouge); border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3); font-weight:650; }

/* Déclencheur, en tête comme dans GHL */
.s-auto .sa-declencheur{ background:var(--bleu-tint); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-1); }
.s-auto .sa-phrase{ font-weight:650; color:var(--navy-1); overflow-wrap:anywhere; }

/* Étapes : cartes de haut en bas reliées par un trait */
.s-auto .sa-etapes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; min-width:0; }
.s-auto .sa-etape{ position:relative; min-width:0; }
.s-auto .sa-etape + .sa-etape{ padding-top:var(--sp-4); }
.s-auto .sa-etape + .sa-etape::before{ content:""; position:absolute; left:22px; top:0; height:var(--sp-4); width:2px;
  background:var(--rule); }
.s-auto .sa-etape-carte{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; box-shadow:var(--sh-1); }
.s-auto .sa-etape-tete{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.s-auto .sa-num{ flex:none; min-width:28px; height:24px; padding:0 6px; border-radius:var(--r-full);
  background:var(--navy-1); color:#fff; font-size:var(--fs-xs); font-weight:750; display:inline-flex;
  align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.s-auto .sa-type{ font-weight:750; color:var(--ink); overflow-wrap:anywhere; min-width:0; }
.s-auto .sa-badge{ background:var(--ambre-tint); color:var(--ambre); border-radius:var(--r-xs);
  padding:var(--sp-1) var(--sp-2); font-size:var(--fs-sm); font-weight:700; }
.s-auto .sa-lignes{ margin:0; display:flex; flex-direction:column; gap:2px; }
.s-auto .sa-ligne{ display:flex; flex-wrap:wrap; gap:0 var(--sp-2); font-size:var(--fs-sm); min-width:0; }
.s-auto .sa-ligne dt{ color:var(--ink-faint); font-weight:600; }
.s-auto .sa-ligne dt::after{ content:" :"; }
.s-auto .sa-ligne dd{ margin:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere; min-width:0; }
.s-auto .sa-texte{ background:var(--bande); border-radius:var(--r-xs); padding:var(--sp-2) var(--sp-3); min-width:0; }
.s-auto .sa-texte--service{ background:var(--ambre-tint); }
.s-auto .sa-texte-nom{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-faint); }
.s-auto .sa-texte-corps{ white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.s-auto .sa-autres{ list-style:none; margin:0; padding:0; font-size:var(--fs-xs); color:var(--ink-faint);
  display:flex; flex-direction:column; gap:1px; }
.s-auto .sa-autres li{ overflow-wrap:anywhere; white-space:pre-wrap; }
.s-auto .sa-autre-cle{ font-weight:650; }

/* Branches (conditions, attente de réponse) : indentées, avec leur titre */
.s-auto .sa-branches{ display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-3) 0 0 var(--sp-3);
  padding-left:var(--sp-3); border-left:2px solid var(--rule); min-width:0; }
.s-auto .sa-branche{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.s-auto .sa-branche-titre{ display:flex; align-items:center; gap:var(--sp-2); font-weight:700; color:var(--violet);
  overflow-wrap:anywhere; min-width:0; }
.s-auto .sa-lettre{ flex:none; width:22px; height:22px; border-radius:var(--r-full); background:var(--violet-tint);
  color:var(--violet); font-size:var(--fs-xs); display:inline-flex; align-items:center; justify-content:center; }
.s-auto .sa-vide{ font-size:var(--fs-sm); }

/* Modifier avec l'IA */
.s-auto .sa-edition{ display:flex; flex-direction:column; gap:var(--sp-2); background:var(--bleu-tint);
  border-radius:var(--r-sm); padding:var(--sp-3); min-width:0; }
.s-auto .sa-demande{ width:100%; min-height:110px; resize:vertical; border:1px solid var(--rule); border-radius:var(--r-xs);
  padding:var(--sp-2) var(--sp-3); font-size:16px; line-height:1.45; color:var(--ink); background:var(--surface); }
.s-auto .sa-demande:focus{ border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
.s-auto .sa-aide{ font-size:var(--fs-sm); }
.s-auto .sa-resume{ font-weight:650; color:var(--ink); overflow-wrap:anywhere; }
.s-auto .sa-changements{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-auto .sa-changement{ background:var(--surface); border-radius:var(--r-xs); padding:var(--sp-2) var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.s-auto .sa-ch-titre{ font-weight:700; font-size:var(--fs-sm); overflow-wrap:anywhere; }
.s-auto .sa-avant, .s-auto .sa-apres{ border-radius:var(--r-xs); padding:var(--sp-2) var(--sp-3); min-width:0; }
.s-auto .sa-avant{ background:var(--rouge-tint); }
.s-auto .sa-avant .sa-ch-texte{ text-decoration:line-through; text-decoration-color:rgba(216,55,44,.45); color:#7a2a24; }
.s-auto .sa-apres{ background:var(--vert-tint); }
.s-auto .sa-apres .sa-ch-texte{ color:#0f5a3c; }
.s-auto .sa-ch-etiquette{ display:block; font-size:var(--fs-xs); font-weight:750; color:var(--ink-faint); }
.s-auto .sa-ch-texte{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* Historique */
.s-auto .sa-historique{ display:flex; flex-direction:column; gap:var(--sp-3); background:var(--bande);
  border-radius:var(--r-sm); padding:var(--sp-3); min-width:0; }
.s-auto .sa-version{ display:flex; flex-direction:column; gap:var(--sp-2); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--rule-soft); min-width:0; }
.s-auto .sa-version:last-child{ border-bottom:0; padding-bottom:0; }
.s-auto .sa-version-titre{ font-weight:700; overflow-wrap:anywhere; }
.s-auto .sa-version-demande{ font-size:var(--fs-sm); overflow-wrap:anywhere; }
.s-auto .sa-plie > summary{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; font-weight:650;
  color:var(--bleu); list-style-position:inside; }

/* Téléphone : rien ne déborde, boutons pleine largeur */
@media (max-width:640px){
  .s-auto .card{ padding:var(--sp-4); }
  .s-auto .sa-actions .btn{ flex:1 1 100%; white-space:normal; }
  .s-auto .sa-etape-carte{ padding:var(--sp-2) var(--sp-3); }
  .s-auto .sa-branches{ margin-left:var(--sp-1); padding-left:var(--sp-2); }
}

/* Aperçu du 24/10 : la phrase du haut, « Les messages » en cartes, le détail étape par étape replié */
.s-auto .sa-resume-haut{ color:var(--ink); overflow-wrap:anywhere; margin-top:var(--sp-1); }
.s-auto .sa-messages{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-auto .sa-messages h3{ font-size:var(--fs-md); font-weight:750; }
.s-auto .sa-messages-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.s-auto .sa-message{ background:var(--bande); border-radius:var(--r-sm); padding:var(--sp-3); display:flex;
  flex-direction:column; gap:var(--sp-2); min-width:0; border-left:3px solid var(--bleu); }
.s-auto .sa-message-tete{ font-weight:750; color:var(--navy-1); overflow-wrap:anywhere; }
.s-auto .sa-message-objet{ font-weight:650; color:var(--ink); overflow-wrap:anywhere; }
.s-auto .sa-message-etiquette{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-faint); margin-right:4px; }
.s-auto .sa-message-texte{ white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.s-auto .sa-tout{ display:flex; flex-direction:column; gap:var(--sp-4); }
.s-auto .sa-tout-titre{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; padding:0 var(--sp-4);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1); font-weight:700; color:var(--bleu);
  list-style-position:inside; }
.s-auto .sa-tout-corps{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-4); min-width:0; }