:root {
  --papier: #F3F4F6;
  --surface: #FFFFFF;
  --encre: #1B2530;
  --encre-2: #4A5764;
  --encre-3: #7A8592;
  --trait: #DFE3E8;
  --action: #2F6FED;
  --rayon: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--action); }

.barre {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border-bottom: 1px solid var(--trait);
  padding: 14px 24px;
}
.marque { font-weight: 600; letter-spacing: -.01em; }
.qui { margin-left: auto; font-size: .86rem; color: var(--encre-3); }
.qui a { margin-left: 12px; }

.wrap { max-width: 720px; margin: 0 auto; padding: 34px 20px 60px; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 24px; letter-spacing: -.015em; }
.note { font-size: .86rem; color: var(--encre-3); margin-top: 26px; }
.erreur {
  background: #FDECEA; border: 1px solid #F5C6C2; color: #8A2620;
  padding: 10px 14px; border-radius: 8px; font-size: .9rem;
}

.sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 4px solid var(--accent, var(--trait));
  border-radius: var(--rayon); padding: 14px 18px;
}
.site .embleme { display: inline-flex; flex: 0 0 auto; }
.site .embleme svg { width: 22px; height: 22px; }
.titre { font-weight: 500; display: flex; flex-direction: column; }
.titre small { font-size: .8rem; color: var(--encre-3); font-weight: 400; }
.site form { margin-left: auto; }
.site-ferme { opacity: .6; }
.indisponible {
  margin-left: auto; font-size: .8rem; color: var(--encre-3);
  border: 1px dashed var(--trait); border-radius: 100px; padding: 4px 12px;
}

button {
  font: 500 .9rem/1 Inter, sans-serif; color: #fff; background: var(--action);
  border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
button:hover { background: #2559C4; }

.entree {
  max-width: 380px; margin: 9vh auto; background: var(--surface);
  border: 1px solid var(--trait); border-radius: 14px; padding: 30px;
}
.entree h1 { margin-bottom: 18px; }
.entree label { display: block; font-size: .84rem; color: var(--encre-2); margin: 14px 0 5px; }
.entree input {
  width: 100%; font: 16px Inter, sans-serif; padding: 11px 13px;
  border: 1px solid var(--trait); border-radius: 8px; background: #fff;
}
.entree input:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: transparent; }
.entree button { width: 100%; margin-top: 20px; padding: 12px; }