:root {
    --color-primary: #0000ff; /* Couleur primaire (par exemple : jaune) */
    --color-primary-light: #6f6fff; /* Version plus clair de la couleur primaire */
    --color-primary-darkened: #0000ac; /* Version plus foncÃƒÆ’Ã‚Â© de la couleur primaire */
    --color-primary-rgb: 0, 0, 255;/* Couleur primaire version rgb (par exemple : jaune) */

    /* Body */
    --body-font: Arial, sans-serif;
    --body-txt-size: 14px;
    --body-txt-color: #0E233D;

    /* Boutons */
    --btn-font: Arial, sans-serif;
    --btn-txt-size: 16px;
    --btn-txt-weight: bold;
    --btn-transform: uppercase;
    --btn-padding: 5px 15px;
    --btn-border-radius: 0;

    /* Bouton principal */
    --btn-bg-color: #373535;
    --btn-txt-color: #FFFFFF;
    --btn-border: 1px solid #373535;
    --btn-bg-color-hover: #707070;
    --btn-txt-color-hover: #FFFFFF;
    --btn-border-hover: 1px solid #707070;

    /* Bouton secondaire */
    --btn-s-bg-color: transparent;
    --btn-s-txt-color: #373535;
    --btn-s-border: 1px solid #373535;
    --btn-s-bg-color-hover: transparent;
    --btn-s-txt-color-hover: #707070;
    --btn-s-border-hover: 1px solid #707070;

    /* Liens */
    --link-decoration: underline;
    --link-txt-color: var(--color-primary);
    --link-txt-color-hover: var(--color-primary-darkened);

    /* Titres */
    --h1-font: Arial, sans-serif;
    --h1-txt-size: 26px;
    --h1-color: var(--body-txt-color);
    --h1-txt-weight: bold;
    --h1-transform: uppercase;
    --h2-font: Arial, sans-serif;
    --h2-txt-size: 20px;
    --h2-color: var(--body-txt-color);
    --h2-txt-weight: bold;
    --h2-transform: uppercase;
    --h3-font: Arial, sans-serif;
    --h3-txt-size: 18px;
    --h3-color: var(--body-txt-color);
    --h3-txt-weight: bold;
    --h3-transform: uppercase;
}

/** Summary:
 *  0. RESET CSS & Configuration
 *      - 0.1. Reset CSS
 *      - 0.2. Configuration (nb colonnes, ..)
 *  1. DEFAULT
 *      - 1.1. Animations
 *      - 1.2. Typographies, tailles, display, color
 *      - 1.3. Layout
 *      - 1.4. Forms
 *      - 1.5. Tables
 *  2. HEADER / FOOTER
 *      - 2.1. Logo
 *      - 2.2. Menu
 *      - 2.3. Footer
 *  3. MODULES
 *      - 3.1. Zone Bonjour avec temps restant
 *      - 3.2. Zone Code promo
 *      - 3.3. Calendrier(s)
 *      - 3.4. Mes amis
 *      - 3.5. Modal
 *      - 3.6. Zone completer commande
 *  4. PAGES
 *      - 4.1. Page de listing (commun)
 *      - 4.1. Page de listing (spectacles)
 *          - 4.1.1 CSS Commun: [A l'affiche] & [Resultats de recherche]
 *          - 4.1.2 A l'affiche
 *          - 4.1.3 Filtre de recherche
 *          - 4.1.4 Resultats de recherche
 *      - 4.2. Fiche simple (d'un spectacle)
 *          - 4.2.1 Detail spectacle & representation choisie
 *          - 4.2.2 Selection des places (non numerote)
 *          - 4.2.3 Selection des places (numerote)
 *          - 4.2.4 Representation complete
 *          - 4.2.5 Boutons
 *      - 4.3. Mon compte
 *          - 4.3.1 Justificatifs
 *          - 4.3.2 Commandes
 *      - 4.4. Connexion / inscription
 *          - 4.4.1 Mot de passe oublie
 *          - 4.4.2 Formulaire inscription
 *      - 4.5. Mon panier
 *      - 4.6. Recapitulatif du paiement
 *      - 4.7. Erreur (404, Maintenance)
 *      - 4.8. Accueil
 *      - 4.9. CGV
 *      - 4.10. Page de listing (abonnements)
 *      - 4.11. Fiche simple (d'un abonnement)
 *      - 4.12. Page de listing (articles)
 *      - 4.13. Fiche simple (d'un article)
 *      - 4.14. Page de listing (parcours)
 *      - 4.15. Page de placement automatique (panier)
 *  5. MEDIAS QUERIES
 *      - 5.1. Small Desktop (de 1230 a 961px)
 *      - 5.2. Big Tablette (de 960px a 769px)
 *      - 5.3. Small Tablette (de 768px a 501px)
 *      - 5.4. Smartphone (de 500px a 320px)
 */

/* ====================================================
   0. RESET CSS & Configuration
==================================================== */
    /* 0.1. RESET CSS
    ================================================ */
        /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
        button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:0; margin: 0; border: 0;}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}dl,dd{margin:0}h1,h2,h3,h4,h5,h6{margin: 0;}p{margin-top:0}*,::after,::before{box-sizing: border-box; -webkit-box-sizing: border-box}p{margin: 0;}

    /* 0.2. Configuration (nb colonnes, ..)
    ================================================ */
        /* Nb colonne des listings */
            /* Si module calendrier/recherche mettre 2 colonnes max*/
            #alaffiche ul li, /* Zone a l'affiche */
            #list_event_today ul li, /* Zone aujourd'hui */
            #list_event ul li, /* Liste des spectacles */
            #list_abo li, /* Liste des abonnements */
            #liste_categorie_famille li, /* Liste des categories d'abonnements */
            #list_article li, /* Liste des articles */
            #field_zone_article_famille li /* Liste des categories d'articles */ {
                -ms-flex-preferred-size: calc((100% / 3) - 20px); /* divise par nb_colonne */
                flex-basis: calc((100% / 3) - 20px);
                margin-bottom: 20px;
                border: 1px solid #CCC;
                margin: 0 10px 20px;
                position: relative;
            }

            #alaffiche ul li /* Zone a l'affiche */ {
                -ms-flex-preferred-size: calc((100% / 3) - 20px); /* divise par nb_colonne */
                flex-basis: calc((100% / 3) - 20px);
            }

            @media only screen and (max-width: 1130px) {
                #alaffiche ul li, /* Zone a l'affiche */
                #list_event_today ul li, /* Zone aujourd'hui */
                #list_event ul li, /* Liste des spectacles */
                #list_abo li, /* Liste des abonnements */
                #liste_categorie_famille li, /* Liste des categories d'abonnements */
                #list_article li, /* Liste des articles */
                #field_zone_article_famille li /* Liste des categories d'articles */ {
                    -ms-flex-preferred-size: calc((100% / 2) - 20px); /* divise par nb_colonne */
                    flex-basis: calc((100% / 2) - 20px);
                }
            }

            @media only screen and (max-width: 768px) {
                #alaffiche ul li, /* Zone a l'affiche */
                #list_event ul li, /* Liste des spectacles */
                #list_event_today ul li, /* Zone aujourd'hui */
                #list_abo li, /* Liste des abonnements */
                #liste_categorie_famille li, /* Liste des categories d'abonnements */
                #list_article li, /* Liste des articles */
                #field_zone_article_famille li /* Liste des categories d'articles */ {
                    -ms-flex-preferred-size: calc(100% - 20px); /* divise par nb_colonne */
                    flex-basis: calc(100% - 20px);
                }
            }

        /* Taille des vignettes Spectacle & Abonnement */
            #alaffiche img,
            #list_event img,
            #liste_categorie_famille img,
            #list_abo img,
            #field_zone_article_famille img,
            #list_article img {
                float: left;
                width: 150px;
            }

            #alaffiche img + .description_item,
            #list_event img + .description_item,
            #liste_categorie_famille img + .description_item,
            #list_abo img + .description_item, 
            #list_abo a + .description_item,
            #field_zone_article_famille img + .description_item,
            #list_article img + .description_item {
                width: calc(100% - 155px); /* 85px = taille image + 5px de margin */
                float: right;
            }

            #alaffiche img,
            #list_event img {
                height: 120px;
                width: auto;
            }

            #alaffiche img + .description_item,
            #list_event img + .description_item {
                width: calc(100% - 90px); /* 85px = taille image + 5px de margin */
            }

            #list_abo img {
                width: 100px;
            }

            #list_abo img + .description_item,
            #list_abo a + .description_item {
                width: calc(100% - 105px); /* 85px = taille image + 5px de margin */
            }

        /* Zone a l'affiche */
            /* Masquer la zone */
            /* #field_thumbnail {
                display: none;
            } */

            /* Avec calendrier */
            /*#alaffiche ul {
                width: calc(75% - 10px);
                float: left;
            }

            @media screen and (max-width: 1230px) {
                #alaffiche ul {
                    width: 70%;
                }
            }*/

        /* Zone recherche (liste des spectacles) */
            /* Avec formulaire de recherche */
            /*#body_events_listing #zone_result {
                width: calc(75% - 20px);
                float: left;
            }

            @media screen and (max-width: 1230px) {
                #body_events_listing #zone_result {
                    width: calc(70% - 20px);
                }
            }*/

        /* Image page accueil & maintenance */
            #cartouche_accueil dl {
                position: relative;
            }
            
            #cartouche_accueil dd {
                width: 65%;
            }
            
            #cartouche_accueil dd.photo {
                position: absolute;
                top: 50%;
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                right: 0;
                text-align: center;
                width: 30%;
            }
            
            #cartouche_accueil img {
                max-width: 100%;
            } 

            #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) #contenu {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                flex-wrap: wrap;
            }
            
            #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) #contenu #zone_bonjour {
                -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
                text-align: right;
            }
            
            #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) #contenu > .contenu_gauche {
                -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
                text-align: center;
            }
            
            #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) h1 {
                color: initial;
                font-weight: normal;
                text-transform: none;
                font-size: initial;
            }

            @media screen and (max-width: 768px) {
                #cartouche_accueil dd {
                    width: 100%;
                }
                
                #cartouche_accueil dd.photo {
                    position: static;
                    transform: none;
                    width: 100%;
                }

                #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) #contenu {
                    display: block;
                    text-align: center;
                }
            
                #body_error:not(.mdp_1):not(.mdp_2):not(.mdp_3):not(.mdp_4) #contenu > .contenu_gauche {
                    margin-bottom: 20px;
                }
            } 

/* ====================================================
   1. DEFAULT
==================================================== */
    body {
        color: var(--body-txt-color);
        font-family: var(--body-font);
        font-size: var(--body-txt-size);
        font-weight: 300;
        line-height: 1.3;
        background: #f6f8f8;
        word-wrap: break-word;
    }

    i[class|="icon"]:not(.icon-eye-open):not(.icon-eye-close),
    i.icon-plus,
    i.icon-minus {
        margin: 5px;
    }

    #result {
        display: none;
    }

    .object_descri.haut:not(:empty),
    .descri.haut:not(:empty),
    #body_catalog h3 + p:not(:empty) {
        margin-bottom: .5rem;
    }

    .object_descri.bas:not(:empty),
    .descri.bas:not(:empty) {
        margin-top: .5rem;
    }

    img {
        max-width: 100%;
    }

    /* 1.1. Animations
    ================================================ */
        a,
        #liste_formule .link_show_plan_abo {
            color: var(--link-txt-color);
            text-decoration: var(--link-decoration);
            display: inline-block;
        }

        a[target="_blank"]::after {
            content: "\f08e";
            display: inline;
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            padding-left: 5px;
        }

        a:hover,
        #liste_formule .link_show_plan_abo:hover {
            color: var(--link-txt-color-hover);
        }
        
        a,
        button,
        #liste_formule .link_show_plan_abo,
        .description_bloc li[onclick] {
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
            -webkit-transition-property: color, background;
            -moz-transition-property: color, background;
            -ms-transition-property: color, background;
            -o-transition-property: color, background;
            transition-property: color, background;
        }

    /* 1.2. Typographies, tailles, display, color
    ================================================ */
        /* Titres */ 
        h1,
        #titre h3, /* homepage */
        #liste_spectacles > h3,
        .zone_titre,
        .head_today h3,
        #zone_result h3,
        .gc_container h2,
        #zone_formulaire_abonnement h3,
        #zone_creation_formule_contact h3,
        #body_terms_conditions #contenu > h2,
        #cartouche_representation .zone_titre,
        #field_selection_tarifs h3,
        #zone_saisie h3,
        #liste_spectacles > h3 {
            font-family: var(--h1-font);
            font-size: var(--h1-txt-size);
            line-height: var(--h1-txt-size);
            color: var(--h1-color);
            font-weight: var(--h1-txt-weight);
            text-transform: var(--h1-transform);
            margin-bottom: 15px;
        }

        h2, h3,
        #zone_representations h3,
        #cartouche_representation h3,
        #panier_mode_retrait_titre:not(:empty),
        #zone_select_abo_multiple h3,
        #zone_recap_abo_multiple h3,
        #zone_recap h3,
        #zone_bon_cadeau h3,
        .title_account {
            font-family: var(--h2-font);
            font-size: var(--h2-txt-size);
            line-height: var(--h2-txt-size);
            color: var(--h2-color);
            font-weight: var(--h2-txt-weight);
            text-transform: var(--h2-transform);
            margin-bottom: 10px;
        } 

        #detail_identification h4,
        #zone_representations h3,
        #body_terms_conditions h3,
        .title_account,
        .title_section,
        div#zone_code_promo h3,
        #zone_bon_cadeau .zone_titre {
            font-family: var(--h3-font);
            font-size: var(--h3-txt-size);
            line-height: var(--h3-txt-size);
            color: var(--h3-color);
            font-weight: var(--h3-txt-weight);
            text-transform: none;
            margin-bottom: 10px;
        }

        .title_account {
            padding-top: 0;
        }

        .title_account::before {
            content: none;
        }

        #body_mon_compte .title_section,
        #body_mon_compte .icon_dashboard {
            font-size: calc(var(--h3-txt-size));
            color: var(--body-txt-color);
        }

        /* Titre du spectacle */
        #cartouche_spectacle .summary h3,
        #cartouche_representation .summary h3,
        #choix_places_cartouche_rep .summary h3,
        h2#message_ajax,
        .title_item  {
            font-family: var(--h3-font);
            font-size: var(--h3-txt-size);
            color: var(--h3-color);
            font-weight: var(--h3-txt-weight);
            text-transform: var(--h3-transform);
        }

        #field_search h3 {
            text-transform: none;
            color: inherit;
            font-family: inherit;
            font-size: 20px;
        }

        /* Titres cliquables (Tabs) */
        .rsi-pointer {
            color: var(--color-primary);
            cursor: pointer;
        }

        .show_zone,
        .rsi-pointer i {
            pointer-events: none;
            float: right;
        }
    
    /* 1.3. Layout
    ================================================ */
        #page {
            width: 1240px;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            background: #FFFFFF;
        }

        #page > * {
            padding-left: 10px;
            padding-right: 10px;
        }

        @media screen and (min-width: 1230px) {
            #page {
                min-height: 100vh;
                padding-bottom: 90px; /* Hauteur du pied de page, marge comprise */
            }

            #page > * {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
        
        /* Clearfix */
        #page:before,
        #page:after,
        #contenu:before,
        #contenu:after,
        #zone_bonjour::before,
        #zone_bonjour::after,
        #zone_bonjour h2::before,
        #zone_bonjour h2::after,
        #alaffiche:before,
        #alaffiche:after,
        #alaffiche ul a:before,
        #alaffiche ul a:after,
        #list_event:before,
        #list_event:after,
        #list_event ul a:before,
        #list_event ul a:after,
        #list_event_today:before,
        #list_event_today:after,
        #list_event_today ul a:before,
        #list_event_today ul a:after,
        #list_abo ul a:before,
        #list_abo ul a:after,
        #liste_categorie_famille a:before,
        #liste_categorie_famille a:after,
        #list_article ul a:before,
        #list_article ul a:after,
        #list_bons_cadeaux ul a:before,
        #list_bons_cadeaux ul a:after,
        #cartouche_spectacle dl:before,
        #cartouche_spectacle dl:after,
        #cartouche_representation dl:before,
        #cartouche_representation dl:after,
        #cartouche_description_formule dl:before,
        #cartouche_description_formule dl:after,
        .responsive [data-produit][data-type="article"]:before,
        .responsive [data-produit][data-type="article"]:after,
        .responsive [data-produit][data-type="bon_cadeau"]:before,
        .responsive [data-produit][data-type="bon_cadeau"]:after,
        #zone_envoi_panier::before,
        #zone_envoi_panier::after {
            content: '';
            display: block;
            clear: both;
        }

        fieldset {
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

        /* Reinitialisation des margin & padding sur certains fieldset */
        #field_search fieldset,
        #body_events_listing #zone_result fieldset,
        #body_catalogue_abonnement #zone_result fieldset,
        #zone_form_abo_contact,
        #body_catalog fieldset,
        #body_bons_cadeaux fieldset,
        #zone_identification fieldset,
        #field_mes_contacts fieldset,
        #field_selection_tarifs,
        #panel_plan_reduit {
            margin: 0;
            padding: 0;
        }

        /* Bordures separatives */
        #cartouche_accueil fieldset:after,
        #cartouche_spectacle fieldset:after,
        fieldset#field_cartouche_representation:before,
        fieldset#field_cartouche_representation:after,
        fieldset#zone_choix_places_cartouche_rep:before,
        #cartouche_article > fieldset:after,
        #selection_contact > fieldset:after,
        #zone_commandes > fieldset:after,
        #acces_justificatifs > fieldset:after,
        #body_justificatifs #zone_justificatifs > fieldset:after,
        #zone_panier > fieldset:after,
        fieldset#field_mes_contacts:before,
        #zone_select_abo_multiple fieldset:after,
        #zone_select_abo_multiple fieldset:before,
        #field_formulaire_abonnement:after {
            content: '';
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 1px;
            background: #ccc;
        }

        body:not(.spectacle-representation_is_unique) fieldset#field_cartouche_representation:before,
        fieldset#field_mes_contacts:before {
            top: -20px;
            bottom: initial;
        }

        #mes_contacts_new fieldset#field_mes_contacts {
            margin-top: 20px;
            padding-top: 20px;
        }

        #mes_contacts_new fieldset#field_mes_contacts:before {
            top: 0;
        }

        /* Bordure separative top & bottom */
        #zone_select_abo_multiple fieldset {
            padding-top: 20px;
            padding-bottom: 20px;
            margin-top: 20px;
            margin-bottom: 20px;          
        }

        #zone_select_abo_multiple fieldset:before {
            top: 0;
            bottom: initial;
        }

        /* Masque les liens vides */
        a:empty {
            display: none!important;
        }

    /* 1.4. Forms
    ================================================ */
        label {
            display: inline-block;
            font-weight: bold;
            margin-right: 20px;
        }

        input, select, textarea {
            padding: 5px 15px;
            background: none;
            border: 1px solid #CCC;
            outline: 0;
        }

        input[type="checkbox"],
        input[type="radio"] {
            margin-right: 7px;
            vertical-align: middle;
        }

        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="email"],
        input[type="tel"],
        input[type="file"],
        textarea {
            -webkit-appearance: none;
        }

        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="email"],
        input[type="tel"],
        input[type="file"],
        textarea,
        select {
            background: #FFF;
            display: block;
            width: 100%;
        }

        textarea {
            min-width: 100%;
            max-width: 100%;
            min-height: 70px;
            padding: .5rem;
        }

        /* Tous les boutons */
        button,
        .button,
        #body_error #contenu a,
        #toggle_zone_horaire,
        #zone_bonjour h2 a,
        #body_justificatifs .btn.btn-upload,
        .zone_filter .btn-filter {
            display: inline-block;
            text-decoration: none;
            padding: var(--btn-padding);
            text-transform: var(--btn-transform);
            font-family: var(--btn-font);
            font-size: var(--btn-txt-size);
            font-weight: var(--btn-txt-weight);
            border-radius: var(--btn-border-radius);
            cursor: pointer;
            outline: 0;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -ms-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
        }

        /* Principal */
        button,
        .button,
        #body_error #contenu a,
        #toggle_zone_horaire,
        #zone_bonjour h2 a {
            background: var(--btn-bg-color);
            border: var(--btn-border);
            color: var(--btn-txt-color);
        }

        button:hover,
        .button:hover,
        #body_error #contenu a:hover {
            background: var(--btn-bg-color-hover);
            border: var(--btn-border-hover);
            color: var(--btn-txt-color-hover);
        }

        /* Secondaire */
        #toggle_zone_horaire,
        .modifier_seance,
        #zone_bonjour h2 a,
        #contenu .btn-info,
        #body_justificatifs .btn.btn-upload,
        #annuler,
        #reset,
        .go-to-tickets,
        .zone_filter .btn-filter,
        .zone_filter .actions button {
            background: var(--btn-s-bg-color);
            border: var(--btn-s-border);
            color: var(--btn-s-txt-color);
        }

        #zone_bonjour h2 a {
            padding: 6px 15px;
            line-height: normal;
            font-size: var(--body-txt-size);
        }

        #toggle_zone_horaire:hover,
        .modifier_seance:hover,
        #zone_bonjour h2 a:hover,
        #contenu .btn-info:hover,
        #creer_compte_beneficiaire:hover,
        #body_justificatifs .btn.btn-upload:hover,
        #annuler:hover, 
        #reset:hover,
        .go-to-tickets:hover,
        .zone_filter .btn-filter:hover,
        .zone_filter .actions button:hover {
            background: var(--btn-s-bg-color-hover);
            border: var(--btn-s-border-hover);
            color: var(--btn-s-txt-color-hover);
        }

        #body_justificatifs .btn.btn-upload {
            padding: 5px 10px;
            font-size: 16px;
        }

        .ui-button.ui-widget {
            font-size: 14px;
        }

        .zone_filter .btn-filter {
            padding: 0;
        }

        /* Mis en avant */
        #ajout_panier,
        #envoi_panier_svg,
        #poursuivre,
        #add_panier,
        #contenu .btn-success {
            background: var(--color-primary);
            border: 1px solid var(--color-primary);
            color: #FFF;
        }

        #ajout_panier:hover,
        #envoi_panier_svg:hover,
        #poursuivre:hover,
        #add_panier:hover,
        #contenu .btn-success:hover {
            background: #FFF;
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
        }

        .unmask:hover, .unmask:focus, 
        .modifie_mail:hover, .modifie_mail:focus {
            color: var(--color-primary);
        }

        #topBtn i[class|="icon"] {
            margin: 0;
        }
    
    /* 1.5. Tables
    ================================================ */
        table {
            width: 100%;
            max-width: 100%;
            background-color: transparent;
            border-collapse: collapse;
            table-layout: auto;
            font-size: 14px;
        }

        table thead td, 
        table thead th {
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            background: #373535;
            color: #FFF;
            text-align: left;
            text-transform: none;
            font-weight: bold;
        }

        table td, 
        table th {
            border: 1px solid #dee2e6;
            padding: .6em .75rem;
        }

/* ====================================================
   2. HEADER
==================================================== */
    #bandeau {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0px 2px 2px -2px rgba(0, 0, 0, .1);
        background: #f6f8f8;
        margin: 0 auto 20px;
        padding: 0!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
    }

    #bandeau::after {
        content: '';
        display: block;
        float: none;
        clear: both;
    }

    /* 2.1. Logo
    ================================================ */
        #logo1 {
            -webkit-box-align: flex-start;
            -ms-flex-align: flex-start;
            align-items: flex-start;
            width: 100%;
            background-color: #373535;
        }

        #logo1 a {
            display: block;
        }

        #logo1 img {
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }

    /* 2.2. Menu
    ================================================ */
        #toggleMenu,
        #toggle_account {
            display: none!important;
        }

        #tabnav {
            padding: 0;
            list-style: none;
            margin: 0;

            text-align: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #tabnav li {
            display: inline-block;
            position: relative;
        }

        #tabnav li + li {
            border-left: 1px solid #d0d0d0;;
        }
        
        #tabnav li.menu-item a,
        #tabnav li a {
            display: block;
            text-decoration: none;
            color: var(--body-txt-color);
            font-weight: bold;
            text-transform: uppercase;
            padding: 10px 12px;
        }

        #tabnav li.menu-item a:hover,
        #tabnav li.menu-item a:focus,
        #tabnav li.menu-item a.active,
        #tabnav li a:hover,
        #tabnav li a:focus,
        #tabnav li a.active {
            background: #373535;
            color: #FFF;
        }

        #tabnav li.nav-flag {
            padding-left: 0;
        }

        #tabnav li.nav-flag a {
            display: inline-block;
            position: relative;
        }

        #tabnav li.nav-flag a:not(:last-child):after {
            content: '';
            height: 50%;
            width: 1px;
            display: block;
            background: var(--color-primary);
            position: absolute;
            right: -2px;
            top: 25%;
        }
    
    /* 2.3. Footer
    ================================================ */
        #piedpage {
            clear: both;
            margin-bottom: 0;
            margin-top: 20px;
            text-align: right;
            font-size: 14px;
            position: relative;
            z-index: 3;
            padding-top: 15px;
            padding-bottom: 10px;
            background: #FFFFFF;
        }

        #piedpage::after {
            content: '';
            display: block;
            float: none;
            clear: both;
        }

        @media screen and (min-width: 1230px) {
            #piedpage {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
            }

            /* Mode maintenance */
            #piedpage img:nth-of-type(1) {
                float: left;
            }

            #piedpage img:nth-of-type(2) {
                display: none;
            }
        }

        #piedpage li a {
            color: var(--link-txt-color);
            text-decoration: var(--link-decoration);
        }

        #piedpage li a:hover,
        #piedpage li a:focus {
            color: var(--link-txt-color-hover);
        }


/* ====================================================
   3. MODULES
==================================================== */
    /* 3.1. Zone Bonjour avec temps restant
    ================================================ */
        #zone_bonjour {
            margin-bottom: 15px;
            text-align: right;
        }

        #zone_bonjour h2 {
            display: inline-block;
            font-size: inherit;
            vertical-align: middle;
            margin-right: 10px;
            margin-bottom: 0;
            color: inherit;
            text-transform: inherit;
            font-family: inherit;
        }

        #zone_bonjour h2 a:before {
            content: "\f007";
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            text-decoration: inherit;
            -webkit-font-smoothing: antialiased;
            margin-right: 7px;
        }

        #zone_bonjour h2 button {
            margin-left: 10px;
            padding: 5px 15px;
        }

        #tempsrestant {
            display: inline-block;
            vertical-align: middle;
            padding: 5px 15px;
            color: var(--color-primary-darkened);
            background: rgba(var(--color-primary-rgb), 0.1);
            border: 1px solid var(--color-primary);
            border-radius: var(--btn-border-radius);
        }

        #tempsrestant span {
            text-transform: lowercase;
        }

        #tempsrestant .tempslimit {
            font-weight: 600;
            text-transform: capitalize;
        }

        #tempsrestant .countdown_expire {
            font-weight: bold;
            color: #ff0000;
        }

        body#body_create_account[data-contexte="2"][data-souscontexte="0"] .tempsrestant_expire {
            display: none;
        }
    
    /* 3.2. Zone Code promo
    ================================================ */
        div#zone_code_promo fieldset {
            background: #f5f5f5;
            padding: 5px;
            text-align: center;
            border: 1px solid #eee;
        }

        div#zone_code_promo .detail_code_promo {
            padding: 0px;
            display: block!important;
        }

        div#zone_code_promo .position_gauche,
        div#zone_code_promo .position_droite {
            display: inline-block;
            vertical-align: bottom;
        }

        div#zone_code_promo label {
            margin-right: 10px;
        }

        div#zone_code_promo input {
            background: #FFF;
            padding: 4px 6px;
            width: auto;
            display: inline-block;
        }

        div#zone_code_promo button,
        #contenu div#zone_code_promo button {
            border: 1px solid #CCC;
            border-left: 0;
            border-radius: 0;
            line-height: normal;
            padding: 3px 10px;
            font-size: inherit;
        }

        div#zone_code_promo input,
        div#zone_code_promo button,
        #contenu div#zone_code_promo button {
            height: 28px;
        }
    
    /* 3.3. Calendrier(s)
    ================================================ */
        #calendar_event table,
        #calendar_representation table {
            table-layout: fixed;
            border: 1px solid #ddd;
        }

        #calendar_event table tbody tr:nth-of-type(even),
        #calendar_representation table tbody tr:nth-of-type(even) {
            background: inherit;
        }
                    
        /* Mois en cours & Fleches */
        #calendar-month th,
        .ui-datepicker .ui-datepicker-header {
            border: 0;
            font-size: 16px;
            background: var(--color-primary);
            font-weight: bold;
            color: #FFF;
        }

        #calendar-month span {
            display: block;
            cursor: pointer;
        }
                    
        /* Jour de la semaine */
        .calendar-header td,
        .ui-datepicker th {
            font-weight: bold;
            text-align: center;
            background: none;
            color: inherit;
            padding: .6em 0;
        }

        .ui-datepicker td span, .ui-datepicker td a {
            color: inherit;
        }
                    
        /* Jour du mois */
        .calendar-days td[data-day],
        .ui-datepicker td:not(.ui-datepicker-other-month) {
            background: #f9f9f9;
            text-align: center;
            vertical-align: top;
        }

        .ui-datepicker-today { 
            font-weight: bold; 
        }

        /* Jour du mois : avec representation */
        .calendar-days td[data-day].dispo_ok,
        .ui-datepicker td[data-handler="selectDay"] {
            background: rgba(var(--color-primary-rgb), 0.2);
            cursor: pointer;
            position: relative;
            font-weight: bold;
        }

        /* HOVER Jour du mois : avec representation */
        .info_bulle,
        .info_bulle h4 {
            display: none;
        }

        .calendar-days td[data-day].dispo_ok:hover .day-date .info_bulle,
        .calendar-days td[data-day].dispo_ok .event_item.dispo:hover .info_bulle {
            background-color: #fff;
            color: var(--body-txt-color);
            border: 1px solid #cccccc;
            display: block;
            margin: 2px 10px 2px 0;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 100%;
            white-space: nowrap;
            z-index: 9;
            padding: 5px;
            text-align: left;
        }

        /* Page de listing (spectacles) */
        #calendar_event {
            float: right;
            width: 25%;
        }

        #titre_list_representation {
            margin-bottom: 10px;
        }
        
        /* Jour du mois : avec representation */
        /* Plus de place */
        .calendar-days td[data-day].dispo_ok .event_item.indispo {
            background-color: #e6e6e6;
            color: #868686;
            margin-top: 5px;
            position: relative;
        }
        
        /* Reste des places */
        .calendar-days td[data-day].dispo_ok .event_item.dispo {
            background-color: var(--body-txt-color);
            color: #FFF;
            cursor: pointer;
            position: relative;
            margin-top: 5px;
        }

    /* 3.4. Mes amis
    ================================================ */
        #field_mes_contacts {
            padding-bottom: 0;
        }

        #field_mes_contacts h3 {
            margin-bottom: 0;
            font-size: 22px;
        }

        #field_mes_contacts i {
            pointer-events: none;
            float: right;
        }

        #field_mes_contacts .descri.haut.zone_ami span {
            display: block;
            padding-left: 20px;
        }

        #field_mes_contacts .descri.bas.zone_ami span {
            margin-top: 10px;
        }

        #connexion_compte_beneficiaire  {
            background: #f5f5f5;
            padding: 15px;
            margin-top: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            flex-direction: row;
        }

        #connexion_compte_beneficiaire input {
            background: #FFF;
            min-width: 200px;
            margin-right: 40px;
            display: inline-block;
            width: auto;
        }
        
        #connexion_compte_beneficiaire .position_droite p + p {
            margin-top: 10px;
        }

        #zone_saisie_benef h3 {
            font-size: 18px;
        }

        #saisie_beneficiaire fieldset,
        #selection_beneficiaire fieldset {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        #saisie_beneficiaire p.inscription {
            background: #f5f5f5;
            padding: 10px 20px;
            margin: 10px 0;
            display: block;
        }

        #saisie_beneficiaire label {
            display: block;
            margin-bottom: 5px;
        }

        #saisie_beneficiaire input {
            display: block;
            width: 100%;
        }

        #saisie_beneficiaire .position_droite {
            text-align: right;
        }

    /* 3.5. Modal
    ================================================ */
        .ui-dialog-title {
            color: var(--body-txt-color)!important;
        }

        .ui-dialog .ui-dialog-titlebar-close {
            background: none!important;
            border-radius: 0!important;
            padding: 0!important;
        }

        .ui-button-icon-only .ui-icon {
            color: var(--color-primary)!important;            
        }

        .link_ignore {
            color: var(--color-primary);
        }

        /* Dedicasse bons cadeaux */
            .message_gift_card h3 {
                color: var(--body-txt-color);
            }

            #form_gift_card input[type="radio"]:checked + label,
            #form_gift_card input[type="radio"]:checked + label h3 {
                color: var(--color-primary);
            }
    
    /* 3.6. Zone completer commande
    ================================================ */
        #zone_rubrique fieldset,
        #complus fieldset,
        #retour_catalogue fieldset {
            padding: 0;
            margin: 0;
        }

/* ====================================================
   4. PAGES
==================================================== */
    /* 4.1. Page de listing (commun)
    ================================================ */
        #alaffiche ul, /* Zone a l'affiche */
        #list_event ul, /* Liste des spectacles */
        #list_abo ul, /* Liste des abonnements */
        #liste_categorie_famille, /* Liste des categories d'abonnements */
        #list_article ul, /* Liste des articles */
        #list_bons_cadeaux ul, /* Liste des bons cadeaux */
        #field_zone_article_famille ul /* Liste des categories d'articles */ {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-item-align: start;
            align-self: flex-start;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin: 0 -10px;
            padding: 0;
            list-style: none;
        }

        #alaffiche ul li a, /* Zone a l'affiche */
        #list_event_today ul li a, /* Zone aujourd'hui */
        #list_event ul li a, /* Liste des spectacles */
        #list_abo li a, /* Liste des abonnements */
        #liste_categorie_famille li a, /* Liste des categories d'abonnements */
        #list_article li a, /* Liste des articles */
        #list_bons_cadeaux li a, /* Liste des bons cadeaux */
        #field_zone_article_famille li a /* Liste des categories d'articles */ {
            display: block;
            text-decoration: none;
            height: 100%;
        }

        #alaffiche ul li a:hover, /* Zone a l'affiche */
        #list_event_today ul li a:hover, /* Zone aujourd'hui */
        #list_event ul li a:hover, /* Liste des spectacles */
        #list_abo li:hover, /* Liste des abonnements */
        #liste_categorie_famille li a:hover, /* Liste des categories d'abonnements */
        #list_article li a:hover, /* Liste des articles */
        #list_bons_cadeaux li a:hover, /* Liste des bons cadeaux */
        #field_zone_article_famille li a:hover /* Liste des categories d'articles */ {
            background: #f5f5f5;
        }

        #alaffiche .description_item,
        #list_event_today .description_item, /* Zone aujourd'hui */
        #list_event .description_item,
        #list_abo .description_item,
        #liste_categorie_famille .description_item,
        #list_article .description_item,
        #list_bons_cadeaux .description_item, /* Liste des bons cadeaux */
        #field_zone_article_famille .description_item /* Liste des categories d'articles */ {
            color: var(--body-txt-color);
            padding: 7px;
        }

        #alaffiche .summary,
        #list_event_today .summary, /* Zone aujourd'hui */
        #list_event .summary,
        #list_abo .summary,
        #liste_categorie_famille .summary,
        #list_article .summary,
        #list_bons_cadeaux .summary, /* Liste des bons cadeaux */
        #field_zone_article_famille .summary /* Liste des categories d'articles */ {
            text-transform: uppercase;
            font-size: 1rem;
            margin-bottom: 3px;
            color: var(--body-txt-color);
        }

        #list_event .description + p:not(:empty),
        #list_event_today .description + p:not(:empty), /* Zone aujourd'hui */
        #liste_categorie_famille + p:not(:empty),
        #list_abo .description + p:not(:empty) {
            margin-top: 3px;
        }

        .abonnement.category,
        #cartouche_description_formule .category {
            display: none;
        }


    /* 4.1. Page de listing (spectacles)
    ================================================ */
        /* Bouton tout lister */
        #search_all_p {
            text-align: center;
            width: 70%; /* Meme largeur que la zone "A l'affiche" */
        }
        
        /* 4.1.1 CSS Commun: [A l'affiche] & [Resultats de recherche] */
            /* Icone date */
            #alaffiche .description_item .dt,
            #list_event_today .description_item .dt,
            #list_event .description_item .dt {
            }

            #alaffiche .description_item .dt:before,
            #list_event_today .description_item .dt:before,
            #list_event .description_item .dt:before {
                content: "\f073";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }
        
        /* 4.1.3 Filtre de recherche */
            #field_search {
                float: right;
                margin-top: 40px; /* Alignement avec les items du resultat de recherche*/
                width: 25%;
                border: 1px #CCC solid;
                padding: 15px;
                background: #f9f9f9;
                font-size: 16px;
            }
            
            /* Titre */
            #field_search i {
                pointer-events: none;
                float: right;
            }
            
            /* Choisir un type / categorie */
            #field_search .table_search,
            #field_search p + p,
            #field_search .zn_it  {
                margin-bottom: 10px;
            }

            #field_search p label {
                margin: 5px 0;
            }
            
            /* Annule le style tableau */
            #field_search table,
            #field_search tbody {
                display: block;
            }
            
            /* Place en premier l'input checkbox */
            #field_search tr {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                margin-left: 15px;
                margin-bottom: 5px;
            }

            #field_search tr td:first-child {
                order: 2;
            }

            #field_search td,
            #field_search td > * {
                vertical-align: middle;
                padding: 0;
                border: 0;
            }

            #field_search td label {
                font-weight: normal;
            }

            /* Date */
            #field_search #date_a_date {
                display: flex;
                flex-direction: row;
                align-items: baseline;
            }

            #field_search span {
                font-weight: bold;
            }

            #field_search #date_a_date *:not(:last-child){
                margin-right: .5em;
            }
            
            /* Boutons */
            #field_search #zone_search_button {
                text-align: center;
                margin: 0 -5px;
            }

            #field_search button {
                font-size: 14px;
                padding: 6px 10px;
            }

            #field_search button:nth-child(1) {
                margin: 0;
                margin-right: 5px;
            }

            #field_search button:nth-child(2) {
                margin: 0;
                margin-left: 5px;
            }
        
        /* 4.1.4 Resultats de recherche */
            /* Transforme en texte la mention "aucun resultat" */
            #body_events_listing #zone_result #list_event h3 {
                font-size: inherit;
                color: inherit;
                text-transform: inherit;
                font-weight: inherit;
                font-family: inherit;
            }

            /* Mini description */
            #list_event .description_item .description {
                margin-top: 7px;
            }

            #list_event .description_item .description * {
                font-family: inherit!important;
                font-size: inherit!important;
            }

            /* Ville de la salle & Salle*/
            #list_event .description_item .city,
            #list_event .description_item .location {
                font-weight: bold;
            }

            /* Categorie et type */
            #list_event .description_item .category,
            #list_event .description_item .type {
                display: block;
                margin-top: 3px;
            }

    /* 4.2. Fiche simple (d'un spectacle)
    ================================================ */
        #zone_bouton_retour {
            margin-bottom: 20px;
        }
        
        #zone_bouton_retour a.retour_site {
            text-transform: uppercase;
            color: var(--link-txt-color);
            border-bottom: none;
            font-weight: bold;
            padding-left: var(--body-txt-size);
            position: relative;
        }

        #zone_bouton_retour a.retour_site:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-right: 8px solid var(--link-txt-color);
            position: absolute;
            top: 5px;
            left: 0px;
        }
        
        #zone_bouton_retour a.retour_site:hover {
            color: var(--link-txt-color-hover);
        }

        /* 4.2.1 Detail spectacle & representation choisie */
            #spectacle_list_representation {
                margin: 0;
                padding: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                margin-left: -.5rem;
                margin-right: -.5rem;
            }
             
            #spectacle_list_representation li {
                display: block;
                width: calc(20% - 1rem);
                background-color: #fafafa;
                border: 1px solid #bcbcbc;
                margin: .5rem;
                padding: .75rem 1rem 1rem;
                transition: none;
                -webkit-transition: none;
            }
             
            #spectacle_list_representation li.non_dispo {
                background-color: #ededed;
            }

            #spectacle_list_representation li.non_dispo .description_item >:not(.inscription_liste_attente),
            #spectacle_list_representation li.non_dispo >:not(.inscription_liste_attente){
                color: #696969;
            }
             
            #spectacle_list_representation li:not(.non_dispo) {
                cursor: pointer
            }
             
            #spectacle_list_representation li:not(.non_dispo):hover {
                background-color: #e6e6e6;
            }
             
            .icon-remove-sign {
                color: red
            }
             
            #spectacle_list_representation li .description_item dt {
                font-size: 18px;
                font-weight: 600;
                line-height: 1.1em
            }
             
            #spectacle_list_representation li .description_item dt .summary_web {
                display: none
            }
             
            #spectacle_list_representation li .description_item dd {
                font-size: .85rem;
                margin-top: .5rem
            }
             
            #spectacle_list_representation li .icon-remove-sign {
                font-size: 1.3rem
            }
             
            @media screen and (max-width: 1024px) {
                #spectacle_list_representation li {
                    width: calc(33.3333% - 1rem)
                }
            }
             
            @media screen and (max-width: 768px) {
                #spectacle_list_representation li {
                    width: calc(50% - 1rem)
                }
            }
             
            @media screen and (max-width: 500px) {
                #spectacle_list_representation li {
                    width: calc(100% - 1rem)
                }
            }
            #zone_description_cartouche_spectacle,
            #zone_description_cartouche_rep {
                font-weight: bold;
                margin-bottom: 10px;
            }

            #cartouche_spectacle dl {
                position: relative;
            }

            /* Titre du spectacle */
            #cartouche_spectacle .summary h3,
            #cartouche_representation .summary h3,
            #choix_places_cartouche_rep .summary h3 {
                margin-bottom: 0;
            }

            /* Ajout heure a date sur representation seule */
            .spectacle-representation_is_unique #cartouche_spectacle .datetime .sdh {
                display: inline-block!important;
                margin: 0 2px;
            }
        
            /* Date(s), Duree, Places disponibles, Salle, Ville de la salle */
            #cartouche_spectacle .datetime {
                margin-top: 1em;
            }

            #cartouche_spectacle .duration:not(:empty),
            #cartouche_spectacle .location:not(:empty),
            #cartouche_spectacle .city:not(:empty),
            #cartouche_spectacle .phone:not(:empty),
            #cartouche_representation .dtstart,
            #cartouche_representation .duration:not(:empty),
            #cartouche_representation .places_disponibles,
            #cartouche_representation .location:not(:empty),
            #cartouche_representation .city:not(:empty),
            #cartouche_representation .phone:not(:empty),
            #choix_places_cartouche_rep .dtstart,
            #choix_places_cartouche_rep .duration:not(:empty),
            #choix_places_cartouche_rep .location:not(:empty),
            #choix_places_cartouche_rep .city:not(:empty),
            #choix_places_cartouche_rep .phone:not(:empty) {
                display: inline-block;
                width: auto;
                margin-right: 15px;
                margin-top: 15px;
            }
                
            #cartouche_spectacle .datetime:before,
            #cartouche_representation .dtstart:before,
            #choix_places_cartouche_rep .dtstart:before  {
                content: "\f073";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            #cartouche_spectacle .duration:not(:empty):before,
            #cartouche_representation .duration:not(:empty):before,
            #choix_places_cartouche_rep .duration:not(:empty):before {
                content: "\f017";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            #cartouche_representation .places_disponibles:before {
                content: "\f145";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            #cartouche_spectacle .location:not(:empty),
            #cartouche_spectacle .city:not(:empty),
            #cartouche_representation .location:not(:empty),
            #cartouche_representation .city:not(:empty),
            #choix_places_cartouche_rep .location:not(:empty),
            #choix_places_cartouche_rep .city:not(:empty) {
                margin-right: 5px;
            }
          
            #cartouche_spectacle .location:not(:empty):before,
            #cartouche_representation .location:not(:empty):before,
            #choix_places_cartouche_rep .location:not(:empty):before {
                content: "\f041";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            /* IcÃ´nes film */
            #body_film .sd::before,
            #body_film .duration:before,
            #body_film .location:before,
            #body_film .places_disponibles:before {
                color: var(--color-primary);
            }

            /* IcÃ´nes phone */
            #cartouche_spectacle .phone:not(:empty),
            #cartouche_representation .phone:not(:empty),
            #choix_places_cartouche_rep .phone:not(:empty) {
                margin-left: 7px;
            }

            #cartouche_spectacle .phone i,
            #cartouche_representation .phone i,
            #choix_places_cartouche_rep .phone i {
                display: none;
            }

            #cartouche_spectacle .phone:not(:empty)::before,
            #cartouche_representation .phone:not(:empty)::before,
            #choix_places_cartouche_rep .phone:not(:empty)::before {
                content: "\f095";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            /* Photo */
            #cartouche_spectacle .photo {
                width: 30%;
                float: right;
                text-align: center;
            }

            /* Description */
            #cartouche_spectacle .description {
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid #f5f5f5;
                width: 65%;
            }

            #cartouche_spectacle .description * {
                font-family: inherit!important;
                font-size: inherit!important;
            }
    
        /* 4.2.2 Selection des places (non numerote) */
            #zone_selection_tarifs_descri_h:not(:empty) {
                position: relative;
                padding: 0.75rem 1.25rem;
                margin-bottom: 1rem;
                border: 1px solid transparent;
                border-radius: 0.25rem;
                margin-top: 1rem;
                background-color: rgba(var(--color-primary-rgb), 0.1);
                border-color: var(--color-primary);
            }

            #body_abonnement_multiple #zone_selection_tarifs_descri_h {
                display: none!important;
            }
            
            #titre_tableau_chx_tarifs {
                margin-bottom: 10px;
            }

            #choix_tarifs table {
                position: relative;
                margin-bottom: 10px;
                table-layout: fixed;
            }

            #choix_tarifs tbody tr:nth-of-type(even) {
                background: #F9F9F9;
            }

            /* Header table */
            #choix_tarifs select {
                background: #FFF;
            }

            /* Open / Close */
            #choix_tarifs tr.fold {
                display: none;
            }

            #choix_tarifs tr.fold.open {
                display: table-row;
            }

            #choix_tarifs .view i {
                margin-right: 10px;
            }

            #choix_tarifs tr.view {
                font-weight: bold;
            }

            #choix_tarifs tr.view.open {
                color: var(--color-primary);
            }

            #choix_tarifs tr.view td {
                padding: 1em .75rem;
            }

            /* Total */
            #line_recap {
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: 10px;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                margin: 10px 0 20px;
            }

            #line_recap > span {
                margin: 0 10px;
            }

            #line_recap span span {
                margin-left: 5px;
            }
        
        /* 4.2.3 Selection des places (numerote) */
            #field_selection_tarifs,
            #panel_plan_reduit {
                position: static;
            }

            /* Inversion du plan de salle et de la liste des places selectionnees */
            #panel_plan_reduit_info {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                flex-direction: column-reverse;
            }

            /* Blocs avant plan de salle */
            .description_bloc {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                flex-wrap: wrap;
                margin: 0 -10px 20px;
            }

            .description_bloc li {
                float: none;
                height: auto;
                width: calc(25% - 20px);
                border: 1px solid var(--color-primary);
                margin: 0 10px;
            }

            .description_bloc li[onclick]:hover {
                box-shadow: 2px 2px 5px rgba(0,0,0,.1);
                -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.1);
            }

            .description_bloc h5 {
                text-transform: uppercase;
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: 10px;
                font-size: 16px;
            }

            .description_bloc li > div {
                padding: 10px;
                height: auto;
                height: 100%;
                align-content: center;
            }

            /* Dimensions speciales apercu plan de salle */
            .description_bloc #bloc_salle_complet_vue h5 {
                margin-bottom: 10px;
            }

            #salle_plan_mini {
                width: 190px;
                height: 112px;
                margin: 0 auto 10px;
                padding: 0;
                position: relative;
                overflow: hidden;
            }

            .description_bloc li > div > img {
                width: auto;
                height: auto;
                max-width: 100%;
            }

            /* Plan de salle */
            #choix_places,
            #plan_reduit {
                position: relative;
            }

            #choix_places #compass,
            #plan_reduit #plan_reduit_compass {
                position: absolute;
                height: 100px;
                width: 100px;
                top: 0;
                left: 0;
            }

            #choix_places #plan_salle_svg,
            #plan_reduit #plan_reduit_svg {
                border: 1px solid #ddd;
                overflow: hidden;
                text-align: center;
                height: 600px;
                width: 100%;
                float: none;
                margin: 0 0 20px;
                -ms-flex-preferred-size: 60%;
                flex-basis: 60%;
            }

            #choix_places #plan_salle_svg svg,
            #plan_reduit #plan_reduit_svg svg {
                width: 100%;
                text-align: center;
            }

            /* Recap place sur plan reduit */
            #panel_plan_reduit h5 {
                font-weight: bold;
                margin-bottom: 10px;
                font-size: inherit;
                display: inline-block;
                margin-right: 10px;
            }
            
            #recap_liste_places_provisoires {
                margin-bottom: 0;
            }

            #recap_liste_places_provisoires p .rsi-left {
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: 10px;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                margin: 10px 0 0;
                text-transform: uppercase;
                display: block;
            }

            /* Choix des tarifs */
            #choix_places #recap_places {
                float: none;
            }

            #recap_places h5 {
                border: 1px solid #dee2e6;
                padding: .75rem;
                font-weight: bold;
                background: var(--body-txt-color);
                color: #FFF;
                font-size: var(--body-txt-size);
            }

            #recap_places .cartouche_place {
                position: relative;
                border: 1px solid #dee2e6;
                border-top: 0;
                padding: .6em .75rem;
            } 

            #recap_places .cartouche_place:nth-of-type(even) {
                background: #F9F9F9;
            }

            /* Numero de la place */
            #recap_places .id_num_place,
            #recap_places .place_info_libelle,
            #recap_places .num_place {
                text-align: left;
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 10px;
            }

            #recap_places .id_num_place:before,
            #recap_places .place_info_libelle:before {
                content: "\f145";
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            /* Categorie de tarif */
            #recap_places select {
                background: #FFF;
            }

            /* Amis */
            #recap_places .label_amis_place_num {
                margin-top: 10px;
            }

            #recap_places .cartouche_place p:nth-child(1) {
                text-transform: uppercase;
                color: var(--color-primary);
                font-weight: bold;
            }

            #recap_places .cartouche_place p:nth-child(1),
            #recap_places .cartouche_place p:nth-child(2) {
                margin-bottom: 10px;
            }

            /* Suppression */
            #recap_places .produit_suppression,
            #recap_places .produit_suppression_abo_multiple {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                padding: 10px 15px;
                color: #eb212e;
                cursor: pointer;
            }

            /* Total */
            #line_recap_cartouche_place {
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: 10px;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                margin: 10px 0 20px;
                text-transform: uppercase;
            }

            #line_recap_cartouche_place > span {
                margin: 0 10px;
            }

            #line_recap_cartouche_place span span {
                margin-left: 5px;
            }

        /* 4.2.4 Representation complete */
            #field_selection_tarifs #zone_rep_complete {
                background: #ffecec;
                color: #d00;
                padding: 20px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            #field_selection_tarifs #zone_rep_complete h1 {
                font-size: inherit;
                margin-bottom: 0;
                margin-right: 20px;
                font-family: inherit;
                color: inherit;
                font-weight: bold;
            }

            #field_selection_tarifs #zone_rep_complete .position_gauche {
                flex-basis: 100%;
            }

        /* 4.2.5 Boutons */
            #field_selection_tarifs .position_gauche,
            #zone_recap_abo_multiple .position_gauche,
            #field_formulaire_abonnement .position_gauche,
            #zone_envoi_panier .position_gauche {
                float: left;
            }

            #field_selection_tarifs .position_droite,
            #zone_recap_abo_multiple .position_droite,
            #recap_places .posistion_droite #envoi_panier_svg,
            #recap_liste_places_provisoires p span:not(.rsi-left),
            #field_formulaire_abonnement .position_droite,
            #zone_envoi_panier .position_droite {
                float: right;
            }

            /* Retour liste des spectacle */
            #zone_representation_list button,
            #zone_representations #retour_2,
            #retour_catalogue1,
            #retour_nondispo,
            #selection_tarifs #retour,
            #choix_places #retour_catalogue_svg,
            #zone_liste_recap #retour_catalogue,
            #zone_envoi_panier #retour,
            #selection_quantite #retour {
                margin-top: 10px;
                position: relative;
                text-decoration: underline;
                border: 0;
                font-weight: bold;
                background: none;
                font-style: normal;
                padding: 0 0 0 var(--body-txt-size);
                text-transform: uppercase;
                color: var(--link-txt-color);
                font-size: var(--body-txt-size);
                border-radius: 0;
                letter-spacing: 0;
            }

            #zone_representation_list button:hover,
            #zone_representations #retour_2:hover,
            #retour_catalogue1:hover,
            #retour_nondispo:hover,
            #selection_tarifs #retour:hover,
            #choix_places #retour_catalogue_svg:hover,
            #zone_liste_recap #retour_catalogue:hover,
            #zone_envoi_panier #retour:hover,
            #selection_quantite #retour:hover {
                color: var(--link-txt-color-hover);
            }

            #zone_representation_list button::after,
            #zone_representations #retour_2::after,
            #retour_catalogue1::after,
            #retour_nondispo::after,
            #selection_tarifs #retour::after,
            #choix_places #retour_catalogue_svg::after,
            #zone_envoi_panier #retour:after,
            #selection_quantite #retour:after {
                content: none;
            }

            #zone_representation_list button:before,
            #zone_representations #retour_2:before,
            #retour_catalogue1:before,
            #retour_nondispo::before,
            #selection_tarifs #retour:before,
            #choix_places #retour_catalogue_svg:before,
            #zone_liste_recap #retour_catalogue:before,
            #zone_envoi_panier #retour:before,
            #selection_quantite #retour:before {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-right: 8px solid var(--link-txt-color);
                position: absolute;
                top: 6px;
                left: 0px;
            }

            /* Bouton de modification des horaires */
            #toggle_zone_horaire {
                margin-top: 20px;
            }
    
    /* 4.3. Mon compte
    ================================================ */
        #selection_contact #zone_saisie h3,
        #body_create_account h3 /* Inscription newsletter */ {
            margin-bottom: 0;
            margin-right: 20px;
        }

        .session_cust {
            display: none;
        }

        .zone_filter .actions select, .zone_filter .actions button, .zone_filter .actions input {
            line-height: 0px;
        }

        .tab_content {
            padding: 1em;
        }

        .item_control_text_aft::after {
            margin: .2em 0;
            line-height: normal;
        }

        .icon_dashboard {
            font-size: var(--body-txt-size);
            color: var(--color-primary);
        }

        /* 4.3.1 Justificatifs */
            #body_justificatifs #zone_justificatifs {
                border: none;
                margin-top: 0;
                padding: 0;
            }

            #body_justificatifs .list-group {
                padding: 0;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                flex-direction: row;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                margin: 0;
                margin-left: -0.5em; /* Reset marge flex */
                margin-right: -0.5em; /* Reset marge flex */
            }

            #body_justificatifs .item_justificatif {
                padding: .8em;
                -ms-flex-preferred-size: calc(50% - 1.4em);
                flex-basis: calc(50% - 1.4em); /* 1.4 = marge * 2 */
                margin: 0.5em;
                background: #fafafa;
                border: 1px solid #eee;
            }

            #body_justificatifs .categorie-public-title {
                margin-bottom: 0;
                text-transform: uppercase;
            }

            /* Etat des justificatifs */
            #body_justificatifs .etat-justificatif {
                margin: 0.5em 0 1em;
            }

            #body_justificatifs .etat-justificatif i {
                font-size: 1.2em;
                vertical-align: text-bottom;
                margin-right: 5px;
            }

            #body_justificatifs .btn {
                margin: 0;
            }

            /* 1 : un justificatif est valide */
            #body_justificatifs .item_justificatif[data-state="1"] .etat-justificatif {
                color: #28a745;
            }
            /* 2 : Un justificatif invalide existe */
            /* 3 : Refuse et en attente d'un nouveau justificatif uploade par l'internaute */
            /* 4 : Attente d'un justificatif uploade par l'internaute */
            #body_justificatifs .item_justificatif[data-state="2"] .etat-justificatif,
            #body_justificatifs .item_justificatif[data-state="3"] .etat-justificatif,
            #body_justificatifs .item_justificatif[data-state="4"] .etat-justificatif {
                color: #dc3545;
            }

            /* 5 : Uploade mais en attente de validation par le Back-office */
            #body_justificatifs .item_justificatif[data-state="5"] .etat-justificatif {
                color: #ffb307;
            }

            /* Boutons */
            #body_justificatifs .link.link-to-commande {
                -webkit-appearance: none;
                border: 0;
                border-bottom: 1px solid transparent;
                color: var(--color-primary);
                padding: 0;
                font-weight: normal;
                cursor: pointer;
            }
            #body_justificatifs .link.link-to-commande:hover,
            #body_justificatifs .link.link-to-commande:focus {
                border-color: var(--color-primary);
            }
            #body_justificatifs .link.link-to-commande::before {
                content: "\f0d9";
                margin-right: 5px;
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                display: inline;
                width: auto;
                height: auto;
                line-height: 1;
                vertical-align: baseline;
                background-image: none;
                background-position: 0% 0%;
                background-repeat: repeat;
                margin-top: 0;
            }

            #body_justificatifs .btn[disabled="disabled"] {
                color: #999;
                border-color: #999;
                cursor: default;
            }

        /* 4.3.2 Commandes */
            .bloc_telecharge .explication,
            .firefox-indications {
                margin-bottom: 10px;
                display: block;
            }

            /* Indications firefox */
            .firefox-indications:before {
                content: "\f071";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            /* En tete du tableau */
            #zone_tab_telecharge .header-telecharge td {
                border-bottom: 1px solid #dee2e6;
                padding: .75rem;
                font-weight: bold;
                background: var(--body-txt-color);
                color: #FFF;
                font-size: var(--body-txt-size);
            }

            /* Ligne de la commande */
            #zone_tab_telecharge .line_commande {
                background: #fafafa;
            }

            #zone_tab_telecharge .line_commande td {
                color: #737373;
                font-weight: bold;
                font-style: italic;
            }
            
            /* Bouton de telechargement du produit */
            #zone_tab_telecharge .atelecharger {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                padding: 5px 10px;
                border: 1px solid var(--color-primary);
                text-decoration: none;
                justify-content: center;
            }

            #zone_tab_telecharge .atelecharger:hover,
            #zone_tab_telecharge .atelecharger:focus {
                background: var(--color-primary);
                color: var(--body-txt-color);
            }

            .atelecharger i {
                order: -1;
                margin-right: 7px;
            }
    
    /* 4.4. Connexion / inscription / Deconnexion
    ================================================ */
        #detail_identification {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            margin: 0 -10px;
        }

        #detail_identification .position_gauche,
        #detail_identification .position_droite {
            flex: 1;
            padding: 15px;
            margin: 10px;
            background: #f5f5f5;
        }

        #detail_identification h4 {
            margin-bottom: 10px;
        }

        #detail_identification label,
        #detail_identification input {
            width: 100%;
            display: block;
            font-weight: normal;
        }

        #detail_identification label {
            margin-bottom: 5px;
        }

        #detail_identification input {
            background: #FFF;
        }

        #detail_identification input:not(#web_passe) {
            margin-bottom: 10px;
        }

        #password_retrieve {
            margin: 1em 0;
        }

        /* Deconnexion */
        #body_operation_ok #contenu {
            text-align: center;
        }

        #body_operation_ok h2 {
            color: var(--color-primary);
            text-transform: uppercase;
            margin-bottom: 20px;
            padding-top: 20vh;
            font-size: 2em;
        }
        
        #body_operation_ok #piedpage {
            padding-top: 20vh;
        }
        
        /* 4.4.1 Mot de passe oublie */
            .mdp_1 h1,
            .mdp_2 h1 {
                margin-bottom: 10px;
                color: var(--color-primary);
                text-transform: uppercase;
            }

            .mdp_1 form > * {
                background: #f5f5f5;
                padding: 10px 20px;
                display: block;
            }

            form[action="ws_controle_mdp_4"] p:nth-child(2),
            form[action="ws_controle_mdp_4"] p:nth-child(3) {
                background: #f5f5f5;
                padding: 10px 20px;
                display: inline-block;
            }

            .mdp_1 form label,
            form[action="ws_controle_mdp_4"] label {
                display: block;
                margin-bottom: 5px;
            }

            .mdp_1 form input,
            form[action="ws_controle_mdp_4"] input{
                display: block;
                width: 100%;
                background: #FFF;
            }

            .mdp_1 form p:not(#new_captcha),
            .mdp_2 form p,
            .mdp_2 button,
            form[action="ws_controle_mdp_4"] p  {
                margin: 10px 0;
            }

            .mdp_1 form #new_captcha {
                padding-top: 0;
            }

            .mdp_2 input {
                display: inline-block;
                width: auto;
            }

            .mdp_2 input + span {
                background: #ededed;
                display: inline-block;
                border: 1px solid #ccc;
                padding: 5px 10px;
                line-height: 1.15;
                border-left: 0;
            }

        /* 4.4.2 Formulaire inscription (+ Newsletter) */
            #saisie_contact fieldset,
            #formulaire_inscription fieldset {
                margin-bottom: 0;
                padding-bottom: 0;
            }
            
            #modifier_mdp p.inscription,
            #saisie_contact p.inscription,
            #formulaire_inscription p.inscription {
                background: #f5f5f5;
                padding: 10px 20px;
                display: block;
                margin: 10px 0;
            }

            #saisie_contact p.inscription,
            #formulaire_inscription p.inscription,
            #saisie_contact div.inscription,
            #formulaire_inscription div.inscription {
                margin: 10px 0;
            }

            /* Sur les formulaires administrable */
            /* Pas de background sur l'input submit */
            #saisie_contact p[field_type="submit"], 
            #formulaire_inscription p[field_type="submit"],
            #modifier_mdp p[field_type="submit"],
            p[field_type="submit"],
            #user_information #saisie_contact p.inscription:last-of-type,
            #body_create_account #saisie_contact p.inscription:last-of-type,
            #user_information #modifier_mdp p.inscription:last-of-type,
            #saisie_beneficiaire p.inscription:last-of-type {
                background: none;
                padding: 0;
                margin: 20px 0 0;
                cursor: default;
                text-align: center;
            }

            .checkbox-group > p {
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 5px;
            }

            .checkbox-group > p br {
                display: none;
            }
            
            #saisie_contact .checkbox-group label, 
            #formulaire_inscription .checkbox-group label {
                font-weight: normal;
                display: inline-block;
            }

            /* Marge & Trait au dessus des titres qui suivent d'autres champs */
            #saisie_contact h3 {
                font-size: 22px;
            }

            #saisie_contact p + h3 {
                margin-top: 20px;
                padding-top: 20px;
                position: relative;
            }

            #saisie_contact p + h3:before {
                content: '';
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
                height: 1px;
                background: #ccc;
            }

            /* Marges sous les paragraphes simples */
            #saisie_contact > p:not(.inscription):not(:empty) {
                margin-bottom: 10px;
            }

            /* Liens ayant la class btn */
            #saisie_contact .btn{
                text-align: center;
            }
            #saisie_contact a.btn,
            #saisie_contact button.btn {
                display: inline-block;
                color: var(--body-txt-color);
                border: 1px solid var(--body-txt-color);
                background: none;
                padding: 5px 15px;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: bold;
                cursor: pointer;
                outline: 0;
                margin: 10px 10px 0 0;
                text-align: center;
            }

            #saisie_contact a.btn:hover,
            #saisie_contact button.btn:hover,
            #saisie_contact a.btn:focus,
            #saisie_contact button.btn:focus {
                color: var(--color-primary);
                border: 1px solid var(--color-primary);
            }

            /* Tableau des codes d'envois */
            .table_code_envois {
                margin-bottom: 20px;
                min-height: .01%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table_code_envois table {
                table-layout: fixed;
                white-space: normal;
                background: #FFF;
            }

            .table_code_envois table * {
                font-size: inherit;
            }

            .table_code_envois tbody tr {
                vertical-align: top;
            }

            .col_desinscription,
            .col_code_envoi_desinscription,
            .cell_input_desinscription {
                display: none;
            }

            .tableau_code_envoi td {
                word-break: break-all;
                word-break: break-word;
                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                -o-hyphens: auto;
                hyphens: auto;
            }

            .tableau_code_envoi label {
                font-weight: normal!important;
                min-width: 100px!important;
                font-size: 12px!important;
                margin-bottom: 5px!important;
            }

            #saisie_contact label,
            #formulaire_inscription label,
            #modifier_mdp label{
                display: block;
                margin-bottom: 5px;
            }
            
            #modifier_mdp input[type="password"],
            #saisie_contact input[type="text"],
            #formulaire_inscription input[type="text"],
            #saisie_contact input[type="password"],
            #formulaire_inscription input[type="password"],
            #saisie_contact select,
            #formulaire_inscription select {
                background: #FFF;
                display: block;
                width: 100%;
            }

            /* Upload file */
            #saisie_contact input[type="file"] {
                border: 2px dashed var(--color-primary);
                padding: 5px 10px;
            }

            /* Indications MDP */
            #saisie_contact #rgl_mdp {
                background: none;
                padding: 0;
                margin-top: 20px;
            }

            /* Codes d'envoi */
            #la_code_envoi {
                margin: 0 20px;
                padding-bottom: 0;
            }

            #la_code_envoi legend {
                display: block;
                margin: 10px 0;
                font-weight: bold;
            }

            #la_code_envoi label {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                margin-left: 15px;
                font-weight: normal;
            }

            #la_code_envoi span {
                order: 2;
            }

            #la_code_envoi input {
                order: 1;
            }

            .required-star {
                color: #dc3545;
                font-weight: normal;
            }

            #saisie_contact [required="required"] + label,
            #formulaire_inscription [required="required"] + label,
            #saisie_contact .phone-group.error + label,
            #formulaire_inscription .phone-group.error + label {
                color: #dc3545;
                margin-top: 5px;
            }

            #saisie_contact input.error,
            #formulaire_inscription input.error,
            #saisie_contact select.error,
            #formulaire_inscription select.error  {
                color: #dc3545;
                border-color: #dc3545;
            }


            /* Newsletter valider & annuler */
            #body_create_account .validation p {
                display: inline-block;
            }

    /* 4.5. Mon panier
    ================================================ */
        #zone_panier #tab_basket > p {
            display: none;
        }

        .clear-line, /* Ligne vide */
        #tab_basket .fixed-line /* Utilise auparavant pour fixer la taille des colonnes */{
            display: none;
        }

        /* Attribution */
        .line_contact {
            color: #495057;
            font-weight: 600;
            background-color: #e9ecef!important;
        }

        .line_contact td:before {
            background: #495057;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            color: #e9ecef;
            font-family: FontAwesome;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            vertical-align: baseline;
            margin-right: .8em;
            content: "\f007" !important;
        }

        #tab_basket td.attribution,
        #tab_basket select.attribution {
            max-width: none;
        }

        .visu-cell {
            color: #495057;
            cursor: text;
        }

        .visu-cell:hover {
            color: #495057;
        }

        /* Prix */
        #tab_basket table thead #th_label_prix,
        #tab_basket table .prix,
        .prix_panier_montant,
        #tab_basket .fresa td:nth-child(2),
        #tab_telecharge .prix_telecharge {
            text-align: right;
            min-width: 80px;
        }

        /* Abonnement / Billet / Article / Prestation */
        .header_card,
        .header_billet,
        .header_article,
        .header_prestation,
        .header_pm,
        .header_bon_cadeau  {
            background: #fafafa;
        }

        .header_card td,
        .header_billet td,
        .header_article td,
        .header_prestation td,
        .header_pm td,
        .header_bon_cadeau td {
            color: #737373;
            font-weight: bold;
            font-style: italic;
        }

        /* Frais de reservation */
        #tab_basket .fresa {
            background: #fafafa!important;
            font-weight: bold;
        }

        /* Parties cliquables */
        [data-action="detail"],
        a.visu_place {
            color: var(--color-primary);
            text-decoration: none;
            cursor: pointer;
        }

        a.visu_place i {
            margin-right: 5px;
        }

        .produit_suppression {
            color: #eb212e;
            padding: 5px;
            cursor: pointer;
        }

        /* Footer du tableau */
        #tab_basket table tfoot tr,
        #tab_telecharge tfoot tr {
            font-size: var(--body-txt-size);
            font-weight: bold;
            text-transform: uppercase;
            background: rgba(var(--color-primary-rgb), 0.1);
        }

        /* Bloc Abonnement supprime s'il n'y a qu'un seul abonnement possible */
        #cartouche_description_formule.hidden {
            display: none;
        }

        /* Panier Justificatifs */
        #body_basket .recap_liste .recap_texte + fieldset {
            margin: 0;
            padding: 0;
        }

        #body_basket #zone_justificatifs {
            border: 1px solid var(--color-primary);
            margin-top: 20px;
            padding: 20px;
        }

        #body_basket #zone_justificatifs h4 {
            text-transform: uppercase;
            margin-bottom: 10px;
            color: var(--color-primary);
            font-size: 1.3em;
        }

        #body_basket #zone_justificatifs h4 + p {
            margin-bottom: 0;
        }

        #body_basket #zone_justificatifs a {
            display: inline-block;
            color: var(--color-primary);
            border: 1px solid var(--color-primary);
            background: none;
            padding: 5px 15px;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
            outline: 0;
        }

        #body_basket #zone_justificatifs a:hover,
        #body_basket #zone_justificatifs a:focus {
            color: var(--body-txt-color);
            border-color: var(--body-txt-color);
        }

        /* Mode de retrait */
        #zone_mode_retrait {
            margin: 0;
            padding: 0;
        }

        #panier_mode_retrait_total,
        #panel_panier_dossier_mode_retrait {
            margin-top: 20px;
            background: #f5f5f5;
            padding: 20px;
        }

        #panier_mode_retrait_titre:not(:empty),
        #panel_panier_dossier_mode_retrait .zone_titre:not(:empty) {
            text-transform: uppercase;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 18px;
            color: var(--body-txt-color);
        }

        #panier_zone_retrait_descrip_haut:not(:empty) {
            margin-bottom: 1em;
        }

        #zone_mode_envoi_pan > div:not(:empty) {
            margin-top: 1em; 
        }

        #alerte_panier_mixte {
            margin-bottom: 10px;
            color: #d00;
        }

        #zone_mode_envoi_pan > div p:first-child {
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
            margin-bottom: 10px;
            color: #737373;
        }

        #zone_autre_mode_envoi p:first-child {
            margin-top: 20px;
        }

        p.mode_retrait {
            display: inline-block;
            margin-right: 10px;
        }

        #zone_mode_retrait input,
        #zone_mode_retrait label {
            display: inline-block;
            vertical-align: middle;
        }

        #zone_mode_retrait label{
            margin: 0;
        }

        #panier_zone_retrait_descrip_bas:not(:empty) {
            margin-top: 1em;
        }

        /* CGV */
        #cond_gen_vente {
            margin: 20px 0;
            border: 1px solid #555;
        }

        #cond_gen_vente label {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 15px;
            margin: 0;
            font-size: inherit;
        }

        #cond_gen_vente label a {
            margin: 0 5px;
        }
        
        #cond_gen_vente input {
            order: -1;
        }

        /* Zone bons cadeaux */
        #zone_bon_cadeau {
            padding: 20px 0;
        }

        .mini_title {
            font-size: var(--body-txt-size);
            text-transform: none;
            font-weight: normal;
            color: var(--body-txt-color);
            font-family: var(--body-font);
            display: block;
            margin: 10px 0;
        }

        #zone_panier #zone_bon_cadeau input[type="text"] {
            width: auto;
            display: inline-block;
            padding: var(--btn-padding);
            border: 1px solid;
            vertical-align: bottom;
            margin-right: -5px;
        }

        #zone_panier #zone_bon_cadeau input[type="text"],
        #zone_panier #zone_bon_cadeau button {
            height: 40px;
        }

        #zone_panier #zone_bon_cadeau #chercher_bc {
            font-size: inherit;
        }

        /* Zone rappel des coordonnÃ©es */
        #coordonnees_contact div {
            border-left-color: var(--color-primary);
            background: rgba(var(--color-primary-rgb), 0.13);
            margin-bottom: 20px;
        }

        /* Zone validation / annulation panier */
        #zone_panier .zone_validation {
            text-align: right;
            margin-bottom: 10px;
        }

        #zone_panier .zone_validation .annuler {
            float: left;
        }

        #zone_panier .zone_validation .annuler button {
            color: var(--body-txt-color);
            border-radius: 0;
            margin-top: 7px;
            text-decoration: underline;
            border: 0;
            font-weight: bold;
            background: none;
            font-style: normal;
            padding: 0;
        }

        #zone_panier .zone_validation .texte_span {
            margin-right: 20px;
        }

        #zone_panier .zone_validation #valider {
            background: var(--color-primary);
            border: 1px solid var(--color-primary);
            color: #FFF;
        }

        #zone_panier .zone_validation #valider:hover,
        #zone_panier .zone_validation #valider:focus {
            color: var(--color-primary);
            background: #FFF;
        }

        /* Continuer les achats */
        .explications.content h3,
        #zone_rubrique h3 {
            /*margin-bottom: 20px;*/
        }

        .explications.content div,
        #zone_rubrique div {
            display: inline-block;
            margin: 0 5px 5px 0;
        }

        #validation_contact:not(:empty) {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
            padding: .5rem 1.25rem .75rem;
        }

    /* 4.6. Recapitulatif du paiement
    ================================================ */
        #body_payment_valid #zone_bonjour {
            text-align: left;
        }

        #body_payment_valid #zone_bonjour h2 {
            display: block;
            margin: 40px 0 10px;
        }

        #body_payment_valid fieldset {
            margin: 0;
        }

        /* Tableau */
        #tab_recap .head-line {
            text-align: left;
        }

        #tab_recap .detail-line.billet .clear-cell:last-child {
            display: none;
        }

        /* Prix */
        #tab_recap table .prix,
        #tab_recap table tfoot .prix_recap_montant {
            text-align: right;
            min-width: 80px;
        }
        
        /* Telechargement */
        #tab_recap .atelecharger {
            padding: 5px 10px;
            border: 1px solid var(--color-primary);
            text-decoration: none;
            display: block;
            text-align: center;
        }

        #tab_recap .atelecharger:hover, 
        #tab_recap .atelecharger:focus {
            background: var(--color-primary);
            color: var(--body-txt-color);
        }
        
        /* Ajout d'une icone de telechargement */
        #tab_recap .atelecharger:before {
            content: "\f15b";
            font-family: FontAwesome;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            margin-right: 7px;
        }
        
        /* TOTAL */
        #tab_recap table tfoot tr {
            font-size: var(--body-txt-size);
            font-weight: bold;
            text-transform: uppercase;
            background: rgba(var(--color-primary-rgb), 0.1);
        }

        /* Liens de retour vers le site */
        #body_payment_valid .lien_recap {
            margin-top: 20px;
        }

        #body_payment_valid .lien_recap a {
            display: inline-block;
            color: var(--body-txt-color);
            border: 1px solid var(--body-txt-color);
            background: none;
            padding: 5px 15px;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
            outline: 0;
        }

        #body_payment_valid .lien_recap a:hover, 
        #body_payment_valid .lien_recap a:focus {
            color: var(--color-primary);
            border: 1px solid var(--color-primary);
        }

    /* 4.7. Erreur (404, Maintenance)
    ================================================ */
        #body_error:not(.mdp_1):not(.mdp_2) #contenu {
            text-align: center;
        }

        #body_error:not(.mdp_1):not(.mdp_2) h1 {
            color: var(--color-primary);
            text-transform: none;
            margin-bottom: 20px;
            padding-top: 5vh;
            text-align: left;
        }

    /* 4.8. Accueil
    ================================================ */
        #body_home .texte {
            margin-bottom: 10px;
        }
    
    /* 4.9. CGV
    ================================================ */
        #body_terms_conditions p + h3 {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #EEE;
        }

        #body_terms_conditions br {
            display: block;
            height: 10px;
            content: '';
        }

    /* 4.10. Page de listing (abonnements)
    ================================================ */
        #list_abo .summary {
            padding-right: 60px;
        }
        #list_abo .summary .price {
            position: absolute;
            top: 7px;
            right: 7px;
            color: var(--color-primary);
        }

        /* Transforme en texte la mention "aucun resultat" */
        #zone_result #list_abo h3 {
            font-size: inherit;
            font-weight: normal;
            color: inherit;
            text-transform: inherit;
            font-family: inherit;
        }

    /* 4.11. Fiche simple (d'un abonnement)
    ================================================ */
        /* Choix formule */
        #zone_form_abo_contact div,
        #field_formulaire_abonnement #formulaire_abonnement {
            background: #f5f5f5;
        }

        #zone_form_abo_contact > p {
            margin: 10px 0;
        }

        #zone_creation_formule_contact form > p, 
        #zone_creation_formule_contact form > span,
        #field_formulaire_abonnement .form_group,
        #field_formulaire_abonnement #description_formule  {
            padding: 15px 15px 0;
            display: block;
        }

        #field_formulaire_abonnement #description_formule {
            padding: 15px;
            display: block;
        }

        #field_formulaire_abonnement > div.content {
            text-align: right;
            padding: 15px 0 0;
        }

        #zone_creation_formule_contact label,
        #field_formulaire_abonnement label {
            margin-bottom: 5px;
        }

        #zone_creation_formule_contact select,
        #field_formulaire_abonnement select {
            background: #FFF;
        }

        #zone_creation_formule_contact button {
            margin: 20px 0 10px;
        }

        #abo_chx_qtte {
            margin-right: 10px;
            float: left;
        }

        #abo_chx_qtte label,
        #abo_chx_qtte select {
            display: inline-block;
            width: auto;
        }

        #detail_spectacle_abonnement {
            clear: both;
        }

        /* Abonnement affiche */
        #cartouche_description_formule dl {
            padding: 10px;
            border: 1px solid #CCC;
        }

        #cartouche_description_formule .photo {
            float: left;
            margin-right: 10px;
        }

        #cartouche_description_formule .description_item  {
            color: #555;
            float: right;
            padding: 10px;
            width: 75%;
        }

        #cartouche_description_formule .summary h3 {
            text-transform: uppercase;
            font-size: 16px;
            color: var(--body-txt-color);
            position: relative;
            background: rgba(var(--color-primary-rgb), 0.1);
            padding: 10px;
            padding-right: 50px;
            margin-bottom: 10px;
        }

        #cartouche_description_formule .summary .item_prix {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--color-primary);
        }

        /* Mini description */
        #cartouche_description_formule .description {
            margin: 7px 0;
            font-style: italic;
        }

        /* Choix des representations */
        #zone_select_abo_multiple_h strong,
        #step_by_step strong {
            display: block;
        }

        #zone_select_abo_multiple_h h4,
        #step_by_step h4 {
            font-size: 16px;
            text-transform: none;
            margin-top: 20px;
            background: var(--color-primary);
            display: inline-block;
            padding: 5px 15px;
            color: #FFF;
            text-shadow: 0px 0px 1px rgba(0,0,0,.4);
            box-shadow: 2px 1px 2px rgba(0,0,0,.2);
            -webkit-box-shadow: 2px 1px 2px rgba(0,0,0,.2);
        }

        #zone_select_abo_multiple_h ol,
        #step_by_step ol {
            list-style: none;
            padding: 0;
        }

        #zone_select_abo_multiple_h li,
        #step_by_step li {
            display: block;
            position: relative;
            padding: 10px 0;
            z-index: 1;
            line-height: 32px;
        }

        #zone_select_abo_multiple_h li:before,
        #step_by_step li:before {
            content: '';
            display: block;
            position: absolute;
            top: 15px;
            left: 15px;
            width: 1px;
            z-index: -1;
            height: 100%;
            background: var(--color-primary);
        }

        #zone_select_abo_multiple_h li:after,
        #step_by_step li:after {
            content: '';
            display: block;
            clear: both;
        }

        #zone_select_abo_multiple_h li:last-child:before,
        #step_by_step li:last-child:before {
            content: none;
        }

        #zone_select_abo_multiple_h .step-number,
        #step_by_step .step-number {
            background: #FFF;
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
            font-size: 16px;
            width: 32px;
            line-height: 30px;
            border-radius: 100%;
            font-weight: bold;
            text-align: center;
            margin-right: 15px;
            float: left
        }

        #zone_select_abo_multiple_h .step-text,
        #step_by_step .step-text {
            vertical-align: middle;
            display: inline-block;
            line-height: 1;
            max-width: calc(100% - 60px);
        }

        i.icon-frown {
            background-color: #e74c3c;
            color: transparent;
        }

        i.icon-smile {
            background-color: #2ecc71;
            color: transparent;
        }

        #liste_formule i.icon-frown,
        #liste_formule i.icon-smile {
            margin: 0 0 0 0.75rem;
        }

        /* Tableau des representations */
        #liste_formule{
            background: #FFF;
        }

        #formule_spectacle_abonnement {
            margin-top: 1em;
            background: #FFF;
        }

        #liste_formule td, 
        #liste_formule th {
            padding: .6em .5rem;
        }

        /* Clear HTML*/
        #liste_formule tr.espace_spectacle,
        #liste_formule td[data-description="info-place"],
        #formule_spectacle_abonnement tr.espace_spectacle,
        #formule_spectacle_abonnement td[data-description="info-place"],
        #formule_spectacle_abonnement .info-place,
        #formule_spectacle_abonnement td[data-description="info-jauge"],
        #formule_spectacle_abonnement .info-jauge,
        .formule_espace,
        .resume_line .espace_spectacle,
        .resume_line td[data-description="info-place"],
        .resume_line td[data-description="info-jauge"] {
            display: none;
        }

        .resume_line > td {
            padding: 1em 0;
            border: 0;
        }

        /* Clear header tableau */
        #liste_formule thead tr:nth-child(1) th:first-child {
            padding-left: 3em;
        }

        #liste_formule thead tr:nth-child(1) th {
            border-bottom: 0;
            text-transform: uppercase;
        }

        #liste_formule thead tr:nth-child(2) th {
            padding: 0;
            border: 0;
        }

        /* Select connecte */
        #liste_formule thead tr:nth-child(2) th.select_list_contact {
            border-right: 1px solid;
            padding-left: 0.8rem;
        }

        #liste_formule thead tr select {
            background: #FFF;
            width: calc(100% - .75rem);
            margin-bottom: .75rem;
            display: block;
        }

        /* Lignes */
        #liste_formule .rep_premiere [data-description="nom-spectacle"],
        #liste_formule .zone_spectacle,
        #formule_spectacle_abonnement .rep_premiere [data-description="nom-spectacle"],
        #formule_spectacle_abonnement .zone_spectacle,
        .resume_line .rep_premiere [data-description="nom-spectacle"],
        .resume_line .zone_spectacle {
            font-weight: bold;
        }

        #liste_formule .rep_premiere .abo_spectacle_salle,
        #formule_spectacle_abonnement .rep_premiere .abo_spectacle_salle,
        .resume_line .rep_premiere .abo_spectacle_salle {
            font-weight: normal;
        }

        #formule_spectacle_abonnement .abo_spectacle_city,
        .resume_line .abo_spectacle_city,
        #formule_spectacle_abonnement .abo_spectacle_salle,
        .resume_line .abo_spectacle_salle {
            display: inline-block;
            margin-right: 5px;
        }

        #liste_formule .rep_suivante td.deploie + td,
        #formule_spectacle_abonnement .rep_suivante td.deploie + td,
        .resume_line .rep_suivante td.deploie + td {
            padding-left: 2em;
        }

        #liste_formule td.deploie,
        #formule_spectacle_abonnement td.deploie,
        .resume_line td.deploie {
            padding: 0 0 0 .3em;
            border-right: 0;
            position: relative;
        }

        #liste_formule td.deploie i.rep-multiple,
        #formule_spectacle_abonnement td.deploie i[rep-multiple],
        .resume_line td.deploie i.rep-multiple {
            background: var(--color-primary);
            color: #FFF;
            padding: .6em .3em;
            display: block;
            text-align: center;
            cursor: pointer;
        }

        #liste_formule .rep_suivante td.deploie:before,
        #formule_spectacle_abonnement .rep_suivante td.deploie:before,
        .resume_line .rep_suivante td.deploie:before {
            content: '';
            width: 1px;
            background: var(--color-primary);
            display: block;
            position: absolute;
            top: 0;
            left: .3em;
            bottom: 50%;
            right: 0;
            margin: 0 auto;
        }

        #liste_formule .rep_suivante td.deploie:after,
        #formule_spectacle_abonnement .rep_suivante td.deploie:after,
        .resume_line .rep_suivante td.deploie:after {
            content: '';
            height: 1px;
            width: 75%;
            background: var(--color-primary);
            display: block;
            position: absolute;
            bottom: 50%;
            right: calc(-25% - 2px);
        }

        .resume_line .icon-minus:before {
            content: "\f067";
        }

        .resume_line .icon-plus:before {
            content: "\f068";
        }

        #liste_formule .separator_texte,
        #formule_spectacle_abonnement .separator_texte,
        .resume_line .separator_texte {
            text-transform: capitalize;
        }

        #formule_spectacle_abonnement .dtstart.date + .separator_minus,
        .resume_line .dtstart.date + .separator_minus {
            margin: 0 5px;
        }
        
        #formule_spectacle_abonnement .grille_tarifaire,
        #formule_spectacle_abonnement .dtstart.hour + .separator_minus,
        .resume_line .grille_tarifaire,
        .resume_line .dtstart.hour + .separator_minus {
            display: none;
        }

        #liste_formule .position_gauche {
            float: left;
            margin-right: 20px;
        }

        /* Statut */
        #liste_formule th.cell_statut,
        #liste_formule td.valide,
        #liste_formule td[data-description="info-liste"],
        #liste_formule td[data-description="info_liste_abo"] {
            padding: 0;
            border-right: 0;
            max-width: 0;
        }

        #liste_formule th.cell_statut + th,
        #liste_formule td.valide + td,
        #liste_formule td[data-description="info-liste"] + td,
        #liste_formule td[data-description="info_liste_abo"] + td {
            border-left: 0;
        }

        #liste_formule thead tr:nth-child(1) .cell_statut + th,
        #liste_formule tfoot tr:nth-child(1) .valide + td {
            padding-left: 2.2rem;
        }

        #liste_formule thead tr:nth-child(2) th.cell_outil {
            border-right: 1px solid;
        }

        /* Boutons */
        #liste_formule thead tr:nth-child(3) th:nth-child(1),
        #formule_spectacle_abonnement thead tr th:nth-child(1) {
            border-right: 0;
        }

        #liste_formule thead tr:nth-child(3) th:nth-child(2),
        #formule_spectacle_abonnement thead tr th:nth-child(2) {
            border-left: 0;
        }

        #liste_formule .cell_outil,
        #liste_formule tbody tr td:last-child,
        #liste_formule tfoot tr td:last-child {
            text-align: center;
        }

        #liste_formule .cell_outil i,
        #liste_formule tfoot tr td:last-child i {
            border: 1px solid;
            padding: 7px;
            cursor: pointer;
            display: inline-block;
            background: #FFF;
        }

        #liste_formule .abo_duplicata {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

        #liste_formule .abo_suppression {
            border-color: #eb212e;
            color: #eb212e;
        }

        #liste_formule td[data-description="prix"] {
            border-right: 0;
        }

        #liste_formule td.deploie + td,
        #liste_formule td[data-description="info-jauge"],
        #formule_spectacle_abonnement td.deploie + td,
        .resume_line td.deploie + td {
            border-left: 0;
        }

        #liste_formule td[data-description="info-jauge"] {
            padding: 0;
        }

        /* Places */
        #liste_formule [data-description="prix"],
        #formule_spectacle_abonnement [data-description="prix"],
        .resume_line [data-description="prix"]  {
            color: #eb212e;
        }

        #liste_formule [data-description="prix"] *,
        #formule_spectacle_abonnement [data-description="prix"] *,
        .resume_line [data-description="prix"] * {
            color: var(--body-txt-color);
        }

        #liste_formule .link_show_plan_abo {
            color: var(--color-primary);
            text-decoration: underline;
            cursor: pointer;
            font-weight: bold;
        }

        #liste_formule .link_show_plan_abo:hover,
        #liste_formule .link_show_plan_abo:focus {
            border-color: var(--body-txt-color);
            color: var(--body-txt-color);
        }

        /* Cocher */
        #liste_formule [type="checkbox"],
        #formule_spectacle_abonnement [type="checkbox"],
        .resume_line [type="checkbox"] {
            height: 20px;
            width: 20px;
        }

        #liste_formule [type="checkbox"] {
            display: block;
            margin: 0 auto;
        }

        #formule_spectacle_abonnement [type="checkbox"],
        .resume_line [type="checkbox"] {
            margin-right: 5px;
        }

        #formule_spectacle_abonnement .aborep_select_qtty,
        .resume_line .aborecap_select_qtty {
            display: inline-block;
        }

        #formule_spectacle_abonnement .aborep_select_qtty select,
        .resume_line .aborecap_select_qtty select {
            width: 70px;
        }

        /* Footer tableau */
        #liste_formule tfoot {
            background: rgba(var(--color-primary-rgb), 0.1);
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
        }

        #liste_formule tfoot tr td:first-child {
            padding-left: 1em;
        }

        /* Recapitulatif */
        /* Clear HTML*/
        #liste_formule_recap .espace_entete_tableau,
        #liste_formule_recap .espace_pied_tableau {
            display: none;
        }

        #liste_formule_recap {
            margin: 20px 0;
        }

        #zone_table_format #liste_formule_recap tr[data-tab] {
            cursor: pointer;
        }

        #zone_table_format #liste_formule_recap tr[data-tab]:hover {
            background: #f5f5f5;
        }
        
        /* Prix */
        #liste_formule_recap thead th:nth-child(4),
        #liste_formule_recap .prix {
            text-align: right;
        }

        /* Suppression */
        #liste_formule_recap .abo_suppression {
            cursor: pointer;
            color: #eb212e;
            text-align: center;
        }

        /* Footer tableau */
        #liste_formule_recap tfoot {
            background: rgba(var(--color-primary-rgb), 0.1);
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
        }

        #liste_formule_recap tfoot span:first-child {
            margin-right: 5px;
        }

        #zone_recap_abo_multiple .position_droite {
            text-align: right;
        }

        #zone_liste_recap .position_gauche {
            float: left;
        }

        #zone_liste_recap .position_droite {
            float: right;
        }

    /* 4.12. Page de listing (articles)
    ================================================ */
        /* Produits */
        #list_article li {
            min-height: 100px;
        }

        #list_article .summary {
            position: relative;
            padding-right: 60px;
        }
        #list_article .summary .price {
            position: absolute;
            top: 0;
            right: 0;
            color: var(--color-primary);
        }

        /* Tableau de choix de quantite */
        #list_article table {
            width: auto;
            margin: 0;
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: block;
        }

        #list_article table td, 
        #list_article table th {
            border: 0;
            padding: 0;
            background: none;
            color: var(--body-txt-color);
        }

        #list_article thead .article:not(.quantite),
        #list_article tbody .article:not(.quantite) {
            display: none;
        }

        #list_article thead,
        #list_article tbody {
            display: inline-block;
        }

        #list_article thead {
            margin-right: 10px;
        }

        /* Plus de produit en stock */
        #list_article .non_stock {
            background: #ffecec;
            color: #d00;
            padding: .2rem .5rem;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        /* Boutons panier / retour */
        #body_catalog #zone_envoi_panier div,
        #body_bons_cadeaux #zone_envoi_panier div {
            display: inline-block;
        }
    
    /* 4.13. Fiche simple (d'un article)
    ================================================ */
        /* Titre de l'article */
        #cartouche_article h3,
        #body_article #selection_quantite h3 {
            pointer-events: none;
            font-size: 22px;
            margin: 0 0 10px;
        }

        #cartouche_article h3 i {
            display: none;
        }

        /* Photo */
        #cartouche_article .photo {
            width: 30%;
            float: right;
            text-align: center;
        }

        /* Description */
        #cartouche_article .description {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f5f5f5;
            width: 65%;
        }

        /* Prix table */
        #selection_quantite .prix {
            text-align: right;
        }

        /* Boutons */
        #selection_quantite .position_gauche {
            float: left;
        }

        #selection_quantite .position_droite {
            float: right;
        }

    /* 4.14. Page de listing (parcours)
    ================================================ */
        /* Marges */
        .container-course header,
        .container-course footer {
            margin-left: 25px;
            margin-right: 25px;
        }
        
        /* Titre de la page */
        .container-course h1 {
            color: var(--color-primary);
            font-size: 26px;
            text-transform: uppercase;
            padding: 0;
            font-weight: normal;
            margin-bottom: 10px;
        }
        
        /* Section */
        .section-course ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* 4.14.1 Parcours rempli */
            .section-course [data-state="has-item"] > li:not([data-state="has-item"]) {
                display: none;
            }

            .section-course [data-state="has-item"] [data-state="has-item"] {
                margin-bottom: 25px;
            }

            /* Titre date des representations */
            .section-course h2 {
                color: #4A4A4A;
                font-size: 20px;
                text-transform: uppercase;
                font-weight: normal;
                border-bottom: #ccc 1px solid;
                padding: 25px;
            }
            
            /* Li */
            .section-course .line_item {
                border-bottom: #ccc 1px solid;
                padding: 25px;
            }
            
            /* Item */
            .section-course .line_item a {
                color: inherit!important;
                display: block;
                position: relative;
                text-decoration: none;
            }

            /* Fleche item */
            .section-course .line_item a::after {
                content: "\f04b";
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                position: absolute;
                top: 50%;
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                right: 0;
                color: var(--color-primary);
                font-size: 2em;
            }
            
            /* Titre des rep */
            .section-course h3 {
                text-transform: uppercase;
                margin-bottom: 0;
                color: var(--color-primary);
                font-weight: bold;
            }
            
            /* Heure des rep */
            .section-course .hour {
                font-weight: bold;
                margin-bottom: 5px;
            }
            
            /* Duree & Lieu des rep */
            .section-course .duration,
            .section-course .location {
                display: inline-block;
                margin-right: 10px;
            }

            /* Icones */
            .section-course .duration:before,
            .section-course .location:before {
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 5px;
            }

            .section-course .duration:before {
                content: "\f017";
            }

            .section-course .location:before {
                content: "\f041";
            }

            /* Plus de place */
            .indispo {
                margin-top: 5px;
            }

            /* Places ajoutees au panier */
            .nb-in-basket button {
                padding: 0;
                margin-top: 5px;
                background: none;
                border: 0;
                color: var(--color-primary);
            }

            .nb-in-basket button::before {
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 5px;
                content: "\f07a";            
            }
        
        /* 4.14.2 Parcours vide & Utilisateur non connecte */
            .section-course .list_item[data-state="no-item"] > li:not([data-state="no-item"]),
            .section-course .list_item[data-state="not-connected"] > li:not([data-state="not-connected"]) {
                display: none;
            }

            .section-course .list_item[data-state="no-item"],
            .section-course .list_item[data-state="not-connected"] {
                margin: 25px;
            }

            .section-course .list_item[data-state="no-item"] button,
            .section-course .list_item[data-state="not-connected"] button {
                margin-top: 10px;
            }
    
    /* 4.15. Page de placement automatique
    ================================================ */
        #entete_plan_salle fieldset {
            padding-bottom: 0;
        }

        #entete_plan_salle .btn-return {
            margin-top: 10px;
        }

        #entete_plan_salle .btn-return a {
            color: inherit;
            padding: 5px 0;
            margin-right: 5px;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
            outline: 0;
        }

        #entete_plan_salle .btn-return a:hover,
        #entete_plan_salle .btn-return a:focus {
            color: var(--color-primary);
            background: none;
        }

        #entete_plan_salle .btn-return a::before {
            content: "\f053";
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            text-decoration: inherit;
            -webkit-font-smoothing: antialiased;
            padding-right: 7px;
        }

        #plan_salle .btn-action {
            text-align: center;
        }

        #plan_salle .btn-action .button + .button {
            margin-left: 5px;
            margin-top: 5px;
        }

        #plan_salle #image_place_plan {
            margin-top: 10px;
        }

        #plan_salle #image_place_plan img {
            width: 100%;
            max-width: 100%;
            height: auto;
        }

        #plan_salle #zone_placement_recap {
            margin: 20px 0 10px;
        }

        #plan_salle #tab_placement_recap thead td, 
        #plan_salle #tab_placement_recap thead th,
        #plan_salle #tab_placement_recap > p {
            background: none;
            border: 0;
            padding: 0 0 10px;
            font-size: var(--body-txt-size);
            text-transform: uppercase;
            color: #e30e14;
            font-weight: bold;
        }

        #plan_salle #tab_placement_recap tfoot,
        #plan_salle #tab_placement_recap .line_place{
            display: none;
        }

        #plan_salle #tab_placement_recap tbody {
            background: #FFF;
        }

        #plan_salle #tab_placement_recap .header-placement {
            color: #737373;
            font-size: 16px;
            text-transform: uppercase;
            padding: 0;
            margin: 0 25px 25px 25px;
            font-weight: normal;
            background: #fafafa;
            box-shadow: 0px 1px 4px rgba(0,0,0,.1);
            -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.1);
        }

        /* Version mobile */
        #tab_placement_recap div {
            border: 1px solid #dee2e6;
            padding-bottom: .2em;
        }

        #tab_placement_recap div p {
            padding-left: .6rem;
            padding-right: .6rem;
        }

        #tab_placement_recap div p:first-child {
            text-align: center;
            background: #EEE;
            font-weight: bold;
            padding-top: .2rem;
            padding-bottom: .2rem;
            margin-bottom: 5px;
        }

        #tab_placement_recap div span:not(:empty) {
            display: inline-block;
            margin-right: 5px;
        }

    /* 4.16. Page Invitation
    ================================================ */
        #choix_invitation .choix_date {
            font-weight: bold;
            margin-bottom: 15px;
        }

        #choix_invitation .invitation_liste,
        #choix_invitation .input_liste {
            margin-bottom: 15px;
        }

        #choix_invitation .invitation_date {
            font-weight: bold;
        }

        #choix_invitation .rsi-cell {
            padding: .6em .75rem;
        }

        #choix_invitation .invitation_liste input[type="checkbox"], 
        #choix_invitation .invitation_liste input[type="radio"] {
            margin: 0;
            vertical-align: baseline;
        }

        #choix_invitation .zone_commentaire label {
            display: block;
            margin: 0 0 10px;
            font-weight: normal;
        }

        #choix_invitation .position_droite {
            margin-top: 20px;
            text-align: center;
        }

/* ====================================================
   5. MEDIAS QUERIES
==================================================== */
    /* 5.1. Small Desktop (de 1230 a 961px)
    ================================================ */
        @media screen and (max-width: 1230px) {           
            /* Header */
            #bandeau:before {
                width: calc(100vw);
                left: -20px;
            }

            /* Calendrier listing spectacle */
            #calendar_event table td {
                padding: .6em 0;
            }

            /* Filtre de recherche */
            #calendar_event,
            #field_search {
                width: 30%;
            }

            #field_search tr {
                margin-bottom: 5px;
            }

            #field_search button {
                margin: 0;
            }

            /* Zone validation / annulation panier */
            #zone_panier .zone_validation .texte_span {
                max-width: 50%;
                display: inline-block;
                vertical-align: top
            }

            /* Amis */
            #connexion_compte_beneficiaire {
                display: block;
            }

            #connexion_compte_beneficiaire .position_droite {
                margin-top: 5px;
            }

            #connexion_compte_beneficiaire .position_droite p {
                display: inline-block;
                margin-right: 10px;
            }
        }

    /* 5.2. Big Tablette (de 960px a 769px)
    ================================================ */
        @media screen and (max-width: 960px) {
            #bandeau {
                position: relative;
                flex-wrap: wrap;
                -webkit-flex-direction: row;
                -moz-flex-direction: row;
                -ms-flex-direction: row;
                -o-flex-direction: row;
                flex-direction: row;
                justify-content: flex-end;
            }

            .my_account:not(#body_mon_compte) #bandeau {
                justify-content: space-between;
            }

            .my_account:not(#body_mon_compte) #logo1,
            .my_account #logo1,
            #logo1 {
                text-align: left;
                width: 100%;
                padding: 0;
                margin: 0!important;
                order: 1;
            }

            #logo1 {
                margin: 0 auto!important;
                padding: 0!important;
                right: 0;
                pointer-events: none;
            }

            #logo1 img {
                margin: 0 auto;
            }

            #toggleMenu, #toggle_account {
                display: block!important;
                background: var(--color-primary)!important;
                color: #FFF!important;
                font-size: 18px!important;
                margin: 0!important;
            }

            #toggle_account *, #toggleMenu:before {
                color: inherit!important;
            }

            #toggleMenu {
                text-decoration: none;
                font-size: 2em;
                height: 40px;
                width: 40px;
                order: 3;
            }

            #toggleMenu:before {
                content: "\f0c9";
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                position: absolute;
                top: 50%;
                right: 0;
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            #toggle_account {
                order: 2;             
            }

            #tabnav {
                display: none;
                position: absolute;
                top: 100%;
                left: 0!important;
                width: 100vw;
                background: #f7f7f7;
                z-index: 9;
                margin: 0;
                text-align: left;
            }

            #tabnav li {
                display: block;
                margin: 0;
                border-bottom: 1px solid #d0d0d0;
                border-left: 0!important;
            }

            #tabnav li.menu-item a::after, #tabnav li a::after {
                content: none;
            }

            #page {
                overflow: visible;
            }

            #bandeau::after,
            #piedpage::after {
                width: 100%;
                left: 0;
            }
            
            /* Calendrier a l'affiche */
            #alaffiche ul,
            #body_events_listing #zone_result,
            #calendar_event,
            #field_search {
                width: auto;
                float: none;
            }

            #field_thumbnail fieldset {
                margin-bottom: 0;
                padding-bottom: 0;
            }

            #search_all_p {
                width: 100%;
                margin-top: 20px;
            }

            /* Filtre de recherche */
            #field_search {
                padding: 15px;
                margin: 20px 0;
            }

            #field_search i {
                line-height: 20px;
            }

            #field_search .table_search {
                margin-bottom: 10px;
            }

            #field_search button:first-child {
                margin-bottom: 10px;
            }

            /* Fiche d'un spectacle numerote */
            .description_bloc li {
                width: calc(33.33% - 20px);
                display: inline-block;
                vertical-align: top;
            }
            .description_bloc .salle_complet_vue {
                display: block;
                width: calc(100% - 20px);
                margin-bottom: 10px;
            }

            .description_bloc li > div > img {
                max-height: 100%;
            }

            /* Panier */
            #tab_basket table td,
            #tab_basket table th {
                padding: .6em;
            }

            #tab_basket select {
                padding: 5px;
            }

            /* Compte */
            .tab_content {
                padding: 0;
            }
        }

    /* 5.3. Small Tablette (de 768px a 501px)
    ================================================ */
        @media screen and (max-width: 768px) {
            /* Header */
            #bandeau {
                margin: 0 0 25px!important;
            }

            /* Zone bonjour */
            #zone_bonjour {
                margin-bottom: 10px;
            }

            #zone_bonjour h2 span {
                display: inline-block;
                vertical-align: middle;
            }

            #zone_bonjour button {
                position: relative;
                overflow: hidden;
                text-indent: -9999px;
            }

            #zone_bonjour button:before {
                text-indent: 0;
                float: left;
                line-height: 20px;
                margin: 0;
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                display: inline;
                width: auto;
                height: auto;
                vertical-align: baseline;
                background-image: none;
                background-position: 0% 0%;
                background-repeat: repeat;
                content: "\f011";
            }

            #tempsrestant {
                text-align: center;
                padding: 5px 7px;
            }

            #tempsrestant .tempslimit {
                display: block;
                margin-bottom: 3px
            }

            /* Mes amis */
            #field_mes_contacts h3 {
                margin-right: 0;
            }

            #connexion_compte_beneficiaire label {
                margin-bottom: 5px;
                width: 30%;
                margin-right: 0;
            }

            #connexion_compte_beneficiaire input {
                width: 70%;
                margin-right: 0;
            }
            
            #connexion_compte_beneficiaire .position_droite p {
                margin-top: 10px;
            }

            /* Page de listing ~> Bouton tout lister */
            #search_all_p {
                text-align: center;
                width: 100%;
                margin-top: 20px;
            }

            /* Page de listing ~> Filtre de recherche */
            #field_search {
                width: 100%;
                float: none;
                margin-top: 30px;
            }

            #zone_search {
                display: none;
            }

            #field_search button,
            #field_search button:first-child {
                margin: 0 3px;
            }

            /* Page de listing ~> Resultats de recherche */
            #cartouche_spectacle .datetime {
                position: static;
                text-align: left;
                margin-top: 10px;
            }

            #cartouche_spectacle .photo,
            #cartouche_article .photo {
                float: none;
                width: 100%;
                margin-top: 10px;
            }

            #cartouche_spectacle .description,
            #cartouche_article .description {
                width: 100%;
            }
            
            /* Fiche simple ~> Calendrier des representations  */
            #calendar_representation table td, 
            #calendar_representation table th {
                padding: .6em 0;
            }
        
            /* Fiche simple ~> Selection des places */
            #calendar_representation {
                margin-bottom: 10px;
            }

            /* Fiche d'un spectacle numerote */
            .description_bloc li svg {
                position: absolute;
                left: 50%; 
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%);
                margin: 0 auto;
            }

            #choix_places #plan_salle_svg,
            #plan_reduit #plan_reduit_svg {
                padding-top: 100px;
            }

            #choix_places #compass,
            #plan_reduit #plan_reduit_compass {
                width: 100%;
                border: 1px solid #ddd;
                background: #f5f5f5;
            }

            /* Page de listing des articles */
            #field_zone_article_famille, 
            #list_article,
            #list_bons_cadeaux {
                margin: 0;
            }
            
            #field_zone_article_famille ul li,
            #list_article ul li,
            #list_bons_cadeaux ul li {
                -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
                margin: 0 0 20px;
            }

            #field_zone_article_famille li > a {
                margin: 0;
            }

            #list_article .article.prix,
            #selection_quantite .article.prix {
                position: static;
                margin-right: 0;
                font-size: var(--body-txt-size);
                line-height: inherit;
                min-width: 80px;
            }

            /* Panier ~> Les header et div de contenu */
            .line_contact, 
            .zone_carte_ > *, 
            .zone_billet_ > *, 
            .zone_article_ > *, 
            .zone_prestation_ > *,
            .zone_bon_cadeau > * {
                padding: .6em .75rem;
            }
            
            /* Panier ~> Attribution (icone user) */
            .line_contact:before {
                background: #495057;
                height: 20px;
                width: 20px;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                text-indent: 1px;
                color: #e9ecef;
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                vertical-align: baseline;
                background-image: none;
                background-position: 0% 0%;
                background-repeat: repeat;
                margin-right: .8em;
                content: "\f007" !important;
            }
            
            /* Panier ~> Div de contenu */
            .zone_carte_,
            .zone_billet_,
            .zone_article_,
            .zone_prestation_,
            .zone_bon_cadeau {
                border-left: 1px solid #dee2e6;
                border-right: 1px solid #dee2e6;
            }
            
            /* Panier ~> Header (Type de produit) */
            .header_card,
            .header_billet,
            .header_article,
            .header_prestation,
            .header_bon_cadeau {
                color: #737373;
                font-weight: bold;
                font-style: italic;
            }
            
            /* Panier ~> Header (Nombre de produit) */
            .header_card .item_nb_cartes,
            .header_billet .item_nb_billet,
            .header_article .item_nb_article,
            .header_prestation .item_nb_prestation,
            .header_bon_cadeau .item_nb_bon_cadeau {
                display: block;
                float: right;
            }
            
            /* Panier ~> Lignes du produit */
            #tab_basket [data-type="abonnement"],
            #tab_basket [data-type="article"],
            #tab_basket [data-type="billet"],
            #tab_basket [data-type="prestation"],
            #tab_basket [data-type="bon_cadeau"] {
                border-bottom: 1px solid #dee2e6;
                position: relative;
            }

            /* Panier ~> Contenu du produit */
            #tab_basket [data-produit] p {
                margin-bottom: .4em;
            }

            /* Panier ~> Titre du produit */
            #tab_basket [data-produit] .representation {
                margin-top: .6em; /* S'aligne avec le prix */
                font-weight: bold;
                max-width: 75%; /* Laisse place au prix */
            }

            /* Panier ~> Titre prestation & Article */
            #tab_basket [data-produit] .prestation.representation,
            #tab_basket [data-produit] .article.representation,
            #tab_basket [data-produit] .bon_cadeau.representation  {
                max-width: 60%;
            }

            /* Panier ~> Prix du produit */
            .billet_prix,
            .article.prix,
            .prestation.prix,
            .bon_cadeau.prix {
                position: absolute;
                top: 0.5em;
                right: .8em;
                margin-right: 50px;
                font-size: 16px;
                line-height: 30px;
            }

            /* Panier ~> Date & Heure du produit */
            .billet.date_heure span {
                margin-right: 5px;
            }
            
            /* Panier ~> Boutons Abonnement, visualisation place & suppression */
            #tab_basket [data-action],
            #tab_basket a.visu_place,
            #tab_basket .produit_suppression {
                padding: 7px 10px;
                display: inline-block;
                border: 1px solid var(--color-primary);
                border-radius: 5px;
                line-height: 1;
            }

            [data-produit] .suppression,
            [data-type="billet"] .produit_suppression {
                position: absolute;
                top: .6em;
                right: .75rem;
            }

            [data-produit][data-type="article"] .suppression,
            [data-produit][data-type="bon_cadeau"] .suppression {
                float: right;
                position: static;
            }
    
            #tab_basket .produit_suppression {
                border-color: #eb212e;
            }
            
            /* Panier ~> Ligne de l'abonnement (hors billets) */
            .header-abonnement {
                position: relative;
            }

            .header_card + .header-abonnement {
                padding-bottom: 0;
            }

            .header-abonnement [data-produit] {
                position: relative;
            }

            #tab_basket [data-type="abonnement"]:last-child {
                border-bottom: 0;
            }
            
            /* Panier ~> Titre de l'abonnement */            
            #tab_basket .header-abonnement [data-action].libelle {
                max-width: 65%;
                position: relative;
                padding-right: 30px;
            }
 
            .header-abonnement .libelle i {
                position: absolute;
                right: 10px;
                top: 50%;
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }
            
            /* Panier ~> Prix de l'abonnement */
            .header-abonnement .prix {
                display: inline-block;
                float: right;
                margin-right: 50px;
                line-height: 30px;
                font-size: 16px;
            }
            
            /* Panier ~> Suppression de l'abonnement */
            .header-abonnement [data-produit] .suppression {
                top: 0;
                right: 0;
            }
            
            /* Panier ~> Billets de l'abonnement */
            #tab_basket [data-produit][data-type="abonnement"] {
                margin: 0 15px;
            }

            /* Panier ~> Prix des billets de l'abonnement */
            #tab_basket [data-produit][data-type="abonnement"] .billet_prix {
                margin-right: 37px;
            }

            /* Panier ~> Contenu des prestations & articles */
            #tab_basket [data-produit] .detail.prestation,
            #tab_basket [data-produit] .detail.article,
            #tab_basket [data-produit] .detail.bon_cadeau {
                display: inline-block;
                vertical-align: top;
            }

            /* Panier ~> Quantite de prestation & article */
            #tab_basket [data-produit] .quantite {
                font-weight: bold;
                margin-right: 5px;
                margin-top: .6em;
            }

            /* Panier ~> Frais de reservation */
            #tab_basket .frais_resa_label {
                position: relative;
                background: #fafafa;
                font-weight: bold;
                padding: .6em 50px .6em .75rem;
                border-left: 1px solid #dee2e6;
                border-right: 1px solid #dee2e6;
            }

            #tab_basket .frais_resa_detail {
                font-weight: normal;
            }

            #tab_basket .frais_resa_prix {
                position: absolute;
                top: .6em;
                right: .75rem;
                font-weight: normal;
            }

            /* Panier ~> TOTAL */
            #tab_basket .montant_total {
                font-weight: bold;
                text-transform: uppercase;
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: .6em .75rem;
                border: 1px solid #dee2e6;
            }

            .prix_panier_montant {
                float: right;
            }

            .prix_panier_montant .montant_ttc {
                margin-left: 5px;
            }

            /* Panier ~> Boutons vider / valider */
            #zone_panier .zone_validation {
                text-align: left;
                position: relative;
            }

            #zone_panier .zone_validation .annuler {
                float: none;
                display: block;
            }

            #zone_panier .zone_validation .texte_span {
                max-width: 100%;
                display: block;
                margin: 10px 0;
            }
            
            #zone_panier .zone_validation .valider {
                position: absolute;
                top: 0;
                right: 0;
            }

            #validation_contact:not(:empty) {
                margin-top: 2em;
            }

            /* Mon compte */
            #selection_contact #zone_saisie h3 {
                margin-right: 0;
            }

            /* Mon compte ~> Commandes */
            .bloc_telecharge .explication,
            .firefox-indications {
                margin-bottom: 20px;
            }
            
            /* Mon compte ~> Tableau des commandes : header */
            #zone_tab_telecharge .head-line {
                display: block;
                padding: .75rem;
                background: var(--body-txt-color);
                color: #FFF;
                font-weight: bold;
                text-align: center;
            }

            /* Mon compte ~> Tableau des commandes : ligne */
            #zone_tab_telecharge ul {
                margin: 0;
                padding: 0;
            }

            #zone_tab_telecharge > p,
            #zone_tab_telecharge > ul {
                border: 1px solid #dddddd;
            }
            
            /* Mon compte ~> Tableau des commandes : numero de la commande */
            #zone_tab_telecharge .line_commande {
                display: none;
            }
            
            /* Mon compte ~> Tableau des commandes : bloc */
            #zone_tab_telecharge .ptelecharger {
                padding: .6em .75rem;
                display: block;
                border-bottom: 1px solid #dee2e6;        
            }

            /* Mon compte ~> Tableau des commandes : zone cliquable */
            #zone_tab_telecharge .atelecharger {
                position: relative;
                background: rgba(var(--color-primary-rgb), 0.1);
                border: 1px solid var(--color-primary);
                border-radius: 5px;
                padding: 10px 10px 5px;
                color: var(--body-txt-color);
                display: block;
            }
            
            /* Mon compte ~> Tableau des commandes : icone de telechargement */
            #zone_tab_telecharge .atelecharger:before {
                content: "\f019";
                color: var(--body-txt-color);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                vertical-align: baseline;
                background-image: none;
                background-position: 0% 0%;
                background-repeat: repeat;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 2em;
            }

            /* Mon compte ~> Tableau des commandes : Contenu du produit */
            #zone_tab_telecharge li p {
                margin-bottom: .4em;
            }

            /* Mon compte ~> Tableau des commandes : Titre du produit */
            #zone_tab_telecharge .spectacle_telecharge {
                font-weight: bold;
            }

            /* Mon compte ~> Tableau des commandes : prix */
            .prix_telecharge {
                position: relative;
            }

            .prix_telecharge .libelle_telecharge {
                display: block;
                max-width: 75%; /* Laisse place au prix */
            }

            .prix_telecharge .prix {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 16px;
                line-height: 16px;
            }

            .prix_telecharge .prix {
                font-size: 16px;
            } 

            /* Mon compte ~> /* Tableau des codes d'envois */
            .table_code_envois,
            #tab_tarifs,
            #zone_select_abo_multiple {
                overflow-x: auto;
            }

            .table_code_envois table,
            #tab_tarifs table,
            #zone_select_abo_multiple table {
                min-width: 100%;
                max-width: none;
                width: auto;
                margin: 0 0 5px;
            }

            .tableau_code_envoi th, 
            .tableau_code_envoi td {
                min-width: 140px;
            }

            .tableau_code_envoi::-webkit-scrollbar,
            #tab_tarifs::-webkit-scrollbar,
            #zone_select_abo_multiple::-webkit-scrollbar {
                width: 100%;
                height: 10px;
                border: 1px solid #DDD;
                border-radius: 8px;
                box-shadow: none;
                -webkit-box-shadow: none;
            }
            .tableau_code_envoi::-webkit-scrollbar-thumb,
            #tab_tarifs::-webkit-scrollbar-thumb,
            #zone_select_abo_multiple::-webkit-scrollbar-thumb {
                border-radius: 8px;
                background-color: #555;
                box-shadow: none;
                -webkit-box-shadow: none;
            } 

            .tableau_code_envoi::-webkit-scrollbar-track,
            #tab_tarifs::-webkit-scrollbar-track,
            #zone_select_abo_multiple::-webkit-scrollbar-track {
                border-radius: 8px;
                box-shadow: none;
                -webkit-box-shadow: none;
            }

            /* 4.3.1 Justificatifs */
            #body_justificatifs .item_justificatif {
                -ms-flex-preferred-size: calc(50% - 1.4em);
                flex-basis: calc(50% - 1.4em);
            }

            /* Recapitulatif */
            #body_payment_valid #zone_bonjour h2 {
                margin: 20px 0 10px;
            }

            /* Recapitulatif ~> Tableau des commandes : header */
            #tab_recap .fixed-line {
                display: block;
                padding: .75rem;
                background: var(--body-txt-color);
                color: #FFF;
                font-weight: bold;
                text-align: center;
            }
            
            /* Recapitulatif ~> Tableau des commandes : attribution */
            #tab_recap .line_contact {
                border: 1px solid #dddddd;
            }
            
            /* Recapitulatif ~> Lignes du produit */
            #tab_recap [data-type="abonnement"],
            #tab_recap [data-type="article"],
            #tab_recap [data-type="billet"],
            #tab_recap [data-type="prestation"] {
                border-bottom: 1px solid #dee2e6;
                position: relative;
            }

            /* Recapitulatif ~> Contenu du produit */
            #tab_recap [data-produit] p {
                margin-bottom: .4em;
            }
            
            /* Recapitulatif ~> Titre du produit */
            #tab_recap [data-produit] .representation {
                margin-top: .6em; /* S'aligne avec le prix */
                font-weight: bold;
                max-width: 75%; /* Laisse place au prix */
            }

            /* Recapitulatif ~> Titre prestation & Article */
            #tab_recap [data-produit] .prestation.representation,
            #tab_recap [data-produit] .article.representation {
                max-width: 60%; /* Laisse place au prix */
            }

            /* Recapitulatif ~> prix */
            #tab_recap .detail.prix .billet_prix,
            #tab_recap .prestation.prix {
                margin: 0;
            }

            /* Recapitulatif ~> Boutons telechargement */
            #tab_recap .atelecharger {
                padding: 7px 10px;
                display: inline-block;
                border: 1px solid var(--color-primary);
                border-radius: 5px;
                line-height: 1;
            }


            /* Recapitulatif ~> Contenu des prestations & articles */
            #tab_recap [data-produit] .detail.prestation,
            #tab_recap [data-produit] .detail.article {
                display: inline-block;
                vertical-align: top;
            }

            /* Recapitulatif ~> Quantite de prestation & article */
            #tab_recap [data-produit] .quantite {
                font-weight: bold;
                margin-right: 5px;
                margin-top: .6em;
            }

            /* Recapitulatif ~> TOTAL */
            #tab_recap .montant_total {
                font-weight: bold;
                text-transform: uppercase;
                background: rgba(var(--color-primary-rgb), 0.1);
                padding: .6em .75rem;
                border: 1px solid #dee2e6;
            }
        }

    /* 5.4. Smartphone (de 500px a 320px)
    ================================================ */
        @media screen and (max-width: 500px) {
            body,
            button, .button, #body_error #contenu a, 
            #toggle_zone_horaire, #zone_bonjour h2 a, 
            #body_justificatifs .btn.btn-upload, .zone_filter .btn-filter {
                font-size: 14px;
            }

            /* Titres */ 
            h1,
            #titre h3, /* homepage */
            #liste_spectacles > h3,
            .zone_titre,
            .head_today h3,
            #zone_result h3,
            .gc_container h2,
            #zone_formulaire_abonnement h3,
            #zone_creation_formule_contact h3,
            #body_terms_conditions #contenu > h2,
            #cartouche_representation .zone_titre,
            #field_selection_tarifs h3,
            #zone_saisie h3,
            #liste_spectacles > h3 {
                font-size: calc(var(--h1-txt-size) - 4px);
                line-height: calc(var(--h1-txt-size) - 4px);
            }

            h2, h3,
            #zone_representations h3,
            #cartouche_representation h3,
            #panier_mode_retrait_titre:not(:empty),
            #zone_select_abo_multiple h3,
            #zone_recap_abo_multiple h3,
            #zone_recap h3,
            #body_terms_conditions h3,
            #zone_bon_cadeau h3,
            .title_account {
                font-size: calc(var(--h2-txt-size) - 4px);
                line-height: calc(var(--h2-txt-size) - 4px);
            } 

            #detail_identification h4,
            #zone_representations h3,
            .title_account,
            .title_section,
            div#zone_code_promo h3,
            #zone_bon_cadeau .zone_titre,
            .title_account,
            #body_mon_compte .title_section, 
            #body_mon_compte .icon_dashboard {
                font-size: calc(var(--h3-txt-size) - 4px);
                line-height: calc(var(--h3-txt-size) - 4px);
            }

            /* Padding des formulaires */
            #saisie_beneficiaire p.inscription,
            #saisie_contact p.inscription,
            #formulaire_inscription p.inscription,
            #detail_identification .position_gauche, 
            #detail_identification .position_droite,
            .mdp_1 form > * {
                padding: 10px 15px;
            }

            /* Boutons sur toute la largeur */
            .explications.content div, /* Continuer les achats */
            #zone_rubrique div,
            #body_catalog #zone_envoi_panier div, /* Listing article */
            #body_bons_cadeaux #zone_envoi_panier div, /* Listing article */
            #body_create_account .validation p,
            #connexion_compte_beneficiaire .position_droite p, /* Mes amis */
            #zone_action_beneficiaire div, /* Creer un ami */
            #zone_action_contact div, /* Modification du compte */
            #saisie_contact .btn, /* Modification du compte */
            #detail_identification /* Identification */,
            .ui-dialog-buttonpane button {
                display: block;
                margin-right: 0;
            }

            #selection_quantite .position_gauche, /* Fiche article */
            #selection_quantite .position_droite {
                float: none;
                margin-bottom: 10px;
            }

            #body_create_account .validation p,
            #body_catalog #zone_envoi_panier div,
            #body_bons_cadeaux #zone_envoi_panier div,
            .ui-dialog-buttonpane button {
                margin-bottom: 10px;
            }
            
            #body_home #news_letter a,
            .explications.content button,
            #zone_panier .zone_validation #valider,
            #zone_rubrique button,
            #body_create_account button,
            #body_catalog #zone_envoi_panier button,
            #body_bons_cadeaux #zone_envoi_panier button,
            #user_information button,
            #selection_quantite button,
            #field_mes_contacts button,
            #zone_action_beneficiaire button,
            #zone_action_contact button,
            #detail_identification button,
            #body_payment_valid .lien_recap a,
            #plan_salle .btn-action .button,
            .ui-dialog-buttonpane button {
                width: 100%;
            }

            #plan_salle .btn-action .button + .button {
                margin-left: 0;
            }

            .show_zone, .rsi-pointer i {
                display: none;
            }

            button, .button {
                padding: .3rem 1rem;
            }

            table,
            #choix_tarifs table {
                font-size: 12px;
                table-layout: auto;
            }

            table thead td, table thead th {
                font-weight: normal;
                padding: .2rem .4rem;
                vertical-align: top;
            }

            table td, table th {
                padding: .2rem .4rem;
            }

            #choix_tarifs tr.view {
                font-weight: normal;
            }

            #choix_tarifs tr.view td {
                padding: .5em .2rem;
            }

            /* Zone bonjour */
            #zone_bonjour {
                text-align: left;
                margin-bottom: 20px;
            }

            #zone_bonjour h2 {
                display: block;
                line-height: 32px;
                margin: 0 0 10px 0;
            }

            #zone_bonjour h2 * {
                line-height: 1;
            }

            #zone_bonjour #deconnexion {
                float: right;
            }

            #zone_bonjour h2 button {
                margin: 0;
            }

            #tempsrestant {
                display: block;
                text-align: left;
            }

            #tempsrestant .tempslimit {
                display: inline-block;
                margin-bottom: 0;
            }

            /* Code promo */
            #detail_code_promo {
                position: relative;
                padding-top: 30px;
            }

            #zone_code_promo label {
                display: block;
                position: absolute;
                top: 5px;
                left: 0;
                right: 0;
            }

            /* Mes amis */
            #connexion_compte_beneficiaire label,
            #connexion_compte_beneficiaire input {
                width: 100%;
            }
            
            /* Listing des articles */
            #list_article img {
                float: none;
                margin: 10px auto 0;
                display: block;
            }
            
            #list_article .summary {
                padding-right: 0;
            }

            #list_article .summary .price {
                display: block;
            }

            #list_article table {
                width: 100%;
                margin: 0;
            }

            #list_article table td, 
            #list_article table th {
                border: 0;
            }

            #list_article table td:nth-child(2), 
            #list_article table th:nth-child(2) {
                border-left: 1px solid #dee2e6;
                border-right: 1px solid #dee2e6;
            }

            #list_article select,
            #selection_quantite select {
                padding: 5px 0;
            }

            #list_article .non_stock {
                float: none;
                text-align: center;
            }
            
            /* Fiche simple (d'un spectacle) ~> Selection des places */
            #choix_tarifs select {
                padding: 5px 0;
            }

            #line_recap > span,
            #line_recap_cartouche_place > span {
                display: block;
            }

            #field_selection_tarifs .position_gauche,
            #field_selection_tarifs .position_droite,
            #recap_places .posistion_droite #envoi_panier_svg {
                float: none;
                text-align: center;
            }

            #field_selection_tarifs .position_gauche,
            #recap_places .posistion_droite #envoi_panier_svg {
                margin-bottom: 15px;
            }

            #recap_places .posistion_droite button {
                width: 100%;
            }

            /* Mon panier ~> Acces aux justificatifs */
            #body_basket #acces_justificatifs a {
                width: 100%;
                text-align: center;
            } 

            /* Mon compte ~> Commandes */
            .bloc_telecharge ul {
                padding-left: 30px;
            }

            .bloc_telecharge > ul li {
                margin-bottom: 10px;
            }

            /* Indications firefox */
            .firefox-indications:before {
                content: "\f071";
                color: var(--color-primary);
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                margin-right: 7px;
            }

            /* 4.3.1 Justificatifs */
            #body_justificatifs .item_justificatif {
                -ms-flex-preferred-size: calc(100% - 1.4em);
                flex-basis: calc(100% - 1.4em);
                text-align: center;
            }

            #body_justificatifs .link.link-to-commande {
                padding: 5px 15px;
            }

            /* Identification */
            #detail_identification .position_gauche,
            #detail_identification .position_droite {
                margin: 0 0 10px;
            }

            /* Mot de passe oublie */
            .mdp_1 button,
            .mdp_2 button,
            .mdp_1 form #new_captcha a {
                width: 100%;
            }

            #captcha {
                text-align: center;
            }

            /* Mon panier ~> Mode de retrait */
            p.mode_retrait + p.mode_retrait {
                margin-top: 10px;
            }

            /* Recapitulatif */
            #body_payment_valid #zone_bonjour h2 {
                line-height: 1;
            }

            p.mode_retrait {
                margin-right: 0;
                display: block;
            }

            /* Accueil */
            #body_home #news_letter {
                margin-top: 20px;
            }

            #piedpage ul {
                text-align: center;
            }

            #piedpage li {
                display: block;
            }

            #piedpage li + li:before {
                content: none;
            }
        }

/* AWR : provisoire */
.unmask .icon-eye-open, 
.unmask .icon-eye-close {
    top: 50%;
    transform: translateY(-50%);
}

/* DEMANDES CLIENT
================================================ */
/* Masquer zone code promo sur listing spectacles */
#body_events_listing #zone_code_promo,
/* Masquer descriptif, catÃ©gories & ville sur listing spectacles */
#list_event .description_item .description,
#list_event .description_item .ville_salle, 
#list_event .description_item .category,
/* Masquer descriptif sur listing abonnements */
#list_abo .description,
/* Demande de ELODY SABy le 29/11/19 */
#list_article .famille, 
#list_article .summary .price,
/* Masque le titre de la page Catalogue abonnements */
#body_catalogue_abonnement #zone_result h3 {
    display: none;
}

/* Fix : des liens sont insÃ©rÃ©s dans la description des abonnements */
#list_abo li > a {
    display: inline-block;
    height: auto;
}

/* demande action 302 369 */
#body_basket tbody .placement {
    color: var(--color-primary);
    font-weight: bold;
}

/* Demande de ELODY SABy le 29/11/19 */
#list_article .summary {
    padding: 0;
}

#list_article .bons_cadeaux.date_validitee::before {
    content: "Valable jusqu'au";
    margin-right: .3rem;
}

/**************************    30/08/2018 action 221 182  *********************/
#body_abonnement_multiple[data-type-carte='Adherents'] #zone_select_abo_multiple h3, #body_abonnement_multiple[data-type-carte='Adherents'] p#zone_select_abo_multiple_h {
    display: none
}

/**************************    19/10/2018 action 224 283  *********************/
#body_proc_adh_insc[data-abonnement="6949"] #abo_chx_spectacle {
    display: none
}

#body_abonnement_multiple[data-abonnement="7178"] #zone_select_abo_multiple {
    display: none !important
}

/**************************    30/08/2019 action 241 008  *********************/
.description h3 a {
    color: var(--color-primary);
}

/**************************    23/09/2019 action 242 504  *********************/
body[data-abonnement="7205"] #abo_chx_qtte {
    display: none !important
}

body[data-abonnement="7205"] #abo_chx_spectacle {
    display: none !important
}

/**************************    Demande d'Elodie SABY janvier 2020  *********************/
#zone_autre_mode_envoi input[value="10000134"], 
#zone_autre_mode_envoi input[value="10000134"] + label, 
#zone_mode_envoi_panier_tot input[value="10000134"], 
#zone_mode_envoi_panier_tot input[value="10000134"] + label {
    display: none!important;
}

/**************************    30/06/2020 action 253 960  *********************/
body[data-abonnement="7350"] #abo_chx_spectacle {
    display: none !important
}

body[data-abonnement="7340"] #zone_select_abo_multiple {
    display: none !important
}

/**************************    12/05/2021 action 267 991  *********************/
body[data-abonnement="7740"] .position_gauche, 
body[data-abonnement="7528"] .position_gauche, 
body[data-abonnement="7350"] .position_gauche {
    display: none !important;
}

body[data-abonnement="7740"] .position_droite, 
body[data-abonnement="7528"] .position_droite, 
body[data-abonnement="7350"] .position_droite {
    margin-top: 10px;
}

body[data-abonnement="7527"] #zone_select_abo_multiple {
    display: none !important
}

td[data-spect-oblg="true"] {
    color: #dc3545!important
}

td[data-spect-oblg="true"] p.abo_spectacle_name::before {
    content: '*';
    display: inline-block;
    color: #dc3545!important;
    margin-right: 5px;
}

/**************************    30/11/2021 action 279 362  *********************/
body[data-abonnement="7740"] #abo_chx_spectacle, body[data-abonnement="7528"] #abo_chx_spectacle {
    display: none !important
}

/**************************    22/04/2022  *********************/
body[data-abonnement="7829"] #zone_select_abo_multiple {
    display: none !important
}

/* demande action 297 465*/
#body_events_listing li[data-id_spectacle="5943"] {
    display: none
}

/* demande action 298 094*/
#body_events_listing li[data-id_spectacle="5952"] {
    display: none
}

/* Abonnement PASS 3 entrÃ©es : empecher le choix des spectacles */
body[data-abonnement="7999"] #formulaire_abonnement .form_group#abo_chx_spectacle, 
body[data-abonnement="7999"] #formule_spectacle_abonnement, 
.select_tarif_place_numerote option[value="7999"], .tarif [data-list-categ="7999"] {
    display: none;
}

body[data-abonnement="7999"] #liste_formule_recap .resume, 
body[data-abonnement="7999"] #liste_formule_recap a {
    font-weight: normal;
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

#body_spectacle tr.abonne[data-list-categ="7999"] {
    display: none;
}

/* le 02/02/24  demande action 311 666*/
#body_events_listing li[data-id_spectacle="6171"] {
    display: none
}

/***** Masquer le choix des spectacles sur le Pass intÃ©gral (Saison 23/24) *****/
body[data-abonnement="8125"] #zone_select_abo_multiple, /* Abo multiple */
body[data-abonnement="8125"] #abo_chx_spectacle, /* Abo simple */
body[data-abonnement="8125"] #zone_choix_spectacle, /* Abo simple */
/***** Masquer le choix des spectacles sur le PASS 3 ENTREES -28 ANS (Saison 24/25) *****/
body[data-abonnement="8189"] #zone_select_abo_multiple, /* Abo multiple */
body[data-abonnement="8189"] #abo_chx_spectacle, /* Abo simple */
body[data-abonnement="8189"] #zone_choix_spectacle, /* Abo simple */
/***** Masquer le choix des spectacles sur le Pass intÃ©gral (Saison 24/25) *****/
body[data-abonnement="8325"] #zone_select_abo_multiple, /* Abo multiple */
body[data-abonnement="8325"] #abo_chx_spectacle, /* Abo simple */
body[data-abonnement="8325"] #zone_choix_spectacle, /* Abo simple */
/***** Masquer le choix des spectacles sur le Pass intÃ©gral (Saison 25/26) *****/
body[data-abonnement="8506"] #zone_select_abo_multiple, /* Abo multiple */
body[data-abonnement="8506"] #abo_chx_spectacle, /* Abo simple */
body[data-abonnement="8506"] #zone_choix_spectacle /* Abo simple */{
    display: none!important;
}

/* Menu dÃ©roulant d'ajout d'autres abonnements */
body[data-abonnement="8125"] option[value="8125"],
body[data-abonnement="8189"] option[value="8189"],
body[data-abonnement="8325"] option[value="8325"],
body[data-abonnement="8506"] option[value="8506"] {
    display: none!important;
    pointer-events: none;
}

/* Abonnement simple */
body[data-abonnement="8125"] .resume,
body[data-abonnement="8189"] .resume,
body[data-abonnement="8325"] .resume {
    pointer-events: none;
}
body[data-abonnement="8125"] .resume a,
body[data-abonnement="8189"] .resume a,
body[data-abonnement="8325"] .resume a {
    text-decoration: none;
    color: var(--body-txt-color);
}

/* ticket 320803*/
#body_events_listing #liste_spectacle .spectacle[data-id_spectacle="6396"]{
    display:none!important;
}

/* ticket 322806*/
#body_events_listing #liste_spectacle .spectacle[data-id_spectacle="6402"]{
    display:none!important;
}


/* action 324972 demande 08/04/2025 */
#bloc_salle_complet_vue, #bloc_recap{display: none}
.description_bloc li {  
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
}

.description_bloc li > div > img {  
    width: auto;  
    height: 150px;    
    max-width: 100%;
}

@media screen and (max-width: 576px) {
    .description_bloc li  { 
        width: 100%;
        margin: 0 10px 10px;
    }
}