.home-bottom-nav__label {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.home-bottom-nav__label-short {
    display: none;
}

@media (max-width: 360px) {
    .home-bottom-nav__label--responsive .home-bottom-nav__label-full {
        display: none;
    }

    .home-bottom-nav__label--responsive .home-bottom-nav__label-short {
        display: inline;
    }
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size);
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: center;
    white-space: nowrap;
}

.button:hover,
button:hover {
    text-decoration: none;
}

.button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #FFF8EC;
}

.button-secondary {
    background: var(--surface-muted);
}

.button-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #FFF8EC;
}

.link-button {
    min-height: var(--tap-size);
    padding: 0;
    border: 0;
    color: var(--primary);
    background: transparent;
}

/* Bouton de déconnexion dans la nav — même style que les liens, pas de surcharge de spécificité. */
.main-nav :is(button).nav-link {
    width: 100%;
    background: transparent;
    border-color: transparent;
}

.panel,
.item-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(16px, 4vw, 24px);
}

.auth-panel {
    width: min(100%, 440px);
    margin-inline: auto;
}

.stack {
    display: grid;
    gap: var(--space-4);
}

.section-heading,
.item-card header,
.form-actions {
    display: grid;
    gap: var(--space-3);
}

.form-actions .button,
.form-actions button {
    width: 100%;
}

.section-heading {
    align-items: start;
}

.item-card header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.item-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
}

.form-stack {
    display: grid;
    gap: var(--space-4);
}

.form-field {
    display: grid;
    gap: .35rem;
}

.form-field label {
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: var(--tap-size);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-field small {
    color: var(--muted);
}

.field-error,
.has-error label {
    color: var(--danger);
}

/* LE RESUME DES REFUS, EN TETE DE FORMULAIRE.
   Un refus lu au milieu d'une page de sept rubriques n'est pas lu du tout :
   Maxime Malard a conclu que le site ne prenait pas ses modifications. Le
   bloc est encadre et decale pour se voir d'un coup d'oeil, et ses liens
   menent au champ. Pas de couleur seule : la bordure et le titre portent
   l'information pour qui ne distingue pas le rouge. */
.form-errors--resume {
    margin: 0 0 var(--space-4);
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
}

.form-errors--resume .form-errors__titre {
    margin: 0 0 8px;
}

.form-errors--resume .form-errors__liste {
    margin: 0;
    padding-left: 1.2em;
}

.form-errors--resume .form-errors__liste li + li {
    margin-top: 4px;
}

.form-errors--resume a {
    color: var(--danger);
}

.badge {
    border-radius: 999px;
    background: #DFE8DC;
    color: var(--primary-strong);
    padding: 4px 8px;
    font-size: .85rem;
    white-space: nowrap;
}

.messages {
    margin-top: var(--space-4);
}

.message {
    margin: 0 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 12px;
}

.empty-state {
    color: var(--muted);
}

.choice-grid {
    display: grid;
    gap: var(--space-3);
}

.choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.choice-card:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, #FFF8EC);
}

.choice-card input {
    margin-top: 4px;
}

.choice-card strong {
    display: block;
    color: var(--text);
}

.choice-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

@media (min-width: 520px) {
    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 520px) {
    .section-heading,
    .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .form-actions .button,
    .form-actions button {
        width: auto;
    }
}