/* =============================================================================================
   04 Visibilité IA (incluse) : idée à gauche, aperçu d'une conversation ChatGPT à droite.
   Animation : js/demo-ia.js.
   Les anciennes règles .ia et .ai-demo de sections.css ne servent plus à cette section.
   ============================================================================================= */

/* ---- Mise en page ---- */
.ia-head { max-width: 560px; }
/* La figure suit .sec-head : ni la marge de .sec-head + *, ni celle des navigateurs.
   Grille : l'aperçu sur toute la largeur, puis la mention et le bouton « Rejouer » sur une ligne. */
.ia-duo > .gpt-fig {
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
}
.gpt-fig > .gpt { grid-column: 1 / -1; }

/* Bouton clair sur l'aplat bordeaux, même comportement que les autres boutons pleins
   (remplissage rose depuis la gauche et grossissement de 1,05 : components.css). */
.btn-fill.ia-cta { background: var(--on); color: var(--dark); }
.btn-fill.ia-cta .btn-fill__fill { background: var(--dark); }
.btn-fill.ia-cta:hover,
.btn-fill.ia-cta.is-filled { color: var(--hldi); }

/* Mention sous l'aperçu : hauteur du bouton « Rejouer » réservée d'emblée (aucun décalage). */
.gpt-note {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: var(--space-2) var(--space-1) 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--on2);
}
.gpt-replay[hidden] + .gpt-note { grid-column: 1 / -1; }

/* « Rejouer » : visible à la fin de la conversation (js/demo-ia.js), jamais sans script ni en
   mouvement réduit (attribut hidden). Sa place est gardée pendant la lecture. */
.gpt-replay {
  grid-row: 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: var(--dsurf);
  color: var(--on);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms linear, opacity 200ms linear, visibility 0s linear 0s;
}
.gpt-replay:hover { background: var(--dline); }
.gpt-replay:not(.is-shown) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms linear, visibility 0s linear 200ms;
}

/* Texte lu par les lecteurs d'écran seulement. */
.gpt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Aperçu de ChatGPT : couleurs et police de l'interface claire de ChatGPT ---- */
.gpt {
  --gpt-bg: #ffffff;
  --gpt-ink: #0d0d0d;
  --gpt-mute: #5d5d5d;
  --gpt-soft: #f4f4f4;
  --gpt-ph: #6b6b6b;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--gpt-bg);
  color: var(--gpt-ink);
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 50px 90px -48px rgba(28, 0, 8, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: default;
}
.gpt svg { flex: none; display: block; }

/* Barre du haut : logo, nom, sélecteur ; partage à droite. */
.gpt__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px 0 18px;
}
.gpt__brand {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.gpt__logo { width: 22px; height: 22px; fill: var(--gpt-ink); }
.gpt__chev,
.gpt__icon,
.gpt__tools svg {
  fill: none;
  stroke: var(--gpt-mute);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gpt__chev { width: 16px; height: 16px; margin-left: -2px; stroke-width: 2.2; }
.gpt__icon { width: 20px; height: 20px; }

/* Fil de la conversation */
.gpt__thread {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 20px 6px;
}
.gpt__ask {
  margin: 0 0 0 auto;
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--gpt-soft);
}
.gpt__reply { position: relative; }
.gpt__text { margin: 0; line-height: 1.75; }
.gpt__text strong { font-weight: 600; }

/* Pastille de citation dans le texte (« site +2 ») */
.gpt__cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--gpt-soft);
  color: var(--gpt-mute);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Actions sous la réponse, puis le bouton « Sources » et ses icônes de sites */
.gpt__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 8px 0 0 -6px;
}
.gpt__tools svg { width: 30px; height: 30px; padding: 6px; }
.gpt__sources {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-left: 6px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: var(--gpt-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--gpt-ink);
}
.gpt__fav {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gpt-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.gpt__fav + .gpt__fav { margin-left: -10px; }
.gpt__fav--a { background: #0e5c4a; }
.gpt__fav--b { background: #2f5da8; }
.gpt__fav--c { background: #9a3d0c; }

/* Zone de saisie. Le socle (.gpt__dock) garde la hauteur d'une ligne ; la zone elle-même est
   posée en bas du socle et grandit vers le haut quand la question tape sur plusieurs lignes,
   par-dessus le fil encore vide : la carte ne change jamais de hauteur. */
.gpt__dock { position: relative; height: 84px; }
.gpt__composer {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "plus field mic send";
  align-items: center;
  column-gap: 10px;
  min-height: 56px;
  padding: 0 10px 0 16px;
  border-radius: 28px;
  background: var(--gpt-bg);
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.1), 0 6px 16px -8px rgba(13, 13, 13, 0.18);
}
.gpt__plus { grid-area: plus; }
.gpt__mic { grid-area: mic; }
.gpt__field { grid-area: field; display: grid; min-width: 0; }
.gpt__placeholder,
.gpt__typed { grid-area: 1 / 1; min-width: 0; }
.gpt__placeholder {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gpt-ph);
}
.gpt__typed { overflow-wrap: anywhere; color: var(--gpt-ink); }
/* Question sur plusieurs lignes : le texte prend toute la largeur, les boutons passent dessous,
   comme dans ChatGPT. */
.gpt.is-multi .gpt__composer {
  grid-template-areas: "field field field field" "plus . mic send";
  row-gap: 8px;
  padding: 14px 10px 10px 16px;
}
.gpt.has-text .gpt__placeholder { visibility: hidden; }

/* Curseur de saisie : clignote à l'arrêt, fixe pendant la frappe. */
.gpt__caret {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 1px;
  vertical-align: -0.25em;
  background: var(--gpt-ink);
  visibility: hidden;
}
.gpt.is-focus .gpt__caret { visibility: visible; animation: gpt-blink 1s steps(1) infinite; }
.gpt.is-typing .gpt__caret { animation: none; }
@keyframes gpt-blink { 50% { opacity: 0; } }

/* Bouton rond : mode vocal à vide, flèche d'envoi dès qu'il y a du texte, carré d'arrêt pendant
   la réponse. */
.gpt__voice {
  position: relative;
  grid-area: send;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gpt-ink);
  transition: transform 120ms var(--ease-out);
}
.gpt__bars,
.gpt__voice .gpt__arrow,
.gpt__stop {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 150ms linear;
}
.gpt__bars { display: flex; align-items: center; justify-content: center; gap: 2.5px; }
.gpt__bars i { width: 2.5px; border-radius: 2px; background: var(--gpt-bg); }
.gpt__bars i:nth-child(1) { height: 7px; }
.gpt__bars i:nth-child(2) { height: 14px; }
.gpt__bars i:nth-child(3) { height: 10px; }
.gpt__bars i:nth-child(4) { height: 5px; }
.gpt__voice .gpt__arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gpt-bg);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.gpt__stop { width: 12px; height: 12px; border-radius: 2px; background: var(--gpt-bg); opacity: 0; }
.gpt.has-text .gpt__bars,
.gpt.is-busy .gpt__bars { opacity: 0; }
.gpt.has-text .gpt__arrow,
.gpt.is-busy .gpt__stop { opacity: 1; }
.gpt.is-press .gpt__voice { transform: scale(0.88); }

/* ---- Scène (js/demo-ia.js) : la question se tape, part, ChatGPT réfléchit puis répond ----
   is-armed : scène prête (fil vide) ; is-focus, has-text, is-typing, is-multi : saisie ;
   is-asked : la bulle monte en haut du fil ; is-busy : réponse en cours ; is-thinking : rond
   qui respire ; .gpt-w.is-on : morceaux de réponse affichés ; is-done : citation, actions et
   sources ; is-cited : la pastille du site cité ressort.
   Tout ce qui est masqué garde sa place (opacité) : la carte ne change jamais de hauteur. */
.gpt [data-gpt-ask] { transition: opacity 180ms linear, transform 420ms var(--ease-out); }
.gpt.is-armed:not(.is-asked) [data-gpt-ask] { opacity: 0; transform: translateY(var(--gpt-rise, 24px)); }
.gpt .gpt-w { transition: opacity 220ms linear; }
.gpt.is-armed .gpt-w:not(.is-on) { opacity: 0; }
.gpt [data-gpt-late] { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.gpt.is-done .gpt__tools { transition-delay: 120ms; }
.gpt.is-armed:not(.is-done) [data-gpt-late] { opacity: 0; transform: translateY(4px); }

/* Rond noir de ChatGPT : il respire pendant la réflexion, puis suit la fin du texte qui s'écrit.
   Élément en ligne vide, déplacé après le dernier morceau affiché : les lignes ne bougent pas. */
.gpt__cur { position: relative; }
.gpt__cur::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--gpt-ink);
}
.gpt__cur.is-start::after { left: 0; }
.gpt.is-thinking .gpt__cur::after { animation: gpt-think 800ms var(--ease-in-out) infinite alternate; }
@keyframes gpt-think {
  from { transform: scale(0.6); }
  to { transform: scale(1); }
}

/* Le site cité ressort : halo rose bref, puis la pastille garde l'aspect survolé de ChatGPT. */
.gpt.is-cited .gpt__cite {
  background: #ececec;
  color: var(--gpt-ink);
  animation: gpt-cite 900ms var(--ease-out) 1;
}
@keyframes gpt-cite {
  from { box-shadow: 0 0 0 0 rgba(240, 183, 164, 0.95); }
  to { box-shadow: 0 0 0 10px rgba(240, 183, 164, 0); }
}

/* Remise à zéro sans transition (avant une lecture, ou quand l'aperçu sort de l'écran). */
.gpt.gpt--instant,
.gpt.gpt--instant *,
.gpt.gpt--instant *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gpt *,
  .gpt *::before,
  .gpt *::after,
  .gpt-replay { transition: none !important; animation: none !important; }
}