/* /accueil/parametres/parametres.css */
/* =========================================================
   NAYZCINE — PARAMÈTRES (Style Netflix / Cinematic UI)
   - Ambiance sombre ciné (vignette, lueurs, bruit, scanlines)
   - Verre + néon rouge NAYZCINE
   - Animations douces, micro-interactions
   - Respect total de la structure HTML fournie
   ========================================================= */

/* =================== VARIABLES =================== */
:root{
  /* Layout */
  --header-h: 90px;
  --wrap-max: 1200px;
  --block-max: 1040px;
  --r: 14px;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Palette (ciné) */
  --bg-0: #0a0d12;     /* fond */
  --bg-1: #0f141a;     /* panneaux */
  --bg-2: #151b22;     /* hover/inputs */
  --glass: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.08);

  --txt: #e8eef7;
  --muted: #9aa6b2;

  /* Accent NAYZCINE */
  --accent: #dc2626;
  --accent-2: #b91c1c;

  /* Ombres */
  --sh-1: 0 6px 18px rgba(0,0,0,.35);
  --sh-2: 0 12px 36px rgba(0,0,0,.45);

  /* Typo */
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* =================== RESET / BASE =================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; }

body{
  margin:0; min-height:100vh;
  color:var(--txt); font-family:var(--font); line-height:1.6;
  background:
    radial-gradient(1200px 600px at 5% -10%, rgba(220,38,38,.12), transparent 60%),
    radial-gradient(1200px 600px at 100% 0%, rgba(185,28,28,.10), transparent 60%),
    linear-gradient(180deg, #090c10 0%, var(--bg-0) 18%, var(--bg-0) 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Vignette + grain + scanlines (ciné) */
body::before,
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
}
body::before{
  /* vignette */
  background:
    radial-gradient(120vw 90vh at 50% 20%, transparent 40%, rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}
body::after{
  /* grain + léger balayage */
  background-image:
    radial-gradient(1px 1px at 25% 12%, rgba(255,255,255,.03) 0, transparent 80%),
    radial-gradient(1px 1px at 75% 48%, rgba(255,255,255,.025) 0, transparent 80%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.02) 0, transparent 80%),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:auto, auto, auto, 100% 2px;
  opacity:.35;
}

/* Balayage rouge discret sur la page */
.page-ambient-sweep{
  position:fixed; inset:auto -40% 10% -40%;
  height:140px; z-index:-1; pointer-events:none; filter:blur(16px);
  background: radial-gradient(800px 120px at 50% 50%, rgba(220,38,38,.12), transparent 60%);
  animation: sweep 5.5s linear infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-40%) }
  100%{ transform:translateX(40%) }
}

/* =================== ENTRÉES / TITRES =================== */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}

.container{
  width:100%; max-width:var(--wrap-max);
  margin: calc(var(--header-h) + 32px) auto 32px;
  padding: 0 24px;
  animation: fadeUp .35s ease-out both;
}

/* Centrage des blocs principaux */
.container > h1,
.container > .subtitle,
.container > hr,
.container > .content{
  max-width:var(--block-max); margin-left:auto; margin-right:auto;
}

h1{
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight:800; letter-spacing:.2px; margin:0 0 var(--sp-2);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.subtitle{
  font-size:.98rem; color:var(--muted);
  margin:0 0 var(--sp-5); letter-spacing:.02em;
}

/* Séparateur style Netflix */
hr{
  border:0; height:1px; position:relative; margin: var(--sp-5) 0;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}
hr::after{
  content:""; position:absolute; left:0; top:-1px; width:84px; height:3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  filter: drop-shadow(0 0 10px rgba(220,38,38,.35));
}

/* =================== MISE EN PAGE =================== */
.content{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:var(--sp-6); margin-top:2.25rem;
}

/* =================== SIDEBAR (onglets) =================== */
.sidebar{
  display:flex; flex-direction:column; gap:var(--sp-4);
  position:sticky; top:calc(var(--header-h) + 16px); align-self:start;
}

.menu-button{
  position:relative; overflow:hidden;
  border:1px solid var(--stroke);
  background:
    linear-gradient(180deg, var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;
  color:var(--muted);
  padding:.9rem 1rem; font-size:.98rem; font-weight:700; text-align:left;
  border-radius:12px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .25s ease, color .2s ease;
  will-change:transform; outline:none;
}
.menu-button:hover{
  transform:translateY(-2px);
  color:#fff; border-color:rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.menu-button:focus-visible{
  color:#fff; border-color:rgba(220,38,38,.65);
  box-shadow:0 0 0 3px rgba(220,38,38,.18);
}
.menu-button.active{
  color:#fff; border-color:rgba(220,38,38,.6);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(220,38,38,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.menu-button.active::before{
  content:""; position:absolute; left:-2px; top:10px; bottom:10px; width:3px;
  border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  filter: drop-shadow(0 0 8px rgba(220,38,38,.55));
}

/* =================== CONTENU PRINCIPAL =================== */
.main-content{
  display:flex; flex-direction:column; gap:var(--sp-6);
}

/* =================== CARDS (verre + halo) =================== */
.card{
  position:relative; overflow:clip;
  background: color-mix(in srgb, var(--bg-1) 92%, var(--accent) 0%);
  border:1px solid var(--stroke); border-radius:var(--r);
  padding: clamp(1rem, .7rem + .8vw, 1.5rem);
  box-shadow:var(--sh-1); backdrop-filter: blur(8px); transform:translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .25s ease;
}
.card::before{
  content:""; position:absolute; inset:-1px -1px auto auto; width:140px; height:140px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(220,38,38,.12), transparent 60%);
  filter: blur(18px); pointer-events:none;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: rgba(255,255,255,.12);
}

/* =================== GROUPES DE CHAMPS =================== */
.input-group{
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-bottom:var(--sp-4); animation: fadeUp .35s ease-out both;
}
.input-label{
  font-size:.85rem; color:var(--muted); user-select:none; letter-spacing:.02em;
}

input[type="text"],
input[type="email"]{
  width:100%; padding:.85rem 1rem; font-size:1rem; color:var(--txt);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--stroke); border-radius:12px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .25s ease, transform .06s ease;
}
input[type="text"]:hover,
input[type="email"]:hover{ border-color: rgba(255,255,255,.14); }
input[type="text"]:focus,
input[type="email"]:focus{
  border-color: rgba(220,38,38,.65);
  box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}
input[readonly]{ opacity:.85; cursor:default; }

/* =================== ACTIONS SAUVEGARDE =================== */
.save-row{
  margin-top:var(--sp-4);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}

.save-btn{
  appearance:none; border:0; border-radius:12px;
  padding:.9rem 1.25rem; font-size:1rem; font-weight:800; letter-spacing:.02em;
  color:#fff; cursor:pointer; transform:translateZ(0);
  background:
    radial-gradient(160% 120% at 0% 0%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 6px 16px rgba(220,38,38,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .18s ease, filter .2s ease, background .25s ease;
  position:relative; overflow:hidden;
}
.save-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(220,38,38,.35), inset 0 0 0 1px rgba(255,255,255,.1);
  filter:brightness(1.03);
}
.save-btn:active{ transform:translateY(0); }
.save-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* Loader circulaire */
.save-loader{
  width:26px; height:26px;
  border:3px solid rgba(255,255,255,.18); border-top-color:#fff;
  border-radius:50%; animation: spin .7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Statuts */
.save-status{ font-size:.92rem; color:var(--muted); letter-spacing:.01em; }
.save-status.ok{ color:#3ddb76; }
.save-status.err{ color:#ff5252; }

/* =================== INFO =================== */
.info-text{ margin-top:var(--sp-4); color:var(--muted); font-size:.95rem; }

/* =================== PREMIUM =================== */
.premium-header{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:800; color:var(--txt);
}
.premium-header svg{ width:20px; height:20px; color:var(--accent); }
.premium-text{ margin-top:.5rem; font-size:.98rem; color:var(--muted); }

.new-premium{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-6); margin-top:var(--sp-4); align-items:stretch;
}

.plan-card{
  height:100%; display:flex; flex-direction:column; position:relative; overflow:clip;
  padding:clamp(1rem, .7rem + .8vw, 1.5rem);
  border-radius:16px;
  background:var(--glass);
  border:1px solid var(--stroke);
  box-shadow:var(--sh-1); backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .25s ease;
}
.plan-card::before{
  content:""; position:absolute; inset:auto -20% -30% auto; width:220px; height:220px;
  background: radial-gradient(140px 140px at 100% 100%, rgba(220,38,38,.15), transparent 60%);
  filter:blur(18px); pointer-events:none;
}
.plan-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
  border-color:rgba(255,255,255,.12);
}

.plan-head{ margin-bottom:var(--sp-4); }
.plan-title{ font-size:1.25rem; font-weight:900; margin:0 0 .25rem; letter-spacing:.01em; }
.plan-price{ font-size:1.05rem; color:var(--accent); font-weight:800; margin:0; }
.plan-price span{ font-size:.9rem; opacity:.8; }

.plan-features{
  list-style:none; margin:var(--sp-4) 0 var(--sp-6); padding:0;
  font-size:.98rem; line-height:1.5; color:var(--txt);
}
.plan-features li{
  position:relative; padding-left:1.3rem; margin-bottom:.5rem;
}
.plan-features li::before{
  content:""; position:absolute; left:0; top:.45rem; width:.6rem; height:.6rem; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #fff0 40%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 10px rgba(220,38,38,.4);
}

.plan-cta{
  margin-top:auto; width:100%; padding:.9rem 1rem;
  font-size:1rem; font-weight:900; border:0; border-radius:12px; color:#fff; cursor:pointer;
  background:
    radial-gradient(160% 120% at 0% 0%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 8px 22px rgba(220,38,38,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .18s ease, filter .2s ease;
}
.plan-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(220,38,38,.36), inset 0 0 0 1px rgba(255,255,255,.12);
  filter:brightness(1.04);
}

/* =================== SQUELETTES (chargement) =================== */
.skeleton{
  position:relative; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.06);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform:translateX(-100%); animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%) } }

/* =================== SCROLLBAR (WebKit) =================== */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #1b2129, #141a22);
  border:2px solid transparent; background-clip:padding-box; border-radius:10px;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #202732, #161d26); }

/* =================== RESPONSIVE =================== */
@media (max-width: 980px){
  .content{ grid-template-columns:1fr; gap:var(--sp-5); }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; gap:var(--sp-3); }
  .menu-button{ flex:1 1 180px; text-align:center; padding:.85rem 1rem; }
}
@media (max-width: 640px){
  .container{ padding:0 16px; }
  .card{ padding:1rem; }
  .save-row{ flex-direction:column; align-items:stretch; gap:var(--sp-3); }
  .save-btn{ width:100%; }
  .new-premium{ grid-template-columns:1fr; }
}

/* =================== ACCESSIBILITÉ =================== */
:focus-visible{
  outline:3px solid rgba(220,38,38,.25);
  outline-offset:2px; border-radius:10px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =================== UTILS =================== */
.hidden{ display:none !important; }

/* =================== AMBIANCE OPTIONNELLE ===================
   Place ce div dans ton HTML si tu veux l’effet balayage :
   <div class="page-ambient-sweep" aria-hidden="true"></div>
   =========================================================== */