:root {
         --primary-blue: #0062B2;
         --dark-blue: #003366;
         --accent-orange: #FF9D00;
         --accent-green: #00C853;
         --light-gray: #F5F7FA;
         --white: #FFFFFF;
         --text-dark: #333333;
         --text-light: #666666;
         --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         --transition: all 0.3s ease;
     }

     body,
     html {
         font-family: "DM Sans", sans-serif !important;
         scroll-behavior: smooth;
     }


     a {
         text-decoration: none;
         color: inherit;
     }

     .hero {

         padding: 8rem 0 5rem;
         background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
         color: var(--white);
         position: relative;
         overflow: hidden;
     }

     .hero-content-wrapper {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }


     .hero-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 2rem;
     }


     .hero-text {
         flex: 1;
         opacity: 0;
         transform: translateY(20px);
         animation: fadeInUp 1s ease forwards 0.5s;
     }

     .hero-title {
         font-family: "DM Sans", sans-serif;
         font-size: 3rem;
         font-weight: 700;
         line-height: 1.2;
         margin-bottom: 1.5rem;
     }

     .hero-subtitle {
        
         font-size: 1.2rem;
         margin-bottom: 2rem;
         opacity: 0.9;
     }

     .hero-buttons {
         display: flex;
         gap: 1rem;
     }

     /* .btn-primary {
         background: var(--accent-orange);
         color: var(--white);
         padding: 0.8rem 2rem;
         border-radius: 4px;
         font-weight: 600;
         transition: all 0.3s ease;
         text-decoration: none;
         display: inline-block;
         opacity: 0;
         transform: translateY(20px);
         animation: fadeInUp 1s ease forwards 1s;
     }

     .btn-primary:hover {
         background: #e58900;
         transform: translateY(-2px);
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     } */
.btn-primar{
     background-color: #e58900;
         padding: 0.8rem 2rem;
         border-radius: 4px;
         font-weight: 600;
         transition: all 0.3s ease;
         text-decoration: none;
         display: inline-block;
         opacity: 0;
         transform: translateY(20px);
         animation: fadeInUp 1s ease forwards 1.2s; 
}
     .btn-secondary {
         background: transparent;
         color: var(--white);
         padding: 0.8rem 2rem;
         border-radius: 4px;
         font-weight: 600;
         border: 2px solid var(--white);
         transition: all 0.3s ease;
         text-decoration: none;
         display: inline-block;
         opacity: 0;
         transform: translateY(20px);
         animation: fadeInUp 1s ease forwards 1.2s;
     }

     .btn-secondary:hover {
         background: rgba(255, 255, 255, 0.1);
         transform: translateY(-2px);
     }


     .hero-image {
         flex: 1;
         display: flex;
         justify-content: flex-end;
         transform: translateX(20px);
         animation: fadeInRight 1s ease forwards 0.8s;
     }

     .hero-image img {
         max-width: 100%;
         height: auto;
         filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
         animation: float 5s ease-in-out infinite;
     }


     @keyframes float {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-15px);
         }
     }

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

     @keyframes fadeInRight {
         to {
             opacity: 1;
             transform: translateX(0);
         }
     }


     @media (max-width: 968px) {
         .hero-content {
             flex-direction: column;
             text-align: center;
         }

         .hero-title {
             font-size: 2.5rem;
         }

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

         .hero-image {
             justify-content: center;
             margin-top: 2rem;
         }
     }

     @media (max-width: 576px) {
         .hero {
             padding: 6rem 0 3rem;
         }

         .hero-title {
             font-size: 2rem;
         }

         .hero-subtitle {
             font-size: 1rem;
         }

         .hero-buttons {
             flex-direction: column;
             align-items: center;
         }
     }


     .features {
         padding: 3rem 0;
         background-color: var(--light-gray);
     }

     .section-title {
         margin-bottom: 1rem;
         font-family: "DM Sans", sans-serif;
         text-align: center;
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--dark-blue);
     }
       .features .section-title{
        margin-bottom: 3rem !important;
       }

    .features-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

     .feature-title {
         font-family: "DM Sans", sans-serif;

     }

     .feature-card {
         background: var(--white);
         padding: 2rem;
         border-radius: 8px;
         box-shadow: var(--shadow);
         transition: var(--transition);
         text-align: center;
     }

     .feature-card:hover {
         transform: translateY(-10px);
     }

     .feature-icon {
         font-size: 2.5rem;
         color: var(--primary-blue);
         margin-bottom: 1rem;
     }

     .feature-title {
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 1rem;
         color: var(--dark-blue);
     }

     .feature-description {
         color: var(--text-light);
     }




     .section-title {
        margin-bottom: 1rem;
         text-align: center;
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--dark-blue);

     }
     .container .section-title{
    margin-bottom: 3rem;
}

     .section-p {
         text-align: center;
         color: var(--text-light);
         font-size: 1rem !important;

     }

     .section-p1 {
         margin-top: -4rem;
         text-align: center;
         color: var(--text-light);
         font-size: 1.1rem;
         font-weight: 700;
         margin-bottom: 3rem;
     }

     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2.5rem;
     }

     .service-card {
         background: var(--white);
         border-radius: 12px;
         overflow: hidden;
         box-shadow: var(--shadow);
         transition: var(--transition);
         display: flex;
         flex-direction: column;
         height: 100%;
     }

     .service-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     }

     .service-image {
         height: 180px;
         background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--white);
         font-size: 3.5rem;
         position: relative;
         overflow: hidden;
     }

     .service-image::after {
         content: '';
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: rgba(255, 255, 255, 0.1);
         transform: rotate(30deg);
         transition: var(--transition);
     }

     .service-card:hover .service-image::after {
         transform: rotate(30deg) translate(20px, 20px);
     }

     .service-content {
         padding: 1.8rem;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
     }

     .service-title {
         font-family: "DM Sans", sans-serif;

         font-size: 1.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--dark-blue);
     }

     .service-description {
         color: var(--text-light);
         margin-bottom: 1.8rem;
         flex-grow: 1;
     }

     .service-link {
         color: var(--accent-orange);
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 0.5rem;
         transition: var(--transition);
         margin-top: auto;
     }

     .service-link:hover {
         gap: 1rem;
         color: var(--dark-blue);
     }

     @media (max-width: 768px) {
         .services-grid {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .section-title {
             font-size: 2rem;
         }
     }

     .testimonials {
         padding: 5rem 0;
         background-color: var(--light-gray);
     }

     .testimonials-container {
         max-width: 800px;
         margin: 0 auto;
     }

     .testimonial-card {
         background: var(--white);
         padding: 2rem;
         border-radius: 8px;
         box-shadow: var(--shadow);
         margin: 0 1rem;
         text-align: center;
     }

     .testimonial-text {
         font-style: italic;
         margin-bottom: 1.5rem;
         color: var(--text-dark);
     }

     .testimonial-author {
         font-weight: 600;
         color: var(--dark-blue);
     }

     .testimonial-role {
         color: var(--text-light);
         font-size: 0.9rem;
     }


     .cta-section {
         padding: 5rem 0;
         background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
         color: var(--white);
         text-align: center;
     }

     .cta-title {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 1.5rem;
     }

     .cta-text {
         max-width: 600px;
         margin: 0 auto 2rem;
         opacity: 0.9;
     }

     footer {
         background-color: var(--dark-blue) !important;
         color: var(--white);
         padding: 4rem 0 2rem;
     }

     .footer-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 2rem;
         margin-bottom: 3rem;
     }

     .footer-column h3 {
         font-size: 1.2rem;
         margin-bottom: 1.5rem;
         position: relative;
         padding-bottom: 0.5rem;
     }

     .footer-column h3:after {
         content: '';
         position: absolute;
         left: 0;
         bottom: 0;
         width: 40px;
         height: 2px;
         background-color: var(--accent-orange);
     }

     .footer-links {
         list-style: none;
     }

     .footer-links li {
         margin-bottom: 0.8rem;
     }

     .footer-links a {
         opacity: 0.8;
         transition: var(--transition);
     }

     .footer-links a:hover {
         opacity: 1;
         color: var(--accent-orange);
         padding-left: 5px;
     }

     .footer-social {
         display: flex;
         gap: 1rem;
         margin-top: 1.5rem;
     }

     .social-icon {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.1);
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
     }

     .social-icon:hover {
         background: var(--accent-orange);
         transform: translateY(-3px);
     }

     .footer-bottom {
         text-align: center;
         padding-top: 2rem;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         font-size: 0.9rem;
         opacity: 0.7;
     }

     @media (max-width: 992px) {
         .hero-content {
             flex-direction: column;
             text-align: center;
         }

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

         .hero-title {
             font-size: 2.5rem;
         }
     }

     @media (max-width: 768px) {
         .mobile-menu-btn {
             display: block;
         }
         .btn-secondary {
    background: transparent;
    color: var(--white);
    padding: 0.8rem 4rem !important;
    border-radius: 4px;
    font-weight: 600;
    border: 2px solid var(--white);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards 1.2s;
}

         nav {
             position: fixed;
             top: 70px;
             left: -100%;
             width: 100%;
             height: calc(100vh - 70px);
             background: var(--white);
             transition: 0.4s;
             z-index: 999;
         }

         nav.active {
             left: 0;
         }

         nav ul {
             flex-direction: column;
             padding: 2rem;
             gap: 1.5rem;
         }

         .hero-title {
             font-size: 2rem;
         }

         .section-title {
             font-size: 2rem;
         }
     }


     .technologies {
         padding: 5rem 0;
         background-color: var(--white);
     }

     .tech-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 2rem;
         margin-top: 3rem;
         padding: 0px 1.5rem;
     }

     .tech-card {
         background: var(--light-gray);
         padding: 2rem;
         border-radius: 8px;
         text-align: center;
         transition: var(--transition);
         border: 1px solid rgba(0, 0, 0, 0.05);
     }

     .tech-card:hover {
         transform: translateY(-5px);
         box-shadow: var(--shadow);
     }

     .tech-icon {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         color: var(--primary-blue);
     }

     .tech-card h3 {
         font-size: 1.2rem;
         margin-bottom: 1rem;
         color: var(--dark-blue);
     }

     .tech-card p {
         color: var(--text-light);
         font-size: 0.9rem;
     }

     .section-subtitle {
         text-align: center;
         max-width: 600px;
     margin-top: -2rem;
         color: var(--text-light);
         font-size: 1.1rem;
     }

.services .section-title{
     margin-bottom: 0px !important;
}

     .containers {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 1.5rem;
     }

     .section-title {
         text-align: center;
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--dark-blue);
     }

     .section-p {
         text-align: center;
         padding: 20px;
         font-size: 18px;
     }

     .section-subtitle {
         text-align: center;
         max-width: 600px;
         margin: 0 auto 3rem;
         color: var(--text-light);
         font-size: 1.1rem;
     }

     .offers {
         margin-top: 3rem;
     }


     .offers-container {
         display: flex;
         flex-wrap: wrap;
         gap: 2rem;
         justify-content: center;
     }

     .offer-card {
         background: var(--white);
         border-radius: 12px;
         overflow: hidden;
         box-shadow: var(--shadow);
         max-width: 500px;
         width: 100%;
         transition: var(--transition);
         display: flex;
         flex-direction: column;
     }

     .offer-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
     }

     /* Conteneur d'image avec proportions fixes */
     .image-container {
         width: 100%;
         height: 250px;
         overflow: hidden;
         position: relative;
     }

     .offer-image {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform 0.5s ease;
     }

     .offer-card:hover .offer-image {
         transform: scale(1.05);
     }

     .offer-content {
         padding: 1.5rem;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
     }

     .offer-title {
         font-family: "DM Sans", sans-serif;

         font-size: 1.5rem;
         color: var(--primary-blue);
         margin-bottom: 1rem;
     }

     .offer-price {
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--accent-orange);
         margin: 1rem 0;
     }

     .offer-features {
         margin: 1.5rem 0;
         flex-grow: 1;
     }

     .offer-features li {
         margin-bottom: 0.8rem;
         display: flex;
         align-items: flex-start;
         font-size: 0.95rem;
     }

     .offer-features i {
         color: var(--accent-green);
         margin-right: 0.5rem;
         margin-top: 0.2rem;
         flex-shrink: 0;
     }

     .btn-primary {
         background: var(--accent-orange);
         color: var(--white);
         padding: 0.8rem 1.5rem;
         border-radius: 4px;
         font-weight: 600;
         display: inline-block;
         transition: var(--transition);
         text-align: center;
         border: none;
         cursor: pointer;
         text-decoration: none;
         margin-top: auto;
     }

     .btn-primary:hover {
         background: #e58900;
         transform: translateY(-2px);
     }

     /* Responsive */
     @media (max-width: 768px) {
         .offers-container {
             flex-direction: column;
             align-items: center;
         }

         .offer-card {
             max-width: 100%;
         }

         .section-title {
             font-size: 1.8rem;
         }

         .section-subtitle {
             font-size: 1rem;
         }

         .image-container {
             height: 200px;
         }
     }

     .contact-info {
         background: var(--light-gray);
         padding: 2rem;
         border-radius: 8px;
         margin-top: 3rem;
         text-align: center;
     }

     .contact-info h3 {
         margin-bottom: 1.5rem;
         color: var(--dark-blue);
     }

     .contact-details {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 2rem;
     }

     .contact-details a {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         color: var(--primary-blue);
         font-weight: 500;
         text-decoration: none;
         transition: var(--transition);
     }

     .contact-details a:hover {
         color: var(--accent-orange);
     }

     @media (max-width: 768px) {
         .section-title {
             font-size: 2rem;
         }

         .contact-details {
             flex-direction: column;
             gap: 1rem;
         }
     }


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

     }




     .faq-section {
         padding: 5rem 5rem;
     }

     .section-title {
         text-align: center;
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--dark-blue);
     }

     .section-p {
         text-align: center;
         color: var(--text-light);
         font-size: 1.1rem;
         margin-bottom: 3rem;
         line-height: 1.8;
     }

     .faq-container {
         margin-top: 2rem;
     }

     .faq-item {
         background: var(--white);
         border-radius: 8px;
         margin-bottom: 1.5rem;
         box-shadow: var(--shadow);
         overflow: hidden;
     }

     .faq-question {
                 font-family: "DM Sans", sans-serif;

         padding: 1.5rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         font-weight: 600;
         font-size: 1.1rem;
         color: var(--dark-blue);
     }

     .faq-question i {
         transition: var(--transition);
     }

     .faq-answer {
         padding: 0 1.5rem;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease, padding 0.3s ease;
         color: var(--text-light);
         line-height: 1.7;
     }

     .faq-item.active .faq-answer {
         max-height: 500px;
         padding: 0 1.5rem 1.5rem;
     }

     .faq-item.active .faq-question i {
         transform: rotate(180deg);
     }

     .faq-contact {
         text-align: center;
         margin-top: 3rem;
         padding: 2rem;
         background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
         border-radius: 12px;
         color: var(--white);
     }

     .faq-contact h3 {
         font-size: 1.8rem;
         margin-bottom: 1rem;
     }

     .faq-contact p {
         margin-bottom: 1.5rem;
         opacity: 0.9;
     }

     .contact-btn {
         display: inline-block;
         padding: 12px 30px;
         background-color: var(--accent-orange);
         color: white;
         text-decoration: none;
         border-radius: 5px;
         font-weight: 600;
         transition: background-color 0.3s;
     }


     .back-to-top {
         position: fixed;
         bottom: 40px;
         right: 40px;
         padding: 15px 20px;
         font-size: 16px;
         color: white;
         background-color: #003366;
         border: none;
         border-radius: 50px;
         cursor: pointer;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.4s, transform 0.3s;
     }

     .back-to-top.show {
         opacity: 1;
         pointer-events: auto;
         transform: scale(1.1);
     }

     .back-to-top:hover {
         transform: scale(1.2);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     }

     .footer-column img {
         width: 60px;
         border-radius: 10px;
     }

     .pied {
         padding: 0px 1.5rem;
     }

     .section-padding {
         padding: 0 1.5rem;
     }

     .services {
         padding-top: 3rem;
         padding-bottom: 3rem;
         padding-left: 3rem;
         padding-right: 3rem;
     }

     .technologies {
         padding: 5rem 0;
         background-color: var(--white);
         padding-right: 2rem;
         padding-left: 2rem;
     }


     /* Styles pour le modal */
     /* Styles pour le modal - Version corrigée */
     .modal {
         display: none;
         position: fixed;
         z-index: 1000;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(5px);
         /* effet flou */
         z-index: 1000;
         justify-content: center;
         align-items: center;

         overflow: auto;
         /* Permettre le défilement si nécessaire */
     }

     .modal-content {
         background-color: white;
         margin: 2% auto;
         /* Réduire la marge pour les petits écrans */
         padding: 2rem;
         border-radius: 8px;
         width: 90%;
         max-width: 500px;
         max-height: 90vh;
         /* Limiter la hauteur à 90% de la fenêtre */
         overflow-y: auto;
         /* Activer le défilement vertical si nécessaire */
         position: relative;
         animation: modalFadeIn 0.3s;
     }

     /* Assurer que le formulaire est bien structuré */
     .modal-content form {
         display: flex;
         flex-direction: column;
     }

     .form-group {
         margin-bottom: 1.5rem;
         flex-shrink: 0;
         /* Empêcher la réduction des champs de formulaire */
     }

     .form-actions {
         margin-top: auto;
         /* Pousser le bouton vers le bas */
         padding-top: 1rem;
         flex-shrink: 0;
         /* Empêcher la réduction du bouton */
     }

     /* Adapter pour les très petits écrans */
     @media (max-width: 480px) {
         .modal-content {
             margin: 5% auto;
             padding: 1.5rem;
             width: 95%;
         }
     }









     @keyframes modalFadeIn {
         from {
             opacity: 0;
             transform: translateY(-50px);
         }

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

     .close {
         color: #aaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
         cursor: pointer;
         position: absolute;
         right: 1rem;
         top: 1rem;
     }

     .close:hover {
         color: #000;
     }

     .form-group {
         margin-bottom: 1.5rem;
     }

     .form-group label {
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 600;
         color: #2c3e50;
     }

     .form-group input,
     .form-group textarea {
         width: 100%;
         padding: 0.75rem;
         border: 1px solid #ddd;
         border-radius: 4px;
         font-size: 1rem;
     }

     .form-group input:focus,
     .form-group textarea:focus {
         outline: none;
         border-color: #3498db;
         box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
     }

     .btn-submit {
         background: #FF9D00;
         color: white;
         border: none;
         padding: 12px 24px;
         border-radius: 6px;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         width: 100%;
         transition: all 0.3s ease;
     }

     .btn-submit:hover {
         background: #FF9D00;
     }

     .btn-submit:disabled {
         opacity: 0.7;
         cursor: not-allowed;
     }

     .faq-section {
         padding: 5rem 2rem;
         /* Moins large sur les côtés */
     }

     @media (max-width: 768px) {
         .faq-section {
             padding: 3rem 1rem;
             /* Encore plus réduit sur mobile */
         }

         .btn-secondary {
             background: transparent;
             color: var(--white);
             padding: 0.4rem 4rem;
             border-radius: 4px;
             font-weight: 600;
             border: 2px solid var(--white);
             transition: all 0.3s ease;
             text-decoration: none;
             display: inline-block;
             opacity: 0;
             transform: translateY(20px);
             animation: fadeInUp 1s ease forwards 1.2s;
         }

         .hero-image img {
             max-width: 80%;
             height: auto;
             filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
             animation: float 5s ease-in-out infinite;
         }

         .section-title {
             text-align: center;
             font-size: 1.7rem;
             font-weight: 700;
             color: var(--dark-blue);
         }
     }

     .faq-container {
         width: 100%;
         max-width: 900px;
         margin: 0 auto;
     }





       /* Flèche Back to Top - Version Pro */
        .back-to-top {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 56px;
            height: 56px;
            background: #ffffff;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.02);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.9);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1000;
            border: none;
            outline: none;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .back-to-top:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 8px 30px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.03);
        }

        .back-to-top:active {
            transform: translateY(0) scale(0.98);
        }

        /* Conteneur du cercle de progression */
        .progress-container {
            position: absolute;
            top: -2px;
            left: -2px;
            width: 60px;
            height: 60px;
            transform: rotate(-90deg);
        }

        .progress-bg {
            fill: none;
            stroke: #e2e8f0;
            stroke-width: 2;
        }

        .progress-fill {
            fill: none;
            stroke: #3b82f6;
            stroke-width: 2;
            stroke-dasharray: 188;
            stroke-dashoffset: 188;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.15s ease;
        }

        /* Flèche intérieure */
        .arrow {
            width: 18px;
            height: 18px;
            position: relative;
            z-index: 2;
        }

        .arrow::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            border-top: 2px solid #0062B2;
            border-right: 2px solid #0062B2;
            transform: translate(-50%, -50%) rotate(-45deg);
            transition: all 0.3s ease;
        }

        .back-to-top:hover .arrow::before {
            border-top-color: #0062B2;
            border-right-color: #0062B2;
            transform: translate(-50%, -60%) rotate(-45deg);
        }

        /* Sections de contenu */
        .content-section {
            background: #ffffff;
            padding: 2.5rem;
            margin-bottom: 2rem;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            border: 1px solid #f1f5f9;
        }

        .content-section h2 {
            color: #1e293b;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
            font-weight: 600;
        }

        

        /* Indicateur visuel subtil */
        .scroll-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #ffffff;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #64748b;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #f1f5f9;
        }

        /* Animation d'apparition du contenu */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content-section {
            animation: fadeInUp 0.6s ease-out;
        }

        .content-section:nth-child(2) {
            animation-delay: 0.1s;
        }

        .content-section:nth-child(3) {
            animation-delay: 0.2s;
        }

        .content-section:nth-child(4) {
            animation-delay: 0.3s;
        }