/* Bloc injecté dans le panneau client Amelia v3.
   Objectif : être indiscernable de la vue « Rendez-vous ». Mêmes marges, même
   groupement par date, mêmes cartes (pastille horaire + libellé + statut).
   Toutes les couleurs viennent des variables d'Amelia (--am-*), donc la
   personnalisation faite dans Amelia → Customize s'applique automatiquement. */

#epwl-box {
    /* Posé à l'intérieur du conteneur de contenu d'Amelia, qui gère lui-même
       la hauteur et le défilement : on ne redéfinit ni l'un ni l'autre. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    font-family: var(--am-font-family, inherit);
    font-size: 15px;
    line-height: 1.5;
    color: var(--am-c-main-text, #35511f);

    /* Le bloc vit dans une application tierce dont la feuille de style est
       chargée après la nôtre : le retrait est forcé pour ne pas être écrasé. */
    padding: 18px 32px 44px !important;
}

#epwl-box .epwl-box-body,
#epwl-box > .epwl-box-body {
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
}

#epwl-box.is-busy {
    opacity: .5;
    pointer-events: none;
}

#epwl-box.epwl-box--section {
    margin-top: 24px;
    border-top: 1px solid var(--am-c-main-text-op10, rgba(0, 0, 0, .1));
}

/* --- Titres et textes --- */

#epwl-box .epwl-box-title,
#epwl-box .epwl-h {
    color: var(--am-c-main-heading-text, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 34px 0 4px;
}

#epwl-box .epwl-h:first-child,
#epwl-box .epwl-box-title { margin-top: 0; }

#epwl-box .epwl-muted {
    color: var(--am-c-main-text, inherit);
    opacity: .6;
    font-size: 14px;
    margin: 8px 0 16px;
}

#epwl-box .epwl-intro { max-width: 46em; }

/* Étiquette de jour, comme au-dessus des cartes de rendez-vous. */
#epwl-box .epwl-day {
    margin: 22px 0 10px;
    font-size: 14px;
    color: var(--am-c-main-text, inherit);
    opacity: .6;
}

#epwl-box .epwl-day:first-letter { text-transform: uppercase; }

/* --- Message après une action --- */

#epwl-box .epwl-flash {
    border-radius: var(--am-rad-inp, 6px);
    padding: 12px 16px;
    margin: 0 0 22px;
    font-size: 14px;
    border-left: 3px solid transparent;
}

#epwl-box .epwl-flash.is-ok {
    background: rgba(1, 151, 25, .08);
    border-left-color: var(--am-c-success, #019719);
}

#epwl-box .epwl-flash.is-ko {
    background: rgba(180, 25, 15, .07);
    border-left-color: var(--am-c-error, #B4190F);
}

/* --- Cartes --- */

#epwl-box .epwl-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    /* Les retraits sont forcés : la feuille de style d'Amelia est chargée
       après la nôtre et neutralise les paddings des éléments injectés. */
    margin: 0 0 12px !important;
    padding: 18px 22px !important;
    background: var(--am-c-inp-bgr, #fefefd);
    border: 1px solid var(--am-c-inp-border, rgba(0, 0, 0, .12));
    border-radius: 12px !important;
}

#epwl-box .epwl-card.is-live {
    border-color: var(--am-c-primary, #e7945d);
}

#epwl-box .epwl-card-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 260px;
}

#epwl-box .epwl-chip {
    flex: 0 0 auto;
    background: var(--am-c-drop-bgr, #eae6db);
    color: var(--am-c-main-text, inherit);
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

#epwl-box .epwl-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 9em;
}

#epwl-box .epwl-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--am-c-main-heading-text, inherit);
}

#epwl-box .epwl-card-meta {
    font-size: 13px;
    opacity: .6;
}

#epwl-box .epwl-card-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    margin-left: auto;
}

/* --- Pastille de statut, calquée sur celle des rendez-vous --- */

#epwl-box .epwl-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px !important;
    padding: 7px 15px !important;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--am-c-main-text-op10, rgba(0, 0, 0, .06));
    color: var(--am-c-main-text, inherit);
}

#epwl-box .epwl-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

#epwl-box .epwl-status--live {
    background: rgba(224, 118, 47, .12);
    color: var(--am-c-primary, #e0762f);
    font-weight: 600;
}

/* --- Boutons --- */

#epwl-box .epwl-b {
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: opacity .15s ease;
}

#epwl-box .epwl-b-primary {
    background: var(--am-c-btn-prim, #e0762f);
    color: var(--am-c-btn-prim-text, #fff);
}

#epwl-box .epwl-b-ghost {
    background: transparent;
    color: var(--am-c-main-text, inherit);
    border-color: var(--am-c-inp-border, rgba(0, 0, 0, .15));
    opacity: .8;
}

#epwl-box .epwl-b:hover { opacity: .85; }

/* L'entrée ajoutée dans la barre latérale hérite des styles d'Amelia. */
#epwl-nav-item,
#epwl-nav-item-mobile { cursor: pointer; }

@media (max-width: 782px) {
    #epwl-box { padding: 14px 16px 32px !important; }

    #epwl-box .epwl-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px !important;
    }

    #epwl-box .epwl-card-side {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #epwl-box .epwl-card-side .epwl-b { flex: 1 1 140px; text-align: center; }
    #epwl-box .epwl-status { order: -1; }
}