/* =====================================================================
   Bandeau de haut de page (composant x-page-band) : compact et plat, à l'orange du logo.
   Même disposition partout : titre à gauche, chiffres clés ou recherche à droite.
   ===================================================================== */

.page-band {
    padding: 0.8rem 0 1rem;
    background: #ff5500;
    color: #fff;
}

/* Pas de bande vide au-dessus : le conteneur des messages du gabarit ne garde sa marge que s'il affiche un message */
main > .container.mt-3:not(:has(*)) { margin-top: 0 !important; }

.page-band__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.55rem;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 500;
}

.page-band__crumbs li + li::before { content: "/"; margin-right: 0.3rem; }
.page-band__crumbs a { color: #fff; text-decoration: none; }
.page-band__crumbs a:hover { text-decoration: underline; }
.page-band__crumbs [aria-current] { font-weight: 700; }

.page-band__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}

.page-band__head {
    display: flex;
    flex: 1 1 380px;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.page-band__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    background: #fff;
    color: #ff5500;
    font-size: 1.5rem;
    overflow: hidden;
}

.page-band__icon img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.page-band__emoji { font-size: 1.65rem; line-height: 1; }
.page-band__text { min-width: 0; }

.page-band__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.page-band h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    overflow-wrap: anywhere;
}

.page-band__sub {
    margin: 0.15rem 0 0;
    max-width: 720px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    /* Deux lignes au plus : une longue description n'agrandit pas le bandeau (texte complet au survol) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-band__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.page-band__pills li {
    padding: 0.08rem 0.55rem;
    border: 1px solid #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.page-band__side {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.page-band__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-band__stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.page-band__stats i { color: #ff5500; }
.page-band__stats strong { font-size: 1rem; font-weight: 800; color: #0f172a; }

/* Recherche et bouton placés dans le bandeau */
.page-band__search {
    position: relative;
    display: flex;
    flex: 0 1 420px;
    min-width: 260px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.page-band__search > i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: #64748b; }

.page-band__search input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem 0.6rem 2.2rem;
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    outline: none;
}

.page-band__search button {
    padding: 0 1rem;
    border: 0;
    background: #0f172a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.page-band__search button:hover { background: #1e293b; }

.page-band__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #ff5500;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.page-band__btn:hover { background: #fff3ed; color: #ff5500; }

@media (max-width: 767.98px) {
    .page-band { padding: 0.65rem 0 0.85rem; }
    .page-band h1 { font-size: 1.3rem; }
    .page-band__icon { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
    .page-band__sub { font-size: 0.86rem; }
    .page-band__head { flex-basis: 100%; }
    .page-band__side { margin-left: 0; justify-content: flex-start; }
    .page-band__search { flex-basis: 100%; }
}