/* Page Agent IA : haut de page, 3e version (07/10/2026).
   PO : « un robot humanoïde en train de travailler sur un ordi, futuriste, qui donne envie ;
   garder un peu le style dessin mais pro et beaucoup plus travaillé ». Illustration B choisie par PO
   (générée avec gpt-image-1, source : ARTOO/PROJETS/aikirolab/2-COM/site-web/agent-ia-hero/robot-B.png).
   Animation gratuite par-dessus : zoom lent, panneaux qui s'allument, yeux qui pulsent, coches, étiquettes. */

.ag-hero{position:relative;overflow:hidden;background:#050C22;color:#F7F4EE;padding:120px 0 64px}
.ag-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 460px at 18% 30%,rgba(15,35,96,.55),transparent 70%),radial-gradient(500px 400px at 70% 90%,rgba(184,134,11,.12),transparent 70%)}
.ag-wrap{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;padding-left:24px}
.ag-texte{position:relative;z-index:3;padding:10px 0 10px 0}
.ag-fil{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,238,.45);margin-bottom:20px}
.ag-fil a{color:inherit;text-decoration:none}.ag-fil a:hover{color:#E9C46A}.ag-fil b{color:#E9C46A}
.ag-eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#E9C46A;margin-bottom:18px}
.ag-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#2EE59D;box-shadow:0 0 0 0 rgba(46,229,157,.55);animation:agPing 2s infinite}
@keyframes agPing{70%{box-shadow:0 0 0 9px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
.ag-hero h1{font:700 clamp(34px,4vw,54px)/1.06 'Space Grotesk',sans-serif;margin:0 0 18px;letter-spacing:-.01em;color:#fff}
.ag-hero h1 .gl{color:#E9C46A}
.ag-lead{font-size:17.5px;line-height:1.6;color:rgba(247,244,238,.75);max-width:540px;margin:0 0 22px}
.ag-lead strong{color:#fff}
.ag-liste{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px 18px;max-width:580px}
.ag-liste li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.35;font-weight:600;color:#F7F4EE}
.ag-liste .ico{flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(233,196,106,.1);border:1px solid rgba(233,196,106,.35)}
.ag-liste .ico svg{width:16px;height:16px;fill:none;stroke:#E9C46A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:24px}
.ag-btn{display:inline-flex;align-items:center;justify-content:center;background:#D94F35;color:#fff;font:700 13px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:18px 30px;border-radius:999px;text-decoration:none;box-shadow:0 16px 36px -14px rgba(217,79,53,.7);transition:transform .2s ease}
.ag-btn:hover{transform:translateY(-2px)}
.ag-lien{color:#F7F4EE;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(233,196,106,.5);padding-bottom:3px}
.ag-lien:hover{border-color:#E9C46A}
.ag-trust{display:flex;flex-wrap:wrap;gap:10px}
.ag-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(247,244,238,.85);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:7px 12px;border-radius:999px}
.ag-trust svg{width:14px;height:14px;stroke:#2EE59D;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- L'illustration et son animation ---------- */
.ag-visu{position:relative;margin-right:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%)}
.ag-cadre{position:relative;aspect-ratio:3/2;overflow:hidden;container-type:inline-size}
.ag-zoom{position:absolute;inset:0}
@keyframes agZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.ag-zoom img,.ag-video{width:100%;height:100%;object-fit:cover;display:block}
.ag-cadre{perspective:1100px}
/* la carte email, dessinée en code (nette, jamais déformée), calée sur le panneau « email → dossier » de l'image */
.ag-mail{position:absolute;left:35.2%;top:10.3%;width:13.4%;height:24.4%;border-radius:6px;background:#F6DFA9;opacity:0;
  box-shadow:0 0 0 1px rgba(176,122,42,.35),0 0 30px 8px rgba(255,196,96,.55);transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}
.ag-mail svg{width:78%;height:auto;fill:none;stroke:#B07A2A;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ag-archive{position:absolute;left:43%;top:45%;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(5,12,34,.86);color:#fff;
  border:1px solid rgba(46,229,157,.6);border-radius:999px;padding:8px 14px 8px 8px;font:700 13px/1 'Space Grotesk',sans-serif;white-space:nowrap;opacity:0}
.ag-archive i{width:20px;height:20px;border-radius:50%;background:#2EE59D;color:#05301f;font-style:normal;font-size:12px;line-height:20px;text-align:center}
.ag-cycle .ag-mail{animation:agMail 5.83s linear forwards}
.ag-cycle .ag-archive{animation:agArchive 5.83s linear forwards}
@keyframes agMail{
  0%,40%{opacity:0;transform:none}
  45%{opacity:1;transform:translateZ(30px) scale(1.04)}
  53%{opacity:1;transform:translate(-6%,8%) translateZ(80px) rotateY(-28deg) rotateX(8deg) scale(1.1)}
  66%{opacity:.95;transform:translate(-62%,118%) translateZ(40px) rotateY(-62deg) rotateX(14deg) scale(.55)}
  71%{opacity:0;transform:translate(-70%,136%) rotateY(-80deg) scale(.3)}
  100%{opacity:0}}
@keyframes agArchive{0%,67%{opacity:0;transform:translateY(8px)}71%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
/* panneaux holographiques qui s'allument tour à tour (positions en % de l'image) */
.ag-holo{position:absolute;border-radius:10px;mix-blend-mode:screen;opacity:0;
  box-shadow:0 0 0 2px rgba(255,214,140,.55),0 0 38px 10px rgba(255,190,90,.45);background:rgba(255,220,150,.10);animation:agHolo 8s ease-in-out infinite}
.ag-holo.h1{left:13%;top:6%;width:15.7%;height:25.9%;animation-delay:0s}
.ag-holo.h2{left:35.2%;top:10.3%;width:13.4%;height:24.4%;animation-delay:2s}
.ag-holo.h3{left:6.8%;top:33.7%;width:15.7%;height:23.4%;animation-delay:4s}
.ag-holo.h4{left:27%;top:37.6%;width:15.2%;height:23.2%;animation-delay:6s}
@keyframes agHolo{0%,100%{opacity:0}8%,22%{opacity:1}34%{opacity:0}}
/* les coches de la liste de tâches qui « claquent » */
.ag-coche{position:absolute;width:3%;aspect-ratio:1;margin:-1.5% 0 0 -1.5%;border-radius:50%;border:2px solid rgba(46,229,157,.9);opacity:0;animation:agCoche 8s ease-out infinite}
.ag-coche.c1{left:30.1%;top:43.2%;animation-delay:6.1s}.ag-coche.c2{left:30.1%;top:49.5%;animation-delay:6.5s}.ag-coche.c3{left:30.1%;top:55.4%;animation-delay:6.9s}
@keyframes agCoche{0%{opacity:0;transform:scale(.4)}4%{opacity:1;transform:scale(1)}12%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
/* les yeux qui pulsent */
.ag-oeil{position:absolute;width:5.5%;aspect-ratio:1;margin:-2.75% 0 0 -2.75%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,200,110,.95) 0,rgba(255,170,60,.45) 35%,transparent 70%);animation:agOeil 3.2s ease-in-out infinite}
.ag-oeil.o1{left:62.8%;top:22.7%}.ag-oeil.o2{left:66.9%;top:22.7%}
@keyframes agOeil{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
/* le logo « AikiroLab. » intégré au capot du portable, en perspective exacte (calculée en JS,
   d'après les 4 coins du capot dans l'image), rétroéclairé façon pomme Apple (07/10, demande PO) */
.ag-capot{position:absolute;left:0;top:0;width:600px;height:800px;transform-origin:0 0;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
.ag-capot span{font:700 92px/1 'Space Grotesk',sans-serif;letter-spacing:-2px;color:#F4EEE5;opacity:.3;animation:agLogo 6s ease-in-out infinite}
.ag-capot b{color:#E9C46A;font-weight:700}.ag-capot em{font-style:normal;color:#D94F35}
@keyframes agLogo{0%,100%{opacity:.3;text-shadow:0 0 4px rgba(233,196,106,.15)}14%{opacity:1;text-shadow:0 0 14px rgba(255,226,170,.9),0 0 40px rgba(233,196,106,.6)}60%{opacity:.85;text-shadow:0 0 10px rgba(255,226,170,.6),0 0 28px rgba(233,196,106,.4)}}
/* mots-clés de résultat qui apparaissent l'un après l'autre (cycle de 18 s, 6 mots) */
.ag-puce{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(5,12,34,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;border:1px solid rgba(233,196,106,.55);border-radius:999px;padding:8px 14px 8px 8px;font:700 13px/1 'Space Grotesk',sans-serif;white-space:nowrap;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);opacity:0;transform:translateY(10px) scale(.96);animation:agPuce 18s infinite}
.ag-puce i{width:20px;height:20px;border-radius:50%;background:#2EE59D;color:#05301f;font-style:normal;font-size:12px;line-height:20px;text-align:center}
.ag-puce:nth-of-type(1){right:5%;top:56%;animation-delay:.5s}
.ag-puce:nth-of-type(2){left:22%;top:4%;animation-delay:3.5s}
.ag-puce:nth-of-type(3){right:18%;top:72%;animation-delay:6.5s}
.ag-puce:nth-of-type(4){left:2%;top:28%;animation-delay:9.5s}
.ag-puce:nth-of-type(5){right:4%;top:84%;animation-delay:12.5s}
.ag-puce:nth-of-type(6){left:44%;top:30%;animation-delay:15.5s}
@keyframes agPuce{0%{opacity:0;transform:translateY(10px) scale(.96)}3%,17%{opacity:1;transform:none}22%,100%{opacity:0;transform:translateY(-8px)}}

@media (max-width:980px){
  .ag-wrap{grid-template-columns:minmax(0,1fr);padding:0 22px;gap:28px}
  .ag-visu{-webkit-mask-image:none;mask-image:none;margin:0 -22px}
}
@media (max-width:620px){
  .ag-hero{padding:108px 0 50px}
  .ag-lead{font-size:16px}
  .ag-liste{grid-template-columns:minmax(0,1fr)}
  .ag-puce{font-size:11px;padding:6px 10px 6px 6px}
  .ag-puce i{width:16px;height:16px;line-height:16px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .ag-zoom,.ag-holo,.ag-coche,.ag-oeil,.ag-eyebrow:before,.ag-cycle .ag-mail,.ag-cycle .ag-archive{animation:none}
  .ag-capot span{animation:none;opacity:1}
  .ag-holo,.ag-coche{opacity:0}
  .ag-puce{animation:none;opacity:1;transform:none}
}