*:not(:defined) { opacity: 0; } /* Prevent FOUC on loading */ 



[effect-scroll] {
  transition : transform .3s;
}

.slide-out-top {
  transform: translateY(-100%);
}

.animScrollInBottom .stagger > *:nth-child(2) { transition-delay: calc(var(--opa-stagger, 0.1s)); }
.animScrollInBottom .stagger > *:nth-child(3) { transition-delay: calc(var(--opa-stagger, 0.2s)); }
.animScrollInBottom .stagger > *:nth-child(4) { transition-delay: calc(var(--opa-stagger, 0.3s)); }
.animScrollInBottom .stagger > *:nth-child(5) { transition-delay: calc(var(--opa-stagger, 0.4s)); }
.animScrollInBottom .stagger > *:nth-child(6) { transition-delay: calc(var(--opa-stagger, 0.5s)); }
.animScrollInBottom .stagger > *:nth-child(7) { transition-delay: calc(var(--opa-stagger, 0.6s)); }
.animScrollInBottom .stagger > *:nth-child(8) { transition-delay: calc(var(--opa-stagger, 0.7s)); }
.animScrollInBottom .stagger > *:nth-child(9) { transition-delay: calc(var(--opa-stagger, 0.8s)); }
.stagger-delay-01 { --opa-stagger: 0.1s; }
.stagger-delay-02 { --opa-stagger: 0.2s; }
.stagger-delay-03 { --opa-stagger: 0.3s; }
.stagger-delay-04 { --opa-stagger: 0.4s; }
.stagger-delay-05 { --opa-stagger: 0.5s; }
:root{
 --el-color-primary : #104D62;
 --el-color-light : white;
 --el-color-neutral-20 : #F6EFEA;
 --el-color-neutral-50 : #F6EFEA;
 --el-color-neutral-100 : #EBE5E1;
 --el-color-primary-100 : #2C6F86;
   
}


body{
  position: relative;
  padding: 0;
  margin: 0;
  /*background : #F3DAFF;*/
}




.opa-filtered-element {
  transition: .3s all;
}

.opa-filtered-element.is-disable{
  opacity: 0;
  transform: scale(0) skew(10deg);
}









el-badge::part(element){
  height: 16px;
  border-radius: 300px;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  position: relative;
  letter-spacing: .1em;
  padding: 0px 10px;
  color : var(--el-color-primary);
}


el-badge span{ margin-top: 2px; }

opa-badge[variant="primary"]::part(element){
  background-color: rgb(0, 0, 0);
  color: white;
}

opa-badge[variant="secondary"]::part(element){
  background-color: rgb(206, 206, 206);
  color: var(--opa-titlecolor);
}

opa-badge[variant="tertiary"]::part(element){
  background-color: transparent;
  padding: 0;
}

el-button {
  border-radius: 300px;
  overflow : hidden;
  height : 48px;
}

el-button::part(element) {
  background : transparent;
  text-transform : uppercase;
  letter-spacing : .1em;
  font-weight : 500;
  font-size : 11px;
  /*transition: all .3s ease;*/
  font-family : Poppins;
  padding : 0 24px;
  /*transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
}

el-button[icon]::part(element){
  height: var(--opa-button-size);
  width : var(--opa-button-size);
  padding: 0;
  
}


el-button::before,
el-frame[variant='color-1']::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.2); 
  width: 150%;
  padding-bottom: 150%; 
  border-radius: 50%; 
  background-color: #dfb2f4; 
  opacity : 0;
  transition: 
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* Easing Material Design */
    opacity 0.3s ease; 
  z-index: -1;
}

el-button:hover::before,
el-frame[variant='color-1']:hover::before {
  transform: translate(-50%, -50%) scale(1); /* Le cercle gonfle */
  opacity: .5; /* Il devient visible */
}


@keyframes bounce {
  0% {
    transform: scale(1);
  }
  /* Montée ultra rapide */
  30% {
    transform: scale(1.04);
   
  }
  /* Redescente rapide et retour au calme */
  100% {
    transform: scale(1);
  }
}


el-button svg{
  width: 24px;
  height: 24px;
}

el-button[variant="primary"] {
  background : var(--el-color-primary);
  color: var(--el-color-light);
  /*transition : .1s background;*/
}

el-button[variant="primary"]::part(element) {
  color: var(--el-color-light);
  /*transition : .1s background;*/
}
/*el-button[variant="primary"]:hover::part(element) {
  background : var(--el-color-primary-100);
  color: var(--el-color-light);
}*/


el-button[variant="secondary"]  {
  border: 1px solid #9ca29f;
  background-color: transparent;
  color: var(--el-color-primary);
  transition : .3s all;
}

el-button[variant="secondary"] {
  border : 1px solid var(--el-color-primary);
  color: var(--el-color-light);
}


el-button[variant="secondary"][aria-pressed="true"]  {
  background : var(--el-color-primary);
  color : var(--el-color-light);
  border : 1px solild var(--el-color-primary);
}

el-button[variant="tertiary"]::part(element) {
  background : transparent;
  color: var(--el-color-primary);
  padding : 0 16px;
}

opa-button[variant="tertiary"]:hover::part(element) {
  background-color: #d3d3d3;
  
}

opa-button[variant="link"]::part(element){
  cursor: pointer;
  background-color: transparent;
  height: auto;
  padding: 0;
  text-transform: none;
  color: black;
  border: none;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: normal;
}

opa-button[variant="link"][state="selected"]::part(element),
opa-button[variant="link"]:hover::part(element){
  background-color: transparent;
  text-decoration: underline;
}

opa-button[variant="special"]::part(element){
  border-radius: 300px;
  padding: 0 24px;
  height : var(--opa-button-size);
  font-weight: bold;
  will-change: transform;
  font-size: 14px;
  background : blue;
  color : var(--opa-text-color);
  justify-content : start;
  transition : all .3s;
}

opa-button[variant="special"][href]:hover::part(element){
  transform : translate(1%, -1%);
  box-shadow : -4px 6px 0px black;
  filter: brightness(1.02);
  

}



el-button[variant="chip"] {
  border: 1px solid #9ca29f;
  background: transparent;
  color: var(--el-color-primary);
  height : 24px;
  padding : 0 16px;
}

el-button[variant="chip"][aria-pressed="true"] {
  background : var(--el-color-primary);
  color : var(--el-color-light);
  border : 1px solild var(--el-color-primary);
}

el-frame[aria-pressed="true"]{
  border : 1px solid var(--el-color-primary);
}





el-frame[variant='color-light']{
  background : var(--el-color-light);
  border-radius : var(--el-radius, 20px);
  overflow : auto;
}

el-frame[variant='color-1']{
  /*background : white;*/
  background : var(--el-color-neutral-50);
  border-radius : var(--el-radius, 20px);
}

el-frame[variant='color-1']{
  overflow : hidden;
}

el-frame[variant='color-2']{
  background : #F3DAFF;
  border-radius : var(--el-radius, 20px);
  overflow : hidden;
}

el-frame[variant='container']{
  max-width : 1360px;
}

el-frame[variant='container-s']{
  max-width : 800px;
}

el-frame[variant='modal']{
  background : rgba(0,0,0,.8);
}

.el-input::part(input) {
  border-radius : 8px;
  color : var(--el-color-primary);
}

el-input-checkbox::part(label), 
el-input-radio::part(label){
  color : var(--el-color-primary);
}

el-input-checkbox[checked]::part(box) {
    outline: 1px solid var(--el-color-primary);
    background-color: var(--el-color-primary);
}

.el-icon{
  color : var(--el-color-primary);
}

el-image,
el-image-compare::part(element),
el-video::part(element),
el-embed::part(element){
  background-color: var(--el-color-neutral-100);
  transition : opacity .3s;
  border-radius : var(--el-radius, 20px);
}

el-image::part(image),
el-video::part(image),
el-embed::part(image) {
  opacity: 0;
}

el-image::part(image-loaded),
el-video::part(image-loaded),
el-embed::part(image-loaded){
  transition: 1s all;
  opacity: 1; 
} 

el-image.hover-hide{
  transition : .2s opacity;
  opacity : 0;
}

el-image.hover-hide:hover{
  opacity : 1;

}



el-image[variant='no-radius'] {
  border-radius : 0px;
}

el-image[variant='transparent']{
  border-radius : 0px;
  background-color: transparent;
  
}

el-image[variant='carreau'] {
  border-radius : 0px;
  box-shadow : 10px 10px 30px rgba(0,0,0,.1);
}

opa-separator::part(element){
  background-color : var(--el-color-neutral-100);
}

[variant*="heading"] > * {
  font-family : Poppins;
  font-weight : 500;
  line-height : 120%;
  color : var(--el-color-primary);
}

[variant*="text"] > * {
  font-family : General Sans;
  font-weight : 400;
  line-height : 160%;
  color : var(--el-color-primary);
}



[variant=text-xxs] > * { 
  font-size: 9px;
}

[variant=text-xs] > * { 
  font-size: 12px;
}

[variant=text-s] > * { 
  font-size: 14px;
}

[variant=text-m] > * { 
  font-size: 17px;
}

[variant=text-l] > * { 
  font-size: 24px;
}

[variant=text-xl] > * { 
  font-size: 32px;
}

[variant=text-quote] > * { 
  font-size: clamp(18px, 2.1vw, 24px);
}

[variant=text-xxl] > * { 
  font-size: 48px;
}

[variant='text-overtitle'] > * { 
  font-size: 12px;
  letter-spacing : .2em;
  text-transform : uppercase;
}

[variant=heading-xs] > * { 
  font-size: clamp(18px, 2.1vw, 20px);
}

[variant=heading-xs] > * { 
  font-size: clamp(24px, 2.1vw, 32px);
}

[variant=heading-s] > * { 
  font-size: clamp(32px, 2.5vw, 40px);
}

[variant=heading-m] > * { 
  font-size: clamp(32px, 3.5vw, 56px); 
}

[variant=heading-l] > * { 
  font-size: clamp(56px, 5vw, 80px);
  
}

[variant=heading-xl] > * { 
  font-size: 120px;
}

[variant=heading-xxl] > * { font-size: 160px;}

[variant=heading-xs] > * { 
  font-size: clamp(22px, 2.1vw, 28px);
}



[scroll-down-anim="nav-scroll-anim"]{
  transition : transform .3s;
}

[scroll-down-anim="nav-scroll-anim"][data-scroll="down"] {
   transform : translateY(-100%);
}

[scroll-down-anim="nav-scroll-anim"][data-scroll="up"] {
   transform : translateY(0);
}

[enter-anim="fade-in-bottom"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[enter-anim="fade-in-bottom"][data-enter="from"] {
    opacity: 0;
    transform: translateY(6%);
    
}

[enter-anim="fade-in-bottom"][data-enter="to"] {
    opacity: 1;
    transform: translateY(0);
    
}

[enter-anim="modal-drawer-right"]{
  transition: transform 0.4s ease;
}

[enter-anim="modal-drawer-right"][data-enter="from"] {
    transform: translateX(100%);
    
}

[enter-anim="modal-drawer-right"][data-enter="to"] {
    transform: translateX(0);
    
}

[enter-anim="modal-backdrop"]{
  transition: background 0.4s ease;
}

[enter-anim="modal-backdrop"][data-enter="from"] {
    background : rgba(0,0,0,0);
    
}

[enter-anim="modal-backdrop"][data-enter="to"] {
    background : rgba(0,0,0,.8);
    
}

[enter-anim="pop-in"]{
  transition: opacity 0.3s ease, transform 0.3s ease;
}

[enter-anim="pop-in"][data-enter="from"] {
    opacity: 0;
    transform: scale(0);
    
}

[enter-anim="pop-in"][data-enter="to"] {
    opacity: 1;
    transform: scale(1);
    
}