/* ============================================================
   OPTIMISATION INTELLIGENTE — styles additionnels (design system v3)
   Réutilise au maximum le vocabulaire de la homepage v3 :
   .hero .eyebrow .sec-head .grad-text [data-reveal] .go-next .btn
   .trust-strip .axes-grid/.axis-card .data/.data-grid/.data-card
   .quickwins/.qw-band .about-cta/.ac-shell .section-light .nope-*
   Ici : héros de page (sans canvas), bloc constat (prose claire),
   grille de leviers (sombre), méthode 3 étapes (claire), exemples
   avant/après (sombre), cadre "ce qu'on ne fait pas" (claire).
   ============================================================ */

/* --- HÉRO de page : plus court, pas de canvas, fond halo sobre --- */
.hero-page{min-height:auto;padding:150px 0 96px;
  background:radial-gradient(70% 60% at 70% -8%,rgba(37,99,235,.14),transparent 62%)}
.hero-in-page{align-items:center}
.hero-page h1{font-size:clamp(2.2rem,5vw,3.9rem)}
.hero-page .hero-art svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 30px 60px rgba(37,99,235,.25))}
.hero-page .hero-meta{margin-top:42px}
@media(max-width:980px){.hero-page .hero-art{display:none}}

/* --- accueil ciblé : petit bandeau "vous êtes venu pour…" --- */
.aim-line{display:inline-flex;align-items:flex-start;gap:11px;margin-top:6px;
  font-family:var(--font-mono);font-size:.84rem;color:var(--text-dim);
  border:1px solid var(--line-strong);border-radius:14px;padding:12px 18px;max-width:600px;line-height:1.5}
.aim-line i{color:var(--accent);margin-top:2px;flex:none}
.aim-line b{color:var(--text);font-weight:600}

/* ============================================================
   LE CONSTAT — section claire, prose centrée
   ============================================================ */
.prose-narrow{max-width:780px;margin-inline:auto;display:grid;gap:1.2rem}
.section-light .prose-narrow p{color:var(--light-dim);font-size:1.06rem;line-height:1.7}
.section-light .prose-narrow p.prose-lead{font-family:var(--font-display);
  font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:500;line-height:1.4;color:var(--light-text)}
.section-light .prose-narrow p strong,
.section-light .prose-narrow p b{color:var(--light-text);font-weight:600}
.section-light .prose-narrow p em{color:var(--blue-600);font-style:normal;font-weight:600}

/* ============================================================
   LÀ OÙ L'IA AGIT — section sombre, grille de leviers
   (réutilise .data-card du système, en grille 3 col -> 2 -> 1)
   ============================================================ */
.levers{background:radial-gradient(64% 60% at 78% 0%, rgba(37,99,235,.09),transparent 60%)}
.data-grid.lev5{grid-template-columns:repeat(3,1fr)}
.data-grid.lev5 .data-card{display:flex;flex-direction:column}
@media(max-width:980px){.data-grid.lev5{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.data-grid.lev5{grid-template-columns:1fr}}

/* ============================================================
   NOTRE MÉTHODE — section claire, 3 étapes numérotées
   ============================================================ */
.method-light{position:relative}
.lstep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lstep{position:relative;border-radius:var(--radius);padding:32px 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}
.lstep::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)}
.lstep:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.lstep:hover::before{transform:scaleX(1)}
.lstep .lstep-top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.lstep .lnum{font-family:var(--font-mono);font-size:.78rem;color:var(--blue);flex:none}
.lstep .lico{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:1.25rem;
  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)}
.lstep :is(h3,h4){font-family:var(--font-display);font-size:1.14rem;font-weight:600;margin-bottom:10px;color:var(--light-text);letter-spacing:-.01em}
.lstep p{color:var(--light-dim);font-size:.95rem}
@media(max-width:920px){.lstep-grid{grid-template-columns:1fr}}

/* ============================================================
   EN PRATIQUE — section sombre, cartes avant/après
   ============================================================ */
.inpractice{background:radial-gradient(60% 70% at 22% 0%,rgba(29,78,216,.08),transparent 60%)}
.prac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prac-card{position:relative;border-radius:var(--radius);padding:30px 28px;overflow:hidden;display:flex;flex-direction:column;
  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}
.prac-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)}
.prac-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.prac-card:hover::before{transform:scaleX(1)}
.prac-card .prac-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;margin-bottom:18px;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.prac-card h3{font-family:var(--font-display);font-size:1.14rem;font-weight:600;margin-bottom:16px;letter-spacing:-.01em}
.prac-card .prac-row{font-size:.92rem;line-height:1.5;color:var(--text-mute);margin-bottom:12px}
.prac-card .prac-row:last-child{margin-bottom:0}
.prac-card .prac-row.after{color:var(--text-dim);position:relative;padding-left:20px}
.prac-card .prac-row.after::before{content:"→";position:absolute;left:0;top:0;color:var(--accent);font-weight:600}
.prac-card .prac-row b{font-family:var(--font-mono);font-size:.74rem;font-weight:600}
.prac-card .prac-row.before b{color:var(--text-dim)}
.prac-card .prac-row.after b{color:var(--blue-200)}
@media(max-width:920px){.prac-grid{grid-template-columns:1fr}}

/* ============================================================
   NOTRE CADRE — section claire, liste "ce qu'on ne fait pas"
   ============================================================ */
.frame-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;max-width:920px;margin-inline:auto}
.frame-points li{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-radius:var(--radius);
  background:var(--light-surface);border:1px solid var(--light-line);box-shadow:0 18px 40px -32px rgba(15,27,45,.35);
  font-size:.97rem;color:var(--light-dim);line-height:1.55}
.frame-points li i{flex:none;margin-top:3px;font-size:1.15rem;color:var(--accent-warm)}
.frame-points li b{color:var(--light-text);font-weight:600}
@media(max-width:820px){.frame-points{grid-template-columns:1fr}}

/* --- lien latéral discret "aller plus loin" (réutilise .qw-band) --- */
.quickwins .qw-band p .card-more{margin-left:6px}
@media(max-width:600px){.quickwins .qw-band p .card-more{margin-left:0;margin-top:8px}}

/* ============================================================
   OVERRIDES D'ACCENT — bleu fluidité #60A5FA (pilote Hanz)
   Accent propre à la page : les process qui se fluidifient.
   ============================================================ */
:root{ --accent:#60A5FA; }
.hero-page .hero-eyebrow{ color:#93C5FD; }
.hero-page .grad-text,
.hero-page h1 .grad-text{ background:linear-gradient(120deg,#60A5FA,#2563EB); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-page .btn-primary{ background:linear-gradient(120deg,#60A5FA,#2563EB); box-shadow:0 10px 34px -10px rgba(96,165,250,.55); }

/* ============================================================
   VISUEL HÉROS — vos process qui se fluidifient (fond sombre)
   Avant : fragmenté & figé · Centre : réorchestration · Après : fluide
   ============================================================ */
.viz-optimisation-intelligente{ width:100%; height:auto; overflow:visible; }
.viz-optimisation-intelligente text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.viz-optimisation-intelligente .oi-cap{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.viz-optimisation-intelligente .oi-cap-before{ fill:rgba(148,163,184,.9); }
.viz-optimisation-intelligente .oi-cap-after{ fill:#93C5FD; }

/* AVANT : tronçons brisés, ternes, désalignés */
.viz-optimisation-intelligente .oi-frag{ stroke:rgba(148,163,184,.34); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:5 6; }
.viz-optimisation-intelligente .oi-tool circle{ fill:rgba(148,163,184,.14); stroke:rgba(148,163,184,.55); stroke-width:1.3; }
.viz-optimisation-intelligente .oi-p-before{ fill:#94A3B8; }

/* alimentation vers le cœur */
.viz-optimisation-intelligente .oi-feed{ stroke:rgba(96,165,250,.32); stroke-width:1.4; }

/* CŒUR : réorchestration, l'accent vif qui pulse */
.viz-optimisation-intelligente .oi-core{ fill:#60A5FA; animation:optimisation-intelligentePulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 14px rgba(96,165,250,.7)); }
.viz-optimisation-intelligente .oi-core-label{ fill:#fff; font-size:15px; font-weight:800; }
.viz-optimisation-intelligente .oi-core-sub{ fill:#93C5FD; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }

/* APRÈS : un flux unique, lumineux, continu */
.viz-optimisation-intelligente .oi-flowline{ stroke:#60A5FA; stroke-width:2.4; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(96,165,250,.5)); }
.viz-optimisation-intelligente .oi-p{ fill:#93C5FD; filter:drop-shadow(0 0 3px rgba(96,165,250,.85)); }
.viz-optimisation-intelligente .oi-p-after{ fill:#60A5FA; filter:drop-shadow(0 0 5px rgba(96,165,250,.95)); }

@keyframes optimisation-intelligentePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }

/* ============================================================
   MINI-VISUEL milieu de page — le pont entre deux outils
   Section claire (#trous) : couleurs qui ressortent sur fond clair
   ============================================================ */
.oi-midviz-wrap{ max-width:540px; margin:38px auto 4px; }
.oi-midviz{ width:100%; height:auto; overflow:visible; }
.oi-midviz text{ text-anchor:middle; font-family:Inter,system-ui,sans-serif; }
.oi-midviz .oi-mid-gap{ stroke:rgba(148,163,184,.32); stroke-width:1.4; stroke-dasharray:4 7; }
.oi-midviz .oi-mid-line{ stroke:rgba(96,165,250,.6); stroke-width:1.7; stroke-linecap:round; }
.oi-midviz .oi-mid-tool circle{ fill:#fff; stroke:rgba(96,165,250,.55); stroke-width:1.6;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.oi-midviz .oi-mid-tool-label{ fill:#1d4ed8; font-size:13px; font-weight:700; }
.oi-midviz .oi-mid-core{ fill:#60A5FA; animation:optimisation-intelligentePulse 2.8s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 12px rgba(96,165,250,.7)); }
.oi-midviz .oi-mid-core-label{ fill:#fff; font-size:14px; font-weight:800; }
.oi-midviz .oi-mid-cap{ fill:#93C5FD; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.oi-midviz .oi-p-after{ fill:#93C5FD; filter:drop-shadow(0 0 4px rgba(96,165,250,.9)); }

/* prefers-reduced-motion : on coupe la pulsation du cœur */
@media (prefers-reduced-motion:reduce){
  .viz-optimisation-intelligente .oi-core,
  .oi-midviz .oi-mid-core{ animation:none; }
}