@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================
   VARIABLES
========================================= */

:root {

    --bleu: #6173ff;
    --bleu-fonce: #4655d9;

    --turquoise: #26baa4;
    --turquoise-fonce: #179d8b;

    --texte: #172033;
    --texte-secondaire: #667085;

    --fond: #f8faff;
    --blanc: #ffffff;

    --bordure: #e7eaf0;

    --ombre: 0 12px 35px rgba(23, 32, 51, 0.07);

    --ombre-forte:
        0 20px 50px rgba(23, 32, 51, 0.12);

    --rayon: 20px;
}


/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    color: var(--texte);

    background: var(--fond);

    line-height: 1.6;
}


img {
    max-width: 100%;
}


a {
    text-decoration: none;
}


/* =========================================
   HEADER
========================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--bordure);

    box-shadow:
        0 4px 20px rgba(23, 32, 51, 0.04);
}


.header-inner {

    width: min(1120px, 92%);

    min-height: 76px;

    margin: 0 auto;

    display: flex;

    justify-content:
        space-between;

    align-items: center;
}


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--texte);
}


.logo-main {

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: 0.4px;
}


.logo-sub {

    color: var(--bleu);

    font-size: 0.75rem;

    font-weight: 700;

    padding:
        4px 8px;

    border-radius: 999px;

    background: #eef0ff;
}


/* NAVIGATION */

.navigation {

    display: flex;

    align-items: center;

    gap: 8px;
}


.navigation a {

    padding:
        10px 16px;

    border-radius: 10px;

    color: var(--texte);

    font-size: 0.95rem;

    font-weight: 600;

    transition:
        0.2s ease;
}


.navigation a:hover,
.navigation a.active {

    color: var(--bleu);

    background: #f0f2ff;
}


/* =========================================
   HERO
========================================= */

.hero {

    width: min(1120px, 92%);

    min-height: 620px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 70px;
}


.hero-content {

    max-width: 560px;
}


.hero-badge {

    display: inline-block;

    margin-bottom: 20px;

    padding:
        7px 13px;

    border-radius: 999px;

    background: #eef0ff;

    color: var(--bleu);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.hero h1 {

    margin: 0 0 20px;

    font-size:
        clamp(4rem, 8vw, 6.5rem);

    line-height: 0.95;

    letter-spacing: -5px;

    background:
        linear-gradient(
            90deg,
            var(--bleu),
            var(--turquoise)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero p {

    margin: 0;

    color:
        var(--texte-secondaire);

    font-size: 1.1rem;

    line-height: 1.8;
}


/* HERO IMAGE */

.hero-image {

    display: flex;

    justify-content: center;

    align-items: center;
}


.hero-image img {

    width: 100%;

    max-width: 540px;

    border-radius: 20px;

    box-shadow:
        var(--ombre-forte);
}


/* =========================================
   BOUTONS
========================================= */

.hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 32px;
}


.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-height: 52px;

    padding:
        0 22px;

    border-radius: 12px;

    font-size: 0.92rem;

    font-weight: 700;

    transition:
        0.25s ease;
}


.btn-primary {

    color:
        var(--blanc);

    background:
        var(--turquoise);
}


.btn-primary:hover {

    background:
        var(--turquoise-fonce);

    transform:
        translateY(-2px);
}


.btn-secondary {

    color:
        var(--blanc);

    background:
        var(--bleu);
}


.btn-secondary:hover {

    background:
        var(--bleu-fonce);

    transform:
        translateY(-2px);
}


/* =========================================
   TITRES DE SECTIONS
========================================= */

.section-title {

    max-width: 680px;

    margin:
        0 auto 45px;

    text-align: center;
}


.section-title span,
.small-title {

    display: block;

    margin-bottom: 10px;

    color:
        var(--bleu);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 1px;
}


.section-title h2,
.workflow h2 {

    margin:
        0 0 14px;

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

    letter-spacing: -1px;
}


.section-title p {

    margin: 0;

    color:
        var(--texte-secondaire);
}


/* =========================================
   FEATURES
========================================= */

.features {

    width: min(1120px, 92%);

    margin:
        70px auto 0;

    padding:
        80px 0;
}


.features-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;
}


.feature-card {

    padding: 30px;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        var(--rayon);

    box-shadow:
        var(--ombre);

    transition:
        0.25s ease;
}


.feature-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--ombre-forte);
}


.feature-icon {

    width: 45px;

    height: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;

    border-radius: 12px;

    color: var(--blanc);

    background:
        linear-gradient(
            135deg,
            var(--bleu),
            var(--turquoise)
        );

    font-weight: 800;

    font-size: 0.8rem;
}


.feature-card h3 {

    margin:
        0 0 10px;

    font-size: 1.2rem;
}


.feature-card p {

    margin: 0;

    color:
        var(--texte-secondaire);
}


/* =========================================
   WORKFLOW
========================================= */

.workflow {

    width: min(1120px, 92%);

    margin:
        40px auto 0;

    padding:
        70px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        28px;

    box-shadow:
        var(--ombre);
}


.workflow-text p {

    color:
        var(--texte-secondaire);
}


.social-preview {

    padding:
        30px;

    border-radius:
        20px;

    background:
        #f7f8fc;

    border:
        1px solid var(--bordure);
}


.social-preview p {

    margin-top: 0;

    color:
        var(--texte-secondaire);
}


.social-icons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;
}


.social-icons a {

    width: 58px;

    height: 58px;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        var(--blanc);

    border-radius:
        14px;

    box-shadow:
        var(--ombre);

    transition:
        0.2s ease;
}


.social-icons a:hover {

    transform:
        translateY(-3px);
}


.social-icons img {

    max-width: 30px;

    max-height: 30px;
}


/* =========================================
   PARTENAIRES
========================================= */

.partners {

    width: min(1120px, 92%);

    margin:
        100px auto 0;

    padding-bottom:
        80px;
}


.partners-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 20px;
}


.partner {

    min-height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        20px;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        16px;
}


.partner img {

    max-width: 120px;

    max-height: 50px;

    object-fit: contain;

    opacity: 0.65;

    transition:
        0.25s ease;
}


.partner:hover img {

    opacity: 1;

    transform:
        scale(1.05);
}


/* =========================================
   FOOTER
========================================= */

.site-footer {

    padding:
        30px 20px;

    text-align: center;

    color:
        #b9c0cf;

    background:
        #172033;
}


.site-footer strong {

    color:
        var(--blanc);
}


.site-footer p {

    margin:
        7px 0 0;

    font-size:
        0.85rem;
}


/* =========================================
   PAGE CONTACT
========================================= */

.contact-page {

    width: min(1120px, 92%);

    margin:
        0 auto;

    padding-bottom:
        90px;
}


.contact-hero {

    padding:
        80px 20px 60px;

    text-align:
        center;
}


.contact-hero h1 {

    margin:
        0 0 15px;

    font-size:
        clamp(2.7rem, 6vw, 4.5rem);

    letter-spacing:
        -3px;
}


.contact-hero p {

    margin:
        0;

    color:
        var(--texte-secondaire);

    font-size:
        1.05rem;
}


/* CONTACT GRID */

.contact-section {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        50px;

    align-items:
        start;
}


/* INFORMATIONS */

.contact-info {

    padding:
        25px 10px;
}


.contact-info h2 {

    margin:
        0 0 20px;

    font-size:
        2.3rem;

    line-height:
        1.2;
}


.contact-info > p {

    color:
        var(--texte-secondaire);

    font-size:
        1rem;
}


.contact-point {

    margin-top:
        25px;

    padding:
        20px;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        15px;
}


.contact-point strong {

    display:
        block;

    margin-bottom:
        5px;
}


.contact-point span {

    color:
        var(--texte-secondaire);

    font-size:
        0.9rem;
}


/* CARTE FORMULAIRE */

.contact-card {

    padding:
        35px;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        var(--rayon);

    box-shadow:
        var(--ombre);
}


.contact-card h2 {

    margin-top:
        0;

    margin-bottom:
        25px;

    font-size:
        1.7rem;
}


/* FORM */

form .control {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        20px;
}


form label {

    margin-bottom:
        7px;

    font-weight:
        600;

    font-size:
        0.9rem;
}


form input,
form textarea {

    width: 100%;

    padding:
        13px 15px;

    color:
        var(--texte);

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        10px;

    font-family:
        inherit;

    font-size:
        0.95rem;

    outline:
        none;

    transition:
        0.2s ease;
}


form input:focus,
form textarea:focus {

    border-color:
        var(--bleu);

    box-shadow:
        0 0 0 4px
        rgba(97, 115, 255, 0.10);
}


form textarea {

    min-height:
        180px;

    resize:
        vertical;
}


form button {

    width: 100%;

    min-height:
        52px;

    border:
        none;

    border-radius:
        12px;

    color:
        var(--blanc);

    background:
        var(--bleu);

    font-family:
        inherit;

    font-size:
        0.95rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


form button:hover {

    background:
        var(--bleu-fonce);

    transform:
        translateY(-1px);
}


/* ERREURS */

.control small {

    display:
        none;

    margin-top:
        6px;

    color:
        #dc2626;

    font-size:
        0.8rem;
}


.control.erreur small,
.control.succes small {

    display:
        block;
}


.control.erreur input,
.control.erreur textarea {

    border-color:
        #dc2626;
}


.control.succes input,
.control.succes textarea {

    border-color:
        var(--turquoise);
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

    .header-inner {

        min-height:
            68px;

        width:
            92%;
    }


    .logo-main {

        font-size:
            0.9rem;
    }


    .logo-sub {

        font-size:
            0.65rem;
    }


    .navigation {

        gap:
            2px;
    }


    .navigation a {

        padding:
            8px 10px;

        font-size:
            0.85rem;
    }


    .hero {

        min-height:
            auto;

        padding:
            65px 0 50px;

        grid-template-columns:
            1fr;

        gap:
            40px;

        text-align:
            center;
    }


    .hero h1 {

        font-size:
            4rem;

        letter-spacing:
            -3px;
    }


    .hero-buttons {

        flex-direction:
            column;
    }


    .btn {

        width:
            100%;
    }


    .hero-image {

        order:
            -1;
    }


    .hero-image img {

        max-width:
            100%;
    }


    .features {

        padding:
            50px 0;
    }


    .features-grid {

        grid-template-columns:
            1fr;
    }


    .workflow {

        padding:
            30px 22px;

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .partners {

        margin-top:
            70px;
    }


    .partners-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .partner:last-child {

        grid-column:
            1 / -1;
    }


    .contact-page {

        padding-bottom:
            50px;
    }


    .contact-hero {

        padding:
            60px 10px 40px;
    }


    .contact-hero h1 {

        font-size:
            3rem;

        letter-spacing:
            -2px;
    }


    .contact-section {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .contact-info h2 {

        font-size:
            2rem;
    }


    .contact-card {

        padding:
            25px 20px;
    }

}