@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@500;700;900&family=Inter:wght@400;500;700&display=swap');

:root {
  --navy:    #0B2E40;
  --navy-dk: #072230;
  --teal:    #06BFC4;
  --coral:   #FF5A36;
  --sand:    #F4ECDC;
  --ink:     #1E1B16;
  --pebble:  #6E7A82;
  --white:   #ffffff;
  --radius:  16px;
  --shadow:  0 8px 30px rgba(7,34,48,.10);
  --shadow-h:0 16px 44px rgba(7,34,48,.18);
  --maxw:    1180px;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: "Anton", Impact, sans-serif;
  --head: "Archivo", var(--sans);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--sand); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--navy); }

/* ---------- HERO ---------- */
.hero { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.hero::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 280px at 88% -20%, rgba(6,191,196,.35), transparent 62%),
    radial-gradient(520px 240px at 5% 120%, rgba(255,90,54,.18), transparent 60%);
  pointer-events:none;
}
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 26px 22px 44px; }
.brandbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo svg { display:block; height:46px; width:auto; }
.brandbar .cat-label { text-align:right; line-height:1.05; }
.brandbar .cl-small { display:block; font-family:var(--head); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:11px; color:#9fd8e2; }
.brandbar .cl-strong { display:block; font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.5px; font-size:clamp(17px,3vw,24px); color:var(--teal); }

.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 8vw, 84px); line-height: .96; letter-spacing: .5px;
  margin: 30px 0 14px; text-transform: uppercase;
}
.hero h1 .teal { color: var(--teal); }
.hero p.lead { margin: 0; max-width: 600px; font-size: clamp(15px,2.3vw,19px); color:#dCEBF0; line-height:1.5; }
.hero .kicker { font-family:var(--head); font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:12px; color:#9fd8e2; }
.hero .cat-hero { font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:clamp(24px,4.5vw,38px); color:var(--teal); line-height:1; margin:6px 0 2px; }
.meta { margin-top: 20px; display:flex; flex-wrap:wrap; gap:9px; }
.pill { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:7px 13px; border-radius:999px; font-size:13px; font-weight:500; }

/* ---------- TOOLBAR ---------- */
.toolbar { position: sticky; top:0; z-index:30; background: rgba(244,236,220,.93); backdrop-filter: blur(8px); border-bottom:1px solid #e3d6bf; }
.toolbar-inner { max-width:var(--maxw); margin:0 auto; padding:13px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.search { position:relative; flex:1 1 230px; min-width:190px; }
.search input { width:100%; padding:11px 14px 11px 40px; border:1px solid #e0d2ba; border-radius:999px; background:#fff; font-size:15px; font-family:var(--sans); color:var(--ink); }
.search input:focus { outline:2px solid var(--teal); border-color:var(--teal); }
.search .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--pebble); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid #e0d2ba; background:#fff; color:var(--navy); padding:8px 14px; border-radius:999px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--sans); transition:.15s; }
.chip:hover { border-color:var(--teal); }
.chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.toggle-avail { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--navy); cursor:pointer; user-select:none; font-weight:700; }
.toggle-avail input { accent-color:var(--teal); width:17px; height:17px; }

.statusline { max-width:var(--maxw); margin:18px auto 0; padding:0 22px; display:flex; justify-content:space-between; align-items:center; color:var(--pebble); font-size:13px; gap:12px; flex-wrap:wrap; }

/* ---------- GRID ---------- */
.grid { max-width:var(--maxw); margin:14px auto 70px; padding:0 22px; display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); }
.card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:pointer; transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-h); }
.card-media { position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,#cdeef2,#9fd9e2); overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; }
.card-media .ph { position:absolute; inset:0; display:grid; place-items:center; color:#ffffffcc; font-family:var(--display); font-size:40px; background:linear-gradient(135deg,var(--teal),var(--navy)); text-transform:uppercase; }
.badge { position:absolute; top:12px; left:12px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; color:#fff; box-shadow:var(--shadow); }
.badge.ok { background:var(--teal); color:var(--navy); }
.badge.no { background:var(--ink); color:var(--sand); }
.tag-cat { position:absolute; top:12px; right:12px; background:rgba(11,46,64,.82); color:#fff; font-size:11px; font-weight:700; letter-spacing:.4px; padding:5px 10px; border-radius:999px; text-transform:uppercase; }
.card-body { padding:15px 16px 17px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-title { font-family:var(--head); font-weight:900; font-size:17px; line-height:1.2; margin:0; color:var(--navy); }
.card-sub { color:var(--pebble); font-size:13.5px; font-weight:500; }
.card-foot { margin-top:auto; padding-top:12px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.price { font-family:var(--head); font-size:19px; font-weight:900; color:var(--navy); }
.price small { font-size:12px; font-weight:600; color:var(--pebble); }
.see { font-size:13px; font-weight:700; color:var(--teal); }
.card-foot .see { color:#0a96a0; }

/* ---------- STATES ---------- */
.state { max-width:560px; margin:60px auto; text-align:center; color:var(--pebble); padding:0 22px; }
.state h3 { color:var(--navy); margin:12px 0 6px; font-family:var(--head); }
.skeleton .card-media { background:linear-gradient(100deg,#e9dcc4 30%,#f3e9d6 50%,#e9dcc4 70%); background-size:200% 100%; animation:sh 1.3s infinite; }
@keyframes sh { to { background-position:-200% 0; } }

/* ---------- MODAL ---------- */
.modal-back { position:fixed; inset:0; background:rgba(7,34,48,.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:18px; }
.modal-back.open { display:flex; }
.modal { background:var(--white); border-radius:20px; max-width:780px; width:100%; max-height:92vh; overflow:auto; box-shadow:var(--shadow-h); }
.modal-media { aspect-ratio:16/9; background:linear-gradient(135deg,var(--teal),var(--navy)); position:relative; }
.modal-media img { width:100%; height:100%; object-fit:cover; }
.modal-x { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.92); color:var(--ink); font-size:20px; box-shadow:var(--shadow); }
.modal-body { padding:22px 24px 26px; }
.modal-body h2 { font-family:var(--head); font-weight:900; margin:0 0 4px; font-size:24px; color:var(--navy); }
.modal-body .sub { color:var(--pebble); margin-bottom:14px; font-weight:500; }
.year-chip { display:inline-block; background:var(--sand); color:var(--navy); font-family:var(--sans); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; margin-left:8px; }
.tarifs { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px; }
.tarif { background:var(--sand); border-radius:12px; padding:10px 14px; min-width:96px; }
.tarif .k { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--pebble); font-weight:700; }
.tarif .v { font-family:var(--head); font-size:19px; font-weight:900; color:var(--navy); }
.tarif.long .v { font-size:14px; }
.specs { display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; margin:8px 0 18px; }
.specs .row { border-bottom:1px dashed #e3d6bf; padding-bottom:7px; }
.specs .k { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--pebble); }
.specs .v { font-size:15px; font-weight:600; }
.info-achat { font-size:12.5px; color:var(--pebble); margin:0 0 16px; }
.modal-cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; border-top:1px solid #eadcc4; padding-top:18px; }
.btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-size:15px; font-weight:700; font-family:var(--sans); padding:13px 20px; border-radius:999px; text-decoration:none; }
.btn-primary { background:var(--coral); color:#fff; }
.btn-primary:hover { filter:brightness(1.05); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-ghost { background:var(--sand); color:var(--navy); }
.gonglink { font-size:13.5px; font-weight:700; color:#0a96a0; text-decoration:none; margin-left:auto; }

/* ---------- FOOTER ---------- */
.footer { background:var(--navy); color:#cfe7ee; text-align:center; padding:26px 22px; font-size:14px; }
.footer .sig { font-family:var(--display); text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:18px; margin-bottom:6px; }
.footer a { color:var(--teal); text-decoration:none; }

@media (max-width:560px) {
  .specs { grid-template-columns:1fr; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:14px; }
  .card-title { font-size:15px; }
}