/* Tout le site (voisinage/base.html) */
:root {
  color-scheme: light;
  --primaire: #1f5f8b; --primaire-clair: #e8f0f7; --fond: #f0f2f5; --carte: #fff; --texte: #1c1e21;
  --gris: #65676b; --bord: #e4e6eb; --survol: #f2f3f5; --rouge: #b00020; --vert: #1e6b34;
  --ombre: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; color: var(--texte); background: var(--fond); line-height: 1.45; }
a { color: var(--primaire); }
header.site { position: sticky; top: 0; z-index: 1100; background: var(--carte); box-shadow: var(--ombre); }
header.site .dedans { max-width: 44rem; margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; }
header.site h1 { margin: 0; font-size: 1.25rem; white-space: nowrap; }
header.site h1 a { color: var(--primaire); text-decoration: none; }
/* ☰ Gestion (parrains et superuser), en haut à droite. */
.menu-gestion { margin-left: auto; position: relative; }
.menu-gestion summary { list-style: none; cursor: pointer; font-size: 1.4rem; padding: .1rem .6rem; border-radius: .5rem; color: var(--primaire);
  display: flex; align-items: center; gap: .2rem; }
.menu-gestion summary::-webkit-details-marker { display: none; }
.menu-gestion summary .pastille { font-size: .65rem; vertical-align: top; }
.liste-gestion { position: absolute; right: 0; top: 2.4rem; min-width: 14rem; background: var(--carte); border: 1px solid var(--bord);
  border-radius: .75rem; box-shadow: 0 6px 24px rgba(0,0,0,.15); padding: .35rem; display: flex; flex-direction: column; }
.liste-gestion a { padding: .7rem .8rem; border-radius: .5rem; color: var(--texte); text-decoration: none; }
.liste-gestion a:hover, .liste-gestion a.actif { background: var(--primaire-clair); color: var(--primaire); font-weight: 600; }
/* Barre du bas : trois gros boutons au pouce ; Quartier et Copropriété ouvrent leurs choix au-dessus, sur un
   fond assombri pour bien les voir. */
body.avec-barre { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;   /* au-dessus des cartes Leaflet */ display: flex; justify-content: center;
  background: var(--carte); border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom); }
.onglet-bas { flex: 1; max-width: 10rem; position: relative; }
.onglet-bas > summary, a.onglet-bas { list-style: none; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .45rem .2rem .5rem; font-size: .75rem; color: var(--gris); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.onglet-bas[open] > summary { position: relative; z-index: 1; }
.onglet-bas > summary::-webkit-details-marker { display: none; }
.onglet-bas .icone { font-size: 1.45rem; line-height: 1.2; filter: grayscale(1); opacity: .7; }
.onglet-bas.actif > summary, a.onglet-bas.actif, .onglet-bas[open] > summary { color: var(--primaire); font-weight: 600; }
.onglet-bas.actif .icone, .onglet-bas[open] .icone { filter: none; opacity: 1; }
.onglet-bas[open] > summary { background: var(--primaire-clair); border-radius: .8rem .8rem 0 0; }
.onglet-bas[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.35); }
.onglet-bas .pastille { position: absolute; top: .3rem; left: 55%; }
.choix-bas { position: absolute; z-index: 2; bottom: calc(100% + .6rem); left: 50%; transform: translateX(-50%); width: max-content;
  min-width: 16rem; background: var(--carte); border: 2px solid var(--primaire); border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); padding: .4rem; display: flex; flex-direction: column;
  animation: monter .15s ease-out; }
/* Téléphone : les choix au centre de l'écran, en très grand. */
@media (max-width: 899px) {
  .choix-bas { position: fixed; top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%);
    width: min(88vw, 24rem); padding: .8rem; border-width: 3px; border-radius: 1.3rem; }
  .choix-bas a { padding: 1.5rem 1.2rem; font-size: 1.35rem; text-align: center; margin: .35rem 0; }
  .titre-choix { text-align: center; font-size: .95rem; margin: .3rem 0 .4rem; }
}
.titre-choix { margin: .2rem .6rem .3rem; font-size: .8rem; font-weight: 700; color: var(--primaire); text-transform: uppercase; letter-spacing: .03em; }
.choix-bas a { padding: 1rem; border-radius: .7rem; color: var(--texte); text-decoration: none; font-size: 1.1rem; font-weight: 600;
  background: var(--primaire-clair); margin: .2rem 0; }
.choix-bas a:active, .choix-bas a:hover { background: var(--primaire); color: #fff; }
@keyframes monter { from { opacity: 0; translate: 0 .6rem; } to { opacity: 1; translate: 0 0; } }
/* Écrire une réponse (page d'une discussion) : la barre du bas s'efface pour laisser la place. */
body.en-ecriture .barre-bas { display: none; }
body.en-ecriture.avec-barre { padding-bottom: 0; }
/* Dans l'app iPhone, la barre du bas est celle de l'app (native) : on cache celle du site. */
body.dans-app .barre-bas { display: none; }
body.dans-app.avec-barre { padding-bottom: 0; }
/* Menus du haut : seulement sur ordinateur. */
.nav-ordinateur { display: none; }

/* Téléphone (petit écran) : pas de titre en haut, ça prend de la place ; le ☰ de gestion flotte en haut à droite. */
@media (max-width: 899px) {
  header.site.sans-gestion { display: none; }
  header.site { position: fixed; top: 0; right: 0; left: auto; background: none; box-shadow: none; }
  header.site .dedans { padding: .4rem .6rem; }
  header.site h1 { display: none; }
  .menu-gestion summary { background: var(--carte); box-shadow: var(--ombre); border-radius: 50%; width: 2.6rem; height: 2.6rem;
    display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
  .menu-gestion summary .pastille { position: absolute; top: -.2rem; right: -.3rem; }
  body:has(header.site:not(.sans-gestion)) main { padding-top: 3.4rem; }   /* la place du ☰ */
}

/* Ordinateur (grand écran) : la barre du haut, avec les menus visibles, comme avant ; plus de barre du bas. */
@media (min-width: 900px) {
  .barre-bas { display: none; }
  body.avec-barre { padding-bottom: 0; }
  header.site .dedans { max-width: 72rem; }
  .nav-ordinateur { display: flex; gap: .15rem; align-items: center; margin: 0 auto; }
  .nav-ordinateur a { padding: .4rem .7rem; border-radius: 1rem; color: var(--gris); text-decoration: none; font-size: .9rem; white-space: nowrap; }
  .nav-ordinateur a:hover { background: var(--survol); }
  .nav-ordinateur a.actif { color: var(--primaire); background: var(--primaire-clair); font-weight: 600; }
  main { max-width: 48rem; padding: 1.5rem 1rem; }
}
main { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: .75rem; padding: .85rem 1rem; margin: .75rem 0; box-shadow: var(--ombre); }
.meta { color: var(--gris); font-size: .85rem; }
textarea, input, select { width: 100%; padding: .55rem .7rem; border: 1px solid #ccd0d5; border-radius: .5rem; font: inherit; background: #fff; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--primaire-clair); border-color: var(--primaire); }
input[type=radio], input[type=checkbox] { width: auto; margin-right: .5rem; }
button { padding: .5rem 1.1rem; border-radius: 1.2rem; border: 0; background: var(--primaire); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.petit, .petit button { padding: .3rem .8rem; font-size: .8rem; }
.petit { font-size: .8rem; }
.helptext { display: block; font-size: .8rem; color: var(--gris); margin-top: .2rem; }
.errorlist { color: var(--rouge); padding-left: 1.2rem; margin: .25rem 0; }
.message { background: #e3f1e6; color: var(--vert); border-radius: .75rem; padding: .6rem .9rem; }
.pastille { display: inline-block; min-width: 1.1rem; padding: 0 .3rem; border-radius: 1rem; background: #e41e3f; color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.erreur { color: var(--rouge); background: #fdecee; border-radius: .75rem; padding: .6rem .9rem; }
a.bouton { display: inline-block; padding: .5rem 1.1rem; border-radius: 1.2rem; background: var(--primaire); color: #fff;
  font-weight: 600; text-decoration: none; }
a.bouton:hover { filter: brightness(1.08); }
/* Fiche d'une copropriété (superuser) : adresses, allées, groupes de discussion. */
.adresse-copro { padding: .5rem 0; border-top: 1px solid var(--bord); }
.allees { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .35rem; }
.allees form.allee { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .6rem;
  border-radius: 1rem; background: var(--primaire-clair); font-size: .85rem; }
.allees form.allee button { background: none; color: var(--gris); padding: 0 .35rem; font-size: 1rem; }
.allees form.ajout-allee input { width: 8rem; padding: .25rem .5rem; }
.adresse-groupe { padding: .3rem 0; }
.adresse-groupe label { display: flex; align-items: center; gap: .3rem; }
.adresse-groupe label.allee-groupe { margin-left: 1.6rem; }
/* Groupes de discussion : flèches pour changer leur ordre. */
.groupe-copro { display: flex; gap: .7rem; align-items: center; }
.groupe-copro .fleches { display: flex; flex-direction: column; gap: .25rem; }
.groupe-copro .fleches button { width: 2rem; padding: .15rem 0; font-size: .95rem; }
.groupe-copro .fleches button:disabled { opacity: .3; cursor: default; }