/* ===========================================================================
   CARTE DE L ÎLE-DE-FRANCE
   ---------------------------------------------------------------------------
   Les départements sont posés sur un plan incliné, comme une carte d’état-major
   dépliée sur un capot. Chaque zone porte son ombre propre ; celle que l’on
   survole se soulève et vient au premier plan. Contours officiels, aucun
   script, aucune bibliothèque de cartographie.
   =========================================================================== */

.cps-carte {
  display: grid;
  gap: 22px;
}

/* ------------------------------------------------------------------ plateau */
.cps-carte__plateau {
  position: relative;
  /* la carte occupait toute la largeur de page : 1 900 px de plateau pour une
     region qui se lit tres bien en 760. width:100% est indispensable — dans
     une grille, une marge auto sans largeur fait retomber le bloc sur son
     contenu (le SVG revenait a 300 px). */
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(14px, 2.5vw, 26px);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, #f7fbfd 0%, #eef4f8 55%, #e6eef4 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  /* la profondeur vient de la perspective : le haut de la carte s’éloigne */
  perspective: 1400px;
  perspective-origin: 50% 20%;
}
/* trame de fond, comme le quadrillage d’un plan de réseau */
.cps-carte__plateau::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 89, 167, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 89, 167, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(100% 75% at 50% 45%, #000 40%, transparent 100%);
  pointer-events: none;
}

.cps-carte__dessin {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotateX(16deg) scale(0.97);
  transform-origin: 50% 60%;
  transition: transform 600ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cps-carte__plateau:hover .cps-carte__dessin { transform: rotateX(9deg) scale(1); }

/* ------------------------------------------------------------------ départements */
.cps-carte__zone {
  cursor: pointer;
  transition: transform 340ms cubic-bezier(0.22, 0.8, 0.28, 1);
  transform-box: fill-box;
  transform-origin: center;
}

/* l’épaisseur : une copie décalée vers le bas, sous la forme */
.cps-carte__ombre {
  fill: #c6d6e3;
  transform: translate(2px, 6px);
  transition: transform 340ms cubic-bezier(0.22, 0.8, 0.28, 1), fill 280ms;
}

.cps-carte__forme {
  /* fond blanc sur plateau clair : les limites de departement
     disparaissaient. Un bleu tres pale et un trait franc les redessinent. */
  fill: #f2f7fb;
  stroke: #9db9d1;
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill 280ms, stroke 280ms;
}

.cps-carte__pastille {
  fill: #ffffff;
  opacity: 0.9;
  transition: opacity 280ms, fill 280ms;
}
.cps-carte__code {
  font-family: Manrope, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  fill: #0659a7;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 280ms, fill 280ms;
}

/* survol : la zone se soulève et prend la couleur de la maison */
.cps-carte__zone:hover { transform: translateY(-7px); }
.cps-carte__zone:hover .cps-carte__ombre { transform: translate(4px, 15px); fill: #98b2c6; }
.cps-carte__zone:hover .cps-carte__forme { fill: #0659a7; stroke: #044a8d; }
.cps-carte__zone:hover .cps-carte__pastille { opacity: 0; }
.cps-carte__zone:hover .cps-carte__code { fill: #fff; opacity: 1; }

.cps-carte__zone:focus-visible { outline: none; }
.cps-carte__zone:focus-visible .cps-carte__forme {
  stroke: #0659a7;
  stroke-width: 5;
  stroke-dasharray: 10 6;
}

/* département de la page en cours : en vert, déjà soulevé */
.cps-carte__zone--active { transform: translateY(-5px); }
.cps-carte__zone--active .cps-carte__forme { fill: #2f892c; stroke: #256d23; }
.cps-carte__zone--active .cps-carte__ombre { transform: translate(4px, 13px); fill: #9dbb9b; }
.cps-carte__zone--active .cps-carte__pastille { opacity: 0; }
.cps-carte__zone--active .cps-carte__code { fill: #fff; opacity: 1; }
.cps-carte__zone--active:hover .cps-carte__forme { fill: #256d23; }

/* ------------------------------------------------------------------ légende */
.cps-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cps-legende__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.86rem;
  color: var(--ink);
  transition: border-color 200ms, background 200ms, color 200ms, transform 200ms;
}
.cps-legende__item b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
  transition: color 200ms;
}
.cps-legende__item:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}
.cps-legende__item:hover b { color: rgba(255, 255, 255, 0.78); }
.cps-legende__item--active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.cps-legende__item--active b { color: rgba(255, 255, 255, 0.8); }
.cps-legende__item--active:hover { border-color: var(--green); background: #256d23; }

/* ------------------------------------------------------------------ mode nuit */
:root[data-theme='nuit'] .cps-carte__plateau {
  background: radial-gradient(120% 90% at 50% 0%, #10293f 0%, #0c2034 60%, #091a2b 100%);
  border-color: var(--line);
}
:root[data-theme='nuit'] .cps-carte__plateau::before {
  background-image:
    linear-gradient(rgba(127, 196, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 196, 255, 0.07) 1px, transparent 1px);
}
:root[data-theme='nuit'] .cps-carte__ombre { fill: #061523; }
:root[data-theme='nuit'] .cps-carte__forme { fill: #17324b; stroke: #24455f; }
:root[data-theme='nuit'] .cps-carte__code { fill: #7fc4ff; opacity: 0.7; }
:root[data-theme='nuit'] .cps-carte__pastille { fill: #7fc4ff; }
:root[data-theme='nuit'] .cps-carte__zone:hover .cps-carte__forme { fill: #0659a7; stroke: #4a9fe8; }
:root[data-theme='nuit'] .cps-legende__item { background: var(--white); border-color: var(--line); }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 700px) {
  .cps-carte { gap: 16px; }
  .cps-carte__plateau { padding: 10px; border-radius: 16px; }
  /* à plat sur petit écran : l’inclinaison mange de la hauteur utile */
  .cps-carte__dessin { transform: none; }
  .cps-carte__plateau:hover .cps-carte__dessin { transform: none; }
  .cps-carte__code { font-size: 26px; }
  .cps-legende {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cps-legende::-webkit-scrollbar { display: none; }
  .cps-legende__item { flex: 0 0 auto; padding: 7px 12px; font-size: 0.8rem; }
}

/* le visiteur qui limite les animations garde une carte fixe */
@media (prefers-reduced-motion: reduce) {
  .cps-carte__dessin,
  .cps-carte__zone,
  .cps-carte__ombre { transition: none; }
  .cps-carte__dessin { transform: none; }
}

/* ===========================================================================
   LES PATRONS SUR LE RADAR
   ---------------------------------------------------------------------------
   Deux jetons posés sur le cadran, à l endroit où Kerian et Tiago
   interviennent. Ils se déplacent au fil de la journée ; un clic ouvre la
   fiche de l intervention en cours.
   =========================================================================== */
.cps-patron {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: left 1400ms cubic-bezier(0.32, 0.72, 0.28, 1),
              top 1400ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

.cps-patron__jeton {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 6px 14px rgba(3, 18, 32, 0.55));
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cps-patron__jeton svg { width: 100%; height: 100%; }
.cps-patron:hover .cps-patron__jeton,
.cps-patron[aria-expanded='true'] .cps-patron__jeton { transform: scale(1.12); }

/* halo qui respire : on repère le jeton sans qu il clignote */
.cps-patron__halo {
  position: absolute;
  top: 21px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: var(--teinte);
  opacity: 0.32;
  animation: cps-patron-onde 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes cps-patron-onde {
  0% { transform: scale(0.7); opacity: 0.4; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.cps-patron__etiquette {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 28, 52, 0.88);
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.cps-patron:hover .cps-patron__etiquette,
.cps-patron[aria-expanded='true'] .cps-patron__etiquette { background: var(--teinte); }

.cps-patron:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }

/* ------------------------------------------------------------------ fiche */
.cps-patron-popin {
  position: absolute;
  z-index: 70;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(4, 22, 40, 0.34);
  color: var(--ink, #102b43);
}
.cps-patron-popin[hidden] { display: none; }

.cps-patron-popin__fermer {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #7b8b9a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.cps-patron-popin__fermer:hover { background: #f1f5f9; color: #102b43; }

.cps-patron-popin__entete {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf4;
}
.cps-patron-popin__pastille {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teinte);
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
}
.cps-patron-popin__entete strong {
  display: block;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.4px;
}
.cps-patron-popin__entete span { font-size: 0.8rem; color: #64788c; line-height: 1.4; }

.cps-patron-popin__faits { margin: 14px 0 0; display: grid; gap: 11px; }
.cps-patron-popin__faits > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.cps-patron-popin__faits dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #94a7b8;
  padding-top: 2px;
}
.cps-patron-popin__faits dd { margin: 0; font-size: 0.89rem; line-height: 1.5; }
.cps-patron-popin__faits b { color: var(--navy, #0659a7); }

.cps-patron-popin__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f4f7fa;
  font-size: 0.79rem;
  line-height: 1.55;
  color: #64788c;
}
.cps-patron-popin__appel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 13px;
  border-radius: 9px;
  background: var(--green, #2f882c);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.cps-patron-popin__appel:hover { background: #256d23; }

:root[data-theme='nuit'] .cps-patron-popin { background: #10293f; color: #e3edf6; }
:root[data-theme='nuit'] .cps-patron-popin__entete { border-color: #22425c; }
:root[data-theme='nuit'] .cps-patron-popin__note { background: #0c2034; color: #a9c2d8; }

@media (max-width: 700px) {
  .cps-patron__jeton { width: 34px; height: 34px; }
  .cps-patron__halo { width: 34px; height: 34px; top: 17px; margin: -17px 0 0 -17px; }
  .cps-patron__etiquette { font-size: 0.66rem; padding: 2px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .cps-patron { transition: none; }
  .cps-patron__halo { animation: none; opacity: 0.25; }
}

/* les photos de l equipe remplacent le jeton dessine */
.cps-patron__jeton img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  background: #10293f;
}
.cps-patron-popin__pastille img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}