/* État des chambres — identité reprise d'Astreinte+ et tasks-app (charte CREPS Centre-Val de Loire). */

/* Police auto-hébergée (SIL Open Font License, voir fonts/OFL.txt). */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bleu-nuit:#094c79; --nuit:#031826; --bleu-clair:#e7f2fa;
  --orange:#f15a29; --orange-fonce:#c64a22; --orange-nuit:#a23a17;
  --encre:#16202c; --encre-2:#3a4956; --gris:#586573;
  --fond:#ffffff; --fond-doux:#f6f9fc; --trait:#e3eaf1; --trait-fort:#c3d0dc;
  --vert:#1f7a51; --vert-clair:#eef7f2; --vert-trait:#cbe4d5;
  --rouge:#a3271e; --rouge-clair:#fbeeec; --rouge-trait:#efc9c4;
  --ambre:#8a5a00; --ambre-clair:#fff5dc; --ambre-trait:#ecd49a;
  --r:.8rem; --r-s:.55rem;
  --ombre:0 1px 2px rgba(3,24,38,.05), 0 8px 24px rgba(3,24,38,.09);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond-doux);color:var(--encre);
  font:1rem/1.35 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:.2rem solid var(--orange);outline-offset:.15rem}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
[hidden]{display:none !important}

.page{min-height:100vh;display:flex;flex-direction:column}

/* Bandeau : titre et date, heure, compteurs (qui servent aussi de légende et de filtre). Sur téléphone, le titre
   et l'heure tiennent sur la première ligne, les compteurs passent dessous. */
.topbar{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  padding:.75rem 1rem;background:var(--bleu-nuit);color:#fff;border-bottom:.2rem solid var(--orange)}
/* Hexagones de la charte : serrés à droite, en miroir et plus discrets à gauche, comme sur Astreinte+. */
.topbar::before,.topbar::after{content:"";position:absolute;top:0;height:min(100%,6rem);pointer-events:none;
  background:url("../img/hexagones-bandeau.svg") no-repeat right center;background-size:auto 100%}
/* Bandeau sur plusieurs lignes (téléphone) : la bande d'hexagones s'estompe vers le bas. */
.topbar::after{right:0;width:min(60%,40rem);opacity:.35;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
/* À gauche le motif est plus large que sa zone : fondu vers le centre au lieu d'une coupure nette. */
.topbar::before{left:0;width:min(30%,22rem);transform:scaleX(-1);opacity:.16;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 75%);mask-image:linear-gradient(to right,transparent,#000 75%)}
.topbar > *{position:relative;z-index:1}
.brand{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none}
.brand img{flex:none;height:2.2rem;width:auto}
.brand-text{min-width:0;display:flex;flex-direction:column;line-height:1.2;
  border-left:1px solid rgba(255,255,255,.35);padding-left:.7rem}
.brand-text strong{font-size:1.15rem;letter-spacing:-.02em}
.brand-text small{font-size:.8rem;color:rgba(255,255,255,.85)}
.releve{white-space:nowrap}
@media (max-width:420px){   /* petit téléphone : « État des chambres » reste sur une ligne à côté de l'heure */
  .brand img{height:1.9rem}
  .brand-text strong{font-size:1.05rem}
  .topbar .horloge{font-size:1.7rem}
}

.compteurs{order:1;display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 100%}
.compteur{display:flex;align-items:center;gap:.45rem;padding:.35rem .85rem .35rem .65rem;border-radius:99rem;
  background:rgba(9,40,64,.55);border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;
  font-size:.9rem;white-space:nowrap}
.compteur::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--pastille)}
.compteur strong{font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums}
.compteur.urgent{--pastille:#ff8a5c}
.compteur.menage{--pastille:#f5c451}
.compteur.fait::before{content:"✓";width:auto;height:auto;background:none;color:#5fd39b;font-weight:800;line-height:1}
.compteur.fait[aria-current]::before{color:var(--vert)}
.compteur.occupee{--pastille:#f0776c}
.compteur.libre{--pastille:#5fd39b}
.compteur.inconnu{--pastille:#b6c4d1}
a.compteur:hover{background:rgba(9,40,64,.85)}
.compteur[aria-current]{background:#fff;border-color:#fff;color:var(--nuit)}
.compteur[aria-current]:hover{background:var(--bleu-clair)}
.compteur.vide{opacity:.6}

.horloge{flex:none;font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.alerte{padding:.5rem 1rem;background:var(--rouge);color:#fff;font-weight:700;text-align:center}
.hors-ligne{position:fixed;left:0;right:0;bottom:0;z-index:5}

/* Bâtiments, étages, chambres. Téléphone et tablette : la page défile, les bâtiments s'empilent. */
.batiments{position:relative;flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  align-content:start;gap:1rem;padding:1rem}
/* Bouton Pôles : en haut à droite de la zone des bâtiments, à hauteur des titres. Il ne prend aucune place. */
.bouton{position:absolute;top:1.7rem;right:2rem;z-index:1;padding:.3rem .85rem;border:1px solid var(--trait-fort);
  border-radius:99rem;background:var(--fond);color:var(--bleu-nuit);font-size:.8rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.bouton:hover{background:var(--bleu-clair);border-color:var(--bleu-nuit)}
.batiment{display:flex;flex-direction:column;gap:.7rem;padding:.9rem 1rem 1rem;background:var(--fond);
  border:1px solid var(--trait);border-radius:var(--r);box-shadow:var(--ombre)}
.batiment h2{font-size:1.2rem;line-height:1.2;letter-spacing:-.015em;color:var(--bleu-nuit)}
.etage{display:flex;flex-direction:column;gap:.4rem}
.etage h3{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem}

/* Une chambre. Les états passifs sont en teinte pâle (libre : vert, occupée : rouge, ménage : ambre), les deux
   états du ménage en couleur pleine (urgent : orange qui pulse, fait : vert). L'état se lit aussi sans la
   couleur : chaque carte porte son texte. */
.carte{display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-width:0;min-height:0;overflow:hidden;
  padding:.45rem .6rem;line-height:1.2;background:var(--fond);border:1px solid var(--trait);border-radius:var(--r-s)}
.carte strong{font-size:1.3rem;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--encre-2)}
.carte span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  font-size:.8rem;color:var(--gris);overflow-wrap:anywhere}
.carte.libre{background:var(--vert-clair);border-color:var(--vert-trait)}
.carte.libre strong{color:var(--vert)}
.carte.libre span{color:var(--vert);font-weight:600}
.carte.occupee{background:var(--rouge-clair);border-color:var(--rouge-trait)}
.carte.occupee strong{color:var(--rouge)}
.carte.occupee span{color:var(--encre-2)}
.carte.menage{background:var(--ambre-clair);border-color:var(--ambre-trait)}
.carte.menage strong,.carte.menage span{color:var(--ambre)}
.carte.menage span,.carte.urgent span,.carte.fait span{font-weight:700}
.carte.fait{background:var(--vert);border-color:var(--vert)}
.carte.fait strong,.carte.fait span{color:#fff}
/* Chambre à nettoyer ou déjà marquée : toute la carte est un bouton. */
.carte.action{padding:0}
.carte form{display:contents}
.carte button{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.1rem;width:100%;min-width:0;
  min-height:0;padding:.45rem .6rem;border:0;background:none;font:inherit;line-height:inherit;color:inherit;
  text-align:left;cursor:pointer}
.carte.action:hover{filter:brightness(1.07)}
.carte button:focus-visible{outline:.2rem solid var(--nuit);outline-offset:-.3rem}
.carte.urgent button:focus-visible,.carte.fait button:focus-visible{outline-color:#fff}
.carte.urgent{background:var(--orange-fonce);border-color:var(--orange-fonce);animation:urgent 2s ease-in-out infinite}
.carte.urgent strong,.carte.urgent span{color:#fff}
@keyframes urgent{50%{background:var(--orange-nuit);border-color:var(--orange-nuit)}}
.carte.inconnu{background:transparent;border:1px dashed var(--trait-fort)}

/* Grand écran en paysage (télévision, poste de bureau) : tout tient sans défilement. Les tailles sont en rem et
   le rem suit la plus petite dimension de l'écran : la même image en Full HD et en 4K. */
@media (min-width:1100px) and (min-aspect-ratio:3/2){
  html{font-size:min(1.6vh,.9vw)}
  .page{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .topbar{flex:none;flex-wrap:nowrap;gap:1.25rem;padding:.8rem 1.25rem}
  .topbar::after{-webkit-mask-image:none;mask-image:none}   /* une seule ligne : hexagones sur toute la hauteur */
  .brand{flex:none;gap:.9rem}
  .brand img{height:3rem}
  .brand-text{padding-left:.9rem;white-space:nowrap}
  .brand-text strong{font-size:1.5rem}
  .brand-text small{font-size:1rem}
  /* Six compteurs au plus (les cinq états courants et « Inconnues ») : dimensionnés pour tenir sur une ligne. */
  .compteurs{order:0;flex:1 1 auto;gap:.45rem;flex-wrap:nowrap}
  .compteur{font-size:.95rem;padding:.4rem .8rem .4rem .6rem;gap:.4rem}
  .compteur strong{font-size:1.5rem}
  .compteur::before{width:.8rem;height:.8rem}
  .bouton{top:1.75rem;right:2.25rem;font-size:.9rem;padding:.3rem 1rem}
  .horloge{font-size:3rem}
  .alerte{flex:none;font-size:1.1rem}

  .batiments{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;align-content:stretch;min-height:0}
  .batiment{min-height:0}
  .batiment h2{font-size:1.4rem}
  .etage{flex:1;min-height:0}
  .etage h3{font-size:.8rem}
  /* 5 colonnes : même nombre que COLONNES dans main.py, qui en déduit le nombre de rangées (rangs-N). */
  .cartes{flex:1;min-height:0;grid-template-columns:repeat(5,1fr)}
  .rangs-4 .cartes{grid-template-rows:repeat(4,1fr)}
  .rangs-5 .cartes{grid-template-rows:repeat(5,1fr)}
  .carte:not(.action),.carte button{padding:.4rem .7rem}
  .carte strong{font-size:1.9rem}
  .carte span{font-size:.95rem}
  /* Trois bâtiments : cartes plus étroites et plus basses (5 rangées pour Pôles), texte réduit. */
  .batiments-3 .carte:not(.action),.batiments-3 .carte button{padding:.35rem .55rem}
  .batiments-3 .carte strong{font-size:1.45rem}
  .batiments-3 .carte span{font-size:.8rem}
}