body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#FlexContainer1
{
   display: flex;
   position: relative;
   padding: 10px 10px 10px 10px;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   align-content: center;
   margin: 0;
   box-sizing: border-box;
   font-size: 0;
}
#FlexContainerNav
{
   display: flex;
   width: 100%;
   position: relative;
   height: 72px;
   padding: 10px 10px 10px 10px;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: center;
   margin: 0;
   box-sizing: border-box;
   font-size: 0;
}
#FlexContainer3
{
   display: flex;
   width: 100%;
   position: relative;
   padding: 10px 10px 10px 10px;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
   align-content: flex-start;
   margin: 11px 0 0 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: left;
}
#wb_Text1
{
   color: #C71585;
   font-family: Arial;
   font-weight: 400;
   font-size: 19px;
   line-height: 21px;
}
#wb_Text1 p, #wb_Text1 ul
{
   margin: 0;
   padding: 0;
}
#Button1
{
   box-sizing: border-box;
   line-height: 40px;
   text-decoration: none;
   vertical-align: top;
   border: 1px solid #0D6EFD;
   border-radius: 4px;
   background-color: #0D6EFD;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   -webkit-appearance: none;
   margin: 11px 0 22px 0 ;
}
#Button1:focus
{
   outline: 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: 131px;
   height: auto;
}
/* ============================================================================
/* ✅ CONFIDENTIALITY — LAYOUT ONLY (ne stylise PAS #wb_Text1)
/* ========================================================================== */

/* ------------------------------
   Variables & safe-area
--------------------------------*/
:root{
  --vh: 1vh;               /* mis à jour par ton polyfill JS */
  --nav-h: 80px;           /* hauteur estimée de la nav (mise à jour par JS) */
  --page-max-w: 980px;     /* largeur max de lecture */
  --page-pad-x: 16px;      /* padding horizontal */
  --page-pad-y: 20px;      /* padding vertical */
}

/* ------------------------------
   Base: aucun style typographique global
   (on ne fixe NI font-family NI tailles NI couleurs)
--------------------------------*/
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: #ffffff;
}

/* Optionnel: anti-bounce iOS si tu veux */
html, body{
  overscroll-behavior: none;
}

/* ------------------------------
   Conteneur plein écran principal
   (#FlexContainer1) : occupe toute la hauteur
   disponible AU-DESSUS de la nav
--------------------------------*/
#FlexContainer1{
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  height: calc(var(--vh) * 100 - var(--nav-h));
  display: block;
  overflow: hidden; /* on gère le scroll sur l’intérieur */
}

/* ------------------------------
   Zone de contenu scrollable
   (#FlexContainer3) : centrée, scroll, padding
   -> On NE stylise pas #wb_Text1 directement
--------------------------------*/
#FlexContainer3{
  position: relative;
  box-sizing: border-box;
  max-width: var(--page-max-w);
  margin-left: auto;
  margin-right: auto;

  /* hauteur dispo = viewport - nav */
  height: calc(100dvh - var(--nav-h));
  min-height: calc(var(--vh) * 100 - var(--nav-h));

  padding: var(--page-pad-y) var(--page-pad-x);
  overflow: auto;                 /* scroll ici */
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------
   Ne PAS toucher au style de #wb_Text1
   (ni à ses enfants). On s’assure juste
   qu’il prenne la largeur dispo.
--------------------------------*/
#wb_Text1{
  box-sizing: border-box;
  width: 100%;
  /* AUCUN style typographique ici */
}

/* ------------------------------
   Nav du bas (#FlexContainerNav)
   centrée verticalement et horizontalement
--------------------------------*/
#FlexContainerNav{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* hauteur flexible, mais cohérente avec --nav-h */
  min-height: 68px;
  height: clamp(68px, 10vh, 120px);

  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
}

/* L’image flèche: clickable, responsive */
#wb_Image2{
  display: block;
}
#wb_Image2 img{
  display: block;
  width: 72px;
  height: auto;
  max-width: 20vw;
}

/* ------------------------------
   Divers: neutralisations sûres
--------------------------------*/

/* Masque les images sans source (évite l’icône cassée) */
img[src=""],
img:not([src]),
img[src="#"]{
  display:none !important;
}

/* Conteneurs vides éventuels */
#FlexContainer2,
#FlexContainer4{
  display: none; /* cache si non utilisés */
}

/* ------------------------------
   Helpers responsives
--------------------------------*/
@media (min-width: 1200px){
  :root{
    --page-max-w: 1100px;
  }
}