/* ============================================================
   PAGE « POURQUOI PAS DE PRIX AFFICHÉ » — design system v3
   Réutilise au maximum les patterns de he-agence-ia-toulouse-v3.css
   (hero, trust-strip, section-light/sombre, about-cta, sec-head…).
   Propre à la page :
     - accent #34D399 (le vert serein : la clarté, la confiance)
     - héros un peu plus court + visuel « le curseur de périmètre »
       (un curseur qui glisse sur une échelle, jamais figé)
     - « chaque écosystème est différent » : 3 cartes (claire)
     - « pas de l'opacité » : parti pris (texte + points, sombre)
     - « comment ça se construit » : 3 étapes (claire)
   Mêmes variables, mêmes codes visuels que le reste du site.
   ============================================================ */

/* 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}

/* ============================================================
   ACCENT PROPRE À LA PAGE — #34D399 (le vert serein, la clarté)
   ============================================================ */
:root{ --accent:#34D399; }
.hero-prix .hero-eyebrow{ color:#6EE7B7; }
.hero-prix .grad-text,
.prix-diff .grad-text,
.prix-clair .grad-text,
.prix-comment .grad-text,
.about-cta .grad-text{ background:linear-gradient(120deg,#34D399,#10B981); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-prix .btn-primary,
.about-cta .btn-primary{ background:linear-gradient(120deg,#34D399,#10B981); box-shadow:0 10px 34px -10px rgba(16,185,129,.55); }
/* l'éclair de l'eyebrow (// ) reprend l'accent de la page */
.hero-prix .eyebrow::before{ color:#34D399; }

/* --- HÉRO « pourquoi pas de prix » : un peu plus court --- */
.hero-prix{min-height:auto;padding:150px 0 96px}
.hero-in-prix{align-items:center}
.hero-prix h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.hero-prix p.lede{margin-top:26px}

/* ============================================================
   VISUEL DU HÉROS — le curseur de périmètre
   un curseur glisse le long d'une échelle ouverte, sans jamais
   se figer ; des particules circulent ; deux ancres « vous / nous »
   tiennent l'échelle : le juste périmètre, défini ensemble.
   ============================================================ */
.viz-prix{ width:100%; height:auto; overflow:visible; max-width:440px; margin-inline:auto; display:block; }
.viz-prix text{ font-family:Inter,system-ui,sans-serif; }

.viz-prix .prix-rail{ stroke:url(#prixArc); stroke-width:2.4; stroke-linecap:round; opacity:.85; }
.viz-prix .prix-ticks line{ stroke:rgba(110,231,183,.5); stroke-width:1.6; stroke-linecap:round; }

.viz-prix .prix-p{ fill:#6EE7B7; filter:drop-shadow(0 0 4px rgba(52,211,153,.9)); }

.viz-prix .prix-core{ fill:rgba(52,211,153,.14); stroke:#34D399; stroke-width:2.2;
  filter:drop-shadow(0 0 16px rgba(52,211,153,.5)); }
.viz-prix .prix-check{ stroke:#6EE7B7; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.viz-prix .prix-anchor-node{ fill:rgba(16,185,129,.16); stroke:#34D399; stroke-width:1.8; }
.viz-prix .prix-anchor-label{ fill:#6EE7B7; font-size:11px; font-weight:600; text-anchor:middle; letter-spacing:.02em; }

.viz-prix .prix-legend{ fill:#9bead0; font-size:11px; font-weight:600; text-anchor:middle; letter-spacing:.02em; }

/* respirations douces (pas de déplacement brusque) */
.viz-prix .prix-anchor-node{ animation:prixPulse 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.viz-prix .prix-anchor-node:nth-of-type(2){ animation-delay:1.1s; }
@keyframes prixPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* ============================================================
   CHAQUE ÉCOSYSTÈME EST DIFFÉRENT — section claire : 3 cartes
   ============================================================ */
.prix-diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:0 auto}
.prix-card{position:relative;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}
.prix-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(120deg,#34D399,#10B981);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.prix-card:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.prix-card:hover::before{transform:scaleX(1)}
.prix-card .pc-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.22);color:#059669}
.prix-card h3{font-size:1.16rem;margin-bottom:10px;color:var(--light-text)}
.prix-card p{color:var(--light-dim);font-size:.94rem;margin:0}
.prix-card p b{color:var(--light-text);font-weight:600}
@media(max-width:880px){.prix-diff-grid{grid-template-columns:1fr}}

/* ============================================================
   PAS DE L'OPACITÉ — section sombre : parti pris (texte + points)
   ============================================================ */
.prix-clair{background:radial-gradient(64% 60% at 22% 0%, rgba(16,185,129,.10),transparent 60%)}
.prix-clair .prix-clair-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,64px);align-items:center}
.prix-clair-copy h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin:16px 0 0}
.prix-clair-copy .lead{font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:500;line-height:1.34;
  letter-spacing:-.01em;color:var(--text);margin-top:22px}
.prix-clair-copy > p{color:var(--text-dim);font-size:1.04rem;margin-top:18px;max-width:600px}
.prix-clair-copy > p b{color:var(--text);font-weight:600}
.prix-clair-points{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.prix-clair-points li{display:flex;align-items:flex-start;gap:16px;border-radius:16px;padding:18px 22px;
  background:linear-gradient(180deg,var(--surface),var(--ink-700));border:1px solid var(--line-strong);
  transition:transform .4s var(--ease),border-color .4s}
.prix-clair-points li:hover{transform:translateX(4px);border-color:rgba(52,211,153,.32)}
.prix-clair-points .pcl-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(120deg,rgba(16,185,129,.16),rgba(5,150,105,.10));border:1px solid rgba(52,211,153,.24);color:#6EE7B7}
.prix-clair-points li span:last-child{display:flex;flex-direction:column;line-height:1.4}
.prix-clair-points b{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.prix-clair-points small{font-size:.86rem;color:var(--text-mute);margin-top:3px}
@media(max-width:920px){.prix-clair .prix-clair-grid{grid-template-columns:1fr;gap:40px}}

/* ============================================================
   COMMENT ÇA SE CONSTRUIT — section claire : 3 étapes
   ============================================================ */
.prix-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:0 auto}
.prix-step{position:relative;display:flex;gap:20px;border-radius:var(--radius);padding:28px 26px;
  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}
.prix-step::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(120deg,#34D399,#10B981);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.prix-step:hover{transform:translateY(-5px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.prix-step:hover::before{transform:scaleX(1)}
.prix-step .ps-num{flex:none;font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:#059669;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.22)}
.prix-step .ps-ico{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.22);color:#059669}
.prix-step .ps-copy{flex:1}
.prix-step h3{font-size:1.18rem;margin:0 0 8px;color:var(--light-text)}
.prix-step p{color:var(--light-dim);font-size:.96rem;margin:0}
.prix-step p b{color:var(--light-text);font-weight:600}
@media(max-width:880px){.prix-steps{grid-template-columns:1fr}}
@media(max-width:540px){.prix-step{flex-direction:column;gap:14px;padding:24px 22px}}

.prix-foot{position:relative;display:flex;align-items:flex-start;gap:12px;max-width:840px;margin:3rem auto 0;
  color:var(--light-dim);font-size:1.02rem;text-align:left;justify-content:center}
.prix-foot i{color:#059669;margin-top:.2rem;flex:none}
.prix-foot b{color:var(--light-text);font-weight:600}

/* ============================================================
   ACCESSIBILITÉ — on respecte prefers-reduced-motion :
   plus aucune animation (particules SMIL + curseur + pulsations).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .viz-prix .prix-anchor-node{ animation:none; opacity:.85; }
  .viz-prix .prix-p{ visibility:hidden; }
  .viz-prix .prix-cursor *,
  .viz-prix .prix-cursor{ animation:none; }
  /* on fige le curseur au centre de l'échelle pour une image lisible et stable */
  .viz-prix .prix-cursor{ transform:translate(180px,178px); }
}