/* ============================================================
   AGENCE IA — à Toulouse — PAGE "ATELIERS IA" (v3)
   Styles spécifiques à la page. Réutilise le design system v3
   (he-agence-ia-toulouse-v3.css) : variables, .hero, .sec-head,
   .section-light, .section-black, .method, .nope, .about-cta…
   Ne redéfinit QUE ce qui manque au socle pour cette page.
   ============================================================ */

/* héro de page intérieure : un peu plus court que l'accueil */
.hero-page{min-height:auto;padding:150px 0 96px}

/* ============================================================
   CE QUE C'EST — deux points (section claire)
   ============================================================ */
.intro-points{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.intro-point{position:relative;border-radius:var(--radius);padding:34px 32px;overflow:hidden;
  background:var(--light-surface);border:1px solid var(--light-line);
  box-shadow:0 18px 40px -30px rgba(15,27,45,.4);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.intro-point::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--grad-bright);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.intro-point:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.intro-point:hover::before{transform:scaleX(1)}
.intro-point .ip-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(56,189,248,.08));border:1px solid var(--light-line-strong);color:var(--blue-600)}
.intro-point h3{font-size:1.3rem;margin-bottom:12px;color:var(--light-text)}
.intro-point p{color:var(--light-dim);font-size:.97rem}
@media(max-width:820px){.intro-points{grid-template-columns:1fr}}

/* ============================================================
   À QUI ÇA S'ADRESSE — deux profils (section sombre)
   ============================================================ */
.atelier-audience{background:radial-gradient(60% 70% at 50% 0%,rgba(37,99,235,.09),transparent 60%)}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.audience-card{position:relative;border-radius:var(--radius);padding:38px 34px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--ink-700));border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.audience-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--grad-bright);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.audience-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.audience-card:hover::before{transform:scaleX(1)}
.audience-card .ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.audience-card .ac-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.audience-card .ac-num{font-family:var(--font-mono);font-size:1rem;color:var(--text-mute);letter-spacing:.04em}
.audience-card h3{font-size:1.32rem;margin-bottom:14px;line-height:1.25}
.audience-card p{color:var(--text-dim);font-size:.98rem}
@media(max-width:820px){.audience-grid{grid-template-columns:1fr}}

/* ============================================================
   LE DÉROULÉ — ajustements (méthode centrée)
   ============================================================ */
.atelier-method .sec-head{max-width:720px}

/* ============================================================
   CE QU'ON NE FAIT PAS — grille à 4 cartes + petit tag
   ============================================================ */
.nope-grid-4{grid-template-columns:repeat(4,1fr)}
.nope-tag{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-mute)}
@media(max-width:1080px){.nope-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nope-grid-4{grid-template-columns:1fr}}

/* ============================================================
   ACCENT PROPRE À LA PAGE — acculturation (violet #A78BFA)
   (pilote Hanz — override du socle bleu pour cette page)
   ============================================================ */
:root{ --accent:#A78BFA; }
.hero #neural-canvas{ filter:hue-rotate(58deg) saturate(1.05); }
.hero .hero-eyebrow{ color:#C4B5FD; }
.hero .grad-text{ background:linear-gradient(120deg,#C4B5FD,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-primary{ background:linear-gradient(120deg,#A78BFA,#8B5CF6); box-shadow:0 10px 34px -10px rgba(167,139,250,.55); }
.btn-primary:hover{ box-shadow:0 14px 40px -10px rgba(167,139,250,.7); }

/* ============================================================
   VISUEL DU HÉRO — l'acculturation par le jeu (.viz-ateliers-ia)
   Des équipes testent (en haut) → le harnais se construit pièce
   par pièce (anneau central) → l'adoption grandit (barre + équipes)
   ============================================================ */
.viz-ateliers-ia{ width:100%; height:auto; }
.viz-ateliers-ia text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }

/* les équipes qui testent */
.viz-ateliers-ia .ai-team circle{ fill:rgba(167,139,250,.12); stroke:rgba(167,139,250,.6); stroke-width:1.4; }
.viz-ateliers-ia .ai-team text{ fill:#ddd6fe; font-size:13px; font-weight:600; }

/* les chemins + les essais qui montent (petites boules) */
.viz-ateliers-ia .ai-line{ stroke:rgba(167,139,250,.3); stroke-width:1.4; stroke-dasharray:3 5; }
.viz-ateliers-ia .ai-p{ fill:#C4B5FD; filter:drop-shadow(0 0 3px rgba(196,181,253,.85)); }

/* le ticker des compétences acquises */
.viz-ateliers-ia .ai-ev{ fill:#C4B5FD; font-size:13px; font-weight:700; opacity:0; letter-spacing:.01em; }
.viz-ateliers-ia .ai-cap{ fill:#a78bfa; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* le harnais central : anneau + 6 segments qui s'allument l'un après l'autre */
.viz-ateliers-ia .ai-ring{ fill:none; stroke:rgba(167,139,250,.18); stroke-width:2; }
.viz-ateliers-ia .ai-seg path{ fill:none; stroke:#A78BFA; stroke-width:3.4; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(167,139,250,.7)); opacity:.18;
  animation:ateliers-ia-build 6s ease-in-out infinite; animation-delay:calc(var(--i) * .9s); }
.viz-ateliers-ia .ai-core{ fill:#8B5CF6; animation:ateliers-ia-pulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; }
.viz-ateliers-ia .ai-core-label{ fill:#fff; font-size:16px; font-weight:800; }

/* l'adoption qui grandit : barre + équipes éclairées tour à tour */
.viz-ateliers-ia .ai-foot-cap{ fill:#c4b5fd; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.viz-ateliers-ia .ai-bar-track{ fill:rgba(167,139,250,.14); }
.viz-ateliers-ia .ai-bar-fill{ fill:#A78BFA; filter:drop-shadow(0 0 5px rgba(167,139,250,.6));
  transform-box:fill-box; transform-origin:left center; transform:scaleX(.12);
  animation:ateliers-ia-grow 6s ease-in-out infinite; }
.viz-ateliers-ia .ai-people circle{ fill:rgba(167,139,250,.16); stroke:rgba(167,139,250,.5); stroke-width:1.3;
  animation:ateliers-ia-light 6s ease-in-out infinite; }
.viz-ateliers-ia .ai-people circle:nth-child(1){ animation-delay:0s; }
.viz-ateliers-ia .ai-people circle:nth-child(2){ animation-delay:1.5s; }
.viz-ateliers-ia .ai-people circle:nth-child(3){ animation-delay:3s; }
.viz-ateliers-ia .ai-people circle:nth-child(4){ animation-delay:4.5s; }
.viz-ateliers-ia .ai-foot-sub{ fill:#c4b5fd; font-size:11px; }

@keyframes ateliers-ia-build{ 0%,12%{ opacity:.18; } 26%,82%{ opacity:1; } 100%{ opacity:.18; } }
@keyframes ateliers-ia-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@keyframes ateliers-ia-grow{ 0%{ transform:scaleX(.12); } 70%,100%{ transform:scaleX(1); } }
@keyframes ateliers-ia-light{ 0%,8%{ fill:rgba(167,139,250,.16); stroke:rgba(167,139,250,.5); }
  20%,100%{ fill:rgba(167,139,250,.5); stroke:#A78BFA; } }

/* ============================================================
   MINI-VISUEL EN MILIEU DE PAGE — dans le bloc "adoption"
   essayer → comprendre → installer : le harnais se pose
   ============================================================ */
.ai-mini{ width:100%; height:auto; max-width:300px; margin:0 auto 8px; display:block; }
.ai-mini text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; fill:#c4b5fd; font-size:11px; font-weight:600; }
.ai-mini .ai-mini-track{ stroke:rgba(167,139,250,.32); stroke-width:1.4; stroke-dasharray:3 5; }
.ai-mini .ai-mini-p{ fill:#8b5cf6; filter:drop-shadow(0 0 3px rgba(139,92,246,.8)); }
.ai-mini .ai-mini-node circle{ fill:rgba(167,139,250,.14); stroke:rgba(167,139,250,.55); stroke-width:1.4;
  animation:ateliers-ia-mini-pop 4.8s ease-in-out infinite; animation-delay:calc(var(--i) * 1.6s);
  transform-box:fill-box; transform-origin:center; }

@keyframes ateliers-ia-mini-pop{ 0%,10%{ stroke:rgba(167,139,250,.35); }
  24%,90%{ stroke:#a78bfa; filter:drop-shadow(0 0 5px rgba(167,139,250,.7)); } 100%{ stroke:rgba(167,139,250,.35); } }

/* prefers-reduced-motion : on coupe les anims de cœur/construction */
@media (prefers-reduced-motion:reduce){
  .viz-ateliers-ia .ai-core,
  .viz-ateliers-ia .ai-seg path,
  .viz-ateliers-ia .ai-bar-fill,
  .viz-ateliers-ia .ai-people circle,
  .ai-mini .ai-mini-node circle{ animation:none; }
  .viz-ateliers-ia .ai-seg path{ opacity:1; }
  .viz-ateliers-ia .ai-bar-fill{ transform:scaleX(1); }
  .viz-ateliers-ia .ai-people circle{ fill:rgba(167,139,250,.4); stroke:#A78BFA; }
}