/* ============================================================
   PAGE CAS D'USAGE PAR MÉTIER — hub des secteurs (design v3)
   Réutilise au maximum les patterns de he-agence-ia-toulouse-v3.css
   (hero, trust-strip, section-light/sombre, map-cta, about-cta…).
   N'ajoute ici que ce qui est propre à la page :
     - héros un peu plus court
     - cartes "comprendre d'abord" (sur fond clair)
     - cartes "secteurs phares" cliquables (sombre) = le cran suivant
     - grille de liens "autres secteurs" (sur fond clair)
   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 métier : un peu plus court --- */
.hero-metier{min-height:auto;padding:150px 0 96px}
.hero-in-metier{align-items:center}
.hero-metier h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.hero-metier p.lede{margin-top:26px}

/* ============================================================
   COMPRENDRE D'ABORD — section claire : 3 cartes
   ============================================================ */
.comprendre .understand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.uc-card{position:relative;border-radius:var(--radius);padding:34px 30px;text-align:center;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}
.uc-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)}
.uc-card:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.uc-card:hover::before{transform:scaleX(1)}
.uc-card .uc-ico{width:60px;height:60px;border-radius:16px;margin:0 auto 18px;display:grid;place-items:center;font-size:1.55rem;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(29,78,216,.07));border:1px solid var(--light-line-strong);color:var(--blue-600)}
.uc-card .uc-ico.amber{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(217,119,6,.07));border-color:rgba(245,158,11,.3);color:#D97706}
.uc-card :is(h3,h4),.uc-card h3{font-family:var(--font-display);font-size:1.18rem;font-weight:600;margin-bottom:10px;color:var(--light-text)}
.uc-card p{font-size:.95rem;color:var(--light-dim);line-height:1.55;margin:0}
@media(max-width:920px){.comprendre .understand-cards{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ============================================================
   SECTEURS PHARES — section sombre : 6 cartes cliquables
   (chaque carte = le cran suivant du parcours)
   ============================================================ */
.sectors-feature{background:radial-gradient(64% 60% at 22% 0%, rgba(37,99,235,.09),transparent 60%)}
.sectors-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:50px}
.sectors-head .eyebrow{justify-content:center}
.sectors-head p{margin-left:auto;margin-right:auto}

.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sf-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);padding:32px 28px;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}
.sf-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)}
.sf-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.sf-card:hover::before{transform:scaleX(1)}
.sf-card .sf-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:20px;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300);
  transition:transform .4s var(--ease)}
.sf-card:hover .sf-ico{transform:scale(1.06)}
.sf-card.sf-amber .sf-ico{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(217,119,6,.07));border-color:rgba(245,158,11,.3);color:#FBBF24}
.sf-card h3{font-size:1.22rem;margin-bottom:12px;color:var(--text)}
.sf-card > p{color:var(--text-dim);font-size:.93rem;flex:1;margin-bottom:20px}
.sf-more{font-family:var(--font-mono);font-size:.8rem;color:var(--blue-200);display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.sf-more i{transition:transform .3s var(--ease)}
.sf-card:hover .sf-more{color:var(--accent)}
.sf-card:hover .sf-more i{transform:translateX(4px)}
@media(max-width:980px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sf-grid{grid-template-columns:1fr}}

/* ============================================================
   AUTRES SECTEURS — section claire : grille de liens
   ============================================================ */
.sectors-more .sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.sectors-more .sector-link{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:14px;
  background:var(--light-surface);border:1px solid var(--light-line);color:var(--light-text);
  font-size:.96rem;line-height:1.3;box-shadow:0 14px 34px -30px rgba(15,27,45,.4);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s}
.sectors-more .sector-link span{flex:1;font-weight:500}
.sectors-more .sector-link .lead-i{flex:none;font-size:1.15rem;color:var(--blue-600);transition:transform .35s var(--ease)}
.sectors-more .sector-link .arr{flex:none;color:var(--light-mute);font-size:.9rem;transition:transform .3s var(--ease),color .3s}
.sectors-more .sector-link:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.3);
  box-shadow:0 26px 50px -32px rgba(37,99,235,.4);background:linear-gradient(135deg,rgba(37,99,235,.04),var(--light-surface))}
.sectors-more .sector-link:hover .lead-i{transform:scale(1.1)}
.sectors-more .sector-link:hover .arr{transform:translateX(4px);color:var(--blue)}
@media(max-width:880px){.sectors-more .sectors-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.sectors-more .sectors-grid{grid-template-columns:1fr}}

/* ============================================================
   ACCENT PROPRE À LA PAGE — teal #2DD4BF (pilote Hanz)
   Le hub des métiers : chaque secteur converge vers une même IA.
   ============================================================ */
:root{ --accent:#2DD4BF; }
.hero-metier #neural-canvas{ filter:hue-rotate(118deg) saturate(1.1); }
.hero-metier .hero-eyebrow{ color:#5EEAD4; }
.hero-metier .grad-text{ background:linear-gradient(120deg,#5EEAD4,#0D9488); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-metier .btn-primary,
.sectors-feature .btn-primary{ background:linear-gradient(120deg,#2DD4BF,#0D9488); box-shadow:0 10px 34px -10px rgba(45,212,191,.55); }

/* ============================================================
   VISUEL HÉROS — hub des métiers reliés à l'IA (.viz-cas-usage-ia-metier)
   ============================================================ */
.viz-cas-usage-ia-metier{ width:100%; height:auto; }
.viz-cas-usage-ia-metier text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }

/* chemins métier -> IA */
.viz-cas-usage-ia-metier .cu-line{ stroke:rgba(94,234,212,.26); stroke-width:1.4; }
.viz-cas-usage-ia-metier .cu-line-on{ stroke:rgba(45,212,191,.55); stroke-width:1.9; }

/* particules : les usages qui remontent vers l'IA */
.viz-cas-usage-ia-metier .cu-p{ fill:#99F6E4; filter:drop-shadow(0 0 3px rgba(153,246,228,.8)); }
.viz-cas-usage-ia-metier .cu-p-on{ fill:#2DD4BF; }

/* nœuds-secteurs autour */
.viz-cas-usage-ia-metier .cu-node circle{ fill:rgba(94,234,212,.10); stroke:rgba(94,234,212,.55); stroke-width:1.4; }
.viz-cas-usage-ia-metier .cu-ico{ fill:#99F6E4; font-family:"bootstrap-icons"; font-size:17px; }
.viz-cas-usage-ia-metier .cu-cap{ fill:#cbeee7; font-size:13px; font-weight:600; }
/* le secteur "le vôtre" mis en avant */
.viz-cas-usage-ia-metier .cu-node-on circle{ fill:rgba(45,212,191,.20); stroke:#2DD4BF; stroke-width:2;
  animation:cas-usage-ia-metier-on 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.viz-cas-usage-ia-metier .cu-node-on .cu-ico{ fill:#fff; }
.viz-cas-usage-ia-metier .cu-cap-on{ fill:#5EEAD4; font-size:13.5px; font-weight:700; }

/* cœur IA central */
.viz-cas-usage-ia-metier .cu-core{ fill:#2DD4BF; animation:cas-usage-ia-metier-pulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; }
.viz-cas-usage-ia-metier .cu-core-label{ fill:#06251f; font-size:18px; font-weight:800; }
.viz-cas-usage-ia-metier .cu-core-sub{ fill:#99F6E4; font-size:11px; letter-spacing:.03em; text-transform:uppercase; }

/* ticker des secteurs */
.viz-cas-usage-ia-metier .cu-tk{ fill:#99F6E4; font-size:13px; font-weight:700; opacity:0; letter-spacing:.01em; }
.viz-cas-usage-ia-metier .cu-tk-cap{ fill:#0d9488; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

@keyframes cas-usage-ia-metier-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
@keyframes cas-usage-ia-metier-on{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* ============================================================
   MINI-FLUX MILIEU DE PAGE (.cu-mini) — vos flux -> IA -> usage adapté
   ============================================================ */
.cu-mini{ max-width:760px; margin:30px auto 4px; }
.cu-mini-svg{ width:100%; height:auto; display:block; }
.cu-mini-svg text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.cu-mini-line{ stroke:rgba(13,148,136,.30); stroke-width:1.5; }
.cu-mini-line-on{ stroke:rgba(45,212,191,.6); stroke-width:2; }
.cu-mini-p{ fill:#14b8a6; filter:drop-shadow(0 0 3px rgba(45,212,191,.6)); }
.cu-mini-p-on{ fill:#0d9488; }
.cu-mini-node rect{ fill:rgba(45,212,191,.08); stroke:rgba(13,148,136,.4); stroke-width:1.4; }
.cu-mini-node text{ fill:#0f766e; font-size:13.5px; font-weight:600; }
.cu-mini-node-on rect{ fill:rgba(45,212,191,.16); stroke:#0d9488; stroke-width:1.7; }
.cu-mini-node-on text{ fill:#0d9488; font-size:13.5px; font-weight:700; }
.cu-mini-hub circle{ fill:#2DD4BF; stroke:#0d9488; stroke-width:1.5;
  animation:cas-usage-ia-metier-pulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cu-mini-hub text{ fill:#06251f; font-size:15px; font-weight:800; }
.cu-mini-cap{ text-align:center; margin:14px auto 0; font-size:.92rem; color:var(--light-dim); max-width:560px; }
.cu-mini-cap b{ color:var(--light-text); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .viz-cas-usage-ia-metier .cu-core,
  .viz-cas-usage-ia-metier .cu-node-on circle,
  .cu-mini-hub circle{ animation:none; }
}