/* AI Engineering Bootcamp : même gabarit que le Data Analyst (da.css), avec sa propre couleur (violet et cyan) */
body.aie .ab-aurore i:nth-child(1) { background: rgba(167,139,250,.48); }
body.aie .ab-aurore i:nth-child(2) { background: rgba(0,212,255,.36); }
body.aie .ab-aurore i:nth-child(3) { background: rgba(244,114,182,.2); }
body.aie .ab-hero h1 em { background: linear-gradient(100deg, #c4b5fd, #a78bfa 45%, #00d4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.aie .ab-methode { color: #c4b5fd; }
body.aie .da-ligne { stroke: #a78bfa; }
body.aie .section .section-label, body.aie .section .section-title em { color: #6d28d9; }
/* Prérequis lisibles sur les sections claires */
body.aie .prerequis-list li { color: #0f172a; background: rgba(109,40,217,.06); border-color: rgba(109,40,217,.18); }
body.aie .prerequis-list li span { color: #6d28d9; }
body.aie .prerequis-title { color: #6d28d9; }
/* Sur mobile, la colonne de texte ne doit jamais dépasser l'écran */
@media (max-width: 900px) {
  body.aie .ab-hero { grid-template-columns: minmax(0, 1fr); }
  body.aie .ab-badge { white-space: normal; }
}

/* ══ En-tête : un agent IA, du code à la production (animé par aie.js) ══ */
.aie-scene { position: relative; height: 610px; transform: perspective(1300px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.aie-carte { position: absolute; z-index: 2; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(30,24,58,.88), rgba(14,11,30,.9)); border: 1px solid rgba(167,139,250,.28);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .8s, transform .9s cubic-bezier(.2,.7,.2,1); }
.aie-pret .aie-carte { opacity: 1; transform: none; }
.aie-pret .aie-chat { transition-delay: .25s; } .aie-pret .aie-term { transition-delay: .5s; }
.aie-tete { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.aie-tete b { font: 600 12.5px/1 Inter, system-ui, sans-serif; color: rgba(241,245,249,.92); }
.aie-tete em { margin-left: auto; font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #fcd34d; border: 1px solid rgba(252,211,77,.35); border-radius: 999px; padding: 4px 8px; }
/* Code */
.aie-code { top: 0; left: 0; width: 57%; }
.aie-code pre { margin: 0; padding: 12px 16px 16px; min-height: 186px; font: 12px/1.7 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; color: #e2e8f0; white-space: pre; overflow: hidden; }
.aie-ligne { display: block; min-height: 1.7em; }
.aie-code i { font-style: normal; } .aie-code i.k { color: #c084fc; } .aie-code i.s { color: #86efac; } .aie-code i.f { color: #67e8f9; } .aie-code i.c { color: #7c8aa3; font-style: italic; }
.aie-curseur { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #a78bfa; animation: aie-clignote 1s steps(1) infinite; }
@keyframes aie-clignote { 50% { opacity: 0; } }
/* Conversation */
.aie-chat { top: 36px; right: 0; width: 47%; z-index: 3; }
.aie-direct { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: aie-pouls 1.8s infinite; }
@keyframes aie-pouls { 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.aie-q, .aie-r { padding: 10px 14px 0; }
.aie-r { padding-bottom: 14px; }
.aie-q small, .aie-r small { display: block; margin-bottom: 5px; font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(203,213,225,.5); }
.aie-q p, .aie-r p { margin: 0; min-height: 40px; padding: 9px 12px; border-radius: 12px; font: 400 13px/1.5 Inter, system-ui, sans-serif; color: #f1f5f9; }
.aie-q p { background: rgba(255,255,255,.06); }
.aie-r p { background: linear-gradient(135deg, rgba(167,139,250,.2), rgba(0,212,255,.12)); border: 1px solid rgba(167,139,250,.3); min-height: 60px; opacity: .35; transition: opacity .4s; }
.aie-repondu .aie-r p { opacity: 1; }
.aie-src { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 999px; font: 500 11px/1.2 Inter, system-ui, sans-serif; color: #c4b5fd; border: 1px dashed rgba(196,181,253,.45); }
.aie-src:empty { display: none; }
/* Graphe de l'agent */
.aie-graphe { position: absolute; z-index: 1; left: 3%; width: 94%; top: 300px; height: auto; overflow: visible; }
.aie-arete { fill: none; stroke: rgba(167,139,250,.24); stroke-width: 1.6; stroke-dasharray: 4 5; transition: stroke .4s; }
.aie-arete.aie-on { stroke: url(#aie-degrade); stroke-dasharray: none; stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(167,139,250,.75)); }
.aie-noeud .aie-halo { fill: rgba(167,139,250,.07); stroke: rgba(167,139,250,.22); transition: fill .4s; }
.aie-noeud .aie-coeur { fill: #1b1636; stroke: rgba(196,181,253,.55); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.aie-noeud text { fill: rgba(226,232,240,.7); font: 600 11.5px Inter, system-ui, sans-serif; transition: fill .4s; }
.aie-noeud.aie-on .aie-halo { fill: rgba(167,139,250,.24); stroke: rgba(196,181,253,.7); animation: aie-halo 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.aie-noeud.aie-on .aie-coeur { fill: url(#aie-degrade); stroke: #fff; }
.aie-noeud.aie-on text { fill: #fff; }
@keyframes aie-halo { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.aie-point { fill: #fff; filter: drop-shadow(0 0 6px #a78bfa) drop-shadow(0 0 12px #00d4ff); }
/* Terminal */
.aie-term { left: 0; bottom: 0; width: 55%; z-index: 4; }
.aie-term-ligne { margin: 0; padding: 11px 14px 13px; min-height: 40px; font: 11.5px/1.4 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; color: #86efac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Halos en orbite et nuages de technologies */
.aie-orbite { position: absolute; z-index: 0; left: 50%; top: 58%; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; }
.aie-orbite i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(167,139,250,.16); animation: aie-tourne 40s linear infinite; }
.aie-orbite i + i { inset: 70px; border-color: rgba(0,212,255,.14); animation-duration: 28s; animation-direction: reverse; }
@keyframes aie-tourne { to { transform: rotate(360deg); } }
.aie-puces span { position: absolute; z-index: 1; padding: 5px 10px; border-radius: 999px; font: 600 11px/1 Inter, system-ui, sans-serif; color: rgba(226,232,240,.85);
  background: rgba(20,16,40,.7); border: 1px solid rgba(255,255,255,.1); animation: aie-flotte 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.aie-puces span:nth-child(1) { right: 1%; top: 300px; } .aie-puces span:nth-child(2) { right: 46%; top: 300px; }
.aie-puces span:nth-child(3) { right: 4%; bottom: 8px; } .aie-puces span:nth-child(4) { left: 1%; top: 268px; }
@keyframes aie-flotte { 50% { transform: translateY(-8px); } }
@media (max-width: 1100px) { .aie-scene { height: 650px; } .aie-code { width: 62%; } .aie-chat { width: 52%; top: 150px; } .aie-graphe { top: 360px; } }
@media (max-width: 900px) {
  .aie-scene { height: auto; display: grid; gap: 12px; transform: none; }
  .aie-carte, .aie-graphe { position: relative; inset: auto; width: 100%; top: auto; left: auto; right: auto; bottom: auto; }
  .aie-code pre { min-height: 0; font-size: 10.5px; }
  .aie-orbite, .aie-puces { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aie-carte { opacity: 1; transform: none; transition: none; } .aie-orbite i, .aie-puces span, .aie-noeud.aie-on .aie-halo { animation: none; } }