* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    color: #0A2342;
    background: #ffffff;
}
html{

    scroll-behavior:smooth;

}

/* BANDEAU D'ANNONCE */
.announcement-bar {
    background: linear-gradient(120deg, #0A3D62 0%, #06283D 100%);
    color: white;
    text-align: center;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.announcement-bar i.fa-rocket {
    color: #D4AF37;
}

.announcement-bar a {
    color: #D4AF37;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.announcement-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 650px) {
    .announcement-bar {
        font-size: 12.5px;
        padding: 10px 14px;
    }
}

/* HEADER */
.header {
    height: 80px;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    height: 46px;
    width: auto;
    display: block;
}

.logo-text {
    display: flex;
    flex-direction: column;
    font-weight: 800;
    color: #0A3D62;
    letter-spacing: 4px;
    font-size: 28px;
}

.logo-text small {
    font-size: 10px;
    letter-spacing: 2px;
    color: #D4AF37;
    margin-top: 2px;
}

.nav {
    display: flex;
    gap: 28px;
}

.nav a {
    text-decoration: none;
    color: #0A2342;
    font-size: 14px;
    font-weight: 600;
}

.nav a:hover {
    color: #D4AF37;
}

.btn-header {
    background: #0A3D62;
    color: white;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
}
.btn-primary,
.btn-secondary {
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 10px;
    font-weight: 800;
}

.btn-primary {
    background: #0A3D62;
    color: white;
}

.btn-secondary {
    border: 2px solid #0A3D62;
    color: #0A3D62;
}

.btn-primary:hover {
    background: #06283D;
}

.btn-secondary:hover {
    background: #0A3D62;
    color: white;
}

/* BURGER (masqué sur desktop) */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.burger span {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: #0A3D62;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .header {
        padding: 0 22px;
    }

    .burger {
        display: flex;
    }

    .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: #ffffff;
        padding: 32px 24px;
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
        transform: translateY(-140%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 1000;
    }

    .nav.active {
        transform: translateY(0);
        opacity: 1;
    }

    .nav a {
        font-size: 16px;
    }

    .hero-dashboard {
        width:100%;
    }
}

/* POURQUOI TIERSA */
.why-section {
    padding: 90px 60px;
    background: #ffffff;
}

.section-header {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-badge {
    display: inline-block;
    color: #D4AF37;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 14px;
}

.section-header h2 {
    font-size: clamp(32px, 2.6vw, 46px);
    color: #0A2342;
    margin-bottom: 18px;
}

.section-header p {
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.7;
    color: #52616B;
}

.why-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    width: 100%;
    margin-bottom: 50px;
}

.why-visual {
    display: flex;
    justify-content: center;
    width: 100%;
}

.why-visual img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.why-card {
    background: #ffffff;
    border: 1px solid #E6EEF5;
    border-radius: 22px;
    padding: 34px 28px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(10, 61, 98, 0.08);
    transition: 0.25s ease;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(10, 61, 98, 0.14);
}

.why-card .icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.why-card h3 {
    font-size: 22px;
    color:#0A3D62;
    margin-bottom: 12px;
}

.why-card p {
    font-size: 15px;
    line-height: 1.6;
    color:#52616B;
}

@media (max-width: 1000px) {
    .why-visual img {
        max-width: 260px;
    }
}

@media (max-width: 650px) {
    .why-section {
        padding: 70px 24px;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 34px;
    }
}
/* Animation Hero */

.hero-content{

    animation:slideLeft .9s ease;

}

.hero-dashboard{

    animation:slideRight .9s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
/* COMMENT ÇA MARCHE */

.process-section {
    padding: 100px 60px;
    background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%);
}

.process-timeline {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    position: relative;
}

.process-step {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 22px;
    padding: 30px 24px;
    box-shadow: 0 18px 40px rgba(10, 61, 98, 0.08);
    transition: .25s ease;
    position: relative;
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(10, 61, 98, 0.14);
}

.step-number {
    width: 52px;
    height: 52px;
    background: #0A3D62;
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-bottom: 22px;
}

.process-step h3 {
    font-size: 20px;
    color: #0A3D62;
    margin-bottom: 12px;
}

.process-step p {
    font-size: 15px;
    line-height: 1.6;
    color: #52616B;
}

@media (max-width: 1100px) {
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .process-section {
        padding: 70px 24px;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }
}

/* PROFESSIONNELS */
.professionals-section {
    padding: 110px 60px;
    background: linear-gradient(120deg, #0A3D62 0%, #06283D 100%);
    color: white;
}

.professionals-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: start;
}

.professionals-text h2 {
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 24px;
}

.professionals-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #DDE7F0;
    margin-bottom: 32px;
}

.professionals-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.professionals-tags span {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 30px;
}

.professionals-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.professionals-join {
    color: #DDE7F0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s ease, gap .2s ease;
}

.professionals-join i {
    font-size: 13px;
    transition: transform .2s ease;
}

.professionals-join:hover {
    color: #D4AF37;
}

.professionals-join:hover i {
    transform: translateX(4px);
}

.professionals-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pro-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 32px 24px;
    backdrop-filter: blur(8px);
    transition: .3s;
}

.pro-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.16);
}

.pro-card i {
    width: 62px;
    height: 62px;
    background: #D4AF37;
    color: #0A3D62;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
}

.pro-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.pro-card p {
    color: #DDE7F0;
    line-height: 1.6;
}

/* Bientot disponible - espace professionnel */
.pro-coming-soon {
    max-width: 900px;
    margin: 60px auto 0;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.pro-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.pro-coming-soon h3 {
    font-size: 26px;
    color: white;
    margin-bottom: 12px;
}

.pro-coming-soon > p {
    color: #DDE7F0;
    font-size: 15px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 34px;
}

.pro-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

.pro-category {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 24px;
}

.pro-category i {
    color: #D4AF37;
    font-size: 22px;
    margin-bottom: 12px;
}

.pro-category h4 {
    color: white;
    font-size: 17px;
    margin-bottom: 8px;
}

.pro-category p {
    color: #C9D6E2;
    font-size: 14px;
    line-height: 1.6;
}

.pro-interest-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.pro-interest-form input,
.pro-interest-form select {
    flex: 1 1 200px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.pro-interest-form input::placeholder {
    color: #C9D6E2;
}

.pro-interest-form select option {
    color: #0A2342;
}

.pro-interest-form button {
    flex: 1 1 100%;
    background: #D4AF37;
    color: #0A2342;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease;
}

.pro-interest-form button:hover {
    background: #c8a02f;
}

@media(max-width: 700px) {
    .pro-categories {
        grid-template-columns: 1fr;
    }
}

@media(max-width:1000px) {
    .professionals-content {
        grid-template-columns: 1fr;
    }

    .professionals-cards {
        grid-template-columns: 1fr;
    }

    .professionals-text h2 {
        font-size: 36px;
    }
}

@media(max-width:650px) {
    .professionals-section {
        padding: 80px 24px;
    }
}
.stats-section {
    padding: 100px 60px;
    background: #F8FAFC;
}

.stats-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stat-card {
    background: white;
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(10, 61, 98, 0.08);
    transition: .3s;
}

.stat-card:hover {
    transform: translateY(-8px);
}

.stat-card h2 {
    font-size: 52px;
    color: #0A3D62;
    margin-bottom: 15px;
}

.stat-card p {
    color: #52616B;
    font-size: 17px;
    line-height: 1.6;
}

@media(max-width: 900px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 650px) {
    .stats-container {
        grid-template-columns: 1fr;
    }

    .stats-section {
        padding: 70px 24px;
    }
}

/* ===========================
   HERO V3 - TIERSA
=========================== */

.hero-v3{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:36px 80px 80px;
    display:grid;
    grid-template-columns:1fr 480px;
    align-items:start;
    gap:60px;
}

@media (min-width: 1700px) {
    .hero-v3 {
        max-width: 1560px;
        gap: 70px;
    }

    .hero-right {
        max-width: 540px;
    }
}


.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width: min(750px, 100%);
    align-self: center;
}

.hero-beta-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF7E0;
    border: 1px solid #E9D28A;
    color: #6b4d10;
    font-size: 13px;
    line-height: 1.6;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 22px;
    max-width: 560px;
}

.hero-beta-notice i {
    color: #D4AF37;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.hero-badge {
    display: inline-block;
    color: #D4AF37;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 18px;
}

.hero-left h1{
    font-size: clamp(38px, 3.4vw, 68px);
    line-height:1.08;
    letter-spacing:-1.5px;
    margin:18px 0 22px;
    color:#0A2342;
    font-weight:800;
}

.hero-left h1 span {
    display: block;
    color: #2E7D32;
}

.hero-left p{
    font-size: clamp(16px, 1.15vw, 20px);
    line-height:1.7;
    color:#52616B;
    margin-bottom:32px;
    max-width:620px;
}

.hero-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    min-width: 210px;
    text-align: center;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #52616B;
    font-size: 15px;
    font-weight: 600;
}

.hero-trust i {
    color: #2ECC71;
    font-size: 20px;
}

.hero-watermark {
    width: 90px;
    height: auto;
    opacity: 0.16;
    margin-top: 46px;
}

@media (max-width: 1000px) {
    .hero-watermark {
        display: none;
    }
}

.hero-right {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.connection-card {
    background: #ffffff;
    border: 1px solid #E6EEF5;
    border-radius: 26px;
    padding: 34px 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(10, 61, 98, 0.10);
}

.country {
    min-width: 90px;
    text-align: center;
}

.country-code {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: #0A3D62;
    margin-bottom: 8px;
}

.country strong {
    display: block;
    color: #0A3D62;
    font-size: 16px;
}

.country small {
    color: #52616B;
    font-size: 13px;
}

.connection-line {
    flex: 1;
    height: 3px;
    background: #D4AF37;
    margin: 0 22px;
    position: relative;
    border-radius: 20px;
}

.connection-line span {
    width: 15px;
    height: 15px;
    background: #2ECC71;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: 0;
    box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.15);
    animation: moveDot 2.8s infinite ease-in-out;
}

@keyframes moveDot {
    0% {
        left: 0;
    }

    50% {
        left: calc(100% - 15px);
    }

    100% {
        left: 0;
    }
}

.hero-dashboard {
    width: 100%;
    background: white;
    border-radius: 30px;
    padding: 34px;
    box-shadow: 0 35px 90px rgba(10, 61, 98, 0.16);
    position: relative;
    overflow: hidden;
}

.hero-dashboard::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(46, 204, 113, 0.18) 0%,
            rgba(46, 204, 113, 0.04) 70%,
            transparent 100%);
    top: -90px;
    right: -90px;
}

.dashboard-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.status {
    width: 12px;
    height: 12px;
    background: #2ECC71;
    border-radius: 50%;
    display: inline-block;
    margin-top: 10px;
    flex-shrink: 0;
}

.dashboard-header h3 {
    color: #0A3D62;
    font-size: 30px;
    margin-bottom: 2px;
}

.dashboard-header small {
    color: #52616B;
}

.mission-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background: #F4FCF7;
    color: #2E7D32;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2ECC71;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.progress-card {
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 800;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #EDF2F7;
    border-radius: 30px;
}

.progress-fill {
    width: 68%;
    height: 100%;
    background: #2ECC71;
    border-radius: 30px;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.dashboard-item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: #F8FAFC;
}

.dashboard-item i {
    width: 54px;
    height: 54px;
    background: #EDF6FF;
    color: #0A3D62;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.dashboard-item strong {
    display: block;
    color: #0A3D62;
}

.dashboard-item small {
    color: #52616B;
}

.dashboard-button {
    margin-top: 26px;
    position: relative;
    z-index: 2;
}

.dashboard-button a {
    display: block;
    text-align: center;
    background: #0A3D62;
    color: white;
    text-decoration: none;
    padding: 16px;
    border-radius: 14px;
    font-weight: 800;
}

.dashboard-button a:hover {
    background: #06283D;
}

@media(max-width: 1000px) {
    .hero-v3 {
        grid-template-columns: 1fr;
        padding: 70px 24px;
        gap: 50px;
        text-align: center;
    }

    .hero-left {
        max-width: 100%;
    }

    .hero-left p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-trust {
        justify-content: center;
    }

    .hero-left h1 {
        font-size: 48px;
    }
}

@media(max-width: 650px) {
    .hero-left h1 {
        font-size: 40px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
    }

     .connection-card {
     background: white;
     border: 1px solid #E6EEF5;
     border-radius: 24px;
     padding: 24px 28px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     box-shadow: 0 20px 50px rgba(10, 61, 98, 0.10);
     margin-bottom: 12px;
  }

     .connection-line {
     flex: 1;
     height: 3px;
     background: #D4AF37;
     margin: 0 18px;
     position: relative;
     border-radius: 20px;
 }

    .connection-line span {
        top: 0;
        left: -6px;
        animation: moveDotVertical 2.8s infinite ease-in-out;
    }

    @keyframes moveDotVertical {
        0% {
            top: 0;
        }

        50% {
            top: calc(100% - 15px);
        }

        100% {
            top: 0;
        }
    }
}
/* ===============================
   AVIS CLIENTS
================================== */

.testimonials{

padding:100px 60px;

background:#F8FBFD;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:white;

border-radius:24px;

padding:35px;

box-shadow:0 18px 50px rgba(10,61,98,.08);

transition:.3s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.stars{

font-size:24px;

color:#D4AF37;

margin-bottom:20px;

}

.testimonial-card p{

font-size:17px;

line-height:1.8;

color:#52616B;

margin-bottom:30px;

font-style:italic;

}

.client{

display:flex;

align-items:center;

gap:15px;

}

.avatar{

width:55px;

height:55px;

border-radius:50%;

background:#0A3D62;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

font-size:22px;

}

.client strong{

display:block;

color:#0A3D62;

font-size:17px;

}

.client small{

color:#52616B;

}

@media(max-width:900px){

.testimonial-grid{

grid-template-columns:1fr;

}

}

.reviews-cta {
    max-width: 700px;
    margin: 60px auto 0;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #E6EEF5;
}

.reviews-cta p {
    font-size: 17px;
    color: #34495E;
    margin-bottom: 22px;
}

.reviews-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.reviews-cta-buttons .btn-primary i {
    margin-right: 8px;
}

@media(max-width: 650px) {
    .reviews-cta {
        padding-top: 30px;
    }

    .reviews-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===============================
   NOS SERVICES
================================== */

.services-section {
    padding: 100px 60px;
    background: #ffffff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto 0;
}

.service-card {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.08);
    transition: .3s;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(10, 61, 98, 0.14);
}

.service-card i {
    width: 68px;
    height: 68px;
    background: #EDF6FF;
    color: #0A3D62;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
}

.service-card h3 {
    font-size: 23px;
    color: #0A3D62;
    margin-bottom: 14px;
}

.service-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #52616B;
}

@media(max-width: 1000px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 650px) {
    .services-section {
        padding: 70px 24px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   TARIFS
================================== */

.pricing-section {
    padding: 100px 60px;
    background: #F8FAFC;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto 0;
    align-items: start;
}

.pricing-card {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.08);
    transition: .3s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(10, 61, 98, 0.14);
}

.pricing-card-highlight {
    border: 2px solid #0A3D62;
    padding-top: 46px;
}

.pricing-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #0A3D62;
    color: white;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 30px;
    white-space: nowrap;
}

.pricing-card h3 {
    font-size: 24px;
    color: #0A3D62;
    margin-bottom: 8px;
}

.pricing-desc {
    font-size: 15px;
    color: #52616B;
    margin-bottom: 22px;
}

.pricing-list {
    list-style: none;
    margin-bottom: 26px;
    flex-grow: 1;
}

.pricing-list li {
    font-size: 15px;
    color: #34495E;
    padding-left: 26px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1.5;
}

.pricing-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #2ECC71;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
}

.pricing-price {
    font-size: 15px;
    font-weight: 800;
    color: #0A3D62;
    background: #EDF6FF;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 22px;
}

.pricing-btn {
    text-align: center;
    width: 100%;
}

.pricing-demo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #0A3D62;
    text-decoration: none;
}

.pricing-demo-link i {
    font-size: 12px;
    transition: transform .2s ease;
}

.pricing-demo-link:hover i {
    transform: translateX(4px);
}

@media(max-width: 1000px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .pricing-card-highlight {
        order: -1;
    }
}

@media(max-width: 650px) {
    .pricing-section {
        padding: 70px 24px;
    }
}

/* ===============================
   FAQ
================================== */

.faq-section {
    padding: 100px 60px;
    background: #F8FAFC;
}

.faq-container {
    max-width: 950px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.faq-item {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.06);
}

.faq-item h3 {
    font-size: 21px;
    color: #0A3D62;
    margin-bottom: 12px;
}

.faq-item p {
    font-size: 16px;
    line-height: 1.7;
    color: #52616B;
}

@media(max-width: 650px) {
    .faq-section {
        padding: 70px 24px;
    }
}
/* ===============================
   CTA FINAL
================================== */

.final-cta {
    padding: 110px 60px;
    background: linear-gradient(120deg, #0A3D62 0%, #06283D 100%);
    color: white;
    text-align: center;
}

.final-cta-content {
    max-width: 850px;
    margin: auto;
}

.final-cta h2 {
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 24px;
}

.final-cta p {
    font-size: 19px;
    line-height: 1.8;
    color: #DDE7F0;
    margin-bottom: 34px;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.final-cta .btn-secondary {
    border-color: white;
    color: white;
}

.final-cta .btn-secondary:hover {
    background: white;
    color: #0A3D62;
}

/* ===============================
   FORMULAIRE - LANCER MON PROJET
================================== */

.project-form-section {
    padding: 100px 60px;
    background: #F8FAFC;
}

.project-form {
    max-width: 820px;
    margin: 50px auto 0;
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 24px;
    padding: 46px;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.project-form label {
    font-size: 14px;
    font-weight: 700;
    color: #0A3D62;
    margin-bottom: 8px;
}

.project-form input,
.project-form textarea {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #0A2342;
    background: #F8FAFC;
    border: 1px solid #E6EEF5;
    border-radius: 12px;
    padding: 14px 16px;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.project-form input:focus,
.project-form textarea:focus {
    outline: none;
    border-color: #0A3D62;
    box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.1);
}

.form-submit {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

@media(max-width: 700px) {
    .project-form-section {
        padding: 70px 24px;
    }

    .project-form {
        padding: 30px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

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

.footer {
    background: #061B2E;
    color: white;
    padding: 70px 60px 25px;
}

.footer-content {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 45px;
}

.footer-brand h3 {
    font-size: 32px;
    letter-spacing: 4px;
    margin-bottom: 16px;
    color: #D4AF37;
}

.footer-brand p {
    color: #DDE7F0;
    line-height: 1.7;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links h4 {
    color: #D4AF37;
    margin-bottom: 10px;
}

.footer-links a {
    color: #DDE7F0;
    text-decoration: none;
    font-size: 15px;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    max-width: 1200px;
    margin: 50px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #AAB7C4;
    font-size: 14px;
}

@media(max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .final-cta h2 {
        font-size: 38px;
    }
}

@media(max-width: 650px) {
    .final-cta {
        padding: 80px 24px;
    }

    .footer {
        padding: 60px 24px 25px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}
#accueil,
#pourquoi,
#fonctionnement,
#professionnels,
#services,
#tarifs,
#faq,
#lancer-projet,
#laisser-avis,
#contact {
    scroll-margin-top: 100px;
}

/* ===============================
   PAGES LEGALES
================================== */

.legal-page {
    padding: 70px 60px 100px;
    background: #ffffff;
}

.legal-container {
    max-width: 820px;
    margin: 0 auto;
}

.legal-container h1 {
    font-size: 42px;
    color: #0A2342;
    margin: 14px 0 6px;
}

.legal-updated {
    color: #52616B;
    font-size: 14px;
    margin-bottom: 40px;
}

.legal-container h2 {
    font-size: 22px;
    color: #0A3D62;
    margin: 38px 0 14px;
}

.legal-container p,
.legal-container li {
    font-size: 16px;
    line-height: 1.8;
    color: #34495E;
}

.legal-container ul {
    margin: 10px 0 10px 20px;
}

.legal-container li {
    margin-bottom: 8px;
}

.legal-container a {
    color: #0A3D62;
    font-weight: 700;
}

.to-fill {
    background: #FFF7E0;
    border: 1px dashed #D4AF37;
    border-radius: 6px;
    padding: 1px 8px;
    color: #8a6d1a;
    font-weight: 700;
    font-style: normal;
}

@media(max-width: 650px) {
    .legal-page {
        padding: 50px 24px 70px;
    }

    .legal-container h1 {
        font-size: 32px;
    }
}

/* ===============================
   DOSSIER PROJET - DEMO
================================== */

.dp-intro {
    max-width: 820px;
    margin: 0 auto;
    padding: 70px 60px 20px;
    text-align: center;
}

.dp-intro h1 {
    font-size: 40px;
    color: #0A2342;
    margin: 14px 0 18px;
}

.dp-intro p {
    font-size: 17px;
    line-height: 1.7;
    color: #52616B;
}

.dp-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 60px 100px;
}

.dp-header {
    background: linear-gradient(120deg, #0A3D62 0%, #06283D 100%);
    border-radius: 24px;
    padding: 36px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.dp-project-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 10px;
}

.dp-header-main h2 {
    font-size: 30px;
    margin-bottom: 8px;
}

.dp-header-main p {
    color: #DDE7F0;
    font-size: 14px;
}

.dp-header-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dp-header-status .mission-status {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    margin-bottom: 0;
}

.dp-header-status .mission-status .status-dot {
    background: #2ECC71;
}

.progress-ring-svg {
    background: white;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
    animation: ringPop .6s ease;
}

.progress-ring-circle {
    transition: stroke-dashoffset 1s ease;
}

@keyframes ringPop {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.progress-ring-caption {
    color: #DDE7F0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.progress-ring-small {
    box-shadow: none;
    border: 3px solid #F8FAFC;
    flex-shrink: 0;
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    min-width: 0;
}

.dp-panel {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
    min-width: 0;
}

.dp-panel-wide {
    grid-column: span 3;
    overflow-x: auto;
}

.dp-panel-title {
    font-size: 15px;
    font-weight: 800;
    color: #0A3D62;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-panel-title i {
    color: #D4AF37;
}

.dp-timeline {
    list-style: none;
}

.dp-timeline li {
    padding-left: 18px;
    border-left: 2px solid #E6EEF5;
    padding-bottom: 16px;
    position: relative;
}

.dp-timeline li:last-child {
    padding-bottom: 0;
}

.dp-timeline li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ECC71;
}

.dp-timeline li strong {
    display: block;
    color: #0A2342;
    font-size: 14px;
    margin-bottom: 3px;
}

.dp-timeline li span {
    font-size: 13px;
    color: #52616B;
}

.dp-next-step {
    font-size: 14px;
    color: #34495E;
    line-height: 1.6;
    margin-bottom: 16px;
}

.dp-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 30px;
}

.dp-badge-pending {
    background: #FFF7E0;
    color: #8a6d1a;
}

.dp-badge-paid {
    background: #E8F8EF;
    color: #1a7a44;
}

.dp-thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.dp-thumb {
    aspect-ratio: 1;
    background: #EDF6FF;
    border-radius: 10px;
}

.dp-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #0A3D62;
    background: #E1EEFA;
}

.dp-thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A3D62;
    font-size: 16px;
}

.dp-count {
    font-size: 13px;
    color: #52616B;
}

.dp-file-list,
.dp-pro-list,
.dp-store-list {
    list-style: none;
}

.dp-file-list li {
    font-size: 14px;
    color: #34495E;
    padding: 10px 0;
    border-bottom: 1px solid #F0F4F8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-file-list li:last-child {
    border-bottom: none;
}

.dp-file-list i {
    color: #0A3D62;
}

.dp-pro-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F4F8;
}

.dp-pro-list li:last-child {
    border-bottom: none;
}

.dp-pro-list strong {
    display: block;
    font-size: 14px;
    color: #0A2342;
}

.dp-pro-list small {
    color: #2E7D32;
    font-size: 12px;
    font-weight: 700;
}

.dp-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0A3D62;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.dp-store-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #34495E;
    padding: 10px 0;
    border-bottom: 1px solid #F0F4F8;
}

.dp-store-list li:last-child {
    border-bottom: none;
}

.dp-store-list strong {
    color: #0A3D62;
}

.dp-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
}

.dp-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #52616B;
    padding: 10px 12px;
    border-bottom: 2px solid #E6EEF5;
}

.dp-table td {
    font-size: 14px;
    color: #34495E;
    padding: 12px;
    border-bottom: 1px solid #F0F4F8;
}

.dp-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dp-chat-msg {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 16px;
}

.dp-chat-msg strong {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.dp-chat-msg p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.dp-chat-them {
    background: #F8FAFC;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.dp-chat-them strong {
    color: #0A3D62;
}

.dp-chat-me {
    background: #0A3D62;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.dp-chat-me strong {
    color: #D4AF37;
}

.dp-timeline-full li {
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.dp-timeline-full li span {
    min-width: 110px;
    font-size: 12px;
    color: #52616B;
}

.dp-timeline-full li strong {
    font-size: 14px;
    color: #0A2342;
    font-weight: 700;
}

.dp-disclaimer {
    text-align: center;
    font-size: 14px;
    color: #52616B;
    margin-top: 36px;
}

.dp-disclaimer i {
    color: #D4AF37;
    margin-right: 6px;
}

.dp-cta {
    text-align: center;
    margin-top: 26px;
}

@media(max-width: 1000px) {
    .dp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dp-panel-wide {
        grid-column: span 2;
    }
}

@media(max-width: 650px) {
    .dp-intro {
        padding: 50px 24px 10px;
    }

    .dp-intro h1 {
        font-size: 30px;
    }

    .dp-dashboard {
        padding: 30px 20px 70px;
    }

    .dp-grid {
        grid-template-columns: 1fr;
    }

    .dp-panel-wide {
        grid-column: span 1;
    }

    .dp-header {
        padding: 28px 24px;
    }

    .dp-table {
        font-size: 12px;
    }

    .dp-chat-msg {
        max-width: 90%;
    }
}

/* ===============================
   APP - AUTHENTIFICATION
================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    padding: 40px 20px;
}

.auth-card {
    background: white;
    border-radius: 24px;
    padding: 48px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.08);
    border: 1px solid #E6EEF5;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.auth-logo img {
    height: 50px;
}

.auth-card h1 {
    text-align: center;
    font-size: 25px;
    color: #0A2342;
    margin-bottom: 8px;
}

.auth-subtitle {
    text-align: center;
    color: #52616B;
    font-size: 14px;
    margin-bottom: 30px;
}

.auth-card .form-group {
    margin-bottom: 20px;
}

.auth-card label {
    font-size: 14px;
    font-weight: 700;
    color: #0A3D62;
    margin-bottom: 8px;
    display: block;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card select {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #0A2342;
    background: #F8FAFC;
    border: 1px solid #E6EEF5;
    border-radius: 12px;
    padding: 13px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-card input:focus,
.auth-card select:focus {
    outline: none;
    border-color: #0A3D62;
    box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.1);
}

.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 24px;
}

.auth-options a {
    color: #0A3D62;
    font-weight: 700;
    text-decoration: none;
}

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #52616B;
}

.auth-checkbox input {
    margin-top: 3px;
}

.auth-submit {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 6px;
}

.auth-switch {
    text-align: center;
    margin-top: 26px;
    font-size: 14px;
    color: #52616B;
}

.auth-switch a {
    color: #0A3D62;
    font-weight: 700;
    text-decoration: none;
}

.auth-back {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #9aa7b2;
    text-decoration: none;
}

.auth-back:hover {
    color: #0A3D62;
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 26px;
}

.choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 26px 16px;
    background: #F8FAFC;
    border: 2px solid #E6EEF5;
    border-radius: 16px;
    text-decoration: none;
    transition: .2s ease;
}

.choice-card i {
    font-size: 28px;
    color: #0A3D62;
}

.choice-card strong {
    color: #0A2342;
    font-size: 15px;
}

.choice-card span {
    color: #52616B;
    font-size: 12px;
    line-height: 1.4;
}

.choice-card:hover {
    border-color: #0A3D62;
    background: #EDF6FF;
    transform: translateY(-3px);
}

@media(max-width: 500px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

.auth-demo-note {
    background: #FFF7E0;
    border: 1px dashed #D4AF37;
    color: #8a6d1a;
    font-size: 13px;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 24px;
    text-align: center;
}

/* ===============================
   APP - SHELL (barre laterale)
================================== */

.app-shell {
    display: flex;
    min-height: 100vh;
    background: #F8FAFC;
}

.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0A3D62 0%, #06283D 100%);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
}

.app-sidebar .logo {
    padding: 0 6px;
}

.app-sidebar .logo-text span {
    color: white;
}

.app-nav {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #DDE7F0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease;
}

.app-nav a i {
    width: 18px;
    text-align: center;
    color: #D4AF37;
}

.app-nav a:hover,
.app-nav a.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.nav-badge {
    background: #E67E22;
    color: white;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: auto;
}

.app-sidebar-footer {
    margin-top: auto;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
}

.app-user .dp-avatar {
    background: #D4AF37;
    color: #0A2342;
}

.app-user strong {
    display: block;
    font-size: 13px;
    color: white;
}

.app-user small {
    color: #AAB7C4;
    font-size: 12px;
}

.app-main {
    flex: 1;
    min-width: 0;
}

.app-topbar {
    height: 76px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    border-bottom: 1px solid #E6EEF5;
}

.app-topbar h1 {
    font-size: 20px;
    color: #0A2342;
}

.app-content {
    padding: 36px;
    max-width: 1200px;
}

.app-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #0A3D62;
    cursor: pointer;
}

@media (max-width: 900px) {
    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: 16px 20px;
    }

    .app-nav {
        margin-top: 0;
        flex-direction: row;
        overflow-x: auto;
        flex: 1;
        padding-left: 16px;
    }

    .app-nav a {
        white-space: nowrap;
    }

    .app-sidebar-footer {
        margin-top: 0;
    }

    .app-user {
        display: none;
    }

    .app-topbar,
    .app-content {
        padding: 20px;
    }
}

/* ===============================
   APP - TABLEAU DE BORD (liste projets)
================================== */

.projects-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.projects-toolbar p {
    color: #52616B;
    font-size: 15px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.project-card {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
    transition: .25s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(10, 61, 98, 0.12);
}

.project-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.project-card h3 {
    font-size: 18px;
    color: #0A2342;
}

.project-card .location {
    font-size: 13px;
    color: #52616B;
    margin-bottom: 18px;
}

.project-card .progress-top {
    font-size: 13px;
    margin-bottom: 8px;
}

.project-card .progress-bar {
    height: 8px;
    margin-bottom: 18px;
}

.project-card-mini-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #52616B;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F0F4F8;
}

.project-card-mini-stats i {
    color: #0A3D62;
    margin-right: 4px;
}

.project-card-link {
    margin-top: auto;
    text-align: center;
    background: #EDF6FF;
    color: #0A3D62;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    padding: 12px;
    border-radius: 12px;
    transition: background .2s ease;
}

.project-card-link:hover {
    background: #0A3D62;
    color: white;
}

.new-project-card {
    border: 2px dashed #C7D6E3;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #0A3D62;
    text-decoration: none;
    min-height: 220px;
    gap: 12px;
}

.new-project-card i {
    font-size: 28px;
    color: #D4AF37;
}

.new-project-card strong {
    font-size: 15px;
}

/* ===============================
   APP - ESPACE PROFESSIONNEL
================================== */

.pro-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 34px;
}

.pro-stat-card {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
}

.pro-stat-card h2 {
    font-size: 32px;
    color: #0A3D62;
    margin-bottom: 6px;
}

.pro-stat-card p {
    font-size: 13px;
    color: #52616B;
}

.pro-missions-table {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 20px;
    padding: 10px 26px;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
    overflow-x: auto;
}

.pro-missions-table table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.pro-missions-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #52616B;
    padding: 16px 12px;
    border-bottom: 2px solid #E6EEF5;
}

.pro-missions-table td {
    font-size: 14px;
    color: #34495E;
    padding: 16px 12px;
    border-bottom: 1px solid #F0F4F8;
}

.pro-profile-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 20px;
    padding: 22px 26px;
    margin-bottom: 30px;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
}

.pro-profile-banner .dp-avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.pro-profile-banner strong {
    display: block;
    color: #0A2342;
    font-size: 17px;
}

.pro-profile-banner .dp-badge {
    margin-top: 6px;
}

@media(max-width: 900px) {
    .pro-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 650px) {
    .pro-stats {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   APP - BIENVENUE (onboarding)
================================== */

.welcome-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #E8F8EF;
    color: #2ECC71;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

/* ===============================
   APP - ASSISTANT NOUVEAU PROJET
================================== */

.wizard-page {
    min-height: 100vh;
    background: #F8FAFC;
    padding: 50px 20px;
}

.wizard-card {
    max-width: 640px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    padding: 44px;
    box-shadow: 0 18px 50px rgba(10, 61, 98, 0.08);
    border: 1px solid #E6EEF5;
}

.wizard-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}

.wizard-logo img {
    height: 44px;
}

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 34px;
}

.wizard-steps .dot {
    width: 34px;
    height: 6px;
    border-radius: 4px;
    background: #E6EEF5;
    transition: background .2s ease;
}

.wizard-steps .dot.done,
.wizard-steps .dot.current {
    background: #0A3D62;
}

.wizard-step-label {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 8px;
}

.wizard-panel h2 {
    text-align: center;
    font-size: 24px;
    color: #0A2342;
    margin-bottom: 8px;
}

.wizard-panel > p {
    text-align: center;
    color: #52616B;
    font-size: 14px;
    margin-bottom: 30px;
}

.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 6px;
}

.category-option {
    position: relative;
}

.category-option input {
    position: absolute;
    opacity: 0;
}

.category-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #52616B;
    background: #F8FAFC;
    border: 2px solid #E6EEF5;
    border-radius: 14px;
    padding: 16px 8px;
    cursor: pointer;
    transition: .2s ease;
}

.category-option label i {
    font-size: 18px;
    color: #0A3D62;
}

.category-option input:checked + label {
    border-color: #0A3D62;
    background: #EDF6FF;
    color: #0A3D62;
}

.service-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
}

.service-option {
    position: relative;
}

.service-option input {
    position: absolute;
    opacity: 0;
}

.service-option label {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F8FAFC;
    border: 2px solid #E6EEF5;
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: .2s ease;
}

.service-option .radio-dot {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #C7D6E3;
    position: relative;
}

.service-option input:checked + label {
    border-color: #0A3D62;
    background: #EDF6FF;
}

.service-option input:checked + label .radio-dot {
    border-color: #0A3D62;
}

.service-option input:checked + label .radio-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #0A3D62;
}

.service-option strong {
    display: block;
    color: #0A2342;
    font-size: 15px;
    margin-bottom: 2px;
}

.service-option span {
    font-size: 13px;
    color: #52616B;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.wizard-actions .btn-secondary {
    flex: none;
}

.wizard-actions .btn-primary {
    flex: 1;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.wizard-confirm {
    text-align: center;
}

.wizard-confirm .welcome-icon {
    margin-bottom: 24px;
}

.wizard-confirm h2 {
    margin-bottom: 10px;
}

.wizard-confirm p {
    color: #52616B;
    font-size: 15px;
    margin-bottom: 30px;
}

@media(max-width: 650px) {
    .wizard-card {
        padding: 30px 22px;
    }

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

/* ===============================
   APP - PROJET FRAIS (etat initial)
================================== */

.fresh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.fresh-stat {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
}

.fresh-stat h3 {
    font-size: 26px;
    color: #0A3D62;
    margin-bottom: 4px;
}

.fresh-stat p {
    font-size: 13px;
    color: #52616B;
}

.fresh-empty {
    background: #F8FAFC;
    border: 1px dashed #C7D6E3;
    border-radius: 16px;
    padding: 26px;
    text-align: center;
    color: #52616B;
    font-size: 14px;
}

@media(max-width: 650px) {
    .fresh-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   APP - REPONSE QUALIFICATION
================================== */

.status-banner {
    border-radius: 20px;
    padding: 28px 30px;
    margin-bottom: 26px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.status-banner-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.status-banner h2 {
    font-size: 19px;
    margin-bottom: 6px;
}

.status-banner p {
    font-size: 14px;
    line-height: 1.7;
}

.status-banner-accepted {
    background: #E8F8EF;
    border: 1px solid #BEE9CF;
}

.status-banner-accepted .status-banner-icon {
    background: #2ECC71;
    color: white;
}

.status-banner-accepted h2 {
    color: #1a7a44;
}

.status-banner-accepted p {
    color: #2c6b45;
}

.status-banner-refused {
    background: #FDF2F0;
    border: 1px solid #F3D3CC;
}

.status-banner-refused .status-banner-icon {
    background: #E67E22;
    color: white;
}

.status-banner-refused h2 {
    color: #a3491a;
}

.status-banner-refused p {
    color: #8a4325;
}

.reason-box {
    background: white;
    border: 1px dashed #D4AF37;
    border-radius: 14px;
    padding: 18px 20px;
    margin: 16px 0 22px;
    font-size: 14px;
    color: #6b4d10;
    font-style: italic;
}

.reason-box strong {
    display: block;
    font-style: normal;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a6d1a;
    margin-bottom: 6px;
}

.status-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.demo-switch {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #E6EEF5;
}

.demo-switch span {
    font-size: 13px;
    color: #52616B;
    margin-right: 6px;
}

.demo-switch a {
    font-size: 13px;
    font-weight: 700;
    color: #0A3D62;
    text-decoration: none;
    background: #EDF6FF;
    padding: 6px 14px;
    border-radius: 20px;
}

/* ===============================
   TRES GRANDS ECRANS
   (moins de vide inutile sur les gros moniteurs)
================================== */
@media (min-width: 1700px) {
    .why-content,
    .professionals-content,
    .stats-container,
    .services-grid,
    .pricing-grid,
    .footer-content {
        max-width: 1500px;
    }
}

/* ===============================
   ADMIN - GRILLE DE CARTES PROJETS
================================== */

.admin-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.admin-project-card {
    background: white;
    border: 1px solid #E6EEF5;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 14px 36px rgba(10, 61, 98, 0.06);
    display: flex;
    flex-direction: column;
    transition: .25s ease;
}

.admin-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(10, 61, 98, 0.1);
}

.admin-project-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-project-card-top strong {
    display: block;
    color: #0A2342;
    font-size: 16px;
    margin-bottom: 4px;
}

.admin-project-card-top small {
    color: #52616B;
    font-size: 12px;
}

.admin-project-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #52616B;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #F0F4F8;
}

.admin-project-meta i {
    color: #0A3D62;
    width: 14px;
}

.admin-project-client {
    font-size: 13px;
    color: #34495E;
    margin-bottom: 16px;
}

.admin-project-actions {
    margin-top: auto;
    margin-bottom: 14px;
}

.admin-project-manage {
    text-align: center;
    background: #EDF6FF;
    color: #0A3D62;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    transition: background .2s ease;
}

.admin-project-manage:hover {
    background: #0A3D62;
    color: white;
}

.admin-quote-amount {
    font-size: 26px;
    font-weight: 800;
    color: #0A3D62;
    margin-bottom: 14px;
}

.admin-quote-amount small {
    font-size: 13px;
    font-weight: 600;
    color: #52616B;
}

.admin-project-details {
    background: #F8FAFC;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}

.admin-project-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #0A3D62;
    list-style: none;
}

.admin-project-details summary::-webkit-details-marker {
    display: none;
}

.admin-project-details summary i {
    color: #D4AF37;
    margin-right: 6px;
}

.admin-project-details p {
    color: #34495E;
    line-height: 1.6;
    margin-top: 10px;
}