/* QUALITE24 — espace client, rubrique « Assistant » (assistant à règles + questions-réponses de l’équipe).
   Style Apple du site : police système SF, rouge #9e1022, texte #1d1d1f, gris #6e6e73, fond #f7f5f0, cartes blanches très arrondies sans bordure,
   boutons pastille, mobile d’abord (iPhone 375 px) puis ordinateur. Toutes les classes commencent par « as- » (aucun conflit avec les autres feuilles).
   Pas de style en ligne (CSP style-src 'self'). Les règles sont préfixées par .as-racine pour passer devant les styles globaux du thème
   (h2/h3 en grand, p et li gris, .block p en !important) : l’assistant n’utilise donc que des <div>, <span>, <h3>, <ul>, <button>. */

.as-racine {
  --as-rouge: #9e1022; --as-rouge-fonce: #7f0c1b; --as-encre: #1d1d1f; --as-gris: #6e6e73; --as-gris-fort: #515154;
  --as-fond: #f7f5f0; --as-creux: #ebe7df; --as-champ: #f1eee8; --as-carte: #fff; --as-vert: #1f6b3a;
  --as-ombre: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
  --as-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--as-encre); font: 400 16px/1.5 var(--as-police); -webkit-text-size-adjust: 100%; text-align: left;
}
.as-racine *, .as-racine *::before, .as-racine *::after { box-sizing: border-box; }
.as-racine [hidden] { display: none !important; }
.as-racine button, .as-racine input, .as-racine select, .as-racine textarea { font-family: var(--as-police); color: inherit; margin: 0; }
.as-racine button { -webkit-tap-highlight-color: transparent; }
.as-racine a { color: inherit; }
.as-racine li { margin: 0; color: inherit; }

/* Texte réservé aux lecteurs d’écran */
.as-racine .as-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Focus toujours visible */
.as-racine :focus-visible { outline: 3px solid var(--as-rouge); outline-offset: 2px; }
.as-racine .as-btn:focus-visible { outline-color: var(--as-encre); }

/* ── En-tête : contrôle segmenté « Assistant / Questions » ─────────────────────────── */
.as-racine .as-entete { display: flex; justify-content: center; margin: 0 0 16px; }
.as-racine .as-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; max-width: 440px; padding: 4px; border-radius: 999px; background: var(--as-creux); }
.as-racine .as-seg { min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--as-gris-fort); font-size: 16px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; }
.as-racine .as-seg[aria-selected="true"] { background: #fff; color: var(--as-encre); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 1px 1px rgba(0, 0, 0, .05); }
.as-racine .as-seg:not([aria-selected="true"]):hover { color: var(--as-encre); }

/* ── Cartes ──────────────────────────────────────────────────────────────────────── */
.as-racine .as-carte { margin: 0 0 16px; padding: 18px 16px; border-radius: 24px; background: var(--as-carte); box-shadow: var(--as-ombre); }
.as-racine .as-h { margin: 0; font: 700 21px/1.2 var(--as-police); letter-spacing: -.02em; color: var(--as-encre); text-wrap: balance; }
.as-racine .as-sous { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--as-gris); }
.as-racine .as-note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--as-gris); }
.as-racine .as-etiquette { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--as-gris); }

/* ── Assistant : en-tête de la carte ─────────────────────────────────────────────── */
.as-racine .as-chat-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.as-racine .as-chat-titres { min-width: 0; flex: 1; }
.as-racine .as-chat-titres .as-h { font-size: 19px; }
.as-racine .as-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--as-rouge); color: #fff; font: 700 15px/32px var(--as-police); text-align: center; }
.as-racine .as-avatar-grand { width: 44px; height: 44px; font-size: 20px; line-height: 44px; }
.as-racine .as-lien { flex: none; min-height: 44px; padding: 8px 6px; border: 0; background: none; color: var(--as-rouge); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Fil de discussion ───────────────────────────────────────────────────────────── */
.as-racine .as-fil {
  position: relative; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  height: clamp(320px, 54vh, 560px); height: clamp(320px, 54dvh, 560px);
  padding: 14px 12px; border-radius: 20px; background: #f4f2ed;
}
.as-racine .as-ligne { display: flex; flex: none; gap: 8px; max-width: 94%; }
.as-racine .as-ligne-bot { align-self: flex-start; }
.as-racine .as-ligne-moi { align-self: flex-end; max-width: 88%; }
.as-racine .as-contenu { display: grid; gap: 10px; min-width: 0; }
.as-racine .as-bulle { padding: 11px 15px; border-radius: 20px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.as-racine .as-ligne-bot .as-bulle { background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
.as-racine .as-ligne-moi .as-bulle { background: var(--as-rouge); color: #fff; border-bottom-right-radius: 6px; }
.as-racine .as-par { margin: 0; color: inherit; }
.as-racine .as-par + .as-par { margin-top: 8px; }
.as-racine .as-puce { position: relative; padding-left: 16px; }
.as-racine .as-puce::before { content: "\2022"; content: "\2022" / ""; position: absolute; left: 3px; top: 0; }
.as-racine .as-puce + .as-puce { margin-top: 4px; }
.as-racine .as-bulle-titre { margin: 0 0 6px; font-weight: 700; letter-spacing: -.01em; color: var(--as-encre); }

/* Indicateur « l’assistant écrit » */
.as-racine .as-ecrit .as-bulle { display: flex; align-items: center; gap: 5px; padding: 17px 16px; }
.as-racine .as-ecrit i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: as-saut 1s infinite ease-in-out; }
.as-racine .as-ecrit i:nth-child(2) { animation-delay: .15s; }
.as-racine .as-ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes as-saut { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── Pastilles (sujets, questions voisines) ──────────────────────────────────────── */
.as-racine .as-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.as-racine .as-pastille { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(158, 16, 34, .09); color: #8a0e1d; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .15s, transform .15s; }
.as-racine .as-pastille:hover { background: rgba(158, 16, 34, .17); }
.as-racine .as-pastille:active { transform: scale(.97); }
.as-racine .as-pastille-neutre { background: var(--as-creux); color: var(--as-gris-fort); font-weight: 500; }
.as-racine .as-pastille-neutre:hover { background: #e0dbd0; }
.as-racine .as-rail { display: flex; gap: 8px; margin: 8px -6px 0; padding: 6px 6px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.as-racine .as-rail::-webkit-scrollbar { display: none; }
.as-racine .as-rail .as-pastille { flex: none; white-space: nowrap; }
@media (pointer: coarse) { .as-racine .as-pastille { min-height: 44px; } }

/* ── Boutons ─────────────────────────────────────────────────────────────────────── */
.as-racine .as-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--as-rouge); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s; }
.as-racine .as-btn:hover { background: var(--as-rouge-fonce); }
.as-racine .as-btn:active { transform: scale(.97); }
.as-racine .as-btn[disabled] { opacity: .6; cursor: progress; }
.as-racine .as-btn-2 { background: var(--as-creux); color: var(--as-encre); }
.as-racine .as-btn-2:hover { background: #e0dbd0; }
.as-racine .as-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.as-racine .as-actions .as-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.as-racine .as-q-corps .as-actions { margin-top: 14px; }

/* ── Saisie ──────────────────────────────────────────────────────────────────────── */
.as-racine .as-saisie { display: flex; gap: 8px; margin-top: 12px; }
.as-racine .as-saisie .as-champ { flex: 1; min-width: 0; }
.as-racine .as-champ { display: block; width: 100%; min-height: 48px; padding: 0 18px; border: 1px solid #8d8d93; border-radius: 999px; background: var(--as-champ); color: var(--as-encre); font-size: 16px; line-height: 1.3; -webkit-appearance: none; appearance: none; }
.as-racine .as-champ::placeholder { color: var(--as-gris); opacity: 1; }
.as-racine .as-saisie .as-btn { flex: none; }

/* ── Questions : recherche, thèmes, accordéon ────────────────────────────────────── */
.as-racine .as-recherche { background: #fff; box-shadow: var(--as-ombre); }
.as-racine .as-themes { display: flex; gap: 8px; margin: 10px -6px 0; padding: 6px 6px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.as-racine .as-themes::-webkit-scrollbar { display: none; }
.as-racine .as-theme { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--as-encre); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: background-color .15s, color .15s; }
.as-racine .as-theme:hover { background: #f2efe9; }
.as-racine .as-theme[aria-pressed="true"] { background: var(--as-encre); color: #fff; }
.as-racine .as-theme[aria-pressed="true"]::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
.as-racine .as-compte { margin: 6px 4px 10px; font-size: 14px; color: var(--as-gris); }
.as-racine .as-liste { display: grid; gap: 10px; margin: 0 0 20px; }
.as-racine .as-q { overflow: hidden; border-radius: 20px; background: var(--as-carte); box-shadow: var(--as-ombre); }
.as-racine .as-q summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; list-style: none; cursor: pointer; }
.as-racine .as-q summary::-webkit-details-marker { display: none; }
.as-racine .as-q summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 auto; border-right: 2.5px solid var(--as-gris); border-bottom: 2.5px solid var(--as-gris); transform: rotate(45deg); transition: transform .2s; }
.as-racine .as-q[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.as-racine .as-q-texte { display: grid; gap: 2px; min-width: 0; }
.as-racine .as-q-titre { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--as-encre); }
.as-racine .as-q-theme { font-size: 13px; color: var(--as-gris); }
.as-racine .as-q-corps { padding: 0 16px 18px; }
.as-racine .as-vide { padding: 22px 18px; border-radius: 20px; background: var(--as-carte); box-shadow: var(--as-ombre); text-align: center; }
.as-racine .as-vide .as-btn { margin-top: 14px; }

/* ── Formulaire « Une autre question ? » ─────────────────────────────────────────── */
.as-racine .as-form { display: grid; gap: 8px; margin-top: 16px; }
.as-racine .as-etiq { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--as-gris-fort); }
.as-racine .as-select { padding: 0 44px 0 18px; background-color: var(--as-champ); background-image: linear-gradient(45deg, transparent 50%, var(--as-gris) 50%), linear-gradient(135deg, var(--as-gris) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.as-racine .as-zone { min-height: 128px; padding: 14px 18px; border-radius: 20px; resize: vertical; }
.as-racine .as-aide { font-size: 13px; color: var(--as-gris); }
.as-racine .as-compteur { margin-left: 4px; font-variant-numeric: tabular-nums; }
.as-racine .as-erreur { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--as-rouge); }
.as-racine .as-erreur:empty, .as-racine .as-ok:empty, .as-racine .as-note:empty { display: none; }
.as-racine .as-erreur a { color: var(--as-rouge); text-decoration: underline; text-underline-offset: 3px; }
.as-racine .as-ok { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--as-vert); }
.as-racine [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--as-rouge); }
.as-racine .as-form .as-btn { justify-self: start; margin-top: 4px; }

/* ── Mes questions ───────────────────────────────────────────────────────────────── */
.as-racine .as-mes-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-racine .as-mes-liste { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.as-racine .as-mes-liste:empty { display: none; }
.as-racine .as-qm { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 18px; background: #f7f5f0; }
.as-racine .as-qm-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.as-racine .as-qm-theme { font-size: 13px; color: var(--as-gris); }
.as-racine .as-qm-question { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.as-racine .as-qm-reponse { padding: 12px 14px; border-radius: 14px; background: #fff; }
.as-racine .as-etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.as-racine .as-attente { background: #fff1cf; color: #6b4300; }
.as-racine .as-attente::before { content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; }
.as-racine .as-repondue { background: #e3f1e7; color: var(--as-vert); }
.as-racine .as-repondue::before { content: "\2713"; content: "\2713" / ""; font-weight: 800; }

/* ── Ordinateur ──────────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .as-racine { padding-top: 16px; }
  .as-racine .as-carte { padding: 24px; }
  .as-racine .as-fil { padding: 18px 16px; }
  .as-racine .as-rail, .as-racine .as-themes { flex-wrap: wrap; overflow: visible; }
  .as-racine .as-ligne-bot { max-width: 86%; }
  .as-racine .as-ligne-moi { max-width: 78%; }
}
@media (max-width: 380px) {
  .as-racine .as-seg { padding: 0 8px; font-size: 15px; }
  .as-racine .as-saisie .as-btn { padding: 0 16px; }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .as-racine *, .as-racine *::before, .as-racine *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}