/* WeCan Casa-Settat — carte des 16 coordinations.
   N'utilise que vos variables CSS existantes (--violet-b, --yellow, --ink,
   --f-ui, --ease…), chacune avec un repli intégré. Rien à déclarer en plus. */

/* ═══ 1 · carte du hero — index.html ═══════════════════════════════════ */
.hmap{position:relative;--y:var(--yellow,#FFD84D);--yd:var(--yellow-d,#F5C518);
  --lil:var(--lilas,#C9A6F0);--fui:var(--f-ui,'Alexandria',Arial,sans-serif);
  --far:var(--f-ar,'XB Titre','Alexandria',Tahoma,sans-serif);
  --ez:var(--ease,cubic-bezier(.22,1,.36,1))}
/* Carte pensee pour un fond sombre (elle vit dans .hero.dark sur index.html) :
   remplis-la vous-meme d'un fond encre, pour qu'elle reste lisible meme
   posee telle quelle sur une section claire (coordinations.html). */
.hmap-card{position:relative;border-radius:var(--r-l,32px);padding:18px 20px 16px;
  background-color:var(--ink,#14152e);
  background-image:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(9,10,32,.42),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}

.hmap-frame{position:relative;width:100%;aspect-ratio:1006/830}
.hmap-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transition:opacity .5s var(--ez),transform .6s var(--ez)}

.hmap .hz{cursor:pointer;outline:none;transition:opacity .3s var(--ez)}
.hmap .hp{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.30);stroke-width:1.7;
  stroke-linejoin:round;transition:fill .3s var(--ez),stroke .3s var(--ez),filter .35s var(--ez)}
.hmap .hpc{fill:rgba(134,7,247,.36);stroke:rgba(201,166,240,.86);stroke-width:2}
.hmap .hb circle{fill:rgba(14,15,38,.60);stroke:rgba(255,255,255,.42);stroke-width:1.4;
  transition:fill .3s var(--ez),stroke .3s var(--ez)}
.hmap .hb text{fill:#fff;font:700 15px/1 var(--fui);text-anchor:middle;
  pointer-events:none;transition:fill .3s var(--ez)}
.hmap .hbc circle{fill:rgba(134,7,247,.92);stroke:var(--lil)}
.hmap .hbc text{font-size:13px}
.hmap .hz:hover .hp,.hmap .hz:focus-visible .hp,.hmap .hz.on .hp{
  fill:url(#hmy);stroke:var(--y);stroke-width:2.6;
  filter:drop-shadow(0 12px 24px rgba(255,216,77,.40))}
.hmap .hz:hover .hb circle,.hmap .hz:focus-visible .hb circle,.hmap .hz.on .hb circle{
  fill:var(--ink,#0E0F26);stroke:var(--y)}
.hmap .hz:hover .hb text,.hmap .hz:focus-visible .hb text,.hmap .hz.on .hb text{fill:var(--y)}
.hmap .hmap-svg.dimmed .hz:not(.on):not(:hover){opacity:.34}

.hmap-read{margin-top:2px;min-height:60px;display:flex;align-items:center;gap:13px;
  padding:11px 14px;border-radius:var(--r-s,12px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.hmap-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--y),var(--yd));color:var(--ink,#0E0F26);
  font:800 14px/1 var(--fui)}
.hmap-txt{min-width:0}
.hmap-fr{display:block;font:600 14.5px/1.25 var(--fui);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmap-ar{display:block;direction:rtl;font:400 12.5px/1.5 var(--far);color:rgba(255,255,255,.60)}
.hmap-read>a{margin-inline-start:auto;flex:0 0 auto;color:var(--y);text-decoration:none;
  font:600 11.5px/1 var(--fui);white-space:nowrap;
  border-bottom:1px solid rgba(255,216,77,.34);padding-bottom:2px;transition:border-color .25s var(--ez)}
.hmap-read>a:hover{border-color:var(--y)}
@media (max-width:900px){.hmap{margin-top:34px}.hmap-card{padding:16px 16px 13px}
  .hmap-fr{white-space:normal}}
@media (prefers-reduced-motion:reduce){.hmap *{transition:none!important;animation:none!important}}

/* ═══ 2 · carte + fiches — coordinations.html ══════════════════════════ */
.cx{--y:var(--yellow,#FFD84D);--yd:var(--yellow-d,#F5C518);--v:var(--violet-b,#8607F7);
 --lil:var(--lilas,#C9A6F0);--ez:var(--ease,cubic-bezier(.22,1,.36,1));
 --fui:var(--f-ui,'Alexandria',Arial,sans-serif);--far:var(--f-ar,'XB Titre','Alexandria',Tahoma,sans-serif);
 display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:40px;align-items:start}
.cx-map,.cx-side{min-width:0}

/* ── carte (colonne gauche, collante) ─────────────────────────────────── */
.cx-map{position:sticky;top:96px;border-radius:var(--r-l,32px);padding:18px 18px 14px;color:#fff;
 background:radial-gradient(128% 96% at 4% -14%,#730CD5 0%,#242659 48%,#0E0F26 100%);
 box-shadow:var(--sh,0 24px 70px rgba(20,22,60,.14));overflow:hidden}
.cx-map::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06)}
.cx-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cx-seg{display:inline-flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.09);
 border:1px solid rgba(255,255,255,.13)}
.cx-seg button{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;background:transparent;
 color:rgba(255,255,255,.66);font:600 11.5px/1 var(--fui);padding:8px 15px;border-radius:99px;
 transition:background .3s var(--ez),color .3s var(--ez)}
.cx-seg button[aria-selected="true"]{background:#fff;color:var(--ink,#0E0F26)}
.cx-count{font:600 10.5px/1 var(--fui);letter-spacing:.16em;text-transform:uppercase;
 color:rgba(255,255,255,.5)}

.cx-stage{position:relative;width:100%;aspect-ratio:1006/830}
.cx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
 transition:opacity .5s var(--ez),transform .6s var(--ez)}
.cx-svg.b{opacity:0;transform:scale(.93);pointer-events:none}
.cx[data-view="casa"] .cx-svg.a{opacity:0;transform:scale(1.1);pointer-events:none}
.cx[data-view="casa"] .cx-svg.b{opacity:1;transform:none;pointer-events:auto}

.cx-z{cursor:pointer;outline:none;transition:opacity .3s var(--ez)}
.cx-p{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.30);stroke-width:1.6;
 stroke-linejoin:round;transition:fill .3s var(--ez),stroke .3s var(--ez),filter .35s var(--ez)}
.cx-pc{fill:rgba(134,7,247,.36);stroke:rgba(201,166,240,.86);stroke-width:1.9}
.cx-tie{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.1;stroke-dasharray:3 4}
.cx-b{fill:rgba(14,15,38,.62);stroke:rgba(255,255,255,.44);stroke-width:1.3;
 transition:fill .3s var(--ez),stroke .3s var(--ez)}
.cx-n{fill:#fff;font:700 12px/1 var(--fui);text-anchor:middle;pointer-events:none;
 transition:fill .3s var(--ez)}
.cx-fr,.cx-ar,.cx-sub{text-anchor:middle;pointer-events:none;paint-order:stroke;
 stroke:rgba(14,15,38,.62);stroke-width:3.4px;stroke-linejoin:round}
.cx-fr{fill:#fff;font:600 15px/1 var(--fui)}
.cx-fr.sm{font-size:13px}.cx-fr.big{font-size:21px;font-weight:700}
.cx-ar{fill:rgba(255,255,255,.66);font:400 12px/1 var(--far);direction:rtl}
.cx-ar.sm{font-size:10.5px}
.cx-sub{fill:var(--lil);font:500 11.5px/1 var(--fui);stroke-width:3px}
.cx-z:hover .cx-p,.cx-z:focus-visible .cx-p,.cx-z.on .cx-p{
 fill:url(#cxy);stroke:var(--y);stroke-width:2.5;filter:drop-shadow(0 12px 24px rgba(255,216,77,.42))}
.cx-z:hover .cx-b,.cx-z:focus-visible .cx-b,.cx-z.on .cx-b{fill:var(--ink,#0E0F26);stroke:var(--y)}
.cx-z:hover .cx-n,.cx-z:focus-visible .cx-n,.cx-z.on .cx-n{fill:var(--y)}
.cx-svg.dim .cx-z:not(.on):not(:hover){opacity:.22}
.cx-svg.f-off .cx-z{opacity:.16;pointer-events:none}

.cx-read{display:flex;align-items:center;gap:12px;min-height:58px;margin-top:4px;
 padding:10px 14px;border-radius:var(--r-s,12px);
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.cx-read-n{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
 background:linear-gradient(140deg,var(--y),var(--yd));color:var(--ink,#0E0F26);font:800 13px/1 var(--fui)}
.cx-read-t{min-width:0}
.cx-read-t b{display:block;font:600 14px/1.3 var(--fui);color:#fff}
.cx-read-t i{display:block;font:400 12px/1.5 var(--far);font-style:normal;direction:rtl;
 color:rgba(255,255,255,.58)}
.cx-read-r{margin-inline-start:auto;text-align:end;font:500 11px/1.5 var(--fui);
 color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── liste (colonne droite) ───────────────────────────────────────────── */
.cx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cx-tabs button{appearance:none;-webkit-appearance:none;cursor:pointer;
 border:1px solid var(--line,rgba(36,38,89,.10));background:#fff;color:var(--grey,#5B5F80);
 font:600 12.5px/1 var(--fui);padding:11px 15px;border-radius:99px;display:inline-flex;
 align-items:center;gap:8px;transition:all .28s var(--ez)}
.cx-tabs button i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:99px;
 background:var(--lilas-x,#EFEFF4);color:var(--navy,#242659)}
.cx-tabs button:hover{border-color:var(--lilas,#C9A6F0);color:var(--ink,#0E0F26)}
.cx-tabs button[aria-selected="true"]{background:var(--ink,#0E0F26);border-color:var(--ink,#0E0F26);color:#fff}
.cx-tabs button[aria-selected="true"] i{background:rgba(255,255,255,.16);color:#fff}

.cx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.cx-card{position:relative;background:#fff;border:1px solid var(--line,rgba(36,38,89,.10));
 border-radius:var(--r,20px);padding:16px 16px 14px;cursor:pointer;outline:none;
 scroll-margin-top:110px;
 transition:transform .34s var(--ez),box-shadow .34s var(--ez),border-color .34s var(--ez),opacity .3s var(--ez)}
.cx-card:hover,.cx-card:focus-visible{transform:translateY(-3px);
 border-color:var(--lilas,#C9A6F0);box-shadow:var(--sh-s,0 6px 22px rgba(20,22,60,.08))}
.cx-card.on{border-color:var(--violet-b,#8607F7);
 box-shadow:0 10px 30px rgba(134,7,247,.16),inset 3px 0 0 var(--violet-b,#8607F7)}
.cx-card.off{display:none}
.cx-card-n{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;
 display:grid;place-items:center;background:var(--lilas-x,#EFEFF4);color:var(--navy,#242659);
 font:700 11.5px/1 var(--fui);transition:background .3s var(--ez),color .3s var(--ez)}
.cx-card.on .cx-card-n{background:var(--violet-b,#8607F7);color:#fff}
.cx-card-t h3{margin:0 34px 2px 0;overflow-wrap:anywhere;font:600 15.5px/1.3 var(--fui);letter-spacing:-.01em}
.cx-card-ar{margin:0;direction:rtl;text-align:start;font:400 13px/1.6 var(--far);color:var(--grey,#5B5F80)}
.cx-card-m{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding-top:11px;
 border-top:1px solid var(--line,rgba(36,38,89,.10))}
.cx-dot{flex:0 0 auto;width:7px;height:7px;margin-top:5px;border-radius:50%;background:#2FBF71;
 box-shadow:0 0 0 3px rgba(47,191,113,.16)}
.cx-card-r{font:500 11.5px/1.45 var(--fui);color:var(--grey,#5B5F80)}
.cx-card-r i{display:block;font-style:normal;direction:rtl;font-family:var(--far);
 font-size:11px;color:rgba(91,95,128,.72)}
.cx-card-go{display:inline-flex;align-items:center;gap:5px;margin-top:11px;
 font:600 12px/1 var(--fui);color:var(--violet-b,#8607F7);text-decoration:none}
.cx-card-go span{transition:transform .3s var(--ez)}
.cx-card:hover .cx-card-go span{transform:translateX(3px)}

@media (max-width:1080px){
 .cx{grid-template-columns:1fr;gap:30px}
 .cx-map{position:relative;top:auto}
}
@media (max-width:560px){
 .cx-map{padding:14px 14px 11px;border-radius:var(--r,20px)}
}
@media (prefers-reduced-motion:reduce){.cx *{transition:none!important}}