/* Portail Connecticut — même langage que connecticut.paris : blanc, noir, légendes en capitales, wordmark pleine largeur. */
:root { --ink: #000; --paper: #fff; --pad: 12px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font: 700 12px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--pad);
}

.wordmark { margin: 0; line-height: 0; }
.wordmark img { display: block; width: 100%; height: auto; }

.meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pad); margin-top: 8px; min-height: 15px; }
#who { text-align: right; }

/* Boutons-liens : même apparence que les liens MAIL / INSTAGRAM du site */
.link {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; background: none; border: 0; padding: 0; margin: 0;
  text-decoration: underline; cursor: pointer;
}
.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

main { margin-top: 56px; }

/* Une ligne = un outil (ou l'action de connexion). Le nom est l'élément fort de la page.
   Les filets suivent la colonne du logo ; seul le fond noir du survol déborde de 12 px de chaque côté. */
.tools, #state-signin { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--ink); }
.tools > li { margin: 0; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--pad);
  row-gap: 12px;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 16px 0 14px;
  border: 0;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.row .name {
  grid-column: 1 / -1;
  font-size: clamp(34px, 8.6vw, 116px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .9;
}
.row .open { text-decoration: underline; }
.row:hover, .row:focus-visible { background: var(--ink); color: var(--paper); box-shadow: calc(-1 * var(--pad)) 0 0 var(--ink), var(--pad) 0 0 var(--ink); }
.row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Textes explicatifs : phrases lisibles, pas en capitales */
.note { margin: 0; max-width: 60ch; font-size: 14px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.actions { display: flex; gap: 24px; margin: 18px 0 0; }

@media (max-width: 520px) {
  main { margin-top: 36px; }
  .row { row-gap: 10px; padding-top: 14px; }
  .meta { flex-wrap: wrap; }
}