/* ==========================================================================
   TurboTexte — le volet d'aide : bouton « ? », signalement, et Turbo.

   FICHIER SÉPARÉ, ET C'EST VOLONTAIRE. site.css est refondu en parallèle par
   une autre session ; tout ce qui concerne le volet vit ici pour que les deux
   travaux ne se marchent pas dessus.

   AUCUNE COULEUR EN DUR. Chaque teinte passe par une variable de thème, avec
   deux replis : d'abord le futur jeu de variables (--tt-*), puis l'actuel
   (--bleu, --fond, --texte…), puis une valeur littérale pour le cas où la
   feuille du site ne serait pas chargée du tout. Le volet est donc correct
   avant la refonte, après, et même tout seul.
   ========================================================================== */

.tt-aide {
  /* --- Thème ------------------------------------------------------------ */
  --aide-accent:      var(--tt-accent, var(--bleu, #2f6fed));
  --aide-accent-fonce:var(--tt-accent-strong, var(--bleu-fonce, #1b4bb8));
  --aide-accent-pale: var(--tt-accent-soft, var(--bleu-pale, #eef3ff));
  --aide-fond:        var(--tt-bg, var(--fond, #ffffff));
  /* --tt-surface vaut le fond de page dans la refonte : c'est --tt-surface-alt
     qui porte le gris des barres. On prend celui-ci d'abord, sinon l'en-tête,
     les onglets et le pied se confondraient avec le corps du volet. */
  --aide-surface:     var(--tt-surface-alt, var(--fond-alt, #f6f8fb));
  --aide-texte:       var(--tt-fg, var(--texte, #16202c));
  --aide-doux:        var(--tt-muted, var(--texte-doux, #5b6b7c));
  --aide-bordure:     var(--tt-border, var(--bordure, #e2e8f0));
  --aide-vert:        var(--tt-ok, var(--vert, #128a5b));
  --aide-vert-pale:   var(--tt-ok-soft, var(--vert-pale, #e6f6ef));
  --aide-rouge:       var(--tt-danger, var(--rouge, #c0392b));
  --aide-rouge-pale:  var(--tt-danger-soft, var(--rouge-pale, #fdecea));
  --aide-ombre:       var(--tt-shadow, var(--ombre, 0 1px 2px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.12)));

  /* LE RAYON VIENT DU THÈME, ET RIEN NE LE CONTOURNE.
     La refonte du site a ramené --tt-radius à 3px et supprimé tout angle très
     arrondi. Un volet d'aide qui garderait ses coins à 9px et son bouton rond
     serait le seul élément arrondi de la page — c'est-à-dire un corps étranger,
     et c'est bien ce qu'on voyait sur les premières captures. Toutes les
     valeurs ci-dessous en dérivent, y compris celles des petits éléments. */
  --aide-rayon:       var(--tt-radius, var(--rayon, 12px));

  --aide-largeur: 400px;

  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--aide-texte);
}

/* Le volet passe au-dessus de tout, y compris d'un en-tête collant. */
.tt-aide-bouton,
.tt-aide-volet { z-index: 2147483000; }

/* --- Le bouton « ? » ------------------------------------------------------ */

.tt-aide-bouton {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  /* Carré, comme tout le reste du site depuis la refonte. Il a été rond un
     moment : c'était alors le seul élément arrondi de la page, et ça se voyait
     sur toutes les captures. Une bulle d'aide ronde est une convention du web,
     pas une obligation — la cohérence du site passe devant. */
  border-radius: var(--aide-rayon);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--aide-accent);
  color: var(--tt-on-accent, #fff);
  box-shadow: 0 4px 14px rgba(16, 32, 48, .28);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.tt-aide-bouton:hover,
.tt-aide-bouton:focus-visible {
  background: var(--aide-accent-fonce);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 32, 48, .34);
}

.tt-aide-bouton:focus-visible { outline: 3px solid var(--aide-accent-pale); outline-offset: 2px; }

/* Le bouton disparaît pendant que le volet est ouvert : il ne sert plus, et
   sur un téléphone il chevaucherait le volet. */
.tt-aide.est-ouvert .tt-aide-bouton { display: none; }

/* Pastille de nouveauté, montrée une seule fois par visiteur. */
.tt-aide-pastille {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--aide-vert);
  border: 2px solid var(--aide-fond);
}

/* --- Le volet ------------------------------------------------------------- */

.tt-aide-volet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--aide-largeur);
  max-width: 100%;
  background: var(--aide-fond);
  border-left: 1px solid var(--aide-bordure);
  box-shadow: var(--aide-ombre);
  display: flex;
  flex-direction: column;

  /* Fermé : hors écran, et retiré de l'ordre de tabulation par [hidden]. */
  transform: translateX(100%);
  transition: transform .22s ease;
}

.tt-aide.est-ouvert .tt-aide-volet { transform: translateX(0); }

/* Quelqu'un qui a demandé moins d'animations n'a pas demandé moins de volet :
   il apparaît, simplement sans glisser. */
@media (prefers-reduced-motion: reduce) {
  .tt-aide-volet,
  .tt-aide-bouton { transition: none; }
}

/* Sous 620 px, et non plus 480 : entre les deux, le volet gardait ses 400 px
   fixes et laissait une bande inutilisable de la page derrière lui — c'est le
   pire des deux mondes. En dessous, il prend l'écran entier comme une feuille,
   au-dessus il redevient un volet posé à côté du contenu.
   100 % et non 100vw : sur un poste avec barre de défilement visible, 100vw
   compte la barre et débordait de quelques pixels. */
@media (max-width: 620px) {
  .tt-aide-volet { width: 100%; max-width: 100%; border-left: 0; }
  .tt-aide-bouton { right: 14px; bottom: 14px; }

  /* La croix de fermeture faisait 34 × 42 px : sous la cible de 44 px, et
     c'est le seul moyen de refermer le volet au doigt. */
  .tt-aide-fermer {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .tt-aide-onglet { min-height: 44px; }
}

/* --- En-tête du volet ----------------------------------------------------- */

.tt-aide-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--aide-bordure);
  background: var(--aide-surface);
}

.tt-aide-titre { font-weight: 700; font-size: 1rem; margin: 0; flex: 1; }

.tt-aide-fermer {
  border: 0;
  background: transparent;
  color: var(--aide-doux);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--aide-rayon);
}

.tt-aide-fermer:hover { background: var(--aide-bordure); color: var(--aide-texte); }

/* --- Onglets -------------------------------------------------------------- */

.tt-aide-onglets {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--aide-bordure);
  background: var(--aide-surface);
}

.tt-aide-onglet {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--aide-doux);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: var(--aide-rayon) var(--aide-rayon) 0 0;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.tt-aide-onglet:hover { color: var(--aide-texte); }

.tt-aide-onglet[aria-selected="true"] {
  color: var(--aide-accent);
  border-bottom-color: var(--aide-accent);
  background: var(--aide-fond);
}

.tt-aide-onglet svg { width: 20px; height: 17px; }

/* --- Corps ---------------------------------------------------------------- */

/* Le corps est une COLONNE FLEX, et c'est indispensable (12 septembre 2026).
   Tant qu'il restait un bloc ordinaire, .tt-aide-panneau gardait une hauteur
   automatique, le « height: 100% » de .tt-turbo ne se résolvait sur rien, et
   la conversation, la saisie et le quota se tassaient en haut du volet en
   laissant un grand vide au-dessus du pied de page. */
.tt-aide-corps {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 1 0 auto : le panneau occupe tout le corps, mais ne se comprime jamais sous
   la taille de son contenu — c'est le formulaire de signalement qui l'exige,
   lui qui doit pouvoir faire défiler le corps. */
.tt-aide-panneau { padding: 16px; flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; }
.tt-aide-panneau[hidden] { display: none; }

.tt-aide-panneau h3 { font-size: 1rem; margin: 0 0 .35em; }
.tt-aide-intro { color: var(--aide-doux); font-size: .9rem; margin: 0 0 14px; }

/* --- Formulaire de signalement -------------------------------------------- */

.tt-aide-champ { margin-bottom: 14px; }

.tt-aide-champ > label {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: 5px;
}

.tt-aide-choix { display: flex; gap: 8px; }

.tt-aide-choix input { position: absolute; opacity: 0; pointer-events: none; }

.tt-aide-choix label {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid var(--aide-bordure);
  border-radius: var(--aide-rayon);
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--aide-doux);
  background: var(--aide-fond);
}

.tt-aide-choix input:checked + label {
  border-color: var(--aide-accent);
  background: var(--aide-accent-pale);
  color: var(--aide-accent);
}

.tt-aide-choix input:focus-visible + label { outline: 2px solid var(--aide-accent); outline-offset: 1px; }

.tt-aide input[type="text"],
.tt-aide input[type="email"],
.tt-aide textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--aide-bordure);
  border-radius: var(--aide-rayon);
  background: var(--aide-fond);
  color: var(--aide-texte);
  font: inherit;
  font-size: .93rem;
}

.tt-aide textarea { min-height: 110px; resize: vertical; }

.tt-aide input:focus,
.tt-aide textarea:focus {
  outline: 0;
  border-color: var(--aide-accent);
  box-shadow: 0 0 0 3px var(--aide-accent-pale);
}

/* Le champ leurre : invisible pour un humain, rempli par les robots.
   Ni display:none ni hidden — trop de robots les reconnaissent. */
.tt-aide-leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tt-aide-case {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .88rem;
  margin-bottom: 9px;
  cursor: pointer;
}

.tt-aide-case input { margin-top: 3px; flex: none; }

.tt-aide-compteur { font-size: .78rem; color: var(--aide-doux); text-align: right; margin-top: 3px; }
.tt-aide-compteur.est-limite { color: var(--aide-rouge); }

/* --- Contexte détecté ------------------------------------------------------ */

.tt-aide-contexte {
  background: var(--aide-surface);
  border: 1px solid var(--aide-bordure);
  border-radius: var(--aide-rayon);
  padding: 10px 12px;
  font-size: .84rem;
  color: var(--aide-doux);
  margin-bottom: 14px;
}

.tt-aide-contexte strong { color: var(--aide-texte); }

/* --- Images jointes -------------------------------------------------------- */

.tt-aide-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.tt-aide-vignette {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--aide-bordure);
  border-radius: var(--aide-rayon);
  overflow: hidden;
  background: var(--aide-surface);
}

.tt-aide-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tt-aide-vignette-role {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .68rem;
  text-align: center;
  padding: 1px 0;
}

.tt-aide-vignette-retirer {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 21px;
  height: 21px;
  border-radius: var(--aide-rayon);
  border: 0;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 21px;
  padding: 0;
}

/* --- Boutons --------------------------------------------------------------- */

.tt-aide-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

.tt-btn {
  border: 1px solid var(--aide-bordure);
  background: var(--aide-fond);
  color: var(--aide-texte);
  border-radius: var(--aide-rayon);
  padding: 9px 14px;
  font: inherit;
  font-size: .89rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tt-btn:hover { border-color: var(--aide-accent); color: var(--aide-accent); }

.tt-btn-primaire {
  background: var(--aide-accent);
  border-color: var(--aide-accent);
  color: var(--tt-on-accent, #fff);
}

.tt-btn-primaire:hover { background: var(--aide-accent-fonce); border-color: var(--aide-accent-fonce); color: var(--tt-on-accent, #fff); }

.tt-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tt-btn[disabled]:hover { border-color: var(--aide-bordure); color: var(--aide-texte); }

.tt-btn-large { width: 100%; justify-content: center; }

/* --- Messages -------------------------------------------------------------- */

.tt-aide-message {
  border-radius: var(--aide-rayon);
  padding: 11px 13px;
  font-size: .88rem;
  margin-bottom: 14px;
}

.tt-aide-message-succes { background: var(--aide-vert-pale); color: var(--aide-vert); }
.tt-aide-message-erreur { background: var(--aide-rouge-pale); color: var(--aide-rouge); }
.tt-aide-message-info   { background: var(--aide-accent-pale); color: var(--aide-accent-fonce); }

/* --- Turbo : la conversation ------------------------------------------------ */

/* flex: 1 plutôt que height: 100% : la hauteur en pourcentage ne se résout que
   si le parent en a une, ce qui n'était pas le cas. Voir .tt-aide-corps. */
.tt-turbo { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.tt-turbo-fil {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tt-turbo-bulle {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: var(--aide-rayon);
  font-size: .91rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tt-turbo-bulle-turbo {
  align-self: flex-start;
  background: var(--aide-surface);
  border: 1px solid var(--aide-bordure);
  border-bottom-left-radius: var(--aide-rayon);
}

.tt-turbo-bulle-user {
  align-self: flex-end;
  background: var(--aide-accent);
  color: var(--tt-on-accent, #fff);
  border-bottom-right-radius: var(--aide-rayon);
}

.tt-turbo-bulle-erreur {
  align-self: flex-start;
  background: var(--aide-rouge-pale);
  color: var(--aide-rouge);
  border-bottom-left-radius: var(--aide-rayon);
}

.tt-turbo-avatar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--aide-doux);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.tt-turbo-avatar svg { width: 22px; height: 18px; color: var(--aide-accent); }

/* Les trois points pendant que Turbo réfléchit. */
.tt-turbo-attente { display: flex; gap: 4px; align-items: center; padding: 4px 0; }

.tt-turbo-attente span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aide-doux);
  animation: tt-turbo-rebond 1.15s infinite ease-in-out;
}

.tt-turbo-attente span:nth-child(2) { animation-delay: .16s; }
.tt-turbo-attente span:nth-child(3) { animation-delay: .32s; }

@keyframes tt-turbo-rebond {
  0%, 72%, 100% { opacity: .3; transform: translateY(0); }
  36%           { opacity: 1;  transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-turbo-attente span { animation: none; opacity: .55; }
}

/* --- Turbo : ce qu'il propose ------------------------------------------------ */

.tt-turbo-proposition {
  align-self: flex-start;
  max-width: 88%;
  border: 1px solid var(--aide-accent);
  background: var(--aide-accent-pale);
  border-radius: var(--aide-rayon);
  padding: 11px 13px;
  font-size: .88rem;
}

.tt-turbo-proposition p { margin: 0 0 9px; }
.tt-turbo-proposition .tt-aide-boutons { gap: 7px; }

/* --- Turbo : la saisie -------------------------------------------------------- */

.tt-turbo-saisie {
  border-top: 1px solid var(--aide-bordure);
  padding: 10px 12px;
  background: var(--aide-surface);
}

.tt-turbo-ligne { display: flex; gap: 8px; align-items: flex-end; }

.tt-turbo-ligne textarea {
  flex: 1;
  min-height: 42px;
  max-height: 130px;
  resize: none;
  padding: 10px 12px;
  border-radius: var(--aide-rayon);
}

.tt-turbo-envoyer {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: var(--aide-rayon);
}

.tt-turbo-quota {
  font-size: .76rem;
  color: var(--aide-doux);
  margin: 7px 2px 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.tt-turbo-quota.est-epuise { color: var(--aide-rouge); }

/* Les suggestions de départ ont été retirées le 12 septembre 2026, avec leur
   style : elles occupaient la moitié du volet. Voir help-widget.js. */

/* --- Démonstrations ------------------------------------------------------------ */

.tt-demo { padding: 16px; }

.tt-demo-entete { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.tt-demo-entete h3 { margin: 0; flex: 1; }
.tt-demo-avancement { font-size: .78rem; color: var(--aide-doux); font-variant-numeric: tabular-nums; }

.tt-demo-jauge {
  height: 4px;
  border-radius: 2px;
  background: var(--aide-bordure);
  overflow: hidden;
  margin: 10px 0 16px;
}

.tt-demo-jauge span {
  display: block;
  height: 100%;
  background: var(--aide-accent);
  transition: width .25s ease;
}

.tt-demo-etape h4 { margin: 0 0 .4em; font-size: .98rem; }
.tt-demo-etape p { margin: 0 0 .9em; font-size: .91rem; }

.tt-demo-indice {
  font-size: .84rem;
  color: var(--aide-doux);
  border-left: 3px solid var(--aide-bordure);
  padding-left: 10px;
  margin-bottom: 14px;
}

/* L'exercice : un vrai champ, où l'expansion se produit sous les yeux. */
.tt-demo-exercice {
  border: 1px solid var(--aide-bordure);
  border-radius: var(--aide-rayon);
  background: var(--aide-surface);
  padding: 13px;
  margin-bottom: 14px;
}

.tt-demo-consigne { font-size: .85rem; color: var(--aide-doux); margin: 0 0 9px; }

.tt-demo-consigne kbd {
  background: var(--aide-fond);
  border: 1px solid var(--aide-bordure);
  border-bottom-width: 2px;
  border-radius: var(--aide-rayon);
  padding: .1em .4em;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .92em;
  color: var(--aide-texte);
}

.tt-demo-exercice input {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .95rem;
}

.tt-demo-exercice.est-reussi input {
  border-color: var(--aide-vert);
  background: var(--aide-vert-pale);
  color: var(--aide-vert);
}

.tt-demo-verdict { font-size: .85rem; margin: 9px 0 0; color: var(--aide-vert); font-weight: 600; }
.tt-demo-verdict[hidden] { display: none; }

/* --- Pied du volet -------------------------------------------------------------- */
/* Retiré le 12 septembre 2026 avec ses trois liens (« Le wiki », « Nous écrire »,
   « Masquer ce bouton »). Le volet n'a plus de pied : la saisie s'arrête en bas. */

/* --- Accessibilité --------------------------------------------------------------- */

.tt-aide-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Le volet couvre la page à l'impression sans rien apporter. */
@media print { .tt-aide { display: none !important; } }