/* ============================================================
   PAGE IA POUR SALON DE COIFFURE — sectorielle (design v3)
   Réutilise au maximum les patterns de he-agence-ia-toulouse-v3.css
   (hero, trust-strip, section-light/sombre/noire, axes-grid/axis-card,
    data-grid/data-card, metier-grid/metier-card, method-steps, qw-band,
    map-cta, about-cta…).
   N'ajoute ici qu'une variante : les .axis-card posées sur fond SOMBRE
   (les sections "là où l'IA n'a rien à faire" et "ce qui a du sens").
   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 sectoriel : 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}

/* ============================================================
   VARIANTE SOMBRE des axis-card (le pattern de base est clair)
   Utilisée dans "là où l'IA n'a rien à faire" et "ce qui a du sens".
   ============================================================ */
.axis-card.axis-dark{
  background:linear-gradient(180deg,var(--surface),var(--ink-700));
  border:1px solid var(--line);box-shadow:0 24px 50px -34px rgba(0,0,0,.7)}
.axis-card.axis-dark::after{background:linear-gradient(90deg,var(--accent),transparent)}
.axis-card.axis-dark:hover{border-color:var(--line-strong);box-shadow:0 40px 70px -34px rgba(0,0,0,.85)}
.axis-card.axis-dark .axis-ic{
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.axis-card.axis-dark h3{color:var(--text)}
.axis-card.axis-dark > p{color:var(--text-dim)}
.axis-card.axis-dark li{color:var(--text-dim)}
.axis-card.axis-dark li i{color:var(--text-mute)}
.axis-card.axis-dark li b{color:var(--text)}

/* variante "ce qui reste humain / ce qui a du sens" : accent positif */
.axis-card.axis-dark.axis-keep::after{background:var(--grad-bright)}
.axis-card.axis-dark.axis-keep .axis-ic{color:var(--accent);border-color:rgba(56,189,248,.3)}
.axis-card.axis-dark.axis-keep li i{color:var(--accent)}

/* ============================================================
   AVANT / APRÈS dans les metier-card (section "l'IA en plus")
   Le 2e .mc-hand sert de ligne "Après" sans bordure haute.
   ============================================================ */
.metier-card .mc-hand{align-items:flex-start;line-height:1.45}
.metier-card .mc-hand i{margin-top:2px;flex:none}
.metier-card .mc-hand i.bi-arrow-down-circle{color:var(--light-mute)}
.metier-card .mc-hand i.bi-arrow-up-circle{color:var(--blue-600)}

/* ============================================================
   SECTION NOIRE — utiliser .nope comme coque pour axes-grid
   (le pattern .nope existe déjà ; on garde juste la grille d'axes)
   ============================================================ */
.nope .axes-grid{margin-top:8px}

/* ============================================================
   ACCENT SECTORIEL — salon de coiffure : améthyste/violet premium
   (pilote Hanz) — ressort net sur fond sombre, distinct du bleu site
   ============================================================ */
:root{ --accent:#A855F7; }
.hero-metier #neural-canvas{ filter:hue-rotate(232deg) saturate(1.1); }

.hero-metier .hero-eyebrow{ color:#C084FC; }
.hero-metier .grad-text{ background:linear-gradient(120deg,#C084FC,#7C3AED); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-metier .btn-primary{ background:linear-gradient(120deg,#A855F7,#7C3AED); box-shadow:0 10px 34px -10px rgba(168,85,247,.55); }

/* ============================================================
   SCHÉMA DE FLUX — héros salon de coiffure (pilote Hanz)
   4 signaux métier -> cœur IA -> du temps au fauteuil
   ============================================================ */
.flux-salon{ width:100%; height:auto; }
.flux-salon text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.flux-salon .flux-line{ stroke:rgba(192,132,252,.28); stroke-width:1.4; }
.flux-salon .flux-line.out{ stroke:rgba(124,58,237,.42); stroke-width:1.7; }
.flux-salon .p{ fill:#D8B4FE; filter:drop-shadow(0 0 3px rgba(216,180,254,.8)); }
.flux-salon .p.out{ fill:#C084FC; }
.flux-salon .fnode circle{ fill:rgba(192,132,252,.12); stroke:rgba(192,132,252,.6); stroke-width:1.4; }
/* lisibilité : labels de nœuds ≥ 13px, interlignes assurés par l'espacement SVG existant */
.flux-salon .fnode text{ fill:#e9d5ff; font-size:13px; font-weight:600; line-height:1.3; }
.flux-salon .ia-core{ fill:#A855F7; animation:scIaPulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.flux-salon .ia-label{ fill:#fff; font-size:17px; font-weight:800; }
.flux-salon .ia-sub{ fill:#d8b4fe; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.flux-salon .vous{ fill:rgba(124,58,237,.18); stroke:#7C3AED; stroke-width:1.7; }
.flux-salon .vous-label{ fill:#fff; font-size:13px; font-weight:700; }
.flux-salon .vous-sub{ fill:#d8b4fe; font-size:11px; }
@keyframes scIaPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .flux-salon .ia-core{ animation:none; } }

/* ticker des temps forts du salon — lisibilité renforcée */
.flux-salon .ev{ fill:#D8B4FE; font-size:13px; font-weight:700; opacity:0; letter-spacing:.01em; }
.flux-salon .ev-cap{ fill:#c084fc; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* ============================================================
   MINI-SCHÉMA MID-PAGE — section "l'IA en plus"
   signaux du salon -> brouillon IA -> vous validez
   ============================================================ */
.sc-flux-mid{ margin:6px auto 38px; max-width:680px; text-align:center; }
.flux-salon-mid{ width:100%; height:auto; max-width:640px; }
.flux-salon-mid text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.flux-salon-mid .flux-line{ stroke:rgba(168,85,247,.32); stroke-width:1.5; }
.flux-salon-mid .flux-line.out{ stroke:rgba(124,58,237,.5); stroke-width:1.7; }
.flux-salon-mid .p{ fill:#C084FC; filter:drop-shadow(0 0 3px rgba(216,180,254,.8)); }
.flux-salon-mid .p.out{ fill:#A855F7; }
.flux-salon-mid .mid-src rect{ fill:rgba(168,85,247,.07); stroke:rgba(168,85,247,.32); stroke-width:1.3; }
.flux-salon-mid .mid-out rect{ fill:rgba(124,58,237,.1); stroke:rgba(124,58,237,.45); stroke-width:1.5; }
/* mid-page : tailles augmentées pour lisibilité */
.flux-salon-mid .mid-t{ fill:var(--light-dim,#475569); font-size:13px; font-weight:600; }
.flux-salon-mid .mid-t-strong{ fill:var(--light-text,#0f172a); font-size:14px; font-weight:700; }
.flux-salon-mid .mid-cap{ fill:#9333ea; font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; }
.flux-salon-mid .ia-core{ fill:#A855F7; animation:scIaPulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.flux-salon-mid .ia-label{ fill:#fff; font-size:15px; font-weight:800; }
.flux-salon-mid .ia-sub2{ fill:#f3e8ff; font-size:11px; font-weight:600; letter-spacing:.02em; }
@media (prefers-reduced-motion:reduce){ .flux-salon-mid .ia-core{ animation:none; } }
.sc-flux-cap{ margin:14px auto 0; max-width:560px; color:var(--light-dim,#475569); font-size:.92rem; line-height:1.5; }
.sc-flux-cap b{ color:var(--light-text,#0f172a); font-weight:600; }
@media(max-width:560px){ .sc-flux-mid{ margin-bottom:26px; } .sc-flux-cap{ font-size:.86rem; } }