/* Feuille unique, servie par Caddy. Aucune ressource externe : ces pages
   doivent s'afficher même si tout le reste est en panne.

   Les teintes reprennent la palette « primary » de l'application
   (app.integration.hubwatt.fr) : une personne qui arrive ici depuis le portail
   doit reconnaître la maison. */
:root {
  color-scheme: light dark;
  --encre: #1a1a1a;
  --encre-douce: #4b5563;      /* AA sur fond clair, contrairement à un gris moyen */
  --fond: #fff;
  --trait: #e5e7eb;
  --accent: #207691;           /* primary-500 */
  --accent-fonce: #195c71;     /* primary-600, au survol */
  --accent-encre: #fff;
  --alerte-fond: #fff0ee;
  --alerte-encre: #92372f;
  --alerte-trait: #f3c9c4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e8e8e8;
    --encre-douce: #9ca3af;
    --fond: #161616;
    --trait: #3a3a3a;
    --accent: #2b9dc1;         /* primary-400 : le 500 manque de contraste sur fond sombre */
    --accent-fonce: #207691;
    --accent-encre: #06222b;
    --alerte-fond: #2a1512;
    --alerte-encre: #f0b3ab;
    --alerte-trait: #5c2a24;
  }
}
* { box-sizing: border-box; }
body { margin:0; padding:2.5rem 1.25rem; background:var(--fond); color:var(--encre);
       font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:34rem; margin:0 auto; }
h1 { font-size:1.5rem; margin:0 0 .25rem; }
p.chapeau { color:var(--encre-douce); margin:0 0 2rem; }
a.bouton, button { display:block; width:100%; padding:.85rem 1rem; margin:.6rem 0;
                   border:1px solid var(--trait); border-radius:.4rem; background:transparent;
                   color:var(--encre); font:inherit; text-align:center; text-decoration:none; cursor:pointer; }
a.bouton.principal, button { background:var(--accent); border-color:var(--accent); color:var(--accent-encre); font-weight:600; }
a.bouton.principal:hover, button:hover { background:var(--accent-fonce); border-color:var(--accent-fonce); }
a.bouton:not(.principal):hover { border-color:var(--accent); color:var(--accent); }
label { display:block; margin:1rem 0 .25rem; font-weight:600; font-size:.95rem; }
input { width:100%; padding:.7rem; border:1px solid var(--trait); border-radius:.4rem;
        background:var(--fond); color:var(--encre); font:inherit; }
input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
a { color:var(--accent); }
.reproche { margin:0 0 1rem; padding:.7rem .9rem; border-radius:.4rem;
            background:var(--alerte-fond); color:var(--alerte-encre);
            border:1px solid var(--alerte-trait); font-size:.95rem; }
.reproche:empty { display:none; }   /* le gabarit laisse la place vide */
.note { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--trait);
        color:var(--encre-douce); font-size:.9rem; }
.deux { display:flex; gap:.75rem; }
.deux > div { flex:1; }