/* =====================================================================
   Dispositif de transmission posthume — feuille de style

   Les couleurs sont celles des sites de Thierry Piras : fond sable,
   encadrés bruns. Volontairement pas des couleurs de deuil.
   ===================================================================== */
:root{
  --sable:#EFE3CE; --sable-clair:#F7F0E3;
  --brun:#6B4A2B; --brun-clair:#A3845E;
  --encre:#2E2A26; --filet:#CBB796; --gris:#7D766D;
  --vert:#4A6B3A; --brique:#9C3B2E;
  --rayon:6px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sable); color:var(--encre);
  font-family:Calibri,Carlito,Lato,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.55;
}
a{color:var(--brun);}
h1,h2,h3{color:var(--brun); margin:0 0 .4em; line-height:1.25;}
h1{font-size:1.85rem;} h2{font-size:1.3rem;} h3{font-size:1.08rem;}
p{margin:0 0 .8em;}
small,.gris{color:var(--gris);}

.page{max-width:1080px; margin:0 auto; padding:24px 16px 64px;}
.etroit{max-width:460px;}

/* --- l'en-tête ------------------------------------------------------ */
.bandeau{
  display:flex; align-items:center; gap:14px;
  padding:16px 0 14px; border-bottom:1px solid var(--filet); margin-bottom:22px;
  flex-wrap:wrap;
}
.sceau{width:44px; height:44px; flex:0 0 auto;}
.bandeau h1{font-size:1.25rem; margin:0;}
.bandeau .pousse{margin-left:auto;}

/* --- les encadrés --------------------------------------------------- */
.cadre{
  border:1px solid var(--brun); border-radius:var(--rayon);
  padding:16px 18px; margin:0 0 16px; background:var(--sable-clair);
}
.cadre.alerte{border-color:var(--brique);}
.cadre.bon{border-color:var(--vert);}
.cadre h2,.cadre h3{margin-top:0;}

/* --- les boutons ---------------------------------------------------- */
button,.bouton{
  font:inherit; font-weight:600; cursor:pointer;
  background:transparent; color:var(--brun);
  border:1.5px solid var(--brun); border-radius:var(--rayon);
  padding:9px 16px; display:inline-block; text-decoration:none;
}
button:hover,.bouton:hover{background:var(--brun); color:var(--sable-clair);}
button:disabled{opacity:.45; cursor:not-allowed;}
button.principal{background:var(--brun); color:var(--sable-clair);}
button.principal:hover{background:var(--encre); border-color:var(--encre);}
button.danger{border-color:var(--brique); color:var(--brique);}
button.danger:hover{background:var(--brique); color:#fff;}
button.discret{border-color:var(--filet); color:var(--gris); font-weight:400;}

/* --- les champs ----------------------------------------------------- */
label{display:block; font-weight:600; margin:12px 0 4px; color:var(--brun);}
input,select,textarea{
  font:inherit; width:100%; padding:9px 11px; color:var(--encre);
  background:#fff; border:1px solid var(--filet); border-radius:var(--rayon);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brun-clair); border-color:var(--brun);}
textarea{min-height:120px; resize:vertical;}
input.code{font-size:1.5rem; letter-spacing:.35em; text-align:center; font-family:ui-monospace,Consolas,monospace;}
.aide{font-size:.9rem; color:var(--gris); margin:4px 0 0;}

/* --- les tableaux --------------------------------------------------- */
table{border-collapse:collapse; width:100%; margin:8px 0 14px;}
th,td{text-align:left; padding:7px 9px; border-bottom:1px solid var(--filet); vertical-align:top;}
th{color:var(--brun); border-bottom:2px solid var(--brun); font-size:.95rem;}
td.num,th.num{text-align:right;}
tbody tr:hover{background:#fff8;}

/* --- les onglets ---------------------------------------------------- */
.onglets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;}
.onglets button{padding:7px 13px; border-color:var(--filet); color:var(--gris); font-weight:400;}
.onglets button.actif{border-color:var(--brun); color:var(--brun); font-weight:600;}

/* --- les pastilles d'état ------------------------------------------- */
.etat{display:inline-flex; align-items:center; gap:7px; font-weight:600;}
.pastille{width:11px; height:11px; border-radius:50%; border:1.5px solid currentColor;}
.etat.veille{color:var(--vert);} .etat.alerte{color:var(--brique);}
.etat.pre-ouverture,.etat.ouvert{color:var(--brique);} .etat.clos{color:var(--gris);}

.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;}
.liste-nue{list-style:none; padding:0; margin:0;}
.liste-nue li{padding:7px 0; border-bottom:1px solid var(--filet);}
.msg{padding:10px 14px; border-radius:var(--rayon); border:1px solid; margin:10px 0;}
.msg.err{border-color:var(--brique); color:var(--brique);}
.msg.ok{border-color:var(--vert); color:var(--vert);}
.cacher{display:none !important;}
.secret{
  font-family:ui-monospace,Consolas,monospace; font-size:1.15rem;
  background:#fff; border:1px dashed var(--brun); border-radius:var(--rayon);
  padding:10px 14px; margin:8px 0; word-break:break-all; user-select:all;
}
.pied{margin-top:40px; padding-top:14px; border-top:1px solid var(--filet);
      font-size:.88rem; color:var(--gris);}

@media (max-width:620px){
  body{font-size:16px;}
  .page{padding:16px 16px 48px;}
  table{display:block; overflow-x:auto;}
}