/* ---------------------------------------- */
/*  RESET / BASE                            */
/* ---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  overflow: hidden; /* évite le scroll si on veut un effet plein écran */
}

/* ------------ BACKGROUND GRADIENT aux couleurs OctoGency ------------- */
.overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(-45deg,
              #00C56A 0%,        /* vert OctoGency */
              #00B6D1 35%,       /* turquoise logo */
              #0049FF 70%,       /* bleu OctoGency */
              #0027A0 100%);     /* bleu nuit pour la profondeur */
  background-size:400% 400%;
  animation:gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------------------------------------- */
/*  SHAPES FLOTTANTES (MOTION DESIGN)       */
/* ---------------------------------------- */
.shape {
  position: fixed;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -2;
  animation: floatUpDown 6s ease-in-out infinite alternate;
}

/* Forme 1 : Cercle rouge-orangé */
.shape1 {
  width: 150px;
  height: 150px;
  background: #ff6f61;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

/* Forme 2 : Cercle bleu */
.shape2 {
  width: 200px;
  height: 200px;
  background: #007bff;
  bottom: 15%;
  right: 10%;
  animation-delay: 1.5s;
}

/* Forme 3 : Cercle vert */
.shape3 {
  width: 120px;
  height: 120px;
  background: #28a745;
  top: 50%;
  left: 70%;
  animation-delay: 3s;
}

/* Animation "floatUpDown" : on fait monter/descendre la forme */
@keyframes floatUpDown {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-30px) scale(1.05);
  }
}

/* --- CONTAINER CENTRAL --- */
.container{
  position:relative;           /* nécessaire pour positionner le wrapper */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:rgba(0,0,0,0.2);
  backdrop-filter:blur(12px);
  border-radius:10px;
  padding:142px 42px 90px;     /* 200 px de padding-top pour laisser la place
                                  à la Lottie agrandie qui mord sur le haut */
  max-width:600px;
  margin:auto;
  top:50%;
  transform:translateY(-50%);
}
/* ---------------------------------------- */
/*  TITRE, TEXTES, ETC.                     */
/* ---------------------------------------- */
h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}

/* ------------ FOOTER avec logo --------------------------------------- */
footer{
  margin-top:2rem;
  font-size:.9rem;
  font-weight:300;
  opacity:.9;
  display:flex;
  align-items:center;
  gap:.6rem;           /* espace texte / logo */
  justify-content:center;
}

footer .og-logo{
  width:24px;          /* ajustez selon votre SVG */
  height:auto;
}
footer a{
  color:#fff;
  text-decoration:underline;
}

/* ---------------------------------------- */
/*  ANIMATIONS D'APPARITION DU TEXTE        */
/* ---------------------------------------- */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  opacity: 0;
  animation: fadeInDown 0.8s ease forwards;
}

.fade-delay-1 {
  animation-delay: 0s;
}

.fade-delay-2 {
  animation-delay: 0.4s;
}

.fade-delay-3 {
  animation-delay: 0.8s;
}

/* --- WRAPPER DE L’ANIMATION --- */
.lottie-wrapper{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%); /* remonte de moitié sa hauteur */
  pointer-events:none;             /* l’animation ne bloque pas les clics */
}

/* --- LOTTIE PLAYER --- */
.lottie-wrapper lottie-player{
  width:300px;   /* agrandissez / réduisez à volonté */
  height:300px;
  display:block;
}

/* -------------------------------------------------- */
/*  Séparateur élégant                                */
/* -------------------------------------------------- */
.divider{
  width:80%;                 /* plus étroit que le bloc */
  height:1px;
  border:0;
  background:linear-gradient(90deg,
              transparent 0%,
              rgba(255,255,255,0.35) 50%,
              transparent 100%);
  margin:1.8rem auto;        /* espace au-dessus/dessous et centré */
  backdrop-filter:blur(2px); /* léger effet verre */
  opacity:0;                 /* invisible avant l'animation fade-in */
}

/* --- Logo flottant au bas du bloc ----------------------------------- */
.logo-wrapper{
  position:absolute;
  left:0;                    /* occuper toute la largeur du bloc     */
  right:0;
  bottom:0px;              /* fait déborder de 90 px sous le bloc  */
  display:flex;
  justify-content:center;    /* centre horizontalement               */
  pointer-events:none;
}

.logo-wrapper .og-logo{
  width:360px;               /* 3× la taille précédente (120 → 360)  */
  height:auto;
  display:block;
}

/* =================================================================== */
/* 1) Tailles de police fluides (du mobile au desktop)                 */
/* =================================================================== */
h1{
  font-size:clamp(1.8rem, 5vw, 2.5rem);   /* mini 1.8 rem – maxi 2.5 rem */
}
p{
  font-size:clamp(1rem, 3.3vw, 1.2rem);
}

/* =================================================================== */
/* 2) Éléments “débordants” (Lottie & logo) avec clamp()               */
/* =================================================================== */
.lottie-wrapper lottie-player{
  width:clamp(160px, 45vw, 300px);
  height:clamp(160px, 45vw, 300px);
}

.logo-wrapper .og-logo{
  width:clamp(180px, 60vw, 360px);
}

/* Adapter l’espace intérieur du bloc :                              */
/*   – top : laisse la Lottie respirer                               */
/*   – bottom : idem pour le logo                                    */
.container{
  padding-top:clamp(110px, 28vw, 142px);
  padding-left:clamp(24px, 8vw, 42px);
  padding-right:clamp(24px, 8vw, 42px);
  padding-bottom:clamp(110px, 28vw, 90px);
}

/* =================================================================== */
/* 3) Media-queries ciblés                                            */
/* =================================================================== */

/* ----------  LARGE TABLETTES & > (≥ 992 px)  ----------------------- */
@media (min-width: 992px){
  /* on garde vos valeurs desktop actuelles (rien à faire) */
}

/* ----------  TABLETTES (≤ 991 px)  --------------------------------- */
@media (max-width: 991px){
  .shape{display:none;}                 /* retire les gros cercles décoratifs */
}

/* ----------  MOBILE (≤ 575 px)  ------------------------------------ */
@media (max-width: 575px){
  .divider{width:90%;}
  footer{flex-direction:column;gap:.4rem;text-align:center;}
}