/* ============================================================
   PAGE ACCOMPAGNEMENT — la VRAIE façon de démarrer (design v3)
   Réutilise au maximum les patterns de he-agence-ia-toulouse-v3.css
   (hero, trust-strip, section-light/sombre, about-cta…).
   Propre à la page :
     - héros un peu plus court + visuel "le démarrage" (formulaire →
       mail → visio → co-construction → partenaire dans la durée)
     - "comment on démarre" : 4 étapes du flux réel
     - "ce qu'on cherche" : partenaire de terrain (texte + points)
     - "ce qu'on met à disposition" : 3 cartes (geek / global / IA)
   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 accompagnement : un peu plus court --- */
.hero-accomp{min-height:auto;padding:150px 0 96px}
.hero-in-accomp{align-items:center}
.hero-accomp h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
.hero-accomp p.lede{margin-top:26px}

/* ============================================================
   COMMENT ON DÉMARRE — section claire : 4 étapes du flux réel
   ============================================================ */
.demarrer .start-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px;margin:0 auto}
.start-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}
.start-step::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)}
.start-step:hover{transform:translateY(-5px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.start-step:hover::before{transform:scaleX(1)}
.start-step .ss-num{flex:none;font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--blue);
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(29,78,216,.08));border:1px solid var(--light-line-strong)}
.start-step .ss-ico{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  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)}
.start-step .ss-copy{flex:1}
.start-step h3{font-size:1.18rem;margin:0 0 8px;color:var(--light-text)}
.start-step p{color:var(--light-dim);font-size:.96rem;margin:0}
.start-step p b{color:var(--light-text);font-weight:600}
.start-step .ss-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--font-mono);font-size:.82rem;color:var(--blue-600);transition:gap .25s var(--ease),color .25s}
.start-step .ss-link i{transition:transform .25s var(--ease)}
.start-step .ss-link:hover{color:var(--blue);gap:11px}
.start-step .ss-link:hover i{transform:translateX(3px)}
@media(max-width:820px){.demarrer .start-steps{grid-template-columns:1fr}}
@media(max-width:540px){.start-step{flex-direction:column;gap:14px;padding:24px 22px}}

/* ============================================================
   CE QU'ON CHERCHE — section sombre : partenaire de terrain
   ============================================================ */
.partenaire{background:radial-gradient(64% 60% at 22% 0%, rgba(37,99,235,.09),transparent 60%)}
.partenaire .partenaire-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,64px);align-items:center}
.partenaire-copy h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin:16px 0 0}
.partenaire-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}
.partenaire-copy > p{color:var(--text-dim);font-size:1.04rem;margin-top:18px;max-width:600px}
.partenaire-copy > p b{color:var(--text);font-weight:600}
.partenaire-points{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.partenaire-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}
.partenaire-points li:hover{transform:translateX(4px);border-color:rgba(56,189,248,.3)}
.partenaire-points .pp-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.partenaire-points li span:last-child{display:flex;flex-direction:column;line-height:1.4}
.partenaire-points b{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.partenaire-points small{font-size:.86rem;color:var(--text-mute);margin-top:3px}
@media(max-width:920px){.partenaire .partenaire-grid{grid-template-columns:1fr;gap:40px}}

/* ============================================================
   CE QU'ON MET À DISPOSITION — section claire : 3 cartes
   ============================================================ */
.moyens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.moyen-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}
.moyen-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)}
.moyen-card:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.moyen-card:hover::before{transform:scaleX(1)}
.moyen-card .mc-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(37,99,235,.12),rgba(29,78,216,.08));border:1px solid var(--light-line-strong);color:var(--blue-600)}
.moyen-card h3{font-size:1.16rem;margin-bottom:10px;color:var(--light-text)}
.moyen-card p{color:var(--light-dim);font-size:.94rem;margin:0}
@media(max-width:880px){.moyens-grid{grid-template-columns:1fr}}

.moyens-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}
.moyens-foot i{color:var(--blue-600);margin-top:.2rem;flex:none}
.moyens-foot b{color:var(--light-text);font-weight:600}

/* ============================================================
   ACCENT PROPRE À LA PAGE — accompagnement (pilote Hanz)
   #38BDF8 : le ciel clair, l'autonomie qui s'ouvre.
   ============================================================ */
:root{ --accent:#38BDF8; }
.hero-accomp .hero-eyebrow{ color:#7DD3FC; }
.hero-accomp .grad-text,
.demarrer .grad-text,
.partenaire .grad-text,
.about-cta .grad-text{ background:linear-gradient(120deg,#38BDF8,#0EA5E9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-accomp .btn-primary,
.about-cta .btn-primary{ background:linear-gradient(120deg,#38BDF8,#0EA5E9); box-shadow:0 10px 34px -10px rgba(56,189,248,.55); }

/* ============================================================
   VISUEL DU HÉROS — le démarrage : formulaire → mail → visio →
   co-construction → partenaire dans la durée
   ============================================================ */
.viz-demarrage{ width:100%; height:auto; overflow:visible; }
.viz-demarrage text{ font-family:Inter,system-ui,sans-serif; }
.viz-demarrage .dem-rail{ stroke:rgba(56,189,248,.32); stroke-width:2; stroke-dasharray:5 7; stroke-linecap:round; }
.viz-demarrage .dem-p{ fill:#7DD3FC; filter:drop-shadow(0 0 4px rgba(56,189,248,.9)); }
.viz-demarrage .dem-node{ fill:rgba(56,189,248,.12); stroke:#38BDF8; stroke-width:1.8; }
.viz-demarrage .dem-step .dem-node{ animation:demPop 4.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center;
  animation-delay:calc(var(--i,0) * .6s); }
.viz-demarrage .dem-num{ fill:#fff; font-size:14px; font-weight:800; text-anchor:middle; }
.viz-demarrage .dem-label{ fill:#bae6fd; font-size:12px; font-weight:600; }
.viz-demarrage .dem-label-r{ text-anchor:start; }
.viz-demarrage .dem-core{ fill:#38BDF8; animation:demPulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 18px rgba(56,189,248,.55)); }
.viz-demarrage .dem-core-label{ fill:#fff; font-size:11px; font-weight:800; text-anchor:middle; }
.viz-demarrage .dem-core-label.small{ font-size:8.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; fill:#e0f2fe; }
.viz-demarrage .dem-loop{ stroke:rgba(125,211,252,.55); stroke-width:1.6; stroke-dasharray:3 5; stroke-linecap:round; }
.viz-demarrage .dem-loop-label{ fill:#7dd3fc; font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-anchor:middle; }
@keyframes demPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
@keyframes demPop{ 0%,70%,100%{ transform:scale(1); } 82%{ transform:scale(1.16); } }

/* prefers-reduced-motion : on coupe les pulsations CSS et on masque les
   particules en mouvement (SMIL) pour ne plus donner d'effet de déplacement */
@media (prefers-reduced-motion:reduce){
  .viz-demarrage .dem-core,
  .viz-demarrage .dem-step .dem-node{ animation:none; }
  .viz-demarrage .dem-p{ visibility:hidden; }
}