/* =======================================
   1. Custom variables
======================================= */
:root {
    --font-body: 'Rubik', sans-serif;
    --font-title: 'Rubik', sans-serif;
    
    /* =======================================
    Color Theme */
    
    /* Primary color base - #00b86b */
    --color-primary-h: 153;
    --color-primary-s: 100%;
    --color-primary-l: 36%; /* base 500 */
    --color-primary-500-rgb: 0, 184, 107;
    /* Secondary color base - #6a5acd */
    --color-secondary-h: 248;
    --color-secondary-s: 53%;
    --color-secondary-l: 58%; /* base 500 */
    --color-secondary-500-rgb: 106, 90, 205;
    /* Primary shades */
    --color-primary-050: hsl(var(--color-primary-h), var(--color-primary-s), 99%); /* # */
    --color-primary-100: hsl(var(--color-primary-h), var(--color-primary-s), 96%); /* #e6f9f2 */
    --color-primary-200: hsl(var(--color-primary-h), var(--color-primary-s), 88%); /* #baf0db */
    --color-primary-300: hsl(var(--color-primary-h), var(--color-primary-s), 76%); /* #84e6c0 */
    --color-primary-400: hsl(var(--color-primary-h), var(--color-primary-s), 55%); /* #33d89a */
    --color-primary-500: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); /* #00b86b */
    --color-primary-600: hsl(var(--color-primary-h), var(--color-primary-s), 30%); /* #009656 */
    --color-primary-700: hsl(var(--color-primary-h), var(--color-primary-s), 24%); /* #007741 */
    --color-primary-800: hsl(var(--color-primary-h), var(--color-primary-s), 18%); /* #00592f */
    --color-primary-900: hsl(var(--color-primary-h), var(--color-primary-s), 12%); /* #003c1f */
    /* Secondary shades */
    --color-secondary-050: hsl(var(--color-secondary-h), var(--color-secondary-s), 99%); /* # */
    --color-secondary-100: hsl(var(--color-secondary-h), var(--color-secondary-s), 96%); /* #f0effd */
    --color-secondary-200: hsl(var(--color-secondary-h), var(--color-secondary-s), 88%); /* #d8d4f9 */
    --color-secondary-300: hsl(var(--color-secondary-h), var(--color-secondary-s), 76%); /* #bab2f3 */
    --color-secondary-400: hsl(var(--color-secondary-h), var(--color-secondary-s), 66%); /* #9d90ee */
    --color-secondary-500: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l)); /* #6a5acd */
    --color-secondary-600: hsl(var(--color-secondary-h), var(--color-secondary-s), 46%); /* #5949aa */
    --color-secondary-700: hsl(var(--color-secondary-h), var(--color-secondary-s), 36%); /* #45358b */
    --color-secondary-800: hsl(var(--color-secondary-h), var(--color-secondary-s), 26%); /* #322569 */
    --color-secondary-900: hsl(var(--color-secondary-h), var(--color-secondary-s), 16%); /* #1f1543 */
}


/* =======================================
   2. Reset / base
======================================= */
html {
    font-size: 14px;
    position: relative;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--color-secondary-700)
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary-500);
}

/*.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}*/

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Background and text utility classes */

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

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

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

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

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

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

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

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

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

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

.text-primary-100 {
    color: var(--color-primary-100) !important;
}

.text-primary-200 {
    color: var(--color-primary-200) !important;
}

.text-primary-300 {
    color: var(--color-primary-300) !important;
}

.text-primary-400 {
    color: var(--color-primary-400) !important;
}

.text-primary-500 {
    color: var(--color-primary-500) !important;
}

.text-primary-600 {
    color: var(--color-primary-600) !important;
}

.text-primary-700 {
    color: var(--color-primary-700) !important;
}

.text-primary-800 {
    color: var(--color-primary-800) !important;
}

.text-primary-900 {
    color: var(--color-primary-900) !important;
}

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

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

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

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

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

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

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

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

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

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

.text-secondary-100 {
    color: var(--color-secondary-100) !important;
}

.text-secondary-200 {
    color: var(--color-secondary-200) !important;
}

.text-secondary-300 {
    color: var(--color-secondary-300) !important;
}

.text-secondary-400 {
    color: var(--color-secondary-400) !important;
}

.text-secondary-500 {
    color: var(--color-secondary-500) !important;
}

.text-secondary-600 {
    color: var(--color-secondary-600) !important;
}

.text-secondary-700 {
    color: var(--color-secondary-700) !important;
}

.text-secondary-800 {
    color: var(--color-secondary-800) !important;
}

.text-secondary-900 {
    color: var(--color-secondary-900) !important;
}

/* Buttons like Bootstrap with CSS vars only */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-700);
    --bs-btn-focus-shadow-rgb: var(--color-primary-500-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-800);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary-500);
    --bs-btn-disabled-border-color: var(--color-primary-500);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-secondary-500);
    --bs-btn-border-color: var(--color-secondary-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-secondary-600);
    --bs-btn-hover-border-color: var(--color-secondary-700);
    --bs-btn-focus-shadow-rgb: var(--color-secondary-500-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-secondary-700);
    --bs-btn-active-border-color: var(--color-secondary-800);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-secondary-500);
    --bs-btn-disabled-border-color: var(--color-secondary-500);
}

/* Emphasis / subtle variants */
/* Subtle background, emphasized text */

.btn-primary-subtle {
    --bs-btn-color: var(--color-primary-700);
    --bs-btn-bg: var(--color-primary-100);
    --bs-btn-border-color: var(--color-primary-100);
    --bs-btn-hover-color: var(--color-primary-800);
    --bs-btn-hover-bg: var(--color-primary-200);
    --bs-btn-hover-border-color: var(--color-primary-200);
    --bs-btn-focus-shadow-rgb: var(--color-primary-500-rgb);
    --bs-btn-active-color: var(--color-primary-900);
    --bs-btn-active-bg: var(--color-primary-300);
    --bs-btn-active-border-color: var(--color-primary-300);
}

.btn-secondary-subtle {
    --bs-btn-color: var(--color-secondary-700);
    --bs-btn-bg: var(--color-secondary-100);
    --bs-btn-border-color: var(--color-secondary-100);
    --bs-btn-hover-color: var(--color-secondary-800);
    --bs-btn-hover-bg: var(--color-secondary-200);
    --bs-btn-hover-border-color: var(--color-secondary-200);
    --bs-btn-focus-shadow-rgb: var(--color-seconday-500-rgb);
    --bs-btn-active-color: var(--color-secondary-900);
    --bs-btn-active-bg: var(--color-secondary-300);
    --bs-btn-active-border-color: var(--color-secondary-300);
}

/* border */
.border-primary {
    border-color: var(--color-primary-500) !important;
    border-width: 1px;
}

.border-secondary {
    border-color: var(--color-secondary-500) !important;
    border-width: 1px;
}

.border-secondary-200 {
    border-color: var(--color-secondary-200) !important;
    border-width: 1px;
}

.border-dashed {
    border-style: dashed;
}

.border-2px {
    border-width: 2px;
}

/* =======================================
   3. Layout, spacing
======================================= */
.pb-6 {
    padding-bottom: 5rem !important;
}

.pt-6 {
    padding-top: 5rem !important;
}

.py-6 {
    padding-bottom: 5rem !important;
    padding-top: 5rem !important;
}

.pb-7 {
    padding-bottom: 7rem !important;
}

.pt-7 {
    padding-top: 7rem !important;
}

.py-7 {
    padding-bottom: 7rem !important;
    padding-top: 7rem !important;
}

.mb-6 {
    margin-bottom: 5rem !important;
}

.mt-6 {
    margin-top: 5rem !important;
}

.my-6 {
    margin-bottom: 5rem !important;
    margin-top: 5rem !important;
}

.mb-7 {
    margin-bottom: 7rem !important;
}

.mt-7 {
    margin-top: 7rem !important;
}

.my-7 {
    margin-bottom: 7rem !important;
    margin-top: 7rem !important;
}

.max-width-600 {
    max-width: 600px;
}

.max-width-60vw {
    max-width: 60vw;
}

.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* =======================================
   4. Reusable components
======================================= */

.checklist {
    list-style-type: "✅ ";
}

.separator {
    position: absolute;
    width: 100%;
}

.separator-bottom {
    top: 100%;
    left: 0;
}

.separator-right {
    top: 0;
    left: 100%;
    height: 100%;
    width: unset;
}

.-rotate-90 {
    transform: rotate(-90deg);
    transform-origin: top left;
}

.icon-before {
    position: relative;
}

    .icon-before::before {
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1em;
        line-height: 1;
    }

.icon-before-time::before {
    content: "🕘";
    margin-right: 0.5em;
}

.icon-before-phone::before {
    content: "📞";
    margin-right: 0.5em;
}

.icon-before-map::before {
    content: "📍";
    margin-right: 0.5em;
}


/* =======================================
   5. Specific components
======================================= */

/* navbar */
.navbar-secondary {
    background-color: var(--color-secondary-200);
    color: var(--color-secondary-700);
    border-bottom: solid 4px var(--color-secondary-300);
}
/* Liens normaux */
    .navbar-secondary .nav-link {
        color: var(--color-secondary-700) !important;
    }

    /* Survol & focus */
    .navbar-secondary .nav-link:hover,
    .navbar-secondary .nav-link:focus {
        color: var(--color-primary-500) !important;
    }

    /* Lien actif */
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: var(--color-primary-700) !important;
    }

    /* Lien désactivé */
    .navbar-nav .nav-link.disabled {
        color: var(--color-secondary-300) !important;
    }

.navbar-toggler-icon {
    background-image: url("/img/menu-icon-dark.png");
}
/* hero section */
.hero-title {
    font-size: 2.5rem;
    color: var(--color-secondary-700);
}

.hero-text{
    font-size: 1.2rem;
    color: var(--color-secondary-700);
}

/* about section */
/* -- image position management */
.about {
    position: relative;
    padding: 2rem;
    padding-bottom: 300px;
    min-height: 300px;
}

    .about::before {
        position: absolute;
        content: "";
        background-color: var(--color-secondary-200);
        width: 100%;
        height: 100%;
        border-radius: 2rem;
        top: 0;
        left: 0;
        transform: rotate(-2deg) translateY(5px);
        z-index: -1;
    }

@media (min-width: 768px) {
    .about {
        padding-bottom: 2rem;
        padding-left: 300px;
    }
}

.about-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px;
    z-index: 0;
}

@media (min-width: 768px) {
    .about-image {
        left: 0;
        transform: none;
    }
}

/* -- quote style */
.about-quote {
    font-style: italic;
    position: relative;
    z-index: 1;
}

    .about-quote::before,
    .about-quote::after {
        content: '“';
        font-size: 10rem;
        /*color: var(--color-primary-300);*/
        color: var(--color-primary-300);
        opacity: 0.4;
        position: absolute;
        z-index: -1;
    }

    .about-quote::before {
        left: -2rem;
        top: -4rem;
        content: "“";
    }

    .about-quote::after {
        right: -2rem;
        bottom: -4rem;
        content: "„";
    }

/* services section */
.services-title {
    position: relative;
    margin-left: 50px;
}

    .services-title::before {
        position: absolute;
        content: "";
        top: 50%;
        left: -50px;
        width: 57.6px;
        height: 80px;
        background-image: url(/img/icon-arrow-dotted-secondary.png);
        background-size: 57.6px 80px;
        background-repeat: no-repeat;
    }

.services-card {
    border: 4px dashed var(--color-secondary-500);
    border-radius: 2rem;
    background: var(--color-secondary-200);
    position: relative;
}

    .services-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-bottom-left-radius: 1rem;
        border-top-right-radius: 2rem;
        background: var(--color-secondary-200);
        width: 3rem;
        height: 3rem;
    }

    .services-card::after {
        content: '\F633';
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        line-height: 3rem;
        color: var(--color-primary-500);
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 3rem;
    }

.services-card-content {
    background: var(--color-secondary-100);
    border: 10px solid var(--color-secondary-200);
    border-radius: 2rem;
}

.services-audit {
    position: relative;
}
    .services-audit::before {
        content: '\F589';
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        line-height: 3rem;
        color: var(--color-secondary-300);
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: 3rem;
        height: 3rem;
    }

.services-free-call {
    position: relative;
}
    .services-free-call::before {
        content: '\F545';
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        line-height: 3rem;
        color: var(--color-secondary-300);
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: 3rem;
        height: 3rem;
    }

/* contact section */
.contact {
    position: relative;
    z-index: 0;
    background-color: var(--color-secondary-800);
}
.contact::before, .contact::after {
    position: absolute;
    z-index: -1;
    content: "";
    background-color: var(--color-secondary-700);
    border-top: solid 12px var(--color-secondary-300);
    border-bottom: solid 14px var(--color-secondary-900);
}
.contact::before {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform: skewY(8deg);
    transform-origin: right bottom;
}
.contact::after {
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform: skewY(-8deg);
    transform-origin: left bottom;
}

@media (min-width: 1200px) {
    .contact::before {
        transform: skewY(4deg);
    }

    .contact::after {
        transform: skewY(-4deg);
    }
}

.contact .form-control {
    border-color: var(--color-secondary-300);
    border-width: 4px;
    border-style: solid;
    background: var(--color-secondary-100);
    color: var(--color-secondary-700)
}

.contact .form-floating > label {
    color: var(--color-secondary-600);
    font-weight: 400;
}

.guide-cover {
    transform: rotateZ(5deg);
    max-width: 300px;
}
.guide-cover img {
}


.guide-credibility {
    position: relative;
}

    .guide-credibility::before {
        content: '\F4B5';
        font-family: "bootstrap-icons";
        font-size: 1.8rem;
        line-height: 3rem;
        /*color: var(--color-secondary-300);*/
        color: var(--color-primary-500);
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: 3rem;
        height: 3rem;
    }