/*
@font-face {
  font-family: proximanova-regular;
  src: url(../fonts/proxima-nova/proxima-nova-regular.ttf);
}
*/

@font-face {
  font-family: millik;
  src: url(../fonts/millik/millik.woff2);
  font-display: swap;
}



/******** Abandoned Card **********/
/*#layers a {
    display:none;
}*/

@media (min-width: 480px) {
    .col-xs-1 {
        max-width: 100%;
    }
}

#layers .btn-primary:hover {
    background: #381f04;
    border: 1px solid #381f04;
}

/******** Abandoned Card **********/



/******** Trustpilot widget **********/

.trustpilot-widget {
  background: transparent;
  color: #333;
  padding: 30px 0 25px 0;
  overflow: hidden;
}
.trustpilot-widget .wrapper-left a {
  color: #333;
  font-weight: 600;
  text-decoration: underline;
}
.trustpilot-widget .wrapper-left {
  text-align: center;
}
.trustpilot-widget .wrapper-left .title {
  color: #333;
  font-size: 24px;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
.trustpilot-widget .wrapper-left .rating img {
  max-width: 160px;
  margin: auto;
}
.trustpilot-widget .wrapper-left .info {
  color: #333;
  font-size: 13px;
  line-height: 45px;
}
.trustpilot-widget .wrapper-left .brand-logo img {
  max-width: 25px;
  margin: auto;
  margin-top: -10px;
  display: inline-block;
}
.trustpilot-widget .wrapper-left .brand-logo p {
  font-size: 18px;
  line-height: 35px;
  color: #333;
  text-align: center;
  display: inline-block;
}
.trustpilot-widget .reviews {
  margin-left: 2%
}
/* The controlsy */
.trustpilot-widget .carousel-control {
    height: 25px;
    width: 25px;
    border: 1px solid #9E9E9E;
    border-radius: 50%;
    margin-top: 60px;
    font-size: 25px;
    background: transparent;
    line-height: 18px;
}
.trustpilot-widget .carousel-control.right {
  margin-right: -50px;
  color: #333;
  text-shadow: none;
}
.trustpilot-widget .carousel-control.left {
  left: -70px;
  color: #333;
  text-shadow: none;
}
.trustpilot-widget .carousel-control.right:hover, .trustpilot-widget .carousel-control.left:hover {
    color: #333;
}
.trustpilot-widget .carousel-inner .rating img {
  max-width: 110px
}
.trustpilot-widget .carousel-inner {
    overflow: hidden
}
.trustpilot-widget .carousel-inner .date, .trustpilot-widget .carousel-inner .name {
  color: rgba(0,0,0,0.6);
  font-size: 13px;
}
.trustpilot-widget .carousel-inner .title {
  margin: 15px 0 10px 0;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 100%; 
  white-space: nowrap; 
}
.trustpilot-widget .carousel-inner .descriptions {
    min-height: 42px;
}
.trustpilot-widget .carousel-inner .name {
  margin-top: 25px
}
/******** Trustpilot widget **********/

















.hero-underline {
    text-decoration: underline;
}

.display-none {
    display:none;
}



.ordersummary-coodiv-box .total-due-today .amt {
    color: #4fb014;
}
.field-container .default-order-form-box {
    border: 2px dashed #260909;
}
#order-standard_cart .product-info li, #order-standard_cart .product-info br {
    /*display:none;*/
}
#frmConfigureDomains .btn-primary, .already-registered .btn-primary{
    display: inline-block;
    border: 1px solid #eeb476;
    border-radius: 5px;
    padding: 5px 30px;
    text-align: center;
    color: #381f04;
    font-size: 17px;
    font-weight: 500;
    background: #ffd262;
}.ordersummary-coodiv-box .btn-primary {
    border: 1px solid #2cd52c;;
    color: #fff;
    background: #2cd52c;;
    border-radius: 5px;
}.ordersummary-coodiv-box .btn-primary:hover {
    border: 1px solid #2cd52c;;
    color: #fff;
    background: #2cd52c;
}
#frmConfigureDomains .btn-primary:hover, .already-registered .btn-primary:hover {
    color: #fff;
    background-color: #3b1d00;
    border: 1px solid #3b1d00;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-qty .btn {
min-width: auto;
width: 100%;
margin: 0;
border: 1px solid #edeef3;
font-size: 12px;
height: 50px;
line-height: 15px;
border-radius: 10px;
font-weight: 400;
text-transform: none;
}

.emyui-ews-plans-price .btn-black {
background-color: #381f04;
border:none;
color:#fff;
}

.emyui-ews-plans-price .emyui-ews-plans-price-algo {
    margin-top:15px;
}


/* Confprducts edit */
#frmConfigureProduct .form-control {
/*    border: 1px solid #ebde8d!important;*/
    border-radius: 6px!important;
    font-size: 14px;
    font-weight: bold;
}


/* Prix sur Facture non payée - Espace client */
.view-invoice-page-sidebar-total h6 {
    color: #ff8c8c;
}


















/***************SERVICE PAGE********************/

#hebergement-web-hero {
    /*background-image: url(/templates/emyui-aws-pro-child/image/heroes/hero-background-hebergement-web-cpanel-min.png) !important;*/
    background-color: antiquewhite;
}
#cloud-vps-hero {
    /*background-image: url(/templates/emyui-aws-pro-child/image/heroes/hero-background-cloud-vps-min.png) !important;*/
    background-color: antiquewhite;
}
#mail-pro-hero {
    /*background-image: url(/templates/emyui-aws-pro-child/image/heroes/hero-background-mail-pro-min.png) !important;*/
    /*background-color: antiquewhite;*/
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9ED 100%);
}
#whm-reseller-hero {
    /*background-image: url(/templates/emyui-aws-pro-child/image/heroes/hero-background-whm-reseller-min.png) !important;*/
    background-color: antiquewhite;
}


/*
section#main-body {
    padding: 0px 0 70px;
}
.orderform-step-form-wizard-row-aws {
    margin-top: 0px;
}
*/

/* Enlever le gap entre le menu navbar et la section hero sur certaines pages de services */
.service-hero-margin-40 {
    margin-top:-40px;
} .service-hero-margin-20 {
    margin-top:-20px;
}


.header-service .coodiv-cloud-hero-title {
    /*
    font-weight: 900;
    font-weight: normal;
    font-size: 60px;
    line-height: 60px;
    */
    width: 100%;
    
    font-size: 4rem;
    font-weight: 800;
    color: #582D1D;
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.hero-content .coodiv-text-5, .hero-content-2 .coodiv-text-5 {
    font-size: 60px;
    line-height: 60px;
}


.header-service .coodiv-text-10 {
    font-size: 25px;
    /*letter-spacing: -.5px;*/
}

.header-service .coodiv-text-12 {
    font-size: 19px;
    line-height: 1.63;
}


@media (max-width:992px){
    .header-service .coodiv-cloud-hero-title {
        font-weight: 900;
        font-weight: lighter;
        font-size: 40px;
        line-height: 40px;
        width: 100%;
    }
    
    .hero-content .coodiv-text-5 {
        font-size: 40px;
        line-height: 40px;
    }
    
    .header-service .coodiv-text-10 , .header-service .coodiv-text-12, .header-service .hero-btns {
        display:none;
    }
    
    /*
    #hebergement-web-hero, #cloud-vps-hero, #mail-pro-hero {
        background-image: url() !important;
        background-color: antiquewhite;
        background: linear-gradient(135deg, #FFFFFF 0%, #FFF9ED 100%);
    }`*/
    
    #logos-os {
        display:none;
    }
    
}


/***************Business Email PAGE********************/
/*
#email-8gb .mt-auto, #email-25gb .mt-auto, #email-50gb .mt-auto, #email-100gb .mt-auto {
    margin-top: 0!important;
}


#vps-server-tabContent .pricing-plans-special-body li {
    display: flex;
    font-size: 13px;
    color: #111213;
    padding: 0;
    margin: 0;
    margin-top: -20px;
    flex-wrap: wrap;
    column-gap: 6px;
    align-items: center;
}
*/

/*
.gray-color {
    color:#777;
}
*/

/*
.hero-btns a {
    font-weight: 700;
}
*/

.pricing-plans-special-body li {
    font-size: 17px;
}

#vps-server-tabContent .btn-outline-dark {
    font-size:17px;
}

/**************************************************/

















/* Background principal de differentes section */
.bg-default {
    /*
    background: #fcfdfe;
    background: #feffff;
    */
    background: #fff;
}

body.coodiv-clouds-theme{
    font-family: "Proxima Nova Rg", Arial, sans-serif
}

.emyui-ews-plans-group .emyui-ews-plans-group-price-tag, .aws-domains-ltds-price-item {
    font-family: "Proxima Nova Rg", Arial, sans-serif;
}

h1, h2 {
    font-family: "Proxima Nova Th", Arial, sans-serif;
}

h3,h4,h5,h6 {
    font-family: "Proxima Nova Lt", Arial, sans-serif;
}



/* Pre-loader domain validation && checkout confirm */
#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: #381f04; /*rgba(255,255,255,1)*/
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#ffc107;
    border-top-color:transparent;
    border-width: 10px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.center-text-spin {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
    color: white;
    font-weight:bold;
}

/* Pre-loader general du site 
.preloader{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:9999;background:#381f04;overflow:hidden;}
.preloader .preloader-container{position:absolute;left:0;right:0;margin:auto;display:block;width:120px;text-align:center;top:50%;transform:translateY(-50%); width:40px;height:40px;
    border-style:solid;
    border-color:#ffc107;
    border-top-color:transparent;
    border-width: 10px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;}
.preloader .preloader-container svg{}
*/





/********** NEW - Pre-loader general du site **********/


/* Variables CSS Safaricloud */
:root {
    --preloader-primary-color: #582D1D;
    --preloader-secondary-color: #FFA500;
    --preloader-secondary-light: #FFB733;
    --preloader-white: #FFFFFF;
}

/* PRELOADER PRINCIPAL */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--preloader-primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.preloader.fade-out {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

.preloader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    position: relative;
    max-width: 500px;
    width: 90%;
}

/* LOGO SAFARICLOUD */
.safaricloud-logo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 2rem;
}

.logo-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(
        135deg, 
        var(--preloader-white) 0%, 
        var(--preloader-white) 50%, 
        var(--preloader-secondary-color) 50%, 
        var(--preloader-secondary-color) 100%
    );
    border-radius: 50%;
    animation: logo-pulse 2.5s ease-in-out infinite;
    box-shadow: 
        0 8px 30px rgba(255, 165, 0, 0.4),
        0 0 40px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.logo-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    );
    animation: logo-shine 3s ease-in-out infinite;
}

.logo-text {
    color: var(--white);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: 3px;
    text-shadow: 
        0 0 25px rgba(255, 165, 0, 0.6),
        0 3px 6px rgba(0, 0, 0, 0.3);
    animation: text-glow 2.5s ease-in-out infinite;
}

/* POURCENTAGE DE CHARGEMENT */
.loading-percentage {
    color: var(--preloader-white);
    font-size: 4rem;
    font-weight: 700;
    text-shadow: 
        0 0 30px rgba(255, 165, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.5);
    animation: percentage-glow 1.8s ease-in-out infinite;
    margin-bottom: 1rem;
    position: relative;
}

.loading-percentage::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--preloader-secondary-color) 50%,
        transparent 100%
    );
    animation: underline-glow 2s ease-in-out infinite;
}

/* TEXTE DE CHARGEMENT */
.loading-text {
    color: var(--preloader-secondary-color);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(255, 165, 0, 0.5);
    animation: text-fade 2.2s ease-in-out infinite;
    margin-bottom: 1rem;
    margin-left:-25px;
}

/* BARRE DE PROGRESSION PREMIUM */
.progress-container {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 165, 0, 0.3);
    box-shadow: 
        0 0 25px rgba(255, 165, 0, 0.2),
        inset 0 0 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
}

.progress-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: container-shimmer 3s ease-in-out infinite;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--preloader-secondary-color) 0%,
        #FFD700 15%,
        var(--preloader-secondary-light) 35%,
        #FFD700 50%,
        var(--preloader-secondary-light) 65%,
        #FFD700 85%,
        var(--preloader-secondary-color) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.15s ease-out;
    box-shadow: 
        0 0 20px rgba(255, 165, 0, 0.7),
        0 0 40px rgba(255, 165, 0, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    animation: progress-gradient 2s linear infinite;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 70%,
        transparent 100%
    );
    animation: progress-shine 2.5s ease-in-out infinite;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 100%
    );
}

/* ANIMATIONS */
@keyframes logo-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 8px 30px rgba(255, 165, 0, 0.4),
            0 0 40px rgba(255, 255, 255, 0.1);
    }
    50% { 
        transform: scale(1.08);
        box-shadow: 
            0 10px 40px rgba(255, 165, 0, 0.6),
            0 0 50px rgba(255, 255, 255, 0.2);
    }
}

@keyframes logo-shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes text-glow {
    0%, 100% { 
        text-shadow: 
            0 0 25px rgba(255, 165, 0, 0.6),
            0 3px 6px rgba(0, 0, 0, 0.3);
    }
    50% { 
        text-shadow: 
            0 0 35px rgba(255, 165, 0, 0.9),
            0 3px 8px rgba(0, 0, 0, 0.4);
    }
}

@keyframes percentage-glow {
    0%, 100% { 
        text-shadow: 
            0 0 30px rgba(255, 165, 0, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    50% { 
        text-shadow: 
            0 0 45px rgba(255, 165, 0, 1),
            0 4px 12px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }
}

@keyframes underline-glow {
    0%, 100% { 
        opacity: 0.6;
        width: 60px;
    }
    50% { 
        opacity: 1;
        width: 100px;
    }
}

@keyframes text-fade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes container-shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes progress-gradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

@keyframes progress-shine {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

/* CONTENU PRINCIPAL */
.main-content {
    display: none;
    padding: 3rem;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-content.show {
    display: flex;
}

.welcome-message {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-description {
    color: #6c757d;
    font-size: 1.2rem;
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.restart-button {
    background: var(--preloader-secondary-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.restart-button:hover {
    background: var(--preloader-primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 45, 29, 0.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .preloader-container {
        gap: 2rem;
        padding: 0 1rem;
    }

    .logo-icon {
        width: 60px;
        height: 60px;
    }

    .logo-text {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }

    .loading-percentage {
        font-size: 3rem;
    }

    .loading-text {
        font-size: 1rem;
        letter-spacing: 3px;
    }

    .progress-container {
        max-width: 300px;
        height: 6px;
    }

    .welcome-message {
        font-size: 2rem;
    }

    .demo-description {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
}



/************************************************************************************/


/* Box decription des formules produits/services */
.emyui-ews-plans-discription {
    min-height: 160px;
}
.emyui-ews-plans-discription-2 {
    min-height: 225px;
}

.emyui-ews-plans-title {
    min-height: 60px;
    text-align: center;
}

/* Box decription des formules produits/services - Btn add to cart */
.emyui-ews-plans-group .emyui-ews-plans-add-cart, .btn-purple, .btn-outline-dark {
    /*display: inline-block;*/
    margin-top: 15px;
    border: 1px solid #eeb476;
    border-radius:5px;
    padding: 10px 10px;
    text-align: center;
    color: #381f04;
    font-weight: 700;
    background: #ffd262;
} .emyui-ews-plans-group .emyui-ews-plans-add-cart:hover, .btn-purple:hover, .btn-outline-dark:hover {
    background: #381f04;
    border: 1px solid #381f04;
}
.btn-purple {max-width:300px;}


/* Description technique de chaque formule */
.emyui-ews-plans-features li{
    margin-bottom: -35px; 
}
/*
.pricing-plans-special-body li {
    margin-bottom: -30px;
}
*/


.emyui-ews-plans-group .emyui-ews-plans-features li i.fa-check, #frmConfigureProduct .product-info li i.fa-check, .pricing-plans-special-body li i.fa-check, #products .features i.fa-check {
    color:#6cda62;
}
.emyui-ews-plans-group .emyui-ews-plans-features li i.fa-times, #frmConfigureProduct .product-info li i.fa-times, .pricing-plans-special-body li i.fa-times, #products .features i.fa-times {
    color: #dc3545;
}


.emyui-ews-plans-feature-plan:before {
    background: none;
}
.emyui-ews-plans-row .emyui-ews-plans-group {
    padding: 55px 30px 35px;
}


/* Description technique de chaque formule - Passer une nouvelle commande */
.card-list li {
    display: block;
    margin-bottom: -25px;
}

/* blilling cycle title */
.h6-highlighted {
    display: inline-block;
    background-color: #ffeea9;
    padding: 0 10px;
}


/* Arriere plan de certains titres - processus de commande */
.register-area-box-checkout .register-area-box-checkout-title, .domains-addons-products-title, .domains-addons-products-title {
    background-color: #3b1d00;
}
.text-green {
    color: #3b1d00;
}

/*Element tableau comparatif techniuque*/
.servers-compare-table .servers-compare-table-body-item .servers-compare-table-body-item-title {
    color: #000;
}
.servers-compare-table .servers-compare-table-header {
    border-bottom: 2px solid #3b1d00;
}
.servers-compare-table {
    border: 1px solid #3b1d00;
}






/* Enregistrement de domaine - Hero principal */
.domain-registiration-hero {
    background: #fff2cc;
}

.btn-black {
    color: #3b1d00;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-black:hover, .btn-outline-black:hover {
    background-color: #381f04;
}


.btn-hero-main {
    width:250px;
}




body.coodiv-clouds-theme .mirrage-bg-color {
    background: #3b1d00;
}

.domain-checker-emyui-aws-homepage .input-group-btn button {
    /*background: #ffc107;*/
    background: #ffd262;
    border-radius: 0;
    color: #3b1d00;
    display: flex;
    align-items: center;
    height: 100%;
} .domain-checker-emyui-aws-homepage .input-group-btn button:hover {
    background: #eeb476;
}

.domain-checker-emyui-aws-homepage {
    background-color: #0b0b0b00;
}


.mirrage-bg-color h1, .mirrage-bg-color h2, .mirrage-bg-color h5 {
    color:#fff;
}
.mirrage-bg-color p {
    color: rgb(215 215 215);
}

/************************************************************************************/






/* Live chat bottom right */
.badge-chat{
    background:#3b1d00;
    border-radius:100px;
    display:flex;
    align-items:center;
    position:fixed;
    bottom:26px;
    cursor:pointer;
    right:26px;
    z-index:10000;
    padding:7px 10px;
    border:1px solid #733d08;
}
    @media (max-width:992px){
        .badge-chat{
            width:60px;
            height:60px;
            background:#fff;
            border:1px solid #3b1d00;
        }
    }
    
    .badge-chat .bul{
        background:#fff;
        border-radius:100px;
        width:44px;
        height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    
    .badge-chat img{
        width:20px;
    }
    
    .badge-chat .information p{
        color:#fff;
        /*font-family:'Gilroy-Bold';*/
        font-size:17px;
        margin-bottom:0;
        margin-left:12px;
        margin-right:10px;
        margin-top:5px;
    }
    
    @media (max-width:992px){
        .badge-chat .information{
            display:none;
        }
    }
    
    .pulse-chat{
        animation:pulse 2s infinite;
    }
    
    @-webkit-keyframes pulse-chat{
        0%{
            -webkit-box-shadow:0 0 0 0 #733d08;
        }
        70%{
            -webkit-box-shadow:0 0 0 20px rgba(255,11,116,0);
        }
        100%{
            -webkit-box-shadow:0 0 0 0 rgba(255,11,116,0);
        }
    }
    
    @keyframes pulse-chat{
        0%{
            -moz-box-shadow:0 0 0 0 #733d08;
            box-shadow:0 0 0 0 #733d08;
        }
        70%{
            -moz-box-shadow:0 0 0 20px rgba(255,11,116,0);
            box-shadow:0 0 0 20px rgba(255,11,116,0);
        }
        100%{
            -moz-box-shadow:0 0 0 0 rgba(255,11,116,0);
            box-shadow:0 0 0 0 rgba(255,11,116,0);
        }
    }
/* Live chat bottom right */




/* ***************** Pricing Tables - START *****************  */
.pricing-plan-most-popular {
    background: #fffae8;
    border: 2px solid #602401;
}

.pricing-plan-popular-badge {
    position: absolute;
    top: -1px;
    background-color: #602401;
    left: -1px;
    border-radius: 8px 8px 0 0;
    right: -1px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    font-weight: 700;
    font-size: 12px;
    padding-right: 15px;
    color: white;
}

.pricing-plan-popular-badge:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #602401 transparent transparent;
    position: absolute;
    bottom: -7px;
}



/* ***************** Pricing Tables - END *****************  */


#totalTodayExcludingTaxSetup span {
    /*color: #4fb014;*/
}

.renewal-price {
    background: #fff3c4;
    font-family: "Proxima Nova", Arial, sans-serif;
}

/* **************************************************  */



/* ***************** Order Page *****************  */

/* Centraliser la partie gateway payment */
.payment-gateways-container label{
    text-align: center;
}

.addon-promo-container label{
    text-align: left;
}

.addon-promo-container label {
    text-align: left;
}

#gateway-name {
    font-size:20px;
}

#gateway-img{
    /*width:70%;*/
    width:30%;
    margin-top:10px;
    display: inline-block;
}

#btnCompleteOrder {
    padding: 10px 40px;
    font-size: 17px;
    font-weight: 400;
    border: 1px solid #2cd52c;;
    background: #2cd52c;;
    color: #fff;
    border-radius: 5px;
}
#btnCompleteOrder .icon-lock {
    margin-right:10px;
}

/* Aucun hébergement ! Cliquez pour en ajouter un */
.domains-addons-products-group-box .badge-warning {
  color: #fff;
  background-color: #ea2e2e;
  /*border: 1px solid;*/
  font-size: 13px;
}


@media (max-width:992px){
        #gateway-img{
            width:100%;
        }
        #btnCompleteOrder {
        font-size: 15px;
    }
    
    .domains-addons-products-group-box .badge-warning {
        font-size: 10px;
    }
}


/* Progress bar order page */
.progress-bar {
    background-color: #422907;
}


/* ***************** Order Page *****************  */


/*  ================================ SERVICE ORDER CONFIGURATION ================================ */
#order-standard_cart .domain-selection-options .option.domain-productconfigiration-options-item {
    padding: 10px 25px !important;
    border: 0 !important;
    margin-bottom: 15px !important;
    background: #f6f9fa !important;
    display: inline-block;
    width: 30%;
    min-height: 200px;
    vertical-align: top;
} 

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





/* ***************** Home Page *****************  */

/*Hhomepage hero background*/
#homepage-hero {
    background-image: url('https://safaricloud.net/templates/safaricloud-net-child/image/demo/coodiv-hero.webp') !important;
}

@media (max-width:992px){
        #homepage-hero{
            background-image: url('https://safaricloud.net/templates/safaricloud-net-child/image/demo/arriere-plan-blanc.webp') !important;
            padding-top: 7.5rem!important;
            padding-bottom: 0rem!important;
        }
        .coodiv-cloud-hero-title {
            font-family: "Proxima Nova", Arial, sans-serif;
        }
}


/*Some text styling */
/*
body.coodiv-clouds-theme .main-menu>li>.nav-link {
    font-size: 15px;
    letter-spacing: -.5px;
    font-weight: 100;
}

.navbar-nav-wrapper li {
    font-weight: 100;
}
*/

/*
.coodiv-text-11 {
    font-size: 17px;
    letter-spacing: -.6px;
}
*/

.emyui-ews-plans-group .emyui-ews-plans-features li {
    font-size: 17px;
    /*letter-spacing: -.5px;*/
    color: #2d2d2d;
}

.emyui-ews-plans-group .emyui-ews-plans-features li b {
    font-weight: 500;
    color: #121600;
    /*text-decoration:underline;*/
    /*border-bottom:1px dotted black;*/
}

.emyui-ews-plans-group .emyui-ews-plans-add-cart, .btn-purple, .btn-outline-dark {
    font-weight: 400;
    font-size: 19px;
}

.coodiv-text-9 {
    font-size: 17px;
    /*letter-spacing: -0.5px;*/
}

.coodiv-text-11 .color-blackish-blue {
    color: #80672c;
}

.header-btn a.client-login-header-btn, .header-btn a.contact-header-btn {
    font-size: 15px;
}

.header-btn a, body.coodiv-clouds-theme .header-btn a.contact-header-btn {
    font-weight: 500;
}


body.coodiv-clouds-theme .footer-emyui-aws ul.footer-list li a.footer-list-link {
    font-size: 15px;
    /*letter-spacing: -0.5px;*/
    /*font-weight: 100;*/
}

.coodiv-text-10 {
    font-size: 17px;
    /*letter-spacing: -.5px;*/
}

.coodiv-text-8 {
    font-size: 25px;
    /*letter-spacing: -0.5px;*/
    line-height: 1.4;
}

.emyui-ews-plans-price .coodiv-text-8 {
    font-size: 17px;
}

.btn {
    font-weight: 500;
}


.free-plan {
    background-color: #efd8d8;   
}

.footer-top-section p {
    color:#fff;
}



/*Conf product command*/
#frmConfigureProduct .product-info li {
    font-size: 15px;
    /*letter-spacing: -.5px;*/
    font-weight: 400;
    color: #242424;
}

#frmConfigureProduct .product-info li b {
    font-weight: 500;
    margin-left: 4px;
}

/* ***************** Home Page *****************  */





/* Secondary Navbar - Largeur cadrée */
.nav-scroller-subpages .nav {
    max-width: 1280px;
    margin: 0 auto;
}
























/* ***************** Header Claude - BEGIN *****************  */
/* Variables modernes */
:root {
    --sf-primary: #FFA500;
    --sf-primary-dark: #E67E00;
    --sf-secondary: #582D1D;
    --sf-secondary-light: #7D4B36;
    --sf-accent: #FFB733;
    --sf-white: #FFFFFF;
    --sf-gray-50: #F8F9FA;
    --sf-gray-100: #F5F5F5;
    --sf-gray-200: #E9ECEF;
    --sf-gray-600: #6C757D;
    --sf-gray-700: #495057;
    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    --sf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
    --sf-transition: all 0.3s ease;
    --sf-radius-sm: 0.375rem;
    --sf-radius-md: 0.5rem;
    --sf-radius-lg: 0.75rem;
}

/* Header modernisé */
.sf-modern-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--sf-gray-200);
    transition: var(--sf-transition);
    position: relative;
    z-index: 1000;
}

.sf-modern-header.sf-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--sf-shadow-md);
}

.sf-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(var(--sf-gray-200) 1px, transparent 1px),
        radial-gradient(var(--sf-gray-200) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.3;
    pointer-events: none;
}

/* Logo modernisé */
.sf-brand-logo .sf-logo-link {
    display: block;
    transition: transform var(--sf-transition);
}

.sf-brand-logo .sf-logo-link:hover {
    transform: scale(1.05);
}

.sf-logo {
    /*height: 45px;*/
    width: auto;
    transition: var(--sf-transition);
}

/* Navigation modernisée */
.sf-navbar-nav .nav-item .nav-link {
    font-weight: 500;
    color: var(--sf-gray-700);
    padding: 0.75rem 1rem;
    border-radius: var(--sf-radius-md);
    transition: var(--sf-transition);
    position: relative;
}

.sf-navbar-nav .nav-item .nav-link:hover,
.sf-navbar-nav .nav-item .nav-link:focus {
    color: var(--sf-secondary);
    background-color: var(--sf-gray-50);
    transform: translateY(-1px);
}

.sf-navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-accent));
    transition: var(--sf-transition);
    transform: translateX(-50%);
}

.sf-navbar-nav .nav-item .nav-link:hover::after {
    width: 80%;
}

/* Bouton mobile modernisé */
.sf-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: var(--sf-radius-md);
    cursor: pointer;
    transition: var(--sf-transition);
}

.sf-mobile-toggle:hover {
    background-color: var(--sf-gray-100);
}

.sf-hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--sf-gray-700);
    border-radius: 2px;
    transition: var(--sf-transition);
}

.sf-mobile-toggle.active .sf-hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.sf-mobile-toggle.active .sf-hamburger-line:nth-child(2) {
    opacity: 0;
}

.sf-mobile-toggle.active .sf-hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Actions du header modernisées */
.sf-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sf-cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sf-radius-md);
    background-color: var(--sf-gray-100);
    color: var(--sf-gray-700);
    text-decoration: none;
    transition: var(--sf-transition);
}

.sf-cart-btn:hover {
    background-color: var(--sf-gray-200);
    color: var(--sf-secondary);
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-sm);
}

.sf-cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-accent));
    color: var(--sf-white);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sf-white);
    box-shadow: var(--sf-shadow-sm);
}

/* Notifications modernisées */
.sf-notifications-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--sf-radius-md);
    background-color: var(--sf-gray-100);
    color: var(--sf-gray-700);
    text-decoration: none;
    transition: var(--sf-transition);
}

.sf-notifications-btn:hover {
    background-color: var(--sf-gray-200);
    color: var(--sf-secondary);
    transform: translateY(-2px);
}

.sf-notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #DC3545;
    border-radius: 50%;
    border: 2px solid var(--sf-white);
}

.sf-dropdown-menu {
    border: none;
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-lg);
    border: 1px solid var(--sf-gray-200);
    margin-top: 0.5rem;
}

.sf-dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid var(--sf-gray-200);
}

.sf-notifications-list {
    max-height: 300px;
    overflow-y: auto;
}

.sf-notification-item a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sf-gray-100);
    text-decoration: none;
    color: var(--sf-gray-700);
    transition: var(--sf-transition);
}

.sf-notification-item a:hover {
    background-color: var(--sf-gray-50);
}

.sf-notification-empty {
    text-align: center;
    padding: 2rem;
    color: var(--sf-gray-600);
}

/* Boutons connexion/inscription modernisés */
.sf-register-btn {
    font-weight: 500;
    color: var(--sf-gray-700);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--sf-radius-md);
    transition: var(--sf-transition);
}

.sf-register-btn:hover {
    color: var(--sf-secondary);
    background-color: var(--sf-gray-50);
}

.sf-login-btn {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-accent)) !important;
    border: none !important;
    color: var(--sf-white) !important;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--sf-radius-md) !important;
    transition: var(--sf-transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sf-login-btn:hover {
    background: var(--sf-secondary) !important;
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-md);
}

/* Menu mobile modernisé */
.sf-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--sf-transition);
    z-index: 999;
}

.sf-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sf-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 400px;
    height: 100%;
    background: var(--sf-white);
    z-index: 1000;
    transition: right var(--sf-transition);
    overflow-y: auto;
    box-shadow: var(--sf-shadow-lg);
}

.sf-mobile-menu.active {
    right: 0;
}

.sf-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--sf-gray-200);
    background: var(--sf-gray-50);
}

.sf-mobile-logo img {
    height: 32px;
}

.sf-mobile-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--sf-white);
    border-radius: var(--sf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-gray-700);
    cursor: pointer;
    transition: var(--sf-transition);
    box-shadow: var(--sf-shadow-sm);
}

.sf-mobile-close:hover {
    background-color: var(--sf-gray-100);
    transform: scale(1.05);
}

.sf-mobile-content {
    padding: 1.5rem;
}

.sf-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sf-gray-700);
    text-decoration: none;
    border-radius: var(--sf-radius-md);
    transition: var(--sf-transition);
    margin-bottom: 0.5rem;
}

.sf-mobile-nav-link:hover {
    background-color: var(--sf-gray-50);
    color: var(--sf-secondary);
    transform: translateX(4px);
}

.sf-mobile-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sf-gray-200);
}

.sf-mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--sf-radius-md);
    text-decoration: none;
    transition: var(--sf-transition);
    margin-bottom: 0.75rem;
}

.sf-mobile-action-btn.sf-btn-primary {
    background: linear-gradient(135deg, var(--sf-primary), var(--sf-accent));
    color: var(--sf-white);
}

.sf-mobile-action-btn.sf-btn-secondary {
    background: transparent;
    color: var(--sf-secondary);
    border: 2px solid var(--sf-secondary);
}

.sf-mobile-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-md);
}

/* Responsive */
@media (max-width: 992px) {
    .sf-mobile-toggle {
        display: flex;
    }
    
    .sf-navbar-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .sf-header-actions {
        gap: 0.5rem;
    }
    
    .sf-register-btn span {
        display: none;
    }
    
    .sf-mobile-menu {
        width: 100%;
    }
}

/* Animation au scroll */
.sf-header-scrolled {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Focus states pour l'accessibilité */
.sf-cart-btn:focus,
.sf-notifications-btn:focus,
.sf-login-btn:focus,
.sf-register-btn:focus {
    outline: 2px solid var(--sf-primary);
    outline-offset: 2px;
}


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

/* Animations supplémentaires pour les interactions */
.sf-modern-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation des dropdowns */
.sf-dropdown-menu {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.sf-dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Effet de lueur pour les éléments actifs */
.sf-cart-btn.active,
.sf-notifications-btn.active {
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.3);
}

/* Animation du badge du panier */
.sf-cart-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation de la notification */
.sf-notification-badge {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Effet de survol sophistiqué pour les liens de navigation */
.sf-navbar-nav .nav-item .nav-link {
    position: relative;
    overflow: hidden;
}

.sf-navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.1), transparent);
    transition: left 0.5s;
}

.sf-navbar-nav .nav-item .nav-link:hover::before {
    left: 100%;
}

/* Animation des éléments du menu mobile */
.sf-mobile-nav-item {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sf-mobile-menu.active .sf-mobile-nav-item {
    opacity: 1;
    transform: translateX(0);
}

.sf-mobile-nav-item:nth-child(1) { transition-delay: 0.1s; }
.sf-mobile-nav-item:nth-child(2) { transition-delay: 0.2s; }
.sf-mobile-nav-item:nth-child(3) { transition-delay: 0.3s; }
.sf-mobile-nav-item:nth-child(4) { transition-delay: 0.4s; }
.sf-mobile-nav-item:nth-child(5) { transition-delay: 0.5s; }

/* Effet de gradient animé pour les boutons */
.sf-login-btn {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animation de typing pour le logo (optionnel) */
.sf-logo {
    filter: brightness(1);
    transition: filter 0.3s ease;
}

.sf-logo-link:hover .sf-logo {
    filter: brightness(1.1) saturate(1.2);
}

/* Amélioration des tooltips (si utilisés) */
.sf-tooltip {
    position: relative;
}

.sf-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sf-gray-800);
    color: var(--sf-white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--sf-radius-md);
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.sf-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Micro-interactions pour améliorer l'UX */
.sf-cart-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.sf-notifications-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Animation de chargement pour les liens */
.sf-nav-link.loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-accent));
    animation: loadingBar 1s ease-in-out;
}

@keyframes loadingBar {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

/* Styles pour l'état focus keyboard navigation */
.sf-cart-btn:focus-visible,
.sf-notifications-btn:focus-visible,
.sf-login-btn:focus-visible {
    outline: 2px solid var(--sf-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.2);
}

/* Animation de rebond pour les badges */
.sf-cart-badge.updated {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Mode sombre (si activé) */
/*
@media (prefers-color-scheme: dark) {
    .sf-modern-header {
        background: rgba(26, 26, 26, 0.95) !important;
        border-bottom-color: #333;
    }
    
    .sf-header-bg {
        background-image: 
            radial-gradient(#444 1px, transparent 1px),
            radial-gradient(#444 1px, transparent 1px);
    }
    
    .sf-navbar-nav .nav-item .nav-link {
        color: #e5e5e5;
    }
    
    .sf-cart-btn,
    .sf-notifications-btn {
        background-color: #333;
        color: #e5e5e5;
    }
    
    .sf-mobile-menu {
        background: #1a1a1a;
    }
}
*/

/* Responsive amélioré */
@media (max-width: 1200px) {
    .sf-navbar-nav {
        gap: 1rem;
    }
    
    .sf-navbar-nav .nav-item .nav-link {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 576px) {
    .sf-header-actions {
        gap: 0.25rem;
    }
    
    .sf-cart-btn,
    .sf-notifications-btn {
        width: 40px;
        height: 40px;
    }
    
    .sf-login-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Préférence pour les animations réduites */
@media (prefers-reduced-motion: reduce) {
    .sf-modern-header,
    .sf-cart-btn,
    .sf-notifications-btn,
    .sf-mobile-nav-item,
    .sf-hamburger-line {
        transition: none;
        animation: none;
    }
}


/* ***************** Header Claude - END *****************  */





























/* ***************** Knowledge Base *****************  */
.kb-image {
    border:3px solid black;
    width:60%;
}


/* ***************** Knowledge Base *****************  */


/************************************************************************************/

/*
body.coodiv-clouds-theme .footer-emyui-aws ul.footer-list li a.footer-list-link {
    font-family:NeueHelveticaBQMedium, Arial, sans-serif;
}

.offcanvas-active.navbar-expand-lg .main-menu>li>.nav-link {
    font-family:"NeueHelveticaBQBold", Arial, sans-serif;
    font-size:13px;
}*/


/* Les principaux conteneurs (wrappers) */
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    /*width: 970px;*/
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
}

/* La barre au dessus - entete superieure */
.whmcs-top-header-area {
    /*background: #382a00;*/
    background: #000;
    height: 44px;
    /*display:none;*/
}
.whmcs-top-header-area .right-top-header-area-menu {
    height: 42px;
}
.right-top-header-area-menu-support {
    height: 22px;
}


/* Les deux menus à droite entete superieur*/
.right-top-header-area-menu-support li a {
    background-color: transparent;
    background-image: none;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin-right: 15px;
    padding: 5px 20px;
    /*letter-spacing: .4px;*/
    border-radius: 4px;
    position: relative;
    opacity: .9;
}

/* Menu entete superieur avec boule verte*/
.right-top-header-area-menu-support li a.online:after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: #5dc461;
    right: 8px;
    top: 9px;
    border-radius: 50px;
}

/* Logo */
@media (min-width: 992px) 
{
    /*.brand-logo.big-brad-logo>a>img, .brand-logo-signup.big-brad-logo>a>img {
        height:50px;
    }
    */
    
}


/*** Sous-menu scrollable - Entête ***/
.order-form-menu-scroller {
    display: none;
}



/*Index awspro*/
/*
.btn-purple {
    color: #42210b;
    background-color: #f4cd76;
    border-color: #f4cd76;
}*/


/* Footer conteneur principal*/
.footer-emyui-aws {
    background: #2e1800;
}

.header-btn a.client-login-header-btn, .btn-primary, .btn, .form-control, #order-standard_cart .aply-promo-code .orderpromovalidatebutton {
    /*border-radius: 0px;*/
}

.header-btn a.client-login-header-btn {
    color:#000;
    background-color: #fff0;
    border-color: #fff0;
}



#sitejetPromoPanel {
    display:none;
}




/************************************************************************************/
/***** Page inscription, connexion - et quelques couleurs générales sur le site *****/
/************************************************************************************/

.gradient-animated-bg, .coodiv-check-input input:checked ~ .checkbox {
  background: none;
  background: #381f04;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .main-btn {
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-primary, .main-btn {
    color: #381f04;
}

.main-btn {
    width: 100%;
    max-width: 460px; 
}

a, a:hover {
    color: #381f04;
}
.text-primary, .text-primary:hover {
    color: #381f04!important;
}
a.text-primary:hover, a.text-primary:focus {
    color: #381f04!important;
}

.shoping-cart-btn-header .shoping-cart-number {
    background: #381f04;
}

h1, h2 {
    color: #381f04;
}


/* --------------  Dropdown Header Menu ----------------  */
/*
ul {
    list-style-type:none;
}

.navbar-nav-wrapper li {
list-style:none; //On enlève les puces de la liste
color:#000;
padding:10px;
font-size:13px;
text-decoration:none;
font-weight:bold;
}
 
.navbar-nav-wrapper ul {
//background-color:#64abfb;
padding:0;
margin:0;
}
 
.navbar-nav-wrapper ul li {
list-style: none;
float:left;
//background-color:#64abfb;
}

.navbar-nav-wrapper ul li ul {
background-color:#ccc;
}
 
.navbar-nav-wrapper ul li a {
color:#000;
padding:10px;
font-size:13px;
text-decoration:none;
}
 
.navbar-nav-wrapper li a:hover {
//border-bottom:3px #FFF solid;
}

.navbar-nav-wrapper ul li ul { 
display:none; // Rend le menu déroulant caché par défaut
} 
 
.navbar-nav-wrapper ul li:hover ul { // Affiche la dropNav au survol de la souris avec la class .drop 
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:0px;
margin-left:-10px;
}
 
.navbar-nav-wrapper ul li:hover ul li {
float:none;
}


/* --------------  Dropdown Header Menu ----------------  */





/* FAQ CSS */

div + div {
    clear: both;
}

p {
    line-height: 1.4em;
    color: #262626;
}

.faq-header {
    
    width: 100%;
    margin: 0.4em auto;
    text-align:center;
    
}

.faq-title {
    font-size: 2em;
    margin: 0.4em 0;
}

div.seperator {
    width: 7.5em;
    background-color: #000;
    height: 0.17em;
    margin-left: -1.8em;
}

.faq-list > div {
    /*border-bottom: 0.07em solid #ededed;
    padding: 1.5em 0em;*/
} 

.faq-list > div:last-child {
    border: unset;
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

summary {
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    transition: all 0.3s ease;
}

summary:hover {
    color: #000;
}

details[open] summary ~ * {
    animation: sweep .5s ease-in-out;
}

@keyframes sweep {
    0%    {opacity: 0; margin-left: -10px}
    100%  {opacity: 1; margin-left: 55px}
}

details[open] summary {
    color: #000;
}

details[open] p {
    border-left: 2px solid #000;
    margin-left: 55px;
    padding-left: 25px;
    opacity: 100;
    transition: all 3s ease;
}

details[open] summary:after {
    content: "-";
    font-size: 3.2em;
    margin: -33px 0.35em 0 0;
    font-weight: 200;
}

.faq-body {
    width: 60%;
    margin: 4em auto;
    /*box-shadow: 0px 0px 16px #5b5b5b;
    border-radius: 0.2em;
    padding: 5em;
    background-color: #fff;*/
}

.faq-list {
    width: 100%;
    margin: 1em auto;
    padding: 2em 0;
}

summary::-webkit-details-marker {
    display: none;
}

summary:after {
    background: transparent;
    border-radius: 0.3em;
    content: "+";
    color: #000;
    float: left;
    font-size: 1.8em;
    font-weight: bold;
    margin: -0.3em 0.65em 0 0;
    padding: 0;
    text-align: center;
    width: 25px;
}



/* Client Area - cPanel icons */
.main-page-contents .coodiv-taboverview #cPanelQuickShortcutsPanel.panel.card .panel-body.card-body a img {
    width: 50px;
    margin: 0;
}



/*================================== MOBILE ========================================*/
/* Responsiveness - Targeting Mobile Phones */
@media (max-width: 768px) {
    /*
  .faq-body {
    width: 100%;
    margin:0;
  }*/
  
  .whmcs-top-header-area {
      display: none;
    }
  
  /* sticky bacr d'info en dessous de la navbar principale sur certaines pages services */
  .custom-page-container .services-iformations-sticky-navbar {
    top: 65px;
    }
    
    
    /* Texte /mois sur les tarifs des services */
    .per-month-txt {
        /*display:none;*/
    }
    
    .emyui-ews-plans-discription {
        min-height: 0px;
    }
    .emyui-ews-plans-discription-2 {
        min-height: 0px;
    }
    
    .emyui-ews-plans-title {
        min-height: 30px;
        text-align: center;
    }
    
    .description-hero-homepage, .hero-btn-homepage {
        display:none;
    }
    
    /* Tableau de comparaison technique des packages */
    #compare {
        display:none;
    }
    
    .logos-technologies-1 {
        display:none;
    }
    
    /* Tableau d'etensions par defaut sous la page - enregistrer un domaine */
    .tab-extensions-par-categorie {
        display:none;
    }
    
    #promotions-slider {
        display:none;
    }
    
    #order-standard_cart .domain-selection-options .option.domain-productconfigiration-options-item {
        padding: 10px 25px !important;
        border: 0 !important;
        margin-bottom: 15px !important;
        background: #f6f9fa !important;
        display: block;
        width: 100%;
        min-height: 100px;
    }
    
    /*Base de connaissance*/
    .kb-image {
        width:250px;
    }
    /*Base de connaissance*/
}
/*==================================================================================*/
/*================================== DESKTOP ========================================*/
@media (min-width:992px)  { 
    #hebergement-web-hero, #mail-pro-hero {
        /*height: 400px;*/
    }
}
/*==================================================================================*/

/* Domains register page */
#features .domains-register {
    border-radius:10px;
}


/* --------------  Order FORM - AWS PRO ----------------  */

/*** Sous-menu scrollable - Entête ***/
.coodiv-text-7 {
    min-height: 65px;
}

.emyui-ews-plans-group .emyui-ews-plans-group-price-tag {
  font-weight: 700;
  font-size: 45px;
  margin-top:5px;
}


.price-tag-stroke::after {
    content: "";
    position: relative;
    display: block;
    height: 1px;
    background: #fab;
    left: 71px;
    right: -35px;
    transform: rotate(-22deg);
    top: -14px;
    width: 61px;
}

h1,h2,h3 {
    font-weight:100;
}





/* //////////////////////////////// CLIENT AREA /////////////////////////////// */
.main-page-contents .coodiv-taboverview #cPanelPackagePanel.panel.card .panel-body.card-body {
    background: linear-gradient(309deg,#b5723f 0%,#2f1202 100%);
    border-radius: 6px;
    box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 2px 16px rgba(0,0,0,0.05);
    
}

.main-page-contents .coodiv-taboverview #cPanelExtrasPurchasePanel.panel.card .panel-body.card-body .btn.btn-default {
    height: 55px;
    background: #ffc107;
    color: #3e2404;
    opacity: .9;
}

/*
#tabOverview {
    max-width: 960px;
    margin: 0 auto;
}

#tabOverview .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}
*/

.main-page-contents .coodiv-taboverview .panel.card {
    border: 0;
    border-radius: 0;
    margin-bottom: 30px!important;
    margin-top: 20px;
}

/* cPanel extended */
div #promotions-slider,div #mc-promo-widgets {
    display:none;
}

section#main-body {
    /*padding-top:20px;*/
}


















/* Taille de certains elements de texte sur des formulaires de l'espace client */
.form-control {
    font-size: 13px;
}
h5 {
    font-size: 17px;
}


/* Caroussel promotionnel sur la page - espace client */
.html-addons-clientareahome {
    display:none;
}

.clientarea-sidebar-links a {
    color: #212121;
}


/* Courleurs des icones des produits/services sur la page principale - espace client */
.shape-hexagon {
    color: #311d00;
}
.clientareahome-features-boxes i {
    color: #ffffff;
}
.clientareahome-features-boxes .stat {
    background: #ffc107;
}





body{
    font-family:"Proxima Nova Rg", Arial, sans-serif;
    font-size:17px;
    font-weight:normal;
    color:#101010
}
.p,p,.coodiv-text-11,.coodiv-text-10,.coodiv-text-12{
    font-family: "Proxima Nova Rg", Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    /*line-height: 26px;*/
}
/*.h1,h1{
    font-family:PNCnBlack,serif;
    font-size:40px;
    font-weight:900;
    margin-bottom:40px
}
@media (min-width:768px) and (max-width:991px){
    .h1,h1{
        font-size:30px
    }
}
@media (max-width:767px){
    .h1,h1{
        font-size:23px
    }
}*/
h2,h3,h4,h5{
    font-family: "Proxima Nova Rg", Arial, sans-serif;
    /*margin-bottom:20px;*/
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
}

/*
@media (min-width:768px) and (max-width:991px){.h2,h2{font-size:20px}}@media (max-width:767px){.h2,h2{font-size:20px}}.h3,h3{font-family:PNReg,serif;font-size:20px;font-weight:900;margin-bottom:20px}@media (min-width:768px) and (max-width:991px){.h3,h3{font-size:20px}}@media (max-width:767px){.h3,h3{font-size:20px}}.h4,h4{font-family:PNReg,serif;font-size:20px;font-weight:900;margin-bottom:20px}.h5,h5{font-family:PNReg,serif;font-size:20px;font-weight:900;margin-bottom:20px}.h6,h6{font-family:PNReg,serif;font-size:20px;font-weight:900;margin-bottom:20px}.hr,hr{display:block;background-color:#ebebeb;border:0;padding:0;margin:15px 0;width:16px;text-align:left;height:1px}.legend{font-family:PNReg,serif;font-size:10px}a,a:active,a:visited{outline:0;text-decoration:inherit}body>.content{float:left;width:100%;max-width:100%;margin:0 auto;background-color:#fff;font-family:PNReg,serif;letter-spacing:.02em;padding:125px 80px 0 80px}
*/


/* Contraste couleurs */
.aws-domains-ltds-price-item small {
    font-family: "Proxima Nova", Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    margin-left: 5px;
}

.header-lang-currency, .brand-logo p, .copyright-text, .main-webhosting-features-item h3 {
    color: #ffffff;
}

.footer-emyui-aws ul.footer-list li a.footer-list-link {
    color: #fff;
    margin: 0;
    opacity: 1;
}

a, a:hover {
    color: #804300;
}





















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

/* Header */
.site-header {
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}


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


/* header navbar claude - BEGIN */

/* Navigation principale */
.safaricloud-main-nav {
    position: relative;
    z-index: 1000;
}

.safaricloud-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.safaricloud-nav-item {
    position: relative;
}

.safaricloud-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: -0.03em;
}

.safaricloud-nav-link:hover {
    background-color: rgba(255, 165, 0, 0.08);
    color: #582D1D;
    text-decoration: none;
}

.safaricloud-nav-link:hover .dropdown-arrow {
    transform: rotate(180deg);
    color: #FFA500;
}

.dropdown-arrow {
    font-size: 0.875rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Dropdown Styles */
.safaricloud-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #E9ECEF;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    min-width: 320px;
}

.mega-dropdown {
    min-width: 720px;
}

.help-dropdown {
    min-width: 480px;
}

.safaricloud-nav-item:hover .safaricloud-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-container {
    padding: 1.5rem;
}

.dropdown-content {
    display: flex;
    gap: 2rem;
}

.dropdown-main {
    flex: 1;
    display: flex;
    gap: 2rem;
}

.dropdown-section {
    flex: 1;
}

.dropdown-section .section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #582D1D;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.section-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-links li {
    margin-bottom: 0.5rem;
}

.section-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: #495057;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.section-links a:hover {
    background-color: rgba(255, 165, 0, 0.08);
    color: #582D1D;
    text-decoration: none;
}

.section-links a i {
    font-size: 1rem;
    color: #6C757D;
    transition: color 0.3s ease;
}

.section-links a:hover i {
    color: #FFA500;
}

/* Featured Card */
.dropdown-featured {
    min-width: 240px;
}

.featured-card {
    background: #582d1d;
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: #FFFFFF;
    text-align: center;
}

.featured-card p {
    color: #FFFFFF;
}

.featured-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.featured-icon i {
    font-size: 1.25rem;
    color: #FFFFFF;
}

.featured-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #fff;
}

.featured-card p {
    font-size: 0.875rem;
    margin: 0 0 1.5rem;
    opacity: 0.9;
    line-height: 1.4;
}

.featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.featured-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Contact Info */
.contact-info {
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #F8F9FA;
    border-radius: 0.375rem;
}

.contact-item i {
    color: #FFA500;
    font-size: 1rem;
}

.contact-item div strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #582D1D;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.contact-item div span {
    font-size: 0.875rem;
    color: #495057;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: #FFFFFF;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 165, 0, 0.2);
    color: #FFFFFF;
    text-decoration: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .mega-dropdown {
        min-width: 600px;
    }
    
    .dropdown-main {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .dropdown-content {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .safaricloud-nav-list {
        flex-direction: column;
        gap: 0;
        background: #FFFFFF;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        padding: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }
    
    .safaricloud-main-nav.active .safaricloud-nav-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .safaricloud-nav-link {
        width: 100%;
        justify-content: space-between;
    }
    
    .safaricloud-dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin-top: 0.5rem;
        background: #F8F9FA;
    }
    
    .mega-dropdown,
    .help-dropdown {
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .dropdown-container {
        padding: 1rem;
    }
    
    .featured-card {
        padding: 1rem;
    }
}

/* Animation pour les icônes */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.section-links a:hover i {
    animation: iconPulse 0.6s ease-in-out;
}

/* États actifs */
.safaricloud-nav-item.active .safaricloud-nav-link,
.safaricloud-nav-link.active {
    background-color: rgba(255, 165, 0, 0.1);
    color: #582D1D;
}

.safaricloud-nav-item.active .safaricloud-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    border-radius: 1px;
}
        
        
/* Mobile Navigation Styles */

/* Bouton hamburger */
.safaricloud-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: #582D1D;
    border-radius: 1px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-line:not(:last-child) {
    margin-bottom: 5px;
}

/* Animation du hamburger */
.safaricloud-mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.safaricloud-mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.safaricloud-mobile-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
}

/* Overlay mobile */
.safaricloud-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
}

.safaricloud-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Menu mobile principal */
.safaricloud-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    overflow-y: auto;
}

.safaricloud-mobile-menu.active {
    right: 0;
}

/* Header du menu mobile */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #E9ECEF;
    background: linear-gradient(135deg, #582D1D 0%, #7D4B36 100%)
}

.mobile-logo img {
    height: 32px;
    width: auto;
}

.mobile-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Contenu du menu mobile */
.mobile-menu-content {
    padding: 0;
}

.mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items de navigation mobile */
.mobile-nav-item {
    border-bottom: 1px solid #F1F3F4;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    color: #495057;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    background-color: rgba(255, 165, 0, 0.08);
    color: #582D1D;
    text-decoration: none;
}

.submenu-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
    color: #6C757D;
}

.mobile-nav-item.active .submenu-arrow {
    transform: rotate(180deg);
    color: #FFA500;
}

/* Sous-menu mobile */
.mobile-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.mobile-submenu.active {
    left: 0;
}

.submenu-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.submenu-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #FFA500;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
}

.submenu-back:hover {
    color: #582D1D;
}

.submenu-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #582D1D;
    margin: 0;
}

.submenu-content {
    padding: 0;
}

.submenu-section {
    padding: 1.5rem;
    border-bottom: 1px solid #F1F3F4;
}

.submenu-section:last-child {
    border-bottom: none;
}

.submenu-section h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #582D1D;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem;
}

.submenu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: #495057;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.3s ease;
}

.submenu-link:hover {
    color: #582D1D;
    text-decoration: none;
}

.submenu-link i {
    font-size: 18px;
    color: #6C757D;
    transition: color 0.3s ease;
}

.submenu-link:hover i {
    color: #FFA500;
}

/* Contact card dans le menu mobile */
.contact-card {
    background: #F8F9FA;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.875rem;
}

.contact-item i {
    color: #FFA500;
    font-size: 16px;
}

.chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: #FFFFFF;
    padding: 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: transform 0.3s ease;
    margin-top: 1rem;
}

.chat-btn:hover {
    transform: translateY(-2px);
    color: #FFFFFF;
    text-decoration: none;
}

/* Actions mobiles */
.mobile-actions {
    padding: 1.5rem;
    border-top: 1px solid #E9ECEF;
    background: #F8F9FA;
}

.mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.mobile-action-btn:last-child {
    margin-bottom: 0;
}

.mobile-btn-primary {
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: #FFFFFF;
}

.mobile-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 165, 0, 0.2);
    color: #FFFFFF;
    text-decoration: none;
}

.mobile-btn-secondary {
    background: transparent;
    color: #582D1D;
    border: 2px solid #582D1D;
}

.mobile-btn-secondary:hover {
    background: #582D1D;
    color: #FFFFFF;
    text-decoration: none;
}

/* Responsive - Affichage mobile */
@media (max-width: 992px) {
    /* Masquer la navigation desktop */
    .safaricloud-main-nav {
        display: none;
    }
    
    /* Afficher le bouton hamburger mobile */
    .safaricloud-mobile-toggle {
        display: flex;
    }
    
    /* Ajustements pour petit écran */
    .safaricloud-mobile-menu {
        max-width: 100%;
    }
    
    .mobile-menu-header {
        padding: 1rem 1.5rem;
    }
    
    .submenu-section {
        padding: 1rem;
    }
    
    .mobile-actions {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .mobile-nav-link {
        font-size: 0.9375rem;
        padding: 0.875rem 1rem;
    }
    
    .submenu-header {
        padding: 1rem;
    }
    
    .submenu-section {
        padding: 0.75rem;
    }
}

/* Animation d'entrée */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.safaricloud-mobile-menu.active {
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* États de focus pour l'accessibilité */
.mobile-nav-link:focus,
.submenu-back:focus,
.mobile-close-btn:focus {
    outline: 2px solid #FFA500;
    outline-offset: 2px;
}


/* IMPORTANT : Masquer l'ancien système mobile */
@media (max-width: 992px) {
    /* Masquer l'ancien menu mobile WHMCS */
    .navbar-collapse {
        display: none !important;
    }
    
    /* Masquer la navigation desktop */
    .navbar-nav.main-menu {
        display: none !important;
    }
    
    /* Afficher notre nouveau système */
    .safaricloud-mobile-toggle {
        display: flex !important;
    }
}

/* Correction pour desktop */
@media (min-width: 993px) {
    .safaricloud-mobile-toggle,
    .safaricloud-mobile-overlay,
    .safaricloud-mobile-menu {
        display: none !important;
    }
}

/* header navbar Claude - END  */

































/* Pour le formulare de disponibilité de domaine en dessous du hero 
  .domain-checker-modern {
    padding: 50px 20px;
    background: linear-gradient(to right, #fff1e0, #ffe9d6); // Couleurs chaudes claires
    display: flex;
    justify-content: center;
  }

  .domain-form-wrapper {
    max-width: 700px;
    width: 100%;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }

  .domain-form-wrapper:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  }

  .domain-form-wrapper h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
    color: #5c3a1a; // brun foncé
    text-align: center;
  }

  .domain-input-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .domain-input-group input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid #e0c7a1; // beige ocre
    border-radius: 12px;
    font-size: 1rem;
    background-color: #fffdf9;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
  }

  .domain-input-group input:focus {
    border-color: #e06b00; // orange africain 
    box-shadow: 0 0 0 3px rgba(224, 107, 0, 0.15);
  }

  .domain-input-group button {
    background-color: #e06b00; // orange vif 
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .domain-input-group button:hover {
    background-color: #c45a00; // orange foncé 
  }

  @media (max-width: 600px) {
    .domain-input-group {
      flex-direction: column;
    }

    .domain-input-group button {
      width: 100%;
    }
  }
  */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/* Pour le nouveau footer */
footer.footer {
  background-color: #2e1800 !important;
  color: #ffffff;
  padding-top: 4rem;
  padding-bottom: 4rem;
  font-family: 'Inter', sans-serif;
}

footer.footer a {
  color: #ffe9d4;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer.footer a:hover {
  color: #ffffff;
}

footer.footer .footer-block h4 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

footer.footer .footer-list li {
  margin-bottom: 0.5rem;
}

footer.footer .footer-list li a {
  font-size: 0.875rem;
  display: inline-block;
}

footer.footer .brand-logo img {
  max-height: 40px;
}

footer.footer .mini-footer-links {
  margin-top: 1rem;
}

footer.footer .mini-footer-links a {
  display: block;
  font-size: 0.75rem;
  color: #ffe9d4;
  margin-bottom: 0.25rem;
}

footer.footer .footer-social-accounts a {
  color: #ffe9d4;
  font-size: 1.25rem;
  margin-right: 0.75rem;
}

footer.footer .footer-social-accounts a:hover {
  color: #ffffff;
}

footer.footer .copyright-text {
  font-size: 0.8125rem;
  color: #ffffff;
  text-align: center;
}

@media (min-width: 768px) {
  footer.footer .copyright-text {
    text-align: left;
  }
}





























/* claude.ai pricing table */
:root {
        --primary-color: #FFA500;
        --secondary-color: #4A2511;
        --light-orange: #FFD580;
        --light-brown: #8B5A2B;
        --white: #FFFFFF;
        --light-gray: #F8F8F8;
        --border-color: #EAEAEA;
        --dark-gray: #333333;
        --success-color: #2ECC71;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .pricing-section {
        padding: 80px 20px;
        max-width: 1320px;
        margin: 0 auto;
    }
    
    .pricing-header {
        text-align: center;
        margin-bottom: 60px;
    }
    
    .pricing-header h2 {
        font-size: 2.8rem;
        color: var(--secondary-color);
        margin-bottom: 20px;
        font-weight: 700;
    }
    
    .pricing-header p {
        font-size: 1.2rem;
        color: #666;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .pricing-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }
    
    .toggle-option {
        padding: 8px 20px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
    }
    
    .toggle-option.active {
        color: var(--primary-color);
    }
    
    .toggle-switch {
        position: relative;
        width: 60px;
        height: 30px;
        border-radius: 15px;
        background-color: var(--primary-color);
        margin: 0 15px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .toggle-switch:before {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: white;
        top: 3px;
        left: 3px;
        transition: all 0.3s ease;
    }
    
    .toggle-switch.annual:before {
        transform: translateX(30px);
    }
    
    .pricing-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .pricing-card {
        flex: 1;
        min-width: 280px;
        max-width: 350px;
        background-color: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        border: 1px solid var(--border-color);
    }
    
    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .card-popular {
        border: 2px solid var(--primary-color);
        transform: scale(1.02);
    }
    
    .card-popular:hover {
        transform: translateY(-10px) scale(1.02);
    }
    
    .popular-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: var(--primary-color);
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .value-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: var(--secondary-color);
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 12px;
    }
    
    .card-header {
        padding: 30px 25px 20px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .plan-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--secondary-color);
        margin-bottom: 10px;
    }
    
    .plan-price {
        position: relative;
        margin: 20px 0;
    }
    
    .price-from {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 5px;
    }
    
    .price-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--secondary-color);
        line-height: 1;
    }
    
    .price-currency {
        font-size: 1rem;
        font-weight: 500;
        color: #666;
        margin-right: 5px;
    }
    
    .price-period {
        font-size: 1rem;
        color: #666;
        margin-left: 5px;
    }
    
    .card-description {
        font-size: 0.95rem;
        color: #666;
        margin-top: 15px;
    }
    
    .card-button {
        display: block;
        width: 100%;
        padding: 14px 0;
        background-color: var(--light-gray);
        color: var(--secondary-color);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 8px;
        margin-top: 20px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .card-button:hover {
        background-color: var(--primary-color);
        color: white;
    }
    
    .card-popular .card-button {
        background-color: var(--primary-color);
        color: white;
    }
    
    .card-popular .card-button:hover {
        background-color: var(--secondary-color);
    }
    
    .card-features {
        padding: 25px;
    }
    
    .feature-list {
        list-style: none;
    }
    
    .feature-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        font-size: 0.95rem;
        color: #555;
    }
    
    .feature-icon {
        color: var(--success-color);
        font-size: 1rem;
        margin-right: 10px;
        margin-top: 3px;
        flex-shrink: 0;
    }
    
    .feature-text {
        flex: 1;
    }
    
    .feature-highlight {
        font-weight: 600;
        color: var(--secondary-color);
    }
    
    .tooltip-icon {
        color: #999;
        font-size: 0.8rem;
        margin-left: 5px;
        cursor: help;
    }
    
    .feature-category {
        font-size: 1rem;
        font-weight: 600;
        color: var(--secondary-color);
        margin: 30px 0 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }
    
    /* Tooltip styling */
    .feature-tooltip {
        position: relative;
        display: inline-block;
    }
    
    .feature-tooltip .tooltip-text {
        visibility: hidden;
        width: 250px;
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 0.8rem;
        line-height: 1.4;
        pointer-events: none;
    }
    
    .feature-tooltip .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
    
    .feature-tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
    
    @media screen and (max-width: 768px) {
        .pricing-cards {
            flex-direction: column;
            align-items: center;
        }
        
        .pricing-card {
            width: 100%;
            max-width: 400px;
        }
        
        .card-popular {
            transform: none;
            order: -1;
        }
        
        .card-popular:hover {
            transform: translateY(-10px);
        }
    }






































/* pricing table claude adapté par chatGPT */
.pricing-card {
        background-color: white;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        margin-bottom: 30px;
    }
    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    .card-popular {
        border: 2px solid var(--primary-color);
        transform: scale(1.02);
    }
    .card-popular .card-button {
        background-color: var(--primary-color);
        color: white;
    }
    .card-popular .card-button:hover {
        background-color: var(--secondary-color);
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    











/* Variables de couleurs basées sur votre guide */
:root {
    /* Couleurs principales */
    --marron-fonce: #582D1D;
    --orange-dore: #FFA500;
    --blanc: #FFFFFF;
    
    /* Couleurs secondaires */
    --orange-clair: #FFB733;
    --marron-clair: #7D4B36;
    --gris-doux: #F5F5F5;
    
    /* Couleurs d'accentuation */
    --vert-succes: #28A745;
    --rouge-alerte: #DC3545;
    --bleu-info: #0D6EFD;
    
    /* Nouvelles couleurs pour le style SaaS */
    --gris-100: #F8F9FA;
    --gris-200: #E9ECEF;
    --gris-300: #DEE2E6;
    --gris-600: #6C757D;
    --gris-800: #343A40;
    
    /* Dégradés */
    --gradient-primary: linear-gradient(135deg, var(--orange-dore) 0%, var(--orange-clair) 100%);
    --gradient-light: linear-gradient(135deg, rgba(255, 165, 0, 0.05) 0%, rgba(255, 183, 51, 0.05) 100%);
    
    /* Ombres */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-highlight: 0 8px 24px rgba(255, 165, 0, 0.25);
    
    /* Espacements */
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-xxl: 64px;
    
    /* Rayons de bordure */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* Styles généraux de la section */
.domain-section {
    background-color: var(--blanc);
    padding: var(--space-xxl) var(--space-m);
    font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gris-800);
    position: relative;
    overflow: hidden;
}

/* Effet de fond avec motif subtil */
.section-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255,165,0,0.03) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(255,165,0,0.03) 0%, transparent 50%);
    z-index: -1;
}

/* En-tête de section amélioré */
.section-header {
    margin-bottom: var(--space-xxl);
    padding: 0 var(--space-m);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-badge {
    display: inline-block;
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-s);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.25);
}

.section-title {
    color: var(--marron-fonce);
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 var(--space-s);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.title-underline {
    width: 100px;
    height: 5px;
    background: var(--gradient-primary);
    margin: var(--space-m) auto;
    border-radius: var(--radius-full);
}

.section-description {
    color: var(--gris-600);
    font-size: 20px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Recherche de domaines - Version améliorée */
.domain-search-container {
    background: var(--gradient-light);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 1200px;
    margin: 0 auto var(--space-xxl);
    border: 1px solid rgba(255, 165, 0, 0.1);
    position: relative;
    z-index: 1;
}

.domain-search-wrapper {
    display: flex;
    max-width: 800px;
    margin: 0 auto var(--space-m);
    position: relative;
}

.search-input-container {
    flex: 1;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-600);
    font-size: 18px;
}

.domain-search-input {
    width: 100%;
    padding: 20px 20px 20px 50px;
    border: 2px solid var(--gris-200);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 16px;
    font-family: "Proxima Nova", Arial, sans-serif;
    color: var(--gris-800);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.domain-search-input:focus {
    outline: none;
    border-color: var(--orange-dore);
    box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.15);
}

.domain-search-btn {
    background: var(--gradient-primary);
    color: var(--blanc);
    border: none;
    padding: 0 var(--space-xl);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.domain-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-highlight);
}

.domain-search-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.domain-search-btn:hover i {
    transform: translateX(4px);
}

.domain-search-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.domain-tag {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--blanc);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-600);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.domain-tag:hover {
    background-color: var(--gris-100);
    color: var(--marron-fonce);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.domain-tag-featured {
    background: rgba(255, 165, 0, 0.1);
    color: var(--orange-dore);
    font-weight: 700;
}

.domain-tag-featured:hover {
    background: rgba(255, 165, 0, 0.2);
    color: var(--orange-dore);
}

/* Grilles de domaines */
.domain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-l);
    padding: 0 var(--space-m);
    max-width: 1400px;
    margin: 0 auto var(--space-xl);
}

.domain-card {
    background-color: var(--blanc);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--gris-200);
    background-size: 400% 400%;
}

.domain-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    border-color: rgba(255, 165, 0, 0.3);
}

.domain-card-featured {
    border: 2px solid var(--orange-dore);
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.03) 0%, rgba(255, 183, 51, 0.02) 100%);
}

.domain-card-featured:hover {
    box-shadow: var(--shadow-highlight);
}

.domain-card-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 8px rgba(255, 165, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.domain-card-tag i {
    font-size: 12px;
}

.domain-card-icon {
    padding: var(--space-l);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    background-color: rgba(248, 249, 250, 0.8);
    border-bottom: 1px solid var(--gris-200);
    position: relative;
    overflow: hidden;
}

.domain-card-icon:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.7s ease;
}

.domain-card:hover .domain-card-icon:before {
    opacity: 1;
}

.domain-card-icon img {
    max-width: 90px;
    max-height: 70px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

.domain-card:hover .domain-card-icon img {
    transform: scale(1.1);
}

.domain-card-content {
    padding: var(--space-l);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.domain-card-title {
    color: var(--marron-fonce);
    font-size: 28px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.domain-card-feature {
    color: var(--gris-600);
    font-size: 14px;
    margin-bottom: var(--space-m);
    padding: 0 var(--space-s);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.domain-card-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--marron-fonce);
    margin-bottom: var(--space-m);
    padding: 10px 20px;
    background: linear-gradient(to right, rgba(255, 165, 0, 0.07), rgba(255, 183, 51, 0.07));
    border-radius: var(--radius-md);
    display: inline-block;
    position: relative;
}

.domain-card-price:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.price-period {
    font-size: 14px;
    color: var(--gris-600);
    margin-left: 4px;
    font-weight: 500;
}

.domain-check-btn {
    background-color: var(--blanc);
    color: var(--marron-fonce);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    border: 2px solid var(--gris-200);
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.domain-check-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 165, 0, 0.1);
    transition: all 0.3s ease;
    z-index: -1;
}

.domain-check-btn:hover {
    border-color: var(--orange-dore);
    color: var(--marron-fonce);
    transform: translateY(-2px);
}

.domain-check-btn:hover:before {
    width: 100%;
}

.domain-check-btn-primary {
    background: var(--gradient-primary);
    color: var(--blanc);
    border-color: var(--orange-dore);
}

.domain-check-btn-primary:hover {
    background: var(--gradient-primary);
    color: var(--blanc);
    box-shadow: var(--shadow-highlight);
}

.domain-check-btn-primary:before {
    background: rgba(255, 255, 255, 0.1);
}

.btn-icon {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.domain-check-btn:hover .btn-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Éléments visuels supplémentaires: icônes flottantes */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
    font-size: 24px;
    opacity: 0.1;
    animation: float 8s infinite ease-in-out;
}

.fe-1 {
    top: 10%;
    left: 5%;
    background: var(--gradient-primary);
    animation-delay: 0s;
}

.fe-2 {
    top: 80%;
    left: 15%;
    background: var(--gradient-primary);
    animation-delay: 2s;
}

.fe-3 {
    top: 30%;
    right: 5%;
    background: var(--gradient-primary);
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .section-title {
        font-size: 42px;
    }
    
    .domain-card-feature {
        min-height: 60px;
    }
}

@media (max-width: 992px) {
    .section-title {
        font-size: 36px;
    }
    
    .section-description {
        font-size: 18px;
    }
    
    .domain-grid {
        gap: var(--space-m);
    }
}

@media (max-width: 768px) {
    .domain-search-wrapper {
        flex-direction: column;
    }
    
    .domain-search-input {
        border-radius: var(--radius-md);
        margin-bottom: var(--space-xs);
    }
    
    .domain-search-btn {
        border-radius: var(--radius-md);
        padding: 16px;
        justify-content: center;
    }
    
    .domain-card-feature {
        min-height: 40px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 30px;
    }
    
    .section-description {
        font-size: 16px;
    }
    
    .domain-search-tags {
        gap: 8px;
    }
    
    .domain-tag {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .domain-card-title {
        font-size: 24px;
    }
    
    .domain-card-price {
        font-size: 20px;
    }
    
    .domain-check-btn {
        padding: 12px 16px;
    }
    
    .domain-section {
        padding: var(--space-xl) var(--space-xs);
    }
    
    .domain-search-container {
        padding: var(--space-m);
    }
    
    .floating-element {
        display: none;
    }
}

/* Animation subtile pour les cartes */
@keyframes cardPulse {
    0% {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
    50% {
        transform: scale(1.01);
        box-shadow: var(--shadow-lg);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
}

/* Animation pour la carte mise en avant */
.domain-card-featured {
    animation: cardPulse 4s infinite ease-in-out;
}

/* Amélioration pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section-title {
        letter-spacing: -0.7px;
    }
    
    .domain-card {
        border-width: 1px;
    }
    
    .domain-card-featured {
        border-width: 2px;
    }
}

/* Styles d'impression */
@media print {
    .domain-section {
        background: none !important;
        padding: 20px !important;
    }
    
    .domain-search-container, 
    .domain-check-btn, 
    .floating-elements,
    .domain-search-tags {
        display: none !important;
    }
    
    .domain-card {
        page-break-inside: avoid;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .domain-card-price {
        font-weight: bold !important;
    }
}































/* ---------- Variables avancées et système de design ---------- */
:root {
    /* Palette de couleurs enrichie */
    --marron-fonce: #582D1D;
    --marron-fonce-rgb: 88, 45, 29;
    --orange-dore: #FFA500;
    --orange-dore-rgb: 255, 165, 0;
    --blanc: #FFFFFF;
    --blanc-rgb: 255, 255, 255;
    
    /* Couleurs secondaires */
    --orange-clair: #FFB733;
    --orange-clair-rgb: 255, 183, 51;
    --marron-clair: #7D4B36;
    --marron-clair-rgb: 125, 75, 54;
    --gris-doux: #F5F5F5;
    
    /* Couleurs d'accentuation */
    --vert-succes: #28A745;
    --vert-succes-rgb: 40, 167, 69;
    --rouge-alerte: #DC3545;
    --rouge-alerte-rgb: 220, 53, 69;
    --bleu-info: #0D6EFD;
    --bleu-info-rgb: 13, 110, 253;
    
    /* Nouvelles couleurs pour le style SaaS ultra-premium */
    --gris-50: #FAFAFA;
    --gris-100: #F8F9FA;
    --gris-200: #E9ECEF;
    --gris-300: #DEE2E6;
    --gris-400: #CED4DA;
    --gris-500: #ADB5BD;
    --gris-600: #6C757D;
    --gris-700: #495057;
    --gris-800: #343A40;
    --gris-900: #212529;
    
    /* Dégradés avancés */
    --gradient-primary: linear-gradient(135deg, var(--orange-dore) 0%, var(--orange-clair) 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(var(--orange-dore-rgb), 0.8) 0%, rgba(var(--orange-clair-rgb), 0.8) 100%);
    --gradient-dark: linear-gradient(135deg, var(--marron-fonce) 0%, var(--marron-clair) 100%);
    --gradient-light: linear-gradient(135deg, rgba(var(--orange-dore-rgb), 0.05) 0%, rgba(var(--orange-clair-rgb), 0.05) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(var(--blanc-rgb), 0.7) 0%, rgba(var(--blanc-rgb), 0.3) 100%);
    
    /* Ombres système */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.02);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-highlight: 0 10px 20px rgba(var(--orange-dore-rgb), 0.2);
    
    /* Espacements système */
    --space-0: 0;
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    
    /* Rayons de bordure système */
    --radius-none: 0;
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* Typographie système */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Transitions système */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    --transition-very-slow: 700ms;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Styles de base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gris-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Section principale ---------- */
.services-section {
    background-color: var(--blanc);
    padding: var(--space-16) var(--space-4);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Arrière-plan amélioré avec effet 3D et morphing */
.section-bg-advanced {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}

.bg-gradient-sphere {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--orange-dore-rgb), 0.05) 0%, rgba(var(--orange-dore-rgb), 0) 70%);
    top: -15vw;
    right: -15vw;
    animation: spherePulse 15s infinite alternate ease-in-out;
}

.bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(var(--gris-200-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--gris-200-rgb), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    opacity: 0.3;
}

@keyframes spherePulse {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.05;
    }
    100% {
        transform: scale(1.2) translate(5%, 5%);
        opacity: 0.1;
    }
}

/* ---------- En-tête de section ---------- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.header-animation-container {
    perspective: 1000px;
    margin-bottom: var(--space-4);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 0.875rem;
    font-weight: var(--font-bold);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md), 0 0 0 2px rgba(var(--blanc-rgb), 0.1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform var(--transition-normal) var(--ease-bounce);
}

.section-badge:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(var(--blanc-rgb), 0) 0%, rgba(var(--blanc-rgb), 0.3) 50%, rgba(var(--blanc-rgb), 0) 100%);
    transform: translateX(-100%);
    animation: badgeShine 3s infinite;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%);
    }
    20%, 100% {
        transform: translateX(100%);
    }
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.section-title {
    color: var(--marron-fonce);
    font-size: 3rem;
    font-weight: var(--font-extrabold);
    margin: var(--space-4) 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    position: relative;
}

.split-text {
    opacity: 0;
    animation: fadeUp 0.8s forwards;
    animation-delay: 0.2s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.title-underline {
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    margin: var(--space-5) auto;
    border-radius: var(--radius-full);
    position: relative;
}

.underline-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange-dore);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    animation: dotMove 3s infinite alternate ease-in-out;
}

@keyframes dotMove {
    0% {
        left: 0;
    }
    100% {
        left: calc(100% - 10px);
    }
}

.section-description {
    color: var(--gris-600);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeUp 0.8s forwards;
    animation-delay: 0.4s;
}

/* ---------- Indicateur de défilement ---------- */
.scroll-indicator {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
    transition: opacity var(--transition-normal) var(--ease-in-out);
}

.scroll-indicator:hover {
    opacity: 1;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--gris-400);
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background-color: var(--marron-fonce);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--radius-full);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        top: 10px;
    }
    100% {
        opacity: 0;
        top: 30px;
    }
}

.scroll-text {
    font-size: 0.75rem;
    color: var(--gris-500);
    margin-top: var(--space-2);
}

/* ---------- Onglets de navigation des services ---------- */
.services-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.service-tab {
    padding: var(--space-2) var(--space-4);
    background-color: var(--gris-100);
    border: 1px solid var(--gris-200);
    color: var(--gris-600);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-normal) var(--ease-in-out);
}

.service-tab:hover {
    background-color: var(--gris-200);
    color: var(--marron-fonce);
}

.service-tab.active {
   background: var(--gradient-primary);
   border-color: var(--orange-dore);
   color: var(--blanc);
   box-shadow: var(--shadow-md);
}

/* ---------- Grille de services ---------- */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: var(--space-6);
   padding: 0 var(--space-4);
   max-width: 1400px;
   margin: 0 auto var(--space-12);
}

/* ---------- Cartes de service avec effet glassmorphism ---------- */
.service-card {
   position: relative;
   background-color: var(--blanc);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
   transition: all var(--transition-normal) var(--ease-out);
   display: flex;
   flex-direction: column;
   height: 100%;
   z-index: 1;
   border: 1px solid rgba(var(--gris-200-rgb), 0.5);
   transform: translateZ(0);
}

.service-card-glass {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   background: var(--gradient-glass);
   opacity: 0;
   transition: opacity var(--transition-normal) var(--ease-out);
}

.service-card:hover {
   box-shadow: var(--shadow-xl);
   transform: translateY(-10px) scale(1.01);
}

.service-card:hover .service-card-glass {
   opacity: 0.7;
}

.service-card-featured {
   border: 2px solid var(--orange-dore);
   background: linear-gradient(135deg, rgba(var(--orange-dore-rgb), 0.02) 0%, rgba(var(--orange-dore-rgb), 0.05) 100%);
   box-shadow: var(--shadow-lg), 0 0 0 4px rgba(var(--orange-dore-rgb), 0.1);
}

.service-card-featured:hover {
   box-shadow: var(--shadow-highlight), 0 0 0 4px rgba(var(--orange-dore-rgb), 0.1);
}

.service-card-tag {
   position: absolute;
   top: var(--space-4);
   right: var(--space-4);
   background: var(--gradient-primary);
   color: var(--blanc);
   font-size: 0.75rem;
   font-weight: var(--font-bold);
   padding: 0.25rem 0.75rem;
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-md);
   display: flex;
   align-items: center;
   gap: 4px;
   z-index: 3;
}

.tag-pulse {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--blanc);
   margin-right: 2px;
   animation: pulse 2s infinite;
}

/*
@keyframes pulse {
   0% {
       transform: scale(0.8);
       opacity: 0.5;
   }
   50% {
       transform: scale(1.2);
       opacity: 1;
   }
   100% {
       transform: scale(0.8);
       opacity: 0.5;
   }
}
*/

.service-card-icon {
   padding: var(--space-6);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   position: relative;
   overflow: hidden;
}

.icon-container {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--gradient-light);
   border-radius: var(--radius-full);
   position: relative;
   z-index: 1;
   transition: all var(--transition-normal) var(--ease-bounce);
   box-shadow: var(--shadow-inner);
   overflow: hidden;
}

.icon-container:before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background: var(--gradient-primary);
   opacity: 0.1;
   transition: opacity var(--transition-normal) var(--ease-out);
}

.service-card:hover .icon-container {
   transform: scale(1.1) rotate(5deg);
}

.service-card:hover .icon-container:before {
   opacity: 0.25;
}

.service-card-icon i {
   font-size: 28px;
   color: var(--orange-dore);
   transition: all var(--transition-normal) var(--ease-bounce);
   position: relative;
   z-index: 2;
}

.service-card:hover .service-card-icon i {
   transform: scale(1.15);
   color: var(--marron-fonce);
}

.service-card-content {
   padding: var(--space-6);
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 2;
}

.best-choice-label {
   font-size: 0.75rem;
   font-weight: var(--font-semibold);
   color: var(--orange-dore);
   margin-bottom: var(--space-2);
   display: flex;
   align-items: center;
   gap: 5px;
}

.best-choice-label:before {
   content: '';
   display: inline-block;
   width: 5px;
   height: 5px;
   background-color: var(--orange-dore);
   border-radius: 50%;
}

.service-card-title {
   color: var(--marron-fonce);
   font-size: 1.5rem;
   font-weight: var(--font-bold);
   margin-top: 0;
   margin-bottom: var(--space-2);
   position: relative;
}

.service-card-description {
   color: var(--gris-600);
   font-size: 0.9375rem;
   line-height: 1.6;
   margin-bottom: var(--space-4);
}

.service-card-features {
   margin-bottom: var(--space-5);
}

.feature-item {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
   font-size: 0.875rem;
   color: var(--gris-700);
}

.feature-item i {
   /*color: var(--vert-succes);*/
   font-size: 14px;
}

.service-card-price {
   margin-bottom: var(--space-5);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.price-tag {
   font-size: 1rem;
   color: var(--gris-600);
}

.price-value {
   font-size: 1.25rem;
   font-weight: var(--font-bold);
   color: var(--marron-fonce);
}

.price-period {
   font-size: 0.875rem;
   color: var(--gris-500);
}

.price-rating {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.rating-stars {
   font-size: 0.875rem;
   color: var(--orange-dore);
}

.rating-count {
   font-size: 0.75rem;
   color: var(--gris-500);
}

.service-card-btn {
   background-color: var(--blanc);
   color: var(--marron-fonce);
   padding: var(--space-3) var(--space-5);
   border-radius: var(--radius-lg);
   text-decoration: none;
   font-weight: var(--font-semibold);
   font-size: 0.9375rem;
   transition: all var(--transition-normal) var(--ease-out);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: auto;
   border: 1px solid var(--gris-200);
   position: relative;
   overflow: hidden;
   z-index: 1;
}

.service-card-btn:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background: rgba(var(--orange-dore-rgb), 0.1);
   transition: width var(--transition-normal) var(--ease-out);
   z-index: -1;
}

.service-card-btn:hover {
   border-color: var(--orange-dore);
   color: var(--marron-fonce);
   transform: translateY(-2px);
}

.service-card-btn:hover:before {
   width: 100%;
}

.service-card-btn-primary {
   background: var(--gradient-primary);
   color: var(--blanc);
   border-color: var(--orange-dore);
}

.service-card-btn-primary:hover {
   background: var(--gradient-primary);
   color: var(--blanc);
   box-shadow: var(--shadow-highlight);
}

.service-card-btn-primary:before {
   background: rgba(var(--blanc-rgb), 0.15);
}

.btn-icon {
   opacity: 0;
   transform: translateX(-10px);
   transition: all var(--transition-normal) var(--ease-out);
}

.service-card-btn:hover .btn-icon {
   opacity: 1;
   transform: translateX(0);
}

.card-hover-effect {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at var(--mouse-x, center) var(--mouse-y, center), rgba(var(--orange-dore-rgb), 0.1) 0%, rgba(var(--blanc-rgb), 0) 80%);
   opacity: 0;
   transition: opacity var(--transition-normal) var(--ease-out);
   pointer-events: none;
   z-index: 1;
}

.service-card:hover .card-hover-effect {
   opacity: 1;
}

/* ---------- Bannière d'action interactive ---------- */
.action-banner {
   background: var(--gradient-primary);
   border-radius: var(--radius-2xl);
   padding: var(--space-8);
   margin: 0 auto var(--space-12);
   max-width: 1200px;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-xl);
   color: var(--blanc);
   z-index: 1;
}

.action-banner-content {
   position: relative;
   z-index: 3;
   max-width: 800px;
}

.banner-icon-container {
   width: 64px;
   height: 64px;
   background-color: rgba(var(--blanc-rgb), 0.2);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-4);
}

.banner-icon-container i {
   font-size: 28px;
   color: var(--blanc);
}

.action-banner-title {
   font-size: 2rem;
   font-weight: var(--font-bold);
   margin-top: 0;
   margin-bottom: var(--space-3);
}

.action-banner-description {
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: var(--space-6);
   opacity: 0.9;
}

.banner-stats {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
   margin-bottom: var(--space-6);
}

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

.stat-value {
   font-size: 2.5rem;
   font-weight: var(--font-bold);
   margin-bottom: var(--space-1);
   line-height: 1;
}

.counter {
   display: inline-block;
}

.stat-label {
   font-size: 0.875rem;
   font-weight: var(--font-medium);
   opacity: 0.8;
}

.action-banner-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
}

.action-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: var(--space-3) var(--space-5);
   border-radius: var(--radius-md);
   font-weight: var(--font-semibold);
   font-size: 0.9375rem;
   text-decoration: none;
   transition: all var(--transition-normal) var(--ease-out);
}

.action-btn-primary {
   background-color: var(--blanc);
   color: var(--marron-fonce);
   box-shadow: var(--shadow-md);
}

.action-btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
}

.action-btn-secondary {
   background-color: rgba(var(--blanc-rgb), 0.15);
   color: var(--blanc);
   border: 1px solid rgba(var(--blanc-rgb), 0.25);
}

.action-btn-secondary:hover {
   background-color: rgba(var(--blanc-rgb), 0.25);
   transform: translateY(-3px);
}

.action-banner-shape {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 40%;
   z-index: 2;
   opacity: 0.15;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 40 599 102 382 -31 229 126.5 79.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 520 660 578 842 731 737 840 599 603 493 520 660'/%3E%3C/g%3E%3C/svg%3E");
   background-position: center center;
   background-size: cover;
}

.banner-particles {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   z-index: 1;
}

.particle {
   position: absolute;
   border-radius: 50%;
   background-color: rgba(var(--blanc-rgb), 0.3);
   animation: float 15s infinite ease-in-out;
}

.p1 {
   width: 40px;
   height: 40px;
   top: 10%;
   left: 15%;
   animation-delay: 0s;
   opacity: 0.2;
}

.p2 {
   width: 25px;
   height: 25px;
   top: 60%;
   left: 5%;
   animation-delay: 3s;
   opacity: 0.1;
}

.p3 {
   width: 35px;
   height: 35px;
   top: 70%;
   right: 10%;
   animation-delay: 6s;
   opacity: 0.2;
}

.p4 {
   width: 20px;
   height: 20px;
   top: 25%;
   right: 20%;
   animation-delay: 9s;
   opacity: 0.15;
}

.p5 {
   width: 30px;
   height: 30px;
   top: 30%;
   left: 50%;
   animation-delay: 12s;
   opacity: 0.1;
}

@keyframes float {
   0%, 100% {
       transform: translateY(0) rotate(0deg);
   }
   25% {
       transform: translateY(-20px) rotate(90deg);
   }
   50% {
       transform: translateY(0) rotate(180deg);
   }
   75% {
       transform: translateY(20px) rotate(270deg);
   }
}

/* ---------- Section témoignages ----------
.testimonials-section {
   margin-bottom: var(--space-12);
   margin-left: auto;
   margin-right: auto;
   padding: 0 var(--space-4);
}

.testimonials-title {
   font-size: 1.75rem;
   font-weight: var(--font-bold);
   color: var(--marron-fonce);
   text-align: center;
   margin-bottom: var(--space-6);
   position: relative;
}

.testimonials-title:after {
   content: '';
   display: block;
   width: 50px;
   height: 3px;
   background: var(--gradient-primary);
   margin: var(--space-3) auto 0;
   border-radius: var(--radius-full);
}

.testimonials-carousel {
   display: flex;
   overflow-x: hidden;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
   padding: var(--space-2);
}

.testimonial-card {
   flex: 0 0 calc(33.333% - var(--space-4));
   background-color: var(--blanc);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-md);
   padding: var(--space-6);
   position: relative;
   transition: all var(--transition-normal) var(--ease-out);
   border: 1px solid var(--gris-200);
}

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

.testimonial-rating {
   color: var(--orange-dore);
   font-size: 1rem;
   margin-bottom: var(--space-3);
}

.testimonial-content {
   font-size: 0.9375rem;
   color: var(--gris-700);
   line-height: 1.6;
   margin-bottom: var(--space-4);
   font-style: italic;
}

.testimonial-content:before {
   content: """;
   font-size: 3rem;
   color: rgba(var(--orange-dore-rgb), 0.1);
   position: absolute;
   top: var(--space-3);
   left: var(--space-4);
   line-height: 0.7;
   font-family: Georgia, serif;
}

.testimonial-author {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.author-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: var(--gris-300);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ADB5BD'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
   background-size: 60%;
   background-position: center;
   background-repeat: no-repeat;
}

.author-info {
   flex: 1;
}

.author-name {
   font-size: 0.875rem;
   font-weight: var(--font-semibold);
   color: var(--marron-fonce);
}

.author-company {
   font-size: 0.75rem;
   color: var(--gris-500);
}

.testimonials-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
}

.testimonial-control {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: var(--blanc);
   border: 1px solid var(--gris-200);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-normal) var(--ease-out);
   box-shadow: var(--shadow-sm);
}

.testimonial-control:hover {
   background-color: var(--orange-dore);
   color: var(--blanc);
   border-color: var(--orange-dore);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}

.testimonial-dots {
   display: flex;
   gap: 6px;
}

.dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--gris-300);
   transition: all var(--transition-normal) var(--ease-out);
   cursor: pointer;
}

.dot.active {
   background-color: var(--orange-dore);
   width: 16px;
   border-radius: var(--radius-full);
}



/* ---------- Responsive Design ---------- */
@media (max-width: 1200px) {
   .section-title {
       font-size: 2.5rem;
   }
   
   .action-banner-title {
       font-size: 1.75rem;
   }
   
   .stat-value {
       font-size: 2rem;
   }
   
   .testimonial-card {
       flex: 0 0 calc(50% - var(--space-4));
   }
}

@media (max-width: 992px) {
   .section-title {
       font-size: 2.25rem;
   }
   
   .section-description {
       font-size: 1rem;
   }
   
   .services-grid {
       gap: var(--space-4);
   }
   
   .action-banner {
       padding: var(--space-6);
   }
   
   .banner-stats {
       gap: var(--space-4);
   }
}

@media (max-width: 768px) {
   .services-section {
       padding: var(--space-8) var(--space-4);
   }
   
   .services-tabs {
       flex-wrap: nowrap;
       overflow-x: auto;
       padding-bottom: var(--space-2);
       justify-content: flex-start;
   }
   
   .service-tab {
       white-space: nowrap;
   }
   
   .action-banner-buttons {
       flex-direction: column;
       gap: var(--space-2);
   }
   
   .action-btn {
       width: 100%;
       justify-content: center;
   }
   
   .action-banner-shape {
       display: none;
   }
   
   .banner-stats {
       justify-content: space-around;
   }
   
   .testimonial-card {
       flex: 0 0 calc(100% - var(--space-4));
   }
}

@media (max-width: 576px) {
   .section-title {
       font-size: 1.875rem;
   }
   
   .section-badge {
       font-size: 0.75rem;
   }
   
   .section-description {
       font-size: 0.9375rem;
   }
   
   .action-banner-title {
       font-size: 1.5rem;
   }
   
   .action-banner-description {
       font-size: 0.9375rem;
   }
   
   .service-card-title {
       font-size: 1.25rem;
   }
   
   .service-card-price {
       flex-direction: column;
       align-items: flex-start;
   }
   
   .price-rating {
       margin-top: var(--space-2);
       align-items: flex-start;
   }
   
   .banner-stats {
       flex-direction: column;
       gap: var(--space-4);
       align-items: center;
   }
   
   .scroll-indicator {
       display: none;
   }
}

































/* Variables déjà définies dans le CSS précédent */

/* ---------- Section de tarification ---------- */
.pricing-section {
    background-color: var(--blanc);
    padding: var(--space-16) var(--space-4);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Sélecteur de période de facturation */
.billing-cycle-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-8);
}

.cycle-label {
    font-size: 0.875rem;
    color: var(--gris-600);
    margin-bottom: var(--space-2);
}

.cycle-options {
    display: flex;
    background-color: var(--gris-100);
    border-radius: var(--radius-full);
    padding: 4px;
    box-shadow: var(--shadow-sm);
}

.cycle-option {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    color: var(--gris-600);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal) var(--ease-out);
    position: relative;
}

.cycle-option.active {
    background-color: var(--blanc);
    color: var(--marron-fonce);
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}

.save-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.625rem;
    background: var(--gradient-primary);
    color: var(--blanc);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
}

/* Grille de prix */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    padding: 0 var(--space-4);
    max-width: 1200px;
    margin: 0 auto var(--space-12);
}

/* Carte de prix */
.pricing-card {
    position: relative;
    background-color: var(--blanc);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out);
    border: 1px solid var(--gris-200);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-10px);
    border-color: var(--gris-300);
}

.pricing-card-featured {
    border: 2px solid var(--orange-dore);
    background: linear-gradient(135deg, rgba(var(--orange-dore-rgb), 0.02) 0%, rgba(var(--orange-dore-rgb), 0.05) 100%);
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(var(--orange-dore-rgb), 0.1);
    transform: scale(1.05);
    z-index: 2;
}

.pricing-card-featured:hover {
    box-shadow: var(--shadow-highlight), 0 0 0 4px rgba(var(--orange-dore-rgb), 0.1);
}

.popular-tag {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
}

/* Si vous souhaitez garder l'effet pulse mais le rendre moins agressif */
.tag-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--blanc);
    margin-right: 2px;
    animation: pulseSoft 3s infinite; /* animation plus lente et moins agressive */
}

/* Animation plus subtile */
@keyframes pulseSoft {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

/* Si vous souhaitez complètement supprimer l'animation, remplacez le code ci-dessus par:
.tag-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--blanc);
    margin-right: 2px;
}
*/

.pricing-card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gris-200);
}

.pricing-card-title {
    color: var(--marron-fonce);
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.pricing-card-description {
    color: var(--gris-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.highlight {
    color: var(--marron-fonce);
    font-weight: var(--font-semibold);
}

.pricing-card-body {
    padding: var(--space-6);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pricing-info {
    text-align: center;
    margin-bottom: var(--space-4);
}

.pricing-original {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-1);
}

.original-price {
    color: var(--gris-500);
    font-size: 1rem;
    font-weight: var(--font-medium);
    position: relative;
}

.discount-line {
    position: absolute;
    top: 50%;
    left: -5%;
    right: -5%;
    height: 2px;
    background-color: var(--rouge-alerte);
    transform: rotate(-5deg);
}

.pricing-current {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.current-price {
    font-size: 2rem;
    font-weight: var(--font-extrabold);
    color: var(--marron-fonce);
    line-height: 1;
}

.billing-period {
    color: var(--gris-500);
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    margin-left: var(--space-1);
}

.pricing-bonus {
    text-align: center;
    margin-bottom: var(--space-4);
}

.bonus-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(var(--vert-succes-rgb), 0.1);
    color: var(--vert-succes);
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.bonus-tag i {
    font-size: 0.875rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    flex-grow: 1;
}

.pricing-features li {
    padding: 8px 0;
    font-size: 0.875rem;
    color: var(--gris-700);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gris-100);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li:before {
    content: "✓";
    color: var(--vert-succes);
    font-weight: var(--font-bold);
    margin-right: 8px;
}

.pricing-action {
    margin-top: auto;
}

.pricing-button {
    width: 100%;
    background-color: var(--blanc);
    color: var(--marron-fonce);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: var(--font-semibold);
    font-size: 0.9375rem;
    transition: all var(--transition-normal) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--gris-300);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.pricing-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(var(--orange-dore-rgb), 0.1);
    transition: width var(--transition-normal) var(--ease-out);
    z-index: -1;
}

.pricing-button:hover {
    border-color: var(--orange-dore);
    color: var(--marron-fonce);
    transform: translateY(-2px);
}

.pricing-button:hover:before {
    width: 100%;
}

.pricing-button-primary {
    background: var(--gradient-primary);
    color: var(--blanc);
    border-color: var(--orange-dore);
}

.pricing-button-primary:hover {
    background: var(--gradient-primary);
    color: var(--blanc);
    box-shadow: var(--shadow-highlight);
}

.pricing-button-primary:before {
    background: rgba(var(--blanc-rgb), 0.15);
}

.btn-icon {
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-normal) var(--ease-out);
}

.pricing-button:hover .btn-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Bannière de confiance */
.trust-banner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-6);
    background: linear-gradient(to right, rgba(var(--gris-100-rgb), 0.5), rgba(var(--orange-dore-rgb), 0.05));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-light);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.trust-icon i {
    font-size: 24px;
    color: var(--orange-dore);
}

.trust-content {
    max-width: 200px;
}

.trust-content h4 {
    font-size: 1rem;
    font-weight: var(--font-semibold);
    color: var(--marron-fonce);
    margin: 0 0 4px;
}

.trust-content p {
    font-size: 0.75rem;
    color: var(--gris-600);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pricing-grid {
        gap: var(--space-4);
    }
    
    .pricing-card-featured {
        transform: scale(1.03);
    }
}

@media (max-width: 992px) {
    .trust-banner {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
    }
    
    .pricing-card-featured {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .pricing-section {
        padding: var(--space-8) var(--space-4);
    }
    
    .cycle-options {
        flex-direction: column;
        width: 100%;
        max-width: 250px;
        border-radius: var(--radius-lg);
    }
    
    .cycle-option {
        border-radius: var(--radius-lg);
        text-align: center;
        padding: 10px;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .pricing-card {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.875rem;
    }
    
    .trust-item {
        flex-direction: column;
        text-align: center;
    }
    
    .trust-content {
        max-width: 100%;
    }
}


































/* Variables déjà définies dans les CSS précédents */

/* ---------- Section de recherche de domaine ---------- */
.domain-search-section {
    background: linear-gradient(135deg, var(--blanc) 0%, var(--gris-100) 100%);
    padding: var(--space-16) 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.domain-search-container {
    position: relative;
    z-index: 2;
}

/* Contenu principal */
.domain-search-content {
    padding-right: var(--space-6);
}

.domain-search-title {
    color: var(--marron-fonce);
    font-size: 2.5rem;
    font-weight: var(--font-extrabold);
    margin: var(--space-4) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.domain-search-description {
    color: var(--gris-600);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--space-6);
    max-width: 500px;
}

/* Formulaire de recherche */
.domain-search-form {
    margin-bottom: var(--space-5);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out);
    background-color: var(--blanc);
    border: 1px solid var(--gris-200);
}

.search-input-wrapper:focus-within {
    box-shadow: var(--shadow-xl), 0 0 0 3px rgba(var(--orange-dore-rgb), 0.1);
    border-color: var(--orange-dore);
}

.search-icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    color: var(--gris-500);
    font-size: 1.25rem;
    z-index: 2;
}

.search-input {
    flex: 1;
    height: 60px;
    padding: 0 var(--space-6) 0 var(--space-12);
    border: none;
    background: none;
    font-size: 1rem;
    color: var(--gris-800);
    outline: none;
}

.search-input::placeholder {
    color: var(--gris-400);
}

.search-button {
    background: var(--gradient-primary);
    color: var(--blanc);
    border: none;
    padding: 0 var(--space-6);
    min-width: 180px;
    font-size: 1rem;
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-normal) var(--ease-out);
}

.search-button:hover {
    background-position: right center;
    box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1);
}

.btn-icon {
    opacity: 0;
    transform: translateX(-5px);
    transition: all var(--transition-normal) var(--ease-out);
}

.search-button:hover .btn-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Suggestions de domaines */
.domain-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.suggestions-label {
    font-size: 0.875rem;
    color: var(--gris-600);
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.suggestion-tag {
    font-size: 0.75rem;
    color: var(--gris-700);
    background-color: var(--gris-100);
    border: 1px solid var(--gris-200);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-normal) var(--ease-out);
}

.suggestion-tag:hover {
    background-color: var(--orange-dore);
    color: var(--blanc);
    border-color: var(--orange-dore);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Extensions de domaine */
.domain-extensions-container {
    background-color: var(--blanc);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    height: 100%;
    border: 1px solid var(--gris-200);
    overflow: hidden;
    position: relative;
}

.extensions-title {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
    margin-top: 0;
    margin-bottom: var(--space-4);
    position: relative;
    padding-bottom: var(--space-2);
}

.extensions-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

.domain-extensions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.extension-card {
    background-color: var(--gris-50);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    border: 1px solid var(--gris-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.extension-card:hover {
    background-color: var(--gris-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--gris-300);
}

.extension-card-featured {
    background: linear-gradient(135deg, rgba(var(--orange-dore-rgb), 0.05) 0%, rgba(var(--orange-dore-rgb), 0.1) 100%);
    border-color: var(--orange-dore);
}

.extension-tag {
    position: absolute;
    top: -1px;
    right: 15px;
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.extension-name {
    font-size: 1.125rem;
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
    display: flex;
    align-items: center;
}

.dot {
    color: var(--orange-dore);
    margin-right: 1px;
}

.extension-price {
    font-size: 0.875rem;
    color: var(--gris-600);
    margin-left: auto;
    margin-right: var(--space-3);
}

.extension-link {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-dore);
    opacity: 0.7;
    transition: all var(--transition-normal) var(--ease-out);
}

.extension-card:hover .extension-link {
    opacity: 1;
    transform: translateX(2px);
}

.extensions-action {
    text-align: center;
    margin-top: var(--space-4);
}

.view-all-link {
    font-size: 0.875rem;
    color: var(--orange-dore);
    text-decoration: none;
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-normal) var(--ease-out);
}

.view-all-link:hover {
    color: var(--marron-fonce);
}

.view-all-link i {
    font-size: 0.75rem;
}

/* Éléments de design flottants */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-dore);
    font-size: 24px;
    opacity: 0.1;
    animation: float 15s infinite ease-in-out;
}

.fe-1 {
    top: 10%;
    right: 5%;
    animation-delay: 0s;
}

.fe-2 {
    top: 70%;
    left: 5%;
    animation-delay: 5s;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .domain-search-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 992px) {
    .domain-search-content {
        padding-right: 0;
        margin-bottom: var(--space-8);
    }
    
    .domain-search-title {
        font-size: 2rem;
    }
    
    .domain-search-description {
        font-size: 1rem;
    }
    
    .domain-extensions-container {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .domain-search-section {
        padding: var(--space-8) 0;
    }
    
    .search-input-wrapper {
        flex-direction: column;
        box-shadow: none;
        background: none;
        border: none;
    }
    
    .search-input {
        height: 50px;
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-lg);
        background-color: var(--blanc);
        border: 1px solid var(--gris-200);
        margin-bottom: var(--space-3);
    }
    
    .search-button {
        height: 50px;
        border-radius: var(--radius-lg);
        width: 100%;
    }
    
    .domain-extensions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .domain-search-title {
        font-size: 1.75rem;
    }
    
    .domain-suggestions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .suggestions-label {
        margin-bottom: var(--space-1);
    }
}



































/* ---------- Section Hero ---------- */
.hero-section-banner {
    background-color: var(--blanc);
    position: relative;
    overflow: hidden;
}

/* Éléments de fond */
.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.bg-gradient-sphere {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--orange-dore-rgb), 0.03) 0%, rgba(var(--orange-dore-rgb), 0) 70%);
    top: -30%;
    right: -20%;
    opacity: 0.8;
}

/* ça impacte le formulaire de recherche de domaine sur l'acceuil et toutes les sections avec un background pattern
.bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(var(--gris-200) 1px, transparent 1px),
        radial-gradient(var(--gris-200) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.2;
}
*/

.floating-shape {
    position: absolute;
    border-radius: 50%;
    background-color: var(--orange-dore);
    opacity: 0.05;
}

.shape-1 {
    width: 180px;
    height: 180px;
    bottom: -90px;
    left: 10%;
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 5%;
}

.shape-3 {
    width: 120px;
    height: 120px;
    top: 40%;
    right: 5%;
}

/* Conteneur et ligne */
.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

/* Contenu du hero */
.hero-content {
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .hero-content {
        margin: 0 auto;
        text-align: left;
    }
}

/* Badge d'introduction */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 0.875rem;
    font-weight: var(--font-semibold);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.badge-icon {
    font-size: 0.875rem;
}

.hero-badge:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(var(--blanc-rgb), 0) 0%, rgba(var(--blanc-rgb), 0.2) 50%, rgba(var(--blanc-rgb), 0) 100%);
    transform: translateX(-100%);
    animation: badgeShine 4s infinite 2s;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%);
    }
    20%, 100% {
        transform: translateX(100%);
    }
}

/* Titre principal */
.hero-title {
    font-size: 3.5rem;
    font-weight: var(--font-extrabold);
    color: var(--marron-fonce);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.title-line {
    display: block;
    margin-bottom: var(--space-2);
}

.title-accent {
    position: relative;
    display: inline-block;
}

.title-accent:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    z-index: -1;
    opacity: 0.3;
}

.title-dot {
    color: var(--orange-dore);
    font-weight: var(--font-black);
}

/* Description */
.hero-description {
    font-size: 1.25rem;
    color: var(--gris-700);
    line-height: 1.6;
    margin-bottom: var(--space-8);
    max-width: 500px;
}

/* Liste des fonctionnalités */
.hero-features {
    margin-bottom: var(--space-8);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.feature-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    color: var(--vert-succes);
    border-radius: 50%;
    background-color: rgba(var(--vert-succes-rgb), 0.1);
}

.feature-text {
    font-size: 1rem;
    color: var(--gris-700);
    padding-top: 4px;
}

/* Boutons d'action */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .hero-actions {
        flex-direction: row;
        align-items: center;
    }
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--transition-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.hero-btn-primary {
    background: var(--gradient-primary);
    color: var(--blanc);
    box-shadow: var(--shadow-md);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn-icon {
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition-normal) var(--ease-out);
}

.hero-btn:hover .btn-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Support text */
.hero-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.support-text {
    font-size: 0.9375rem;
    color: var(--gris-600);
}

.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange-dore);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: color var(--transition-normal) var(--ease-in-out);
}

.support-link:hover {
    color: var(--marron-fonce);
}

.support-link i {
    transition: all var(--transition-normal) var(--ease-out);
}

.support-link:hover i {
    transform: translateX(2px);
}

/* Hero image */
.hero-image {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 400px;
    margin: 0 auto;
    animation: floatImage 6s infinite ease-in-out;
}

@keyframes floatImage {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Server illustration (placeholder - à remplacer par votre propre illustration) */
.server-illustration {
    position: relative;
    width: 100%;
    height: 100%;
}

.server-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--orange-dore-rgb), 0.2) 0%, rgba(var(--orange-dore-rgb), 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.server-main {
    position: absolute;
    width: 180px;
    height: 300px;
    border-radius: 20px;
    background: linear-gradient(45deg, var(--gris-100) 0%, var(--blanc) 100%);
    border: 2px solid var(--gris-200);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-xl);
}

.server-main:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: var(--gris-200);
    top: 30px;
    left: 0;
}

.server-main:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: var(--gris-200);
    top: 70px;
    left: 0;
}

.server-status {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--vert-succes);
    top: 20px;
    right: 20px;
    box-shadow: 0 0 10px var(--vert-succes);
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Stats cards */
.stat-card {
    position: absolute;
    background-color: var(--blanc);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    animation: floatCard 8s infinite ease-in-out;
}

.uptime-card {
    top: 20%;
    right: 0;
    animation-delay: 1s;
}

.clients-card {
    bottom: 20%;
    left: 10%;
    animation-delay: 3s;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-dore);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--gris-600);
}

/* Responsive design */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-description {
        font-size: 1.125rem;
    }
}

@media (max-width: 992px) {
    .hero-content {
        text-align: center;
        padding: 0 var(--space-4);
    }
    
    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .feature-item {
        justify-content: center;
    }
    
    .hero-actions {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
    
    .feature-item {
        align-items: flex-start;
        text-align: left;
    }
}














































/* Variables déjà définies dans les CSS précédents */

/* ---------- Section de tarification ---------- */
.pricing-section {
    background-color: var(--blanc);
    position: relative;
    overflow: hidden;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    position: relative;
    z-index: 2;
}

/* En-tête de section avec avis clients */
.section-header {
    margin-bottom: var(--space-16);
}

.trust-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5);
}

.rating-stars {
    color: var(--orange-dore);
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.rating-stars i {
    margin: 0 2px;
}

.rating-score {
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--marron-fonce);
    margin-bottom: var(--space-1);
}

.rating-text {
    font-size: 0.875rem;
    color: var(--gris-600);
}

.section-title {
    margin-top: var(--space-4);
}

.highlight-count {
    position: relative;
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
    display: inline-block;
}

.highlight-count:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orange-dore);
}

/* Grille de prix */
.email-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

/* Cartes de prix */
.pricing-card {
    background-color: var(--blanc);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gris-200);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out);
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gris-300);
}

.pricing-card-featured {
    border: 2px solid var(--orange-dore);
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.pricing-card-featured:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.pricing-card-enterprise {
    background: linear-gradient(to bottom right, var(--blanc), var(--gris-50));
    border: 1px solid var(--gris-300);
}

.popular-tag {
    position: absolute;
    top: -1px;
    right: 20px;
    background: var(--gradient-primary);
    color: var(--blanc);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    padding: 6px 12px;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.popular-tag i {
    font-size: 0.875rem;
}

/* En-tête de carte */
.pricing-card-header {
    padding: var(--space-6) var(--space-6) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--gris-100);
}

.plan-title {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
    margin: 0 0 var(--space-2);
}

.plan-subtitle {
    font-size: 0.875rem;
    color: var(--gris-600);
    margin: 0;
}

/* Corps de carte */
.pricing-card-body {
    padding: var(--space-4) var(--space-6);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.plan-price {
    text-align: center;
    margin-bottom: var(--space-5);
}

.price-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-from {
    font-size: 0.75rem;
    color: var(--gris-500);
    font-weight: var(--font-medium);
}

.price-amount {
    font-size: 2.25rem;
    font-weight: var(--font-extrabold);
    color: var(--marron-fonce);
    line-height: 1.2;
}

.price-currency {
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    vertical-align: super;
}

.price-period {
    font-size: 0.875rem;
    color: var(--gris-600);
}

/* Caractéristiques principales */
.plan-features-highlight {
    background-color: var(--gris-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: rgba(var(--orange-dore-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-dore);
}

.feature-text {
    font-size: 0.9375rem;
    color: var(--gris-700);
}

.feature-value {
    font-weight: var(--font-bold);
    color: var(--marron-fonce);
}

/* Bouton d'action */
.plan-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--blanc);
    border: 2px solid var(--gris-300);
    border-radius: var(--radius-lg);
    color: var(--marron-fonce);
    font-size: 1rem;
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-normal) var(--ease-out);
    margin-bottom: var(--space-5);
}

.plan-action-btn:hover {
    border-color: var(--marron-fonce);
    transform: translateY(-2px);
}

.plan-action-btn .btn-icon {
    opacity: 0;
    transform: translateX(-5px);
    transition: all var(--transition-normal) var(--ease-out);
}

.plan-action-btn:hover .btn-icon {
    opacity: 1;
    transform: translateX(0);
}

.plan-action-btn-primary {
    background: var(--gradient-primary);
    color: var(--blanc);
    border-color: var(--orange-dore);
}

.plan-action-btn-primary:hover {
    border-color: var(--orange-dore);
    background-position: right center;
    box-shadow: var(--shadow-md);
}

/* Contact entreprise */
.enterprise-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5);
}

.enterprise-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: var(--marron-fonce);
    color: var(--blanc);
    font-weight: var(--font-semibold);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal) var(--ease-out);
    margin-bottom: var(--space-2);
}

.enterprise-btn:hover {
    background-color: var(--marron-clair);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #ffb32d;
}

.enterprise-note {
    font-size: 0.75rem;
    color: var(--gris-600);
    text-align: center;
    margin: 0;
}

/* Liste des fonctionnalités */
.plan-features {
    flex-grow: 1;
}

.features-title {
    font-size: 0.9375rem;
    font-weight: var(--font-semibold);
    color: var(--marron-fonce);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gris-200);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.875rem;
    color: var(--gris-700);
}

.feature-check {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background-color: rgba(var(--vert-succes-rgb), 0.1);
    color: var(--vert-succes);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.feature-check:after {
    content: '✓';
    font-size: 10px;
    font-weight: var(--font-bold);
}

.feature-highlight {
    color: var(--marron-fonce);
}

/* Pied de carte */
.pricing-card-footer {
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid var(--gris-100);
}

.plan-guarantees {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.guarantee-item {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: 0.8125rem;
   color: var(--gris-600);
}

.guarantee-item i {
   color: var(--orange-dore);
   font-size: 0.875rem;
}

/* Section FAQ */
.pricing-faq {
   margin-top: var(--space-16);
   padding-top: var(--space-8);
   border-top: 1px solid var(--gris-200);
}

.faq-title {
   font-size: 1.5rem;
   font-weight: var(--font-bold);
   color: var(--marron-fonce);
   text-align: center;
   margin-bottom: var(--space-8);
   position: relative;
}

.faq-title:after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: var(--gradient-primary);
   border-radius: var(--radius-full);
}

.faq-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-6);
}

.faq-item {
   padding: var(--space-5);
   background-color: var(--gris-50);
   border-radius: var(--radius-lg);
   transition: all var(--transition-normal) var(--ease-out);
}

.faq-item:hover {
   background-color: var(--gris-100);
   transform: translateY(-3px);
   box-shadow: var(--shadow-sm);
}

.faq-question {
   font-size: 1.125rem;
   font-weight: var(--font-semibold);
   color: var(--marron-fonce);
   margin: 0 0 var(--space-3);
   position: relative;
   padding-left: var(--space-5);
}

.faq-question:before {
   content: 'Q';
   position: absolute;
   left: 0;
   top: 0;
   color: var(--orange-dore);
   font-weight: var(--font-bold);
}

.faq-answer {
   font-size: 0.9375rem;
   color: var(--gris-700);
   line-height: 1.6;
   margin: 0;
   padding-left: var(--space-5);
   position: relative;
}

.faq-answer:before {
   content: 'R';
   position: absolute;
   left: 0;
   top: 0;
   color: var(--marron-clair);
   font-weight: var(--font-bold);
}

/* Responsive Design */
@media (max-width: 1200px) {
   .email-pricing-grid {
       gap: var(--space-3);
   }
   
   .pricing-card-featured {
       transform: scale(1.01);
   }
}

@media (max-width: 992px) {
   .email-pricing-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: var(--space-6);
   }
   
   .pricing-card-featured {
       transform: scale(1);
   }
   
   .faq-grid {
       grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .pricing-section {
       padding: var(--space-12) 0;
   }
   
   .email-pricing-grid {
       grid-template-columns: 1fr;
       max-width: 500px;
       margin-left: auto;
       margin-right: auto;
   }
   
   .plan-features-highlight {
       max-width: 350px;
       margin-left: auto;
       margin-right: auto;
   }
}

@media (max-width: 576px) {
   .section-title {
       font-size: 1.75rem;
   }
   
   .section-description {
       font-size: 0.9375rem;
   }
   
   .price-amount {
       font-size: 1.875rem;
   }
   
   .faq-question {
       font-size: 1rem;
   }
}























































































































/* ---------- Section FAQ Email Pro ---------- */
.emailpro-faq-section {
    padding: 5rem 0;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.emailpro-faq-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(249, 250, 251, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.emailpro-faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* En-tête de la section */
.emailpro-faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.emailpro-faq-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);
}

.emailpro-faq-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #582D1D;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.emailpro-faq-subtitle {
    font-size: 1.125rem;
    color: #6C757D;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Accordéon */
.emailpro-accordion-container {
    margin-bottom: 4rem;
}

.emailpro-accordion-item {
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.emailpro-accordion-item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.emailpro-accordion-header {
    padding: 0;
}

.emailpro-accordion-toggle {
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #582D1D;
    transition: all 0.3s ease;
    position: relative;
}

.emailpro-accordion-toggle:focus {
    outline: none;
}

.emailpro-question-text {
    flex: 1;
    padding-right: 2rem;
}

.emailpro-accordion-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.emailpro-accordion-icon:before,
.emailpro-accordion-icon:after {
    content: '';
    position: absolute;
    background-color: #FFA500;
    transition: all 0.3s ease;
}

.emailpro-accordion-icon:before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.emailpro-accordion-icon:after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.emailpro-accordion-toggle[aria-expanded="true"] .emailpro-accordion-icon:after {
    transform: translateX(-50%) scaleY(0);
}

.emailpro-accordion-toggle[aria-expanded="true"] {
    background-color: #FFF9ED;
}

.emailpro-accordion-body {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.emailpro-accordion-body.active {
    padding: 0 1.5rem 1.5rem;
    max-height: 500px;
}

.emailpro-accordion-body p {
    margin: 0;
    color: #6C757D;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Bannière de garantie */
.emailpro-guarantee-banner {
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 12px 32px rgba(255, 165, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.emailpro-guarantee-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.emailpro-guarantee-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32px;
    position: relative;
    z-index: 1;
}

.emailpro-guarantee-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.emailpro-guarantee-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.5rem;
}

.emailpro-guarantee-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

.emailpro-guarantee-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #FFFFFF;
    color: #582D1D;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.emailpro-guarantee-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.emailpro-guarantee-button i {
    transition: transform 0.3s ease;
}

.emailpro-guarantee-button:hover i {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .emailpro-faq-title {
        font-size: 1.75rem;
    }
    
    .emailpro-faq-subtitle {
        font-size: 1rem;
    }
    
    .emailpro-guarantee-banner {
        flex-direction: column;
        padding: 2rem;
        text-align: center;
        gap: 1rem;
    }
    
    .emailpro-guarantee-icon {
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .emailpro-faq-section {
        padding: 3rem 0;
    }
    
    .emailpro-accordion-toggle {
        padding: 1rem;
        font-size: 0.9375rem;
    }
    
    .emailpro-accordion-body {
        padding: 0 1rem;
    }
    
    .emailpro-accordion-body.active {
        padding: 0 1rem 1rem;
    }
    
    .emailpro-guarantee-title {
        font-size: 1.25rem;
    }
    
    .emailpro-guarantee-text {
        font-size: 0.875rem;
    }
}

.emailpro-accordion-body {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    display: none;
}

.emailpro-accordion-body.active {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: block;
}




























/* ---------- Section FAQ Email Pro Modernisée ---------- */
.emailpro-faq-section {
    padding: 6rem 0;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* Éléments de design décoratifs */
.emailpro-design-element {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.circle-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1) 0%, rgba(255, 183, 51, 0.05) 100%);
    border-radius: 50%;
    top: -100px;
    left: -150px;
}

.circle-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(88, 45, 29, 0.05) 0%, rgba(88, 45, 29, 0.02) 100%);
    border-radius: 50%;
    bottom: -50px;
    right: -100px;
}

.dots-1 {
    width: 180px;
    height: 180px;
    background-image: radial-gradient(rgba(255, 165, 0, 0.2) 2px, transparent 2px);
    background-size: 15px 15px;
    top: 30%;
    right: -90px;
}

.emailpro-faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* En-tête de la section */
.emailpro-faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.emailpro-faq-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.2);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.emailpro-faq-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 165, 0, 0.3);
}

.emailpro-faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #582D1D;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    background: linear-gradient(to right, #582D1D, #7A3F29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.emailpro-faq-subtitle {
    font-size: 1.125rem;
    color: #6C757D;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Accordéon */
.emailpro-accordion-container {
    margin-bottom: 4rem;
}

.emailpro-accordion-item {
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.emailpro-accordion-item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.emailpro-accordion-header {
    padding: 0;
}

.emailpro-accordion-toggle {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: #582D1D;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 16px;
}

.emailpro-accordion-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.3);
}

.emailpro-question-text {
    flex: 1;
    padding-right: 2rem;
}

.emailpro-accordion-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 0.4s ease;
}

.emailpro-accordion-icon:before,
.emailpro-accordion-icon:after {
    content: '';
    position: absolute;
    background-color: #FFA500;
    transition: all 0.4s ease;
    border-radius: 2px;
}

.emailpro-accordion-icon:before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.emailpro-accordion-icon:after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.emailpro-accordion-toggle[aria-expanded="true"] .emailpro-accordion-icon {
    transform: rotate(180deg);
}

.emailpro-accordion-toggle[aria-expanded="true"] .emailpro-accordion-icon:after {
    transform: translateX(-50%) scaleY(0);
}

.emailpro-accordion-toggle[aria-expanded="true"] {
    background-color: #FFF9ED;
    border-radius: 16px 16px 0 0;
}

.emailpro-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
    opacity: 0;
}

.emailpro-accordion-body.active {
    opacity: 1;
    max-height: 500px;
}

.emailpro-accordion-content {
    padding: 0 1.5rem 1.5rem;
}

.emailpro-accordion-body p {
    margin: 0;
    color: #6C757D;
    font-size: 1rem;
    line-height: 1.7;
}

/* Bannière de garantie */
.emailpro-guarantee-banner {
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    box-shadow: 0 16px 40px rgba(255, 165, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.emailpro-guarantee-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(255, 165, 0, 0.3);
}

.emailpro-guarantee-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.emailpro-guarantee-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.emailpro-guarantee-banner:hover .emailpro-guarantee-icon {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.emailpro-guarantee-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.emailpro-guarantee-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.75rem;
}

.emailpro-guarantee-text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

.emailpro-guarantee-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #FFFFFF;
    color: #582D1D;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.emailpro-guarantee-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background-color: #FFF9ED;
}

.emailpro-guarantee-button i {
    transition: transform 0.3s ease;
}

.emailpro-guarantee-button:hover i {
    transform: translateX(6px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .emailpro-faq-section {
        padding: 4rem 0;
    }
    
    .emailpro-faq-title {
        font-size: 2rem;
    }
    
    .emailpro-faq-subtitle {
        font-size: 1rem;
    }
    
    .emailpro-guarantee-banner {
        flex-direction: column;
        padding: 2.5rem;
        text-align: center;
        gap: 1.5rem;
    }
    
    .emailpro-guarantee-icon {
        margin: 0 auto;
    }
    
    .circle-1, .circle-2, .dots-1 {
        opacity: 0.5;
        transform: scale(0.7);
    }
}

@media (max-width: 576px) {
    .emailpro-faq-section {
        padding: 3rem 0;
    }
    
    .emailpro-faq-title {
        font-size: 1.75rem;
    }
    
    .emailpro-accordion-toggle {
        padding: 1.25rem;
        font-size: 1rem;
    }
    
    .emailpro-accordion-content {
        padding: 0 1.25rem 1.25rem;
    }
    
    .emailpro-guarantee-banner {
        padding: 2rem;
    }
    
    .emailpro-guarantee-title {
        font-size: 1.5rem;
    }
    
    .emailpro-guarantee-text {
        font-size: 0.95rem;
    }
    
    .emailpro-guarantee-button {
        width: 100%;
        justify-content: center;
    }
}


































/* Login Page - Claude */
/*
:root {
  --primary: #FFA500;
  --primary-light: #FFB733;
  --primary-dark: #E67E00;
  --secondary: #582D1D;
  --secondary-light: #7A3F29;
  --secondary-dark: #3B1D00;
  --accent: #eeb476;
  --text-primary: #333333;
  --text-secondary: #6C757D;
  --text-light: #8A94A6;
  --bg-light: #FFF9ED;
  --bg-white: #FFFFFF;
  --bg-gradient: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
  --sidebar-gradient: linear-gradient(145deg, #582D1D 0%, #3B1D00 100%);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --transition-normal: 0.3s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Éléments décoratifs 
.design-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.design-circle {
  position: absolute;
  border-radius: 50%;
}

.design-circle-1 {
  width: 700px;
  height: 700px;
  top: -350px;
  right: -350px;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.04) 0%, rgba(255, 165, 0, 0) 70%);
}

.design-circle-2 {
  width: 500px;
  height: 500px;
  bottom: -250px;
  left: -250px;
  background: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
}

.design-pattern {
  position: absolute;
  width: 240px;
  height: 240px;
  right: 5%;
  top: 30%;
}

.design-pattern-dots {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--primary) 1px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: 0.15;
}

/* Structure principale 
.login-page-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Colonne latérale gauche 
.sidebar-column {
  overflow: hidden;
  position: relative;
}

.sidebar-gradient {
  background: var(--sidebar-gradient);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.sidebar-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
}

.sidebar-logo {
  margin-bottom: 60px;
}

.sidebar-logo img {
  height: 45px;
  width: auto;
}

.sidebar-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.welcome-title {
  font-size: 32px;
  color: white;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.3;
}

.welcome-greeting {
  display: block;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 10px;
}

.features-container {
  margin-top: 40px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.feature-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.feature-icon i {
  color: var(--accent);
  font-size: 18px;
}

.feature-content h4 {
  font-size: 16px;
  color: white;
  margin-bottom: 5px;
  font-weight: 600;
}

.feature-content p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

.sidebar-illustration {
  margin-top: auto;
  padding-top: 60px;
  text-align: center;
}

.sidebar-illustration img {
  max-width: 100%;
  max-height: 300px;
}

/* Colonne du formulaire
.form-column {
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.form-wrapper {
  width: 100%;
  max-width: 500px;
  padding: 40px 20px;
}

.login-form-container {
  padding: 40px;
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.login-form-container:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

/* En-tête du formulaire 
.form-header {
  text-align: left;
  margin-bottom: 30px;
}

.form-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 10px;
  background: linear-gradient(to right, var(--secondary), var(--secondary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* Connexion avec réseaux sociaux 
.social-login-block {
  margin-bottom: 20px;
}

.separator {
  text-align: center;
  position: relative;
  margin: 25px 0;
}

.separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.separator span {
  position: relative;
  background-color: var(--bg-white);
  padding: 0 15px;
  font-size: 14px;
  color: var(--text-light);
}

/* Champs du formulaire 
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 8px;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 16px;
}

.form-control {
  width: 100%;
  padding: 12px 16px 12px 45px;
  font-size: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  background-color: var(--bg-white);
  color: var(--text-primary);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
}

.form-control::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

.password-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.forgot-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.forgot-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  cursor: pointer;
  transition: color var(--transition-normal);
}

.password-toggle:hover {
  color: var(--primary);
}

/* Case à cocher personnalisée 
.remember-me {
  margin-top: 5px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: all var(--transition-normal);
}

.custom-checkbox:hover input ~ .checkmark {
  border-color: var(--primary);
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Bouton de connexion 
.login-button {
  margin-top: 30px;
}

.login-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--bg-gradient);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.2);
  cursor: pointer;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3);
}

.login-btn i {
  transition: transform var(--transition-normal);
}

.login-btn:hover i {
  transform: translateX(5px);
}

/* Lien d'inscription 
.signup-link {
  text-align: center;
  margin-top: 30px;
}

.signup-link p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.signup-link a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-normal);
}

.signup-link a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Responsive 
@media (max-width: 991px) {
  .sidebar-column {
    display: none;
  }
  
  .form-column {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  
  .form-wrapper {
    max-width: 450px;
    padding: 30px 20px;
  }
}

@media (max-width: 576px) {
  .login-form-container {
    padding: 30px 20px;
  }
  
  .form-title {
    font-size: 24px;
  }
  
  .form-control {
    padding: 10px 16px 10px 40px;
  }
  
  .login-btn {
    padding: 12px 16px;
  }
}
*/






































/* Inscription Page - Claude */
/*
:root {
    --primary: #FFA500;
    --primary-light: #FFB733;
    --primary-dark: #E67E00;
    --secondary: #582D1D;
    --secondary-light: #7A3F29;
    --text-dark: #333333;
    --text-medium: #6C757D;
    --text-light: #A0AEC0;
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-lighter: #FFF9ED;
    --bg-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-normal: 0.3s ease;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Éléments de design d'arrière-plan 
.register-container {
    position: relative;
    padding-bottom: 40px;
}

.register-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.bg-element {
    position: absolute;
    border-radius: 50%;
}

.bg-circle-1 {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -300px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.04) 0%, rgba(255, 165, 0, 0) 70%);
}

.bg-circle-2 {
    width: 500px;
    height: 500px;
    bottom: -250px;
    left: -250px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
}

.bg-dots {
    position: absolute;
    width: 240px;
    height: 240px;
    right: 10%;
    top: 40%;
    background-image: radial-gradient(var(--primary) 1px, transparent 1.5px);
    background-size: 20px 20px;
    opacity: 0.15;
}

/* Logo et en-tête 
.logo-link {
    display: inline-block;
    transition: transform var(--transition-normal);
}

.logo-link:hover {
    transform: translateY(-3px);
}

/* Carte d'inscription 
.signup-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.signup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bg-gradient);
}

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

/* Titres 
.title {
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary);
    background: linear-gradient(to right, var(--secondary), var(--secondary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sub-title {
    color: var(--text-medium);
    font-size: 16px;
}

/* Séparateur 
.separte-or {
    position: relative;
    text-align: center;
    margin: 25px 0;
}

.separte-or::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.separte-or span {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    background-color: var(--bg-white);
    color: var(--text-light);
    font-size: 14px;
}

/* Sections du formulaire 
.form-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--primary);
    font-size: 16px;
}

/* Champs du formulaire 
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--secondary);
    font-size: 14px;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 10px 12px 10px 35px;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    background-color: var(--bg-white);
    transition: all var(--transition-normal);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.15);
}

select.form-control {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFA500' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.field-help-text {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 5px;
    display: block;
}

/* Mots de passe 
.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--text-light);
    cursor: pointer;
    transition: color var(--transition-normal);
}

.password-toggle:hover {
    color: var(--primary);
}

.password-strength-meter {
    margin-top: 15px;
}

.password-strength-meter .progress {
    height: 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.05);
}

.password-strength-meter p {
    font-size: 12px;
    margin: 0;
}

/* Marketing Email Opt-In 
.marketing-email-optin {
    margin: 30px 0;
    padding: 20px;
    background-color: var(--bg-lighter);
    border-radius: var(--radius-md);
    position: relative;
}

.email-optin-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-optin-title i {
    color: var(--primary);
}

.email-optin-text {
    font-size: 14px;
    color: var(--text-medium);
    margin-bottom: 15px;
}

/* Switch Toggle 
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.slider.round {
    border-radius: 34px;
    display: none;
}

.slider.round:before {
    border-radius: 50%;
}

/* TOS Acceptance 
.tos-acceptance {
    margin: 25px 0;
    text-align: center;
}

.custom-checkbox {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    transition: all var(--transition-normal);
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--primary);
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    color: var(--text-medium);
}

.tos-link {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.tos-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Bouton d'inscription 
.signup-btn {
    width: 100%;
    padding: 12px 20px;
    background: var(--bg-gradient);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-bounce);
    box-shadow: 0 8px 15px rgba(255, 165, 0, 0.2);
    cursor: pointer;
}

.signup-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(255, 165, 0, 0.3);
}

.signup-btn:hover i {
    transform: translateX(5px);
}

.signup-btn i {
    transition: transform var(--transition-normal);
}

/* Lien de connexion 
.form-bottom {
    margin-top: 25px;
}

.sign-up-text {
    font-size: 14px;
    color: var(--text-medium);
}

.sign-up-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-normal);
}

.sign-up-text a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Responsive styles 
@media (max-width: 991px) {
    .signup-card {
        margin: 15px 0;
    }
    
    .form-section {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .title {
        font-size: 24px;
    }
    
    .form-section {
        padding: 15px 10px;
    }
    
    .section-title {
        font-size: 16px;
    }
    
    .form-group label {
        font-size: 13px;
    }
    
    .input-icon {
        left: 10px;
    }
    
    .form-control {
        padding: 8px 10px 8px 30px;
        font-size: 13px;
    }
}
*/







































/* Client Area Home 
:root {
    --primary: #FFA500;
    --primary-light: #FFB733;
    --primary-dark: #E67E00;
    --secondary: #582D1D;
    --secondary-light: #7A3F29;
    --text-dark: #333333;
    --text-medium: #6C757D;
    --text-light: #A0AEC0;
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-lighter: #FFF9ED;
    --bg-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition-normal: 0.3s ease;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Structure du tableau de bord 
.dashboard-container {
    position: relative;
    padding-bottom: 40px;
}

/* Éléments décoratifs d'arrière-plan
.dashboard-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.bg-element {
    position: absolute;
    border-radius: 50%;
}

.bg-circle-1 {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -300px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.04) 0%, rgba(255, 165, 0, 0) 70%);
}

.bg-circle-2 {
    width: 500px;
    height: 500px;
    bottom: -250px;
    left: -250px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
}

.bg-dots {
    position: absolute;
    width: 240px;
    height: 240px;
    right: 10%;
    top: 40%;
    background-image: radial-gradient(var(--primary) 1px, transparent 1.5px);
    background-size: 20px 20px;
    opacity: 0.15;
}

/* En-tête du tableau de bord 
.dashboard-header {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.welcome-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0;
}

.client-name {
    color: var(--primary);
    position: relative;
}

.welcome-subtitle {
    color: var(--text-medium);
    font-size: 15px;
    margin: 5px 0 0;
}

.edit-profile-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--bg-light);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin-left: 15px;
    transition: all var(--transition-normal);
}

.edit-profile-btn:hover {
    background-color: var(--secondary);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.edit-profile-btn i {
    margin-right: 5px;
    font-size: 10px;
}

/* Cartes statistiques 
.stats-section {
    margin-bottom: 30px;
}

.stats-cards {
    margin: 0 -10px;
}

.stats-cards .col-6,
.stats-cards .col-xl-3 {
    padding: 0 10px;
    margin-bottom: 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    color: var(--text-dark);
    border-top: 3px solid var(--primary);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.stat-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-lighter);
    color: var(--primary);
    font-size: 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon {
    background-color: var(--primary);
    color: white;
    transform: scale(1.1);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 5px;
}

.stat-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 5px;
}

.stat-desc {
    font-size: 12px;
    color: var(--text-medium);
    margin: 0;
}

.card-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.stat-card:hover .card-hover-effect {
    opacity: 1;
}

/* Panneaux du tableau de bord 
.panel-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.panel-card:hover {
    box-shadow: var(--shadow-md);
}

.panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: var(--bg-light);
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary);
    margin: 0;
    display: flex;
    align-items: center;
}

.panel-icon {
    color: var(--primary);
    margin-right: 10px;
    font-size: 14px;
}

.panel-body {
    padding: 20px;
}

.panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-list-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all var(--transition-normal);
    color: var(--text-dark);
    position: relative;
}

.panel-list-item:last-child {
    border-bottom: none;
}

.panel-list-item:hover {
    background-color: var(--bg-lighter);
    text-decoration: none;
}

.panel-list-item.active {
    background-color: var(--bg-lighter);
    border-left: 3px solid var(--primary);
}

.list-icon {
    color: var(--primary);
    margin-right: 10px;
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.item-label-wrapper {
    flex: 1;
}

.item-label {
    color: var(--text-dark);
}

.item-badge {
    padding: 4px 8px;
    background-color: var(--primary-light);
    color: white;
    font-size: 11px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.item-badge.expiry {
    background-color: #e53e3e;
}

/* Sidebar 
.dashboard-sidebar {
    position: sticky;
    top: 20px;
}

.sidebar-section {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
    overflow: hidden;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary);
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
}

.sidebar-title i {
    color: var(--primary);
    margin-right: 10px;
}

.sidebar-content {
    padding: 15px;
}

/* Annonces 
.announcement-card {
    padding: 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    background-color: var(--bg-light);
    transition: all var(--transition-normal);
}

.announcement-card:hover {
    background-color: var(--bg-lighter);
    transform: translateY(-2px);
}

.announcement-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 10px;
    transition: color var(--transition-normal);
}

.announcement-title:hover {
    color: var(--primary);
    text-decoration: none;
}

.announcement-preview {
    font-size: 12px;
    color: var(--text-medium);
    margin-bottom: 10px;
    line-height: 1.5;
}

.announcement-read-more {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    transition: color var(--transition-normal);
}

.announcement-read-more:hover {
    color: var(--primary-dark);
    text-decoration: none;
}

.announcement-read-more i {
    font-size: 10px;
    margin-left: 5px;
    transition: transform var(--transition-normal);
}

.announcement-read-more:hover i {
    transform: translateX(3px);
}

/* Listes de raccourcis et support 
.shortcuts-list,
.support-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Listes de raccourcis et support 
.shortcuts-list,
.support-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shortcuts-list li,
.support-list li {
    margin-bottom: 8px;
}

.shortcuts-list li:last-child,
.support-list li:last-child {
    margin-bottom: 0;
}

.shortcuts-list a,
.support-list a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--text-dark);
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

.shortcuts-list a:hover,
.support-list a:hover {
    background-color: var(--bg-lighter);
    color: var(--primary);
    text-decoration: none;
    transform: translateX(3px);
}

.shortcuts-list a i,
.support-list a i {
    width: 20px;
    margin-right: 10px;
    color: var(--primary);
    font-size: 14px;
    text-align: center;
}

/* Statuts personnalisés 
.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    background-color: var(--status-color, #6c757d);
    color: white;
}

/* Responsive 
@media (max-width: 1199px) {
    .stat-card {
        padding: 15px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .stat-title {
        font-size: 14px;
    }
    
    .stat-desc {
        font-size: 11px;
    }
}

@media (max-width: 991px) {
    .dashboard-sidebar {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .welcome-title {
        font-size: 22px;
    }
    
    .edit-profile-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .stats-cards .col-6 {
        padding: 0 5px;
    }
    
    .stats-cards {
        margin: 0 -5px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-icon {
        width: 35px;
        height: 35px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .stat-title {
        font-size: 13px;
    }
    
    .panel-header {
        padding: 12px 15px;
    }
    
    .panel-title {
        font-size: 14px;
    }
    
    .panel-list-item {
        padding: 10px 15px;
    }
}

/* Animations */
/*
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.stats-section {
    animation: fadeIn 0.5s ease-out;
}

.panel-card {
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.panel-card:nth-child(1) { animation-delay: 0.1s; }
.panel-card:nth-child(2) { animation-delay: 0.2s; }
.panel-card:nth-child(3) { animation-delay: 0.3s; }
.panel-card:nth-child(4) { animation-delay: 0.4s; }
.panel-card:nth-child(5) { animation-delay: 0.5s; }

.sidebar-section {
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.sidebar-section:nth-child(1) { animation-delay: 0.2s; }
.sidebar-section:nth-child(2) { animation-delay: 0.3s; }
.sidebar-section:nth-child(3) { animation-delay: 0.4s; }
*/

























































/* domain register */
:root {
    --primary-color: #FFA500;
    --primary-dark: #E67E00;
    --primary-light: #FFB733;
    --secondary-color: #582D1D;
    --secondary-light: #7D4B36;
    --white: #FFFFFF;
    --gray-light: #F8F9FA;
    --gray: #E9ECEF;
    --text-dark: #333333;
    --text-muted: #6C757D;
    
    --border-radius-sm: 6px;
    --border-radius: 12px;
    --border-radius-lg: 18px;
    
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.15);
    
    --transition: all 0.3s ease;
}

/* Hero Section */
.domain-hero-section {
    position: relative;
    background: linear-gradient(135deg, #582D1D 0%, #7D4B36 100%);
    padding: 3rem 0 6rem;
    color: var(--white);
    overflow: hidden;
    margin-top: -20px;
}

.domain-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0ZGQTUwMCIgZmlsbC1vcGFjaXR5PSIuMDUiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTUwIiBjeT0iMTUwIiByPSIxMCIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjUwIiByPSIxMCIvPjxjaXJjbGUgY3g9IjM1MCIgY3k9IjE1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSI0NTAiIGN5PSI1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSI1NTAiIGN5PSIxNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iNjUwIiBjeT0iNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iNzUwIiBjeT0iMTUwIiByPSIxMCIvPjxjaXJjbGUgY3g9Ijg1MCIgY3k9IjUwIiByPSIxMCIvPjxjaXJjbGUgY3g9Ijk1MCIgY3k9IjE1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMDUwIiBjeT0iNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTE1MCIgY3k9IjE1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMjUwIiBjeT0iNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTM1MCIgY3k9IjE1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSI1MCIgY3k9IjI1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIzNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMjUwIiBjeT0iMjUwIiByPSIxMCIvPjxjaXJjbGUgY3g9IjM1MCIgY3k9IjM1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSI0NTAiIGN5PSIyNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iNTUwIiBjeT0iMzUwIiByPSIxMCIvPjxjaXJjbGUgY3g9IjY1MCIgY3k9IjI1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSI3NTAiIGN5PSIzNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iODUwIiBjeT0iMjUwIiByPSIxMCIvPjxjaXJjbGUgY3g9Ijk1MCIgY3k9IjM1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMDUwIiBjeT0iMjUwIiByPSIxMCIvPjxjaXJjbGUgY3g9IjExNTAiIGN5PSIzNTAiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTI1MCIgY3k9IjI1MCIgcj0iMTAiLz48Y2lyY2xlIGN4PSIxMzUwIiBjeT0iMzUwIiByPSIxMCIvPjwvZz48L3N2Zz4=');
    opacity: 0.6;
    z-index: 0;
}

.navigation-mini {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    z-index: 10;
}

.mini-title {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 300;
    margin: 0;
    opacity: 0.8;
}

.navigation-links {
    display: flex;
    gap: 1.5rem;
}

.navigation-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.875rem;
    opacity: 0.8;
    transition: var(--transition);
    position: relative;
}

.navigation-links a:hover {
    opacity: 1;
}

.navigation-links a.active {
    opacity: 1;
    font-weight: 500;
}

.navigation-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
    border-radius: 1px;
}

.domain-hero-content {
    position: relative;
    z-index: 1;
    margin-top: 4rem;
}

.main-title {
    /*
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--white);
    */
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white);
    letter-spacing: -0.03em;
    line-height: 1;
}

.main-description {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    color: var(--white);
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.domain-search-form {
    margin-bottom: 1.5rem;
}

.search-input-container {
    display: flex;
    background-color: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    transition: var(--transition);
}

.search-input-container:focus-within {
    box-shadow: var(--shadow-lg);
}

.search-input {
    flex-grow: 1;
    padding: 1.25rem 1.5rem;
    border: none;
    font-size: 1.125rem;
    color: var(--text-dark);
    outline: none;
}

.search-button {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 0 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-button:hover {
    background-color: var(--primary-dark);
}

.search-button i {
    transition: transform 0.2s ease;
}

.search-button:hover i {
    transform: translateX(3px);
}

.captcha-container {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.captcha-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    gap: 1rem;
}

.captcha-input-group input {
    max-width: 150px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray);
    border-radius: var(--border-radius-sm);
    outline: none;
    transition: var(--transition);
}

.captcha-input-group input:focus {
    border-color: var(--primary-color);
}

.search-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    font-size: 0.875rem;
}

.feature i {
    color: var(--primary-color);
}

.help-text {
    text-align: center;
    color: var(--white);
    font-size: 0.875rem;
    margin-top: 1.5rem;
    opacity: 0.9;
}

.help-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.help-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.domain-tlds {
    margin-top: 3rem;
}

.tlds-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tld-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    text-align: center;
    min-width: 150px;
    transition: var(--transition);
}

.tld-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.tld {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    display: block;
    margin-bottom: 0.25rem;
}

.price {
    font-size: 0.875rem;
    color: var(--primary-color);
}

.domain-shape-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0;
}

.domain-shape-bottom svg {
    width: 100%;
    height: 80px;
}

/* Sticky Navigation */
.services-navigation-sticky {
    position: sticky;
    top: 0;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    z-index: 100;
    padding: 0.75rem 0;
    transition: var(--transition);
}

.navigation-items {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.nav-item {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem;
    position: relative;
    transition: var(--transition);
}

/*
.nav-item:hover, .nav-item.active {
    color: var(--primary-color);
}


.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.nav-item:hover::after, .nav-item.active::after {
    transform: scaleX(1);
}
*/

/* Responsive Styles */
@media (max-width: 992px) {
    .main-title {
        font-size: 2rem;
    }
    
    .search-features {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .domain-hero-section {
        padding: 2rem 0 5rem;
    }
    
    .main-title {
        font-size: 1.75rem;
    }
    
    .main-description {
        font-size: 1rem;
    }
    
    .search-input {
        padding: 1rem;
        font-size: 1rem;
    }
    
    .search-button {
        padding: 0 1.5rem;
        font-size: 0.875rem;
    }
    
    .navigation-items {
        gap: 1rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .nav-item {
        white-space: nowrap;
    }
    
    .tlds-container {
        gap: 1rem;
    }
    
    .tld-item {
        min-width: 120px;
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 576px) {
    .search-input-container {
        flex-direction: column;
    }
    
    .search-button {
        width: 100%;
        padding: 1rem;
        justify-content: center;
    }
}





























/* Mini Barre de Navigation Sticky Premium */
:root {
  --primary: #FFA500;
  --primary-dark: #E67E00;
  --primary-light: #FFB733;
  --secondary: #582D1D;
  --secondary-light: #7D4B36;
  --text-dark: #333333;
  --text-muted: #6C757D;
  --transition-speed: 0.3s;
}

.services-iformations-sticky-navbar {
  background: linear-gradient(to right, rgba(255,255,255,0.97), rgba(255,248,240,0.97));
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255,165,0,0.1);
  padding: 15px 0;
  transition: all var(--transition-speed) ease;
}

.services-iformations-sticky-navbar:hover {
  box-shadow: 0 6px 20px rgba(230,126,0,0.08);
}

.services-iformations-sticky-navbar-nav {
  gap: 2rem;
  justify-content: center;
}

.animated-link {
  position: relative;
  color: var(--text-dark);
  font-weight: 500;
  padding: 8px 10px;
  text-decoration: none;
  transition: all var(--transition-speed) ease;
  border-radius: 6px;
  overflow: hidden;
}

.animated-link:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, var(--primary-light), var(--primary), var(--primary-dark));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-speed) ease;
  opacity: 0.8;
}

.animated-link:hover {
  color: var(--primary-dark);
  transform: translateY(-2px);
  text-shadow: 0 0 1px rgba(0,0,0,0.05);
}

.animated-link:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.animated-link.active {
  color: var(--primary);
  background-color: rgba(255,165,0,0.05);
}

.animated-link.active:before {
  transform: scaleX(1);
  height: 3px;
}

/* Animation d'entrée pour la navigation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services-iformations-sticky-navbar.scrolled {
  animation: fadeInDown 0.4s forwards;
  background: linear-gradient(to right, rgba(255,255,255,0.98), rgba(255,245,235,0.98));
  padding: 12px 0;
}

/* Ajout d'une icône subtile avant chaque lien */
.animated-link:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--primary-light);
  border-radius: 50%;
  margin-left: 8px;
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition-speed) ease;
}

.animated-link:hover:after {
  opacity: 0.8;
  transform: scale(1);
}

@media (max-width: 768px) {
  .services-iformations-sticky-navbar-nav {
    gap: 1rem;
  }
  
  .animated-link {
    font-size: 11px;
    padding: 6px 8px;
  }
}







:root {
    --primary: #FFA500;
    --primary-dark: #E67E00;
    --secondary: #582D1D;
    --white: #FFFFFF;
    --gray-100: #F8F9FA;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-700: #495057;
    
    --success: #28A745;
    --danger: #DC3545;
    --warning: #FFC107;
    
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

/* Améliorations pour le conteneur principal des résultats */
#DomainSearchResults {
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Améliorations pour les alertes */
.alert {
    border: none;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    margin-bottom: 25px;
}

.alert-success {
    background-color: #E8F5E9;
    border-left: 4px solid var(--success);
    color: #1B5E20;
}

.alert-warning {
    background-color: #FFF8E1;
    border-left: 4px solid var(--warning);
    color: #795548;
}

.domain-checker-unavailable {
    background-color: #FFEBEE;
    border-left: 4px solid var(--danger);
    color: #B71C1C;
}

.alert-heading {
    margin-bottom: 15px;
    font-size: 1.25rem;
}

/* Animation de chargement plus élégante */
.domain-lookup-loader {
    text-align: center;
    padding: 30px 0;
    color: var(--secondary);
    font-size: 1.1rem;
}

.domain-lookup-loader i {
    margin-right: 10px;
    color: var(--primary);
}

/* Bouton d'ajout au panier amélioré */
.btn-add-to-cart {
    /*
    background-color: var(--primary);
    border-color: var(--primary);
    */
    background-color: #5cb85c;
    border-color: #5cb85c;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-add-to-cart:hover {
    /*
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    */
    background-color: #56d356;
    border-color: #56d356;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styles pour la section prix */
.domain-price {
    margin: 20px 0;
    padding: 15px;
    background-color: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.domain-price .price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary);
}

/* Amélioration visuelle pour le sélecteur de langue IDN */
#idnLanguageSelector {
    background-color: var(--gray-100);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

#idnLanguageSelector select {
    border-radius: 6px;
    border-color: var(--gray-300);
    padding: 8px 12px;
    margin-top: 8px;
    transition: var(--transition);
}

#idnLanguageSelector select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.25);
}

.field-error-msg {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
}

/* Section des suggestions de domaine */
.white-bg {
    background-color: var(--white);
    border-radius: 12px;
    /*box-shadow: var(--box-shadow);*/
}

.section-title {
    margin-bottom: 25px;
}

.section-title .pre-title {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.section-title .title {
    color: var(--secondary);
    font-weight: 600;
}

/* Spotlight TLDs améliorés */
.spotlight-tlds-group {
    margin: 30px 0;
}

.spotlight-tld {
    background-color: var(--gray-100);
    border-radius: 10px;
    padding: 15px 10px;
    text-align: center;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.spotlight-tld:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
}

.spotlight-tld-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
}

.spotlight-tld .price {
    font-weight: 600;
    color: var(--primary-dark);
    margin: 10px 0;
}

.spotlight-tld .btn {
    margin-top: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 6px 12px;
}

/* Liste des suggestions de domaine */
.domain-suggestion {
    background-color: var(--gray-100);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    transition: var(--transition);
}

.domain-suggestion:hover {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.domain-suggestion .domain {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 1.1rem;
}

.domain-suggestion .extension {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

.domain-suggestion .actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.domain-suggestion .price {
    font-weight: 600;
    color: var(--secondary);
    margin-right: 15px;
}

/* Style pour les étiquettes promotionnelles */
.promo {
    display: inline-flex;
    gap: 5px;
    margin-left: 10px;
}

.sales-group-hot,
.sales-group-new,
.sales-group-sale {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

.sales-group-hot {
    background-color: var(--danger);
}

.sales-group-new {
    background-color: var(--primary);
}

.sales-group-sale {
    background-color: var(--success);
}

/* Bouton "Plus de suggestions" */
.btn-moresuggestion {
    background-color: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 30px;
    padding: 8px 25px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-moresuggestion:hover {
    background-color: var(--primary);
    color: var(--white);
}

.no-more {
    display: block;
    color: var(--gray-700);
    margin-top: 15px;
}

/* Adaptation pour la version mobile */
@media (max-width: 768px) {
    .domain-price {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .domain-price .price {
        margin-bottom: 15px;
    }
    
    .domain-suggestion {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .domain-suggestion .actions {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }
}

/* Masquer certains éléments par défaut (compatibilité avec le JS existant) */
.w-hidden {
    display: none;
}





















/* style tableau des prix domain register page
:root {
    --primary: #FFA500;
    --primary-light: #FFB733;
    --primary-dark: #E67E00;
    --secondary: #582D1D;
    --secondary-light: #7D4B36;
    --white: #FFFFFF;
    --gray-100: #F8F9FA;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-600: #6C757D;
    --gray-800: #343A40;
    
    --red: #DC3545;
    --green: #28A745;
    --blue: #007BFF;
    
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
    --radius: 12px;
    --radius-sm: 6px;
}

/* Section de prix de domaine 
.domain-pricing-section {
    padding: 4rem 0;
    max-width: 1080px;
}

/* En-tête de section 
.section-header {
    margin-bottom: 2.5rem;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.75rem;
}

.section-description {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 700px;
    margin: 0 auto;
}

/* Conteneur d'extensions
.extensions-container {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

/* Filtres de catégorie
.category-filters {
    margin-bottom: 2rem;
    position: relative;
}

.filters-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.category-filter {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background-color: var(--gray-100);
    color: var(--gray-800);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.category-filter:hover {
    background-color: var(--primary-light);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.2);
}

.category-filter.active {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.filter-name {
    font-size: 0.9rem;
}

.filter-count {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Tableau des TLDs
.tld-table {
    margin-top: 2rem;
}

.tld-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    transition: var(--transition);
}

.tld-row:hover {
    background-color: var(--gray-100);
}

.tld-row:last-child {
    border-bottom: none;
}

.tld-info {
    display: flex;
    align-items: center;
    min-width: 150px;
}

.tld-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
    margin-right: 0.75rem;
}

.tld-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    border-radius: 20px;
    text-transform: uppercase;
}

.tld-badge-hot {
    background-color: var(--red);
}

.tld-badge-new {
    background-color: var(--blue);
}

.tld-badge-sale {
    background-color: var(--green);
}

.tld-pricing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.pricing-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.pricing-type {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.3rem;
}

.pricing-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
}

.pricing-period {
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--gray-600);
}

.tld-actions {
    margin-left: 1rem;
}

.btn-register {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.btn-register:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styles responsifs
@media (max-width: 992px) {
    .tld-pricing {
        gap: 1.5rem;
    }
    
    .pricing-block {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .tld-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tld-info {
        margin-bottom: 1rem;
    }
    
    .tld-pricing {
        width: 100%;
        justify-content: space-between;
    }
    
    .pricing-block {
        min-width: auto;
        align-items: flex-start;
    }
    
    .tld-actions {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
    }
    
    .btn-register {
        display: block;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .extensions-container {
        padding: 1.5rem;
    }
    
    .tld-pricing {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .category-filter {
        padding: 0.5rem 1rem;
        width: calc(50% - 0.75rem/2);
        text-align: center;
    }
}*/

















/* Section Caractéristiques des Domaines - Style Minimaliste Premium */
.domain-features-section {
    position: relative;
    background: linear-gradient(135deg, #2E1600 0%, #582D1D 100%);
    padding: 7rem 0;
    color: #fff;
    overflow: hidden;
}

/* Élément décoratif subtil */
.domain-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z' fill='%23FFA500' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.6;
    z-index: 0;
}

/* Container central */
.domain-features-inner {
    position: relative;
    z-index: 2;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section titre */
.domain-features-header {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
}

.domain-features-header::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.5), transparent);
}

.domain-features-title {
    font-size: 2.8rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: white;
}

.domain-features-badge {
    display: inline-flex;
    align-items: center;
    background-color: #28A745;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    margin: 0 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
}

.domain-features-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    width: 60%;
    transform: translateX(-100%);
    animation: badgeShine 3s infinite;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.domain-features-badge i {
    margin-left: 0.5rem;
    transform: rotate(45deg);
}

.domain-features-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Grille de fonctionnalités */
.domain-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Cartes de fonctionnalités minimalistes */
.domain-feature-card {
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 3rem;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.domain-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFA500, #FFB733);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.domain-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

.domain-feature-card:hover::before {
    opacity: 1;
}

/* Numéro de la carte */
.domain-feature-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    transition: all 0.5s ease;
}

.domain-feature-card:hover .domain-feature-number {
    color: rgba(255, 255, 255, 0.05);
    transform: translateX(-5px) translateY(-5px);
}

/* Icône de fonctionnalité */
.domain-feature-icon {
    font-size: 2rem;
    color: #FFA500;
    margin-bottom: 1.5rem;
    transition: all 0.5s ease;
    display: inline-block;
}

.domain-feature-card:hover .domain-feature-icon {
    transform: translateY(-5px) scale(1.1);
    color: #FFB733;
}

/* Titre de fonctionnalité */
.domain-feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.domain-feature-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    background-color: #dc3545;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

/* Description de fonctionnalité */
.domain-feature-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    transition: color 0.3s ease;
}

.domain-feature-card:hover .domain-feature-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Éléments décoratifs */
.domain-shape {
    position: absolute;
    z-index: 1;
}

.domain-shape-1 {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.1) 0%, rgba(255, 165, 0, 0) 70%);
    top: -150px;
    right: 10%;
    filter: blur(30px);
}

.domain-shape-2 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.06) 0%, rgba(255, 165, 0, 0) 70%);
    bottom: -100px;
    left: 5%;
    filter: blur(20px);
}

/* Media Queries */
@media (max-width: 992px) {
    .domain-features-title {
        font-size: 2.4rem;
    }
    
    .domain-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .domain-feature-card {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .domain-features-section {
        padding: 5rem 0;
    }
    
    .domain-features-title {
        font-size: 2rem;
    }
    
    .domain-features-description {
        font-size: 1rem;
    }
    
    .domain-features-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .domain-feature-number {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .domain-features-section {
        padding: 4rem 0;
    }
    
    .domain-features-title {
        font-size: 1.8rem;
    }
    
    .domain-feature-card {
        padding: 2rem;
    }
    
    .domain-feature-number {
        font-size: 3.5rem;
        top: 1rem;
        right: 1rem;
    }
}



























/* Sections de contenu ultra premium avec illustrations modernes */
.domain-feature-showcase {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    background: linear-gradient(to right, #FFFFFF 50%, #FAFAFA 50%);
}

.domain-feature-showcase:nth-child(even) {
    background: linear-gradient(to right, #FAFAFA 50%, #FFFFFF 50%);
}

/* Effet de motif d'arrière-plan premium */
.domain-feature-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 165, 0, 0.03) 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(88, 45, 29, 0.03) 0%, transparent 35%);
    z-index: 0;
}

/* Conteneur interne */
.feature-showcase-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
}

/* Ligne décorative médiane */
.decorative-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 165, 0, 0.15), transparent);
    transform: translateX(-50%);
    z-index: 0;
}

/* Contenu texte */
.showcase-content {
    position: relative;
    padding: 2rem;
    z-index: 2;
}

/* Badge de pré-titre stylisé */
.showcase-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(270deg, #28A745, #20C997);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
    margin-bottom: 1.5rem;
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.showcase-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: badgeShine 3s infinite ease-in-out;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%);
    }
    50%, 100% {
        transform: translateX(100%);
    }
}

.showcase-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(40, 167, 69, 0.3);
}

/* Titre majeur */
.showcase-title {
    font-size: 3rem;
    font-weight: 300;
    color: #582D1D;
    line-height: 1.2;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.showcase-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #FFA500, #FFB733);
    border-radius: 4px;
}

.text-center .showcase-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Paragraphes avec espacement optimal */
.showcase-paragraph {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 165, 0, 0.2);
}

.showcase-paragraph strong {
    color: #582D1D;
    font-weight: 600;
}

/* Bouton d'action premium */
.showcase-action {
    margin-top: 2.5rem;
}

.showcase-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(255, 165, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
}

.showcase-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.showcase-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 165, 0, 0.4);
    letter-spacing: 0.5px;
}

.showcase-button:hover::before {
    transform: translateX(100%);
}

.button-icon {
    transition: transform 0.3s ease;
}

.showcase-button:hover .button-icon {
    transform: translateX(5px);
}

/* Conteneur d'illustration */
.illustration-container {
    position: relative;
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrière-plan de l'illustration */
.illustration-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 165, 0, 0.03);
    border-radius: 20px;
    transform: rotate(-3deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.illustration-container:hover .illustration-background {
    transform: rotate(0deg);
    background-color: rgba(255, 165, 0, 0.05);
}

/* Illustrations SVG */
.illustration-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.illustration-wrapper:hover {
    transform: translateY(-10px);
}

.illustration-svg {
    width: 85%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
    transition: all 0.5s ease;
}

.illustration-container:hover .illustration-svg {
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15));
}

/* Éléments flottants */
.floating-element {
    position: absolute;
    background: linear-gradient(135deg, #FFA500, #FFB733);
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.2;
    z-index: 0;
}

.floating-element.top-right {
    width: 200px;
    height: 200px;
    top: -50px;
    right: -50px;
    animation: floatAnimation 12s infinite alternate ease-in-out;
}

.floating-element.bottom-left {
    width: 150px;
    height: 150px;
    bottom: -50px;
    left: -50px;
    animation: floatAnimation 15s infinite alternate-reverse ease-in-out;
}

@keyframes floatAnimation {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

/* Animation des éléments au défilement */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-element.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Points forts visuels */
.highlight-points {
    margin-top: 2rem;
}

.highlight-point {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.point-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1) 0%, rgba(255, 183, 51, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: #FFA500;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.highlight-point:hover .point-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 183, 51, 0.2) 100%);
}

.point-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}

/* Media Queries */
@media (max-width: 992px) {
    .domain-feature-showcase {
        padding: 5rem 0;
        background: #FFFFFF;
    }
    
    .domain-feature-showcase:nth-child(even) {
        background: #FAFAFA;
    }
    
    .decorative-line {
        display: none;
    }
    
    .showcase-title {
        font-size: 2.5rem;
    }
    
    .illustration-container {
        margin-top: 3rem;
    }
}

@media (max-width: 768px) {
    .domain-feature-showcase {
        padding: 4rem 0;
    }
    
    .showcase-title {
        font-size: 2rem;
        text-align: center;
        display: block;
    }
    
    .showcase-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .showcase-badge {
        display: table;
        margin: 0 auto 1.5rem;
    }
    
    .showcase-paragraph {
        text-align: center;
        padding-left: 0;
        border-left: none;
    }
    
    .highlight-points {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .showcase-action {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .showcase-title {
        font-size: 1.75rem;
    }
    
    .showcase-paragraph {
        font-size: 1rem;
    }
    
    .showcase-button {
        width: 100%;
        justify-content: center;
    }
}



























/* Section FAQ Premium - Domain register page - Style SaaS */
.faq-premium-section {
    position: relative;
    padding: 7rem 0;
    background: linear-gradient(to bottom, #FFFFFF, #FAFAFA);
    overflow: hidden;
}

/* Éléments de décoration d'arrière-plan */
.faq-decoration {
    position: absolute;
    z-index: 0;
    opacity: 0.5;
}

.faq-decoration-1 {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -150px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.03) 0%, rgba(255, 165, 0, 0) 70%);
    border-radius: 50%;
    transform: rotate(-15deg);
}

.faq-decoration-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -150px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
    border-radius: 50%;
}

.faq-decoration-dots {
    position: absolute;
    width: 200px;
    height: 200px;
    right: 5%;
    top: 30%;
    background-image: radial-gradient(rgba(255, 165, 0, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    opacity: 0.3;
}

/* En-tête de section */
.faq-header {
    position: relative;
    margin-bottom: 4rem;
    z-index: 1;
}

.faq-title-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.faq-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #582D1D;
    position: relative;
    display: inline-block;
}

.faq-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FFA500, #FFB733);
    border-radius: 4px;
    transform: scaleX(0.7);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.faq-title-wrapper:hover .faq-title::after {
    transform: scaleX(1);
}

.faq-subtitle {
    font-size: 1.1rem;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Nouveau conteneur d'accordéon */
.faq-accordion-container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: hidden;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.faq-accordion-container .accordion {
    background: transparent;
    border: none;
}

/* Style des items d'accordéon */
.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    background-color: white;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:hover {
    background-color: rgba(255, 165, 0, 0.02);
}

/* En-tête de question */
.faq-question-header {
    padding: 1.5rem 2rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333333;
    padding-right: 2rem;
    position: relative;
    margin: 0;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:focus {
    outline: none;
}

.faq-item:hover .faq-question {
    color: #FFA500;
}

/* Icône d'expansion */
.faq-icon {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: #FFA500;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.faq-icon::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.faq-icon::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.faq-question[aria-expanded="true"] ~ .faq-icon::after {
    transform: translateX(-50%) scaleY(0);
}

.faq-question[aria-expanded="true"] {
    color: #FFA500;
    font-weight: 600;
}

/* Contenu de réponse */
.faq-answer {
    padding: 0 2rem 1.5rem;
    color: #666666;
    line-height: 1.7;
    font-size: 1rem;
}

.faq-answer p {
    margin-bottom: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: #FFA500;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.faq-answer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #FFA500;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.faq-answer a:hover {
    color: #582D1D;
}

.faq-answer a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Bouton d'exploration supplémentaire */
.faq-more-help {
    text-align: center;
    margin-top: 3rem;
}

.faq-help-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: white;
    color: #582D1D;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    border: 2px solid #FFA500;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.1);
}

.faq-help-button:hover {
    background-color: #FFA500;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.2);
}

.faq-button-icon {
    transition: transform 0.3s ease;
}

.faq-help-button:hover .faq-button-icon {
    transform: translateX(4px);
}

/* Animation de dévoilement */
.faq-item-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.faq-item-anim.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Médias requêtes */
@media (max-width: 992px) {
    .faq-premium-section {
        padding: 5rem 0;
    }
    
    .faq-title {
        font-size: 2.2rem;
    }
    
    .faq-accordion-container {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .faq-question-header {
        padding: 1.25rem 1.5rem;
    }
    
    .faq-question {
        font-size: 1rem;
        padding-right: 1.5rem;
    }
    
    .faq-icon {
        right: 1.5rem;
        width: 18px;
        height: 18px;
    }
    
    .faq-answer {
        padding: 0 1.5rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .faq-decoration-1,
    .faq-decoration-2 {
        display: none;
    }
}

@media (max-width: 576px) {
    .faq-title {
        font-size: 1.8rem;
    }
    
    .faq-subtitle {
        font-size: 1rem;
    }
    
    .faq-help-button {
        width: 90%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
}























/* Style Premium pour la section de recherche de domaine */
.domain-registiration-hero.premium-hero {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    position: relative;
    overflow: hidden;
}

/* Éléments décoratifs */
.hero-decoration {
    position: absolute;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

.hero-decoration-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0) 70%);
    border-radius: 50%;
    transform: rotate(-15deg);
}

.hero-decoration-2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.04) 0%, rgba(88, 45, 29, 0) 70%);
    border-radius: 50%;
}

.hero-decoration-dots {
    position: absolute;
    width: 300px;
    height: 300px;
    right: 5%;
    top: 40%;
    background-image: radial-gradient(rgba(255, 165, 0, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
    opacity: 0.15;
}

/* Badge premium */
.premium-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #582D1D;
    background-color: rgba(255, 165, 0, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 165, 0, 0.2);
}

.premium-title {
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.premium-subtitle {
    line-height: 1.7;
}

/* Conteneur de recherche amélioré */
.premium-search-container {
    position: relative;
    z-index: 2;
}

.premium-search-wrapper {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.premium-search-wrapper:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.premium-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1.25rem;
    color: #FFA500;
    font-size: 1.25rem;
    z-index: 3;
}

.premium-search-input {
    flex: 1;
    height: 50px;
    border: none;
    background: transparent;
    padding-left: 3.5rem;
    font-size: 1rem;
    color: #333333;
    width: 100%;
}

.premium-search-input:focus {
    outline: none;
}

.premium-search-input::placeholder {
    color: #999999;
}

.premium-search-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%) !important;
    color: white !important;
    border: none !important;
    height: 50px;
    border-radius: 50px !important;
    padding: 0 2rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    cursor: pointer;
    overflow: hidden;
}

.premium-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3) !important;
}

.button-text {
    position: relative;
    z-index: 1;
}

.button-icon {
    margin-left: 0.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.premium-search-button:hover .button-icon {
    transform: translateX(3px);
}

/* CAPTCHA container */
.premium-captcha-container {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.premium-captcha-text {
    color: #666666;
    margin-bottom: 1rem;
}

.premium-captcha-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.premium-captcha-input {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    max-width: 150px;
    display: inline-block;
}

/* Extensions populaires */
.premium-extensions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.premium-extension {
    display: inline-block;
    background-color: white;
    border-radius: 50px;
    padding: 0.4rem 0.9rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 0.875rem;
    font-weight: 600;
    color: #582D1D;
    cursor: pointer;
}

.premium-extension:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 165, 0, 0.2);
}

/* Texte d'aide */
.premium-help-text {
    margin-top: 1.5rem;
    color: #666666;
}

.premium-help-link {
    color: #FFA500;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.premium-help-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #FFA500;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.premium-help-link:hover {
    color: #582D1D;
}

.premium-help-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Médias requêtes pour la responsivité */
@media (max-width: 992px) {
    .premium-search-button {
        padding: 0 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .premium-search-wrapper {
        flex-direction: column;
        padding: 0.75rem;
        border-radius: 1rem;
    }
    
    .premium-search-icon {
        display: none;
    }
    
    .premium-search-input {
        width: 100%;
        padding-left: 1.5rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }
    
    .premium-search-button {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        bottom: auto;
    }
    
    .hero-decoration-1,
    .hero-decoration-2 {
        display: none;
    }
}

@media (max-width: 576px) {
    .premium-badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.85rem;
    }
    
    .premium-extension {
        padding: 0.3rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* Style Premium SaaS pour la section héros de recherche de domaine */
.domain-registiration-hero {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9F9FA 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Éléments décoratifs subtils */
.domain-registiration-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -150px;
    right: -150px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.04) 0%, rgba(255, 165, 0, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.domain-registiration-hero::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

/* Amélioration du contenu héros */
.domain-registiration-hero .hero-content-2 {
    position: relative;
}

/*
.domain-registiration-hero .hero-content-2::before {
    content: "NOMS DE DOMAINE";
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #582D1D;
    background-color: rgba(255, 165, 0, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 165, 0, 0.2);
    width: fit-content;
    margin: 0 auto 1.5rem;
}
*/

.domain-registiration-hero .coodiv-text-5 {
    margin-bottom: 1.25rem;
    line-height: 1.3;
    position: relative;
}

.domain-registiration-hero .coodiv-text-5::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #FFA500 0%, rgba(255, 165, 0, 0.3) 100%);
    margin: 1rem auto 0;
    border-radius: 3px;
}

.domain-registiration-hero .coodiv-text-9 {
    max-width: 85%;
    margin: 0 auto;
    line-height: 1.7;
}

/* Amélioration de la barre de recherche */
.domain-registiration-hero .domain-search {
    background-color: #FFFFFF;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    position: relative;
    padding: 5px;
}

.domain-registiration-hero .domain-search:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.domain-registiration-hero .domain-search-input-header {
    height: 50px;
    padding-left: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFA500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M2 12h20'%3E%3C/path%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 20px;
    transition: all 0.3s ease;
    border: none;
}

.domain-registiration-hero .domain-search-input-header:focus {
    outline: none;
    box-shadow: none;
}

.domain-registiration-hero .domain-search-input-header::placeholder {
    color: #999999;
    transition: all 0.3s ease;
}

.domain-registiration-hero .domain-search-input-header:focus::placeholder {
    opacity: 0.7;
}

/* Bouton de recherche amélioré */
.domain-registiration-hero .btn-black.domain-search-button-header {
    background: linear-gradient(135deg, #FFA500 0%, #FFB733 100%) !important;
    border-radius: 50px !important;
    border: none !important;
    height: 50px;
    padding: 0 30px !important;
    font-weight: 600;
    color: white !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    top: 5px;
    bottom: 5px;
}

.domain-registiration-hero .btn-black.domain-search-button-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3);
}

.domain-registiration-hero .btn-black.domain-search-button-header::after {
    content: "\F054";
    font-family: "Feather" !important;
    margin-left: 8px;
    font-size: 14px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.domain-registiration-hero .btn-black.domain-search-button-header:hover::after {
    transform: translateX(3px);
}

/* Captcha container amélioré */
.domain-registiration-hero .captcha-container {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.domain-registiration-hero .default-captchaimage p {
    color: #666666;
    margin-bottom: 1rem;
}

.domain-registiration-hero .default-captchaimage img {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-right: 10px;
}

.domain-registiration-hero .default-captchaimage .form-control {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-width: 150px;
    display: inline-block;
    transition: all 0.3s ease;
}

.domain-registiration-hero .default-captchaimage .form-control:focus {
    border-color: #FFA500;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1);
    outline: none;
}

/* Extensions populaires */
.domain-registiration-hero .extensions-showcase {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.domain-registiration-hero .extension-item {
    display: inline-block;
    background-color: white;
    border-radius: 50px;
    padding: 8px 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 14px;
    font-weight: 600;
    color: #582D1D;
    cursor: pointer;
}

.domain-registiration-hero .extension-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 165, 0, 0.2);
}

/* Texte d'aide amélioré */
.domain-registiration-hero .coodiv-text-11 {
    margin-top: 20px;
    color: #666666;
}

.domain-registiration-hero .alert-link {
    color: #FFA500;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.domain-registiration-hero .alert-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #FFA500;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.domain-registiration-hero .alert-link:hover {
    color: #582D1D;
}

.domain-registiration-hero .alert-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Ajustements responsive */
@media (max-width: 992px) {
    .domain-registiration-hero .btn-black.domain-search-button-header {
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {
    .domain-registiration-hero .domain-search {
        flex-direction: column;
        display: flex;
        padding: 15px;
        border-radius: 16px;
    }
    
    .domain-registiration-hero .domain-search-input-header {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding-left: 15px;
        background-image: none;
    }
    
    .domain-registiration-hero .btn-black.domain-search-button-header {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        bottom: auto;
    }
    
    .domain-registiration-hero::before,
    .domain-registiration-hero::after {
        display: none;
    }
}

@media (max-width: 576px) {
    /*.domain-registiration-hero .hero-content-2::before {
        font-size: 0.7rem;
        padding: 0.35rem 0.85rem;
    }*/
    
    .domain-registiration-hero .coodiv-text-5 {
        font-size: 1.8rem;
    }
    
    .domain-registiration-hero .extension-item {
        padding: 6px 12px;
        font-size: 13px;
    }
}


















































































 

































/* Widget Témoignages */
/* Styles pour la section de témoignages */
:root {
    --primary: #FFA500;
    --primary-dark: #E67E00;
    --primary-light: #FFB733;
    --secondary: #582D1D;
    --secondary-light: #7D4B36;
    --text-dark: #333333;
    --text-muted: #6C757D;
    --transition-speed: 0.3s;
    --bg-light: #FFFAF5;
    --card-bg: #FFFFFF;
}

.testimonials-section {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
    background-color: var(--bg-light);
}

.section-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 165, 0, 0.05) 2px, transparent 2px);
    background-size: 30px 30px;
    z-index: 0;
    opacity: 0.8;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 25px;
    margin-bottom: 15px;
}

.section-header {
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
    position: relative;
}

.title-underline {
    height: 4px;
    width: 70px;
    background: linear-gradient(to right, var(--primary-light), var(--primary-dark));
    margin: 0 auto 25px;
    border-radius: 2px;
}

.section-description {
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.trust-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.rating-stars {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 5px;
}

.rating-score {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark);
}

.rating-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* Carrousel de témoignages */
.testimonials-carousel {
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
    padding: 30px 0;
    z-index: 2;
}

.carousel-slides {
    display: flex;
    margin: 0 -15px;
}

.testimonial-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 30px;
    margin: 15px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
}

.testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(230,126,0,0.1);
    border-color: rgba(255,165,0,0.1);
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: flex-start;
}

.customer {
    display: flex;
    align-items: center;
}

.customer-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 3px solid white;
    position: relative;
}

.customer-image:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.customer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.customer-info {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.star-rating {
    color: var(--primary);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.testimonial-date {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.testimonial-content {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
    position: relative;
}

.testimonial-text:before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 24px;
    color: rgba(255,165,0,0.08);
    z-index: -1;
}

/* Product recommendation section */
.product-recommendation {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    font-size: 13px;
}

.product-label {
    color: var(--text-muted);
    margin-right: 10px;
}

.product-name {
    color: var(--primary-dark);
    font-weight: 600;
    position: relative;
    padding: 3px 10px;
    background: rgba(255,165,0,0.08);
    border-radius: 4px;
}

/* Navigation controls */
.testimonial-controls {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.control-btn {
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    cursor: pointer;
    color: var(--primary-dark);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.control-btn:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 5px 15px rgba(230,126,0,0.2);
    transform: translateY(-2px);
}

/* Trust badges */
.trust-badges {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    margin: 0 15px 10px;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.badge-icon {
    margin-right: 8px;
    color: var(--primary);
    font-size: 18px;
}

.badge-text {
    font-size: 14px;
    font-weight: 600;
}

/* Animation effects */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.testimonial-item {
    animation: fadeInUp 0.6s both;
}

.testimonial-item:nth-child(2) {
    animation-delay: 0.1s;
}

.testimonial-item:nth-child(3) {
    animation-delay: 0.2s;
}

.testimonial-item:nth-child(4) {
    animation-delay: 0.3s;
}

.testimonial-item:nth-child(5) {
    animation-delay: 0.4s;
}

/* Slick carousel overrides */
.testimonials-carousel .slick-list {
    overflow: hidden;
    margin: 0 -15px;
}

.testimonials-carousel .slick-track {
    display: flex;
}

.testimonials-carousel .slick-slide {
    height: inherit;
    /*padding: 0 15px;*/
}

.testimonials-carousel .slick-dots {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.testimonials-carousel .slick-dots li {
    margin: 0 6px;
}

.testimonials-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: rgba(230,126,0,0.15);
    font-size: 0;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-carousel .slick-dots li.slick-active button {
    background-color: var(--primary);
    transform: scale(1.2);
}

/* Responsive styles */
@media (max-width: 1199px) {
    .testimonial-item {
        flex: 0 0 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
}

@media (max-width: 767px) {
    .testimonial-item {
        flex: 0 0 calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .testimonial-item {
        padding: 25px;
    }
    
    .control-btn {
        width: 40px;
        height: 40px;
    }
    
    .trust-badge {
        margin: 0 5px 10px;
        padding: 6px 12px;
    }
}


































/* CSS pour améliorer la page de transfert de domaine - Version corrigée pour éviter les conflits */
/* Variables basées sur le système de design Safaricloud */
:root {
    --sf-color-primary: #FFA500;
    --sf-color-primary-light: #FFB733;
    --sf-color-primary-dark: #E67E00;
    --sf-color-secondary: #582D1D;
    --sf-color-secondary-light: #7D4B36;
    --sf-color-gray: #F8F9FA;
    --sf-color-white: #FFFFFF;
    --sf-border-radius: 12px;
    --sf-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --sf-transition: all 0.3s ease;
}

/* Éléments de fond - Sélecteurs plus spécifiques */
#order-standard_cart.sf-domain-transfer-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#order-standard_cart .sf-bg-element {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

#order-standard_cart .sf-bg-element-1 {
    top: 5%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.03) 0%, rgba(255, 165, 0, 0) 70%);
}

#order-standard_cart .sf-bg-element-2 {
    bottom: 5%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(88, 45, 29, 0.02) 0%, rgba(88, 45, 29, 0) 70%);
}

/* Menu de navigation spécifique à cette page */
.sf-order-form-menu {
    box-shadow: var(--sf-box-shadow);
    transition: var(--sf-transition);
}

.sf-order-form-menu .sf-nav-tabs .nav-link {
    position: relative;
    padding: 15px 20px;
    transition: var(--sf-transition);
}

.sf-order-form-menu .sf-nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, var(--sf-color-primary), var(--sf-color-primary-light));
    transition: var(--sf-transition);
    transform: translateX(-50%);
}

.sf-order-form-menu .sf-nav-tabs .nav-link.active::after,
.sf-order-form-menu .sf-nav-tabs .nav-link:hover::after {
    width: 70%;
}

.sf-order-form-menu .sf-nav-tabs .nav-link:hover {
    color: var(--sf-color-primary-dark);
}


/* En-tête héro */
#order-standard_cart .sf-hero-content {
    margin-bottom: 50px;
}

#order-standard_cart .sf-badge-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#order-standard_cart .sf-premium-badge {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--sf-color-primary-light) 0%, var(--sf-color-primary) 100%);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.2);
}

#order-standard_cart .sf-title-big {
    font-size: 36px;
    font-weight: 700;
    color: var(--sf-color-secondary);
    margin-bottom: 20px;
    position: relative;
}

#order-standard_cart .sf-subtitle {
    max-width: 600px;
    color: #666;
    font-size: 18px;
    line-height: 1.6;
}

/* Formulaire de transfert */
#order-standard_cart .sf-domain-transfer-form {
    background: var(--sf-color-white);
    border-radius: var(--sf-border-radius);
    box-shadow: var(--sf-box-shadow);
    padding: 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

#order-standard_cart .sf-domain-transfer-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--sf-color-primary), var(--sf-color-primary-light));
}

#order-standard_cart .sf-form-content {
    position: relative;
    z-index: 1;
}

/* Indicateur d'étapes */
#order-standard_cart .sf-step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

#order-standard_cart .sf-step-indicator::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E6E6E6;
    z-index: 0;
}

#order-standard_cart .sf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 33.333%;
}

#order-standard_cart .sf-step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #E6E6E6;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 8px;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-step.active .sf-step-number {
    background: linear-gradient(135deg, var(--sf-color-primary) 0%, var(--sf-color-primary-light) 100%);
    color: white;
    box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
}

#order-standard_cart .sf-step-label {
    font-size: 14px;
    color: #999;
    text-align: center;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-step.active .sf-step-label {
    color: var(--sf-color-secondary);
    font-weight: 600;
}

/* Champs du formulaire */
#order-standard_cart .sf-form-inputs {
    margin-bottom: 30px;
}

#order-standard_cart .sf-form-group {
    margin-bottom: 25px;
}

#order-standard_cart .sf-form-group label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--sf-color-secondary);
    margin-bottom: 10px;
}

#order-standard_cart .sf-input-icon-wrapper {
    position: relative;
}

#order-standard_cart .sf-form-control {
    width: 100%;
    padding: 14px 20px;
    padding-right: 50px;
    border: 1px solid #E6E6E6;
    border-radius: var(--sf-border-radius);
    font-size: 16px;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-form-control:focus {
    border-color: var(--sf-color-primary);
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1);
    outline: none;
}

#order-standard_cart .sf-input-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #999;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-form-control:focus + .sf-input-icon {
    color: var(--sf-color-primary);
}

/* Tooltip */
#order-standard_cart .sf-tooltip {
    position: relative;
    margin-left: 8px;
    display: inline-block;
}

#order-standard_cart .sf-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E6E6E6;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-tooltip:hover .sf-tooltip-icon {
    background-color: var(--sf-color-primary-light);
    color: white;
}

#order-standard_cart .sf-tooltip-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    padding: 10px;
    background-color: white;
    border-radius: var(--sf-border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: var(--sf-transition);
}

#order-standard_cart .sf-tooltip:hover .sf-tooltip-content {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 10px);
}

/* Alerte */
#order-standard_cart .sf-alert-warning {
    background-color: #FFF5E6;
    border-left: 4px solid var(--sf-color-primary);
    padding: 15px;
    border-radius: var(--sf-border-radius);
    color: var(--sf-color-secondary);
    margin-bottom: 20px;
}

#order-standard_cart .sf-hidden {
    display: none;
}

/* Captcha */
#order-standard_cart .sf-captcha-container {
    margin-bottom: 25px;
}

#order-standard_cart .sf-captcha {
    background-color: var(--sf-color-gray);
    padding: 20px;
    border-radius: var(--sf-border-radius);
}

#order-standard_cart .sf-captcha p {
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--sf-color-secondary);
}

#order-standard_cart .sf-captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#order-standard_cart .sf-captcha-input {
    flex: 1;
    max-width: 150px;
}

/* Footer du formulaire */
#order-standard_cart .sf-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#order-standard_cart .sf-security-info {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
}

#order-standard_cart .sf-security-icon {
    margin-right: 8px;
    color: var(--sf-color-primary);
}

/* Bouton */
#order-standard_cart .sf-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--sf-transition);
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

#order-standard_cart .sf-button-primary {
    background: linear-gradient(to right, var(--sf-color-primary), var(--sf-color-primary-dark));
    color: white;
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.25);
}

#order-standard_cart .sf-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255, 165, 0, 0.3);
}

#order-standard_cart .sf-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: translateX(-100%);
    transition: all 0.6s ease;
}

#order-standard_cart .sf-button:hover::before {
    transform: translateX(100%);
}

#order-standard_cart .sf-button-arrow {
    transition: var(--sf-transition);
}

#order-standard_cart .sf-button:hover .sf-button-arrow {
    transform: translateX(5px);
}

/* Loader spinner */
#order-standard_cart .sf-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#order-standard_cart .sf-spinner {
    animation: sf-rotate 2s linear infinite;
    width: 20px;
    height: 20px;
}

#order-standard_cart .sf-spinner-path {
    stroke: white;
    stroke-linecap: round;
    animation: sf-dash 1.5s ease-in-out infinite;
}

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

@keyframes sf-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Section des caractéristiques */
#order-standard_cart .sf-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#order-standard_cart .sf-feature-item {
    background: linear-gradient(145deg, #FFFFFF 0%, #FAFAFA 100%);
    border-radius: var(--sf-border-radius);
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: var(--sf-transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

#order-standard_cart .sf-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 165, 0, 0.1);
}

#order-standard_cart .sf-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 165, 0, 0.08) 0%, rgba(255, 183, 51, 0.15) 100%);
    color: var(--sf-color-primary);
    margin: 0 auto 20px;
}

#order-standard_cart .sf-feature-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-color-secondary);
    margin-bottom: 15px;
}

#order-standard_cart .sf-feature-item p {
    font-size: 15px;
    color: #666;
    margin-bottom: 0;
}

/* Erreurs de formulaire */
#order-standard_cart .sf-input-error {
    border-color: #FF3B30 !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1) !important;
}

#order-standard_cart .sf-input-error-message {
    color: #FF3B30;
    font-size: 13px;
    margin-top: 5px;
    animation: sf-fadeIn 0.3s ease;
}

@keyframes sf-fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#order-standard_cart .sf-button.submitting {
    opacity: 0.8;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 992px) {
    #order-standard_cart .sf-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #order-standard_cart .sf-form-footer {
        flex-direction: column;
        gap: 20px;
    }
    
    #order-standard_cart .sf-security-info {
        order: 2;
    }
    
    #order-standard_cart .sf-features-grid {
        grid-template-columns: 1fr;
    }
    
    #order-standard_cart .sf-domain-transfer-form {
        padding: 30px 20px;
    }
    
    #order-standard_cart .sf-step-label {
        font-size: 12px;
    }
}












































































/* SAFARICLOUD PREMIUM PRICING - Style SaaS moderne */
/* SAFARICLOUD PREMIUM PRICING - Version améliorée et plus compacte */
.sc-pricing-section {
  padding: 80px 20px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,249,250,0.8) 100%);
  overflow: hidden;
}

.sc-pricing-bg-shape {
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.05) 0%, rgba(255,165,0,0) 70%);
  z-index: 0;
}

.sc-pricing-bg-shape-2 {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,45,29,0.03) 0%, rgba(88,45,29,0) 70%);
  z-index: 0;
}

.sc-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sc-pricing-header {
  text-align: center;
  margin-bottom: 60px;
}

.sc-pricing-eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #FFA500;
  margin-bottom: 16px;
  display: block;
}

.sc-pricing-title {
  font-size: 40px;
  color: #582D1D;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  background: linear-gradient(135deg, #582D1D 0%, #7A3F29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.sc-pricing-subtitle {
  font-size: 18px;
  color: #6C757D;
  max-width: 650px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.sc-pricing-guarantee {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255,165,0,0.08);
  border-radius: 30px;
  font-size: 14px;
  color: #582D1D;
  margin-top: 15px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.sc-pricing-guarantee svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: #FFA500;
}

/* Grille de prix */
.sc-pricing-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
  position: relative;
}

/* Carte individuelle - LARGEUR RÉDUITE */
.sc-pricing-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05), 0 1px 5px rgba(0,0,0,0.02);
  flex: 1;
  min-width: 220px;
  max-width: 320px; /* Taille réduite par rapport aux 360px précédents */
  padding: 35px 25px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  border: 1px solid rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sc-pricing-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.04);
}

/* Reflets sur les cartes */
.sc-pricing-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 16px 16px 0 0;
  z-index: 0;
  opacity: 0.6;
}

/* Carte populaire */
.sc-card-popular {
  position: relative;
  z-index: 2;
  box-shadow: 0 15px 35px rgba(255, 165, 0, 0.15), 0 5px 15px rgba(0,0,0,0.05);
}

.sc-card-popular:before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #FFA500, #FFB733);
  border-radius: 18px;
  z-index: -1;
}

.sc-card-popular:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: white;
  z-index: -1;
}

.sc-popular-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(90deg, #FFA500, #FFB733);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.sc-popular-tag svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  fill: currentColor;
}

/* En-tête de la carte */
.sc-card-header {
  text-align: center;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
  z-index: 1;
}

.sc-plan-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 15px;
  position: relative;
  transition: transform 0.3s ease;
}

.sc-pricing-card:hover .sc-plan-icon {
  transform: scale(1.05) rotate(-5deg);
}

.sc-plan-icon:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 15px;
  opacity: 0.6;
}

.sc-plan-icon svg {
  width: 30px;
  height: 30px;
  fill: #FFA500;
  filter: drop-shadow(0 2px 3px rgba(255, 165, 0, 0.3));
}

.sc-plan-name {
  font-size: 24px;
  color: #582D1D;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #582D1D 30%, #7A3F29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.sc-plan-desc {
  font-size: 15px;
  color: #6C757D;
  line-height: 1.5;
}

/* Section prix */
.sc-price-section {
  text-align: center;
  margin: 25px 0;
  position: relative;
}

.sc-price-section:before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.08) 0%, rgba(255, 165, 0, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}

.sc-price {
  font-size: 46px;
  color: #582D1D;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

.sc-price-currency {
  font-size: 18px;
  margin-right: 4px;
  margin-top: 10px;
  font-weight: 600;
  opacity: 0.8;
}

.sc-price-period {
  font-size: 14px;
  color: #6C757D;
  margin-top: 8px;
  display: block;
}

.sc-price-original {
  text-decoration: line-through;
  color: #A0AEC0;
  font-size: 18px;
  margin-top: 5px;
  display: block;
  font-weight: 500;
}

/* Liste de fonctionnalités */
.sc-features-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-grow: 1;
}

.sc-features-title {
  font-size: 15px;
  font-weight: 700;
  color: #582D1D;
  margin: 20px 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

.sc-features-title:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #FFA500, #FFB733);
  border-radius: 2px;
}

.sc-features-list li {
  padding: 8px 0;
  color: #6C757D;
  font-size: 14px;
  position: relative;
  padding-left: 28px;
  margin-bottom: 5px;
  transition: transform 0.2s ease;
}

.sc-features-list li:hover {
  transform: translateX(3px);
}

.sc-features-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%23FFA500' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.sc-feature-highlight {
  color: #582D1D;
  font-weight: 700;
}

/* Bouton d'action */
.sc-action-wrapper {
  margin-top: 25px;
}

.sc-action-btn {
  display: inline-block;
  width: 100%;
  background: #F8F9FA;
  color: #582D1D;
  border: 1px solid rgba(88, 45, 29, 0.2);
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
}

.sc-action-btn:hover {
  background: #FFF9ED;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-color: rgba(88, 45, 29, 0.3);
}

.sc-action-btn:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sc-action-btn:hover:before {
  opacity: 1;
  animation: sc-btn-simple-shine 1s ease forwards;
}

@keyframes sc-btn-simple-shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

.sc-btn-popular {
  background: linear-gradient(90deg, #FFA500, #FFB733);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 15px rgba(255, 165, 0, 0.2);
}

.sc-btn-popular:hover {
  background: linear-gradient(90deg, #FFB733, #FFA500);
  box-shadow: 0 12px 25px rgba(255, 165, 0, 0.3);
}

/* Badge garantie */
.sc-card-badge {
  position: absolute;
  top: 20px;
  right: 15px;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #582D1D;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sc-card-badge svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  fill: #FFA500;
}

/* Responsive */
@media (max-width: 992px) {
  .sc-pricing-grid {
    flex-wrap: wrap;
  }
  
  .sc-pricing-card {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
  
  .sc-card-popular {
    order: -1;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .sc-pricing-title {
    font-size: 32px;
  }
  
  .sc-pricing-card {
    flex: 0 0 100%;
    max-width: 400px;
    margin: 0 auto 20px;
  }
}

/* Styles pour le switch de facturation */
.sc-pricing-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-switch-label {
  font-size: 15px;
  color: #6C757D;
  padding: 0 10px;
}

.sc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0 5px;
}

.sc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E2E8F0;
  transition: .4s;
  border-radius: 34px;
}

.sc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sc-billing-toggle:checked + .sc-toggle-slider {
  background-color: #FFA500;
}

.sc-billing-toggle:checked + .sc-toggle-slider:before {
  transform: translateX(26px);
}

.sc-billing-badge {
  background: #FFA500;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(255, 165, 0, 0.3);
}

.sc-billing-badge svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  fill: currentColor;
}

@media (max-width: 500px) {
  .sc-pricing-switch {
    flex-direction: column;
    gap: 8px;
  }
  
  .sc-billing-badge {
    margin-left: 0;
  }
}








































/* Styles pour la section Hero améliorée - hebergement web cpanel */
#hebergement-web-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9ED 100%);
  padding: 80px 0;
  overflow: hidden;
}

.sc-hero-bg-shape {
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.05) 0%, rgba(255,165,0,0) 70%);
  z-index: 0;
}

.sc-hero-bg-shape-2 {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,45,29,0.03) 0%, rgba(88,45,29,0) 70%);
  z-index: 0;
}

.sc-hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f8f9fa' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: 0;
}

.sc-hero-badge {
  display: inline-block;
  background: rgba(255, 165, 0, 0.1);
  color: #582D1D;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 15px;
}

.sc-hero-title {
  font-size: 42px;
  font-weight: 800;
  color: #582D1D;
  line-height: 1.2;
  margin-bottom: 24px;
}

.sc-hero-highlight {
  position: relative;
  color: #FFA500;
  display: inline-block;
}

.sc-hero-highlight:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0) 100%);
  border-radius: 3px;
}

.sc-hero-subtitle {
  font-size: 18px;
  color: #6C757D;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 500px;
}

.sc-hero-features {
  margin-bottom: 30px;
}

.sc-feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sc-check-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23FFA500' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

.sc-feature-item span {
  font-size: 16px;
  color: #6C757D;
}

.sc-feature-item strong {
  color: #582D1D;
  font-weight: 600;
}

.sc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.sc-btn-primary {
  display: inline-block;
  background: linear-gradient(90deg, #FFA500, #FFB733);
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 15px rgba(255, 165, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sc-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(255, 165, 0, 0.3);
  color: white;
  text-decoration: none;
}

.sc-btn-primary:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sc-btn-primary:hover:before {
  opacity: 1;
  animation: sc-btn-shine 1s ease forwards;
}

@keyframes sc-btn-shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

.sc-price-tag {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
  font-weight: 500;
}

.sc-btn-secondary {
  display: inline-block;
  background: white;
  color: #582D1D;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(88, 45, 29, 0.2);
  transition: all 0.3s ease;
}

.sc-btn-secondary:hover {
  background: #FFF9ED;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  color: #582D1D;
  text-decoration: none;
}

.sc-hero-support {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6C757D;
  margin-top: 16px;
}

.sc-hero-support a {
  color: #FFA500;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed;
}

.sc-hero-support a:hover {
  color: #E67E00;
}

.sc-hero-image {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sc-hero-image img {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
  transform: perspective(1000px) rotateY(-5deg);
  transition: all 0.5s ease;
}

.sc-hero-image:hover img {
  transform: perspective(1000px) rotateY(0deg);
}

.sc-float-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.sc-badge-uptime {
  top: 15%;
  right: 0;
  animation: float 3s ease-in-out infinite;
}

.sc-badge-tech {
  bottom: 20%;
  left: 5%;
  animation: float 4s ease-in-out infinite;
}

.sc-badge-support {
  top: 50%;
  right: 10%;
  animation: float 3.5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.sc-badge-value {
  font-size: 20px;
  font-weight: 700;
  color: #582D1D;
}

.sc-badge-label {
  font-size: 12px;
  color: #6C757D;
  margin-top: 4px;
}

.sc-badge-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

/* Responsive */
@media (max-width: 992px) {
  .sc-hero-title {
    font-size: 36px;
  }
  
  .sc-hero-image {
    margin-top: 40px;
  }
  
  .sc-float-badge {
    display: none;
  }
}

@media (max-width: 576px) {
  .sc-hero-title {
    font-size: 30px;
  }
  
  .sc-hero-actions {
    flex-direction: column;
  }
  
  .sc-btn-primary, .sc-btn-secondary {
    width: 100%;
    text-align: center;
  }
}

.sc-hero-title {
  font-family: "Proxima Nova", Arial, sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #582D1D;
}

@media (max-width: 576px) {
  .sc-hero-title {
    font-size: 30px;
    letter-spacing: -0.3px;
  }
}

.sc-hero-title {
    font-family: "Proxima Nova", sans-serif;
    font-weight: 600;
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -1.7px;
  background: linear-gradient(135deg, #582D1D 0%, #7A3F29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}




































/* Styles pour la section cPanel Features */
.sc-feature-section {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF9ED 100%);
  overflow: hidden;
  width:100%;
}

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.sc-bg-shape {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.sc-bg-shape-1 {
  top: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0) 70%);
}

.sc-bg-shape-2 {
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(88, 45, 29, 0.04) 0%, rgba(88, 45, 29, 0) 70%);
}

.sc-bg-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f8f9fa' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
  z-index: 0;
}

.sc-section-heading {
  position: relative;
  margin-bottom: 40px;
}

.sc-section-badge {
  display: inline-block;
  background: rgba(255, 165, 0, 0.1);
  color: #582D1D;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.sc-section-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #582D1D;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.sc-highlight {
  color: #FFA500;
  position: relative;
}

.sc-highlight:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0) 100%);
  border-radius: 2px;
}

.sc-section-subtitle {
  font-size: 18px;
  color: #6C757D;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 550px;
}

/* Cartes des fonctionnalités */
.sc-features-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sc-feature-card {
  display: flex;
  align-items: flex-start;
  padding: 25px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

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

.sc-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 12px;
  margin-right: 20px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.sc-feature-icon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 12px 12px 0 0;
}

.sc-feature-content {
  flex: 1;
}

.sc-feature-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #582D1D;
  margin-bottom: 10px;
}

.sc-feature-desc {
  font-size: 15px;
  color: #6C757D;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Illustration */
.sc-illustration-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px;
  perspective: 1000px;
}

.sc-browser-frame {
  width: 100%;
  max-width: 550px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: all 0.5s ease;
  position: relative;
  z-index: 1;
}

.sc-illustration-wrapper:hover .sc-browser-frame {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.sc-browser-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
}

.sc-browser-buttons {
  display: flex;
  gap: 6px;
  margin-right: 15px;
}

.sc-browser-buttons span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sc-browser-buttons span:nth-child(1) {
  background: #FF5F57;
}

.sc-browser-buttons span:nth-child(2) {
  background: #FEBC2E;
}

.sc-browser-buttons span:nth-child(3) {
  background: #27C840;
}

.sc-browser-address {
  flex: 1;
  background: white;
  border-radius: 5px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #6C757D;
  font-size: 13px;
}

.sc-browser-url {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sc-browser-url svg {
  color: #582D1D;
  opacity: 0.6;
}

.sc-browser-content {
  position: relative;
  height: 400px;
  overflow: hidden;
}

/* Interface cPanel */
.sc-cpanel-ui {
  display: flex;
  height: 100%;
}

.sc-cpanel-sidebar {
  width: 80px;
  background: #313131;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.sc-cpanel-logo {
  margin-bottom: 30px;
}

.sc-cpanel-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  padding: 0 15px;
}

.sc-cpanel-navitem {
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.sc-cpanel-navitem.active {
  background: rgba(255, 165, 0, 0.5);
}

.sc-cpanel-main {
  flex: 1;
  background: #f5f5f5;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.sc-cpanel-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sc-cpanel-search {
  width: 250px;
  height: 40px;
  background: white;
  border-radius: 5px;
}

.sc-cpanel-user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
}

.sc-cpanel-modules {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.sc-cpanel-module-row {
  display: flex;
  gap: 15px;
}

.sc-cpanel-module {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 15px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-cpanel-module-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

.sc-cpanel-module-label {
  height: 10px;
  width: 70%;
  background: #e0e0e0;
  border-radius: 3px;
}

.sc-cpanel-charts {
  display: flex;
  gap: 15px;
  margin-top: auto;
}

.sc-cpanel-chart-container {
  flex: 2;
  background: white;
  border-radius: 8px;
  padding: 15px;
  height: 150px;
}

.sc-cpanel-chart-header {
  height: 10px;
  width: 50%;
  background: #e0e0e0;
  border-radius: 3px;
  margin-bottom: 15px;
}

.sc-cpanel-chart {
  height: 100px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.1) 0%, rgba(88, 45, 29, 0.1) 100%);
  border-radius: 5px;
  position: relative;
}

.sc-cpanel-chart:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #FFA500;
  transform: translateY(-50%);
  opacity: 0.5;
}

.sc-cpanel-stats-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sc-cpanel-stat {
  background: white;
  border-radius: 8px;
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.sc-cpanel-stat-label {
  height: 10px;
  width: 50%;
  background: #e0e0e0;
  border-radius: 3px;
}

.sc-cpanel-stat-value {
  height: 15px;
  width: 70%;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 165, 0, 0.05) 100%);
  border-radius: 3px;
}

.sc-browser-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 10px 10px 0 0;
  opacity: 0.5;
  pointer-events: none;
}

/* Éléments décoratifs */
.sc-decoration-item {
  position: absolute;
  z-index: 0;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
}

.sc-decoration-1 {
  top: 10%;
  right: -20px;
  animation: float 4s ease-in-out infinite;
}

.sc-decoration-2 {
  bottom: 15%;
  right: 10%;
  animation: float 5s ease-in-out infinite;
}

.sc-decoration-3 {
  top: 40%;
  left: -15px;
  animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Responsive */
@media (max-width: 992px) {
  .sc-feature-section {
    padding: 70px 0;
  }
  
  .sc-section-title {
    font-size: 32px;
  }
  
  .sc-browser-frame {
    max-width: 100%;
    margin-top: 40px;
  }
  
  .sc-decoration-item {
    display: none;
  }
}

@media (max-width: 768px) {
  .sc-feature-section {
    padding: 50px 0;
  }
  
  .sc-section-title {
    font-size: 28px;
  }
  
  .sc-feature-card {
    flex-direction: column;
  }
  
  .sc-feature-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .sc-browser-content {
    height: 300px;
  }
}



































/* Styles pour la section Features améliorée - Version marron premium */
.sc-features-section {
  position: relative;
  background: #582D1D;
  padding: 120px 0;
  overflow: hidden;
  color: #fff;
  width:100%;
}

.py-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.mb-70 {
  margin-bottom: 70px;
}

.sc-features-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(88, 45, 29, 0.95) 0%, rgba(70, 35, 20, 0.98) 100%);
  z-index: 0;
}

.sc-features-shape-1 {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.1) 0%, rgba(255, 165, 0, 0) 70%);
  z-index: 0;
}

.sc-features-shape-2 {
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}

.sc-features-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0v20L0 40V20zM40 0v20l-20 20V20L40 0z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: 0;
}

.sc-section-badge {
  display: inline-block;
  background: rgba(255, 165, 0, 0.15);
  color: #FFF;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.sc-section-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #FFF;
  line-height: 1.2;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

.sc-highlight {
  color: #FFA500;
  position: relative;
  display: inline-block;
}

.sc-highlight:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 8px;
  background: rgba(255, 165, 0, 0.2);
  border-radius: 4px;
  z-index: -1;
}

.sc-section-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Grille de fonctionnalités - 3 par ligne */
.sc-features-grid {
  margin-right: -15px;
  margin-left: -15px;
}

.sc-feature-box {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  padding: 40px 30px;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
}

.sc-feature-box:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 165, 0, 0.2);
}

.sc-feature-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sc-feature-box:hover:before {
  opacity: 1;
}

.sc-feature-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 60px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  font-family: "Proxima Nova", sans-serif;
  transition: all 0.4s ease;
}

.sc-feature-box:hover .sc-feature-number {
  color: rgba(255, 165, 0, 0.08);
}

.sc-feature-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 165, 0, 0.15);
  border-radius: 15px;
  margin-bottom: 25px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sc-feature-box:hover .sc-feature-icon {
  background: rgba(255, 165, 0, 0.25);
  transform: scale(1.1) rotate(-5deg);
}

.sc-feature-icon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 15px 15px 0 0;
}

.sc-feature-icon svg {
  width: 35px;
  height: 35px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition: all 0.4s ease;
}

.sc-feature-box:hover .sc-feature-icon svg {
  transform: scale(1.1);
}

.sf-feature-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 15px;
  position: relative;
}

.sc-feature-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Bouton CTA */
/*.sc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFA500;
  color: #fff;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(255, 165, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.sc-btn-primary:hover {
  background: #FFB733;
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(255, 165, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.sc-btn-primary svg {
  transition: transform 0.3s ease;
}

.sc-btn-primary:hover svg {
  transform: translateX(5px);
}

.sc-btn-primary:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.sc-btn-primary:hover:before {
  opacity: 1;
  animation: sc-btn-shine 1.2s ease forwards;
}

@keyframes sc-btn-shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}
*/

/* Responsive */
@media (max-width: 992px) {
  .py-120 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  
  .mb-70 {
    margin-bottom: 50px;
  }
  
  .sc-section-title {
    font-size: 32px;
  }
  
  .sc-feature-number {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .py-120 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .mb-70 {
    margin-bottom: 40px;
  }
  
  .sc-section-title {
    font-size: 28px;
  }
  
  .sc-section-subtitle {
    font-size: 16px;
  }
  
  .sc-feature-box {
    padding: 30px 25px;
  }
  
  .sc-feature-icon {
    width: 60px;
    height: 60px;
  }
  
  .sf-feature-title {
    font-size: 20px;
  }
}

.scc-section-title {
    color: #dfdfdf;
}

.scc-section-subtitle {
    color: #eaeaea;
}

.scc-section-badge {
    display: inline-block;
    background: rgba(255, 165, 0, 0.1);
    color: #e6e6e6;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}


































/* Styles pour la section FAQ améliorée */
.sc-faq-section {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(140deg, #FFFFFF 0%, #FFF9ED 100%);
  overflow: hidden;
  width:100%;
}

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mt-50 {
  margin-top: 50px;
}

/* Éléments décoratifs */
.sc-faq-shape-1 {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0) 70%);
  z-index: 0;
}

.sc-faq-shape-2 {
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 45, 29, 0.04) 0%, rgba(88, 45, 29, 0) 70%);
  z-index: 0;
}

.sc-faq-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f8f9fa' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
  z-index: 0;
}

.sc-section-badge {
  display: inline-block;
  background: rgba(255, 165, 0, 0.1);
  color: #582D1D;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.sc-section-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #582D1D;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.sc-highlight {
  color: #FFA500;
  position: relative;
}

.sc-highlight:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0) 100%);
  border-radius: 2px;
}

.sc-section-subtitle {
  font-size: 18px;
  color: #6C757D;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Conteneur FAQ */
.sc-faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sc-faq-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.sc-faq-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.03);
  transform: translateY(-3px);
}

.sc-faq-item.active {
  background: #FFF9ED;
  border-left: 3px solid #FFA500;
}

.sc-faq-header {
  padding: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sc-faq-header:hover {
  background: rgba(255, 165, 0, 0.03);
}

.sc-faq-item.active .sc-faq-header {
  border-bottom: 1px solid rgba(88, 45, 29, 0.05);
}

.sc-faq-question {
  font-family: "Proxima Nova", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #582D1D;
  margin: 0;
  padding-right: 20px;
  transition: all 0.3s ease;
}

.sc-faq-item.active .sc-faq-question {
  color: #FFA500;
}

.sc-faq-toggle {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.sc-faq-icon {
  position: absolute;
  width: 24px;
  height: 24px;
}

.sc-faq-icon:before,
.sc-faq-icon:after {
  content: '';
  position: absolute;
  background-color: #582D1D;
  transition: all 0.3s ease;
}

.sc-faq-icon:before {
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
}

.sc-faq-icon:after {
  top: 0;
  left: 11px;
  width: 2px;
  height: 24px;
}

.sc-faq-item.active .sc-faq-icon:before {
  background-color: #FFA500;
}

.sc-faq-item.active .sc-faq-icon:after {
  transform: rotate(90deg);
  opacity: 0;
}

.sc-faq-answer {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s ease;
}

.sc-faq-item.active .sc-faq-answer {
  padding: 20px 25px;
  max-height: 1000px;
}

.sc-faq-answer p {
  font-size: 15px;
  color: #6C757D;
  line-height: 1.6;
  margin: 0;
}

/* Bloc de support supplémentaire */
.sc-support-block {
  background: linear-gradient(135deg, #582D1D 0%, #7A3F29 100%);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(88, 45, 29, 0.15);
  color: white;
}

.sc-support-block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0v20L0 40V20zM40 0v20l-20 20V20L40 0z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.2;
  z-index: 0;
}

.sc-support-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin: 0 auto 20px;
  position: relative;
}

.sc-support-icon svg {
  color: #FFA500;
  width: 30px;
  height: 30px;
}

.sc-support-title {
  font-family: "Proxima Nova", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: white;
}

.sc-support-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 25px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.sf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sf-btn-secondary:hover {
  background: #FFA500;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.sf-btn-secondary svg {
  transition: transform 0.3s ease;
}

.sf-btn-secondary:hover svg {
  transform: translateX(3px);
}

/* JavaScript pour l'interaction de la FAQ */
/* 
document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.sc-faq-item');
  
  faqItems.forEach(item => {
    const header = item.querySelector('.sc-faq-header');
    
    header.addEventListener('click', () => {
      const isActive = item.classList.contains('active');
      
      // Fermer toutes les questions
      faqItems.forEach(faqItem => {
        faqItem.classList.remove('active');
      });
      
      // Ouvrir la question actuelle si elle n'était pas déjà ouverte
      if (!isActive) {
        item.classList.add('active');
      }
    });
  });
  
  // Ouvrir la première question par défaut
  if (faqItems.length > 0) {
    faqItems[0].classList.add('active');
  }
});
*/

/* Responsive */
@media (max-width: 992px) {
  .sc-faq-section {
    padding: 70px 0;
  }
  
  .sc-section-title {
    font-size: 32px;
  }
  
  .sc-support-block {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .sc-faq-section {
    padding: 50px 0;
  }
  
  .sc-section-title {
    font-size: 28px;
  }
  
  .sc-faq-question {
    font-size: 16px;
  }
  
  .sc-faq-header {
    padding: 15px 20px;
  }
  
  .sc-faq-item.active .sc-faq-answer {
    padding: 15px 20px;
  }
  
  .sc-support-title {
    font-size: 20px;
  }
}







































/* Style SAAS moderne pour l'espace client - Client Area - Dashboard 
.sc-client-dashboard {
  font-family: 'Proxima Nova', sans-serif;
  margin-top: 30px;
  margin-bottom: 60px;
}

/* Header section 
.sc-dashboard-header {
  margin-bottom: 30px;
}

.sc-welcome-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.sc-welcome-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.03) 0%, rgba(255, 165, 0, 0) 60%);
  border-radius: 100px;
  transform: translate(30%, -30%);
}

.sc-welcome-title {
  font-size: 22px;
  font-weight: 700;
  color: #2A3B47;
  margin-bottom: 8px;
}

.sc-welcome-title span {
  color: #FFA500;
}

.sc-welcome-subtitle {
  font-size: 14px;
  color: #6E7A85;
  margin-bottom: 0;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sc-btn i {
  margin-right: 6px;
}

.sc-btn-outline-primary {
  color: #FFA500;
  border: 1px solid #FFA500;
  background-color: transparent;
}

.sc-btn-outline-primary:hover {
  background-color: #FFA500;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);
}

/* Stats cards 
.sc-dashboard-stats {
  margin-bottom: 30px;
}

.sc-stat-card {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 20px;
  height: 100%;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.sc-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  border-color: rgba(255, 165, 0, 0.1);
}

.sc-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-color: rgba(255, 165, 0, 0.1);
  margin-right: 15px;
  flex-shrink: 0;
}

.sc-stat-icon i {
  font-size: 22px;
  color: #FFA500;
}

.sc-stat-content {
  flex-grow: 1;
}

.sc-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #2A3B47;
  margin-bottom: 5px;
  line-height: 1;
}

.sc-stat-label {
  font-size: 13px;
  color: #6E7A85;
  margin-bottom: 0;
}

/* Panels section 
.sc-panels-container {
  margin-bottom: 30px;
}

.sc-panels-row {
  margin-bottom: 20px;
}

.sc-panel {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.sc-panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f2f5;
  background-color: #fbfbfd;
}

.sc-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #2A3B47;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-panel-body {
  padding: 20px;
}

.sc-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sc-panel-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f5;
  color: #505C66;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sc-panel-item:last-child {
  border-bottom: none;
}

.sc-panel-item i {
  margin-right: 12px;
  color: #FFA500;
  width: 16px;
  text-align: center;
  font-size: 14px;
}

.sc-panel-item-label {
  flex-grow: 1;
  font-size: 14px;
}

.sc-panel-item:hover {
  background-color: #f8f9fa;
  color: #2A3B47;
  text-decoration: none;
}

.sc-panel-item.active {
  background-color: rgba(255, 165, 0, 0.05);
  color: #FFA500;
}

.sc-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 30px;
  background-color: #f0f2f5;
  color: #6E7A85;
}

/* Status badges 
.sc-status {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 30px;
}

.label-success, .sc-status-success {
  background-color: rgba(40, 199, 111, 0.1);
  color: #28c76f;
}

.label-warning, .sc-status-warning {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.label-danger, .sc-status-danger {
  background-color: rgba(234, 84, 85, 0.1);
  color: #ea5455;
}

.label-info, .sc-status-info {
  background-color: rgba(0, 207, 232, 0.1);
  color: #00cfe8;
}

.label-primary, .sc-status-primary {
  background-color: rgba(255, 165, 0, 0.1);
  color: #FFA500;
}

/* Sidebar section 
.sc-sidebar {
  margin-top: 0;
}

.sc-sidebar-widget {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.sc-sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: #2A3B47;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
  position: relative;
}

.sc-sidebar-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #FFA500;
}

.sc-announcement {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}

.sc-announcement:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sc-announcement-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.sc-announcement-title a {
  color: #2A3B47;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-announcement-title a:hover {
  color: #FFA500;
  text-decoration: none;
}

.sc-announcement-content {
  font-size: 13px;
  color: #6E7A85;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sc-shortcuts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sc-shortcuts li {
  margin-bottom: 10px;
}

.sc-shortcuts li:last-child {
  margin-bottom: 0;
}

.sc-shortcuts a {
  display: flex;
  align-items: center;
  color: #505C66;
  text-decoration: none;
  font-size: 14px;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.sc-shortcuts a i {
  width: 18px;
  margin-right: 10px;
  color: #FFA500;
  text-align: center;
}

.sc-shortcuts a:hover {
  background-color: rgba(255, 165, 0, 0.05);
  color: #FFA500;
  text-decoration: none;
  transform: translateX(3px);
}

/* Responsive adjustments 
@media (max-width: 767px) {
  .sc-welcome-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .sc-welcome-actions {
    margin-top: 15px;
  }
  
  .sc-stat-card {
    margin-bottom: 15px;
  }
}

/* Style SAAS moderne pour le formulaire de domaine - sans changer le HTML 
.sc-panel-body form {
  padding: 10px 0;
  margin: 0;
}

.sc-panel-body .input-group {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #eaeef1;
  margin: 0 !important;
  padding: 0 !important;
}

.sc-panel-body .form-control {
  height: auto;
  padding: 14px 20px;
  font-size: 14px;
  border: none;
  box-shadow: none;
  font-family: 'Proxima Nova', sans-serif;
  transition: all 0.2s ease;
  background-color: #fff;
}

.sc-panel-body .form-control:focus {
  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.2);
  z-index: 5;
}

.sc-panel-body .form-control::placeholder {
  color: #a0a8b0;
  font-size: 14px;
}

/* Style des boutons 
.sc-panel-body .input-group-btn,
.sc-panel-body .input-group-append {
  display: flex;
  overflow: hidden;
}

.sc-panel-body .btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: none;
  transition: all 0.3s ease;
  font-family: 'Proxima Nova', sans-serif;
  text-transform: none;
  height: auto;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton d'enregistrement 
.sc-panel-body .btn-success {
  background-color: #FFA500;
  color: white;
  box-shadow: none;
  border-radius: 0;
}

.sc-panel-body .btn-success:hover, 
.sc-panel-body .btn-success:focus {
  background-color: #e69500;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);
  z-index: 10;
}

/* Bouton de transfert 
.sc-panel-body .btn-default {
  background-color: #f8f9fa;
  color: #505C66;
  border-radius: 0;
  margin-left: 1px;
}

.sc-panel-body .btn-default:hover,
.sc-panel-body .btn-default:focus {
  background-color: #f1f3f5;
  color: #2A3B47;
  transform: translateY(-1px);
  z-index: 10;
}

/* Ajout d'icônes aux boutons en utilisant le pseudo-élément 
.sc-panel-body .btn-success::before {
  content: "\f002"; /* Icône de recherche 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 6px;
  font-size: 13px;
}

.sc-panel-body .btn-default::before {
  content: "\f362"; /* Icône de transfert 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 6px;
  font-size: 13px;
}

/* Responsive styles 
@media (max-width: 576px) {
  .sc-panel-body .input-group {
    flex-direction: column;
  }
  
  .sc-panel-body .form-control {
    border-radius: 10px 10px 0 0;
  }
  
  .sc-panel-body .input-group-btn,
  .sc-panel-body .input-group-append {
    width: 100%;
  }
  
  .sc-panel-body .btn {
    flex: 1;
    border-radius: 0;
  }
  
  .sc-panel-body .btn-success {
    border-bottom-left-radius: 10px;
  }
  
  .sc-panel-body .btn-default {
    border-bottom-right-radius: 10px;
  }
}

/* Animation subtile au focus du champ 
.sc-panel-body .form-control:focus + .input-group-btn .btn,
.sc-panel-body .form-control:focus + .input-group-append .btn {
  border-color: rgba(255, 165, 0, 0.3);
}

/* Design amélioré pour les validations 
.sc-panel-body .form-control.is-valid {
  background-color: rgba(40, 199, 111, 0.05);
  border-color: rgba(40, 199, 111, 0.3);
}

.sc-panel-body .form-control.is-invalid {
  background-color: rgba(234, 84, 85, 0.05);
  border-color: rgba(234, 84, 85, 0.3);
}
*/








































/* Base de Connaissances SAAS Premium 
.sc-knowledgebase-section {
  padding: 60px 0;
  position: relative;
}

/* Titre de section 
.sc-section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--secondary);
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.sc-section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--primary-gradient);
  border-radius: 3px;
}

/* Barre de recherche premium 
.sc-search-container {
  max-width: 700px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.sc-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.sc-search-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2), var(--shadow-md);
  transform: translateY(-2px);
}

.sc-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 18px;
  transition: all var(--transition-normal);
}

.sc-search-wrapper:focus-within .sc-search-icon {
  color: var(--primary);
}

.sc-search-input {
  flex: 1;
  height: 60px;
  border: none;
  background: transparent;
  padding: 0 140px 0 55px;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 400;
  outline: none;
}

.sc-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.sc-search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-gradient);
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 3px 8px rgba(255, 165, 0, 0.3);
}

.sc-search-button:hover {
  transform: translateY(-50%) translateX(-3px);
  box-shadow: 0 5px 12px rgba(255, 165, 0, 0.4);
}

/* Grille des catégories 
.sc-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cartes de catégories 
.sc-category-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.sc-category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 165, 0, 0.1);
}

.sc-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 40%;
  background: var(--primary-gradient);
  border-radius: 0 0 4px 0;
}

/* Icône de catégorie 
.sc-category-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-gradient);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  transition: all var(--transition-normal);
}

.sc-category-icon i {
  color: white;
  font-size: 22px;
}

.sc-category-card:hover .sc-category-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Contenu de la catégorie 
.sc-category-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sc-category-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 8px;
  text-decoration: none;
  transition: color var(--transition-normal);
}

.sc-category-title:hover {
  color: var(--primary);
  text-decoration: none;
}

.sc-category-meta {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.sc-category-count {
  background-color: rgba(255, 165, 0, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.sc-category-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  flex: 1;
}

/* Actions de catégorie 
.sc-category-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.sc-edit-button {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 165, 0, 0.3);
  transition: all var(--transition-normal);
  text-decoration: none;
}

.sc-edit-button:hover {
  background-color: rgba(255, 165, 0, 0.1);
  border-color: rgba(255, 165, 0, 0.5);
  color: var(--primary);
  text-decoration: none;
}

.sc-edit-button i {
  margin-right: 5px;
  font-size: 11px;
}

/* État vide 
.sc-empty-state {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  max-width: 600px;
  margin: 0 auto;
}

.sc-empty-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.sc-empty-icon i {
  font-size: 28px;
  color: var(--primary);
}

.sc-empty-message {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* Responsive 
@media (max-width: 768px) {
  .sc-section-title {
    font-size: 28px;
  }
  
  .sc-search-input {
    height: 55px;
    padding: 0 120px 0 50px;
    font-size: 15px;
  }
  
  .sc-search-button {
    padding: 8px 20px;
    font-size: 13px;
  }
  
  .sc-search-icon {
    left: 18px;
    font-size: 16px;
  }
  
  .sc-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .sc-category-card {
    padding: 25px;
  }
}

@media (max-width: 576px) {
  .sc-section-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .sc-search-container {
    margin-bottom: 40px;
  }
  
  .sc-search-input {
    height: 50px;
    padding: 0 100px 0 45px;
    font-size: 14px;
  }
  
  .sc-search-button {
    padding: 6px 16px;
    font-size: 12px;
  }
  
  .sc-search-icon {
    left: 15px;
    font-size: 15px;
  }
  
  .sc-categories-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .sc-category-card {
    padding: 20px;
  }
  
  .sc-category-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 15px;
  }
  
  .sc-category-icon i {
    font-size: 20px;
  }
  
  .sc-category-title {
    font-size: 17px;
  }
}
*/

/* Variables CSS avec préfixe pour isolation */
.msc-kb-root {
  --msc-primary: #FFA500;
  --msc-primary-light: #FFB733;
  --msc-primary-dark: #E67E00;
  --msc-secondary: #582D1D;
  --msc-secondary-light: #7A3F29;
  --msc-text-main: #333333;
  --msc-text-secondary: #6C757D;
  --msc-bg-light: #FFFFFF;
  --msc-bg-gray: #F8F9FA;
  --msc-success: #28A745;
  --msc-warning: #FFC107;
  --msc-danger: #DC3545;
  --msc-info: #0D6EFD;
  
  --msc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --msc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --msc-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);
  
  --msc-radius-sm: 8px;
  --msc-radius-md: 16px;
  --msc-radius-lg: 24px;
  --msc-radius-full: 9999px;
  
  --msc-transition-normal: all 0.3s ease;
  --msc-transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Reset des styles pour éviter les héritages indésirables */
.msc-kb-section, 
.msc-kb-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.msc-kb-section {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--msc-text-main);
  line-height: 1.5;
}

/* ===== HEADER SECTION ===== */
.msc-kb-header {
  text-align: center;
  margin-bottom: 3rem;
}

.msc-kb-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--msc-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.msc-kb-subtitle {
  font-size: 1.1rem;
  color: var(--msc-text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* ===== SEARCH BAR SECTION ===== */
.msc-kb-search-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto 3.5rem;
}

.msc-kb-search-wrapper {
  display: flex;
  align-items: stretch;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-lg);
  box-shadow: var(--msc-shadow-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--msc-transition-normal);
}

.msc-kb-search-wrapper:focus-within {
  box-shadow: 0 12px 30px rgba(255, 165, 0, 0.12);
  transform: translateY(-2px);
  border-color: rgba(255, 165, 0, 0.2);
}

.msc-kb-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  color: var(--msc-text-secondary);
  font-size: 1.25rem;
}

.msc-kb-search-input {
  flex: 1;
  height: 64px;
  padding: 0 1.5rem;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: var(--msc-text-main);
  outline: none !important;
  box-shadow: none !important;
}

.msc-kb-search-input::placeholder {
  color: #ADB5BD;
}

.msc-kb-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--msc-primary);
  color: white;
  padding: 0 2rem;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--msc-transition-normal);
  position: relative;
  overflow: hidden;
}

.msc-kb-search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0) 100%
  );
  transition: var(--msc-transition-normal);
}

.msc-kb-search-btn:hover {
  background-color: var(--msc-primary-dark);
}

.msc-kb-search-btn:hover::before {
  left: 100%;
}

.msc-kb-search-btn-text {
  position: relative;
  z-index: 1;
}

.msc-kb-search-btn-icon {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
}

/* ===== POPULAR TOPICS SECTION ===== */
.msc-kb-topics {
  text-align: center;
  margin-bottom: 4rem;
}

.msc-kb-topics-title {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
}

.msc-kb-topics-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--msc-primary);
  border-radius: 3px;
}

.msc-kb-topics-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
}

.msc-kb-topic-item {
  display: inline-block;
}

.msc-kb-topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background-color: rgba(255, 165, 0, 0.08);
  color: var(--msc-primary);
  border-radius: var(--msc-radius-full);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.msc-kb-topic-tag:hover {
  background-color: var(--msc-primary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3);
}

.msc-kb-topic-tag-icon {
  margin-right: 0.5rem;
  font-size: 0.875rem;
}

/* ===== CATEGORIES GRID ===== */
.msc-kb-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.msc-kb-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-sm);
  overflow: hidden;
  transition: var(--msc-transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.04);
  height: 100%;
}

.msc-kb-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: transparent;
  transition: var(--msc-transition-normal);
}

.msc-kb-category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--msc-shadow-md);
}

.msc-kb-category-card:hover::before {
  background-color: var(--msc-primary);
}

.msc-kb-category-header {
  display: flex;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 0;
}

.msc-kb-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 165, 0, 0.1);
  color: var(--msc-primary);
  border-radius: var(--msc-radius-sm);
  margin-right: 1rem;
  flex-shrink: 0;
  transition: var(--msc-transition-bounce);
}

.msc-kb-category-card:hover .msc-kb-category-icon {
  background-color: var(--msc-primary);
  color: white;
  transform: scale(1.05) rotate(5deg);
}

.msc-kb-category-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.msc-kb-category-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin-bottom: 0.75rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-category-title:hover {
  color: var(--msc-primary);
}

.msc-kb-category-meta {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.msc-kb-category-count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--msc-text-secondary);
}

.msc-kb-category-count-icon {
  font-size: 0.75rem;
  opacity: 0.8;
}

.msc-kb-category-description {
  color: var(--msc-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.msc-kb-category-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: auto;
}

.msc-kb-category-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--msc-primary);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-category-link:hover {
  gap: 0.75rem;
}

.msc-kb-category-link-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.msc-kb-category-link:hover .msc-kb-category-link-icon {
  transform: translateX(3px);
}

.msc-kb-category-edit {
  color: var(--msc-text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
  opacity: 0.7;
  transition: var(--msc-transition-normal);
}

.msc-kb-category-edit:hover {
  opacity: 1;
}

/* ===== EMPTY STATE ===== */
.msc-kb-empty {
  text-align: center;
  padding: 4rem 2rem;
  background-color: var(--msc-bg-gray);
  border-radius: var(--msc-radius-md);
  max-width: 600px;
  margin: 0 auto;
}

.msc-kb-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  color: var(--msc-text-secondary);
  opacity: 0.3;
}

.msc-kb-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin-bottom: 1rem;
}

.msc-kb-empty-message {
  color: var(--msc-text-secondary);
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.msc-kb-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--msc-secondary);
  color: white;
  padding: 0.875rem 1.5rem;
  border-radius: var(--msc-radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-contact-btn:hover {
  background-color: var(--msc-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ===== CTA SECTION ===== */
.msc-kb-cta {
  margin-top: 4rem;
  position: relative;
  border-radius: var(--msc-radius-md);
  overflow: hidden;
}

.msc-kb-cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, var(--msc-secondary) 0%, var(--msc-secondary-light) 100%);
  z-index: 1;
}

.msc-kb-cta-pattern {
  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.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 2;
}

.msc-kb-cta-content {
  position: relative;
  z-index: 3;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msc-kb-cta-text {
  color: white;
}

.msc-kb-cta-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.msc-kb-cta-description {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
}

.msc-kb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: white;
  color: var(--msc-secondary);
  padding: 0.875rem 2rem;
  border-radius: var(--msc-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--msc-transition-normal);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.msc-kb-cta-btn:hover {
  background-color: var(--msc-primary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.msc-kb-cta-btn-icon {
  font-size: 1.125rem;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
  .msc-kb-title {
    font-size: 2.25rem;
  }
  
  .msc-kb-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .msc-kb-cta-content {
    flex-direction: column;
    text-align: center;
  }
  
  .msc-kb-cta-text {
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .msc-kb-title {
    font-size: 2rem;
  }
  
  .msc-kb-search-input {
    height: 56px;
  }
  
  .msc-kb-search-wrapper {
    flex-direction: column;
  }
  
  .msc-kb-search-btn {
    width: 100%;
    padding: 1rem;
  }
  
  .msc-kb-category-card {
    max-width: 100%;
  }
  
  .msc-kb-cta-content {
    padding: 2rem;
  }
}

@media (max-width: 576px) {
  .msc-kb-section {
    padding: 2rem 1rem;
  }
  
  .msc-kb-title {
    font-size: 1.75rem;
  }
  
  .msc-kb-subtitle {
    font-size: 1rem;
  }
  
  .msc-kb-search-icon {
    display: none;
  }
  
  .msc-kb-cta-title {
    font-size: 1.5rem;
  }
  
  .msc-kb-cta-description {
    font-size: 1rem;
  }
}

/* Animation classes for JS */
.msc-kb-card-animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.msc-kb-icon-animated {
  transform: scale(1.1) rotate(5deg) !important;
}

.msc-kb-link-hover {
  transform: translateX(5px) !important;
}

.msc-kb-search-focused {
  box-shadow: 0 12px 30px rgba(255, 165, 0, 0.15), 0 0 0 2px rgba(255, 165, 0, 0.2) !important;
  border-color: rgba(255, 165, 0, 0.3) !important;
}








/* Styles pour la page de catégorie - Knowledgebase */

.msc-kb-category-header {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: rgba(255, 165, 0, 0.1);
  color: var(--msc-primary);
  border-radius: var(--msc-radius-sm);
  margin-right: 1.5rem;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.msc-kb-header-content {
  flex: 1;
}

.msc-kb-articles-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.msc-kb-article-card {
  display: flex;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-sm);
  overflow: hidden;
  transition: var(--msc-transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
}

.msc-kb-article-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--msc-shadow-md);
}

.msc-kb-article-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem;
  color: var(--msc-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.msc-kb-article-content {
  flex: 1;
  padding: 1.5rem 1.5rem 1.5rem 0;
}

.msc-kb-article-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin-bottom: 0.5rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
  display: block;
}

.msc-kb-article-title:hover {
  color: var(--msc-primary);
}

.msc-kb-article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.813rem;
  color: var(--msc-text-secondary);
}

.msc-kb-article-views {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.msc-kb-article-edit {
  margin-left: 1rem;
  color: var(--msc-text-secondary);
  text-decoration: none;
  opacity: 0.7;
  transition: var(--msc-transition-normal);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.msc-kb-article-edit:hover {
  opacity: 1;
}

.msc-kb-article-description {
  color: var(--msc-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.msc-kb-article-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--msc-primary);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-article-link:hover {
  gap: 0.75rem;
}

.msc-kb-article-link-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.msc-kb-article-link:hover .msc-kb-article-link-icon {
  transform: translateX(3px);
}

.msc-kb-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--msc-bg-light);
  color: var(--msc-secondary);
  padding: 0.875rem 1.5rem;
  border-radius: var(--msc-radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: var(--msc-transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.msc-kb-back-btn:hover {
  background-color: var(--msc-secondary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .msc-kb-category-header {
    flex-direction: column;
    text-align: center;
  }
  
  .msc-kb-header-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .msc-kb-article-card {
    flex-direction: column;
  }
  
  .msc-kb-article-icon {
    padding: 1rem 0 0 0;
    justify-content: center;
  }
  
  .msc-kb-article-content {
    padding: 1rem;
    text-align: center;
  }
  
  .msc-kb-article-meta {
    justify-content: center;
  }
}





/* ===== Page d'ARTICLE STYLES - Knowledgbase ===== */

.msc-kb-article-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Alert */
.msc-kb-alert {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: var(--msc-radius-md);
  margin-bottom: 2rem;
  background-color: var(--msc-bg-light);
  box-shadow: var(--msc-shadow-sm);
}

.msc-kb-alert-success {
  border-left: 4px solid var(--msc-success);
}

.msc-kb-alert-icon {
  color: var(--msc-success);
  font-size: 1.5rem;
  margin-right: 1rem;
}

.msc-kb-alert-content {
  color: var(--msc-text-main);
  font-weight: 500;
}

/* Breadcrumb */
.msc-kb-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.msc-kb-breadcrumb-item {
  color: var(--msc-text-secondary);
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-breadcrumb-item:hover {
  color: var(--msc-primary);
}

.msc-kb-breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--msc-text-secondary);
  opacity: 0.5;
  font-size: 0.625rem;
}

.msc-kb-breadcrumb-active {
  color: var(--msc-primary);
  font-weight: 500;
}

/* Article Header */
.msc-kb-article-header {
  position: relative;
  margin-bottom: 2rem;
}

.msc-kb-article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.msc-kb-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.msc-kb-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-primary);
  border-radius: var(--msc-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.msc-kb-article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.813rem;
  color: var(--msc-text-secondary);
}

.msc-kb-article-views, 
.msc-kb-article-likes, 
.msc-kb-article-date {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.msc-kb-article-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--msc-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* Article Actions */
.msc-kb-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.msc-kb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--msc-bg-light);
  color: var(--msc-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--msc-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-action-btn:hover {
  background-color: var(--msc-bg-gray);
  color: var(--msc-text-main);
  box-shadow: var(--msc-shadow-sm);
  transform: translateY(-2px);
}

.msc-kb-edit-btn {
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-primary);
}

.msc-kb-edit-btn:hover {
  background-color: var(--msc-primary);
  color: white;
}

/* Share Menu */
.msc-kb-share-menu {
  position: absolute;
  top: 100%;
  left: 100px;
  display: flex;
  flex-direction: column;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-md);
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: var(--msc-transition-normal);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-share-menu-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.msc-kb-share-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--msc-text-main);
  text-decoration: none;
  transition: var(--msc-transition-normal);
  font-size: 0.875rem;
}

.msc-kb-share-item:hover {
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-primary);
}

.msc-kb-share-twitter:hover { background-color: rgba(29, 161, 242, 0.1); color: #1da1f2; }
.msc-kb-share-facebook:hover { background-color: rgba(59, 89, 152, 0.1); color: #3b5998; }
.msc-kb-share-email:hover { background-color: rgba(66, 133, 244, 0.1); color: #4285f4; }

/* Table of Contents */
.msc-kb-article-toc-container {
  display: none;
  float: left;
  width: 280px;
  margin: 0 0 2rem 2rem;
}

.msc-kb-article-toc {
  position: sticky;
  top: 2rem;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-toc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

.msc-kb-toc-list {
  list-style: none;
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

.msc-kb-toc-item {
  margin-bottom: 0.75rem;
}

.msc-kb-toc-sub-item {
  padding-left: 1rem;
  position: relative;
}

.msc-kb-toc-sub-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 1px solid var(--msc-text-secondary);
  border-bottom: 1px solid var(--msc-text-secondary);
}

.msc-kb-toc-link {
  color: var(--msc-text-secondary);
  text-decoration: none;
  font-size: 0.813rem;
  transition: var(--msc-transition-normal);
  display: block;
}

.msc-kb-toc-link:hover {
  color: var(--msc-primary);
}

/* Article Content */
.msc-kb-article-content {
  margin-bottom: 3rem;
}

.msc-kb-article-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--msc-text-main);
}

.msc-kb-article-text h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-article-text h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin: 2rem 0 1rem;
}

.msc-kb-article-text p {
  margin-bottom: 1.25rem;
}

.msc-kb-article-text a {
  color: var(--msc-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--msc-transition-normal);
}

/*
.msc-kb-article-text a:hover {
  border-bottom-color: var(--msc-primary);
}
*/

.msc-kb-article-text ul, 
.msc-kb-article-text ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.msc-kb-article-text li {
  margin-bottom: 0.5rem;
}

.msc-kb-article-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--msc-radius-sm);
  margin: 1.5rem 0;
}

.msc-kb-article-text blockquote {
  background-color: var(--msc-bg-light-orange);
  border-left: 4px solid var(--msc-primary);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--msc-radius-sm) var(--msc-radius-sm) 0;
  color: var(--msc-secondary);
  font-style: italic;
}

.msc-kb-article-text pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 1.25rem;
  border-radius: var(--msc-radius-sm);
  overflow-x: auto;
  margin: 1.5rem 0;
}

.msc-kb-article-text code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.msc-kb-article-text pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.msc-kb-article-text table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

.msc-kb-article-text th {
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-secondary);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-article-text td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-article-text tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Article Rating */
.msc-kb-article-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.msc-kb-rating-question {
  font-weight: 500;
  color: var(--msc-secondary);
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.msc-kb-rating-form {
  display: flex;
  gap: 0.75rem;
}

.msc-kb-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--msc-radius-md);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: var(--msc-transition-normal);
  border: none;
  cursor: pointer;
}

.msc-kb-rating-yes {
  background-color: rgba(40, 167, 69, 0.1);
  color: var(--msc-success);
}

.msc-kb-rating-yes:hover {
  background-color: var(--msc-success);
  color: white;
}

.msc-kb-rating-no {
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--msc-danger);
}

.msc-kb-rating-no:hover {
  background-color: var(--msc-danger);
  color: white;
}

/* Related Articles */
.msc-kb-related-section {
  margin-bottom: 3rem;
}

.msc-kb-related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.msc-kb-related-article {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 1.25rem;
  background-color: var(--msc-bg-light);
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-sm);
  transition: var(--msc-transition-normal);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.msc-kb-related-article:hover {
  transform: translateY(-5px);
  box-shadow: var(--msc-shadow-md);
  border-color: var(--msc-primary);
}

.msc-kb-related-article-icon {
  color: var(--msc-primary);
  font-size: 1.25rem;
  margin-right: 1rem;
  margin-top: 0.25rem;
}

.msc-kb-related-article-content {
  flex: 1;
}

.msc-kb-related-article-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--msc-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.msc-kb-related-article:hover .msc-kb-related-article-title {
  color: var(--msc-primary);
}

.msc-kb-related-article-preview {
  font-size: 0.875rem;
  color: var(--msc-text-secondary);
  line-height: 1.5;
}

.msc-kb-related-article-edit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--msc-bg-light-orange);
  color: var(--msc-primary);
  border-radius: var(--msc-radius-full);
  font-size: 0.75rem;
  opacity: 0.8;
  transition: var(--msc-transition-normal);
}

.msc-kb-related-article-edit:hover {
  opacity: 1;
  background-color: var(--msc-primary);
  color: white;
  transform: scale(1.1);
}

/* Article Footer */
.msc-kb-article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.msc-kb-footer-actions {
  display: flex;
  gap: 0.75rem;
}

.msc-kb-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--msc-radius-md);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: var(--msc-transition-normal);
}

.msc-kb-back-btn {
  background-color: var(--msc-bg-light);
  color: var(--msc-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.msc-kb-back-btn:hover {
  background-color: var(--msc-bg-gray);
  color: var(--msc-text-main);
  transform: translateX(-3px);
}

.msc-kb-home-btn {
  background-color: var(--msc-bg-light);
  color: var(--msc-secondary);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.msc-kb-home-btn:hover {
  background-color: var(--msc-secondary);
  color: white;
}

.msc-kb-footer-edit-btn {
  background-color: var(--msc-primary);
  color: white;
}

.msc-kb-footer-edit-btn:hover {
  background-color: var(--msc-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--msc-shadow-primary);
}

/* Print Styles */
@media print {
  .msc-kb-breadcrumb,
  .msc-kb-article-actions,
  .msc-kb-article-rating,
  .msc-kb-related-section,
  .msc-kb-article-footer,
  .msc-kb-article-toc-container {
    display: none !important;
  }
  
  .msc-kb-article-section {
    padding: 0;
  }
  
  .msc-kb-article-title {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
  
  .msc-kb-article-text {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  
  .msc-kb-article-text a {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
  }
  
  .msc-kb-article-text a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* Responsive Styles */
@media (max-width: 992px) {
  .msc-kb-article-title {
    font-size: 1.875rem;
  }
  
  .msc-kb-article-toc-container {
    width: 240px;
  }
  
  .msc-kb-related-articles {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .msc-kb-article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .msc-kb-article-title {
    font-size: 1.625rem;
  }
  
  .msc-kb-article-toc-container {
    float: none;
    width: 100%;
    margin: 0 0 2rem 0;
  }
  
  .msc-kb-related-articles {
    grid-template-columns: 1fr;
  }
  
  .msc-kb-article-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .msc-kb-footer-actions {
    flex-direction: column;
  }
  
  .msc-kb-footer-btn {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .msc-kb-article-section {
    padding: 1.5rem 1rem 3rem;
  }
  
  .msc-kb-article-title {
    font-size: 1.5rem;
  }
  
  .msc-kb-article-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .msc-kb-action-btn {
    text-align: center;
    justify-content: center;
  }
  
  .msc-kb-article-text {
    font-size: 1rem;
  }
  
  .msc-kb-article-text h2 {
    font-size: 1.5rem;
  }
  
  .msc-kb-article-text h3 {
    font-size: 1.25rem;
  }
  
  .msc-kb-article-rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .msc-kb-rating-form {
    width: 100%;
  }
  
  .msc-kb-rating-btn {
    flex: 1;
    justify-content: center;
  }
  
  .msc-kb-related-article {
    flex-direction: column;
  }
  
  .msc-kb-related-article-icon {
    margin-bottom: 0.75rem;
  }
}

/* Code Syntax Highlighting (optional) */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  color: #abb2bf;
  background: #282c34;
}

.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}

/* Animations */
@keyframes msc-slide-in-right {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes msc-slide-in-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes msc-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.msc-kb-breadcrumb {
  animation: msc-fade-in 0.5s ease forwards;
}

.msc-kb-article-title {
  animation: msc-slide-in-up 0.5s ease forwards;
}

.msc-kb-article-meta {
  animation: msc-fade-in 0.6s ease forwards;
}

.msc-kb-article-actions {
  animation: msc-fade-in 0.7s ease forwards;
}

.msc-kb-article-text {
  animation: msc-fade-in 0.8s ease forwards;
}

.msc-kb-article-rating {
  animation: msc-slide-in-up 0.9s ease forwards;
}

.msc-kb-related-section {
  animation: msc-slide-in-up 1s ease forwards;
}

.msc-kb-article-footer {
  animation: msc-slide-in-up 1.1s ease forwards;
}

.msc-kb-related-article {
  animation: msc-fade-in 1.2s ease forwards;
  animation-fill-mode: both;
}

.msc-kb-related-article:nth-child(1) { animation-delay: 0.1s; }
.msc-kb-related-article:nth-child(2) { animation-delay: 0.2s; }
.msc-kb-related-article:nth-child(3) { animation-delay: 0.3s; }
.msc-kb-related-article:nth-child(4) { animation-delay: 0.4s; }
.msc-kb-related-article:nth-child(5) { animation-delay: 0.5s; }
.msc-kb-related-article:nth-child(6) { animation-delay: 0.6s; }










































/* Préchargeur Safari Cloud 
.sc-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.sc-preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.sc-preloader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-loader {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

.sc-loader-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(88, 45, 29, 0.1);
    border-top: 3px solid #582D1D;
    border-radius: 50%;
    animation: sc-spin 1.2s infinite cubic-bezier(0.42, 0, 0.58, 1);
}

.sc-loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #FFA500;
}

.sc-logo-half {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #582D1D;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    animation: sc-pulse 1.5s infinite alternate ease-in-out;
}

.sc-loader-text {
    font-family: "Proxima Nova", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #582D1D;
    opacity: 0.8;
    letter-spacing: 1px;
    animation: sc-fade 1.5s infinite alternate;
}

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

@keyframes sc-pulse {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sc-fade {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
*/












































/* Page de service VPS */
/* Styles pour la section héro VPS */
/* Styles pour la section héro VPS */
.safari-hero-section {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,245,230,0.5) 100%);
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.safari-hero-bg-shape {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 70%;
    height: 200%;
    background: linear-gradient(135deg, rgba(255,165,0,0.1) 0%, rgba(88,45,29,0.05) 100%);
    border-radius: 100%;
    transform: rotate(-15deg);
    z-index: 0;
}

.safari-service-navbar {
    margin-bottom: 50px;
}

.safari-service-navbar h5 {
    color: #582D1D;
    font-weight: 600;
}

.safari-service-navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.safari-service-navbar-nav li {
    margin-left: 25px;
}

.safari-service-navbar-nav li a {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.safari-service-navbar-nav li.active a {
    color: #FFA500;
    font-weight: 600;
}

.safari-service-navbar-nav li a:hover {
    color: #FFA500;
}

.safari-badge {
    display: inline-block;
    padding: 6px 15px;
    background-color: rgba(255, 165, 0, 0.1);
    color: #582D1D;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
}

.safari-hero-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.safari-highlight {
    color: #582D1D;
}

.safari-highlight:after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 165, 0, 0.3);
    z-index: -1;
}

.safari-text-md {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.safari-text-sm {
    font-size: 0.875rem;
    color: #777;
}

.safari-feature-list {
    margin-top: 25px;
}

.safari-feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.safari-feature-icon {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.safari-cta-group {
    margin-top: 30px;
}

.safari-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.safari-btn-primary {
    background-color: #FFA500;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.safari-btn-primary:hover {
    background-color: #FF9000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
}

.safari-btn-lg {
    padding: 15px 30px;
    font-size: 1.05rem;
}

.safari-link {
    color: #FFA500;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.safari-link:hover {
    color: #582D1D;
}

.safari-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.safari-server-illustration {
    position: relative;
    width: 100%;
    height: 360px;
}

/* Animation pour le SVG */
@keyframes serverPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.safari-server-rack {
    animation: serverPulse 3s infinite ease-in-out;
}

/* Barre de navigation sticky */
.safari-sticky-nav {
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.3s ease;
    transform: translateY(-100%);
    opacity: 0;
}

.safari-sticky-nav.visible {
    transform: translateY(0);
    opacity: 1;
}

.safari-sticky-links {
    gap: 25px;
}

.safari-nav-link {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
}

.safari-nav-link:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FFA500;
    transition: width 0.3s ease;
}

.safari-nav-link:hover {
    color: #582D1D;
}

.safari-nav-link:hover:after {
    width: 100%;
}

.safari-sticky-cta {
    display: flex;
    align-items: center;
    color: #582D1D;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.safari-sticky-cta svg {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.safari-sticky-cta:hover {
    color: #FFA500;
}

.safari-sticky-cta:hover svg {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .safari-hero-title {
        font-size: 2.25rem;
    }
    
    .safari-sticky-links {
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 5px;
        width: 100%;
    }
    
    .safari-nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .safari-hero-section {
        padding: 40px 0;
    }
    
    .safari-hero-title {
        font-size: 1.75rem;
    }
    
    .safari-service-navbar {
        flex-direction: column;
        gap: 15px;
    }
    
    .safari-service-navbar-nav {
        width: 100%;
        justify-content: center;
    }
    
    .safari-service-navbar-nav li {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .safari-sticky-nav .row {
        flex-direction: column;
        gap: 15px;
    }
    
    .safari-sticky-links {
        justify-content: center;
    }
    
    .safari-sticky-nav .col:last-child {
        justify-content: center;
    }
}

/* Styles simplifiés pour la barre de navigation sticky */
.safari-sticky-nav {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 15px 0;
}

/* Utilisé par JavaScript pour afficher la barre */
.safari-sticky-nav.active {
    display: block;
}


/* Ajout de l'effet de scintillement au bouton principal */
@keyframes safari-btn-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.safari-btn-primary {
    background-color: #FFA500;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.safari-btn-primary:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    background-size: 200% 100%;
    animation: safari-btn-shimmer 2s infinite;
    z-index: 1;
}

.safari-btn-primary span, 
.safari-btn-primary script {
    position: relative;
    z-index: 2;
}

.safari-btn-primary:hover {
    background-color: #FF9000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
}

/* Mise à jour de l'effet de scintillement au bouton principal - uniquement au survol */
@keyframes safari-btn-shimmer {
    0% {
        background-position: -150% 0;
    }
    100% {
        background-position: 150% 0;
    }
}

.safari-btn-primary {
    background-color: #FFA500;
    color: white !important; /* S'assurer que la couleur du texte reste blanche */
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Styles simplifiés pour la barre de navigation */
.safari-nav {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    margin-bottom: 30px;
}

.safari-nav-links {
    gap: 25px;
}

.safari-nav-link {
    color: #666;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.safari-nav-link:hover {
    color: #FFA500;
}

.safari-nav-cta {
    display: flex;
    align-items: center;
    color: #582D1D;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid #000;
}

.safari-nav-cta svg {
    margin-left: 10px;
}

.safari-nav-cta:hover {
    color: #FFA500;
}

/* Style simplifié pour le bouton CTA principal */
.safari-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.safari-btn-primary {
    background-color: #FFA500;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

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

.safari-btn-lg {
    padding: 15px 30px;
    font-size: 1.05rem;
}

/* Styles responsifs */
@media (max-width: 991px) {
    .safari-nav-links {
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .safari-nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .safari-nav .row {
        flex-direction: column;
        gap: 15px;
    }
    
    .safari-nav-links {
        justify-content: center;
    }
    
    .safari-nav .col:last-child {
        justify-content: center;
    }
}











/* Styles pour la section de tarification */
/* Styles pour la section de tarification */
.safari-pricing-section {
    padding: 80px 0;
    background-color: #fff;
}

.safari-section-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
}

.safari-text-sm {
    font-size: 0.875rem;
    color: #666;
}

/* Section d'avis */
.safari-reviews-overview {
    margin-bottom: 30px;
}

.safari-stars-rating {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.safari-stars-rating svg {
    margin: 0 2px;
}

/* Onglets */
.safari-tabs-nav {
    display: flex;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.safari-tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.safari-tab-btn.active {
    background-color: white;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.safari-tab-icon {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 165, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.safari-tab-subtitle {
    font-size: 0.75rem;
    color: #888;
    display: block;
}

.safari-tab-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    display: block;
}

/* Conteneur de contenu d'onglet */
.safari-tabs-content {
    position: relative;
}

.safari-tab-pane {
    display: none;
    animation: fadeInScale 0.4s ease;
}

.safari-tab-pane.active {
    display: block;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Grille de prix */
.safari-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 50px 0;
}

/* Cartes de prix */
.safari-pricing-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
}

.safari-pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(88, 45, 29, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.safari-pricing-card-inner {
    position: relative;
    padding: 35px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.safari-pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.safari-pricing-card.hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Carte populaire */
.safari-pricing-popular {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.03) 0%, rgba(255, 165, 0, 0.07) 100%);
}

.safari-pricing-popular::before {
    background: linear-gradient(180deg, rgba(255, 165, 0, 0.8), rgba(88, 45, 29, 0.3));
}

.safari-popular-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #FFA500;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 10px rgba(255, 165, 0, 0.25);
}

/* En-tête de la carte */
.safari-pricing-header {
    margin-bottom: 30px;
}

.safari-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.safari-chip-basic {
    background-color: rgba(220, 220, 220, 0.3);
    color: #666;
}

.safari-chip-popular {
    background-color: rgba(255, 165, 0, 0.15);
    color: #582D1D;
}

.safari-chip-pro {
    background-color: rgba(25, 118, 210, 0.1);
    color: #1976D2;
}

.safari-chip-enterprise {
    background-color: rgba(88, 45, 29, 0.1);
    color: #582D1D;
}

.safari-pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px;
}

.safari-pricing-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
}

.safari-currency {
    font-size: 0.9rem;
    color: #666;
    margin-right: 5px;
}

.safari-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.safari-period {
    font-size: 0.9rem;
    color: #888;
    margin-left: 5px;
}

/* Spécifications */
.safari-pricing-specs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.safari-spec-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.safari-spec-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(255, 165, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #582D1D;
    flex-shrink: 0;
}

.safari-spec-content {
    display: flex;
    flex-direction: column;
}

.safari-spec-value {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.safari-spec-label {
    color: #666;
    font-size: 0.8rem;
}

/* Pied de la carte */
.safari-pricing-footer {
    margin-top: auto;
}

.safari-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.safari-btn-outline {
    background-color: transparent;
    border: 2px solid #582D1D;
    color: #582D1D;
}

.safari-btn-outline:hover {
    background-color: #582D1D;
    color: white;
    box-shadow: 0 5px 15px rgba(88, 45, 29, 0.2);
}

.safari-btn-primary {
    background-color: #FFA500;
    color: white;
    border: none;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.25);
}

.safari-btn-primary:hover {
    background-color: #FF8C00;
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.35);
    transform: translateY(-3px);
}

/* Animation du bouton au survol */
.safari-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left 0.7s ease;
}

.safari-btn:hover::after {
    left: 100%;
}

/* Styles spécifiques AMD */
.safari-amd-card .safari-spec-icon {
    background-color: rgba(227, 30, 36, 0.08);
    color: #E31E24;
}

.safari-amd-logo {
    height: 40px;
    margin-bottom: 15px;
    display: block;
}

/* Animation du chargement */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Styles responsifs */
@media (max-width: 1200px) {
    .safari-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .safari-section-title {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .safari-pricing-section {
        padding: 60px 0;
    }
    
    .safari-tabs-nav {
        flex-direction: column;
        gap: 10px;
        max-width: 400px;
    }
    
    .safari-tab-btn {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    
    .safari-tab-content {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .safari-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .safari-pricing-card-inner {
        padding: 25px 20px;
    }
    
    .safari-amount {
        font-size: 1.8rem;
    }
    
    .safari-section-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .safari-pricing-section {
        padding: 40px 0;
    }
    
    .safari-pricing-grid {
        gap: 15px;
    }
    
    .safari-pricing-card-inner {
        padding: 20px 15px;
    }
    
    .safari-spec-icon {
        width: 30px;
        height: 30px;
    }
    
    .safari-chip {
        padding: 3px 10px;
        font-size: 0.65rem;
    }
    
    .safari-pricing-title {
        font-size: 1.3rem;
    }
    
    .safari-amount {
        font-size: 1.6rem;
    }
    
    .safari-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Animation d'apparition des éléments */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.safari-pricing-section {
    animation: fadeIn 0.6s ease-out;
}

.safari-pricing-card {
    animation: fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.safari-pricing-card:nth-child(1) {
    animation-delay: 0.1s;
}

.safari-pricing-card:nth-child(2) {
    animation-delay: 0.2s;
}

.safari-pricing-card:nth-child(3) {
    animation-delay: 0.3s;
}

.safari-pricing-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Animation d'apparition progressive des éléments */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.safari-pricing-header,
.safari-spec-item,
.safari-pricing-footer {
    animation: slideUpFade 0.5s ease-out forwards;
    opacity: 0;
}

.safari-pricing-header {
    animation-delay: 0.1s;
}

.safari-spec-item:nth-child(1) {
    animation-delay: 0.2s;
}

.safari-spec-item:nth-child(2) {
    animation-delay: 0.3s;
}

.safari-spec-item:nth-child(3) {
    animation-delay: 0.4s;
}

.safari-spec-item:nth-child(4) {
    animation-delay: 0.5s;
}

.safari-pricing-footer {
    animation-delay: 0.6s;
}

/* Styles supplémentaires pour améliorer l'expérience utilisateur */
.safari-pricing-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Style de la bordure sur la carte au focus */
.safari-pricing-card:focus-within::before {
    background: linear-gradient(180deg, rgba(255, 165, 0, 0.8), rgba(88, 45, 29, 0.3));
}

/* Style d'accessibilité pour les boutons */
.safari-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3), 0 5px 15px rgba(88, 45, 29, 0.2);
}

/* Marqueur de la meilleure valeur */
.safari-pricing-popular::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FFA500, #FF8C00);
}

/* Ajuster la largeur du bouton principal dans le hero */
.safari-hero-section .safari-btn {
    width: auto;
    min-width: 200px;
    padding-left: 30px;
    padding-right: 30px;
}

/* Largeur fixe pour toutes les cartes de prix */
.safari-pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin: 50px 0;
}

.safari-pricing-card {
    width: 300px;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Ajustement pour le responsive */
@media (max-width: 767px) {
    .safari-pricing-card {
        width: 100%;
        max-width: 300px;
    }
}




/* Patch pour améliorer l'affichage des tarifs */
.safari-pricing-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.safari-currency {
    font-size: 0.8rem;
    color: #777;
    margin-right: 2px;
    font-weight: 500;
}

.safari-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.safari-period {
    font-size: 0.85rem;
    color: #777;
    margin-left: 4px;
    font-weight: 500;
}

/* Style alternatif pour un meilleur affichage des prix longs */
.safari-pricing-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Ajuster l'espacement */
.safari-chip {
    margin-bottom: 12px;
}

/* Ajustement pour les prix qui pourraient être longs */
@media (max-width: 991px) {
    .safari-amount {
        font-size: 1.8rem;
    }
    
    .safari-currency {
        position: relative;
        top: -2px;
    }
}

/* Pour garantir une bonne séparation entre le prix et le bouton */
.safari-pricing-footer {
    margin-top: 20px;
    padding-top: 10px;
}

















/* Section des logos d'OS */
.safari-os-logos-section {
    padding: 70px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.safari-os-logos-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 10% 90%, rgba(255, 165, 0, 0.03) 0%, transparent 50%),
                     radial-gradient(circle at 90% 10%, rgba(88, 45, 29, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.safari-section-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.safari-section-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FFA500, #FF8C00);
    margin: 0 auto 40px;
    border-radius: 3px;
}

.safari-os-logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 920px;
    margin: 0 auto;
}

.safari-os-logo-wrapper {
    position: relative;
}

.safari-os-logo-wrapper::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background-color: #e9e9e9;
}

.safari-os-logo-wrapper:last-child::after {
    display: none;
}

.safari-os-logo-item {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.safari-os-logo-img {
    max-height: 40px;
    max-width: 100%;
    transition: all 0.3s ease;
    filter: grayscale(30%);
}

.safari-os-logo-hover {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    padding: 5px 0;
    background-color: rgba(255, 165, 0, 0.9);
    color: white;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    opacity: 0;
}

.safari-os-logo-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.7);
}

.safari-os-logo-item:hover .safari-os-logo-img {
    transform: translateY(-5px);
    filter: grayscale(0%);
}

.safari-os-logo-item:hover .safari-os-logo-hover {
    bottom: 0;
    opacity: 1;
}

/* Responsive */
@media (max-width: 767px) {
    .safari-os-logos-container {
        gap: 15px;
    }
    
    .safari-os-logo-wrapper::after {
        display: none;
    }
    
    .safari-os-logo-item {
        width: 100px;
        height: 70px;
    }
    
    .safari-os-logo-img {
        max-height: 35px;
    }
}

@media (max-width: 480px) {
    .safari-os-logos-section {
        padding: 50px 0;
    }
    
    .safari-section-subtitle {
        font-size: 1.3rem;
    }
    
    .safari-os-logos-container {
        gap: 10px;
    }
    
    .safari-os-logo-item {
        width: 80px;
        height: 60px;
        padding: 10px;
    }
    
    .safari-os-logo-img {
        max-height: 30px;
    }
}










/* Section Overview avec préfixe sc- pour éviter les conflits */
.sc-overview {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    overflow: hidden;
    position: relative;
}

/* Content Side */
.sc-overview-content {
    padding: 40px 0;
    max-width: 540px;
}

.sc-tag {
    display: inline-block;
    background-color: rgba(255, 165, 0, 0.1);
    color: #582D1D;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.sc-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.2;
}

.sc-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.sc-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #582D1D;
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(88, 45, 29, 0.2);
}

.sc-cta:hover {
    background-color: #6b3825;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(88, 45, 29, 0.25);
    color: white;
}

.sc-cta svg {
    transition: transform 0.3s ease;
}

.sc-cta:hover svg {
    transform: translateX(5px);
}

/* Illustration Side */
.sc-overview-illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-server-illustration {
    width: 100%;
    max-width: 800px;
    height: auto;
}

/* Server Unit Animation */
.sc-server-unit {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

.sc-server-unit:nth-child(1) {
    animation-delay: 0.2s;
}

.sc-server-unit:nth-child(2) {
    animation-delay: 0.4s;
}

.sc-server-unit:nth-child(3) {
    animation-delay: 0.6s;
}

.sc-server-unit:nth-child(4) {
    animation-delay: 0.8s;
}

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

/* Features Row */
.sc-features-row {
    margin-top: 60px;
}

.sc-feature {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.sc-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FFA500, #ff7e00);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.sc-feature:hover::before {
    opacity: 1;
}

.sc-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #582D1D;
}

.sc-feature h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.sc-feature p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive Styles */
@media (max-width: 1199px) {
    .sc-title {
        font-size: 2.2rem;
    }
    
    .sc-description {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .sc-overview {
        padding: 60px 0;
    }
    
    .sc-overview-content {
        padding: 0;
        max-width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .sc-title {
        font-size: 2rem;
    }
    
    .sc-server-illustration {
        max-width: 600px;
    }
    
    .sc-features-row {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .sc-overview {
        padding: 40px 0;
    }
    
    .sc-title {
        font-size: 1.75rem;
    }
    
    .sc-feature {
        padding: 25px;
    }
    
    .sc-feature-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 575px) {
    .sc-tag {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .sc-feature {
        padding: 20px;
    }
}









/* Ajustements pour le SVG */
.sc-overview-illustration {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-server-illustration {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 400px;
}

/* Animation des unités de serveur */
.sc-server-unit {
    opacity: 0;
    animation: sc-fadeInUp 0.6s ease forwards;
}

.sc-server-unit:nth-child(4) {
    animation-delay: 0.2s;
}

.sc-server-unit:nth-child(5) {
    animation-delay: 0.4s;
}

.sc-server-unit:nth-child(6) {
    animation-delay: 0.6s;
}

.sc-server-unit:nth-child(7) {
    animation-delay: 0.8s;
}

@keyframes sc-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustement responsive */
@media (max-width: 991px) {
    .sc-server-illustration {
        min-height: 350px;
    }
}

@media (max-width: 767px) {
    .sc-server-illustration {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .sc-overview-illustration {
        padding: 10px;
    }
    
    .sc-server-illustration {
        min-height: 250px;
    }
}




/* Section des avantages avec SVG */
.sc-advantages-section {
    padding: 80px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.sc-advantages-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, rgba(255, 165, 0, 0.03) 0%, rgba(88, 45, 29, 0.01) 70%);
    z-index: 0;
}

/* Colonne de l'illustration SVG */
.sc-advantages-image-col {
    padding: 0;
    height: 100%;
    position: relative;
    min-height: 500px;
}

.sc-advantages-svg-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.sc-advantages-svg {
    width: 100%;
    max-width: 700px;
    height: auto;
}

/* Animations pour le SVG */
.sc-cloud-element {
    animation: sc-float 6s infinite ease-in-out;
}

.sc-cloud-element:nth-child(even) {
    animation-delay: 3s;
}

@keyframes sc-float {
    0%, 100% { transform: translate(250px, 120px); }
    50% { transform: translate(250px, 130px); }
}

@keyframes sc-float-alt {
    0%, 100% { transform: translate(500px, 100px); }
    50% { transform: translate(500px, 110px); }
}

/* Colonne de contenu */
.sc-advantages-content-col {
    display: flex;
    align-items: center;
    padding: 30px 40px 30px 15px;
    position: relative;
    z-index: 2;
}

.sc-advantages-content {
    max-width: 600px;
}

.sc-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #582D1D;
    margin-bottom: 15px;
    display: block;
    position: relative;
    padding-left: 15px;
}

.sc-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    background-color: #FFA500;
    border-radius: 3px;
}

.sc-heading {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.3;
}

.sc-paragraph {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Liste des avantages */
.sc-advantages-list {
    margin-top: 30px;
    margin-bottom: 40px;
}

.sc-advantage-item {
    display: flex;
    margin-bottom: 25px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    border: 1px solid #f5f5f5;
}

.sc-advantage-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #ededed;
}

.sc-advantage-icon {
    width: 50px;
    height: 50px;
    min-width: 50px; /* Pour éviter la compression */
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: #582D1D;
}

.sc-advantage-content {
    flex: 1;
}

.sc-advantage-content h5 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.sc-advantage-content p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Bouton CTA */
.sc-cta-container {
    margin-top: 40px;
}

.sc-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FFA500;
    color: white;
    padding: 16px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.2);
}

.sc-cta-button:hover {
    background-color: #FF8C00;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3);
    color: white;
}

.sc-cta-button svg {
    transition: transform 0.3s ease;
}

.sc-cta-button:hover svg {
    transform: translateX(5px);
}

/* Responsive Styles */
@media (max-width: 1199px) {
    .sc-advantages-content-col {
        padding: 30px 30px 30px 15px;
    }
    
    .sc-heading {
        font-size: 2.2rem;
    }
    
    .sc-advantage-item {
        padding: 12px 15px;
    }
}

@media (max-width: 991px) {
    .sc-advantages-section {
        padding: 60px 0;
    }
    
    .sc-advantages-image-col {
        min-height: 400px;
        order: 1;
        margin-bottom: 30px;
    }
    
    .sc-advantages-content-col {
        order: 2;
        padding: 0 15px;
    }
    
    .sc-advantages-content {
        max-width: 100%;
    }
    
    .sc-heading {
        font-size: 2rem;
    }
    
    @keyframes sc-float {
        0%, 100% { transform: translate(250px, 120px); }
        50% { transform: translate(250px, 125px); }
    }
}

@media (max-width: 767px) {
    .sc-advantages-section {
        padding: 50px 0;
    }
    
    .sc-advantages-image-col {
        min-height: 350px;
    }
    
    .sc-heading {
        font-size: 1.8rem;
    }
    
    .sc-advantage-item {
        margin-bottom: 20px;
    }
    
    .sc-advantage-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }
    
    .sc-advantage-content h5 {
        font-size: 1.05rem;
    }
}

@media (max-width: 575px) {
    .sc-advantages-image-col {
        min-height: 300px;
    }
    
    .sc-subtitle {
        font-size: 0.8rem;
    }
    
    .sc-heading {
        font-size: 1.6rem;
    }
    
    .sc-paragraph {
        font-size: 1rem;
    }
    
    .sc-advantage-item {
        flex-direction: column;
        padding: 15px;
    }
    
    .sc-advantage-icon {
        margin-bottom: 15px;
        margin-right: 0;
    }
    
    .sc-cta-button {
        width: 100%;
        justify-content: center;
    }
}



/* Styles spécifiques à la nouvelle illustration SVG */
.sc-advantages-svg-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.sc-advantages-svg {
    width: 100%;
    max-width: 800px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

/* Animation des éléments SVG */
.sc-dashboard-container {
    transform-origin: center;
    animation: sc-pulse 6s infinite ease-in-out;
}

.sc-server-stack {
    animation: sc-float 4s infinite ease-in-out;
}

.sc-cloud {
    animation: sc-float-alt 5s infinite ease-in-out;
}

.sc-devices {
    animation: sc-subtle-rotate 8s infinite ease-in-out;
}

@keyframes sc-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

@keyframes sc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sc-float-alt {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0, 5px); }
}

@keyframes sc-subtle-rotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sc-advantages-svg {
        max-width: 600px;
    }
}

@media (max-width: 767px) {
    .sc-advantages-svg-container {
        padding: 10px;
    }
    
    .sc-advantages-svg {
        max-width: 500px;
    }
}

@media (max-width: 575px) {
    .sc-advantages-svg {
        max-width: 400px;
    }
}





/* Section des services associés */
.sc-related-services {
    padding: 100px 0;
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.sc-related-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 90% 10%, rgba(255, 165, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(88, 45, 29, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* En-tête de section */
.sc-section-header {
    margin-bottom: 60px;
}

.sc-section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sc-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Cards de service */
.sc-service-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px 30px;
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

.sc-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.sc-service-featured {
    border-color: rgba(255, 165, 0, 0.3);
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.1);
}

.sc-service-featured:hover {
    box-shadow: 0 15px 35px rgba(255, 165, 0, 0.15);
}

.sc-service-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #FFA500, #FF8C00);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(255, 165, 0, 0.2);
}

.sc-service-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: #582D1D;
    transition: all 0.3s ease;
}

.sc-service-card:hover .sc-service-icon {
    transform: scale(1.05);
    background-color: rgba(255, 165, 0, 0.15);
}

.sc-service-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sc-service-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

/* Affichage des prix */
.sc-service-price {
    margin-bottom: 25px;
}

.sc-price-tag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sc-price-label {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.sc-price-value {
    display: flex;
    align-items: baseline;
}

.sc-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.sc-price-currency {
    font-size: 1rem;
    color: #666;
    margin-left: 5px;
}

.sc-price-period {
    font-size: 0.9rem;
    color: #888;
    margin-top: 5px;
}

/* Lien d'action */
.sc-service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #582D1D;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 25px;
    border: 2px solid #582D1D;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    margin-top: auto;
}

.sc-service-link:hover {
    background-color: #582D1D;
    color: white;
}

.sc-service-link svg {
    transition: transform 0.3s ease;
}

.sc-service-link:hover svg {
    transform: translateX(5px);
}

.sc-service-link-featured {
    background-color: #FFA500;
    border-color: #FFA500;
    color: white;
}

.sc-service-link-featured:hover {
    background-color: #FF8C00;
    border-color: #FF8C00;
}

/* Responsive */
@media (max-width: 1199px) {
    .sc-section-title {
        font-size: 2.2rem;
    }
    
    .sc-service-card {
        padding: 35px 25px;
    }
    
    .sc-price-amount {
        font-size: 1.8rem;
    }
}

@media (max-width: 991px) {
    .sc-related-services {
        padding: 80px 0;
    }
    
    .sc-section-title {
        font-size: 2rem;
    }
    
    .sc-section-subtitle {
        font-size: 1rem;
    }
    
    .sc-service-icon {
        width: 60px;
        height: 60px;
    }
    
    .sc-service-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 767px) {
    .sc-related-services {
        padding: 60px 0;
    }
    
    .sc-section-header {
        margin-bottom: 40px;
    }
    
    .sc-section-title {
        font-size: 1.8rem;
    }
    
    .sc-service-card {
        padding: 30px 20px;
    }
    
    .sc-service-icon {
        width: 55px;
        height: 55px;
    }
    
    .sc-service-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .sc-service-description {
        margin-bottom: 20px;
    }
    
    .sc-price-amount {
        font-size: 1.6rem;
    }
}

@media (max-width: 575px) {
    .sc-related-services {
        padding: 50px 0;
    }
    
    .sc-section-title {
        font-size: 1.6rem;
    }
    
    .sc-service-link {
        width: 100%;
        justify-content: center;
    }
}






/* Section FAQ */
.sc-faq-section {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.sc-faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(circle, rgba(255, 165, 0, 0.05) 0%, rgba(255, 165, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sc-faq-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(circle, rgba(88, 45, 29, 0.03) 0%, rgba(88, 45, 29, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* En-tête de section */
.sc-section-header {
    margin-bottom: 60px;
}

.sc-section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sc-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Container FAQ */
.sc-faq-container {
    margin-bottom: 60px;
}

/* Item FAQ */
.sc-faq-item {
    margin-bottom: 20px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.sc-faq-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* En-tête de question */
.sc-faq-header {
    border: none;
    background-color: transparent;
    padding: 0;
}

.sc-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sc-faq-toggle:focus {
    outline: none;
    box-shadow: none;
}

.sc-faq-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    padding-right: 20px;
    transition: color 0.3s ease;
}

.sc-faq-toggle:hover .sc-faq-title {
    color: #FFA500;
}

.sc-faq-toggle:not(.collapsed) .sc-faq-title {
    color: #FFA500;
}

.sc-faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.sc-icon-plus,
.sc-icon-minus {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.sc-icon-plus {
    opacity: 1;
    color: #582D1D;
}

.sc-icon-minus {
    opacity: 0;
    transform: rotate(-90deg);
    color: #FFA500;
}

.sc-faq-toggle:not(.collapsed) .sc-icon-plus {
    opacity: 0;
    transform: rotate(90deg);
}

.sc-faq-toggle:not(.collapsed) .sc-icon-minus {
    opacity: 1;
    transform: rotate(0);
}

/* Corps de réponse */
.sc-faq-body {
    padding: 0 25px 25px;
}

.sc-faq-body p {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.sc-faq-body p:last-child {
    margin-bottom: 0;
}

.sc-faq-body ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.sc-faq-body ul li {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 8px;
}

/* Section finale avec garantie */
.sc-faq-wrapup {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.sc-faq-guarantee {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.sc-guarantee-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 165, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #582D1D;
}

.sc-guarantee-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.sc-guarantee-content p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Bouton CTA */
.sc-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FFA500;
    color: white;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.2);
}

.sc-cta-button:hover {
    background-color: #FF8C00;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3);
    color: white;
}

.sc-cta-button svg {
    transition: transform 0.3s ease;
}

.sc-cta-button:hover svg {
    transform: translateX(5px);
}

/* Animation du collapse */
.collapse {
    transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 1199px) {
    .sc-section-title {
        font-size: 2.2rem;
    }
    
    .sc-faq-toggle {
        padding: 22px;
    }
    
    .sc-guarantee-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 991px) {
    .sc-faq-section {
        padding: 80px 0;
    }
    
    .sc-section-title {
        font-size: 2rem;
    }
    
    .sc-section-subtitle {
        font-size: 1rem;
    }
    
    .sc-faq-title {
        font-size: 1.1rem;
    }
    
    .sc-guarantee-content h3 {
        font-size: 1.4rem;
    }
    
    .sc-faq-wrapup {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .sc-faq-section {
        padding: 60px 0;
    }
    
    .sc-section-header {
        margin-bottom: 40px;
    }
    
    .sc-section-title {
        font-size: 1.8rem;
    }
    
    .sc-faq-toggle {
        padding: 20px;
    }
    
    .sc-faq-title {
        font-size: 1rem;
    }
    
    .sc-faq-body {
        padding: 0 20px 20px;
    }
    
    .sc-guarantee-icon {
        width: 70px;
        height: 70px;
    }
    
    .sc-guarantee-content h3 {
        font-size: 1.3rem;
    }
    
    .sc-guarantee-content p {
        font-size: 1rem;
    }
    
    .sc-cta-button {
        padding: 14px 28px;
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .sc-faq-section {
        padding: 50px 0;
    }
    
    .sc-section-title {
        font-size: 1.6rem;
    }
    
    .sc-faq-toggle {
        padding: 18px 15px;
    }
    
    .sc-faq-title {
        font-size: 0.95rem;
    }
    
    .sc-faq-body {
        padding: 0 15px 18px;
    }
    
    .sc-faq-wrapup {
        padding: 25px 20px;
    }
    
    .sc-guarantee-icon {
        width: 60px;
        height: 60px;
    }
    
    .sc-guarantee-content h3 {
        font-size: 1.2rem;
    }
    
    .sc-guarantee-content p {
        font-size: 0.95rem;
    }
    
    .sc-cta-button {
        width: 100%;
    }
}















/* Section Témoignages - Style SAAS moderne */
.sc-testimonials-section {
    padding: 100px 0;
    background-color: #f8f9fb;
    position: relative;
}

/* En-tête */
.sc-section-header {
    margin-bottom: 60px;
}

.sc-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sc-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* Grille de témoignages */
.sc-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

/* Item de témoignage */
.sc-testimonial-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
}

.sc-testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 165, 0, 0.2);
}

/* En-tête du témoignage */
.sc-testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.sc-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sc-rating-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 4px;
}

.sc-stars {
    color: #FFA500;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.sc-testimonial-badge {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28A745;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Citation */
.sc-testimonial-quote {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    margin: 0 0 25px 0;
    font-style: normal;
    position: relative;
}

.sc-testimonial-quote:before {
    content: '"';
    position: absolute;
    left: -20px;
    top: -10px;
    font-size: 3rem;
    color: rgba(255, 165, 0, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

/* Auteur */
.sc-testimonial-author {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.sc-author-info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.sc-author-info span {
    font-size: 0.85rem;
    color: #666;
}

/* Section de statistiques */
.sc-testimonials-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    max-width: 600px;
    margin: 0 auto;
}

.sc-stat-item {
    text-align: center;
}

.sc-stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFA500;
    line-height: 1;
    margin-bottom: 8px;
}

.sc-stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.sc-stat-stars {
    color: #FFA500;
    font-size: 0.8rem;
}

.sc-stat-divider {
    width: 1px;
    height: 40px;
    background-color: #e0e0e0;
}

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

.sc-testimonial-item {
    animation: fadeInUp 0.6s ease forwards;
}

.sc-testimonial-item:nth-child(1) { animation-delay: 0.1s; }
.sc-testimonial-item:nth-child(2) { animation-delay: 0.2s; }
.sc-testimonial-item:nth-child(3) { animation-delay: 0.3s; }
.sc-testimonial-item:nth-child(4) { animation-delay: 0.4s; }
.sc-testimonial-item:nth-child(5) { animation-delay: 0.5s; }
.sc-testimonial-item:nth-child(6) { animation-delay: 0.6s; }

/* Responsive */
@media (max-width: 1199px) {
    .sc-testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .sc-section-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 991px) {
    .sc-testimonials-section {
        padding: 80px 0;
    }
    
    .sc-testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .sc-section-title {
        font-size: 2rem;
    }
    
    .sc-testimonials-stats {
        gap: 30px;
        padding: 30px;
    }
    
    .sc-stat-number {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .sc-testimonials-section {
        padding: 60px 0;
    }
    
    .sc-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .sc-testimonial-item {
        padding: 25px;
    }
    
    .sc-section-title {
        font-size: 1.8rem;
    }
    
    .sc-testimonials-stats {
        flex-direction: column;
        gap: 25px;
    }
    
    .sc-stat-divider {
        width: 80px;
        height: 1px;
    }
}

@media (max-width: 575px) {
    .sc-testimonials-section {
        padding: 50px 0;
    }
    
    .sc-testimonial-item {
        padding: 20px;
    }
    
    .sc-section-title {
        font-size: 1.6rem;
    }
    
    .sc-testimonial-quote {
        font-size: 1rem;
    }
    
    .sc-testimonials-stats {
        padding: 25px 20px;
    }
}