/* ========== Extensions UX (Phase 3+) ========== */
/* Perf hints */
.section,[data-iso]{content-visibility:auto;contain-intrinsic-size:800px 600px}

/* ---------- HERO vidéo / image ---------- */
.hero-video{position:relative;min-height:72vh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden;border-radius:18px;margin:2rem 0;background:#000}
.hero-video video,.hero-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.hero__content{position:relative;z-index:2;padding:clamp(1rem,3vw,2rem)}
.hero__badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.badge{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}

/* ---------- Switch Pro / B2C ---------- */
.mode-switch{display:flex;gap:.5rem;justify-content:center;margin:1rem 0}
.mode-switch button{padding:.5rem .9rem;border:1px solid #ddd;border-radius:999px;background:#fff;cursor:pointer}
.mode-switch button.active{background:var(--brand,#111);color:#fff;border-color:var(--brand,#111)}
[data-target="pro"]{display:block}
[data-target="b2c"]{display:none}
[data-mode="b2c"] [data-target="pro"]{display:none}
[data-mode="b2c"] [data-target="b2c"]{display:block}

/* ---------- Recherche universelle ---------- */
.searchbar{position:relative;max-width:720px;margin:0 auto}
.searchbar input{width:100%;padding:1rem 3rem 1rem 1rem;border:1px solid #ddd;border-radius:12px}
.searchbar .icon{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);opacity:.6}
.pills{display:flex;gap:.6rem;flex-wrap:wrap}
.pill{padding:.4rem .8rem;border:1px solid #eee;border-radius:999px;background:#fff}

/* ---------- Grilles & cartes ---------- */
.grid{display:grid;gap:1rem}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.kpi .card{text-align:center}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.notice{padding:1rem;border:1px dashed #ccc;border-radius:12px;background:#fffef7}

/* ---------- Sections & titres ---------- */
.section{margin:2rem 0}
.title{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.title .dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--brand,#111);display:inline-block}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn-primary{background:var(--brand,#111);border-color:var(--brand,#111);color:#fff}
.btn-ghost{background:transparent}

/* ---------- Listes / cartes compactes ---------- */
.list{display:grid;gap:.7rem}
.list .card{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid #eee;border-radius:12px;background:#fff}

/* ---------- Réactivité vidéo & media ---------- */
video,iframe{max-width:100%;border:0;border-radius:12px;display:block}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
  .hero-video{background:#000}
  .searchbar input,.list .card,.notice,.btn{background:#151517;border-color:#2a2a2b;color:#e9e9e9}
  .pill{background:#151517;border-color:#2a2a2b;color:#ddd}
  .btn-primary{background:var(--brand,#fff);border-color:var(--brand,#fff);color:#000}
}

/* ---------- Accessibilité & motion ---------- */
:focus-visible{outline:2px solid var(--brand,#111);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Impression ---------- */
@media print{
  .hero-video video,.site-header,.site-footer,#mk-assistant{display:none!important}
  .card{box-shadow:none;border-color:#999}
}