/* 
Theme Name: indired-custom
Theme URI:https://127.0.0.1/indired
Author: Daniel
Author URI: https://indired.be
Description: Theme "Indired Custom"
Version: 1.0
 */

@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300&display=swap";
@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap";
*,*::before,*::after {
    box-sizing:border-box
}
html {
    line-height:1.15;
    -webkit-text-size-adjust:100%
}
body {
    margin:0
}
main {
    display:block
}
h1 {
    font-size:2em
}
hr {
    box-sizing:content-box;
    height:0;
    overflow:visible
}
pre {
    font-family:monospace,monospace;
    font-size:1em
}
a {
    background-color:rgba(0,0,0,0)
}
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:-0.25em
}
sup {
    top:-0.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
}
button,[type=button],[type=reset],button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style:none;
    padding:0
}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-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] {
    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
}
:root {
    --size:200px;
    --pi:3.14159265358979;
    --circle-r:30%;
    --nb-percent:0;
    --nb-percent-str:"0%";
    --nb-percent-2:0;
    --nb-percent-str-2:"0%";
    --nb-percent-3:0;
    --nb-percent-str-3:"0%";
    --dasharray-max: calc(2 * var(--pi)* var(--circle-r));
    --dasharray-size: calc(var(--dasharray-max)*var(--nb-percent) / 100 );
    --dasharray-size-2: calc(var(--dasharray-max)*var(--nb-percent-2) / 100 );
    --dasharray-size-3: calc(var(--dasharray-max)*var(--nb-percent-3) / 100 );
    --nb-size: calc(var(--circle-r)*2.3);
    --alignement:calc(50% - var(--nb-size)/2)
}
.burger-btn {
    background-color:rgba(0,0,0,0);
    padding:.5rem;
    cursor:pointer;
    border-radius:10px
}
.burger-btn div {
    border:2px solid;
    width:25px;
    margin:.25rem
}
.btn {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-content:center;
    text-align:center;
    background-color:rgba(0,0,0,0);
    border:none;
    padding:1rem;
    cursor:pointer;
    border-radius:10px
}
.btn-white {
    background-color:#fff
}
.btn-white:hover {
    transition:.5s all ease-in-out;
    background-color:hsla(0,0%,100%,.8)
}
.btn-pink {
    background-color:#f9bbd0
}
.btn-pink:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(249,187,208,.8)
}
.btn-black {
    background-color:#000
}
.btn-black:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(0,0,0,.8)
}
.btn-dark {
    background-color:#333
}
.btn-dark:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(51,51,51,.8)
}
.btn-grey {
    background-color:gray
}
.btn-grey:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(128,128,128,.8)
}
.btn-lite-grey {
    background-color:#dfdfdf
}
.btn-lite-grey:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(223,223,223,.8)
}
.btn-orange {
    background-color:#e09d28
}
.btn-orange:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(224,157,40,.8)
}
.btn-skyblue {
    background-color:#6995d2
}
.btn-skyblue:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(105,149,210,.8)
}
.btn-darkblue {
    background-color:#1522bc
}
.btn-darkblue:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(21,34,188,.8)
}
.btn-jauge-disc {
    background-color:#ebbf72
}
.btn-jauge-disc:hover {
    transition:.5s all ease-in-out;
    background-color:rgba(235,191,114,.8)
}
.text-white {
    color:#fff
}
.text-pink {
    color:#f9bbd0
}
.text-black {
    color:#000
}
.text-dark {
    color:#333
}
.text-grey {
    color:gray
}
.text-lite-grey {
    color:#dfdfdf
}
.text-orange {
    color:#e09d28
}
.text-skyblue {
    color:#6995d2
}
.text-darkblue {
    color:#1522bc
}
.text-jauge-disc {
    color:#ebbf72
}
.bg-white {
    background-color:#fff
}
.bg-pink {
    background-color:#f9bbd0
}
.bg-black {
    background-color:#000
}
.bg-dark {
    background-color:#333
}
.bg-grey {
    background-color:gray
}
.bg-lite-grey {
    background-color:#dfdfdf
}
.bg-orange {
    background-color:#e09d28
}
.bg-skyblue {
    background-color:#6995d2
}
.bg-darkblue {
    background-color:#1522bc
}
.bg-jauge-disc {
    background-color:#ebbf72
}
.text-xxs {
    font-size:.6rem
}
.text-xs {
    font-size:.8rem
}
.text-sm {
    font-size:.9rem
}
.text-md {
    font-size:1rem
}
.text-lg {
    font-size:1.1rem
}
.text-xl {
    font-size:1.5rem
}
.text-xxl {
    font-size:2rem
}
.text-3xl {
    font-size:3rem
}
.text-4xl {
    font-size:4rem
}
.text-5xl {
    font-size:5rem
}
#analytics {
    background-image:linear-gradient(180deg, #6995D2 0%, #1558B4 95%)
}
@media screen and (min-width: 992px) {
    #analytics .jauges-container {
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:20px
    }
}
#analytics h2,#analytics p {
    color:#fff;
    text-align:center
}
#analytics h2 {
    padding:20px 5px 0 5px;
    font-size:2rem
}
#analytics h3 {
    font-size:1.5rem
}
@media screen and (min-width: 767px) {
    #analytics h2 {
        font-size:3rem
    }
    #analytics h3 {
        font-size:2rem;
        text-align:center
    }
    #analytics p {
        font-size:1.5rem
    }
}
@media screen and (min-width: 992px) {
    #analytics h3 {
        font-size:1.5rem
    }
    #analytics p {
        font-size:1.1rem
    }
}
@media screen and (min-width: 1200px) {
    #analytics h3 {
        font-size:2rem
    }
    #analytics p {
        font-size:1.5rem
    }
}
#analytics .jauge {
    background:rgba(0,0,0,0);
    display:flex;
    align-items:center;
    justify-content:center;
    height:300px;
    width:100%
}
#analytics .pie {
    display:block;
    position:relative;
    height:var(--size);
    width:var(--size);
    margin:0 auto;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 1px hsla(0,0%,100%,.5)
}
#analytics .pie::after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid rgba(0,0,0,.5);
    left:-1px;
    top:-1px;
    border-radius:50%;
    box-shadow:0 0 4px 255,255,255,.1,0 0 15px rgba(0,0,0,.2),0 0 8px #000 inset,0 0 8px rgba(0,0,0,.5) inset
}
#analytics .pie svg {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    transform:rotate(-90deg)
}
#analytics .pie svg circle {
    stroke:#ebbf72;
    stroke-width:39.7%;
    stroke-dasharray:var(--dasharray-size),var(--dasharray-max);
    transition:all 1s linear
}
#analytics .pie .nb {
    background:linear-gradient(180deg, #fff 0%, #999 100%);
    color:#111;
    height:var(--nb-size);
    width:var(--nb-size);
    position:absolute;
    top:var(--alignement);
    left:var(--alignement);
    border-radius:50%;
    box-shadow:0 0 10px rgb(0,0,.9),0 0 15px hsla(0,0%,100%,.8) inset;
    font-size:calc(var(--size)*.2);
    font-weight:bold;
    line-height:calc(var(--size)/1.5);
    text-shadow:0 2px 0 hsla(0,0%,100%,.8);
    transition:all .2s linear
}
#analytics .pie .nb::after {
    content:var(--nb-percent-str)
}
#analytics .pie-2 {
    display:block;
    position:relative;
    height:var(--size);
    width:var(--size);
    margin:0 auto;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 1px hsla(0,0%,100%,.5)
}
#analytics .pie-2::after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid rgba(0,0,0,.5);
    left:-1px;
    top:-1px;
    border-radius:50%;
    box-shadow:0 0 4px 255,255,255,.1,0 0 15px rgba(0,0,0,.2),0 0 8px #000 inset,0 0 8px rgba(0,0,0,.5) inset
}
#analytics .pie-2 svg {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    transform:rotate(-90deg)
}
#analytics .pie-2 svg circle {
    stroke:#ebbf72;
    stroke-width:39.7%;
    stroke-dasharray:var(--dasharray-size-2),var(--dasharray-max);
    transition:all 1s linear
}
#analytics .pie-2 .nb {
    background:linear-gradient(180deg, #fff 0%, #999 100%);
    color:#111;
    height:var(--nb-size);
    width:var(--nb-size);
    position:absolute;
    top:var(--alignement);
    left:var(--alignement);
    border-radius:50%;
    box-shadow:0 0 10px rgb(0,0,.9),0 0 15px hsla(0,0%,100%,.8) inset;
    font-size:calc(var(--size)*.2);
    font-weight:bold;
    line-height:calc(var(--size)/1.5);
    text-shadow:0 2px 0 hsla(0,0%,100%,.8);
    transition:all .2s linear
}
#analytics .pie-2 .nb::after {
    content:var(--nb-percent-str-2)
}
#analytics .pie-3 {
    display:block;
    position:relative;
    height:var(--size);
    width:var(--size);
    margin:0 auto;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 1px hsla(0,0%,100%,.5)
}
#analytics .pie-3::after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid rgba(0,0,0,.5);
    left:-1px;
    top:-1px;
    border-radius:50%;
    box-shadow:0 0 4px 255,255,255,.1,0 0 15px rgba(0,0,0,.2),0 0 8px #000 inset,0 0 8px rgba(0,0,0,.5) inset
}
#analytics .pie-3 svg {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    transform:rotate(-90deg)
}
#analytics .pie-3 svg circle {
    stroke:#ebbf72;
    stroke-width:39.7%;
    stroke-dasharray:var(--dasharray-size-3),var(--dasharray-max);
    transition:all 1s linear
}
#analytics .pie-3 .nb {
    background:linear-gradient(180deg, #fff 0%, #999 100%);
    color:#111;
    height:var(--nb-size);
    width:var(--nb-size);
    position:absolute;
    top:var(--alignement);
    left:var(--alignement);
    border-radius:50%;
    box-shadow:0 0 10px rgb(0,0,.9),0 0 15px hsla(0,0%,100%,.8) inset;
    font-size:calc(var(--size)*.2);
    font-weight:bold;
    line-height:calc(var(--size)/1.5);
    text-shadow:0 2px 0 hsla(0,0%,100%,.8);
    transition:all .2s linear
}
#analytics .pie-3 .nb::after {
    content:var(--nb-percent-str-3)
}
#analytics .jauge-container {
    background:rgba(0,0,0,0);
    display:flex;
    flex-direction:column;
    align-items:center;
    border-top:1px solid #fff;
    margin:20px 0 20px 0
}
#analytics .jauge-container h3 {
    color:#fff
}
#analytics .jaugeDescription {
    background:rgba(0,0,0,0);
    padding:0 20px 0 20px
}
#analytics .jaugeDescription p {
    color:#fff;
    text-align:center
}
body {
    font-family:"Roboto",sans-serif;
    font-size:1rem;
    color:#333;
    background-color:#fff
}
html {
    scroll-behavior:smooth
}
h1 {
    font-family:"Roboto",sans-serif
}
h2 {
    font-family:"Raleway",sans-serif
}
h3,h4,h5,h6 {
    font-family:"Lato",sans-serif
}
img {
    display:block
}
.wrapper {
    width:95%;
    margin:50px auto
}
.lite-grey-container {
    background-color:#dfdfdf
}
.pink-container {
    background-color:#f9bbd0
}
.orange-container {
    background-color:#e09d28
}
.container {
    border:1px solid #000;
    border-radius:10px;
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center
}
@media screen and (min-width: 992px) {
    .container {
        width:70%
    }
    .container p {
        font-size:1.1rem
    }
}
@media screen and (min-width: 1200px) {
    .container {
        width:65%
    }
    .container p {
        font-size:1.5rem
    }
}
@media screen and (min-width: 1400px) {
    .container {
        width:50%
    }
}
#hook p,#hook-2 p,#testimonials p,#testimonials_graphisme p {
    margin:15px
}
#hook_lg {
    display:flex;
    justify-content:space-between
}
#hook_lg img {
    width:80%
}
#hook_lg h2,#hook_lg p {
    margin:0 15px
}
#hook_lg h2,#hook_lg p {
    padding:15px 0
}
@media screen and (max-width: 992px) {
    #hook_lg .pic-container {
        display:none
    }
}
@media screen and (min-width: 1400px) {
    #hook_lg h2 {
        font-size:2rem
    }
}
.pic-container {
    display:flex;
    justify-content:center;
    align-items:center
}
#testimonials h2,#testimonials_graphisme h2 {
    text-align:center;
    margin-top:50px
}
@media screen and (min-width: 1200px) {
    #testimonials h2,#testimonials_graphisme h2 {
        font-size:2rem
    }
}
#testimonials .testimonial,#testimonials_graphisme .testimonial {
    border:1px solid #000;
    border-radius:10px;
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:10px 0
}
#testimonials .testimonial .testimonial_pic-container,#testimonials_graphisme .testimonial .testimonial_pic-container {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px
}
#testimonials .testimonial .testimonial_pic-container img,#testimonials_graphisme .testimonial .testimonial_pic-container img {
    width:20%
}
@media screen and (min-width: 1200px) {
    #testimonials .testimonial .testimonial_pic-container span,#testimonials_graphisme .testimonial .testimonial_pic-container span {
        font-size:1.5rem
    }
    #testimonials .testimonial .testimonial_pic-container img,#testimonials_graphisme .testimonial .testimonial_pic-container img {
        width:30%
    }
}
@media screen and (min-width: 992px) {
    #testimonials .testimonial,#testimonials_graphisme .testimonial {
        width:70%
    }
    #testimonials .testimonial p,#testimonials_graphisme .testimonial p {
        font-size:1.1rem
    }
}
@media screen and (min-width: 1200px) {
    #testimonials .testimonial,#testimonials_graphisme .testimonial {
        width:65%
    }
    #testimonials .testimonial p,#testimonials_graphisme .testimonial p {
        font-size:1.5rem
    }
}
@media screen and (min-width: 1400px) {
    #testimonials .testimonial,#testimonials_graphisme .testimonial {
        width:50%
    }
}
#formation {
    margin-top:50px;
    background:url("pics/headers/mobile-home-header-hero.webp") center/cover;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
#formation h3 {
    font-size:1.5rem
}
#formation .pink-container,#formation .orange-container {
    margin:20px auto
}
#formation .pink-container {
    text-align:left;
    padding:0 15px 15px 15px
}
#formation .discord-container {
    display:flex;
    border:1px solid #000;
    border-radius:10px;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
    padding:0 15px;
    margin:20px auto
}
#formation .discord-container p {
    font-weight:500
}
#formation .discord-container span {
    color:#6b7fcc
}
#formation .discord-container img {
    width:50px
}
@media screen and (min-width: 992px) {
    #formation .discord-container {
        width:70%
    }
}
#formation .fade-in {
    opacity:0;
}
#formation .fade-in {
    animation: fadeIn 1.5s forwards
}
@keyframes fadeIn {
    to {
        opacity:1
    }
}
@media screen and (min-width: 1200px) {
    #formation {
        background:url("pics/banners/banner-formation.webp") center/cover;
        align-items:flex-start
    }
    #formation h2 {
        font-size:2rem
    }
    #formation h3 {
        font-size:2rem
    }
    #formation .pink-container,#formation .orange-container,#formation .discord-container {
        width:50%;
        margin:20px 0 20px 50px
    }
}
@media screen and (min-width: 1400px) {
    #formation {
        height:100vh
    }
    #formation .pink-container,#formation .orange-container,#formation .discord-container {
        width:40%;
        margin:20px 0 20px 150px
    }
}
#offres h2,#offres-web h2 {
    font-size:2rem
}
#offres .presta-pic_container,#offres-web .presta-pic_container {
    width:90%;
    margin:0 auto
}
#offres .presta-pic_container img,#offres-web .presta-pic_container img {
    width:100%
}
@media screen and (min-width: 767px) {
    #offres .presta-pic_container,#offres-web .presta-pic_container {
        width:40%
    }
}
@media screen and (min-width: 1400px) {
    #offres .presta-pic_container,#offres-web .presta-pic_container {
        width:30%
    }
}
@media screen and (min-width: 992px) {
    #offres .prestations,#offres-web .prestations {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between
    }
}
@media screen and (min-width: 1200px) {
    #offres .prestations,#offres-web .prestations {
        flex-wrap:nowrap
    }
}
#offres .title-article h3,#offres-web .title-article h3 {
    font-size:1.5rem;
    font-family:"Raleway",sans-serif
}
@media screen and (min-width: 992px) {
    #offres .title-article,#offres-web .title-article {
        width:30%
    }
    #offres .title-article p,#offres-web .title-article p {
        font-size:1.1rem
    }
}
@media screen and (min-width: 1400px) {
    #offres .title-article h3,#offres-web .title-article h3 {
        margin-bottom:60px
    }
    #offres .title-article p,#offres-web .title-article p {
        font-size:1.5rem
    }
}
#offres .list-group,#offres-web .list-group {
    margin:50px auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    width:70%
}
@media screen and (min-width: 767px) {
    #offres .list-group,#offres-web .list-group {
        width:50%
    }
}
@media screen and (min-width: 992px) {
    #offres .list-group,#offres-web .list-group {
        width:30%
    }
}
#offres .list-container,#offres-web .list-container {
    margin:5px 0;
    display:flex;
    align-items:flex-start;
    gap:.5em
}
#offres .list-container img,#offres-web .list-container img {
    width:20px;
    margin-top:2px
}
@media screen and (min-width: 992px) {
    #offres .list-container span,#offres-web .list-container span {
        font-size:1.1rem
    }
    #offres .list-container img,#offres-web .list-container img {
        width:30px
    }
}
@media screen and (min-width: 1400px) {
    #offres .list-container span,#offres-web .list-container span {
        font-size:1.5rem
    }
    #offres .list-container img,#offres-web .list-container img {
        width:40px
    }
}
#offres .mockup-pic,#offres-web .mockup-pic {
    margin:50px auto;
    width:80%
}
@media screen and (min-width: 767px) {
    #offres .mockup-pic,#offres-web .mockup-pic {
        width:50%
    }
}
@media screen and (min-width: 992px) {
    #offres .mockup-pic,#offres-web .mockup-pic {
        width:30%
    }
}
#philosophie {
    background-color:#6995d2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}
@media screen and (min-width: 992px) {
    #philosophie {
        flex-direction:row;
        padding:25px
    }
}
#philosophie h2 {
    text-align:center;
    margin:30px 0
}
@media screen and (min-width: 1200px) {
    #philosophie h2 {
        font-size:2rem
    }
}
#philosophie h2,#philosophie a {
    width:80%
}
@media screen and (min-width: 767px) {
    #philosophie a {
        width:60%
    }
}
#philosophie .people {
    display:none
}
@media screen and (min-width: 992px) {
    #philosophie .people {
        display:flex;
        width:40%
    }
}
.wave {
    background-color:#dfdfdf
}
#tarifs-design {
    background-color:#dfdfdf;
    padding:50px 0 15px 0
}
@media screen and (min-width: 992px) {
    #tarifs-design {
        display:flex;
        align-items:center
    }
    #tarifs-design .brandboard {
        width:50%;
        margin:50px auto
    }
}
@media screen and (min-width: 992px) {
    #tarifs-design .brandboard {
        width:60%
    }
}
@media screen and (min-width: 1400px) {
    #tarifs-design .brandboard {
        width:50%
    }
}
#tarifs-design .brandboard img {
    width:100%
}
@media screen and (min-width: 992px) {
    #tarifs-design .brandboard-mobile {
        display:none
    }
}
@media screen and (max-width: 992px) {
    #tarifs-design .brandboard-pc {
        display:none
    }
}
.card {
    margin:0 auto;
    width:80%;
    border-radius:10px;
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background-color:#fff
}
@media screen and (min-width: 767px) {
    .card {
        width:60%
    }
}
.card ul {
    text-align:left;
    width:80%;
    margin-top:30px
}
.card li {
    margin-bottom:10px
}
@media screen and (min-width: 992px) {
    .card {
        height:500px;
        width:30%
    }
}
@media screen and (min-width: 1400px) {
    .card {
        height:500px;
        width:20%
    }
    .card ul {
        margin-top:60px;
        width:90%
    }
}
.card-title {
    border-radius:10px 10px 0 0;
    background-color:#f9bbd0;
    width:100%;
    padding-bottom:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}
.card-title .info-title {
    margin-bottom:0
}
.card-title .info {
    font-size:.9rem;
    margin-bottom:15px
}
.card-title .prix {
    font-size:2rem;
    margin:20px 0 0 0;
    font-weight:800;
    font-family:"Raleway",sans-serif
}
.card-title .prix-info {
    margin-top:5px
}
.card-title-pourqui span{
    margin: 5px 0 0 0;
}
#tarifs-dev,#tarifs-dev_themes,#pourqui {
    background-color:#dfdfdf;
    padding:50px 0 0 0
}
#tarifs-dev .card-container_title,#tarifs-dev_themes .card-container_title,#pourqui .card-container_title {
    margin-bottom:15px;
    text-align:center
}
#tarifs-dev .card-container_title h2,#tarifs-dev_themes .card-container_title h2,#pourqui .card-container_title h2  {
    margin-bottom:0
}
#tarifs-dev .card-container_title span,#tarifs-dev_themes .card-container_title span,#pourqui .card-container_title span {
    font-family:"Lato",sans-serif
}
#tarifs-dev .card-container_info,#tarifs-dev_themes .card-container_info,#pourqui .card-container_info {
    text-align:center;
    padding:0 15px
}
#tarifs-dev .card-container_info span,#tarifs-dev_themes .card-container_info span,#pourqui .card-container_info span {
    font-family:"Lato",sans-serif
}
#tarifs-dev a,#tarifs-dev_themes a {
    display:block;
    margin:0 auto;
    width:80%;
    padding-top:30px
}
#tarifs-dev a img,#tarifs-dev_themes a img {
    width:100%;
    margin:0 auto
}
@media screen and (min-width: 576px) {
    #tarifs-dev a,#tarifs-dev_themes a {
        width:50%
    }
}
@media screen and (min-width: 992px) {
    #tarifs-dev a,#tarifs-dev_themes a {
        width:30%
    }
}
@media screen and (min-width: 1200px) {
    #tarifs-dev a,#tarifs-dev_themes a {
        width:20%
    }
}
.card-container {
    display:flex;
    flex-direction:column;
    gap:5vh;
    margin-bottom:20px
}
@media screen and (min-width: 992px) {
    .card-container {
        flex-direction:row;
        padding:0 15px
    }
}
.wave-grey {
    background-color:#fff
}
.wave-grey-blue-bg{
    background-color:#6995d2
}
#extrait-blog .blog-container {
    background-color:#cd5c5c;
    height:30vh
}
@media screen and (min-width: 767px) {
    #presentation .hello {
        display:flex;
        align-items:center
    }
}
#presentation .hello img {
    display:none
}
@media screen and (min-width: 767px) {
    #presentation .hello img {
        display:block;
        width:30%;
        padding:0 15px
    }
}
@media screen and (min-width: 1400px) {
    #presentation .hello p {
        font-size:1.5rem
    }
}
#presentation .hello-title {
    font-style:italic;
    font-family:"Lato",sans-serif
}
@media screen and (min-width: 992px) {
    #presentation .hello-title {
        font-size:2rem
    }
}
@media screen and (min-width: 1400px) {
    #presentation .hello-title {
        font-size:3rem
    }
}
#presentation .me-container h2 {
    font-family:"Raleway",sans-serif
}
#presentation .me-container img {
    width:40%;
    margin:0 auto
}
@media screen and (min-width: 767px) {
    #presentation .me-container img {
        display:none
    }
}
@media screen and (min-width: 767px) {
    #presentation .me-container {
        display:flex;
        flex-direction:row-reverse;
        justify-content:center;
        align-items:center
    }
}
@media screen and (min-width: 1400px) {
    #presentation .presentation-container_section h2 {
        font-size:2rem
    }
    #presentation .presentation-container_section p,#presentation .presentation-container_section li {
        font-size:1.5rem
    }
}
#expertise {
    background-color:#f9bbd0
}
@media screen and (min-width: 767px) {
    #expertise .expertise-container {
        display:flex;
        justify-content:space-between;
        gap:2em
    }
}
#expertise .illustration,#expertise .expertise-content {
    padding:20px 0
}
#expertise .illustration {
    display:flex;
    justify-content:space-around;
    align-items:flex-end
}
#expertise .illustration h2 {
    margin-bottom:0
}
#expertise .illustration img {
    width:30%
}
@media screen and (min-width: 767px) {
    #expertise .illustration {
        align-items:center
    }
    #expertise .illustration h2 {
        display:none
    }
    #expertise .illustration img {
        width:100%
    }
}
#expertise .expertise-content h2 {
    display:none
}
@media screen and (min-width: 767px) {
    #expertise .expertise-content h2 {
        display:block
    }
}
#expertise .expertise-content span {
    font-style:italic;
    font-weight:700
}
@media screen and (min-width: 1400px) {
    #expertise .expertise-content h2 {
        font-size:2rem
    }
    #expertise .expertise-content p {
        font-size:1.5rem
    }
}
#teamwork {
    background-color:#f9bbd0;
    padding-bottom:10px
}
@media screen and (min-width: 1200px) {
    #teamwork h3 {
        font-size:2rem
    }
    #teamwork p,#teamwork li,#teamwork span {
        font-size:1.5rem
    }
}
#teamwork h3 {
    font-weight:800
}
#teamwork .section-header {
    width:100%
}
#teamwork .section-header img {
    width:100%
}
@media screen and (min-width: 992px) {
    #teamwork .section-header {
        display:none
    }
}
@media screen and (min-width: 992px) {
    #teamwork .teamwork-container {
        display:flex;
        padding-top:25px;
        align-items:center;
        gap:2em
    }
}
#teamwork .hidden-pic {
    display:none
}
@media screen and (min-width: 992px) {
    #teamwork .hidden-pic {
        display:block;
        width:100%
    }
    #teamwork .hidden-pic img {
        width:100%;
        border-radius:20px;
        box-shadow:2px 4px 4px rgba(0,0,0,.5)
    }
}
#hook-3 h2 {
    text-align:center;
    font-weight:900;
    font-family:"Roboto",sans-serif;
    font-size:2rem
}
#hook-3 img {
    width:70%;
    margin:0 auto
}
@media screen and (min-width: 767px) {
    #hook-3 img {
        width:50%;
        margin:50px auto 0px auto
    }
}
@media screen and (min-width: 767px) {
    #hook-3 img {
        width:40%;
        margin:50px auto 0px auto
    }
}
@media screen and (min-width: 1400px) {
    #hook-3 img {
        width:30%;
        margin:50px auto 0px auto
    }
}
.blog-content .blog-pic-container {
    width:100%
}
.blog-content .blog-pic-container img {
    width:100%
}
@media screen and (min-width: 992px) {
    .blog-content .blog-pic-container {
        width:70%;
        margin:30px auto
    }
}
@media screen and (min-width: 1200px) {
    .blog-content .blog-pic-container {
        width:60%;
        margin:30px auto
    }
}
#home-header {
    background:url("pics/headers/mobile-home-header-hero.webp") center/cover
}
#home-header p {
    width:55%
}
#about-header {
    background:url("pics/headers/mobile-about-header-hero.webp") center/cover
}
#about-header span {
    font-style:italic;
    font-weight:700
}
#about-header p {
    width:80%
}
#blog-header {
    background:url("pics/headers/blog-template-header.webp") center/cover
}
#blog-title-header,#blog-header {
    background:url("pics/headers/blog-template-header.webp") center/cover
}
#blog-title-header span,#blog-header span {
    color:#fff;
    margin-top:5px
}
#blog-title-header .blog-title-container,#blog-header .blog-title-container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width:95%;
    margin:15vh 0 5vh 0
}
#blog-title-header .blog-title-container h1,#blog-header .blog-title-container h1 {
    width:100%;
    text-align:center
}
#blog-title-header .blog-title-container p,#blog-header .blog-title-container p {
    text-align:center
}
@media screen and (min-width: 992px) {
    #blog-title-header .blog-title-container span,#blog-header .blog-title-container span {
        font-size:1.5rem
    }
    #blog-title-header .blog-title-container .categorie,#blog-header .blog-title-container .categorie {
        font-size:1.5rem
    }
}
.categorie a{
    text-decoration: none;
    color: #fff;
}
.categorie li{
    list-style-type: none;
}
.post-categories{
    padding: 0;
    margin: 0;
}
.header-section {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative
}
.header-section .title-container {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    max-width:95%;
    margin-top:15vh
}
.header-section h1,.header-section p {
    margin-top:0;
    position:relative;
    color:#fff;
    text-shadow:2px 4px 4px rgba(0,0,0,.9);
    padding:0 0px;
    font-size:1.1rem
}
.header-section h1 {
    font-size:2rem
}
.header-section h1 span {
    font-style:italic;
    font-weight:900
}
.header-section .main-title_btn {
    position:relative;
    z-index:1000
}
@media screen and (min-width: 576px) {
    .header-section h1 {
        font-size:2rem;
        width:90%
    }
    .header-section p {
        font-size:1.5rem
    }
}
@media screen and (min-width: 767px) {
    .header-section h1 {
        font-size:3rem
    }
}
@media screen and (min-width: 992px) {
    .header-section h1 {
        font-size:3rem
    }
    .header-section p {
        font-size:2rem
    }
}
@media screen and (min-width: 1400px) {
    .header-section h1 {
        font-size:5rem;
        width:70%
    }
    .header-section p {
        font-size:3rem
    }
}
footer {
    background-color:#f9bbd0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px 15px;
    font-family:"Raleway",sans-serif
}
footer img {
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
    width:30%
}
footer a {
    font-weight:800;
    font-size:.8rem;
    text-decoration:none
}
footer .footer-nav_container {
    display:flex;
    flex-direction:column;
    align-items:flex-end
}
footer .footer-nav {
    margin-bottom:5px
}
footer .footer-nav a {
    color:#333
}
footer .rgpd a {
    color:#fff
}
footer .footer-nav :last-child,footer .rgpd :last-child {
    margin-left:10px
}
@media screen and (max-width: 576px) {
    footer a {
        font-size:.6rem
    }
}
@media screen and (min-width: 767px) {
    footer img {
        width:20%
    }
    footer a {
        font-size:1.1rem
    }
}
@media screen and (min-width: 992px) {
    footer a {
        font-size:1.5rem
    }
}
nav {
    position:fixed;
    width:100%;
    z-index:10000;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 25px;
    background-color:rgba(41,40,40,.651)
}
nav .nav-icon {
    display:flex;
    justify-content:center
}
nav .nav-icon img {
    width:150px
}
nav button {
    border:none
}
nav .link {
    cursor:pointer
}
.navLinks-container a {
    margin:0 10px;
    font-size:1rem;
    display:inline-block;
    position:relative;
    text-decoration:none;
    color:#333;
    z-index:15000
}
.menu{
    list-style: none;
    display: flex;
}
.navLinks-container a::after {
    content:"";
    display:block;
    position:absolute;
    bottom:-3px;
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    background:#fff;
    transition:transform .3s ease-out
}
.navLinks-container a:hover::after {
    transform:scaleX(1)
}
#mobile-contact {
    margin-top:5em;
    box-shadow:4px 4px 4px rgba(0,0,0,.5)
}
.user-nav {
    margin-left:auto;
    display:flex;
    justify-content:center
}
.user-nav #contact {
    min-width:200px
}
@media screen and (max-width: 767px) {
    nav {
        padding:0px 20px
    }
    nav .nav-icon {
        order:2
    }
    nav .main-navLinks {
        order:1
    }
    nav .burger {
        width:30px;
        height:30px;
        cursor:pointer;
        display:flex;
        border:none;
        background-color:rgba(0,0,0,0);
        align-items:center;
        position:relative;
        padding:0
    }
    nav .burger span {
        display:block;
        width:100%;
        height:2px;
        background:#fff;
        position:absolute;
        pointer-events:none;
        transition:opacity .3s .15s ease-out
    }
    nav .burger span:nth-child(1) {
        transform:translateY(7px)
    }
    nav .burger span:nth-child(3) {
        transform:translateY(-7px)
    }
    nav .burger span:nth-child(1),nav .burger span:nth-child(3) {
        transition:transform .3s ease-out
    }
    nav .burger.open span:nth-child(1) {
        transform:translate(0) rotate(135deg)
    }
    nav .burger.open span:nth-child(2) {
        opacity:0;
        transition:opacity 0s ease-out
    }
    nav .burger.open span:nth-child(3) {
        transform:translate(0) rotate(-135deg)
    }
    nav .navLinks-container {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        position:absolute;
        background:#fafafa;
        top:100%;
        left:0;
        height:100vh;
        padding:15px 50px 15px 20px;
        border-right:1px solid #c5c5c6;
        transform:translate(-100%)
    }
    nav .navLinks-container a {
        font-size:1.1rem;
        margin:10px 0
    }
    nav .open {
        transform:translate(0%)
    }
    nav .menu{
        flex-direction: column;
    }
}
@media screen and (max-width: 576px) {
    .user-nav {
        display:none
    }
}
@media screen and (min-width: 576px) {
    .user-nav {
        display:flex;
        order:3;
        margin-left:0
    }
    .user-nav a {
        margin:5px 5px 0 0
    }
}
@media screen and (min-width: 767px) {
    .main-navLinks button {
        display:none
    }
    .navLinks-container {
        display:flex;
        flex-direction:row;
        justify-content:center;
        width:100%;
        gap:5em
    }
    .navLinks-container a {
        color:#fff
    }
    #mobile-contact {
        display:none
    }
}
#quiz{
	margin: 0 auto 20px auto;
    box-shadow:2px 4px 4px rgba(0,0,0,.5);
}
#quiz a {
	font-size: 1.5em;
}
@media screen and (max-width: 576px) {
	#quiz a {
		font-size: 1em;
	}
}
/*# sourceMappingURL=styles.min.css.map */