/* ==========================================================
   Variables
   ========================================================== */
:root{
    --bg-1: #fff;
    --bg-2: #0B2545;
    --bg-3: #5B6B80;
    --bg-4: #1E6FD9;
    --bg-button: #F59E0B;
    --text: #1F2937;

    --bg-clair: #F4F8FC;
    --bg-bleu-pale: #E6F0FD;
    --bg-footer: #071A33;
}

/* ==========================================================
   Global
   ========================================================== */
*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    background: var(--bg-1);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Les ancres ne passent pas sous le header collé en haut */
section[id]{
    scroll-margin-top: 90px;
}

/* Titres et textes réutilisables */
main h2{
    color: var(--bg-2);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}
.eyebrow{
    display: block;
    color: var(--bg-4);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.eyebrow-clair{
    color: #22B8CF;
}
.section-sous-titre{
    color: var(--bg-3);
    font-size: 1.125rem;
    margin-bottom: 48px;
}
.image-arrondie{
    border-radius: 28px;
}

/* Espacement vertical commun à toutes les sections */
.section-services,
.section-pourquoi,
.section-etapes,
.section-avis,
.section-contact{
    padding: 96px 0;
}

/* ==========================================================
   Header / Navbar
   ========================================================== */
header{
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar{
    --bs-navbar-color: var(--text);
    --bs-navbar-hover-color: var(--bg-4);
    --bs-navbar-active-color: var(--bg-4);
}
.navbar-nav .nav-link{
    font-weight: 500;
}
.btn-primary{
    --bs-btn-bg: var(--bg-4);
    --bs-btn-border-color: var(--bg-4);
    --bs-btn-hover-bg: #1558B8;
    --bs-btn-hover-border-color: #1558B8;
    --bs-btn-active-bg: #1558B8;
    --bs-btn-active-border-color: #1558B8;
    font-weight: 600;
}
.btn-orange{
    --bs-btn-bg: var(--bg-button);
    --bs-btn-border-color: var(--bg-button);
    --bs-btn-color: var(--bg-2);
    --bs-btn-hover-bg: #D98A06;
    --bs-btn-hover-border-color: #D98A06;
    --bs-btn-hover-color: var(--bg-2);
    --bs-btn-active-bg: #D98A06;
    --bs-btn-active-border-color: #D98A06;
    --bs-btn-active-color: var(--bg-2);
    font-weight: 600;
}

/* ==========================================================
   Hero
   ========================================================== */
.section-hero{
    background: var(--bg-2);
    color: #fff;
    padding: 88px 0;
}
.badge-urgence{
    display: inline-block;
    background: #13396B;
    color: #BFE9F2;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.section-hero h1{
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 24px;
}
.hero-texte{
    font-size: 1.125rem;
    color: #C7D6EA;
    margin-bottom: 32px;
}
.hero-stats{
    margin-top: 40px;
}
.hero-stats strong{
    display: block;
    font-size: 2rem;
}
.hero-stats span{
    color: #9FB4D0;
    font-size: 0.875rem;
}
.hero-image{
    border-radius: 28px;
}

/* ==========================================================
   Services
   ========================================================== */
.section-services{
    background: var(--bg-1);
}
.carte-service{
    background: var(--bg-clair);
    border-radius: 20px;
    padding: 32px;
}
.icone-service{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-bleu-pale);
    color: var(--bg-4);
    border-radius: 16px;
    margin-bottom: 20px;
}
.carte-service h3{
    color: var(--bg-2);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.carte-service p{
    color: var(--bg-3);
}
.lien-service{
    color: var(--bg-4);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.lien-service:hover{
    text-decoration: underline;
}

/* ==========================================================
   Pourquoi nous
   ========================================================== */
.section-pourquoi{
    background: var(--bg-clair);
}
.section-pourquoi .section-sous-titre{
    margin-bottom: 24px;
}
.liste-atouts{
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.liste-atouts li{
    position: relative;
    padding-left: 40px;
    margin-bottom: 16px;
    font-weight: 500;
    min-height: 26px;
}
/* Pastille bleue avec une coche blanche */
.liste-atouts li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--bg-4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13.5l4 4 8-9'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* ==========================================================
   Étapes
   ========================================================== */
.section-etapes{
    background: var(--bg-1);
}
.carte-etape{
    background: var(--bg-clair);
    border-radius: 20px;
    padding: 36px;
}
.numero{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-4);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 20px;
}
.carte-etape h3{
    color: var(--bg-2);
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.carte-etape p{
    color: var(--bg-3);
    margin-bottom: 0;
}

/* ==========================================================
   Avis clients
   ========================================================== */
.section-avis{
    background: var(--bg-2);
}
.section-avis h2{
    color: #fff;
}
.section-avis .section-sous-titre{
    color: #C7D6EA;
}
.carte-avis{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    margin: 0;
}
.etoiles{
    color: var(--bg-button);
    font-size: 1.125rem;
    letter-spacing: 0.15em;
}
.carte-avis blockquote{
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    flex-grow: 1;
}
.carte-avis figcaption{
    display: flex;
    align-items: center;
    gap: 12px;
}
.carte-avis figcaption strong{
    display: block;
    color: var(--bg-2);
}
.carte-avis figcaption small{
    color: var(--bg-3);
}
.avatar{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-bleu-pale);
    color: var(--bg-4);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 50%;
}

/* ==========================================================
   Bandeau CTA
   ========================================================== */
.section-cta{
    padding: 72px 0;
}
.bandeau-cta{
    background: var(--bg-4);
    color: #fff;
    border-radius: 28px;
    padding: 56px 64px;
}
.bandeau-cta h2{
    color: #fff;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    max-width: 640px;
    margin-bottom: 12px;
}
.bandeau-cta p{
    color: #D6E7FB;
    font-size: 1.125rem;
    margin-bottom: 0;
}

/* ==========================================================
   Contact
   ========================================================== */
.section-contact{
    background: var(--bg-clair);
}
.carte-contact{
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
}
.icone-contact{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-bleu-pale);
    color: var(--bg-4);
    border-radius: 50%;
}
.carte-contact small{
    display: block;
    color: var(--bg-3);
    font-size: 0.8125rem;
    font-weight: 600;
}
.carte-contact a,
.carte-contact span{
    color: var(--bg-2);
    font-size: 1.1875rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.carte-contact a:hover{
    color: var(--bg-4);
}

/* ==========================================================
   Footer
   ========================================================== */
.footer{
    background: var(--bg-footer);
    color: #9FB4D0;
    padding: 48px 0;
    font-size: 0.875rem;
}
.footer-marque{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}
.footer a{
    color: #9FB4D0;
    text-decoration: none;
}
.footer a:hover{
    color: #fff;
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 767.98px){
    .section-hero{
        padding: 56px 0;
    }
    .section-services,
    .section-pourquoi,
    .section-etapes,
    .section-avis,
    .section-contact{
        padding: 64px 0;
    }
    .section-cta{
        padding: 48px 0;
    }
    .bandeau-cta{
        padding: 36px 28px;
    }
}