/* =========================================================
   JASSAD - GLOBAL THEME
  ========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    /* DARK = thème actuel */
    --j-bg: #ffffff;
    --j-bg-secondary: #181818;
    --j-bg-soft: #222222;

    --j-text: #362d7e;
    --j-text-secondary: #d0d0d0;
    --j-text-muted: #929292;

    --j-border: rgba(255, 255, 255, .12);
    --j-border-strong: rgba(255, 255, 255, .22);

    --j-card: #181818;

    --j-menu-bg: #FFFFFF;
    --j-menu-text: #362d7e;

    --j-header-bg: transparent;

    --j-overlay: rgba(0, 0, 0, .55);

}

/* =========================================
   HERO — FOND BLANC → VIOLET
   ========================================= */

/* =========================================================
   HERO — DÉGRADÉ CONTINU
   Blanc → Lavande → Violet
========================================================= */

.th-hero-wrapper.hero-3 {
    position: relative;
    overflow: hidden;

}

/* =========================================================
   WHITE THEME
========================================================= */

body.jassad-light {

    --j-bg: #ffffff;
    --j-bg-secondary: #f7f7f7;
    --j-bg-soft: #eeeeee;

    --j-text: #181818;
    --j-text-secondary: #444444;
    --j-text-muted: #777777;

    --j-border: rgba(0, 0, 0, .10);
    --j-border-strong: rgba(0, 0, 0, .18);

    --j-card: #ffffff;

    --j-menu-bg: #ffffff;
    --j-menu-text: #181818;

    --j-header-bg: rgba(255, 255, 255, .96);

    --j-overlay: rgba(255, 255, 255, .12);

}


/* =========================================================
   GLOBAL
========================================================= */

html {
    background: var(--j-bg);
}

body {

    background-color: var(--j-bg);

    color: var(--j-text);

}


/* =========================================================
   TRANSITION GLOBALE
========================================================= */

body.jassad-theme-transition,
body.jassad-theme-transition *,
body.jassad-theme-transition *::before,
body.jassad-theme-transition *::after {

    transition:
        background-color .30s ease,
        color .30s ease,
        border-color .30s ease,
        box-shadow .30s ease !important;

}


/* =========================================================
   HEADER
========================================================= */

body.jassad-light .th-header {

    background-color: var(--j-header-bg);

}


/* =========================================================
   MENU DESKTOP
========================================================= */

@media (min-width: 1200px) {

    body.jassad-light .main-menu>ul>li>a {

        color: var(--j-menu-text) !important;

    }


    body.jassad-light .main-menu>ul>li>a:hover {

        color: #ffffff !important;

    }


    /*
     * Sous-menu
     */

    body.jassad-light .main-menu .sub-menu {

        background-color: #ffffff !important;

        border: 1px solid rgba(0, 0, 0, .08);

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .12);

    }


    body.jassad-light .main-menu .sub-menu a {

        color: #362d7e !important;

    }


    body.jassad-light .main-menu .sub-menu a:hover {

        color: #ffffff !important;

        background-color: #ffffff !important;

    }

}


/* =========================================================
   MENU MOBILE
========================================================= */

body.jassad-light .th-menu-wrapper {

    background-color: #ffffff;

}


body.jassad-light .th-menu-area {

    background-color: #ffffff !important;

    color: #181818 !important;

}


body.jassad-light .th-mobile-menu {

    background-color: #ffffff;

}


body.jassad-light .th-mobile-menu a {

    color: #181818 !important;

}


body.jassad-light .th-mobile-menu a:hover {

    color: #fff !important;

}


body.jassad-light .th-mobile-menu .sub-menu {

    background-color: #f7f7f7 !important;

}


body.jassad-light .th-mobile-menu .sub-menu a {

    color: #fff !important;

}


body.jassad-light .th-menu-toggle {

    color: #181818 !important;

}


/* =========================================================
   HERO / BANNIÈRE
========================================================= */

/*
 * On conserve l'image du hero.
 * Le mode White agit sur l'overlay et le contenu.
 */

body.jassad-light .hero-2,
body.jassad-light .hero-3,
body.jassad-light .th-hero {

    color: #181818;

}


/*
 * Texte du hero
 */

body.jassad-light .hero-title,
body.jassad-light .hero-title * {

    color: #ffffff !important;

}


/*
 * On garde le texte de la bannière lisible
 * même en mode White.
 */

body.jassad-light .hero-text,
body.jassad-light .hero-text * {

    color: #ffffff !important;

}


/* =========================================================
   SECTIONS
========================================================= */

body.jassad-light section {

    color: var(--j-text);

}


/*
 * Fonds blancs du template
 */

body.jassad-light .bg-white,
body.jassad-light .white-bg {

    background-color: #ffffff !important;

}


/*
 * Fonds gris
 */

body.jassad-light .bg-smoke,
body.jassad-light .bg-light {

    background-color: #f7f7f7 !important;

}


/*
 * Fonds sombres du template :
 * ils restent sombres seulement si la section
 * est volontairement conçue comme une section noire.
 */

body.jassad-light .bg-black {

    background-color: #ffffff !important;

}


/* =========================================================
   TITRES
========================================================= */

body.jassad-light h1,
body.jassad-light h2,
body.jassad-light h3,
body.jassad-light h4,
body.jassad-light h5,
body.jassad-light h6 {

    color: var(--j-text);

}


body.jassad-light .sec-title,
body.jassad-light .box-title {

    color: var(--j-text);

}


/* =========================================================
   TEXTES
========================================================= */

body.jassad-light p {

    color: var(--j-text-secondary);

}


body.jassad-light .text-muted {

    color: var(--j-text-muted) !important;

}


/*
 * Attention aux classes Bootstrap du template.
 */

body.jassad-light .text-dark {

    color: #181818 !important;

}


/* =========================================================
   CARTES
========================================================= */

body.jassad-light .card,
body.jassad-light .event-card,
body.jassad-light .blog-card,
body.jassad-light .speaker-card,
body.jassad-light .team-card,
body.jassad-light .product-card {

    background-color: var(--j-card);

    color: var(--j-text);

    border-color: var(--j-border);

}


/* =========================================================
   BORDURES
========================================================= */

body.jassad-light hr {

    border-color: var(--j-border);

}


body.jassad-light .border {

    border-color: var(--j-border) !important;

}


/* =========================================================
   BOUTONS
========================================================= */

body.jassad-light .th-btn {

    color: #ffffff;

}


/*
 * Boutons clairs
 */

body.jassad-light .btn-light {

    background-color: #362d7e !important;

    color: #ffffff !important;

    border-color: #fff !important;

}


body.jassad-light .btn-light:hover {

    background-color: #fff !important;

}


/* =========================================================
   LIENS
========================================================= */

body.jassad-light a {

    color: inherit;

}


/* =========================================================
   FORMULAIRES
========================================================= */

body.jassad-light input,
body.jassad-light textarea,
body.jassad-light select {

    background-color: #ffffff !important;

    color: #181818 !important;

    border-color: rgba(0, 0, 0, .15) !important;

}


body.jassad-light input::placeholder,
body.jassad-light textarea::placeholder {

    color: #888888;

}


/* =========================================================
   TABLEAUX
========================================================= */

body.jassad-light table {

    color: #222222;

}


body.jassad-light th {

    background-color: #181818 !important;

    color: #ffffff !important;

}


body.jassad-light td {

    background-color: #ffffff;

    color: #333333;

    border-color: rgba(0, 0, 0, .10) !important;

}


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

body.jassad-light footer,
body.jassad-light .footer-wrapper,
body.jassad-light .footer-layout {

    background-color: #f4f4f4;

    color: #222222;

}


body.jassad-light footer p,
body.jassad-light footer span {

    color: #666666;

}


body.jassad-light footer a {

    color: #222222;

}


body.jassad-light footer a:hover {

    color: #000000;

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

body.jassad-light .social-links a {

    color: #222222;

    border-color: rgba(0, 0, 0, .15);

}


body.jassad-light .social-links a:hover {

    background-color: #181818;

    color: #ffffff;

}


/* =========================================================
   BOUTON DARK / WHITE
========================================================= */

.jassad-header-actions {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    flex-wrap: nowrap !important;

    white-space: nowrap !important;

}


/* =========================================================
   THEME BUTTON
========================================================= */

.jassad-theme-toggle {

    width: 40px !important;

    height: 40px !important;

    min-width: 40px !important;

    min-height: 40px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255, 255, 255, .35) !important;

    background: transparent !important;

    color: #ffffff !important;

    line-height: 1 !important;

    cursor: pointer;

    flex: 0 0 40px !important;

}


.jassad-theme-toggle:hover {

    background-color: rgba(255, 255, 255, .10) !important;

}


body.jassad-light .jassad-theme-toggle {

    color: #eeebeb !important;

    border-color: rgba(0, 0, 0, .20) !important;

}


body.jassad-light .jassad-theme-toggle:hover {

    background-color: rgba(0, 0, 0, .06) !important;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.jassad-mobile-menu {

    width: 40px !important;

    height: 40px !important;

    min-width: 40px !important;

    min-height: 40px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    background: transparent !important;

    line-height: 1 !important;

    flex: 0 0 40px !important;

}


.jassad-mobile-menu .menu {

    display: none !important;

}


/* =========================================================
   MENU MOBILE - RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .th-header .header-button {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        flex-wrap: nowrap !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;

    }

}


/* =========================================================
   DESKTOP MENU - PAS DE RETOUR À LA LIGNE
========================================================= */

@media (min-width: 1200px) {

    .main-menu>ul {

        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

    }


    .main-menu>ul>li {

        white-space: nowrap !important;

    }


    .main-menu>ul>li>a {

        white-space: nowrap !important;

        font-size: 12px !important;

    }


    .jassad-mobile-menu {

        display: none !important;

    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 480px) {

    .jassad-theme-toggle,
    .jassad-mobile-menu {

        width: 37px !important;

        height: 37px !important;

        min-width: 37px !important;

        min-height: 37px !important;

        flex-basis: 37px !important;

    }

}

/* =========================================
   HERO — TITRE BLANC → VIOLET
   ========================================= */

.hero-style3 .hero-title {

    background: #362d7e;


    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ========================================================= JASSAD — HEADER : TRANSPARENT EN HAUT, BLANC ET VIOLET AU SCROLL ========================================================= */

/* En haut de page : conserver le design d'origine */
.th-header.header-layout3 .sticky-wrapper {
    background-color: transparent;
    box-shadow: none;
}

/* Pendant le scroll : fond blanc */
.th-header.header-layout3 .sticky-wrapper.sticky {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Liens violets uniquement pendant le scroll */
.th-header.header-layout3 .sticky-wrapper.sticky .main-menu>ul>li>a {
    color: #362d7e !important;
}

/* Sous-menus pendant le scroll */
.th-header.header-layout3 .sticky-wrapper.sticky .main-menu .sub-menu {
    background-color: #ffffff !important;
}

.th-header.header-layout3 .sticky-wrapper.sticky .main-menu .sub-menu a {
    color: #362d7e !important;
}

/* Bouton du menu mobile pendant le scroll */
.th-header.header-layout3 .sticky-wrapper.sticky .th-menu-toggle,
.th-header.header-layout3 .sticky-wrapper.sticky .th-menu-toggle i {
    color: #362d7e !important;
}

/* ========================================================= JASSAD — MENU UN PEU PLUS GRAND ET PLUS ESPACÉ ========================================================= */

@media (min-width: 1200px) {

    /* Agrandir légèrement les textes */
    .th-header.header-layout3 .main-menu>ul>li>a {
        font-size: 13px !important;
    }

    /* Augmenter l'espace entre les éléments du menu */
    .th-header.header-layout3 .main-menu>ul>li {
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    /* Garder les éléments bien alignés */
    .th-header.header-layout3 .main-menu>ul {
        align-items: center;
        flex-wrap: nowrap;
    }

    /* Ajouter un peu d'espace entre les boutons */
    .th-header.header-layout3 .header-button {
        gap: 12px !important;
    }
}

/* == JASSAD — MENU TRANSPARENT EN HAUT BLANC ET VIOLET AU SCROLL + MENU PLUS GRAND ========================================================= */

@media (min-width: 1200px) {

    /* Liens légèrement plus grands et plus espacés */
    .th-header.header-layout3 .main-menu>ul>li>a {
        font-size: 13px !important;
    }

    .th-header.header-layout3 .main-menu>ul>li {
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    .th-header.header-layout3 .main-menu>ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Espacement entre les boutons */
    .th-header.header-layout3 .header-button {
        gap: 12px !important;
    }

    /* En haut : garder le fond d'origine */
    .th-header.header-layout3 .sticky-wrapper:not(.sticky) {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Au scroll : fond blanc */
    .th-header.header-layout3 .sticky-wrapper.sticky {
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    }

    /* Texte violet au scroll uniquement */
    .th-header.header-layout3 .sticky-wrapper.sticky .main-menu>ul>li>a {
        color: #362d7e !important;
    }

    /* Sous-menu au scroll */
    .th-header.header-layout3 .sticky-wrapper.sticky .main-menu .sub-menu {
        background-color: #ffffff !important;
    }

    .th-header.header-layout3 .sticky-wrapper.sticky .main-menu .sub-menu a {
        color: #362d7e !important;
    }

    /* Fond blanc du sous-menu au survol */
    .th-header.header-layout3 .sticky-wrapper.sticky .main-menu .sub-menu a:hover {
        background-color: #f2f0fa !important;
        color: #362d7e !important;
    }
}

/* JASSAD — AÉRER LE MENU DESKTOP */

@media (min-width: 1200px) {

    /* Espacement entre les boutons du menu */
    .th-header.header-layout3 nav.main-menu>ul>li {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    /* Espacement intérieur de chaque lien */
    .th-header.header-layout3 nav.main-menu>ul>li>a {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Empêcher les liens de se coller */
    .th-header.header-layout3 nav.main-menu>ul {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
}

/* HERO 3 : disposition uniquement */
.th-hero-wrapper.hero-3 .hero-style3 {
    text-align: left;
}

.th-hero-wrapper.hero-3 .hero-title p {
    font-size: 45px !important;
    line-height: 1.3;
}

/* Image : ne pas modifier ses propriétés d'animation */
.th-hero-wrapper.hero-3 .video-thumb3-1 {
    width: 100%;
}

/* Mobile */
@media (max-width: 991px) {
    .th-hero-wrapper.hero-3 .hero-style3 {
        margin-top: 25px;
        text-align: center;
    }

    .th-hero-wrapper.hero-3 .hero-title p {
        font-size: 32px !important;
    }
}


/* Réduire uniquement l'espace entre les deux lignes */
#heroSlide5 .hero-title .title,
#heroSlide5 .hero-title .d-block {
    line-height: 1.05 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   JASSAD — ALIGNEMENT JUSTIFIÉ DE TOUS LES TEXTES
========================================================= */

body p,
body .box-text,
body .box-text2,
body .box-content,
body .about-text,
body .sec-text,
body .text,
body .event-text,
body .blog-text {
    text-align: justify !important;
}

/* JASSAD — Taille des noms des participantes */
.th-team.team-box .box-content .box-title,
.th-team.team-box .box-content .box-title a {
    font-size: 15px !important;
    line-height: 1.4 !important;
}



/* ===== JASSAD - Partenaires ===== */

#partenaires .brand-wrapp {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 45px 55px;
    margin-top: 45px;
}

#partenaires .brand-card.style3 {
    width: 100%;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    animation: partnerReveal 0.7s ease forwards;
}

/* Liens et centrage */
#partenaires .brand-card a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* Logos : couleurs originales et proportions conservées */
#partenaires .brand-card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 135px;
    object-fit: contain;
    filter: none;
    transition: transform 0.35s ease;
}

/* Apparition progressive */
#partenaires .brand-card:nth-child(1) {
    animation-delay: 0.05s;
}

#partenaires .brand-card:nth-child(2) {
    animation-delay: 0.15s;
}

#partenaires .brand-card:nth-child(3) {
    animation-delay: 0.25s;
}

#partenaires .brand-card:nth-child(4) {
    animation-delay: 0.35s;
}

#partenaires .brand-card:nth-child(5) {
    animation-delay: 0.45s;
}

#partenaires .brand-card:nth-child(6) {
    animation-delay: 0.55s;
}

@keyframes partnerReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

/* Survol discret */
#partenaires .brand-card.style3:hover {
    background: transparent;
}

#partenaires .brand-card:hover img {
    filter: none;
    transform: scale(1.06);
}

/* Tablettes */
@media (max-width: 991px) {
    #partenaires .brand-wrapp {
        gap: 30px 25px;
    }

    #partenaires .brand-card.style3 {
        height: 135px;
        padding: 10px;
    }

    #partenaires .brand-card img {
        max-height: 115px;
    }
}

/* Mobiles */
@media (max-width: 575px) {
    #partenaires .brand-wrapp {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
        margin-top: 25px;
    }

    #partenaires .brand-card.style3 {
        height: 115px;
        padding: 6px;
    }

    #partenaires .brand-card img {
        max-height: 95px;
    }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    #partenaires .brand-card.style3 {
        opacity: 1;
        animation: none;
    }

    #partenaires .brand-card img {
        transition: none;
    }
}



/* =====================================
   PARTENAIRES JASSAD
===================================== */

#partenaires .brand-card img {
    max-height: none !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

#partenaires .partners-row {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin: 35px auto 50px;
    gap: 30px;
}

/* Première rangée : 2 logos principaux */
#partenaires .partners-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px;
    max-width: 1000px;
    margin-top: 35px;
    margin-bottom: 60px;
}

/* Deux rangées de 3 logos */
#partenaires .partners-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 45px;
}

/* Dernière rangée : 4 logos */
#partenaires .partners-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

/* Blocs des logos : aucun cadre ni arrière-plan */
#partenaires .brand-card.style3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 165px;
    min-width: 0;
    padding: 10px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;

    opacity: 0;
    animation: jassadPartnerReveal 0.7s ease forwards;
}

#partenaires .brand-card.style3:hover {
    background: transparent;
}

/* Zone cliquable */
#partenaires .brand-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Réglages généraux des images */
#partenaires .brand-card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 135px;
    object-fit: contain;
    filter: none;
    transition: transform 0.3s ease;
}

/* Deux premiers logos : plus grands */
#partenaires .partners-featured .brand-card {
    height: 190px;
}

#partenaires .partners-featured .brand-card img {
    max-width: 100%;
    max-height: 170px;
}

/* Rangées de 3 logos */
#partenaires .partners-three .brand-card img {
    max-height: 140px;
}

/* Rangée de 4 logos */
#partenaires .partners-four .brand-card img {
    max-height: 125px;
}

/* Survol discret */
#partenaires .brand-card:hover img {
    transform: scale(1.04);
}

/* Animation d'apparition */
@keyframes jassadPartnerReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

/* Décalage de l'animation par rangée */
#partenaires .partners-featured .brand-card:nth-child(2) {
    animation-delay: 0.12s;
}

#partenaires .partners-three:nth-of-type(3) .brand-card:nth-child(2) {
    animation-delay: 0.12s;
}

#partenaires .partners-three:nth-of-type(3) .brand-card:nth-child(3) {
    animation-delay: 0.24s;
}

/* Tablettes */
@media (max-width: 767px) {
    #partenaires .partners-row {
        gap: 25px 20px;
        margin-bottom: 35px;
    }

    #partenaires .partners-featured {
        gap: 25px;
        margin-bottom: 40px;
    }

    #partenaires .brand-card.style3 {
        height: 135px;
        padding: 5px;
    }

    #partenaires .partners-featured .brand-card {
        height: 155px;
    }

    #partenaires .partners-featured .brand-card img {
        max-height: 140px;
    }

    #partenaires .partners-three .brand-card img {
        max-height: 110px;
    }

    #partenaires .partners-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #partenaires .partners-four .brand-card img {
        max-height: 110px;
    }
}

/* Petits mobiles */
@media (max-width: 480px) {
    #partenaires .partners-featured {
        gap: 12px;
    }

    #partenaires .partners-featured .brand-card {
        height: 120px;
    }

    #partenaires .partners-featured .brand-card img {
        max-height: 110px;
    }

    #partenaires .partners-three {
        gap: 18px 8px;
    }

    #partenaires .partners-three .brand-card {
        height: 105px;
    }

    #partenaires .partners-three .brand-card img {
        max-height: 85px;
    }

    #partenaires .partners-four .brand-card img {
        max-height: 95px;
    }
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
    #partenaires .brand-card.style3 {
        opacity: 1;
        animation: none;
    }

    #partenaires .brand-card img {
        transition: none;
    }
}

@media (min-width: 1200px) {
    .col-xl-20 {
        flex: 0 0 auto;
        width: 20%;
    }
}

```css

/* Bouton Instagram */
.gallery-insta .box-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    border-radius: 13px;

    color: #fff;
    text-decoration: none;

    background: linear-gradient(45deg,
            #feda75,
            #fa7e1e,
            #d62976,
            #962fbf,
            #4f5bd5);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-insta .box-btn i {
    font-size: 23px;
}

.gallery-insta .box-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(214, 41, 118, 0.35);
}




/* =====================================
   GALERIE INSTAGRAM JASSAD
===================================== */

.instagram-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0;
}

.instagram-gallery>.gallery-insta_wrapp {
    padding: 0 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Images */
.instagram-gallery .gallery-insta {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.instagram-gallery .box-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.instagram-gallery .box-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Décalage alterné sur ordinateur */
@media (min-width: 1200px) {
    .instagram-gallery>.gallery-insta_wrapp:nth-child(even) {
        margin-top: 35px;
    }
}

/* Effet de survol */
.instagram-gallery .gallery-insta:hover .box-img img {
    transform: scale(1.05);
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .instagram-gallery>.gallery-insta_wrapp:nth-child(3n + 2) {
        margin-top: 25px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .instagram-gallery>.gallery-insta_wrapp:nth-child(even) {
        margin-top: 20px;
    }
}

/* Alignement symétrique de la galerie Instagram */
@media (min-width: 1200px) {

    .instagram-gallery {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Images 1, 3 et 5 : même niveau */
    .instagram-gallery>.gallery-insta_wrapp:nth-child(odd) {
        margin-top: 0 !important;
        transform: translateY(0);
    }

    /* Images 2, 4 et 6 : même niveau, plus bas */
    .instagram-gallery>.gallery-insta_wrapp:nth-child(even) {
        margin-top: 65px !important;
        transform: translateY(0);
    }
}

/* =====================================================
   JASSAD — PAGE DÉTAIL DU SPECTACLE
   Correction de la mise en page
===================================================== */

.page-jassad-detail {
    overflow-x: hidden;
}

.page-jassad-detail .brochure {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 30px 40px;
    box-sizing: border-box;
}

.page-jassad-detail .brochure-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 55px;
}

.page-jassad-detail .left-column,
.page-jassad-detail .right-column {
    min-width: 0;
    width: 100%;
}

.page-jassad-detail .country-title {
    margin: 0 0 30px;
    color: #362d7e;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
}

.page-jassad-detail .left-column h2,
.page-jassad-detail .right-column h2 {
    margin: 35px 0 18px;
    color: #362d7e;
    font-size: 23px;
    line-height: 1.4;
    font-weight: 700;
}

.page-jassad-detail .left-column p,
.page-jassad-detail .right-column p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.85;
    text-align: justify;
    overflow-wrap: break-word;
    hyphens: auto;
}

.page-jassad-detail .portraits {
    width: 100%;
    margin-bottom: 35px;
}

.page-jassad-detail .portraits img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.page-jassad-detail .show-info {
    margin: 0 0 30px;
    padding: 25px;
    background: #f7f6fb;
    border-left: 4px solid #362d7e;
    border-radius: 5px;
}

.page-jassad-detail .show-info p {
    margin-bottom: 12px;
    text-align: left;
}

.page-jassad-detail .show-info p:last-child {
    margin-bottom: 0;
}

.page-jassad-detail .right-column>.position-relative {
    width: 100%;
    margin-top: 30px;
}

.page-jassad-detail .right-column .gallery-insta_wrapp {
    width: 100%;
    padding: 0;
}

.page-jassad-detail .right-column .gallery-insta_wrapp img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
}

/* Galerie du spectacle */

.page-jassad-detail .jassad-detail-gallery {
    width: 100%;
    padding: 55px 0;
}

.page-jassad-detail .jassad-detail-gallery-title {
    margin-bottom: 30px;
    color: #362d7e;
    font-size: 30px;
    font-weight: 700;
}

.page-jassad-detail .detailGallerySlider {
    width: 100%;
    overflow: hidden;
}

.page-jassad-detail .detailGallerySlider .swiper-slide {
    height: auto;
}

.page-jassad-detail .detailGallerySlider .gallery-insta,
.page-jassad-detail .detailGallerySlider .box-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.page-jassad-detail .detailGallerySlider .box-img {
    aspect-ratio: 4 / 3;
}

.page-jassad-detail .detailGallerySlider .box-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablettes */

@media (max-width: 991px) {
    .page-jassad-detail .brochure {
        padding: 45px 22px 30px;
    }

    .page-jassad-detail .brochure-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .page-jassad-detail .country-title {
        font-size: 32px;
    }

    .page-jassad-detail .left-column h2,
    .page-jassad-detail .right-column h2 {
        font-size: 21px;
    }
}

/* Smartphones */

@media (max-width: 575px) {
    .page-jassad-detail .brochure {
        padding: 30px 16px 20px;
    }

    .page-jassad-detail .brochure-grid {
        gap: 25px;
    }

    .page-jassad-detail .country-title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .page-jassad-detail .left-column h2,
    .page-jassad-detail .right-column h2 {
        margin-top: 25px;
        font-size: 19px;
    }

    .page-jassad-detail .left-column p,
    .page-jassad-detail .right-column p {
        font-size: 14px;
        line-height: 1.75;
    }

    .page-jassad-detail .show-info {
        padding: 18px;
    }

    .page-jassad-detail .jassad-detail-gallery {
        padding: 35px 0;
    }

    .page-jassad-detail .jassad-detail-gallery-title {
        font-size: 25px;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {

    .page-jassad-detail *,
    .page-jassad-detail *::before,
    .page-jassad-detail *::after {
        scroll-behavior: auto !important;
    }
}

.jassad-list-justify li {
    text-align: justify !important;
    text-justify: inter-word;
    line-height: 1.8;
    margin-bottom: 12px;
}

/* Présentation individuelle des artistes */
.page-jassad-detail .artist-profile {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
}

/* Photo */
.page-jassad-detail .artist-photo {
    flex: 0 0 38%;
    max-width: 38%;
}

.page-jassad-detail .artist-photo img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

/* Texte */
.page-jassad-detail .artist-text {
    flex: 1;
    min-width: 0;
}

.page-jassad-detail .artist-text h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.page-jassad-detail .artist-text p {
    margin-bottom: 0;
    text-align: justify;
    line-height: 1.8;
}

/* Inversion pour la deuxième artiste */
.page-jassad-detail .artist-profile-reverse {
    flex-direction: row-reverse;
}

/* Mobile */
@media (max-width: 767px) {
    .page-jassad-detail .artist-profile,
    .page-jassad-detail .artist-profile-reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .page-jassad-detail .artist-photo {
        flex: 0 0 auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .page-jassad-detail .artist-photo img {
        height: 300px;
    }
}
.artist-profile {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    margin-bottom: 30px;
}

.artist-photo {
    flex: 0 0 200px;
    width: 200px;
}

.artist-photo img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.artist-text {
    flex: 1;
    min-width: 0;
}

.artist-text p {
    margin: 0;
    text-align: justify;
    line-height: 1.8;
}

.artist-name {
    color: #6A0DAD;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 576px) {
    .artist-profile {
        gap: 15px;
        align-items: flex-start;
    }

    .artist-photo {
        flex: 0 0 115px;
        width: 115px;
    }

    .artist-photo img {
        height: 145px;
    }

    .artist-text p {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* =========================================
   JASSAD — PHOTOS ET TEXTES DES ARTISTES
========================================= */

.page-jassad-detail .artist-profile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    width: 100%;
    margin: 30px 0;
}

/* Même position pour les deux photos */
.page-jassad-detail .artist-photo {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
}

.page-jassad-detail .artist-photo img {
    display: block;
    width: 150px !important;
    height: 180px !important;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

/* Texte à côté de chaque photo */
.page-jassad-detail .artist-text {
    flex: 1;
    min-width: 0;
}

.page-jassad-detail .artist-text h3 {
    color: #362d7e !important;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px !important;
}

.page-jassad-detail .artist-text p {
    margin: 0 !important;
    line-height: 1.8;
    text-align: justify;
}

/* Noms en violet foncé */
.page-jassad-detail .artist-name {
    color: #362d7e !important;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 576px) {
    .page-jassad-detail .artist-profile {
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .page-jassad-detail .artist-photo {
        flex: 0 0 100px !important;
        width: 100px !important;
        max-width: 100px !important;
    }

    .page-jassad-detail .artist-photo img {
        width: 100px !important;
        height: 130px !important;
    }

    .page-jassad-detail .artist-text h3 {
        font-size: 17px;
    }

    .page-jassad-detail .artist-text p {
        font-size: 13px;
        line-height: 1.6;
    }
}
/* POPUP VIDEO JASSAD */
.video-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10, 8, 20, 0.92);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-popup.active {
    display: flex;
}

.video-popup-content {
    position: relative;
    width: 100%;
    max-width: 950px;
    background: #111;
    border: 1px solid rgba(153, 20, 203, 0.7);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 0 40px rgba(153, 20, 203, 0.25);
}

.video-popup-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}

.video-popup-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-popup-close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: linear-gradient(135deg, #9914CB, #F35D00);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

@media (max-width: 575px) {
    .video-popup {
        padding: 12px;
    }

    .video-popup-content {
        padding: 5px;
    }
}

/* Images participantes : conserver les proportions originales */
.testi-card_wrapp {
    padding-left: 12px;
    padding-right: 12px;
}

.testi-card,
.testi-card .box-img-wrapp,
.testi-card .box-img {
    width: 100%;
    max-width: none;
}

.testi-card .box-img {
    height: auto !important;
    overflow: visible;
}

.testi-card .box-img img {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
}
/* Espacement entre les cartes participantes */
.testi-card_wrapp {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 30px;
}

/* Conserver la taille de l'image */
.testi-card .box-img,
.testi-card .box-img img {
    width: 100%;
}

.testi-card_wrapp {
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-bottom: 35px;
}