/* ==========================================================================
   EWE — interface de conversation
   Charte : magenta #E600BF, nuit #131D22, blanc #F5F5F5.
   Extatica pour les titres (auto-hebergee), Plus Jakarta Sans pour le texte.
   Parti pris sombre assume : la charte EWE est un systeme dark mode.
   ========================================================================== */

@font-face { font-family:"Extatica"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-Regular.otf") format("opentype"); }
@font-face { font-family:"Extatica"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-SemiBold.otf") format("opentype"); }
@font-face { font-family:"Extatica"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-Bold.otf") format("opentype"); }

:root {
  --nuit:#131D22; --nuit-creux:#0E161A; --magenta:#E600BF; --rose:#FD82FF;
  --violet:#9082FF; --menthe:#82FFE4; --corail:#FF8284;
  --blanc:#F5F5F5; --brume:#8FA0AB; --brume-basse:#5C6B75;
  --trait:rgba(245,245,245,.10); --trait-fort:rgba(245,245,245,.20);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Extatica","Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rayon:14px; --rail:268px;
}

* { box-sizing:border-box; }
html, body { height:100%; margin:0; }

body {
  background:var(--nuit); color:var(--blanc); font-family:var(--sans);
  font-size:15px; line-height:1.55; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(58% 50% at 78% 96%, rgba(230,0,191,.18), transparent 72%),
    radial-gradient(42% 38% at 14% 104%, rgba(144,130,255,.12), transparent 72%);
  background-repeat:no-repeat; background-attachment:fixed;
}

h1,h2,h3 { font-family:var(--display); letter-spacing:-.02em; font-weight:700; }
::selection { background:rgba(230,0,191,.32); color:#fff; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

* { scrollbar-width:thin; scrollbar-color:rgba(230,0,191,.35) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb {
  background:rgba(230,0,191,.35); border:3px solid transparent;
  background-clip:content-box; border-radius:999px;
}

/* --------------------------------------------------------------- connexion */

/* ------------------------------------------------------------------------
   `hidden` doit gagner, toujours.

   Une declaration `display` d'auteur bat l'attribut `hidden`, qui n'a pour lui
   que la feuille du navigateur. Sans cette regle, `.connexion{display:grid}` et
   `.appli{display:flex}` restaient TOUTES DEUX affichees : le formulaire de
   connexion s'empilait au-dessus de la conversation, d'ou une page deux fois
   trop haute. Le piege s'est presente trois fois (le voile, l'entete du
   selecteur, puis ici) : on le ferme une bonne fois pour toutes.
   ------------------------------------------------------------------------ */
[hidden] { display: none !important; }

.connexion { min-height:100dvh; display:grid; place-items:center; padding:24px; }

.carte {
  width:min(100%,384px); display:flex; flex-direction:column; gap:8px;
  padding:34px 30px 30px; border-radius:20px;
  border:1px solid var(--trait);
  background:linear-gradient(180deg, rgba(245,245,245,.045), rgba(19,29,34,.6));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.carte .logo { width:92px; height:auto; margin-bottom:4px; }
.accroche { margin:0 0 18px; color:var(--brume); font-size:14px; }
.carte label {
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brume); margin-top:8px;
}
.carte input {
  padding:11px 13px; border-radius:11px; border:1px solid var(--trait);
  background:rgba(245,245,245,.05); outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.carte input:focus { border-color:var(--magenta); box-shadow:0 0 0 3px rgba(230,0,191,.18); }

.primaire {
  margin-top:20px; padding:12px 16px; border-radius:11px;
  background:var(--magenta); color:#0A1116; font-weight:700;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s ease, filter .16s ease;
}
.primaire:hover { filter:brightness(1.08); box-shadow:0 10px 26px -12px rgba(230,0,191,.9); }
.primaire:active { transform:scale(.98); }
.primaire[disabled] { opacity:.55; cursor:default; transform:none; }

.erreur {
  margin:14px 0 0; padding:9px 12px; border-radius:10px;
  background:rgba(255,130,132,.12); border:1px solid rgba(255,130,132,.3);
  color:var(--corail); font-size:13.5px;
}

/* ------------------------------------------------------------------- appli */

.appli { display:flex; height:100dvh; overflow:hidden; }

.rail {
  width:var(--rail); flex:none; display:flex; flex-direction:column; gap:14px;
  padding:18px 14px 14px;
  background:linear-gradient(180deg, rgba(14,22,26,.92), rgba(14,22,26,.98));
  border-right:1px solid var(--trait);
}
.rail-tete { display:flex; align-items:center; justify-content:space-between; }
.logo-rail { width:74px; height:auto; }
.fermer { display:none; }

.nouveau {
  display:flex; align-items:center; gap:9px; padding:11px 13px;
  border-radius:12px; border:1px solid var(--trait);
  background:rgba(245,245,245,.04); font-weight:600; font-size:14px;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.nouveau:hover { background:rgba(230,0,191,.14); border-color:rgba(230,0,191,.42); transform:translateY(-1px); }
.nouveau svg { width:17px; height:17px; }

.liste { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }

.item {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 11px; border-radius:10px; color:var(--brume);
  text-align:left; font-size:14px;
  transition:background .14s ease, color .14s ease;
}
.item:hover { background:rgba(245,245,245,.05); color:var(--blanc); }
.item[aria-current="true"] {
  background:linear-gradient(90deg, rgba(230,0,191,.2), rgba(230,0,191,.05));
  color:var(--blanc); box-shadow:inset 2px 0 0 0 var(--magenta);
}
.item-titre { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suppr { opacity:0; flex:none; padding:2px; border-radius:6px; color:var(--brume-basse);
         transition:opacity .14s, color .14s; }
.item:hover .suppr, .suppr:focus-visible { opacity:1; }
.suppr:hover { color:var(--corail); }
.suppr svg { width:14px; height:14px; }

/* Attribution : le produit et qui l'a fait. Hermes est sous licence MIT,
   sans clause de marque — rien n'oblige a citer l'amont dans l'interface. */
.rail-pied {
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  padding-top:12px; border-top:1px solid var(--trait);
}
.credit { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.credit-produit { font-family:var(--display); font-weight:700; font-size:13px; color:var(--magenta); }
.credit-qui { font-size:11px; color:var(--brume-basse); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discret { color:var(--brume-basse); font-size:12.5px; flex:none; transition:color .14s ease; }
.discret:hover { color:var(--rose); }

/* ---------------------------------------------------------- conversation */

.conversation { flex:1; min-width:0; display:flex; flex-direction:column; }
.fil { flex:1; min-height:0; overflow-y:auto; padding:30px 24px 8px; scroll-behavior:smooth; }

.accueil { max-width:720px; margin:14vh auto 0; text-align:center; }
.accueil img { width:52px; height:auto; margin-bottom:18px; }
.accueil h1 { margin:0 0 8px; font-size:30px; }
.accueil p { margin:0; color:var(--brume); }

.message { max-width:780px; margin:0 auto 22px; display:flex; gap:13px; }
.message.moi { flex-direction:row-reverse; }

.avatar {
  width:30px; height:30px; flex:none; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(245,245,245,.06); border:1px solid var(--trait);
}
.avatar img { width:16px; height:auto; }
.message.moi .avatar {
  background:rgba(230,0,191,.16); border-color:rgba(230,0,191,.4);
  font-size:12px; font-weight:700;
}

.bulle { min-width:0; padding:11px 15px; border-radius:var(--rayon); }
.message.ewe .bulle { background:rgba(245,245,245,.045); border:1px solid var(--trait); border-top-left-radius:5px; }
.message.moi .bulle { background:rgba(230,0,191,.14); border:1px solid rgba(230,0,191,.32); border-top-right-radius:5px; }
.bulle p { margin:0 0 .7em; }
.bulle p:last-child { margin-bottom:0; }
.bulle code { font-family:var(--mono); font-size:.88em; background:rgba(0,0,0,.34); padding:1px 5px; border-radius:5px; }
.bulle pre {
  font-family:var(--mono); font-size:.86em; background:var(--nuit-creux);
  border:1px solid var(--trait); padding:12px 14px; border-radius:11px;
  overflow-x:auto; margin:.6em 0;
}
.bulle pre code { background:none; padding:0; }

.outil {
  display:inline-flex; align-items:center; gap:7px; margin:2px 6px 6px 0;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(144,130,255,.32); background:rgba(144,130,255,.1);
  color:var(--violet); font-family:var(--mono); font-size:11.5px;
}
.outil .point { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.1s ease-in-out infinite; }
.outil.fini { border-color:rgba(130,255,228,.3); background:rgba(130,255,228,.09); color:var(--menthe); }
.outil.fini .point { animation:none; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.curseur {
  display:inline-block; width:7px; height:1.05em; background:var(--magenta);
  border-radius:1px; vertical-align:text-bottom; margin-left:2px;
  animation:clignote .9s steps(2,start) infinite;
}
@keyframes clignote { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------------------------------------------------------------- saisie */

.composeur { padding:10px 24px calc(16px + env(safe-area-inset-bottom,0px)); }
.champ {
  max-width:780px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  padding:8px 8px 8px 15px; border-radius:18px;
  border:1px solid var(--trait-fort); background:rgba(14,22,26,.86);
  backdrop-filter:blur(8px);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.champ:focus-within { border-color:rgba(230,0,191,.55); box-shadow:0 0 0 3px rgba(230,0,191,.14); }
.champ textarea {
  flex:1; min-width:0; max-height:200px; padding:7px 0;
  border:0; outline:none; resize:none; background:none; line-height:1.5;
}
.champ textarea::placeholder { color:var(--brume-basse); }

.envoyer {
  flex:none; width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center; background:var(--magenta); color:#0A1116;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.25), filter .16s ease;
}
.envoyer svg { width:18px; height:18px; stroke-width:2.2; }
.envoyer:hover { filter:brightness(1.1); transform:translateY(-1px); }
.envoyer[disabled] { opacity:.4; cursor:default; transform:none; }

.mention { max-width:780px; margin:8px auto 0; text-align:center; font-size:11.5px; color:var(--brume-basse); }

/* -------------------------------------------------------------- mobile */

.ouvrir, .voile { display:none; }

@media (max-width:860px) {
  .rail {
    position:fixed; inset:0 auto 0 0; z-index:30; transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.23,1,.32,1);
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .rail[data-ouvert="1"] { transform:none; }
  .fermer { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--brume); }
  .fermer svg { width:17px; height:17px; }
  .ouvrir {
    display:grid; place-items:center; position:fixed; top:12px; left:12px; z-index:20;
    width:40px; height:40px; border-radius:11px;
    border:1px solid var(--trait); background:rgba(14,22,26,.9);
    color:var(--blanc); backdrop-filter:blur(6px);
  }
  .ouvrir svg { width:19px; height:19px; }
  .voile { display:block; position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.5); }
  .fil { padding:64px 15px 8px; }
  .composeur { padding:8px 15px calc(14px + env(safe-area-inset-bottom,0px)); }
  .accueil { margin-top:18vh; }
  .accueil h1 { font-size:25px; }
  .item { padding:12px 11px; }   /* cible tactile confortable */
  .suppr { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------- modele --- */

.entete {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 10px 22px 0;
}
/* `display` d'une regle auteur bat l'attribut `hidden` : sans cette ligne,
   l'entete s'affiche vide quand il n'y a qu'un modele. */
.entete .etiquette { font-size: 11.5px; color: var(--brume); letter-spacing: .02em; }
.modele {
  font: inherit; font-size: 12.5px; color: var(--blanc);
  padding: 5px 9px; border-radius: 9px;
  border: 1px solid var(--trait); background: rgba(245, 245, 245, .05);
  cursor: pointer; max-width: 260px;
  transition: border-color .16s ease;
}
.modele:hover { border-color: rgba(230, 0, 191, .45); }
.modele:focus-visible { outline: 2px solid rgba(230, 0, 191, .6); outline-offset: 1px; }
.modele option { background: #131D22; color: #F5F5F5; }

@media (max-width: 760px) {
  .entete { padding: 8px 14px 0; }
  .modele { max-width: 170px; }
}

/* ---------------------------------------------------------- l'attente --- */
/* Ce bloc n'est pas decoratif : il dit ce que EWE fait pendant qu'on attend.
   Le masquage est assure par la regle [hidden] globale, en tete de fichier. */

.activite { display:flex; flex-direction:column; gap:7px; }

.activite-tete { display:flex; align-items:center; gap:9px; }

.pulse {
  flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--magenta); animation:souffle 1.4s ease-in-out infinite;
}
@keyframes souffle {
  0%, 100% { opacity:.3; transform:scale(.75) }
  50%      { opacity:1;  transform:scale(1) }
}

.activite-texte { font-size:13.5px; color:var(--brume); }
.chrono {
  font-family:var(--mono); font-size:11px; color:var(--brume);
  opacity:.65; font-variant-numeric:tabular-nums;
}

.activite-note {
  margin:0; font-size:12.5px; line-height:1.45; color:var(--brume);
  padding:7px 10px; border-radius:9px;
  border:1px solid rgba(144,130,255,.28); background:rgba(144,130,255,.08);
}

/* Le raisonnement, quand le fournisseur en envoie : visible mais efface, on ne
   doit jamais le confondre avec la reponse. Le texte arrive par la fin, donc on
   estompe le haut plutot que de le couper net. */
.reflexion {
  font-size:12.5px; line-height:1.5; font-style:italic;
  color:var(--brume); opacity:.8;
  max-height:6.6em; overflow:hidden;
  padding-left:10px; border-left:2px solid var(--trait-fort);
  mask-image:linear-gradient(to bottom, transparent, #000 2.2em);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 2.2em);
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation:none; opacity:.85 }
}

/* La phrase change toutes les cinq secondes : sans transition, ca saute. */
.activite-texte.apparait { animation:apparait .32s ease both; }
@keyframes apparait { from { opacity:0; transform:translateY(3px) } }

/* Le texte tournant est masque aux lecteurs d'ecran ; celui-ci le remplace,
   et ne change jamais. */
.lecteur-seul {
  position:absolute; width:1px; height:1px;
  overflow:hidden; white-space:nowrap; clip-path:inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  .activite-texte.apparait { animation:none }
}

/* -------------------------------------------------- emporter la reponse --- */

.actions { display:flex; gap:8px; margin-top:12px; }

.action {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:9px;
  border:1px solid var(--trait); background:rgba(245,245,245,.04);
  color:var(--brume); font-size:12.5px; text-decoration:none;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.action:hover {
  border-color:rgba(230,0,191,.45); color:var(--blanc);
  background:rgba(230,0,191,.10);
}
.action svg {
  width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------------- les documents produits par EWE --- */

.fichiers { display:flex; flex-direction:column; gap:7px; margin-top:12px; }

.fichier {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:11px; text-decoration:none;
  border:1px solid var(--trait); background:rgba(245,245,245,.04);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.fichier:hover {
  border-color:rgba(230,0,191,.45); background:rgba(230,0,191,.08);
  transform:translateY(-1px);
}
.fichier-icone {
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background:rgba(230,0,191,.16); color:var(--rose);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
}
.fichier-texte { display:flex; flex-direction:column; min-width:0; }
.fichier-nom {
  font-size:13px; color:var(--blanc);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fichier-taille { font-size:11px; color:var(--brume); }

/* La carte porte le document ; « source » donne le fichier tel qu'ecrit. */
.fichier-carte { display:flex; align-items:stretch; gap:0; }
.fichier-carte .fichier { flex:1; min-width:0; border-radius:11px 0 0 11px; }
.fichier-carte .fichier-source {
  display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--trait); border-left:0; border-radius:0 11px 11px 0;
  background:rgba(245,245,245,.03); color:var(--brume);
  font-size:11.5px; text-decoration:none;
  transition:color .16s ease, background .16s ease;
}
.fichier-carte .fichier-source:hover {
  color:var(--blanc); background:rgba(245,245,245,.07);
}



/* ------------------------------------------- rechercher dans les fils --- */

.chercher {
  position:relative; display:flex; align-items:center; gap:8px;
  padding:0 10px; border-radius:10px;
  border:1px solid var(--trait); background:rgba(0,0,0,.22);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.chercher:focus-within {
  border-color:rgba(230,0,191,.5); box-shadow:0 0 0 3px rgba(230,0,191,.12);
}
.chercher > svg {
  flex:none; width:14px; height:14px; color:var(--brume-basse);
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
}
.chercher input {
  flex:1; min-width:0; padding:8px 0; border:0; background:none;
  color:var(--blanc); font:inherit; font-size:13px;
}
.chercher input:focus { outline:none; }
.chercher input::placeholder { color:var(--brume-basse); }
.chercher input::-webkit-search-cancel-button { display:none; }
.chercher-vider {
  flex:none; display:grid; place-items:center; padding:3px;
  border-radius:6px; color:var(--brume-basse);
}
.chercher-vider:hover { color:var(--corail); }
.chercher-vider svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }

/* L'extrait qui dit POURQUOI le fil ressort : sans lui, une liste filtree
   oblige a ouvrir chaque conversation pour comprendre. */
.item { flex-wrap:wrap; }
.item-extrait {
  flex-basis:100%; margin-top:3px;
  font-size:11.5px; line-height:1.45; color:var(--brume-basse);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.item-extrait mark, .item-titre mark {
  background:rgba(230,0,191,.28); color:var(--blanc);
  border-radius:3px; padding:0 2px;
}
.liste-vide {
  padding:18px 12px; text-align:center;
  font-size:12.5px; line-height:1.5; color:var(--brume-basse);
}

/* ------------------------------------------------ emporter une reponse --- */

/* Reprend .action, deja a la charte. Discret au repos : ces boutons ne
   doivent pas peser plus que la reponse qu'ils accompagnent. */
.actions { opacity:.45; transition:opacity .16s ease; }
.message.ewe:hover .actions,
.actions:focus-within { opacity:1; }
.action.copie { border-color:rgba(130,255,228,.35); color:var(--menthe); }

@media (hover:none) { .actions { opacity:1; } }

/* ------------------------------------------------------ pieces jointes --- */

.outil-champ {
  flex:none; align-self:flex-end; display:grid; place-items:center;
  width:34px; height:34px; margin-bottom:1px; border-radius:9px;
  color:var(--brume); transition:color .16s ease, background .16s ease;
}
.outil-champ:hover { color:var(--blanc); background:rgba(245,245,245,.07); }
.outil-champ svg {
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.outil-champ[disabled] { opacity:.35; cursor:default; }

/* La dictee en cours doit se voir sans regarder : le micro passe au corail
   et bat, comme un enregistrement. */
.outil-champ.ecoute { color:var(--corail); background:rgba(255,130,132,.14); }
.outil-champ.ecoute svg { animation:pulse 1.2s ease-in-out infinite; }

.joints {
  display:flex; flex-wrap:wrap; gap:7px;
  max-width:780px; margin:0 auto 9px;
}
.joint {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px 6px 10px; border-radius:10px;
  border:1px solid var(--trait); background:rgba(245,245,245,.05);
  font-size:12.5px; color:var(--blanc); max-width:270px;
}
.joint.attente { opacity:.6; }
.joint.rate { border-color:rgba(255,130,132,.45); color:var(--corail); }
.joint-nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.joint-taille { flex:none; font-size:11px; color:var(--brume-basse); }
.joint-retirer {
  flex:none; display:grid; place-items:center; padding:3px;
  border-radius:6px; color:var(--brume-basse);
}
.joint-retirer:hover { color:var(--corail); background:rgba(255,130,132,.12); }
.joint-retirer svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; }

/* Les pieces jointes rappelees sous le message qu'on a envoye. */
.message.moi .joints { margin:9px 0 0; }
.message.moi .joint { background:rgba(0,0,0,.2); border-color:rgba(230,0,191,.3); }

/* Glisser-deposer : un voile plein ecran, parce qu'on ne vise pas bien un
   rectangle quand on tient un fichier au bout du curseur. */
.depot-voile {
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(14,22,26,.82); backdrop-filter:blur(2px);
}
.depot-boite {
  padding:26px 34px; border-radius:16px;
  border:2px dashed rgba(230,0,191,.65); background:rgba(230,0,191,.10);
  font-family:var(--display); font-size:17px; color:var(--blanc);
}

/* Avec un trombone a gauche, le retrait de 15px fait un trou. Si :has n'est
   pas compris, on garde simplement l'ancien retrait — rien ne casse. */
.champ:has(#joindre:not([hidden])) { padding-left:8px; }

/* ------------------------------------------ arreter la reponse en cours --- */

/* La barre vit au-dessus du champ de saisie, HORS du fil : dans la
   conversation elle defilerait et disparaitrait des qu'on remonte lire.
   Elle est la pendant toute la generation, et nulle part le reste du temps. */
.arret-barre {
  max-width:780px; margin:0 auto 9px;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
}

/* Le bouton est volontairement DISCRET : plein et colore a cet endroit, il
   appelle le clic — c'est exactement ce qu'on corrige. Il ne prend de la
   couleur qu'une fois qu'on l'a sollicite. */
.arret {
  flex:none; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--trait-fort); background:rgba(14,22,26,.86);
  color:var(--brume); font:inherit; font-size:12.5px; line-height:1.4;
  cursor:pointer; backdrop-filter:blur(8px);
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.arret:hover { color:var(--blanc); border-color:rgba(255,130,132,.45); }
.arret:focus-visible { outline:2px solid rgba(230,0,191,.6); outline-offset:2px; }
.arret svg { width:11px; height:11px; fill:currentColor; }

/* Le second etat dit ce qu'il va faire, et se paie en corail. */
.arret.confirme {
  color:var(--corail); border-color:rgba(255,130,132,.55);
  background:rgba(255,130,132,.12);
}

/* La jauge se vide sur la duree du repentir : on voit qu'on a le temps de ne
   rien faire, et que l'occasion passe. */
.arret-jauge { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--corail); }
.arret.confirme .arret-jauge { animation:arret-decompte 3.2s linear forwards; }
@keyframes arret-decompte { from { width:100%; } to { width:0; } }

.arret.apparait { animation:arret-apparait .34s ease both; }
@keyframes arret-apparait {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

.arret-note { margin:0; font-size:11.5px; line-height:1.45; color:var(--corail); }

@media (prefers-reduced-motion:reduce) {
  .arret.apparait { animation:none; }
  .arret.confirme .arret-jauge { animation:none; width:100%; }
}

@media (max-width:860px) {
  .arret-barre { margin-bottom:8px; }
  .arret-note { flex-basis:100%; text-align:center; }
}