/* --------------------------------------------------
   TYPOGRAPHIE PERSONNALISÉE - RINGOFUSE
   Police utilisée : 
   titres courts : Neulis Cursive (Adobe) 
   Par défaut : Manrope (Google)
-------------------------------------------------- */

/* Base typography */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ro-bg-0);
  color: var(--ro-text-900);
}


.hero-title {
  font-family: "Manrope", sans-serif;
}

.text-med{
  font-weight: var(--ro-font-weight-medium);
}

.text-semB{
  font-weight: var(--ro-font-weight-semB);
}

h1 {
  font-family: var(--ro-font-heading);
  
}

h2 {
  font-family: var(--ro-font-heading);
}

h3 {
  font-family: var(--ro-font-heading);
}


.body-L{
  font-size: var(--ro-font-size-l);
  font-weight: var(--ro-font-weight-bold); 
}

.body-M-bold, th{
  font-size: var(--ro-font-size-m);
  font-weight: var(--ro-font-weight-bold); 
}

.body-S{
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-bold); 
}

.label-text{
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-regular); 
}



.caption-text{
  font-size: var(--ro-font-size-xs);
  font-weight: var(--ro-font-weight-regular); 
}


.tooltips-text{
  font-size: var(--ro-font-size-s);
  font-weight: var(--ro-font-weight-semB); 
}

.chips-text{
  font-size: var(--ro-font-size-xs);
  font-weight: var(--ro-font-weight-medium); 
}


/* --- Tablette : jusqu'à 1024px --- */
@media (max-width: 1024px) {
    .body-L{
        font-size: var(--ro-font-size-md);
    }

    .tooltips-text{
        font-size: none ;
    }
    

}

/* --- Mobile : jusqu'à 768px --- */
@media (max-width: 768px) {
    .body-L{
        font-size: var(--ro-font-size-s);
    }

    .body-S{
        font-size: var(--ro-font-size-xs);
    }

    .label-text{
        font-size: var(--ro-font-size-xs);
    }

}



.icon-text{
display: flex;
align-items: center;
gap:var(--ro-space-4);
}

.main-title_page{
  margin-bottom: 16px;
}

/* --- Petit mobile : jusqu'à 480px --- */
@media (max-width: 480px) {

  .main-title_page{
  padding: 24px 16px 0 16px;
  margin-bottom: 8px;
}
}

/* --------------------------------------------------
   LANDING PAGE TYPO
-------------------------------------------------- */

.lp-h1{
  font-family: var(--ro-font-body);
  font-size: var(--ro-size-72);
  font-weight: var(--ro-font-weight-Xbold);
  line-height: var(--ro-line-height-sm);
  padding: 0;
}

.lp-h2{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.lp-h2__line1{
  font-family: var(--ro-font-heading);
  font-size: var(--ro-size-56);
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-sm);
  padding: 0;
}

.lp-h2__line2{
  font-family: var(--ro-font-body);
  font-size: var(--ro-size-48);
  font-weight: var(--ro-font-weight-medium);
  line-height: var(--ro-line-height-sm);
  padding: 0;
}

.lp-h3{
  font-family: var(--ro-font-body);
  font-size: var(--ro-size-24);
  font-weight: var(--ro-font-weight-Xbold);
  line-height: var(--ro-line-height-sm);
}

.lp-body-XL{
  font-size: var(--ro-font-size-l); /* 20px */
  font-weight: var(--ro-font-weight-regular);
  line-height: var(--ro-line-height-base);
}

.lp-body-XL-bold{
  font-size: var(--ro-font-size-l); /* 20px */
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-base);
}

.lp-body-L{
  font-size: var(--ro-size-22);
  font-weight: var(--ro-font-weight-regular);
  line-height: var(--ro-line-height-base);
}

.lp-body-L-bold{
  font-size: var(--ro-size-22);
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-base);
}

.lp-body-M{
  font-size: var(--ro-font-size-md);
  font-weight: var(--ro-font-weight-regular);
  line-height: var(--ro-line-height-base);
}

.lp-body-M-bold{
  font-size: var(--ro-font-size-md);
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-base);
}

.lp-body-S{
  font-size: var(--ro-font-size-xs);
  font-weight: var(--ro-font-weight-regular);
  line-height: var(--ro-line-height-base);
}

.lp-body-S-bold{
  font-size: var(--ro-font-size-xs);
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-base);
}

.lp-pill{
  font-family: var(--ro-font-body);
  font-size: var(--ro-font-size-l); /* 20px */
  font-weight: var(--ro-font-weight-bold);
  line-height: var(--ro-line-height-sm);
}

/* --- Tablette --- */
@media (max-width: 1024px){
  .lp-h1{
    font-size: var(--ro-size-56);
    padding: 0;
  }

  .lp-h2__line1{
    font-size: var(--ro-size-56);
    padding: 0;
  }

  .lp-h2__line2{
    font-size: var(--ro-size-40);
    padding: 0;
  }

  .lp-h3{
    font-size: var(--ro-size-24);
  }

 

  .lp-body-L,
  .lp-body-L-bold{
    font-size: var(--ro-size-22);
  }

  .lp-body-M,
  .lp-body-M-bold{
    font-size: var(--ro-font-size-md);
  }

  .lp-body-S,
  .lp-body-S-bold{
    font-size: var(--ro-font-size-xs);
  }
}

/* --- Mobile --- */
@media (max-width: 768px){
  .lp-h1{
    font-size: var(--ro-size-42);
    padding: 0;
  }

  .lp-h2__line1{
    font-size: var(--ro-size-32);
    padding: 0;
  }

  .lp-h2__line2{
    font-size: var(--ro-size-26);
    padding: 0;
  }

  .lp-h3{
    font-size: var(--ro-font-size-m);
  }

  .lp-body-XL{
    font-size: var(--ro-font-size-m); /* 16px */
  }

  .lp-body-L,
  .lp-body-L-bold{
    font-size: var(--ro-font-size-s);
  }

  .lp-body-M,
  .lp-body-M-bold{
    font-size: var(--ro-font-size-xs);
  }

  .lp-body-S,
  .lp-body-S-bold{
    font-size: var(--ro-font-size-xs);
  }

  .lp-pill{
    font-size: var(--ro-font-size-xs); /* 14px */
  }
}

/* --- petit Mobile --- */
@media (max-width: 450px){
  .lp-h1{
    font-size: var(--ro-size-30);
    padding: 0;
  }

  .lp-h2__line1{
    font-size: var(--ro-size-24);
    padding: 0;
  }

  .lp-h2__line2{
    font-size: var(--ro-size-22);
    padding: 0;
  }

  .lp-h3{
    font-size: var(--ro-font-size-m);
  }

  .lp-body-XL{
    font-size: var(--ro-font-size-m); /* 16px */
  }

  .lp-body-L,
  .lp-body-L-bold{
    font-size: var(--ro-font-size-s);
  }

  .lp-body-M,
  .lp-body-M-bold{
    font-size: var(--ro-font-size-xs);
  }

  .lp-body-S,
  .lp-body-S-bold{
    font-size: var(--ro-font-size-xs);
  }

  .lp-pill{
    font-size: var(--ro-font-size-s); /* 14px */
  }
}