/* ============================================================
   PAGE SECTORIELLE — IA POUR L'E-COMMERCE DE MODE (design v3)
   Réutilise au maximum les patterns de he-agence-ia-toulouse-v3.css
   (hero, trust-strip, section-light/sombre/black, mir-card, qw-band,
    method-steps, map-cta, about-cta…).
   N'ajoute ici que ce qui est propre à la page (mêmes patterns que
   la page cabinet-comptable, gabarit sectoriel commun) :
     - fil d'Ariane sobre
     - héros sectoriel (un peu plus court)
     - "le quotidien" : 2 cartes miroir (métier vs temps perdu)
     - "outils existants" : grille "à garder" (3 colonnes)
     - "ce que l'IA apporte" : cartes avec bloc avant/après
     - "là où vous restez irremplaçable" : 2 axes (IA / vous)
     - "ce qui a du sens / ce qu'on ne promet pas" : 2 colonnes
   Mêmes variables, mêmes codes visuels que la homepage.
   Touche orange (--accent-warm) strictement réservée à 1-2 accents
   "temps perdu", conforme à la direction visuelle v3.
   ============================================================ */

/* onglet de nav de 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}

/* ============================================================
   FIL D'ARIANE — sobre, au-dessus du héros
   ============================================================ */
.he-breadcrumb{position:relative;z-index:2;padding:90px 0 0}
.he-breadcrumb .bc-list{display:flex;gap:.5rem;align-items:center;list-style:none;padding:0;margin:0;
  font-family:var(--font-mono);font-size:.78rem}
.he-breadcrumb a{color:var(--blue-300);transition:color .2s}
.he-breadcrumb a:hover{color:var(--accent)}
.he-breadcrumb .bc-sep{color:var(--text-mute)}
.he-breadcrumb .bc-current{color:var(--text-dim)}
@media(max-width:1080px){.he-breadcrumb{padding-top:84px}}

/* ============================================================
   HÉRO sectoriel : un peu plus court que la home
   ============================================================ */
.hero-sector{min-height:auto;padding:34px 0 96px}
.hero-in-sector{align-items:center}
.hero-sector h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.hero-sector p.lede{margin-top:26px}

/* ============================================================
   LE QUOTIDIEN — section claire : 2 cartes miroir
   (variante de .mir-card : on garde le hover/filet, on ajoute
    une icône + une liste à puces)
   ============================================================ */
.mir-grid-2{grid-template-columns:1fr 1fr}
.quotidien .mir-card{padding:36px 34px}
.mir-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:18px}
.mir-ic-blue{background:rgba(37,99,235,.12);border:1px solid var(--light-line-strong);color:var(--blue-600)}
.mir-ic-amber{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.28);color:#d97706}
.quotidien .mir-card h3{font-size:1.32rem;margin:0 0 16px}
.mir-list{list-style:none;display:grid;gap:12px;margin:0 0 18px}
.mir-list li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem;color:var(--light-dim);line-height:1.5}
.mir-list li i{margin-top:4px;font-size:.85rem;flex:none}
.mir-keep .mir-list li i{color:#0d9488}
.mir-clock{color:var(--accent-warm)!important}
/* la carte "temps perdu" porte le filet orange (seule entorse au bleu) */
.mir-time::before{background:linear-gradient(90deg,#f59e0b,#d97706)}
@media(max-width:880px){.mir-grid-2{grid-template-columns:1fr}}

/* ============================================================
   OUTILS EXISTANTS — section sombre : grille "à garder"
   (ici 3 outils → 3 colonnes)
   ============================================================ */
.outils{background:radial-gradient(64% 60% at 22% 0%, rgba(37,99,235,.09),transparent 60%)}
.keep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.keep-grid-3{grid-template-columns:repeat(3,1fr)}
.keep-card{position:relative;border-radius:var(--radius);padding:28px 24px;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}
.keep-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)}
.keep-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.keep-card:hover::before{transform:scaleX(1)}
.keep-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;margin-bottom:16px;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.keep-card h3{font-size:1.1rem;margin-bottom:10px}
.keep-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:16px}
.keep-badge{display:inline-block;flex:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  padding:.3rem .8rem;border-radius:999px;white-space:nowrap;
  background:rgba(13,148,136,.16);color:#5eead4;border:1px solid rgba(13,148,136,.3)}
@media(max-width:980px){.keep-grid,.keep-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.keep-grid,.keep-grid-3{grid-template-columns:1fr}}

/* ============================================================
   CE QUE L'IA APPORTE — section claire : grille de cartes
   avec un bloc "avant / après"
   ============================================================ */
.apport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ap-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);padding:30px 28px;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}
.ap-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)}
.ap-card.ap-amber::before{background:linear-gradient(90deg,#f59e0b,#d97706)}
.ap-card:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.ap-card:hover::before{transform:scaleX(1)}
.ap-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(29,78,216,.08));border:1px solid var(--light-line-strong);color:var(--blue-600)}
.ap-ic-amber{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fde68a;color:#d97706}
.ap-card h3{font-size:1.16rem;margin-bottom:10px;color:var(--light-text)}
.ap-card > p{color:var(--light-dim);font-size:.94rem}
.ap-ba{margin-top:auto;border-top:1px solid var(--light-line);padding-top:16px;margin-top:18px;display:grid;gap:10px}
.ap-ba p{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--light-dim);margin:0;line-height:1.45}
.ap-ba i{margin-top:.15rem;flex:none}
.ap-ba .ba-down i{color:#dc2626}
.ap-ba .ba-up i{color:#0d9488}
.ap-ba b{color:var(--light-text);font-weight:600}
@media(max-width:920px){.apport-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.apport-grid{grid-template-columns:1fr}}

.apport-foot{position:relative;text-align:center;max-width:840px;margin:3rem auto 0;color:var(--light-dim);font-size:1.02rem}
.apport-foot i{color:var(--blue-600)}
.apport-foot b{color:var(--light-text);font-weight:600}

/* lien secondaire "un exemple de flux →" sous le bandeau cartographie */
.map-cta-alt{margin:14px 0 0;position:relative}
.map-cta-alt a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.84rem;
  color:var(--blue-200);transition:color .2s,gap .25s var(--ease)}
.map-cta-alt a i{color:var(--accent)}
.map-cta-alt a span{transition:transform .25s var(--ease)}
.map-cta-alt a:hover{color:var(--text)}
.map-cta-alt a:hover span{transform:translateX(4px)}

/* ============================================================
   LÀ OÙ VOUS RESTEZ IRREMPLAÇABLE — section sombre : 2 axes
   ============================================================ */
.frontiere{background:radial-gradient(60% 70% at 78% 0%,rgba(29,78,216,.08),transparent 60%)}
.front-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.front-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-strong);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.front-card:hover{transform:translateY(-6px);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.front-you{border-color:rgba(56,189,248,.3);box-shadow:inset 0 0 60px -30px rgba(56,189,248,.4)}
.front-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:22px;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.front-you .front-ic{background:var(--grad-bright);color:#fff;box-shadow:0 0 26px -6px rgba(56,189,248,.6)}
.front-card h3{font-size:1.4rem;margin-bottom:18px}
.front-list{list-style:none;display:grid;gap:13px}
.front-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--text-dim);line-height:1.5}
.front-list li i{margin-top:4px;font-size:.85rem;flex:none}
.front-list-minus li i{color:var(--text-mute)}
.front-list-check li i{color:var(--accent)}
@media(max-width:880px){.front-grid{grid-template-columns:1fr}}

.front-foot{font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.4rem);font-weight:500;line-height:1.42;
  max-width:840px;margin:44px auto 0;text-align:center;color:var(--text-dim)}
.front-foot b{color:var(--text);font-weight:600}

/* ============================================================
   CE QUI A DU SENS / CE QU'ON NE PROMET PAS — section noire
   ============================================================ */
.sens-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sens-card{position:relative;border-radius:var(--radius);padding:36px 32px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,26,46,.7),rgba(8,16,31,.5));border:1px solid var(--line-strong);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.sens-card:hover{transform:translateY(-5px);box-shadow:0 36px 64px -34px rgba(0,0,0,.8)}
.sens-yes{border-color:rgba(13,148,136,.3)}
.sens-no{border-color:rgba(220,38,38,.22)}
.sens-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:18px}
.sens-ic-ok{background:rgba(13,148,136,.14);border:1px solid rgba(13,148,136,.3);color:#5eead4}
.sens-ic-no{background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.28);color:#f87171}
.sens-card h3{font-size:1.3rem;margin-bottom:18px}
.sens-list{list-style:none;display:grid;gap:13px}
.sens-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--text-dim);line-height:1.5}
.sens-list li i{margin-top:4px;font-size:.85rem;flex:none;color:#0d9488}
.sens-list-no li i{color:#dc2626}
@media(max-width:880px){.sens-grid{grid-template-columns:1fr}}

/* === Héros personnalisé e-commerce mode — accent violet « mode » (pilote Hanz) === */
:root{ --accent:#8B5CF6; }
.hero-sector #neural-canvas{ filter:hue-rotate(42deg) saturate(1.08); }

.hero-sector .hero-eyebrow{ color:#A78BFA; }
.hero-sector .grad-text{ background:linear-gradient(120deg,#A78BFA,#7C3AED); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sector .btn-primary{ background:linear-gradient(120deg,#8B5CF6,#7C3AED); box-shadow:0 10px 34px -10px rgba(139,92,246,.55); }

/* === Schéma de flux e-commerce mode — héros (pilote Hanz) === */
.flux-ecommerce-mode{ width:100%; height:auto; }
.flux-ecommerce-mode text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.flux-ecommerce-mode .flux-line{ stroke:rgba(167,139,250,.28); stroke-width:1.4; }
.flux-ecommerce-mode .flux-line.out{ stroke:rgba(124,58,237,.4); stroke-width:1.7; }
.flux-ecommerce-mode .p{ fill:#C4B5FD; filter:drop-shadow(0 0 3px rgba(196,181,253,.8)); }
.flux-ecommerce-mode .p.out{ fill:#A78BFA; }
.flux-ecommerce-mode .fnode circle{ fill:rgba(167,139,250,.12); stroke:rgba(167,139,250,.6); stroke-width:1.4; }
.flux-ecommerce-mode .fnode text{ fill:#ddd6fe; font-size:13px; font-weight:600; }
.flux-ecommerce-mode .ia-core{ fill:#8B5CF6; animation:ecmIaPulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.flux-ecommerce-mode .ia-label{ fill:#fff; font-size:17px; font-weight:800; }
.flux-ecommerce-mode .ia-sub{ fill:#c4b5fd; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.flux-ecommerce-mode .vous{ fill:rgba(124,58,237,.18); stroke:#7C3AED; stroke-width:1.7; }
.flux-ecommerce-mode .vous-label{ fill:#fff; font-size:14px; font-weight:700; }
.flux-ecommerce-mode .vous-sub{ fill:#c4b5fd; font-size:11px; }
.flux-ecommerce-mode .ev{ fill:#C4B5FD; font-size:13px; font-weight:700; opacity:0; letter-spacing:.01em; }
.flux-ecommerce-mode .ev-cap{ fill:#7c3aed; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
@keyframes ecmIaPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* === Mini-pipeline « brouillon → vous validez → en ligne » (section l'IA en plus) === */
.ecm-pipe{margin:42px auto 0;max-width:720px;text-align:center}
.ecm-pipe-cap{font-size:.92rem;color:var(--light-dim);line-height:1.5;margin:0 auto 14px;max-width:560px}
.ecm-pipe-cap b{color:#7C3AED;font-weight:700}
.ecm-pipeline{width:100%;height:auto;display:block}
.ecm-pipeline text{text-anchor:middle;font-family:Inter,system-ui,sans-serif}
.ecm-pipeline .ecm-rail{stroke:rgba(124,58,237,.32);stroke-width:2;stroke-dasharray:5 6}
.ecm-pipeline .ecm-dot{fill:#8B5CF6;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}
.ecm-pipeline .ecm-node{fill:#fff;stroke:rgba(124,58,237,.45);stroke-width:1.6}
.ecm-pipeline .ecm-node.ecm-ia{fill:#8B5CF6;stroke:#7C3AED;animation:ecmCorePulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ecm-pipeline .ecm-node.ecm-you{fill:#f5f3ff;stroke:#7C3AED;stroke-width:2}
.ecm-pipeline .ecm-emoji{font-size:18px}
.ecm-pipeline .ecm-check{fill:#7C3AED;font-size:20px;font-weight:800}
.ecm-pipeline .ecm-ia-lbl{fill:#fff;font-size:15px;font-weight:800}
.ecm-pipeline .ecm-lbl{fill:var(--light-dim);font-size:13px;font-weight:600}
.ecm-pipeline .ecm-lbl-you{fill:#7C3AED;font-weight:700}
@keyframes ecmCorePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(max-width:560px){.ecm-pipeline .ecm-lbl{font-size:11px}}

@media (prefers-reduced-motion:reduce){
  .flux-ecommerce-mode .ia-core{ animation:none; }
  .ecm-pipeline .ecm-node.ecm-ia{ animation:none; }
}