/* drtber home-only styles — editorial.css loads first on every page */

/* ---- home hero: service callouts (replace BPM badges) ---- */
.heart-zone .bpm{display:none;}
.svc-layer{position:absolute;inset:0;z-index:7;pointer-events:none;}
.svc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .4s ease;}
.svc-lines polyline{fill:none;stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.svc-lines circle{fill:var(--accent);}
.heart-zone:hover .svc-lines{opacity:1;transition-delay:.1s;}
.svc{position:absolute;pointer-events:auto;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.25,1);}
.heart-zone:hover .svc{opacity:1;transform:translateY(0);}
.svc .card{background:var(--white);border:1.5px solid var(--ink);box-shadow:0 14px 30px color-mix(in srgb, var(--ink) 16%, transparent);padding:.5rem .62rem;display:flex;flex-direction:column;line-height:1.04;transition:.18s;}
.svc.left .card{align-items:flex-end;text-align:right;}
.svc:hover .card{border-color:var(--green);transform:translateY(-2px);}
.svc .nm{font-family:'Space Mono';font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;}
.svc .ct{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1rem;color:var(--ink);margin-top:3px;white-space:nowrap;}
.svc .ct b{color:var(--green);}
.svc .ct em{font-style:normal;font-size:.55rem;color:var(--ink-soft);margin-left:3px;letter-spacing:.03em;}
.svc.s1{top:13%;left:3%;}
.svc.s3{top:42%;left:1%;}
.svc.s6{top:67%;left:3%;}
.svc.s2{top:11%;right:3%;}
.svc.s5{top:47%;right:1%;}
.svc.s4{top:64%;right:3%;}
.heart-zone:hover .svc.s1{transition-delay:.04s;}
.heart-zone:hover .svc.s2{transition-delay:.08s;}
.heart-zone:hover .svc.s3{transition-delay:.12s;}
.heart-zone:hover .svc.s4{transition-delay:.16s;}
.heart-zone:hover .svc.s5{transition-delay:.2s;}
.heart-zone:hover .svc.s6{transition-delay:.24s;}

/* hide claim + slide RDV CTA while exploring services */
.claim{transition:opacity .4s ease, transform .45s ease;}
.heart-zone:hover ~ .claim{opacity:0;transform:translateX(-12px);pointer-events:none;}
.hero-bottom .actions .ghost{transition:opacity .3s ease, transform .4s ease, max-width .5s cubic-bezier(.2,.8,.25,1), padding .5s ease, margin .5s ease, border-width .3s ease;max-width:240px;overflow:hidden;white-space:nowrap;}
.hero-bottom .actions .ebtn{transition:transform .5s cubic-bezier(.2,.8,.25,1);}
.hero-stage:has(.heart-zone:hover) ~ .hero-bottom .actions .ghost{opacity:0;max-width:0;padding-left:0;padding-right:0;margin-left:-12px;border-width:0;transform:translateX(-8px);pointer-events:none;}

/* ---- home marquee spacing ---- */
.strip{margin-top:52px;}

/* ---- split about: docscene (home only) ---- */
.split .ph{position:relative;aspect-ratio:auto;border:none;background:transparent;display:block;padding:0;text-align:left;font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;}
.split .docscene{position:relative;aspect-ratio:7/8;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;isolation:isolate;}
.split .docscene .backword{position:absolute;top:17%;left:0;right:0;text-align:center;z-index:1;font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,6.8vw,4.8rem);line-height:.8;letter-spacing:0;color:transparent;-webkit-text-stroke:2px color-mix(in srgb, var(--ink) 34%, transparent);white-space:nowrap;pointer-events:none;will-change:transform;}
.split .docscene .vlabel{position:absolute;top:8%;right:1%;z-index:1;writing-mode:vertical-rl;font-family:'Space Mono';font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}
.split .docscene .docimg{position:relative;z-index:2;width:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom center;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:transform;}
.split .docscene .docvid{position:absolute;inset:0;width:100%;height:100%;z-index:3;object-fit:contain;object-position:bottom center;opacity:0;transition:opacity .35s ease;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;}
.split .docscene .dochover{position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);width:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom center;opacity:0;transition:opacity .4s ease;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,var(--black) 7%,var(--black) 60%,color-mix(in srgb, var(--black) 40%, transparent) 82%,transparent 98%),linear-gradient(to right,transparent 0%,var(--black) 12%,var(--black) 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;}
.split .ph .tag{position:absolute;left:14px;bottom:10px;z-index:3;background:transparent;border:none;padding:0;}
.split .ph .tag b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.92rem;display:block;}
.split .ph .tag small{font-family:'Space Mono';font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}

/* ---- diff-grid placement + video mid (home) ---- */
.diff-grid .dtext.b{grid-column:1;grid-row:1;}
.diff-grid .dimg.up{grid-column:1;grid-row:2;}
.diff-grid .dimg.down{grid-column:3;grid-row:1;}
.diff-grid .dtext.t{grid-column:3;grid-row:2;}
.dimg img{filter:contrast(1.02);}
.diff-mid .tvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.diff-mid .tover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:28px 26px;transition:opacity .35s ease;background:linear-gradient(to bottom,color-mix(in srgb, var(--ink) 55%, transparent),color-mix(in srgb, var(--ink) 15%, transparent) 40%,color-mix(in srgb, var(--ink) 75%, transparent));}
.diff-mid.playing .tover{opacity:0;pointer-events:none;}
.diff-mid .play{appearance:none;background:color-mix(in srgb, var(--black) 25%, transparent);backdrop-filter:blur(3px);cursor:pointer;}
.diff-mid.playing{cursor:default;}

@media(max-width:900px){
  /* the hero grid sized its track to the heart's intrinsic 580px width,
     forcing the whole home page to ~600px on phones. Drop the grid + scale the heart. */
  .hero-stage{display:block;margin-top:0;}
  .heart-zone{width:100%;max-width:360px;margin:0 auto;}
  .heart-zone img{width:100%;height:auto;}
  .hero .bpm{display:none;}
  /* white knit heart is too low-contrast on cream at phone size — show the colour version */
  .heart-base{opacity:0;}
  .heart-color{opacity:1;}
  /* centre the decorative thread above the heart (was offset +20px) */
  .thread{left:50%;transform:translateX(-50%);}
  /* callouts overlay the heart, hidden until the heart is tapped (JS toggles .svc-open) —
     mirrors the desktop hover effect instead of a permanently-visible grid */
  .svc-layer{position:absolute;inset:0;margin-top:0;pointer-events:none;}
  .svc-lines{display:none;}
  .svc{position:absolute;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .35s ease,transform .4s ease;}
  .heart-zone.svc-open .svc{opacity:1;pointer-events:auto;transform:none;}
  /* smaller labels so all five fit around a phone-sized heart */
  .svc .card{padding:.34rem .46rem;}
  .svc .nm{font-size:.5rem;}
  .svc .ct{font-size:.82rem;}
  /* shrink the heart while labels are open so they have room */
  .heart-zone.svc-open .heart-img,.heart-zone.svc-open .heart-color{transform:scale(.8);transition:transform .4s ease;}
  /* hint that the heart is tappable */
  .heart-zone{cursor:pointer;}
  /* hero-stage is block now, so the claim flows below the heart — drop the
     negative pull-up on the buttons (was overlapping the claim) and stack them */
  .claim{margin:18px 0 0;}
  .hero-bottom{margin-top:24px;flex-direction:column;align-items:stretch;gap:16px;}
  .hero-bottom .actions{flex-wrap:wrap;}
  /* "Pourquoi me choisir" grid: stack to one column (desktop forces explicit
     grid-column:1/3 placement which crushes the text cells on mobile) */
  .diff-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:14px;}
  .diff-grid .dtext.b,.diff-grid .dimg.up,.diff-grid .dimg.down,.diff-grid .dtext.t,.diff-grid .diff-mid{grid-column:auto;grid-row:auto;}
  .diff-grid .cell{min-height:0;}
  .diff-grid .dimg{min-height:220px;}
  .diff-mid{min-height:360px;}
}

/* Hero heart is hover-driven on desktop; on touch (no hover) give the colour
   heart a gentle heartbeat. Beat the IMAGES (not .heart-zone) so the static
   callout grid beneath them doesn't pulse too. */
@keyframes hz-beat{0%,100%{transform:scale(1);}9%{transform:scale(1.05);}18%{transform:scale(1);}27%{transform:scale(1.025);}38%{transform:scale(1);}}
@media (max-width:900px){
  .heart-zone .heart-img,.heart-zone .heart-color{animation:hz-beat 2.6s ease-in-out infinite;transform-origin:center center;will-change:transform;}
}