/* ==========================================================================
   1. STYLES GLOBAUX & VARIABLES
   ========================================================================== */
:root {
    --primary-blue: #0052cc;
    --light-blue: #e7f0ff;
    --dark-blue: #0747a6;
    --text-dark: #172b4d;
    --text-light: #505f79;
    --background-light: #ffffff;
    --background-grey: #f4f5f7;
    --border-color: #dfe1e6;
    --highlight-color: #FFAB00;
    --success-color: #00875A;
    --error-color: #DE350B;
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Nécessaire pour éviter les barres de scroll horizontales */
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.popup-open {
    overflow: hidden;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

main {
    display: block;
}

/* --- Typographie Générale --- */
h1,
h2,
h3 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--text-dark);
}

h1 {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--primary-blue);
}

p {
    margin-bottom: 1rem;
    color: var(--text-light);
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--dark-blue);
}

button {
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================================================
   2. COMPOSANTS RÉUTILISABLES
   ========================================================================== */

/* --- Header & Navigation --- */
.main-header {
    background-color: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

@supports (position: sticky) {
    .main-header {
        position: sticky;
    }
}

.header-container {
    display: flex;
    height: 80px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.logo-link {
    display: inline-block;
}

.logo-image {
    height: 65px;
    width: auto;
    vertical-align: middle;
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    gap: 45px;
}

.main-nav li {
    white-space: nowrap;
}

.main-nav a {
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.6rem;
    display: inline-block;
    padding: 6px 0;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-blue);
}

/* --- Burger Menu & Menu Mobile --- */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
    position: relative;
}

.burger-menu.active {
    z-index: 1013;
}

.burger-line {
    width: 30px;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 10px;
    transition: all 0.3s linear;
}

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

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

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

.mobile-menu {
    display: none;
    position: fixed;
    /* <-- LA MODIFICATION CLÉ EST ICI */
    top: 71px;
    /* Hauteur du header, sera ajustée dynamiquement par JS de toute façon */
    right: 0;
    left: auto;
    width: auto;
    background-color: rgba(254, 254, 254, 0.98);
    z-index: 999;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    padding: 20px 30px 30px 30px;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 0 8px;
    max-height: calc(100vh - 71px);
    /* S'assure que le menu ne dépasse pas de l'écran */
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu nav ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.mobile-menu nav li {
    margin-bottom: 1.5rem;
}

.mobile-menu nav a {
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 8px 0;
    white-space: nowrap;
}

/* --- Boutons --- */
.mobile-menu nav a.nav-cta {
    background-color: var(--primary-blue);
    color: white !important;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: none;
    line-height: normal;
    padding: 10px 20px;
    text-align: center;
    margin-top: 10px;
}

.main-nav a.nav-cta {
    background-color: var(--primary-blue);
    color: white !important;
    padding: 6px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: none;
    line-height: normal;
}

.main-nav a.nav-cta:hover {
    background-color: var(--dark-blue);
    color: white !important;
}

.mobile-menu nav a.nav-cta {
    padding: 10px 25px;
}

a.cta-button,
button.cta-button {
    display: inline-block;
    background-color: var(--primary-blue);
    color: white !important;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 82, 204, 0.2);
}

a.cta-button:hover,
button.cta-button:hover {
    background-color: var(--dark-blue);
    transform: translateY(-2px);
}

/* On ajoute une transition douce sur les éléments qui vont changer de taille */
.header-container,
.logo-image {
    transition: height 0.3s ease-in-out;
}

/* Nouvelles règles pour l'état "défilé" */
.main-header.header-scrolled .header-container {
    height: 50px;
    /* Hauteur réduite du conteneur du header */
}

.main-header.header-scrolled .logo-image {
    height: 35px;
    /* Hauteur réduite du logo */
}

/* --- Grille "Benefits" --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.benefit-item {
    background-color: var(--background-grey);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.benefit-icon {
    margin-bottom: 1.5rem;
    color: var(--primary-blue);
}

.benefit-icon svg {
    width: 48px;
    height: 48px;
}

/* --- Formulaires --- */
.form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}

.form-group label {
    flex: 1 0 200px;
    margin-right: 20px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    flex: 2 1 150px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-dark);
}

.form-group.form-group-stack {
    flex-direction: column;
    align-items: flex-start;
}

.form-group.form-group-stack label {
    flex: none;
    text-align: left;
    margin-bottom: 0.5rem;
    margin-right: 0;
}

.form-actions {
    text-align: center;
    margin-top: 2rem;
}

.form-status {
    margin-top: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.form-status.success {
    color: var(--success-color);
}

.form-status.error {
    color: var(--error-color);
}

#submit-button:disabled {
    background-color: var(--text-light);
    cursor: not-allowed;
}

/* --- Footer --- */
.main-footer {
    background-color: var(--background-grey);
    color: var(--text-light);
    padding: 30px 0;
    text-align: center;
    font-size: 0.9rem;
}

.main-footer .legal-links {
    margin-top: 10px;
}

.main-footer .legal-links a {
    color: var(--text-light);
    margin: 0 5px;
}

/* --- Animations --- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.slide-in-from-left {
    transform: translateX(-40px);
}

.slide-in-from-right {
    transform: translateX(40px);
}

.slide-in-from-bottom {
    transform: translateY(40px);
}

.zoom-in {
    transform: scale(0.9);
}

.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ==========================================================================
   3. STRUCTURES DE PAGE COMMUNES
   ========================================================================== */

.hero-container {
    display: flex;
    align-items: center;
    gap: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: transparent;
}

.hero-content {
    flex: 1.2;
    text-align: left;
}

.hero-content .subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.hero-image-wrapper {
    flex: 0.8;
    text-align: center;
}

.hero-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.15);
}

.solution-section {
    background-color: var(--background-light);
    padding: 80px 0;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    max-width: 700px;
    margin: -1rem auto 3rem auto;
    color: var(--text-light);
}

.text-section {
    padding: 70px 0;
    background-color: var(--background-grey);
    text-align: center;
}

.text-section .container {
    max-width: 800px;
}

.dark-section {
    background-color: var(--text-dark);
    color: #ffffff;
    padding: 70px 0;
    text-align: center;
}

.dark-section h2 {
    color: #ffffff;
}

.dark-section p {
    color: #b3bac5;
}

/* --- Marge structurelle pour la visibilité du hero sticky --- */
.header-container,
.solution-section,
.text-section:not(.dark-section),
.main-footer,
.faq-section,
.dark-section,
.articles-content-wrapper,
.article-header-container,
.filters-section {
    margin-left: 20px;
    margin-right: 20px;
}

/* ==========================================================================
   4. STYLES SPÉCIFIQUES AUX PAGES
   ========================================================================== */

/* --- Page: Qui Sommes-Nous --- */
.team-container {
    display: flex;
    gap: 30px;
    align-items: stretch;
    margin-top: 3rem;
}

.team-description {
    text-align: justify;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-top: 1rem;
    hyphens: auto;
}

/* --- Style pour la citation en italique dans la bio (v3) --- */

/* 1. Le nouveau conteneur qui porte les guillemets et définit la zone */
.quote-wrapper {
    position: relative;
    display: block;
    /* On utilise le padding pour créer l'espace entre les guillemets et le texte */
    padding: 0 3.5rem;
    margin: 0.5rem auto 2.5rem auto;
    max-width: 85%;
}

/* 2. Les guillemets, positionnés aux bords du .quote-wrapper */
.quote-wrapper::before,
.quote-wrapper::after {
    content: "“";
    position: absolute;
    font-family: Georgia, serif;
    font-size: 5rem;
    color: var(--primary-blue);
    z-index: 0;
}

.quote-wrapper::after {
    content: "”";
}

.quote-wrapper::before {
    top: -1rem;
    left: 0;
    /* Collé au bord GAUCHE du wrapper */
}

.quote-wrapper::after {
    bottom: -2.5rem;
    right: 0;
    /* Collé au bord DROIT du wrapper */
}

/* 3. Le texte, dont le style est maintenant très simple */
.quote-wrapper i {
    display: block;
    font-style: italic;
    color: var(--text-dark);
}

.articles-content-wrapper {
    border-radius: 8px;
    margin-bottom: 2rem;
    /* Ajoute un peu d'espace avant le CTA final */
}

.team-member {
    flex: 1;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.team-member-content {
    flex-grow: 1;
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.team-member .title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

.team-member p {
    font-size: 0.95rem;
    text-align: left;
}

/* --- Page: Solutions (Artisans & PME) --- */
.sur-mesure-content {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
    margin-bottom: 2rem;
}

.sur-mesure-text {
    flex: 1;
}

.sur-mesure-illustration {
    flex: 1;
    max-width: 40%;
    text-align: center;
}

.sur-mesure-illustration img {
    max-width: 100%;
    height: auto;
    opacity: 1;
    border-radius: 8px;
}

.sur-mesure-content.reverse {
    flex-direction: row-reverse;
}

.image-switcher {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--background-grey);
    position: relative;
}

.image-switcher img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    animation: fadeIn 0.4s;
}

.image-switcher img.active {
    display: block;
}

.image-hotspot {
    position: absolute;
    display: none;
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
}

.image-switcher img:first-of-type.active+.image-hotspot {
    display: block;
}

.hotspot-devis {
    top: 71.4%;
    left: 19%;
    width: 63%;
    height: 10.5%;
}

.hotspot-audit {
    top: 88.8%;
    left: 40.5%;
    width: 21%;
    height: 7%;
}

.hotspot-cursor-icon {
    position: absolute;
    width: 45px;
    height: 45px;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: cursor-click-animation 2s infinite ease-in-out;
    pointer-events: none;
}

.image-hotspot::after {
    content: '';
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 13px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
    animation: onde-discret 2s infinite ease-in-out;
    pointer-events: none;
}

.pme-challenge-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "left-col top-col right-col"
        "left-col center-image right-col";
    gap: 30px;
    align-items: center;
    margin-top: 3rem;
}

.pme-challenge-grid .challenge-item-1 {
    grid-area: left-col;
}

.pme-challenge-grid .challenge-item-2 {
    grid-area: top-col;
}

.pme-challenge-grid .challenge-item-3 {
    grid-area: right-col;
}

.pme-challenge-grid .pme-challenge-image {
    grid-area: center-image;
}

.pme-challenge-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.pme-foundations-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "item-1 center-image item-3"
        "item-1 item-2 item-3"
        ". item-2 .";
    gap: 30px;
    align-items: start;
    margin-top: 3rem;
}

.pme-foundations-grid .foundation-item-1 {
    grid-area: item-1;
}

.pme-foundations-grid .foundation-item-2 {
    grid-area: item-2;
}

.pme-foundations-grid .foundation-item-3 {
    grid-area: item-3;
}

.pme-foundations-grid .pme-foundation-image {
    grid-area: center-image;
}

.pme-foundation-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.liste-sans-numeros {
    list-style-type: none;
    padding-left: 0;
}

/* --- Page: FAQ --- */
.faq-section {
    padding: 80px 0;
    background-color: var(--background-light);
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-category {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-blue);
    font-weight: 600;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 20px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question .arrow {
    border: solid var(--text-light);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer p {
    padding: 0 10px 20px 10px;
    color: var(--text-light);
}

.faq-item.active .faq-question .arrow {
    transform: rotate(-135deg);
}

.faq-item.active .faq-answer {
    max-height: 400px;
}

.faq-contact-cta {
    text-align: center;
    margin-top: 4rem;
}

/* --- Pages: Blog & Articles --- */
.blog-header {
    padding: 60px 0;
    background-color: var(--background-grey);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.blog-header h1 {
    margin-bottom: 1rem;
}

.blog-header p {
    max-width: 650px;
    margin: 0 auto 2rem auto;
    color: var(--text-light);
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--background-light);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 130px;
}

.filter-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-align: left;
}

.filter-group input[type="text"],
.filter-group select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.blog-content-section {
    padding: 60px 0;
}

.articles-container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.article-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.12);
}

.article-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-card-category {
    display: inline-block;
    background-color: var(--light-blue);
    color: var(--primary-blue);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.article-card-title {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.article-card-excerpt {
    color: var(--text-light);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.article-card-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: auto;
}

/* --- Mise en page Article Individuel + Sidebar --- */
.article-header-container {
    background-color: var(--background-grey);
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-color);
}

.article-category {
    display: inline-block;
    background-color: var(--light-blue);
    color: var(--primary-blue);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.article-meta {
    color: var(--text-light);
    font-size: 0.9rem;
}

.article-layout-container {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
    /* Ajout pour espacer du header */
}

/* Applique des marges latérales uniquement aux sections sur fond blanc (une sur deux) */
.article-body .content-section:nth-of-type(odd) {
    margin-left: 40px;
    /* Ou la valeur de marge que vous préférez */
    margin-right: 40px;
    /* Ou la valeur de marge que vous préférez */
}

/* Ajoute un espacement vertical après les listes dans le corps d'un article */
.article-body ul,
.article-body ol {
    margin-bottom: 2rem;
}

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

/* --- NOUVEAU BLOC D'INTRODUCTION DE L'ARTICLE --- */
/* --- BLOC D'INTRODUCTION DE L'ARTICLE (Version Flexbox) --- */
.article-intro {
    display: flex;
    /* On active Flexbox pour le conteneur de l'intro */
    gap: 2rem;
    /* Espace entre l'image et le texte */
    align-items: center;
    /* Centre verticalement l'image et le texte */
    margin-bottom: 3rem;
    /* Espace après le bloc d'intro */
}

.article-intro .article-cover-image {
    flex: 0 0 40%;
    /* L'image prend 40% de la largeur, sans grandir ni rétrécir */
    max-width: 350px;
    /* Limite la taille maximale de l'image */
    height: auto;
    border-radius: 8px;
}

.article-intro .intro-text {
    flex: 1;
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: bold;
    color: var(--text-light);
    text-align: justify;
}

.article-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.article-body h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h2::after,
.article-body h3::after {
    margin-left: 0;
    /* Aligne la ligne sous le titre à gauche */
}

.article-body a {
    text-decoration: underline;
    color: var(--primary-blue);
}

.article-body blockquote {
    border-left: 4px solid var(--primary-blue);
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background-color: var(--background-grey);
    font-style: italic;
    color: var(--text-light);
    text-align: justify;
}

.article-sidebar {
    flex: 0 0 170px;
    width: 170px;
}

.sticky-sidebar {
    position: -webkit-sticky;
    /* Pour Safari */
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background-color: var(--background-grey);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.sidebar-widget-title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.1rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

/* ==========================================================================
   SECTION DÉDIÉE À LA SIDEBAR D'ARTICLE (Version Compacte)
   ========================================================================== */

/* --- 1. Structure principale (les 2 colonnes) --- */
.article-layout-container {
    display: flex;
    gap: 1.5rem;
    /* Espace réduit entre le contenu et la sidebar */
}

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

.article-sidebar {
    flex: 0 0 170px;
    /* VOTRE LARGEUR FIXE DE 170px */
    width: 170px;
}

.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

/* --- 2. Style unifié et compact pour les "Widgets" --- */
.sidebar-widget {
    background-color: var(--background-grey);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 12px;
    /* Padding très réduit (12px) pour maximiser l'espace */
    box-sizing: border-box;
}

.sidebar-widget-title {
    font-size: 1.1rem;
    /* Titre de widget plus petit */
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* --- 3. Style "ultra-compact" pour les éléments INTERNES --- */

/* Menu déroulant */
.sidebar-widget select {
    width: 100%;
    padding: 8px 6px;
    /* Padding réduit */
    font-size: 0.8rem;
    /* Police très réduite */
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    text-overflow: ellipsis;
    /* Coupe le texte long avec "..." */
}

/* Bouton "Retour aux articles" */
.sidebar-widget .cta-button {
    width: 100%;
    padding: 8px 5px;
    /* Padding minimal */
    font-size: 0.8rem;
    /* Police très réduite */
    line-height: 1.2;
    white-space: normal;
    box-sizing: border-box;
    text-align: center;
    /* Assure le centrage du texte s'il passe à la ligne */
}

/* --- Animations Spécifiques (Hotspot) --- */
@keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes cursor-click-animation {

    0%,
    20%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    10% {
        transform: translate(-50%, -45%) scale(0.95);
    }
}

@keyframes onde-discret {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    80%,
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================================================
   MISE EN PAGE STRUCTURELLE DES PARAGRAPHES D'ARTICLE
   ========================================================================== */

/* --- Style 1 : Le paragraphe d'introduction de section --- */
/* Cible le premier paragraphe qui suit immédiatement un titre H2 */
/* Cible le premier paragraphe qui suit un H2 OU un H3 qui suit un H2 */
.article-body h2+p,
.article-body h2+h3+p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-dark);
    max-width: 110%;
    margin-left: 0%;
    margin-bottom: 2.5rem;
}

/* --- Style 2 : Le paragraphe "mis en exergue" (via les citations) --- */
/* Ce style est maintenant appliqué aux balises <blockquote> */
.article-body blockquote {
    border-left: 4px solid var(--primary-blue);
    margin: 2rem auto;
    /* Centre le bloc s'il est plus étroit */
    padding: 1rem 1.5rem;
    background-color: var(--background-grey);
    font-style: italic;
    color: var(--text-light);
    max-width: 90%;
    /* Le rend un peu plus étroit que le texte principal */
}

/* On s'assure que le style d'intro ne s'applique pas dans une citation */
.article-body blockquote h2+p {
    all: unset;
}

.article-body h2 {
    text-align: center;
}

/* On s'assure que la petite ligne bleue en dessous est aussi centrée */
.article-body h2::after {
    margin-left: auto;
    margin-right: auto;
}

/* Style pour notre nouvel élément de liste créé via shortcode */
.styled-list-item {
    display: flex;
    /* Active Flexbox */
    justify-content: center;
    /* Centre le groupe (point + texte) sur la page */
    align-items: center;
    /* Aligne le point et le texte verticalement */
    position: relative;
}

/* --- Style pour différencier les titres de listes (styled_item) --- */
.styled-list-item strong {
    color: var(--primary-blue);
    /* Utilise la couleur principale de la marque */
    font-weight: 700;
    /* Assure un gras bien marqué */
    font-size: 1.1em;
    /* Légèrement plus grand que le texte du paragraphe */
}

/* Centre le paragraphe qui suit un titre de liste (Version Infaillible) */
.content-section .styled-list-item+p {
    max-width: 75ch;
    margin-left: auto !important;
    /* Le !important force la priorité */
    margin-right: auto !important;
    /* Le !important force la priorité */
    text-align: center !important;
    /* Le !important force la priorité */
}

/* --- Styles pour les sections de contenu alternées (v6 - Fonds alternés 1/2) --- */

/* Style de base pour TOUTES les sections */
.content-section {
    margin-bottom: 2.5rem;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 2rem 0;
    /* Espacement vertical de base pour toutes les sections */
}

/* NOUVELLE RÈGLE : Applique un fond gris à une section sur deux (la 2ème, 4ème, 6ème...) */
.article-body .content-section:nth-of-type(even) {
    background-color: var(--background-grey);
    padding-left: 2.5rem;
    /* Ajoute un padding horizontal uniquement aux sections grises */
    padding-right: 2.5rem;
}

/* On ne limite la largeur que des éléments "enfants", SAUF les H2 et les listes */
.content-section>*:not(h2):not(.styled-list-item) {
    max-width: 75ch;
    text-align: justify;
}

/* Section alignée à GAUCHE */
.content-section.align-left>*:not(h2):not(.styled-list-item) {
    margin-left: 0;
    margin-right: auto;
}

/* Le titre H2 reste centré */
.content-section h2 {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* --- Page: Article Individuel (Conteneur principal) --- */
.article-page-content {
    background-color: var(--background-light);
    padding: 40px 0;
    margin-left: 20px;
    /* Assure la cohérence avec les marges des autres pages */
    margin-right: 20px;
}

/* ==========================================================================
   TABLEAU STYLISÉ (Version épurée V2)
   ========================================================================== */

.responsive-table-container {
    width: 100%;
    overflow-x: auto;
    /* Maintien du scroll horizontal sur mobile */
    margin: 3rem 0 1rem;
    border: 1px solid var(--primary-blue);
    /* Bordure principale à la couleur de la marque */
    border-radius: 8px;
    background-color: var(--background-light);
    /* Fond blanc défini dans :root (#ffffff) */
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    /* Ligne de séparation discrète */
}

/* --- En-tête du tableau --- */
.styled-table thead tr {
    background-color: var(--primary-blue);
    /* Bleu primaire de la charte */
    color: var(--background-light);
    /* Texte blanc */
}

.styled-table thead th {
    font-weight: 600;
    border-bottom: 1px solid var(--dark-blue);
    /* Ligne plus foncée sous le header */
}

/* --- Corps du tableau --- */
.styled-table tbody td {
    color: var(--primary-blue);
    /* Texte en bleu primaire */
}

.styled-table tbody tr:last-of-type td {
    border-bottom: none;
    /* Pas de bordure pour la dernière ligne */
}

/* --- Légende pour les tableaux --- */
.table-figure figcaption {
    padding: 10px 5px;
    font-size: 0.85rem;
    color: var(--text-light);
    font-style: italic;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -1px;
    margin-bottom: 2rem;
}

/* ==========================================================================
   5. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1250px) {
    .main-nav .hide-on-tablet {
        display: none;
    }

    .burger-menu {
        display: flex;
    }

    .main-nav ul {
        gap: 20px;
        /* On garde un espacement confortable */
    }
}

@media (max-width: 1024px) {

    .main-nav .hide-on-mobile {
        display: none;
    }

    .header-container {
        height: 100px;
    }

    .logo-image {
        height: 80px;
    }

    /* On ajoute une transition douce sur les éléments qui vont changer de taille */
    .header-container,
    .logo-image {
        transition: height 0.3s ease-in-out;
    }

    /* Nouvelles règles pour l'état "défilé" */
    .main-header.header-scrolled .header-container {
        height: 80px;
        /* Hauteur réduite du conteneur du header */
    }

    .main-header.header-scrolled .logo-image {
        height: 65px;
        /* Hauteur réduite du logo */
    }

    /* --- Structures de Page --- */
    .hero-container,
    .sur-mesure-content {
        flex-direction: column;
    }

    #hero-home .hero-image-wrapper {
        display: none;
    }

    .sur-mesure-illustration {
        max-width: 60%;
        margin-top: 1rem;
    }

    .sur-mesure-content.reverse {
        flex-direction: column;
    }

    /* --- Pages Spécifiques --- */
    .pme-challenge-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "top-col"
            "left-col"
            "right-col"
            "center-image";
    }

    .pme-foundations-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "center-image"
            "item-1"
            "item-2"
            "item-3";
    }

    .article-layout-container {
        flex-direction: column-reverse;
    }

    .article-sidebar {
        width: 100%;
    }

    .sticky-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {

    .main-nav a {
        font-size: 0.9rem;
    }

    .main-nav ul {
        gap: 15px;
    }

    .main-nav a.nav-cta {
        padding: 6px 10px;
    }

    /* --- Typographie --- */
    h1 {
        font-size: 2.2rem;
    }

    /* --- Structures de Page --- */
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* --- Pages Spécifiques --- */
    .team-container {
        flex-direction: column;
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label {
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .article-header-container h1 {
        font-size: 2rem;
        line-height: 1.3;
    }

    /* Fichier: style.css - À AJOUTER dans @media (max-width: 768px) */

    .form-group label,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea {
        /* On force chaque élément (label et champ) à prendre 100% de la largeur */
        flex-basis: 100%;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .main-nav {
        display: none;
    }

    .burger-menu {
        margin-left: auto;
    }
}

/* Fichier: style.css - À AJOUTER à la fin de la section 5 */

@media (max-width: 850px) {
    .article-intro {
        /* On passe l'affichage de "ligne" à "colonne" */
        flex-direction: column;

        /* On peut réduire l'espace entre l'image et le texte pour un meilleur rendu vertical */
        gap: 1.5rem;
    }
}

/* --- Styles pour les ajouts en fin d'article (VERSION CORRIGÉE) --- */

/* Conteneur global pour les nouveaux blocs, pour gérer l'espacement */
.article-addons {
    margin-top: 3rem;
    /* Espace après le contenu de l'article */
}

/* Style commun pour les deux nouveaux blocs */
.article-cta-section,
.similar-articles-section {
    padding: 2rem;
    margin-top: 2.5rem;
    border-radius: 8px;
    background-color: var(--background-grey);
    border: 1px solid var(--border-color);
}

/* Le premier bloc n'a pas besoin de marge en haut */
.article-addons>*:first-child {
    margin-top: 0;
}

.article-cta-title,
.similar-articles-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.article-cta-section p {
    text-align: center;
    max-width: 500px;
    margin: 0 auto 1.5rem auto;
}

.article-cta-section .cta-button {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

.similar-articles-section .articles-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Une seule colonne par défaut */
    gap: 20px;
    margin-top: 2rem;
}

/* Sur les écrans plus larges, on peut passer à 2 colonnes si la place le permet */
@media (min-width: 768px) {
    .similar-articles-section .articles-container {
        /* Limite à 2 colonnes maximum pour ne pas écraser le contenu */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* AJOUT DANS style.css */

/* --- Composant Multifourche --- */
.multifourche-container {
    margin-bottom: 2rem;
    display: inline-block;
    /* Pour s'intégrer dans le flux du texte */
    position: relative;
    /* Référence pour la liste de liens */
    vertical-align: middle;
    /* Meilleur alignement avec le texte */
}

.multifourche-button {
    background-color: var(--light-blue);
    color: var(--primary-blue);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    /* Style "pilule" */
    cursor: pointer;
    transition: all 0.2s ease;
}

.multifourche-button:hover {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.multifourche-links {
    display: none;
    /* Caché par défaut */
    position: absolute;
    bottom: 100%;
    /* S'affiche au-dessus du bouton */
    bottom: 100%;
    left: 0;
    /* <-- Changement : s'aligne à gauche du bouton */
    transform: translateY(-5px);
    /* <-- Changement : plus de translation horizontale */
    /* Centré et avec un petit espace */
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
    min-width: 200px;
    /* Largeur minimale */
    z-index: 10;
}

.multifourche-container.is-open .multifourche-links {
    display: block;
    /* Affiché quand le conteneur a la classe .is-open */
}

/* Style pour la liste de liens à l'intérieur */
.multifourche-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.multifourche-links ul li {
    margin: 0;
}

.multifourche-links a {
    display: block;
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: 4px;
}

.multifourche-links a:hover {
    background-color: var(--light-blue);
    color: var(--dark-blue);
}

/* AJOUT DANS style.css */

/* --- Style pour les images d'article via le shortcode [image] --- */
.article-image {
    margin: 2.5rem 0;
    /* Ajoute de l'espace vertical avant et après l'image */
    width: 100%;
}

.article-image img {
    width: 100%;
    height: auto;
    /* Garde les proportions de l'image */
    border-radius: 8px;
    /* Bords arrondis comme sur le reste du site */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Ombre discrète */
    border: 1px solid var(--border-color);
}

.article-image figcaption {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}

/* ==========================================================================
   6. STYLES SPÉCIFIQUES PAGE ARTICLES (LAYOUT PAR CATÉGORIE)
   ========================================================================== */

/* --- Liens d'ancrage rapides --- */
.category-anchors {
    margin-top: 2rem;
    padding: 1rem;
    margin-bottom: 2.5rem;
    background-color: var(--background-light);
    border-radius: 8px;
}

.category-anchors p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    text-align: center;
}

.category-anchors ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.category-anchors a {
    display: inline-block;
    background-color: var(--light-blue);
    color: var(--primary-blue);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.category-anchors a:hover {
    background-color: var(--dark-blue);
    color: white;
}

/* --- Section pour chaque catégorie --- */
.category-section {
    padding-top: 3rem;
    /* Espace pour l'ancre */
    margin-top: -1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2rem;
}

.category-title {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 2rem;
    text-align: left;
    position: relative;
    padding-bottom: 0.5rem;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-blue);
}

.category-articles-grid .article-card {
    /* Cache par défaut les articles qui seront révélés par JS */
    display: none;
}

.category-articles-grid .article-card.is-visible {
    display: flex;
}

/* --- Bouton "Afficher plus" --- */
.category-load-more {
    text-align: center;
    margin-top: 2.5rem;
}

.load-more-btn {
    background-color: var(--success-color);
    font-size: 1rem;
    padding: 12px 30px;
}

.load-more-btn:hover {
    background-color: #006A48;
    /* Un vert un peu plus foncé */
}

/* Cache le bouton si la classe .hidden est ajoutée par JS */
.category-load-more.hidden {
    display: none;
}

/* ==========================================================================
   7. BOUTON "RETOUR EN HAUT"
   ========================================================================== */

#back-to-top-btn {
    position: fixed;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    /* Pour centrer horizontalement */

    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 50%;
    /* Cercle parfait */
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 1000;

    opacity: 0;
    /* Caché par défaut */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#back-to-top-btn.is-visible {
    opacity: 0.1;
    visibility: visible;
}

#back-to-top-btn:hover {
    opacity: 1;
    /* Totalement opaque au survol */
}

/* ==========================================================================
   8. EFFET PARTICULES SECTION HÉRO
   ========================================================================== */

/* On cible maintenant la classe et non plus l'ID */
.particle-container {
    position: relative;
    overflow: hidden;
    /* On la rend "collante" */
    top: 0;
    /* Elle se collera tout en haut de la zone visible */
    overflow: hidden;
    z-index: 1;
    /* On la place sur une couche de base */
}

/* Le sélecteur du canevas est ajusté en conséquence */
.particle-container .particles-js-canvas-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateY(-0px);
}


/* On change la couleur du texte pour qu'il soit lisible sur fond sombre */
.particle-container h1,
.particle-container .subtitle {
    color: #ffffff;
}

/* Correction pour la superposition du contenu sur les particules */
.hero-content,
.hero-image-wrapper {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   SUPERPOSITION POUR HÉROS STICKY
   ========================================================================== */
.text-section,
.solution-section,
.dark-section,
.main-footer,
.faq-section,
.category-section,
.articles-content-wrapper,
.filters-section {
    position: relative;
    z-index: 2;
}

.articles-content-wrapper {
    background-color: var(--background-grey);
    /* Fond blanc */
    padding-top: 40px;
    /* Espace en haut */
    padding-bottom: 10px;
}

/* SUPERPOSITION POUR HÉROS STICKY devient SUPERPOSITION TRANSPARENTE */

/* --- Sections à fond BLANC transparent --- */
/* Celles qui utilisent var(--background-light) */
.solution-section,
.faq-section,
.articles-content-wrapper,
.blog-header {
    background-color: rgba(255, 255, 255, 1);
    /* Fond blanc à 85% d'opacité */
}

/* --- Sections à fond GRIS transparent --- */
/* Celles qui utilisent var(--background-grey) */
.text-section:not(.dark-section) {
    background-color: rgba(244, 245, 247, 0.8);
    /* Fond gris #f4f5f7 à 85% d'opacité */
}

/* --- Sections à fond SOMBRE transparent --- */
/* Celles qui utilisent var(--text-dark) */
.dark-section {
    background-color: rgba(23, 43, 77, 0.50);
    /* Fond bleu foncé #172b4d à 50% d'opacité */
}

/* ==========================================================================
   VARIATION HERO ACCUEIL (IMAGE INVISIBLE POUR ZONE DE PARTICULES)
   ========================================================================== */

/* Cible l'image DANS le hero de l'accueil et la rend invisible
   tout en conservant sa place dans la mise en page. */
#hero-home .hero-image-wrapper img {
    visibility: hidden;
}

/* --- Styles pour le Footer (Version avec logos couleur et survol) --- */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    flex-wrap: wrap;
    gap: 20px;
}

.copyright,
.legal-links,
.social-links {
    flex: 1;
}

.copyright {
    text-align: left;
}

.legal-links {
    text-align: center;
}

.legal-links p {
    margin-bottom: 0;
}

.social-links {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-links span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.social-icons-container {
    display: flex;
    gap: 12px;
}

.social-icons-container a {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    /* Ajout pour une animation fluide */
}

/* Couleur par défaut des icônes */
.social-icons-container .social-icon {
    width: 24px;
    height: 24px;
    color: var(--text-blue);
    /* Couleur grise par défaut */
    transition: color 0.3s ease;
    /* Animation pour la couleur */
}

/* Effet au survol : grossir l'icône */
.social-icons-container a:hover {
    transform: scale(1.2);
    /* Grossit l'icône de 20% */
}

/* Couleur spécifique Facebook au survol */
.social-icons-container a[href*="facebook.com"]:hover .social-icon {
    color: #1877F2;
    /* Bleu officiel de Facebook */
}

/* Couleur spécifique LinkedIn au survol */
.social-icons-container a[href*="linkedin.com"]:hover .social-icon {
    color: #0A66C2;
    /* Bleu officiel de LinkedIn */
}

/* --- Responsive pour le footer --- */
@media (max-width: 768px) {

    .footer-container {
        flex-direction: column;
        gap: 25px;
    }

    .copyright,
    .legal-links,
    .social-links {
        text-align: center;
        flex-basis: auto;
    }

    .social-links {
        align-items: center;
    }
}

/* Note pour les champs obligatoires dans le formulaire de contact */
.form-actions .form-required-note {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 1.5rem;
    /* Espace par rapport au bouton */
    color: var(--text-light);
    /* J'utilise une variable CSS existante */
}

/* Nouvelle classe utilitaire pour centrer le contenu d'un form-group */
.form-group.align-center {
    align-items: center;
}

/* ==========================================================================
   9. STYLES POUR LES MENUS DÉROULANTS
   ========================================================================== */

/* Conteneur de l'item de navigation parent */
.nav-item--has-dropdown {
    position: relative;
}

/* Indicateur flèche pour les menus déroulants */
.nav-item--has-dropdown>.nav-link::after {
    content: ' ▼';
    display: inline-block;
    font-size: 0.6em;
    margin-left: 5px;
    vertical-align: middle;
}

/* Style de base du menu déroulant (caché par défaut) */
.dropdown-menu {
    display: none;
    /* Changé par JS en 'block' */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--background-light);
    list-style: none;
    padding: 10px 0;
    margin: 5px 0 0 0;
    min-width: 220px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    z-index: 1010;
    /* Doit être supérieur au reste */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Style d'un menu déroulant ouvert */
.nav-item--has-dropdown.is-open>.dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Liens à l'intérieur du menu déroulant */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: var(--text-dark);
    font-weight: 500;
}

.dropdown-menu li a:hover {
    background-color: var(--light-blue);
    color: var(--primary-blue);
}

@media (hover: hover) and (min-width: 1251px) {
    .nav-item--has-dropdown:hover>.dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   AMÉLIORATION DES MENUS DÉROULANTS (V2 - Mise à jour survol)
   ========================================================================== */

/* 1. Contour plus marqué (via une ombre portée plus nette) */
.dropdown-menu {
    box-shadow: 0 8px 25px rgba(23, 43, 77, 0.2);
    border: 1px solid #dfe1e6;
}

/* 2. Styles des liens du menu (texte bleu, transition) */
.dropdown-menu li a {
    color: var(--primary-blue);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 3. Survol ET page active avec fond bleu et texte blanc */
.dropdown-menu li a:hover,
.dropdown-menu li a.current-page {
    background-color: var(--primary-blue);
    color: white;
}

/* 4. Animation de la flèche (suggestion) */
.nav-item--has-dropdown>.nav-link::after {
    transition: transform 0.3s ease;
}

/* MODIFICATION ICI : L'animation se déclenche au clic OU au survol */
.nav-item--has-dropdown.is-open>.nav-link::after,
.nav-item--has-dropdown:hover>.nav-link::after {
    transform: rotate(90deg);
}

/* ==========================================================================
   Page Services - Systèmes & Briques (V3 - Corrigé)
   ========================================================================== */

/* --- Section de sélection des Systèmes --- */
.system-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-top: 3rem;
}

.system-card {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.system-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 82, 204, 0.1);
}

.system-card-icon {
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.system-card h3 {
    flex-grow: 1;
    color: var(--text-dark);
    font-size: 1.6rem;
}

.system-card p {
    font-size: 0.95rem;
    flex-grow: 2;
}

/* --- Section de l'Atelier Interactif --- */
.workshop-section {
    background-color: var(--background-grey);
    padding: 80px 0;
    margin-top: 4rem;
    transition: background-color 0.4s ease;
    /* CORRECTION 5 : Assure que la section est au-dessus des particules */
    position: relative;
    z-index: 2;
}

.workshop-canvas {
    position: relative;
    width: 100%;
    transition: min-height 0.5s ease-out;
    display: flex;
    /* CORRECTION : On aligne le contenu en haut au lieu du centre */
    align-items: flex-start;
    justify-content: center;
    padding-top: 50px;
    /* AJOUT : Crée un espace en haut pour que le noyau ne soit pas collé au bord */
}

.workshop-placeholder {
    color: var(--text-light);
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.workshop-placeholder.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- Noyau du système (la carte une fois au centre) --- */
.workshop-core {
    position: absolute;
    /* CORRECTION : On ancre le noyau à 250px du haut, au lieu de 50% */
    top: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Le centrage vertical se fait maintenant par rapport à sa propre hauteur */
    z-index: 10;
    width: 250px;
    padding: 20px;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* --- Conteneur des briques qui apparaissent --- */
.workshop-bricks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Style d'une brique individuelle --- */
.brick {
    position: absolute;
    background-color: #fff;
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    z-index: 11;

    /* ÉTAT INITIAL : Caché */
    opacity: 0;
    transform: scale(0.5);

    /* Le seul "manager" : il anime tout ce qui est nécessaire */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.brick.is-visible {
    opacity: 1;
    transform: scale(1);
}


.brick-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.brick-content {
    padding: 15px;
}

.brick h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text-dark);
}

/* --- Contenu détaillé (caché par défaut) --- */
.brick-full-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out 0.1s;
    /* Délai pour l'opacité */
}

.brick.is-expanded .brick-full-details {
    max-height: 500px;
    /* Se déploie pour révéler le contenu */
    opacity: 1;
}

.brick .problem-statement,
.brick .solution-statement,
.brick .custom-plus,
.brick .super-power {
    font-size: 0.85rem;
    margin-bottom: 0.75rem !important;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
}

/* --- Bouton de contrôle de l'atelier --- */
.workshop-controls {
    text-align: center;
    margin-top: 2rem;
    position: relative;
    z-index: 5;
    /* S'assure qu'il est cliquable */
}



@media (max-width: 900px) {
    .system-card h3 {
        font-size: 1.4rem;
    }

    /* Le responsive de l'atelier sera géré dynamiquement par JS */
}

#system-selection {
    border-radius: 8px;
}

.workshop-section {
    border-radius: 8px;
}

/* Page Nos Services - Style pour la description au-dessus de l'atelier */

.workshop-description {
    /* 1. On le sort du flux pour un contrôle total de la position */
    position: absolute;

    /* 2. === VOS RÉGLAGES MANUELS SONT ICI === */
    --description-top: -5px;
    /* Hauteur : distance depuis le haut du canva */
    --description-margin-left: 15%;
    /* Marge latérale gauche */
    --description-margin-right: 15%;
    /* Marge latérale droite */
    /* ========================================= */

    /* 3. On applique ces réglages */
    top: var(--description-top);
    left: var(--description-margin-left);
    right: var(--description-margin-right);

    /* 4. Styles pour l'apparence */
    text-align: center;
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
    transition: opacity 0.5s 0.2s ease-in-out;
    z-index: 5;
    /* On s'assure qu'il reste au-dessus des autres éléments */
}

/* ==========================================================================
   Page Services - Expansion des briques (Version SANS CONFLIT)
   ========================================================================== */

.brick.is-expanded {
    width: 400px;
    z-index: 12;
}

.brick:not(.expand-left):not(.expand-center).is-expanded {
    transform: scale(1.05);
    transform-origin: top left;
}

.brick.expand-left.is-expanded {
    transform: translateX(-180px) scale(1.05);
    transform-origin: top right;
}

.brick.expand-center.is-expanded {
    transform: translateX(-90px) scale(1.05);
    transform-origin: top center;
}

/* ========================================================================= */
/* PAGE: NOUS LES EPAULONS (PATCHWORK V2)                                    */
/* ========================================================================= */

.partners-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 3rem;
}

.partner-card {
    display: block;
    position: relative;
    height: 450px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: white;
}

.partner-card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

.partner-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.partner-card-content {
    padding: 25px;
    transform: translateY(20px);
    transition: transform 0.4s ease-out;
}

.partner-card .partner-logo {
    max-height: 60px;
    width: auto;
    margin-bottom: 1rem;
}

.partner-card h3 {
    color: #ffffff;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.partner-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 0;
}

/* --- Effets au survol --- */
.partner-card:hover .partner-card-overlay {
    opacity: 1;
}

.partner-card:hover .partner-card-bg {
    transform: scale(1.05);
}

.partner-card:hover .partner-card-content {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .partner-card {
        height: 400px;
    }

    .partners-container {
        grid-template-columns: 1fr;
    }
}