/* ==========================================================
   Retraites et Europe (Retraites.php, section Commissaire). Champs et boutons : suggestions2026.css
   ========================================================== */

.retraites { display: grid; gap: 1.1rem; min-width: 0; }
.retraites__entete .titre-section { margin-bottom: .4rem; }
.retraites__entete p { margin: 0; }

.retraites__formulaire { display: grid; gap: .9rem; max-width: 46rem; }
.retraites__formulaire .titre-bloc { margin: 0; }
.retraites__equipe, .retraites__annonce { display: grid; gap: .8rem; }
.retraites__formulaire select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--texte); font: inherit; font-weight: 400; }
.retraites__types { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: 0; border: 0; }
.retraites__types legend { font-weight: 700; margin-bottom: .3rem; padding: 0; }
.retraites__types label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }

.retraites__liste { display: grid; gap: .75rem; }
.retraites__liste .titre-bloc { margin: 0; }
.retraites__item { display: grid; gap: .4rem; }
.retraites__annuler { margin: 0; justify-self: end; }
.retraites__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.retraites__pages a { padding: .35rem .85rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--texte-2); font-weight: 700; font-size: .9rem; }
.retraites__pages a[aria-current] { background: var(--accent-fond); border-color: var(--accent-fond); color: var(--accent-texte); }

/* Carte d'une annonce (carteRetraite() de layout/retraites.php) */
.retraite { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: .8rem; border-left: 4px solid var(--trait); }
.retraite--annonce { border-left-color: var(--or); }
.retraite--retire { border-left-color: var(--monte); }
.retraite--refuse, .retraite--annule { border-left-color: var(--baisse); opacity: .85; }
.retraite__texte { display: grid; gap: .2rem; min-width: 0; }
.retraite__texte p { margin: 0; }
.retraite__titre { font-size: 1.05rem; line-height: 1.3; }
.retraite__titre a, .retraite__titre strong { font-weight: 800; }
.retraite__type { margin-right: .2rem; }
.retraite__detail, .retraite__meta { font-size: .85rem; }
.retraite__note { font-style: italic; }
.retraite__raison { color: var(--baisse); font-weight: 700; font-size: .9rem; }
.retraite__statut { padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--texte-2); }
.retraite__statut--annonce { background: color-mix(in srgb, var(--or) 22%, var(--surface)); color: var(--texte); }
.retraite__statut--retire { background: color-mix(in srgb, var(--monte) 22%, var(--surface)); color: var(--texte); }
@media (max-width: 560px) {
    .retraite { grid-template-columns: 36px minmax(0, 1fr); }
    .retraite__logo { width: 36px; height: 36px; }
    .retraite__statut { grid-column: 2; justify-self: start; }
}