/* Classes utilitaires : remplacent les anciens attributs style="..." des gabarits.
 * !important garde la priorite qu'avait le style en ligne. Chargees par layouts/base.html. */

.u-text-grey {
    color: var(--gris-marque) !important;
}

.u-maxw-520 {
    max-width: 520px !important;
}

.u-img-600 {
    width: 100% !important;
    height: auto !important;
    max-width: 600px !important;
    -ms-interpolation-mode: bicubic !important;
}

.u-alert-bold-15 {
    color: rgb(208, 81, 17) !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

.u-box-half {
    border: 1px solid var(--gris-clair) !important;
    max-width: 50% !important;
}

.u-w-auto {
    width: auto !important;
}

.u-alert-bold {
    color: rgb(208, 81, 17) !important;
    font-weight: bold !important;
}

.u-maxw-200 {
    max-width: 200px !important;
}

.u-text-center {
    text-align: center !important;
}

.u-bold-15 {
    font-size: 15px !important;
    font-weight: bold !important;
}

.u-status-15 {
    color: rgb(92, 90, 90) !important;
    font-size: 15px !important;
    font-weight: bold !important;
}

.u-w-100 {
    width: 100% !important;
}

.u-text-black {
    color: black !important;
}

.u-bold-14 {
    font-size: 14px !important;
    font-weight: bold !important;
}

.u-status-14 {
    color: rgb(92, 90, 90) !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.u-text-red {
    color: red !important;
}

.u-maxw-300 {
    max-width: 300px !important;
}

.u-maxw-400 {
    max-width: 400px !important;
}

/* Messages de confirmation ou d'erreur (templates/messages.html) */
.flash-messages {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}

.flash-message {
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 10px 14px;
    background: #e8f1fb;
    border: 1px solid #9cc3ea;
    color: #1d3d5c;
}

.flash-message--success {
    background: #e9f6ec;
    border-color: #96cfa3;
    color: #1e4d2b;
}

.flash-message--error {
    background: #fdecea;
    border-color: #f0a39b;
    color: #7a1f16;
}

/* Etiquette d'etat d'une annonce (retiree de la vente) */
.status-badge {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    background: #f3e3c3;
    color: #6b4a07;
    font-size: 0.9em;
    font-weight: bold;
}

.u-inline {
    display: inline !important;
}

/* Deconnexion du menu (navtrad.html) : formulaire dont le
   bouton garde l apparence de l ancien lien .nav-link */
.logout-form {
    display: inline;
    margin: 0;
}

.logout-button {
    background: none;
    border: 0;
    width: auto;
    margin: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* Pastille « nouveaux messages » (page de la commande, espace personnel) */
.unread-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #b03a2e;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

a.unread-badge:hover {
    color: #fff;
    background: #8a2b22;
}

/* Champs obligatoires des formulaires de compte (required_css_class) */
label.required::after {
    content: " *";
    color: #b03a2e;
}

.required-note {
    color: var(--gris-secondaire);
    font-size: 0.9em;
}

/* Formulaires de compte en carte (changement de mot de passe) */
.account-form label {
    display: block;
    font-weight: 600;
    margin-top: 8px;
}

.account-form input[type="password"],
.account-form input[type="text"],
.account-form input[type="email"] {
    width: 100%;
    max-width: 420px;
    padding: 6px 10px;
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
}

.account-form .helptext,
.account-form ul {
    color: var(--gris-secondaire);
    font-size: 0.88em;
}

/* Logo du menu : icone et nom alignes, tous deux cliquables (navtrad.html) */
.navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}