/* ==========================================================================
   JMA Diagnostics — Pages services (Holter, MAPA, Polygraphe, ECG)
   Relevé exact sur Figma « 2026_06-JMA »
   Intégrée au gabarit réel du site (header.php / footer.php) : toutes les
   règles génériques (body, a, ul, h1-h5, p, img...) sont scopées sous
   .jma-service-page afin de ne jamais affecter le header/footer/breadcrumb.
   ========================================================================== */

/* ---------- Tokens relevés dans le Figma ---------- */
:root{
  --jma-red:#EC182A;
  --jma-teal:#74BAC6;
  --jma-teal-deep:#20818F;
  --jma-check:#5AA3B0;        /* glyphe ✓ et textes teal foncés */
  --jma-check-bg:#EAF5F7;     /* pastilles ✓ / icône carte */
  --jma-circle:#EAF2F4;       /* rond 88 px de la timeline */
  --jma-help:#EAF1F3;         /* barre « Des questions? » */
  --jma-qc:#DCE9EC;           /* rond 56 px de la barre */
  --jma-trust:#EDF1F3;        /* barre « Fiabilité. » */
  --jma-trust-sep:#C9D6DA;
  --jma-ink:#1D1D1F;
  --jma-text:#5C6166;
  --jma-grey:#F4F6F8;         /* sections « Déroulement » et « Distinctifs » */
  --jma-faq:#F7F7F7;
  --jma-border:#E4E7E9;
  --jma-font:"Hero","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --jma-shadow:0 10px 14px rgba(28,33,38,.08);        /* cartes */
}

/* ---------- Base (scopée à la page, pour ne pas affecter le header/footer réels) ---------- */
.jma-service-page, .jma-service-page *{box-sizing:border-box}
.jma-service-page{margin:0;font-family:var(--jma-font);font-size:16px;line-height:24px;color:var(--jma-text);background:#fff;-webkit-font-smoothing:antialiased}
.jma-service-page img,.jma-service-page svg{max-width:100%;display:block}
.jma-service-page a{color:var(--jma-teal-deep);text-decoration:none}
.jma-service-page a:hover{text-decoration:underline}
.jma-service-page ul{margin:0;padding:0;list-style:none}
.jma-service-page h1,.jma-service-page h2,.jma-service-page h3,.jma-service-page h4,.jma-service-page h5{font-family:inherit;color:var(--jma-ink);margin:0;font-weight:700}
.jma-service-page h1{font-size:44px;line-height:50px}
.jma-service-page h2{font-size:30px;line-height:36px}
.jma-service-page p{margin:0}

.jma-service-page .container{max-width:1488px;margin:0 auto;padding:0 24px}
.jma-service-page .section{padding:70px 0}
.jma-service-page .section--grey{background:var(--jma-grey)}
.jma-service-page .section--soft{background:var(--jma-grey)}
.jma-service-page .section--faq{background:var(--jma-faq)}

.jma-service-page .eyebrow{display:block;font-size:13px;line-height:16px;font-weight:700;text-transform:uppercase;color:var(--jma-red)}
.jma-service-page .lead{font-size:18px;line-height:27px}
.jma-service-page .section-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:44px}
.jma-service-page .section-head h2{font-size:34px;line-height:40px}
.jma-service-page .section-head p{font-size:18px;line-height:27px;max-width:560px}
.jma-service-page .rule{width:56px;height:3px;border-radius:2px;background:var(--jma-teal)}

.jma-service-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:15px;line-height:18px;font-weight:600;padding:11px 30px;border-radius:35px;border:2px solid transparent;cursor:pointer;transition:.18s ease;text-decoration:none;white-space:nowrap}
.jma-service-page .btn:hover{text-decoration:none}
.jma-service-page .btn--primary{background:var(--jma-teal);color:#fff;border-color:var(--jma-teal)}
.jma-service-page .btn--primary:hover{background:#65AFBC;border-color:#65AFBC}
.jma-service-page .btn--ghost{background:transparent;color:var(--jma-check);border-color:var(--jma-teal)}
.jma-service-page .btn--ghost:hover{background:var(--jma-check-bg)}
.jma-service-page .btn--light{background:#fff;color:var(--jma-check);border-color:#fff}
.jma-service-page .btn--light:hover{background:#F1FAFB;border-color:#F1FAFB}
.jma-service-page .btn--outline-light{background:transparent;color:#fff;border-color:#fff}
.jma-service-page .btn--outline-light:hover{background:rgba(255,255,255,.15)}
.jma-service-page .btn--deep{background:var(--jma-teal-deep);color:#fff;border:0;border-radius:10px;font-size:16px;line-height:19px;font-weight:700;padding:15px 26px}
.jma-service-page .btn--deep:hover{background:#186C78}

.jma-service-page .check-list,.jma-service-page .step-list,.jma-service-page .info-list{display:flex;flex-direction:column;align-items:flex-start}
.jma-service-page .check-list li,.jma-service-page .step-list li,.jma-service-page .info-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:24px;color:var(--jma-text)}
.jma-service-page .check-list li::before,.jma-service-page .step-list li::before,.jma-service-page .info-list li::before{
  content:"";flex:0 0 auto;border-radius:50%;
  background-color:var(--jma-check-bg);
  background-repeat:no-repeat;
  background-position:center;
}
.jma-service-page .check-list li::before,.jma-service-page .info-list li::before{width:20px;height:20px}
.jma-service-page .step-list li::before,.jma-service-page .feature .check-list li::before{width:26px;height:26px}
.jma-service-page .check-list li::before,.jma-service-page .step-list li::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUFBM0IwIiBzdHJva2Utd2lkdGg9IjMuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4=");background-size:11px 11px}
.jma-service-page .step-list li::before,.jma-service-page .feature .check-list li::before{background-size:14px 14px}
.jma-service-page .info-list li::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUFBM0IwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSA1IDcgNy03IDciLz48L3N2Zz4=");background-size:9px 9px}

/* ---------- Hero (847 px) ---------- */
.jma-service-page .hero{position:relative;background:var(--jma-check-bg) center/cover no-repeat;min-height:847px;display:flex;align-items:center;padding:52px 0 60px}
.jma-service-page .hero .container{position:relative;z-index:1;width:100%}
.jma-service-page .hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.jma-service-page .hero h1,.jma-service-page .hero .lead{max-width:660px}
.jma-service-page .hero-badges{display:flex;flex-wrap:wrap;gap:10px}
.jma-service-page .badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--jma-border);border-radius:35px;padding:7px 16px;font-size:13.5px;line-height:16px;font-weight:600;color:var(--jma-ink)}
.jma-service-page .badge .tick{color:var(--jma-teal);font-size:13px;font-weight:700;line-height:16px}
.jma-service-page .hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Section « Les bases » (833 px) ---------- */
.jma-service-page .grid-2{display:grid;grid-template-columns:620px 653px;justify-content:space-between;align-items:center}
.jma-service-page .bases-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.jma-service-page .bases-text>p{font-size:16px;line-height:24px}
.jma-service-page .lead-in{font-weight:600;color:var(--jma-ink);font-size:16px;line-height:19px}
.jma-service-page .bases-list{gap:14px}
.jma-service-page .media{border:1px solid var(--jma-border);border-radius:14px;overflow:hidden;background:#fff}
.jma-service-page .media img{width:100%;height:547px;object-fit:cover}
.jma-service-page .card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--jma-border);border-radius:14px;width:420px;max-width:100%;padding:60px 28px 28px}
.jma-service-page .card .icon{width:46px;height:46px;flex:0 0 auto}
.jma-service-page .card h3{font-size:19px;line-height:26px;font-weight:600}
.jma-service-page .card p{font-size:16px;line-height:24px}

/* ---------- Section « Le déroulement » (1039 px) ---------- */
.jma-service-page .timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;height:138px;margin-bottom:12px}
.jma-service-page .timeline::after{content:"";position:absolute;left:16.6667%;right:16.6667%;top:119px;height:2px;background:var(--jma-teal);z-index:0}
.jma-service-page .tl-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.jma-service-page .tl-icon{width:88px;height:88px;flex:0 0 auto}
.jma-service-page .tl-num{position:relative;z-index:1;width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--jma-teal-deep);color:#fff;font-size:15px;line-height:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.jma-service-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.jma-service-page .step{display:flex;flex-direction:column;align-items:flex-start;gap:18px;background:#fff;border-radius:16px;box-shadow:var(--jma-shadow);padding:34px 30px 36px}
.jma-service-page .step h3{width:100%;text-align:center;font-size:20px;line-height:26px}
.jma-service-page .step .divider{width:100%;height:1px;background:var(--jma-border)}
.jma-service-page .step-list{width:100%;gap:16px}

.jma-service-page .help-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--jma-help);border-radius:16px;padding:26px 32px;margin-top:44px}
.jma-service-page .help-bar .left{display:flex;align-items:center;gap:18px}
.jma-service-page .help-bar .qc{width:56px;height:56px;flex:0 0 auto}
.jma-service-page .help-bar .tcol{display:flex;flex-direction:column;gap:3px}
.jma-service-page .help-bar strong{color:var(--jma-ink);font-size:19px;line-height:23px;font-weight:700}
.jma-service-page .help-bar span{font-size:16px;line-height:19px}

/* ---------- Section « Points distinctifs » (851 px) ---------- */
.jma-service-page .section--soft .section-head{margin-bottom:64px}
.jma-service-page .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.jma-service-page .feature{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;background:#fff;border-radius:16px;box-shadow:var(--jma-shadow);padding:72px 34px 40px}
.jma-service-page .feature .badge-ic{position:absolute;top:-54px;left:50%;transform:translateX(-50%);width:120px;height:120px}
.jma-service-page .feature .title-row{display:flex;align-items:center;gap:12px;width:100%}
.jma-service-page .feature .num{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--jma-teal-deep);color:#fff;font-size:15px;line-height:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.jma-service-page .feature h3{font-size:22px;line-height:28px}
.jma-service-page .feature .divider{width:100%;height:1px;background:var(--jma-border)}
.jma-service-page .feature .check-list{width:100%;gap:18px}
.jma-service-page .feature p{width:100%;font-size:16px;line-height:24px;color:var(--jma-text)}

.jma-service-page .trust-bar{display:flex;align-items:center;gap:20px;background:var(--jma-trust);border-radius:14px;padding:22px 32px;width:461px;max-width:100%;margin:64px auto 0}
.jma-service-page .trust-bar .shield{width:30px;height:30px;flex:0 0 auto}
.jma-service-page .trust-bar .sep{width:2px;height:38px;background:var(--jma-trust-sep);flex:0 0 auto}
.jma-service-page .trust-bar .tcol{display:flex;flex-direction:column;gap:3px}
.jma-service-page .trust-bar strong{color:var(--jma-ink);font-size:17px;line-height:21px;font-weight:700}
.jma-service-page .trust-bar span{font-size:16px;line-height:19px}

/* ---------- Section « Informations pratiques » (440 px) ---------- */
.jma-service-page .info-grid{display:flex;justify-content:center;align-items:flex-start;gap:44px}
.jma-service-page .mascotte{width:190px;height:300px;flex:0 0 auto;border-radius:16px;object-fit:cover}
.jma-service-page .info-text{display:flex;flex-direction:column;align-items:flex-start;gap:26px;width:467px;flex:0 0 auto}
.jma-service-page .info-text .head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.jma-service-page .info-text h2{font-size:30px;line-height:36px}
.jma-service-page .info-list{gap:14px}
.jma-service-page .hours-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:380px;flex:0 0 auto;background:var(--jma-teal);color:#fff;border-radius:14px;padding:30px 28px}
.jma-service-page .hours-card h3{color:#fff;font-size:19px;line-height:26px;font-weight:600}
.jma-service-page .hours-card .sp{height:8px}
.jma-service-page .hours-card .row{display:flex;justify-content:space-between;gap:16px;width:100%;padding:9px 0;font-size:15px;line-height:18px}
.jma-service-page .hours-card .row span:last-child{font-weight:600}
.jma-service-page .hours-card .line{width:100%;height:1px;background:rgba(255,255,255,.22)}

/* ---------- FAQ (768 px) ---------- */
.jma-service-page .section-head--center{align-items:center;text-align:center;gap:10px;max-width:none;margin-bottom:36px}
.jma-service-page .section-head--center h2{font-size:30px;line-height:36px}
.jma-service-page .faq{display:flex;flex-direction:column;width:840px;max-width:100%;margin:0 auto;gap:12px}
.jma-service-page .faq-item{background:#fff;border:1px solid var(--jma-border);border-radius:12px;overflow:hidden}
.jma-service-page .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;font-size:16.5px;line-height:22px;font-weight:600;color:var(--jma-ink);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.jma-service-page .faq-q .chev{color:var(--jma-check);font-size:22px;line-height:27px;font-weight:600;flex:0 0 auto}
.jma-service-page .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.jma-service-page .faq-a .inner{padding:0 24px 20px;color:var(--jma-text);font-size:16px;line-height:24px}

/* ---------- Bande CTA (312 px) ---------- */
.jma-service-page .cta-band{background:var(--jma-teal);color:#fff;padding:64px 0}
.jma-service-page .cta-band .container{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.jma-service-page .cta-band h2{color:#fff;font-size:30px;line-height:38px}
.jma-service-page .cta-band p{color:#fff;max-width:560px;font-size:18px;line-height:27px}
.jma-service-page .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1439px){
  .jma-service-page .grid-2{grid-template-columns:minmax(0,620px) minmax(0,653px);gap:48px}
  .jma-service-page .media img{height:auto;aspect-ratio:653/547}
  .jma-service-page .info-grid{flex-wrap:wrap}
}
@media (max-width:1280px){
  .jma-service-page .grid-2{grid-template-columns:1fr 1fr}
  .jma-service-page .info-text{width:auto;flex:1 1 380px}
}
@media (max-width:1024px){
  .jma-service-page .grid-2{grid-template-columns:1fr;gap:44px}
  .jma-service-page .card{width:100%}
  .jma-service-page .steps{grid-template-columns:1fr;gap:24px}
  .jma-service-page .grid-3{grid-template-columns:1fr;gap:80px;margin-top:40px}
  .jma-service-page .timeline{display:none}
  .jma-service-page .section{padding:56px 0}
  .jma-service-page .hero{min-height:auto;padding:64px 0}
  .jma-service-page .info-grid{flex-direction:column;align-items:stretch;gap:32px}
  .jma-service-page .mascotte{align-self:center}
  .jma-service-page .info-text{width:auto}
}
@media (max-width:760px){
  .jma-service-page h1{font-size:34px;line-height:40px}
  .jma-service-page h2,.jma-service-page .section-head h2{font-size:26px;line-height:32px}
  .jma-service-page .section-head p,.jma-service-page .lead,.jma-service-page .cta-band p{font-size:17px;line-height:26px}
  .jma-service-page .hero{background-position:72% center}
  .jma-service-page .card{padding:48px 22px 24px}
  .jma-service-page .step,.jma-service-page .feature{padding-left:22px;padding-right:22px}
  .jma-service-page .help-bar{flex-direction:column;align-items:flex-start;padding:24px}
  .jma-service-page .trust-bar{width:auto;padding:20px 24px}
}