@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Montserrat:wght@400;600&display=swap");

/* Police et fond général */
body {
    margin: 0;
    font-family: "Montserrat", sans-serif !important;
    background-color: #0a0018;
    /* fond foncé comme sur l’image */
    color: white;
}

/* HEADER */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 80px;

    position: fixed;
    /* ← clé : reste collé à la fenêtre */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    /* au-dessus du contenu */
    background: #2B294A;
    /* fond (violet foncé) semi-opaque pour la lisibilité */
    backdrop-filter: saturate(1.2) blur(6px);
    /* optionnel, joli effet verre */
    padding: 20px 40px;
    /* adapte si besoin */
    height: 50px;
    /* laisse le contenu définir la hauteur */
}

#header {
    background: transparent;
}


/* Agrandir le logo comme sur la maquette */
.main-logo {
    max-height: 200px;
    width: auto;
    object-fit: contain;
}

/* Pour que les sous-menus passent AU-DESSUS du contenu */
.main-nav,
.dropdown-menu {
    z-index: 10000;
}

/* marge en haut = hauteur du header (à ajuster à ta valeur réelle) */
body {
    padding-top: 96px;
}

/* ex. 96px */
@media (max-width: 768px) {
    body {
        padding-top: 72px;
    }
}


/* NAVIGATION */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-family: "Fjalla One", sans-serif;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .02em;
    line-height: 1;
    padding: 10px 0;
    position: relative;
}

.main-nav a::after {
    /* petit soulignement animé */
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #A1C2FA;
    transition: width .25s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.main-nav a:hover {
    color: #A1C2FA !important;
}



.main-nav a.active {
    color: #A1C2FA !important;
}

.main-nav a.active::after {
    width: 100%;
}

/* Version mobile de la nav */



/* HERO */
/* Section HERO */
.hero {
    position: relative;
    z-index: 0;
    text-align: center;
    color: white;
    padding: 100px 20px 100px;

}


.hero-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.hero h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 400;
    color: white;
    margin: 0;
}

.hero h2 strong {
    font-weight: 900 !important;
    color: white;
    font-size: 52px;

}


.hero p {
    font-size: 20px;
    margin-top: 40px;
    line-height: 1.7;
    color: white;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Montserrat", sans-serif !important;
}



/* Bouton CTA */
.cta-button {
    background-color: white;
    color: #2f2f61 !important;
    font-weight: 700;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    margin-top: 40px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
}

.cta-button:hover {
    background-color: #A1C2FA; /* couleur de fond au survol */
    color: #fff !important;   /* texte en blanc */
}

.cta-button {
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* SERVICE */


.icon-container img {
    width: 300px;
    height: 10 0px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* pour rendre les icônes blanches si besoin */
}




/* Vague inversée vers le haut */
.wave-separator {
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: -10px;
    /* Fait remonter la vague pour fusionner avec le violet */
    overflow: hidden;
    z-index: 2;
    line-height: 0;
}

.wave-separator svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* Faire remonter la section des services pour chevauchement */
#services {
    position: relative;
    z-index: 1;
    margin-top: -80px;
    /* remonte les blocs services */
    background-color: white;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: 100px 20px 80px;
}

/* Texte intégré dans la section services */
.services-text {
    text-align: center;
    margin-top: -480px;
    padding: 0 20px;
    width: 100%;
}

.services-text h2 {
    font-family: "Montserrat", sans-serif !important;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    color: #2f2f61;
    margin-bottom: 30px;
}

.services-text h2 .bold {
    font-weight: bolder; 
    color: #2f2f61;
}

.services-text h2 .highlight {
    font-weight: 800; 
    color: #2f2f61;
}

.services-text .desc {
    font-family: "Montserrat", sans-serif !important;
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 600;
    color: #1a1a40;
    text-align: center;
    max-width: 1500px;
    margin: 0 auto;
}


.service-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    margin-bottom: 40px;
}

.service-label {
    margin-top: 10px;
    font-size: 14px;
    color: #4b4bc6;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    text-align: center;
}




/* PARETNAIRES */
#clients {
    background-color: white;
    padding: 60px 20px 28px;
    text-align: left;
}

.clients-title-wrapper {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    /* ajoute un peu d’espace sur les côtés */
}


.titre-clients {
    display: block;
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
}



.clients-container .semi-bold {
    font-weight: 400;
}

.clients-container .bold {
    font-weight: 700;
}

.logos-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.logos-slider {
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    width: 90%;
}

.logos-track {
    display: flex;
    gap: 5px;
    align-items: center;
}

.logos-track img {
    height: 100px;
    object-fit: contain;
    filter: grayscale(0%);
    transition: filter 0.3s ease;
}

.logos-track img:hover {
    filter: grayscale(0%);
}

.arrow {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #4b4bc6;
    padding: 10px;
    transition: transform 0.2s ease;
}

.arrow:hover {
    transform: scale(1.2);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dots .dot.active {
    background-color: #4b4bc6;
}




/* SECTION INFO AVEC LOGO CENTRÉ SUR FOND VIOLET */
.info {

    display: flex;
    /* ✅ Pour centrer verticalement + horizontalement */
    justify-content: center;
    align-items: center;
    min-height: 10px;
    /* Ajuste selon ta maquette */
    text-align: center;
    margin-top: -100px;
}

.info-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1000px;
    /* légèrement plus large */
    padding: 0 20px;
}

.info-logo {
    height: 300px;
    width: 300px;
    margin-bottom: -60px;
}


.info-text {
    font-size: 14.5px;
    line-height: 1.8;
    font-family: "Montserrat", sans-serif;
    color: white;
    max-width: 900px;
    /* contrôle la largeur d'affichage */
}


/* ===== FOOTER STYLE ===== */

/* .olcya-footer {
    background: white;
    padding: 40px 60px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    font-family: "Montserrat", sans-serif;
    max-width: 1200px;
    margin: 30px ;
} */


.footer-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-column {
    flex: 1 1 300px;
    min-width: 250px;
}

.footer-column h3 {
    font-family: "Fjalla One", sans-serif;
    font-size: 18px;
    color: black;
    margin-bottom: 20px;
}

.footer-column p,
.footer-column a,
.footer-column li {
    font-size: 14px;
    color: #1a1a40;
    line-height: 1.8;
}

.footer-column p span {
    background-color: #8e83d6;
    color: white;
    border-radius: 10%;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 16px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}



.footer-column ul li a {
    color: #1a1a40;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #8e83d6;
    text-decoration: underline;
}

.footer-column ul li a {
    color: #1a1a40;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    /* ✅ Texte en gras */
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s;
}

.footer-column p {
    margin-bottom: 12px;
}


.custom-section {
    background: white;
    padding: 60px 20px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
}

.section-block {
    margin-bottom: 50px;
}

.section-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 24px;
    color: #2f2f61;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.logo-row,
.team-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.logo-row img,
.team-row img {
    height: 50px;
    object-fit: contain;
}

.team-row img {
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ccc;
}

.partners-box {
    background-color: #dfe7f5;
    padding: 30px;
    border-radius: 8px;
    font-weight: bold;
    color: #333;
    max-width: 400px;
    margin: 0 auto;
}

.career-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.career-buttons button {
    background-color: #e0e7ff;
    border: none;
    padding: 15px 25px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #2f2f61;
    transition: background-color 0.3s;
}

.career-buttons button:hover {
    background-color: #c7d2fe;
}



#services {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 100px 20px 80px;
    background-color: white;
    flex-wrap: wrap;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}


.service-card {
    background-color: white;
    border-radius: 16px;
    padding: 30px 20px;
    max-width: 300px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    font-family: "Montserrat", sans-serif;
    margin-top: -390px;
    height: 250px;
}

.service-card {
    perspective: 800px;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon img {
    animation: iconPop 0.6s ease forwards;
}

@keyframes iconPop {
    0% {
        transform: scale(1) translateZ(0);
    }

    50% {
        transform: scale(1.2) translateZ(20px);
    }

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


.service-card:hover {
    transform: translateY(-5px);
}

/* Par ceci : */
.service-card .service-icon{
  background: #8F7AD6; /* fallback */
  background: linear-gradient(90deg, #8F7AD6 0%, #A1C2FA 100%);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.service-card h3 {
    color: #2f2f61;
    font-family: "Fjalla One", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4b4b4b;
}

.service-card p strong {
    color: #4b4bc6;
}


.about-section {
    padding: 60px 0;
    margin-top: 40px;
    width: 100%;
    background-color: white;
    color: #2b294a;
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    font-family: 'Montserrat', sans-serif;
}

.about-content h2 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 32px;
    color: #2b294a;
}

.about-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.about-content ul {
    padding-left: 20px;
}

.about-content li {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.timeline ul {
    list-style: disc;
    padding-left: 20px;
}

.timeline li {
    margin-bottom: 8px;
}


/* Dropdown Style */
.main-nav li.dropdown {
    position: relative;
}

.main-nav li.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #2f2f61;
    padding: 10px 0;
    list-style: none;
    min-width: 200px;
    z-index: 999;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-nav li.dropdown:hover .dropdown-menu {
    display: block;
}

.main-nav li.dropdown .dropdown-menu li {
    padding: 0;
    margin: 0;
}

.main-nav li.dropdown .dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: white;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s;
    font-family: "Montserrat", sans-serif;
}

.main-nav li.dropdown .dropdown-menu a:hover {
    background-color: #A1C2FA;
    color: #fff !important
}


/* Offres Data Section */
/* Étendre le fond blanc sur toute la page */
.offres-data {
    width: 100vw;
    background-color: #fff;
    padding: 60px 0;
}

/* Conserver le contenu centré dans un conteneur */
.offres-data .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-family: 'Montserrat', sans-serif;
    color: #1a1a40;
}


.offres-data h2 {
    color: #2f2f61;
    font-size: 22px;
    margin-top: 40px;
    font-family: 'Fjalla One', sans-serif;
}

.offres-data p {
    font-size: 14px;
    margin-bottom: 30px;
    color: #333;
}

.services-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 40px;
}

.service-data-card {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.service-data-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #2f2f61;
}

.service-data-card p {
    font-size: 13px;
    margin-bottom: 10px;
    color: #555;
}

.service-data-card a {
    font-size: 13px;
    color: #4b4bc6;
    text-decoration: none;
}

.service-data-card a:hover {
    text-decoration: underline;
}

/* =============================== */
/* EFFET DE BORDURE ANIMÉE CARTE */
/* =============================== */
.service-data-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 0;
}

.service-data-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #4b4bc6;
    border-radius: 8px;
    transform: scale(0);
    transition: transform 0.4s ease;
    z-index: -1;
}

.service-data-card:hover::before {
    transform: scale(1);
}

/* =============================== */
/* EFFET DE BORDURE IMAGE ANIMÉE */
/* =============================== */
.icon-wrapper {
    position: relative;
    display: inline-block;
}

.icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #4b4bc6;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s ease;
}

.service-data-card:hover .icon-wrapper::before {
    transform: scale(1);
}



/* Wave separator bottom css */
.wave-separator-bottom {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}

.wave-separator-inverted {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: -5px;
    /* Colle le SVG à la section suivante */
}

.wave-separator-inverted svg {
    display: block;
    width: 100%;
    height: 120px;
}

#main-footer {
    margin-top: -10px;
}


/* Bloc header dans la grille, mais sans ressembler à une carte */
.offres-header {
    grid-column: 1 / -1;
    /* prend toute la largeur de la grille */
    text-align: left;
}

.offres-header h2 {
    font-size: 26px;
    font-family: "Fjalla One", sans-serif;
    color: #2f2f61;
    text-transform: uppercase;
    margin-bottom: 10px;
}


.offres-header p {
    font-size: 15px;
    color: #444;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 20px;
    line-height: 1.6;
}

.offres-header hr {
    border: none;
    border-bottom: 2px solid #ddd;
    width: 100%;
    margin-top: 10px;
}

/* Icônes dans les cartes */
.icon-wrapper {
    width: 60px;
    /* ou plus si tu veux */
    height: 60px;
    margin-bottom: 10px;
}

.icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-wrapper img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}


/* Lien Learn more */
.learn-more-link {
    display: inline-block;
    font-size: 13px;
    color: #4b4bc6 !important;
    text-decoration: none !important;
    font-weight: 500;
    margin-top: 10px;
    transition: all 0.3s ease;
}


.learn-more-link:hover {
    text-decoration: underline !important;
    color: #2f2f61;
}


/* domaine specifique pour offre data */

.nos-domaines-section-data {
    max-width: 1140px;
    margin: 60px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    /* gris clair */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* effet carte */
}



.nos-domaines-section-data .offres-header {
    text-align: center;
    margin-bottom: 40px;
}

.domaines-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Deux colonnes fixes */
    gap: 20px;
    justify-content: center;
    max-width: 800px;
    /* optionnel pour limiter la largeur */
    margin: 0 auto;
}



.domaine-card-data {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
    border: 1px solid #f0f0f0;
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
}





.domaine-card-data:hover {
    transform: translateY(-3px);
}

.icon-data {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 10px;
}

.domaine-card-data strong {
    display: block;
    font-size: 16px;
    color: #2f2f61;
    margin-bottom: 5px;
}

.domaine-card-data span {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* effet des carte de service */


.domaine-card-data:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(36, 107, 252, 0.2);
}

.domaine-card-data:hover .icon-wrapper img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}



.domaine-card-data {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 0;
    border: 2px solid transparent;
    /* pour éviter le décalage */
}

/* Bordure animée bleue au survol */
.domaine-card-data::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid #4b4bc6;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-in-out;
}

.domaine-card-data:hover::before {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    .domaines-data {
        grid-template-columns: 1fr;
        /* Une carte par ligne sur petits écrans */
    }
}



/* la suite de footer */


.footer-column .footer-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}


@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Montserrat:wght@400;600&display=swap');

.custom-footer {
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 40px;
    font-family: 'Montserrat', sans-serif;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    max-width: 1200px;
    margin: 30px auto;
    /* ✅ ici ! */
    gap: 40px;
    flex-wrap: wrap;
}


.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 18px;
    color: #000;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-column p,
.footer-column li,
.footer-column a {
    font-size: 14px;
    color: #1a1a40;
    line-height: 1.8;
    text-decoration: none;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 1px;
    /* ✅ Réduit l'espacement */
}


.footer-column ul li a:hover {
    color: #8e83d6;
    text-decoration: underline;
}

.footer-icon {
    background-color: #8e83d6;
    border-radius: 8px;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    padding: 6px;
}

.footer-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.lire-la-suite {
    color: black !important;
    text-decoration: none !important;
    font-weight: 500;
    font-style: italic;
}

@media (max-width: 768px) {
    .services-text h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .services-text .desc {
        font-size: 13px;
        padding: 0 10px;
    }
}


@media (max-width: 768px) {
    .custom-footer {
        flex-direction: column;
        gap: 30px;
        padding: 30px 20px;
    }
}

/* Pour la section a propos */

/* SECTION QUI PREND TOUTE LA LARGEUR (fond blanc total) */
/* SECTION QUI PREND TOUTE LA LARGEUR (fond blanc + image blobs atténuée) */
.olcya-about-section {
    position: relative;
    background: #fff url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original2-op.jpg?t=1753925469") no-repeat center center;
    background-size: 100%;
    width: 100%;
    padding: 40px 20px;
    z-index: 1;
}

/* voile blanc par-dessus l'image */
.olcya-about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85); /* ⇦ ajuste l’opacité (0.75–0.9) */
    z-index: 0;
}

/* contenu au-dessus du voile */
.olcya-about-section > * {
    position: relative;
    z-index: 1;
}



/* Contenu centré dans la section */
.olcya-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Montserrat", sans-serif;
    color: #2f2f61;
}

/* Grid deux colonnes */
.olcya-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.olcya-left,
.olcya-right {
    flex: 1 1 45%;
    min-width: 300px;
}

.main-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    margin-bottom: 10px;
    color: #2b294a;
}

.timeline-image {
    width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.olcya-left p,
.olcya-right p {
    margin-bottom: 15px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .olcya-grid {
        flex-direction: column;
    }
}

/* La section rejoingnez-nous */
/* .rejoignez-nous-section {
    padding: 80px 20px;
    background: #fff;
    font-family: "Montserrat", sans-serif;
} */

.rejoignez-nous-section {
    position: relative;
    background: #fff url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original2-op.jpg?t=1753925469") no-repeat center center;
    background-size: 130%;
    padding: 80px 20px;
    z-index: 1;
    font-family: "Montserrat", sans-serif;
}

/* voile blanc par-dessus le background */
.rejoignez-nous-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85); /* ⇦ ajuste ici l’opacité */
    z-index: 0;
}

/* contenu au-dessus du voile */
.rejoignez-nous-section > * {
    position: relative;
    z-index: 1;
}


/* Titres */
.rejoignez-title {
    text-align: center;
    font-family: "Fjalla One", sans-serif;
    font-size: 32px;
    color: #2f2f61;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.rejoignez-subtitle {
    text-align: center;
    font-size: 14px;
    color: #555;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Icône à gauche de chaque offre */
.rejoignez-icon {
    width: 60px;
    height: 60px;
}

.rejoignez-icon-intro {
    width: 32px;
    height: 32px;
}

/* Conteneur des offres */
.offres-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* Carte d'offre */
.offre-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 400px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offre-content {
    display: flex;
    align-items: center;
    /* ✅ centrage vertical de l’icône */
    gap: 16px;
}

.offre-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.offre-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.offre-details p {
    margin: 2px 0;
    font-size: 14px;
    color: #333;
}

/* Bouton dans les cartes */
.btn-container {
    margin-top: auto;
    padding-top: 12px;
}

.btn-offre {
    display: inline-block;
    padding: 8px 16px;
    background-color: #A1C2FA;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-offre:hover {
    background-color: #A1C2FA;
}

/* Candidature spontanée */
.candidature-section {
    text-align: center;
    background-color: white;
    padding: 30px 20px;
    border-radius: 8px;
    max-width: 700px;
    border: 1px solid #ddd;
    margin: 40px auto 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.candidature-section p {
    margin: 5px 0;
    font-size: 15px;
    color: #333;
}

.btn-candidature {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #A1C2FA;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-candidature:hover {
    background-color: #A1C2FA;
}

@media (max-width: 1024px) {
    .offre-card {
        width: 100%;
        max-width: 90%;
    }
}

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

    .offre-card {
        width: 100%;
        max-width: 95%;
        padding: 16px;
    }

    .btn-offre {
        width: 100%;
        text-align: center;
    }
}

.nos-technologies-section {
    background-color: white;
    padding: 80px 20px;
    text-align: center;
}

.nos-technologies-section h2 {
    font-family: "Fjalla One", sans-serif;
    font-size: 24px;
    color: #2f2f61;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.technologies-carousel {
    background-color: #f5f5f5;
    ;
    padding: 60px 20px;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}

.titre-technologies {
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    text-transform: uppercase;
    text-align: left;
    margin: 0 auto 40px auto;
    max-width: 1200px;
}

.carousel-track {
    display: flex;
    gap: 60px;
    animation: scroll-logos 20s linear infinite;
    max-width: 1200px;
    margin: 0 auto 40px auto;
}

.carousel-track img {
    height: 100px;
    flex-shrink: 0;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.carousel-track img:hover {
    transform: scale(1.1);
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    /* marge à gauche et droite */
    overflow: hidden;
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 60px;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Flèches */
.carousel-arrow {
    background: white;
    border: 2px solid #4b4bc6;
    color: #4b4bc6;
    border-radius: 50%;
    font-size: 28px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    background-color: #4b4bc6;
    color: white;
}


/*sections partenaires */
#partenaires-olcya {
    background-color: white;
    padding: 60px 20px;
    text-align: center;
}

.partenaires-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* marge équilibrée à gauche et à droite */
}

.titre-partenaires {
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.logos-partenaires {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 40px;
}

.logos-partenaires img {
    height: 100px;
    max-width: 180px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}


.logos-partenaires img:hover {
    transform: scale(1.05);
}


/*sections partenaires */
#equipes-olcya {
    background-color: #e0e7ff;
    padding: 60px 20px;
    text-align: center;
}

.equipes-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* marge équilibrée à gauche et à droite */
}

.titre-equipes {
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.logos-equipes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 40px;
}

.logos-equipes img {
    height: 100px;
    max-width: 180px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}


.logos-equipes img:hover {
    transform: scale(1.05);
}



/*sections carrières */
#carrieres-olcya {
    background-color: white;
    padding: 60px 20px;
    text-align: center;
}

.carrieres-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* marge équilibrée à gauche et à droite */
}

.titre-carrieres {
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.logos-carrieres {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 40px;
}

.logos-carrieres img {
    height: 100px;
    max-width: 180px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}


.logos-carrieres img:hover {
    transform: scale(1.05);
}




/* la section nous rejoindre pour la partie detail engeneer */

.detail-offre-section {
    padding: 80px 20px;
    background: #ffffff;
    /* fond blanc */
    color: #333333;
    font-family: 'Montserrat', sans-serif !important;
}

.container {
    max-width: 1000px;
    margin: auto;
    animation: fadeIn 1.2s ease-in-out;
}

.detail-offre-title {
    font-size: 36px;
    font-family: "Fjalla One", sans-serif !important;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #2f2f61;
    text-align: center;
}


.detail-offre-meta {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    font-size: 18px;
    color: #666666;
    margin-bottom: 30px;
}

.offre-glass-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 30px;
    margin: 25px 0;
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    animation: slideUp 1s ease;
}

.offre-glass-card h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #4b4bc6;
    font-weight: 600;
}

.offre-glass-card ul {
    list-style: none;
    padding-left: 0;
}

.offre-glass-card ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: #444444;
    line-height: 1.6;
}

.offre-glass-card ul li::before {
    content: "✔️";
    position: absolute;
    left: 0;
    color: #1e4dd8;
}

.cta-postuler {
    text-align: center;
    margin-top: 50px;
}

.btn-offre {
    background: linear-gradient(135deg, #A1C2FA, #8e83d6);
    padding: 16px 36px;
    font-size: 18px;
    border-radius: 50px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(30, 77, 216, 0.2);
}

.btn-offre:hover {
    background: linear-gradient(135deg, #8e83d6, #A1C2FA);
    transform: scale(1.05);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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


.timeline {
    position: relative;
    margin-left: 20px;
    padding-left: 30px;
    border-left: 3px solid #4b4bc6;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.timeline-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

.timeline-icon {
    position: absolute;
    left: -20px;
    top: 0;
    background-color: #4b4bc6;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 0 4px white;
}

.timeline-content {
    margin-left: 20px;
}

.timeline-content h4 {
    font-size: 18px;
    color: #2f2f61;
    margin-bottom: 5px;
    font-family: "Fjalla One", sans-serif;
}

.timeline-content p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    font-family: "Montserrat", sans-serif;
}

.zoom-on-hover {
    transition: transform 0.3s ease;
    cursor: zoom-in;
    max-width: 100%;
}

.zoom-on-hover:hover {
    transform: scale(1.05);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90vh;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 768px) {
    .timeline {
        padding-left: 20px;
        border-left: 2px solid #4b4bc6;
    }

    .timeline-icon {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .timeline-content h4 {
        font-size: 16px;
    }

    .timeline-content p {
        font-size: 13px;
    }
}

/* La section de Blog */


/* Appliquer uniquement quand un blog est présent */
body.has-blog #content {
    padding-top: 200px;
}

/* Ou seulement le bloc blog (si tu ne veux pas blanchir #content) */
body.has-blog #content .j-blog.j-blogarticle {
    background: #fff;
    padding: 24px;
}

/* ====== SECTION / CONTAINER ====== */
body.has-blog #content .j-blog.j-blogarticle {
    background: #fff;
    margin: 0 auto;
    padding: 40px 20px;
}



/* ====== BLOG LISTE – STYLE "CARDS GRID" ====== */
body.has-blog .j-blog.n.clearover.j-blogarticle {
    margin: 0 auto;
    padding: 24px 12px 40px;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    background: #fff;
    /* fond blanc comme la capture */
}

/* chaque article (Jimdo crée un cc-matrix par post) */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* image en haut, recadrée */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .cc-imagewrapper {
    margin: 0;
    display: block;
}

body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .cc-imagewrapper img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* titre */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .j-blog-headline {
    font: 700 18px/1.3 "Montserrat", sans-serif;
    color: #0e1b4d;
    margin: 14px 16px 8px;
}

/* extrait */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-excerpt {
    margin: 0 16px 12px;
    color: #505050;
    font-size: 14px;
    line-height: 1.6;
}


body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a:hover {
    filter: brightness(0.92);
}

/* on masque les espacers Jimdo dans les cartes */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .j-spacing {
    display: none
}

/* badge date façon capture */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: #2B294A;
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

body.has-blog .post-badge .day {
    display: block;
    font: 800 16px/1 "Montserrat";
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .4)
}

body.has-blog .post-badge .month {
    display: block;
    font: 700 10px/1 "Montserrat";
    padding: 4px 0 8px;
    letter-spacing: .3px
}

/* pagination (Jimdo varie un peu les classes, on cible large) */
body.has-blog .cc-pagination,
body.has-blog .j-pagination,
body.has-blog nav[class*="pagination"] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px auto 0;
}

body.has-blog .cc-pagination a,
body.has-blog .j-pagination a,
body.has-blog nav[class*="pagination"] a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #0e1b4d;
    text-decoration: none;
    font: 600 12px/1 "Montserrat";
}

body.has-blog .cc-pagination .active a,
body.has-blog nav[class*="pagination"] .active a {
    background: #4b4bc6;
    color: #fff;
    border-color: #4b4bc6
}


/* grid-template-columns:repeat(3, 1fr); */
@media (max-width:1024px) {
    body.has-blog .j-blog.n.clearover.j-blogarticle {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:680px) {
    body.has-blog .j-blog.n.clearover.j-blogarticle {
        grid-template-columns: 1fr
    }
}


/* ===== PAGINATION LOOK (style capture) ===== */
.blog-pager {
    display: flex;
    justify-content: center;

    /* fond blanc qui s'affiche bien */
    background: #fff;
    width: 100%;
    padding: 16px 0;
    /* espace vertical à la place de la marge */
    margin: 0;
    /* surtout pas de margin top si tu veux voir le fond blanc */
    border-top: 1px solid #e5e7eb;
    /* petite séparation optionnelle */
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .02) inset;
    /* léger relief optionnel */
}

.blog-pager ul {
    list-style: none;
    display: flex;
    gap: 6px;
    padding: 0;
    margin: 0
}

.blog-pager li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #0e1b4d;
    text-decoration: none;
    font: 600 12px/1 "Montserrat", sans-serif
}

.blog-pager li.active a {
    background: #4b4bc6;
    color: #fff;
    border-color: #4b4bc6
}

.blog-pager li.disabled a {
    opacity: .5;
    pointer-events: none
}

.blog-pager li.ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: #666
}


.blog-pager {
    background: #fff;
    padding: 16px 0
}

.blog-pager ul {
    max-width: 1200px;
    margin: 0 auto
}

/* --- DATE BADGE à DROITE --- */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-badge {
    top: 12px;
    right: 12px;
    left: auto;
    /* ← à droite */
    width: 44px;
    border-radius: 10px;
}

/* (garde tes .day / .month existants) */

/* --- ZONE LIEN "LIRE PLUS" AVEC TRAIT --- */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore {
    margin-top: auto;
    /* pousse la zone en bas de la carte */
    margin-left: 0;
    margin-right: 0;
    /* on gère l'espace avec le padding */
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    /* ← le trait séparateur */
    background: #fff;
}

/* lien simple + icône avant (Font Awesome déjà chargé) */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4b4b4b;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
}

body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a:hover {
    color: #4b4bc6;
}

/* --- LIEN "Lire la suite" avec flèche à gauche --- */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a {
    /* lien texte (pas un bouton) */
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 14px/1.3 "Montserrat", sans-serif;
    color: #4b4b4b;
    text-decoration: none !important;
}

body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a:hover {
    color: #4b4bc6;
}

/* icône flèche FA avant le texte */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a::before {
    content: "\f061";
    /* fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px);
}

/* --- FIX "Lire la suite" visible + flèche APRÈS le texte --- */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

/* lien texte (pas de bouton) */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #4b4b4b !important;
    /* ← visible par défaut */
    font: 600 14px/1.3 "Montserrat", sans-serif;
    text-decoration: none !important;
}

/* on neutralise toute ancienne icône "avant" */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a::before {
    content: none !important;
}

/* flèche APRÈS le texte */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a::after {
    content: "\f061";
    /* fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    margin-left: 8px;
    transform: translateY(1px);
}

/* état hover */
body.has-blog .j-blog.n.clearover.j-blogarticle>[id^="cc-matrix-"] .post-readmore a:hover {
    color: #4b4bc6 !important;
}



/* Détail d’un article (seulement) */
body.has-blog-detail {
    padding-top: 200px;
    /* décollé du header */
    background: #fff;
    /* fond blanc derrière la page */
}

/* Page détail du blog uniquement */
body.has-blog-detail #content {
    background: #fff !important;
    /* fond blanc du contenu */
    color: #1a1a1a;
    /* (option) texte lisible sur blanc */
}

/* (option) cadrer le bloc article */
body.has-blog-detail #content .j-blog,
body.has-blog-detail #content .j-blog-post--header,
body.has-blog-detail #content .j-blog-post--content {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
}

/* Laisse le header transparent */
/* .main-header {
    background: transparent !important;
} */


/* ===========================
   COMMENTAIRES – STYLE "CARTE"
   =========================== */

/* Conteneur principal (carte blanche comme le blog) */
body.has-blog-detail #content .n.j-comment {
    max-width: 1100px;
    margin: 24px auto 60px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    padding: 24px 24px 28px;
}

/* En-tête: compteur + lien "Écrire commentaire" */
body.has-blog-detail #content .n.j-comment .j-blog-comment-counter {
    font: 600 14px/1.2 "Montserrat", sans-serif;
    color: #2f2f61;
    margin: 0 0 12px;
}

body.has-blog-detail #content .n.j-comment .skiptoform {
    float: right;
    margin-top: -28px;
    /* aligne sur la 1re ligne */
}

body.has-blog-detail #content .n.j-comment .skiptoform a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #4b4bc6 !important;
    text-decoration: none !important;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: background .25s, border-color .25s, color .25s;
}

body.has-blog-detail #content .n.j-comment .skiptoform a::before {
    content: "\f4ad";
    /* fa-pen */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
}

body.has-blog-detail #content .n.j-comment .skiptoform a:hover {
    background: #f6f7ff;
    border-color: #d9def8;
    color: #2f2f61 !important;
}

/* Supprimer la vilaine ligne et la numérotation */
body.has-blog-detail #content .n.j-comment [id^="commentOutput"] {
    border: 0 !important;
}

body.has-blog-detail #content .n.j-comment .commentstd {
    border: 0 !important;
    padding: 0;
}

body.has-blog-detail #content .n.j-comment .commentstd .number {
    display: none;
}

body.has-blog-detail #content .n.j-comment .com-meta {
    display: none;
}

/* Formulaire en grid propre */
body.has-blog-detail #content .n.j-comment .commententry form {
    display: grid;
    gap: 14px;
}

body.has-blog-detail #content .n.j-comment .commententry form dl,
body.has-blog-detail #content .n.j-comment .commententry form div {
    margin: 0;
}

body.has-blog-detail #content .n.j-comment .commententry label {
    display: inline-block;
    margin-bottom: 6px;
    font: 600 14px/1 "Montserrat", sans-serif;
    color: #2f2f61;
}

body.has-blog-detail #content .n.j-comment input[type="text"],
body.has-blog-detail #content .n.j-comment textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    font: 500 14px/1.4 "Montserrat", sans-serif;
    color: #1a1a1a;
    transition: border-color .2s, box-shadow .2s;
}

body.has-blog-detail #content .n.j-comment textarea {
    min-height: 180px;
    resize: vertical;
}

body.has-blog-detail #content .n.j-comment input[type="text"]:focus,
body.has-blog-detail #content .n.j-comment textarea:focus {
    outline: none;
    border-color: #4b4bc6;
    box-shadow: 0 0 0 4px rgba(75, 75, 198, .12);
}

/* Mention RGPD */
body.has-blog-detail #content .n.j-comment a[href*="/j/privacy"] {
    color: #4b4bc6;
    font-weight: 600;
    text-decoration: none;
}

body.has-blog-detail #content .n.j-comment a[href*="/j/privacy"]:hover {
    text-decoration: underline;
}

/* Bouton Envoyer (même esprit que tes CTA) */
body.has-blog-detail #content .n.j-comment input[type="submit"] {
    appearance: none;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    font: 700 14px/1 "Montserrat", sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #1e4dd8, #00bfff);
    box-shadow: 0 6px 14px rgba(30, 77, 216, .24);
    transition: transform .1s, box-shadow .2s, background .2s;
}

body.has-blog-detail #content .n.j-comment input[type="submit"]:hover {
    background: linear-gradient(135deg, #00bfff, #1e4dd8);
    transform: translateY(-1px);
}

body.has-blog-detail #content .n.j-comment input[type="submit"]:active {
    transform: translateY(0);
}

/* Texte d’aide "Champs obligatoires" */
body.has-blog-detail #content .n.j-comment #mandFields-label {
    display: none;
}

body.has-blog-detail #content .n.j-comment div[style*="Champs obligatoires"] {
    color: #666;
    font-size: 12px;
    margin-top: 4px !important;
}

/* Messages succès/erreur Jimdo */
body.has-blog-detail #content .n.j-comment .message-ok,
body.has-blog-detail #content .n.j-comment .message-error {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
}

body.has-blog-detail #content .n.j-comment .message-ok {
    background: #edfdf4;
    color: #05603a;
    border: 1px solid #abefc6;
}

body.has-blog-detail #content .n.j-comment .message-error {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
}

/* (quand des commentaires existent) carte par commentaire */
body.has-blog-detail #content .n.j-comment .com-list-noava>li:not([id^="commentFormContainer"]) {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    margin: 14px 0;
}

body.has-blog-detail #content .n.j-comment .com-list-noava>li:not([id^="commentFormContainer"]) .com-meta {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 6px;
}

/* Responsive */
@media (max-width:680px) {
    body.has-blog-detail #content .n.j-comment {
        padding: 18px;
    }

    body.has-blog-detail #content .n.j-comment .skiptoform {
        float: none;
        text-align: right;
        margin: 0 0 8px 0;
    }
}

/* Détail : images en pleine largeur, pas de hauteur forcée */
body.has-blog-detail .j-blog-post--content .cc-imagewrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Détail : texte lisible */
body.has-blog-detail .j-blog-post--content p {
    font: 16px/1.7 "Montserrat", sans-serif;
    color: #1a1a1a;
    margin: 0 0 1em;
}

/* Page détail du blog : éviter l’effondrement de marge en bas */
body.has-blog-detail #content {
    background: #fff !important;
    padding-bottom: 60px;
    /* même valeur que la marge que tu veux visuellement */
}

/* Retirer la marge basse de la zone commentaires (ou du dernier enfant) */
body.has-blog-detail #content .n.j-comment {
    margin-bottom: 0;
}

/* Variante plus générale : aucun margin-bottom sur le dernier enfant du content */
body.has-blog-detail #content>*:last-child {
    margin-bottom: 0 !important;
}


/* ===========================
   CONTACT – HERO (bandeau)
   =========================== */
.olcya-contact-hero {
    position: relative;
    background: radial-gradient(1000px 400px at 50% 0, #30155a 10%, #17002e 60%, #0a0018 100%);
    /* si tu as déjà un motif de fond violet en image, tu peux le mettre ici en background-image */
    color: #fff;
    text-align: center;
    padding: 52px 20px 24px;
    /* haut / côtés / bas */
}

.olcya-contact-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.olcya-contact-hero h1 {
    font-family: "Fjalla One", sans-serif;
    font-size: 42px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
}

.olcya-contact-hero__wave {
    line-height: 0;
    margin-top: 18px;
}

.olcya-contact-hero__wave svg {
    width: 100%;
    height: 70px;
    display: block;
}

/* ===========================
   CONTACT – CONTENU
   =========================== */
.olcya-contact {
    background: #fff;
    padding: 36px 20px 60px;
    margin-bottom: -10px;
}

.olcya-contact__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(280px, 360px) 1fr;
}

/* Colonne gauche (infos) */
.olcya-contact__left .info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
}

.olcya-contact__left .info-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #1f3e73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 167, 255, .25);
    flex-shrink: 0;
}

.olcya-contact__left .info-icon i {
    color: #fff;
    font-size: 22px;
}

.olcya-contact__left .info-text {
    line-height: 1.5;
    color: #1a1a1a;
}

.olcya-contact__left .info-label {
    font-family: "Fjalla One", sans-serif;
    font-size: 12px;
    color: #2f2f61;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.olcya-contact__left a {
    color: #1f3e73;
    text-decoration: none;
}

.olcya-contact__left a:hover {
    text-decoration: underline;
}

/* Colonne droite (cartes) */
.olcya-contact__cards {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.c-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    min-height: 170px;
    display: flex;
    flex-direction: column;
}

.c-card__title {
    margin: 0 0 6px 0;
    color: #1f3e73;
    font-weight: 700;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.25;
}

.c-card__rule {
    display: block;
    width: 28px;
    height: 2px;
    background: #1f3e73;
    margin: 4px 0 10px 0;
}

.c-card__name {
    margin: 0 0 4px 0;
    color: #1a1a1a;
    font-weight: 600;
}

.c-card__mail {
    margin: 0;
    color: #4b4b4b;
}

.c-card__mail a {
    color: #0b63b0;
    text-decoration: none;
}

.c-card__mail a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .olcya-contact__cards {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 720px) {
    .olcya-contact__grid {
        grid-template-columns: 1fr;
    }

    .olcya-contact-hero h1 {
        font-size: 34px;
    }

    .olcya-contact__cards {
        grid-template-columns: 1fr;
    }
}


/* --- Contact gauche = même look que le footer --- */
.olcya-contact__left .info-label {
    display: none;
}

/* on cache les titres ADRESSE / TÉLÉPHONE ... */

.olcya-contact__left .contact-line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.olcya-contact__left .contact-icon {
    background-color: #8e83d6;
    /* même violet que le footer */
    border-radius: 8px;
    display: inline-flex;
    width: 40px;
    /* un peu plus grand que le footer */
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
}

.olcya-contact__left .contact-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.olcya-contact__left .contact-text {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #8e83d6;
    /* texte violet comme dans le footer */
    line-height: 1.4;
}

.olcya-contact__left .contact-text a {
    color: #8e83d6;
    text-decoration: none;
}

.olcya-contact__left .contact-text a:hover {
    text-decoration: underline;
}


/* Palette (ajuste si besoin) */
:root {
    --card-bluegris-1: #2e6db5;
    /* plus clair */
    --card-bluegris-2: #1f3e73;
    /* plus foncé */
}

/* Effet "remplissage" + inversion des couleurs */
.olcya-contact__cards .c-card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* calque de couleur qui s'affiche au hover (plus fluide qu'un background direct) */
.olcya-contact__cards .c-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--card-bluegris-1) 0%, var(--card-bluegris-2) 100%);
    opacity: 0;
    /* invisible par défaut */
    transition: opacity .25s ease;
    pointer-events: none;
    /* ne gêne pas les clics */
}

.olcya-contact__cards .c-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
    border-color: transparent;
}

.olcya-contact__cards .c-card:hover::after {
    opacity: 1;
}

/* mettre le contenu au-dessus du calque */
.olcya-contact__cards .c-card>* {
    position: relative;
    z-index: 1;
}

/* texte en blanc au hover */
.olcya-contact__cards .c-card:hover .c-card__title,
.olcya-contact__cards .c-card:hover .c-card__name,
.olcya-contact__cards .c-card:hover .c-card__mail,
.olcya-contact__cards .c-card:hover .c-card__mail a {
    color: #fff !important;
}

/* si tu utilises la petite barre sous le titre */
.olcya-contact__cards .c-card:hover .c-card__rule {
    background: #fff;
}

/* accessibilité : moins d'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {

    .olcya-contact__cards .c-card,
    .olcya-contact__cards .c-card::after {
        transition: none;
    }
}




/* ====== PRIVACY PAGE (Jimdo Creator) ====== */

body.has-privacy #content {
    padding-top: 200px !important;
}

/* Ou seulement le bloc privacy (si tu ne veux pas blanchir #content) */
body.has-privacy #content .cc-privacy {
    background: #fff;
    padding: 24px;
}

/* Carte centrale propre */
body.has-privacy #content .cc-privacy {
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    /* border-radius: 16px; */
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    padding: clamp(20px, 3vw, 40px);
}

/* Titre principal */
body.has-privacy #content .cc-privacy h1 {
    font-family: "Fjalla One", sans-serif;
    font-size: clamp(28px, 4.2vw, 40px);
    color: #2f2f61;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0 0 12px 0;
}

/* Sous-titres */
body.has-privacy #content .cc-privacy h2,
body.has-privacy #content .cc-privacy h3 {
    font-family: "Fjalla One", sans-serif;
    color: #2f2f61;
    margin: 28px 0 10px;
    line-height: 1.25;
}

/* Paragraphe + listes */
body.has-privacy #content .cc-privacy p {
    margin: 0 0 14px;
    line-height: 1.7;
    color: #333;
    font-size: 16px;
}

body.has-privacy #content .cc-privacy ul,
body.has-privacy #content .cc-privacy ol {
    margin: 8px 0 16px 22px;
    line-height: 1.7;
}

/* Liens */
body.has-privacy #content .cc-privacy a {
    color: #0b63b0;
    text-decoration: none;
    border-bottom: 1px dashed rgba(11, 99, 176, .35);
}

body.has-privacy #content .cc-privacy a:hover {
    color: #084b87;
    border-bottom-color: currentColor;
}

/* Petites “lignes fantômes” de Jimdo (classe .n) souvent vides : on les masque ici uniquement */
body.has-privacy #content .cc-privacy .n {
    display: none !important;
}

/* Séparateur soft (optionnel) */
body.has-privacy #content .cc-privacy hr {
    border: 0;
    height: 1px;
    background: #e5e7eb;
    margin: 18px 0;
}

/* Tables éventuelles (RGPD) */
body.has-privacy #content .cc-privacy table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
}

body.has-privacy #content .cc-privacy th,
body.has-privacy #content .cc-privacy td {
    border: 1px solid #e5e7eb;
    padding: 10px;
    text-align: left;
    font-size: 15px;
}

body.has-privacy #content .cc-privacy th {
    background: #f8fafc;
    color: #2f2f61;
}

/* Responsive : adoucit les paddings sur mobile */
@media (max-width: 720px) {
    body.has-privacy #content {
        padding: 140px 14px 50px;
    }

    body.has-privacy #content .cc-privacy {
        padding: 18px;
        border-radius: 12px;
    }
}


/* ----- Footer Jimdo : ne garder que "Politique de confidentialité" + "Politique des cookies" ----- */

/* 1) On masque visuellement tout le contenu du footer "par défaut" */
#contentfooter .rightrow {
    display: none !important;
}

/* Connexion / Modifier */
#contentfooter .leftrow a {
    display: none !important;
}

/* Tous les liens de gauche d'abord */

/* 2) On ré-affiche uniquement les 2 liens à garder */
#contentfooter .leftrow a[href*="/j/privacy"] {
    /* Politique de confidentialité */
    display: inline-block !important;
}

#contentfooter .leftrow #cookie-policy {
    /* Politique des cookies */
    display: inline-block !important;
}

/* 3) On neutralise les petits séparateurs " | " (text nodes) en rendant
      le texte par défaut invisible, puis on remet une taille sur les liens visibles */
#contentfooter .leftrow {
    font-size: 0;
}

#contentfooter .leftrow a {
    font-size: 14px;
    line-height: 1.6;
}

/* 4) (optionnel) joli séparateur entre les 2 liens gardés */
#contentfooter .leftrow #cookie-policy::before {
    content: "•";
    display: inline-block;
    margin: 0 8px;
    font-size: 14px;
    line-height: 1;
    opacity: .6;
}

/* 5) (optionnel) si ton offre le permet, masque la pub Jimdo.
      ⚠️ Sur l’offre gratuite, Jimdo l’interdit généralement. À utiliser seulement si tu es éligible. */
#contentfooter .jimdo-free-footer-ad {
    display: none !important;
}


/* ===== Footer Jimdo — style custom ===== */

/* Barre footer : fond noir + texte blanc */
#contentfooter {
    background: #2B294A !important;
    color: #fff !important;
    margin: 0;
    padding: 14px 16px;
}

/* Masquer la colonne droite (Connexion/Modifier) */
#contentfooter .rightrow {
    display: none !important;
}

/* Tout masquer d'abord dans la colonne gauche */
#contentfooter .leftrow a {
    display: none !important;
}

/* Ré-afficher seulement les 2 liens voulus */
#contentfooter .leftrow a[href*="/j/privacy"],
#contentfooter .leftrow #cookie-policy {
    display: inline-block !important;
}

/* Centrage + espacement propre des liens */
#contentfooter .leftrow {
    float: none !important;
    text-align: center;
    font-size: 0;
    /* cache les séparateurs " | " de Jimdo */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 4px 0;
}

/* Look des liens */
#contentfooter .leftrow a {
    color: #fff !important;
    font-size: 14px;
    /* remet une taille après font-size:0 du conteneur */
    line-height: 1.6;
    text-decoration: none !important;
    border: 0 !important;
    opacity: .95;
}

#contentfooter .leftrow a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* Petit séparateur entre les 2 liens */
#contentfooter .leftrow #cookie-policy::before {
    content: "•";
    margin: 0 8px 0 2px;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    opacity: .6;
}

/* (optionnel) masquer la pub Jimdo si ton offre le permet */
#contentfooter .jimdo-free-footer-ad {
    display: none !important;
}


/* ====== CAS USAGE CLIENTS ====== */
/* ====== CAS D’USAGE CLIENTS ====== */
:root {
    --olcya-mid: #2b294a;
    --olcya-violet: #8f7ad6;
    --olcya-sky: #80deff;
}

/* .cas-usage-clients {
    background: 
        #fff url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-bigbang.png?t=1753925469") 
        no-repeat center center;
    background-size: cover;
    padding: 48px 0 64px;
    position: relative;
    z-index: 1;
} 

.cas-usage-clients {
    background:
        #fff url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original2-op.jpg?t=1753925469") no-repeat center center;
    background-size: 115%;
   
    padding: 48px 0 64px;
    position: relative;
    z-index: 1;
} */

.cas-usage-clients{
  background:
    /* couche voile */
    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
    /* couche image */
    url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original2-op.jpg?t=1753925469");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% 100%, 115%; /* voile couvre toute la section, image à 115% */
  padding: 48px 0 64px;
  position: relative;
  z-index: 1;
}






.cas-usage-clients .cu-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
    display: grid;
    gap: 18px;
}

/* grille : gauche fixe, droite fluide (comme la capture 1) */
.cu-item {
    display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr;
    min-height: 220px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    background: transparent;
}

/* --- panneau gauche --- */
.cu-left {
    background: #efeff2;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 26px;
}

.cu-category-left {
    margin: 0 0 10px 0;
    font-family: "Fjalla One", sans-serif;
    font-size: 28px;
    color: #2f2f61;
    /* rouge du titre cat. */
    text-transform: uppercase;
    letter-spacing: .5px;
}

.cu-excerpt-left {
    font: 500 14px/1.7 "Montserrat", sans-serif;
    color: #2b2b2b;
    max-width: 44ch;
    margin: 0;
}

/* --- panneau image droite + overlay --- */
.cu-right {
    position: relative;
    display: block;
    /* <a> cliquable sur tout le panneau */
    color: #fff;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 220px;
    isolation: isolate;
}

.cu-right::after {
    /* voile bleu/violet foncé à gauche -> lumière à droite */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 27, 77, .88) 0%, rgba(143, 122, 214, .45) 48%, rgba(128, 222, 255, .18) 100%);
    z-index: 0;
}

/* contenu overlay */
.cu-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 22px 26px;
    z-index: 2;
    /* au-dessus du voile */
}

.cu-overlay .cu-kicker {
    display: inline-block;
    font: 700 12px/1 "Montserrat", sans-serif;
    letter-spacing: .06em;
    color: #ffffff;
    opacity: .9;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.cu-title-overlay {
    margin: 0;
    font: 700 26px/1.25 "Montserrat", sans-serif;
    color: #fff;
    max-width: 28ch;
}

/* lien “VOIR ○” en style texte (pas un pill) */
.cu-right .cu-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 13px/1 "Montserrat", sans-serif;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    padding: 0;
    transition: transform .15s ease, opacity .2s ease;
}

.cu-right .cu-link i {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    font-size: 12px;
}

.cu-right:hover .cu-link {
    transform: translateX(2px);
}

/* hover léger sur l’image */
.cu-item:hover .cu-right {
    filter: brightness(1.03) saturate(1.03);
}

/* Responsive */
@media (max-width:900px) {
    .cu-item {
        grid-template-columns: 1fr;
    }

    .cu-right {
        order: -1;
        height: 180px;
    }

    .cu-left {
        padding: 20px;
    }
}


/* === FIX overlay quand .cu-overlay est SIBLING de .cu-right === */

/* s'assure que le lien forme bien le panneau image */
.cas-usage-clients .cu-item>.cu-right {
    position: relative;
    z-index: 1;
    /* image + voile en dessous du texte */
}

/* le gradient reste entre l'image et le texte */
.cas-usage-clients .cu-item>.cu-right::after {
    z-index: 1;
}

/* placer .cu-overlay dans la même cellule de grille que .cu-right */
.cas-usage-clients .cu-item>.cu-overlay {
    /* ⚠️ on annule le position:absolute défini plus haut */
    position: relative !important;
    inset: auto !important;

    /* on l'auto-place sur la COLONNE de droite (celle de .cu-right) */
    grid-column: 2 / -1;
    grid-row: 1 / 2;

    /* on le met au-dessus */
    z-index: 2;

    /* style d'overlay */
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 22px 26px;

    /* pour que le clic passe au <a> dessous */
    pointer-events: none;
}

/* le lien “VOIR” est visuellement dedans, donc on anime au survol de l'item */
.cas-usage-clients .cu-item:hover .cu-link {
    transform: translateX(2px);
}

/* (optionnel) garde ton léger hover d’image */
.cas-usage-clients .cu-item:hover .cu-right {
    filter: brightness(1.03) saturate(1.03);
}

/* ---- CAS CLIENT : forcer le placement grid des 3 enfants ---- */
.cas-usage-clients .cu-item {
    position: relative;
}

/* place la colonne texte à gauche, ligne 1 */
.cas-usage-clients .cu-item>.cu-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* place l'image/lien à droite, même ligne */
.cas-usage-clients .cu-item>.cu-right {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    position: relative;
    /* conteneur pour le gradient */
    z-index: 1;
}

/* place l'overlay PAR-DESSUS la colonne image */
.cas-usage-clients .cu-item>.cu-overlay {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    position: relative !important;
    /* annule l'absolu global */
    inset: auto !important;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 22px 26px;
    pointer-events: none;
    /* clics passent au <a> dessous */
}

/* gradient entre l'image et le texte */
.cas-usage-clients .cu-item>.cu-right::after {
    z-index: 1;
}

/* Mobile : 1 colonne => image en haut, texte en dessous, overlay sur l'image */
@media (max-width:900px) {
    .cas-usage-clients .cu-item {
        grid-template-columns: 1fr;
    }

    .cas-usage-clients .cu-item>.cu-right,
    .cas-usage-clients .cu-item>.cu-overlay {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        height: 180px;
        /* comme ta règle existante */
    }

    .cas-usage-clients .cu-item>.cu-left {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
    }
}

/* ——— Cas d’usage : forcer "VOIR" en blanc même si l’overlay est sibling ——— */
.cas-usage-clients .cu-link {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    /* optionnel */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    /* lisibilité */
}

.cas-usage-clients .cu-link i {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    /* cercle autour de la flèche */
}

.cas-usage-clients .cu-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* espace entre "VOIR" et l’icône */
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
}

/* on désactive l’ancienne flèche avant le texte si elle existe */
.cas-usage-clients .cu-link::before {
    content: none !important;
}

/* flèche APRÈS le texte */
.cas-usage-clients .cu-link::after {
    content: "\f061";
    /* fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    /* nécessaire */
    font-weight: 900;
    /* style solid */
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
}

/* --- image cliquable : préparer les animations --- */
.cu-right {
    overflow: hidden;
    background-size: 100%;
    transform-style: preserve-3d;
    transition:
        background-size .6s ease,
        filter .3s ease,
        transform .35s cubic-bezier(.2, .6, .2, 1);
    /* pour le tilt (valeurs par défaut) */
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* zoom + légère mise en valeur */
.cu-item:hover .cu-right {
    background-size: 108%;
    filter: saturate(1.05) contrast(1.03);
}

/* voile existant : rends-le un poil plus présent au hover */
.cu-right::after {
    transition: opacity .35s ease;
    opacity: .85;
    /* valeur de base */
}

.cu-item:hover .cu-right::after {
    opacity: .95;
}

/* SHINE (bande lumineuse diagonale qui traverse l’image) */
.cu-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .28) 48%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-10deg);
    pointer-events: none;
}

.cu-item:hover .cu-right::before {
    animation: cuShine 900ms ease-out;
}

@keyframes cuShine {
    from {
        left: -160%;
    }

    to {
        left: 160%;
    }
}

/* micro-mouvements du texte et de l’icône */
.cu-overlay>* {
    transition: transform .35s ease, opacity .35s ease;
}

.cu-item:hover .cu-overlay>* {
    transform: translateY(-2px);
}

.cu-link i {
    transition: transform .25s ease;
}

.cu-item:hover .cu-link i {
    transform: translateX(4px);
}

/* accessibilité clavier */
.cu-right:focus-visible {
    outline: 3px solid #80deff;
    outline-offset: 3px;
}

/* respect du “prefers-reduced-motion” */
@media (prefers-reduced-motion: reduce) {

    .cu-right,
    .cu-right::before,
    .cu-right::after,
    .cu-overlay>*,
    .cu-link i {
        transition: none !important;
        animation: none !important;
    }

    .cu-item:hover .cu-right {
        background-size: 100%;
        filter: none;
    }
}


/* ====== CAS D’USAGE CLIENTS BIG DATA ARCHITECTURE ====== */

/* ===== Cas client – Big Data Architecture ===== */
:root {
    --bda-bg: #ffffff;
    --bda-ink: #2B294A;
    /* bleu nuit */
    --bda-violet: #8F7AD6;
    --bda-sky: #80DEFF;
}

.cas-client-big-data-architecture {
    background: var(--bda-bg);
    color: var(--bda-ink);
    padding: 64px 20px;
}

.cas-client-big-data-architecture .bda-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* En-tête */
.bda-header {
    text-align: center;
    margin-bottom: 28px;
}

.bda-kicker {
    font-family: "Fjalla One", sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    color: #666;
    margin: 0 0 6px 0;
}

.bda-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 32px;
    margin: 0;
    color: var(--bda-ink);
    text-transform: uppercase;
}

.bda-sub {
    margin: 10px auto 0;
    max-width: 800px;
    color: #444;
}

/* Grille */
.bda-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(320px, 420px) 1fr;
}

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

/* Cartes */
.bda-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    padding: 20px;
}

.bda-card-title {
    font-family: "Fjalla One", sans-serif;
    color: var(--bda-ink);
    font-size: 20px;
    margin: 0 0 10px;
}

.bda-block-title {
    font: 700 14px/1 "Montserrat", sans-serif;
    color: #4b4b4b;
    margin: 18px 0 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Listes & tags */
.bda-list {
    margin: 0;
    padding-left: 18px;
    color: #333;
}

.bda-list li {
    margin: 6px 0;
    line-height: 1.6;
}

.bda-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 8px 0 0;
    list-style: none;
}

.bda-tags li {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font: 600 12px/1 "Montserrat";
    background: #f8fafc;
}

/* Étapes */
.bda-steps {
    counter-reset: step;
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

.bda-steps li {
    position: relative;
    padding-left: 44px;
    margin: 10px 0;
    line-height: 1.55;
}

.bda-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, var(--bda-violet), var(--bda-sky));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* Diagramme */
.bda-diagram {
    margin: 14px 0 4px;
    text-align: center;
    background: #f7f7fb;
    border: 1px dashed #dfe3f0;
    border-radius: 12px;
    padding: 10px;
}

.bda-diagram img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
}

.bda-diagram figcaption {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* Badges outils */
.bda-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.bda-badge {
    font: 700 12px/1 "Montserrat";
    color: var(--bda-ink);
    padding: 8px 10px;
    border-radius: 10px;
    background: #eef7ff;
    border: 1px solid #d7ecff;
}

.bda-badge:nth-child(odd) {
    background: #f2edff;
    border-color: #e3dcff;
}

/* CTA */
.bda-cta {
    margin-top: 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--bda-violet), var(--bda-sky));
    color: #fff;
    padding: 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    gap: 8px;
}

.bda-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    color: #2B294A !important;
    background: #fff;
    text-decoration: none !important;
    font: 700 14px/1 "Montserrat";
    transition: transform .15s ease, box-shadow .2s ease;
}

.bda-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* Anim au scroll compatible avec ton script [data-animate] */
.cas-client-big-data-architecture [data-animate] {
    opacity: 0;
    transform: translateY(14px);
    transition: .45s ease;
}

.cas-client-big-data-architecture .in-view {
    opacity: 1;
    transform: none;
}

/* ===== Cas client – Big Data administration ===== */
:root {
    --bda2-ink: #2B294A;
    /* bleu nuit (texte principal) */
    --bda2-violet: #8F7AD6;
    /* violet OLCYA */
    --bda2-sky: #80DEFF;
    /* bleu ciel OLCYA */
    --bda2-border: #e6e8f1;
    --bda2-bg: #ffffff;
    --bda2-soft: #f7f7fb;
}

.cas-client-big-data-administration {
    background: var(--bda2-bg);
    color: var(--bda2-ink);
    padding: 64px 20px;
}

.cas-client-big-data-administration .bda2-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Montserrat", sans-serif;
}

.bda2-header {
    text-align: center;
    margin-bottom: 28px;
}

.bda2-kicker {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    color: #666;
    margin: 0 0 6px;
}

.bda2-title {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 32px;
    margin: 0;
    color: var(--bda2-ink);
}

.bda2-sub {
    color: #444;
    max-width: 820px;
    margin: 10px auto 0;
}

/* 2 colonnes */
.bda2-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

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

/* Cartes */
.bda2-card {
    background: #fff;
    border: 1px solid var(--bda2-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.bda2-ribbon {
    margin: 0;
    padding: 12px 16px;
    font-family: "Fjalla One", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--bda2-violet), var(--bda2-sky));
}

.bda2-card-body {
    padding: 16px 18px 18px;
}

.bda2-card p {
    margin: 0 0 10px;
    line-height: 1.65;
}

/* Listes */
.bda2-list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.bda2-list li {
    margin: 6px 0;
}

.bda2-steps {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    counter-reset: s;
}

.bda2-steps li {
    counter-increment: s;
    position: relative;
    padding-left: 42px;
    margin: 10px 0;
    line-height: 1.55;
}

.bda2-steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, var(--bda2-violet), var(--bda2-sky));
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

.bda2-note {
    margin-top: 10px;
    font-weight: 600;
    font-size: 13px;
    color: #2f2f61;
}

/* Bandes “Expertises” / “Outils” */
.bda2-band {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--bda2-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 14px 16px;
}

.bda2-band-title {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font: 700 14px/1 "Montserrat";
    color: #4b4b4b;
    position: relative;
    display: inline-block;
}

.bda2-band-title span {
    background: linear-gradient(90deg, var(--bda2-violet), var(--bda2-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tags expertises */
.bda2-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bda2-tags li {
    padding: 8px 10px;
    border-radius: 999px;
    font: 600 12px/1 "Montserrat";
    border: 1px solid #e7ecff;
    background: #f3f6ff;
    color: #1f3e73;
}

/* Outils (logos) */
.bda2-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
}

.bda2-tool {
    margin: 0;
    text-align: center;
}

.bda2-tool img {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
}

.bda2-tool figcaption {
    font-size: 12px;
    color: #555;
}


/* ===================== */
/* ANIMATIONS AU SCROLL  */
/* ===================== */

:root {
    --bda2-ink: #2B294A;
    --bda2-violet: #8F7AD6;
    --bda2-sky: #80DEFF;
}

/* état initial pour tout [data-animate] */
[data-animate] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}

.in-view[data-animate] {
    opacity: 1;
    transform: none;
}

/* variantes directionnelles */
[data-animate="slide-left"] {
    transform: translateX(-24px);
}

[data-animate="slide-right"] {
    transform: translateX(24px);
}

[data-animate="fade-up"] {
    transform: translateY(18px);
}

[data-animate="pop-in"] {
    transform: scale(.96);
    filter: saturate(.9);
}

.in-view[data-animate="pop-in"] {
    transform: scale(1);
    filter: none;
}

/* Stagger “tags” propre */
.bda2-tags li {
    opacity: 0;
    transform: translateY(6px);
    animation: tagIn .5s ease forwards;
    animation-delay: calc(80ms * var(--i, 0));
}

.in-view .bda2-tags li {
    /* quand le parent a .in-view */
    /* l'animation démarre automatiquement (délais via --i) */
}

@keyframes tagIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Micro-hover élégant sur les cartes et logos */
.bda2-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.bda2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}

.bda2-tool img {
    transition: transform .25s ease, filter .25s ease;
}

.bda2-tool:hover img {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
}

/* Ruban = léger “shine” au survol */
.bda2-ribbon {
    position: relative;
    overflow: hidden;
}

.bda2-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

.bda2-card:hover .bda2-ribbon::after {
    left: 150%;
}

/* Accessibilité : réduit les mouvements si besoin */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .bda2-card,
    .bda2-tool img,
    .bda2-ribbon::after {
        transition: none !important;
    }
}

/* ===================== */
/*   STYLES IMPRIMABLES  */
/* ===================== */

@media print {

    /* Page A4 portrait, marges sobres */
    @page {
        size: A4;
        margin: 14mm 12mm;
    }

    /* Fond blanc, encre noire, supprime les effets trop vifs */
    body,
    .cas-client-big-data-administration {
        background: #fff !important;
        color: #000 !important;
    }

    .bda2-ribbon {
        background: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Pas d’ombres / arrondis forts */
    .bda2-card,
    .bda2-band {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        border-radius: 6px !important;
    }

    /* Neutralise les animations */
    [data-animate],
    .bda2-tags li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Grille : 2 colonnes si ça tient, sinon 1 */
    .bda2-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* si la zone d’impression est étroite, une colonne */
    .bda2-grid {
        break-inside: avoid;
    }

    .bda2-card {
        break-inside: avoid;
    }

    /* Couleurs plus sages pour les tags */
    .bda2-tags li {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Masque navigation / footer globaux de la page */
    #header,
    #navigation-wrapper,
    #sidebar,
    #main-footer,
    #footer {
        display: none !important;
    }
}

/* (option) version “Téléchargement PDF” sur fond blanc sur écran */
.cas-client-big-data-administration.print-look {
    background: #fff;
    color: #1a1a1a;
}

.cas-client-big-data-administration.print-look .bda2-card,
.cas-client-big-data-administration.print-look .bda2-band {
    box-shadow: none;
    border: 1px solid #ddd;
}


/* ===================== */
/*   STYLES CAS CLIENT - DATA SCIENCE  */
/* ===================== */

/* ===================== */
/* CAS CLIENT — DATA SCIENCE */
/* ===================== */
:root {
    --ds-ink: #2B294A;
    --ds-violet: #8F7AD6;
    --ds-sky: #80DEFF;
    --ds-border: #e6e8f1;
    --ds-bg: #ffffff;
    --ds-soft: #f7f7fb;
}

.cas-client-data-science {
    background: var(--ds-bg);
    color: var(--ds-ink);
    padding: 64px 20px;
    font-family: "Montserrat", sans-serif;
}

.cas-client-data-science .ds-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.ds-header {
    text-align: center;
    margin-bottom: 28px;
}

.ds-kicker {
    font-family: "Fjalla One", sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    color: #666;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.ds-title {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 32px;
    margin: 0;
    color: var(--ds-ink);
}

.ds-sub {
    color: #444;
    max-width: 820px;
    margin: 10px auto 0;
}

/* Grid 2 colonnes */
.ds-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

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

/* Cartes */
.ds-card {
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.ds-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}

.ds-ribbon {
    margin: 0;
    padding: 12px 16px;
    font-family: "Fjalla One", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--ds-violet), var(--ds-sky));
    position: relative;
    overflow: hidden;
}

.ds-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

.ds-card:hover .ds-ribbon::after {
    left: 150%;
}

.ds-card-body {
    padding: 16px 18px 18px;
}

.ds-card-body p {
    margin: 0 0 10px;
    line-height: 1.65;
}

/* Listes & étapes */
.ds-list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.ds-list li {
    margin: 6px 0;
    line-height: 1.6;
}

.ds-steps {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    counter-reset: s;
}

.ds-steps li {
    counter-increment: s;
    position: relative;
    padding-left: 42px;
    margin: 10px 0;
    line-height: 1.55;
}

.ds-steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, var(--ds-violet), var(--ds-sky));
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

/* Diagramme */
.ds-diagram {
    margin: 12px 0 0;
    text-align: center;
    background: var(--ds-soft);
    border: 1px dashed #dfe3f0;
    border-radius: 12px;
    padding: 10px;
}

.ds-diagram img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.ds-diagram figcaption {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* Bandes (Expertises / Outils) */
.ds-band {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 14px 16px;
}

.ds-band-title {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font: 700 14px/1 "Montserrat";
    color: #4b4b4b;
    display: inline-block;
}

.ds-band-title span {
    background: linear-gradient(90deg, var(--ds-violet), var(--ds-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tags expertises avec stagger (utilise ton .in-view global) */
.ds-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ds-tags li {
    padding: 8px 10px;
    border-radius: 999px;
    font: 600 12px/1 "Montserrat";
    border: 1px solid #e7ecff;
    background: #f3f6ff;
    color: #1f3e73;
    opacity: 0;
    transform: translateY(6px);
    animation: dsTagIn .5s ease forwards;
    animation-delay: calc(80ms * var(--i, 0));
}

@keyframes dsTagIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Outils (logos) */
.ds-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
}

.ds-tool {
    margin: 0;
    text-align: center;
}

.ds-tool img {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
    transition: transform .25s ease, filter .25s ease;
}

.ds-tool:hover img {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
}

.ds-tool figcaption {
    font-size: 12px;
    color: #555;
}

/* Impression A4 propre */
@media print {
    @page {
        size: A4;
        margin: 14mm 12mm;
    }

    body,
    .cas-client-data-science {
        background: #fff !important;
        color: #000 !important;
    }

    .ds-card,
    .ds-band {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        border-radius: 6px !important;
    }

    .ds-ribbon {
        background: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    [data-animate],
    .ds-tags li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .ds-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .ds-card {
        break-inside: avoid;
    }
}


/* ===================== */
/* CAS CLIENT — AUTOMATISATION */
/* ===================== */

/* CAS CLIENT – AUTOMATISATION RPA */

/* CAS CLIENT – AUTOMATISATION AUTOMATISATION DevOps */
/* ===== CAS CLIENT — AUTOMATISATION (enveloppe) ===== */
.cas-client-automatisation {
    background: #fff;
    color: #1a1a40;
    padding: 64px 20px;
}

.cas-client-automatisation .auto-header {
    text-align: center;
    margin: 0 auto 18px;
}

.cas-client-automatisation .auto-kicker {
    font-family: "Fjalla One", sans-serif;
    letter-spacing: .12em;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 6px;
}

.cas-client-automatisation .auto-title {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    margin: 0;
    color: #2f2f61;
}

/* ===== RPA / CAROUSEL ===== */
.rpa-carousel {
    position: relative;
    max-width: 1100px;
    margin: 16px auto 10px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    background: #000;
}

.rpa-track {
    display: flex;
    transition: transform .5s ease;
}

.rpa-slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    background: #000;
}

.rpa-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* flèches */
.rpa-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .85);
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.rpa-prev {
    left: 12px;
}

.rpa-next {
    right: 12px;
}

.rpa-arrow:hover {
    background: #fff;
}

/* points */
.rpa-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 0;
}

.rpa-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #cfd8e3;
    cursor: pointer;
}

.rpa-dots button.is-active {
    background: #4b4bc6;
}

/* ===== DEVOPS / CARTES ===== */
.devops-grid {
    max-width: 1100px;
    margin: 12px auto 0;
    display: grid;
    gap: 22px;
}

.devops-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.devops-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

/* ruban en haut */
.devops-ribbon {
    margin: 0;
    padding: 12px 16px;
    color: #fff;
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    background: linear-gradient(90deg, #8F7AD6, #80DEFF);
    position: relative;
    overflow: hidden;
}

.devops-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

.devops-card:hover .devops-ribbon::after {
    left: 150%;
}

.devops-body {
    padding: 16px 18px 18px;
}

.devops-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

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

.devops-col h5 {
    margin: 0 0 8px;
    font-family: "Fjalla One", sans-serif;
    color: #2f2f61;
    font-size: 16px;
}

.devops-list {
    margin: 0;
    padding-left: 18px;
}

.devops-list li {
    margin: 6px 0;
    line-height: 1.6;
}

/* étapes numérotées */
.devops-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.devops-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 40px;
    margin: 10px 0;
    line-height: 1.55;
}

.devops-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, #8F7AD6, #80DEFF);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

/* bandes Expertises / Outils */
.devops-band {
    margin-top: 14px;
    background: #fff;
    border: 1px solid #e6e8f1;
    border-radius: 12px;
    padding: 12px 14px;
}

.devops-band-title {
    font: 700 13px/1 "Montserrat";
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4b4b4b;
    margin: 0 0 8px;
    display: inline-block;
}

.devops-band-title span {
    background: linear-gradient(90deg, #8F7AD6, #80DEFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.devops-tags,
.devops-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.devops-tags li,
.devops-tools li {
    padding: 8px 10px;
    border-radius: 999px;
    font: 600 12px/1 "Montserrat";
    border: 1px solid #e7ecff;
    background: #f3f6ff;
    color: #1f3e73;
}



/* === Espacement entre les 2 sections === */
.cas-client-automatisation-devops {
    margin-top: 40px;
    /* évite que les sections se touchent */
}

/* === DEVOPS : fond gris + espace au-dessus === */
.cas-client-automatisation-devops {
    background: #f7f7fb;
    /* gris léger */
    margin-top: 20px;
    /* sépare des slides RPA */
    padding: 24px 0 28px;
    /* respiration interne */
    border-radius: 14px;
    /* option : coins doux */
    border: 1px solid #e6e8f1;
    /* option : léger liseré */
}


/* ===================== */
/* CAS CLIENT — DATA */
/* ===================== */

/* CAS CLIENT – BIG DATA ARCHITECTURE */

/* CAS CLIENT – BID DATA ADMINISTRATION */
/* CAS CLIENT – DATA SCIENCE */

/* ===============================
   CAS CLIENT — DATA (système commun)
   =============================== */
:root {
    --ccd-ink: #2B294A;
    --ccd-violet: #8F7AD6;
    --ccd-sky: #80DEFF;
    --ccd-border: #e6e8f1;
    --ccd-soft: #f7f7fb;
}

.cas-client-data {
    background: #fff;
    color: var(--ccd-ink);
    padding: 48px 16px 64px;
    font-family: "Montserrat", sans-serif;
}

.ccd-section {
    max-width: 1200px;
    margin: 0 auto 28px;
    background: var(--ccd-soft);
    border: 1px solid var(--ccd-border);
    border-radius: 16px;
    padding: 24px 20px 28px;
}

/* En-tête uniforme */
.ccd-header {
    text-align: center;
    margin: 0 0 18px;
}

.ccd-kicker {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    color: #666;
    margin: 0 0 6px;
}

.ccd-title {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 28px;
    margin: 0;
    color: var(--ccd-ink);
}

.ccd-sub {
    color: #444;
    max-width: 820px;
    margin: 8px auto 0;
}

/* Grille 2 colonnes */
.ccd-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

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

/* Cartes */
.ccd-card {
    background: #fff;
    border: 1px solid var(--ccd-border);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 16px 18px 18px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.ccd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}

.ccd-card-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 18px;
    margin: 0 0 10px;
    color: var(--ccd-ink);
}

/* Listes / étapes */
.ccd-list {
    margin: 6px 0 0;
    padding-left: 18px;
}

.ccd-list li {
    margin: 6px 0;
    line-height: 1.6;
}

.ccd-steps {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    counter-reset: s;
}

.ccd-steps li {
    counter-increment: s;
    position: relative;
    padding-left: 42px;
    margin: 10px 0;
    line-height: 1.55;
}

.ccd-steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, var(--ccd-violet), var(--ccd-sky));
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

/* Diagramme / schéma */
.ccd-diagram {
    margin: 12px 0 0;
    text-align: center;
    background: #f8f8fc;
    border: 1px dashed #dfe3f0;
    border-radius: 12px;
    padding: 10px;
}

.ccd-diagram img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.ccd-diagram figcaption {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* Bandes (expertises/outils) */
.ccd-band {
    margin-top: 14px;
    background: #fff;
    border: 1px solid var(--ccd-border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.ccd-band-title {
    margin: 0 0 8px 0;
    display: inline-block;
    font: 700 13px/1 "Montserrat";
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4b4b4b;
}

.ccd-band-title span {
    background: linear-gradient(90deg, var(--ccd-violet), var(--ccd-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tags et logos-outils */
.ccd-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ccd-tags li {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid #e7ecff;
    background: #f3f6ff;
    color: #1f3e73;
    font: 600 12px/1 "Montserrat";
    opacity: 0;
    transform: translateY(6px);
    animation: ccdTagIn .5s ease forwards;
    animation-delay: calc(80ms * var(--i, 0));
}

@keyframes ccdTagIn {
    to {
        opacity: 1;
        transform: none;
    }
}

.ccd-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.ccd-tools li {
    padding: 6px 10px;
    border: 1px solid #eaeefe;
    background: #f9fbff;
    border-radius: 10px;
    font: 600 12px/1 "Montserrat";
    color: #1f3e73;
}

/* Petites options de thème par section (si tu veux varier un jour) */
.ccd-section[data-accent="teal"] {
    --ccd-violet: #7cd4d0;
    --ccd-sky: #6fd3ff;
}

/* ===== Scroll reveal – base ===== */
[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
    transition-delay: var(--d, 0ms);
    /* délai optionnel (stagger) */
    will-change: opacity, transform, filter;
}

.in-view[data-animate] {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Variantes */
[data-animate="fade-up"] {
    transform: translateY(18px);
}

[data-animate="slide-left"] {
    transform: translateX(-24px);
}

[data-animate="slide-right"] {
    transform: translateX(24px);
}

[data-animate="pop-in"] {
    transform: scale(.96);
    filter: saturate(.9);
}

.in-view[data-animate="pop-in"] {
    transform: scale(1);
    filter: none;
}

/* Respect accessibilité : peu ou pas de mouvement */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ===================== */
/* CAS CLIENT — OBSERVABILITÉ */
/* ===================== */
:root {
    --obs-ink: #2B294A;
    --obs-violet: #8F7AD6;
    --obs-sky: #80DEFF;
    --obs-border: #e6e8f1;
    --obs-bg: #f7f7fb;
    /* fond gris léger pour différencier la section */
    --obs-soft: #ffffff;
}

.cas-client-observabilite {
    background: var(--obs-bg);
    color: var(--obs-ink);
    padding: 64px 20px;
    border-top: 1px solid #eceef6;
    /* séparation douce */
}

.cas-client-observabilite .obs-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.obs-header {
    text-align: center;
    margin-bottom: 24px;
}

.obs-kicker {
    font-family: "Fjalla One", sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    color: #666;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.obs-title {
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 32px;
    margin: 0;
    color: var(--obs-ink);
}

.obs-sub {
    color: #444;
    max-width: 820px;
    margin: 10px auto 0;
}

/* Grid */
.obs-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr 1fr;
}

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

/* Card */
.obs-card {
    background: var(--obs-soft);
    border: 1px solid var(--obs-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.obs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

/* Ribbon */
.obs-ribbon {
    margin: 0;
    padding: 12px 16px;
    color: #fff;
    font-family: "Fjalla One", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    background: linear-gradient(90deg, var(--obs-violet), var(--obs-sky));
    position: relative;
    overflow: hidden;
}

.obs-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

.obs-card:hover .obs-ribbon::after {
    left: 150%;
}

.obs-card-body {
    padding: 16px 18px 18px;
}

.obs-cols {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

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

.obs-col h5 {
    margin: 0 0 8px;
    font-family: "Fjalla One", sans-serif;
    color: #2f2f61;
    font-size: 16px;
}

/* Lists & steps */
.obs-list {
    margin: 0;
    padding-left: 18px;
}

.obs-list li {
    margin: 6px 0;
    line-height: 1.6;
}

.obs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: s;
}

.obs-steps li {
    counter-increment: s;
    position: relative;
    padding-left: 42px;
    margin: 10px 0;
    line-height: 1.55;
}

.obs-steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Montserrat";
    color: #fff;
    background: linear-gradient(135deg, var(--obs-violet), var(--obs-sky));
    box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
}

/* Bands */
.obs-band {
    margin-top: 14px;
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.obs-band-title {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font: 700 14px/1 "Montserrat";
    color: #4b4b4b;
    display: inline-block;
}

.obs-band-title span {
    background: linear-gradient(90deg, var(--obs-violet), var(--obs-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Tags & Tools */
.obs-tags,
.obs-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.obs-tags li,
.obs-tools li {
    padding: 8px 10px;
    border-radius: 999px;
    font: 600 12px/1 "Montserrat";
    border: 1px solid #e7ecff;
    background: #f3f6ff;
    color: #1f3e73;
    opacity: 0;
    transform: translateY(6px);
    animation: obsTagIn .5s ease forwards;
}

.obs-tags li {
    animation-delay: calc(70ms * var(--i, 0));
}

@keyframes obsTagIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Scroll animations (compatibles avec ton Observer existant) */
[data-animate] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
    transition-delay: var(--d, 0ms);
}

.in-view[data-animate] {
    opacity: 1;
    transform: none;
}

/* Print */
@media print {
    @page {
        size: A4;
        margin: 14mm 12mm;
    }

    .cas-client-observabilite {
        background: #fff !important;
        color: #000 !important;
    }

    .obs-card,
    .obs-band {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        border-radius: 6px !important;
    }

    .obs-ribbon {
        background: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* Conteneur qui porte le décor */
.orbit-bg {
    position: relative;
    isolation: isolate;
    /* garantit que le décor reste derrière */
    background-color: #fff;
    /* si tu veux un fond blanc sous ces 2 blocs */
}

/* Le décor en pseudo-élément, couvrant les 2 sections */
/* 1) Le wrapper porte le décor, au-dessus de son propre fond */
.orbit-bg {
    position: relative;
    background: #fff;
    /* garde le fond blanc global si tu veux */
}



/* 2) Les enfants passent au-dessus du décor */
/* le décor couvre les 2 sections (#clients + #carrieres-olcya) */
.orbit-bg {
    position: relative;
    background: #fff;
    /* fond global blanc */
    /* overflow: visible;  // à activer si un parent clippe le décor */
}

.orbit-bg::before {
    content: "";
    position: absolute;
    /* on déborde au-dessus et en dessous du wrapper */
    top: -35px;
    /* ↑ augmente si tu veux que ça monte plus */
    bottom: -30px;
    /* ↓ augmente si tu veux que ça descende plus */
    left: 0;
    right: 0;
    z-index: 0;

    /* background-image: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-bigbang.png?t=1753925469"); */
    background-repeat: no-repeat;

    /* taille responsive du motif */
    background-size: clamp(700px, 70vw, 1400px) auto;

    /* ancrage au milieu des 2 sections (ajuste le 35%) */
    background-position: 50% 35%;

    pointer-events: none;
}

/* contenu au-dessus du décor */
.orbit-bg>* {
    position: relative;
    z-index: 1;
}

/* sections transparentes pour laisser voir le décor */
#clients,
#carrieres-olcya {
    background: transparent;
}


/* === BG "bigbang" sur toute la section Services === */
/* === Section Services (fond + image "bigbang" remontée) === */
#services {
    /* mise en page existante */
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;

    /* positionnement / look */
    position: relative;
    z-index: 1;
    margin-top: -80px;
    background-color: #fff;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    padding: 140px 20px 120px;

    /* image de fond */
    /* background-image: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-bigbang.png?t=1753925469"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -600px;
    /* ← monte l’image (ajuste : -120px, -220px, etc.) */
}

/* Au cas où un ancien décor existait */
#services::before {
    content: none !important;
}

/* === HERO POUR LE SLIDE === */
/* Slideshow HERO */
/* Slideshow HERO */
.hero.hero-slideshow {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    /* pleine hauteur écran */
    width: 100vw;
    /* pleine largeur écran */
    margin: 0;
    /* supprime les marges auto */
    padding: 0;
    /* supprime les paddings */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Pour annuler les héritages Jimdo (souvent box-sizing + marges du container) */
    box-sizing: border-box;

    margin-bottom: -37px !important;
    padding-bottom: 0px !important;
}

/* Si Jimdo insère des marges sur les modules */
.j-module,
.j-content,
body,
html {
    margin: 0 !important;
    padding: 0 !important;
}

/* Texte au-dessus des fonds */
.hero.hero-slideshow .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* Texte au-dessus des fonds */
.hero.hero-slideshow .hero-inner {
    position: relative;
    z-index: 2;
}

/* Calques d’arrière-plan */
.hero.hero-slideshow .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity .6s ease;
    opacity: 0;
    z-index: 0;
}

/* Un léger dégradé par-dessus l’image pour la lisibilité du texte */
/* .hero.hero-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 7, 40, .65), rgba(15, 7, 40, .15));
    z-index: 1;
} */

/* Respecte les préférences d’accessibilité : pas d’animation si demandé */
@media (prefers-reduced-motion: reduce) {
    .hero.hero-slideshow .hero-bg {
        transition: none;
    }
}

/* Base commune */
.hero-banner {
    /* variables personnalisables par section */
    --hero-img: none;
    --hero-h: 150px;
    --hero-overlay: 0.35;
    --hero-fs: 28px;

    position: relative;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: var(--hero-h);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay));
    z-index: -1;
}

/* Texte interne */
.hero-banner :where(h1, h2, h3, p, span, strong) {
    color: #fff;
    font-size: var(--hero-fs);
    font-weight: 700;
    margin: 0;
}

/* Variantes : on ne met QUE l'image (et on peut ajuster les vars) */
.hero-apropos {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg2.jpg?t=1753925469");
}

.hero-nous-rejoindre {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg3.jpg?t=1753925469");
}

.hero-cas-client {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg4.jpg?t=1753925469");
}

.hero-contactez-nous {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg5.jpg?t=1753925469");
}

.hero-nos-offres-data {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg6.jpg?t=1753925469");
}

.hero-nos-offres-automatisation {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg7.jpg?t=1753925469");
}

.hero-nos-offres-observabilite {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg8.jpg?t=1753925469");
}

.hero-cas-client-data {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg9.jpg?t=1753925469");
}

.hero-cas-client-automatisation {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg10.jpg?t=1753925469");
}

.hero-cas-client-observabilite {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg11.jpg?t=1753925469");
}

.hero-nous-rejoindre-data-engenieur {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg1.jpg?t=1753925469");
}

.hero-nous-rejoindre-data-architect {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg2.jpg?t=1753925469");
}

.hero-nous-rejoindre-devops-engeneer {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg3.jpg?t=1753925469");
}

.hero-nous-rejoindre-administrateur-dynatrace {
    --hero-img: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/olcya-bg4.jpg?t=1753925469");
}

/* Responsive (si tu veux réduire un peu sur mobile) */
@media (max-width: 768px) {
    .hero-banner {
        --hero-h: 110px;
        --hero-fs: 22px;
    }
}

.service-card-link {
  display: block;              /* le lien englobe toute la carte */
  text-decoration: none;       /* pas de soulignement */
  color: inherit;              /* conserve les couleurs existantes */
}

.service-card {
  cursor: pointer;             /* indique que c’est cliquable */
  transition: transform .2s, box-shadow .2s;
}

.service-card-link:hover .service-card,
.service-card-link:focus .service-card {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}



/* css pour le formulaire candidature */
/* ===== Formulaire Candidature (Jimdo Creator) ===== */
#cc-m-12901752812 {
  /* zone pleine largeur avec fond blanc */
  width: 100%;
  background: #fff;
  padding: 48px 0;  /* espace haut/bas */
}

/* Conteneur interne centré */
#cc-m-12901752812 .cc-m-form {
  max-width: 720px;   /* largeur contenue */
  margin: 0 auto;     /* centre horizontal */
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  background: #fff;   /* redondant mais safe */
}

/* Espacement des champs */
#cc-m-12901752812 .cc-m-form-view-element {
  margin-bottom: 18px;
}

/* Labels */
#cc-m-12901752812 .cc-m-form-view-element > label div,
#cc-m-12901752812 .cc-m-form-view-element > label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  color: #111827;
}

/* Inputs & Textarea */
#cc-m-12901752812 .cc-m-form-view-input-wrapper input[type="text"],
#cc-m-12901752812 .cc-m-form-view-input-wrapper input[type="email"],
#cc-m-12901752812 .cc-m-form-view-input-wrapper textarea {
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  transition: border-color .2s, box-shadow .2s;
}

#cc-m-12901752812 .cc-m-form-view-input-wrapper textarea {
  min-height: 160px;
  resize: vertical;
}

/* Focus state */
#cc-m-12901752812 .cc-m-form-view-input-wrapper input:focus,
#cc-m-12901752812 .cc-m-form-view-input-wrapper textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124,58,237,.15);
}

/* Bouton envoyer */
/* Wrapper du bouton : centrer le contenu */
#cc-m-12901752812 .cc-m-form-view-element.cc-m-form-submit 
.cc-m-form-view-input-wrapper {
  text-align: center;
}

/* Bouton envoyer - style gradient centré */
#cc-m-12901752812 .cc-m-form-view-input-wrapper input[type="submit"] {
  border: 0;
  border-radius: 50px;
  padding: 16px 36px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #A1C2FA, #8e83d6);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 5px 15px rgba(30, 77, 216, 0.2);
  display: inline-block; /* pour que text-align: center fonctionne */
}

/* Effet hover */
#cc-m-12901752812 .cc-m-form-view-input-wrapper input[type="submit"]:hover {
  background: linear-gradient(135deg, #8e83d6, #A1C2FA);
  transform: scale(1.05);
}


#cc-m-12901752812 .cc-m-form-view-input-wrapper input[type="submit"]:active {
  transform: translateY(1px);
}

/* Texte RGPD & note */
#cc-m-12901752812 .cc-m-form-view-element.cc-m-form-submit label,
#cc-m-12901752812 .cc-m-form-note {
  font-size: 13px;
  color: #6b7280;
  text-align: left;
}

#cc-m-12901752812 .cc-m-form-view-element.cc-m-form-submit a {
  color: #7c3aed;
  text-decoration: underline;
}

#cc-m-12901752812 .j-m-required {
  color: #ef4444;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 480px) {
  #cc-m-12901752812 .cc-m-form {
    padding: 20px;
    border-radius: 14px;
  }
}

#cc-m-12901752812 input[type="file"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  transition: border-color .2s, box-shadow .2s;
}
#cc-m-12901752812 input[type="file"]:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124,58,237,.15);
}
#cc-m-12901752812 .hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* CSS pour le background de la section services */
#services {
  position: relative;
  background: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-form-2.png?t=1753925469") 
              no-repeat center center;
  background-size: cover; /* l’image prend toute la largeur */
  padding: 80px 20px; /* espace interne pour aérer */
  z-index: 1;
}

/* Pour rendre le texte lisible si besoin d’un léger voile blanc */
#services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* voile blanc transparent */
  z-index: -1;
}

/* Mettre le css sous la section nos clients et carrières */
/* ===== Background sur la section orbit-bg ===== */
.orbit-bg{
  position: relative;
  /* Remplace l’URL par celle de TON image uploadée dans Jimdo */
  background-image: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original2-op.jpg?t=1753925469");
  background-size: cover;       /* prend toute la section */
  background-position: center;  /* bien centrée */
  background-repeat: no-repeat;
  padding: 60px 0;              /* un peu d’air autour du contenu */
}

/* Voile blanc pour diminuer la visibilité des formes */
.orbit-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.78); /* ajuste l’opacité: 0.6 à 0.9 */
  /* Optionnel: légère douceur */
     backdrop-filter: blur(2px); 
     -webkit-backdrop-filter: blur(2px);
 
  z-index: 0;
}

/* S’assure que le contenu passe au-dessus du voile */
.orbit-bg > *{
  position: relative;
  z-index: 1;
}

/* ===== Background pour la section partenaires ===== */
#partenaires-olcya {
  position: relative;
  background-image: url("https://u.jimcdn.com/cms/o/scef870e3c8cab176/userlayout/img/background-forme-original1.png?t=1753925469");
  background-size: cover;       /* couvre toute la section */
  background-position: center;  /* centre l’image */
  background-repeat: no-repeat;
  padding: 60px 0;              /* marge interne haut/bas */
}

/* Voile blanc pour rendre les formes discrètes */
#partenaires-olcya::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); /* ajuste l’opacité ici */
  z-index: 0;
}

/* Contenu au-dessus du voile */
#partenaires-olcya > * {
  position: relative;
  z-index: 1;
}