/* =======================================================
     * VARIABLES & BASE
     * ======================================================= */
    :root {
      --tsakus-blue: #0066FF;
      --tsakus-cyan: #00A0FF;
      --tsakus-dark: #0B101E;
      --tsakus-panel: #121929;
      --tsakus-gold: #FFB400;
      --font-default: 'Inter', sans-serif;
      --font-title: 'Poppins', sans-serif;
    }

    body {
      font-family: var(--font-default);
      color: #333;
      background-color: #f8f9fa;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-title);
    }







/* =======================================================
 * PRECHARGEUR TSAKUS (Identité Visuelle)
 * ======================================================= */
/* =======================================================
 * PRECHARGEUR TSAKUS (Identité Visuelle - Taille 50%)
 * ======================================================= */
#tsa-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0B101E; /* Le fond bleu nuit emblématique de Tsakus */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

/* Le conteneur réduit de moitié (160px au lieu de 320px) */
.tsa-loader-wrapper {
    position: relative;
    width: 160px; 
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 160, 255, 0.15); /* Halo cyan ajusté */
}

/* L'animation SFC : Le flux lumineux qui tourne */
.tsa-loader-wrapper::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: conic-gradient(transparent, transparent, transparent, #00ffff);
    animation: tsa-spin-sfc 1.2s linear infinite;
}

/* Le masque noir réduit de moitié (155px au lieu de 310px) */
.tsa-loader-wrapper::after {
    content: '';
    position: absolute;
    width: 155px; 
    height: 155px;
    background-color: #0B101E;
    border-radius: 50%;
}

/* L'image centrale réduite de moitié (150px au lieu de 300px) */
.tsa-loader-img {
    position: relative;
    z-index: 10;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: contain;
}

/* L'animation de rotation continue */
@keyframes tsa-spin-sfc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Classe de masquage */
.tsa-preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =======================================================
     * BOUTON ACTIVER (Premium Style)
     * ======================================================= */
    .btn-activate-top {
      background-color: var(--tsakus-gold, #FFB400); /* Couleur dorée pour le premium */
      color: #0B101E !important;
      padding: 10px 24px;
      border-radius: 8px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(255, 180, 0, 0.2);
    }
    .btn-activate-top:hover {
      background-color: #e6a200;
      box-shadow: 0 6px 15px rgba(255, 180, 0, 0.4);
      transform: translateY(-2px);
    }

    .btn-activate-top-label-mobile {
      display: none; /* label court réservé au bouton flottant mobile */
    }

    /* Ajustement logo mobile */
    @media (max-width: 991px) {
        .logo-container img { max-height: 40px; }
    }

    /* =======================================================
     * HEADER MOBILE : le sélecteur de devise + le bouton "Activer
     * la licence" + le bouton menu ne tenaient pas sur une largeur
     * mobile (le bouton menu était poussé hors de l'écran, donc
     * invisible). Le bouton "Activer la licence" devient un bouton
     * flottant en bas à droite de l'écran, ce qui libère la place
     * nécessaire au bouton menu dans le header.
     * ======================================================= */
    @media (max-width: 991.98px) {
      .header .btn-activate-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1045;
        height: 50px;
        padding: 0 20px;
        border-radius: 50px;
        justify-content: center;
        font-size: 15px;
        gap: 10px;
        box-shadow: 0 8px 24px rgba(255, 180, 0, 0.45);
      }
      .header .btn-activate-top i {
        font-size: 18px;
      }
      .header .btn-activate-top-label {
        display: none; /* la version longue reste réservée au bouton du header desktop */
      }
      .header .btn-activate-top-label-mobile {
        display: inline; /* label court "Activation" à côté de l'icône sur mobile */
      }
      .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
    }







    /* =======================================================
     * HEADER / NAVBAR
     * ======================================================= */
    .header {
      background-color: #ffffff;
      box-shadow: 0 2px 15px rgba(0,0,0,0.05);
      padding: 15px 0;
    }
    
    .logo-container img {
      max-height: 50px;
    }

    .navmenu ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
      gap: 30px;
    }

    .navmenu a {
      color: #555;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      transition: color 0.3s;
    }

    .navmenu a:hover, .navmenu a.active, .navbar-nav a.active {
      color: var(--tsakus-blue);
    }
 
/* Desktop */
.navmenu ul li a.active {
    color: var(--tsakus-blue) !important;
    font-weight: 700 !important;
}

/* Mobile */
ul.navbar-nav li.nav-item.active a.nav-link {
    color: var(--tsakus-blue) !important;
    font-weight: 700 !important;
}
	
	
	

    .btn-download-top {
      background-color: var(--tsakus-blue);
      color: white !important;
      padding: 10px 24px;
      border-radius: 8px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
      text-decoration: none;
    }
    .btn-download-top:hover {
      background-color: #0052cc;
      box-shadow: 0 5px 15px rgba(0,102,255,0.3);
    }

    /* =======================================================
     * HERO SECTION (SLIDER)
     * ======================================================= */
    .hero {
      position: relative;
      background: radial-gradient(circle at center, #122144 0%, #0B101E 100%);
      padding: 15px 0 80px 0;
      overflow: hidden;
      color: white;
      margin-top: 70px; /* Offset for fixed header */
    }

    /* Image de fond ajoutée dynamiquement avec opacité */
    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: url('../../images/slide3.jpg') center/cover no-repeat;
      
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
	  background: rgba(0, 0, 0, 0.5);
    }

    /* Mobile : l'image de fond derrière le texte rendait le contenu illisible
       (texte et image se mélangeaient). On la retire et on repasse sur un fond
       plat clair, le texte reste lisible grâce au bloc semi-transparent de
       .hero-content au-dessus. */
    @media (max-width: 991.98px) {
      .hero::before { display: none; }
      .hero { background: rgb(219, 234, 254); }
      /* Le bloc semi-transparent sombre n'a plus lieu d'être sans l'image derrière :
         on repasse en texte foncé (couleurs définitives plus bas, après les règles
         de base .hero h1/.hero p pour bien les surcharger en cascade). */
      .hero-content { background: transparent; }
    }

    .badge-hero {
      background: rgba(0, 160, 255, 0.1);
      border: 1px solid rgba(0, 160, 255, 0.3);
      color: var(--tsakus-cyan);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 25px;
    }

    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 20px;
    }

    .hero h1 span {
      color: var(--tsakus-cyan);
    }

    .hero p {
      font-size: 1.1rem;
      color: #CBD5E1;
      max-width: 600px;
      margin-bottom: 40px;
    }

    /* =======================================================
     * ANIMATION SFC (Bouton Télécharger)
     * ======================================================= */
    .btn-hero-primary {
      position: relative;
      background-color: var(--tsakus-blue);
      color: white !important;
      padding: 14px 32px;
      border-radius: 12px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 1;
      border: none;
      box-shadow: 0 0 20px rgba(0, 102, 255, 0.4);
      transition: all 0.3s;
      cursor: pointer;
    }

    /* Le conteneur du texte pour passer au-dessus de l'animation */
    .btn-hero-primary .btn-content {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Le fond sombre qui creuse le centre (visible uniquement pendant l'animation) */
    .btn-hero-primary::after {
      content: '';
      position: absolute;
      inset: 2px; /* L'épaisseur de la bordure lumineuse (2px) */
      background: #0B101E; /* Fond très sombre façon terminal */
      border-radius: 10px;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Le faisceau lumineux tournant */
    .btn-hero-primary::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%; width: 200%; height: 200%;
      background: conic-gradient(transparent, transparent, transparent, #00ffff); /* Faisceau Cyan */
      animation: sfc-spin 1.5s linear infinite;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s;
    }

    @keyframes sfc-spin {
      100% { transform: rotate(360deg); }
    }

    /* --- Activation de l'état "Téléchargement" via JavaScript --- */
    .btn-hero-primary.is-downloading::before,
    .btn-hero-primary.is-downloading::after {
      opacity: 1;
    }
    .btn-hero-primary.is-downloading {
      box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); /* Lueur globale cyan */
    }
    .spin-fast {
      animation: sfc-spin 1s linear infinite;
    }

    /* =======================================================
     * BOUTON VIP (Commander la Licence)
     * ======================================================= */
    .btn-vip-gold {
      background: linear-gradient(135deg, #f59e0b 0%, #FFB400 100%);
      color: #0B101E !important; /* Texte foncé pour un contraste luxe */
      padding: 14px 32px;
      border-radius: 12px;
      font-weight: 800;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 0 20px rgba(255, 180, 0, 0.3);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .btn-vip-gold:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 30px rgba(255, 180, 0, 0.6);
      background: linear-gradient(135deg, #FFB400 0%, #fbbf24 100%);
    }

    .hero-features {
      margin-top: 40px;
      display: flex;
      gap: 30px;
      font-size: 14px;
      color: #94A3B8;
    }

    .hero-features i {
      color: var(--tsakus-cyan);
      margin-right: 8px;
    }

    /* Couleurs de texte du hero en mobile : sans le bloc sombre semi-transparent
       derrière (retiré ci-dessus), le texte clair d'origine ne ressortirait plus
       sur le nouveau fond clair. Placé après les règles de base pour bien les
       surcharger (même sélecteur, même spécificité : l'ordre décide). */
    @media (max-width: 991.98px) {
      .hero h1 { color: #0B101E; }
      .hero p { color: #334155; }
      .hero-features { color: #475569; }
    }

    /* Bouclier SVG à droite */
    .shield-container {
      position: relative;
      z-index: 2;
      text-align: center;
    }
    
    .shield-container svg {
      width: 100%;
      max-width: 450px;
      filter: drop-shadow(0 0 40px rgba(0, 160, 255, 0.5));
    }

    /* =======================================================
     * STATS BAR
     * ======================================================= */
    .stats-bar {
      position: relative;
      z-index: 10;
      margin-top: -40px;
    }
    
    .stats-box {
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
      padding: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px;
    }

    .stat-icon {
      width: 50px; height: 50px;
      border-radius: 50%;
      display: flex; justify-content: center; align-items: center;
      font-size: 22px;
    }

    .stat-item h4 { margin: 0; font-size: 24px; font-weight: 800; color: #1e293b; }
    .stat-item p { margin: 0; font-size: 12px; color: #64748b; text-transform: uppercase; }

    /* =======================================================
     * FEATURES GRID
     * ======================================================= */
    .features-section {
      padding: 30px 0 10px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 20px;
    }

    .section-title h2 { font-weight: 800; color: #0f172a; margin-bottom: 15px; }
    .section-title p { color: #64748b; font-size: 1.1rem; }

    .feature-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 35px 25px;
      text-align: center;
      height: 100%;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    }

    .feature-icon {
      width: 60px; height: 60px;
      margin: 0 auto 20px;
      border-radius: 15px;
      display: flex; justify-content: center; align-items: center;
      font-size: 28px;
    }

    .feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase;}
    .feature-card p { font-size: 13px; color: #64748b; line-height: 1.6; margin: 0;}

    /* =======================================================
     * TECHNOLOGIE EXCLUSIVE (USB)
     * ======================================================= */
    .usb-tech-section {
      padding: 40px 0;
    }

    .usb-box {
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 50px rgba(0,0,0,0.05);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 50px;
      border: 1px solid #f1f5f9;
    }

    .usb-image img {
      max-width: 300px;
      filter: drop-shadow(0 20px 30px rgba(0, 102, 255, 0.2));
    }

    .usb-content h4 { color: var(--tsakus-blue); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
    .usb-content h2 { font-size: 32px; font-weight: 800; margin-bottom: 20px; }
    .usb-content p { color: #64748b; font-size: 16px; margin-bottom: 40px; }

    .usb-steps {
      display: flex;
      gap: 20px;
    }

    .step-item {
      text-align: center;
      flex: 1;
    }

    .step-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      margin: 0 auto 15px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; color: white;
    }
    .step-item h5 { font-size: 12px; font-weight: 700; margin-bottom: 8px;}
    .step-item p { font-size: 11px; color: #64748b;}
	
	
	/* =======================================================
     * AJUSTEMENTS MOBILES POUR LA SECTION USB
     * ======================================================= */
    @media (max-width: 991.98px) {
      .usb-box {
        gap: 20px; /* Réduit le grand trou de 50px entre l'image et le texte sur mobile */
        padding: 30px 15px;
      }
      .usb-image img {
        max-width: 200px; /* Réduit un peu la taille de la clé sur mobile */
      }
      .step-item {
        margin-bottom: 15px; /* Ajoute de l'espace en bas quand les étapes passent sur 2 lignes */
      }
    }
	
	
	

    /* =======================================================
     * PRICING (LICENCES)
     * ======================================================= */
    .pricing-section {
      padding: 20px 0;
      background-color: #fff;
    }

    .pricing-card {
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 10px;
      position: relative;
      background: #fafbfc;
    }

    .pricing-card.pro { border-color: #bfdbfe; }
    .pricing-card.hultimate { background: #fffbf0; border-color: #fde68a; }

    .badge-pricing {
      position: absolute;
      top: -15px; left: 20px;
      padding: 6px 15px;
      color: white;
      font-weight: 700;
      font-size: 12px;
      border-radius: 1px;
      text-transform: uppercase;
    }

    .pricing-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
	  margin-top:20px;
    }

    .pricing-header h3 { font-size: 22px; font-weight: 800; margin: 0; }
    .durabilite { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }

    .pro .durabilite { background: #dbeafe; color: #1e40af; }
    .hultimate .durabilite { background: #fef3c7; color: #b45309; }

    .pricing-price { margin: 5px 0; }
    .old-price { text-decoration: line-through; color: #94a3b8; font-size: 14px; font-weight: 600;}
    .discount { background: #ef4444; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-left: 10px;}
    .new-price { font-size: 30px; font-weight: 600; }
    .pro .new-price { color: var(--tsakus-blue); }
    .hultimate .new-price { color: var(--tsakus-gold); }

    .pricing-features list-style { padding: 0; margin: 0; }
    .pricing-features li { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #475569;}
    .pricing-features i { color: #10b981; font-size: 16px; }

    .btn-buy {
      width: 50%; padding: 10px; border-radius: 6px; font-weight: 500; border: none; margin-top: 1px; transition: 0.3s;
    }
    .pro .btn-buy { background: var(--tsakus-blue); color: white; }
    .pro .btn-buy:hover { background: #0052cc; }
    .hultimate .btn-buy { background: var(--tsakus-gold); color: white; }
    .hultimate .btn-buy:hover { background: #e6a200; }

    /* =======================================================
     * PARTNERS & FOOTER
     * ======================================================= */
    /*=========================================================
/*==================================================
PARTNERS
==================================================*/

.partners-section{

    background:#07101f;
    padding:10px 0;
	margin-top:30px;
    position:relative;
    overflow:hidden;

}

.partners-section::before{

    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at center,#0e4cff22,transparent 60%), linear-gradient(180deg,#081325,#06101f);

}

.partners-section .container{

    position:relative;
    z-index:2;

}

/*========================*/

.partners-title{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-bottom:18px;

}

.partners-title h6{

    color:#fff;
    font-size:18px;
    letter-spacing:8px;
    font-weight:700;
    margin:0;

}

.partners-title .line{

    width:170px;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #2ea8ff,
        transparent
    );

}

/*========================*/

.partners-icon{

    display:flex;
    justify-content:center;
    margin-bottom:25px;

}

.partners-icon img{

    width:58px;

    filter: drop-shadow(0 0 20px #0ea5ff) drop-shadow(0 0 8px #0ea5ff);

}
 

.earth-light::before{

    content:"";
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 width:100%;
 height:220px;
 border-top:2px solid rgba(75,180,255,.45);
 border-radius:100%;
 top:-110px;

}

/*========================*/

.partners-logos{

 display:grid;
 grid-template-columns:repeat(6,1fr);
 gap:0;
 margin-bottom:10px;

}

.partner-item{

 display:flex;
 justify-content:center;
 align-items:center;
 padding:30px 15px;
 border-right:1px solid rgba(255,255,255,.08);
 transition:.35s;

}

.partner-item:last-child{ border-right:none; }

.partner-item img{

     height:100px;
	 max-width:170px;
	 width:auto;
	 transition:.35s;
	 filter: brightness(1) drop-shadow(0 0 12px rgba(0,170,255,.18));

}

.partner-item:hover{ transform:translateY(-6px); }

.partner-item:hover img{

    transform:scale(1.12);
    filter:  brightness(1.25) drop-shadow(0 0 18px #1ea7ff);

}

 

@media(max-width:991px){

.partners-logos{ grid-template-columns:repeat(2,1fr); gap:25px; }
.partner-item{ border:none; }

  

}

    .footer { background: #ffffff; padding: 60px 0 30px 0; border-top: 1px solid #e2e8f0; }
    .footer-col h5 { font-size: 16px; font-weight: 800; margin-bottom: 20px; }
    .footer-col ul { list-style: none; padding: 0; }
    .footer-col ul li { margin-bottom: 10px; }
    .footer-col ul li a { color: #64748b; text-decoration: none; font-size: 14px; }
    .footer-col ul li a:hover { color: var(--tsakus-blue); }
    .copyright { border-top: 1px solid #e2e8f0; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 12px; color: #94a3b8; }



/*=============================================================================*/
/*Hero de la page ressource*/
/*=============================================================================*/


  .hero-ressources {
    position: relative;
    padding: 140px 0 100px 0;
    /* L'image de fond avec un léger dégradé blanc pour s'assurer que le texte reste lisible */
    background:url('../../images/slide5.jpg') center right/cover no-repeat;
    background-color: #f4f8ff; /* Fallback couleur claire */
    overflow: hidden;
  }

  .badge-ressources {
    background-color: #e0e7ff;
    color: var(--tsakus-blue);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 25px;
  }

  .hero-ressources h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0B101E; /* Bleu très foncé presque noir */
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title, 'Poppins', sans-serif);
  }

  .hero-ressources h1 span {
    color: var(--tsakus-blue);
  }

  .hero-ressources p {
    font-size: 1.1rem;
    color: #475569;
    max-width: 500px;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 400;
  }

  /* Bouton Principal Bleu */
  .btn-ressource-primary {
    background-color: var(--tsakus-blue);
    color: white !important;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
    transition: all 0.3s;
    border: none;
  }
  .btn-ressource-primary:hover {
    background-color: #0052cc;
    transform: translateY(-2px);
  }

  /* Boutons Secondaires Transparents avec bordure */
  .btn-ressource-secondary {
    background-color: transparent;
    color: var(--tsakus-blue) !important;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #bfdbfe; /* Bordure bleu clair */
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
  }
  .btn-ressource-secondary:hover {
    background-color: #eff6ff;
    border-color: var(--tsakus-blue);
  }

  /* Ajustements pour mobile */
  @media (max-width: 991.98px) {
    .hero-ressources {
      padding: 100px 0 60px 0;
      /* Sur mobile, l'image de fond mélangeait texte et visuel : fond plat à la place. */
      background: rgb(219, 234, 254);
      text-align: center;
    }
    .hero-ressources p {
      margin: 0 auto 30px auto;
    }
    .hero-ressources h1 {
      font-size: 2.5rem;
    }
    .ressources-buttons {
      justify-content: center;
    }
  }
  
  
  
  
  
  /*=============================================================================*/
/*Guide d'activation  de la page ressource*/
/*=============================================================================*/
  
  
    
.tsa-guide-section {
    background-color: #f8fafc;
    padding: 20px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
    color: #1e293b;
  }

 

  /* Titre */
  .tsa-guide-header { margin-bottom: 50px; }
  .tsa-guide-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
  }
  .tsa-guide-title::before {
    content: ''; display: block; width: 6px; height: 30px;
    background-color: var(--tsakus-blue, #0066FF); border-radius: 4px;
  }
  .tsa-guide-subtitle { color: #475569; font-size: 15px; }

  /* * LA GRILLE CSS (La clé pour un rendu parfait)
   * 4 colonnes en haut, 4 colonnes en bas (mais l'étape 5 prend 2 colonnes)
   */
  .tsa-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
  }

  /* Flèches pointillées en arrière-plan de la ligne du haut */
  .tsa-guide-grid::before {
    content: '';
    position: absolute;
    top: 150px; /* Hauteur où passe la ligne */
    left: 10%; right: 10%;
    height: 2px;
    background-image: linear-gradient(to right, #bfdbfe 50%, transparent 50%);
    background-size: 15px 2px;
    z-index: 0;
  }
  @media (max-width: 991px) {
    .tsa-guide-grid::before { display: none; }
  }

  /* Les Cartes */
  .tsa-guide-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    z-index: 1; /* Pour être au-dessus des pointillés */
    display: flex;
    flex-direction: column;
  }

  /* Pour la carte étape 5 (qui est plus grande) */
  .tsa-guide-card.span-2 {
    grid-column: span 2;
    padding: 25px 30px;
  }

  /* Puces numérotées */
  .tsa-guide-number {
    position: absolute; top: 15px; left: 15px;
    width: 28px; height: 28px;
    background-color: var(--tsakus-blue, #0066FF);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; z-index: 2;
  }

  /* Icônes centrales */
  .tsa-guide-icon-wrapper {
    width: 65px; height: 65px;
    background-color: #eff6ff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 15px auto 20px auto;
    color: var(--tsakus-blue, #0066FF); font-size: 28px;
  }

  /* Textes */
  .tsa-guide-card-title {
    font-size: 16px; font-weight: 800; text-align: center;
    margin-bottom: 12px; line-height: 1.3; color: #0f172a;
  }
  .tsa-guide-card-text {
    font-size: 12.5px; color: #475569; text-align: center;
    line-height: 1.6; margin-bottom: 0; flex-grow: 1;
  }
  .tsa-guide-link { color: var(--tsakus-blue, #0066FF); font-weight: 600; text-decoration: none; }

  /* Boîte bleue claire (Étape 0) */
  .tsa-guide-info-box {
    background-color: #f0f4ff; border-radius: 10px;
    padding: 12px; display: flex; gap: 10px; align-items: flex-start;
    margin-top: 15px;
  }
  .tsa-guide-info-box i { color: var(--tsakus-blue, #0066FF); font-size: 16px; }
  .tsa-guide-info-box p { font-size: 11px; color: #334155; margin: 0; font-weight: 500; }

  /* Étape 5 Spécifique */
  .tsa-guide-large-header { display: flex; align-items: center; margin-bottom: 10px; }
  .tsa-guide-card.span-2 .tsa-guide-number { position: relative; top: auto; left: auto; margin-right: 12px; }
  .tsa-guide-large-title { font-size: 18px; font-weight: 800; margin: 0; color: #0f172a; }
  .tsa-guide-large-text { font-size: 13px; color: #475569; margin-bottom: 20px; }
  
  .tsa-guide-sub-box {
    background-color: #f8fafc; border-radius: 10px;
    padding: 15px; display: flex; gap: 12px; margin-bottom: 10px;
  }
  .tsa-guide-sub-icon { color: var(--tsakus-blue, #0066FF); font-size: 20px; margin-top: -2px; }
  .tsa-guide-sub-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #0f172a; }
  .tsa-guide-sub-text { font-size: 11.5px; color: #475569; margin: 0; line-height: 1.5; }

  /* Faux inputs (Étape 6 & 7) */
  .tsa-guide-mock-input {
    background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 10px; font-size: 11px; color: #94a3b8; text-align: center;
    margin-bottom: 8px; font-family: monospace;
  }
  .tsa-guide-mock-btn {
    background-color: var(--tsakus-blue, #0066FF); color: white; border-radius: 6px;
    padding: 10px; text-align: center; font-weight: 700; font-size: 11px; width: 100%;
  }

  /* Footer */
  .tsa-guide-footer {
    background: #ffffff; border-radius: 10px; padding: 20px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px;
  }

  /* Responsive Mobile */
  @media (max-width: 991px) {
    .tsa-guide-grid { grid-template-columns: repeat(2, 1fr); }
    .tsa-guide-card.span-2 { grid-column: span 2; }
  }
  @media (max-width: 767px) {
    .tsa-guide-grid { grid-template-columns: 1fr; }
    .tsa-guide-card.span-2 { grid-column: span 1; }
  }




  /*=============================================================================*/
/*faq  de la page ressource*/
/*=============================================================================*/




.tsa-faq-section {
    background-color: #f8fafc; /* Fond très légèrement bleuté/gris de la maquette */
    padding: 20px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
  }

  /* Titre avec la barre verticale */
  .tsa-faq-header {
    margin-bottom: 40px;
  }
  .tsa-faq-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .tsa-faq-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 28px;
    background-color: var(--tsakus-blue, #0066FF);
    border-radius: 4px;
  }
  .tsa-faq-subtitle {
    color: #475569;
    font-size: 15px;
  }

  /* Styles de l'accordéon Bootstrap sur-mesure */
  .tsa-faq-accordion .accordion-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    background-color: #fff;
    overflow: hidden;
  }
  
  .tsa-faq-accordion .accordion-button {
    font-weight: 700;
    font-size: 14.5px;
    color: #1e293b;
    padding: 20px 25px;
    background-color: #fff;
    box-shadow: none !important;
  }
  
  /* Couleur du texte quand ouvert */
  .tsa-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--tsakus-blue, #0066FF);
    background-color: #fff;
  }

  /* Remplacement du chevron Bootstrap par un chevron bleu personnalisé */
  .tsa-faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230066FF'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    transition: transform 0.3s ease;
  }

  .tsa-faq-accordion .accordion-body {
    padding: 0 25px 20px 25px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.7;
    border-top: none;
  }
  
  
  
  
  
 
  /*=============================================================================*/
/*blog de la page ressource*/
/*=============================================================================*/ 
  
  
  
  .tsa-blog-section {
    background-color: #f8fafc; /* Raccord avec le fond global */
    padding: 20px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
  }

  /* --- En-tête de section --- */
  .tsa-blog-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .tsa-blog-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .tsa-blog-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 28px;
    background-color: var(--tsakus-blue, #0066FF);
    border-radius: 4px;
  }

  .tsa-blog-subtitle {
    color: #475569;
    font-size: 15px;
    margin: 0;
  }

  .tsa-blog-view-all {
    color: var(--tsakus-blue, #0066FF);
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
  }
  .tsa-blog-view-all:hover {
    color: #0052cc;
    transform: translateX(3px);
  }

  /* --- Cartes du Blog --- */
  .tsa-blog-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .tsa-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
  }

  .tsa-blog-img-wrapper {
    height: 180px;
    width: 100%;
    background-color: #0B101E; /* Fallback couleur foncée */
    overflow: hidden;
  }
  .tsa-blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .tsa-blog-card:hover .tsa-blog-img-wrapper img {
    transform: scale(1.05);
  }

  .tsa-blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .tsa-blog-badge {
    background-color: var(--tsakus-blue, #0066FF);
    color: white;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    align-self: flex-start;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
  }

  .tsa-blog-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .tsa-blog-date {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
  }

  .tsa-blog-excerpt {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .tsa-blog-readmore {
    color: var(--tsakus-blue, #0066FF);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    transition: gap 0.3s;
  }
  .tsa-blog-card:hover .tsa-blog-readmore {
    gap: 10px;
  }

  /* --- Bannière Newsletter --- */
  .tsa-blog-newsletter {
    background-color: var(--tsakus-blue, #0066FF);
    border-radius: 16px;
    margin-top: 50px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
  }

  /* Motifs à points sur les côtés */
  .tsa-blog-newsletter::before,
  .tsa-blog-newsletter::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
    z-index: 1;
  }
  .tsa-blog-newsletter::before { left: -50px; }
  .tsa-blog-newsletter::after { right: -50px; }

  .tsa-news-left {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
    color: white;
  }

  .tsa-news-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .tsa-news-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 5px;
  }

  .tsa-news-desc {
    font-size: 14px;
    margin: 0;
    opacity: 0.9;
  }

  .tsa-news-right {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 450px;
  }

  .tsa-news-form {
    display: flex;
    background: white;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 10px;
  }

  .tsa-news-input {
    border: none;
    padding: 12px 20px;
    flex-grow: 1;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    outline: none;
    color: #333;
  }

  .tsa-news-btn {
    background-color: #0f172a; /* Bleu très sombre */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tsa-news-btn:hover {
    background-color: #1e293b;
  }

  .tsa-news-disclaimer {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  @media (max-width: 991px) {
    .tsa-blog-newsletter {
      flex-direction: column;
      align-items: flex-start;
      padding: 30px 20px;
    }
  }
  @media (max-width: 576px) {
    .tsa-news-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }
  }
  
   
 
  /*=============================================================================*/
/*hero de la page support*/
/*=============================================================================*/ 


.tsa-support-hero-section {
    position: relative;
    padding: 120px 0 100px 0;
    /* Dégradé blanc/bleu très clair qui s'estompe vers la droite pour laisser voir l'image */
    background: url('../../images/slide8.jpg') center right/cover no-repeat;
    background-color: #f4f8ff; /* Fallback */
    font-family: var(--font-default, 'Inter', sans-serif);
    overflow: hidden;
  }

  /* Badge "PARTENARAT" */
  .tsa-support-hero-badge {
    background-color: #e0e7ff;
    color: var(--tsakus-blue, #0066FF);
    padding: 6px 16px;
    border-radius: 6px; /* Plus carré que les autres badges selon la maquette */
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 25px;
  }

  /* Titre Principal */
  .tsa-support-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0B101E;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: var(--font-title, 'Poppins', sans-serif);
    letter-spacing: -0.5px;
  }

  .tsa-support-hero-title span {
    color: var(--tsakus-blue, #0066FF);
  }

  /* Paragraphe de description */
  .tsa-support-hero-desc {
    font-size: 1.1rem;
    color: #475569;
    max-width: 450px;
    margin-bottom: 50px;
    line-height: 1.6;
    font-weight: 500;
  }

  /* --- Blocs des 4 caractéristiques --- */
  .tsa-support-feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .tsa-support-feature-icon {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tsakus-blue, #0066FF);
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    margin-bottom: 15px;
    border: 1px solid rgba(0,0,0,0.02);
  }

  .tsa-support-feature-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
  }

  .tsa-support-feature-text {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    max-width: 150px;
  }

  /* Responsive pour Mobile et Tablette */
  @media (max-width: 991.98px) {
    .tsa-support-hero-section {
      padding: 100px 0 60px 0;
      /* Sur mobile, l'image de fond mélangeait texte et visuel : fond plat à la place. */
      background: rgb(219, 234, 254);
      text-align: center;
    }
    
    .tsa-support-feature-item {
      align-items: center;
      margin-bottom: 30px;
    }
    
    .tsa-support-hero-desc {
      margin: 0 auto 40px auto;
    }
    
    .tsa-support-hero-title {
      font-size: 2.5rem;
    }
  }



 
  /*=============================================================================*/
/*suite de la page support*/
/*=============================================================================*/ 

.tsa-part-section {
    background-color: #ffffff; /* Fond blanc comme sur la maquette */
    padding: 60px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
    color: #1e293b;
  }

  /* --- Titres de sections communs --- */
  .tsa-part-header { margin-bottom: 40px; }
  .tsa-part-title {
    font-size: 26px; font-weight: 800; color: #0f172a;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; text-transform: uppercase;
  }
  .tsa-part-title::before {
    content: ''; display: block; width: 5px; height: 26px;
    background-color: var(--tsakus-blue, #0066FF); border-radius: 4px;
  }
  .tsa-part-subtitle { color: #475569; font-size: 14px; margin: 0; line-height: 1.5; }

  /* ==============================================
   * 1. SECTION TARIFS PARTENAIRES
   * ============================================== */
  .tsa-part-section {
    background-color: #f8fafc; /* Légèrement grisé pour faire ressortir les blocs blancs */
    padding: 60px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
    color: #1e293b;
  }

  /* --- Titre principal --- */
  .tsa-part-header { margin-bottom: 40px; }
  .tsa-part-title {
    font-size: 28px; font-weight: 900; color: #0f172a;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; text-transform: uppercase;
  }
  .tsa-part-title span { color: var(--tsakus-blue, #0066FF); }
  .tsa-part-title::before {
    content: ''; display: block; width: 6px; height: 30px;
    background-color: var(--tsakus-blue, #0066FF); border-radius: 4px;
  }
  .tsa-part-subtitle { color: #475569; font-size: 15px; margin: 0; line-height: 1.5; font-weight: 500; }

  /* --- Conteneur Principal (PRO & HULTIMATE) --- */
  .tsa-tier-box {
    display: flex;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    overflow: hidden;
    margin-bottom: 30px;
  }

  /* --- Bannières Gauche (Image + Caractéristiques) --- */
  .tsa-tier-banner {
    width: 40%;
    flex-shrink: 0;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
  }
  .tsa-tier-banner.pro-bg {
    background: radial-gradient(circle at top left, #05193d 0%, #000c24 100%);
  }
  .tsa-tier-banner.hult-bg {
    background: radial-gradient(circle at top left, #362203 0%, #170d00 100%);
  }

  .tsa-banner-img { flex: 1; text-align: center; }
  .tsa-banner-img img { max-width: 100%; height: auto; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)); }
  
  .tsa-banner-text { flex: 1.2; }
  .tsa-banner-text h2 { font-size: 38px; font-weight: 900; margin-bottom: 5px; line-height: 1; }
  .pro-text h2 { color: #00A0FF; }
  .hult-text h2 { color: #FFB400; }
  
  .tsa-banner-text p { font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 20px; color: #cbd5e1; }
  
  .tsa-tier-features { list-style: none; padding: 0; margin: 0; }
  .tsa-tier-features li { display: flex; align-items: center; gap: 10px; font-size: 11px; margin-bottom: 10px; font-weight: 500; color: #e2e8f0;}
  .tsa-tier-features i { font-size: 15px; }
  .pro-text .tsa-tier-features i { color: #00A0FF; }
  .hult-text .tsa-tier-features i { color: #FFB400; }

  /* --- Grille Droite (Les 4 cartes de prix) --- */
  .tsa-tier-cards {
    width: 60%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    background: #ffffff;
  }

  .tsa-pack {
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s;
  }
  .tsa-pack:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }

  .tsa-pack-head {
    color: white; font-weight: 800; font-size: 10px; padding: 12px 5px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px;
  }
  .tsa-pack.pro .tsa-pack-head { background: #0066FF; }
  .tsa-pack.hult .tsa-pack-head { background: #FFB400; }

  .tsa-pack-body { padding: 20px 10px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; }

  /* Bouclier SVG Custom pour les cartes */
  .tsa-pack-shield { position: relative; margin-bottom: 15px; width: 45px; height: 50px; }
  .tsa-pack-shield svg { width: 100%; height: 100%; }
  .tsa-pack.pro .tsa-pack-shield svg path { stroke: #0066FF; }
  .tsa-pack.hult .tsa-pack-shield svg path { stroke: #FFB400; }
  .tsa-pack-shield span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 13px; font-weight: 900;
  }
  .tsa-pack.pro .tsa-pack-shield span { color: #0066FF; }
  .tsa-pack.hult .tsa-pack-shield span { color: #FFB400; }
  /* Couronne Hultimate */
  .tsa-hult-crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: #FFB400; font-size: 16px; }

  /* Prix dans les cartes */
  .tsa-pack-price { font-size: 20px; font-weight: 900; color: #0f172a; margin-bottom: 2px; white-space: nowrap; }
  .tsa-pack-old { font-size: 10px; color: #94a3b8; text-decoration: line-through; margin-bottom: 6px; }
  
  .tsa-pack-badge { font-size: 11px; color: white; padding: 2px 10px; border-radius: 4px; font-weight: 800; margin-bottom: 15px; display: inline-block;}
  .tsa-pack.pro .tsa-pack-badge { background: #0066FF; }
  .tsa-pack.hult .tsa-pack-badge { background: #FFB400; }

  .tsa-pack-unit { background: #f8fafc; border: 1px solid #f1f5f9; color: #475569; font-size: 10px; font-weight: 600; padding: 8px 4px; border-radius: 6px; width: 100%; margin-bottom: 15px;}
  
  .tsa-pack-btn { width: 100%; padding: 12px; font-size: 12px; font-weight: 700; color: white; border: none; border-radius: 6px; margin-top: auto; transition: 0.3s;}
  .tsa-pack.pro .tsa-pack-btn { background: #0066FF; }
  .tsa-pack.pro .tsa-pack-btn:hover { background: #0052cc; }
  .tsa-pack.hult .tsa-pack-btn { background: #FFB400; }
  .tsa-pack.hult .tsa-pack-btn:hover { background: #e6a200; }

  /* --- Footer de garantie --- */
  .tsa-bottom-banner {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 30px;
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; margin-top: 10px;
  }
  .tsa-bottom-item { display: flex; align-items: center; gap: 15px; }
  .tsa-bottom-icon { width: 40px; height: 40px; border: 1px solid #bfdbfe; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #0066FF; }
  .tsa-bottom-text h4 { font-size: 13px; font-weight: 800; color: #0f172a; margin: 0 0 2px 0; }
  .tsa-bottom-text p { font-size: 12px; color: #64748b; margin: 0; }
  .tsa-bottom-text span { color: #0066FF; }

  /* ==============================================
   * RESPONSIVE DESIGN
   * ============================================== */
  @media (max-width: 1399px) {
    .tsa-tier-banner { width: 35%; flex-direction: column; text-align: center; }
    .tsa-banner-text { width: 100%; }
    .tsa-tier-features { display: inline-block; text-align: left; }
    .tsa-tier-cards { width: 65%; grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 991px) {
    .tsa-tier-box { flex-direction: column; }
    .tsa-tier-banner { width: 100%; flex-direction: row; text-align: left; }
    .tsa-tier-cards { width: 100%; grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 767px) {
    .tsa-tier-banner { flex-direction: column; text-align: center; }
    .tsa-tier-cards { grid-template-columns: 1fr; }
    .tsa-bottom-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
  }
  /* ==============================================
   * 2. SECTION DEVENEZ PARTENAIRE (Formulaire)
   * ============================================== */
  .tsa-part-bg-light { background-color: #f8fafc; } /* Fond légèrement gris pour détacher du reste */
  
  .tsa-part-form-box {
    background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0;
    padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); display: flex; gap: 20px;
  }
  @media (max-width: 991px) { .tsa-part-form-box { flex-direction: column; } }

  .tsa-part-form-content { flex-grow: 1; }
  .tsa-part-form-side {
    background-color: #eff6ff; border-radius: 8px; padding: 20px; width: 220px;
    text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  @media (max-width: 991px) { .tsa-part-form-side { width: 100%; } }

  .tsa-part-form-side i { font-size: 40px; color: var(--tsakus-blue, #0066FF); margin-bottom: 15px; }
  .tsa-part-form-side p { font-size: 12px; color: #475569; margin: 0; line-height: 1.5; font-weight: 500; }

  /* Avantages (Liste de gauche) */
  .tsa-part-benefits { list-style: none; padding: 0; margin-top: 25px; }
  .tsa-part-benefits li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #334155; margin-bottom: 12px; font-weight: 500; }
  .tsa-part-benefits i { color: var(--tsakus-blue, #0066FF); font-size: 16px; }

  /* Inputs formulaire */
  .tsa-part-input {
    background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 10px 15px; font-size: 13px; color: #334155; width: 100%; margin-bottom: 15px;
  }
  .tsa-part-input:focus { border-color: var(--tsakus-blue, #0066FF); outline: none; }
  .tsa-part-input.is-invalid { border-color: #dc3545; }
  .tsa-part-input.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.12); }
  .tsa-part-btn-submit { background-color: var(--tsakus-blue, #0066FF); color: white; border: none; padding: 12px; border-radius: 6px; width: 100%; font-weight: 700; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.3s;}
  .tsa-part-btn-submit:hover { background-color: #0052cc; }
  .tsa-part-btn-submit:disabled { opacity: .75; cursor: not-allowed; }

  /* Erreur affichée sous un champ invalide */
  .tsa-part-field-error {
    color: #dc3545; font-size: 12px; font-weight: 600;
    margin: -10px 0 12px; display: flex; align-items: center; gap: 5px;
    animation: tsaPartMessageIn .2s ease;
  }

  /* Bandeau de notification succès / erreur du formulaire */
  .tsa-part-form-message {
    display: none; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    line-height: 1.5; margin: 4px 0 16px; animation: tsaPartMessageIn .3s ease;
  }
  .tsa-part-form-message.is-visible { display: flex; }
  .tsa-part-form-message i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
  .tsa-part-form-message.is-success { background: #e6f9ee; border: 1px solid #34d399; color: #067647; }
  .tsa-part-form-message.is-error { background: #fdecec; border: 1px solid #f87171; color: #b42318; }

  @keyframes tsaPartMessageIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ==============================================
     Sélecteur de devise (header public)
  ============================================== */
  .tsa-devise-btn {
    border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
    border-radius: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px;
    display: flex; align-items: center; gap: 6px;
  }
  .tsa-devise-btn:hover { border-color: var(--tsakus-blue, #0066FF); color: var(--tsakus-blue, #0066FF); }
  .tsa-devise-select .dropdown-menu { font-size: 13px; min-width: 220px; }
  .tsa-devise-option.is-selectionnee { font-weight: 700; color: var(--tsakus-blue, #0066FF); }

  /* ==============================================
   * 3. SECTION NOS COORDONNÉES
   * ============================================== */
  .tsa-part-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
  .tsa-part-contact-item { display: flex; align-items: flex-start; gap: 15px; }
  .tsa-part-contact-item i { color: var(--tsakus-blue, #0066FF); font-size: 24px; margin-top: 2px; }
  .tsa-part-contact-text h5 { font-size: 12px; font-weight: 800; color: #0f172a; margin: 0 0 3px 0; }
  .tsa-part-contact-text p, .tsa-part-contact-text a { font-size: 12px; color: #64748b; margin: 0; text-decoration: none; }





  /* ==============================================
   * page activation
   * ============================================== */
 
  .tsa-activ-page {
    background-color: #e6effd; /* Ton fond personnalisé */
    min-height: 100vh;
    padding: 80px 0;
    font-family: var(--font-default, 'Inter', sans-serif);
    color: #1e293b;
    position: relative;
    overflow: hidden;
  }

  /* Décorations de fond subtiles */
  .tsa-activ-page::before {
    content: ''; position: absolute; top: -10%; left: -10%; width: 40%; height: 40%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.05) 0%, transparent 70%); z-index: 0;
  }
  .tsa-activ-page::after {
    content: ''; position: absolute; bottom: -10%; right: -10%; width: 40%; height: 40%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.05) 0%, transparent 70%); z-index: 0;
  }

  .tsa-activ-container { position: relative; z-index: 10; max-width: 980px; margin: 0 auto; padding: 0 20px; }

  /* En-tête */
  .tsa-activ-header { text-align: center; margin-bottom: 50px; }
  .tsa-activ-title { font-size: 32px; font-weight: 800; color: #0066FF; margin-bottom: 10px; text-transform: uppercase; }
  .tsa-activ-subtitle { color: #475569; font-size: 15px; }

  /* Stepper (Indicateur d'étapes) */
  .tsa-activ-stepper { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 40px; }
  .tsa-step-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60px; }
  .tsa-step-circle { width: 35px; height: 35px; border-radius: 50%; background: #ffffff; border: 2px solid #cbd5e1; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: 0.3s; }
  .tsa-step-label { font-size: 12px; font-weight: 600; color: #94a3b8; transition: 0.3s; }
  
  .tsa-step-line { width: 80px; height: 2px; border-bottom: 2px dashed #cbd5e1; margin-bottom: 20px; }
  
  /* État Actif */
  .tsa-step-item.active .tsa-step-circle { background: #0066FF; border-color: #0066FF; color: white; box-shadow: 0 0 15px rgba(0, 102, 255, 0.3); }
  .tsa-step-item.active .tsa-step-label { color: #0066FF; }
  
  /* État Fini (Check) */
  .tsa-step-item.done .tsa-step-circle { background: #0066FF; border-color: #0066FF; color: white; }
  .tsa-step-line.done { border-bottom: 2px solid #0066FF; }

  /* Boîte principale Blanche */
  .tsa-activ-box { background: #ffffff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 102, 255, 0.08); padding: 44px; border: 1px solid rgba(0, 102, 255, 0.08); }

  /* --- ELEMENTS DE FORMULAIRE --- */
  .tsa-activ-section-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 5px; text-align: center; }
  .tsa-activ-section-desc { font-size: 12px; color: #64748b; text-align: center; margin-bottom: 20px; }
  
  .tsa-activ-icon-head { width: 45px; height: 45px; background: #eff6ff; color: #0066FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 15px auto; }

  /* Input avec icône Copy à droite */
  .tsa-input-wrapper { position: relative; margin-bottom: 15px; }
  .tsa-activ-input { width: 100%; border: 1px solid #dbe7f5; border-radius: 10px; padding: 15px 45px 15px 15px; font-size: 14px; color: #334155; font-family: monospace; transition: 0.3s; background: #fbfdff; }
  .tsa-activ-input:focus { border-color: #0066FF; outline: none; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1); }
  .tsa-activ-textarea { min-height: 108px; max-height: 170px; resize: vertical; line-height: 1.45; word-break: break-all; }
  .tsa-input-icon { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #94a3b8; font-size: 18px; cursor: pointer; transition: 0.3s; }
  textarea.tsa-activ-textarea + .tsa-input-icon { top: 18px; transform: none; }
  .tsa-input-icon:hover { color: #0066FF; }

  /* Info et Erreur Boxes */
  .tsa-msg-box { border-radius: 8px; padding: 12px 15px; font-size: 12px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-weight: 500; }
  .tsa-msg-info { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
  .tsa-msg-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: none; } /* Caché par défaut */
  
  /* Upload Box */
  .tsa-upload-box { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 34px 20px; text-align: center; cursor: pointer; transition: 0.3s; background: #f8fafc; min-height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .tsa-upload-box:hover { border-color: #0066FF; background: #eff6ff; }
  .tsa-upload-box i { font-size: 30px; color: #0066FF; margin-bottom: 10px; display: block; }
  .tsa-upload-box h5 { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 5px; }
  .tsa-upload-box p { font-size: 11px; color: #64748b; margin: 0; }

  /* Boutons */
  .tsa-btn-primary { background: #0066FF; color: white; border: none; padding: 15px 30px; border-radius: 8px; font-weight: 700; font-size: 14px; width: 100%; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .tsa-btn-primary:hover { background: #0052cc; box-shadow: 0 5px 15px rgba(0, 102, 255, 0.3); }
  .tsa-btn-secondary { background: transparent; color: #0066FF; border: 1px solid #0066FF; padding: 15px 30px; border-radius: 8px; font-weight: 700; font-size: 14px; transition: 0.3s; }
  .tsa-btn-secondary:hover { background: #eff6ff; }

  /* --- ETAPE 2 : Cartes Info --- */
  .tsa-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 40px; }
  .tsa-info-card { background: #f8fafc; border: 1px solid #edf4fb; border-radius: 10px; padding: 15px; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
  .tsa-info-icon { width: 35px; height: 35px; background: #0066FF; color: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;}
  .tsa-info-text h6 { font-size: 11px; color: #64748b; margin: 0 0 2px 0; }
  .tsa-info-text { min-width: 0; }
  .tsa-info-text p { font-size: 13px; font-weight: 800; color: #0f172a; margin: 0; white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; }

  /* --- ETAPE 3 : Succès --- */
  .tsa-success-icon { width: 80px; height: 80px; background: #dcfce7; color: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px auto; border: 4px solid #ecfdf5; position: relative;}
  .tsa-success-icon::before { content: '✨'; position: absolute; top: -10px; left: -10px; font-size: 20px; color: #10b981; }
  .tsa-success-icon::after { content: '✨'; position: absolute; bottom: 10px; right: -15px; font-size: 16px; color: #10b981; }
  
  .tsa-key-result { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .tsa-key-result h3 { font-size: 20px; font-weight: 800; color: #059669; margin: 0; font-family: monospace; letter-spacing: 1px; }
  .tsa-btn-copy-green { background: white; color: #10b981; border: 1px solid #10b981; padding: 8px 15px; border-radius: 6px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; cursor: pointer; transition: 0.3s; }
  .tsa-btn-copy-green:hover { background: #10b981; color: white; }

  /* Responsive */
  @media (max-width: 768px) {
    .tsa-activ-box { padding: 30px 20px; }
    .tsa-info-cards { grid-template-columns: 1fr; }
    .tsa-key-result { flex-direction: column; gap: 15px; text-align: center; }
  }
  
  
  
  
    /* ==============================================
   * page blog_details.php
   * ============================================== */
  
  
  
    /* Barre de progression de lecture, fixée sous le header. */
    .tsa-bd-progress {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: 3px;
        background: transparent;
        z-index: 1030;
        pointer-events: none;
    }
    .tsa-bd-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #2563eb, #38bdf8);
        transition: width 0.1s linear;
    }

   .tsa-breadcrumb-banner {
        position: relative;
        height: 180px;
        width: 100%;
        background: linear-gradient(135deg, #071427 0%, #0B1832 100%);
        display: flex;
        align-items: center;
        overflow: hidden;
        margin-top: 80px; /* Ajuster selon la hauteur de votre header */
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
    }

    /* Texture technologique */
    .tsa-breadcrumb-banner::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

    .tsa-breadcrumb-icon {
        position: absolute;
        right: 5%;
        font-size: 250px;
        color: #fff;
        opacity: 0.08;
        transform: rotate(-15deg);
    }

    .tsa-breadcrumb-container {
        position: relative;
        z-index: 2;
    }

    .tsa-breadcrumb-title {
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 42px;
        font-weight: 800;
        margin: 0;
    }

    .breadcrumb {
        font-size: 15px;
        font-weight: 500;
        align-items: center;
        gap: 12px;
    }

    .breadcrumb-item a {
        color: #d1d5db;
        text-decoration: none;
        transition: color 0.3s;
    }

    .breadcrumb-item a:hover {
        color: #2563eb;
    }

    .breadcrumb-item.active {
        color: #2563eb;
        font-weight: 700;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
        color: #d1d5db;
        padding-right: 12px;
    }
 
 
 
     /* =======================================================
       STYLES GLOBAUX - PAGE BLOG DETAILS (SAAS Premium)
       ======================================================= */
    .tsa-bd-wrapper {
        background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
        padding: 120px 0 80px 0;
        font-family: 'Inter', sans-serif;
    }
    .tsa-bd-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 15px;
    }
    .tsa-bd-main-card {
        background: #ffffff;
        border-radius: 22px;
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.04);
        padding: 3.5rem;
    }
    
    /* COLONNE PRINCIPALE */
    .tsa-bd-badge {
        display: inline-block;
        background-color: #eff6ff;
        color: #2563eb;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 6px 16px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 1.5rem;
    }
    .tsa-bd-meta {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        color: #64748b;
        font-size: 0.95rem;
        font-weight: 500;
        margin-bottom: 1.5rem;
    }
    .tsa-bd-meta i {
        color: #2563eb;
        margin-right: 6px;
    }
    .tsa-bd-title {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-bottom: 1.5rem;
    }
    .tsa-bd-summary {
        font-size: 1.25rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 2.5rem;
        font-weight: 500;
    }
    .tsa-bd-hero-img {
        width: 100%;
        border-radius: 16px;
        object-fit: cover;
        margin-bottom: 2rem;
        box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    }
    
    /* Boutons de Partage */
    .tsa-bd-share-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .tsa-bd-share-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    }
    .tsa-bd-share-btn:hover {
        transform: translateY(-3px);
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
        box-shadow: 0 8px 15px rgba(37, 99, 235, 0.2);
    }

    /* CORPS DE L'ARTICLE */
    .tsa-bd-content {
        font-size: 1.15rem;
        line-height: 1.85;
        color: #334155;
    }
    .tsa-bd-content h2.tsa-bd-h2 {
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        margin-top: 3.5rem;
        margin-bottom: 1.5rem;
        scroll-margin-top: 100px;
    }
    .tsa-bd-content h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
    .tsa-bd-content p {
        margin-bottom: 1.8rem;
    }
    .tsa-bd-content img {
        max-width: 100%;
        border-radius: 12px;
        margin: 2rem 0;
    }
    .tsa-bd-content ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 2rem;
    }
    .tsa-bd-content ul li {
        position: relative;
        padding-left: 2.2rem;
        margin-bottom: 1rem;
    }
    .tsa-bd-content ul li::before {
        content: "\F26A"; /* Bootstrap Icon : check-circle-fill */
        font-family: "bootstrap-icons";
        position: absolute;
        left: 0;
        top: 2px;
        color: #2563eb;
        font-size: 1.2rem;
    }

    /* CTA Fin d'article */
    .tsa-bd-cta {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 16px;
        padding: 2.5rem;
        display: flex;
        align-items: center;
        gap: 2rem;
        margin: 4rem 0 3rem 0;
    }
    .tsa-bd-cta-icon {
        font-size: 3.5rem;
        color: #2563eb;
        line-height: 1;
    }
    .tsa-bd-cta-text h4 {
        font-size: 1.4rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 0.5rem;
    }
    .tsa-bd-cta-text p {
        color: #475569;
        margin-bottom: 0;
        font-size: 1.05rem;
    }
    .tsa-bd-btn-gradient {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
        font-weight: 700;
        padding: 14px 28px;
        border-radius: 50px;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        transition: all 0.3s;
        border: none;
    }
    .tsa-bd-btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
        color: #ffffff;
    }

    /* Navigation Précédent / Suivant */
    .tsa-bd-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f1f5f9;
        padding-top: 2rem;
    }
    .tsa-bd-nav a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s;
        max-width: 45%;
    }
    .tsa-bd-nav a:hover {
        color: #2563eb;
    }
    .tsa-bd-nav span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* =======================================================
       SIDEBAR
       ======================================================= */
    .tsa-bd-side-card {
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid #eef2f7;
        box-shadow: 0 4px 20px rgba(0,0,0,0.015);
        padding: 2rem;
        margin-bottom: 1.5rem;
    }
    .tsa-bd-side-title {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Auteur */
    .tsa-bd-author img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1rem;
        border: 3px solid #eff6ff;
    }
    
    /* Sommaire */
    .tsa-bd-toc-list {
        list-style: none;
        padding-left: 1rem;
        border-left: 2px solid #eff6ff;
        margin: 0;
    }
    .tsa-bd-toc-list li {
        position: relative;
        margin-bottom: 0.8rem;
    }
    .tsa-bd-toc-list li::before {
        content: "";
        position: absolute;
        left: -1.1rem; /* -1rem padding + -1px border */
        top: 8px;
        width: 8px;
        height: 8px;
        background: #cbd5e1;
        border-radius: 50%;
        transition: background 0.3s;
    }
    .tsa-bd-toc-list a {
        color: #475569;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: color 0.3s;
        display: block;
    }
    .tsa-bd-toc-list a:hover {
        color: #2563eb;
    }
    .tsa-bd-toc-list li:hover::before {
        background: #2563eb;
    }

    /* Récents */
    .tsa-bd-recent-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem;
        border-radius: 12px;
        text-decoration: none;
        transition: background 0.3s;
    }
    .tsa-bd-recent-item:hover {
        background: #f8fafc;
    }
    .tsa-bd-recent-item.active {
        background: #eff6ff;
    }
    .tsa-bd-recent-img {
        width: 65px;
        height: 65px;
        border-radius: 10px;
        object-fit: cover;
        flex-shrink: 0;
    }
    .tsa-bd-recent-text h6 {
        font-size: 0.9rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 0.25rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tsa-bd-recent-text p {
        font-size: 0.75rem;
        color: #64748b;
        margin: 0;
    }

    /* Promo Card */
    .tsa-bd-promo-card {
                background: #071427;
        color: white;
        border-radius: 12px;
        padding: 2rem;
        color: #ffffff;
        position: relative;
        overflow: hidden;
    }
    .tsa-bd-promo-card::after {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background: rgba(37, 99, 235, 0.4);
        filter: blur(40px);
        border-radius: 50%;
    }
    .tsa-bd-promo-list {
        list-style: none;
        padding: 0;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }
    .tsa-bd-promo-list li {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .tsa-bd-promo-list i { color: #38bdf8; }
	

    /* Responsive */
    @media (max-width: 991px) {
        .tsa-bd-main-card { padding: 2rem; }
        .tsa-bd-cta { flex-direction: column; text-align: center; gap: 1rem; }
    }
    @media (max-width: 768px) {
        .tsa-bd-wrapper { padding-top: 90px; }
        .tsa-bd-main-card { padding: 1.5rem; border-radius: 16px; }
        .tsa-bd-meta { flex-wrap: wrap; gap: 1rem; }
    }

/* =======================================================
 * PAGE DE TÉLÉCHARGEMENT TSAKUS
 * ======================================================= */
.tsa-download-body { background:#f4f8ff; color:#0f172a; }
.tsa-download-page { min-height:100vh; padding:18px; background:linear-gradient(135deg,#f6fbff,#ffffff 48%,#eef6ff); font-family:var(--font-default,'Inter',sans-serif); }
.tsa-download-shell { max-width:1120px; margin:0 auto; padding:0 0 28px; }
.tsa-latest-card,.tsa-download-panel { position:relative; background:#fff; border:1px solid #e8eef8; border-radius:14px; box-shadow:0 18px 45px rgba(15,35,75,.08); padding:24px; }
.tsa-version-ribbon { position:absolute; top:-12px; left:24px; background:#0969ff; color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; padding:9px 14px; border-radius:4px; }
.tsa-version-img { width:100%; border-radius:0; display:block; object-fit:cover; box-shadow:0 8px 22px rgba(8,34,84,.14); }
.tsa-latest-card h1 { font-size:28px; font-weight:800; margin:0 0 18px; }
.tsa-version-badge,.tsa-version-mini { display:inline-flex; align-items:center; border:1px solid #bfdbfe; background:#eef6ff; color:#0969ff; border-radius:7px; padding:5px 9px; font-weight:800; font-size:12px; }
.tsa-version-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 18px; padding-bottom:18px; border-bottom:1px solid #e7edf7; }
.tsa-version-stats div { display:flex; align-items:center; gap:9px; min-width:0; }
.tsa-version-stats i { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#eef6ff; color:#0969ff; flex-shrink:0; }
.tsa-version-stats span { display:block; font-size:10px; color:#64748b; }
.tsa-version-stats strong { display:block; font-size:11px; line-height:1.25; }
.tsa-version-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; font-size:13px; color:#334155; }
.tsa-version-points i { color:#0969ff; margin-right:7px; }
.tsa-version-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.tsa-download-btn,.tsa-release-btn { min-height:48px; padding:0 25px; border-radius:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; border:1px solid #cfe0ff; }
.tsa-download-btn { background:#0969ff; color:#fff !important; box-shadow:0 10px 24px rgba(9,105,255,.25); }
.tsa-release-btn { background:#fff; color:#0969ff; }
.tsa-download-note { margin:15px 0 0; color:#64748b; font-size:12px; }
.tsa-download-panel h2 { font-size:17px; font-weight:900; text-transform:uppercase; margin-bottom:20px; }
.tsa-timeline { position:relative; padding-left:24px; }
.tsa-timeline::before { content:""; position:absolute; top:8px; bottom:8px; left:8px; width:2px; background:#d7e6ff; }
.tsa-timeline-item { position:relative; margin-bottom:16px; }
.tsa-timeline-dot { position:absolute; left:-22px; top:22px; width:10px; height:10px; border-radius:50%; background:#0969ff; box-shadow:0 0 0 4px #eef6ff; }
.tsa-timeline-card { border:1px solid #edf2fb; border-radius:10px; padding:17px; background:#fff; }
.tsa-timeline-card p { margin:12px 0; color:#64748b; font-size:13px; line-height:1.6; }
.tsa-details-btn { background:#fff; border:1px solid #cfe0ff; color:#0969ff; border-radius:7px; padding:8px 16px; font-weight:700; }
.tsa-info-link { display:flex; gap:14px; align-items:center; border:1px solid #edf2fb; border-radius:10px; padding:16px; margin-bottom:15px; }
.tsa-info-link i { width:46px; height:46px; border-radius:10px; background:#eef6ff; color:#0969ff; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.tsa-info-link strong,.tsa-info-link span { display:block; }
.tsa-info-link span { color:#64748b; font-size:12px; line-height:1.45; }
.tsa-download-empty { color:#64748b; font-size:15px; }
@media (max-width:991px) { .tsa-version-stats,.tsa-version-points { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .tsa-version-stats,.tsa-version-points { grid-template-columns:1fr; } .tsa-latest-card,.tsa-download-panel{padding:18px;} .tsa-latest-card h1{font-size:22px;} }










/* =======================================================
 * SweetAlert2 — habillage léger aux couleurs Tsakus pour la
 * modale de succès du formulaire de demande de partenariat.
 * ======================================================= */
.tsa-swal-succes {
  border-radius: 20px !important;
  border-top: 5px solid var(--tsakus-blue, #0066FF);
}
.swal2-title { font-family: var(--font-title, 'Poppins', sans-serif); }