/* ==========================================================================
   EUROPE.TN — prototype statique
   Bootstrap 5.3 (CDN) + Bootstrap Icons + cette feuille de personnalisation
   ========================================================================== */

:root {
    --brand-900: #0e2440;
    --brand-800: #14304f;
    --brand-700: #1b4370;
    --brand-600: #23578f;
    --brand-100: #dce9f7;
    --brand-050: #eef5fc;
    --accent: #e11d48;          /* rouge tunisien */
    --accent-soft: #ffe4e9;
    --ok: #16854a;
    --wa: #1faa53;              /* vert WhatsApp */
    --sidebar-bg: #13233b;
    --sidebar-hover: #1d3352;
    --sidebar-active: #23578f;
    --body-bg: #f3f6fa;
    /* Statut Premium (badge + contour doré — docs/20261011-1920) */
    --premium: #d4af37;
    --premium-deep: #9a7414;
    --premium-ink: #4d3a00;
    --premium-soft: #fdf6e0;
}

/* --------------------------------------------------------------------------
   Surcharge Bootstrap : boutons & accents
   -------------------------------------------------------------------------- */
.btn-brand {
    --bs-btn-bg: var(--brand-700);
    --bs-btn-border-color: var(--brand-700);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--brand-700);
    --bs-btn-disabled-border-color: var(--brand-700);
    --bs-btn-disabled-color: #fff;
}
.btn-outline-brand {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--brand-700);
    --bs-btn-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-active-color: #fff;
}
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #c81340;
    --bs-btn-hover-border-color: #c81340;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #a90f36;
    --bs-btn-active-border-color: #a90f36;
    --bs-btn-active-color: #fff;
}
.text-brand     { color: var(--brand-700) !important; }
.text-accent    { color: var(--accent) !important; }
.bg-brand       { background-color: var(--brand-700) !important; }
.bg-brand-soft  { background-color: var(--brand-050) !important; }
.bg-accent-soft { background-color: var(--accent-soft) !important; }
.border-brand   { border-color: var(--brand-700) !important; }
.btn-link-brand { color: var(--brand-700); text-decoration: none; }
.btn-link-brand:hover { color: var(--brand-600); }

.form-check-input:checked { background-color: var(--brand-700); border-color: var(--brand-700); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 .2rem rgba(35, 87, 143, .18);
}
.page-link { color: var(--brand-700); }
.page-item.active .page-link {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}
.text-bg-purple { background-color: #6f42c1 !important; color: #fff !important; }

/* Badges de sens d'envoi */
.sens-badge { font-weight: 600; }
.sens-eu-tn { background: var(--brand-050) !important; color: var(--brand-800) !important; border: 1px solid var(--brand-100) !important; }
.sens-tn-eu { background: #fff7e6 !important; color: #92600a !important; border: 1px solid #ffe3a3 !important; }

/* --------------------------------------------------------------------------
   Statut Premium (docs/20261011-1920) : badge doré + contour doré des cartes,
   sur les pages publiques (vitrine, annuaire, fiche). Un Premium est toujours
   vérifié (invariant contrôlé par l'admin) : le doré habille, le badge bleu
   « Transporteur vérifié » reste la preuve de confiance.
   -------------------------------------------------------------------------- */
.badge-premium {
    /* Double sécurité : --bs-badge-color neutralise le blanc par défaut de
       .badge (Bootstrap 5.3) au cas où une règle tierce imposerait la
       variable, et la couleur pleine sert de repli si le dégradé sautait. */
    --bs-badge-color: var(--premium-ink);
    background-color: var(--premium);
    background-image: linear-gradient(135deg, #f6dd8d 0%, var(--premium) 55%, #b8860b 100%);
    color: var(--premium-ink) !important;
    border: 1px solid var(--premium-deep);
    box-shadow: 0 1px 2px rgba(154, 116, 20, .35);
}
.card.carte-premium {
    border: 2px solid var(--premium);
    box-shadow: 0 .375rem 1rem rgba(212, 175, 55, .3) !important;
}
.card.carte-premium .feature-icon {
    background: var(--premium-soft);
    color: var(--premium-deep);
}

/* --------------------------------------------------------------------------
   Bouton relance WhatsApp
   -------------------------------------------------------------------------- */
.btn-whatsapp {
    --bs-btn-bg: var(--wa);
    --bs-btn-border-color: var(--wa);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #178f46;
    --bs-btn-hover-border-color: #178f46;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #147a3c;
    --bs-btn-active-border-color: #147a3c;
    --bs-btn-active-color: #fff;
}

/* ==========================================================================
   Pages publiques
   ========================================================================== */
body.espace-public { background: #fff; }

.public-header {
    background: #fff;
    border-bottom: 1px solid #e6ecf3;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.public-header .nav-link { color: #2c3e50; font-weight: 500; }
.public-header .nav-link:hover { color: var(--brand-700); }
/* Desktop (>= lg) : empêche le texte d'un item de se couper en 2 lignes
   (ex. « Comment ça marche », « Collectes ouvertes ») quand la somme des
   items + le logo dépassent la largeur du container — le menu entier passe
   plutôt à la ligne (row-gap) plutôt que de casser un item au milieu. */
@media (min-width: 992px) {
    .public-header .navbar-nav {
        flex-wrap: wrap;
        row-gap: .5rem;
        justify-content: flex-end;
    }
    .public-header .navbar-nav > .nav-item,
    .public-header .navbar-nav > .nav-item > .nav-link,
    .public-header .navbar-nav > .nav-item > .btn {
        white-space: nowrap;
    }
}
.brand-logo {
    color: var(--brand-800);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: .2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.brand-logo i { color: var(--accent); }

/* Menu mobile (< lg) : rythme vertical, séparateurs et alignement des icônes
   pour la nav publique repliée en <collapse>. */
@media (max-width: 991.98px) {
    .public-header .navbar-collapse {
        margin-top: .5rem;
        padding-top: .25rem;
        padding-bottom: 1rem;
        border-top: 1px solid #e6ecf3;
    }
    .public-header .navbar-nav > .nav-item {
        border-bottom: 1px solid #f0f3f8;
    }
    .public-header .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        padding: .7rem .25rem;
    }
    .public-header .navbar-nav > .nav-item > .nav-link i {
        width: 1.35em;
        flex-shrink: 0;
        text-align: center;
        color: var(--brand-600);
    }
    .public-header .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        border: none;
        box-shadow: none;
        background: var(--brand-050);
        border-radius: .5rem;
        margin: 0 0 .5rem;
        padding: .4rem .5rem;
    }
    .public-header .navbar-nav .dropdown-menu .dropdown-item {
        border-radius: .35rem;
        padding: .5rem .6rem;
    }
    .public-header .navbar-nav > .nav-item.ms-lg-1 {
        border-bottom: none;
    }
    .public-header .navbar-nav > .nav-item.ms-lg-1:first-of-type {
        margin-top: .75rem !important;
        padding-top: 1rem;
        border-top: 1px solid #e6ecf3;
    }
    .public-header .navbar-nav > .nav-item.ms-lg-1 + .nav-item.ms-lg-1 {
        margin-top: .5rem !important;
    }
    .public-header .navbar-nav > .nav-item.ms-lg-1 .dropdown,
    .public-header .navbar-nav > .nav-item.ms-lg-1 .btn {
        width: 100%;
    }
}

.hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(225, 29, 72, .16), transparent 60%),
        linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 55%, #2f6cab 100%);
    color: #fff;
    padding: 5.5rem 0 6.5rem;
}
.hero h1 { font-weight: 800; }
.hero .lead-hero { color: rgba(255, 255, 255, .82); font-size: 1.15rem; }
.hero-badge {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    border-radius: 50rem;
    padding: .4rem 1rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.hero-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(9, 27, 48, .35);
    color: #212529;
}
.hero-illustration { font-size: 6rem; line-height: 1; color: rgba(255, 255, 255, .9); }

.section { padding: 4.5rem 0; }
.section-alt { background: var(--body-bg); }

.step-card {
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    height: 100%;
}
.step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: var(--brand-050);
    color: var(--brand-700);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.public-footer { background: var(--brand-900); padding: 3.5rem 0 2rem; margin-top: 0; }
.footer-link { color: rgba(255, 255, 255, .65); text-decoration: none; }
.footer-link:hover { color: #fff; }

/* ==========================================================================
   Layout "app" (espaces connectés : client, transporteur, admin)
   ========================================================================== */
body.espace-client,
body.espace-transporteur,
body.espace-admin { background: var(--body-bg); }

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

.app-sidebar {
    width: 264px;
    flex: 0 0 264px;
    background: var(--sidebar-bg);
    color: #cdd8e6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand { padding: 1.25rem 1.25rem .9rem; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sidebar-collapse-toggle {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: .5rem;
    color: #cdd8e6;
    font-size: 1.5rem;
}
.sidebar-collapse-toggle:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-brand-link {
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-brand-link i { color: var(--accent); }
.sidebar-espace {
    margin-top: .6rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #7f93ab;
}
.sidebar-nav ul { list-style: none; margin: 0; padding: 0 0 2rem; }
.sidebar-section {
    padding: 1.1rem 1.25rem .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #7f93ab;
    font-weight: 700;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 1.25rem;
    color: #cdd8e6;
    text-decoration: none;
    font-size: .925rem;
    border-inline-start: 3px solid transparent;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav a.active {
    background: var(--sidebar-active);
    color: #fff;
    border-inline-start-color: var(--accent);
    font-weight: 600;
}
.sidebar-nav a i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.sidebar-badge {
    margin-inline-start: auto;
    background: var(--accent);
    color: #fff;
    border-radius: 50rem;
    font-size: .7rem;
}

/* Sidebar réduite en icônes seules — desktop uniquement, sans effet sous 992px
   (docs/20261009-1858-sidebar-reduite-icones.md) */
@media (min-width: 992px) {
    body.sidebar-collapsed .app-sidebar { width: 74px; flex-basis: 74px; }
    body.sidebar-collapsed .sidebar-label,
    body.sidebar-collapsed .sidebar-espace,
    body.sidebar-collapsed .sidebar-section,
    body.sidebar-collapsed .sidebar-brand-link { display: none; }
    body.sidebar-collapsed .sidebar-brand-row { justify-content: center; }
    body.sidebar-collapsed .sidebar-brand { padding-inline: 0; text-align: center; }
    body.sidebar-collapsed .sidebar-nav ul { padding-top: .5rem; }
    body.sidebar-collapsed .sidebar-nav a { justify-content: center; gap: 0; padding-inline: 0; }
}

.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
    background: #fff;
    border-bottom: 1px solid #e6ecf3;
    padding: .8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.topbar-start { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sidebar-toggle { color: var(--brand-800); font-size: 1.5rem; text-decoration: none; padding: 0 .25rem; }
.topbar-title h1 { font-size: 1.25rem; font-weight: 700; color: var(--brand-900); margin: 0; }
.topbar-lead { color: #6b7c8f; font-size: .85rem; }
.topbar-end { display: flex; align-items: center; gap: .75rem; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: none;
    border: 0;
    padding: .25rem;
    padding-inline-end: .5rem;
    border-radius: 50rem;
    cursor: pointer;
}
.topbar-user:hover { background: var(--brand-050); }
.topbar-user-name { display: block; font-weight: 600; font-size: .875rem; color: var(--brand-900); line-height: 1.2; }
.topbar-user-role { display: block; font-size: .72rem; color: #6b7c8f; }

.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-800);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex: 0 0 auto;
}
.avatar-lg { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .65rem; }

.app-content { flex: 1 1 auto; padding: 1.75rem 1.5rem 2.5rem; }

.app-footer {
    border-top: 1px solid #e6ecf3;
    background: #fff;
    padding: .65rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .78rem;
    color: #8296a9;
}
.app-footer-link { color: var(--brand-700); text-decoration: none; }

/* Sidebar mobile */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        inset-inline-start: 0;
        z-index: 1080;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    }
    .app-wrapper.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-wrapper.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(9, 27, 48, .5);
        z-index: 1070;
    }
    .app-content { padding: 1.25rem 1rem 2rem; }
    .hero { padding: 4rem 0 5rem; }
}

/* --------------------------------------------------------------------------
   Adaptation mobile (< 768 px : smartphones)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hero { padding: 3rem 0 3.5rem; }
    .hero h1 { font-size: 1.85rem; }
    .hero-illustration { font-size: 4rem; }
    .hero-card { padding: 1.1rem; }
    .section { padding: 2.75rem 0; }
    .app-content { padding: 1rem .8rem 1.75rem; }
    .app-topbar { padding: .6rem .9rem; }
    .topbar-title h1 { font-size: 1.02rem; }
    .topbar-lead { display: none; }
    #adm-role { font-size: .82rem; }
    .filter-bar { padding: .85rem .9rem; }
    .stat-card { padding: .9rem 1rem; gap: .75rem; }
    .stat-value { font-size: 1.25rem; }
    .table-app thead th, .table-app tbody td { padding: .55rem .7rem; }
    .app-footer { flex-direction: column; text-align: center; gap: .2rem; }
    .page-heading .actions { margin-inline-start: 0; width: 100%; }
    .page-heading .actions .btn { flex: 1 1 auto; }
    .card-header { padding: .8rem 1rem; }
    .qr-placeholder { padding: 1.1rem .75rem; }
    .qr-placeholder i { font-size: 4rem; }
}

/* --------------------------------------------------------------------------
   Composants réutilisables des écrans app
   -------------------------------------------------------------------------- */
.card { border: 1px solid #e6ecf3; border-radius: .9rem; }
.card-header {
    background: #fff;
    border-bottom: 1px solid #e6ecf3;
    font-weight: 700;
    color: var(--brand-900);
    border-radius: .9rem .9rem 0 0 !important;
    padding: .9rem 1.25rem;
}
.card-header .card-header-actions { margin-inline-start: auto; }

.stat-card {
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: .9rem;
    padding: 1.1rem 1.25rem;
    height: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #8296a9; font-weight: 700; }
.stat-value { font-size: 1.45rem; font-weight: 800; color: var(--brand-900); line-height: 1.2; }
.stat-hint  { font-size: .78rem; color: #8296a9; }

.table-app { margin-bottom: 0; }
.table-app thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8296a9;
    font-weight: 700;
    border-bottom: 1px solid #e6ecf3;
    background: #fafcff;
    padding: .65rem 1rem;
    white-space: nowrap;
}
.table-app tbody td { padding: .7rem 1rem; vertical-align: middle; color: #34495e; }
.table-app tbody tr:hover td { background: var(--brand-050); }

.page-heading { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.page-heading h2 { font-size: 1.05rem; font-weight: 800; color: var(--brand-900); margin: 0; }
.page-heading .actions { margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.filter-bar {
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: .9rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* Timeline de suivi */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.05rem;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: #e6ecf3;
}
.timeline li { position: relative; padding: 0 0 1.5rem; padding-inline-start: 3rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    inset-inline-start: .35rem;
    top: .1rem;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    background: #fff;
    border: 2px solid #cbd7e4;
    color: #8296a9;
    z-index: 1;
}
.timeline li.done .timeline-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.timeline li.current .timeline-dot { background: #fff; border-color: var(--brand-600); color: var(--brand-700); box-shadow: 0 0 0 4px rgba(35, 87, 143, .15); }
.timeline li.alert .timeline-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.timeline-date { font-size: .75rem; color: #8296a9; }
.timeline-title { font-weight: 700; color: var(--brand-900); font-size: .95rem; }
.timeline-note { color: #56687a; font-size: .875rem; }
.timeline li.current .timeline-title::after {
    content: var(--timeline-current-label, "en cours");
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 50rem;
    padding: .15rem .5rem;
    margin-inline-start: .5rem;
    vertical-align: middle;
}

/* Placeholder QR code */
.qr-placeholder {
    border: 2px dashed #c6d4e2;
    border-radius: 1rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: #8296a9;
    background: #fafcff;
}
.qr-placeholder i { font-size: 5.5rem; color: var(--brand-800); line-height: 1; }

/* QR réel (P0.3 — docs/20261017-1717) : image encodant la référence.
   Fond blanc et taille fixe — la marge (quiet zone) fait partie du code,
   ne pas la rogner. */
.qr-placeholder .qr-image { width: 220px; max-width: 100%; height: auto; background: #fff; border-radius: .4rem; }

/* Bandeau d'annonce */
.notice {
    border-inline-start: 4px solid var(--accent);
    border-radius: .6rem;
}
.notice-brand { border-inline-start-color: var(--brand-700); }

/* Étapes wizard */
.wizard-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: #8296a9;
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: 50rem;
    padding: .35rem .9rem;
}
.wizard-step.active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.wizard-step.done { color: var(--ok); border-color: #bfe6cf; background: #f0faf4; }

/* Petites aides */
.fs-7 { font-size: .82rem !important; }
.fw-800 { font-weight: 800 !important; }
.cursor-pointer { cursor: pointer; }
.text-muted-2 { color: #7c8fa3 !important; }
.blank-state { text-align: center; padding: 3rem 1rem; color: #8296a9; }
.blank-state i { font-size: 3rem; color: #c6d4e2; }

@media print {
    .app-sidebar, .app-topbar, .app-footer, .no-print { display: none !important; }
    .app-content { padding: 0; }
}

/* --------------------------------------------------------------------------
   Tom Select (recherche incrémentale sur les select ville, assets/tom-select-init.js)
   -------------------------------------------------------------------------- */
/* allowEmptyOption rend le placeholder comme un .item normal (pas l'attribut
   placeholder d'un <input>) : sans ceci, son texte passe à la ligne dans les
   select étroits (ex. formulaire "Ajouter une ville" en form-select-sm),
   gonflant la hauteur du contrôle au lieu de tronquer comme un <select> natif. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item {
    display: block; /* le thème met .item en display:flex — text-overflow:ellipsis n'a aucun effet sur un flex-item, d'où un texte tronqué net sans « … » tant que ce n'est pas un bloc */
    min-width: 0; /* sinon un flex-item ne rétrécit jamais sous sa largeur de contenu : le texte déborde au lieu d'être tronqué par l'ellipsis ci-dessous */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* dropdownParent: 'body' (tom-select-init.js) sort le dropdown du <select>
   pour éviter qu'il soit tronqué par l'overflow:hidden de la modale — mais ça
   en fait un frère direct du <body>, donc son z-index (1000, thème
   bootstrap5) se compare à celui de la modale Bootstrap elle-même (1055) et
   non plus à celui, implicite, d'un enfant de la modale. Sans ce correctif le
   dropdown s'affichait sous la modale dès qu'on ouvrait la recherche ville
   dans la modale "Gérer les villes". */
.ts-dropdown { z-index: 1075; }

/* --------------------------------------------------------------------------
   RTL (arabe) — police dédiée chargée uniquement en locale ar (cf. base.twig)
   -------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] .form-label,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
}

/* Icônes directionnelles : retournées horizontalement en RTL (les flèches
   doivent suivre le sens de lecture — audit T14). */
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-send::before,
[dir="rtl"] .bi-box-arrow-right::before,
[dir="rtl"] .bi-box-arrow-left::before,
[dir="rtl"] .bi-box-arrow-in-right::before,
[dir="rtl"] .bi-box-arrow-in-left::before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Sidebar mobile : glisse depuis la droite en RTL (le reste du CSS est en
   propriétés logiques — un seul fichier LTR/RTL, cf. tâche T13). */
@media (max-width: 991.98px) {
    [dir="rtl"] .app-sidebar { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   Connexion (refonte docs/20261011-1214) : cartes de choix + page admin
   -------------------------------------------------------------------------- */
/* Carte de choix d'espace (/connexion) : toute la surface est cliquable. */
.carte-espace {
    border: 1px solid var(--brand-100);
    color: inherit;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.carte-espace:hover,
.carte-espace:focus-visible {
    border-color: var(--brand-600);
    box-shadow: 0 .5rem 1rem rgba(27, 67, 112, .15) !important;
    transform: translateY(-2px);
    color: inherit;
}
.carte-espace:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.carte-espace .btn { pointer-events: none; } /* le clic porte sur la carte entière */

/* Cards transporteur cliquables (accueil + annuaire public) : même retour visuel
   que .carte-espace ci-dessus — la carte entière mène à la fiche publique via
   un lien .stretched-link ; .card a déjà position:relative par défaut (Bootstrap). */
.carte-cliquable {
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.carte-cliquable:hover,
.carte-cliquable:focus-within {
    transform: translateY(-2px);
}
/* :not(.carte-premium) évite d'écraser le contour doré de .card.carte-premium
   (même spécificité par ailleurs — c'est l'ordre dans ce fichier qui gagnerait). */
.carte-cliquable:not(.carte-premium):hover,
.carte-cliquable:not(.carte-premium):focus-within {
    border-color: var(--brand-600);
    box-shadow: 0 .5rem 1rem rgba(27, 67, 112, .15) !important;
}
.carte-cliquable.carte-premium:hover,
.carte-cliquable.carte-premium:focus-within {
    border-color: var(--premium-deep);
    box-shadow: 0 .5rem 1.25rem rgba(212, 175, 55, .4) !important;
}
.carte-cliquable .btn { pointer-events: none; } /* le clic porte sur la carte entière */

/* Page admin dédiée (/admin/connexion) : autonome, sans navbar ni footer. */
.connexion-admin { background-color: var(--body-bg); }