/*
Theme Name: O&N Innovations
Theme URI: https://oandn.tech
Author: O&N Innovations
Description: Thème WordPress basé sur la maquette HTML/CSS one-page O&N Innovations.
Version: 1.0
*/
/* ========================================= */
        /* 1. CHARTRE GRAPHIQUE O&N */
        /* ========================================= */
        :root {
            --color-dark-bg: #FFFFFF; /* Couleur 1 : Blanc */
            --color-section-bg: #F8F9FA; /* Couleur 2 : Gris Perle */
            --color-card-bg: #FFFFFF; 
            --color-light-text: #2C3E50;
            --color-sub-text-dark-bg: #5F7C9A; 
            --color-accent-primary: #FFB84C; /* Ambre */
            --color-accent-secondary: #4A90E2; /* Bleu */
            --font-title: 'Montserrat', sans-serif;
            --font-body: 'Open Sans', sans-serif;
            
            /*fond noir*/
            /*--color-dark-bg: #1D1F23; *//* Couleur 1 : Gris Charbon */
            /*--color-section-bg: #2A2D35; *//* Couleur 2 : Gris Moyen Profond */
            /*--color-card-bg: #353840; */
            /*--color-light-text: #FFFFFF;*/
            /*--color-sub-text-dark-bg: #B0B3B8; */
            /*--color-accent-primary: #FFB84C; *//* Ambre */
            /*--color-accent-secondary: #4A90E2; *//* Bleu */
           /* --font-title: 'Montserrat', sans-serif;*/
            /*--font-body: 'Open Sans', sans-serif;*/

            /*fond blanc*/
            /*--color-light-bg: #FFFFFF; *//* FOND 1 (Blanc) */
            /*--color-section-bg: #F8F9FA; *//* FOND 2 (Gris Perle) */
            /*--color-dark-text: #2C3E50; *//* Texte Principal (Bleu Nuit) */
            /*--color-sub-text: #5F7C9A; *//* Texte Secondaire (Gris-Bleu) */
            /*--color-card-bg: #FFFFFF; *//* Fond des cartes (Blanc) */
            
            /* Accents conservés */
           /* --color-accent-primary: #FFB84C; *//* Ambre */
           /* --color-accent-secondary: #4A90E2;*/ /* Bleu */
            
            /* Polices conservées */
            /*--font-title: 'Montserrat', sans-serif;*/
            /*--font-body: 'Open Sans', sans-serif;*/

            
        }

        /* Styles Généraux et CTA */
        body { font-family: var(--font-body); background-color: var(--color-dark-bg); color: var(--color-light-text); margin: 0; line-height: 1.6; overflow-x: hidden; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        h1, h2, h3 { font-family: var(--font-title); font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; }
        .section { padding: 80px 0; position: relative; }
        /* ========================================= */
        /* SÉPARATEUR DE SECTION GLOBAL (LE TRAIT BLEU) */
        /* ========================================= */
        .section + .section:not(.cta-final) {
            border-top: 2px solid var(--color-accent-secondary);
        }
        .cta-button { 
            display: inline-block; padding: 15px 40px; font-size: 18px; 
            background-color: var(--color-accent-primary); color: var(--color-dark-bg); 
            border: none; border-radius: 4px; font-weight: 700; 
            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; text-decoration: none; 
            box-shadow: 0 4px 15px rgba(255, 184, 76, 0.4); 
        }
        .cta-button:hover { background-color: #FFCF7E; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 184, 76, 0.6); }
        .cta-button-secondary {
            background-color: transparent;
            color: var(--color-accent-secondary);
            border: 2px solid var(--color-accent-secondary);
            box-shadow: none;
            margin-left: 20px;
        }
        .cta-button-secondary:hover {
            background-color: var(--color-accent-secondary);
            color: var(--color-dark-bg);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
        }

        /* Header (Gris Charbon) */
        .header { 
            background: var(--color-section-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
            /* toujours visible, collé en haut */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            display: flex; 
            justify-content: center; /* MODIFIÉ */
            align-items: center;
            padding: 20px 40px;
            gap: 40px; /* AJOUTÉ : Espace entre logo, nav, et boutons */
        }
        
        .logo { 
            /* Supprimer les styles de texte, car c'est maintenant une image */
            /* font-size: 28px; font-weight: 900; color: var(--color-light-text); */ 
            /* letter-spacing: 2px; text-decoration: none; */
            
            display: flex; /* Permet un bon alignement si l'image a des marges ou si d'autres éléments sont ajoutés */
            align-items: center; /* Centre verticalement l'image */
            height: 50px; /* Définit la hauteur du conteneur du logo, correspondant à l'image */
            transition: transform 0.3s ease; /* Ajoute une transition pour le survol */
        }
        .logo:hover { 
            /* Le text-shadow n'est plus pertinent pour une image */
            /* text-shadow: 0 0 10px rgba(255, 184, 76, 0.7); */
            transform: scale(1.05); /* Effet léger de zoom au survol */
        }
        /* Style spécifique pour l'image à l'intérieur du lien .logo */
        .logo img {
            height: 100%; /* L'image prend 100% de la hauteur de son parent (.logo) */
            width: auto; /* Maintient les proportions */
            display: block; /* Supprime l'espace sous l'image */
        }
        .nav { 
            /* margin-left: auto; */ /* SUPPRIMÉ */
            display: flex; /* AJOUTÉ */
            gap: 30px; /* AJOUTÉ : Espace entre les liens du menu */
        }
        .nav a { 
            color: var(--color-sub-text-dark-bg); 
            text-decoration: none; 
            transition: color 0.3s; 
            /* margin-left: 30px; */ /* SUPPRIMÉ */
            font-weight: 600; 
        }
        .nav a:hover { color: var(--color-accent-primary); }
        .header .cta-button { margin-left: 30px; padding: 10px 25px; font-size: 16px; box-shadow: none; }


        /* ========================================= */
        /* 2. HERO SECTION (LISIBILITÉ CORRIGÉE) */
        /* ========================================= */
        .hero {
            background-color: var(--color-dark-bg); /* FOND 1 */
            background-image: url('https://oandn.tech/wp-content/uploads/2025/10/concept-innovation-financement_670147-20591.avif');
            background-size: cover;          
            background-position: center center; 
            background-repeat: no-repeat;    
            text-align: center; padding: 180px 0 120px;
            
            /* Ajout pour la superposition */
            position: relative; 
            z-index: 1; 
        }

        /* SUPERPOSITION SOMBRE (POUR LE CONTRASTE) */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(29, 31, 35, 0.7); /* Gris Charbon à 70% d'opacité */
            z-index: -1; 
        }

        .hero-tagline { 
            font-family: var(--font-title); font-weight: 900; font-size: 64px; 
            color: #FFFFFF; /* CORRIGÉ : Forcé en Blanc */
            line-height: 1.2; letter-spacing: 2px;
            margin-bottom: 30px; text-transform: uppercase;
        }
        /* NOUVEAU : Met en surbrillance le mot "Sécuriser" en Ambre */
        .hero-tagline .highlight-word {
            color: var(--color-accent-primary);
        }
        .hero-intro { 
            max-width: 700px; margin: 0 auto 50px auto; 
            color: #E0E0E0; /* CORRIGÉ : Forcé en Gris Clair */
            font-size: 20px; line-height: 1.7;
            text-align: justify; /* Maintient la justification */
        }
        .hero-intro strong { 
            color: var(--color-accent-primary); /* Reste Ambre (Correct) */
            font-weight: 700; /* Remis en gras pour l'emphase */
        }
        .hero-cta-container { margin-top: 50px; }
        
        /* Styles pour l'animation du slogan (Inchangé) */
        @keyframes sloganFadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .hero-tagline span {
            display: inline-block; 
            opacity: 0; 
            animation-name: sloganFadeInUp;
            animation-duration: 0.8s;
            animation-timing-function: ease-out;
            animation-fill-mode: both;
        }
        .hero-tagline span:nth-child(1) { animation-delay: 0.2s; } 
        .hero-tagline span:nth-child(2) { animation-delay: 0.4s; } 
        .hero-tagline span:nth-child(3) { animation-delay: 0.6s; } 
        .hero-tagline .dot { 
            animation: none !important; 
            transform: none !important; 
            opacity: 1 !important; 
        }

        /* ========================================= */
        /* 3. NOTRE MISSION (AVEC ANIMATIONS) */
        /* ========================================= */
        #mission { 
            background-color: var(--color-section-bg); /* FOND 2 */ 
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
            padding-bottom: 100px; 
            clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
            padding-top: 120px; 
            text-align: center;
            
            /* -- AJOUTS POUR LA BORDURE DIAGONALE -- */
            position: relative; /* Nécessaire pour le pseudo-élément */
            z-index: 1; /* S'assure que le contenu est au-dessus de la bordure */
            /* -- FIN DES AJOUTS -- */
        }
        
        .mission-title { 
            font-size: 42px !important; color: var(--color-light-text); 
            max-width: 900px; margin: 0 auto 30px auto; line-height: 1.2;
        }
        .mission-intro-text { 
            font-size: 18px; color: var(--color-sub-text-dark-bg); 
            max-width: 800px; margin: 0 auto 60px auto; 
        }
        .mission-intro-text strong { color: var(--color-accent-primary); font-weight: 700; }
        .mission-subpoints-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 30px; max-width: 1100px; margin: 0 auto; text-align: left; 
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .mission-subpoint {
            background-color: var(--color-card-bg); 
            padding: 30px; border-radius: 6px;
            border-left: 4px solid var(--color-accent-secondary);
            /*opacity: 0; animation-name: fadeInUp; animation-duration: 0.8s; 
            animation-timing-function: ease-out; animation-fill-mode: both; */
        }
        /*.mission-subpoints-grid > .mission-subpoint:nth-child(1) { animation-delay: 0.2s; }
        .mission-subpoints-grid > .mission-subpoint:nth-child(2) { animation-delay: 0.4s; }
        .mission-subpoints-grid > .mission-subpoint:nth-child(3) { animation-delay: 0.6s; }*/

        .mission-subpoint h3 { 
            color: var(--color-accent-secondary) !important; font-size: 24px !important;
            margin-top: 0; margin-bottom: 15px; text-transform: uppercase !important; 
            letter-spacing: 1px !important; font-weight: 700 !important;
        }
        .mission-subpoint p { color: var(--color-sub-text-dark-bg); font-size: 15px; margin: 0; }
        .mission-subpoint strong { 
            color: var(--color-accent-primary); /* CORRIGÉ : Ambre */
            font-weight: 700; /* Un peu plus gras pour ressortir */
            font-style: normal; /* S'assurer qu'il n'est pas italique */
        }

        /* ========================================= */
        /* 4. NOS 5 PILIERS */
        /* ========================================= */
        .piliers {
            background-color: var(--color-dark-bg); /* FOND 1 */
            /*clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);*/
            padding-top: 120px; 
            text-align: center;
        }
        .piliers-grid { 
            display: grid; 
            grid-template-columns: repeat(5, 1fr); 
            gap: 20px; 
        }
        .pilier-item {
            background-color: var(--color-section-bg); /* FOND 2 */
            padding: 20px;
            border-radius: 8px;
            text-align: left;
            border-top: 3px solid var(--color-accent-primary);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .pilier-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 184, 76, 0.15); }
        .pilier-number { 
            color: var(--color-accent-primary); 
            text-shadow: 0 0 10px rgba(255, 184, 76, 0.5); 
            font-weight: 900; font-size: 48px; line-height: 1; margin-bottom: 5px; display: block;
        }
        .pilier-item h3 { border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-accent-secondary); font-size: 18px !important; }
        .pilier-benefice { color: var(--color-sub-text-dark-bg); font-size: 14px; font-style: italic;}
        .pilier-benefice strong { font-weight: bold; font-style: normal; color: var(--color-accent-primary); } /* Style pour le mot "Bénéfice" */

        /* ========================================= */
        /* 5. NOTRE OFFRE (PRODUITS O&N - ENRICHIS) */
        /* ========================================= */
        #offre {
            background-color: var(--color-section-bg); /* FOND 2 */
            padding: 80px 0; 
            text-align: center;
        }
        #offre h2 {
            font-size: 36px !important; 
            margin-bottom: 60px;
        }
        .offre-grid-row {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
        }
        .offre-grid-row .solution-card {
             flex: 1; 
             max-width: 350px; 
             display: flex; 
             flex-direction: column;
        }
        
        .solution-card {
            background-color: var(--color-dark-bg); /* FOND 1 */
            padding: 30px;
            border-radius: 6px;
            text-align: left;
            border: 1px solid rgba(74, 144, 226, 0.2); 
            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }
        .solution-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(74, 144, 226, 0.1); 
            border-color: var(--color-accent-secondary); 
        }
        .solution-card h3 {
            color: var(--color-accent-primary); 
            font-size: 24px !important;
            margin: 0;
            border: none;
            text-transform: none !important; 
            letter-spacing: normal !important;
            font-weight: 700 !important;
        }
        .solution-tagline {
            color: var(--color-light-text);
            font-family: var(--font-body);
            font-weight: 600;
            text-transform: none;
            font-size: 16px;
            letter-spacing: 0;
            margin-top: 10px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 184, 76, 0.3); /* Ligne Ambre */
        }
        .solution-features-list { padding: 0; margin: 0; list-style: none; }
        .solution-features-list li { margin-bottom: 20px; }
        .feature-title {
            display: block;
            color: var(--color-light-text);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        .feature-description {
            color: var(--color-sub-text-dark-bg);
            font-size: 14px;
            line-height: 1.5;
        }
        .feature-description strong { 
            color: var(--color-accent-primary); /* CORRIGÉ : Ambre */
            font-weight: 700; /* Un peu plus gras pour ressortir */
            font-style: normal; /* S'assurer qu'il n'est pas italique */
        }
        .solution-icon {
            font-size: 48px; color: var(--color-accent-secondary); 
            margin-bottom: 20px; display: block; text-align: left; 
            text-shadow: 0 0 15px rgba(74, 144, 226, 0.5); 
        }

        /* ========================================= */
        /* 6. NOTRE CADRE D'ENGAGEMENT (STYLE LISTE À PUCES) */
        /* ========================================= */
        .approche-strategique {
            background-color: var(--color-dark-bg); /* FOND 1 */
            /*border-top: 2px solid var(--color-accent-secondary);*/
            text-align: center; 
        }
        /* Style de l'intro text reste le même */

        /* CARTE UNIQUE (Fond) */
        .engagement-card-unique {
            background-color: var(--color-section-bg); /* FOND 2 */
            padding: 40px 50px; /* Padding généreux */
            border-radius: 8px;
            text-align: left;
            position: relative; 
            border-left: 4px solid var(--color-accent-primary); /* Bordure Ambre */
            max-width: 900px; 
            margin: 60px auto 0 auto; 
        }
        
        /* LISTE À PUCES (Remplace l'ancienne structure) */
        .engagement-list {
            list-style: none; /* Enlève les puces par défaut */
            padding: 0;
            margin: 0;
        }
        
        .engagement-list-item {
            color: var(--color-light-text); /* Texte principal blanc/clair */
            font-size: 18px; /* Taille de police confortable */
            font-weight: 600; /* Semi-gras pour l'impact */
            padding: 25px 0; /* Espacement vertical */
            padding-left: 45px; /* Espace pour la coche */
            position: relative; /* Pour positionner la coche */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation */
        }
        
        .engagement-list-item:last-child {
            border-bottom: none; /* Pas de ligne après le dernier item */
            padding-bottom: 0; /* Moins d'espace en bas */
        }
        .engagement-list-item:first-child {
             padding-top: 0; /* Moins d'espace en haut */
        }

        /* STYLE DE LA COCHE (Style Erythix) */
        .engagement-list-item::before {
            content: '✓'; /* Coche (Vous pouvez remplacer par une icône SVG/Font Awesome si besoin) */
            color: var(--color-accent-primary); /* Coche Ambre (ou --color-accent-secondary si vous préférez bleu) */
            font-weight: bold;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            /* Ajustement fin de la position de la coche */
            top: 25px; 
        }
         /* Ajustement pour le premier item (car padding-top=0) */
        .engagement-list-item:first-child::before {
             top: 0;
        }

        /* Ajustement pour le style "TITRE: description" */
        .engagement-list-item strong {
            color: var(--color-accent-primary); /* Ambre */
            font-family: var(--font-title);
            font-weight: 700;
            font-size: 16px; /* Légèrement plus petit que le texte principal pour équilibrer */
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 8px; /* Espace entre le titre et la description */
        }
        
        /* Ajustement de la position de la coche (légèrement plus haut) */
         .engagement-list-item::before {
            content: '✓'; 
            color: var(--color-accent-primary); 
            font-weight: bold;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 28px; /* Ajusté pour s'aligner avec la première ligne de texte */
            transform: translateY(-50%);
        }
         .engagement-list-item:first-child::before {
             top: 3px; /* Ajusté pour le premier item */
        }

        /* ========================================= */
        /* 7. NOTRE MÉTHODE (COMMENT ÇA FONCTIONNE) - BLOC À AJOUTER */
        /* ========================================= */
        .methode-section {
            background-color: var(--color-section-bg); /* FOND 2 (Alternance) */
            text-align: center; 
        }
        .methode-grid {
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 50px; 
            margin-top: 60px;
            align-items: stretch; 
            position: relative; 
            padding: 0 10px; 
            max-width: 1200px; 
            margin-left: auto;
            margin-right: auto;
        }
        .methode-point {
            background-color: var(--color-dark-bg); /* FOND 1 (Contraste) */
            padding: 30px 25px; 
            border-radius: 8px;
            text-align: left;
            position: relative; 
            border-top: 4px solid var(--color-accent-primary); 
            display: flex;
            flex-direction: column;
            justify-content: flex-start; 
            height: auto; 
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .methode-point:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(255, 184, 76, 0.15); 
        }
        .methode-point .methode-number { 
            color: var(--color-accent-primary); 
            text-shadow: 0 0 10px rgba(255, 184, 76, 0.5); 
            font-family: var(--font-title);
            font-weight: 900; 
            font-size: 48px; 
            line-height: 1; 
            margin-bottom: 15px; 
            display: block;
        }
        .methode-point h3 { 
            color: var(--color-light-text) !important; 
            font-family: var(--font-title); 
            font-weight: 700; 
            text-transform: uppercase; 
            display: block; 
            margin: 0 0 15px 0; 
            font-size: 20px !important; 
            line-height: 1.3;
            letter-spacing: 1px;
        }
        .methode-point p { 
            color: var(--color-sub-text-dark-bg); 
            font-size: 15px; 
            line-height: 1.6;
            margin: 0; 
        }
        .methode-point p strong { 
            color: var(--color-accent-primary); 
            font-weight: 700; 
        }
        .methode-point:not(:last-child)::after {
            content: '→'; 
            position: absolute;
            top: 50%; 
            right: -35px; 
            transform: translateY(-50%);
            font-size: 36px; 
            color: var(--color-accent-secondary); 
            font-weight: 100; 
        }
        @media (max-width: 1100px) { 
             .methode-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 80px; padding: 0 40px; }
             .methode-point:nth-child(1)::after { right: -60px; font-size: 48px;} 
             .methode-point:nth-child(3)::after { right: -60px; font-size: 48px;} 
             .methode-point:nth-child(2)::after { content: none; } 
        }
        @media (max-width: 767px) { 
            .methode-grid { grid-template-columns: 1fr; gap: 50px; padding: 0; }
            .methode-point:not(:last-child)::after { content: '↓'; top: auto; bottom: -40px; left: 50%; right: auto; transform: translateX(-50%); font-size: 36px; }
            .methode-point:nth-child(1)::after,
            .methode-point:nth-child(2)::after,
            .methode-point:nth-child(3)::after { content: '↓'; top: auto; bottom: -40px; left: 50%; right: auto; transform: translateX(-50%); font-size: 36px; }
        }
        /* Icônes pour la section Méthode */
        .methode-point .methode-icon {
            font-size: 40px; /* Taille de l'icône */
            color: var(--color-accent-secondary); /* Couleur de l'icône */
            margin-bottom: 10px; /* Espace sous l'icône */
            display: block; /* S'assure que l'icône prend sa propre ligne */
            text-align: left; /* Alignement à gauche */
            line-height: 1; /* Supprime l'espace vertical excessif */
        }
        /* ========================================= */
        /* 8. TÉMOIGNAGES (AJOUT DES LOGOS PARTENAIRES) */
        /* ========================================= */
        .temoignages {
            background-color: var(--color-dark-bg); 
            color: var(--color-light-text);
            text-align: center;
            padding: 100px 0; 
        }
        .temoignages h2 {
            margin-bottom: 60px; 
        }
        
        /* GRILLE POUR LES TÉMOIGNAGES (Identique) */
        .testimonial-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
            max-width: 1100px; margin: 0 auto; text-align: left;
        }
        .testimonial-card {
            background-color: var(--color-section-bg); border-radius: 8px; padding: 30px;
            display: flex; flex-direction: column; border-top: 4px solid var(--color-accent-primary);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .testimonial-card:hover {
             transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 184, 76, 0.15);
        }
        .testimonial-author-header { display: flex; align-items: center; margin-bottom: 20px; }
        .author-image-placeholder {
            width: 60px; height: 60px; border-radius: 50%;
            background-color: var(--color-accent-secondary); opacity: 0.3; margin-right: 20px;
        }
        .author-info { text-align: left; }
        .author-name { color: var(--color-light-text); font-weight: 700; font-size: 16px; display: block; }
        .author-title { color: var(--color-sub-text-dark-bg); font-size: 14px; }
        .testimonial-quote {
            color: var(--color-sub-text-dark-bg); font-size: 16px; font-style: italic;
            line-height: 1.6; margin: 0; position: relative; padding-left: 25px;
        }
        .testimonial-quote::before {
            content: '“'; font-family: Georgia, serif; font-size: 48px;
            color: var(--color-accent-primary); opacity: 0.5; position: absolute;
            left: -5px; top: -10px;
        }
        
        /* Section Logos (mise à jour) */
        .logos-section {
            margin-top: 80px; 
            border-top: 1px solid rgba(255, 255, 255, 0.1); 
            padding-top: 50px;
        }
         .logos-section h4 { 
             color: var(--color-sub-text-dark-bg); font-size: 16px;
             font-weight: 600; text-transform: uppercase;
             letter-spacing: 1px; margin-bottom: 40px; /* Plus d'espace sous le titre */
        }

        /* GRILLE POUR LES LOGOS */
        .logos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Logos de taille flexible */
            gap: 40px; /* Espace entre les logos */
            justify-items: center; /* Centrer les logos dans leur cellule */
            align-items: center; /* Centrer verticalement */
            max-width: 900px; /* Largeur max pour la grille de logos */
            margin: 0 auto;
        }
        .logos-grid img {
            max-width: 100%; /* S'assure que l'image ne dépasse pas la cellule */
            height: auto; /* Garde les proportions */
            max-height: 60px; /* Hauteur maximale pour les logos */
            filter: grayscale(100%) brightness(150%) opacity(0.7); /* Gris clair, un peu lumineux */
            transition: filter 0.3s ease;
        }
        .logos-grid img:hover {
            filter: grayscale(0%) brightness(100%) opacity(1); /* Couleur au survol */
        }
        
        /* Responsive Grille Témoignages */
         @media (max-width: 980px) {
             .testimonial-grid { grid-template-columns: 1fr; }
         }
         @media (max-width: 600px) { /* Ajustement logos sur très petits écrans */
             .logos-grid {
                 grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Logos plus petits */
                 gap: 30px;
             }
         }

        /* ========================================= */
        /* 9. INSIGHTS/BLOG */
        /* ========================================= */
        .insights {
            background-color: var(--color-section-bg); /* FOND 1 */
            text-align: center;
        }
        .insights-grid { display: flex; justify-content: space-between; gap: 30px; margin-top: 40px; }
        .insight-card {
            flex: 1;
            text-align: left;
            background-color: var(--color-card-bg); 
            padding: 25px;
            border-radius: 6px;
            border-left: 5px solid var(--color-accent-secondary);
            transition: border-left 0.3s, background-color 0.3s, transform 0.3s;
        }
        .insight-card:hover {
            border-left: 5px solid var(--color-accent-primary);
            background-color: #383b43; 
            transform: translateY(-5px); 
        }
        .insight-card h4 { color: var(--color-accent-secondary); font-size: 18px !important; margin-top: 0; transition: color 0.3s; }
        .insight-card:hover h4 { color: var(--color-accent-primary) !important;}
        .insight-card p { color: var(--color-sub-text-dark-bg); font-size: 14px; }
        .insight-card a { color: var(--color-accent-primary); font-weight: 700; text-decoration: none; }
        /* Images de mise en avant pour les Insights */
        .insight-card-image {
            width: 100%;
            height: 150px; /* Hauteur fixe pour les images */
            background-color: var(--color-dark-bg); /* Fond si l'image ne charge pas */
            border-radius: 4px;
            margin-bottom: 20px;
            overflow: hidden; /* S'assure que l'image ne dépasse pas */
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.05); /* Petite bordure discrète */
        }
        .insight-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Recouvre bien la zone sans déformer */
            transition: transform 0.3s ease; /* Animation au survol */
        }
        .insight-card:hover .insight-card-image img {
            transform: scale(1.05); /* Petit zoom au survol de la carte */
        }

        /* ========================================= */
        /* 10. BLOC CONTACT FINAL (AMÉLIORÉ) */
        /* ========================================= */
        .cta-final {
            background-color: var(--color-accent-secondary); /* Fond Bleu Accent */
            color: var(--color-dark-bg); /* Texte principal foncé sur fond bleu */
            text-align: center; 
            padding: 80px 0;
            margin-top: 40px; 
        }
        .cta-final h2 { 
            color: var(--color-dark-bg); 
            font-size: 40px; 
            margin-bottom: 20px; /* Moins d'espace avant l'intro */
        }
        .cta-final-intro { /* Nouveau : Texte d'intro */
            color: var(--color-dark-bg);
            font-size: 18px;
            max-width: 700px;
            margin: 0 auto 50px auto;
            opacity: 0.9; /* Légèrement plus subtil */
        }

        /* Grille 2 colonnes pour le contact */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            max-width: 1100px;
            margin: 0 auto;
            text-align: left; /* Aligner le contenu des colonnes à gauche */
        }

        /* Colonne 1 : Formulaire */
        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 2px solid rgba(29, 31, 35, 0.4); /* Bordure foncée subtile */
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.2); /* Fond blanc transparent */
            color: var(--color-dark-bg);
            font-family: var(--font-body);
            font-size: 16px;
        }
        .contact-form input[type="text"]::placeholder,
        .contact-form input[type="email"]::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(29, 31, 35, 0.7); /* Placeholder plus foncé */
        }
        .contact-form textarea {
            min-height: 120px;
        }
        .contact-form .cta-button {
            background-color: var(--color-accent-primary); /* Bouton Ambre */
            color: var(--color-dark-bg);
            box-shadow: none; /* Pas d'ombre sur ce bouton */
            width: 100%;
            cursor: pointer;
        }
        .contact-form .cta-button:hover {
            background-color: #FFCF7E;
            transform: translateY(-2px);
        }

        /* Colonne 2 : Infos Directes */
        .contact-info {
            padding-top: 10px; /* Petit alignement */
        }
        .contact-info h3 { /* Titre (ex: Contact Direct) */
            color: var(--color-dark-bg);
            font-size: 24px !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            font-weight: 700 !important;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(29, 31, 35, 0.3);
        }
        .contact-info p {
            color: var(--color-dark-bg);
            font-size: 16px;
            line-height: 1.8;
            opacity: 0.9;
        }
        .contact-info p strong {
            display: block; /* Met le titre (Email/Téléphone) sur sa propre ligne */
            font-weight: 700;
            opacity: 1;
            color: var(--color-dark-bg);
            margin-bottom: 5px;
        }
        .contact-info a {
            color: var(--color-dark-bg);
            text-decoration: underline;
            font-weight: 600;
        }

        /* Responsive */
        @media (max-width: 980px) {
            .contact-grid {
                grid-template-columns: 1fr; /* 1 colonne */
            }
        }

        /* ========================================= */
        /* 10. FOOTER */
        /* ========================================= */
        .footer { 
            background-color: #101012; padding: 40px 0; text-align: center; 
            border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; color: var(--color-sub-text-dark-bg); 
        }
        .footer a { color: var(--color-sub-text-dark-bg); text-decoration: none; transition: color 0.3s; margin: 0 15px;}
        .footer a:hover { color: var(--color-accent-primary); }


        /* ========================================= */
        /* 11. FORMULAIRE */
        /* ========================================= */
        /* ===== Contact Form 7 — Harmonisation avec le design O&N ===== */

        .contact-form-card form.wpcf7-form {
            display: grid;
            gap: 1rem;
        }

        /* Champs textes, selects et textarea en style “pill” */
        .contact-form-card input.wpcf7-form-control:not(.wpcf7-submit),
        .contact-form-card select.wpcf7-form-control,
        .contact-form-card textarea.wpcf7-form-control {
            width: 100%;
            border-radius: 999px;
            border: 1px solid rgba(10, 35, 66, 0.12);
            padding: 0.8rem 1rem;
            font-size: 0.9rem;
            font-family: inherit;
            background: #fff;
            color: #0A2346;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            box-sizing: border-box;
        }

        .contact-form-card input.wpcf7-form-control::placeholder,
        .contact-form-card textarea.wpcf7-form-control::placeholder {
            color: rgba(10, 35, 70, 0.6);
        }

        /* Focus */
        .contact-form-card .wpcf7-form-control:focus {
            outline: none;
            border-color: #FFB84C;
            box-shadow: 0 0 0 3px rgba(255, 184, 76, 0.25);
        }

        /* Label */
        .contact-form-card label {
            font-weight: 600;
            font-size: 0.85rem;
            color: #0A2346;
            display: block;
            margin-bottom: 0.25rem;
        }

        /* Textarea (format carte) */
        .contact-form-card textarea.wpcf7-form-control {
            border-radius: 14px;
            min-height: 110px;
            padding: 1rem;
            resize: vertical;
        }

        /* Bouton envoyer = style CTA du site */
        .contact-form-card input.wpcf7-submit {
            border: none;
            background: linear-gradient(135deg, #FFB84C, #FFA726);
            color: #0A2346;
            padding: 0.8rem 1.5rem;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        /* Hover bouton */
        .contact-form-card input.wpcf7-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(255, 184, 76, 0.4);
        }

        /* Messages CF7 */
        .contact-form-card .wpcf7-response-output {
            margin-top: 1rem;
            padding: 0.8rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
        }

        /* succès */
        .contact-form-card .wpcf7-mail-sent-ok {
            background: #e6ffed;
            border: 1px solid #51cf66;
        }

        /* erreur */
        .contact-form-card .wpcf7-validation-errors,
        .contact-form-card .wpcf7-not-valid-tip {
            background: #fff5f5;
            border: 1px solid #ff6b6b;
            color: #c92a2a !important;
            padding: 0.5rem 0.8rem;
            border-radius: 6px;
        }

        /* Supprimer la marge par défaut des <p> dans CF7 */
        .contact-form-card form.wpcf7-form p {
            margin: 0;
            display: grid;
            gap: 0.25rem;
        }

        /* =========================================================
        RESPONSIVE O&N – CONTENU & HEADER
        ========================================================= */

        /* éviter les scrolls horizontaux parasites */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* --------- Tablettes / petits laptops --------- */
        @media (max-width: 1200px) {
            .container {
                max-width: 1000px;
                padding: 0 24px;
            }

            .hero-tagline {
                font-size: 52px;
            }
        }

        /* --------- Tablettes portrait --------- */
        @media (max-width: 992px) {

            .container {
                max-width: 100%;
                padding: 0 20px;
            }

            /* Header : on laisse tout visible mais plus compact, avec wrap propre */
            .header {
                padding: 15px 20px;
                gap: 20px;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .nav {
                flex-wrap: wrap;
                justify-content: center;
                row-gap: 8px;
            }

            .header .cta-button {
                padding: 10px 20px;
                font-size: 14px;
            }

            /* Hero plus compact */
            .hero {
                padding: 140px 0 80px;
            }

            .hero-tagline {
                font-size: 40px;
            }

            .hero-intro {
                font-size: 18px;
            }

            /* Mission : 1 colonne */
            .mission-subpoints-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            /* Piliers : 2 colonnes */
            .piliers-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .pilier-item {
                max-width: 100%;
            }

            /* Offres : chaque ligne devient une colonne */
            .offre-grid-row {
                flex-direction: column;
                align-items: stretch;
                gap: 20px;
            }

            .offre-grid-row .solution-card {
                max-width: 100%;
            }

            /* Méthode, Témoignages, Insights ont déjà des breakpoints,
            on affine simplement les insights */
            .insights-grid {
                flex-direction: column;
                gap: 20px;
            }

            .section {
                padding: 70px 0;
            }
        }

        /* --------- Mobiles (≤ 768px) --------- */
        @media (max-width: 768px) {

            .container {
                padding: 0 16px;
            }

            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .nav {
                justify-content: flex-start;
                gap: 16px;
                flex-wrap: wrap;
            }

            .hero {
                padding: 110px 0 60px;
                text-align: left;
            }

            .hero-tagline {
                font-size: 32px;
                line-height: 1.25;
            }

            .hero-intro {
                font-size: 16px;
            }

            .section {
                padding: 60px 0;
            }

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

            #offre h2,
            .mission-title,
            .methode-section h2,
            .temoignages h2,
            .insights h2 {
                font-size: 24px !important;
            }

            .solution-card,
            .mission-subpoint,
            .pilier-item {
                padding: 20px 18px;
            }

            .contact-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        /* --------- Petits mobiles (≤ 480px) --------- */
        @media (max-width: 480px) {

            .container {
                padding: 0 12px;
            }

            .hero {
                padding: 90px 0 50px;
            }

            .hero-tagline {
                font-size: 28px;
            }

            .hero-intro {
                font-size: 15px;
            }

            .mission-title,
            #offre h2,
            .piliers h2 {
                font-size: 22px !important;
            }

            .solution-card,
            .mission-subpoint,
            .pilier-item {
                padding: 18px 14px;
            }
        }

        @media (max-width: 768px) {
            .section {
                padding: 50px 0;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding-top: 90px;
            }
        }

        /* ====== MENU MOBILE (BURGER) ====== */

        /* Bouton burger caché par défaut (desktop) */
        .nav-toggle {
            display: none;
            border: none;
            background: transparent;
            padding: 0;
        }

        /* Petites barres du burger */
        .nav-toggle span {
            display: block;
            width: 20px;
            height: 2px;
            border-radius: 999px;
            background: var(--color-light-text);
        }

        /* --------- Vue mobile --------- */
        @media (max-width: 900px) {

            .header {
                justify-content: space-between;
                padding: 12px 16px;
                gap: 16px;
            }

            /* Le bouton burger devient visible */
            .nav-toggle {
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;
                width: 40px;
                height: 40px;
                border-radius: 999px;
                background: var(--color-accent-primary);
                cursor: pointer;
                flex-shrink: 0;
            }

            .nav-toggle span {
                background: var(--color-dark-bg);
                transition: transform 0.2s ease, opacity 0.2s ease;
            }

            /* Menu navigation en overlay sous le header */
            .nav {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--color-section-bg);
                padding: 16px 20px 20px;
                flex-direction: column;
                gap: 16px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);

                opacity: 0;
                transform: translateY(-10px);
                pointer-events: none;
                transition: opacity 0.2s ease, transform 0.2s ease;
            }

            .nav a {
                font-size: 15px;
            }

            .header-cta-group {
                margin-left: 8px;
                flex-shrink: 0;
            }

            /* Quand le menu est ouvert */
            .header.nav-open .nav {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }

            /* Animation du burger en croix */
            .header.nav-open .nav-toggle span:nth-child(1) {
                transform: translateY(6px) rotate(45deg);
            }
            .header.nav-open .nav-toggle span:nth-child(2) {
                opacity: 0;
            }
            .header.nav-open .nav-toggle span:nth-child(3) {
                transform: translateY(-6px) rotate(-45deg);
            }
        }

        /* ============================
        HEADER MOBILE : BURGER À DROITE
        ============================ */
        @media (max-width: 900px) {

            /* Le header reste compact et en ligne */
            .header {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;  /* logo à gauche, actions à droite */
                padding: 12px 16px;
                gap: 12px;
            }

            /* On regroupe le bouton Démo + le Burger à droite */
            .header-cta-group,
            .nav-toggle {
                margin: 0;
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            /* On force la position du burger à droite */
            .nav-toggle {
                order: 3;
            }
        }

        /* Laisse de la place sous le header fixe */
        body {
            padding-top: 80px;
        }

        /* Deux colonnes pour le formulaire sur desktop */
        .form-two-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem 1.2rem;
        }

        /* En mobile : une seule colonne */
        @media (max-width: 768px) {
            .form-two-cols {
                grid-template-columns: 1fr;
            }
        }

        /* Consentement plus discret */
        .form-consent {
            font-size: 0.8rem;
            color: #0A2346;
        }

        .form-consent input[type="checkbox"] {
            margin-right: 8px;
        }

        /* ===== Ajustements visuels du formulaire de contact ===== */

        /* Limiter la largeur sur grand écran */
        .contact-grid {
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Resserre le bloc de gauche */
        .contact-form-card {
            padding: 1.5rem 1.5rem;
        }

        /* Champ message : forme carte, pas un gros ovale */
        .contact-form-card textarea.wpcf7-form-control {
            border-radius: 16px !important;
            min-height: 140px;
        }

        /* Bouton : un peu moins large, centré */
        .contact-form-card input.wpcf7-submit {
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
            display: block;
        }

        /* Sur mobile : full width confortable */
        @media (max-width: 768px) {
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .contact-form-card {
                padding: 1.2rem 1rem;
            }

            .contact-form-card input.wpcf7-submit {
                max-width: 100%;
            }
        }

        /* Grille 2 colonnes pour le formulaire CF7 */
        .form-two-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem 1.25rem;
        }

        /* Sur mobile : une seule colonne */
        @media (max-width: 768px) {
            .form-two-cols {
                grid-template-columns: 1fr;
            }
        }

        /* Consentement : texte lisible et case alignée */
        .form-consent {
            font-size: 0.8rem;
            line-height: 1.4;
            color: #0A2346;
            margin-top: 0.5rem;
        }

        .form-consent .wpcf7-list-item {
            margin: 0;
        }

        .form-consent input[type="checkbox"] {
            margin-right: 8px;
        }

        /* Textarea un peu plus “carte” et moins ovale géant */
        .contact-form-card textarea.wpcf7-form-control {
            border-radius: 16px;
            min-height: 140px;
        }

        /* Bouton en bas bien propre */
        .contact-form-card input.wpcf7-submit {
            width: 100%;
            max-width: 380px;
            margin: 0.75rem auto 0;
            display: block;
        }

        /* Style propre pour le consentement */
        .contact-form-card .wpcf7-form-control.wpcf7-checkbox {
            border: none;
            background: transparent;
            box-shadow: none;
            padding: 0;
        }

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
            width: auto;
            height: auto;
        }

        .form-consent {
            margin-top: 0.75rem;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #0A2346;
        }

        /* Alignement propre de la case à cocher + texte */

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
            display: block; /* on annule le flex mis dessus */
        }

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label {
            display: flex;
            align-items: flex-start; /* top align si texte sur 2 lignes */
            gap: 8px;
        }

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
            margin-top: 2px;   /* léger ajustement vertical */
            flex-shrink: 0;
        }

        .contact-form-card .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
            flex: 1;
        }

        /* === Correction de l’alignement de la checkbox CF7 === */

        .wpcf7-form .wpcf7-acceptance {
            display: flex;
            align-items: center;       /* Aligne la case sur la ligne */
            gap: 12px;                 /* Espace entre case et texte */
            margin: 20px 0;            /* Aère verticalement */
        }

        .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
            width: 20px;
            height: 20px;
            transform: translateY(-1px); /* Ajustement fin vertical */
            cursor: pointer;
        }

        .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
            margin: 0 !important;
        }

        .wpcf7-form .wpcf7-acceptance span.wpcf7-list-item-label {
            color: var(--color-dark-bg);
            font-size: 16px;
            line-height: 1.4;
            display: inline-block;
        }

        /* =========================
   ALIGNEMENT CASE + TEXTE
   ========================= */

.contact-form-card p.form-consent {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* On pose tout le bloc consentement sur une seule ligne */
.contact-form-card p.form-consent label {
    display: flex;
    align-items: flex-start;   /* top align si le texte va sur 2 lignes */
    gap: 10px;
}

/* On neutralise les styles CF7 internes qui gênent */
.contact-form-card p.form-consent .wpcf7-form-control.wpcf7-checkbox {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.contact-form-card p.form-consent .wpcf7-list-item {
    margin: 0;
}

/* La case elle-même */
.contact-form-card p.form-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 2px; /* petit ajustement vertical */
    flex-shrink: 0;
}

/* Le texte */
.contact-form-card p.form-consent .wpcf7-list-item-label {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #0A2346;
}

/* ======================================
   BLOC CONSENTEMENT — TEXTE À GAUCHE, CASE À DROITE
   ====================================== */

/* On cible le paragraphe CF7 contenant la case */
.contact-form-card p.form-consent {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* On force le label en flex → texte + case à droite */
.contact-form-card p.form-consent label {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;            /* le texte prend toute la largeur */
}

/* La zone texte à gauche */
.contact-form-card p.form-consent .wpcf7-list-item-label {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
    color: #0A2346;
    text-align: left;
}

/* Conteneur de la checkbox */
.contact-form-card p.form-consent .wpcf7-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* La checkbox à droite */
.contact-form-card p.form-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* Neutraliser la bordure/fond CF7 qui pollue l’alignement */
.contact-form-card p.form-consent .wpcf7-form-control.wpcf7-checkbox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}