/* ===== MCI Care — « Nous nous engageons à » (widget interactif) =====
   Charte : bleu logo #3473B4 · bleu profond #1D4A7E */
.mce{--deep:#1D4A7E;--brand:#3473B4;--light:#8DB8E6;--tint:#E3EEF9;
  container-type:inline-size;container-name:mce;
  position:relative;width:100%;/*max-width:640px;*/margin:0 auto;padding:0;box-sizing:border-box;overflow:hidden;
  color:var(--deep);
  text-align:left;letter-spacing:normal;word-spacing:normal;text-transform:none;hyphens:manual;
  background:#F4F7FB center / cover no-repeat;border-radius:4px}
.mce *,.mce *::before,.mce *::after{box-sizing:border-box}
.mce h2,.mce p{margin:0}
.mce button{font-family:inherit;cursor:pointer}
.mce button:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
/* voile blanc sur la photo, comme le modèle */
.mce::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.62) 50%,rgba(255,255,255,.80));pointer-events:none}
.mce > *{position:relative}

.mce-title{text-align:center;font-size:clamp(16px,3.6cqw,22px);font-weight:900;color:var(--deep);padding:22px 16px 6px;letter-spacing:.02em}

/* Scène circulaire */
.mce-stage{position:relative;width:min(100%,600px);aspect-ratio:1/1;margin:0 auto}
.mce-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mce-ring .base{fill:none;stroke:var(--brand);stroke-opacity:.55;stroke-width:.45}
.mce-ring .prog{fill:none;stroke:var(--deep);stroke-width:1.1;stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px;transition:transform .9s cubic-bezier(.65,0,.35,1)}

.mce-item{position:absolute;width:32%;min-height:20%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:4% 4.5%;border:none;border-radius:12px;background:var(--brand);color:#fff;
  font-size:clamp(11px,2.45cqw,15px);font-weight:700;line-height:1.35;
  box-shadow:0 4px 14px rgba(29,74,126,.25);
  transition:transform .35s ease,background-color .35s ease,box-shadow .35s ease}
.mce-item:hover{background:#2C66A3}
.mce-item[aria-pressed="true"]{background:var(--deep);transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 4px #fff,0 0 0 7px var(--brand),0 10px 26px rgba(29,74,126,.35)}
.mce-num{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;
  background:#fff;color:var(--deep);font-size:12px;font-weight:900;line-height:24px;text-align:center;box-shadow:0 2px 6px rgba(29,74,126,.25)}

/* Zone centrale : détail de l'engagement actif */
.mce-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;
  text-align:center;padding:3%;border-radius:50%;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.88);box-shadow:0 6px 22px rgba(29,74,126,.18)}
.mce-center .k{font-size:clamp(22px,6cqw,40px);font-weight:900;color:var(--brand);line-height:1}
.mce-center .k small{font-size:.5em;color:var(--light);font-weight:800}
.mce-center .t{margin-top:4px;font-size:clamp(9px,1.8cqw,12px);font-weight:900;letter-spacing:.08em;color:var(--deep)}
.mce .mce-caption{max-width:560px;width:calc(100% - 32px);margin:6px auto 0;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(29,74,126,.12);font-size:clamp(12px,2.3cqw,14.5px);font-weight:600;line-height:1.45;color:#2B4466;animation:mce-in .45s ease both}
.mce-caption strong{display:block;color:var(--deep);font-weight:900;margin-bottom:2px}
.mce-center .k,.mce-center .t{animation:mce-in .45s ease both}
@keyframes mce-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Contrôles */
.mce-ctrl{display:flex;display: none;align-items:center;justify-content:center;gap:10px;padding:4px 16px 0}
.mce-dot{width:44px;height:44px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;padding:0}
.mce-dot span{width:10px;height:10px;border-radius:50%;background:var(--light);transition:transform .25s,background-color .25s}
.mce-dot[aria-current="true"] span{background:var(--deep);transform:scale(1.35)}
.mce-play{min-width:44px;height:44px;border-radius:22px;border:2px solid var(--brand);background:#fff;color:var(--deep);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-size:12px;font-weight:800}
.mce-play svg{width:14px;height:14px;fill:currentColor}

.mce .mce-foot{margin:10px 16px 0;padding:14px 8px 18px;border-top:1px solid rgba(29,74,126,.18);text-align:center;font-size:clamp(11px,2.3cqw,14px);font-weight:900;color:#1b2b40;letter-spacing:.02em}
.mce .mce-error{margin:12px 16px;padding:10px 14px;border-radius:10px;background:#FDECEC;color:#8A1C1C;font-size:14px;font-weight:700}

.mce-item .d-inline{display:none;margin-top:6px;font-weight:600;font-size:.92em;opacity:.9}
/* Petite largeur : liste verticale reliée par une ligne */
@container mce (max-width:479.98px){
  .mce-stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;padding:10px 18px 4px 46px}
  .mce-stage::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;border-left:2px solid var(--light)}
  .mce-ring,.mce-center,.mce-caption{display:none!important}
  .mce-item{position:relative;left:auto!important;top:auto!important;width:100%;min-height:0;transform:none;padding:14px 16px;text-align:left;justify-content:flex-start}
  .mce-item[aria-pressed="true"]{transform:none}
  .mce-num{top:50%;left:-31px;transform:translateY(-50%)}
  .mce-item{font-size:13.5px}
  .mce-item[aria-pressed="true"] .d-inline{display:block}
}
@media (prefers-reduced-motion:reduce){.mce *{transition:none!important;animation:none!important}}
.mce-dots{display:flex}
.mce-item .txt{display:block}