/* The landing's assistants section (#assistants in landing.html).
 *
 * Its own file so the landing's copy and styles, which are being reworked,
 * stay untouched. One exchange, played on a loop: the question appears, the
 * assistant calls Thesr, the request travels, three passages light up, they
 * travel back, and the answer arrives with its citations. Under reduced
 * motion the finished exchange is shown still.
 */

.l-ai { background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%); }
.l-ai__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.l-ai__copy h2 {
  margin: 1.1rem 0 0;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  line-height: 1.1;
  color: var(--c-ink, #0B1433);
}
.l-ai__copy p {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-ink-soft, #3B4860);
}
/* The two ways in, side by side, and the one base under both. */
.l-ai .l-ai__ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.l-ai__way {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid #DEDCD6;
  border-radius: var(--r-md, 16px);
  background: #FFFFFF;
}
.l-ai__way strong { font-size: 0.98rem; color: var(--c-ink, #0B1433); }
.l-ai__way > span:last-child { font-size: 0.86rem; line-height: 1.5; color: var(--c-ink-soft, #3B4860); }
.l-ai__way-mark {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 0.25rem;
}
.l-ai__way-mark > img { border-radius: 7px; }
/* The three assistants overlap a little, like faces in a meeting. */
.l-ai__way-mark--ai > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #DEDCD6;
  border-radius: 50%;
  background: #FFFFFF;
}
.l-ai__way-mark--ai > span + span { margin-left: -6px; }
.l-ai .l-ai__base {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-ink-soft, #3B4860);
}
.l-ai__base i { margin-top: 0.2rem; color: #0B1F4D; }

/* ── The stage ───────────────────────────────────────────────────────── */
.l-ai__show { --loop: 11s; min-width: 0; }
.l-ai__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 72px minmax(0, 1fr);
  align-items: center;
}
.l-ai__chat,
.l-ai__thesr {
  border: 1px solid #DEDCD6;
  border-radius: var(--r-md, 16px);
  background: #FFFFFF;
  box-shadow: var(--sh-md, 0 24px 48px -24px rgba(11, 20, 51, 0.32));
}
.l-ai__chat { display: flex; flex-direction: column; gap: 0.6rem; min-height: 19rem; padding: 1rem; }
.l-ai__chat-head,
.l-ai__thesr-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #F7F6F2;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--c-ink, #0B1433);
}
.l-ai__msg { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.l-ai__msg p { margin: 0; }
.l-ai .l-ai__msg--user {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px 14px 4px 14px;
  background: #0B1F4D;
  color: #FFFFFF;
  animation: l-ai-user var(--loop) ease-out infinite;
}
.l-ai__tool {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #F3F7FF;
  color: #0B1F4D;
  font-size: 0.78rem;
  font-weight: 600;
  animation: l-ai-tool var(--loop) ease-out infinite;
}
.l-ai__spin {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(11, 31, 77, 0.25);
  border-top-color: #0B1F4D;
  border-radius: 50%;
  animation: l-ai-spin 0.9s linear infinite;
}
.l-ai__msg--bot {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px 14px 14px 4px;
  background: #F7F6F2;
  color: var(--c-ink, #0B1433);
  animation: l-ai-bot var(--loop) ease-out infinite;
}
.l-ai__cites { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.l-ai__cite {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #DEDCD6;
  color: #0B1F4D;
  font-size: 0.74rem;
  font-weight: 600;
}
.l-ai__cite i { font-size: 0.64rem; }

/* The wire between the assistant and Thesr, and what travels on it. */
.l-ai__wire {
  position: relative;
  height: 2px;
  margin: 0 6px;
  background: repeating-linear-gradient(90deg, rgba(11, 31, 77, 0.25) 0 6px, transparent 6px 12px);
}
.l-ai__packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  opacity: 0;
}
.l-ai__packet--out { background: #0B1F4D; animation: l-ai-out var(--loop) ease-in-out infinite; }
.l-ai__packet--back { background: #169F65; animation: l-ai-back var(--loop) ease-in-out infinite; }
.l-ai__packet--2 { animation-delay: 0.35s; }

.l-ai__thesr { padding: 1rem; }
.l-ai__thesr-head img { border-radius: 7px; }
.l-ai__lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #F3F7FF;
  color: #0B1F4D;
  font-size: 0.7rem;
}
.l-ai__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--c-ink-soft, #3B4860);
  background: #FBFAF7;
}
.l-ai__row i { color: #0B1F4D; font-size: 0.8rem; }
.l-ai__row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-ai__row mark {
  flex: 0 0 auto;
  padding: 0 0.3rem;
  border-radius: 4px;
  background: #FFEEC3;
  color: var(--c-ink, #0B1433);
  font-size: 0.72rem;
}
.l-ai__row--1 { animation: l-ai-row1 var(--loop) ease-out infinite; }
.l-ai__row--2 { animation: l-ai-row2 var(--loop) ease-out infinite; }
.l-ai__row--3 { animation: l-ai-row3 var(--loop) ease-out infinite; }

/* ── What the assistant can do, one pill per exchange ───────────────── */
.l-ai__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.l-ai__pills[hidden] { display: none; }
.l-ai__pill {
  position: relative;
  overflow: hidden;
  padding: 0.45rem 0.9rem;
  border: 1px solid #DEDCD6;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--c-ink-soft, #3B4860);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.l-ai__pill:hover { border-color: #C0BEB5; color: #0B1F4D; }
.l-ai__pill:focus-visible { outline: 2px solid #0B1F4D; outline-offset: 2px; }
.l-ai__pill.is-active { border-color: #0B1F4D; color: #0B1F4D; }
/* The active pill fills up over its turn, so the next change is expected. */
.l-ai__pill.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #0B1F4D;
  transform-origin: left;
  animation: l-ai-fill var(--loop) linear infinite;
}
.l-ai__show.is-restarting *,
.l-ai__show.is-restarting *::after { animation: none; }

/* ── The loop ─────────────────────────────────────────────────────────── */
@keyframes l-ai-user {
  0%, 3% { opacity: 0; transform: translateY(8px); }
  8%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes l-ai-tool {
  0%, 12% { opacity: 0; transform: translateY(6px); }
  16%, 66% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; }
}
@keyframes l-ai-out {
  0%, 18% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  34% { left: calc(100% - 10px); opacity: 1; }
  36%, 100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes l-ai-back {
  0%, 54% { left: calc(100% - 10px); opacity: 0; }
  56% { opacity: 1; }
  68% { left: 0; opacity: 1; }
  70%, 100% { left: 0; opacity: 0; }
}
@keyframes l-ai-row1 {
  0%, 36% { opacity: 0.35; background: #FBFAF7; }
  40%, 92% { opacity: 1; background: #F3F7FF; }
  98%, 100% { opacity: 0.35; background: #FBFAF7; }
}
@keyframes l-ai-row2 {
  0%, 41% { opacity: 0.35; background: #FBFAF7; }
  45%, 92% { opacity: 1; background: #F3F7FF; }
  98%, 100% { opacity: 0.35; background: #FBFAF7; }
}
@keyframes l-ai-row3 {
  0%, 46% { opacity: 0.35; background: #FBFAF7; }
  50%, 92% { opacity: 1; background: #F3F7FF; }
  98%, 100% { opacity: 0.35; background: #FBFAF7; }
}
@keyframes l-ai-bot {
  0%, 68% { opacity: 0; transform: translateY(8px); }
  74%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes l-ai-spin { to { transform: rotate(360deg); } }
@keyframes l-ai-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Narrow screens: the three pieces stack, the wire turns vertical ─── */
@media (max-width: 900px) {
  .l-ai__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .l-ai .l-ai__ways { grid-template-columns: 1fr; }
  .l-ai__stage { grid-template-columns: 1fr; grid-template-rows: auto 48px auto; }
  .l-ai__wire {
    justify-self: center;
    width: 2px;
    height: 100%;
    margin: 0;
    background: repeating-linear-gradient(180deg, rgba(11, 31, 77, 0.25) 0 6px, transparent 6px 12px);
  }
  .l-ai__packet { left: 50%; margin-left: -5px; }
  .l-ai__packet--out,
  .l-ai__packet--back { animation: none; opacity: 0; }
  .l-ai__chat { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .l-ai .l-ai__msg--user,
  .l-ai__msg--bot,
  .l-ai__row--1,
  .l-ai__row--2,
  .l-ai__row--3 { animation: none; opacity: 1; transform: none; }
  .l-ai__tool,
  .l-ai__packet { animation: none; opacity: 0; }
  .l-ai__spin,
  .l-ai__pill.is-active::after { animation: none; }
}

/* La scène hors de la landing (découverte d'un bac à sable, onglet IA).
 *
 * Plusieurs règles d'animation sont accrochées à `.l-ai` - « .l-ai .l-ai__msg
 * --user { animation: … } » - et sans cet ancêtre la scène s'affichait figée,
 * à l'état final. L'ancêtre est donc là, sans le fond de la section qui n'a
 * pas de sens dans l'application (23 septembre). */
.l-ai--bare {
  background: none;
  min-width: 0;
}

/* ── One stage for the connectors and the assistants (landing) ────────
   The ring and the exchange occupy the same cell and take turns, so the
   section is as tall as the taller of the two and no taller. With no
   JavaScript (neither class on the stage) both show, one under the other. */
.l-connect__stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
}
.l-connect__stage > .l-orbit,
.l-connect__stage > .l-ai {
  grid-area: 1 / 1;
  width: 100%;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0s;
}
.l-connect__stage > .l-orbit { max-width: 400px; }
.l-connect__stage > .l-ai { padding: 0; margin: 0; background: none; justify-self: stretch; min-width: 0; }
.l-connect__stage > .l-ai .l-ai__inner { display: block; padding: 0; max-width: none; }
.l-connect__stage.is-orbit > .l-ai,
.l-connect__stage.is-ai > .l-orbit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.l-connect__stage.is-orbit > .l-ai { transform: translateY(10px); }
.l-connect__stage.is-ai > .l-orbit { transform: scale(0.94); }
.l-connect__stage:not(.is-orbit):not(.is-ai) { display: block; }
.l-connect__stage:not(.is-orbit):not(.is-ai) > .l-orbit { margin: 0 auto 2rem; }