/*************************************************************
 * GamePlatform — styles.css (FULL REPLACE)
 * Thème sombre uni + header + dropdowns + rail gauche overlay
 *************************************************************/

/* ========== Reset minimal ========== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x: hidden; /* évite tout scroll horizontal global */
}

/* ========== Tokens (thème sombre UNI) ========== */
:root{
  /* Couleur sombre unique (change-la si tu veux une autre teinte) */
  --cg-bg: #0b0f19;

  /* Bordures & texte */
  --cg-border: rgba(255,255,255,.10);
  --cg-content: #e5e7eb;
  --cg-muted: #9ca3af;

  /* Accent (liens/boutons) */
  --primary-color: #3b82f6;

  /* Layout */
  --container-max: 1200px;
  --appbar-h: 64px;
  --rail-w: 64px;        /* rail compact */
  --rail-w-open: 220px;  /* rail au survol */
  --radius-md: 12px;

  /* Couleur pour les likes */
  --heart-color: #ff4d4d;

  /* …tes variables existantes… */
  --primary-dark: #2d7cb6;

  /* niveaux d'élévation + “dark” utilisés par game_detail.css */
  --cg-dark: #0d0f14;
  --cg-elev-1: #111827;
  --cg-elev-2: #0f172a;
}

/* ========== Global background + text ========== */
body{
  color: var(--cg-content);
  background: var(--cg-bg) !important; /* PAS de dégradé */
  padding-left: var(--rail-w);         /* réserve la place du rail compact */
}
@media (max-width: 992px){ body{ padding-left: 0; } }

.container{
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

/* ========== Liens ========== */
a{
  color: var(--primary-color);
  text-decoration: none;
}
a:hover{ color: #93c5fd; }

/* ========== Header / Navbar ========== */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--cg-bg) !important;
  border-bottom: 1px solid var(--cg-border);
}
.header .container{
  display: flex; align-items: center; gap: 1rem;
  height: var(--appbar-h);
}
.logo{
  color: var(--cg-content);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
}
.collapse.navbar-collapse{ margin-left: auto; }

/* pousse tout le bloc nav à droite */
.nav{ margin-left: auto; }

.nav-list{
  display: flex; gap: .75rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li > a{
  color: var(--cg-content);
  padding: .4rem .6rem;
  border-radius: 8px;
}
.nav-list > li > a:hover{
  background: rgba(255,255,255,.05);
  color: var(--primary-color);
}

/* Menu burger (mobile) */
.menu-toggle{
  display: none;
  background: transparent;
  border: 1px solid var(--cg-border);
  border-radius: 10px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  color: var(--cg-content);
}
.menu-toggle span{ display:block; width:18px; height:2px; background:var(--cg-content); margin:3px 0; }


/* ========== Search (header) ========== */
#search-form{ display: flex; align-items: center; gap: .5rem; }
.form-select, .form-control{
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  color: var(--cg-content);
  border-radius: 10px;
  padding: .45rem .6rem;
}
.form-control:focus{
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; border-radius: 10px; border: 1px solid var(--cg-border);
  padding: .45rem .7rem; font-weight: 600; cursor: pointer;
  background: var(--cg-bg);
  color: var(--cg-content);
}
.btn-primary{ background: var(--primary-color); color: #fff; border-color: transparent; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-success{ border-color: var(--primary-color); color: var(--primary-color); background: transparent; }
.btn-outline-success:hover{ background: var(--primary-color); color:#fff; }

/* ========== Dropdowns (notifications / messages / user) ========== */
.dropdown{ position: relative; }
.dropdown-content{
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: 12px;
  padding: .5rem;
  min-width: 300px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  display: none;
}
.dropdown:hover .dropdown-content{ display: block; }
.dropdown-content a{
  color: var(--cg-content); display: block; padding: .5rem .5rem; border-radius: 8px;
}
.dropdown-content a:hover{ background: rgba(255,255,255,.05); color: var(--primary-color); }
.dropdown-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.4rem .25rem .6rem; border-bottom:1px solid var(--cg-border); margin-bottom:.4rem;
}
.dropdown-footer{ border-top:1px solid var(--cg-border); padding-top:.4rem; margin-top:.4rem; }
.divider{ height:1px; background:var(--cg-border); margin:.35rem 0; }
.badge{
  display:inline-block; min-width:18px; height:18px; border-radius:999px;
  padding:0 .35rem; font-size:.75rem; line-height:18px; text-align:center;
  color:#fff; background:#ef4444;
}

/* Avatars & items */
.user-avatar, .notification-avatar img, .message-avatar img{
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.notification-item, .message-item{ display:flex; gap:.55rem; align-items:center; }
.notification-avatar, .message-avatar{
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--cg-bg); border: 1px solid var(--cg-border);
}
.notification-time, .message-time{ color: var(--cg-muted); }

/* ========== Modal ========== */
.modal{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); z-index: 1100;
}
.modal-content{
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: 12px;
  padding: 1rem;
  width: min(90%, 460px);
}
.modal-actions{ display:flex; gap:.5rem; margin-top:.75rem; }
.btn-secondary{ background: var(--cg-bg); color: var(--cg-content); border-color: var(--cg-border); }
.btn-link{ background: transparent; border: 0; color: var(--primary-color); }

/* ========== Footer ========== */
.footer{
  background: var(--cg-bg);
  border-top: 1px solid var(--cg-border);
  margin-top: 2rem;
}
.footer .container{ padding: 1.5rem 0; }
.footer-content{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-title{ margin: 0 0 .4rem; }
.footer-subtitle{ margin: 0 0 .35rem; }
.footer-text{ color: rgba(255,255,255,.8); margin: .4rem 0; }
.footer-links{ list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.footer-links a{ color: rgba(255,255,255,.85); }
.footer-links a:hover{ color: #fff; }
.footer-bottom{
  border-top: 1px solid var(--cg-border);
  margin-top: 1rem; padding-top: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.payment-methods i{ font-size: 1.2rem; opacity: .9; }

/* ========== RAIL GAUCHE (overlay, scroll unique) ========== */
.cg-rail{
  position: fixed; left: 0; top: var(--appbar-h); bottom: 0;
  width: var(--rail-w);
  background: var(--cg-bg) !important;   /* même couleur que la page */
  border-right: 1px solid var(--cg-border);
  z-index: 900;
  overflow-y: auto;    /* <-- UN SEUL SCROLL (vertical) pour tout le sidebar */
  overflow-x: hidden;  /* pas de scroll horizontal */
  transition: width .18s ease;
}
.cg-rail:hover{ width: var(--rail-w-open); } /* overlay — ne pousse pas la page */

.cg-rail__inner{ display:block; min-height:100%; }
.cg-rail__nav, .cg-rail__footer{
  overflow: visible !important;   /* pas de scroll séparé */
  border: 0;                      /* aucune séparation */
  padding: 10px 8px;
}

/* items */
.cg-rail__item{
  display: grid; grid-template-columns: 40px 1fr; align-items: center;
  gap: 10px; height: 44px; padding: 0 10px;
  border-radius: 12px; color: inherit; text-decoration: none;
}
.cg-rail__item i{ font-size: 20px; display: grid; place-items: center; }
.cg-rail__item:hover,
.cg-rail__item[aria-current="page"]{ background: rgba(255,255,255,.05); }

/* labels */
.cg-rail__label{
  color: var(--cg-content);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .15s, transform .15s;
}
.cg-rail:hover .cg-rail__label{ opacity: 1; transform: translateX(0); }

/* hr / séparateurs supprimés */
.cg-rail__sep{ display: none !important; }

/* Scrollbar du sidebar (discrète) */
.cg-rail{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.cg-rail::-webkit-scrollbar{ width: 8px; }
.cg-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 6px; }
.cg-rail::-webkit-scrollbar-track{ background: transparent; }

/* ========== Messages flash ========== */
.messages-container{
  position: fixed; right: 12px; bottom: 12px; z-index: 1200; display: grid; gap: .5rem;
}
.message{
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: 10px;
  padding: .6rem .8rem;
}
.message-close{ background: transparent; border: 0; color: var(--cg-content); font-size: 1rem; float: right; }

/* ========== Utilitaires ========== */
.u-text-muted{ color: var(--cg-muted); }
.u-center{ display: grid; place-items: center; }
.u-shadow{ box-shadow: 0 12px 32px rgba(0,0,0,.25); }

/***********************/
/* ======= FIX: un SEUL scroll vertical pour tout le sidebar ======= */
.cg-rail{
  position: fixed;
  left: 0;
  top: var(--appbar-h);
  bottom: 0;
  width: var(--rail-w);
  background: var(--cg-bg) !important;
  border-right: 1px solid var(--cg-border);

  /* >>> le point clé : forcer le scroll vertical du sidebar <<< */
  overflow-y: auto !important;   /* si tu veux la barre toujours visible: scroll */
  overflow-x: hidden !important; /* jamais d’horizontal */
  -webkit-overflow-scrolling: touch; /* scroll fluide mobile */
}

.cg-rail:hover{
  width: var(--rail-w-open);     /* overlay : n’écrase pas la page */
  background: var(--cg-bg) !important;
}

/* Le contenu interne ne scrolle plus séparément (pas de scroll dans footer) */
.cg-rail__inner{ display: block; padding-bottom: 12px; } /* évite le dernier item coupé */
.cg-rail__nav,
.cg-rail__footer{
  overflow: visible !important;
  max-height: none !important;
  border: 0 !important;               /* pas de séparation */
}

/* Empêche un enfant de créer un scroll horizontal */
.cg-rail__item{ min-width: 0; }
.cg-rail__label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barre de défilement (discrète) — optionnel */
.cg-rail{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.cg-rail::-webkit-scrollbar{ width: 8px; }
.cg-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 6px; }
.cg-rail::-webkit-scrollbar-track{ background: transparent; }


/*******************************icon**********/
/* Icônes uploadées dans le sidebar */
.cg-icon-img{
  width: 20px; height: 20px;
  object-fit: contain;            /* ne déforme pas l'image */
  display: inline-block;
  filter: none;                   /* laisse la couleur d'origine */
}

/* Fallback (Font Awesome) */
.cg-icon-fallback{
  font-size: 20px;
  width: 20px; text-align: center;
}

/* Empêche l’icône de forcer une largeur horizontale => pas de scroll X */
.cg-rail__item{ min-width: 0; }

/***** fix navebar ********/
/* ===== Navbar fixée en haut sur toutes les pages ===== */
:root{
  --appbar-h: 64px; /* ajuste si ta barre est plus grande/petite */
}

.header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--appbar-h);
  background: var(--cg-bg) !important;   /* même couleur que le site */
  border-bottom: 1px solid var(--cg-border);
  z-index: 1100;                          /* au-dessus du sidebar (z=900) */
  overflow: visible;                       /* laisse passer les dropdowns */
}
.header .container{
  height: 100%;                            /* aligne le contenu verticalement */
  display: flex; align-items: center;
}

/* Décale le contenu pour ne pas passer sous la navbar fixée */
body{
  padding-top: var(--appbar-h) !important; /* ajoute l’espace sous la navbar */
  /* on garde ton padding-left du rail ailleurs dans tes styles */
}

/* Menu mobile qui se déplie sous la barre fixe */
@media (max-width: 992px){
  .nav.active{
    top: var(--appbar-h) !important;       /* le menu commence sous la navbar */
  }
}

/* Sidebar reste calé sous la navbar fixe */
.cg-rail{
  top: var(--appbar-h) !important;
}
/********************/

 :root{ --appbar-h:64px; --rail-w:64px; --rail-w-open:220px; }
    body{ padding-left:var(--rail-w); }
    @media (max-width:992px){ body{ padding-left:0; } }

    .cg-rail{
      position:fixed; left:0; top:var(--appbar-h); bottom:0;
      width:var(--rail-w);
      background:var(--color-elev-2, #111);
      border-right:1px solid var(--color-border, rgba(255,255,255,.08));
      z-index:900; overflow:hidden; transition:width .18s ease;
    }
    .cg-rail:hover{ width:var(--rail-w-open); }

    .cg-rail__nav{ display:flex; flex-direction:column; gap:4px; height:100%; overflow:auto; padding:10px 8px; }
    .cg-rail__sep{ border:none; border-top:1px solid var(--color-border,rgba(255,255,255,.1)); margin:8px 10px; }

    .cg-rail__item{
      display:grid; grid-template-columns:40px 1fr; align-items:center;
      gap:10px; height:44px; padding:0 10px; border-radius:12px;
      color:inherit; text-decoration:none;
    }
    .cg-rail__item i{ font-size:20px; display:grid; place-items:center; }
    .cg-rail__item:hover,
    .cg-rail__item[aria-current="page"]{ background:var(--color-elev-3, #181a22); }

    .cg-rail__label{ white-space:nowrap; opacity:0; transform:translateX(-6px); transition:opacity .15s, transform .15s; }
    .cg-rail:hover .cg-rail__label{ opacity:1; transform:translateX(0); }

    body.rail-open{ padding-left:var(--rail-w-open); }
    @media (max-width:992px){
      .cg-rail{ top:0; width:0; border-right:0; }
      .cg-rail.open{ width:var(--rail-w-open); }
      body.rail-open{ padding-left:0; }
    }

/******* les appelles ***********/
/******* les appelles ***********/
/* ===========================
   Barre d'appel globale (base.html)
   =========================== */

/* Variables de thème */
:root {
  --call-bg: rgba(20, 22, 26, 0.92);
  --call-fg: #fff;
  --call-muted: rgba(255,255,255,0.7);
  --call-accent: #16a34a;   /* accept */
  --call-danger: #dc2626;   /* refuse/hangup */
  --call-warn: #f59e0b;     /* status pulse */
  --call-border: rgba(255,255,255,0.12);
  --call-shadow: 0 6px 18px rgba(0,0,0,0.24);
  --btn-fg: #fff;
}

@media (prefers-color-scheme: light) {
  :root {
    --call-bg: rgba(250, 250, 252, 0.96);
    --call-fg: #0f172a;
    --call-muted: rgba(15, 23, 42, 0.7);
    --call-accent: #16a34a;
    --call-danger: #dc2626;
    --call-warn: #d97706;
    --call-border: rgba(2, 6, 23, 0.08);
    --call-shadow: 0 6px 18px rgba(2,6,23,0.06);
    --btn-fg: #fff;
  }
}

/* Classe utilitaire pour masquer/afficher via JS */
.hidden { display: none !important; }

/* Calage du contenu quand la barre est fixée */
body.call-in-progress {
  /* ajuste si votre header principal occupe déjà de la place */
  padding-top: 56px;
}

/* Conteneur de la barre globale */
#globalCallHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 56px;
  padding: 10px 14px;

  background: var(--call-bg);
  color: var(--call-fg);
  border-bottom: 1px solid var(--call-border);
  box-shadow: var(--call-shadow);
  z-index: 2147483000; /* au-dessus des navbars/modales */
  backdrop-filter: saturate(1.2) blur(6px);
}

/* Zone de gauche : avatar/icone + libellé appel */
.global-call-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* ellipsis */
}

.global-call-icon {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: var(--call-fg);
  background: linear-gradient(135deg, #10b981, #3b82f6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

#globalCallerName {
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#globalCallStatus,
#callStatus {
  font-size: 0.875rem;
  color: var(--call-muted);
}

/* Zone centrale extensible */
.global-call-center {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Zone des boutons */
.global-call-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Boutons */
.btn-call {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 42px;
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-weight: 600;
  color: var(--btn-fg);
  line-height: 1;
  cursor: pointer;
  user-select: none;

  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}

.btn-call:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.btn-call:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

/* Variantes */
.btn-accept { background: var(--call-accent); }
.btn-refuse, .btn-hangup { background: var(--call-danger); }

.btn-ghost {
  background: transparent;
  color: var(--call-fg);
  box-shadow: none;
  border: 1px solid var(--call-border);
}

/* Icônes fontawesome intégrées aux boutons */
.btn-call i {
  font-size: 1rem;
}

/* Toast global */
#globalToast, #toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--call-bg);
  color: var(--call-fg);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--call-border);
  box-shadow: var(--call-shadow);
  z-index: 2147483600;
  max-width: min(92vw, 440px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Audio éléments globaux (non visibles) */
#globalLocalAudio,
#globalRemoteAudio,
#localAudio,
#remoteAudio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

/* État pulse pour “Appel entrant…” / “Connexion…” */
@keyframes callPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.is-ringing #globalCallStatus,
.is-connecting #globalCallStatus {
  color: var(--call-warn);
  animation: callPulse 1.2s ease-in-out infinite both;
}

/* Focus visible (a11y) */
.btn-call:focus-visible,
#globalBtnAccept:focus-visible,
#globalBtnRefuse:focus-visible,
#globalBtnHangup:focus-visible {
  outline: 3px solid rgba(59,130,246,0.6);
  outline-offset: 2px;
}

/* Petits écrans */
@media (max-width: 640px) {
  body.call-in-progress { padding-top: 64px; }

  #globalCallHeader {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 12px;
  }

  .global-call-center {
    order: 3;
    width: 100%;
  }

  .global-call-actions {
    margin-left: auto;
    gap: 6px;
  }

  #globalCallerName {
    max-width: 60vw;
  }

  /* Version compacte des boutons sur mobile */
  .btn-call {
    padding: 10px 10px;
    min-width: 38px;
  }
}

/* Réduction des animations si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/***descendre la navbar sous la barre d’appel :*/
.call-in-progress .header {
  top: 56px !important;
}
.call-in-progress .cg-rail {
  top: calc(var(--appbar-h) + 56px) !important;
}

.call-in-progress body {
  padding-top: calc(var(--appbar-h) + 56px) !important;
}
/********************************/
/* Bouton générique de l’appbar (desktop : on cache la loupe) */
.appbar-btn { display: none; }

@media (max-width: 992px) {
  .appbar-btn { display: inline-flex; }
}

/********************************/

:root{
  --rail-w: 260px;
  --rail-bg: #0b1220;      /* proche du screenshot (dark slate) */
  --rail-fg: #cbd5e1;      /* slate-300 */
  --rail-fg-dim: #94a3b8;  /* slate-400 */
  --rail-accent: #334155;  /* slate-700 */
  --rail-hover: rgba(148,163,184,.12);
  --header-h: 64px;        /* adapte si ton header a une autre hauteur */
}

/* Rail fixe à gauche */
.dev-rail{
  position: fixed;
  top: var(--header-h);
  left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--rail-bg);
  color: var(--rail-fg);
  border-right: 1px solid rgba(148,163,184,.12);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dev-rail__inner{ padding: 18px 12px 24px; }

.dev-rail__group{
  font-size: .78rem;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--rail-fg-dim);
  margin: 14px 10px 8px;
  text-transform: uppercase;
}

.dev-rail__item{
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 4px 6px;
  border-radius: 10px;
  color: var(--rail-fg);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.dev-rail__item i{ width: 20px; text-align: center; font-size: 14px; color: var(--rail-fg-dim); }
.dev-rail__item span{ font-size: .95rem; }

.dev-rail__item:hover{ background: var(--rail-hover); }
.dev-rail__item.active{
  background: rgba(59,130,246,.12);
  outline: 1px solid rgba(59,130,246,.15);
}

/* Pousser le contenu principal quand le rail est présent */
@media (min-width: 1024px){
  body > main{ margin-left: var(--rail-w); }
}
/* Mobile : masquer le rail (tu pourras le rendre collapsible plus tard) */
@media (max-width: 1023.98px){
  .dev-rail{ display: none; }
}

/*********************/
/* === FIX: ne pousser le contenu qu'une seule fois === */

/* 0) Ne jamais décaler globalement le body (annule l'ancien padding-left) */
body { padding-left: 0 !important; }

/* 1) Annule tout margin-left global sur <main> */
@media (min-width: 1024px){
  body > main { margin-left: 0 !important; }
}

/* 2) Pousser <main> UNIQUEMENT quand le rail développeur (.dev-rail) est présent */
@media (min-width: 1024px){
  .dev-rail ~ main { margin-left: var(--rail-w) !important; }
}

/* 3) Le rail overlay (.cg-rail) ne doit JAMAIS pousser la page */
.cg-rail ~ main { margin-left: 0 !important; }

/* 4) Mobile: pas de rail => pas de décalage */
@media (max-width: 1023.98px){
  .dev-rail { display: none; }
  .dev-rail ~ main { margin-left: 0 !important; }
}

/* 5) (Optionnel) Réduire la largeur du rail */
:root { --rail-w: 220px; } /* ex: 220 au lieu de 260 */