/* Le portail de l'habitant. Aucune ressource extérieure : ni police, ni script,
   ni image appelée ailleurs. Une page qui dépend d'un tiers expose l'adresse IP
   de l'habitant et tombe au sous-sol, là où il en a le plus besoin. */
:root{
  --navy:#0B1129; --creme:#F5F2EB; --vert:#0F9E78; --vert-fonce:#0B7A5C;
  --trait:#DCD6C8; --gris:#5B6070; --rouge:#B23B2E;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--police); font-size:16px; line-height:1.5;
  color:var(--navy); background:var(--creme);
  -webkit-text-size-adjust:100%;
}

/* ── La barre ─────────────────────────────────────────────────────────── */
.barre{
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--navy); color:#fff;
}
.marque{font-weight:700; letter-spacing:.02em; font-size:18px}
.langues{margin-left:auto; display:flex; gap:4px}
.langues button{
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff;
  border-radius:999px; padding:6px 12px; font:inherit; font-size:14px; cursor:pointer;
  min-height:36px;
}
.langues button[aria-current="true"]{background:#fff; color:var(--navy); border-color:#fff; font-weight:600}
.lien-sortie{
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff;
  border-radius:8px; padding:8px 14px; font:inherit; font-size:14px; cursor:pointer;
  min-height:40px;
  /* ⚠️ « Me déconnecter » passait à la ligne sur un téléphone et doublait la
     hauteur du bandeau. Mesuré à 390 px. */
  white-space:nowrap;
}

/* ── L'entrée ─────────────────────────────────────────────────────────── */
.entree{max-width:440px; margin:0 auto; padding:32px 20px 48px}
.entree h1{font-size:26px; margin:0 0 8px}
.sous{color:var(--gris); margin:0 0 28px}
label{display:block; font-weight:600; font-size:14px; margin:16px 0 6px}
input, textarea{
  width:100%; padding:12px 14px; font:inherit;
  border:1px solid var(--trait); border-radius:10px; background:#fff; color:var(--navy);
}
input:focus, textarea:focus{outline:2px solid var(--vert); outline-offset:1px; border-color:var(--vert)}
.principal{
  margin-top:20px; width:100%; min-height:48px; padding:12px 18px;
  background:var(--vert); color:#fff; border:0; border-radius:10px;
  font:inherit; font-weight:600; cursor:pointer;
}
.principal:hover{background:var(--vert-fonce)}
.principal[disabled]{opacity:.55; cursor:default}
.erreur{color:var(--rouge); font-size:14px; margin-top:12px}
.aide{font-size:14px; color:var(--gris); margin-top:24px}
.aide a{color:var(--vert-fonce); display:inline-block; margin-top:6px}
.borne{
  margin-top:28px; padding:14px 16px; font-size:14px; color:var(--gris);
  background:#fff; border:1px solid var(--trait); border-radius:10px;
}

/* ── Le portail ───────────────────────────────────────────────────────── */
.portail{max-width:760px; margin:0 auto; padding:0 20px 56px}
.onglets{
  display:flex; gap:6px; overflow-x:auto; padding:16px 0;
  -webkit-overflow-scrolling:touch;
  /* ⚠️ La barre de défilement du système s'affichait SOUS les onglets, épaisse
     et grise, sur un téléphone de 390 px : elle mangeait un centimètre et
     donnait l'air d'un défaut. Le défilement reste, seule la barre part. */
  scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglets button{
  flex:0 0 auto; min-height:44px; padding:10px 16px; font:inherit; font-size:15px;
  background:#fff; color:var(--navy); border:1px solid var(--trait);
  border-radius:999px; cursor:pointer; white-space:nowrap;
}
.onglets button[aria-selected="true"]{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:600}
.vue h2{font-size:19px; margin:24px 0 12px}
.liste{display:flex; flex-direction:column; gap:10px}
.carte{
  background:#fff; border:1px solid var(--trait); border-radius:12px; padding:14px 16px;
}
.carte h3{margin:0 0 4px; font-size:16px}
.carte p{margin:4px 0; font-size:14px; color:var(--gris)}
.carte .chiffre{font-variant-numeric:tabular-nums; color:var(--navy); font-weight:600}
.carte a.ouvrir{
  display:inline-block; margin-top:10px; min-height:40px; line-height:40px;
  padding:0 16px; background:var(--vert); color:#fff; border-radius:8px;
  text-decoration:none; font-size:14px; font-weight:600;
}
.carte button.geste{
  margin-top:10px; min-height:40px; padding:0 16px; font:inherit; font-size:14px;
  background:#fff; color:var(--rouge); border:1px solid var(--rouge);
  border-radius:8px; cursor:pointer;
}
.note{font-size:13px; color:var(--gris); margin-top:14px}
.tableau{width:100%; overflow-x:auto}
.tableau table{border-collapse:collapse; width:100%; font-size:14px}
.tableau th, .tableau td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--trait)}
.tableau td.nombre{text-align:right; font-variant-numeric:tabular-nums}
#form-reponse{margin-top:20px}

.pied{
  padding:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom));
  text-align:center; font-size:12px; color:var(--gris);
}
@media (max-width:420px){
  .entree h1{font-size:22px}
  .barre{padding-left:14px; padding-right:14px; gap:10px}
  .marque{font-size:16px}
  .langues button{padding:6px 9px; font-size:13px}
  .lien-sortie{padding:8px 10px; font-size:13px}
}