/* ============================================================
   PERSONNALISATION IA — 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
   Ici : héros de page (sans canvas), bloc prose, démarche sombre,
   cartes "vos données" claires, grille d'exemples 3 colonnes.
   ============================================================ */

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

/* --- bloc prose centré (pourquoi le sur-mesure) --- */
.prose-narrow{max-width:760px;margin-inline:auto;display:grid;gap:1.2rem}
.section-light .prose-narrow p{color:var(--light-dim);font-size:1.08rem;line-height:1.7}
.section-light .prose-narrow p strong{color:var(--light-text);font-weight:600}
.section-light .prose-narrow p em{color:var(--blue-600);font-style:normal;font-weight:600}

/* ============================================================
   DÉMARCHE — section sombre, 4 étapes numérotées
   ============================================================ */
.method-dark{background:radial-gradient(64% 60% at 78% 0%, rgba(37,99,235,.09),transparent 60%)}
.dstep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dstep{position:relative;border-radius:var(--radius);padding:30px 26px;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}
.dstep::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)}
.dstep:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 36px 64px -34px rgba(0,0,0,.7)}
.dstep:hover::before{transform:scaleX(1)}
.dstep .dnum{font-family:var(--font-mono);font-size:.78rem;color:var(--accent)}
.dstep .dico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;margin:14px 0 16px;
  background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--blue-300)}
.dstep :is(h3,h4),.dstep h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.dstep p{color:var(--text-dim);font-size:.92rem}
@media(max-width:980px){.dstep-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.dstep-grid{grid-template-columns:1fr}}

/* ============================================================
   VOS DONNÉES — cartes claires (4 colonnes -> 2 -> 1)
   ============================================================ */
.trust-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-card{position:relative;border-radius:var(--radius);padding:30px 26px;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}
.trust-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)}
.trust-card:hover{transform:translateY(-6px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.trust-card:hover::before{transform:scaleX(1)}
.trust-card .tc-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(56,189,248,.08));border:1px solid var(--light-line-strong);color:var(--blue-600)}
.trust-card :is(h3,h4),.trust-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:9px;color:var(--light-text);letter-spacing:-.01em}
.trust-card p{color:var(--light-dim);font-size:.93rem}
@media(max-width:980px){.trust-cards{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.trust-cards{grid-template-columns:1fr}}

/* ============================================================
   EXEMPLES — grille 3 colonnes (réutilise .data-card du système)
   ============================================================ */
.data-grid.svc6{grid-template-columns:repeat(3,1fr)}
.data-grid.svc6 .data-card{display:flex;flex-direction:column}
@media(max-width:980px){.data-grid.svc6{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.data-grid.svc6{grid-template-columns:1fr}}

/* --- bande "pour aller plus loin" : lien latéral inline propre --- */
.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}}

/* ============================================================
   ACCENT PROPRE À LA PAGE — indigo souverain #818CF8
   (la personnalisation = vos données, votre contexte, votre couleur)
   ============================================================ */
.hero-page{--accent:#818CF8}
.hero-page .hero-eyebrow{color:#A5B4FC}
.hero-page .grad-text{background:linear-gradient(120deg,#A5B4FC,#6366F1);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-page .btn-primary{background:linear-gradient(120deg,#818CF8,#6366F1);
  box-shadow:0 10px 34px -10px rgba(129,140,248,.55)}
.hero-page .hero-art svg{filter:drop-shadow(0 30px 60px rgba(129,140,248,.28))}

/* ============================================================
   VISUEL HÉROS — vos sources ancrées · l'IA s'imprègne · souveraineté
   ============================================================ */
.personnalisation-ia-viz{width:100%;height:auto;overflow:visible}
.personnalisation-ia-viz text{text-anchor:middle;font-family:Inter,system-ui,sans-serif}

.personnalisation-ia-sov{stroke-width:1.4;opacity:.55;
  transform-box:fill-box;transform-origin:center;
  animation:personnalisation-ia-spin 60s linear infinite}
.personnalisation-ia-orbit{stroke:rgba(165,180,252,.22);stroke-width:1.2;stroke-dasharray:1 7}
.personnalisation-ia-shield-cap{fill:#A5B4FC;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}

.personnalisation-ia-line{stroke:rgba(165,180,252,.32);stroke-width:1.4}
.personnalisation-ia-p{fill:#C7D2FE;filter:drop-shadow(0 0 3px rgba(165,180,252,.85))}

.personnalisation-ia-node rect{fill:rgba(129,140,248,.12);stroke:rgba(165,180,252,.6);stroke-width:1.4}
.personnalisation-ia-node text{fill:#C7D2FE;font-size:13px;font-weight:600;line-height:1.4}

.personnalisation-ia-core{fill:#818CF8;
  transform-box:fill-box;transform-origin:center;
  animation:personnalisation-ia-pulse 2.8s ease-in-out infinite}
.personnalisation-ia-core-label{fill:#fff;font-size:16px;font-weight:800}
.personnalisation-ia-core-sub{fill:#E0E7FF;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.personnalisation-ia-foot{fill:#A5B4FC;font-size:13px;font-weight:600}

@keyframes personnalisation-ia-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes personnalisation-ia-spin{to{transform:rotate(360deg)}}

/* ============================================================
   MINI-VISUEL — zéro-copie : la donnée reste dans son coffre
   (illustre la section « Vos données restent chez vous »)
   ============================================================ */
.personnalisation-ia-mini{max-width:560px;margin:8px auto 36px}
.personnalisation-ia-zc{width:100%;height:auto;overflow:visible}
.personnalisation-ia-zc text{text-anchor:middle;font-family:Inter,system-ui,sans-serif}

.personnalisation-ia-zc-line{stroke:rgba(129,140,248,.4);stroke-width:1.6;stroke-dasharray:4 5}
.personnalisation-ia-zc-p{fill:#818CF8;filter:drop-shadow(0 0 3px rgba(129,140,248,.7))}

.personnalisation-ia-zc-vault rect{fill:#fff;stroke:#818CF8;stroke-width:1.6}
.personnalisation-ia-zc-vault text{fill:var(--light-dim,#52607a);font-size:12px;font-weight:600}
.personnalisation-ia-zc-ico{text-anchor:middle;font-size:24px}

.personnalisation-ia-zc-tag{fill:#6366F1;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}

.personnalisation-ia-zc-ia circle{fill:#818CF8;
  transform-box:fill-box;transform-origin:center;
  animation:personnalisation-ia-pulse 2.8s ease-in-out infinite}
.personnalisation-ia-zc-ialabel{fill:#fff;font-size:14px;font-weight:800}
.personnalisation-ia-zc-ia text:last-of-type{fill:var(--light-dim,#52607a);font-size:12px;font-weight:600}

.personnalisation-ia-zc-human circle{fill:#EEF2FF;stroke:#818CF8;stroke-width:1.6}
.personnalisation-ia-zc-handico{text-anchor:middle;font-size:18px}
.personnalisation-ia-zc-human text:last-of-type{fill:var(--light-dim,#52607a);font-size:12px;font-weight:600}

/* ============================================================
   prefers-reduced-motion : on coupe le cœur et la rotation
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .personnalisation-ia-core,
  .personnalisation-ia-zc-ia circle{animation:none}
  .personnalisation-ia-sov{animation:none}
}