@font-face {
    font-family: "Righteous";
    src: url(src/fonts/righteous-regular-webfont.woff);
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

:root {
    --title-font: 'Righteous', sans-serif;
    --text-font: 'Montserrat', sans-serif;
    --canard: #0b4c5b;
    --turquoise: #18c4af;
}

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

body{
    font-family: var(--text-font);
}

a {
    text-decoration: none;
    color: inherit;
}

h1, .h1 {
    font-size: 2rem;
    margin: 3rem 0 2rem 0;
}

h2, .h2 {
    font-family: var(--title-font);
    font-size: 2.5rem;
    color: var(--turquoise);
    margin-bottom: 2rem;
    text-transform: uppercase;
}

h3 {
    color: var(--canard);
}

h4 {
    color: var(--canard);
    font-family: var(--text-font);
    font-weight: bold;
}

h6, .h6 {
    font-family: var(--title-font);
    color: var(--canard);
    text-transform: uppercase;
    font-size: .9rem;
    margin-bottom: .5rem;
    margin-top: 0;
}

p {
    margin-bottom: 2rem;
}

svg {
    display: block;
    margin: 0;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.button {
    position: relative;
    display: inline-block;
    background-color: var(--turquoise);
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: 5rem;
    overflow: hidden; /* Cela peut être nécessaire pour empêcher le débordement de l'élément enfant */
    transition: .5s ease-in-out;
}

.icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Ajustez la taille de l'icône selon vos besoins */
    height: auto;
    opacity: 0; /* L'icône est initialement invisible */
    transition: opacity 0.3s ease; /* Ajoute une transition pour une animation fluide */
    margin-right: 10px;
}

.text {
    display: inline-block;
    transition: transform 0.3s ease; /* Ajoute une transition pour une animation fluide */
}

.button:hover .icon {
    opacity: 1; /* Rend l'icône visible lorsqu'on survole le lien */
}

.button:hover .text {
    transform: translateX(10px); /* Ajustez la valeur selon la taille de votre icône */
}

.button:hover {
    background-color: var(--canard);
    border-radius: 0;
    padding: .5rem 1.5rem;
}

.bg-dark {
    background-color: var(--turquoise);
    color: #fff;
}

 /*
.organic {
   border-radius: 43% 37% 25% 51% / 14% 25% 25% 45%;
}
*/

.txt-center{
    text-align: center;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.col-1 { grid-area: 1 / 1 / 2 / 2; }
.col-2 { grid-area: 1 / 2 / 2 / 3; }


#header .container {
    padding: 4rem 1rem;
    background: url(src/botler_illu01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
}

#header > img {
    margin-bottom: 1.5rem;
    width: 50%;
}

#description .txt-center{
    padding: 2rem 1rem;
}

#process .container{
    padding: 5rem 1rem 2rem 1rem;
}

#process img {
    padding-bottom: 1rem;
}

.grid-titre-1::before {
    content: url(src/puce-1.svg);
    display: block;
    width: 20%;
    margin: .5rem auto;
}

.grid-titre-2::before {
    content: url(src/puce-2.svg);
    display: block;
    width: 20%;
    margin: .5rem auto;
}

.grid-titre-3::before {
    content: url(src/puce-3.svg);
    display: block;
    width: 20%;
    margin: .5rem auto;
}

.grid-titre-4::before {
    content: url(src/puce-4.svg);
    display: block;
    width: 20%;
    margin: .5rem auto;
}

.grid-titre-5::before {
    content: url(src/puce-5.svg);
    display: block;
    width: 20%;
    margin: .5rem auto;
}

.grid-titre-1, .grid-titre-2, .grid-titre-3, .grid-titre-4, .grid-titre-5 {
    margin-bottom: .5rem
}

#quote .button {
        margin-top: 2rem;
    transform: translateX(-50%);
    left: 50%;
}

#def h2 {
    color: #fff;
}

#def {
    background-color: var(--canard);
}

#def .container {
    padding: 5rem 1rem 2rem 1rem;
    color: #fff;
}

footer {
    background-color: var(--canard);
    text-align: center;
}

footer img {
    width: 40%;
    margin-bottom: 1rem;
}

footer a {
    color: #fff;
}

.grid-process {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }

.mobile {
    display: block;
}
.desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    header .ajust {max-width:60%;margin: 0 0 0 1rem;}
    .ajust {
        max-width: 80%;
        margin: 0 auto;
    }
    #process img {margin:3rem;}

    .grid-titre-1::before{width: 10%;}
    .grid-titre-2::before{width: 10%;}
    .grid-titre-3::before{width: 10%;}
    .grid-titre-4::before{width: 10%;}
    .grid-titre-5::before{width: 10%;}

    footer img {width: 20%;} 
}

@media screen and (min-width: 1100px) {
    header .ajust {max-width:100%;}

    .ajust {
        max-width: 80%;
        margin: 0 auto;
    }

    #description {
        font-size: 1.5rem;
    }

    #process img {margin:0;}

    footer img {width: 10%;} 

    .mobile {display: none;}
    .desktop {display: block;}
    h4 {font-size: 1.5rem}

    #header .container {background: none;}

    #header {
        padding: 4rem 1rem;
        background: url(src/botler_illu01.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
    }
    #header .ajust > img {
        width: 40%;
    }
}

/*
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grid-icon { grid-area: 1 / 1 / 2 / 2; }
.grid-titre { grid-area: 1 / 2 / 2 / 3; }
.grid-text { grid-area: 2 / 2 / 3 / 3; }