/* carte-poles.css — style du composant global « carte des pôles » (js/carte-poles.js, CLAUDE.md §15).
   AUTONOME : toutes les valeurs sont des variables --cp-* posées sur .cp (aucun token de page requis : contact.html ne charge pas
   global.css). Seule la police Poppins est attendue de la page. Ne rien écrire pour la carte dans un CSS de page. */

.cp{
  --cp-navy:#1c1c36;
  --cp-blue:#668CC2;
  --cp-lav:#757baf;
  --cp-reg:#c8d8e8;            /* région */
  --cp-reg-hi:#92BAD6;         /* région survolée / choisie */
  --cp-label:#9AB3C8;
  --cp-text:#4A6785;
  --cp-line:rgba(117,123,175,.25);
  --cp-sep:rgba(168,173,229,.4);
  --cp-director-bg:rgba(146,186,214,.25);
  --cp-photo-bg:#D8E4EC;
  --cp-photo-text:#8AA0B8;
  display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start;
  font-family:'Poppins',system-ui,sans-serif;font-weight:400;line-height:1.6;   /* figés ici : le body de contact.html est à 300 */
}
.cp [hidden]{display:none!important}

/* ── carte ── */
.cp-map{min-width:0;background:#fff;border-radius:20px;padding:24px}
.cp-svg{width:100%;height:auto;display:block}

/* régions */
.cp-reg{fill:var(--cp-reg);stroke:#fff;stroke-width:.7;transition:fill .15s;cursor:pointer}
.cp-reg:hover,.cp-reg.is-sel{fill:var(--cp-reg-hi)}
.cp-reg.no-pole{pointer-events:none}   /* région sans pôle : ni survol, ni clic, ni curseur */

/* épingles */
.cp-pin{cursor:pointer}
.cp-pin:focus{outline:none}
.cp-pin-body{fill:var(--cp-navy);stroke:#fff;stroke-width:1.2;stroke-linejoin:round;transition:fill .15s}
.cp-pin-dot{fill:#fff;pointer-events:none}
.cp-pin-hit{fill:transparent}
.cp-pin:focus-visible .cp-pin-hit{fill:rgba(28,28,54,.06);stroke:var(--cp-navy);stroke-width:2}   /* marine : ≥ 3:1 sur la région, la région choisie et le blanc */
.cp-pin.is-active .cp-pin-body{fill:var(--cp-blue)}
.cp-pin-lbl{font-size:7px;font-weight:600;fill:var(--cp-navy);pointer-events:none;font-family:'Poppins',system-ui,sans-serif}   /* unités du SVG, pas des px */

/* ── colonne de droite ── */
.cp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:var(--cp-sticky-top,96px)}   /* 96 = en-tête fixe (65) + 31. Une page qui a aussi un fil d'Ariane fixe pose --cp-sticky-top:128px sur le conteneur (cf. contact.css) */

.cp-detail{background:#fff;border:1px solid var(--cp-line);border-radius:20px;padding:28px;min-height:260px}
.cp-empty{display:flex;align-items:center;justify-content:center;height:200px;font-size:var(--ty-xs,16px);color:var(--cp-label);text-align:center;line-height:1.65;padding:0 16px}
.cp-region{font-size:var(--ty-xs,16px);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--cp-label);margin-bottom:12px}
.cp-city{font-size:var(--ty-h3-size,24px);font-weight:800;color:var(--cp-navy);margin-bottom:20px;line-height:1.2}
.cp-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--cp-sep)}
.cp-row{display:grid;grid-template-columns:84px 1fr;gap:8px;align-items:baseline}
.cp-lbl{font-size:var(--ty-xs,16px);font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--cp-label)}
.cp-val{font-size:var(--ty-xs,16px);color:var(--cp-text);min-width:0;overflow-wrap:anywhere}
.cp-val a{color:var(--cp-text);text-decoration:none}
.cp-val a:hover{color:var(--cp-lav)}

/* « Votre directeur de région » : volontairement séparé des coordonnées du pôle */
.cp-director{background:var(--cp-director-bg);border-radius:20px;padding:22px}
.cp-director-label{font-size:var(--ty-xs,16px);font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--cp-lav);margin-bottom:14px}
.cp-director-row{display:flex;align-items:center;gap:14px}
.cp-director-photo{width:56px;height:56px;border-radius:50%;background:var(--cp-photo-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cp-director-photo img{width:100%;height:100%;object-fit:cover}
.cp-director-photo span{font-size:9px;font-weight:600;color:var(--cp-photo-text);text-align:center;line-height:1.25;padding:0 4px}
.cp-director-name{font-size:var(--ty-body,16px);font-weight:700;color:var(--cp-navy);line-height:1.3}
.cp-director-title{font-size:var(--ty-xs,16px);color:var(--cp-text);margin-top:2px}

/* bouton (look de la carte de qui-sommes-nous.html, volontairement propre au composant) */
.cp-btn{display:inline-block;background:var(--cp-navy);color:#fff;border-radius:8px;padding:11px 22px;font-size:var(--ty-xs,16px);font-weight:600;text-decoration:none;transition:background .15s}
.cp-btn:hover{background:var(--cp-lav)}
.cp-btn:focus-visible{outline:3px solid var(--cp-blue);outline-offset:2px}

/* ── petits écrans : la colonne de droite passe sous la carte ── */
@media(max-width:960px){
  .cp{grid-template-columns:1fr;gap:24px}
  .cp-side{position:static}
}
@media(max-width:640px){
  .cp-map{padding:8px}
  .cp-detail{padding:22px}
  .cp-director{padding:18px}
}
@media(max-width:480px){
  .cp-row{grid-template-columns:1fr;gap:2px}   /* étiquette au-dessus de la valeur : l'e-mail tient sur une ligne */
}