:root{
    --font-family:'Inter',sans-serif;
    --font-size:.88rem;
    --font-size-title:2.5rem;
    --font-size-subtitle:1.25rem;
    --max-width:72rem;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;
    --font-extrabold:800;
    --font-black:900;
    --color-primary:#270457;
    --color-secondary:#270457;
    --color-primary-light:rgba(230, 229, 255, 1);
    --color-text:rgb(81, 62, 55);
    --border-radius:.5rem;
    --letter-spacing:.025rem;
    --transition:.3s;
    --line-height:1.35;
    --line-height-text:1.75;
    --section-spacing:1.5rem;
    --box-shadow:0px 10px 20px rgba(41, 41, 42, .07);
    --scroll-margin-top:50px
}

.header__logo {
    width: 200px;
}
img[src="img/logo.svg"][alt="aliveDomain Logo"] {
    width: 100%;
}
  @media (max-width:48rem){
    .header__logo {
        width: 150px;
    }
}

@media (min-width:48rem){
    :root{
        --font-size:1rem;
        --section-spacing:2.5rem;
        --scroll-margin-top:80px
    }
}
html{
    line-height:1.15;
    -webkit-text-size-adjust:100%
}
body{
    margin:0;
    background-color: #141414;
}
main{
    display:block
}
h1{
    margin:.67em 0
}
hr{
    box-sizing:content-box;
    height:0;
    overflow:visible
}
pre{
    font-family:monospace,monospace;
    font-size:1em
}
a{
    background-color:transparent
}
abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
}
b,strong{
    font-weight:bolder
}
code,kbd,samp{
    font-family:monospace,monospace;
    font-size:1em
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sub{
    bottom:-.25em
}
sup{
    top:-.5em
}
img{
    border-style:none
}
button,input,optgroup,select,textarea{
    font-family:inherit;
    font-size:100%;
    line-height:1.15;
    margin:0
}
button,input{
    overflow:visible
}
button,select{
    text-transform:none
}
[type=button],[type=reset],[type=submit],button{
    -webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
    border-style:none;
    padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
    outline:1px dotted ButtonText
}
fieldset{
    padding:.35em .75em .625em
}
legend{
    box-sizing:border-box;
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal
}
progress{
    vertical-align:baseline
}
textarea{
    overflow:auto
}
[type=checkbox],[type=radio]{
    box-sizing:border-box;
    padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-2px
}
[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}
details{
    display:block
}
summary{
    display:list-item
}
template{
    display:none
}
[hidden]{
    display:none
}
*,:after,:before{
    box-sizing:inherit
}
html{
    box-sizing:border-box;
    text-rendering:optimizeLegibility
}
body{
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
a{
    color:inherit;
    text-decoration:none
}
img{
    vertical-align:middle
}
blockquote,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,menu,ol,p,pre,ul{
    margin:0
}
button,fieldset,iframe{
    border:0
}
button,fieldset,menu,ol,ul{
    padding:0
}
ol,ul{
    list-style:none
}
textarea{
    resize:vertical
}
table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0
}
td{
    padding:0
}
html{
    font:var(--font-size) var(--font-family);
    scroll-behavior:smooth
}
.section{
    scroll-margin-top:var(--scroll-margin-top);
    padding-bottom:var(--section-spacing);
    padding-top:var(--section-spacing)
}
#home{
    scroll-margin-top:calc(var(--scroll-margin-top) * 3)
}
::-moz-selection{
    background-color:var(--color-primary-light);
    color:#000
}
::selection{
    background-color:var(--color-primary-light);
    color:#000
}
::-moz-selection{
    background-color:var(--color-primary-light);
    color:#000
}
img{
    max-width:100%;
    padding-top: 11px;
}
a{
    cursor:pointer
}

.link{
    transition:var(--transition)
}
.link:hover{
    opacity:.8
}
.container{
    max-width:var(--max-width);
    margin-left:auto;
    margin-right:auto;
    padding-right:1.5rem;
    padding-left:1.5rem
}
@media (min-width:62rem){
    .container{
        padding-right:unset;
        padding-left:unset
    }
}
.icon{
    display:inline-block;
    width:2em;
    height:2em;
    stroke-width:0;
    stroke:currentColor;
    fill:currentColor
}
.icon-menu{
    width:1.75em;
    height:1.75em
}

.icon-wind{
    width:1.5em;
    height:1.5em
}
.icon-check{
    width:1.35em;
    height:1.35em;
    fill:var(--color-primary)
}
.icon-bg-points{
    width:4em;
    height:4em
}
.icon-at-sign,.icon-globe,.icon-mail,.icon-monitor,.icon-search,.icon-send{
    fill:var(--color-primary-light)
}
.button{
    --button-height:42px;
    min-height:var(--button-height);
    background-color:transparent;
    cursor:pointer;
    outline:0;
    border-radius:var(--border-radius);
    font-weight:var(--font-semibold);
    letter-spacing:var(--letter-spacing);
    padding:.875rem 1.85rem;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    text-transform:capitalize
}
.button+.button{
    margin-left:.25rem
}
.button--primary{
    background:linear-gradient(90deg,#f04212 0,rgb(238, 82, 43) 100%);
    border:1px solid rgba(227, 71, 14, 0.2);
    box-shadow:0 2px 14px 2px rgba(228, 65, 16, 0.2);
    color:#fff
}
.button--primary:hover{
    background:linear-gradient(90deg,#d4390f 0,#d4390f 100%);
    border:1px solid var(--color-primary-light)
}
.button--secondary{
    border:1px solid rgba(0,0,0,.1)
}
.button--secondary:hover{
    background-color:var(--color-primary-light)
}
.text-wavy{
    background-color:transparent;
    -webkit-text-decoration:underline var(--color-primary-light) wavy;
    text-decoration:underline var(--color-primary-light) wavy
}
.text-bg-color{
    background-color:#141414;
    color:#fff;
    border-radius:var(--border-radius);
    padding-right:.4rem;
    padding-left:.4rem
}
@media (min-width:48rem){
    .text-bg-color{
        padding:.25rem .5rem
    }
}
.text-bg-color--secondary{
    background-color:var(--color-secondary)
}
@media (min-width:48rem){
    .text-bg-color--secondary{
        padding:.25rem .5rem
    }
}
.text-bg-color--primary-light{
    background-color:var(--color-primary-light);
    color:var(--color-text)
}
@media (min-width:48rem){
    .text-bg-color--primary-light{
        padding:.05rem .5rem
    }
}



.link{
    transition:var(--transition)
}
.link:hover{
    opacity:.8
}
.container{
    max-width:var(--max-width);
    margin-left:auto;
    margin-right:auto;
    padding-right:1.5rem;
    padding-left:1.5rem;
}
@media (min-width:62rem){
    .container{
        padding-right:unset;
        padding-left:unset
    }
}
.icon{
    display:inline-block;
    width:2em;
    height:2em;
    stroke-width:0;
    stroke:currentColor;
    fill:currentColor;
    
}
.icon-menu{
    width:1.75em;
    height:1.75em;   
}

.icon-wind{
    width:1.5em;
    height:1.5em
}
.icon-check{
    width:1.35em;
    height:1.35em;
    fill:var(--color-primary)
}
.icon-bg-points{
    width:4em;
    height:4em
}
.icon-at-sign,.icon-globe,.icon-mail,.icon-monitor,.icon-search,.icon-send{
    fill:var(--color-primary-light)
}
.button{
    --button-height:42px;
    min-height:var(--button-height);
    background-color:transparent;
    cursor:pointer;
    outline:0;
    border-radius:var(--border-radius);
    font-weight:var(--font-semibold);
    letter-spacing:var(--letter-spacing);
    padding:.875rem 1.85rem;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    text-transform:capitalize
}
.button+.button{
    margin-left:.25rem
}
.button--primary{
    background: linear-gradient(90deg, rgb(60 26 107) 0px, rgb(198, 154, 255) 100%);
    border:1px solid rgba(93, 31, 175, 0.2);
    box-shadow:0 2px 14px 2px rgba(143, 72, 236, 0.2);
    color:#fff
}
.button--primary:hover{
    background:linear-gradient(90deg,#6b1fd6 0,#6b1fd6 100%);
    border:1px solid var(--color-primary-light)
}
.button--secondary{
    border:1px solid rgba(0,0,0,.1)
}
.button--secondary:hover{
    background-color:var(--color-primary-light)
}
.text-wavy{
    background-color:transparent;
    -webkit-text-decoration:underline var(--color-primary-light) wavy;
    text-decoration:underline var(--color-primary-light) wavy
}
.text-bg-color{
    background-color:#141414;
    color:#fff;
    border-radius:var(--border-rad);
    padding-right:.4rem;
    padding-left:.4rem;
    
}
@media (min-width:48rem){
    .text-bg-color{
        padding:.25rem .5rem
    }
}
.text-bg-color--secondary{
    background-color:#fc2121
}
@media (min-width:48rem){
    .text-bg-color--secondary{
        padding:.25rem .5rem
    }
}
.text-bg-color--primary-light{
    background-color:var(--color-primary-light);
    color:var(--color-text)
}
@media (min-width:48rem){
    .text-bg-color--primary-light{
        padding:.05rem .5rem
    }
}

.header{
    position:relative;
    background-color: transparent; /* Supprime la couleur de fond */
    border-bottom: none; /* Supprime la bordure inférieure */
    padding: .4rem .5rem;

    
}
@media (min-width:62rem){
    .header{
        
    }
}
.header.fixed-header{
    position:-webkit-relative;
    position:relative;
    top:0;
    width:100%;
    z-index:1;
}
.header-wrapper{
    display:flex;
    align-items:center;

}
.header-wrapper.is-show .header__nav-wrapper{
    right:0;
    opacity:1;
    background-color: rgba(37, 37, 37, 95%);
    color: #fdf9f9;
    border-radius: 5%;
}

.header-wrapper.is-show .header__mobile-button{
    transform:rotate(90deg)
}
.header__mobile-button{
    padding:unset;
    margin-left:auto
}
@media (min-width:62rem){
    .header__mobile-button{
        display:none
    }
}


.header__nav-wrapper{
    position:absolute;
    top:100%;
    right:100%;
    display:flex;
    flex-direction:column;
    border-bottom:1px solid rgba(0,0,0,.1);
    padding: 1.5rem 2rem 2rem;
    transition:var(--transition);
    opacity:0;
    justify-content: space-between;
}
@media (min-width:62rem){
    .header__nav-wrapper{
        position:static;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        flex-grow:1;
        width:unset;
        border:none;
        padding:unset;
        opacity:1;
        
    }
}
.header__nav{
    display:flex;
    flex-direction:column;
    
    padding-right: 5rem;
    
}

@media (min-width:62rem){
    .header__nav{
        display:block;
        margin-bottom:0;
    }
}

.mb{
    display:none;
}
@media (min-width:62rem){
    .mb{
        display:block;
    }
}

@media (min-width:62rem){
    .lg{
        display:none;
    }
}

.header__logo {
    width: 200px;
}
img[src="img/logo.svg"][alt="aliveDomain Logo"] {
    width: 100%;
}
  @media (max-width:48rem){
    .header__logo {
        width: 150px;
    }
}


.header__nav__link{
    font-size:1rem;
    font-weight:var(--font-semibold);
    letter-spacing:var(--letter-spacing)
}
@media (min-width:62rem){
    .header__nav__link{
        font-size:1rem;
        color: #ffffff;
    }
}
.header__nav__link+.header__nav__link{
    margin-top:2rem
    
}
@media (min-width:62rem){
    .header__nav__link+.header__nav__link{
        margin-top:0;
        margin-left:2rem;
        color: #ffffff;
    }
}



.features__top{
    margin-bottom:var(--section-spacing)
}
.features__top__title{
    font-size:300%;
    font-weight:var(--font-extrabold);
    line-height:var(--line-height);
    text-align:center;
    margin-bottom:1.5rem
}
.features__top__subtitle{
    font-size:150%;
    text-align:center;
    color:rgb(255, 255, 255)
}


.footer{
    margin-top:var(--section-spacing);
    margin-bottom:var(--section-spacing)
}
.footer__logo{
    text-align:center;
    padding-top:2rem;
    padding-bottom:2rem
}
.footer__logo img{
    max-width:50%
}
@media (min-width:48rem){
    .footer__logo img{
        max-width:unset
    }
}
.footer__bottom-wrapper{
    display:flex;
    flex-direction:column-reverse;
    place-items:center
}
@media (min-width:48rem){
    .footer__bottom-wrapper{
        flex-direction:row;
        justify-content:center;
        padding-top:1rem
    }
}
.footer__item{
    color:white;

}
@media (min-width:48rem){
    .footer__item{
        padding-right:1rem
    }
}
.footer__item+.footer__item{
    padding-bottom:1rem
}
@media (min-width:48rem){
    .footer__item+.footer__item{
        border-left:1px solid rgba(0,0,0,.2);
        padding-bottom:unset;
        padding-left:1rem;
        color: #ffffff;
    }
}
