/* Site lu par des retraités, souvent sur téléphone : gros caractères, gros boutons, contraste fort. */
:root {
  --fond: #fbfaf7;
  --texte: #1c1c1c;
  --discret: #555;
  --carte: #ffffff;
  --bord: #d8d4cc;
  --accent: #1d4f9c;
  --convient: #2e6b3f;
  --a-verifier: #8a5a00;
  --ne-convient-pas: #9a3b2b;
  --inconnu: #4a5864;
}

* { box-sizing: border-box; }
html { font-size: 20px; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }
main { max-width: 60rem; margin: 0 auto; padding: 0 16px 2rem; }
h1 { font-size: 1.6rem; line-height: 1.25; }
h2 { font-size: 1.3rem; margin: 0; display: inline; }
a { color: var(--accent); }
button, input { font: inherit; }
button { min-height: 56px; padding: 0 1.1rem; border-radius: 10px; border: 2px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; }
button[type="submit"]:not(.lien):not(.effacer) { font-weight: 600; }
button.lien { min-height: 0; padding: 0; border: 0; background: none; text-decoration: underline; font-weight: normal; }

.entete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--carte); border-bottom: 1px solid var(--bord); }
.accueil { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texte); }
.aller { display: flex; gap: 8px; align-items: center; }
.aller input { width: 5rem; min-height: 56px; padding: 0 .6rem; border: 2px solid var(--bord); border-radius: 10px; }

.messages { max-width: 60rem; margin: 1rem auto 0; padding: 0 16px; }
.messages:empty { display: none; }
.messages p, .erreur { padding: .8rem 1rem; border-radius: 10px; background: #fbe9e5; color: var(--ne-convient-pas); font-weight: 600; }

.recherches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.recherches a { padding: .6rem 1rem; border: 2px solid var(--accent); border-radius: 999px; text-decoration: none; }
.recherches a[aria-current="page"] { background: var(--accent); color: #fff; }
.sous-titre, .explication, .lieu, .auteur { color: var(--discret); }

.rubrique { margin-top: 1.4rem; border-top: 1px solid var(--bord); padding-top: .8rem; }
.rubrique summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; }
.nombre { color: var(--discret); font-weight: normal; }
.cartes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 0 0 1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--texte); }
.carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bord); }
.carte > span { padding: 0 1rem; }
.carte .numero { margin-top: .6rem; color: var(--accent); font-weight: 700; }
.carte .titre { font-weight: 600; }

.fiche .numero { color: var(--accent); }
.fiche section { margin-top: 2rem; }
.photo { width: 100%; max-height: 28rem; object-fit: cover; border-radius: 12px; background: var(--bord); }
.prix-fiche { font-size: 1.4rem; font-weight: 700; }
.etat { font-weight: 600; color: var(--ne-convient-pas); }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: .8rem 0; }
.boutons button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.boutons .effacer { border-color: var(--discret); color: var(--discret); }

.criteres, .questions, .annonces { padding-left: 0; list-style: none; }
.critere { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: .7rem 0; border-bottom: 1px solid var(--bord); }
.critere .libelle { font-weight: 600; }
.critere .jugement { font-weight: 700; text-align: right; }
.critere .explication { grid-column: 1 / -1; }
.critere.convient .jugement { color: var(--convient); }
.critere.a_verifier .jugement { color: var(--a-verifier); }
.critere.ne_convient_pas .jugement { color: var(--ne-convient-pas); }
.critere.inconnu .jugement { color: var(--inconnu); }
.questions li, .annonces li { padding: .5rem 0; }
.questions li::before { content: "? "; font-weight: 700; color: var(--accent); }
.preuves { overflow-wrap: anywhere; color: var(--discret); }
.hors-ligne { color: var(--discret); }

.connexion { max-width: 30rem; margin: 3rem auto; text-align: center; }
.connexion .g_id_signin { display: inline-block; margin-top: 1rem; }
.pied { max-width: 60rem; margin: 0 auto; padding: 1rem 16px 2rem; color: var(--discret); border-top: 1px solid var(--bord); }

a.bouton { display: inline-flex; align-items: center; min-height: 56px; padding: 0 1.1rem; border-radius: 10px; border: 2px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.appel-avis { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; background: #e8eef8; font-weight: 600; }
.tri { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; background: #e8eef8; }
.tri p { margin: 0; font-size: 1.1rem; }

.avis { padding: 1rem; border-radius: 12px; background: var(--carte); border: 1px solid var(--bord); }
.avis.on_aime { border-left: 8px solid var(--convient); }
.avis.sans_avis { border-left: 8px solid var(--inconnu); }
.avis.pas_pour_nous { border-left: 8px solid var(--ne-convient-pas); }
.avis label.commentaire { display: block; margin-top: 1rem; font-weight: 600; }
.avis textarea { font: inherit; width: 100%; margin-top: .3rem; padding: .6rem; border: 2px solid var(--bord); border-radius: 10px; }
.choix-avis { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0 0; padding: 0; border: 0; }
.choix-avis legend { padding: 0; margin-bottom: .4rem; font-weight: 600; }
.choix-avis label { display: inline-flex; align-items: center; gap: .6rem; min-height: 56px; padding: 0 1.1rem; border: 2px solid var(--bord); border-radius: 10px; background: var(--carte); font-weight: 600; cursor: pointer; }
.choix-avis input { width: 1.4rem; height: 1.4rem; margin: 0; }
.choix-avis label.on_aime { border-color: var(--convient); color: var(--convient); }
.choix-avis label.sans_avis { border-color: var(--inconnu); color: var(--inconnu); }
.choix-avis label.pas_pour_nous { border-color: var(--ne-convient-pas); color: var(--ne-convient-pas); }
.choix-avis label.on_aime:has(input:checked) { background: var(--convient); }
.choix-avis label.sans_avis:has(input:checked) { background: var(--inconnu); }
.choix-avis label.pas_pour_nous:has(input:checked) { background: var(--ne-convient-pas); }
.choix-avis label:has(input:checked) { color: #fff; }
.choix-avis label:has(input:checked) input { accent-color: #fff; }
.choix-avis label:has(input:checked) .pouce { color: #fff; }

.pouce { flex: none; width: 1.4em; height: 1.4em; vertical-align: -.3em; margin-right: .3em; }
.pouce.on_aime { color: var(--convient); }
.pouce.sans_avis { color: var(--inconnu); transform: rotate(-90deg); }
.pouce.pas_pour_nous { color: var(--ne-convient-pas); transform: rotate(180deg); }
.choix-avis .pouce { margin-right: 0; }
.avis .principal { background: var(--accent); color: #fff; }
.auteur-commentaire { margin: .3rem 0 0; color: var(--discret); font-size: .9rem; }
.commentaire-lu { margin: .8rem 0 0; padding: .6rem 1rem; border-left: 4px solid var(--bord); font-style: italic; }
.commentaire-lu p { margin: 0; }
.commentaire-lu footer { font-style: normal; color: var(--discret); }
.carte .avis-carte { font-weight: 600; }
.carte .avis-carte.on_aime { color: var(--convient); }
.carte .avis-carte.sans_avis { color: var(--inconnu); }
.carte .avis-carte.pas_pour_nous { color: var(--ne-convient-pas); }

.toast { position: fixed; top: 12px; left: 50%; z-index: 10; width: min(30rem, calc(100% - 32px)); margin: 0; padding: 1rem 1.2rem; transform: translateX(-50%); border-radius: 12px; background: var(--convient); color: #fff; font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); animation: disparaitre .6s ease 4s forwards; }
@keyframes disparaitre { to { opacity: 0; visibility: hidden; } }