/* ---------- centres d'intérêt : tuiles illustrées, choix libre, jamais bloquant */
.ipick { max-width:980px; margin:0 auto; text-align:center }
.ipick .kicker { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#e7a53a; margin:0 0 6px }
.ipick h1 { margin:0 0 6px } .ipick .lead { color:var(--muted); max-width:520px; margin:0 auto 20px; line-height:1.5 }
.itiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; text-align:left }
.itile { position:relative; overflow:hidden; border-radius:14px; aspect-ratio:4/3; border:0; padding:0; cursor:pointer; color:#fff;
  background:var(--surface2); isolation:isolate; box-shadow:0 0 0 1px var(--line); transition:transform .15s, box-shadow .15s }
.itile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; z-index:-2; opacity:.7;
  transition:opacity .2s, transform .4s }
.itile::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,8,25,.05) 30%, rgba(10,8,25,.85)) }
.itile span { position:absolute; left:10px; right:10px; bottom:9px; font-weight:700; font-size:14px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.5) }
.itile:hover img { opacity:.9; transform:scale(1.04) }
.itile.on { box-shadow:0 0 0 3px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent) }
.itile.on img { opacity:1 }
.itile .ck { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s }
.itile.on .ck { opacity:1; transform:none }
.iregion { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:20px 0 4px; font-size:14px; color:var(--muted) }
.iregion .seg { margin:0; min-width:300px }
.iactions { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:18px }
.iactions .btn { min-width:240px }
.iactions .skip { border:0; background:none; color:var(--muted); cursor:pointer; font-size:13.5px }
.iactions .skip:hover { color:var(--ink) }
.sheet .itiles { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px } .sheet .itile span { font-size:12.5px }
@media (max-width:560px) { .itiles { grid-template-columns:repeat(2, 1fr) } .iregion .seg { min-width:0; width:100% } }