/* drtber service-page styles — editorial.css loads first */

/* Per-service hero videos: all 5 services have their own clip in media/hero/{slug}.* */

.shero{padding:34px 0 62px;position:relative;}
.shero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center;}
.shero .klabel{font-family:'Space Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:9px;}
.shero .klabel::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);}
.shero h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.85rem,4vw,3.3rem);line-height:1.3;letter-spacing:.02em;margin:16px 0 0;}
.shero .lead{color:var(--ink-soft);font-size:1.06rem;line-height:1.72;margin:22px 0 0;max-width:42ch;}
.shero .acts{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}

/* === Hero: the clip fades softly into the page over a gentle circle light (no frame/borders) === */
.shero-heart{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  aspect-ratio:1/1;isolation:isolate;
}
/* soft circle light behind the subject */
.shero-heart::before{
  content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--white) 75%, transparent) 0%, color-mix(in srgb, var(--white) 26%, transparent) 40%, transparent 70%);
}
/* video softly masked so its edges dissolve into the cream background */
.shero-heart video{
  position:relative;z-index:1;
  width:100%;height:100%;display:block;aspect-ratio:1/1;
  object-fit:cover;object-position:50% 47%;
  transform:scale(1.14);
  -webkit-mask:radial-gradient(circle at 50% 48%, var(--black) 54%, transparent 72%);
  mask:radial-gradient(circle at 50% 48%, var(--black) 54%, transparent 72%);
  transition:transform .6s ease, filter .6s ease;
}
/* frame + borders removed per design — keep the dashed-ring element out of the layout */
.shero-heart .ring{display:none;}
.shero-heart .bpm{position:absolute;z-index:6;opacity:1;transform:none;display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem .5rem .55rem;background:var(--white);border:1.5px solid var(--ink);box-shadow:0 14px 30px color-mix(in srgb, var(--ink) 16%, transparent);}
.shero-heart .bpm.a{top:13%;left:-6%;}
.shero-heart .bpm.b{bottom:15%;right:-6%;}
.shero-heart .bpm .val{animation:beat .9s ease-in-out infinite;}
.shero-heart .bpm.b .val{animation-delay:.18s;}
.shero-heart .bpm .ecg polyline{stroke-dasharray:120;animation:trace 1.2s linear infinite;}

/* Per-service identity = each service's own hero video (dropped in media/hero/{slug}.*)
   shown in the SAME masked style. Below: only subtle ring-colour + BPM accents.
   (No per-service video transforms/filters — the videos themselves differ.) */
.shero-heart[data-service="coeur-ouvert"] .ring{border-color:var(--green);border-style:solid;opacity:.45;}
.shero-heart[data-service="pontage"] .ring{border-color:var(--accent);animation:ring-breathe 1.05s ease-in-out infinite;}
.shero-heart[data-service="pontage"] .bpm .ecg polyline{stroke:var(--accent);}
.shero-heart[data-service="aorte"] .ring{border-color:var(--ink-soft);opacity:.4;}
.shero-heart[data-service="aorte"] .bpm .val{animation-duration:1.35s;}
/* aorte is a tall subject — clip fills the full circle at 1x (its own cream bg = the
   medallion bg). For built-in margin around the vessel, regenerate the source clip
   with more padding rather than scaling it down here. */
.shero-heart[data-service="aorte"] video{transform:scale(1);object-position:50% 50%;}
.shero-heart[data-service="mini-invasive"] .ring{border-color:var(--green);opacity:.55;}
.shero-heart[data-service="carotidienne"] .ring{border-color:var(--accent-d);}

/* === Hover anatomy labels (pause gif + hide BPM + broken-arrow callouts) === */
.shero-heart{cursor:help;}
.shero-heart .parts-layer{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .35s ease;}
.shero-heart.parts-active .parts-layer{opacity:1;}
.shero-heart.parts-active .bpm{opacity:0;transition:opacity .25s ease;}     /* hide floating metrics on hover */
.parts-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.parts-lines polyline{fill:none;stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.parts-lines circle{fill:var(--green);}
.part{position:absolute;background:var(--white);border:1.5px solid var(--ink);box-shadow:0 14px 30px color-mix(in srgb, var(--ink) 16%, transparent);padding:.4rem .55rem;line-height:1.15;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.25,1);}
.shero-heart.parts-active .part{opacity:1;transform:none;}
.part b{display:block;font-family:'Space Mono';font-weight:700;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.part .d{display:block;font-family:'Outfit';font-size:.6rem;color:var(--ink-soft);margin-top:1px;white-space:nowrap;}
.part.r{text-align:right;}
/* 5 anchor positions around the masked heart */
.part.s1{top:4%;left:-6%;}
.part.s2{top:4%;right:-6%;}
.part.s3{top:44%;left:-12%;}
.part.s4{top:48%;right:-12%;}
.part.s5{bottom:2%;left:50%;transform:translate(-50%,6px);}
.shero-heart.parts-active .part.s5{transform:translate(-50%,0);}
.shero-heart.parts-active .part.s1{transition-delay:.04s;}
.shero-heart.parts-active .part.s2{transition-delay:.09s;}
.shero-heart.parts-active .part.s3{transition-delay:.14s;}
.shero-heart.parts-active .part.s4{transition-delay:.19s;}
.shero-heart.parts-active .part.s5{transition-delay:.24s;}
@media(max-width:900px){
  /* labels stay hidden until tapped (JS toggles .parts-active on touch) */
  .shero-heart{cursor:pointer;}
  /* smaller labels so they fit a phone */
  .shero-heart .part{padding:.3rem .42rem;}
  .shero-heart .part b{font-size:.54rem;}
  .shero-heart .part .d{font-size:.52rem;}
  /* keep edge labels inside the viewport (no negative bleed that clips off-screen) */
  .shero-heart .part.s1{top:2%;left:1%;}
  .shero-heart .part.s2{top:2%;right:1%;}
  .shero-heart .part.s3{top:39%;left:1%;}
  .shero-heart .part.s4{top:45%;right:1%;}
  .shero-heart .part.s5{bottom:1%;left:50%;}
  /* shrink the clip a touch when labels are open so they have breathing room */
  .shero-heart.parts-active video{transform:scale(.98);}
}

@keyframes ring-breathe{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.03);opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .shero-heart[data-service="pontage"] .ring{animation:none;}
}

.facts-band .f .ic i{color:var(--white);}
.facts-band .f .lab{color:color-mix(in srgb, var(--white) 82%, transparent);}

/* === Steps: large ghosted number anchors each card, equal-height layout === */
.steps .step{position:relative;display:flex;flex-direction:column;}
.steps .step .ic{margin-bottom:20px;}
/* big quiet step number top-right balances the icon and aids the eye's path */
.steps .step .n{position:absolute;top:28px;right:26px;font-family:var(--font-display);font-weight:900;font-size:2.2rem;line-height:.8;letter-spacing:.01em;color:color-mix(in srgb, var(--accent) 24%, transparent);}
.steps .step h3{margin-top:0;}
.steps .step p{margin-top:auto;padding-top:6px;}

.dgrid{display:grid;grid-template-columns:1.62fr .88fr;gap:clamp(40px,5vw,64px);align-items:start;}
/* slightly wider title measure so the two-line H2 breaks cleanly */
.prose h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,3vw,2.35rem);line-height:1.3;margin:0 0 20px;max-width:24ch;}
/* enriched intro: comfortable measure + readable lead-in size */
.prose > p{color:var(--ink-soft);font-size:1.07rem;line-height:1.8;margin:0;max-width:60ch;}
/* group headings: first sits under the intro, the rest get a clear rule above
   so the two enriched checklists read as distinct, scannable blocks */
.prose h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.12rem;letter-spacing:.01em;margin:40px 0 18px;display:flex;align-items:center;gap:12px;}
.prose h3::before{content:"";width:22px;height:2px;background:var(--accent);}
/* a checklist followed by another group → extra air + hairline separator */
.prose .checks + h3{margin-top:48px;padding-top:40px;border-top:1px solid var(--line);}

/* === FAQ: comfortable spacing for 6 items + clearer open state === */
.faq .qa summary{padding:22px 6px;gap:24px;transition:color .18s ease;}
.faq .qa summary:hover{color:var(--green);}
.faq .qa[open] summary{color:var(--green);padding-bottom:14px;}
.faq .qa[open]{background:color-mix(in srgb, var(--white) 30%, transparent);}
.faq .qa .a{padding:0 6px 26px;}

/* enriched checklists: 6+ items — top-align so wrapped labels stay tidy,
   a touch more padding/line-height for scannability (scoped to this template) */
.prose .checks{gap:12px;}
.prose .check{align-items:flex-start;padding:15px 17px;line-height:1.45;}
.prose .check .ic{margin-top:1px;}

/* intentional sticky card: soft lift next to the longer prose column.
   sticky lives on the direct grid child so the tall prose column gives it room to travel */
.dgrid > aside{position:sticky;top:96px;align-self:start;}
.aside{border:1px solid var(--ink);background:var(--white);box-shadow:0 22px 44px -28px color-mix(in srgb, var(--ink) 34%, transparent);}
.aside .hd{background:var(--green);color:var(--white);padding:28px 26px;}
.aside .hd h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.22rem;margin:0 0 8px;line-height:1.05;}
.aside .hd p{font-size:.9rem;line-height:1.6;color:color-mix(in srgb, var(--white) 86%, transparent);margin:0 0 18px;}
.aside .hd .b1{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--white);color:var(--green);font-family:'Space Mono';font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1rem;}
.aside .hd .b2{display:flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid color-mix(in srgb, var(--white) 55%, transparent);color:var(--white);font-family:'Space Mono';font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1rem;margin-top:.6rem;transition:.15s;}
.aside .hd .b2:hover{background:color-mix(in srgb, var(--white) 12%, transparent);}
.aside .hd .b1 i,.aside .hd .b2 i{width:15px;height:15px;}
.aside .bd .lblrow{font-family:'Space Mono';font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:18px 24px 10px;}
.aside .bd a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.84rem;transition:.18s;}
.aside .bd a:hover{background:var(--paper-2);padding-left:30px;}
.aside .bd a i{width:15px;height:15px;color:var(--accent);flex:none;}

@media(max-width:900px){
  .shero-grid{grid-template-columns:1fr;gap:34px;}
  .shero-heart{order:-1;max-width:380px;}
  .dgrid{grid-template-columns:1fr;gap:36px;}
  /* on stack, the aside drops to a normal card (no shadow needed inline) */
  .dgrid > aside{position:static;}
  .aside{box-shadow:none;}
  /* tighten the long page's section rhythm on tablet/mobile */
  .sec{padding:64px 0;}
  /* the enriched-checklist separator is heavier than needed on one column */
  .prose .checks + h3{margin-top:40px;padding-top:34px;}
  /* step number scales down with the smaller 2-col cards */
  .steps .step .n{top:24px;right:22px;font-size:1.9rem;}
}
@media(max-width:560px){
  .shero-heart{max-width:280px;}
  .shero-heart .bpm{padding:.4rem .55rem;}
  .shero-heart .bpm .tx .val{font-size:.85rem;}
  .sec{padding:52px 0;}
  .prose > p{font-size:1.02rem;}
  /* single-column steps: number back to the card corner, comfortable */
  .steps .step .n{top:26px;right:24px;font-size:2rem;}
  .faq .qa summary{font-size:.98rem;gap:16px;padding:20px 2px;}
  .faq .qa .a{padding:0 2px 22px;}
}