/* ===== Carte animée Île-de-France ===== */
.idf-map{background:radial-gradient(900px 500px at 45% 45%,#173E68 0%,#0B2340 55%,#071629 100%);border-radius:30px;padding:18px;box-shadow:0 40px 80px rgba(7,22,41,.45),inset 0 0 0 1px rgba(255,255,255,.06);position:relative;overflow:hidden}
.idf-map::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none;z-index:2}
.idf-wrap{position:relative}
.idf-svg{width:100%;height:auto;display:block;overflow:hidden}
.idf-grid line{stroke:rgba(120,170,230,.08);stroke-width:1}
.idf-rings .ring{fill:none;stroke:rgba(255,194,75,.25);stroke-width:1.2;stroke-dasharray:4 8;transform-box:fill-box;transform-origin:center;animation:ringspin 60s linear infinite}
.idf-rings .r1{animation-direction:reverse;animation-duration:90s;stroke:rgba(79,195,247,.22)}
.idf-rings .r2{animation-duration:120s}
.idf-rings .r3{animation-direction:reverse;animation-duration:150s;stroke:rgba(79,195,247,.15)}
@keyframes ringspin{to{transform:rotate(360deg)}}
.idf-sweep{animation:radar linear infinite}
.idf-sweep .sweep-line{stroke:#FFC24B;stroke-width:2;opacity:.8;filter:drop-shadow(0 0 6px #FFC24B)}
@keyframes radar{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.idf-arcs .arc{fill:none;stroke-width:1.6;opacity:.75}
.idf-map.play .idf-arcs .arc{animation:draw 1.6s ease-out forwards,flow 4s ease-in-out 1.6s infinite}
.idf-arcs .arc.focus{stroke:#FF7A1A;stroke-width:3;opacity:1;filter:drop-shadow(0 0 6px #FF7A1A)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{50%{opacity:.25}}
.city{cursor:pointer;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.idf-map.play .city{animation:pop .6s cubic-bezier(.2,1.6,.4,1) var(--pop) forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.city .core{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
.city .halo{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center;animation:ping 8s ease-out infinite;animation-delay:var(--d)}
@keyframes ping{0%{opacity:.75;transform:scale(.3)}12%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
.city:hover .core,.city:focus .core{r:9;stroke:#fff;stroke-width:2}
.city:focus{outline:none}
.city.capital .core{fill:#FFC24B;stroke:#fff;stroke-width:2}
.city.capital .halo{animation:ping2 2.4s ease-out infinite;fill:#FFC24B}
.city.focus .core{fill:#FF7A1A;stroke:#fff;stroke-width:2.5}
.city.focus .halo{animation:ping2 1.8s ease-out infinite;fill:#FF7A1A}
@keyframes ping2{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}
.idf-labels .lbl{fill:#cfe0f3;font-weight:600;font-size:15px;font-family:inherit;paint-order:stroke;stroke:#071629;stroke-width:4px;opacity:0;pointer-events:none}
.idf-map.play .idf-labels .lbl{animation:fadein .8s 1.8s forwards}
.idf-labels .lbl.capital{fill:#FFC24B;font-size:18px;font-weight:800}
.idf-labels .lbl.focus{fill:#fff;font-size:20px;font-weight:800}
.idf-svg.filtered .dim{opacity:.08!important;animation-play-state:paused}
.idf-svg [data-dep]{transition:opacity .4s}
.idf-tip{position:absolute;transform:translate(-50%,calc(-100% - 18px));background:rgba(255,255,255,.97);color:#0E2A47;border-radius:14px;padding:12px 14px;min-width:190px;box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}
.idf-tip.on{opacity:1;pointer-events:auto;transform:translate(-50%,calc(-100% - 12px))}
.idf-tip::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.idf-tip strong{display:block;font-size:1.05rem;margin:2px 0 6px}
.idf-tip .dep{font-size:.75rem;font-weight:700;color:var(--c);text-transform:uppercase;letter-spacing:.05em}
.idf-tip a{font-weight:700;color:#FF7A1A;text-decoration:none;font-size:.9rem}
.idf-hud{position:absolute;left:12px;top:12px;background:rgba(7,22,41,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#cfe0f3;border-radius:12px;padding:10px 14px;font-size:.85rem;z-index:3}
.idf-hud b{color:#FFC24B;font-size:1.05rem}
.idf-hud .live{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;margin-bottom:2px}
.idf-hud .live i{width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 0 rgba(61,220,151,.7);animation:pulse 1.6s infinite}
.idf-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;position:relative;z-index:3}
.idf-legend button{font:inherit;font-size:.8rem;font-weight:600;color:#cfe0f3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.2s}
.idf-legend button i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.idf-legend button:hover,.idf-legend button.on{background:#fff;color:#0E2A47}
.idf-map .gmaps{position:absolute;right:14px;top:14px;z-index:3;font-size:.8rem;color:#fff;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:7px 12px;border-radius:99px}
@media (max-width:620px){.idf-map{padding:10px;border-radius:20px}.idf-hud{font-size:.72rem;padding:7px 10px}.idf-labels .lbl{font-size:22px}.idf-legend button{font-size:.72rem;padding:6px 10px}}

/* Composant carte animée — autonome */
.carte-section{padding:70px 16px;background:#F5F7FB}
.carte-section .carte-inner{max-width:1180px;margin:0 auto}
.carte-section .carte-head{text-align:center;max-width:760px;margin:0 auto 30px}
.carte-section .carte-head h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:10px 0}
.carte-section .carte-head p{opacity:.8}
.carte-section .carte-tag{display:inline-block;background:rgba(255,122,26,.12);color:#FF7A1A;font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:99px;text-transform:uppercase;letter-spacing:.06em}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.idf-map,.idf-map *{box-sizing:border-box}
.idf-svg .city .core{transition:r .2s}

/* Mobile : carte plus grande, défilement horizontal */
.idf-map{position:relative}
.idf-hint{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);background:rgba(7,22,41,.8);color:#fff;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:99px;z-index:4;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.idf-hint.off{opacity:0}
@media (max-width:760px){
  .idf-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px}
  .idf-wrap::-webkit-scrollbar{display:none}
  .idf-svg{width:720px;max-width:none}
  .idf-hud{position:static;margin-bottom:10px;display:inline-block}
  .idf-legend{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none}
  .idf-legend::-webkit-scrollbar{display:none}
  .idf-legend button{flex:none}
  .idf-tip{min-width:170px;padding:10px 12px}
  .idf-labels .lbl{font-size:16px}
}
@media (min-width:761px){.idf-hint{display:none}}

.idf-map{max-width:100%;min-width:0}
.idf-wrap{max-width:100%}