/* ===========================================
   NIKEFLIX – police critique (above-the-fold)
   =========================================== */
@font-face {
    font-family: 'Nikeflix';
    src:
        url('/font/Nikeflix.woff2') format('woff2'),
        /* priorité */
        url('/font/Nikeflix.woff') format('woff');
    /* secours anciens nav. */
    font-weight: 400;
    /* ajuste si tu as un bold séparé */
    font-style: normal;
    font-display: optional;
    /* élimine le FOIT */

    /* Sous-ensemble éventuel, si tu as exporté un fichier « latin » seulement
     unicode-range: U+0000-00FF;
  */
}

/* Utilisation */
h1,
h2 {
    font-family: 'Nikeflix', sans-serif;
    font-weight: 400;
}

@font-face {
    font-family: 'Rosellinda Alyamore';
    src: url('/font/rosellinda-alyamore.regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Supprimer la bordure des boutons */
.btn {
    border: 0 !important;
}

/* Styles pour le bouton d'aide */
.btn-help {
    position: relative;
    padding: 10px;
    border-radius: 50%;
    background: transparent;
    color: white;
    text-decoration: none;
    display: inline-block;
}

.btn-help::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    background: black;
    border-radius: 50%;
    z-index: -1;
}

.btn-help:hover::before {
    background: black;
}

.btn-help .bi {
    font-size: 27px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.btn-help .bi:hover,
.btn-help:hover {
    color: white !important;
}

/* ===========================================
   LEMON MILK – non critique (pas de pré-charge)
   =========================================== */
@font-face {
    font-family: 'LemonMilk';
    src:
        url('/font/LemonMilk.woff2') format('woff2'),
        url('/font/LemonMilk.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* laisse le navigateur décider */
}

@font-face {
    font-family: 'Nikeflix';
    src: url('/font/Nikeflix.woff2') format('woff2'),
        url('/font/Nikeflix.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Où tu l’emploies */
.title-number,
.price-left .price-number {
    font-family: 'LemonMilk', sans-serif;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-position-x: right !important;
    background-size: 100vh !important;
    /*    background: linear-gradient(90deg, #070707 30%, #000000 70%);*/
    background-repeat: no-repeat;
    background-color: #000000 !important;
    /*    cursor: none;*/
    overflow-x: clip;
}

/*
body .cursor {
    pointer-events: none;
    position: absolute;
}

body .cursor__ball {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    mix-blend-mode: difference;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    opacity: 1;
    transition: opacity 0.3s ease;
}

body .cursor__ball circle {
    fill: #00ff7f;
}
*/

img {
    image-rendering: optimizeQuality;
}

a:hover,
button:hover {
    cursor: pointer !important;
}

[class*="col"],
[class^="col-"],
[class*="col-"],
.container,
.container-fluid {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* #page-accueil vide supprimé */

.header {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

.nav-item a,
.nav-account .nav-link,
.header .btn {
    color: white;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
}

.nav-link {
    color: white !important;
}

#page-accueil .nav-item,
#page-espace-client .nav-item,
#page-navigation-messagerie .nav-item,
#page-bureautique .nav-item,
#page-reseaux-sociaux .nav-item,
#page-identite-visuelle .nav-item,
#page-referencement .nav-item,
#page-e-commerce .nav-item,
#page-cybersecurite .nav-item,
#page-intelligence-artificielle .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#page-accueil .nav-item-connect,
#page-espace-client .nav-item-no-connect,
#page-legal .nav-item-connect,
#page-navigation-messagerie .nav-item-connect,
#page-bureautique .nav-item-connect,
#page-reseaux-sociaux .nav-item-connect,
#page-identite-visuelle .nav-item-connect,
#page-referencement .nav-item-connect,
#page-e-commerce .nav-item-connect,
#page-cybersecurite .nav-item-connect,
#page-intelligence-artificielle .nav-item-connect {
    display: none !important;
}

#welcome {
    margin-right: 0.5rem !important;
}

#welcome span {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 14px;
    font-weight: inherit;
}

strong {
    font-weight: normal !important;
}

.nav-item .btn {
    background: white;
    line-height: inherit;
    color: black;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
}

.nav-item .dropdown {
    line-height: initial;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* Empêcher le menu de se fermer immédiatement lors du survol */
.dropdown-menu {
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    z-index: 1000;
}

.dropdown-item.active,
.dropdown-item:active {
    background: #00ff7f;
}

.dropdown-divider {
    border-color: white;
}

.nav-icons {
    position: relative;
    top: 5px;
    width: 20px;
}

#bloc-account {
    margin-right: 0px !important;
}

.logo {
    height: 45px;
}

.navbar-brand,
.tarifs-brand,
#footer-brand {
    position: relative;
}

.navbar-brand::after,
.tarifs-brand::after,
#footer-brand::after {
    content: "R";
    position: absolute;
    border: 1.5px solid #00ff7f;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    font-family: 'LemonMilk';
    font-size: 7px;
    color: #00ff7f;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    font-weight: bold;
}

.navbar-brand::after {
    top: 4px;
    right: -13px;
}

.tarifs-brand::after {
    top: 0px;
    right: -14px;
}

#footer-brand::after {
    top: 0px;
    right: -14px;
}

#page-connexion .logo, #page-inscription .logo, #page-scan .logo {
    margin-top: 15px;
    margin-bottom: 10px;
    height: 45px;
}

#page-scan #breadcrumb {
    margin-left: 0rem !important;
}

#page-espace-client #breadcrumb {
    margin-left: 0.5rem !important;
}

.breadcrumb {
    margin-bottom: 0px !important;
}

#page-connexion #breadcrumb,
#page-inscription #breadcrumb,
#page-scan .logo #breadcrumb {
    margin-left: 0rem;
}

#breadcrumb a,
#breadcrumb .breadcrumb-item::before {
    color: white;
}

#breadcrumb a,
#breadcrumb .breadcrumb-item::before,
#breadcrumb .active {
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    display: flex;
}

#breadcrumb .active {
    color: white;
}

#breadcrumb a:hover {
    color: #00ff7f;
}

#btn-plus:hover {
    color: #000000;
}

#btn-plus .icon-rdv {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slide-x 0.8s ease-in-out infinite alternate;
}

#icon-rdv,
.icon-rdv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-rdv i {
    font-size: 25px;
}

#item-compte a,
#item-compte a:hover {
    display: flex;
    align-items: center;
    background: white;
    color: #000000;
}

#item-compte img {
    width: 20px;
    margin-right: 5px;
}

.bi-arrow-right-short {
    font-size: 25px;
}

/* Le mouvement : 0 px ➜ +10 px et retour */
@keyframes slide-x {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(0px);
    }

    75% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(5px);
    }
}

#intro-title {
    color: white !important;
    text-transform: uppercase;
    font-family: 'Nikeflix', sans-serif;
    font-weight: normal !important;
    font-size: 86px !important;
    /* transform: skewX(350deg); */
    line-height: 1 !important;
    /* height: 240px; */
    font-family: fantasy;
}

#intro-title font:first-child {
    font-size: 42px;
}

#section-intro {
    position: relative;
}

/*
#section-intro::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    background-image: url(../img/square.png);
    background-size: contain;
    background-position: center center;
    width: 600px;
    height: 600px;
    z-index: -1;
}
*/

#typing {
    color: white !important;
    text-align: left;
    margin-left: 15px;
    display: inline-block;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: normal;
}

.typed-cursor {
    color: white !important;
}

h2 {
    text-transform: uppercase;
    font-family: 'Nikeflix', sans-serif;
    font-weight: normal !important;
    font-size: 40px !important;
    transform: skewX(350deg);
    text-align: center;
}

h3 {
    font-size: 16px !important;
}

.title-number {
    font-family: 'LemonMilk', sans-serif;
    font-size: 40px !important;
    margin-bottom: 15px;
}

#section-intro {
    display: flex;
    align-items: center;
    height: calc(100vh - 74px);
    background-image: url(../img/formateur-web-raphael-elso-nb-webolt.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

#section-intro {
    display: flex;
    align-items: center;
    /*    height: calc(-79px + 100vh);*/
}

#section-left-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 555px;
    text-align: center;
}

#section-left-intro p {
    color: white;
    font-size: 18px;
    font-family: "Euclid Circular B", sans-serif;
    font-weight: normal;
    text-align: justify;
    margin-top: 5px;
    width: 500px;
}

#intro-formule {
    color: white;
    font-size: 14px;
    font-style: italic;
}

.btn-more {
    position: relative;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    margin: auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: #00ff7f !important;
    line-height: inherit;
    color: black;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

.btn-suivant {
    justify-content: center !important;
    align-items: center !important;
    background-color: #00ff7f !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-align: center !important;
}

#section-left-intro .btn-more:hover,
#tarifs .btn-more:hover,
#aide .btn-more:hover,
#page-espace-client .btn-more:hover {
    background: white;
    color: black;
}

.btn-more img {
    width: 20px;
    margin-right: 5px;
}

.btn-more a,
.btn-more a:hover {
    text-decoration: none;
    color: inherit;
    display: contents;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

#prevBtn,
#nextBtn {
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    padding: 3.5px 15px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

#prevBtn {
    background-color: #000000 !important;
    color: white !important;
}

#nextBtn {
    background-color: #00ff7f !important;
    color: #000000 !important;
}

#section-left-intro #btn-plus {
    position: relative;
    margin-top: 25px;
    margin-bottom: 9px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00ff7f !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

/* Forcer le fond vert pour les boutons dans card-footer */
.card-footer .btn-more {
    background-color: #00ff7f !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

.page-category #btn-plus {
    position: relative;
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00ff7f !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

.hero-kicker {
    color: white;
    margin-bottom: 10px;
    display: block;
}

.hero-lead {
    color: white;
    font-size: 18px;
    font-family: "Euclid Circular B", sans-serif;
    font-weight: normal;
    text-align: justify;
    margin-top: 5px;
}

.hero-title strong {
    font-size: 75px;
}

.section-thematique .col-lg-6:not(:last-child) {
    border-right: 1px solid #ccc;
}

.category-summary {
    -webkit-mask-image: url(../img/bolta.svg), linear-gradient(black, black);
    mask-image: url(../img/bolta.svg), linear-gradient(black, black);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-position: right top, 0 0;
    mask-position: right top, 0 0;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 40% auto, 100% 100%;
    mask-size: 18.5% auto, 100% 100%;
}

/* Forcer le fond vert pour les boutons submit */
button[type="submit"].btn-more {
    background-color: #00ff7f !important;
    margin: auto;
    display: block;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

/* Styles spécifiques pour #submitBtn et #btn-plus */
#saveBtn {
    display: flex;
    align-items: center;
    border: 1.5px solid #00ff7f !important;
    background-color: #00ff7f !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    margin-top: 25px !important;
    line-height: inherit !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
    cursor: pointer;
    color: inherit;
}

#saveBtn i {
    margin-left: 5px;
    font-size: 20px;
}

#section-right-intro .price-container {
    display: none;
}

.price-container {
    color: white;
    font-weight: bold;
    width: 170px;
    height: 89px;
    align-items: center;
    border-left: 1.5px solid white;
    line-height: 0.5;
    margin-bottom: 90px;
    margin: 0px !important;
}

#section-right-intro .price-container {
    padding-left: 10px;
}

.price-container p {
    position: relative;
    margin-bottom: 0px;
    display: inline;
}

.price {
    display: flex;
    align-items: center;
    height: 95px;
    position: relative;
}

#card-webolt .price-right::before {
    content: "*";
    position: absolute;
    top: 57px;
    right: -5px;
    color: white;
    font-size: 12px;
    font-weight: normal;
}

.link-tarifs {
    color: white;
    font-size: 14.5px;
    margin-bottom: 35px;
    position: relative;
}

.link-tarifs::before {
    content: "*";
    position: absolute;
    top: -1px;
    left: -6px;
    color: white;
    font-size: 12px;
    font-weight: normal;
}

.price-left {
    display: inline-flex;
    justify-content: center;
    margin-right: 5px;
}

.price-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    line-height: normal;
}

.price-left .price-number {
    font-family: 'LemonMilk', sans-serif;
    font-size: 70px !important;
}

.price-right .price-number {
    font-family: 'LemonMilk', sans-serif;
    font-size: 25px !important;
}

.price-symbol {
    font-size: 30px;
}

#section-services {
    background: #fcfcfc;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#services {
    display: flex;
    justify-content: center;
}

#services .category {
    color: #212529;
    text-decoration: none;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

#services .dropdown-menu a {
    padding: 5px 10px;
    font-size: 14px !important;
    font-weight: 600;
}

#services .dropdown-menu a:hover {
    color: white;
    background: #0a0a0a;
    padding: 5px 10px;
}

#services .dropdown-menu {
    display: none;
    position: absolute;
}

#services .dropdown:hover .dropdown-menu {
    display: block;
}

#services strong {
    margin: 0px 10px;
    margin-bottom: 0px;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#services strong img {
    width: 24px;
    height: 24px;
    margin-bottom: 3px;
}

#services .dropdown-menu {
    width: max-content;
}

#services .dropdown-toggle::after {
    display: none;
}

#section-services h2 {
    margin-bottom: 15px;
}

.paragraphe {
    padding: 15px;
    font-size: 15px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: normal;
    text-align: justify;
}

.section-offres {
    position: relative;
    background: white;
}

.section-offre-image {
    width: 100%;
}

.icon-offre-image {
    width: 32px;
    filter: invert(0.87);
    margin: auto;
    display: block;
}

.section-offres .btn-more {
    display: none !important;
}

.section-offres .btn-more:hover {
    box-shadow: none;
}

#section-offres-image-audit {
    height: 100vh;
    /*    background-image: url(../img/background-audit-webolt.jpg);*/
    /*    background-size: 100vh;*/
    /*    background-position: center;*/
    background-color: #00ff7f;
    position: relative;
    display: flex !important;
    align-items: center;
    z-index: 1;
}

#section-offres-image-audit img {
    max-width: 100%;
    position: absolute;
    width: 575px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    margin: auto;
}

#section-offres-image-audit::before {
    content: "";
    position: absolute;
    left: -10px;
    width: 50px;
    height: 100%;
    background-image: url(../img/bolt-separator.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#section-offres-image-audit::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -50px;
    width: 575px;
    max-width: 100%;
    margin: auto;
    height: 100%;
    background-image: url(../img/coaching-informatique-webolt.png);
    background-position: center 4px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
    transform: rotateZ(20deg);
    display: block;
}

#section-offres-image-formation {
    height: 100vh;
    background-image: url(../img/coaching-informatique-webolt.png);
    background-size: 100vh;
    background-position: center;
}

#section-contact-image {
    position: relative;
    background-color: white;
    overflow: hidden;
}

#section-contact-image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/background-contact-webolt.png);
    background-size: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    animation: moveBackground 6s infinite linear;
}

@keyframes moveBackground {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(10px, -10px);
    }

    50% {
        transform: translate(-10px, 10px);
    }

    75% {
        transform: translate(10px, 10px);
    }

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

#section-recrutement-image {
    height: 100vh;
    background-image: url(../img/background-entreprise-webolt.jpg);
    background-size: cover;
    background-position: center;
}

/*
.section-offres::before {
    content: "";
    width: 100%;
    height: 1.5px;
    position: absolute;
    top: -1.25px;
    left: 0px;
    background-image: linear-gradient(0deg, #f9f9f9, #ffffff);
}
*/

.icon-arrow-left {
    margin-right: 5px;
}

.icon-arrow-right {
    margin-left: 5px;
}

.icon-arrow-top,
.icon-arrow-bottom {
    position: relative;
    top: 15px;
    width: 18px;
    left: 0px;
}

.icon-arrow-bottom {
    transition: transform 0.3s;
}

.icon-arrow-top {
    transition: transform 0.3s;
}

.playpulse a {
    background: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.playpulse {
    height: 35px !important;
    width: 35px !important;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    display: flex;
}

.playpulse:before,
.playpulse:after {
    content: "";
    position: absolute;
    height: 35px !important;
    width: 35px !important;
    background-color: rgb(255, 255, 255, 0.175);
    border-radius: 100% !important;
    border: 0 !important;
    z-index: 0;
    opacity: 1;
}

.playpulse:before {
    animation: playpulse 2s ease-out infinite;
}

.playpulse:after {
    animation: playpulse 2s 1s ease-out infinite;
}

@keyframes playpulse {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

#tarifs {
    background: #f9f9f9;
    padding-top: 75px;
    padding-bottom: 75px;
}

#tarifs h2 {
    margin-bottom: 60px;
}

#tarifs .card {
    border: none;
    border-radius: 0;
}

#tarifs .card-header {
    display: none;
}

#card-webolt {
    position: relative;
    border-radius: 25px !important;
    background-color: #0a0a0a;
    background-image: linear-gradient(180deg, #000000 30%, #0a0a0a 70%);
}

#card-webolt .card-header {
    background: #00ff7f !important;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
    border-radius: 0;
    padding: 5px;
    color: #0a0a0a !important;
}

#card-webolt .logo {
    margin-top: 25px;
    margin-bottom: 5px;
    height: 50px;
}

#card-webolt .card-title,
#card-webolt li {
    color: white;
}

#tarifs .card-title {
    text-transform: uppercase;
    font-family: 'Nikeflix', sans-serif;
    font-weight: normal;
    font-size: 36px;
    margin-top: 15px;
    margin-bottom: 0px;
}

.icon-tarif {
    width: 16px;
    margin-right: 5px;
}

.card-header {
    background: #0a0a0a !important;
    border-radius: 0;
    padding: 5px;
    border: none !important;
    border-radius: 0 !important;
    padding: 5px !important;
}

.card-header h6 {
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
    color: white !important;
    margin-bottom: 0px !important;
}

#card-webolt .card-header h6 {
    color: #000000 !important;
}

.card li {
    text-align: left;
    display: flex;
    align-items: center;
    margin: auto;
    width: 168px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 14px;
    font-weight: 600;
}

.card .price-container {
    border-left: none;
    width: max-content;
    margin: auto !important;
    color: black;
}

#card-webolt .price-container {
    color: white;
    margin-top: 10px;
    margin-bottom: 5px;
}

#card-webolt li {
    background-color: inherit;
}

#card-webolt .card-footer {
    background: none !important;
    flex-direction: column;
    align-items: center;
}

#card-webolt .btn-more {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

#card-webolt .btn-after {
    position: absolute;
    bottom: -5px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 144px 0px 144px;
    border-color: #00ff7f transparent transparent transparent;
}

.card del {
    color: gainsboro;
}

.card {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.card .price-left .price-number {
    font-size: 70px !important;
}

.card .price-right .price-number {
    font-size: 25px !important;
}

.card .price-symbol {
    font-size: 30px;
}

.card-footer {
    background: white !important;
    font-size: 10px;
    text-align: justify;
    width: 315px;
    max-width: 100%;
    margin-top: 20px !important;
    margin: auto;
    display: flex;
    justify-content: center;
}

/*
.card-footer p {
    display: none;
}
*/

#aide h2 {
    color: white;
    margin-bottom: 20px;
}

#aide-right {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    position: relative;
}

#aide-right::before {
    content: "";
    position: absolute;
    left: -10px;
    width: 50px;
    height: 100%;
    background-image: url(../img/bolt-separator.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
#particles-js {
    position: absolute;
    height: 100vh;
    background-color: transparent;
    background-image: url(style.css);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    max-width: 100%;
    z-index: -1;
    left: 0px;
    right: 0;
}
*/

#particles-js {
    position: absolute;
    height: 100vh;
    max-width: 100%;
    z-index: -1;
    left: 0px;
    right: 0px;
    background: url(../img/bolta.svg) right top / 50% no-repeat, linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%), linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 60%), url(../img/webolt-digital-city-pc.jpg) center center / cover no-repeat;
}

#particles-js::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 50%);
}

/* Formulaire de contact */

/* Styles généraux */
#contactForm {
    width: 100%;
    max-width: 800px;
    padding: 0px 75px;
}

#contactForm .form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#contactForm .form-group {
    flex: 0 0 48%;
    margin-bottom: 15px;
}

#contactForm label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
}

button[type="submit"] {
    margin-top: 50px !important;
}

#reservationModal button[type="submit"] {
    margin: 0px !important;
}

#contactForm input,
#contactForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s;
}

#contactForm input:focus,
#contactForm textarea:focus {
    border-color: black;
}

input:focus {
    outline: none;
    box-shadow: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 0px transparent inset !important;
    -webkit-text-fill-color: #000000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-check-input[type=checkbox] {
    border-radius: 0 !important;
}

#form-label-category {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

.form-check-label {
    color: #0a0a0a;
    font-size: 14px;
}

#group-btn-expert {
    display: flex !important;
    align-items: center;
    background: #f5f5f5;
    height: 45px;
    position: relative;
    top: -3px;
}

#is_expert {
    margin-top: 0px;
    margin-left: 12px;
    border: 1.5px solid lightgray;
}

#expert_fields .form-check-input {
    position: relative;
    top: 2px;
}

.form-check.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-4%20-4%208%208'%3E%3Crect%20x='-2.5'%20y='-2.5'%20width='5'%20height='5'%20fill='rgba(0,0,0,1)'/%3E%3C/svg%3E") !important;
}

/* Notification de succès */
.success-message {
    display: none;
    background-color: #28a745;
    color: #fff;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 5px;
}

.notifications {
    position: fixed;
    width: 90%;
    max-width: 100%;
    z-index: 9999;
    margin: auto;
    left: 0px;
    right: 0px;
}

.notifications p {
    padding: 10px 0px;
}

/* Media Queries pour mobile */
@media (max-width: 768px) {
    .form-group {
        flex: 0 0 100%;
    }
}

.notification {
    display: none;
    /* Masquer les notifications par défaut */
    padding: 10px;
    border-radius: 5px;
    margin: 15px 0;
    padding: 10px 15px;
}

.notification.success {
    background-color: #d1e7dd;
    color: #0a3622;
}

.notification.error {
    background-color: #f2dede;
    color: red;
}

*:focus,
a:focus {
    outline: none !important;
    border: none;
    box-shadow: none !important;
}

#contactForm.hidden {
    display: none;
    /* Masquer le formulaire après soumission */
}

#contactForm label {
    display: none;
}

#contactForm label[for="file"] {
    display: block;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

#contactForm select,
#contactForm input,
#contactForm textarea {
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0px !important;
    border: 0px !important;
    background: none;
    padding: 10px 0px;
    border-bottom: 1.25px solid #ffffff !important;
}

#contactForm option {
    background: #000000;
    color: white;
}

#section-connexion input.form-control,
#section-inscription input.form-control {
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0px !important;
    border: 0px !important;
    background: none;
    padding: 10px 0px;
    border-bottom: 1.5px solid #0a0a0a !important;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked,
.form-check:not(.form-switch) .form-check-input:checked,
.form-check-input:checked:hover,
.form-check:not(.form-switch) .form-check-input:checked:hover,
.form-check-input:focus,
.form-check:not(.form-switch) .form-check-input:checked:focus,
.form-check-input:checked:focus,
.form-check:not(.form-switch) .form-check-input:checked:focus {
    background-color: #00ff7f !important;
    border-color: #dee2e6 !important;
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

#contactForm select {
    width: 100%;
}

#contactForm textarea:focus {
    height: 150px;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: white;
}

#section-connexion input::placeholder,
#section-inscription input::placeholder {
    color: #0a0a0a;
}

#section-connexion input,
#section-inscription input {
    text-align: center;
}

#contactForm select:focus,
#contactForm input:focus,
#contactForm textarea:focus {
    border: 0px !important;
    border-radius: 0px !important;
    border-bottom: 2px solid #00ff7f !important;
}

.g-recaptcha {
    margin-top: 35px;
    margin-bottom: -10px;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
}

#page-inscription .g-recaptcha {
    margin-top: 25px;
}

.grecaptcha-badge {
    visibility: hidden;
}

#info-grecaptcha {
    color: white;
    font-size: 10px;
    display: none;
}

#info-grecaptcha a {
    color: white;
}

#footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: #0a0a0a !important;
    background-image: linear-gradient(90deg, #070707 30%, #000000 70%) !important;
}

#page-espace-client #footer {
    background: rgb(10, 10, 10) !important;
    background-image: linear-gradient(-90deg, #000000 30%, #0a0a0a 70%) !important;
}

.card-testimonial h4 {
    font-size: 26px !important;
    margin-bottom: 0px;
}

.rating {
    margin-bottom: 10px;
}

h4 {
    text-transform: uppercase;
    font-family: 'Nikeflix', sans-serif;
    font-weight: normal !important;
    font-size: 30px !important;
    transform: skewX(350deg);
}

#footer h4,
#footer a {
    color: white;
}

#footer a {
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    text-decoration: none;
}

#footer ul {
    padding-left: 0px;
    margin-bottom: 0px;
}

#footer li {
    list-style: none;
}

#copyright {
    margin: 1rem 0px 0px 0px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
    position: relative;
    left: -5.5px;
}

#bloc-reseaux-sociaux {
    display: flex;
    margin-top: 15px;
    position: relative;
    left: -5.5px;
}

.icon-social {
    font-size: 25px;
    margin: 15px 4px 0px 4px;
}

.testimonial-wrapper {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

#testimonial {
    position: relative;
    background: #fcfcfc;
}

#testimonial-left {
    position: relative;
    background-image: url(../img/pourquoi-illustration.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
    z-index: 1;
    /* height: 450px; */
}

#testimonial-right {
    z-index: 0;
}

#testimonial img {
    position: relative;
    top: -4px;
    left: 2px;
    width: 25px;
}

#testimonial-left h2 {
    color: white;
    margin: 0px;
    font-size: 38px !important;
    font-family: LemonMilk, sans-serif;
    text-shadow: rgb(255 255 255 / 10%) 15px 19px 0px;
}

#testimonial p,
.card-testimonial p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
}

#testimonial-left p {
    color: white;
    font-size: 15px;
    font-family: "Euclid Circular B", sans-serif;
    font-weight: normal;
    text-align: justify;
    padding-right: 40px;
    z-index: 1;
}

#testimonial-left,
#testimonial p {
    color: white;
}

.card-testimonial p {
    color: #0a0a0a !important;
}

#testimonial .blockquote-footer {
    margin-top: 5px;
    color: white;
    font-weight: 700;
}

#testimonial .blockquote-footer:before {
    display: none;
}

#section-pourquoi-intro {
    background-color: white;
    display: flex !important;
    align-items: flex-start !important;
    /* background-image: url(../img/webolt-fantom.svg);
    background-size: 375px;
    background-repeat: no-repeat;
    background-position: center; */
}

#section-pourquoi-intro h2 {
    margin-bottom: 25px;
}

#section-pourquoi-intro h3 {
    color: rgb(0, 0, 0);
    font-family: 'Nikeflix', sans-serif;
    font-size: 30px !important;
    margin-bottom: 0px;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#pourquoi-illustration {
    background-image: url(../img/pourquoi-illustration.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#pourquoi-illustration::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(0 255 127 / 60%);
    position: absolute;
}

.bloc-pourquoi {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section-pourquoi-intro h1 {
    display: block;
    z-index: 1;
    width: max-content;
    height: max-content;
    margin-bottom: 0px;
}

#section-pourquoi-intro p {
    color: #000000;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 0px;
}

.countdown-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffc107;
    color: #000;
    padding: 10px;
    text-align: center;
    display: none;
}

.calendar-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.calendar-table th,
.calendar-table td {
    padding: 10px;
    cursor: pointer;
}

.calendar-table td:hover {
    background-color: #00ff7f;
}

.modal {
    z-index: 999999999999999999999999999;
}

.modal .modal-header {
    border-bottom: 2px solid;
    margin-left: 18px;
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 0px;
    margin-right: 18px;
    padding-right: 0px;
}

.modal .modal-title {
    color: #000000;
    font-size: 33px;
    font-family: 'Nikeflix', sans-serif;
}

.modal .form-label {
    font-size: 15.5px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
    margin-bottom: 5px;
}

.modal .modal-content,
.modal .form-control {
    border-radius: 0;
}

#page-connexion,
#page-inscription,
#page-espace-client {
    height: 100vh;
    background: rgb(10, 10, 10) !important;
    background-image: linear-gradient(-90deg, #000000 30%, #0a0a0a 70%) !important;
}

#section-connexion h1,
#section-inscription h1 {
    color: #0a0a0a !important;
    height: inherit;
    margin-bottom: 0px;
}

#page-scan h1 {
    margin-bottom: 0px;
}

#form-connexion,
#form-inscription {
    background-color: white;
}

#form-connexion::before,
#form-inscription::before {
    content: "";
    position: absolute;
    left: -10px;
    width: 50px;
    height: 100%;
    background-image: url(../img/bolt-separator.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: invert(1);
}

#section-connexion input #section-inscription input {
    text-align: center;
    width: 277px;
    margin: auto;
}

#section-connexion .btn-more,
#section-inscription .btn-more {
    margin: 35px auto 0 auto !important;
}

#background-connexion img {
    width: 100%;
    margin: auto;
    display: block;
    position: relative;
    top: 15px;
    left: -15px;
}

#link-register {
    display: block;
    margin: auto;
    margin-bottom: 25px;
    color: #0a0a0a;
    font-family: "Euclid Circular B", sans-serif;
    font-size: 14px;
}

#link-register font {
    text-decoration: underline;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
    color: #0a0a0a;
}

#link-help {
    float: right;
    position: relative;
    top: 15px;
    right: -2px;
}

#page-scan #link-help {
    top: 17px;
}

#link-help img {
    width: 24px;
}

/* Styles page compte */
#page-espace-client html,
#page-espace-client body {
    height: 100%;
}

#page-espace-client {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#btn-payment {
    margin: inherit;
}

#title-separator {
    border-bottom: 1.5px solid #0a0a0a !important;
    margin-bottom: 15px;
    padding-bottom: 8px;
}

#title-separator p {
    margin-bottom: 0px;
    color: #0a0a0a;
    font-family: "Euclid Circular B", sans-serif;
    font-size: 14px;
}

.dropdown-content {
    display: none;
    flex-direction: column;
    margin-top: 5px;
    padding-top: 4px;
    padding-left: 5px;
}

#page-espace-client .nav .nav-link {
    color: white;
    padding-left: 0px;
}

#meetCalendarTab,
#meetTab,
#acceptedTab,
#meetConfirmedTab,
#meetCanceledTab {
    color: #0a0a0a !important;
    font-weight: bold !important;
}

/*
        #meetConfirmedTab {
            color: #198754 !important;
            font-weight: bold;
        }

        #meetCanceledTab {
            color: #dc3545 !important;
            font-weight: bold;
        }
*/
#currentMonthYear {
    text-transform: capitalize;
}

#page-espace-client {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
#page-espace-client h1 {
    color: #0a0a0a !important;
    font-size: 57px !important;
    height: inherit;
    margin-bottom: 5px;
}
*/

#page-espace-client main {
    background: white !important;
}

#title-separator {
    /*    border-bottom: 1.5px solid #0a0a0a !important;*/
    margin-bottom: 15px;
    padding-bottom: 8px;
}

#title-separator p {
    margin-bottom: 0px;
    color: #0a0a0a;
    font-family: "Euclid Circular B", sans-serif;
    font-size: 14px;
}

#page-espace-client button[type="submit"] {
    color: white;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
    margin-top: 0px !important;
}

#page-espace-client button[type="submit"]:hover {
    color: #0a0a0a;
}

#navTabs .nav-item {
    margin: 0 !important;
}

#page-espace-client .nav .nav-link {
    color: white;
    padding-left: 0px;
}

.dropdown-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
}

.dropdown-item {
    font-size: 14px;
}

#page-espace-client .dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    z-index: 1000;
    background: #0a0a0a;
    border-radius: 0;
}

#page-espace-client .dropdown .dropdown-menu .dropdown-item:hover {
    color: #0a0a0a;
}

#meetCalendarTab,
#meetTab {
    color: #0a0a0a !important;
    font-weight: bold !important;
}

#currentMonthYear {
    text-transform: capitalize;
}

#page-conseil-digital h1 {
    position: relative;
}

#page-conseil-digital h2 {
    text-align: left;
}

#page-conseil-digital h2,
#page-conseil-digital h3,
#page-conseil-digital p,
#page-conseil-digital li,
#page-conseil-digital a {
    color: white;
}

#page-conseil-digital p {
    text-align: justify;
}

.item-check-black,
.item-check-white {
    list-style: none;
    position: relative;
}

.item-check-black::before,
.item-check-white::before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 5px;
    left: -26px;
}

.item-check-black::before {
    background-image: url(../img/icon-check-black.svg);
}

.item-check-white::before {
    background-image: url(../img/icon-check-white.svg);
}

#section-intro-conseil-digital {
    height: calc(100vh - 116px);
    overflow: hidden;
}

#section-intro-conseil-digital img {
    max-width: 100%;
}

#section-intro-conseil-digital .title-number {
    font-size: 60px !important;
}

.row-conseil-inverse h2,
.row-conseil-inverse h3,
.row-conseil-inverse P,
.row-conseil-inverse li,
.row-conseil-inverse a {
    color: #0a0a0a !important;
}

.row-conseil-inverse {
    background-color: white;
    text-align: justify;
}

#circle-text {
    width: 115px;
}

#page-conseil-digital .title-number {
    position: relative;
}

#page-conseil-digital .title-number::after {
    content: "5";
    font-size: 60px;
    position: absolute;
    top: 3px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#circle-text text {
    fill: #00ff7f;
    font-family: "Lato", sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    font-variant-ligatures: none;
    letter-spacing: 6px;
    animation: rotate 25s linear infinite;
    transform-origin: 250px 250px;
}

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

#circle-text .textcircle {
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: 250px 250px;
}

#circle-text:hover .textcircle {
    transform: scale(1.2) rotate(90deg);
}

.step-number-conseil {
    position: relative;
    font-size: 125px;
    font-weight: bold;
    font-family: 'LemonMilk', sans-serif;
}

.step-number-conseil::after {
    position: absolute;
    top: -10px;
    right: 0px;
    font-size: 125px;
    font-weight: bold;
    font-family: 'LemonMilk', sans-serif;
    color: transparent;
    text-shadow: -5px 6px 0px color(srgb 0.5 0.5 0.5 / 0.1);
}

#step-1,
#step-3,
#step-5 {
    color: #0a0a0a;
}

#step-2,
#step-4 {
    color: white;
}

#step-2::after,
#step-4::after {
    text-shadow: -5px 6px 0px color(srgb 0.85 0.85 0.85 / 0.1);
}

#step-1::after {
    content: "1";
}

#step-2::after {
    content: "2";
}

#step-3::after {
    content: "3";
}

#step-4::after {
    content: "4";
}

#step-5::after {
    content: "5";
}

.icon-check {
    width: 20px;
}

.card-testimonial {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.row-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
}

.row-scroll .col {
    flex: 0 0 33.33%;
    /* Affiche 3 colonnes par rangée */
}








#mov-particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mov-particle {
    position: absolute;
    animation: fall linear infinite;
    opacity: 0.8;
    background-repeat: no-repeat;
    background-position: center;
}

.mov-particle-star {
    width: 20px;
    height: 20px;
    background-image: url('../img/mov-star.svg');
    background-size: contain;
}

.mov-particle-line {
    width: 10px;
    height: 40px;
    background-image: url('../img/mov-line.svg');
    background-size: contain;
}

.mov-particle-bolt {
    width: 25px;
    height: 25px;
    background-image: url('../img/mov-bolt.svg');
    background-size: contain;
}

@keyframes fall {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

#prevMonth,
#nextMonth {
    border-radius: 0px;
}

#prevMonthExp,
#nextMonthExp {
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#currentMonthYear {
    font-weight: 700;
    font-size: 22px !important;
    transform: skewX(350deg);
}

#meet,
#accepted {
    overflow-x: scroll;
}

#meet tr,
#accepted tr {
    border: 1px solid #dee2e6;
}

#meet .btn {
    border-radius: 10px;
    border: none;
    color: white;
    line-height: inherit;
    padding: 10px 15px;
}

#meet .btn:hover {
    background: #dc3545;
    color: white;
    text-decoration: none;
}

#meet .btn:disabled {
    background: #dc3545;
    color: white;
}

#meet .table,
#meetCalendar .table {
    margin-bottom: 1.5rem;
}

.available-info {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.7em;
    font-weight: 500;
    color: #000;
    background-color: white;
    padding: 2px 6px;
    border-radius: 0;
}

.cell-day-number {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 14.5px;
}

.reservation-title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.reservation-other {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
}

.cell-other-reservation {
    padding: 26.5px !important;
}

.tooltip {
    z-index: 9999999999;
    top: 2px !important;
    left: 5px !important;
}

.tooltip-inner {
    border-radius: 0px;
}

#shareLocation,
#shareLocationExpert {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    color: white;
    background: #000000;
    line-height: inherit;
    padding: 10px 15px;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
}

#shareLocation img,
#shareLocationExpert img {
    width: 16px;
    margin-left: 10px;
}

#statusMessage {
    color: #000000 !important;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

#statusMessage span {
    width: 10px;
    height: 10px;
    margin-left: 5px;
}

.group-info-meet {
    display: flex;
    justify-content: center;
}

.group-info-meet .bloc-info-meet {
    width: 50%;
}

.bloc-info-meet {
    position: relative;
}

.icon-help {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    z-index: 1;
}

.group-info-meet .bloc-info-meet:nth-child(1) {
    margin-right: 6.5px;
}

.group-info-meet .bloc-info-meet:nth-child(2) {
    margin-left: 6.5px;
}

.group-info-meet h2 {
    margin-bottom: 0px;
}

.bloc-info-meet {
    background: white;
    margin-bottom: 13px;
    padding: 15px 10px;
    text-align: center;
}

.bloc-info-meet h2 {
    font-size: 30px !important;
}

.bloc-info-meet p {
    margin-bottom: 0px !important;
    line-height: 1;
}

.bloc-info-meet a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: inherit !important;
    line-height: 1;
    text-decoration: underline;
    padding-bottom: 5px;
}

.bloc-info-meet a:visited {
    color: inherit;
}

#numberMeetProcess .fallback-value {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: inherit !important;
}

#numberMeetProcess p {
    font-family: 'LemonMilk', sans-serif;
    font-size: 30px !important;
}

#manageInvoiceModal .modal-body {
    max-height: 60vh;
    overflow-y: scroll;
}

#manageInvoiceModal .invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px !important;
}

#manageInvoiceModal .btn {
    border-radius: 10px;
    border: none;
    font-size: 14px;
    color: white;
    background: #000000;
    padding: 10px 15px;
    line-height: inherit;
}

#geocodeBtn {
    border-bottom: 1.5px solid #0a0a0a;
    border-radius: 10px;
}

.bi-search::before {
    font-weight: bold !important;
}

#postalInput {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

#results {
    max-width: 100%;
    font-size: 0.9em;
}

.multiple-result-item {
    border: 1px solid #ddd;
    margin: 5px 0;
    padding: 8px;
    cursor: pointer;
}

.multiple-result-item:hover {
    background: #eee;
}

/* Style pour le conteneur des villes ajoutées */
#selectedCitiesContainer div.wrapper {
    padding: 5px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#selectedCitiesContainer div.wrapper span {
    flex: 1;
}

#selectedCitiesContainer div.wrapper button {
    position: relative;
    top: -1px;
    background: transparent;
    color: #000000;
    border: none;
    cursor: pointer;
    font-family: 'bootstrap-icons';
}

.form-input-not-allowed,
.form-input-not-allowed:focus {
    background: #f0f0f0;
    border: 1px solid #f0f0f0;
    cursor: not-allowed;
}

.language-switcher {
    position: absolute;
    z-index: 9999;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
    text-align: center;
    margin-bottom: 15px;
}

#langModal .language-switcher {
    position: initial;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    display: flex;
}

.language-switcher a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 13px;
}

#langModal .language-switcher a,
#langModal .language-switcher span {
    color: #000000;
}

#langModal .language-switcher a {
    text-decoration: none;
    font-size: 18px;
    border: 1.5px solid;
    width: 100%;
}

#langModal .language-switcher a:first-child {
    margin-right: 3.5px;
}

#langModal .language-switcher a:last-child {
    margin-left: 3.5px;
}

.language-switcher a.active {
    font-weight: bold;
}

.language-switcher span,
.language-currency-display span {
    font-size: 5px;
    position: relative;
    top: -2px;
    margin-left: 1px;
    margin-right: 1px;
}

.language-currency-display {
    position: absolute;
    z-index: 9999;
    left: 0px;
    right: 0px;
    bottom: 0px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.language-switcher > span {
    text-decoration: none !important;
    color: rgb(255, 255, 255) !important;
    font-size: 13px !important;
}

.language-switcher > span.active {
    font-weight: bold !important;
}

.language-switcher {
    position: absolute;
    z-index: 9999;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
}

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

#langModal .modal-header img {
    width: 25px;
}

#langModal .btn {
    text-decoration: none !important;
    color: #000000 !important;
    background-color: white !important;
    transition: none !important;
    font-size: 18px !important;
    border: 1.5px solid !important;
    border-radius: 0px !important;
    padding: 0px;
}

#langModal .btn:last-child {
   margin-left: 7px; 
}

#langModal .btn-check:checked + .btn {
    font-weight: bold;
    color: black;
    opacity: 1;
}

/* Opacité pour boutons non sélectionnés */
.language-switcher a:not(.active) {
    opacity: 0.5;
}

#langModal .btn:not(.active) {
    opacity: 0.5;
}

/* Fond du modal pour #langModal */
#langModal {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Assurer le fond noir du modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#capture-dashboard-customer {
    background-color: white;
}

#capture-col-images {
    position: relative;
}

#phone-group {
    position: relative;
    right: -50px;
    width: 700px;
    height: 536px;
}

.PhoneGraphic {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0px;
    z-index: 1;
}

#PhoneGraphic-before {
    position: absolute;
    left: 100px;
    width: 600px;
    height: 459px;
    border-radius: 10px;
    background-color: #000000;
    backdrop-filter: blur(0px);
    z-index: 0;
    box-shadow: rgb(255 255 255) 2px -2px 5px -1px inset, rgb(255 255 255) 2px -2px 5px -1px;
    background-image: url(../img/capture-dashboard.png);
    background-position: 50px center;
    background-repeat: no-repeat;
    background-size: 850px;
    top: -25px;
}

#bloc-point {
    display: flex;
}

#PhoneGraphic-before .point {
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: #bbbbbb;
}

#phoneGraphic-before .point:nth-child(2) {
    margin-left: 5px;
    margin-right: 5px;
}

#header-screen-capture {
    display: flex;
    margin-top: 13px;
    margin-left: 13px;
}

#searchbar-capture {
    border-radius: 26px;
    background-color: white;
    display: inline;
    padding: 2px 10px;
    font-size: 11px;
    color: #000000;
    margin-left: 50%;
}

#searchbar-capture i {
    margin-right: 5px;
    color: #808080;
}

#capture-dashboard-customer h2 {
    margin-bottom: 35px;
}

#capture-dashboard-customer span:nth-child(1) {
    font-weight: 500;
}

#capture-dashboard-customer p {
    text-align: justify;
    color: #000000;
}

#capture-dashboard-customer ul {
    padding-left: 0px;
    margin: 0px;
}

#capture-dashboard-customer li {
    font-size: 30px;
    list-style: none;
    font-family: LemonMilk, sans-serif;
    margin: 0px;
    text-shadow: rgb(255 255 255 / 10%) 15px 19px 0px;
}

#capture-dashboard-customer li font {
    font-size: 38px;
}

#capture-dashboard-customer .btn-more {
    margin-top: 30px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
}

#capture-dashboard-customer .btn-more span {
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    font-weight: 600 !important;
}

#bloc-icons-carts {
       display: flex;
       margin-bottom: 25px;
}

.icon-cart {
    margin-left: 2.75px;
    margin-right: 2.75px;
    margin-bottom: 10px;
    width: 35px;
}

.HomepageHeroGraphic__phone.PhoneGraphic {
    --phoneWidth: 270px;
    --phoneHeight: 536px;
}

.MktRoot *,
.MktRoot :after,
.MktRoot :before {
    box-sizing: border-box;
}

.PhoneGraphic {
    --phoneBorderRadius: 36px;
    --phoneScreenBorderRadius: 29px;
    --phoneWidth: 264px;
    --phoneHeight: 533px;
    --phoneGraphicShadow: 0 25px 25px -25px rgba(50, 50, 93, 0.25), 0 10px 50px -25px rgba(0, 0, 0, 0.3), inset 0 -2px 6px 0 rgba(10, 37, 64, 0.35);
    width: var(--phoneWidth);
    height: var(--phoneHeight);
    padding: 8px;
    border-radius: var(--phoneBorderRadius);
    background: #f6f9fc;
    box-shadow: var(--phoneGraphicShadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 16px;
}

.CheckoutPhoneGraphic {
    background-color: #ffffff;
    background-image: url(../img/capture-2.jpg);
    width: 100%;
    height: 520px;
    border-radius: 30px;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.icon-check-capture {
    width: 16px;
    margin-right: 5px;
}

#page-legal h1,
.fst-italic {
    color: white;
}

#page-legal p {
    margin-bottom: 0px;
}

#page-legal .accordion a {
    color: inherit;
}

#page-legal .accordion-header {
    transform: none !important;
}

#page-legal .accordion-button {
    font-size: 32px;
    color: inherit !important;
}

#page-legal .accordion-button .title-number {
    margin-bottom: 3px;
    font-size: 30px !important;
}

#page-legal .accordion-button font {
    position: relative;
    top: 8px;
    font-size: 20px;
}

#page-legal .accordion-button,
#page-legal .accordion-item {
    border-radius: 0px !important;
}

.accordion-button:not(.collapsed) {
    background: none !important;
}

#section-faq h2 {
    font-size: 40px !important;
    list-style: none;
    font-family: LemonMilk, sans-serif;
    margin: 0px;
    transform: none
}

#section-faq h3 {
    text-transform: uppercase;
    font-family: 'Nikeflix', sans-serif;
    font-weight: normal !important;
    font-size: 40px !important;
}

#section-faq font {
    font-size: 57px;
}

#faq-intro p {
    margin-top: 25px;
    margin-bottom: 0px;
    text-align: center;
}

#faq-intro a {
    color: #000000 !important;
    margin-left: 10px;
    font-weight: 500;
    display: block;
    text-align: center;
}

#faq-intro i {
    font-weight: bold;
    color: #000000;
    margin-right: 5px;
    transform: rotate(315deg);
    display: inline-block;
    position: relative;
    top: 4px;
}

#faq p {
    margin-bottom: 0px;
    color: black;
}

#faq .accordion a {
    color: inherit;
}

#faq .accordion-header {
    transform: none !important;
}

#faq .accordion-button {
    font-size: 32px;
    color: black !important;
}

#faq .accordion-button .title-number {
    margin-bottom: 3px;
    font-size: 30px !important;
    color: black;
}

#faq .accordion-button font {
    position: relative;
    top: 8px;
    font-size: 20px;
    color: black;
}

#faq .accordion-body p {
    color: black;
}

#faq .accordion {
    border: 0 !important;
}

#faqAccordion .accordion-button {
    box-shadow: none !important;
    border: 0 !important;
}

#faqAccordion .accordion-item {
    border: none !important;
    border-bottom: 1px solid #dee2e6 !important;
    margin-top: 3px;
    border-radius: 0 !important;
}

#faqAccordion .accordion-item:last-child {
    border: none !important;
}

#bloc-banner {
    display: none;
    width: 100%;
    height: auto;
}

/* Bandeau de base (mutualisé) */
.banner {
    position: relative;
    width: 100%;
    height: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
    overflow: hidden;
}

/* Halo lumineux : direction normale */
.banner::before,
.banner-inverse::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 280px;
    top: -100px;
    background: radial-gradient(at 50%, #fff 0%, transparent 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    animation-duration: 3.75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.banner::before {
    left: -600px;
    transform: rotate(-35deg);
    animation-name: glide;
}

.banner-inverse::before {
    left: calc(100% + 600px);
    transform: rotate(35deg);
    animation-name: glide-inverse;
}

/* Animations */
@keyframes glide {
    from {
        left: -600px;
    }

    to {
        left: calc(100% + 600px);
    }
}

@keyframes glide-inverse {
    from {
        left: calc(100% + 600px);
    }

    to {
        left: -600px;
    }
}

/* Texte fantôme */
.ghost {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    letter-spacing: 4px;
    white-space: nowrap;
    color: #00ff7f;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    text-transform: uppercase;
    font-family: 'LemonMilk', sans-serif;
    font-size: 12px;
    padding-left: 50px;
}

#section-newsletter {
    background: white;
}

#bloc-newsletter {
    position: relative;
}

#bloc-newsletter::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 260px 45px 0 0;
    border-color: white transparent transparent transparent;
    transform: rotate(0deg);
}

#bloc-newsletter::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 260px 45px;
    border-color: transparent transparent white transparent;
    transform: rotate(0deg);
}

#section-newsletter h2 {
    color: white;
    text-align: left;
    margin-left: 15px;
    margin-bottom: 15px;
}

#section-newsletter p {
    color: white;
    margin-left: 13px;
    margin-top: 20px;
    margin-bottom: 5px;
}

#section-newsletter input {
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0px !important;
    border: 0px !important;
    background: none;
    padding: 10px 0px;
    margin-left: 15px;
    border-bottom: 4px solid #ffffff !important;
    width: 100%;
    font-weight: initial;
    font-size: 20px;
}

#section-newsletter input::placeholder {
    color: white;
}

#bloc-newsletter {
    width: 850px;
    background: #000000;
    background-image: linear-gradient(90deg, black, #222222);
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
}

#bloc-newsletter svg {
    width: 350px;
    padding: 0px;
}

#newsletter-textes {
    padding-top: 25px;
    padding-bottom: 35px;
    padding-left: 0px;
    padding-right: 0px;
}

.flash {
    filter: drop-shadow(0 0 4px #00FF7F);
    animation: flash-glow 2.5s infinite;
}

@keyframes flash-glow {
    0% {
        filter: drop-shadow(0 0 0px #00FF7F);
    }

    /* calme */
    6% {
        filter: drop-shadow(0 0 15px #00FF7F);
    }

    /* GROS flash blanc */
    9% {
        filter: drop-shadow(0 0 0px #FFFFFF);
    }

    13% {
        filter: drop-shadow(0 0 0px #00FF7F);
    }

    /* retour calme */
    37% {
        filter: drop-shadow(0 0 0px #00FF7F);
    }

    /* longue pause calme */
    39% {
        filter: drop-shadow(0 0 10px #FFFFFF);
    }

    /* petit flash */
    42% {
        filter: drop-shadow(0 0 0px #FFFFFF);
    }

    45% {
        filter: drop-shadow(0 0 5px #FFFFFF);
    }

    56% {
        filter: drop-shadow(0 0 0px #FFFFFF);
    }

    /* GROS ou moyen flash */
    59% {
        filter: drop-shadow(0 0 0px #FFFFFF);
    }

    62% {
        filter: drop-shadow(0 0 5px #00FF7F);
    }

    100% {
        filter: drop-shadow(0 0 0px #00FF7F);
    }

    /* calme jusqu'à la boucle */
}

.advantage-box font {
    font-size: 20px;
    font-family: 'Euclid Circular B', sans-serif;
    font-weight: 600;
}

.advantage-number {
    font-family: 'LemonMilk', sans-serif;
    font-size: 30px;
    color: #212529;
    line-height: 1;
}

#calendarBodyExp .bg-success-subtle {
    background-color: #00FF7F !important;
}

.alert {
    border-radius: 0;
    border: none;
}

#maintenanceModal .modal-dialog {
    max-width: 335px !important;
}

.countdown-abonnement {
    font-size: 1.1em;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    background: #f6fff9;
}

#group-btn-cgu {
    padding: 0px;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#terms_of_use {
    margin-right: 10px;
}

#group-btn-cgu a {
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 500;
}

#bloc-form-category {
    display: flex;
    justify-content: center;
}

.bloc-form-category:first-child {
    margin-right: 7px;
}

.bloc-form-category:last-child {
    margin-left: 7px;
}

/* Styles pour #btn-payments */
#btn-payments a, #btn-payments span.badge,
#btn-payments-modal a, #btn-payments-modal span.badge {
    border-radius: 10px !important;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Euclid Circular B', sans-serif;
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    line-height: inherit;
}

/* Fond pour la colonne droite du modal */
.modal-right-panel {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-right-panel a, .modal-right-panel span.badge {
    width: 100%;
    text-align: center;
}

/* Couleur de la progress bar dans le modal Nouvelle réservation */
#reservationModal .progress-bar {
    background-color: #00ff7f !important;
}

/* Flash type Windows sur la barre de progression */
#reservationModal .progress-bar.windows-flash {
    position: relative;
    overflow: hidden;
    background-color: #00ff7f !important;
}

#reservationModal .progress-bar.windows-flash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 100%
    );
    background-size: 120px 100%;
    background-repeat: no-repeat;
    background-position: -120px 0;
    animation: reservation-progress-flash 1s linear infinite;
    will-change: background-position;
    pointer-events: none;
}

@keyframes reservation-progress-flash {
    0%   { background-position: -120px 0; }
    100% { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    #reservationModal .progress-bar.windows-flash {
        animation: none;
    }
    #reservationModal .progress-bar.windows-flash::after {
        animation: none;
    }
}

/* Styles pour l'indicateur d'étape dans le modal Nouvelle réservation */
#stepIndicator {
    font-family: 'LemonMilk', sans-serif;
    font-size: 30px;
}

/* Masquer l'input location dans le formulaire Nouvelle réservation */
#location {
    display: none;
}

/* Centrer horizontalement les boutons shareLocation et shareLocationExpert */
#shareLocation,
#shareLocationExpert {
    margin: 0 auto;
    display: block;
}

/* Conteneur géolocalisation centré verticalement */
.geo-container.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Hauteur de la barre de progression dans le modal Nouvelle réservation */
#reservationModal .progress {
    height: 10px;
}

/* Taille de l'icône du bouton Précédent pour qu'elle soit comme celle du bouton Suivant */
#prevBtn i {
    font-size: 25px;
}

/* #langModal {
    opacity: 1 !important;
    display: block !important;
} */

#langModal p {
    font-weight: 500;
    margin-bottom: 10px;
}

.section-hero {
    height: calc(var(--vh, 1vh) * 100 - 71px);
    display: flex;
    align-items: center;
}

@supports (height: 100svh) {
    .section-hero {
        height: calc(100svh - 71px);
    }
}

.page-category .section-hero {
    height: calc(100svh - 95px);
}

.page-category .section-intro,
.page-category .section-solutions,
.page-category .section-target,
.page-category .section-related,
.page-category .section-cta {
    background: white;
}

.page-category .section-needs {
    background: #f9f9f9;
}

.page-category .category-summary strong {
    font-weight: 500 !important;
}

.page-category .category-summary hr {
    margin-bottom: 10px !important;
}

#page-bureautique,
#page-cybersecurite,
#page-e-commerce,
#page-identite-visuelle,
#page-intelligence-artificielle,
#page-navigation-messagerie,
#page-referencement,
#page-reseaux-sociaux {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%), linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 60%), url(../img/webolt-digital-city-pc.jpg) center center;
    background-position-x: center !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

#page-bureautique::before,
#page-cybersecurite::before,
#page-e-commerce::before,
#page-identite-visuelle::before,
#page-intelligence-artificielle::before,
#page-navigation-messagerie::before,
#page-referencement::before,
#page-reseaux-sociaux::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 50%);
}

#section-faq {
    background: white;
}

#category-group {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#category-group .categories {
    display: flex;
    width: max-content;
}

#category-group .categories a {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    margin: 10px;
    line-height: 1.4;
}

#category-group .categories .badge {
    font-size: 10px;
    position: absolute;
    top: -10px;
    left: -10px;
    color: white !important;
    background: darkgrey !important;
    border: darkgrey !important;
}

#category-group .categories .sub-text {
    font-weight: 100;
}

#category-group .categories .category-active {
    color: black;
    padding: 5px 5px 5px 10px;
}

#category-group .categories .category-soon {
    color: darkgrey;
    padding: 5px 10px 5px 10px;
}

#category-group .categories i {
    font-weight: bold;
    color: #000000;
    transform: rotate(315deg);
    display: inline-block;
}

/* Styles pour la progressbar dans le formulaire d'inscription */
#section-inscription .progress-bar {
    background-color: #00ff7f !important;
}

#section-inscription .progress-bar.windows-flash {
    position: relative;
    overflow: hidden;
    background-color: #00ff7f !important;
}

#section-inscription .progress-bar.windows-flash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 100%
    );
    background-size: 120px 100%;
    background-repeat: no-repeat;
    background-position: -120px 0;
    animation: reservation-progress-flash 1s linear infinite;
    will-change: background-position;
    pointer-events: none;
}

#section-inscription .progress {
    height: 10px;
}

/* Styles pour les boutons client et expert dans inscription */
#btnClient {
    background-color: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    font-weight: 600 !important;
    border-radius: 0.375rem !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    line-height: 1.5 !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#btnExpert {
    background-color: #00ff7f !important;
    color: black !important;
    border: 1px solid #00ff7f !important;
    font-weight: 600 !important;
    border-radius: 0.375rem !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-family: 'Euclid Circular B', sans-serif !important;
    line-height: 1.5 !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Styles pour les boutons Précédent et Suivant dans inscription */
#prevBtn, #nextBtn {
    padding: 10px 15px !important;
    border-radius: 10px !important;
}

#fondateur {
    background-color: white;
    padding-bottom: 75px !important;
}

.founder-name {
    font-family: 'Rosellinda Alyamore', sans-serif;
    font-size: 50px;
}

.founder-subname {
    font-family: cursive;
    font-style: italic;
    font-size: 15px;
}

.page-category #breadcrumb {
    padding-left: 0px;
}

/* Largeur des images icônes dans les cartes */
.card-icon {
    width: 24px;
}

/* Styles pour les titres des cartes */
.card-title {
    color: #000000;
    font-family: sans-serif;
    font-weight: 600 !important;
    font-size: 18px !important;
}

#section-methode {
    padding-top: 75px;
    padding-bottom: 75px;
}