body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#s1
{
   display: flex;
   position: relative;
   padding: 10px 10px 10px 10px;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: center;
   margin: 0;
   box-sizing: border-box;
   font-size: 0;
}
#wb_Image1
{
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image1
{
   box-sizing: border-box;
   padding: 0;
   display: inline-block;
   width: 105px;
   height: auto;
}
#wb_Image2
{
   height: 100%;
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 5px 5px 5px 5px;
   display: inline-block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
#FlexContainer1
{
   display: flex;
   position: relative;
   padding: 0;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: flex-start;
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px solid #DEE2E6;
   border-radius: 0px;
   box-sizing: border-box;
   font-size: 0;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   flex-grow: 1;
   flex-shrink: 1;
   align-self: auto;
   padding: 0;
   margin: 0;
   text-align: right;
}
#wb_Text1 div
{
   text-align: right;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   flex-grow: 1;
   flex-shrink: 1;
   align-self: auto;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
/* ============================================================================
   ✅ OVERRIDES MINIMAUX — BOUTONS + FOOTER (inchangé)
   ========================================================================== */
:root{
  --list-pad-x: 10px;        /* ✨ NOUVEAU : air interne gauche/droite de la liste */
}

.lesson-btn{
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;

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

  width: 100%;       /* ✅ largeur relative au conteneur scrollable */
  max-width: 100vw;  /* sécurité pour ne pas dépasser l’écran */
  box-sizing: border-box;

  background:#fff;
  color:#000;
  border:1px solid #000;
  border-radius:8px;
  text-align:left;

  padding:0.7em 1em;
  margin:8px 0;

  font-size:clamp(0.95rem,3.2vw,1.05rem);
  line-height:1.35;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;

  white-space:normal;
  word-break:break-word;
}
.lesson-btn:hover{ background:#f5f5f5; }
.lesson-btn:active{ transform:translateY(1px); }

.lessons-footer{
  text-align:center; margin:0; padding:3px 0; background:#002147;
  flex:0 0 auto; width:100%; max-width:none; border-top:0;
}

/* ============================================================================
   ✅ NUMÉRO DE LEÇON — largeur fixe, jamais de retour à la ligne
   ========================================================================== */
.lesson-num{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.2ch;
  min-width: 3.2ch;

  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.lesson-title{
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 380px){
  .lesson-btn{ gap: 10px; }
}

/* ============================================================================
   ✅ LAYOUT (FLEX)
   ========================================================================== */
.full-screen{
  height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  overflow:hidden;
}

/* largeur max pour header + bloc liste (footer exclu) */
.lessons-header, #lessons-list{
  width:100%;
  max-width:480px;
  margin:0 auto;
}

/* ============================================================================
   ✅ HEADER — centrage garanti des titres + back à gauche
   ========================================================================== */
.lessons-header{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;      /* centre le bloc titres */
}

.lessons-header .back-btn{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  text-decoration:none;
}

.lessons-header .header-titles{
  text-align:center;           /* centre h1 + h2 */
  width:100%;
}

/* ============================================================================
   ✅ TITRE DE LA PAGE LESSONS — bleu marine
   ========================================================================== */
.lessons-header h1.title{
  text-align:center;
  width:100%;
  margin-top:4px;
  margin-bottom:8px;

  font-family:'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.2;

  color:#001f3f;   /* 🔵 bleu marine */
}

/* ============================================================================
   ✅ SOUS-TITRE — centré, gris clair
   ========================================================================== */
.lessons-header h2.subtitle{
  text-align:center;
  margin:0 0 4px 0;
  font-family:'Montserrat', sans-serif;
  font-size:clamp(1.2rem, 5vw, 1.6rem);
  line-height:1.3;
  font-weight:600;
  color:#666;   /* gris clair */
}

/* ============================================================================
   ✅ ZONE LISTE — le conteneur SCROLLABLE est #lessons-list
   ========================================================================== */
#lessons-list{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;

  /* Scroll */
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* plus de bordure parasite */
  border: none;
  border-radius: 0;

  /* ✨ NOUVEAU : “air” interne pour décoller la scrollbar des boutons */
  padding: 8px 0;              /* haut/bas */
  padding-left:  var(--list-pad-x);
  padding-right: var(--list-pad-x);

  /* Espace avant footer */
  margin-bottom: 12px;

  /* Stabilise la scrollbar sans décalage */
  scrollbar-gutter: stable both-edges;

  /* ✨ important : la width inclut le padding, évite tout débordement */
  box-sizing: border-box;

  /* ✨ confort Firefox / WebKit */
  scrollbar-width: thin;
}
#lessons-list::-webkit-scrollbar{ width:10px; }

/* Le footer reste compact */
.lessons-footer{ flex:0 0 auto; }

/* Resserre un peu le H1 si besoin (fallback global) */
h1.title{ margin-top:4px; margin-bottom:8px; }

/* ============================================================================
   ✅ PAGE non scrollable
   ========================================================================== */
html, body{ overflow:hidden; }

/* ============================================================================
   ✅ BARRE DE PROGRESSION DANS LES BOUTONS DE LEÇON
   ========================================================================== */
.lesson-btn{
  position: relative;
  overflow: hidden;                 /* la barre reste dans le bouton */
}

/* Barre derrière le texte, largeur = var(--p) */
.lesson-btn::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;                /* top:0; right:auto; bottom:0; left:0 */
  width:var(--p, 0%);
  background:rgba(0,0,0,0.08);     /* gris léger, discret */
  pointer-events:none;
  transition:width .2s ease;       /* fluide quand le % change */
}

/* État terminé (vert clair) */
.lesson-btn.completed{
  background-color:#b9f6c1;
  color:#111;
  font-weight:700;
  border-color:#39a464;
}

/* petit badge % à droite si data-progress est présent */
.lesson-btn[data-progress]::after{
  content:attr(data-progress);
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:.85rem;
  opacity:.7;
}

/* ============================================================================
   ✅ SUPPRIMER L’ESPACE DU NUMÉRO DANS LES BOUTONS DE LEÇON
   ========================================================================== */
.lesson-btn .lesson-num{
  display:none !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Si boutons en grid 2 colonnes (num + titre), forcer 1 colonne */
.lesson-btn{ grid-template-columns:1fr !important; }

/* Enlever la marge “après numéro” sur le titre */
.lesson-btn .lesson-title{ margin-left:0 !important; }