/* ============================================================
   AGENCE IA — à Toulouse — PAGE "COACHING STRATÉGIQUE 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, .about-cta…
   Ne redéfinit QUE ce qui manque au socle pour cette page :
     - héros un peu plus court (page intérieure)
     - bloc "le vrai sujet" (énoncé + texte)
     - "ce que ça apporte" : grille de 3 cartes sombres numérotées
     - "coaching vs accompagnement" : deux colonnes contrastées
   Mêmes variables, mêmes codes visuels que la homepage.
   ============================================================ */

/* onglet de nav correspondant à la page courante (sans ouvrir le panneau) */
.mega-here > .mega-trigger{color:var(--text)}
.mega-here > .mega-trigger::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:var(--accent);opacity:.75}
.mega-here{position:relative}

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

/* ============================================================
   LE VRAI SUJET — section claire : énoncé fort + texte
   ============================================================ */
.subject .subject-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:start}
.subject-statement h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin:16px 0 0;color:var(--light-text)}
.subject-body p{color:var(--light-dim);font-size:1.04rem;margin-top:16px}
.subject-body p:first-child{margin-top:0}
.subject-body p strong{color:var(--light-text);font-weight:600}
.subject-body .subject-key{margin-top:22px;padding:20px 22px;border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(29,78,216,.04));
  border:1px solid var(--light-line-strong);position:relative;overflow:hidden}
.subject-body .subject-key::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 92% 0%,rgba(56,189,248,.08),transparent 55%)}
.subject-body .subject-key p{position:relative;margin:0;color:var(--light-dim)}
.subject-body .subject-key p strong{color:var(--blue-700)}
@media(max-width:880px){.subject .subject-grid{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   CE QUE ÇA APPORTE — section sombre : 3 cartes numérotées
   ============================================================ */
.apport{background:radial-gradient(60% 70% at 50% 0%,rgba(37,99,235,.09),transparent 60%)}
.apport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.apport-card{position:relative;border-radius:var(--radius);padding:36px 32px;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}
.apport-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)}
.apport-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.apport-card:hover::before{transform:scaleX(1)}
.apport-card.accent::before{transform:scaleX(1);background:linear-gradient(90deg,var(--accent),var(--blue))}
.apport-card .apport-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.apport-card .apport-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)}
.apport-card .apport-num{font-family:var(--font-mono);font-size:1rem;color:var(--text-mute);letter-spacing:.04em}
.apport-card h3{font-size:1.3rem;margin-bottom:14px;line-height:1.25}
.apport-card p{color:var(--text-dim);font-size:.98rem}
@media(max-width:920px){.apport-grid{grid-template-columns:1fr}}

/* ============================================================
   COACHING vs ACCOMPAGNEMENT — section noire : deux colonnes
   ============================================================ */
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp-col{position:relative;border-radius:var(--radius);padding:36px 32px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,26,46,.55),rgba(6,9,18,.6));border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s}
.cmp-col::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.cmp-col:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.3);box-shadow:0 36px 70px -34px rgba(0,0,0,.9)}
.cmp-col:hover::before{transform:scaleX(1)}
.cmp-col.here{border-color:rgba(56,189,248,.32);box-shadow:inset 0 0 60px -30px rgba(56,189,248,.5)}
.cmp-col.here::before{transform:scaleX(1)}
.cmp-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.cmp-ico{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;
  background:rgba(120,150,200,.06);border:1px solid var(--line-strong);color:var(--accent)}
.cmp-col.here .cmp-ico{background:var(--grad-bright);border-color:transparent;color:#fff;
  box-shadow:0 0 22px -4px rgba(56,189,248,.6)}
.cmp-head h3{font-size:1.3rem;line-height:1.2}
.cmp-head .cmp-here-tag{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--accent);margin-top:4px;letter-spacing:.03em}
.cmp-list{list-style:none;display:grid;gap:15px;margin:0}
.cmp-list li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem;color:var(--text-dim)}
.cmp-list li i{margin-top:4px;font-size:.85rem;flex:none;color:var(--accent)}
.cmp-list li strong{color:var(--text);font-weight:600}
.cmp-list li em{color:var(--text);font-style:normal}
.compare-foot{margin-top:34px;text-align:center;max-width:720px;margin-inline:auto;
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;line-height:1.42;color:var(--text-dim)}
.compare-foot b{color:var(--text);font-weight:600}
.compare-foot a{color:var(--accent);font-weight:600;border-bottom:1px solid rgba(56,189,248,.4);
  transition:border-color .25s}
.compare-foot a:hover{border-color:var(--accent)}
@media(max-width:820px){.compare-cols{grid-template-columns:1fr}}

/* ============================================================
   ACCENT PROPRE À LA PAGE — clarté / priorisation (#F472B6)
   (overrides ciblés du socle bleu, comme la page fleuriste)
   ============================================================ */
:root{ --accent:#F472B6; }
.hero-page #neural-canvas{ filter:hue-rotate(300deg) saturate(1.1); }
.hero-page .hero-eyebrow{ color:#F472B6; }
.hero-page .grad-text{ background:linear-gradient(120deg,#F472B6,#DB2777);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-page .btn-primary{ background:linear-gradient(120deg,#EC4899,#DB2777);
  box-shadow:0 10px 34px -10px rgba(244,114,182,.55); }
/* le "vous êtes ici" et les puces de la comparaison suivent l'accent rose */
.compare .cmp-col.here{ box-shadow:inset 0 0 60px -30px rgba(244,114,182,.5); border-color:rgba(244,114,182,.34); }
.compare .cmp-col.here .cmp-ico{ background:linear-gradient(120deg,#F472B6,#DB2777); box-shadow:0 0 22px -4px rgba(244,114,182,.6); }

/* ============================================================
   HÉRO — VISUEL "LE DIRIGEANT QUI Y VOIT CLAIR"
   Un flux IA en vrac (haut) → tri/clarté (centre) → 3 priorités (bas).
   Toutes les classes/ids préfixés coaching-strategique-ia / .csi-.
   ============================================================ */
.viz-coaching-strategique-ia{ width:100%; height:auto; }
.viz-coaching-strategique-ia text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }

/* sources de bruit (en haut, dispersées) */
.viz-coaching-strategique-ia .csi-src circle{ fill:rgba(244,114,182,.1); stroke:rgba(244,114,182,.5); stroke-width:1.3; }
.viz-coaching-strategique-ia .csi-src text{ fill:#f9a8d4; font-size:13px; font-weight:600; }

/* chemins du flux */
.viz-coaching-strategique-ia .csi-line{ stroke:rgba(244,114,182,.26); stroke-width:1.3; }
.viz-coaching-strategique-ia .csi-out-line{ stroke:rgba(219,39,119,.45); stroke-width:1.8; }

/* particules (les "petites boules") */
.viz-coaching-strategique-ia .csi-p{ fill:#fbcfe8; filter:drop-shadow(0 0 3px rgba(249,168,212,.8)); }
.viz-coaching-strategique-ia .csi-p-out{ fill:#F472B6; }

/* défilé de questions du dirigeant */
.viz-coaching-strategique-ia .csi-cap{ fill:#be185d; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; }
.viz-coaching-strategique-ia .csi-ev{ fill:#fbcfe8; font-size:13px; font-weight:700; opacity:0; }

/* le centre de clarté */
.viz-coaching-strategique-ia .csi-core{ fill:#EC4899;
  animation:coaching-strategique-ia-pulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; }
.viz-coaching-strategique-ia .csi-core-mark{ stroke:#fff; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.viz-coaching-strategique-ia .csi-core-sub{ fill:#f9a8d4; font-size:11.5px;
  letter-spacing:.04em; text-transform:uppercase; }

/* les 3 priorités, claires et hiérarchisées */
.viz-coaching-strategique-ia .csi-prio-row rect{ fill:rgba(244,114,182,.08);
  stroke:rgba(244,114,182,.32); stroke-width:1;
  opacity:0; animation:coaching-strategique-ia-rise .6s var(--ease,ease) forwards;
  animation-delay:calc(.9s + var(--i) * .28s); }
.viz-coaching-strategique-ia .csi-rank{ fill:#DB2777; }
.viz-coaching-strategique-ia .csi-rank-n{ fill:#fff; font-size:11.5px; font-weight:800; }
.viz-coaching-strategique-ia .csi-prio-t{ fill:#fde7f3; font-size:13px; font-weight:600; text-anchor:start; }

@keyframes coaching-strategique-ia-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@keyframes coaching-strategique-ia-rise{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   MINI-CARTOGRAPHIE EN MILIEU DE PAGE
   "le paysage IA en vrac → un cap clair" (bloc acculturation)
   ============================================================ */
.csi-mini{ width:100%; max-width:420px; height:auto; margin:22px 0 4px;
  display:block; }
.csi-mini text{ font-family:var(--font-mono,monospace); }
.csi-mini .csi-mini-noise path{ stroke:rgba(244,114,182,.3); stroke-width:1.2; fill:none; }
.csi-mini .csi-mini-out{ stroke:rgba(219,39,119,.55); stroke-width:1.8; }
.csi-mini .csi-mini-p{ fill:#fbcfe8; filter:drop-shadow(0 0 2px rgba(249,168,212,.7)); }
.csi-mini .csi-mini-p-out{ fill:#F472B6; }
.csi-mini .csi-mini-core{ fill:#EC4899;
  animation:coaching-strategique-ia-pulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; }
.csi-mini .csi-mini-goal{ fill:rgba(219,39,119,.2); stroke:#DB2777; stroke-width:1.6; }
.csi-mini .csi-mini-lab{ fill:var(--light-dim,#64748b); font-size:11px; text-anchor:middle; letter-spacing:.02em; }
.csi-mini .csi-mini-lab-out{ fill:#be185d; font-weight:600; }

/* prefers-reduced-motion : on coupe les pulsations de cœur (les flux restent
   discrets et le visuel reste lisible figé) */
@media (prefers-reduced-motion:reduce){
  .viz-coaching-strategique-ia .csi-core,
  .csi-mini .csi-mini-core{ animation:none; }
  .viz-coaching-strategique-ia .csi-prio-row rect{ animation:none; opacity:1; }
}