/* Pulsion Studio : composants des pages intérieures (solutions, expertises, réalisations, À propos).
   S'ajoute à experience.css, dont il reprend les jetons, l'en-tête, les panneaux et les sections communes. */

/* ---------- Menu : la page solution courante allume « Solutions » ---------- */
.has-menu.is-current .topnav-trigger .nav-ico { opacity: 1; color: var(--blue-bright); }
.mega a[aria-current="page"] b { color: var(--blue-bright); }

/* ---------- Héros de page : court, sombre, mosaïque en coin ---------- */
.page-hero { padding-block: clamp(150px, 14vw, 190px) clamp(64px, 7vw, 96px); }
.page-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.page-hero .display { max-width: 17ch; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); text-wrap: balance; }
.page-hero .hero-lead { max-width: 640px; color: var(--muted); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); text-wrap: pretty; animation: none; }
.page-hero .actions { margin-top: 6px; width: auto; margin-inline: 0; animation: none; }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--fg); }

/* ---------- Listes de formules : sous-titre d'une seconde liste ---------- */
.list-heading { margin: clamp(48px, 5vw, 72px) 0 18px; font-family: var(--font-title); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -0.02em; }
.needs-list--compact .need-row { padding-block: 20px; }
.needs-list--compact .need-title { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }
.needs-list--compact .need-price { display: none; }

/* ---------- Démonstration autonome : le site d'exemple de l'accueil, style au choix ---------- */
.showcase-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.showcase-steps { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 26px; counter-reset: etape; }
.showcase-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 46px; counter-increment: etape; }
.showcase-steps li::before { content: "0" counter(etape); position: absolute; left: 0; top: 0; font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--blue); }
.showcase-steps b { font-family: var(--font-title); font-weight: 500; font-size: 1.15rem; }
.showcase-steps span { color: var(--muted); }
.showcase-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.showcase .device {
  --dev-h: min(46vw, 440px); width: 100%;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(150deg, rgba(0, 91, 245, .35), rgba(10, 10, 35, .06) 45%, rgba(0, 91, 245, .3)) border-box;
  box-shadow: 0 40px 100px -40px rgba(10, 20, 80, .4), 0 0 0 6px rgba(0, 91, 245, .04);
}
.showcase .device-url { background: var(--paper); }
.showcase .scene--site { opacity: 1; visibility: visible; }
.showcase .ctrl--styles { display: flex; }

/* ---------- Engagements par quatre ---------- */
.story-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Questions fréquentes ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.faq-grid .section-intro { position: sticky; top: calc(var(--nav-bottom, 90px) + 48px); }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  position: relative; display: block; padding: 24px 48px 24px 0; cursor: pointer; list-style: none;
  font-family: var(--font-title); font-weight: 500; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease);
}
.faq-item[open] summary::after { rotate: -135deg; margin-top: -2px; }
.faq-item summary:hover { color: var(--blue); }
.faq-item p { padding: 0 48px 26px 0; color: var(--muted); line-height: 1.65; text-wrap: pretty; }

/* ---------- Pour aller plus loin : maillage ---------- */
.related { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.related-block h3 { margin-bottom: 18px; font-family: var(--font-title); font-weight: 500; font-size: 1.2rem; }
.pill-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-links a { display: inline-flex; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-strong); text-decoration: none; font-size: .95rem; transition: border-color .3s ease, color .3s ease, background-color .3s ease; }
.pill-links a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .showcase-grid, .faq-grid, .related { grid-template-columns: 1fr; }
  .faq-grid .section-intro { position: static; }
  .showcase .device { --dev-h: min(62vw, 360px); }
  .story-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-hero { padding-top: 120px; }
  .showcase .device { --dev-h: min(92vw, 350px); }
  .faq-item summary { padding-right: 36px; }
  .faq-item p { padding-right: 0; }
}

/* ---------- Réassurance : pictogramme, titre court, une phrase, en colonnes ---------- */
.assurances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); }
.assurance { display: flex; flex-direction: column; gap: 10px; }
.assurance-ico {
  width: 52px; height: 52px; padding: 13px; margin-bottom: 8px; border-radius: 16px;
  fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  border: 1px solid transparent;
  background: var(--card-fill) padding-box, var(--card-edge) border-box; box-shadow: var(--card-shadow);
}
.assurance h3 { font-family: var(--font-title); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.assurance p { color: var(--muted); text-wrap: pretty; }
@media (max-width: 1000px) { .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .assurances { grid-template-columns: 1fr; } .assurance { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; } .assurance-ico { grid-row: span 2; margin: 0; } }


/* =====================================================================
   Illustrations des héros des pages solution (outils/commun.py, illustration())
   Un écran clair, comme dans les démonstrations de l'accueil, et des cartes sombres qui flottent autour.
   Toutes les mesures suivent la largeur de l'illustration (cqw) : elle se redimensionne d'un bloc.
   ===================================================================== */
@media (min-width: 1024px) {
  .page-hero-inner--illu { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 4vw, 72px); }
}
.page-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.page-hero-illu { width: 100%; max-width: 560px; justify-self: end; }
@media (max-width: 1023px) { .page-hero-illu { max-width: 520px; margin-top: 12px; } }

.ill { position: relative; width: 100%; aspect-ratio: 1.12; container-type: inline-size; }
.ill > * { position: absolute; animation: rise 1s var(--ease) both; }
.ill > :nth-child(2) { animation-delay: .15s; }
.ill > :nth-child(3) { animation-delay: .3s; }

/* Écran clair */
.ill-win {
  left: 4%; top: 4%; width: 80%; height: 70%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 3cqw; background: #f4f6fc; color: var(--ink);
  box-shadow: 0 6cqw 12cqw -5cqw rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .14);
}
.ill-win-top { flex: none; display: flex; align-items: center; gap: 1cqw; height: 6.5cqw; padding: 0 2.6cqw; background: #e3e7f2; }
.ill-win-top i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #c3cadc; }
.ill-win-top b { flex: 0 1 34%; height: 2.6cqw; margin-left: 3cqw; border-radius: 2cqw; background: #fff; }
.ill-win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.4cqw; }

/* Pièces communes */
.ill-bar { display: block; width: var(--w, 60%); height: 1.7cqw; border-radius: 1cqw; background: #c9d1e6; }
.ill-bar + .ill-bar { margin-top: 1.2cqw; }
.ill-bar--soft { height: 1.2cqw; background: #dde2ef; }
.ill-bar--dark { background: rgba(197, 214, 249, .22); }
.ill-pill { display: block; width: 34%; height: 4cqw; margin-top: 2.4cqw; border-radius: 3cqw; background: linear-gradient(100deg, var(--blue), var(--blue-bright)); box-shadow: 0 1.5cqw 3cqw -1cqw rgba(0, 91, 245, .6); }
.ill-pill--wide { width: 100%; margin-top: 1.6cqw; }
.ill-card {
  display: flex; flex-direction: column; gap: 1.6cqw; padding: 3cqw; border-radius: 3cqw; border: 1px solid transparent;
  background: linear-gradient(160deg, #141344, #0b0a2a) padding-box, var(--card-edge) border-box;
  box-shadow: 0 5cqw 10cqw -4cqw rgba(0, 0, 0, .85);
}
.ill-media { border-radius: 2cqw; background: radial-gradient(60% 70% at 70% 30%, rgba(111, 155, 255, .9), transparent 70%), linear-gradient(140deg, #005bf5, #0b0a2a); }

/* Site */
.ill-nav { display: flex; align-items: center; gap: 2cqw; }
.ill-nav span { flex: 1; }
.ill-nav .ill-bar { margin: 0; }
.ill-nav .ill-bar--soft { width: 7cqw; }
.ill-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; }
.ill-hero .ill-media { height: 100%; }
.ill-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; height: 9cqw; }
.ill-mini { border-radius: 1.6cqw; background: #fff; box-shadow: 0 1cqw 2cqw -1cqw rgba(10, 30, 90, .25); }
.ill-phone { right: 2%; bottom: 3%; width: 27%; height: 62%; padding: 1.6cqw; border-radius: 4.5cqw; background: #0b0a2a; box-shadow: 0 6cqw 12cqw -4cqw rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .16); }
.ill-phone-screen { height: 100%; display: flex; flex-direction: column; gap: 1cqw; padding: 2.4cqw 2cqw; border-radius: 3.2cqw; background: #f4f6fc; }
.ill-media--phone { height: 40%; margin-bottom: 1.6cqw; }
.ill-phone .ill-pill { width: 70%; height: 3.4cqw; margin-top: auto; }
.ill-card--swatch { left: 0; bottom: 4%; width: 34%; }
.ill-swatches { display: flex; gap: 1.4cqw; }
.ill-swatches i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; }
.ill-swatches i:nth-child(1) { background: var(--blue); }
.ill-swatches i:nth-child(2) { background: var(--sky); }
.ill-swatches i:nth-child(3) { background: #fff; }
.ill-swatches i:nth-child(4) { background: #050416; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ill-type { font-family: var(--font-title); font-weight: 500; font-size: 7cqw; line-height: 1; letter-spacing: -0.04em; color: #fff; }

/* Produit */
.ill-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 9cqw 1fr; gap: 3cqw; }
.ill-side { display: flex; flex-direction: column; gap: 2cqw; padding: 2cqw 0; border-radius: 2cqw; background: #e3e7f2; align-items: center; }
.ill-side i { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: #c9d1e6; }
.ill-side i.is-on { background: var(--blue); }
.ill-main { min-width: 0; display: flex; flex-direction: column; gap: 2.4cqw; }
.ill-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ill-tile { position: relative; height: 13cqw; padding: 2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1cqw 2cqw -1cqw rgba(10, 30, 90, .25); overflow: hidden; }
.ill-tile b { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; height: calc(var(--h) * .45); border-radius: 1cqw; background: linear-gradient(180deg, var(--blue-bright), rgba(61, 123, 255, .25)); }
.ill-chart { flex: 1; min-height: 0; padding: 1.6cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1cqw 2cqw -1cqw rgba(10, 30, 90, .25); }
.ill-chart svg { width: 100%; height: 100%; display: block; }
.ill-area { fill: url(#ill-area); }
.ill-line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ill-card--controls { right: 0; top: 16%; width: 36%; }
.ill-slider { position: relative; height: 1.4cqw; margin: 1.6cqw 0 2cqw; border-radius: 1cqw; background: rgba(197, 214, 249, .2); }
.ill-slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: inherit; background: var(--blue-bright); }
.ill-slider b { position: absolute; left: 64%; top: 50%; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1cqw rgba(61, 123, 255, .35); }
.ill-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.ill-toggle-row .ill-bar { margin: 0; }
.ill-toggle { flex: none; position: relative; width: 7cqw; height: 4cqw; border-radius: 3cqw; background: var(--blue); }
.ill-toggle::after { content: ""; position: absolute; right: .6cqw; top: .6cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #fff; }
.ill-toggle.is-off { background: rgba(197, 214, 249, .22); }
.ill-toggle.is-off::after { right: auto; left: .6cqw; }
.ill-card--people { left: 0; bottom: 6%; width: 32%; }
.ill-avatars { display: flex; }
.ill-avatars i { width: 6cqw; height: 6cqw; margin-right: -1.6cqw; border-radius: 50%; border: .5cqw solid #0f0e36; }
.ill-avatars i:nth-child(1) { background: linear-gradient(140deg, #6f9bff, #005bf5); }
.ill-avatars i:nth-child(2) { background: linear-gradient(140deg, #ffb07a, #ff8a3d); }
.ill-avatars i:nth-child(3) { background: linear-gradient(140deg, #f58ab1, #f0508c); }
.ill-avatars i:nth-child(4) { background: linear-gradient(140deg, #dfe6f7, #c5d6f9); }

/* Interne */
.ill-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ill-col { display: flex; flex-direction: column; gap: 1.6cqw; padding: 2cqw; border-radius: 2cqw; background: #e8ecf5; }
.ill-col > .ill-bar { margin-bottom: .6cqw; }
.ill-task { display: flex; flex-direction: column; gap: 1.2cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 1cqw 2cqw -1cqw rgba(10, 30, 90, .25); }
.ill-task .ill-bar { margin: 0; height: 1.3cqw; }
.ill-tag { width: 6cqw; height: 1.6cqw; border-radius: 1cqw; }
.ill-tag--blue { background: rgba(0, 91, 245, .8); }
.ill-tag--orange { background: #ff8a3d; }
.ill-tag--rose { background: #f0508c; }
.ill-tag--green { background: #2fbf71; }
.ill-card--flow { right: 0; top: 20%; width: 17%; align-items: center; gap: 0; padding: 2.4cqw 0; }
.ill-node { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 2.4cqw; background: rgba(197, 214, 249, .12); border: 1px solid rgba(197, 214, 249, .22); }
.ill-node svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: var(--sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill-node--ai { background: linear-gradient(140deg, var(--blue), #3d7bff); border-color: transparent; box-shadow: 0 1.6cqw 3.2cqw -1cqw rgba(0, 91, 245, .7); }
.ill-node--ai svg { stroke: #fff; fill: rgba(255, 255, 255, .25); }
.ill-link { display: block; width: 0; height: 4.4cqw; border-left: 2px dashed rgba(197, 214, 249, .4); }
.ill-card--toast { left: 2%; bottom: 4%; width: 46%; flex-direction: row; align-items: center; gap: 2.4cqw; }
.ill-card--toast > div { flex: 1; }
.ill-check { flex: none; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: rgba(47, 191, 113, .18); }
.ill-check svg, .ill-mark svg { width: 60%; height: 60%; fill: none; stroke: #2fbf71; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Accompagnement */
.ill-audit { flex: 1; min-height: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 4cqw; align-items: center; }
.ill-gauge { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; }
.ill-gauge svg { width: 100%; max-width: 24cqw; transform: rotate(-90deg); }
.ill-gauge circle { fill: none; stroke-width: 8; }
.ill-gauge-track { stroke: #e3e7f2; }
.ill-gauge-val { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 46; }
.ill-list { display: flex; flex-direction: column; gap: 2.2cqw; }
.ill-item { display: flex; align-items: center; gap: 2cqw; }
.ill-item .ill-bar { margin: 0; }
.ill-mark { flex: none; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; }
.ill-mark--ok { background: rgba(47, 191, 113, .16); }
.ill-mark--warn { background: rgba(255, 138, 61, .16); }
.ill-mark--warn svg { stroke: #ff8a3d; }
.ill-card--shield { right: 0; top: 10%; width: 30%; }
.ill-shield { width: 9cqw; height: 9cqw; fill: rgba(61, 123, 255, .18); stroke: var(--blue-bright); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-card--calendar { left: 2%; bottom: 3%; width: 40%; }
.ill-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; }
.ill-cal i { aspect-ratio: 1; border-radius: .8cqw; background: rgba(197, 214, 249, .12); }
.ill-cal i.on { background: var(--blue-bright); box-shadow: 0 0 2cqw rgba(61, 123, 255, .6); }

/* Cartes flottantes : un mouvement lent, presque imperceptible */
.ill-float { animation: rise 1s var(--ease) .3s both, ill-float 9s ease-in-out 1.3s infinite; }
.ill-float--2 { animation: rise 1s var(--ease) .45s both, ill-float 11s ease-in-out 1.8s infinite reverse; }
@keyframes ill-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@media (prefers-reduced-motion: reduce) { .ill > *, .ill-float, .ill-float--2 { animation: none; } }

/* ---------- Appel final sans image (cta-grid--solo) ----------
   La lueur à 72 % remplace l'ombre de l'image : sans image, elle restait seule. On garde la lueur d'angle ;
   le masque des bords (--fondu-bords) n'est pas touché. */
.panel.cta[data-mode="dark"]:not(.hero):not(.demo):has(.cta-grid--solo)::before {
  background: radial-gradient(40% 50% at 85% 10%, rgba(0, 79, 247, .14), transparent 70%);
}

/* ---------- Pour aller plus loin : colonne de gauche à deux blocs (expertises, puis « Et ensuite ») ---------- */
.related-col { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }

/* Échec d’envoi d’un formulaire (js/site.js, envoyerFormulaire) */
.form-erreur { margin-top: 12px; color: #b3261e; font-size: .95rem; font-weight: 500; }