/* =========================================================
   ProxyStock — centres.css (refonte)
   - Cohérence visuelle avec la home (palette, rayons, ombres)
   - Toolbar accessible & responsive
   - Grille cartes : hauteurs égales, CTA solides, images protégées
   - Raccourcis zones (pills) harmonisés
   - Petits plus: breadcrumb, états focus, reduced-motion
   ========================================================= */

:root{
  --ps-blue:#0047FF;
  --ps-blue-dark:#0033cc;
  --ps-yellow:#FFCC00;
  --ps-red:#DC3330;
  --ps-text:#003399;
  --ps-bg:#f5f7ff;
  --radius:14px;

  /* Typo fluide */
  --fs-h1: clamp(1.6rem, 1.8vw + 1rem, 2.2rem);
  --fs-lead: clamp(1rem, .7vw + .8rem, 1.125rem);
  --fs-card-title: clamp(1.05rem, .7vw + .9rem, 1.25rem);
}

/* ===== Layout global ===== */
.locations-page{ max-width:min(1200px, 92vw); margin:auto; padding:clamp(1rem, 2vw, 2rem) 1rem; }

/* ===== Fil d'Ariane ===== */
.breadcrumb{ margin:.25rem 0 1rem; font-size:.95rem; color:#344055; }
.breadcrumb ol{ list-style:none; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ps-blue); text-decoration:underline; }
.breadcrumb li[aria-current="page"]{ color:#111; font-weight:700; }

/* ===== Hero ===== */
.locations-hero{ background:#fff; border:1px solid #e6ecff; border-radius:var(--radius); padding:clamp(1rem, 2vw, 1.25rem); box-shadow:0 4px 10px rgba(0,35,100,.06); }
.locations-hero h1{ font-size:var(--fs-h1); color:var(--ps-text); margin-bottom:.25rem; }
.locations-hero .lead{ color:#344055; font-size:var(--fs-lead); }
.locations-hero .tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.locations-hero .tag{ display:inline-flex; align-items:center; gap:.4rem; background:#f0f3ff; color:var(--ps-text); padding:.4rem .6rem; border-radius:999px; font-weight:700; font-size:.875rem; }

/* ===== Raccourcis zones (pills) ===== */
.zones-shortcuts{ background:#fff; border-left:6px solid var(--ps-yellow); border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.06); padding: 2rem 1.25rem; margin: 1.25rem 0 1.5rem; text-align:center; }
.zones-shortcuts h2{ color:var(--ps-blue); margin-bottom:.25rem; font-size:1.4rem; }
.zones-shortcuts .zones-list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:.5rem 0 0; padding:0; }
.zones-shortcuts .zones-list a{ display:inline-block; background:#f5f7ff; color:var(--ps-blue); font-weight:600; padding:.55rem 1.1rem; border-radius:999px; border:1px solid #e6ecff; text-decoration:none; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.zones-shortcuts .zones-list a:hover{ background:#e9f0ff; color:#003399; box-shadow:0 2px 8px rgba(0,71,255,.1); }
.zones-shortcuts .zones-list a:focus-visible{ outline:3px solid var(--ps-yellow); outline-offset:2px; }

/* ===== Toolbar (recherche/filters) ===== */
.toolbar{ display:grid; gap:.75rem; grid-template-columns: 1fr 220px 220px; margin:1rem 0 1.25rem; }
.tool{ position:relative; display:flex; align-items:center; background:#fff; border:1px solid #e6ecff; border-radius:10px; padding:.3rem .6rem; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.tool-icon{ margin-right:.4rem; color:var(--ps-blue); }
.toolbar input, .toolbar select{ width:100%; padding:.65rem .6rem; border:none; outline:none; font:inherit; background:transparent; color:#111; }
.toolbar input::placeholder{ color:#7a879b; }
@media (max-width: 920px){ .toolbar{ grid-template-columns:1fr; } }

/* ===== Cartes ===== */
.cards{ display:grid; gap:clamp(.75rem, 2vw, 1rem); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 1060px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card{ background:#fff; border:1px solid #e6ecff; border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 10px rgba(0,35,100,.06); display:flex; flex-direction:column; min-height: 520px; height: 100%; }
.media{ aspect-ratio: 16/9; overflow:hidden; background:#eef2ff; flex: 0 0 auto; }
.card img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
@media (hover:hover){ .card:hover img{ transform: scale(1.03); } }

.body{ flex: 1 1 auto; display:flex; flex-direction:column; padding:clamp(.75rem, 1.4vw, 1rem); gap:.75rem; }
.card-title{ font-size:var(--fs-card-title); color:var(--ps-text); }
.meta{ display:grid; gap:.25rem; font-size:.95rem; color:#344055; }
.meta .line{ display:flex; gap:.5rem; align-items:flex-start; }

.badges{ display:flex; flex-wrap:wrap; gap:.4rem; }
.badge{ display:inline-block; padding:.35rem .65rem; border-radius:999px; background:#f0f3ff; color:var(--ps-text); font-weight:700; font-size:.75rem; line-height:1; }
.badge.open{ background:#e8f5e9; color:#1b5e20; }
.badge.soon{ background:#fff7e6; color:#8a5200; }

.price{ font-weight:800; color:#111; font-size:clamp(1.05rem, 1vw + 1rem, 1.3rem); }
.price small{ color:#555; font-weight:600; }
.price-row{ display:flex; align-items:center; justify-content:space-between; }

/* CTA : 2 en haut, 1 pleine largeur en bas */
.cta-row{ display:grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'info itin' 'reserve reserve'; gap:.6rem; margin-top:auto; }
.cta-info{ grid-area: info; }
.cta-itin{ grid-area: itin; }
.cta-reserve{ grid-area: reserve; }

.btn{ display:inline-flex; justify-content:center; align-items:center; gap:.5rem; padding:.85rem .95rem; border-radius:10px; font-weight:700; border:1px solid rgba(0,0,0,.05); text-align:center; white-space:nowrap; }
.btn-primary{ background:var(--ps-blue); color:#fff; }
.btn-primary:hover{ background:var(--ps-blue-dark); }
.btn-cta{ background:var(--ps-red); color:#fff; }
.btn-cta:hover{ filter:brightness(.95); }
.btn-ghost{ background:#f6f8ff; color:#0b1e56; }

@media (max-width: 560px){
  .cta-row{ grid-template-columns: 1fr; grid-template-areas:'info' 'itin' 'reserve'; }
  .btn{ padding: 1rem 1rem; font-size:1rem; }
}

/* Message vide (zéro résultat filters) */
.empty{ text-align:center; padding:2.5rem 1rem; color:#344055; border:1px dashed #ccd6ff; border-radius:12px; background:#fff; }

/* ===== Bloc SEO ===== */
.why{ background:#fff; border:1px solid #e6ecff; border-radius:var(--radius); padding:clamp(1rem, 2vw, 1.25rem); margin-top:clamp(1rem, 2vw, 1.5rem); box-shadow:0 4px 10px rgba(0,35,100,.06); }
.why h2{ color:var(--ps-text); font-size:clamp(1.05rem, 1vw + 1rem, 1.25rem); margin-bottom:.5rem; }
.why ul{ padding-left:1.1rem; color:#344055; }
.why li{ margin:.25rem 0; }

/* ===== Icônes ===== */
.fa-fw{ width:1.25em; text-align:center; }

/* ===== Accessibilité utilitaire ===== */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* ===== Motion reduce ===== */
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

/* ===== Promo ribbon (ex : « -15 % lancement ») ===== */
/* Placez <span class="promo-ribbon">-15 % lancement</span> dans .media d'une .card */
.card .media{ position:relative; }
.promo-ribbon{
position:absolute; top:12px; left:-6px;
background: var(--ps-red, #DC3330);
color:#fff; font-weight:800; font-size:.95rem; line-height:1;
padding:.5rem .9rem .5rem 1.1rem; border-radius:0 999px 999px 0;
box-shadow: 0 6px 16px rgba(0,0,0,.18);
letter-spacing:.2px;
}
/* petite patte triangulaire sous le ruban */
.promo-ribbon::after{
content:""; position:absolute; left:0; top:100%;
border-top:8px solid rgba(0,0,0,.22);
border-left:8px solid transparent;
}
@media (max-width: 520px){ .promo-ribbon{ font-size:.85rem; padding:.45rem .8rem .45rem .9rem; } }