/* =========================================================================
   Assistant du site — habillage.

   Le gabarit Agenio n'a pas de composant de conversation : c'est le seul
   ajout de ce projet qui ne peut pas être assemblé à partir de ses blocs.
   Tout ce qui pouvait l'être l'est quand même :

     · les couleurs sont ses variables, sans exception — aucune valeur
       hexadécimale n'est écrite ici en dehors des voiles translucides posés
       sur du noir déjà déclaré ;
     · les coins restent carrés, comme partout ailleurs sur le site ;
     · l'accent est --color-primary, le vert du gabarit, réservé ici à ce qui
       indique une activité en cours.

   FORME : une barre de saisie flottante, centrée en bas de l'écran. Elle est
   toujours là ; le panneau de conversation s'ouvre au-dessus d'elle. Il n'y a
   pas de bouton « ouvrir » : on écrit dans la barre, la conversation apparaît.
   C'est pourquoi la barre vit hors du panneau dans le markup.

   Trois règles du gabarit sont neutralisées, et les trois sont signalées
   comme telles, avec ce qu'elles cassaient :

     · celle qui habille tous les contrôles de formulaire du document
       (point 1) ;
     · `ul li { list-style: none !important }`, qui effaçait les puces des
       énumérations de l'assistant (point 6) ;
     · le bouton de retour en haut, que la barre recouvrait (point 11).
   ========================================================================= */

/* -------------------------------------- 1. NEUTRALISATION DES CONTRÔLES

   Le gabarit habille TOUS les contrôles de formulaire du document, sans
   sélecteur de contexte :

     input, button, select, textarea {
       width: 100%; border-radius: 12px; ... }        (style.css:~1140)

   Ses propres boutons portent ensuite leurs classes par-dessus. Les nôtres
   n'en ont pas, et héritaient donc des deux : des suggestions larges comme le
   panneau, empilées une par ligne, et des coins arrondis à 12 px sur un site
   dont c'est justement le signe distinctif de ne pas en avoir.

   La règle est donc annulée, une fois, à l'entrée du composant.

   Le :where() n'est pas une coquetterie : sans lui, le sélecteur pèserait une
   classe ET un type, donc plus que `.ps-chat-envoyer`, et le `width: auto`
   posé ici l'emporterait sur les 44 px du bouton d'envoi — qui se retrouvait
   écrasé contre le bord. :where() ne compte pour rien dans le calcul de
   spécificité : la neutralisation s'applique par défaut, et la moindre règle
   nommée plus bas la reprend. */

.ps-chat :where(button, textarea) {
  width: auto;
  border-radius: 0;
}

/* ------------------------------------------------------------- 2. RACINE

   Une colonne calée en bas à DROITE : le panneau s'empile au-dessus de la
   barre, et les deux partagent le même axe. C'est ce qui donne l'impression
   que la conversation sort de la barre au lieu de flotter à côté.

   POURQUOI À DROITE, ET POURQUOI ÉTROITE AU REPOS

   La barre était centrée et large de 720 px. Une bande fixe de 720 x 63 px
   posée au milieu du bas de l'écran traverse l'axe où une page met ses
   commandes — et une bande fixe ne peut pas savoir ce qui se trouve dessous.
   Cinq commandes restaient recouvertes, mesurées au navigateur :

     1440 px  /integrations.html            le champ de recherche de l'annuaire
              /realisations.html            le lien « Parenthèse, spa urbain »
      768 px  /saas-ou-sur-mesure…          un curseur de simulateur
              /ressource-vraie-fourchette…  deux liens de la capsule

   Sous 576 px, cette forme avait déjà été abandonnée pour une pastille ancrée
   à droite, « hors de l'axe central où vivent les boutons de la page ». Le
   raisonnement ne s'arrête pas à 576 px : c'est le même défaut, à une autre
   échelle. La barre est donc ancrée à droite partout, et son repos est étroit.

   La largeur de repos est mesurée, pas choisie. Les centres des cinq commandes
   recouvertes tombent à x = 681 et 1 014 sur 1 440 px, et à x = 128, 243 et 384
   sur 768 px. Une barre ancrée à droite de largeur L couvre la bande
   [largeur − marge − L, largeur − marge] : à 336 px, elle commence à 1 084 sur
   un écran de 1 440 et à 412 sur un écran de 768. Les cinq commandes sont
   dehors, et le pire cas — le curseur de simulateur, dont le centre est le plus
   à droite des trois cas de 768 px — garde 28 px de reste. C'est aussi ce qui
   PLAFONNE cette largeur : à 364 px, le curseur repasserait dessous.

   CE QUI NE CHANGE PAS : il n'y a toujours pas de bouton « ouvrir ». On écrit
   dans la barre, et la conversation apparaît. La barre reprend sa pleine
   largeur dès qu'elle a le focus ou que la conversation est ouverte — elle
   s'étire vers la gauche depuis son ancrage, sans se recentrer : un composant
   qui saute d'un bord à l'autre au premier caractère serait pire que le
   défaut qu'on corrige. */

.ps-chat {
  --ps-chat-largeur: 720px;
  --ps-chat-largeur-repos: 336px;
  --ps-chat-marge: 20px;

  position: fixed;
  right: var(--ps-chat-marge);
  bottom: 24px;
  align-items: flex-end;
  width: min(var(--ps-chat-largeur-repos), calc(100vw - 2 * var(--ps-chat-marge)));
  transition: width var(--dur-base, 180ms) var(--ease-out, ease);
  /* AU-DESSUS DE L'EN-TÊTE, et c'est un correctif, pas un réglage.
     `.pk-header` est à 9900 (propul-header.css). À 1000, le panneau ouvert
     passait SOUS l'en-tête : sur téléphone, où il s'affiche en plein écran,
     sa croix « Fermer l'assistant » se trouvait peinte sous le bouton du
     menu, et `document.elementFromPoint` au centre de la croix rendait
     `BUTTON.pk-burger`. Toucher la croix ouvrait donc le menu, et le panneau
     ne pouvait plus être fermé autrement que par Échap — que n'a pas un
     téléphone. Pire, `sessionStorage` le rouvrait sur chaque page suivante.
     9950 le place au-dessus de l'en-tête et sous rien d'autre. */
  z-index: 9950;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Le conteneur ne doit pas intercepter les clics du site autour de la barre. */
  pointer-events: none;
}

.ps-chat > * {
  pointer-events: auto;
}

/* La pleine largeur : dès qu'on écrit, et tant que la conversation est là.
   `:focus-within` et non `:hover` — un survol n'est pas une intention, et une
   barre qui s'ouvre au passage de la souris recouvrirait justement ce que le
   visiteur cherchait à atteindre. */
.ps-chat:focus-within,
.ps-chat[data-etat='ouvert'] {
  width: min(var(--ps-chat-largeur), calc(100vw - 2 * var(--ps-chat-marge)));
}

/* Les enfants s'étirent : sans cela, `align-items: flex-end` les réduirait à
   leur contenu et la barre flotterait dans un conteneur trop large. */
.ps-chat > .ps-chat-barre,
.ps-chat > .ps-chat-panneau {
  align-self: stretch;
}

/* --------------------------------------------------------- 3. LA BARRE

   L'élément permanent. Fermée, c'est tout ce que le visiteur voit de
   l'assistant : une ligne posée au-dessus de la page, jamais un pavé. */

.ps-chat-barre {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 9px 9px 9px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--encre) 16%, transparent);
  transition: var(--transition);
}

.ps-chat-barre:focus-within {
  box-shadow: 0 12px 44px color-mix(in srgb, var(--encre) 22%, transparent);
}

/* La marque tient lieu d'étiquette tant que la conversation n'est pas
   ouverte : sans elle, la barre ne dit pas à qui l'on s'adresse. Ouverte,
   l'en-tête du panneau porte déjà le nom, et la répéter serait du bruit. */
.ps-chat-marque {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  flex: none;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--color-heading-1);
  white-space: nowrap;
}

.ps-chat-marque-pastille {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-primary);
}

.ps-chat[data-etat='ouvert'] .ps-chat-marque {
  display: none;
}

.ps-chat-champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  max-height: 132px;
  padding: 11px 4px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-heading-1);
  background: transparent;
  border: none;
  border-radius: 0;
  resize: none;
  /* La barre de défilement n'apparaît qu'une fois la hauteur maximale
     atteinte : posée en `auto`, elle s'affichait sur un champ vide, la
     hauteur d'une ligne dépassant de deux pixels celle de la boîte. */
  overflow-y: hidden;
}

.ps-chat-champ:focus {
  outline: none;
  border: none;
}

.ps-chat-champ::placeholder {
  color: var(--color-body-1);
}

.ps-chat-envoyer {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  color: var(--color-white);
  background: var(--color-black);
  border: 1px solid var(--color-black);
  cursor: pointer;
  transition: var(--transition);
}

.ps-chat-envoyer:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-black);
}

.ps-chat-envoyer:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------- 4. LE PANNEAU */

.ps-chat-panneau {
  display: flex;
  flex-direction: column;
  /* min-height: 0 sur un enfant de flex qui défile, sinon le fil pousse le
     panneau au-delà de sa hauteur maximale au lieu de défiler. */
  min-height: 0;
  /* Le plafond laisse l'en-tête collant du site visible au-dessus : la barre
     n'est pas une fenêtre modale, on doit pouvoir continuer à naviguer
     pendant que la conversation reste ouverte. */
  max-height: min(560px, calc(100vh - 210px));
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--encre) 18%, transparent);
}

.ps-chat-panneau[hidden] {
  display: none;
}

/* ------------------------------------------------------------- 5. EN-TÊTE */

.ps-chat-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 14px 14px 14px 18px;
  background: var(--color-black);
  color: var(--color-white);
}

.ps-chat-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-black);
  font-size: 15px;
  font-weight: 600;
}

.ps-chat-identite {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-chat-nom {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}

.ps-chat-role {
  display: block;
  margin: 2px 0 0;
  font-size: var(--fs-label);
  line-height: 1.3;
  color: var(--color-body-dark);
}

.ps-chat-outil-entete {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--color-white);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
}

.ps-chat-outil-entete:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* -------------------------------------------------------------- 6. LE FIL */

.ps-chat-fil {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-bg-1);
}

.ps-chat-msg {
  max-width: 80%;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  border: 1px solid var(--color-border);
}

.ps-chat-msg--assistant {
  align-self: flex-start;
  background: var(--color-white);
  color: var(--color-heading-1);
}

.ps-chat-msg--visiteur {
  align-self: flex-end;
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.ps-chat-msg p {
  margin: 0 0 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ps-chat-msg p:last-child,
.ps-chat-msg ul:last-child {
  margin-bottom: 0;
}

.ps-chat-msg ul {
  margin: 0 0 10px;
  padding-left: 18px;
  list-style: disc;
}

/* Le gabarit écrit `ul li { list-style: none !important }` (style.css) — ses
   menus et ses grilles sont tous des listes sans puce. Un !important ne se
   bat qu'avec un !important : c'est le seul de ce fichier, et il est ici
   parce qu'une énumération de l'assistant sans puce se lit comme un
   paragraphe collé, où l'on ne distingue plus les offres les unes des autres. */
.ps-chat-msg li {
  margin-bottom: 4px;
  list-style: disc !important;
}

.ps-chat-msg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ps-chat-msg a:hover {
  text-decoration-thickness: 2px;
}

.ps-chat-msg strong {
  font-weight: 600;
}

/* Le titre du message d'accueil, seul élément de rang supérieur du fil. */
.ps-chat-accueil-titre {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading-1);
}

/* ------------------------------------------------- 7. ÉTATS ET SUGGESTIONS */

/* Ce que fait l'assistant pendant qu'il ne répond pas encore. Le vert du
   gabarit ne sert qu'ici : il ne signale jamais autre chose qu'une activité. */
.ps-chat-etat {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-body-1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.ps-chat-etat[hidden] {
  display: none;
}

.ps-chat-etat-point {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--color-primary);
  animation: ps-chat-battement 1.1s ease-in-out infinite;
}

@keyframes ps-chat-battement {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.ps-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
  padding: 12px 20px;
  background: var(--color-bg-1);
  border-top: 1px solid var(--color-border);
}

.ps-chat-suggestions:empty,
.ps-chat-suggestions[hidden] {
  display: none;
}

.ps-chat-suggestion {
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: left;
  color: var(--color-heading-1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition);
}

.ps-chat-suggestion:hover {
  border-color: var(--color-black);
  background: var(--color-primary);
}

/* ------------------------------------------------------------ 8. MENTION

   Sous la barre, et seulement une fois la conversation ouverte : fermé,
   l'assistant ne doit être qu'une ligne, pas un pavé d'avertissement. */

/* Fond opaque, et non un simple texte posé sur la page : la barre flotte
   au-dessus de n'importe quelle section, y compris les bandeaux sombres du
   gabarit, où une mention sans fond devient illisible. */
.ps-chat-mention {
  align-self: center;
  max-width: 100%;
  margin: 0;
  padding: 7px 14px;
  font-size: var(--fs-label);
  line-height: 1.5;
  text-align: center;
  color: var(--color-body-1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.ps-chat-mention a {
  color: inherit;
  text-decoration: underline;
}

.ps-chat[data-etat='ferme'] .ps-chat-mention {
  display: none;
}

/* --------------------------------------------- 9. FENÊTRE COURTE

   Le panneau est plafonné par `calc(100vh - 210px)`. Sur une fenêtre de
   420 px de haut — un navigateur à moitié réduit, un portable en paysage —
   cela laissait 51 px au fil de conversation : deux lignes, illisibles.

   Il prend donc toute la hauteur disponible dès que la fenêtre descend sous
   640 px, en gardant sa largeur : un panneau de 1 240 px de large sur un
   écran large et court serait tout aussi raté.

   Ce bloc précède celui du mobile, qui doit gagner sur un téléphone en
   paysage — étroit ET court à la fois. */

@media (max-height: 640px) {
  .ps-chat[data-etat='ouvert'] {
    top: 12px;
    bottom: 12px;
  }

  .ps-chat[data-etat='ouvert'] .ps-chat-panneau {
    flex: 1 1 auto;
    max-height: none;
  }
}

/* ---------------------------------------------------------- 10. MOBILE */

/* Sous 576 px, la barre prend la largeur disponible, et l'ouverture passe en
   plein écran : un panneau de 600 px de haut sur un téléphone laisserait la
   page défiler derrière lui, et le champ de saisie se retrouverait sous le
   clavier. */

@media (max-width: 575px) {
  .ps-chat {
    --ps-chat-marge: 12px;
    --ps-chat-largeur-repos: var(--ps-chat-largeur);
    bottom: 12px;
    gap: 8px;
  }

  .ps-chat[data-etat='ouvert'] {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    max-width: none;
    gap: 0;
  }

  .ps-chat[data-etat='ouvert'] .ps-chat-panneau {
    flex: 1 1 auto;
    max-height: none;
    border: none;
  }

  .ps-chat[data-etat='ouvert'] .ps-chat-barre {
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }

  .ps-chat[data-etat='ouvert'] .ps-chat-mention {
    align-self: stretch;
    max-width: none;
    padding: 0 16px 12px;
    border: none;
  }

  .ps-chat-msg {
    max-width: 92%;
  }

}

/* ------------------------------- 10bis. LA PASTILLE AU REPOS, PARTOUT

   MESURE QUI A CONDUIT ICI (session 3)

   La session 2 avait sorti la barre de l'axe CENTRAL des commandes, et l'avait
   verifie a 390, 768 et 1 440 px : zero commande recouverte aux trois. La
   session 3 a ajoute la largeur de 1 000 px a l'echantillon de test/rendu.mjs
   — parce qu'un defaut d'en-tete vivait entre 768 et 1 440 sans que rien ne le
   voie — et deux recouvrements sont apparus aussitot. Balayage des 43 pages de
   l'echantillon, de 860 a 1 366 px :

      860 px  1 recouvrement   /integrations-agenda-rdv.html
      900 px  1
     1000 px  2                les deux pages ressource, leurs articles lies
     1100 px  4                + ressources, secteurs, solutions (vignettes)
     1200 px  3
     1280 px  2
     1366 px  4                + le bouton de volet d'ia-offres

   Les trois largeurs historiques etaient exactement les seules propres du lot.
   L'axe central etait degage ; l'axe DROIT ne l'a jamais ete, et c'est la que
   les pages ressource posent leurs articles lies, que solutions, secteurs et
   ressources posent leurs vignettes, et qu'ia-offres pose un bouton.

   POURQUOI RETRECIR PLUTOT QUE DEPLACER

   La barre au repos peint un rectangle FIXE de 336 x 63 px dans le coin bas
   droit. Qu'un lien de la page y tombe ou non tient au hasard de la largeur de
   fenetre : c'est pour cela que trois largeurs sur sept etaient propres. Deux
   correctifs ont ete mesures et ecartes :

     · retrecir la barre — pour degager le cas de 1 000 px il faudrait passer
       sous 138 px de large, ce qui n'est plus un champ de saisie ;
     · la raccourcir — le centre du lien de 1 000 px tombe 4 px sous le bord
       haut de la barre. Quatre pixels feraient passer le test sans rien
       corriger, et le defaut reviendrait a la page suivante.

   Le seul correctif reel est de retrecir le rectangle, et le composant en
   avait deja un, ecrit et teste : la pastille du telephone. L'aire peinte au
   repos passe d'environ 21 000 px2 a environ 3 000.

   CE QUE CELA CHANGE, ET CE QUE CELA NE CHANGE PAS

   Change : sur ordinateur, l'assistant n'expose plus un champ ouvert au repos.
   C'est un ecart assume avec la forme documentee (« il n'y a pas de bouton
   ouvrir : on ecrit dans la barre ») — l'ecart etait deja pris sous 576 px, il
   ne l'est plus seulement la. Ce que le visiteur voit au repos reste une
   etiquette qui NOMME l'assistant, pas une bulle muette : `.ps-chat-marque`
   porte le nom et le point d'accent.

   Ne change pas : le geste. Un clic deplie la barre, le champ prend le focus,
   la conversation s'ouvre — un seul geste, le meme qu'avant, avec un etat de
   moins a l'ecran. La largeur de repos depliee reste 336 px, mesuree et
   plafonnee a 364 (voir section 2), et la pleine largeur reste 720. Aucun
   JavaScript n'a eu a changer : `deplie()` et son gestionnaire de clic
   n'etaient deja pas bornes par la largeur, seule la feuille l'etait. */

.ps-chat[data-etat='ferme']:not([data-deplie]) {
  width: auto;
  max-width: calc(100vw - 2 * var(--ps-chat-marge));
}

/* La pastille se reduit a son contenu : ses enfants ne s'etirent pas. */
.ps-chat[data-etat='ferme']:not([data-deplie]) > .ps-chat-barre {
  align-self: flex-end;
}

/* Repliee, la pastille ne doit pas se rouvrir au focus : c'est l'appui qui la
   deplie, et `[data-deplie]` qui l'atteste. Sans cette remise a zero, la regle
   de pleine largeur de la section 2 la ferait traverser l'ecran. */
.ps-chat[data-etat='ferme']:not([data-deplie]):focus-within {
  width: auto;
}

.ps-chat[data-etat='ferme']:not([data-deplie]) .ps-chat-barre {
  padding: 10px 14px;
  cursor: pointer;
}

/* Le champ et le bouton d'envoi n'ont pas de raison d'etre tant qu'on n'a rien
   a ecrire. `display: none` plutot qu'une largeur nulle : un textarea de 0 px
   reste focalisable, et c'etait precisement lui qui interceptait l'appui
   destine au bouton de la page. */
.ps-chat[data-etat='ferme']:not([data-deplie]) .ps-chat-champ,
.ps-chat[data-etat='ferme']:not([data-deplie]) .ps-chat-envoyer,
.ps-chat[data-etat='ferme']:not([data-deplie]) .ps-chat-mention {
  display: none;
}

.ps-chat[data-etat='ferme']:not([data-deplie]) .ps-chat-marque {
  padding-bottom: 0;
}

/* ------------------------------------ 11. LE BOUTON DE RETOUR EN HAUT

   #goTop est fixé à bottom 40px / right 20px (style.css:12775). La barre
   traverse tout le bas de l'écran dès que la fenêtre descend sous ~800 px de
   large : le bouton se retrouvait posé dessus. Il remonte au-dessus d'elle
   plutôt que de disparaître — c'est une commande du gabarit, pas une
   décoration.

   Conversation ouverte, il se retire : le panneau occupe le centre de
   l'écran, et sur mobile il le remplit entièrement. */

#goTop {
  bottom: 96px;
}

.ps-chat[data-etat='ouvert'] ~ #goTop,
body:has(.ps-chat[data-etat='ouvert']) #goTop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ------------------------------------ 12. LE CHAMP AU REPOS, SUR UNE LIGNE

   La barre au repos fait 320 px : son champ en fait environ 180. Un `textarea`
   fait passer son texte indicatif a la ligne comme n'importe quel contenu, et
   la deuxieme ligne se retrouvait coupee par la hauteur de la barre — un texte
   tronque en plein mot, qui se lit comme un defaut d'affichage.

   La regle ne vaut qu'AU REPOS : des que le champ a le focus, la barre s'etire
   a 720 px et le retour a la ligne redevient le comportement voulu, sans quoi
   une question de deux lignes s'ecrirait sur une seule, en defilement
   horizontal. */

.ps-chat:not(:focus-within):not([data-etat='ouvert']) .ps-chat-champ {
  white-space: nowrap;
  overflow: hidden;
}

/* ------------------------------ 13. CE QUE DEVIENT LA CONVERSATION

   Le bloc d information RGPD, rendu dans le fil au-dessous du message
   d accueil. Il etait ecrit dans data/assistant.json depuis toujours et ne
   rendait sur aucune page : seul rgpd.lien etait lu.

   REPLIE PAR DEFAUT, et c est l inverse du choix fait pour l annuaire.
   L annuaire s ouvre parce que cacher ses entrees dirait le contraire de ce
   qu il vend. Ici la contrainte est l autre : l article 12 demande une
   information a la fois « concise » et « aisement accessible ». Depliee, elle
   pousse les suggestions hors de l ecran et le visiteur ne voit plus par quoi
   commencer ; c est l information a niveaux que recommande la CNIL, le titre
   dit de quoi il s agit, le corps donne le detail a qui le demande.

   Il ne porte pas la bulle de .ps-chat-msg : ce n est pas l assistant qui
   parle, c est le site qui informe. Fond transparent, pas de bordure, une
   seule regle de couleur, pour qu il se lise comme une note et pas comme un
   tour de conversation. */

/* 14.5px, la taille de .ps-chat-msg : ce bloc se lit dans le meme fil que
   les messages, il n a pas de raison d etre plus petit qu eux. La taille est
   posee sur CHAQUE enfant et pas seulement ici, parce que style.css porte
   « p { font-size: var(--font-size-b2) } » : une regle d element bat toujours
   l heritage, quelle que soit la specificite du parent. Mesure avant :
   titre 12px, corps 16px, soit une hierarchie a l envers. */
.ps-chat-rgpd {
  align-self: flex-start;
  max-width: 80%;
  line-height: 1.55;
  color: var(--color-body-1);
}

/* display: list-item RESTAURE LE CHEVRON, et il faut le dire ici parce que
   la cause n est pas evidente. bootstrap.min.css pose bien
   summary { display: list-item }, mais le reset HTML5 de style.css enumere
   « article, aside, details, [...], summary { display: block } » et se charge
   apres : a specificite egale, le dernier gagne, et le marqueur disparait.
   Mesure au navigateur avant correction : getComputedStyle(summary).display
   valait « block », ::marker n avait aucun contenu, et le bloc se lisait comme
   du gras inerte. Un <details> sans affordance n est pas « aisement
   accessible » au sens de l article 12 : personne ne sait qu il s ouvre.

   Un selecteur de classe (0-1-0) bat la liste d elements (0-0-1) : la regle
   n a donc pas besoin de !important, contrairement au correctif d en-tete.

   La FAQ, elle, ne passe pas par la : elle porte son propre +/- en SVG
   (.ps-faq__marque). On ne l imite pas ici, ce bloc est une note, pas un
   composant. */
.ps-chat-rgpd-tete {
  display: list-item;
  list-style-position: inside;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-heading-1);

  /* 24 px, le minimum de la cible pointee (WCAG 2.2, 2.5.8). Mesure avant :
     23 px, un pixel sous la barre. Pose en min-height et pas en flex, parce
     que flex ecraserait le marqueur qu on vient de retablir. */
  min-height: 24px;
  padding: 3px 0;
  font-size: 14.5px;
}

.ps-chat-rgpd-texte,
.ps-chat-rgpd-lien {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
}

.ps-chat-rgpd-lien a {
  color: inherit;
  text-decoration: underline;
}