/* ===== Thème Blanc & Rose Pastel (sensuel/coquin) ===== */
:root{
  --pink:#ff4fa3;          /* accent principal */
  --pink-2:#ff6fb8;        /* accent hover */
  --blush:#ffd3e6;         /* rose très clair */
  --line:#f3e6ee;          /* bordures subtiles */
  --bg:#ffffff;            /* fond global */
  --card:#ffffff;          /* fond des cartes/blocs */
  --text:#1f1a22;          /* texte principal (très foncé) */
  --muted:#6b616a;         /* texte secondaire */
  --shadow:0 12px 30px rgba(255,79,163,.12);
  --shadow-2:0 6px 18px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1200px,92%);margin:0 auto}

/* ===== Header collant en verre dépoli ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{
  font-weight:900; font-size:1.5rem; text-decoration:none; color:var(--text); letter-spacing:.2px;
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
}
.brand span{color:var(--pink)}
/* Petit cœur coquin */
.brand::after{
  content:"♥"; font-size:1rem; color:var(--pink); opacity:.8; transform:translateY(-1px);
}

.main-nav a{
  color:#3d3440; text-decoration:none; margin-left:1rem; opacity:.95; font-weight:600;
  padding:.4rem .6rem; border-radius:10px; transition:all .15s ease;
}
.main-nav a:hover{ color:#231a25; background:linear-gradient(180deg,#fff, #fff0f7); box-shadow:0 6px 14px rgba(255,79,163,.12); }

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--line); margin-top:2rem; padding:2rem 0;
  color:var(--muted); font-size:.95rem;
}

/* ===== Titres, liens ===== */
.h1{font-size:1.7rem;margin:1.2rem 0}
a{color:var(--pink); text-decoration:none}
a:hover{color:var(--pink-2)}

/* ===== Grilles (4 → 1 mobile) ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* ===== Cartes vidéo & modèles ===== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-2);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#f6c8de;
}
.card .thumb{display:block;aspect-ratio:16/9;background:#fff0f7}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:.85rem 1rem}
.card .title{font-size:1rem;margin:.3rem 0 .4rem}
.card .title a{color:#2a202c}
.card .title a:hover{color:var(--pink)}
.card .model{display:inline-block;color:var(--pink);text-decoration:none;font-size:.95rem;opacity:.95}
.card .meta{font-size:.85rem;color:var(--muted)}

/* ===== Barre de recherche & boutons ===== */
.search-bar{display:flex;gap:.6rem;margin:.6rem 0 1rem}
.search-bar input[type="search"]{
  flex:1; padding:.78rem 1rem; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--text);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-bar input[type="search"]:focus{
  outline:none; border-color:#ffb5d6; box-shadow:0 0 0 4px rgba(255,79,163,.12);
}

button, .btn{
  appearance:none; border:1px solid #ffb5d6; background:linear-gradient(135deg,#ffe6f2,#ffd3e6);
  color:#7c1f4e; font-weight:800; padding:.78rem 1rem; border-radius:14px; cursor:pointer;
  box-shadow:0 10px 18px rgba(255,79,163,.10);
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
button:hover, .btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#ffd3e6,#ffc2df);
  border-color:#ff9ecb; box-shadow:0 12px 24px rgba(255,79,163,.18);
}
button:active, .btn:active{ transform:translateY(0) }

/* Petites pastilles coquines */
.badge{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background:#fff0f7; color:var(--pink); font-size:.8rem; border:1px solid #ffe0ef; margin-left:.35rem
}

/* ===== Breadcrumbs ===== */
.breadcrumbs{font-size:.92rem;color:var(--muted);margin:.3rem 0 1rem}
.breadcrumbs a{color:#6b5160}
.breadcrumbs a:hover{color:var(--pink)}

/* ===== Lecteur : onglets & cadre ===== */
.tabs{display:flex;gap:8px;margin:10px 0 8px}
.tab-btn{
  padding:.58rem .95rem; border-radius:12px; border:1px solid #f0cddd;
  background:#fff; color:#5b3d4a; cursor:pointer; font-weight:700;
}
.tab-btn.active{
  border-color:#ff9ecb; background:#ffe6f2; color:#812257;
  box-shadow:0 6px 14px rgba(255,79,163,.15);
}
.player-frames{
  position:relative; background:#f9f3f7;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.player-frames iframe{display:none;width:100%;height:min(62vw,560px); background:#fff}
.player-frames iframe.active{display:block}

/* ===== Loader ===== */
.loader{height:56px;display:flex;align-items:center;justify-content:center}
.loader::after{
  content:""; width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(0,0,0,.08); border-top-color:var(--pink);
  animation:spin .8s linear infinite
}
[data-loading="off"] .loader{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Accessibilité focus ===== */
:focus-visible{
  outline:3px solid rgba(255,79,163,.35);
  outline-offset:2px; border-radius:10px;
}