/* =========================================
   1. VARIABLES & RESET (BASE)
   ========================================= */
:root {
    --primary-color: #22262d; 
    --primary-hover: #374151; 
    --accent-color: #00bfff; 
    --secondary-color: #f3f3f3;
    --text-color: #374151;
    --heading-color: #22262d;
    --background-color: #ffffff;
    --container-width: 1360px;
    --font-family: 'Poppins', sans-serif;
    --header-height: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    font-size: 18px; 
    line-height: 1.7; 
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    color: var(--heading-color);
    font-weight: 600;
}
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

/* --- TITRES DE SECTION --- */
.section-title {
    text-align: center; /* Par défaut, tout est centré */
    margin-bottom: 40px; /* Espace standard sous le titre */
    font-size: 32px;
    font-weight: 700;
    color: var(--heading-color);
}

.section-subtitle {
    text-align: center; /* Le sous-titre aussi */
    font-size: 18px;
    color: var(--text-color);
    max-width: 700px;
    margin: -30px auto 50px; /* Remonte un peu vers le titre et centre le bloc */
}

/* --- EXCEPTION POUR ALIGNEMENT GAUCHE --- */
/* À utiliser quand le texte est à côté d'une image */
.text-left {
    text-align: left !important;
}
.text-left + .section-subtitle { /* Si le sous-titre suit un titre à gauche */
    text-align: left !important;
    margin-left: 0;
}

/* =========================================
   2. HEADER & NAVIGATION (GLOBAL)
   ========================================= */
.main-header { 
    background: var(--background-color); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    height: var(--header-height); 
    display: flex; 
    align-items: center; 
}
.main-header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
}
.logo img { height: 36px; display: block; flex-shrink: 0; }
.logo:focus { outline: none; box-shadow: none; }

.main-nav { display: none; align-items: center; gap: 30px; }
.mobile-nav-toggle { display: block; }

@media (min-width: 992px) {
    .main-nav { display: flex; }
    .mobile-nav-toggle { display: none; }
}

.nav-links { list-style: none; display: flex; align-items: center; gap: 35px; }
.nav-links a { 
    text-decoration: none; 
    color: var(--text-color); 
    font-weight: 600; 
    font-size: 16px; 
    transition: color 0.3s ease; 
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav-links a:hover { color: var(--accent-color); }
.nav-links svg { width: 20px; height: 20px; opacity: 0.7; }

/* =========================================
   FIX MENU DÉROULANT (PONT INVISIBLE - DESKTOP)
   ========================================= */

/* 1. Conteneur parent */
.dropdown { 
    position: relative; 
    display: flex; /* Important pour prendre toute la hauteur du header */
    align-items: center;
    height: 100%; 
}

/* 2. La boite du menu */
.dropdown-content {
    display: none; 
    position: absolute; 
    background-color: #fff; 
    min-width: 260px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); 
    border-radius: 8px; 
    z-index: 1000;
    
    /* POSITIONNEMENT CORRIGÉ */
    top: 100%; /* Se place exactement sous le header */
    left: 0; 
    padding: 10px 0; 
    border: 1px solid #e5e7eb;
    margin-top: 0; 
}

/* --- LE PONT INVISIBLE --- */
/* Crée une zone transparente au-dessus du menu pour attraper la souris */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -20px; /* Remonte de 20px vers le haut pour coller au lien */
    left: 0;
    width: 100%;
    height: 20px; /* Hauteur du pont */
    background: transparent; /* Invisible */
    display: block;
}

/* 3. Liens du menu */
.dropdown-content a {
    color: var(--text-color); 
    padding: 12px 20px; 
    text-decoration: none; 
    display: flex;
    font-size: 15px; 
    font-weight: 500; 
    transition: background 0.2s; 
    align-items: center;
}
.dropdown-content a:hover { 
    background-color: #f3f4f6; 
    color: var(--accent-color); 
}

/* 4. LOGIQUE D'AFFICHAGE PC (Desktop > 992px) */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-content { 
        display: block; 
        animation: fadeIn 0.2s ease;
    }
    
    /* Garde le lien parent coloré quand le menu est ouvert */
    .dropdown:hover > a {
        color: var(--accent-color);
    }
}

/* Animation douce */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* --- Boutons Header --- */
.header-cta {
    background-color: var(--primary-color); color: white !important; padding: 12px 24px;
    border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;
    display: inline-block; text-align: center; white-space: nowrap;
}
.header-cta:hover { background-color: var(--primary-hover); transform: translateY(-2px); }

/* =========================================
   3. CLASSES UTILITAIRES & BOUTONS (GLOBAL)
   ========================================= */
.cta-button { padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block; text-align: center; }
.cta-button.primary { background-color: var(--primary-color); color: white; }
.cta-button.primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }

/* Bouton Secondaire (Découvrir la suite) */
.btn-secondary {
    background-color: #fff; color: var(--heading-color); border: 1px solid #e5e7eb;
    padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none;
    display: inline-block; transition: all 0.3s ease;
}
.btn-secondary:hover {
    transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--heading-color); color: var(--accent-color);
}

/* Bouton CTA Final Blanc (Page Accueil) */
.cta-final-button {
    background-color: #fff; color: var(--heading-color); padding: 15px 35px; border-radius: 8px; font-weight: 600;
    text-decoration: none; transition: all 0.3s ease; display: inline-block; border: 2px solid #fff;
}
.cta-final-button:hover { background-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* =========================================
   4. PAGE D'ACCUEIL (NOUVEAUX BLOCS)
   ========================================= */

/* --- Hero Section V2 --- */
.hero-v2 { padding: 80px 0 40px 0; background-color: var(--background-color); }
.hero-v2-layout { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.hero-v2-content { flex: 1; }
.hero-v2-visual { flex: 1; width: 100%; }
.hero-v2-title { font-size: 42px; color: var(--heading-color); font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.hero-v2-subtitle { font-size: 18px; color: var(--text-color); margin-bottom: 30px; max-width: 500px; }
.hero-cta { padding: 14px 28px; font-size: 16px; }
.dashboard-image { width: 100%; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

@media (min-width: 992px) { .hero-v2-layout { flex-direction: row; text-align: left; } }
@media (max-width: 991px) { .hero-v2-content { text-align: center; } .hero-v2-title { font-size: 32px; } }

/* --- Trust & Carrousel --- */
.trust-section { border-bottom: 1px solid #e5e7eb; padding: 20px 0; background: #fff; }
.trust-container { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.trust-linkedin { 
    color: #0077b5; font-weight: 600; font-size: 14px; background: #e8f4f9; 
    padding: 5px 15px; border-radius: 20px; text-decoration: none; 
    display: flex; align-items: center; gap: 8px; transition: transform 0.2s;
}
.trust-linkedin:hover { transform: scale(1.05); }

.partners-carousel-section { padding: 50px 0 30px; background: #f9fafb; overflow: hidden; border-bottom: 1px solid #e5e7eb; }
.partners-heading { text-align: center; font-size: 14px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 40px; font-weight: 600;}
.carousel-track-container { width: 100%; overflow: hidden; position: relative; }
.carousel-track { display: flex; width: calc(250px * 24); animation: scroll 30s linear infinite; }
.partner-logo { width: 250px; padding: 0 30px; display: flex; align-items: center; justify-content: center; }
.partner-logo img { max-width: 100%; max-height: 80px; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.partner-logo img:hover { filter: grayscale(0%); opacity: 1; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 6)); } }

/* --- Section Problèmes V5 (Image + Carte Noire) --- */
.problem-section-v5 { padding: 100px 0 60px; background-color: #fff; }
.problem-layout { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: center; }
@media (min-width: 992px) { .problem-layout { grid-template-columns: 1fr 1.2fr; } }

.problem-visual { position: relative; }
.problem-visual img { width: 100%; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); object-fit: cover; height: 100%; min-height: 500px; }

.dark-overlay-card {
    position: absolute; bottom: 30px; right: -20px; 
    background-color: #22262D; color: #fff;
    padding: 25px; border-radius: 12px; max-width: 260px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border-left: 4px solid var(--accent-color);
    display: none;
}
@media (min-width: 768px) { .dark-overlay-card { display: block; } }
.dark-overlay-card strong { display: block; font-size: 24px; margin-bottom: 5px; color: #fff; }
.dark-overlay-card span { font-size: 14px; opacity: 0.8; }

.problem-list { display: flex; flex-direction: column; gap: 20px; }
.problem-card-v5 {
    background-color: #fff; padding: 25px; border-radius: 12px; 
    border: 1px solid #e5e7eb; box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex; gap: 20px; align-items: flex-start;
}
.problem-card-v5:hover { transform: translateX(10px); border-color: #EF4444; }
.emoji-icon { font-size: 32px; line-height: 1; background: #FEF2F2; width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.problem-content h3 { font-size: 18px; font-weight: 700; color: #DC2626; margin-bottom: 5px; }
.problem-content p { 
    font-size: 16px; 
    color: var(--text-color); 
    line-height: 1.6; 
    margin: 0; 
}

.stats-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; margin-top: 60px; padding-top: 40px; border-top: 1px solid #e5e7eb;
    text-align: center;
}
.stat-item h4 { font-size: 36px; color: var(--accent-color); font-weight: 800; margin-bottom: 5px; }
.stat-item p { 
    font-size: 16px; 
    color: #6b7280; 
    font-weight: 500; 
}

/* --- Timeline Cycle de Vie (Dark Mode) --- */
.lifecycle-section { 
    padding: 100px 0; 
    background-color: #22262D; 
    color: #fff; position: relative; overflow: hidden;
}
.lifecycle-section .section-title { color: #fff; position: relative; z-index: 1; }
.lifecycle-section .section-subtitle { color: #ffffff; opacity: 1; position: relative; z-index: 1; }

.lifecycle-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.timeline-container { display: flex; flex-direction: column; gap: 20px; margin-top: 50px; align-items: center; position: relative; z-index: 1;}
@media (min-width: 992px) { .timeline-container { flex-direction: row; align-items: stretch; justify-content: space-between; } }

.timeline-step { 
    background: #fff; border: none;
    border-radius: 16px; padding: 30px; flex: 1; position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.3s ease; 
}
.timeline-step:hover { transform: translateY(-5px); }

.step-icon { font-size: 40px; margin-bottom: 15px; background: #E6F8FF; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.step-phase { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-color); font-weight: 700; display: block; margin-bottom: 5px; }
.timeline-step h3 { font-size: 20px; margin-bottom: 10px; color: var(--heading-color); }
.timeline-step p { 
    font-size: 16px; 
    color: var(--text-color); 
    line-height: 1.6; 
    margin-bottom: 20px; 
}
.step-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; background: #f3f4f6; color: #6b7280; }
.step-badge.primary { background: var(--accent-color); color: #fff; }

.timeline-connector { display: flex; align-items: center; justify-content: center; color: #6b7280; }
.timeline-connector svg { width: 30px; height: 30px; transform: rotate(90deg); }
@media (min-width: 992px) { .timeline-connector svg { transform: rotate(0deg); } }

/* --- Catalogue (Services) --- */
.catalog-section { padding: 100px 0; background: #fff; }
.catalog-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
@media (min-width: 768px) { .catalog-grid { grid-template-columns: 1fr 1fr; } }
.catalog-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 40px; transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.catalog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: var(--accent-color); }
/* --- NOUVEAU STYLE EN-TÊTE CARTE --- */

/* 1. Le conteneur qui met l'icône et le texte côte à côte */
.card-header-row {
    display: flex;
    align-items: center; /* Centre verticalement */
    gap: 20px; /* Espace entre l'emoji et le texte */
    margin-bottom: 20px; /* Espace sous le titre avant la description */
}

/* 2. Ajustement de l'icône */
.catalog-emoji-wrapper {
    /* 1. ON RETIRE LE FOND ET LA BOITE */
    background: transparent; /* Plus de fond bleu */
    border-radius: 0;        /* Plus de coins arrondis */
    width: auto;             /* La largeur s'adapte à l'icône */
    height: auto;            /* La hauteur s'adapte à l'icône */

    /* 2. ON AGRANDIT L'ICÔNE */
    /* On passe de 32px à 58px (ajuste selon tes goûts) */
    font-size: 58px;
    line-height: 1;

    /* 3. ALIGNEMENT */
    /* flex-shrink: 0 est crucial pour qu'elle ne s'écrase pas */
    flex-shrink: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center; /* Centre l'emoji verticalement par rapport au texte */
}

/* 3. Le bloc de texte à droite de l'icône */
.card-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 4. Ajustement du Tag (Supervision IT, etc.) */
.product-tag {
    margin-bottom: 5px; /* Un petit espace entre le tag et le titre */
    font-size: 11px; /* Un tout petit peu plus fin pour l'élégance */
}

/* 5. Ajustement du Titre */
.catalog-title {
    margin-bottom: 0; /* Plus besoin de marge, c'est le header-row qui gère l'espace */
    font-size: 22px; /* Légèrement ajusté pour l'équilibre */
    line-height: 1.2;
}

.catalog-desc { color: var(--text-color); margin-bottom: 25px; flex-grow: 1; font-size: 16px; }
.feature-check { list-style: none; margin-top: auto; }
.feature-check li { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 8px; color: #555; font-weight: 500; }
.feature-check li::before { content: '✓'; color: var(--accent-color); font-weight: bold; font-size: 16px; }
.badge-ala-carte { position: absolute; top: 20px; right: 20px; background: #f3f4f6; color: #6b7280; font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; border: 1px solid #e5e7eb; }

/* --- FAQ Section --- */
.faq-section { padding: 80px 0; background-color: #f9fafb; border-top: 1px solid #e5e7eb; }

.faq-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.faq-item summary { 
    padding: 20px; cursor: pointer; font-weight: 600; color: var(--heading-color); list-style: none; position: relative;
    display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--accent-color); }
.faq-item[open] summary::after { content: '-'; }
.faq-item p { padding: 0 20px 20px; margin: 0; color: var(--text-color); font-size: 15px; line-height: 1.6; border-top: 1px solid transparent; }
.faq-item[open] p { border-top-color: #f3f4f6; padding-top: 15px; }

/* --- CTA Final Section --- */
.cta-section-v4 { padding: 80px 0; background-color: var(--heading-color); color: #fff; position: relative; overflow: hidden; }
.cta-v4-layout { display: flex; align-items: center; gap: 60px; position: relative; z-index: 2; }
.cta-v4-content { flex: 1; }
.cta-v4-image { flex: 0.8; display: none; }
@media (min-width: 992px) { .cta-v4-image { display: block; } }
.cta-v4-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.1); }
.cta-title { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 15px; }
.cta-subtitle { font-size: 18px; margin-bottom: 30px; opacity: 0.9; max-width: 600px; }
.cta-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================
   5. STYLES RESTAURÉS (AUTRES PAGES)
   ========================================= */

/* --- Page Contact --- */
.contact-section { padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: flex-start; }
@media (min-width: 992px) { .contact-layout { grid-template-columns: 1.2fr 1fr; } }
.contact-column-right { display: flex; flex-direction: column; gap: 30px; }
.contact-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.contact-info { background-color: var(--secondary-color); padding: 30px; border-radius: 12px; }
.contact-info h3 { font-size: 22px; color: var(--heading-color); margin-bottom: 15px; }
.contact-info ul { list-style: none; }
.contact-info li { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.contact-info li:last-child { margin-bottom: 0; }
.contact-info li svg { width: 24px; height: 24px; color: var(--accent-color); flex-shrink: 0; }
.contact-info a, .contact-info span { text-decoration: none; color: var(--text-color); font-weight: 600; }

/* Formulaire */
.form-group { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-group label { margin-bottom: 8px; font-weight: 600; color: var(--heading-color); }
.form-group input, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #d1d5db; border-radius: 8px; font-family: var(--font-family); font-size: 16px; transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.2); }
.form-messages { padding: 15px 20px; margin-bottom: 20px; border-radius: 8px; font-weight: 600; text-align: center; display: none; }
.form-messages.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block; }
.form-messages.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block; }

/* --- Page Tarifs --- */


.toggle-label { color: #a0aec0; transition: color 0.3s ease; }
.toggle-label.active { color: var(--heading-color); }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary-color); transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(22px); }


.popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--accent-color); color: white; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; z-index: 2; }

.card-subtitle { font-size: 15px; color: var(--text-color); margin: 5px 0 15px 0; }
.price { font-size: 42px; font-weight: 700; color: var(--heading-color); margin: 10px 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 15px 0; }
.price small { font-size: 14px; font-weight: 400; color: #6b7f88; display: inline-block; margin-left: 5px; }
.card-description { min-height: 80px; margin-top: 20px; }
.features-list { list-style: none; padding: 0; margin: 20px 0; text-align: left; flex-grow: 1; }
.features-list li { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 10px; }
.features-list li svg { width: 20px; height: 20px; color: var(--accent-color); flex-shrink: 0; }


/* Tooltips Tarifs */
.tooltip-container { position: relative; }
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: #ccc; color: white; font-weight: bold; font-size: 11px; cursor: pointer; margin-left: auto; }
.tooltip-text { visibility: hidden; width: 220px; background-color: var(--heading-color); color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 14px; line-height: 1.5; pointer-events: none; }
.tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--heading-color) transparent transparent transparent; }
.tooltip-container .tooltip-text.visible { visibility: visible; opacity: 1; }

/* --- Page À Propos --- */
/* --- Page À Propos --- */
.team-section {
    padding: 80px 0;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
    align-items: start; /* Empêche les cartes de s'étirer verticalement si les textes ont des longueurs différentes */
}

@media (min-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.team-member {
    text-align: center; /* Centre l'image et les titres */
}

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

.team-member h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 5px; /* Petit ajustement pour coller un peu plus au rôle */
}

.team-member .member-role {
    font-size: 16px;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 15px; /* Espace avant le texte */
}

.team-member .member-bio {
    /* --- Modifications pour le texte justifié --- */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;           /* Coupe les mots automatiquement pour éviter les trous blancs */
    -webkit-hyphens: auto;   /* Compatibilité Safari */
    -ms-hyphens: auto;       /* Compatibilité Edge */
    
    /* --- Styles conservés et ajustés --- */
    font-style: normal;
    color: var(--text-color);
    max-width: 350px;
    margin: 0 auto;          /* Centre le bloc de texte lui-même */
    line-height: 1.6;        /* Aère légèrement les lignes pour la lisibilité */
}

.values-section { padding: 80px 0; background-color: var(--secondary-color); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
@media (min-width: 992px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { background-color: #fff; padding: 30px; border-radius: 12px; text-align: center; border: 1px solid #e5e7eb; }
.value-icon { margin-bottom: 20px; }
.value-icon svg { width: 48px; height: 48px; color: var(--accent-color); }
.value-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--heading-color); }

.history-section { padding: 80px 0; }
.history-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 992px) { .history-layout { grid-template-columns: 1fr 1.2fr; gap: 60px; } }
.history-image img { width: 100%; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.history-content h2 { font-size: 32px; font-weight: 700; color: var(--heading-color); margin-bottom: 20px; }
.history-content p { font-size: 16px; line-height: 1.8; margin-bottom: 15px; }

/* --- Pages Légales --- */
.legal-content { padding: 80px 0; background-color: var(--background-color); }
.legal-content .container { max-width: 900px; padding: 0 15px; }
@media (min-width: 992px) {
    .legal-content { background-color: var(--secondary-color); padding: 80px 0; }
    .legal-content .container { background-color: #fff; padding: 50px 60px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.07); border: 1px solid #e5e7eb; }
}
.legal-content h2 { font-size: 28px; font-weight: 700; color: var(--heading-color); margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { font-size: 16px; line-height: 1.8; margin-bottom: 20px; }
.legal-content ul { list-style-position: inside; padding-left: 10px; }
.legal-content a { color: var(--accent-color); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; }
.legal-content a:hover { border-bottom-color: var(--accent-color); }

/* --- Pages Solutions (Ancien style pour page détail si gardée) --- */
.page-hero { background-color: var(--secondary-color); padding: 60px 0; text-align: center; }
.page-title { font-size: 42px; color: var(--heading-color); margin-bottom: 15px; }
.page-subtitle { font-size: 18px; color: var(--text-color); max-width: 700px; margin: 0 auto; }
.service-section { padding: 80px 0; border-bottom: 1px solid #e5e7eb; }
.service-section:last-of-type { border-bottom: none; }
.service-section.alt-layout { background-color: var(--secondary-color); }
.service-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 992px) {
    .service-layout { grid-template-columns: 1fr 2fr; gap: 60px; }
    .service-section.alt-layout .service-layout { grid-template-columns: 2fr 1fr; }
    .service-section.alt-layout .service-icon { order: 2; }
}
.service-icon { text-align: center; }
.service-content h2 { font-size: 32px; font-weight: 700; color: var(--heading-color); margin-bottom: 15px; }
.service-content p { font-size: 16px; margin-bottom: 25px; line-height: 1.7; }
.service-content ul { list-style: none; }
.service-content ul li { display: flex; align-items: center; gap: 15px; font-weight: 600; margin-bottom: 10px; }
.service-content ul li svg { width: 24px; height: 24px; color: var(--accent-color); flex-shrink: 0; }

/* =========================================
   6. FOOTER & RESPONSIVE COMMUN
   ========================================= */
.main-footer { background-color: var(--heading-color); color: #a0aec0; padding: 60px 0 0 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 40px; }
.footer-column .footer-logo img { height: 40px; margin-bottom: 15px; filter: brightness(0) invert(1); }
.footer-tagline { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.social-links { display: flex; gap: 15px; }
.social-links a { color: #a0aec0; transition: color 0.3s ease; }
.social-links a:hover { color: #fff; }
.social-links svg { width: 24px; height: 24px; }
.footer-heading { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a, .footer-links span { color: #a0aec0; text-decoration: none; font-size: 14px; transition: color 0.3s ease; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #4a5568; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: #fff; text-decoration: none; }
.footer-legal-links a:hover { color: var(--accent-color); }

@media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } }

/* --- Testimonials (Commun) --- */
.testimonials-section { padding: 80px 0; background-color: var(--secondary-color); }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
.testimonial-card { background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.04); border: 1px solid #e5e7eb; }
.testimonial-quote { font-size: 16px; line-height: 1.7; font-style: italic; color: var(--text-color); margin: 0 0 25px 0; border-left: 3px solid var(--accent-color); padding-left: 20px; }
/* Mise en page du footer pour aligner le texte et le logo */
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espace entre infos et logo */
    gap: 15px;
}

/* Style spécifique du logo */
.company-logo {
    display: block;
    width: 150px;       /* Largeur imposée */
    height: auto;       /* Hauteur auto pour ne pas déformer l'image */
    object-fit: contain;
}
.author-name { font-weight: 600; color: var(--heading-color); }
.author-role { font-size: 14px; color: #6b7280; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Cookie Banner (Commun) --- */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--heading-color);
    color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 2000;
    transform: translateY(120%); transition: transform 0.5s ease-in-out;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 14px; max-width: 600px; }
.cookie-banner .cta-button { background-color: #fff; color: var(--heading-color); padding: 10px 20px; flex-shrink: 0; border: none; cursor: pointer; }
.cookie-banner .cta-button:hover { background-color: var(--secondary-color); }
.cookie-learn-more { color: #fff; font-weight: 600; text-decoration: underline; font-size: 14px; flex-shrink: 0; }
@media (max-width: 768px) { .cookie-banner { flex-direction: column; text-align: center; gap: 15px; padding: 15px; } }

/* --- Mobile Menu (Correctif Final) --- */
.hamburger { display: block; width: 25px; height: 3px; background: var(--heading-color); position: relative; transition: all 0.3s ease; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; width: 25px; height: 3px; background: var(--heading-color); left: 0; transition: all 0.3s ease; }
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

@media (max-width: 991px) {
    .main-header .container { position: relative; }
    .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .mobile-nav-toggle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; }
    
    .nav-open .main-nav { transform: translateX(0%); }
    .main-nav {
        display: flex;
        position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height));
        background: var(--background-color); flex-direction: column; justify-content: flex-start; align-items: center;
        padding: 40px 20px; transform: translateX(100%); transition: transform 0.3s ease-in-out; overflow-y: auto;
    }
    .nav-links { flex-direction: column; gap: 25px; flex-grow: 0; width: 100%; text-align: center; }
    .nav-links a { font-size: 20px; justify-content: center; }
    
    /* --- Menu Déroulant (Dropdown) --- */
    .dropdown { position: relative; display: inline-block; }

    /* Menu déroulant ouvert par défaut sur mobile SANS besoin de hover */
    .dropdown-content {
        display: block !important; /* Le !important force l'affichage */
        position: static; 
        box-shadow: none; 
        border: none; 
        padding: 10px 0;
        background: transparent;
    }

    .dropdown-content a {
        color: var(--text-color); 
        padding: 12px 20px; 
        text-decoration: none; 
        display: flex;
        font-size: 15px; /* Ajusté à 15px pour cohérence */
        font-weight: 500; 
        transition: background 0.2s; 
        align-items: center;
    }
    .dropdown-content a:hover { background-color: #f3f4f6; color: var(--accent-color); }

    /* C'EST ICI QUE LA MAGIE OPÈRE : 
       On active le survol UNIQUEMENT sur PC (min-width: 992px) */
    @media (min-width: 992px) {
        .dropdown:hover .dropdown-content { 
            display: block; 
            animation: fadeIn 0.3s ease; 
        }
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .dropdown > a svg { display: none; } /* Cache flèche sur mobile */
    
    /* Bouton Audit Remonté */
    .main-nav .header-cta { 
        display: block; width: 100%; max-width: 300px; 
        margin-top: 30px; margin-bottom: 20px; 
    }
    
    .nav-open .hamburger { background: transparent; }
    .nav-open .hamburger::before { transform: rotate(45deg); top: 0; }
    .nav-open .hamburger::after { bottom: 0; transform: rotate(-45deg); }
}


/* =========================================
   7. STYLES PAGES SOLUTIONS (TEMPLATE)
   ========================================= */

/* --- Solution Hero (Dark) --- */
.solution-hero {
    padding: 30px 0;
    background-color: #22262D;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (min-width: 992px) { .hero-content { grid-template-columns: 1.2fr 1fr; } }

.solution-badge {
    display: inline-block;
    background-color: rgba(255,255,255,0.1);
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.solution-hero h1 { font-size: 42px; color: #fff; margin-bottom: 20px; line-height: 1.1; }
.hero-description { 
    font-size: 18px; 
    color: #ffffff; /* MODIFIÉ : Blanc pur au lieu de #a0aec0 */
    margin-bottom: 35px; 
    max-width: 600px; 
    opacity: 0.9; /* Petite astuce : 90% d'opacité est moins agressif pour l'œil que 100% sur fond noir, tout en restant blanc */
}
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hero-meta { 
    font-size: 14px; 
    color: #e2e8f0; /* Blanc très légèrement grisé (plus lisible que l'ancien gris) */
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.hero-visual img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- NOUVEAU HEADER HERO (ICÔNE + TITRE) --- */

/* 1. Le conteneur principal qui met l'icône à côté du texte */
.solution-header-row {
    display: flex;
    align-items: flex-start; /* Aligné en haut (ou center si tu préfères) */
    gap: 25px;               /* Espace entre l'emoji et le texte */
    margin-bottom: 25px;     /* Espace avant la description */
}

/* 2. L'icône géante */
.solution-hero-icon {
    font-size: 96px;         /* Un peu plus gros que sur les cartes (58px -> 64px) */
    line-height: 1;
    flex-shrink: 0;          /* Empêche l'écrasement */
    padding-top: 5px;        /* Petit ajustement pour aligner visuellement avec le haut du badge */
}

/* 3. La colonne qui empile Badge + H1 */
.solution-title-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 4. Ajustements du Badge dans ce contexte */
.solution-title-stack .solution-badge {
    margin-bottom: 10px;     /* Espace entre le badge et le H1 */
    margin-left: 0;          /* Sécurité */
}

/* 5. Ajustement du H1 pour qu'il colle bien */
.solution-title-stack h1 {
    margin-bottom: 0;        /* On enlève la marge du bas du H1 car le conteneur gère l'espace */
    line-height: 1.1;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .solution-header-row {
        flex-direction: column; /* On empile sur mobile pour ne pas écraser */
        align-items: center;    /* Tout centré */
        text-align: center;
    }
    
    .solution-title-stack {
        align-items: center;    /* Badge et titre centrés */
    }
    
    .solution-hero-icon {
        margin-bottom: 15px;    /* Espace sous l'icône en mode mobile */
    }
}

/* --- Section Pain Points (3 colonnes) --- */
.solution-pain-points { padding: 60px 0; background: #fff; border-bottom: 1px solid #e5e7eb; }
.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.pain-item { padding: 20px; }
.pain-item.highlight { background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; }
.pain-item h3 { font-size: 18px; margin-bottom: 10px; color: var(--heading-color); }
.pain-item p { font-size: 15px; color: var(--text-color); margin: 0; }

/* --- Feature Blocks (Zig Zag) --- */
.feature-block { padding: 80px 0; background: #fff; }
.feature-block.alt-bg { background: #f9fafb; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }

.feature-layout { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; }

@media (min-width: 992px) {
    .feature-layout { grid-template-columns: 1fr 1fr; }
    .feature-layout.reverse .feature-text { order: 2; } /* Texte à droite */
    .feature-layout.reverse .m365-grid { order: 1; } /* Visuel à gauche */
    
    /* Cas spécial pour la section M365 où le texte prend toute la largeur */
    .feature-layout.reverse { 
        grid-template-columns: 1fr; 
    } 
    .feature-layout.reverse .feature-text { 
        text-align: center; 
        max-width: 100%; /* MODIFIÉ : Prend toute la largeur */
        margin: 0 auto; 
    }
    
    /* On garde juste le paragraphe d'intro centré et pas trop large pour la lecture */
    .feature-layout.reverse .feature-text > p {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

.feature-text h2 { font-size: 32px; margin-bottom: 20px; color: var(--heading-color); }
.feature-text p { font-size: 16px; margin-bottom: 20px; color: var(--text-color); }
.feature-image img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }

.feature-check-list { list-style: none; margin-top: 30px; }
.feature-check-list li { margin-bottom: 15px; font-size: 15px; position: relative; padding-left: 25px; }
.feature-check-list li::before { 
    content: '✓'; position: absolute; left: 0; top: 0; 
    color: var(--accent-color); font-weight: bold; 
}

/* --- Grille M365 Spécifique (Mise à jour 4 colonnes & Largeur) --- */
.m365-grid {
    display: grid;
    /* On abaisse le seuil à 210px.
       Le "1fr" va automatiquement les élargir pour qu'elles remplissent tout l'espace.
       Cela permet aux 4 cartes de tenir côte à côte même sur un petit PC portable. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px; /* Espacement standard */
    margin-top: 50px;
}

/* Sur les écrans larges (> 1200px), on force l'affichage en 4 colonnes strictes avec plus d'espace */
@media (min-width: 1200px) {
    .m365-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

.m365-item {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s;
    /* Flex pour centrer le logo et le titre */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.m365-item:hover { 
    transform: translateY(-5px); 
    border-color: var(--accent-color); 
}

/* Style des Logos SVG */
.m365-logo {
    height: 50px; /* Taille uniforme pour tous les logos */
    width: auto;  /* Largeur auto pour garder les proportions */
    margin-bottom: 15px;
    display: block;
}

.m365-item h4 { 
    font-size: 18px; 
    margin-bottom: 15px; 
    color: var(--heading-color); 
    border-bottom: 2px solid #f3f3f3; 
    padding-bottom: 10px;
    width: 100%; /* Trait de séparation sur toute la largeur */
    text-align: center;
}

.m365-item ul { 
    list-style: none; 
    padding-left: 0; 
    width: 100%; /* La liste prend toute la largeur */
    text-align: left; /* On garde le texte aligné à gauche pour la lecture */
}

.m365-item ul li { 
    font-size: 16px; 
    margin-bottom: 8px; 
    color: #555; 
    display: flex; 
    align-items: center; 
    gap: 10px;
}

.m365-item ul li::before { 
    content: "•"; 
    color: var(--accent-color); 
    font-weight: bold; 
    font-size: 18px; /* Puce un peu plus grosse */
}

/* Style Emojis Pain Points */
.pain-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

/* Badges de Certification (Page Bunker) */
.cert-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: default;
}
.cert-badge:hover {
    background-color: #e5e7eb;
    color: #222;
}

/* =========================================
   8. STYLES PAGE TARIFS (CORRIGÉS V9)
   ========================================= */

/* Hero Pricing (Dark) */
.pricing-hero {
    background-color: #22262D;
    color: #fff;
    padding: 80px 0 100px; /* Un peu moins de padding bas car on n'a plus le chevauchement */
    text-align: center;
    position: relative;
}
.pricing-badge {
    background: rgba(255,255,255,0.1); color: var(--accent-color);
    font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 50px;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; display: inline-block;
}
.page-title { font-size: 42px; color: #fff; margin-bottom: 15px; }
.page-subtitle { color: #a0aec0; font-size: 18px; max-width: 600px; margin: 0 auto 40px; }

/* Switch Toggle Design (CORRECTIF MOBILE) */
.pricing-toggle-wrapper {
    display: inline-flex; align-items: center; gap: 20px;
    background: rgba(255,255,255,0.05); padding: 10px 30px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap; justify-content: center; /* Permet le retour à la ligne si besoin */
}

/* Sur mobile, on empile ou on réduit les marges */
@media (max-width: 576px) {
    .pricing-toggle-wrapper {
        flex-direction: column;
        gap: 10px;
        border-radius: 20px;
        width: 100%;
    }
    .toggle-label { font-size: 14px; }
}

.toggle-label { color: #6b7280; font-weight: 600; font-size: 15px; transition: color 0.3s; white-space: nowrap; }
.toggle-label.active { color: #fff; }

.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(24px); }

/* Grille Tarifs (CORRECTIF ESPACEMENT) */
.pricing-section {
    background-color: #f9fafb;
    padding: 60px 0 100px; /* On remet du padding en haut */
    margin-top: 0; /* PLUS DE MARGE NÉGATIVE : Les cartes ne toucheront plus le hero */
    position: relative; z-index: 2;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    align-items: start;
}

/* Cartes de Prix Modernes */
.pricing-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.3s;
    position: relative;
    display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-10px); }

/* Carte Populaire (Active) */
.pricing-card.popular {
    border: 2px solid var(--accent-color);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.15);
    transform: scale(1.05);
    z-index: 3;
}
@media (max-width: 992px) { .pricing-card.popular { transform: none; } }

.popular-tag {
    background: var(--accent-color); color: #fff; text-align: center;
    font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 5px;
    letter-spacing: 1px;
}

.card-header { padding: 30px 30px 20px; text-align: center; border-bottom: 1px solid #f3f3f3; }
.pricing-card h3 { font-size: 22px; margin-bottom: 10px; color: var(--heading-color); }
.pricing-card .price { font-size: 42px; font-weight: 800; color: var(--heading-color); line-height: 1; margin-bottom: 5px; }
.pricing-card .period { font-size: 14px; color: #9ca3af; font-weight: 500; }
.card-desc { font-size: 14px; color: #6b7280; margin-top: 15px; line-height: 1.5; }

.card-body { padding: 30px; flex-grow: 1; }
.features-title { font-size: 13px; text-transform: uppercase; color: #9ca3af; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px; }

.features-list { list-style: none; padding: 0; margin: 0; }
.features-list li { font-size: 15px; color: var(--text-color); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }

.card-separator { height: 1px; background: #e5e7eb; margin: 20px 0; }

.options-list-small { list-style: none; padding: 0; }
.options-list-small li { font-size: 14px; color: #6b7280; margin-bottom: 8px; }
.no-options { font-size: 14px; color: #d1d5db; font-style: italic; }

.card-footer { padding: 0 30px 30px; }
.full-width { width: 100%; display: block; }

/* Boutons spécifiques cartes */
.cta-button.secondary { 
    background: #fff; border: 1px solid #e5e7eb; color: var(--heading-color);
}
.cta-button.secondary:hover { 
    border-color: var(--heading-color); color: var(--accent-color); 
}

.pricing-note { text-align: center; font-size: 13px; color: #9ca3af; margin-top: 40px; font-style: italic; }


/* --- BOUTON RETOUR EN HAUT (FORCE) --- */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-color, #00bfff);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 50px; /* Centre la flèche verticalement */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2147483647; /* Z-index maximum possible en CSS */
    transition: transform 0.3s ease;
}

#back-to-top.show {
    display: block !important; /* Le !important force l'affichage */
    animation: popIn 0.4s ease;
}

#back-to-top:hover {
    transform: scale(1.1);
}

@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* --- CORRECTION PAGES LÉGALES (CGU, Mentions, Confidentialité) --- */

.legal-section {
    background-color: #ffffff !important; /* Force le fond BLANC */
    width: 100%;
    padding: 60px 0;
}

/* Le conteneur de texte */
.legal-content {
    width: 100%;
    background: transparent; /* Pas de gris */
    color: #333;
    padding: 0 15px; /* Ajoute une marge interne pour ne pas coller au bord */
}

/* Style des titres */
.legal-content h2 {
    color: #000;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 700;
}

/* Style des paragraphes */
.legal-content p {
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: justify; /* Plus propre pour du juridique */
}

/* Style des listes */
.legal-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 5px;
}


/* Nouveau style pour le bouton dans les cartes */
.card-link-btn {
    /* 1. LA CORRECTION DE LARGEUR */
    align-self: flex-start; /* Empêche le bouton de s'étirer */
    width: auto;            /* S'adapte au contenu du texte */
    
    /* 2. DESIGN & ESPACEMENT */
    margin-top: 20px;
    padding: 12px 24px;
    
    /* 3. COULEURS (Noir) */
    background-color: #22262D; 
    color: #fff;
    border: 1px solid #22262D;
    
    /* 4. DÉTAILS */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* AU SURVOL */
.card-link-btn:hover {
    background-color: #fff;   /* Fond blanc */
    color: #22262D;           /* Texte noir */
    border-color: #22262D;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Optionnel : Pour s'assurer que le bouton reste bien en bas si les cartes ont des tailles différentes */
.catalog-card {
    display: flex;
    flex-direction: column;
}

.catalog-desc {
    flex-grow: 1; /* Le texte pousse le reste vers le bas */
}


/* --- Menu Secondaire Sticky (Solutions) --- */
.solution-sub-nav {
    /* On le fait coller */
    position: sticky; 
    position: -webkit-sticky; /* Pour Safari */
    
    /* C'est ICI que tout se joue : */
    /* Cela dit au menu : "Colle-toi à 80px du haut de l'écran" */
    /* (pour laisser la place au Header principal qui fait environ 80px) */
    top: 80px; 
    
    /* Nouvelle couleur de fond (Gris-bleu très léger) */
    background-color: #F4F7FA; 
    border-bottom: 1px solid #dae1e9; /* Bordure plus foncée pour souligner */
    border-top: 1px solid #dae1e9;    /* Bordure en haut pour encadrer */
    
    z-index: 990; /* Juste en dessous du header principal (souvent 1000) */
    padding: 0;
    margin-bottom: 0px; /* Un peu d'espace avant le contenu suivant */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Ombre douce */
}

.sub-nav-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espace entre les boutons */
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 20px;
    
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sub-nav-container::-webkit-scrollbar {
    display: none;
}

.sub-nav-link {
    display: inline-block;
    padding: 15px 20px;
    color: #64748b; /* Gris texte plus doux */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.sub-nav-link:hover {
    color: var(--accent-color, #007bff);
    background-color: rgba(0,0,0,0.02); /* Léger effet au survol */
}

/* Style pour l'onglet actif */
.sub-nav-link.active {
    color: var(--accent-color, #007bff);
    border-bottom-color: var(--accent-color, #007bff);
    font-weight: 700;
    background-color: white; /* L'onglet actif ressort en blanc ! */
    border-radius: 6px 6px 0 0; /* Petit arrondi en haut style "dossier" */
}

/* Ajustement Mobile pour le menu "sticky" */
@media (max-width: 768px) {
    .solution-sub-nav {
        top: 80px; /* Ajustez selon la hauteur réelle de votre header mobile */
    }

    .sub-nav-container {
        /* On répartit l'espace équitablement entre le premier et le dernier élément */
        justify-content: space-between; 
        padding: 0 10px; /* Marges très fines sur les côtés de l'écran */
    }

    .sub-nav-link {
        /* On réduit la taille du texte */
        font-size: 12px; 
        /* On réduit fortement l'espace autour du texte */
        padding: 15px 4px; 
        /* On s'assure que le texte ne casse pas sur deux lignes si possible */
        white-space: nowrap; 
    }
    
    /* Petite astuce : réduire la taille des emojis uniquement sur mobile */
    /* Si vos emojis sont directement dans le texte, cela affectera tout le lien */
}

/* --- Correctif Formulaire Contact Mobile --- */
.form-row-dual {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes sur PC */
    gap: 20px;
}

@media (max-width: 768px) {
    .form-row-dual {
        grid-template-columns: 1fr;
        gap: 0; /* IMPORTANT : On supprime l'écart de grille car le champ a déjà une marge en bas */
    }
}

/* --- CENTRAGE BOUTON MOBILE UNIQUEMENT --- */
@media (max-width: 768px) {
    .hero-buttons {
        /* Active le mode flexible pour pouvoir aligner */
        display: flex;
        
        /* Centre les éléments horizontalement */
        justify-content: center;
        
        /* Empile les éléments (Bouton en haut, texte en bas) */
        flex-direction: column;
        
        /* Centre l'alignement vertical (important si column) */
        align-items: center;
        
        /* Centre le texte à l'intérieur */
        text-align: center;
        
        /* Espace entre le bouton et le texte */
        gap: 20px; 
    }

    /* Optionnel : Pour s'assurer que le texte "Windows, Mac..." est bien centré */
    .hero-meta {
        justify-content: center;
    }
}

/* --- NOUVEAU : PONT DE TRANSITION --- */
.stats-intro {
    text-align: center;
    margin-top: 80px;      /* Gros espace pour séparer des problèmes */
    margin-bottom: 30px;
}

.stats-intro h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.stats-intro p {
    font-size: 16px;
    color: #6b7280;
}

/* --- MODIFICATION : BARRE DE STATS "RESULTATS" --- */
/* On surcharge la classe .stats-bar existante avec .results-mode */
.stats-bar.results-mode {
    background-color: #22262D; /* Fond Sombre (ta couleur heading) */
    border-radius: 16px;
    padding: 40px;
    color: #fff;              /* Texte blanc */
    border-top: none;         /* On enlève la ligne grise du haut */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    
    /* Grille */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 0;
}

/* On adapte les textes à l'intérieur pour le fond sombre */
.stats-bar.results-mode .stat-item h4 {
    color: var(--accent-color); /* Le chiffre en bleu cyan */
    font-size: 42px;
    margin-bottom: 5px;
}

.stats-bar.results-mode .stat-item p {
    color: #e5e7eb; /* Blanc légèrement grisé pour la lisibilité */
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* --- NOUVEAU STYLE TIMELINE (ALIGNEMENT GAUCHE) --- */

/* 1. Le conteneur de l'en-tête (Icône + Titres) */
.step-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px; /* Espace avant le paragraphe */
    text-align: left;    /* Force l'alignement à gauche */
}

/* 2. L'icône "Clean" (Sans le rond de fond) */
.step-icon-clean {
    font-size: 48px;     /* Grande taille comme sur les solutions */
    line-height: 1;
    flex-shrink: 0;      /* Ne s'écrase pas */
    /* On s'assure qu'il n'y a pas de fond/padding résiduel */
    background: transparent;
    width: auto;
    height: auto;
    padding: 0;
}

/* 3. La colonne de titres */
.step-titles-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 4. Ajustements des textes existants */
.timeline-step {
    text-align: left; /* S'assure que tout le texte de la carte est à gauche */
    padding: 30px;    /* Garde un bon espace interne */
}

.timeline-step h3 {
    margin-bottom: 0; /* Le header gère l'espace */
    font-size: 22px;
}

.step-phase {
    margin-bottom: 5px;
    display: block;
}

/* Ajustement Responsive */
@media (max-width: 768px) {
    /* Si tu veux garder l'alignement à gauche sur mobile, ne touche à rien. */
    /* Si tu préfères centrer sur mobile, décommente ci-dessous : */
    /*
    .step-header-row { flex-direction: column; text-align: center; }
    .step-titles-stack { align-items: center; }
    .timeline-step { text-align: center; }
    */
}

/* --- NOUVEAU DESIGN TESTIMONIALS --- */

/* La Grille */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* La Carte Pro */
.testimonial-card-pro {
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Ombre douce */
    border: 1px solid #f3f4f6;
    position: relative; /* Pour placer l'icône de fond */
    overflow: hidden;   /* Pour couper l'icône si elle dépasse */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.testimonial-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

/* Le Guillemet Géant en fond (Décoratif) */
.quote-icon-bg {
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 120px;
    font-family: serif; /* Police avec empattement pour le style */
    color: var(--accent-color);
    opacity: 0.1; /* Très transparent */
    pointer-events: none;
    line-height: 1;
}

/* Les Étoiles */
.review-stars {
    color: #FBBF24; /* Couleur Or / Jaune */
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* Le Texte */
.testimonial-quote {
    font-size: 18px;
    line-height: 1.6;
    color: var(--heading-color);
    font-style: italic;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* L'Auteur */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto; /* Pousse l'auteur tout en bas */
}

/* L'Avatar (Initiales) */
.author-avatar {
    width: 50px;
    height: 50px;
    background-color: #E0F2FE; /* Fond bleu très clair */
    color: var(--accent-color); /* Texte bleu accent */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* Variation de couleur pour le 2ème avatar (Optionnel) */
.author-avatar.style-2 {
    background-color: #F3F4F6; /* Gris clair */
    color: #4B5563;            /* Gris foncé */
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 700;
    color: var(--heading-color);
    font-size: 16px;
    margin: 0;
}

.author-role {
    font-size: 13px;
    color: #9ca3af; /* Gris plus clair */
    margin: 0;
}

/* --- GRILLE FAQ 2 COLONNES (LARGEUR CORRIGÉE) --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile : 1 colonne */
    gap: 30px; /* Même écart que les témoignages */
    width: 100%; /* Prend toute la largeur du conteneur */
    margin-top: 50px;
}

@media (min-width: 992px) {
    .faq-grid {
        grid-template-columns: 1fr 1fr; /* Desktop : 2 colonnes équitables */
        align-items: start; /* Les colonnes ne s'étirent pas inutilement */
        gap: 30px; /* Même écart que les témoignages */
    }
}

/* Conteneur des colonnes */
.faq-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.city-hero {
            background-color: #f3f4f6;
            padding: 100px 0 60px;
            text-align: left;
        }
        .city-badge {
            background: #e0f2fe; color: #0284c7; 
            padding: 5px 15px; border-radius: 4px; 
            font-weight: 700; font-size: 13px; text-transform: uppercase;
            display: inline-block; margin-bottom: 20px;
        }
        .local-zones {
            display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
        }
        .zone-tag {
            background: #fff; border: 1px solid #e5e7eb; 
            padding: 5px 12px; border-radius: 20px; 
            font-size: 14px; color: #6b7280;
        }
        .city-intro-grid {
            display: grid; grid-template-columns: 1fr; gap: 50px; align-items: center; padding: 80px 0;
        }
        @media (min-width: 992px) {
            .city-intro-grid { grid-template-columns: 1fr 1fr; }
            .city-intro-text { order: 2; }
            .city-intro-map { order: 1; }
        }
        .map-frame {
            width: 100%; height: 400px; border-radius: 16px; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 0;
        }