body {
    background-color: #f7f7f7;
    font-family: Arial !important;
}

.text-brand {
    color: #ffcb00 !important;
}

.bg-brand {
    background: #ffcb00 !important;
}

.btn-dropdown-menu i {
margin-left : 0
}
/* Centrage absolu des onglets uniquement en grand écran (sinon chevauchement) */
@media (min-width: 1400px) {
    #menu .q-toolbar .menu-menu {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }
}

.q-toolbar img{
    max-height : 60px !important
}
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}







.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}



.drawer-home {
    background-color: #f7f7f7;
}

    .drawer-home .img_vendeur {
        max-width: 90%
    }

    .drawer-home .name {
        font-size: 1.4em;
    }

    .drawer-home .text_bienvenu {
        font-size: 15px;
        font-weight: 100;
        line-height: 24px;
        display: block;
    }

    .drawer-home a {
         color: #337ab7;
    }

    .drawer-home .question_accueil {
        color: #000;
        font-size: 1.1em;
        border: 1px solid #ffd200;
        border-radius: 25px;
        background-color: #ffd200;
        padding: 7px 10px 7px 10px;
        margin-left: -6px;
        margin-bottom: 2px;
        margin-top : 15px;
        display : inline-block;
        font-weight : bold
    }

.page-home{
    padding : 30px;
   
}

.cartes_bg {
    background-image: url(https://www.hertzincentive.com/biblio/challenge/repChal102/carte-bg.png) !important;
    padding: 10px !important;
    background-repeat: no-repeat !important;
  
    background-size: cover !important;
}

.my-cards {
    font-size: 22px;
    font-weight: bold
}

.subtitle-my-cards {
    font-size: 16px;
    font-weight: normal
}

.btn-creation-carte {
    text-decoration : none;
    background-color: #ffd200;
    color: #000;
    background-image: none;
    border-color: inherit;
    border: none;
    font-size: 18px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;

    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border-radius : 5px
}

.cartes_bg img{max-width : 110px;
               max-height : 110px
}



/*form register*/
.mentions {
    color: #313131;
    font-style: italic;
    font-size: 12px;
    margin-top: 15px;
    font-weight: normal;
}


.col-form-register {
    min-height: 100vh;
    padding: 60px 80px;
    background-color : white
}

.bloc-fade {
    animation: 3s linear 1s slidein;
}

.btn-choice {
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 18px !important;
}

    .btn-choice:hover {
        background-color: black !important;
        color: #ffcb00
    }

/****************REGISTER*************************/

.part_01 {
    min-height: 100vh;
    position: fixed;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    width: 33.3333333%;

}

.part_01_in {
    background-color: #FFD000;
    padding: 15px 110px;
    height: 500px;
    min-height: 100vh;
    overflow: auto;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Horizons : réduit le padding vertical pour absorber le léger débordement du contenu (évite la scrollbar interne) */
.part_01_horizon .part_01_in {
    padding-top: 10px;
    padding-bottom: 10px;
}

.img-carte-pres img {
    max-width: 100%;
    margin-top: 0;
}

.text-hor-pres {
    font-size: 18px;
    margin-top: 15px;
}

.subtext-hor-pres {
    font-weight: bold;
    font-size: 18px;
    margin-top: 5px;
}

.ttl_part {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 22px;
}

.div_textes {
    font-weight: bold;
}

.div_texte_para {
    margin-bottom: 25px;
}

.div_texte_plus {
    background-color: white;
    font-weight: normal;
    margin-top: 15px;
}


.collapse_in {
    padding: 15px;
}

.btn-collapse {
    
    color: #353535 !important;
}

.bt_grille {
    line-height: 22px;
    display: block;
    text-transform: uppercase;
    padding: 0 40px 0 0;
    text-align: left;
    color: black;
    line-height: 18px;
    margin-bottom: 15px;
    display: block;
    width: 100%;
    max-width: 400px;
}

/* ============================================================
   Pages publiques carte — design refondu (promo + formulaire)
   Panneau marketing "pp-promo" (contenu piloté par le sheet Hertz)
   + carte formulaire "pp-form-card". Réutilisé par les pages
   Register / Payement / Renew des 3 cartes (Pack Pro, Horizons, Campus).
   Variables posées sur .pp-public ET .pp-promo pour que le panneau
   fonctionne aussi hors conteneur .pp-public (Payement/Renew).
   ============================================================ */
.pp-public, .pp-promo {
    --pp-yellow: #FFD10A;
    --pp-ink: #1A1F27;
    --pp-muted: #45484d;
    --pp-line: #E7EAF0;
}
.pp-public {
    font-family: inherit;
    color: var(--pp-ink);
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}
.pp-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: start; }

.pp-promo {
    position: sticky;
    top: 20px;
    overflow: hidden;
    /* Alpha e6 = 90% d'opacité : le fond de page reste perceptible mais le texte du
       panneau doit rester lisible par-dessus la photo. */
    background: linear-gradient(150deg, #ffffffe6 30%, #fffbebe6 100%);
    color: var(--pp-ink);
    border: 1px solid #F2E7C0;
    box-shadow: 0 18px 44px rgba(30, 38, 54, .12);
    border-radius: 22px;
    padding: 34px 30px;
}
.pp-promo__logo { display: block; height: 45px; width: auto; margin-bottom: 20px; }
.pp-promo__title { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 10px; text-transform: none; }
.pp-promo__title em { color: #8A6D00; font-style: normal; }
.pp-promo__lead { color: var(--pp-muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; font-weight: normal; }
.pp-promo__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pp-yellow); color: #1A1400;
    font-weight: 700; font-size: 14px; letter-spacing: .02em;
    padding: 7px 14px; border-radius: 999px;
    margin-bottom: 22px; text-transform: uppercase;
}
.pp-benefits { display: flex; flex-direction: column; gap: 14px; }
.pp-benefit { display: flex; align-items: flex-start; gap: 12px; }
.pp-benefit__ico {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: #FDEFC0; color: #1A1400; display: grid; place-items: center;
}
.pp-benefit__ico .material-icons { font-size: 21px; }
.pp-benefit__ico .q-icon { font-size: 21px; font-variation-settings: 'FILL' 1; }
.pp-benefit__txt { font-size: 14px; line-height: 1.45; font-weight: normal; }
.pp-benefit__txt b { display: block; font-weight: 700; color: var(--pp-ink); margin-bottom: 2px; }
.pp-benefit__txt span { color: var(--pp-muted); }
.pp-promo__foot {
    margin-top: 26px; padding-top: 20px; border-top: 1px solid #F0E6C8;
    display: flex; align-items: center; gap: 10px; color: var(--pp-muted);
    font-size: 13px; font-weight: normal;
}
.pp-promo__foot .material-icons { color: #8A6D00; font-size: 20px; }

/* grilles tarifaires téléchargeables (vendeur connecté, Pack Pro) */
.pp-grilles { margin-top: 24px; padding-top: 20px; border-top: 1px solid #F0E6C8; }
.pp-grilles__title { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.pp-grilles a {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #E5DCBB; border-radius: 10px;
    padding: 8px 12px; margin: 0 8px 8px 0;
    color: var(--pp-ink); font-size: 13px; font-weight: 600; text-decoration: none;
    text-transform: none; line-height: 1.3; max-width: none; width: auto;
}
.pp-grilles a:hover { background: #FDEFC0; }

/* carte formulaire (colonne droite) */
.pp-form-card {
    background: #fff; border: 1px solid var(--pp-line); border-radius: 22px;
    box-shadow: 0 18px 44px rgba(30, 38, 54, .12); overflow: hidden;
}
.pp-form-head { padding: 24px 28px 18px; border-bottom: 1px solid #F1F2F5; }
/* line-height explicite : Quasar pose 3.75rem sur h2, hérité sinon malgré la taille réduite */
.pp-form-head h2 { font-size: 19px; line-height: 1.25; font-weight: 800; margin: 0 0 6px; text-transform: none; }
.pp-form-head p { color: var(--pp-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }
.pp-form-body { padding: 22px 28px 26px; }

.pp-public .q-field--outlined .q-field__control { border-radius: 12px; background: #FAF9F5; }
.pp-public .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.pp-public .q-field--outlined:hover .q-field__control:before { border-color: #C9C4B8; }
.pp-public .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid var(--pp-yellow); }
.pp-public .q-field--focused .q-field__label { color: var(--pp-ink); }

.pp-form-body .q-btn[type=submit], .pp-form-body .bg-brand, .pp-form-body .btn-cb {
    background: var(--pp-yellow) !important;
    color: #1A1400 !important;
    border: 0 !important;
    border-radius: 999px; font-weight: 800; font-size: 15px;
    padding: 12px 34px; box-shadow: 0 8px 20px rgba(255, 209, 10, .4);
    margin-top: 10px;
}
.pp-form-body .q-btn[type=submit]:before, .pp-form-body .bg-brand:before { box-shadow: none !important; }
/* "Payer en ligne" = bouton du formulaire CB injecté (btn-cb), centré comme fourni */
.pp-form-body .btn-cb { cursor: pointer; }

/* Récap paiement : "Modifier" / "Annuler" côte à côte, alignés et pleine largeur de leur colonne */
.pp-form-body .row.q-col-gutter-md .q-btn[type=submit] {
    width: 100%;
    margin-top: 0 !important;
    padding: 10px 14px;
    font-size: 13.5px;
    box-shadow: none;
}
/* "Annuler votre demande" (color=negative) en secondaire pour le distinguer de "Modifier" */
.pp-form-body .row.q-col-gutter-md .bg-negative {
    background: #fff !important;
    color: var(--pp-ink) !important;
    border: 1px solid var(--pp-line) !important;
}
.pp-form-body .cardCgu { font-size: 12px; color: var(--pp-muted); line-height: 1.5; margin-top: 18px; }

@media (max-width: 900px) {
    .pp-grid { grid-template-columns: 1fr; }
    .pp-promo { position: static; }
    .pp-promo__title { font-size: 25px; }
}

/*****************PACK PRO****************************/
#choixFiltres {
    padding-left: 30px;
    padding-right: 30px;
    font-family: "Roboto", sans-serif;
}

.row-info-filtres-pp {
    background-color: rgba(0,0,0,0.7);
    margin: 0 auto;
    padding: 25px 40px 25px 50px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: white;
    text-align: center;
    width: 75%
}

h5 {
    font-weight: 700
}

.logo-hertz-tarif-pp {
    vertical-align: middle;
    margin-right: 10px;
}

.row-info-filtres-pp img {
    margin-right: 20px;
    max-width: 100%;
    max-height: 42px
}

.row-info-filtres-pp p {
    padding-top: 8px
}

.col-title-filtres-pp {
    margin-top: 40px;
    margin-bottom: 30px;
}

.btn-filtres {
    background-color: #FFD101;
    color: black;
    padding: 10px;
    border-radius: 2px;
    gap: 3px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: inherit;
    margin-left: 10px;
    cursor: pointer
}

.col-title-filtres-pp h1 {
    font-weight: bold;
    font-size: 32px;
    line-height: 35px;
}

.col-title-filtres-pp h3 {
    font-weight: bold;
    font-size: 24px;
    margin-top: 40px
}

.row-filtre-step1 {
    width: 85%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-bloc-day-choice {
    background-color: rgba(0,0,0,0.7);
    margin: 0 auto;
    padding: 20px 30px 15px 40px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: white;
    text-align: center;
}

    .col-bloc-day-choice img {
        margin-right: 20px;
        max-width: 100%;
        max-height: 42px
    }

.btn-retour-filtre {
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 18px;
    background: #FFD101;
    border-radius: 2px 0px 0px 2px;
    padding: 10px;
    text-transform: uppercase;
    color: black;
    height: 40px;
    display: inline-block;
    cursor: pointer
}

.btn-choice-filtre {
    background: #6C6C6C;
    border-radius: 0px 2px 2px 0px;
    padding: 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    color: white;
    cursor: default
}

.btn-retour-filtre:hover, .btn-filtres:hover {
    background: black;
    color: white;
    text-decoration: none
}

.btn-choice-filtre:hover {
    background: #6C6C6C;
    color: white;
    text-decoration: none
}

.recommandations {
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    color: #000;
    display: none;
    margin-left: 15px
}

.col-recap {
    text-align: center
}

#select-days {
    display: none
}

.row-card-tarif-pp > div:nth-child(1) {
    padding-right: 30px
}

.row-card-tarif-pp > div:nth-child(2) {
    padding-left: 30px
}

.white-block {
    background-color: rgba(255,255,255,1);
    border-radius: 30px;
    padding: 20px;
    margin: 0 auto;
    max-width: 800px
}

.title-white-block {
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #121212;
    margin-bottom: 15px;
    font-weight: 400
}

.card-tarif {
    border-radius: 30px;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.tarif-header {
    background-color: #FFD101;
    border-radius: 30px 30px 0 0;
    padding: 18px 15px 15px 15px;
    letter-spacing: 0.5px;
    text-align: center
}

.title-header {
    font-weight: bold;
    font-size: 16px;
    color: #1F1F1F;
    line-height: 20px;
    text-transform: uppercase;
    width: 95%;
    margin-bottom: 20px
}

.subtitle-header {
    font-weight: 300
}

.tarif-body {
    padding: 25px
}

.white-block-options {
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 0px
}

    .white-block-options .title-white-block {
        margin-bottom: 22px
    }

.bloc-img {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-bottom: 25px;
    justify-content: flex-start
}

    .bloc-img img {
        height: 30px;
        margin-right: 10px;
    }

.text-icon {
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
}

    .text-icon span {
        display: block;
        font-weight: 300
    }

#txt-presentation-filtres {
    width: 75%;
    margin: 0 auto
}

.col-left-tarifs {
    text-align: left
}

.subtitle-h1 {
    line-height: 19px;
    font-size: 20px;
    font-weight: 500
}

.col-left-tarifs h1 {
    font-size: 36px;
    font-style: italic;
    font-weight: bold
}

.black-block {
    background-color: #121212;
    display: flex;
    width: 210px;
    padding: 14px 20px;
    border-radius: 20px;
    margin: 0 auto;
    margin-top: 50px;
    height: 83px
}

.price-black {
    color: white;
    font-size: 16px;
    font-weight: 600;
    align-self: center;
}

.btn-filtre-tarif {
    border-radius: 10px;
    align-self: center;
    margin-left: 30px;
    height: 54px;
    display: flex;
    align-items: center;
}

.bloc-card-tarif {
    display: flex;
    margin-bottom: 15px
}

    .bloc-card-tarif img {
        margin-right: 25px
    }

.text-tarif {
    line-height: 19px;
    font-size: 15px;
    align-self: center
}

.title-text-tarif {
    font-weight: 400;
    text-align: center;
    padding-top: 15px;
}

.subtitle-text-tarif {
    font-weight: 400;
    text-align: center;
    font-size: 16px;
    position: relative;
    z-index: 2;
}

.description-title p {
    font-size: 15px;
    font-weight: 400
}

.subtitle-text-tarif span {
    font-weight: 200
}

.description-title {
    width: 90%;
}

    .description-title img {
        float: left;
        max-height: 32px
    }

    .description-title span {
        font-weight: 200;
    }

.row-middle {
    margin: 0 auto;
    position: relative;
    margin-top: 5px;
    margin-bottom: 30px;
    padding: 0 15px;
}

    .row-middle .col-middle {
        margin-bottom: 17px
    }

.bloc-yellow-trip {
    border-radius: 30px;
    background-color: #FFD101;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    position: absolute;
    height: 219px;
    width: 310px;
    left: calc(75% - 166px);
    right: auto;
    top: 49px;
}

.block-choice {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

    .block-choice a {
        padding: 15px 75px;
        border: 1px solid #79747E;
        color: black;
        font-size: 14px;
        font-weight: bold
    }

        .block-choice a:hover {
            text-decoration: none;
            background-color: #FFD101
        }

    .block-choice .active {
        text-decoration: none;
        background-color: #FFD101
    }

    .block-choice .btn1 {
        border-radius: 50px 0 0 50px
    }

    .block-choice .btn3 {
        border-radius: 0 50px 50px 0
    }

.img-middle {
    text-align: center
}

.text-little {
    color: white;
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.btn1, .btn2, .btn3 {
    cursor: pointer
}

#TarifUtilitaire .title-text-tarif {
    font-weight: 400;
    text-align: center;
    padding-top: 26px;
}

#TarifUtilitaire .subtitle-text-tarif {
    font-weight: 400;
    text-align: center;
    padding-top: 11px;
}

#TarifUtilitaire .bloc-yellow-trip {
    border-radius: 30px;
    background-color: #FFD101;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    position: absolute;
    height: 256px;
    width: 310px;
    left: calc(75% - 169px);
    right: auto;
    top: 44px;
}

#TarifUtilitaire .row-options {
  
    margin: 0 auto
}

#TarifMonths .col-middle-truck .title-text-tarif {
    font-weight: 400;
    text-align: center;
    padding-top: 26px;
}

#TarifMonths .col-middle-truck .subtitle-text-tarif {
    font-weight: 700;
    text-align: center;
    padding-top: 26px;
}

#TarifMonths .bloc-yellow-trip {
    border-radius: 30px;
    background-color: #FFD101;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    position: absolute;
    height: 468px;
    width: 310px;
    left: calc(75% - 164px);
    right: auto;
    top: 170px;
}

@media(max-width : 1200px) {
    #TarifMonths .bloc-yellow-trip {
        left: auto;
        right: 0
    }

    #TarifUtilitaire .bloc-yellow-trip {
        left: auto;
        right: 0
    }
}

@media(max-width : 1470px) {
    .row-filtre-step1 {
        width: 100%;
    }
}

@media(max-width : 1400px) {
    .row-info-filtres-pp {
        width: 90%
    }
}

@media(max-width : 1200px) {
    .row-info-filtres-pp div.col-lg-7 {
        margin-top: 10px
    }

    .bloc-yellow-trip {
        left: auto;
        right: 0
    }

    .row-filtre-step1 {
        display: inherit;
    }

    .col-recap {
        text-align: center;
        margin-bottom: 15px
    }

    .row-info-filtres-pp div.col-lg-5 {
        justify-content: center
    }

    .col-title-filtres-pp h1 {
        margin-top: 20px
    }
}

@media(max-width : 991px) {
    .recommandations {
        display: block
    }

    .title-header {
        width: 90%
    }

    .logo-hertz-tarif-pp {
        width: 150px;
    }

    .col-middle {
        margin-bottom: 25px
    }

    .subtitle-text-tarif {
        background-color: #FFD101;
        width: 300px;
        margin: 0 auto;
        padding: 10px !important;
        border-radius: 10px;
    }

    .bloc-yellow-trip {
        display: none
    }

    .white-block-tarifs {
        margin-bottom: 25px
    }

    #txt-presentation-filtres {
        width: 100%
    }

    .col-left-tarifs h1 {
        font-size: 30px
    }

    .block-choice a {
        padding: 15px 45px;
    }
}

@media(max-width : 768px) {
    .col-title-filtres-pp h1 {
        font-size: 30px;
        line-height: 25px
    }

    .block-choice a {
        padding: 15px 9px;
    }

    .black-block {
        margin-top: 20px
    }

    .col-title-filtres-pp h3 {
        margin-top: 30px;
        font-size: 18px
    }

    .col-title-filtres-pp h1 {
        width: 100%
    }
}

@media(max-width : 580px) {
    .row-info-filtres-pp {
        padding: 25px
    }

    .btn-choice-filtre, .btn-retour-filtre {
        margin-bottom: 10px
    }

    .subtitle-text-tarif {
        width: 100%
    }

    .block-choice a {
        font-size: 11px
    }
}

@media(max-width : 430px) {
    .btn-choice-filtre {
        margin-top: 10px
    }
}



/*************HORIZON***********************/


.row {
    margin: 0
}

.bloc-yellow-france {
    background-color: #FFD100;
    color: #434244;
    position: relative;
    padding: 3px 5px;
    font-size: 19px;
}

.triangle {
    position: absolute;
    top: 28px;
    right: 50%;
    transform: translateX(50%);
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #ffd100;
}

#step1-horizon {
    font-family: 'Roboto', sans-serif;
}

.header-horizon {
    margin-top: -50px
}

    .header-horizon img {
        max-width: 100%;
        width: 100%;
    }

.col-right-horizon {
    padding-left: 50px;
    padding-right: 90px
}

.title-horizon {
    font-weight: bold;
    font-size: 30px;
}

.subtitle-horizon {
    margin-top: 5px;
    font-size: 20px;
}

.card-horizon {
    border-radius: 20px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    max-width: 270px;
    margin-bottom: 40px
}

.card-yellow {
    background-color: #FFD100;
    padding: 29px 17px;
    color: #434244;
    text-align: center;
    height: 240px;
}

.card-horizon-text {
    line-height: 21px
}

.card-yellow .card-horizon-text {
    font-weight: 500;
    font-size: 20px;
}

.card-bloc {
    background-color: white;
    box-shadow: none !important;
}



.card-grey {
    text-align: center;
    height: 240px;
    background-color: white;
}

    .card-grey .header {
        color: white;
        background-color: #434244;
        padding: 15px 13px;
        border-radius: 20px 20px 0 0;
        min-height: 122.6px;
        display: flex;
        flex-direction: column;
    }

    .card-grey .div-text {
        margin: auto;
    }

    .card-grey .card-horizon-text {
        font-weight: 500;
        font-size: 20px;
    }

    .card-grey .card-horizon-subtext {
        font-weight: 400;
        font-size: 16px;
        margin-top: 5px
    }

    .card-grey img {
        max-width: 95px
    }

.card-horizon-number {
    font-weight: bold;
    font-size: 32px;
    line-height: 30px;
}

.row-cards-horizons {
    margin-top: 40px !important
}

.row2-card-horizon {
    margin-top: 40px
}

.card-horizon img {
    margin-top: 15px;
    max-width: 95px
}



.mention-horizon {
    font-size: 12px;
    margin-top: 40px;
    margin-bottom: 30px
}

.card-bloc img {
    max-width: 100%;
    margin-top: -6px;
}

.row-yellow {
    background-color: #FFD100;
    color: #434244;
    padding: 20px;
    width: 77%;
    border-radius: 20px;
    margin-top: 25px !important
}

.col-yellow-1 {
    color: #434244;
    font-size: 24px;
    line-height: 27px;
    margin-top: 31px;
}

.col-yellow-2, .col-yellow-3 {
    font-weight: bold;
    font-size: 32px;
}

.text-stat {
    line-height: 27px;
    text-align: center;
    width: auto;
    display: block;
    margin-top: 19px;
}



/* Une seule ligne de pourcentage à côté de chaque picto flottant : on la cale à mi-hauteur
   de l'image (carte de France 119px, globe 105px). */
.col-yellow-2 .text-stat {
    margin-top: 52px;
}

.col-yellow-3 .text-stat {
    margin-top: 45px;
}

.col-yellow-2 span {
    font-size: 24px;
    font-weight: normal;
    display: block;
    margin-top: -4px;
    margin-right: 6px;
}

.col-yellow-2 img, .col-yellow-3 img {
    max-width: 100%;
    float: left;
}
/*aside*/
.card-aside-horizon {
    background-color: #F2F2F2;
    padding: 25px;
    border-radius: 20px;
    max-width: 355px;
    margin: 0 auto;
    margin-top: -50%;
}

    .card-aside-horizon img {
        max-width: 100%;
        width: 100%
    }


.title-card-aside {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-top: 20px
}

.subtitle-card-aside {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}


    .subtitle-card-aside span {
        font-weight: 900;
        font-size: 20px;
        display: block
    }

.btn-white-aside {
    padding: 10px 30px;
    background-color: #FFD100;
    color: #454546;
    font-size: 17px;
    border-radius: 50px;
    margin-top: 25px;
    text-align: center;
    cursor: pointer
}

    .btn-white-aside:hover {
        border: 1px solid #454546;
        background-color: transparent;
    }

.btn-bg-aside {
    padding: 10px 30px;
    background-color: white;
    text-align: center;
    color: #454546;
    font-size: 17px;
    border-radius: 50px;
    margin-top: 20px;
    cursor: pointer
}

    .btn-bg-aside:hover {
        background-color: white;
        border: none
    }

.text-aside {
    font-family: 'Caveat', cursive;
    margin: 0 auto;
    font-size: 24px;
    margin-top: 40px;
    text-align: center;
    width: 63%;
    display: none
}


.btn-aside {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0 auto;
    font-size: 17px;
    padding: 10px 13px;
    margin-top: 25px;
    color: #454546;
    border-radius: 50px;
    width: 60%;
    text-align: center;
    border: 1px solid #454546;
    margin-bottom: 35px;
    display: none
}

    .btn-aside:hover {
        background-color: #FFD100;
        cursor: pointer;
    }

.row-card img {
    max-width: 100%
}

.row-card p {
    font-size: 24px;
    font-weight: bold;
}

.row-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #EDEDED;
    margin-top: 25px !important;
    width: 77%;
}



    .row-card .text-row-card {
        color: #434244;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 15px
    }

.plus-card {
    margin-top: 60px;
}

.row-card .col-md-3 {
    padding: 0
}

.bloc-3 {
    width: 82%
}

.bloc-drive-mob, .bloc-siege-mob {
    display: none
}

@media(max-width : 1700px) {
    .row-yellow, .row-card {
        width: 100%
    }

    .bloc-3 {
        width: 76%;
    }
}


@media(max-width : 1540px) {


    .bloc-3 {
        width: 84%;
    }
}


@media(max-width : 1380px) {
    .col-right-horizon {
        padding-right: 25px
    }

    .header-horizon {
        margin-top: -20px
    }
}

@media(max-width:1200px) {

    .col-right-horizon {
        margin-top: 15px
    }

    .card-aside-horizon {
        max-width: 65%;
        margin-top: -12%;
    }

    .bloc-3 {
        width: 66%;
    }

    .btn-aside {
        width: 35%
    }

    .col-img {
        display: flex;
        height: 260px;
    }

        .col-img img {
            margin: auto
        }
}




@media(max-width:1060px) {
    .card-aside-horizon {
        max-width: 70%;
        margin-top: -12%;
    }

    .bloc-3 {
        width: 72%;
    }
}


@media(max-width:992px) {
    body {
        overflow-x: hidden
    }

    .card-aside-horizon {
        max-width: 90%;
        margin-top: -12%;
    }

    .bloc-3 {
        width: 82%;
    }

    .btn-aside {
        width: 50%
    }
}

@media(max-width : 768px) {

    .row-card .col-12 {
        text-align: center
    }

    .col-yellow-2 span {
        margin-top: 0px;
        margin-right: inherit;
        padding-left: 10px;
    }

    .row-card img {
        width: 75%;
        margin: 0 auto;
    }

    .bloc-drive-mob, .bloc-siege-mob {
        display: block
    }

    .bloc-drive, .bloc-siege {
        display: none
    }

    .col-yellow-1 {
        text-align: center;
        margin-top: 0;
    }

    .row-yellow, .row-card {
        width: 71%;
        margin: 0 auto !important;
        margin-top: 20px !important
    }

        .row-card .text-row-card {
            text-align: center;
        }

    .text-stat {
        text-align: inherit;
        margin-left: 52%;
    }

    .col-yellow-2 {
        padding-top: 10px;
    }

    .col-yellow-3 {
        padding-top: 18px;
        margin-top: 20px;
    }

    .col-yellow-2 img {
        max-width: 100%;
        float: left;
        padding-left: 53px;
    }

    .col-yellow-3 img {
        max-width: 100%;
        float: left;
        padding-left: 65px;
    }

    #step1-horizon > div.row > div.col-right-horizon.col-lg-8.col-md-12 > div.row.row-cards-horizons > div:nth-child(1) {
        display: none
    }

    .header-horizon {
        margin-top: 0px
    }

    .card-aside-horizon {
        max-width: 60%;
    }

    .col-img {
        height: inherit;
    }

    .card-aside-horizon img {
        width: 80%
    }

    .col-right-horizon {
        padding-right: 25px
    }

    .title-horizon {
        line-height: 39px;
        text-align: center
    }

    .subtitle-horizon {
        text-align: center
    }
}

@media(max-width : 576px) {

    .row-yellow, .row-card {
        width: 100%;
    }

    body {
        overflow-x: hidden
    }

    .col-12 {
        width: 100%
    }

    .btn-aside {
        width: 65%
    }

    .card-aside-horizon {
        max-width: 80%;
        margin-top: -40%;
    }

    .header-horizon img {
        max-width: inherit;
        width: 250%
    }

    .card-horizon {
        margin: 0 auto;
        margin-bottom: 40px;
    }
}




/************CLIENTS**************/

#headercard .q-tabs{
    border-radius : 30px
}

   
    #headercard .q-tabs .q-tab {
        background-color: rgba(255, 192, 0, 0.2);
        text-transform : none
    }
    #headercard .q-tabs .q-tab--active {
        background-color: #ffcb00 !important
    }

#headercard .q-tab--active .q-tab__indicator{
    opacity : 0
}

#headercard > div > .q-tabs > div > div:nth-child(2) {
    margin-right: 5px;
    margin-left: 5px;
}

/***************SHOP******************/
/**** SHOP ****/
.row-shop {
    height: 100vh;
}

.filtres-div-shop .input-group-text {
    background-color: transparent;
    font-size: 14px !important;
    color: lightgrey;
}

.filtres-div-shop .input-group-append {
    border-left: none
}

.shop-pts-filter .form-control {
    border-right: none
}

    .shop-pts-filter .form-control:focus {
        border-color: #ced4da;
        outline: 0;
        box-shadow: none;
    }

.menu-rubrique-shop {
    cursor: pointer;
}

.col-left-shop {
    background-color: white;
    margin-top: 30px;
    padding: 15px;
    padding-top: 30px;
}

.span-maxMin {
    font-size: 10px
}

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}


.col-right-shop {
    padding: 30px;
}


.card-produit-shop {
    border-radius: 10px;
    margin-bottom: 10px
}

    .card-produit-shop .card-body {
        padding: 15px
    }

.card-product-div-img {
    text-align: center;
    cursor: pointer;
    min-height: 120px;
    max-height: 120px;
}



.card-product-shop-img {
    max-width: 100%;
    max-height: 120px;
}

.card-product-shop-description {
    text-align: center;
    margin-top: 2px
}

.card-product-name {
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    min-height: 54px;
    cursor: pointer;
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 5px;
}

@media(max-width : 1540px) {
    .card-product-name {
        min-height: 54px;
    }
}

@media(max-width : 592px) {
    .card-product-name {
        min-height: 37px;
    }
}

.card-product-name:hover {
    color: #2288f5
}

.btn-commander-card-product-shop {
    width: 100%;
    background-color: #4caf50;
    border-color: #4caf50;
    text-transform: none;
    letter-spacing: 1px;
    text-align: center;
    font-size: 14px !important;
    letter-spacing: 0;
}

    .btn-commander-card-product-shop.disabled {
        background-color: #eceff1;
        color: black;
        border-color: #eceff1;
        opacity: 1 !important;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0;
    }

        .btn-commander-card-product-shop.disabled:hover {
            background-color: #eceff1;
            border-color: #eceff1;
        }

.col-pagination-shop {
    margin-top: 10px
}




.col-left-shop .list-group-item {
    border: none;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 0;
    line-height: 18px;
}

.thumbnail {
    min-height: 60px;
    position: relative;
}


    .thumbnail img {
        cursor: pointer;
        opacity: 1;
        transition: .3s;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .thumbnail:hover img {
        /* background-color: #d2d2d2 !important;  */
        opacity: 0.3 !important;
    }

.activess {
    opacity: 0.4 !important;
    border: 3px solid hsl(26, 100%, 55%) !important;
}

.modal-content {
    border: none !important;
}

.modal-header {
    border: none !important;
}

    .modal-header .close {
        opacity: 1 !important;
    }

.carousel-control-prev {
    opacity: 1 !important;
    align-items: center !important;
    position: absolute;
    left: 0px !important;
}

.carousel-control-next {
    opacity: 1 !important;
    align-items: center !important;
    position: absolute;
    right: 0px !important;
}

.carousel-control-prev-icon {
    width: 30px !important;
    height: 30px !important;
}

.carousel-control-next-icon {
    width: 30px !important;
    height: 30px !important;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.shop-modal-product-title {
    font-size: 20px;
    font-weight: 700;
    color: black;
    line-height: 22px
}

.modal-shop-div-btn-commander {
    margin-top: 15px
}

.carroussel-shop-image .q-carousel {
    max-height: 215px;
}

.carroussel-shop-image .q-carousel__slide {
    max-height: 215px;
    margin: 0 auto;
    width: initial !important;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-shop .modal-header {
    padding-top: 5px;
    padding-bottom: 0
}

.modal-shop .modal-body {
    padding-top: 0;
}


.shop-pts-dispo {
    background-color: #4caf50;
    color: white;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
    margin-bottom: 20px
}

.shop-search > div > div:nth-child(1) {
    background-color: white;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding-right: 0;
    height: 43px
}

.shop-search > div > div:nth-child(3) {
    background-color: white;
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding-right: 5px;
}

    .shop-search > div > div:nth-child(3) > svg {
        font-size: 160%
    }

.shop-search .form-control {
    border-left: none !important;
    padding-left: 10px;
    height: 43px !important
}

.shop-pts-filter .form-control {
    height: 43px !important
}

.shop-pts-filter .input-group-append {
    height: 43px
}

.shop-search .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.title-shop-col-left {
    font-weight: bold;
    margin-top: 15px;
    font-size: 18px;
    margin-bottom: 5px
}

.checkbox-rubrique {
    float: right
}

.col-left-shop .list-group-item {
    position: relative
}

.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 20px;
    width: 20px;
    border: solid 1px #9aadcc
}

.col-left-shop .list-group-item:hover {
    color: rgba(33,150,243, 0.7)
}

    .col-left-shop .list-group-item:hover > .checkmark {
        background-color: rgba(33,150,243, 0.4);
    }

.col-left-shop .list-group-item input {
    visibility: hidden
}

    .col-left-shop .list-group-item input:checked ~ .checkmark {
        background-color: #2196F3;
    }

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.col-left-shop .list-group-item input:checked ~ .checkmark:after {
    display: block;
}

.col-left-shop .list-group-item:hover > .checkmark:after {
    display: block;
}

.col-left-shop .list-group-item.active {
    background-color: white;
    color: #2196F3;
}

.delete-filter {
    float: right;
    color: #2196F3;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer
}

.btn-filtre-mobile {
    margin-bottom: 15px;
    width: 100%;
    background-color: #0062cc;
    border-color: #0062cc
}

    .btn-filtre-mobile i {
        padding-left: 5px
    }

.shop-rubrique-filter {
    margin-bottom: 15px
}


@media(max-width : 992px) {
    .row-shop {
        height: inherit;
    }

    .col-right-shop {
        height: 100vh
    }

    .shop-modal-product-title {
        font-size: 18px
    }
}

.card-commande-search .name-item-search {
    margin: 0 auto;
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 10px;
    min-height: 40px
}

.col-img-search {
    min-height: 105px
}

.date-seach-command {
    line-height: 21px
}

.collaspe-custom {
    border: 1px solid #bfccde;
    border-radius: 10px 10px 0 0;
    margin-bottom: 10px
}

    .collaspe-custom:nth-child(3) {
        border-radius: 0;
    }

    .collaspe-custom:nth-child(4) {
        border-radius: 0 0 10px 10px
    }


        .collaspe-custom:nth-child(4).active {
            border-radius: 10px 10px 0 0;
        }

    .collaspe-custom.active {
        border: 1px solid #1e4991
    }



.collapse-header {
    background-color: #9d9d9d;
    border: 1px solid #9d9d9d;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}

    .collapse-header.active {
        background-color: #444248;
        border: 1px solid #444248;
    }

.collaspe-custom:nth-child(3) .collapse-header {
    border-radius: 0;
}

.collaspe-custom:nth-child(4) .collapse-header {
    border-radius: 0 0 10px 10px;
}

    .collaspe-custom:nth-child(4) .collapse-header.active {
        border-radius: 10px 10px 0 0;
    }

.data-col-left-commande.title-product {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0
}

.show-title {
    text-decoration: underline !important;
    cursor: pointer;
    margin-bottom: 20px;
    display: block
}

/******** page commande************/
.col-left-command-page {
    background: #444248;
    padding: 10px 15px;
    color: white;
    border-radius: 10px
}

    .col-left-command-page p {
        font-size: 12px;
        font-weight: 600
    }

.title-col-left-commande-page {
    text-transform: uppercase;
    margin-bottom: 5px
}

.data-col-left-commande {
    font-weight: bold;
    font-size: 18px !important;
    line-height: 20px;
    margin-bottom: 20px
}

.col-left-command-page img {
    max-width: 100%;
    max-height: 150px;
    margin-bottom: 10px
}


.alert-ok-step {
    background-color: #4caf50;
    border-color: #4caf50;
    color: white;
}

.alert-warning-step {
    background-color: lightgrey;
    border-color: lightgrey;
    color: white;
}

.alert-waiting {
    background-color: #ffc71c;
    border-color: #ffc71c;
    color: white;
}

.alert-waiting {
    background-color: #0069d9;
    border-color: #0069d9;
    color: white;
}

.title-card-commande {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 20px
}

.btn-submit-commande {
    color: white !important;
    background-color: #1976d2 !important;
    border-color: #1976d2;
}

    .btn-submit-commande:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
    }

.btn-add-commande {
    background-color: #1976d2;
    border-color: #1976d2;
    color: white;
}


    .btn-add-commande:hover {
        background-color: #feca06;
        border-color: #feca06;
        color: white;
    }

.card-body-step {
    padding: 10px 45px
}

.title-card-step4 {
    font-weight: bold;
    font-size: 18px
}

.card-result-info {
    color: white;
    background-color: #1e4991 !important;
    padding: 20px 40px;
    border-radius: 15px
}

    .card-result-info .name-card-info {
        color: white;
        font-size: 18px
    }

.resultpage {
    font-size: 16px
}



.card-result-info .col-md-4 {
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 5px;
    padding-right: 5px
}

.second-card-result .row > .col-2, .second-card-result .row > .col-10, .div-third-result .row > .col-2, .div-third-result .row > .col-10 {
    padding-left: 15px;
    padding-right: 15px
}

.card-result-info .col-md-4:nth-child(3) {
    border-right: none
}

.icon-book {
    font-size: 40px;
    padding-top: 3px
}

.row-info-result .col-10 {
    line-height: 22px
}


.second-card-result .col-10 {
    line-height: 20px
}


.div-third-result .col-10 {
    line-height: 20px
}

.col-btn-result-card {
    text-align: right;
    display: flex
}

.btn-commande-result-card {
    border-radius: 10px;
    background-color: white;
    color: #1e4991;
    margin-top: 20px;
    display: flex;
    text-align: initial;
    width: 95%;
    margin-left: 30px;
}

.first-bloc-btn-commande-result {
    padding: 7px 0;
    text-align: center;
    background-color: #feca06;
    font-weight: bold;
    display: inline-block;
    width: 60%;
    border-radius: 10px;
    min-height: 43px;
    align-self: center;
}


.second-bloc-btn-commande-result {
    display: inline-block;
    text-align: center;
    width: 36%;
    align-self: center;
}




    .second-bloc-btn-commande-result a {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        color: #1e4991
    }

        .second-bloc-btn-commande-result a:hover {
            color: #feca06
        }

.pts-btn-dispo {
    font-size: 20px
}

.btn-show-command {
    margin-top: 20px;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    color: #1e4991;
    text-align: center;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    margin-left: 20px
}



.btn-show-command:hover {
    color: white;
    background-color: #feca06;
}


/* ============================================================
   Menu / header — style maquette Hertz (onglets en pills)
   ============================================================ */
#menu {
    padding: 0 12px;
    box-sizing: border-box;
}
/* Logo du header un peu plus petit */
#menu .btn-logo-global img {
    max-height: 42px !important;
}
#menu .q-toolbar {
    background: #ffffff !important;
    border: 1px solid #E7EAF0;
    border-radius: 16px;
    margin: 16px 0 12px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
    min-height: 70px;
    padding: 10px 18px;
    position: relative;
}

/* Capsule grise arrondie autour du groupe d'onglets (segmented control) */
#menu .q-toolbar .q-tabs {
    background: #F1F3F7;
    border-radius: 999px;
    padding: 4px;
    min-height: auto;
}
/* Grand écran : capsule ajustée au contenu + flèches masquées (car centrage absolu).
   En dessous : on laisse le scroll natif Quasar (flèches) pour éviter tout débordement. */
@media (min-width: 1400px) {
    #menu .q-toolbar .q-tabs {
        max-width: fit-content;
    }
    #menu .q-toolbar .q-tabs .q-tabs__content {
        overflow: visible;
    }
    #menu .q-toolbar .q-tabs .q-tab__indicator,
    #menu .q-toolbar .q-tabs .q-tabs__arrow {
        display: none;
    }
}

/* Chaque item de menu est un q-btn dans le <menu> (q-tabs) */
#menu .q-toolbar .q-tabs .q-btn {
    border-radius: 999px !important;
    min-height: 34px;
    margin: 0 2px;
    padding: 0 16px;
}
#menu .q-toolbar .q-tabs .q-btn__content,
#menu .q-toolbar .q-tabs .q-btn-content {
    font-weight: 500;
    color: #5B6472;
    text-transform: none;
    white-space: nowrap;
    flex-wrap: nowrap;
}
#menu .q-toolbar .q-tabs .q-btn:hover .q-btn__content,
#menu .q-toolbar .q-tabs .q-btn:hover .q-btn-content {
    color: #1A1F27;
}

/* Onglet actif = pill sombre, texte blanc */
#menu .q-toolbar .q-tabs .q-btn.active {
    background: #1E2636 !important;
}
#menu .q-toolbar .q-tabs .q-btn.active .q-btn__content,
#menu .q-toolbar .q-tabs .q-btn.active .q-btn-content {
    color: #ffffff !important;
}

/* Icône FAQ injectée dans le header (via _MenuVueCode HertzCard) */
#menu .hertz-faq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #5B6472;
    text-decoration: none;
    margin: 0 4px;
    flex-shrink: 0;
}
#menu .hertz-faq-btn:hover {
    background: rgba(0, 0, 0, .05);
    color: #1A1F27;
}
#menu .hertz-faq-btn .material-icons {
    font-size: 22px;
}

/* Item "Accueil" = icône seule. Le template MenuItemLink-Common code un `on-left`
   (marge droite 12px Quasar) en dur sur TOUTES les icônes de menu ; sans libellé à
   espacer, l'icône Home se retrouve décalée à gauche dans sa pill. On annule la marge
   pour la recentrer horizontalement. */
#menu .q-toolbar .q-tabs .q-btn .q-icon.fa-home.on-left,
#menu .q-toolbar .q-tabs .q-btn .q-icon.fa-house.on-left {
    margin-right: 0 !important;
}

/* En dessous du centrage absolu (< 1400px) : la capsule d'onglets reste centrée mais
   redevient rétrécissable et scrolle en interne (flèches Quasar) au lieu de pousser les
   icônes hors de la barre. Le centrage se fait par marges auto — à condition de
   neutraliser le <q-space> qui suit : l'algo flex sert le flex-grow AVANT les marges auto,
   donc tant qu'il grandit il absorbe tout l'espace libre et la capsule reste collée au
   logo (Quasar pose ce flex-grow en !important, d'où le !important ici aussi). On compacte
   aussi un peu les onglets. */
@media (max-width: 1399px) {
    #menu .q-toolbar .menu-menu {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Neutralisation du q-space limitée à la plage où les onglets sont dans la barre : en
   dessous de 1024px (showMenu = false) ils passent dans le drawer, et c'est alors le
   q-space qui pousse les icônes à droite — sans lui elles resteraient collées au logo. */
@media (min-width: 1024px) and (max-width: 1399px) {
    #menu .q-toolbar .q-space-menu4 {
        flex-grow: 0 !important;
    }
    #menu .q-toolbar .q-tabs .q-btn {
        padding: 0 10px;
    }
    #menu .q-toolbar .q-tabs .q-btn__content,
    #menu .q-toolbar .q-tabs .q-btn-content {
        font-size: 13px;
    }
}



/*************DÉTAIL BOOSTER (Hertz)***********************/
.booster-detail {
    margin: 0 auto;
    padding: 28px 18px 40px;
    color: #2B3442;
}

/* ---- Colonne infos (gauche) : carte sombre facon accueil ---- */
.booster-detail .bd-info .q-list {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #E8ECF3;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .20);
}

.booster-detail .bd-info .q-item {
    min-height: 46px;
    padding: 12px 20px;
}

.booster-detail .bd-info .q-item + .q-item {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.booster-detail .bd-info .q-item:first-child {
    background: rgba(255, 209, 10, .06);
    position: relative;
}

.booster-detail .bd-info .q-item:first-child::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 4px;
    background: #FFD10A;
}

.booster-detail .bd-info .q-item:first-child .q-item__section {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}

.booster-detail .bd-info .q-item__section {
    color: #D6DCE6;
    font-size: 14px;
}

/* ---- Colonne editoriale (centre) ---- */
.booster-detail .bd-editorial img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---- Carte resultat (droite) ---- */
.booster-detail .bd-result .q-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .12);
    overflow: hidden;
}

.booster-detail .bd-result .q-separator {
    display: none;
}

.booster-detail .bd-result .text-h5 {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #fff;
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 16px;
    margin: 0;
}

.booster-detail .bd-result .q-card__section {
    padding: 18px;
}

.booster-detail .bd-result .text-h6 {
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5B6472;
    margin-top: 10px;
    margin-bottom: 4px;
}

.booster-detail .bd-result .q-chip {
    background: #FFD10A !important;
    font-weight: 800;
    font-size: 17px;
    border-radius: 999px;
    padding: 8px 20px;
    box-shadow: none;
}

.booster-detail .bd-result .q-chip,
.booster-detail .bd-result .q-chip .q-chip__content {
    color: #1E2636 !important;
}

.booster-detail .bd-result .alert-warning {
    border-radius: 12px;
    background: #FFF6D6;
    border: 1px solid #F5E39B;
    color: #7A5C00;
}

/* ---- Tableau classement (bas) ---- */
.booster-detail .bd-results .q-table__container,
.booster-detail .bd-results .q-table__card {
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    border: 1px solid #EEF1F5;
    overflow: hidden;
}

.booster-detail .bd-results .q-table__top {
    padding: 18px 20px;
}

.booster-detail .bd-results .q-table__title {
    font-weight: 800;
    color: #1E2636;
    font-size: 18px;
}

.booster-detail .bd-results thead tr th {
    background: #1E2636;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    border: none;
    padding: 12px 16px;
}

.booster-detail .bd-results tbody td {
    font-size: 14px;
    color: #2B3442;
    padding: 12px 16px;
}

.booster-detail .bd-results tbody tr:nth-child(even) {
    background: #F7F9FC;
}

.booster-detail .bd-results tbody tr:hover {
    background: rgba(255, 209, 10, .12);
}


/*************LISTE BOOSTERS (Hertz)***********************/
.booster-list {
    padding: 28px 18px 40px;
    color: #2B3442;
}

.booster-list > .q-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* En-tete sombre facon accueil (remplace le bg-brand jaune) */
.booster-list .q-card > .bg-brand {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 18px 20px;
}

/* Tableau a plat dans la carte */
.booster-list .q-table__container,
.booster-list .q-table__card {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.booster-list thead tr th {
    background: #1E2636;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    border: none;
    padding: 12px 16px;
}

.booster-list tbody td {
    font-size: 14px;
    color: #2B3442;
    padding: 12px 16px;
}

.booster-list tbody tr:nth-child(even) {
    background: #F7F9FC;
}

.booster-list tbody tr:hover {
    background: rgba(255, 209, 10, .12);
}

/* Bouton "Consulter" en pill soignee avec fleche */
.booster-list .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFD10A;
    border: none;
    color: #1E2636;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 4px 12px rgba(255, 209, 10, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    text-decoration: none;
}

.booster-list .btn-primary:hover {
    background: #1E2636;
    color: #FFD10A;
    box-shadow: 0 6px 16px rgba(30, 38, 54, .28);
    transform: translateY(-1px);
}


/*************RECHERCHE DE CARTES (Hertz)***********************/
/* Scopé sous .page-list-search : n'affecte que la page de recherche de cartes du tenant Hertz. */

/* ---- Panneau de recherche ---- */
.page-list-search .card-search-panel {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* En-tête sombre façon accueil (remplace le bg-brand jaune) */
.page-list-search .card-search-panel-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 18px 20px;
}

/* En-tête enrichi façon maquette : pastille + titre + sous-titre */
.page-list-search .cs-panel-head-rich {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-list-search .cs-head-badge {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #FFD10A;
    color: #1E2636;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.page-list-search .cs-head-badge .q-icon {
    font-size: 22px;
}

.page-list-search .cs-head-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
}

.page-list-search .cs-head-sub {
    font-size: 12.5px;
    color: #A8B2C2;
    margin-top: 2px;
}

/* Champs de filtre : look "filled" arrondi façon maquette + focus jaune */
.page-list-search .card-search-panel .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.page-list-search .card-search-panel .q-field--outlined .q-field__control:before {
    border-color: #E5E2DA;
}

.page-list-search .card-search-panel .q-field--outlined:hover .q-field__control:before {
    border-color: #C9C4B8;
}

.page-list-search .card-search-panel .q-field--outlined.q-field--focused .q-field__control:after {
    border: 2px solid #FFD10A;
}

.page-list-search .card-search-panel .q-field--focused .q-field__label {
    color: #1E2636;
}

/* Bouton "Rechercher" en pill jaune */
.page-list-search .btn-search-cards {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 8px 28px;
    box-shadow: 0 6px 16px rgba(255, 209, 10, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.page-list-search .btn-search-cards,
.page-list-search .btn-search-cards .q-btn__content {
    color: #1E2636 !important;
}

.page-list-search .btn-search-cards:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(255, 209, 10, .45);
}

/* Footer du panneau façon maquette : Rechercher + Réinitialiser + bascule */
.page-list-search .cs-panel-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
}

.page-list-search .btn-reset-cards {
    color: #5B6472;
    font-weight: 600;
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 14px;
}

.page-list-search .btn-reset-cards:hover {
    color: #1E2636;
    background: rgba(30, 38, 54, .05);
}

/* Bascule "Filtres avancés" (poussée à droite dans le footer) */
.page-list-search .btn-toggle-adv {
    color: #1E2636;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    border-radius: 999px;
    padding: 4px 14px;
}

.page-list-search .cs-panel-foot .btn-toggle-adv {
    margin-left: auto;
}

.page-list-search .btn-toggle-adv:hover {
    background: rgba(255, 209, 10, .18);
}

/* ---- Carte contenant les résultats ---- */
.page-list-search .card-search-results {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- Carte résultat individuelle ---- */
.page-list-search .card-search-page {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #EEF1F5;
    box-shadow: 0 6px 18px rgba(30, 38, 54, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.page-list-search .card-search-page:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(30, 38, 54, .16);
}

/* Barre d'accent verticale colorée selon le statut */
.page-list-search .card-search-page::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
    background: #FFD10A;
}

.page-list-search .card-search-page.st-ok::before { background: #2FA36B; }
.page-list-search .card-search-page.st-warn::before { background: #C98A1E; }
.page-list-search .card-search-page.st-bad::before { background: #D64550; }

/* En-tête sombre de la carte résultat */
.page-list-search .card-search-page-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    align-items: center;
    padding: 12px 12px 12px 18px;
}

.page-list-search .card-search-page-head .cs-number {
    font-weight: 750;
    font-size: 14.5px;
    letter-spacing: .3px;
}

/* Le séparateur " - " est masqué : le statut devient une pastille */
.page-list-search .card-search-page-head .cs-sep {
    display: none;
}

.page-list-search .card-search-page-head .cs-status {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Couleur de la pastille selon le statut */
.page-list-search .st-ok .cs-status { background: rgba(47, 163, 107, .95); }
.page-list-search .st-warn .cs-status { background: rgba(201, 138, 30, .95); }
.page-list-search .st-bad .cs-status { background: rgba(214, 69, 80, .95); }

/* Boutons d'action (éditer / renouveler) dans l'en-tête sombre */
.page-list-search .card-search-page-head .q-btn {
    color: #fff !important;
}

.page-list-search .card-search-page-head .q-btn:hover {
    color: #FFD10A !important;
}

/* Corps de la carte résultat */
.page-list-search .card-search-page-body {
    padding: 14px 16px 16px;
}

.page-list-search .card-search-page-body .cs-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #2B3442;
    line-height: 1.4;
    margin-bottom: 6px;
}

.page-list-search .card-search-page-body .cs-line:last-child {
    margin-bottom: 0;
}

.page-list-search .card-search-page-body .cs-line .q-icon {
    color: #7A8193;
    font-size: 18px;
}

/* Première ligne = nom du client, mis en avant */
.page-list-search .card-search-page-body .cs-who {
    font-size: 15px;
    font-weight: 650;
    color: #1E2636;
}

/* Dates atténuées */
.page-list-search .card-search-page-body .cs-date {
    color: #5B6472;
    font-size: 12.5px;
}

/* ---- Pied de carte : les deux actions, en vrais boutons libellés ---- */
.page-list-search .card-search-page-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}

.page-list-search .card-search-page-actions .cs-act {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 10px;
    margin: 0;
}

/* Quasar porte l'ombre d'élévation sur ::before, pas sur le bouton lui-même */
.page-list-search .card-search-page-actions .cs-act:before {
    box-shadow: none;
}

.page-list-search .card-search-page-actions .cs-act .q-icon {
    font-size: 17px;
}

/* Action secondaire : contour discret */
.page-list-search .card-search-page-actions .cs-act--edit {
    background: #fff;
    color: #1E2636;
    border: 1px solid #E1E5EC;
}

.page-list-search .card-search-page-actions .cs-act--edit:hover {
    background: #F4F6FA;
    border-color: #C9D0DA;
}

/* Action principale : jaune de marque */
.page-list-search .card-search-page-actions .cs-act--renew {
    background: #FFD10A;
    color: #1E2636;
    border: 1px solid #FFD10A;
}

.page-list-search .card-search-page-actions .cs-act--renew:hover {
    background: #F2C400;
    border-color: #F2C400;
}

/* ---- Pagination : boutons plats, aux couleurs Hertz (remplace le bleu primary) ---- */
/* Tous les boutons : plats (ni fond, ni ombre d'élévation qui fait une fausse bordure) */
.page-list-search .q-pagination .q-btn {
    box-shadow: none !important;
    background: transparent !important;
}

/* L'ombre d'élévation Quasar est portée par le pseudo-élément ::before */
.page-list-search .q-pagination .q-btn:before {
    box-shadow: none !important;
}

/* Pages inactives + flèches (texte primary par défaut) */
.page-list-search .q-pagination .q-btn,
.page-list-search .q-pagination .q-btn.text-primary,
.page-list-search .q-pagination .q-btn.text-primary .q-btn__content {
    color: #2B3442 !important;
}

.page-list-search .q-pagination .q-btn:hover {
    background: rgba(255, 209, 10, .18) !important;
}

/* Page active : uniquement le chiffre en jaune, aucun fond ni ombre */
.page-list-search .q-pagination .q-btn.bg-primary,
.page-list-search .q-pagination .q-btn.bg-primary .q-btn__content,
.page-list-search .q-pagination .q-btn.bg-primary .block {
    color: #FFD10A !important;
    font-weight: 800 !important;
}


/*************DÉTAIL CARTE (Hertz) — /updatecard***********************/
/* Scopé sous .edit-page (racine #app de Front/Edit). */

.edit-page .edit-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- En-tête riche : pastille + carte/numéro + dates + statut ---- */
.edit-page .edit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    padding: 18px 20px;
}

.edit-page .eh-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFD10A;
    color: #1E2636;
    display: grid;
    place-items: center;
    flex: none;
}

.edit-page .eh-badge .q-icon { font-size: 24px; }

.edit-page .eh-txt { display: flex; flex-direction: column; gap: 3px; }

.edit-page .eh-title { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }

.edit-page .eh-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #A8B2C2;
}

.edit-page .eh-meta span { display: inline-flex; align-items: center; gap: 5px; }
.edit-page .eh-meta .q-icon { font-size: 15px; }

.edit-page .eh-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.edit-page .eh-pill-ok { background: rgba(47, 163, 107, .95); }
.edit-page .eh-pill-warn { background: rgba(201, 138, 30, .95); }
.edit-page .eh-pill-bad { background: rgba(214, 69, 80, .95); }
.edit-page .eh-pill-deleted { background: rgba(255, 255, 255, .18); }

/* ---- Sections de champs ---- */
.edit-page .edit-body { padding: 4px 20px; }

.edit-page .edit-section {
    padding: 18px 0;
    border-top: 1px solid #EFEDE7;
}

.edit-page .edit-section:first-child { border-top: none; }

.edit-page .edit-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7A8193;
    margin-bottom: 14px;
}

.edit-page .edit-section-title .q-icon {
    background: #FFD10A;
    color: #1E2636;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 15px;
    display: grid;
    place-items: center;
    padding: 4px;
}

/* ---- Champs : look "filled" arrondi + focus jaune ---- */
.edit-page .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.edit-page .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.edit-page .q-field--outlined:hover .q-field__control:before { border-color: #C9C4B8; }
.edit-page .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.edit-page .q-field--focused .q-field__label { color: #1E2636; }

/* Pièce jointe (ex. KBIS) : libellé + puce cliquable */
.edit-page .edit-attach {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.edit-page .edit-attach .attach-label {
    font-size: 13px;
    font-weight: 600;
    color: #7A8193;
}

.edit-page .edit-attach .attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FAF9F5;
    border: 1px solid #E5E2DA;
    border-radius: 999px;
    padding: 7px 14px;
    color: #1E2636;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.edit-page .edit-attach .attach-chip .q-icon {
    color: #C98A1E;
    font-size: 18px;
}

.edit-page .edit-attach .attach-chip:hover {
    border-color: #FFD10A;
    background: #FFF9E3;
}

/* ---- Barre d'actions ---- */
.edit-page .edit-actions-section { border-top: 1px solid #EFEDE7; }

.edit-page .edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.edit-page .edit-actions-mail {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Boutons de la barre : plats (pas d'ombre d'élévation sur ::before) */
.edit-page .edit-actions .q-btn:before,
.edit-page .edit-annex .acard .q-btn:before { box-shadow: none !important; }

/* Enregistrer = pill jaune */
.edit-page .edit-actions .ea-save {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(255, 209, 10, .35);
}

.edit-page .edit-actions .ea-save,
.edit-page .edit-actions .ea-save .q-btn__content { color: #1E2636 !important; }

/* Supprimer = contour rouge discret */
.edit-page .edit-actions .ea-delete {
    background: transparent !important;
    border: 1px solid rgba(214, 69, 80, .4);
    border-radius: 999px;
    font-weight: 650;
}

.edit-page .edit-actions .ea-delete,
.edit-page .edit-actions .ea-delete .q-btn__content { color: #D64550 !important; }

/* E-mails = boutons secondaires clairs */
.edit-page .edit-actions .ea-mail {
    background: #FFFFFF !important;
    border: 1px solid #E5E2DA;
    border-radius: 999px;
    font-weight: 600;
}

.edit-page .edit-actions .ea-mail,
.edit-page .edit-actions .ea-mail .q-btn__content { color: #2B3442 !important; }

/* ---- Cartes annexes (Client important / Statut renouvellement) ---- */
.edit-page .edit-annex .acard {
    border-radius: 16px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 6px 18px rgba(30, 38, 54, .08);
    overflow: hidden;
}

.edit-page .edit-annex .acard-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    font-weight: 650;
    padding: 14px 16px;
}

.edit-page .edit-annex .acard .q-btn[type="submit"] {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 650;
}

.edit-page .edit-annex .acard .q-btn[type="submit"],
.edit-page .edit-annex .acard .q-btn[type="submit"] .q-btn__content { color: #1E2636 !important; }


/*************SÉLECTEUR DES 3 RECHERCHES (Hertz)***********************/
/* Partial _HeaderSearchCard, injecté en tête de searchcard / searchprospect / searchcommercial. */

.cs-switch-wrap {
    margin-top: 26px;
    margin-bottom: 20px;
}

.cs-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cs-switch__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    font-family: inherit;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    padding: 12px 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(30, 38, 54, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.cs-switch__item:hover {
    border-color: #D8DDE6;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(30, 38, 54, .12);
}

.cs-switch__ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #F4F6FA;
    color: #7A8193;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.cs-switch__ico .q-icon {
    font-size: 22px;
}

.cs-switch__txt {
    display: block;
    min-width: 0;
}

.cs-switch__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1E2636;
    line-height: 1.25;
}

.cs-switch__sub {
    display: block;
    font-size: 11.5px;
    color: #7A8193;
    margin-top: 2px;
    line-height: 1.3;
}

/* Onglet actif : fond jaune de marque. Le bandeau sombre était trop proche de l'en-tête
   « Rechercher une adhésion » juste en dessous, on ne distinguait plus l'onglet du panneau. */
.cs-switch__item.is-active {
    background: #FFD10A;
    border-color: #FFD10A;
    box-shadow: 0 10px 22px rgba(255, 209, 10, .34);
    cursor: default;
}

.cs-switch__item.is-active:hover {
    transform: none;
}

.cs-switch__item.is-active .cs-switch__ico {
    background: transparent;
    color: #1E2636;
}

.cs-switch__item.is-active .cs-switch__label {
    color: #1E2636;
}

.cs-switch__item.is-active .cs-switch__sub {
    color: rgba(26, 31, 39, .72);
}

/* Bandeau d'aide contextuel sous le sélecteur */
.cs-help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #FFFCF0;
    border: 1px solid #F3E4A6;
    border-left: 4px solid #FFD10A;
    border-radius: 12px;
    text-align: left;
}

.cs-help__ico {
    color: #C98A1E;
    font-size: 20px;
    flex: none;
    margin-top: 1px;
}

.cs-help__main {
    font-size: 13.5px;
    font-weight: 700;
    color: #1E2636;
    line-height: 1.45;
}

.cs-help__sub {
    font-size: 12.5px;
    color: #5B6472;
    line-height: 1.5;
    margin-top: 3px;
}

.cs-help a {
    color: #1E2636;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .cs-switch {
        grid-template-columns: 1fr;
    }
}


/*************RECHERCHE PROSPECTS & CONTACTS COMMERCIAUX (Hertz)***********************/
/* Compléments aux styles .page-list-search, partagés par searchprospect et searchcommercial. */

/* Barre d'action au-dessus du panneau (ex. « Nouvelle fiche ») */
.page-list-search .cs-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.page-list-search .btn-new-record {
    background: #1E2636 !important;
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: .2px;
    padding: 8px 22px;
}

.page-list-search .btn-new-record,
.page-list-search .btn-new-record .q-btn__content {
    color: #fff !important;
}

.page-list-search .btn-new-record:hover {
    background: #2A3B4D !important;
}

/* Case à cocher des filtres avancés : alignée sur la hauteur des champs */
.page-list-search .cs-check {
    display: flex;
    align-items: center;
}

/* En-tête empilé : le titre (raison sociale, souvent long) occupe sa propre ligne,
   la pastille de statut passe dessous. Réservé aux recherches prospects / commerciaux ;
   la recherche de cartes garde son titre et son statut sur une seule ligne. */
.page-list-search .card-search-page-head.cs-head-stacked .cs-number {
    display: block;
    line-height: 1.3;
}

.page-list-search .card-search-page-head.cs-head-stacked .cs-status {
    margin-left: 0;
    margin-top: 6px;
}

/* Liens de contact dans le corps de carte (mailto / tel) */
.page-list-search .card-search-page-body .cs-line a {
    color: #2B3442;
    text-decoration: none;
    word-break: break-word;
}

.page-list-search .card-search-page-body .cs-line a:hover {
    color: #1E2636;
    text-decoration: underline;
}

/* Séparateur interne entre contact et rattachement */
.page-list-search .card-search-page-body .cs-divider {
    height: 1px;
    background: #EEF1F5;
    margin: 10px 0;
}

/* Étiquettes complémentaires (origine web, CNT…) */
.page-list-search .card-search-page-body .cs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.page-list-search .card-search-page-body .cs-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #F1F3F7;
    color: #5B6472;
}

.page-list-search .card-search-page-body .cs-tag .q-icon {
    font-size: 14px;
    color: inherit;
}

.page-list-search .card-search-page-body .cs-tag--web {
    background: rgba(255, 209, 10, .22);
    color: #8A6D00;
}

/* État « aucun résultat » : remplace la carte de résultats, qui resterait vide */
.page-list-search .cs-empty {
    text-align: center;
    padding: 44px 24px;
    background: #fff;
    border: 1px dashed #D9DCE1;
    border-radius: 20px;
}

.page-list-search .cs-empty .q-icon {
    font-size: 40px;
    color: #B8BDC7;
}

.page-list-search .cs-empty__title {
    margin-top: 10px;
    font-size: 15.5px;
    font-weight: 700;
    color: #1E2636;
}

.page-list-search .cs-empty__sub {
    margin-top: 5px;
    font-size: 13px;
    color: #7A8193;
}

/* Message de contrôle de saisie dans le pied du panneau */
.page-list-search .cs-form-error {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #D64550;
}

.page-list-search .cs-form-error .q-icon {
    font-size: 18px;
}

/* Case à cocher alignée sur la hauteur des champs (détail contact) */
.edit-page .edit-check {
    display: flex;
    align-items: center;
}


/*************MODALES (Hertz)***********************/
/* Les q-dialog Quasar sont téléportées dans <body> : ces règles ne peuvent pas être
   scopées sous .edit-page / .page-list-search, d'où la classe portée par la q-card. */

.hz-dialog {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 16, 24, .28);
}

.hz-dialog .hz-dialog__head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #fff;
    padding: 16px 18px;
}

.hz-dialog .hz-dialog__ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #FFD10A;
    color: #1E2636;
    display: grid;
    place-items: center;
    flex: none;
}

.hz-dialog .hz-dialog__ico .q-icon { font-size: 21px; }

.hz-dialog .hz-dialog__title {
    flex: 1;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}

.hz-dialog .hz-dialog__close { color: rgba(255, 255, 255, .7); }
.hz-dialog .hz-dialog__close:hover { color: #fff; }

.hz-dialog .hz-dialog__body { padding: 20px; }

.hz-dialog .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.hz-dialog .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.hz-dialog .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.hz-dialog .q-field--focused .q-field__label { color: #1E2636; }

.hz-dialog .hz-dialog__foot {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px 18px;
    border-top: 1px solid #EFEDE7;
}

.hz-dialog .q-btn:before { box-shadow: none !important; }

.hz-dialog .hz-btn-primary {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 8px 26px;
}

.hz-dialog .hz-btn-primary,
.hz-dialog .hz-btn-primary .q-btn__content { color: #1E2636 !important; }


/*************PERFORMANCE PAR POINT DE VENTE (Hertz) — /perfcards***********************/
/* Scopé sous .perf-page (racine #app quand tenant Hertz). */

/* ---- Panneau de filtre : même identité que les pages de recherche ---- */
.perf-page .card-search-panel {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

.perf-page .card-search-panel-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    padding: 18px 20px;
}

.perf-page .cs-panel-head-rich {
    display: flex;
    align-items: center;
    gap: 14px;
}

.perf-page .cs-head-badge {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #FFD10A;
    color: #1E2636;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.perf-page .cs-head-badge .q-icon { font-size: 22px; }
.perf-page .cs-head-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.perf-page .cs-head-sub { font-size: 12.5px; color: #A8B2C2; margin-top: 2px; }

/* Champs "filled" arrondis à focus jaune */
.perf-page .card-search-panel .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.perf-page .card-search-panel .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.perf-page .card-search-panel .q-field--outlined:hover .q-field__control:before { border-color: #C9C4B8; }
.perf-page .card-search-panel .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.perf-page .card-search-panel .q-field--focused .q-field__label { color: #1E2636; }

.perf-page .cs-panel-foot { padding: 16px 20px; }

.perf-page .btn-search-cards {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 8px 28px;
    box-shadow: 0 6px 16px rgba(255, 209, 10, .35);
}

.perf-page .btn-search-cards,
.perf-page .btn-search-cards .q-btn__content { color: #1E2636 !important; }
.perf-page .btn-search-cards:before { box-shadow: none !important; }

/* ---- Bandeau d'indicateurs clés ---- */
.perf-page .perf-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.perf-page .perf-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(30, 38, 54, .08);
}

.perf-page .perf-kpi__ico {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: none;
}

.perf-page .perf-kpi__ico .q-icon { font-size: 24px; }
.perf-page .perf-kpi__ico--cards { background: rgba(255, 209, 10, .18); color: #A8820A; }
.perf-page .perf-kpi__ico--renew { background: rgba(47, 163, 107, .14); color: #2FA36B; }
.perf-page .perf-kpi__ico--expir { background: rgba(201, 138, 30, .14); color: #C98A1E; }

.perf-page .perf-kpi__value { font-size: 28px; font-weight: 800; line-height: 1.1; color: #1E2636; }
.perf-page .perf-kpi__value span { font-size: 17px; font-weight: 700; color: #7A8193; }
.perf-page .perf-kpi__label { font-size: 12.5px; color: #7A8193; margin-top: 3px; }

/* ---- Carte par point de vente ---- */
.perf-page .perf-account { margin-bottom: 16px; }

.perf-page .perf-account__card {
    border-radius: 18px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 8px 22px rgba(30, 38, 54, .09);
    overflow: hidden;
}

.perf-page .perf-account__head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
}

.perf-page .perf-account__ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .10);
    color: #FFD10A;
    display: grid;
    place-items: center;
    flex: none;
}

.perf-page .perf-account__ico .q-icon { font-size: 20px; }
.perf-page .perf-account__name { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.perf-page .perf-account__code { font-size: 12px; color: #A8B2C2; margin-top: 2px; }

.perf-page .perf-account__badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 999px;
    background: #FFD10A;
    color: #1E2636;
    white-space: nowrap;
}

.perf-page .perf-account__body { padding: 8px 12px 12px; }

/* ---- Tableau des vendeurs ---- */
.perf-page .perf-table {
    background: transparent;
}

.perf-page .perf-table thead th {
    background: #F7F8FA;
    color: #7A8193;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    font-weight: 700;
}

.perf-page .perf-table tbody td {
    font-size: 13.5px;
    color: #2B3442;
}

.perf-page .perf-table tbody tr:hover td { background: #FAFBFD; }

/* Taux de renouvellement en pastille colorée */
.perf-page .perf-rate {
    display: inline-block;
    font-weight: 700;
    font-size: 12.5px;
    padding: 2px 10px;
    border-radius: 999px;
}

.perf-page .perf-rate.is-good { background: rgba(47, 163, 107, .14); color: #2FA36B; }
.perf-page .perf-rate.is-mid { background: rgba(201, 138, 30, .14); color: #C98A1E; }
.perf-page .perf-rate.is-low { background: rgba(214, 69, 80, .12); color: #D64550; }

/* Bouton d'export secondaire clair */
.perf-page .perf-export {
    background: #fff !important;
    border: 1px solid #E5E2DA;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 16px;
}

.perf-page .perf-export,
.perf-page .perf-export .q-btn__content { color: #2B3442 !important; }
.perf-page .perf-export:before { box-shadow: none !important; }

/* ---- État "aucun résultat" ---- */
.perf-page .perf-empty {
    text-align: center;
    padding: 40px 24px;
    background: #fff;
    border: 1px dashed #D9DCE1;
    border-radius: 18px;
}

.perf-page .perf-empty .q-icon { font-size: 38px; color: #B8BDC7; }
.perf-page .perf-empty__title { margin-top: 10px; font-size: 15px; font-weight: 700; color: #1E2636; }
.perf-page .perf-empty__sub { margin-top: 5px; font-size: 13px; color: #7A8193; }

@media (max-width: 720px) {
    .perf-page .perf-kpis { grid-template-columns: 1fr; }
}


/*************SUIVI DES VENDEURS (Hertz) — /kpicards***********************/
/* Scopé sous .kpi-page (racine #app quand tenant Hertz). */

/* ---- Panneau de recherche : même identité que les pages de recherche ---- */
.kpi-page .card-search-panel {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

.kpi-page .card-search-panel-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    padding: 18px 20px;
}

.kpi-page .cs-panel-head-rich {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kpi-page .cs-head-badge {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #FFD10A;
    color: #1E2636;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.kpi-page .cs-head-badge .q-icon { font-size: 22px; }
.kpi-page .cs-head-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.kpi-page .cs-head-sub { font-size: 12.5px; color: #A8B2C2; margin-top: 2px; }

.kpi-page .card-search-panel .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.kpi-page .card-search-panel .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.kpi-page .card-search-panel .q-field--outlined:hover .q-field__control:before { border-color: #C9C4B8; }
.kpi-page .card-search-panel .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.kpi-page .card-search-panel .q-field--focused .q-field__label { color: #1E2636; }

.kpi-page .cs-panel-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
}

.kpi-page .btn-search-cards {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 8px 28px;
    box-shadow: 0 6px 16px rgba(255, 209, 10, .35);
}

.kpi-page .btn-search-cards,
.kpi-page .btn-search-cards .q-btn__content { color: #1E2636 !important; }
.kpi-page .btn-search-cards:before { box-shadow: none !important; }

.kpi-page .btn-reset-cards {
    color: #5B6472;
    font-weight: 600;
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 14px;
}

.kpi-page .btn-reset-cards:hover {
    color: #1E2636;
    background: rgba(30, 38, 54, .05);
}

.kpi-page .card-search-results {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- Carte vendeur ---- */
.kpi-page .kpi-user {
    border-radius: 16px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 6px 18px rgba(30, 38, 54, .08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.kpi-page .kpi-user:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(30, 38, 54, .16);
}

.kpi-page .kpi-user__body {
    text-align: center;
    padding: 20px 16px 12px;
    flex: 1;
}

.kpi-page .kpi-user__avatar {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #FFD10A;
    font-weight: 800;
    font-size: 20px;
    display: grid;
    place-items: center;
    letter-spacing: .5px;
}

.kpi-page .kpi-user__name {
    font-size: 15.5px;
    font-weight: 700;
    color: #1E2636;
    line-height: 1.25;
}

.kpi-page .kpi-user__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: #5B6472;
    margin-top: 7px;
    word-break: break-word;
}

.kpi-page .kpi-user__meta .q-icon { font-size: 15px; color: #7A8193; }

.kpi-page .kpi-user__foot {
    padding: 12px 16px 16px;
    border-top: 1px solid #F1F2F5;
    justify-content: center;
}

.kpi-page .kpi-user__btn {
    width: 100%;
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 16px;
}

.kpi-page .kpi-user__btn,
.kpi-page .kpi-user__btn .q-btn__content { color: #1E2636 !important; }
.kpi-page .kpi-user__btn:before { box-shadow: none !important; }

/* ---- État "aucun résultat" ---- */
.kpi-page .cs-empty {
    text-align: center;
    padding: 44px 24px;
    background: #fff;
    border: 1px dashed #D9DCE1;
    border-radius: 20px;
}

.kpi-page .cs-empty .q-icon { font-size: 40px; color: #B8BDC7; }
.kpi-page .cs-empty__title { margin-top: 10px; font-size: 15.5px; font-weight: 700; color: #1E2636; }
.kpi-page .cs-empty__sub { margin-top: 5px; font-size: 13px; color: #7A8193; }


/*************DÉTAIL D'UN VENDEUR (Hertz) — /resultcard***********************/
/* Scopé sous .result-page (racine #app). */

.result-page .result-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- En-tête vendeur ---- */
.result-page .result-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.result-page .result-head__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFD10A;
    color: #1E2636;
    font-weight: 800;
    font-size: 18px;
    display: grid;
    place-items: center;
    flex: none;
    letter-spacing: .5px;
}

.result-page .result-head__name { font-size: 17px; font-weight: 750; line-height: 1.2; }
.result-page .result-head__sub { font-size: 12.5px; color: #A8B2C2; margin-top: 2px; }

/* ---- Bloc points (bénéficiaire incentive) ---- */
.result-page .result-points { padding: 20px; }

.result-page .result-points__row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

.result-page .result-points__tile {
    flex: 1;
    min-width: 180px;
    background: #F7F8FA;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 16px 18px;
}

.result-page .result-points__tile--accent {
    background: #FFFCF0;
    border-color: #F3E4A6;
}

.result-page .result-points__val { font-size: 26px; font-weight: 800; color: #1E2636; line-height: 1.1; }
.result-page .result-points__val span { font-size: 15px; font-weight: 700; color: #7A8193; margin-left: 3px; }
.result-page .result-points__lbl { font-size: 12.5px; color: #7A8193; margin-top: 4px; }

.result-page .result-points__shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    background: #FFD10A;
    color: #1A1400;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}

.result-page .result-points__shop:hover { filter: brightness(.96); }
.result-page .result-points__shop .q-icon { font-size: 19px; }

.result-page .result-points__other-title {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7A8193;
}

.result-page .result-points__other {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.result-page .result-points__chip {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(30, 38, 54, .05);
}

.result-page .result-points__chip-lbl { font-size: 12px; color: #7A8193; }
.result-page .result-points__chip-val { font-size: 15px; font-weight: 700; color: #1E2636; margin-top: 2px; }

.result-page .result-points__toggle { margin-top: 16px; }

/* ---- Corps : tableau des cartes ---- */
.result-page .result-body { padding: 20px; }

.result-page .result-body__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7A8193;
    margin-bottom: 12px;
}

.result-page .result-table {
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    overflow: hidden;
}

.result-page .result-table thead th {
    background: #F7F8FA;
    color: #7A8193;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    font-weight: 700;
}

.result-page .result-table tbody td { font-size: 13.5px; color: #2B3442; }
.result-page .result-table tbody tr:hover td { background: #FAFBFD; }

/* Pastille de statut */
.result-page .result-status {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 999px;
}

.result-page .result-status.is-ok { background: rgba(47, 163, 107, .14); color: #2FA36B; }
.result-page .result-status.is-warn { background: rgba(201, 138, 30, .14); color: #C98A1E; }
.result-page .result-status.is-bad { background: rgba(214, 69, 80, .12); color: #D64550; }

/* Pastille de points */
.result-page .result-pointbadge {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 209, 10, .22);
    color: #8A6D00;
}

/* ---- Aucune carte ---- */
.result-page .result-empty {
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed #D9DCE1;
    border-radius: 14px;
}

.result-page .result-empty .q-icon { font-size: 38px; color: #B8BDC7; }
.result-page .result-empty__title { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: #5B6472; }

@media (max-width: 600px) {
    .result-page .result-points__shop { width: 100%; justify-content: center; }
}


/*************GESTION DES UTILISATEURS (Hertz) — /manageusers***********************/
/* Scopé sous .mu-page (racine #app). */

.mu-page .mu-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- En-tête ---- */
.mu-page .mu-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}

.mu-page .mu-head__badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFD10A;
    color: #1E2636;
    display: grid;
    place-items: center;
    flex: none;
}

.mu-page .mu-head__badge .q-icon { font-size: 23px; }
.mu-page .mu-head__title { font-size: 17px; font-weight: 750; line-height: 1.2; }
.mu-page .mu-head__sub { font-size: 12.5px; color: #A8B2C2; margin-top: 2px; }

/* Encart d'explication sous l'en-tête */
.mu-page .mu-intro {
    padding: 16px 20px;
    background: #FFFCF0;
    border-bottom: 1px solid #F3E4A6;
    color: #5B6472;
    font-size: 13.5px;
    line-height: 1.55;
}

.mu-page .mu-intro .text-h6 {
    font-size: 15px;
    font-weight: 700;
    color: #1E2636;
    margin-bottom: 4px;
}

.mu-page .mu-body { padding: 20px; }

.mu-page .mu-back { color: #5B6472; font-weight: 600; }
.mu-page .mu-back:hover { color: #1E2636; }

/* ---- Sections ---- */
.mu-page .mu-section {
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(30, 38, 54, .06);
}

.mu-page .mu-section__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7A8193;
    margin-bottom: 16px;
}

.mu-page .mu-section__title .q-icon {
    background: #FFD10A;
    color: #1E2636;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 15px;
    display: grid;
    place-items: center;
    padding: 4px;
}

/* Le q-gutter-md du formulaire remonte son contenu (margin-top négatif) et vient
   coller le premier champ au titre : on annule ce décalage juste sous le titre. */
.mu-page .mu-section > .q-form.q-gutter-md,
.mu-page .mu-section > .q-gutter-md {
    margin-top: 0;
}

/* ---- Champs "filled" à focus jaune ---- */
.mu-page .q-field--outlined .q-field__control {
    border-radius: 12px;
    background: #FAF9F5;
}

.mu-page .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.mu-page .q-field--outlined:hover .q-field__control:before { border-color: #C9C4B8; }
.mu-page .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.mu-page .q-field--focused .q-field__label { color: #1E2636; }

/* Bloc identifiants (utilisateur existant, non modifiable) */
.mu-page .mu-idblock {
    background: #F7F8FA;
    border: 1px solid #EEF1F5;
    border-radius: 12px;
    padding: 12px 14px;
}

.mu-page .mu-idblock__row { font-size: 14px; color: #1E2636; }
.mu-page .mu-idblock__row + .mu-idblock__row { margin-top: 6px; }
.mu-page .mu-idblock__row span { color: #7A8193; margin-right: 6px; }

/* ---- Boutons ---- */
.mu-page .mu-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.mu-page .mu-btn-save {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 8px 22px;
}

.mu-page .mu-btn-save,
.mu-page .mu-btn-save .q-btn__content { color: #1E2636 !important; }
.mu-page .mu-btn-save:before { box-shadow: none !important; }

.mu-page .mu-btn-block {
    background: transparent !important;
    border: 1px solid rgba(214, 69, 80, .4);
    border-radius: 999px;
    font-weight: 650;
    padding: 8px 20px;
}

.mu-page .mu-btn-block,
.mu-page .mu-btn-block .q-btn__content { color: #D64550 !important; }
.mu-page .mu-btn-block:before { box-shadow: none !important; }

/* ---- Comptes rattachés ---- */
.mu-page .mu-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F2F5;
}

.mu-page .mu-account__info {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #2B3442;
}

.mu-page .mu-account__code { font-weight: 700; color: #1E2636; }
.mu-page .mu-account__town { color: #7A8193; }

.mu-page .mu-account__pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 209, 10, .22);
    color: #8A6D00;
}

.mu-page .mu-account__actions { display: flex; gap: 2px; flex: none; }
.mu-page .mu-account__set { color: #C98A1E !important; }
.mu-page .mu-account__del { color: #D64550 !important; }

.mu-page .mu-addaccount { margin-top: 16px; }

/* ---- Filtre + liste des utilisateurs ---- */
.mu-page .mu-filter { max-width: 420px; margin-bottom: 18px; }

.mu-page .mu-list { display: flex; flex-direction: column; gap: 10px; }

.mu-page .mu-user {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 4px 14px rgba(30, 38, 54, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mu-page .mu-user:hover {
    border-color: #D8DDE6;
    box-shadow: 0 10px 24px rgba(30, 38, 54, .12);
}

.mu-page .mu-user__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #FFD10A;
    font-weight: 800;
    font-size: 16px;
    display: grid;
    place-items: center;
    flex: none;
    letter-spacing: .5px;
}

.mu-page .mu-user__txt { flex: 1; min-width: 0; }
.mu-page .mu-user__name { font-size: 15px; font-weight: 700; color: #1E2636; line-height: 1.25; }

.mu-page .mu-user__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #5B6472;
    margin-top: 3px;
    margin-right: 14px;
}

.mu-page .mu-user__meta .q-icon { font-size: 14px; color: #7A8193; }

.mu-page .mu-user__edit {
    color: #1E2636 !important;
    font-weight: 600;
    border-radius: 999px;
    flex: none;
}

.mu-page .mu-user__edit:hover { background: rgba(255, 209, 10, .18); }

/* ---- Barre d'ajout ---- */
.mu-page .mu-addbar {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F1F2F5;
}

/* ---- États vides / consigne ---- */
.mu-page .mu-empty {
    text-align: center;
    padding: 36px 24px;
    border: 1px dashed #D9DCE1;
    border-radius: 14px;
}

.mu-page .mu-empty .q-icon { font-size: 36px; color: #B8BDC7; }
.mu-page .mu-empty__title { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: #5B6472; }


/*************VALIDATION DES CARTES (Hertz) — /validcard***********************/
/* Scopé sous .vc-page (racine #app). */

.vc-page .vc-card {
    border-radius: 20px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 14px 34px rgba(30, 38, 54, .10);
    overflow: hidden;
}

/* ---- En-tête ---- */
.vc-page .vc-head {
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.vc-page .vc-head__badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFD10A;
    color: #1E2636;
    display: grid;
    place-items: center;
    flex: none;
}

.vc-page .vc-head__badge .q-icon { font-size: 23px; }
.vc-page .vc-head__title { font-size: 17px; font-weight: 750; line-height: 1.2; }
.vc-page .vc-head__sub { font-size: 12.5px; color: #A8B2C2; margin-top: 2px; }

.vc-page .vc-card__body { padding: 12px 16px 16px; }

/* ---- Tableau ---- */
.vc-page .vc-search { min-width: 220px; }
.vc-page .vc-search .q-field__control { border-radius: 10px; background: #FAF9F5; }

.vc-page .vc-table thead th {
    background: #F7F8FA;
    color: #7A8193;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    font-weight: 700;
}

.vc-page .vc-table tbody td { font-size: 13.5px; color: #2B3442; }
.vc-page .vc-table tbody tr:hover td { background: #FAFBFD; }

.vc-page .vc-open {
    background: #FFD10A !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 16px;
}

.vc-page .vc-open,
.vc-page .vc-open .q-btn__content { color: #1E2636 !important; }
.vc-page .vc-open:before { box-shadow: none !important; }

.vc-page .vc-nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 30px 0;
    color: #7A8193;
    font-size: 14px;
}

.vc-page .vc-nodata .q-icon { font-size: 22px; color: #2FA36B; }

/* Consigne sous le tableau */
.vc-page .vc-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #FFFCF0;
    border: 1px solid #F3E4A6;
    border-left: 4px solid #FFD10A;
    border-radius: 12px;
    font-size: 13px;
    color: #5B6472;
}

.vc-page .vc-hint .q-icon { color: #C98A1E; font-size: 18px; flex: none; }

/* ---- Modale de validation ---- */
.vc-dialog {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 16, 24, .28);
}

.vc-dialog .vc-dialog__head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(160deg, #2A3B4D 0%, #1E2636 100%);
    color: #fff;
    padding: 16px 20px;
}

.vc-dialog .vc-dialog__ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #FFD10A;
    color: #1E2636;
    display: grid;
    place-items: center;
    flex: none;
}

.vc-dialog .vc-dialog__ico .q-icon { font-size: 21px; }
.vc-dialog .vc-dialog__title { flex: 1; font-size: 16.5px; font-weight: 750; }
.vc-dialog .vc-dialog__close { color: rgba(255, 255, 255, .7); }
.vc-dialog .vc-dialog__close:hover { color: #fff; }

.vc-dialog .vc-dialog__body { padding: 20px; }

/* Cartes d'information */
.vc-dialog .vc-info {
    height: 100%;
    background: #fff;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(30, 38, 54, .05);
}

.vc-dialog .vc-info__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7A8193;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F2F5;
}

.vc-dialog .vc-info__title .q-icon {
    background: #FFD10A;
    color: #1E2636;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 15px;
    display: grid;
    place-items: center;
    padding: 4px;
}

.vc-dialog .vc-info__row {
    font-size: 13.5px;
    color: #2B3442;
    line-height: 1.5;
    margin-bottom: 5px;
    word-break: break-word;
}

.vc-dialog .vc-info__row span { color: #7A8193; margin-right: 5px; }

.vc-dialog .vc-info__attach { margin-top: 10px; }

.vc-dialog .vc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FAF9F5;
    border: 1px solid #E5E2DA;
    border-radius: 999px;
    padding: 7px 14px;
    color: #1E2636;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.vc-dialog .vc-chip .q-icon { color: #C98A1E; font-size: 17px; }
.vc-dialog .vc-chip:hover { border-color: #FFD10A; background: #FFF9E3; }

/* Champs "filled" à focus jaune */
.vc-dialog .q-field--outlined .q-field__control { border-radius: 12px; background: #FAF9F5; }
.vc-dialog .q-field--outlined .q-field__control:before { border-color: #E5E2DA; }
.vc-dialog .q-field--outlined.q-field--focused .q-field__control:after { border: 2px solid #FFD10A; }
.vc-dialog .q-field--focused .q-field__label { color: #1E2636; }

/* Blocs décision */
.vc-dialog .vc-decision { margin-top: 6px; }

.vc-dialog .vc-action {
    height: 100%;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #EEF1F5;
}

.vc-dialog .vc-action--valid { background: #F5FBF7; border-color: #CDE9D9; }
.vc-dialog .vc-action--reject { background: #FDF6F6; border-color: #F1D3D5; }

.vc-dialog .vc-action__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1E2636;
    margin-bottom: 12px;
}

.vc-dialog .vc-action--valid .vc-action__title .q-icon { color: #2FA36B; }
.vc-dialog .vc-action--reject .vc-action__title .q-icon { color: #D64550; }

.vc-dialog .vc-action__cdp { font-size: 13px; color: #5B6472; margin-bottom: 10px; }
.vc-dialog .vc-action__cdp b { color: #1E2636; }

.vc-dialog .vc-action__foot { margin-top: 12px; }

.vc-dialog .vc-btn-valid {
    background: #2FA36B !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 8px 24px;
}

.vc-dialog .vc-btn-valid,
.vc-dialog .vc-btn-valid .q-btn__content { color: #fff !important; }
.vc-dialog .vc-btn-valid:before { box-shadow: none !important; }

.vc-dialog .vc-btn-reject {
    background: transparent !important;
    border: 1px solid rgba(214, 69, 80, .5);
    border-radius: 999px;
    font-weight: 650;
    padding: 8px 22px;
}

.vc-dialog .vc-btn-reject,
.vc-dialog .vc-btn-reject .q-btn__content { color: #D64550 !important; }
.vc-dialog .vc-btn-reject:before { box-shadow: none !important; }