/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1775808172
Updated: 2026-04-10 09:02:52

*/

/* ============================================================
   INITIO - Charte EventPrime (couleurs + contraste)
   Caviar #2A2A2D | Deep Teal #19454B | Dijon #97754C
   ============================================================ */

/* --- Boutons principaux : Deep Teal, texte blanc garanti --- */
html body .ep-btn.ep-btn-dark,
html body .ep-btn.ep-btn-warning,
html body #ep_single_event_ticket_now_btn,
html body #ep_single_event_checkout_btn,
html body #ep_event_close_ticket_modal {
    background-color: #19454B !important;
    border-color: #19454B !important;
    color: #ffffff !important;
}
html body .ep-btn.ep-btn-dark *,
html body .ep-btn.ep-btn-warning * {
    color: #ffffff !important;
}
html body .ep-btn.ep-btn-dark:hover,
html body .ep-btn.ep-btn-warning:hover,
html body #ep_single_event_ticket_now_btn:hover,
html body #ep_single_event_checkout_btn:hover {
    background-color: #123539 !important;
    border-color: #123539 !important;
    color: #ffffff !important;
}

/* --- Accents (bordure de titre, icone d'offre) -> Dijon --- */
.emagic .ep-text-warning { color: #97754C !important; }
.emagic .ep-border-warning { border-color: #97754C !important; }
.emagic .offer-icon { color: #97754C !important; }

/* --- Boutons quantite +/- au survol --- */
.ep-btn-outline-dark:hover {
    background-color: #2A2A2D !important;
    border-color: #2A2A2D !important;
    color: #ffffff !important;
}

/* --- Liens dans les pages EventPrime --- */
.emagic a:not(.ep-btn) { color: #19454B; }

/* --- Mise en avant des tickets avec offre en cours (generalise a tous les evenements) ---
   IMPORTANT : cet element porte la classe Bootstrap-like "ep-box-row", qui applique
   margin: 0 -0.75rem (compense normalement par le padding de ses colonnes enfants,
   invisible tant qu'on ne peint rien sur le row lui-meme). Des qu'on ajoute une bordure/
   un fond ICI, ce debord de 0.75rem se voit et se fait rogner par le conteneur parent
   (bordure droite "coupee"). On neutralise ce margin negatif pour que la bordure reste
   dans les limites reelles de la carte. */
.emagic [id^="ep_single_modal_ticket_"]:has(.ep-ticket-offers-wrapper) {
    margin: 0 0 16px !important;
    border: 1px solid rgba(151, 117, 76, .35) !important;
    border-left: 4px solid #97754C !important;
    border-radius: 10px;
    background-color: rgba(151, 117, 76, .05);
    padding: 14px 16px !important;
}

/* Badge dynamique (nom de l'offre), injecte par ep-ticket-offer-highlight.js.
   Le conteneur du nom du ticket est en flex (ep-d-flex) sans wrap : sur un nom
   long ou un ecran etroit, le badge se retrouvait pousse par-dessus le titre au
   lieu de passer a la ligne. flex-basis:100% force le badge sur sa propre ligne. */
.emagic .ep-event-ticket-modal-ticket-name {
    flex-wrap: wrap !important;
}
.emagic .ep-ticket-offer-badge {
    display: block;
    flex-basis: 100%;
    width: fit-content;
    margin-left: 0;
    margin-top: 4px;
    background-color: #97754C;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Prix barre + prix reduit, injectes par ep-ticket-offer-highlight.js */
.emagic .ep-ticket-offer-original-price {
    text-decoration: line-through;
    opacity: .55;
    font-weight: 400 !important;
    font-size: .85em !important;
    margin-right: 8px;
}
.emagic .ep-ticket-offer-discounted-price {
    color: #97754C;
    font-weight: 700;
    font-size: 1.05em;
}

/* Description en puces sur 2 colonnes, injectee par ep-ticket-offer-highlight.js */
.emagic .ep-ticket-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.emagic .ep-ticket-bullets li {
    position: relative;
    padding-left: 14px;
    line-height: 1.3;
}
.emagic .ep-ticket-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #97754C;
}
@media (max-width: 600px) {
    .emagic .ep-ticket-bullets {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* --- FAQ evenement --- */
.initio-event-faq {
    margin-top: 32px;
    margin-bottom: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(42, 42, 45, 0.08);
}
.initio-event-faq-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2A2A2D;
    margin-bottom: 16px;
}
.initio-event-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.initio-event-faq-item {
    border: 1px solid rgba(42, 42, 45, 0.08);
    border-radius: 8px;
    padding: 14px 18px;
    background-color: rgba(42, 42, 45, 0.035);
}
.initio-event-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: #19454B;
    list-style: none;
}
.initio-event-faq-item summary::-webkit-details-marker {
    display: none;
}
.initio-event-faq-item summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: #97754C;
    font-weight: 700;
}
.initio-event-faq-item[open] summary::before {
    content: "–";
}
.initio-event-faq-answer {
    color: #2A2A2D;
    margin-top: 10px;
    line-height: 1.5;
}
.initio-event-faq-answer p {
    margin: 0 0 10px;
}
.initio-event-faq-answer p:last-child {
    margin-bottom: 0;
}

/* --- Marge interne : page de paiement (checkout) + recap de commande --- */
#ep_event_checkout_page,
.ep-booking-container {
    padding: 28px 24px;
}
@media (max-width: 600px) {
    #ep_event_checkout_page,
    .ep-booking-container {
        padding: 18px 14px;
    }
}

/* --- Lien "Connexion" du header -> icone silhouette --- */
.menu-item-2083 > a.elementor-item {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
}
.menu-item-2083 > a.elementor-item::after {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000000' d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v2.5h19.6v-2.5c0-3.3-6.5-4.9-9.8-4.9z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity .15s ease;
}
.menu-item-2083 > a.elementor-item:hover::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23C5A582' d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v2.5h19.6v-2.5c0-3.3-6.5-4.9-9.8-4.9z'/></svg>");
}

/* --- Icone profil toujours visible dans la barre du header, meme quand le
   menu devient deroulant (burger). Par defaut Elementor cache tout le menu
   "main" (donc l'icone profil avec) des que le widget passe en mode burger,
   et ne la remontre que dans le panneau deroulant. Le widget nav-menu du
   header (element 965d63b) passe en mode burger a 1024px (classe
   ".elementor-nav-menu--dropdown-tablet"), donc on reutilise ce meme seuil
   pour ne garder QUE l'icone profil visible dans le nav "main", masquer les
   autres liens (deja dans le panneau deroulant), et cacher le doublon
   "Connexion" dans le panneau deroulant lui-meme. --- */
@media (max-width: 1024px) {
    /* Ce widget est un "Container" Elementor dont le flex-direction passe a
       "column" sur cette largeur (confirme via getComputedStyle) : l'icone
       profil et le burger s'empilaient donc verticalement au lieu d'etre
       cote a cote, meme avec flex-wrap:nowrap. On force explicitement la
       ligne horizontale. */
    .elementor-element-965d63b {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        /* Les elements "Container" Elementor heritent d'un gap par defaut de
           20px (variable --column-gap), qui s'ajoutait en plus de nos
           margin-left explicites entre le burger et l'icone -> neutralise ici. */
        --gap: 0px !important;
        --row-gap: 0px !important;
        --column-gap: 0px !important;
        gap: 0 !important;
    }
    /* Ordre visuel : burger d'abord, icone profil ensuite (a sa droite) --
       l'ordre du DOM reste inchange (l'icone profil reste avant le burger
       dans le code, donc dans la navigation clavier). */
    .elementor-element-965d63b .elementor-nav-menu--main {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: none !important;
        order: 2;
        margin-left: 2px !important;
        align-items: center;
        pointer-events: auto !important;
    }
    .elementor-element-965d63b .elementor-nav-menu--main .elementor-nav-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }
    .elementor-element-965d63b .elementor-nav-menu--main .elementor-nav-menu > li:not(.menu-item-2083) {
        display: none !important;
    }
    .elementor-element-965d63b .elementor-menu-toggle {
        flex: 0 0 auto !important;
        order: 1;
        margin-left: auto !important;
    }
    .elementor-element-965d63b .elementor-nav-menu--dropdown .menu-item-2083 {
        display: none !important;
    }
}

/* ============================================================
   INITIO - Optimisation mobile EventPrime (page evenement,
   popup billetterie, textes/marges). Ne touche que la taille,
   l'espacement et l'empilement : la structure Bootstrap-like
   du plugin (ep-box-row/col) reste intacte.
   ============================================================ */
@media (max-width: 767px) {

    /* --- Echelle de titres mobile (H1 > H2 > H3), coherente de haut en bas :
       le titre de l'evenement (H1) etait a 1.15rem, plus PETIT que les titres
       de section (fs-2 a 1.5rem) -> hierarchie inversee. On remet le H1 au
       sommet de l'echelle. --- */
    html body #ep_single_event_title,
    html body h2#ep_single_event_title,
    html body .ep-fs-2#ep_single_event_title {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        padding-left: 10px !important;
    }

    /* --- Echelle de titres generale (sections, offres...) : H2 > H3 > label --- */
    .emagic .ep-fs-2 { font-size: 1.1875rem !important; }
    .emagic .ep-fs-3 { font-size: 1.0625rem !important; }
    .emagic .ep-fs-4 { font-size: .9375rem !important; }

    /* --- Bloc "Acheter des billets" (sidebar / bouton prix) --- */
    .emagic .ep-buy-ticket-section { margin-top: 16px; }
    .emagic .ep-ticket-now-section { padding: 14px !important; }
    .emagic .ep-offers-section { padding: 14px !important; }

    /* --- Cartes d'offres dans la fiche ticket (sinon coincees a 25%) --- */
    .emagic .ep-ticket-offers-wrapper {
        flex-wrap: wrap !important;
        gap: 8px;
    }
    .emagic .ep-ticket-offers-wrapper > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    /* --- Popup de reservation : la modale reservait 1.75rem de marge
       fixe sur les 4 cotes (variable CSS du plugin) -> beaucoup trop
       sur un ecran de 375px. On la resserre via la variable elle-meme. --- */
    .ep-modal.ep-modal-view {
        --ep-modal-margin: 0.4rem !important;
        --ep-modal-padding: 0.75rem !important;
    }
    .emagic #ep_event_ticket_modal_left,
    .emagic #ep_event_ticket_modal_right {
        padding: 12px !important;
    }
    .emagic .ep-event-ticket-modal-ticket-name {
        font-size: 1.05rem !important;
    }
    .emagic .ep-event-ticket-modal-ticket-price {
        font-size: 1.1rem !important;
    }
    .emagic .ep-event-ticket-modal-ticket-description {
        font-size: .85rem !important;
        line-height: 1.35 !important;
    }

    /* --- Qte min/max : information secondaire qui alourdit la liste sans
       aider a la lecture -> retiree sur mobile. --- */
    .emagic .ep-ticket-min-qty,
    .emagic .ep-ticket-max-qty {
        display: none !important;
    }

    /* --- Compacter l'interligne entre les blocs de chaque ticket (nom, prix,
       description, offres) : les classes utilitaires ep-my-3/ep-mt-3/etc sont
       reutilisees ailleurs sur le site, on limite donc la portee strictement
       aux tickets de la popup ([id^="ep_single_modal_ticket_"]). --- */
    .emagic [id^="ep_single_modal_ticket_"].ep-mb-3 {
        margin-bottom: 10px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-my-3 {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-py-2 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-mt-3 {
        margin-top: 8px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-mb-2 {
        margin-bottom: 4px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-mb-1 {
        margin-bottom: 2px !important;
    }
    .emagic [id^="ep_single_modal_ticket_"] .ep-mt-2 {
        margin-top: 4px !important;
    }

    /* --- FAQ : un peu moins d'air sur mobile --- */
    .initio-event-faq-item {
        padding: 12px 14px;
    }
    .initio-event-faq-title {
        font-size: 1.15rem;
    }

    /* --- Checkout / recap : encore un peu plus compact --- */
    #ep_event_checkout_page,
    .ep-booking-container {
        padding: 14px 12px !important;
    }

    /* --- Espace en bas de page pour ne pas passer sous le bloc sticky --- */
    body.single-em_event {
        padding-bottom: 190px;
    }

    /* --- Le bloc "Acheter des billets" devient une bande compacte
       sticky en bas de l'ecran (prix + bouton), pas un panneau qui
       prend la moitie de l'ecran : on masque le label "M'inscrire"
       en double et la liste des offres (deja visible dans la popup). --- */
    body.single-em_event #ep-sl-right-area {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        max-height: 180px;
        overflow: hidden;
        background-color: #ffffff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        margin: 0 !important;
        /* Padding egal sur les 4 cotes pour un cadrage homogene (le bouton et le
           badge d'offre touchaient sinon le bord droit de l'ecran). */
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom)) 18px !important;
    }
    body.single-em_event #ep-sl-right-area .ep-buy-ticket-section {
        border: none !important;
        border-radius: 0 !important;
    }
    body.single-em_event #ep-sl-right-area > .ep-box-row > .ep-box-col-12.ep-px-4.ep-pt-3,
    body.single-em_event #ep-sl-right-area .ep-border-top {
        display: none !important;
    }
    /* Pastille de date ("30 Sep") : deja visible dans l'entete de l'evenement,
       redondante ici -> on la retire pour garder la barre sticky sur une ligne. */
    body.single-em_event #ep-sl-right-area .ep-ticket-btn-radio {
        display: none !important;
    }
    /* Prix + bouton sur une seule ligne (prix a gauche, CTA a droite) :
       pattern standard d'une barre d'achat sticky mobile, plus compact
       que l'empilement vertical par defaut du plugin. */
    body.single-em_event #ep-sl-right-area .ep-ticket-now-section {
        padding: 10px 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    body.single-em_event #ep-sl-right-area #ep_single_event_ticket_price {
        font-size: .9rem !important;
        margin: 0 !important;
        min-width: 0;
        flex: 1 1 auto;
    }
    body.single-em_event #ep-sl-right-area #ep_single_event_ticket_price h6 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.single-em_event #ep-sl-right-area #ep_single_event_ticket_now_wrapper {
        margin: 0 !important;
        flex: 0 0 auto;
        display: block !important;
    }
    body.single-em_event #ep-sl-right-area #ep_single_event_ticket_now_btn {
        width: auto !important;
        min-width: 150px;
        min-height: 46px;
        padding: 0 22px !important;
        margin: 0 !important;
    }

    /* --- Offre en cours : au lieu de la carte complete, un badge compact
       (ex: "Early Access -15%") a cote du prix, pas tout le panneau --- */
    body.single-em_event #ep-sl-right-area .ep-offers-section {
        display: block !important;
        padding: 6px 0 0 !important;
        margin-top: 6px !important;
        border-top: 1px solid rgba(42, 42, 45, .08);
    }
    body.single-em_event #ep-sl-right-area .ep-offers-section h3,
    body.single-em_event #ep-sl-right-area .ep-bg-success,
    body.single-em_event #ep-sl-right-area .ep-more-offer,
    body.single-em_event #ep-sl-right-area .ep-event-offer-single .ep-text-muted {
        display: none !important;
    }
    body.single-em_event #ep-sl-right-area #ep_single_event_offers_list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    body.single-em_event #ep-sl-right-area .ep-event-offer-single {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        background-color: rgba(151, 117, 76, .12);
        border-radius: 20px;
        padding: 4px 10px !important;
        margin: 0 !important;
    }
    body.single-em_event #ep-sl-right-area .ep-event-offer-single > div {
        display: inline !important;
        font-size: 10px !important;
        font-weight: 700;
        color: #97754C !important;
        margin: 0 !important;
    }
    body.single-em_event #ep-sl-right-area .ep-event-offer-single .offer-icon {
        display: none !important;
    }

    /* --- Titres a l'interieur de la description (Elementor) : pas de
       classe de taille sur certains H2/H3 -> ils retombent sur les
       tailles du theme (tres grandes). On uniformise ici sur la meme
       echelle que le reste de la page (le vrai H1 de la page reste le
       titre de l'evenement, plus grand que ces titres de contenu). --- */
    .emagic #ep_single_event_description h1,
    .emagic #ep_single_event_description h2 {
        font-size: 1.1875rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 1em 0 .5em !important;
    }
    .emagic #ep_single_event_description h3 {
        font-size: 1.0625rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    /* --- Banniere de l'evenement : la largeur/hauteur de l'image sont
       pilotees par des variables CSS souvent en "auto", ce qui peut
       laisser des bandes blanches. On force un vrai plein cadre. --- */
    .emagic #ep_single_event_image {
        display: block !important;
    }
    .emagic #ep_single_event_image .ep-single-event-slide-container {
        width: 100% !important;
    }
    .emagic #ep_single_event_image img {
        width: 100% !important;
        height: 190px !important;
        object-fit: cover !important;
        border-radius: 10px;
    }

    /* --- Reseaux sociaux : sur mobile ils se retrouvent seuls sur une
       ligne pleine largeur, alignes a droite -> grand blanc a gauche.
       On les masque (le partage natif du telephone prend le relais),
       on garde l'icone calendrier/export et l'icone impression. --- */
    .emagic .ep-facebook-f,
    .emagic .ep-instagram,
    .emagic .ep-linkedin,
    .emagic .ep-twitter,
    .emagic .ep-youtube {
        display: none !important;
    }
    .emagic .ep-sl-action-icon-wrap {
        justify-content: flex-start !important;
        padding-top: 4px !important;
    }
}