@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Un seul jeu de valeurs pilote tout le tableau */
  --feutre: #141414;
  --rainure: rgba(255, 255, 255, 0.07);
  --lettre: #f2f1ec;
  --lettre-douce: #c9c7c0;
  --lettre-discrete: #9c9a93;
  --signal: #e8b931;
  --en-service: #7ccf8a;
  --injoignable: #f08a78;
  --mur: #0b0b0b;
  --alu: #a4a6aa;

  --g: 8px;                       /* pas des rainures : tout s'aligne dessus */
  --marge: clamp(16px, 3.2vw, 56px);
  --nom: clamp(1.625rem, 0.9rem + 2.4vw, 3rem);
  --usage: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  --petit: 0.8125rem;
  --statut: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mur);
  color: var(--lettre);
  font-family: "Archivo", "Arial Narrow", sans-serif;
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--signal); color: var(--feutre); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
p, h1, h2, ul { margin: 0; padding: 0; }

/* Le cadre aluminium et le feutre rainuré */
.cadre {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0px, 1.2vw, 20px);
  display: flex;
}
.tableau {
  position: relative;
  flex: 1;
  background-color: var(--feutre);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--g) - 1px), var(--rainure) calc(var(--g) - 1px) var(--g));
  border: clamp(6px, 0.9vw, 14px) solid var(--alu);
  padding: calc(var(--g) * 5) var(--marge) calc(var(--g) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--g) * 5);
}

/* En-tête */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--g) * 2) calc(var(--g) * 4);
  padding-bottom: calc(var(--g) * 3);
  border-bottom: 1px solid rgba(242, 241, 236, 0.18);
}
.entete__nom {
  font-size: clamp(1.875rem, 1.1rem + 2.2vw, 3.25rem);
  font-weight: 700;
  font-stretch: 72%;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1.1;
  line-height: round(up, 1.1em, var(--g));
  overflow-wrap: anywhere;
}
.entete__etat { text-align: right; }
.entete__titre {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 600;
  font-stretch: 72%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lettre-douce);
}
.entete__verif {
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem);
  color: var(--lettre-discrete);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--g) * 1.5);
  min-height: 24px;
}
.reverifier {
  font: inherit;
  color: var(--lettre-douce);
  background: none;
  border: 0;
  padding: 10px 4px;
  margin: -10px -4px;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242, 241, 236, 0.35);
  cursor: pointer;
}
.reverifier:hover { color: var(--signal); text-decoration-color: currentColor; }

/* Annuaire : une colonne, puis deux sur grand écran pour tout voir sans défiler */
.annuaire { display: grid; gap: calc(var(--g) * 5); }
.colonne { display: grid; gap: calc(var(--g) * 5); align-content: start; }
/* Groupes : séparés par de vrais vides, comme des étages */
.groupe { display: grid; gap: calc(var(--g) * 1); }
.groupe__titre {
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  font-stretch: 72%;
  letter-spacing: 0.04em;
  line-height: calc(var(--g) * 3);
  text-transform: uppercase;
  color: var(--lettre-douce);
  padding-left: calc(var(--g) * 8); /* aligné sur les noms */
}
.lignes { list-style: none; display: grid; }

/* Une ligne = une application, cliquable sur toute sa largeur */
.ligne {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--g) * 6) minmax(0, 1fr) auto calc(var(--g) * 4);
  align-items: center;
  column-gap: calc(var(--g) * 2);
  padding: calc(var(--g) * 2) var(--g) calc(var(--g) * 2) 0;
  transition: background-color 200ms var(--ease);
}
.ligne__touche {
  align-self: start;
  margin-top: 0.35em;
  font-size: var(--petit);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lettre-discrete);
  text-align: center;
  font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem);
}
.ligne__texte { min-width: 0; }
.ligne__lien {
  display: block;
  font-size: var(--nom);
  font-weight: 600;
  font-stretch: 72%;
  letter-spacing: 0.035em;
  line-height: 1.15;
  line-height: round(up, 1.15em, var(--g));
  text-transform: uppercase;
  color: var(--lettre);
  text-decoration: none;
  text-wrap: balance;
  transition: color 200ms var(--ease);
}
a.ligne__lien::after {           /* toute la ligne devient la cible */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
a.ligne__lien:focus-visible { outline: none; }
a.ligne__lien:focus-visible::after { outline: 2px solid var(--signal); outline-offset: -2px; }
.ligne__usage {
  margin-top: var(--g);
  max-width: 68ch;
  font-size: var(--usage);
  line-height: 1.45;
  line-height: round(nearest, 1.45em, var(--g));
  color: var(--lettre-douce);
  text-wrap: pretty;
}
.ligne__secondaire {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: -12px 0 -12px 0.25em;
  vertical-align: baseline;
  color: var(--lettre-douce);
  font-size: 0.9em;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242, 241, 236, 0.35);
}
.ligne__secondaire:hover { color: var(--signal); text-decoration-color: currentColor; }

.ligne__statut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--statut);
  line-height: calc(var(--g) * 3);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lettre-discrete);
}
.pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ligne__statut[data-etat="ok"] { color: var(--en-service); }
.ligne__statut[data-etat="ko"] { color: var(--injoignable); }
.ligne__statut[data-etat="preparation"] { color: var(--lettre-discrete); }
.ligne__statut[data-etat="preparation"] .pastille { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.ligne__statut[data-etat="reveil"] { color: var(--lettre-douce); }
.ligne__statut[data-etat="verif"] .pastille, .ligne__statut[data-etat="reveil"] .pastille { animation: attente 1.2s ease-in-out infinite alternate; }
.statut__texte { display: inline-block; }
.statut__texte.change { animation: bascule 320ms var(--ease); }

.ligne__fleche {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--lettre-douce);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--ease), stroke 200ms var(--ease);
}

@media (hover: hover) {
  .ligne:not(.ligne--inactive):hover { background-color: rgba(255, 255, 255, 0.035); }
  .ligne:not(.ligne--inactive):hover .ligne__lien { color: var(--signal); }
  .ligne:not(.ligne--inactive):hover .ligne__fleche { transform: translateX(4px); stroke: var(--signal); }
}
.ligne:not(.ligne--inactive):active { background-color: rgba(255, 255, 255, 0.06); }
.ligne:focus-within .ligne__lien { color: var(--signal); }
.ligne--inactive .ligne__lien, .ligne--inactive .ligne__usage { color: var(--lettre-discrete); }
@media (hover: none) and (max-width: 1099px) {
  .ligne { grid-template-columns: minmax(0, 1fr) auto calc(var(--g) * 4); }
  .ligne__touche { display: none; }
  .groupe__titre { padding-left: 0; }
}
@media (hover: none) and (min-width: 1100px) { .ligne__touche { visibility: hidden; } }

/* Pied */
.pied {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--g) * 1) calc(var(--g) * 4);
  padding-top: calc(var(--g) * 3);
  border-top: 1px solid rgba(242, 241, 236, 0.18);
  font-size: var(--petit);
  color: var(--lettre-discrete);
}
.pied__devise { font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); color: var(--lettre-douce); }
@media (hover: none) { .pied__aide { display: none; } }

/* Page d'accès */
.acces { max-width: 34rem; display: grid; gap: calc(var(--g) * 2); margin-top: calc(var(--g) * 4); }
.acces__label {
  font-size: var(--nom);
  font-weight: 600;
  font-stretch: 72%;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1.15;
}
.acces__aide { color: var(--lettre-douce); font-size: var(--usage); }
.acces__champ { display: flex; gap: calc(var(--g) * 1.5); flex-wrap: wrap; }
.acces__champ input {
  flex: 1 1 14rem;
  min-height: 56px;
  padding: 0 calc(var(--g) * 2);
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--lettre);
  caret-color: var(--signal);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 241, 236, 0.35);
  border-radius: 2px;
}
.acces__champ input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-color: transparent; }
.acces__champ input[aria-invalid="true"] { border-color: var(--injoignable); }
.acces__bouton {
  min-height: 56px;
  padding: 0 calc(var(--g) * 3.5);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--feutre);
  background: var(--lettre);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 200ms var(--ease);
}
.acces__bouton:hover { background: var(--signal); }
.acces__bouton:disabled { opacity: 0.6; cursor: progress; }
.acces__erreur { color: var(--injoignable); font-size: var(--usage); }

/* Grand écran : deux colonnes, tout le tableau visible sans défiler */
@media (min-width: 1100px) {
  .annuaire { grid-template-columns: 1fr 1fr; column-gap: calc(var(--g) * 6); }
  .tableau { --nom: clamp(1.5rem, 0.6rem + 1.55vw, 2.75rem); --usage: clamp(0.9375rem, 0.8rem + 0.25vw, 1.125rem); --statut: 0.9375rem; }
  .ligne {
    padding-block: calc(var(--g) * 1);
    grid-template-columns: calc(var(--g) * 4) minmax(0, 1fr) calc(var(--g) * 4);
    grid-template-columns: calc(var(--g) * 4) minmax(0, 1fr) auto;
    grid-template-areas: "touche nom statut" "touche usage fleche";
    row-gap: var(--g);
    align-items: baseline;
  }
  .ligne__texte { display: contents; }
  .ligne__touche { grid-area: touche; margin-top: 0; }
  .ligne__lien { grid-area: nom; }
  .ligne__usage { grid-area: usage; margin-top: 0; }
  .ligne__statut { grid-area: statut; justify-self: end; }
  .ligne__fleche { grid-area: fleche; justify-self: end; align-self: center; }
  .groupe__titre { padding-left: calc(var(--g) * 6); }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .tableau { gap: calc(var(--g) * 3); padding-top: calc(var(--g) * 3); --nom: clamp(1.375rem, 0.5rem + 1.35vw, 2.25rem); --usage: 0.9375rem; }
  .entete { padding-bottom: calc(var(--g) * 2); }
  .annuaire, .colonne { gap: calc(var(--g) * 2.5); }
  .ligne { padding-block: 0; row-gap: 0; }
  .ligne__usage { margin-top: 0; }
  .pied { padding-top: calc(var(--g) * 2); }
}
@media (min-width: 1100px) and (max-height: 680px) {
  .tableau { gap: calc(var(--g) * 2); padding-top: calc(var(--g) * 2.5); padding-bottom: calc(var(--g) * 2); --usage: 0.875rem; }
  .annuaire, .colonne { gap: calc(var(--g) * 2); }
  .entete { padding-bottom: calc(var(--g) * 1.5); }
  .pied { padding-top: calc(var(--g) * 1.5); }
}
@media (min-width: 1700px) and (min-height: 1000px) {
  .tableau { --nom: clamp(2.5rem, 1rem + 1.6vw, 3.5rem); --usage: 1.25rem; --statut: 1.25rem; }
  .annuaire, .colonne { gap: calc(var(--g) * 6); }
}
@media (max-width: 1099px) {
  .entete__etat { text-align: left; }
  .entete__verif { justify-content: flex-start; }
}

@media (max-width: 480px) { .acces__bouton { flex: 1 1 100%; } }

/* Petits écrans et tablette en portrait */
@media (max-width: 760px) {
  .tableau { gap: calc(var(--g) * 4); padding-top: calc(var(--g) * 3); }
  .entete__etat { text-align: left; }
  .entete__verif { justify-content: flex-start; }
  .groupe__titre { padding-left: 0; }
  .ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "texte fleche" "statut fleche";
    row-gap: calc(var(--g) * 1);
    padding-right: 0;
  }
  .ligne__touche { display: none; }
  .ligne__texte { grid-area: texte; }
  .ligne__statut { grid-area: statut; }
  .ligne__fleche { grid-area: fleche; }
}

/* Mouvement */
@keyframes attente { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bascule { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}