/* ============================================================
   BetaGlue — Clinical Study page (YntraDose LA-PDAC trial)
   Scoped under #bg-clinical-study. Light theme only (site DA).
   Charte BetaGlue : Inter, turquoise/mirage/merino/mint. v2 (staging)
   ============================================================ */
#bg-clinical-study{
  /* Charte BetaGlue uniquement — variables du child theme avec fallback, aucune valeur inventee */
  --merino:#f7f1ea; --beige:#fcf9f7; --white:#ffffff;
  --mirage:var(--betaglue-color-mirage,#191f33);
  --turquoise:var(--betaglue-color-turquoise,#26e8ba);
  --mint:#67eece; --mint-pale:#e9fcf8;
  --grey:#6b7280; --grey-light:#9ca3af;
  --line:#e7ded1; --line-strong:#d8ccba;
  --shadow:0 1px 2px rgba(22,35,46,.04),0 12px 34px -18px rgba(22,35,46,.22);
  --radius:16px; --maxw:1120px; --prose:66ch;
  --f-sans:var(--betaglue-font-family,'Inter'),system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-head:var(--betaglue-font-family,'Inter'),system-ui,sans-serif;
  color:var(--mirage);font-family:var(--f-sans);font-size:17px;line-height:1.62;
  background:var(--merino);
}
#bg-clinical-study *{box-sizing:border-box}
#bg-clinical-study h1,#bg-clinical-study h2,#bg-clinical-study h3{
  margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;font-weight:700;
  font-family:var(--f-head);color:var(--mirage)}
#bg-clinical-study p{margin:0}
#bg-clinical-study a{color:inherit}
#bg-clinical-study .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
#bg-clinical-study .eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--mirage);display:inline-flex;align-items:center;gap:8px}
#bg-clinical-study .eyebrow::before{content:"";width:22px;height:2px;background:var(--turquoise);border-radius:2px}
#bg-clinical-study .lede{color:var(--grey);font-size:19px;max-width:var(--prose)}
#bg-clinical-study .tnum{font-variant-numeric:tabular-nums}

/* Buttons */
#bg-clinical-study .btn{display:inline-flex;align-items:center;gap:8px;background:var(--turquoise);
  color:var(--mirage);font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:999px;
  text-decoration:none;border:1px solid transparent;transition:transform .15s ease,background .15s ease;
  font-family:var(--f-sans)}
#bg-clinical-study .btn:hover{transform:translateY(-1px);background:var(--mint)}

/* Sections */
#bg-clinical-study .sec{padding-block:clamp(52px,7vw,88px);border-top:1px solid var(--line)}
#bg-clinical-study .sec.alt{background:var(--beige)}
#bg-clinical-study .shead{max-width:var(--prose);margin-bottom:36px}
#bg-clinical-study .shead h2{font-size:clamp(26px,3.6vw,38px);margin-top:12px}
#bg-clinical-study .shead p{margin-top:14px;color:var(--grey);font-size:18px}

/* Hero */
#bg-clinical-study .hero{padding-block:clamp(48px,7vw,84px);background:
  radial-gradient(120% 90% at 82% 8%,color-mix(in srgb,var(--mint) 10%,transparent),transparent 55%)}
#bg-clinical-study .hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
#bg-clinical-study .hero .heroTitle{font-size:clamp(36px,5.6vw,60px);margin:18px 0 0}
#bg-clinical-study .reg{font-size:.5em;vertical-align:.55em;color:var(--mirage);font-weight:600}
#bg-clinical-study .hero p.sub{margin:20px 0 0;font-size:19.5px;color:var(--grey);max-width:52ch}
#bg-clinical-study .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
#bg-clinical-study .pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  padding:8px 15px;border-radius:999px;border:1px solid var(--line-strong);color:var(--grey);
  background:var(--beige)}
#bg-clinical-study .pulse{width:9px;height:9px;border-radius:50%;background:var(--turquoise);position:relative;flex:none}
#bg-clinical-study .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--turquoise);opacity:.5;animation:cs-ping 1.9s ease-out infinite}
@keyframes cs-ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.9);opacity:0}}
#bg-clinical-study .heroArt{position:relative;aspect-ratio:1/1;min-height:280px;border-radius:24px;margin:0;
  background:radial-gradient(120% 120% at 70% 20%,color-mix(in srgb,var(--mint) 12%,transparent),transparent 60%);
  border:1px solid var(--line)}
#bg-clinical-study #cs-spheres{width:100%;height:100%;display:block;border-radius:24px}
#bg-clinical-study .heroArt figcaption{position:absolute;left:16px;bottom:14px;font-size:12px;
  color:var(--grey-light);letter-spacing:.02em}
@media (max-width:860px){#bg-clinical-study .hero .grid{grid-template-columns:1fr}
  #bg-clinical-study .heroArt{order:-1;max-width:360px}}

/* Discover cards */
#bg-clinical-study .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){#bg-clinical-study .cards{grid-template-columns:1fr}}
#bg-clinical-study .card{background:var(--beige);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;margin:0}
#bg-clinical-study .sec.alt .card{background:var(--merino)}
#bg-clinical-study .card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mint) 16%,transparent);color:var(--mirage)}
#bg-clinical-study .card h3{font-size:19px}
#bg-clinical-study .card p{color:var(--grey);font-size:15.5px;line-height:1.6}
#bg-clinical-study .card .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mirage)}

/* Timeline */
#bg-clinical-study .journey{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
@media (max-width:860px){#bg-clinical-study .journey{grid-template-columns:1fr}}
#bg-clinical-study .timeline{position:relative;margin:0;padding:0;list-style:none}
#bg-clinical-study .timeline::before{content:"";position:absolute;left:18px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--turquoise),color-mix(in srgb,var(--turquoise) 20%,transparent))}
#bg-clinical-study .step{position:relative;padding:0 0 26px 56px;margin:0}
#bg-clinical-study .step:last-child{padding-bottom:0}
#bg-clinical-study .step .n{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--beige);border:2px solid var(--turquoise);color:var(--mirage);
  display:grid;place-items:center;font-weight:700;font-size:15px;font-family:var(--f-head)}
#bg-clinical-study .sec.alt .step .n{background:var(--merino)}
#bg-clinical-study .step h3{font-size:17.5px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
#bg-clinical-study .step h3 .when{font-size:12.5px;font-weight:700;color:var(--mirage);font-family:var(--f-sans);
  background:color-mix(in srgb,var(--mint) 15%,transparent);padding:2px 9px;border-radius:999px;letter-spacing:.02em}
#bg-clinical-study .step p{color:var(--grey);font-size:15px;margin-top:5px;max-width:44ch}
#bg-clinical-study .stats{display:grid;gap:14px;position:sticky;top:110px}
#bg-clinical-study .stat{background:var(--beige);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;box-shadow:var(--shadow)}
#bg-clinical-study .sec.alt .stat{background:var(--merino)}
#bg-clinical-study .stat b{display:block;font-size:30px;letter-spacing:-.02em;color:var(--mirage);font-family:var(--f-head)}
#bg-clinical-study .stat span{font-size:13.5px;color:var(--grey)}

/* Eligibility */
#bg-clinical-study .elig{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){#bg-clinical-study .elig{grid-template-columns:1fr}}
#bg-clinical-study .checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#bg-clinical-study .checklist li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px}
#bg-clinical-study .checklist .ck{flex:none;width:26px;height:26px;border-radius:8px;background:var(--turquoise);
  display:grid;place-items:center;margin-top:1px}
#bg-clinical-study .checklist .ck svg{width:15px;height:15px;color:var(--mirage)}
#bg-clinical-study .eligbox{background:var(--beige);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
#bg-clinical-study .sec.alt .eligbox{background:var(--merino)}
#bg-clinical-study .eligbox h3{font-size:18px;margin-bottom:6px}
#bg-clinical-study .eligbox p{color:var(--grey);font-size:15px;margin-bottom:18px}

/* Objectives */
#bg-clinical-study .objgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:720px){#bg-clinical-study .objgrid{grid-template-columns:1fr}}
#bg-clinical-study .obj{display:flex;gap:14px;align-items:flex-start;background:var(--beige);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0}
#bg-clinical-study .sec.alt .obj{background:var(--merino)}
#bg-clinical-study .obj .ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mint) 15%,transparent);color:var(--mirage)}
#bg-clinical-study .obj h3{font-size:16px}
#bg-clinical-study .obj p{font-size:14.5px;color:var(--grey);margin-top:3px}

/* Contact centres */
#bg-clinical-study .centres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){#bg-clinical-study .centres{grid-template-columns:1fr}}
#bg-clinical-study .centre{background:var(--beige);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;margin:0}
#bg-clinical-study .sec.alt .centre{background:var(--merino)}
#bg-clinical-study .centre.dim{opacity:.72}
#bg-clinical-study .badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;display:inline-flex;gap:7px;align-items:center;
  font-family:var(--f-sans)}
#bg-clinical-study .badge.live{background:color-mix(in srgb,var(--turquoise) 16%,transparent);color:var(--mirage)}
#bg-clinical-study .badge.soon{background:color-mix(in srgb,var(--grey) 15%,transparent);color:var(--grey)}
#bg-clinical-study .centre .centrePhoto{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;
  border-radius:12px;margin-bottom:4px;background:var(--mint-pale)}
#bg-clinical-study .centre.dim .centrePhoto{filter:saturate(.35);opacity:.7}
#bg-clinical-study .centre h3{font-size:18px}
#bg-clinical-study .centre .site{font-size:14.5px;color:var(--grey);line-height:1.5}
#bg-clinical-study .centre .pi{font-size:13.5px;color:var(--mirage);font-weight:600;margin-top:2px}
#bg-clinical-study .centre .contact{margin-top:auto;font-size:13.5px;color:var(--grey);
  border-top:1px dashed var(--line-strong);padding-top:12px}
#bg-clinical-study .centre .contact .ph{color:var(--grey-light);font-style:italic}
#bg-clinical-study .centre .contact a{color:var(--mirage);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--mirage) 30%,transparent);transition:border-color .2s ease}
#bg-clinical-study .centre .contact a:hover{border-bottom-color:var(--mirage)}
#bg-clinical-study .flag{width:22px;height:15px;border-radius:3px;border:1px solid var(--line-strong);flex:none}

/* Reveal */
#bg-clinical-study .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
#bg-clinical-study .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  #bg-clinical-study .rv{opacity:1;transform:none;transition:none}
  #bg-clinical-study .pulse::after{animation:none}
}

/* ============================================================
   Habillage par section — charte BetaGlue (14/08/2026)
   Remplace l'alternance automatique beige/merino de .sec.alt,
   qui n'est pas la charte. Chaque section est fixee explicitement.
   ============================================================ */

/* Pleine largeur : le container Impeka (max-width 1440) enfermait les fonds
   de section, d'ou les marges blanches sur les cotes. On le libere pour
   cette page uniquement ; le contenu reste centre par .wrap. */
body.bg-cs-page .grve-row-section > .grve-container{max-width:none;width:100%;margin-left:0;margin-right:0}

/* Largeur de contenu alignee sur le site (charte : 1220, pas 1120) */
#bg-clinical-study{--maxw:1220px}

/* Plus de filets beiges entre les sections */
#bg-clinical-study .sec{border-top:0}
/* Neutralise l'alternance auto : les fonds sont fixes section par section */
#bg-clinical-study .sec.alt{background:none}

/* --- 1. Hero — blanc, pastille mirage / typo + point turquoise --- */
#bg-clinical-study .hero{background-color:var(--white)}
#bg-clinical-study .hero .pill{background:var(--mirage);color:var(--turquoise)}
#bg-clinical-study .hero .pill .pulse{background:var(--turquoise)}
#bg-clinical-study .hero .pill .pulse::after{border-color:var(--turquoise)}

/* --- 2. What is the study — blanc --- */
#bg-clinical-study #cs-about{background-color:var(--white)}

/* --- 3. Discover the study — blanc, cartes mirage / typo merino,
       titres, libelles et icones en turquoise --- */
#bg-clinical-study #cs-discover{background-color:var(--white)}
#bg-clinical-study #cs-discover .card{background:var(--mirage);border-color:transparent;color:var(--merino)}
#bg-clinical-study #cs-discover .card h3{color:var(--turquoise)}
#bg-clinical-study #cs-discover .card p{color:var(--merino)}
#bg-clinical-study #cs-discover .card .tag{color:var(--turquoise);
  background:color-mix(in srgb,var(--turquoise) 18%,transparent)}
#bg-clinical-study #cs-discover .card .ic{background:color-mix(in srgb,var(--turquoise) 18%,transparent);
  color:var(--turquoise)}
#bg-clinical-study #cs-discover .card .ic svg{color:var(--turquoise)}

/* --- 4. Patient journey — merino conserve, cartes passees en blanc
       pour rester lisibles sur le fond creme --- */
#bg-clinical-study #cs-journey{background-color:var(--merino)}
#bg-clinical-study #cs-journey .stat{background:var(--white)}
#bg-clinical-study #cs-journey .step .n{background:var(--white)}

/* --- 5. Who can participate — mint --- */
#bg-clinical-study #cs-eligibility{background-color:var(--mint)}
#bg-clinical-study #cs-eligibility .eligbox{background:var(--white);border-color:transparent}

/* --- 6. What we are learning — blanc, cartes turquoise / typo blanche,
       icones mirage --- */
#bg-clinical-study #cs-objectives{background-color:var(--white)}
#bg-clinical-study #cs-objectives .obj{background:var(--turquoise);border-color:transparent}
#bg-clinical-study #cs-objectives .obj h3{color:#fff}
#bg-clinical-study #cs-objectives .obj p{color:#fff}
#bg-clinical-study #cs-objectives .obj .ic{background:rgba(255,255,255,.3);color:var(--mirage)}
#bg-clinical-study #cs-objectives .obj .ic svg{color:var(--mirage)}

/* --- 7. Contact a recruitment centre — blanc, cartes merino conservees --- */
#bg-clinical-study #cs-contact{background-color:var(--white)}
#bg-clinical-study #cs-contact .centre{background:var(--merino);border-color:transparent}

/* --- Corrections 2e passe (14/08) --- */

/* 1. Hero — le halo turquoise creait un filet sous le fil d'Ariane : supprime.
      Contenu remonte : padding Impeka de la row + padding propre du hero. */
body.bg-cs-page .grve-row-section{padding-top:0}
body.bg-cs-page #grve-page-breadcrumbs{margin-bottom:0}
#bg-clinical-study .hero{background-image:none;padding-top:clamp(16px,2vw,26px)}

/* 2. Tags — pas d'aplat : libelle turquoise + tiret 50x2, convention du site */
#bg-clinical-study #cs-discover .card .tag{background:none;padding:0;color:var(--turquoise);
  display:inline-flex;align-items:center;gap:10px}
#bg-clinical-study #cs-discover .card .tag::after{content:"";width:50px;height:2px;
  background:var(--turquoise);border-radius:2px;flex:none}

/* 3. Patient journey — typo en mirage (etait sur le gris neutre) */
#bg-clinical-study #cs-journey{color:var(--mirage)}
#bg-clinical-study #cs-journey .step p,
#bg-clinical-study #cs-journey .stat span,
#bg-clinical-study #cs-journey .shead p{color:var(--mirage)}

/* 4. Who can participate — mint PALE et non la menthe vive */
#bg-clinical-study #cs-eligibility{background-color:var(--mint-pale)}

/* 5. Objectives — typo mirage, pastille d'icone mirage, icone turquoise */
#bg-clinical-study #cs-objectives .obj h3,
#bg-clinical-study #cs-objectives .obj p{color:var(--mirage)}
#bg-clinical-study #cs-objectives .obj .ic{background:var(--mirage);color:var(--turquoise)}
#bg-clinical-study #cs-objectives .obj .ic svg{color:var(--turquoise)}

/* 6. Contact — rapproche de la section precedente */
#bg-clinical-study #cs-contact{padding-top:clamp(28px,3.5vw,44px)}

/* ============================================================
   Alignement typographique sur le reste du site (14/08)
   Charte : Inter, corps 16/1.6, H2 section 48/58, hero 56/67.
   La page etait en 17px/1.62 avec des H2 plafonnes a 38px.
   ============================================================ */
#bg-clinical-study{font-size:16px;line-height:1.6}
#bg-clinical-study .lede{font-size:18px}
#bg-clinical-study .shead h2{font-size:clamp(30px,4vw,48px)}
#bg-clinical-study .shead p{font-size:16px;line-height:1.6}
#bg-clinical-study .hero .heroTitle{font-size:clamp(34px,5vw,56px)}
#bg-clinical-study .hero p.sub{font-size:18px}

/* ============================================================
   Couleur et interligne du texte alignes sur le site (14/08)
   Reference prod : body { color:#272727; font:16px/24px Inter 400 }
   La page utilisait var(--grey) #6b7280, trop clair.
   ============================================================ */
#bg-clinical-study{--text:#272727;color:var(--text);line-height:24px}
#bg-clinical-study .lede,
#bg-clinical-study .shead p,
#bg-clinical-study .hero p.sub,
#bg-clinical-study .card p,
#bg-clinical-study .step p,
#bg-clinical-study .stat span,
#bg-clinical-study .eligbox p,
#bg-clinical-study .obj p,
#bg-clinical-study .centre .site{color:var(--text)}