/* =============================================================================
   COMPARER DES VILLES OU DES QUARTIERS (refonte v2)
   Page : comparer_v2.php  (/villes-et-quartiers/comparer/)

   Chargé APRÈS /css/v2/home-refonte.css, dont il réutilise les variables
   (--hv3-*) et les composants (.hv3-search, .hv3-btn, .hv3-stars,
   .hv3-cta-band…). Les classes propres à cette page utilisent le préfixe .cmp-.

   Chaque lieu comparé a sa couleur, transmise par la variable --cmp-c
   (posée en style inline par /js/v2/comparer.js).

   SOMMAIRE
   1. Réglages de page
   2. Hero : titre + recherche + lieux sélectionnés
   3. État vide
   4. Résultats : verdict, tableau, en-tête collant
   5. Carte
   6. Publicité
   7. Responsive
   ============================================================================= */


/* =============================================================================
   1. RÉGLAGES DE PAGE
   ============================================================================= */

/* overflow-x: clip (et non hidden) : "hidden" ferait de <main> un conteneur
   de défilement, ce qui empêcherait l'en-tête du tableau de rester collé. */
.cmp-page main.cmp-main {
  background-size: 100% 900px;
  overflow-x: clip;
}

.cmp-page [hidden] { display: none !important; }


/* =============================================================================
   2. HERO
   ============================================================================= */

/* z-index : la liste de suggestions doit passer au-dessus du tableau et de la carte */
.cmp-hero {
  position: relative;
  z-index: 8;
  padding: 26px 0 10px;
}

.cmp-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.cmp-h1 {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.6px;
  color: var(--hv3-navy);
  margin: 0 0 10px;
}

.cmp-h1-accent {
  background-image: linear-gradient(100deg, #0FA99B 0%, #22DAD2 60%, #3BE8B0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hv3-place);
}

.cmp-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--hv3-muted);
  margin: 0 0 22px;
}

.cmp-search-card {
  max-width: 720px;
  margin: 0 auto;
}

.cmp-search .hv3-search-field {
  height: 66px;
  border: 2px solid var(--hv3-place-bright);
  box-shadow: 0 14px 30px -16px rgba(15, 169, 155, .8);
}

.cmp-search .hv3-search-field:focus-within {
  border-color: var(--hv3-place);
  box-shadow: 0 0 0 5px rgba(34, 218, 210, .28), 0 14px 30px -16px rgba(15, 169, 155, .8);
}

.cmp-page .cmp-search .hv3-search-input { font-size: 17px; }
.cmp-page .cmp-search .hv3-search-input:disabled { cursor: not-allowed; background: transparent; }

.cmp-search .hv3-search-btn {
  height: 52px;
  padding: 0 24px;
  font-size: 16px;
}

.cmp-search-plus {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  margin-top: -2px;
}

/* Suggestion déjà présente dans la comparaison */
.hv3-search-option.cmp-is-added { cursor: default; opacity: .6; }
.hv3-search-option.cmp-is-added.is-active { background: var(--hv3-soft); }
.cmp-type-added { color: var(--hv3-place); background: var(--hv3-place-soft); }

/* ---- Lieux sélectionnés ---- */
.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.cmp-chips:empty { display: none; }

.cmp-chip {
  --cmp-c: var(--hv3-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 6px 6px 12px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1.5px solid var(--cmp-c);
  box-shadow: 0 8px 18px -14px rgba(24, 20, 87, .6);
  font-size: 14px;
  font-weight: 700;
  color: var(--hv3-navy);
  animation: cmp-pop .25s ease-out;
}

@keyframes cmp-pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cmp-chip-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cmp-c);
}

.cmp-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-chip-type {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--hv3-muted);
}

.cmp-chip-del {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hv3-navy-soft);
  color: var(--hv3-navy);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--hv3-ease), color var(--hv3-ease);
}

.cmp-chip-del:hover { background: var(--hv3-match); color: #FFFFFF; }

.cmp-chip-loading {
  padding: 8px 14px;
  border-style: dashed;
  border-color: var(--hv3-border);
  color: var(--hv3-muted);
  font-weight: 600;
}

.cmp-chip-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hv3-place-soft);
  border-top-color: var(--hv3-place);
  animation: hv3-spin .7s linear infinite;
}

.cmp-msg {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hv3-match);
}


/* =============================================================================
   3. ÉTAT VIDE (moins de 2 lieux)
   ============================================================================= */

.cmp-empty { padding: 14px 0 72px; }

.cmp-empty-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 24px 26px;
  border-radius: var(--hv3-radius);
  border: 1.5px dashed #D5D3E8;
  background: rgba(255, 255, 255, .7);
  text-align: center;
}

.cmp-empty-cols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.cmp-empty-col {
  display: inline-grid;
  place-items: center;
  width: 92px;
  height: 64px;
  border-radius: var(--hv3-radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--hv3-border);
  box-shadow: var(--hv3-shadow-sm);
}

.cmp-empty-col b {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: var(--hv3-place-grad);
  color: #FFFFFF;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(6, 110, 102, .35);
}

.cmp-empty-col + .cmp-empty-vs + .cmp-empty-col b {
  background-image: var(--hv3-match-grad);
  text-shadow: none;
}

.cmp-empty-vs {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hv3-muted);
}

.cmp-empty-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hv3-navy);
}

.cmp-empty-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cmp-empty-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hv3-muted);
}


/* =============================================================================
   4. RÉSULTATS
   ============================================================================= */

.cmp-results { padding: 10px 0 72px; }

.cmp-verdict {
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 12px 20px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1px solid var(--hv3-border);
  box-shadow: var(--hv3-shadow-sm);
  text-align: center;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--hv3-navy);
}

.cmp-verdict:empty { display: none; }

/* ---- Grille commune à toutes les lignes ----
   1re colonne : libellé ; puis une colonne par lieu (+ "Ajouter un lieu"). */
.cmp-table {
  --cmp-label-w: 200px;
  --cmp-n: 3;
  --cmp-p: 2;
}

.cmp-row {
  display: grid;
  grid-template-columns: var(--cmp-label-w) repeat(var(--cmp-n), minmax(0, 1fr));
  gap: 0 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hv3-border);
}

.cmp-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--hv3-navy);
}

.cmp-label-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--hv3-soft);
  font-size: 17px;
  line-height: 1;
}

/* ---- En-tête collant : une carte par lieu ---- */
.cmp-row-head {
  position: sticky;
  top: var(--cmp-top, 0px);
  z-index: 6;
  align-items: stretch;
  padding: 12px 0;
  border-bottom: 0;
  /*background: rgba(255, 255, 255, .92);*/
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-right: 5px;
}

.cmp-place {
  --cmp-c: var(--hv3-muted);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 14px 14px 12px;
  border-radius: var(--hv3-radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--hv3-border);
  border-top: 4px solid var(--cmp-c);
  box-shadow: var(--hv3-shadow-sm);
}

.cmp-place-del {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hv3-soft);
  color: var(--hv3-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--hv3-ease), color var(--hv3-ease);
}

.cmp-place-del:hover { background: var(--hv3-match); color: #FFFFFF; }

.cmp-place-type {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cmp-c);
}

.cmp-place-name {
  max-width: calc(100% - 22px);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--hv3-navy);
  text-decoration: none;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.cmp-place-name:hover { color: var(--cmp-c); text-decoration: none; }

.cmp-place-sub {
  font-size: 12.5px;
  color: var(--hv3-muted);
  line-height: 1.35;
}

.cmp-place-score {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--hv3-navy);
}

.cmp-place-score b { font-size: 18px; font-weight: 800; }
.cmp-place-score small { margin-left: -4px; color: var(--hv3-muted); font-weight: 600; }
.cmp-place-score.cmp-na { font-size: 12.5px; color: var(--hv3-muted); }

.cmp-place-wins {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hv3-muted);
}

.cmp-place-link {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cmp-c);
  text-decoration: none;
}

.cmp-place-link:hover { color: var(--cmp-c); text-decoration: none; }
.cmp-place-link:hover .hv3-btn-arrow { transform: translateX(3px); }

/* Meilleure note globale */
.cmp-place.is-best {
  box-shadow: 0 0 0 2px var(--cmp-c), var(--hv3-shadow-sm);
}

/* Colonne "Ajouter un lieu" */
.cmp-place-add {
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed #D5D3E8;
  background: rgba(255, 255, 255, .6);
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--hv3-muted);
  cursor: pointer;
  transition: border-color var(--hv3-ease), color var(--hv3-ease);
}

.cmp-place-add:hover { border-color: var(--hv3-place-bright); color: var(--hv3-place); }

.cmp-place-add-ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-image: var(--hv3-place-grad);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* ---- En-tête collé : version compacte (classe posée par le JS) ---- */
.cmp-stuck .cmp-row-head {
  padding: 8px 0;
  box-shadow: 0 10px 18px -16px rgba(24, 20, 87, .5);
  padding-right: 5px;
  background: rgba(255, 255, 255, 1.0);
}

.cmp-stuck .cmp-place {
  padding: 8px 12px;
  gap: 0;
  box-shadow: unset;
}

.cmp-stuck .cmp-place-type,
.cmp-stuck .cmp-place-sub,
.cmp-stuck .cmp-place-wins,
.cmp-stuck .cmp-place-link,
.cmp-stuck .cmp-place-score .hv3-stars { display: none; }

.cmp-stuck .cmp-place-name {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-stuck .cmp-place-score { margin-top: 0; }
.cmp-stuck .cmp-place-score b { font-size: 15px; }
.cmp-stuck .cmp-place-del { top: 50%; transform: translateY(-50%); }

.cmp-stuck .cmp-place-add { flex-direction: row; font-size: 13px; }
.cmp-stuck .cmp-place-add-ico { width: 24px; height: 24px; font-size: 16px; }

/* ---- Groupes de lignes ---- */
.cmp-group { margin-top: 30px; }

.cmp-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hv3-navy-soft);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--hv3-navy);
}

.cmp-group-title small {
  font-size: 13px;
  font-weight: 600;
  color: var(--hv3-muted);
}

.cmp-group-ico { font-size: 20px; line-height: 1; }

/* ---- Cellules ---- */
.cmp-cell {
  --cmp-c: var(--hv3-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
}

.cmp-cell-tag { display: none; }

.cmp-val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hv3-navy);
  font-variant-numeric: tabular-nums;
}

.cmp-val small {
  font-size: 12px;
  font-weight: 600;
  color: var(--hv3-muted);
}

.cmp-na .cmp-val { color: #B9BBD3; font-weight: 600; }

.cmp-meter {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background: #EDEDF5;
  overflow: hidden;
}

.cmp-meter > span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--cmp-c);
  opacity: .55;
  transform-origin: left center;
  animation: hv3-grow .8s cubic-bezier(.2, .7, .3, 1) backwards;
}

/* Meilleure note de la ligne */
.cmp-cell.is-best {
  background: var(--hv3-soft);
  background: color-mix(in srgb, var(--cmp-c) 9%, #FFFFFF);
}

.cmp-cell.is-best .cmp-val { color: var(--cmp-c); font-weight: 800; }
.cmp-cell.is-best .cmp-meter > span { opacity: 1; }

.cmp-best { font-size: 13px; }

.cmp-cell-fig .cmp-val { font-size: 17px; }


/* =============================================================================
   5. CARTE
   ============================================================================= */

.cmp-group-map { margin-top: 40px; }
.cmp-group-map .cmp-group-title { margin-bottom: 16px; }

/* z-index: 0 crée un contexte d'empilement : les calques Leaflet (z-index
   400 à 1000) ne passent ni sur le header fixe ni sur l'en-tête collant. */
.cmp-map-card {
  position: relative;
  z-index: 0;
  padding: 8px;
  border-radius: calc(var(--hv3-radius) + 8px);
  background: #FFFFFF;
  border: 1px solid var(--hv3-border);
  box-shadow: var(--hv3-shadow);
}

.cmp-map {
  width: 100%;
  height: 460px;
  border-radius: var(--hv3-radius);
  overflow: hidden;
  background: #EEF2F1;
  font-family: inherit;
}

.cmp-map.leaflet-fullscreen-on,
.cmp-map:fullscreen { border-radius: 0; }

.cmp-page .cmp-map-tip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--hv3-navy);
  border-radius: 8px;
}


/* =============================================================================
   6. PUBLICITÉ
   ============================================================================= */

.cmp-ads {
  margin: 0 auto 56px;
  padding: 12px;
  max-width: 970px;
  border-radius: var(--hv3-radius-sm);
  background: var(--hv3-soft);
  border: 1px solid var(--hv3-border);
  text-align: center;
}

.cmp-ads-title {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hv3-muted);
}


/* =============================================================================
   7. RESPONSIVE
   ============================================================================= */

@media (max-width: 991px) {
  .cmp-table { --cmp-label-w: 150px; }
  .cmp-row { gap: 0 10px; }
  .cmp-label { font-size: 14px; gap: 8px; }
  .cmp-label-ico { width: 30px; height: 30px; font-size: 15px; }
  .cmp-place { padding: 12px 10px 10px; }
  .cmp-place-name { font-size: 15.5px; }
  .cmp-map { height: 400px; }
}

/* Mobile : le libellé passe au-dessus de sa ligne, les lieux se partagent
   toute la largeur ; le bouton "Ajouter un lieu" est masqué (le champ de
   recherche est juste au-dessus). */
@media (max-width: 767px) {
  .cmp-page main.cmp-main { background-size: 100% 700px; }

  .cmp-hero { padding: 18px 0 6px; }
  .cmp-h1 { font-size: 26px; letter-spacing: -.3px; }
  .cmp-sub { font-size: 14.5px; margin-bottom: 16px; }

  .cmp-search .hv3-search-field { height: 58px; padding-left: 14px; }
  .cmp-search .hv3-search-btn { height: 44px; padding: 0 14px; }
  .cmp-search .hv3-search-btn-txt { display: none; }
  .cmp-search-plus { font-size: 24px; }

  .cmp-chip { font-size: 13px; }
  .cmp-chip-type { display: none; }

  .cmp-empty { padding-bottom: 48px; }
  .cmp-empty-card { padding: 22px 16px 20px; }
  .cmp-empty-title { font-size: 15px; }

  .cmp-results { padding-bottom: 48px; }

  .cmp-verdict {
    border-radius: var(--hv3-radius-sm);
    font-size: 14px;
    padding: 10px 14px;
  }

  .cmp-row {
    grid-template-columns: repeat(var(--cmp-p), minmax(0, 1fr));
    gap: 6px 6px;
    padding: 10px 0;
  }

  .cmp-label { grid-column: 1 / -1; font-size: 13.5px; }
  .cmp-label-head,
  .cmp-place-add,
  .cmp-cell-spacer { display: none; }

  .cmp-label-ico { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }

  .cmp-row-head { padding: 8px 0; }

  .cmp-place {
    padding: 9px 8px 8px;
    border-top-width: 3px;
    gap: 2px;
  }
  /* Le nom du lieu est déjà un lien vers sa fiche */
  .cmp-place-type,
  .cmp-place-sub,
  .cmp-place-wins,
  .cmp-place-link,
  .cmp-place-score .hv3-stars { display: none; }
  .cmp-place-name { font-size: 13px; max-width: calc(100% - 16px); }
  .cmp-place-score { margin-top: auto; padding-top: 4px; gap: 4px; }
  .cmp-place-score b { font-size: 15px; }
  .cmp-place-del { top: 5px; right: 5px; width: 20px; height: 20px; font-size: 14px; }

  .cmp-cell { padding: 6px 7px; gap: 5px; }
  .cmp-val { font-size: 14.5px; gap: 4px; flex-wrap: wrap; }
  .cmp-cell-fig .cmp-val { font-size: 14.5px; }
  .cmp-val small { font-size: 10.5px; }
  .cmp-meter { height: 6px; }

  /* Repère couleur du lieu dans chaque cellule */
  .cmp-cell-tag { display: block; line-height: 0; }
  .cmp-cell-tag { font-size: 0; }
  .cmp-cell-tag .cmp-chip-dot { display: inline-block; width: 8px; height: 8px; }

  .cmp-group { margin-top: 24px; }
  .cmp-group-title { font-size: 17px; }

  .cmp-map-card { padding: 5px; border-radius: calc(var(--hv3-radius-sm) + 5px); }
  .cmp-map { height: min(64vh, 380px); border-radius: var(--hv3-radius-sm); }

  .cmp-ads { margin-bottom: 40px; }
}