:root {

     /* Palette Tech / Light */

     --color-bg: #ffffff;

     --color-bg-alt: #f8fafc;
     /* Gris très léger pour les sections */

     --color-text-main: #0f172a;
     /* Bleu nuit très sombre */

     --color-text-muted: #64748b;

     --color-primary: #2563eb;
     /* Bleu vif Legend */

     --color-primary-dark: #1e40af;

     --color-accent: #0ea5e9;
     /* Cyan pour les dégradés */

     --border-color: #e2e8f0;



     /* Palette Dark Luxury (Pour la section Expertises) */

     --color-dark-bg: #0f1115;

     --color-dark-card: #181b21;

     --color-dark-border: #2d3748;

     --color-gold: #f59e0b;



     --container-width: 1280px;

     --font-display: 'Space Grotesk', sans-serif;

     --font-body: 'Inter', sans-serif;



     --radius-sm: 8px;

     --radius-md: 16px;

     --radius-lg: 24px;

 }



 /* Reset */

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



 body {

     font-family: var(--font-body);

     background-color: var(--color-bg);

     color: var(--color-text-main);

     line-height: 1.5;

     -webkit-font-smoothing: antialiased;
     background: #F8F8FF;

 }



 h1,
 h2,
 h3,
 h4,
 h5 {

     font-family: var(--font-display);

     font-weight: 700;

     line-height: 1.1;

     letter-spacing: -0.02em;

 }



 a {
     text-decoration: none;
     color: inherit;
     transition: 0.3s;
 }

 img {
     max-width: 100%;
     display: block;
 }

 ul {
     list-style: none;
 }



 /* Layout Utilitaires */

 .container {

     max-width: var(--container-width);

     margin: 0 auto;

     padding: 0 24px;

 }



 .grid {
     display: grid;
     gap: 24px;
 }

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

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

 .mt-large {
     margin-top: 100px;
 }

 .mt-medium {
     margin-top: 60px;
 }



 .badge {

     display: inline-block;

     padding: 6px 12px;

     background: #eff6ff;

     color: var(--color-primary);

     border-radius: 100px;

     font-size: 0.85rem;

     font-weight: 600;

     border: 1px solid #dbeafe;

     margin-bottom: 20px;

 }



 /* Boutons Style Tech */

 .btn {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     padding: 14px 28px;

     font-weight: 600;

     border-radius: var(--radius-sm);

     transition: all 0.2s ease;

     font-size: 0.95rem;

     cursor: pointer;

     border: none;

 }



 .btn-primary {

     background-color: var(--color-text-main);
     /* Noir contrasté */

     color: white;

     border: 1px solid var(--color-text-main);

 }



 .btn-primary:hover {

     background-color: var(--color-primary);

     border-color: var(--color-primary);

     transform: translateY(-2px);

     box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.3);

 }



 .btn-secondary {

     background-color: white;

     color: var(--color-text-main);

     border: 1px solid var(--border-color);

 }



 .btn-secondary:hover {

     border-color: var(--color-text-main);

     background-color: var(--color-bg-alt);

 }



 .btn-magic {

     background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

     color: white;

     border: none;

     box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);

 }



 .btn-magic:hover {

     transform: translateY(-2px);

     box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);

 }



 /* HEADER Minimaliste */

 header {

     padding: 24px 0;

     position: sticky;

     top: 0;

     background: rgba(255, 255, 255, 0.9);

     backdrop-filter: blur(8px);

     z-index: 100;

     border-bottom: 1px solid var(--border-color);

 }



 .nav-logo {

     font-family: var(--font-display);

     font-weight: 700;

     font-size: 1.4rem;

     display: flex;

     align-items: center;

     gap: 8px;

 }



 /* HERO Section - Asymétrique */

 .hero {

     padding: 120px 0 100px;

     background: radial-gradient(circle at top right, #5293be 0%, #F8F8FF 40%);

 }



 .hero-grid {

     grid-template-columns: 1.2fr 0.8fr;

     align-items: center;

 }



 .hero h1 {

     font-size: 4.5rem;
     /* Très gros titre */

     margin-bottom: 24px;

     color: var(--color-text-main);

 }



 .hero h1 span {

     color: var(--color-primary);

     position: relative;

     display: inline-block;

 }



 .hero h1 span::after {

     content: '';

     position: absolute;

     bottom: 10px;

     left: 0;

     width: 100%;

     height: 12px;

     background: rgba(37, 99, 235, 0.15);

     z-index: -1;

     transform: rotate(-2deg);

 }



 .hero-text {

     font-size: 1.25rem;

     color: var(--color-text-muted);

     margin-bottom: 40px;

     max-width: 600px;

 }



 .hero-stats {

     display: flex;

     gap: 40px;

     margin-top: 60px;

     padding-top: 30px;

     border-top: 1px solid var(--border-color);

 }



 .stat h4 {
     font-size: 2rem;
     color: var(--color-text-main);
 }

 .stat p {
     font-size: 0.9rem;
     color: var(--color-text-muted);
     text-transform: uppercase;
     letter-spacing: 1px;
 }



 /* AI SECTION */

 .ai-section {

     padding: 80px 0;

     background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

     border-bottom: 1px solid var(--border-color);

 }



 .ai-container {

     max-width: 900px;

     margin: 0 auto;

     background: white;

     border: 1px solid var(--border-color);

     border-radius: var(--radius-lg);

     padding: 40px;

     box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.05);

     position: relative;

     overflow: hidden;

 }



 .ai-container::before {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     height: 4px;

     background: linear-gradient(90deg, var(--color-primary), var(--color-accent));

 }



 .ai-input-group {

     margin-top: 30px;

 }



 .ai-textarea {

     width: 100%;

     padding: 20px;

     border: 2px solid var(--border-color);

     border-radius: var(--radius-md);

     font-family: var(--font-body);

     font-size: 1rem;

     min-height: 120px;

     margin-bottom: 20px;

     transition: 0.3s;

     resize: vertical;

 }



 .ai-textarea:focus {

     outline: none;

     border-color: var(--color-primary);

     box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);

 }



 .ai-result {

     display: none;
     /* Hidden by default */

     margin-top: 40px;

     padding-top: 40px;

     border-top: 1px dashed var(--border-color);

     animation: fadeIn 0.5s ease;

 }



 .ai-card-result {

     background: #f0f9ff;

     border: 1px solid #bae6fd;

     border-radius: var(--radius-sm);

     padding: 20px;

     margin-bottom: 20px;

 }



 .ai-card-result h4 {

     color: var(--color-primary-dark);

     margin-bottom: 10px;

     display: flex;

     align-items: center;

     gap: 8px;

 }



 @keyframes fadeIn {

     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }

 }



 .loading-dots:after {

     content: ' .';

     animation: dots 1s steps(5, end) infinite;

 }

 @keyframes dots {

     0%,
     20% {
         content: ' .';
     }

     40% {
         content: ' ..';
     }

     60% {
         content: ' ...';
     }

     80%,
     100% {
         content: '';
     }

 }



 /* === BENTO GRID SERVICES (DARK LUXURY MODE) ===

           Adaptation exacte du style sombre demandé

        */

 .services-section {

     padding: 100px 0;

     background: #0f172a;

 }






 .bento-grid {

     display: grid;

     grid-template-columns: repeat(3, 1fr);

     grid-template-rows: repeat(2, minmax(300px, auto));

     gap: 24px;

     margin-top: 40px;

 }



 .bento-card {

     background: var(--color-dark-card);
     /* Carte sombre */

     border: 1px solid var(--color-dark-border);

     border-radius: var(--radius-md);

     padding: 32px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     transition: 0.3s;

     position: relative;

     overflow: hidden;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

 }



 .bento-card:hover {

     border-color: var(--color-gold);
     /* Bordure Or au survol */

     transform: translateY(-4px);

     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);

 }



 /* Specific Bento Sizes */

 .bento-large {

     grid-column: span 2;

     background: linear-gradient(135deg, var(--color-dark-card) 0%, #1e293b 100%);

 }



 .bento-tall {

     grid-row: span 2;

     background: var(--color-primary);
     /* Bleu Legend pour le SEO */

     border: none;

     color: white;

 }



 .bento-tall p {
     color: rgba(255, 255, 255, 0.8);
 }



 .bento-icon-box {

     width: 48px;

     height: 48px;

     background: rgba(255, 255, 255, 0.05);

     color: var(--color-gold);

     border-radius: 10px;

     display: flex;

     align-items: center;

     justify-content: center;

     font-size: 1.2rem;

     margin-bottom: 24px;

     border: 1px solid rgba(255, 255, 255, 0.1);

 }



 .bento-tall .bento-icon-box {

     background: rgba(255, 255, 255, 0.2);

     color: white;

     border: none;

 }



 .bento-card h3 {

     font-size: 1.6rem;

     margin-bottom: 12px;

     color: #ffffff;

     letter-spacing: -0.03em;

 }



 /* Tags pour les listes (Dark Mode) */

 .tech-tags {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

 }



 .tech-tag {

     font-size: 0.85rem;

     padding: 6px 12px;

     background: rgba(255, 255, 255, 0.05);

     color: #e2e8f0;

     border-radius: 20px;

     font-weight: 500;

     display: flex;

     align-items: center;

     gap: 6px;

     border: 1px solid rgba(255, 255, 255, 0.1);

 }



 .tech-tag i {
     color: var(--color-gold);
     font-size: 0.8em;
 }



 .bento-card:hover .tech-tag {

     background: rgba(255, 255, 255, 0.1);

     border-color: var(--color-gold);

 }



 /* Image Overlay Darken */

 .bento-large img {

     opacity: 0.8;

     mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

     -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

 }



 /* Expertises Grid (Grid 4x3) */

 .expertises-detailed {

     padding: 80px 0;

     background-color: #F8F8FF;
     /* Gris très léger */

     border-top: 1px solid var(--border-color);

 }



 .expertises-grid {

     display: grid;

     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

     gap: 24px;

     margin-top: 50px;

 }



 .expert-card {

     background: white;

     border: 1px solid var(--border-color);

     border-radius: var(--radius-sm);

     padding: 30px;

     transition: all 0.3s ease;

     display: flex;

     flex-direction: column;

     align-items: flex-start;

 }



 .expert-card:hover {

     border-color: var(--color-primary);

     transform: translateY(-5px);

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

 }



 .expert-icon-small {

     width: 40px;

     height: 40px;

     background: #eff6ff;
     /* Bleu très pâle */

     color: var(--color-primary);

     border-radius: 8px;

     display: flex;

     align-items: center;

     justify-content: center;

     font-size: 1rem;

     margin-bottom: 20px;

 }



 .expert-card h4 {

     font-size: 1.1rem;

     margin-bottom: 10px;

     color: var(--color-text-main);

 }



 .expert-card p {

     font-size: 0.9rem;

     color: var(--color-text-muted);

     line-height: 1.6;

 }



 /* Processus - Vertical Steps */

 .process-section {

     background-color: #F8F8FF;

     padding: 100px 0;

     border-top: 1px solid var(--border-color);

     border-bottom: 1px solid var(--border-color);

 }



 .steps-container {

     max-width: 800px;

     margin: 60px auto 0;

     position: relative;

 }



 .steps-line {

     position: absolute;

     left: 24px;

     top: 0;

     bottom: 0;

     width: 2px;

     background: var(--border-color);

     z-index: 0;

 }



 .step-item {

     display: flex;

     gap: 40px;

     margin-bottom: 60px;

     position: relative;

     z-index: 1;

 }



 .step-marker {

     width: 50px;

     height: 50px;

     background: white;

     border: 2px solid var(--border-color);

     border-radius: 50%;

     display: flex;

     align-items: center;

     justify-content: center;

     font-weight: 700;

     font-family: var(--font-display);

     flex-shrink: 0;

     transition: 0.3s;

 }



 .step-item:hover .step-marker {

     border-color: var(--color-primary);

     color: var(--color-primary);

     box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);

 }



 .step-content h3 {
     margin-bottom: 10px;
     font-size: 1.3rem;
 }

 .step-content p {
     color: var(--color-text-muted);
 }



 /* Pricing Simple */

 .pricing-section {
     padding: 100px 0;
 }



 .price-card {

     border: 1px solid var(--border-color);

     padding: 40px;

     border-radius: var(--radius-lg);

     text-align: center;

 }



 .price-card.featured {

     background: var(--color-text-main);

     color: white;

     border-color: var(--color-text-main);

     transform: scale(1.05);

     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

 }



 .price-card.featured h3,
 .price-card.featured .price {
     color: white;
 }

 .price-card.featured p {
     color: rgba(255, 255, 255, 0.7);
 }

 .price-card.featured .btn {
     background: white;
     color: black;
     border: none;
 }



 .price {
     font-size: 3rem;
     font-weight: 700;
     font-family: var(--font-display);
     margin: 20px 0;
     display: block;
 }

 .price span {
     font-size: 1rem;
     font-weight: 400;
     color: var(--color-text-muted);
 }

 .price-card.featured .price span {
     color: rgba(255, 255, 255, 0.6);
 }



 /* Footer CTA */

 .final-cta {

     background: var(--color-primary);

     color: white;

     padding: 80px 24px;

     text-align: center;

     border-radius: var(--radius-lg);

     margin-bottom: 40px;

 }

 .final-cta h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .final-cta .btn {
     background: white;
     color: var(--color-primary);
     border: none;
 }



 /* Responsive */

 @media (max-width: 900px) {

     .hero h1 {
         font-size: 3rem;
     }

     .hero-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .hero-text {
         margin: 0 auto 40px;
     }

     .hero-stats {
         justify-content: center;
     }

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

     .bento-large,
     .bento-tall {
         grid-column: auto;
         grid-row: auto;
     }

     .steps-container {
         margin-left: 0;
     }

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

 }



 /* === FRAMEWORK & CMS SECTION === */

 .framework-section {

     padding: 100px 0;

     background: #F8F8FF;

     position: relative;

 }



 .framework-header {

     display: flex;

     justify-content: space-between;

     align-items: center;

     margin-bottom: 60px;

 }



 .framework-header h2 {

     font-size: 2.5rem;

     color: var(--color-text-main);

     font-weight: 800;

 }



 .framework-header h2 span {

     color: #0ea5e9;
     /* Light Blue specific to design */

 }



 .nav-arrows {

     display: flex;

     gap: 12px;

 }



 .nav-btn {

     width: 44px;

     height: 44px;

     border: none;

     background: #f0f9ff;

     color: #0ea5e9;

     border-radius: 8px;

     display: flex;

     align-items: center;

     justify-content: center;

     cursor: pointer;

     transition: 0.3s;

     font-size: 1rem;

 }



 .nav-btn:hover {

     background: #0ea5e9;

     color: white;

     transform: translateY(-2px);

     box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);

 }



 .cms-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 24px;

 }



 .cms-card {

     background: #ffffff;

     border: 1px solid #f1f5f9;

     border-radius: 16px;

     padding: 40px 24px;

     text-align: center;

     transition: 0.3s all ease;

     cursor: default;

 }



 /* Active/Hover state based on image (Light blue bg & border) */

 .cms-card:hover,
 .cms-card.active {

     background: #f0f9ff;

     border-color: #e0f2fe;

     transform: translateY(-8px);

 }



 .cms-icon {

     font-size: 3.5rem;

     margin-bottom: 24px;

     display: inline-block;

     color: #334155;

     transition: 0.3s;

 }



 .cms-card:hover .cms-icon,
 .cms-card.active .cms-icon {

     /* Brand colors could be applied here if needed, keeping it simple dark or black as per image */

     color: #0f172a;

 }



 .cms-title {

     font-size: 1.1rem;

     font-weight: 700;

     color: #0f172a;

     margin-bottom: 12px;

 }



 .cms-desc {

     font-size: 0.9rem;

     color: #64748b;

     line-height: 1.5;

 }



 @media (max-width: 1024px) {

     .cms-grid {
         grid-template-columns: repeat(2, 1fr);
     }

 }

 @media (max-width: 600px) {

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

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

 }