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;
   width: 100%;
   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: 323px;
   height: auto;
}
#wb_Heading1
{
   margin: 0 11px 0 11px;
   padding: 0;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
}
#Heading1
{
   height: 100%;
   margin: 0;
   width: 100%;
}
#wb_Image2
{
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image2
{
   box-sizing: border-box;
   padding: 0;
   display: inline-block;
   width: 309px;
   height: auto;
}
#bloc-display
{
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
}
#wb_Image3
{
   height: 100%;
   margin: 0 0 11px 0 ;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   display: inline-block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
#wb_Flex2
{
   background-color: #FFFFFF;
   background-image: none;
   border: 0px solid #DEE2E6;
   border-radius: 0px;
   box-sizing: border-box;
   position: relative;
}
#Flex2
{
   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-top: 0px;
   margin-bottom: 0px;
   margin-right: auto;
   margin-left: auto;
   max-width: 800px;
   box-sizing: border-box;
   font-size: 0;
}
/* === CRITICAL CSS (au-dessus-de-la-ligne) : structure + premier rendu === */
html,body{
  margin:0; padding:0; height:100%;
  background:#fff; color:#001f3f;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.full-screen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100dvh;
}
.logo{ width:clamp(80px,18vw,140px); max-height:14dvh; object-fit:contain; margin:0 auto; }
.hero{ width:min(80vw,640px); max-height:42dvh; object-fit:contain; margin:24px auto 0; }
h1{
  line-height:1.2; color:#001f3f; text-align:center;
  font-family:'Montserrat',sans-serif; font-weight:700;
  margin:20px auto; max-width:calc(100vw - 22px);
  font-size:clamp(1.35rem, 6.5vw, 2.2rem); /* identique à ta feuille principale */
  word-wrap:break-word; overflow-wrap:break-word;
}
/* ============================================================================
   ✅ IMPORT GOOGLE FONT — MONTSERRAT (doit être en tête du CSS)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

/* ============================================================================
   ✅ CSS GLOBAL POUR SECTIONS "PLEIN ÉCRAN"
   ========================================================================== */
:root { --vh: 1vh; }                 /* fallback si dvh/svh non supportés */
html, body { height: 100%; margin: 0; }

/* ============================================================================
   ✅ SECTION PLEIN ÉCRAN (flex column)
   - .keyboard-open autorise le scroll quand le clavier est ouvert
   ========================================================================== */
.full-screen{
  min-height: 100dvh;
  min-height: 100svh;
  min-height: calc(var(--vh) * 100);

  display: flex;
  flex-direction: column;
  justify-content: center;           /* centre vertical */
  align-items: center;               /* centre horizontal */
  text-align: center;
  gap: 16px;

  padding: clamp(16px, 4vw, 32px);

  /* Safe-area (encoches iOS/Android) */
  padding-left:  max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top:   max(16px, env(safe-area-inset-top, 0px));
  padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));

  overflow: hidden;                  /* pas de scroll interne par défaut */
}
.full-screen.keyboard-open{
  overflow: auto;                    /* scroll permis pendant le clavier */
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   ✅ THÈME DE BASE (section blanche, texte noir)
   ========================================================================== */
.section-1{
  background: #ffffff;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: #000;
}

/* ============================================================================
   ✅ TYPO FLUIDE — TITRE (plein écran - 2×11px)
   ========================================================================== */
h1{
  line-height: 1.2;
  color: #001f3f;                    /* 🔵 Bleu marine */
  text-align: center;
  font-family: 'Montserrat', sans-serif;

  margin: 0 auto;                    /* largeur = écran - 2×11px */
  max-width: calc(100vw - 22px);

  font-size: clamp(1.35rem, 6.5vw, 2.2rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============================================================================
   ✅ TYPO FLUIDE — PARAGRAPHES
   ========================================================================== */
p{
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  margin: 0;
  line-height: 1.45;
  color: #000;
  font-family: sans-serif;
}

/* ============================================================================
   ✅ TITRE H1 SPÉCIFIQUE À .section-1
   ========================================================================== */
.section-1 .title,
.section-1 .title h1{
  line-height: 1.2 !important;
  color: #001f3f !important;
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;

  margin: 0 auto !important;
  max-width: calc(100vw - 22px) !important;

  font-size: clamp(1.35rem, 6.5vw, 2.2rem) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ============================================================================
   ✅ IMAGES ADAPTATIVES
   ========================================================================== */
img{
  max-width: 100%;
  height: auto !important;
  display: block;
}

/* Logo */
.logo{
  width: clamp(80px, 18vw, 140px);
  max-height: 14dvh;
  object-fit: contain;
  align-self: center;
}

/* Hero image */
.hero{
  width: min(80vw, 640px);
  max-height: 42dvh;
  object-fit: contain;
  align-self: center;
}

/* ============================================================================
   ✅ BOUTON START (si tu utilises une version bouton plutôt qu'image)
   ========================================================================== */
.cta{
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 12px;
  padding: 0.9em 1.2em;
  font-size: clamp(1rem, 3.4vw, 1.1rem);
  cursor: pointer;
  transition: all 0.2s ease;
}
.cta:hover{
  background: #000000;
  color: #ffffff;
}

/* ============================================================================
   ✅ MESSAGE DE BIENVENUE + CRAYON (centrés, sur 2 lignes)
   ========================================================================== */
#welcome-zone{
  display: flex;
  flex-direction: column;     /* empile texte + crayon */
  align-items: center;        /* centre horizontalement */
  gap: 8px;
  text-align: center;         /* patch : centrage sûr */
  margin-top: 8px;            /* patch : petit espace au dessus */
}
#welcome-message{
  margin: 0;
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: #001f3f;             /* bleu marine */
}

/* ============================================================================
   ✅ BOUTON ICÔNE (CRAYON)
   ========================================================================== */
.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 auto;             /* centré sous le texte */
  border: 1px solid #000;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.icon-btn svg{
  display: block;
  width: 18px;
  height: 18px;
  fill: #000;
}
.icon-btn:hover{ background: #f2f2f2; }

/* petit espace sous le message quand le crayon est visible */
#change-name{ margin-top: 6px; }

/* ============================================================================
   ✅ CHAMP PRÉNOM
   ========================================================================== */
#prenom-input{
  font-size: clamp(1rem, 4vw, 1.2rem);  /* police plus grande et fluide */
  padding: 0.5em 0.8em;                 /* confort */
  border: 1px solid #000;
  border-radius: 6px;
  text-align: center;                   /* cohérent avec “Bonjour X” */
  font-family: sans-serif;
}

/* ============================================================================
   ✅ BOUTON "SUBMIT"
   ========================================================================== */
#save-name{
  margin-top: 22px;
  margin-bottom: 44px;

  padding: 0.7em 1.4em;                 /* bouton plus grand */
  border: none;
  border-radius: 8px;
  background: #001f3f;                  /* bleu marine */
  cursor: pointer;

  font-size: clamp(1.2rem, 4vw, 1.4rem);
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-weight: 600;

  transition: background 0.2s ease, transform 0.1s ease;
}
#save-name:hover{
  background: #003366;                  /* bleu un peu plus clair */
  transform: scale(1.05);
}

/* ============================================================================
   ✅ BOUTON START (image #wb_Image3) — état masqué + animation + déverrouillage
   - Fusion des anciens blocs doublons pour éviter les conflits
   ========================================================================== */
#wb_Image3{
  /* masqué par défaut */
  display: block;           /* conservé pour l’empilement */
  opacity: 0;               /* totalement invisible */
  visibility: hidden;       /* ne prend pas le focus/lecteur d’écran */
  pointer-events: none;     /* ne capte aucun clic */
  transition: opacity .6s ease;
  z-index: 0;               /* derrière le formulaire quand masqué */
}
/* quand on l’affiche en JS → fade-in et cliquable */
#wb_Image3.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;     /* redevient cliquable */
  z-index: 1;
}
/* Sécurise l’image start.jpg pour éviter tout débordement */
#wb_Image3 a,
#wb_Image3 img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   ✅ PATCH LAYOUT — Conteneur HTML2
   - Annule la hauteur fixe inline (54px) qui causait un débordement sous START
   ========================================================================== */
#Html2{ height: auto !important; }


/* Email plus petit et un peu atténué sous le message de bienvenue */
#welcome-message .wm-email{
  font-size: 0.6em;   /* ajuste si tu veux (0.7–0.85) */
  opacity: 0.85;
}

/* =========================================================
   FLEX2 — Spacing, testimonials & FAQ
   ========================================================= */
#Flex2 { color:#111; }
#Flex2 section{ margin:28px 0; }

/* --- Testimonials --- */
#Flex2 blockquote{
  position:relative;
  margin:12px 0;
  padding:12px 16px 12px 20px;
  max-width:720px;
  border-left:4px solid #001f3f;
  background:#f9f9fb;
  color:#111 !important;
  font-size: clamp(0.98rem, 2.8vw, 1.05rem);
  line-height:1.5;
  border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#Flex2 blockquote em{ font-style:italic; }
#Flex2 blockquote small{
  display:block; margin-top:6px; color:#555; font-size:.85em; font-style:normal;
}

/* --- FAQ (details/summary) --- */
#Flex2 details{
  margin:10px 0;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  overflow:hidden;
}
#Flex2 summary{
  display:block;                  /* ← assure l’affichage */
  cursor:pointer;
  font-weight:700;
  font-family:'Montserrat',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  font-size: clamp(1rem, 2.8vw, 1.05rem);
  line-height:1.35;
  padding:10px 14px;
  background:#f7f8fa;
  color:#001f3f !important;       /* ← force la couleur visible */
  list-style:none;
  user-select:none;
}
#Flex2 summary::marker,
#Flex2 summary::-webkit-details-marker{ display:none; }
#Flex2 summary::after{
  content:"▾"; float:right; transition:transform .25s ease; color:#555;
}
#Flex2 details[open] summary::after{ transform:rotate(-180deg); }
#Flex2 details p{ padding:10px 14px 12px; margin:0; line-height:1.45; color:#111; }

/* Option: 2 lignes d’espace entre blocs */
@media (min-width:640px){
  #Flex2 section{ margin:32px 0; }
}


/* Flex2 spacing & typography */
#Flex2 section{ margin:24px 0; }
#Flex2 h2{ margin:0 0 8px; font:700 1.25rem/1.3 system-ui,Segoe UI,Roboto,Arial,sans-serif; }

/* ============================================================================
   ✅ STYLES POUR LES TÉMOIGNAGES (blockquote)
   ========================================================================== */
blockquote {
  position: relative;
  margin: 16px auto;
  padding: 12px 16px 12px 20px;
  max-width: 720px;

  border-left: 4px solid #001f3f; /* bleu marine cohérent */
  background: #f9f9fb;
  color: #111;
  font-style: italic;
  line-height: 1.5;

  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

blockquote small {
  display: block;
  margin-top: 6px;
  color: #555;
  font-style: normal;
  font-size: 0.85em;
}

/* ============================================================================
   ✅ STYLES POUR LES FAQ (summary / details)
   ========================================================================== */
details {
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  padding: 10px 14px;
  background: #f7f8fa;
  color: #001f3f;
  list-style: none;
  user-select: none;
}

summary::marker,
summary::-webkit-details-marker {
  display: none;
}

#Flex2 summary::after{
  content: "▾";
  float: right;
  transition: transform .3s ease;
  color: #555;
}

/* =========================================================
   FLEX2 — Typo, spacing, testimonials & FAQ
   ========================================================= */

/* base */
#Flex2{ color:#111; }
#Flex2 section{ margin:28px 0; }

/* titres internes */
#Flex2 h2{
  margin: 0 0 10px;
  font: 700 1.25rem/1.3 'Montserrat', system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: #001f3f;
}

/* paragraphes internes (légèrement plus grands que le corps global) */
#Flex2 p, #Flex2 li{
  font-size: clamp(.98rem, 2.9vw, 1.05rem);
  line-height: 1.52;
}

/* listes plus aérées dans le syllabus/outcomes */
#Flex2 ul, #Flex2 ol{ padding-left: 22px; margin: 8px 0; }
#Flex2 li{ margin: 4px 0; }

/* ---------- Testimonials (blockquote) ---------- */
#Flex2 blockquote{
  position: relative;
  margin: 12px 0;
  padding: 12px 16px 12px 20px;
  max-width: 720px;
  border-left: 4px solid #001f3f;
  background: #f9f9fb;
  color: #111;
  font-style: italic;
  line-height: 1.5;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#Flex2 blockquote em{ font-style: italic; }
#Flex2 blockquote small{
  display: block;
  margin-top: 6px;
  color: #555;
  font-style: normal;
  font-size: .85em;
}

/* ---------- FAQ (details/summary) ---------- */
#Flex2 details{
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
#Flex2 summary{
  display: block;                 /* garantit l’affichage */
  cursor: pointer;
  font-weight: 700;
  font-family: 'Montserrat', system-ui, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 2.8vw, 1.05rem);
  line-height: 1.35;
  padding: 12px 44px 12px 14px;   /* espace pour la flèche */
  background: #f7f8fa;
  color: #001f3f;
  list-style: none;
  user-select: none;
  outline: none;
  border: 0;
}
#Flex2 summary::marker,
#Flex2 summary::-webkit-details-marker{ display:none; }

/* flèche */
#Flex2 summary::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  transition: transform .25s ease;
}

/* etat ouvert */
#Flex2 details[open] summary::after{ transform: translateY(-50%) rotate(-180deg); }

/* contenu de la réponse */
#Flex2 details > *:not(summary){
  padding: 10px 14px 12px;
  margin: 0;
  color: #111;
}

/* focus visible (accessibilité) */
#Flex2 summary:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,31,63,.18);
  border-radius: 10px;
}

/* un peu plus d’air sur écrans moyens+ */
@media (min-width: 720px){
  #Flex2 section{ margin: 32px 0; }
  #Flex2 blockquote{ padding: 14px 18px 14px 22px; }
}

/* ====== Débloque l’affichage de la zone Flex2 ====== */
#wb_Flex2, #Flex2{
  height:auto !important;
  min-height:unset !important;
  overflow:visible !important;
  position:relative !important;
}

/* Assure la visibilité de la section */
#Flex2 section{
  display:block !important;
  visibility:visible !important;
}

/* Si une image de “start” recouvre la zone, remets-la derrière */
#wb_Image3{ position:relative !important; z-index:0 !important; }
#Flex2{ z-index:2 !important; }

/* ============================================================================
   ✅ FLEX2 — Normalisation des espacements (corrige les décalages)
   ========================================================================== */
#Flex2 section{
  /* Un seul réglage d’espacement pour toutes les sections */
  margin: 24px 0 !important;
}

/* Titres et contenus internes = marges cohérentes */
#Flex2 h2{
  margin: 0 0 10px !important;
}
#Flex2 p{
  margin: 0 0 8px !important;
}

/* Listes : même retrait pour UL et OL */
#Flex2 ul, #Flex2 ol{
  margin: 8px 0 !important;
  padding-left: 22px !important;
}

/* ============================================================================
   ✅ PATCH — Forcer l’email sur une ligne séparée sous le prénom
   ========================================================================== */
#welcome-message {
  display: flex;
  flex-direction: column;   /* force le retour à la ligne */
  align-items: center;      /* centre le tout */
  justify-content: center;
}

#welcome-message .wm-email {
  display: block;           /* garantit le saut de ligne */
  margin-top: 2px;          /* petit espace entre prénom et email */
  font-size: 0.7em;         /* lisible mais plus discret */
  opacity: 0.85;
}


  .sr-only{
    position:absolute!important; width:1px!important; height:1px!important;
    padding:0!important; margin:-1px!important; overflow:hidden!important;
    clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
  }