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: 211px;
   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;
}
#Html2
{
   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;
}
/* ============================================================================
   ✅ 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.6rem, 8vw, 3rem); /* police fluide */
  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.6rem, 8vw, 3rem) !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; }

/* Masque tous les éléments frères placés APRES le bloc START (doublons WB) */
#wb_Image3 ~ * { 
  display: none !important;
}

/* Email plus petit et un peu atténué sous le message de bienvenue */
#welcome-message .wm-email{
  font-size: 0.6em;
  opacity: 0.85;
  display: block;        /* ✅ force le retour à la ligne */
  margin-top: 2px;       /* (optionnel) petit espace */
}