/* ==========================================================================
   BOUTON BILLETS
   ========================================================================== */
/* ==========================================================================
   HEADER STICKY CUSTOM (.planketon-sticky) - HORS VISUAL BUILDER DIVI 5
   ========================================================================== */

/* 1. Sur le front-end : remplace le position: absolute par fixed
      pour suivre le scroll tout en restant superposé au Hero */
body:not(.et-fb) .planketon-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color 0.35s ease,
        padding-top 0.35s ease,
        padding-bottom 0.35s ease,
        border-bottom-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease !important;
}

/* Transition fluide sur la ligne interne, les modules et le logo (.symphorien-2-logo) */
body:not(.et-fb) .planketon-sticky .et_pb_row,
body:not(.et-fb) .planketon-sticky .et_pb_menu,
body:not(.et-fb) .planketon-sticky .symphorien-2-logo,
body:not(.et-fb) .planketon-sticky .symphorien-2-logo img,
body:not(.et-fb) .planketon-sticky .et_pb_menu__logo img {
    transition: padding-top 0.35s ease,
        padding-bottom 0.35s ease,
        margin-top 0.35s ease,
        margin-bottom 0.35s ease,
        width 0.35s ease,
        max-width 0.35s ease,
        max-height 0.35s ease,
        transform 0.35s ease !important;
}

/* 2. Compensation de la barre d'admin WordPress (connecté) */
body.admin-bar:not(.et-fb) .planketon-sticky {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar:not(.et-fb) .planketon-sticky {
        top: 46px !important;
    }
}

/* En mobile (< 600px), la barre WP admin n'est plus fixe quand on scrolle */
@media screen and (max-width: 600px) {
    body.admin-bar:not(.et-fb) .planketon-sticky.is-scrolled {
        top: 0 !important;
    }
}

/* 3. État au scroll (.is-scrolled ajouté par js/custom.js) :
      Fond bleu nuit flouté + bordure basse 1px #4f2c12 + respiration verticale */
body:not(.et-fb) .planketon-sticky.is-scrolled {
    background-color: rgba(1, 13, 22, 0.92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #C19968 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body:not(.et-fb) .planketon-sticky.is-scrolled .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body:not(.et-fb) .planketon-sticky.is-scrolled .et_pb_menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Réduction du logo (.symphorien-2-logo) en % au scroll + marge de respiration haut/bas */
body:not(.et-fb) .planketon-sticky.is-scrolled .symphorien-2-logo,
body:not(.et-fb) .planketon-sticky.is-scrolled .symphorien-2-logo img,
body:not(.et-fb) .planketon-sticky.is-scrolled .et_pb_menu__logo img {
    max-width: 75% !important;
    transform: scale(0.82);
    transform-origin: left center;
}

/* ==========================================================================
   ALIGNEMENT DES ITEMS DU MENU NATIF DIVI 5 (.menu-top-planketon sur le Module)
   ========================================================================== */

/* Aligner verticalement les colonnes (Logo + Menu) dans la ligne du header */
.planketon-sticky .et_pb_row {
    align-items: center !important;
}

/* Desktop uniquement (>= 981px) : on affiche et aligne le menu horizontalement */
@media (min-width: 981px) {

    /* Conteneurs internes du module Menu et liste <ul> : alignement vertical centré */
    .menu-top-planketon .et_pb_menu__wrap,
    .menu-top-planketon .et_pb_menu__menu,
    .menu-top-planketon .et-menu-nav,
    .menu-top-planketon ul.et-menu {
        display: flex !important;
        align-items: center !important;
    }

    /* Chaque item <li> centré sur le même axe vertical sans marge ni padding parasite */
    .menu-top-planketon ul.et-menu>li {
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Suppression du padding-bottom natif de Divi (29px) sur les liens standards
       qui poussait PRÉSENTATION, DISTRIBUTION et MÉDIAS vers le haut */
    .menu-top-planketon ul.et-menu>li:not(:last-child)>a {
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    /* Bouton BILLETS (dernier item du menu) : style pilule + centrage vertical */
    .menu-top-planketon ul.et-menu>li:last-child>a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 50px !important;
        background-color: #831518 !important;
        padding: 0.65rem 1.15rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        color: #ffffff !important;
        transform: scale(1) !important;
        transform-origin: center center !important;
        backface-visibility: hidden;
        transition: transform 0.25s ease-in-out,
            background-color 0.25s ease-in-out,
            color 0.25s ease-in-out,
            border-color 0.25s ease-in-out !important;
    }

    /* Effet au survol (Hover) du bouton BILLETS : scale à 102% */
    .menu-top-planketon ul.et-menu>li:last-child>a:hover {
        background-color: #FFFFFF !important;
        color: #000000 !important;
        border-color: #ffffff !important;
        transform: scale(1.02) !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   MENU MOBILE & TABLETTE (<= 980px) : PLEINE LARGEUR + CENTRAGE + BOUTON BILLETS
   ========================================================================== */
@media (max-width: 980px) {

    /* 1. Masquer le menu desktop et afficher uniquement l'icône hamburger */
    .menu-top-planketon .et_pb_menu__menu {
        display: none !important;
    }

    .menu-top-planketon .et_mobile_nav_menu {
        display: flex !important;
        align-items: center !important;
    }

    /* 2. Forcer tous les conteneurs intermédiaires (y compris .mobile_nav et .et_pb_module_inner)
          en position: static pour que .et_mobile_menu prenne la largeur de .planketon-sticky (100% de la page)
          et non la largeur de 40px de l'icône hamburger ! */
    .planketon-sticky div,
    .planketon-sticky nav {
        position: static !important;
    }

    /* 3. Menu déroulant mobile sur 100% de la largeur de l'écran */
    .planketon-sticky .et_pb_menu .et_mobile_menu,
    .menu-top-planketon .et_mobile_menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 4. Centrer chaque élément <li> et son texte au milieu de l'écran */
    .menu-top-planketon .et_mobile_menu>li {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    .menu-top-planketon .et_mobile_menu>li:not(:last-child)>a {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }

    /* 5. Conserver l'aspect bouton pilule sur le dernier élément (BILLETS) en mobile */
    .menu-top-planketon .et_mobile_menu>li:last-child {
        padding: 12px 0 6px 0 !important;
    }

    .menu-top-planketon .et_mobile_menu>li:last-child>a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        line-height: 1 !important;
        border-radius: 50px !important;
        background-color: #e89e43 !important;
        border: 1px solid #ffffff !important;
        padding: 0.55rem 1.5rem !important;
        color: #000000 !important;
        text-align: center !important;
        transform: scale(1) !important;
        transition: all 0.25s ease-in-out !important;
    }

    .menu-top-planketon .et_mobile_menu>li:last-child>a:hover {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #ffffff !important;
        transform: scale(1.02) !important;
    }
}


/* ==========================================================================
   BLOC 1 : DIVI MACHINE - BOUTON BILLETS (.dm-acf-item-planketon)
   ========================================================================== */

/* 1. Structure, Padding & Animation au repos */
html body .dm-acf-item-planketon a.et_pb_button {
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: fit-content !important;

    /* Verrouillage strict du padding normal */
    padding: 6px 20px !important;
    letter-spacing: inherit !important;
    border: none !important;

    /* Animation Scale */
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform 0.25s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* 2. État au survol (:hover) */
html body .dm-acf-item-planketon a.et_pb_button:hover {
    /* Verrouille le même padding pour empêcher le saut de texte */
    padding: 6px 20px !important;
    transform: scale(1.04) !important;
}

/* 3. Masquer les icônes natives Divi */
html body .dm-acf-item-planketon a.et_pb_button::before,
html body .dm-acf-item-planketon a.et_pb_button::after,
html body .dm-acf-item-planketon a.et_pb_button:hover::before,
html body .dm-acf-item-planketon a.et_pb_button:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* Supprime le décalage/padding supérieur par défaut si Divi en ajoute un */
#page-container,
#main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ==========================================================================
   CORRECTION DE L'ESPACEMENT & ALIGNEMENT DANS LE TEMPLATE LOOP SPECTACLE
   ========================================================================== */

/* 1. Sur Desktop (>= 981px) : alignement horizontal parfait sur le même axe vertical */
@media (min-width: 981px) {
    .loop-spectacle-dm .et_pb_row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        /* Aligne les 3 colonnes sur la même ligne médiane */
        justify-content: space-between !important;
    }

    .loop-spectacle-dm .et_pb_column {
        align-self: center !important;
        /* Neutralise l'effet d'escalier (top / center / bottom) */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .loop-spectacle-dm .et_pb_column>* {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 2. Sur Tablette & Mobile (<= 980px) ou en affichage grille multi-colonnes : empilement propre */
@media (max-width: 980px) {
    .loop-spectacle-dm .et_pb_row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        row-gap: 16px !important;
        /* Espacement quand les colonnes s'empilent */
    }

    .loop-spectacle-dm .et_pb_column {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* Règles globales de sécurité pour les colonnes et modules Divi Machine */
.loop-spectacle-dm .et_pb_column .et_pb_module {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
}

.loop-spectacle-dm .et_pb_column .et_pb_module:last-child {
    margin-bottom: 0 !important;
}


.btn-planketon-dm-icon .dmach-icon-image-content {
    display: none !important;
}



/* ==========================================================================
   DIVI 5 - BOUTON RETOUR EN HAUT (BACK TO TOP)
   ========================================================================== */

/* Bouton au repos */
.et_pb_scroll_top.et-pb-icon {
    background-color: #010d16 !important;
    /* Couleur de fond du carré (bleu nuit du site) */
    color: #EBD897 !important;
    /* Couleur de la flèche (doré du site) */
    border: 1px solid #EBD897 !important;
    /* Optionnel : fine bordure dorée */
    border-radius: 6px 0 0 6px !important;
    /* Optionnel : coins légèrement arrondis (ou 50% pour un cercle) */
    transition: all 0.3s ease-in-out !important;
}

/* Bouton au survol (Hover) */
.et_pb_scroll_top.et-pb-icon:hover {
    background-color: #EBD897 !important;
    /* Fond doré au survol */
    color: #010d16 !important;
    /* Flèche bleu nuit au survol */
    border-color: #EBD897 !important;
    transform: translateY(-3px);
    /* Léger effet d'élévation */
}

/* ==========================================================================
   DIVI MACHINE - Correctif icône de préchargement (Load More & Filtre)
   Compense le bug de clé dupliquée dans Divi Machine 5 (Styles.php)
   ========================================================================== */
.de_ajax_filter_archive_loop .line,
.loadmore-ajax-loading .line,
.filtered-posts-loading .line {
    background-color: var(--gcid-primary-color, #ffffff) !important;
}


/* ==========================================================================
   IMAGE HERO PLEINE LARGEUR 100VH & RATIO 16:9 (.hero-img-16-9)
   ========================================================================== */

.hero-img-16-9,
.hero-img-16-9 .et_pb_image_wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Desktop (>= 981px) : 100vh pleine hauteur d'écran sans déformation */
@media (min-width: 981px) {

    .hero-img-16-9,
    .hero-img-16-9 .et_pb_image_wrap,
    .hero-img-16-9 img {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        object-fit: cover !important;
        object-position: center top !important;
        display: block !important;
    }
}

/* Tablette & Mobile Portrait (<= 980px) : Adapte automatiquement au format 1200x1600 (ratio 3:4) */
@media (max-width: 980px) {

    .hero-img-16-9,
    .hero-img-16-9 .et_pb_image_wrap,
    .hero-img-16-9 img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}



/* ==========================================================================
   Sections modale
   ========================================================================== */

/* Arrière-plan sombre de la modale */
.modale-divi {
    display: none;
    position: fixed;
    z-index: 2147483647 !important;
    /* Force le passage au-dessus du menu sticky */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

/* Boîte de contenu blanche */
.modale-contenu {
    background-color: #D7C3A4;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    position: relative;
}

/* Titre de la modale */
.modale-contenu h2 {
    color: #1A0B04 !important;
    /* Bleu très foncé demandé */
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Bouton fermer (X) */
.modale-fermer {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #090c29;
    /* Assorti au titre */
}

/* Gestion du texte et de la barre de défilement */
.modale-texte-scroll {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 15px;
    color: #1A0B04 !important;
    /* Texte gris foncé */
    font-size: 16px;
    line-height: 1.6;
}

/* Style personnalisé de la barre de défilement */
.modale-texte-scroll::-webkit-scrollbar {
    width: 8px;
}

.modale-texte-scroll::-webkit-scrollbar-thumb {
    background: #090c29;
    /* Curseur assorti au titre */
    border-radius: 4px;
}

.modale-texte-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}


/* ==========================================================================
   SOLUTION 1 : CADRE MURAL PAYSAGE RÉALISTE 100% CSS (.cadre-mural-css)
   Moulure bois multi-niveaux + coupe d'onglet à 45° + filet crème (marie-louise)
   + toile lin/parchemin + ombres portées murales réalistes
   ========================================================================== */
.et_pb_group.cadre-mural-css,
.cadre-mural-css {
    position: relative;
    box-sizing: border-box;

    /* 1. Format Paysage sur Desktop (s'adapte à 100% sur Tablette/Mobile) */
    width: 100% !important;
    max-width: 1420px !important;
    margin-inline: auto !important;

    /* 2. Espacement interne fluide */
    padding: clamp(22px, 3vw, 38px) clamp(22px, 4vw, 52px) !important;

    /* 3. Fond "Toile / Parchemin" avec trame de lin subtile et léger vignettage */
    background-color: #f6f0e4 !important;
    background-image:
        radial-gradient(ellipse at center, rgba(255, 252, 245, 0.45) 0%, rgba(208, 190, 158, 0.32) 100%),
        repeating-linear-gradient(0deg, rgba(130, 105, 70, 0.028) 0px, rgba(130, 105, 70, 0.028) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(130, 105, 70, 0.028) 0px, rgba(130, 105, 70, 0.028) 1px, transparent 1px, transparent 3px) !important;
    background-clip: padding-box !important;

    /* 4. Moulure en bois sculptée multi-niveaux + filet crème intérieur + onglets à 45° (100% CSS / SVG data-URI) */
    border-style: solid !important;
    border-width: clamp(20px, 3.8vw, 44px) !important;
    border-image-source: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20440%22%20width%3D%22600%22%20height%3D%22440%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22wg-h%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.45%22%20numOctaves%3D%224%22%20seed%3D%227%22%20result%3D%22n%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.08%20%200%200%200%200%200.04%20%200%200%200%200%200.01%20%200%200%200%200.32%200%22%20in%3D%22n%22%20result%3D%22cn%22%2F%3E%3CfeComposite%20operator%3D%22in%22%20in%3D%22cn%22%20in2%3D%22SourceGraphic%22%20result%3D%22g%22%2F%3E%3CfeBlend%20mode%3D%22multiply%22%20in%3D%22SourceGraphic%22%20in2%3D%22g%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22wg-v%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.45%200.012%22%20numOctaves%3D%224%22%20seed%3D%227%22%20result%3D%22n%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.08%20%200%200%200%200%200.04%20%200%200%200%200%200.01%20%200%200%200%200.32%200%22%20in%3D%22n%22%20result%3D%22cn%22%2F%3E%3CfeComposite%20operator%3D%22in%22%20in%3D%22cn%22%20in2%3D%22SourceGraphic%22%20result%3D%22g%22%2F%3E%3CfeBlend%20mode%3D%22multiply%22%20in%3D%22SourceGraphic%22%20in2%3D%22g%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22m-top%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2252%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23281407%22%2F%3E%3Cstop%20offset%3D%220.03%22%20stop-color%3D%22%23c48a47%22%2F%3E%3Cstop%20offset%3D%220.07%22%20stop-color%3D%22%23965f2b%22%2F%3E%3Cstop%20offset%3D%220.13%22%20stop-color%3D%22%23522f14%22%2F%3E%3Cstop%20offset%3D%220.17%22%20stop-color%3D%22%23200f04%22%2F%3E%3Cstop%20offset%3D%220.27%22%20stop-color%3D%22%233b200c%22%2F%3E%3Cstop%20offset%3D%220.33%22%20stop-color%3D%22%235d3618%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23b0763b%22%2F%3E%3Cstop%20offset%3D%220.44%22%20stop-color%3D%22%238b5526%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%236b3f1b%22%2F%3E%3Cstop%20offset%3D%220.64%22%20stop-color%3D%22%23391e0b%22%2F%3E%3Cstop%20offset%3D%220.69%22%20stop-color%3D%22%231b0c03%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23734620%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%232d1708%22%2F%3E%3Cstop%20offset%3D%220.84%22%20stop-color%3D%22%23160a02%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23c4b08a%22%2F%3E%3Cstop%20offset%3D%220.88%22%20stop-color%3D%22%23efe4cc%22%2F%3E%3Cstop%20offset%3D%220.95%22%20stop-color%3D%22%23dfd0b2%22%2F%3E%3Cstop%20offset%3D%220.97%22%20stop-color%3D%22%237a6646%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%232a180a%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m-right%22%20x1%3D%22600%22%20y1%3D%220%22%20x2%3D%22548%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23281407%22%2F%3E%3Cstop%20offset%3D%220.03%22%20stop-color%3D%22%23ba8040%22%2F%3E%3Cstop%20offset%3D%220.07%22%20stop-color%3D%22%238c5827%22%2F%3E%3Cstop%20offset%3D%220.13%22%20stop-color%3D%22%234a2a12%22%2F%3E%3Cstop%20offset%3D%220.17%22%20stop-color%3D%22%231e0e04%22%2F%3E%3Cstop%20offset%3D%220.27%22%20stop-color%3D%22%23361c0a%22%2F%3E%3Cstop%20offset%3D%220.33%22%20stop-color%3D%22%23553115%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23a36b34%22%2F%3E%3Cstop%20offset%3D%220.44%22%20stop-color%3D%22%23824f22%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23623917%22%2F%3E%3Cstop%20offset%3D%220.64%22%20stop-color%3D%22%23331b09%22%2F%3E%3Cstop%20offset%3D%220.69%22%20stop-color%3D%22%23180b03%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23683e1c%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%23281407%22%2F%3E%3Cstop%20offset%3D%220.84%22%20stop-color%3D%22%23140902%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23baa680%22%2F%3E%3Cstop%20offset%3D%220.88%22%20stop-color%3D%22%23e6dac0%22%2F%3E%3Cstop%20offset%3D%220.95%22%20stop-color%3D%22%23d5c6a7%22%2F%3E%3Cstop%20offset%3D%220.97%22%20stop-color%3D%22%23715d3e%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23241508%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m-bottom%22%20x1%3D%220%22%20y1%3D%22440%22%20x2%3D%220%22%20y2%3D%22388%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23160a02%22%2F%3E%3Cstop%20offset%3D%220.03%22%20stop-color%3D%22%23754821%22%2F%3E%3Cstop%20offset%3D%220.07%22%20stop-color%3D%22%23502f14%22%2F%3E%3Cstop%20offset%3D%220.13%22%20stop-color%3D%22%23341c0b%22%2F%3E%3Cstop%20offset%3D%220.17%22%20stop-color%3D%22%23150902%22%2F%3E%3Cstop%20offset%3D%220.27%22%20stop-color%3D%22%232b1608%22%2F%3E%3Cstop%20offset%3D%220.33%22%20stop-color%3D%22%23472810%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23825024%22%2F%3E%3Cstop%20offset%3D%220.44%22%20stop-color%3D%22%236a3e1a%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%238c5728%22%2F%3E%3Cstop%20offset%3D%220.64%22%20stop-color%3D%22%234e2c12%22%2F%3E%3Cstop%20offset%3D%220.69%22%20stop-color%3D%22%23190b03%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%235e3818%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%233e230e%22%2F%3E%3Cstop%20offset%3D%220.84%22%20stop-color%3D%22%23180b03%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23d6c5a0%22%2F%3E%3Cstop%20offset%3D%220.88%22%20stop-color%3D%22%23f7eed8%22%2F%3E%3Cstop%20offset%3D%220.95%22%20stop-color%3D%22%23eadbc0%22%2F%3E%3Cstop%20offset%3D%220.97%22%20stop-color%3D%22%23947e5a%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23382210%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22m-left%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2252%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%231b0d03%22%2F%3E%3Cstop%20offset%3D%220.03%22%20stop-color%3D%22%237e4e24%22%2F%3E%3Cstop%20offset%3D%220.07%22%20stop-color%3D%22%23583417%22%2F%3E%3Cstop%20offset%3D%220.13%22%20stop-color%3D%22%23391f0c%22%2F%3E%3Cstop%20offset%3D%220.17%22%20stop-color%3D%22%23170a02%22%2F%3E%3Cstop%20offset%3D%220.27%22%20stop-color%3D%22%232e1708%22%2F%3E%3Cstop%20offset%3D%220.33%22%20stop-color%3D%22%234b2a11%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23885325%22%2F%3E%3Cstop%20offset%3D%220.44%22%20stop-color%3D%22%2370421c%22%2F%3E%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%23915a2a%22%2F%3E%3Cstop%20offset%3D%220.64%22%20stop-color%3D%22%23522e13%22%2F%3E%3Cstop%20offset%3D%220.69%22%20stop-color%3D%22%231b0c03%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23633b1a%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%2342260f%22%2F%3E%3Cstop%20offset%3D%220.84%22%20stop-color%3D%22%231a0b03%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23d2c19c%22%2F%3E%3Cstop%20offset%3D%220.88%22%20stop-color%3D%22%23f4e9d2%22%2F%3E%3Cstop%20offset%3D%220.95%22%20stop-color%3D%22%23e6d7bc%22%2F%3E%3Cstop%20offset%3D%220.97%22%20stop-color%3D%22%238e7855%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23341f0e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%220%2C0%20600%2C0%20548%2C52%2052%2C52%22%20fill%3D%22url(%23m-top)%22%20filter%3D%22url(%23wg-h)%22%2F%3E%3Cpolygon%20points%3D%22548%2C52%20600%2C0%20600%2C440%20548%2C388%22%20fill%3D%22url(%23m-right)%22%20filter%3D%22url(%23wg-v)%22%2F%3E%3Cpolygon%20points%3D%2252%2C388%20548%2C388%20600%2C440%200%2C440%22%20fill%3D%22url(%23m-bottom)%22%20filter%3D%22url(%23wg-h)%22%2F%3E%3Cpolygon%20points%3D%220%2C0%2052%2C52%2052%2C388%200%2C440%22%20fill%3D%22url(%23m-left)%22%20filter%3D%22url(%23wg-v)%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2252%22%20y2%3D%2252%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%220%22%20x2%3D%2253%22%20y2%3D%2252%22%20stroke%3D%22%23c48a47%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.45%22%2F%3E%3Cline%20x1%3D%22600%22%20y1%3D%220%22%20x2%3D%22548%22%20y2%3D%2252%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%22599%22%20y1%3D%220%22%20x2%3D%22547%22%20y2%3D%2252%22%20stroke%3D%22%23c48a47%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.45%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22440%22%20x2%3D%2252%22%20y2%3D%22388%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22439%22%20x2%3D%2252%22%20y2%3D%22387%22%20stroke%3D%22%23a66e34%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.4%22%2F%3E%3Cline%20x1%3D%22600%22%20y1%3D%22440%22%20x2%3D%22548%22%20y2%3D%22388%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%22600%22%20y1%3D%22439%22%20x2%3D%22548%22%20y2%3D%22387%22%20stroke%3D%22%23a66e34%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E") !important;
    border-image-slice: 52 !important;
    border-image-repeat: stretch !important;

    /* 5. Ombres internes sur la toile + Ombres portées murales réalistes (lumière haut-droite) */
    box-shadow:
        inset 3px 5px 14px rgba(28, 15, 5, 0.35),
        inset 0 0 28px rgba(135, 105, 65, 0.15),
        -5px 12px 16px rgba(32, 18, 7, 0.50),
        -14px 26px 36px rgba(32, 18, 7, 0.32),
        0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

/* Harmonisation typographique pour conserver le format Paysage sur Desktop et la lisibilité sur Mobile */
.cadre-mural-css .et_pb_heading h2 {
    font-size: clamp(24px, 2.6vw, 36px) !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
}

.cadre-mural-css .et_pb_heading h3 {
    font-size: clamp(17px, 1.55vw, 22px) !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
}

.cadre-mural-css .et_pb_text .et_pb_text_inner p {
    font-size: clamp(16px, 1.3vw, 18.5px) !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
}

.cadre-mural-css .et_pb_text .et_pb_text_inner p:last-child,
.cadre-mural-css .et_pb_module:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   SOLUTION 2 : CADRE PHOTO RÉEL EN 9-SLICE (.cadre-mural-photo)
   ========================================================================== */
.et_pb_group.cadre-mural-photo,
.cadre-mural-photo {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;

    /* Padding interne pour que le texte ne chevauche jamais le filet crème */
    padding: clamp(20px, 4vw, 44px) !important;

    /* Couleur ou texture de la toile au centre */
    background-color: #f6f0e4;
    background-clip: padding-box;

    /* Épaisseur du cadre qui se réduit automatiquement sur mobile */
    border-style: solid;
    border-width: clamp(22px, 4.5vw, 48px);

    /* Découpe 9-tranches : remplacez l'URL par votre image de cadre détourée */
    border-image-source: url('../images/cadre-bois.webp');
    border-image-slice: 85 fill;
    /* "85" = épaisseur en px de la moulure sur l'image source */
    border-image-repeat: stretch;
    /* ou "round" pour répéter le motif sans l'étirer */

    /* Ombre portée sur le mur */
    filter: drop-shadow(-6px 14px 16px rgba(30, 18, 8, 0.4));
}


/* ==========================================================================
   CADRE PORTRAIT COMÉDIENS (BORDURE FINE & RATIO PHOTO 2:3) (.cadre-comedien-css)
   À ajouter dans Module Groupe > Avancé > ID et classes CSS : cadre-comedien-css
   ========================================================================== */
.et_pb_group.cadre-comedien-css,
.cadre-comedien-css {
    position: relative;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;

    /* 1. Moulure en bois plus fine (10px sur mobile à 15px sur desktop) + filet crème + onglets à 45° */
    border-style: solid !important;
    border-width: clamp(10px, 1.25vw, 15px) !important;
    border-image-source: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20500%22%20width%3D%22320%22%20height%3D%22500%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22wg-ph%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.018%200.45%22%20numOctaves%3D%224%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.08%20%200%200%200%200%200.04%20%200%200%200%200%200.01%20%200%200%200%200.30%200%22%20in%3D%22n%22%20result%3D%22cn%22%2F%3E%3CfeComposite%20operator%3D%22in%22%20in%3D%22cn%22%20in2%3D%22SourceGraphic%22%20result%3D%22g%22%2F%3E%3CfeBlend%20mode%3D%22multiply%22%20in%3D%22SourceGraphic%22%20in2%3D%22g%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22wg-pv%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.45%200.018%22%20numOctaves%3D%224%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.08%20%200%200%200%200%200.04%20%200%200%200%200%200.01%20%200%200%200%200.30%200%22%20in%3D%22n%22%20result%3D%22cn%22%2F%3E%3CfeComposite%20operator%3D%22in%22%20in%3D%22cn%22%20in2%3D%22SourceGraphic%22%20result%3D%22g%22%2F%3E%3CfeBlend%20mode%3D%22multiply%22%20in%3D%22SourceGraphic%22%20in2%3D%22g%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22mp-top%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2236%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23281407%22%2F%3E%3Cstop%20offset%3D%220.04%22%20stop-color%3D%22%23c48a47%22%2F%3E%3Cstop%20offset%3D%220.09%22%20stop-color%3D%22%23965f2b%22%2F%3E%3Cstop%20offset%3D%220.15%22%20stop-color%3D%22%23522f14%22%2F%3E%3Cstop%20offset%3D%220.20%22%20stop-color%3D%22%23200f04%22%2F%3E%3Cstop%20offset%3D%220.30%22%20stop-color%3D%22%233b200c%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23b0763b%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%238b5526%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%236b3f1b%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23391e0b%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%231b0c03%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%23734620%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23160a02%22%2F%3E%3Cstop%20offset%3D%220.86%22%20stop-color%3D%22%23c4b08a%22%2F%3E%3Cstop%20offset%3D%220.90%22%20stop-color%3D%22%23efe4cc%22%2F%3E%3Cstop%20offset%3D%220.96%22%20stop-color%3D%22%23dfd0b2%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%232a180a%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22mp-right%22%20x1%3D%22320%22%20y1%3D%220%22%20x2%3D%22284%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23281407%22%2F%3E%3Cstop%20offset%3D%220.04%22%20stop-color%3D%22%23ba8040%22%2F%3E%3Cstop%20offset%3D%220.09%22%20stop-color%3D%22%238c5827%22%2F%3E%3Cstop%20offset%3D%220.15%22%20stop-color%3D%22%234a2a12%22%2F%3E%3Cstop%20offset%3D%220.20%22%20stop-color%3D%22%231e0e04%22%2F%3E%3Cstop%20offset%3D%220.30%22%20stop-color%3D%22%23361c0a%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23a36b34%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%23824f22%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%23623917%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23331b09%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23180b03%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%23683e1c%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23140902%22%2F%3E%3Cstop%20offset%3D%220.86%22%20stop-color%3D%22%23baa680%22%2F%3E%3Cstop%20offset%3D%220.90%22%20stop-color%3D%22%23e6dac0%22%2F%3E%3Cstop%20offset%3D%220.96%22%20stop-color%3D%22%23d5c6a7%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23241508%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22mp-bottom%22%20x1%3D%220%22%20y1%3D%22500%22%20x2%3D%220%22%20y2%3D%22464%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%23160a02%22%2F%3E%3Cstop%20offset%3D%220.04%22%20stop-color%3D%22%23754821%22%2F%3E%3Cstop%20offset%3D%220.09%22%20stop-color%3D%22%23502f14%22%2F%3E%3Cstop%20offset%3D%220.15%22%20stop-color%3D%22%23341c0b%22%2F%3E%3Cstop%20offset%3D%220.20%22%20stop-color%3D%22%23150902%22%2F%3E%3Cstop%20offset%3D%220.30%22%20stop-color%3D%22%232b1608%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23825024%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%236a3e1a%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%238c5728%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%234e2c12%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%23190b03%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%235e3818%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23180b03%22%2F%3E%3Cstop%20offset%3D%220.86%22%20stop-color%3D%22%23d6c5a0%22%2F%3E%3Cstop%20offset%3D%220.90%22%20stop-color%3D%22%23f7eed8%22%2F%3E%3Cstop%20offset%3D%220.96%22%20stop-color%3D%22%23eadbc0%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23382210%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22mp-left%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2236%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.00%22%20stop-color%3D%22%231b0d03%22%2F%3E%3Cstop%20offset%3D%220.04%22%20stop-color%3D%22%237e4e24%22%2F%3E%3Cstop%20offset%3D%220.09%22%20stop-color%3D%22%23583417%22%2F%3E%3Cstop%20offset%3D%220.15%22%20stop-color%3D%22%23391f0c%22%2F%3E%3Cstop%20offset%3D%220.20%22%20stop-color%3D%22%23170a02%22%2F%3E%3Cstop%20offset%3D%220.30%22%20stop-color%3D%22%232e1708%22%2F%3E%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23885325%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%2370421c%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%23915a2a%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23522e13%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%231b0c03%22%2F%3E%3Cstop%20offset%3D%220.80%22%20stop-color%3D%22%23633b1a%22%2F%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%231a0b03%22%2F%3E%3Cstop%20offset%3D%220.86%22%20stop-color%3D%22%23d2c19c%22%2F%3E%3Cstop%20offset%3D%220.90%22%20stop-color%3D%22%23f4e9d2%22%2F%3E%3Cstop%20offset%3D%220.96%22%20stop-color%3D%22%23e6d7bc%22%2F%3E%3Cstop%20offset%3D%221.00%22%20stop-color%3D%22%23341f0e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%220%2C0%20320%2C0%20284%2C36%2036%2C36%22%20fill%3D%22url(%23mp-top)%22%20filter%3D%22url(%23wg-ph)%22%2F%3E%3Cpolygon%20points%3D%22284%2C36%20320%2C0%20320%2C500%20284%2C464%22%20fill%3D%22url(%23mp-right)%22%20filter%3D%22url(%23wg-pv)%22%2F%3E%3Cpolygon%20points%3D%2236%2C464%20284%2C464%20320%2C500%200%2C500%22%20fill%3D%22url(%23mp-bottom)%22%20filter%3D%22url(%23wg-ph)%22%2F%3E%3Cpolygon%20points%3D%220%2C0%2036%2C36%2036%2C464%200%2C500%22%20fill%3D%22url(%23mp-left)%22%20filter%3D%22url(%23wg-pv)%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2236%22%20y2%3D%2236%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.3%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%220.8%22%20y1%3D%220%22%20x2%3D%2236.8%22%20y2%3D%2236%22%20stroke%3D%22%23c48a47%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.45%22%2F%3E%3Cline%20x1%3D%22320%22%20y1%3D%220%22%20x2%3D%22284%22%20y2%3D%2236%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.3%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%22319.2%22%20y1%3D%220%22%20x2%3D%22283.2%22%20y2%3D%2236%22%20stroke%3D%22%23c48a47%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.45%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22500%22%20x2%3D%2236%22%20y2%3D%22464%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.3%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22499.2%22%20x2%3D%2236%22%20y2%3D%22463.2%22%20stroke%3D%22%23a66e34%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.4%22%2F%3E%3Cline%20x1%3D%22320%22%20y1%3D%22500%22%20x2%3D%22284%22%20y2%3D%22464%22%20stroke%3D%22%23140802%22%20stroke-width%3D%221.3%22%20stroke-opacity%3D%220.8%22%2F%3E%3Cline%20x1%3D%22320%22%20y1%3D%22499.2%22%20x2%3D%22284%22%20y2%3D%22463.2%22%20stroke%3D%22%23a66e34%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E") !important;
    border-image-slice: 36 !important;
    border-image-repeat: stretch !important;

    /* 2. Ombre portée murale réaliste */
    box-shadow:
        -4px 9px 13px rgba(32, 18, 7, 0.48),
        -10px 20px 26px rgba(32, 18, 7, 0.28),
        0 2px 4px rgba(0, 0, 0, 0.22) !important;

    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.et_pb_group.cadre-comedien-css:hover,
.cadre-comedien-css:hover {
    transform: translateY(-4px);
    box-shadow:
        -6px 14px 18px rgba(32, 18, 7, 0.54),
        -14px 28px 34px rgba(32, 18, 7, 0.34),
        0 3px 6px rgba(0, 0, 0, 0.26) !important;
}

/* 3. Verrouillage strict du ratio 2:3 de la photo sans déformation ni débordement au survol */
.cadre-comedien-css .et_pb_image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.cadre-comedien-css .et_pb_image_wrap {
    position: relative;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.cadre-comedien-css .et_pb_image_wrap img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

/* Empêche le bloc image entier (et le H2 en position absolute) de déborder du cadre au survol */
.cadre-comedien-css .et_pb_image:hover {
    transform: none !important;
}

.cadre-comedien-css .et_pb_image:hover .et_pb_image_wrap img {
    transform: scale(1.03) !important;
}

/* 4. Ombre interne portée par le cadre en bois sur la photo 2:3 */
.cadre-comedien-css .et_pb_image_wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 2px 4px 10px rgba(20, 10, 3, 0.42),
        inset 0 0 16px rgba(20, 10, 3, 0.18);
}

/* 5. Fine séparation dorée/crème façon cartel de portrait au-dessus du nom du comédien */
.cadre-comedien-css .et_pb_heading {
    border-top: 2px solid #c4b08a !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}