:root {
    --primary-color:#053e6e;
    --secondary-color: #169e83;
    /* --secondary-color: #0A483B  ; */
    --secondary-dark: #062d28;
    /* --secondary-light: #cef9eb; */
    --secondary-light: #f1fcf9;
    --tertiary-color: #4390D9;
    /* --tertiary-color: #17446E; */
    --tertiary-dark: #112540;
    --tertiary-light: #e4edfa;
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --measure: 150ch;
    --measure-xs: 90ch;
  }

  html {
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;
  }
  
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: clamp(1rem, 1rem + 2.5vw, 3rem);
    sup {
        font-size: 50%;
        opacity: 50%;
    }
}

h2 {
    font-size: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);
}

body {

    font-family:'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,  'Helvetica Neue', sans-serif;
  
}

main {
    display: flex;
    flex-direction: column;
}

/* Shared */

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .stack > * {
    margin-block: 0;
  } 
  
  .stack > * + * {
    margin-block-start: var(--space, 1.5rem);
  }
  
  

.underlined {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #93f0de 60%, #93f0de 60%);
    border-radius: 5px;
}

.underlined-secondary {
    /* color: #1CCAA7; */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #D5F9F2 60%, #D5F9F2 60%);
    border-radius: 5px;
}
.underlined-tertiary {
    /* color: #1CCAA7; */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #D7E7F7 60%, #D7E7F7 60%);
    border-radius: 5px;
}

.center {
    box-sizing: content-box;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline-start: var(--s1);
    padding-inline-end: var(--s1);
  }

  .center-xs {
    box-sizing: content-box;
    max-inline-size: var(--measure-xs);
    margin-inline: auto;
    padding-inline-start: var(--s1);
    padding-inline-end: var(--s1);
  }

  .frame {
    --n: 16;
    --d: 9;
    aspect-ratio: var(--n) / var(--d);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .frame > img,
  .frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit:contain;
    
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
  }
  
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc(( 50rem - 100%) * 999);
  }

  .switcher-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: var(--s1);
  }
  
  .switcher-reverse > * {
    flex-grow: 1;
    flex-basis: calc(( 50rem - 100%) * 999);
  }
  
  .switcher > :nth-last-child(n+ 5),
  .switcher > :nth-last-child(n+ 5) ~ * {
    flex-basis: 100%;
  }

  .bg-primary {
    background-color: var(--primary-color);
  }
  .bg-secondary {
    background-color: var(--secondary-color);
  }

  .bg-tertiary {
    background-color: var(--tertiary-color);
  }

  .text-primary {
    color: var(--primary-color);
  }
  .text-secondary {
    color: var(--secondary-color);
  }

  .text-tertiary {
    color: var(--tertiary-color);
  }

  .text-white {
    color: white;
  }

  .text-secondary-contrast {
    color: #062d28;
  }

  .text-tertiary-contrast {
    color: #112540;
  }
    

/* NAV BAR */



@media (min-width: 768px) {
    .side-menu {
        display: none;
    }
    .hamb{
        display: none;
    }
    header {
        height: 6rem;
        padding: 1rem;
        position: sticky;
        top: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        /* position: sticky;
        top: 0px; */
        background-color: white;
        
        .nav-link {
     
            a {
                color: var(--primary-color);
                margin: 1rem;
                text-decoration: none;
                font-size: 1rem;
                font-weight: 600;
                transition: text-shadow .3s;
    
            }
    
            a:hover {
                /* text-shadow: 0 0 1px #169e83, 0 0 1px #169e83; */
                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #93f0de 60%, #93f0de 60%);
      border-radius: 5px;
    
            }

            a.active {
                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #93f0de 60%, #93f0de 60%);
                border-radius: 5px;
                transition: 0.5s;
              
            }
     
        }
        .nav-img {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            a {
                text-decoration: none;
            }
           #nav-img-logo {
            height: 2rem;
            /* width: auto; */
      
           }
           #nav-img-symbol {
            height: 2rem;
            /* width: auto; */
            margin-inline-end: 0.5rem;
    
           }
        
        }
    }

}
@media (max-width: 767px) {
    .side-menu {
        display: flex;
    }
    #side-menu {
        display: none;
    }
    .hamb{
        display: flex;
        height: 2rem;
        width: 2rem;
    }

    header:has(#side-menu:checked) {
        .nav-link {
            position: absolute;
            right: 0;
            top: 6rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-bottom: 1px solid var(--secondary-color);

        }
    }
    header {
        container-type: inline-size;
        container-name: header;
        position: relative;
        height: 6rem;
        padding: 1rem;
        position: sticky;
        top: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        /* position: sticky;
        top: 0px; */
        background-color: white;
        
        .nav-link {
            display: none;
            a {
                color: var(--primary-color);
                margin: 1rem;
                text-decoration: none;
                font-size: 1rem;
                font-weight: 600;
                transition: text-shadow .3s;
                width: fit-content;
    
            }
    
            a:hover {
                /* text-shadow: 0 0 1px #169e83, 0 0 1px #169e83; */
                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #93f0de 60%, #93f0de 60%);
      border-radius: 5px;
    
            }

            a.active {
                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, #93f0de 60%, #93f0de 60%);
                border-radius: 5px;
                transition: 0.5s;
              
            }
     
        }
        .nav-img {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            a {
                text-decoration: none;
            }
           #nav-img-logo {
            height: 2rem;
            width: auto;
      
           }
           #nav-img-symbol {
            height: 2rem;
            width: auto;
            margin-inline-end: 0.5rem;
    
           }
        
        }

        @container header (max-width: 300px) {
            #nav-img-logo {
                display: none;
            }

        }
    }

}

/* SECTION HOME */

#home {

height: calc(100vh - 6rem);
display: flex;
flex-direction: column;
align-items: center; 
justify-content: center;


}

.home-content {
    height: 100%;
    .home-content-text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-inline: auto;

        h1 {
            padding-inline: 2rem;
            text-align: center;
            color: var(--primary-color);
            
        }
    
        h2{
            margin-top: 1rem;
            padding-inline: 2rem;
            text-align: center;
            color:var(--secondary-color);

        }
    }

    .home-content-img {
        background-image: url(assets/bg-secondary-2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
            height: 90%;
        }


    }
}

/* SECTION FEATURE */

#feature {
    height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;

}

.feature-content {
    .feature-content-text {
 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        h1 {
            padding-inline: 2rem;
            text-align: center;
            color: var(--primary-color);

    
            
        }
    
        h2{
            margin-top: 1rem;
            padding-inline: 2rem;
            text-align: center;
            color: var(--secondary-color)
        }
  

    }

    .feature-content-img {
        background-image: url(assets/bg-primary-2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
  
    }
}

/* SECTION DEMO */
#demo {
    min-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   

  
    p {
        font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem);
    }
}

.demo-content-item {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .demo-content-item-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 5rem;
        width: 5rem;
        border-radius: 50%;
        img {
            width: 3rem;
            height: 3rem;
            color: white;
        }
    }

    .hospit-icon {
        background-color: var(--secondary-color);
    }

    .hospit-text {
        h2, p {
            color: var(--secondary-color);
      
        }

    }
    .photo-icon {
        background-color: var(--primary-color);
    }
    .photo-text {
        h2, p{
            color: var(--primary-color);
   
        }
        
    }
    .chir-icon {
        background-color: var(--tertiary-color);
    }

    .chir-text {
        h2, p{
            color: var(--tertiary-color);

        }
      
            
        
    }

    .demo-content-item-text {
        margin-top: 1rem;
   
        text-align: center;
        h2 {
            margin-bottom: 1rem;
        }

    }

    .demo-content-img {
        margin-top: 1rem;
        text-align: center;
        img {
            object-fit: contain;
            width: 50%;
            height: auto;
        }
   

    }
}

/* SECTION PRICES */
 #prices  {
    min-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem; 

 



 }
 .prices-title {
    margin-top: 2rem;
}

 .prices-content {
    /* height: calc(100vh - 6rem); */
    margin-top: 2rem;

 }


 .prices-content-item {
    /* height: 100%; */
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .prices-content-item-header {
        margin-top: 2rem;
        text-align: center;
        p {
            font-weight:300;
        }
        h1 {
            margin-top: 1rem;
            margin-bottom: 0;
        }

        h2 {
            margin-top: 0;
            margin-bottom: 1rem;
        }

    }

    .prices-content-item-content {
        text-align: center;
      

        p:first-child {
            margin-bottom: 0.5rem;
        }
    }

    .prices-content-item-wrapper {
        height: 450px;
        min-width: 300px;
        border-radius: 1rem;
        color: white;
        /* color: black; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

   
        span {
            opacity: 55%;
            font-weight:400;
        }
    }

    .prices-content-item-cta {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        a {
            background-color: white;
            text-decoration: none;
            border: none;
            border-radius: 1rem;
  
            padding: 0.5rem;
            cursor: pointer;
            font-weight: bolder;
            font-size: clamp(1rem, 0.5rem + 1.5vw, 1rem);
        }
     
    }

  

}
.prices-footer {
    margin-top: 1rem;
    
    p {
        color: var(--primary-color);
        font-weight: 500;
        text-align: center;
    }
}

/* FOOTER */

footer {
    container-type: inline-size;
    container-name: footer;
    margin-top: var(--s5);
    /* outline: 1px solid red; */
    background-color: var(--primary-color);
    background-image: url(assets/bg-waves.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;


 
    .footer-wrapper {
        margin-top: 1rem;
        margin-bottom: 1rem;

        a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
        }
    }



    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            height: 10cqh;
            /* width: auto; */
        }

        p {
            margin-top: 1rem;
            color: white;
            text-align: center
        };
  
    }

    .legal {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
      
    }

    .projets {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 1rem;
   
        border-radius: 1rem;
        h3 {
            color: var(--primary-color);
        }

        a {
            color: var(--primary-color);
            border-radius: 50%;
            border: 1px solid var(--secondary-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: white;


        }

        img {
            height: 6cqh;
            width: 6cqh;
            border-radius: 50%;
        }
    }





}


@container footer (max-width: 1200px) {
    .footer-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }
  }
  
@container footer (min-width: 1201px) {
    .footer-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-evenly;
        align-items:center;
    }
  }
  


/* CGV CGU LEGAL */

#cgv, #cgu, #legal, #privacy {

    text-align: justify;
    h1 {
        text-align: center;
        color: var(--primary-color);
    }

    h2 {
        color: var(--secondary-color);
    }
    p {
        margin-inline-start: 1rem;
    }

    ul {
        margin-inline-start: 3rem;
    }
}