/* SOLIS – Bloc 9 « Pourquoi SOLIS » — version 4 (28/10/2026, 14h12).
   v3 (le titre = le chiffre géant + trois lignes à icônes colorées) : Christel l'a trouvée « encore fort
   template IA » — le combo gros chiffre / petites cartes à icônes rondes / pastilles corail, c'est le réflexe
   par défaut de toute page SaaS, ça ne vient pas du métier de SOLIS. Et Kenai flottait sans rien sous les pattes.
   v4 : on revient à l'idée du cahier de caisse (qui plaisait à Christel au départ), mais réduite à UN seul
   objet simple et immédiatement reconnaissable : un ticket de caisse, posé un peu de travers, avec ses trois
   lignes, son double-trait comptable et son total. Kenai a enfin un bord où poser les pattes.
   Historique : v1 → bloc9-pourquoi.avant-cahier.css/.js · v2 « cahier deux pages » → bloc9-pourquoi.v2-cahier.css/.js. */

#pourquoi-solis.b9{--b9-p:#16393e;--b9-t:#1d2226;--b9-g:#5d6d70;--b9-g2:#7b878a;--b9-papier:#fffdf9;
  --b9-c:#ff6860;--b9-ct:#c8433a;--b9-v:#2fa866;
  position:relative;z-index:1;isolation:isolate;margin:0;padding:clamp(64px,6vw,100px) 6% clamp(76px,6vw,108px);
  font-family:var(--f-texte,Arial,Helvetica,sans-serif);color:var(--b9-t)}
#pourquoi-solis.b9 *,#pourquoi-solis.b9 *::before,#pourquoi-solis.b9 *::after{box-sizing:border-box}
#pourquoi-solis.b9 :where(p,ul,ol){margin:0}
#pourquoi-solis .b9-wrap{position:relative;max-width:1040px;margin:0 auto;text-align:center}

#pourquoi-solis.b9 h2{margin:0;max-width:16em;margin-inline:auto;color:var(--b9-p) !important;
  font-size:clamp(30px,3.1vw,42px);line-height:1.2;letter-spacing:-.02em;font-weight:750}
#pourquoi-solis .b9-lead{max-width:520px;margin:16px auto 0 !important;font-size:clamp(17px,1.3vw,19px);
  line-height:1.55;color:var(--c-texte,#4b5c5f)}

/* Le ticket : un seul objet, posé un peu de travers, qu'on comprend sans rien lire */
#pourquoi-solis .b9-receipt-wrap{position:relative;max-width:440px;margin:0 auto;
  text-align:left;transform:rotate(-1.3deg);
  filter:drop-shadow(0 30px 40px -22px #1d222673) drop-shadow(0 6px 10px -6px #1d222659)}
#pourquoi-solis .b9-receipt{position:relative;background:var(--b9-papier);padding:28px 30px 40px;
  clip-path:polygon(0% 0%,100% 0%,100% 100%,95.455% 92%,90.909% 100%,86.364% 92%,81.818% 100%,77.273% 92%,72.727% 100%,68.182% 92%,63.636% 100%,59.091% 92%,54.545% 100%,50.000% 92%,45.455% 100%,40.909% 92%,36.364% 100%,31.818% 92%,27.273% 100%,22.727% 92%,18.182% 100%,13.636% 92%,9.091% 100%,4.545% 92%,0% 100%,0% 94%)}

/* Kenai, les pattes posées sur le haut du ticket */
#pourquoi-solis .b9-kenai{position:absolute;z-index:2;top:-118px;left:0;width:132px;height:auto;pointer-events:none;
  transform:rotate(-3deg);filter:drop-shadow(0 10px 10px #4a2a2026)}

#pourquoi-solis .b9-r-head{font:700 14px/1 "Courier New",ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;
  color:var(--b9-p);padding-bottom:14px;border-bottom:1px dashed #16393e33}
#pourquoi-solis .b9-r-head span{font-weight:500;color:var(--b9-g2)}

#pourquoi-solis .b9-r-lines{list-style:none;padding:0;margin:4px 0 0}
#pourquoi-solis .b9-r-line{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:3px 12px;align-items:start;
  padding:15px 0;border-top:1px dashed #16393e26}
#pourquoi-solis .b9-r-line:first-child{border-top:0}
#pourquoi-solis .b9-r-ic{width:20px;height:20px;margin-top:2px;color:var(--b9-p);opacity:.7}
#pourquoi-solis .b9-r-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#pourquoi-solis .b9-r-txt{display:block;font-size:14.5px;line-height:1.45;color:var(--b9-g)}
#pourquoi-solis .b9-r-txt b{display:block;margin-bottom:3px;font-size:16px;font-weight:700;color:var(--b9-p)}
#pourquoi-solis .b9-r-tag{grid-column:3;align-self:start;justify-self:end;margin-top:1px;padding:5px 10px;
  border:1.3px solid var(--b9-ct);border-radius:5px;transform:rotate(-3deg);white-space:nowrap;
  font:700 12px/1 var(--f-texte,Arial,sans-serif);letter-spacing:.01em;color:var(--b9-ct)}

#pourquoi-solis .b9-r-rule{height:0;margin:20px 0 0;border-top:3px double #16393e4d}
#pourquoi-solis .b9-r-totals{list-style:none;padding:0;margin:16px 0 0}
#pourquoi-solis .b9-r-totals li{display:flex;align-items:baseline;justify-content:space-between}
#pourquoi-solis .b9-r-totals li+li{margin-top:7px !important}
#pourquoi-solis .b9-r-totals span{font:700 13px/1 "Courier New",ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--b9-p)}
#pourquoi-solis .b9-num{font:800 clamp(46px,5vw,58px)/1 var(--f-titre,Arial,sans-serif);letter-spacing:-.03em;color:var(--b9-v)}
#pourquoi-solis .b9-r-sub b{font:800 20px/1 var(--f-titre,Arial,sans-serif);letter-spacing:-.02em;color:var(--b9-g)}
#pourquoi-solis .b9-r-foot{margin-top:12px !important;font-size:12px;font-style:italic;color:var(--b9-g2);text-align:center}

/* L'animation, une seule fois : les lignes s'impriment, puis le total s'inscrit */
#pourquoi-solis.b9-anim .b9-r-line{opacity:0;transform:translateY(6px);
  transition:opacity .4s ease calc(var(--i) * .3s + .1s),transform .4s ease calc(var(--i) * .3s + .1s)}
#pourquoi-solis.b9-anim.is-in .b9-r-line{opacity:1;transform:none}
#pourquoi-solis.b9-anim .b9-num{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
#pourquoi-solis.b9-anim .b9-num.is-bump{transform:scale(1.1)}

#pourquoi-solis .b9-proof{display:grid;gap:clamp(28px,5vw,40px);align-items:center;
  margin:clamp(48px,5vw,64px) auto 0;max-width:900px}
#pourquoi-solis .b9-promise{max-width:440px;margin:0 auto;text-align:center}
#pourquoi-solis .b9-promise-kicker{margin:0 !important;font:800 13px/1 var(--f-texte,Arial,sans-serif);
  letter-spacing:.09em;text-transform:uppercase;color:var(--b9-c)}
#pourquoi-solis .b9-promise-text{margin:10px 0 0 !important;font-size:clamp(19px,1.7vw,23px);line-height:1.48;
  color:var(--b9-p);font-weight:650;letter-spacing:-.01em}
@media(min-width:860px){
  #pourquoi-solis .b9-proof{grid-template-columns:minmax(0,440px) 1fr;gap:clamp(40px,6vw,76px);text-align:left}
  #pourquoi-solis .b9-promise{max-width:360px;margin:0;text-align:left}
}

/* Le bandeau : la phrase clé, celle qui doit rester en tête */
#pourquoi-solis .b9-band{display:flex;gap:14px;align-items:flex-start;text-align:left;max-width:640px;
  margin:clamp(40px,4vw,54px) auto 0;padding:22px 30px;border-radius:18px;background:var(--b9-p);color:#eef3f3;
  font:600 clamp(18px,1.42vw,20px)/1.45 var(--f-texte,Arial,sans-serif)}
#pourquoi-solis .b9-band svg{flex:none;width:26px;height:26px;margin-top:1px;fill:none;stroke:#7fe0ad;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

#pourquoi-solis .b9-last{max-width:640px;margin:26px auto 0 !important;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--b9-p)}
#pourquoi-solis .b9-last a{display:inline-block;margin:4px 0 0;color:var(--b9-p);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--b9-c);text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
#pourquoi-solis .b9-last a:focus-visible{outline:3px solid var(--b9-c);outline-offset:3px;border-radius:4px}

@media(max-width:700px){
  #pourquoi-solis.b9{padding:56px 20px 72px}
  #pourquoi-solis .b9-kenai{width:104px;top:-92px;left:-4px}
  #pourquoi-solis .b9-r-line{grid-template-columns:20px minmax(0,1fr);gap:3px 10px}
  #pourquoi-solis .b9-r-tag{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}
}