/* ============================================================================
   SANDIX+  |  Redesign "Campagne v3" — pages secondaires (sandix-redesign-pages.css)
   ----------------------------------------------------------------------------
   Couche commune pour les pages hors catalogue : compte, profils, réglages,
   premium, aide, contact, pages légales, 404, etc.
   Active via  body.sdx-pg  . Les pages « application » ajoutent aussi
   body.sdx-rd (pilule de navigation, voir sandix-redesign.css).
   Ne touche à aucune logique : couleurs, typographie, en-tête, boutons, champs.
   ============================================================================ */

body.sdx-pg {
  --pg-bg: #0c1014;
  --pg-panel: #151b1e;
  --pg-line: rgba(255, 255, 255, .10);
  --pg-line-2: rgba(255, 255, 255, .22);
  --pg-dim: rgba(255, 255, 255, .58);
  --pg-red: #ea2119;
  background-color: var(--pg-bg);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: rdPageIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
body.sdx-pg.rd-leaving { opacity: 0; transition: opacity .2s ease; }
.sdx-pg ::selection { background: var(--pg-red); color: #fff; }
.sdx-pg :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pg-bg), 0 0 0 4px #fff; }
@keyframes rdPageIn { from { opacity: 0; } to { opacity: 1; } }

/* ── En-tête : transparent, logo espacé, liens « retour » en petites capitales ── */
.sdx-pg header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  transition: background .3s ease;
}
.sdx-pg header.is-scrolled {
  background: linear-gradient(to bottom, rgba(12, 16, 20, .95), rgba(12, 16, 20, 0)) !important;
}
.sdx-pg .logo, .sdx-pg header .logo {
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.sdx-pg .logo .plus, .sdx-pg .logo span.plus { color: var(--pg-red); letter-spacing: 0; }
.sdx-pg header a:not(.logo):not(#activeProfile):not(.sbn-item):not([class*="btn"]) {
  color: var(--pg-dim);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.sdx-pg header a:not(.logo):not(#activeProfile):not(.sbn-item):not([class*="btn"]):hover { color: #fff; }

/* « Back » dans l'en-tête : lien discret, pas une pilule */
.sdx-pg header .back-btn, .sdx-pg header .btn-back {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; width: auto !important; height: auto !important;
  color: var(--pg-dim) !important; font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.sdx-pg header .back-btn:hover, .sdx-pg header .btn-back:hover { color: #fff !important; background: transparent !important; }

/* ── Titres ── */
.sdx-pg h1, .sdx-pg h2 { letter-spacing: -.005em; }
.sdx-pg h1 { font-weight: 800; }
.sdx-pg main h1, .sdx-pg .page-title { font-family: inherit; }

/* ── Boutons : principal = pilule blanche, secondaire = pilule contour (comme la vidéo) ── */
.sdx-pg .btn-primary, .sdx-pg .btn.btn-primary, .sdx-pg .btn-save,
.sdx-pg .dl-btn, .sdx-pg .sandixplus-btn {
  background: #fff !important;
  color: var(--pg-bg) !important;
  border: 1.5px solid #fff !important;
  border-radius: 999px !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
.sdx-pg .btn-primary:hover, .sdx-pg .btn.btn-primary:hover, .sdx-pg .btn-save:hover,
.sdx-pg .dl-btn:hover, .sdx-pg .sandixplus-btn:hover { background: #f1f1f1 !important; transform: scale(1.04); }
.sdx-pg .btn-primary:active, .sdx-pg .btn-save:active, .sdx-pg .dl-btn:active { transform: scale(.97); }
.sdx-pg .btn-secondary, .sdx-pg .btn.btn-secondary, .sdx-pg .btn-ghost,
.sdx-pg .btn-back, .sdx-pg .back-btn {
  background: rgba(255, 255, 255, .04) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .55) !important;
  border-radius: 999px !important;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sdx-pg .btn-secondary:hover, .sdx-pg .btn-ghost:hover, .sdx-pg .btn-back:hover, .sdx-pg .back-btn:hover {
  background: rgba(255, 255, 255, .14) !important; border-color: #fff !important;
}
.sdx-pg .btn-danger { border-radius: 999px !important; }
.sdx-pg button:disabled, .sdx-pg .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Champs ── */
.sdx-pg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.sdx-pg select, .sdx-pg textarea {
  background-color: #10161a;
  border: 1px solid var(--pg-line-2);
  border-radius: 10px;
  color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sdx-pg input:focus, .sdx-pg select:focus, .sdx-pg textarea:focus {
  border-color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.sdx-pg input::placeholder, .sdx-pg textarea::placeholder { color: rgba(255, 255, 255, .38); }
.sdx-pg input[type="checkbox"], .sdx-pg input[type="radio"] { accent-color: var(--pg-red); }

/* ── Liens de contenu & panneaux ── */
.sdx-pg main a:not([class*="btn"]):not(.sbn-item) { text-underline-offset: 3px; }
.sdx-pg .card, .sdx-pg .panel, .sdx-pg .settings-card, .sdx-pg .help-card, .sdx-pg .plan-card {
  background: var(--pg-panel);
  border: 1px solid var(--pg-line);
  border-radius: 12px;
}
.sdx-pg hr { border-color: var(--pg-line); }
.sdx-pg table th { letter-spacing: .08em; }

/* ── Pages « application » : de la place pour la pilule de navigation ── */
body.sdx-pg.sdx-rd { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  body.sdx-pg { animation: none !important; }
  .sdx-pg * { transition-duration: .01ms !important; }
}

/* ── Pages « application » : l'en-tête de l'accueil (flex-start) ne s'applique pas ici ── */
.sdx-pg.sdx-rd header {
  display: flex; align-items: center;
  justify-content: space-between !important;
  gap: 16px;
}
.sdx-pg header { padding-left: clamp(20px, 3.3vw, 60px) !important; padding-right: clamp(20px, 3.3vw, 60px) !important; }
.sdx-pg.sdx-rd header > div:last-child { margin-left: 0; }
.sdx-pg.sdx-rd header > a[href="index.html"]:not(.logo) { margin-left: 0; }

/* La pilule ne dépend pas des styles de la page hôte (soulignement, taille de police) */
.sdx-rd .sandix-bottom-nav, .sdx-rd .sandix-bottom-nav a { text-decoration: none !important; }
.sdx-rd .sandix-bottom-nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sdx-rd .sandix-bottom-nav .sbn-item { font-size: clamp(13px, 1.05vw, 17px) !important; color: var(--rd-dim); }
.sdx-rd .sandix-bottom-nav .sbn-item.is-active { color: #fff; }

/* en-têtes Tailwind (filter.html) : « BACK TO MENU » à droite, logo avec + rouge de marque */
.sdx-pg header > div.relative { flex: 1 1 auto; width: 100%; }
.sdx-pg header [class*="left-1/2"] { left: auto !important; right: 0 !important; transform: none !important; }
.sdx-pg header .text-red-600 { color: var(--pg-red) !important; }
.sdx-pg header .logo { font-size: clamp(22px, 2.05vw, 30px) !important; line-height: 1; }
.sdx-pg header .logo span, .sdx-pg header .logo .plus { font-size: inherit !important; }
.sdx-pg header .headlink { color: var(--pg-dim); }

/* ── Premium & Download : mise en page responsive (ces pages forçaient une largeur fixe) ── */
.sdx-pg .premium-card { box-sizing: border-box; }
@media (max-width: 760px) {
  .sdx-pg .premium-card { margin: 0 auto; padding: 0 16px; }
  .sdx-pg .plan-grid { grid-template-columns: 1fr; gap: 14px; }
  .sdx-pg .hero-stats { grid-template-columns: 1fr; }
  .sdx-pg .dl-hero-split { grid-template-columns: 1fr; padding: 36px 22px; gap: 22px; }
  .sdx-pg .dl-hero-split > :last-child { max-width: 320px; margin: 0 auto; }
  .sdx-pg .dl-grid, .sdx-pg .dl-why-grid { grid-template-columns: 1fr; gap: 14px; }
  .sdx-pg header { gap: 12px; }
}