.tooltip {
    z-index: 9999 !important;
}

/* Liste "jolie" Code/Nom — Libellé/Prix + boutons modifier/supprimer (catégories de chambre, tarifs) :
   utilisée à la fois sur Mon compte (templates/account/account.html.twig) et dans la modale "réglage" de
   la page Promotions (templates/promotions/promotions.html.twig) — CSS globale plutôt que dupliquée dans
   le <style> de chaque page, pour ne pas l'oublier la prochaine fois que ces classes sont réutilisées
   ailleurs (cf. account.js, qui gère déjà ces éléments de façon globale). */
.account-space-categories-list, .account-rate-plans-list, .account-space-categories-suggested-list, .account-rate-plans-suggested-list { border: 1px solid #edeef2; border-radius: 8px; overflow: hidden; }
.account-space-category-item, .account-rate-plan-item, .rate-plan-manage-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; font-size: 0.875rem; border-bottom: 1px solid #edeef2;
}
.account-space-category-item:last-child, .account-rate-plan-item:last-child, .rate-plan-manage-item:last-child { border-bottom: none; }
.account-space-category-display, .account-rate-plan-display, .rate-plan-manage-display { word-break: break-word; flex: 1 1 auto; }
.account-space-category-actions, .account-rate-plan-actions, .rate-plan-manage-actions { flex-shrink: 0; display: flex; gap: 6px; }
.account-space-category-item-editing { gap: 8px; padding: 8px 12px; }
.account-space-category-item-editing input { font-size: 0.85rem; }

/* poignée de cliqué-glissé (réordonnancement catégories de chambre / tarifs, cf. assets/js/account.js et
   discount-simulator.js) : classe partagée par les 3 listes (.account-space-category-item,
   .account-rate-plan-item, .rate-plan-manage-item), CSS globale pour la même raison que ci-dessus */
.account-drag-handle { flex-shrink: 0; color: #9ca3af; cursor: grab; font-size: 0.8rem; line-height: 1; }
[draggable="true"] { cursor: grab; }
[draggable="true"].is-dragging { opacity: 0.4; }
/* même ligne que le garde-fou JS ci-dessus (dragstart annulé si le geste ne part pas de la poignée) :
   empêche en plus WebKit/Blink d'amorcer un "fantôme" de glissé au clic sur un bouton/champ de la ligne */
[draggable="true"] button, [draggable="true"] input, [draggable="true"] .account-space-category-actions,
[draggable="true"] .account-rate-plan-actions, [draggable="true"] .rate-plan-manage-actions {
    -webkit-user-drag: none;
    user-select: text;
}

/* Supprimer le border-radius sur les liens du menu en mode réduit */
.sidebar-icon-only .sidebar .nav .nav-item .nav-link {
    border-radius: 0 !important;
}

/* Désactiver l'effet hover-open en mode sidebar réduite */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        left: -9999px !important;
    }
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Libellé section admin dans le menu */
@media (min-width: 992px) {
    .sidebar-icon-only .admin-label-full { display: none !important; }
    .sidebar-icon-only .admin-label-short { display: inline !important; }
}

#yield-fixed-col {
    flex-shrink: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

#yield-fixed-col thead th {
    border-radius: 8px 0 0 8px !important;
}

#yield-table thead th:first-child {
    border-radius: 0 !important;
}

#themeModal .form-check, #qaModal .form-check {
    margin-left: 25px;
}

#yield-table.history-table th:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

#yield-table tbody td {
    min-width: 150px;
}

.ind-checkbox:checked,
.comp-checkbox:checked,
.final-checkbox:checked,
.yind-checkbox:checked,
.n1-checkbox:checked,
.notif-visibility-radio:checked,
.notif-start-radio:checked,
.notif-end-radio:checked,
#notif-active:checked {
    background-color: #4747a2 !important;
    border-color: #4747a2 !important;
}

.ind-checkbox:focus,
.comp-checkbox:focus,
.final-checkbox:focus,
.yind-checkbox:focus,
.n1-checkbox:focus,
.notif-visibility-radio:focus,
.notif-start-radio:focus,
.notif-end-radio:focus,
#notif-active:focus {
    border-color: #4747a2 !important;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25) !important;
}

#btn-calendar-picker:hover, #btn-budget-year-picker:hover, #btn-history-date-picker:hover, #import-past-date-btn:hover,
#btn-add-event-zones:hover, #btn-add-event:hover, #btn-event-year-picker:hover, #btn-add-location:hover,
#btn-event-zone-picker:hover, #btn-dashboard-year-picker:hover, #btn-dropdown-comparatif:hover, #indicateurs-dropdown:hover,
#btn-dashboard-import-date-picker:hover, #btn-period-pill:hover, #btn-reset-dates:hover, #btn-faq-search:hover,
#btn-calendar-next:hover, #btn-calendar-prev:hover, #yield-indicateurs-dropdown:hover, #btn-promotions-year-picker:hover,
#btn-add-promotion:hover, #btn-promo-simulator:hover, #btn-price-config:hover, #btn-space-category-config:hover,
#btn-budget-copy-previous-year:hover, #btn-demand-prev:hover, #btn-demand-next:hover, #btn-demand-month-picker:hover {
    background-color: transparent !important;
    border-color: inherit !important;
    color: inherit !important;
}

.w-5 {
    width: 5% !important;
}
.w-10 {
    width: 10% !important;
}
.w-15 {
    width: 15% !important;
}
.w-20 {
    width: 20% !important;
}
.w-25 {
    width: 25% !important;
}
.w-30 {
    width: 30% !important;
}
.w-35 {
    width: 35% !important;
}
.w-40 {
    width: 40% !important;
}
.w-45 {
    width: 45% !important;
}
.w-50 {
    width: 50% !important;
}
.w-55 {
    width: 55% !important;
}
.w-60 {
    width: 60% !important;
}
.w-65 {
    width: 65% !important;
}
.w-70 {
    width: 70% !important;
}
.w-75 {
    width: 75% !important;
}
.w-80 {
    width: 80% !important;
}
.w-85 {
    width: 85% !important;
}
.w-90 {
    width: 90% !important;
}
.w-95 {
    width: 95% !important;
}
.w-100 {
    width: 100% !important;
}

.dot-opacity-loader {
    width: 50px;
    height: 15px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}
.dot-opacity-loader span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #4B49AC;
    margin: 5px 2px;
    opacity: 0;
}

#yield-table tbody tr:hover {
    background-color: color(srgb 0.975 0.975 0.975);
    border-radius: 8px 0 0 8px;
}

#yield-table thead tr th {
    padding: 14px;
}

#yield-table tbody tr td:first-child {
    border-radius: 8px 0 0 8px;
}

#yield-table tbody tr td:last-child {
    border-radius: 0 8px 8px 0;
}

#history-import-date-input, .input-group-addon {
    height: 40px;
}

.input-group-addon {
    display: none;
}

.ti-calendar {
    height: 41px;
}

#datepicker-block .datepicker-search {
    padding: 0;
    padding-top: 6px;
    padding-left: 5px;
}

#datepicker-block .datepicker-input {
    padding-right: 6px;
}

.accordion > .card .card-header {
    background-color: rgba(232, 235, 238, 0.54);
}

.accordion.accordion-solid-header .card .card-header a {
    padding: 1.5rem 4.5rem 1.5rem 2rem;
}

#budget-tab input.form-control {
    padding: 12px;
    width: 80%;
    display: inline-block;
}

#confirmation-form input.code_box {
    width: 17px;
    padding: 15px;
    margin: 3px;
    font-size: 20px;
    text-align: center;
}

.navbar .navbar-brand-wrapper .navbar-brand img {
    height: 50px;
}

.auth .brand-logo img {
    width: 250px;
}

.auth .login-half-bg {
    /* authentication-login-bg.png = authentication.png recadré à hauteur pleine (aucun recadrage vertical,
       la marge haut/bas de l'image d'origine était déjà minime) mais rogné sur les côtés, qui avaient
       beaucoup de fond vide inutile — ramène le ratio de 1536x1024 (1.5, très "paysage") à ~1055x1024
       (~1.03, quasi carré), bien plus proche du ratio d'un panneau de login (plus haut que large). "cover"
       reste nécessaire (le panneau est plus haut que large : "contain" laissait des bandes vides en
       haut/bas), mais comme les ratios sont maintenant proches, le recadrage résiduel qu'il implique est
       minime, même sur une fenêtre haute — contrairement à l'image d'origine qui, elle, imposait de
       rogner ~40% de la largeur. Un recadrage plus serré (plus gros plan sur laptop/téléphone) a été
       testé puis écarté : moins bon rendu que celui-ci. */
    background: url("../images/auth/authentication-login-bg-de2dab96d75b714d5c43574f5a95e0d6.png") no-repeat center center;
    background-size: cover;
}

.auth .login-half-bg p {
    color: #4B49AC !important;
}

.symbol {
    font-size: 10px;
}

.mb-2 .symbol, .text-muted .symbol {
    font-size: 16px;
}

#item-companies {
    margin-right: 0;
}

#item-import {
    margin-right: 0;
}

#import-button {
    width: 96px;
}

#import-button .icon-cloud-upload {
    padding-right: 5px;
}

#item-companies select, #item-establishments select {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tva-choice.form-check .form-check-label {
    width: 30px;
    display: inline-block;
    margin-left: 0.45rem;
    font-weight: bold;
}

#tva-choice.form-check .form-check-input {
    float: none;
    margin-left: 0;
}

#tva-choice .form-check-input:checked {
    background-color: #5050b2;
    border-color: #5050b2;
}


#dashboard-date, #yield-date {
    margin-bottom: 30px;
}

.datepicker.datepicker-dropdown, .datepicker.datepicker-inline {
    width: auto;
    max-width: none;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-inverse-success:not(.btn-inverse-light) {
    color: rgb(30, 163, 30);
}

#tva-choice.form-check {
    margin-top: 0;
}

#adminTabsContent {
    margin-top: 0 !important;
}

#userModal .form-check {
    margin-left: 25px;
}

.card-people {
    padding-top: 0 !important;
}

#main-image {
    background: none;
}

#budget-date, #history-date, #events-date, #faq-date {
    margin-bottom: 30px;
}

@media (max-width: 767.98px) {
    #dashboard-date > .col-md-12,
    #yield-date > .col-md-12,
    #budget-date > .col-md-12,
    #history-date > .col-md-12,
    #events-date > .col-md-12,
    #faq-date > .col-md-12 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    #yield-date {
        row-gap: 0.75rem;
    }

    #yield-date .col-md-3 .d-flex {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

#filter-company-establishment, #filter-company-user {
    width: 300px !important;
}

#event-zone-filter {
    width: 200px !important;
}

#events-timelines-wrapper h6 {
    margin-bottom: 15px !important;
}

/* Switch TTC/HT mobile : couleur violette identique au desktop */
#checkNativeSwitchMobile:checked {
    background-color: #4B49AC !important;
    border-color: #4B49AC !important;
}
#tva-choice-mobile .form-check-label {
    margin-left: 0 !important;
}

/* Cases "Illimité" des périodes de chambres construites (admin établissement) : même violet que le
   switch TTC/HT ci-dessus, pour rester cohérent avec la couleur de marque. */
.rooms-period-unlimited-checkbox {
    margin-left: 0 !important;
}
.rooms-period-unlimited-checkbox:checked {
    background-color: #4B49AC !important;
    border-color: #4B49AC !important;
}

/* Masquer en mobile les éléments de navbar déportés dans le menu burger.
   On utilise les IDs (spécificité maximale) pour contourner le display:flex!important du template. */
@media (max-width: 991.98px) {
    #item-tva,
    #item-import,
    #item-companies,
    #item-establishments {
        display: none !important;
    }
}

/* Sidebar fixe au scroll (desktop uniquement) */
@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: calc(60px + var(--site-notification-height, 0px));
        left: 0;
        height: calc(100vh - 60px - var(--site-notification-height, 0px));
        overflow-y: auto;
        overflow-x: hidden;
    }
    .main-panel {
        margin-left: 235px;
        width: calc(100% - 235px);
    }
    .sidebar-icon-only .main-panel {
        margin-left: 70px;
        width: calc(100% - 70px);
    }
    .sidebar-hidden .main-panel {
        margin-left: 0;
        width: 100%;
    }
}

/* Footer positionné hors de .main-panel — décalage identique à la sidebar (235px) */
.footer {
    margin-left: 235px;
    transition: margin-left 0.25s ease;
}
/* Footer déjà dans .main-panel (ex : admin) — pas de décalage supplémentaire */
.main-panel .footer {
    margin-left: 0;
}
@media (min-width: 992px) {
    .sidebar-icon-only .footer {
        margin-left: 70px;
    }
    .sidebar-hidden .footer {
        margin-left: 0;
    }
}
@media (max-width: 991px) {
    .footer {
        margin-left: 0;
    }
}

.card .card-title {
    text-transform: none;
    font-size: 1.05rem;
}

.card .card-title.title-faq {
    margin-bottom: 2.2rem;
}

.progress.progress-md {
    margin-bottom: 12px;
}

/* Bandeau de notification site-wide (admin-configurable, cf. templates/common/header.html.twig).
   La navbar est en position:fixed (z-index 1030) : le bandeau doit l'être aussi pour ne pas passer
   dessous, et le contenu (page-body-wrapper/sidebar) est décalé via --site-notification-height (JS). */
.site-notification-banner {
    background: #F28998;
    color: #fff;
    width: 100%;
    padding: 10px 48px 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1029;
    box-sizing: border-box;
}

/* :not(.full-page-wrapper) : les pages sans navbar fixe (ex. templates/authentication/login.html.twig,
   qui pose déjà cette classe pour annuler ce padding via le thème de base) ne doivent pas réserver cet
   espace — sinon un bandeau blanc vide apparaît en haut, rien n'étant fixé à top:0 pour le combler. */
.page-body-wrapper:not(.full-page-wrapper) {
    padding-top: calc(60px + var(--site-notification-height, 0px)) !important;
}

.site-notification-banner #site-notification-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

/* toast personnel de fin/erreur d'un lot "Initialisation d'un compte" (cf. assets/js/import-batch-alerts.js)
   — coin bas-droit, distinct du bandeau site-wide (haut, pour tout le monde) pour ne jamais se superposer */
.import-batch-alert {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    max-width: 360px;
    padding: 14px 40px 14px 16px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.import-batch-alert-success {
    background: #57B657;
}

.import-batch-alert-error {
    background: #c0392b;
}

.import-batch-alert a {
    display: block;
    margin-top: 6px;
    color: #fff;
    text-decoration: underline;
}

/* ===== "Initialisation client" (page Administration) — refonte carte, cf.
   templates/admin/import-initialization.html.twig + assets/js/import-initialization.js ===== */

.import-init-company-card .card-body { padding: 20px 24px; }

/* alignement icône/texte des boutons d'action du haut de page (Importer, Valider l'import des données,
   Reprendre l'import) — délibérément SANS !important (contrairement à l'utilitaire Bootstrap
   ".d-inline-flex", qui écraserait le style inline display:none posé par le JS pour les masquer/afficher,
   cf. assets/js/import-initialization.js) */
.import-init-action-btn {
    display: inline-flex;
    align-items: center;
}

#btn-import-init-clear-all,
#btn-import-init-clear-all i {
    color: #fff;
}

.import-init-date-editable {
    cursor: pointer;
    border-bottom: 1px dashed #999;
}

.import-init-company-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ede9fe;
    color: #4B49AC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.import-init-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.import-init-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    border: none;
}

.import-init-chip-neutral {
    background: #ede9fe;
    color: #4B49AC;
}

/* établissements à choisir manuellement (cf. IPmsService::previewEstablishmentNames() ambigu) : chips
   cliquables qui remplacent la sélection multiple HTML native, plus lisibles et cohérentes avec le reste */
.import-init-est-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.import-init-chip-toggle {
    background: #fff;
    color: #6C7383;
    border: 1px solid #d8d8e6;
    cursor: pointer;
    transition: all .12s ease;
}

.import-init-chip-toggle:hover { border-color: #4B49AC; color: #4B49AC; }

.import-init-chip-selected {
    background: #4B49AC;
    color: #fff;
    border-color: #4B49AC;
}

.import-init-banner {
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 600;
}

.import-init-banner-info { background: #ede9fe; color: #3d3c8e; }
.import-init-banner-error { background: #fdecea; color: #c0392b; }
.import-init-banner-success { background: #e8f5e9; color: #2e7d32; }

.import-init-empty-state {
    text-align: center;
    color: #6C7383;
    padding: 48px 20px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 18px;
}

.import-init-empty-state i {
    font-size: 2.2rem;
    color: #c9c7ec;
    display: block;
    margin-bottom: 10px;
}

.import-init-section { margin-bottom: 22px; }

.import-init-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #434245;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.import-init-section-header i {
    color: #4B49AC;
    width: 18px;
    /* neutralise ".ti-calendar { height: 41px; }" (règle globale préexistante pour un ancien datepicker,
       assets/css/easyield-custom.css ~L199) : sans "height: auto" ici, seule l'icône calendrier hérite de
       cette hauteur (41px) une fois passée en inline-flex, et se retrouve nettement plus grande/décalée
       que les autres icônes de section (bar-chart, time...) qui n'ont jamais cette règle */
    height: auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-init-section-count {
    background: #f1f0fb;
    color: #4B49AC;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.import-init-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.import-init-file-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #eeeef5;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(20, 20, 50, 0.03);
}

.import-init-file-card-error {
    background: #fdf4f3;
    border-color: #f4c9c2;
}

.import-init-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* neutralise ".ti-calendar { height: 41px; }" (règle globale préexistante, cf. commentaire équivalent sur
   .import-init-section-header i) : sans ça, l'icône calendrier des rapports de réservations déborde de son
   cercle de 40px et n'est plus centrée verticalement, contrairement aux icônes bar-chart/time/file */
.import-init-file-icon i {
    height: auto;
    line-height: 1;
}

.import-init-icon-management { background: #e8f0fe; color: #2f6fed; }
.import-init-icon-segmentation { background: #ede9fe; color: #4B49AC; }
.import-init-icon-pending { background: #f1f1f4; color: #8a8a9a; }

/* le glyphe "ti-calendar" est dessiné nettement plus grand que les autres icônes de cette police
   (bar-chart, time...) à taille de police égale — correction visuelle pour un rendu cohérent */
.import-init-file-icon .ti-calendar,
.import-init-section-header .ti-calendar {
    font-size: 0.7em;
}

.import-init-file-main { flex: 1 1 auto; min-width: 0; }

.import-init-filename {
    font-weight: 700;
    color: #434245;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-init-file-card-error .import-init-filename { color: #b93a2e; }

.import-init-file-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8a8a9a;
    font-size: 0.82rem;
    margin-top: 2px;
    flex-wrap: wrap;
}

.import-init-meta-item i { margin-right: 3px; }

.import-init-date-editor { display: inline-flex; gap: 6px; align-items: center; }

.import-init-progress {
    height: 6px;
    border-radius: 4px;
    background: #eeeef5;
    overflow: hidden;
    margin-top: 8px;
    max-width: 260px;
}

.import-init-progress-bar {
    height: 100%;
    background: #4B49AC;
    border-radius: 4px;
    transition: width .2s ease;
}

.import-init-file-card-error .import-init-progress-bar { background: #c0392b; }

.import-init-error-text {
    color: #c0392b;
    font-size: 0.82rem;
    margin-top: 6px;
}

.import-init-file-status {
    flex-shrink: 0;
    padding-top: 2px;
    text-align: right;
    white-space: nowrap;
}

.import-init-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.import-init-badge-success { background: #e8f5e9; color: #2e7d32; }
.import-init-badge-error { background: #fdecea; color: #c0392b; }
.import-init-badge-info { background: #ede9fe; color: #3d3c8e; }
.import-init-badge-neutral { background: #f1f1f4; color: #6C7383; }

.import-init-file-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 2px;
}

.import-batch-alert button {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/* Blocs mois du Dashboard : retournement (flip) + calendrier journalier coloré N vs N-1
   (cf. templates/dashboard/dashboard.html.twig, assets/js/dashboard.js) */
.month-flip-card {
    /* hauteur explicite requise (pas juste min-height) pour que .month-flip-inner{height:100%} et
       .month-flip-front/back{inset:0} se résolvent correctement (une % height ne se calcule que contre
       une hauteur définie du parent, jamais contre un min-height) — valeur de repli avant la mesure JS
       (cf. assets/js/dashboard.js) qui fixe la hauteur réelle nécessaire au contenu de chaque carte. */
    perspective: 1000px;
    height: 480px;
}

.month-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.month-flip-card.flipped .month-flip-inner {
    transform: rotateY(180deg);
}

.month-flip-front,
.month-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow-y: auto;
    /* overflow-y:auto force aussi le clipping horizontal (une des deux valeurs "overflow" ne peut pas
       rester visible si l'autre ne l'est pas) : sans cette marge, l'anneau du survol/du mois en cours
       (box-shadow qui dépasse de 3px la carte) était rogné par ce conteneur. */
    padding: 4px;
    margin: -4px;
}

.month-flip-back {
    transform: rotateY(180deg);
}

/* bordure transparente réservée en permanence (même largeur que la bordure du survol ci-dessous) : le
   survol ne change alors que la couleur, jamais la largeur, donc ne redimensionne jamais la carte et ne
   fait pas bouger le contenu (titre, jauge...) — la carte "mois en cours" a sa propre bordure inline
   (dashboard.html.twig), de même largeur, qui prend le dessus. */
.month-flip-front .card {
    border: 2px solid transparent;
}

/* même double bordure que le mois en cours (cf. dashboard.html.twig, style inline sur .card du mois
   correspondant à aujourd'hui) : bordure pleine + anneau, pas une version atténuée. */
.month-flip-card:not(.flipped) .month-flip-front .card:hover {
    cursor: pointer;
    border-color: #4B49AC;
    box-shadow: 0 0 0 3px rgba(75, 73, 172, 0.15);
}

/* carte placeholder (mode Réalisé/Prévisionnel, mois entièrement hors période — cf.
   DashboardController::dashboard()) : le clic est désactivé côté JS (dashboard.js), donc pas d'effet
   hover "cliquable" pour ne pas induire en erreur — la bordure transparente ci-dessus reste inchangée. */
.month-flip-card--placeholder:not(.flipped) .month-flip-front .card:hover {
    cursor: default;
}

/* bascule Annuel/Réalisé/Prévisionnel (en-tête Dashboard, cf. dashboard.html.twig) — 3 options dans une
   piste arrondie, fond qui glisse derrière l'option active. Grid à 3 colonnes 1fr : chaque colonne prend
   automatiquement la largeur du plus long libellé ("Prévisionnel"), donc les 3 options ET le fond qui
   glisse (calc(33.333%)) ont exactement la même largeur — pas de décalage texte/fond possible.
   translateX(100%/200%) déplace le fond de sa propre largeur (1/3 de la piste), jusqu'à la 2e/3e option.
   height:42px : même hauteur que les boutons ronds à sa gauche (.btn-icon, cf. vertical-layout-light/style.css). */
.tri-toggle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    height: 42px;
    background: rgba(75, 73, 172, 0.2);
    border-radius: 20px;
    padding: 3px;
}

.tri-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(33.333% - 2px);
    height: calc(100% - 6px);
    background: #4B49AC;
    border-radius: 16px;
    transition: transform 0.25s ease;
    z-index: 0;
}

.tri-toggle[data-active="realise"] .tri-toggle-thumb {
    transform: translateX(100%);
}

.tri-toggle[data-active="previsionnel"] .tri-toggle-thumb {
    transform: translateX(200%);
}

.tri-toggle-option {
    position: relative;
    z-index: 1;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6C7383;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border-radius: 16px;
    transition: color 0.2s ease;
}

.tri-toggle-option:hover {
    color: #4B49AC;
    text-decoration: none;
}

.tri-toggle-option.active,
.tri-toggle-option.active:hover {
    font-weight: 700;
    color: #fff;
}

/* bascule Mensuel/Journalier (en-tête page Objectifs, cf. budget.html.twig) — même mécanique que .tri-toggle
   ci-dessus (grid + fond qui glisse), avec 2 colonnes au lieu de 3. */
.bi-toggle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    height: 42px;
    background: rgba(75, 73, 172, 0.2);
    border-radius: 20px;
    padding: 3px;
}

.bi-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: #4B49AC;
    border-radius: 16px;
    transition: transform 0.25s ease;
    z-index: 0;
}

.bi-toggle[data-active="journalier"] .bi-toggle-thumb {
    transform: translateX(100%);
}

.bi-toggle-option {
    position: relative;
    z-index: 1;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6C7383;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border-radius: 16px;
    transition: color 0.2s ease;
}

.bi-toggle-option:hover {
    color: #4B49AC;
    text-decoration: none;
}

.bi-toggle-option.active,
.bi-toggle-option.active:hover {
    font-weight: 700;
    color: #fff;
}

.month-calendar-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 4px;
}

.month-calendar-dow-row span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.day-tile {
    border-radius: 6px;
    padding: 6px 2px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.day-tile:hover {
    border-color: #4B49AC;
}

/* jour hors de la fenêtre Réalisé/Prévisionnel sur le mois coupé (cf. DashboardController::buildDailyCalendar) —
   visibility:hidden garde la cellule dans la grille (alignement des colonnes de semaine des jours visibles
   préservé) mais la rend invisible et insensible à la souris, donc sans tooltip au survol. */
.day-tile--hidden {
    visibility: hidden;
    cursor: default;
}

/* grille "Journalier" de la page Objectifs (cf. templates/budget/_daily_calendar.html.twig) — colonnes 1fr :
   les 7 jours se répartissent sur toute la largeur disponible de la carte (comme .month-calendar-grid du
   Dashboard), les cellules restent compactes grâce à leur contenu (champs libellés, police réduite) plutôt
   qu'à une largeur de colonne fixe. Classes dédiées (pas .month-calendar-dow-row/.month-calendar-grid du
   Dashboard) pour ne pas répercuter ces ajustements sur son calendrier en lecture seule. */
/* filet de sécurité : si les 7 colonnes ne tiennent toujours pas (petit écran), on scrolle horizontalement
   plutôt que de déborder du cadre de la carte — même principe que .table-responsive pour le tableau Mensuel. */
.budget-daily-calendar-scroll {
    overflow-x: auto;
}

.budget-daily-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 4px;
    min-width: 700px;
}

.budget-daily-dow-row span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
}

.budget-daily-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    min-width: 700px;
}

.budget-day-cell {
    /* min-width:0 indispensable sur un enfant de grille 1fr : sans ça, une colonne 1fr ne peut jamais devenir
       plus étroite que la largeur intrinsèque minimale de son contenu (les inputs notamment), ce qui pousse
       les 7 colonnes à dépasser la largeur du conteneur — la dernière déborde alors hors de la carte. */
    min-width: 0;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.budget-day-cell:hover,
.budget-day-cell:focus-within {
    border-color: rgba(75, 73, 172, 0.35);
    box-shadow: 0 2px 8px rgba(75, 73, 172, 0.12);
}

.budget-day-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #f1f1f5;
}

/* tailles alignées sur le calendrier de l'onglet Stagnation (templates/stagnation/stagnation.html.twig) :
   numéro du jour = 1rem/700 (même taille que la date du jour là-bas), libellés/valeurs = 0.72rem (même
   taille que les lignes nuitées/TO là-bas) */
.budget-day-number {
    font-size: 1rem;
    font-weight: 700;
    color: #4B49AC;
}

.budget-day-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.budget-day-field-label {
    flex-shrink: 0;
    width: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9ca3af;
}

.budget-day-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    text-align: right;
    padding: 4px 6px;
    height: auto;
    background: #f8f9fb;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.budget-day-input:focus {
    background: #fff;
    border-color: #4B49AC;
    outline: none;
    box-shadow: 0 0 0 2px rgba(75, 73, 172, 0.15);
}

/* margin-top:auto pousse le badge tout en bas dans une colonne flex (.budget-day-cell), align-self:flex-end
   le colle à droite plutôt que de l'étirer sur toute la largeur (comportement par défaut d'un enfant flex) */
.budget-day-occupancy {
    align-self: flex-end;
    margin-top: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: #4B49AC;
    background: #ede9fe;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* grille "Mensuel" de la page Objectifs (cf. templates/budget/_monthly_calendar.html.twig) — même langage
   visuel que la grille "Journalier" ci-dessus (budget-day-*), classes dédiées budget-month-* pour ne pas
   toucher la grille Journalier déjà vérifiée ; valeurs reprises à l'identique pour rester cohérent entre les
   deux modes de saisie. 6 colonnes (2 lignes de 6 mois) plutôt que 7 : pas de ligne "jours de la semaine" au
   dessus, les cellules peuvent donc être un peu plus larges. */
.budget-month-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.budget-month-cell {
    min-width: 0;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.budget-month-cell:hover,
.budget-month-cell:focus-within {
    border-color: rgba(75, 73, 172, 0.35);
    box-shadow: 0 2px 8px rgba(75, 73, 172, 0.12);
}

.budget-month-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #f1f1f5;
}

.budget-month-label {
    font-size: 1rem;
    font-weight: 700;
    color: #4B49AC;
}

.budget-month-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.budget-month-field-label {
    flex-shrink: 0;
    width: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9ca3af;
}

.budget-month-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    text-align: right;
    padding: 4px 6px;
    height: auto;
    background: #f8f9fb;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.budget-month-input:focus {
    background: #fff;
    border-color: #4B49AC;
    outline: none;
    box-shadow: 0 0 0 2px rgba(75, 73, 172, 0.15);
}

/* margin-top:auto pousse le badge tout en bas dans une colonne flex (.budget-month-cell), align-self:flex-end
   le colle à droite plutôt que de l'étirer sur toute la largeur (comportement par défaut d'un enfant flex) */
.budget-month-occupancy {
    align-self: flex-end;
    margin-top: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: #4B49AC;
    background: #ede9fe;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* totaux du mois affichés en haut à droite de la grille Journalier (cf. #budget-daily-totals dans
   budget.html.twig, recalculateDailyTotals() dans easyield-custom.js) */
.budget-total-badge {
    background: #ede9fe;
    color: #4B49AC;
    border-radius: 10px;
    padding: 3px 10px;
    font-weight: 600;
    white-space: nowrap;
}

.day-tile-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    font-size: 0.8rem;
    min-width: 460px;
    pointer-events: none;
}

.day-tile-tooltip .day-tile-tooltip-title {
    font-weight: 700;
    color: #4B49AC;
    margin-bottom: 2px;
    font-size: 0.82rem;
}

/* jour de semaine N-1 sous le titre — même taille/couleur que les en-têtes de colonne N/N-1/Écart
   (.dtt-head ci-dessous), pour rester visuellement rattaché à la même famille d'information secondaire */
.day-tile-tooltip .day-tile-tooltip-n1-subtitle {
    font-size: 0.66rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

/* grille à 6 colonnes (libellé, N, N-1 date à date, Écart, N-1 date comparable, Écart) pour un alignement
   propre des valeurs entre elles, plutôt que du texte en ligne où les nombres ne tombent pas sous une
   même colonne. */
.day-tile-tooltip .day-tile-tooltip-grid {
    display: grid;
    grid-template-columns: auto repeat(5, minmax(56px, 1fr));
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
}

.day-tile-tooltip .dtt-head {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    text-align: right;
    padding-bottom: 3px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.day-tile-tooltip .dtt-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
}

.day-tile-tooltip .dtt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.day-tile-tooltip .dtt-value {
    text-align: right;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.day-tile-tooltip .dtt-value-n1 {
    text-align: right;
    font-weight: 400;
    color: #9ca3af;
    white-space: nowrap;
}

.day-tile-tooltip .dtt-diff-up {
    text-align: right;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
}

.day-tile-tooltip .dtt-diff-down {
    text-align: right;
    font-weight: 600;
    color: #dc2626;
    white-space: nowrap;
}

/* tooltip HTML "fond blanc / tableau" des graphiques Chart.js (Dashboard + Yield) — même esprit visuel
   que .day-tile-tooltip ci-dessus (fond blanc, coins arrondis, ombre), généré par
   window.buildEasyieldChartTooltip (cf. dashboard.js) via plugins.tooltip.external de chaque graphique */
.chart-html-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    font-size: 0.8rem;
    max-width: 380px;
    pointer-events: none;
    /* police du corps + repli 'themify' (cf. assets/vendors/ti-icons) pour afficher les glyphes
       ti-comment/ti-comment-alt utilisés par certaines lignes (commentaires jour), même repli que
       l'ancien bodyFont du tooltip natif de Chart.js */
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, 'themify';
}

.chart-html-tooltip .cht-title {
    font-weight: 700;
    color: #4B49AC;
    margin-bottom: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* sous-titre "N-1 : <jour et date N-1>" (2e ligne de titre) — même principe que
   .day-tile-tooltip-n1-subtitle sur le calendrier mensuel ; tire la ligne vers le titre juste au-dessus
   plutôt que de dupliquer son margin-bottom */
.chart-html-tooltip .cht-title-n1 {
    font-size: 0.66rem;
    color: #9ca3af;
    margin-top: -4px;
    margin-bottom: 6px;
    white-space: nowrap;
}

/* message pleine largeur hors grille/tableau (ex: "Aucun import à cette date" du tooltip matrice de
   Montée en charge cumulée, cf. buildChargeChartMatrixTooltip) */
.chart-html-tooltip .cht-line {
    color: #374151;
    white-space: normal;
}

/* corps du tooltip en grille à 3 colonnes (vignette, libellé, valeur) pour un alignement "tableau" des
   valeurs entre elles, plutôt que du texte en ligne où les nombres ne tombent pas sous une même colonne
   — même principe que .day-tile-tooltip-grid ci-dessus */
.chart-html-tooltip .cht-body {
    display: grid;
    grid-template-columns: 10px auto minmax(40px, 1fr);
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
}

/* chaque ligne logique est un wrapper display:contents : ses enfants (vignette/libellé/valeur) rejoignent
   directement la grille du parent .cht-body, ce qui garde le HTML lisible par ligne sans casser l'alignement */
.chart-html-tooltip .cht-row {
    display: contents;
}

.chart-html-tooltip .cht-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.chart-html-tooltip .cht-dot-empty {
    background: transparent;
}

.chart-html-tooltip .cht-label {
    color: #374151;
    white-space: nowrap;
}

.chart-html-tooltip .cht-value {
    color: #111827;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* ligne sans valeur scindable (en-tête de bloc, message "aucune donnée", commentaire libre...) : occupe
   les colonnes libellé + valeur, peut passer à la ligne (commentaires potentiellement longs) */
.chart-html-tooltip .cht-full {
    grid-column: 2 / -1;
    color: #374151;
    white-space: normal;
}

.chart-html-tooltip .cht-spacer {
    grid-column: 1 / -1;
    height: 6px;
}

/* aucune ligne de ce tooltip n'a de vraie pastille de couleur (cf. showDot dans buildEasyieldChartTooltip,
   ex: "Taux d'occupation N vs N-1") : la colonne vignette est entièrement retirée de la grille plutôt que
   laissée vide, sinon le texte reste décalé par rapport au titre avec une colonne fantôme devant */
.chart-html-tooltip.chart-html-tooltip--no-dots .cht-body {
    grid-template-columns: auto minmax(40px, 1fr);
}

.chart-html-tooltip.chart-html-tooltip--no-dots .cht-full {
    grid-column: 1 / -1;
}

/* variante "matrice" du tooltip HTML ci-dessus, réservée au graphique "Montée en charge cumulée"
   (cf. buildChargeChartMatrixTooltip dans dashboard.js) : un vrai tableau croisé (1 ligne par métrique,
   1 colonne par série Période actuelle/N-1/Objectifs) plutôt que la liste de lignes du tooltip générique
   — nécessite plus de largeur, d'où le max-width levé ici */
.chart-html-tooltip.chart-html-tooltip--matrix {
    max-width: none;
    width: max-content;
}

.chart-html-tooltip .cht-matrix {
    border-collapse: collapse;
}

.chart-html-tooltip .cht-matrix th,
.chart-html-tooltip .cht-matrix td {
    padding: 4px 12px;
    white-space: nowrap;
    text-align: right;
}

.chart-html-tooltip .cht-matrix thead th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 6px;
}

.chart-html-tooltip .cht-matrix thead th:first-child,
.chart-html-tooltip .cht-matrix tbody td:first-child {
    text-align: left;
    padding-left: 0;
}

.chart-html-tooltip .cht-matrix thead .cht-dot {
    margin-right: 6px;
    vertical-align: middle;
}

.chart-html-tooltip .cht-matrix tbody td:first-child {
    font-weight: 600;
    color: #374151;
}

.chart-html-tooltip .cht-matrix tbody td {
    color: #111827;
    font-weight: 600;
}

.chart-html-tooltip .cht-matrix tbody tr + tr td {
    border-top: 1px solid #f5f5f5;
}

.chart-html-tooltip .cht-matrix .cht-matrix-empty {
    color: #9ca3af;
    font-weight: 400;
}

/* Modale package (admin/packages.html.twig) — cases à cocher "Onglets de menu" / "Autres fonctionnalités" */
.package-feature-checkbox {
    margin-left: 0 !important;
}

.package-feature-checkbox:checked {
    background-color: #4B49AC;
    border-color: #4B49AC;
}

/* Modale "Nouveau thème" (admin/faq.html.twig) — PMS associés + toggle "Actif" */
.pms-checkbox:checked,
#theme-active:checked {
    background-color: #4B49AC;
    border-color: #4B49AC;
}

/* Modale utilisateur, onglet Accès (admin/admin.html.twig) — Etablissements autorisés + Packages */
.user-establishment-checkbox:checked,
.user-package-checkbox:checked,
.ai-copilot-admin-checkbox:checked {
    background-color: #4B49AC;
    border-color: #4B49AC;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Copilote IA — bulle flottante globale (cf. templates/common/_ai_copilot.html.twig,
   assets/js/ai-copilot.js). Masquée par défaut, affichée en JS seulement si l'établissement courant a
   Establishment::$aiCopilotEnabled = true (cf. GET /ai-copilot/status).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.ai-copilot-fab {
    position: fixed; right: 26px; bottom: 26px; width: 56px; height: 56px; border-radius: 50%;
    background: #4B49AC; color: #fff; border: none; box-shadow: 0 8px 20px -8px rgba(75,73,172,0.55);
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    z-index: 1040; transition: transform 0.15s ease;
}
.ai-copilot-fab:hover { transform: scale(1.06); }
/* avatar d'Izzy : photo recadrée en rond, visage légèrement au-dessus du centre de l'image source */
.ai-copilot-fab img, .ai-copilot-avatar img, .ai-copilot-msg-avatar {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 30%; display: block;
}
.ai-copilot-fab { padding: 0; border: 3px solid #fff; overflow: hidden; }

.ai-copilot-panel {
    position: fixed; right: 22px; bottom: 94px; width: 400px; max-width: calc(100vw - 32px);
    height: min(640px, calc(100vh - 130px)); background: #fff; border-radius: 18px;
    box-shadow: 0 20px 45px -20px rgba(35,34,47,0.35); border: 1px solid #edeef2;
    display: flex; flex-direction: column; overflow: hidden; z-index: 1041;
}

.ai-copilot-header { background: #4B49AC; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.ai-copilot-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.85); overflow: hidden;
}
.ai-copilot-titles { flex: 1; min-width: 0; }
.ai-copilot-titles h2 { margin: 0; font-size: 0.94rem; font-weight: 700; }
.ai-copilot-role { font-weight: 400; opacity: 0.8; font-size: 0.8rem; }
.ai-copilot-scope-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; background: rgba(255,255,255,0.16);
    border-radius: 99px; padding: 2px 9px; font-size: 0.7rem; font-weight: 700;
}
.ai-copilot-close { background: none; border: none; color: #fff; opacity: 0.85; cursor: pointer; font-size: 1rem; padding: 4px; }
.ai-copilot-close:hover { opacity: 1; }

.ai-copilot-status-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px;
    border-bottom: 1px solid #edeef2; background: #fbfaff;
}
.ai-copilot-pill {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700;
    padding: 3px 8px; border-radius: 99px; background: #f0fdf4; color: #16a34a; white-space: nowrap;
}
.ai-copilot-quota-wrap { flex: 1; min-width: 110px; }
.ai-copilot-quota-line { display: flex; justify-content: space-between; font-size: 0.66rem; color: #9ca3af; font-weight: 700; margin-bottom: 3px; }
.ai-copilot-quota-bar { height: 5px; border-radius: 99px; background: #edeef2; overflow: hidden; }
.ai-copilot-quota-fill { height: 100%; border-radius: 99px; background: #16a34a; transition: width 0.2s ease, background 0.2s ease; }

.ai-copilot-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f6fb; }
.ai-copilot-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 0.84rem; line-height: 1.46; }
.ai-copilot-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #edeef2; border-bottom-left-radius: 3px; }
/* réponses d'Izzy et indicateur de saisie : avatar à gauche, aligné sur le bas de la bulle */
.ai-copilot-bot-row { align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; max-width: 94%; }
.ai-copilot-msg-avatar { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid #edeef2; }
.ai-copilot-bot-row .ai-copilot-msg, .ai-copilot-bot-row .ai-copilot-typing { max-width: none; min-width: 0; align-self: auto; }
.ai-copilot-msg.user { align-self: flex-end; background: #4B49AC; color: #fff; border-bottom-right-radius: 3px; }
.ai-copilot-msg-content p { margin: 0 0 6px; }
.ai-copilot-msg-content p:last-child { margin-bottom: 0; }
.ai-copilot-msg-content ul, .ai-copilot-msg-content ol { margin: 0 0 6px; padding-left: 1.15em; }
.ai-copilot-msg-content ul:last-child, .ai-copilot-msg-content ol:last-child { margin-bottom: 0; }
.ai-copilot-msg-content li { margin-bottom: 2px; }
.ai-copilot-msg-content strong { font-weight: 700; }
.ai-copilot-msg-time { font-size: 0.62rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ai-copilot-msg.bot .ai-copilot-msg-time { color: #9ca3af; text-align: left; }
.ai-copilot-msg.user .ai-copilot-msg-time { color: rgba(255, 255, 255, 0.75); text-align: right; }
.ai-copilot-msg.system {
    align-self: center; background: #fff7ed; color: #b45309; border: 1px solid #fde8cc; font-size: 0.78rem;
    text-align: center; max-width: 96%;
}
.ai-copilot-msg.system.danger { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.ai-copilot-typing { align-self: flex-start; display: flex; gap: 4px; padding: 9px 12px; }
.ai-copilot-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: ai-copilot-blink 1.1s infinite ease-in-out; }
.ai-copilot-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-copilot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-copilot-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.ai-copilot-composer { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ai-copilot-composer form { display: flex; gap: 8px; }
.ai-copilot-composer input {
    flex: 1; border: 1px solid #edeef2; background: #fbfaff; border-radius: 10px; padding: 9px 12px;
    font-size: 0.84rem; font-family: inherit;
}
.ai-copilot-send {
    background: #4B49AC; color: #fff; border: none; border-radius: 10px; width: 40px; flex-shrink: 0;
    cursor: pointer; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.ai-copilot-send.is-stop { background: #dc2626; font-size: 0.8rem; }
.ai-copilot-send.is-stop:hover { background: #b91c1c; }
.ai-copilot-stop-icon { display: inline-block; width: 11px; height: 11px; background: #fff; border-radius: 2px; }
.ai-copilot-send:disabled, .ai-copilot-composer input:disabled { opacity: 0.45; cursor: not-allowed; }
.ai-copilot-foot { display: flex; justify-content: space-between; font-size: 0.66rem; color: #9ca3af; }
.ai-copilot-locked-note { background: #fee2e2; color: #dc2626; border-radius: 8px; padding: 7px 9px; font-size: 0.74rem; font-weight: 700; }

@media (max-width: 480px) {
    .ai-copilot-panel { right: 16px; bottom: 84px; }
    .ai-copilot-fab { right: 18px; bottom: 18px; }
}

/* Modale Établissement (admin/admin.html.twig) — section "Copilote IA" mise en avant : à la différence des
   autres réglages de la modale, celui-ci a un impact direct sur la facturation (appels à l'API Claude), d'où
   un encadré distinct plutôt qu'une simple case parmi d'autres */
.ai-copilot-admin-section {
    background: #f5f3ff; border: 1px solid #ded9f7; border-radius: 10px; padding: 14px 16px;
}
.ai-copilot-admin-section-title {
    display: flex; align-items: center; gap: 7px; font-weight: 700; color: #4B49AC; margin-bottom: 10px;
}
/* le thème admin remet .form-check { padding-left: 0 } globalement (compensé ailleurs par le contexte
   autour) : sans ce padding, la case (margin-left: -1.5em par défaut Bootstrap) déborde de 24px à gauche —
   invisible d'ordinaire, mais flagrant ici où la case est dans un encadré avec une bordure visible */
.ai-copilot-admin-section .form-check { padding-left: 1.5em; }
/* modale Utilisateur (admin/admin.html.twig) uniquement : la case "Autoriser le copilote IA..." vit à un
   niveau d'imbrication Bootstrap (.row > .col-md-12) différent de la modale Établissement, avec un
   décalage supplémentaire propre à ce contexte — recentré pour que la case s'aligne avec le titre et le
   reste du texte de l'encadré, sans toucher à la règle partagée ci-dessus (modale Établissement) */
#user-ai-copilot-row .ai-copilot-admin-section .form-check { margin-left: 0; }
.ai-copilot-admin-note {
    display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.78rem; font-weight: 600;
    color: #b45309;
}

/* jauges "Copilote IA" des tableaux Établissements/Utilisateurs (admin/admin.html.twig), visibles
   uniquement par le super admin — usage du mois en cours par rapport au quota configuré */
.ai-copilot-gauge { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.ai-copilot-gauge-bar { height: 5px; border-radius: 99px; background: #edeef2; overflow: hidden; }
.ai-copilot-gauge-fill { height: 100%; border-radius: 99px; }
.ai-copilot-gauge-label { font-size: 0.74rem; font-weight: 700; color: #6b6b7c; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Page Yield — bloc "Météo jour par jour" (cf. templates/yield/yield.html.twig, assets/js/weather-chart.js).
   Désactivé par défaut, affiché/masqué via l'entrée "Météo jour par jour" du dropdown Indicateurs.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.yield-weather-legend {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 12px; font-size: 0.82rem; font-weight: 600;
    color: #6C7383; align-items: center;
}
.yield-weather-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.yield-weather-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.yield-weather-legend-icon { width: 20px; height: 20px; }
.chart-html-tooltip .cht-weather-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }
.yield-weather-status { padding: 28px 0; text-align: center; color: #6C7383; font-size: 0.85rem; }
.yield-weather-status.is-error { color: #b45309; }
.yield-weather-note {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 14px;
    background: #f5f6fb; border-radius: 8px; font-size: 0.78rem; color: #6C7383; line-height: 1.5;
}
.yield-weather-note > i { font-size: 1rem; margin-top: 2px; color: #4B49AC; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Page "Demande" — calendrier de pression de la demande (cf. templates/demand/demand.html.twig,
   assets/js/demand.js). Mêmes codes visuels que le calendrier de la page Stagnation : case claire,
   bordure + halo + pastille de la couleur du niveau.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.demand-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.demand-day-name {
    text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #9ca3af;
    letter-spacing: 0.05em; padding-bottom: 4px;
}
.demand-day {
    position: relative; border-radius: 10px; padding: 10px 8px; min-height: 118px; background: #fafbfc; color: #1f2937;
    border: 2px solid #e5e7eb; cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.demand-day:hover, .demand-day--pinned { transform: translateY(-2px); }
.demand-day--pinned { outline: 2px solid #4B49AC; outline-offset: 2px; }
.demand-day--past, .demand-day--missing { background: #f5f6f8; color: #9ca3af; }
.demand-day--insufficient { border-style: dashed; }
.demand-day--dimmed { opacity: 0.25; }
.demand-day-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; }
.demand-day-date { font-size: 0.85rem; font-weight: 700; }
.demand-day-score { font-size: 1.45rem; font-weight: 700; line-height: 1.1; margin-top: 6px; }
.demand-day-score span { font-size: 0.72rem; font-weight: 600; color: #9ca3af; margin-left: 1px; }
.demand-day-level { font-size: 0.68rem; font-weight: 700; margin-top: 2px; }
.demand-day-meta { font-size: 0.72rem; color: #6C7383; margin-top: 4px; }
.demand-day-note { font-size: 0.68rem; color: #9ca3af; margin-top: 4px; }

.demand-banner {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 6px;
    background: #f5f6fb; color: #4B49AC; font-size: 0.78rem;
}
.demand-banner--warning { background: #fef3c7; color: #b45309; }

.demand-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.demand-legend-item {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #6C7383; background: none;
    border: 2px solid transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer;
}
.demand-legend-item > span { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.demand-legend-item em { font-style: normal; color: #9ca3af; font-size: 0.72rem; }
.demand-legend-item.active { border-color: #4B49AC; }

.demand-method { font-size: 0.82rem; color: #4b5563; line-height: 1.6; }
.demand-method ul { padding-left: 1.2em; margin: 8px 0; }

.demand-tooltip.chart-html-tooltip { max-width: 420px; }
.demand-tooltip .demand-tooltip-score .cht-label, .demand-tooltip .demand-tooltip-score .cht-value { color: #4B49AC; font-weight: 700; }
.demand-tooltip .demand-tooltip-section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #9ca3af; letter-spacing: 0.04em; }
.demand-tooltip .demand-tooltip-component .cht-label, .demand-tooltip .demand-tooltip-component .cht-value { font-size: 0.74rem; color: #6C7383; font-weight: 400; }

@media (max-width: 768px) {
    .demand-calendar { gap: 4px; }
    .demand-day { min-height: 90px; padding: 6px 5px; }
    .demand-day-score { font-size: 1.1rem; }
    .demand-day-name { font-size: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Page Promotions — fiche statistique d'une promotion (modale #promotionStatsModal, lecture seule, cf.
   templates/promotions/_promotion_stats.html.twig)
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
#promotions-table .promo-stats-cell { width: 1%; padding-right: 4px; }
.btn-promotion-stats.btn-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-promotion-stats:hover { background-color: transparent !important; border-color: inherit !important; color: inherit !important; }
.promo-stats-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.promo-stats-head h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.promo-stats-pill { display: inline-block; border-radius: 9999px; padding: 0.2em 0.7em; font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.promo-stats-section {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4B49AC;
    margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #ede9fe;
}
.promo-stats-params { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 0.85rem; }
.promo-stats-params dt { color: #6C7383; font-weight: 600; }
.promo-stats-params dd { margin: 0; color: #1f2937; }
.promo-stats-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.promo-stats-tile { background: #f8f9fc; border-radius: 10px; padding: 12px; }
.promo-stats-tile-label { display: block; font-size: 0.72rem; color: #6C7383; margin-bottom: 4px; }
/* même rendu pour toutes les valeurs (nuitées comme montants) : le montant convertible TTC/HT et son
   symbole restent sur une ligne, même taille/couleur que les nuitées */
.promo-stats-tile strong { display: block; font-size: 1.05rem; font-weight: 700; color: #1f2937; white-space: nowrap; }
.promo-stats-tile strong .amount-switchable { font-size: inherit; color: inherit; }
.promo-stats-tile strong .symbol { font-size: 0.8rem; font-weight: 600; color: inherit; }
.promo-stats-insights { margin: 12px 0 0; padding-left: 1.1em; font-size: 0.85rem; color: #374151; }
.promo-stats-insights li { margin-bottom: 4px; }
.promo-stats .table.promo-stats-table > :not(caption) > * > * {
    font-size: 0.85rem; line-height: 1.4; padding: 7px 10px; color: #374151;
}
.promo-stats .table.promo-stats-table > thead > tr > th {
    font-size: 0.72rem; color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding-top: 0; border-bottom: 1px solid #ede9fe;
}
.promo-stats .table.promo-stats-table > tbody > tr > td:first-child { color: #6C7383; font-weight: 600; }
.promo-stats .table.promo-stats-table .symbol { font-size: 0.75rem; }
.promo-stats-gap { font-weight: 600; }
.promo-stats-gap.is-up { color: #16a34a; }
.promo-stats-gap.is-down { color: #dc2626; }
.promo-stats-note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 0.75rem; color: #6C7383; }
.promo-stats-note i { color: #4B49AC; margin-top: 2px; }
.promo-stats-step {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: #4B49AC; color: #fff; font-size: 0.66rem; margin-right: 8px; vertical-align: 1px;
}
.promo-stats-source { font-size: 0.78rem; color: #6C7383; margin: 4px 0 0; }
.promo-stats-source i { color: #4B49AC; margin-right: 4px; }
.promo-stats-callout {
    display: flex; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fff7ed;
    color: #9a3412; font-size: 0.8rem; line-height: 1.5;
}
.promo-stats-callout i { margin-top: 2px; }
.promo-stats-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-stats-tile--accent { background: #fdf2f4; }
.promo-stats-tile--accent strong { color: #c2185b; }
.promo-stats-costbar { display: flex; height: 10px; border-radius: 9999px; overflow: hidden; margin-top: 14px; background: #f3f4f6; }
.promo-stats-costbar-revenue { background: #4B49AC; }
.promo-stats-costbar-discount { background: #F28998; }
.promo-stats-costbar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.75rem; color: #6C7383; }
.promo-stats-costbar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.promo-stats-costbar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.promo-stats-highlight {
    margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: #f5f6fb; color: #374151; font-size: 0.85rem;
}
.promo-stats-highlight strong { color: #4B49AC; }
.promo-stats-chart { position: relative; height: 220px; margin-top: 14px; }
.promo-stats .table.promo-stats-table--compact { margin-top: 4px; }
.promo-stats-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.promo-stats-asof { font-size: 0.66rem; color: #9ca3af; }
.promo-stats-alert {
    margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca;
    font-size: 0.82rem; color: #7f1d1d;
}
.promo-stats-alert p { margin: 0 0 8px; }
.promo-stats-alert .promo-stats-alert-title { font-weight: 700; color: #b91c1c; margin-bottom: 4px; }
.promo-stats .promo-stats-alert .table.promo-stats-table > :not(caption) > * > * { background: transparent; }
.promo-stats-details { margin-top: 14px; font-size: 0.82rem; }
.promo-stats-details summary { cursor: pointer; color: #4B49AC; font-weight: 600; margin-bottom: 6px; }
.promo-stats-flag {
    display: inline-block; border-radius: 9999px; padding: 0.1em 0.6em; font-size: 0.72rem; font-weight: 600;
    background: #f3f4f6; color: #6b7280; white-space: nowrap;
}
.promo-stats-flag.is-useless { background: #fee2e2; color: #dc2626; }
.promo-stats-flag.is-useful { background: #f0fdf4; color: #16a34a; }

@media (max-width: 576px) {
    .promo-stats-tiles, .promo-stats-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Page Yield : bloc "Performance des distributeurs" (Net RevPAR & coût de distribution) ===== */
/* gros titres de section de la page Yield (Segmentation et réservations, Annulation des réservations,
   Performance des distributeurs) : bandeau pleine largeur, fond dégradé violet + liseré à gauche, pour
   bien marquer le passage d'une section à l'autre */
.distribution-section-head {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 12px 0 24px; padding: 16px 22px;
    background: linear-gradient(90deg, #ede9fe 0%, #f5f3ff 60%, rgba(245, 243, 255, 0) 100%);
    border-left: 5px solid #4B49AC; border-radius: 10px;
}
.distribution-section-head .card-title { color: #3d3c8e; font-size: 1.05rem; margin-bottom: 4px !important; }
.distribution-section-sub { color: #6C7383; font-size: 13px; }
.distribution-settings-link { border: 1px solid #d0d5dc; border-radius: 20px; white-space: nowrap; }
.distribution-settings-link i { vertical-align: middle; margin-right: 4px; }
.distribution-kpi-help { cursor: pointer; font-size: 0.8rem; color: #9ca3af; margin-left: 4px; text-transform: none; }
.distribution-kpi-sub { font-size: 12px; color: #6C7383; }
.distribution-filter-note { color: #4B49AC; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.distribution-filter-note i { margin-right: 4px; }
.distribution-alert { display: flex; gap: 10px; align-items: flex-start; background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; font-size: 0.85rem; }
.distribution-alert i { margin-top: 2px; }
.distribution-alert a { color: #1e40af; font-weight: 700; text-decoration: underline; }
.distribution-alert--warning { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.distribution-alert--warning a { color: #9a3412; }

/* ===== Paramétrage des coûts de distribution ("Mon compte" + fiche établissement admin), cf. distribution-costs.js ===== */
.distribution-costs-editor .dc-help { font-size: 0.8rem; margin-bottom: 10px; }
.distribution-costs-editor .dc-channels { display: flex; flex-direction: column; gap: 10px; }
.distribution-costs-editor .dc-channel { border: 1px solid #edeef2; border-radius: 10px; padding: 10px 12px; background: #fbfaff; }
.distribution-costs-editor .dc-channel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.distribution-costs-editor .dc-channel-name { font-weight: 700; font-size: 0.88rem; color: #343a40; }
.distribution-costs-editor .dc-channel-mapped { font-size: 0.74rem; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.distribution-costs-editor .dc-badge { border-radius: 9999px; padding: 0.15em 0.6em; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.distribution-costs-editor .dc-badge--direct { background: #dcfce7; color: #15803d; }
.distribution-costs-editor .dc-badge--ota { background: #eef2ff; color: #4B49AC; }
.distribution-costs-editor .dc-badge--auto { background: #fff7ed; color: #c2410c; }
.distribution-costs-editor .dc-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.distribution-costs-editor .dc-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.distribution-costs-editor .dc-line-label { flex: 2 1 160px; }
.distribution-costs-editor .dc-line-amount { flex: 1 1 90px; max-width: 120px; }
.distribution-costs-editor .dc-line-type { flex: 1 1 140px; max-width: 170px; }
.distribution-costs-editor .dc-line-add { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.distribution-costs-editor .dc-line-add i { font-size: 0.8rem; line-height: 1; }
.distribution-costs-editor .dc-line-save, .distribution-costs-editor .dc-line-delete { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.distribution-costs-editor .dc-channel-feedback { font-size: 0.76rem; font-weight: 600; }
.distribution-costs-editor .dc-mapping-feedback { font-size: 0.78rem; font-weight: 600; margin-bottom: 6px; }
.distribution-costs-editor .dc-empty { font-size: 0.8rem; color: #9ca3af; }
.distribution-costs-editor .dc-mapping { margin-top: 14px; }
.distribution-costs-editor .dc-mapping summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: #4B49AC; margin-bottom: 8px; }
.distribution-costs-editor .dc-mapping-table { font-size: 0.82rem; }
.distribution-costs-editor .dc-mapping-table > :not(caption) > * > * { padding: 6px 8px; vertical-align: middle; font-size: 0.82rem; }
.distribution-costs-editor .dc-mapping-select { max-width: 280px; }
.distribution-costs-editor .dc-feedback { font-size: 0.82rem; }

/* ===== "Mon compte" : onglets Catégories de chambre / Tarifs / Coûts de distribution par établissement ===== */
.account-settings-tabs { margin-top: 8px; }
.account-settings-tabs .nav-link { font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
#establishmentModalTabs .nav-link { display: inline-flex; align-items: center; gap: 6px; }
.account-tab-count { background: #ede9fe; color: #4B49AC; border-radius: 9999px; padding: 0.1em 0.55em; font-size: 0.7rem; font-weight: 700; line-height: 1.4; }
.account-settings-tab-content { padding-top: 16px; }
/* le titre de chaque rubrique est porté par l'onglet : libellé interne masqué (doublon) */
.account-settings-tab-content .account-space-categories-block > .form-label,
.account-settings-tab-content .account-rate-plans-block > .form-label,
.account-settings-tab-content .distribution-costs-editor > .form-label { display: none; }

/* ===== Comptes clients : PMS de l'établissement en gélule ===== */
.admin-pms-pill { display: inline-block; background: #eef2ff; color: #4B49AC; border-radius: 9999px; padding: 0.2em 0.7em; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.admin-rooms-pill { display: inline-block; background: #e0f2fe; color: #0369a1; border-radius: 9999px; padding: 0.2em 0.7em; font-size: 0.78rem; font-weight: 600; white-space: nowrap; min-width: 2.4em; text-align: center; }
.admin-rooms-pill-total { font-weight: 500; opacity: 0.65; }

/* ===== Comptes clients : listes déroulantes des modales alignées sur les champs texte du thème =====
   (.form-control du thème : padding 1.125rem 1.375rem, police 0.875rem, line-height 1, rayon 2px —
   .form-select Bootstrap par défaut est plus bas, d'où le décalage quand les deux sont côte à côte) */
#companyModal .form-select:not(.form-select-sm),
#establishmentModal .form-select:not(.form-select-sm),
#userModal .form-select:not(.form-select-sm) {
    padding: 1.125rem 2.25rem 1.125rem 1.375rem;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: 2px;
}

/* ===== Page Yield : panneaux KPI "Performance des distributeurs" (_distribution_performance.html.twig) ===== */
.dperf-panel .card-body { display: flex; flex-direction: column; gap: 10px; }
.dperf-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: #3d3c8e; margin-bottom: 4px; }
.dperf-panel-icon { width: 30px; height: 30px; border-radius: 8px; background: #ede9fe; color: #4B49AC; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.dperf-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.88rem; color: #6C7383; }
.dperf-line-value { color: #434245; font-weight: 600; white-space: nowrap; }
.dperf-line--cost .dperf-line-value { color: #dc2626; }
.dperf-line--total { border-top: 1px dashed #d8d4f5; padding-top: 8px; color: #3d3c8e; font-weight: 700; }
.dperf-line--total .dperf-line-value { color: #4B49AC; font-size: 1.35rem; font-weight: 700; }
.dperf-bar { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; background: #f1f0f7; }
.dperf-bar--mix { height: 22px; }
.dperf-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; }
.dperf-bar-seg--net { background: #4B49AC; }
.dperf-bar-seg--cost { background: #F28998; }
.dperf-bar-seg--direct { background: #4B49AC; }
.dperf-bar-seg--ota { background: #F28998; }
.dperf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dperf-chip { background: #f3f4f6; color: #434245; border-radius: 9999px; padding: 0.25em 0.75em; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.dperf-chip--cost { background: #fde8ea; color: #c2185b; }
.dperf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dperf-duo-label { font-size: 0.78rem; color: #6C7383; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.dperf-duo-value { font-size: 1.35rem; font-weight: 700; color: #434245; white-space: nowrap; }
.dperf-duo-value--net { color: #4B49AC; }
.dperf-compare { display: flex; flex-direction: column; gap: 6px; }
.dperf-compare-row { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 8px; font-size: 0.76rem; color: #6C7383; }
.dperf-compare-track { height: 10px; border-radius: 9999px; background: #f1f0f7; overflow: hidden; }
.dperf-compare-fill { display: block; height: 100%; border-radius: 9999px; background: #98BDFF; }
.dperf-compare-fill--net { background: #4B49AC; }
.dperf-mix-row { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 8px; font-size: 0.86rem; color: #434245; }
.dperf-mix-detail { text-align: right; color: #6C7383; font-size: 0.8rem; }
.dperf-dot { width: 10px; height: 10px; border-radius: 3px; }
.dperf-dot--direct { background: #4B49AC; }
.dperf-dot--ota { background: #F28998; }
.dperf-n1 { font-size: 12px; color: #F28998; margin-top: 8px; padding: 10px 12px; background: #fffafb; border-top: 1px dashed #fbdfe4; border-radius: 0 0 8px 8px; line-height: 1.9; }
.dperf-n1-badge { background: #fde8ea; color: #c2185b; border-radius: 9999px; padding: 0.15em 0.5em; font-weight: 600; white-space: nowrap; }

/* ===== Page Yield : éléments visuels communs aux KPI d'en-tête, aux KPI d'annulation et aux panneaux
   "Performance des distributeurs" (même pastille-icône, même titre violet, même encadré N-1) ===== */
.kpi-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
/* sélecteur renforcé : ".card .card-title" (thème + easyield-custom.css) impose sinon #010101 */
.card .card-title.kpi-title { color: #3d3c8e; }
.kpi-themed .n1-row {
    margin-top: 10px !important; padding: 10px 12px; background: #fffafb; border-top: 1px dashed #fbdfe4;
    border-radius: 0 0 8px 8px; line-height: 1.9;
}
/* neutralise ".ti-calendar { height: 41px; }" (règle globale préexistante) dans les pastilles-icônes des
   KPI : sans ça, le calendrier ("Nuités", "Nuitées perdues") sort de sa pastille, décalé vers le haut —
   même correctif que .import-init-file-icon i, et même réduction de taille du glyphe, plus grand que les autres */
.dperf-panel-icon i { height: auto; line-height: 1; }
.dperf-panel-icon .ti-calendar { font-size: 0.85em; }