:root {
          --navy-main: #1a1f36;
          /* Couleur principale */
          --blue-soft: #5e8ce6;
          /* Couleur secondaire */
          --gold-accent: rgb(219, 153, 53);
          /* Accent : Call to action */
          --bg-light: #f7f9fc;
          /* Fond très léger */
          --white: #ffffff;
          --bg-dark: #0f1115;
          --card-bg: #1a1d24;
          --accent-color: #8b5cf6;
          /* Violet pour l'IA */
          --accent-secondary: #ec4899;
          /* Rose pour la Data */
          --text-primary: #ffffff;
          --text-secondary: #9ca3af;
          --border-color: #2d313a;
          --gray-bg: #f8fafc;
      }

      .ia-page-wrapper {
          background-color: var(--text-primary);
          color: var(--bg-dark);
          font-family: 'Inter', system-ui, sans-serif;
      }

      /* HERO SECTION */

      .hero-ia .lede {
          font-size: 1.25rem;
          color: var(--text-primary);
          max-width: 800px;
          margin: 0 auto 40px;
          line-height: 1.6;
      }

      /* BOUTONS */
      .btn-group {
          display: flex;
          justify-content: center;
          gap: 20px;
      }

      .btn-primary {
          background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
          color: white;
          padding: 14px 28px;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 600;
          border: none;
          transition: transform 0.2s;
      }

      .btn-primary:hover {
          transform: scale(1.05);
      }

      .btn-secondary {
          background: transparent;
          border: 1px solid var(--border-color);
          color: var(--text-primary);
          padding: 14px 28px;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 600;
      }

      /* SECTION TITLES */
      .section-title {
          text-align: center;
          font-size: 2rem;
          margin-bottom: 10px;
      }

      .section-subtitle {
          text-align: center;
          color: var(--text-secondary);
          margin-bottom: 50px;
      }

      /* TIMELINE PROCESS (AI-READY) */
      .process-section {
          padding: 80px 20px;
      }

      .timeline {
          display: flex;
          justify-content: space-between;
          max-width: 1000px;
          margin: 0 auto;
          position: relative;
      }

      /* Ligne connectrice */
      .timeline::before {
          content: '';
          position: absolute;
          top: 25px;
          left: 50px;
          right: 50px;
          height: 2px;
          background: var(--border-color);
          z-index: 0;
      }

      .timeline-step {
          position: relative;
          z-index: 1;
          width: 30%;
          text-align: center;
          background: var(--bg-dark);
          /* Cache la ligne derrière le texte */
          padding: 0 10px;
      }

      .step-number {
          width: 50px;
          height: 50px;
          background: var(--card-bg);
          border: 2px solid var(--accent-color);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          font-weight: bold;
          font-size: 1.2rem;
          box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
      }

      .timeline-step h3 {
          margin-bottom: 10px;
          color: #fff;
      }

      .timeline-step p {
          font-size: 0.9rem;
          color: var(--text-secondary);
      }

      @media (max-width: 768px) {
          .timeline {
              flex-direction: column;
              gap: 40px;
          }

          .timeline::before {
              display: none;
          }

          /* Pas de ligne en mobile */
          .timeline-step {
              width: 100%;
          }
      }

      /* BENTO GRID GENERIC */
      .bento-grid {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: 24px;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
      }

      .bento-card {
          background-color: var(--card-bg);
          border: 1px solid var(--border-color);
          border-radius: 16px;
          padding: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.2s, border-color 0.2s;
      }

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

      .card-half {
          grid-column: span 6;
      }

      .card-third {
          grid-column: span 4;
      }

      @media (max-width: 900px) {

          .card-half,
          .card-third {
              grid-column: span 12;
          }
      }

      .bento-card h3 {
          font-size: 1.4rem;
          margin-bottom: 15px;
          color: #fff;
      }

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

      .tech-tag {
          display: inline-block;
          background: rgba(255, 255, 255, 0.1);
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 0.8rem;
          margin-right: 5px;
          margin-top: 10px;
          font-family: monospace;
          color: #c4b5fd;
      }

      /* USE CASES (INTERACTIVE CARDS) */
      .use-case-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          max-width: 1200px;
          margin: 60px auto 0;
          padding: 0 20px;
      }

      .use-case-card {
          background: linear-gradient(180deg, var(--card-bg) 0%, rgba(26, 29, 36, 0.5) 100%);
          padding: 25px;
          border-radius: 12px;
          border: 1px solid var(--border-color);
      }

      .use-case-title {
          font-weight: bold;
          margin-bottom: 10px;
          color: var(--accent-secondary);
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .result-box {
          margin-top: 15px;
          padding: 10px;
          background: rgba(39, 201, 63, 0.1);
          border-left: 3px solid #27c93f;
          color: #27c93f;
          font-size: 0.9rem;
          font-weight: 600;
      }

      @media (max-width: 768px) {
          .use-case-grid {
              grid-template-columns: 1fr;
          }
      }

      /* TRUST STRIP */
      .trust-strip {
          border-top: 1px solid var(--border-color);
          padding: 40px 0;
          margin-top: 80px;
          background: #000;
      }

      .logos {
          display: flex;
          justify-content: center;
          gap: 40px;
          flex-wrap: wrap;
          opacity: 0.6;
          font-weight: bold;
          font-size: 1.2rem;
          color: #fff;
      }



      /*---------------------------------------------------------------------------------*/

      .compute-section {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 80px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
      }

      .container-compute {
          max-width: 1100px;
          margin: 0 auto;
          display: block;
          /* Section se comporte comme un block */
      }

      /* TYPOGRAPHIE */
      .compute-header {
          text-align: center;
          margin-bottom: 60px;
          display: block;
      }

      .compute-header h2 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 20px;
          color: var(--navy-main);
      }

      .compute-header p {
          font-size: 1.125rem;
          line-height: 1.6;
          color: #4f566b;
          max-width: 800px;
          margin: 0 auto;
      }

      /* GRID DE COMPARAISON */
      .comparison-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          margin-bottom: 60px;
          align-items: center;
      }

      @media (max-width: 768px) {
          .comparison-grid {
              grid-template-columns: 1fr;
          }
      }

      /* CARTE CENTRALISED (Le Problème) */
      .card-problem {
          padding: 40px;
          background-color: var(--bg-light);
          border-radius: 12px;
          border-left: 4px solid #cbd5e1;
          display: block;
      }

      /* CARTE DEPIN (La Solution) */
      .card-solution {
          padding: 40px;
          background-color: var(--white);
          border-radius: 12px;
          box-shadow: 0 20px 40px rgba(26, 31, 54, 0.1);
          border-left: 4px solid var(--blue-soft);
          position: relative;
          display: block;
      }

      /* Badge d'économie */
      .savings-badge {
          position: absolute;
          top: -15px;
          right: 20px;
          background-color: var(--gold-accent);
          color: white;
          font-weight: bold;
          padding: 8px 16px;
          border-radius: 50px;
          font-size: 0.9rem;
          box-shadow: 0 4px 6px rgba(219, 153, 53, 0.3);
      }

      .price-tag {
          display: block;
          font-size: 2.5rem;
          font-weight: 800;
          margin: 15px 0;
          color: var(--navy-main);
      }

      .price-label {
          text-transform: uppercase;
          letter-spacing: 0.05em;
          font-size: 0.85rem;
          font-weight: 600;
          color: #8792a2;
          display: block;
      }

      .feature-list {
          list-style: none;
          padding: 0;
          margin-top: 20px;
      }

      .feature-list li {
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          color: #4f566b;
      }

      .icon-check {
          color: var(--blue-soft);
          margin-right: 10px;
          font-weight: bold;
      }

      /* SECTION RÉSILIENCE */
      .resilience-block {
          background-color: var(--navy-main);
          color: var(--white);
          border-radius: 12px;
          padding: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 40px;
      }

      .resilience-content {
          flex: 1;
      }

      .resilience-content h3 {
          font-size: 1.8rem;
          margin-bottom: 15px;
          color: var(--white);
      }

      .resilience-content p {
          color: #a0aec0;
          line-height: 1.6;
      }

      .resilience-icon {
          background: rgba(255, 255, 255, 0.1);
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin: 0;
          /* Reset figure margins */
      }

      /* FOOTER SOURCE */
      .source-note {
          margin-top: 40px;
          font-size: 0.85rem;
          color: #8792a2;
          text-align: center;
          border-top: 1px solid #e2e8f0;
          padding-top: 20px;
          display: block;
      }

      .agentic-section {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 80px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          border-top: 1px solid #e2e8f0;
          /* Séparateur discret */
      }

      .container-agentic {
          max-width: 1100px;
          margin: 0 auto;
          display: block;
      }

      /* HEADER */
      .agentic-header {
          text-align: center;
          margin-bottom: 60px;
          display: block;
      }

      .agentic-header h2 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 20px;
          color: var(--navy-main);
      }

      .agentic-header p {
          font-size: 1.125rem;
          line-height: 1.6;
          color: #4f566b;
          max-width: 800px;
          margin: 0 auto;
      }

      /* GRID COMPARATIF */
      .agentic-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          margin-bottom: 60px;
          align-items: stretch;
          /* Hauteur égale */
      }

      @media (max-width: 768px) {
          .agentic-grid {
              grid-template-columns: 1fr;
          }
      }

      /* CARTE BANQUE TRADITIONNELLE (Le Frein) */
      .card-legacy {
          padding: 40px;
          background-color: var(--bg-light);
          border-radius: 12px;
          border-left: 4px solid #cbd5e1;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      /* CARTE SMART ACCOUNTS (L'Accélérateur) */
      .card-future {
          padding: 40px;
          background-color: var(--white);
          border-radius: 12px;
          box-shadow: 0 20px 40px rgba(26, 31, 54, 0.1);
          border-left: 4px solid var(--blue-soft);
          position: relative;
          display: block;
      }

      /* Badge Innovation */
      .innovation-badge {
          position: absolute;
          top: -15px;
          right: 20px;
          background-color: var(--gold-accent);
          color: white;
          font-weight: bold;
          padding: 8px 16px;
          border-radius: 50px;
          font-size: 0.9rem;
          box-shadow: 0 4px 6px rgba(219, 153, 53, 0.3);
      }

      .concept-title {
          display: block;
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 15px;
          color: var(--navy-main);
      }

      .concept-label {
          text-transform: uppercase;
          letter-spacing: 0.05em;
          font-size: 0.85rem;
          font-weight: 600;
          color: #8792a2;
          display: block;
          margin-bottom: 10px;
      }

      .feature-list {
          list-style: none;
          padding: 0;
          margin-top: 20px;
      }

      .feature-list li {
          margin-bottom: 12px;
          display: flex;
          align-items: start;
          color: #4f566b;
          line-height: 1.5;
      }

      .icon-status {
          margin-right: 12px;
          font-weight: bold;
          font-size: 1.2rem;
          line-height: 1;
      }

      /* BLOC MACHINE-TO-MACHINE */
      .m2m-block {
          background-color: var(--navy-main);
          color: var(--white);
          border-radius: 12px;
          padding: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 40px;
      }

      .m2m-content {
          flex: 1;
      }

      .m2m-content h3 {
          font-size: 1.8rem;
          margin-bottom: 15px;
          color: var(--white);
      }

      .m2m-content p {
          color: #a0aec0;
          line-height: 1.6;
      }

      .m2m-icon {
          background: rgba(255, 255, 255, 0.1);
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin: 0;
      }

      /* FOOTER SOURCE */
      .source-note {
          margin-top: 40px;
          font-size: 0.85rem;
          color: #8792a2;
          text-align: center;
          border-top: 1px solid #e2e8f0;
          padding-top: 20px;
          display: block;
      }

      /*-----------------------------------------------------------*/

      .agentic-infrastructure {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          border-top: 1px solid var(--border-color);
      }

      .container-finance {
          max-width: 1100px;
          margin: 0 auto;
      }

      /* LAYOUT ASYMÉTRIQUE */
      .finance-split {
          display: flex;
          align-items: center;
          gap: 60px;
          margin-bottom: 80px;
      }

      @media (max-width: 900px) {
          .finance-split {
              flex-direction: column;
          }
      }

      /* COLONNE GAUCHE : TEXTE */
      .finance-text {
          flex: 1;
      }

      .tag-category {
          display: inline-block;
          background-color: rgba(94, 140, 230, 0.1);
          color: var(--blue-soft);
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 0.85rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 20px;
      }

      .finance-text h2 {
          font-size: 2.8rem;
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 25px;
          color: var(--navy-main);
      }

      .finance-text p {
          font-size: 1.1rem;
          line-height: 1.7;
          color: #4f566b;
          margin-bottom: 30px;
      }

      .finance-cta {
          display: inline-flex;
          align-items: center;
          color: var(--blue-soft);
          font-weight: 700;
          text-decoration: none;
          border-bottom: 2px solid transparent;
          transition: border-color 0.2s;
      }

      .finance-cta:hover {
          border-bottom-color: var(--blue-soft);
      }

      /* COLONNE DROITE : LE VISUEL "CARTE" */
      .finance-visual {
          flex: 1;
          display: flex;
          justify-content: center;
      }

      /* Simulation d'une carte de crédit "Tech" en CSS pur */
      .smart-account-card {
          width: 400px;
          height: 240px;
          background: linear-gradient(135deg, var(--navy-main) 0%, #2d3748 100%);
          border-radius: 20px;
          padding: 30px;
          color: white;
          position: relative;
          box-shadow: 0 20px 50px rgba(26, 31, 54, 0.25);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
      }

      /* Effet de brillance */
      .smart-account-card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
          transform: rotate(45deg);
      }

      .card-chip {
          width: 50px;
          height: 35px;
          background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
          border-radius: 6px;
          margin-bottom: 20px;
          position: relative;
      }

      /* Détail de la puce */
      .card-chip::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 1px;
          background: rgba(0, 0, 0, 0.2);
      }

      .card-number {
          font-family: 'Fira Code', monospace;
          font-size: 1.4rem;
          letter-spacing: 2px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          z-index: 1;
      }

      .card-meta {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          z-index: 1;
      }

      .card-label {
          font-size: 0.7rem;
          text-transform: uppercase;
          opacity: 0.7;
          margin-bottom: 4px;
      }

      .card-value {
          font-weight: 600;
          font-size: 0.9rem;
      }

      /* BANDEAU KPI (BAS) */
      .kpi-strip {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          border-top: 1px solid var(--border-color);
      }

      .kpi-item h3 {
          font-size: 1rem;
          color: #8792a2;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 10px;
      }

      .kpi-item p {
          font-size: 0.95rem;
          color: #4f566b;
          line-height: 1.5;
      }

      .kpi-icon {
          color: var(--gold-accent);
          font-size: 1.5rem;
          margin-bottom: 15px;
          display: block;
      }

      @media (max-width: 768px) {
          .kpi-strip {
              grid-template-columns: 1fr;
          }
      }

      .source-footnote {
          margin-top: 60px;
          font-size: 0.8rem;
          color: #94a3b8;
          text-align: right;
      }

      /*---------------------------------------------------------------------*/
      .security-section {
          background-color: var(--gray-bg);
          /* Fond légèrement grisé pour distinguer du bloc précédent */
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          border-top: 1px solid var(--border-color);
      }

      .container-security {
          max-width: 1200px;
          margin: 0 auto;
          display: block;
      }

      /* EN-TÊTE CENTRÉ */
      .security-header {
          text-align: center;
          margin-bottom: 70px;
          display: block;
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
      }

      .security-label {
          display: inline-block;
          color: var(--gold-accent);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          font-size: 0.85rem;
          margin-bottom: 15px;
          border-bottom: 2px solid var(--gold-accent);
          padding-bottom: 5px;
      }

      .security-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          color: var(--navy-main);
          margin-bottom: 20px;
          line-height: 1.2;
      }

      .security-header p {
          font-size: 1.1rem;
          color: #64748b;
          line-height: 1.6;
      }

      /* STRUCTURE 3 PILIERS */
      .pillars-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          margin-bottom: 60px;
      }

      @media (max-width: 900px) {
          .pillars-grid {
              grid-template-columns: 1fr;
          }
      }

      /* CARTE PILIER */
      .pillar-card {
          background-color: var(--white);
          padding: 40px 30px;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          display: flex;
          flex-direction: column;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          position: relative;
          overflow: hidden;
      }

      .pillar-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(26, 31, 54, 0.08);
          border-color: var(--blue-soft);
      }

      /* LIGNE ACCENT SUPÉRIEUR */
      .pillar-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background-color: var(--navy-main);
          /* Par défaut */
      }

      /* Variantes de couleurs pour la ligne du haut */
      .pillar-card:nth-of-type(1)::before {
          background-color: var(--blue-soft);
      }

      .pillar-card:nth-of-type(2)::before {
          background-color: var(--navy-main);
      }

      .pillar-card:nth-of-type(3)::before {
          background-color: var(--gold-accent);
      }

      .pillar-icon {
          font-size: 2rem;
          margin-bottom: 25px;
          display: block;
      }

      .pillar-card h3 {
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 15px;
          color: var(--navy-main);
      }

      .pillar-card p {
          font-size: 0.95rem;
          color: #64748b;
          line-height: 1.6;
          flex-grow: 1;
          /* Pousse le lien vers le bas */
          margin-bottom: 20px;
      }

      .tech-spec {
          display: block;
          background-color: #f1f5f9;
          padding: 8px 12px;
          border-radius: 4px;
          font-family: 'Fira Code', monospace;
          font-size: 0.75rem;
          color: #475569;
          margin-top: auto;
          /* Colle au bas */
      }

      /* BANDEAU DE CERTIFICATION (BAS) */
      .compliance-footer {
          text-align: center;
          padding-top: 40px;
          border-top: 1px solid #e2e8f0;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 40px;
          flex-wrap: wrap;
      }

      .cert-badge {
          font-weight: 700;
          color: #94a3b8;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 0.9rem;
      }

      .cert-icon {
          width: 20px;
          height: 20px;
          fill: #cbd5e1;
      }

      /*----------------------------------------------------------------------------*/
      .provenance-section {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          border-top: 1px solid var(--border-color);
      }

      .container-provenance {
          max-width: 1000px;
          margin: 0 auto;
          display: block;
      }

      /* HEADER */
      .provenance-header {
          text-align: center;
          margin-bottom: 70px;
          display: block;
      }

      .provenance-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          color: var(--navy-main);
          margin-bottom: 20px;
      }

      .provenance-header p {
          font-size: 1.1rem;
          color: #64748b;
          line-height: 1.6;
          max-width: 700px;
          margin: 0 auto;
      }

      /* LAYOUT CHAÎNE DE CONFIANCE */
      .trust-chain {
          position: relative;
          padding-left: 50px;
          display: block;
      }

      /* LIGNE VERTICALE */
      .trust-chain::before {
          content: '';
          position: absolute;
          top: 20px;
          bottom: 20px;
          left: 19px;
          width: 2px;
          background: linear-gradient(180deg, var(--navy-main) 0%, var(--blue-soft) 50%, var(--gold-accent) 100%);
      }

      /* ÉTAPES (STEPS) */
      .chain-step {
          position: relative;
          margin-bottom: 60px;
          display: block;
      }

      .chain-step:last-child {
          margin-bottom: 0;
      }

      /* POINT INDICATEUR */
      .step-marker {
          position: absolute;
          left: -50px;
          top: 0;
          width: 40px;
          height: 40px;
          background-color: var(--white);
          border: 2px solid var(--navy-main);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          z-index: 2;
          box-shadow: 0 0 0 5px var(--white);
          /* Marge blanche autour */
      }

      .chain-content {
          background-color: var(--gray-bg);
          padding: 30px;
          border-radius: 12px;
          border-left: 4px solid transparent;
          transition: all 0.3s ease;
      }

      .chain-step:nth-of-type(1) .step-marker {
          border-color: var(--navy-main);
          color: var(--navy-main);
      }

      .chain-step:nth-of-type(1) .chain-content {
          border-left-color: var(--navy-main);
      }

      .chain-step:nth-of-type(2) .step-marker {
          border-color: var(--blue-soft);
          color: var(--blue-soft);
      }

      .chain-step:nth-of-type(2) .chain-content {
          border-left-color: var(--blue-soft);
      }

      .chain-step:nth-of-type(3) .step-marker {
          border-color: var(--gold-accent);
          color: var(--gold-accent);
      }

      .chain-step:nth-of-type(3) .chain-content {
          border-left-color: var(--gold-accent);
          background-color: #fffbf0;
      }

      .chain-content h3 {
          font-size: 1.4rem;
          margin-bottom: 10px;
          color: var(--navy-main);
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .chain-content p {
          color: #4f566b;
          line-height: 1.6;
          margin-bottom: 15px;
      }

      .verification-badge {
          display: inline-block;
          font-size: 0.8rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          padding: 4px 8px;
          border-radius: 4px;
          background-color: rgba(26, 31, 54, 0.05);
          color: var(--navy-main);
      }

      /* ALERTE PROBLEME (ASIDE) */
      .problem-alert {
          margin-top: 60px;
          padding: 20px;
          border: 1px solid #fed7aa;
          background-color: #fff7ed;
          border-radius: 8px;
          text-align: center;
          color: #9a3412;
          font-size: 0.95rem;
          display: block;
      }

      /* FOOTER SOURCE */
      .source-note {
          margin-top: 40px;
          font-size: 0.85rem;
          color: #8792a2;
          text-align: center;
          border-top: 1px solid #e2e8f0;
          padding-top: 20px;
          display: block;
      }

      @media (max-width: 600px) {
          .trust-chain {
              padding-left: 0;
          }

          .trust-chain::before {
              display: none;
          }

          .step-marker {
              position: static;
              margin-bottom: 15px;
              width: 30px;
              height: 30px;
              font-size: 0.8rem;
          }
      }

      :root {
          --navy-main: #1a1f36;
          --blue-soft: #5e8ce6;
          --gold-accent: rgb(219, 153, 53);
          --white: #ffffff;
          --gray-light: #f8fafc;
          --border-color: #e2e8f0;
      }

      .sovereignty-section {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          border-top: 1px solid var(--border-color);
      }

      .container-geo {
          max-width: 1100px;
          margin: 0 auto;
          display: block;
      }

      /* HEADER */
      .geo-header {
          text-align: center;
          margin-bottom: 70px;
          display: block;
      }

      .geo-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          color: var(--navy-main);
          margin-bottom: 20px;
      }

      .geo-header p {
          font-size: 1.1rem;
          color: #64748b;
          line-height: 1.6;
          max-width: 800px;
          margin: 0 auto;
      }

      /* SPLIT LAYOUT : GLOBAL VS LOCAL */
      .strategy-split {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          /* Collés ensemble */
          border: 1px solid var(--border-color);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
      }

      @media (max-width: 800px) {
          .strategy-split {
              grid-template-columns: 1fr;
          }
      }

      /* COLONNE GAUCHE : NO LOCK-IN (LIBERTÉ) */
      .zone-freedom {
          background-color: var(--white);
          padding: 50px;
          position: relative;
      }

      /* COLONNE DROITE : LOCAL ZONES (CONTRÔLE) */
      .zone-control {
          background-color: var(--navy-main);
          color: var(--white);
          padding: 50px;
          position: relative;
      }

      /* ICONOGRAPHIE */
      .zone-icon {
          font-size: 2rem;
          margin-bottom: 25px;
          display: block;
      }

      .zone-title {
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 15px;
          display: block;
      }

      /* Couleur spécifique titres */
      .zone-freedom .zone-title {
          color: var(--navy-main);
      }

      .zone-control .zone-title {
          color: var(--white);
      }

      .zone-desc {
          font-size: 1rem;
          line-height: 1.7;
          margin-bottom: 30px;
          display: block;
      }

      .zone-freedom .zone-desc {
          color: #4f566b;
      }

      .zone-control .zone-desc {
          color: #cbd5e1;
      }

      /* LISTE D'AVANTAGES */
      .strat-list {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .strat-list li {
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          font-weight: 500;
      }

      /* Checkmarks adaptés au fond */
      .check-dark {
          color: var(--blue-soft);
          margin-right: 10px;
          font-weight: bold;
      }

      .check-light {
          color: var(--gold-accent);
          margin-right: 10px;
          font-weight: bold;
      }

      .zone-control li {
          color: #f1f5f9;
      }

      /* BADGE GEO (Drapeaux abstraits) */
      .geo-badges {
          margin-top: 30px;
          display: flex;
          gap: 15px;
      }

      .badge-pill {
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 0.8rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
      }

      .pill-freedom {
          background: #f1f5f9;
          color: var(--navy-main);
          border: 1px solid #e2e8f0;
      }

      .pill-control {
          background: rgba(255, 255, 255, 0.1);
          color: var(--white);
          border: 1px solid rgba(255, 255, 255, 0.2);
      }

      /* FOOTER SOURCE */
      .source-note {
          margin-top: 50px;
          font-size: 0.85rem;
          color: #8792a2;
          text-align: center;
          display: block;
      }

      /*------------------------------------------------------------------------------------*/
      .ai-process-section {
          background-color: var(--white);
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
          /* Pas de bordure supérieure ici si c'est la section après le Hero */
      }

      .container-process {
          max-width: 1200px;
          margin: 0 auto;
          display: block;
      }

      /* HEADER */
      .process-header {
          text-align: center;
          margin-bottom: 70px;
          display: block;
      }

      .process-label {
          display: inline-block;
          color: var(--blue-soft);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          font-size: 0.85rem;
          margin-bottom: 15px;
          background: rgba(94, 140, 230, 0.1);
          padding: 6px 12px;
          border-radius: 4px;
      }

      .process-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          color: var(--navy-main);
          margin-bottom: 20px;
      }

      .process-header p {
          font-size: 1.1rem;
          color: #64748b;
          line-height: 1.6;
          max-width: 700px;
          margin: 0 auto;
      }

      /* GRILLE D'ÉTAPES (Process Cards) */
      .process-steps {
          list-style: none;
          padding: 0;
          margin: 0;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
      }

      @media (max-width: 900px) {
          .process-steps {
              grid-template-columns: 1fr;
          }
      }

      /* CARTE INDIVIDUELLE */
      .step-card {
          background-color: var(--white);
          border: 1px solid var(--border-color);
          border-radius: 12px;
          padding: 35px 30px;
          position: relative;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
          height: 100%;
      }

      .step-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(26, 31, 54, 0.08);
          border-color: var(--blue-soft);
      }

      /* NUMÉRO */
      .step-number {
          font-size: 4rem;
          font-weight: 900;
          color: #f1f5f9;
          /* Très clair, en fond */
          position: absolute;
          top: 10px;
          right: 20px;
          line-height: 1;
          user-select: none;
      }

      /* DURÉE (Badge Réaliste) */
      .step-duration {
          display: inline-flex;
          align-items: center;
          font-size: 0.8rem;
          font-weight: 700;
          color: var(--gold-accent);
          margin-bottom: 20px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
      }

      .icon-clock {
          margin-right: 6px;
          font-size: 1rem;
      }

      .step-card h3 {
          font-size: 1.4rem;
          font-weight: 700;
          margin-bottom: 15px;
          color: var(--navy-main);
          position: relative;
          /* Pour passer au dessus du numéro */
      }

      .step-card p {
          color: #4f566b;
          line-height: 1.6;
          font-size: 0.95rem;
          margin-bottom: 25px;
          flex-grow: 1;
          position: relative;
      }

      /* TAGS TECHNIQUES (Footer de carte) */
      .step-footer {
          border-top: 1px solid #f1f5f9;
          padding-top: 20px;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .tech-pill {
          font-size: 0.75rem;
          background-color: #f8fafc;
          color: #64748b;
          padding: 4px 8px;
          border-radius: 4px;
          border: 1px solid #e2e8f0;
          font-family: 'Fira Code', monospace;
      }

      /* CONNECTEURS (Flèches entre cartes en desktop) */
      @media (min-width: 901px) {
          .process-step-item {
              position: relative;
          }

          .process-step-item:not(:last-child)::after {
              content: '→';
              position: absolute;
              top: 50%;
              right: -25px;
              transform: translateY(-50%);
              font-size: 2rem;
              color: #e2e8f0;
              font-weight: 300;
              z-index: 1;
          }
      }

      /*--------------------------------------------------------------------------------------------*/
      .infra-tabs-section {
          background-color: var(--gray-light);
          color: var(--navy-main);
          padding: 100px 20px;
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
      }

      .container-tabs {
          max-width: 1200px;
          margin: 0 auto;
      }

      /* HEADER SECTION */
      .tabs-header {
          text-align: center;
          margin-bottom: 60px;
      }

      .tabs-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          margin-bottom: 20px;
      }

      .tabs-header p {
          color: #64748b;
          font-size: 1.1rem;
          max-width: 700px;
          margin: 0 auto;
      }

      /* LAYOUT PRINCIPAL : SIDEBAR + CONTENT */
      .tabs-layout {
          display: grid;
          grid-template-columns: 300px 1fr;
          gap: 40px;
          background: var(--white);
          border-radius: 24px;
          padding: 40px;
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
          border: 1px solid var(--border-color);
          min-height: 600px;
          /* Hauteur fixe pour éviter les sauts */
      }

      @media (max-width: 900px) {
          .tabs-layout {
              grid-template-columns: 1fr;
              min-height: auto;
          }
      }

      /* NAVIGATION (SIDEBAR) */
      .tabs-nav {
          display: flex;
          flex-direction: column;
          gap: 10px;
          border-right: 1px solid var(--border-color);
          padding-right: 30px;
      }

      @media (max-width: 900px) {
          .tabs-nav {
              border-right: none;
              border-bottom: 1px solid var(--border-color);
              padding-right: 0;
              padding-bottom: 20px;
              flex-direction: row;
              overflow-x: auto;
          }
      }

      .tab-btn {
          text-align: left;
          background: none;
          border: none;
          padding: 15px 20px;
          border-radius: 8px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 600;
          color: #64748b;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .tab-btn:hover {
          background-color: #f1f5f9;
          color: var(--navy-main);
      }

      .tab-btn.active {
          background-color: rgba(94, 140, 230, 0.1);
          color: var(--blue-soft);
      }

      .tab-icon {
          font-size: 1.2rem;
      }

      /* CONTENU DES PANNEAUX */
      .tab-content {
          position: relative;
      }

      .tab-panel {
          display: none;
          animation: fadeIn 0.4s ease;
      }

      .tab-panel.active {
          display: block;
      }

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

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

      /* STRUCTURE INTERNE DU PANNEAU (TEXTE + VISUEL) */
      .panel-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          align-items: center;
      }

      @media (max-width: 768px) {
          .panel-grid {
              grid-template-columns: 1fr;
          }
      }

      .panel-text h3 {
          font-size: 2rem;
          font-weight: 800;
          margin-bottom: 20px;
          color: var(--navy-main);
      }

      .panel-text p {
          font-size: 1.05rem;
          line-height: 1.7;
          color: #4f566b;
          margin-bottom: 30px;
      }

      .feature-list {
          list-style: none;
          padding: 0;
          margin-bottom: 30px;
      }

      .feature-list li {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          font-weight: 500;
          color: var(--navy-main);
      }

      .check {
          color: var(--gold-accent);
          margin-right: 10px;
          font-weight: bold;
      }

      /* VISUEL : ZONE D'IMAGE */
      .panel-visual {
          background-color: #f8fafc;
          border-radius: 16px;
          height: 400px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border: 1px solid var(--border-color);
          position: relative;
      }

      /* Placeholder image pour le dev */
      .img-placeholder {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
      }

      .panel-visual:hover .img-placeholder {
          transform: scale(1.02);
      }

      /* ÉLÉMENTS SPÉCIFIQUES (Badges, etc.) */
      .highlight-badge {
          position: absolute;
          top: 20px;
          right: 20px;
          background: var(--white);
          padding: 8px 16px;
          border-radius: 20px;
          font-weight: 700;
          color: var(--blue-soft);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          z-index: 2;
      }

/* --- SYSTÈME D'ANIMATION --- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(42, 159, 229, 0.2); }
    50% { box-shadow: 0 0 20px rgba(42, 159, 229, 0.5); }
    100% { box-shadow: 0 0 5px rgba(42, 159, 229, 0.2); }
}

@keyframes slide-in {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- VARIABLES --- */
:root {
    --color-1: #fdb33d;
    --color-2: #8aecaa;
    --color-3: #bd89f5;
    --color-azure: #2a9fe5;
    --bg-light: #f8fafc; /* Gris très clair pour le contraste */
}
/*
.container-finance {
    background: var(--bg-light);
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    position: relative;
}
*/
/* --- HALOS D'AMBIANCE --- */
.halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.15;
}

/* --- SESSIONS AVEC ANIMATIONS D'ENTRÉE --- */
.finance-session {
    position: relative;
    padding: 100px 0;
    z-index: 10;
    animation: slide-in 0.8s ease-out forwards;
}

/* --- KPI ITEMS AVEC HALO INDIVIDUEL --- */
.kpi-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 40px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.kpi-item:hover {
    transform: scale(1.02) translateY(-5px);
    background: white;
}

/* Glow au survol spécifique par couleur */
.kpi-item:nth-child(1):hover { box-shadow: 0 15px 40px rgba(253, 179, 61, 0.2); border-color: var(--color-1); }
.kpi-item:nth-child(2):hover { box-shadow: 0 15px 40px rgba(42, 159, 229, 0.2); border-color: var(--color-azure); }
.kpi-item:nth-child(3):hover { box-shadow: 0 15px 40px rgba(138, 236, 170, 0.2); border-color: var(--color-2); }

/* --- CARD FUTURE (EFFET CYBERPUNK LÉGER) --- */
.card-future {
    background: white;
    border: 1px solid rgba(42, 159, 229, 0.3);
    border-radius: 32px;
    padding: 45px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* Halo interne à la carte future */
.card-future::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(42, 159, 229, 0.05) 0%, transparent 70%);
    z-index: -1;
    transition: transform 0.8s ease;
}

.card-future:hover::before {
    transform: translate(10%, 10%);
}

.card-future:hover {
    border-color: var(--color-azure);
    box-shadow: 0 0 30px rgba(42, 159, 229, 0.1);
}

/* --- ICONE M2M ANIMÉE --- */
.m2m-icon svg {
    animation: pulse-glow 3s infinite ease-in-out;
}

/* Tag category animé */
.tag-category {
    display: inline-block;
    background: white;
    border: 1px solid var(--color-azure);
    color: var(--color-azure);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(42, 159, 229, 0.1);
}