.mci{--deep:#1D4A7E;--brand:#3473B4;--light:#8DB8E6;--tint:#E3EEF9;--bg:#F1F6FB;--line:#DCE7F2;
  color:var(--deep);background:var(--bg);
  max-width:1280px;margin:0 auto;border-radius:16px;overflow:hidden;box-sizing:border-box}
.mci *,.mci *::before,.mci *::after{box-sizing:border-box}

.mci{padding: 0;container-type:inline-size;container-name:mci;width:100%;text-align:left;letter-spacing:normal;word-spacing:normal;text-transform:none;hyphens:manual}
.mci h2,.mci p{margin:0}
.mci img,.mci svg{max-width:none}
.mci button{font-family:inherit;cursor:pointer}
.mci button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* En-tête (structure d'origine, couleurs de la charte) */
.mci-head{background:var(--deep);display:flex;align-items:center;gap:28px;padding:16px 32px}
.mci-logo{background:#fff;border-radius:14px;padding:10px 14px;flex-shrink:0;display:flex;align-items:center}
.mci-logo img{width:130px;height:auto;display:block}
.mci-title{flex:1;text-align:center;color:#fff;font-size:clamp(24px,3.4vw,44px);font-weight:900;line-height:1.1;margin:0}
.mci-title span{color:var(--light)}
.mci-tag{display:flex;align-items:center;gap:14px;width:250px;color:#fff;font-size:15px;font-weight:700;line-height:1.35}
.mci-shield{width:56px;height:64px;background:var(--brand);border-radius:10px 10px 28px 28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

/* Corps : cartes gauche | carte | cartes droite | couverture */
.mci-body{display:grid;grid-template-columns:250px minmax(300px,1fr) 236px 300px;gap:18px;padding:22px 32px 18px}
.mci-col{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.mci-col.right{justify-content:space-around}
.mci-card{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:44px;padding:8px 18px 8px 8px;box-shadow:0 3px 12px rgba(29,74,126,.12)}
/* disposition en arc autour de la carte, comme l'original */
.mci-col.left .mci-card:nth-child(1),.mci-col.left .mci-card:nth-child(5){margin-left:26px;margin-right:-26px}
.mci-col.left .mci-card:nth-child(2),.mci-col.left .mci-card:nth-child(4){margin-left:10px;margin-right:-10px}
.mci-col.right .mci-card:nth-child(1),.mci-col.right .mci-card:nth-child(4){margin-left:-22px;margin-right:22px}
/* liaisons pointillées vers la carte */
.mci-col.left .mci-card::after,.mci-col.right .mci-card::before{content:"";position:absolute;top:50%;width:30px;border-top:2px dotted var(--light)}
.mci-col.left .mci-card::after{left:100%}
.mci-col.right .mci-card::before{right:100%}
.mci-col.left .mci-card::before,.mci-col.right .mci-card::after{content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--brand)}
.mci-col.left .mci-card::before{left:calc(100% + 30px)}
.mci-col.right .mci-card::after{right:calc(100% + 30px)}
.mci-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mci-ic.d{background:var(--deep)}.mci-ic.b{background:var(--brand)}
.mci-ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mci-num{font-size:36px;font-weight:900;line-height:1;transition:color .25s}
.mci-num.bump{color:var(--brand)}
.mci-lbl{font-size:13px;font-weight:800;letter-spacing:.03em;line-height:1.2}

/* Carte de Madagascar */
.mci-mapzone{position:relative;display:flex;align-items:center;justify-content:center;min-height:470px}
.mci-map{position:relative;width:248px;height:472px}
.mci-map svg{display:block;width:100%;height:100%;overflow:visible}
.mci-circle{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:168px;height:168px;border-radius:50%;
  background:var(--deep);border:7px solid #fff;box-shadow:0 0 0 3px var(--tint),0 8px 24px rgba(29,74,126,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 16px}
.mci-circle .n{font-size:50px;font-weight:900;line-height:1}
.mci-circle .t{font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.25;margin-top:4px}
.mci-circle .r{font-size:11px;font-weight:800;color:var(--light);line-height:1.2;margin-top:4px;min-height:13px}
.mci-circle svg{width:26px;height:26px;margin-top:6px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Panneau couverture nationale */
.mci-panel{background:#fff;border:2px solid var(--deep);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mci-ph{background:var(--deep);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:900;line-height:1.2}
.mci-sub{background:var(--brand);color:#fff;font-size:12px;font-weight:800;text-align:center;padding:6px;letter-spacing:.05em}
.mci-list{flex:1;display:flex;flex-direction:column;justify-content:space-around;padding:8px 12px;gap:2px}
.mci-row{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:4px 8px;border:none;border-bottom:1px solid var(--line);border-radius:8px;background:transparent;color:var(--deep);text-align:left}
.mci-row:last-child{border-bottom:none}
.mci-row:hover{background:#EEF4FB}
.mci-row[aria-pressed="true"]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--brand)}
.mci-row .nm{flex:1;font-size:13px;font-weight:800;line-height:1.2}
.mci-row .bd-d{background:var(--deep)}.mci-row .bd-b{background:var(--brand)}
.mci-row .bd{color:#fff;font-size:16px;font-weight:900;padding:3px 9px;border-radius:6px;min-width:38px;text-align:center}
.mci-reset{margin:0 12px 10px;min-height:36px;border:none;border-radius:18px;background:transparent;color:var(--brand);font-size:12px;font-weight:800;text-decoration:underline}
.mci-reset[hidden]{display:none}
.mci-error{margin:0 32px 16px;padding:12px 16px;border-radius:10px;background:#FDECEC;color:#8A1C1C;font-size:14px;font-weight:700}

/* Bandeau avantages */
.mci-foot{margin:0 32px 20px;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(29,74,126,.08);display:flex;flex-wrap:wrap;row-gap:14px;padding:14px 10px}
.mci-adv{flex:1 1 190px;min-width:0;text-align:left;display:flex;align-items:center;gap:10px;padding:0 12px;border-right:1px solid var(--line);font-size:11px;font-weight:800;line-height:1.3}
.mci-adv:last-child{border-right:none}
.mci-adv .mci-ic{width:44px;height:44px}
.mci-adv .mci-ic svg{width:22px;height:22px}

/* Responsive — basé sur la largeur du conteneur du widget
   ≥ 1180 px : disposition complète
   780–1179 px : même disposition, en version compacte (ex. colonne de 841 px)
   < 780 px : carte en haut, compteurs sur 2 colonnes, panneau dessous
   < 560 px : tout empilé (mobile) */
@container mci (min-width:780px) and (max-width:1179.98px){
  .mci-head{gap:16px;padding:12px 18px}
  .mci-logo{padding:7px 10px;border-radius:10px}
  .mci-logo img{width:92px}
  .mci-title{font-size:28px}
  .mci-tag{width:190px;gap:10px;font-size:12px}
  .mci-shield{width:40px;height:46px;border-radius:8px 8px 20px 20px}
  .mci-shield svg{width:20px;height:20px}

  .mci-body{grid-template-columns:176px minmax(0,1fr) 166px 214px;gap:10px;padding:16px 16px 12px}
  .mci-col{gap:8px}
  .mci-card{gap:8px;padding:5px 10px 5px 5px;border-radius:30px}
  .mci-ic{width:38px;height:38px}
  .mci-ic svg{width:19px;height:19px}
  .mci-num{font-size:24px}
  .mci-lbl{font-size:10px;letter-spacing:.01em}
  .mci-col.left .mci-card:nth-child(1),.mci-col.left .mci-card:nth-child(5){margin-left:12px;margin-right:-12px}
  .mci-col.left .mci-card:nth-child(2),.mci-col.left .mci-card:nth-child(4){margin-left:5px;margin-right:-5px}
  .mci-col.right .mci-card:nth-child(1),.mci-col.right .mci-card:nth-child(4){margin-left:-10px;margin-right:10px}
  .mci-col.left .mci-card::after,.mci-col.right .mci-card::before{width:14px}
  .mci-col.left .mci-card::before{left:calc(100% + 14px)}
  .mci-col.right .mci-card::after{right:calc(100% + 14px)}
  .mci-col.left .mci-card::before,.mci-col.right .mci-card::after{width:6px;height:6px;top:calc(50% - 3px)}

  .mci-mapzone{min-height:400px}
  .mci-map{width:208px;height:396px}
  .mci-circle{width:124px;height:124px;border-width:5px;padding:0 8px}
  .mci-circle .n{font-size:36px}
  .mci-circle .t{font-size:8.5px}
  .mci-circle .r{font-size:8.5px;min-height:10px}
  .mci-circle svg{width:18px;height:18px;margin-top:3px}

  .mci-ph{padding:10px 12px;gap:8px;font-size:14px}
  .mci-ph svg{width:24px;height:24px}
  .mci-sub{font-size:10px;padding:4px}
  .mci-list{padding:4px 8px}
  .mci-row{min-height:34px;gap:6px;padding:2px 6px}
  .mci-row svg{width:11px;height:14px}
  .mci-row .nm{font-size:10.5px}
  .mci-row .bd{font-size:13px;padding:2px 6px;min-width:32px}
  .mci-reset{font-size:11px;min-height:30px;margin-bottom:6px}

  .mci-foot{flex-wrap:nowrap;margin:0 16px 14px;padding:10px 4px}
  .mci-adv{flex:1 1 0;gap:7px;padding:0 8px;font-size:9.5px}
  .mci-adv .mci-ic{width:32px;height:32px}
  .mci-adv .mci-ic svg{width:16px;height:16px}
}
@container mci (max-width:779.98px){
  .mci-body{grid-template-columns:1fr 1fr}
  .mci-mapzone{grid-column:1 / -1;order:-1}
  .mci-panel{grid-column:1 / -1}
  .mci-tag{display:none}
  .mci-col .mci-card{margin-left:0!important;margin-right:0!important}
  .mci-col .mci-card::before,.mci-col .mci-card::after{display:none}
}
@container mci (max-width:559.98px){
  .mci-head{flex-direction:column;gap:12px;padding:18px}
  .mci-body{grid-template-columns:1fr;padding:18px}
  .mci-foot{flex-direction:column;gap:12px;margin:0 18px 18px}
  .mci-adv{border-right:none;flex-basis:auto}
}
/* ===== Popup ===== */
.mci-open{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:none;border-radius:24px;
  background:#3473B4;color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 14px rgba(29,74,126,.25);transition:background-color .2s,transform .2s}
.mci-open:hover{background:#1D4A7E;transform:translateY(-1px)}
.mci-open:focus-visible{outline:3px solid #1D4A7E;outline-offset:3px}
.mci-open svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.mci-dialog{width:min(1280px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  padding:0;border:none;border-radius:16px;background:#F1F6FB;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 24px 60px rgba(13,32,56,.45)}
.mci-dialog::backdrop{background:rgba(13,32,56,.62);backdrop-filter:blur(3px)}
.mci-dialog[open]{animation:mci-pop .28s cubic-bezier(.2,.8,.2,1)}
.mci-dialog[open]::backdrop{animation:mci-fade .28s ease}
@keyframes mci-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mci-fade{from{opacity:0}to{opacity:1}}
.mci-dialog .mci{max-width:none;border-radius:0}
.mci-dialog .mci-head{padding-right:76px}
.mci-close{position:sticky;top:0;float:right;z-index:5;width:44px;height:44px;margin:10px 10px -54px 0;border:none;border-radius:50%;
  background:rgba(255,255,255,.95);color:#1D4A7E;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(13,32,56,.3);transition:transform .2s}
.mci-close:hover{transform:rotate(90deg)}
.mci-close:focus-visible{outline:3px solid #8DB8E6;outline-offset:2px}
.mci-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
html.mci-lock{overflow:hidden}
@media (max-width:600px){
  .mci-dialog{width:100vw;max-height:100vh;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
}
@media (prefers-reduced-motion:reduce){.mci *{transition:none!important}.mci-dialog[open],.mci-dialog[open]::backdrop{animation:none}}