/* ============================================================
   ZOOM BALADE - Design moderne
   À inclure dans _zoom_simple.php via :
   <link rel="stylesheet" href="css/zoom_simple_modern.css">
   ============================================================ */

/* --- Variables ------------------------------------------- */
:root {
  --rl-green:      #008f88;
  --rl-green-dark: #006b65;
  --rl-yellow:     #f39200;
  --rl-brown:      #483515;
  --rl-bg:         #f4f8f7;
  --rl-border:     #d8ecea;
  --rl-radius:     14px;
  --rl-shadow:     0 4px 24px rgba(0,111,101,.10);
}

/* --- Layout général -------------------------------------- */
.detailprod {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px 40px;
}

/* --- Bouton retour --------------------------------------- */
.historyback { margin-bottom: 18px; padding: 0; }
.historyback a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rl-green);
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s;
}
.historyback a:hover { background: var(--rl-green-dark); }

/* --- Titre principal ------------------------------------- */
.detailprod h1 {
  font-family: 'Gagalin', Arial, sans-serif;
  font-size: 2rem;
  color: var(--rl-brown);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: .5px;
}

/* === GRILLE PRINCIPALE ================================== */
.zoom-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 28px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.zoom-left  { -webkit-box-flex: 1; -ms-flex: 1 1 340px; flex: 1 1 340px; min-width: 0; }
.zoom-right { width: 220px; -ms-flex-negative: 0; flex-shrink: 0; }

/* === CARTE CARACTÉRISTIQUES ============================= */
.zoom-caracteristiques {
  background: var(--rl-bg);
  border: 1.5px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.zoom-caracteristiques h2 {
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rl-green);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rl-border);
}

/* Grille des caractéristiques avec icônes */
.zoom-carac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zoom-carac-grid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  text-transform: none;
  border-left: none;
  padding-left: 0;
}
.zoom-carac-grid li .zc-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid var(--rl-border);
  font-size: 15px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.zoom-carac-grid li .zc-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}
.zoom-carac-grid li .zc-value {
  font-weight: 700;
  color: var(--rl-brown);
  font-size: 13px;
  display: block;
  line-height: 1.2;
}
.zoom-carac-grid li.full-width {
  grid-column: 1 / -1;
}

/* === COLONNE DROITE : prix + actions =================== */
.zoom-actions {
  background: #fff;
  border: 1.5px solid var(--rl-border);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  padding: 20px 18px;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.zoom-prix {
  font-size: 2rem;
  font-weight: 900;
  color: var(--rl-yellow);
  margin-bottom: 4px;
  line-height: 1;
}
.zoom-prix-label {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 18px;
  display: block;
}

/* Bouton aperçu */
.btn-apercu {
  display: block;
  width: 100%;
  padding: 12px 0;
  border-radius: 10px;
  background: var(--rl-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .16s, -webkit-transform .12s;
  transition: background .16s, transform .12s;
}
.btn-apercu:hover { background: var(--rl-green-dark); -webkit-transform: translateY(-1px); transform: translateY(-1px); }

/* Bouton panier */
.btn-panier {
  display: block;
  width: 100%;
  padding: 12px 0;
  border-radius: 10px;
  background: var(--rl-yellow);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .16s, -webkit-transform .12s;
  transition: background .16s, transform .12s;
}
.btn-panier:hover { background: #d97d00; -webkit-transform: translateY(-1px); transform: translateY(-1px); }

/* Étoiles */
.zoom-etoiles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
}
.zoom-etoiles img { height: 18px; width: 18px; }

/* === GALERIE PHOTOS ===================================== */
.zoom-galerie { margin-top: 4px; }

/*
 * Cadre photo : s'adapte à toutes les tailles.
 * - Petite photo (150px) : centrée sur fond décoratif, sans étirement
 * - Grande photo (1200px) : pleine largeur, recadrée proprement
 */
.zoom-photo-frame {
  width: 100%;
  border-radius: var(--rl-radius);
  background: linear-gradient(135deg, #e0f2ef 0%, #c8e8e4 100%);
  border: 1.5px solid var(--rl-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--rl-shadow);
  min-height: 160px;
  max-height: 340px;
}

/* Petite photo (< 400px) : on ne l'étire pas */
.zoom-photo-frame img.zoom-photo-small {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Grande photo (>= 400px) : on remplit le cadre */
.zoom-photo-frame img.zoom-photo-large {
  width: 100%;
  max-height: 340px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Miniatures */
.zoom-photos-thumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.zoom-thumb-frame {
  width: calc(33.333% - 6px);
  height: 80px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e0f2ef 0%, #c8e8e4 100%);
  border: 2px solid transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
}
.zoom-thumb-frame:hover { border-color: var(--rl-green); }
.zoom-thumb-frame img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  display: block;
}

/* === TEXTE DESCRIPTION ================================== */
.zoom-description {
  background: #fff;
  border: 1.5px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: 22px 24px;
  margin-top: 22px;
  line-height: 1.75;
  color: #333;
  font-size: 15px;
}

/* === BANNIÈRE PACK ====================================== */
.zoom-pack-banner {
  background: linear-gradient(135deg, #e8f5f0 0%, #d4ede8 100%);
  border: 1.5px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: 16px 20px;
  margin-top: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.zoom-pack-banner img {
  height: 60px;
  width: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.zoom-pack-banner p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--rl-green-dark);
  font-weight: 600;
  font-style: italic;
}
.zoom-pack-banner a.btn-pack {
  background: var(--rl-green);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.zoom-pack-banner a.btn-pack:hover { background: var(--rl-green-dark); }

/* === LIGHTBOX simple ==================================== */
.zl-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.85);
  z-index: 9999;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.zl-overlay.open { display: -webkit-box; display: -ms-flexbox; display: flex; }
.zl-overlay img {
  max-width: 92%;
  max-height: 88vh;
  border-radius: 10px;
  display: block;
}
.zl-close {
  position: absolute;
  top: 18px; right: 24px;
  color: #fff;
  font-size: 38px;
  cursor: pointer;
  line-height: 1;
  font-weight: 300;
}

/* === RESPONSIVE ========================================= */
@media (max-width: 767px) {

  /* Grille principale : colonne unique */
  .zoom-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
  }

  /* Bloc prix/actions remonte EN PREMIER sur mobile */
  .zoom-right {
    width: 100%;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .zoom-actions {
    position: static;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    text-align: left;
  }
  .zoom-prix { font-size: 1.6rem; }
  .zoom-prix-label { display: none; }
  .btn-apercu, .btn-panier {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 120px;
    flex: 1 1 120px;
    padding: 11px 8px;
    font-size: 13px;
    margin-bottom: 0;
    text-align: center;
  }

  /* Caractéristiques : 1 colonne */
  .zoom-carac-grid { grid-template-columns: 1fr; }
  .zoom-carac-grid li.full-width { grid-column: 1; }

  /* Titre */
  .detailprod h1 { font-size: 1.4rem; }

  /* Photo */
  .zoom-photo-frame { min-height: 120px; max-height: 240px; }
  .zoom-thumb-frame { height: 65px; }

  /* Description */
  .zoom-description { padding: 16px; font-size: 14px; }

  /* Bannière pack */
  .zoom-pack-banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
  }
  .zoom-pack-banner img {
    height: auto;
    max-width: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
  }
  .zoom-pack-banner p { display: none; } /* masqué : déjà dans l'image */
  .btn-pack { width: 100%; text-align: center; }

  /* Anti-débordement */
  .detailprod, .zoom-left, .zoom-right { max-width: 100%; overflow-x: hidden; }
}


/* ============================================================
   LISTE DES BALADES - Cartes modernes
   ============================================================ */

#resultats { max-width: 860px; margin: 0 auto; padding: 0 12px; }

/* --- Carte balade ---------------------------------------- */
.bl-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  background: #fff;
  border: 1.5px solid #dff0ed;
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(0,111,101,.08);
  margin: 16px 0;
  overflow: hidden;
  transition: box-shadow .18s, -webkit-transform .18s;
  transition: box-shadow .18s, transform .18s;
}
.bl-card:hover {
  box-shadow: 0 8px 28px rgba(0,111,101,.14);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* Carte pack : légèrement différente */
.bl-card--pack {
  border-color: #f39200;
  background: linear-gradient(135deg, #fffdf5 0%, #fff8e8 100%);
}

/* --- Photo ---------------------------------------- */
.bl-card__photo {
  width: 150px;
  height: 150px;
  min-width: 150px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #e0f2ef;
  overflow: hidden;
}
/* Carré uniforme : portrait ou paysage, toujours bien cadré */
.bl-card__photo img {
  width: 150px;
  height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}

/* --- Badge pack ---------------------------------------- */
.bl-card__photo--pack {
  background: linear-gradient(135deg, #008f88 0%, #005f5b 100%);
  width: 150px;
  min-width: 150px;
  min-height: 120px;
}
.bl-pack-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  padding: 16px 8px;
  gap: 2px;
}
.bl-pack-badge__num {
  font-size: 3rem;
  font-weight: 900;
  color: #fbb900;
  line-height: 1;
  display: block;
}
.bl-pack-badge__label {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: block;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bl-pack-badge__sub {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- Corps ---------------------------------------- */
.bl-card__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Ligne du haut : titre+sous-titre à gauche, prix+bouton à droite */
.bl-card__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
}
.bl-card__top-left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
.bl-card__top-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Titre */
.bl-card__title {
  font-size: .95rem;
  font-weight: 800;
  color: #008f88;
  margin: 0;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bl-card__title a { color: inherit !important; text-decoration: none; }
.bl-card__title a:hover { text-decoration: underline; }

/* Sous-titre */
.bl-card__subtitle { font-size: 13px; font-weight: 600; color: #483515; margin: 0; }

/* Pilules */
.bl-card__pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 2px 0;
}
.bl-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.bl-pill--time { background: #e8f5f0; color: #006b65; border: 1px solid #c8e8e4; }
.bl-pill--dist { background: #fff3e0; color: #b36200; border: 1px solid #ffe0b2; }

/* Intro */
.bl-card__intro {
  font-size: 13px;
  color: #555;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prix dans top-right */
.bl-card__prix { font-size: 1rem; font-weight: 900; color: #f39200; white-space: nowrap; }
.bl-prix--fi { font-size: 11px; font-weight: 700; color: #e00; text-align: right; }

/* Footer masqué - prix+bouton remontés dans top-right */
.bl-card__footer { display: none; }


/* Boutons */
.bl-btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 8px;
  background: #008f88;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.bl-btn:hover { background: #006b65; }
.bl-btn--red { background: #e00; }
.bl-btn--red:hover { background: #b00; }

/* --- Responsive ----------------------------------------- */
@media (max-width: 600px) {
  .bl-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .bl-card__photo {
    width: 100%;
    height: 180px;
    min-width: 0;
  }
  .bl-card__photo img {
    width: 100%;
    height: 180px;
  }
  .bl-card__body { padding: 14px 16px; }
  .bl-card__intro { -webkit-line-clamp: 2; }
}

/* Force anti-Bootstrap */
.bl-card { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
.bl-card__body { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; }
.bl-card__footer { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
.bl-card__pills { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }


/* ============================================================
   CARTE - Compteur et légende
   ============================================================ */

/* Compteur de balades */
.map-compteur {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #dff0ed;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #444;
  box-shadow: 0 2px 8px rgba(0,111,101,.07);
}
.map-compteur strong { color: #008f88; }
.map-compteur__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #008f88;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: inline-block;
}

/* Légende */
.map-legende {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 10px;
  padding: 10px 14px;
  background: #f4f8f7;
  border-radius: 10px;
  border: 1px solid #dff0ed;
}
.map-legende__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #555;
}
.map-legende__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.15);
}
.map-legende__dot--vert       { background: #008f88; border-color: #005f5a; }
.map-legende__dot--vert-clair { background: #43b488; border-color: #2d8a60; }
.map-legende__dot--orange     { background: #f39200; border-color: #c97000; }
.map-legende__dot--cercle {
  background: #1a5276;
  border-color: #0d2d45;
  position: relative;
  font-size: 8px;
  color: #fff;
  text-align: center;
  line-height: 13px;
}

@media (max-width: 600px) {
  .map-legende { gap: 8px 12px; }
  .map-legende__item { font-size: 11px; }
  .map-compteur { font-size: 13px; }
}