/* AstroPredict : page « Questions à Zodiac Intelligence » (proposition 1 validée le 30/10/2026).
   En haut, la conversation qui s'écrit : la vraie question de Camille, les étapes de Zodiac Intelligence, puis sa vraie réponse, mot à mot (ia.js).
   Avant « Ce que tu peux commander », le flux : ton ciel calculé → Zodiac Intelligence → ta réponse (élément de la proposition 3). */
.ia-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ia-note { position: relative; z-index: 1; margin: 14px 2px 0; font-size: 13px; color: var(--encre-2); }
.haut .titre { font-size: clamp(40px, 4.6vw, 66px); }
.haut { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .ia-anim, .ia-anim * { animation: none !important; transition: none !important; } }

/* ---------- La conversation qui s'écrit ---------- */
.ia-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.chat-scene { position: relative; }
.chat-scene::before { content: ""; position: absolute; inset: -56px -44px; z-index: 0; border-radius: 80px; filter: blur(34px); opacity: 1;
  background: radial-gradient(38% 42% at 12% 18%, #FFB98C, transparent 72%), radial-gradient(40% 44% at 92% 28%, #9FCDF0, transparent 72%), radial-gradient(46% 40% at 55% 98%, #A2E1CB, transparent 72%);
  animation: aurore 14s ease-in-out infinite alternate; }
@keyframes aurore { to { transform: translate(14px, -10px) scale(1.04); } }
.chat { position: relative; z-index: 1; border-radius: 22px; background: rgb(255 255 255 / .9); box-shadow: 0 50px 100px -50px rgb(21 33 43 / .5), 0 0 0 1px rgb(21 33 43 / .08); overflow: hidden; }
.chat__tete { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--filet); }
.chat__tete b { font: 600 15px/1 var(--f-titre); letter-spacing: -.01em; }
.chat__tete span:last-child { margin-left: auto; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #1F6B50; display: flex; align-items: center; gap: 6px; }
.chat__tete span:last-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2E8F6E; box-shadow: 0 0 0 3px rgb(46 143 110 / .18); }
.orbe { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #FFC9A8 30%, #A9D5F4 70%, #A2E1CB 100%); box-shadow: 0 0 18px rgb(255 185 140 / .6); }
.orbe i { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #B5502B; border-right-color: rgb(181 80 43 / .3); animation: tourne 1.6s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.chat__corps { padding: 18px; display: grid; gap: 14px; min-height: 470px; align-content: start; }
.bulle { justify-self: end; max-width: 85%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--encre); color: #fff; font-size: 15.5px; line-height: 1.45; min-height: 46px; }
.bulle:empty::after, .bulle.tape::after { content: "▍"; animation: clignote 1s steps(1) infinite; margin-left: 1px; }
@keyframes clignote { 50% { opacity: 0; } }
.pense { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #F6F2EA; }
.pense li { list-style: none; display: grid; grid-template-columns: 18px auto 1fr; gap: 8px; align-items: center; font-size: 13.5px; color: var(--encre-2); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.pense li.vu { opacity: 1; transform: none; }
.pense li b { color: var(--encre); font-weight: 600; white-space: nowrap; }
.pense li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(21 33 43 / .15); border-top-color: #B5502B; animation: tourne .8s linear infinite; }
.pense li.fait i { animation: none; border: 0; background: #CFEFDF; position: relative; }
.pense li.fait i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #1F6B50; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pense ul { margin: 0; padding: 0; display: grid; gap: 8px; }
.pense__titre { font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); display: flex; align-items: center; gap: 8px; }
.ia-dit { display: grid; gap: 10px; opacity: 0; transition: opacity .4s; }
.ia-dit.vu { opacity: 1; }
.ia-dit__qui { font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.verdict { justify-self: start; padding: 6px 12px; border-radius: 999px; background: #FBD9C6; box-shadow: inset 0 0 0 1px rgb(181 80 43 / .25); font-weight: 600; font-size: 14px; }
.ia-texte { margin: 0; padding: 14px 16px; border-radius: 16px; background: #F6F6F4; font-size: 15px; line-height: 1.6; color: var(--encre-2); min-height: 4.8em; }
.ia-texte.tape::after { content: "▍"; animation: clignote 1s steps(1) infinite; color: #B5502B; }
.suites { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transition: opacity .4s; }
.suites.vu { opacity: 1; }
.suites span { padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet-fort); font-size: 13px; background: #fff; }
.chat__pied { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--filet); background: #FBF8F3; }
.chat__pied a { flex: 1; display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); color: var(--encre-2); text-decoration: none; font-size: 15px; }
.chat__pied a + a { flex: none; width: 44px; padding: 0; justify-content: center; background: var(--encre); color: #fff; box-shadow: none; font-size: 18px; }
.rejouer { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 900px) { .ia-haut { grid-template-columns: minmax(0, 1fr); } .chat__corps { min-height: 520px; } .chat-scene::before { inset: -30px -12px; } }

/* ---------- Le flux vers Zodiac Intelligence ---------- */
.ia-flux { position: relative; margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .9fr) minmax(0, 1.05fr); align-items: center; gap: 0;
  padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: rgb(255 255 255 / .6); box-shadow: 0 40px 90px -50px rgb(21 33 43 / .45), 0 0 0 1px rgb(21 33 43 / .07); overflow: hidden; }
.ia-flux__voies { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ia-flux__carte { position: relative; z-index: 1; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -28px rgb(21 33 43 / .45), 0 0 0 1px rgb(21 33 43 / .08); overflow: hidden; }
.ia-flux__carte img { display: block; width: 100%; height: auto; }
.ia-flux__roue { display: block; padding: 10px 10px 0; background: #FBF6EE; }
.ia-flux__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px 12px; background: #FBF6EE; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--encre-2); }
.ia-flux__legende > span { display: inline-flex; align-items: center; gap: 7px; }
.ia-flux__legende i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ia-flux__legende i.nat { background: #FFC9A8; box-shadow: inset 0 0 0 1px rgb(181 80 43 / .35); }
.ia-flux__legende i.tr { background: #D9E6EF; box-shadow: inset 0 0 0 1px rgb(61 127 176 / .45); }
.ia-flux__etiq b { color: var(--encre); }
.ia-flux__etiq { display: block; padding: 10px 14px; font: 600 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); border-bottom: 1px solid var(--filet); background: #F4ECDF; }
.ia-flux__coeur { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; text-align: center; }
.ia-coeur { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; }
.ia-coeur__boule { position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, #FFD7BD 26%, #FFB98C 44%, #A9D5F4 72%, #A2E1CB 100%);
  box-shadow: 0 0 60px 10px rgb(255 185 140 / .45), inset -10px -14px 30px rgb(21 33 43 / .12); animation: respire 4s ease-in-out infinite; }
.ia-coeur__anneau { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgb(21 33 43 / .25); animation: tourne 26s linear infinite; }
.ia-coeur__anneau + .ia-coeur__anneau { inset: -6%; border-style: solid; border-color: transparent; border-top-color: #B5502B; border-left-color: rgb(181 80 43 / .25); animation-duration: 5s; }
@keyframes respire { 50% { transform: scale(1.05); box-shadow: 0 0 80px 18px rgb(255 185 140 / .55), inset -10px -14px 30px rgb(21 33 43 / .12); } }
.ia-coeur__nom { font: 600 18px/1.1 var(--f-titre); letter-spacing: -.01em; }
.ia-coeur__verbes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ia-coeur__verbes span { padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); font: 500 11.5px/1 var(--f-mono); letter-spacing: .04em; }
.ia-flux__rep { padding: 16px; display: grid; gap: 10px; }
.ia-flux__rep .q { justify-self: end; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--encre); color: #fff; font-size: 14px; }
.ia-flux__rep .verdict { justify-self: start; padding: 5px 11px; border-radius: 999px; background: #FBD9C6; font-weight: 600; font-size: 13px; }
.ia-flux__rep p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--encre-2); }
.ia-flux__rep .ok { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1.3 var(--f-mono); color: #1F6B50; }
.ia-flux__rep .ok::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #CFEFDF; font-size: 11px; }
@media (max-width: 900px) {
  .ia-flux { grid-template-columns: minmax(0, 1fr); gap: 72px; }
}
#offres { scroll-margin-top: 90px; }
@media (max-width: 860px) { #offres { scroll-margin-top: 130px; } }