:root {
    /* Breakpoints responsive (référence pour @media) : mobile < 768, tablette 768–991, desktop ≥ 992 */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    --bs-link-color: white;
    --bs-link-hover-color: rgba(255, 255, 255, 0.8);
    --bs-font-sans-serif: "Montserrat", sans-serif;
    --slider-tile-width: 280px;
    --slider-tile-height: 180px;
    --slider-tile-factor: 0.8;
    --color-black: #01030c;
    --color-white: white;

    --color-blue1: #7dc4f5;
    --color-blue2: #219bf1;
    --color-blue4: #747def;
    --color-blue5: #5d5bbe;
    --color-blue6: #009dff;

    --color-gray3: #240046;
    --color-gray1: rgba(255, 255, 255, 0.5);
    --color-gray7: rgba(255, 255, 255, 0.2);
    --color-gray6: rgba(255, 255, 255, 0.1);
    --color-gray4: rgba(255, 255, 255, 0.05);
    --color-gray2: rgba(0, 0, 0, 0.5);
    --color-gray9: rgba(0, 0, 0, 0.2);
    --color-gray5: rgba(0, 0, 0, 0.5);

    --color-transparent: rgba(255, 255, 255, 0);

    --color-pink1: #fc6194;
    --color-pink2: #9b3366;
    --color-pink3: #74205a;
    --color-pink4: #fee4ed;
    --color-pink5: rgba(252, 97, 148, 0.17);
    --color-pink6: #ff43bc;
    --color-pink7: #302b5e;
    --color-pink8: #460f4f;

    --color-green1: green;
    /* Teal / gris-vert clair pour éclaircir blocs (avis clients, articles blog, etc.) */
    --voyanz-clair: rgb(171, 186, 184);

    --color-red1: #d72f3c;

    --bs-border-color: rgba(255, 255, 255, 0.2);

    --bs-primary-rgb: 92, 43, 99;
}

body {
    background: linear-gradient(130deg, #1d193e 0%, #0d094c 5%, #9b3366 100.41%); /* ⚠️ UI : Background restauré pour le footer */
}

/* Bannière pré-lancement — CTA waitlist */
.voyanz-banner-phase-tests {
    background: linear-gradient(90deg, var(--color-pink2) 0%, var(--color-pink3) 100%);
    color: var(--color-white);
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.voyanz-banner-phase-tests span {
    font-weight: 500;
    line-height: 1.35;
}
.voyanz-banner-phase-tests-icon {
    flex-shrink: 0;
    opacity: 0.95;
    width: 22px;
    height: 22px;
}
.voyanz-banner-phase-tests-sep {
    opacity: 0.85;
    font-weight: 600;
}
.voyanz-banner-phase-tests-cta {
    display: inline-block;
    color: #b8184f;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.voyanz-banner-phase-tests-cta:hover,
.voyanz-banner-phase-tests-cta:focus {
    color: #9a1240;
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* Cartes avis clients et articles blog : fond teal clair rgb(171,186,184) pour éclaircir (variable --voyanz-clair) */
.cardreview,
.cardblog {
    background-color: var(--voyanz-clair);
}

/* Carte blog « titre au-dessus de l’image » : pas de fond clair sur toute la carte */
.cardblog.cardblog-layout-split {
    background-color: transparent;
}

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

.cardreview-title,
.cardblog-title {
    color: #2a1f3d;
}

/* Titres articles blog (bandeau) : blanc — annule la couleur foncée des cartes avis */
.cardblog-layout-split .cardblog-title {
    color: #fff !important;
}

/* Homepage (ancien slider blog superposé) : conservé si jamais une carte sans split */
body#homepage .cardblog:not(.cardblog-layout-split) .cardblog-title {
    color: #fff;
}
.cardreview-text,
.cardblog-text {
    color: #3d353d;
}
.cardreview .d-flex .text-end,
.cardreview .d-flex .text-end div {
    color: #2a1f3d;
}

/* ========== Modal plein écran : article blog (descriptif / contenu HTML) ========== */
#blogModal .blog-modal-content {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#blogModal .blog-modal-header {
    background: transparent;
    padding: 1.15rem 1.15rem 0.35rem;
}

@media (min-width: 768px) {
    #blogModal .blog-modal-header {
        padding: 1.4rem 1.75rem 0.5rem;
    }
}

#blogModal .blog-modal-title {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 2.6vw, 1.7rem);
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

#blogModal .blog-modal-body {
    background: transparent;
}

#blogModal .blog-modal-container {
    max-width: 1040px;
}

/* Zone de lecture : carte semi-transparente sur le dégradé sombre */
#blogModal #blogModalArticleRoot {
    background: rgba(255, 255, 255, 0.08);
    color: #e0dce8;
    border-radius: 20px;
    padding: 1.65rem 1.25rem 2.1rem;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
    #blogModal #blogModalArticleRoot {
        padding: 2.15rem 2.25rem 2.75rem;
        border-radius: 24px;
    }
}

#blogModal #blogModalArticleRoot > *:first-child {
    margin-top: 0;
}

#blogModal #blogModalArticleRoot p,
#blogModal #blogModalArticleRoot .elementor-widget-text-editor,
#blogModal #blogModalArticleRoot .elementor-text-editor {
    font-size: 1.05rem;
    line-height: 1.78;
    color: #d0cbdb;
    margin-bottom: 1.15rem;
}

#blogModal #blogModalArticleRoot h1,
#blogModal #blogModalArticleRoot h2,
#blogModal #blogModalArticleRoot h3,
#blogModal #blogModalArticleRoot h4 {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    color: #f0ecf5;
    margin-top: 1.65rem;
    margin-bottom: 0.6rem;
    line-height: 1.28;
}

#blogModal #blogModalArticleRoot h1 {
    font-size: 1.65rem;
}

#blogModal #blogModalArticleRoot h2 {
    font-size: 1.4rem;
}

#blogModal #blogModalArticleRoot h3 {
    font-size: 1.2rem;
}

#blogModal #blogModalArticleRoot a {
    color: #b8a9f0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#blogModal #blogModalArticleRoot a:hover {
    color: #d4c8ff;
}

#blogModal #blogModalArticleRoot img,
#blogModal #blogModalArticleRoot .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 14px;
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 28px rgba(13, 9, 76, 0.12);
}

#blogModal #blogModalArticleRoot ul,
#blogModal #blogModalArticleRoot ol {
    margin-bottom: 1.2rem;
    padding-left: 1.35rem;
}

#blogModal #blogModalArticleRoot li {
    margin-bottom: 0.4rem;
    line-height: 1.65;
    color: #d0cbdb;
}

#blogModal #blogModalArticleRoot blockquote {
    margin: 1.45rem 0;
    padding: 1rem 1.2rem;
    border-left: 4px solid #fc6194;
    background: rgba(252, 97, 148, 0.08);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #c8c0d8;
}

#blogModal #blogModalArticleRoot hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 1.85rem 0;
    opacity: 1;
}

/* Elementor / WordPress : fonds blocs transparents pour laisser la carte « prose » */
#blogModal #blogModalArticleRoot .elementor-section,
#blogModal #blogModalArticleRoot .e-con,
#blogModal #blogModalArticleRoot .elementor-column-wrap,
#blogModal #blogModalArticleRoot .elementor-widget-wrap {
    background-color: transparent !important;
}

#blogModal #blogModalArticleRoot .elementor-section .elementor-background-overlay {
    opacity: 0.35;
}

#blogModal .blog-modal-footer {
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#blogModal .blog-modal-footer .btn-light {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#blogModal .blog-modal-footer .btn-light:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body#homepage {
    /* Dégradé progressif violet clair → violet foncé pour éviter la scission brute (priorité sur body transparent) */
    background: linear-gradient(
        180deg,
        #0c0949 0%,
        #0d094c 20%,
        #150b35 40%,
        #1a0d3a 55%,
        #1e0f40 70%,
        #240046 85%,
        var(--color-pink2) 100%
    ) !important;
    min-height: 100vh;
}

body#voyanzhoroscope footer {
    background: #abbab8;
}

.toptop {
    background-color: #01030b;
    overflow: hidden;
}
.toptop .icos-social,
.toptop .icos-flags {
    margin: 0;
}
.toptop .mylogo {
    flex-shrink: 0;
}
/* Bloc marque + drapeaux : collé à gauche du top bar, VOYANZ au-dessus des drapeaux */
.toptop-brand-block {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    gap: 0.35rem;
}
/* Les drapeaux repassent en flux normal à l'intérieur du bloc (sinon absolus left:0) */
.toptop-brand-block .icos-flags {
    position: static;
}
.toptop-brand {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    letter-spacing: 0.2em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    background: linear-gradient(165deg, #ffffff 0%, #f3e8ff 42%, #e8b4f0 78%, #fc6194 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 10px rgba(252, 97, 148, 0.35)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
    transition: filter 0.2s ease, letter-spacing 0.2s ease;
}
.toptop-brand:hover {
    letter-spacing: 0.22em;
    filter: drop-shadow(0 2px 14px rgba(252, 97, 148, 0.5)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.2));
}
@media (max-width: 767.98px) {
    .toptop .row > .col {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        position: relative !important;
    }
    .toptop-brand-block {
        order: 1 !important;
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
        flex-shrink: 0 !important;
    }
    .toptop-brand {
        font-size: 1.15rem !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    .toptop-brand:hover {
        letter-spacing: 0.1em !important;
    }
    .toptop-brand-block .icos-flags {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .toptop-brand-block .icos-flags img {
        width: 20px !important;
        height: 14px !important;
    }
    .toptop .mylogo {
        display: none !important;
    }
    .toptop .icos-social {
        order: 2 !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    .toptop .icos-social img {
        width: 28px !important;
        height: 28px !important;
    }
}


.modal {
    --bs-modal-bg: rgba(104, 72, 120, 0.9);
}

/* Offcanvas navigation mobile/tablette : thème sombre aligné m-navbar */
.voyanz-nav-offcanvas {
    background: linear-gradient(180deg, #240046 0%, #0d1124 100%);
}
/* Bouton dropdown "Voyanz" : même rendu que les liens nav, ouverture/fermeture au clic uniquement */
.m-navbar .voyanz-nav-dropdown-trigger {
    background: none;
    border: none;
    color: var(--color-white);
    font: inherit;
    padding: 0;
}
.m-navbar .voyanz-nav-dropdown-trigger:hover {
    color: var(--color-blue1);
}
.m-navbar ul li.m-navbar-item.active .voyanz-nav-dropdown-trigger {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
    border-radius: 15px;
    padding: 0 20px;
}

/* Liens directs de la barre : au survol uniquement le texte passe en bleu (rien d’autre) */
.m-navbar ul li.m-navbar-item:not(.active) a:hover {
    color: var(--color-blue1);
    background-color: transparent;
    text-decoration: none;
}
/* Focus discret (évite double rendu avec l’état actif) et pas de contour */
.m-navbar ul li.m-navbar-item:not(.active) a:focus {
    color: var(--color-blue1);
    background-color: transparent;
    text-decoration: none;
    outline: none;
}
.m-navbar ul li.m-navbar-item a:focus-visible {
    outline: 2px solid var(--color-blue1);
    outline-offset: 2px;
}
/* Validation = onglet actif (page courante) : rose uniquement au clic / après navigation */
.m-navbar ul li.m-navbar-item.active a {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
    border-radius: 15px;
    padding: 0 20px;
    margin: 0;
    text-decoration: none;
}

/* Menu Voyanz : fermé par défaut, ouvert uniquement au clic */
.voyanz-dropdown-parent .dropdown-menu {
    display: none;
}
.voyanz-dropdown-parent .dropdown-menu.show {
    display: block;
}

/* Desktop : une seule ligne de nav (invité + connecté), boutons auth compacts */
@media (min-width: 992px) {
    .m-navbar .voyanz-navbar-main {
        min-width: 0;
        overflow: visible;
    }
    .m-navbar .voyanz-navbar-list {
        flex-wrap: nowrap;
        gap: 0;
    }
    .m-navbar .voyanz-navbar-list > li.m-navbar-item {
        margin: 0 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .m-navbar .voyanz-navbar-list > li.m-navbar-item.active {
        margin: 0 6px;
    }
    .m-navbar .voyanz-navbar-list > li.m-navbar-item.active a,
    .m-navbar .voyanz-navbar-list > li.m-navbar-item.active .voyanz-nav-dropdown-trigger {
        padding: 0 14px;
    }
    .m-navbar-buttons--guest {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    .m-navbar-buttons--guest .voyanz-nav-auth-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.875rem;
        line-height: 1.25;
        white-space: nowrap;
    }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .m-navbar .voyanz-navbar-list > li.m-navbar-item {
        margin: 0 5px;
        font-size: 0.92rem;
    }
    .m-navbar-buttons--guest .voyanz-nav-auth-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.8125rem;
    }
}

.voyanz-nav-offcanvas .offcanvas-header {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.voyanz-mobile-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0;
}
.voyanz-mobile-nav .nav-link:hover {
    color: var(--color-blue1);
}
.voyanz-mobile-nav .nav-link.active {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
    border-radius: 8px;
    padding-left: 0.75rem;
}
.voyanz-nav-toggler:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}
.voyanz-nav-toggler:focus {
    box-shadow: none;
}

/* ============================================
   VIDEO PLAYER MODAL - Design amélioré
   ============================================ */
#videoPlayerModal .modal-dialog {
    max-width: 900px;
}

#videoPlayerModal .modal-content {
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.98) 0%, rgba(26, 15, 60, 0.98) 50%, rgba(139, 45, 95, 0.98) 100%);
    border: 2px solid rgba(245, 168, 196, 0.3);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 168, 196, 0.2);
    overflow: hidden;
}

#videoPlayerModal .modal-header {
    background: linear-gradient(135deg, rgba(70, 15, 79, 0.8) 0%, rgba(116, 32, 90, 0.8) 100%);
    border-bottom: 2px solid rgba(245, 168, 196, 0.3);
    padding: 20px 25px;
}

#videoPlayerModal .modal-title {
    color: white;
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

#videoPlayerModal .modal-title::before {
    content: "🎬";
    font-size: 1.5rem;
}

#videoPlayerModal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.3s ease;
}

#videoPlayerModal .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

#videoPlayerModal .modal-body {
    padding: 0;
    background: #000;
    position: relative;
    overflow: hidden;
}

#videoPlayerModal #videoPlayerVideo {
    width: 100%;
    height: auto;
    max-height: 70vh;
    display: block;
    background: #000;
    border-radius: 0;
}

#videoPlayerModal .modal-footer {
    background: linear-gradient(135deg, rgba(70, 15, 79, 0.8) 0%, rgba(116, 32, 90, 0.8) 100%);
    border-top: 2px solid rgba(245, 168, 196, 0.3);
    padding: 15px 25px;
    justify-content: center;
}

#videoPlayerModal .modal-footer .btn {
    background: linear-gradient(135deg, #f5a8c4 0%, #9370db 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 168, 196, 0.3);
}

#videoPlayerModal .modal-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 168, 196, 0.5);
}

/* ============================================
   VIDEO THUMBNAIL - Design avec bouton play
   ============================================ */
.video-thumbnail-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100px;
    height: 65px;
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.9) 0%, rgba(139, 45, 95, 0.9) 100%);
    border: 2px solid rgba(245, 168, 196, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

/* Centrer la thumbnail dans la cellule du tableau */
td:has(.video-thumbnail-container) {
    text-align: center;
    vertical-align: middle;
}

.video-thumbnail-container:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(245, 168, 196, 0.4);
    border-color: rgba(245, 168, 196, 0.6);
}

.video-thumbnail-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.7) 0%, rgba(139, 45, 95, 0.7) 100%);
    z-index: 1;
}

.video-thumbnail-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #f5a8c4 0%, #9370db 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(245, 168, 196, 0.5);
    transition: all 0.3s ease;
}

.video-thumbnail-container:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 25px rgba(245, 168, 196, 0.7);
}

.video-thumbnail-container .play-icon i {
    color: white;
    font-size: 1rem;
    margin-left: 2px; /* Ajustement visuel pour centrer l'icône play */
}

.video-thumbnail-container .video-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 6px;
    border-radius: 5px;
}

/* ============================================
   MODALS VOYANZ - Style uniforme et générique
   ============================================ */
/* ⚠️ REDESIGN : Design original avec touches féminines épurées */
.modal-voyanz {
    background: linear-gradient(135deg, #2a1f3d 0%, #1a0f3c 5%, #8b2d5f 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    overflow: hidden;
}

.modal-voyanz .modal-header {
    background: rgba(70, 15, 79, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding: 18px 22px;
}

.modal-voyanz .modal-title {
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0.3px;
}

.modal-voyanz .modal-title i {
    margin-right: 10px;
    color: #f5a8c4;
}

.modal-voyanz .modal-body {
    padding: 22px 24px;
    color: white;
}

.modal-voyanz .modal-footer {
    background: rgba(70, 15, 79, 0.5);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    padding: 18px 22px;
}

/* ============================================
   Popup Assistant IA Voyanz — identité claire et professionnelle
   ============================================ */
#modalAiGuide .modal-dialog {
    max-width: 560px;
}
#modalAiGuide .modal-body {
    min-height: 280px;
}
#modalAiGuide.modal .modal-content.modal-ai-guide-voyanz {
    border: 2px solid rgba(245, 168, 196, 0.35);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
#modalAiGuide .modal-ai-guide-header {
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.98) 0%, rgba(26, 15, 60, 0.98) 50%, rgba(139, 45, 95, 0.6) 100%);
    border-bottom: 1px solid rgba(245, 168, 196, 0.25);
    padding: 16px 20px;
}
#modalAiGuide .modal-ai-guide-logo {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
}
#modalAiGuide .modal-ai-guide-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}
#modalAiGuide .modal-ai-guide-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    letter-spacing: 0.02em;
}
#modalAiGuide .modal-ai-guide-footer {
    background: rgba(30, 20, 50, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: center;
}
#modalAiGuide .modal-ai-guide-branding {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
#modalAiGuide .modal-ai-guide-branding strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* Mobile : modal IA fullscreen pour éviter le scroll bloqué */
@media (max-width: 767.98px) {
    #modalAiGuide .modal-dialog {
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #modalAiGuide .modal-content.modal-ai-guide-voyanz {
        height: 100%;
        border-radius: 0;
        border: none;
    }
    #modalAiGuide .modal-body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    #modalAiGuide .ai-guide-chat .ai-guide-messages {
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    #modalAiGuide .ai-guide-block {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #modalAiGuide .ai-guide-chat {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #modalAiGuide .modal-ai-guide-header {
        padding: 12px 16px;
        flex-shrink: 0;
    }
    #modalAiGuide .modal-ai-guide-footer {
        flex-shrink: 0;
    }
}

.modal-voyanz-card {
    background: rgba(255, 255, 255, 0.12);
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 4px solid;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
}

.modal-voyanz-card.card-pink {
    border-left-color: #f5a8c4;
}

.modal-voyanz-card.card-purple {
    border-left-color: #d89bb8;
}

.modal-voyanz-card.card-blue {
    border-left-color: #b8a5d4;
}

.modal-voyanz-card.card-cyan {
    border-left-color: #c4a5d4;
}

.modal-voyanz-card-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.modal-voyanz-card-label i {
    color: #f5a8c4;
    font-size: 0.9rem;
}

.modal-voyanz-card-value {
    font-weight: 500;
    font-size: 1rem;
    color: white;
    line-height: 1.5;
}

.modal-voyanz-btn-cancel {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
}

.modal-voyanz-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-color: rgba(255, 255, 255, 0.35);
}

.modal-voyanz-btn-confirm {
    background: linear-gradient(135deg, #f5a8c4 0%, #d89bb8 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(245, 168, 196, 0.35);
}

.modal-voyanz-btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 168, 196, 0.5);
    color: white;
}

.modal-voyanz-subtitle {
    color: #f5a8c4;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

.modal-voyanz-subtitle i {
    margin-right: 8px;
    opacity: 0.9;
}

/* Popup alerte SMS — style Voyanz */
#modalAlertSms1 .modal-voyanz .modal-title i {
    color: #80e8b6;
}

.alert-sms-illustration {
    text-align: center;
    margin-bottom: 18px;
}

.alert-sms-illustration i {
    font-size: 2.8rem;
    background: linear-gradient(135deg, #f5a8c4 0%, #80e8b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(245, 168, 196, 0.35));
    animation: alertSmsPulse 2s ease-in-out infinite;
}

@keyframes alertSmsPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

.alert-sms-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 22px;
    padding: 0 8px;
}

.alert-sms-rgpd {
    margin: 14px 0 0;
    padding: 0 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    line-height: 1.5;
}

.alert-sms-field {
    margin-bottom: 4px;
}

.alert-sms-field label {
    display: block;
    color: #f5a8c4;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.alert-sms-field label i {
    margin-right: 6px;
    opacity: 0.9;
}

.alert-sms-field .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    padding: 12px 16px;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.alert-sms-field .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.alert-sms-field .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #f5a8c4;
    box-shadow: 0 0 0 3px rgba(245, 168, 196, 0.2);
    outline: none;
}

#modalAlertSms1 .modal-footer {
    justify-content: center;
    gap: 12px;
}

#modalAlertSms1 .modal-voyanz-btn-confirm i {
    margin-right: 6px;
}

/* Popup "Choisissez votre tirage IA" : grille guidances (scroll si viewport court) */
#modalTirageIAFloating .modal-tirage-ia-dialog {
    max-width: min(900px, calc(100vw - 1.25rem));
    max-height: calc(100vh - 1.5rem);
    margin: 0.75rem auto;
}
#modalTirageIAFloating .modal-content {
    max-height: calc(100vh - 1.5rem);
}
#modalTirageIAFloating .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#modalTirageIAFloating .voyanz-tirage-ia-free-badge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    color: #0d3d1f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#modalTirageIAFloating .voyanz-tirage-ia-intro {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
}
#modalTirageIAFloating .voyanz-tirage-ia-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    transition: opacity 0.2s ease;
}
#modalTirageIAFloating .voyanz-tirage-ia-card:hover {
    opacity: 0.9;
}
#modalTirageIAFloating .voyanz-tirage-ia-card-img {
    aspect-ratio: 4 / 3;
    max-height: 118px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
#modalTirageIAFloating .voyanz-tirage-ia-card-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
#modalTirageIAFloating .voyanz-tirage-ia-card-title {
    font-size: 0.92rem;
    line-height: 1.25;
    white-space: normal;
    word-wrap: break-word;
    flex-shrink: 0;
    text-align: center;
}
#modalTirageIAFloating .voyanz-tirage-ia-card-desc {
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: normal;
    word-wrap: break-word;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

/* Popup "Rejoignez notre communauté" (déconnexion) : vignettes visibles façon tirage IA */
.voyanz-popup-communaute {
    border: 2px solid rgba(245, 168, 196, 0.5) !important;
    box-shadow: 0 0 32px rgba(139, 45, 95, 0.4), 0 8px 40px rgba(0, 0, 0, 0.35) !important;
}
#modalInscriptionPopup .voyanz-communaute-intro {
    color: #fff;
    opacity: 0.95;
    font-size: 1rem;
    text-align: center;
}
#modalInscriptionPopup .voyanz-communaute-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(139, 45, 95, 0.25);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#modalInscriptionPopup .voyanz-communaute-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(139, 45, 95, 0.2);
    border-color: rgba(245, 168, 196, 0.5);
}
#modalInscriptionPopup .voyanz-communaute-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 168, 196, 0.35) 0%, rgba(139, 45, 95, 0.2) 100%);
    color: #8b2d5f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
#modalInscriptionPopup .voyanz-communaute-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #2a1f3d;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
#modalInscriptionPopup .voyanz-communaute-card-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #5a4d6b;
    flex: 1;
    min-height: 0;
}
#modalInscriptionPopup .voyanz-popup-communaute-cta {
    box-shadow: 0 4px 16px rgba(245, 168, 196, 0.4);
}
#modalInscriptionPopup .voyanz-popup-communaute-cta:hover {
    box-shadow: 0 6px 22px rgba(245, 168, 196, 0.5);
}

/* Popup de connexion Voyanz : même style violet/pourpre transparent que les autres modales (modal-voyanz) */
#loginModal .modal-content.modal-voyanz .btn-close {
    filter: invert(1);
    opacity: 0.9;
}

/* Confirmation inscription newsletter (modal-voyanz) */
#modalSubscribe .voyanz-modal-subscribe-dialog {
    max-width: min(420px, calc(100vw - 2rem));
}
#modalSubscribe .modal-content.voyanz-modal-subscribe {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    border-color: rgba(245, 168, 196, 0.35);
}
#modalSubscribe .modal-content.modal-voyanz .btn-close {
    filter: invert(1);
    opacity: 0.9;
}
#modalSubscribe .voyanz-modal-subscribe-success {
    text-align: center;
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: #a8e6cf;
    filter: drop-shadow(0 0 12px rgba(168, 230, 207, 0.45));
}
#modalSubscribe .voyanz-modal-subscribe-card {
    text-align: center;
}

/* Style pour la popup des commentaires professionnels - aligné sur modal-voyanz */
#reviewsproModal .modal-content {
    background: linear-gradient(135deg, #2a1f3d 0%, #1a0f3c 5%, #8b2d5f 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    overflow: hidden;
}

#reviewsproModal .modal-header {
    background: rgba(70, 15, 79, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding: 18px 22px;
}

#reviewsproModal .modal-title {
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0.3px;
}

#reviewsproModal .modal-body {
    padding: 22px 24px;
    color: white;
}

#reviewsproModal .modal-body .table {
    color: white;
    background: transparent;
}

#reviewsproModal .modal-body .table thead th {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

#reviewsproModal .modal-body .table tbody td,
#reviewsproModal .modal-body .table tbody th {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

#reviewsproModal .modal-body .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

#reviewsproModal .modal-footer {
    background: rgba(70, 15, 79, 0.5);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    padding: 18px 22px;
}

/* ============================================
   VALIDATION CHAMP PAR CHAMP - Générique
   ============================================ */
.field-error-message {
    display: none;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 10px 14px;
    background-color: rgba(215, 47, 60, 0.2);
    border-left: 4px solid #d72f3c;
    border-radius: 6px;
    color: #ff6b7a;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    clear: both;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(215, 47, 60, 0.2);
}

.field-error-message.show {
    display: block;
}

.field-error-message i {
    margin-right: 8px;
    font-size: 1rem;
    color: #d72f3c;
    vertical-align: middle;
}

/* Style pour les champs invalides - UNIQUEMENT quand ils sont explicitement invalides */
.form-control.is-invalid,
.form-transp .form-control.is-invalid {
    border-color: #d72f3c !important;
    border-width: 2px !important;
    background-color: rgba(215, 47, 60, 0.15) !important;
    box-shadow: 0 0 0 0.2rem rgba(215, 47, 60, 0.25) !important;
}

/* Style pour l'input-group complet quand le champ est invalide */
.input-group:has(.form-control.is-invalid),
.input-group.has-invalid {
    border: 2px solid #d72f3c !important;
    border-radius: 25px !important;
    overflow: hidden;
}

/* Style pour l'input-group-text quand le champ est invalide */
.input-group:has(.form-control.is-invalid) .input-group-text,
.input-group.has-invalid .input-group-text {
    border-color: #d72f3c !important;
    border-width: 2px !important;
    border-right: none !important;
    background-color: rgba(215, 47, 60, 0.15) !important;
}

/* Style pour le form-control dans l'input-group invalide */
.input-group:has(.form-control.is-invalid) .form-control,
.input-group.has-invalid .form-control {
    border-color: #d72f3c !important;
    border-width: 2px !important;
    border-left: none !important;
    background-color: rgba(215, 47, 60, 0.15) !important;
}

/* Désactiver le style vert pour les champs valides - on garde l'apparence normale */
/* .form-control.is-valid {
    border-color: #4ade80 !important;
    background-color: rgba(74, 222, 128, 0.1) !important;
} */

/* IMPORTANT : Ne pas utiliser :invalid/:valid natifs car ils s'appliquent automatiquement 
   aux champs required même s'ils n'ont pas encore été touchés.
   Les styles de validation sont gérés UNIQUEMENT via les classes .is-invalid/.is-valid ajoutées par JavaScript. */

/* Compteur de caractères pour textarea */
.char-counter {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    clear: both;
    position: relative;
    z-index: 1;
}

.char-counter.warning {
    color: #ffc107;
}

.char-counter.error {
    color: #d72f3c;
    font-weight: 600;
}

/* Ajustements pour form-floating dans modal VOYANZ */
.modal-voyanz .form-floating {
    margin-bottom: 0;
}

.modal-voyanz .input-group {
    margin-bottom: 0;
}

.modal-voyanz .mb-2 {
    margin-bottom: 0.75rem !important;
}

/* Espacement entre le champ et le message d'erreur/compteur */
.modal-voyanz .form-floating + .char-counter,
.modal-voyanz .form-floating + .field-error-message,
.modal-voyanz .input-group + .char-counter,
.modal-voyanz .input-group + .field-error-message,
.modal-voyanz .form-text + .char-counter,
.modal-voyanz .form-text + .field-error-message {
    margin-top: 8px;
}

/* Espacement pour form-text (help text) */
.modal-voyanz .form-text {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Espacement spécifique pour le compteur de caractères avant le message d'erreur */
.modal-voyanz .char-counter + .field-error-message {
    margin-top: 4px;
}

/* Alignement de la photo avec le titre dans la modal de confirmation */
#confirmPhoto {
    display: flex;
    align-items: flex-start;
}

#confirmPhoto img {
    display: block;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 97, 148, 0.5) rgba(29, 25, 62, 0.35);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(29, 25, 62, 0.35);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(252, 97, 148, 0.5);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(252, 97, 148, 0.7);
}

/* .navbar {
	--bs-nav-link-color: white;
	--bs-navbar-color: white;
	--bs-navbar-active-color: white;
	--bs-navbar-padding-y: 0;
}
.navbar-nav {
	--bs-nav-link-hover-color: rgba(255, 255, 255, 0.5);
	--bs-nav-link-font-weight: 400;
	--bs-nav-link-font-size: 1rem;
} */

/* Transparent uniquement sur la homepage (fond déplacé vers .mainpart2) ; login, signup, etc. gardent le fond sombre #0d094c */
body#homepage {
    background-color: transparent;
}
body {
    color: var(--color-white);
}

a {
    color: var(--color-white);
}

a:hover {
    color: var(--color-blue1);
}

.link-blue {
    color: var(--color-blue1);
}


.form-floating>label {
    left: 47px;
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating):not(.input-group-text) {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.form-control:disabled {
    background-color: var(--color-gray6);
}

.form-transp.disabled .input-group-text {
    background-color: var(--color-gray6);
    color: var(--color-gray7);
    ;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-x: hidden;
} */
h1 {
    font-family: "Volkhov";
    font-style: bold;
    font-weight: 700;
    font-size: 3rem;
    line-height: 3rem;
}

h2 {
    font-family: "Volkhov";
    font-style: normal;
    font-weight: 400;
    font-size: 2rem; /* ⚠️ UI DENSITY : Réduit de 2.5rem à 2rem (-20%) */
    line-height: 2.4rem; /* ⚠️ UI DENSITY : Augmenté de 2.5rem à 2.4rem (ratio 1.2:1 pour meilleure lisibilité) */
    margin-bottom: 20px; /* ⚠️ UI DENSITY : Réduit de 30px à 20px (-33%) */
}

h3 {
    font-family: "Volkhov";
    font-style: normal;
    font-weight: 500;
    font-size: 1.75rem; /* ⚠️ UI DENSITY : Réduit de 2rem à 1.75rem (-12.5%) */
    line-height: 2.1rem; /* ⚠️ UI DENSITY : Augmenté de 2rem à 2.1rem (ratio 1.2:1) */
    margin-bottom: 1.25rem; /* ⚠️ UI DENSITY : Réduit de 2rem à 1.25rem (-37.5%) */
}

h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem; /* ⚠️ UI DENSITY : Réduit de 1.5rem à 1.25rem (-17%) */
    line-height: 1.5rem; /* ⚠️ UI DENSITY : Réduit de 1.7rem à 1.5rem (ratio 1.2:1) */
    margin-bottom: 0.75rem; /* ⚠️ UI DENSITY : Réduit de 10px à 0.75rem */
    text-transform: uppercase;
}

h4.bis {
    font-family: "Volkhov";
    text-transform: none;
    font-size: 2rem;
}

h5 {
    font-style: bold;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

h6 {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 0.2rem;
}

.little-text {
    font-size: 0.8rem;
}

.mt-6 {
    margin-top: 80px;
}

.btn {
    white-space: nowrap;
    line-height: 1rem;
    --bs-btn-padding-y: 0.5rem;
}

.btn-primary {
    /* background: linear-gradient(180deg, #219bf1 0%, #7dc4f5 100%); */
    background-color: var(--color-blue2);
    background-image: linear-gradient(0deg, var(--color-gray1) 0%, var(--color-transparent) 100%);
    border-radius: 53px;
    border: 0px;
    transition: background-color 0.5s;
}

.btn-sm {
    --bs-btn-padding-y: 0rem;
    --bs-btn-padding-x: 1rem;
}

.btn.btn-primary:first-child:hover,
:not(.btn-check)+.btn.btn-primary:hover {
    /* background: linear-gradient(0deg, #219bf1 0%, #7dc4f5 100%); */
    background-color: var(--color-blue1);
    border: 0px;
}

.btn-secondary {
    /* background: linear-gradient(180deg, #ff43bc 0%, #fc6194 100%); */
    background-color: var(--color-pink1);
    background-image: linear-gradient(0deg, var(--color-gray1) 0%, var(--color-transparent) 100%);
    border-radius: 53px;
    border: 0px;
    transition: background-color 0.5s;
}

.btn.btn-secondary:first-child:hover,
:not(.btn-check)+.btn.btn-secondary:hover {
    background-color: var(--color-pink6);
    border: 0px;
}



.el-clignote {
    animation-duration: 2s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
}

@keyframes clignoter {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.2;
    }
}

.el-rotation {
    animation-duration: 40s;
    animation-name: rotation;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: none;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.texthome {
    /* position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100; */
    padding-top: 50px;
    padding-bottom: 190px;
    /* overflow: hidden; */
    /* padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5); */
}

.vague1 {
    position: absolute;
    bottom: -100px;
    height: calc(483px / 1.7);
    width: 100%;
    z-index: 10;
}

.vague1 img {
    height: calc(483px / 1.7);
    width: 100%;
}

.vague2 {
    position: absolute;
    bottom: -120px;
    height: calc(395px / 1.7);
    width: 100%;
    z-index: 11;
}

.vague2 img {
    height: calc(395px / 1.7);
    width: 100%;
}

.fiveminutesfree {
    position: absolute;
    font-family: "Volkhov";
    font-weight: bold;
    bottom: 70px;
    right: 0;
    z-index: 20;
    width: 222px;
    height: 101px;
    text-align: right;
    color: var(--color-gray3);
    text-align: left;
}

.fiveminutesfree_1 {
    position: absolute;
    top: 6px;
    left: 66px;
}

.fiveminutesfree_2 {
    position: absolute;
    font-size: 2.3rem;
    line-height: 2rem;
    top: 30px;
    left: 66px;
}


.garanteed {
    position: absolute;
    bottom: 30px;
    left: 0%;
    z-index: 20;
    width: 30%;
}

.garanteed2 {
    position: absolute;
    bottom: 0px;
    left: calc(0% + 0px);
    white-space: nowrap;
    z-index: 20;
}

/* lg */
@media screen and (min-width: 992px) {
    .garanteed {
        left: -30%;
        width: 100%;
    }

    #homepage .garanteed {
        left: -15%;
    }

    .garanteed2 {
        left: calc(-30% + 130px);
        bottom: 60px;
    }

    #homepage .garanteed2 {
        left: calc(-15% + 130px);
    }

    .fiveminutesfree {
        bottom: 40px;
        /* width: 100%; */
    }
}

.mylogo {
    height: 120px;
    max-height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.mylogo2 {
    width: 100%;
    max-width: 320px;
    margin-bottom: 30px;
}

/* Logo blanc inversé en noir dans le footer pour rester visible sur fond #abbab8 */
footer .mylogo2 {
    filter: brightness(0);
}

/* Photo compte / description pro : ne pas dépasser la colonne (col-md-3) */
.voyanz-account-photo {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Frame Turbo : même fond que le body pour éviter un flash bleu/blanc pendant le remplacement du contenu (navigation) */
turbo-frame#main-content {
    display: block;
    background: linear-gradient(130deg, #1d193e 0%, #0d094c 5%, #9b3366 100.41%);
}

.mainpart {
    /* background: linear-gradient(130deg, #05050d 0%, #0d094c 5%, var(--color-pink2) 100%); */
    /* background: radial-gradient(ellipse at left top, #0d094c, transparent), radial-gradient(ellipse at right bottom, #ca416e 50%, transparent); */
    padding-top: 50px;
    padding-bottom: 0px;
    z-index: 3;
}

/* ============================================
   Présence IA Voyanz V1 — Bloc assistant (orientation, pas voyance)
   ============================================ */
.ai-guide-section.mainpart {
    padding-top: 40px;
    padding-bottom: 50px;
}
/* Bloc chat en popup (modal) : réduire marges */
#modalAiGuide .ai-guide-section.mainpart {
    padding-top: 0;
    padding-bottom: 0;
}
#modalAiGuide .ai-guide-section .container {
    max-width: 100%;
    padding: 0;
}
@media (max-width: 767.98px) {
    #modalAiGuide .ai-guide-section.mainpart {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #modalAiGuide .ai-guide-section .container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #modalAiGuide .ai-guide-block {
        padding: 16px 12px 12px;
        border-radius: 0;
    }
    #modalAiGuide .ai-guide-idle .ai-guide-input {
        min-height: 80px;
    }
}
.ai-guide-block {
    border-radius: 20px;
    padding: 28px 24px 24px;
}
.ai-guide-title {
    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.ai-guide-idle .ai-guide-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-size: 1rem;
    min-height: 102px;
    resize: vertical;
}
.ai-guide-idle .ai-guide-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.ai-guide-btn-continue {
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
}
.ai-guide-consent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 9, 73, 0.85);
    border-radius: 20px;
    z-index: 5;
}
/* Garde le bloc idle dans le flux en état consent pour préserver les dimensions du bloc (invisible). */
.ai-guide-idle-invisible {
    visibility: hidden;
    pointer-events: none;
}
.ai-guide-consent-inner {
    max-width: 90%;
    min-width: 280px;
}
.ai-guide-chat .ai-guide-messages {
    max-height: 420px;
    min-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
}
#modalAiGuide .ai-guide-chat .ai-guide-messages {
    max-height: 50vh;
    min-height: 240px;
}
.ai-guide-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    margin-bottom: 10px;
    line-height: 1.45;
    font-size: 0.95rem;
}
.ai-guide-msg.user {
    margin-left: auto;
    background: linear-gradient(135deg, var(--color-pink3) 0%, var(--color-pink2) 100%);
    color: var(--color-white);
    border-bottom-right-radius: 4px;
}
.ai-guide-msg.assistant {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-bottom-left-radius: 4px;
}
.ai-guide-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 8px;
    max-width: 85%;
}
.ai-guide-thinking-dots {
    display: inline-flex;
    gap: 5px;
}
.ai-guide-thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(245, 168, 196, 0.8);
    animation: ai-guide-dot-bounce 1.4s ease-in-out infinite;
}
.ai-guide-thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.ai-guide-thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes ai-guide-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
.home-hero-chat-block .ai-guide-thinking {
    background: rgba(200, 212, 210, 0.95);
    border: 1px solid rgba(171, 186, 184, 0.5);
    color: rgba(42, 31, 61, 0.7);
}
.home-hero-chat-block .ai-guide-thinking-dots span {
    background: rgba(139, 45, 95, 0.7);
}
.ai-guide-chat-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}
.ai-guide-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#aiGuideActions .btn {
    border-radius: 10px;
}
/* Lien du voyant dans les recommandations assistant : mise en valeur */
.ai-guide-recommended-voyant {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: rgba(245, 168, 196, 1) !important;
}
.ai-guide-recommended-voyant:hover {
    color: rgba(255, 200, 220, 1) !important;
}

.cosmos3 {
    position: relative;
    background-color: var(--color-pink7);
    background-position: center center;
    background-image: url(/images/voyanz/home-top1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    z-index: 1;
    overflow: hidden;
}

.cosmos3-wrap {
    height: 100%;
    background: linear-gradient(0deg, #0c0946 0%, rgba(0, 0, 0, 0) 10%);
    ;
}

/* Homepage : slider + promo + chat — dégradé progressif pour fondre avec .sub-menu (plus de scission brute). home2 = slide seul pleine largeur */
body#homepage .cosmos3.home-hero-with-promos,
body#homepage2 .cosmos3.home-hero-with-promos,
.voyanz .cosmos3.home-hero-with-promos {
    --hero-slide-height: 72vh;
    background-image: none !important;
    background: linear-gradient(180deg, var(--color-pink7) 0%, #38326a 35%, #3d376e 100%) !important;
    overflow: hidden;
    height: var(--hero-slide-height);
    min-height: var(--hero-slide-height);
    max-height: var(--hero-slide-height);
}

.cosmos3.home-hero-with-promos .container-fluid {
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0;
    padding-bottom: 16px;
}

.cosmos3.home-hero-with-promos .row.h-100 {
    min-height: 0;
}

/* Colonne slider : même padding que vidéo/chat pour aligner les bords inférieurs des 3 blocs */
.home-hero-slider-col {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 16px;
    background: none;
}

.home-hero-slider-col .cosmos3-wrap {
    position: relative;
    height: 100%;
    min-height: 0;
    background-color: var(--color-pink7);
    background-image: url(/images/voyanz/home-top1.webp), linear-gradient(0deg, #0c0946 0%, rgba(0, 0, 0, 0) 10%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    overflow: visible;
}

/* home2 : slide intégré directement dans la section, full width (même style que le slider de la home) */
body#homepage2 .cosmos3.home-hero-with-promos.home-hero-full-width {
    padding-left: 0;
    padding-right: 0;
}
body#homepage2 .cosmos3.home-hero-with-promos.home-hero-full-width .cosmos3-wrap.home-hero-full-width-slide {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: var(--color-pink7);
    background-image: url(/images/voyanz/home-top1.webp), linear-gradient(0deg, #0c0946 0%, rgba(0, 0, 0, 0) 10%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    overflow: visible;
}
body#homepage2 .cosmos3.home-hero-with-promos.home-hero-full-width .promohome-in-slider {
    position: absolute;
    right: 24px;
    bottom: 24px;
    top: auto;
    margin: 10px;
}

.home-hero-three-cols .home-promo-col {
    min-height: 0;
    height: 100%;
}

.home-promo-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 450px;
    padding: 12px;
}

.home-promo-tile {
    flex: 1;
    min-height: 140px;
    display: flex;
    align-items: flex-end;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-decoration: none;
    overflow: hidden;
}

.home-promo-tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(12, 9, 70, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

.home-promo-tile-label {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.home-promo-tile:hover .home-promo-tile-overlay {
    background: linear-gradient(0deg, rgba(12, 9, 70, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.home-promo-tile:hover .home-promo-tile-label {
    color: var(--color-pink2, #fc6194);
}

/* Encadré "20 € offert" positionné dans l'encadré du slider (cosmos3-wrap) */
.promohome-in-slider {
    position: absolute;
    right: 24px;
    bottom: 24px;
    top: auto;
    margin: 10px;
}

/* Colonne vidéo hero : mp4 + filigrane + bloc Tirage IA */
.home-hero-video-col {
    display: block;
    padding: 16px;
    overflow: visible;
}

.home-hero-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #0c0946;
    isolation: isolate;
}

.home-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-video-filigrane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        -35deg,
        transparent,
        transparent 40px,
        rgba(255, 255, 255, 0.03) 40px,
        rgba(255, 255, 255, 0.03) 41px
    );
}

.home-hero-video-filigrane::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(12, 9, 70, 0.4) 0%, transparent 30%, transparent 70%, rgba(12, 9, 70, 0.6) 100%);
    pointer-events: none;
}

.home-hero-video-cta-block {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px 16px 20px;
    background: linear-gradient(0deg, rgba(12, 9, 70, 0.92) 0%, rgba(12, 9, 70, 0.65) 55%, transparent 100%);
    text-align: center;
    border-radius: 0 0 20px 20px;
}

.home-hero-video-cta-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.home-hero-video-cta-text {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    max-width: 100%;
}

.home-hero-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #6eb5e8 0%, #4a9ad4 50%, #3d8bc7 100%);
    border: none;
    border-radius: 24px;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.home-hero-video-cta:hover {
    color: #fff;
    background: linear-gradient(180deg, #7ec0f0 0%, #5aa8e0 50%, #4a9ad4 100%);
    box-shadow: 0 4px 20px rgba(74, 154, 212, 0.5);
    transform: translateY(-1px);
}

.home-hero-video-cta-icon {
    font-size: 1.1em;
}

.home-hero-video-cta-secondary {
    background: linear-gradient(180deg, rgba(245, 168, 196, 0.35) 0%, rgba(155, 51, 102, 0.5) 100%) !important;
    border: 1px solid rgba(245, 168, 196, 0.5);
}
.home-hero-video-cta-secondary:hover {
    background: linear-gradient(180deg, rgba(245, 168, 196, 0.5) 0%, rgba(155, 51, 102, 0.65) 100%) !important;
    border-color: rgba(245, 168, 196, 0.7);
}

/* Slider hero : sous-titre sous le titre Voyanz (plus gros que la description) */
.texthome.texthome-top {
    padding-top: 28px;
}
.texthome .slider-subtitle {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}
/* Slider hero : texte descriptif (prend la largeur du slider) */
.texthome .slider-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 100%;
}
/* Formulaire AiGuide dans le slider (espace au-dessus du formulaire) */
.ai-guide-slider-form .ai-guide-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Hero 3 colonnes : bloc formulaire chat — même hauteur que le slide (remplit la colonne) */
.home-hero-three-cols .home-hero-chat-col {
    display: flex;
    align-items: stretch;
    padding: 16px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}
.home-hero-chat-block {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    background: rgba(171, 186, 184, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(171, 186, 184, 0.5);
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.home-hero-chat-block .home-hero-chat-block-inner .small.text-white,
.home-hero-chat-block .ai-guide-chat-scroll .small {
    color: #2a1f3d !important;
}
.home-hero-chat-block .ai-guide-input,
.home-hero-chat-block .ai-guide-input.home-hero-chat-textarea,
.home-hero-chat-block .home-hero-chat-textarea {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #000;
}
.home-hero-chat-block .ai-guide-input::placeholder {
    color: #666;
}
.home-hero-chat-block .ai-guide-title {
    color: #2a1f3d;
}
/* Bulles de chat : même vert-gris que le bloc, écriture sombre */
.home-hero-chat-block .ai-guide-msg.assistant {
    background: rgba(200, 212, 210, 0.95);
    border: 1px solid rgba(171, 186, 184, 0.5);
    color: #2a1f3d;
}
.home-hero-chat-block .ai-guide-msg.user {
    background: rgba(139, 45, 95, 0.85);
    color: #fff;
}
.home-hero-chat-block .ai-guide-chat-input {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #000;
}
.home-hero-chat-block .ai-guide-chat-input::placeholder {
    color: #666;
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}
.home-hero-chat-block-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
/* Zone scrollable unique : titre + bienvenue + (idle / consent / messages) */
.home-hero-chat-block-inner .ai-guide-chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 168, 196, 0.5) rgba(255, 255, 255, 0.08);
}
.home-hero-chat-block .home-hero-chat-block-inner .ai-guide-chat-scroll {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.06);
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar {
    width: 8px;
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
.home-hero-chat-block .home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
}
.home-hero-chat-block .home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}
.home-hero-chat-block .home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(245, 168, 196, 0.5);
    border-radius: 4px;
}
.home-hero-chat-block-inner .ai-guide-chat-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 168, 196, 0.7);
}
.home-hero-chat-block-inner #aiGuideInlineInputRow {
    flex-shrink: 0;
}
.home-hero-chat-block-inner .ai-guide-chat-scroll #aiGuideInlineMessages,
.home-hero-chat-block-inner .ai-guide-chat-scroll .home-hero-chat-messages {
    min-height: 40px;
    max-height: none;
}
.home-hero-chat-messages {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 6px;
}
.home-hero-chat-messages .ai-guide-msg {
    max-width: 100%;
    font-size: 0.9rem;
    padding: 8px 12px;
}
/* Titre et sous-titre du bloc assistant — lisibilité 60+ : tailles augmentées, contraste et icône visuelle */
.home-hero-chat-block-title {
    color: #1f1a2e;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.home-hero-chat-block-title-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.home-hero-chat-block-intro-title {
    color: #2a1f3d;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    line-height: 1.45;
    letter-spacing: 0.01em;
}
.home-hero-chat-block-intro-text {
    color: #2a1f3d;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}
.home-hero-chat-block .ai-guide-title {
    color: #2a1f3d;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.home-hero-chat-block .ai-guide-input.home-hero-chat-textarea,
.home-hero-chat-block .home-hero-chat-textarea {
    min-height: 120px;
    resize: vertical;
}
.home-hero-chat-block .ai-guide-input {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #000;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.95rem;
}
.home-hero-chat-block .ai-guide-input::placeholder {
    color: #666;
}
.home-hero-chat-block .ai-guide-btn-continue {
    border-radius: 12px;
    font-weight: 600;
}

/* Vignettes professionnels dans la colonne hero (2 blocs) */
.home-promo-col .home-promo-card {
    flex: 1;
    min-height: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-promo-col .home-promo-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.home-promo-col .cardpro-hero {
    height: 100%;
    min-height: 200px;
}

.home-promo-col .cardpro-hero .cardpro-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-promo-col .cardpro-hero .cardpro-img {
    height: 120px;
    flex-shrink: 0;
}

.home-promo-col .cardpro-hero .cardpro-title {
    font-size: 1.15rem;
    line-height: 1.3rem;
}

.home-promo-col .cardpro-hero .cardpro-specialities {
    font-size: 0.7rem;
    padding: 2px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.home-promo-col .cardpro-hero .cardpro-hero-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(18, 15, 50, 0.95);
}

.home-promo-col .cardpro-hero .cardpro-description {
    font-size: 0.8rem;
    line-height: 1.1rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-promo-col .cardpro-hero .cardpro-prices {
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 0.7rem;
}

.home-promo-col .cardpro-hero .cardpro-prices .me-1 {
    font-size: 14px;
}

@media (max-width: 991.98px) {
    /* En mobile les 3 blocs s'empilent : hauteur au contenu uniquement pour supprimer l'espace vide sous le slide */
    .cosmos3.home-hero-with-promos {
        height: auto;
        min-height: 0;
        max-height: none;
        --hero-slide-height: 50vh;
    }
    .cosmos3.home-hero-with-promos .container-fluid {
        height: auto;
    }
    .cosmos3.home-hero-with-promos .row.h-100 {
        height: auto;
    }
    .home-hero-with-promos .home-hero-slider-col {
        min-height: 280px;
        height: auto;
        padding-bottom: 8px;
    }
    /* Bloc vidéo hero : masqué en mobile (display:none dans body#homepage) ; ne doit plus occuper d'espace */
    .home-hero-video-col {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .home-hero-video-wrap {
        min-height: 240px;
    }
    .home-hero-three-cols .home-hero-chat-col {
        height: auto;
        min-height: 260px;
        margin-top: -8px;
        padding-top: 4px;
    }
    /* Règles pour les lignes de cartes (IA, pros...) uniquement, pas pour le bloc hero vidéo */
    .home-promo-col:not(.home-hero-video-col) {
        flex-direction: row;
        min-height: auto;
        overflow-x: auto;
        gap: 8px;
        padding: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .home-promo-col:not(.home-hero-video-col) .home-promo-tile {
        flex: 0 0 180px;
        min-height: 200px;
    }
    .home-promo-col:not(.home-hero-video-col) .home-promo-card {
        flex: 0 0 280px;
        min-height: 320px;
    }
    .home-promo-col:not(.home-hero-video-col) .cardpro-hero .cardpro-img {
        height: 140px;
    }
}

.cosmos {
    position: relative;
    /* background-attachment: fixed; */
    background-image: url(/images/voyanz/nebuleuse1.webp);
    background-position: center 0;
    background-size: cover;
    /* height: 500px; */
}

.nowebp .cosmos {
    background-image: url(/images/voyanz/nebuleuse1.jpg);
}

.cosmos2 {
    position: relative;
    /* background-color: #35007f; */
    /* background-color: var(--color-pink7);
    background-position: center center;
    background-image: url(/images/voyanz/nebuleuse1.webp);
    background-repeat: no-repeat;
    background-size: cover; */
    /* height: 550px; */
}

.cosmos2:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-image: url(/images/voyanz/nebuleuse1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color-pink7);
}

.nowebp .cosmos2 {
    background-image: url(/images/voyanz/nebuleuse1.jpg);
}

/* .cosmos2:after {
	content: " ";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background-image: url(/images/voyanz/nebuleuse1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
} */

/* #statichoroscope .cosmos2 {
	height: 550px;
} */



.num1 {
    background-image: url(/images/voyanz/num1.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.num2 {
    background-image: url(/images/voyanz/num2.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.num3 {
    background-image: url(/images/voyanz/num3.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.card-stars {
    font-size: 0.8rem;
    color: var(--color-blue2);
    margin-top: 0;
    white-space: nowrap;
}

.card-stars img {
    margin-right: 1px;
}

.card-stars .card-stars-2x {
    width: 30px;
}

.card-price {
    /* color: var(--color-pink6); */
    color: white;
    font-weight: bold;
}

.card-price span {
    font-size: 0.8rem;
    font-weight: normal;
}

.card-function {
    margin-top: 10px;
}

.card-function-frame {
    background-color: var(--color-pink4);
    font-size: 0.8rem;
    border-radius: 0 20px 20px 0;
    padding: 2px 15px;
    opacity: 0.7;
    text-decoration: none;
    line-height: 1rem;
    text-transform: capitalize;
    margin-right: 10px;
}

/* Dégradé progressif pour éviter la scission nette avec la navbar (violet foncé) et la zone contenu (violet) */
.voyanz .sub-menu {
    background: linear-gradient(180deg, #240046 0%, #1a0d32 40%, var(--color-pink7) 100%) !important;
}

.secondpart {
    background: linear-gradient(180deg, var(--color-blue4) 0%, var(--color-blue2) 100%);
}

.thirdpart {
    background: linear-gradient(180deg, var(--color-blue2) 10%, var(--color-pink2) 60%);
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

.vague5 {
    position: absolute;
    top: -180px;
    width: 100%;
    z-index: 1;
}

footer {
    background: #abbab8;
    color: #000;
    padding-bottom: 100px;
}

footer a {
    color: #000;
}

footer a:hover {
    color: #000;
    opacity: 0.85;
}

footer h5 {
    color: #000;
}

footer hr {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Homepage mobile : s'assurer que le footer reste visible (pas de overflow qui le cache) */
@media (max-width: 991.98px) {
    html {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
    }
    /* Mobile : masquer le bloc vidéo hero (desktop/tablette le gardent) pour limiter bugs bfcache/curseur */
    body#homepage .home-hero-video-col {
        display: none !important;
    }
    body#homepage {
        overflow-x: hidden;
        overflow-y: visible;
        min-height: 100vh;
        height: auto;
        padding-bottom: 2rem;
        -webkit-overflow-scrolling: touch;
    }
    body#homepage .mainpart {
        padding-bottom: 2rem;
    }
    body#homepage footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
        position: relative;
        z-index: 2;
        min-height: 180px;
        flex-shrink: 0;
        visibility: visible;
    }
}

footer ol,
ul {
    padding-left: 1rem;
}

.icos-social {
    position: absolute;
    right: 0;
}

.icos-flags {
    position: absolute;
    left: 0;
}

.vague3 {
    position: absolute;
    top: -180px;
    height: 480px;
    width: 100%;
    z-index: 10;
}

.vague4 {
    position: absolute;
    top: -230px;
    height: 340px;
    width: 100%;
    z-index: 11;
}

.vague3 img,
.vague4 img {
    height: 340px;
    width: 100%;
}

.form-transp input,
.form-transp textarea,
.form-transp select {
    background-color: var(--color-gray7) !important;
    border: 0;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    color: var(--color-white);
}

/* Forcer la couleur de fond normale pour les champs non validés */
.form-transp input:not(.is-invalid):not(.is-valid),
.form-transp textarea:not(.is-invalid):not(.is-valid),
.form-transp select:not(.is-invalid):not(.is-valid) {
    background-color: var(--color-gray7) !important;
}

.form-transp textarea,
.form-transp select {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

/* ⚠️ UI : Textarea qui s'adapte au contenu au lieu d'avoir une hauteur fixe */
.form-transp textarea#co_description {
    min-height: 150px !important; /* Hauteur minimale raisonnable */
    height: auto !important; /* S'adapte au contenu */
    resize: vertical; /* Permet le redimensionnement vertical si nécessaire */
    overflow-y: hidden; /* Cache la scrollbar pendant le calcul */
}

.form-transp select {
    padding-left: 27px;
}

.form-transp.disabled input::placeholder {
    color: var(--color-gray6);
}

.form-transp input::placeholder {
    color: var(--color-white);
}

.form-transp .input-group-text {
    background-color: var(--color-gray7);
    color: var(--color-white);
    border: 0;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 33px;
}

/* Correction pour les champs invalides : bordure continue sur tout l'input-group */
.input-group.has-invalid {
    border: 2px solid #d72f3c !important;
    border-radius: 25px !important;
    overflow: hidden;
    display: flex;
}

.input-group.has-invalid .input-group-text {
    border: none !important;
    border-right: 1px solid rgba(215, 47, 60, 0.3) !important;
    background-color: rgba(215, 47, 60, 0.15) !important;
}

.input-group.has-invalid .form-control {
    border: none !important;
    background-color: rgba(215, 47, 60, 0.15) !important;
    box-shadow: none !important;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #76578a inset !important;
    box-shadow: 0 0 0 30px #76578a inset !important;
    -webkit-text-fill-color: yellow !important;
}


.input-group-text {
    padding: .375rem 0 .375rem 1.3rem;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
}

.form-transp .form-control {
    padding: 12px 0.75rem 12px 18px;
}

.form-transp .form-control:focus {
    background-color: var(--color-gray7);
    color: white;
}

/* .cosmos2 .form-transp input,
.cosmos2 .form-transp textarea,
.cosmos2 .form-transp select {

.cosmos2 .form-transp .input-group-text {}

.cosmos2 .form-transp .form-control:focus {}
}
*/

.form-floating>.form-control:focus~label {
    opacity: 1;
    color: var(--color-white);
}


.card-subscribe {
    position: relative;
    background: var(--color-gray7);
    border-radius: 60px 20px 20px 20px;
    padding: 30px 10px;
}

.card-subscribe:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: url(/images/voyanz/circle1.svg);
    background-repeat: no-repeat;
    background-position: 3% 180%;
    /* background-size: cover; */
}

/* md */
@media screen and (min-width: 768px) {
    .card-subscribe {
        padding: 30px 50px;
    }
}

/* lg */
@media screen and (min-width: 992px) {
    .card-subscribe {
        border-radius: 130px 20px 20px 20px;
        padding: 70px 100px;
    }
}

/* xl */
@media screen and (min-width: 1200px) {}

/* xxl */
@media screen and (min-width: 1400px) {}

input:focus-visible,
input:focus,
.form-control:focus {
    outline: none;
    box-shadow: none;
}

.mainpart2 {
    /* background: linear-gradient(130deg, #1d193e 0%, #0d094c 5%, #9b3366 100.41%); */ /* ⚠️ UI : Background remis sur body pour le footer */
    padding-top: 30px; /* ⚠️ UI DENSITY : Réduit de 50px à 30px pour améliorer la densité */
    padding-bottom: 50px; /* ⚠️ UI : Padding bottom pour un espacement naturel */
    min-height: auto; /* Permet au contenu de définir la hauteur */
}

#statichoroscope .mainpart2 {
    padding-top: 80px; /* Espace pour éviter que le contenu soit caché par le header fixe */
}

/* Vignettes horoscope au-dessus du bandeau rose (vague1/vague2) — classe .horoscope-signs pour rester valide en navigation Turbo */
.mainpart2.horoscope-signs {
    position: relative;
    z-index: 20;
    padding-top: 72px;
    margin-top: -44px;
}

#statichoroscope .texthome {
    padding-bottom: 100px;
}

/* Liste horoscope : hero compact — objectif : première rangée de signes visible au chargement */
.horoscope-list-hero .texthome {
    padding-top: 20px;
    padding-bottom: 60px;
}

/* Ornement au-dessus du titre (pas le logo nav .mylogo) */
.horoscope-hero-ornament {
    max-height: clamp(110px, 22vw, 168px);
    width: auto;
}

.horoscope-list-hero .texthome h2 {
    margin-top: 0.35rem;
    margin-bottom: 0.65rem;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
}

/* Vagues moins hautes sur la liste horoscope pour réduire la zone « décor » avant les signes */
.horoscope-list-hero .vague1 {
    bottom: -56px;
    height: calc(483px / 2.35);
}

.horoscope-list-hero .vague1 img {
    height: calc(483px / 2.35);
}

.horoscope-list-hero .vague2 {
    bottom: -68px;
    height: calc(395px / 2.35);
}

.horoscope-list-hero .vague2 img {
    height: calc(395px / 2.35);
}

#statichoroscopedetails .mainpart2 {
    padding-top: 50px;
}

#statichoroscopedetails .img-sign {
    max-width: 300px;
}

/* #signup .cosmos2 {
	height: 900px;
} */

#usersignup .mainpart2,
#login .mainpart2 {
    padding-top: 180px;
}

.horoscope-menus {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.horoscope-menus div {
    padding-bottom: 5px;
    cursor: pointer;
}

.horoscope-menus div.active {
    border-bottom: 2px solid white;
}

.horoscope-menus a {
    text-decoration: none;
}

/* Loader horoscope */
.voyanz-horoscope-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 9, 76, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.voyanz-horoscope-loader.voyanz-loader-active {
    opacity: 1;
    visibility: visible;
}

.voyanz-loader-content {
    text-align: center;
    color: white;
}

.voyanz-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(252, 97, 148, 0.3);
    border-top-color: #fc6194;
    border-radius: 50%;
    animation: voyanz-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes voyanz-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.voyanz-loader-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}


#div_disponibility {
    /*cursor: pointer;*/
}

#div_disponibility .available {
    margin: 0;
}

/* Bouton-toggle Disponible / Indisponible dans le menu pro (sous-menu Voyanz)
   ET dans la navbar (variante --menu). Reset des styles button par défaut. */
.pro-dispo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    backdrop-filter: blur(4px);
}
.pro-dispo-toggle:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.pro-dispo-toggle:focus-visible {
    outline: 2px solid #ffd97a;
    outline-offset: 2px;
}
.pro-dispo-toggle .available {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
}
.pro-dispo-toggle .pro-dispo-toggle__icon-on,
.pro-dispo-toggle .pro-dispo-toggle__icon-off {
    font-size: 1.05rem;
    margin-left: 2px;
}
/* État DISPONIBLE : vert, toggle "on" visible */
.pro-dispo-toggle.is-online {
    background: rgba(34, 197, 94, .18);
    border-color: rgba(34, 197, 94, .45);
}
.pro-dispo-toggle.is-online .pro-dispo-toggle__icon-on { display: inline-block; color: #4ade80; }
.pro-dispo-toggle.is-online .pro-dispo-toggle__icon-off { display: none; }
.pro-dispo-toggle.is-online:hover { background: rgba(34, 197, 94, .26); }

/* État INDISPONIBLE : orange (alerte visuelle pour le pro), toggle "off" visible */
.pro-dispo-toggle.is-offline {
    background: rgba(234, 88, 12, .15);
    border-color: rgba(234, 88, 12, .55);
    color: #fdba74;
}
.pro-dispo-toggle.is-offline .pro-dispo-toggle__icon-on { display: none; }
.pro-dispo-toggle.is-offline .pro-dispo-toggle__icon-off { display: inline-block; color: #fdba74; }
.pro-dispo-toggle.is-offline:hover { background: rgba(234, 88, 12, .25); color: #ffd9b3; }

/* État EN CONSULTATION : jaune, désactivé */
.pro-dispo-toggle.is-busy {
    background: rgba(240, 187, 31, .18);
    border-color: rgba(240, 187, 31, .45);
    color: #ffe9a3;
    cursor: not-allowed;
}
.pro-dispo-toggle.is-busy:hover { transform: none; box-shadow: none; }
.pro-dispo-toggle.is-busy .pro-dispo-toggle__icon-on,
.pro-dispo-toggle.is-busy .pro-dispo-toggle__icon-off { display: none; }
.pro-dispo-toggle.is-busy::after {
    content: "\f111"; /* fa-circle (pulse) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.65rem;
    color: #f0bb1f;
    animation: pro-dispo-pulse 1.4s infinite;
    margin-left: 2px;
}
@keyframes pro-dispo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Statut « Disponible » à droite du nom utilisateur (navbar, professionnel) — hors du menu, indicateur seul */
.voyanz-menu-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
}
.voyanz-menu-status-outside {
    /* ⚠️ ne PAS bloquer pointer-events ici : l'élément a été transformé d'un
       simple <span> indicateur passif en un vrai <button> cliquable
       (toggle Dispo/Indispo). Mettre pointer-events:none ignorerait
       silencieusement tous les clics. */
    user-select: none;
}
.voyanz-menu-status-inline .available {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0;
    flex-shrink: 0;
}
.voyanz-menu-status-inline .available.notavailable {
    background-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, .25);
}
.voyanz-menu-status-inline .available.busyavailable {
    background-color: #f0bb1f;
}
.voyanz-menu-status-inline .available:not(.notavailable):not(.busyavailable) {
    background-color: #22c55e;
}

/* Variante "menu top" du bouton-toggle : compacte, sans icône toggle.
   Surclasse le style du bouton pour rester discret dans la navbar. */
.pro-dispo-toggle--menu {
    padding: 4px 12px;
    font-size: 0.85rem;
    gap: 6px;
    border-width: 1px;
    border-radius: 999px;
}
.pro-dispo-toggle--menu .pro-dispo-toggle__icon-on,
.pro-dispo-toggle--menu .pro-dispo-toggle__icon-off {
    display: none !important;
}
/* Icône toggle (fa-toggle-on / fa-toggle-off) visible dans la variante menu */
.pro-dispo-toggle--menu .pro-dispo-toggle__icon {
    font-size: 0.95rem;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pro-dispo-toggle--menu:hover .pro-dispo-toggle__icon {
    opacity: 1;
    transform: scale(1.08);
}
.pro-dispo-toggle--menu.is-online .pro-dispo-toggle__icon {
    color: #4ade80;
}
.pro-dispo-toggle--menu.is-offline .pro-dispo-toggle__icon {
    color: #fdba74;
}
.pro-dispo-toggle--menu::after {
    /* on supprime la pulsation par défaut sur la variante menu (déjà visible
       via la classe busyavailable de la pastille interne) */
    display: none;
}
.pro-dispo-toggle--menu.is-busy {
    cursor: not-allowed;
}

.details {
    background-color: var(--color-gray7);
    border-radius: 30px;
    padding: 25px;
    border: 5px solid transparent;
    transition: 0.3s;
}

.details.details-hover:hover {
    border: 5px solid #219bf1;
}

.details a {
    text-decoration: none;
}

.details-photo {
    /* max-width: 230px; */
    border-radius: 20px;
}

#staticdetails .mainpart2 {
    padding-top: 100px;
}

.details-tools {
    background: rgba(252, 97, 148, 0.17);
    border-radius: 40px;
    color: var(--color-pink1);
    padding: 3px 10px;
    line-height: 1.2rem;
    /* display: inline-block; */
    text-transform: capitalize;
}

.details-image {
    border-radius: 20px;
}

.details-availability {
    display: inline-block;
    background: rgba(252, 97, 148, 0.17);
    border-radius: 40px;
    color: var(--color-white);
    padding: 3px 10px;
}

.details-summary td {
    padding: 0 20px 0 0;
}

.details-summary td:first-child {
    color: var(--color-blue2);
    font-weight: 600;
}

/* Page chat : le body est un conteneur flex colonne plein écran ;
   le header (bannière, logo, navbar) reste en haut, le chat remplit le reste */
body#customerchat,
body#professionalchat {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

body#customerchat > *,
body#professionalchat > * {
    flex-shrink: 0;
}

body#customerchat > turbo-frame#main-content,
body#professionalchat > turbo-frame#main-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

body#customerchat > turbo-frame#main-content > .voyanz-frame-inner,
body#professionalchat > turbo-frame#main-content > .voyanz-frame-inner {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Masquer le footer et le FAB assistant sur les pages chat (ces éléments sont hors du turbo-frame
   et restent visibles lors d'une navigation Turbo depuis une page qui les affiche) */
body#customerchat > footer,
body#professionalchat > footer,
body#customerchat > .voyanz-fab-assistant,
body#professionalchat > .voyanz-fab-assistant {
    display: none !important;
}

/* Fond plus foncé pour mieux différencier les éléments du chat */
#customerchat .mainpart2,
#professionalchat .mainpart2 {
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.4) 0%, rgba(26, 15, 60, 0.35) 50%, rgba(139, 45, 95, 0.4) 100%);
    padding-top: 28px;
    padding-bottom: 16px;
    flex: 1 1 0%;
    overflow: hidden;
    min-height: 0;
}

/* Page Bienvenue client : textes visibles sur fond sombre (éviter noir / gris Bootstrap) */
#customerwelcome .mainpart2,
body#customerwelcome .mainpart2 {
    color: rgba(255, 255, 255, 0.95);
}
#customerwelcome .mainpart2 h1,
#customerwelcome .mainpart2 h2,
#customerwelcome .mainpart2 h3,
#customerwelcome .mainpart2 h4,
#customerwelcome .mainpart2 h5,
#customerwelcome .mainpart2 p,
#customerwelcome .mainpart2 .card-primary,
#customerwelcome .mainpart2 .card-primary h2,
#customerwelcome .mainpart2 .card-primary div {
    color: rgba(255, 255, 255, 0.95);
}
#customerwelcome .mainpart2 .text-muted,
#customerwelcome .mainpart2 small.text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}
#customerwelcome .mainpart2 a:not(.btn) {
    color: var(--color-blue1);
    text-decoration: underline;
}
#customerwelcome .mainpart2 a:not(.btn):hover {
    color: var(--color-white);
}

/* Vignettes "Derniers professionnels contactés" : fond vert-gris (--voyanz-clair), texte noir, partie basse unifiée */
#customerwelcome .mainpart2 .card.card-list {
    background-color: #fff;
    border: 1px solid rgba(139, 45, 95, 0.2);
    color: #000;
}
#customerwelcome .mainpart2 .card.card-list .card-body,
#customerwelcome .mainpart2 .card.card-list .card-name,
#customerwelcome .mainpart2 .card.card-list .card-price,
#customerwelcome .mainpart2 .card.card-list .card-function-frame,
#customerwelcome .mainpart2 .card.card-list .card-stars {
    color: #000;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
#customerwelcome .mainpart2 .card.card-list a {
    color: #1a1a1a;
}
#customerwelcome .mainpart2 .card.card-list a:hover {
    color: #2a1f3d;
}
#customerwelcome .mainpart2 .card.card-list .card-function-frame {
    background-color: #fbfafa;
}

/* Input message : permettre le shrink en mobile pour éviter débordement et zone de saisie invisible */
#professionalchat .chat-input-group-single .form-control,
#customerchat .chat-input-group-single .form-control {
    min-width: 0;
}

#div_chatmessages {
    padding: 0 10px;
    min-height: 95%;
}

/* Zone messages : fond très léger pour faire ressortir les bulles */
.chat-messages-container .chat-messages {
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
    border-radius: 0 12px 12px 0;
}

/* Design professionnel pour la colonne des sessions - Encadré transparent coloré */
.chatgroups-container {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 184, 178, 0.3) transparent;
    background: linear-gradient(135deg, rgba(245, 184, 178, 0.15) 0%, rgba(252, 97, 148, 0.12) 100%); /* Encadré transparent coloré */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px; /* Border-radius pour l'encadré */
    border: 1px solid rgba(245, 184, 178, 0.3); /* Bordure transparente colorée */
    box-shadow: 0 2px 8px rgba(245, 184, 178, 0.15), 0 1px 3px rgba(245, 184, 178, 0.1); /* Ombre douce */
    padding: 15px 10px;
    margin-top: 0;
}

.chatgroups-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.chatgroups-container::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

.chatgroups-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-card {
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.2); /* Fond transparent clair */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25); /* Bordure très légère */
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-card:hover {
    background: rgba(255, 255, 255, 0.3); /* Plus opaque au survol */
    transform: translateX(2px);
    border-color: rgba(245, 184, 178, 0.5); /* Bordure rose au survol */
    box-shadow: 0 2px 6px rgba(245, 184, 178, 0.2);
}

.chat-card .lastmessage {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: rgba(255, 255, 255, 0.8); /* Texte blanc pour contraste */
    font-size: 0.85rem;
    margin-top: 8px;
}

.chat-card.active {
    background: rgba(255, 255, 255, 0.4); /* Plus opaque quand actif */
    border-color: rgba(245, 184, 178, 0.85); /* Bordure rose pour l'état actif */
    box-shadow: 0 2px 12px rgba(245, 184, 178, 0.4);
    outline: 1px solid rgba(255, 255, 255, 0.3); /* Contour pour bien distinguer le chat actif */
}

/* Carte en séance payante (session chat en cours) : bordure rouge pour signaler fortement */
.chat-card.in-session {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545, 0 2px 12px rgba(220, 53, 69, 0.4);
    outline: 2px solid rgba(220, 53, 69, 0.5);
}
.chat-card.in-session.active {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545, 0 2px 12px rgba(220, 53, 69, 0.5);
}

/* Assistant IA : phase réflexion / tirage (avant le stream) */
.chat-ai-thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(80, 60, 90, 0.85);
    font-size: 0.95rem;
    font-style: italic;
}
.chat-ai-thinking-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.chat-ai-thinking-dots::before,
.chat-ai-thinking-dots::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: chat-ai-dot 1.2s ease-in-out infinite;
}
.chat-ai-thinking-dots::after {
    animation-delay: 0.35s;
    box-shadow: 10px 0 0 0 currentColor;
    opacity: 1;
}
@keyframes chat-ai-dot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

/* Bouton "Arrêter" sur la carte masqué : le compteur + Arrêter sont dans la barre fixe en bas */
.chat-card .chat-card-session-btn.btn-danger {
    display: none !important;
}

.chat-card .chat-card-read-btn {
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.35);
}

.chat-card .chat-card-session-btn.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
}

.chat-card .chat-card-session-btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (max-width: 767.98px) {
    .chat-card .chat-card-read-btn {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .chat-card .chat-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.chat-card h4 {
    color: rgba(255, 255, 255, 0.95); /* Texte blanc pour contraste */
    font-size: 0.95rem;
    margin-bottom: 4px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-card .chat-card-name-link {
    color: inherit;
    text-decoration: none;
}

.chat-card .chat-card-name-link:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

.chat-card .chat-card-photo-link {
    display: block;
    line-height: 0;
}

.chat-card .chat-card-photo-link:hover {
    opacity: 0.9;
}

/* Labels (details-tools) dans les cartes de chat - plus visibles */
.chat-card .details-tools {
    background: rgba(245, 184, 178, 0.4); /* Fond plus opaque pour meilleure visibilité */
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95); /* Texte blanc pour contraste */
    padding: 4px 10px;
    line-height: 1.3rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(245, 184, 178, 0.3); /* Bordure pour plus de définition */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Ombre pour lisibilité */
}

/* Bouton "Démarrer la session" - éviter l'overflow et positionné à gauche */
.chat-card button.btn-primary {
    max-width: 100%; /* Ne pas dépasser la largeur de la carte */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    padding: 6px 12px;
    width: auto;
    min-width: fit-content;
    margin-left: 0; /* Aligné à gauche */
    margin-right: auto; /* Pousse vers la gauche */
}

/* Container du bouton pour éviter l'overflow et aligner à gauche */
.chat-card .flex-fill > div:last-child {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-start; /* Aligner le bouton à gauche */
    align-items: flex-start;
}

.chat-card .flex-fill > div:last-child button {
    max-width: calc(100% - 0px); /* Prendre toute la largeur disponible moins les marges */
    margin-left: 0; /* Pas de marge à gauche */
}

.chat-card-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4); /* Bordure blanche pour contraste */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .chat-messages-container {
	display: flex;
	flex-direction: column;
} */
.chat-messages-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #e5ddd5; /* Fond beige clair uni, sans motif */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(245, 184, 178, 0.15), 0 1px 4px rgba(245, 184, 178, 0.1); /* Ombre douce rose */
    border: 1px solid rgba(245, 184, 178, 0.2); /* Bordure rose douce */
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
}

/* Alerte fin de crédit chat : au-dessus de la saisie, sans masquer l'input */
.chat-credit-warning-banner {
    flex-shrink: 0;
    margin: 0 0 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: #5c2b00;
    background: linear-gradient(135deg, #ffe8a3 0%, #ffd166 100%);
    border: 1px solid rgba(180, 120, 0, 0.35);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#customerchat .infotimesession_credit-warning,
#professionalchat .infotimesession_credit-warning {
    display: none !important;
}

.chat-messages-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(245, 184, 178, 0.4) 0%, rgba(252, 97, 148, 0.3) 100%); /* Ligne rose douce */
}

.chat-messages {
    flex-grow: 1;
    overflow: auto;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    background: transparent;
    border: none;
    margin-top: 16px;
    box-shadow: none;
}

.chat-input .input-group {
    flex: 1;
}

/* Champ seul sans addon : bords arrondis sur tout le champ, bordure complète */
.chat-input .chat-input-group-single .form-control {
    border-radius: 12px;
    border: 1px solid rgba(252, 97, 148, 0.25);
    border-left: 1px solid rgba(252, 97, 148, 0.25);
}

.chat-input .chat-input-group-single .form-control:focus {
    border-color: rgba(252, 97, 148, 0.4);
}

/* Champ de saisie chat : fond blanc (priorité sur .form-transp) */
.chat-input .input-group-text {
    background: #fff !important;
    border: 1px solid rgba(252, 97, 148, 0.25);
    border-right: none;
    color: rgba(42, 31, 61, 0.7);
}

.chat-input .input-group.disabled .input-group-text {
    background: #f8f9fa !important;
    color: rgba(108, 117, 125, 0.9);
}

.chat-input .form-control {
    background: #fff !important;
    border: 1px solid rgba(252, 97, 148, 0.25);
    border-left: none;
    color: rgba(42, 31, 61, 0.9);
    padding: 12px 16px;
}

.chat-input .form-control::placeholder {
    color: rgba(42, 31, 61, 0.5);
}

.chat-input .form-control:focus {
    background: #fff !important;
    border-color: rgba(252, 97, 148, 0.4);
    color: rgba(42, 31, 61, 0.95);
    box-shadow: 0 0 0 0.2rem rgba(252, 97, 148, 0.15);
}

.chat-input .form-control:disabled {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(108, 117, 125, 0.85);
    cursor: not-allowed;
}

.chat-input .custom-file-upload {
    color: rgba(42, 31, 61, 0.7);
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-input .custom-file-upload:hover:not([style*="pointer-events: none"]) {
    color: rgba(245, 184, 178, 0.9);
    background: rgba(245, 184, 178, 0.15);
}

.chat-input #button_send {
    background: linear-gradient(135deg, rgba(245, 184, 178, 0.9) 0%, rgba(247, 197, 197, 0.9) 100%);
    border: 1px solid rgba(245, 184, 178, 0.4);
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 184, 178, 0.3);
    color: rgba(42, 31, 61, 0.9);
}

.chat-input #button_send:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(245, 184, 178, 1) 0%, rgba(247, 197, 197, 1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 184, 178, 0.4);
}

.chat-input #button_send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* État vide du chat — même style que .appointment-empty (RDV « Aucune séance à venir ») */
.voyanz-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 280px;
    color: rgba(255, 255, 255, 0.6);
}

.voyanz-chat-empty-icon {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    display: block;
}

.voyanz-chat-empty-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    margin: 0;
}
.chat-message {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.chat-message h6 {
    margin: 0 0 6px 0;
    font-size: 0.75rem;
    font-weight: 500;
}

.chat-message h6 span {
    color: rgba(100, 116, 139, 0.7); /* Couleur douce pour les timestamps */
}

.chat-message-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid rgba(245, 184, 178, 0.4);
    object-fit: cover;
}

/* Avatar messages IA (voyante) : remplace la photo pro / robot */
.chat-message-icon-voyante {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: unset;
    background: linear-gradient(145deg, #5c2d6e 0%, #9b4d8c 45%, #c97bb0 100%);
    border: 2px solid rgba(201, 123, 176, 0.65);
    box-shadow: 0 2px 10px rgba(92, 43, 99, 0.25);
    color: #fff7fc;
    font-size: 1.15rem;
}
.chat-message-icon-voyante i {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.chat-message-contains {
    flex: 1;
    min-width: 0;
}

.chat-message-text {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 248, 255, 0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 14px 18px;
    display: inline-block;
    max-width: 85%;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(42, 31, 61, 0.92);
    border: 1px solid rgba(155, 107, 165, 0.25);
    box-shadow: 0 2px 12px rgba(92, 43, 99, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.chat-message-text strong {
    color: rgba(42, 31, 61, 1);
    font-weight: 600;
}

.chat-message-text h1,
.chat-message-text h2,
.chat-message-text h3,
.chat-message-text h4,
.chat-message-text h5,
.chat-message-text h6 {
    color: rgba(42, 31, 61, 0.9);
    font-family: var(--bs-body-font-family);
}

/* Cartes tarot : taille raisonnable (pas toute la largeur) + style "carte à jouer" */
.chat-message-text img {
    max-width: min(100%, 300px);
    max-height: 380px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 6px;
    border: 2px solid rgba(155, 107, 165, 0.35);
    box-shadow: 0 4px 16px rgba(92, 43, 99, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.chat-message-text img:hover {
    box-shadow: 0 6px 20px rgba(92, 43, 99, 0.28), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tirage avec plusieurs cartes (ex. croix) : affichage en grille pour plus de lisibilité */
.chat-message-text:has(img:nth-of-type(2)) img { max-width: 48%; display: inline-block; vertical-align: top; margin-right: 2%; box-sizing: border-box; }
.chat-message-text:has(img:nth-of-type(3)) img { max-width: 32%; display: inline-block; vertical-align: top; margin-right: 1%; box-sizing: border-box; }
.chat-message-text:has(img:nth-of-type(4)) img,
.chat-message-text:has(img:nth-of-type(5)) img { max-width: 48%; display: inline-block; vertical-align: top; margin-right: 2%; margin-bottom: 8px; box-sizing: border-box; }
.chat-message-text h1, .chat-message-text h2, .chat-message-text h3,
.chat-message-text h4, .chat-message-text h5, .chat-message-text h6 { font-size: 1rem; margin: 0.5em 0 0.25em; }

/* Citation (blockquote) et listes (mots-clés) dans les messages tarot */
.chat-message-text blockquote {
    margin: 0.5em 0;
    padding-left: 12px;
    border-left: 3px solid rgba(155, 107, 165, 0.5);
    color: rgba(42, 31, 61, 0.88);
    font-style: italic;
}
.chat-message-text ul {
    margin: 0.4em 0;
    padding-left: 1.2em;
}
.chat-message-text li {
    margin: 0.2em 0;
}

/* Apparition douce des messages */
.chat-message {
    animation: chat-message-fadein 0.35s ease-out;
}
@keyframes chat-message-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.reverse {
    flex-direction: row-reverse;
}

.chat-message.reverse .chat-message-contains {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-message.reverse .chat-message-icon {
    margin: 0;
}

.chat-message.reverse h6 {
    text-align: right;
}

.chat-message.reverse .chat-message-text {
    text-align: left;
    background: linear-gradient(145deg, rgba(245, 184, 178, 0.65) 0%, rgba(252, 230, 235, 0.6) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 184, 178, 0.4);
    box-shadow: 0 2px 12px rgba(252, 97, 148, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: rgba(42, 31, 61, 0.95);
}

.chat-message-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ⚠️ UI : Layout chat professionnel avec sidebar */
.chat-main-wrapper {
    position: relative;
}

.chat-sidebar-wrapper {
    display: none;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.chatgroups-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}


@media (min-width: 1024px) {
    /* Uniformisation de toutes les pages avec customer/history */
    /* customer/history : container 1200px, col-md-10 offset-md-1 = ~975px de largeur de contenu */
    /* Objectif : toutes les pages doivent avoir ~975px de largeur de contenu */
    
    /* Container par défaut : 1200px pour toutes les pages (sauf exceptions) */
    /* Les pages avec col ou col-md-12 prendront 100% = 1170px (1200 - 30 padding) */
    /* Pour uniformiser avec customer/history (975px), on limite les pages avec col à 1005px container */
    .mainpart2 .container {
        max-width: 1005px; /* 975px contenu + 30px padding = 1005px */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* professional/history : augmenter légèrement la largeur du formulaire */
    #professionalhistory .mainpart2 .container {
        max-width: 1100px; /* Légèrement plus large pour le formulaire */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Pages avec col-md-10 offset-md-1 : container 1200px pour avoir 975px de contenu */
    #professionalappointments .mainpart2 .container,
    #customerhistory .mainpart2 .container,
    #customerappointments .mainpart2 .container,
    #professionaldisponibilities .mainpart2 .container {
        max-width: 1200px; /* 1170px interne, col-md-10 = 975px de contenu */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Pages avec col-md-8 offset-md-2 : container 1500px pour avoir 975px de contenu */
    /* Calcul : 975px / (8/12) = 1462.5px + 30px padding = 1492.5px ≈ 1500px */
    #commercialhistory .mainpart2 .container {
        max-width: 1500px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* professional/description : container 1005px comme les autres pages (975px contenu + 30px padding) */
    /* Le col-md-9 prendra toute la largeur disponible (975px) */
    #professionaldescription .mainpart2 .container,
    body#professionaldescription .mainpart2 .container {
        max-width: 1005px !important; /* 975px contenu + 30px padding = 1005px, comme les autres pages */
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Le col-md-9 prendra toute la largeur disponible (975px) */
    #professionaldescription .mainpart2 .row .col-md-9 {
        max-width: 100%; /* Prend toute la largeur du container (975px) */
    }
    
    /* Limiter la largeur de l'encadré Stripe (alert) dans professional/description */
    #professionaldescription .mainpart2 .col-md-9 .alert {
        max-width: 100%; /* Prend la largeur du col-md-9 (975px) */
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Limiter la largeur de l'encadré transparent pour professional/description */
    /* Le background du body crée l'encadré, on limite la largeur visible du contenu */
    #professionaldescription .mainpart2 {
        max-width: 1005px; /* Même largeur que le container */
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    
    /* S'assurer que le form et le container respectent aussi cette largeur */
    #professionaldescription .mainpart2 form,
    #professionaldescription .mainpart2 .container {
        max-width: 100%;
    }
    
    /* Bouton « Générer une description automatique » : bleu comme les autres actions, bien visible */
    .voyanz-btn-generate-description-wrap {
        margin-top: 8px;
    }
    .voyanz-btn-generate-description {
        font-size: 1.05rem;
        font-weight: 600;
        padding: 14px 28px;
        background-color: var(--color-blue2, #219bf1);
        border: none;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(33, 155, 241, 0.4);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    .voyanz-btn-generate-description:hover {
        color: #fff;
        background-color: var(--color-blue6, #009dff);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(33, 155, 241, 0.5);
    }
    .voyanz-btn-generate-description:active {
        transform: translateY(0);
    }
    .voyanz-btn-generate-description i {
        color: #fff;
    }
    
    
    /* Pages légales / institutionnelles (whoweare, trust, cgu, cgs, legal, contact) : 1005px comme le défaut */
    #whoweare .mainpart2 .container,
    #trust .mainpart2 .container,
    #cgu .mainpart2 .container,
    #refundpolicy .mainpart2 .container,
    #legal .mainpart2 .container,
    #voyanzcontact .mainpart2 .container {
        max-width: 1005px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Pages légales (page-dyn) : texte sur toute la largeur du container (plus de col-md-8 réduit) */
    #whoweare .mainpart2 .row .offset-md-2.col-md-8,
    #trust .mainpart2 .row .offset-md-2.col-md-8,
    #cgu .mainpart2 .row .offset-md-2.col-md-8,
    #refundpolicy .mainpart2 .row .offset-md-2.col-md-8,
    #legal .mainpart2 .row .offset-md-2.col-md-8 {
        max-width: 100%;
        flex: 0 0 100%;
        margin-left: 0;
    }

    /* customer/pricing : container élargi pour cartes packages (2 col-md-5 = plus de place) */
    #customerpricing .cosmos2 .container {
        max-width: 1400px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Exceptions : homepage et list gardent leur largeur full-width */
    #homepage .mainpart2 .container,
    #voyanzlist .mainpart2 .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* customer/chat et professional/chat : largeur uniforme pour un chat confortable */
    #customerchat .mainpart2 .container,
    #professionalchat .mainpart2 .container {
        max-width: 1400px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .mainpart2 .row.h-100 {
        display: flex;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Sidebar Informations : masquée par défaut sur desktop pour élargir le chat (cartes tarot en largeur) */
    .chat-sidebar-wrapper {
        display: none !important;
        flex: none;
        width: 0;
        max-width: 0;
        overflow: hidden;
    }
    /* Quand l'utilisateur ouvre "Informations" : panneau en overlay à gauche */
    .chat-sidebar-wrapper.chat-sidebar-open {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        max-width: 90vw;
        z-index: 1050;
        padding: 0;
        background: linear-gradient(180deg, rgba(42, 31, 61, 0.97) 0%, rgba(26, 15, 60, 0.98) 100%);
        backdrop-filter: blur(12px);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        transition: left 0.25s ease, box-shadow 0.25s ease;
    }
    .chat-sidebar-wrapper.chat-sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
        pointer-events: all;
    }
    .chat-sidebar-wrapper.chat-sidebar-open .chat-sidebar-close {
        display: block !important;
    }
    
    /* Liste sessions - 22% */
    .chatgroups-container {
        flex: 0 0 22%;
        max-width: 22%;
        width: 22%;
        padding-right: 12px;
        box-sizing: border-box;
    }
    
    /* Chat principal - 78% : largeur pour tirages et cartes */
    .chat-main-wrapper {
        flex: 0 0 78%;
        max-width: 78%;
        width: 78%;
        padding-left: 0;
        box-sizing: border-box;
    }
    
    /* Barre fixe en bas : bouton Informations + Session (compteur + Arrêter), ne suit pas le scroll */
    .chat-session-bar {
        position: fixed;
        bottom: 24px;
        left: calc(22% + 20px);
        z-index: 1060;
        align-items: center;
        gap: 12px;
    }
    .chat-session-bar .chat-sidebar-toggle {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(92, 43, 99, 0.35);
        background: linear-gradient(135deg, rgba(155, 107, 165, 0.9) 0%, rgba(139, 45, 95, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.95);
        font-size: 1.1rem;
    }
    .chat-session-bar .chat-sidebar-toggle:hover {
        background: linear-gradient(135deg, rgba(155, 107, 165, 1) 0%, rgba(139, 45, 95, 1) 100%);
        color: #fff;
    }
    #div_allsessions_chat {
        flex-wrap: wrap;
        gap: 8px;
        max-width: 420px;
    }
    
    /* Espace entre la zone de saisie et la barre session (éviter le chevauchement) */
    .chat-messages-container .chat-input {
        padding-bottom: 90px;
    }
    
    .chat-sidebar {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Design professionnel harmonieux - Colonne Informations transparente */
.chat-sidebar {
    height: 100%;
    background: transparent; /* Transparent comme demandé */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0; /* Pas de border-radius pour un look plus intégré */
    padding: 20px;
    box-shadow: none; /* Pas d'ombre */
    border: none; /* Pas de bordure */
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 184, 178, 0.3) transparent;
}

.chat-sidebar::-webkit-scrollbar {
    width: 6px;
}

.chat-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

.chat-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.chat-sidebar-header {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(245, 184, 178, 0.2); /* Couleur douce rose */
}

.chat-sidebar-header h5 {
    color: rgba(255, 255, 255, 0.95); /* Texte blanc pour contraste sur fond transparent */
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Légère ombre pour lisibilité */
}

.chat-sidebar-close {
    color: rgba(255, 255, 255, 0.8); /* Couleur claire pour contraste */
    padding: 0;
    font-size: 1.2rem;
}

.chat-sidebar-close:hover {
    color: rgba(255, 255, 255, 1);
}

.chat-sidebar-block {
    margin-bottom: 24px;
}

.chat-sidebar-block:last-child {
    margin-bottom: 0;
}

.chat-sidebar-block-title {
    color: rgba(255, 255, 255, 0.9); /* Texte blanc pour contraste */
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-sidebar-block-content {
    color: rgba(255, 255, 255, 0.85); /* Texte blanc pour contraste */
    font-size: 0.9rem;
}

.chat-sidebar-reminder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.15); /* Fond très transparent avec effet glassmorphism */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure très légère */
}

.chat-sidebar-reminder-item:last-child {
    margin-bottom: 0;
}

.chat-sidebar-reminder-item i {
    color: rgba(245, 184, 178, 0.9); /* Icônes en rose doux */
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.chat-sidebar-reminder-item span {
    color: rgba(255, 255, 255, 0.9); /* Texte blanc pour contraste */
    font-size: 0.9rem;
}

.chat-sidebar-reminder-item strong {
    color: rgba(255, 255, 255, 1); /* Texte blanc pour contraste */
    font-weight: 600;
}

.chat-sidebar-promo-card {
    background: rgba(255, 255, 255, 0.15); /* Fond transparent avec glassmorphism */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    text-align: center;
}

.chat-sidebar-promo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7); /* Texte blanc pour contraste */
}

.chat-sidebar-promo-placeholder i {
    font-size: 2rem;
    color: rgba(245, 184, 178, 0.8); /* Icône en rose doux */
}

.chat-sidebar-promo-placeholder p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Mobile : Sidebar en drawer */
@media (max-width: 1023px) {
    .chat-sidebar-wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        z-index: 1050;
        transition: right 0.3s ease;
        padding: 0;
    }
    
    .chat-sidebar-wrapper::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: -1;
    }
    
    .chat-sidebar-wrapper.chat-sidebar-open {
        right: 0;
    }
    
    .chat-sidebar-wrapper.chat-sidebar-open::before {
        opacity: 1;
        pointer-events: all;
    }
    
    .chat-sidebar {
        height: 100%;
        border-radius: 0;
        margin: 0;
        max-height: 100vh;
        top: 0;
        position: relative;
        width: 100%;
    }
    
    .chat-sidebar-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1040;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(245, 184, 178, 0.4);
        background: linear-gradient(135deg, rgba(245, 184, 178, 0.9) 0%, rgba(247, 197, 197, 0.9) 100%);
        border: 1px solid rgba(245, 184, 178, 0.4);
        color: rgba(42, 31, 61, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    
    .chat-sidebar-toggle.active {
        background: linear-gradient(135deg, rgba(245, 184, 178, 1) 0%, rgba(247, 197, 197, 1) 100%);
    }

    /* Barre session (compteur + Arrêter) sur mobile */
    .chat-session-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1060;
        background: rgba(36, 0, 70, 0.95);
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .chat-session-bar .chat-sidebar-toggle {
        position: static;
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        font-size: 1rem;
    }
    #div_allsessions_chat {
        flex: 1;
        min-width: 0;
    }
    #div_allsessions_chat .current_session {
        font-size: 0.75rem;
        padding: 4px 8px;
        flex-wrap: wrap;
        gap: 4px;
    }
    #div_allsessions_chat .current_session .btn-danger {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
    /* Remonter la zone de saisie au-dessus de la barre session */
    .chat-messages-container .chat-input {
        padding-bottom: 72px;
    }

    /* Mobile : limiter la liste de conversations pour laisser plus de place aux messages */
    #customerchat .chatgroups-container,
    #professionalchat .chatgroups-container {
        flex: 0 0 auto;
        max-height: 26vh;
        min-height: 0;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
    }
    #customerchat .chat-main-wrapper,
    #professionalchat .chat-main-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
    }
    #customerchat .mainpart2 .row.h-100,
    #professionalchat .mainpart2 .row.h-100 {
        flex-direction: column;
    }

    /* Chat : garder la zone de saisie visible en mobile (éviter que l'input soit coupé en bas) */
    #professionalchat .mainpart2 .container,
    #customerchat .mainpart2 .container {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #professionalchat .mainpart2 .row.h-100,
    #customerchat .mainpart2 .row.h-100 {
        flex: 1;
        min-height: 0;
    }
    #professionalchat .chat-main-wrapper,
    #customerchat .chat-main-wrapper {
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #professionalchat .chat-messages-container,
    #customerchat .chat-messages-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    #professionalchat .chat-messages-container .chat-messages,
    #customerchat .chat-messages-container .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    #professionalchat .chat-messages-container .chat-input,
    #customerchat .chat-messages-container .chat-input {
        flex-shrink: 0;
    }

    /* Mobile chat : body overflow:hidden + header (bandeau, logo, nav) écrasait la zone
       messages à ~0 px — scroll page impossible (retour cliente août 2026). */
    body#customerchat,
    body#professionalchat {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body#customerchat .voyanz-banner-phase-tests,
    body#professionalchat .voyanz-banner-phase-tests {
        display: none !important;
    }

    body#customerchat > turbo-frame#main-content,
    body#professionalchat > turbo-frame#main-content {
        flex: 1 1 auto;
        overflow: visible;
    }

    body#customerchat > turbo-frame#main-content > .voyanz-frame-inner,
    body#professionalchat > turbo-frame#main-content > .voyanz-frame-inner {
        flex: 1 1 auto;
        min-height: auto;
    }

    #customerchat .mainpart2,
    #professionalchat .mainpart2 {
        flex: 1 1 auto;
        overflow: visible;
        min-height: auto;
        padding-top: 12px;
    }

    #customerchat .mainpart2 .container,
    #professionalchat .mainpart2 .container {
        height: auto;
        min-height: auto;
    }

    #customerchat .mainpart2 .row.h-100,
    #professionalchat .mainpart2 .row.h-100 {
        height: auto !important;
        min-height: auto;
        flex: 1 1 auto;
    }

    #customerchat .chat-main-wrapper,
    #professionalchat .chat-main-wrapper {
        min-height: 55vh;
    }

    #customerchat .chat-messages-container,
    #professionalchat .chat-messages-container {
        overflow: visible;
        min-height: 45vh;
    }

    #customerchat .chat-messages-container .chat-messages,
    #professionalchat .chat-messages-container .chat-messages {
        min-height: 35vh;
        max-height: none;
        overflow-y: visible;
    }
}

.chat-readonly-banner {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
    background: rgba(36, 0, 70, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Hauteur chat ≥1024px : chaîne flex explicite (miroir du bloc ≤1023px éprouvé)
   pour que .chat-messages-container remplisse toute la hauteur disponible
   (évite l'espace vide sous le chat sur grand écran). */
@media (min-width: 1024px) {
    #customerchat .mainpart2 .container,
    #professionalchat .mainpart2 .container {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    #customerchat .mainpart2 .row.h-100,
    #professionalchat .mainpart2 .row.h-100 {
        flex: 1 1 auto;
        min-height: 0;
    }
    #customerchat .chat-main-wrapper,
    #professionalchat .chat-main-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #customerchat .chat-messages-container,
    #professionalchat .chat-messages-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
}

/* ===== Mode plein écran chat (immersif, interactif) =====
   Masque le bandeau de test + le header : le turbo-frame (flex:1) remplit
   alors 100vh et le chat devient plein écran, tout en restant interactif. */
body.chat-immersive .voyanz-banner-phase-tests,
body.chat-immersive .toptop,
body.chat-immersive .m-navbar {
    display: none !important;
}
body.chat-immersive .mainpart2 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.chat-fullscreen-toggle {
    flex-shrink: 0;
    height: 48px;
    border-radius: 24px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(155, 107, 165, 0.9) 0%, rgba(139, 45, 95, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(92, 43, 99, 0.35);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.chat-fullscreen-toggle:hover {
    background: linear-gradient(135deg, rgba(155, 107, 165, 1) 0%, rgba(139, 45, 95, 1) 100%);
    color: #fff;
    transform: translateY(-1px);
}
/* Sur mobile : icône seule (la barre du bas est étroite) */
@media (max-width: 767px) {
    .chat-fullscreen-toggle {
        height: 40px;
        width: 40px;
        min-width: 40px;
        padding: 0;
        border-radius: 50%;
        font-size: 1rem;
    }
    .chat-fullscreen-toggle .chat-fullscreen-label {
        display: none;
    }
}


/* Slider générique (gardé pour compatibilité) */
.slider-main {
    position: relative;
    width: 100%;
}

.slider-row {
    position: relative;
    overflow: scroll;
    overflow-y: hidden;
    width: 100%;
}

.slider-control-previous,
.slider-control-next {
    position: absolute;
    background-color: transparent;
    height: 100%;
    width: 30px;
    top: 40%;
    left: 0;
    z-index: 10;
    background-color: var(--color-gray5);
    width: 60px;
    height: 60px;
    border: 1px solid #f6f6f6;
    border-radius: 60px;
}

.slider-control-previous>i,
.slider-control-next>i {
    font-size: 30px;
    position: relative;
    left: 18px;
    top: 16px;
}

.slider-control-next {
    left: auto;
    right: 0;
}

.slider-row-inner {
    display: flex;
    transition: 450ms transform;
    padding: 50px 100px;
    max-height: 350px; /* ⚠️ UI : Augmenté de 270px à 350px pour vignettes plus grandes */
}


.slider-tile {
    position: relative;
    /* display: inline-block; */
    width: var(--slider-tile-width);
    height: var(--slider-tile-height);
    flex: 0 0 var(--slider-tile-width);
    /* height: 350px; */
    margin-right: 15px;
    /* font-size: 20px; */
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
    top: 0;
}

.slider-main-bis {
    --slider-tile-width: 200px;
    --slider-tile-height: 240px;
}

.slider-row-inner.over {
    transform: translate3d(calc(var(--slider-tile-width) * -1 * var(--slider-tile-factor) / 2), 0, 0);
}

.slider-row-inner.over .slider-tile {
    opacity: 0.3;
}

.slider-row-inner:hover .slider-tile:hover {
    /* transform: scale(calc(var(--slider-tile-factor) + 1.0)); */
    /* width: calc(var(--slider-tile-width) * -1 * var(--slider-tile-factor)); */
    opacity: 1;
    height: 320px; /* ⚠️ UI : Augmenté de 250px à 320px pour hover plus impactant */
    top: -60px; /* ⚠️ UI : Ajusté pour correspondre à la nouvelle hauteur */
}

.slider-row-inner .slider-tile .card2 {
    width: var(--slider-tile-width);
    transition: all 450ms;
}

.slider-row-inner:hover .slider-tile:hover .card2 {
    width: calc(var(--slider-tile-width) * (1 + var(--slider-tile-factor)));
}

.slider-tile:hover~.slider-tile {
    transform: translate3d(calc(var(--slider-tile-width) * var(--slider-tile-factor)), 0, 0);
}

.slider-row {
    scrollbar-width: none;
}

/* Chrome, Edge, and Safari */
.slider-row::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}



.card-img-top {
    border-radius: 28px;
}

/* #contact .cosmos2 {
	 height: 720px;
} */


.alert-dismissible {
    padding-right: 0;
}

/* ⚠️ UI DENSITY : Réduire le padding des alertes pour améliorer la densité */
.alert {
    padding: 0.75rem 1rem; /* ⚠️ UI DENSITY : Padding vertical réduit de ~1rem à 0.75rem (-25%) */
    margin-bottom: 1rem; /* ⚠️ UI DENSITY : Margin-bottom cohérent */
}

/* ⚠️ UI DENSITY : Réduire les marges du séparateur horizontal */
hr {
    margin-top: 1.5rem; /* ⚠️ UI DENSITY : Margin-top réduit */
    margin-bottom: 1.5rem; /* ⚠️ UI DENSITY : Margin-bottom réduit */
    opacity: 0.3; /* ⚠️ UI DENSITY : Opacité réduite pour moins d'impact visuel */
}

.my2columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    /* -webkit-column-rule: 1px solid lightgrey;
	-moz-column-rule: 1px solid lightgrey;
	column-rule: 1px solid lightgrey; */
}

/* ──────────────────────────────────────────────────────────────
   Sélecteurs Catégories / Spécialités (page Description du pro)
   Différenciation visuelle claire pour éviter la confusion entre
   les deux listes côte à côte.
   ────────────────────────────────────────────────────────────── */
.voyanz-pick-card {
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(2px);
    transition: border-color .2s ease, background .2s ease;
}
.voyanz-pick-card--tools {
    border-color: rgba(124, 77, 255, 0.4);
    background: linear-gradient(180deg, rgba(124, 77, 255, 0.10) 0%, rgba(124, 77, 255, 0.04) 100%);
}
.voyanz-pick-card--specialities {
    border-color: rgba(255, 184, 76, 0.4);
    background: linear-gradient(180deg, rgba(255, 184, 76, 0.10) 0%, rgba(255, 184, 76, 0.04) 100%);
}
.voyanz-pick-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}
.voyanz-pick-card__title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.voyanz-pick-card--tools .voyanz-pick-card__title i { color: #b598ff; }
.voyanz-pick-card--specialities .voyanz-pick-card__title i { color: #ffc977; }
.voyanz-pick-card__hint {
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 .8rem;
}
.voyanz-pick-counter {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.voyanz-pick-counter.is-reached {
    color: #ffd47a;
    background: rgba(255, 184, 76, 0.16);
    border-color: rgba(255, 184, 76, 0.4);
}
.voyanz-pick-options .form-check {
    margin-bottom: 0.15rem;
}
.voyanz-pick-options .form-check-input:disabled + .form-check-label {
    opacity: .45;
    text-decoration: line-through;
}

.form-text {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0;
    padding-left: 15px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.Label {
    color: white;
}

/* Position du compteur dans le menu */
#div_allsessions {
    position: relative;
    top: 0;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* ============================================
   COMPTEUR DE SESSION MODERNE
   Design amélioré, plus lisible et intégré
   ============================================ */

/* ============================================
   COMPTEUR DE SESSION MODERNE - MENU
   Design discret mais visible dans le menu
   ============================================ */

/* Style pour le compteur de session dans le menu */
.current_session {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(155, 51, 102, 0.85) 0%, rgba(116, 32, 90, 0.85) 100%);
    /* Couleurs violet/pourpre du site */
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(155, 51, 102, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    margin-bottom: 4px;
    margin-right: 8px;
}

/* Style pour les badges de notification dans le menu (petit badge circulaire) */
#divNotReaded,
#divFutureAppointments,
#voyanzMenuNotreadedBadge,
.voyanz-menu-notread-badge {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-left: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #fc6194 0%, #d72f3c 100%);
    border-radius: 10px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(252, 97, 148, 0.4);
    vertical-align: middle;
}
/* Badge à l'intérieur du menu déroulant (à côté de Chat) */
#voyanzMenuDropdownNotreadBadge {
    top: 0;
    flex-shrink: 0;
}

/* Sous-menu client : dropdown "Vos séances" (Vos séances + Chat) aligné sur les autres liens */
.sub-menu .m-navbar-item.dropdown .dropdown-toggle {
    text-decoration: none;
}
.sub-menu .m-navbar-item.dropdown .dropdown-menu {
    margin-top: 0.25rem;
    display: none;
}
.sub-menu .m-navbar-item.dropdown .dropdown-menu.show {
    display: block;
}

/* Sous-menu "Vos séances" : seul l'élément actif (page courante) est mis en avant, pas tout le bloc */
.sub-menu-sessions-dropdown.dropdown-menu-dark {
    background-color: rgba(42, 31, 61, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0;
}
.sub-menu-sessions-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    padding: 0.5rem 1rem;
}
.sub-menu-sessions-dropdown .dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.sub-menu-sessions-dropdown .dropdown-item.active {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
}
/* Desktop : annuler l’héritage du parent .m-navbar-item.active sur les liens du dropdown */
.sub-menu .m-navbar-item.dropdown .sub-menu-sessions-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    padding: 0.5rem 1rem;
}
.sub-menu .m-navbar-item.dropdown .sub-menu-sessions-dropdown .dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.sub-menu .m-navbar-item.dropdown .sub-menu-sessions-dropdown .dropdown-item.active {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
}
.sub-menu-sessions-dropdown .dropdown-divider {
    margin: 0.35rem 0;
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}
/* Menu Voyanz (nav principale) : même style, seul l’élément actif en surbrillance */
/* Spécificité renforcée pour battre .m-navbar ul li.m-navbar-item.active a (styles.css) */
.m-navbar ul li.m-navbar-item.voyanz-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    border-radius: 0;
    padding: 0.5rem 1rem;
}
.m-navbar ul li.m-navbar-item.voyanz-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.m-navbar ul li.m-navbar-item.voyanz-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item.active {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
}

/* Menu Paramètres (boutons navbar) : même hover/active que Voyanz */
.parametres-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    padding: 0.5rem 1rem;
}
.parametres-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.parametres-dropdown-parent .sub-menu-sessions-dropdown .dropdown-item.active {
    color: var(--color-pink1);
    background-color: var(--color-pink5);
}
/* Menu Paramètres : fermé par défaut (évite affichage au chargement) */
.parametres-dropdown-parent .dropdown-menu:not(.show) {
    display: none !important;
}
/* Trigger Paramètres : même rendu que les autres liens de la barre */
.m-navbar-buttons .parametres-dropdown-parent .dropdown-toggle {
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}
.m-navbar-buttons .parametres-dropdown-parent .dropdown-toggle:hover {
    color: #fff;
}
/* Séparateur entre statut « Disponible » et Favoris (menu droit) */
.m-navbar-buttons .voyanz-nav-sep {
    margin: 0 0.35em;
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
}

.current_session:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(155, 51, 102, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.current_session .infotimesession_1 {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.current_session .infotimesession_2 {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    font-family: 'Courier New', monospace;
}

.current_session button {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
    border-radius: 6px;
    border: none;
    background: rgba(215, 47, 60, 0.9);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(215, 47, 60, 0.3);
}

.current_session button:hover {
    background: rgba(215, 47, 60, 1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(215, 47, 60, 0.4);
}

.current_session-reopen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.current_session-reopen:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: scale(1.04);
}

.current_session.warningtime {
    background: linear-gradient(135deg, rgba(215, 47, 60, 0.95) 0%, rgba(180, 30, 40, 0.95) 100%);
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(215, 47, 60, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 4px 25px rgba(215, 47, 60, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.2);
    }
}

/* ⚠️ COMPTEUR VIDÉO INTÉGRÉ : Afficher le compteur Visioco dans l'interface vidéo */
.agora-session-counter-wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 200px;
}

.agora-session-counter-wrapper .current_session {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
}

.agora-session-counter-wrapper .current_session-type {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agora-session-counter-wrapper .infotimesession_1 {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.agora-session-counter-wrapper .infotimesession_remaining {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

.agora-session-counter-wrapper .infotimesession_2 {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #fbbf24;
}

.agora-session-counter-wrapper.warningtime {
    border-color: rgba(215, 47, 60, 0.8) !important;
    animation: pulse-warning-counter 2s infinite;
}

@keyframes pulse-warning-counter {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(215, 47, 60, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(215, 47, 60, 0.8);
    }
}

/* Styles pour les éléments du compteur dans le menu */
.current_session-type {
    font-weight: 600;
    opacity: 0.95;
    text-transform: capitalize;
    font-size: 0.8rem;
}

.current_session .infotimesession_remaining {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Lien téléchargement PDF du compte-rendu (page "Vidéo terminée") – bien visible sur fond violet */
.voyanz-pdf-download-link {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a0f3c !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    transition: all 0.25s ease !important;
}
.voyanz-pdf-download-link:hover {
    background: #fff !important;
    color: #0d0622 !important;
    border-color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px);
}

/* Calendrier RDV : style de base (avocats, etc.) */
.mycalendar .day {
    border: 1px solid var(--color-gray5);
    border-radius: 5px;
    margin-bottom: 15px;
}

.mycalendar .dayname {
    border-bottom: 1px solid var(--color-gray5);
    padding: 5px 10px;
    cursor: pointer;
}

.mycalendar .dayhours {
    padding: 5px 10px;
    flex-wrap: wrap;
    display: flex;
}

.mycalendar .hour {
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 10px;
    cursor: pointer;
    background-color: #302b5e;
    margin-bottom: 8px;
}

/* ============================================
   CALENDRIER RDV VOYANZ - Féminin & mystique
   ============================================ */
.modal-voyanz .mycalendar-voyanz .day {
    border: 1px solid rgba(245, 168, 196, 0.3);
    border-radius: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.modal-voyanz .mycalendar-voyanz .day:hover {
    border-color: rgba(245, 168, 196, 0.45);
    box-shadow: 0 0 12px rgba(245, 168, 196, 0.15);
}

.modal-voyanz .mycalendar-voyanz .day.expanded {
    border-color: rgba(245, 168, 196, 0.5);
    box-shadow: 0 0 16px rgba(245, 168, 196, 0.2);
}

.modal-voyanz .mycalendar-voyanz .dayname {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(245, 168, 196, 0.2);
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.25s;
}

.modal-voyanz .mycalendar-voyanz .day.expanded .dayname {
    border-bottom-color: rgba(245, 168, 196, 0.35);
}

.modal-voyanz .mycalendar-voyanz .dayname:hover {
    background: rgba(245, 168, 196, 0.1);
}

.modal-voyanz .mycalendar-voyanz .dayname-chevron {
    color: #f5a8c4;
    font-size: 0.7rem;
    transition: transform 0.25s;
    flex-shrink: 0;
}

.modal-voyanz .mycalendar-voyanz .day:not(.expanded) .dayname-chevron {
    transform: rotate(-90deg);
}

.modal-voyanz .mycalendar-voyanz .dayname-text {
    text-transform: capitalize;
}

.modal-voyanz .mycalendar-voyanz .dayhours {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-voyanz .mycalendar-voyanz .hour {
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    background: rgba(245, 168, 196, 0.2);
    border: 1px solid rgba(245, 168, 196, 0.35);
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.25s;
}

.modal-voyanz .mycalendar-voyanz .hour:hover {
    background: rgba(245, 168, 196, 0.35);
    border-color: rgba(245, 168, 196, 0.5);
    box-shadow: 0 0 12px rgba(245, 168, 196, 0.3);
    transform: translateY(-1px);
}

.modal-voyanz .mycalendar-voyanz .mycalendar-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    padding: 24px 16px;
    margin: 0;
    font-size: 0.95rem;
}

.modal-voyanz .mycalendar-voyanz .mycalendar-empty i {
    display: block;
    font-size: 1.5rem;
    color: #f5a8c4;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* Choix du type de RDV : chat / téléphone / vidéo */
.appointment-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.appointment-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(245, 168, 196, 0.3);
    border-radius: 14px;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}

.appointment-type-option:hover {
    background: rgba(245, 168, 196, 0.15);
    border-color: rgba(245, 168, 196, 0.5);
    box-shadow: 0 4px 20px rgba(245, 168, 196, 0.25);
    color: white;
    transform: translateY(-2px);
}

.appointment-type-option-icon {
    margin-bottom: 10px;
}

.appointment-type-option-icon img {
    filter: drop-shadow(0 0 8px rgba(245, 168, 196, 0.4));
}

.appointment-type-option-label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 4px;
    text-align: center;
}

.appointment-type-option-price {
    font-size: 0.8rem;
    color: #f5a8c4;
    font-weight: 600;
}

@media (max-width: 576px) {
    .appointment-type-options {
        grid-template-columns: 1fr;
    }
}

.noborderright {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sectionpurple {
    background-color: var(--color-pink8);
}

.badgefilter {
    cursor: pointer;
}

/* ============================================
   PAGE LISTE - Style Netflix VOYANZ
   ============================================ */

/* Section de recherche */
.voyanz-list-search {
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.95) 0%, rgba(13, 9, 76, 0.95) 50%, rgba(155, 51, 102, 0.9) 100%);
    border-bottom: 2px solid rgba(252, 97, 148, 0.3);
    position: relative;
    overflow: hidden;
}

.voyanz-list-search::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 80% 70%, rgba(252, 97, 148, 0.1), transparent);
    background-size: 200% 200%;
    animation: voyanz-stars 20s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.3;
}

.voyanz-search-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.voyanz-search-title {
    color: white;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.voyanz-search-title i {
    color: #fc6194;
    text-shadow: 0 0 15px rgba(252, 97, 148, 0.6);
}

.voyanz-search-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin: 0;
}

.voyanz-search-form {
    position: relative;
    z-index: 1;
    max-width: 100%;
    box-sizing: border-box;
}

.voyanz-search-input-wrapper {
    display: flex;
    gap: 0;
    margin-bottom: 30px;
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    box-sizing: border-box;
}

.voyanz-search-input-wrapper .mb-2 {
    margin-bottom: 0 !important;
    flex: 1;
    min-width: 0;
    display: flex;
}

/* Override tout .mb-2 dans la zone recherche liste (priorité max pour éviter 5rem ou autre) */
.voyanz-list-search .voyanz-search-input-wrapper .mb-2 {
    margin-bottom: 0 !important;
}

.voyanz-search-input-wrapper .form-floating {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.voyanz-search-input-wrapper .input-group {
    width: 100%;
    margin-bottom: 0;
}

.voyanz-search-input-wrapper .form-control {
    border-radius: 12px 0 0 12px;
    border-right: none;
}

.voyanz-search-button {
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%);
    border: none;
    border-radius: 0 12px 12px 0;
    padding: 0 25px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
}

.voyanz-search-button:hover {
    background: linear-gradient(135deg, #ff6ba3 0%, #b83d7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 97, 148, 0.6);
}

/* Layout deux colonnes - Nouvelle structure */
.voyanz-list-main {
    padding: 30px 0;
}

.voyanz-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.voyanz-list-wrapper {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* Colonne gauche : Filtres – descend jusqu'au bout (sidebar = panel, un seul conteneur) */
.voyanz-filters-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: rgba(29, 25, 62, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.2);
    padding: 25px;
}

.voyanz-filters-mobile-toggle {
    display: none;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4);
    transition: all 0.3s ease;
}

.voyanz-filters-mobile-toggle:hover {
    background: linear-gradient(135deg, #ff6ba3 0%, #b83d7a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 97, 148, 0.6);
}

.voyanz-filters-mobile-toggle i {
    margin-right: 8px;
}

/* Panel = même élément que la sidebar ; règles mobile uniquement (voir media query) */
.voyanz-filters-panel {
    padding-right: 10px;
}

/* Colonne droite : Résultats */
.voyanz-results-main {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.voyanz-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(29, 25, 62, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.2);
    backdrop-filter: blur(10px);
}

.voyanz-results-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.voyanz-results-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fc6194;
}

.voyanz-results-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.voyanz-results-sort {
    display: flex;
    align-items: center;
}

.voyanz-sort-select {
    padding: 8px 16px;
    background: rgba(29, 25, 62, 0.6);
    border: 1px solid rgba(252, 97, 148, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    cursor: not-allowed;
    opacity: 0.6;
}

.voyanz-results-content {
    width: 100%;
}

.voyanz-filters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.voyanz-filters-sidebar::-webkit-scrollbar-track {
    background: rgba(29, 25, 62, 0.3);
    border-radius: 10px;
}

.voyanz-filters-sidebar::-webkit-scrollbar-thumb {
    background: rgba(252, 97, 148, 0.5);
    border-radius: 10px;
}

.voyanz-filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(252, 97, 148, 0.7);
}

.voyanz-content-main {
    min-height: 500px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.voyanz-content-main .voyanz-list-section {
    margin-bottom: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.voyanz-content-main .voyanz-list-section:last-child {
    margin-bottom: 0;
}

/* Contrainte des sliders dans la colonne de droite */
.voyanz-results-content .slider-main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.voyanz-results-content .slider-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.voyanz-results-content .slider-row::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.voyanz-results-content .slider-row-inner {
    padding: 50px 20px;
    box-sizing: border-box;
}

/* Contrainte de la grille des professionnels */
.voyanz-results-content .voyanz-professionals-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.voyanz-results-content .voyanz-list-section {
    margin-bottom: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.voyanz-results-content .voyanz-list-section:last-child {
    margin-bottom: 0;
}

/* Filtres – contenu du panneau (un seul cadre = l’aside, pas de double boîte) */
.voyanz-filters-container {
    padding: 0;
}

.voyanz-filter-group {
    margin-bottom: 25px;
}

.voyanz-filter-group:last-child {
    margin-bottom: 0;
}

.voyanz-filter-label {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.voyanz-filter-label i {
    color: #fc6194;
    font-size: 0.9rem;
}

.voyanz-filter-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.voyanz-filter-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.voyanz-filter-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(252, 97, 148, 0.5);
    transform: translateY(-2px);
}

.voyanz-filter-badge.active {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.8) 0%, rgba(155, 51, 102, 0.8) 100%);
    border-color: rgba(252, 97, 148, 1);
    color: white;
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4);
}

.voyanz-filter-reset {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffc107;
}

.voyanz-filter-reset:hover {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.7);
}

/* Sections de contenu */
.voyanz-list-content {
    background: linear-gradient(180deg, rgba(13, 9, 76, 0.3) 0%, rgba(29, 25, 62, 0.3) 100%);
    padding: 40px 0;
}

.voyanz-list-section {
    margin-bottom: 50px;
}

.voyanz-list-section:last-child {
    margin-bottom: 0;
}

.voyanz-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(252, 97, 148, 0.2);
}

.voyanz-section-header-center {
    justify-content: center;
    text-align: center;
}

.voyanz-section-icon {
    font-size: 2rem;
    text-shadow: 0 0 15px currentColor;
}

.voyanz-icon-gold {
    color: #ffd700;
}

.voyanz-icon-green {
    color: #22c55e;
}

.voyanz-icon-cyan {
    color: #06b6d4;
}

.voyanz-icon-blue {
    color: #3b82f6;
}

.voyanz-icon-pink {
    color: #fc6194;
}

.voyanz-icon-purple {
    color: #a855f7;
}

.voyanz-section-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Liste /fr/list : titres alignés à gauche, même typo que homepage3 (op-home3-cards-overlap) */
.voyanz-results-content .voyanz-section-header {
    justify-content: flex-start;
}

.voyanz-results-content .voyanz-section-header .voyanz-professionals-subsection-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 255, 255, 0.1);
}

.voyanz-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px currentColor;
    margin-left: 10px;
}

.voyanz-section-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.voyanz-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.voyanz-empty-state i {
    font-size: 4rem;
    color: #fc6194;
    margin-bottom: 20px;
    opacity: 0.5;
}

.voyanz-empty-state h4 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
}

/* Section highlight (nouveaux inscris) */
.voyanz-list-section-highlight {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(252, 97, 148, 0.2) 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Grille des professionnels */
.voyanz-professionals-grid {
    margin-top: 30px;
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .voyanz-list-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .voyanz-filters-sidebar {
        width: 100%;
    }
    
    .voyanz-filters-mobile-toggle {
        display: block;
    }
    
    .voyanz-filters-panel {
        display: none;
        position: relative;
        top: 0;
        max-height: none;
        margin-top: 20px;
    }
    
    .voyanz-filters-panel.voyanz-filters-panel-open {
        display: block;
    }
    
    .voyanz-results-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .voyanz-results-sort {
        width: 100%;
    }
    
    .voyanz-sort-select {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .voyanz-list-search .container {
        padding: 16px 12px 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .voyanz-search-title {
        font-size: 1.4rem;
    }
    
    .voyanz-search-subtitle {
        font-size: 0.9rem;
    }
    
    .voyanz-search-header {
        margin-bottom: 12px;
    }
    
    /* En mobile : bloc recherche plus étroit et centré (ne déborde plus) */
    .voyanz-list-search .voyanz-search-form {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .voyanz-list-search .voyanz-search-input-wrapper {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0 !important;
    }
    
    /* Bloquer toute marge sur le .mb-2 du formulaire liste en mobile */
    .voyanz-list-search .voyanz-search-input-wrapper .mb-2 {
        margin-bottom: 0 !important;
        max-width: 100%;
    }
    
    .voyanz-list-search .voyanz-search-input-wrapper .form-control {
        border-radius: 12px;
        border-right: 1px solid rgba(255,255,255,0.2);
        padding: 8px 10px 8px 12px;
        font-size: 0.9rem;
        min-height: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .voyanz-list-search .voyanz-search-input-wrapper .input-group,
    .voyanz-list-search .voyanz-search-input-wrapper .input-group .form-floating {
        max-width: 100%;
    }
    
    .voyanz-list-search .voyanz-search-input-wrapper .input-group-text {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .voyanz-search-button {
        border-radius: 12px;
        margin-top: 6px;
        padding: 8px 14px;
        font-size: 0.9rem;
        justify-content: center;
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
    }
    
    .voyanz-filters-container {
        padding: 20px;
    }
    
    .voyanz-section-title {
        font-size: 1.4rem;
    }

    .voyanz-results-content .voyanz-section-header .voyanz-professionals-subsection-title {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    
    .voyanz-list-section-highlight {
        padding: 25px;
    }
}

.form-floating>label {
    padding: 1rem 0;
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: rgba(255, 255, 255, 0.6);
}


.cardpro {
    background-color: transparent;
    height: 310px;
    cursor: pointer;
    color: #fff;
}

/* Accueil — bloc « En ligne maintenant » : halo blanc lumineux derrière la vignette */
@keyframes cardproGlowPulse {
    0%, 100% { box-shadow: 0 0 18px 6px rgba(255,255,255,0.45), 0 0 50px 15px rgba(255,255,255,0.18), 0 0 90px 30px rgba(255,255,255,0.08); }
    50%      { box-shadow: 0 0 24px 10px rgba(255,255,255,0.55), 0 0 60px 20px rgba(255,255,255,0.25), 0 0 100px 38px rgba(255,255,255,0.12); }
}

.cardpro.cardpro-online-glow .cardpro-content {
    box-shadow:
        0 0 18px 6px rgba(255, 255, 255, 0.45),
        0 0 50px 15px rgba(255, 255, 255, 0.18),
        0 0 90px 30px rgba(255, 255, 255, 0.08);
    animation: cardproGlowPulse 3s ease-in-out infinite;
}

.cardpro-content {
    height: 100%;
    transform: scale(1.0);
    transition: all 0.3s;
}

.cardpro-content:hover {
    background-color: #361951;
    transform: scale(1.03);
    color: #fff;
}

.cardpro-content:hover .cardpro-title,
.cardpro-content:hover .cardpro-description,
.cardpro-content:hover .cardpro-prices,
.cardpro-content:hover .cardpro-price-label {
    color: #fff;
}

.cardpro-img {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    height: 183px;
    overflow: hidden;
}

/* Vidéo vignette pro : rollover uniquement, lazy load */
.cardpro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.cardpro-video.is-playing {
    opacity: 1;
}

/* Mobile : privilégier l'image de couverture (performance + affichage fiable), pas la vidéo */
@media (max-width: 991.98px) {
    .cardpro-video {
        display: none !important;
    }
    .cardpro-img {
        background-color: var(--color-pink7, #302b5e);
    }
}

.cardpro-img > .d-flex {
    position: relative;
    z-index: 1;
}

.cardpro-img > .cardpro-bgtitle {
    position: relative;
    z-index: 1;
}

.cardpro-specialities {
    background-color: var(--color-pink4);
    font-size: 0.8rem;
    border-radius: 0 20px 20px 0;
    padding: 2px 15px;
    opacity: 0.7;
    text-decoration: none;
    line-height: 1rem;
    color: black;
    text-transform: uppercase;
}

.cardpro-lang-flag-img {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: help;
}

.cardpro-title {
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    line-height: 1.6rem;
    text-shadow: #000 1px 0 10px;
}

.card-stars svg path {
    fill: red;
    color: red;
    stroke: red;
}

.cardpro-bgtitle {
    background: linear-gradient(0deg, rgba(50, 26, 78, 1) 0%, rgba(0, 212, 255, 0) 100%);
}

.cardpro-description {
    font-size: 0.9rem;
    line-height: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.cardpro-price-label {
    color: #9b3366;
    font-weight: 600;
}

.cardpro-prices {
    font-size: 0.8rem;
    line-height: 1;
    background-color: rgb(12, 9, 73);
    padding: 7px 10px;
    margin: 10px 0px 0 0px;
    border-radius: 5px;
}
.cardpro-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}
/* Hors ligne : garder chat / tel / vidéo lisibles (canaux offerts) ; le badge statut indique la dispo instantanée */
.cardpro-actions-offline {
    cursor: not-allowed;
}
.cardpro-actions-offline .cardpro-action {
    opacity: 1;
    pointer-events: none;
    filter: none;
    transform: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.cardpro-actions-offline .cardpro-action:hover {
    transform: none !important;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.cardpro-content:hover .cardpro-actions-offline .cardpro-action-chat {
    background: linear-gradient(135deg, #219bf1, #1a7fd4);
    color: #fff;
    transform: none !important;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.cardpro-content:hover .cardpro-actions-offline .cardpro-action-phone {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    transform: none !important;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.cardpro-content:hover .cardpro-actions-offline .cardpro-action-video {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    transform: none !important;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.cardpro-content:hover .cardpro-actions-offline .cardpro-action-price {
    color: #fff;
    opacity: 0.9;
}
.cardpro-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    gap: 2px;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.cardpro-action:hover {
    filter: brightness(1.3);
    transform: translateY(-2px) scale(1.06);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.cardpro-action i {
    font-size: 0.75rem;
    margin-right: 3px;
}
.cardpro-action-price {
    font-size: 0.6rem;
    font-weight: 400;
    opacity: 0.9;
    text-transform: none;
}
.cardpro-action-chat {
    background: linear-gradient(135deg, #219bf1, #1a7fd4);
}
.cardpro-action-phone {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.cardpro-action-video {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.cardpro-content:hover .cardpro-action-chat {
    background: linear-gradient(135deg, #3aabff, #219bf1);
    color: #000;
}
.cardpro-content:hover .cardpro-action-phone {
    background: linear-gradient(135deg, #3ddc84, #2ecc71);
    color: #000;
}
.cardpro-content:hover .cardpro-action-video {
    background: linear-gradient(135deg, #b06ecc, #9b59b6);
    color: #000;
}
.cardpro-content:hover .cardpro-action-price {
    color: #000;
}

/* Barre de statut de disponibilité sur les cartes pro */
.cardpro-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 20px;
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cardpro-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cardpro-status-online {
    background: #fff;
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.35);
}
.cardpro-status-online .cardpro-status-dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    animation: cardproStatusPulse 2s ease-in-out infinite;
}
.cardpro-status-busy {
    background: #fff;
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.35);
}
.cardpro-status-busy .cardpro-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.cardpro-status-offline {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.25);
}
.cardpro-status-offline .cardpro-status-dot {
    background: #6b7280;
}
@keyframes cardproStatusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Responsive mobile — barre de statut cartes */
@media (max-width: 576px) {
    .cardpro-status {
        padding: 5px 10px;
        font-size: 0.68rem;
        gap: 6px;
        letter-spacing: 0.4px;
    }
    .cardpro-status-dot {
        width: 7px;
        height: 7px;
    }
}

.sectionblue {
    background: linear-gradient(180deg, #757de8 0%, #4b98ea 100%);
}

.table.table-dark {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    border-collapse: separate;
    border-spacing: 0 4px; /* ⚠️ UI DENSITY : Réduit de 8px à 4px (-50%) */
    --bs-border-width: 0;
}

/* ⚠️ UI DENSITY : Réduire le padding des cellules de tableau */
.table.table-dark td,
.table.table-dark th {
    padding: 8px 12px; /* ⚠️ UI DENSITY : Padding vertical réduit de ~12px à 8px (-33%) */
}

.table.table-dark thead tr {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.table.table-dark tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin: 3px 0;
}

.table.table-dark tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    margin: 3px 0;
}

.table.table-dark tr td:first-child,
.table.table-dark tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.table.table-dark tr td:last-child,
.table.table-dark tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.darkframe {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 40px;
    border-radius: 10px;
}


.fc .fc-timegrid-slot-label {
    border: 0;
}

.fc-timegrid-event .fc-event-main {
    background-color: rgba(62, 67, 126, 1);
    ;
}

strong {
    color: var(--color-blue2)
}

.div_pack_promo {
    background-color: transparent;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 0;
    line-height: 1.1rem;
}

/* =========================================================================
   Page Forfaits — Voyanz pricing redesign
   ========================================================================= */

/* --- Intro section ------------------------------------------------------- */
.voyanz-pricing-intro__title {
    color: #fff;
}
.voyanz-pricing-intro__lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- Promo code card ----------------------------------------------------- */
.voyanz-pricing-promo-card {
    background: linear-gradient(135deg, rgba(194, 33, 241, 0.12) 0%, rgba(33, 155, 241, 0.10) 100%);
    border: 1px solid rgba(194, 33, 241, 0.25);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(6px);
}
.voyanz-pricing-promo-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.voyanz-pricing-promo-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-pink1), #c221f1);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}
.voyanz-pricing-promo-card__label {
    font-family: "Volkhov", serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
}
.voyanz-pricing-promo-card__hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}
.voyanz-pricing-promo-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.voyanz-pricing-promo-card__field {
    min-width: 0;
    max-width: 380px;
}
.voyanz-pricing-promo-card__submit {
    background: linear-gradient(135deg, #c221f1, var(--color-pink1));
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    max-height: 48px;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.voyanz-pricing-promo-card__submit:hover {
    opacity: 0.88;
    color: #fff;
}
.voyanz-pricing-promo-card__alert {
    margin-top: 0.6rem;
}

/* --- Pack cards ---------------------------------------------------------- */
.voyanz-pricing-pack--featured {
    border-color: rgba(194, 33, 241, 0.65);
}
.voyanz-pricing-pack__badge {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(194, 33, 241, 0.85);
}
.voyanz-pricing-pack__sessions {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 0.75rem;
}
.voyanz-pricing-repeat-hint {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}
.voyanz-pricing-pack {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.voyanz-pricing-pack:hover {
    border-color: rgba(194, 33, 241, 0.5);
    box-shadow: 0 8px 32px rgba(194, 33, 241, 0.18);
}
.voyanz-pricing-pack__inner {
    padding: 2rem 1.5rem 1.75rem;
}
.voyanz-pricing-pack__title {
    font-family: "Volkhov", serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
.voyanz-pricing-pack__price {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.85rem;
}
.voyanz-pricing-pack__price-line {
    font-family: "Volkhov", serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}
.voyanz-pricing-pack__price-bonus {
    font-family: "Volkhov", serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #c221f1;
    margin-top: 0.3rem;
}
.voyanz-pricing-pack__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

/* --- Promo badge inside card --- */
.voyanz-pricing-pack__promo:empty {
    display: none;
}
.voyanz-pricing-pack__promo:not(:empty) {
    background: linear-gradient(135deg, #c221f1, var(--color-pink1));
    color: #fff;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}
.voyanz-pricing-pack__promo--ghost,
.voyanz-pricing-pack__promo--ghost:not(:empty) {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.voyanz-pricing-pack__promo--ghost i {
    color: rgba(255, 255, 255, 0.5);
}

/* --- CTA buttons --- */
.voyanz-pricing-pack__cta-hint {
    color: rgba(255, 255, 255, 0.6);
}
.voyanz-pricing-pack__btn {
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.65rem 1.5rem;
    transition: opacity 0.2s, transform 0.2s;
}
.voyanz-pricing-pack__btn:hover {
    transform: translateY(-1px);
}
.voyanz-pricing-pack__btn--primary {
    background: linear-gradient(135deg, var(--color-blue2), var(--color-blue4));
    color: #fff;
    border: none;
}
.voyanz-pricing-pack__btn--primary:hover {
    opacity: 0.9;
    color: #fff;
}
.voyanz-pricing-pack__btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.voyanz-pricing-pack__btn--outline:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

/* --- CGU & links --- */
.voyanz-pricing-pack__cgu {
    line-height: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
}
.voyanz-pricing-pack__cgu-check {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
}
.voyanz-pricing-pack__cgu-link {
    text-decoration: underline;
    color: var(--color-pink1);
}
.voyanz-pricing-pack__cgu-link:hover {
    color: #fff;
}
.voyanz-pricing-pack__cgu-label {
    cursor: pointer;
}
.voyanz-pricing-pack__btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.voyanz-pricing-pack__btn--disabled:hover {
    transform: none;
}
.voyanz-pricing-pack__cgu-highlight {
    animation: voyanz-cgu-pulse 0.5s ease-in-out 2;
}
@keyframes voyanz-cgu-pulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(245, 168, 196, 0.25); border-radius: 8px; }
}

/* Page forfaits : cartes au-dessus du bandeau mainpart2 / footer (vagues masquées dans layout1) */
body#customerpricing .cosmos2 {
    padding-bottom: 2.5rem;
}
body#customerpricing .voyanz-pricing-packs {
    position: relative;
    z-index: 12;
    padding-bottom: 5rem !important;
}
body#customerpricing .mainpart2 {
    position: relative;
    z-index: 8;
}
body#customerpricing footer {
    position: relative;
    z-index: 5;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .voyanz-pricing-promo-card {
        padding: 1rem;
    }
    .voyanz-pricing-promo-card__row {
        flex-direction: column;
    }
    .voyanz-pricing-promo-card__field {
        max-width: 100%;
    }
    .voyanz-pricing-pack__inner {
        padding: 1.5rem 1.1rem 1.25rem;
    }
    .voyanz-pricing-pack__price-line {
        font-size: 1.35rem;
    }
}

.promohome {
    position: absolute;
    right: 0;
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.25) 0%, rgba(155, 51, 102, 0.25) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(252, 97, 148, 0.5);
    border-radius: 16px;
    color: white;
    max-width: 180px;
    padding: 20px 20px 30px 20px;
    font-family: "Volkhov";
    font-weight: 700;
    line-height: 1.2rem;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(252, 97, 148, 0.3);
    animation: voyanz-promo-pulse 3s ease-in-out infinite;
    z-index: 2;
    cursor: pointer;
}

.promohome h3 {
    margin: 0;
    color: #fc6194;
    text-shadow: 0 0 20px rgba(252, 97, 148, 0.8);
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.promohome div {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


/* Bandeau : colonnes de vignettes voyants + teaser consultation vidéo */
.voyanz-bandeau-right {
    gap: 16px;
    align-items: flex-end;
    position: relative;
    z-index: 10;
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(12, 9, 70, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.voyanz-bandeau-vignettes-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.voyanz-bandeau-vignettes-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
    min-height: 120px;
    padding: 12px;
    background: rgba(12, 9, 70, 0.85);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.voyanz-bandeau-vignettes-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voyanz-bandeau-vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 72px;
}

.voyanz-bandeau-vignette:hover {
    transform: scale(1.05);
    color: white;
    text-shadow: 0 0 12px rgba(252, 97, 148, 0.6);
}

.voyanz-bandeau-vignette-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.voyanz-bandeau-vignette:hover .voyanz-bandeau-vignette-img {
    border-color: rgba(252, 97, 148, 0.8);
    box-shadow: 0 4px 16px rgba(252, 97, 148, 0.4);
}

.voyanz-bandeau-vignette-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
    line-height: 1.1;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voyanz-bandeau-vignette-img-placeholder {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(116, 125, 239, 0.3) 100%) !important;
}

.voyanz-bandeau-vignettes-wrap {
    min-height: 120px;
    padding: 12px;
    background: rgba(12, 9, 70, 0.75);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.voyanz-bandeau-video-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    width: 100%;
    max-width: 160px;
    min-height: 90px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(116, 125, 239, 0.4) 0%, rgba(155, 51, 102, 0.4) 100%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.voyanz-bandeau-video-teaser:hover {
    transform: scale(1.02);
    border-color: rgba(252, 97, 148, 0.6);
    box-shadow: 0 6px 20px rgba(252, 97, 148, 0.3);
    color: white;
}

.voyanz-bandeau-video-img {
    position: absolute;
    inset: 0;
    background: url('/images/voyanz/forme3.svg') center/cover no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

.voyanz-bandeau-video-play {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-pink1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 6px;
}

.voyanz-bandeau-video-label {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
    .voyanz-bandeau-vignette {
        width: 56px;
    }
    .voyanz-bandeau-vignette-img {
        width: 56px;
        height: 56px;
    }
    .voyanz-bandeau-vignette-name {
        font-size: 0.65rem;
        max-width: 56px;
    }
    .voyanz-bandeau-video-teaser {
        max-width: 120px;
        min-height: 70px;
    }
}

/* ============================================
   HERO GRID – Plusieurs blocs d’infos (style PSA, couleurs Voyanz)
   ============================================ */
.voyanz-hero-grid-wrap {
    min-height: 680px;
    padding: 28px 0;
    display: flex;
    align-items: center;
}

.voyanz-hero-grid-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0c0946 0%, rgba(12, 9, 70, 0.85) 15%, rgba(48, 43, 94, 0.6) 100%);
    pointer-events: none;
}

.voyanz-hero-grid-wrap .voyanz-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 620px;
}

.voyanz-hero-block {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: rgba(12, 9, 70, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.voyanz-hero-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(252, 97, 148, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Blocs avec image de fond (impact visuel type PSA) */
.voyanz-hero-has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.voyanz-hero-block-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 9, 70, 0.88) 0%, rgba(48, 43, 94, 0.75) 50%, rgba(155, 51, 102, 0.5) 100%);
    pointer-events: none;
}

.voyanz-hero-block .voyanz-hero-feature-inner,
.voyanz-hero-block .voyanz-hero-block-link,
.voyanz-hero-block .voyanz-hero-block-label,
.voyanz-hero-block .voyanz-hero-voyants-wrap,
.voyanz-hero-block .voyanz-hero-block-more,
.voyanz-hero-block .voyanz-hero-list-title,
.voyanz-hero-block .voyanz-hero-list-items,
.voyanz-hero-block .voyanz-hero-list-btn {
    position: relative;
    z-index: 1;
}

/* Bloc 1 : Feature principal (grand bloc avec image) */
.voyanz-hero-feature {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    padding: 36px 40px;
    min-height: 300px;
}

.voyanz-hero-feature-inner {
    width: 100%;
}

.voyanz-hero-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
    background: var(--color-pink1);
    padding: 6px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4);
}

.voyanz-hero-feature-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    margin: 0 0 14px 0;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.voyanz-hero-feature-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 22px 0;
    line-height: 1.55;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.voyanz-hero-cta {
    display: inline-block;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: transparent;
    border: 2px solid var(--color-pink1);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(252, 97, 148, 0.2);
}

.voyanz-hero-cta:hover {
    box-shadow: 0 6px 24px rgba(252, 97, 148, 0.4);
}

.voyanz-hero-cta:hover {
    background: var(--color-pink1);
    color: white;
    border-color: var(--color-pink1);
}

/* Bloc 2 : Promo (grand, image fond) */
.voyanz-hero-promo {
    grid-column: 2;
    grid-row: 1;
    min-height: 200px;
}

.voyanz-hero-block-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 24px;
    height: 100%;
    min-height: 200px;
    text-decoration: none;
    color: white;
    position: relative;
}

.voyanz-hero-block-link:hover {
    color: white;
}

.voyanz-hero-block-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.voyanz-hero-block-label-big {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.voyanz-hero-promo-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-pink1);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.voyanz-hero-promo-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 8px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.voyanz-hero-arrow {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-pink1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(252, 97, 148, 0.4);
}

.voyanz-hero-block-link:hover .voyanz-hero-arrow {
    transform: scale(1.1);
}

/* Bloc 3 : Nos voyants (vignettes + image fond, plus gros) */
.voyanz-hero-voyants {
    grid-column: 2;
    grid-row: 2;
    padding: 20px 22px;
    min-height: 260px;
}

.voyanz-hero-block-label.voyanz-hero-block-label {
    margin-bottom: 10px;
}

.voyanz-hero-voyants-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.voyanz-hero-vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    width: 52px;
    transition: transform 0.2s ease;
}

.voyanz-hero-vignette-large {
    width: 72px;
}

.voyanz-hero-vignette:hover {
    transform: scale(1.08);
    color: white;
}

.voyanz-hero-vignette-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.voyanz-hero-vignette-large .voyanz-hero-vignette-img {
    width: 72px;
    height: 72px;
    border-width: 3px;
}

.voyanz-hero-vignette:hover .voyanz-hero-vignette-img {
    border-color: var(--color-pink1);
    box-shadow: 0 6px 20px rgba(252, 97, 148, 0.5);
}

.voyanz-hero-vignette-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    margin-top: 6px;
    line-height: 1.15;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.voyanz-hero-vignette-large .voyanz-hero-vignette-name {
    font-size: 0.8rem;
    max-width: 76px;
}

.voyanz-hero-vignette-placeholder {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(116, 125, 239, 0.3) 100%) !important;
}

.voyanz-hero-block-more {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-pink1);
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.voyanz-hero-block-more:hover {
    color: white;
}

/* Bloc 4 : Consultation vidéo (grand, image fond) */
.voyanz-hero-video {
    grid-column: 3;
    grid-row: 1;
    min-height: 200px;
}

.voyanz-hero-video-link {
    align-items: center;
    text-align: center;
    padding: 28px 24px;
}

.voyanz-hero-video-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-pink1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 12px auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.voyanz-hero-video-icon-large {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.voyanz-hero-video-label {
    font-size: 1rem;
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Bloc 5 : Liste (fond clair type PSA, plus gros) */
.voyanz-hero-list {
    grid-column: 3;
    grid-row: 2;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 24px 24px;
    min-height: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.voyanz-hero-list-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.voyanz-hero-list-subtitle {
    font-size: 0.8rem;
    color: #5d5bbe;
    margin: 0 0 18px 0;
    font-weight: 700;
}

.voyanz-hero-list-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.voyanz-hero-list-items li {
    margin-bottom: 12px;
}

.voyanz-hero-list-items a {
    font-size: 0.95rem;
    font-weight: 600;
    color: #302b5e;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}

.voyanz-hero-list-items a:hover {
    color: var(--color-pink1);
}

.voyanz-hero-list-items a i {
    color: var(--color-pink1);
    width: 18px;
    text-align: center;
}

.voyanz-hero-list-btn {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    background: var(--color-pink1);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(252, 97, 148, 0.35);
}

.voyanz-hero-list-btn:hover {
    box-shadow: 0 6px 20px rgba(252, 97, 148, 0.45);
}

.voyanz-hero-list-btn:hover {
    background: var(--color-pink2);
    color: white;
}

/* Responsive : grille → colonne sur petit écran */
@media (max-width: 991px) {
    .voyanz-hero-grid-wrap {
        min-height: auto;
        padding: 20px 0;
    }

    .voyanz-hero-grid-wrap .voyanz-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 14px;
        min-height: auto;
    }

    .voyanz-hero-feature {
        grid-column: 1;
        grid-row: auto;
        min-height: 260px;
        padding: 28px 24px;
    }

    .voyanz-hero-feature-title {
        font-size: 1.45rem;
    }

    .voyanz-hero-promo,
    .voyanz-hero-voyants,
    .voyanz-hero-video,
    .voyanz-hero-list {
        grid-column: 1;
        grid-row: auto;
        min-height: 180px;
    }

    .voyanz-hero-block-link {
        min-height: 180px;
        padding: 20px 22px;
    }

    .voyanz-hero-voyants {
        min-height: 240px;
        padding: 20px 22px;
    }

    .voyanz-hero-list {
        min-height: auto;
        padding: 22px 24px;
    }

    .voyanz-hero-promo-amount {
        font-size: 2rem;
    }
}

.hoverblue:hover {
    color: #4b99ea;
    fill: #4b99ea;
}

/* ============================================
   LAYOUT PSA (slide, rechercher, promos, séances) – conservé si réutilisation
   ============================================ */
.voyanz-psa-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.voyanz-psa-columns {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.voyanz-psa-col-left {
    flex: 0 0 52%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.voyanz-psa-col-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 1. Slide (premier bloc vertical – type Featured News) */
.voyanz-psa-slide {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 320px;
    flex-shrink: 0;
}
.voyanz-psa-slide-link {
    display: block;
    position: relative;
    height: 100%;
    min-height: 320px;
    text-decoration: none;
    color: white;
}
.voyanz-psa-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.voyanz-psa-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 9, 70, 0.85) 0%, rgba(48, 43, 94, 0.6) 50%, transparent 100%);
}
.voyanz-psa-slide-content {
    position: relative;
    z-index: 2;
    padding: 36px 40px 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.voyanz-psa-slide-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--color-pink1);
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    width: fit-content;
}
.voyanz-psa-slide-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 14px 0;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.voyanz-psa-slide-cta {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(252, 97, 148, 0.8);
    border-radius: 8px;
    width: fit-content;
    transition: all 0.25s ease;
}
.voyanz-psa-slide-link:hover .voyanz-psa-slide-cta {
    background: var(--color-pink1);
    color: white;
}
.voyanz-psa-slide-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(252, 97, 148, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-pink1);
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
}
.voyanz-psa-slide-link:hover .voyanz-psa-slide-arrow {
    background: var(--color-pink1);
    color: white;
}

/* 2. Bloc "Rechercher un voyant" (type featured-player) */
.voyanz-psa-featured {
    flex: 1;
    min-height: 220px;
}
.voyanz-psa-featured-card {
    display: flex;
    background: rgba(29, 25, 62, 0.7);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.25);
    overflow: hidden;
    height: 100%;
    min-height: 220px;
}
.voyanz-psa-featured-left {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: rgba(12, 9, 70, 0.5);
}
.voyanz-psa-featured-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(252, 97, 148, 0.5);
    margin-bottom: 14px;
}
.voyanz-psa-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.voyanz-psa-featured-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(116, 125, 239, 0.3) 100%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 2rem;
}
.voyanz-psa-featured-cta {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-pink1);
    text-decoration: none;
    padding: 10px 16px;
    border: 2px solid rgba(252, 97, 148, 0.6);
    border-radius: 8px;
    text-align: center;
    transition: all 0.25s ease;
}
.voyanz-psa-featured-cta:hover {
    background: var(--color-pink1);
    color: white;
}
.voyanz-psa-featured-right {
    flex: 1;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.voyanz-psa-featured-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.voyanz-psa-featured-flag {
    border-radius: 4px;
}
.voyanz-psa-featured-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.voyanz-psa-featured-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
}
.voyanz-psa-featured-row span {
    color: rgba(255, 255, 255, 0.8);
}
.voyanz-psa-featured-row strong {
    color: var(--color-pink1);
}
.voyanz-psa-featured-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}

/* 3. Promo tiles (Meilleurs voyants, IA 24/24, Head-2-Head) */
.voyanz-psa-promos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.voyanz-psa-promo-tile {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 120px;
}
.voyanz-psa-promo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 120px;
    padding: 20px 50px 20px 20px;
    text-decoration: none;
    color: white;
}
.voyanz-psa-promo-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.voyanz-psa-promo-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 9, 70, 0.88) 0%, rgba(48, 43, 94, 0.7) 100%);
}
.voyanz-psa-promo-center {
    position: relative;
    z-index: 2;
}
.voyanz-psa-promo-label {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.voyanz-psa-promo-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(252, 97, 148, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-pink1);
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
}
.voyanz-psa-promo-link:hover .voyanz-psa-promo-arrow {
    background: var(--color-pink1);
    color: white;
}

/* 4. Séances de groupe à venir (type tournament-list) */
.voyanz-psa-sessions {
    flex: 1;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    background: rgba(29, 25, 62, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.2);
    overflow: hidden;
}
.voyanz-psa-sessions-head {
    padding: 20px 24px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.voyanz-psa-sessions-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.voyanz-psa-sessions-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}
.voyanz-psa-sessions-list {
    flex: 1;
    overflow-y: auto;
    max-height: 380px;
    padding: 12px 16px;
}
.voyanz-psa-session-card {
    margin-bottom: 10px;
}
.voyanz-psa-session-inner {
    display: block;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
}
.voyanz-psa-session-inner:hover {
    background: rgba(252, 97, 148, 0.2);
    border-color: rgba(252, 97, 148, 0.4);
}
.voyanz-psa-session-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.voyanz-psa-session-dates {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}
.voyanz-psa-session-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-pink1);
}
.voyanz-psa-session-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: white;
}
.voyanz-psa-session-row {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}
.voyanz-psa-sessions-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.voyanz-psa-sessions-viewall {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}
.voyanz-psa-sessions-viewall a {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-pink1);
    text-decoration: none;
}
.voyanz-psa-sessions-viewall a:hover {
    color: white;
}

@media (max-width: 991px) {
    .voyanz-psa-columns {
        flex-direction: column;
    }
    .voyanz-psa-col-left {
        flex: none;
    }
    .voyanz-psa-slide {
        min-height: 280px;
    }
    .voyanz-psa-featured-card {
        flex-direction: column;
        min-height: auto;
    }
    .voyanz-psa-featured-left {
        flex: none;
        flex-direction: row;
        gap: 16px;
        padding: 20px;
    }
    .voyanz-psa-featured-photo {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
    }
    .voyanz-psa-sessions-list {
        max-height: 280px;
    }
}

/* ============================================
   AGORA VIDEO CALL INTERFACE - MODERN DESIGN
   ============================================ */

.agora-video-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 600px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

/* Header avec statut et timer - Design moderne et professionnel */
.agora-video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    gap: 20px;
    flex-wrap: wrap;
}

.agora-video-status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 500;
    flex-wrap: wrap;
}

.agora-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.agora-status-text {
    font-size: 16px;
}

.agora-timer {
    font-family: 'Courier New', monospace;
    /* ⚠️ MASQUÉ : Compteur Agora masqué car non essentiel (le compteur Visioco est business-critique) */
    display: none !important;
}

/* ⚠️ PHASE 3 : Label "Appel vidéo" */
.agora-call-type {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 12px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Compteur client 1-to-1 : une ligne discrète (temps écoulé · restant · crédit) */
.agora-video-session-counter {
    margin-left: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.agora-video-session-counter #agora-video-session-elapsed,
.agora-video-session-counter #agora-video-session-remaining,
.agora-video-session-counter #agora-video-session-credit {
    font-weight: 600;
    color: #fff;
}

/* ⚠️ PHASE 3 : Statut des participants connectés (design moderne et professionnel) */
.agora-participants-status {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
}

.agora-participants-list {
    display: flex;
    align-items: center;
    gap: 0;
}

.agora-participant-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: white;
    background: rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.agora-participant-item:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.agora-participant-item i {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.agora-participant-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.agora-participant-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: white;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⚠️ PHASE 1 - PATCH 1.2 : Badges de statut (microphone/caméra) */
.agora-participant-status {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.agora-participant-status i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* Ordre volontaire : `pending` précède `active`/`inactive` pour que l'état réel
   reprenne la main dès qu'il arrive, même si `pending` n'a pas été retiré. */
.agora-participant-status .agora-status-mic.pending,
.agora-participant-status .agora-status-cam.pending {
    background-color: rgba(245, 158, 11, 0.9); /* Ambre — ordre envoyé, en attente du flux */
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.agora-participant-status .agora-status-mic.active,
.agora-participant-status .agora-status-cam.active {
    background-color: rgba(76, 175, 80, 0.9); /* Vert */
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.agora-participant-status .agora-status-mic.inactive,
.agora-participant-status .agora-status-cam.inactive {
    background-color: rgba(211, 47, 47, 0.9); /* Rouge */
    color: white;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
}

/* Animation pulse pour les badges actifs */
.agora-participant-status i.active {
    animation: pulse-status 2s infinite;
}

@keyframes pulse-status {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Style pour le texte "Session active" dans le header */
.agora-participants-status .agora-participant-status {
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: lowercase;
    transition: color 0.3s ease-in-out;
    opacity: 0.9;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0;
    flex-shrink: 0;
}

/* ⚠️ PHASE 1 : Indicateur de qualité réseau */
.agora-network-quality {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}

.agora-network-icon {
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

.agora-network-icon.fa-wifi {
    /* Icône wifi pour qualité excellente/bonne/moyenne */
    animation: pulse-wifi 2s ease-in-out infinite;
}

.agora-network-icon.fa-signal {
    /* Icône signal pour qualité faible/moyenne */
    transform: rotate(-90deg);
}

.agora-network-icon.fa-exclamation-triangle {
    /* Icône alerte pour qualité très faible */
    animation: pulse-alert 1s ease-in-out infinite;
}

@keyframes pulse-wifi {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes pulse-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.agora-network-label {
    font-weight: 500;
    font-size: 0.85rem;
}

.agora-btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.agora-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Zone principale des vidéos */
.agora-video-main {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Conteneur vidéo distante (participant) */
.agora-remote-video-container {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ⚠️ FIX ÉCRAN NOIR : Grid pour sessions de groupe */
.agora-group-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
    /* ⚠️ FIX ÉCRAN NOIR : S'assurer que le grid a une hauteur minimale visible */
    position: relative;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout single (1 participant distant) */
.agora-group-layout-single {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 20px !important;
    padding: 20px !important;
}

.agora-group-layout-single .agora-participant-wrapper {
    min-height: 450px;
}

/* ⚠️ MODE LIVE CLIENT : Ajuster l'affichage vidéo pour les clients en mode LIVE (meilleure visibilité) */
.agora-group-layout-live .agora-participant-wrapper {
    /* S'assurer que le wrapper a une taille définie */
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agora-group-layout-live .agora-remote-video-wrapper {
    /* S'assurer que le conteneur vidéo a une taille définie */
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agora-group-layout-live .agora-remote-video-wrapper video {
    /* Utiliser contain au lieu de cover pour voir toute la vidéo sans coupure */
    object-fit: contain !important;
    /* Ajuster la taille pour une meilleure visibilité */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout côte à côte (2 participants distants) */
.agora-group-layout-side-by-side {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 20px !important;
    padding: 20px !important;
}

.agora-group-layout-side-by-side .agora-participant-wrapper {
    min-height: 400px;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout 2x2 (3-4 participants) */
.agora-group-layout-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
}

.agora-group-layout-2x2 .agora-participant-wrapper {
    min-height: 250px;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout 3x3 (5-9 participants) */
.agora-group-layout-3x3 {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    overflow-y: auto !important;
}

.agora-group-layout-3x3 .agora-participant-wrapper {
    min-height: 180px;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout compact (10+ participants) */
.agora-group-layout-compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow-y: auto !important;
}

.agora-group-layout-compact .agora-participant-wrapper {
    min-height: 150px;
}

/* ⚠️ PATCH LAYOUT ADAPTATIF : Layout vide (message d'attente) */
.agora-group-layout-empty {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}

/* ⚠️ PATCH MODE PRÉSENTATEUR : Layout présentateur (présentateur en grand + miniatures) */
.agora-group-layout-presenter {
    grid-template-columns: 70% 30% !important;
    grid-template-rows: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
}

.agora-group-layout-presenter .agora-participant-wrapper.agora-presenter-active {
    min-height: 500px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    border: 3px solid rgba(76, 175, 80, 0.6) !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 10 !important;
}

.agora-thumbnails-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    max-height: 100% !important;
    padding: 4px !important;
}

.agora-thumbnails-container .agora-participant-wrapper {
    min-height: 120px !important;
    max-height: 120px !important;
    flex-shrink: 0 !important;
}

.agora-remote-video-container > div {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.agora-remote-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.agora-remote-video-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    box-sizing: border-box;
    overflow: hidden;
}

.agora-remote-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}

.agora-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    gap: 16px;
}

.agora-video-placeholder i {
    font-size: 64px;
    opacity: 0.5;
}

/* Vidéo locale (picture-in-picture) */
.agora-local-video-container {
    position: absolute !important;
    bottom: 100px;
    right: 20px;
    width: 240px !important;
    height: 180px !important;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
    transition: all 0.3s ease;
    display: block !important;
}

.agora-local-video-container:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
}

.agora-local-video-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative;
    z-index: 1;
    display: block !important;
}

.agora-local-video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    background: #000;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.agora-local-video-container > div {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agora-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 30%);
    padding: 8px;
    pointer-events: none;
    z-index: 2;
}

.agora-video-label {
    position: absolute;
    top: 8px;
    left: 8px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* ⚠️ PHASE 3 : Label avec nom sous les vidéos (local et remote) */
.agora-video-name-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10;
    border-radius: 0 0 12px 12px;
}

.agora-video-name-label i {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.agora-video-name-label span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Pour la vidéo locale, ajuster la position */
.agora-local-video-container .agora-video-name-label {
    padding: 8px 12px 6px;
    font-size: 0.8rem;
}

.agora-remote-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    /* ⚠️ FIX AFFICHAGE RAPIDE : Forcer la visibilité immédiate */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ⚠️ FIX AFFICHAGE RAPIDE : Forcer la visibilité des vidéos dans le wrapper */
.agora-remote-video-wrapper video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ⚠️ PHASE 1 - PATCH 1.1 : Wrapper pour participant (vidéo + nom) */
.agora-participant-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}

/* ⚠️ PATCH 1.7 : Mise en avant du participant qui parle (dominant speaker) */
.agora-participant-wrapper.dominant-speaker {
    transform: scale(1.05);
    border: 3px solid rgba(33, 155, 241, 0.8);
    box-shadow: 0 0 20px rgba(33, 155, 241, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.agora-participant-wrapper.dominant-speaker .agora-remote-video-wrapper {
    border-radius: 8px;
}

.agora-participant-wrapper.dominant-speaker video {
    border-radius: 8px;
}

/* ⚠️ PHASE 1 - PATCH 1.1 : Nom du participant en haut à gauche (overlay) */
.agora-participant-name {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    padding: 6px 12px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-radius: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    z-index: 10;
    max-width: calc(100% - 16px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ⚠️ PHASE 1 - PATCH 1.4 : Contrôles modérateur */
.agora-moderator-controls {
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
    vertical-align: middle;
    z-index: 20;
}

.agora-moderator-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.agora-moderator-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.agora-moderator-btn.active {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 1);
}

.agora-moderator-btn.active:hover {
    background: rgba(239, 68, 68, 0.9);
}

.agora-moderator-kick-btn {
  color: var(--color-red1);
}

.agora-moderator-kick-btn:hover {
  background-color: rgba(215, 47, 60, 0.2);
  color: var(--color-red1);
}

.agora-moderator-mute-btn {
    /* Style spécifique pour le bouton mute si nécessaire */
}

.agora-video-indicators {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    z-index: 3;
}

.agora-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    backdrop-filter: blur(5px);
}

.agora-indicator.active {
    background: rgba(74, 222, 128, 0.8);
}

.agora-indicator:not(.active) {
    background: rgba(239, 68, 68, 0.8);
}

/* Barre de contrôles flottante */
.agora-controls-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    border-radius: 30px;
}

.agora-controls-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.agora-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
    font-size: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1000;
}

.agora-control-btn i {
    font-size: 20px;
}

.agora-control-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.agora-control-btn:hover::before {
    width: 100%;
    height: 100%;
}

.agora-control-btn:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
}

.agora-control-btn.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.agora-control-btn:not(.active) {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.agora-control-btn-hangup {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    width: 60px;
    height: 60px;
    font-size: 22px;
}

.agora-control-btn-hangup:hover {
    background: #dc2626 !important;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.agora-control-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* États désactivés */
.agora-control-btn-mic:not(.active) i::before {
    content: "\f131"; /* fa-microphone-slash */
}

.agora-control-btn-cam:not(.active) i::before {
    content: "\f4d2"; /* fa-video-slash */
}

.agora-control-btn-volume:not(.active) i::before {
    content: "\f6a9"; /* fa-volume-xmark */
}

.agora-control-btn-switch {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.agora-control-btn-switch:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    transform: scale(1.1);
}

.agora-control-btn-switch i {
    animation: none;
    transition: transform 0.3s ease;
}

.agora-control-btn-switch:active i {
    transform: rotate(180deg);
}

/* Sélecteur de caméra (ex. webcam vs caméra externe USB) */
.agora-control-select {
    height: 44px;
    min-width: 120px;
    max-width: 180px;
    padding: 6px 10px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 13px;
    align-self: center;
}
.agora-control-select option {
    background: #1a1a1a;
    color: #fff;
}

.agora-control-btn-blur {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

.agora-control-btn-blur:hover {
    background: rgba(168, 85, 247, 0.3) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    transform: scale(1.1);
}

.agora-control-btn-blur.active {
    background: rgba(168, 85, 247, 0.4) !important;
    border-color: rgba(168, 85, 247, 0.7) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .agora-video-container {
        height: calc(100vh - 150px);
        min-height: 500px;
    }

    .agora-local-video-container {
        width: 160px;
        height: 120px;
        bottom: 80px;
        right: 10px;
    }

    .agora-control-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    .agora-control-btn i {
        font-size: 18px;
    }

    .agora-control-btn-hangup {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }
}

/* Animation d'entrée */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agora-video-container {
    animation: fadeIn 0.5s ease;
}

/* Amélioration pour le mode plein écran */
.agora-video-container:fullscreen {
    border-radius: 0;
}

.agora-video-container:fullscreen .agora-video-main {
    padding: 0;
}

/* ============================================
   MODE IMMERSIF VIDEO
   Masquer tout sauf la vidéo, plein écran
   Compatible mobile (dvh, safe-area)
   ============================================ */
body.voyanz-video-immersive .m-navbar,
body.voyanz-video-immersive section.m-navbar,
body.voyanz-video-immersive section.m-navbar.sticky-top,
body.voyanz-video-immersive .sticky-top:not(.agora-video-container),
body.voyanz-video-immersive section.toptop,
body.voyanz-video-immersive .voyanz-banner-phase-tests {
    display: none !important;
}
body.voyanz-video-immersive footer,
body.voyanz-video-immersive .voyanz-footer,
body.voyanz-video-immersive .site-footer {
    display: none !important;
}
body.voyanz-video-immersive [data-video-hidden="1"] {
    display: none !important;
}
body.voyanz-video-immersive {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
}
body.voyanz-video-immersive .mainpart2 {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
}
body.voyanz-video-immersive .mainpart2 > .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
body.voyanz-video-immersive #video-call-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}
body.voyanz-video-immersive #video-call-container > .col-12,
body.voyanz-video-immersive #video-call-container > .col,
body.voyanz-video-immersive #video-call-container > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}
body.voyanz-video-immersive .agora-video-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
}
@media (max-width: 768px) {
    body.voyanz-video-immersive {
        height: 100dvh !important;
        height: -webkit-fill-available !important;
    }
    body.voyanz-video-immersive .mainpart2 {
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        min-height: 0 !important;
    }
    body.voyanz-video-immersive .agora-video-container {
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    body.voyanz-video-immersive .agora-video-header {
        top: env(safe-area-inset-top, 0px) !important;
    }
    body.voyanz-video-immersive .agora-controls-bar {
        bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.voyanz-video-immersive .agora-local-video-container {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   LAYOUT MODERNE POUR SESSIONS 1-to-1
   Design plus spacieux et moderne
   ============================================ */

/* Layout moderne pour sessions 1-to-1 : Mode Cinéma */
.agora-layout-1to1 {
    /* Container principal plus grand */
    height: calc(100vh - 150px) !important;
    min-height: 700px !important;
}

.agora-layout-1to1 .agora-video-main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Vidéo distante : 85% de l'espace, centrée */
.agora-layout-1to1 .agora-remote-video-container {
    width: 85% !important;
    height: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    /* ⚠️ FIX AFFICHAGE RAPIDE : Forcer la visibilité et les dimensions */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* ⚠️ FIX AFFICHAGE RAPIDE : Forcer les dimensions du conteneur uservideo-video pour layout 1-to-1 */
.agora-layout-1to1 #uservideo-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
}

.agora-layout-1to1 .agora-remote-video-container:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

/* Vidéo locale : 20% de l'espace, positionnée en bas à droite (plus grande) */
.agora-layout-1to1 .agora-local-video-container {
    position: absolute !important;
    bottom: 120px !important;
    right: 30px !important;
    width: 320px !important;
    height: 240px !important;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(255, 255, 255, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
}

.agora-layout-1to1 .agora-local-video-container:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
}

/* Ajuster les contrôles pour le nouveau layout */
.agora-layout-1to1 .agora-controls-bar {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 400px;
}

/* Responsive pour layout 1-to-1 */
@media (max-width: 1200px) {
    .agora-layout-1to1 .agora-remote-video-container {
        width: 90% !important;
    }
    
    .agora-layout-1to1 .agora-local-video-container {
        width: 280px !important;
        height: 210px !important;
        bottom: 100px !important;
        right: 20px !important;
    }
}

@media (max-width: 768px) {
    .agora-layout-1to1 {
        height: calc(100vh - 120px) !important;
        min-height: 500px !important;
    }
    
    .agora-layout-1to1 .agora-remote-video-container {
        width: 95% !important;
        border-radius: 12px;
    }
    
    .agora-layout-1to1 .agora-local-video-container {
        width: 140px !important;
        height: 105px !important;
        bottom: 80px !important;
        right: 10px !important;
        border-width: 2px;
    }
    
    .agora-layout-1to1 .agora-controls-bar {
        bottom: 20px;
        min-width: 90%;
    }
}

@media (max-width: 480px) {
    .agora-layout-1to1 .agora-local-video-container {
        width: 110px !important;
        height: 82px !important;
        bottom: 75px !important;
        right: 8px !important;
        border-width: 1px;
    }
    .agora-layout-1to1 .agora-local-video-container .agora-video-label {
        font-size: 0.6rem;
    }
    .agora-layout-1to1 .agora-local-video-container .agora-video-overlay {
        padding: 2px 4px;
    }
}

/* ============================================
   PATCH 7 : LAYOUT ADAPTATIF SESSIONS GROUPE AGORA
   ============================================ */

/* Container principal pour le participant actif (dominant speaker) */
#agora-dominant-speaker {
    width: 100%;
    min-height: 400px;
    max-height: 60vh;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

#agora-dominant-speaker:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#agora-dominant-speaker .agora-remote-video-wrapper,
#agora-dominant-speaker .agora-local-video-wrapper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
}

#agora-dominant-speaker video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* Container pour les autres participants (grille) */
#agora-other-participants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
    padding: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

#agora-other-participants .agora-remote-video-wrapper,
#agora-other-participants .agora-local-video-wrapper {
    width: 100%;
    min-width: 200px;
    aspect-ratio: 16/9;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#agora-other-participants .agora-remote-video-wrapper:hover,
#agora-other-participants .agora-local-video-wrapper:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#agora-other-participants video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Badge "Parle" pour le dominant speaker */
.agora-speaking-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
    animation: pulse-speaking 2s ease-in-out infinite;
}

.agora-speaking-badge i {
    font-size: 0.85rem;
    animation: pulse-icon 1s ease-in-out infinite;
}

@keyframes pulse-speaking {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(74, 222, 128, 0.6);
        transform: scale(1.05);
    }
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Compteur de participants */
.agora-participants-count {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    font-size: 0.85rem;
    color: white;
    font-weight: 500;
    margin-left: 12px;
}

.agora-participants-count i {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.agora-participants-count span {
    font-weight: 600;
}

/* Animation de transition pour changement de dominant speaker */
.agora-video-wrapper-transitioning {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation pour déplacer vers dominant speaker */
@keyframes moveToDominant {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation pour déplacer vers grille */
@keyframes moveToGrid {
    0% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.agora-moving-to-dominant {
    animation: moveToDominant 0.5s ease-out;
}

.agora-moving-to-grid {
    animation: moveToGrid 0.5s ease-out;
}

/* Badge de rôle (host/audience) */
.agora-role-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.agora-role-badge.agora-role-host {
    background: rgba(59, 130, 246, 0.8);
    color: white;
}

.agora-role-badge.agora-role-audience {
    background: rgba(107, 114, 128, 0.8);
    color: white;
}

.agora-role-badge i {
    font-size: 0.7rem;
}

/* Barre de contrôles pour sessions groupe */
.agora-video-container:has(#agora-dominant-speaker) .agora-controls-bar {
    /* Ajuster la position pour ne pas masquer les participants */
    bottom: 10px;
    padding: 16px 24px;
}

/* Bouton pour basculer entre participants (optionnel) */
.agora-control-btn-participants {
    position: relative;
}

.agora-control-btn-participants::after {
    content: attr(data-count);
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ⚠️ PARTAGE ÉCRAN LIVE : Bouton de partage d'écran (visible uniquement pour professionnel en mode LIVE) */
.agora-control-btn-share-screen {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.agora-control-btn-share-screen:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.agora-control-btn-share-screen.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
}

.agora-control-btn-share-screen.active i {
    color: #3b82f6;
}

/* Conteneur pour l'écran partagé */
.agora-screen-share-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agora-screen-share-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agora-screen-share-wrapper video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Placeholder pour sessions groupe */
#agora-dominant-speaker:empty::before,
#agora-other-participants:empty::before {
    content: "En attente de participants...";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    font-weight: 500;
}

#agora-dominant-speaker:empty::before {
    height: 400px;
    font-size: 1.2rem;
}

/* ============================================
   RESPONSIVE DESIGN SESSIONS GROUPE
   ============================================ */

/* Tablette */
@media (max-width: 1024px) {
    #agora-dominant-speaker {
        min-height: 350px;
        max-height: 50vh;
    }
    
    #agora-other-participants {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    #agora-dominant-speaker {
        min-height: 200px;
        max-height: 35vh;
    }
    
    #agora-other-participants {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }
}

/* Mobile Portrait */
@media (max-width: 768px) {
    #agora-other-participants {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }
    
    #agora-dominant-speaker {
        min-height: 250px;
        max-height: 40vh;
    }
}

@media (max-width: 480px) {
    .agora-video-container {
        height: calc(100vh - 150px);
        min-height: 500px;
    }
    
    #agora-dominant-speaker {
        min-height: 200px;
        max-height: 30vh;
        margin-bottom: 12px;
    }
    
    #agora-other-participants {
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: calc(70vh - 200px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
    
    .agora-controls-bar {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .agora-control-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}

/* ============================================
   PAGE APPOINTMENTS - Design moderne
   ============================================ */
.appointments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.appointment-card {
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.9) 0%, rgba(13, 9, 76, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.appointment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(155, 51, 102, 0.4);
    border-color: rgba(155, 51, 102, 0.5);
}

.appointment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-date {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.appointment-date i {
    font-size: 1.5rem;
    color: #fc6194;
}

.appointment-date strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.appointment-date span {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

.appointment-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: rgba(252, 97, 148, 0.2);
    border-color: #fc6194;
    color: #fc6194;
    transform: scale(1.1);
}

.appointment-card-body {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.appointment-image {
    flex-shrink: 0;
}

.appointment-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.appointment-content {
    flex: 1;
    min-width: 0;
}

.appointment-title {
    margin-bottom: 12px;
}

.appointment-title h5 {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.appointment-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-type,
.badge-mode {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-type {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(155, 51, 102, 0.3) 100%);
    color: #fc6194;
    border: 1px solid rgba(252, 97, 148, 0.3);
}

.badge-mode {
    background: linear-gradient(135deg, rgba(116, 125, 239, 0.3) 0%, rgba(0, 157, 255, 0.3) 100%);
    color: #747def;
    border: 1px solid rgba(116, 125, 239, 0.3);
}

.appointment-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.appointment-participants {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-item,
.participants-list {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.participant-item i,
.participants-list i {
    color: #fc6194;
    font-size: 1rem;
}

.participant-item a {
    color: #747def;
    text-decoration: none;
    transition: color 0.3s ease;
}

.participant-item a:hover {
    color: #fc6194;
}

.participants-list ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.participants-list ul li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.participants-list ul li::before {
    content: "• ";
    color: #fc6194;
    margin-right: 6px;
}

.appointment-card-footer {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.appointment-card-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.appointment-card-footer .btn i {
    font-size: 0.9rem;
}

.appointment-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.appointment-empty i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    display: block;
}

.appointment-empty p {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive pour appointments */
@media (max-width: 768px) {
    .appointment-card-body {
        flex-direction: column;
    }
    
    .appointment-image {
        align-self: center;
    }
    
    .appointment-image img {
        width: 150px;
        height: 150px;
    }
    
    .appointment-card-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .appointment-card-footer {
        flex-direction: column;
    }
    
    .appointment-card-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   ONGLETS POUR APPOINTMENTS
   ============================================ */

.appointments-tabs {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

.appointments-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointments-tabs .nav-link i {
    font-size: 1rem;
}

.appointments-tabs .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(252, 97, 148, 0.5);
}

.appointments-tabs .nav-link.active {
    color: #fc6194;
    background: transparent;
    border-bottom-color: #fc6194;
}

.appointments-tabs .nav-link .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
}

.appointment-card-past {
    opacity: 0.8;
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.6) 0%, rgba(13, 9, 76, 0.6) 100%);
}

.appointment-card-past:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Responsive pour les onglets */
@media (max-width: 768px) {
    .appointments-tabs .nav-link {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .appointments-tabs .nav-link .badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}

/* ============================================
   BANDEAU "TOUTES LES SÉANCES" - Design mystique VOYANZ
   ============================================ */
.voyanz-sessions-section {
    position: relative;
    margin: 60px 0;
    padding: 50px 0;
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.95) 0%, rgba(13, 9, 76, 0.95) 50%, rgba(155, 51, 102, 0.95) 100%);
    border-radius: 24px;
    border: 2px solid rgba(252, 97, 148, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(252, 97, 148, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Effet d'étoiles en arrière-plan */
.voyanz-sessions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(252, 97, 148, 0.4), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(252, 97, 148, 0.3), transparent),
        radial-gradient(2px 2px at 90% 80%, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 200%;
    background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%;
    animation: voyanz-stars 20s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes voyanz-stars {
    0%, 100% {
        background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%;
    }
    50% {
        background-position: 100% 100%, 0% 100%, 50% 50%, 100% 0%, 0% 0%;
    }
}

/* Header du bandeau */
.voyanz-sessions-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.voyanz-sessions-title-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
}

.voyanz-sessions-icon {
    font-size: 3rem;
    color: #fc6194;
    text-shadow: 
        0 0 20px rgba(252, 97, 148, 0.8),
        0 0 40px rgba(252, 97, 148, 0.4);
    animation: voyanz-icon-pulse 3s ease-in-out infinite;
    margin-bottom: 10px;
}

@keyframes voyanz-icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

.voyanz-sessions-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(252, 97, 148, 0.3);
    position: relative;
}

.voyanz-sessions-underline {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fc6194, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(252, 97, 148, 0.6);
    margin-top: 10px;
    animation: voyanz-underline-glow 2s ease-in-out infinite;
}

@keyframes voyanz-underline-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(252, 97, 148, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(252, 97, 148, 0.9);
    }
}

.voyanz-sessions-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 20px;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Contenu des séances */
.voyanz-sessions-content {
    position: relative;
    z-index: 1;
    padding: 20px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .voyanz-sessions-section {
        margin: 40px 0;
        padding: 35px 0;
        border-radius: 16px;
    }
    
    .voyanz-sessions-icon {
        font-size: 2.2rem;
    }
    
    .voyanz-sessions-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    
    .voyanz-sessions-subtitle {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    
    .voyanz-sessions-underline {
        width: 80px;
    }
}

/* ============================================
   SECTIONS PROFESSIONNELS - Design uniforme VOYANZ
   ============================================ */
.voyanz-section {
    position: relative;
    margin: 50px 0;
    padding: 40px 0;
    overflow: hidden;
}

.voyanz-section-featured {
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.4) 0%, rgba(13, 9, 76, 0.4) 50%, rgba(155, 51, 102, 0.4) 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.voyanz-section-ai {
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.4) 0%, rgba(13, 9, 76, 0.4) 50%, rgba(33, 155, 241, 0.3) 100%);
    border-radius: 20px;
    border: 1px solid rgba(33, 155, 241, 0.3);
}

.voyanz-section-all {
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.3) 0%, rgba(13, 9, 76, 0.3) 50%, rgba(116, 125, 239, 0.3) 100%);
    border-radius: 20px;
    border: 1px solid rgba(116, 125, 239, 0.2);
}

/* Header des sections */
.voyanz-section-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.voyanz-section-title-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

.voyanz-section-icon {
    font-size: 2.5rem;
    text-shadow: 0 0 15px currentColor;
    animation: voyanz-icon-float 3s ease-in-out infinite;
    margin-bottom: 5px;
}

.voyanz-icon-gold {
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.4);
}

.voyanz-icon-cyan {
    color: #7dc4f5;
    text-shadow: 
        0 0 20px rgba(125, 196, 245, 0.8),
        0 0 40px rgba(125, 196, 245, 0.4);
}

.voyanz-icon-blue {
    color: #747def;
    text-shadow: 
        0 0 20px rgba(116, 125, 239, 0.8),
        0 0 40px rgba(116, 125, 239, 0.4);
}

@keyframes voyanz-icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.voyanz-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 255, 255, 0.1);
    position: relative;
}

.voyanz-section-underline {
    width: 100px;
    height: 3px;
    border-radius: 2px;
    margin-top: 8px;
    animation: voyanz-underline-shimmer 2s ease-in-out infinite;
}

.voyanz-underline-gold {
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.voyanz-underline-cyan {
    background: linear-gradient(90deg, transparent, #7dc4f5, transparent);
    box-shadow: 0 0 12px rgba(125, 196, 245, 0.6);
}

.voyanz-underline-blue {
    background: linear-gradient(90deg, transparent, #747def, transparent);
    box-shadow: 0 0 12px rgba(116, 125, 239, 0.6);
}

@keyframes voyanz-underline-shimmer {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

.voyanz-section-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    font-weight: 300;
    margin-top: 15px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.voyanz-section-content {
    position: relative;
    z-index: 1;
    padding: 10px 0;
}

/* Amélioration du hero section */
.cosmos3 {
    position: relative;
    overflow: hidden;
}

.cosmos3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(252, 97, 148, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(33, 155, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(116, 125, 239, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: voyanz-hero-glow 8s ease-in-out infinite;
}

@keyframes voyanz-hero-glow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.texthome {
    position: relative;
    z-index: 1;
}

.texthome h1 {
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(252, 97, 148, 0.3);
    animation: voyanz-title-fade-in 1s ease-out;
    color: white;
}

/* Homepage /fr/home : titre principal + sous-titre (tailles différentes) */
body#homepage .texthome .home-hero-main-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
body#homepage .texthome .home-hero-subtitle {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    margin-bottom: 0;
}

.texthome p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    line-height: 1.6;
}
.home-hero-description {
    white-space: pre-line;
}

/* Hero compact : logo au-dessus du titre + espacements resserrés */
body#homepage .texthome-compact {
    padding: 1.25rem 0 1rem 0;
}
body#homepage .home-hero-logo {
    display: block;
    max-width: 180px;
    height: auto;
    margin-bottom: 0.5rem;
}
body#homepage .texthome-compact .home-hero-main-title {
    margin-top: 0;
}
body#homepage .texthome-compact .home-hero-subtitle {
    margin-bottom: 0.5rem;
}
body#homepage .texthome-compact .home-hero-description {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.95rem;
}
body#homepage .texthome-compact .home-hero-cta {
    margin-bottom: 0;
}

@keyframes voyanz-title-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes voyanz-promo-pulse {
    0%, 100% {
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(252, 97, 148, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.4),
            0 0 60px rgba(252, 97, 148, 0.5);
        transform: scale(1.02);
    }
}

/* Responsive pour les sections */
@media (max-width: 768px) {
    .voyanz-section {
        margin: 35px 0;
        padding: 30px 0;
        border-radius: 16px;
    }
    
    .voyanz-section-icon {
        font-size: 2rem;
    }
    
    .voyanz-section-title {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }
    
    .voyanz-section-subtitle {
        font-size: 0.9rem;
        padding: 0 15px;
    }
    
    .voyanz-section-underline {
        width: 70px;
    }
    
    .promohome {
        padding: 15px;
        margin: 15px;
    }
    
    .promohome h3 {
        font-size: 2rem;
    }
}

/* ============================================
   PAGE PROFIL PROFESSIONNEL - Design simplifié VOYANZ
   ============================================ */
.voyanz-details-page {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* Conteneur : un peu plus large que le défaut Bootstrap, sans aller en fullscreen */
.voyanz-details-page .voyanz-details-container {
    max-width: 960px;
}
@media (min-width: 992px) {
.voyanz-details-page .voyanz-details-container {
    max-width: 1020px;
}
}
@media (min-width: 1200px) {
.voyanz-details-page .voyanz-details-container {
    max-width: 1180px;
}
}
@media (min-width: 1400px) {
.voyanz-details-page .voyanz-details-container {
    max-width: 1280px;
}
}

/* Bloc description professionnel : plus étroit que les deux blocs (Séances + Avis) en dessous */
.voyanz-details-page .voyanz-details-card-wrapper {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
.voyanz-details-page .voyanz-details-card-wrapper {
    max-width: 920px;
}
}
@media (min-width: 1200px) {
.voyanz-details-page .voyanz-details-card-wrapper {
    max-width: 960px;
}
}

/* Bouton retour simple */
.voyanz-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 12px;
    transition: color 0.2s ease;
}

.voyanz-back-button:hover {
    color: white;
}

/* Carte professionnel simplifiée */
.voyanz-professional-card-simple {
    background: rgba(29, 25, 62, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.28);
    padding: 25px;
}

.voyanz-professional-image-simple {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.voyanz-professional-image-simple img {
    width: 100%;
    height: auto;
    display: block;
}

.voyanz-professional-name-simple {
    color: white;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.voyanz-professional-name-simple .fa-heart {
    color: #fc6194;
    cursor: pointer;
    transition: transform 0.2s ease;
    font-size: 1.2rem;
}

.voyanz-professional-name-simple .fa-heart:hover {
    transform: scale(1.1);
}

.details-availability-simple {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    padding: 8px 12px;
    background: rgba(33, 155, 241, 0.15);
    border-radius: 8px;
    border-left: 3px solid #219bf1;
    display: inline-block;
}

/* Barre de statut sur la fiche détail professionnel */
.details-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.details-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.details-status-online {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.details-status-online .details-status-dot {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
    animation: cardproStatusPulse 2s ease-in-out infinite;
}
.details-status-busy {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.details-status-busy .details-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}
.details-status-offline {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.details-status-offline .details-status-dot {
    background: #ef4444;
}
.details-status-text {
    line-height: 1.3;
}

/* Responsive tablette — barre de statut fiche détail */
@media (max-width: 991px) {
    .details-status {
        display: flex;
        font-size: 0.85rem;
        padding: 9px 14px;
    }
}

/* Responsive mobile — barre de statut fiche détail */
@media (max-width: 576px) {
    .details-status {
        font-size: 0.78rem;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 10px;
    }
    .details-status-dot {
        width: 8px;
        height: 8px;
    }
}

/* Bloc boutons chat / appel / vidéo : actions principales, bien visibles */
.details-call-icons {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}
.details-call-icons-item {
    width: 100%;
}
.details-call-icons-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: rgba(33, 155, 241, 0.12);
    border: 1px solid rgba(33, 155, 241, 0.25);
    text-decoration: none;
    color: #fff;
    transition: all 0.25s ease;
}
.details-call-icons-item a:hover {
    transform: translateY(-2px);
}
.details-call-icons-item .bigicon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: box-shadow 0.2s ease;
}
/* Chat : bleu */
.details-call-icons-item.details-item-chat a {
    background: linear-gradient(135deg, rgba(33, 155, 241, 0.3), rgba(26, 127, 212, 0.2));
    border-color: rgba(33, 155, 241, 0.7);
}
.details-call-icons-item.details-item-chat a:hover {
    background: linear-gradient(135deg, rgba(33, 155, 241, 0.45), rgba(26, 127, 212, 0.35));
    border-color: rgba(33, 155, 241, 0.9);
    box-shadow: 0 6px 20px rgba(33, 155, 241, 0.4);
}
.details-call-icons-item.details-item-chat .bigicon {
    background: linear-gradient(135deg, #219bf1, #1a7fd4);
    box-shadow: 0 3px 12px rgba(33, 155, 241, 0.55);
}
/* Appel : vert */
.details-call-icons-item.details-item-phone a {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.2));
    border-color: rgba(46, 204, 113, 0.7);
}
.details-call-icons-item.details-item-phone a:hover {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.45), rgba(39, 174, 96, 0.35));
    border-color: rgba(46, 204, 113, 0.9);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}
.details-call-icons-item.details-item-phone .bigicon {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 3px 12px rgba(46, 204, 113, 0.55);
}
/* Vidéo : violet */
.details-call-icons-item.details-item-video a {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.2));
    border-color: rgba(155, 89, 182, 0.7);
}
.details-call-icons-item.details-item-video a:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.45), rgba(142, 68, 173, 0.35));
    border-color: rgba(155, 89, 182, 0.9);
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
}
.details-call-icons-item.details-item-video .bigicon {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    box-shadow: 0 3px 12px rgba(155, 89, 182, 0.55);
}
.details-call-icons-offline {
    cursor: not-allowed;
}
.details-call-icons-offline .details-call-icons-item a {
    opacity: 1;
    pointer-events: none;
    filter: none;
    transform: none !important;
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.details-call-icons-offline .details-call-icons-item a:hover {
    transform: none !important;
}
.details-call-icons-offline .details-item-chat a:hover {
    background: linear-gradient(135deg, rgba(33, 155, 241, 0.3), rgba(26, 127, 212, 0.2));
    border-color: rgba(33, 155, 241, 0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.details-call-icons-offline .details-item-phone a:hover {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.2));
    border-color: rgba(46, 204, 113, 0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.details-call-icons-offline .details-item-video a:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.2));
    border-color: rgba(155, 89, 182, 0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.details-session-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.details-session-label {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.details-session-price {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 400;
}
@media (min-width: 1200px) {
    .details-call-icons-item a {
        padding: 0.7rem 1.15rem;
        gap: 0.85rem;
    }
    .details-call-icons-item .bigicon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 1.25rem;
    }
    .details-session-label {
        font-size: 1rem;
    }
    .details-session-price {
        font-size: 0.85rem;
    }
}

/* Boutons « M'alertez par SMS » et « Prendre un rendez-vous » */
.details-call-buttons-wrapper {
    width: 100%;
    min-width: 0;
    margin-top: 3rem;
}
.details-call-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}
.details-call-buttons .details-call-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.12), rgba(180, 60, 120, 0.12));
    border: 1px solid rgba(252, 97, 148, 0.25);
    text-decoration: none;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 400;
    white-space: normal;
    text-align: left;
    transition: all 0.25s ease;
    box-shadow: none;
}
.details-call-buttons .details-call-btn:hover,
.details-call-buttons .details-call-btn:focus {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.22), rgba(180, 60, 120, 0.22));
    border-color: rgba(252, 97, 148, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(252, 97, 148, 0.2);
}
.details-call-buttons .details-call-btn:focus-visible {
    outline: 2px solid rgba(252, 97, 148, 0.5);
    outline-offset: 2px;
}
.details-call-btn .details-btn-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #fc6194, #b43c78);
    box-shadow: 0 3px 10px rgba(252, 97, 148, 0.35);
    flex-shrink: 0;
}
@media (min-width: 1200px) {
    .details-call-buttons .details-call-btn {
        padding: 0.65rem 1.15rem;
        font-size: 0.9rem;
    }
    .details-call-btn .details-btn-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.05rem;
    }
}

.text-pink {
    color: #fc6194;
}

/* Sections simples */
.voyanz-simple-section {
    background: rgba(29, 25, 62, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(252, 97, 148, 0.15);
    padding: 30px;
    margin-bottom: 30px;
}

.voyanz-simple-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(252, 97, 148, 0.3);
}

.voyanz-simple-title a {
    color: inherit;
    text-decoration: none;
}

.voyanz-simple-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.voyanz-simple-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.7;
}

/* Colonne droite page détail : avis clients */
@media (min-width: 992px) {
.voyanz-details-reviews-sidebar-wrapper {
    position: sticky;
    top: 100px;
}
}
.voyanz-details-reviews-sidebar .voyanz-simple-title {
    margin-bottom: 1rem;
}
.voyanz-details-reviews-sidebar .voyanz-reviews-empty {
    color: #fff;
}
.voyanz-reviews-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.voyanz-review-sidebar-item {
    background: rgba(29, 25, 62, 0.35);
    border-radius: 12px;
    border: 1px solid rgba(252, 97, 148, 0.12);
    padding: 14px;
}
.voyanz-review-sidebar-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}
.voyanz-review-sidebar-author {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.voyanz-review-sidebar-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 6px;
}

/* Séances en grille simple */
.voyanz-sessions-simple {
    margin-bottom: 30px;
}

.voyanz-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.voyanz-session-item {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(252, 97, 148, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    color: #000;
}

.voyanz-session-item:hover {
    border-color: rgba(252, 97, 148, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.voyanz-session-item-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.voyanz-session-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voyanz-session-item--club {
    border-color: rgba(155, 51, 102, 0.45);
    box-shadow: 0 4px 18px rgba(155, 51, 102, 0.18);
}

.voyanz-session-item--club:hover {
    border-color: rgba(155, 51, 102, 0.65);
    box-shadow: 0 6px 22px rgba(155, 51, 102, 0.28);
}

.voyanz-club-badge--card {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, rgba(90, 20, 70, 0.92) 0%, rgba(155, 51, 102, 0.92) 100%);
    border: 1px solid rgba(255, 200, 120, 0.55);
    border-radius: 999px;
    line-height: 1.3;
}

.voyanz-session-item-content {
    padding: 20px;
}

.voyanz-session-item-date {
    color: rgba(0, 0, 0, 0.8);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.voyanz-session-item-price {
    color: #000;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.voyanz-session-item-name {
    color: #000;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.voyanz-session-item-description {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .voyanz-professional-card-simple {
        padding: 20px;
    }
    
    .voyanz-professional-name-simple {
        font-size: 1.5rem;
    }
    
    .voyanz-simple-section {
        padding: 20px;
    }
    
    .voyanz-simple-title {
        font-size: 1.3rem;
    }
    
    .voyanz-sessions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BLOC UNIFIÉ PROFESSIONNELS - Design optimisé VOYANZ
   ============================================ */
.voyanz-professionals-unified {
    position: relative;
    margin: 40px 0;
    padding: 35px 0;
    background: linear-gradient(135deg, rgba(29, 25, 62, 0.5) 0%, rgba(13, 9, 76, 0.5) 50%, rgba(155, 51, 102, 0.4) 100%);
    border-radius: 20px;
    border: 1px solid rgba(252, 97, 148, 0.25);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(252, 97, 148, 0.1);
    overflow: hidden;
}

.voyanz-professionals-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(252, 97, 148, 0.2), transparent),
        radial-gradient(1px 1px at 80% 20%, rgba(125, 196, 245, 0.15), transparent);
    background-size: 200% 200%;
    background-position: 0% 0%, 100% 0%, 50% 50%;
    animation: voyanz-stars 25s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.4;
}

/* Sous-sections à l'intérieur du bloc unifié */
.voyanz-professionals-subsection {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.voyanz-professionals-subsection:last-child {
    margin-bottom: 0;
}

.voyanz-professionals-subsection-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.voyanz-professionals-subsection-icon {
    font-size: 1.8rem;
    text-shadow: 0 0 12px currentColor;
    animation: voyanz-icon-float 3s ease-in-out infinite;
}

.voyanz-professionals-subsection-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 255, 255, 0.1);
}

/* Responsive pour le bloc unifié */
@media (max-width: 768px) {
    .voyanz-professionals-unified {
        margin: 30px 0;
        padding: 25px 0;
        border-radius: 16px;
    }
    
    .voyanz-professionals-subsection {
        margin-bottom: 30px;
    }
    
    .voyanz-professionals-subsection-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
        flex-direction: column;
        gap: 8px;
    }
    
    .voyanz-professionals-subsection-icon {
        font-size: 1.5rem;
    }
    
    .voyanz-professionals-subsection-title {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
}

/* ============================================
   PAGE HOME-NEW : Layout moins ordonné, filigranes, détails
   ============================================ */
.voyanz-professionals-relaxed {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(252, 97, 148, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 80% 80%, rgba(116, 125, 239, 0.1) 0%, transparent 45%),
        linear-gradient(135deg, rgba(29, 25, 62, 0.6) 0%, rgba(13, 9, 76, 0.6) 50%, rgba(155, 51, 102, 0.35) 100%);
}

.voyanz-professionals-relaxed::before {
    opacity: 0.65;
    background-image: 
        radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 85% 75%, rgba(252, 97, 148, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(125, 196, 245, 0.25), transparent);
}

.voyanz-professionals-relaxed .voyanz-filigrane {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 50%;
    max-width: 400px;
    height: 80%;
    background: url('/images/voyanz/forme3.svg') no-repeat center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}

.voyanz-professionals-relaxed .voyanz-filigrane::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 60%;
    max-width: 350px;
    height: 60%;
    background: url('/images/voyanz/forme1.svg') no-repeat center;
    background-size: contain;
    opacity: 0.05;
}

.voyanz-professionals-inner {
    position: relative;
    z-index: 1;
}

/* En-têtes de sous-section : moins rigides, avec filigrane et détail */
.voyanz-subsection-header-relaxed {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: none;
    position: relative;
}

.voyanz-subsection-header-relaxed .voyanz-subsection-filigrane {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    opacity: 0.07;
    color: var(--color-pink1);
    pointer-events: none;
}

.voyanz-subsection-header-relaxed .voyanz-subsection-filigrane.voyanz-filigrane-robot {
    color: var(--color-blue1);
}

.voyanz-subsection-header-relaxed .voyanz-professionals-subsection-icon {
    margin-right: 4px;
}

.voyanz-subsection-header-relaxed .voyanz-professionals-subsection-title {
    margin-right: 12px;
}

.voyanz-subsection-detail {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none;
    letter-spacing: 0.5px;
    padding-left: 12px;
    border-left: 2px solid rgba(252, 97, 148, 0.5);
}

/* Tagline sous les titres de section (côté mystique) */
.voyanz-subsection-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    margin: -8px 0 22px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid rgba(252, 97, 148, 0.2);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Titre de section en dégradé (moins scolaire) */
.voyanz-professionals-relaxed .voyanz-professionals-subsection-title {
    background: linear-gradient(135deg, #fff 0%, rgba(252, 97, 148, 0.95) 50%, rgba(125, 196, 245, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Wrapper carte mystique */
.voyanz-card-mystic-wrapper {
    position: relative;
    max-width: 100%;
    min-width: 0;
}

.voyanz-card-mystic-wrapper > .col-md-6,
.voyanz-card-mystic-wrapper > .mb-5 {
    margin-bottom: 0;
}

/* Overlay mystique sur l'image professionnel (cosmique) */
.voyanz-card-mystic-wrapper .cardpro-img {
    position: relative;
}

.voyanz-card-mystic-wrapper .cardpro-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(48, 43, 94, 0.4) 60%, rgba(155, 51, 102, 0.6) 100%);
    pointer-events: none;
}

.voyanz-card-mystic-wrapper.voyanz-card-ia .cardpro-img::before {
    background: linear-gradient(180deg, transparent 25%, rgba(33, 155, 241, 0.25) 70%, rgba(48, 43, 94, 0.6) 100%);
}

/* Bordure et glow mystique sur la carte */
.voyanz-professionals-relaxed .voyanz-card-mystic-wrapper .cardpro {
    border: 1px solid rgba(252, 97, 148, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.voyanz-professionals-relaxed .voyanz-card-mystic-wrapper .cardpro:hover {
    border-color: rgba(252, 97, 148, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(252, 97, 148, 0.15);
}

.voyanz-professionals-relaxed .voyanz-card-ia .cardpro:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(33, 155, 241, 0.2);
}

/* Extras : tagline + mini détails en bas de carte */
.voyanz-card-mystic-extras {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
    z-index: 2;
}

.voyanz-card-tagline {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(12, 9, 70, 0.75);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(252, 97, 148, 0.35);
}

.voyanz-card-mini-details {
    display: flex;
    gap: 8px;
    font-size: 0.7rem;
    color: rgba(252, 97, 148, 0.9);
}

.voyanz-card-mini-details i {
    opacity: 0.9;
}

.voyanz-card-mini-details.voyanz-mini-ia i {
    color: rgba(125, 196, 245, 0.95);
}

.voyanz-card-badge-24 {
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, var(--color-pink1) 0%, var(--color-blue4) 100%);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

/* Badge spécialités plus mystique */
.voyanz-professionals-relaxed .voyanz-card-mystic-wrapper .cardpro-specialities {
    background: linear-gradient(90deg, rgba(252, 97, 148, 0.85) 0%, rgba(155, 51, 102, 0.8) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.voyanz-professionals-relaxed .voyanz-card-ia .cardpro-specialities {
    background: linear-gradient(90deg, rgba(33, 155, 241, 0.8) 0%, rgba(116, 125, 239, 0.75) 100%);
}

/* Grille asymétrique : première carte en grand (2 lignes), reste en colonne */
.voyanz-cards-asymmetric {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-auto-rows: minmax(280px, auto);
    gap: 22px;
    margin-left: 0;
    margin-right: 0;
}

.voyanz-cards-asymmetric > * {
    max-width: 100%;
    min-width: 0;
}

.voyanz-cards-asymmetric > *:first-child {
    grid-row: span 2;
}

.voyanz-cards-asymmetric > *:first-child .cardpro {
    height: 100%;
    min-height: 582px;
}

.voyanz-cards-asymmetric > *:first-child .cardpro-img {
    height: 320px;
}

/* Cartes IA : décalage léger pour casser la rigidité */
.voyanz-cards-ia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
}

.voyanz-cards-ia > *:nth-child(1) {
    margin-top: 0;
}

.voyanz-cards-ia > *:nth-child(2) {
    margin-top: 12px;
}

.voyanz-cards-ia > *:nth-child(3) {
    margin-top: 24px;
}

.voyanz-cards-ia > * {
    max-width: 100%;
    min-width: 0;
}

/* Tous les professionnels : grille décalée (masonry-like) */
.voyanz-cards-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px 24px;
    margin-left: 0;
    margin-right: 0;
}

.voyanz-cards-masonry > *:nth-child(3n+1) {
    margin-top: 0;
}

.voyanz-cards-masonry > *:nth-child(3n+2) {
    margin-top: 16px;
}

.voyanz-cards-masonry > *:nth-child(3n) {
    margin-top: 8px;
}

.voyanz-cards-masonry > * {
    max-width: 100%;
    min-width: 0;
}

/* Cartes : légères variations pour moins rigide */
.voyanz-professionals-relaxed .cardpro {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.voyanz-professionals-relaxed .voyanz-cards-asymmetric > *:nth-child(1) .cardpro {
    border-radius: 18px;
}

.voyanz-professionals-relaxed .voyanz-cards-asymmetric > *:nth-child(2) .cardpro {
    border-radius: 14px 18px 18px 14px;
}

.voyanz-professionals-relaxed .voyanz-cards-asymmetric > *:nth-child(3) .cardpro {
    border-radius: 18px 14px 14px 18px;
}

.voyanz-professionals-relaxed .cardpro-content:hover {
    transform: scale(1.03);
}

@media (max-width: 991px) {
    .voyanz-cards-asymmetric {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .voyanz-cards-asymmetric > *:first-child {
        grid-row: span 1;
    }

    .voyanz-cards-asymmetric > *:first-child .cardpro {
        min-height: 310px;
    }

    .voyanz-cards-asymmetric > *:first-child .cardpro-img {
        height: 183px;
    }

    .voyanz-cards-ia > *:nth-child(2),
    .voyanz-cards-ia > *:nth-child(3) {
        margin-top: 0;
    }

    .voyanz-cards-masonry > *:nth-child(3n+2),
    .voyanz-cards-masonry > *:nth-child(3n) {
        margin-top: 0;
    }
}

/* ============================================
   MESSAGES D'ALERTE (SUCCÈS/ERREUR/INFO/WARNING)
   Style uniforme pour toutes les notifications Voyanz
   ============================================ */
.voyanz-message-alert {
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: voyanz-message-slide-in-fixed 0.4s ease-out;
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10000 !important;
    min-width: 350px;
    max-width: 90%;
    margin: 0 !important;
    overflow: hidden;
}

.voyanz-message-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.6;
}

@keyframes voyanz-message-slide-in-fixed {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.voyanz-message-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.voyanz-message-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: voyanz-message-icon-pulse 2s ease-in-out infinite;
}

@keyframes voyanz-message-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.voyanz-message-text {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.voyanz-message-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0.7;
    flex-shrink: 0;
}

.voyanz-message-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* Message de succès - Style uniforme */
.voyanz-message-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.95) 0%, rgba(56, 142, 60, 1) 100%);
    border: 3px solid rgba(102, 187, 106, 1);
    color: #ffffff;
    box-shadow: 0 6px 25px rgba(76, 175, 80, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.voyanz-message-success::before {
    background: linear-gradient(90deg, transparent, #66bb6a, transparent);
}

.voyanz-message-success .voyanz-message-icon {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/* Message d'erreur - Style uniforme */
.voyanz-message-error {
    background: linear-gradient(135deg, rgba(215, 47, 60, 0.95) 0%, rgba(183, 28, 28, 1) 100%);
    border: 3px solid rgba(255, 82, 82, 1);
    color: #ffffff;
    box-shadow: 0 6px 25px rgba(215, 47, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.voyanz-message-error::before {
    background: linear-gradient(90deg, transparent, #ff5252, transparent);
}

.voyanz-message-error .voyanz-message-icon {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/* Message d'information - Style uniforme */
.voyanz-message-info {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.95) 0%, rgba(25, 118, 210, 1) 100%);
    border: 3px solid rgba(100, 181, 246, 1);
    color: #ffffff;
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.voyanz-message-info::before {
    background: linear-gradient(90deg, transparent, #64b5f6, transparent);
}

.voyanz-message-info .voyanz-message-icon {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/* Message d'avertissement - Style uniforme */
.voyanz-message-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.95) 0%, rgba(245, 124, 0, 1) 100%);
    border: 3px solid rgba(255, 193, 7, 1);
    color: #ffffff;
    box-shadow: 0 6px 25px rgba(255, 152, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.voyanz-message-warning::before {
    background: linear-gradient(90deg, transparent, #ffc107, transparent);
}

.voyanz-message-warning .voyanz-message-icon {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/* Responsive - Notifications */
@media (max-width: 768px) {
    .voyanz-message-alert {
        padding: 14px 16px;
        min-width: 280px;
        max-width: 95%;
        top: 70px !important;
    }
    
    .voyanz-message-icon {
        font-size: 1.3rem;
    }
    
    .voyanz-message-text {
        font-size: 0.9rem;
    }
}

/* ============================================
   FORMULAIRE DISPONIBILITÉS - Design amélioré
   ============================================ */
.voyanz-disponibilities-form {
    margin-top: 30px;
}

.voyanz-form-step {
    background: linear-gradient(135deg, rgba(70, 15, 79, 0.4) 0%, rgba(155, 51, 102, 0.3) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.voyanz-form-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #fc6194 0%, #9b3366 100%);
    opacity: 0.6;
}

.voyanz-form-step:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(252, 97, 148, 0.2);
    transform: translateY(-2px);
}

.voyanz-step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.voyanz-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(252, 97, 148, 0.4);
    position: relative;
    z-index: 1;
}

.voyanz-step-content {
    flex: 1;
}

.voyanz-step-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voyanz-step-icon {
    color: #fc6194;
    font-size: 1.1rem;
}

.voyanz-step-description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.voyanz-step-body {
    margin-top: 16px;
}

/* Sélecteur de jours */
.voyanz-days-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.voyanz-day-checkbox {
    flex: 1;
    min-width: 100px;
    position: relative;
}

.voyanz-day-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.voyanz-day-checkbox label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
    color: white;
    font-weight: 500;
}

.voyanz-day-checkbox label:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(252, 97, 148, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.3);
}

.voyanz-day-checkbox input[type="checkbox"]:checked + label {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(155, 51, 102, 0.3) 100%);
    border-color: #fc6194;
    box-shadow: 0 4px 15px rgba(252, 97, 148, 0.4);
}

.voyanz-day-name {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.voyanz-day-full {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: capitalize;
}

/* Sélecteur de communication */
.voyanz-communication-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.voyanz-comm-checkbox {
    flex: 1;
    min-width: 120px;
    position: relative;
}

.voyanz-comm-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.voyanz-comm-checkbox label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    color: white;
    font-weight: 500;
    font-size: 0.95rem;
}

.voyanz-comm-checkbox label:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(252, 97, 148, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.3);
}

.voyanz-comm-checkbox input[type="checkbox"]:checked + label {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.3) 0%, rgba(155, 51, 102, 0.3) 100%);
    border-color: #fc6194;
    box-shadow: 0 4px 15px rgba(252, 97, 148, 0.4);
}

.voyanz-comm-icon {
    font-size: 1.2rem;
    color: #fc6194;
}

.voyanz-comm-checkbox input[type="checkbox"]:checked + label .voyanz-comm-icon {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Actions du formulaire */
.voyanz-form-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.voyanz-btn-primary,
.voyanz-btn-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voyanz-btn-primary {
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%);
    border: 2px solid #fc6194;
    color: white;
    box-shadow: 0 4px 15px rgba(252, 97, 148, 0.4);
}

.voyanz-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(252, 97, 148, 0.6);
    color: white;
}

.voyanz-btn-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.voyanz-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .voyanz-form-step {
        padding: 20px 16px;
        margin-bottom: 20px;
    }
    
    .voyanz-step-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .voyanz-step-number {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .voyanz-step-title {
        font-size: 1.1rem;
    }
    
    .voyanz-day-checkbox {
        min-width: calc(50% - 6px);
    }
    
    .voyanz-comm-checkbox {
        min-width: 100%;
    }
    
    .voyanz-form-actions {
        flex-direction: column;
    }
    
    .voyanz-btn-primary,
    .voyanz-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   SECTIONS DISPONIBILITÉS - Design amélioré
   ============================================ */
.voyanz-disponibilities-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.voyanz-section-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.voyanz-section-icon-main {
    font-size: 1.75rem;
    color: #fc6194;
    text-shadow: 0 0 10px rgba(252, 97, 148, 0.5);
}

.voyanz-section-title-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Liste des disponibilités */
.voyanz-disponibilities-list {
    margin-top: 20px;
}

.voyanz-disponibility-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.voyanz-disponibility-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9b3366 0%, #6b2247 100%);
    opacity: 0.85;
}

.voyanz-disponibility-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.voyanz-disponibility-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.voyanz-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voyanz-badge-include {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(56, 142, 60, 0.3) 100%);
    border: 1px solid rgba(76, 175, 80, 0.6);
    color: #a5d6a7;
}

.voyanz-badge-exclude {
    background: linear-gradient(135deg, rgba(215, 47, 60, 0.3) 0%, rgba(183, 28, 28, 0.3) 100%);
    border: 1px solid rgba(215, 47, 60, 0.6);
    color: #ff6b7a;
}

.voyanz-badge-active-now {
    background: linear-gradient(135deg, rgba(33, 155, 241, 0.35) 0%, rgba(25, 118, 210, 0.35) 100%);
    border: 1px solid rgba(33, 155, 241, 0.7);
    color: #64b5f6;
    font-size: 0.75rem;
}

.voyanz-disponibility-card .voyanz-badge-include {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #2e7d32;
}

.voyanz-disponibility-card .voyanz-badge-exclude {
    background: rgba(215, 47, 60, 0.1);
    border: 1px solid rgba(215, 47, 60, 0.5);
    color: #c62828;
}

.voyanz-disponibility-card .voyanz-badge-active-now {
    background: rgba(33, 155, 241, 0.12);
    border: 1px solid rgba(33, 155, 241, 0.5);
    color: #1565c0;
    font-size: 0.75rem;
}

.voyanz-disponibility-card-active {
    border-color: rgba(33, 155, 241, 0.35);
    box-shadow: 0 0 0 1px rgba(33, 155, 241, 0.15);
}

.voyanz-disponibility-header {
    flex-wrap: wrap;
    gap: 8px;
}

.voyanz-disponibility-actions {
    display: flex;
    gap: 8px;
}

.voyanz-disponibility-card .voyanz-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #37474f;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.voyanz-disponibility-card .voyanz-action-btn:hover {
    transform: translateY(-2px);
    color: #1a237e;
}

.voyanz-action-edit:hover {
    background: rgba(33, 155, 241, 0.3);
    border-color: #219bf1;
    box-shadow: 0 4px 12px rgba(33, 155, 241, 0.4);
}

.voyanz-disponibility-card .voyanz-action-edit:hover {
    color: #1565c0;
}

.voyanz-action-delete:hover {
    background: rgba(215, 47, 60, 0.3);
    border-color: #d72f3c;
    box-shadow: 0 4px 12px rgba(215, 47, 60, 0.4);
}

.voyanz-disponibility-card .voyanz-action-delete:hover {
    color: #c62828;
}

.voyanz-disponibility-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.voyanz-disponibility-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.voyanz-disponibility-item-icon {
    color: #9b3366;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.voyanz-disponibility-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voyanz-disponibility-item-label {
    font-size: 0.75rem;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.voyanz-disponibility-item-value {
    font-size: 0.95rem;
    color: #263238;
    font-weight: 500;
}

.voyanz-comm-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.voyanz-disponibility-card .voyanz-comm-badge-icon {
    font-size: 1.1rem;
    color: #9b3366;
    padding: 6px;
    background: rgba(155, 51, 102, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.voyanz-comm-badge-icon:hover {
    background: rgba(252, 97, 148, 0.3);
    transform: scale(1.1);
}

/* Vue calendrier (liste détaillée) - thème blanc */
.voyanz-calendar-disponibilities-list {
    margin-top: 20px;
}

.voyanz-calendar-date-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.voyanz-calendar-date-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9b3366 0%, #6b2247 100%);
    opacity: 0.85;
}

.voyanz-calendar-date-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.voyanz-calendar-date-today {
    border-color: rgba(155, 51, 102, 0.35);
    box-shadow: 0 0 0 1px rgba(155, 51, 102, 0.2);
}

.voyanz-calendar-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.voyanz-calendar-date-header i {
    color: #9b3366;
    font-size: 1.3rem;
}

.voyanz-calendar-date-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #263238;
    text-transform: capitalize;
    flex: 1;
}

.voyanz-calendar-date-intervals {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.voyanz-calendar-interval {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    transition: all 0.3s ease;
}

.voyanz-calendar-interval:hover {
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(155, 51, 102, 0.3);
}

.voyanz-calendar-interval-time {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263238;
    font-weight: 600;
    font-size: 0.95rem;
}

.voyanz-calendar-interval-time i {
    color: #9b3366;
    font-size: 1rem;
}

.voyanz-calendar-interval-modes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.voyanz-calendar-mode-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(155, 51, 102, 0.1);
    border-radius: 8px;
    color: #9b3366;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.voyanz-calendar-mode-badge:hover {
    background: rgba(155, 51, 102, 0.18);
    transform: scale(1.1);
}

.voyanz-calendar-date-card .voyanz-badge-include {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #2e7d32;
}

/* Calendrier FullCalendar (ancien - à supprimer si plus utilisé) */
.voyanz-calendar-wrapper {
    background: linear-gradient(135deg, rgba(70, 15, 79, 0.4) 0%, rgba(155, 51, 102, 0.3) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    min-height: 600px;
}

.voyanz-calendar-wrapper .fc {
    color: white;
    font-family: var(--bs-font-sans-serif);
}

/* Header toolbar */
.voyanz-calendar-wrapper .fc-header-toolbar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.voyanz-calendar-wrapper .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voyanz-calendar-wrapper .fc-toolbar-title {
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* Boutons */
.voyanz-calendar-wrapper .fc-button {
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: white !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
}

.voyanz-calendar-wrapper .fc-button:hover {
    background: linear-gradient(135deg, #9b3366 0%, #fc6194 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4) !important;
    color: white !important;
}

.voyanz-calendar-wrapper .fc-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(252, 97, 148, 0.5) !important;
}

.voyanz-calendar-wrapper .fc-button-primary:not(:disabled):active,
.voyanz-calendar-wrapper .fc-button-primary:not(:disabled).fc-button-active {
    background: linear-gradient(135deg, #9b3366 0%, #fc6194 100%) !important;
    border: none !important;
    color: white !important;
}

.voyanz-calendar-wrapper .fc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Jours de la semaine */
.voyanz-calendar-wrapper .fc-col-header-cell {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    padding: 10px 0;
}

.voyanz-calendar-wrapper .fc-col-header-cell-cushion {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* Cellules de jour */
.voyanz-calendar-wrapper .fc-daygrid-day,
.voyanz-calendar-wrapper .fc-timeGridDay-view .fc-daygrid-day {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-daygrid-day:hover,
.voyanz-calendar-wrapper .fc-timeGridDay-view .fc-daygrid-day:hover {
    background: rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-day-today {
    background: rgba(252, 97, 148, 0.2) !important;
}

.voyanz-calendar-wrapper .fc-daygrid-day-number {
    color: white;
    font-weight: 500;
    padding: 8px;
}

.voyanz-calendar-wrapper .fc-day-today .fc-daygrid-day-number {
    color: #fc6194;
    font-weight: 700;
}

/* Événements */
.voyanz-calendar-wrapper .fc-event {
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    transition: all 0.3s ease;
}

.voyanz-calendar-wrapper .fc-event:hover {
    background: linear-gradient(135deg, #9b3366 0%, #fc6194 100%) !important;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(252, 97, 148, 0.4);
}

.voyanz-calendar-wrapper .fc-event-title {
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
}

.voyanz-calendar-wrapper .fc-event-time {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
}

/* Time grid */
.voyanz-calendar-wrapper .fc-timegrid-slot {
    border-color: rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-timegrid-slot-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    border-color: rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-timegrid-col {
    border-color: rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-timegrid-col-frame {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Scrollbar personnalisé */
.voyanz-calendar-wrapper .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 97, 148, 0.5) rgba(255, 255, 255, 0.1);
}

.voyanz-calendar-wrapper .fc-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.voyanz-calendar-wrapper .fc-scroller::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.voyanz-calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb {
    background: rgba(252, 97, 148, 0.5);
    border-radius: 4px;
}

.voyanz-calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(252, 97, 148, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .voyanz-calendar-wrapper {
        padding: 16px;
        overflow-x: auto;
    }
    
    .voyanz-calendar-wrapper .fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .voyanz-calendar-wrapper .fc-toolbar-chunk {
        justify-content: center;
    }
    
    .voyanz-calendar-wrapper .fc-button {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
}

/* Prochaines disponibilités - thème blanc (spécificité renforcée pour override cache/autres règles) */
.voyanz-next-disponibilities-list {
    margin-top: 20px;
}

.voyanz-next-disponibility-card,
#nextdisponibilities .voyanz-next-disponibility-card,
.voyanz-next-disponibilities-list .voyanz-next-disponibility-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.voyanz-next-disponibility-card::before,
#nextdisponibilities .voyanz-next-disponibility-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9b3366 0%, #6b2247 100%);
    opacity: 0.85;
}

.voyanz-next-disponibility-card:hover,
#nextdisponibilities .voyanz-next-disponibility-card:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.voyanz-next-disponibility-date,
.voyanz-next-disponibility-hours,
.voyanz-next-disponibility-comm,
#nextdisponibilities .voyanz-next-disponibility-date,
#nextdisponibilities .voyanz-next-disponibility-hours,
#nextdisponibilities .voyanz-next-disponibility-comm {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #263238 !important;
}

.voyanz-next-disponibility-date:last-child,
.voyanz-next-disponibility-hours:last-child,
.voyanz-next-disponibility-comm:last-child {
    margin-bottom: 0;
}

.voyanz-next-disponibility-date i,
.voyanz-next-disponibility-hours i,
.voyanz-next-disponibility-comm i,
#nextdisponibilities .voyanz-next-disponibility-date i,
#nextdisponibilities .voyanz-next-disponibility-hours i,
#nextdisponibilities .voyanz-next-disponibility-comm i {
    color: #9b3366 !important;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.voyanz-next-disponibility-date span,
.voyanz-next-disponibility-hours span,
.voyanz-next-disponibility-comm span {
    font-weight: 500;
    font-size: 0.95rem;
}

.voyanz-next-disponibility-date,
#nextdisponibilities .voyanz-next-disponibility-date {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* État vide (page disponibilités - thème blanc) */
.voyanz-disponibilities-list .voyanz-empty-state,
#alldisponibilities .voyanz-empty-state,
#calendar-disponibilities .voyanz-empty-state,
#nextdisponibilities .voyanz-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 2px dashed rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.voyanz-disponibilities-list .voyanz-empty-icon,
#alldisponibilities .voyanz-empty-icon,
#calendar-disponibilities .voyanz-empty-icon,
#nextdisponibilities .voyanz-empty-icon {
    font-size: 3rem;
    color: #9b3366;
    margin-bottom: 16px;
}

.voyanz-disponibilities-list .voyanz-empty-text,
#alldisponibilities .voyanz-empty-text,
#calendar-disponibilities .voyanz-empty-text,
#nextdisponibilities .voyanz-empty-text {
    color: #546e7a;
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

.voyanz-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(70, 15, 79, 0.2) 0%, rgba(155, 51, 102, 0.15) 100%);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

.voyanz-empty-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.voyanz-empty-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

/* Responsive sections */
@media (max-width: 768px) {
    .voyanz-disponibilities-section {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .voyanz-section-header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .voyanz-section-icon-main {
        font-size: 1.5rem;
    }
    
    .voyanz-section-title-main {
        font-size: 1.25rem;
    }
    
    .voyanz-disponibility-card,
    .voyanz-next-disponibility-card {
        padding: 16px;
    }
    
    .voyanz-calendar-wrapper {
        padding: 16px;
        overflow-x: auto;
    }
}

/* ============================================
   AMÉLIORATION COMPRÉHENSION - Info box et onglets
   ============================================ */
.voyanz-info-box {
    background: linear-gradient(135deg, rgba(33, 155, 241, 0.2) 0%, rgba(125, 196, 245, 0.15) 100%);
    border: 2px solid rgba(33, 155, 241, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.voyanz-info-icon {
    font-size: 1.5rem;
    color: #7dc4f5;
    flex-shrink: 0;
    margin-top: 2px;
}

.voyanz-info-content {
    flex: 1;
}

.voyanz-info-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voyanz-info-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.6;
}

/* Onglets */
.voyanz-disponibilities-tabs {
    margin-top: 40px;
}

.voyanz-tabs-header {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0;
    overflow-x: auto;
}

.voyanz-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    bottom: -2px;
}

.voyanz-tab-btn i {
    font-size: 1.1rem;
}

.voyanz-tab-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.voyanz-tab-btn.active {
    color: #fc6194;
    border-bottom-color: #fc6194;
    background: rgba(252, 97, 148, 0.1);
}

.voyanz-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.voyanz-tab-content.active {
    display: block;
}

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

.voyanz-tab-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #7dc4f5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.voyanz-tab-info i {
    color: #7dc4f5;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.voyanz-tab-info p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Simplification des cartes de disponibilités (thème blanc) */
.voyanz-disponibility-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.voyanz-disponibility-card.voyanz-disponibility-past {
    opacity: 0.75;
    background: #fafafa;
}

.voyanz-past-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.voyanz-past-badge i {
    font-size: 0.7rem;
}

.voyanz-disponibility-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.voyanz-disponibility-item {
    gap: 10px;
}

.voyanz-disponibility-item-icon {
    font-size: 1rem;
    margin-top: 3px;
}

.voyanz-disponibility-item-label {
    font-size: 0.7rem;
}

.voyanz-disponibility-item-value {
    font-size: 0.9rem;
}

/* Responsive onglets */
@media (max-width: 768px) {
    .voyanz-info-box {
        flex-direction: column;
        padding: 16px;
    }
    
    .voyanz-tabs-header {
        gap: 8px;
    }
    
    .voyanz-tab-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .voyanz-tab-btn span {
        display: none;
    }
    
    .voyanz-tab-info {
        padding: 10px 12px;
    }
    
    .voyanz-tab-info p {
        font-size: 0.85rem;
    }
}

/* ⚠️ PAGINATION : Style comme la barre de recherche (fond transparent, bordures arrondies) */
.pagination-voyanz {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background-color: var(--color-gray7);
    color: var(--color-white);
    border: 0;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pagination-btn.active {
    background: linear-gradient(135deg, #fc6194 0%, #9b3366 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(252, 97, 148, 0.4);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-btn i {
    font-size: 0.9rem;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--color-white);
    opacity: 0.6;
    font-weight: 500;
}

/* ============================================
   INCIDENT MODAL - Design féminin Voyanz
   ============================================ */
#incidentModal .modal-content {
    background: linear-gradient(135deg, rgba(42, 31, 61, 0.98) 0%, rgba(26, 15, 60, 0.98) 50%, rgba(139, 45, 95, 0.98) 100%);
    border: 2px solid rgba(245, 168, 196, 0.3);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 168, 196, 0.2);
}

#incidentModal .modal-header {
    background: linear-gradient(135deg, rgba(245, 168, 196, 0.2) 0%, rgba(147, 112, 219, 0.2) 100%);
    border-bottom: 2px solid rgba(245, 168, 196, 0.3);
    border-radius: 20px 20px 0 0;
}

#incidentModal .modal-title {
    color: white;
    font-weight: 600;
}

#incidentModal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.3s ease;
}

#incidentModal .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

#incidentModal .form-select,
#incidentModal .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(245, 168, 196, 0.3);
    color: white;
    border-radius: 10px;
    transition: all 0.3s ease;
}

#incidentModal .form-select:focus,
#incidentModal .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(245, 168, 196, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(245, 168, 196, 0.25);
    color: white;
}

#incidentModal .form-select option {
    background: #2a1f3d;
    color: white;
}

#incidentModal .form-label {
    color: white;
    font-weight: 600;
}

#incidentModal .form-text {
    color: rgba(255, 255, 255, 0.7);
}

#incidentModal .modal-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 168, 196, 0.5);
}

/* ============================================
   FORMULAIRE PROFESSIONNEL - Largeur limitée
   ============================================ */
.mainpart2 .container .row.justify-content-center {
    max-width: 100%;
}

.mainpart2 .col-lg-10.col-xl-8 {
    max-width: 900px;
    margin: 0 auto;
}

/* Amélioration des formulaires dans la page video-disconnected */
.mainpart2 form {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(245, 168, 196, 0.2);
}

.mainpart2 .table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

/* Colonne latérale pour le signalement d'incident */
.mainpart2 .sticky-top {
    position: sticky;
    top: 20px;
    z-index: 10;
}

/* Responsive : sur mobile, la colonne latérale passe en dessous */
@media (max-width: 991.98px) {
    .mainpart2 .sticky-top {
        position: relative;
        top: 0;
        margin-top: 2rem;
    }
}

/* ⚠️ UI : Cartes de commentaires - Cohérence avec homepage */
.voyanz-review-card {
    background-color: rgb(74, 28, 82);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 10px 10px var(--color-gray9);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.voyanz-review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 12px 15px var(--color-gray9);
}

.voyanz-review-card-pro {
    border-left: 3px solid rgba(252, 97, 148, 0.4);
}

.voyanz-review-card-avatar {
    width: 60px;
    height: 60px;
}

.voyanz-review-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.voyanz-review-card-name {
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    line-height: 1.6rem;
    color: white;
    margin: 15px 0 10px 0;
}

.voyanz-review-card-date {
    font-size: 0.9rem;
    color: white;
}

.voyanz-review-card-actions {
    margin-bottom: auto;
}

.voyanz-review-card-delete {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.voyanz-review-card-delete:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}


.voyanz-review-card-text {
    color: white;
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1;
    white-space: pre-line;
}

/* Responsive pour cartes de commentaires */
@media (max-width: 768px) {
    .voyanz-review-card {
        padding: 20px;
    }
    
    .voyanz-review-card-avatar {
        width: 45px;
        height: 45px;
    }
    
    .voyanz-review-card-name {
        font-size: 1rem;
    }
}

/* ============================================
   HOME MODERNE - Style PSA Squash / Netflix
   Voyants en grille, hero pleine largeur, accent orange
   ============================================ */
.voyanz-home-modern {
    --voyanz-modern-bg: #0d1117;
    --voyanz-modern-bg-card: #161b22;
    --voyanz-modern-accent: #f97316;
    --voyanz-modern-accent-hover: #ea580c;
    --voyanz-modern-text: #e6edf3;
    --voyanz-modern-text-muted: rgba(230, 237, 243, 0.7);
}

body:has(.voyanz-home-modern) {
    background: #0d1117 !important;
}

.voyanz-home-modern .voyanz-hero-modern {
    position: relative;
    min-height: 42vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    overflow: hidden;
}

.voyanz-home-modern .voyanz-hero-modern-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(155, 51, 102, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.voyanz-home-modern .voyanz-hero-modern-content {
    position: relative;
    z-index: 1;
}

.voyanz-home-modern .voyanz-hero-badge {
    display: inline-block;
    background: rgba(249, 115, 22, 0.2);
    color: var(--voyanz-modern-accent);
    border: 1px solid var(--voyanz-modern-accent);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.voyanz-home-modern .voyanz-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--voyanz-modern-text);
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.voyanz-home-modern .voyanz-hero-subtitle {
    font-size: 1.1rem;
    color: var(--voyanz-modern-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 540px;
}

.voyanz-home-modern .voyanz-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.voyanz-home-modern .voyanz-btn-primary {
    background: var(--voyanz-modern-accent);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}

.voyanz-home-modern .voyanz-btn-primary:hover {
    background: var(--voyanz-modern-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.voyanz-home-modern .voyanz-btn-outline {
    background: transparent;
    color: var(--voyanz-modern-text);
    border: 2px solid rgba(230, 237, 243, 0.5);
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}

.voyanz-home-modern .voyanz-btn-outline:hover {
    border-color: var(--voyanz-modern-accent);
    color: var(--voyanz-modern-accent);
}

.voyanz-home-modern .min-vh-50 {
    min-height: 50vh;
}

/* Main content : fond sombre */
.voyanz-home-modern .voyanz-main-modern {
    background: var(--voyanz-modern-bg);
}

.voyanz-home-modern .voyanz-grid-modern {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2rem 0 !important;
}

.voyanz-home-modern .voyanz-grid-modern::before {
    display: none !important;
}

.voyanz-home-modern .voyanz-professionals-subsection-header {
    border-bottom-color: rgba(249, 115, 22, 0.3) !important;
    justify-content: flex-start;
}

.voyanz-home-modern .voyanz-professionals-subsection-icon.voyanz-icon-gold,
.voyanz-home-modern .voyanz-professionals-subsection-icon.voyanz-icon-blue {
    color: var(--voyanz-modern-accent) !important;
}

.voyanz-home-modern .voyanz-professionals-subsection-title {
    color: var(--voyanz-modern-text) !important;
    text-shadow: none !important;
}

/* Cartes voyants : style Netflix (hover, bordure discrète) */
.voyanz-home-modern .voyanz-grid-modern .cardpro {
    background: var(--voyanz-modern-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.voyanz-home-modern .voyanz-grid-modern .cardpro:hover,
.voyanz-home-modern .voyanz-grid-modern .cardpro-content:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(249, 115, 22, 0.2);
}

.voyanz-home-modern .voyanz-grid-modern .cardpro-content:hover {
    background: var(--voyanz-modern-bg-card) !important;
}

.voyanz-home-modern .voyanz-grid-modern .cardpro-img {
    border-radius: 12px 12px 0 0;
}

.voyanz-home-modern .voyanz-grid-modern .cardpro-prices {
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 0 8px 8px;
}

/* Sections séances, avis, blog : intégration fond sombre */
.voyanz-home-modern .voyanz-sessions-section,
.voyanz-home-modern .voyanz-sessions-header .voyanz-sessions-title,
.voyanz-home-modern .voyanz-sessions-subtitle {
    color: var(--voyanz-modern-text);
}

.voyanz-home-modern .voyanz-sessions-icon {
    color: var(--voyanz-modern-accent);
}

@media (max-width: 768px) {
    .voyanz-home-modern .voyanz-hero-modern {
        min-height: 36vh;
    }
    .voyanz-home-modern .voyanz-hero-cta {
        flex-direction: column;
    }
    .voyanz-home-modern .voyanz-hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ============================================
   HOME PSA - 3 colonnes (2 + 3 + 1 blocs arrondis)
   Mélange coins arrondis / carrés, cible féminine
   ============================================ */
.voyanz-home-psa {
    --psa-bg: #0f1419;
    --psa-bg-card: #1a2028;
    --psa-accent: #e879a0;
    --psa-accent-soft: #f4b8d0;
    --psa-lavande: #b8a5d4;
    --psa-text: #e8e2ed;
    --psa-text-muted: rgba(232, 226, 237, 0.75);
    --psa-sidebar-bg: #f8f4fa;
    --psa-sidebar-text: #2d2433;
    --psa-radius: 20px;
    --psa-radius-sm: 12px;
}

body:has(.voyanz-home-psa) {
    background: var(--psa-bg) !important;
}

/* Grille 3 colonnes */
.voyanz-home-psa .voyanz-psa-grid {
    padding: 24px 0 40px;
}

.voyanz-home-psa .voyanz-psa-grid-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

.voyanz-home-psa .voyanz-psa-row {
    align-items: stretch;
    min-height: 420px;
}

.voyanz-home-psa .voyanz-psa-col {
    display: flex;
    flex-direction: column;
}

/* Colonne 1 : 2 blocs arrondis */
.voyanz-home-psa .voyanz-psa-two-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.voyanz-home-psa .voyanz-psa-two-blocks .voyanz-psa-block {
    flex: 1;
    min-height: 180px;
}

/* Colonne 2 : 3 blocs arrondis */
.voyanz-home-psa .voyanz-psa-three-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.voyanz-home-psa .voyanz-psa-three-blocks .voyanz-psa-block {
    flex: 1;
    min-height: 120px;
}

/* Bloc arrondi commun (colonnes 1 et 2) */
.voyanz-home-psa .voyanz-psa-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background-size: cover;
    background-position: center;
    background-color: var(--psa-bg-card);
    border-radius: var(--psa-radius);
    text-decoration: none;
    color: white;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.voyanz-home-psa .voyanz-psa-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 20, 25, 0.85) 100%);
    pointer-events: none;
}

.voyanz-home-psa .voyanz-psa-block:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(232, 121, 160, 0.2);
}

.voyanz-home-psa .voyanz-psa-block-label {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.voyanz-home-psa .voyanz-psa-block-cta {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--psa-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: background 0.2s, color 0.2s;
}

.voyanz-home-psa .voyanz-psa-block:hover .voyanz-psa-block-cta {
    background: var(--psa-accent);
    color: white;
}

.voyanz-home-psa .voyanz-psa-block-placeholder {
    background: linear-gradient(135deg, var(--psa-lavande) 0%, var(--psa-accent-soft) 100%) !important;
}

/* Colonne 3 : sidebar pleine hauteur, fond clair arrondi (type PSA Upcoming) */
.voyanz-home-psa .voyanz-psa-sidebar {
    height: 100%;
    min-height: 420px;
    background: var(--psa-sidebar-bg);
    color: var(--psa-sidebar-text);
    border-radius: var(--psa-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.voyanz-home-psa .voyanz-psa-sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    color: var(--psa-sidebar-text);
}

.voyanz-home-psa .voyanz-psa-sidebar-subtitle {
    font-size: 0.85rem;
    color: #6b5b75;
    margin-bottom: 20px;
}

.voyanz-home-psa .voyanz-psa-sidebar-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.voyanz-home-psa .voyanz-psa-sidebar-item {
    display: block;
    padding: 12px 14px;
    background: white;
    border-radius: var(--psa-radius-sm);
    border: 1px solid #e8e2ed;
    text-decoration: none;
    color: var(--psa-sidebar-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.voyanz-home-psa .voyanz-psa-sidebar-item:hover {
    border-color: var(--psa-accent);
    box-shadow: 0 4px 12px rgba(232, 121, 160, 0.15);
}

.voyanz-home-psa .voyanz-psa-sidebar-item-date {
    display: block;
    font-size: 0.75rem;
    color: #6b5b75;
    margin-bottom: 4px;
}

.voyanz-home-psa .voyanz-psa-sidebar-item-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.voyanz-home-psa .voyanz-psa-sidebar-item-meta {
    font-size: 0.8rem;
    color: var(--psa-accent);
    margin-top: 4px;
    display: block;
}

.voyanz-home-psa .voyanz-psa-sidebar-empty {
    flex: 1;
    color: #6b5b75;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.voyanz-home-psa .voyanz-psa-sidebar-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--psa-accent);
    color: white !important;
    border-radius: var(--psa-radius-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.voyanz-home-psa .voyanz-psa-sidebar-btn:hover {
    background: #d96a8f;
    color: white;
    transform: translateY(-1px);
}

/* Zone du dessous : mélange arrondi / carré */
.voyanz-home-psa .voyanz-psa-below {
    padding: 40px 0 60px;
    background: var(--psa-bg);
}

.voyanz-home-psa .voyanz-psa-section {
    margin-bottom: 48px;
}

.voyanz-home-psa .voyanz-psa-section-rounded {
    padding: 28px 24px;
    background: var(--psa-bg-card);
    border-radius: var(--psa-radius);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.voyanz-home-psa .voyanz-psa-section-square {
    padding: 28px 24px;
    background: rgba(26, 32, 40, 0.6);
    border-radius: 0;
    border-left: 4px solid var(--psa-accent);
}

.voyanz-home-psa .voyanz-psa-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(232, 121, 160, 0.25);
}

.voyanz-home-psa .voyanz-psa-section-icon {
    color: var(--psa-accent);
    font-size: 1.5rem;
}

.voyanz-home-psa .voyanz-psa-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--psa-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voyanz-home-psa .voyanz-psa-newsletter-rounded {
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(232, 121, 160, 0.12) 0%, rgba(184, 165, 212, 0.12) 100%);
    border-radius: var(--psa-radius);
    border: 1px solid rgba(232, 121, 160, 0.2);
}

/* Cartes pro dans la section du dessous */
.voyanz-home-psa .voyanz-psa-section .cardpro {
    background: var(--psa-bg-card) !important;
    border-radius: var(--psa-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.voyanz-home-psa .voyanz-psa-section .cardpro-img {
    border-radius: var(--psa-radius-sm) var(--psa-radius-sm) 0 0;
}

@media (max-width: 991px) {
    .voyanz-home-psa .voyanz-psa-row {
        min-height: auto;
    }
    .voyanz-home-psa .voyanz-psa-col-1 .voyanz-psa-block,
    .voyanz-home-psa .voyanz-psa-col-2 .voyanz-psa-block {
        min-height: 140px;
    }
    .voyanz-home-psa .voyanz-psa-sidebar {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .voyanz-home-psa .voyanz-psa-grid {
        padding: 16px 0 24px;
    }
    .voyanz-home-psa .voyanz-psa-block-label {
        font-size: 1rem;
    }
    .voyanz-home-psa .voyanz-psa-section-rounded,
    .voyanz-home-psa .voyanz-psa-section-square {
        padding: 20px 16px;
    }
}

/* ============================================
   Page /home3 — Maquette Figma 154-Raimus88-re
   Dégradé unique de l'header au footer (comme Figma)
   ============================================ */
body#homepage3 {
    background: linear-gradient(180deg, #1d193e 0%, #0d094c 22%, #2a1f3d 48%, #9b3366 100%);
    background-attachment: scroll;
    color: #fff;
    min-height: 100vh;
}

/* Coller le hero au menu et supprimer l'espace (encadré 5 min au-dessus du slider, pas en décalage) */
body#homepage3 turbo-frame#main-content,
body#homepage3 .voyanz-frame-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body#homepage3 .op-home3-hero {
    margin-top: 0 !important;
}

body#homepage3 .toptop,
body#homepage3 .m-navbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.28s ease, box-shadow 0.28s ease, backdrop-filter 0.28s ease, border-color 0.28s ease;
}

/* Au scroll : fond lisible (le menu restait transparent → texte du hero visible en dessous) */
body#homepage3 .m-navbar.m-navbar--home3-scrolled {
    background: linear-gradient(90deg, rgba(36, 0, 70, 0.97) 0%, rgba(13, 17, 36, 0.97) 100%) !important;
    backdrop-filter: saturate(130%) blur(12px);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body#homepage3 .m-navbar ul li.m-navbar-item a,
body#homepage3 .m-navbar .voyanz-nav-dropdown-trigger,
body#homepage3 .m-navbar-buttons a {
    color: #fff !important;
}

body#homepage3 .m-navbar ul li.m-navbar-item a:hover,
body#homepage3 .m-navbar .voyanz-nav-dropdown-trigger:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hero : fond transparent pour laisser voir le dégradé unique de la page */
.op-home3-hero {
    position: relative;
    min-height: 626px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
}

.op-home3-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 471px;
    background: url("/images/op-home3-hero-bg.png") center center / cover no-repeat;
    opacity: 1;
}

.op-home3-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(34, 15, 80, 1) 2%, rgba(0, 0, 0, 0) 83%);
}

.op-home3-hero-inner {
    position: relative;
    z-index: 2;
}

/* Hero texte : légère remontée progressive pour équilibre avec le visuel (évite clip / chevauchement nav sur petit écran) */
.op-home3-hero-content {
    margin-top: -0.75rem;
    padding-left: 2.5rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .op-home3-hero-content {
        margin-top: -1.75rem;
    }
}

@media (min-width: 992px) {
    .op-home3-hero-content {
        margin-top: -3.5rem;
        padding-left: 4rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .op-home3-hero-content {
        margin-top: -4.25rem;
    }
}

.op-home3-badge-guaranteed {
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.25rem;
}

.op-home3-badge-guaranteed .op-home3-badge-icon {
    font-size: 1.5rem;
    color: inherit;
}

.op-home3-hero-title {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.op-home3-hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.op-home3-hero-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.op-home3-hero-cta {
    margin-bottom: 100px;
    border: none;
    border-image: none;
}

.op-home3-btn-learn {
    background: linear-gradient(180deg, rgba(116, 125, 239, 1) 0%, rgba(33, 155, 241, 1) 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 28px;
    border-radius: 53px;
    font-weight: 500;
    transition: opacity 0.2s;
}

.op-home3-btn-learn:hover {
    color: #fff !important;
    opacity: 0.9;
}

/* CTA colorés – tableau de bord professionnel */
.pro-cta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 14px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: .92rem;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.pro-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pro-cta-card i {
    font-size: 1.15rem;
}

.pro-cta-dispo {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.pro-cta-chat {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.pro-cta-seances {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.pro-cta-profil {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.pro-cta-guide {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

@media (max-width: 575.98px) {
    .pro-cta-card {
        flex: 1 1 calc(50% - 12px);
        justify-content: center;
        padding: 12px 14px;
        font-size: .85rem;
    }
}

/* Encadré "X € offert sur votre premier forfait" (remplace l’ancien badge "5 min gratuites") */
.op-home3-promo {
    position: absolute;
    top: 1.5rem;
    right: 5rem;
    z-index: 12;
    max-width: 180px;
}

.op-home3-promo-inner {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.25) 0%, rgba(155, 51, 102, 0.25) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(252, 97, 148, 0.5);
    border-radius: 16px;
    color: #fff;
    padding: 16px 18px 20px;
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 40px rgba(252, 97, 148, 0.3);
}

.op-home3-promo-amount {
    margin: 0 0 6px 0;
    color: #fc6194;
    text-shadow: 0 0 20px rgba(252, 97, 148, 0.8);
    font-size: 2rem;
}

.op-home3-promo-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.op-home3-badge-free-position {
    /* conservé pour compatibilité du positionnement */
}

.op-home3-badge-free {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.12);
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
}

.op-home3-free-first,
.op-home3-free-min {
    font-weight: 600;
    line-height: 1.2;
}

.op-home3-free-label {
    font-weight: 700;
    color: #F0BB1F;
    font-size: 1rem;
}

/* Section cartes en superposition sur le hero */
.op-home3-cards-overlap {
    position: relative;
    z-index: 4;
    margin-top: -140px;
    padding-bottom: 2rem;
}

/* Titres de sections unifiés dans l'overlap (Voyants de la semaine, Tous les pros, IA 24/24) */
.op-home3-cards-overlap .voyanz-professionals-subsection-header {
    border-bottom: none;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
}

.op-home3-cards-overlap .voyanz-professionals-subsection-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 255, 255, 0.1);
    margin-right: 0;
}

.op-home3-cards-row .cardpro {
    background: transparent;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    overflow: visible;
    transition: transform 0.2s, box-shadow 0.2s;
    color: #fff;
}

body#homepage3 .op-home3-cards-overlap .cardpro {
    background: transparent;
}

.op-home3-cards-row .cardpro:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

body#homepage3 .op-home3-cards-overlap .cardpro-content .px-2.mt-2 {
    background-color: transparent !important;
    color: #fff !important;
}

body#homepage3 .op-home3-cards-overlap .cardpro-content .cardpro-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tous les professionnels + IA 24/24 sous Voyants de la semaine : sans encadrement (sans bordure) */
.op-home3-cards-overlap .op-home3-unified-no-frame {
    border: none;
    box-shadow: none;
    margin-top: 40px;
}

.op-home3-cards-overlap .op-home3-subsection-no-frame {
    border: none;
}

/* (règles header/title des subsections no-frame fusionnées dans le sélecteur unifié ci-dessus) */

.op-home3-cards-overlap .op-home3-subsection-no-frame .voyanz-professionals-subsection-header .op-home3-see-all {
    flex-shrink: 0;
}

/* Sous-sections overlap : contenu en box (max-width), 3 vignettes par ligne */
.op-home3-cards-overlap .op-home3-subsection-no-frame .op-home3-subsection-box {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .op-home3-cards-overlap .op-home3-subsection-no-frame .op-home3-subsection-box .row > [class*="col-"] {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* IA 24/24 : 5 vignettes sur une seule ligne (style carte = défaut) */
.op-home3-cards-overlap .voyanz-subsection-ia .op-home3-subsection-box-ia {
    max-width: 100%;
}

@media (min-width: 992px) {
    .op-home3-cards-overlap .voyanz-subsection-ia.op-home3-subsection-no-frame .op-home3-subsection-box-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1199px) {
    .op-home3-cards-overlap .voyanz-subsection-ia .op-home3-subsection-box-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 991px) {
    .op-home3-cards-overlap .voyanz-subsection-ia .op-home3-subsection-box-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .op-home3-cards-overlap .voyanz-subsection-ia .op-home3-subsection-box-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* IA 24/24 : 5 vignettes sur une ligne (style carte = défaut) */
@media (min-width: 992px) {
    .voyanz-professionals-unified .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1199px) {
    .voyanz-professionals-unified .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 991px) {
    .voyanz-professionals-unified .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .voyanz-professionals-unified .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Rendu cartes dans les sous-sections déplacées */

body#homepage3 .op-home3-cards-overlap .op-home3-subsection-no-frame .cardpro,
body#homepage3 .op-home3-cards-overlap .op-home3-subsection-no-frame .cardpro-content {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body#homepage3 .op-home3-cards-overlap .op-home3-subsection-no-frame .cardpro-title {
    color: #fff !important;
}

body#homepage3 .op-home3-cards-overlap .op-home3-subsection-no-frame .cardpro-content .cardpro-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

body#homepage3 .op-home3-mainpart {
    background: transparent;
    color: #fff;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* (titres subsections homepage3 — styles unifiés via .op-home3-cards-overlap ci-dessus) */

.op-home3-see-all {
    color: rgba(116, 125, 239, 1);
    font-weight: 500;
    text-decoration: none;
}

.op-home3-see-all:hover {
    color: rgba(33, 155, 241, 1);
}

body#homepage3 .op-home3-mainpart .cardpro,
body#homepage3 .op-home3-mainpart .cardpro-content {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body#homepage3 .op-home3-mainpart .cardpro-title {
    color: #fff !important;
}

body#homepage3 .op-home3-mainpart .cardpro-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

body#homepage3 .op-home3-mainpart footer,
body#homepage3 .op-home3-mainpart .voyanz-sessions-title {
    color: #fff;
}

/* Titres des blocs (sections avis, blog, newsletter, etc.) : forcer le blanc sur fond dégradé home3 */
body#homepage3 .op-home3-mainpart h2,
body#homepage3 .op-home3-mainpart h3,
body#homepage3 .op-home3-mainpart h4,
body#homepage3 .op-home3-mainpart h5,
body#homepage3 .op-home3-mainpart h6 {
    color: #fff !important;
}

body#homepage3 .op-home3-mainpart .voyanz-sessions-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Encadré promo hero : montant lisible en blanc comme les autres titres de blocs */
body#homepage3 .op-home3-promo-amount {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 24px rgba(252, 97, 148, 0.35);
}

/* -- Encadre promo mobile-only : dans le flux, visible < 768px -- */
.op-home3-promo-mobile {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 0.75rem;
}

.op-home3-promo-mobile .op-home3-promo-inner {
    max-width: 260px;
    padding: 14px 18px 16px;
}


.op-home3-promo-mobile .op-home3-promo-amount {
    font-size: 1.5rem;
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 24px rgba(252, 97, 148, 0.35);
}

/* -- Tablette (768px - 991px) : hero visible, badge en absolute dans le hero -- */
@media (min-width: 768px) and (max-width: 991px) {
    .op-home3-hero {
        min-height: 420px;
    }

    .op-home3-hero-bg {
        min-height: 300px;
    }

    .op-home3-promo {
        right: 1.5rem;
        top: 1.25rem;
    }

    .op-home3-promo-inner {
        padding: 12px 14px 16px;
    }

    .op-home3-promo-amount {
        font-size: 1.6rem;
    }

    .op-home3-cards-overlap {
        margin-top: -120px;
    }

    .op-home3-hero-content {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

/* -- Mobile (< 768px) : hero masque, badge promo en haut, cartes directement -- */
@media (max-width: 767px) {
    .op-home3-hero {
        display: none !important;
    }

    .op-home3-cards-overlap {
        margin-top: 0;
        padding-top: 0.5rem;
    }

    body#homepage3 .voyanz-fab-assistant {
        bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding: 0.35rem 0.45rem !important;
    }

    body#homepage3 .voyanz-fab-assistant #voyanzFloatingAssistantBtn {
        padding: 9px 14px !important;
        font-size: 0.8125rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    body#homepage3 .op-home3-cards-overlap {
        padding-bottom: 4.5rem;
    }
}



/* ============================================
   Page Our Psychics (front-office Voyanz)
   Maquette Figma 154-Raimus88-re — 1440×2706, #0C084C (classes .op-*)
   ============================================ */
.op-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #0C084C 0%, #1a0d32 45%, #2d1b4e 100%);
    color: #fff;
    padding: 0 0 4rem;
    margin: 0;
    overflow-x: hidden;
}

.op-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
}

.op-search-header {
    padding: 1.5rem 0 1rem;
}

.op-search-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.op-search-wrap {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.op-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    pointer-events: none;
}

.op-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 14px 16px 14px 48px;
    color: #fff;
    font-size: 1rem;
    font-family: Montserrat, sans-serif;
}

.op-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.op-dropdowns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.op-dropdown-wrap {
    position: relative;
}

.op-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    font-size: 0.9rem;
    font-family: Montserrat, sans-serif;
}

.op-chevron {
    font-size: 0.7rem;
    opacity: 0.9;
}

.op-dropdown-menu {
    background: rgba(42, 31, 61, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0;
}

.op-dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
}

.op-dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.op-avatars-section {
    padding: 1.5rem 0 2rem;
}

.op-avatars-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.op-avatar-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    width: 90px;
}

.op-avatar-img-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 0.5rem;
}

.op-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.op-avatar-name {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.op-block {
    padding: 0 0 2.5rem;
}

.op-block-title {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 1rem;
    color: #fff;
}

.op-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.op-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(42, 31, 61, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.op-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.op-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 58%;
    overflow: hidden;
    background: #1a1642;
}

.op-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.op-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffdd67;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.op-card-body {
    padding: 16px;
}

.op-card-name {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.op-card-rating {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.op-star {
    color: #ffdd67;
    font-size: 0.75rem;
}

.op-card-price {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.35rem;
}

.op-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 3rem 0 2rem;
}

.op-cta-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.op-cta-btn:hover {
    transform: scale(1.03);
    color: inherit;
}

.op-cta-btn-pink {
    background: linear-gradient(135deg, #e91e8c 0%, #c2185b 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(233, 30, 140, 0.4);
}

.op-cta-btn-dark {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .op-container {
        padding: 0 1rem;
    }
    .op-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    .op-dropdowns {
        flex-wrap: wrap;
    }
    .op-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Legacy Our Psychics (anciennes classes, conservées si besoin) */
.our-psychics-page {
    min-height: 80vh;
    background: linear-gradient(157deg, rgba(12, 9, 76, 1) 0%, rgba(238, 63, 181, 1) 100%);
    color: #fff;
    padding: 0 0 3rem;
    margin: 0;
    overflow-x: hidden;
}

.our-psychics-header {
    padding: 1rem 2rem 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
}

.our-psychics-search-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.our-psychics-page .search-wrap {
    position: relative;
    flex-shrink: 0;
}

.our-psychics-page .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    pointer-events: none;
}

.our-psychics-page .search-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    color: #fff;
    font-size: 0.9rem;
    width: 220px;
}

.our-psychics-page .search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.our-psychics-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.our-psychics-page .filter-chip {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2rem;
    padding: 0.35rem 0.9rem;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.our-psychics-page .filter-chip:hover {
    background: rgba(255, 255, 255, 0.25);
}

.our-psychics-page .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    flex-shrink: 0;
}

.our-psychics-page .filter-chevron {
    font-size: 0.7rem;
    opacity: 0.9;
}

/* Bloc section */
.our-psychics-block {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
}

.our-psychics-block-title {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    margin: 0 0 1rem;
    color: #fff;
}

.our-psychics-strip-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.our-psychics-strip {
    display: flex;
    gap: 1rem;
    padding: 0 0 0.5rem;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

/* Petites cartes (Psychics Online / Best Clairvoyants) */
.our-psychics-strip-small {
    gap: 12px;
}

.psychic-card-small {
    flex-shrink: 0;
    width: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1642;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.psychic-card-small-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
}

.psychic-card-small-img,
.psychic-card-small-placeholder {
    width: 90px;
    height: 90px;
    object-fit: cover;
    display: block;
    border-radius: 8px 8px 0 0;
}

.psychic-card-small-placeholder {
    background: linear-gradient(135deg, #2d2563 0%, #4a3a8a 100%);
}

.psychic-card-small-name {
    font-family: Montserrat, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    margin-top: 0.35rem;
    text-align: center;
    padding: 0 4px;
}

/* Cartes Best Life Coaches */
.our-psychics-strip-coaches {
    gap: 1.25rem;
}

.psychic-card-coach {
    flex-shrink: 0;
    width: 180px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1642;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.psychic-card-coach-inner {
    position: relative;
}

.psychic-card-coach-img,
.psychic-card-coach-placeholder {
    width: 180px;
    height: 140px;
    object-fit: cover;
    display: block;
}

.psychic-card-coach-placeholder {
    background: linear-gradient(135deg, #2d2563 0%, #4a3a8a 100%);
}

.psychic-card-coach-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffdd67;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.psychic-card-coach-footer {
    padding: 0.6rem 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(59, 23, 84, 0.95) 100%);
    margin-top: -40px;
    position: relative;
    z-index: 1;
}

.psychic-card-coach-name {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.psychic-card-coach-rating {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.2rem;
}

.psychic-card-coach-rating .star-icon {
    color: #ffdd67;
    font-size: 0.7rem;
}

.psychic-card-coach-price {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.25rem;
}

/* Grille 3×3 Our Psychics — grandes cartes */
.our-psychics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.psychic-card-large {
    border-radius: 10px;
    overflow: hidden;
    background: #1a1642;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.psychic-card-large-inner {
    position: relative;
    padding-bottom: 0;
}

.psychic-card-large-img,
.psychic-card-large-placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.psychic-card-large-placeholder {
    background: linear-gradient(135deg, #2d2563 0%, #4a3a8a 100%);
}

.psychic-card-large-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffdd67;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.psychic-card-large-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    text-align: center;
    max-width: 85%;
}

.psychic-card-large-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #6b0d8c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding-left: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.psychic-card-large-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.05);
}

.psychic-card-large-footer {
    padding: 0.75rem 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(59, 23, 84, 1) 100%);
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.psychic-card-large-name {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}

.psychic-card-large-rating {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.2rem;
}

.psychic-card-large-rating .star-icon {
    color: #ffdd67;
    font-size: 0.7rem;
}

.psychic-card-large-price {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.3rem;
}

.psychic-card-large-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.our-psychics-page .star-icon {
    color: #ffdd67;
}

@media (max-width: 992px) {
    .our-psychics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .our-psychics-header,
    .our-psychics-block {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .our-psychics-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    .our-psychics-page .search-input {
        width: 100%;
    }
    .our-psychics-grid {
        grid-template-columns: 1fr;
    }
}

/* ——— Landing pub / campagnes (/:lang/pub) ——— */
body#voyanzpub .voyanz-pub-hero {
    position: relative;
    overflow: hidden;
}

.voyanz-pub-tile {
    display: block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    height: 100%;
}

.voyanz-pub-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(252, 97, 148, 0.45);
    color: #fff;
}

.voyanz-pub-tile-media {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center top;
    background-color: #1a1642;
}

.voyanz-pub-tile-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.voyanz-pub-tile-body {
    padding: 0.75rem 0.85rem 1rem;
    text-align: center;
}

.voyanz-pub-tile-name {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.voyanz-pub-tile-spec {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.3;
    min-height: 2.2em;
    margin-bottom: 0.5rem;
}

.voyanz-pub-tile-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f5a8c4;
}

.voyanz-pub-tile:hover .voyanz-pub-tile-cta {
    color: #ffc8dc;
}

/* ============================================
   Barre de partage social (horoscope, etc.)
   ============================================ */

.voyanz-share-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.voyanz-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.voyanz-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.voyanz-share-btn:hover, .voyanz-share-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #fff;
    text-decoration: none;
}

.voyanz-share-native:hover   { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); border-color: #e1306c; }
.voyanz-share-whatsapp:hover { background: #25d366; border-color: #25d366; }
.voyanz-share-copy:hover     { background: rgba(245, 168, 196, 0.3); border-color: #f5a8c4; }

.voyanz-share-copied {
    background: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
}

.voyanz-share-download:hover { background: rgba(245, 168, 196, 0.3); border-color: #f5a8c4; }

.voyanz-og-preview {
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.voyanz-og-preview-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
}

.voyanz-og-preview-img {
    width: 100%;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.voyanz-og-preview-link:hover .voyanz-og-preview-img {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.voyanz-og-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.voyanz-og-preview-link:hover .voyanz-og-preview-overlay {
    opacity: 1;
}

/* ============================================
   Pages Professionnel — Dégradé uniforme
   Même principe que body#homepage3 pour le client
   ============================================ */
body#professionalwelcome,
body#professionalappointments,
body#professionalaccount,
body#professionaldescription,
body#professionalhistory,
body#professionalreviews,
body#professionalchat,
body#professionaldisponibilities,
body#professionalvideo,
body#professionalvideodisconnected,
body#professionalverifyemail,
body#professionalexpress {
    background: linear-gradient(180deg, #1d193e 0%, #0d094c 22%, #2a1f3d 48%, #abbab8 100%);
    background-attachment: scroll;
    color: #fff;
    min-height: 100vh;
}

/* Note Club Voyanz — rendez-vous pro (discret mais lisible sur dégradé sombre) */
body#professionalappointments .club-voyanz-pro-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(155, 51, 102, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

body#professionalappointments .club-voyanz-pro-note i {
    color: rgba(252, 97, 148, 0.92);
    margin-top: 2px;
    flex-shrink: 0;
}

/* =========================================================
   Page pro Express — design contrasté sur dégradé Voyanz
   ========================================================= */
body#professionalexpress .voyanz-express-dashboard {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero : icône, titre, statut */
body#professionalexpress .express-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.20) 0%, rgba(33, 155, 241, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 10px 30px rgba(13, 9, 76, 0.25);
    backdrop-filter: blur(6px);
}

body#professionalexpress .express-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
    color: #422006;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    flex-shrink: 0;
}

body#professionalexpress .express-hero-text {
    flex: 1 1 280px;
    min-width: 0;
}

body#professionalexpress .express-hero-title {
    font-family: Volkhov, Georgia, serif;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    color: #fff;
    margin: 0 0 0.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    letter-spacing: 0.01em;
}

body#professionalexpress .express-hero-lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.45;
}

body#professionalexpress .express-hero-status {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid transparent;
}

body#professionalexpress .express-hero-status--on {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.45);
}

body#professionalexpress .express-hero-status--off {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.45);
}

body#professionalexpress .express-hero-status {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Toast d'auto-save */
body#professionalexpress .express-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 32px));
}
body#professionalexpress .express-toast.show {
    opacity: 1;
    transform: translateY(0);
}
body#professionalexpress .express-toast--success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
}
body#professionalexpress .express-toast--error {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
}

/* Sections numérotées */
body#professionalexpress .express-section {
    background: #ffffff;
    color: #1d193e;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 36px rgba(13, 9, 76, 0.22), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

body#professionalexpress .express-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(13, 9, 76, 0.08);
}

body#professionalexpress .express-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}

body#professionalexpress .express-step-badge--warning {
    background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
    color: #422006;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

body#professionalexpress .express-step-badge--success {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
}

body#professionalexpress .express-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d193e;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body#professionalexpress .express-section-help {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Section partage du lien (encart bleu/rose mis en avant) */
body#professionalexpress .express-share-section {
    background: linear-gradient(135deg, #312e81 0%, #4c1d95 60%, #831843 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body#professionalexpress .express-share-section .express-section-title {
    color: #fff;
}

body#professionalexpress .express-share-section .express-section-help {
    color: rgba(255, 255, 255, 0.78);
}

body#professionalexpress .express-share-section .express-section-head {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

body#professionalexpress .express-share-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body#professionalexpress .express-share-url {
    flex: 1 1 280px;
    min-width: 0;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92rem;
    word-break: break-all;
    user-select: all;
}

/* Formulaire paramètres */
body#professionalexpress .express-form-group {
    padding: 1rem 0 0.5rem;
}

body#professionalexpress .express-form-group + .express-form-group {
    border-top: 1px dashed rgba(13, 9, 76, 0.12);
    margin-top: 0.75rem;
}

body#professionalexpress .express-form-group-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4c1d95;
    margin-bottom: 0.85rem;
    display: inline-block;
    border-bottom: 2px solid rgba(252, 97, 148, 0.45);
    padding-bottom: 0.25rem;
}

body#professionalexpress .express-form .form-label {
    color: #1d193e;
    margin-bottom: 0.35rem;
}

body#professionalexpress .express-input-group .form-control,
body#professionalexpress .express-input-group .input-group-text {
    border-color: rgba(13, 9, 76, 0.18);
    background-color: #fff;
}

body#professionalexpress .express-input-group .input-group-text {
    background: #f3f4f6;
    color: #4b5563;
    font-weight: 600;
}

body#professionalexpress .express-input-group .form-control:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.18);
}

body#professionalexpress .express-price-input {
    text-align: right;
    font-weight: 600;
    color: #1d193e;
}

/* Champ tarif Express avec suffixe € intégré (remplace le input-group Bootstrap décalé) */
body#professionalexpress .express-price-field {
    position: relative;
    display: block;
}

body#professionalexpress .express-price-field .express-price-input {
    width: 100%;
    height: 48px;
    padding: 0.55rem 3rem 0.55rem 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1d193e;
    text-align: right;
    background: #fff;
    border: 1px solid rgba(13, 9, 76, 0.18);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(13, 9, 76, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

body#professionalexpress .express-price-field .express-price-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

body#professionalexpress .express-price-field .express-price-suffix {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 36px;
    min-width: 36px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Volkhov", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #c221f1 50%, var(--color-pink1) 100%);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
    pointer-events: none;
    user-select: none;
}

/* Masquer les flèches incrément/décrément du number input pour un rendu plus propre */
body#professionalexpress .express-price-field .express-price-input::-webkit-outer-spin-button,
body#professionalexpress .express-price-field .express-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body#professionalexpress .express-price-field .express-price-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Switch coloré */
body#professionalexpress .express-switch .form-check-input {
    width: 2.6rem;
    height: 1.4rem;
    margin-top: 0.2rem;
    cursor: pointer;
    border-color: rgba(13, 9, 76, 0.25);
}

body#professionalexpress .express-switch .form-check-input:checked {
    background-color: #22c55e;
    border-color: #16a34a;
}

body#professionalexpress .express-switch .form-check-label {
    margin-left: 0.5rem;
    font-weight: 600;
    color: #1d193e;
    cursor: pointer;
}

body#professionalexpress .express-form-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(13, 9, 76, 0.08);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Compteur dans les titres de section */
body#professionalexpress .express-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #1f2937;
}

body#professionalexpress .express-count-badge--warning {
    background: #fde68a;
    color: #78350f;
}

body#professionalexpress .express-count-badge--success {
    background: #bbf7d0;
    color: #14532d;
}

/* Listes consultations */
body#professionalexpress .express-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

body#professionalexpress .express-list-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

body#professionalexpress .express-list-item--pending {
    border-left: 4px solid #f59e0b;
}

body#professionalexpress .express-list-item--completed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-left: 4px solid #22c55e;
}

body#professionalexpress .express-list-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

body#professionalexpress .express-list-item-name {
    color: #1d193e;
    font-size: 1rem;
}

body#professionalexpress .express-list-item-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body#professionalexpress .express-list-item-question {
    color: #4b5563;
    font-size: 0.9rem;
    margin: 0.35rem 0 0.6rem;
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    border: 1px solid #f3f4f6;
}

body#professionalexpress .express-list-item-actions {
    margin-top: 0.35rem;
}

@media (max-width: 575.98px) {
    body#professionalexpress .express-hero {
        padding: 1rem;
    }
    body#professionalexpress .express-section {
        padding: 1.1rem 1rem 1rem;
    }
    body#professionalexpress .express-share-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   Homepage4 — route /:lang/home (getHomepage4)
   Grille pros : 4 colonnes dès lg (cardproCols4Home)
   ============================================ */

body#homepage4 {
    background: linear-gradient(180deg, #0f0835 0%, #1a0d44 30%, #2d1b4e 60%, #1a0d32 100%);
    background-attachment: scroll;
    color: #fff;
    min-height: 100vh;
}

body#homepage4 .toptop,
body#homepage4 .m-navbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.28s ease, box-shadow 0.28s ease;
}

body#homepage4 .m-navbar.m-navbar--home3-scrolled {
    background: linear-gradient(90deg, rgba(36, 0, 70, 0.97) 0%, rgba(13, 17, 36, 0.97) 100%) !important;
    backdrop-filter: saturate(130%) blur(12px);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body#homepage4 .m-navbar ul li.m-navbar-item a,
body#homepage4 .m-navbar .voyanz-nav-dropdown-trigger,
body#homepage4 .m-navbar-buttons a {
    color: #fff !important;
}

body#homepage4 .m-navbar ul li.m-navbar-item a:hover,
body#homepage4 .m-navbar .voyanz-nav-dropdown-trigger:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Onglet actif : même rendu que le reste du site (rose + fond pink5) */
body#homepage4 .m-navbar ul li.m-navbar-item.active a,
body#homepage4 .m-navbar ul li.m-navbar-item.active .voyanz-nav-dropdown-trigger {
    color: var(--color-pink1) !important;
    background-color: var(--color-pink5) !important;
    border-radius: 15px;
    padding: 0 20px;
    margin: 0;
    text-decoration: none;
}

body#homepage4 .m-navbar ul li.m-navbar-item.active a:hover,
body#homepage4 .m-navbar ul li.m-navbar-item.active .voyanz-nav-dropdown-trigger:hover {
    color: var(--color-pink1) !important;
    background-color: var(--color-pink5) !important;
}

@media (min-width: 992px) {
    body#homepage4 .m-navbar .voyanz-navbar-list > li.m-navbar-item.active a,
    body#homepage4 .m-navbar .voyanz-navbar-list > li.m-navbar-item.active .voyanz-nav-dropdown-trigger {
        padding: 0 14px;
    }
}

.h4-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
    margin-top: 0 !important;
}

body#homepage4 .h4-hero {
    margin-top: 0 !important;
}

.h4-hero-bg {
    position: absolute;
    inset: 0;
    background: url("/images/op-home3-hero-bg.png") center center / cover no-repeat;
    opacity: 1;
}

.h4-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 8, 53, 0.92) 0%, rgba(0, 0, 0, 0.15) 80%);
}

.h4-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 480px;
}

.h4-hero-content {
    padding: 3rem 1rem 2rem 2.5rem;
}

@media (min-width: 992px) {
    .h4-hero-content {
        padding-left: 4rem;
    }
}

.h4-hero-title {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.h4-hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.h4-hero-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 38rem;
    margin-bottom: 1.75rem;
    line-height: 1.55;
}

.h4-hero-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.h4-btn-primary {
    background: linear-gradient(180deg, #747def 0%, #219bf1 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: opacity 0.2s, transform 0.2s;
}

.h4-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff !important;
}

.h4-btn-outline {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 1rem;
    transition: border-color 0.2s, background 0.2s;
}

.h4-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.h4-promo-badge {
    position: absolute;
    top: 1.5rem;
    right: 5rem;
    z-index: 12;
    max-width: 180px;
}

.h4-promo-inner {
    background: linear-gradient(135deg, rgba(252, 97, 148, 0.25) 0%, rgba(155, 51, 102, 0.25) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(252, 97, 148, 0.5);
    border-radius: 16px;
    color: #fff;
    padding: 16px 18px 20px;
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 40px rgba(252, 97, 148, 0.3);
}

.h4-promo-amount {
    margin: 0 0 6px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 24px rgba(252, 97, 148, 0.35);
    font-size: 2rem;
}

.h4-promo-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.h4-promo-mobile {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 0.75rem;
}

.h4-promo-mobile .h4-promo-inner {
    max-width: 260px;
    padding: 14px 18px 16px;
}

.h4-promo-mobile .h4-promo-amount {
    font-size: 1.5rem;
}

.h4-pillars {
    position: relative;
    z-index: 4;
    margin-top: -80px;
    padding-bottom: 2rem;
}

.h4-pillar {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    backdrop-filter: blur(8px);
}

.h4-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.h4-pillar-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.h4-pillar-pros .h4-pillar-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.h4-pillar-ia .h4-pillar-icon {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.h4-pillar-group .h4-pillar-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.h4-pillar-title {
    font-family: Volkhov, Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.h4-pillar-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.h4-pillar-cta {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 22px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s, border-color 0.2s;
}

.h4-pillar-cta:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.h4-content {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.h4-section {
    margin-bottom: 3rem;
}

.h4-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: none;
    padding-bottom: 0;
}

.h4-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.h4-section-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.h4-see-all {
    color: rgba(116, 125, 239, 1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.h4-see-all:hover {
    color: rgba(33, 155, 241, 1);
}

body#homepage4 .h4-content .cardpro,
body#homepage4 .h4-content .cardpro-content {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body#homepage4 .h4-content .cardpro-title {
    color: #fff !important;
}

body#homepage4 .h4-content .cardpro-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

body#homepage4 .h4-content h2,
body#homepage4 .h4-content h3,
body#homepage4 .h4-content h4,
body#homepage4 .h4-content h5,
body#homepage4 .h4-content h6 {
    color: #fff !important;
}

body#homepage4 .h4-content footer,
body#homepage4 .h4-content .voyanz-sessions-title {
    color: #fff;
}

body#homepage4 .h4-content .voyanz-sessions-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}

@media (min-width: 992px) {
    body#homepage4 .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1199px) {
    body#homepage4 .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 991px) {
    body#homepage4 .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    body#homepage4 .voyanz-subsection-ia .voyanz-ia-cards-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .h4-hero {
        min-height: auto;
        padding: 1.5rem 0 0.5rem;
    }

    .h4-hero-bg {
        opacity: 0.4;
    }

    .h4-hero-content {
        padding: 1.5rem 1rem;
        text-align: center;
    }

    .h4-hero-cta {
        justify-content: center;
    }

    .h4-pillars {
        margin-top: 0;
        padding-top: 0.5rem;
    }

    .h4-pillar {
        padding: 1.5rem 1rem;
    }

    body#homepage4 .voyanz-fab-assistant {
        bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
        right: max(0.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .h4-hero {
        min-height: 400px;
    }

    .h4-promo-badge {
        right: 1.5rem;
        top: 1.25rem;
    }

    .h4-pillars {
        margin-top: -60px;
    }

    .h4-hero-content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ============================================================
   Bannière dynamique "Quick access" sur le dashboard client
   (aide à retrouver le chat / consultation Express)
   ============================================================ */
.customer-quick-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 60%, #6366f1 100%);
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    animation: customerQuickBannerPulse 2.6s ease-in-out infinite;
}
.customer-quick-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(139, 92, 246, 0.5);
    color: #ffffff !important;
}
.customer-quick-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.18), transparent 50%);
    pointer-events: none;
}
.customer-quick-banner-icon {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    font-size: 1.15rem;
}
.customer-quick-banner-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid #ffffff;
}
.customer-quick-banner-content {
    min-width: 0;
}
.customer-quick-banner-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 2px 0;
    line-height: 1.2;
}
.customer-quick-banner-text {
    font-size: 0.88rem;
    opacity: 0.95;
    line-height: 1.3;
}
.customer-quick-banner-cta {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    color: #6d28d9;
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
}
@keyframes customerQuickBannerPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.35); }
    50%      { box-shadow: 0 12px 36px rgba(236, 72, 153, 0.55); }
}
@media (max-width: 575.98px) {
    .customer-quick-banner {
        flex-wrap: wrap;
        padding: 12px 14px;
    }
    .customer-quick-banner-cta {
        margin-left: auto;
    }
}

/* ============================================================
   Onglets "À répondre / Répondues" du dashboard pro Express
   ============================================================ */
body#professionalexpress .express-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid #ece9f5;
    margin: 8px 0 18px 0;
    padding: 0;
}
body#professionalexpress .express-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
}
body#professionalexpress .express-tab:hover {
    color: #1d193e;
    background: rgba(139, 92, 246, 0.05);
}
body#professionalexpress .express-tab.is-active {
    color: #1d193e;
    border-bottom-color: #8b5cf6;
}
body#professionalexpress .express-tab--warning.is-active {
    border-bottom-color: #f59e0b;
}
body#professionalexpress .express-tab--success.is-active {
    border-bottom-color: #22c55e;
}
body#professionalexpress .express-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
}
body#professionalexpress .express-tab--warning.is-active .express-tab-count,
body#professionalexpress .express-tab-count--warning {
    background: #fef3c7;
    color: #b45309;
}
body#professionalexpress .express-tab--success.is-active .express-tab-count,
body#professionalexpress .express-tab-count--success {
    background: #dcfce7;
    color: #15803d;
}
body#professionalexpress .express-tab-panel {
    animation: expressTabFade 0.18s ease;
}
body#professionalexpress .express-tab-panel[hidden] {
    display: none !important;
}
body#professionalexpress .express-empty-state {
    margin: 16px 0;
    padding: 18px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
}
@keyframes expressTabFade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   home3.eta — /fr/home3 (même body#homepage4 que /fr/home pour vignettes + IA).
   Repositionnement "vendre des séances / des voyants". Overrides home3 UNIQUEMENT
   via classes .h3v-* (présentes seulement dans home3.eta) → /fr/home intacte.
   ===================================================================== */

/* Le hero home3 a une colonne droite (slider) → on neutralise l'overlap
   négatif des piliers (-80px) propre à la home live, et on agrandit le hero. */
@media (min-width: 992px) {
    body#homepage4 .h3v-hero { min-height: 640px; padding-bottom: 110px; }
}
body#homepage4 .h3v-hero ~ .h4-pillars { margin-top: 2rem; }
body#homepage4 .h3v-online-top { padding-top: 1.5rem; }

/* Pastille cadeau sous les CTA (remplace le badge promo flottant sur home3) */
.h3v-gift-pill {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 1.25rem;
    background: linear-gradient(135deg, rgba(252,97,148,0.22) 0%, rgba(155,51,102,0.22) 100%);
    border: 1px solid rgba(252,97,148,0.5);
    border-radius: 50px;
    padding: 8px 16px;
    color: #fff;
    font-size: 0.92rem;
    width: fit-content;
}
.h3v-gift-pill i { color: #fc6194; }
.h3v-gift-pill strong { color: #fff; }
@media (min-width: 768px) { .h3v-gift-pill { display: inline-flex; } }

/* Colonne + carte slider */
.h3v-hero-col { padding: 1rem 1rem 1rem 1rem; }
.h3v-slider {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 40px rgba(116,125,239,0.25);
}
.h3v-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.h3v-slide.is-active { opacity: 1; pointer-events: auto; }
.h3v-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a0f33 center center / cover no-repeat;
}
.h3v-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,8,53,0.05) 35%, rgba(15,8,53,0.88) 100%);
}
.h3v-slide-top { position: absolute; top: 14px; left: 14px; z-index: 2; }
.h3v-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,197,94,0.92);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
}
.h3v-live-badge-off { background: rgba(120,120,140,0.85); }
.h3v-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: h3vLivePulse 1.8s infinite;
}
@keyframes h3vLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.h3v-slide-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 18px 20px;
    color: #fff;
}
.h3v-slide-name {
    font-family: Volkhov, Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}
.h3v-slide-spec {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.82);
    margin-top: 2px;
    margin-bottom: 12px;
}
.h3v-slide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.h3v-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, background 0.2s;
    text-decoration: none;
}
.h3v-slide-btn:hover { transform: translateY(-1px); color: #fff; }
.h3v-slide-btn-primary { background: linear-gradient(180deg, #747def 0%, #219bf1 100%); color: #fff; }
.h3v-slide-btn-primary:hover { opacity: 0.92; }
.h3v-slide-btn-ghost { background: rgba(255,255,255,0.16); color: #fff; backdrop-filter: blur(4px); }
.h3v-slide-btn-ghost:hover { background: rgba(255,255,255,0.3); }
.h3v-dots { position: absolute; bottom: 10px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.h3v-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, width 0.2s;
}
.h3v-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }

/* Bouton son du slider (vidéos muettes par défaut → activer le son de l'interview) */
.h3v-slider .h3v-sound-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.2s, transform 0.15s;
}
.h3v-slider .h3v-sound-btn:hover { background: rgba(0,0,0,0.82); transform: scale(1.06); }

/* Aperçu de la vidéo d'interview sur la page profil pro */
.voyanz-intro-video-preview {
    width: 100%;
    max-height: 220px;
    border-radius: 10px;
    background: #000;
    display: block;
}

/* Vidéo de présentation sur la fiche publique /details/:co_id */
.voyanz-details-intro-video-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.voyanz-details-intro-video-player {
    width: 100%;
    border-radius: 12px;
    background: #000;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================
   home6.eta — /fr/home6 (structure plate, contrastes)
   ============================================ */

body#homepage4 .h6v-page {
    background: transparent;
    color: #fff;
    overflow-x: hidden;
    padding-bottom: 5rem;
}

body#homepage4 .h6v-section .h4-section-header {
    margin-bottom: var(--space-3, 21px);
}

body#homepage4 .h6v-vignettes .row.g-4 {
    --bs-gutter-y: var(--space-4, 34px);
}

body#homepage4 .h6v-section {
    margin-bottom: var(--space-4, 34px);
}

body#homepage4 .h6v-container + .h6v-container {
    padding-top: var(--space-2, 13px);
}

body#homepage4 .h6v-container > .h6v-social-reviews-row:first-child {
    margin-top: 0;
}

body#homepage4 .h6v-section--white {
    background: #fff;
    color: #1a1228;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

body#homepage4 .h6v-section--dark {
    background: #0d1124;
    color: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.25rem 1.75rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body#homepage4 .h6v-section--trust {
    padding: var(--space-2, 13px) 0 var(--space-3, 21px);
    margin-bottom: var(--space-3, 21px);
}

body#homepage4 .h6v-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2eea8b;
    margin-left: 0.5rem;
    letter-spacing: 0;
    text-transform: none;
}

body#homepage4 .h6v-live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2eea8b;
    box-shadow: 0 0 0 0 rgba(46, 234, 139, 0.55);
    animation: h6vPulse 1.6s infinite;
}

body#homepage4 .h6v-live-dot.is-off {
    background: #f0a13c;
    animation: none;
}

@keyframes h6vPulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 234, 139, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(46, 234, 139, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 234, 139, 0); }
}

/* Hero : grande vignette + affiches + flèches extérieures */
body#homepage4 .h6v-hero-row-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

body#homepage4 .h6v-hero-nav {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

body#homepage4 .h6v-hero-nav:hover {
    background: rgba(252, 97, 148, 0.92);
    transform: scale(1.06);
}

body#homepage4 .h6v-hero-row {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: none;
    --h6v-hero-h: clamp(240px, 26vw, 380px);
}

body#homepage4 .h6v-hero-row::-webkit-scrollbar { display: none; }

/* Hero 16:9 — séparation visuelle avec le rail d'affiches verticales */
body#homepage4 .h6v-feature {
    position: relative;
    flex: 0 0 auto;
    height: var(--h6v-hero-h);
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 3px solid #fff;
    scroll-snap-align: start;
    box-sizing: border-box;
    margin-right: 16px;
}

body#homepage4 .h6v-feature-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.75s ease;
    pointer-events: none;
}

body#homepage4 .h6v-feature-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

body#homepage4 .h6v-feature-video,
body#homepage4 .h6v-feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body#homepage4 .h6v-feature-video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s;
}

body#homepage4 .h6v-feature-slide.is-active.is-playing .h6v-feature-video {
    opacity: 1;
}

body#homepage4 .h6v-feature-live {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 700;
}

body#homepage4 .h6v-feature-gift {
    position: absolute;
    top: 10px;
    right: 52px;
    background: #fc6194;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 11px;
}

/* Bouton lecture/démarrage au centre de la vidéo en avant (CTA in-place) */
body#homepage4 .h6v-feature-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

body#homepage4 .h6v-feature-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fc6194;
}

/* Légende nom + prix superposée en bas de la vidéo en avant */
body#homepage4 .h6v-feature-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    pointer-events: none;
}

body#homepage4 .h6v-feature-cap-name {
    font-family: Volkhov, Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

body#homepage4 .h6v-feature-cap-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd9a0;
}

body#homepage4 .h6v-sound {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #000;
    color: #fff;
    font-size: 0.88rem;
    cursor: pointer;
}

body#homepage4 .h6v-feature-dots {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

body#homepage4 .h6v-feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

body#homepage4 .h6v-feature-dot.is-active {
    background: #fc6194;
}

/* Affiches : image + légende en flux (pas de superposition) */
body#homepage4 .h6v-poster {
    flex: 0 0 auto;
    width: clamp(150px, 14vw, 200px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

body#homepage4 .h6v-poster-media {
    position: relative;
    display: block;
    height: var(--h6v-hero-h);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

body#homepage4 .h6v-poster-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body#homepage4 .h6v-poster-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

body#homepage4 .h6v-poster-video.is-playing {
    opacity: 1;
}

body#homepage4 .h6v-poster:hover .h6v-poster-media {
    border-color: rgba(255, 255, 255, 0.65);
}

body#homepage4 .h6v-poster.is-in-feature {
    display: none;
}

body#homepage4 .h6v-poster:focus-visible .h6v-poster-media {
    border-color: rgba(255, 255, 255, 0.65);
}

body#homepage4 .h6v-poster-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.65rem;
    font-weight: 700;
}

body#homepage4 .h6v-poster-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
    line-height: 1.2;
}

body#homepage4 .h6v-poster-cap strong {
    font-weight: 700;
}

body#homepage4 .h6v-poster-cap span {
    color: #ffd9a0;
    font-size: 0.76rem;
    font-weight: 600;
}

body#homepage4 .h6v-feature-meta {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

body#homepage4 .h6v-feature-title {
    font-family: Volkhov, Georgia, serif;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    margin: 0 0 0.5rem;
}

body#homepage4 .h6v-feature-meta .h6v-top-rating {
    margin-bottom: 0.45rem;
}

body#homepage4 .h6v-feature-meta .h6v-top-stars {
    color: #f9de79;
}

body#homepage4 .h6v-feature-meta .h6v-top-rnum {
    color: rgba(255, 255, 255, 0.88);
}

body#homepage4 .h6v-feature-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
}

body#homepage4 .h6v-feature-minutes {
    color: #fc6194;
    font-weight: 700;
}

body#homepage4 .h6v-feature-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body#homepage4 .h6v-chan {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 0;
    color: #1a1228;
    border-radius: 50px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

body#homepage4 .h6v-chan:hover {
    background: #f2f2f2;
}

/* Réassurance */
body#homepage4 .h6v-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

body#homepage4 .h6v-trust i {
    color: #2eea8b;
    margin-right: 8px;
}

/* Offre blanche */
body#homepage4 .h6v-section--offer {
    border: 2px solid rgba(252, 97, 148, 0.45);
    box-shadow: 0 12px 36px rgba(252, 97, 148, 0.18), 0 0 0 1px rgba(252, 97, 148, 0.08);
    background: linear-gradient(135deg, #fff 0%, #fff8fb 55%, #ffe8f2 100%);
}

body#homepage4 .h6v-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
}

body#homepage4 .h6v-offer-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: 0.85rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #fc6194 0%, #e84a7f 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(252, 97, 148, 0.35);
    text-align: center;
}

body#homepage4 .h6v-offer-amount {
    display: block;
    font-family: Volkhov, Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body#homepage4 .h6v-offer-badge-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.95;
}

body#homepage4 .h6v-offer-text {
    flex: 1 1 280px;
    min-width: 0;
}

body#homepage4 .h6v-offer-text h2 {
    font-family: Volkhov, Georgia, serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: 0.35rem;
    color: #1a1228;
}

body#homepage4 .h6v-offer-text p {
    color: #4a3f5c;
    margin: 0;
    max-width: 36rem;
}

body#homepage4 .h6v-offer-minutes {
    margin-top: 0.55rem !important;
    font-weight: 700;
    color: #9b3366 !important;
}

body#homepage4 .h6v-offer-minutes i {
    color: #fc6194;
    margin-right: 0.35rem;
}

body#homepage4 .h6v-offer-reward {
    margin-top: 0.65rem !important;
    margin-bottom: 0 !important;
    font-weight: 600;
    color: #7c2d5a !important;
    font-size: 0.95rem;
}

body#homepage4 .h6v-offer-reward i {
    color: #fc6194;
    margin-right: 0.35rem;
}

body#homepage4 .h6v-offer-waitlist {
    display: inline-block;
    margin: 0.65rem 0 0 !important;
    padding: 0.45rem 0.8rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #7c2d5a !important;
    background: rgba(252, 97, 148, 0.12);
    border: 1px solid rgba(252, 97, 148, 0.3);
    border-radius: 0.5rem;
}

body#homepage4 .h6v-offer-waitlist i {
    color: #fc6194;
    margin-right: 0.35rem;
}

body#homepage4 .h6v-hero-prelaunch {
    margin: 1rem 0 0;
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.88);
}

body#homepage4 .h6v-hero-prelaunch i {
    color: #fc6194;
    margin-right: 0.35rem;
}

body#homepage4 .h6v-hero-prelaunch a {
    color: #ffd7e6;
    text-decoration: underline;
    font-weight: 600;
}

body#homepage4 .h6v-hero-prelaunch a:hover {
    color: #fff;
}

body#homepage4 .h6v-offer-cta {
    flex: 0 0 auto;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(252, 97, 148, 0.35);
}

body#homepage4 .h6v-offers-paid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body#homepage4 .h6v-offer-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    background: #f6e4ee;
    color: #1a1228;
    text-decoration: none;
    border: 1.5px solid rgba(252, 97, 148, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

body#homepage4 .h6v-offer-card:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: #ffe0ec;
    background: #fc6194 !important;
    box-shadow: 0 0 0 4px rgba(252, 97, 148, 0.35), 0 18px 36px rgba(252, 97, 148, 0.5);
    color: #fff;
}

body#homepage4 .h6v-offer-card:hover .h6v-offer-card-price,
body#homepage4 .h6v-offer-card:hover .h6v-offer-card-title,
body#homepage4 .h6v-offer-card:hover .h6v-offer-card-sub {
    color: #fff;
}

body#homepage4 .h6v-offer-card:active {
    transform: scale(0.96);
    background: #c73366 !important;
    border-color: #c73366;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body#homepage4 .h6v-offer-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body#homepage4 .h6v-offer-card-img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    transition: transform 0.35s ease;
}

body#homepage4 .h6v-offer-card:hover .h6v-offer-card-img {
    transform: scale(1.08);
}

body#homepage4 .h6v-offer-card-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px 12px;
    background: inherit;
}

body#homepage4 .h6v-offer-pill-img {
    width: 28px;
    height: 28px;
    margin-left: -8px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

@media (max-width: 900px) {
    body#homepage4 .h6v-offer-card-img {
        height: 96px;
    }
}

body#homepage4 .h6v-offer-card-price {
    font-weight: 800;
    color: #e84a7f;
    font-size: 1.05rem;
    line-height: 1.2;
}

body#homepage4 .h6v-offer-card-title {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.25;
    color: #1a1228;
}

body#homepage4 .h6v-offer-card-sub {
    font-size: 0.78rem;
    line-height: 1.3;
    color: #6b5870;
}

body#homepage4 .h6v-offers-free {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

body#homepage4 .h6v-offers-free a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 0.88rem;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

body#homepage4 .h6v-offers-free a:hover {
    color: #fff !important;
    background: #fc6194;
    border-color: #ffe0ec;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 0 0 3px rgba(252, 97, 148, 0.35);
}

body#homepage4 .h6v-offers-free a:active {
    transform: scale(0.96);
    background: #c73366;
    box-shadow: none;
}

body#homepage4.h6v-lumiere .h6v-band--light .h6v-offers-free a {
    color: #1f1f1f;
    border-color: rgba(31, 31, 31, 0.22);
    background: rgba(31, 31, 31, 0.04);
}

body#homepage4.h6v-lumiere .h6v-band--light .h6v-offers-free a:hover {
    color: #fff !important;
    background: #1f1f1f;
    border-color: #1f1f1f;
}

body#homepage4.h6v-lumiere .h6v-band--dark .h6v-offers-free a {
    color: #f6f0e6;
}

body#homepage4.h6v-lumiere .h6v-band--dark .h6v-offers-free a:hover {
    color: #1a1228;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    body#homepage4 .h6v-offer-card,
    body#homepage4 .h6v-offers-free a {
        transition: none;
    }
    body#homepage4 .h6v-offer-card:hover,
    body#homepage4 .h6v-offer-card:active,
    body#homepage4 .h6v-offers-free a:hover,
    body#homepage4 .h6v-offers-free a:active {
        transform: none;
    }
}

@media (max-width: 900px) {
    body#homepage4 .h6v-offers-paid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body#homepage4 .h6v-section--white .h4-section-title {
    color: #1a1228;
}

body#homepage4 .h6v-section--dark .h4-see-all {
    color: #fc6194;
}

/* Rangées horizontales */
body#homepage4 .h6v-row {
    position: relative;
}

body#homepage4 .h6v-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 14px;
    scrollbar-width: none;
}

body#homepage4 .h6v-track::-webkit-scrollbar { display: none; }

body#homepage4 .h6v-arrow {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 58px;
    border: 0;
    border-radius: 10px;
    background: #000;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

body#homepage4 .h6v-row:hover .h6v-arrow { opacity: 0.92; }

body#homepage4 .h6v-arrow-l { left: -6px; }
body#homepage4 .h6v-arrow-r { right: -6px; }

/* Mini cartes IA : image + nom en dessous */
body#homepage4 .h6v-mini {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

body#homepage4 .h6v-mini img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: block;
    transition: border-color 0.2s ease;
}

body#homepage4 .h6v-mini:hover img {
    border-color: #fc6194;
}

body#homepage4 .h6v-mini-name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
}

/* Séances groupe : cartes blanches — sobre, aligné grille top voyants */
body#homepage4 .h6v-group-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    color: #1a1228;
    border-radius: 12px;
    padding: 1.15rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: none;
    box-shadow: 0 8px 24px rgba(26, 18, 40, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body#homepage4 .h6v-group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 18, 40, 0.16);
}

body#homepage4 .h6v-section--club-promo {
    margin-top: 0.5rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(155, 51, 102, 0.22) 0%, rgba(252, 97, 148, 0.12) 100%);
    border: 1px solid rgba(255, 200, 120, 0.28);
}

body#homepage4 .h6v-section--club-promo .h4-section-title {
    color: #fff;
}

body#homepage4 .h6v-group-card--club {
    flex: 0 0 320px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(155, 51, 102, 0.35);
}

body#homepage4 .h6v-group-media {
    position: relative;
    width: 100%;
    height: 190px;
    max-height: 190px;
    overflow: hidden;
    background: #1a1228;
}

body#homepage4 .h6v-group-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body#homepage4 .h6v-group-card--club .h6v-group-body {
    padding: 1rem 1.15rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

body#homepage4 .h6v-group-datetime--club {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(155, 51, 102, 0.12) 0%, rgba(252, 97, 148, 0.08) 100%);
    border: 1px solid rgba(155, 51, 102, 0.2);
}

body#homepage4 .h6v-group-datetime--club .fa-calendar {
    color: #9b3366;
    font-size: 0.85rem;
    flex-shrink: 0;
}

body#homepage4 .h6v-group-datetime-date {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1228;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

body#homepage4 .h6v-group-datetime-sep {
    color: rgba(155, 51, 102, 0.45);
    font-weight: 700;
}

body#homepage4 .h6v-group-datetime-time {
    font-size: 1.12rem;
    font-weight: 800;
    color: #9b3366;
    letter-spacing: 0.02em;
    line-height: 1;
}

body#homepage4 .h6v-group-format-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin: 0.15rem 0 0.05rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9b3366;
}

body#homepage4 .h6v-group-format-badge .fa-video {
    font-size: 0.78rem;
}

body#homepage4 .h6v-group-format-dot {
    opacity: 0.55;
    font-weight: 800;
}

body#homepage4 .h6v-group-card--club .h6v-group-name {
    margin-top: 0.1rem;
}

body#homepage4 .h6v-group-format-hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #6b5f7a;
}

body#homepage4 .h6v-group-date {
    color: #6b5f7a;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body#homepage4 .h6v-group-date i {
    color: #9b3366;
    margin-right: 0.35rem;
    font-size: 0.68rem;
}

body#homepage4 .h6v-group-name {
    font-family: inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0.15rem 0 0;
    letter-spacing: -0.01em;
}

body#homepage4 .h6v-group-with {
    font-size: 0.8rem;
    color: #8a8194;
    margin: 0;
}

body#homepage4 .h6v-group-foot {
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(26, 18, 40, 0.08);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

body#homepage4 .h6v-group-foot > strong {
    color: #1a1228;
    font-size: 0.95rem;
    font-weight: 700;
}

body#homepage4 .h6v-group-actions {
    display: flex;
    gap: 0.45rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

body#homepage4 .h6v-group-actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1.2;
    white-space: nowrap;
}

body#homepage4 .h6v-group-actions .h4-btn-outline {
    background: #faf9fb !important;
    border: 1px solid #d8d2de !important;
    color: #1a1228 !important;
}

body#homepage4 .h6v-group-actions .h4-btn-outline:hover {
    background: #f0ecf2 !important;
    border-color: #b8b0c0 !important;
    color: #1a1228 !important;
    transform: none;
}

body#homepage4 .h6v-group-actions .h4-btn-primary {
    background: #9b3366 !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none;
}

body#homepage4 .h6v-group-actions .h4-btn-primary:hover {
    background: #7e2954 !important;
    opacity: 1;
    transform: none;
    color: #fff !important;
}

/* Sticky */
body#homepage4 .h6v-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #000;
    border-top: 2px solid #fc6194;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    transform: translateY(110%);
    transition: transform 0.35s ease;
}

body#homepage4 .h6v-sticky.is-visible { transform: translateY(0); }

body#homepage4 .h6v-sticky-info {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

body#homepage4 .h6v-countdown {
    color: #fc6194;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body#homepage4 .h6v-sticky-session-link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    max-width: min(52vw, 420px);
}

body#homepage4 .h6v-sticky-session-link:hover {
    color: #f5a8c4;
}

body#homepage4 .h6v-sticky-session-kicker {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

body#homepage4 .h6v-sticky-session-detail {
    font-size: 0.82rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

body#homepage4 .h6v-sticky-session-detail strong {
    color: #fff;
    font-weight: 700;
}

body#homepage4 .h6v-sticky-session-pro {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
}

body#homepage4 .h6v-sticky-session-more {
    color: #f5a8c4;
    font-weight: 600;
}

body#homepage4:has(.h6v-sticky.is-visible) .voyanz-fab-assistant { bottom: 64px !important; }

/* ===== home6 — hero "interviews" en pleine largeur (full-bleed) ===== */
body#homepage4 .h6v-section--hero {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: var(--space-4, 34px);
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
}

body#homepage4 .h6v-section--hero .h4-section-header {
    margin-bottom: var(--space-3, 21px);
}

/* home6 — hero fallback « Réservez » (aucun voyant en direct) */
body#homepage4 .h6v-section--hero-book .h6v-hero-book-lead {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    max-width: 52rem;
}

body#homepage4 .h6v-feature-slot,
body#homepage4 .h6v-poster-badge--book {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e8a317;
    color: #1a1200;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 700;
}

body#homepage4 .h6v-feature-slotline {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
}

/* Bascule en ligne / hors ligne des actions de vignette.
   La carte rend TOUJOURS les deux jeux de boutons ; seule cardpro-actions-offline
   décide lequel s'affiche. C'est ce qui permet au gestionnaire WebSocket existant
   (qui ne fait qu'ajouter/retirer cette classe) de rétablir Chat/Appel/Vidéo sans
   rechargement quand un voyant repasse en ligne.
   Non scopé à body#homepage4 : cardpro.eta sert aussi /fr/list et seo-landing. */
.cardpro-action-book { display: none; }

/* cardpro-actions-book = la carte a une réservation possible (jamais un assistant IA).
   Sans ce marqueur, une carte d'assistant passée hors ligne n'afficherait plus rien. */
.cardpro-actions-book.cardpro-actions-offline {
    opacity: 1 !important;
    filter: none !important;
    flex-direction: column;
    gap: 6px;
}

.cardpro-actions-book.cardpro-actions-offline .cardpro-action-live {
    display: none;
}

.cardpro-actions-book.cardpro-actions-offline .cardpro-action-book {
    display: flex;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(252, 97, 148, 0.12);
    border: 1px solid rgba(252, 97, 148, 0.45);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    text-align: center;
}

.cardpro-actions-book.cardpro-actions-offline .cardpro-action-alert {
    background: rgba(232, 163, 23, 0.15);
    border-color: rgba(232, 163, 23, 0.55);
}

.cardpro-content:hover .cardpro-actions-book.cardpro-actions-offline .cardpro-action-book {
    transform: none;
    opacity: 1 !important;
}

/* ===== home6 — nom des posters hero uniformisé (blanc, comme les autres cartes) ===== */
body#homepage4 .h6v-poster-cap strong { color: #fff; }

/* ===== home6 — carte pro UNIFIÉE (rangées "Top des voyants" + "IA"), même look + bandeau prix ===== */
body#homepage4 .h6v-pcard {
    flex: 0 0 auto;
    width: clamp(175px, 15vw, 220px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}
body#homepage4 .h6v-pcard-media {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.18);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
body#homepage4 .h6v-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body#homepage4 .h6v-pcard:hover .h6v-pcard-media { transform: translateY(-2px); border-color: #fc6194; }

/* ===== home6 — section IA en grille pleine largeur (pas de carrousel, cartes agrandies) ===== */
body#homepage4 .h6v-ia-grid {
    display: grid;
    grid-template-columns: repeat(var(--h6v-ia-cols, 5), 1fr);
    gap: 18px;
    width: 100%;
}
body#homepage4 .h6v-ia-grid .h6v-pcard--ia {
    width: 100%;
    scroll-snap-align: none;
}
@media (max-width: 991px) {
    body#homepage4 .h6v-ia-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    body#homepage4 .h6v-ia-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* IA voyance — pleine largeur, cartes plus visibles (allègement sans miniaturiser) */
body#homepage4 .h6v-ia.h6v-section--dark {
    padding: 1.5rem 1.25rem 1.75rem;
}
body#homepage4 .h6v-ia .h4-section-header {
    margin-bottom: 12px;
}
body#homepage4 .h6v-ia-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fc6194, #e23b78);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
body#homepage4 .h6v-ia .h4-section-title {
    font-size: 1.4rem;
    letter-spacing: 1.5px;
}
body#homepage4 .h6v-ia-grid--compact {
    grid-template-columns: repeat(var(--h6v-ia-cols, 5), minmax(0, 1fr));
    justify-content: stretch;
    gap: 18px;
    width: 100%;
    max-width: none;
}
body#homepage4 .h6v-ia-grid--compact .h6v-pcard-media {
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    border-width: 2px;
}
body#homepage4 .h6v-ia-grid--compact .h6v-pcard-cap {
    font-size: 0.82rem;
    gap: 2px;
}
body#homepage4 .h6v-ia-grid--compact .h6v-pcard-cap strong {
    font-size: 0.95rem;
    line-height: 1.25;
}
body#homepage4 .h6v-ia-grid--compact .h6v-pcard-price {
    font-size: 0.76rem;
}
body#homepage4 .h6v-ia-card-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 8px 10px;
    background: linear-gradient(135deg, #fc6194, #e23b78);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}
body#homepage4 .h6v-ia-grid--compact .h6v-pcard-badge {
    top: 6px;
    left: 6px;
    font-size: 0.65rem;
    padding: 3px 8px;
    gap: 5px;
}
@media (max-width: 991px) {
    body#homepage4 .h6v-ia-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    body#homepage4 .h6v-ia-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}
body#homepage4 .h6v-ia-grid--compact > .h6v-pcard--ia:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(240px, 100%);
}
/* IA unique : bloc de présentation (image + promesse mémoire + CTA vers /voyant-ia) */
body#homepage4 .h6v-iapromo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(232, 197, 71, 0.35);
    background: radial-gradient(ellipse at top left, #3a2364 0%, #1d1238 55%, #120a24 100%);
    color: #f3eefc;
}
body#homepage4 .h6v-iapromo-media {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
body#homepage4 .h6v-iapromo-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}
body#homepage4 .h6v-iapromo-media:hover img {
    transform: scale(1.03);
}
body#homepage4 .h6v-iapromo-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(18, 10, 36, 0.8);
    color: #f5e6c8;
    font-size: 0.8rem;
    font-weight: 700;
}
body#homepage4 .h6v-iapromo-eyebrow {
    margin: 0 0 8px;
    color: #e8c547;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
body#homepage4 .h6v-iapromo-title {
    margin: 0 0 12px;
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 1.15;
    color: #f5e6c8;
}
body#homepage4 .h6v-iapromo-lead {
    margin: 0 0 16px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(243, 238, 252, 0.88);
}
body#homepage4 .h6v-iapromo-points {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
body#homepage4 .h6v-iapromo-points li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 0.98rem;
    line-height: 1.45;
}
body#homepage4 .h6v-iapromo-points i {
    flex: 0 0 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(232, 197, 71, 0.15);
    color: #e8c547;
    font-size: 0.85rem;
}
body#homepage4 .h6v-iapromo-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fc6194, #e23b78);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(226, 59, 120, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body#homepage4 .h6v-iapromo-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(226, 59, 120, 0.55);
}
body#homepage4 .h6v-iapromo-note {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: rgba(243, 238, 252, 0.65);
}
@media (max-width: 767px) {
    body#homepage4 .h6v-iapromo {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 16px;
    }
    body#homepage4 .h6v-iapromo-media img {
        aspect-ratio: 16 / 9;
    }
    body#homepage4 .h6v-iapromo-title {
        font-size: 1.6rem;
    }
    body#homepage4 .h6v-iapromo-cta {
        width: 100%;
        justify-content: center;
    }
}
body#homepage4 .h6v-pcard-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.65rem;
    font-weight: 700;
}
body#homepage4 .h6v-pcard-badge--rank { background: #fc6194; }
body#homepage4 .h6v-pcard-badge--ia { background: linear-gradient(135deg, #a855f7, #7c3aed); }
body#homepage4 .h6v-pcard-cap { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; line-height: 1.2; }
body#homepage4 .h6v-pcard-cap strong { font-weight: 700; color: #fff; }
body#homepage4 .h6v-pcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body#homepage4 .h6v-pcard-price { color: #ffd9a0; font-size: 0.76rem; font-weight: 600; }
body#homepage4 .h6v-pcard-price--free { color: #2eea8b; }
body#homepage4 .h6v-pcard-note { color: #f0a13c; font-size: 0.76rem; font-weight: 600; }

/* ===== home6 — FIX textes blancs sur fond clair (surcharge `.h4-content h* { color:#fff !important }` global) ===== */
body#homepage4 .h4-content .h6v-offer-text h2,
body#homepage4 .h4-content .h6v-offer-text p { color: #1a1228 !important; }
body#homepage4 .h4-content .h6v-group-card .h6v-group-name { color: #1a1228 !important; }

/* ===== home6 — piliers comme home3/home4 (fond sombre "glass"), sans la marge négative du hero ===== */
body#homepage4 .h6v-pillars { margin-top: 0; }

@media (max-width: 991.98px) {
    body#homepage4 .h6v-poster-video {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body#homepage4 .h6v-hero-row-wrap { gap: 6px; }
    body#homepage4 .h6v-hero-nav { width: 32px; height: 32px; font-size: 0.78rem; }
    body#homepage4 .h6v-hero-row { --h6v-hero-h: 200px; }
    body#homepage4 .h6v-feature { aspect-ratio: 4 / 3; }
    body#homepage4 .h6v-feature-gift { top: 8px; right: 46px; font-size: 0.66rem; padding: 3px 8px; }
    body#homepage4 .h6v-feature-play { width: 52px; height: 52px; font-size: 1rem; }
    body#homepage4 .h6v-feature-cap-name { font-size: 0.98rem; }
    body#homepage4 .h6v-section--hero { padding-left: 14px; padding-right: 14px; }
    body#homepage4 .h6v-pcard { width: clamp(150px, 44vw, 195px); }
    body#homepage4 .h6v-section--white,
    body#homepage4 .h6v-section--dark {
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
    }
    body#homepage4 .h6v-offer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    body#homepage4 .h6v-offer-badge {
        align-self: center;
    }
    body#homepage4 .h6v-offer-cta {
        width: 100%;
    }
    body#homepage4 .h6v-sticky-cd { display: none; }
    body#homepage4:has(.h6v-sticky.is-visible) .voyanz-fab-assistant { bottom: 58px !important; }
}

/* ===== home6 — pilote B49 mur reels + avis sidebar (rollback : retirer ce bloc + partial) ===== */
body#homepage4 .h6v-blogs-section {
    margin-top: var(--space-4, 34px);
    margin-bottom: var(--space-3, 21px);
}
body#homepage4 .h6v-seo-intro {
    margin-bottom: var(--space-3, 21px);
}
body#homepage4 .h6v-social-reviews-row {
    margin-top: 0;
    align-items: stretch;
}
body#homepage4 .h6v-social-wall-panel {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
}
body#homepage4 .h6v-social-wall {
    min-width: 0;
}
body#homepage4 .h6v-social-reviews-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body#homepage4 .h6v-social-reviews-sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-3, 21px);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.3;
}
body#homepage4 .h6v-social-reviews-scroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 13px);
    max-height: min(520px, 70vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
body#homepage4 .h6v-social-reviews-scroll::-webkit-scrollbar {
    width: 6px;
}
body#homepage4 .h6v-social-reviews-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
}
body#homepage4 .h6v-social-reviews-empty {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}
body#homepage4 .h6v-social-review-stack.cardreview {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 14px 14px 12px;
    scroll-snap-align: unset;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
body#homepage4 .h6v-social-review-stack .cardreview-title {
    font-size: 0.95rem;
    line-height: 1.25;
    margin: 10px 0 6px;
}
body#homepage4 .h6v-social-review-stack .cardreview-text {
    font-size: 0.82rem;
    line-height: 1.35;
}
body#homepage4 .h6v-social-wall-pilot-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.15);
    color: #ffe082;
    display: inline-block;
}
body#homepage4 .h6v-social-wall-eyebrow {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    margin: 0;
}
body#homepage4 .h6v-social-wall-lead {
    color: rgba(255, 255, 255, 0.82);
    max-width: 52rem;
    margin-bottom: 1rem;
}
body#homepage4 .h6v-social-wall-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
}
body#homepage4 .h6v-social-wall-card {
    flex: 0 0 clamp(150px, 28vw, 190px);
    scroll-snap-align: start;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
body#homepage4 .h6v-social-wall-card:hover,
body#homepage4 .h6v-social-wall-card:focus-visible {
    color: #fff;
    text-decoration: none;
}
body#homepage4 .h6v-social-wall-card-media {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1228;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
body#homepage4 .h6v-social-wall-poster,
body#homepage4 .h6v-social-wall-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body#homepage4 .h6v-social-wall-video {
    z-index: 1;
}
body#homepage4 .h6v-social-wall-network {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.9rem;
}
body#homepage4 .h6v-social-wall-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
}
body#homepage4 .h6v-social-wall-card-title {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
}
body#homepage4 .h6v-social-wall-card-network-label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 991px) {
    body#homepage4 .h6v-social-wall-panel,
    body#homepage4 .h6v-social-reviews-sidebar {
        padding: 1.25rem 1rem 1.5rem;
    }
    body#homepage4 .h6v-social-reviews-scroll {
        max-height: min(400px, 55vh);
    }
    body#homepage4 .h6v-social-wall-card {
        flex: 0 0 clamp(128px, 20vw, 168px);
    }
    body#homepage4 .h6v-social-wall-track {
        gap: 12px;
        scroll-padding-inline: 4px;
    }
}
@media (max-width: 767px) {
    body#homepage4 .h6v-social-reviews-row {
        --bs-gutter-y: var(--space-3, 21px);
    }
    body#homepage4 .h6v-social-wall-panel,
    body#homepage4 .h6v-social-reviews-sidebar {
        padding: 1rem 0.85rem 1.2rem;
        border-radius: 14px;
    }
    body#homepage4 .h6v-social-wall-title-wrap .h4-section-title {
        font-size: clamp(1.05rem, 4.5vw, 1.35rem);
        line-height: 1.25;
    }
    body#homepage4 .h6v-social-wall-lead {
        font-size: 0.88rem;
        margin-bottom: 0.75rem;
    }
    body#homepage4 .h6v-social-reviews-sidebar-title {
        margin-bottom: var(--space-2, 13px);
    }
    body#homepage4 .h6v-social-reviews-scroll {
        max-height: min(360px, 48vh);
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    body#homepage4 .h6v-social-wall-track {
        gap: 10px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.85rem;
        padding-bottom: 0.25rem;
    }
    body#homepage4 .h6v-social-wall-card {
        flex: 0 0 clamp(128px, 38vw, 152px);
        scroll-snap-align: start;
    }
    body#homepage4 .h6v-social-wall-card-media {
        border-radius: 12px;
    }
    body#homepage4 .h6v-social-wall-card-title {
        font-size: 0.8rem;
    }
    body#homepage4 .h6v-social-review-stack.cardreview {
        padding: 12px;
    }
    body#homepage4 .h6v-blogs-section {
        margin-top: var(--space-4, 34px);
    }
}
@media (max-width: 767px) and (display-mode: standalone) {
    body#homepage4 .h6v-social-reviews-scroll {
        max-height: min(320px, 42vh);
    }
}

/* I2 Fibonacci design tokens (B1) — 28/08/2026 — new pages/components only; no retrofit */
:root {
    --space-1: 8px;
    --space-2: 13px;
    --space-3: 21px;
    --space-4: 34px;
    --space-5: 55px;
    --fs-base: 1rem;
    --fs-1: 1rem;
    --fs-2: 1.618rem;
    --fs-3: 2.618rem;
    --fs-4: 4.236rem;
    --fs-5: 6.854rem;
}

/* ============================================================================
   VIDÉO DE GROUPE — RESPONSIVE TÉLÉPHONE / TABLETTE (02/09/2026)

   Contexte : la grille de groupe (.agora-group-grid et ses variantes de layout)
   n'avait aucune media query. Un téléphone recevait donc la même grille 3x3
   qu'un écran de bureau : tuiles de 114 px de large, visages illisibles, et
   l'autoscopie « Vous » (160x120) masquait 2 participants sur 9.
   Mesures et captures : docs/ANALYSE_CLUB_VOYANZ_ET_RESPONSIVE_GROUPE_2026-09-02.md

   ⚠️ Le JS (views/commons/script/video/video-agora-group.eta, updateGroupLayout)
   pose grid-template-columns / -rows / gap / padding en style INLINE sur
   #agora-group-grid, et min-height en inline sur chaque .agora-participant-wrapper.
   D'où les !important ci-dessous : ils ne surchargent que ce JS, rien d'autre.
   Aucune règle existante n'est modifiée — ce bloc n'ajoute que des media queries.
   ============================================================================ */

/* ---------- Téléphone en portrait : 2 colonnes au lieu de 3 ---------- */
@media (max-width: 768px) and (orientation: portrait) {

    /* ⚠️ CONFINEMENT OBLIGATOIRE — ne pas retirer.
       .agora-video-container reçoit `height: -webkit-fill-available` (mode immersif
       mobile, ~L9170). Cette valeur ne se résout pas contre une hauteur définie :
       le conteneur prend donc la hauteur de son CONTENU. Avec 3 lignes de grille le
       contenu tenait sous 100dvh et personne ne le voyait ; avec 5 lignes il pousse
       la barre de contrôles (donc « raccrocher ») hors de l'écran, et .mainpart2
       étant en overflow:hidden, elle devient inatteignable — mesuré le 02/09/2026.
       On borne donc la grille pour que la colonne entière tienne dans l'écran et
       que le dépassement se règle en scroll INTERNE à la grille.
       La réserve de 160px = en-tête (~80px) + barre de contrôles (~76px). */
    .agora-video-main {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #uservideo-video.agora-remote-video-container {
        min-height: 0 !important;
        max-height: calc(100vh - 160px) !important;
        max-height: calc(100dvh - 160px) !important;
        overflow: hidden !important;
    }

    /* Bande réservée en bas : la barre de contrôles (bottom 20px + 50px de haut)
       rognait la dernière ligne de la grille. */
    #agora-group-grid.agora-group-grid {
        min-height: 0 !important;
        max-height: calc(100vh - 160px) !important;
        max-height: calc(100dvh - 160px) !important;
        overflow-y: auto !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 2 participants : empilés verticalement plutôt que deux bandes étroites */
    #agora-group-grid.agora-group-layout-side-by-side {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 3-4 participants : la 2x2 est déjà le bon choix, on assouplit les hauteurs */
    #agora-group-grid.agora-group-layout-2x2 {
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 5-9 participants (cas plein d'une séance Club) : 2 colonnes, lignes
       automatiques. Tuiles ~177 px de large au lieu de 114 px, 6 visibles
       d'un coup, scroll pour les suivantes. */
    #agora-group-grid.agora-group-layout-3x3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(150px, 1fr) !important;
        gap: 10px !important;
        padding: 10px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #agora-group-grid.agora-group-layout-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(120px, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Les min-height en pixels posés par le JS sont calibrés pour un écran de
       bureau ; en portrait ce sont les lignes de la grille qui doivent décider. */
    #agora-group-grid.agora-group-layout-side-by-side .agora-participant-wrapper,
    #agora-group-grid.agora-group-layout-2x2 .agora-participant-wrapper {
        min-height: 0 !important;
    }

    #agora-group-grid.agora-group-layout-3x3 .agora-participant-wrapper {
        min-height: 150px !important;
    }

    #agora-group-grid.agora-group-layout-compact .agora-participant-wrapper {
        min-height: 120px !important;
    }

    /* Autoscopie « Vous » : 88x66 au lieu de 160x120, calée juste au-dessus de la
       barre de contrôles. Elle ne recouvre plus que le coin d'une seule tuile. */
    body.voyanz-video-immersive .agora-local-video-container,
    .agora-local-video-container {
        width: 88px !important;
        height: 66px !important;
        right: 8px !important;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ---------- Téléphone en paysage : écran large et très bas ----------
   Ciblé par la hauteur (max-height) et non par la largeur : un iPhone en
   paysage fait 844 px de large et n'entrait donc dans aucune media query
   « mobile » existante. */
@media (orientation: landscape) and (max-height: 500px) {

    /* Ces min-height de 400/450 px (dont deux posés en inline par le JS)
       dépassaient à eux seuls la hauteur de l'écran : c'est la cause du
       débordement et du scroll, même à un seul participant. */
    .agora-video-main {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #uservideo-video.agora-remote-video-container {
        min-height: 0 !important;
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        overflow: hidden !important;
    }

    /* Même confinement qu'en portrait (cf. commentaire plus haut) : la barre de
       contrôles doit rester dans l'écran. Réserve 130px = en-tête + contrôles. */
    #agora-group-grid.agora-group-grid {
        min-height: 0 !important;
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        overflow-y: auto !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #agora-group-grid.agora-group-grid .agora-participant-wrapper {
        min-height: 0 !important;
    }

    /* 3-4 participants : une seule rangée, tuiles hautes */
    #agora-group-grid.agora-group-layout-2x2 {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 10px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 5-9 participants : ~5 colonnes sur 2 rangées, soit 10 emplacements —
       les 9 participants d'une séance Club tiennent sans scroll. */
    #agora-group-grid.agora-group-layout-3x3,
    #agora-group-grid.agora-group-layout-compact {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(88px, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Un téléphone en paysage fait ~844px de large : il n'entre dans AUCUNE des
       media queries « mobile » existantes (max-width: 768px), donc les boutons
       gardaient leur taille de bureau (60px) et la barre montait à 101px de haut,
       repassant sous les tuiles. On reprend ici les tailles tactiles mobiles.
       48px reste au-dessus du minimum recommandé de 44px. */
    .agora-controls-bar {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .agora-controls-bar .agora-control-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 17px !important;
    }

    .agora-controls-bar .agora-control-btn i {
        font-size: 17px !important;
    }

    .agora-controls-bar .agora-control-btn-hangup {
        width: 52px !important;
        height: 52px !important;
        font-size: 18px !important;
    }

    body.voyanz-video-immersive .agora-local-video-container,
    .agora-local-video-container {
        width: 84px !important;
        height: 63px !important;
        right: 8px !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   Pilote homepage « Nuit Céleste & Or Voyanz » — body.h6v-lumiere
   Harmonie raffinée : nuit améthyste adoucie d'une lumière stellaire champagne,
   noblesse des reflets soyeux, préservation de l'identité framboise et or Voyanz.
   Zéro cartoon, zéro aplat criard, typographie et liserés ciselés.
   Activé sur /fr/home2 (staging). La home /fr/home reste le sombre d'origine.
   ============================================ */

/* Fond nuit céleste aéré et lumineux : base améthyste satinée + vagues de lumière diffuse */
body#homepage4.h6v-lumiere,
body#homepage4.h6v-soleil,
body#homepage4.h6v-lumiere turbo-frame#main-content,
body#homepage4.h6v-soleil turbo-frame#main-content {
    background:
        radial-gradient(ellipse 95% 55% at 50% -5%, rgba(255, 235, 175, 0.22), transparent 70%),
        radial-gradient(ellipse 70% 50% at 90% 20%, rgba(252, 97, 148, 0.14), transparent 65%),
        radial-gradient(ellipse 65% 45% at 10% 40%, rgba(222, 179, 82, 0.12), transparent 65%),
        radial-gradient(ellipse 80% 55% at 50% 85%, rgba(252, 97, 148, 0.10), transparent 70%),
        linear-gradient(180deg, #1f1238 0%, #29164b 28%, #2e1754 55%, #241243 80%, #170b2c 100%) !important;
    color: #fff !important;
}

body#homepage4.h6v-lumiere .h6v-page,
body#homepage4.h6v-soleil .h6v-page {
    background: transparent !important;
    color: #fff !important;
}

/* Header & Toptop : préserve la légèreté et les couleurs authentiques du logo Voyanz */
body#homepage4.h6v-lumiere .toptop,
body#homepage4.h6v-soleil .toptop,
body#homepage4.h6v-lumiere .m-navbar,
body#homepage4.h6v-soleil .m-navbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body#homepage4.h6v-lumiere .m-navbar.m-navbar--home3-scrolled,
body#homepage4.h6v-soleil .m-navbar.m-navbar--home3-scrolled {
    background: rgba(26, 15, 48, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35) !important;
}

body#homepage4.h6v-lumiere .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-soleil .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-lumiere .m-navbar .voyanz-nav-dropdown-trigger,
body#homepage4.h6v-soleil .m-navbar .voyanz-nav-dropdown-trigger {
    color: #fff !important;
}

body#homepage4.h6v-lumiere .toptop-brand,
body#homepage4.h6v-soleil .toptop-brand {
    background: linear-gradient(165deg, #ffffff 0%, #fef4e2 42%, #eacb88 80%, #fc6194 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 10px rgba(252, 97, 148, 0.35)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.15)) !important;
}

/* Le logo Voyanz conserve son éclat et ses reflets authentiques (pas de noir aplati) */
body#homepage4.h6v-lumiere .mylogo,
body#homepage4.h6v-soleil .mylogo {
    filter: drop-shadow(0 2px 8px rgba(243, 210, 130, 0.25)) !important;
}

/* Boutons navbar : finesse et distinction (rose framboise et nacre givrée) */
body#homepage4.h6v-lumiere .m-navbar-buttons .voyanz-nav-auth-btn:first-child,
body#homepage4.h6v-lumiere .m-navbar-buttons .btn-secondary {
    background: linear-gradient(135deg, #fc6194 0%, #e04479 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(252, 97, 148, 0.35) !important;
}

body#homepage4.h6v-lumiere .m-navbar-buttons .voyanz-nav-auth-btn:last-child,
body#homepage4.h6v-lumiere .m-navbar-buttons .btn-primary {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

body#homepage4.h6v-lumiere .m-navbar-buttons .voyanz-nav-auth-btn:last-child:hover,
body#homepage4.h6v-lumiere .m-navbar-buttons .btn-primary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #edd392 !important;
    color: #fff !important;
}

/* Titres & typographie noble */
body#homepage4.h6v-lumiere .h4-section-title,
body#homepage4.h6v-lumiere .h4-hero-title,
body#homepage4.h6v-lumiere .h6v-feature-title,
body#homepage4.h6v-lumiere .h4-content h1,
body#homepage4.h6v-lumiere .h4-content h2,
body#homepage4.h6v-lumiere .h4-content h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

body#homepage4.h6v-lumiere .h4-section-subtitle,
body#homepage4.h6v-lumiere .h4-hero-subtitle,
body#homepage4.h6v-lumiere .h4-hero-desc {
    color: rgba(255, 255, 255, 0.90) !important;
}

body#homepage4.h6v-lumiere .h6v-count {
    color: #38ef7d !important;
    text-shadow: 0 0 10px rgba(56, 239, 125, 0.45);
}

body#homepage4.h6v-lumiere .h6v-live-dot {
    background: #38ef7d !important;
    box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.6) !important;
}

/* Boutons principaux CTA : velours framboise soyeux & précieux (zéro néon, zéro cartoon) */
body#homepage4.h6v-lumiere .h4-btn-primary,
body#homepage4.h6v-soleil .h4-btn-primary,
body#homepage4.h6v-lumiere .h6v-offer-cta,
body#homepage4.h6v-soleil .h6v-offer-cta {
    background: linear-gradient(135deg, #e2497b 0%, #c83364 50%, #ae2251 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(200, 51, 100, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

body#homepage4.h6v-lumiere .h4-btn-primary:hover,
body#homepage4.h6v-soleil .h4-btn-primary:hover,
body#homepage4.h6v-lumiere .h6v-offer-cta:hover,
body#homepage4.h6v-soleil .h6v-offer-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200, 51, 100, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    opacity: 0.96;
}

body#homepage4.h6v-lumiere .h4-btn-outline,
body#homepage4.h6v-soleil .h4-btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(234, 213, 154, 0.35) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

body#homepage4.h6v-lumiere .h4-btn-outline:hover,
body#homepage4.h6v-soleil .h4-btn-outline:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #edd392 !important;
    color: #fff !important;
}

/* Écrin de l'Offre de Bienvenue : verre nacre céleste, liseré or fin et rose poudré */
body#homepage4.h6v-lumiere .h6v-section--offer,
body#homepage4.h6v-soleil .h6v-section--offer {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(248, 235, 245, 0.05) 50%, rgba(38, 20, 68, 0.55) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(234, 213, 154, 0.38) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 28px rgba(234, 213, 154, 0.12) !important;
    color: #ffffff !important;
}

body#homepage4.h6v-lumiere .h6v-section--offer h2,
body#homepage4.h6v-soleil .h6v-section--offer h2 {
    color: #ffffff !important;
    font-family: Volkhov, Georgia, serif !important;
    font-size: clamp(1.35rem, 2.5vw, 1.95rem) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

body#homepage4.h6v-lumiere .h6v-section--offer p,
body#homepage4.h6v-soleil .h6v-section--offer p {
    color: rgba(255, 248, 252, 0.88) !important;
    line-height: 1.55 !important;
}

/* Badge Offre : médaille d'or champagne satiné joaillerie */
body#homepage4.h6v-lumiere .h6v-offer-badge,
body#homepage4.h6v-soleil .h6v-offer-badge {
    background: linear-gradient(135deg, #F6E7C8 0%, #E2BE76 50%, #C99E4B 100%) !important;
    color: #26153B !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 22px rgba(226, 190, 118, 0.35) !important;
    border-radius: 16px !important;
}

body#homepage4.h6v-lumiere .h6v-offer-amount {
    color: #241338 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-lumiere .h6v-offer-badge-label {
    color: #3b2257 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-lumiere .h6v-offer-minutes,
body#homepage4.h6v-soleil .h6v-offer-minutes {
    color: #edd392 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 8px rgba(237, 211, 146, 0.25) !important;
}

body#homepage4.h6v-lumiere .h6v-feature-line strong,
body#homepage4.h6v-lumiere #h6vFeaturePrice {
    color: #edd392 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 6px rgba(237, 211, 146, 0.25);
}

body#homepage4.h6v-lumiere .h6v-trust li {
    color: rgba(255, 255, 255, 0.92) !important;
}

body#homepage4.h6v-lumiere .h6v-trust i {
    color: #edd392 !important;
}

/* Hero "En ligne maintenant" & Posters : liserés or fin et verre soyeux */
body#homepage4.h6v-lumiere .h6v-feature-slide {
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 20px rgba(246, 222, 145, 0.12);
}

body#homepage4.h6v-lumiere .h6v-feature-meta,
body#homepage4.h6v-soleil .h6v-feature-meta {
    background: rgba(26, 14, 48, 0.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(234, 213, 154, 0.28) !important;
    border-radius: 16px !important;
    color: #fff !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

body#homepage4.h6v-lumiere .h6v-feature-meta .h6v-top-stars {
    color: #f5cb5c !important;
}

/* Boutons de canaux (Chat, Appel, Profil) : pilules nacrées avec liseré or fin et icône framboise */
body#homepage4.h6v-lumiere .h6v-chan,
body#homepage4.h6v-soleil .h6v-chan {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(234, 213, 154, 0.45) !important;
    color: #211435 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

body#homepage4.h6v-lumiere .h6v-chan i,
body#homepage4.h6v-soleil .h6v-chan i {
    color: #c83364 !important;
}

body#homepage4.h6v-lumiere .h6v-chan:hover,
body#homepage4.h6v-soleil .h6v-chan:hover {
    background: #ffffff !important;
    border-color: #edd392 !important;
    color: #0e051d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(234, 213, 154, 0.3) !important;
}

body#homepage4.h6v-lumiere .h6v-chan:hover i,
body#homepage4.h6v-soleil .h6v-chan:hover i {
    color: #ae2251 !important;
}

body#homepage4.h6v-lumiere .h6v-poster-media,
body#homepage4.h6v-soleil .h6v-poster-media {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

body#homepage4.h6v-lumiere .h6v-poster-cap strong,
body#homepage4.h6v-soleil .h6v-poster-cap strong {
    color: #fff !important;
}

body#homepage4.h6v-lumiere .h6v-poster-cap span,
body#homepage4.h6v-soleil .h6v-poster-cap span {
    color: #edd392 !important;
}

/* "Nos voyants recommandés" : cartes écrin nacrées et lumineuses */
body#homepage4.h6v-lumiere .h6v-top-inner,
body#homepage4.h6v-soleil .h6v-top-inner {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body#homepage4.h6v-lumiere .h6v-top-inner:hover,
body#homepage4.h6v-soleil .h6v-top-inner:hover {
    border-color: rgba(252, 97, 148, 0.45) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 18px rgba(252, 97, 148, 0.2) !important;
    transform: translateY(-2px) !important;
}

body#homepage4.h6v-lumiere .h6v-top-name,
body#homepage4.h6v-soleil .h6v-top-name {
    color: #ffffff !important;
}

body#homepage4.h6v-lumiere .h6v-top-price,
body#homepage4.h6v-soleil .h6v-top-price {
    color: #edd392 !important;
}

body#homepage4.h6v-lumiere .h6v-top-stars,
body#homepage4.h6v-soleil .h6v-top-stars {
    color: #f5cb5c !important;
}

body#homepage4.h6v-lumiere .h6v-top-tag,
body#homepage4.h6v-soleil .h6v-top-tag {
    background: rgba(252, 97, 148, 0.16) !important;
    color: #ffb4cf !important;
    border: 1px solid rgba(252, 97, 148, 0.3) !important;
}

body#homepage4.h6v-lumiere .h4-see-all,
body#homepage4.h6v-soleil .h4-see-all {
    color: #edd392 !important;
    text-shadow: 0 0 10px rgba(237, 211, 146, 0.3);
}

/* Sections sombres adoucies (IA, avis) */
body#homepage4.h6v-lumiere .h6v-section--dark,
body#homepage4.h6v-soleil .h6v-section--dark,
body#homepage4.h6v-lumiere .h6v-social-wall-panel,
body#homepage4.h6v-soleil .h6v-social-wall-panel,
body#homepage4.h6v-lumiere .h6v-social-reviews-sidebar,
body#homepage4.h6v-soleil .h6v-social-reviews-sidebar {
    background: linear-gradient(180deg, rgba(30, 18, 54, 0.72) 0%, rgba(20, 12, 38, 0.85) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
    color: #fff !important;
}

/* Assistant Flottant (FAB) : améthyste et rose signature */
body#homepage4.h6v-lumiere .voyanz-fab-assistant .btn {
    background: linear-gradient(135deg, #fc6194 0%, #7b296b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(252, 97, 148, 0.3) !important;
}

body#homepage4.h6v-lumiere .voyanz-fab-assistant .btn:hover {
    border-color: #ffffff !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 24px rgba(252, 97, 148, 0.45) !important;
}

/* Bandeau Sticky : verre céleste chic avec liseré fin */
body#homepage4.h6v-lumiere .h6v-sticky,
body#homepage4.h6v-soleil .h6v-sticky {
    background: rgba(22, 13, 40, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
}

body#homepage4.h6v-lumiere .h6v-sticky-info,
body#homepage4.h6v-soleil .h6v-sticky-info,
body#homepage4.h6v-lumiere .h6v-sticky-session-pro,
body#homepage4.h6v-soleil .h6v-sticky-session-pro {
    color: #fff !important;
}

body#homepage4.h6v-lumiere .h6v-sticky-session-more,
body#homepage4.h6v-soleil .h6v-sticky-session-more,
body#homepage4.h6v-lumiere .h6v-countdown,
body#homepage4.h6v-soleil .h6v-countdown {
    color: #edd392 !important;
}

/* Footer : nuit mystique soignée avec fin liseré d'or */
body#homepage4.h6v-lumiere footer,
body#homepage4.h6v-soleil footer,
body#homepage4.h6v-lumiere .h4-content footer,
body#homepage4.h6v-soleil .h4-content footer {
    background: #100820 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body#homepage4.h6v-lumiere footer a,
body#homepage4.h6v-soleil footer a,
body#homepage4.h6v-lumiere .h4-content footer a,
body#homepage4.h6v-soleil .h4-content footer a {
    color: rgba(255, 255, 255, 0.65) !important;
}

body#homepage4.h6v-lumiere footer a:hover,
body#homepage4.h6v-soleil footer a:hover {
    color: #edd392 !important;
}

/* ===================================================
   Variante 2 : « Nuit Astrale & Pêche Poudrée » (?variant=peche)
   Teinte nude/soie réconfortante, idéale pour la voyance amour
   =================================================== */
body#homepage4.h6v-variant-peche,
body#homepage4.h6v-variant-peche turbo-frame#main-content {
    background:
        radial-gradient(ellipse 95% 55% at 50% -5%, rgba(255, 218, 193, 0.22), transparent 70%),
        radial-gradient(ellipse 70% 50% at 90% 20%, rgba(250, 160, 160, 0.16), transparent 65%),
        radial-gradient(ellipse 65% 45% at 10% 40%, rgba(244, 162, 140, 0.14), transparent 65%),
        radial-gradient(ellipse 80% 55% at 50% 85%, rgba(255, 200, 180, 0.12), transparent 70%),
        linear-gradient(180deg, #221437 0%, #2b1744 28%, #31184c 55%, #25123d 80%, #180a29 100%) !important;
}

body#homepage4.h6v-variant-peche .toptop-brand {
    background: linear-gradient(165deg, #ffffff 0%, #ffeedd 45%, #f4a28c 80%, #fc6194 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

body#homepage4.h6v-variant-peche .h4-btn-primary,
body#homepage4.h6v-variant-peche .h6v-offer-cta {
    background: linear-gradient(135deg, #f27289 0%, #e25875 50%, #c93b5d 100%) !important;
    box-shadow: 0 8px 24px rgba(226, 88, 117, 0.45) !important;
}

body#homepage4.h6v-variant-peche .h6v-offer-badge {
    background: linear-gradient(145deg, #f27289 0%, #d64768 100%) !important;
}

body#homepage4.h6v-variant-peche .h6v-section--offer {
    border: 1px solid rgba(244, 162, 140, 0.42) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38), 0 0 28px rgba(244, 162, 140, 0.15) !important;
}

body#homepage4.h6v-variant-peche .h6v-feature-line strong,
body#homepage4.h6v-variant-peche #h6vFeaturePrice,
body#homepage4.h6v-variant-peche .h6v-offer-minutes,
body#homepage4.h6v-variant-peche .h6v-top-price {
    color: #ffd8bf !important;
}

/* ===================================================
   Variante 3 : « Écrin Cashmere & Soie Crème » (?variant=cashmere)
   Pour tester une offre claire texturée en soie/parchemin haut de gamme
   sans la brutalité d'un blanc pur opaque
   =================================================== */
body#homepage4.h6v-variant-cashmere .h6v-section--offer {
    background: linear-gradient(145deg, #FAF7F2 0%, #F5EFE8 50%, #EFE7DC 100%) !important;
    border: 1px solid rgba(212, 168, 83, 0.45) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 0 24px rgba(234, 213, 154, 0.25) !important;
    color: #26163a !important;
}

body#homepage4.h6v-variant-cashmere .h6v-section--offer h2 {
    color: #211234 !important;
    font-family: Volkhov, Georgia, serif !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-cashmere .h6v-section--offer p {
    color: #4e3c60 !important;
}

body#homepage4.h6v-variant-cashmere .h6v-section--offer .h6v-offer-minutes {
    color: #b52f63 !important;
    text-shadow: none !important;
}

/* ===================================================
   Variante 4 : « Dégradé Sombre vs Dégradé Clair Opposé » (?variant=oppose)
   Alliance Yin-Yang : la nuit améthyste sombre en fond, opposée
   à un dégradé clair ascendant ivoire champagne -> quartz rose poudré
   =================================================== */
body#homepage4.h6v-variant-oppose .h6v-section--offer {
    background: linear-gradient(135deg, #FFFDF9 0%, #FFF3F7 45%, #FDE4ED 100%) !important;
    border: 1px solid rgba(252, 97, 148, 0.4) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 48px rgba(15, 6, 28, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 35px rgba(253, 228, 237, 0.3) !important;
    color: #210d32 !important;
}

body#homepage4.h6v-variant-oppose .h6v-section--offer h2 {
    color: #210d32 !important;
    font-family: Volkhov, Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-oppose .h6v-section--offer p {
    color: #4b365c !important;
}

body#homepage4.h6v-variant-oppose .h6v-section--offer .h6v-offer-minutes {
    color: #c4295e !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-oppose .h6v-section--offer .h6v-offer-badge {
    background: linear-gradient(135deg, #F8ECD2 0%, #E8CA88 50%, #CFA551 100%) !important;
    color: #26153B !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 20px rgba(232, 202, 136, 0.4) !important;
}

body#homepage4.h6v-variant-oppose .h6v-top-inner {
    background: linear-gradient(155deg, #FFFFFF 0%, #FFF8FA 60%, #FDF0F5 100%) !important;
    border: 1px solid rgba(252, 97, 148, 0.32) !important;
    box-shadow: 0 10px 26px rgba(10, 4, 20, 0.25) !important;
    color: #210d32 !important;
}

body#homepage4.h6v-variant-oppose .h6v-top-name {
    color: #210d32 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-oppose .h6v-top-price {
    color: #c4295e !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-oppose .h6v-top-tag {
    background: rgba(226, 73, 123, 0.08) !important;
    color: #af2152 !important;
    border: 1px solid rgba(226, 73, 123, 0.25) !important;
}

body#homepage4.h6v-variant-oppose .h6v-top-chan {
    background: #FAF2F6 !important;
    color: #af2152 !important;
    border: 1px solid rgba(226, 73, 123, 0.2) !important;
}

body#homepage4.h6v-variant-oppose .h6v-trust li {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 248, 0.9) 100%) !important;
    color: #210d32 !important;
    border: 1px solid rgba(252, 97, 148, 0.3) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.1rem !important;
    box-shadow: 0 4px 16px rgba(10, 4, 20, 0.2) !important;
}

body#homepage4.h6v-variant-oppose .h6v-trust i {
    color: #e2497b !important;
}

/* ===================================================
   Variante 5 : « Les Îlots Blanc Pur Joaillerie » (?variant=blanc)
   Notre violet sombre actuel conservé en atmosphère générale,
   mais des îlots de blanc pur bordés d'or sur l'offre, les voyants et la réassurance
   =================================================== */
body#homepage4.h6v-variant-blanc .h6v-section--offer {
    background: #FFFFFF !important;
    border: 1.5px solid #E2BE76 !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 48px rgba(12, 5, 25, 0.4), 0 0 25px rgba(226, 190, 118, 0.22) !important;
    color: #170A28 !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer h2 {
    color: #170A28 !important;
    font-family: Volkhov, Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer p {
    color: #48375C !important;
    font-size: 1.05rem !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer .h6v-offer-minutes {
    color: #B52258 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer .h6v-offer-badge {
    background: linear-gradient(135deg, #FAF0D8 0%, #E8CA86 50%, #CFA24A 100%) !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 6px 18px rgba(207, 162, 74, 0.35) !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer .h6v-offer-amount {
    color: #241138 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-blanc .h6v-section--offer .h6v-offer-badge-label {
    color: #3b2056 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-inner {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 190, 118, 0.45) !important;
    box-shadow: 0 10px 26px rgba(10, 4, 20, 0.25) !important;
    color: #170A28 !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-inner:hover {
    border-color: #E2BE76 !important;
    box-shadow: 0 14px 34px rgba(10, 4, 20, 0.32), 0 0 18px rgba(226, 190, 118, 0.3) !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-name {
    color: #170A28 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-price {
    color: #A82455 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-tag {
    background: #FFF0F5 !important;
    color: #A82455 !important;
    border: 1px solid rgba(168, 36, 85, 0.25) !important;
}

body#homepage4.h6v-variant-blanc .h6v-top-chan {
    background: #F8F5FA !important;
    color: #170A28 !important;
    border: 1px solid rgba(226, 190, 118, 0.35) !important;
}

body#homepage4.h6v-variant-blanc .h6v-trust li {
    background: #FFFFFF !important;
    color: #170A28 !important;
    border: 1px solid rgba(226, 190, 118, 0.4) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.1rem !important;
    box-shadow: 0 4px 16px rgba(10, 4, 20, 0.2) !important;
}

body#homepage4.h6v-variant-blanc .h6v-trust i {
    color: #CFA24A !important;
}

/* ===================================================
   Variante 6 : « Écrin Soie & Filigrane Céleste » (?variant=pattern)
   Pattern de micro-étoiles et étincelles géométriques rose très clair
   sur fond soie poudrée pour une texture luxueuse sans blanc plat
   =================================================== */
body#homepage4.h6v-variant-pattern .h6v-section--offer {
    background-color: #FFF9FB !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23FC6194' stroke-width='0.8' stroke-opacity='0.16'%3E%3Cpath d='M30 23 Q30 30 37 30 Q30 30 30 37 Q30 30 23 30 Q30 30 30 23 Z'/%3E%3Cpath d='M10 7 Q10 10 13 10 Q10 10 10 13 Q10 10 7 10 Q10 10 10 7 Z'/%3E%3Cpath d='M50 47 Q50 50 53 50 Q50 50 50 53 Q50 50 47 50 Q50 50 50 47 Z'/%3E%3C/g%3E%3Ccircle cx='10' cy='50' r='1' fill='%23E2BE76' fill-opacity='0.28'/%3E%3Ccircle cx='50' cy='10' r='1' fill='%23E2BE76' fill-opacity='0.28'/%3E%3Ccircle cx='30' cy='5' r='0.75' fill='%23FC6194' fill-opacity='0.22'/%3E%3Ccircle cx='5' cy='30' r='0.75' fill='%23FC6194' fill-opacity='0.22'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFF9FB 0%, #FFF3F7 60%, #FCEAF1 100%) !important;
    border: 1px solid rgba(252, 97, 148, 0.45) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(15, 6, 28, 0.38), inset 0 0 0 1px rgba(226, 190, 118, 0.35), 0 0 30px rgba(252, 97, 148, 0.2) !important;
    color: #200E33 !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer h2 {
    color: #200E33 !important;
    font-family: Volkhov, Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer p {
    color: #4D3960 !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer .h6v-offer-minutes {
    color: #b52258 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer .h6v-offer-badge {
    background: linear-gradient(135deg, #FFEBF2 0%, #FCD3E1 50%, #F5ADC5 100%) !important;
    color: #4A122E !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 22px rgba(245, 173, 197, 0.45) !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer .h6v-offer-amount {
    color: #3b0d23 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-pattern .h6v-section--offer .h6v-offer-badge-label {
    color: #63193e !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-pattern .h6v-top-inner {
    background-color: #FFF9FB !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23FC6194' stroke-width='0.8' stroke-opacity='0.12'%3E%3Cpath d='M30 23 Q30 30 37 30 Q30 30 30 37 Q30 30 23 30 Q30 30 30 23 Z'/%3E%3C/g%3E%3Ccircle cx='10' cy='50' r='0.8' fill='%23E2BE76' fill-opacity='0.22'/%3E%3Ccircle cx='50' cy='10' r='0.8' fill='%23E2BE76' fill-opacity='0.22'/%3E%3C/svg%3E"), linear-gradient(155deg, #FFFFFF 0%, #FFF6F9 100%) !important;
    border: 1px solid rgba(252, 97, 148, 0.3) !important;
    box-shadow: 0 10px 26px rgba(10, 4, 20, 0.25) !important;
    color: #200E33 !important;
}

body#homepage4.h6v-variant-pattern .h6v-top-name {
    color: #200E33 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-pattern .h6v-top-price {
    color: #b52258 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-pattern .h6v-top-tag {
    background: rgba(252, 97, 148, 0.1) !important;
    color: #b52258 !important;
    border: 1px solid rgba(252, 97, 148, 0.25) !important;
}

body#homepage4.h6v-variant-pattern .h6v-top-chan {
    background: #FFF0F5 !important;
    color: #b52258 !important;
    border: 1px solid rgba(252, 97, 148, 0.25) !important;
}

body#homepage4.h6v-variant-pattern .h6v-trust li {
    background: #FFF9FB !important;
    color: #200E33 !important;
    border: 1px solid rgba(252, 97, 148, 0.35) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.1rem !important;
    box-shadow: 0 4px 16px rgba(10, 4, 20, 0.2) !important;
}

body#homepage4.h6v-variant-pattern .h6v-trust i {
    color: #FC6194 !important;
}

/* ===================================================
   NOUVELLE COLLECTION CLARTÉ & ALLIANCES (Septembre 2026)
   Réponse au besoin : « trop sombre » -> Intégration d'une vraie clarté lumineuse,
   aérée et féminine, alliée aux codes nobles Améthyste, Framboise et Or Voyanz.
   =================================================== */

/* ===================================================
   VARIANTE 1 (Défaut /fr/home2) : « Écrin Solaire Nacre & Or Joaillerie » (?variant=lumineux)
   Fond de page clair lumineux champagne/porcelaine, typographies Volkhov améthyste noble,
   cartes porcelaine blanche avec liseré or, boutons velours framboise soyeux.
   =================================================== */
body#homepage4.h6v-variant-lumineux,
body#homepage4.h6v-variant-lumineux turbo-frame#main-content {
    background:
        radial-gradient(ellipse 95% 45% at 50% 0%, rgba(254, 243, 222, 0.95), transparent 75%),
        radial-gradient(ellipse 70% 40% at 90% 25%, rgba(252, 97, 148, 0.08), transparent 60%),
        radial-gradient(ellipse 65% 45% at 10% 50%, rgba(226, 190, 118, 0.12), transparent 65%),
        radial-gradient(ellipse 80% 50% at 50% 85%, rgba(252, 97, 148, 0.06), transparent 70%),
        linear-gradient(180deg, #FAF7F2 0%, #FFFDF9 18%, #FAF4ED 45%, #F5EFE7 75%, #F0E6D8 100%) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h4-content h1,
body#homepage4.h6v-variant-lumineux .h4-content h2,
body#homepage4.h6v-variant-lumineux .h4-content h3,
body#homepage4.h6v-variant-lumineux .h4-content h4,
body#homepage4.h6v-variant-lumineux .h4-content h5,
body#homepage4.h6v-variant-lumineux .h4-content h6,
body#homepage4.h6v-variant-lumineux .h4-section-title {
    color: #1C0B2E !important;
    font-family: Volkhov, Georgia, serif !important;
}

body#homepage4.h6v-variant-lumineux .h4-content p,
body#homepage4.h6v-variant-lumineux .h4-hero-subtitle,
body#homepage4.h6v-variant-lumineux .h4-hero-desc,
body#homepage4.h6v-variant-lumineux .h6v-seo-intro p {
    color: #4A355F !important;
}

body#homepage4.h6v-variant-lumineux .h4-see-all {
    color: #B52258 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Header & Navbar en mode clair */
body#homepage4.h6v-variant-lumineux .toptop,
body#homepage4.h6v-variant-lumineux .m-navbar {
    border-bottom: 1px solid rgba(207, 162, 74, 0.25) !important;
}

body#homepage4.h6v-variant-lumineux .toptop-brand {
    background: linear-gradient(165deg, #1C0B2E 0%, #3D145E 50%, #C99E4B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 4px rgba(201, 158, 75, 0.35)) !important;
}

body#homepage4.h6v-variant-lumineux .toptop-socials a {
    color: #3D145E !important;
    background: rgba(61, 20, 94, 0.06) !important;
    border: 1px solid rgba(61, 20, 94, 0.18) !important;
}

body#homepage4.h6v-variant-lumineux .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-variant-lumineux .m-navbar .voyanz-nav-dropdown-trigger {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .m-navbar.m-navbar--home3-scrolled {
    background: rgba(251, 248, 243, 0.96) !important;
    border-bottom: 1px solid rgba(207, 162, 74, 0.3) !important;
    box-shadow: 0 6px 20px rgba(28, 11, 46, 0.08) !important;
}

body#homepage4.h6v-variant-lumineux #btn_responsive_sidebar i,
body#homepage4.h6v-variant-lumineux .m-navbar-icon-hamburger {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h4-btn-outline {
    border: 1.5px solid #1C0B2E !important;
    color: #1C0B2E !important;
    background: transparent !important;
}

body#homepage4.h6v-variant-lumineux .h4-btn-outline:hover {
    background: rgba(28, 11, 46, 0.06) !important;
    color: #1C0B2E !important;
}

/* Hero "En ligne maintenant" : carte Aden porcelaine et or */
body#homepage4.h6v-variant-lumineux .h6v-feature-slide {
    border: 1px solid rgba(207, 162, 74, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 38px rgba(28, 11, 46, 0.12) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-meta,
body#homepage4.h6v-variant-soie .h6v-feature-meta {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(207, 162, 74, 0.45) !important;
    box-shadow: 0 14px 40px rgba(28, 11, 46, 0.08) !important;
    color: #1C0B2E !important;
    border-radius: 18px !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-meta h3,
body#homepage4.h6v-variant-lumineux #h6vFeatureName,
body#homepage4.h6v-variant-soie .h6v-feature-meta h3,
body#homepage4.h6v-variant-soie #h6vFeatureName {
    color: #1C0B2E !important;
    font-family: Volkhov, serif !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-specs,
body#homepage4.h6v-variant-lumineux .h6v-feature-line,
body#homepage4.h6v-variant-soie .h6v-feature-specs,
body#homepage4.h6v-variant-soie .h6v-feature-line {
    color: #5E4773 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-line strong,
body#homepage4.h6v-variant-lumineux #h6vFeaturePrice,
body#homepage4.h6v-variant-soie .h6v-feature-line strong,
body#homepage4.h6v-variant-soie #h6vFeaturePrice {
    color: #C48B26 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-gift,
body#homepage4.h6v-variant-soie .h6v-feature-gift {
    background: rgba(226, 73, 123, 0.12) !important;
    color: #B52258 !important;
    border: 1px solid rgba(226, 73, 123, 0.3) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-chan,
body#homepage4.h6v-variant-soie .h6v-chan {
    background: #FAF5F8 !important;
    color: #1C0B2E !important;
    border: 1.5px solid rgba(226, 73, 123, 0.3) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-chan i,
body#homepage4.h6v-variant-soie .h6v-chan i {
    color: #E2497B !important;
}

body#homepage4.h6v-variant-lumineux .h6v-chan:hover,
body#homepage4.h6v-variant-soie .h6v-chan:hover {
    background: #E2497B !important;
    color: #FFFFFF !important;
    border-color: #E2497B !important;
}

body#homepage4.h6v-variant-lumineux .h6v-chan:hover i,
body#homepage4.h6v-variant-soie .h6v-chan:hover i {
    color: #FFFFFF !important;
}

/* Offre de bienvenue & Réassurance en clarté joaillerie */
body#homepage4.h6v-variant-lumineux .h6v-section--offer {
    background: #FFFFFF !important;
    border: 1.5px solid #E2BE76 !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 42px rgba(28, 11, 46, 0.08), 0 0 24px rgba(226, 190, 118, 0.22) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer h2 {
    color: #1C0B2E !important;
    font-family: Volkhov, Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer p {
    color: #4A355F !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer .h6v-offer-minutes {
    color: #B52258 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer .h6v-offer-badge {
    background: linear-gradient(135deg, #FAF0D8 0%, #E8CA86 50%, #CFA24A 100%) !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 6px 18px rgba(207, 162, 74, 0.35) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer .h6v-offer-amount {
    color: #241138 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--offer .h6v-offer-badge-label {
    color: #3B2056 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-trust li {
    background: #FFFFFF !important;
    color: #1C0B2E !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.15rem !important;
    box-shadow: 0 4px 14px rgba(28, 11, 46, 0.06) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-trust i {
    color: #CFA24A !important;
}

/* Recommandés & Catalogue voyants en cartes porcelaine blanche */
body#homepage4.h6v-variant-lumineux .h6v-top-inner {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(28, 11, 46, 0.07) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-top-inner:hover {
    border-color: #E2BE76 !important;
    box-shadow: 0 12px 32px rgba(28, 11, 46, 0.12), 0 0 16px rgba(226, 190, 118, 0.25) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-top-name {
    color: #1C0B2E !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-top-price {
    color: #B52258 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-top-tag {
    background: #FFF0F5 !important;
    color: #B52258 !important;
    border: 1px solid rgba(181, 34, 88, 0.2) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-top-chan {
    background: #FAF5F8 !important;
    color: #1C0B2E !important;
    border: 1px solid rgba(207, 162, 74, 0.3) !important;
}

/* Grille 8 vignettes cardpro : porcelaine blanche lumineuse */
body#homepage4.h6v-variant-lumineux .h4-content .cardpro-content {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(28, 11, 46, 0.07) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h4-content .cardpro-content:hover {
    background: #FFFFFF !important;
    border-color: #E2BE76 !important;
    box-shadow: 0 14px 34px rgba(28, 11, 46, 0.12) !important;
}

body#homepage4.h6v-variant-lumineux .h4-content .cardpro-title {
    color: #1C0B2E !important;
    font-family: Volkhov, Georgia, serif !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-lumineux .h4-content .cardpro-description {
    color: #554068 !important;
}

body#homepage4.h6v-variant-lumineux .cardpro-status-text {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .cardpro-action {
    background: #FAF5F8 !important;
    color: #1C0B2E !important;
    border: 1px solid rgba(207, 162, 74, 0.3) !important;
}

body#homepage4.h6v-variant-lumineux .cardpro-action:hover {
    background: #E2497B !important;
    color: #FFFFFF !important;
    border-color: #E2497B !important;
}

/* Hero H1 secondaire */
body#homepage4.h6v-variant-lumineux .h4-hero.h6v-hero-textonly {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(254, 248, 242, 0.92) 100%) !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(28, 11, 46, 0.06) !important;
}

body#homepage4.h6v-variant-lumineux .h4-hero-title {
    color: #1C0B2E !important;
    font-family: Volkhov, Georgia, serif !important;
}

/* Guidances IA gratuites : écrin clair avec badges féeriques */
body#homepage4.h6v-variant-lumineux .h6v-ia.h6v-section--dark {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 32px rgba(28, 11, 46, 0.06) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-pcard-cap strong {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-pcard-price--free {
    color: #B52258 !important;
    font-weight: 700 !important;
}

/* Avis & Social wall & SEO */
body#homepage4.h6v-variant-lumineux .h6v-social-wall-panel,
body#homepage4.h6v-variant-lumineux .h6v-social-reviews-sidebar,
body#homepage4.h6v-variant-lumineux .h6v-seo-intro {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(28, 11, 46, 0.05) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-seo-intro-title {
    color: #1C0B2E !important;
    font-family: Volkhov, Georgia, serif !important;
}

body#homepage4.h6v-variant-lumineux .h6v-seo-intro a {
    color: #B52258 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Sticky mobile & Footer */
body#homepage4.h6v-variant-lumineux .h6v-sticky {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(207, 162, 74, 0.3) !important;
    box-shadow: 0 -8px 24px rgba(28, 11, 46, 0.08) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-sticky-info,
body#homepage4.h6v-variant-lumineux .h6v-sticky-session-pro {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-sticky-session-more,
body#homepage4.h6v-variant-lumineux .h6v-countdown {
    color: #B52258 !important;
}

body#homepage4.h6v-variant-lumineux footer,
body#homepage4.h6v-variant-lumineux .h4-content footer {
    background: #F4ECE3 !important;
    color: #4A355F !important;
    border-top: 1px solid rgba(207, 162, 74, 0.3) !important;
}

body#homepage4.h6v-variant-lumineux footer a,
body#homepage4.h6v-variant-lumineux .h4-content footer a {
    color: #4A355F !important;
}

body#homepage4.h6v-variant-lumineux footer a:hover {
    color: #B52258 !important;
}

/* ===================================================
   VARIANTE 2 : « L'Alliance Architecturale Nuit & Lumière » (?variant=alternance)
   Le Hero en Nuit Améthyste intime, puis immersion dans un monde clair solaire
   dès l'Offre de bienvenue et sur tout le catalogue !
   =================================================== */
body#homepage4.h6v-variant-alternance,
body#homepage4.h6v-variant-alternance turbo-frame#main-content {
    background:
        radial-gradient(ellipse 95% 45% at 50% 30%, rgba(254, 243, 222, 0.9), transparent 75%),
        linear-gradient(180deg, #160B29 0%, #20113B 18%, #FAF7F2 22%, #FFFDF9 40%, #FAF4ED 70%, #F4ECE3 100%) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-alternance .h6v-section--hero h2,
body#homepage4.h6v-variant-alternance .h6v-section--hero .h4-section-title {
    color: #FFFFFF !important;
}

body#homepage4.h6v-variant-alternance .toptop-brand {
    background: linear-gradient(165deg, #FFFFFF 0%, #FEF4E2 45%, #EACB88 80%, #FC6194 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body#homepage4.h6v-variant-alternance .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-variant-alternance .m-navbar .voyanz-nav-dropdown-trigger {
    color: #FFFFFF !important;
}

body#homepage4.h6v-variant-alternance .m-navbar.m-navbar--home3-scrolled {
    background: rgba(251, 248, 243, 0.96) !important;
    border-bottom: 1px solid rgba(207, 162, 74, 0.3) !important;
}

body#homepage4.h6v-variant-alternance .m-navbar.m-navbar--home3-scrolled ul li.m-navbar-item a,
body#homepage4.h6v-variant-alternance .m-navbar.m-navbar--home3-scrolled .voyanz-nav-dropdown-trigger {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-alternance .h6v-section--offer {
    background: #FFFFFF !important;
    border: 1.5px solid #E2BE76 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(28, 11, 46, 0.12), 0 0 25px rgba(226, 190, 118, 0.25) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-alternance .h6v-section--offer h2 {
    color: #1C0B2E !important;
    font-family: Volkhov, serif !important;
}

body#homepage4.h6v-variant-alternance .h6v-section--offer p {
    color: #4A355F !important;
}

body#homepage4.h6v-variant-alternance .h6v-section--offer .h6v-offer-minutes {
    color: #B52258 !important;
}

body#homepage4.h6v-variant-alternance .h6v-trust li {
    background: #FFFFFF !important;
    color: #1C0B2E !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(28, 11, 46, 0.08) !important;
}

body#homepage4.h6v-variant-alternance .h6v-top-inner,
body#homepage4.h6v-variant-alternance .h4-content .cardpro-content {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(28, 11, 46, 0.07) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-alternance .h4-content h2,
body#homepage4.h6v-variant-alternance .h4-content h3,
body#homepage4.h6v-variant-alternance .h4-section-title,
body#homepage4.h6v-variant-alternance .h6v-top-name,
body#homepage4.h6v-variant-alternance .cardpro-title {
    color: #1C0B2E !important;
    font-family: Volkhov, serif !important;
}

body#homepage4.h6v-variant-alternance .h4-content p,
body#homepage4.h6v-variant-alternance .cardpro-description {
    color: #4A355F !important;
}

body#homepage4.h6v-variant-alternance .h6v-top-price,
body#homepage4.h6v-variant-alternance .cardpro-action-price {
    color: #B52258 !important;
    font-weight: 800 !important;
}

/* ===================================================
   VARIANTE 3 : « Boudoir Quartz Rose & Soie Poudrée » (?variant=soie)
   Nuance poudrée très lumineuse, féminine et rassurante, micro-filigrane d'étoiles
   =================================================== */
body#homepage4.h6v-variant-soie,
body#homepage4.h6v-variant-soie turbo-frame#main-content {
    background-color: #FFF9FB !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23FC6194' stroke-width='0.75' stroke-opacity='0.1'%3E%3Cpath d='M40 30 Q40 40 50 40 Q40 40 40 50 Q40 40 30 40 Q40 40 40 30 Z'/%3E%3Cpath d='M12 10 Q12 15 17 15 Q12 15 12 20 Q12 15 7 15 Q12 15 12 10 Z'/%3E%3Cpath d='M68 60 Q68 65 73 65 Q68 65 68 70 Q68 65 63 65 Q68 65 68 60 Z'/%3E%3C/g%3E%3Ccircle cx='15' cy='65' r='1' fill='%23E2BE76' fill-opacity='0.18'/%3E%3Ccircle cx='65' cy='15' r='1' fill='%23E2BE76' fill-opacity='0.18'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #FFF9FB 0%, #FFF3F7 25%, #FDF0F6 55%, #FAF2EA 85%, #F7EDE2 100%) !important;
    color: #200E33 !important;
}

body#homepage4.h6v-variant-soie .h4-content h1,
body#homepage4.h6v-variant-soie .h4-content h2,
body#homepage4.h6v-variant-soie .h4-content h3,
body#homepage4.h6v-variant-soie .h4-content h4,
body#homepage4.h6v-variant-soie .h4-section-title {
    color: #200E33 !important;
    font-family: Volkhov, Georgia, serif !important;
}

body#homepage4.h6v-variant-soie .h4-content p,
body#homepage4.h6v-variant-soie .h6v-seo-intro p {
    color: #4D3960 !important;
}

body#homepage4.h6v-variant-soie .h6v-section--offer {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(252, 97, 148, 0.4) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 42px rgba(32, 14, 51, 0.08), 0 0 25px rgba(252, 97, 148, 0.18) !important;
    color: #200E33 !important;
}

body#homepage4.h6v-variant-soie .h6v-section--offer h2 {
    color: #200E33 !important;
}

body#homepage4.h6v-variant-soie .h6v-section--offer p {
    color: #4D3960 !important;
}

body#homepage4.h6v-variant-soie .h6v-section--offer .h6v-offer-minutes {
    color: #B52258 !important;
}

body#homepage4.h6v-variant-soie .h6v-top-inner,
body#homepage4.h6v-variant-soie .h4-content .cardpro-content {
    background: #FFFFFF !important;
    border: 1px solid rgba(252, 97, 148, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(32, 14, 51, 0.06) !important;
    color: #200E33 !important;
}

body#homepage4.h6v-variant-soie .h6v-top-name,
body#homepage4.h6v-variant-soie .cardpro-title {
    color: #200E33 !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-soie .h6v-top-price,
body#homepage4.h6v-variant-soie .cardpro-action-price {
    color: #B52258 !important;
    font-weight: 800 !important;
}

body#homepage4.h6v-variant-soie .h6v-trust li {
    background: #FFFFFF !important;
    color: #200E33 !important;
    border: 1px solid rgba(252, 97, 148, 0.3) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(32, 14, 51, 0.06) !important;
}

body#homepage4.h6v-variant-soie .h6v-trust i {
    color: #FC6194 !important;
}

/* ===================================================
   ÉLÉMENTS TRANSVERSAUX POUR LES VARIANTES CLAIRES
   (lumineux, soie, alternance)
   =================================================== */

/* Toptop & Navbar pour la variante Soie */
body#homepage4.h6v-variant-soie .toptop,
body#homepage4.h6v-variant-soie .m-navbar {
    border-bottom: 1px solid rgba(252, 97, 148, 0.22) !important;
}

body#homepage4.h6v-variant-soie .toptop-brand {
    background: linear-gradient(165deg, #200E33 0%, #5E1440 50%, #E2497B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 4px rgba(226, 73, 123, 0.3)) !important;
}

body#homepage4.h6v-variant-soie .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-variant-soie .m-navbar .voyanz-nav-dropdown-trigger {
    color: #200E33 !important;
}

body#homepage4.h6v-variant-soie .m-navbar.m-navbar--home3-scrolled {
    background: rgba(255, 249, 251, 0.96) !important;
    border-bottom: 1px solid rgba(252, 97, 148, 0.25) !important;
    box-shadow: 0 6px 20px rgba(32, 14, 51, 0.06) !important;
}

body#homepage4.h6v-variant-soie #btn_responsive_sidebar i,
body#homepage4.h6v-variant-soie .m-navbar-icon-hamburger {
    color: #200E33 !important;
}

/* Boutons prev/next du carrousel Hero */
body#homepage4.h6v-variant-lumineux .h6v-hero-nav,
body#homepage4.h6v-variant-soie .h6v-hero-nav {
    border: 1.5px solid rgba(207, 162, 74, 0.4) !important;
    background: #FFFFFF !important;
    color: #1C0B2E !important;
    box-shadow: 0 4px 12px rgba(28, 11, 46, 0.08) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-hero-nav:hover,
body#homepage4.h6v-variant-soie .h6v-hero-nav:hover {
    background: #B52258 !important;
    color: #FFFFFF !important;
    border-color: #B52258 !important;
}

/* Vignettes miniatures Hero (pcard) */
body#homepage4.h6v-variant-lumineux .h6v-pcard-cap strong,
body#homepage4.h6v-variant-soie .h6v-pcard-cap strong,
body#homepage4.h6v-variant-alternance .h6v-pcard-cap strong {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .h6v-pcard-price,
body#homepage4.h6v-variant-soie .h6v-pcard-price,
body#homepage4.h6v-variant-alternance .h6v-pcard-price {
    color: #B52258 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-pcard-note,
body#homepage4.h6v-variant-soie .h6v-pcard-note,
body#homepage4.h6v-variant-alternance .h6v-pcard-note {
    color: #C48B26 !important;
}

/* Indicateur "disponible" en vert émeraude doux */
body#homepage4.h6v-variant-lumineux .h6v-count,
body#homepage4.h6v-variant-soie .h6v-count {
    color: #0F8546 !important;
    text-shadow: none !important;
}

/* Cartes Avis Clients */
body#homepage4.h6v-variant-lumineux .cardreview,
body#homepage4.h6v-variant-soie .cardreview,
body#homepage4.h6v-variant-alternance .cardreview {
    background: #FFFFFF !important;
    border: 1px solid rgba(207, 162, 74, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(28, 11, 46, 0.06) !important;
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .cardreview-title,
body#homepage4.h6v-variant-soie .cardreview-title,
body#homepage4.h6v-variant-alternance .cardreview-title {
    color: #1C0B2E !important;
    font-weight: 700 !important;
}

body#homepage4.h6v-variant-lumineux .cardreview-text,
body#homepage4.h6v-variant-soie .cardreview-text,
body#homepage4.h6v-variant-alternance .cardreview-text {
    color: #4A355F !important;
}

/* Titres & Dates Blog */
body#homepage4.h6v-variant-lumineux .cardblog-layout-split .cardblog-title,
body#homepage4.h6v-variant-soie .cardblog-layout-split .cardblog-title,
body#homepage4.h6v-variant-alternance .cardblog-layout-split .cardblog-title {
    color: #1C0B2E !important;
}

body#homepage4.h6v-variant-lumineux .cardblog-date,
body#homepage4.h6v-variant-soie .cardblog-date,
body#homepage4.h6v-variant-alternance .cardblog-date {
    color: #634B7A !important;
}

/* Liens et boutons contour en fond clair */
body#homepage4.h6v-variant-lumineux .link-light,
body#homepage4.h6v-variant-soie .link-light,
body#homepage4.h6v-variant-alternance .link-light {
    color: #B52258 !important;
    text-decoration: underline !important;
}

body#homepage4.h6v-variant-lumineux .btn-outline-light,
body#homepage4.h6v-variant-soie .btn-outline-light,
body#homepage4.h6v-variant-alternance .btn-outline-light {
    border-color: rgba(28, 11, 46, 0.28) !important;
    color: #1C0B2E !important;
    background: #FFFFFF !important;
}

body#homepage4.h6v-variant-lumineux .btn-outline-light:hover,
body#homepage4.h6v-variant-soie .btn-outline-light:hover,
body#homepage4.h6v-variant-alternance .btn-outline-light:hover {
    background: rgba(28, 11, 46, 0.08) !important;
    color: #1C0B2E !important;
}

/* Champs de formulaire newsletter */
body#homepage4.h6v-variant-lumineux .form-control,
body#homepage4.h6v-variant-soie .form-control,
body#homepage4.h6v-variant-alternance .form-control {
    background: #FFFFFF !important;
    color: #1C0B2E !important;
    border: 1px solid rgba(28, 11, 46, 0.22) !important;
}

/* Badges d'état "En ligne" clairs & légers (remplace les pilules noires) */
body#homepage4.h6v-variant-lumineux .h6v-feature-live,
body#homepage4.h6v-variant-soie .h6v-feature-live,
body#homepage4.h6v-variant-lumineux .h6v-poster-badge,
body#homepage4.h6v-variant-soie .h6v-poster-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0F8546 !important;
    border: 1px solid rgba(15, 133, 70, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-live .h6v-live-dot,
body#homepage4.h6v-variant-soie .h6v-feature-live .h6v-live-dot,
body#homepage4.h6v-variant-lumineux .h6v-poster-badge .h6v-live-dot,
body#homepage4.h6v-variant-soie .h6v-poster-badge .h6v-live-dot {
    background: #0F8546 !important;
    box-shadow: none !important;
}

/* Header & Navbar légers et lumineux sans ombre sombre */
body#homepage4.h6v-variant-lumineux .toptop,
body#homepage4.h6v-variant-lumineux .m-navbar,
body#homepage4.h6v-variant-soie .toptop,
body#homepage4.h6v-variant-soie .m-navbar {
    border-bottom: 1px solid rgba(207, 162, 74, 0.2) !important;
    box-shadow: none !important;
}

body#homepage4.h6v-variant-lumineux .m-navbar.m-navbar--home3-scrolled,
body#homepage4.h6v-variant-soie .m-navbar.m-navbar--home3-scrolled {
    box-shadow: 0 4px 14px rgba(28, 11, 46, 0.05) !important;
}

/* ===================================================
   LUMINEUX V2 — nuit sur le hero, jour en dessous
   Le beige intégral aplati la marque. On garde l'améthyste
   sur l'en-tête et le portrait, puis la page s'ouvre en ivoire.
   =================================================== */
body#homepage4.h6v-variant-lumineux,
body#homepage4.h6v-variant-lumineux turbo-frame#main-content {
    background: #f3ece4 !important;
}

body#homepage4.h6v-variant-lumineux .toptop,
body#homepage4.h6v-variant-lumineux .m-navbar,
body#homepage4.h6v-variant-lumineux .m-navbar.m-navbar--home3-scrolled {
    background: #140c22 !important;
    border-bottom: 1px solid rgba(231, 201, 138, 0.16) !important;
    box-shadow: none !important;
}

body#homepage4.h6v-variant-lumineux .toptop-brand {
    background: linear-gradient(165deg, #ffffff 0%, #fef4e2 40%, #eacb88 78%, #fc6194 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 8px rgba(234, 203, 136, 0.35)) !important;
}

body#homepage4.h6v-variant-lumineux .m-navbar ul li.m-navbar-item a,
body#homepage4.h6v-variant-lumineux .m-navbar .voyanz-nav-dropdown-trigger,
body#homepage4.h6v-variant-lumineux #btn_responsive_sidebar i,
body#homepage4.h6v-variant-lumineux .m-navbar-icon-hamburger {
    color: #f6efe4 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero {
    background:
        radial-gradient(90% 70% at 50% 0%, #3a215c 0%, transparent 70%),
        #160e28 !important;
    width: auto !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1.15rem 0 1.35rem !important;
    border-radius: 0 !important;
    box-shadow: 0 22px 48px rgba(20, 12, 34, 0.22) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h4-section-title {
    color: #f8f1e6 !important;
    text-shadow: none !important;
    letter-spacing: 0.08em !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-count {
    color: #e7c98a !important;
    text-shadow: none !important;
}

body#homepage4.h6v-variant-lumineux .h6v-feature-slide {
    border: none !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-feature-meta {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f8f1e6 !important;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-feature-meta h3,
body#homepage4.h6v-variant-lumineux .h6v-section--hero #h6vFeatureName {
    color: #f8f1e6 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-feature-specs,
body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-feature-line {
    color: rgba(248, 241, 230, 0.78) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-feature-line strong,
body#homepage4.h6v-variant-lumineux .h6v-section--hero #h6vFeaturePrice {
    color: #e7c98a !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-chan {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8f1e6 !important;
    border: 1px solid rgba(248, 241, 230, 0.28) !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h6v-chan i {
    color: #fc6194 !important;
}

body#homepage4.h6v-variant-lumineux .h6v-section--hero .h4-btn-outline {
    border: 1.5px solid rgba(248, 241, 230, 0.55) !important;
    color: #f8f1e6 !important;
    background: transparent !important;
}

/* Bandes alternées du pilote /fr/home2.
   Clair = palette de https://voyanz.com/fr/chemin-de-vie (variante douce). */
body#homepage4.h6v-lumiere .h6v-container + .h6v-container {
    padding-top: 0;
}
body#homepage4.h6v-lumiere .h6v-band {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    border-radius: 0;
    padding: 5.25rem max(1.5rem, calc((100vw - 1320px) / 2 + 0.75rem));
}
body#homepage4.h6v-lumiere .h6v-section.h6v-band {
    margin-bottom: 0;
}
body#homepage4.h6v-lumiere .h6v-band--dark {
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(232, 210, 160, 0.14), transparent 62%),
        linear-gradient(180deg, #3a2758 0%, #2a1b44 58%, #241838 100%) !important;
    color: #f6f0e6 !important;
    box-shadow: inset 0 1px 0 rgba(232, 213, 168, 0.28), inset 0 -1px 0 rgba(232, 213, 168, 0.16);
}
body#homepage4.h6v-lumiere .h6v-band--light {
    background: linear-gradient(180deg, #fffdf9 0%, #f7f1e6 100%) !important;
    color: #1F1F1F !important;
    border: none;
    box-shadow: inset 0 1px 0 rgba(196, 164, 106, 0.45), inset 0 -1px 0 rgba(196, 164, 106, 0.22);
}
body#homepage4.h6v-lumiere .h6v-band--light :is(h1, h2, h3, .h4-section-title, .h4-hero-title, .h6v-seo-intro-title, .h6v-top-name, strong) {
    color: #1F1F1F !important;
}
body#homepage4.h6v-lumiere .h6v-band--light :is(p, li, .h4-hero-subtitle, .h4-hero-desc, .h4-section-subtitle, .h6v-seo-intro) {
    color: #5E5240 !important;
}
body#homepage4.h6v-lumiere .h6v-band--light :is(a, .h4-see-all, .h6v-top-price, .h6v-seo-intro a) {
    color: #8C6B2E !important;
}
body#homepage4.h6v-lumiere .h6v-band--light .h4-btn-primary,
body#homepage4.h6v-lumiere .h6v-band--light .h6v-offer-cta {
    background: #589036 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(88, 144, 54, 0.35) !important;
}
body#homepage4.h6v-lumiere .h6v-band--light .h4-btn-primary:hover,
body#homepage4.h6v-lumiere .h6v-band--light .h6v-offer-cta:hover {
    background: #4d7c0f !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(88, 144, 54, 0.45) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark :is(h1, h2, h3, h4, h5, h6, .h4-section-title) {
    color: #f6f0e6 !important;
    text-shadow: none !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark .cardblog-layout-split .cardblog-title {
    color: #fff !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark .cardblog-date {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Un seul fond par bande : plus de carte arrondie à l'intérieur. */
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-ia,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-section--dark {
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(232, 210, 160, 0.14), transparent 62%),
        linear-gradient(180deg, #3a2758 0%, #2a1b44 58%, #241838 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(232, 213, 168, 0.28), inset 0 -1px 0 rgba(232, 213, 168, 0.16) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light.h4-hero,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light.h6v-section--white {
    background: linear-gradient(180deg, #fffdf9 0%, #f7f1e6 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(196, 164, 106, 0.45), inset 0 -1px 0 rgba(196, 164, 106, 0.22) !important;
}
body#homepage4.h6v-lumiere .h6v-band .h6v-section--hero,
body#homepage4.h6v-lumiere .h6v-band .h4-hero-bg,
body#homepage4.h6v-lumiere .h6v-band .h4-hero-bg::after,
body#homepage4.h6v-lumiere .h6v-band .card-subscribe,
body#homepage4.h6v-lumiere .h6v-band .card-subscribe:before {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body#homepage4.h6v-lumiere .h6v-band hr {
    display: none;
}

body#homepage4.h6v-lumiere .h6v-band--light .h4-btn-outline {
    background: transparent !important;
    color: #8C6B2E !important;
    border: 1px solid rgba(140, 107, 46, 0.55) !important;
}
body#homepage4.h6v-lumiere .h6v-band--light :is(.h6v-top-inner, .h6v-offer-badge) {
    background: #fff !important;
    border: 1px solid rgba(196, 164, 106, 0.45) !important;
    box-shadow: none !important;
    color: #1F1F1F !important;
}
body#homepage4.h6v-lumiere .h6v-band--light .h6v-offer-amount,
body#homepage4.h6v-lumiere .h6v-band--light .text-gold,
body#homepage4.h6v-lumiere .h6v-band--light .h6v-top-price {
    color: #B8923D !important;
}

/* Tout en clair : ivoire et sable, filet or, aucun aplat sombre. */
body#homepage4.h6v-lumiere.h6v-variant-lumineux,
body#homepage4.h6v-lumiere.h6v-variant-lumineux turbo-frame#main-content {
    background: linear-gradient(180deg, #f7f1e6 0%, #f3e6d4 100%) !important;
    color: #1F1F1F !important;
}
body#homepage4.h6v-lumiere .h6v-band--dark,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-ia,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-section--dark {
    background: linear-gradient(180deg, #f8edd9 0%, #edd9bc 100%) !important;
    color: #1F1F1F !important;
    box-shadow: inset 0 1px 0 rgba(196, 164, 106, 0.4), inset 0 -1px 0 rgba(196, 164, 106, 0.22) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark :is(h1, h2, h3, h4, h5, h6, .h4-section-title, .cardblog-title, strong) {
    color: #1F1F1F !important;
    text-shadow: none !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark :is(p, li, .cardblog-date, .h4-hero-subtitle, .h4-hero-desc) {
    color: #5E5240 !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark :is(a, .h4-see-all, .link-light) {
    color: #8C6B2E !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero {
    background: transparent !important;
    box-shadow: none !important;
    color: #1F1F1F !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero :is(.h4-section-title, h2, h3, #h6vFeatureName) {
    color: #1F1F1F !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero .h6v-count,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero .h6v-feature-line strong,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero #h6vFeaturePrice {
    color: #8C6B2E !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero .h6v-feature-meta {
    background: #fff !important;
    color: #5E5240 !important;
    border: 1px solid rgba(196, 164, 106, 0.4) !important;
    box-shadow: none !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero .h6v-chan {
    background: #fff !important;
    color: #5E5240 !important;
    border: 1px solid rgba(196, 164, 106, 0.4) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-section--hero .h4-btn-outline {
    border: 1px solid rgba(140, 107, 46, 0.55) !important;
    color: #8C6B2E !important;
    background: transparent !important;
}
body#homepage4.h6v-lumiere .cardblog-layout-split .cardblog-header {
    background: #f8f1e6 !important;
}
body#homepage4.h6v-lumiere .h6v-band .h4-btn-primary,
body#homepage4.h6v-lumiere .h6v-band .h6v-offer-cta {
    background: #589036 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(88, 144, 54, 0.22) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux footer,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h4-content footer {
    background: #f4ece3 !important;
    color: #5E5240 !important;
    border-top: 1px solid rgba(196, 164, 106, 0.4) !important;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux footer a,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h4-content footer a {
    color: #5E5240 !important;
}

/* Un seul fond. Les bandes ne rajoutent plus chacune leur aplat. */
body#homepage4.h6v-lumiere.h6v-variant-lumineux,
body#homepage4.h6v-lumiere.h6v-variant-lumineux turbo-frame#main-content,
body#homepage4.h6v-lumiere .h6v-page {
    background: #f6f1e8 !important;
}
body#homepage4.h6v-lumiere .h6v-band,
body#homepage4.h6v-lumiere .h6v-band--dark,
body#homepage4.h6v-lumiere .h6v-band--light,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-ia,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--dark.h6v-section--dark,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light.h4-hero,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light.h6v-hero-textonly,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h6v-band--light.h6v-section--white,
body#homepage4.h6v-lumiere .h6v-band .card-subscribe,
body#homepage4.h6v-lumiere .cardblog-layout-split .cardblog-header {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body#homepage4.h6v-lumiere .h6v-band {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
body#homepage4.h6v-lumiere.h6v-variant-lumineux footer,
body#homepage4.h6v-lumiere.h6v-variant-lumineux .h4-content footer {
    background: #f6f1e8 !important;
    border-top: 1px solid rgba(196, 164, 106, 0.28) !important;
}

/* Habillage léger : un seul fond, cartes et titres un peu plus tenus. */
body#homepage4.h6v-lumiere.h6v-variant-lumineux,
body#homepage4.h6v-lumiere.h6v-variant-lumineux turbo-frame#main-content,
body#homepage4.h6v-lumiere .h6v-page {
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 252, 247, 0.9), transparent 70%),
        #f6f1e8 !important;
}
body#homepage4.h6v-lumiere .h6v-band .h4-section-title {
    letter-spacing: 0.14em !important;
    font-weight: 600 !important;
}
body#homepage4.h6v-lumiere .h6v-band .h4-section-title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-top: 0.65rem;
    background: rgba(196, 164, 106, 0.7);
}
body#homepage4.h6v-lumiere .cardpro,
body#homepage4.h6v-lumiere .h6v-top-inner,
body#homepage4.h6v-lumiere .h6v-feature-slide,
body#homepage4.h6v-lumiere .cardblog-layout-split {
    background: #fff !important;
    border: 1px solid rgba(196, 164, 106, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(90, 62, 28, 0.06) !important;
}
body#homepage4.h6v-lumiere .cardblog-layout-split .cardblog-header {
    background: #fffdf9 !important;
    border-bottom: 1px solid rgba(196, 164, 106, 0.22) !important;
    border-radius: 16px 16px 0 0 !important;
}









/* =====================================================================
   Chat client / pro — refonte visuelle (11/10/2026)
   CSS seul : aucune classe ni ID lu par le JS de chat.eta n'est renommé.
   ===================================================================== */

/* Surface des messages */
#customerchat .chat-messages-container,
#professionalchat .chat-messages-container {
    background: linear-gradient(180deg, #fbf8fc 0%, #f3ecf5 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(20, 6, 34, 0.32);
    padding: 6px 18px 12px;
}
#customerchat .chat-messages-container::before,
#professionalchat .chat-messages-container::before {
    display: none;
}
#customerchat .chat-messages-container .chat-messages,
#professionalchat .chat-messages-container .chat-messages {
    background: none;
}

/* Bulles */
#customerchat .chat-message,
#professionalchat .chat-message {
    margin-bottom: 14px;
    gap: 10px;
    align-items: flex-end !important;
}
#customerchat .chat-message-icon,
#professionalchat .chat-message-icon {
    width: 34px;
    height: 34px;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(42, 31, 61, 0.18);
}
#customerchat .chat-message-icon-voyante,
#professionalchat .chat-message-icon-voyante {
    font-size: 0.9rem;
}
#customerchat .chat-message h6,
#professionalchat .chat-message h6 {
    font-size: 0.7rem;
    margin: 0 8px 4px;
}
#customerchat .chat-message h6 span,
#professionalchat .chat-message h6 span {
    color: rgba(74, 52, 92, 0.55);
}
#customerchat .chat-message-text,
#professionalchat .chat-message-text {
    background: #fff;
    border: 1px solid rgba(92, 43, 99, 0.08);
    border-radius: 20px 20px 20px 6px;
    box-shadow: 0 1px 3px rgba(42, 31, 61, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 10px 15px;
    max-width: 78%;
    font-size: 0.95rem;
    color: #2a1f3d;
}
#customerchat .chat-message.reverse .chat-message-text,
#professionalchat .chat-message.reverse .chat-message-text {
    background: linear-gradient(135deg, #a3488f 0%, #7a2a63 100%);
    border: none;
    border-radius: 20px 20px 6px 20px;
    box-shadow: 0 3px 10px rgba(122, 42, 99, 0.25);
    color: #fff;
}
#customerchat .chat-message.reverse .chat-message-text strong,
#professionalchat .chat-message.reverse .chat-message-text strong,
#customerchat .chat-message.reverse .chat-message-text a,
#professionalchat .chat-message.reverse .chat-message-text a,
#customerchat .chat-message.reverse .chat-message-text h1,
#professionalchat .chat-message.reverse .chat-message-text h1,
#customerchat .chat-message.reverse .chat-message-text h2,
#professionalchat .chat-message.reverse .chat-message-text h2,
#customerchat .chat-message.reverse .chat-message-text h3,
#professionalchat .chat-message.reverse .chat-message-text h3,
#customerchat .chat-message.reverse .chat-message-text h4,
#professionalchat .chat-message.reverse .chat-message-text h4,
#customerchat .chat-message.reverse .chat-message-text h5,
#professionalchat .chat-message.reverse .chat-message-text h5,
#customerchat .chat-message.reverse .chat-message-text h6,
#professionalchat .chat-message.reverse .chat-message-text h6,
#customerchat .chat-message.reverse .chat-message-text blockquote,
#professionalchat .chat-message.reverse .chat-message-text blockquote {
    color: inherit;
}
#customerchat .chat-message.reverse .chat-message-text blockquote,
#professionalchat .chat-message.reverse .chat-message-text blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Photo envoyée seule : l'image est la bulle, sans cadre autour */
#customerchat .chat-message-text:has(> .chat-message-image:only-child),
#professionalchat .chat-message-text:has(> .chat-message-image:only-child),
#customerchat .chat-message.reverse .chat-message-text:has(> .chat-message-image:only-child),
#professionalchat .chat-message.reverse .chat-message-text:has(> .chat-message-image:only-child) {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
#customerchat .chat-message-text img.chat-message-image,
#professionalchat .chat-message-text img.chat-message-image {
    max-width: min(100%, 260px);
    max-height: 300px;
    margin: 0;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(42, 31, 61, 0.2);
}

/* Bandeaux au-dessus de la saisie */
#customerchat #express_chat_banner,
#professionalchat #express_chat_banner,
#customerchat #chat-ai-memory,
#professionalchat #chat-ai-memory {
    border: none;
    border-left: 3px solid currentColor;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    margin: 6px 0 0 !important;
}
#customerchat .chat-readonly-banner,
#professionalchat .chat-readonly-banner,
#customerchat .chat-credit-warning-banner,
#professionalchat .chat-credit-warning-banner {
    border-radius: 10px;
    margin: 6px 0 0;
}

/* Saisie : une seule pilule (champ + image + envoyer) */
#customerchat .chat-messages-container .chat-input,
#professionalchat .chat-messages-container .chat-input {
    background: #fff;
    border: 1px solid rgba(92, 43, 99, 0.14);
    border-radius: 28px;
    padding: 5px;
    margin-top: 8px;
    gap: 2px;
    box-shadow: 0 4px 16px rgba(42, 31, 61, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#customerchat .chat-messages-container .chat-input:focus-within,
#professionalchat .chat-messages-container .chat-input:focus-within {
    border-color: rgba(163, 72, 143, 0.5);
    box-shadow: 0 0 0 3px rgba(163, 72, 143, 0.12), 0 4px 16px rgba(42, 31, 61, 0.08);
}
#customerchat .chat-messages-container .chat-input:has(.form-control:disabled),
#professionalchat .chat-messages-container .chat-input:has(.form-control:disabled) {
    background: #f6f2f7;
}
#customerchat .chat-input .form-control,
#professionalchat .chat-input .form-control,
#customerchat .chat-input .chat-input-group-single .form-control,
#professionalchat .chat-input .chat-input-group-single .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 10px 14px;
    font-size: 0.95rem;
}
#customerchat .chat-input .input-group-text,
#professionalchat .chat-input .input-group-text {
    background: transparent !important;
    border: none;
}
#customerchat .chat-input .custom-file-upload,
#professionalchat .chat-input .custom-file-upload,
#customerchat .chat-input #chat-vocal-record,
#professionalchat .chat-input #chat-vocal-record {
    color: rgba(92, 43, 99, 0.55) !important;
    font-size: 1.15rem;
}
#customerchat .chat-input .custom-file-upload:hover,
#professionalchat .chat-input .custom-file-upload:hover {
    color: #a3488f !important;
    background: rgba(163, 72, 143, 0.08);
}
#customerchat .chat-input #button_send,
#professionalchat .chat-input #button_send {
    background: linear-gradient(135deg, #fc6194 0%, #a3488f 100%);
    border: none;
    border-radius: 22px;
    color: #fff;
    font-weight: 600;
    padding: 10px 22px;
    box-shadow: 0 3px 10px rgba(252, 97, 148, 0.3);
}
#customerchat .chat-input #button_send:hover:not(:disabled),
#professionalchat .chat-input #button_send:hover:not(:disabled) {
    background: linear-gradient(135deg, #fc6194 0%, #a3488f 100%);
    filter: brightness(1.06);
    transform: none;
}
@media (min-width: 1024px) {
    #customerchat .chat-messages-container .chat-input,
    #professionalchat .chat-messages-container .chat-input {
        margin-bottom: 64px;
    }
}
@media (max-width: 1023.98px) {
    #customerchat .chat-messages-container .chat-input,
    #professionalchat .chat-messages-container .chat-input {
        margin-bottom: 58px;
    }
}

/* Liste des conversations : compacte, une ligne par info */
#customerchat .chatgroups-container #div_chatgroups,
#professionalchat .chatgroups-container #div_chatgroups {
    margin-top: 0 !important;
}
#customerchat .chatgroups-container,
#professionalchat .chatgroups-container {
    padding: 8px;
}
#customerchat .chat-card,
#professionalchat .chat-card {
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid transparent;
    box-shadow: none;
    outline: none;
}
#customerchat .chat-card:hover,
#professionalchat .chat-card:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    transform: none;
}
#customerchat .chat-card.active,
#professionalchat .chat-card.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 3px 0 0 #fc6194;
    outline: none;
}
#customerchat .chat-card.in-session,
#professionalchat .chat-card.in-session,
#customerchat .chat-card.in-session.active,
#professionalchat .chat-card.in-session.active {
    box-shadow: 0 0 0 1px #dc3545, 0 2px 12px rgba(220, 53, 69, 0.4);
    outline: 2px solid rgba(220, 53, 69, 0.5);
}
#customerchat .chat-card > .me-3,
#professionalchat .chat-card > .me-3 {
    margin-right: 10px !important;
    flex-shrink: 0;
}
#customerchat .chat-card-photo,
#professionalchat .chat-card-photo {
    width: 42px;
    height: 42px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}
#customerchat .chat-card h4,
#professionalchat .chat-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    margin: 0 0 2px;
    font-family: var(--bs-body-font-family);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#customerchat .chat-card h4 .chat-card-name-link,
#professionalchat .chat-card h4 .chat-card-name-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#customerchat .chat-card h4 > a:not(.chat-card-name-link),
#professionalchat .chat-card h4 > a:not(.chat-card-name-link) {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.7;
}
#customerchat .chat-card .details-tools,
#professionalchat .chat-card .details-tools {
    font-size: 0.7rem;
    line-height: 1.2rem;
    padding: 0 8px;
    margin: 2px 0;
}
#customerchat .chat-card .lastmessage,
#professionalchat .chat-card .lastmessage {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-top: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    width: 100%;
}
#customerchat .chat-card .chat-card-actions,
#professionalchat .chat-card .chat-card-actions {
    margin-top: 4px;
}
#customerchat .chat-card .chat-card-read-btn,
#professionalchat .chat-card .chat-card-read-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0.76rem !important;
    font-weight: 600;
    color: #ffb3cf !important;
    min-width: 0 !important;
}
#customerchat .chat-card .chat-card-read-btn:hover,
#professionalchat .chat-card .chat-card-read-btn:hover {
    color: #fff !important;
    text-decoration: underline;
}
#customerchat .chat-card .chat-card-session-btn.btn-primary,
#professionalchat .chat-card .chat-card-session-btn.btn-primary {
    background: linear-gradient(135deg, #fc6194 0%, #a3488f 100%);
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
}
@media (max-width: 767.98px) {
    #customerchat .chat-message-text,
    #professionalchat .chat-message-text {
        max-width: 88%;
    }
    #customerchat .chat-messages-container,
    #professionalchat .chat-messages-container {
        padding: 6px 10px 10px;
    }
}
/* Petits écrans de bureau et iPad à l'horizontale : liste plus large pour lire « Relire » */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    #customerchat .chatgroups-container,
    #professionalchat .chatgroups-container {
        flex: 0 0 27%;
        max-width: 27%;
        width: 27%;
    }
    #customerchat .chat-main-wrapper,
    #professionalchat .chat-main-wrapper {
        flex: 0 0 73%;
        max-width: 73%;
        width: 73%;
    }
    #customerchat .chat-session-bar,
    #professionalchat .chat-session-bar {
        left: calc(27% + 20px);
    }
}
/* Téléphone et tablette, y compris l'appli installée : barre d'accueil iPhone */
@media (max-width: 1023.98px) {
    #customerchat .chat-session-bar,
    #professionalchat .chat-session-bar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    #customerchat .chat-messages-container .chat-input,
    #professionalchat .chat-messages-container .chat-input {
        margin-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
}
/* Bandeau mémoire IA : .alert sans variante hérite du texte blanc de la page */
#customerchat #chat-ai-memory,
#professionalchat #chat-ai-memory {
    background: #152033;
    border: none;
    border-left: 3px solid #fc6194;
    box-shadow: 0 4px 14px rgba(92, 43, 99, 0.25);
    color: #fff;
}
#customerchat #chat-ai-memory .btn-primary,
#professionalchat #chat-ai-memory .btn-primary {
    background: #fc6194;
    border: none;
    border-radius: 999px;
    color: #fff;
    padding: 4px 14px;
}
#customerchat #chat-ai-memory .btn-outline-secondary,
#professionalchat #chat-ai-memory .btn-outline-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: #fff;
    padding: 4px 14px;
}
#customerchat #chat-ai-memory .btn-outline-secondary:hover,
#professionalchat #chat-ai-memory .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}
#customerchat #chat-ai-memory .btn-link,
#professionalchat #chat-ai-memory .btn-link {
    color: #ffd1e1;
    font-weight: 600;
}