/* ============================================================================
   CSS SOLUTION PAGE - ACLG
   Date : 18/10/2025
   Extraction styles inline → CSS externe
   Standard SXO 2025
   ============================================================================ */

/* Variables CSS pour cohérence globale */
:root {
    --color-primary: #00557f;
    --color-primary-dark: #004466;
    --color-secondary: #b8f500;
    --color-dark: #1a1b1e;
    --color-text: #666;
    --color-text-dark: #333;
    --color-white: #ffffff;
    --color-bg-light: #f8f9fa;

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.1);

    --radius-sm: 8px;
}

/* ============================================================================
   SECTION PRÉSENTATION
   ============================================================================ */
.solution-description-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.solution-cta-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 30px;
    border-radius: var(--radius-sm);
    margin-top: 30px;
}

.solution-cta-primary h3 {
    color: var(--color-white);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
}

.solution-cta-btn-white {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white) !important;
    margin-right: 10px;
}

.solution-cta-btn-outline {
    background: transparent !important;
    border: 2px solid var(--color-white) !important;
    color: var(--color-white) !important;
}

.solution-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.solution-media-featured {
    box-shadow: var(--shadow-md);
}

/* Container responsive pour vidéos iframe 16:9 */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: #000;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================================
   SECTION AVANTAGES CLÉS
   ============================================================================ */
.solution-benefits-section {
    background: var(--color-bg-light);
}

.solution-benefits-desc {
    font-size: 16px;
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto;
}

.benefit-card {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--radius-sm);
    text-align: center;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.benefit-card .icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.benefit-card p {
    color: var(--color-text);
    line-height: 1.6;
}

/* ============================================================================
   SECTION CONTENU DÉTAILLÉ
   ============================================================================ */
.solution-content-detail {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    max-width: 100%;
}

.solution-content-detail h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.solution-content-detail h3 {
    font-size: 22px;
    font-weight: 600;
    color: #212121;
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.solution-content-detail h4 {
    font-size: 18px;
    font-weight: 600;
    color: #212121;
    margin-top: 20px;
    margin-bottom: 10px;
}

.solution-content-detail p {
    margin-bottom: 15px;
}

.solution-content-detail ul,
.solution-content-detail ol {
    margin: 20px 0;
    padding-left: 30px;
}

.solution-content-detail ul li,
.solution-content-detail ol li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.solution-content-detail strong {
    font-weight: 600;
    color: #212121;
}

.solution-content-detail em {
    font-style: italic;
}

/* Tables dans contenu */
.solution-content-detail table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.solution-content-detail table th,
.solution-content-detail table td {
    padding: 12px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.solution-content-detail table th {
    background: var(--color-bg-light);
    font-weight: 600;
    color: var(--color-primary);
}

/* Images dans contenu */
.solution-content-detail img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 20px 0;
}

/* ============================================================================
   SECTION FONCTIONNALITÉS DÉTAILLÉES
   ============================================================================ */
.features-detailed-bg {
    background: var(--color-white);
}

.features-detailed-desc {
    font-size: 16px;
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto;
}

.feature-detail-card {
    background: var(--color-bg-light);
    padding: 25px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.feature-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.feature-detail-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.feature-detail-card h4 i {
    font-size: 24px;
    margin-right: 10px;
}

.feature-detail-card ul {
    margin: 0;
    padding-left: 20px;
}

.feature-detail-card ul li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--color-text);
}

/* ============================================================================
   SECTION PRÉREQUIS & COMPATIBILITÉ
   ============================================================================ */
.prerequisites-bg {
    background: var(--color-bg-light);
}

.prerequisites-desc {
    font-size: 16px;
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto 40px;
}

.prerequisite-category {
    background: var(--color-white);
    padding: 25px;
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
}

.prerequisite-category h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.prerequisite-category h4 i {
    font-size: 24px;
    margin-right: 10px;
}

.prerequisite-list {
    margin: 0;
    padding-left: 25px;
    list-style: disc;
}

.prerequisite-list li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--color-text);
}

.compatibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.compatibility-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    padding: 20px;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid #e0e0e0;
}

.compatibility-item i {
    font-size: 36px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.compatibility-item strong {
    display: block;
    font-size: 16px;
    color: var(--color-text-dark);
}

/* ============================================================================
   SECTION TÉMOIGNAGES
   ============================================================================ */
.testimonials-bg {
    background: var(--color-white);
}

.testimonial-quote {
    background: var(--color-bg-light);
    padding: 30px;
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.testimonial-card {
    background: var(--color-bg-light);
    padding: 30px;
    border-radius: var(--radius-sm);
    height: 100%;
    position: relative;
}

.quote-icon {
    font-size: 48px;
    color: var(--color-primary);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 20px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    font-style: italic;
    margin: 40px 0 20px;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 15px;
}

.testimonial-author-block {
    border-top: 2px solid var(--color-primary);
    padding-top: 15px;
}

.testimonial-author-name {
    font-weight: 600;
    color: #212121;
    margin-bottom: 5px;
}

.testimonial-author-info {
    font-size: 14px;
    color: var(--color-text);
}

.testimonial-company {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
}

/* ============================================================================
   SECTION PROCESS
   ============================================================================ */
.process-bg {
    background: var(--color-bg-light);
}

.process-desc {
    font-size: 16px;
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto 40px;
}

.process-step {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.process-step-number {
    position: absolute;
    top: -15px;
    left: 30px;
    background: var(--color-primary);
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,85,127,0.3);
}

.process-step h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 15px;
    padding-left: 0;
}

.process-step p {
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================================
   SECTION PRICING
   ============================================================================ */
.pricing-bg {
    background: var(--color-white);
}

.pricing-desc {
    font-size: 16px;
    color: var(--color-text);
    max-width: 800px;
    margin: 0 auto 40px;
}

.pricing-info-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 40px;
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--color-white);
}

.pricing-info-box h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--color-white);
}

.pricing-info-box p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.pricing-info-box .readon {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
}

.pricing-factors {
    margin-top: 40px;
}

.pricing-factor-card {
    background: var(--color-bg-light);
    padding: 25px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.pricing-factor-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.pricing-factor-card h5 i {
    margin-right: 10px;
}

.pricing-factor-card p {
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================================
   SECTION À QUI S'ADRESSE (TARGET)
   ============================================================================ */
.target-box {
    background: var(--color-bg-light);
    padding: 30px;
    border-radius: var(--radius-sm);
    height: 100%;
}

.target-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.target-list {
    list-style: none;
    padding: 0;
}

.target-item {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.target-item-last {
    border-bottom: none;
}

.target-icon {
    color: var(--color-primary);
    margin-right: 10px;
}

/* ============================================================================
   SECTION SUPPORT & FORMATION
   ============================================================================ */
.support-item {
    background: var(--color-white);
    padding: 30px 20px;
    border-radius: var(--radius-sm);
    height: 100%;
}

.support-item .icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.support-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #212121;
}

.support-item p {
    color: var(--color-text);
    line-height: 1.6;
}

/* ============================================================================
   SECTION MODULES
   ============================================================================ */
.module-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.module-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #212121;
}

.module-content {
    padding: 20px 0;
}

.module-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 15px;
}

.module-content ul,
.module-content ol {
    margin: 15px 0;
    padding-left: 25px;
}

.module-content ul li,
.module-content ol li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--color-text);
}

.module-content strong {
    font-weight: 600;
    color: #212121;
}

/* Responsive */
@media (max-width: 768px) {
    .module-content {
        padding: 15px 0;
    }
}

/* ============================================================================
   MODAL STYLES
   ============================================================================ */
.modal-demo {
    max-width: 800px;
}

.modal-intro {
    margin-bottom: 20px;
    color: var(--color-text);
    line-height: 1.6;
}

.modal-video-hidden {
    display: none;
}

.modal-cta {
    margin-top: 20px;
    text-align: center;
}

.meetings-iframe-container {
    min-height: 700px;
    width: 100%;
}

#showDemo .modal {
    max-width: 90vw;
    width: 1200px;
}

#showDemo .modal-body {
    padding: 0;
}

#showDemo iframe {
    width: 100%;
    height: 70vh;
    min-height: 500px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .benefit-card,
    .feature-detail-card,
    .prerequisite-category,
    .process-step {
        padding: 20px;
    }

    .benefit-card .icon {
        font-size: 36px;
    }

    .solution-cta-primary {
        padding: 20px;
    }

    .solution-cta-btn-white,
    .solution-cta-btn-outline {
        margin-right: 0;
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }

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