:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #f3f4f6;
  --border: #e5e7eb;

  --sidebar-w: 280px;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

.tls-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:100}
.tls-header__inner{display:flex;align-items:center;gap:16px;padding:12px 20px;max-width:1200px;margin:0 auto}
.tls-brand{font-weight:700;font-size:18px}
.tls-burger{background:none;border:1px solid var(--border);padding:8px 12px;border-radius:10px;cursor:pointer}
.tls-header__actions .btn{border:1px solid var(--border);padding:8px 12px;border-radius:999px;display:inline-block}

.tls-container{max-width:1200px;margin:0 auto;padding:20px}
.tls-grid{display:grid;gap:20px}
@media (max-width: 980px){
  .tls-grid{grid-template-columns:1fr}
  .tls-sidebar{position:fixed;inset:60px 0 0 0;background:#fff;transform:translateX(-100%);transition:transform .25s ease;border-right:1px solid var(--border);z-index:90}
  .tls-sidebar.is-open{transform:none}
}

.tls-sidebar{border-right:1px solid var(--border);padding:16px}
.tls-sidenav{list-style:none;margin:0;padding:0}
.tls-sidenav__item a{display:block;padding:10px 12px;border-radius:12px}
.tls-sidenav__item.is-active a{background:var(--muted);font-weight:600}

.tls-content{min-height:60vh}
.tls-page-title{margin:0 0 16px;font-size:24px}
.tls-cards{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
@media (max-width: 680px){.tls-cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

.tls-two-cols{display:grid;grid-template-columns:2fr 1.2fr;gap:16px}
@media (max-width: 900px){.tls-two-cols{grid-template-columns:1fr}}

/* ===== TLS Header & Sidebar (style maquette Learning Space) ===== */
:root{
  --tls-blue:#55A1B4;
  --tls-orange:#EB7724;
  --tls-yellow:#F8B044;
  --tls-salmon:#F49A76;
  --tls-text:#333333;
  --tls-muted:#5f6a6e;
  --radius:14px;
  --gap:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 6px 24px rgba(0,0,0,.09);
  --border:#E7EFF2;
  --sidebar-w:260px;
  --header-h:65px;
}

/* Reset accessibilité */
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

/* HEADER (top bar blanche sticky) */
.header{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--border);}
.header .inner{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;font-family:"League Spartan",system-ui,sans-serif;color:var(--tls-blue)}
.brand .logo-mark{width:28px;height:28px;border-radius:8px;background: linear-gradient(145deg,var(--tls-blue), #7bc1d1);border:2px solid #ddf1f5}
.brand .logo-text{font-weight:800;letter-spacing:.2px}
.h-actions{display:flex;align-items:center;gap:10px}
.iconbtn{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#F3FBFD;border:1px solid var(--border);color:var(--tls-blue);text-decoration:none}
.icon{display:block;width:22px;height:22px}

/* Bouton burger (mobile d’abord) */
.tls-burger{display:inline-flex;}
@media (min-width: 960px){
  .tls-burger{display:none;}
}

/* SIDEBAR bleue, fixe sous le header */
.sidebar{
  width:var(--sidebar-w);
  background:var(--tls-blue);
  color:#fff;
  position:fixed;
  top:var(--header-h);
  left:0;
  bottom:0;
  padding:18px 12px;
  overflow:auto;
  z-index:110;
  transform:translateX(-100%);
  transition:transform .2s ease;
}
/* Ouverte */
body.tls-sidebar-open .sidebar{transform:none;}
/* Desktop : toujours ouverte */
@media (min-width: 960px){
  .sidebar{transform:none;}
  body.has-sidebar{padding-left:var(--sidebar-w);} /* décale le contenu seulement s'il y a une sidebar */
}

/* Liens de la side-nav */
.side-nav{display:block;}
.side-nav__ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.side-nav__ul li{margin:0;padding:0}
.side-nav__ul a{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:12px;text-decoration:none;color:#fff;
  font-family:"League Spartan",system-ui,sans-serif;font-weight:800;letter-spacing:.2px;border:2px solid transparent;
}
.side-nav__ul a:hover{background:#ffffff18;border-color:#ffffff55}
.side-nav__ul .current-menu-item > a,
.side-nav__ul a[aria-current="page"]{background:#ffffff22;border-color:#ffffff88}

/* Contenu principal (éviter qu’il passe sous la sidebar en desktop) */
@media (min-width: 960px){
  #main, .site-main, .content, .tls-ls-wrap{max-width:100%;margin:0 auto;}
  /* Si ton thème a des wrappers, le padding-left global plus haut suffit */
}

/* Fix responsive si pas de sidebar ouverte en mobile */
@media (max-width: 959px){
  body{padding-left:0;}  
}



/* Sur petits écrans, un peu d'air quand même */
@media (max-width: 520px){
  .header .inner{ padding-left: 8px; padding-right: 12px; }
}

/* SIDEBAR : se cale juste sous le header dynamiquement */
.sidebar{
  position: fixed;
  /* on se fie à la variable CSS --header-h mise à jour par JS */
  top:0;
  left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--tls-blue); color: #fff; padding: 18px 12px;
  overflow:auto; z-index:110; transform: translateX(-100%); transition: transform .2s ease;
}
body.tls-sidebar-open .sidebar{ transform: none; }
@media (min-width: 960px){
  .sidebar{ transform: none; }
  body{ padding-left: var(--sidebar-w); }
}

/* --- Brand déplacé dans la sidebar --- */
.side-brand{
  display:flex; align-items:center; justify-content:flex-start;
  padding:6px 6px 14px; margin:0 0 10px;}
.side-brand__link{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;}
.side-logo-mark{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(145deg, #ffffff, #dfe9eb);
  opacity:.9;
}
.side-logo-text{
  font-family:"League Spartan", system-ui, sans-serif;
  font-weight:800; letter-spacing:.2px; color:#fff;
}

/* Logo image (custom_logo) sur fond bleu */
.sidebar .custom-logo-link{display:flex; align-items:center;}
.sidebar img.custom-logo{max-height: 34px; height:auto; width:auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));}

/* Ajuste le padding haut de la sidebar (déjà calé sous le header via calc()) */
.sidebar{
  padding-top: 40px; /* un peu d'air au-dessus du logo */
}

/* ===== Pleine largeur TLS quand body a .tls-wide ===== */
body.tls-wide .site,
body.tls-wide .site-content,
body.tls-wide .content-area,
body.tls-wide .hentry,
body.tls-wide .wrap,
body.tls-wide .container,
body.tls-wide .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Si le thème ajoute encore un centrage interne, on force l'étalement */
body.tls-wide main,
body.tls-wide .main,
body.tls-wide #primary {
  max-width: none !important;
  width: 100% !important;
}

/* Conteneurs TLS : on garde un cadre confortable sur desktop/tablette */
body.tls-wide .tls-plan,
body.tls-wide .tls-ls-wrap,
body.tls-wide .tls-monplan,
body.tls-wide .mon-plan-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Grille KPI en 3 colonnes dès tablette/desktop */
@media (min-width: 900px){
  body.tls-wide .three-col,
  body.tls-wide .kpis,
  body.tls-wide .mp-kpis,
  body.tls-wide .tlsmp-kpis,
  body.tls-wide .plan-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
  }
}

/* Tabs / cartes : laissez-les respirer en largeur */
@media (min-width: 900px){
  body.tls-wide .tabs { gap: 12px; }
  body.tls-wide .flat-list .item,
  body.tls-wide .c-item { width: 100%; }
}

/* ===== PATCH LARGEUR PAGES "APP" (quand <body> a .tls-wide) ===== */

/* Neutralise TOUS les wrappers communs du thème, + ceux TLS */
body.tls-wide .site,
body.tls-wide .site-content,
body.tls-wide .content-area,
body.tls-wide .hentry,
body.tls-wide .wrap,
body.tls-wide .container,
body.tls-wide .entry-content,
body.tls-wide .tls-container,    /* <- AJOUT clef pour casser le max-width:1200px */
body.tls-wide .tls-grid {        /* si ta page est dans une grille thème */
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Si un autre wrapper interne recadre encore le flux principal */
body.tls-wide main,
body.tls-wide .main,
body.tls-wide #primary {
  max-width: none !important;
  width: 100% !important;
}

/* Maintenant, on définit NOTRE conteneur "confort" pour le contenu applicatif */
body.tls-wide .tls-plan,
body.tls-wide .tls-ls-wrap,
body.tls-wide .tls-monplan,
body.tls-wide .mon-plan-container {
  /* largeur cible desktop/tablette */
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Si tu veux vraiment exploiter TOUTE la largeur écran (au-dessus de 1440px) : dé-commente la ligne ci-dessous */
/* body.tls-wide .tls-plan { max-width: none !important; } */

/* Grille KPI en 3 colonnes sur tablette/desktop */
@media (min-width: 900px){
  body.tls-wide .three-col,
  body.tls-wide .kpis,
  body.tls-wide .mp-kpis,
  body.tls-wide .tlsmp-kpis,
  body.tls-wide .plan-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 24px !important;
  }
}

/* Tabs / cartes plus à l’aise sur desktop */
@media (min-width: 900px){
  body.tls-wide .tabs { gap: 12px !important; }
  body.tls-wide .flat-list .item,
  body.tls-wide .c-item { width: 100% !important; }
}