/* ==========================================================================
   Pekan — système de design
   --------------------------------------------------------------------------
   Une couche de jetons (variables CSS) posée sur Bootstrap 5.3. Tout ce qui
   est personnalisable par société est déclaré ici en `--pekan-*` puis réécrit
   par /theme.css, servi dynamiquement. Ne jamais coder une couleur en dur
   dans une vue : passer par un jeton, sinon le white-label décroche.
   ========================================================================== */

:root {
    /* Marque ------------------------------------------------------------ */
    --pekan-primary:        #2456A6;
    --pekan-primary-hover:  #1C4585;
    --pekan-primary-soft:   #EAF0FA;   /* fonds teintés, états sélectionnés */
    /* Orange de la marque : réservé au logo et au site vitrine. Surtout pas en couleur
       primaire d'interface — il entrerait en collision avec l'ambre « en attente ». */
    --pekan-accent:         #F26A21;

    /* Menu latéral ------------------------------------------------------ */
    --pekan-sidebar-bg:     #16233A;
    --pekan-sidebar-text:   #E8ECF3;
    --pekan-sidebar-muted:  #8A99B3;
    --pekan-sidebar-hover:  rgba(255, 255, 255, .07);
    --pekan-sidebar-active: rgba(255, 255, 255, .12);
    --pekan-sidebar-line:   rgba(255, 255, 255, .09);
    --pekan-sidebar-width:  248px;
    --pekan-sidebar-mini:   68px;

    /* Surfaces ---------------------------------------------------------- */
    --pekan-bg:        #F4F6F9;
    --pekan-surface:   #FFFFFF;
    --pekan-raised:    #FAFBFC;   /* en-têtes de tableau, pieds de carte */
    --pekan-border:    #E2E6EC;
    --pekan-border-strong: #D3DAE4;

    /* Texte ------------------------------------------------------------- */
    --pekan-text:      #1B2536;
    --pekan-muted:     #5B6880;
    --pekan-faint:     #8A93A5;

    /* Sémantique -------------------------------------------------------- */
    --pekan-success:   #1E7A5A;
    --pekan-info:      #2456A6;
    --pekan-warning:   #B4791B;
    --pekan-danger:    #B3372F;

    /* Formes et profondeur ---------------------------------------------- */
    --pekan-radius:    0.625rem;
    --pekan-radius-sm: 0.375rem;
    --pekan-shadow:    0 1px 2px rgba(16, 27, 47, .05), 0 1px 3px rgba(16, 27, 47, .04);
    --pekan-shadow-md: 0 4px 12px rgba(16, 27, 47, .08), 0 1px 3px rgba(16, 27, 47, .05);
    --pekan-ring:      0 0 0 3px rgba(36, 86, 166, .16);

    /* Report vers Bootstrap --------------------------------------------- */
    --bs-primary:           var(--pekan-primary);
    --bs-primary-rgb:       36, 86, 166;
    --bs-body-bg:           var(--pekan-bg);
    --bs-body-color:        var(--pekan-text);
    --bs-border-color:      var(--pekan-border);
    --bs-border-radius:     var(--pekan-radius);
    --bs-border-radius-sm:  var(--pekan-radius-sm);
    --bs-link-color:        var(--pekan-primary);
    --bs-link-hover-color:  var(--pekan-primary-hover);
    --bs-secondary-color:   var(--pekan-muted);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--pekan-bg);
    color: var(--pekan-text);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.011em; color: var(--pekan-text); }
h1, .h1 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.1875rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: var(--pekan-muted); background: var(--pekan-raised); padding: .1em .35em;
       border-radius: var(--pekan-radius-sm); font-size: .85em; }
hr { border-color: var(--pekan-border); opacity: 1; }
.text-muted { color: var(--pekan-muted) !important; }

/* ==========================================================================
   Ossature : menu latéral + colonne de contenu
   ========================================================================== */

.pekan-app { display: flex; min-height: 100vh; }

.pekan-sidebar {
    width: var(--pekan-sidebar-width);
    flex: 0 0 var(--pekan-sidebar-width);
    background: var(--pekan-sidebar-bg);
    color: var(--pekan-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1040;
    transition: width .18s ease, flex-basis .18s ease, transform .18s ease;
}

.pekan-sidebar a { color: inherit; text-decoration: none; }

/* En-tête : marque et société courante */
.pekan-brand {
    display: flex; align-items: center; gap: .625rem;
    padding: 1rem 1rem .875rem;
    border-bottom: 1px solid var(--pekan-sidebar-line);
    min-height: 64px;
}
.pekan-brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    font-size: 1.05rem; color: #fff;
}
.pekan-brand-mark img { max-width: 100%; max-height: 100%; }
/* Un logo client téléversé peut être de n'importe quelle forme : on l'arrondit. */
.pekan-brand-mark img.is-custom { border-radius: var(--pekan-radius-sm); }
.pekan-brand-name { font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.pekan-brand-sub  { font-size: .75rem; color: var(--pekan-sidebar-muted); line-height: 1.2; }

/* Navigation */
.pekan-nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem .625rem 1rem; }
.pekan-nav::-webkit-scrollbar { width: 6px; }
.pekan-nav::-webkit-scrollbar-thumb { background: var(--pekan-sidebar-line); border-radius: 3px; }

.pekan-nav-label {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pekan-sidebar-muted); font-weight: 600;
    padding: 1rem .625rem .375rem;
}
.pekan-nav-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .625rem;
    border-radius: var(--pekan-radius-sm);
    font-size: .875rem; font-weight: 500;
    color: var(--pekan-sidebar-text);
    position: relative;
    white-space: nowrap;
}
.pekan-nav-link:hover { background: var(--pekan-sidebar-hover); text-decoration: none; }
.pekan-nav-link.active { background: var(--pekan-sidebar-active); font-weight: 600; }
.pekan-nav-link.active::before {
    content: ''; position: absolute; left: -.625rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 1.25rem; border-radius: 0 2px 2px 0; background: var(--pekan-primary);
}
.pekan-nav-link i { font-size: 1rem; width: 1.125rem; text-align: center; flex: 0 0 auto;
                   color: var(--pekan-sidebar-muted); }
.pekan-nav-link:hover i, .pekan-nav-link.active i { color: inherit; }
.pekan-nav-link .badge { margin-left: auto; }

/* Groupe repliable (paramétrage) */
.pekan-nav-toggle { width: 100%; background: none; border: 0; text-align: left; }
.pekan-nav-toggle .bi-chevron-down { margin-left: auto; font-size: .75rem; transition: transform .15s; }
.pekan-nav-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.pekan-nav-sub { padding-left: 1.5rem; }
.pekan-nav-sub .pekan-nav-link { font-size: .8125rem; padding-block: .375rem; }
.pekan-nav-sub .pekan-nav-link.active::before { display: none; }
.pekan-nav-caption {
    font-size: .6875rem; color: var(--pekan-sidebar-muted);
    padding: .625rem .625rem .25rem; font-weight: 500;
}

/* Pied : utilisateur */
.pekan-sidebar-foot {
    border-top: 1px solid var(--pekan-sidebar-line);
    padding: .75rem .875rem;
    display: flex; align-items: center; gap: .625rem;
}
.pekan-avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--pekan-primary); color: #fff;
    display: grid; place-items: center; font-size: .75rem; font-weight: 600;
}
.pekan-user-name { font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.pekan-user-role { font-size: .6875rem; color: var(--pekan-sidebar-muted); text-transform: capitalize; }
.pekan-sidebar-foot .btn { color: var(--pekan-sidebar-muted); border: 0; padding: .25rem .4rem; }
.pekan-sidebar-foot .btn:hover { color: #fff; background: var(--pekan-sidebar-hover); }

/* Menu replié : icônes seules */
.pekan-app.is-collapsed .pekan-sidebar { width: var(--pekan-sidebar-mini); flex-basis: var(--pekan-sidebar-mini); }
.pekan-app.is-collapsed .pekan-sidebar .pekan-hide-mini { display: none !important; }
.pekan-app.is-collapsed .pekan-nav-link { justify-content: center; padding-inline: 0; }
.pekan-app.is-collapsed .pekan-nav-label { text-align: center; padding-inline: 0; font-size: 0; }
.pekan-app.is-collapsed .pekan-nav-label::after { content: '···'; font-size: .75rem; }
.pekan-app.is-collapsed .pekan-brand { justify-content: center; padding-inline: .5rem; }
.pekan-app.is-collapsed .pekan-sidebar-foot { justify-content: center; }

/* Colonne de contenu */
.pekan-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.pekan-topbar {
    display: flex; align-items: center; gap: .75rem;
    height: 56px; padding: 0 1.25rem;
    background: var(--pekan-surface);
    border-bottom: 1px solid var(--pekan-border);
    position: sticky; top: 0; z-index: 1030;
}
.pekan-topbar .btn-icon {
    border: 1px solid transparent; background: none; color: var(--pekan-muted);
    width: 34px; height: 34px; border-radius: var(--pekan-radius-sm);
    display: grid; place-items: center; padding: 0;
}
.pekan-topbar .btn-icon:hover { background: var(--pekan-bg); color: var(--pekan-text); }

.pekan-content { padding: 1.5rem 1.25rem 3rem; flex: 1 1 auto; }
.pekan-content > .container-fluid { padding: 0; }

/* Voile du tiroir mobile */
.pekan-scrim {
    position: fixed; inset: 0; background: rgba(16, 27, 47, .45);
    z-index: 1035; display: none;
}
.pekan-app.is-open .pekan-scrim { display: block; }

@media (max-width: 991.98px) {
    .pekan-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); }
    .pekan-app.is-open .pekan-sidebar { transform: translateX(0); box-shadow: var(--pekan-shadow-md); }
    .pekan-app.is-collapsed .pekan-sidebar { width: var(--pekan-sidebar-width); flex-basis: var(--pekan-sidebar-width); }
    .pekan-app.is-collapsed .pekan-sidebar .pekan-hide-mini { display: block !important; }
    .pekan-app.is-collapsed .pekan-nav-link { justify-content: flex-start; padding-inline: .625rem; }
    .pekan-content { padding: 1rem .875rem 2.5rem; }
}

/* ==========================================================================
   Composants
   ========================================================================== */

/* Cartes ------------------------------------------------------------------ */
.card {
    background: var(--pekan-surface);
    border: 1px solid var(--pekan-border);
    border-radius: var(--pekan-radius);
    box-shadow: var(--pekan-shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pekan-border);
    padding: .75rem 1rem;
    font-size: .875rem; font-weight: 600;
}
.card-footer { background: var(--pekan-raised); border-top: 1px solid var(--pekan-border); padding: .75rem 1rem; }
.card-body { padding: 1rem; }

/* Tableaux ---------------------------------------------------------------- */
.table { --bs-table-color: var(--pekan-text); margin-bottom: 0; }
.table > thead th, .table > thead > tr > th {
    background: var(--pekan-raised);
    border-bottom: 1px solid var(--pekan-border);
    color: var(--pekan-muted);
    font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .625rem .75rem;
    white-space: nowrap;
}
.table > tbody > tr > td { border-color: var(--pekan-border); padding: .625rem .75rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--pekan-raised); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-sm td, .table-sm th { vertical-align: middle; }
.card > .card-body.p-0 > .table { border-radius: 0 0 var(--pekan-radius) var(--pekan-radius); overflow: hidden; }

/* Boutons ----------------------------------------------------------------- */
.btn { font-size: .875rem; font-weight: 500; border-radius: var(--pekan-radius-sm); padding: .4375rem .875rem; }
.btn-sm { font-size: .8125rem; padding: .3125rem .625rem; }
.btn:focus-visible { box-shadow: var(--pekan-ring); }

.btn-primary {
    --bs-btn-bg: var(--pekan-primary); --bs-btn-border-color: var(--pekan-primary);
    --bs-btn-hover-bg: var(--pekan-primary-hover); --bs-btn-hover-border-color: var(--pekan-primary-hover);
    --bs-btn-active-bg: var(--pekan-primary-hover); --bs-btn-active-border-color: var(--pekan-primary-hover);
    --bs-btn-disabled-bg: var(--pekan-primary); --bs-btn-disabled-border-color: var(--pekan-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--pekan-primary); --bs-btn-border-color: var(--pekan-border-strong);
    --bs-btn-hover-bg: var(--pekan-primary); --bs-btn-hover-border-color: var(--pekan-primary);
    --bs-btn-active-bg: var(--pekan-primary-hover); --bs-btn-active-border-color: var(--pekan-primary-hover);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pekan-text); --bs-btn-border-color: var(--pekan-border-strong);
    --bs-btn-hover-bg: var(--pekan-bg); --bs-btn-hover-color: var(--pekan-text);
    --bs-btn-hover-border-color: var(--pekan-border-strong);
    --bs-btn-active-bg: var(--pekan-bg); --bs-btn-active-color: var(--pekan-text);
    --bs-btn-active-border-color: var(--pekan-border-strong);
}
.btn-success {
    --bs-btn-bg: var(--pekan-success); --bs-btn-border-color: var(--pekan-success);
    --bs-btn-hover-bg: #186449; --bs-btn-hover-border-color: #186449;
    --bs-btn-active-bg: #186449; --bs-btn-active-border-color: #186449;
}
.btn-outline-danger {
    --bs-btn-color: var(--pekan-danger); --bs-btn-border-color: var(--pekan-border-strong);
    --bs-btn-hover-bg: var(--pekan-danger); --bs-btn-hover-border-color: var(--pekan-danger);
}
.btn-link { color: var(--pekan-primary); }

/* Champs de formulaire ----------------------------------------------------- */
.form-label { font-size: .8125rem; font-weight: 500; color: var(--pekan-text); margin-bottom: .3125rem; }
.form-control, .form-select {
    /* Bootstrap adosse les champs à --bs-body-bg : on force la surface, sinon ils prennent
       la teinte du fond de page et paraissent désactivés. */
    background-color: var(--pekan-surface);
    border-color: var(--pekan-border-strong);
    border-radius: var(--pekan-radius-sm);
    font-size: .875rem;
    padding: .4375rem .6875rem;
    color: var(--pekan-text);
}
.form-control::placeholder { color: var(--pekan-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--pekan-primary);
    box-shadow: var(--pekan-ring);
}
.form-control:disabled, .form-control[readonly] { background: var(--pekan-raised); color: var(--pekan-muted); }
.form-control-sm, .form-select-sm { font-size: .8125rem; padding: .3125rem .5625rem; }
.form-text { font-size: .75rem; color: var(--pekan-muted); }
.input-group-text { background: var(--pekan-raised); border-color: var(--pekan-border-strong); font-size: .875rem; }

.form-check-input:checked { background-color: var(--pekan-primary); border-color: var(--pekan-primary); }
.form-check-input:focus { border-color: var(--pekan-primary); box-shadow: var(--pekan-ring); }
.form-check-label { font-size: .875rem; }

/* Pastilles de statut ------------------------------------------------------ */
.badge {
    font-size: .75rem; font-weight: 600; letter-spacing: .01em;
    padding: .3125em .625em; border-radius: 100px;
}
.badge.bg-primary   { background: var(--pekan-primary-soft) !important; color: var(--pekan-primary) !important; }
.badge.bg-secondary { background: #EDF0F4 !important; color: var(--pekan-muted) !important; }
.badge.bg-success   { background: #E6F2EC !important; color: var(--pekan-success) !important; }
.badge.bg-info      { background: #E6EEF9 !important; color: #23558F !important; }
.badge.bg-warning   { background: #FBF1DF !important; color: var(--pekan-warning) !important; }
.badge.bg-danger    { background: #FAEAE8 !important; color: var(--pekan-danger) !important; }
.badge.bg-dark      { background: #E4E7ED !important; color: #2C3849 !important; }
.badge.bg-light     { background: var(--pekan-raised) !important; color: var(--pekan-muted) !important; }

/* Messages ---------------------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--pekan-radius); font-size: .875rem; padding: .75rem 1rem; }
.alert-success { background: #E6F2EC; border-color: #C7E3D6; color: #155C44; }
.alert-danger  { background: #FAEAE8; border-color: #F0CCC8; color: #8C2A24; }
.alert-warning { background: #FBF1DF; border-color: #EDDCBB; color: #85590F; }
.alert-info    { background: var(--pekan-primary-soft); border-color: #CDDCF2; color: #1C4585; }
.alert-light   { background: var(--pekan-surface); border-color: var(--pekan-border); color: var(--pekan-text); }

/* Tuiles d'indicateurs ----------------------------------------------------- */
.pekan-stat {
    display: block; background: var(--pekan-surface);
    border: 1px solid var(--pekan-border); border-radius: var(--pekan-radius);
    padding: .875rem 1rem; height: 100%;
    box-shadow: var(--pekan-shadow);
    transition: border-color .12s, box-shadow .12s;
}
a.pekan-stat:hover { border-color: var(--pekan-border-strong); box-shadow: var(--pekan-shadow-md); text-decoration: none; }
.pekan-stat.is-active { border-color: var(--pekan-primary); box-shadow: var(--pekan-ring); }
.pekan-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--pekan-text); }
.pekan-stat-label { font-size: .75rem; color: var(--pekan-muted); margin-top: .1875rem; }

/* Divers ------------------------------------------------------------------- */
.dropdown-menu {
    background: var(--pekan-surface);
    border: 1px solid var(--pekan-border); border-radius: var(--pekan-radius);
    box-shadow: var(--pekan-shadow-md); font-size: .875rem; padding: .3125rem;
}
.dropdown-item { border-radius: var(--pekan-radius-sm); padding: .4375rem .625rem; }
.dropdown-item:active { background: var(--pekan-primary); }
.list-group-item { background: var(--pekan-surface); border-color: var(--pekan-border); font-size: .875rem; }
.modal-content, .offcanvas { background: var(--pekan-surface); border-color: var(--pekan-border); }
.form-control-color { padding: .25rem; height: calc(1.5em + .875rem + 2px); }
dl.row dt { font-weight: 600; font-size: .875rem; }
dl.row dd { font-size: .875rem; color: var(--pekan-text); }
.badge.role-super_admin { background: #EDE7F8 !important; color: #5A34A8 !important; }

/* ==========================================================================
   Pages autonomes : connexion, double authentification, erreurs
   ========================================================================== */

.pekan-plain {
    display: grid; place-items: center; min-height: 100vh;
    padding: 2rem 1rem; background: var(--pekan-bg);
}
.pekan-plain-inner { width: 100%; max-width: 400px; }
.pekan-plain-head { text-align: center; margin-bottom: 1.5rem; }
.pekan-plain-mark {
    width: 52px; height: 52px; margin: 0 auto .875rem;
    display: grid; place-items: center;
}
.pekan-plain-mark img { width: 100%; height: 100%; }
.pekan-plain-title { font-size: 1.125rem; font-weight: 600; }
.pekan-plain-sub { font-size: .8125rem; color: var(--pekan-muted); }
.pekan-plain .card-body { padding: 1.5rem; }
.pekan-plain-foot { text-align: center; margin-top: 1.25rem; font-size: .75rem; color: var(--pekan-faint); }
.pekan-code {
    font-size: 3rem; font-weight: 600; letter-spacing: -.02em;
    color: var(--pekan-primary); line-height: 1;
}

/* ==========================================================================
   Pages publiques de réservation
   ========================================================================== */

.pekan-public-header {
    background: var(--pekan-sidebar-bg); color: var(--pekan-sidebar-text);
    padding: .875rem 0; margin-bottom: 1.5rem;
}
.pekan-public-header.is-light {
    background: var(--pekan-surface); color: var(--pekan-text);
    border-bottom: 1px solid var(--pekan-border);
}
.pekan-public-brand { display: flex; align-items: center; gap: .625rem; font-weight: 600; font-size: 1rem; }
.pekan-public-brand img { height: 30px; }
.pekan-public-brand .pekan-brand-mark { width: 30px; height: 30px; flex-basis: 30px; font-size: .9375rem; }

/* Créneaux proposés : cibles tactiles généreuses, état sélectionné explicite */
.pekan-slot {
    display: block; width: 100%; text-align: center;
    padding: .625rem .5rem; font-size: .9375rem; font-weight: 500;
    border: 1px solid var(--pekan-border-strong); border-radius: var(--pekan-radius-sm);
    background: var(--pekan-surface); color: var(--pekan-text);
}
.pekan-slot:hover { border-color: var(--pekan-primary); color: var(--pekan-primary); text-decoration: none; }
.pekan-slot.is-selected { background: var(--pekan-primary); border-color: var(--pekan-primary); color: #fff; }

/* ==========================================================================
   Planning (vues jour et semaine)
   ========================================================================== */

.pekan-grid { display: flex; min-width: max-content; }
.pekan-grid-hours { width: 58px; flex: 0 0 58px; }
.pekan-grid-head {
    height: 34px; display: flex; align-items: center; justify-content: center; gap: .375rem;
    font-size: .8125rem; font-weight: 600;
    border-bottom: 1px solid var(--pekan-border);
}
.pekan-grid-head small { font-weight: 400; color: var(--pekan-muted); }
.pekan-hour {
    height: calc(var(--row-h) * 2); box-sizing: border-box;
    border-top: 1px solid var(--pekan-border);
    font-size: .6875rem; color: var(--pekan-faint);
    text-align: right; padding-right: .375rem;
}
.pekan-col { flex: 1 1 var(--col-w, 150px); min-width: var(--col-w, 150px); border-left: 1px solid var(--pekan-border); }
.pekan-slots {
    position: relative;
    background: repeating-linear-gradient(
        var(--pekan-surface), var(--pekan-surface) calc(var(--row-h) - 1px),
        var(--pekan-border) calc(var(--row-h) - 1px), var(--pekan-border) var(--row-h));
    cursor: crosshair;
}
.pekan-slots.is-readonly { cursor: default; }

.pekan-appt {
    position: absolute; left: 3px; right: 3px;
    border-radius: var(--pekan-radius-sm);
    padding: .125rem .375rem; overflow: hidden;
    font-size: .72rem; line-height: 1.25; color: #fff;
    box-shadow: 0 1px 2px rgba(16, 27, 47, .18);
    cursor: move;
}
.pekan-appt.is-cancelled { opacity: .45; }
.pekan-appt.is-readonly { cursor: pointer; }
.pekan-appt.is-dragging { opacity: .4; }

/* Rectangle de sélection tracé à la souris pour créer un rendez-vous */
.pekan-sel {
    position: absolute; left: 3px; right: 3px;
    background: var(--pekan-primary-soft);
    border: 1px dashed var(--pekan-primary);
    border-radius: var(--pekan-radius-sm);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 600; color: var(--pekan-primary);
}
.pekan-legend { font-size: .8125rem; color: var(--pekan-muted); }
.pekan-legend kbd {
    background: var(--pekan-raised); border: 1px solid var(--pekan-border);
    border-radius: var(--pekan-radius-sm); color: var(--pekan-text);
    font-size: .75rem; padding: .0625rem .3125rem;
}

/* ==========================================================================
   Carte de dispatch
   ========================================================================== */

.pekan-map-wrap { display: flex; gap: 1rem; align-items: stretch; }
.pekan-map { flex: 1 1 auto; min-height: 560px; border-radius: var(--pekan-radius);
            border: 1px solid var(--pekan-border); overflow: hidden; z-index: 1; }
.pekan-map-side { flex: 0 0 320px; max-height: 70vh; overflow-y: auto; }

.pekan-team { border: 1px solid var(--pekan-border); border-radius: var(--pekan-radius);
             background: var(--pekan-surface); margin-bottom: .625rem; }
.pekan-team.is-target { border-color: var(--pekan-primary); box-shadow: var(--pekan-ring); }
.pekan-team-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
                  border-bottom: 1px solid var(--pekan-border); font-size: .875rem; font-weight: 600; }
.pekan-team-head .count { margin-left: auto; font-weight: 400; color: var(--pekan-muted); font-size: .75rem; }
.pekan-team-body { padding: .5rem; min-height: 2.5rem; }

.pekan-job { border: 1px solid var(--pekan-border); border-radius: var(--pekan-radius-sm);
            padding: .4375rem .5rem; margin-bottom: .375rem; background: var(--pekan-surface);
            font-size: .8125rem; cursor: grab; }
.pekan-job:last-child { margin-bottom: 0; }
.pekan-job:hover { border-color: var(--pekan-border-strong); }
.pekan-job.is-dragging { opacity: .4; }
.pekan-job.is-selected { border-color: var(--pekan-primary); background: var(--pekan-primary-soft); }
.pekan-job .time { font-weight: 600; }
.pekan-job .meta { color: var(--pekan-muted); font-size: .75rem; }
.pekan-job.no-coords { border-left: 3px solid var(--pekan-warning); }

/* Repères */
.pekan-pin { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,27,47,.4); }
.pekan-tech-pin { display: grid; place-items: center; color: #fff; font-size: .6875rem;
                 font-weight: 700; border-radius: 50%; border: 2px solid #fff;
                 box-shadow: 0 1px 5px rgba(16,27,47,.45); }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: .625rem .75rem; font-size: .8125rem; }

@media (max-width: 991.98px) {
    .pekan-map-wrap { flex-direction: column; }
    .pekan-map-side { flex-basis: auto; max-height: none; }
    .pekan-map { min-height: 380px; }
}

/* ==========================================================================
   Autocomplétion d'adresse
   ========================================================================== */

.pekan-ac {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1050;
    background: var(--pekan-surface);
    border: 1px solid var(--pekan-border);
    border-radius: var(--pekan-radius-sm);
    box-shadow: var(--pekan-shadow-md);
    max-height: 17rem; overflow-y: auto; margin-top: .25rem;
}
.pekan-ac-item {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; padding: .5rem .75rem;
    border-bottom: 1px solid var(--pekan-border);
}
.pekan-ac-item:last-child { border-bottom: 0; }
.pekan-ac-item:hover, .pekan-ac-item.is-active { background: var(--pekan-primary-soft); }
.pekan-ac-item .l { display: block; font-size: .875rem; color: var(--pekan-text); }
.pekan-ac-item .c { display: block; font-size: .75rem; color: var(--pekan-muted); }