/* SOLIS · styles de l'accueil, partie 2 sur 2 · regroupés le 20/10/2026 pour un affichage plus rapide sur téléphone.
   Chaque section porte le nom de l'ancien fichier, dans le même ordre qu'avant.
   Pour modifier un bloc : chercher son nom ici (ex. « bloc5-v2.css ») et modifier directement dans ce fichier. */

/* ===== motion-polish.css ===== */
/* Motion only. Resting geometry, assets, colors and copy remain unchanged. */
.header {
  transition: background-color 280ms ease, backdrop-filter 280ms ease;
}
.primary-cta, .offer-cta, .header-cta {
  transition: translate 220ms ease-out;
}
#suivi-solis .presence-card {
  transition: translate 220ms ease-out, box-shadow 220ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .primary-cta:not([aria-disabled="true"]):not(:disabled):hover,
  .offer-cta:not([aria-disabled="true"]):not(:disabled):hover,
  .header-cta:not([aria-disabled="true"]):not(:disabled):hover { translate: 0 -2px; }
  #suivi-solis .presence-card:hover {
    translate: 0 -4px;
    box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) #1518201b;
  }
}
/* Overlay coordinates follow the passive 1448 x 820 image. */
.business-motion-accent {
  position:absolute;
  z-index:7;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  contain:paint;
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(254,250,247,.34),rgba(255,122,118,.28) 38%,transparent 100%);
}
.business-motion-accent[data-business-accent="price"] {
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(254,250,247,.20),rgba(255,122,118,.32) 40%,transparent 100%);
}
.business-motion-accent[data-business-accent="cta"] {
  border-radius:999px;
  background:radial-gradient(ellipse at 50% 50%,rgba(254,250,247,.25),transparent 72%);
}
.presence-conversion .conversion-radar[data-business-radar] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  z-index:6;
  border-radius:0;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  overflow:hidden;
  /* Clip the child's blur before the protected Kenai region begins. */
  clip-path:inset(0 0 40.24390244% 0);
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}
.conversion-radar[data-business-radar] > .conversion-radar-rings,
.conversion-radar[data-business-radar] > img { display:none; }
.conversion-radar[data-business-radar] > .conversion-radar-sweep {
  position:absolute;
  inset:auto;
  border-radius:50%;
  transform-origin:50% 50%;
  opacity:0;
  background:conic-gradient(from -90deg,transparent 0deg 295deg,rgba(255,122,118,.24) 335deg,rgba(254,250,247,.34) 350deg,transparent 360deg);
  filter:blur(1.5px);
  mask-image:radial-gradient(circle,transparent 28%,#000 42% 62%,transparent 71%);
}
@media (prefers-reduced-motion: reduce) {
  .business-motion-accent,
  .conversion-radar[data-business-radar] { visibility:hidden!important; }
}
/* Do not clear the existing transform: headings and images use it for layout. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .header, .primary-cta, .offer-cta, .header-cta,
  #suivi-solis .presence-card { transition: none; }
  .primary-cta:hover, .offer-cta:hover, .header-cta:hover,
  #suivi-solis .presence-card:hover { translate: none; }
}
/* Global SOLIS Signal. This layer never participates in layout. */
main{position:relative}
.solis-signal-layer{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:12}
.solis-signal{opacity:0;transition:opacity .18s linear;will-change:transform}
.solis-signal.is-visible{opacity:1}
.solis-signal-core{r:6.5px;fill:#fffaf2;stroke:#ff685c;stroke-width:2.4;filter:drop-shadow(0 0 7px #ff4f45)}
.solis-signal-halo{r:21px;fill:#ff685c3d;stroke:#ff9a87;stroke-width:1.25;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 11px #ff5e52)}
.solis-motion-target{transform-origin:center;transform-box:border-box}
.solis-motion-ready .solis-motion-target.is-waiting{opacity:.28}
.solis-motion-ready .radar-rings circle.is-waiting{opacity:.08;transform:scale(.5);transform-origin:908px 511px}
.solis-motion-ready .radar-dot.is-waiting{opacity:.08}
.solis-motion-ready .care-event.is-waiting{opacity:.34}
.solis-motion-ready #suivi-solis.is-sequencing .care-event{opacity:.38}
.solis-motion-ready #suivi-solis.is-sequencing .care-event.is-dominant{opacity:1}
@media(prefers-reduced-motion:reduce){
 .solis-signal-layer{display:none!important}
 .solis-motion-target{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* ===== hero-presence.css ===== */
/* Hero only: full-bleed photography with real HTML/SVG presence cards. */
.hero-approved-thread { display: none; }
#accueil .marker-wide-icon { display: none; }
#accueil { position: relative; isolation: isolate; height: auto; min-height: 0; padding: 122px 0 470px; background: #1c211f; color: #fffaf2; }
#accueil .hero-scene { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; background: url('assets/hero-boutique-kenai.png') center 70% / cover no-repeat; mask-image: none; }
#accueil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(18,23,24,.58) 0%,rgba(18,23,24,.46) 36%,rgba(18,23,24,.16) 66%,rgba(18,23,24,.10) 100%),linear-gradient(90deg,rgba(18,23,24,.34),transparent 78%); }
#accueil .hero-scene::before, #accueil .hero-scene::after { display: none; }
#accueil .hero-copy { position: relative; inset: auto; width: 88%; max-width: none; margin: 0 auto; z-index: 2; color: #fffaf2; }
#accueil .eyebrow { color: #fff1d8; font-size: 9px; letter-spacing: .12em; margin: 0 0 22px; }
#accueil h1 { color: #fffaf2; font: 750 clamp(24px,6.9vw,42px)/1.15 Arial,Helvetica,sans-serif; letter-spacing: -.05em; transform: none; margin: 0 0 21px; text-shadow: 0 2px 24px #1017196b; }
#accueil h1 span { display: block; white-space: nowrap; }
#accueil .hero-description { color: #fffaf2; font-size: 16px; line-height: 1.5; letter-spacing: -.015em; width: 100%; max-width: 440px; margin: 0 0 24px; text-shadow: 0 1px 14px #10171999; }
#accueil .primary-cta { width: 100%; max-width: 390px; min-height: 54px; padding: 14px 20px; font-size: 15px; justify-content: space-between; white-space: normal; box-shadow: 0 5px 22px #10171935; }
#accueil .primary-cta svg { width: 22px; height: 22px; }
#accueil .microcopy { color: #fff4e6; font-size: 13px; margin: 12px 0 0; padding: 0; }
#accueil .microcopy::before { display: none; }
#accueil .hero-curve { z-index: 4; }
#accueil .hero-presence { position: absolute; right: 5%; bottom: 155px; width: 84%; height: 265px; z-index: 2; pointer-events: none; }
#accueil .hero-presence-thread { position: absolute; inset: 0; width: 100%; height: 100%; color: #ff8073; stroke: currentColor; stroke-width: 1.35; fill: none; opacity: .9; filter: drop-shadow(0 0 4px #ff807355); }
#accueil .hero-mobile-thread, #accueil .marker-detail { display: none; }
#accueil .marker-caption strong { font-weight: inherit; }
#accueil .marker-mobile-title { display: none; }
#accueil .hero-mobile-break { display: none; }
#accueil .hero-marker { position: absolute; display: block; overflow: hidden; width: 142px; padding: 5px; border: 1px solid #fff4e68a; border-radius: 13px; color: #fffaf2; background: #202322c9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 9px 25px #10171945; }
#accueil .hero-marker-location { left: 0; top: 0; }
#accueil .hero-marker-photo { right: 0; top: 65px; }
#accueil .hero-marker-review { left: 4%; top: 140px; }
#accueil .hero-marker-progress { right: 0; top: 205px; }
#accueil .marker-map, #accueil .marker-photo, #accueil .marker-review, #accueil .marker-chart { height: 54px; overflow: hidden; border-radius: 8px; background: #f3eee5; }
#accueil .marker-map svg { display: block; width: 100%; height: 100%; background: #dedbd1; }
#accueil .marker-map svg path { fill: none; stroke: #c0beb5; stroke-width: 5; }
#accueil .marker-map svg .marker-road { stroke: #fff9ed; stroke-width: 8; }
#accueil .marker-map svg circle { fill: #ff806f; stroke: #fff9ed; stroke-width: 3; }
#accueil .marker-map svg .marker-pin { fill: #fff9ed; stroke: none; }
#accueil .marker-photo { background: url('assets/hero-boutique-kenai.png') 70% 46% / 230% auto no-repeat; }
#accueil .marker-review { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #f4eee5; }
#accueil .marker-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid #fff; background: url('assets/hero-boutique-kenai.png') 81% 40% / 440% auto no-repeat; }
#accueil .marker-stars { color: #d88739; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
#accueil .marker-review-line { position: absolute; width: 52px; height: 4px; margin: 27px 0 0 43px; border-radius: 4px; background: #d8d3c9; }
#accueil .marker-chart { display: flex; align-items: center; padding: 5px 8px; background: #242726; }
#accueil .marker-chart svg { width: 100%; height: 100%; overflow: visible; }
#accueil .marker-chart .chart-grid { fill: none; stroke: #ffffff26; stroke-width: 1; }
#accueil .marker-chart .chart-line { fill: none; stroke: #ff8073; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#accueil .marker-chart circle { fill: #fff5e9; stroke: #ff8073; stroke-width: 2; }
#accueil .marker-caption { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 5px 1px; font-size: 11px; letter-spacing: .015em; }
#accueil .marker-caption svg { width: 16px; height: 17px; flex: none; color: #ff8c80; stroke: currentColor; fill: none; stroke-width: 1.6; }
@media(max-width:760px) {
  #accueil { height: 693px; min-height: 693px; padding: 0; background: #342815; }
  #accueil .hero-scene { background-image: url('assets/hero-mobile-boutique-kenai.png'); background-position: center; background-size: 100% 100%; }
  #accueil::before { display: none; }
  #accueil .hero-copy { position: absolute; top: 102px; left: 5.2%; width: 53%; margin: 0; }
  #accueil .eyebrow { width: 270px; margin-bottom: 13px; font-size: 8px; letter-spacing: .14em; white-space: nowrap; color: #fffaf2; }
  #accueil h1 { width: 210px; margin-bottom: 11px; font-size: 29px; line-height: 1.04; letter-spacing: -.045em; text-shadow: 0 2px 12px #40220d80; }
  #accueil h1 span { white-space: normal; }
  #accueil .hero-mobile-break { display: block; }
  #accueil .hero-description { margin-bottom: 12px; font-size: 12.5px; line-height: 1.34; text-shadow: 0 2px 10px #40220d80; }
  #accueil .primary-cta { min-height: 47px; padding: 10px; font-size: 12px; }
  #accueil .microcopy { margin-top: 9px; font-size: 12px; }
  #accueil .hero-presence { top: 210px; right: 0; bottom: auto; width: 160px; height: 346px; }
  #accueil .hero-presence-thread { z-index: 2; stroke-width: 1.35; opacity: .95; }
  #accueil .hero-presence-thread > path:first-child { display: none; }
  #accueil .hero-mobile-thread { display: block; }
  #accueil .hero-mobile-node { fill: #ff766d; stroke: #fff4df; stroke-width: 2; filter: drop-shadow(0 0 5px #ff766d); }
  #accueil .hero-marker { z-index: 1; left: 0; right: auto; display: block; width: 140px; padding: 9px 10px; overflow: visible; border: 1px solid #ffcfaa75; border-radius: 16px; background: rgba(37, 20, 14, .62); box-shadow: 0 7px 18px #32160745; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  #accueil .hero-marker-location { top: 0; left: 25px; width: 132px; }
  #accueil .hero-marker-photo { top: 88px; left: 30px; width: 130px; }
  #accueil .hero-marker-review { top: 180px; left: 34px; width: 126px; }
  #accueil .hero-marker-progress { top: 270px; left: 40px; width: 120px; }
  #accueil .marker-map, #accueil .marker-photo, #accueil .marker-review, #accueil .marker-chart { display: none; }
  #accueil .marker-caption { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 7px; min-height: 0; padding: 0; color: #fffaf2; font-size: inherit; }
  #accueil .marker-caption svg { grid-row: 1 / span 2; align-self: center; width: 29px; height: 31px; color: #ff766d; stroke-width: 1.65; filter: drop-shadow(0 1px 2px #3e210d88); }
  #accueil .marker-caption strong { display: block; align-self: end; font-size: 14px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 1px 8px #3e210d88; }
  #accueil .marker-desktop-title { display: none; }
  #accueil .marker-mobile-title { display: inline; }
  #accueil .marker-detail { display: block; align-self: start; margin-top: 4px; font-size: 11px; line-height: 1.17; color: #fffaf2; text-shadow: 0 1px 8px #3e210d88; }
  #accueil .hero-curve { display: none; }
  .header { height: 72px; padding: 14px 5.2%; gap: 0; }
  .header .brand { position: relative; width: 102px; height: 44px; mix-blend-mode: normal; }
  .header .brand img { display: none; }
  .header .brand::before { content: ""; display: block; width: 102px; height: 44px; background: url('assets/SOLIS_Principal_Transparent_IvoireCorail-web.png') left center / 102px auto no-repeat; }
  .header-cta { min-height: 42px; margin-left: auto; padding: 10px 12px; font-size: 11px; box-shadow: 0 6px 16px #3e210d44; }
  .header .header-cta { color: #fffaf2; }
  .header-menu { display: none; }
}
@media(min-width:761px) {
  #accueil { min-height: 710px; padding: 165px 0 150px; }
  #accueil::before { background: linear-gradient(90deg,rgba(18,23,24,.82) 0%,rgba(18,23,24,.64) 43%,rgba(18,23,24,.18) 76%,rgba(18,23,24,.22) 100%),linear-gradient(180deg,rgba(18,23,24,.48),transparent 32%,transparent 78%,rgba(18,23,24,.16)); }
  #accueil .hero-copy { width: 56%; margin-left: 5.2%; }
  #accueil h1 { font-size: clamp(30px,3.5vw,58px); line-height: 1.12; }
  #accueil .eyebrow { font-size: 10px; }
  #accueil .hero-description { width: 80%; max-width: 520px; font-size: clamp(17px,1.45vw,22px); }
  #accueil .primary-cta { font-size: 17px; min-height: 58px; }
  #accueil .microcopy { font-size: 14px; }
  #accueil .hero-scene { background-position: center 70%; }
  #accueil .hero-presence { right: 5%; bottom: 135px; width: 34%; max-width: 430px; height: 340px; }
  #accueil .hero-marker { width: 158px; }
  #accueil .marker-map, #accueil .marker-photo, #accueil .marker-review, #accueil .marker-chart { height: 59px; }
  #accueil .marker-caption { font-size: 12px; }
}
@media(min-width:1100px) {
  #accueil { min-height: 790px; padding-top: 205px; }
  #accueil::before { background: linear-gradient(90deg,rgba(18,23,24,.83) 0%,rgba(18,23,24,.71) 42%,rgba(18,23,24,.22) 69%,rgba(18,23,24,.16) 100%),linear-gradient(180deg,rgba(18,23,24,.48),transparent 30%,transparent 80%,rgba(18,23,24,.19)); }
  #accueil .hero-presence { right: 8%; bottom: 150px; width: 31%; max-width: 460px; height: 390px; }
  #accueil .hero-marker { width: 174px; }
  #accueil .marker-map, #accueil .marker-photo, #accueil .marker-review, #accueil .marker-chart { height: 64px; }
}

/* Approved tablet and desktop photographs; the mobile artwork stays intact. */
@media (min-width:761px) {
  #accueil { height: auto; min-height: 0; aspect-ratio: 1448 / 1086; padding: 0; }
  #accueil::before, #accueil .hero-curve { display: none; }
  #accueil .hero-scene { background: url('assets/hero-tablet-approved.png') center / 100% 100% no-repeat; }
  #accueil .hero-copy { position: absolute; left: 5.2%; top: 20%; margin: 0; width: 57%; }
  #accueil .eyebrow { margin-bottom: 20px; font-size: 10px; color: #fffaf2; text-shadow: 0 1px 5px #41220d; }
  #accueil h1 { font-size: clamp(32px,4.5vw,49px); line-height: 1.12; letter-spacing: -.035em; text-shadow: 0 2px 9px #41220d99; }
  #accueil h1 span { white-space: normal; }
  #accueil .hero-description { width: 90%; font-size: 17px; line-height: 1.45; text-shadow: 0 1px 5px #301608; }
  #accueil .primary-cta { max-width: 365px; font-size: 16px; min-height: 55px; background: #ff5f54; }
  #accueil .microcopy { font-size: 14px; text-shadow: 0 1px 5px #301608; }
  #accueil .hero-presence { top: 17%; bottom: auto; right: 3%; width: 360px; max-width: none; height: 900px; transform: scale(.49); transform-origin: top right; }
  #accueil .hero-presence-thread { display: none; }
  #accueil .hero-approved-thread { display: block; position: absolute; inset: 0; width: 360px; height: 900px; overflow: visible; z-index: 2; }
  #accueil .thread-glow { stroke: #ff674b; stroke-width: 9; filter: url(#hero-thread-glow); }
  #accueil .thread-core { stroke: #ff9380; stroke-width: 3; }
  #accueil .thread-nodes { fill: #fffaf0; stroke: #ff9571; stroke-width: 2; filter: drop-shadow(0 0 5px #ff592d); }
  #accueil .hero-marker { z-index: 1; display: flex; align-items: center; padding: 20px; overflow: visible; border: 1px solid #f8b274aa; border-radius: 32px; background: linear-gradient(125deg,#753d227a,#29190ccd); box-shadow: inset 0 1px 9px #efb27b30,0 8px 20px #32160735; backdrop-filter: blur(7px); }
  #accueil .hero-marker-location { left: 40px; top: 70px; width: 225px; height: 136px; }
  #accueil .hero-marker-photo { left: 61px; right: auto; top: 290px; width: 270px; height: 143px; }
  #accueil .hero-marker-review { left: 76px; top: 520px; width: 249px; height: 143px; }
  #accueil .hero-marker-progress { left: 105px; right: auto; top: 730px; width: 238px; height: 138px; }
  #accueil .marker-map, #accueil .marker-photo, #accueil .marker-review, #accueil .marker-chart { display: none; }
  #accueil .marker-caption { display: grid; grid-template-columns: 54px 1fr; column-gap: 15px; row-gap: 8px; padding: 0; color: #fffaf2; }
  #accueil .marker-caption svg { grid-row: 1 / span 2; align-self: start; width: 49px; height: 57px; color: #ff7564; stroke-width: 1.8; }
  #accueil .marker-caption .marker-wide-icon { display: block; }
  #accueil .marker-caption .marker-wide-icon + svg { display: none; }
  #accueil .marker-caption strong { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
  #accueil .marker-desktop-title { display: none; }
  #accueil .marker-mobile-title { display: inline; }
  #accueil .marker-detail { display: block; margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
  body:has(#accueil) .header:not(.is-docked) nav, body:has(#accueil) .header:not(.is-docked) .header-menu, body:has(#accueil) .header:not(.is-docked) .brand span { display: none; }
  body:has(#accueil) .header:not(.is-docked) { height: 100px; padding: 22px 5.2%; }
  body:has(#accueil) .header:not(.is-docked) .brand { mix-blend-mode: normal; }
  body:has(#accueil) .header:not(.is-docked) .brand img { content: url('assets/SOLIS_Principal_Transparent_IvoireCorail-web.png'); width: 120px; mix-blend-mode: normal; }
  body:has(#accueil) .header:not(.is-docked) .header-cta { margin-left: auto; color: #fffaf2; background: #ff5f54; font-size: 15px; min-height: 50px; }
}
@media (min-width:1100px) {
  #accueil { aspect-ratio: 1672 / 941; }
  #accueil .hero-scene { background-image: url('assets/hero-desktop-approved.png'); }
  #accueil .hero-copy { top: 22%; width: 57%; }
  #accueil .eyebrow { font-size: 12px; margin-bottom: 26px; }
  #accueil h1 { font-size: clamp(43px,4.3vw,72px); line-height: 1.14; }
  #accueil .hero-description { max-width: 610px; font-size: 22px; }
  #accueil .hero-presence { top: 16%; right: 5%; transform: scale(.65); }
}

/* Texte vivant sur la photo : voile chaud pour la lisibilité. */
#accueil::before { display: block !important; }
@media (max-width: 760px) {
  #accueil::before { background: linear-gradient(180deg, rgba(24,13,6,.62) 0%, rgba(24,13,6,.55) 58%, rgba(24,13,6,0) 78%); }
}
@media (min-width: 761px) {
  #accueil::before { background: linear-gradient(90deg, rgba(24,13,6,.78) 0%, rgba(24,13,6,.6) 36%, rgba(24,13,6,.12) 62%, rgba(24,13,6,0) 75%); }
}
#accueil h1 em { font-style: normal; color: #ff7a6e; }
@media (max-width: 760px) {
  #accueil { overflow: hidden; }
  #accueil .hero-presence { right: 8px; }
}

/* ===== block-two-google.css ===== */
/* Bloc 2: coordinates measured on the supplied 1536 x 1024 reference.
   Only the small photographic thumbnails use the source image; all text,
   panels, map geometry, connectors and nodes remain separate DOM/SVG layers. */
.google-presence {position:relative;z-index:2;container-type:inline-size;margin-top:-10.416667%;color:var(--white);background:transparent;isolation:isolate}
.b2-surface {position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.b2-layout {position:relative;height:66.666667cqw;font-family:Arial,Helvetica,sans-serif;font-weight:400}
.b2-copy {position:absolute;left:4.166667%;top:20.117188%;width:34.7%;color:#d9dddd}
.b2-copy p,.b2-copy h2{padding:0;margin:0}
.b2-copy .b2-eyebrow{font-size:.7487cqw;letter-spacing:.24cqw;line-height:1.2;margin-bottom:2.05cqw;white-space:nowrap}
.b2-copy h2{font-size:3.2552cqw;line-height:.995;font-weight:700;letter-spacing:-.1cqw;margin:0 0 1.5cqw;color:#f5f6f5}
.b2-copy h2 em{color:var(--coral)}
.b2-copy .b2-benefits{font-size:1.4323cqw;line-height:1.34;letter-spacing:-.016cqw;margin:0 0 1.93cqw}
.b2-rule{width:3.45cqw;height:.26cqw;background:var(--coral);margin:0 0 1.58cqw .26cqw}
.b2-copy .b2-reflex{font-size:1.4974cqw;line-height:1.2;color:var(--coral);font-weight:600;margin:0 0 .9cqw .26cqw;letter-spacing:-.027cqw}
.b2-copy .b2-description{font-size:1.041667cqw;line-height:1.48;margin:0 0 1.43cqw .26cqw}
.b2-copy .b2-statement{font-size:1.171875cqw;line-height:1.22;font-weight:700;color:#f6f5f4;margin:0 0 .9cqw .26cqw}
.b2-copy .b2-support{font-size:1.041667cqw;line-height:1.46;margin:0 0 1.38cqw .26cqw}
.b2-copy .b2-signature{font-size:1.4323cqw;line-height:1.25;font-weight:600;color:var(--coral);letter-spacing:-.03cqw;margin-left:.26cqw;white-space:nowrap}
.b2-google{position:absolute;left:39.518229%;top:21.386719%;width:24.21875%;height:64.160156%;padding:1.26cqw 1.17cqw .78cqw;border:1px solid #c2c9c38c;border-radius:2.2cqw;background:linear-gradient(140deg,#2a3233aa,#0e191bcc 38%,#1d292bce);box-shadow:inset 0 0 .65cqw #d2dad738,0 .4cqw 1.7cqw #0007}
.b2-google-logo{font-size:2.278646cqw;letter-spacing:-.13cqw;font-weight:600;line-height:1.2;margin:0 0 .78cqw .39cqw;color:#f6f7f7}
.b2-search{height:2.86cqw;display:flex;align-items:center;gap:.65cqw;padding:0 .8cqw;border-radius:2cqw;border:1px solid #79838255;background:#29363b99;font-size:.911458cqw;color:#fff}
.b2-search>svg{width:1.43cqw;height:1.43cqw}.b2-search .b2-mic{margin-left:auto;width:1.1cqw;height:1.5cqw}
.b2-tabs{display:flex;justify-content:space-between;align-items:center;height:3.45cqw;padding:0 .52cqw;font-size:.846354cqw;color:#b4b9b8}
.b2-tabs b{position:relative;font-weight:400;color:white}.b2-tabs b::after{content:'';position:absolute;height:2px;background:#79c8ff;left:0;right:0;bottom:-.6cqw}
.b2-map{position:relative;width:100%;height:6.51cqw;overflow:hidden;border-radius:.78cqw;background:#344246}
.b2-map-art{width:100%;height:100%;stroke-width:1;display:block}
.b2-distance{position:absolute;left:57%;top:44%;background:#0a1315e6;box-shadow:0 .25cqw .6cqw #0008;padding:.4cqw .65cqw;border-radius:.52cqw;font-size:.97656cqw;color:white;white-space:nowrap}
.b2-business{margin-top:.13cqw;background:#0b1418a8;border:1px solid #65727070;border-radius:.85cqw;padding:.52cqw;box-shadow:0 .26cqw .6cqw #0006}
.b2-business-top{display:flex;align-items:center;gap:.72cqw}.b2-photo{display:block;flex:none;stroke:none;overflow:hidden;border-radius:.52cqw}.b2-business-top>.b2-photo{width:6.51cqw;height:5.08cqw}
.b2-business-top strong{display:block;font-size:1.04cqw;line-height:1.2;font-weight:600;white-space:nowrap;color:#fff}.b2-business p{margin:.35cqw 0 0;font-size:.911458cqw;white-space:nowrap;line-height:1.2}.b2-stars{color:#ffb626;white-space:nowrap;font-size:1.13cqw;letter-spacing:-.07cqw}.b2-stars i{font-style:normal;color:#697475}.b2-review-count{margin-left:.4cqw}.b2-open{color:#50e9b6}
.b2-actions{display:flex;gap:.52cqw;margin-top:.65cqw}.b2-actions>span{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.43cqw;min-width:0;height:4.49cqw;border-radius:.85cqw;background:linear-gradient(145deg,#293b42,#17262c);box-shadow:inset 0 0 .4cqw #85949018,0 .25cqw .5cqw #0003;color:#429afa}.b2-actions svg{width:1.6cqw;height:1.6cqw;stroke-width:2.5}.b2-actions small{font-size:.78cqw;color:#fff}
.b2-result{display:flex;align-items:center;gap:1.1cqw;padding:.85cqw .26cqw .45cqw;border-bottom:1px solid #84918a38;color:#929d9e}.b2-result:last-child{border-bottom:0}.b2-result>.b2-photo{width:6.12cqw;height:5.08cqw}.b2-result p{font-size:.911458cqw;line-height:1.2;margin:0 0 .46cqw}.b2-result p:last-child{margin:0}
.b2-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}.b2-wire-glow{stroke:var(--coral);stroke-width:4;filter:blur(4px);fill:none}.b2-wires{stroke:#ffb0a1;stroke-width:1.5;fill:none;filter:drop-shadow(0 0 3px #ff514d)}.b2-nodes{fill:#fff6ed;stroke:#ff8b7e;stroke-width:1;filter:drop-shadow(0 0 5px #ff574f)}
.b2-modules{position:absolute;left:68.359375%;top:24.023438%;width:29.296875%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2.28cqw}
.b2-module{display:grid;grid-template-columns:3.45cqw 1fr 9.38cqw;gap:1.04cqw;align-items:start;padding:1.43cqw .78cqw 1.04cqw 1.04cqw;min-height:10.546875cqw;border:1px solid #65727366;border-radius:1.56cqw;background:linear-gradient(130deg,#23303433,#101d1f55);box-shadow:inset 0 0 .7cqw #c9ded005}
.b2-module:nth-child(2){min-height:10.026cqw}.b2-module:nth-child(3){min-height:9.57cqw}
.b2-module-icon{display:grid;place-items:center;width:3.45cqw;height:3.45cqw;border:1px solid #ed6e618e;border-radius:.85cqw;color:var(--coral);background:radial-gradient(ellipse at 50% 10%,#ef685126,#141e23 73%);box-shadow:inset 0 0 .65cqw #fa755536,0 .2cqw .5cqw #0005}.b2-module-icon svg{width:2.08cqw;height:2.08cqw;stroke-width:2.6}
.b2-module-copy h3{font-size:1.041667cqw;line-height:1.2;letter-spacing:-.026cqw;margin:.2cqw 0 .85cqw;font-weight:600;color:white;white-space:nowrap}.b2-module-copy p{font-size:.846354cqw;line-height:1.6;color:#d6ddda;margin:0}
.b2-module-map{height:8.14cqw;overflow:hidden;border-radius:.72cqw;margin-top:-.26cqw}.b2-module-map .b2-map-art{width:200%;max-width:none;margin-left:-45%}
.b2-module-preview{padding-top:.26cqw}.b2-module-preview>.b2-photo{width:9.12cqw;height:4.1cqw}.b2-module-preview>.b2-stars{display:block;margin:.25cqw 0;font-size:1.3cqw;letter-spacing:0}.b2-module-preview small{display:block;font-size:.65cqw;font-style:italic;white-space:nowrap;color:#d0d7d6}
.b2-module-actions{display:flex;align-items:center;justify-content:space-around;background:#21303477;border-radius:.65cqw;height:5.6cqw;margin-top:.2cqw;padding:.3cqw}.b2-module-actions>span{display:grid;place-items:center;background:#293b44;border-radius:50%;width:2.1cqw;height:2.6cqw;color:#4b9cf9}.b2-module-actions svg{width:1.5cqw;height:1.5cqw;stroke-width:2.3}.b2-module-actions small{display:none}
.b2-handwritten{position:absolute;top:81.8%;right:2.7%;margin:0;font-family:'Segoe Print','Bradley Hand',cursive;font-weight:300;font-size:1.6cqw;line-height:1.15;transform:rotate(-8deg);color:#c9cdca}.b2-handwritten svg{display:block;width:12cqw;height:2.8cqw;stroke:var(--coral);stroke-width:1.2;margin-top:.5cqw}
@media(max-width:1099px){
 .google-presence{margin-top:-8%;background:transparent}
 .b2-layout{height:auto;min-height:1200px;padding:140px 5% 70px;display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:start}
 .b2-surface{height:100%}.b2-surface path{d:path('M0 25Q650 130 1536 0V1024H0Z')}
 .b2-copy,.b2-google,.b2-modules,.b2-handwritten{position:relative;left:auto;top:auto;right:auto;width:auto}
 .b2-copy .b2-eyebrow{font-size:9px;letter-spacing:2px;line-height:1.6;white-space:normal;margin-bottom:24px}
 .b2-copy h2{font-size:34px;line-height:1.04;letter-spacing:-1px;margin-bottom:20px}.b2-copy h2 br{display:none}
 .b2-copy .b2-benefits{font-size:17px;line-height:1.4;margin-bottom:25px}.b2-wide-break{display:none}
 .b2-rule{width:45px;height:3px;margin:0 0 22px}.b2-copy .b2-reflex{font-size:20px;margin:0 0 17px}.b2-copy .b2-description,.b2-copy .b2-support{font-size:15px;line-height:1.5;margin:0 0 19px}.b2-copy .b2-statement{font-size:16px;line-height:1.4;margin:0 0 15px}.b2-copy .b2-signature{font-size:18px;white-space:normal;margin:24px 0 0}
 .b2-google{container-type:inline-size;height:auto;padding:20px 14px 14px;border-radius:26px;margin-top:40px}
 .b2-google-logo{font-size:10cqw;margin:0 0 5cqw}.b2-search{height:14cqw;font-size:4.2cqw;padding:0 4cqw;gap:3cqw;border-radius:8cqw}.b2-search>svg{width:6cqw;height:6cqw}.b2-search .b2-mic{width:5cqw;height:6cqw}.b2-tabs{font-size:3.7cqw;height:15cqw;padding:0 2cqw}.b2-tabs b::after{bottom:-3cqw}
 .b2-map{height:32cqw;border-radius:3cqw}.b2-distance{font-size:4cqw;padding:2cqw;border-radius:2cqw}.b2-business{padding:2.5cqw;border-radius:3cqw}.b2-business-top{gap:3cqw}.b2-business-top>.b2-photo{width:29cqw;height:23cqw}.b2-business-top strong{font-size:4.2cqw;white-space:normal}.b2-business p{font-size:3.9cqw;margin:2cqw 0 0}.b2-google .b2-stars{font-size:4.6cqw}.b2-actions{gap:2cqw;margin-top:3cqw}.b2-actions>span{height:20cqw;border-radius:3cqw;gap:3cqw}.b2-actions svg{width:7cqw;height:7cqw}.b2-actions small{font-size:3.1cqw}.b2-result{padding:4cqw 0 2cqw;gap:4cqw}.b2-result>.b2-photo{width:29cqw;height:24cqw}.b2-result p{font-size:4cqw;margin-bottom:2cqw}
 .b2-modules{grid-column:1/-1;gap:20px}.b2-module{grid-template-columns:53px 1fr 145px;gap:20px;padding:22px;min-height:150px!important;border-radius:22px}.b2-module-icon{width:53px;height:53px;border-radius:12px}.b2-module-icon svg{width:32px;height:32px}.b2-module-copy h3{font-size:19px;white-space:normal;margin:2px 0 12px}.b2-module-copy p{font-size:15px;line-height:1.5}.b2-module-map{height:115px;border-radius:10px}.b2-module-preview>.b2-photo{width:145px;height:66px}.b2-module-preview>.b2-stars{font-size:20px}.b2-module-preview small{font-size:10px}.b2-module-actions{height:80px;padding:5px;border-radius:10px}.b2-module-actions>span{width:31px;height:36px}.b2-module-actions svg{width:24px;height:24px}
 .b2-connections{display:none}.b2-handwritten{grid-column:1/-1;justify-self:end;font-size:24px;margin-top:8px}.b2-handwritten svg{width:180px;height:30px}
}
@media(max-width:600px){
 .b2-layout{display:flex;flex-direction:column;padding:100px 22px 55px;gap:32px;min-height:0}.b2-copy h2{font-size:36px}.b2-copy .b2-eyebrow{font-size:9px;letter-spacing:1.6px}.b2-copy .b2-signature{font-size:18px}.b2-google{width:100%;max-width:390px;margin:0 auto}.b2-module{grid-template-columns:42px 1fr;gap:14px;padding:18px;min-height:0!important}.b2-module-icon{width:42px;height:45px}.b2-module-icon svg{width:27px;height:27px}.b2-module-copy h3{font-size:17px;margin-bottom:10px}.b2-module-copy p{font-size:14px}.b2-module-map,.b2-module-preview,.b2-module-actions{grid-column:2;max-width:180px;width:100%;margin-top:0}.b2-module-map{height:95px}.b2-module-preview>.b2-photo{width:100%;height:auto;aspect-ratio:137/62}.b2-handwritten{align-self:flex-end;font-size:23px;margin:10px 5px 0}.b2-photo{border-radius:6px}
}
.b2-distance{display:flex;align-items:center;gap:.3em}.b2-distance svg{width:1em;height:1.2em;stroke:currentColor;stroke-width:1.8;fill:none}
.b2-handwritten{font-family:"Segoe Script","Bradley Hand",cursive;font-weight:400}.b2-google-logo{font-weight:500}

/* ===== block-three-craft.css ===== */
/* Bloc 3 — layout measured on the 1536 × 1024 user reference.
   Text, review, phone UI, curves and coral thread are independently addressable.
   Photographic windows use the supplied source, without regenerated imagery. */
.craft-story{position:relative;container-type:inline-size;isolation:isolate;background:#0e1b1e;color:var(--ink);overflow:hidden}
.craft-board{position:relative;height:66.666667cqw}
.craft-surface{position:absolute;inset:0;width:100%;height:100%;fill:#f7f3eb;stroke:none;z-index:-1}
.craft-signature{position:absolute;top:3.2%;right:5.2%;margin:0;font-size:1.171875cqw;line-height:1.4;color:#f5f4f0;letter-spacing:-.025cqw}.craft-signature em{color:var(--coral);font-weight:600}
.craft-copy{position:absolute;left:5.078125%;top:27.34375%;width:41%;z-index:2}
.craft-copy h2{margin:0 0 2.4cqw;font-size:5.078125cqw;line-height:1.01;letter-spacing:-.21cqw;font-weight:700;color:#030d13}
.craft-copy h2 em{color:#ff6051}.craft-copy p{margin:0;font-size:1.88802cqw;line-height:1.36;letter-spacing:-.035cqw}.craft-rule{display:block;width:4.17cqw;height:.26cqw;background:var(--coral);margin-top:2.65cqw}
.craft-artisan{position:absolute;left:49.153646%;top:17.285156%;width:36.979167%;height:58.398438%;border-radius:.91cqw;overflow:hidden;background:#30291f;box-shadow:0 1.1cqw 3.7cqw #4e301940;z-index:1}
.craft-artisan>svg{display:block;width:100%;height:100%;stroke:none}
.craft-thread{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.craft-thread-path{fill:none;stroke:#ff6251;stroke-width:1.25;stroke-linecap:round}.craft-node-glow{fill:#ff5036;stroke:none}.craft-nodes{fill:#fff4eb;stroke:#ffa38a;stroke-width:1;filter:drop-shadow(0 0 4px #ff6044)}
.craft-review{position:absolute;left:41.40625%;top:42.1875%;width:22.265625%;height:20.703125%;z-index:4;margin:0;padding:1.69cqw 1.95cqw;border-radius:1.04cqw;background:linear-gradient(115deg,#565751ed,#35302ce8 65%,#8a7560f0);border:1px solid #eee6d07d;box-shadow:inset 0 0 1.6cqw #b2aa9866,0 1.1cqw 3cqw #58301930;color:#faf7f2}
.craft-review-top{display:flex;align-items:center;gap:.85cqw;white-space:nowrap;position:relative}.craft-avatar{display:grid;place-items:center;flex:none;width:2.86cqw;height:2.86cqw;border-radius:50%;background:#dedbd3;color:#061116;font-size:1.5cqw}.craft-stars{font-size:1.3cqw;letter-spacing:.04cqw;color:#ffb41d}.craft-date{position:absolute;right:0;top:.72cqw;font-size:.84635cqw}.craft-stars{margin-top:1.04cqw}.craft-review blockquote{margin:1.04cqw 0 0;font-size:1.041667cqw;line-height:1.52;letter-spacing:-.01cqw}
.craft-phone{position:absolute;left:76.171875%;top:25.683594%;width:19.01%;height:55.86%;z-index:3;padding:.58cqw;border-radius:2.67cqw;transform:rotate(3.7deg);background:#10100e;border:.19cqw solid #777671;box-shadow:inset 0 0 0 .15cqw #c6c0b0,0 1.15cqw 2.7cqw #442c233b}
.craft-phone-screen{position:relative;height:100%;border-radius:2.1cqw;background:#f6f2e9;overflow:hidden;color:#141714;font-family:Georgia,'Times New Roman',serif}
.craft-phone-notch{position:absolute;top:0;left:25%;width:50%;height:1.32cqw;background:#111;border-radius:0 0 .85cqw .85cqw;z-index:5}
.craft-phone-notch::after{content:'';position:absolute;right:15%;top:.2cqw;width:.38cqw;height:.38cqw;border-radius:50%;background:#13202a}
.craft-phone-nav{height:5.47cqw;display:flex;align-items:center;justify-content:space-between;padding:1.7cqw 1cqw .7cqw;font-size:.84635cqw;line-height:1.16}.craft-phone-nav>svg{width:1.3cqw;height:1.3cqw;stroke-width:2.3}.craft-phone-nav>span{width:53%}
.craft-phone-hero{position:relative;height:12.6cqw;padding:2.05cqw .95cqw .7cqw;isolation:isolate;background:#2d251c;color:#fff8e8;overflow:hidden}
.craft-phone-image{position:absolute;inset:0;z-index:-2}.craft-phone-image>svg{width:100%;height:100%;stroke:none;filter:brightness(.55)}
.craft-phone-hero::after{content:'';position:absolute;inset:0;background:#130e0b45;z-index:-1}
.craft-phone-hero h3{margin:0 0 .9cqw;font-size:1.76cqw;font-weight:400;line-height:1.02;letter-spacing:-.035cqw}
.craft-phone-button{display:flex;align-items:center;justify-content:space-between;width:11cqw;border-radius:.5cqw;background:#e5c5a4;padding:.65cqw .85cqw;font-family:Arial,sans-serif;font-size:.72cqw;white-space:nowrap;color:#211b15}.craft-phone-button svg{width:.95cqw;height:.95cqw}
.craft-phone-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.39cqw;padding:.72cqw .72cqw 0}.craft-phone-gallery>svg{display:block;width:100%;height:8.1cqw;border-radius:.45cqw;stroke:none;overflow:hidden}.craft-phone-caption{margin:1.5cqw .78cqw .4cqw;font-size:1.041667cqw;line-height:1.1}.craft-phone-bottom>svg{height:5.6cqw}
.craft-next{position:absolute;left:5.15%;bottom:5.25%;margin:0;font-size:.84635cqw;letter-spacing:.19cqw;color:#f6f4ec;font-weight:400}
@media(max-width:700px){
 .craft-board{height:245cqw}.craft-surface{fill:#f7f3eb}.craft-surface path{d:path('M0 20Q700 85 1536 24V960Q850 920 0 950Z')}
 .craft-signature{top:3%;left:6%;right:6%;text-align:right;font-size:3.2cqw;white-space:nowrap}
 .craft-copy{left:6%;top:11%;width:88%}.craft-copy h2{font-size:10.3cqw;line-height:1.07;letter-spacing:-.4cqw;margin-bottom:6cqw}.craft-copy p{font-size:4.5cqw;line-height:1.45;letter-spacing:-.03cqw}.craft-rule{width:12cqw;height:.8cqw;margin-top:6cqw}
 .craft-artisan{left:20%;top:42%;width:66%;height:36%;border-radius:2cqw}
 .craft-review{left:5%;top:58%;width:51%;height:18%;border-radius:2.6cqw;padding:4cqw 4cqw}.craft-avatar{width:7cqw;height:7cqw;font-size:4cqw}.craft-review-top{gap:2cqw}.craft-stars{font-size:3.2cqw;margin-top:2cqw}.craft-date{font-size:2cqw;top:1.4cqw}.craft-review blockquote{font-size:2.85cqw;line-height:1.5;margin-top:3cqw}
 .craft-phone{left:58%;top:48%;width:37%;height:35%;padding:1.3cqw;border-radius:5.7cqw;border-width:.4cqw}.craft-phone-screen{border-radius:4.4cqw}.craft-phone-notch{height:2.6cqw;border-radius:0 0 1.7cqw 1.7cqw}.craft-phone-nav{height:11cqw;padding:3.2cqw 2cqw 1cqw;font-size:1.65cqw}.craft-phone-nav>svg{width:2.6cqw;height:2.6cqw}.craft-phone-hero{height:24cqw;padding:4cqw 1.8cqw 1.4cqw}.craft-phone-hero h3{font-size:3.25cqw;line-height:1.08;margin-bottom:2cqw}.craft-phone-button{width:23cqw;font-size:1.4cqw;padding:1.5cqw 1.6cqw;border-radius:1cqw}.craft-phone-button svg{width:2cqw;height:2cqw}.craft-phone-gallery{gap:.8cqw;padding:1.4cqw 1.4cqw 0}.craft-phone-gallery>svg{height:17cqw;border-radius:1cqw}.craft-phone-caption{margin:2.5cqw 1.6cqw 1cqw;font-size:2.1cqw}.craft-phone-bottom>svg{height:12cqw}
 .craft-thread{top:42%;height:43%;width:110%;left:-5%}.craft-thread-path{stroke-width:1.6}.craft-next{left:6%;bottom:4%;font-size:2.6cqw;letter-spacing:.35cqw}
}
.craft-review{background:radial-gradient(ellipse at 80% 70%,#71604c,transparent 70%),linear-gradient(115deg,#555652,#383430 65%,#817263)}.craft-thread{z-index:5}
.craft-photo-thread{fill:none;stroke:var(--coral);stroke-width:1.25;opacity:0}
.craft-thread-mobile{display:none}@media(max-width:700px){.craft-artisan{height:28.4%}.craft-phone{height:30%}.craft-review{top:61%;width:59%;height:auto;padding:4cqw}.craft-review blockquote{font-size:3.1cqw}.craft-thread{display:none}.craft-thread-mobile{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;stroke:var(--coral);stroke-width:1;fill:none}.craft-thread-mobile circle{fill:#fff8ee;stroke:#ffab96;filter:drop-shadow(0 0 5px #ff6246)}}
@media(max-width:700px){.craft-review{top:54%}}

/* ===== block-four-radar.css ===== */
/* Reference layout: 1536 × 1024. Animation targets remain independent SVG/DOM nodes. */
.local-radar{container-type:inline-size;position:relative;isolation:isolate;color:var(--white);background:#0e1b1e;overflow:hidden}
/* Continue Block 3's charcoal surface; conceal only the backdrop's ivory header. */
.local-radar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/block-four-backdrop.webp') center/100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,transparent 11%,#000 30%)}
.radar-board{height:66.666667cqw;position:relative}
.radar-copy{position:absolute;left:5.47%;top:15.33%;z-index:3}
.radar-copy p,.radar-copy h2{margin:0}.radar-eyebrow{font-size:.716146cqw;letter-spacing:.195cqw;line-height:1.4;margin-bottom:2.6cqw!important}
.radar-copy h2{font-size:4.947917cqw;line-height:.995;letter-spacing:-.16cqw;font-weight:700;margin:0 0 2.34cqw;color:#faf7f2}.radar-copy h2 em{color:#ff6145}
.radar-copy .radar-intro,.radar-copy .radar-conclusion{font-size:1.627604cqw;line-height:1.43;letter-spacing:-.025cqw;font-weight:400}
.radar-rule{display:block;width:4.3cqw;height:.26cqw;background:#ff694c;margin:2.6cqw 0 2.6cqw}
.radar-scene,.radar-vectors,.radar-thread{position:absolute;inset:0;width:100%;height:100%}.radar-scene{z-index:1}.radar-vectors{stroke:none;overflow:visible}.radar-rings{fill:url(#radar-ring-fill);stroke:#f87452;stroke-width:1;opacity:.68}.radar-rings circle:nth-child(2){stroke-width:1.2}.radar-sweep{transform-origin:908px 511px}.radar-dot-halo{fill:#a8ada7;fill-opacity:.1;stroke:#c6cbc3;stroke-opacity:.12}.radar-dot-core{fill:#afb3af;stroke:#d4d6ce;stroke-width:.65}.radar-dot-strong .radar-dot-halo{fill:#ff7554;stroke:#ff9c7c}.radar-dot-strong .radar-dot-core{fill:#ff7453;stroke:#ff9d7e}.radar-dot-competitor .radar-dot-core{fill:#7d898e;stroke:#a6b1b3}.radar-dot-soft .radar-dot-core{fill:#c47b69}.radar-dot-muted:nth-child(2){opacity:.5}
.radar-place{position:absolute;font-size:.9765625cqw;padding:.52cqw .7cqw;color:#929f9f;background:#11202466;border-radius:.5cqw;white-space:nowrap}.radar-place-north{left:49.1%;top:18.3%}.radar-place-centre{left:42.1%;top:43.8%}.radar-place-arenes{left:42.4%;top:62.8%}.radar-place-saint{left:73%;top:71.7%}
.radar-establishment{position:absolute;left:57.8%;top:46.78%;display:flex;align-items:flex-start}.radar-main-pin{position:relative;z-index:2;display:block;width:2.74cqw;height:3.91cqw;filter:drop-shadow(0 .45cqw .7cqw #0009)}.radar-main-pin>svg,.radar-legend-pin>svg{width:100%;height:100%;stroke:none;fill:#ff7955}.radar-main-pin circle,.radar-legend-pin circle{fill:#263137}.radar-establishment-label{margin:.7cqw 0 0 -.5cqw;padding:.48cqw .85cqw .48cqw 1.2cqw;background:#202728e8;border:1px solid #7d847c55;box-shadow:0 .3cqw .75cqw #0007;border-radius:.65cqw;font-size:.846354cqw;line-height:1.2;white-space:nowrap}
.radar-thread{z-index:2;pointer-events:none;fill:none;stroke:#ff6b50;stroke-width:1.8;filter:drop-shadow(0 0 7px #ff513c)}.radar-thread circle{fill:#fff4e7;stroke:#ff7b5f;stroke-width:1.5;filter:drop-shadow(0 0 5px #ff6845)}
.radar-report{position:absolute;z-index:4;left:68.36%;top:14.55%;width:28.26%;height:17.87%;border:1px solid #79858170;border-radius:1.69cqw;background:linear-gradient(120deg,#2b3635dd,#162225d9);box-shadow:inset 0 0 .65cqw #e6ebe71c,0 1cqw 2cqw #0003;padding:1.7cqw 1.82cqw;backdrop-filter:blur(6px)}
.radar-report h3{font-size:1.237cqw;line-height:1.2;font-weight:500;margin:0 0 1.1cqw}.radar-report ul{list-style:none;padding:0;margin:0;display:grid;gap:1.15cqw}.radar-report li{display:flex;gap:.91cqw;align-items:center;font-size:.911458cqw;line-height:1.15;white-space:nowrap}.radar-key{flex:none;display:inline-block;width:.98cqw;height:.98cqw;border-radius:50%;background:#aab0ae;box-shadow:inset 0 1px 1px #ffffff26}.radar-key-strong{background:#ff7453}.radar-key-competitor{background:#7b888e}.radar-key-muted{background:#acafad}.radar-report-arrow{position:absolute;right:1.5cqw;bottom:2.2cqw;display:grid;place-items:center;width:2.86cqw;height:2.86cqw;border-radius:50%;background:#61717642}.radar-report-arrow svg{width:1.56cqw;height:1.56cqw}
.radar-legend{position:absolute;z-index:3;left:34.83%;top:71.29%;width:14.06%;height:15.92%;list-style:none;margin:0;padding:1.1cqw 1.7cqw;display:grid;gap:.65cqw;border:1px solid #77858466;border-radius:1.56cqw;background:linear-gradient(130deg,#233333dd,#101b1cdd);box-shadow:inset 0 0 .5cqw #dee6dc18,0 .5cqw 1.5cqw #0003}.radar-legend li{display:flex;align-items:center;gap:.98cqw;font-size:.846354cqw;white-space:nowrap;line-height:1.3}.radar-legend-pin{width:1.18cqw;height:1.69cqw;display:block;flex:none;margin-left:-.08cqw}.radar-footer{position:absolute;right:6.25%;bottom:9.7%;margin:0;font-size:.716146cqw;letter-spacing:.17cqw;line-height:1.4}
@media(min-width:701px) and (max-width:1099px){.radar-report li{font-size:.97cqw}.radar-legend li{font-size:.94cqw}.radar-copy .radar-intro,.radar-copy .radar-conclusion{font-size:1.85cqw}}
@media(max-width:700px){
 .local-radar::before{background-size:auto 100%;background-position:65% center}.radar-board{height:1120px}
 .radar-copy{left:6%;top:9%;right:6%}.radar-eyebrow{font-size:10px;letter-spacing:2.4px;margin-bottom:25px!important}.radar-copy h2{font-size:46px;line-height:1.02;letter-spacing:-1.4px;margin-bottom:23px}.radar-copy .radar-intro,.radar-copy .radar-conclusion{font-size:17px;line-height:1.5;letter-spacing:-.2px}.radar-copy .radar-intro br{display:none}.radar-rule{width:48px;height:3px;margin:23px 0}.radar-copy .radar-conclusion{font-size:17px}
 .radar-scene{top:520px;height:420px;left:-275px;width:820px}.radar-place{font-size:10px;padding:4px 7px}.radar-establishment{left:57.8%;top:46.78%}.radar-main-pin{width:26px;height:37px}.radar-establishment-label{font-size:10px;border-radius:6px;margin:7px 0 0 -5px;padding:5px 9px 5px 12px}
 .radar-thread{display:none}.radar-report{left:6%;top:890px;width:88%;height:148px;padding:20px;border-radius:20px}.radar-report h3{font-size:18px;margin-bottom:15px}.radar-report ul{gap:12px}.radar-report li{font-size:12px;gap:10px}.radar-key{width:12px;height:12px}.radar-report-arrow{width:28px;height:28px;right:13px;bottom:15px}.radar-report-arrow svg{width:18px;height:18px}
 .radar-legend{left:6%;top:762px;width:156px;height:114px;padding:13px 16px;border-radius:14px;gap:6px}.radar-legend li{font-size:10px;gap:10px}.radar-legend .radar-key{width:9px;height:9px}.radar-legend-pin{width:12px;height:18px;margin-left:-1px}.radar-footer{left:6%;right:6%;bottom:38px;font-size:9px;letter-spacing:1.3px;line-height:1.6}
}
@media(max-width:700px){.radar-place-saint{left:65%}.radar-thread{display:block;top:520px;height:420px;left:-275px;width:820px}}

@media(max-width:700px){.radar-thread path{d:path("M936-2C960 33 992 90 987 143C982 195 955 225 929 272C898 326 884 393 903 462")}.radar-thread-top{cx:960;cy:39}}

/* ===== blocks-five-six.css ===== */
/* Approved offer compositions. Styles deliberately scoped to blocks 05 and 06. */
.solis-upgrade,#suivi-solis.solis-care{container-type:inline-size;--u:calc(100cqw / 1536);position:relative;isolation:isolate;font-family:var(--f-texte,Arial,sans-serif)}
.solis-upgrade{height:calc(810 * var(--u));background:radial-gradient(ellipse at 80% 45%,#ffd2c6 0,transparent 43%),#fcf8f3;color:#080f17;z-index:2}
.solis-upgrade p,#suivi-solis.solis-care p,.solis-upgrade h2,#suivi-solis.solis-care h2,.solis-upgrade h3,#suivi-solis.solis-care h3{margin:0}
.solis-upgrade em,#suivi-solis.solis-care em{font-style:normal;color:#ff6860}
.offer-kicker{display:flex;align-items:center;gap:calc(20 * var(--u));font-size:calc(13 * var(--u));letter-spacing:.18em}
.offer-kicker i{width:calc(60 * var(--u));height:1px;background:currentColor;opacity:.65}
.upgrade-copy{position:absolute;top:calc(80 * var(--u));left:7.75%;width:33.5%;z-index:3}
.upgrade-copy h2{font-size:calc(70 * var(--u));line-height:.9;letter-spacing:-.055em;font-weight:750;margin:calc(34 * var(--u)) 0 calc(19 * var(--u))}
.upgrade-lead{font-size:calc(24 * var(--u));line-height:1.25;font-weight:700;letter-spacing:-.035em}
.upgrade-description{font-size:calc(18 * var(--u));line-height:1.43;margin-top:calc(13 * var(--u))!important;letter-spacing:-.025em}
.offer-price{font:calc(78 * var(--u))/1 Georgia,serif;letter-spacing:-.045em;margin:calc(26 * var(--u)) 0 calc(12 * var(--u))!important}
.solis-offer-cta{display:flex;align-items:center;justify-content:space-between;gap:calc(25 * var(--u));width:fit-content;max-width:100%;min-height:44px;padding:calc(17 * var(--u)) calc(40 * var(--u));border:0;border-radius:100px;background:#ff6860;color:white;text-decoration:none;font:calc(24 * var(--u))/1.2 var(--f-texte,Arial,sans-serif);cursor:pointer}
.solis-offer-cta svg{width:calc(32 * var(--u));height:calc(32 * var(--u));fill:none;stroke:currentColor;stroke-width:1.2;flex:none}
.solis-offer-cta:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.offer-reassurance{font-size:calc(14 * var(--u));line-height:1.5;margin-top:calc(13 * var(--u))!important}
.upgrade-card{position:absolute;z-index:3;border-radius:calc(24 * var(--u));padding:calc(16 * var(--u));background:#fff;box-shadow:0 calc(18 * var(--u)) calc(35 * var(--u)) #33271a20;color:#303947}
.upgrade-before{left:44.2%;top:calc(112 * var(--u));width:18.5%;opacity:.78;background:#f8f7f5}
.upgrade-after{left:67.6%;top:calc(92 * var(--u));width:23.6%;box-shadow:0 0 calc(70 * var(--u)) #ff756047}
.upgrade-label{position:absolute;left:50%;top:0;transform:translate(-50%,-60%);padding:calc(10 * var(--u)) calc(25 * var(--u));white-space:nowrap;background:#6b6a68;color:white;border-radius:40px;font-size:calc(21 * var(--u))}
.upgrade-after .upgrade-label{background:#ff6860}
.offer-photo{display:block;width:100%;height:auto;overflow:hidden;border-radius:calc(7 * var(--u))}
.upgrade-card .google-badge{position:absolute;right:calc(-27 * var(--u));top:calc(-29 * var(--u));width:calc(67 * var(--u));border-radius:50%;filter:drop-shadow(0 4px 10px #0001)}
.upgrade-card h3{font-size:calc(22 * var(--u));letter-spacing:-.045em;margin-top:calc(10 * var(--u))}
.listing-rating{font-size:calc(16 * var(--u));margin-top:calc(5 * var(--u))!important}.listing-rating span{color:#ffb000}.listing-rating i{color:#ddd;font-style:normal}
.listing-category{font-size:calc(13 * var(--u));margin-top:calc(5 * var(--u))!important}
.listing-tabs{display:flex;justify-content:space-between;font-size:calc(13 * var(--u));margin-top:calc(16 * var(--u));border-bottom:1px solid #ddd;padding-bottom:calc(8 * var(--u))}.listing-tabs b{position:relative}.listing-tabs b:after{content:'';height:2px;background:#252a31;position:absolute;bottom:calc(-9 * var(--u));left:0;right:0}
.listing-actions{display:flex;justify-content:space-between;padding:calc(12 * var(--u)) 0;font-size:calc(12 * var(--u))}.listing-actions span{display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--u))}.listing-actions svg{width:calc(43 * var(--u));height:calc(43 * var(--u));border:1px solid #d9dce4;border-radius:50%;padding:calc(11 * var(--u));fill:none;stroke:currentColor;stroke-width:2}
.listing-location{position:relative;font-size:calc(12 * var(--u));min-height:calc(85 * var(--u));padding-right:27%}.listing-location p{display:flex;gap:calc(10 * var(--u));align-items:center;margin:calc(10 * var(--u)) 0}.listing-location svg:not(.listing-map){width:calc(19 * var(--u));height:calc(19 * var(--u));fill:none;stroke:currentColor;stroke-width:2;flex:none}.listing-location .listing-map{position:absolute;right:0;top:0;width:26%;height:100%;object-fit:cover}.listing-open em{color:#00a844}.listing-location em{font-style:normal}.listing-gallery{display:flex;gap:calc(5 * var(--u));margin-top:calc(8 * var(--u))}.listing-gallery svg{width:calc((100% - 10 * var(--u))/3)}
.upgrade-arrow{position:absolute;left:62.1%;top:calc(294 * var(--u));width:calc(72 * var(--u));height:calc(72 * var(--u));display:grid;place-items:center;background:linear-gradient(90deg,#ff6860,#132023);color:white;border-radius:50%;z-index:4}.upgrade-arrow svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.5}
.upgrade-curve{position:absolute;bottom:-1px;left:0;width:100%;height:calc(110 * var(--u));fill:#1c252a;z-index:1;pointer-events:none}
.upgrade-kenai{position:absolute;width:calc(250 * var(--u));height:auto;left:50%;bottom:calc(-43 * var(--u));transform:translateX(-50%);z-index:5;pointer-events:none;filter:drop-shadow(0 5px 4px #0002);clip-path:polygon(0 0,100% 0,100% 83%,93% 83%,93% 100%,63% 100%,63% 83%,40% 83%,40% 100%,13% 100%,13% 83%,0 83%)}
.upgrade-thread,.care-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.upgrade-thread path,.care-thread path{fill:none;stroke:#ff7d68;stroke-width:1.4;filter:drop-shadow(0 0 5px #ff6759)}
#suivi-solis.solis-care{height:calc(1024 * var(--u));background:radial-gradient(ellipse at 85% 65%,#25272970,transparent 65%),linear-gradient(135deg,#1c252a,#0c1417 55%,#181b1e);color:#faf9f6;z-index:1;overflow:hidden}
#suivi-solis .care-copy{position:absolute;top:calc(76 * var(--u));left:5.9%;width:39%;z-index:3}#suivi-solis .care-copy h2{font-size:calc(68 * var(--u));line-height:1;letter-spacing:-.035em;margin:calc(62 * var(--u)) 0 calc(30 * var(--u));font-weight:750}.care-lead{font-size:calc(28 * var(--u));line-height:1.2}#suivi-solis .care-copy hr{width:calc(66 * var(--u));margin:calc(35 * var(--u)) 0;border:0;border-top:1px solid #d4d5d2}#suivi-solis .care-copy .offer-price{font-size:calc(98 * var(--u));margin:0 0 calc(12 * var(--u))!important}.offer-price span{font-size:.6em}#suivi-solis .care-copy .solis-offer-cta{font-size:calc(23 * var(--u));padding:calc(18 * var(--u)) calc(34 * var(--u))}#suivi-solis .care-copy .offer-reassurance{font-size:calc(18 * var(--u));color:#ddd}
.care-assurances{display:flex;margin-top:calc(64 * var(--u));gap:calc(20 * var(--u));font-size:calc(14 * var(--u));line-height:1.55}.care-assurances p{display:flex;align-items:center;gap:calc(20 * var(--u));flex:1}.care-assurances p+p{border-left:1px solid #ffffff22;padding-left:calc(20 * var(--u))}.care-assurances svg{width:calc(36 * var(--u));height:calc(36 * var(--u));fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.care-node circle:first-child{fill:#ff71552b;stroke:#ffa08388;stroke-width:1;filter:drop-shadow(0 0 10px #ff5c3a)}.care-node circle:last-child{fill:#fff;filter:drop-shadow(0 0 9px #ff5c3a)}.care-node-main circle:first-child{fill:#ff6654;stroke:white}
.care-event{position:absolute;z-index:3}.care-event h3{font-size:calc(29 * var(--u));line-height:1.2;letter-spacing:-.025em}.care-event p{font-size:calc(21 * var(--u));line-height:1.4;margin-top:calc(7 * var(--u));color:#ddd}.care-event-0{left:57.35%;top:10%}.care-event-1{left:61.6%;top:22.6%}.care-event-2{left:64.25%;top:35.5%}.care-event-3{left:62.7%;top:49%}.care-event-4{left:59.3%;top:61.7%}.care-event-5{left:60.5%;top:76.5%}.care-event-5 h3,.care-event-5 p{font-size:calc(34 * var(--u));font-weight:700}.care-event-5 p{color:#ff7970}
@media(max-width:1000px){.solis-upgrade{height:auto;padding:55px 6% 210px}.upgrade-copy{position:relative;top:auto;left:auto;width:100%;max-width:610px}.offer-kicker{font-size:12px;gap:18px}.offer-kicker i{width:50px}.upgrade-copy h2{font-size:56px;margin:30px 0 20px}.upgrade-lead{font-size:23px}.upgrade-description{font-size:18px;margin-top:14px!important}.offer-price{font-size:76px;margin:24px 0 15px!important}.solis-offer-cta{font-size:20px;padding:16px 28px;gap:22px}.solis-offer-cta svg{width:28px;height:28px}.offer-reassurance{font-size:14px;margin-top:14px!important}.upgrade-comparison{position:relative;height:430px;margin-top:60px;--u:calc(88cqw / 950)}.upgrade-before{left:0;top:20px;width:38%}.upgrade-after{left:51%;top:0;width:48%}.upgrade-arrow{left:40%;top:170px}.upgrade-kenai{width:215px;bottom:-37px}.upgrade-thread{display:none}.solis-upgrade:after{content:'';position:absolute;bottom:0;right:18%;height:170px;border-right:1px solid #ff7d68;z-index:2}.upgrade-curve{height:90px}#suivi-solis.solis-care{height:auto;padding:60px 6% 90px;overflow:hidden}#suivi-solis .care-copy{position:relative;top:auto;left:auto;width:100%}#suivi-solis .care-copy h2{font-size:56px;margin:36px 0 25px}.care-lead{font-size:25px}#suivi-solis .care-copy hr{width:65px;margin:30px 0}#suivi-solis .care-copy .offer-price{font-size:84px;margin-bottom:15px!important}#suivi-solis .care-copy .solis-offer-cta{font-size:19px;padding:18px 25px}#suivi-solis .care-copy .offer-reassurance{font-size:16px}.care-assurances{margin-top:35px;font-size:13px;gap:15px}.care-assurances p{gap:12px}.care-assurances p+p{padding-left:15px}.care-assurances svg{width:30px;height:30px}.care-thread{display:none}#suivi-solis.solis-care:before{content:'';position:absolute;top:0;right:18%;height:35px;border-right:1px solid #ff7d68}.care-events{position:relative;margin:55px 0 0 12px;padding-left:35px;border-left:1px solid #ff7d68}.care-event{position:relative;left:auto;top:auto;margin-bottom:38px}.care-event:before{content:'';position:absolute;left:-42px;top:8px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 5px 5px #ff6c5a55}.care-event h3{font-size:24px}.care-event p{font-size:18px;margin-top:7px}.care-event-5 h3,.care-event-5 p{font-size:28px}.care-event:last-child{margin-bottom:0}}
@media(max-width:560px){.solis-upgrade{padding:42px 23px 175px}.upgrade-copy h2{font-size:43px}.upgrade-lead{font-size:20px}.upgrade-description{font-size:16px}.upgrade-copy .offer-price{font-size:68px}.upgrade-comparison{height:300px;--u:calc(88cqw / 660);margin-top:50px}.upgrade-before{top:15px;width:40%;padding:8px}.upgrade-after{left:48%;width:52%;padding:8px}.upgrade-arrow{left:38%;top:135px;width:35px;height:35px}.upgrade-label{font-size:12px;padding:7px 13px}.upgrade-card h3{font-size:12px}.listing-rating{font-size:10px}.listing-category,.listing-tabs,.listing-actions,.listing-location{font-size:8px}.listing-tabs{margin-top:10px}.listing-actions svg{width:26px;height:26px;padding:7px}.listing-actions{padding:9px 0}.listing-location{min-height:64px}.upgrade-card .google-badge{width:30px;right:-8px;top:-22px}.listing-gallery{gap:3px}.upgrade-kenai{width:175px;bottom:-30px}#suivi-solis.solis-care{padding:55px 23px 65px}#suivi-solis .care-copy h2{font-size:39px;letter-spacing:-.04em}.care-lead{font-size:21px}#suivi-solis .care-copy .offer-price{font-size:72px}#suivi-solis .care-copy .solis-offer-cta{font-size:16px;padding:17px 20px;gap:10px}#suivi-solis .care-copy .offer-reassurance{font-size:14px}.care-assurances{gap:9px;font-size:10px}.care-assurances p{gap:7px;align-items:flex-start;flex-direction:column}.care-assurances p+p{padding-left:9px}.care-assurances svg{width:26px;height:26px}.care-event h3{font-size:21px}.care-event p{font-size:16px}.care-event-5 h3,.care-event-5 p{font-size:24px}}

#suivi-solis.solis-care{aspect-ratio:auto;min-height:0;padding:0}#suivi-solis .care-copy h2{font-family:var(--f-texte,Arial,sans-serif)}#suivi-solis .care-copy h2 em{color:#ff6860}@media(max-width:1000px){#suivi-solis.solis-care{padding:60px 6% 90px}}@media(max-width:560px){#suivi-solis.solis-care{padding:55px 23px 65px}}

#suivi-solis.solis-care{background:linear-gradient(to bottom,#1c252a 0,transparent 18%),radial-gradient(ellipse at 85% 65%,#25272970,transparent 65%),linear-gradient(135deg,#1c252a,#0c1417 55%,#181b1e)}
.upgrade-curve{stroke:none}
@media(max-width:1000px){#suivi-solis.solis-care:before{content:"";background:none;position:absolute;top:0;right:18%;height:35px;border-right:1px solid #ff7d68}}

@media(max-width:1000px){.solis-upgrade:after{right:12px}#suivi-solis.solis-care:before{right:12px;height:100%;opacity:.75}.care-events{margin-left:0;padding-left:0;padding-right:16px;border-left:0}.care-event:before{left:auto;right:calc(-6vw - 11px);top:8px}.upgrade-comparison{margin-bottom:25px}}
@media(max-width:560px){.care-event:before{right:-33px}.upgrade-comparison{margin-bottom:45px}}

/* Lancement : une seule fiche illustrative (plus d’Avant/Après) */
.upgrade-after{left:56%;width:26%}
@media(max-width:1000px){.upgrade-after{left:20%;width:60%}}
@media(max-width:560px){.upgrade-after{left:15%;width:70%}}

/* ===== homepage-faq.css ===== */
.solis-faq{position:relative;isolation:isolate;background:#fcf8f5;color:#090f20;padding:64px 6.25% 80px;border-radius:50% 50% 48% 48% / 3% 3% 4% 4%;margin:0;z-index:2}
.faq-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:24px}
.faq-kicker{display:flex;align-items:center;gap:20px;font:11px/1.4 var(--f-texte,Arial,sans-serif);letter-spacing:.15em;margin:0 0 24px}.faq-kicker span{width:48px;height:1px;background:#a9afb8}
.faq-heading h2{font:700 clamp(36px,4.65vw,67px)/1.02 var(--f-texte,Arial,sans-serif);letter-spacing:-.045em;margin:0}.faq-heading h2 em{font-style:normal;color:#ff6860}
.faq-intro{font:16px/1.5 var(--f-texte,Arial,sans-serif);color:#515e74;margin:0 0 2px;max-width:280px}
.faq-items{position:relative;z-index:6}.faq-item{position:relative;margin:6px 0;border:1px solid #eee7e2;background:#fffaf8e8;border-radius:13px;overflow:hidden;font:16px/1.5 var(--f-texte,Arial,sans-serif)}.faq-item summary{list-style:none;cursor:pointer;min-height:48px;padding:12px 52px 12px 22px;position:relative;overflow-wrap:anywhere}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'';position:absolute;right:24px;top:19px;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}.faq-item[open] summary:after{transform:rotate(225deg);top:23px}.faq-item summary:focus-visible{outline:2px solid #ff6860;outline-offset:-4px;border-radius:12px}.faq-answer{padding:0 22px 20px;color:#414c5e;overflow-wrap:anywhere}.faq-answer p{margin:0;max-width:85ch}
main:has(>.solis-faq){position:relative}.faq-coral-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:hidden}.faq-coral-route path{stroke:#ff685c;stroke-width:1.5;fill:none}.faq-route-halo{fill:#ff685c77;filter:drop-shadow(0 0 7px #ff685c)}.faq-route-point{fill:#fff;stroke:#ff685c;stroke-width:2}
@media(max-width:600px){.solis-faq{padding:45px 22px 55px}.faq-heading{display:block;margin-bottom:22px}.faq-intro{font-size:14px;margin-top:20px}.faq-intro br{display:none}.faq-kicker{font-size:9px;gap:14px}.faq-item{font-size:15px}.faq-item summary{padding:14px 40px 14px 15px}.faq-item summary:after{right:18px;top:22px}.faq-item[open] summary:after{top:26px}.faq-answer{padding:0 15px 19px}}

/* Keep the thread behind readable accordion surfaces. */
.solis-faq{isolation:auto;z-index:auto;background:none}.solis-faq:before{content:"";position:absolute;inset:0;background:#fcf8f5;border-radius:inherit;z-index:2;pointer-events:none}.faq-heading{position:relative;z-index:5}.faq-item{background:#fffaf8f5}

/* Blocks 07 and 09 follow the approved closing composition. */
.solis-diagnostic{position:relative;padding:64px 6.25% 65px;background:radial-gradient(ellipse at 65% 80%,#fff0e9,transparent 65%),#fcf8f5;color:#090f20;border-radius:0 0 50% 50% / 0 0 10% 10%;z-index:2}.diagnostic-copy{width:64%}.diagnostic-copy h2{font:700 clamp(36px,4.65vw,67px)/1.02 var(--f-texte,Arial,sans-serif);letter-spacing:-.045em;margin:0 0 22px}.diagnostic-copy h2 em{font-style:normal;color:#ff6860}.diagnostic-copy>p:not(.faq-kicker){font:clamp(16px,1.65vw,23px)/1.4 var(--f-texte,Arial,sans-serif);margin:0 0 26px}.diagnostic-copy .solis-offer-cta{font-size:clamp(16px,1.8vw,24px);padding:17px 30px;gap:32px}.diagnostic-copy .solis-offer-cta svg{width:26px;height:26px}.diagnostic-copy .diagnostic-micro{font-size:14px!important;color:#515e74;margin:15px 0 0!important}.diagnostic-aside{position:absolute;left:74%;top:34%;font:clamp(14px,1.45vw,20px)/1.5 var(--f-texte,Arial,sans-serif);color:#515e74;margin:0}.solis-faq{border-top-left-radius:0;border-top-right-radius:0}.solis-diagnostic+.solis-faq{margin-top:-1px}
#votre-prochain-pas .conclusion-copy{top:7%;left:6.25%;width:47%}#votre-prochain-pas .conclusion-copy h2{font:700 clamp(24px,3.8vw,56px)/1.02 var(--f-texte,Arial,sans-serif);letter-spacing:-.035em;margin:24px 0 18px}#votre-prochain-pas .conclusion-description{font:clamp(15px,1.55vw,22px)/1.4 var(--f-texte,Arial,sans-serif);margin:0 0 19px}#votre-prochain-pas .solis-offer-cta{font:clamp(15px,1.6vw,23px)/1.2 var(--f-texte,Arial,sans-serif);padding:16px 27px;gap:24px}#votre-prochain-pas .solis-offer-cta svg{width:26px;height:26px}#votre-prochain-pas .conclusion-micro{font:clamp(12px,1.2vw,16px)/1.4 var(--f-texte,Arial,sans-serif);margin:14px 0 0}
@media(max-width:1000px){.diagnostic-break{display:none}.diagnostic-copy{width:66%}.solis-diagnostic{padding:48px 6.25% 55px}.diagnostic-aside{left:75%;right:3%}.diagnostic-aside br{display:none}#votre-prochain-pas .conclusion-copy h2{margin:18px 0 13px}#votre-prochain-pas .conclusion-description br{display:none}}
@media(max-width:560px){.solis-diagnostic{padding:45px 22px 48px}.diagnostic-copy{width:100%}.diagnostic-aside{position:relative;inset:auto;font-size:14px;margin:24px 0 0;width:85%}.diagnostic-copy .solis-offer-cta{padding:15px 20px;gap:12px}.diagnostic-copy .solis-offer-cta svg{width:22px}#votre-prochain-pas .conclusion-copy{position:relative;inset:auto;width:100%}#votre-prochain-pas .conclusion-copy h2{font-size:29px;margin:25px 0 16px}#votre-prochain-pas .conclusion-description{font-size:15px;width:75%}#votre-prochain-pas .solis-offer-cta{font-size:14px;padding:14px 19px;gap:14px}#votre-prochain-pas .conclusion-micro{font-size:12px}#votre-prochain-pas .conclusion-copy h2>br:first-of-type{display:initial}}

.solis-diagnostic{border-radius:0}.solis-diagnostic:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:35px;background:#fcf8f5;clip-path:polygon(0 0,10% 30%,25% 70%,40% 92%,55% 100%,70% 84%,85% 48%,100% 0,100% 100%,0 100%);pointer-events:none}

/* On small screens, the white hero logo is only legible over the photograph.
   The fixed header uses the existing dark official mark once the page scrolls. */
.header.is-docked .brand img{content:url('assets/SOLIS_Principal_Transparent_BleuCorail-web.png');mix-blend-mode:normal}
@media(max-width:760px){.header.is-docked .brand::before{display:none}.header.is-docked .brand img{display:block;width:86px;height:auto}}

.diagnostic-micro .diagnostic-example{color:inherit;text-decoration:underline;text-decoration-color:#ff5752;text-underline-offset:3px;margin-left:6px;white-space:nowrap}

/* ===== pourquoi-solis.css ===== */
/* Section « Pourquoi SOLIS » v3 : comparaison gestor / SOLIS. */
.solis-why{position:relative;z-index:2;padding:clamp(64px,7vw,100px) 6%;background:#fcf8f3;color:#080f17;font-family:var(--f-texte,Arial,Helvetica,sans-serif)}
.why-inner{max-width:1080px;margin:0 auto}
.why-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.why-head h2{margin:0;font:700 clamp(30px,3.2vw,44px)/1.08 var(--f-texte,Arial,sans-serif);letter-spacing:-.03em}
.why-head p{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:#3a4550}
.why-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:14px;overflow:hidden;border:1px solid #080f171a}
.why-col{padding:clamp(24px,3vw,36px)}
.why-col-gestor{background:#f3ede5;color:#3a4550}
.why-col-solis{background:#16262a;color:#fff}
.why-col-t{margin:0 0 18px;font-size:14px;font-weight:700;color:#6b7480}
.why-col-solis .why-col-t{color:#ff8f88}
.why-col ul{list-style:none;margin:0;padding:0}
.why-col li{padding:12px 0;border-top:1px solid #080f1714;font-size:clamp(16px,1.3vw,19px);line-height:1.35}
.why-col-solis li{border-color:#ffffff1a;font-weight:700}
.why-col-f{margin:16px 0 0;font-size:14px;color:#6b7480}
.why-col-solis .why-col-f{color:#c9d0d3}
.why-person{display:flex;gap:18px;align-items:center;margin:clamp(28px,3vw,40px) 0 0}
.why-person img{flex:0 0 72px;width:72px;height:72px;border-radius:10px;object-fit:cover;object-position:55% 40%}
.why-person p{margin:0;max-width:720px;font-size:15.5px;line-height:1.55;color:#3a4550}
.why-person strong{color:#080f17}
.why-last{margin:28px 0 0;padding-top:24px;border-top:1px solid #080f171f;font-size:16px;line-height:1.6;color:#080f17}
.why-last a{margin-left:6px;color:#080f17;font-weight:700;text-decoration:underline;text-decoration-color:#ff6860;text-underline-offset:4px;white-space:nowrap}
.why-last a:focus-visible{outline:3px solid #ff6860;outline-offset:3px;border-radius:4px}
.offer-compare{margin:6px 0 0;font-size:13px;color:#515e74}
@media (max-width:820px){
  .solis-why{padding:56px 22px}
  .why-head{grid-template-columns:1fr;gap:14px}
  .why-compare{grid-template-columns:1fr}
  .why-person{align-items:flex-start}
  .why-person img{flex-basis:56px;width:56px;height:56px}
  .why-last a{display:inline-block;margin:8px 0 0}
}

/* Ligne des IA dans le hero */
#accueil .hero-ai{margin:-8px 0 22px;color:#fff4e6;font-size:13px;line-height:1.5;text-shadow:0 1px 10px #10171999}
#accueil .hero-ai strong{font-size:14px;letter-spacing:.02em;color:#fff}
@media (min-width:1200px){#accueil .hero-ai{font-size:15px}#accueil .hero-ai strong{font-size:17px}}
@media (max-width:600px){#accueil .hero-ai{margin:-4px 0 12px;font-size:11.5px}#accueil .hero-ai strong{font-size:12px}}
/* Lien « diagnostic d'abord » sous les boutons d'achat */
.offer-reassurance a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:8px 0}
.offer-price span{margin-left:.18em}

/* ===== ia-etapes.css ===== */
/* Blocs « Êtes-vous recommandé par ChatGPT ? » et « Comment ça marche » (15/10/2026) */
.solis-ai,.solis-steps{position:relative;z-index:2;font-family:var(--f-texte,Arial,Helvetica,sans-serif);box-sizing:border-box}
.solis-ai *,.solis-steps *{box-sizing:border-box}
.solis-ai h2,.solis-steps h2,.solis-ai h3,.solis-steps h3,.solis-ai p,.solis-steps p{margin:0}
.solis-ai em,.solis-steps em{font-style:normal;color:#ff6860}
.ia-kicker{display:flex;align-items:center;gap:18px;margin:0 0 26px!important;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.ia-kicker i{width:50px;height:1px;background:currentColor;opacity:.65}

/* ---------- Bloc IA ---------- */
.solis-ai{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(40px,6vw,96px);align-items:center;
  padding:clamp(80px,9vw,140px) 7.75% clamp(80px,9vw,130px);
  background:radial-gradient(ellipse at 82% 40%,#ffe1d8 0,transparent 46%),#fcf8f3;color:#080f17;overflow:hidden}
.ai-copy h2{font:700 clamp(38px,4.7vw,70px)/.98 var(--f-texte,Arial,sans-serif);letter-spacing:-.05em;margin-bottom:28px}
.ai-lead{font-size:clamp(19px,1.75vw,25px);line-height:1.3;font-weight:700;letter-spacing:-.03em;max-width:560px}
.ai-text{font-size:clamp(16px,1.3vw,19px);line-height:1.55;margin-top:16px!important;max-width:560px;color:#26313b}
.ai-rule{display:block;width:66px;height:1px;background:#ff6860;margin:30px 0}
.ai-punch{font-size:clamp(18px,1.55vw,22px);line-height:1.35;font-weight:700;letter-spacing:-.02em;max-width:520px}
.solis-ai .solis-offer-cta,.solis-steps .solis-offer-cta{margin-top:28px;font-size:clamp(17px,1.4vw,21px);padding:16px 30px;gap:20px}
.solis-ai .solis-offer-cta svg,.solis-steps .solis-offer-cta svg{width:26px;height:26px}
.ai-honest{font-size:14px;line-height:1.5;color:#5a6668;margin-top:16px!important;max-width:480px}

.ai-scene{position:relative;padding:44px 0 0}
.ai-chat{position:relative;background:#fff;border-radius:26px;padding:0 0 26px;
  box-shadow:0 1px 0 #eadfd2,0 40px 80px -30px rgba(60,40,20,.35),0 0 90px #ff756026;overflow:hidden}
.ai-chat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #efe7dd;background:#fbf7f2}
.ai-tab{padding:7px 14px;border-radius:30px;font-size:14px;font-weight:600;color:#7a8486;transition:background .4s,color .4s,box-shadow .4s}
.ai-tab.is-active{background:#fff;color:#142326;box-shadow:0 2px 8px rgba(60,40,20,.12),inset 0 0 0 1px #ff686066}
.ai-tag{position:absolute;right:6px;top:6px;padding:4px 11px;border:1px dashed #c9433b;border-radius:12px;color:#c9433b;font-size:12.5px;background:#fffcf8}
.ai-chat .ai-msg{margin:22px 24px 0;font-size:16px;line-height:1.5}
.ai-chat .ai-msg-user{margin-left:auto;width:fit-content;max-width:80%;padding:13px 19px;border-radius:20px 20px 6px 20px;background:#142326;color:#fff}
.ai-msg-bot{display:flex;gap:13px;align-items:flex-start}
.ai-avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff6860,#ffb199);color:#fff}
.ai-avatar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.ai-answer{flex:1;color:#26313b}
.solis-ai .ai-answer>p{margin-bottom:12px}
.ai-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ai-list li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border:1px solid #efe7dd;border-radius:14px;background:#fffcf8}
.ai-rank{font:400 20px/1 Georgia,serif;color:#9aa3a6}
.ai-list strong{display:block;font-size:15.5px;color:#142326}
.ai-list small{display:block;font-size:13.5px;color:#5a6668}
.ai-stars{font-size:13.5px;color:#142326;white-space:nowrap}.ai-stars b{color:#f5a400;font-weight:400}
.ai-list .ai-you{border:1.5px dashed #ff6860;background:#fff4f1}
.ai-you .ai-rank{color:#ff6860}
.ai-list .ai-you strong{color:#c9433b}
.ai-caret{display:inline-block;width:2px;height:16px;margin-left:3px;vertical-align:-3px;background:#ff6860;animation:ai-blink 1.1s steps(1) infinite}
@keyframes ai-blink{50%{opacity:0}}
.ai-under{position:relative;padding-top:62px}
.solis-ai .ai-note{position:absolute;right:4%;top:10px;transform:rotate(-3deg);white-space:nowrap;
  font:400 clamp(17px,1.45vw,21px)/1.3 "Segoe Print","Bradley Hand","Comic Neue",cursive;color:#c9433b}
.ai-note svg{position:absolute;left:-52px;top:-30px;width:52px;height:46px;fill:none;stroke:#c9433b;stroke-width:1.6;stroke-linecap:round}
.solis-ai .ai-names{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14.5px;color:#5a6668}
.ai-names span{width:100%;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ai-names b{padding:8px 16px;border-radius:30px;background:#fff;border:1px solid #eadfd2;color:#142326;font-size:15px;box-shadow:0 6px 16px -10px rgba(60,40,20,.4)}

/* apparition progressive (uniquement si le script est actif) */
.solis-ai.ai-animate .ai-msg,.solis-ai.ai-animate .ai-list li,.solis-ai.ai-animate .ai-note{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.solis-ai.ai-animate .ai-note{transform:translateY(12px) rotate(-3deg)}
.solis-ai.ai-animate.is-in .ai-msg,.solis-ai.ai-animate.is-in .ai-list li{opacity:1;transform:none}
.solis-ai.ai-animate.is-in .ai-note{opacity:1;transform:rotate(-3deg)}
.solis-ai.is-in .ai-msg-bot{transition-delay:.7s}
.solis-ai.is-in .ai-list li:nth-child(1){transition-delay:1.1s}
.solis-ai.is-in .ai-list li:nth-child(2){transition-delay:1.35s}
.solis-ai.is-in .ai-list li:nth-child(3){transition-delay:1.75s}
.solis-ai.is-in .ai-note{transition-delay:2.4s}

/* ---------- Bloc Comment ça marche ---------- */
.solis-steps{padding:clamp(80px,9vw,140px) 7.75% clamp(80px,9vw,130px);
  background:radial-gradient(ellipse at 15% 0%,#ff6a4f1f,transparent 45%),linear-gradient(135deg,#1c252a,#0c1417 55%,#181b1e);color:#faf9f6;overflow:hidden}
.steps-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(56px,6vw,90px)}
.steps-head h2{font:700 clamp(38px,4.7vw,70px)/.98 var(--f-texte,Arial,sans-serif);letter-spacing:-.05em}
.steps-intro{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:#d6d9da;max-width:380px}
.steps-track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.steps-line{position:absolute;left:0;right:0;top:27px;height:56px;width:100%;overflow:visible;pointer-events:none}
.steps-line path{fill:none;stroke:#ff7d68;stroke-width:1.4;filter:drop-shadow(0 0 5px #ff6759)}
.step{position:relative;padding-top:92px}
.step-node{position:absolute;left:0;top:30px;width:50px;height:50px;border-radius:50%;background:#ff71552b;border:1px solid #ffa08388;box-shadow:0 0 18px #ff5c3a99}
.step-node:after{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff;box-shadow:0 0 9px #ff5c3a}
.step:last-child .step-node{background:#ff6654;border-color:#fff}
.step-num{position:absolute;left:68px;top:28px;font:400 46px/1 Georgia,serif;color:#ffffff30;letter-spacing:-.04em}
.step h3{font-size:clamp(23px,2vw,30px);line-height:1.15;letter-spacing:-.03em;margin-bottom:12px}
.step p{font-size:clamp(16px,1.25vw,18.5px);line-height:1.55;color:#d6d9da;max-width:360px}
.step-meta{display:inline-block;margin-top:18px;padding:7px 15px;border:1px solid #ffffff2e;border-radius:40px;font-size:13.5px;letter-spacing:.02em;color:#fff}
.step:last-child .step-meta{border-color:#ff6860;color:#ff8a80}
.steps-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(56px,6vw,84px);padding-top:34px;border-top:1px solid #ffffff1c}
.steps-care{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#d6d9da;max-width:560px}
.steps-care a{color:#fff;text-decoration:none;border-bottom:1px solid #ff6860}
.steps-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.solis-steps .solis-offer-cta{margin-top:0}
.steps-example{font-size:14.5px;color:#d6d9da;text-decoration:none;border-bottom:1px solid #ff686099;margin-left:6px}
.solis-ai a:focus-visible,.solis-steps a:focus-visible{outline:3px solid #ff6860;outline-offset:4px;border-radius:6px}

/* étapes : apparition */
.solis-steps.ai-animate .step{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.solis-steps.ai-animate .steps-line path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}
.solis-steps.is-in .step{opacity:1;transform:none}
.solis-steps.is-in .steps-line path{stroke-dashoffset:0}
.solis-steps.is-in .step:nth-child(2){transition-delay:.35s}
.solis-steps.is-in .step:nth-child(3){transition-delay:.7s}
.steps-wrap{position:relative}

@media (prefers-reduced-motion:reduce){
  .solis-ai .ai-msg,.solis-ai .ai-list li,.solis-ai .ai-note,.solis-steps .step{opacity:1!important;transition:none!important}
  .solis-steps .steps-line path{stroke-dashoffset:0!important;transition:none!important}
  .ai-caret{animation:none}
}

/* ---------- Tablette ---------- */
@media (max-width:1000px){
  .solis-ai{grid-template-columns:1fr;padding:70px 6% 80px}
  .ai-scene{max-width:620px;width:100%;margin:0 auto}
  .solis-steps{padding:70px 6% 80px}
  .steps-head{grid-template-columns:1fr;gap:20px}
  .steps-track{grid-template-columns:1fr;gap:42px;padding-left:4px}
  .steps-line{display:none}
  .steps-track:before{content:"";position:absolute;left:28px;top:40px;bottom:30px;width:1.4px;background:#ff7d68;box-shadow:0 0 6px #ff6759}
  .step{padding:0 0 0 92px;min-height:56px}
  .step-node{top:2px}
  .step-num{position:static;display:block;font-size:30px;margin-bottom:6px}
}
/* ---------- Mobile ---------- */
@media (max-width:560px){
  .solis-ai{padding:56px 22px 64px;gap:34px}
  .solis-steps{padding:56px 22px 64px}
  .ai-chat .ai-msg{margin:18px 14px 0;font-size:15px}
  .ai-tab{padding:6px 10px;font-size:13px}
  .ai-names b{padding:7px 12px;font-size:14px}
  .ai-list li{grid-template-columns:20px 1fr;padding:10px 12px}
  .ai-stars{grid-column:2}
  .ai-chat-bar{padding:10px}
  .solis-ai .ai-note{right:2px;font-size:16px}
  .ai-note svg{left:-40px;top:-26px;width:40px}
  .step{padding-left:74px}
  .steps-track:before{left:24px}
  .step-node{width:44px;height:44px}.step-node:after{inset:13px}
  .solis-ai .solis-offer-cta,.solis-steps .solis-offer-cta{width:100%;justify-content:space-between;padding:15px 22px}
  .steps-actions{width:100%}
}

/* Avant / Après lisible sur tablette et téléphone : les deux fiches côte à côte, sans chevauchement (relecture 15/10) */
@media (max-width:1000px){
  #mise-en-place .upgrade-comparison{height:auto;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(10px,3vw,28px);align-items:start;margin-top:56px;--u:calc(88cqw / 760)}
  #mise-en-place .upgrade-card{position:relative;left:auto;top:auto;width:auto;min-width:0}
  #mise-en-place .upgrade-before{margin-top:22px}
  #mise-en-place .upgrade-arrow{display:none}
  #mise-en-place .listing-tabs span:nth-child(n+3){display:none}
  #mise-en-place .listing-location{padding-right:0;min-height:0}
  #mise-en-place .listing-location .listing-map{display:none}
}

/* Grand écran : la flèche Avant -> Après passe au niveau des photos pour ne plus cacher la note et la catégorie */
@media (min-width:1001px){#mise-en-place .upgrade-arrow{top:calc(185 * var(--u))}}

/* ===== ia-scene.css ===== */
/* Bloc IA v2 (17/10) : même langage que les blocs Google / Savoir-faire / Radar :
   vraie interface dans un téléphone sombre, carte en verre, fil corail lumineux. */
.solis-ai{background:#f7f1e9 !important;color:#080f17}
.solis-ai .ai-lead{font-weight:400 !important;color:#080f17;max-width:540px}
.solis-ai .ai-text{color:#4a5560 !important;max-width:540px}
.solis-ai .ai-punch{color:#080f17;max-width:520px}
.solis-ai .ai-rule{width:80px;height:3px;background:#ff6860;margin:28px 0}

.ai-scene{position:relative;padding:0 !important;container-type:inline-size;width:100%;max-width:660px;justify-self:end}
.ai-stage{--u:calc(100cqw / 640);position:relative;width:100%;aspect-ratio:640/620}
.ai-bg{position:absolute;left:calc(64*var(--u));top:calc(40*var(--u));width:calc(530*var(--u));height:calc(540*var(--u));border-radius:calc(26*var(--u));overflow:hidden;background:#0c171a;box-shadow:0 calc(40*var(--u)) calc(80*var(--u)) calc(-30*var(--u)) #0c171a66}
.ai-bg::before{content:"";position:absolute;inset:-20px;background:url(assets/cafe-background.jpg) center/cover;filter:blur(7px) saturate(1.1) brightness(.62)}
.ai-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 78% 46%,#ff686040 0,transparent 55%),linear-gradient(100deg,#0c171ae6 0%,#0c171a66 45%,#0c171acc 100%)}

/* Téléphone */
.ai-phone{container-type:inline-size;position:absolute;left:calc(294*var(--u));top:0;width:calc(320*var(--u));height:calc(620*var(--u));border-radius:calc(46*var(--u));padding:calc(10*var(--u));background:linear-gradient(160deg,#2a3233,#0b1416 60%);border:1px solid #c2c9c38c;box-shadow:0 calc(30*var(--u)) calc(70*var(--u)) #0c171a80,0 0 calc(60*var(--u)) #ff686030}
.ai-screen{--u:calc(100cqw / 300);position:relative;width:100%;height:100%;border-radius:calc(36*var(--u));overflow:hidden;background:linear-gradient(180deg,#121d20,#0b1416);color:#f2f4f3;font-family:var(--f-texte,Arial,Helvetica,sans-serif)}
.ai-screen *{box-sizing:border-box}
.ai-status{position:absolute;left:0;right:0;top:0;height:calc(30*var(--u));display:flex;justify-content:space-between;align-items:center;padding:0 calc(22*var(--u));font-size:calc(11*var(--u));font-weight:700;color:#dfe4e3}
.ai-status i{width:calc(70*var(--u));height:calc(18*var(--u));border-radius:99px;background:#000}
.ai-head{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));top:calc(36*var(--u));height:calc(34*var(--u));display:flex;gap:calc(4*var(--u));align-items:center;padding:calc(3*var(--u));border-radius:99px;background:#1c2a2e;border:1px solid #ffffff14}
.solis-ai .ai-tab{flex:1;padding:calc(6*var(--u)) 0;border-radius:99px;text-align:center;font-size:calc(10.5*var(--u));font-weight:700;color:#93a0a2;box-shadow:none;background:none;transition:background .4s,color .4s}
.solis-ai .ai-tab.is-active{background:#f2f4f3;color:#0b1416;box-shadow:none}
.ai-q{position:absolute;right:calc(12*var(--u));top:calc(84*var(--u));max-width:calc(232*var(--u));margin:0;padding:calc(10*var(--u)) calc(14*var(--u));border-radius:calc(18*var(--u)) calc(18*var(--u)) calc(5*var(--u)) calc(18*var(--u));background:#ff6860;color:#fff;font-size:calc(12.5*var(--u));line-height:1.35}
.ai-a{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(140*var(--u));display:flex;gap:calc(8*var(--u));align-items:center;margin:0;font-size:calc(12*var(--u));color:#c9d0d1}
.ai-a span{flex:none;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%;display:grid;place-items:center;background:#ffffff14;border:1px solid #ffffff24}
.ai-a svg{width:calc(13*var(--u));height:calc(13*var(--u));fill:none;stroke:#ffb0a1;stroke-width:1.8}
.aip-list{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(176*var(--u));list-style:none;margin:0;padding:0;display:grid;gap:calc(8*var(--u))}
.aip-list li{height:calc(64*var(--u));display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(8*var(--u));border-radius:calc(14*var(--u));background:#0b1418a8;border:1px solid #65727070;box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) #0006}
.aip-list img{flex:none;width:calc(54*var(--u));height:calc(48*var(--u));border-radius:calc(9*var(--u));object-fit:cover}
.aip-list li:nth-child(2) img{object-position:80% 40%;filter:hue-rotate(-15deg) brightness(.92)}
.aip-list b{display:block;font-size:calc(13*var(--u));color:#fff}
.aip-list small{display:block;margin-top:calc(3*var(--u));font-size:calc(10.5*var(--u));color:#9aa6a8}
.aip-list small em{font-style:normal;color:#ffb626}
.aip-list small u{text-decoration:none;color:#50e9b6}
.aip-list .you{border:1.5px dashed #ff8b7e;background:#ff686014;box-shadow:0 0 calc(22*var(--u)) #ff686040}
.aip-list .you i{flex:none;width:calc(54*var(--u));height:calc(48*var(--u));border-radius:calc(9*var(--u));border:1px dashed #ff8b7e99;display:grid;place-items:center;color:#ff8b7e;font-style:normal;font-size:calc(20*var(--u))}
.aip-list .you b{color:#ffb0a1}
.aip-list .you b::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;background:#ff8b7e;animation:ai-blink 1.1s steps(1) infinite}
.ai-input{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));bottom:calc(16*var(--u));height:calc(38*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(6*var(--u)) 0 calc(14*var(--u));border-radius:99px;background:#1c2a2e;border:1px solid #ffffff14;font-size:calc(11.5*var(--u));color:#7f8c8e}
.ai-input i{width:calc(28*var(--u));height:calc(28*var(--u));border-radius:50%;background:#f2f4f3}

/* Carte en verre reliée par le fil corail */
.ai-card{position:absolute;left:0;top:calc(392*var(--u));width:calc(270*var(--u));padding:calc(18*var(--u));border-radius:calc(18*var(--u));background:linear-gradient(140deg,#3a3f3fe6,#161f22f2);border:1px solid #c2c9c355;box-shadow:0 calc(24*var(--u)) calc(50*var(--u)) #0c171a66;color:#f2f4f3;font-family:var(--f-texte,Arial,Helvetica,sans-serif);backdrop-filter:blur(6px)}
.ai-card *{box-sizing:border-box}
.ai-card-t{display:flex;align-items:center;gap:calc(10*var(--u));margin:0 0 calc(12*var(--u))!important;font-size:calc(14*var(--u));font-weight:700;line-height:1.25}
.ai-ico{flex:none;width:calc(38*var(--u));height:calc(38*var(--u));border-radius:calc(10*var(--u));border:1px solid #ff8b7e;background:#ff686022;display:grid;place-items:center}
.ai-ico svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:#ffb0a1;stroke-width:1.8}
.ai-card ul{list-style:none;margin:0;padding:0}
.ai-card li{display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(7*var(--u)) 0;border-top:1px solid #ffffff14;font-size:calc(12.5*var(--u));color:#d6dcdc}
.ai-card li::before{content:"";flex:none;width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#ff8b7e;box-shadow:0 0 calc(6*var(--u)) #ff574f}
.solis-ai .ai-tag{position:absolute;right:calc(10*var(--u));bottom:calc(-11*var(--u));left:auto;top:auto;padding:calc(4*var(--u)) calc(9*var(--u));border:1px solid #ffffff40;border-radius:calc(7*var(--u));background:#0b1416;color:#f2f4f3;font-size:calc(9.5*var(--u));font-weight:700;letter-spacing:.06em}

.ai-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.ai-wire .g{stroke:#ff6860;stroke-width:4;filter:blur(4px);fill:none;opacity:.8}
.ai-wire .w{stroke:#ffb0a1;stroke-width:1.5;fill:none;filter:drop-shadow(0 0 3px #ff514d)}
.ai-wire circle{fill:#fff6ed;stroke:#ff8b7e;stroke-width:1;filter:drop-shadow(0 0 5px #ff574f)}
.ai-phone,.ai-card{z-index:2}

/* Apparition : une seule séquence, dans l'ordre de la conversation */
.solis-ai.ai-animate .ai-q,.solis-ai.ai-animate .ai-a,.solis-ai.ai-animate .aip-list li,.solis-ai.ai-animate .ai-card{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.solis-ai.ai-animate .ai-wire path{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1s ease 2.3s}
.solis-ai.ai-animate.is-in .ai-q,.solis-ai.ai-animate.is-in .ai-a,.solis-ai.ai-animate.is-in .aip-list li,.solis-ai.ai-animate.is-in .ai-card{opacity:1;transform:none}
.solis-ai.ai-animate.is-in .ai-wire path{stroke-dashoffset:0}
.solis-ai.is-in .ai-a{transition-delay:.6s}
.solis-ai.is-in .aip-list li:nth-child(1){transition-delay:1s}
.solis-ai.is-in .aip-list li:nth-child(2){transition-delay:1.25s}
.solis-ai.is-in .aip-list li:nth-child(3){transition-delay:1.6s}
.solis-ai.is-in .ai-card{transition-delay:2s}
@media (prefers-reduced-motion:reduce){.solis-ai .ai-tab{transition:none}.aip-list .you b::after{animation:none}}

/* Mobile : le téléphone seul, centré, puis la carte en dessous */
@media (max-width:900px){
  .ai-scene{justify-self:center;max-width:420px}
  .ai-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:20px}
  .ai-bg,.ai-wire{display:none}
  .ai-phone{position:relative;left:auto;top:auto;width:min(100%,330px);height:auto;aspect-ratio:320/620;border-radius:44px;padding:10px}
  .ai-screen{border-radius:34px}
  .ai-card{--u:calc(min(100cqw,330px) / 270);position:relative;left:auto;top:auto;width:100%;max-width:330px}
}

/* v2.1 : plus de fond sombre derrière le téléphone, juste une lueur corail douce */
.ai-bg{display:none !important}
.ai-stage::before{content:"";position:absolute;left:calc(240*var(--u));top:calc(80*var(--u));width:calc(440*var(--u));height:calc(460*var(--u));border-radius:50%;background:radial-gradient(closest-side,#ff686038,#ff686000);pointer-events:none}
.aip-list img{filter:brightness(1.45) contrast(1.05) saturate(1.1)}
.aip-list li:nth-child(2) img{filter:brightness(1.35) contrast(1.05) hue-rotate(-15deg)}
.ai-src{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(410*var(--u));margin:0}
.ai-src p{margin:0 0 calc(8*var(--u));font-size:calc(10.5*var(--u));color:#7f8c8e}
.ai-src div{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.ai-src span{padding:calc(5*var(--u)) calc(9*var(--u));border-radius:99px;background:#1c2a2e;border:1px solid #ffffff1a;font-size:calc(10.5*var(--u));color:#c9d0d1}
.solis-ai.ai-animate .ai-src{opacity:0;transition:opacity .5s ease 1.9s}
.solis-ai.ai-animate.is-in .ai-src{opacity:1}
@media (max-width:900px){.ai-stage::before{display:none}}

/* v2.2 : photos éclaircies à la source, plus de filtre */
.aip-list img,.aip-list li:nth-child(2) img{filter:none !important;object-position:center !important}

/* v2.3 : la carte montre aussi ce que SOLIS fait */
.ai-card{top:calc(366*var(--u)) !important}
.ai-card li{align-items:flex-start !important;padding:calc(8*var(--u)) 0 !important}
.ai-card li::before{margin-top:calc(5*var(--u))}
.ai-card li span{display:block;color:#f2f4f3;font-weight:700}
.ai-card li em{display:flex;align-items:center;gap:calc(5*var(--u));margin-top:calc(3*var(--u));font-style:normal;font-weight:400;font-size:calc(11.5*var(--u));color:#ffb0a1}
.ai-card li em::before{content:"✓";font-weight:700;color:#ff8b7e}
.ai-card-f{margin:calc(10*var(--u)) 0 0 !important;padding-top:calc(10*var(--u));border-top:1px solid #ff8b7e55;font-size:calc(12*var(--u));font-weight:700;color:#fff}

/* 17/10 : titre de carte sur 2 lignes */
.ai-card-t{align-items:flex-start!important}
.ai-card-t .ai-ico{margin-top:calc(1*var(--u))}
.ai-card-tt{display:block}
.ai-card-tt small{display:block;margin-top:calc(4*var(--u));font-size:calc(12*var(--u));font-weight:400;color:#ffb0a1;line-height:1.3}
/* v3 (17/10) : la carte prend le même langage que la carte du diagnostic (papier clair, bandeau bleu pétrole) */
.solis-ai .ai-card{padding:0 !important;overflow:hidden;backdrop-filter:none;color:#16393e;border:1px solid transparent;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.22 0 0 0 0 0.24 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,linear-gradient(#fdfaf6,#fdfaf6) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 38%,#ff8b7e00 64%,#ff8b7e99 100%) border-box;
box-shadow:0 1px 0 #fff inset,0 calc(34*var(--u)) calc(60*var(--u)) calc(-22*var(--u)) #16393e59,0 calc(10*var(--u)) calc(22*var(--u)) calc(-10*var(--u)) #16393e33}
.solis-ai .ai-card-t{padding:calc(16*var(--u)) calc(18*var(--u)) 0;margin:0 0 calc(6*var(--u)) !important;color:#16393e}
.solis-ai .ai-card-tt small{color:#c8433a !important;font-weight:600 !important}
.solis-ai .ai-ico{border-color:#ff8b7ecc;background:#ff68611a}
.solis-ai .ai-ico svg{stroke:#c8433a}
.solis-ai .ai-card ul{padding:0 calc(18*var(--u))}
.solis-ai .ai-card li{border-top:1px solid #16393e17;color:#16393e}
.solis-ai .ai-card li:first-child{border-top:0}
.solis-ai .ai-card li::before{display:none}
.solis-ai .ai-card li span{color:#16393e !important}
.solis-ai .ai-card li em{color:#5d6d70 !important}
.solis-ai .ai-card li em::before{color:#2fa866 !important}
.solis-ai .ai-card-f{margin:calc(8*var(--u)) 0 0 !important;padding:calc(12*var(--u)) calc(18*var(--u)) calc(14*var(--u)) !important;border-top:0 !important;background:#16393e;color:#eef3f3 !important;font-weight:600 !important}
.solis-ai .ai-tag{display:none !important}
.solis-ai .ai-caption{margin:14px 0 0;font-size:13px;line-height:1.4;color:#6b7a7d;text-align:right}
@media (max-width:900px){.solis-ai .ai-caption{text-align:center}}
/* v4 (17/10) : le visiteur choisit son métier, la 3e place parle de l'appel perdu */
.solis-ai .ai-a .ai-a-t{display:inline;flex:1 1 auto;width:auto;height:auto;border:0;border-radius:0;background:none;place-items:initial}
.solis-ai .aip-tile{flex:none;width:calc(54*var(--u));height:calc(48*var(--u));border-radius:calc(9*var(--u));display:grid;place-items:center;font:600 calc(16*var(--u))/1 var(--f-titre,Arial,sans-serif);font-style:normal;letter-spacing:.02em;color:#ffd0c9;background:linear-gradient(140deg,#2b3f43,#142226);border:1px solid #ffffff1f}
.solis-ai .aip-tile[data-n="1"]{color:#d9e4e2;background:linear-gradient(140deg,#33403f,#182325)}
.solis-ai .aip-list .you small{color:#ffcfc8}
.solis-ai .ai-cta-note{margin:12px 0 0 !important;font-size:14px;color:#5d6d70}
.solis-ai .ai-try{margin:18px 0 0 calc(100% * 294 / 640);width:calc(100% * 320 / 640);text-align:center}
.solis-ai .ai-try p{margin:0 0 8px;font-size:14px;font-weight:600;color:#16393e}
.solis-ai .ai-try div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.solis-ai .ai-try button{padding:8px 15px;border:1px solid #16393e33;border-radius:999px;background:#ffffffa6;color:#16393e;font:600 14px/1.2 var(--f-texte,Arial,sans-serif);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.solis-ai .ai-try button:hover{border-color:#16393e80}
.solis-ai .ai-try button[aria-pressed="true"]{background:#16393e;border-color:#16393e;color:#fff}
.solis-ai .ai-try button:focus-visible{outline:3px solid #ff6860;outline-offset:3px}
.solis-ai .ai-caption{margin:10px 0 0 calc(100% * 294 / 640) !important;width:calc(100% * 320 / 640);text-align:center !important}
/* changement de métier : la conversation se rejoue en un instant */
.solis-ai .ai-screen.is-swapping .ai-q,.solis-ai .ai-screen.is-swapping .ai-a,.solis-ai .ai-screen.is-swapping .aip-list li:not(.you){opacity:0 !important;transform:translateY(6px) !important;transition:opacity .18s ease,transform .18s ease !important;transition-delay:0s !important}
.solis-ai .ai-screen.ai-swapped .ai-q,.solis-ai .ai-screen.ai-swapped .ai-a,.solis-ai .ai-screen.ai-swapped .aip-list li{transition:opacity .35s ease,transform .35s ease}
.solis-ai .ai-screen.ai-swapped .ai-q{transition-delay:0s}
.solis-ai .ai-screen.ai-swapped .ai-a{transition-delay:.15s}
.solis-ai .ai-screen.ai-swapped .aip-list li:nth-child(1){transition-delay:.3s}
.solis-ai .ai-screen.ai-swapped .aip-list li:nth-child(2){transition-delay:.42s}
@media (max-width:900px){.solis-ai .ai-try,.solis-ai .ai-caption{margin-left:0 !important;width:100%}}
/* v5 (17/10) : tout change avec le métier (question, ce que l'IA regarde, ce que SOLIS travaille) */
.solis-ai .ai-card{top:calc(336*var(--u)) !important}
.solis-ai .ai-card-h{display:block}
.solis-ai .ai-screen.is-swapping .ai-src span,.solis-ai .ai-screen.is-swapping .aip-list .you small{opacity:0;transition:opacity .18s ease}
.solis-ai .ai-screen.ai-swapped .ai-src span{transition:opacity .35s ease .55s}
.solis-ai .ai-screen.ai-swapped .aip-list .you small{transition:opacity .35s ease .5s}
.solis-ai .ai-card.is-swapping .ai-card-h,.solis-ai .ai-card.is-swapping li{opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease}
.solis-ai .ai-card.ai-swapped .ai-card-h{transition:opacity .35s ease .6s,transform .35s ease .6s}
.solis-ai .ai-card.ai-swapped li{transition:opacity .35s ease,transform .35s ease}
.solis-ai .ai-card.ai-swapped li:nth-child(1){transition-delay:.7s}
.solis-ai .ai-card.ai-swapped li:nth-child(2){transition-delay:.8s}
.solis-ai .ai-card.ai-swapped li:nth-child(3){transition-delay:.9s}
.solis-ai .ai-try p{max-width:300px;margin-left:auto !important;margin-right:auto !important;line-height:1.4}
/* v6 (17/10) : le choix du métier passe en tête du bloc, en grand */
.solis-ai .ai-try{margin:0 0 26px !important;width:100% !important;text-align:center}
.solis-ai .ai-try-t{margin:0 !important;font:700 clamp(20px,1.7vw,25px)/1.2 var(--f-titre,Arial,sans-serif) !important;letter-spacing:-.02em;color:#16393e !important;max-width:none !important}
.solis-ai .ai-try-s{margin:6px auto 16px !important;font-size:15px !important;line-height:1.45;color:#5d6d70 !important;font-weight:400 !important;max-width:420px !important}
.solis-ai .ai-seg{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#16393e;box-shadow:0 18px 40px -16px #16393e99,inset 0 1px 0 #ffffff1a}
.solis-ai .ai-seg button{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:0;border-radius:999px;background:transparent;color:#cfdedc;font:700 16px/1 var(--f-texte,Arial,sans-serif);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.solis-ai .ai-seg button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.solis-ai .ai-seg button:hover{color:#fff;background:#ffffff14}
.solis-ai .ai-seg button[aria-pressed="true"]{background:#ff6860;color:#fff;box-shadow:0 6px 18px -4px #ff6860b3}
.solis-ai .ai-seg button:focus-visible{outline:3px solid #ffb0a1;outline-offset:2px}
/* un seul signal : un halo corail quand le bloc apparaît, pour inviter à cliquer */
.solis-ai.ai-animate .ai-seg::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid #ff6860;opacity:0;pointer-events:none}
.solis-ai.ai-animate.is-in .ai-seg::after{animation:ai-seg-call 1.6s ease-out 2.6s 2}
@keyframes ai-seg-call{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@media (max-width:560px){.solis-ai .ai-seg{display:flex;width:100%}.solis-ai .ai-seg button{flex:1;justify-content:center;flex-direction:column;gap:6px;padding:10px 6px;font-size:14px}}
.solis-ai .ai-try .ai-seg{display:inline-flex;gap:4px;flex-wrap:nowrap;justify-content:center}
@media (max-width:560px){.solis-ai .ai-try .ai-seg{display:flex}}
/* v7 (17/10) : profondeur et vie. Anneaux du Radar SOLIS derrière le téléphone, grand mot du métier, l'IA "écrit" au changement */
.solis-ai .ai-stage{isolation:isolate}
.solis-ai .ai-rings{position:absolute;z-index:-1;left:calc(454*var(--u) - 400*var(--u));top:calc(310*var(--u) - 400*var(--u));width:calc(800*var(--u));height:calc(800*var(--u));overflow:visible;pointer-events:none}
.solis-ai .ai-rings circle{fill:none;stroke:#ff6860;stroke-width:1.2;opacity:.22}
.solis-ai .ai-rings circle:nth-child(2){opacity:.15}.solis-ai .ai-rings circle:nth-child(3){opacity:.1}
.solis-ai .ai-rings .d{stroke-dasharray:3 9;opacity:.18}
.solis-ai .ai-rings .ping{opacity:0;transform-origin:400px 400px}
.solis-ai .ai-stage.is-scanning .ai-rings .ping{animation:ai-ping 1.1s cubic-bezier(.2,.6,.3,1) 1}
@keyframes ai-ping{0%{opacity:.55;transform:scale(1);stroke-width:2}100%{opacity:0;transform:scale(2.05);stroke-width:1}}
.solis-ai .ai-word{position:absolute;z-index:-1;left:calc(-8*var(--u));top:calc(150*var(--u));font:800 calc(118*var(--u))/.9 var(--f-titre,Arial,sans-serif);font-variation-settings:"opsz" 96;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.3px #16393e2e;white-space:nowrap;pointer-events:none;transition:opacity .25s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.solis-ai .ai-word.is-out{opacity:0;transform:translateY(10px)}
/* l'IA écrit */
.solis-ai .ai-dots{display:none;gap:5px;align-items:center;padding:calc(6*var(--u)) calc(4*var(--u))}
.solis-ai .ai-dots b{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:#ffb0a1;animation:ai-dot .9s ease-in-out infinite}
.solis-ai .ai-dots b:nth-child(2){animation-delay:.15s}.solis-ai .ai-dots b:nth-child(3){animation-delay:.3s}
@keyframes ai-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(calc(-3*var(--u)))}}
.solis-ai .ai-screen.is-typing .ai-dots{display:inline-flex}
.solis-ai .ai-screen.is-typing .ai-a-t{display:none}
.solis-ai .ai-screen.is-swapping.show-q .ai-q,.solis-ai .ai-screen.is-swapping.is-typing .ai-a{opacity:1 !important;transform:none !important;transition:opacity .3s ease,transform .3s ease !important}
/* nouveau rythme d'apparition après l'écriture */
.solis-ai .ai-screen.ai-swapped .ai-a{transition-delay:0s}
.solis-ai .ai-screen.ai-swapped .aip-list li:nth-child(1){transition-delay:.12s}
.solis-ai .ai-screen.ai-swapped .aip-list li:nth-child(2){transition-delay:.24s}
.solis-ai .ai-screen.ai-swapped .aip-list .you small{transition-delay:.36s}
.solis-ai .ai-screen.ai-swapped .ai-src span{transition-delay:.45s}
.solis-ai .ai-card.ai-swapped .ai-card-h{transition-delay:.4s}
.solis-ai .ai-card.ai-swapped li:nth-child(1){transition-delay:.5s}
.solis-ai .ai-card.ai-swapped li:nth-child(2){transition-delay:.6s}
.solis-ai .ai-card.ai-swapped li:nth-child(3){transition-delay:.7s}
/* le choix du métier, centré au-dessus du téléphone */
@media (min-width:901px){.solis-ai .ai-try{position:relative;left:calc(100% * 134 / 640)}}
@media (max-width:900px){.solis-ai .ai-rings{left:50%;top:calc(50% - 60px);width:760px;height:760px;margin:-380px 0 0 -380px}.solis-ai .ai-word{display:none}}
@media (prefers-reduced-motion:reduce){.solis-ai .ai-rings .ping{display:none}.solis-ai .ai-dots b{animation:none}}
/* v8 (17/10) : métiers en colonne à gauche du téléphone, au-dessus de la carte remontée ; plus de grand mot */
.solis-ai .ai-word{display:none !important}
@media (min-width:901px){
  .solis-ai .ai-stage .ai-try{position:absolute;z-index:2;left:0 !important;top:calc(24*var(--u));width:calc(270*var(--u)) !important;margin:0 !important;text-align:left}
  .solis-ai .ai-stage .ai-try-t{font-size:calc(19*var(--u)) !important;line-height:1.2 !important}
  .solis-ai .ai-stage .ai-try-s{margin:calc(6*var(--u)) 0 calc(14*var(--u)) !important;font-size:calc(13.5*var(--u)) !important;max-width:none !important}
  .solis-ai .ai-stage .ai-try .ai-seg{display:flex;flex-direction:column;gap:calc(4*var(--u));width:100%;padding:calc(6*var(--u));border-radius:calc(18*var(--u))}
  .solis-ai .ai-stage .ai-seg button{justify-content:flex-start;gap:calc(11*var(--u));padding:calc(12*var(--u)) calc(16*var(--u));border-radius:calc(13*var(--u));font-size:calc(15.5*var(--u))}
  .solis-ai .ai-stage .ai-seg button svg{width:calc(19*var(--u));height:calc(19*var(--u))}
  .solis-ai .ai-stage .ai-seg::after{border-radius:calc(22*var(--u))}
  .solis-ai .ai-card{top:calc(300*var(--u)) !important}
}
@media (max-width:900px){
  .solis-ai .ai-stage .ai-try{order:-1;position:static;width:100% !important;margin:0 0 6px !important;text-align:center}
}
@media (min-width:901px){.solis-ai .ai-card{top:calc(314*var(--u)) !important}.solis-ai .ai-stage .ai-try{top:calc(18*var(--u))}.solis-ai .ai-stage .ai-seg button{padding:calc(11*var(--u)) calc(16*var(--u))}}
/* Radar de fond v2 (17/10) : cadran gradué, faisceau, points détectés, bords fondus */
.solis-ai .ai-rings{-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 74%);mask-image:radial-gradient(circle,#000 58%,transparent 74%)}
.solis-ai .ai-rings circle:not(.ping){opacity:1}
.solis-ai .ai-rings .r1,.solis-ai .ai-rings .r2,.solis-ai .ai-rings .r3,.solis-ai .ai-rings .r4{fill:none;stroke:#ff6860;stroke-width:1}
.solis-ai .ai-rings .r1{stroke-opacity:.34}.solis-ai .ai-rings .r2{stroke-opacity:.24}.solis-ai .ai-rings .r3{stroke-opacity:.17}.solis-ai .ai-rings .r4{stroke-opacity:.12}
.solis-ai .ai-rings .rd{fill:none;stroke:#16393e;stroke-opacity:.14;stroke-width:1;stroke-dasharray:2 7}
.solis-ai .ai-rings .ax{stroke:#16393e;stroke-opacity:.08;stroke-width:1}
.solis-ai .ai-rings .ax2{stroke-dasharray:1 6;stroke-opacity:.09}
.solis-ai .ai-rings .tk{stroke:#16393e;stroke-opacity:.26;stroke-width:1.1;stroke-linecap:round}
.solis-ai .ai-rings .tr{fill:none;stroke:#16393e;stroke-opacity:.12;stroke-width:1}
.solis-ai .ai-rings .sw{transform-origin:400px 400px}
.solis-ai .ai-rings .swf{fill:url(#aiSweep)}
.solis-ai .ai-rings .swl{stroke:#ff6860;stroke-opacity:.5;stroke-width:1.4}
.solis-ai .ai-rings .bl{fill:#ff6860;stroke:#fcf8f3;stroke-width:2;filter:drop-shadow(0 0 5px #ff686099)}
.solis-ai .ai-rings .b2{fill:#16393e;filter:none}
.solis-ai .ai-rings .by circle:first-child{fill:none;stroke:#ff6860;stroke-width:1.4;stroke-dasharray:3 3}
.solis-ai .ai-rings .byc{fill:#ff6860}
.solis-ai .ai-rings .ping{fill:none;stroke:#ff6860;stroke-width:2;opacity:0}
/* au changement de métier : le faisceau fait un tour, les points se rallument */
.solis-ai .ai-stage.is-scanning .ai-rings .sw{animation:ai-sweep 1.2s cubic-bezier(.45,.05,.3,1) 1}
@keyframes ai-sweep{to{transform:rotate(360deg)}}
.solis-ai .ai-stage.is-scanning .ai-rings .bl{animation:ai-blip .9s ease .35s 1}
@keyframes ai-blip{0%,100%{opacity:1}40%{opacity:.15}}
.solis-ai .ai-stage.is-scanning .ai-rings .ping{animation:ai-ping2 1.1s cubic-bezier(.2,.6,.3,1) 1}
@keyframes ai-ping2{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.05)}}
.solis-ai .ai-rings .ping{transform-origin:400px 400px}
@media (prefers-reduced-motion:reduce){.solis-ai .ai-rings .sw,.solis-ai .ai-rings .bl{animation:none !important}}
.solis-ai .ai-rings .bg{fill:url(#aiFade);stroke:none}
/* Faisceau visible (17/10) : orienté vers la droite du téléphone, dégradé en éventail */
.solis-ai .ai-rings .swl{stroke:#ff6860;stroke-opacity:.75;stroke-width:1.6}
.solis-ai .ai-rings .sw{transform:rotate(8deg)}
/* un tour de balayage quand le bloc apparaît, puis un tour à chaque changement de métier */
@keyframes ai-sweep-in{from{transform:rotate(-352deg)}to{transform:rotate(8deg)}}
@keyframes ai-sweep-go{from{transform:rotate(8deg)}to{transform:rotate(368deg)}}
.solis-ai.ai-animate.is-in .ai-rings .sw{animation:ai-sweep-in 1.8s cubic-bezier(.45,.05,.3,1) .3s 1 both}
.solis-ai.ai-animate.is-in .ai-stage.is-scanning .ai-rings .sw,.solis-ai .ai-stage.is-scanning .ai-rings .sw{animation:ai-sweep-go 1.2s cubic-bezier(.45,.05,.3,1) 1}
@media (prefers-reduced-motion:reduce){.solis-ai .ai-rings .sw{animation:none !important;transform:rotate(8deg)}}
/* Faisceau v3 (17/10) : un seul dégradé lisse (conique), plus de tranches */
.solis-ai .ai-rings .sw{display:none}
.solis-ai .ai-sweep{position:absolute;z-index:-1;left:calc(54*var(--u));top:calc(-90*var(--u));width:calc(800*var(--u));height:calc(800*var(--u));border-radius:50%;pointer-events:none;
background:conic-gradient(from 98deg,#ff686000 0deg,#ff686000 300deg,#ff68600d 322deg,#ff686029 345deg,#ff686047 358.6deg,#ff6860a6 359.3deg,#ff686000 360deg);
-webkit-mask-image:radial-gradient(circle,#0000 19%,#000 24%,#000 52%,#0000 70%);mask-image:radial-gradient(circle,#0000 19%,#000 24%,#000 52%,#0000 70%);transform:rotate(0deg)}
@keyframes ai-sweep-in2{from{transform:rotate(-360deg)}to{transform:rotate(0deg)}}
@keyframes ai-sweep-go2{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.solis-ai.ai-animate.is-in .ai-sweep{animation:ai-sweep-in2 1.9s cubic-bezier(.45,.05,.3,1) .3s 1 both}
.solis-ai.ai-animate.is-in .ai-stage.is-scanning .ai-sweep,.solis-ai .ai-stage.is-scanning .ai-sweep{animation:ai-sweep-go2 1.2s cubic-bezier(.45,.05,.3,1) 1}
@media (max-width:900px){.solis-ai .ai-sweep{display:none}}
@media (prefers-reduced-motion:reduce){.solis-ai .ai-sweep{animation:none !important}}
/* Faisceau plus lent (17/10) */
.solis-ai.ai-animate.is-in .ai-sweep{animation:ai-sweep-in2 4s cubic-bezier(.37,0,.25,1) .3s 1 both}
.solis-ai.ai-animate.is-in .ai-stage.is-scanning .ai-sweep,.solis-ai .ai-stage.is-scanning .ai-sweep{animation:ai-sweep-go2 2.8s cubic-bezier(.37,0,.25,1) 1}
/* Faisceau encore un peu plus lent (17/10) */
.solis-ai.ai-animate.is-in .ai-sweep{animation:ai-sweep-in2 5.2s cubic-bezier(.37,0,.25,1) .3s 1 both}
.solis-ai.ai-animate.is-in .ai-stage.is-scanning .ai-sweep,.solis-ai .ai-stage.is-scanning .ai-sweep{animation:ai-sweep-go2 3.6s cubic-bezier(.37,0,.25,1) 1}
/* Textes de gauche (17/10) : les noms des IA s'allument en même temps que l'onglet du téléphone, une seule fois ; le trait corail se dessine */
.solis-ai .ai-name{background:linear-gradient(#ff6860,#ff6860) left 100%/0% 2px no-repeat;transition:color .35s ease,background-size .45s cubic-bezier(.6,0,.2,1)}
.solis-ai .ai-name.is-lit{color:#c8433a;background-size:100% 2px}
.solis-ai.ai-animate .ai-rule{transform:scaleX(0);transform-origin:left center}
.solis-ai.ai-animate.is-in .ai-rule{transform:scaleX(1);transition:transform .9s cubic-bezier(.6,0,.2,1) .5s}

/* ===== (style écrit auparavant directement dans index.html) ===== */
@media(min-width:701px){.craft-story{z-index:2}.local-radar{z-index:1;margin-top:-9cqw}}

/* ===== (style écrit auparavant directement dans index.html) ===== */
@media(min-width:1001px){.solis-steps{padding-top:clamp(56px,4.5vw,72px)!important;padding-bottom:clamp(56px,4.5vw,72px)!important}}
.solis-steps .steps-head h2{font-size:clamp(32px,3.5vw,54px);line-height:1.04;letter-spacing:-.04em}
.solis-steps .steps-intro{font-size:clamp(16px,1.3vw,19px);color:#b9c0c4}
.solis-steps .step h3{font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.02em}
.solis-steps .step p{font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:#b9c0c4;max-width:320px}
.solis-steps .step-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.solis-steps .steps-care{font-size:clamp(15px,1.15vw,17px);color:#b9c0c4;max-width:720px}

/* ===== (style écrit auparavant directement dans index.html) ===== */
.solis-change{position:relative;z-index:2;padding:clamp(64px,7vw,100px) 6%;background:#fcf8f3;color:#080f17;font-family:var(--f-texte,Arial,Helvetica,sans-serif)}
.solis-change *{box-sizing:border-box}
.sim{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(40px,6vw,96px);align-items:center;max-width:1120px;margin:0 auto}
.sim h2{margin:0 0 16px;font:700 clamp(28px,2.8vw,42px)/1.1 var(--f-texte,Arial,Helvetica,sans-serif);letter-spacing:-.03em}
.sim-lead{margin:0 0 32px;max-width:520px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:#3a4550}
.ctl{margin:0 0 20px}
.ctl p{margin:0 0 8px;font-size:14px;font-weight:700}
.ctl div{display:flex;flex-wrap:wrap;gap:8px}
.ctl button{min-height:44px;padding:10px 18px;border:1px solid #080f1733;border-radius:999px;background:#fff;color:#080f17;font:700 15px/1 var(--f-texte,Arial,Helvetica,sans-serif);cursor:pointer;transition:background .2s,color .2s}
.ctl button[aria-pressed="true"]{background:#080f17;border-color:#080f17;color:#fff}
.ctl-big button{padding:12px 22px}
.ctl-big button[data-v="after"][aria-pressed="true"]{background:#ff6860;border-color:#ff6860}
.ctl button:focus-visible{outline:3px solid #ff6860;outline-offset:3px}
.sim-cap{min-height:52px;margin:24px 0 0;padding-top:20px;border-top:1px solid #080f171f;font-size:17px;line-height:1.5;font-weight:700}
.sim-honest{margin:22px 0 0;max-width:520px;font-size:14.5px;line-height:1.55;color:#5a6672}
/* Téléphone */
.ph{position:relative;width:340px;max-width:100%;margin:0 auto;padding:12px;border-radius:44px;background:#0e1b1e;box-shadow:0 40px 80px #0e1b1e33}
.scr{height:600px;border-radius:34px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:13.5px;color:#202124}
.bar{display:flex;justify-content:space-between;padding:12px 22px 6px;font-size:11.5px;font-weight:700}
.view{flex:1;display:none;flex-direction:column;padding:6px 16px 16px;gap:12px}
.view.on{display:flex}
.srch{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;background:#f1f3f4}
.srch svg{flex:0 0 16px}
.res{border:1px solid #e3e3e3;border-radius:16px;overflow:hidden;transition:opacity .35s}
.res .imgs{display:flex;gap:3px;height:96px}
.res .imgs u{flex:1}
.res .bd{padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.res .nm{font-size:17px;font-weight:700}
.res .ct{color:#5f6368}
.res .hr{font-weight:700}
.res .ds{color:#3c4043;line-height:1.4}
.res .bt{display:flex;gap:8px;margin-top:6px}
.res .bt span{flex:1;padding:8px;border-radius:999px;background:#e8f0fe;color:#1a56c4;font-weight:700;text-align:center;font-size:12.5px}
.res .miss{color:#b4483f}
.u1{background:linear-gradient(135deg,#e9d6c8,#c9a48c)}.u2{background:linear-gradient(135deg,#d9c3b3,#8f6b57)}.u3{background:linear-gradient(135deg,#f1e2d6,#b88e74)}
.ug{background:repeating-linear-gradient(45deg,#e6e6e6 0 6px,#eee 6px 12px);filter:blur(1px)}
.other{border:1px solid #eee;border-radius:12px;padding:10px 14px;color:#5f6368}
.other b{display:block;color:#202124}
.chat{display:flex;flex-direction:column;gap:10px}
.cb{max-width:86%;padding:10px 13px;border-radius:16px;line-height:1.45}
.cb.q{align-self:flex-end;background:#f1f3f4}
.cb.a{background:#fff;border:1px solid #e3e3e3}
.cb.a b{display:block;margin-bottom:2px}
.ai-n{font-size:12px;font-weight:700;color:#5f6368}
@media(max-width:860px){.solis-change{padding:56px 22px}.sim{grid-template-columns:1fr}.ph{order:2}}
@media(prefers-reduced-motion:reduce){.res,.ctl button{transition:none}}

/* ===== (style écrit auparavant directement dans index.html) ===== */
.craft-copy .craft-extra{margin-top:1.6cqw;max-width:31cqw;font-size:1.3cqw;line-height:1.5;letter-spacing:0;color:#3a4550}
@media(min-width:701px){.craft-copy{top:22%!important}}
@media(max-width:700px){.craft-copy .craft-extra{max-width:none;margin-top:4cqw;font-size:3.9cqw}}
@media(min-width:1001px){.solis-upgrade{height:calc(1060 * var(--u))!important}}

/* ===== boutons.css ===== */
/* Boutons : une seule taille pour tous les boutons d'action de la page (aperçu v1).
   À intégrer proprement dans styles.css lors du report vers le vrai site. */
.solis-offer-cta{font:700 17px/1.2 Arial,Helvetica,sans-serif !important;padding:16px 28px !important;gap:14px !important;min-height:54px !important;width:fit-content !important;max-width:100%;justify-content:center !important}
.solis-offer-cta svg{width:20px !important;height:20px !important;stroke-width:1.8 !important}
@media (max-width:700px){
  .solis-offer-cta{width:100% !important;font-size:16px !important;padding:15px 22px !important;justify-content:space-between !important}
}

/* ===== typo.css ===== */
/* Typographie SOLIS : une seule échelle pour toute la page d'accueil (aperçu v1).
   4 niveaux seulement. À intégrer proprement dans styles.css lors du report vers le vrai site. */

/* 1. Titre de section : même taille partout, une seule couleur, pas de retour à la ligne forcé */
section:not(#accueil) h2{font:700 clamp(28px,2.8vw,40px)/1.12 var(--f-texte,Arial,Helvetica,sans-serif) !important;letter-spacing:-.03em !important;transform:none !important}
section:not(#accueil) h2 em{color:inherit !important;font-style:normal !important}

/* 2. Intertitres (titres des étapes, des événements du Suivi, etc.) */
.b2-module-copy h3,.care-event h3,.care-event-5 h3,.method-step h3,.step h3,.why-col-t{font:700 clamp(18px,1.4vw,21px)/1.25 var(--f-texte,Arial,Helvetica,sans-serif) !important;letter-spacing:-.015em !important}
.b2-module-copy h3{white-space:normal !important}

/* 3a. Phrase d'introduction sous un titre */
.b2-reflex,.craft-copy > p:first-of-type,.radar-intro,.ai-lead,.upgrade-lead,.care-lead{font-size:clamp(18px,1.35vw,20px) !important;line-height:1.5 !important;letter-spacing:0 !important}

/* 3b. Texte courant */
.b2-description,.b2-statement,.craft-extra,.craft-note,.radar-conclusion,.ai-text,.ai-punch,.upgrade-description,.conclusion-description,.faq-answer p,.method-intro,.method-step p,.sim-lead,.why-head p,.care-event p,.care-event-5 p,.why-person p,.why-last,.method-foot p{font-size:clamp(16px,1.1vw,17.5px) !important;line-height:1.6 !important;letter-spacing:0 !important}
.care-event-5 p{font-weight:400 !important}

/* 4. Petits titres au-dessus des titres : discrets, sans majuscules ni trait */
.b2-eyebrow,.radar-eyebrow,.ia-kicker,.offer-kicker,.phase-three-kicker,.faq-kicker,.method-label{font:700 14px/1.3 var(--f-texte,Arial,Helvetica,sans-serif) !important;letter-spacing:0 !important;text-transform:none !important;margin-bottom:12px !important}
.b2-eyebrow i,.radar-eyebrow i,.ia-kicker i,.offer-kicker i,.phase-three-kicker i,.faq-kicker i{display:none !important}
#suivi-solis h2{font-family:var(--f-texte,Arial,Helvetica,sans-serif) !important}

/* 17/10 : titre Radar sur 2 lignes pour ne plus chevaucher la carte (nom de quartier + fil corail) */
@media(min-width:1001px){.local-radar h2{max-width:560px !important}}

/* 17/10 : phrase honnête sous le trait corail du bloc Savoir-faire */
.craft-copy .craft-note{margin-top:1.4cqw;max-width:31cqw;color:var(--c-texte,#4b5c5f)}
@media(max-width:700px){.craft-copy .craft-note{max-width:none;margin-top:16px}}
/* 17/10 v2 : liste du bloc Savoir-faire (texte validé « Ce que SOLIS peut changer pour vous ») */
.craft-copy .craft-list{list-style:none;margin:1.4cqw 0 0;padding:0;max-width:33cqw}
.craft-copy .craft-list li{position:relative;padding:.45cqw 0 .45cqw 1.6cqw;font-size:clamp(15px,1.05vw,16.5px);line-height:1.45;color:var(--c-titre,#16393e)}
.craft-copy .craft-list li::before{content:"";position:absolute;left:0;top:calc(.45cqw + .62em);width:.55cqw;height:.55cqw;min-width:7px;min-height:7px;border-radius:50%;background:#ff5a4f}
.craft-copy .craft-note{font-weight:700;color:var(--c-titre,#16393e) !important}
@media(max-width:700px){.craft-copy .craft-list{max-width:none;margin-top:14px}.craft-copy .craft-list li{padding:5px 0 5px 18px}.craft-copy .craft-list li::before{top:calc(5px + .6em)}}
/* 17/10 : le bloc Savoir-faire a plus de texte -> on agrandit la scène là où il manque de place */
@media(min-width:901px) and (max-width:1180px){
  .craft-copy{top:15%!important}
  .craft-copy h2{margin-bottom:1.6cqw!important}
  .craft-copy > p:first-of-type{font-size:16.5px!important}
  .craft-copy .craft-list{margin-top:1cqw}
  .craft-copy .craft-list li{font-size:14.5px;padding:.3cqw 0 .3cqw 1.6cqw}
  .craft-copy .craft-rule{margin-top:1.6cqw}
}
@media(min-width:701px) and (max-width:900px){
  .craft-board{height:100cqw}
  .craft-copy{top:13%!important}
  .craft-artisan{top:11.52%;height:38.93%}
  .craft-review{top:28.13%;height:13.8%}
  .craft-phone{top:17.12%;height:37.24%}
  .craft-thread{height:66.67%}
}
@media(max-width:700px){
  .craft-board{height:315cqw}
  .craft-copy{top:8.5%!important}
  .craft-artisan{top:54.9%!important;height:22.09%!important}
  .craft-phone{top:59.55%!important;height:23.33%!important}
  .craft-review{top:64.22%!important}
  .craft-thread-mobile{top:22.22%!important;height:77.78%!important}
}

/* ===== polices.css ===== */
/* SOLIS – polices et couleurs de texte (option A, 17/10/2026, aperçu).
   Titres : Bricolage Grotesque. Texte : Figtree.
   Pour l'aperçu, les polices viennent de Google Fonts. Pour le vrai site :
   héberger les fichiers des polices sur le site (protection des données). */
:root{
  --f-titre:"Bricolage Grotesque",Arial,Helvetica,sans-serif;
  --f-texte:"Figtree",Arial,Helvetica,sans-serif;
  --c-titre:#16393e;        /* titres sur fond clair (au lieu du noir) */
  --c-texte:#4b5c5f;        /* texte courant sur fond clair */
  --c-corail-texte:#c8433a; /* corail lisible sur fond clair */
  --c-corail-nuit:#ff8b7e;  /* corail sur fond sombre */
}

/* 1. Titres : Bricolage partout (hors maquettes de téléphone) */
#hero-title,
section:not(#accueil) h2{font-family:var(--f-titre) !important;font-variation-settings:"opsz" 72;letter-spacing:-.025em !important}
.b2-module-copy h3,.care-event h3,.care-event-5 h3,.method-step h3,.step h3,.why-col-t,.ai-card-t{font-family:var(--f-titre) !important;font-variation-settings:"opsz" 24}
#suivi-solis .followup-lead,#suivi-solis .followup-price,.offer-price,.method-n,.step-num{font-family:var(--f-titre) !important;font-style:normal !important;font-variation-settings:"opsz" 72}

/* 2. Fini le noir sur les fonds clairs */
#etre-choisi h2,#dans-les-ia h2,#ce-que-solis-change h2,#mise-en-place h2,#pourquoi-solis h2,#questions-frequentes h2,
#mise-en-place .offer-price,#questions-frequentes summary{color:var(--c-titre) !important}
#etre-choisi .craft-copy > p:first-of-type,#dans-les-ia .ai-lead,#dans-les-ia .ai-punch,#ce-que-solis-change .sim-lead,
#mise-en-place .upgrade-lead,#pourquoi-solis .why-last{color:var(--c-titre) !important}
#etre-choisi .craft-extra,#dans-les-ia .ai-text,#mise-en-place .upgrade-description,#mise-en-place .offer-reassurance,
#pourquoi-solis .why-head p,#pourquoi-solis .why-person p,.faq-answer p{color:var(--c-texte) !important}
/* petits titres au-dessus des titres : corail */
#dans-les-ia .ia-kicker,#mise-en-place .offer-kicker,#questions-frequentes .faq-kicker{color:var(--c-corail-texte) !important}
.b2-eyebrow,.radar-eyebrow,.phase-three-kicker,.method-label{color:var(--c-corail-nuit) !important}

/* 3. Corail sur le mot-clé : seulement 3 titres (accueil, IA, fin de page) */
section:not(#accueil) h2#ai-title em{color:var(--c-corail-texte) !important}
section:not(#accueil) h2#conclusion-title em{color:var(--c-corail-nuit) !important}

/* ===== accueil-reprise.css ===== */
/* SOLIS – reprise de l'accueil bloc par bloc (17/10/2026, après-midi). Chargée en dernier.
   Règles : cartes « papier » claires, liseré corail, phrase clé dans un bandeau bleu pétrole,
   coches vertes ; une seule animation par bloc, jouée une fois ; pas d'étiquettes en majuscules. */
:root{--sc-papier:#fbf7f1;--sc-petrole:#16393e;--sc-vert:#2fa866;--sc-orange:#e8962a;--sc-rouge:#e5483f;--sc-corail:#ff8b7e;--sc-texte:#5d6d70}

/* ---------- Étiquettes : jamais en majuscules ---------- */
.illus-tag{text-transform:none !important;letter-spacing:0 !important;font:600 11px/1.6 var(--f-texte,Arial,sans-serif) !important}
.brand span{text-transform:none !important;letter-spacing:0 !important;font-family:var(--f-texte,Arial,sans-serif) !important;font-weight:500 !important;line-height:1.35 !important}
@media(min-width:961px){.brand span{font-size:12px !important}}
.hero .eyebrow{text-transform:none !important;letter-spacing:0 !important;white-space:normal !important;width:auto !important;max-width:34em;font-family:var(--f-texte,Arial,sans-serif) !important;font-weight:600 !important;font-size:15px !important;line-height:1.4 !important}
@media(max-width:760px){.hero .eyebrow{font-size:13px !important;max-width:24em}}

/* ---------- Coches vertes (toutes les listes de la page) ---------- */
.sc-checks{list-style:none;margin:0;padding:0}
.sc-checks li{position:relative;padding:5px 0 5px 30px;line-height:1.45}
.sc-checks li::before{content:"";position:absolute;left:0;top:calc(5px + .12em);width:20px;height:20px;border-radius:50%;
  background:#2fa8661f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.7 2.7 6-6.3' fill='none' stroke='%232fa866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sc-checks.on-dark li::before{background-color:#2fa86633;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.7 2.7 6-6.3' fill='none' stroke='%235fd394' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Carte papier commune (liseré corail + bandeau pétrole) */
.sc-card{position:relative;border:1px solid transparent;border-radius:20px;overflow:hidden;color:var(--sc-petrole);
  background:linear-gradient(var(--sc-papier),var(--sc-papier)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 30px 70px -28px #000000a6,0 10px 24px -12px #0000004d}
.sc-band{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px 22px 18px;background:var(--sc-petrole);color:#eef3f3;font-size:14.5px;line-height:1.5;font-weight:500}
.sc-band svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:#ff8b7e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 2. De la recherche à l'appel : 4 cartes ---------- */
@media(min-width:1100px){
  .b2-modules{top:21.5% !important;gap:1.25cqw !important}
  .b2-module{min-height:8.1cqw !important;padding:1.05cqw .8cqw .95cqw 1.04cqw !important}
  .b2-module-copy h3{margin:.1cqw 0 .45cqw !important}
  .b2-module-copy p{font-size:.9cqw !important;line-height:1.5 !important}
  .b2-module-map{height:6.3cqw !important}
  .b2-module-preview>.b2-photo{height:3.3cqw !important}
  .b2-module-actions{height:4.4cqw !important}
}
.b2-module-tags{display:flex;flex-wrap:wrap;gap:.4cqw;align-content:flex-start;padding-top:.2cqw}
.b2-module-tags span{font-size:.7cqw;line-height:1.2;padding:.32cqw .6cqw;border-radius:999px;background:#293b44;color:#e6ecea;border:1px solid #ffffff1f;white-space:nowrap}
@media(max-width:1099px){.b2-module-tags{gap:6px;max-width:180px}.b2-module-tags span{font-size:12px;padding:4px 9px}}
@media(max-width:600px){.b2-module-tags{grid-column:2}}

/* ---------- 3. Savoir-faire : coches vertes + téléphone = fiche Google ---------- */
.craft-copy .craft-list.sc-checks li{padding:5px 0 5px 30px !important;font-size:clamp(15px,1.05vw,16.5px) !important}
.craft-copy .craft-list.sc-checks li::before{left:0 !important;top:calc(5px + .12em) !important;width:20px !important;height:20px !important;min-width:0 !important;min-height:0 !important;border-radius:50% !important;
  background:#2fa8661f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.7 2.7 6-6.3' fill='none' stroke='%232fa866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat !important}
@media(min-width:701px){.craft-copy{top:19%!important}.craft-copy .craft-list{max-width:35cqw !important}}
.craft-phone-screen{font-family:var(--f-texte,Arial,sans-serif)}
.craft-phone-nav .cp-g{width:auto !important;font:600 1.1cqw/1 var(--f-texte,Arial,sans-serif);letter-spacing:-.01em;color:#4b5c5f}
.craft-phone-hero h3{font-family:var(--f-titre,Arial,sans-serif) !important;font-weight:700 !important;font-size:1.45cqw !important;margin-bottom:.35cqw !important}
.craft-phone-hero .cp-meta{margin:0 0 .8cqw;font-size:.72cqw;line-height:1.2;color:#f4e6cf}
.craft-phone-hero .cp-meta span{color:#ffc54d;letter-spacing:.02em}
.craft-phone-button{width:auto !important;justify-content:flex-start !important;gap:.5cqw;font-family:var(--f-texte,Arial,sans-serif) !important;font-weight:600}
.craft-phone-caption{font-family:var(--f-texte,Arial,sans-serif);font-weight:600;font-size:.9cqw !important}
@media(max-width:700px){
  .craft-phone-nav .cp-g{font-size:2.2cqw}
  .craft-phone-hero h3{font-size:2.9cqw !important;margin-bottom:.8cqw !important}
  .craft-phone-hero .cp-meta{font-size:1.5cqw;margin-bottom:1.6cqw}
  .craft-phone-caption{font-size:1.9cqw !important}
}
@media(min-width:1100px){.b2-module{grid-template-columns:3.45cqw 1fr 8.7cqw !important}.b2-module-copy h3{font-size:clamp(17px,1.25vw,19px) !important;white-space:nowrap !important}}

/* ---------- 4. Diagnostic local : plus rien de coupé, carte papier, couleurs du diagnostic ---------- */
.local-radar{margin-bottom:0 !important}
.radar-copy .radar-intro br{display:none}
@media(min-width:1300px){.radar-copy .radar-intro{max-width:31cqw}}
.radar-footer{display:none !important}
/* points de la carte = couleurs du diagnostic */
.radar-dot-strong .radar-dot-halo{fill:#3fbf7f !important;stroke:#7fe0ad !important}
.radar-dot-strong .radar-dot-core{fill:#3fbf7f !important;stroke:#9fe8c2 !important}
.radar-dot-muted .radar-dot-halo,.radar-dot-soft .radar-dot-halo{fill:#f0a040 !important;stroke:#f6c17a !important}
.radar-dot-muted .radar-dot-core,.radar-dot-soft .radar-dot-core{fill:#f0a040 !important;stroke:#f8cf94 !important}
.radar-dot-muted:nth-child(2){opacity:1 !important}
.radar-key-strong{background:#3fbf7f !important}
.radar-key-muted{background:#f0a040 !important}
.radar-key-competitor{background:#7d898e !important}
.radar-legend{height:auto !important;width:auto !important;min-width:14.06%}
.radar-legend li{font-family:var(--f-texte,Arial,sans-serif)}
/* le bilan : carte papier */
.radar-report.sc-card{height:auto !important;padding:0 !important;border-radius:18px !important;font-family:var(--f-texte,Arial,sans-serif)}
.radar-report.sc-card h3{margin:0 !important;padding:20px 22px 8px;font:700 19px/1.2 var(--f-titre,Arial,sans-serif) !important;letter-spacing:-.015em;color:var(--sc-petrole)}
.radar-report .rr-list{display:block !important;list-style:none;margin:0;padding:2px 10px 12px}
.radar-report .rr-list li{--c:var(--sc-vert);position:relative;display:flex !important;justify-content:space-between;align-items:flex-start !important;gap:12px !important;padding:10px 12px 10px 26px;border-radius:12px;white-space:normal !important;font-size:inherit !important;line-height:1.3 !important}
.radar-report .rr-list li::before{content:"";position:absolute;left:10px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--c)}
.radar-report .rr-list li+li{box-shadow:0 -1px 0 #16393e14}
.radar-report .rr-list .rr-o{--c:var(--sc-orange)}
.radar-report .rr-list .rr-r{--c:var(--sc-rouge);background:linear-gradient(90deg,#fde3df,#fdeeeb 70%,#fdeeeb00);box-shadow:none}
.radar-report .rr-k{margin:0;font-size:15.5px;font-weight:650;color:var(--sc-petrole)}
.radar-report .rr-why{margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--sc-texte)}
.radar-report .rr-s{flex:none;margin-top:1px;font-size:13px;font-weight:650;text-align:right;max-width:104px;line-height:1.3;color:color-mix(in srgb,var(--c) 72%,#16393e)}
.radar-report .sc-band{font-size:13.5px;padding:14px 20px 16px}
.radar-report .illus-tag{top:10px;right:10px;bottom:auto}
@media(min-width:1300px){.radar-report.sc-card{top:13%;width:29%}}

/* Tablette, téléphone et petits ordinateurs : tout s'empile, rien ne déborde */
@media(max-width:1299px){
  .local-radar::before{display:none}
  .radar-board{height:auto !important;display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(96px,14vw,140px) 6% 64px}
  .radar-copy{position:relative !important;left:auto !important;top:auto !important;right:auto !important;width:auto !important;max-width:620px;grid-row:1}
  .radar-copy h2{font-size:clamp(34px,6.4vw,52px) !important;line-height:1.05 !important;letter-spacing:-.02em !important}
  .radar-scene,.radar-thread{--w:115vw;position:relative !important;grid-row:2;grid-column:1;top:auto !important;right:auto !important;bottom:auto !important;width:var(--w) !important;height:calc(var(--w) * 1024 / 1536) !important;left:calc(44vw - var(--w) * .591) !important;margin-top:12px}
  .radar-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/block-four-backdrop.webp') center/100% 100% no-repeat;
    -webkit-mask-image:radial-gradient(ellipse 46% 40% at 59% 54%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 46% 40% at 59% 54%,#000 55%,transparent 100%)}
  .radar-legend{position:relative !important;left:auto !important;top:auto !important;grid-row:3;justify-self:start;margin-top:8px;min-width:0;padding:14px 18px !important;border-radius:14px !important;gap:8px !important}
  .radar-legend li{font-size:13px !important;gap:10px !important}
  .radar-legend .radar-key{width:10px !important;height:10px !important}
  .radar-legend-pin{width:13px !important;height:19px !important}
  .radar-report.sc-card{position:relative !important;left:auto !important;top:auto !important;width:100% !important;max-width:460px;grid-row:4;margin-top:20px}
  .radar-place{font-size:13px !important;padding:4px 8px !important}
  .radar-establishment-label{font-size:13.5px !important;padding:5px 9px 5px 12px !important;border-radius:6px !important}
  .radar-main-pin{width:26px !important;height:37px !important}
}
@media(min-width:701px) and (max-width:1299px){
  .radar-board{grid-template-columns:auto minmax(0,1fr);column-gap:24px}
  .radar-copy,.radar-scene,.radar-thread{grid-column:1 / -1 !important}
  .radar-scene,.radar-thread{--w:100vw;left:calc(50vw - 6vw - var(--w) * .591) !important}
  .radar-legend{grid-row:3;grid-column:1;align-self:start;margin-top:20px}
  .radar-report.sc-card{grid-row:3;grid-column:2}
}
@media(max-width:700px){
  .radar-scene,.radar-thread{--w:175vw}
  .radar-thread path{d:path("M936-2C960 33 992 90 987 143C982 195 955 225 929 272C898 326 884 393 903 462")}
  .radar-board{padding:88px 22px 56px}
}

/* ---------- 5. Mise à niveau : coches vertes, garantie dans un bandeau pétrole ---------- */
.upgrade-copy .upgrade-list{margin:16px 0 0;max-width:470px}
.upgrade-copy .upgrade-list li{font-size:clamp(15px,1.05vw,16.5px);line-height:1.45;color:var(--c-titre,#16393e)}
.upgrade-copy .offer-launch{margin-left:.7em;font:600 15px/1 var(--f-texte,Arial,sans-serif);letter-spacing:0;color:#c8433a;vertical-align:middle}
.upgrade-copy .offer-band{margin:16px 0 0;max-width:470px;border-radius:12px;font-size:14px;padding:13px 18px 14px}
.upgrade-copy .offer-band svg{stroke:#7fe0ad}
@media(min-width:1001px){
  .solis-upgrade{height:auto !important;min-height:calc(1060 * var(--u));padding-bottom:calc(150 * var(--u))}
  .solis-upgrade .upgrade-copy{position:relative !important;top:auto !important;margin-top:calc(80 * var(--u))}
  .solis-upgrade .offer-price{margin-top:calc(18 * var(--u)) !important}
}

/* ---------- 6. Suivi : toutes les phrases visibles, un seul passage du signal ---------- */
.solis-motion-ready #suivi-solis .care-event{opacity:1 !important}
.care-event-5 h3{font-size:clamp(20px,1.75vw,26px) !important}
.care-event-5 p{font-size:clamp(16px,1.3vw,19px) !important;font-weight:600 !important;max-width:30em}
@media(max-width:1000px){.care-event-5 h3{font-size:22px !important}.care-event-5 p{font-size:17px !important}}

/* ---------- 9. Votre prochain pas : image sans anciens textes ---------- */
.conclusion-description{max-width:30em}

/* ---------- Dans les IA (validé) : corrections techniques seulement ---------- */
/* téléphone : la carte « Ce que l'IA attend » n'est plus poussée hors du bloc */
@media(max-width:900px){.solis-ai .ai-card{top:auto !important}}
/* pas d'animation en boucle : le curseur clignote 3 fois puis reste affiché */
.aip-list .you b::after,.ai-caret{animation-iteration-count:3 !important}
.solis-ai .ai-dots b{animation-iteration-count:3 !important}

/* ---------- 9. Votre prochain pas, téléphone : Kenai sous le texte, plus derrière ---------- */
@media(max-width:560px){
  .presence-conclusion{padding-bottom:250px !important}
  .conclusion-kenai{top:auto !important;bottom:0 !important;height:240px !important;aspect-ratio:auto !important;object-fit:cover !important;object-position:74% 62% !important;transform:none !important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%) !important;mask-image:linear-gradient(180deg,transparent 0,#000 30%) !important}
}
@media(min-width:1001px){#suivi-solis .care-event p{max-width:30em}}
.radar-report.sc-card h3{padding-right:120px !important}

/* =====================================================================
   Échelle de texte v3 (17/10, 14 h 30) : pensée pour des lecteurs de 40 ans et plus.
   VERROUILLÉE le 17/10 par Christel : ne plus réduire ces tailles, à reprendre telles quelles dans le vrai site.
   Texte courant 20 px sur ordinateur, 18 px sur téléphone ; rien sous 16 px.
   Remplace les tailles de typo.css (mêmes sélecteurs, chargé après).
   ===================================================================== */
/* Titres de section */
section:not(#accueil) h2{font-size:clamp(34px,4.15vw,64px) !important;line-height:1.05 !important;letter-spacing:-.03em !important}
/* Intertitres */
.b2-module-copy h3,.care-event h3,.method-step h3,.step h3,.why-col-t,#comment-ca-marche .mx-step h3{font-size:clamp(20px,1.75vw,25px) !important;line-height:1.22 !important}
/* Phrase d'introduction */
.b2-reflex,.craft-copy > p:first-of-type,.radar-intro,.ai-lead,.upgrade-lead,.care-lead{font-size:clamp(20px,1.8vw,25px) !important;line-height:1.45 !important}
/* Texte courant */
.b2-description,.b2-statement,.b2-support,.craft-extra,.craft-note,.radar-conclusion,.ai-text,.ai-punch,.upgrade-description,.conclusion-description,.faq-answer p,.method-intro,.method-step p,#comment-ca-marche .mx-step p,#comment-ca-marche .method-foot p,.why-head p,.care-event p,.why-person p,.why-last,.method-foot p{font-size:clamp(18px,1.42vw,21px) !important;line-height:1.55 !important}
.care-event-5 p{font-size:clamp(18px,1.42vw,21px) !important;font-weight:600 !important}
.care-event-5 h3{font-size:clamp(22px,1.95vw,28px) !important}
/* Listes à coches */
.craft-copy .craft-list.sc-checks li,.upgrade-copy .upgrade-list li{font-size:clamp(18px,1.36vw,20px) !important;line-height:1.45 !important}
.sc-checks li{padding-left:34px}
.sc-checks li::before,.craft-copy .craft-list.sc-checks li::before{width:24px !important;height:24px !important;background-size:16px !important}
/* Petits titres au-dessus des titres */
.b2-eyebrow,.radar-eyebrow,.ia-kicker,.offer-kicker,.phase-three-kicker,.faq-kicker,.method-label,#comment-ca-marche .method-label{font-size:17px !important}
/* Haut de page */
.hero .eyebrow{font-size:16.5px !important}
.hero .hero-description{font-size:clamp(19px,1.75vw,25px) !important}
.hero .hero-ai{font-size:17.5px !important}
/* Petits textes : jamais sous 16 px */
.hero .microcopy,.offer-reassurance,.conclusion-micro,#suivi-solis .care-copy .offer-reassurance,#dans-les-ia .ai-cta-note,#dans-les-ia .ai-caption{font-size:17px !important;line-height:1.5 !important}
.upgrade-copy .offer-band,.radar-report .sc-band{font-size:17px !important}
.radar-report .rr-k{font-size:18px}
.radar-report .rr-why,.radar-report .rr-s{font-size:16px}
.radar-report.sc-card h3{font-size:21px !important}
.radar-legend li{font-size:15.5px !important}
#comment-ca-marche .mx-k{font-size:19px}
#comment-ca-marche .mx-why,#comment-ca-marche .mx-status,#comment-ca-marche .mx-card-sub,#comment-ca-marche .mx-ends{font-size:16px}
#comment-ca-marche .mx-card-q{font-size:17px}
#comment-ca-marche .mx-card-foot p{font-size:17px}
#comment-ca-marche .mx-step p.mx-fact{font-size:17px !important}
.b2-module-copy p{font-size:clamp(16px,1.15vw,17.5px) !important;line-height:1.45 !important}
.b2-module-tags span{font-size:13.5px}
.why-col li{font-size:clamp(18px,1.42vw,21px) !important}
.why-col-f{font-size:17px !important}
.faq-items summary{font-size:clamp(18px,1.42vw,21px) !important}
.solis-footer-legal a,.solis-footer-brand p,.solis-footer-copyright{font-size:16px !important}
@media(max-width:700px){
  section:not(#accueil) h2{font-size:clamp(32px,9.2vw,38px) !important}
  .b2-module-copy h3,.care-event h3{font-size:21px !important}
}
/* -- ajustements pour que le texte plus grand tienne partout -- */
.b2-wide-break{display:none !important}
.b2-copy .b2-reflex{margin-bottom:12px !important}
.b2-copy .b2-description{margin-bottom:16px !important}
@media(min-width:1100px) and (max-width:1439px){
  .b2-module{grid-template-columns:3.45cqw 1fr !important}
  .b2-module-map,.b2-module-tags,.b2-module-actions,.b2-module-preview{display:none !important}
  .b2-module{min-height:0 !important}
  .b2-copy h2{font-size:clamp(32px,3.3vw,48px) !important}
  #accueil .hero-copy{top:15% !important}
  .google-presence{margin-top:-7.5% !important}
}
@media(min-width:701px){.craft-copy{top:16% !important}}
#suivi-solis .care-event{max-width:37cqw}
@media(min-width:1001px){#suivi-solis .care-event-5{top:73.5%}}
@media(max-width:1000px){#suivi-solis .care-event{max-width:none}}
@media(min-width:1200px) and (max-width:1299px){
  .craft-copy{top:11.5% !important}
  .craft-copy h2{margin-bottom:12px !important}
  .craft-copy .craft-list{margin-top:10px !important}
  .craft-copy .craft-list.sc-checks li{padding-top:3px !important;padding-bottom:3px !important}
  .craft-copy .craft-rule{margin-top:14px !important}
  .craft-copy .craft-note{max-width:38cqw !important;margin-top:12px !important}
  .google-presence{margin-top:-6% !important}
}

/* Savoir-faire, téléphone : le texte suit son cours, les images se placent dessous (plus de chevauchement) */
@media(max-width:700px){
  .craft-board{height:auto !important;padding:27cqw 6% 150cqw}
  .craft-copy{position:relative !important;left:auto !important;top:auto !important;width:auto !important}
  .craft-artisan{top:auto !important;bottom:72.6cqw !important;height:69.5cqw !important}
  .craft-phone{top:auto !important;bottom:52.8cqw !important;height:75.6cqw !important}
  .craft-review{top:auto !important;bottom:75.6cqw !important}
  .craft-thread-mobile{top:auto !important;bottom:0 !important;height:150cqw !important}
}
/* Savoir-faire, tablette et petits ordinateurs : le texte en haut, les images dessous (plus rien ne se chevauche) */
@media(min-width:701px) and (max-width:1199px){
  .craft-board{height:auto !important;padding:11cqw 0 64cqw}
  .craft-copy{position:relative !important;top:auto !important;left:5% !important;width:86% !important;max-width:760px}
  .craft-copy .craft-list,.craft-copy .craft-note{max-width:none !important}
  .craft-artisan{top:auto !important;bottom:25cqw !important;height:35cqw !important}
  .craft-phone{top:auto !important;bottom:21cqw !important;height:34cqw !important}
  .craft-review{top:auto !important;bottom:32.5cqw !important;height:auto !important}
  .craft-thread{display:none !important}
}
/* Suivi, petits ordinateurs : les deux dernières phrases ne se chevauchent plus */
@media(min-width:1001px) and (max-width:1199px){
  #suivi-solis .care-event-4{top:62.5%}
  #suivi-solis .care-event-5{top:79.5%}
}

/* ===== v3 : mise en page adaptée au texte plus grand ===== */
/* Pied de page : passe à la ligne au lieu de déborder */
.solis-footer{flex-wrap:wrap !important;row-gap:14px !important}
.solis-footer-legal{flex-wrap:wrap !important;row-gap:8px !important}

/* Haut de page, ordinateur : le texte remonte un peu pour rester au-dessus de la vague */
@media(min-width:1440px){#accueil .hero-copy{top:16.5% !important}#accueil .eyebrow{margin-bottom:16px !important}}
@media(min-width:761px) and (max-width:1099px){#accueil.hero{min-height:780px !important}}

/* Haut de page, téléphone : texte sur toute la largeur, lisible, Kenai visible dessous */
@media(max-width:760px){
  #accueil{height:auto !important;min-height:0 !important;padding:100px 0 330px !important}
  #accueil .hero-scene{background-size:cover !important;background-position:center bottom !important}
  #accueil .hero-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,17,9,.86) 0%,rgba(30,17,9,.8) 48%,rgba(30,17,9,.4) 68%,rgba(30,17,9,0) 82%)}
  #accueil .hero-copy{position:relative !important;top:auto !important;left:auto !important;width:auto !important;margin:0 22px !important}
  #accueil .eyebrow{width:auto !important;white-space:normal !important;font-size:15.5px !important;margin-bottom:14px !important}
  #accueil h1{width:auto !important;font-size:clamp(36px,10.4vw,44px) !important;line-height:1.06 !important;margin-bottom:16px !important}
  #accueil .hero-mobile-break{display:none !important}
  #accueil .hero-description{font-size:19px !important;line-height:1.45 !important;margin-bottom:14px !important}
  #accueil .hero-ai{font-size:16.5px !important;margin-bottom:18px !important}
  #accueil .primary-cta{width:100%;min-height:58px;padding:14px 20px !important;font-size:17.5px !important;box-sizing:border-box;justify-content:space-between}
  #accueil .microcopy{font-size:16px !important;margin-top:12px !important}
  #accueil .hero-presence{display:none !important}
}

/* Diagnostic local, ordinateur : la légende passe en bas à droite, sous la carte « zone par zone » */
@media(min-width:1300px){.radar-legend{left:auto !important;right:3.6% !important;top:auto !important;bottom:9% !important}}

/* Savoir-faire, 1200-1439 px : le texte s'arrête avant l'avis client */
@media(min-width:1200px) and (max-width:1439px){.craft-copy{width:34% !important}.craft-copy .craft-list{max-width:none !important}}

/* Suivi, 1001-1199 px : même présentation empilée que sur tablette */
@media(min-width:1001px) and (max-width:1199px){
  #suivi-solis.solis-care{height:auto !important;padding:70px 6% 90px !important}
  #suivi-solis .care-copy{position:relative !important;top:auto !important;left:auto !important;width:100% !important;max-width:720px}
  #suivi-solis .care-thread{display:none !important}
  #suivi-solis .care-events{position:relative;margin:55px 0 0 12px;padding-left:35px;border-left:1px solid #ff7d68}
  #suivi-solis .care-event{position:relative !important;left:auto !important;top:auto !important;margin-bottom:38px;max-width:none !important}
  #suivi-solis .care-event:before{content:'';position:absolute;left:-42px;top:8px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 5px 5px #ff6c5a55}
  #suivi-solis .care-event:last-child{margin-bottom:0}
}

/* Votre prochain pas, tablette : le bloc s'agrandit avec le texte */
@media(min-width:561px) and (max-width:900px){
  .presence-conclusion{aspect-ratio:auto !important;height:auto !important;min-height:calc(100vw * 454 / 887);padding:60px 6% 60px !important}
  .conclusion-copy{position:relative !important;top:auto !important;left:auto !important;max-width:62%}
}
@media(min-width:1100px) and (max-width:1299px){
  .b2-copy{top:16.5% !important}
  .radar-scene,.radar-thread{--w:80vw !important;left:calc(44vw - var(--w) * .591) !important}
}
/* Savoir-faire, ordinateur : le bloc est un peu plus haut pour que le texte agrandi ne passe plus sous la vague */
@media(min-width:1200px){
  .craft-board{height:78cqw !important}
  .craft-copy{top:14% !important}
}

/* ===== hero-b.css ===== */
/* SOLIS – Haut de page, version B (aperçu du 17/10/2026).
   Chargé uniquement par index-hero-b.html. L'accueil actuel (index.html) n'est pas touché.
   Tailles : règles verrouillées du 17/10 (rien sous 16 px). */

/* ---------- Le bloc ---------- */
html body #accueil.hero-b{position:relative;isolation:isolate;overflow:hidden;color:#fffaf2;background:#1c211f}
html body #accueil.hero-b::before,html body #accueil.hero-b::after{display:none !important}

/* La photo : plus claire, sans voile brun sur la droite, Kenai bien visible */
.hb-scene{position:absolute;inset:0;z-index:-2;background:url('assets/hero-desktop-approved.png') center/cover no-repeat;filter:brightness(1.12) saturate(1.04)}
.hb-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,22,.80) 0%,rgba(14,20,22,.62) 34%,rgba(14,20,22,.16) 58%,rgba(14,20,22,0) 70%)}

/* ---------- Le texte : 4 niveaux seulement ---------- */
.hb-copy{position:relative;z-index:2}
html body #accueil.hero-b .hb-eyebrow{margin:0 0 18px;font:600 17px/1.4 var(--f-texte,Arial,sans-serif);color:#fff1d8;text-transform:none;letter-spacing:0;text-shadow:0 1px 8px rgba(14,20,22,.5)}
html body #accueil.hero-b .hb-title{width:auto;margin:0 0 26px;font-family:var(--f-titre,Arial,sans-serif) !important;font-weight:750;font-size:clamp(46px,4.4vw,76px) !important;line-height:1.04 !important;letter-spacing:-.03em !important;color:#fffaf2;text-shadow:0 2px 24px rgba(14,20,22,.45)}
html body #accueil.hero-b .hb-title span{display:inline;white-space:normal}
html body #accueil.hero-b .hb-lead{max-width:31em;margin:0 0 32px;font:500 clamp(20px,1.55vw,25px)/1.45 var(--f-texte,Arial,sans-serif);color:#fff6ea;text-shadow:0 1px 10px rgba(14,20,22,.5)}
html body #accueil.hero-b .hb-cta{margin:0}
html body #accueil.hero-b .hb-micro{margin:16px 0 0;font:500 17px/1.5 var(--f-texte,Arial,sans-serif);color:#f3e6d6;text-shadow:0 1px 8px rgba(14,20,22,.5)}

/* ---------- La carte « réponse » (papier clair, liseré corail) ---------- */
.hb-answer{margin:0;z-index:2}
.hb-q{margin:0 0 12px;padding:14px 18px;border-radius:18px 18px 18px 4px;background:#16393e;color:#fffaf2;font:600 19px/1.35 var(--f-texte,Arial,sans-serif);box-shadow:0 10px 30px rgba(10,15,17,.3)}
.hb-card{padding:20px 22px 18px;border-radius:18px;border-top:4px solid #ff5f54;background:#fbf7f1;color:#16393e;box-shadow:0 18px 50px rgba(10,15,17,.35)}
.hb-card p{margin:0}
.hb-name{margin-bottom:8px !important;font:700 25px/1.15 var(--f-titre,Arial,sans-serif);font-variation-settings:"opsz" 24;letter-spacing:-.01em}
.hb-rating,.hb-meta,.hb-open{font:500 17px/1.45 var(--f-texte,Arial,sans-serif);color:#4b5c5f}
.hb-rating strong{color:#16393e}
.hb-stars{color:#f0a040;letter-spacing:.04em}
.hb-open{display:flex;align-items:center;gap:8px;margin-top:2px !important;color:#2a8f58;font-weight:600}
.hb-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#2fa866}
.hb-actions{display:flex;gap:10px;margin-top:16px}
.hb-btn{flex:1;padding:11px 12px;border:1.5px solid #c9d3d2;border-radius:999px;text-align:center;font:600 17px/1.2 var(--f-texte,Arial,sans-serif);color:#16393e}
.hb-btn-main{border-color:#16393e;background:#16393e;color:#fffaf2}
.hb-note{margin:10px 4px 0;text-align:right;font:500 16px/1.3 var(--f-texte,Arial,sans-serif);color:#fff1d8;text-shadow:0 1px 8px rgba(14,20,22,.6)}

/* Le bouton du haut n'apparaît qu'une fois la page descendue (il n'est plus en double) */
body:has(#accueil.hero-b) .header:not(.is-docked) .header-cta{display:none !important}

/* ---------- Ordinateur ---------- */
@media(min-width:1100px){
  html body #accueil.hero-b{height:auto !important;min-height:0 !important;aspect-ratio:1672/941;padding:0 !important}
  .hb-copy{position:absolute;left:5.2%;top:15%;width:55%;max-width:820px}
  .hb-answer{position:absolute;right:5.5%;top:16%;width:clamp(330px,24vw,410px)}
}
@media(min-width:1440px){.hb-copy{top:16%}}

/* ---------- Tablette : on garde la photo, la carte s'efface pour laisser respirer ---------- */
@media(min-width:761px) and (max-width:1099px){
  html body #accueil.hero-b{height:auto !important;min-height:780px !important;aspect-ratio:1448/1086;padding:0 !important}
  .hb-scene{background-image:url('assets/hero-tablet-approved.png')}
  .hb-copy{position:absolute;left:5.2%;top:15%;width:64%}
  html body #accueil.hero-b .hb-title{font-size:clamp(40px,5.4vw,54px) !important}
  .hb-answer{display:none}
}

/* ---------- Téléphone : texte, bouton, puis la carte, et Kenai dessous ---------- */
@media(max-width:760px){
  html body #accueil.hero-b{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;padding:96px 0 320px !important}
  .hb-scene{background-image:url('assets/hero-mobile-boutique-kenai.png');background-size:cover;background-position:center bottom}
  .hb-scene::after{background:linear-gradient(180deg,rgba(14,20,22,.84) 0%,rgba(14,20,22,.76) 55%,rgba(14,20,22,.3) 74%,rgba(14,20,22,0) 86%)}
  .hb-copy{margin:0 22px}
  html body #accueil.hero-b .hb-eyebrow{font-size:16px;margin-bottom:14px}
  html body #accueil.hero-b .hb-title{font-size:clamp(36px,10.4vw,44px) !important;line-height:1.06 !important;margin-bottom:16px}
  html body #accueil.hero-b .hb-lead{font-size:20px;margin-bottom:22px}
  html body #accueil.hero-b .hb-micro{font-size:16px}
  .hb-answer{position:relative;margin:30px 22px 0}
  .hb-name{font-size:21px}
}

@media(prefers-reduced-motion:reduce){.hb-scene{transition:none}}

/* ===== hero-c.css ===== */
/* SOLIS – Haut de page, version C (aperçu du 17/10/2026) : photo claire de Kenai en Espagne.
   S'ajoute à hero-b.css. Chargé uniquement par index-hero-c.html.
   Images : kenai-terrasse-espagne-large.jpg (2880 px, image élargie à gauche = « dézoom ») et -mobile.jpg (1400 px).
   Les deux ont le ventre de Kenai retouché (fourrure). */

html body #accueil.hero-c{background:#f6ebe1;color:#16393e}
#accueil.hero-c .hb-scene{background-image:url('assets/kenai-terrasse-espagne-large.jpg');background-position:70% 100%;filter:none}
/* voile clair à gauche pour un texte bien lisible, rien sur Kenai */
#accueil.hero-c .hb-scene::after{background:linear-gradient(90deg,rgba(251,247,241,.62) 0%,rgba(251,247,241,.42) 34%,rgba(251,247,241,.1) 52%,rgba(251,247,241,0) 60%)}

/* Texte en bleu pétrole sur le ciel clair */
html body #accueil.hero-c .hb-eyebrow{color:#c8433a;text-shadow:none}
html body #accueil.hero-c .hb-title{color:#16393e;text-shadow:none}
html body #accueil.hero-c .hb-lead{color:#21454a;text-shadow:none}
html body #accueil.hero-c .hb-micro{color:#3f5559;text-shadow:none}
html body #accueil.hero-c .hb-note{color:#3f5559;text-shadow:0 1px 6px rgba(251,247,241,.9)}

/* En-tête posé sur un fond clair : logo bleu et corail, icône de menu foncée */
body:has(#accueil.hero-c) .header:not(.is-docked) .brand img{content:url('assets/SOLIS_Principal_Transparent_BleuCorail-web.png') !important}
body:has(#accueil.hero-c) .header:not(.is-docked) .header-menu{color:#16393e}
body:has(#accueil.hero-c) .header:not(.is-docked) .header-menu svg{stroke:#16393e}

/* Ordinateur : Kenai entier, au-dessus du bloc suivant */
@media(min-width:1100px){
  html body #accueil.hero-c{aspect-ratio:1.84;min-height:700px !important}
  #accueil.hero-c .hb-copy{top:16%;width:48%}
  html body #accueil.hero-c .hb-title{font-size:clamp(46px,3.9vw,66px) !important}
  html body #accueil.hero-c .hb-lead{max-width:29em}
}

/* Tablette */
@media(min-width:761px) and (max-width:1099px){
  #accueil.hero-c .hb-scene{background-image:url('assets/kenai-terrasse-espagne-large.jpg');background-position:78% 100%}
  #accueil.hero-c .hb-copy{width:54%}
}

/* Téléphone : texte sur fond clair en haut, Kenai en photo dessous */
@media(max-width:760px){
  html body #accueil.hero-c{background:linear-gradient(180deg,#f8efe6 0%,#f4e4d6 100%);padding:96px 0 360px !important}
  #accueil.hero-c .hb-scene{top:auto;height:380px;background-image:url('assets/kenai-terrasse-espagne-mobile.jpg');background-size:cover;background-position:67% 80%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  #accueil.hero-c .hb-scene::after{display:none}
}

/* Les repères au sol s'allument l'un après l'autre (une seule animation, jouée une fois, pas de boucle) */
.hb-pins{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hb-pin{position:absolute;width:0;height:0}
.hb-pin::before{content:"";position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,224,.95) 0%,rgba(255,120,100,.6) 30%,rgba(255,95,84,0) 70%);opacity:0;transform:scale(.3)}
.hb-pin::after{content:"";position:absolute;left:-34px;top:8px;width:68px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,214,190,.8) 0%,rgba(255,95,84,0) 70%);opacity:0}
.hb-pins.is-lit .hb-pin::before{animation:hbPinLight 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .4s) forwards}
.hb-pins.is-lit .hb-pin::after{animation:hbPinGround 1.1s ease-out calc(var(--i) * .4s) forwards}
@keyframes hbPinLight{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.25)}100%{opacity:.7;transform:scale(1)}}
@keyframes hbPinGround{0%{opacity:0}45%{opacity:1}100%{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .hb-pins.is-lit .hb-pin::before,.hb-pins.is-lit .hb-pin::after{animation:none;opacity:.6;transform:none}
}

/* Téléphone et tablette : le logo dessiné par hero-presence.css est clair, on le passe en bleu et corail sur ce fond clair */
@media(max-width:1099px){
  body:has(#accueil.hero-c) .header:not(.is-docked) .brand::before{background-image:url('assets/SOLIS_Principal_Transparent_BleuCorail-web.png') !important}
}

/* ===== Texte réorganisé (17/10, 16 h 30) =====
   Une colonne plus étroite, un rythme régulier : petit titre, titre, promesse, résultat,
   puis le bouton avec sa ligne rassurante à côté (ordinateur) ou dessous (téléphone). */
html body #accueil.hero-c .hb-eyebrow{margin-bottom:20px}
html body #accueil.hero-c .hb-title{margin-bottom:28px}
html body #accueil.hero-c .hb-lead{max-width:24em;margin-bottom:14px;font-weight:500}
html body #accueil.hero-c .hb-result{max-width:26em;margin:0 0 38px;padding-left:16px;border-left:3px solid #ff5f54;
  font:600 clamp(19px,1.35vw,22px)/1.4 var(--f-texte,Arial,sans-serif);color:#16393e}
.hb-action{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
html body #accueil.hero-c .hb-micro{margin:0;font-size:17px;line-height:1.45}
@media(min-width:1100px){
  #accueil.hero-c .hb-copy{top:19%;width:46%}
}
@media(max-width:760px){
  html body #accueil.hero-c .hb-result{font-size:19px;margin-bottom:26px}
  .hb-action{display:block}
  html body #accueil.hero-c .hb-micro{margin-top:14px;font-size:16px}
}

/* ===== Repères au sol : allumage lent et doux, l'un après l'autre, une seule fois ===== */
.hb-pins.is-lit .hb-pin::before{animation:hbPinSlow 2.8s ease-in-out calc(1s + var(--i) * 1.1s) forwards}
.hb-pins.is-lit .hb-pin::after{animation:hbPinGroundSlow 2.8s ease-in-out calc(1s + var(--i) * 1.1s) forwards}
@keyframes hbPinSlow{0%{opacity:0;transform:scale(.6)}100%{opacity:.8;transform:scale(1)}}
@keyframes hbPinGroundSlow{0%{opacity:0}100%{opacity:.6}}
@media(prefers-reduced-motion:reduce){
  .hb-pins.is-lit .hb-pin::before,.hb-pins.is-lit .hb-pin::after{animation:none;opacity:.6;transform:none}
}
/* coupures propres : « plus de réservations » reste groupé, la promesse se coupe après « en français, » */
.hb-nowrap{white-space:nowrap}
html body #accueil.hero-c .hb-lead{max-width:27em}
html body #accueil.hero-c .hb-result{max-width:32em}
@media(max-width:760px){html body #accueil.hero-c .hb-lead .hb-nowrap{white-space:normal}}

/* Haut de page un peu moins haut (17/10, 16 h 35) : Kenai entier dès l'ouverture, sans défiler.
   L'image est calée en bas : on perd un peu de ciel, rien de Kenai. */
@media(min-width:1100px){
  html body #accueil.hero-c{aspect-ratio:1.98}
  #accueil.hero-c .hb-copy{top:17%}
}

/* Repères : rythme ajusté (17/10, 16 h 40) — un peu plus rapide et plus lumineux, toujours une seule fois */
.hb-pins.is-lit .hb-pin::before{animation:hbPinMid 1.6s ease-out calc(.5s + var(--i) * .7s) forwards}
.hb-pins.is-lit .hb-pin::after{animation:hbPinGroundMid 1.6s ease-out calc(.5s + var(--i) * .7s) forwards}
@keyframes hbPinMid{0%{opacity:0;transform:scale(.5)}55%{opacity:1;transform:scale(1.12)}100%{opacity:.9;transform:scale(1)}}
@keyframes hbPinGroundMid{0%{opacity:0}55%{opacity:1}100%{opacity:.7}}
@media(prefers-reduced-motion:reduce){
  .hb-pins.is-lit .hb-pin::before,.hb-pins.is-lit .hb-pin::after{animation:none;opacity:.8;transform:none}
}

/* ===== Finitions du haut de page (18/10, 12 h 30). Sauvegardes : hero-c.avant-finitions.css et index-hero-c.avant-finitions.html =====
   Tailles de texte inchangées. Aucune nouvelle animation (les repères au sol restent la seule).
   1. Le titre se coupe toujours au même endroit : « Sur Google et dans les IA, » puis « soyez la réponse. »
      Sur téléphone : « Sur Google » / « et dans les IA, » / « soyez la réponse. » (plus de « la » seul en bout de ligne). */
html body #accueil.hero-c .hb-title > span:last-child{display:block}
html body #accueil.hero-c .hb-title .hb-keep{white-space:nowrap}

/* 2. Le bouton : texte en gras, pour qu'il se lise aussi bien que le reste (il était en écriture fine, blanc sur corail). */
html body #accueil.hero-c .hb-cta{font-weight:700;letter-spacing:-.01em}

/* 3. Les deux garanties sous le bouton, chacune avec sa coche verte (comme dans le reste de la page). */
html body #accueil.hero-c .hb-checks{display:flex;flex-direction:column;gap:6px}
html body #accueil.hero-c .hb-checks > span{display:flex;align-items:flex-start;gap:10px}
html body #accueil.hero-c .hb-checks svg{flex:none;width:20px;height:20px;margin-top:2px;padding:3px;box-sizing:border-box;border-radius:50%;
  background:#2fa86622;fill:none;stroke:#1f7a49;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Nouvelle image du haut de page (18/10, 12 h 40) : Kenai assis au coucher du soleil, regard doux.
   Fichiers : assets/kenai-coucher-large.jpg (2880 px) et -mobile.jpg (1400 px), tirés de kenai-coucher-original.png.
   Sauvegardes : hero-c.avant-coucher.css, hero-c-pins.avant-coucher.js. Les repères lumineux suivent les repères de la nouvelle image. */
#accueil.hero-c .hb-scene{background-image:url('assets/kenai-coucher-large.jpg');background-position:70% 100%}
@media(min-width:761px) and (max-width:1099px){
  /* Tablette : le bloc est plus large que l'écran (1040 px pour 820 px), Kenai sortait à droite. La photo suit maintenant la largeur de l'écran. */
  #accueil.hero-c .hb-scene{background-image:url('assets/kenai-coucher-large.jpg');background-position:100% 100%;right:auto;width:100vw}
  #accueil.hero-c .hb-copy{width:42%}
}
@media(max-width:760px){
  #accueil.hero-c .hb-scene{background-image:url('assets/kenai-coucher-mobile.jpg');background-position:88% 80%}
}

/* Bouton du haut de page à 17 px sur ordinateur et tablette, comme la ligne sous le bouton (accord du 18/10, 12 h 38). Sauvegarde : hero-c.avant-bouton17.css */
@media(min-width:761px){html body #accueil.hero-c .hb-cta{font-size:17px}}

/* ===== Les chemins des clients jusqu'à Kenai (18/10, 12 h 45) — une seule animation, jouée une fois =====
   1. Chaque repère s'allume et son pin corail apparaît, l'un après l'autre (toutes les 0,55 s).
   2. Juste après, une fine ligne corail suit le plan au sol jusqu'aux pattes de Kenai (1,3 s).
   3. L'empreinte sous Kenai s'éclaire quand la dernière ligne arrive. Ensuite, plus rien ne bouge.
   Sauvegarde : hero-c.avant-chemins.css */
#accueil .hb-pins svg.hb-routes{position:absolute;left:0;top:0;width:100% !important;height:100% !important;max-width:none;overflow:visible;pointer-events:none}
.hb-route{fill:none;stroke:#ff6a5c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.9}
#accueil .hb-route.is-glow{stroke:#ff8a78;stroke-width:7;opacity:.22}
.hb-mark{fill:#ff5f54;fill-rule:evenodd;stroke:#fff6ee;stroke-width:1.2;opacity:0;transform:scale(.4);
  filter:drop-shadow(0 2px 4px rgba(120,40,30,.35))}
.hb-paw{position:absolute;width:0;height:0}
.hb-paw::before{content:"";position:absolute;left:-36px;top:-22px;width:72px;height:44px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,236,220,.95) 0%,rgba(255,120,100,.55) 35%,rgba(255,95,84,0) 72%);opacity:0;transform:scale(.4)}
.hb-pins.is-lit .hb-pin::before{animation:hbPinMid 1.2s ease-out calc(.3s + var(--i) * .55s) forwards}
.hb-pins.is-lit .hb-pin::after{animation:hbPinGroundMid 1.2s ease-out calc(.3s + var(--i) * .55s) forwards}
.hb-pins.is-lit .hb-mark{animation:hbMark .6s cubic-bezier(.2,.9,.3,1.3) calc(.3s + var(--i) * .55s) forwards}
.hb-pins.is-lit .hb-route{animation:hbRoute 1.3s cubic-bezier(.45,0,.25,1) calc(.75s + var(--i) * .55s) forwards}
.hb-pins.is-lit .hb-paw::before{animation:hbPaw 1s ease-out 3.55s forwards}
@keyframes hbMark{to{opacity:1;transform:scale(1)}}
@keyframes hbRoute{to{stroke-dashoffset:0}}
@keyframes hbPaw{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.1)}100%{opacity:.85;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hb-pins.is-lit .hb-route,.hb-pins.is-lit .hb-mark,.hb-pins.is-lit .hb-paw::before{animation:none}
  .hb-route{stroke-dashoffset:0}.hb-mark{opacity:1;transform:none}.hb-paw::before{opacity:.85;transform:none}
}

/* ===== Chemins plus visibles et un peu plus rapides (18/10, 12 h 55). Sauvegarde : hero-c.avant-rythme.css =====
   Tout est joué en 2,7 s environ (au lieu de 4,5 s), toujours une seule fois. Lignes un peu plus marquées. */
#accueil .hb-route{stroke-width:2.4;opacity:1}
#accueil .hb-route.is-glow{stroke-width:9;opacity:.3}
.hb-pins.is-lit .hb-pin::before{animation:hbPinMid .9s ease-out calc(.15s + var(--i) * .4s) forwards}
.hb-pins.is-lit .hb-pin::after{animation:hbPinGroundMid .9s ease-out calc(.15s + var(--i) * .4s) forwards}
.hb-pins.is-lit .hb-mark{animation:hbMark .45s cubic-bezier(.2,.9,.3,1.3) calc(.15s + var(--i) * .4s) forwards}
.hb-pins.is-lit .hb-route{animation:hbRoute 1s cubic-bezier(.45,0,.25,1) calc(.45s + var(--i) * .4s) forwards}
.hb-pins.is-lit .hb-paw::before{animation:hbPaw .8s ease-out 2.5s forwards}

/* ===== Lancement (19/10) : même photo en WebP, 40 % plus légère. Les navigateurs qui ne lisent pas le WebP gardent le JPEG. */
#accueil.hero-c .hb-scene{background-image:url('assets/kenai-coucher-large.jpg');background-image:image-set(url('assets/kenai-coucher-large.webp') type('image/webp'),url('assets/kenai-coucher-large.jpg') type('image/jpeg'))}
@media(max-width:760px){
  #accueil.hero-c .hb-scene{background-image:url('assets/kenai-coucher-mobile.jpg');background-image:image-set(url('assets/kenai-coucher-mobile.webp') type('image/webp'),url('assets/kenai-coucher-mobile.jpg') type('image/jpeg'))}
}

/* ===== bloc2-v2.css ===== */
/* SOLIS – Bloc 2 « De la recherche à l'appel », v2 (17/10/2026, aperçu).
   Cartes sans petites images (les fils font le lien), pastilles dans la fiche,
   fiche simplifiée (sans onglets, un seul concurrent). Tailles de texte verrouillées non modifiées. */
.b2-module{grid-template-columns:3.45cqw 1fr !important;min-height:0 !important}
@media(max-width:1099px){.b2-module{grid-template-columns:53px 1fr !important}}
@media(max-width:600px){.b2-module{grid-template-columns:42px 1fr !important}}
.b2-module-copy h3{white-space:normal !important}
.b2-google{height:auto !important}
.b2-google .illus-tag{font-size:16px !important}
.b2-business-top{align-items:flex-start}
.b2-tags{display:flex;flex-wrap:wrap;gap:.3cqw;margin:.4cqw 0 0}
.b2-tags span{font-size:.8cqw;line-height:1.2;padding:.22cqw .5cqw;border-radius:999px;background:#293b44;color:#e6ecea;border:1px solid #ffffff1f;white-space:nowrap}
@media(min-width:1100px){
  .b2-search{font-size:1.02cqw}
  .b2-business-top strong{font-size:1.1cqw;white-space:normal}
  .b2-business p,.b2-result p{font-size:1.02cqw}
}
@media(max-width:1099px){
  .b2-tags{gap:1.5cqw;margin-top:2cqw}
  .b2-tags span{font-size:3.6cqw;padding:1cqw 2.2cqw}
}

/* v3 (17/10, 17 h) : cartes « papier » claires avec liseré corail (règle du site), en relief sur le fond sombre */
#recherche .b2-module{border:1px solid transparent !important;
  background:linear-gradient(var(--sc-papier,#fbf7f1),var(--sc-papier,#fbf7f1)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%) border-box !important;
  box-shadow:0 18px 40px #00000070,0 3px 8px #00000045 !important;transition:box-shadow .9s ease}
#recherche .b2-module-copy h3{color:var(--sc-petrole,#16393e) !important}
#recherche .b2-module-copy p{color:#4b5c5f !important}
#recherche .b2-module-icon{background:#ffece8 !important;border:1px solid #ffc6bd !important;color:#e5483f !important;transition:background .6s ease,color .6s ease}
#recherche .b2-module-icon svg{stroke:currentColor !important}
/* quand la lumière arrive : la carte s'allume et le reste */
#recherche .b2-module.is-lit{background:linear-gradient(var(--sc-papier,#fbf7f1),var(--sc-papier,#fbf7f1)) padding-box,linear-gradient(145deg,#ff8b7e,#ff8b7e66 50%,#ff8b7e) border-box !important;
  box-shadow:0 18px 40px #00000070,0 0 26px #ff6b5a59 !important}
#recherche .b2-module.is-lit .b2-module-icon{background:#ff6b5a !important;border-color:#ff6b5a !important;color:#fff !important}
/* la partie de la fiche qui correspond s'allume pendant que la lumière suit le fil */
#recherche .b2-map,#recherche .b2-tags,#recherche .b2-rating,#recherche .b2-actions{transition:box-shadow .7s ease;border-radius:.6cqw}
#recherche .b2-google .is-lit{box-shadow:0 0 0 2px #ff8b7e,0 0 18px #ff6b5a80}
@media(prefers-reduced-motion:reduce){#recherche .b2-module,#recherche .b2-module-icon{transition:none}}

/* v4 (17/10, 17 h 10) : fond anthracite neutre (charte corail + anthracite) au lieu du presque noir vert-bleu */
#recherche .b2-google{background:linear-gradient(140deg,#3a4044aa,#1a1d20cc 38%,#2a2f33ce) !important;border-color:#c9cdd08c !important}
#recherche .b2-business{background:#16191ca8 !important}

/* ===== bloc3-v2.css ===== */
/* SOLIS – Bloc 3 « Votre savoir-faire doit se voir », v2 (17/10/2026, aperçu).
   Textes : les 4 coches suivent le chemin du client du bloc 2 (trouver, comprendre, choisir, joindre).
   Tailles de texte verrouillées non modifiées. Téléphone et avis : rien sous 16 px sur ordinateur et tablette.
   Version précédente : bloc3-v2.avant-motion.css */

/* Raccord des fonds : anthracite en haut (comme le bloc 2), ancien fond sombre en bas (comme le bloc 4, tant qu'il n'est pas passé en anthracite) */
/* v4 : le haut du bloc est transparent sur la hauteur où il passe par-dessus le bloc 2 (--b3-pull, calculé par bloc3-v2.js),
   on voit donc le vrai fond du bloc 2, sans ligne de démarcation. Ensuite anthracite, puis l'ancien fond en bas (raccord avec le bloc 4). */
#etre-choisi{background:linear-gradient(#0000 0,#0000 var(--b3-pull,0px),#212528 var(--b3-pull,0px),#212528 100%) !important}
/* v7 (17/10, 18 h) : le bas du bloc passe aussi en anthracite, en même temps que le bloc 4 (plus de raccord bleu-vert). Sauvegarde : bloc3-v2.avant-bloc4.css */

/* Titre : « savoir-faire » et « doit se voir. » ne se coupent plus */
#etre-choisi .sf-nw{white-space:nowrap}

/* Fil corail : plus de points isolés (le fil qui traversait le visage a été retiré de la photo) */
#etre-choisi .craft-nodes,#etre-choisi .craft-node-glow{display:none}

/* Étiquette « Exemple fictif » : 16 px, en bas de l'avis pour ne pas couvrir la date */
#etre-choisi .illus-tag{font-size:16px !important}
#etre-choisi .craft-review .illus-tag{top:auto !important;bottom:10px !important;right:12px !important}

/* Téléphone : plus de petites photos. De haut en bas, dans l'ordre des coches :
   recherche Google · nom + prestations · note · horaires + boutons */
#etre-choisi .craft-phone-hero{height:auto !important;background:#2d251c}
#etre-choisi .craft-phone-hero::after{display:none}
#etre-choisi .cp-body{display:flex;flex-direction:column;color:var(--sc-petrole,#16393e)}
#etre-choisi .cp-label,#etre-choisi .cp-rating,#etre-choisi .cp-open{margin:0}
#etre-choisi .cp-label{font-weight:600;color:#5d6d70}
#etre-choisi .cp-services ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
#etre-choisi .cp-services li{line-height:1.2;border-radius:999px;background:#ebe3d4;color:var(--sc-petrole,#16393e)}
#etre-choisi .cp-rating{font-weight:600}
#etre-choisi .cp-rating span{color:#e09a00;letter-spacing:.02em}
#etre-choisi .cp-open{color:#3d4b4e}
#etre-choisi .cp-open span{color:#188038;font-weight:600}
#etre-choisi .cp-actions{display:flex;flex-wrap:wrap}
#etre-choisi .cp-actions .craft-phone-button{background:var(--sc-petrole,#16393e);color:#fff}
#etre-choisi .cp-actions .cp-alt{background:transparent;color:var(--sc-petrole,#16393e);border:1px solid #16393e55}

@media(min-width:701px){
  #etre-choisi .craft-review{height:auto !important;padding-bottom:48px !important}
  #etre-choisi .craft-review blockquote{font-size:max(16px,1.04cqw) !important}
  #etre-choisi .craft-date{font-size:16px !important}
  #etre-choisi .craft-phone-hero{padding:max(14px,1.2cqw) max(12px,.95cqw) !important}
  #etre-choisi .craft-phone-hero h3{font-size:max(18px,1.45cqw) !important;line-height:1.1 !important}
  #etre-choisi .craft-phone-hero .cp-meta{margin:.3cqw 0 0;font-size:max(16px,1.04cqw)}
  #etre-choisi .cp-body{padding:max(12px,.9cqw);gap:max(12px,.85cqw)}
  #etre-choisi .cp-label,#etre-choisi .cp-rating,#etre-choisi .cp-open{font-size:max(16px,1.04cqw);line-height:1.25}
  #etre-choisi .cp-label{margin-bottom:6px}
  #etre-choisi .cp-services ul{gap:6px}
  #etre-choisi .cp-services li{font-size:max(16px,1.04cqw);padding:5px 10px}
  #etre-choisi .cp-actions{gap:6px}
  #etre-choisi .cp-actions .craft-phone-button{font-size:max(16px,1.04cqw) !important;padding:6px 10px !important;gap:6px !important}
  #etre-choisi .cp-actions .craft-phone-button svg{width:16px;height:16px;flex:none}
}
/* Tablette : le téléphone grandit avec son contenu (les boutons ne sont jamais coupés) */

/* Petit écran : mêmes proportions que l'ancienne maquette */
@media(max-width:700px){
  #etre-choisi .cp-body{padding:2cqw;gap:1.6cqw}
  #etre-choisi .cp-label,#etre-choisi .cp-rating,#etre-choisi .cp-open{font-size:1.6cqw;line-height:1.2}
  #etre-choisi .cp-label{margin-bottom:.8cqw}
  #etre-choisi .cp-services ul{gap:.8cqw}
  #etre-choisi .cp-services li{font-size:1.5cqw;padding:.7cqw 1.5cqw}
  #etre-choisi .cp-actions{gap:1cqw}
  #etre-choisi .cp-actions .craft-phone-button{font-size:1.4cqw;padding:1.2cqw 1.4cqw}
}

/* Animation (une seule, jouée une fois) : chaque coche passe du gris au vert quand la lumière atteint la partie de la fiche qui lui correspond */
#etre-choisi .craft-list li::before{transition:filter .5s ease,opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
#etre-choisi .craft-list li.sf-wait::before{filter:grayscale(1);opacity:.35;transform:scale(.8)}
#etre-choisi .craft-list li.sf-on::before{animation:sf-pop .6s cubic-bezier(.22,1,.36,1)}
@keyframes sf-pop{0%{transform:scale(.8)}45%{transform:scale(1.25);box-shadow:0 0 0 6px #2fa86633}100%{transform:scale(1)}}
#etre-choisi .craft-phone-nav,#etre-choisi .cp-services,#etre-choisi .cp-choose,#etre-choisi .cp-actions,#etre-choisi .craft-review{transition:box-shadow .6s ease}
#etre-choisi .cp-services,#etre-choisi .cp-choose,#etre-choisi .cp-actions{border-radius:10px}
#etre-choisi .sf-lit{box-shadow:0 0 0 2px #ff8b7e,0 0 18px #ff6b5a80}
#etre-choisi .craft-review.sf-lit{box-shadow:0 0 0 2px #ff8b7e,0 0 26px #ff6b5a73,0 1.1cqw 3cqw #58301930}
/* À la fin, « Appeler » reste allumé en corail */
#etre-choisi .cp-actions.sf-lit{box-shadow:none}
#etre-choisi .cp-actions.sf-lit .craft-phone-button:first-child{background:#ff6b5a;box-shadow:0 0 16px #ff6b5a80;transition:background .5s ease,box-shadow .5s ease}
@media(prefers-reduced-motion:reduce){#etre-choisi .craft-list li::before{transition:none;animation:none !important}}

/* v3 (17/10, 17 h 30) : des photos dans le téléphone, mais de vraies photos de fiche.
   Couverture en haut + 3 photos sous la note (vous choisir). Recadrées dans la photo de l'artisan,
   éclaircies et rendues plus nettes, sans rien changer à ce qu'elles montrent. */
#etre-choisi .craft-phone-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
#etre-choisi .cp-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#etre-choisi .craft-phone-hero::after{display:block !important;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0000 25%,#140e0bd9)}
#etre-choisi .cp-photos{display:grid;grid-template-columns:repeat(3,1fr)}
#etre-choisi .cp-photos img{display:block;width:100%;object-fit:cover;border-radius:6px}
@media(min-width:701px){
  #etre-choisi .craft-phone-hero{min-height:max(120px,9cqw);padding-top:max(40px,3cqw) !important}
  #etre-choisi .cp-choose{display:flex;flex-direction:column;gap:8px}
  #etre-choisi .cp-photos{gap:5px}
  #etre-choisi .cp-photos img{height:max(48px,3.6cqw)}
  /* le téléphone grandit avec son contenu : les boutons ne sont jamais coupés */
  #etre-choisi .craft-phone{display:flex;flex-direction:column;height:auto !important;min-height:34cqw}
  #etre-choisi .craft-phone-screen{height:auto !important;flex:1}
}
@media(min-width:1200px){#etre-choisi .craft-phone{min-height:55.86%}}
@media(max-width:700px){
  #etre-choisi .craft-phone-hero{min-height:20cqw;padding-top:6cqw !important}
  #etre-choisi .cp-choose{display:flex;flex-direction:column;gap:1cqw}
  #etre-choisi .cp-photos{gap:.8cqw}
  #etre-choisi .cp-photos img{height:8cqw;border-radius:1cqw}
}


/* v6 (17/10, 17 h 40) : vraies photos de menuiserie (Gemini, planche dans assets/photos-menuiserie).
   Couverture : l'atelier. Sous la note : cuisine, escalier, porte, dans l'ordre des prestations.
   Les photos sont plus grandes pour remplir le téléphone (le savoir-faire se voit). */
@media(min-width:701px){#etre-choisi .cp-photos img{height:max(64px,7cqw)}}
@media(max-width:700px){#etre-choisi .cp-photos img{height:10cqw}}

/* ===== bloc4-v2.css ===== */
/* SOLIS – Bloc 4 « Voyez où vous pouvez gagner du terrain », v2 (17/10/2026, aperçu).
   Chapitre « Et vous, où en êtes-vous ? » : le lecteur passe de l'histoire générale à sa propre situation.
   Fond anthracite neutre comme le bloc 2 (charte corail + anthracite), cartes et étiquettes sans teinte bleu-vert.
   Tailles de texte verrouillées non modifiées ; tout ce qui était sous 16 px remonte à 16 px.
   Sauvegardes : index-hero-c.avant-bloc4.html, bloc3-v2.avant-bloc4.css */

/* 1. Fond : même anthracite que le bloc 2 ; la carte de fond passe en gris neutre, à la même luminosité */
#position-locale{background:#212528 !important}
#position-locale::before,#position-locale .radar-scene::before{filter:grayscale(1) brightness(1.35) contrast(1.05)}

/* 2. Texte : une phrase d'accroche, une phrase « ce que fait le diagnostic », une phrase forte */
#position-locale .radar-detail{margin-top:1.1em !important}
#position-locale .radar-punch{font-weight:700 !important;color:#faf7f2}
@media(min-width:1300px){#position-locale .radar-detail,#position-locale .radar-punch{max-width:31cqw}}

/* 3. Légende, quartiers, étiquette « Votre entreprise » : anthracite neutre au lieu du bleu-vert */
#position-locale .radar-legend{background:linear-gradient(130deg,#2e3337e6,#1a1d20e6) !important;border-color:#c9cdd04d !important}
#position-locale .radar-place{background:#1a1d20b3 !important;color:#c3c8cb !important}
#position-locale .radar-establishment-label{background:#1d2023ee !important;border-color:#c9cdd059 !important}
#position-locale .radar-dot-competitor .radar-dot-core{fill:#868c90 !important;stroke:#b4b9bc !important}
#position-locale .radar-key-competitor{background:#868c90 !important}

/* 4. Rien sous 16 px (ordinateur, tablette, téléphone) */
#position-locale .radar-legend li{font-size:16px !important}
#position-locale .radar-place{font-size:max(16px,.98cqw) !important}
#position-locale .radar-establishment-label{font-size:max(16px,.85cqw) !important}
@media(max-width:1299px){
  #position-locale .radar-place{font-size:16px !important;padding:4px 9px !important}
  #position-locale .radar-establishment-label{font-size:16px !important}
}

/* v2 (17/10, 18 h) d'après les captures :
   - la carte « zone par zone » descend : son haut était caché sous le bas du bloc 3 (qui recouvre le haut du bloc 4) ;
   - les bandes sur les côtés des grands écrans (plus de 1672 px) passent du bleu-noir à l'anthracite. */
@media(min-width:1300px){#position-locale .radar-report.sc-card{top:16.5% !important}}
body{background:#212528}

/* v4 (17/10, 18 h 10) : carte « Votre entreprise, zone par zone » plus premium.
   Même contenu, même charte (papier clair, liseré corail, bandeau pétrole). Ce qui change :
   - chaque ligne : le lieu à gauche, la couleur dans une pastille à droite, l'explication en dessous sur toute la largeur ;
   - la pastille rouge est pleine (c'est la ligne qui compte), plus de fond rose dégradé ;
   - « Exemple fictif » passe en 16 px, en pastille douce au-dessus du titre (elle faisait 11 px et serrait le titre) ;
   - plus d'air, filets fins entre les lignes, ombre plus douce ; la carte garde sa place d'origine à droite. */
#position-locale .radar-report.sc-card{box-shadow:0 1px 0 #fff inset,0 28px 64px -26px #000000b3,0 4px 12px -6px #00000040 !important}
#position-locale .radar-report .illus-tag{position:static !important;display:inline-block;margin:22px 24px 0;padding:3px 11px;border-radius:999px;
  background:#16393e0d;border:1px solid #16393e1f;color:var(--sc-texte);font:500 16px/1.4 var(--f-texte,Arial,sans-serif) !important}
#position-locale .radar-report.sc-card h3{padding:12px 24px 10px !important}
#position-locale .radar-report .rr-list{padding:0 24px 10px !important}
#position-locale .radar-report .rr-list li{display:grid !important;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:4px;align-items:center !important;
  padding:16px 0 16px 22px !important;border-radius:0 !important;background:none !important;box-shadow:0 -1px 0 #16393e17 !important}
#position-locale .radar-report .rr-list li::before{left:2px !important;top:25px !important;width:8px !important;height:8px !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
#position-locale .radar-report .rr-list li>div{display:contents}
#position-locale .radar-report .rr-k{grid-column:1;grid-row:1;font-size:18px !important;line-height:1.25}
#position-locale .radar-report .rr-why{grid-column:1 / -1;grid-row:2;margin:0 !important;font-size:16px !important;line-height:1.4}
#position-locale .radar-report .rr-s{grid-column:2;grid-row:1;margin:0 !important;max-width:none !important;white-space:nowrap;text-align:center;
  padding:4px 12px;border-radius:999px;font-size:16px !important;line-height:1.3;font-weight:650;
  background:color-mix(in srgb,var(--c) 13%,#fff);color:color-mix(in srgb,var(--c) 72%,#16393e) !important}
#position-locale .radar-report .rr-list .rr-r .rr-s{background:var(--sc-rouge);color:#fff !important}
#position-locale .radar-report .sc-band{padding:18px 24px 20px !important}
/* téléphone : la pastille passe sous l'explication, pour ne pas écraser le nom du lieu */
@media(max-width:560px){
  #position-locale .radar-report .rr-list li{grid-template-columns:minmax(0,1fr)}
  #position-locale .radar-report .rr-s{grid-column:1;grid-row:3;justify-self:start;margin-top:6px !important}
}

/* v6 bis (17/10, 18 h 30) : la carte blanche « zone par zone » en verre dépoli (demande de Christel).
   On devine la carte de rues derrière, floutée ; le texte reste parfaitement lisible.
   Le liseré corail est redessiné à part (sinon il teinterait tout le fond devenu transparent). */
#position-locale .radar-report.sc-card{background:#fbf7f1b8 padding-box !important;border:1px solid transparent !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
#position-locale .radar-report.sc-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#position-locale .radar-report .sc-band{background:#16393ee6 !important}
#position-locale .radar-report .rr-list li{box-shadow:0 -1px 0 #16393e21 !important}

/* v8 (17/10, 18 h 45) : raccord bloc 3 / bloc 4 sans aucune bande.
   Ordinateur (1300 px et plus) : bloc4-v2.js mesure le bas de la vague claire du bloc 3 et remonte le bloc 4 exactement jusque-là.
   Le bloc 3 reste par-dessus, son fond anthracite s'arrête sous la vague (--b3-fade) : sous la vague, on voit directement le bloc 4.
   L'image de fond du bloc 4 est décalée vers le haut pour cacher sa bande crème, et la carte de rues apparaît en fondu dès la vague. */
@media(min-width:1300px){
  #etre-choisi{background:linear-gradient(#0000 0,#0000 var(--b3-pull,0px),#212528 var(--b3-pull,0px),#212528 var(--b3-fade,100%),#0000 var(--b3-fade,100%)) !important}
  #position-locale::before{top:-13% !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#00000040 18%,#000 32%) !important;
    mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#00000040 18%,#000 32%) !important}
  /* la vague descend plus bas à droite : la carte « zone par zone » descend un peu pour ne jamais passer dessous */
  #position-locale .radar-report.sc-card{top:21% !important}
  /* le fil corail du bloc 4 commence sous la vague (plus de point lumineux posé sur la vague) */
  #position-locale .radar-thread-top{display:none}
}

/* v9 (17/10, 18 h 55) : carte « zone par zone », version graphiste.
   Idée : chaque ligne porte un petit « signal » de 3 barres, comme la réception d'un téléphone,
   dans le prolongement du radar : 3 barres vertes = au point, 2 oranges = à revoir, 1 rouge = vous coûte des clients.
   Ce n'est pas une note : c'est la couleur du diagnostic, rendue lisible d'un coup d'œil.
   Plus de pastilles ni de points : le mot de la couleur est écrit simplement, dans sa couleur, à droite.
   En-tête plus calme : « Exemple fictif » en texte discret, titre plus présent. Verre dépoli et liseré corail gardés. */
#position-locale .radar-report.sc-card{border-radius:22px !important}
#position-locale .radar-report .illus-tag{background:none !important;border:0 !important;padding:0 !important;margin:24px 26px 0 !important;
  color:#5d6d70 !important;font:500 16px/1.3 var(--f-texte,Arial,sans-serif) !important}
#position-locale .radar-report.sc-card h3{padding:6px 26px 16px !important;font-size:23px !important;letter-spacing:-.02em}
#position-locale .radar-report .rr-list{padding:0 26px 6px !important}
#position-locale .radar-report .rr-list li{grid-template-columns:auto minmax(0,1fr) auto !important;column-gap:16px;row-gap:3px;padding:18px 0 !important;align-items:center !important}
#position-locale .radar-report .rr-list li::before{display:none !important}
#position-locale .radar-report .rr-sig{grid-column:1;grid-row:1 / span 2;align-self:center;display:flex;align-items:flex-end;gap:3px;height:22px}
#position-locale .radar-report .rr-sig i{display:block;width:5px;border-radius:2px;background:#16393e1c}
#position-locale .radar-report .rr-sig i:nth-child(1){height:9px}
#position-locale .radar-report .rr-sig i:nth-child(2){height:15px}
#position-locale .radar-report .rr-sig i:nth-child(3){height:22px}
#position-locale .radar-report .rr-g .rr-sig i,
#position-locale .radar-report .rr-o .rr-sig i:nth-child(-n+2),
#position-locale .radar-report .rr-r .rr-sig i:first-child{background:var(--c)}
#position-locale .radar-report .rr-k{grid-column:2 !important;grid-row:1}
#position-locale .radar-report .rr-why{grid-column:2 / -1 !important;grid-row:2}
#position-locale .radar-report .rr-s{grid-column:3 !important;grid-row:1;background:none !important;padding:0 !important;border-radius:0 !important;
  white-space:normal !important;max-width:10.5em !important;text-align:right;font-weight:700;color:color-mix(in srgb,var(--c) 82%,#16393e) !important}
#position-locale .radar-report .rr-list .rr-r .rr-s{background:none !important;color:#c93a31 !important}
@media(max-width:560px){
  #position-locale .radar-report .rr-list li{grid-template-columns:auto minmax(0,1fr) !important}
  #position-locale .radar-report .rr-sig{grid-row:1 / span 3}
  #position-locale .radar-report .rr-s{grid-column:2 !important;grid-row:3;justify-self:start;text-align:left;margin-top:4px !important}
}

/* ===== bloc5-v2.css ===== */
/* SOLIS – Bloc 5 « Êtes-vous recommandé par les IA ? », v2 (17/10/2026, aperçu).
   Chapitre « Et dans les IA ? » : après Google quartier par quartier (bloc 4), la même question posée aux IA,
   où il ne reste que deux ou trois noms. Bloc reconstruit à neuf (classes b5-), l'ancien code (ia-scene.css,
   ia-etapes.css) ne le touche plus. Ancienne version : index-hero-c.avant-bloc5.html.
   Raccord : le bloc est une grande feuille « papier » posée sur l'anthracite du bloc 4, coins arrondis,
   liseré corail en haut ; dessous, le fond du bloc 6.
   Tailles verrouillées : titre géré par la règle commune (60-64 px), phrase sous le titre 25 / 20 px,
   texte 21 / 18 px, titres de cartes 23 / 21 px, rien sous 16 px, y compris dans le téléphone.
   Une seule animation, jouée une fois : la conversation s'écrit, la 3e place apparaît, le fil corail
   rejoint la carte, la carte s'allume et le reste. */

#dans-les-ia.b5{--b5-haut:#212528;--b5-bas:#212528;--b5-feuille:#f2eadf;--b5-encre:#1d2226;--b5-gris:#4a5357;--b5-gris2:#5b6468;
  --b5-corail:#ff6860;--b5-corail-t:#c8433a;--b5-r:clamp(28px,3.2vw,52px);--b5-pw:340px;--b5-cw:300px;--b5-gap:28px;
  position:relative;z-index:3;padding:0;margin:0;color:var(--b5-encre);font-family:var(--f-texte,Arial,Helvetica,sans-serif);
  background:linear-gradient(var(--b5-haut) 0,var(--b5-haut) 50%,var(--b5-bas) 50%,var(--b5-bas) 100%)}
#dans-les-ia.b5 *{box-sizing:border-box}

/* La feuille */
#dans-les-ia .b5-sheet{position:relative;background:var(--b5-feuille);border-radius:var(--b5-r);
  padding:clamp(84px,7vw,120px) 6% clamp(76px,6.5vw,112px);
  box-shadow:0 -24px 60px -36px #000000cc,0 24px 60px -36px #000000cc}
#dans-les-ia .b5-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--b5-r) * 2.4);border-radius:var(--b5-r) var(--b5-r) 0 0;
  border:1.5px solid #ff8b7e;border-bottom:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000,#0004 30%,#0004 70%,#000),linear-gradient(#000 35%,#0000);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000,#0004 30%,#0004 70%,#000),linear-gradient(#000 35%,#0000);mask-composite:intersect}

#dans-les-ia .b5-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,5vw,64px);align-items:center}
@media(min-width:1360px){#dans-les-ia .b5-wrap{grid-template-columns:minmax(0,1fr) calc(var(--b5-pw) + var(--b5-gap) + var(--b5-cw));column-gap:clamp(56px,5vw,96px)}}
@media(max-width:1359px){#dans-les-ia .b5-copy{max-width:680px;margin:0 auto;width:100%}}

/* Texte : même construction que le bloc 4 (phrase sous le titre, texte, trait corail, phrase forte) */
#dans-les-ia .b5-copy p{margin:0}
#dans-les-ia .b5-eyebrow{margin:0 0 14px;font:700 17px/1.3 var(--f-texte,Arial,sans-serif);color:var(--b5-corail-t);letter-spacing:0;text-transform:none}
#dans-les-ia.b5 h2{margin:0 0 24px;color:var(--b5-encre);max-width:15em}
#dans-les-ia .b5-lead{font-size:clamp(20px,1.75vw,25px);line-height:1.42;font-weight:500;color:var(--b5-encre);max-width:560px}
#dans-les-ia .b5-text{margin-top:18px !important;font-size:clamp(18px,1.42vw,21px);line-height:1.6;color:var(--b5-gris);max-width:560px}
#dans-les-ia .b5-rule{display:block;width:64px;height:3px;border-radius:2px;background:var(--b5-corail);margin:28px 0}
#dans-les-ia .b5-punch{font-size:clamp(18px,1.42vw,21px);line-height:1.5;font-weight:700;color:var(--b5-encre);max-width:560px}
#dans-les-ia .b5-cta{margin-top:32px}
#dans-les-ia .b5-note{margin-top:12px !important;font-size:17px;line-height:1.5;color:var(--b5-gris2);max-width:540px}

/* Choix du métier */
#dans-les-ia .b5-try{text-align:center;margin:0 0 30px}
#dans-les-ia .b5-try p{margin:0}
#dans-les-ia .b5-try-t{font:700 clamp(21px,1.6vw,23px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:var(--b5-encre)}
#dans-les-ia .b5-try-s{margin:8px auto 18px !important;max-width:30em;font-size:17px;line-height:1.45;color:var(--b5-gris2)}
#dans-les-ia .b5-seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--b5-haut);box-shadow:0 18px 36px -18px #1d2226b3,inset 0 1px 0 #ffffff14}
#dans-les-ia .b5-seg button{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border:0;border-radius:999px;background:transparent;color:#d3d7d9;
  font:700 17px/1 var(--f-texte,Arial,sans-serif);cursor:pointer;transition:background .25s,color .25s}
#dans-les-ia .b5-seg button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dans-les-ia .b5-seg button:hover{background:#ffffff14;color:#fff}
#dans-les-ia .b5-seg button[aria-pressed="true"]{background:var(--b5-corail-t);color:#fff;box-shadow:0 6px 16px -6px #c8433acc}
#dans-les-ia .b5-seg button:focus-visible{outline:3px solid #ff8b7e;outline-offset:2px}

/* Scène : téléphone + carte, anneaux du radar derrière (fixes, rappel du bloc 4) */
#dans-les-ia .b5-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--b5-pw) var(--b5-cw);column-gap:var(--b5-gap);justify-content:center;align-items:start}

/* Téléphone (interface d'IA en mode sombre, anthracite) */
#dans-les-ia .b5-phone{position:relative;z-index:1;width:var(--b5-pw);padding:9px;border-radius:46px;background:linear-gradient(160deg,#343a3e,#141719 62%);
  border:1px solid #c9cdd08c;box-shadow:0 34px 70px -24px #1d2226a6,0 0 50px #ff686024}
#dans-les-ia .b5-screen{display:flex;flex-direction:column;gap:12px;min-height:560px;padding:12px 12px 14px;border-radius:37px;overflow:hidden;
  background:linear-gradient(180deg,#1c1f22,#111315);color:#eef0f1;font-family:var(--f-texte,Arial,sans-serif)}
#dans-les-ia .b5-screen p{margin:0}
#dans-les-ia .b5-notch{align-self:center;width:86px;height:22px;border-radius:99px;background:#000}
#dans-les-ia .b5-tabs{display:flex;gap:2px;padding:3px;border-radius:99px;background:#24282b;border:1px solid #ffffff14;overflow:hidden}
#dans-les-ia .b5-tabs span{flex:1 0 auto;padding:7px 6px;border-radius:99px;text-align:center;white-space:nowrap;font:600 16px/1 var(--f-texte,Arial,sans-serif);letter-spacing:-.01em;color:#9ea6aa}
#dans-les-ia .b5-tabs .is-on{background:#f1f3f4;color:#121416}
#dans-les-ia .b5-q{align-self:flex-end;max-width:88%;margin-top:4px !important;padding:11px 15px;border-radius:20px 20px 6px 20px;background:var(--b5-corail-t);color:#fff;font-size:16px;line-height:1.4;font-weight:500}
#dans-les-ia .b5-a{position:relative;display:flex;gap:10px;align-items:flex-start;min-height:30px;font-size:16px;line-height:1.45;color:#d4d9dc}
#dans-les-ia .b5-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffffff14;border:1px solid #ffffff24}
#dans-les-ia .b5-av svg{width:15px;height:15px;fill:none;stroke:#ffb0a1;stroke-width:1.8;stroke-linecap:round}
#dans-les-ia .b5-dots{position:absolute;left:40px;top:10px;display:flex;gap:5px;opacity:0;pointer-events:none}
#dans-les-ia .b5-dots b{width:7px;height:7px;border-radius:50%;background:#ffb0a1}
#dans-les-ia .b5-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
#dans-les-ia .b5-list li{display:flex;align-items:center;gap:11px;padding:10px;border-radius:15px;background:#1f2326;border:1px solid #ffffff17}
#dans-les-ia .b5-tile{flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font:700 16px/1 var(--f-titre,Arial,sans-serif);font-style:normal;color:#ffd0c9;
  background:linear-gradient(140deg,#3b3336,#1f2326);border:1px solid #ffffff1f}
#dans-les-ia .b5-list li:nth-child(2) .b5-tile{color:#dfe4e6;background:linear-gradient(140deg,#373c3f,#1f2326)}
#dans-les-ia .b5-list b{display:block;font-size:17px;line-height:1.25;font-weight:700;color:#fff}
#dans-les-ia .b5-list small{display:block;margin-top:3px;font-size:16px;line-height:1.35;color:#aeb5b9}
#dans-les-ia .b5-list small em{font-style:normal;color:#ffc04d}
#dans-les-ia .b5-list small u{text-decoration:none;color:#5fd394}
#dans-les-ia .b5-list .b5-you{border:1.5px dashed #ff8b7e;background:#ff68601a;box-shadow:0 0 24px #ff686033}
#dans-les-ia .b5-you i{flex:none;width:46px;height:46px;border-radius:11px;border:1px dashed #ff8b7e99;display:grid;place-items:center;font-style:normal;font-size:22px;color:#ff8b7e}
#dans-les-ia .b5-list .b5-you b{color:#ffb8ad}
#dans-les-ia .b5-list .b5-you small{color:#f3d2cd}
#dans-les-ia .b5-input{margin-top:auto;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 6px 0 16px;border-radius:99px;background:#24282b;border:1px solid #ffffff14;font-size:16px;color:#8f979b}
#dans-les-ia .b5-input i{width:32px;height:32px;border-radius:50%;background:#f1f3f4}

/* Carte papier : liseré corail, coches vertes, bandeau bleu pétrole (comme les blocs 2 à 4) */
#dans-les-ia .b5-card{position:relative;z-index:2;width:var(--b5-cw);border:1px solid transparent;border-radius:20px;overflow:hidden;color:var(--sc-petrole,#16393e);
  background:linear-gradient(var(--sc-papier,#fbf7f1),var(--sc-papier,#fbf7f1)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 30px 60px -28px #1d222680,0 10px 22px -12px #1d222640}
#dans-les-ia .b5-card-head{display:flex;gap:12px;align-items:flex-start;padding:20px 20px 6px}
#dans-les-ia .b5-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid #ff8b7ecc;background:#ff68611a}
#dans-les-ia .b5-ico svg{width:19px;height:19px;fill:none;stroke:var(--b5-corail-t);stroke-width:1.9;stroke-linecap:round}
#dans-les-ia .b5-card-h{margin:0;font:700 23px/1.18 var(--f-titre,Arial,sans-serif);letter-spacing:-.02em;color:var(--sc-petrole,#16393e)}
#dans-les-ia .b5-card-sub{margin:6px 0 0;font-size:16px;line-height:1.35;font-weight:600;color:var(--b5-corail-t)}
#dans-les-ia .b5-card-list{margin:4px 20px 0 !important}
#dans-les-ia .b5-card-list li{padding:12px 0 12px 34px !important;border-top:1px solid #16393e17}
#dans-les-ia .b5-card-list li:first-child{border-top:0}
#dans-les-ia .b5-card-list li::before{top:14px !important;width:24px !important;height:24px !important;background-size:16px !important}
#dans-les-ia .b5-card-list b{display:block;font-size:18px;line-height:1.3;font-weight:700;color:var(--sc-petrole,#16393e)}
#dans-les-ia .b5-card-list span{display:block;margin-top:3px;font-size:16px;line-height:1.4;color:#5d6d70}
#dans-les-ia .b5-card-h,#dans-les-ia .b5-card-list li{transition:opacity .3s ease}
#dans-les-ia .b5-band{margin-top:10px !important;padding:16px 20px 18px !important;font-size:17px !important}

/* Fil corail : de « Et votre entreprise ? » jusqu'à la carte (position calculée par bloc5-v2.js) */
#dans-les-ia .b5-thread{position:absolute;z-index:3;left:calc(var(--b5-pw) - 21px);top:var(--b5-y,60%);width:calc(var(--b5-gap) + 21px);height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,#ff8b7e,var(--b5-corail));box-shadow:0 0 8px #ff6860b3;transform-origin:left center}
#dans-les-ia .b5-thread::before,#dans-les-ia .b5-thread::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff6ed;border:1px solid #ff8b7e;box-shadow:0 0 6px #ff574f}
#dans-les-ia .b5-thread::before{left:-3px}
#dans-les-ia .b5-thread::after{right:-3px}

#dans-les-ia .b5-caption{margin:18px 0 0;text-align:center;font-size:17px;line-height:1.45;color:var(--b5-gris2)}

/* ---------- L'animation (une seule, jouée une fois) ---------- */
#dans-les-ia.b5-wait .b5-q,#dans-les-ia.b5-wait .b5-a,#dans-les-ia.b5-wait .b5-a-t,#dans-les-ia.b5-wait .b5-list li{opacity:0}
#dans-les-ia.b5-wait .b5-thread{transform:scaleX(0)}
#dans-les-ia.b5-play .b5-q{opacity:1;transition:opacity .5s ease .1s}
#dans-les-ia.b5-play .b5-a{opacity:1;transition:opacity .4s ease .6s}
#dans-les-ia.b5-play .b5-dots{animation:b5-dots 1.1s linear .6s 1 both}
#dans-les-ia.b5-play .b5-dots b{animation:b5-dot .55s ease-in-out .6s 2 alternate}
#dans-les-ia.b5-play .b5-dots b:nth-child(2){animation-delay:.72s}
#dans-les-ia.b5-play .b5-dots b:nth-child(3){animation-delay:.84s}
#dans-les-ia.b5-play .b5-a-t{opacity:1;transition:opacity .4s ease 1.7s}
#dans-les-ia.b5-play .b5-list li:nth-child(1){opacity:1;transition:opacity .45s ease 2s}
#dans-les-ia.b5-play .b5-list li:nth-child(2){opacity:1;transition:opacity .45s ease 2.35s}
#dans-les-ia.b5-play .b5-list .b5-you{opacity:1;transition:opacity .5s ease 2.8s}
#dans-les-ia.b5-play .b5-thread{transform:scaleX(1);transition:transform .6s cubic-bezier(.6,0,.2,1) 3.3s}
#dans-les-ia.b5-play .b5-card{transition:box-shadow .8s ease 3.85s}
#dans-les-ia.b5-play .b5-card,#dans-les-ia.b5-done .b5-card{box-shadow:0 1px 0 #fff inset,0 30px 60px -28px #1d222680,0 0 0 2px #ff8b7e,0 0 30px #ff6b5a59}
@keyframes b5-dots{0%,90%{opacity:1}100%{opacity:0}}
@keyframes b5-dot{from{transform:translateY(0);opacity:.35}to{transform:translateY(-4px);opacity:1}}

/* changement de métier (déclenché par le visiteur) : un fondu rapide, rien d'autre */
#dans-les-ia.b5-swapped .b5-q,#dans-les-ia.b5-swapped .b5-a-t,#dans-les-ia.b5-swapped .b5-list li,#dans-les-ia.b5-swapped .b5-list small{transition:opacity .3s ease !important}
#dans-les-ia .b5-screen.is-swap .b5-q,#dans-les-ia .b5-screen.is-swap .b5-a-t,#dans-les-ia .b5-screen.is-swap .b5-list li:not(.b5-you),#dans-les-ia .b5-screen.is-swap .b5-you small,
#dans-les-ia .b5-card.is-swap .b5-card-h,#dans-les-ia .b5-card.is-swap .b5-card-list li{opacity:0 !important;transition:opacity .18s ease !important}

@media(prefers-reduced-motion:reduce){#dans-les-ia *{animation:none !important;transition:none !important}}

/* ---------- Tablette et téléphone ---------- */
@media(max-width:760px){
  #dans-les-ia.b5{--b5-r:28px}
  #dans-les-ia .b5-sheet{padding:64px 20px 64px}
  #dans-les-ia .b5-lead{font-size:20px}
  #dans-les-ia .b5-text,#dans-les-ia .b5-punch{font-size:18px}
  #dans-les-ia .b5-note,#dans-les-ia .b5-caption,#dans-les-ia .b5-try-s{font-size:16px}
  #dans-les-ia .b5-try-t{font-size:21px}
  #dans-les-ia .b5-stage{display:flex;flex-direction:column;align-items:center;gap:20px}
  #dans-les-ia .b5-phone{width:min(100%,360px)}
  #dans-les-ia .b5-card{width:min(100%,420px);margin-top:0 !important}
  #dans-les-ia .b5-card-h{font-size:21px}
  #dans-les-ia .b5-thread{display:none}
  }
@media(max-width:560px){
  #dans-les-ia .b5-seg{display:flex;width:100%}
  #dans-les-ia .b5-seg button{flex:1;flex-direction:column;justify-content:center;gap:6px;padding:11px 4px;font-size:16px}
}
@media(max-width:360px){#dans-les-ia .b5-tabs span{padding:7px 4px}}

/* v2 bis (17/10, 18 h 30) : le radar passe en fond de toute la feuille (demande de Christel).
   Toujours centré sur le téléphone (position mesurée par bloc5-v2.js), traits fins à 1 px quelle que soit la taille,
   anneaux de plus en plus pâles en s'éloignant, fondu sur les bords. Rien ne bouge. Sauvegarde : bloc5-v2.avant-radar-plein.css */
#dans-les-ia .b5-sheet{overflow:hidden;isolation:isolate}
#dans-les-ia .b5-wrap{position:relative;z-index:1}
#dans-les-ia .b5-rings{position:absolute;z-index:0;width:2000px;height:2000px;left:calc(var(--b5-cx,72%) - 1000px);top:calc(var(--b5-cy,55%) - 1000px);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 38%,#0000 66%);mask-image:radial-gradient(circle,#000 0,#000 38%,#0000 66%)}
#dans-les-ia .b5-rings circle,#dans-les-ia .b5-rings path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1}
#dans-les-ia .b5-rings .r1{stroke:var(--b5-corail);stroke-opacity:.36}
#dans-les-ia .b5-rings .r2{stroke:var(--b5-corail);stroke-opacity:.28}
#dans-les-ia .b5-rings .r3{stroke:var(--b5-corail);stroke-opacity:.22}
#dans-les-ia .b5-rings .r4{stroke:var(--b5-corail);stroke-opacity:.17}
#dans-les-ia .b5-rings .r5{stroke:var(--b5-corail);stroke-opacity:.13}
#dans-les-ia .b5-rings .r6{stroke:var(--b5-corail);stroke-opacity:.10}
#dans-les-ia .b5-rings .r7{stroke:var(--b5-corail);stroke-opacity:.08}
#dans-les-ia .b5-rings .d{stroke:#1d2226;stroke-opacity:.13;stroke-dasharray:2 8}
#dans-les-ia .b5-rings path{stroke:#1d2226;stroke-opacity:.06}
#dans-les-ia .b5-rings .p{fill:var(--b5-corail);stroke:var(--b5-feuille);stroke-width:2.5}
#dans-les-ia .b5-rings .p.g{fill:#868c90}

/* v2 ter (17/10, 22 h) : un seul tour de radar, très lent (7 s), joué une fois avec la conversation (demande de Christel).
   Le faisceau part du haut, fait le tour du téléphone et s'efface ; chaque point s'allume quand le faisceau passe dessus.
   Il ne tourne jamais en boucle. Sauvegarde : bloc5-v2.avant-balayage.css */
#dans-les-ia .b5-sweep{position:absolute;z-index:0;width:1400px;height:1400px;left:calc(var(--b5-cx,72%) - 700px);top:calc(var(--b5-cy,55%) - 700px);
  border-radius:50%;pointer-events:none;opacity:0;transform:rotate(-90deg);
  background:conic-gradient(from 0deg,#ff686000 0deg,#ff686000 300deg,#ff68600a 325deg,#ff68601f 345deg,#ff686038 357deg,#ff686073 359.4deg,#ff686000 360deg);
  -webkit-mask-image:radial-gradient(circle,#0000 0,#0000 9%,#000 15%,#000 46%,#0000 70%);mask-image:radial-gradient(circle,#0000 0,#0000 9%,#000 15%,#000 46%,#0000 70%)}
#dans-les-ia.b5-play .b5-sweep{animation:b5-sweep 7s linear .1s 1 both}
@keyframes b5-sweep{0%{transform:rotate(-90deg);opacity:0}8%{opacity:1}90%{opacity:1}100%{transform:rotate(270deg);opacity:0}}
#dans-les-ia .b5-rings .p{transform-box:fill-box;transform-origin:center}
#dans-les-ia.b5-play .b5-rings .p1{animation:b5-blip 1.1s ease-out 2.88s 1}
#dans-les-ia.b5-play .b5-rings .p3{animation:b5-blip 1.1s ease-out .84s 1}
#dans-les-ia.b5-play .b5-rings .p2{animation:b5-blip 1.1s ease-out 6.42s 1}
@keyframes b5-blip{0%{transform:scale(1)}25%{transform:scale(1.9);filter:drop-shadow(0 0 6px #ff6860)}100%{transform:scale(1);filter:none}}

/* v2 quater (17/10, 22 h 10) : de vraies photos dans les réponses de l'IA à la place des initiales (demande de Christel).
   La photo s'affiche si le fichier existe dans assets/ (ia-salon-1/2, ia-plombier-1/2, ia-restaurant-1/2) ; sinon, les initiales restent.
   Vignettes un peu plus grandes (52 px), comme dans une vraie réponse. Sauvegarde : bloc5-v2.avant-photos-ia.css */
#dans-les-ia .b5-tile{position:relative;overflow:hidden;width:52px;height:52px}
#dans-les-ia .b5-you i{width:52px;height:52px}
#dans-les-ia .b5-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
#dans-les-ia .b5-tile.has-photo img{opacity:1}
#dans-les-ia .b5-tile.has-photo{border-color:#ffffff2e}

/* 17/10, 22 h 15 : le 3e point (gris) quitte l'espace entre le téléphone et la carte, où il ressemblait à un bug à côté du fil ; il passe en haut à gauche du téléphone. Sauvegarde : bloc5-v2.avant-point.css */

/* 17/10, 22 h 20 : plus de points dans le radar, discrets (demande de Christel). Dix petits points en plus, surtout gris (les concurrents),
   deux corail ; chacun s'allume au passage du faisceau (--d = moment du passage). Le point gris caché derrière le téléphone est déplacé.
   Sauvegarde : bloc5-v2.avant-pins.css */
#dans-les-ia .b5-rings .s{fill:#868c90;fill-opacity:.7;stroke:var(--b5-feuille);stroke-width:2;transform-box:fill-box;transform-origin:center}
#dans-les-ia .b5-rings .s.c{fill:var(--b5-corail);fill-opacity:.8}
#dans-les-ia.b5-play .b5-rings .s{animation:b5-blip 1.1s ease-out var(--d,1s) 1}

/* 17/10, 22 h 25 : des pins au lieu des points (demande de Christel), même forme que le pin « Votre entreprise » du bloc 4.
   Pins gris = concurrents, pins corail = entreprises recommandées. Au passage du faisceau, chaque pin se soulève un instant.
   Sauvegarde : bloc5-v2.avant-vrais-pins.css */
#dans-les-ia .b5-rings .pin{fill:#868c90;transform-box:fill-box;transform-origin:50% 100%;animation:none}
#dans-les-ia .b5-rings .pin.s{opacity:.78}
#dans-les-ia .b5-rings .pin.c,#dans-les-ia .b5-rings .pin.p1{fill:var(--b5-corail)}
#dans-les-ia .b5-rings .pin.p1{opacity:1}
#dans-les-ia .b5-rings .pin path{fill:inherit;stroke:var(--b5-feuille);stroke-width:2.2;stroke-opacity:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 2px #1d222640)}
#dans-les-ia .b5-rings .pin circle{fill:#fff;fill-opacity:.95;stroke:none}
#dans-les-ia.b5-play .b5-rings .pin.s{animation:b5-pin 1.1s ease-out var(--d,1s) 1}
#dans-les-ia.b5-play .b5-rings .pin.p1{animation:b5-pin 1.1s ease-out 2.88s 1}
#dans-les-ia.b5-play .b5-rings .pin.p2{animation:b5-pin 1.1s ease-out 6.42s 1}
#dans-les-ia.b5-play .b5-rings .pin.p3{animation:b5-pin 1.1s ease-out .84s 1}
@keyframes b5-pin{0%{transform:none}30%{transform:translateY(-4px) scale(1.3);filter:drop-shadow(0 0 6px #ff6860)}100%{transform:none;filter:none}}

/* v3 (17/10, 22 h 50) : le bloc 5 passe en foncé, dans le même chapitre que le bloc 4 (décision de Christel :
   blocs 4 et 5 foncés, blocs 6 et 7 clairs, pour casser le « clair, foncé, clair, foncé »).
   La feuille papier disparaît : même anthracite que le bloc 4, sans coupure. La carte reste « papier ».
   Le radar garde ses anneaux corail ; les traits fins passent en blanc très pâle ; un fondu en haut et en bas
   évite que les anneaux s'arrêtent net au bord du bloc. Sauvegarde : bloc5-v2.avant-clair-fonce.css */
#dans-les-ia.b5{--b5-feuille:#212528;--b5-encre:#f3f1ee;--b5-gris:#c5cacc;--b5-gris2:#aeb5b9;background:#212528}
#dans-les-ia .b5-sheet{border-radius:0;box-shadow:none;background:#212528}
#dans-les-ia .b5-sheet::before,#dans-les-ia .b5-sheet::after{content:"";position:absolute;z-index:0;left:0;right:0;height:140px;border:0;border-radius:0;pointer-events:none;
  -webkit-mask-image:none;mask-image:none}
#dans-les-ia .b5-sheet::before{top:0;background:linear-gradient(#212528,#21252800)}
#dans-les-ia .b5-sheet::after{bottom:0;background:linear-gradient(#21252800,#212528)}
#dans-les-ia .b5-eyebrow{color:#ff8b7e}
#dans-les-ia .b5-lead{color:#e6e3de}
#dans-les-ia .b5-punch{color:#fff}
#dans-les-ia .b5-try-t{color:#fff}
#dans-les-ia .b5-seg{background:#2c3135;box-shadow:0 18px 36px -18px #000000b3,inset 0 1px 0 #ffffff14;border:1px solid #ffffff14}
#dans-les-ia .b5-phone{box-shadow:0 34px 70px -24px #000000cc,0 0 60px #ff686029}
#dans-les-ia .b5-card{box-shadow:0 1px 0 #fff inset,0 34px 70px -28px #000000b3,0 10px 22px -12px #00000066}
#dans-les-ia.b5-play .b5-card,#dans-les-ia.b5-done .b5-card{box-shadow:0 1px 0 #fff inset,0 34px 70px -28px #000000b3,0 0 0 2px #ff8b7e,0 0 34px #ff6b5a73}
#dans-les-ia .b5-rings .d{stroke:#fff;stroke-opacity:.12}
#dans-les-ia .b5-rings path{stroke:#fff;stroke-opacity:.05}
#dans-les-ia .b5-rings .pin path{filter:drop-shadow(0 2px 2px #00000080)}

/* 17/10, 22 h 55 : correctifs vus sur la capture de Christel.
   1. Le titre restait bleu foncé (règle commune de polices.css) : illisible sur l'anthracite. Il passe en clair, « par les IA ? » en corail clair.
   2. Raccord bloc 4 / bloc 5 : la carte de rues du bloc 4 s'arrêtait net (bord du bas et bords des côtés bien visibles).
      Elle s'efface maintenant en fondu en bas et sur les côtés, pour que les deux blocs se lisent comme un seul fond.
   Sauvegarde : bloc5-v2.avant-raccord4.css */
#dans-les-ia.b5 h2#ai-title{color:#f3f1ee !important}
#dans-les-ia.b5 h2#ai-title em{color:#ff8b7e !important}
@media(min-width:1300px){
  #position-locale::before{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#00000040 18%,#000 32%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#00000040 18%,#000 32%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%) !important;
    mask-composite:intersect !important}
}

/* 17/10, 23 h : mise en page du bloc 5 en foncé (vu sur la capture de Christel).
   1. Moins de vide entre le bloc 4 et le bloc 5 : le haut du bloc est resserré (le fond est continu, plus besoin de marge de feuille).
   2. Le titre du bloc et « Chaque métier se cherche différemment » commencent à la même hauteur : on lit le titre d'abord.
   3. La croix fine qui traversait le radar (ligne verticale au-dessus du téléphone) est retirée : sur fond foncé, elle ressemblait à un bug.
   4. Le radar reste autour du téléphone et de la carte : il s'efface avant la colonne de texte, plus de pin collé au titre.
   Sauvegarde : bloc5-v2.avant-mise-en-page.css */
#dans-les-ia .b5-rings > path{display:none}
@media(min-width:1360px){
  #dans-les-ia .b5-sheet{padding-top:clamp(36px,3vw,52px)}
  #dans-les-ia .b5-wrap{align-items:start}
  #dans-les-ia .b5-copy{padding-top:4px}
  #dans-les-ia .b5-rings{
    -webkit-mask-image:radial-gradient(circle,#000 0,#000 28%,#0000 52%),linear-gradient(90deg,#0000 0,#0000 39%,#000 45%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(circle,#000 0,#000 28%,#0000 52%),linear-gradient(90deg,#0000 0,#0000 39%,#000 45%);
    mask-composite:intersect}
  #dans-les-ia .b5-sweep{
    -webkit-mask-image:radial-gradient(circle,#0000 0,#0000 9%,#000 15%,#000 40%,#0000 62%),linear-gradient(90deg,#0000 0,#0000 32%,#000 40%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(circle,#0000 0,#0000 9%,#000 15%,#000 40%,#0000 62%),linear-gradient(90deg,#0000 0,#0000 32%,#000 40%);
    mask-composite:intersect}
}

/* 17/10, 23 h 05 : le titre remonte (demande de Christel), même règle qu'au bloc 6.
   Le titre est seul en haut ; dessous, « Chaque métier se cherche différemment » commence au niveau de la phrase sous le titre.
   Sur ordinateur, le bloc 5 remonte de 80 px dans le vide du bas du bloc 4 (le haut du bloc 5 est transparent sur ces 80 px :
   on voit le même anthracite du bloc 4, rien n'est caché). Sauvegarde : bloc5-v2.avant-titre5.css, index-hero-c.avant-titre5.html */
#dans-les-ia .b5-head p{margin:0}
#dans-les-ia .b5-wrap{row-gap:0}
#dans-les-ia .b5-scene{margin-top:clamp(48px,5vw,64px)}
@media(max-width:1359px){#dans-les-ia .b5-head{max-width:680px;margin:0 auto;width:100%}}
@media(min-width:1360px){
  #dans-les-ia .b5-wrap{grid-template-areas:"head ." "copy scene";align-items:start}
  #dans-les-ia .b5-head{grid-area:head}
  #dans-les-ia .b5-copy{grid-area:copy;padding-top:0}
  #dans-les-ia .b5-scene{grid-area:scene;margin-top:4px}
  #dans-les-ia.b5{margin-top:-80px;background:linear-gradient(#21252800 0,#21252800 80px,#212528 80px)}
  #dans-les-ia .b5-sheet{background:linear-gradient(#21252800 0,#212528 80px);padding-top:clamp(24px,2vw,36px)}
  #dans-les-ia .b5-sheet::before{display:none}
}

/* 17/10, 23 h 08 : la colonne de droite remonte (demande de Christel) : « Chaque métier se cherche différemment »,
   les boutons et le téléphone commencent à la hauteur du titre du bloc. Le titre de gauche et le petit titre de droite
   ouvrent le bloc ensemble ; le texte de gauche reste juste sous le titre. Sauvegarde : bloc5-v2.avant-colonne-droite.css */
@media(min-width:1360px){
  #dans-les-ia .b5-wrap{grid-template-areas:"head scene" "copy scene";grid-template-rows:auto 1fr}
  #dans-les-ia .b5-scene{margin-top:0}
}

/* ===== bloc6-v2.css ===== */
/* SOLIS – Bloc 6 « Comment ça marche », v2 (17/10/2026, aperçu).
   Chapitre « Concrètement, on commence comment ? » : après le chemin du client (bloc 2), ce que fait SOLIS (bloc 3),
   Google quartier par quartier (bloc 4) et les IA (bloc 5), le bloc 6 dit comment on vérifie tout ça pour VOTRE entreprise.
   Fond anthracite, le même que les blocs 2 et 4 : la feuille du bloc 5 se pose dessus.
   La carte « Votre diagnostic » reprend le nouvel ordre (trouver → comprendre → choisir → joindre)
   et le signal à 3 barres du bloc 4, qui veut dire « couleur du diagnostic ».
   Tailles verrouillées : titre par la règle commune (60-64 px), phrase sous le titre 25 / 20 px,
   texte 20-21 / 18 px, titres des étapes et de la carte 25 / 21 px, rien sous 16 px.
   Une seule animation, jouée une fois : les signaux de la carte s'allument ligne par ligne, dans l'ordre du chemin.
   Ancienne version : index-hero-c.avant-bloc6.html */

#comment-ca-marche.b6{--b6-fond:#212528;--b6-texte:#f3f1ee;--b6-doux:#c5cacc;--b6-corail:#ff6860;--b6-corail-c:#ff8b7e;--b6-corail-t:#c8433a;
  --b6-papier:#fbf7f1;--b6-petrole:#16393e;--b6-gris:#4f5f62;--b6-g:#2fa866;--b6-o:#e8962a;--b6-r:#e5483f;
  position:relative;z-index:2;margin:0;padding:clamp(96px,8vw,136px) 6% clamp(72px,6vw,104px);
  background:var(--b6-fond);color:var(--b6-texte);font-family:var(--f-texte,Arial,Helvetica,sans-serif)}
#comment-ca-marche.b6 *{box-sizing:border-box}
#comment-ca-marche.b6 p{margin:0}

#comment-ca-marche .b6-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
  grid-template-areas:"head ." "body stage";column-gap:clamp(56px,6vw,110px);row-gap:0;align-items:start}
/* la carte commence au niveau de la phrase sous le titre (demande du 17/10, 22 h 45) */
#comment-ca-marche .b6-head{grid-area:head}
#comment-ca-marche .b6-left{grid-area:body}
#comment-ca-marche .b6-stage{grid-area:stage}

/* Texte : même construction que les blocs 4 et 5 */
#comment-ca-marche .b6-eyebrow{margin:0 0 14px;font:700 17px/1.3 var(--f-texte,Arial,sans-serif);color:var(--b6-corail-c)}
#comment-ca-marche.b6 h2{margin:0 0 24px;color:var(--b6-texte);max-width:13em}
#comment-ca-marche .b6-lead{font-size:clamp(20px,1.75vw,25px);line-height:1.42;font-weight:500;color:#e6e3de;max-width:600px}

/* Les 3 étapes */
#comment-ca-marche .b6-steps{list-style:none;margin:clamp(40px,4vw,56px) 0 0;padding:0}
#comment-ca-marche .b6-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;padding-bottom:36px}
#comment-ca-marche .b6-step:last-child{padding-bottom:0}
#comment-ca-marche .b6-step::before{content:"";position:absolute;left:28px;top:66px;bottom:8px;width:1px;background:#ffffff2b}
#comment-ca-marche .b6-step:last-child::before{display:none}
#comment-ca-marche .b6-n{width:56px;height:56px;border-radius:50%;border:1.5px solid #ff8b7e99;display:grid;place-items:center;
  font:600 24px/1 var(--f-titre,Arial,sans-serif);color:var(--b6-corail-c)}
/* l'étape 2 est celle que montre la carte : son numéro est plein */
#comment-ca-marche .b6-step.is-diag .b6-n{background:var(--b6-corail-t);border-color:var(--b6-corail-t);color:#fff}
#comment-ca-marche .b6-step h3{margin:12px 0 8px;font:700 25px/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#fff}
#comment-ca-marche .b6-step p{font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--b6-doux);max-width:34em}
#comment-ca-marche .b6-step p.b6-fact{margin-top:10px;font-size:17px;line-height:1.4;font-weight:650;color:#ffb8af}

/* La carte « Votre diagnostic », posée sur un petit dossier */
#comment-ca-marche .b6-stage{position:relative;padding-bottom:28px;margin-top:6px}
#comment-ca-marche .b6-sheet{position:absolute;left:0;right:0;top:0;bottom:28px;border-radius:22px;background:var(--b6-papier);transform-origin:50% 100%}
#comment-ca-marche .b6-sheet-1{transform:translateY(14px) scale(.955);opacity:.45}
#comment-ca-marche .b6-sheet-2{transform:translateY(28px) scale(.91);opacity:.2}
#comment-ca-marche .b6-card{position:relative;margin:0;border:1.5px solid transparent;border-radius:22px;overflow:hidden;color:var(--b6-petrole);
  background:linear-gradient(var(--b6-papier),var(--b6-papier)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 44px 90px -30px #000000b3,0 14px 30px -12px #00000066}
#comment-ca-marche .b6-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 30px 0}
#comment-ca-marche .b6-kicker{margin:0 0 6px !important;font-size:16px;font-weight:700;color:var(--b6-corail-t)}
#comment-ca-marche .b6-card-t{font:700 25px/1.1 var(--f-titre,Arial,sans-serif);letter-spacing:-.02em;color:var(--b6-petrole)}
#comment-ca-marche .b6-card-sub{margin-top:6px !important;font-size:16px;color:#5d6d70}
#comment-ca-marche .b6-stamp{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border:1px solid #16393e26;border-radius:999px;
  font-size:16px;font-weight:650;color:var(--b6-petrole);background:#ffffff99;white-space:nowrap}
#comment-ca-marche .b6-stamp svg{width:16px;height:16px;fill:none;stroke:var(--b6-g);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#comment-ca-marche .b6-q{margin:24px 30px 6px !important;font-size:18px;font-weight:650;color:var(--b6-petrole)}

#comment-ca-marche .b6-list{list-style:none;margin:0;padding:0 18px 8px}
#comment-ca-marche .b6-row{--c:var(--b6-g);display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;row-gap:3px;align-items:center;
  padding:16px 12px;border-radius:14px}
#comment-ca-marche .b6-row+.b6-row{box-shadow:0 -1px 0 #16393e17}
#comment-ca-marche .b6-row.s-o{--c:var(--b6-o)}
#comment-ca-marche .b6-row.s-r{--c:var(--b6-r);background:linear-gradient(90deg,#fde3df,#fdeeeb 70%,#fdeeeb00);box-shadow:none}
#comment-ca-marche .b6-row.s-r+.b6-row{box-shadow:none}
#comment-ca-marche .b6-sig{grid-column:1;grid-row:1 / span 2;display:flex;align-items:flex-end;gap:3px;height:23px}
#comment-ca-marche .b6-sig i{display:block;width:6px;border-radius:2px;background:#16393e1f}
#comment-ca-marche .b6-sig i:nth-child(1){height:10px;--j:0}
#comment-ca-marche .b6-sig i:nth-child(2){height:16px;--j:1}
#comment-ca-marche .b6-sig i:nth-child(3){height:23px;--j:2}
#comment-ca-marche .s-g .b6-sig i,
#comment-ca-marche .s-o .b6-sig i:nth-child(-n+2),
#comment-ca-marche .s-r .b6-sig i:first-child{background:var(--c)}
#comment-ca-marche .b6-k{grid-column:2;grid-row:1;font-size:20px;line-height:1.25;font-weight:700;color:var(--b6-petrole)}
#comment-ca-marche .b6-why{grid-column:2;grid-row:2;font-size:16px;line-height:1.45;color:var(--b6-gris)}
#comment-ca-marche .b6-st{grid-column:3;grid-row:1 / span 2;max-width:7.6em;text-align:right;font-size:17px;line-height:1.3;font-weight:700;
  color:color-mix(in srgb,var(--c) 80%,#16393e)}
#comment-ca-marche .s-r .b6-st{color:#c93a31}

#comment-ca-marche .b6-band{display:flex;gap:14px;align-items:flex-start;margin:10px 0 0 !important;padding:22px 30px 26px;background:var(--b6-petrole);
  color:#eef3f3;font-size:17px;line-height:1.5;font-weight:600}
#comment-ca-marche .b6-band svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--b6-corail-c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Pied du bloc : le Suivi, puis les deux boutons */
#comment-ca-marche .b6-foot{max-width:1280px;margin:clamp(52px,5vw,72px) auto 0;padding-top:30px;border-top:1px solid #ffffff1f;
  display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
#comment-ca-marche .b6-foot p{font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--b6-doux);max-width:640px}
#comment-ca-marche .b6-foot p a{color:#fff;text-decoration:none;border-bottom:1px solid var(--b6-corail)}
#comment-ca-marche .b6-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#comment-ca-marche .b6-actions .solis-offer-cta{margin:0}
#comment-ca-marche .b6-example{font-size:17px;color:#e2e5e6;text-decoration:none;border-bottom:1px solid #ff686099;padding-bottom:2px}
#comment-ca-marche a:focus-visible{outline:3px solid var(--b6-corail);outline-offset:4px;border-radius:6px}

/* Cadre lumineux autour de la carte (demande du 17/10, 22 h 40) : la carte a sa propre lumière,
   au lieu d'être un rectangle clair de plus sur du foncé. Un anneau corail fin, avec un halo doux. */
@property --b6-a{syntax:"<angle>";inherits:false;initial-value:360deg}
#comment-ca-marche .b6-halo{position:absolute;z-index:3;top:-9px;left:-9px;right:-9px;bottom:19px;pointer-events:none;
  filter:drop-shadow(0 0 5px #ff6860d9) drop-shadow(0 0 22px #ff686073)}
#comment-ca-marche .b6-ring{position:absolute;inset:0;border-radius:31px;padding:2px;
  background:conic-gradient(from -90deg,#ff8b7e 0deg,#ffd1ca calc(var(--b6-a) - 1deg),#fff var(--b6-a),#ff8b7e00 var(--b6-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* Animation unique, jouée une fois (environ 4 secondes) :
   1. la lumière fait le tour de la carte et le cadre reste allumé ;
   2. puis les signaux s'allument ligne par ligne, dans l'ordre du chemin, et le mot de chaque couleur apparaît. */
#comment-ca-marche .b6-anim{--b6-t0:1.5s}
#comment-ca-marche .b6-anim .b6-ring{transition:--b6-a 1.7s cubic-bezier(.45,0,.25,1)}
#comment-ca-marche .b6-anim:not(.is-in) .b6-ring{--b6-a:0deg}
#comment-ca-marche .b6-anim .b6-halo{transition:opacity .4s ease}
#comment-ca-marche .b6-anim:not(.is-in) .b6-halo{opacity:0}
#comment-ca-marche .b6-anim .b6-sig i{transition:background-color .3s ease calc(var(--b6-t0) + var(--i) * .55s + var(--j) * .12s)}
#comment-ca-marche .b6-anim .b6-st{transition:opacity .35s ease calc(var(--b6-t0) + var(--i) * .55s + .36s)}
#comment-ca-marche .b6-anim:not(.is-in) .b6-sig i{background:#16393e1f !important}
#comment-ca-marche .b6-anim:not(.is-in) .b6-st{opacity:0}
@media(prefers-reduced-motion:reduce){#comment-ca-marche .b6-anim .b6-sig i,#comment-ca-marche .b6-anim .b6-st,#comment-ca-marche .b6-anim .b6-ring{transition:none}}

/* Tablette : une seule colonne, la carte sous les étapes */
@media(max-width:1100px){
  #comment-ca-marche .b6-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "stage"}
  #comment-ca-marche .b6-left{max-width:680px}
  #comment-ca-marche .b6-stage{max-width:540px;margin-top:56px}
}
/* Téléphone */
@media(max-width:600px){
  #comment-ca-marche .b6-halo{top:-7px;left:-7px;right:-7px;bottom:21px}
  #comment-ca-marche .b6-ring{border-radius:28px}
  #comment-ca-marche.b6{padding:80px 20px 64px}
  #comment-ca-marche .b6-step{grid-template-columns:46px minmax(0,1fr);column-gap:16px}
  #comment-ca-marche .b6-n{width:46px;height:46px;font-size:20px}
  #comment-ca-marche .b6-step::before{left:23px;top:56px}
  #comment-ca-marche .b6-step h3{margin-top:8px;font-size:21px}
  #comment-ca-marche .b6-step p{font-size:18px}
  #comment-ca-marche .b6-top{flex-direction:column;gap:12px;padding:22px 20px 0}
  #comment-ca-marche .b6-card-t{font-size:21px}
  #comment-ca-marche .b6-q{margin:20px 20px 6px !important}
  #comment-ca-marche .b6-list{padding:0 8px 6px}
  #comment-ca-marche .b6-row{grid-template-columns:auto minmax(0,1fr);padding:14px 12px}
  #comment-ca-marche .b6-sig{grid-row:1 / span 3}
  #comment-ca-marche .b6-k{font-size:18px}
  #comment-ca-marche .b6-st{grid-column:2;grid-row:3;max-width:none;text-align:left;margin-top:4px}
  #comment-ca-marche .b6-band{padding:18px 20px 22px}
  #comment-ca-marche .b6-foot p{font-size:18px}
  #comment-ca-marche .b6-actions{width:100%}
  #comment-ca-marche .b6-actions .solis-offer-cta{width:100%}
}

/* v2 bis (17/10, 22 h 50) : le bloc 6 passe en clair, avec le bloc 7 (décision de Christel : blocs 4-5 foncés, 6-7 clairs).
   C'est là que la page change de lumière : le problème est dans le foncé, la solution commence ici.
   Le bloc monte sur le bas du bloc 5 avec des coins arrondis et un liseré corail, comme une feuille qu'on pose.
   La carte garde son cadre lumineux, qui la détache du fond clair. Sauvegarde : bloc6-v2.avant-clair-fonce.css */
#comment-ca-marche.b6{--b6-fond:#fcf8f3;--b6-texte:#1d2226;--b6-doux:#4a5357;--b6-rad:clamp(28px,3.2vw,52px);
  z-index:4;margin-top:calc(-1 * var(--b6-rad));border-radius:var(--b6-rad) var(--b6-rad) 0 0;box-shadow:0 -24px 60px -36px #000000cc}
#comment-ca-marche.b6::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--b6-rad) * 2.4);border-radius:var(--b6-rad) var(--b6-rad) 0 0;
  border:1.5px solid #ff8b7e;border-bottom:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000,#0004 30%,#0004 70%,#000),linear-gradient(#000 35%,#0000);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000,#0004 30%,#0004 70%,#000),linear-gradient(#000 35%,#0000);mask-composite:intersect}
#comment-ca-marche .b6-eyebrow{color:var(--b6-corail-t)}
#comment-ca-marche .b6-lead{color:var(--b6-texte)}
#comment-ca-marche .b6-step::before{background:#1d22262e}
#comment-ca-marche .b6-n{border-color:#e5584f99;color:var(--b6-corail-t)}
#comment-ca-marche .b6-step h3{color:var(--b6-texte)}
#comment-ca-marche .b6-step p.b6-fact{color:var(--b6-corail-t)}
#comment-ca-marche .b6-sheet{background:#efe5d8}
#comment-ca-marche .b6-sheet-1{opacity:.9}
#comment-ca-marche .b6-sheet-2{opacity:.55}
#comment-ca-marche .b6-card{box-shadow:0 1px 0 #fff inset,0 34px 70px -30px #1d222673,0 10px 24px -12px #1d222633}
#comment-ca-marche .b6-halo{filter:drop-shadow(0 0 4px #ff6860b3) drop-shadow(0 0 18px #ff686059)}
#comment-ca-marche .b6-foot{border-top-color:#1d22261f}
#comment-ca-marche .b6-foot p a{color:var(--b6-texte)}
#comment-ca-marche .b6-example{color:var(--b6-texte)}
@media(max-width:760px){#comment-ca-marche.b6{--b6-rad:28px}}

/* 17/10, 23 h 15 : animation rendue visible (Christel ne la voyait pas : elle partait trop tôt et trop discrète).
   Toujours une seule animation, jouée une fois (environ 5 secondes), qui démarre quand la carte est bien à l'écran :
   1. une lumière corail fait le tour de la carte (tête claire, 2,4 s) et dessine le cadre, qui reste allumé ;
   2. le halo s'allume franchement puis se pose ;
   3. les signaux s'allument ligne par ligne, et le mot de chaque couleur apparaît.
   Sauvegardes : bloc6-v2.avant-motion-visible.css / .js */
@keyframes b6-trace{from{--b6-a:0deg}to{--b6-a:360deg}}
@keyframes b6-flash{0%{opacity:0}55%{opacity:1;filter:drop-shadow(0 0 8px #ff6860) drop-shadow(0 0 40px #ff6860b3)}100%{opacity:1}}
#comment-ca-marche .b6-ring{background:conic-gradient(from -90deg,#ff8b7e 0deg,#ff8b7e calc(var(--b6-a) - 14deg),#ffe3de var(--b6-a),#ff8b7e00 var(--b6-a));padding:2.5px}
#comment-ca-marche .b6-anim .b6-ring{transition:none}
#comment-ca-marche .b6-anim:not(.is-in) .b6-ring{--b6-a:0deg}
#comment-ca-marche .b6-anim.is-in .b6-ring{animation:b6-trace 2.4s cubic-bezier(.45,0,.3,1) both}
#comment-ca-marche .b6-anim .b6-halo{opacity:1;transition:none}
#comment-ca-marche .b6-anim.is-in .b6-halo{animation:b6-flash 1.1s ease-out 2.2s both}
#comment-ca-marche .b6-anim.is-in .b6-ring{opacity:1}
#comment-ca-marche .b6-anim{--b6-t0:3s}
@media(prefers-reduced-motion:reduce){#comment-ca-marche .b6-anim.is-in .b6-ring,#comment-ca-marche .b6-anim.is-in .b6-halo{animation:none}}

/* 17/10, 23 h 20 : animation qu'on voit vraiment, et nettoyage vu sur les captures de Christel. Sauvegardes : .avant-scan
   - Un seul trait corail autour de la carte : le liseré propre de la carte est retiré, le cadre lumineux se rapproche.
   - Moins de vide en haut du bloc.
   - Une seule animation, jouée une fois (environ 5 secondes), quand le haut de la carte atteint le milieu de l'écran :
     1. le cadre se dessine autour de la carte (1,6 s) ;
     2. une lumière de scan corail descend sur la carte, comme le diagnostic qui vérifie ;
        chaque ligne s'allume (signal puis mot de la couleur) au moment où la lumière passe dessus ;
     3. le halo s'allume franchement, puis se pose. Ensuite, plus rien ne bouge. */
#comment-ca-marche.b6{padding-top:clamp(72px,6vw,104px)}
#comment-ca-marche .b6-card{background:var(--b6-papier);border-color:transparent}
#comment-ca-marche .b6-halo{top:-6px;left:-6px;right:-6px;bottom:22px}
#comment-ca-marche .b6-ring{border-radius:28px}
#comment-ca-marche .b6-anim.is-in .b6-ring{animation:b6-trace 1.6s cubic-bezier(.45,0,.3,1) both}

#comment-ca-marche .b6-scan{position:absolute;z-index:2;left:0;right:0;top:-120px;height:120px;pointer-events:none;opacity:0;
  background:linear-gradient(#ff686000,#ff68601f 70%,#ff686059 96%,#ff8b7e 100%);
  box-shadow:0 2px 14px #ff6860b3}
@keyframes b6-scan{0%{top:-120px;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
#comment-ca-marche .b6-anim.is-in .b6-scan{animation:b6-scan 2.6s cubic-bezier(.4,0,.6,1) 1.4s both}

/* chaque ligne s'allume au passage du scan (ligne 1 vers 2,3 s, puis toutes les 0,32 s) */
#comment-ca-marche .b6-anim{--b6-t0:2.25s}
#comment-ca-marche .b6-anim .b6-sig i{transition:background-color .25s ease calc(var(--b6-t0) + var(--i) * .32s + var(--j) * .08s)}
#comment-ca-marche .b6-anim .b6-st{transition:opacity .3s ease calc(var(--b6-t0) + var(--i) * .32s + .2s)}
#comment-ca-marche .b6-anim .b6-k{transition:color .3s ease calc(var(--b6-t0) + var(--i) * .32s)}
#comment-ca-marche .b6-anim:not(.is-in) .b6-k{color:#16393e73}
#comment-ca-marche .b6-anim.is-in .b6-halo{animation:b6-flash 1.1s ease-out 3.9s both}
@media(prefers-reduced-motion:reduce){#comment-ca-marche .b6-scan{display:none}}
/* correctif : le cadre restait caché pendant qu'il se dessinait (le halo était à 0 jusqu'à son éclat final).
   Le halo est visible dès le début ; à la fin, il s'intensifie un instant puis se pose. */
@keyframes b6-glow{0%{filter:drop-shadow(0 0 4px #ff6860b3) drop-shadow(0 0 18px #ff686059)}50%{filter:drop-shadow(0 0 9px #ff6860) drop-shadow(0 0 44px #ff6860b3)}100%{filter:drop-shadow(0 0 4px #ff6860b3) drop-shadow(0 0 18px #ff686059)}}
#comment-ca-marche .b6-anim:not(.is-in) .b6-halo,#comment-ca-marche .b6-anim .b6-halo{opacity:1}
#comment-ca-marche .b6-anim.is-in .b6-halo{animation:b6-glow 1.2s ease-in-out 3.9s both}

/* 17/10, 23 h 25 : animation ralentie et plus « premium » (demande de Christel). Sauvegarde : bloc6-v2.avant-premium.css
   Même déroulé, une seule fois, environ 8 secondes, mouvements doux (accélère et ralentit en douceur) :
   1. le cadre se dessine lentement (2,6 s), avec une tête de lumière plus fine ;
   2. une ligne de lumière très fine descend sur la carte (4,2 s), avec une traîne légère au lieu d'une bande colorée ;
   3. chaque ligne s'allume en fondu lent au passage de la lumière (signal, puis mot de la couleur) ;
   4. le halo respire une seule fois, lentement, puis se pose. */
#comment-ca-marche .b6-ring{background:conic-gradient(from -90deg,#ff8b7e 0deg,#ff8b7e calc(var(--b6-a) - 24deg),#ffc9c1 calc(var(--b6-a) - 6deg),#fff6f4 var(--b6-a),#ff8b7e00 var(--b6-a));padding:2px}
#comment-ca-marche .b6-anim.is-in .b6-ring{animation:b6-trace 2.6s cubic-bezier(.65,0,.35,1) .2s both}

#comment-ca-marche .b6-scan{top:-90px;height:90px;
  background:linear-gradient(#ff686000 0,#ff68600a 55%,#ff686024 92%,#ff8b7ecc 99%,#fff4f2 100%);
  box-shadow:0 1px 16px #ff686066}
@keyframes b6-scan{0%{top:-90px;opacity:0}10%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}
#comment-ca-marche .b6-anim.is-in .b6-scan{animation:b6-scan 4.2s cubic-bezier(.45,.05,.55,.95) 2.2s both}

#comment-ca-marche .b6-anim{--b6-t0:3.9s}
#comment-ca-marche .b6-anim .b6-sig i{transition:background-color .7s cubic-bezier(.4,0,.2,1) calc(var(--b6-t0) + var(--i) * .5s + var(--j) * .12s)}
#comment-ca-marche .b6-anim .b6-k{transition:color .7s ease calc(var(--b6-t0) + var(--i) * .5s)}
#comment-ca-marche .b6-anim .b6-st{transition:opacity .8s ease calc(var(--b6-t0) + var(--i) * .5s + .35s)}
#comment-ca-marche .b6-anim .b6-why{transition:opacity .7s ease calc(var(--b6-t0) + var(--i) * .5s)}
#comment-ca-marche .b6-anim:not(.is-in) .b6-why{opacity:.45}

@keyframes b6-glow{0%{filter:drop-shadow(0 0 4px #ff6860b3) drop-shadow(0 0 18px #ff686059)}45%{filter:drop-shadow(0 0 7px #ff6860e6) drop-shadow(0 0 36px #ff686099)}100%{filter:drop-shadow(0 0 4px #ff6860b3) drop-shadow(0 0 18px #ff686059)}}
#comment-ca-marche .b6-anim.is-in .b6-halo{animation:b6-glow 2.4s cubic-bezier(.45,0,.55,1) 6.2s both}

/* 18/10, 0 h : les étapes 1, 2 et 3 entrent dans l'animation, et le cadre de droite est ralenti (demande de Christel).
   Toujours UNE seule séquence, jouée une fois (environ 11 secondes), qui raconte le bloc dans l'ordre :
   0,2 s  étape 1 s'éveille (texte qui se révèle, halo lumineux autour du numéro) ;
   0,8 s  le fil corail descend de l'étape 1 à l'étape 2 ;
   1,8 s  étape 2 s'éveille, et c'est elle qui allume la carte : le cadre se dessine lentement (3,4 s) ;
   3,6 s  le fil descend de l'étape 2 à l'étape 3 ; 4,6 s étape 3 s'éveille ;
   5 s    la ligne de lumière descend sur la carte, chaque ligne s'allume à son passage ;
   9,4 s  le halo de la carte respire une fois, puis tout se pose. Ensuite, plus rien ne bouge.
   État final identique à la page sans animation. Sauvegardes : bloc6-v2.avant-etapes.css / .js */

/* fil corail entre les étapes (visible aussi sans animation) */
#comment-ca-marche .b6-step::after{content:"";position:absolute;left:27px;top:66px;bottom:8px;width:3px;border-radius:2px;
  background:linear-gradient(#ff8b7e,#ff686099);transform-origin:50% 0}
#comment-ca-marche .b6-step:last-child::after{display:none}
@media(max-width:600px){#comment-ca-marche .b6-step::after{left:22px;top:56px}}

/* état avant la séquence */
#comment-ca-marche .b6-anim:not(.is-in) .b6-step > div{opacity:.38}
#comment-ca-marche .b6-anim:not(.is-in) .b6-n{opacity:.45}
#comment-ca-marche .b6-anim:not(.is-in) .b6-step::after{transform:scaleY(0)}

/* éveil des étapes, l'une après l'autre */
#comment-ca-marche .b6-anim .b6-step > div,#comment-ca-marche .b6-anim .b6-n{transition:opacity .9s cubic-bezier(.4,0,.2,1)}
#comment-ca-marche .b6-anim .b6-step::after{transition:transform 1s cubic-bezier(.65,0,.35,1)}
#comment-ca-marche .b6-anim .b6-step:nth-child(1) > div,#comment-ca-marche .b6-anim .b6-step:nth-child(1) .b6-n{transition-delay:.2s}
#comment-ca-marche .b6-anim .b6-step:nth-child(2) > div,#comment-ca-marche .b6-anim .b6-step:nth-child(2) .b6-n{transition-delay:1.8s}
#comment-ca-marche .b6-anim .b6-step:nth-child(3) > div,#comment-ca-marche .b6-anim .b6-step:nth-child(3) .b6-n{transition-delay:4.6s}
#comment-ca-marche .b6-anim .b6-step:nth-child(1)::after{transition-delay:.8s}
#comment-ca-marche .b6-anim .b6-step:nth-child(2)::after{transition-delay:3.6s}
@keyframes b6-wake{0%{box-shadow:0 0 0 0 #ff686000;transform:scale(1)}30%{box-shadow:0 0 0 6px #ff686040,0 0 26px #ff686066;transform:scale(1.07)}100%{box-shadow:0 0 0 14px #ff686000,0 0 0 #ff686000;transform:scale(1)}}
#comment-ca-marche .b6-anim.is-in .b6-step:nth-child(1) .b6-n{animation:b6-wake 1.6s cubic-bezier(.4,0,.2,1) .2s both}
#comment-ca-marche .b6-anim.is-in .b6-step:nth-child(2) .b6-n{animation:b6-wake 1.6s cubic-bezier(.4,0,.2,1) 1.8s both}
#comment-ca-marche .b6-anim.is-in .b6-step:nth-child(3) .b6-n{animation:b6-wake 1.6s cubic-bezier(.4,0,.2,1) 4.6s both}

/* la carte : cadre plus lent, puis la ligne de lumière, puis les lignes */
#comment-ca-marche .b6-anim.is-in .b6-ring{animation:b6-trace 3.4s cubic-bezier(.65,0,.35,1) 2s both}
#comment-ca-marche .b6-anim.is-in .b6-scan{animation:b6-scan 4.4s cubic-bezier(.45,.05,.55,.95) 5s both}
#comment-ca-marche .b6-anim{--b6-t0:6.9s}
#comment-ca-marche .b6-anim .b6-sig i{transition:background-color .7s cubic-bezier(.4,0,.2,1) calc(var(--b6-t0) + var(--i) * .42s + var(--j) * .12s)}
#comment-ca-marche .b6-anim .b6-k{transition:color .7s ease calc(var(--b6-t0) + var(--i) * .42s)}
#comment-ca-marche .b6-anim .b6-why{transition:opacity .7s ease calc(var(--b6-t0) + var(--i) * .42s)}
#comment-ca-marche .b6-anim .b6-st{transition:opacity .8s ease calc(var(--b6-t0) + var(--i) * .42s + .35s)}
#comment-ca-marche .b6-anim.is-in .b6-halo{animation:b6-glow 2.6s cubic-bezier(.45,0,.55,1) 9.4s both}
@media(prefers-reduced-motion:reduce){#comment-ca-marche .b6-anim.is-in .b6-n{animation:none}}

/* 19/10 (« que les futurs clients aient le temps de voir ») : sur téléphone, les étapes sont au-dessus de la carte.
   Les étapes s'éveillent quand elles sont à l'écran ; la carte attend d'être elle-même à l'écran (.b6-carte-in, ajouté par bloc6-v2.js),
   puis joue sa séquence avec des délais raccourcis (elle ne dépend plus des étapes). */
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-ring{--b6-a:0deg;animation:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-scan{animation:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-halo{animation:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-sig i{background:#16393e1f !important;transition:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-k{color:#16393e73;transition:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-why{opacity:.45;transition:none}
#comment-ca-marche .b6-anim.b6-empile:not(.b6-carte-in) .b6-st{opacity:0;transition:none}
#comment-ca-marche .b6-anim.b6-empile.b6-carte-in{--b6-t0:3.4s}
#comment-ca-marche .b6-anim.b6-empile.b6-carte-in .b6-ring{animation:b6-trace 3s cubic-bezier(.65,0,.35,1) .3s both}
#comment-ca-marche .b6-anim.b6-empile.b6-carte-in .b6-scan{animation:b6-scan 3.6s cubic-bezier(.45,.05,.55,.95) 1.8s both}
#comment-ca-marche .b6-anim.b6-empile.b6-carte-in .b6-halo{animation:b6-glow 2.6s cubic-bezier(.45,0,.55,1) 5.9s both}

/* ===== survol.css ===== */
/* SOLIS – Survol à la souris (18/10/2026, aperçu). Demande de Christel : « une animation premium et pas lourde » au passage de la souris.
   Choix : pas d'effet sur toute la page (gadget, fatigant). La page répond doucement là où on pose la souris :
   1. cartes papier (blocs 4, 5, 6) : une lumière corail très douce suit la souris, comme une lampe promenée sur une feuille ;
   2. étapes du bloc 6 : le numéro de l'étape survolée s'illumine légèrement.
   Dès qu'une souris ou un pavé tactile est présent (18/10, 0 h 05 : élargi, car les ordinateurs à écran tactile se déclaraient « sans souris » ; lumière renforcée), et rien si l'ordinateur demande moins d'animations. */
@media (any-hover:hover){
  .sv-glow{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(320px circle at var(--sv-x,50%) var(--sv-y,50%),#ff686038 0%,#ff68601a 35%,#ff686000 68%);
    transition:opacity .6s cubic-bezier(.4,0,.2,1)}
  .sv-on > .sv-glow{opacity:1}

  #comment-ca-marche .b6-n{transition:box-shadow .5s cubic-bezier(.4,0,.2,1),background-color .5s ease,color .5s ease}
  #comment-ca-marche .b6-step:hover .b6-n{box-shadow:0 0 0 5px #ff68601f,0 0 22px #ff686040}
  #comment-ca-marche .b6-step:not(.is-diag):hover .b6-n{background:#ff68600f}
}
@media (prefers-reduced-motion:reduce){.sv-glow{display:none}}

/* 18/10, 0 h 05 : la lumière sur toute la page (demande de Christel).
   Une très grande lumière corail, très diffuse, qui suit la souris avec un léger retard (comme une lampe qu'on déplace).
   Mélange « écran » : elle se voit dans les blocs foncés (la « nuit » de la page) et reste presque invisible sur les blocs clairs.
   Elle s'efface quand la souris s'arrête un moment ou quitte la fenêtre. Léger : un seul élément, déplacé par la carte graphique. */
@media (any-hover:hover){
  .sv-lamp{position:fixed;z-index:60;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,#ff6a5c26 0%,#ff6a5c12 30%,#ff6a5c05 52%,#ff6a5c00 70%);
    mix-blend-mode:screen;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);will-change:transform}
  .sv-lamp.is-on{opacity:1}
}
@media (prefers-reduced-motion:reduce){.sv-lamp{display:none}}

/* ===== bloc7-v2.css ===== */
/* SOLIS – Bloc 7 « Mise à niveau », retouche du 18/10/2026 (1 h). Version de Christel gardée (Avant / Après, Kenai, fil corail).
   Demande : la carte de droite plus à droite, et une autre architecture de texte que le bloc 3 (titre + liste à coches + phrase).
   C'est ici que l'indépendant achète : la liste devient un « devis » qu'il lit comme ceux qu'il fait à ses propres clients
   (chaque ligne « Inclus », un total, le bouton, puis la garantie juste dessous). Sauvegarde : index-hero-c.avant-devis7.html */

/* 1. Les fiches Avant / Après glissent vers la droite (ordinateur seulement) */
@media(min-width:1001px){
  #mise-en-place .upgrade-copy{width:37% !important}
  #mise-en-place .upgrade-before{left:51.2% !important}
  #mise-en-place .upgrade-after{left:63% !important}
  #mise-en-place .upgrade-arrow{left:69.1% !important}
}

/* 2. Le devis */
#mise-en-place .up-devis{position:relative;margin-top:28px;max-width:540px;border-radius:20px;background:#fffdf9;color:#1d2226;
  box-shadow:inset 0 3px 0 #ff8b7e,0 28px 60px -32px #1d222680,0 8px 20px -12px #1d222633;overflow:hidden}
#mise-en-place .up-devis-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 26px 14px;border-bottom:1px dashed #1d222633}
#mise-en-place .up-devis-head p{font:700 clamp(21px,1.75vw,25px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#1d2226}
#mise-en-place .up-devis-head span{flex:none;padding:6px 12px;border-radius:999px;background:#ff68601c;font:700 16px/1 var(--f-texte,Arial,sans-serif);color:#c8433a}
#mise-en-place .up-lines{list-style:none;margin:0;padding:6px 26px}
#mise-en-place .up-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;font-size:clamp(17px,1.25vw,18px);line-height:1.45;color:#1d2226}
#mise-en-place .up-lines li+li{border-top:1px solid #1d222612}
#mise-en-place .up-lines b{flex:none;font-size:16px;font-weight:700;color:#24864f}
#mise-en-place .up-total{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 26px 0;padding:16px 0 4px;border-top:2px solid #1d2226}
#mise-en-place .up-total-k{font:700 20px/1.2 var(--f-texte,Arial,sans-serif);color:#1d2226}
#mise-en-place .up-total-s{margin-top:4px !important;font-size:16px;color:#4a5357}
#mise-en-place .up-total-v{font:700 clamp(46px,3.8vw,56px)/1 var(--f-titre,Arial,sans-serif);letter-spacing:-.03em;color:#1d2226;white-space:nowrap}
#mise-en-place .up-total-v small{font:600 18px/1 var(--f-texte,Arial,sans-serif);letter-spacing:0;color:#4a5357}
#mise-en-place .up-compare{margin:6px 26px 0 !important;font-size:16px;line-height:1.45;color:#4a5357}
#mise-en-place .up-devis .solis-offer-cta{margin:20px 26px 26px !important}

/* 3. Garantie et réassurance, juste sous le devis */
#mise-en-place .upgrade-copy .offer-band{max-width:540px !important;margin-top:16px !important;font-size:17px !important;padding:16px 20px !important}
#mise-en-place .upgrade-copy .offer-reassurance{max-width:540px;font-size:17px !important;line-height:1.55 !important}

@media(max-width:1000px){
  #mise-en-place .up-devis,#mise-en-place .upgrade-copy .offer-band{max-width:610px !important}
}
@media(max-width:700px){
  #mise-en-place .up-devis-head{padding:18px 18px 12px;flex-wrap:wrap}
  #mise-en-place .up-lines{padding:4px 18px}
  #mise-en-place .up-lines li{font-size:17px;gap:12px}
  #mise-en-place .up-total{margin:4px 18px 0}
  #mise-en-place .up-compare{margin:6px 18px 0 !important}
  #mise-en-place .up-devis .solis-offer-cta{margin:18px !important;width:calc(100% - 36px) !important}
}

/* ===== bloc7-compare.css ===== */
/* SOLIS – Bloc 7, Avant / Après en curseur de comparaison (18/10/2026, 9 h).
   Remplace les deux fiches côte à côte et la flèche (qui se chevauchaient). Une seule fiche Google, coupée par une ligne corail :
   à gauche de la ligne l'Avant, à droite l'Après SOLIS. Le visiteur la fait glisser (souris, doigt ou flèches du clavier).
   Une seule animation, jouée une fois : 2 secondes après l'arrivée sur le bloc, la ligne balaie la fiche de droite à gauche
   et révèle l'Après, puis s'arrête près du bord pour inviter à comparer. Sauvegarde : index-hero-c.avant-compare7.html */

#mise-en-place .upgrade-comparison{display:none !important}

#mise-en-place .b7-compare{position:absolute;z-index:3;left:58%;top:calc(462 * var(--u));width:min(35%,540px)}
#mise-en-place .b7c-frame{position:relative;display:grid;border-radius:26px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px #1d22260f,0 40px 90px -40px #1d2226a6,0 14px 30px -16px #1d222659,0 0 90px #ff75602e;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
#mise-en-place .b7c-layer{grid-area:1/1;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif}
#mise-en-place .b7c-ap{clip-path:inset(0 0 0 var(--p,100%))}
#mise-en-place .b7c-av .b7c-cover img{filter:grayscale(.55) brightness(.92)}
#mise-en-place .b7c-cover{height:200px;overflow:hidden}
#mise-en-place .b7c-cover img{display:block;width:100%;height:100%;object-fit:cover}
#mise-en-place .b7c-body{padding:20px 24px 24px}
#mise-en-place .b7c-name{margin:0;font:600 24px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.01em;color:#202124}
#mise-en-place .b7c-rate{margin:6px 0 0;font-size:16px;color:#5f6368}
#mise-en-place .b7c-stars{color:#fbbc04;letter-spacing:1px}
#mise-en-place .b7c-stars i{font-style:normal;color:#dadce0}
#mise-en-place .b7c-cat{margin:4px 0 0;font-size:16px;color:#5f6368}
#mise-en-place .b7c-ap .b7c-cat{color:#202124;font-weight:600}
#mise-en-place .b7c-rows{margin-top:16px;padding-top:14px;border-top:1px solid #e8eaed}
#mise-en-place .b7c-rows p{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:16px;color:#3c4043}
#mise-en-place .b7c-rows svg{flex:none;width:20px;height:20px;fill:none;stroke:#5f6368;stroke-width:1.6}
#mise-en-place .b7c-rows em{font-style:normal;color:#188038;font-weight:600}
#mise-en-place .b7c-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:104px;margin-top:6px;border-radius:12px;overflow:hidden}
#mise-en-place .b7c-gal img{display:block;width:100%;height:100%;object-fit:cover}
#mise-en-place .b7c-empty{grid-template-columns:1fr;place-items:center;background:#f1f3f4;font-size:16px;color:#80868b}
#mise-en-place .b7c-rev{margin-top:16px;padding-top:14px;border-top:1px solid #e8eaed;font-size:16px;line-height:1.45;color:#3c4043}
#mise-en-place .b7c-rev p{margin:0}
#mise-en-place .b7c-miss{color:#c5221f !important;font-weight:600}
#mise-en-place .b7c-rev .b7c-miss{margin-top:6px}
#mise-en-place .b7c-reply{margin-top:8px !important;padding-left:12px;border-left:3px solid #dadce0;color:#5f6368}

/* Étiquettes : chacune s'efface quand son côté disparaît */
#mise-en-place .b7c-tag{position:absolute;top:16px;z-index:3;padding:8px 15px;border-radius:999px;font:700 16px/1 var(--f-texte,Arial,sans-serif);
  pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#mise-en-place .b7c-tag-av{left:16px;background:#1d2226b3;color:#fff;opacity:var(--o-av,1)}
#mise-en-place .b7c-tag-ap{right:16px;background:#ff6860;color:#fff;box-shadow:0 6px 18px -6px #ff6860;opacity:var(--o-ap,0)}

/* La ligne et sa poignée */
#mise-en-place .b7c-handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--p,100%);width:44px;margin-left:-22px;outline:none;cursor:ew-resize}
#mise-en-place .b7c-handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff6860;box-shadow:0 0 14px #ff6860b3}
#mise-en-place .b7c-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;
  background:#ff6860;color:#fff;box-shadow:0 0 0 6px #ff686038,0 10px 24px -8px #c8433acc;transition:transform .25s ease}
#mise-en-place .b7c-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7c-frame:hover .b7c-knob,#mise-en-place .b7c-handle:focus-visible .b7c-knob{transform:scale(1.08)}
#mise-en-place .b7c-handle:focus-visible::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;outline:3px solid #16393e}
#mise-en-place .b7c-hint{margin:14px 0 0;text-align:center;font-size:16px;color:#5d6d70}

/* Tablette et téléphone : la fiche passe sous le devis, en pleine largeur */
@media(max-width:1000px){
  #mise-en-place .b7-compare{position:relative;left:auto;top:auto;width:100%;max-width:540px;margin:56px 0 0}
}
@media(max-width:600px){
  #mise-en-place .b7c-cover{height:170px}
  #mise-en-place .b7c-body{padding:16px 18px 20px}
  #mise-en-place .b7c-name{font-size:21px}
  #mise-en-place .b7c-gal{height:84px}
}
@media(prefers-reduced-motion:reduce){#mise-en-place .b7c-tag,#mise-en-place .b7c-knob{transition:none}}

/* ===== bloc7-offre.css ===== */
/* SOLIS – Bloc 7, carte d'offre (18/10/2026, 9 h 10). Remplace le « devis » (lignes « Inclus » répétées).
   Construite sur les questions qu'un indépendant se pose avant de payer, dans l'ordre où il se les pose :
   1. Combien ? 89 € HT, une seule fois, sans abonnement, et le prix d'un seul nouveau client.
   2. Qu'est-ce que j'ai ? Les 4 étapes du site (trouver, comprendre, choisir, joindre), celles du diagnostic du bloc 6.
   3. Quand ? Aujourd'hui → 7 jours ouvrés → 30 jours.
   4. Est-ce que je risque quelque chose ? Juste sous le bouton : fiche à vous, jamais de mot de passe, en français, et la garantie.
   Carte papier, liseré corail, coches vertes, bandeau bleu pétrole. Rien sous 16 px. Pas d'animation (celle du bloc est le curseur).
   Sauvegarde : index-hero-c.avant-offre7.html */

#mise-en-place .up-devis,#mise-en-place .upgrade-copy > .offer-band{display:none !important}

#mise-en-place .b7o{position:relative;margin-top:30px;max-width:560px;border-radius:24px;background:#fffdf9;color:#1d2226;overflow:hidden;
  box-shadow:inset 0 3px 0 #ff8b7e,0 0 0 1px #1d22260d,0 34px 70px -34px #1d222680,0 10px 24px -14px #1d222633}
#mise-en-place .b7o p{margin:0}

/* 1. Combien */
#mise-en-place .b7o-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:26px 28px 0}
#mise-en-place .b7o-name{font:700 clamp(21px,1.75vw,25px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#1d2226}
#mise-en-place .b7o-tag{display:inline-block;margin-top:10px !important;padding:6px 12px;border-radius:999px;background:#ff68601c;font:700 16px/1 var(--f-texte,Arial,sans-serif);color:#c8433a}
#mise-en-place .b7o-price{text-align:right}
#mise-en-place .b7o-amount{font:700 clamp(50px,4.2vw,62px)/.95 var(--f-titre,Arial,sans-serif);letter-spacing:-.035em;color:#1d2226;white-space:nowrap}
#mise-en-place .b7o-amount span{font:600 18px/1 var(--f-texte,Arial,sans-serif);letter-spacing:0;color:#4a5357}
#mise-en-place .b7o-once{margin-top:8px !important;font-size:16px;color:#4a5357;white-space:nowrap}
#mise-en-place .b7o-roi{margin:18px 28px 0 !important;padding:12px 16px;border-radius:12px;background:#2fa86614;font:600 17px/1.4 var(--f-texte,Arial,sans-serif);color:#1d6b42}

/* 2. Ce que vous avez : les 4 étapes du client */
#mise-en-place .b7o-axes{list-style:none;margin:20px 28px 0;padding:0}
#mise-en-place .b7o-axes li{position:relative;padding:12px 0 12px 40px;border-top:1px solid #1d222612}
#mise-en-place .b7o-axes li:first-child{border-top:0}
#mise-en-place .b7o-axes li::before{content:"";position:absolute;left:0;top:13px;width:26px;height:26px;border-radius:50%;background:#2fa8661a}
#mise-en-place .b7o-axes li::after{content:"";position:absolute;left:7px;top:20px;width:12px;height:7px;border-left:2.4px solid #2fa866;border-bottom:2.4px solid #2fa866;transform:rotate(-45deg)}
#mise-en-place .b7o-k{font:700 18px/1.3 var(--f-texte,Arial,sans-serif);color:#1d2226}
#mise-en-place .b7o-axes li p:last-child{margin-top:3px !important;font-size:17px;line-height:1.45;color:#4a5357}

/* 3. Quand */
#mise-en-place .b7o-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:18px 28px 0;padding:18px 0 0;border-top:1px dashed #1d222633}
#mise-en-place .b7o-steps::before{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:29px;height:2px;background:linear-gradient(90deg,#ff8b7e,#ff6860)}
#mise-en-place .b7o-steps li{position:relative;text-align:center}
#mise-en-place .b7o-dot{display:block;width:16px;height:16px;margin:3px auto 10px;border-radius:50%;background:#fffdf9;border:3px solid #ff6860;position:relative}
#mise-en-place .b7o-steps li:first-child .b7o-dot{background:#ff6860}
#mise-en-place .b7o-when{font:700 16px/1.25 var(--f-texte,Arial,sans-serif);color:#c8433a}
#mise-en-place .b7o-steps li p:last-child{margin-top:2px !important;font-size:16px;line-height:1.35;color:#1d2226}

/* 4. Le bouton, puis ce qui rassure, juste dessous */
#mise-en-place .b7o .b7o-cta{display:flex !important;width:auto !important;margin:24px 28px 0 !important;justify-content:center !important}
#mise-en-place .b7o-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px 28px 0 !important;font-size:16px;color:#4a5357}
#mise-en-place .b7o-trust span{display:inline-flex;align-items:center;gap:7px}
#mise-en-place .b7o-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2fa866}
#mise-en-place .b7o-band{display:flex;gap:14px;align-items:flex-start;margin-top:22px !important;padding:18px 28px 20px;background:#16393e;color:#eef3f3;font:600 17px/1.5 var(--f-texte,Arial,sans-serif)}
#mise-en-place .b7o-band svg{flex:none;width:24px;height:24px;margin-top:1px;fill:none;stroke:#7fe0ad;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#mise-en-place .upgrade-copy .offer-reassurance{margin-top:18px !important}

@media(max-width:1000px){#mise-en-place .b7o{max-width:610px}}
@media(max-width:600px){
  #mise-en-place .b7o-top{flex-direction:column;gap:14px;padding:22px 20px 0}
  #mise-en-place .b7o-price{text-align:left}
  #mise-en-place .b7o-roi,#mise-en-place .b7o-trust{margin-left:20px !important;margin-right:20px !important}
  #mise-en-place .b7o-axes,#mise-en-place .b7o-steps{margin-left:20px;margin-right:20px}
  #mise-en-place .b7o .b7o-cta{margin:22px 20px 0 !important;width:auto !important}
  #mise-en-place .b7o-band{padding:16px 20px 18px}
  #mise-en-place .b7o-trust{justify-content:flex-start}
}

/* Carte de droite agrandie (demande du 18/10, 9 h) */
@media(min-width:1001px){
  #mise-en-place .b7-compare{left:55% !important;width:min(39%,620px) !important}
  #mise-en-place .b7c-cover{height:240px}
  #mise-en-place .b7c-gal{height:120px}
}

/* 18/10, 9 h 15 : retour à la liste validée (demande de Christel). Les 4 étapes regroupées faisaient croire
   qu'on modifie les réseaux sociaux : SOLIS les compare et dit quoi corriger, mais n'y touche jamais. */
#mise-en-place .b7o-list{list-style:none;margin:20px 28px 0;padding:0}
#mise-en-place .b7o-list li{position:relative;padding:11px 0 11px 40px;border-top:1px solid #1d222612;font-size:clamp(17px,1.3vw,18px);line-height:1.45;color:#1d2226}
#mise-en-place .b7o-list li:first-child{border-top:0}
#mise-en-place .b7o-list li::before{content:"";position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:50%;background:#2fa8661a}
#mise-en-place .b7o-list li::after{content:"";position:absolute;left:7px;top:19px;width:12px;height:7px;border-left:2.4px solid #2fa866;border-bottom:2.4px solid #2fa866;transform:rotate(-45deg)}
@media(max-width:600px){#mise-en-place .b7o-list{margin-left:20px;margin-right:20px}}

/* ===== bloc7-panneau.css ===== */
/* SOLIS – Bloc 7, un seul panneau d'offre (18/10/2026, 9 h 20). Demande de Christel : « ça fait deux cartes côte à côte ».
   L'offre et l'Avant / Après deviennent UN objet, comme une page produit : l'offre à gauche, la fiche Google
   sur un fond teinté corail à droite, et la garantie en bandeau bleu pétrole sur toute la largeur, en bas.
   Sauvegarde : index-hero-c.avant-panneau7.html */

@media(min-width:1001px){
  #mise-en-place .upgrade-copy{width:min(84.5%,1300px) !important}
  #mise-en-place .upgrade-copy h2,#mise-en-place .upgrade-copy .upgrade-lead{max-width:700px}
}

#mise-en-place .b7p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"offer visual" "band band";
  max-width:none !important;margin-top:40px;border-radius:30px}
#mise-en-place .b7p-offer{grid-area:offer;padding:6px 0 30px}
#mise-en-place .b7p .b7o-top{padding-top:30px}
#mise-en-place .b7p .b7o-list,#mise-en-place .b7p .b7o-steps{margin-top:22px}

#mise-en-place .b7p-visual{grid-area:visual;position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:44px 48px 26px;border-left:1px solid #1d22260f;
  background:radial-gradient(ellipse 75% 65% at 60% 40%,#ffd3c7 0%,#ffe6de 45%,#f9eee6 100%)}
#mise-en-place .b7p .b7-compare{position:relative !important;left:auto !important;top:auto !important;width:100% !important;max-width:none !important;margin:0 !important;z-index:1}
#mise-en-place .b7p .b7c-frame{box-shadow:0 0 0 1px #1d22260f,0 40px 80px -36px #8a3a2a8c,0 14px 30px -18px #1d222659}
#mise-en-place .b7p .b7c-hint{color:#6b4a43}

#mise-en-place .b7p .b7o-band{grid-area:band;margin:0 !important;padding:20px 32px 22px;font-size:18px;justify-content:center}

/* Tablette et téléphone : l'offre, puis la fiche, puis la garantie */
@media(max-width:1000px){
  #mise-en-place .b7p{grid-template-columns:minmax(0,1fr);grid-template-areas:"offer" "visual" "band";max-width:640px !important}
  #mise-en-place .b7p-visual{border-left:0;border-top:1px solid #1d22260f;padding:32px 24px 22px}
}
@media(max-width:600px){
  #mise-en-place .b7p-visual{padding:24px 16px 18px}
  #mise-en-place .b7p .b7o-band{padding:16px 20px 18px;font-size:17px;justify-content:flex-start}
}
#mise-en-place .b7p::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#ff8b7e;z-index:2;pointer-events:none}

/* ===== bloc7-bento.css ===== */
/* SOLIS – Bloc 7 en grille « bento » (18/10/2026, 9 h 30). Demande de Christel : plus moderne, moins ennuyeux.
   Une grille de tuiles de tailles différentes, chacune avec UN seul rôle, lisible d'un coup d'œil :
   - la tuile vedette (anthracite, la seule sombre) : le prix, le bouton. Les anneaux du radar SOLIS en filigrane ;
   - la grande tuile corail : la fiche Avant / Après à faire glisser ;
   - puis ce qu'on fait, le calendrier, la garantie (bleu pétrole) et « votre fiche reste à vous ».
   Charte respectée : corail + anthracite, cartes papier, bandeau bleu pétrole, coches vertes, rien sous 16 px.
   Une seule animation dans le bloc (le balayage du curseur). Survol à la souris : la tuile se soulève légèrement.
   Sauvegarde : index-hero-c.avant-bento7.html */

#mise-en-place .b7b-grid{--g:18px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);margin-top:40px;
  grid-template-areas:
    "a a a a a b b b b b b b"
    "c c c c c b b b b b b b"
    "d d d d d d e e e f f f"}
#mise-en-place .b7b-tile{position:relative;overflow:hidden;border-radius:28px;padding:30px 32px;background:#fffdf9;color:#1d2226;
  box-shadow:0 0 0 1px #1d22260f,0 20px 44px -30px #1d222666;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
#mise-en-place .b7b-tile p{margin:0}
@media(any-hover:hover){
  #mise-en-place .b7b-tile:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #1d22261a,0 30px 60px -30px #1d222680}
  #mise-en-place .b7b-visual:hover{transform:none}
}
#mise-en-place .b7b-t{font:700 clamp(21px,1.75vw,25px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#1d2226}

/* A. La tuile vedette : le prix et le bouton */
#mise-en-place .b7b-offer{grid-area:a;display:flex;flex-direction:column;padding:34px 36px 32px;color:#f3f1ee;
  background:radial-gradient(120% 90% at 100% 0%,#5a2c26 0%,#2c2a2b 38%,#212528 70%);box-shadow:0 30px 60px -30px #1d2226cc}
#mise-en-place .b7b-rings{position:absolute;right:-6px;top:-6px;width:300px;height:300px;fill:none;stroke:#ff8b7e;stroke-width:1;opacity:.28;pointer-events:none}
#mise-en-place .b7b-offer-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#mise-en-place .b7b-name{font:700 clamp(21px,1.75vw,25px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#fff}
#mise-en-place .b7b-pill{padding:7px 13px;border-radius:999px;background:#ff686033;border:1px solid #ff8b7e66;font:700 16px/1 var(--f-texte,Arial,sans-serif);color:#ffc2bb}
#mise-en-place .b7b-price{position:relative;margin-top:26px !important;font:700 clamp(84px,7.4vw,118px)/.9 var(--f-titre,Arial,sans-serif);letter-spacing:-.05em;color:#fff;
  font-variation-settings:"opsz" 96}
#mise-en-place .b7b-price span{margin-left:10px;font:600 22px/1 var(--f-texte,Arial,sans-serif);letter-spacing:0;color:#c5cacc;vertical-align:top}
#mise-en-place .b7b-once{margin-top:12px !important;font-size:18px;color:#c5cacc}
#mise-en-place .b7b-roi{display:flex;align-items:center;gap:10px;margin-top:20px !important;padding-top:18px;border-top:1px solid #ffffff1f;
  font:700 20px/1.3 var(--f-texte,Arial,sans-serif);color:#ff8b7e}
#mise-en-place .b7b-roi svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7b-offer .b7b-cta{display:flex !important;width:100% !important;justify-content:center !important;margin-top:auto !important;
  box-shadow:0 14px 30px -12px #ff6860b3}
#mise-en-place .b7b-offer .b7b-roi{margin-bottom:26px !important}
#mise-en-place .b7b-nofiche{margin-top:14px !important;text-align:center;font-size:16px;color:#c5cacc}
#mise-en-place .b7b-nofiche a{color:#fff;text-decoration:none;border-bottom:1px solid #ff8b7e;font-weight:600}

/* B. La grande tuile : la fiche Avant / Après */
#mise-en-place .b7b-visual{grid-area:b;display:flex;flex-direction:column;justify-content:center;padding:30px 40px 24px;
  background:radial-gradient(ellipse 80% 70% at 55% 45%,#ffd3c7 0%,#ffe6de 45%,#f9eee6 100%)}
#mise-en-place .b7b-visual-t{margin-bottom:18px !important;font:700 18px/1.3 var(--f-texte,Arial,sans-serif);color:#8a3a2a}
#mise-en-place .b7b-visual .b7-compare{position:relative !important;left:auto !important;top:auto !important;width:100% !important;max-width:none !important;margin:0 !important}
#mise-en-place .b7b-visual .b7c-frame{box-shadow:0 0 0 1px #1d22260f,0 40px 80px -36px #8a3a2a8c,0 14px 30px -18px #1d222659}
#mise-en-place .b7b-visual .b7c-hint{color:#6b4a43}

/* C. Ce qu'on fait */
#mise-en-place .b7b-list{grid-area:c}
#mise-en-place .b7b-list ul{list-style:none;margin:14px 0 0;padding:0}
#mise-en-place .b7b-list li{position:relative;padding:11px 0 11px 40px;border-top:1px solid #1d222612;font-size:clamp(17px,1.3vw,18px);line-height:1.45}
#mise-en-place .b7b-list li:first-child{border-top:0}
#mise-en-place .b7b-list li::before{content:"";position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:50%;background:#2fa8661a}
#mise-en-place .b7b-list li::after{content:"";position:absolute;left:7px;top:19px;width:12px;height:7px;border-left:2.4px solid #2fa866;border-bottom:2.4px solid #2fa866;transform:rotate(-45deg)}

/* D. Le calendrier */
#mise-en-place .b7b-time{grid-area:d}
#mise-en-place .b7b-time ol{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:24px 0 0;padding:26px 0 0}
#mise-en-place .b7b-time ol::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:2px;background:linear-gradient(90deg,#ff6860,#ff8b7e 60%,#ff8b7e55)}
#mise-en-place .b7b-time li{position:relative}
#mise-en-place .b7b-time li::before{content:"";position:absolute;left:0;top:-26px;width:16px;height:16px;border-radius:50%;background:#fffdf9;border:3px solid #ff6860;box-sizing:border-box}
#mise-en-place .b7b-time li:first-child::before{background:#ff6860}
#mise-en-place .b7b-when{font:700 clamp(21px,1.75vw,25px)/1.15 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#c8433a}
#mise-en-place .b7b-time li p:last-child{margin-top:6px !important;font-size:17px;line-height:1.4;color:#4a5357}

/* E. La garantie */
#mise-en-place .b7b-guar{grid-area:e;display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:#16393e;color:#eef3f3;
  box-shadow:0 24px 50px -30px #16393ecc}
#mise-en-place .b7b-guar svg{width:46px;height:46px;fill:none;stroke:#7fe0ad;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7b-guar p{font:700 clamp(18px,1.4vw,20px)/1.4 var(--f-texte,Arial,sans-serif)}

/* F. Votre fiche reste à vous */
#mise-en-place .b7b-keep{grid-area:f;display:flex;flex-direction:column;gap:10px}
#mise-en-place .b7b-keep svg{width:40px;height:40px;margin-bottom:6px;fill:none;stroke:#c8433a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7b-keep p:last-child{font-size:17px;line-height:1.5;color:#4a5357}

#mise-en-place .b7b-after{margin-top:22px !important}

/* Tablette : 2 colonnes. Téléphone : 1 colonne, la tuile vedette d'abord */
@media(max-width:1000px){
  #mise-en-place .b7b-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;
    grid-template-areas:"a a" "b b" "c c" "d d" "e f"}
}
@media(max-width:640px){
  #mise-en-place .b7b-grid{--g:14px;grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "e" "f"}
  #mise-en-place .b7b-tile{padding:24px 22px;border-radius:24px}
  #mise-en-place .b7b-visual{padding:22px 14px 18px}
  #mise-en-place .b7b-time ol{grid-template-columns:1fr;gap:18px;padding:0 0 0 30px}
  #mise-en-place .b7b-time ol::before{left:7px;right:auto;top:6px;bottom:6px;width:2px;height:auto;background:linear-gradient(#ff6860,#ff8b7e)}
  #mise-en-place .b7b-time li::before{left:-30px;top:4px}
  #mise-en-place .b7b-rings{width:220px;height:220px}
}
@media(prefers-reduced-motion:reduce){#mise-en-place .b7b-tile{transition:none}}

/* Place pour Kenai sous la grille (il ne doit pas couvrir les tuiles) et calendrier centré dans sa tuile */
@media(min-width:1001px){#mise-en-place.solis-upgrade{padding-bottom:calc(300 * var(--u)) !important}}
@media(max-width:1000px){#mise-en-place.solis-upgrade{padding-bottom:240px !important}}
#mise-en-place .b7b-time{display:flex;flex-direction:column}
#mise-en-place .b7b-time ol{margin-top:auto;margin-bottom:auto}
@media(max-width:640px){#mise-en-place .b7b-time ol{margin-top:20px}}

/* ===== bloc7-bento2.css ===== */
/* SOLIS – Bloc 7, finitions « premium » de la grille (18/10/2026, 9 h 40).
   Inspirées des sites primés (Awwwards, Godly) : bordures en dégradé, projecteur qui suit la souris, grain sur la tuile sombre,
   annotations sur la fiche Avant / Après, sceau de garantie, et l'écran « Personnes et accès » de Google au lieu d'une phrase.
   Toujours une seule animation automatique dans le bloc (le balayage du curseur, qui fait aussi apparaître les annotations).
   Sauvegarde : index-hero-c.avant-bento2.html */

/* 1. Bordures en dégradé (fines, corail vers transparent) */
#mise-en-place .b7b-tile{border:1px solid transparent;box-shadow:0 22px 48px -32px #1d222673;
  background:linear-gradient(#fffdf9,#fffdf9) padding-box,linear-gradient(150deg,#ff8b7e80,#1d22260f 38%,#1d22260f 68%,#ff8b7e40) border-box}
#mise-en-place .b7b-offer{background:radial-gradient(120% 90% at 100% 0%,#5a2c26 0%,#2c2a2b 38%,#212528 70%) padding-box,
  linear-gradient(150deg,#ff8b7e,#ff8b7e00 45%,#ffffff1a 80%) border-box}
#mise-en-place .b7b-visual{background:radial-gradient(ellipse 80% 70% at 55% 45%,#ffd3c7 0%,#ffe6de 45%,#f9eee6 100%) padding-box,
  linear-gradient(150deg,#ff8b7e99,#ff8b7e1a 50%,#ff8b7e66) border-box}
#mise-en-place .b7b-guar{background:radial-gradient(120% 100% at 0% 0%,#1f4a50 0%,#16393e 55%,#112d31 100%) padding-box,
  linear-gradient(150deg,#7fe0ad80,#7fe0ad00 50%,#ffffff14) border-box}

/* 2. Grain très fin sur la tuile sombre (matière, comme du papier) */
#mise-en-place .b7b-offer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 3. Projecteur qui suit la souris (bloc7-bento.js) */
#mise-en-place .b7b-tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#ff68601f,#ff686000 60%)}
#mise-en-place .b7b-offer::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),#ff686033,#ff686000 60%)}
#mise-en-place .b7b-guar::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#7fe0ad26,#7fe0ad00 60%)}
#mise-en-place .b7b-tile.is-lit::before{opacity:1}
#mise-en-place .b7b-tile > *{position:relative;z-index:1}
#mise-en-place .b7b-tile > .b7b-rings{position:absolute}

/* 4. Le calendrier, illustré */
#mise-en-place .b7b-time ol::before{top:26px;left:26px;right:26px}
#mise-en-place .b7b-time ol{padding-top:0;margin-top:22px}
#mise-en-place .b7b-time li::before{display:none}
#mise-en-place .b7b-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:16px;background:#fffdf9;
  box-shadow:0 0 0 1px #ff8b7e59,0 8px 18px -10px #c8433a80;position:relative;z-index:1}
#mise-en-place .b7b-time li:first-child .b7b-ico{background:#ff6860;box-shadow:0 10px 22px -10px #ff6860}
#mise-en-place .b7b-ico svg{width:26px;height:26px;fill:none;stroke:#c8433a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7b-time li:first-child .b7b-ico svg{stroke:#fff}

/* 5. Le sceau de garantie */
#mise-en-place .b7b-guar{align-items:flex-start;justify-content:flex-start;gap:20px}
#mise-en-place .b7b-guar svg.b7b-seal{width:150px;height:150px;margin:-4px 0 0 -6px;fill:none;stroke:#7fe0ad;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7b-seal circle:nth-of-type(2){stroke-dasharray:2 4;opacity:.7}
#mise-en-place .b7b-seal text{fill:#cfeee0;stroke:none;font:700 13px var(--f-texte,Arial,sans-serif);letter-spacing:.02em}

/* 6. Votre fiche reste à vous : l'écran des accès */
#mise-en-place .b7b-keep{gap:14px}
#mise-en-place .b7b-access{margin-top:2px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #1d22261a,0 10px 24px -16px #1d222666;font-family:Arial,Helvetica,sans-serif}
#mise-en-place .b7b-acc-h{margin-bottom:10px !important;font-size:16px;font-weight:700;color:#202124}
#mise-en-place .b7b-acc{display:flex;align-items:center;gap:12px;padding:7px 0}
#mise-en-place .b7b-acc + .b7b-acc{border-top:1px solid #e8eaed}
#mise-en-place .b7b-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#16393e;color:#fff;font:700 16px/1 Arial,sans-serif}
#mise-en-place .b7b-av-s{background:#fff4f2;box-shadow:0 0 0 1px #ff8b7e66}
#mise-en-place .b7b-av-s img{width:24px;height:24px;object-fit:contain}
#mise-en-place .b7b-acc b{display:block;font-size:16px;color:#202124}
#mise-en-place .b7b-acc small{display:block;font-size:16px;color:#5f6368}
#mise-en-place .b7b-keep-txt{font-size:17px;line-height:1.5;color:#4a5357}

/* 7. Les annotations de la fiche (verre dépoli, point corail) */
#mise-en-place .b7-compare{position:relative}
#mise-en-place .b7c-note{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:999px;
  background:#ffffffd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px #ff8b7e59,0 14px 30px -14px #8a3a2acc;
  font:700 16px/1 var(--f-texte,Arial,sans-serif);color:#1d2226;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
#mise-en-place .b7c-note::before{content:"";width:9px;height:9px;border-radius:50%;background:#2fa866;box-shadow:0 0 0 4px #2fa86626}
#mise-en-place .b7c-note-1{top:39%;right:-22px}
#mise-en-place .b7c-note-2{top:60%;left:-26px}
#mise-en-place .b7c-note-3{bottom:15%;right:-18px}
#mise-en-place .b7-compare.is-after .b7c-note{opacity:1;transform:none}
#mise-en-place .b7-compare.is-after .b7c-note-2{transition-delay:.15s}
#mise-en-place .b7-compare.is-after .b7c-note-3{transition-delay:.3s}
@media(max-width:1000px){#mise-en-place .b7c-note-1{right:-8px}#mise-en-place .b7c-note-2{left:-8px}#mise-en-place .b7c-note-3{right:-8px}}
@media(max-width:640px){#mise-en-place .b7c-note{display:none}}
@media(prefers-reduced-motion:reduce){#mise-en-place .b7c-note{transition:none}}

/* Équilibre de la dernière rangée : la tuile des accès un peu plus large, contenus centrés en hauteur */
@media(min-width:1001px){
  #mise-en-place .b7b-grid{grid-template-areas:
    "a a a a a b b b b b b b"
    "c c c c c b b b b b b b"
    "d d d d d e e e f f f f"}
}
#mise-en-place .b7b-guar{justify-content:center}
@media(min-width:1001px){
  #mise-en-place .b7b-time ol{margin-top:auto;margin-bottom:auto}
  #mise-en-place .b7b-when{font-size:clamp(19px,1.45vw,22px)}
}
@media(max-width:640px){
  #mise-en-place .b7b-time ol{padding:0;gap:22px;margin-top:22px}
  #mise-en-place .b7b-time ol::before{left:25px;right:auto;top:26px;bottom:26px;width:2px;height:auto}
  #mise-en-place .b7b-time li{padding-left:72px;min-height:52px}
  #mise-en-place .b7b-ico{position:absolute;left:0;top:0;margin:0}
}

/* ===== bloc7-bento3.css ===== */
/* SOLIS – Bloc 7, moins de cadres et un vrai fond (18/10/2026, 9 h 35). Retours de Christel : « le fond est trop simple »,
   « un peu trop de cadres », « mal cadré ».
   - Le fond : un dégradé doux corail et pêche en plusieurs taches, les anneaux du radar SOLIS en grand, et un grain très fin.
   - Moins de cadres : UN seul panneau en verre dépoli. Dedans, deux objets seulement ont du relief, la tuile du prix
     (anthracite) et la fiche Google. La liste, le calendrier et « votre fiche reste à vous » n'ont plus de boîte :
     ils sont séparés par de fins traits. La garantie devient le bandeau bleu pétrole en bas du panneau.
   - Le cadrage : la fiche commence en haut, alignée sur la tuile du prix ; les étiquettes restent dans la fiche.
   Sauvegarde : index-hero-c.avant-bento3.html */

/* 1. Le fond du bloc */
@media(min-width:1px){
  #mise-en-place.solis-upgrade{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .13 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%23ff8b7e' stroke-opacity='.16'%3E%3Ccircle cx='500' cy='500' r='120'/%3E%3Ccircle cx='500' cy='500' r='230'/%3E%3Ccircle cx='500' cy='500' r='340'/%3E%3Ccircle cx='500' cy='500' r='450'/%3E%3C/svg%3E") no-repeat calc(100% + 380px) -260px / 1100px 1100px,
      radial-gradient(42% 36% at 88% 22%,#ffcfc2 0%,#ffcfc200 70%),
      radial-gradient(38% 34% at 8% 62%,#ffe4cf 0%,#ffe4cf00 70%),
      radial-gradient(50% 40% at 60% 100%,#f8d6cb 0%,#f8d6cb00 70%),
      linear-gradient(180deg,#fcf8f3 0%,#fbf1ea 100%) !important}
}

/* 2. Un seul panneau en verre dépoli */
#mise-en-place .b7b-grid{--g:0px;gap:0;padding:22px;border-radius:38px;
  background:#fffdf999;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid #ffffffcc;box-shadow:0 0 0 1px #1d22260a,0 50px 100px -50px #8a3a2a66,inset 0 1px 0 #fff;
  grid-template-areas:
    "a a a a a b b b b b b b"
    "c c c c c b b b b b b b"
    "d d d d d d f f f f f f"
    "e e e e e e e e e e e e"}

/* Les tuiles secondaires perdent leur boîte */
#mise-en-place .b7b-list,#mise-en-place .b7b-time,#mise-en-place .b7b-keep,#mise-en-place .b7b-visual{
  background:none !important;border:0 !important;box-shadow:none !important;border-radius:0}
#mise-en-place .b7b-list:hover,#mise-en-place .b7b-time:hover,#mise-en-place .b7b-keep:hover,#mise-en-place .b7b-visual:hover{transform:none;box-shadow:none}
#mise-en-place .b7b-list::before,#mise-en-place .b7b-time::before,#mise-en-place .b7b-keep::before,#mise-en-place .b7b-visual::before{display:none}
#mise-en-place .b7b-list{padding:34px 28px 30px 14px}
#mise-en-place .b7b-time,#mise-en-place .b7b-keep{margin-top:8px;padding:30px 28px 30px;border-top:1px solid #1d22261a !important}
#mise-en-place .b7b-time{padding-left:14px}
#mise-en-place .b7b-keep{border-left:1px solid #1d22261a !important}

/* La tuile du prix garde son relief */
#mise-en-place .b7b-offer{border-radius:28px}

/* 3. La fiche : en haut, bien cadrée, sur une lueur corail (pas une boîte) */
#mise-en-place .b7b-visual{justify-content:flex-start;padding:6px 6px 0 30px;position:relative}
#mise-en-place .b7b-visual::after{content:"";position:absolute;z-index:0;left:12%;right:0;top:4%;bottom:6%;border-radius:50%;
  background:radial-gradient(closest-side,#ff8b7e59,#ff8b7e00);filter:blur(20px);pointer-events:none}
#mise-en-place .b7b-visual > *{position:relative;z-index:1}
#mise-en-place .b7b-visual-t{display:none}
#mise-en-place .b7b-visual .b7c-cover{height:260px}
#mise-en-place .b7c-note-1{top:44%;right:14px}
#mise-en-place .b7c-note-2{top:63%;left:14px}
#mise-en-place .b7c-note-3{bottom:16%;right:14px}
#mise-en-place .b7b-visual .b7c-hint{margin-top:12px}

/* 4. La garantie : le bandeau du bas du panneau */
#mise-en-place .b7b-guar{grid-area:e;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:22px;
  margin-top:8px;padding:18px 30px !important;border-radius:26px}
#mise-en-place .b7b-guar svg.b7b-seal{width:96px;height:96px;margin:0;flex:none}
#mise-en-place .b7b-guar p{font-size:clamp(18px,1.45vw,21px)}

/* Tablette et téléphone */
@media(max-width:1000px){
  #mise-en-place .b7b-grid{padding:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "f" "e"}
  #mise-en-place .b7b-visual{padding:26px 4px 6px}
  #mise-en-place .b7b-list{padding:28px 10px 20px}
  #mise-en-place .b7b-time,#mise-en-place .b7b-keep{padding:26px 10px;border-left:0 !important}
}
@media(max-width:640px){
  #mise-en-place .b7b-grid{padding:10px;border-radius:30px}
  #mise-en-place .b7b-visual .b7c-cover{height:180px}
  #mise-en-place .b7b-guar{flex-direction:column !important;align-items:flex-start !important;padding:22px !important}
  #mise-en-place .b7b-guar svg.b7b-seal{width:110px;height:110px}
}

/* 9 h 45 : rééquilibrage. Le calendrier passe sous la fiche (plus de vide à droite) ;
   « Votre fiche reste à vous » et la garantie partagent la dernière rangée. Sceau assez grand pour un texte de 16 px. */
@media(min-width:1001px){
  #mise-en-place .b7b-grid{grid-template-areas:
    "a a a a a b b b b b b b"
    "c c c c c b b b b b b b"
    "c c c c c d d d d d d d"
    "f f f f f e e e e e e e"}
  #mise-en-place .b7b-time{margin-top:0;padding:26px 6px 26px 30px;border-top:0 !important}
  #mise-en-place .b7b-keep{margin-top:8px;padding:30px 28px 26px 14px;border-left:0 !important;border-top:1px solid #1d22261a !important}
  #mise-en-place .b7b-guar{margin:8px 0 0 8px;justify-content:flex-start !important;padding:22px 30px !important}
}
#mise-en-place .b7b-guar svg.b7b-seal{width:150px;height:150px}
#mise-en-place .b7b-visual{overflow:visible !important}

/* ===== bloc7-bento4.css ===== */
/* SOLIS – Bloc 7 : texture et garantie « certificat » (18/10/2026, 9 h 50).
   Retours de Christel : « le fond est encore trop lisse, il faut de la texture » et « le cadre fait en 7 jours ne fait pas premium ».
   - Texture : grain bien visible, trame de points fine qui s'efface vers les bords, grain aussi sur le panneau en verre.
   - Garantie : traitée comme un certificat. Fond bleu pétrole profond avec un motif guilloché (les lignes fines des billets
     et des diplômes), le « 7 » en très grand, la phrase exacte, et une médaille au contour corail métallisé.
   Sauvegarde : index-hero-c.avant-bento4.html */

/* 1. Texture du fond */
#mise-en-place.solis-upgrade::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(#c8433a2e 1.1px,#c8433a00 1.5px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 55%,#000 0%,#0000 100%);mask-image:radial-gradient(70% 60% at 50% 55%,#000 0%,#0000 100%)}
#mise-en-place.solis-upgrade{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%23ff8b7e' stroke-opacity='.22'%3E%3Ccircle cx='500' cy='500' r='120'/%3E%3Ccircle cx='500' cy='500' r='230'/%3E%3Ccircle cx='500' cy='500' r='340'/%3E%3Ccircle cx='500' cy='500' r='450'/%3E%3C/svg%3E") no-repeat calc(100% + 380px) -260px / 1100px 1100px,
  radial-gradient(42% 36% at 88% 22%,#ffc9ba 0%,#ffc9ba00 70%),
  radial-gradient(38% 34% at 6% 60%,#ffdcc4 0%,#ffdcc400 70%),
  radial-gradient(50% 40% at 60% 100%,#f6cfc2 0%,#f6cfc200 70%),
  linear-gradient(180deg,#fbf5ef 0%,#f9ece3 100%) !important}
#mise-en-place .upgrade-copy{position:relative;z-index:3}

/* Grain sur le panneau en verre */
#mise-en-place .b7b-grid{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(160deg,#fffdf9b8,#fff8f3a6)}

/* 2. La garantie, comme un certificat */
#mise-en-place .b7b-guar{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center !important;gap:30px !important;
  padding:26px 30px 26px 34px !important;color:#eef3f3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%237fe0ad' stroke-opacity='.15' stroke-width='.8'%3E%3Cpath d='M0 60 Q15 40 30 60 T60 60 T90 60 T120 60'/%3E%3Cpath d='M0 72 Q15 52 30 72 T60 72 T90 72 T120 72'/%3E%3Cpath d='M0 84 Q15 64 30 84 T60 84 T90 84 T120 84'/%3E%3Cpath d='M0 48 Q15 28 30 48 T60 48 T90 48 T120 48'/%3E%3Cpath d='M0 36 Q15 16 30 36 T60 36 T90 36 T120 36'/%3E%3Cpath d='M0 96 Q15 76 30 96 T60 96 T90 96 T120 96'/%3E%3Cpath d='M0 24 Q15 4 30 24 T60 24 T90 24 T120 24'/%3E%3Cpath d='M0 108 Q15 88 30 108 T60 108 T90 108 T120 108'/%3E%3Cpath d='M0 12 Q15 -8 30 12 T60 12 T90 12 T120 12'/%3E%3C/svg%3E") 0 0/120px 60px,
    radial-gradient(90% 140% at 100% 50%,#24575d 0%,#16393e 45%,#0f2a2e 100%) padding-box,
    linear-gradient(140deg,#ff8b7e,#ff8b7e00 30%,#ffffff1f 70%,#ff8b7e99) border-box !important;
  box-shadow:0 30px 60px -30px #0f2a2ee6,inset 0 1px 0 #ffffff1f !important}
#mise-en-place .b7b-guar::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#ff8b7e1f,#ff8b7e00 60%)}
#mise-en-place .b7g-num{display:flex;align-items:center;gap:12px;padding-right:28px;border-right:1px solid #ffffff26}
#mise-en-place .b7g-num span{font:700 clamp(84px,7vw,108px)/.8 var(--f-titre,Arial,sans-serif);letter-spacing:-.06em;
  background:linear-gradient(170deg,#ffe6e0 0%,#ff8b7e 55%,#c8433a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#mise-en-place .b7g-num small{font:700 18px/1.15 var(--f-texte,Arial,sans-serif);color:#cfe0e0}
#mise-en-place .b7g-txt{font:600 clamp(18px,1.45vw,21px)/1.45 var(--f-texte,Arial,sans-serif);color:#f3f7f7}
#mise-en-place .b7g-txt b{display:block;margin-bottom:6px;font:700 16px/1.2 var(--f-texte,Arial,sans-serif);color:#ff9d91}

/* La médaille : contour corail métallisé, texte du tour à 16 px */
#mise-en-place .b7g-medal{position:relative;width:150px;height:150px;border-radius:50%;
  background:conic-gradient(from 210deg,#ffd9cf,#ff8b7e 18%,#c8433a 34%,#ffb8ab 52%,#ff8b7e 70%,#a83a32 86%,#ffd9cf);
  box-shadow:0 18px 36px -14px #000000b3,0 0 0 1px #ffffff26,inset 0 0 0 1px #ffffff66}
#mise-en-place .b7g-medal::before{content:"";position:absolute;inset:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a5f66 0%,#16393e 55%,#0d2427 100%);box-shadow:inset 0 2px 6px #00000080,inset 0 -1px 0 #ffffff1a}
#mise-en-place .b7g-medal svg{position:absolute;inset:0;width:100%;height:100%}
#mise-en-place .b7g-medal text{fill:#ffd9cf;font:700 16px var(--f-texte,Arial,sans-serif);letter-spacing:.03em}
#mise-en-place .b7b-guar svg.b7b-seal{display:none}

@media(max-width:1000px){
  #mise-en-place .b7b-guar{grid-template-columns:auto minmax(0,1fr)}
  #mise-en-place .b7g-medal{grid-column:1 / -1;justify-self:start}
}
@media(max-width:640px){
  #mise-en-place .b7b-guar{grid-template-columns:minmax(0,1fr);gap:20px !important;padding:24px 22px !important}
  #mise-en-place .b7g-num{padding:0 0 16px;border-right:0;border-bottom:1px solid #ffffff26}
}
#mise-en-place .b7b-guar .b7g-medal svg{stroke:none;width:100%;height:100%}

/* ===== bloc7-bento5.css ===== */
/* SOLIS – Bloc 7, version « une décision, un regard » (18/10/2026, 10 h). Retour de Christel : « c'est un peu brouillon ».
   Diagnostic (méthode CRO) : trop de points forts qui se battent (89 €, le grand 7, la médaille, le sombre, le bleu),
   « 7 jours ouvrés » répété 4 fois, trois blocs de réassurance éparpillés, et le bouton perdu en haut à gauche.
   Correction : DEUX zones seulement dans le panneau.
   - À gauche, la tuile sombre raconte tout dans l'ordre d'une décision : combien → ce que j'ai → le bouton →
     la garantie juste sous le bouton → je garde ma fiche.
   - À droite, la preuve : la fiche Avant / Après, puis le calendrier.
   Sauvegarde : index-hero-c.avant-bento5.html */

@media(min-width:1001px){
  #mise-en-place .b7b-grid{grid-template-areas:
    "a a a a a b b b b b b b"
    "a a a a a d d d d d d d"}
  #mise-en-place .b7b-time{padding:28px 6px 10px 30px}
}
#mise-en-place .b7b-grid{grid-template-rows:auto 1fr}

/* La tuile sombre : un seul récit */
#mise-en-place .b7b-offer{padding:36px 38px 34px}
#mise-en-place .b7b-offer .b7b-roi{margin-bottom:0 !important}
#mise-en-place .b7d-what{margin-top:28px !important;font:700 18px/1.3 var(--f-texte,Arial,sans-serif);color:#fff}
#mise-en-place .b7d-list{list-style:none;margin:10px 0 0;padding:0}
#mise-en-place .b7d-list li{position:relative;padding:9px 0 9px 34px;font-size:17px;line-height:1.45;color:#e6e3de}
#mise-en-place .b7d-list li::before{content:"";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;background:#7fe0ad24}
#mise-en-place .b7d-list li::after{content:"";position:absolute;left:6px;top:17px;width:10px;height:6px;border-left:2.2px solid #7fe0ad;border-bottom:2.2px solid #7fe0ad;transform:rotate(-45deg)}
#mise-en-place .b7b-offer .b7b-cta{margin-top:28px !important}

/* La garantie, collée au bouton : c'est là que l'hésitation arrive */
#mise-en-place .b7d-guar{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(135deg,#16393e,#0f2a2e);box-shadow:inset 0 0 0 1px #7fe0ad33}
#mise-en-place .b7d-medal{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:conic-gradient(from 210deg,#ffd9cf,#ff8b7e 20%,#c8433a 38%,#ffb8ab 56%,#ff8b7e 74%,#a83a32 88%,#ffd9cf);
  box-shadow:0 8px 18px -8px #000000b3}
#mise-en-place .b7d-medal svg{width:30px;height:30px;padding:6px;box-sizing:content-box;border-radius:50%;background:#16393e;
  fill:none;stroke:#ffd9cf;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mise-en-place .b7d-guar p{font:600 17px/1.4 var(--f-texte,Arial,sans-serif);color:#f3f7f7}
#mise-en-place .b7d-guar b{display:block;margin-bottom:2px;font-size:16px;color:#ff9d91}
#mise-en-place .b7d-keep{margin-top:14px !important;font-size:16px;line-height:1.5;color:#c5cacc}
#mise-en-place .b7b-offer .b7b-nofiche{margin-top:10px !important;text-align:left}

/* Téléphone */
@media(max-width:1000px){#mise-en-place .b7b-grid{grid-template-areas:"a" "b" "d"}}
@media(max-width:640px){
  #mise-en-place .b7b-offer{padding:26px 22px}
  #mise-en-place .b7d-guar{align-items:flex-start}
}
@media(min-width:1001px){#mise-en-place .b7b-time ol{margin-top:26px !important;margin-bottom:0 !important}}

/* ===== bloc7-bento6.css ===== */
/* SOLIS – Bloc 7 : vraie texture, plus de grand cadre, calendrier vivant (18/10/2026, 10 h 10).
   Retours de Christel : « le fond est trop lisse », « le calendrier est trop simple, un gros cadre, il faut de l'asymétrie et de la vie ».
   - Texture : des courbes de niveau, comme sur une carte topographique (SOLIS parle de cartes et de quartiers),
     dessinées pour le bloc (assets/b7-topo.svg), avec une ligne plus marquée toutes les cinq, comme sur une vraie carte.
     Par-dessus, un grain bien visible.
   - Plus de grand panneau : la tuile du prix et la fiche posent directement sur la carte, en décalé.
   - Le calendrier devient un itinéraire : un chemin corail qui monte, trois épingles comme sur Google Maps,
     chaque étape à une hauteur différente. Ça monte, comme la visibilité.
   Sauvegarde : index-hero-c.avant-bento6.html */

/* 1. Le fond : carte topographique + grain */
#mise-en-place.solis-upgrade{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  url("assets/b7-topo.svg") center / cover no-repeat,
  radial-gradient(45% 40% at 90% 18%,#ffcdbf 0%,#ffcdbf00 70%),
  radial-gradient(40% 36% at 4% 70%,#ffdcc6 0%,#ffdcc600 70%),
  linear-gradient(180deg,#fbf3ec 0%,#f8e9df 100%) !important}
#mise-en-place.solis-upgrade::before{display:none}

/* 2. Plus de grand cadre : le panneau devient transparent, les deux objets se décalent */
#mise-en-place .b7b-grid{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;column-gap:clamp(32px,3vw,52px) !important;row-gap:0 !important}
@media(min-width:1001px){
  #mise-en-place .b7b-offer{margin-top:70px;align-self:start}
  #mise-en-place .b7b-visual{padding:0 !important}
  #mise-en-place .b7b-visual .b7c-frame{transform:rotate(-1.2deg)}
}
#mise-en-place .b7b-offer{box-shadow:0 40px 80px -36px #1d2226d9,0 0 0 1px #ffffff14 !important}

/* 3. Le calendrier en itinéraire */
#mise-en-place .b7r{padding:34px 0 0 !important;overflow:visible !important}
#mise-en-place .b7r .b7b-t{padding-left:4px}
#mise-en-place .b7r-map{position:relative;height:300px;margin-top:6px}
#mise-en-place .b7r-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#mise-en-place .b7r-path path{fill:none;stroke:#ff6860;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;vector-effect:non-scaling-stroke}
#mise-en-place .b7r ol{position:absolute;inset:0;margin:0 !important;padding:0 !important;list-style:none;display:block !important}
#mise-en-place .b7r ol::before{display:none}
#mise-en-place .b7r-stop{position:absolute;display:flex;align-items:flex-end;gap:10px}
#mise-en-place .b7r-stop::before{display:none}
#mise-en-place .b7r-s1{left:0;top:57%}
#mise-en-place .b7r-s2{left:39%;top:27%}
#mise-en-place .b7r-s3{right:0;top:-12%;flex-direction:row-reverse}
#mise-en-place .b7r-pin{flex:none;width:34px;height:42px;filter:drop-shadow(0 8px 10px #c8433a59)}
#mise-en-place .b7r-pin svg{width:100%;height:100%;fill:#ff6860;stroke:#fff;stroke-width:1.6}
#mise-en-place .b7r-s1 .b7r-pin svg{fill:#c8433a}
#mise-en-place .b7r-card{padding:12px 16px 13px;border-radius:16px;background:#fffdf9e6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px #ff8b7e40,0 16px 30px -18px #8a3a2a99;max-width:230px}
#mise-en-place .b7r-card .b7b-when{font-size:clamp(19px,1.45vw,22px) !important}
#mise-en-place .b7r-card p:last-child{margin-top:3px !important;font-size:16px !important;line-height:1.35;color:#4a5357}
#mise-en-place .b7r-s3 .b7r-card{background:#16393e;box-shadow:0 18px 34px -16px #16393ecc}
#mise-en-place .b7r-s3 .b7b-when{color:#ff9d91 !important}
#mise-en-place .b7r-s3 .b7r-card p:last-child{color:#d6e4e4}

/* Téléphone et tablette : l'itinéraire devient vertical */
@media(max-width:1000px){
  #mise-en-place .b7r{padding:34px 4px 10px !important}
  #mise-en-place .b7r-map{height:auto}
  #mise-en-place .b7r-path{display:none}
  #mise-en-place .b7r ol{position:relative;display:grid !important;gap:16px;padding-left:18px !important;border-left:3px dotted #ff6860}
  #mise-en-place .b7r-stop{position:relative;left:auto !important;right:auto !important;top:auto !important;flex-direction:row !important;align-items:center;margin-left:-36px}
  #mise-en-place .b7r-card{max-width:none;flex:1}
}
@media(min-width:1001px){#mise-en-place .b7r ol > li.b7r-stop{position:absolute}}
@media(max-width:1000px){
  #mise-en-place .b7r ol{padding-left:26px !important;margin-left:16px !important}
  #mise-en-place .b7r ol > li.b7r-stop{padding-left:0;min-height:0;margin-left:-45px}
}

/* ===== bloc7-motion.css ===== */
/* SOLIS – Bloc 7, mise en mouvement (18/10/2026, 10 h). Demande de Christel : « aligne la carte avant/après » et « mets la motion comme un pro ».
   Une seule chorégraphie, jouée une fois, jamais en boucle :
   1. Le bloc arrive : le petit titre, le grand titre et la phrase sortent d'un léger flou, l'un après l'autre,
      puis la tuile du prix et la fiche montent en place (courbe douce, sans rebond).
   2. 2 secondes plus tard : le curseur balaie la fiche et révèle l'Après SOLIS (bloc7-anim.js).
   3. Le calendrier arrive à l'écran : le chemin se trace de gauche à droite, chaque épingle tombe quand le chemin
      la rejoint, sa carte apparaît juste après, et la dernière épingle (30 jours) lance une seule onde.
   Appareil réglé sur « mouvement réduit » : tout s'affiche directement, sans animation.
   Sauvegarde : index-hero-c.avant-motion7.html */

:root{--b7m-out:cubic-bezier(.16,1,.3,1);--b7m-inout:cubic-bezier(.65,0,.35,1);--b7m-drop:cubic-bezier(.34,1.56,.64,1)}

/* La fiche Avant / Après bien droite */
#mise-en-place .b7b-visual .b7c-frame{transform:none !important}

/* 1. L'entrée du bloc */
#mise-en-place.b7m :is(.offer-kicker,#conversion-title,.upgrade-lead,.b7b-offer,.b7b-visual):not(.b7m-on){opacity:0}
#mise-en-place.b7m-in .offer-kicker.b7m-on{animation:b7m-blur .9s var(--b7m-out) both}
#mise-en-place.b7m-in #conversion-title.b7m-on{animation:b7m-blur 1s var(--b7m-out) .12s both}
#mise-en-place.b7m-in .upgrade-lead.b7m-on{animation:b7m-blur 1s var(--b7m-out) .24s both}
#mise-en-place.b7m-in .b7b-offer.b7m-on{animation:b7m-rise 1.1s var(--b7m-out) .05s both}
#mise-en-place.b7m-in .b7b-visual.b7m-on{animation:b7m-rise-scale 1.2s var(--b7m-out) .2s both}
@keyframes b7m-blur{from{opacity:0;translate:0 18px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes b7m-rise{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes b7m-rise-scale{from{opacity:0;translate:0 56px;scale:.965}to{opacity:1;translate:0 0;scale:1}}

/* 3. Le calendrier qui se trace */
#mise-en-place.b7m .b7r:not(.b7m-go) :is(.b7b-t,.b7r-pin,.b7r-card){opacity:0}
#mise-en-place.b7m .b7r:not(.b7m-go) .b7r-path{clip-path:inset(-12px 100% -12px -12px)}
#mise-en-place .b7r.b7m-go .b7b-t{animation:b7m-blur .8s var(--b7m-out) both}
#mise-en-place .b7r.b7m-go .b7r-path{animation:b7m-draw 1.9s var(--b7m-inout) .15s both}
#mise-en-place .b7r.b7m-go .b7r-pin{transform-origin:50% 100%;animation:b7m-drop .7s var(--b7m-drop) both}
#mise-en-place .b7r.b7m-go .b7r-card{animation:b7m-card .8s var(--b7m-out) both}
#mise-en-place .b7r.b7m-go .b7r-s1 .b7r-pin{animation-delay:.2s}
#mise-en-place .b7r.b7m-go .b7r-s1 .b7r-card{animation-delay:.38s}
#mise-en-place .b7r.b7m-go .b7r-s2 .b7r-pin{animation-delay:.95s}
#mise-en-place .b7r.b7m-go .b7r-s2 .b7r-card{animation-delay:1.13s}
#mise-en-place .b7r.b7m-go .b7r-s3 .b7r-pin{animation-delay:1.85s}
#mise-en-place .b7r.b7m-go .b7r-s3 .b7r-card{animation-delay:2.03s}
@keyframes b7m-draw{from{clip-path:inset(-12px 100% -12px -12px)}to{clip-path:inset(-12px -12px -12px -12px)}}
@keyframes b7m-drop{0%{opacity:0;translate:0 -34px;scale:.7}55%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
@keyframes b7m-card{from{opacity:0;translate:0 14px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
#mise-en-place .b7r-s1 .b7r-card{transform-origin:0 100%}
#mise-en-place .b7r-s2 .b7r-card{transform-origin:0 100%}
#mise-en-place .b7r-s3 .b7r-card{transform-origin:100% 100%}

/* L'onde de la dernière épingle : une seule fois */
#mise-en-place .b7r-s3 .b7r-pin{position:relative}
#mise-en-place .b7r-s3 .b7r-pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:44px;height:14px;margin-left:-22px;border-radius:50%;
  border:2px solid #ff6860;opacity:0;pointer-events:none}
#mise-en-place .b7r.b7m-go .b7r-s3 .b7r-pin::after{animation:b7m-ripple 1.3s var(--b7m-out) 2.35s both}
@keyframes b7m-ripple{0%{opacity:.85;scale:.3}100%{opacity:0;scale:1.9}}

@media(prefers-reduced-motion:reduce){
  #mise-en-place *,#mise-en-place *::after{animation:none !important}
  #mise-en-place .b7r-path{clip-path:none !important}
}

/* Relief de la tuile 89 € : une ombre en plusieurs couches, comme un vrai objet posé sur la carte
   (une ombre nette au contact, une ombre moyenne, et une grande ombre chaude et diffuse, teintée corail). */
#mise-en-place .b7b-offer{box-shadow:
  0 0 0 1px #ffffff14,
  0 2px 4px #1d22262e,
  0 12px 24px -8px #1d22264d,
  0 36px 64px -22px #1d22268c,
  0 80px 120px -40px #b9473a8c !important}

/* ===== bloc7-calendrier.css ===== */
/* SOLIS – Bloc 7, le vrai calendrier (18/10/2026, 10 h 15). Voir bloc7-calendrier.js.
   Retours de Christel : « on comprend que l'important c'est les 30 jours », puis « une vraie page de calendrier, pas encore un cadre arrondi ».
   - Une vraie page de calendrier mural : spirale en haut, bandeau corail avec le mois, cases quadrillées,
     quelques feuilles en dessous, coins presque droits, comme du papier.
   - Aujourd'hui : une pastille corail collée sur la date.
   - Les 7 jours ouvrés : surlignés au feutre corail, jour après jour (le week-end est hachuré, il ne compte pas).
   - Le jour J : entouré au feutre bleu pétrole, comme on le ferait à la main. C'est le moment fort.
   - À droite, les mêmes couleurs : la carte foncée « 7 jours ouvrés » domine, le bilan à 30 jours est en retrait, en gris.
   Sauvegardes : index-hero-c.avant-calendrier7.html, puis index-hero-c.avant-page7.html */

/* La tuile ne fait plus de cadre : on ne voit que la page posée sur la carte */
#mise-en-place .b7k{grid-area:d;align-self:start;margin-top:30px;padding:0 !important;overflow:visible !important;
  background:none !important;border:0 !important;box-shadow:none !important;border-radius:0}
#mise-en-place .b7k::before{display:none !important}
#mise-en-place .b7k:hover{transform:none !important;box-shadow:none !important}
#mise-en-place .b7k .b7b-t{font:700 clamp(21px,1.75vw,25px)/1.15 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#1d2226;padding:0}
#mise-en-place .b7k-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px;margin-top:30px;align-items:center}

/* La page */
#mise-en-place .b7k-page{position:relative;padding:0 0 14px;border-radius:3px 3px 6px 6px;background:#fffdf8;
  box-shadow:0 1px 0 #e9e1d6,0 4px 0 -1px #f4ede4,0 5px 0 -1px #e2d8cb,0 9px 0 -3px #efe7dc,0 10px 0 -3px #ddd2c4,
    0 26px 40px -18px #6b3a2a73,0 50px 80px -40px #6b3a2a66}
#mise-en-place .b7k-page::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* La spirale */
#mise-en-place .b7k-page::before{content:"";position:absolute;z-index:3;left:22px;right:22px;top:-13px;height:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236f777b'/%3E%3Cstop offset='.45' stop-color='%23e9eef0'/%3E%3Cstop offset='1' stop-color='%23767e82'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='12' cy='22.5' rx='3.4' ry='3.1' fill='%23521d16' fill-opacity='.85'/%3E%3Cpath d='M9.6 22.5V5.5a2.4 2.4 0 0 1 4.8 0v17' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left top / 24px 30px repeat-x}
/* Le bandeau du mois */
#mise-en-place .b7k-month{position:relative;z-index:1;margin:0;padding:20px 22px 14px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#ff6f66,#f45d55);color:#fff;font:700 18px/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:.01em}

/* La grille quadrillée */
#mise-en-place .b7k-cal{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);margin:0 12px;
  border-left:1px solid #1d22261a}
#mise-en-place .b7k-dow{padding:9px 0 7px;text-align:center;font-size:16px;font-weight:700;color:#7a8286;
  border-right:1px solid #1d22261a;border-bottom:1px solid #1d222626;background:#fbf4ec}
#mise-en-place .b7k-dow.is-wkend{color:#b0b6b9}
#mise-en-place .b7k-day{position:relative;display:grid;place-items:center;height:54px;border-right:1px solid #1d22261a;border-bottom:1px solid #1d22261a}
#mise-en-place .b7k-day b{position:relative;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font:600 17px/1 var(--f-texte,Arial,sans-serif);color:#2c3438}
#mise-en-place .b7k-day.is-past b,#mise-en-place .b7k-day.is-after b{color:#b3b9bc;font-weight:500}
#mise-en-place .b7k-day.is-wkend{background:repeating-linear-gradient(135deg,#1d22260b 0 2px,#1d222600 2px 7px)}
#mise-en-place .b7k-day.is-wkend b{color:#a7aeb1;font-weight:500}
/* Aujourd'hui : une pastille collée */
#mise-en-place .b7k-day.is-today b{background:#ff6860;color:#fff;font-weight:700;box-shadow:0 3px 6px -2px #c8433a99}
/* Les 7 jours ouvrés : un trait de surligneur, d'une case à l'autre */
#mise-en-place .b7k-day.is-work::before{content:"";position:absolute;z-index:1;left:-1px;right:-1px;top:50%;height:24px;margin-top:-12px;
  background:#ff8b7e70;transform-origin:left center}
#mise-en-place .b7k-day.run-start::before{left:7px;border-radius:9px 3px 3px 10px}
#mise-en-place .b7k-day.run-end::before{right:7px;border-radius:3px 10px 9px 3px}
#mise-en-place .b7k-day.is-work b{color:#8f2d24;font-weight:700}
/* Le jour J : entouré au feutre */
#mise-en-place .b7k-ink{position:absolute;z-index:3;left:50%;top:50%;width:62px;height:52px;margin:-26px 0 0 -31px;overflow:visible;pointer-events:none}
#mise-en-place .b7k-ink path{fill:none;stroke:#16393e;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#mise-en-place .b7k-day.is-end b{color:#16393e;font-weight:800;font-size:19px}

/* Les étapes, aux mêmes couleurs */
#mise-en-place .b7k-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#mise-en-place .b7k-steps li{position:relative;padding:0 0 0 26px}
#mise-en-place .b7k-steps li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;box-sizing:border-box}
#mise-en-place .b7k-s1::before{background:#ff6860;box-shadow:0 2px 5px -1px #c8433a99}
#mise-en-place .b7k-steps .b7b-when{font:700 19px/1.2 var(--f-titre,Arial,sans-serif);color:#c8433a}
#mise-en-place .b7k-steps li p:last-of-type{margin-top:3px;font-size:16px;line-height:1.4;color:#4a5357}
#mise-en-place .b7k-steps li.b7k-s2{padding:18px 20px;border-radius:18px;background:radial-gradient(120% 100% at 0% 0%,#1f4a50 0%,#16393e 55%,#112d31 100%);
  box-shadow:0 2px 4px #16393e33,0 22px 40px -18px #16393ecc}
#mise-en-place .b7k-s2::before{display:none}
#mise-en-place .b7k-steps .b7k-s2 .b7b-when{font-size:clamp(21px,1.75vw,25px);color:#ff9d91}
#mise-en-place .b7k-steps .b7k-s2 p:last-of-type{font-size:17px;color:#e3eded}
#mise-en-place .b7k-ok{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 12px 5px 9px;border-radius:999px;
  background:#7fe0ad1f;box-shadow:inset 0 0 0 1px #7fe0ad40;font-size:16px;font-weight:600;color:#9eeac2}
#mise-en-place .b7k-ok::before{content:"";width:12px;height:7px;margin-top:-3px;border-left:2px solid #7fe0ad;border-bottom:2px solid #7fe0ad;transform:rotate(-45deg)}
#mise-en-place .b7k-s3::before{border:2px solid #c3c8ca}
#mise-en-place .b7k-steps .b7k-s3 .b7b-when{color:#6b7478;font-size:18px}
#mise-en-place .b7k-steps .b7k-s3 p:last-of-type{color:#6b7478}
/* La barre des 7 jours dans la carte foncée */
#mise-en-place .b7k-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:12px 0 4px}
#mise-en-place .b7k-bar i{height:6px;border-radius:3px;background:#ffffff1f;position:relative;overflow:hidden}
#mise-en-place .b7k-bar i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ff8b7e,#ff9d91);transform-origin:left center}

/* Téléphone et tablette */
@media(max-width:1000px){#mise-en-place .b7k{margin-top:30px}}
@media(max-width:640px){
  #mise-en-place .b7k-body{grid-template-columns:1fr;gap:26px;margin-top:26px}
  #mise-en-place .b7k-cal{margin:0 8px}
  #mise-en-place .b7k-day{height:44px}
  #mise-en-place .b7k-day b{width:30px;height:30px;font-size:16px}
  #mise-en-place .b7k-ink{width:54px;height:46px;margin:-23px 0 0 -27px}
  #mise-en-place .b7k-day.is-work::before{height:22px;margin-top:-11px}
}

/* Mouvement : joué une fois, quand le calendrier est bien visible (bloc7-motion.js).
   0 s : la page se pose, la pastille « aujourd'hui » se colle.
   0,4 s : la carte foncée arrive, sa barre est vide.
   0,85 s → 2,7 s : le surligneur passe sur les 7 jours ouvrés un par un (le week-end est sauté), la barre se remplit en même temps.
   2,65 s : le jour J est entouré au feutre ; puis le badge « Garanti » s'allume.
   3,4 s : le bilan à 30 jours, en retrait. */
#mise-en-place.b7m .b7k:not(.b7m-go) :is(.b7k-page,.b7k-steps li,.b7k-ok){opacity:0}
#mise-en-place.b7m .b7k:not(.b7m-go) .b7k-day.is-work::before{transform:scaleX(0)}
#mise-en-place.b7m .b7k:not(.b7m-go) .b7k-bar i::after{transform:scaleX(0)}
#mise-en-place.b7m .b7k:not(.b7m-go) .b7k-day.is-today b{scale:0}
#mise-en-place.b7m .b7k:not(.b7m-go) .b7k-ink path{stroke-dashoffset:1}
#mise-en-place .b7k.b7m-go .b7k-page{animation:b7k-land .9s cubic-bezier(.16,1,.3,1) both}
#mise-en-place .b7k.b7m-go .b7k-day.is-today b{animation:b7k-stick .55s cubic-bezier(.34,1.56,.64,1) .45s both}
#mise-en-place .b7k.b7m-go .b7k-s1{animation:b7k-up .7s cubic-bezier(.16,1,.3,1) .25s both}
#mise-en-place .b7k.b7m-go .b7k-s2{animation:b7k-rise .9s cubic-bezier(.16,1,.3,1) .4s both}
#mise-en-place .b7k.b7m-go .b7k-day.is-work::before,
#mise-en-place .b7k.b7m-go .b7k-bar i::after{animation:b7k-fill .3s cubic-bezier(.45,0,.55,1) calc(.85s + var(--i) * .26s) both}
#mise-en-place .b7k.b7m-go .b7k-day.is-work b{animation:b7k-ink-color .3s ease calc(.85s + var(--i) * .26s) both}
#mise-en-place .b7k.b7m-go .b7k-ink path{animation:b7k-draw .75s cubic-bezier(.65,0,.35,1) 2.65s both}
#mise-en-place .b7k.b7m-go .b7k-day.is-end b{animation:b7k-ink-color .3s ease 2.41s both,b7k-thump .5s cubic-bezier(.34,1.56,.64,1) 3.25s both}
#mise-en-place .b7k.b7m-go .b7k-ok{animation:b7k-pop .6s cubic-bezier(.34,1.56,.64,1) 3.1s both}
#mise-en-place .b7k.b7m-go .b7k-s3{animation:b7k-up .7s cubic-bezier(.16,1,.3,1) 3.4s both}
@keyframes b7k-land{from{opacity:0;translate:0 30px;rotate:-1.5deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes b7k-up{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes b7k-rise{from{opacity:0;translate:24px 0;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes b7k-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes b7k-ink-color{from{color:#2c3438}}
@keyframes b7k-stick{from{scale:0;rotate:-25deg}to{scale:1;rotate:0deg}}
@keyframes b7k-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes b7k-thump{0%{scale:1}40%{scale:1.25}100%{scale:1}}
@keyframes b7k-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){#mise-en-place .b7k *,#mise-en-place .b7k *::before,#mise-en-place .b7k *::after{animation:none !important}}

/* ===== bloc8-suivi.css ===== */
/* SOLIS – Bloc 8 « Suivi », version 1 (18/10/2026). Dans la continuité du bloc 7.
   L'histoire : le bloc 7 finit sur le calendrier. Le bloc 8 raconte la suite : un mois avec le Suivi, en 3 moments
   que tout indépendant connaît (il nous écrit, un client laisse un avis, son bilan arrive). Il voit d'abord ce que
   le Suivi fait pour lui, ensuite seulement le prix.
   18/10, 10 h 40 : la feuille « bilan » (Las Salinas, signaux, « Au point ») remplacée, Christel ne la comprenait pas.
   - Fond : la même carte topographique que le bloc 7, retournée à la jonction, qui s'efface vers le bloc 9.
   - À gauche, la carte « papier » du mois, liseré corail, coches vertes, bandeau bleu pétrole.
     Kenai est couché dessus, à l'affût : il garde un œil sur la fiche.
   - À droite, la tuile sombre du prix, de la même famille que celle du 89 € (on décide toujours au même endroit).
     Sous le bouton, comme la garantie au bloc 7 : « Vous restez libre ».
   - Une seule animation, jouée une fois (bloc8-suivi.js) : les trois coches « c'est fait » passent au vert une à une.
   Tailles verrouillées : titres de carte 25 / 21 px, textes 18 à 20 px, rien sous 16 px.
   Sauvegardes : index-hero-c.avant-bloc8.html, puis index-hero-c.avant-mois8.html et bloc8-suivi.avant-mois8.css / .js */

/* La jonction avec le bloc 7 (18/10, 10 h 45, capture de Christel : cassure nette et grand vide en bas du bloc 7).
   - La vague sombre et le Kenai du bord allaient avec l'ancien bloc 8 foncé : masqués.
   - La place réservée à ce Kenai sous la grille du bloc 7 (bloc7-bento.css, 300 unités) devient une marge normale.
     Les 80 unités ajoutées correspondent au décalage du texte du bloc 7 (top de .upgrade-copy).
   - 10 h 50 : plus de miroir (on voyait des « chevrons » à la jonction, comme un reflet). Les courbes du bloc 7
     s'effacent doucement sur ses 200 derniers pixels, celles du bloc 8 réapparaissent aussi doucement :
     un passage calme entre les deux chapitres, sans ligne de coupure.
   - Le fil corail du bloc 7 continue dans le bloc 8 et vient se poser sur la tuile du prix (tracé fixe, sans animation). */
#mise-en-place .upgrade-curve,#mise-en-place .upgrade-kenai{display:none !important}
@media(min-width:1001px){#mise-en-place.solis-upgrade{height:auto !important;padding-bottom:calc(80 * var(--u) + 72px) !important}}
@media(max-width:1000px){#mise-en-place.solis-upgrade{padding-bottom:64px !important}}
#mise-en-place.solis-upgrade::after{content:"";position:absolute;left:0;right:0;top:auto;bottom:0;height:200px;border:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#f8e9df;
  -webkit-mask-image:linear-gradient(180deg,#0000 0%,#000b 55%,#000 100%);mask-image:linear-gradient(180deg,#0000 0%,#000b 55%,#000 100%)}
#mise-en-place .upgrade-thread{z-index:2}

#suivi-solis.b8s{--b8-p:#16393e;--b8-t:#1d2226;--b8-d:#4a5357;--b8-gris:#5d6d70;--b8-papier:#fffdf9;
  --b8-c:#ff6860;--b8-cc:#ff8b7e;--b8-ct:#c8433a;--b8-g:#2fa866;--b8-o:#e8962a;
  position:relative;z-index:1;isolation:isolate;overflow:hidden;margin:0;
  padding:clamp(64px,6vw,104px) 6% clamp(84px,7vw,124px);
  font-family:var(--f-texte,Arial,Helvetica,sans-serif);color:var(--b8-t);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(40% 34% at 6% 42%,#ffd6c8 0%,#ffd6c800 70%),
    radial-gradient(36% 30% at 94% 62%,#ffe0d2 0%,#ffe0d200 70%),
    linear-gradient(180deg,#f8e9df 0%,#fbf2eb 55%,#fcf8f3 100%)}
/* La carte topographique du bloc 7 : elle réapparaît doucement sous la jonction, puis s'efface vers le bloc 9 */
#suivi-solis.b8s::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/b7-topo.svg") center / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#0000 0,#000 260px,#000 50%,#0000 92%);mask-image:linear-gradient(180deg,#0000 0,#000 260px,#000 50%,#0000 92%)}
/* Le fil corail qui arrive du bloc 7 */
#suivi-solis .b8s-thread{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;display:none}
#suivi-solis.b8s-thread-on .b8s-thread{display:block}
#suivi-solis .b8s-thread path{fill:none;stroke:#ff7d68;stroke-width:1.4;filter:drop-shadow(0 0 5px #ff6759)}
#suivi-solis .b8s-thread circle{fill:#ff6860;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px #ff6759)}
#suivi-solis .b8s-wrap{z-index:1}
#suivi-solis.b8s *,#suivi-solis.b8s *::before,#suivi-solis.b8s *::after{box-sizing:border-box}
#suivi-solis.b8s :where(p,ul,figure){margin:0}
#suivi-solis .b8s-wrap{position:relative;max-width:1280px;margin:0 auto}

/* L'en-tête, comme au bloc 7 */
#suivi-solis .offer-kicker{color:var(--b8-ct) !important}
section#suivi-solis.b8s h2{margin:0 0 18px;max-width:13em;color:var(--b8-p) !important}
#suivi-solis .b8s-lead{max-width:640px;font-size:clamp(20px,1.8vw,25px);line-height:1.45;font-weight:500;color:var(--b8-p)}

/* La grille : le bilan à gauche (plus bas, pour laisser la place à Kenai), le prix à droite */
#suivi-solis .b8s-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,3.4vw,56px);
  margin-top:clamp(36px,3.6vw,52px);align-items:start}

/* ---------- Le bilan du mois ---------- */
#suivi-solis .b8s-bilan{--kw:clamp(190px,17vw,250px);position:relative;margin-top:clamp(0px,2vw,30px)}
#suivi-solis .b8s-kenai{position:absolute;z-index:3;top:0;right:clamp(24px,3vw,44px);width:var(--kw);height:auto;pointer-events:none;
  filter:drop-shadow(0 6px 6px #4a2a2026);
  -webkit-mask-image:linear-gradient(90deg,#000 86%,#0000 100%);mask-image:linear-gradient(90deg,#000 86%,#0000 100%)}
#suivi-solis .b8s-paper{position:relative;margin-top:calc(var(--kw) * .3636 - 7px);border:1.5px solid transparent;border-radius:22px;overflow:hidden;
  background:linear-gradient(var(--b8-papier),var(--b8-papier)) padding-box,
    linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 34%,#ff8b7e00 66%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 34px 70px -30px #1d222673,0 10px 24px -12px #1d222633}
#suivi-solis .b8s-top{padding:28px 30px 4px}
#suivi-solis .b8s-k{margin-bottom:6px !important;font-size:16px;font-weight:700;color:var(--b8-ct)}
#suivi-solis .b8s-t{font:700 clamp(21px,1.75vw,25px)/1.15 var(--f-titre,Arial,sans-serif);letter-spacing:-.02em;color:var(--b8-p)}

/* Le mois, en 3 moments : à gauche le jour, à droite ce qui se passe et ce que SOLIS fait */
#suivi-solis .b8s-month{list-style:none;margin:6px 0 0;padding:0 30px 8px}
#suivi-solis .b8s-m{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;padding:20px 0}
#suivi-solis .b8s-m+.b8s-m{box-shadow:0 -1px 0 #16393e14}
#suivi-solis .b8s-when{padding-top:2px;font:700 17px/1.3 var(--f-texte,Arial,sans-serif);color:var(--b8-ct)}
#suivi-solis .b8s-lab{font-size:16px;font-weight:600;color:var(--b8-gris)}
#suivi-solis .b8s-you{margin-top:8px !important;width:fit-content;max-width:100%;padding:11px 16px;border-radius:16px 16px 16px 4px;
  background:#fff1ec;box-shadow:inset 0 0 0 1px #ff8b7e4d;font-size:18px;line-height:1.4;color:#2c3438}
#suivi-solis .b8s-rev{margin-top:8px !important;width:fit-content;max-width:100%;padding:11px 16px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px #16393e17,0 6px 14px -10px #1d222640;font-size:18px;line-height:1.4;font-style:italic;color:#2c3438}
#suivi-solis .b8s-stars{display:block;margin-bottom:2px;font-style:normal;font-size:16px;letter-spacing:2px;color:#f2a516}
#suivi-solis .b8s-did{position:relative;margin-top:12px !important;padding-left:36px;font-size:18px;line-height:1.45;font-weight:600;color:var(--b8-p)}
#suivi-solis .b8s-lab+.b8s-did{margin-top:8px !important}
#suivi-solis .b8s-did::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#2fa8661c}
#suivi-solis .b8s-did::after{content:"";position:absolute;left:7px;top:8px;width:11px;height:6px;border-left:2.4px solid var(--b8-g);border-bottom:2.4px solid var(--b8-g);transform:rotate(-45deg)}

/* La phrase clé dans le bandeau bleu pétrole */
#suivi-solis .b8s-band{display:flex;gap:14px;align-items:flex-start;margin-top:6px !important;padding:18px 30px 20px;background:var(--b8-p);color:#eef3f3;
  font:600 18px/1.5 var(--f-texte,Arial,sans-serif)}
#suivi-solis .b8s-band svg{flex:none;width:24px;height:24px;margin-top:1px;fill:none;stroke:#7fe0ad;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- La tuile du prix (même famille que le 89 € du bloc 7) ---------- */
#suivi-solis .b8s-offer{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:36px 38px 34px;border-radius:28px;color:#f3f1ee;
  border:1px solid transparent;
  background:radial-gradient(120% 90% at 0% 0%,#5a2c26 0%,#2c2a2b 38%,#212528 70%) padding-box,
    linear-gradient(210deg,#ff8b7e,#ff8b7e00 45%,#ffffff1a 80%) border-box;
  box-shadow:0 0 0 1px #ffffff14,0 2px 4px #1d22262e,0 12px 24px -8px #1d22264d,0 36px 64px -22px #1d22268c,0 80px 120px -40px #b9473a8c}
#suivi-solis .b8s-offer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#suivi-solis .b8s-offer > *{position:relative;z-index:1}
#suivi-solis .b8s-offer > .b8s-rings{position:absolute;z-index:0;left:-6px;top:-6px;width:300px;height:300px;fill:none;stroke:#ff8b7e;stroke-width:1;opacity:.28;pointer-events:none}
#suivi-solis .b8s-offer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#suivi-solis .b8s-name{font:700 clamp(21px,1.75vw,25px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:#fff}
#suivi-solis .b8s-pill{padding:7px 13px;border-radius:999px;background:#ff686033;border:1px solid #ff8b7e66;font:700 16px/1 var(--f-texte,Arial,sans-serif);color:#ffc2bb}
#suivi-solis .b8s-price{margin-top:26px !important;font:700 clamp(84px,7.4vw,118px)/.9 var(--f-titre,Arial,sans-serif);letter-spacing:-.05em;color:#fff;
  font-variation-settings:"opsz" 96;white-space:nowrap}
#suivi-solis .b8s-price span{margin-left:10px;font:600 22px/1 var(--f-texte,Arial,sans-serif);letter-spacing:0;color:#c5cacc;vertical-align:top}
#suivi-solis .b8s-deal{display:flex;align-items:flex-start;gap:10px;margin-top:22px !important;padding-top:18px;border-top:1px solid #ffffff1f;
  font:700 20px/1.35 var(--f-texte,Arial,sans-serif);color:#ff8b7e}
#suivi-solis .b8s-deal svg{flex:none;width:24px;height:24px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#suivi-solis .b8s-what{margin-top:28px !important;font:700 18px/1.3 var(--f-texte,Arial,sans-serif);color:#fff}
#suivi-solis .b8s-list{list-style:none;margin:10px 0 0;padding:0}
#suivi-solis .b8s-list li{position:relative;padding:9px 0 9px 34px;font-size:17px;line-height:1.45;color:#e6e3de}
#suivi-solis .b8s-list li::before{content:"";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;background:#7fe0ad24}
#suivi-solis .b8s-list li::after{content:"";position:absolute;left:6px;top:17px;width:10px;height:6px;border-left:2.2px solid #7fe0ad;border-bottom:2.2px solid #7fe0ad;transform:rotate(-45deg)}
#suivi-solis .b8s-offer .b8s-cta{display:flex !important;width:100% !important;justify-content:center !important;margin-top:28px !important;
  box-shadow:0 14px 30px -12px #ff6860b3}
#suivi-solis .b8s-free{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(135deg,#16393e,#0f2a2e);box-shadow:inset 0 0 0 1px #7fe0ad33}
#suivi-solis .b8s-medal{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:conic-gradient(from 210deg,#ffd9cf,#ff8b7e 20%,#c8433a 38%,#ffb8ab 56%,#ff8b7e 74%,#a83a32 88%,#ffd9cf);box-shadow:0 8px 18px -8px #000000b3}
#suivi-solis .b8s-medal svg{width:30px;height:30px;padding:6px;box-sizing:content-box;border-radius:50%;background:#16393e;
  fill:none;stroke:#ffd9cf;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#suivi-solis .b8s-free p{font:600 17px/1.4 var(--f-texte,Arial,sans-serif);color:#f3f7f7}
#suivi-solis .b8s-free b{display:block;margin-bottom:2px;font-size:16px;color:#ff9d91}
#suivi-solis .b8s-after{margin-top:14px !important;font-size:16px;line-height:1.5;color:#c5cacc}
#suivi-solis .b8s-after a{color:#fff;text-decoration:none;border-bottom:1px solid #ff8b7e;font-weight:600}
#suivi-solis .b8s-after a:focus-visible,#suivi-solis .b8s-cta:focus-visible{outline:3px solid #ff8b7e;outline-offset:4px}

/* Survol à la souris (comme sur les cartes des blocs 4 à 7) : une lumière douce suit la souris */
#suivi-solis .b8s-paper > .b8s-glow,#suivi-solis .b8s-offer > .b8s-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#ff68601f,#ff686000 60%)}
#suivi-solis .b8s-offer .b8s-glow{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),#ff686033,#ff686000 60%)}
#suivi-solis .is-lit > .b8s-glow{opacity:1}
#suivi-solis .b8s-paper > *{position:relative;z-index:1}

/* ---------- Tablette et téléphone ---------- */
@media(max-width:1000px){
  #suivi-solis .b8s-grid{grid-template-columns:minmax(0,1fr);max-width:680px}
  #suivi-solis .b8s-bilan{margin-top:0}
}
@media(max-width:640px){
  #suivi-solis.b8s{padding:56px 20px 72px}
  #suivi-solis .b8s-bilan{--kw:170px}
  #suivi-solis .b8s-top{padding:22px 20px 2px}
  #suivi-solis .b8s-month{padding:0 20px 6px}
  #suivi-solis .b8s-m{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
  #suivi-solis .b8s-band{padding:16px 20px 18px}
  #suivi-solis .b8s-offer{padding:26px 22px;border-radius:24px}
  #suivi-solis .b8s-free{align-items:flex-start}
}

/* ---------- L'animation, une seule fois (bloc8-suivi.js) ----------
   Quand le mois arrive à l'écran, les trois coches « c'est fait » passent du gris au vert, une à une (environ 2 s).
   Ensuite, plus rien ne bouge. */
#suivi-solis .b8s-month.b8s-anim .b8s-did::before{transition:background-color .5s ease calc(.2s + var(--i) * .65s)}
#suivi-solis .b8s-month.b8s-anim .b8s-did::after{transition:border-color .5s ease calc(.2s + var(--i) * .65s),scale .55s cubic-bezier(.34,1.56,.64,1) calc(.2s + var(--i) * .65s)}
#suivi-solis .b8s-month.b8s-anim:not(.is-in) .b8s-did::before{background:#16393e12}
#suivi-solis .b8s-month.b8s-anim:not(.is-in) .b8s-did::after{border-color:#16393e33;scale:.7}
@media(prefers-reduced-motion:reduce){
  #suivi-solis .b8s-anim *,#suivi-solis .b8s-anim *::before,#suivi-solis .b8s-anim *::after{transition:none !important}
}

/* ===== bloc9-pourquoi.css ===== */
/* SOLIS – Bloc 9 « Pourquoi SOLIS », version 2 « le cahier de caisse » (18/10/2026).
   La v1 (deux cartes, gestor en retrait) était trop lisse : sauvegardée dans bloc9-pourquoi.avant-cahier.css / .js
   et index-hero-c.avant-cahier9.html.
   L'idée : tout indépendant connaît son cahier de caisse. D'un côté ce qui sort (le gestor s'en occupe),
   de l'autre ce qui rentre (SOLIS s'en occupe). Le titre « administratif / chiffre d'affaires » devient une image.
   - Un seul grand cahier papier, liseré corail. La page de gauche (ce qui sort) est sable et plus étroite : le gestor en retrait.
   - La page de gauche finit sur un tampon « En règle ». La page de droite (ce qui rentre) a la marge corail du cahier. Trois nouveaux clients y entrent,
     chacun avec la raison (sans la recette) et ce qu'il fait : il appelle, elle écrit, il pousse la porte.
   - Le bandeau bleu pétrole porte la phrase clé, reliée au chiffre d'affaires.
   - Kenai passe la tête au-dessus du cahier, côté « ce qui rentre » : il surveille les arrivées.
   - 18/10, 11 h 35 (« ça manque de peps ») : « + » verts pleins, étiquettes corail pleines comme les boutons du site,
     et un total souligné deux fois en bas de chaque page : 0 nouveau client côté gestor, +3 côté SOLIS.
   - Une seule animation, jouée une fois (bloc9-pourquoi.js) : les trois « + » s'inscrivent l'un après l'autre,
     le total monte de 0 à +3 en même temps, puis la page du gestor s'efface un peu. Sans animation (réglage « réduire les animations »), on voit la position finale.
   Tailles verrouillées : titres 25 / 21 px, textes 18 à 21 px, rien sous 16 px. */

#pourquoi-solis.b9{--b9-p:#16393e;--b9-t:#1d2226;--b9-g:#5d6d70;--b9-g2:#7b878a;--b9-papier:#fffdf9;--b9-sable:#efe6da;
  --b9-c:#ff6860;--b9-cc:#ff8b7e;--b9-ct:#c8433a;--b9-v:#2fa866;--b9-ligne:34px;
  position:relative;z-index:1;isolation:isolate;margin:0;padding:clamp(56px,5vw,88px) 6% clamp(72px,6vw,104px);
  font-family:var(--f-texte,Arial,Helvetica,sans-serif);color:var(--b9-t);
  background:radial-gradient(40% 50% at 78% 58%,#ffe3d8 0%,#ffe3d800 72%),#fcf8f3}
#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:1180px;margin:0 auto}

/* L'en-tête : la phrase du gestor plus discrète, celle de SOLIS en bleu pétrole plein */
section#pourquoi-solis.b9 h2{margin:0 0 18px;max-width:20em;color:var(--b9-p) !important}
#pourquoi-solis .b9-h-g,#pourquoi-solis h2 em{display:block}
#pourquoi-solis .b9-h-g{color:var(--b9-g2);font-weight:600}
#pourquoi-solis .b9-lead{max-width:640px;font-size:clamp(18px,1.42vw,21px);line-height:1.55;color:var(--c-texte,#4b5c5f)}

/* ---------- Le cahier ---------- */
#pourquoi-solis .b9-book{position:relative;margin-top:clamp(40px,4vw,56px);border:1.5px solid transparent;border-radius:24px;
  background:linear-gradient(var(--b9-papier),var(--b9-papier)) padding-box,
    linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 30%,#ff8b7e00 64%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 44px 90px -40px #1d222680,0 12px 26px -12px #1d22263d}
#pourquoi-solis .b9-pages{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);border-radius:22px 22px 0 0;overflow:hidden}

/* Kenai passe la tête au-dessus du cahier, côté « ce qui rentre » */
#pourquoi-solis .b9-kenai{position:absolute;z-index:3;right:56px;bottom:calc(100% - 30px);width:146px;height:auto;pointer-events:none;
  filter:drop-shadow(0 8px 8px #4a2a2026)}

/* Les deux têtes de page */
#pourquoi-solis .b9-ph{display:flex;align-items:baseline;gap:12px}
#pourquoi-solis .b9-sign{font:700 clamp(30px,2.6vw,38px)/1 var(--f-titre,Arial,sans-serif)}
#pourquoi-solis .b9-pt{font:700 21px/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em}
#pourquoi-solis .b9-who{margin-top:4px !important;font-size:16px;font-weight:600}

/* Page de gauche : ce qui sort, le gestor s'en occupe (en retrait) */
#pourquoi-solis .b9-out{display:flex;flex-direction:column;padding:34px 30px 30px 34px;background:var(--b9-sable);color:var(--b9-g)}
#pourquoi-solis .b9-out .b9-sign,#pourquoi-solis .b9-out .b9-pt{color:var(--b9-g2)}
#pourquoi-solis .b9-out .b9-who{color:var(--b9-g2)}
#pourquoi-solis .b9-out ul{list-style:none;padding:0;margin:22px 0 0}
#pourquoi-solis .b9-out li{position:relative;padding:12px 0 12px 24px;font-size:18px;line-height:1.4;box-shadow:0 -1px 0 #16393e14}
#pourquoi-solis .b9-out li::before{content:"";position:absolute;left:2px;top:23px;width:10px;height:2px;border-radius:2px;background:var(--b9-g2)}
/* Le tampon « En règle » du gestor : c'est tout ce que cette page produit */
#pourquoi-solis .b9-stamp{align-self:center;margin:auto 0 !important;transform:rotate(-6deg);padding:12px 22px;border:2.5px solid #7b878ab3;border-radius:10px;
  box-shadow:inset 0 0 0 3px var(--b9-sable),inset 0 0 0 4.5px #7b878a80;font:700 21px/1 var(--f-titre,Arial,sans-serif);letter-spacing:.01em;color:#7b878a;opacity:.9}
#pourquoi-solis .b9-out ul{margin-bottom:28px !important}

/* Page de droite : ce qui rentre, SOLIS s'en occupe. La marge corail du cahier sépare les deux pages. */
#pourquoi-solis .b9-in{position:relative;display:flex;flex-direction:column;padding:34px 38px 26px 44px;
  background:var(--b9-papier);
  box-shadow:inset 2px 0 0 #ff8b7eb3}
#pourquoi-solis .b9-in .b9-sign{color:var(--b9-v);font-size:clamp(36px,3vw,44px)}
#pourquoi-solis .b9-in .b9-pt{font-size:clamp(21px,1.75vw,25px);color:var(--b9-p)}
#pourquoi-solis .b9-in .b9-who{color:var(--b9-ct)}
#pourquoi-solis .b9-entries{list-style:none;padding:0;margin:16px 0 0}
#pourquoi-solis .b9-e{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:18px 0}
#pourquoi-solis .b9-e+.b9-e{box-shadow:0 -1px 0 #16393e17}
#pourquoi-solis .b9-plus{position:relative;width:30px;height:30px;margin-top:1px;border-radius:50%;background:var(--b9-v);box-shadow:0 6px 14px -6px #2fa866b3}
#pourquoi-solis .b9-plus::before,#pourquoi-solis .b9-plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.6px;border-radius:2px;background:#fff;transform:translate(-50%,-50%)}
#pourquoi-solis .b9-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
#pourquoi-solis .b9-e-t{font-size:clamp(18px,1.5vw,20px);line-height:1.4;font-weight:600;color:var(--b9-p)}
#pourquoi-solis .b9-e-why{grid-column:2;margin-top:2px !important;font-size:17px;line-height:1.45;color:var(--b9-g)}
#pourquoi-solis .b9-chip{grid-column:3;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 16px 10px 13px;border-radius:999px;background:var(--b9-c);box-shadow:0 10px 20px -10px #ff6860cc;
  font:700 16px/1 var(--f-texte,Arial,sans-serif);color:var(--b9-t)}
#pourquoi-solis .b9-chip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Le total de chaque page, souligné deux fois comme dans un cahier de caisse : 0 d'un côté, +3 de l'autre */
#pourquoi-solis .b9-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:22px !important;padding-top:14px;
  border-top:4px double #16393e33;font-size:18px;font-weight:700}
#pourquoi-solis .b9-in .b9-total{margin-top:auto !important;border-top-color:#16393e4d;color:var(--b9-p)}
#pourquoi-solis .b9-out .b9-total{color:var(--b9-g2)}
#pourquoi-solis .b9-num{font:800 clamp(38px,3.4vw,50px)/1 var(--f-titre,Arial,sans-serif);letter-spacing:-.03em;font-variation-settings:"opsz" 72}
#pourquoi-solis .b9-out .b9-num{color:#9aa4a6}
#pourquoi-solis .b9-in .b9-num{color:var(--b9-v)}
#pourquoi-solis .b9-book.b9-anim .b9-in .b9-num{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
#pourquoi-solis .b9-book .b9-in .b9-num.is-bump{transform:scale(1.18)}

/* Le bandeau : la phrase clé */
#pourquoi-solis .b9-band{display:flex;gap:14px;align-items:flex-start;padding:20px 38px 22px;border-radius:0 0 22px 22px;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}

/* L'animation unique : les trois « + » s'inscrivent l'un après l'autre, puis la page du gestor s'efface un peu */
#pourquoi-solis .b9-book.b9-anim .b9-plus{transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .5s + .2s),opacity .3s ease calc(var(--i) * .5s + .2s)}
#pourquoi-solis .b9-book.b9-anim .b9-chip{transition:opacity .5s ease calc(var(--i) * .5s + .45s)}
#pourquoi-solis .b9-book.b9-anim .b9-out{transition:opacity .9s ease 1.8s}
#pourquoi-solis .b9-book.b9-anim:not(.is-in) .b9-plus{transform:scale(.3);opacity:0}
#pourquoi-solis .b9-book.b9-anim:not(.is-in) .b9-chip{opacity:0}
#pourquoi-solis .b9-book.b9-anim.is-in .b9-out{opacity:.86}

/* Christel */
#pourquoi-solis .b9-person{display:flex;gap:20px;align-items:center;margin-top:32px;padding:24px 32px 24px 24px;
  border-radius:20px;background:var(--b9-papier);box-shadow:inset 0 0 0 1px #16393e14,0 18px 36px -26px #1d222659}
#pourquoi-solis .b9-person .b9-photo{flex:0 0 80px;width:80px;height:80px;border-radius:14px;object-fit:cover;object-position:55% 40%}
#pourquoi-solis .b9-person p{max-width:820px;font-size:clamp(18px,1.42vw,21px);line-height:1.55;color:var(--c-texte,#4b5c5f)}
#pourquoi-solis .b9-person strong{color:var(--b9-p)}

/* La dernière ligne et le lien vers le diagnostic */
#pourquoi-solis .b9-last{margin-top:30px !important;font-size:clamp(18px,1.42vw,21px);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}

/* ---------- Tablette et téléphone ---------- */
@media(max-width:1000px){
  #pourquoi-solis .b9-book{max-width:720px;margin-top:120px}
  #pourquoi-solis .b9-pages{grid-template-columns:minmax(0,1fr)}
  #pourquoi-solis .b9-out{padding:26px 26px 26px}
  #pourquoi-solis .b9-stamp{align-self:flex-start;margin:0 0 0 6px !important}
  #pourquoi-solis .b9-in{box-shadow:inset 0 2px 0 #ff8b7eb3}
  #pourquoi-solis .b9-person{max-width:720px}
}
@media(max-width:640px){
  #pourquoi-solis.b9{padding:56px 20px 72px}
  #pourquoi-solis .b9-book{margin-top:104px}
  #pourquoi-solis .b9-kenai{right:22px;width:118px}
  #pourquoi-solis .b9-out{padding:22px 20px 20px}
  #pourquoi-solis .b9-in{padding:24px 20px 14px}
  #pourquoi-solis .b9-e{grid-template-columns:34px minmax(0,1fr);gap:4px 12px}
  #pourquoi-solis .b9-chip{grid-column:2;grid-row:auto;justify-self:start;margin-top:10px}
  #pourquoi-solis .b9-band{padding:18px 20px 20px}
  #pourquoi-solis .b9-person{align-items:flex-start;gap:16px;padding:22px 20px}
  #pourquoi-solis .b9-person .b9-photo{flex-basis:60px;width:60px;height:60px}
}

/* ===== fonds-blocs.css ===== */
/* SOLIS · Fonds avec de la profondeur (19/10/2026)
   Demande de Christel : les blocs clairs étaient trop lisses, trop génériques.
   Piste A « le plan de la ville à l'encre », validée pour le bloc « Votre gestor s'occupe de ce qui sort » :
   le plan de rues de la carte du quartier, redessiné à l'encre bleu pétrole (assets/plan-encre.webp), très léger,
   sur un papier avec du grain et une lumière chaude en haut à droite. Purement décoratif : rien ne bouge. */

#pourquoi-solis.b9{background:radial-gradient(45% 40% at 80% 50%,#fbe6da 0%,#fbe6da00 100%),linear-gradient(#f4ede8 0,#f6efe5 180px,#f6efe5 calc(100% - 180px),#f8f3ee 100%)}
#pourquoi-solis.b9::before,#pourquoi-solis.b9::after{content:"";position:absolute;pointer-events:none;z-index:-1}
/* le plan à l'encre, sur la droite, qui s'efface vers les bords */
#pourquoi-solis.b9::before{right:-6%;top:-4%;width:78%;height:112%;
  background:url("assets/plan-encre.webp") left center / cover no-repeat;opacity:.3;
  /* il s'efface vers les bords, et toujours avant le haut et le bas du bloc */
  -webkit-mask-image:linear-gradient(transparent 4%,#000 20%,#000 78%,transparent 96%),radial-gradient(70% 70% at 60% 50%,#000 35%,transparent 85%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(transparent 4%,#000 20%,#000 78%,transparent 96%),radial-gradient(70% 70% at 60% 50%,#000 35%,transparent 85%);
          mask-composite:intersect}
/* le grain du papier */
#pourquoi-solis.b9::after{inset:0;opacity:.45;mix-blend-mode:multiply;
  /* fondu en haut et en bas : pas de ligne de démarcation avec les blocs voisins */
  -webkit-mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
          mask-image:linear-gradient(transparent 0,#000 180px,#000 calc(100% - 180px),transparent 100%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:700px){
  #pourquoi-solis.b9::before{right:-30%;top:0;width:150%;height:60%;opacity:.24}
}

/* ===================================================================================
   L'histoire de la page (19/10/2026, validée par Christel) : une journée, de la nuit au soir.
   Ton métier, c'est la visibilité : la page passe de la nuit (le client est invisible : Google, le radar, les IA, fonds sombres)
   au plein jour (tout le monde le voit), puis au soir avec Kenai. Le fil conducteur : le plan de la ville,
   la nuit avec ses rues éclairées, le jour dessiné à l'encre. Un seul passage du sombre au clair, ensuite la lumière change doucement.
   6 · l'aube · 7 · le lever du soleil · 8 · le plein jour · 9 · la journée (plus haut) · 10 · la fin d'après-midi · 11 · le soir (photo de Kenai).
   Chaque bloc finit dans la couleur où commence le suivant : pas de ligne de coupure.
   =================================================================================== */

/* 6 · L'aube : lumière froide, du rose qui monte du bas, le plan de la ville apparaît à peine (à gauche, retourné) */
#comment-ca-marche.b6{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(70% 45% at 55% 108%,#ffd0c0 0%,#ffd0c000 70%),
  linear-gradient(180deg,#e6e2ea 0%,#efe5e6 45%,#f6e6dd 100%)}
#comment-ca-marche.b6::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;top:6%;width:58%;height:90%;
  background:url("assets/plan-encre.webp") center / cover no-repeat;transform:scaleX(-1);opacity:.16;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 60% at 50% 55%,#000 30%,transparent 80%)}

/* 7 · Le lever du soleil : pêche, le soleil en haut à droite, les lignes de niveau corail */
#mise-en-place.solis-upgrade{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  url("assets/b7-topo.svg") center / cover no-repeat,
  radial-gradient(22% 26% at 90% 9%,#fff3df 0%,#fff3df00 70%),
  radial-gradient(60% 55% at 90% 9%,#ffb48ccc 0%,#ffb48c00 72%),
  radial-gradient(45% 40% at 0% 75%,#ffcfb4aa 0%,#ffcfb400 70%),
  linear-gradient(180deg,#f6e6dd 0%,#f7dccb 55%,#f9e6da 100%) !important}

/* 8 · Le plein jour : le fond le plus lumineux de la page */
#suivi-solis.b8s{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(60% 50% at 50% 35%,#ffffff 0%,#fffffff0 30%,#ffffff00 75%),
  radial-gradient(40% 34% at 94% 62%,#ffe6d6 0%,#ffe6d600 70%),
  linear-gradient(180deg,#f9e6da 0%,#fffaf3 30%,#fdf7f0 70%,#f4ede8 100%)}
#suivi-solis.b8s::before{opacity:.55}

/* 10 · La fin d'après-midi : une lumière dorée, basse, à gauche ; un autre quartier du plan, à droite */
#questions-frequentes.b10{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(50% 60% at -5% 85%,#ffd59a 0%,#ffd59a00 70%),
  radial-gradient(35% 40% at 100% 20%,#fbe3cf 0%,#fbe3cf00 70%),
  linear-gradient(180deg,#f8f3ee 0%,#f6ead9 55%,#f1dcc2 100%)}
#questions-frequentes.b10::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-14%;bottom:-10%;width:85%;height:95%;
  background:url("assets/plan-encre.webp") 30% 70% / cover no-repeat;opacity:.2;transform:rotate(-8deg) scale(1.25);
  -webkit-mask-image:radial-gradient(60% 60% at 55% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 60% at 55% 55%,#000 30%,transparent 80%)}
#questions-frequentes.b10{overflow:hidden}

@media (max-width:700px){
  #comment-ca-marche.b6::after{left:0;width:100%;height:50%;top:4%;opacity:.12}
  #questions-frequentes.b10::before{right:-40%;width:150%;height:55%;opacity:.16}
}

/* ===== bloc10-faq.css ===== */
/* SOLIS – Bloc 10 « Questions fréquentes », version 2 « la réponse courte d'un coup d'œil » (18/10/2026).
   Ancienne version (accordéon simple) : index-hero-c.avant-bloc10.html.
   L'idée : un visiteur de 40 ans et plus ne veut pas ouvrir neuf questions pour se rassurer.
   Sous chaque question, la réponse courte est déjà visible (« Aucun problème », « Non, sans engagement »…).
   Coche verte quand la réponse rassure ; étiquette neutre bleu pétrole quand la réponse est franche (« Personne ne peut la garantir »).
   - Deux familles d'objections : « Est-ce que c'est pour moi ? » et « Est-ce que je prends un risque ? ».
   - Cartes « papier » claires ; la question ouverte prend le liseré corail.
   - Le bandeau bleu pétrole porte la phrase clé : une question pas dans la liste, on vous répond en français.
   - Pas de Kenai ici : il est déjà au bloc 9 juste au-dessus et au bloc 11 juste en dessous.
   - Une seule animation, jouée une fois (bloc10-faq.js) : les réponses courtes apparaissent l'une après l'autre
     et les coches vertes se tracent. Les questions s'ouvrent sans glissement.
   Tailles verrouillées : groupes 25 / 21 px, questions et réponses 18 à 21 px, réponses courtes 16 px minimum. */

#questions-frequentes.b10{--b10-p:#16393e;--b10-t:#1d2226;--b10-g:#5d6d70;--b10-papier:#fffdf9;--b10-v:#2fa866;--b10-vt:#1f7a49;
  position:relative;z-index:1;isolation:isolate;margin:0;padding:clamp(56px,5vw,88px) 6% clamp(72px,6vw,104px);
  font-family:var(--f-texte,Arial,Helvetica,sans-serif);color:var(--b10-t);
  background:radial-gradient(38% 46% at 12% 30%,#ffe9e0 0%,#ffe9e000 70%),#f6efe7}
#questions-frequentes.b10 *,#questions-frequentes.b10 *::before,#questions-frequentes.b10 *::after{box-sizing:border-box}
#questions-frequentes.b10 :where(p,h3){margin:0}
#questions-frequentes .b10-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:start}

/* Colonne de gauche : titre, phrase, bandeau (reste visible pendant qu'on lit les questions) */
#questions-frequentes .b10-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:28px}
section#questions-frequentes.b10 h2{margin:0;color:var(--b10-p) !important}
#questions-frequentes h2 em{display:block;font-style:normal}
#questions-frequentes .b10-head{display:flex;flex-direction:column;gap:22px}
#questions-frequentes .b10-lead{font-size:clamp(20px,1.7vw,25px);line-height:1.45;color:var(--c-texte,#4b5c5f);max-width:22em}

/* Le bandeau bleu pétrole */
#questions-frequentes .b10-band{display:flex;gap:14px;align-items:flex-start;padding:20px 24px 22px;border-radius:16px;background:var(--b10-p);color:#eef3f3;
  font-size:clamp(18px,1.42vw,21px);line-height:1.5;font-weight:500;box-shadow:0 18px 40px -24px #16393e99}
#questions-frequentes .b10-band svg{flex:none;width:26px;height:26px;margin-top:2px;fill:none;stroke:#ff8b7e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#questions-frequentes .b10-band a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:#ff8b7e;text-underline-offset:4px;overflow-wrap:anywhere}

/* Les deux familles de questions */
#questions-frequentes .b10-groups{display:flex;flex-direction:column;gap:clamp(36px,3.4vw,52px)}
#questions-frequentes .b10-group h3{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:700 clamp(21px,1.75vw,25px)/1.22 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em;color:var(--b10-p)}
#questions-frequentes .b10-group h3::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,#ff8b7e99,#ff8b7e00)}
#questions-frequentes .b10-list{display:flex;flex-direction:column;gap:10px}

/* Une question = une carte papier */
#questions-frequentes .b10-q{position:relative;border:1.5px solid #ebe1d6;border-radius:16px;background:var(--b10-papier);
  box-shadow:0 1px 0 #fff inset,0 6px 16px -12px #1d222640}
#questions-frequentes .b10-q:hover{border-color:#f3c3b8}
#questions-frequentes .b10-q[open]{border-color:transparent;
  background:linear-gradient(var(--b10-papier),var(--b10-papier)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 38%,#ff8b7e00 62%,#ff8b7e99 100%) border-box;
  box-shadow:0 1px 0 #fff inset,0 22px 44px -26px #1d222666}
#questions-frequentes .b10-q summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:start;padding:18px 20px 18px 24px;border-radius:15px}
#questions-frequentes .b10-q summary::-webkit-details-marker{display:none}
#questions-frequentes .b10-q summary:focus-visible{outline:2px solid #ff6860;outline-offset:2px}
#questions-frequentes .b10-qt{grid-column:1;font-size:clamp(18px,1.42vw,21px);line-height:1.4;font-weight:650;color:var(--b10-p)}

/* Le bouton + / − (pas d'animation, il change simplement) */
#questions-frequentes .b10-pm{grid-column:2;grid-row:1 / span 2;position:relative;width:36px;height:36px;margin-top:-2px;border-radius:50%;background:#16393e0d}
#questions-frequentes .b10-pm::before,#questions-frequentes .b10-pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--b10-p)}
#questions-frequentes .b10-pm::after{transform:rotate(90deg)}
#questions-frequentes .b10-q[open] .b10-pm{background:#ff8b7e26}
#questions-frequentes .b10-q[open] .b10-pm::after{display:none}

/* La réponse courte, visible sans ouvrir */
#questions-frequentes .b10-chip{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 8px;border-radius:999px;
  font-size:16px;line-height:1.3;font-weight:700}
#questions-frequentes .b10-chip.is-yes{background:#2fa8661c;color:var(--b10-vt)}
#questions-frequentes .b10-chip.is-yes svg{flex:none;width:20px;height:20px;border-radius:50%;background:var(--b10-v);padding:3px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#questions-frequentes .b10-chip.is-frank{padding-left:14px;background:#16393e12;color:var(--b10-p)}

/* Le détail */
#questions-frequentes .b10-a{padding:0 24px 22px}
#questions-frequentes .b10-a p{max-width:40em;font-size:clamp(18px,1.42vw,21px);line-height:1.55;color:var(--c-texte,#4b5c5f)}
#questions-frequentes .b10-a p+p{margin-top:12px}
#questions-frequentes .b10-a::before{content:"";display:block;height:1px;margin:0 0 16px;background:#16393e14}

/* L'animation unique : les réponses courtes apparaissent l'une après l'autre, les coches se tracent */
#questions-frequentes.b10-anim .b10-chip{opacity:0;transform:translateY(6px)}
#questions-frequentes.b10-anim .b10-chip polyline{stroke-dasharray:20;stroke-dashoffset:20}
#questions-frequentes.b10-anim .g-in .b10-chip{opacity:1;transform:none;transition:opacity .4s ease calc(var(--i,0)*110ms),transform .4s ease calc(var(--i,0)*110ms)}
#questions-frequentes.b10-anim .g-in .b10-chip polyline{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease calc(var(--i,0)*110ms + .2s)}
@media (prefers-reduced-motion:reduce){#questions-frequentes.b10-anim .b10-chip{opacity:1;transform:none}#questions-frequentes.b10-anim .b10-chip polyline{stroke-dashoffset:0}}

/* Tablette et téléphone : une seule colonne, le bandeau passe après les questions */
@media (max-width:960px){
  #questions-frequentes .b10-wrap{display:flex;flex-direction:column;gap:32px}
  #questions-frequentes .b10-side{display:contents}
  #questions-frequentes .b10-head{order:1;display:flex;flex-direction:column;gap:18px}
  #questions-frequentes .b10-groups{order:2}
  #questions-frequentes .b10-band{order:3}
}
@media (max-width:600px){
  #questions-frequentes.b10{padding:48px 16px 60px}
  #questions-frequentes .b10-lead{font-size:20px}
  #questions-frequentes .b10-q summary{padding:16px 14px 16px 16px;gap:10px 12px}
  #questions-frequentes .b10-qt{font-size:18px}
  #questions-frequentes .b10-a{padding:0 16px 20px}
  #questions-frequentes .b10-a p{font-size:18px}
  #questions-frequentes .b10-band{font-size:18px;padding:18px 18px 20px}
}

/* 18/10, 11 h 55 : petite flèche corail dessinée à la main qui montre le premier « + » (pour dire « ça s'ouvre »).
   Elle fait partie de l'animation unique : elle se trace une fois, après les réponses courtes, puis ne bouge plus.
   Dès qu'une question est ouverte, elle s'efface. Sur grand écran, elle est à droite de la carte ;
   ailleurs (petit ordinateur, tablette, téléphone), elle arrive par le dessus. */
#questions-frequentes.b10{overflow-x:clip}
#questions-frequentes .b10-list{position:relative}
#questions-frequentes .b10-arrow{position:absolute;z-index:2;pointer-events:none;fill:none;stroke:#ff6860;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s ease}
#questions-frequentes .b10-arrow.is-side{display:none;left:calc(100% - 24px);top:-28px;width:120px;height:auto}
#questions-frequentes .b10-arrow.is-top{right:20px;top:-46px;width:70px;height:auto}
@media (min-width:1320px){#questions-frequentes .b10-arrow.is-side{display:block}#questions-frequentes .b10-arrow.is-top{display:none}}
@media (max-width:600px){#questions-frequentes .b10-arrow.is-top{right:14px}}
#questions-frequentes.has-opened .b10-arrow{opacity:0}
/* Le tracé */
#questions-frequentes.b10-anim .b10-arrow path{stroke-dasharray:260;stroke-dashoffset:260}
#questions-frequentes.b10-anim.is-in .b10-arrow path:first-child{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease-out .7s}
#questions-frequentes.b10-anim.is-in .b10-arrow path:last-child{stroke-dashoffset:0;transition:stroke-dashoffset .2s ease-out 1.25s}
@media (prefers-reduced-motion:reduce){#questions-frequentes.b10-anim .b10-arrow path{stroke-dashoffset:0}}

/* ===== bloc11-prochain-pas.css ===== */
/* 18/10, 12 h 07 : la carte « Votre diagnostic » est retirée (elle répétait le bloc 4). Ses styles restent ci-dessous mais ne servent plus.
   Le bloc n'a donc plus d'animation à lui. Sauvegarde avec la carte : bloc11-prochain-pas.avant-sans-carte.css */
/* SOLIS – Bloc 11 « Votre prochain pas », version 2 (18/10/2026). Ancienne version : index-hero-c.avant-bloc11.html.
   L'idée : avant le dernier bouton, montrer ce qu'on reçoit. Une carte papier « Votre diagnostic » (exemple)
   flotte devant l'ordinateur que Kenai regarde : les 4 axes dans l'ordre validé (trouver, comprendre, choisir, joindre)
   et les 3 couleurs (Au point / À revoir / Vous coûte des clients). Bandeau bleu pétrole dans la carte.
   - Texte : une seule mention « sous 3 jours ouvrés », le diagnostic relié aux clients perdus.
   - La phrase de Kenai devient une petite légende sous la photo, loin du bouton.
   - Plus de petit trait devant « Votre prochain pas ».
   - Téléphone : Kenai recadré en grand sous la carte.
   - Une seule animation, jouée une fois (bloc11-prochain-pas.js) : les couleurs se posent sur les 4 axes, l'une après l'autre.
   Tailles verrouillées : titre comme les autres blocs, texte 20–21 px (18 px téléphone), carte 21–25 px, petits textes 16 px minimum. */

#votre-prochain-pas.b11{--b11-p:#16393e;--b11-papier:#fffdf9;--b11-v:#2fa866;--b11-o:#e8962a;--b11-r:#e5483f;
  position:relative;z-index:1;isolation:isolate;overflow:hidden;margin:0;min-height:clamp(620px,51.2vw,820px);
  padding:clamp(56px,6vw,96px) 6.25%;display:flex;align-items:center;
  font-family:var(--f-texte,Arial,Helvetica,sans-serif);color:#f6f6f5;background:#0e1316}
#votre-prochain-pas.b11 *,#votre-prochain-pas.b11 *::before,#votre-prochain-pas.b11 *::after{box-sizing:border-box}
#votre-prochain-pas.b11 :where(p,ul,figure){margin:0}

/* La photo en fond, Kenai à droite ; voile sombre à gauche pour lire le texte */
#votre-prochain-pas.b11 .b11-photo{position:absolute;inset:0;z-index:-2;margin:0}
#votre-prochain-pas.b11 .b11-photo img.conclusion-kenai{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;
  object-fit:cover !important;object-position:right center !important;transform:none !important;mask-image:none !important;z-index:0 !important}
#votre-prochain-pas.b11 .b11-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0e1316 0%,#0e1316e6 30%,#0e131600 58%)}
#votre-prochain-pas.b11 .b11-caption{position:absolute;z-index:1;right:5%;bottom:clamp(20px,3vw,36px);max-width:300px;font-size:16px;line-height:1.45;color:#c4ccce;text-align:right}

/* Le texte */
#votre-prochain-pas.b11 .b11-copy{position:relative;width:min(44%,600px);display:flex;flex-direction:column;align-items:flex-start;gap:22px}
#votre-prochain-pas.b11 .b11-kicker{font-size:17px;font-weight:700;color:#ff8b7e}
section#votre-prochain-pas.b11 h2{margin:0;color:#fff !important}
#votre-prochain-pas.b11 h2 em{font-style:normal}
#votre-prochain-pas.b11 .b11-text{font-size:clamp(18px,1.42vw,21px);line-height:1.55;color:#e8ecec;max-width:30em}
#votre-prochain-pas.b11 .solis-offer-cta{font:700 clamp(17px,1.4vw,21px)/1.2 var(--f-texte,Arial,sans-serif);padding:17px 28px;gap:22px}
#votre-prochain-pas.b11 .solis-offer-cta svg{width:24px;height:24px}
#votre-prochain-pas.b11 .b11-micro{margin-top:-6px !important;font-size:17px;line-height:1.5;color:#d4dadb}
#votre-prochain-pas.b11 .b11-micro a{color:inherit;text-decoration:underline;text-decoration-color:#ff8b7e;text-underline-offset:4px}

/* La carte « Votre diagnostic », devant l'ordinateur que Kenai regarde */
#votre-prochain-pas.b11 .b11-card{position:absolute;z-index:1;left:45%;top:50%;transform:translateY(-55%);width:352px;
  border:1.5px solid transparent;border-radius:20px;overflow:hidden;color:var(--b11-p);
  background:linear-gradient(var(--b11-papier),var(--b11-papier)) padding-box,linear-gradient(145deg,#ff8b7e 0%,#ff8b7e00 36%,#ff8b7e00 64%,#ff8b7e 100%) border-box;
  box-shadow:0 30px 60px -24px #000000b3,0 8px 18px -8px #00000066}
#votre-prochain-pas.b11 .b11-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px 4px}
#votre-prochain-pas.b11 .b11-card-t{font:700 clamp(21px,1.6vw,23px)/1.2 var(--f-titre,Arial,sans-serif);letter-spacing:-.015em}
#votre-prochain-pas.b11 .b11-ex{flex:none;padding:3px 10px;border-radius:999px;background:#f1eee9;color:#6b6a68;font-size:16px;font-weight:600}
#votre-prochain-pas.b11 .b11-q{padding:0 20px 8px;font-size:16px;color:#5d6d70}
#votre-prochain-pas.b11 .b11-axes{list-style:none;padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
#votre-prochain-pas.b11 .b11-axes li{--c:var(--b11-v);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 8px 9px 10px;border-radius:12px;background:#16393e08}
#votre-prochain-pas.b11 .b11-axes .is-o{--c:var(--b11-o)}
#votre-prochain-pas.b11 .b11-axes .is-r{--c:var(--b11-r);background:linear-gradient(90deg,#fde3df,#fdeeeb 70%,#fdeeeb00)}
#votre-prochain-pas.b11 .b11-ax{font-size:17px;font-weight:650;line-height:1.25;white-space:nowrap}
#votre-prochain-pas.b11 .b11-st{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:16px;font-weight:700;line-height:1.2;color:color-mix(in srgb,var(--c) 75%,#16393e);text-align:right}
#votre-prochain-pas.b11 .b11-st::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
#votre-prochain-pas.b11 .b11-band{padding:13px 20px 15px;background:var(--b11-p);color:#eef3f3;font-size:16px;line-height:1.45;font-weight:500}

/* L'animation unique : les couleurs se posent sur les axes, une fois */
#votre-prochain-pas.b11-anim .b11-st{opacity:0;transform:translateX(8px)}
#votre-prochain-pas.b11-anim.is-in .b11-st{opacity:1;transform:none;transition:opacity .4s ease calc(.25s + var(--i,0)*.32s),transform .4s ease calc(.25s + var(--i,0)*.32s)}
@media (prefers-reduced-motion:reduce){#votre-prochain-pas.b11-anim .b11-st{opacity:1;transform:none}}

/* Petit ordinateur et tablette : texte et carte côte à côte, Kenai en grand en dessous */
@media (max-width:1180px){
  #votre-prochain-pas.b11{display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;align-items:center;min-height:0;padding:clamp(48px,6vw,80px) 6.25% 0}
  #votre-prochain-pas.b11 .b11-copy{width:auto;max-width:640px;grid-column:1;grid-row:1}
  #votre-prochain-pas.b11 .b11-card{position:relative;left:auto;top:auto;transform:none;width:100%;grid-column:2;grid-row:1;z-index:2}
  #votre-prochain-pas.b11 .b11-photo{position:relative;inset:auto;z-index:0;grid-column:1 / -1;grid-row:2;height:clamp(300px,40vw,440px);margin:-30px -6.9vw 0}
  #votre-prochain-pas.b11 .b11-photo img.conclusion-kenai{object-position:78% 62% !important}
  #votre-prochain-pas.b11 .b11-photo::after{background:linear-gradient(180deg,#0e1316 0%,#0e131600 35%)}
  #votre-prochain-pas.b11 .b11-caption{grid-column:1 / -1;grid-row:3;position:relative;right:auto;bottom:auto;max-width:none;text-align:right;margin:0 -6.9vw;padding:6px 6.25% 36px;background:#0e1316}
}
/* Téléphone : texte, puis la carte, puis Kenai en grand, puis la légende */
@media (max-width:860px){
  #votre-prochain-pas.b11{display:flex;flex-direction:column;align-items:stretch;padding:48px 16px 0}
  #votre-prochain-pas.b11 .b11-copy{order:1}
  #votre-prochain-pas.b11 .b11-card{order:2;max-width:380px;margin:36px 0 0}
  #votre-prochain-pas.b11 .b11-photo{order:3;height:360px;margin:12px -16px 0}
  #votre-prochain-pas.b11 .b11-caption{order:4;text-align:left;margin:0 -16px;padding:4px 16px 36px}
  #votre-prochain-pas.b11 .b11-text{font-size:18px}
  #votre-prochain-pas.b11 .b11-micro{font-size:16px}
}

/* 18/10 : sur grand écran, le titre garde ses deux lignes comme avant */
@media (min-width:1181px){section#votre-prochain-pas.b11 h2{width:min(50vw,720px)}}

/* 18/10, 12 h 11 (capture de Christel : coupure trop nette entre la FAQ claire et ce bloc sombre).
   Fondu : le haut du bloc part de la couleur crème de la FAQ (#f6efe7), passe par des tons chauds
   (la lumière ambrée de la photo de Kenai), puis arrive au noir. Pas de ligne de coupure. Rien ne bouge.
   Sauvegarde : bloc11-prochain-pas.avant-fondu.css */
#votre-prochain-pas.b11{--b11-fondu:clamp(170px,15vw,260px);padding-top:calc(var(--b11-fondu) + clamp(24px,3vw,48px))}
#votre-prochain-pas.b11::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--b11-fondu);pointer-events:none;
  background:linear-gradient(180deg,#f6efe7 0%,#efe0d3 14%,#d9bba6 30%,#8e6a58 52%,#3a2c27 74%,#161616 90%,#0e131600 100%)}
@media (max-width:860px){#votre-prochain-pas.b11{--b11-fondu:150px;padding-top:calc(150px + 24px)}}

/* ===== relecture-1810.css ===== */
/* Relecture du 18/10 : corrections après lecture « comme un visiteur » */

/* Bloc 3 : la date passe sous les étoiles, plus de chevauchement */
#etre-choisi .craft-review-top{display:grid !important;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:center}
#etre-choisi .craft-avatar{grid-row:1 / span 2}
#etre-choisi .craft-stars{grid-column:2;margin-top:0 !important;line-height:1.1;white-space:nowrap}
#etre-choisi .craft-date{position:static !important;grid-column:2;line-height:1.2}

/* Bloc 4 : carte « zone par zone » en papier clair, lisible sur la carte sombre */
#position-locale .radar-report.sc-card{background:#fbf7f1 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
#position-locale .radar-report .rr-why{color:#4d5e61 !important}

/* Bloc 6 : Kenai couché (pose « attentif »), au pied du diagnostic, sans toucher la carte */
#comment-ca-marche .b6-stage{position:relative}
#comment-ca-marche .b6-kenai{position:absolute;z-index:3;right:-6px;bottom:-168px;width:170px;height:auto;pointer-events:none}
@media(min-width:861px){#comment-ca-marche .b6-stage{margin-bottom:96px}}
@media(max-width:860px){
  #comment-ca-marche .b6-stage{margin-bottom:128px}
  #comment-ca-marche .b6-kenai{right:0;bottom:-120px;width:122px}
}

/* Bloc 8 : Kenai net, pattes posées sur le bord de la carte (plus de fondu sur le côté droit) */
#suivi-solis .b8s-bilan{--kw:clamp(132px,10.5vw,158px)}
#suivi-solis .b8s-kenai{-webkit-mask-image:none !important;mask-image:none !important;filter:drop-shadow(0 6px 8px #4a2a2022) !important}
#suivi-solis .b8s-paper{margin-top:calc(var(--kw) * .965) !important}
@media(max-width:640px){#suivi-solis .b8s-bilan{--kw:128px}}

/* Bloc 9 : mention « exemple fictif » sous le +3 */
#pourquoi-solis .b9-ex{display:block;margin-top:2px;font-size:14px;font-weight:500;color:#7a8789;letter-spacing:0}
/* Bloc 3 sur téléphone : l'étiquette « Exemple fictif » ne recouvre plus la citation */
@media(max-width:860px){#etre-choisi .craft-review{overflow:visible !important}#etre-choisi .craft-review .illus-tag{top:auto !important;bottom:-18px !important;right:12px !important;z-index:2}}

/* Haut de page : Christel, la fondatrice, sous le bouton (à la place de la 2e coche) */
.hb-checks .hb-founder{display:flex;align-items:center;gap:10px}
.hb-checks .hb-founder img{flex:0 0 40px;width:40px;height:40px;margin-left:-6px;border-radius:50%;object-fit:cover;object-position:55% 35%;box-shadow:0 0 0 2px #fffaf5,0 4px 10px -4px #16393e66}
.hb-checks .hb-founder strong{font-weight:700;color:#16393e}

/* ===== verif-1810.css ===== */
/* Vérification technique du 18/10 (avant mise en ligne).
   Uniquement de la lisibilité et des petites réparations : aucune taille de texte ne change,
   aucune animation n'est ajoutée. Pour tout annuler : retirer la ligne verif-1810.css dans index-hero-c.html. */

/* 1. Boutons corail : texte anthracite (lisible même en plein soleil, contraste 5,6 au lieu de 2,8).
      Le corail du bouton ne change pas. */
.primary-cta.hb-cta,.solis-offer-cta{color:#1d2226 !important}
.primary-cta.hb-cta svg,.solis-offer-cta svg{color:#1d2226 !important;stroke:currentColor}

/* 2. Petits titres corail sur fond clair : un corail un peu plus profond (contraste 4,9 au lieu de 4). */
#accueil .hb-eyebrow,#comment-ca-marche .b6-eyebrow,
#mise-en-place .offer-kicker,#suivi-solis .offer-kicker{color:#b23a31 !important}

/* 3. Bloc 7 : la frise « Aujourd'hui → 7 jours → 30 jours » et la phrase « Pas encore sûr ? » plus lisibles. */
#mise-en-place .b7k-s3 .b7b-when,#mise-en-place .b7k-s3 p{color:#3f494c !important}
#mise-en-place .offer-reassurance.b7b-after,#mise-en-place .offer-reassurance.b7b-after a{color:#2f3b3e !important}

/* 4. Bloc 9 : la colonne « Ce qui sort » reste plus discrète que « Ce qui rentre », mais se lit sans effort. */
#pourquoi-solis .b9-out .b9-pt,#pourquoi-solis .b9-out .b9-who,#pourquoi-solis .b9-out .b9-stamp,
#pourquoi-solis .b9-out .b9-sign,#pourquoi-solis .b9-out span{color:#55656a !important}
#pourquoi-solis .b9-out .b9-stamp{border-color:#55656a !important}
#pourquoi-solis .b9-out li{color:#4f5a5e !important}
#pourquoi-solis .b9-out .b9-num{color:#6f7b7e !important}
#pourquoi-solis .b9-in .b9-num{color:#23854f !important}
#pourquoi-solis .b9-ex{color:#5f6c6f !important}

/* 5. Petit point corail resté seul en haut à gauche de la page : c'était l'ancien fil de la FAQ,
      qui n'existe plus depuis la nouvelle FAQ. On le masque. */
.faq-coral-route{display:none !important}

/* 6. Étiquette « Vous coûte des clients » (exemple Coiffure Élodie) : rouge un peu plus profond sur le fond rosé. */
#comment-ca-marche .b6-row.s-r .b6-st{color:#b5352d !important}

/* 7. Libellés « Au point » et « À revoir » (blocs 4 et 6) : vert et orange plus foncés pour le texte.
      Les barres de couleur gardent leurs teintes vives. */
#position-locale .rr-list .rr-g .rr-s,#comment-ca-marche .b6-row.s-g .b6-st{color:#1f7a47 !important}
#position-locale .rr-list .rr-o .rr-s,#comment-ca-marche .b6-row.s-o .b6-st{color:#96590c !important}

/* 8. Boutons sur téléphone : texte et flèche regroupés au centre (option D, choisie le 18/10).
      Écriture inchangée, plus de vide au milieu du bouton. */
@media (max-width:700px){
  .solis-offer-cta,.primary-cta.hb-cta{justify-content:center !important;padding-inline:18px !important;gap:10px !important;text-align:center;text-wrap:balance}
}

/* ===== boutons-anim.css ===== */
/* SOLIS · Les boutons répondent au doigt et à la souris (19/10/2026)
   1. Quand on clique ou qu'on touche un bouton corail, il s'enfonce très légèrement (comme un vrai bouton).
   2. Sur ordinateur, la petite flèche avance de quelques pixels quand la souris passe dessus.
   Chargé après les autres styles : il remplace l'ancien « enfoncement » de 1 px du bouton du haut. */
.solis-offer-cta,.primary-cta,.header-cta{
  transition:transform 160ms cubic-bezier(.23,1,.32,1),translate 220ms ease-out}
.solis-offer-cta:active,.primary-cta:active,.header-cta:active{transform:scale(.97)}
.solis-offer-cta svg,.primary-cta svg{transition:transform 200ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .solis-offer-cta:hover svg,.primary-cta:hover svg{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .solis-offer-cta svg,.primary-cta svg{transition:none}
  .solis-offer-cta:hover svg,.primary-cta:hover svg{transform:none}
}

/* Kenai, en bas de page : la photo se rapproche très doucement, une seule fois (kenai-fin.js ajoute .kf-vu). */
#votre-prochain-pas .b11-photo{overflow:hidden}
#votre-prochain-pas .b11-photo img.conclusion-kenai{scale:1;transition:scale 2200ms cubic-bezier(.23,1,.32,1)}
#votre-prochain-pas.kf-vu .b11-photo img.conclusion-kenai{scale:1.04}
@media (prefers-reduced-motion:reduce){
  #votre-prochain-pas .b11-photo img.conclusion-kenai,#votre-prochain-pas.kf-vu .b11-photo img.conclusion-kenai{scale:1;transition:none}
}