/* ===== Variables & reset ===== */
:root{
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --text: #141414;
    --muted: #6b7280;
    --border: #ececec;
    --radius-xl: 24px;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --brandA: #F9A312;
    --brandB: #F895AC;
    --grad: linear-gradient(135deg, var(--brandA), var(--brandB));
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  
  /* ===== Layout ===== */
  .q-container{
    width:min(1200px, 92vw);
    margin: 96px auto 120px; /* espace sous le header global */
  }
  
  /* Breadcrumb */
  .q-breadcrumb{
    display:flex;align-items:center;gap:.5rem;
    color:var(--muted);font-size:.95rem;margin:16px 0 8px;
  }
  .q-crumb{color:inherit;text-decoration:none}
  .q-crumb:hover{color:var(--text)}
  .q-crumb-sep{opacity:.6}
  .q-crumb.current{color:var(--text);font-weight:600}
  
  /* ===== HERO ===== */
  .q-hero{ text-align:center; margin: 24px 0 40px;}
  .q-title{
    font-size:40px; line-height:1.1; letter-spacing:-.02em;
    margin:0 0 .5rem; font-weight:800;
  }
  .q-subtitle{
    margin:0 auto 28px; color:var(--muted); font-size:1.05rem; max-width:900px;
  }
  .q-hero-media{
    position:relative; isolation:isolate;
    border-radius: var(--radius-xl);
    overflow:hidden; box-shadow: var(--shadow);
    background: var(--bg-soft);
  }
  .q-image{ width:100%; height:460px; object-fit:cover; }
  .q-hashtag{
    position:absolute; top:16px; left:16px;
    background:#0f172a; color:#fff; font-weight:700;
    padding:8px 14px; border-radius:999px; font-size:.9rem; z-index:2;
  }
  
  /* ===== (ANCIEN) GRID triple — conservé si réutilisé ailleurs ===== */
  .q-grid{
    display:grid; gap:20px;
    grid-template-columns: 1.2fr .9fr .9fr;
    margin: 28px 0 18px;
  }
  @media (max-width:1024px){
    .q-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:760px){
    .q-grid{grid-template-columns:1fr}
  }
  
  /* Cards */
  .q-card{
    background:#fff; border:1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow);
    padding:22px 22px;
  }
  .q-h2{
    font-size:1.2rem; letter-spacing:-.01em; margin:0 0 14px; font-weight:800;
  }
  
  /* Overview (ancien bloc “L’essentiel” dans carte) */
  .q-overview-text{ margin:0 0 16px; color:#222; line-height:1.6; }
  .q-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
  
  /* Prices */
  .q-prices .q-price-row{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;
  }
  @media (max-width:540px){
    .q-prices .q-price-row{ grid-template-columns:1fr; }
  }
  .q-price{
    border:1px solid var(--border); border-radius:16px; padding:14px 16px; text-align:center;
    background:var(--bg-soft);
  }
  .q-price-label{ color:var(--muted); font-size:.9rem; margin-bottom:6px; }
  .q-price-value{ font-weight:800; font-size:1.35rem; }
  /* Remplace la variante gradient pour un accent discret */
  .q-price-value.highlight{ color:#111; background:none; }
  .q-price-value.highlight::after{
    content:""; display:block; height:3px; margin-top:6px; border-radius:999px;
    background: var(--grad);
  }

  .q-note{ color:var(--muted); font-size:.9rem; margin:10px 0 0; }
  
  /* Tags (pills) */
  .pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .pill-row .pill{
    background:#fff; border:1px solid var(--border);
    padding:8px 12px; border-radius:999px; font-weight:600; font-size:.92rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  
  /* ===== Scores ===== */
  .q-scores{ margin-top:18px; }
  .scores-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
  @media (max-width:700px){ .scores-grid{ grid-template-columns:1fr; } }
  .score-row{ display:flex; align-items:center; gap:14px; }
  .score-label{ min-width:200px; font-weight:700; }
  @media (max-width:700px){ .score-label{ min-width:160px; } }
  .score-dots{ display:flex; gap:6px; }
  .score-dot{
    width:14px; height:14px; border-radius:999px; border:1px solid var(--border); background:#f2f2f2;
  }
  .score-dot.on{ background: linear-gradient(135deg, var(--brandA), var(--brandB)); border-color:transparent; }
  
  /* ===== CTA Wide ===== */
  .q-cta-wide{ margin-top:26px; }
  .q-cta-wide-inner{
    border-radius: var(--radius-xl);
    padding:26px 22px;
    background: radial-gradient(1200px 400px at 0% 0%, rgba(249,163,18,.18), transparent),
                radial-gradient(1200px 400px at 100% 100%, rgba(248,149,172,.18), transparent),
                #0b1324;
    color:#fff;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap;
  }
  .q-cta-title{ margin:0; font-size:1.35rem; }
  .q-cta-sub{ margin:0; color:#d7dbe8 }
  .q-cta-actions{ display:flex; gap:12px; }
  
  /* ===== Buttons ===== */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:800;
    border:1px solid transparent; transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .btn-primary{ background:var(--grad); color:#111; box-shadow:0 8px 18px rgba(249,163,18,.22); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(249,163,18,.28); }
  .btn-ghost{ background:#fff; color:#111; border-color:var(--border) }
  .btn-ghost:hover{ transform:translateY(-1px); }
  
  /* Sticky CTA (mobile) - SUPPRIMÉ */
  .q-sticky-cta{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: static !important;
  }
  .q-sticky-cta .btn{ display: none !important; }
  @media (max-width:768px){
    .q-sticky-cta{ display: none !important; }
  }
  
  /* Small polish */
  svg{ display:inline-block }
  
  /* === Description (texte libre sous l'image, sans carte) ================== */
  .q-desc-block{ margin: 14px 0 24px; }
  .q-description{
    font-size: 1.05rem;
    line-height: 1.8;
    color: #222;
  }
  .q-description p{ margin: 0 0 1em; }
  .q-description a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  @media (max-width:760px){
    .q-description{ font-size: 1rem; line-height: 1.75; }
  }
  
  /* === NOUVEAU : Layout 2 colonnes — Description + Aside =================== */
  .q-main{
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "content aside"
      "scores  aside";
    gap: 24px 28px;
    margin: 18px 0 26px;
  }
  .q-main-content{ grid-area: content; min-width:0; }
  .q-aside{ grid-area: aside; align-self:start; }
  /* Espace entre cartes du aside */
  .q-aside .q-card + .q-card { margin-top: 24px; }
  .q-scores{ grid-area: scores; margin-top:0; }
  
  /* Empilement mobile */
  @media (max-width:980px){
    .q-main{
      grid-template-columns:1fr;
      grid-template-areas:
        "content"
        "aside"
        "scores";
      gap:18px;
    }
  }
  
  /* Bloc “L’essentiel” doux (pas une carte) */
  .q-overview-soft{
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
  }
  .q-overview-soft .q-h2{ margin:0 0 8px; }
  
  /* ===== Map (Leaflet) — PETITE CARTE FIXE DANS L’ASIDE =================== */
  .q-map-card{
    margin: 16px 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    position: relative;
    isolation: isolate;
  }
  /* halos doux (optionnels) — désactivés ici pour un fond blanc net */
  .q-map-card::before,
  .q-map-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background:none; }
  
  .q-map-sub{ margin:0; color:var(--muted); font-size:.95rem; }
  
  .q-leaflet{
    position: relative;
    width: 100%;
    height: 420px;
    min-height: 320px;
    overflow: hidden;
    z-index: 1;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Petite carte : hauteur compacte */
  .q-leaflet--mini{
    height: 260px;
    min-height: 240px;
  }
  
  /* Leaflet full fit */
  .q-map-card .leaflet-container{ width:100% !important; height:100% !important; }
  .q-map-card .leaflet-container img{ max-width: none !important; }
  .q-map-card .leaflet-pane,
  .q-map-card .leaflet-layer{ backface-visibility: hidden; transform: translateZ(0); }
  
  /* Contrôles Leaflet (la mini carte est non interactive donc on masque le zoom) */
  .leaflet-control-zoom{ display:none !important; }
  .leaflet-control-attribution{
    background:#fff; border:1px solid var(--border); border-radius:10px; padding:2px 6px;
  }

  /* Accessibilité focus */
  .q-crumb:focus-visible, .btn:focus-visible{
    outline: 2px solid #111; outline-offset: 2px;
  }

  /* --- Pin HERO (Leaflet marker divIcon) --- */
.leaflet-marker-icon.q-pin {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
  pointer-events: none; /* pas cliquable */
  z-index: 400; /* au-dessus des tuiles */
}

/* point central (dot) */
.leaflet-marker-icon.q-pin .q-pin-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #F9A312 0%, #F895AC 100%);
  border: 2px solid #ffffff;                  /* lisibilité sur dark */
  box-shadow:
    0 0 0 4px rgba(249, 163, 18, 0.35),       /* halo brand */
    0 10px 24px rgba(0, 0, 0, 0.45);          /* profondeur */
}

.leaflet-marker-icon.q-pin .q-pin-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;   /* + grand que le dot */
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(248, 149, 172, 0.55);
  animation: qpin-pulse 2.2s ease-out infinite; /* durée un peu plus lente */
  box-shadow: 0 0 18px rgba(248, 149, 172, 0.45);
}

@keyframes qpin-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.95; }
  70%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0.0; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0.0; }
}


/* accessibilité : désactive l'anim si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .leaflet-marker-icon.q-pin .q-pin-wave { animation: none !important; opacity: .55; }
}