:root {
    --primary-green: #89c026;
    /* Vert vif des boutons et badges */
    --light-green: #d1e6a3;
    /* Vert clair des fonds de section */
    --dark-blue: #0b3c4d;
    /* Bleu nuit/foncé du footer et accents */
    --bg-cream: #fbfbfa;
    /* Couleur de fond générale */
    --text-dark: #2c3e50;
    --text-muted: #666666;
    --font-main: 'Helvetica Neue', Arial, sans-serif;
}


/* ==========================================================================
   2. COMPOSANTS RÉUTILISABLES (Widgets Sitefinity)
   ========================================================================== */
.section-title {
    font-size: 3rem;
    color: var(--dark-blue);
    margin-bottom: 20px;
    position: relative;
}

.section-title-center {
    max-width: 1440px;
    margin: 0.5rem auto 2rem;
}

/* Effet de la petite vague verte sous les titres */
.section-title::before {
    content: '';
    display: block;
    width: 150px;
    height: 25px;
    background-image: url(../Images/volute.svg);
    background-repeat: no-repeat;
    /* margin-top: 8px; */
    /* margin-left: -20px; */
    position: absolute;
    top: -20px;
    left: -60px;
}

.card-title::after {
    /*content: '';
    display: block;
    width: 40px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0,2 Q5,0 10,2 T20,2' fill='none' stroke='%2389c026' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin-top: 8px;*/

    content: '';
    display: block;
    width: 100%;
    height: 9px;
    margin: 10px 0 0;
    background-image: url(../Images/volute.svg);
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    right: 0;
}

.text-center::after {
    margin: 8px auto 0 auto;
}

/* Boutons */
.sf-widget-btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-green);
    color: #fff;
    margin: 1rem 0;
    transition: 0.2s ease;
}

.btn-primary:hover {
    background-color: #74a41f;
    animation: bounce 0.6s ease;
}

@keyframes bounce-soft {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.06);
    }

    70% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

.btn-dark {
    background-color: var(--dark-blue);
    color: #fff;
}

/* Grilles communes */
.grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

/* ==========================================================================
   3. SECTIONS SPÉCIFIQUES
   ========================================================================== */

/* Header */
.site-header {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.site-nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--text-dark);
}

/* Hero Section */
.hero-section {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 100px 0;
}

.hero-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hero-title {
    color: var(--dark-blue);
    font-size: 2.5rem;
    max-width: 60%;
    line-height: 1.3;
}

.hero-badge-box {
    background-color: var(--primary-green);
    color: #fff;
    padding: 40px;
    max-width: 450px;
}

.badge-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.badge-stats {
    display: flex;
    justify-content: space-between;
}

.stat-item strong {
    display: block;
    font-size: 1.5rem;
}

/* Présentation */
.presentation-section {
    padding: 60px 0;
}

.text-block {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-muted);
}

/* Services */
.services-section {
    padding: 40px 0;
}

.bg-light-green {
    background-color: var(--light-green);
}

.content-side {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.image-side {
    background-size: cover;
    background-position: center;
}

/* Cards Services */
.service-card {
    background: transparent;
}

.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-title {
    margin: 15px 0 10px 0;
    font-size: 2.2rem;
    text-align: center;
}

/* Éditions Section */
.bg-grey {
    background-color: #e9ecef;
}

.accent-border-left {
    border-left: 20px solid var(--dark-blue); /* Ajustement pour le bloc bleu asymétrique */
}

/* Testimonials */
.testimonials-section {
    padding: 80px 0;
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    border: 2px solid var(--primary-green);
}

/* Solutions Section */
.grid-3-cols-custom {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 20px;
    padding: 40px 20px;
}

.solution-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: 20px;
}

.solution-img-block {
    background-size: cover;
    background-position: center;
    min-height: 300px;
}

/* Footer */
.site-footer {
    background-color: var(--dark-blue);
    color: #fff;
    padding: 60px 0;
    margin-top: 50px;
    border-radius: 50% 50% 0 0 / 20px 20px 0 0; /* Simule la légère courbure supérieure */
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.footer-links a {
    display: block;
    color: #b0c4de;
    text-decoration: none;
    margin-bottom: 10px;
}

/* Utility classes */
.margin-top-lg { margin-top: 60px; }

/* Responsive design de base */
@media (max-width: 768px) {
    .grid-3-cols, .split-layout, .grid-3-cols-custom, .footer-container {
        grid-template-columns: 1fr;
    }
    .hero-title {
        max-width: 100%;
    }
    .content-side {
        padding: 30px 20px;
    }
}



/******/

/** menu ***/

.menuWrapperPublic.menuPublic>ul {

    justify-content: center;
    margin: 2rem 0;
}

.menuWrapperPublic .menuItem0>a {
    font-size: 1.4rem;
    color: #434343;
}

.menuWrapperPublic .menuItem0.selected>a {
    color: var(--primary);
}

.headerMainPublic .logoAnanoveaExtranet {
    margin: 1rem;
    max-width: 130px;
}

.headerMainPublic .retourPortailClient {
    background: var(--primary);
    color: #fff;
    margin: 2rem 1rem 2rem auto;
        display: block;
        max-width: 185px;
}




.sf-widget-content {
    max-width: 1400px;

}

.hero-section{
    background-image: url('/images/extranetananovealibraries/baseextranet/ble-fond.jpg');
}


/*.split-col.image-side{
background-image: url('/images/extranetananovealibraries/baseextranet/ble-fond.jpg');
}*/

.split-layout {
    padding: 4rem 2rem;
background: #D1E6A3;
background: linear-gradient(90deg, rgba(209, 230, 163, 1) 0%, rgba(209, 230, 163, 1) 60%, rgba(137, 192, 38, 1) 60%, rgba(137, 192, 38, 1) 100%);
}

.split-layout-reverse {
    padding: 4rem 2rem;
    background: #89C026;
        background: linear-gradient(90deg, rgba(137, 192, 38, 1) 0%, rgba(137, 192, 38, 1) 40%, rgba(209, 230, 163, 1) 40%, rgba(209, 230, 163, 1) 100%);
}


.split-layout-bleu{
    background: #E9ECEF;
        background: linear-gradient(90deg, rgba(233, 236, 239, 1) 0%, rgba(233, 236, 239, 1) 60%, rgba(11, 60, 77, 1) 60%, rgba(11, 60, 77, 1) 100%);
}

.split-layout-reverse-bleu {
    padding: 4rem 2rem;
    background: #0B3C4D;
    background: linear-gradient(90deg, rgba(11, 60, 77, 1) 0%, rgba(11, 60, 77, 1) 40%, rgba(233, 236, 239, 1) 40%, rgba(233, 236, 239, 1) 100%);
}


.sf-grid-container.grid-3-cols.margin-top-lg {
    max-width: 1444px;
    margin: 4rem auto 2rem;
}

.grid-3-cols{
    max-width: 1444px;
    margin: 0 auto;
}

.card-img {
    border-bottom: 15px solid var(--primary);
}


section.ana-section.testimonials-section {
    /*-webkit-mask: url(../Images/volute.svg) no-repeat center;
    mask: url(../Images/volute.svg) no-repeat center;
    background-color: #E8ECED;*/

    background-color: #F4F6F6;
    background-image: url(../Images/fond-volute.svg);
    /* background-position: 50% 100%; */
    background-repeat: no-repeat;
    background-size: cover;
}


.menuWrapperPublic .menuItem0.selected:after {
    content: '';
    display: block;
    width: 100%;
    height: 7px;
    margin: -6px 0 0;
    background-image: url(../Images/volute.svg);
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    right: 0;

            -webkit-mask: url(../Images/volute.svg) no-repeat center;
                mask: url(../Images/volute.svg) no-repeat center;
                background-color: var(--primary);
}

.menuWrapperPublic .menuItem0.selected a{
    color: var(--primary)!important;
}

.menuWrapperPublic .menuItem0:hover:after{
        content: '';
        display: block;
        width: 100%;
        height: 7px;
        margin: -6px 0 0;
        /*background-image: url(../Images/volute.svg);*/
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
        right: 0;

        -webkit-mask: url(../Images/volute.svg) no-repeat center;
        mask: url(../Images/volute.svg) no-repeat center;
        background-color: #053950;
    }


.menuWrapperPublic .menuItem0 > a:hover {
        color: #053950;
        text-decoration: none;
}


.menuWrapperPublic .menuItem0>a {
   padding: 1rem 1rem 1.5rem;
}

h1.hero-title {
    margin: 1rem 0.5rem 0.5rem;
    text-align: center;
    max-width: 100%;
}

.heroTitleWrapper {
    margin: 5rem 0;
}

.heroTitleWrapper h2{
    font-size: 2rem;
}

h1.hero-title:after {
    content: '';
    display: block;
    width: 150px;
    height: 7px;
    background-image: url(../Images/volute.svg);
    background-repeat: no-repeat;
    /* margin-top: 8px; */
    /* margin-left: -20px; */
    /* position: absolute; */
    /* top: -20px; */
    /* left: 0; */
    /* right: 0; */
    margin: 0 auto;
    background-position: center;
    margin: 0.5rem auto;
}

.btn-dark {
    margin: 0.5rem 0;
}


.footerPublic {
    background-color: #F4F6F6;
    background-image: url(../Images/forme-pied-de-page.svg);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 150px;
}

.footerTxt {
    margin-top: 8rem;
    color: #fff;
}


.image-side img,
.service-card img,
.solution-img-block img {
    transition: 0.3s ease;
    transform: scale(1);
    overflow: hidden;
    display: block;
}

.image-side img:hover,
.service-card img:hover,
.solution-img-block img:hover {
    transform: scale(1.05);
}

.image-side,
.service-card,
.solution-img-block {
    overflow: hidden;
    position: relative;
}


h3.card-title,
.section-title {
    background: linear-gradient(to right, #93c132 50%, #053950 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    color: transparent;
    transition: background-position 1s
}

h3.card-title:hover,
.section-title:hover {
    background-position: 0 0;
}