:root{
  --bg:#0d253f;        /* bleu nuit */
  --bg-2:#061425;      /* plus sombre */
  --surface:#122a45;   /* cartes/bandeaux */
  --accent:#01b4e4;    /* cyan TMDB */
  --accent-2:#90cea1;  /* vert secondaire */
  --text:#e6f0ff;
  --muted:#a9bfd8;
  --line:#1b3a5a;
  --rouge:#6B0000;
  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --gap:18px;
}
/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'IBM Plex Sans', sans-serif;
  color:var(--text); background:linear-gradient(180deg,var(--bg),var(--bg-2));
}


body.menu-open{overflow:hidden}

/* --- Navigation --- */
    nav a{color:var(--text); text-decoration:none; margin-left:18px; font-weight:600; font-size:.95rem}
    nav a:hover, nav a:focus{color:#fff; text-shadow:0 0 8px rgba(255,255,255,.35)}
/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--gap);
  align-items:center; padding:12px 20px; background:rgba(6,20,37,.75); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700; letter-spacing:.3px}
.brand .dot{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav{display:flex; gap:14px}
.nav__link{
  color:var(--muted); text-decoration:none; padding:10px 8px; border-radius:8px; position:relative;
}
.nav__link.is-active,.nav__link:hover{color:#fff}
.nav__link.is-active::after,.nav__link:hover::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px; background:var(--accent);
}

/* Search */
.search input{
  width:280px; max-width:40vw;
  background:#0a1a2e; color:#eaf4ff; border:1px solid #143052; border-radius:999px;
  padding:10px 14px; outline:none;
}
.search input::placeholder{color:#6e8aac}

/* Hero */
.hero{
  position:relative; min-height:30vh;
  display:grid; place-items:center;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,20,37,.6),rgba(6,20,37,.9));
  
  pointer-events:none;     /* ← LE PLUS IMPORTANT : laisse passer les clics */
  z-index:1;               /* overlay derrière le contenu */
}
.nav{
  position:relative;
  z-index:5;               /* nav au-dessus de l’overlay */
}

.hero__content{
  position:relative;
  z-index:5;               /* texte du hero au-dessus aussi */
}
.hero h1{margin:0 0 8px; font-size:clamp(48px,8vw,90px); font-weight:700;}
.hero p{margin:0 0 18px; color:var(--muted)}

/* Wrapper + sections */
.wrap{max-width:1200px; margin:auto; padding:26px 20px}
.section-title{margin:20px 0 12px; font-size:1.25rem}

/* Grid cartes */
.grid{display:grid; gap:var(--gap)}
.cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{
  background:linear-gradient(180deg,#0d2139,#0c2138);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.45)}
.poster{position:relative; aspect-ratio:2/3; background:#0a1a2e}
.poster img{width:100%; height:100%; object-fit:cover; display:block}

/* Badge score circulaire */
.rate{
  --size:42px;
  position:absolute; left:10px; bottom:10px; width:var(--size); height:var(--size);
  border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.9rem; color:#fff;
  background:
    radial-gradient(farthest-side,#091828 calc(100% - 6px),transparent 0 99.9%),
    conic-gradient(var(--accent-2) calc(var(--p)*1%), #223e5e 0);
  box-shadow:0 2px 10px rgba(0,0,0,.4); 
}
.rate::after{content:attr(data-rate) "%"; font-variant-numeric:tabular-nums}

/* Titre + meta */
.title{margin:10px 12px 2px; font-size:1rem}
.meta{margin:0 12px 10px; color:var(--muted); font-size:.9rem}

/* Chips */
.chips{display:flex; gap:8px; padding:0 12px 12px}
.chip{background:#0c2138; color:#b7d1ea; border:1px solid #1b3a5a; padding:6px 10px; border-radius:999px; font-size:.8rem}

/* Tabs */
.tabs{display:flex; gap:10px; margin:8px 0 20px}
.tab{
  padding:10px 14px; background:#0c2138; color:#cfe3ff; border:1px solid #1b3a5a;
  border-radius:999px; cursor:pointer
}
.tab.is-active,.tab:hover{background:var(--accent); color:#042033; border-color:transparent}

.rail-horizontal{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}
/* Chaque carte générée en JS = un "item" du rail */
.rail-horizontal > * {
  flex: 0 0 260px;   /* largeur d’une carte (ajuste si besoin) */
}

/* cacher scroll si tu veux */
.rail-horizontal::-webkit-scrollbar { display:none; }

/* chaque carte JS devient une "carte du rail" */
.rail-horizontal .card {
  flex: 0 0 260px; /* largeur d’un item */
}
/* ===== Menu hamburger ===== */
.nav--burger{
  position:relative;
  z-index:6;                 /* au-dessus de l’overlay */
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
}

/* bouton burger */
.burger{
  min-width:140px;                 /* ← largeur suffisante pour "Menu ≡" */
  height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(6,20,37,.72);
  backdrop-filter:saturate(1.2) blur(10px);
  display:none;                    /* visible seulement en mobile */
  align-items:center;              /* ← alignement horizontal */
  justify-content:center;
  gap:12px;                        /* espace entre texte et barres */
  padding:10px 16px;
  cursor:pointer;
}

/* texte "Menu" */
.burger-text{
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text);
  white-space:nowrap;
}

/* barres */
.burger__bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
/* conteneur des barres */
.burger-icon{
  display:flex;
  flex-direction:column;   /* ← empile les barres */
  gap:5px;
}
.burger[aria-expanded="true"] .burger-icon .burger__bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-icon .burger__bar:nth-child(2){
  opacity:0;
}
.burger[aria-expanded="true"] .burger-icon .burger__bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* le menu */
.menu{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
}
.menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:1.15rem;
}
.menu a:hover,
.menu a:focus{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.35);
}

/* Mobile */
@media (max-width:720px){
  .burger{
    display:flex;                  /* ← burger visible */
  }
  .menu{
    position:absolute;
    top:56px;
    left:50%;
    transform:translateX(-50%);
    width:min(92vw, 420px);
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px;
    background:rgba(6,20,37,.92);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 12px 26px rgba(0,0,0,.45);
  }
  .menu.is-open{ display:flex; }

  .menu a{
    display:block;
    width:100%;
    padding:14px 16px;
    border-radius:10px;
  }
  .menu a:hover{
    background:rgba(255,255,255,.06);
  }
}

/* Footer */
.footer{text-align:center; border-top:1px solid var(--line); background:#08192c; color:#c8d9f0}
.footer a{display:block; color:#9fb8d6; text-decoration:none; padding:6px 0}
.footer img{ display:inline-block; width:50px; height:auto; border-radius:8px; }

/* Responsive */
@media (max-width:720px){
  .topbar{grid-template-columns:auto auto 1fr; gap:10px}
  .search input{width:100%}

}

/* grille sites: cartes plus larges et ratio paysage */
.sites-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* carte site = lien cliquable */
.site-card{display:block; text-decoration:none; color:inherit}

/* poster large 3:2 */
.poster--wide{aspect-ratio:5/4; background:#0a1a2e}

/* favicon en badge */
.site-fav{
  position:absolute; right:10px; bottom:10px;
  width:36px; height:36px; border-radius:10px; overflow:hidden;
  background:#0c2138; border:1px solid #1b3a5a; display:grid; place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4)
}
.site-fav img{width:22px; height:22px}

/* en-tête du portefeuille */
.portfolio-head{display:flex; justify-content:space-between; align-items:end; gap:12px}
.portfolio-sub{margin:0; color:var(--muted)}

/*========================================================
= 8) COUNTDOWN
=========================================================*/
.countdown{
  display:flex; align-items:center;
  gap:8px;
  flex-wrap:nowrap;              /* ⬅️ pas de retour à la ligne */
  white-space:nowrap;            /* ⬅️ évite que les blocs cassent */
  background: var(--bg);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:8px 12px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--glow);
  width:fit-content;
  margin:10px auto;
  animation:pulseZoom 3s infinite ease-in-out;
}
/* Le bloc chiffres prend la place, le bouton se pousse à droite */
.countdown .slots{
  display:flex; align-items:baseline; gap:8px;
  flex:1 1 auto;                  /* ⬅️ occupe la largeur restante */
  min-width:0;                    /* ⬅️ autorise la réduction */
}
.countdown .btn-plex{
  margin-left:auto;               /* ⬅️ pousse le bouton à droite */
  flex:0 0 auto;                  /* ⬅️ le bouton ne rétrécit pas */
}
.countdown .label{ font-family:"Cinzel Decorative", serif; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#ff5151; }
.countdown .sep{ opacity:.6; transform: translateY(-1px); }
.countdown .slot{ display:flex; flex-direction:column; align-items:center; min-width:clamp(46px, 14vw, 64px); } /* ⬅️ un poil plus petit */
.countdown .num{ font-weight:800; font-size:clamp(1.1rem, 5.4vw, 1.5rem); line-height:1; text-shadow:0 0 6px rgba(255,80,80,.35); }
.countdown .unit{ font-size:clamp(.58rem, 2.2vw, .7rem); text-transform:uppercase; opacity:.8; }

/* Mobile : on compact au max pour garder tout sur une ligne */
@media (max-width:480px){
  .countdown{ gap:6px; padding:6px 8px; }
  .countdown .slots{ gap:6px; }
  .countdown .slot{ min-width:42px; }
  .countdown .num{ font-size:1rem; }
  .countdown .unit{ font-size:.6rem; }
  .countdown .btn-plex.icon-only{ width:34px; height:34px; padding:.45rem; }
  .countdown .btn-plex img{ width:18px; height:18px; }
  
}
/* ========================================================
 * Countdown compact pour les cartes Plex Zone
 * (prend le dessus sur les styles généraux)
 * ====================================================== */
.site-card .countdown{
  display:flex;
  align-items:center;
  gap:20px;
  background:#08192c;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  margin:8px 12px 4px;
  box-shadow:none;
  /* width:auto; */
  white-space:nowrap;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;          /* pas de gros pulse dans une petite carte */
}
/* Centrer le countdown dans les cartes */
.site-card .countdown{
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  text-align:center;
}
.site-card .countdown .label{
  font-family:inherit;
  font-weight:600;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--rouge);
}

.site-card .countdown .slots{
  display:flex;
  align-items:baseline;
  gap:4px;
  flex:0 0 auto;
  min-width:0;
}

.site-card .countdown .slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:auto;
}

.site-card .countdown .num{
  font-weight:700;
  font-size:0.9rem;
  line-height:1;
  text-shadow:none;
}

.site-card .countdown .unit{
  font-size:0.6rem;
  text-transform:uppercase;
  opacity:.7;
}

.site-card .countdown .sep{
  opacity:.6;
  transform:translateY(-1px);
}

/* encore un peu plus serré sur mobile */
@media (max-width:480px){
  .site-card .countdown{
    padding:3px 6px;
    gap:4px;
  }
  .site-card .countdown .num{
    font-size:0.8rem;
  }
  .site-card .countdown .unit{
    font-size:0.55rem;
  }
}