/* Oqora CRM · section Setting (lot S), depuis css/espace.css (outil de setting du 01/10), spécification A.6.3.
   Toutes les règles sont enfermées dans .st (racine de la section, et du panneau des statuts) ; aucune règle globale
   (ni *, ni body, ni a, ni [hidden]) : les jetons de couleur sont ceux de crm.css, rien n'est redéfini ici.
   Les classes portent le préfixe st- : aucune n'entre en conflit avec crm.css (btn, pastille, toast, etc.). */

.st{ display:block; max-width:820px; margin:0 auto; color:var(--ink); font-size:15px; line-height:1.45; }
.st .st-app{ display:flex; flex-direction:column; gap:16px; }
.st button, .st input, .st select, .st textarea{ font:inherit; color:inherit; }
.st a{ color:var(--bleu); }
.st :focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.st h2{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.st h3{ margin:6px 2px 0; font-size:16px; font-weight:750; display:flex; align-items:center; gap:8px; }
.st h4{ margin:0; font-size:16px; font-weight:750; }

/* Les 4 onglets (menu en haut, choix de Jules du 01/10) */
.st .st-onglets{ display:flex; gap:4px; background:var(--surface); border-radius:999px; padding:4px; margin-bottom:16px;
  box-shadow:inset 0 0 0 1px var(--rule); overflow-x:auto; scrollbar-width:none; }
.st .st-onglets::-webkit-scrollbar{ display:none; }
.st .st-onglet{ flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px;
  padding:9px 12px; min-height:40px; background:transparent; color:var(--ink-soft); font-weight:650; font-size:14.5px;
  cursor:pointer; white-space:nowrap; }
.st .st-onglet:hover{ color:var(--ink); }
.st .st-onglet[aria-current="page"], .st .st-onglet[aria-selected="true"]{ background:var(--navy-2); color:#fff; }
.st .st-onglet[aria-current="page"] .st-pastille{ background:rgba(255,255,255,.18); color:#fff; }
.st .st-onglets-petits{ margin-bottom:0; }
.st .st-pastille{ display:inline-flex; min-width:24px; height:22px; padding:0 7px; align-items:center; justify-content:center;
  border-radius:99px; background:var(--bleu-tint); color:var(--bleu-dark); font-size:12.5px; font-weight:700;
  font-variant-numeric:tabular-nums; }

/* En-tête d'une vue */
.st .st-entete{ display:flex; flex-direction:column; gap:6px; }
.st .st-entete-ligne{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.st .st-sous{ color:var(--ink-faint); font-size:13.5px; }
.st .st-retour{ align-self:flex-start; display:inline-flex; align-items:center; gap:4px; border:0; background:none;
  padding:4px 0; min-height:36px; color:var(--bleu); font-weight:650; font-size:15px; cursor:pointer; }
.st .st-retour svg, .st .st-chevron svg, .st .st-suite-bouton svg, .st .st-fleche svg{ width:18px; height:18px; }

/* Boutons (copie de .btn de l'outil de setting, renommés pour ne pas croiser ceux de crm.css) */
.st .st-btn{ border:0; border-radius:999px; padding:10px 16px; min-height:40px; font-weight:650; cursor:pointer;
  white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.st .st-btn-bleu{ background:var(--bleu); color:#fff; }
.st .st-btn-bleu:hover{ background:var(--bleu-dark); }
.st .st-btn-clair{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-btn-clair:hover{ box-shadow:inset 0 0 0 1px var(--ink-faint); }
.st .st-btn[disabled]{ opacity:.55; cursor:default; }
.st .st-btn-petit{ padding:7px 12px; font-size:13.5px; }
.st .st-btn[aria-pressed="true"]{ background:var(--navy-2); color:#fff; box-shadow:none; }
.st .st-lien-texte, .st .st-lien{ border:0; background:none; padding:0; color:var(--bleu); font:inherit; font-weight:650;
  cursor:pointer; text-align:left; }
.st .st-lien-texte{ text-decoration:underline; }

/* Compteur et étapes de « Messages du jour » */
.st .st-compteur{ background:var(--surface); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-compteur .st-ligne{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:var(--ink-soft);
  font-size:14px; }
.st .st-compteur .st-ligne b{ color:var(--ink); font-size:20px; font-variant-numeric:tabular-nums; }
.st .st-barre{ height:8px; border-radius:99px; background:var(--bande); overflow:hidden; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-barre > i{ display:block; height:100%; border-radius:99px; background:var(--bleu); }
.st .st-etapes{ display:flex; flex-direction:column; gap:10px; }
.st .st-etape{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:0; cursor:pointer;
  background:var(--surface); border-radius:16px; padding:16px; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-etape:hover{ box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-etape.st-ici{ box-shadow:inset 0 0 0 2px var(--bleu); }
.st .st-num{ flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bleu-tint); color:var(--bleu-dark); font-weight:800; font-size:16px; }
.st .st-num svg{ width:18px; height:18px; }
.st .st-ici .st-num{ background:var(--bleu); color:#fff; }
.st .st-faite .st-num{ background:var(--vert-tint); color:var(--vert); }
.st .st-corps{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.st .st-etape .st-titre{ font-weight:750; font-size:17px; color:var(--ink); }
.st .st-detail{ color:var(--ink-soft); font-size:14px; }
.st .st-faite .st-titre{ color:var(--ink-soft); }
.st .st-chevron{ flex:none; color:var(--ink-faint); display:flex; }

/* Résumé du test en cours */
.st .st-test-resume{ display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; border:0; cursor:pointer;
  background:var(--surface); border-radius:16px; padding:14px 16px; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-test-resume:hover{ box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-test-resume .st-titre{ font-weight:750; font-size:15px; color:var(--ink); }
.st .st-test-resume .st-detail{ color:var(--ink-faint); font-size:13px; }
.st .st-ligne-test{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:10px; align-items:center;
  font-size:13.5px; color:var(--ink); }
.st .st-nom-test{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st .st-val{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:650; white-space:nowrap; }
.st .st-fond{ height:8px; background:var(--bande); border-radius:99px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-fond i{ display:block; height:100%; background:var(--bleu); border-radius:99px; }
.st .st-progression{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; font-size:13px; }

/* Cartes des gérantes */
.st .st-aide{ margin:0 2px; color:var(--ink-faint); font-size:13px; }
.st .st-vide{ background:var(--surface); border-radius:16px; padding:16px; color:var(--ink-faint); font-size:14px; }
.st .st-alerte{ background:var(--ambre-tint); color:var(--ambre); border-radius:10px; padding:10px 12px; font-size:13.5px; }
.st .st-alerte-petite{ padding:6px 10px; font-size:12.5px; font-weight:650; }
.st .st-carte{ background:var(--surface); border-radius:16px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px;
  box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-carte + .st-carte{ margin-top:10px; }
.st .st-carte.st-vue{ opacity:.55; }
.st .st-carte.st-vue .st-btn-bleu{ background:var(--ink-faint); }
.st .st-haut{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.st .st-qui{ min-width:0; }
.st .st-pseudo{ font-weight:750; font-size:15.5px; overflow-wrap:anywhere; color:var(--ink); }
.st button.st-pseudo{ color:var(--ink); }
.st .st-nom{ color:var(--ink-soft); font-size:13.5px; overflow-wrap:anywhere; }
.st .st-note{ color:var(--ink-faint); font-size:13px; overflow-wrap:anywhere; }
.st .st-hors{ color:var(--ambre); font-weight:650; }
.st .st-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.st .st-etiq{ display:inline-flex; align-items:center; border-radius:99px; padding:3px 9px; font-size:12px; font-weight:700;
  white-space:nowrap; }
.st .st-e-bleu{ background:var(--bleu-tint); color:var(--bleu-dark); }
.st .st-e-vert{ background:var(--vert-tint); color:var(--vert); }
.st .st-e-rouge{ background:var(--rouge-tint); color:var(--rouge); }
.st .st-e-ambre{ background:var(--ambre-tint); color:var(--ambre); }
.st .st-e-violet{ background:var(--violet-tint); color:var(--violet); }
.st .st-e-gris{ background:var(--bande); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-message{ background:var(--bande); border-radius:10px; padding:10px 12px; font-size:14px; line-height:1.5;
  overflow-wrap:anywhere; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st mark{ background:var(--ambre-tint); color:var(--ambre); border-radius:4px; padding:0 3px; }
.st .st-a-envoyer{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); }
.st .st-repli{ display:flex; flex-direction:column; gap:10px; }
.st .st-repli > summary{ cursor:pointer; font-weight:750; font-size:16px; padding:8px 2px; min-height:40px; }
.st .st-choix-liste{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:14px; font-weight:650; }
.st .st-choix-liste select{ flex:1; min-width:0; border:0; border-radius:12px; padding:10px 12px; min-height:40px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-presse-papier{ position:fixed; opacity:0; pointer-events:none; }

/* Les statuts (panneau de droite et barre au-dessus de la conversation) */
.st.st-statuts-panneau{ display:flex; flex-direction:column; gap:12px; padding-bottom:12px; }
.st .st-statuts{ display:flex; flex-wrap:wrap; gap:8px; }
.st .st-statut-choix{ border:0; border-radius:99px; padding:9px 14px; min-height:40px; font-size:14px; font-weight:650; cursor:pointer;
  background:var(--bande); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-statut-choix[aria-pressed="true"]{ background:var(--navy-2); color:#fff; box-shadow:none; }

/* Les tests */
.st .st-section{ display:flex; flex-direction:column; gap:10px; }
.st .st-conseil{ background:var(--bleu-tint); color:var(--navy-1); border-radius:16px; padding:14px 16px; display:flex;
  flex-direction:column; gap:4px; font-size:14.5px; }
.st .st-conseil b{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--bleu-dark); }
.st .st-details-message summary{ cursor:pointer; color:var(--bleu); font-weight:650; font-size:13.5px; }
.st .st-details-message .st-message{ margin-top:8px; }
.st .st-details-message .st-note{ margin-top:6px; }
.st .st-form-version{ background:var(--surface); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:6px;
  box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-form-version label{ font-weight:650; font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
.st .st-form-version input, .st .st-form-version select, .st .st-form-version textarea{ border:0; border-radius:10px;
  padding:10px 12px; background:var(--bande); box-shadow:inset 0 0 0 1px var(--rule); resize:vertical; width:100%; }
.st .st-form-version .st-btn{ align-self:flex-start; margin-top:8px; }
.st .st-regles{ background:var(--surface); border-radius:16px; padding:6px 16px; box-shadow:inset 0 0 0 1px var(--rule-soft);
  font-size:14px; color:var(--ink-soft); }
.st .st-regles p{ margin:8px 0; }
.st .st-liste-simple{ background:var(--surface); border-radius:16px; box-shadow:inset 0 0 0 1px var(--rule-soft); overflow:hidden; }
.st .st-ligne-simple{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--rule-soft); color:var(--ink); text-decoration:none; font-size:14px; }
.st .st-ligne-simple:last-child{ border-bottom:0; }
.st a.st-ligne-simple:hover{ background:var(--bande); }
.st .st-droite{ color:var(--ink-faint); white-space:nowrap; font-size:13px; }

/* Les templates */
.st .st-relances{ margin:0; padding-left:24px; display:flex; flex-direction:column; gap:10px; }
.st .st-relances .st-note{ margin-top:4px; }
.st .st-source{ color:var(--ink-faint); font-size:12.5px; margin-top:4px; font-style:italic; }
.st .st-document{ background:var(--surface); border-radius:16px; padding:18px clamp(14px,3vw,24px);
  box-shadow:inset 0 0 0 1px var(--rule-soft); font-size:14.5px; line-height:1.6; }
.st .st-document h4{ margin:18px 0 6px; }
.st .st-document p{ margin:0 0 10px; }
.st .st-script-sommaire{ display:flex; flex-wrap:wrap; gap:6px; }
.st .st-lien-section{ font-size:13.5px; font-weight:650; color:var(--navy-1); background:var(--surface); border:0; cursor:pointer;
  border-radius:99px; padding:6px 12px; min-height:36px; box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-script{ background:var(--surface); border-radius:16px; padding:18px clamp(14px,3vw,22px) 20px;
  box-shadow:inset 0 0 0 1px var(--rule-soft); display:flex; flex-direction:column; gap:10px; scroll-margin-top:16px; }
.st .st-script h4{ font-size:18px; font-weight:800; }
.st .st-script-sous{ margin:0; color:var(--ink-soft); font-size:14px; }
.st .st-script-etape{ margin:12px 0 0; font-size:13px; font-weight:750; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); }
.st .st-script-note{ margin:0; color:var(--ink-soft); font-size:14px; font-style:italic; }
.st .st-bulle{ align-self:flex-start; max-width:92%; background:var(--bleu-tint); color:var(--navy-1); border-radius:16px 16px 16px 4px;
  padding:10px 14px; font-size:14.5px; line-height:1.5; overflow-wrap:anywhere; }
.st .st-script-reponse{ align-self:flex-end; font-size:12.5px; font-weight:700; color:var(--ink-faint); background:var(--bande);
  border-radius:99px; padding:4px 12px; box-shadow:inset 0 0 0 1px var(--rule); }
.st .st-script-delai{ align-self:center; font-size:12.5px; font-weight:700; color:var(--ambre); background:var(--ambre-tint);
  border-radius:99px; padding:4px 12px; }
.st .st-script-liste{ margin:0; padding-left:22px; font-size:14.5px; display:flex; flex-direction:column; gap:4px; }
.st .st-script-cas{ display:flex; flex-direction:column; gap:10px; border-left:3px solid var(--rule); padding:4px 0 4px 14px;
  margin-top:6px; }
.st .st-script-cas.st-cas-oui{ border-left-color:var(--vert); }
.st .st-script-cas.st-cas-non{ border-left-color:var(--ink-faint); }
.st .st-script-cas-titre{ font-weight:750; font-size:14.5px; color:var(--ink); }
.st .st-suite-bouton{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:6px 10px;
  min-height:36px; border:0; border-radius:8px; background:var(--bande); color:var(--ink); font-size:14px; font-weight:700;
  cursor:pointer; }
.st .st-suite-bouton:hover{ background:var(--rule-soft); }
/* La suite d'un premier message, au format du template de Matisse */
.st .st-matisse{ background:#fff; color:#000; border:1px solid #000; padding:10px 12px; font-family:Arial, Helvetica, sans-serif;
  font-size:14.5px; line-height:1.35; display:flex; flex-direction:column; gap:12px; }
.st .st-matisse p{ margin:0; }
.st .st-matisse mark{ background:#ffe599; color:#000; border-radius:0; padding:0; }
.st .st-m-reponse{ color:#9900ff; }
.st .st-m-delai{ color:#0b5394; }
.st .st-m-note{ color:#0b5394; font-style:italic; }
.st .st-m-cas{ display:flex; flex-direction:column; gap:12px; padding-left:14px; }
.st .st-m-cas-titre.st-m-oui{ color:#38761d; }
.st .st-m-cas-titre.st-m-non{ color:#990000; }

/* Les chiffres : même barre de période que l'outil des clientes */
.st .st-periode{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--surface); border-radius:16px;
  padding:10px; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-periode .st-periode-modes{ flex:none; background:var(--bande); box-shadow:none; margin:0; }
.st .st-periode .st-periode-modes .st-onglet{ flex:none; padding:8px 12px; }
.st .st-periode-nav{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.st .st-fleche{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--bande); color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.st .st-fleche:disabled{ opacity:.35; cursor:default; }
.st .st-periode-libelle{ display:flex; align-items:center; gap:8px; min-width:0; padding:0 4px; }
.st .st-periode-libelle b{ font-size:15.5px; font-weight:750; white-space:nowrap; }
.st .st-periode-encours{ font-size:12px; font-weight:700; color:var(--bleu); background:var(--bleu-tint); border-radius:99px;
  padding:3px 10px; white-space:nowrap; }
.st .st-periode-retour{ white-space:nowrap; }
.st .st-periode-libre{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1; }
.st .st-periode-libre label{ display:flex; align-items:center; gap:8px; font-weight:650; font-size:14px; color:var(--ink-soft); }
.st .st-periode-libre input[type="date"]{ min-height:40px; border:0; box-shadow:inset 0 0 0 1px var(--rule); border-radius:11px;
  padding:0 12px; font-size:14px; color:var(--ink); background:var(--surface); cursor:pointer; caret-color:transparent; }
.st .st-tuiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.st .st-tuile{ background:var(--surface); border-radius:16px; padding:14px; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-tuile .st-val{ font-size:28px; font-weight:800; line-height:1.1; color:var(--ink); }
.st .st-lib{ color:var(--ink-soft); font-size:13px; }
.st .st-plus{ color:var(--ink-faint); font-size:12.5px; margin-top:2px; }
.st .st-sous-titre{ margin:10px 2px 0; font-size:16px; font-weight:750; }
.st .st-table-wrap{ overflow-x:auto; background:var(--surface); border-radius:16px; box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st table{ border-collapse:collapse; width:100%; min-width:520px; font-variant-numeric:tabular-nums; font-size:14px; }
.st th, .st td{ padding:9px 10px; text-align:right; border-bottom:1px solid var(--rule-soft); white-space:nowrap; }
.st th:first-child, .st td:first-child{ text-align:left; }
.st th{ font-size:12px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.st tr.st-auj td{ font-weight:750; }
.st tr.st-plus-jours td{ text-align:center; padding:12px; }
.st .st-barres{ background:var(--surface); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:7px;
  box-shadow:inset 0 0 0 1px var(--rule-soft); }
.st .st-barres .st-ligne{ display:grid; grid-template-columns:92px 1fr 34px; gap:10px; align-items:center; font-size:13.5px; }
.st .st-barres .st-ligne span:last-child{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.st .st-barres .st-fond{ height:10px; }
.st .st-qui-liste{ background:var(--surface); border-radius:16px; box-shadow:inset 0 0 0 1px var(--rule-soft); overflow:hidden; }
.st .st-qui-liste summary{ padding:12px 14px; cursor:pointer; font-weight:700; display:flex; align-items:center; gap:8px; }
.st .st-qui-liste .st-liste-simple{ box-shadow:none; border-radius:0; border-top:1px solid var(--rule-soft); }

@media (prefers-reduced-motion:no-preference){
  .st .st-barre > i, .st .st-fond i{ transition:width .4s ease; }
}

/* Téléphone : une colonne, boutons de 44 px de haut au moins, aucune barre de défilement horizontale */
@media (max-width:700px){
  .st .st-periode{ flex-direction:column; align-items:stretch; }
  .st .st-periode .st-periode-modes .st-onglet{ flex:1; padding:8px 6px; }
  .st .st-periode-nav{ flex-wrap:wrap; }
  .st .st-periode-libelle{ flex:1; justify-content:center; padding:0; }
  .st .st-periode-libelle b{ white-space:normal; text-align:center; }
  .st .st-periode-retour{ width:100%; }
  .st .st-periode-libre label{ flex:1 1 140px; }
  .st .st-periode-libre input[type="date"]{ flex:1; min-width:0; }
}
@media (max-width:639px){
  .st .st-onglet, .st .st-btn, .st .st-btn-petit, .st .st-retour, .st .st-statut-choix, .st .st-fleche, .st .st-suite-bouton,
  .st .st-lien-section, .st .st-choix-liste select, .st .st-repli > summary, .st .st-qui-liste summary, .st .st-lien-texte,
  .st button.st-pseudo, .st .st-details-message summary, .st .st-periode-libre input[type="date"], .st .st-ligne-simple,
  .st .st-form-version input, .st .st-form-version select, .st .st-statut-choix{ min-height:44px; }
  .st .st-aide a, .st .st-lien-texte{ display:inline-flex; align-items:center; min-height:44px; }
  .st .st-fleche{ width:44px; height:44px; }
  .st .st-actions .st-btn{ flex:1 1 auto; }
  .st .st-onglets{ border-radius:16px; flex-wrap:wrap; }
  .st .st-onglet{ flex:1 1 40%; white-space:normal; text-align:center; }
  .st .st-ligne-test{ grid-template-columns:minmax(0,1fr) auto; }
  .st .st-ligne-test .st-fond{ grid-column:1 / span 2; grid-row:2; }
  .st .st-entete-ligne{ flex-wrap:wrap; }
}