:root{
  --tls-blue:#55A1B4;
  --tls-orange:#EB7724;
  --border:#E7EFF2;
  --text:#333;
  --ok:#1ea463;
  --danger:#c43d3d;
  --header-h:72px;
  --nav-h:72px;
  --container:980px;
  --radius:16px;
}

/* Neutraliser sidebar éventuellement */
.sidebar, #tls-sidebar, .tls-sidebar{display:none !important;}
@media (min-width:960px){ body{ padding-left:0 !important; }}

/* ========== BLOCS COMMUNS (variables, boutons, etc.) ========== */
.tls-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:800;font-family:"League Spartan",system-ui,sans-serif;font-size:15px;cursor:pointer}
.tls-btn--outline{background:#fff;border-color:#d9e9ee;color:#0e4a56}
.tls-btn--primary{background:var(--tls-orange);border-color:var(--tls-orange);color:#fff}
.tls-btn--success{background:var(--ok);border-color:var(--ok);color:#fff}
.tls-btn--ghost{background:#fff;border:1px solid #e8eef1;color:#2b3a40}

/* Overlays: masqués par défaut */
.tls-fs, .tls-ovl{display:none}

/* Badge générique */
.tls-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;font-weight:800;font-family:"League Spartan",system-ui,sans-serif;background:#eaf6fa;color:#0e4a56;border:1px solid #cfe9ef;margin:0 0 10px}

/* Carte générique */
.tls-card{width:clamp(300px, 92vw, 860px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* Correctif padding bas carte */
.tls-card{padding-bottom:28px}

/* ========== ASTUCE / LEÇON (scopés) ========== */
.tls-ls-subtype-astuce .tls-topbar,
.tls-ls-subtype-lecon  .tls-topbar{
  position:sticky;top:0;z-index:1000;background:var(--tls-orange);height:var(--header-h)
}
.tls-ls-subtype-astuce .tls-topbar .inner,
.tls-ls-subtype-lecon  .tls-topbar .inner{
  max-width:var(--container);height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;position:relative
}
.tls-ls-subtype-astuce .tls-topbar .title,
.tls-ls-subtype-lecon  .tls-topbar .title{
  margin:0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:clamp(22px,3.6vw,32px);color:#fff;text-align:center
}
.tls-ls-subtype-astuce .tls-topbar .close,
.tls-ls-subtype-lecon  .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer
}

.tls-ls-subtype-astuce .tls-screen,
.tls-ls-subtype-lecon  .tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%;background:var(--tls-blue);
  display:flex;align-items:center;justify-content:center;padding:24px
}

/* Bottombar astuce/leçon */
.tls-ls-subtype-astuce .tls-bottombar,
.tls-ls-subtype-lecon  .tls-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.98);border-top:1px solid var(--border)
}
.tls-ls-subtype-astuce .tls-bottombar .inner,
.tls-ls-subtype-lecon  .tls-bottombar .inner{
  max-width:var(--container);margin:0 auto;height:var(--nav-h);padding:0 16px;display:flex;align-items:center;justify-content:flex-end
}

/* Overlays astuce/leçon */
.tls-ls-subtype-astuce .tls-ovl,
.tls-ls-subtype-lecon  .tls-ovl{
  position:fixed;inset:0;background:rgba(14,40,47,.6);backdrop-filter:blur(2px);align-items:center;justify-content:center;z-index:2000
}
.tls-ovl__modal{width:min(560px,92vw);background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.15);overflow:hidden}
.tls-ovl__body{padding:18px;text-align:center}
.tls-ovl__title{margin:6px 0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;color:#12343c}
.tls-ovl__desc{margin:0;color:#4a5559}
.tls-ovl__actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ========== INFOGRAPHIE (scopé) ========== */
.tls-ls-subtype-infographie .tls-topbar{
  position:sticky;top:0;z-index:1000;background:var(--tls-orange);height:var(--header-h)
}
.tls-ls-subtype-infographie .tls-topbar .inner{
  max-width:var(--container);height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;position:relative
}
.tls-ls-subtype-infographie .tls-topbar .title{
  margin:0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:clamp(22px,3.6vw,32px);color:#fff;text-align:center
}
.tls-ls-subtype-infographie .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer
}

.tls-ls-subtype-infographie .tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%;background:var(--tls-blue);
  display:flex;align-items:center;justify-content:center;padding:24px
}

/* Carte infographie : image BOXED scrollable + CTA plein écran */
.tls-ls-subtype-infographie .tls-card{}
.tls-ls-subtype-infographie .tls-h1{margin:0 0 8px;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:clamp(24px,3.6vw,32px);color:#12343c}
.tls-ls-subtype-infographie .tls-lead{margin:0 0 12px;color:#4a5559}

.tls-ls-subtype-infographie .tls-info-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#F3FBFD}
.tls-ls-subtype-infographie .tls-info-box{max-height:50vh;overflow:auto}
.tls-ls-subtype-infographie .tls-info-box img{display:block;max-width:100%;height:auto}
.tls-ls-subtype-infographie .tls-info-actions{display:flex;justify-content:flex-end;padding:10px;background:#fff;border-top:1px solid var(--border)}

/* Bottombar infographie */
.tls-ls-subtype-infographie .tls-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.98);border-top:1px solid var(--border)
}
.tls-ls-subtype-infographie .tls-bottombar .inner{
  max-width:var(--container);margin:0 auto;height:var(--nav-h);padding:0 16px;display:flex;align-items:center;justify-content:flex-end
}

/* Overlay PLEIN ÉCRAN infographie */
.tls-ls-subtype-infographie .tls-fs{
  position:fixed;inset:0;background:rgba(14,40,47,.85);align-items:center;justify-content:center;z-index:200
}
.tls-ls-subtype-infographie .tls-fs__inner{width:min(1200px,94vw);height:min(90vh,94vh);background:#000;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;border:1px solid #2b3a40}
.tls-ls-subtype-infographie .tls-fs__img{max-width:100%;max-height:100%;display:block}

/* ===== Modal de sortie (Infographie) ===== */
.tls-ls-subtype-infographie .tls-exit{position:fixed;inset:0;display:none;z-index:2100}
.tls-ls-subtype-infographie .tls-exit.is-open{display:block}
.tls-ls-subtype-infographie .tls-exit__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tls-ls-subtype-infographie .tls-exit__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);background:#fff;border-radius:16px;border:1px solid var(--border);
  padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.tls-ls-subtype-infographie .tls-exit__title{
  margin:0 0 6px;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:22px;color:#12343c
}
.tls-ls-subtype-infographie .tls-exit__desc{margin:0 0 16px;color:#55656b}
.tls-ls-subtype-infographie .tls-exit__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* ===== Infographie “boxed” scrollable (pas de déformation) ===== */
.info-box{
  border: 1px solid #E7EFF2;
  border-radius: 12px;
  background: #F3FBFD;
  overflow: hidden;
}
.info-box__viewport{
  max-height: 56vh;     /* hauteur de lecture “confort” */
  overflow: auto;       /* scroll dans la box */
}
.info-box__img{
  display: block;
  width: 100%;
  height: auto;         /* pas de déformation */
}
.info-box__actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fff;
  border-top: 1px solid #E7EFF2;
  padding: 10px;
}

/* p’tit confort : évite que la bottom bar chevauche le contenu */
.ls-page-padding-bottom{ padding-bottom: 90px; } /* applique cette classe sur le conteneur si besoin */

/* ===== Overlays (communs à tous les sous-types) ===== */

/* empêche le scroll de la page quand un overlay est ouvert */
body.tls-fs-open,
body.tls-ovl-open { overflow: hidden; }

/* masque topbar & bottombar en plein écran */
body.tls-fs-open .tls-topbar,
body.tls-fs-open .tls-bottombar { display: none !important; }

/* Plein écran (image) — commun */
.tls-fs{
  position: fixed;
  inset: 0;
  display: none;               /* le JS passera en display:flex */
  align-items: center;
  justify-content: center;
  background: rgba(14,40,47,.85);
  z-index: 3000;               /* plus haut que la top/bottom bar */
}
.tls-fs__inner{ max-width: 96vw; max-height: 92vh; }
.tls-fs__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;         /* pas de déformation */
  display: block;
}

/* Modal succès — commun */
.tls-ovl{
  position: fixed;
  inset: 0;
  display: none;               /* le JS passera en display:flex */
  align-items: center;
  justify-content: center;
  background: rgba(14,40,47,.6);
  backdrop-filter: blur(2px);
  z-index: 3000;
}
.tls-ovl__modal{
  width: min(560px, 92vw);
  background: #fff;
  border: 1px solid var(--border, #E7EFF2);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  overflow: hidden;
}
.tls-ovl__body{ padding: 18px; text-align: center; }
.tls-ovl__title{
  margin: 6px 0;
  font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 800; color: #12343c;
}
.tls-ovl__desc{ margin: 0; color: #4a5559; }
.tls-ovl__actions{ display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* ===== Infographie — ajustements ===== */

/* on garde ta version “boxed scrollable” */
.tls-ls-subtype-infographie .tls-info-box{
  max-height: 56vh;            /* un peu plus haut que 50vh */
  overflow: auto;
}
.tls-ls-subtype-infographie .tls-info-box img{
  display: block;
  width: 100%;
  height: auto;                 /* pas de déformation */
}

/* petit padding bas pour ne pas être recouvert par la bottombar */
.tls-ls-subtype-infographie .tls-screen{
  padding-bottom: calc(var(--nav-h, 72px) + 24px);
}

/* Bouton de fermeture (overlay infographie plein écran) */
.tls-fs__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 3100;
}
.tls-fs__close:hover {
  background: rgba(0,0,0,.45);
}

/* ===== VIDEO-FLASH (mêmes patterns que astuce/leçon) ===== */
.tls-ls-subtype-video-flash .tls-topbar{
  position:sticky;top:0;z-index:1000;background:var(--tls-orange);height:var(--header-h)
}
.tls-ls-subtype-video-flash .tls-topbar .inner{
  max-width:var(--container);height:100%;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:center;position:relative
}
.tls-ls-subtype-video-flash .tls-topbar .title{
  margin:0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;
  font-size:clamp(22px,3.6vw,32px);color:#fff;text-align:center
}
.tls-ls-subtype-video-flash .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer
}

.tls-ls-subtype-video-flash .tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%;background:var(--tls-blue);
  display:flex;align-items:center;justify-content:center;padding:24px
}

.tls-ls-subtype-video-flash .tls-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.98);border-top:1px solid var(--border)
}
.tls-ls-subtype-video-flash .tls-bottombar .inner{
  max-width:var(--container);margin:0 auto;height:var(--nav-h);
  padding:0 16px;display:flex;align-items:center;justify-content:flex-end
}

/* lecteur responsive 16:9 */
.tls-video-box{position:relative;width:100%;padding-top:56.25%;background:#000;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tls-video-box iframe, 
.tls-video-box video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* overlay succès — déjà stylé globalement via .tls-ovl[...] */

/* ===== Modal de sortie (vidéo-flash) ===== */
/* on rend ça robuste: marche si le JS met .is-open OU aria-hidden="false" */
.tls-ls-subtype-video-flash .tls-exit{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2100;                /* au-dessus de la top/bottom bar */
}
.tls-ls-subtype-video-flash .tls-exit.is-open,
.tls-ls-subtype-video-flash .tls-exit[aria-hidden="false"]{
  display: block;
}
.tls-ls-subtype-video-flash .tls-exit__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.tls-ls-subtype-video-flash .tls-exit__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.tls-ls-subtype-video-flash .tls-exit__title{
  margin: 0 0 6px;
  font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #12343c;
}
.tls-ls-subtype-video-flash .tls-exit__desc{
  margin: 0 0 16px;
  color: #55656b;
}
.tls-ls-subtype-video-flash .tls-exit__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ===== TEMPLATE (mêmes patterns que infographie/astuce/leçon) ===== */
.tls-ls-subtype-template .tls-topbar{
  position:sticky;top:0;z-index:1000;background:var(--tls-orange);height:var(--header-h)
}
.tls-ls-subtype-template .tls-topbar .inner{
  max-width:var(--container);height:100%;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:center;position:relative
}
.tls-ls-subtype-template .tls-topbar .title{
  margin:0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;
  font-size:clamp(22px,3.6vw,32px);color:#fff;text-align:center
}
.tls-ls-subtype-template .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer
}

/* Écran fond bleu + carte centrée */
.tls-ls-subtype-template .tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%;background:var(--tls-blue);
  display:flex;align-items:center;justify-content:center;padding:24px
}

/* Bottombar */
.tls-ls-subtype-template .tls-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.98);border-top:1px solid var(--border)
}
.tls-ls-subtype-template .tls-bottombar .inner{
  max-width:var(--container);margin:0 auto;height:var(--nav-h);
  padding:0 16px;display:flex;align-items:center;justify-content:flex-end
}

/* Overlay succès (centré) */
.tls-ls-subtype-template .tls-ovl{
  position:fixed;inset:0;background:rgba(14,40,47,.6);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:2000
}
.tls-ls-subtype-template .tls-ovl .tls-ovl__modal{
  width:min(560px,92vw);background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.15);overflow:hidden
}
.tls-ls-subtype-template .tls-ovl__body{padding:18px;text-align:center}
.tls-ls-subtype-template .tls-ovl__title{
  margin:6px 0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;color:#12343c
}
.tls-ls-subtype-template .tls-ovl__desc{margin:0;color:#4a5559}
.tls-ls-subtype-template .tls-ovl__actions{
  display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap
}

/* Modal sortie (croix) */
.tls-ls-subtype-template .tls-exit{position:fixed;inset:0;display:none;z-index:2100}
.tls-ls-subtype-template .tls-exit.is-open{display:block}
.tls-ls-subtype-template .tls-exit__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tls-ls-subtype-template .tls-exit__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);background:#fff;border-radius:16px;border:1px solid var(--border);
  padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.tls-ls-subtype-template .tls-exit__title{
  margin:0 0 6px;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:22px;color:#12343c
}
.tls-ls-subtype-template .tls-exit__desc{margin:0 0 16px;color:#55656b}
.tls-ls-subtype-template .tls-exit__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* Grille 2/3 – 1/3 + cartes */
.tls-ls-template .tpl-grid{
  display:grid;grid-template-columns: 2fr 1fr;gap:18px;margin:10px 0 0 0
}
.tls-ls-template .tpl-doc__box{
  border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#f8fafc
}
.tls-ls-template .tpl-embed-pdf{width:100%;height:68vh;border:0;border-radius:8px}
.tls-ls-template .tpl-doc__fallback{margin:.5rem 0 0}
.tls-ls-template .tpl-doc__empty,.tls-ls-template .tpl-doc__nofile{padding:16px}
.tls-ls-template .tpl-side{display:flex;flex-direction:column;gap:16px}
.tls-ls-template .tpl-card{
  border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:14px
}
.tls-ls-template .tpl-card__title{
  margin:0 0 8px;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;color:#12343c;font-size:18px
}
.tls-ls-template .tpl-card__content{color:#4a5559}
.tls-ls-template .tpl-card__actions{margin-top:12px}

@media (max-width: 900px){
  .tls-ls-template .tpl-grid{grid-template-columns:1fr}
  .tls-ls-template .tpl-embed-pdf{height:56vh}
}

/* ===== TEMPLATE (compléments) ===== */

/* Grille 2/3 – 1/3 */
.tls-ls-template .tpl-grid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:18px;
  margin-top:10px;
}

/* Zone document (2/3) */
.tls-ls-template .tpl-doc__box{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#f8fafc;
}
.tls-ls-template .tpl-embed-pdf{width:100%;height:68vh;border:0;border-radius:8px}
.tls-ls-template .tpl-doc__fallback{margin:.6rem 0 0}
.tls-ls-template .tpl-doc__empty,
.tls-ls-template .tpl-doc__nofile{padding:16px;color:#4a5559}

/* Sidebar (1/3) : deux “carrés” avec léger border */
.tls-ls-template .tpl-side{display:flex;flex-direction:column;gap:16px}
.tls-ls-template .tpl-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:14px;
}
.tls-ls-template .tpl-card__title{
  margin:0 0 8px;
  font-family:"League Spartan",system-ui,sans-serif;
  font-weight:800;
  color:#12343c;
  font-size:18px;
}
.tls-ls-template .tpl-card__content{color:#4a5559}
.tls-ls-template .tpl-card__actions{margin-top:12px}

/* Bouton download orange + centré + pleine largeur */
.tls-btn--block{ display:block; width:100%; text-align:center; }

/* Responsive */
@media (max-width: 900px){
  .tls-ls-template .tpl-grid{grid-template-columns:1fr}
  .tls-ls-template .tpl-embed-pdf{height:56vh}
}

/* ===== GUIDE PRATIQUE ===== */
.tls-ls-subtype-guide .tls-topbar{
  position:sticky;top:0;z-index:1000;background:var(--tls-orange);height:var(--header-h)
}
.tls-ls-subtype-guide .tls-topbar .inner{
  max-width:var(--container);height:100%;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:center;position:relative
}
.tls-ls-subtype-guide .tls-topbar .title{
  margin:0;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;
  font-size:clamp(22px,3.6vw,32px);color:#fff;text-align:center
}
/* croix topbar */
.tls-ls-subtype-guide .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer
}

/* Écran fond bleu + carte centrée */
.tls-ls-subtype-guide.tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%;background:var(--tls-blue);
  display:flex;align-items:flex-start;justify-content:center;padding:24px
}

/* Sections plein largeur dans la carte */
.tls-ls-subtype-guide .tls-section{margin:16px 0}
.tls-ls-subtype-guide .tls-section--box{
  border:1px solid var(--border);border-radius:12px;padding:16px 18px;background:#fff
}
.tls-ls-subtype-guide .tls-h2{margin:.2rem 0 1rem;font-size:1.125rem}
.tls-ls-subtype-guide .tls-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tls-ls-subtype-guide .tls-pill{
  display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);
  border-radius:999px;padding:4px 10px;background:#F3FBFD;color:#0e4a56;
  font-weight:700;font-family:"League Spartan",system-ui
}
.tls-ls-subtype-guide .tls-steps{display:grid;gap:12px}
.tls-ls-subtype-guide .tls-step{border:1px solid #e8eef1;border-radius:12px;padding:12px;background:#fcfdfd}
.tls-ls-subtype-guide .tls-step__head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.tls-ls-subtype-guide .tls-step__num{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--tls-orange);color:#fff;font-weight:800
}
.tls-ls-subtype-guide .tls-step__title{margin:0;font-size:1rem}

/* Bottombar */
.tls-ls-subtype-guide ~ .tls-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.98);border-top:1px solid var(--border)
}
.tls-ls-subtype-guide ~ .tls-bottombar .inner{
  max-width:var(--container);margin:0 auto;height:var(--nav-h);padding:0 16px;
  display:flex;align-items:center;justify-content:flex-end
}

/* Modale de sortie (réutilise le style centré) */
.tls-exit{position:fixed;inset:0;display:none;z-index:2100}
.tls-exit.is-open{display:block}
.tls-exit__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tls-exit__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);background:#fff;border-radius:16px;border:1px solid var(--border);
  padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.tls-exit__title{
  margin:0 0 6px;font-family:"League Spartan",system-ui,sans-serif;font-weight:800;font-size:22px;color:#12343c
}
.tls-exit__desc{margin:0 0 16px;color:#55656b}
.tls-exit__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* ===== GUIDE PRATIQUE — Top bar ===== */
.tls-ls-subtype-guide .tls-topbar{
  position: sticky; top: 0; z-index: 1000;
  background: var(--tls-orange); height: var(--header-h);
}
.tls-ls-subtype-guide .tls-topbar .inner{
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tls-ls-subtype-guide .tls-topbar .title{
  margin: 0; font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(22px,3.6vw,32px); color: #fff; text-align: center;
}
.tls-ls-subtype-guide .tls-topbar .close{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; text-decoration: none; font-size: 22px; cursor: pointer;
  }
  /* /* === GRILLE D'ANALYSE === */
/* 1) FIX : fermer correctement ce bloc existant */
.tls-ls-subtype-guide .tls-topbar .close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;
  text-decoration:none;font-size:22px;cursor:pointer;
} /* <-- cette accolade manquait chez toi */

/* 2) GRILLE D'ANALYSE — topbar / screen / card / bottombar (scopés via le WRAPPER) */
.tls-ls-subtype-grille-analyse .tls-topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--tls-orange); height:var(--header-h);
}
.tls-ls-subtype-grille-analyse .tls-topbar .inner{
  max-width:var(--container); height:100%; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.tls-ls-subtype-grille-analyse .tls-topbar .title{
  margin:0; font-family:"League Spartan",system-ui,sans-serif; font-weight:800;
  font-size:clamp(22px,3.6vw,32px); color:#fff; text-align:center;
}
.tls-ls-subtype-grille-analyse .tls-topbar .close{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:transparent; text-decoration:none; font-size:22px; cursor:pointer;
}

.tls-ls-subtype-grille-analyse .tls-screen{
  min-height:calc(100vh - var(--header-h) - var(--nav-h));
  width:100%; background:var(--tls-blue);
  display:flex; align-items:flex-start; justify-content:center; padding:24px;
}
.tls-ls-subtype-grille-analyse .tls-card{
  width:clamp(300px, 92vw, 980px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Remplacer les anciens sélecteurs frères (~) par des descendants */
.tls-ls-subtype-grille-analyse .tls-bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:rgba(255,255,255,.98); border-top:1px solid var(--border);
}
.tls-ls-subtype-grille-analyse .tls-bottombar .inner{
  max-width:var(--container); margin:0 auto; height:var(--nav-h); padding:0 16px;
  display:flex; align-items:center; justify-content:flex-end;
}

/* Table / champs (look & feel) */
.tls-ls-subtype-grille-analyse .tls-table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; background:#fff; }
.tls-ls-subtype-grille-analyse .tls-grid-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:760px; background:#fff; }
.tls-ls-subtype-grille-analyse .tls-grid-table thead th{
  background:#fdf1e9; border-bottom:1px solid var(--border); padding:12px; text-align:left;
  font-family:"League Spartan",system-ui; color:#0e4a56;
}
.tls-ls-subtype-grille-analyse .tls-grid-table tbody td{ border-top:1px solid var(--border); padding:10px; vertical-align:top; }
.tls-ls-subtype-grille-analyse .crit{ font-weight:700; color:#12343c; }
.tls-ls-subtype-grille-analyse .crit-desc{ color:#4a5559; }
.tls-ls-subtype-grille-analyse .tls-grid-table select{ min-width:160px; padding:6px 8px; border:1px solid #d9e9ee; border-radius:6px; }
.tls-ls-subtype-grille-analyse .tls-grid-table textarea{ width:100%; min-height:70px; resize:vertical; padding:10px; border:1px solid #d9e9ee; border-radius:10px; font-family:Nunito,system-ui; }
.tls-ls-subtype-grille-analyse .tls-actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* ===== EXERCICE GUIDÉ (mêmes patterns que les autres sous-types) ===== */
/* ===== Exercice guidé : topbar + écran bleu + carte + bottombar ===== */
.tls-ls-subtype-exercice-guide .tls-topbar{
  position: sticky; top: 0; z-index: 1000;
  background: var(--tls-orange); height: var(--header-h);
}
.tls-ls-subtype-exercice-guide .tls-topbar .inner{
  max-width: var(--container); height: 100%;
  margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tls-ls-subtype-exercice-guide .tls-topbar .title{
  margin: 0; font-family: "League Spartan", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(22px,3.6vw,32px); color: #fff; text-align: center;
}
.tls-ls-subtype-exercice-guide .tls-topbar .close{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: transparent; text-decoration: none; font-size: 22px; cursor: pointer;
}

/* Écran fond bleu + carte centrée */
.tls-ls-subtype-exercice-guide .tls-screen{
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  width: 100%; background: var(--tls-blue);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px;
}
.tls-ls-subtype-exercice-guide .tls-card{
  width: clamp(300px, 92vw, 980px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Bottombar */
.tls-ls-subtype-exercice-guide .tls-bottombar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: rgba(255,255,255,.98); border-top: 1px solid var(--border);
}
.tls-ls-subtype-exercice-guide .tls-bottombar .inner{
  max-width: var(--container); margin: 0 auto; height: var(--nav-h); padding: 0 16px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* Utilitaires éventuels */
.tls-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tls-pill{
  display:inline-flex; gap:6px; align-items:center;
  border:1px solid var(--border); border-radius:999px; padding:6px 10px;
  background:#F3FBFD; color:#0e4a56; font-weight:700; font-family:"League Spartan",system-ui;
}
.tls-section--box{
  border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:#fff;
}

/* ===== Défi créatif : topbar + écran bleu + carte + bottombar ===== */
.tls-ls-subtype-defi-creatif .tls-topbar{
  position: sticky; top: 0; z-index: 1000;
  background: var(--tls-orange); height: var(--header-h);
}
.tls-ls-subtype-defi-creatif .tls-topbar .inner{
  max-width: var(--container); height: 100%;
  margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tls-ls-subtype-defi-creatif .tls-topbar .title{
  margin: 0; font-family: "League Spartan", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(22px,3.6vw,32px); color: #fff; text-align: center;
}
.tls-ls-subtype-defi-creatif .tls-topbar .close{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: transparent; text-decoration: none; font-size: 22px; cursor: pointer;
}

/* Écran fond bleu + carte centrée */
.tls-ls-subtype-defi-creatif .tls-screen{
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  width: 100%; background: var(--tls-blue);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px;
}
.tls-ls-subtype-defi-creatif .tls-card{
  width: clamp(300px, 92vw, 980px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Bottombar */
.tls-ls-subtype-defi-creatif .tls-bottombar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: rgba(255,255,255,.98); border-top: 1px solid var(--border);
}
.tls-ls-subtype-defi-creatif .tls-bottombar .inner{
  max-width: var(--container); margin: 0 auto; height: var(--nav-h); padding: 0 16px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* Grille interne (2 colonnes) dans la carte */
.dc-grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 12px;
}
@media (max-width: 900px){ .dc-grid{ grid-template-columns: 1fr; } }

.dc-card{
  border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 16px; margin-bottom:20px;
}
.dc-h2{
  margin: 0 0 8px; font-family: "League Spartan",system-ui,sans-serif; font-weight: 800; color: #12343c; font-size: 18px;
}
.dc-sub{ margin: 0 0 10px; color: #4a5559; }

/* Champs réponse */
.dc-textarea{
  width: 100%; min-height: 150px; resize: vertical;
  border: 1px solid #d9e9ee; border-radius: 10px; padding: 10px; font: inherit;
}
.dc-file{ margin-top: 10px; }
.dc-fileprev{ margin-top: 6px; color: #4a5559; }
.dc-actions{ display: flex; justify-content: flex-end; margin-top: 10px; }

/* Utilitaires déjà utilisés ailleurs */
.tls-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tls-pill{
  display:inline-flex; gap:6px; align-items:center;
  border:1px solid var(--border); border-radius:999px; padding:6px 10px;
  background:#F3FBFD; color:#0e4a56; font-weight:700; font-family:"League Spartan",system-ui;
}

/* Uniformiser le bouton de validation en bottombar */
.tls-bottombar .tls-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:999px; font-weight:800;
  font-family:"League Spartan",system-ui,sans-serif; border:1px solid transparent;
}
.tls-bottombar .tls-btn--primary{
  background:var(--tls-orange); border-color:var(--tls-orange); color:#fff;
}
.tls-bottombar .tls-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* === Masterclass (sous-type) ====================================== */
body.tls-ls-subtype-masterclass .tls-card {
  /* rien de spécifique ici: on réutilise la carte globale */
}

/* Titres + badges : tu as déjà les styles globaux.
   On assure surtout le wrapper vidéo cohérent avec tes autres écrans */
body.tls-ls-subtype-masterclass .tls-video-wrap {
  margin: 16px 0 20px;
}

body.tls-ls-subtype-masterclass .tls-video-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  /* ratio 16:9 via padding hack (si oEmbed n'applique pas déjà son conteneur) */
}
body.tls-ls-subtype-masterclass .tls-video-box iframe,
body.tls-ls-subtype-masterclass .tls-video-box video {
  display: block;
  width: 100%;
  height: auto;
}

/* Texte (intro + texte) : même “respiration” que les autres sous-types */
body.tls-ls-subtype-masterclass .tls-lead p {
  margin: 0 0 12px;
}
body.tls-ls-subtype-masterclass .tls-lead ul,
body.tls-ls-subtype-masterclass .tls-lead ol {
  margin: 0 0 12px 1.25em;
}
body.tls-ls-subtype-masterclass .tls-lead img {
  max-width: 100%;
  height: auto;
}

/* Petites largeurs */
@media (max-width: 720px) {
  body.tls-ls-subtype-masterclass .tls-video-box { max-width: 100%; }
}

/* === Masterclass (sous-type) ====================================== */
body.tls-ls-subtype-masterclass .tls-video-wrap {
  margin: 16px 0 20px;
}
body.tls-ls-subtype-masterclass .tls-video-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
body.tls-ls-subtype-masterclass .tls-video-box iframe,
body.tls-ls-subtype-masterclass .tls-video-box video {
  display: block;
  width: 100%;
  height: auto;
}
body.tls-ls-subtype-masterclass .tls-lead p { margin: 0 0 12px; }
body.tls-ls-subtype-masterclass .tls-lead ul,
body.tls-ls-subtype-masterclass .tls-lead ol { margin: 0 0 12px 1.25em; }
body.tls-ls-subtype-masterclass .tls-lead img { max-width: 100%; height: auto; }
@media (max-width: 720px){
  body.tls-ls-subtype-masterclass .tls-video-box { max-width: 100%; }
}