/* =========================================================================
   NextToYourPlace — pro-ui.css
   Design tokens + composants PARTAGÉS des surfaces PROTO du marketplace.
   Chargé sur toutes les pages proto (pro_map, pro_espace, pro_inscription,
   pro_landing, pro_lead) par _base.js quand body_class commence par
   « proto » ou vaut « pro-landing ».

   OBJECTIF (directive JP 2026-07-03) : DÉDUPLIQUER la palette + les
   composants que chaque page proto ré-inlinait (mêmes hex, mêmes boutons,
   mêmes cards, mêmes bandeaux) SANS changer le rendu. Tout est verrouillé
   à ISO-VISUEL : les tokens valent EXACTEMENT les littéraux que les pages
   utilisaient déjà. On ne renomme AUCUNE classe consommée par le JS
   (data-choose, .pro-card, .btn-primary…). Les pages référencent
   désormais ces variables au lieu de re-coder les hex.
   ========================================================================= */

/* ==================== TOKENS ==================== */
/* Palette NTYP telle qu'employée par les protos (littéraux d'origine, pour
   garantir l'iso-visuel — on n'aligne PAS sur les color-mix() de
   colors_and_type.css qui produiraient des teintes légèrement différentes). */
:root {
  --ntyp-paper:        #F5EFE0;  /* fond marque / texte sur aplats sombres */
  --ntyp-forest:       #2D4A3A;  /* vert forêt — accents, boutons secondaires */
  --ntyp-forest-deep:  #26402f;  /* forêt foncé (hover) */
  --ntyp-terracotta:   #C4582D;  /* terracotta — CTA primaires, accents */
  --ntyp-terracotta-deep: #a8461f;
  --ntyp-ink:          #1A1A1A;  /* encre — titres, texte fort */
  --ntyp-sepia:        #6F6960;  /* texte muted / secondaire (dit « sepia » proto) */
  --ntyp-border:       #E0D9C7;  /* bordure claire standard */
  --ntyp-border-input: #D8D0BD;  /* bordure des champs de saisie */
  --ntyp-paper-tint:   rgba(245,239,224,0.45); /* fond card léger (pro_espace) */

  /* Rayons — alignés sur l'échelle éditoriale CARRÉE du site (colors_and_type.css).
     Avant : 8/12/14px arrondis (look SaaS). Après : identité letterpress NTYP. */
  --ntyp-r-sm: var(--radius-1);  /* 2px — boutons, petits contrôles */
  --ntyp-r-md: var(--radius-2);  /* 4px — cartes, champs */
  --ntyp-r-lg: var(--radius-3);  /* 8px — grands conteneurs (carte, encart « choisi ») */

  /* Typo */
  --ntyp-font-display: Spectral, serif;
}

/* ==================== SÉLECTEUR DE PORTÉE ====================
   Les composants partagés sont scopés aux bodies proto pour ne JAMAIS
   fuiter sur les pages prod (commune, landing, spokes…). */

/* ---------- Bouton primaire (terracotta plein) ----------
   Défini à l'identique dans pro_espace.js ET pro_inscription.js. Une seule
   source ici. Les tailles/polices diffèrent légèrement par page : chaque
   page peut surcharger APRÈS (sa règle inline gagne par cascade), mais la
   base commune vit ici. */
.pro-espace .btn-primary,
.pro-claim .btn-primary {
  background: var(--ntyp-terracotta);
  color: var(--ntyp-paper);
  border: 1.5px solid var(--ntyp-terracotta);
  border-radius: var(--ntyp-r-sm);
  font-family: var(--font-display, inherit);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease, ease), box-shadow var(--dur-1, 120ms) var(--ease, ease), transform var(--dur-1, 120ms) var(--ease, ease);
}
.pro-espace .btn-primary:hover:not(:disabled),
.pro-claim .btn-primary:hover:not(:disabled) { background: var(--ntyp-terracotta-deep); border-color: var(--ntyp-terracotta-deep); box-shadow: var(--shadow-1); transform: translate(-1px, -1px); }
.pro-espace .btn-primary:active:not(:disabled),
.pro-claim .btn-primary:active:not(:disabled) { transform: translate(0, 0); box-shadow: none; }
.pro-espace .btn-primary:disabled,
.pro-claim .btn-primary:disabled { opacity: .42; cursor: default; }

/* ---------- Bouton secondaire (forêt plein) ---------- */
.pro-espace .btn-secondary,
.pro-claim .btn-secondary {
  background: var(--ntyp-forest);
  color: var(--ntyp-paper);
  border: 1.5px solid var(--ntyp-forest);
  border-radius: var(--ntyp-r-sm);
  font-family: var(--font-display, inherit);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease, ease), box-shadow var(--dur-1, 120ms) var(--ease, ease), transform var(--dur-1, 120ms) var(--ease, ease);
}
.pro-espace .btn-secondary:hover:not(:disabled),
.pro-claim .btn-secondary:hover:not(:disabled) { background: var(--ntyp-forest-deep); border-color: var(--ntyp-forest-deep); box-shadow: var(--shadow-1); transform: translate(-1px, -1px); }
.pro-espace .btn-secondary:active:not(:disabled),
.pro-claim .btn-secondary:active:not(:disabled) { transform: translate(0, 0); box-shadow: none; }

/* ---------- Message d'état (claim-msg : info / err) ----------
   Identique dans pro_espace.js et pro_inscription.js. */
.pro-espace .claim-msg,
.pro-claim .claim-msg { min-height: 18px; }
.pro-espace .claim-msg--err,
.pro-claim .claim-msg--err { color: var(--ntyp-terracotta); }
.pro-espace .claim-msg--info,
.pro-claim .claim-msg--info { color: var(--ntyp-forest); }


/* === pro-map layout (déplacé de pro_map.js pour l'overlay marketplace) === */
.pro-map .pro-map__wrap { max-width:1180px; margin:0 auto; padding:20px 16px 40px; }
  .pro-map .pro-map__head h1 { font-family:var(--ntyp-font-display); color:var(--ntyp-ink); margin:0 0 6px; font-size:26px; }
  .pro-map .pro-map__note { color:var(--ntyp-sepia); font-size:14px; margin:0 0 18px; line-height:1.5; }
  .pro-map .pro-map__note strong { color:var(--ntyp-forest); }
  .pro-map .pro-map__grid { display:grid; grid-template-columns:60% 40%; gap:18px; align-items:start; }
  .pro-map .pro-map__map { height:560px; width:100%; border:1px solid var(--ntyp-border); border-radius:var(--ntyp-r-lg); overflow:hidden; background:var(--paper-ridge); }
  .pro-map .pro-map__listcol { display:flex; flex-direction:column; min-width:0; }
  .pro-map .pro-map__listhead { margin:0 0 10px; }
  .pro-map .pro-map__count { font-family:var(--ntyp-font-display); font-size:17px; color:var(--ntyp-ink); margin:0 0 4px; }
  .pro-map .pro-map__merit { font-size:12px; color:var(--ntyp-sepia); margin:0; line-height:1.45; }
  .pro-map .pro-map__merit a { color:var(--ntyp-forest); }
  .pro-map .pro-map__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-height:560px; overflow-y:auto; }
  .pro-map .pro-card { border:1px solid var(--ntyp-border); border-radius:var(--ntyp-r-md); padding:13px 15px; background:var(--paper); cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; }
  .pro-map .pro-card:hover, .pro-map .pro-card.is-active { border-color:var(--ntyp-forest); box-shadow:var(--shadow-1); transform:translate(-1px,-1px); }
  .pro-map .pro-card.is-partner { border-left:3px solid var(--ntyp-terracotta); }
  .pro-map .pro-card.is-widened { background:var(--bg-alt); border-style:dashed; }
  .pro-map .pro-card.is-widened .pro-card__rank { background:rgba(111,105,96,0.14); color:var(--ntyp-sepia); }
  /* Séparateur de section dans la liste (« Autour de chez vous » / « Un peu plus loin »). */
  .pro-map .pro-map__section { list-style:none; display:flex; align-items:baseline; gap:8px; padding:6px 2px 2px; border-top:1px solid var(--ntyp-border); margin-top:4px; }
  .pro-map .pro-map__section:first-child { border-top:none; margin-top:0; }
  .pro-map .pro-map__section-t { font-family:var(--ntyp-font-display); font-size:13px; font-weight:600; color:var(--ntyp-forest); text-transform:uppercase; letter-spacing:.04em; }
  .pro-map .pro-map__section-s { font-size:12px; color:var(--ntyp-sepia); }
  .pro-map .pro-card__badge--widen { color:var(--ntyp-sepia); background:rgba(111,105,96,0.10); border-color:rgba(111,105,96,0.28); }
  .pro-map .pro-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .pro-map .pro-card__name { font-family:var(--ntyp-font-display); font-size:16px; margin:0; color:var(--ntyp-ink); }
  .pro-map .pro-card__rank { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:rgba(45,74,58,0.10); color:var(--ntyp-forest); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .pro-map .pro-card__badge { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ntyp-terracotta); background:rgba(196,88,45,0.10); border:1px solid rgba(196,88,45,0.28); border-radius:6px; padding:2px 6px; white-space:nowrap; }
  .pro-map .pro-card__covers { color:var(--ntyp-forest); font-size:13px; margin:6px 0 4px; }
  .pro-map .pro-card__meta { color:var(--ntyp-sepia); font-size:12.5px; margin:0 0 6px; }
  .pro-map .pro-card__cert { display:inline-block; background:rgba(45,74,58,0.08); border-radius:5px; padding:1px 6px; margin:0 3px 3px 0; font-size:11.5px; color:var(--ntyp-ink); }
  .pro-map .pro-card__solicit { color:var(--ntyp-sepia); font-size:12.5px; margin:6px 0 0; }
  .pro-map .pro-card__cta { margin-top:8px; background:var(--ntyp-terracotta); color:var(--ntyp-paper); border:none; border-radius:var(--ntyp-r-sm); padding:7px 12px; font-family:Georgia,serif; font-size:12.5px; font-weight:600; cursor:pointer; }
  .pro-map .pro-map__empty { color:var(--ntyp-sepia); font-size:14px; padding:8px 0; }
  /* Écran de confirmation « demande envoyée à <pro> » = carte artisan riche (choix de l'artisan). */
  .pro-map .pro-map__chosen { list-style:none; padding:22px 20px; border:1px solid var(--ntyp-forest); border-radius:var(--ntyp-r-md); background:var(--forest-wash); }
  .pro-map .pro-map__chosen-head { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
  .pro-map .pro-map__chosen-check { flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--ntyp-forest); color:var(--ntyp-paper); font-size:20px; line-height:40px; text-align:center; margin:0; }
  .pro-map .pro-map__chosen-lead { font-family:var(--ntyp-font-display); font-size:16px; color:var(--ntyp-ink); margin:0; line-height:1.3; }
  .pro-map .pro-map__chosen-card { background:var(--paper); border:1px solid var(--ntyp-border); border-left:3px solid var(--ntyp-terracotta); border-radius:var(--ntyp-r-md); padding:14px 16px; margin:0 0 12px; }
  .pro-map .pro-map__chosen-name { font-family:var(--ntyp-font-display); font-size:18px; font-weight:600; color:var(--ntyp-ink); margin:0 0 3px; }
  .pro-map .pro-map__chosen-metier { color:var(--ntyp-terracotta); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin:0 0 8px; }
  .pro-map .pro-map__chosen-zone { color:var(--ntyp-forest); font-size:13.5px; margin:0 0 4px; display:flex; align-items:baseline; gap:6px; }
  .pro-map .pro-map__chosen-zone svg { flex:0 0 auto; align-self:center; }
  .pro-map .pro-map__chosen-sub { color:var(--ntyp-sepia); font-size:13.5px; line-height:1.5; margin:0; }
  /* Vignette (popup Leaflet) du pro. */
  .pro-map .pro-zone-lbl { background:var(--ntyp-terracotta); color:var(--ntyp-paper); border:none; box-shadow:0 1px 4px rgba(0,0,0,0.3); font-family:Georgia,serif; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:var(--ntyp-r-sm); white-space:nowrap; }
  .pro-map .pro-zone-lbl::before { display:none; }
  .pro-map .pro-pin-pro { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.3); }
  .pro-map .pro-pin-pro span { transform:rotate(45deg); color:#fff; font-size:12px; font-weight:700; }
  /* Épingle « élargi » (haversine) : atténuée + contour pointillé pour la distinguer. */
  .pro-map .pro-pin-pro--widen { opacity:0.78; border-style:dashed; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
  .leaflet-popup-content .pro-vig__widen { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ntyp-sepia); background:rgba(111,105,96,0.10); border:1px solid rgba(111,105,96,0.28); border-radius:6px; padding:2px 6px; margin:4px 0 0; }
  .leaflet-popup-content .pro-vig__name { font-family:var(--ntyp-font-display); font-size:16px; margin:0 0 2px; color:var(--ntyp-ink); }
  .leaflet-popup-content .pro-vig__covers { color:var(--ntyp-forest); font-size:13px; margin:4px 0; }
  .leaflet-popup-content .pro-vig__meta { color:var(--ntyp-sepia); font-size:12.5px; margin:2px 0; }
  .leaflet-popup-content .pro-vig__badge { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ntyp-terracotta); background:rgba(196,88,45,0.10); border:1px solid rgba(196,88,45,0.28); border-radius:6px; padding:2px 6px; margin:4px 0 0; }
  .leaflet-popup-content .pro-vig__cta { margin-top:8px; display:inline-block; background:var(--ntyp-terracotta); color:var(--ntyp-paper); border:none; border-radius:var(--ntyp-r-sm); padding:7px 12px; font-family:Georgia,serif; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; }
  @media (max-width:860px) {
    .pro-map .pro-map__grid { grid-template-columns:1fr; }
    .pro-map .pro-map__map { height:380px; }
    .pro-map .pro-map__list { max-height:none; }
  }