/* Palette de Couleurs Pro & Moderne (Inchangée) */
:root {
    --primary-dark-blue: #46515c;
    --accent-blue: #3498db;
    --text-light-on-dark: #ecf0f1;
    --background-light: #f4f7f6;
    --text-dark: #333333;
    --text-medium: #666666;
    --border-color: #e0e0e0;
    /* Base de 1rem = 16px */
}

/* Base et Typographie */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-dark);
    font-size: 1rem; /* Base de 16px */
}

.container {
    max-width: 75rem; /* 1200px / 16 = 75rem */
    margin: 0 auto;
    padding: 0 1.25rem; /* 20px / 16 = 1.25rem */
}

h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--primary-dark-blue);
}

/* 0. Barre de Navigation */
.navbar {
    background-color: var(--primary-dark-blue);
    padding: 1.25rem 0; /* 20px = 1.25rem */
    color: var(--text-light-on-dark);
    font-size: 1.2rem; /* 1.2em -> 1.2rem */
    font-weight: 700;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .brand {
    margin: 0;
    color: var(--text-light-on-dark);
    text-decoration: none;
}

/* 1. Header/Hero Section */
.hero {
    background-color: var(--primary-dark-blue);
    color: var(--text-light-on-dark);
    padding: 9.375rem 0 11.25rem 0; /* 150px = 9.375rem, 180px = 11.25rem */
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5625rem; /* 25px = 1.5625rem */
    color: white;
    font-weight: 700;
}

.tagline {
    font-size: 1.6rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 3.125rem; /* 50px = 3.125rem */
    max-width: 50rem; /* 800px = 50rem */
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background-color: var(--accent-blue);
    color: white;
    padding: 1.125rem 2.5rem; /* 18px = 1.125rem, 40px = 2.5rem */
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px = 0.3125rem */
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.03125rem; /* 0.5px = 0.03125rem */
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2); /* 4px et 10px */
}

.cta-button:hover {
    background-color: #2980b9;
    transform: translateY(-0.125rem); /* 2px = 0.125rem */
}

/* 2. Section Rhétorique */
.rhetoric-blocks {
    padding: 5rem 0 5rem;
    background-color: white;
    text-align: center;
}

.rhetoric-blocks h2 {
    font-size: 2.5rem;
    margin-bottom: 3.75rem; /* 60px */
    color: var(--primary-dark-blue);
}

.rhetoric-blocks .block {
    display: inline-block;
    width: 30%;
    margin: 0 1.5% 2rem; 
    padding: 1.875rem 0.9375rem;
    vertical-align: top;
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s;
}

.rhetoric-blocks .block:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08); /* 8px et 20px */
}

.rhetoric-blocks .icon {
    font-size: 3.5rem;
    color: var(--accent-blue);
    margin-bottom: 1.25rem; /* 20px */
    display: block;
}

.rhetoric-blocks h3 {
    margin-top: 0;
    color: var(--primary-dark-blue);
    font-size: 1.4rem;
}

.rhetoric-blocks p {
    color: var(--text-medium);
}

/* 3. Liste des Services (ADAPTATION FLEXBOX) */
.services-list {
    padding: 3.75rem 0 5rem; /* 60px et 80px */
    background-color: var(--background-light);
}

.services-list h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3.125rem; /* 50px */
}

.intro-text {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 2.5rem; /* 40px */
    max-width: 56.25rem; /* 900px */
    margin-left: auto;
    margin-right: auto;
}

.grid-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem; /* 30px */
    align-items: flex-start;
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
}

.service-card {
    background-color: white;
    border: 0.0625rem solid var(--border-color); /* 1px */
    border-radius: 0.625rem; /* 10px */
    padding: 1.875rem; /* 30px */
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.05); /* 2px et 5px */
    transition: box-shadow 0.3s, border-color 0.3s;
    
    /* Conversion en % et soustraction des rem */
    width: calc(33.33% - 1.25rem); /* 1.875rem gap / 3 * 2 = 1.25rem */
    min-width: 18.75rem; /* 300px */
    flex-grow: 1;
}

.service-card:hover {
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1); /* 10px et 30px */
    border-color: var(--accent-blue);
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem; /* 15px */
}

.card-icon {
    font-size: 2.2rem;
    margin-right: 0.9375rem; /* 15px */
    color: var(--accent-blue);
}

.card-title {
    margin: 0;
    color: var(--primary-dark-blue);
    font-size: 1.5rem;
}

.category {
    font-weight: 700;
    color: var(--text-medium);
    margin-top: -0.3125rem; /* -5px */
    margin-bottom: 0.9375rem; /* 15px */
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem; /* 0.5px */
}

.service-card p {
    color: var(--text-medium);
}

.service-card h5 {
    color: var(--text-dark);
    border-bottom: 0.0625rem solid var(--border-color); /* 1px */
    padding-bottom: 0.5rem; /* 8px */
    margin-top: 1.5625rem; /* 25px */
    margin-bottom: 0.75rem; /* 12px */
    font-size: 1.1rem;
    font-weight: 700;
}

.service-card ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem;
}

.service-card ul li {
    padding: 0.3125rem 0; /* 5px */
    color: var(--text-medium);
}

.service-card ul li:before {
    content: "●";
    color: var(--accent-blue);
    font-weight: bold;
    display: inline-block;
    width: 1.2rem;
    margin-left: -1.2rem;
}

/* Tags de Cible */
.card-footer {
    margin-top: 1.5625rem; /* 25px */
    padding-top: 1.25rem; /* 20px */
    border-top: 0.0625rem dashed var(--border-color); /* 1px */
}

.tag {
    display: inline-block;
    background-color: #f0f4f7;
    color: var(--primary-dark-blue);
    padding: 0.375rem 0.75rem; /* 6px et 12px */
    margin: 0.3125rem 0.3125rem 0.3125rem 0; /* 5px */
    border-radius: 1.25rem; /* 20px */
    font-size: 0.85rem;
    font-weight: 600;
    border: 0.0625rem solid #dcdfe4; /* 1px */
}

/* Styles spécifiques pour les tags de ciblage (Inchangés) */
.tag-vente { background-color: #f7e6f0; border-color: #e6d0e0; color: #8a3a60; }
.tag-rh { background-color: #e0f2f7; border-color: #c0e0eb; color: #3a7a8a; }
.tag-tpe { background-color: #fcf1e4; border-color: #f7e0c9; color: #a3723d; }
.tag-supplychain { background-color: #e0f7e9; border-color: #c0ead4; color: #3a8a61; }
.tag-indépendants { background-color: #eeeff1; border-color: #dcdfe4; color: #5a5a5a; }


/* 4. Footer */
.footer {
    background-color: var(--primary-dark-blue);
    color: var(--text-light-on-dark);
    text-align: center;
    padding: 2.5rem 0; /* 40px */
    margin-top: 0;
}

.footer p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

.footer .contact-info {
    margin-top: 0.9375rem; /* 15px */
    margin-bottom: 0.625rem; /* 10px */
    font-size: 1.1rem;
    font-weight: 500;
}

.footer .mentions {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ------------------------------------------- */
/* 5. Responsive Design (Adaptation pour Flexbox) */
/* ------------------------------------------- */
@media (max-width: 68.75rem) { /* 1100px */
    /* À une certaine taille, on passe à deux colonnes pour que les cartes aient plus d'espace */
    .service-card {
        /* Calcul : (100% / 2) - (1.875rem gap / 2) */
        width: calc(50% - 0.9375rem);
    }
}

@media (max-width: 56.25rem) { /* 900px */
    .rhetoric-blocks .block {
        width: 45%;
        margin-bottom: 1.25rem; /* 20px */
    }
    .hero h1 {
        font-size: 2.8rem;
    }
    .tagline {
        font-size: 1.3rem;
    }
}

@media (max-width: 37.5rem) { /* 600px */
    .hero h1 {
        font-size: 2.2rem;
    }

    .tagline {
        font-size: 1.1rem;
    }

    .rhetoric-blocks .block {
        width: 90%;
        margin-bottom: 1.875rem; /* 30px */
    }

    /* Sur mobile, on remplit toute la largeur */
    .service-card {
        width: 100%; 
        min-width: auto;
    }

    .cta-button {
        padding: 0.9375rem 1.875rem; /* 15px et 30px */
        font-size: 1.1rem;
    }
}