.splash_div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.editable-block {
  height: 100%;
}


.splash {
  margin: auto;
}

.animated-text {
  font-size: 3rem;
  color: white;
  white-space: nowrap;
  display: inline-block;
}

.animated-text span {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  animation: fadeInLetter 0.4s forwards;
}

@keyframes fadeInLetter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .animated-text {
    font-size: 2rem;
  }
}
@media (max-width: 600px) {
  .animated-text {
    font-size: 2rem;
  }
}


/* Styles pour affichage image pleine page */

    #splash-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    #splash-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #splash-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
    }

    #splash-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Conteneur des éléments superposés */
    #splash-overlay {
      position: relative;
      z-index: 1;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      background: rgba(0, 0, 0, 0.4); /* léger voile pour lisibilité */
      padding: 20px;
    }

    #splash-title {
      font-size: 3em;
      font-weight: bold;
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 1s forwards;
    }

    #splash-paragraph {
      font-size: 1.5em;
      max-width: 600px;
      min-height: 60px;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 2s forwards;
    }

    #splash-button {
      opacity: 0;
      animation: fadeInUp 1s ease-out 3s forwards;
    }

    .cta-button {
      padding: 15px 30px;
      font-size: 1.2em;
      background-color: #ff5e57;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    .cta-button:hover {
      background-color: #ff2e2e;
      transform: scale(1.05);
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/* ============================================================
   splash.css  —  Page de garde MySite (démo)
   Toutes les classes sont prefixees "splash_" pour eviter toute
   collision avec les styles du gabarit MySite.
   Le splash est un CALQUE plein ecran (position:fixed) : il
   recouvre l'ensemble du gabarit (header, nav, footer, fondblanc).
   Polices : a charger via <link> Google Fonts (voir le snippet).
   ============================================================ */

.splash_overlay{
  --splash-bg-top:#04233f;
  --splash-bg-mid:#08375d;
  --splash-bg-bottom:#04263f;
  --splash-ivory:#f6efe2;
  --splash-ivory-soft:rgba(246,239,226,.70);
  --splash-ivory-faint:rgba(246,239,226,.42);
  --splash-or:#c8951a;
  --splash-or-bright:#e9b84a;
  --splash-bleu:#2085c9;
  --splash-vert:#3aa56e;
  --splash-line:rgba(246,239,226,.16);
  --splash-display:"Fraunces",Georgia,serif;
  --splash-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  position:fixed;
  inset:0;
  z-index:99999;
  overflow-y:auto;
  overflow-x:hidden;
  font-family:var(--splash-body);
  color:var(--splash-ivory);
  background:linear-gradient(165deg,var(--splash-bg-top) 0%,var(--splash-bg-mid) 45%,var(--splash-bg-bottom) 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.splash_overlay *{box-sizing:border-box;margin:0;padding:0}

/* halo dore bas-centre */
.splash_overlay::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(120% 80% at 50% 118%,rgba(201,149,26,.30) 0%,rgba(201,149,26,.07) 38%,transparent 62%);
  pointer-events:none;
  z-index:1;
}

.splash_weave{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.splash_page{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(1.4rem,4vw,2.6rem);
}

/* wordmark */
.splash_brand{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.splash_brand b{font-weight:700;font-size:1.02rem;letter-spacing:.01em}
.splash_brand .splash_sep{color:var(--splash-ivory-faint);font-weight:400}
.splash_brand i{font-family:var(--splash-display);font-style:italic;font-weight:500;font-size:1.14rem;color:var(--splash-or-bright)}

/* hero */
.splash_main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:680px;padding:clamp(1.8rem,5vh,3.4rem) 0}

.splash_badge{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--splash-ivory-soft);padding:.5rem .9rem;border:1px solid var(--splash-line);border-radius:100px;
  background:rgba(246,239,226,.04);backdrop-filter:blur(4px);
}
.splash_badge .splash_dot{width:7px;height:7px;border-radius:50%;background:var(--splash-or-bright);box-shadow:0 0 0 0 rgba(233,184,74,.6);animation:splash_pulse 2.6s ease-out infinite}
@keyframes splash_pulse{0%{box-shadow:0 0 0 0 rgba(233,184,74,.55)}70%{box-shadow:0 0 0 9px rgba(233,184,74,0)}100%{box-shadow:0 0 0 0 rgba(233,184,74,0)}}

.splash_h1{font-family:var(--splash-display);font-weight:500;font-optical-sizing:auto;font-size:clamp(2.4rem,7.6vw,4.4rem);line-height:1.03;letter-spacing:-.015em;margin:1.4rem 0 0; color:var(--splash-ivory)}
.splash_h1 .splash_accent{font-style:italic;font-weight:500;color:var(--splash-or-bright)}

.splash_lede{font-size:clamp(1.04rem,2.2vw,1.24rem);line-height:1.55;color:var(--splash-ivory-soft);max-width:36em;margin-top:1.3rem}

/* pastilles atouts */
.splash_bonds{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.splash_bond{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;padding:.5rem .95rem .5rem .8rem;border:1px solid var(--splash-line);border-radius:100px;color:var(--splash-ivory)}
.splash_bond .splash_swatch{width:9px;height:9px;border-radius:50%}
.splash_bond.splash_b1 .splash_swatch{background:var(--splash-bleu);box-shadow:0 0 10px rgba(32,133,201,.7)}
.splash_bond.splash_b2 .splash_swatch{background:var(--splash-vert);box-shadow:0 0 10px rgba(58,165,110,.7)}
.splash_bond.splash_b3 .splash_swatch{background:var(--splash-or-bright);box-shadow:0 0 10px rgba(233,184,74,.8)}

/* CTA */
.splash_cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.splash_btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--splash-body);font-weight:600;font-size:1rem;text-decoration:none;padding:.85rem 1.7rem;border-radius:10px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,filter .25s ease}
.splash_btn .splash_arr{display:inline-block;transition:transform .25s ease}
.splash_btn_primary{background:var(--splash-or);color:#2a1f00;box-shadow:0 6px 20px rgba(201,149,26,.35)}
.splash_btn_primary:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(201,149,26,.5);filter:brightness(1.05)}
.splash_btn_primary:hover .splash_arr{transform:translateX(5px)}
.splash_btn_ghost{border:1.5px solid var(--splash-line);color:var(--splash-ivory);background:rgba(246,239,226,.03)}
.splash_btn_ghost:hover{transform:translateY(-3px);border-color:var(--splash-ivory-soft);background:rgba(246,239,226,.10)}

/* acces demo */
.splash_demo_access{margin-top:2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.96rem;color:var(--splash-ivory-soft)}
.splash_mdp{font-family:var(--splash-display);font-weight:600;font-size:1.02rem;letter-spacing:.06em;color:#04233f;background:var(--splash-or-bright);padding:.4rem 1rem;border-radius:8px;box-shadow:0 4px 14px rgba(233,184,74,.35)}

.splash_closing{margin-top:2.3rem;font-family:var(--splash-display);font-style:italic;font-weight:500;font-size:clamp(1.05rem,2.3vw,1.34rem);line-height:1.45;color:var(--splash-ivory);max-width:30em}

/* footer */
.splash_footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem;font-size:.86rem;color:var(--splash-ivory-faint);padding-top:1.6rem;border-top:1px solid var(--splash-line)}
.splash_footer a{color:var(--splash-ivory-soft);text-decoration:none;border-bottom:1px solid rgba(233,184,74,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
.splash_footer a:hover{color:var(--splash-or-bright);border-color:var(--splash-or-bright)}
.splash_overlay a:focus-visible{outline:2px solid var(--splash-or-bright);outline-offset:3px}

@media (max-width:520px){
  .splash_badge{font-size:.68rem;letter-spacing:.13em}
  .splash_footer{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .splash_badge .splash_dot{animation:none}
}
a:link{text-decoration:none;color: #ffffff}
a:hover{text-decoration:none;color: #ffffff}